diff --git a/src/components/mode-toggle.tsx b/src/components/mode-toggle.tsx
deleted file mode 100644
index d70a48c..0000000
--- a/src/components/mode-toggle.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Moon, Sun } from "lucide-react"
-
-import { Button } from "@/components/ui/button"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { useTheme } from "@/components/theme-provider"
-
-export function ModeToggle() {
-  const { setTheme } = useTheme()
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline" size="icon">
-          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-          <span className="sr-only">Toggle theme</span>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
-        <DropdownMenuItem onClick={() => setTheme("light")}>
-          Light
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("dark")}>
-          Dark
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("system")}>
-          System
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
diff --git a/src/components/site-header.tsx b/src/components/site-header.tsx
index 65297fc..5123fba 100644
--- a/src/components/site-header.tsx
+++ b/src/components/site-header.tsx
@@ -1,5 +1,5 @@
 import { Link } from '@tanstack/react-router'
-import { ModeToggle } from "@/components/mode-toggle"
+import { ModeToggle } from "@/components/theme/mode-toggle"
 import { Icons } from "@/components/icons"
 import { Button } from "@/components/ui/button"
 import { GraduationCap, Menu } from "lucide-react"
diff --git a/src/components/theme/mode-toggle.tsx b/src/components/theme/mode-toggle.tsx
new file mode 100644
index 0000000..53d1a90
--- /dev/null
+++ b/src/components/theme/mode-toggle.tsx
@@ -0,0 +1,19 @@
+import { Moon, Sun } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { useTheme } from "@/components/theme/theme-provider"
+
+export function ModeToggle() {
+  const { theme, setTheme } = useTheme()
+  
+  const toggleTheme = () => {
+    setTheme(theme === "dark" ? "light" : "dark")
+  }
+
+  return (
+    <Button variant="outline" size="icon" onClick={toggleTheme}>
+      <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+      <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+      <span className="sr-only">Toggle theme</span>
+    </Button>
+  )
+}
\ No newline at end of file
diff --git a/src/components/theme-provider.tsx b/src/components/theme/theme-provider.tsx
similarity index 100%
rename from src/components/theme-provider.tsx
rename to src/components/theme/theme-provider.tsx
diff --git a/src/main.tsx b/src/main.tsx
index 54d582e..c5dbbac 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -2,7 +2,7 @@ import { StrictMode } from 'react'
 import ReactDOM from 'react-dom/client'
 import './index.css'
 import { RouterProvider, createRouter } from '@tanstack/react-router'
-import { ThemeProvider } from "@/components/theme-provider"
+import { ThemeProvider } from "@/components/theme/theme-provider"
 
 // Import the generated route tree
 import { routeTree } from './routeTree.gen'