diff --git a/apps/web/components/providers/Providers.tsx b/apps/web/components/providers/Providers.tsx
index 60b6477c..44ea6e07 100644
--- a/apps/web/components/providers/Providers.tsx
+++ b/apps/web/components/providers/Providers.tsx
@@ -3,18 +3,26 @@ import { dark } from '@clerk/themes'
 import { ClerkProvider } from "@clerk/nextjs";
 import { ThemeProvider } from "@/components/theme-provider";
 import { Toaster } from "react-hot-toast";
+import { useEffect, useState } from 'react';
 
 interface ProvidersProps {
   children: React.ReactNode;
 }
 
 export function Providers({ children }: ProvidersProps) {
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  if (!isClient) return null;
   return (
     // dark mode
     <ClerkProvider appearance={{ layout: { logoPlacement: "inside" }, baseTheme: dark }}>
-      <ThemeProvider
+      <ThemeProvider  
         attribute="class"
-        defaultTheme="system"
+        defaultTheme="baseTheme"
         enableSystem
         disableTransitionOnChange
       >