diff --git a/wwwroot/index.html b/wwwroot/index.html
index 5ce76d1..c4a70b3 100644
--- a/wwwroot/index.html
+++ b/wwwroot/index.html
@@ -2,30 +2,66 @@
 <html>
 <head><meta charset="UTF-8"><title>PCCS 算力中心集群系统</title>
 <style>
-body{font-family:system-ui;margin:0;background:#f8fafc;color:#1e293b}
-.header{background:#fff;border-bottom:1px solid #e2e8f0;padding:16px 24px}
-.header h1{font-size:1.3rem;margin:0}
-.header span{font-size:.85rem;color:#64748b}
-.container{padding:24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
+*{box-sizing:border-box;margin:0;padding:0}
+body{font-family:system-ui;background:#f8fafc;color:#1e293b;min-height:100vh;display:flex;flex-direction:column}
+/* 顶栏 */
+.header{background:#fff;border-bottom:1px solid #e2e8f0;padding:0 24px;height:48px;display:flex;align-items:center;flex-shrink:0}
+.header .brand{display:flex;align-items:center;gap:10px}
+.header .brand .logo{font-size:1.2rem;font-weight:700;color:#1e293b}
+.header .brand .sub{font-size:.8rem;color:#94a3b8}
+.header .spacer{flex:1}
+.header .ctl{display:flex;align-items:center;gap:8px}
+.header .ctl button{background:none;border:1px solid #e2e8f0;border-radius:6px;padding:4px 10px;font-size:.8rem;cursor:pointer;color:#64748b}
+.header .ctl button:hover{background:#f1f5f9}
+/* 主体 */
+.main{display:flex;flex:1;overflow:hidden}
+.sidebar{width:220px;background:#0f172a;flex-shrink:0;overflow:auto;padding:16px 0}
+.sidebar .nav-title{font-size:.7rem;color:#475569;padding:4px 16px 8px;font-weight:700;text-transform:uppercase}
+.sidebar a{display:block;padding:8px 16px;color:#94a3b8;text-decoration:none;font-size:.9rem;transition:all .15s}
+.sidebar a:hover{color:#e2e8f0;background:#1e293b}
+.content{flex:1;overflow:auto;padding:24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;align-content:start}
 .card{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:20px}
 .card h3{margin:0 0 8px;font-size:1rem}
-.card p{margin:0;font-size:.85rem;color:#64748b}
-.card a{color:#2563eb;text-decoration:none;font-weight:600}
-.meta{font-size:.75rem;color:#94a3b8;margin-top:24px;text-align:center}
+.card p{margin:0 0 12px;font-size:.85rem;color:#64748b}
+.card a{color:#2563eb;text-decoration:none;font-weight:600;display:inline-block;margin-right:16px}
+.footer{text-align:center;padding:12px;font-size:.75rem;color:#94a3b8;border-top:1px solid #e2e8f0}
 </style></head>
 <body>
-<div class="header"><h1>PCCS</h1><span>算力中心集群系统</span></div>
-<div class="container">
-    <div class="card"><h3>算力池管理</h3><p>节点池创建、节点注册、资源分配</p>
-    <a href="/pcpool/compute_pool_list/index.ui">进入 →</a><br>
-    <a href="/pcpool/compute_node_list/index.ui">节点列表 →</a></div>
-    <div class="card"><h3>集群管理</h3><p>K8s/Slurm/Ray 集群部署与维护</p>
-    <a href="/pcc/cluster_list/index.ui">进入 →</a></div>
-    <div class="card"><h3>存储管理</h3><p>NFS/GlusterFS 共享存储</p>
-    <a href="/storage_mgr/storage_server_list/index.ui">进入 →</a></div>
-    <div class="card"><h3>镜像管理</h3><p>容器镜像源配置与仓库部署</p>
-    <a href="/image_mgr/mirror_source_list/index.ui">进入 →</a></div>
+<div class="header">
+    <div class="brand"><span class="logo">PCCS</span><span class="sub">算力中心集群系统</span></div>
+    <div class="spacer"></div>
+    <div class="ctl">
+        <button onclick="alert('Theme switch WIP')" title="切换主题">🌓</button>
+        <button onclick="alert('Language switch WIP')" title="切换语言">🌐 中文</button>
+        <button onclick="location.href='/rbac/userpassword_login.ui'" title="用户登录">👤 登录</button>
+    </div>
 </div>
-<div class="meta">pccs v0.1 · pccs.opencomputing.cn:9180</div>
+<div class="main">
+    <div class="sidebar">
+        <div class="nav-title">主导航</div>
+        <a href="/">📊 概览</a>
+        <a href="/pcpool/compute_pool_list/index.ui">📦 算力池列表</a>
+        <a href="/pcpool/compute_node_list/index.ui">📦 节点列表</a>
+        <a href="/pcc/cluster_list/index.ui">🖥 集群列表</a>
+        <a href="/pcc/cluster_node_list/index.ui">🖥 节点分配</a>
+        <a href="/storage_mgr/storage_server_list/index.ui">💾 存储服务器</a>
+        <a href="/storage_mgr/storage_export_list/index.ui">💾 存储导出</a>
+        <a href="/storage_mgr/storage_mount_list/index.ui">💾 存储挂载</a>
+        <a href="/image_mgr/mirror_source_list/index.ui">🏗 镜像源配置</a>
+        <a href="/image_mgr/image_registry_list/index.ui">🏗 镜像仓库</a>
+        <a href="/image_mgr/container_image_list/index.ui">🏗 容器镜像</a>
+    </div>
+    <div class="content">
+        <div class="card"><h3>📦 算力池管理</h3><p>节点池创建、节点注册、资源分配、心跳监控</p>
+        <a href="/pcpool/compute_pool_list/index.ui">算力池列表 →</a><a href="/pcpool/compute_node_list/index.ui">节点列表 →</a></div>
+        <div class="card"><h3>🖥 集群管理</h3><p>K8s/Slurm/Ray 集群部署、节点增减、状态监控</p>
+        <a href="/pcc/cluster_list/index.ui">集群列表 →</a><a href="/pcc/cluster_node_list/index.ui">节点分配 →</a></div>
+        <div class="card"><h3>💾 存储管理</h3><p>NFS 共享存储服务器、导出路径、节点挂载</p>
+        <a href="/storage_mgr/storage_server_list/index.ui">服务器 →</a><a href="/storage_mgr/storage_export_list/index.ui">导出 →</a><a href="/storage_mgr/storage_mount_list/index.ui">挂载 →</a></div>
+        <div class="card"><h3>🏗 镜像管理</h3><p>国内镜像源、本地仓库部署、镜像导入/同步</p>
+        <a href="/image_mgr/mirror_source_list/index.ui">镜像源 →</a><a href="/image_mgr/image_registry_list/index.ui">仓库 →</a><a href="/image_mgr/container_image_list/index.ui">镜像 →</a></div>
+    </div>
+</div>
+<div class="footer">pccs v0.1 · pccs.opencomputing.cn:9180</div>
 </body>
 </html>
