diff --git a/apps/web/src/app/projects/page.tsx b/apps/web/src/app/projects/page.tsx
index 3d66a3c56..7b4cb103c 100644
--- a/apps/web/src/app/projects/page.tsx
+++ b/apps/web/src/app/projects/page.tsx
@@ -36,6 +36,7 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { Skeleton } from "@/components/ui/skeleton";
+import { ThemeToggle } from "@/components/theme-toggle";
 import { useProjectStore } from "@/stores/project-store";
 import { useTimelineStore } from "@/stores/timeline-store";
 import type { TProject } from "@/types/project";
@@ -207,6 +208,7 @@ export default function ProjectsPage() {
               </div>
             ) : (
               <div className="flex items-center gap-2">
+                <ThemeToggle />
                 <Button
                   variant="outline"
                   onClick={() => setIsSelectionMode(true)}
diff --git a/apps/web/src/components/theme-toggle.tsx b/apps/web/src/components/theme-toggle.tsx
index 8302a19c6..fad94d1bb 100644
--- a/apps/web/src/components/theme-toggle.tsx
+++ b/apps/web/src/components/theme-toggle.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useEffect, useState } from "react";
 import { Button } from "./ui/button";
 import { Sun, Moon } from "lucide-react";
 import { useTheme } from "next-themes";
@@ -9,17 +10,43 @@ interface ThemeToggleProps {
 }
 
 export function ThemeToggle({ className }: ThemeToggleProps) {
-  const { theme, setTheme } = useTheme();
+  const { setTheme, resolvedTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // Avoid hydration mismatch by not rendering until mounted
+  if (!mounted) {
+    return (
+      <Button type="button" size="icon" variant="text" className={`h-7 ${className ?? ""}`}>
+        <span className="!size-[1.1rem]" />
+        <span className="sr-only">Toggle theme</span>
+      </Button>
+    );
+  }
+
+  const isDark = resolvedTheme === "dark";
 
   return (
     <Button
+      type="button"
       size="icon"
       variant="text"
-      className="h-7"
-      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+      className={`h-7 ${className ?? ""}`}
+      onClick={() => setTheme(isDark ? "light" : "dark")}
     >
-      <Sun className="!size-[1.1rem]" />
-      <span className="sr-only">{theme === "dark" ? "Light" : "Dark"}</span>
+      {isDark ? (
+        <Sun className="!size-[1.1rem]">
+          <title>Switch to light mode</title>
+        </Sun>
+      ) : (
+        <Moon className="!size-[1.1rem]">
+          <title>Switch to dark mode</title>
+        </Moon>
+      )}
+      <span className="sr-only">{isDark ? "Light mode" : "Dark mode"}</span>
     </Button>
   );
 }