diff --git a/app/src/app/layout.tsx b/app/src/app/layout.tsx
index 5b89b27..e2c2539 100644
--- a/app/src/app/layout.tsx
+++ b/app/src/app/layout.tsx
@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
+import { ThemeProvider } from "next-themes";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { Toaster } from "@/components/ui/sonner";
 import "./globals.css";
@@ -31,15 +32,23 @@ export default function RootLayout({
     <html
       lang="en"
       className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
+      suppressHydrationWarning
     >
       <body
         className="bg-background text-foreground flex min-h-full flex-col"
         suppressHydrationWarning
       >
-        <TooltipProvider>
-          {children}
-          <Toaster />
-        </TooltipProvider>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          <TooltipProvider>
+            {children}
+            <Toaster />
+          </TooltipProvider>
+        </ThemeProvider>
       </body>
     </html>
   );
diff --git a/app/src/app/login/page.tsx b/app/src/app/login/page.tsx
index b39710a..243a47c 100644
--- a/app/src/app/login/page.tsx
+++ b/app/src/app/login/page.tsx
@@ -4,6 +4,7 @@ import type { Metadata } from "next";
 import { redirect } from "next/navigation";
 import { getConfig } from "@/lib/config/load";
 import { getSession } from "@/lib/auth/session";
+import { ThemeToggle } from "@/components/layout/theme-toggle";
 import { LoginForm } from "./login-form";
 
 export const metadata: Metadata = { title: "Sign in" };
@@ -16,7 +17,10 @@ export default async function LoginPage() {
   if (session.userId) redirect("/");
 
   return (
-    <div className="flex min-h-full flex-1 items-center justify-center px-4">
+    <div className="relative flex min-h-full flex-1 items-center justify-center px-4">
+      <div className="absolute top-4 right-4">
+        <ThemeToggle />
+      </div>
       <LoginForm />
     </div>
   );
diff --git a/app/src/components/layout/nav.tsx b/app/src/components/layout/nav.tsx
index da3ed8c..273609d 100644
--- a/app/src/components/layout/nav.tsx
+++ b/app/src/components/layout/nav.tsx
@@ -5,6 +5,7 @@ import { usePathname, useRouter } from "next/navigation";
 import { Terminal, History, LogOut } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
+import { ThemeToggle } from "./theme-toggle";
 
 const links = [
   { href: "/", label: "Scripts", icon: Terminal },
@@ -54,17 +55,20 @@ export function Nav({
             ))}
           </nav>
         </div>
-        {authEnabled && (
-          <div className="flex shrink-0 items-center gap-2 sm:gap-3">
-            <span className="text-muted-foreground hidden max-w-32 truncate text-sm sm:inline-block">
-              {username}
-            </span>
-            <Button variant="ghost" size="sm" onClick={handleLogout}>
-              <LogOut className="size-4" />
-              <span className="sr-only sm:not-sr-only">Log out</span>
-            </Button>
-          </div>
-        )}
+        <div className="flex shrink-0 items-center gap-1 sm:gap-2">
+          <ThemeToggle />
+          {authEnabled && (
+            <>
+              <span className="text-muted-foreground hidden max-w-32 truncate text-sm sm:inline-block">
+                {username}
+              </span>
+              <Button variant="ghost" size="sm" onClick={handleLogout}>
+                <LogOut className="size-4" />
+                <span className="sr-only sm:not-sr-only">Log out</span>
+              </Button>
+            </>
+          )}
+        </div>
       </div>
     </header>
   );
diff --git a/app/src/components/layout/theme-toggle.tsx b/app/src/components/layout/theme-toggle.tsx
new file mode 100644
index 0000000..dfc7b5c
--- /dev/null
+++ b/app/src/components/layout/theme-toggle.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+import { Button } from "@/components/ui/button";
+
+export function ThemeToggle() {
+  const { resolvedTheme, setTheme } = useTheme();
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      className="relative"
+      aria-label="Toggle theme"
+      onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
+    >
+      <Sun className="size-4 scale-100 rotate-0 transition-transform dark:scale-0 dark:-rotate-90" />
+      <Moon className="absolute size-4 scale-0 rotate-90 transition-transform dark:scale-100 dark:rotate-0" />
+    </Button>
+  );
+}
