diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index d4621fd..6a84de6 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -19,6 +19,10 @@
   --color-green-950: #052E16;
 }
 
+:root {
+  --ui-header-height: --spacing(16);
+}
+
 /* 主题字体样式 */
 .font-sans-serif {
   font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index b193215..a1276e6 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -16,9 +16,10 @@ const props = withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
-  <header
+  <Uheader
     class="header bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 sticky top-0 z-50"
   >
+
     <div class="px-2 sm:px-4 lg:px-6">
       <div class="flex justify-between items-center h-12">
         <!-- 汉堡菜单按钮 - 只在移动端显示 -->
@@ -55,12 +56,12 @@ const props = withDefaults(defineProps<Props>(), {
         </button>
         
         <UContentSearchButton v-if="header?.search" class="lg:hidden" />
-        <div class="ml-auto">
-          <UColorModeButton v-if="header?.colorMode" />
+        <div class="ml-auto flex items-center space-x-2">
+          <UColorModeSwitch />
           
         <!-- Settings Button -->
         <button
-          class="p-2 rounded-md text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+          class="ml-auto p-2 rounded-md text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
           title="页面设置"
           @click="isSettingsOpen = !isSettingsOpen"
         >
@@ -72,7 +73,7 @@ const props = withDefaults(defineProps<Props>(), {
           
         </div>
         <!-- User Actions - Mobile and Desktop -->
-        <div class="hidden sm:flex items-center space-x-2">
+        <div class="flex items-center space-x-2">
           <NuxtLink
             to="/login"
             class="px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors"
@@ -86,7 +87,7 @@ const props = withDefaults(defineProps<Props>(), {
             <UButton icon="lucide-rocket">注册</UButton>
           </NuxtLink>
           <!-- Mobile Menu Button -->
-          <div class="sm:hidden">
+          <!-- <div class="sm:hidden">
             <NuxtLink
               to="/login"
               class="px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors"
@@ -99,7 +100,7 @@ const props = withDefaults(defineProps<Props>(), {
             >
               注册
             </NuxtLink>
-          </div>
+          </div> -->
         </div>
       </div>
     </div>
@@ -108,5 +109,5 @@ const props = withDefaults(defineProps<Props>(), {
     :is-open="isSettingsOpen" 
     @close="isSettingsOpen = false" 
   />
-  </header>
+  </Uheader>
 </template>
diff --git a/app/pages/[...slug].vue b/app/pages/[...slug].vue
index 2904732..1ebdff7 100644
--- a/app/pages/[...slug].vue
+++ b/app/pages/[...slug].vue
@@ -123,7 +123,7 @@ const links = computed(() => {
       :description="page.description"
       :headline="headline"
       :ui="{
-        wrapper: 'flex-row items-center flex-wrap justify-between',
+        wrapper: 'flex-row items-center flex-wrap justify-between ',
       }"
     >
       <template #links>