diff --git a/packages/theme/src/client/components/Home.vue b/packages/theme/src/client/components/Home.vue
index 88d74ad6..a1f132f2 100644
--- a/packages/theme/src/client/components/Home.vue
+++ b/packages/theme/src/client/components/Home.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { usePageFrontmatter, withBase } from '@vuepress/client'
-import { computed } from 'vue'
+import { computed,onMounted } from 'vue'
 import type { PlumeThemeHomeFrontmatter } from '../../shared/index.js'
 // import { useThemeLocaleData } from '../composables/index.js'
 import { useDarkMode } from '../composables/darkMode.js'
@@ -9,6 +9,10 @@ import VButton from './VButton.vue'
 const matter = usePageFrontmatter<PlumeThemeHomeFrontmatter>()
 const isDark = useDarkMode()
 
+onMounted(() => {
+  isDark.value = document.documentElement.classList.contains('dark')
+})
+
 const mask = computed(() => {
   if (typeof matter.value.bannerMask !== 'object') {
     return matter.value.bannerMask || 0
diff --git a/packages/theme/src/client/layouts/NotFound.vue b/packages/theme/src/client/layouts/NotFound.vue
index 8310d3f7..f2540f7b 100644
--- a/packages/theme/src/client/layouts/NotFound.vue
+++ b/packages/theme/src/client/layouts/NotFound.vue
@@ -1,36 +1,43 @@
 <script setup lang="ts">
+import LayoutContent from '../components/LayoutContent.vue'
+import Nav from '../components/Nav/index.vue'
 import { withBase } from '@vuepress/client'
+
 import { ref } from 'vue'
-
-// const site = useSiteLocaleData()
-
 const root = ref('/')
-// onMounted(() => {
-//   const path = window.location.pathname
-//     .replace(site.value.base, '')
-//     .replace(/(^.*?\/).*$/, '/$1')
-// })
+
 </script>
 
 <template>
-  <div class="not-found">
-    <p class="code">404</p>
-    <h1 class="title">PAGE NOT FOUND</h1>
-    <div class="divider" />
-    <blockquote class="quote">
-      But if you don't change your direction, and if you keep looking, you may
-      end up where you are heading.
-    </blockquote>
+  <div class="theme-plume">
+    <Nav />
+    <LayoutContent>
+      <div class="not-found">
+        <p class="code">404</p>
+        <h1 class="title">PAGE NOT FOUND</h1>
+        <div class="divider" />
+        <blockquote class="quote">
+          But if you don't change your direction, and if you keep looking, you may
+          end up where you are heading.
+        </blockquote>
 
-    <div class="action">
-      <a class="link" :href="withBase(root)" aria-label="go to home">
-        Take me home
-      </a>
-    </div>
+        <div class="action">
+          <a class="link" :href="withBase(root)" aria-label="go to home">
+            Take me home
+          </a>
+        </div>
+      </div>
+    </LayoutContent>
   </div>
 </template>
 
 <style scoped>
+.theme-plume {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
 .not-found {
   padding: 64px 24px 96px;
   text-align: center;