diff --git a/packages/frontend/index.html b/packages/frontend/index.html
index e586089..f26a7df 100644
--- a/packages/frontend/index.html
+++ b/packages/frontend/index.html
@@ -1,5 +1,7 @@
 <!DOCTYPE html>
-<html lang="en" class="dark">
+
+<html lang="en" class="">
+  <!-- class="dark" makes the app dark mode -->
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
@@ -8,10 +10,25 @@
     <style>
       html,
       body {
-        background-color: oklch(0.145 0 0);
-        color: oklch(0.985 0 0);
+        background-color: var(--background);
+        color: var(--foreground);
       }
     </style>
+
+    <script>
+      const theme = localStorage.getItem("theme");
+      if (theme === "dark") document.documentElement.classList.add("dark");
+      else if (theme === "light")
+        document.documentElement.classList.remove("dark");
+
+      if (theme === null) {
+        const prefersDark = window.matchMedia(
+          "(prefers-color-scheme: dark)"
+        ).matches;
+        if (prefersDark) document.documentElement.classList.add("dark");
+        else document.documentElement.classList.remove("dark");
+      }
+    </script>
   </head>
 
   <body>
diff --git a/packages/frontend/src/components/theme-toggle.tsx b/packages/frontend/src/components/theme-toggle.tsx
new file mode 100644
index 0000000..c1a182d
--- /dev/null
+++ b/packages/frontend/src/components/theme-toggle.tsx
@@ -0,0 +1,30 @@
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "@/components/theme-provider";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+function ThemeToggle({ className }: { className?: string }) {
+    const { theme, setTheme } = useTheme();
+    const resolvedTheme =
+        theme === "system"
+            ? window.matchMedia("(prefers-color-scheme: dark)").matches
+                ? "dark"
+                : "light"
+            : theme;
+    const isDark = resolvedTheme === "dark";
+
+    return (
+        <Button
+            type="button"
+            variant="dummy"
+            size="icon"
+            className={cn("hover:text-muted-foreground", className)}
+            onClick={() => setTheme(isDark ? "light" : "dark")}
+            title={isDark ? "Switch to light mode" : "Switch to dark mode"}
+        >
+            {isDark ? <Sun className="size-5" /> : <Moon className="size-5" />}
+        </Button>
+    );
+}
+
+export default ThemeToggle;
diff --git a/packages/frontend/src/pages/App.tsx b/packages/frontend/src/pages/App.tsx
index e7b7816..dc6597f 100644
--- a/packages/frontend/src/pages/App.tsx
+++ b/packages/frontend/src/pages/App.tsx
@@ -19,6 +19,7 @@ import { ProjectSelect } from "@/components/project-select";
 import { ServerConfigurationDialog } from "@/components/server-configuration-dialog";
 import { useAuthenticatedSession } from "@/components/session-provider";
 import SmallUserDisplay from "@/components/small-user-display";
+import ThemeToggle from "@/components/theme-toggle";
 import { Button } from "@/components/ui/button";
 import {
     DropdownMenu,
@@ -388,6 +389,7 @@ export default function App() {
                     )}
                 </div>
                 <div className={`flex gap-${BREATHING_ROOM} items-center`}>
+                    <ThemeToggle />
                     <DropdownMenu>
                         <DropdownMenuTrigger className="text-sm">
                             <SmallUserDisplay user={user} />
diff --git a/packages/frontend/src/pages/Landing.tsx b/packages/frontend/src/pages/Landing.tsx
index 654da18..0c82ecd 100644
--- a/packages/frontend/src/pages/Landing.tsx
+++ b/packages/frontend/src/pages/Landing.tsx
@@ -1,6 +1,7 @@
 import { Icon } from "@iconify/react";
 import { Link } from "react-router-dom";
 import { useSession } from "@/components/session-provider";
+import ThemeToggle from "@/components/theme-toggle";
 import { Button } from "@/components/ui/button";
 
 export default function Landing() {
@@ -11,6 +12,7 @@ export default function Landing() {
             <header className="relative flex items-center justify-center p-2 border-b">
                 <div className="text-3xl font-basteleur font-700">Issue</div>
                 <nav className="absolute right-2 flex items-center gap-4">
+                    <ThemeToggle />
                     {!isLoading && user ? (
                         <>
                             {user && (
