diff --git a/apps/web/src/components/SettingsPane.tsx b/apps/web/src/components/SettingsPane.tsx
index 3a4f6abf..84731159 100644
--- a/apps/web/src/components/SettingsPane.tsx
+++ b/apps/web/src/components/SettingsPane.tsx
@@ -59,7 +59,7 @@ export const SettingsPane = ({
             <p className="mt-0.5 truncate text-xs font-medium text-slate-400">{t("settings.subtitle")}</p>
           </div>
         </div>
-        <ThemeToggle />
+        <ThemeToggle className="inline-flex" />
       </header>
 
       <div className="min-w-0 flex-1 overflow-x-hidden overflow-y-auto px-4 py-4 lg:px-6 lg:py-6">
diff --git a/apps/web/src/components/ThemeToggle.tsx b/apps/web/src/components/ThemeToggle.tsx
index e44c9848..ecb90204 100644
--- a/apps/web/src/components/ThemeToggle.tsx
+++ b/apps/web/src/components/ThemeToggle.tsx
@@ -1,9 +1,10 @@
 import { MoonStar, SunMedium } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 import { useTheme } from "./ThemeProvider";
 
-export const ThemeToggle = () => {
+export const ThemeToggle = ({ className }: { className?: string }) => {
   const { t } = useTranslation();
   const { resolvedTheme, setPreference } = useTheme();
   const nextTheme = resolvedTheme === "dark" ? "light" : "dark";
@@ -11,7 +12,10 @@ export const ThemeToggle = () => {
 
   return (
     <Button
-      className="hidden h-8 w-8 text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-950 focus-visible:ring-2 focus-visible:ring-slate-300 lg:inline-flex"
+      className={cn(
+        "hidden h-8 w-8 text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-950 focus-visible:ring-2 focus-visible:ring-slate-300 lg:inline-flex",
+        className
+      )}
       size="icon"
       variant="ghost"
       title={label}