diff --git a/src/assets/images/workshop/posture/posture_1.png b/src/assets/images/workshop/posture/posture_1.png
new file mode 100644
index 0000000..dc0cf81
Binary files /dev/null and b/src/assets/images/workshop/posture/posture_1.png differ
diff --git a/src/assets/images/workshop/posture/posture_2.png b/src/assets/images/workshop/posture/posture_2.png
new file mode 100644
index 0000000..f94e3c4
Binary files /dev/null and b/src/assets/images/workshop/posture/posture_2.png differ
diff --git a/src/assets/images/workshop/posture/posture_3.png b/src/assets/images/workshop/posture/posture_3.png
new file mode 100644
index 0000000..70cbe54
Binary files /dev/null and b/src/assets/images/workshop/posture/posture_3.png differ
diff --git a/src/assets/images/workshop/posture/posture_4.png b/src/assets/images/workshop/posture/posture_4.png
new file mode 100644
index 0000000..acfd7d9
Binary files /dev/null and b/src/assets/images/workshop/posture/posture_4.png differ
diff --git a/src/router/index.ts b/src/router/index.ts
index 89d96ed..4f2bb5e 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,52 +1,74 @@
 import { createRouter, createWebHistory } from 'vue-router'
 const router = createRouter({
-  history: createWebHistory('/'),
-//   history: createWebHistory(import.meta.env.VITE_APP_URL),
-  routes: [
-    {
-		path: '/',
-		redirect: "/workshop",
-	},
-	{
-		path: '/workshop',
-		name: 'Workshop',
-		component: () => import('../views/Workshop/index.vue'),
-		children: [
-			// {
-			// 	path: '',
-			// 	name: 'activitiesWorkshop',
-			// 	redirect: "/activities/workshop",	
-			// },
+	history: createWebHistory('/'),
+	//   history: createWebHistory(import.meta.env.VITE_APP_URL),
+	routes: [
+		{
+			path: '/',
+			redirect: "/workshop",
+		},
+		{
+			path: '/workshop',
+			name: 'Workshop',
+			component: () => import('../views/Workshop/index.vue'),
+			children: [
+				// {
+				// 	path: '',
+				// 	name: 'activitiesWorkshop',
+				// 	redirect: "/activities/workshop",	
+				// },
 
-			{
-				path: '/workshop/selectStyle',
-				name: 'SelectStyle',
-				component: () => import('../views/Workshop/selectStyle.vue'),
-			},
-			{
-				path: '/workshop/selectModel',
-				name: 'SelectModel',
-				component: () => import('../views/Workshop/selectModel.vue'),
-			},
-			{
-				path: '/workshop/selectModelContinue',
-				name: 'SelectModelContinue',
-				component: () => import('../views/Workshop/selectModelContinue.vue'),
-			},
-			
-			{
-				path: '/workshop/uploadFace',
-				name: 'uploadFace',
-				component: () => import('../views/Workshop/uploadFace/index.vue'),
-			},
-			{
-				path: '/workshop/customize',
-				name: 'customize',
-				component: () => import('../views/Workshop/customize/index.vue'),
-			},
-		]
-	},
-  ]
+				{
+					path: '/workshop/selectStyle',
+					name: 'SelectStyle',
+					component: () => import('../views/Workshop/selectStyle.vue'),
+				},
+				{
+					path: '/workshop/selectModel',
+					name: 'SelectModel',
+					component: () => import('../views/Workshop/selectModel.vue'),
+				},
+				{
+					path: '/workshop/selectModelContinue',
+					name: 'SelectModelContinue',
+					component: () => import('../views/Workshop/selectModelContinue.vue'),
+				},
+
+				{// 上传照片
+					path: '/workshop/uploadFace',
+					name: 'uploadFace',
+					component: () => import('../views/Workshop/uploadFace/index.vue'),
+				},
+				{// 自定义创作
+					path: '/workshop/customize',
+					name: 'customize',
+					component: () => import('../views/Workshop/customize/index.vue'),
+					children: [
+						{
+							path: '/workshop/customize/home',
+							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'),
+						},
+					],
+				},
+				{// 完成创建
+					path: '/workshop/end',
+					name: 'end',
+					component: () => import('../views/Workshop/end/index.vue'),
+				},
+			]
+		},
+	]
 })
 
 export default router
diff --git a/src/views/Workshop/customize/creation.vue b/src/views/Workshop/customize/creation.vue
new file mode 100644
index 0000000..6bdd2d0
--- /dev/null
+++ b/src/views/Workshop/customize/creation.vue
@@ -0,0 +1,94 @@
+<script setup lang="ts">
+	import { ref } from 'vue'
+	import { useRouter } from 'vue-router'
+	const router = useRouter()
+	const onSave = () => {
+		// console.log('保存')
+		router.push({ name: 'end' })
+	}
+
+	const onContinue = () => {
+		console.log('继续创建')
+	}
+</script>
+
+<template>
+	<div class="creation">
+		<div class="title">Your Creation</div>
+		<div class="list">
+			<div class="item" v-for="i in 10" :key="i">
+				<img src="@/assets/images/workshop/posture/posture_1.png" />
+			</div>
+		</div>
+	</div>
+	<div class="creation_btns">
+		<button @click="onSave">Save</button>
+		<button @click="onContinue">Continue Creating</button>
+	</div>
+</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%;
+		background-color: #e3e3e3;
+		border-radius: 1rem;
+		position: relative;
+		color: #000;
+		display: flex;
+		flex-direction: column;
+		> .title {
+			font-family: satoshiRegular;
+			font-size: 9rem;
+			text-align: center;
+			line-height: 124%;
+			font-weight: 500;
+			margin: 5rem;
+		}
+		> .list {
+			flex: 1;
+			overflow-y: auto;
+			padding: 0 6rem;
+			margin: 0 3.8rem;
+			display: flex;
+			flex-wrap: wrap;
+			justify-content: space-between;
+			// justify-content: space-around;
+			> .item {
+				width: 47%;
+				height: 52.9rem;
+				overflow: hidden;
+				border-radius: 2rem;
+				background-color: #fff;
+				margin-bottom: 4rem;
+				> img {
+					width: 100%;
+					height: 100%;
+					object-fit: contain;
+				}
+			}
+		}
+	}
+</style>
diff --git a/src/views/Workshop/customize/home.vue b/src/views/Workshop/customize/home.vue
index 14983fb..25dcd1b 100644
--- a/src/views/Workshop/customize/home.vue
+++ b/src/views/Workshop/customize/home.vue
@@ -1,58 +1,23 @@
 <script setup lang="ts">
-	import HeaderTitle from '@/components/HeaderTitle.vue'
-	import { ref } from 'vue'
-	const faceUrl = ref('')
 </script>
 
 <template>
-	<header-title />
-	<div class="session">
-		<div class="link">
-			<span>Home</span>
-			<span>Library</span>
-		</div>
+	<div class="home">
 		<div class="title">Customize your Look!</div>
 		<p class="tip">Refine your Look</p>
-		<!-- 照片 -->
-		<div class="picture">
-			<img :src="faceUrl" />
-		</div>
-		<div class="btns">
-			<button @click="handleUploadFace">Re-try</button>
-			<button @click="handleGenerate">Generate</button>
-		</div>
-	</div>
-	<div class="footer">
-		<button>Continue</button>
+		
 	</div>
 </template>
 
 <style scoped lang="less">
-	.header-title {
-		--header-title-color: #fff;
-		--header-title-background: #000;
-	}
-	.session {
+	.home {
 		width: 100%;
 		position: relative;
 		color: #000;
 		display: flex;
 		flex-direction: column;
 		align-items: center;
-		> .link {
-			padding: 2rem 5.4rem 0;
-			width: 100%;
-			> span {
-				font-family: satoshiRegular;
-				font-size: 3rem;
-				vertical-align: middle;
-				text-decoration: underline;
-				text-underline-offset: 0.8rem;
-				margin-right: 4.4rem;
-			}
-		}
 		> .title {
-			margin-top: 5.4rem;
 			font-family: satoshiBold;
 			font-size: 8.4rem;
 			text-align: center;
@@ -64,54 +29,5 @@
 			font-size: 3.74rem;
 			line-height: 124%;
 		}
-		> .picture {
-			margin: 7.8rem 0;
-			width: 65.3rem;
-			height: 86.5rem;
-			border-radius: 1rem;
-			backdrop-filter: blur(5.27rem);
-			box-shadow: 1.9rem 2.3rem 1.66rem 0.23rem -0.3rem 0.23rem #36180c40;
-			border: 0.439rem solid #fff;
-			// border-image: linear-gradient(90deg,#BF926E94, #ffffff) 1;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			> img {
-				width: 58.9rem;
-				height: 79.2rem;
-				border-radius: 1rem;
-				border: 0.2rem solid #d9d9d9;
-				object-fit: contain;
-			}
-		}
-		> .btns {
-		}
-	}
-	.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/customize/index.vue b/src/views/Workshop/customize/index.vue
index 12e9e09..7969760 100644
--- a/src/views/Workshop/customize/index.vue
+++ b/src/views/Workshop/customize/index.vue
@@ -1,20 +1,30 @@
 <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 faceUrl = ref('')
+	const onHome = () => {
+		router.push({ name: 'customizeHome' })
+	}
+	const onLibrary = () => {
+		router.push({ name: 'customizeLibrary' })
+	}
+	const onContinue = () => {
+		router.push({ name: 'customizeCreation' })
+	}
 </script>
 
 <template>
 	<header-title />
-	<div class="session">
-		<div class="link">
-			<span>Home</span>
-			<span>Library</span>
-		</div>
-		
+	<div class="link">
+		<span @click="onHome">Home</span>
+		<span @click="onLibrary">Library</span>
 	</div>
+	<div class="session"><RouterView /></div>
 	<div class="footer">
-		<button>Continue</button>
+		<button v-if="currentRouteName === 'customizeHome'" @click="onContinue">Continue</button>
 	</div>
 </template>
 
@@ -23,61 +33,25 @@
 		--header-title-color: #fff;
 		--header-title-background: #000;
 	}
-	.session {
+	.link {
 		width: 100%;
-		position: relative;
-		color: #000;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		> .link {
-			padding: 2rem 5.4rem 0;
-			width: 100%;
-			> span {
-				font-family: satoshiRegular;
-				font-size: 3rem;
-				vertical-align: middle;
-				text-decoration: underline;
-				text-underline-offset: 0.8rem;
-				margin-right: 4.4rem;
-			}
-		}
-		> .title {
-			margin-top: 5.4rem;
-			font-family: satoshiBold;
-			font-size: 8.4rem;
-			text-align: center;
-			line-height: 124%;
-		}
-		> .tip {
-			margin-top: 0.56rem;
+		padding: 2rem 5.4rem 0;
+		> span {
 			font-family: satoshiRegular;
-			font-size: 3.74rem;
-			line-height: 124%;
-		}
-		> .picture {
-			margin: 7.8rem 0;
-			width: 65.3rem;
-			height: 86.5rem;
-			border-radius: 1rem;
-			backdrop-filter: blur(5.27rem);
-			box-shadow: 1.9rem 2.3rem 1.66rem 0.23rem -0.3rem 0.23rem #36180c40;
-			border: 0.439rem solid #fff;
-			// border-image: linear-gradient(90deg,#BF926E94, #ffffff) 1;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			> img {
-				width: 58.9rem;
-				height: 79.2rem;
-				border-radius: 1rem;
-				border: 0.2rem solid #d9d9d9;
-				object-fit: contain;
-			}
-		}
-		> .btns {
+			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%;
diff --git a/src/views/Workshop/customize/library.vue b/src/views/Workshop/customize/library.vue
new file mode 100644
index 0000000..f43280b
--- /dev/null
+++ b/src/views/Workshop/customize/library.vue
@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const onRetrieveItem = (i: number) => {
+	console.log("检索"+i)
+}
+
+const deleteItem = (i: number) => {
+	console.log("删除"+i)
+}
+</script>
+
+<template>
+	<div class="library">
+		<div class="title">Library</div>
+		<div class="list">
+			<div class="item" v-for="i in 10" :key="i">
+				<div class="image">
+					<img src="@/assets/images/workshop/posture/posture_1.png" />
+				</div>
+				<div class="content">
+					<span class="datetime">7/22/2025 18:20</span>
+					<span class="lastopened">Last opened 18:20</span>
+					<button @click="onRetrieveItem(i)">Retrieve</button>
+				</div>
+				<div class="delete" @click="deleteItem(i)"></div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style scoped lang="less">
+	.library {
+		width: 100%;
+		height: 100%;
+		background-color: #e3e3e3;
+		border-radius: 1rem;
+		position: relative;
+		color: #000;
+		display: flex;
+		flex-direction: column;
+		> .title {
+			font-family: satoshiRegular;
+			font-size: 9rem;
+			text-align: left;
+			line-height: 124%;
+			font-weight: 500;
+			margin: 5rem;
+		}
+		> .list {
+			flex: 1;
+			overflow-y: auto;
+			padding: 0 3.8rem;
+			margin: 0 3rem;
+			> .item {
+				position: relative;
+				padding: 2.8rem;
+				width: 100%;
+				height: 34.4rem;
+				border-radius: 1.88rem;
+				margin-bottom: 7.66rem;
+				background-color: #f3f3f3;
+				display: flex;
+				align-items: center;
+				> .image {
+					width: 21.4rem;
+					height: 100%;
+					overflow: hidden;
+					border-radius: 2rem;
+					background-color: #fff;
+					> img {
+						width: 100%;
+						height: 100%;
+						object-fit: contain;
+					}
+				}
+				> .content {
+					margin-left: 5.6rem;
+					display: flex;
+					flex-direction: column;
+					height: 80%;
+					> .datetime {
+						font-family: satoshiRegular;
+						font-weight: 400;
+						font-size: 3.29rem;
+						line-height: 89%;
+						color: #000;
+					}
+					> .lastopened {
+						margin-top: 2.23rem;
+						font-family: satoshiRegular;
+						font-weight: 400;
+						font-style: Regular;
+						font-size: 2.63rem;
+						line-height: 89%;
+						color: #6f6f6f;
+					}
+					> button {
+						margin-top: auto;
+						width: 12.3rem;
+						height: 3.8rem;
+						border-radius: 0.5rem;
+						box-sizing: content-box;
+						border: 0.193rem solid #000;
+						background: transparent;
+						font-family: satoshiRegular;
+						font-weight: 400;
+						font-size: 2.576rem;
+						color: #000;
+						margin-right: 5rem;
+						&:active {
+							opacity: 0.7;
+						}
+					}
+				}
+				> .delete {
+					position: absolute;
+					top: 5.57rem;
+					right: 2.91rem;
+					width: 5.5rem;
+					height: 5.5rem;
+					border: 0.188rem solid #000;
+					border-radius: 1.88rem;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					&:active {
+						opacity: 0.7;
+					}
+				}
+			}
+		}
+	}
+</style>
diff --git a/src/views/Workshop/end/index.vue b/src/views/Workshop/end/index.vue
new file mode 100644
index 0000000..3cee985
--- /dev/null
+++ b/src/views/Workshop/end/index.vue
@@ -0,0 +1,97 @@
+<script setup lang="ts">
+	import HeaderTitle from '@/components/HeaderTitle.vue'
+	import { ref } from 'vue'
+	import { useRouter } from 'vue-router'
+	const router = useRouter()
+
+	const onExit = () => {
+		console.log('exit')
+	}
+</script>
+
+<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>
+</template>
+
+<style scoped lang="less">
+	.header-title {
+		--header-title-color: #000;
+		--header-title-background: #fff;
+	}
+	.end {
+		width: 100%;
+		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;
+			}
+		}
+		> .content {
+			top: 12.9rem;
+			left: 6rem;
+			// width: 100%;
+			display: flex;
+			flex-direction: column;
+			> .title {
+				font-family: satoshiBold;
+				font-size: 14.7rem;
+				line-height: 124%;
+			}
+			> .tip {
+				margin-top: 2.5rem;
+				width: 58.2rem;
+				font-family: satoshiRegular;
+				font-size: 4.1rem;
+				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/uploadFace/index.vue b/src/views/Workshop/uploadFace/index.vue
index 78881aa..bd16636 100644
--- a/src/views/Workshop/uploadFace/index.vue
+++ b/src/views/Workshop/uploadFace/index.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 	import HeaderTitle from '@/components/HeaderTitle.vue'
 	import { ref } from 'vue'
-	import {useRouter} from 'vue-router'
-		const router = useRouter()
+	import { useRouter } from 'vue-router'
+	const router = useRouter()
 	const faceUrl = ref('')
 	// 上传照片
 	const handleUploadFace = () => {
@@ -24,12 +24,12 @@
 	// 完成上传
 	const handleFinish = () => {
 		console.log('完成上传')
-		router.push({name:'customize'})
+		router.push({ name: 'customizeHome' })
 	}
 	// 生成照片
 	const handleGenerate = () => {
 		console.log('生成照片')
-		router.push({name:'customize'})
+		router.push({ name: 'customizeHome' })
 	}
 </script>