diff --git a/src/lib/mantine/mantine-provider.tsx b/src/lib/mantine/mantine-provider.tsx
index f51b906..a81a0d3 100644
--- a/src/lib/mantine/mantine-provider.tsx
+++ b/src/lib/mantine/mantine-provider.tsx
@@ -1,6 +1,7 @@
 import { useAuth } from "@/contexts/auth-context";
 import { createTheme, MantineProvider as MantineProviderCore } from "@mantine/core";
 import ColorSchemeProvider from "./color-scheme-provider";
+import { useState, useEffect } from "react";
 
 const commonInputStyles = {
   label: {
@@ -45,10 +46,18 @@ const theme = createTheme({
 
 const MantineProvider = ({ children }: { children: React.ReactNode }) => {
   const { metadata } = useAuth()
+  const [isHydrated, setIsHydrated] = useState(false)
+
+  useEffect(() => {
+    setIsHydrated(true)
+  }, [])
+
+  const colorScheme = isHydrated ? (metadata.colorScheme || 'auto') : 'auto'
+  const primaryColor = isHydrated ? (metadata.accentColor || 'blue') : 'blue'
 
   return <MantineProviderCore
-    defaultColorScheme={metadata.colorScheme || 'auto'}
-    theme={{ ...theme, primaryColor: metadata.accentColor || 'blue' }}
+    defaultColorScheme={colorScheme}
+    theme={{ ...theme, primaryColor }}
   >
     <ColorSchemeProvider>
       {children}