diff --git a/Frontend/src/components/theme-provider.tsx b/Frontend/src/components/theme-provider.tsx
index cbcd77d..3984c58 100644
--- a/Frontend/src/components/theme-provider.tsx
+++ b/Frontend/src/components/theme-provider.tsx
@@ -13,7 +13,7 @@ export function ThemeProvider({
   storageKey = "vite-ui-theme",
   ...props
 }: any) {
-  const [theme, setTheme] = useState(
+  const [theme, setThemeState] = useState(
     () => localStorage.getItem(storageKey) || defaultTheme
   );
 
@@ -37,9 +37,9 @@ export function ThemeProvider({
 
   const value = {
     theme,
-    setTheme: (theme: string) => {
-      localStorage.setItem(storageKey, theme);
-      setTheme(theme);
+    setTheme: (newTheme: string) => {
+      localStorage.setItem(storageKey, newTheme);
+      setThemeState(newTheme);
     },
   };
 
diff --git a/Frontend/src/main.tsx b/Frontend/src/main.tsx
index 18b97e0..f8289b0 100644
--- a/Frontend/src/main.tsx
+++ b/Frontend/src/main.tsx
@@ -4,11 +4,14 @@ import "./index.css";
 import { Provider } from "react-redux";
 import App from "./App.tsx";
 import store from "./redux/store.ts";
+import { ThemeProvider } from "./components/theme-provider";
 
 createRoot(document.getElementById("root")!).render(
   // <StrictMode>
   <Provider store={store}>
-    <App />
+    <ThemeProvider defaultTheme="system" storageKey="vite-ui-theme">
+      <App />
+    </ThemeProvider>
   </Provider>
   // </StrictMode>,
 );