diff --git a/client/index.html b/client/index.html
index e5d6a6b..580c286 100644
--- a/client/index.html
+++ b/client/index.html
@@ -2,6 +2,7 @@
 <html lang="zh">
 <head>
     <meta charset="UTF-8"/>
+    <link rel="icon" href="/icon.png">
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <title>API Client</title>
     <style>
diff --git a/client/public/icon.png b/client/public/icon.png
new file mode 100644
index 0000000..28fb7f1
Binary files /dev/null and b/client/public/icon.png differ
diff --git a/client/src/App.vue b/client/src/App.vue
index 5c6631a..8ffe460 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -1,27 +1,31 @@
 <script setup>
-import {ref} from 'vue'
-import {useRouter} from 'vue-router'
+import {ref} from "vue";
 
-const router = useRouter()
-const headerNav = ref(['home'])
-
-function handleHeaderNavSelect({item, key, selectedKeys}) {
-  router.push({name: key})
-}
+const headerNavSelected = ref(['home'])
 </script>
 
 <template>
   <a-layout class="container">
     <a-layout-header class="header">
+      <div class="float-left">
+        <img class="icon w-12 h-12" src="/icon.png" alt="icon">
+        <span class="title mx-3 text-white text-xl">智能服务</span>
+      </div>
       <a-menu
-          v-model:selectedKeys="headerNav"
-          @select="handleHeaderNavSelect"
+          v-model:selected-keys="headerNavSelected"
           theme="dark"
           mode="horizontal"
       >
-        <a-menu-item key="home">首页</a-menu-item>
-        <a-menu-item key="management">管理台</a-menu-item>
+        <a-menu-item key="home">
+          <router-link to="/home">首页</router-link>
+        </a-menu-item>
+        <a-menu-item key="management">
+          <router-link to="/management">管理台</router-link>
+        </a-menu-item>
       </a-menu>
+      <div class="float-right">
+
+      </div>
     </a-layout-header>
     <router-view/>
   </a-layout>
@@ -31,4 +35,8 @@ function handleHeaderNavSelect({item, key, selectedKeys}) {
 .container {
   min-height: 100vh;
 }
+
+.header {
+  padding: 0 20px 0 20px;
+}
 </style>
\ No newline at end of file
diff --git a/client/src/main.js b/client/src/main.js
index cceb294..bd0cb3a 100644
--- a/client/src/main.js
+++ b/client/src/main.js
@@ -1,39 +1,39 @@
 import {createApp} from 'vue'
-import {createRouter, createWebHistory} from 'vue-router'
+import {createMemoryHistory, createRouter, createWebHistory} from 'vue-router'
 import App from './App.vue'
 import {Layout, Menu} from 'ant-design-vue'
 import 'ant-design-vue/dist/reset.css'
 
 createApp(App)
-    .use(Layout)
-    .use(Menu)
-    .use(createRouter({
-        history: createWebHistory(),
-        routes: [
-            {path: '/', redirect: 'home'},
-            {
-                name: 'home',
-                path: '/home',
-                component: () => import('./views/Home.vue'),
-            },
-            {
-                name: 'management',
-                path: '/management',
-                component: () => import('./views/management/Index.vue'),
-                redirect: 'overview',
-                children: [
-                    {
-                        name: 'overview',
-                        path: '/overview',
-                        component: () => import('./views/management/Overview.vue'),
-                    },
-                    {
-                        name: 'setting',
-                        path: '/setting',
-                        component: () => import('./views/management/Setting.vue'),
-                    },
-                ],
-            },
+  .use(Layout)
+  .use(Menu)
+  .use(createRouter({
+    history: createWebHistory(),
+    routes: [
+      {path: '/', redirect: 'home'},
+      {
+        name: 'home',
+        path: '/home',
+        component: () => import('./views/Home.vue'),
+      },
+      {
+        name: 'management',
+        path: '/management',
+        component: () => import('./views/management/Index.vue'),
+        redirect: '/management/overview',
+        children: [
+          {
+            name: 'overview',
+            path: 'overview',
+            component: () => import('./views/management/Overview.vue'),
+          },
+          {
+            name: 'setting',
+            path: 'setting',
+            component: () => import('./views/management/Setting.vue'),
+          },
         ],
-    }))
-    .mount('#app')
+      },
+    ],
+  }))
+  .mount('#app')
diff --git a/client/src/views/management/Index.vue b/client/src/views/management/Index.vue
index e2b9b53..f9373e8 100644
--- a/client/src/views/management/Index.vue
+++ b/client/src/views/management/Index.vue
@@ -1,13 +1,7 @@
 <script setup>
 import {ref} from 'vue'
-import {useRouter} from 'vue-router'
 
-const router = useRouter()
 const sideNav = ref(['overview'])
-
-function handleSideNavSelect({item, key, selectedKeys}) {
-  router.push({name: key})
-}
 </script>
 
 <template>
@@ -16,17 +10,20 @@ function handleSideNavSelect({item, key, selectedKeys}) {
       <a-menu
           class="h-full"
           v-model:selectedKeys="sideNav"
-          @select="handleSideNavSelect"
           mode="inline"
       >
-        <a-menu-item key="overview">概览</a-menu-item>
+        <a-menu-item key="overview">
+          <router-link to="/management/overview">概览</router-link>
+        </a-menu-item>
         <a-sub-menu key="system">
           <template #title>
               <span>
                 系统管理
               </span>
           </template>
-          <a-menu-item key="setting">设置</a-menu-item>
+          <a-menu-item key="setting">
+            <router-link to="/management/setting">设置</router-link>
+          </a-menu-item>
         </a-sub-menu>
       </a-menu>
     </a-layout-sider>
