diff --git a/src/assets/icons/home.svg b/src/assets/icons/home.svg
new file mode 100644
index 0000000..6e4618c
--- /dev/null
+++ b/src/assets/icons/home.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="160.000000pt" height="160.000000pt" viewBox="0 0 160.000000 160.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,160.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M752 1589 c-24 -5 -59 -18 -78 -30 -34 -21 -589 -597 -641 -666 -64
+-84 -13 -196 97 -210 l40 -6 0 -256 c0 -142 5 -272 10 -293 13 -45 77 -105
+122 -113 18 -3 114 -5 213 -3 l179 3 13 25 c9 18 13 93 13 273 l0 247 75 0 75
+0 0 -258 c0 -241 1 -260 19 -276 17 -15 41 -17 218 -14 l200 3 37 29 c63 48
+66 63 66 366 l0 270 34 0 c102 0 171 81 146 171 -14 51 -617 685 -680 715 -55
+27 -101 33 -158 23z m116 -125 c49 -34 613 -638 610 -653 -3 -12 -19 -17 -73
+-19 -110 -4 -105 12 -105 -340 0 -261 -2 -298 -17 -314 -14 -16 -33 -18 -160
+-18 l-143 0 0 229 c0 126 -4 241 -10 255 -5 14 -24 35 -42 46 -29 18 -46 20
+-145 18 -177 -5 -183 -16 -183 -335 l0 -213 -137 0 c-76 0 -143 4 -149 8 -31
+20 -34 55 -34 345 0 228 -3 297 -13 305 -7 6 -42 12 -77 14 -51 2 -65 7 -68
+19 -3 17 556 617 607 651 33 22 109 23 139 2z"/>
+</g>
+</svg>
diff --git a/src/assets/icons/library.svg b/src/assets/icons/library.svg
new file mode 100644
index 0000000..00c0fd4
--- /dev/null
+++ b/src/assets/icons/library.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="48.000000pt" height="48.000000pt" viewBox="0 0 48.000000 48.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,48.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M25 455 c-21 -20 -25 -34 -25 -85 0 -85 25 -110 110 -110 51 0 65 4
+85 25 21 20 25 34 25 85 0 51 -4 65 -25 85 -20 21 -34 25 -85 25 -51 0 -65 -4
+-85 -25z m143 -27 c16 -16 16 -100 0 -116 -16 -16 -100 -16 -116 0 -16 16 -16
+100 0 116 7 7 33 12 58 12 25 0 51 -5 58 -12z"/>
+<path d="M280 457 c-37 -39 -16 -103 53 -157 35 -28 48 -25 91 16 56 54 69
+101 40 139 -12 16 -28 20 -90 21 -65 2 -78 -1 -94 -19z m73 -39 l16 -23 19 24
+c13 15 25 22 36 18 26 -10 19 -41 -19 -83 l-35 -39 -35 37 c-19 21 -35 46 -35
+56 0 38 30 43 53 10z"/>
+<path d="M25 195 c-21 -20 -25 -34 -25 -85 0 -51 4 -65 25 -85 20 -21 34 -25
+85 -25 51 0 65 4 85 25 21 20 25 34 25 85 0 51 -4 65 -25 85 -20 21 -34 25
+-85 25 -51 0 -65 -4 -85 -25z m143 -27 c16 -16 16 -100 0 -116 -16 -16 -100
+-16 -116 0 -16 16 -16 100 0 116 16 16 100 16 116 0z"/>
+<path d="M285 195 c-21 -20 -25 -34 -25 -85 0 -51 4 -65 25 -85 20 -21 34 -25
+85 -25 51 0 65 4 85 25 21 20 25 34 25 85 0 51 -4 65 -25 85 -20 21 -34 25
+-85 25 -51 0 -65 -4 -85 -25z m143 -27 c16 -16 16 -100 0 -116 -16 -16 -100
+-16 -116 0 -16 16 -16 100 0 116 16 16 100 16 116 0z"/>
+</g>
+</svg>
diff --git a/src/assets/icons/profile.svg b/src/assets/icons/profile.svg
new file mode 100644
index 0000000..c66bf41
--- /dev/null
+++ b/src/assets/icons/profile.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M2435 5114 c-16 -2 -65 -9 -109 -15 -246 -33 -541 -172 -741 -349
+-253 -223 -432 -545 -486 -875 -20 -120 -17 -390 5 -500 71 -361 275 -695 550
+-903 l68 -52 -28 -10 c-121 -46 -173 -69 -276 -120 -444 -223 -805 -560 -1062
+-990 -210 -352 -328 -745 -352 -1180 l-7 -120 201 0 202 0 0 49 c0 339 141
+807 330 1095 291 445 681 750 1156 905 452 148 896 148 1348 0 475 -155 865
+-460 1156 -905 189 -288 330 -756 330 -1095 l0 -49 202 0 201 0 -7 120 c-24
+435 -142 828 -352 1180 -257 430 -618 767 -1062 990 -103 51 -155 74 -276 120
+l-28 10 68 52 c275 208 479 542 550 903 22 110 25 380 5 500 -43 263 -176 542
+-352 742 -219 247 -527 421 -848 479 -77 14 -332 26 -386 18z m294 -409 c588
+-96 990 -650 896 -1234 -96 -588 -650 -990 -1234 -896 -588 96 -990 650 -896
+1234 96 588 650 990 1234 896z"/>
+</g>
+</svg>
diff --git a/src/components/FooterNavigation.vue b/src/components/FooterNavigation.vue
new file mode 100644
index 0000000..47609e6
--- /dev/null
+++ b/src/components/FooterNavigation.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+	import { computed } from 'vue'
+	import { useRouter } from 'vue-router'
+	const router = useRouter()
+	const currentRoute = computed(() => router.currentRoute.value.path)
+
+	defineProps({
+		/** 是否显示占位符 */
+		isPlaceholder: { type: Boolean, default: false }
+	})
+
+	const handleClickReturn = () => {
+		router.back()
+		// emit('clickReturn')
+	}
+	const navs = [
+		{ label: 'Home', icon: 'home', size: 73, path: '/home' },
+		{ label: 'Library', icon: 'library', size: 53, path: '/workshop/library' },
+		{ label: 'Profile', icon: 'profile', size: 55, path: '/workshop/creation' }
+	]
+	const onNavClick = (nav) => {
+		if (currentRoute.value !== nav.path) router.push(nav.path)
+	}
+</script>
+
+<template>
+	<div class="footer-navigation main">
+		<div
+			v-for="nav in navs"
+			:key="nav.path"
+			:class="{ active: currentRoute === nav.path }"
+			@click="onNavClick(nav)"
+		>
+			<SvgIcon :name="nav.icon" size="55" />
+			<span class="label">{{ nav.label }}</span>
+		</div>
+	</div>
+	<div class="footer-navigation placeholder" v-show="isPlaceholder"></div>
+</template>
+
+<style scoped lang="less">
+	.footer-navigation {
+		width: 100%;
+		height: var(--footer-navigation-height, 14.9rem);
+	}
+	.footer-navigation.main {
+		position: fixed;
+		bottom: 0;
+		z-index: var(--footer-navigation-z-index, 999);
+		background-color: var(--footer-navigation-background, #fff);
+		box-shadow: -2.6rem -1.4rem 3.47rem 0 rgba(0, 0, 0, 0.05);
+		display: flex;
+		align-items: center;
+		justify-content: space-evenly;
+		> div {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			&.active > * {
+				color: #0d99ff;
+			}
+			> .label {
+				margin-top: 1.6rem;
+				font-family: satoshiRegular;
+				font-weight: 500;
+				font-size: 2.4rem;
+				line-height: 89%;
+			}
+		}
+	}
+</style>
diff --git a/src/components/HeaderTitle.vue b/src/components/HeaderTitle.vue
index b5cc528..4ae827b 100644
--- a/src/components/HeaderTitle.vue
+++ b/src/components/HeaderTitle.vue
@@ -4,8 +4,8 @@
 
 	defineProps({
 		title: { type: String, default: 'AI STYLING ASSISTANT' },
-		light: { type: Boolean,default:false },
-		hasSetting: { type: Boolean,default:false }
+		hasSetting: { type: Boolean, default: false },
+		styleType: { type: String, default: '1' },//1低 2高
 	})
 
 	defineEmits(['clickReturn'])
@@ -17,49 +17,57 @@
 </script>
 
 <template>
-	<div class="header-title main" :class="{ 'light': light }">
-		<div class="return" @click="handleClickReturn"><SvgIcon name="return" size="34" /></div>
-		<span class="title">{{ title }}</span>
-		<div class="setting" v-if="hasSetting"><SvgIcon name="setting" size="34" /></div>
+	<div class="header-title" :style-type="styleType">
+		<div class="main">
+			<div class="return" @click="handleClickReturn"><SvgIcon name="return" size="34" /></div>
+			<span class="title">{{ title }}</span>
+			<div class="setting" v-if="hasSetting"><SvgIcon name="setting" size="34" /></div>
+		</div>
+		<div class="placeholder"></div>
 	</div>
-	<div class="header-title placeholder"></div>
 </template>
 
 <style scoped lang="less">
 	.header-title {
 		width: 100%;
-		height: var(--header-title-height, 9.9rem);
-	}
-	.header-title.main {
-		position: fixed;
-		top: 0;
-		z-index: var(--header-title-z-index, 999);
-		background-color: var(--header-title-background, #000000);
-		display: flex;
-		align-items: center;
-		justify-content: center;
+		&[style-type="2"] {
+			--header-title-height: 14.5rem;
+			--header-title-border-bottom-width: 0.2rem;
+			--header-title-return-left: 7.8rem;
+		}
+		> div {
+			width: 100%;
+			height: var(--header-title-height, 9.9rem);
+			border-bottom-width: var(--header-title-border-bottom-width, 0);
+			border-bottom-style: solid;
+			border-bottom-color: var(--header-title-border-bottom-color, #D5D5D5);
+		}
+		> .main {
+			position: fixed;
+			top: 0;
+			z-index: var(--header-title-z-index, 999);
+			background-color: var(--header-title-background, #fff);
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			> .return {
+				position: absolute;
+				left: var(--header-title-return-left, 3.2rem);
+				display: inline-block;
+				--svg-icon-color: var(--header-title-color, #000);
+			}
+			> .title {
+				font-size: 4.8rem;
+				color: var(--header-title-color, #000);
+				font-family: 'boskaRegular';
+			}
+			> .setting {
+				position: absolute;
+				right: 3.2rem;
+				display: inline-block;
+			}
+		}
 		
-		> .return {
-			position: absolute;
-			left: 3.2rem;
-			display: inline-block;
-			--svg-icon-color: var(--header-title-color, #ffffff);
-		}
-		> .title {
-			font-size: 4.8rem;
-			color: var(--header-title-color, #ffffff);
-			font-family: 'boskaRegular';
-		}
-		>.setting{
-			position: absolute;
-			right: 3.2rem;
-			display: inline-block;
-		}
-	
-		&.light {
-			--header-title-color: #000000;
-			--svg-icon-color: #000000;
-			--header-title-background: #ffffff;
-		}
 	}
 </style>
diff --git a/src/router/index.ts b/src/router/index.ts
index e36fdbb..0dd4f6a 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -85,36 +85,31 @@ const router = createRouter({
           // 上传照片
           path: '/workshop/uploadFace',
           name: 'uploadFace',
-          component: () => import('../views/Workshop/uploadFace/index.vue')
+          component: () => import('../views/Workshop/uploadFace.vue')
         },
         {
           // 自定义创作
           path: '/workshop/customize',
           name: 'customize',
-          component: () => import('../views/Workshop/customize/index.vue'),
-          children: [
-            {
-              path: '/workshop/customize',
-              name: 'customizeHome',
-              component: () => import('../views/Workshop/customize/home.vue')
-            },
-            {
-              path: '/workshop/customize/library',
-              name: 'customizeLibrary',
-              component: () => import('../views/Workshop/customize/library.vue')
-            },
-            {
-              path: '/workshop/customize/creation',
-              name: 'customizeCreation',
-              component: () => import('../views/Workshop/customize/creation.vue')
-            }
-          ]
+          component: () => import('../views/Workshop/customize.vue'),
         },
+        {
+          // library
+          path: '/workshop/library',
+		  name: 'library',
+		  component: () => import('../views/Workshop/library.vue'),
+        },
+		{
+		  // creation
+		  path: '/workshop/creation',
+		  name: 'creation',
+		  component: () => import('../views/Workshop/creation.vue'),
+		},
         {
           // 完成创建
           path: '/workshop/end',
           name: 'end',
-          component: () => import('../views/Workshop/end/index.vue')
+          component: () => import('../views/Workshop/end.vue')
         }
       ]
     }
diff --git a/src/views/Workshop/customize/creation.vue b/src/views/Workshop/creation.vue
similarity index 59%
rename from src/views/Workshop/customize/creation.vue
rename to src/views/Workshop/creation.vue
index 6bdd2d0..95713fb 100644
--- a/src/views/Workshop/customize/creation.vue
+++ b/src/views/Workshop/creation.vue
@@ -1,7 +1,15 @@
 <script setup lang="ts">
-	import { ref } from 'vue'
+	import { ref, onMounted } from 'vue'
+	import HeaderTitle from '@/components/HeaderTitle.vue'
+	import FooterNavigation from '@/components/FooterNavigation.vue'
+
 	import { useRouter } from 'vue-router'
 	const router = useRouter()
+	const emit = defineEmits(['view-type'])
+
+	onMounted(() => {
+		emit('view-type', 1)
+	})
 	const onSave = () => {
 		// console.log('保存')
 		router.push({ name: 'end' })
@@ -13,6 +21,7 @@
 </script>
 
 <template>
+	<header-title style-type="2" />
 	<div class="creation">
 		<div class="title">Your Creation</div>
 		<div class="list">
@@ -20,39 +29,19 @@
 				<img src="@/assets/images/workshop/posture/posture_1.png" />
 			</div>
 		</div>
+		<div class="btns">
+			<button @click="onSave">Save</button>
+			<button @click="onContinue">Continue</button>
+		</div>
 	</div>
-	<div class="creation_btns">
-		<button @click="onSave">Save</button>
-		<button @click="onContinue">Continue Creating</button>
-	</div>
+	<footer-navigation is-placeholder />
 </template>
 
 <style scoped lang="less">
-	.creation_btns {
-		margin: 5.5rem 1rem 0;
-		display: flex;
-		justify-content: center;
-
-		> button {
-			box-sizing: content-box;
-			flex: 1;
-			height: 8rem;
-			border-radius: 0.7rem;
-			border: 0.3rem solid #000;
-			background: transparent;
-			font-family: satoshiRegular;
-			font-weight: 400;
-			font-size: 4rem;
-			margin: 0 2rem;
-			color: #000;
-			&:active {
-				opacity: 0.7;
-			}
-		}
-	}
 	.creation {
 		width: 100%;
-		height: 90%;
+		flex: 1;
+		overflow: hidden;
 		background-color: #e3e3e3;
 		border-radius: 1rem;
 		position: relative;
@@ -65,7 +54,7 @@
 			text-align: center;
 			line-height: 124%;
 			font-weight: 500;
-			margin: 5rem;
+			margin: 7.2rem 0;
 		}
 		> .list {
 			flex: 1;
@@ -90,5 +79,26 @@
 				}
 			}
 		}
+		> .btns {
+			margin: 9rem 0;
+			display: flex;
+			justify-content: center;
+
+			> button {
+				box-sizing: content-box;
+				font-family: satoshiRegular;
+				width: 35rem;
+				height: 8rem;
+				border-radius: 1.3rem;
+				background: #000;
+				font-weight: 400;
+				font-size: 4.2rem;
+				margin: 0 3.25rem;
+				color: #fff;
+				&:active {
+					opacity: 0.7;
+				}
+			}
+		}
 	}
 </style>
diff --git a/src/views/Workshop/customize/home.vue b/src/views/Workshop/customize.vue
similarity index 88%
rename from src/views/Workshop/customize/home.vue
rename to src/views/Workshop/customize.vue
index 08bce05..72cf8f0 100644
--- a/src/views/Workshop/customize/home.vue
+++ b/src/views/Workshop/customize.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
+	import HeaderTitle from '@/components/HeaderTitle.vue'
+	import FooterNavigation from '@/components/FooterNavigation.vue'
 </script>
 
 <template>
-	<div class="home">
+	<header-title style-type="2" />
+	<div class="customize">
 		<div class="title">Customize your Look!</div>
 		<p class="tip">Refine your Look</p>
 		<div class="input-box">
@@ -24,10 +27,12 @@
 			</div>
 		</div>
 	</div>
+	<footer-navigation />
 </template>
 
 <style scoped lang="less">
-	.home {
+	
+	.customize {
 		width: 100%;
 		position: relative;
 		color: #000;
@@ -39,6 +44,7 @@
 			font-size: 8.4rem;
 			text-align: center;
 			line-height: 124%;
+			margin-top: 3.6rem;
 		}
 		> .tip {
 			margin-top: 0.56rem;
@@ -88,7 +94,8 @@
 			width: 79.8rem;
 			height: 107.4rem;
 			border-radius: 2rem;
-			box-shadow: 1.3rem 1.4rem 2rem 0.2rem #0000004d;
+			// box-shadow: 1.3rem 1.4rem 2rem 0.2rem #0000004d;
+			border: 0.2rem solid #D9D9D9;
 			overflow: hidden;
 			> * {
 				position: absolute;
@@ -107,16 +114,15 @@
 				border: 0.24rem solid #000;
 				display: flex;
 				align-items: center;
-				>.icon{
+				> .icon {
 					margin: 0 1.8rem;
 				}
-				>.label{
+				> .label {
 					flex: 1;
 					font-family: satoshiRegular;
 					font-size: 2.97rem;
 					color: #000;
 				}
-
 			}
 			> .icons {
 				bottom: 0.27rem;
diff --git a/src/views/Workshop/customize/index.vue b/src/views/Workshop/customize/index.vue
deleted file mode 100644
index 2d393e5..0000000
--- a/src/views/Workshop/customize/index.vue
+++ /dev/null
@@ -1,83 +0,0 @@
-<script setup lang="ts">
-	import HeaderTitle from '@/components/HeaderTitle.vue'
-	import { computed } from 'vue'
-	import { useRouter } from 'vue-router'
-	const router = useRouter()
-	const currentRouteName = computed(() => router.currentRoute.value.name)
-	import { ref } from 'vue'
-	const onHome = () => {
-		// router.push({ name: 'customizeHome' })
-		router.push({ path: '/signup' })
-	}
-	const onLibrary = () => {
-		router.push({ name: 'customizeLibrary' })
-	}
-	const onContinue = () => {
-		router.push({ name: 'customizeCreation' })
-	}
-</script>
-
-<template>
-	<header-title />
-	<div class="link">
-		<span @click="onHome">Home</span>
-		<span @click="onLibrary">Library</span>
-	</div>
-	<div class="session"><RouterView /></div>
-	<div class="footer">
-		<button v-if="currentRouteName === 'customizeHome'" @click="onContinue">Continue</button>
-	</div>
-</template>
-
-<style scoped lang="less">
-	.header-title {
-		--header-title-color: #fff;
-		--header-title-background: #000;
-	}
-	.link {
-		width: 100%;
-		padding: 2rem 5.4rem 0;
-		> span {
-			font-family: satoshiRegular;
-			font-size: 3rem;
-			vertical-align: middle;
-			text-decoration: underline;
-			text-underline-offset: 0.8rem;
-			margin-right: 4.4rem;
-		}
-	}
-	.session {
-		margin-top: 5.6rem;
-		width: 100%;
-		height: 155rem;
-		overflow: hidden;
-		padding: 0 2.5rem;
-	}
-	.footer {
-		position: fixed;
-		width: 100%;
-		bottom: 0;
-		left: 0;
-		height: 11.2rem;
-		background-color: #000;
-		display: flex;
-		align-items: center;
-		justify-content: flex-end;
-		> button {
-			width: 24.6rem;
-			height: 5.9rem;
-			border-radius: 0.7rem;
-			box-sizing: content-box;
-			border: 0.3rem solid #fff;
-			background: transparent;
-			font-family: satoshiRegular;
-			font-weight: 400;
-			font-size: 4rem;
-			color: #fff;
-			margin-right: 5rem;
-			&:active {
-				opacity: 0.7;
-			}
-		}
-	}
-</style>
diff --git a/src/views/Workshop/end/index.vue b/src/views/Workshop/end.vue
similarity index 53%
rename from src/views/Workshop/end/index.vue
rename to src/views/Workshop/end.vue
index 3cee985..43df86b 100644
--- a/src/views/Workshop/end/index.vue
+++ b/src/views/Workshop/end.vue
@@ -1,9 +1,13 @@
 <script setup lang="ts">
 	import HeaderTitle from '@/components/HeaderTitle.vue'
-	import { ref } from 'vue'
+	import FooterNavigation from '@/components/FooterNavigation.vue'
+	import { ref, onMounted } from 'vue'
 	import { useRouter } from 'vue-router'
 	const router = useRouter()
-
+	const emit = defineEmits(['view-type'])
+	onMounted(() => {
+		emit('view-type', 1)
+	})
 	const onExit = () => {
 		console.log('exit')
 	}
@@ -12,19 +16,14 @@
 <template>
 	<header-title />
 	<div class="end">
-		<img src="@/assets/images/workshop/bg/end_bg.png" class="bg" />
-		<div class="link">
-			<span>Home</span>
-			<span>Library</span>
-		</div>
 		<div class="content">
 			<div class="title">Thank you.</div>
 			<div class="tip">
 				We are starting to learn your preferences, Looking forward to see you again,
 			</div>
 		</div>
-		<button class="exit" @click="onExit">Exit</button>
 	</div>
+	<footer-navigation is-placeholder />
 </template>
 
 <style scoped lang="less">
@@ -34,29 +33,13 @@
 	}
 	.end {
 		width: 100%;
+		flex: 1;
 		position: relative;
 		color: #fff;
-		> * {
-			position: absolute;
-		}
-		> .bg {
-			position: relative;
-			width: 100%;
-			height: auto;
-		}
-		> .link {
-			top: 2rem;
-			left: 5.4rem;
-			> span {
-				font-family: satoshiRegular;
-				font-size: 3rem;
-				vertical-align: middle;
-				text-decoration: underline;
-				text-underline-offset: 0.8rem;
-				margin-right: 4.4rem;
-			}
-		}
+		background: url('@/assets/images/workshop/bg/end_bg.png') no-repeat center center;
+		background-size: cover;
 		> .content {
+			position: absolute;
 			top: 12.9rem;
 			left: 6rem;
 			// width: 100%;
@@ -75,23 +58,5 @@
 				line-height: 132%;
 			}
 		}
-		> .exit {
-			position: fixed;
-			bottom: 2.5rem;
-			right: 4.8rem;
-			box-sizing: content-box;
-			width: 19rem;
-			height: 5.9rem;
-			border-radius: 0.7rem;
-			border: 0.3rem solid #000;
-			background: transparent;
-			font-family: satoshiRegular;
-			font-weight: 500;
-			font-size: 4rem;
-			color: #000;
-			&:active {
-				opacity: 0.7;
-			}
-		}
 	}
 </style>
diff --git a/src/views/Workshop/index.vue b/src/views/Workshop/index.vue
index 5a72c07..cb88168 100644
--- a/src/views/Workshop/index.vue
+++ b/src/views/Workshop/index.vue
@@ -1,28 +1,42 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
-//const props = defineProps({
-//})
-//const emit = defineEmits([
-//])
-let data = reactive({
-})
-onMounted(()=>{
-})
-onUnmounted(()=>{
-})
-defineExpose({})
-const {} = toRefs(data);
+	import { ref, onMounted, onUnmounted, reactive, toRefs, watch } from 'vue'
+	import { useRouter } from 'vue-router'
+	//const props = defineProps({
+	//})
+	//const emit = defineEmits([
+	//])
+	let data = reactive({})
+	onMounted(() => {})
+	onUnmounted(() => {})
+	defineExpose({})
+	const {} = toRefs(data)
+	const workshopContent = ref<HTMLDivElement>()
+	const router = useRouter()
+
+	const viewType = ref(0)
+	watch(
+		() => router.currentRoute.value,
+		() => (viewType.value = 0)
+	)
+	const changeViewType = (v: number) => {
+		viewType.value = v
+	}
 </script>
 <template>
-	<div class="workshop">
-		<router-view />
+	<div class="workshop" :view-type="viewType">
+		<router-view @view-type="changeViewType" />
 	</div>
 </template>
 <style lang="less" scoped>
-	.workshop{
+	.workshop {
 		width: 100%;
 		height: 100%;
 		position: relative;
 		font-family: 'satoshiRegular';
+		&[view-type='1'] {
+			display: flex;
+			flex-direction: column;
+			overflow: hidden;
+		}
 	}
 </style>
\ No newline at end of file
diff --git a/src/views/Workshop/customize/library.vue b/src/views/Workshop/library.vue
similarity index 67%
rename from src/views/Workshop/customize/library.vue
rename to src/views/Workshop/library.vue
index 470cab5..002099e 100644
--- a/src/views/Workshop/customize/library.vue
+++ b/src/views/Workshop/library.vue
@@ -1,16 +1,24 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+	import { ref, onMounted, inject } from 'vue'
+	import HeaderTitle from '@/components/HeaderTitle.vue'
+	import FooterNavigation from '@/components/FooterNavigation.vue'
+	const emit = defineEmits(['view-type'])
 
-const onRetrieveItem = (i: number) => {
-	console.log("检索"+i)
-}
+	onMounted(() => {
+		emit('view-type', 1)
+	})
 
-const deleteItem = (i: number) => {
-	console.log("删除"+i)
-}
+	const onRetrieveItem = (i: number) => {
+		console.log('检索' + i)
+	}
+
+	const deleteItem = (i: number) => {
+		console.log('删除' + i)
+	}
 </script>
 
 <template>
+	<header-title style-type="2" />
 	<div class="library">
 		<div class="title">Library</div>
 		<div class="list">
@@ -19,6 +27,7 @@ const deleteItem = (i: number) => {
 					<img src="@/assets/images/workshop/posture/posture_1.png" />
 				</div>
 				<div class="content">
+					<span class="userID">User ID: 1234567890</span>
 					<span class="datetime">7/22/2025 18:20</span>
 					<span class="lastopened">Last opened 18:20</span>
 					<button @click="onRetrieveItem(i)">Retrieve</button>
@@ -27,24 +36,43 @@ const deleteItem = (i: number) => {
 			</div>
 		</div>
 	</div>
+	<footer-navigation is-placeholder />
 </template>
 
 <style scoped lang="less">
+	.workshop {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
 	.library {
 		width: 100%;
-		height: 100%;
-		background-color: #e3e3e3;
+		flex: 1;
+		overflow: hidden;
+		background-color: #fff;
 		border-radius: 1rem;
 		position: relative;
 		color: #000;
 		display: flex;
 		flex-direction: column;
+		&::before {
+			content: '';
+			position: absolute;
+			width: 92rem;
+			height: 92rem;
+			z-index: 0;
+			top: -40rem;
+			right: -40rem;
+			background: linear-gradient(88.42deg, #ffffff 32.58%, #d9d9d9 94.9%);
+			transform: rotate(-45deg);
+
+		}
+
 		> .title {
 			font-family: satoshiRegular;
 			font-size: 9rem;
 			text-align: left;
 			line-height: 124%;
-			font-weight: 500;
 			margin: 5rem;
 		}
 		> .list {
@@ -78,20 +106,28 @@ const deleteItem = (i: number) => {
 					margin-left: 5.6rem;
 					display: flex;
 					flex-direction: column;
-					height: 80%;
+					height: 90%;
+					> .userID {
+						font-family: satoshiRegular;
+						font-weight: 500;
+						font-size: 3.8rem;
+						line-height: 89%;
+						color: #000;
+					}
 					> .datetime {
+						margin-top: 1.8rem;
 						font-family: satoshiRegular;
 						font-weight: 400;
-						font-size: 3.29rem;
+						font-size: 3.2rem;
 						line-height: 89%;
 						color: #000;
 					}
 					> .lastopened {
-						margin-top: 2.23rem;
+						margin-top: 1rem;
 						font-family: satoshiRegular;
 						font-weight: 400;
 						font-style: Regular;
-						font-size: 2.63rem;
+						font-size: 2.6rem;
 						line-height: 89%;
 						color: #6f6f6f;
 					}
@@ -115,8 +151,8 @@ const deleteItem = (i: number) => {
 				}
 				> .delete {
 					position: absolute;
-					top: 5.57rem;
-					right: 2.91rem;
+					top: 2.5rem;
+					right: 2rem;
 					width: 5.5rem;
 					height: 5.5rem;
 					border: 0.188rem solid #000;
diff --git a/src/views/Workshop/uploadFace/index.vue b/src/views/Workshop/uploadFace.vue
similarity index 77%
rename from src/views/Workshop/uploadFace/index.vue
rename to src/views/Workshop/uploadFace.vue
index bd16636..3b17f89 100644
--- a/src/views/Workshop/uploadFace/index.vue
+++ b/src/views/Workshop/uploadFace.vue
@@ -1,7 +1,12 @@
 <script setup lang="ts">
 	import HeaderTitle from '@/components/HeaderTitle.vue'
-	import { ref } from 'vue'
+	import FooterNavigation from '@/components/FooterNavigation.vue'
+	import { ref, onMounted } from 'vue'
 	import { useRouter } from 'vue-router'
+	const emit = defineEmits(['view-type'])
+	onMounted(() => {
+		emit('view-type', 1)
+	})
 	const router = useRouter()
 	const faceUrl = ref('')
 	// 上传照片
@@ -24,12 +29,12 @@
 	// 完成上传
 	const handleFinish = () => {
 		console.log('完成上传')
-		router.push({ name: 'customizeHome' })
+		router.push({ name: 'customize' })
 	}
 	// 生成照片
 	const handleGenerate = () => {
 		console.log('生成照片')
-		router.push({ name: 'customizeHome' })
+		router.push({ name: 'customize' })
 	}
 </script>
 
@@ -46,18 +51,14 @@
 			</p>
 		</div>
 		<div class="btns">
-			<button @click="handleUploadFace">Upload Face</button>
-			<button @click="handleFinish">Finish</button>
+			<button @click="handleUploadFace"><span>Upload Face</span></button>
+			<button @click="handleFinish"><span>Finish</span></button>
 		</div>
 	</div>
 
 	<!-- 展示照片 -->
 	<div class="session session_2" v-show="faceUrl">
 		<img src="@/assets/images/workshop/bg/picture_bg.png" class="bg" />
-		<div class="link">
-			<span>Home</span>
-			<span>Library</span>
-		</div>
 		<div class="content">
 			<div class="title">
 				Upload your Face<br />
@@ -73,15 +74,14 @@
 			</div>
 		</div>
 	</div>
+	<footer-navigation is-placeholder />
 </template>
 
 <style scoped lang="less">
-	.header-title {
-		--header-title-color: #000;
-		--header-title-background: #fff;
-	}
 	.session {
 		width: 100%;
+		flex: 1;
+		overflow: hidden;
 		position: relative;
 		color: #fff;
 		> * {
@@ -103,12 +103,24 @@
 				height: 8.3rem;
 				border-radius: 0.7rem;
 				border: 0.4rem solid #fff;
-				background: transparent;
-				font-family: satoshiRegular;
+				font-family: satoshiMedium;
 				font-weight: 500;
 				font-size: 5.5rem;
 				margin: 0 1.8rem;
 				color: #fff;
+				background-color: transparent;
+				position: relative;
+				&::before {
+					content: '';
+					position: absolute;
+					top: 0;
+					left: 0;
+					width: 100%;
+					height: 100%;
+					// opacity: 0.1;
+					backdrop-filter: blur(9.5rem);
+					background: url('@/assets/images/customer_form_bg.png');
+				}
 				&:active {
 					opacity: 0.7;
 				}
@@ -120,35 +132,23 @@
 			top: 0;
 			left: 0;
 			padding: 9.9rem 0 0 7.2rem;
-			font-family: 'robotoBold';
 			> .title {
-				font-weight: 700;
-				font-size: 8.6rem;
+				font-family: 'satoshiBold';
+				font-size: 8.63rem;
 			}
 			> .desc {
-				font-weight: 500;
+				font-family: 'satoshiMedium';
 				font-size: 4rem;
-				margin-top: 3rem;
+				margin-top: 2rem;
+				line-height: 132%;
 			}
 		}
 		> .btns {
-			bottom: 23.3rem;
+			bottom: 19.7rem;
 		}
 	}
 
 	.session.session_2 {
-		> .link {
-			top: 2rem;
-			left: 5.4rem;
-			> span {
-				font-family: satoshiRegular;
-				font-size: 3rem;
-				vertical-align: middle;
-				text-decoration: underline;
-				text-underline-offset: 0.8rem;
-				margin-right: 4.4rem;
-			}
-		}
 		> .content {
 			top: 18.5rem;
 			left: 0;