diff --git a/src/atoms/settings.ts b/src/atoms/settings.ts
index c8031fab..e130c7b7 100644
--- a/src/atoms/settings.ts
+++ b/src/atoms/settings.ts
@@ -33,10 +33,9 @@ export const getStorageUserSettings = () => {
   }
 };
 
-export const userSettingsAtom = atomWithStorage<UserSettings>(
-  'userSettings',
-  defaultSettings
-);
+export const userSettingsAtom = atomWithStorage<UserSettings>('userSettings', {
+  ...getStorageUserSettings()
+});
 
 export const userSettingsHelperAtom = atom(
   (get) => get(userSettingsAtom),
diff --git a/src/hooks/use-user-settings.ts b/src/hooks/use-user-settings.ts
index ea63b875..a73f4e99 100644
--- a/src/hooks/use-user-settings.ts
+++ b/src/hooks/use-user-settings.ts
@@ -53,6 +53,7 @@ export default function useUserSettings() {
   useEffect(() => {
     if (userSettings.mode !== 'auto') return;
 
+    setTheme('auto');
     const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
     const handleChange = () => {
       setTheme('auto');