diff --git a/packages/twenty-front/src/modules/ui/theme/components/BaseThemeProvider.tsx b/packages/twenty-front/src/modules/ui/theme/components/BaseThemeProvider.tsx
index ca6425d31b..9710a638eb 100644
--- a/packages/twenty-front/src/modules/ui/theme/components/BaseThemeProvider.tsx
+++ b/packages/twenty-front/src/modules/ui/theme/components/BaseThemeProvider.tsx
@@ -1,6 +1,7 @@
 import { ThemeProvider } from '@emotion/react';
 import { createContext } from 'react';
 
+import { useSystemColorScheme } from '@/ui/theme/hooks/useSystemColorScheme';
 import { persistedColorSchemeState } from '@/ui/theme/states/persistedColorSchemeState';
 import { useRecoilState } from 'recoil';
 import { type ColorScheme } from 'twenty-ui/input';
@@ -18,10 +19,16 @@ export const BaseThemeProvider = ({ children }: BaseThemeProviderProps) => {
   const [persistedColorScheme, setPersistedColorScheme] = useRecoilState(
     persistedColorSchemeState,
   );
-  document.documentElement.className =
-    persistedColorScheme === 'Dark' ? 'dark' : 'light';
+  const systemColorScheme = useSystemColorScheme();
+  const effectiveColorScheme =
+    persistedColorScheme === 'System'
+      ? systemColorScheme
+      : persistedColorScheme;
 
-  const theme = persistedColorScheme === 'Dark' ? THEME_DARK : THEME_LIGHT;
+  document.documentElement.className =
+    effectiveColorScheme === 'Dark' ? 'dark' : 'light';
+
+  const theme = effectiveColorScheme === 'Dark' ? THEME_DARK : THEME_LIGHT;
 
   return (
     <ThemeSchemeContext.Provider value={setPersistedColorScheme}>
diff --git a/packages/twenty-front/src/modules/ui/theme/components/UserThemeProviderEffect.tsx b/packages/twenty-front/src/modules/ui/theme/components/UserThemeProviderEffect.tsx
index 3b9e09b25f..544f6af827 100644
--- a/packages/twenty-front/src/modules/ui/theme/components/UserThemeProviderEffect.tsx
+++ b/packages/twenty-front/src/modules/ui/theme/components/UserThemeProviderEffect.tsx
@@ -1,17 +1,15 @@
 import { useContext, useEffect } from 'react';
 
 import { ThemeSchemeContext } from '@/ui/theme/components/BaseThemeProvider';
-import { useSystemColorScheme } from '@/ui/theme/hooks/useSystemColorScheme';
 import { useColorScheme } from '../hooks/useColorScheme';
 
 export const UserThemeProviderEffect = () => {
   const { colorScheme } = useColorScheme();
-  const systemColorScheme = useSystemColorScheme();
   const setThemeScheme = useContext(ThemeSchemeContext);
 
   useEffect(() => {
-    setThemeScheme(colorScheme === 'System' ? systemColorScheme : colorScheme);
-  }, [colorScheme, setThemeScheme, systemColorScheme]);
+    setThemeScheme(colorScheme);
+  }, [colorScheme, setThemeScheme]);
 
   return <></>;
 };
diff --git a/packages/twenty-front/src/modules/users/components/UserAndViewsProviderEffect.tsx b/packages/twenty-front/src/modules/users/components/UserAndViewsProviderEffect.tsx
index e4158c6e00..eed4e0122e 100644
--- a/packages/twenty-front/src/modules/users/components/UserAndViewsProviderEffect.tsx
+++ b/packages/twenty-front/src/modules/users/components/UserAndViewsProviderEffect.tsx
@@ -151,7 +151,7 @@ export const UserAndViewsProviderEffect = () => {
     ) => {
       return {
         ...workspaceMember,
-        colorScheme: (workspaceMember.colorScheme as ColorScheme) ?? 'Light',
+        colorScheme: (workspaceMember.colorScheme as ColorScheme) ?? 'System',
         locale:
           (workspaceMember.locale as keyof typeof APP_LOCALES) ?? SOURCE_LOCALE,
       };