diff --git a/components/nav/NavFooter.vue b/components/nav/NavFooter.vue
index 2d8e6ee5..ef331ea0 100644
--- a/components/nav/NavFooter.vue
+++ b/components/nav/NavFooter.vue
@@ -11,8 +11,8 @@ const buildTimeAgo = useTimeAgo(buildTime)
       <button i-ri-sun-line dark:i-ri-moon-line text-lg mb4 @click="toggleDark()" />
       <button
         text-lg mb4
-        :class="isZenmode ? 'i-ri:layout-right-2-line' : 'i-ri:layout-right-line'"
-        @click="toggleZenmode()"
+        :class="isZenMode ? 'i-ri:layout-right-2-line' : 'i-ri:layout-right-line'"
+        @click="toggleZenMode()"
       />
     </div>
     <a cursor-pointer hover:underline @click="openPreviewHelp">Show intro</a>
diff --git a/composables/dialog.ts b/composables/dialog.ts
index 3d586ade..29130c02 100644
--- a/composables/dialog.ts
+++ b/composables/dialog.ts
@@ -1,8 +1,8 @@
 import { STORAGE_KEY_FIRST_VISIT, STORAGE_KEY_ZEN_MODE } from '~/constants'
 
 export const isFirstVisit = useLocalStorage(STORAGE_KEY_FIRST_VISIT, true)
-export const isZenmode = useLocalStorage(STORAGE_KEY_ZEN_MODE, false)
-export const toggleZenmode = useToggle(isZenmode)
+export const isZenMode = useLocalStorage(STORAGE_KEY_ZEN_MODE, false)
+export const toggleZenMode = useToggle(isZenMode)
 
 export const isUserSwitcherOpen = ref(false)
 export const isSigninDialogOpen = ref(false)
diff --git a/layouts/default.vue b/layouts/default.vue
index f36b3bd3..0c092d98 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,5 +1,5 @@
 <template>
-  <div h-full :class="{ zenmode: isZenmode }">
+  <div h-full :class="{ zen: isZenMode }">
     <main flex w-full mxa lg:max-w-80rem>
       <div class="hidden md:block w-1/4 zen-hide" relative>
         <div sticky top-0 h-screen flex="~ col">
diff --git a/styles/global.css b/styles/global.css
index a6508127..d4d67a35 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -62,6 +62,6 @@ html {
   }
 }
 
-.zenmode .zen-hide {
+.zen .zen-hide {
   --at-apply: op0 hover:op100 transition duration-600;
 }