diff --git a/theme/src/client/components/VPDoc.vue b/theme/src/client/components/VPDoc.vue
index 9b79c367..6ad59ffa 100644
--- a/theme/src/client/components/VPDoc.vue
+++ b/theme/src/client/components/VPDoc.vue
@@ -108,9 +108,7 @@ watch(
             <slot name="doc-before" />
             <main class="main">
               <VPDocMeta />
-              <ClientOnly v-if="!isPageDecrypted">
-                <VPEncryptPage />
-              </ClientOnly>
+              <VPEncryptPage v-if="!isPageDecrypted" />
               <Content
                 v-else class="vp-doc plume-content"
                 :class="[pageName, enabledExternalLinkIcon && 'external-link-icon-enabled']"
diff --git a/theme/src/client/components/VPEncryptGlobal.vue b/theme/src/client/components/VPEncryptGlobal.vue
index d411bb4b..98703859 100644
--- a/theme/src/client/components/VPEncryptGlobal.vue
+++ b/theme/src/client/components/VPEncryptGlobal.vue
@@ -11,19 +11,21 @@ const title = computed(() => profile.value?.name || site.value.title)
 </script>
 
 <template>
-  <div class="vp-global-encrypt">
-    <div class="global-encrypt-container">
-      <div v-if="profile || title" class="profile">
-        <p v-if="profile" class="avatar" :class="{ circle: profile.circle }">
-          <img :src="profile.avatar ?? profile.url" :alt="profile.name">
-        </p>
-        <h3 v-if="title">
-          {{ title }}
-        </h3>
+  <ClientOnly>
+    <div class="vp-global-encrypt">
+      <div class="global-encrypt-container">
+        <div v-if="profile || title" class="profile">
+          <p v-if="profile" class="avatar" :class="{ circle: profile.circle }">
+            <img :src="profile.avatar ?? profile.url" :alt="profile.name">
+          </p>
+          <h3 v-if="title">
+            {{ title }}
+          </h3>
+        </div>
+        <VPEncryptForm global :info="theme.encryptGlobalText" />
       </div>
-      <VPEncryptForm global :info="theme.encryptGlobalText" />
     </div>
-  </div>
+  </ClientOnly>
   <VPFooter />
 </template>
 
diff --git a/theme/src/client/components/VPEncryptPage.vue b/theme/src/client/components/VPEncryptPage.vue
index f6c9cf62..47432168 100644
--- a/theme/src/client/components/VPEncryptPage.vue
+++ b/theme/src/client/components/VPEncryptPage.vue
@@ -6,12 +6,14 @@ const { theme } = useData()
 </script>
 
 <template>
-  <div class="vp-page-encrypt">
-    <div class="logo">
-      <span class="vpi-lock icon-lock-head" />
+  <ClientOnly>
+    <div class="vp-page-encrypt">
+      <div class="logo">
+        <span class="vpi-lock icon-lock-head" />
+      </div>
+      <VPEncryptForm :info="theme.encryptPageText" />
     </div>
-    <VPEncryptForm :info="theme.encryptPageText" />
-  </div>
+  </ClientOnly>
 </template>
 
 <style scoped>