diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index 7e32ea22d..16a5a64e1 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -1,4 +1,3 @@
-import { ThemeProvider } from "next-themes";
 import { Analytics } from "@vercel/analytics/react";
 import Script from "next/script";
 import "./globals.css";
@@ -10,6 +9,7 @@ import { baseMetaData } from "./metadata";
 import { defaultFont } from "../lib/font-config";
 import { BotIdClient } from "botid/client";
 import { env } from "@/env";
+import CustomThemeProvider from "@/components/theme-provider";
 
 export const metadata = baseMetaData;
 
@@ -35,7 +35,7 @@ export default function RootLayout({
         <BotIdClient protect={protectedRoutes} />
       </head>
       <body className={`${defaultFont.className} font-sans antialiased`}>
-        <ThemeProvider attribute="class" defaultTheme="dark">
+        <CustomThemeProvider attribute="class" defaultTheme="dark">
           <TooltipProvider>
             <StorageProvider>
               <ScenesMigrator>{children}</ScenesMigrator>
@@ -55,7 +55,7 @@ export default function RootLayout({
               data-track-sessions={false}
             />
           </TooltipProvider>
-        </ThemeProvider>
+        </CustomThemeProvider>
       </body>
     </html>
   );
diff --git a/apps/web/src/components/theme-provider.tsx b/apps/web/src/components/theme-provider.tsx
new file mode 100644
index 000000000..eee5a033f
--- /dev/null
+++ b/apps/web/src/components/theme-provider.tsx
@@ -0,0 +1,21 @@
+"use client"
+
+import { ThemeProvider, ThemeProviderProps } from "next-themes";
+import { useEffect, useState } from "react"
+
+interface CustomThemeProviderProps extends ThemeProviderProps {
+  children: React.ReactNode;
+}
+
+export default function CustomThemeProvider({ children, ...props }: CustomThemeProviderProps) {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return <>{children}</>;
+  }
+
+  return <ThemeProvider {...props}>{children}</ThemeProvider >
+}
diff --git a/apps/web/src/components/theme-toggle.tsx b/apps/web/src/components/theme-toggle.tsx
index 8302a19c6..fe3b4cd87 100644
--- a/apps/web/src/components/theme-toggle.tsx
+++ b/apps/web/src/components/theme-toggle.tsx
@@ -18,8 +18,12 @@ export function ThemeToggle({ className }: ThemeToggleProps) {
       className="h-7"
       onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
     >
-      <Sun className="!size-[1.1rem]" />
+      {theme === "dark" ? (
+        <Sun className="!size-[1.1rem]" />
+      ) : (<Moon className="!size-[1.1rem]" />)}
       <span className="sr-only">{theme === "dark" ? "Light" : "Dark"}</span>
     </Button>
   );
 }
+
+
