diff --git a/src/components/Nav.vue b/src/components/Nav.vue
index 32ceeed..fe5beb4 100644
--- a/src/components/Nav.vue
+++ b/src/components/Nav.vue
@@ -1,26 +1,47 @@
-<script lang="ts">
-export default {
-  data: () => ({
-    pages: [
-      {
-        title: '教师',
-        page: '/teachers',
-      },
-      {
-        title: '事件',
-        page: '/events',
-      },
-      {
-        title: '文章',
-        page: '/posts',
-      },
-      {
-        title: '关于',
-        page: '/about',
-      },
-    ],
-  }),
-}
+<script lang="ts" setup>
+// export default {
+//   data: () => ({
+//     pages: [
+//       {
+//         title: '教师',
+//         page: '/teachers',
+//       },
+//       {
+//         title: '事件',
+//         page: '/events',
+//       },
+//       {
+//         title: '文章',
+//         page: '/posts',
+//       },
+//       {
+//         title: '关于',
+//         page: '/about',
+//       },
+//     ],
+//   }),
+// }
+
+const pages = [
+  {
+    title: '教师',
+    page: '/teachers',
+  },
+  {
+    title: '事件',
+    page: '/events',
+  },
+  {
+    title: '文章',
+    page: '/posts',
+  },
+  {
+    title: '关于',
+    page: '/about',
+  },
+]
+
+const { t } = useI18n()
 </script>
 
 <template>
@@ -41,6 +62,11 @@ export default {
 
     <v-spacer />
 
+    <v-btn
+      class="mx-2" :title="t('button.toggle_dark')" :icon="isDark ? 'mdi-weather-night' : 'mdi-weather-sunny'"
+      @click="toggleDark()"
+    />
+
     <v-menu>
       <template #activator="{ props }">
         <v-app-bar-nav-icon v-bind="props" class="md:hidden!" />