diff --git a/src/app/theme-provider.tsx b/src/app/theme-provider.tsx
index 4af23e7..defddf8 100644
--- a/src/app/theme-provider.tsx
+++ b/src/app/theme-provider.tsx
@@ -4,9 +4,9 @@ import { ComponentProps, ReactNode } from "react";
 
 const ThemeProvider = (props: ComponentProps<typeof NextThemeProvider>): ReactNode => {
     return (
-       <ThemeProvider {...props} attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
+       <NextThemeProvider {...props} attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
             {props.children}
-        </ThemeProvider>
+        </NextThemeProvider>
     )
 };
 
diff --git a/src/components/theme-switcher/ThemeSwitcher.tsx b/src/components/theme-switcher/ThemeSwitcher.tsx
index 1e38286..34c45d8 100644
--- a/src/components/theme-switcher/ThemeSwitcher.tsx
+++ b/src/components/theme-switcher/ThemeSwitcher.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { useTheme } from "next-themes";
 import { ReactNode, useCallback, useEffect, useState } from "react";
 import { Toggle } from "../ui/toggle";
@@ -15,11 +16,11 @@ export const ThemeSwitcher = ({
     const onThemeChange = useCallback(() => {
         setTheme(theme == "dark" ? "light" : "dark");
         setDark(!dark);
-    }, [theme, dark, setTheme]);
+    }, [theme, dark]);
 
     useEffect(() => {
         setDark(theme == "dark");
-    });
+    }, []);
 
     return (
         <Toggle pressed={dark} onPressedChange={onThemeChange}>