diff --git a/frontend/src/components/layout/ThemeToggle.tsx b/frontend/src/components/layout/ThemeToggle.tsx
index 93c4c8c..acc677d 100644
--- a/frontend/src/components/layout/ThemeToggle.tsx
+++ b/frontend/src/components/layout/ThemeToggle.tsx
@@ -1,6 +1,6 @@
 import { Moon, Sun } from "lucide-react"
 import { Button } from "@/components/ui/button"
-import { useTheme } from "@/components/theme-provider"
+import { useTheme } from "@/components/theme-context"
 
 export function ThemeToggle() {
   const { theme, toggleTheme } = useTheme()
diff --git a/frontend/src/components/theme-context.tsx b/frontend/src/components/theme-context.tsx
new file mode 100644
index 0000000..583d5c7
--- /dev/null
+++ b/frontend/src/components/theme-context.tsx
@@ -0,0 +1,20 @@
+import { createContext, useContext } from "react"
+
+export type Theme = "light" | "dark"
+
+export interface ThemeContextType {
+  theme: Theme
+  setTheme: (theme: Theme) => void
+  setThemeLocal: (theme: Theme) => void
+  toggleTheme: () => void
+}
+
+export const ThemeContext = createContext<ThemeContextType | undefined>(undefined)
+
+export const useTheme = () => {
+  const context = useContext(ThemeContext)
+  if (context === undefined) {
+    throw new Error("useTheme must be used within a ThemeProvider")
+  }
+  return context
+}