diff --git a/frontend_nuxt/components/CallbackPage.vue b/frontend_nuxt/components/CallbackPage.vue
index 8fe8461c4..c06e3f5e4 100644
--- a/frontend_nuxt/components/CallbackPage.vue
+++ b/frontend_nuxt/components/CallbackPage.vue
@@ -6,10 +6,6 @@
 </template>
 
 <script>
-import { hatch } from 'ldrs'
-
-hatch.register()
-
 export default {
   name: 'CallbackPage'
 }
diff --git a/frontend_nuxt/components/DropdownMenu.vue b/frontend_nuxt/components/DropdownMenu.vue
index cd5679342..a59c4c2c5 100644
--- a/frontend_nuxt/components/DropdownMenu.vue
+++ b/frontend_nuxt/components/DropdownMenu.vue
@@ -69,8 +69,6 @@ export default {
 
 .dropdown-menu-container {
   position: absolute;
-  top: 100%;
-  right: 0;
   background-color: var(--menu-background-color);
   border: 1px solid var(--normal-border-color);
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
diff --git a/frontend_nuxt/components/HeaderComponent.vue b/frontend_nuxt/components/HeaderComponent.vue
index a20dadad7..01b7910ef 100644
--- a/frontend_nuxt/components/HeaderComponent.vue
+++ b/frontend_nuxt/components/HeaderComponent.vue
@@ -241,15 +241,13 @@ export default {
 }
 
 .header-content-item-main {
-  background-color: var(--primary-color);
-  color: white;
   padding: 8px 16px;
   border-radius: 10px;
   cursor: pointer;
 }
 
 .header-content-item-main:hover {
-  background-color: var(--primary-color-hover);
+  background-color: var(--menu-selected-background-color);
 }
 
 .header-content-item-secondary {
diff --git a/frontend_nuxt/components/MilkTeaActivityComponent.vue b/frontend_nuxt/components/MilkTeaActivityComponent.vue
index b9231fcc4..8d7224bc8 100644
--- a/frontend_nuxt/components/MilkTeaActivityComponent.vue
+++ b/frontend_nuxt/components/MilkTeaActivityComponent.vue
@@ -49,8 +49,6 @@ import BaseInput from './BaseInput.vue'
 import BasePopup from './BasePopup.vue'
 import { API_BASE_URL, toast } from '../main'
 import { getToken, fetchCurrentUser } from '../utils/auth'
-import { hatch } from 'ldrs'
-hatch.register()
 
 export default {
   name: 'MilkTeaActivityComponent',
diff --git a/frontend_nuxt/components/PostEditor.vue b/frontend_nuxt/components/PostEditor.vue
index 63644222d..a66a1f88c 100644
--- a/frontend_nuxt/components/PostEditor.vue
+++ b/frontend_nuxt/components/PostEditor.vue
@@ -16,8 +16,6 @@ import {
   getPreviewTheme as getPreviewThemeUtil
 } from '../utils/vditor'
 import { clearVditorStorage } from '../utils/clearVditorStorage'
-import { hatch } from 'ldrs'
-hatch.register()
 
 export default {
   name: 'PostEditor',
diff --git a/frontend_nuxt/package.json b/frontend_nuxt/package.json
index 1229fbb44..0ea54c774 100644
--- a/frontend_nuxt/package.json
+++ b/frontend_nuxt/package.json
@@ -8,14 +8,14 @@
     "start": "nuxt start"
   },
   "dependencies": {
+    "cropperjs": "^1.6.2",
+    "echarts": "^5.6.0",
     "highlight.js": "^11.11.1",
     "ldrs": "^1.0.0",
     "markdown-it": "^14.1.0",
     "nuxt": "latest",
-    "cropperjs": "^1.6.2",
-    "echarts": "^5.6.0",
-    "vue-echarts": "^7.0.3",
+    "vditor": "^3.11.1",
     "vue-easy-lightbox": "^1.19.0",
-    "vditor": "^3.11.1"
+    "vue-echarts": "^7.0.3"
   }
 }
diff --git a/frontend_nuxt/pages/about/index.vue b/frontend_nuxt/pages/about/index.vue
index 669218787..9c5b3631c 100644
--- a/frontend_nuxt/pages/about/index.vue
+++ b/frontend_nuxt/pages/about/index.vue
@@ -10,28 +10,26 @@
         <div class="about-tabs-item-label">{{ tab.label }}</div>
       </div>
     </div>
-    <div class="about-content" v-html="renderMarkdown(content)" @click="handleContentClick"></div>
     <div class="about-loading" v-if="isFetching">
       <l-hatch-spinner size="100" stroke="10" speed="1" color="var(--primary-color)" />
     </div>
+    <div v-else class="about-content" v-html="renderMarkdown(content)" @click="handleContentClick"></div>
   </div>
 </template>
 
 <script>
 import { ref, onMounted } from 'vue'
 import { renderMarkdown, handleMarkdownClick } from '../utils/markdown'
-import { hatch } from 'ldrs'
-hatch.register()
 
 export default {
   name: 'AboutPageView',
   setup() {
     const isFetching = ref(false)
     const tabs = [
-      { name: 'about', label: '关于', file: '/about_markdown/about.md' },
-      { name: 'agreement', label: '用户协议', file: '/about_markdown/agreement.md' },
-      { name: 'guideline', label: '创作准则', file: '/about_markdown/guideline.md' },
-      { name: 'privacy', label: '隐私政策', file: '/about_markdown/privacy.md' },
+      { name: 'about', label: '关于', file: 'https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/about/about.md' },
+      { name: 'agreement', label: '用户协议', file: 'https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/about/agreement.md' },
+      { name: 'guideline', label: '创作准则', file: 'https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/about/guideline.md' },
+      { name: 'privacy', label: '隐私政策', file: 'https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/about/privacy.md' },
     ]
     const selectedTab = ref(tabs[0].name)
     const content = ref('')
@@ -47,8 +45,9 @@ export default {
         }
       } catch (e) {
         content.value = '# 内容加载失败'
+      } finally {
+        isFetching.value = false
       }
-      isFetching.value = false
     }
 
     const selectTab = (name) => {
diff --git a/frontend_nuxt/pages/activities.vue b/frontend_nuxt/pages/activities.vue
index c5054c293..6e76bf051 100644
--- a/frontend_nuxt/pages/activities.vue
+++ b/frontend_nuxt/pages/activities.vue
@@ -33,8 +33,6 @@
 import { API_BASE_URL } from '../main'
 import TimeManager from '../utils/time'
 import MilkTeaActivityComponent from '../components/MilkTeaActivityComponent.vue'
-import { hatch } from 'ldrs'
-hatch.register()
 
 export default {
   name: 'ActivityListPageView',
diff --git a/frontend_nuxt/pages/message.vue b/frontend_nuxt/pages/message.vue
index af15a4c2d..4e7d4ee62 100644
--- a/frontend_nuxt/pages/message.vue
+++ b/frontend_nuxt/pages/message.vue
@@ -303,9 +303,7 @@ import { markNotificationsRead, fetchUnreadCount, notificationState } from '../u
 import { toast } from '../main'
 import { stripMarkdownLength } from '../utils/markdown'
 import TimeManager from '../utils/time'
-import { hatch } from 'ldrs'
 import { reactionEmojiMap } from '../utils/reactions'
-hatch.register()
 
 export default {
   name: 'MessagePageView',
diff --git a/frontend_nuxt/pages/posts/[id].vue b/frontend_nuxt/pages/posts/[id].vue
index 48ad47bae..2ccb9e782 100644
--- a/frontend_nuxt/pages/posts/[id].vue
+++ b/frontend_nuxt/pages/posts/[id].vue
@@ -119,11 +119,9 @@ import { renderMarkdown, handleMarkdownClick, stripMarkdownLength } from '../uti
 import { API_BASE_URL, toast } from '../main'
 import { getToken, authState } from '../utils/auth'
 import TimeManager from '../utils/time'
-import { hatch } from 'ldrs'
 import { useRouter } from 'vue-router'
 import { isMobile } from '../utils/screen'
 import Dropdown from '../components/Dropdown.vue'
-hatch.register()
 
 export default {
   name: 'PostPageView',
diff --git a/frontend_nuxt/pages/settings.vue b/frontend_nuxt/pages/settings.vue
index 089ef7a77..464c53344 100644
--- a/frontend_nuxt/pages/settings.vue
+++ b/frontend_nuxt/pages/settings.vue
@@ -66,8 +66,6 @@ import { getToken, fetchCurrentUser, setToken } from '../utils/auth'
 import BaseInput from '../components/BaseInput.vue'
 import Dropdown from '../components/Dropdown.vue'
 import AvatarCropper from '../components/AvatarCropper.vue'
-import { hatch } from 'ldrs'
-hatch.register()
 export default {
   name: 'SettingsPageView',
   components: { BaseInput, Dropdown, AvatarCropper },
diff --git a/frontend_nuxt/pages/users/[id].vue b/frontend_nuxt/pages/users/[id].vue
index 672e8d463..cedc039f5 100644
--- a/frontend_nuxt/pages/users/[id].vue
+++ b/frontend_nuxt/pages/users/[id].vue
@@ -260,8 +260,6 @@ import LevelProgress from '../components/LevelProgress.vue'
 import { stripMarkdown, stripMarkdownLength } from '../utils/markdown'
 import TimeManager from '../utils/time'
 import { prevLevelExp } from '../utils/level'
-import { hatch } from 'ldrs'
-hatch.register()
 
 export default {
   name: 'ProfileView',