diff --git a/frontend/src/components/layout/FrontLayout.css b/frontend/src/components/layout/FrontLayout.css
index 8129412..8e27432 100644
--- a/frontend/src/components/layout/FrontLayout.css
+++ b/frontend/src/components/layout/FrontLayout.css
@@ -80,6 +80,14 @@
   flex-direction: column;
   gap: 2px;
 }
+.nav-group-title {
+  padding: 14px var(--space-md) 6px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: #9CA3AF;
+}
 
 .nav-item {
   position: relative;
diff --git a/frontend/src/components/layout/FrontLayout.tsx b/frontend/src/components/layout/FrontLayout.tsx
index 885c921..0d4adc2 100644
--- a/frontend/src/components/layout/FrontLayout.tsx
+++ b/frontend/src/components/layout/FrontLayout.tsx
@@ -3,16 +3,31 @@ import { Outlet, NavLink, useNavigate } from 'react-router-dom';
 import { useAuth } from '@/contexts/AuthContext';
 import './FrontLayout.css';
 
-const navItems = [
-  { path: '/chat', icon: 'chat', label: 'AI聊天' },
-  { path: '/channels', icon: 'channel', label: 'IM Bot' },
-  { path: '/knowledge', icon: 'knowledge', label: '知识库' },
-  { path: '/market', icon: 'market', label: '技能市场' },
-  { path: '/token', icon: 'token', label: 'Token驾驶舱' },
-  { path: '/pricing', icon: 'pricing', label: '付费中心' },
-  { path: '/assets', icon: 'assets', label: '资产文件' },
-  { path: '/evolution', icon: 'evolution', label: 'AI自进化' },
-  { path: '/wechat-bot', icon: 'wechat', label: '微信机器人' },
+const navGroups = [
+  {
+    title: '智能体',
+    items: [
+      { path: '/chat', icon: 'chat', label: 'AI聊天' },
+      { path: '/knowledge', icon: 'knowledge', label: '知识库' },
+      { path: '/market', icon: 'market', label: '技能市场' },
+      { path: '/evolution', icon: 'evolution', label: 'AI自进化' },
+    ],
+  },
+  {
+    title: 'IM Bot',
+    items: [
+      { path: '/channels', icon: 'channel', label: '频道管理' },
+      { path: '/wechat-bot', icon: 'wechat', label: '微信机器人' },
+    ],
+  },
+  {
+    title: '资源中心',
+    items: [
+      { path: '/assets', icon: 'assets', label: '资产文件' },
+      { path: '/token', icon: 'token', label: 'Token驾驶舱' },
+      { path: '/pricing', icon: 'pricing', label: '付费中心' },
+    ],
+  },
 ];
 
 const bottomItems = [
@@ -80,20 +95,23 @@ const FrontLayout: React.FC = () => {
             </span>
             {!collapsed && <span className="nav-item-label">返回首页</span>}
           </NavLink>
-          <div className="nav-section">
-            {navItems.map(item => (
-              <NavLink
-                key={item.path}
-                to={item.path}
-                className={({ isActive }) => `nav-item ${isActive ? 'active' : ''}`}
-                title={collapsed ? item.label : undefined}
-              >
-                <span className="nav-icon">{iconPaths[item.icon]}</span>
-                {!collapsed && <span className="nav-label">{item.label}</span>}
-                {!collapsed && <span className="nav-active-dot" />}
-              </NavLink>
-            ))}
-          </div>
+          {navGroups.map(group => (
+            <div className="nav-section" key={group.title}>
+              {!collapsed && <div className="nav-group-title">{group.title}</div>}
+              {group.items.map(item => (
+                <NavLink
+                  key={item.path}
+                  to={item.path}
+                  className={({ isActive }) => `nav-item ${isActive ? 'active' : ''}`}
+                  title={collapsed ? item.label : undefined}
+                >
+                  <span className="nav-icon">{iconPaths[item.icon]}</span>
+                  {!collapsed && <span className="nav-label">{item.label}</span>}
+                  {!collapsed && <span className="nav-active-dot" />}
+                </NavLink>
+              ))}
+            </div>
+          ))}
           <div className="nav-section nav-bottom">
             {bottomItems.map(item => (
               <NavLink