diff --git a/package.json b/package.json
index c7bcc3a..4720d48 100644
--- a/package.json
+++ b/package.json
@@ -106,6 +106,7 @@
     "iOS >= 8"
   ],
   "dependencies": {
+    "@element-plus/icons-vue": "^2.3.1",
     "element-plus": "^2.9.2"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d98ef0d..8f99515 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@element-plus/icons-vue':
+        specifier: ^2.3.1
+        version: 2.3.1(vue@3.4.26(typescript@5.4.5))
       element-plus:
         specifier: ^2.9.2
         version: 2.9.2(vue@3.4.26(typescript@5.4.5))
diff --git a/src/components/Heads.vue b/src/components/Heads.vue
index bd5ce2c..4812e97 100644
--- a/src/components/Heads.vue
+++ b/src/components/Heads.vue
@@ -1,26 +1,45 @@
 <template>
 	<div class="head">
 		<div class="head_l">
-			<img src="/icoimg.png" alt="收缩" />
+<!--			<img src="/icoimg.png" alt="收缩" />-->
 		</div>
-		<div class="head_r">
-			<img src="/logo.png" alt="头像" class="profile" />
-			<div class="head_user">
-				<div class="head_user_name">Json Taylor</div>
-				<div class="head_user_desc">web Designer</div>
+
+		<el-dropdown>
+			<div class="head_r">
+				<img :src="userStore().adminUserInfo.avatar" alt="头像" class="profile" />
+				<div class="head_user">
+					<div class="head_user_name">{{ userStore().adminUserInfo.username }}</div>
+					<div class="head_user_desc">管理员</div>
+				</div>
 			</div>
-		</div>
+			<template #dropdown>
+				<el-dropdown-menu slot="dropdown">
+					<el-dropdown-item >个人中心</el-dropdown-item>
+					<el-dropdown-item @click="logout">退出登录</el-dropdown-item>
+				</el-dropdown-menu>
+			</template>
+		</el-dropdown>
 	</div>
 </template>
 <script setup lang="ts">
-
+import { useRouter } from "vue-router";
+const router = useRouter();
+/**
+ * 退出登录
+ */
+const logout = () => {
+	logoutAdmin().then(()=>{
+		toast.success("退出成功~")
+		router.push('/login');
+	})
+}
 </script>
 <style scoped>
 	.head{
 		width: 100%;
 		height: 50px;
-		background: #FFFFFF;
-		border-bottom: 1px solid #f6f6f6;
+		background: #fdfdfe;
+
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
@@ -34,6 +53,7 @@
 		.head_l img{
 			width: 25px;
 			height: 25px;
+			cursor: pointer;
 		}
 		.head_r{
 			display: flex;
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index 2ffbc99..1769d03 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -1,144 +1,43 @@
 <template>
-	<div class="main">
-		<div class="nav_left">
-			<div class="logo">
-				<img src="/logo.png" alt="后台管理系统">
-			</div>
-			<div class="nav_list">
-				<div class="nav_title"><img src="/logo.png" alt="图标">导航管理</div>
-				<div class="rArrl"></div>
-			</div>
-			<div class="nav_li">
-				<ul>
-					<li v-for="r of getFrontList()" :key="r.path">
-						<img src="/logo.png" alt="图标"><RouterLink style="width: 100%; height: 45px; line-height: 45px" :to="r.path">{{ r.name }}</RouterLink>
-					</li>
-				</ul>
-			</div>
-			<div class="nav_list">
-				<div class="nav_title"><img src="/logo.png" alt="图标">权限管理</div>
-				<div class="rArrl"></div>
-			</div>
-			<div class="nav_list">
-				<div class="nav_title"><img src="/logo.png" alt="图标">模型设置</div>
-				<div class="rArrl"></div>
-			</div>
-			<div class="nav_list">
-				<div class="nav_title"><img src="/logo.png" alt="图标">内容管理</div>
-				<div class="rArrl"></div>
-			</div>
-			<div class="nav_list">
-				<div class="nav_title"><img src="/logo.png" alt="图标">会员管理</div>
-				<div class="rArrl"></div>
-			</div>
-			<div class="nav_list">
-				<div class="nav_title"><img src="/logo.png" alt="图标">模版管理</div>
-				<div class="rArrl"></div>
-			</div>
-		</div>
-		<div class="nav_right">
-			<Heads />
-			<div class="content">
-				<router-view v-slot="{ Component }">
-					<transition name="fade" mode="out-in">
-						<component :is="Component" />
-					</transition>
-				</router-view>
-			</div>
-		</div>
-	</div>
-
+	<el-container>
+		<el-header>
+			<heads></heads>
+		</el-header>
+		<el-container>
+			<el-aside width="200px" >
+				<el-menu
+					default-active="2"
+					router
+				>
+					<el-menu-item
+						v-for="r in getFrontList()"
+						:key="r.name"
+						:index="r.path"
+					>
+						<component  class="icons" :is="r.icon" />
+						<template #title>{{ r.name }}</template>
+					</el-menu-item>
+				</el-menu>
+			</el-aside>
+			<el-main class="main">
+				<router-view ></router-view>
+			</el-main>
+		</el-container>
+	</el-container>
 </template>
+<script setup lang="ts">
+import { getFrontList } from '~/utils/utils'
+</script>
 
 <style scoped>
-		.main{
-			width: 100%;
-			display: flex;
-			justify-content: space-between;
-			height: 100vh;
-			overflow: hidden;
-			.nav_left{
-				width: 15%;
-				height: 100vh;
-				background: #111c43;
-				overflow-y: auto;
-				.logo{
-					width: 100%;
-					height: 60px;
-					border-bottom: 0.5px solid #293356;
-					display: flex;
-					align-items: center;
-					justify-content: center;
-				}
-				.logo img{
-					width: 85%;
-					height: 40px;
-					background: #293356;
-					color: #FFFFFF;
-					font-size: 12px;
-				}
-				.nav_list{
-					padding: 10px;
-					display: flex;
-					align-items: center;
-					justify-content: space-between;
-					height: 45px;
-					.nav_title{
-						font-size: 14px;
-						color: #a3aed1;
-						display: flex;
-						align-items: center;
-					}
-					.nav_title img{
-						width: 20px;
-						height: 20px;
-						color: #333333;
-						margin-right: 8px;
-					}
-					.rArrl{
-						width: 7px;
-						height: 7px;
-						border-top: 1px solid #a3aed1;
-						border-right: 1px solid #a3aed1;
-						margin-top: 9px;
-						-webkit-transform: translate3d(0, -50%, 0) rotate(45deg);
-						transform: translate3d(0, -50%, 0) rotate(45deg);
-					}
-				}
-				.nav_li{
-					width: 100%;
-					padding-left: 16%;
-					background: #1a223f;
-				}
-				.nav_li ul li{
-					font-size: 12px;
-					color: #a3aed1;
-					display: flex;
-					align-items: center;
-					height: 45px;
-					width: 100%;
-				}
-				.nav_li ul li img{
-					width: 20px;
-					height: 20px;
-					color: #333333;
-					margin-right: 8px;
-				}
-			}
-			.nav_right{
-				width: 85%;
-				height: 100vh;
-				background: #f0f1f7;
-				.content{
-					width: 100%;
-					height: auto;
-					overflow-y: auto;
-				}
-			}
-		}
+.main{
+	width: 100%;
+	height: 100%;
+	background-color: #f6f4f4;
+}
+.icons{
+	width: 18px;
+	height: 18px;
+	margin-right: 5px;
+}
 </style>
-<script setup lang="ts">
-import Heads from '~/components/Heads.vue'
-import { getFrontList } from '~/utils/utils'
-
-</script>
diff --git a/src/main.ts b/src/main.ts
index e621ee0..f0368dd 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -7,8 +7,14 @@ import 'virtual:unocss-devtools'
 import './styles/main.css'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+
+
 import App from './App.vue'
 const app = createApp(App)
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+	app.component(key, component)
+}
 app.use(ElementPlus)
 
 app.mount('#app')
diff --git a/src/pages/admin/index.vue b/src/pages/admin/index.vue
index 4837910..19c7bcc 100644
--- a/src/pages/admin/index.vue
+++ b/src/pages/admin/index.vue
@@ -1,11 +1,10 @@
+<template>
+dsdsd
+</template>
 <script setup lang="ts">
 
 </script>
 
-<template>
-dsdsd
-</template>
-
 <style scoped>
 
 </style>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 763b2de..7e397a4 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -11,10 +11,3 @@ import FoundationLine from '~/components/view/foundation-line.vue'
 
 
 </script>
-<route lang="json">
-{
-"meta": {
-"layout": "front"
-}
-}
-</route>
diff --git a/src/pages/login.vue b/src/pages/login.vue
index 9c71131..ba8974f 100644
--- a/src/pages/login.vue
+++ b/src/pages/login.vue
@@ -8,7 +8,7 @@
 							<div class="module_desc">输入用户名 & 登录密码</div>
 							<div class="module_m">
 								<div class="module_text">用户名</div>
-								<input class="module_input" type="text" placeholder="请输入用户名" v-model="Email" />
+								<input class="module_input" type="text" placeholder="输入用户名" v-model="Email" />
 							</div>
 							<div class="module_m">
 								<div class="module_text">密码</div>
diff --git a/src/pages/register.vue b/src/pages/register.vue
index bc5a9bf..5c7be73 100644
--- a/src/pages/register.vue
+++ b/src/pages/register.vue
@@ -5,7 +5,7 @@
 					<div class="module_desc">输入用户名 & 密码</div>
 					<div class="module_m">
 						<div class="module_text">用户名</div>
-						<input class="module_input" type="text" placeholder="8888@163.com" v-model="Email" />
+						<input class="module_input" type="text" placeholder="输入用户名" v-model="Email" />
 					</div>
 					<div class="module_m">
 						<div class="module_text">密码</div>
@@ -14,7 +14,7 @@
 					<div class="module_m">
 						<div class="module_text">确认密码</div>
 						<div class="module_code">
-							<input class="module_input" type="password"  placeholder="请再次输入密码" v-model="Password" />
+							<input class="module_input" type="password"  placeholder="再次输入密码" v-model="Password" />
 						</div>
 					</div>
 <!--					<div class="module_m">-->
@@ -25,12 +25,16 @@
 <!--						</div>-->
 <!--					</div>-->
 <!--					<div class="module_radio"><input  type="radio"/>记住密码 </div>-->
-					<div class="forgetpwd">有账号吗？</div>
+					<div class="forgetpwd" @click="router.push('/login')">有账号？</div>
 					<button class="module_button">注册</button>
 				</div>
 		</div>
 </template>
 <script setup lang="ts">
+import { useRouter } from "vue-router";
+const router = useRouter();
+
+
 </script>
 <style scoped>
 .module{
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 9ab8601..e536ce5 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -10,24 +10,27 @@ export const getUuid = (): string => {
 };
 
 
-
 export const getFrontList = () => {
 	const routes = [
 		{
 			"path": "/",
-			"name": "首页"
+			"name": "首页",
+			"icon": "House",
 		},
 		{
 			"path": "/",
-			"name": "首页"
+			"name": "首页",
+			"icon": "House",
 		},
 		{
 			"path": "/",
-			"name": "首页"
+			"name": "首页",
+			"icon": "House",
 		},
 		{
 			"path": "/",
-			"name": "首页"
+			"name": "首页",
+			"icon": "House",
 		},
 
 	]