diff --git a/index.html b/index.html
index c571ecb..62fc1fe 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>test-ssg</title>
-	<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4403230_96rmept2ld.css" />
+	<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4403230_70xz405a1wg.css" />
   </head>
   <body>
     <div id="app"></div>
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 794a0d4..d41ff3b 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -121,37 +121,33 @@ h6,
   background-size: var(--mosaic-bg-size) var(--mosaic-bg-size);
 }
 button[custom],
-button[custom="white"] {
-  min-width: 19.4rem;
-  height: 5rem;
-  padding: 0 1rem;
-  border-radius: 0;
-  font-family: KaiseiOpti-Bold;
-  font-size: var(--button-font-size, 2rem);
-  color: var(--button-color, #232323);
-  background: var(--button-bgcolor, #fff);
-  border: var(--button-border, none);
+button[custom="red"] {
+  width: 100%;
+  height: 38px;
+  border-radius: 4px;
+  border: none;
+  background-color: #9a2125;
+  color: #fff;
+  transition: all 0.3s ease-in-out;
+  box-shadow: 0 2px 5px rgba(7, 129, 105, 0.3);
   cursor: pointer;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
-button[custom]:active,
-button[custom="white"]:active {
-  background: var(--button-click-bgcolor, #e4e4e4);
-  color: var(--button-click-color, #232323);
+button[custom]:hover,
+button[custom="red"]:hover {
+  background-color: #99494c;
 }
-button[custom="black"] {
-  --button-bgcolor: #232323;
-  --button-color: #fff;
-  --button-click-bgcolor: #333;
-  --button-click-color: #fff;
-  --button-font-size: 1.6rem;
+button[custom] > .iconfont,
+button[custom="red"] > .iconfont {
+  margin-right: 4px;
+  font-size: 16px;
 }
-button[custom="black-box"] {
-  --button-bgcolor: transparent;
-  --button-color: #232323;
-  --button-border: 0.2rem solid #979797;
-  --button-click-bgcolor: #979797;
-  --button-click-color: #fff;
-  --button-font-size: 1.6rem;
+button[custom] > .label,
+button[custom="red"] > .label {
+  font-size: 14px;
 }
 .hover-bottom-animation {
   position: relative;
diff --git a/src/assets/css/style.less b/src/assets/css/style.less
index e29e6ca..c14463a 100644
--- a/src/assets/css/style.less
+++ b/src/assets/css/style.less
@@ -148,40 +148,37 @@ h6,
 
 // 自定义button按钮
 button[custom],
-button[custom="white"] {
-	min-width: 19.4rem;
-	height: 5rem;
-	padding: 0 1rem;
-	border-radius: 0;
-	font-family: KaiseiOpti-Bold;
-	font-size: var(--button-font-size, 2rem);
-	color: var(--button-color, #232323);
-	background: var(--button-bgcolor, #fff);
-	border: var(--button-border, none);
+button[custom="red"] {
+	width: 100%;
+	height: 38px;
+	border-radius: 4px;
+	border: none;
+	background-color: #9a2125;
+	color: #fff;
+	transition: all 0.3s ease-in-out;
+	box-shadow: 0 2px 5px rgba(7, 129, 105, 0.3);
 	cursor: pointer;
+	font-size: 12px;
 
-	&:active {
-		background: var(--button-click-bgcolor, #e4e4e4);
-		color: var(--button-click-color, #232323);
+	&:hover {
+		background-color: #99494c;
 	}
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	>.iconfont {
+		margin-right: 4px;
+		font-size: 16px;
+	}
+
+	>.label {
+		font-size: 14px;
+	}
+
 }
 
-button[custom="black"] {
-	--button-bgcolor: #232323;
-	--button-color: #fff;
-	--button-click-bgcolor: #333;
-	--button-click-color: #fff;
-	--button-font-size: 1.6rem;
-}
-
-button[custom="black-box"] {
-	--button-bgcolor: transparent;
-	--button-color: #232323;
-	--button-border: 0.2rem solid #979797;
-	--button-click-bgcolor: #979797;
-	--button-click-color: #fff;
-	--button-font-size: 1.6rem;
-}
 
 .hover-bottom-animation {
 	position: relative;
diff --git a/src/components/main-header.vue b/src/components/main-header.vue
index e05b199..a8cb1d6 100644
--- a/src/components/main-header.vue
+++ b/src/components/main-header.vue
@@ -17,7 +17,7 @@
 			<down-menu :title="langList.find((v) => v.value === locale)?.label || 'English'">
 				<router-link
 					class="link"
-					:to="`/${item.value}`"
+					:to="`/${item.value}${path}`"
 					v-for="item in langList"
 					:key="item.value"
 					v-show="item.value !== locale"
@@ -45,9 +45,10 @@
 	const token = computed(() => userInfoStore.state.token)
 	const route = useRoute()
 	const lang = computed(() => route.params.lang)
+	const path = computed(() => route.path.replace(new RegExp(`^/${lang.value}/`), '/'))
 	if (lang.value) setLang(lang.value)
 	watch(lang, (newVal) => {
-		setLang(newVal)
+		if (lang.value) setLang(newVal)
 	})
 	const langList = ref([
 		{
diff --git a/src/pages/my-account/account-info.vue b/src/pages/my-account/account-info.vue
index 3271576..043bb31 100644
--- a/src/pages/my-account/account-info.vue
+++ b/src/pages/my-account/account-info.vue
@@ -1,27 +1,114 @@
 <template>
 	<div class="account-info">
 		<div class="left">
-			<img alt="" src="" class="avatar" />
-			<div class="name">12312</div>
-			<div class="name">12312</div>
-			<div class="name">12312</div>
+			<div class="info">
+				<img alt="" src="" class="avatar" />
+				<div class="name">12312</div>
+				<div class="email">12312@example.com</div>
+			</div>
+			<router-link
+				class="link"
+				v-for="(v, i) in navs"
+				:key="i"
+				:to="v.path"
+				@click="typeof v.onClick === 'function' && v.onClick()"
+			>
+				<span class="iconfont" :class="v.icon"></span>
+				<span class="label">{{ v.label }}</span>
+			</router-link>
+		</div>
+		<div class="content">
+			<router-view></router-view>
 		</div>
-		<div class="content"></div>
 	</div>
 </template>
 <script setup lang="ts">
-	import { computed } from 'vue'
+	import { computed, ref } from 'vue'
+	import { useUserInfoStore } from '@/stores/userInfo'
+	const userInfoStore = useUserInfoStore()
+	const navs = ref([
+		{
+			path: '/my-account',
+			label: 'Dashboard',
+			icon: 'icon-dashboard'
+		},
+		{
+			path: '/my-account/orders',
+			label: 'Orders',
+			icon: 'icon-orders'
+		},
+		{
+			path: '/my-account/subscriptions',
+			label: 'Subscriptions',
+			icon: 'icon-subscriptions'
+		},
+		{
+			path: '/my-account/address',
+			label: 'Address',
+			icon: 'icon-address'
+		},
+		{
+			path: '/my-account/methods',
+			label: 'Payment methods',
+			icon: 'icon-duidiaojiaohuanduihuan'
+		},
+		{
+			path: '/my-account/details',
+			label: 'Account details',
+			icon: 'icon-tubiao-'
+		},
+		{
+			path: '/my-account',
+			label: 'Log out',
+			icon: 'icon-tuichu',
+			onClick: () => {
+				console.log('logout')
+				userInfoStore.setToken('')
+			}
+		}
+	])
 </script>
 
 <style scoped lang="less">
 	.account-info {
 		display: flex;
-		>.left{
+		> .left {
 			width: 270px;
 			border-right: 1px solid #e1e1e1;
 			margin-right: 30px;
+			> .info {
+				margin-bottom: 30px;
+				> .avatar {
+					width: 86px;
+					height: 86px;
+					margin-bottom: 15px;
+					border-radius: 50%;
+				}
+				> .name {
+					color: #222;
+					font-size: 16px;
+				}
+				> .email {
+					color: #333;
+					font-size: 14px;
+				}
+			}
+			> .link {
+				display: flex;
+				align-items: center;
+				width: 100%;
+				color: #222;
+				font-size: 16px;
+				text-decoration: none;
+				padding: 7px 0;
+				line-height: 1.6;
+				> .iconfont {
+					font-size: 20px;
+					margin-right: 5px;
+				}
+			}
 		}
-		>.content{
+		> .content {
 			flex: 1;
 		}
 	}
diff --git a/src/pages/my-account/css/style.css b/src/pages/my-account/css/style.css
index badda4a..d952c2e 100644
--- a/src/pages/my-account/css/style.css
+++ b/src/pages/my-account/css/style.css
@@ -105,20 +105,3 @@
 .register > form > .tip > a {
   color: #000;
 }
-.login > form > button,
-.register > form > button {
-  width: 100%;
-  height: 38px;
-  border-radius: 4px;
-  border: none;
-  background-color: #9a2125;
-  color: #fff;
-  transition: all 0.3s ease-in-out;
-  box-shadow: 0 2px 5px rgba(7, 129, 105, 0.3);
-  cursor: pointer;
-  font-size: 12px;
-}
-.login > form > button:hover,
-.register > form > button:hover {
-  background-color: #99494c;
-}
diff --git a/src/pages/my-account/index.vue b/src/pages/my-account/index.vue
index 9a59245..cc8a6e6 100644
--- a/src/pages/my-account/index.vue
+++ b/src/pages/my-account/index.vue
@@ -3,7 +3,7 @@
 		<div class="header">
 			<h1 class="title">
 				<span class="iconfont icon-tubiao-"></span>
-				<span>My Account</span>
+				<span>My account</span>
 			</h1>
 		</div>
 		<div class="content" v-if="!token">
diff --git a/src/pages/my-account/less/style.less b/src/pages/my-account/less/style.less
index 5a80f12..1c84da8 100644
--- a/src/pages/my-account/less/style.less
+++ b/src/pages/my-account/less/style.less
@@ -103,22 +103,5 @@
 				color: #000;
 			}
 		}
-
-		>button {
-			width: 100%;
-			height: 38px;
-			border-radius: 4px;
-			border: none;
-			background-color: #9a2125;
-			color: #fff;
-			transition: all 0.3s ease-in-out;
-			box-shadow: 0 2px 5px rgba(7, 129, 105, 0.3);
-			cursor: pointer;
-			font-size: 12px;
-
-			&:hover {
-				background-color: #99494c;
-			}
-		}
 	}
 }
\ No newline at end of file
diff --git a/src/pages/my-account/login.vue b/src/pages/my-account/login.vue
index 69934a3..2ec6b2f 100644
--- a/src/pages/my-account/login.vue
+++ b/src/pages/my-account/login.vue
@@ -30,7 +30,7 @@
 					>Lost your password?</router-link
 				>
 			</div>
-			<button type="submit">LOG IN</button>
+			<button type="submit" custom>LOG IN</button>
 		</form>
 	</div>
 </template>
diff --git a/src/pages/my-account/orders.vue b/src/pages/my-account/orders.vue
new file mode 100644
index 0000000..1462518
--- /dev/null
+++ b/src/pages/my-account/orders.vue
@@ -0,0 +1,11 @@
+<template>
+	<div class="orders">No order has been made yet.</div>
+</template>
+<script setup lang="ts">
+	import { computed, ref } from 'vue'
+</script>
+
+<style scoped lang="less">
+	.orders {
+	}
+</style>
diff --git a/src/pages/my-account/register.vue b/src/pages/my-account/register.vue
index 0c63593..bdfe562 100644
--- a/src/pages/my-account/register.vue
+++ b/src/pages/my-account/register.vue
@@ -51,7 +51,7 @@
 					>Privacy Policy</router-link
 				>
 			</div>
-			<button type="submit">REGISTER</button>
+			<button type="submit" custom>REGISTER</button>
 		</form>
 	</div>
 </template>
diff --git a/src/pages/my-account/welcome.vue b/src/pages/my-account/welcome.vue
new file mode 100644
index 0000000..f0de38a
--- /dev/null
+++ b/src/pages/my-account/welcome.vue
@@ -0,0 +1,64 @@
+<template>
+	<div class="welcome">
+		<h3 class="title">Welcome to your account page</h3>
+		<div class="tip">
+			Hi <b>XXX</b>, today is a great day to check your account page. You can check also:
+		</div>
+		<div class="buttons">
+			<router-link class="link" v-for="(v, i) in navs" :key="i" :to="v.path">
+				<button custom>
+					<span class="iconfont" :class="v.icon"></span>
+					<span class="label">{{ v.label }}</span>
+				</button>
+			</router-link>
+		</div>
+	</div>
+</template>
+<script setup lang="ts">
+	import { computed, ref } from 'vue'
+	const navs = ref([
+		{
+			path: '/my-account/orders',
+			label: 'RECENT ORDERS',
+			icon: 'icon-orders'
+		},
+
+		{
+			path: '/my-account/address',
+			label: 'ADDRESSSES',
+			icon: 'icon-address'
+		},
+
+		{
+			path: '/my-account/details',
+			label: 'ACCOUNT DETAILS',
+			icon: 'icon-tubiao-'
+		}
+	])
+</script>
+
+<style scoped lang="less">
+	.welcome {
+		> .title {
+			font-weight: 600;
+			letter-spacing: 2px;
+			color: #222222;
+			font-size: 24px;
+			margin-bottom: 10px;
+		}
+		> .tip {
+			color: #333;
+			margin-bottom: 20px;
+		}
+		> .buttons {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			> .link {
+				margin: 0 4px;
+				flex: 1;
+				text-decoration: none;
+			}
+		}
+	}
+</style>
diff --git a/src/routes.ts b/src/routes.ts
index 56f02a2..48180f4 100644
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -35,7 +35,21 @@ export const routes: RouteRecordRaw[] = [
 			{
 				path: 'my-account',
 				name: 'MyAccount',
-				component: () => import('./pages/my-account/index.vue')
+				component: () => import('./pages/my-account/index.vue'),
+				children: [
+					{
+						path: '',
+						component: () => import('./pages/my-account/welcome.vue'),
+					},
+					{
+						path: 'orders',
+						component: () => import('./pages/my-account/orders.vue'),
+					},
+					{
+						path: ':pathMatch(.*)*',
+						component: () => import('./pages/my-account/welcome.vue'),
+					},
+				]
 			},
 		]
 	}
