diff --git a/composables/settings/storage.ts b/composables/settings/storage.ts
index 917e398e..6c0395c5 100644
--- a/composables/settings/storage.ts
+++ b/composables/settings/storage.ts
@@ -2,10 +2,8 @@ import type { Ref } from 'vue'
 import type { FeatureFlags, UserSettings, WellnessSettings } from './definition'
 import { STORAGE_KEY_SETTINGS } from '~/constants'
 
-export const useUserSettings = () => {
-  if (process.server)
-    return useState('user-settings', getDefaultUserSettings)
-  return useUserLocalStorage(STORAGE_KEY_SETTINGS, getDefaultUserSettings)
+export function useUserSettings() {
+  return useUserLocalStorage<UserSettings>(STORAGE_KEY_SETTINGS, getDefaultUserSettings)
 }
 
 // TODO: refactor & simplify this
diff --git a/composables/users.ts b/composables/users.ts
index ac010efb..71552295 100644
--- a/composables/users.ts
+++ b/composables/users.ts
@@ -277,7 +277,10 @@ interface UseUserLocalStorageCache {
 /**
  * Create reactive storage for the current user
  */
-export function useUserLocalStorage<T extends object>(key: string, initial: () => T) {
+export function useUserLocalStorage<T extends object>(key: string, initial: () => T): Ref<T> {
+  if (process.server)
+    return shallowRef(initial())
+
   // @ts-expect-error bind value to the function
   const map: Map<string, UseUserLocalStorageCache> = useUserLocalStorage._ = useUserLocalStorage._ || new Map()
 
@@ -296,7 +299,7 @@ export function useUserLocalStorage<T extends object>(key: string, initial: () =
     map.set(key, { scope, value: value! })
   }
 
-  return map.get(key)!.value
+  return map.get(key)!.value as Ref<T>
 }
 
 /**
diff --git a/layouts/default.vue b/layouts/default.vue
index e72246ad..6897ffb9 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -13,7 +13,7 @@ const showUserPicker = logicAnd(
 </script>
 
 <template>
-  <div h-full :class="{ zen: userSettings.zenMode }">
+  <div h-full>
     <main flex w-full mxa lg:max-w-80rem>
       <aside class="hidden sm:flex w-1/8 md:w-1/6 lg:w-1/5 xl:w-1/4 justify-end xl:me-4 zen-hide" relative>
         <div sticky top-0 w-20 xl:w-100 h-screen flex="~ col" lt-xl-items-center>
diff --git a/plugins/setup-font-size.client.ts b/plugins/setup-global-effects.client.ts
similarity index 80%
rename from plugins/setup-font-size.client.ts
rename to plugins/setup-global-effects.client.ts
index ab814ca1..8fd42b39 100644
--- a/plugins/setup-font-size.client.ts
+++ b/plugins/setup-global-effects.client.ts
@@ -7,4 +7,7 @@ export default defineNuxtPlugin(() => {
   watchEffect(() => {
     html.style.setProperty('--font-size', fontSizeMap[userSettings.value.fontSize || DEFAULT_FONT_SIZE])
   })
+  watchEffect(() => {
+    html.classList.toggle('zen', userSettings.value.zenMode)
+  })
 })
diff --git a/plugins/setup-head-script.server.ts b/plugins/setup-head-script.server.ts
index 27962c07..21c46b63 100644
--- a/plugins/setup-head-script.server.ts
+++ b/plugins/setup-head-script.server.ts
@@ -19,15 +19,15 @@ export default defineNuxtPlugin(() => {
   const html = document.querySelector('html')
   ${process.dev ? 'console.log({ settings })' : ''}
 
-  const { fontSize, language } = settings || {}
-
-  if (fontSize) {
+  if (settings.fontSize) {
     const fontSizeMap = ${JSON.stringify(fontSizeMap)}
-    html.style.setProperty('--font-size', fontSizeMap[fontSize])
+    html.style.setProperty('--font-size', fontSizeMap[settings.fontSize])
   }
-
-  if (language) {
-    html.setAttribute('lang', language)
+  if (settings.language) {
+    html.setAttribute('lang', settings.language)
+  }
+  if (settings.zenMode) {
+    html.classList.add('zen')
   }
 })()`.trim().replace(/\s*\n+\s*/g, ';'),
       },