diff --git a/components/main/MainContent.vue b/components/main/MainContent.vue
index 82783a54..eb88bc10 100644
--- a/components/main/MainContent.vue
+++ b/components/main/MainContent.vue
@@ -22,7 +22,7 @@ defineProps<{
         </div>
         <div flex items-center flex-shrink-0 gap-x-2>
           <slot name="actions" />
-          <NavUser v-if="isHydrated" />
+          <NavUser v-if="isHydrated.value" />
         </div>
       </div>
       <slot name="header" />
diff --git a/components/publish/PublishAttachment.vue b/components/publish/PublishAttachment.vue
index eceb4f30..b8dea2e5 100644
--- a/components/publish/PublishAttachment.vue
+++ b/components/publish/PublishAttachment.vue
@@ -27,11 +27,11 @@ const description = ref(props.attachment.description ?? '')
         v-if="removable"
         aria-label="Remove attachment"
         hover:bg="gray/40" transition-100 p-1 rounded-5 cursor-pointer
-        :class="[isHydrated && isSmallScreen ? '' : 'op-0 group-hover:op-100hover:']"
+        :class="[isHydrated.value && isSmallScreen ? '' : 'op-0 group-hover:op-100hover:']"
         mix-blend-difference
         @click="$emit('remove')"
       >
-        <div i-ri:close-line text-3 :class="[isHydrated && isSmallScreen ? 'text-6' : 'text-3']" />
+        <div i-ri:close-line text-3 :class="[isHydrated.value && isSmallScreen ? 'text-6' : 'text-3']" />
       </div>
     </div>
     <div absolute right-2 bottom-2>
diff --git a/composables/hydration.ts b/composables/hydration.ts
index 3909d275..84ead784 100644
--- a/composables/hydration.ts
+++ b/composables/hydration.ts
@@ -1,10 +1,10 @@
 export const isHydrated = computed(() => {
   if (process.server)
-    return false
+    return { value: false }
 
   const nuxtApp = useNuxtApp()
   if (!nuxtApp.isHydrating)
-    return false
+    return { value: false }
 
   const hydrated = ref(false)
   nuxtApp.hooks.hookOnce('app:suspense:resolve', () => {
diff --git a/layouts/default.vue b/layouts/default.vue
index 79142bcd..08d795f1 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -44,8 +44,8 @@
           <slot />
         </div>
         <div sm:hidden sticky left-0 right-0 bottom-0 z-10 bg-base pb="[env(safe-area-inset-bottom)]" transition="padding 20">
-          <CommonOfflineChecker :small-screen="isHydrated" />
-          <NavBottom v-if="isHydrated" />
+          <CommonOfflineChecker :small-screen="isHydrated.value" />
+          <NavBottom v-if="isHydrated.value" />
         </div>
       </div>
       <aside class="hidden sm:none lg:block w-1/4 zen-hide">