diff --git a/frontend/app/login/page.tsx b/frontend/app/login/page.tsx
--- a/frontend/app/login/page.tsx
+++ b/frontend/app/login/page.tsx
@@ -5,6 +5,7 @@
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useForm } from "react-hook-form"
 import * as z from "zod"
+import { useTheme } from "next-themes"
 
 import { Button } from "@/components/ui/button"
 import {
@@ -22,6 +23,7 @@
   FieldLabel,
 } from "@/components/ui/field"
 import { Input } from "@/components/ui/input"
+import { Moon, Sun } from "lucide-react"
 
 const schema = z.object({
   username: z.string().min(1, { message: "Username is required." }),
@@ -33,6 +35,7 @@
 export default function LoginPage() {
   const router = useRouter()
   const [serverError, setServerError] = useState<string | null>(null)
+  const { resolvedTheme, setTheme } = useTheme()
 
   const {
     register,
@@ -66,7 +69,22 @@
     <div className="flex min-h-screen items-center justify-center bg-muted/40 p-4">
       <Card className="w-full max-w-sm">
         <CardHeader>
-          <CardTitle className="text-2xl">Sign in</CardTitle>
+          <CardTitle className="flex items-center justify-between text-2xl">
+            Sign in{" "}
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() =>
+                setTheme(resolvedTheme === "dark" ? "light" : "dark")
+              }
+            >
+              {resolvedTheme === "dark" ? (
+                <Sun className="h-4 w-4" />
+              ) : (
+                <Moon className="h-4 w-4" />
+              )}
+            </Button>
+          </CardTitle>
           <CardDescription>
             Enter your credentials to access the dashboard.
           </CardDescription>