diff --git a/frontend/src/components/theme-provider.tsx b/frontend/src/components/theme-provider.tsx
index 5c08bb11..55ead9c5 100644
--- a/frontend/src/components/theme-provider.tsx
+++ b/frontend/src/components/theme-provider.tsx
@@ -2,10 +2,21 @@
 
 import { ThemeProvider as NextThemesProvider } from "next-themes";
 import { type ThemeProviderProps } from "next-themes/dist/types";
+import { useEffect, useState } from "react";
 
 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return <div className="bg-black h-screen w-screen" />;
+  }
+
   return (
-    <NextThemesProvider defaultTheme="dark" enableSystem {...props}>
+    <NextThemesProvider attribute="class" defaultTheme="dark" enableSystem {...props}>
       {children}
     </NextThemesProvider>
   );