diff --git a/web/index.html b/web/index.html
index 3773bd7..f3064e9 100644
--- a/web/index.html
+++ b/web/index.html
@@ -4,6 +4,16 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Collection</title>
+    <script>
+      try {
+        var t = localStorage.getItem("theme") || "system";
+        var dark =
+          t === "dark" ||
+          (t === "system" &&
+            window.matchMedia("(prefers-color-scheme: dark)").matches);
+        document.documentElement.classList.toggle("dark", dark);
+      } catch (e) {}
+    </script>
   </head>
   <body>
     <div id="root"></div>
diff --git a/web/src/shell/app-shell.tsx b/web/src/shell/app-shell.tsx
index 9262273..d7ff942 100644
--- a/web/src/shell/app-shell.tsx
+++ b/web/src/shell/app-shell.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next";
 import { useLogout } from "../api/queries";
 import { Button } from "@/components/ui/button";
 import { LangSwitch } from "./lang-switch";
+import { ThemeSwitch } from "./theme-switch";
 import { Sidebar } from "./sidebar";
 
 export function AppShell() {
@@ -22,6 +23,7 @@ export function AppShell() {
       <div className="flex flex-1 flex-col">
         <header className="flex items-center gap-4 border-b px-4 py-2">
           <div className="flex-1" />
+          <ThemeSwitch />
           <LangSwitch />
           <Button variant="ghost" size="sm" onClick={onSignOut}>
             {t("auth.signOut")}
