diff --git a/src/routes/Theme.svelte b/src/routes/Theme.svelte
index d6407ed2..fbac62f9 100644
--- a/src/routes/Theme.svelte
+++ b/src/routes/Theme.svelte
@@ -1,27 +1,28 @@
 <script lang="ts">
-    import Sun from "lucide-svelte/icons/sun";
-    import Moon from "lucide-svelte/icons/moon";
+  import Sun from "lucide-svelte/icons/sun";
+  import Moon from "lucide-svelte/icons/moon";
 
-    import { resetMode, setMode } from "mode-watcher";
-    import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
-    import { Button } from "$lib/components/ui/button/index.js";
+  import { setMode, mode } from "mode-watcher";
+  import { Button } from "$lib/components/ui/button/index.js";
+
+  function toggleTheme() {
+    setMode($mode === "dark" ? "light" : "dark");
+  }
 </script>
 
-<DropdownMenu.Root>
-<DropdownMenu.Trigger asChild let:builder>
-    <Button builders={[builder]} variant="outline" size="icon">
-    <Sun
-    class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
-    />
-    <Moon
-    class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
-    />
-    <span class="sr-only">Toggle theme</span>
-    </Button>
-</DropdownMenu.Trigger>
-<DropdownMenu.Content align="end">
-    <DropdownMenu.Item on:click={() => setMode("light")}>Light</DropdownMenu.Item>
-    <DropdownMenu.Item on:click={() => setMode("dark")}>Dark</DropdownMenu.Item>
-    <DropdownMenu.Item on:click={() => resetMode()}>System</DropdownMenu.Item>
-</DropdownMenu.Content>
-</DropdownMenu.Root>
+<Button
+  variant="outline"
+  size="icon"
+  on:click={toggleTheme}
+  aria-label="Toggle theme"
+>
+  <Sun
+    class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all
+           dark:-rotate-90 dark:scale-0"
+  />
+  <Moon
+    class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all
+           dark:rotate-0 dark:scale-100"
+  />
+  <span class="sr-only">Toggle theme</span>
+</Button>