diff --git a/src/components/AuthButton.jsx b/src/components/AuthButton.jsx
index b5cc431..246555a 100644
--- a/src/components/AuthButton.jsx
+++ b/src/components/AuthButton.jsx
@@ -4,11 +4,13 @@
 const AuthButton = ({children, roles,onClick, ...rest }) => {
     const {user} = useContext(UserContext);
     const {levelRole} = user;
+    
     let clickFunc = onClick
     if(!roles || roles.length === 0 || roles.includes(levelRole)){
       clickFunc = onClick;
     }else{
-        clickFunc = () => {
+        clickFunc = (e) => {
+            e.preventDefault();
             toast.error("权限不足");
         }
     }
diff --git a/src/components/Header.css b/src/components/Header.css
index 66fe1a0..a19f9e9 100644
--- a/src/components/Header.css
+++ b/src/components/Header.css
@@ -4,7 +4,7 @@
   justify-content: space-between;
   align-items: center;
   padding: 10px 20px;
-  background-color: #6b4f3b; /* 深棕色背景 */
+  background-color: #6c3e28; /* 深棕色背景 */
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index e0a8495..fd2a381 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -1,12 +1,13 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import './Header.css';
 import logo from '../assets/logo.png';
 import { useUser } from '../context/UserContext';
-import { BookOpen } from '@icon-park/react';  // 导入图标组件
+import { BookOpen } from '@icon-park/react';
+import { useLocation } from 'wouter';
 
 const Header = () => {
-  const [currentPath, setCurrentPath] = useState(window.location.pathname);
   const { user } = useUser();
+  const [location, setLocation] = useLocation();
 
   const navLinks = [
     { to: '/friend-moments', label: '好友动态' },
@@ -16,22 +17,8 @@
     { to: '/publish-seed', label: '发布种子' },
   ];
 
-  useEffect(() => {
-    const handleLocationChange = () => {
-      setCurrentPath(window.location.pathname);
-    };
-    window.addEventListener('popstate', handleLocationChange);
-    return () => {
-      window.removeEventListener('popstate', handleLocationChange);
-    };
-  }, []);
-
-  const isActive = (path) => currentPath.startsWith(path);
-
-  const handleLinkClick = (to) => {
-    window.history.pushState({}, '', to);
-    setCurrentPath(to);
-  };
+  // 头像变化时刷新组件（这段其实 React 会自动做，但你手动 history 管理就错过了）
+  useEffect(() => {}, [user?.avatarUrl]);
 
   return (
     <div className="main-page">
@@ -41,16 +28,14 @@
           <span className="site-name">Echo</span>
         </div>
         <div className="user-and-message" style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-          {/* 新手指南图标，放在头像左边 */}
-        <button
-          className="guide-button"
-          onClick={() => handleLinkClick('/new-user-guide')}
-          title="新手指南"
-        >
-          <BookOpen theme="outline" size="20" fill="#fff" />
-          <span style={{ marginLeft: '6px' }}>新手指南</span>
-        </button>
-
+          <button
+            className="guide-button"
+            onClick={() => setLocation('/new-user-guide')}
+            title="新手指南"
+          >
+            <BookOpen theme="outline" size="20" fill="#fff" />
+            <span style={{ marginLeft: '6px' }}>新手指南</span>
+          </button>
 
           <a href="/user/profile">
             <img
@@ -59,13 +44,14 @@
               className="user-avatar"
             />
           </a>
-          <span
+
+          {/* <span
             className="message-center"
-            onClick={() => handleLinkClick('/messages')}
+            onClick={() => setLocation('/messages')}
             style={{ cursor: 'pointer' }}
           >
             消息
-          </span>
+          </span> */}
         </div>
       </header>
 
@@ -76,9 +62,9 @@
             href={to}
             onClick={(e) => {
               e.preventDefault();
-              handleLinkClick(to);
+              setLocation(to);
             }}
-            className={`nav-item ${isActive(to) ? 'active' : ''}`}
+            className={`nav-item ${location.startsWith(to) ? 'active' : ''}`}
           >
             {label}
           </a>