diff --git a/apps/builder/src/features/account/components/UserPreferencesForm.tsx b/apps/builder/src/features/account/components/UserPreferencesForm.tsx
index b95e99f9ac2..519da2a05a3 100644
--- a/apps/builder/src/features/account/components/UserPreferencesForm.tsx
+++ b/apps/builder/src/features/account/components/UserPreferencesForm.tsx
@@ -42,7 +42,10 @@ export const UserPreferencesForm = () => {
   }
 
   const changeAppearance = async (value: string) => {
-    setColorMode(value)
+    if (value === 'system') {
+      setColorMode('system')
+      localStorage.removeItem('chakra-ui-color-mode')
+    } else setColorMode(value)
     updateUser({ preferredAppAppearance: value })
   }