diff --git a/src/assets/icons/Return.svg b/src/assets/icons/Return.svg
new file mode 100644
index 0000000..7886d7a
--- /dev/null
+++ b/src/assets/icons/Return.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="34" viewBox="0 0 22 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22 31.2213L18.728 34L0.906497 18.856C0.619223 18.6133 0.391239 18.3248 0.235665 18.0069C0.0800915 17.6891 -2.93095e-08 17.3482 -2.87279e-08 17.0039C-2.81463e-08 16.6597 0.0800915 16.3188 0.235665 16.001C0.391239 15.6831 0.619223 15.3946 0.906497 15.1519L18.728 0L21.9969 2.77872L5.27014 17L22 31.2213Z" fill="black"/>
+</svg>
diff --git a/src/assets/images/workshop/bg/end_bg.png b/src/assets/images/workshop/bg/end_bg.png
new file mode 100644
index 0000000..f5f9fba
Binary files /dev/null and b/src/assets/images/workshop/bg/end_bg.png differ
diff --git a/src/assets/images/workshop/bg/picture_bg.png b/src/assets/images/workshop/bg/picture_bg.png
new file mode 100644
index 0000000..bdf81bb
Binary files /dev/null and b/src/assets/images/workshop/bg/picture_bg.png differ
diff --git a/src/assets/images/workshop/bg/upload_bg.png b/src/assets/images/workshop/bg/upload_bg.png
new file mode 100644
index 0000000..2271943
Binary files /dev/null and b/src/assets/images/workshop/bg/upload_bg.png differ
diff --git a/src/components/HeaderTitle.vue b/src/components/HeaderTitle.vue
new file mode 100644
index 0000000..51644be
--- /dev/null
+++ b/src/components/HeaderTitle.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+	import BackIcon from '@/assets/icons/back.svg'
+	import { useRouter } from 'vue-router'
+	const router = useRouter()
+
+	defineProps({
+		title: { type: String, default: 'STYLING ANGEL' }
+	})
+
+	defineEmits(['clickReturn'])
+
+	const handleClickReturn = () => {
+		router.back()
+		// emit('clickReturn')
+	}
+</script>
+
+<template>
+	<div class="header-title">
+		<div class="return" @click="handleClickReturn"><SvgIcon name="Return" size="34" /></div>
+		<span class="title">{{ title }}</span>
+	</div>
+</template>
+
+<style scoped lang="less">
+	.header-title {
+		width: 100%;
+		height: var(--header-title-height, 9.9rem);
+		background-color: var(--header-title-background, #000000);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		position: relative;
+		> .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';
+		}
+	}
+</style>
diff --git a/src/components/SvgIcon/index.vue b/src/components/SvgIcon/index.vue
index 791e66d..e00e238 100644
--- a/src/components/SvgIcon/index.vue
+++ b/src/components/SvgIcon/index.vue
@@ -38,6 +38,7 @@ const svgClass = computed(() => {
   width: 1em;
   height: 1em;
   fill: currentColor;
+	color: var(--svg-icon-color);
 }
 .c-svg {
   width: 100%;
diff --git a/src/router/index.ts b/src/router/index.ts
index f4c5bc0..114b133 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -23,8 +23,16 @@ const router = createRouter({
 				name: 'SelectStyle',
 				component: () => import('../views/Workshop/selectStyle.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'),
+			},
 		]
 	},
   ]
diff --git a/src/utils/flexible.js b/src/utils/flexible.js
index 4594585..0df0623 100644
--- a/src/utils/flexible.js
+++ b/src/utils/flexible.js
@@ -19,7 +19,7 @@ let flexible = (designWidth, maxWidth,minWidth) =>{
 		// }else{
 		// 	designWidth = 375
 		// }
-        var rem = Math.round(width * 10 / designWidth);
+        var rem = (width * 10 / designWidth).toFixed(2);
 		docEl.style.fontSize = rem+'px'
         remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
     }
diff --git a/src/views/Workshop/customize/index.vue b/src/views/Workshop/customize/index.vue
new file mode 100644
index 0000000..7961a45
--- /dev/null
+++ b/src/views/Workshop/customize/index.vue
@@ -0,0 +1,191 @@
+<script setup lang="ts">
+	import HeaderTitle from '@/components/HeaderTitle.vue'
+	import { ref } from 'vue'
+	const faceUrl = ref('')
+	// 上传照片
+	const handleUploadFace = () => {
+		const input = document.createElement('input')
+		input.type = 'file'
+		input.accept = 'image/*'
+		input.capture = 'camera'
+		input.click()
+		input.onchange = (e: any) => {
+			const file = e.target.files[0]
+			if (!file) return
+			const reader = new FileReader()
+			reader.readAsDataURL(file)
+			reader.onload = () => {
+				faceUrl.value = reader.result as string
+			}
+		}
+	}
+	// 完成上传
+	const handleFinish = () => {
+		console.log('完成上传')
+	}
+	// 生成照片
+	const handleGenerate = () => {
+		console.log('生成照片')
+	}
+</script>
+
+<template>
+	<header-title />
+	<!-- 上传照片 -->
+	<div class="session session_1" v-show="!faceUrl">
+		<img src="@/assets/images/workshop/bg/upload_bg.png" class="bg" />
+		<div class="texts">
+			<p class="title">Keep Styling with AI?</p>
+			<p class="desc">
+				Would you like to keep playing with<br />
+				our personalized AI tools?
+			</p>
+		</div>
+		<div class="btns">
+			<button @click="handleUploadFace">Upload Face</button>
+			<button @click="handleFinish">Finish</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 />
+				to Try-on
+			</div>
+			<!-- 照片 -->
+			<div class="picture">
+				<img :src="faceUrl" />
+			</div>
+			<div class="btns">
+				<button @click="handleUploadFace">Re-try</button>
+				<button @click="handleGenerate">Generate</button>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style scoped lang="less">
+	.header-title {
+		--header-title-color: #fff;
+		--header-title-background: #000;
+	}
+	.session {
+		width: 100%;
+		position: relative;
+		color: #fff;
+		> * {
+			position: absolute;
+		}
+		> .bg {
+			position: relative;
+			width: 100%;
+			height: auto;
+		}
+		.btns {
+			width: 100%;
+			display: flex;
+			justify-content: center;
+
+			> button {
+				box-sizing: content-box;
+				width: 40rem;
+				height: 8.3rem;
+				border-radius: 0.7rem;
+				border: 0.4rem solid #fff;
+				background: transparent;
+				font-family: satoshiRegular;
+				font-weight: 500;
+				font-size: 5.5rem;
+				margin: 0 1.8rem;
+				color: #fff;
+				&:active {
+					opacity: 0.7;
+				}
+			}
+		}
+	}
+	.session.session_1 {
+		> .texts {
+			top: 0;
+			left: 0;
+			padding: 9.9rem 0 0 7.2rem;
+			font-family: 'robotoBold';
+			> .title {
+				font-weight: 700;
+				font-size: 8.6rem;
+			}
+			> .desc {
+				font-weight: 500;
+				font-size: 4rem;
+				margin-top: 3rem;
+			}
+		}
+		> .btns {
+			bottom: 23.3rem;
+		}
+	}
+
+	.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;
+			width: 100%;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			> .title {
+				font-family: satoshiBold;
+				font-size: 11rem;
+				text-align: center;
+				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 {
+				> button {
+					width: 34.5rem;
+					height: 8.6rem;
+					border-radius: 4.3rem;
+					margin: 0 5rem;
+				}
+			}
+		}
+	}
+</style>
diff --git a/src/views/Workshop/uploadFace/index.vue b/src/views/Workshop/uploadFace/index.vue
new file mode 100644
index 0000000..78881aa
--- /dev/null
+++ b/src/views/Workshop/uploadFace/index.vue
@@ -0,0 +1,195 @@
+<script setup lang="ts">
+	import HeaderTitle from '@/components/HeaderTitle.vue'
+	import { ref } from 'vue'
+	import {useRouter} from 'vue-router'
+		const router = useRouter()
+	const faceUrl = ref('')
+	// 上传照片
+	const handleUploadFace = () => {
+		const input = document.createElement('input')
+		input.type = 'file'
+		input.accept = 'image/*'
+		input.capture = 'camera'
+		input.click()
+		input.onchange = (e: any) => {
+			const file = e.target.files[0]
+			if (!file) return
+			const reader = new FileReader()
+			reader.readAsDataURL(file)
+			reader.onload = () => {
+				faceUrl.value = reader.result as string
+			}
+		}
+	}
+	// 完成上传
+	const handleFinish = () => {
+		console.log('完成上传')
+		router.push({name:'customize'})
+	}
+	// 生成照片
+	const handleGenerate = () => {
+		console.log('生成照片')
+		router.push({name:'customize'})
+	}
+</script>
+
+<template>
+	<header-title />
+	<!-- 上传照片 -->
+	<div class="session session_1" v-show="!faceUrl">
+		<img src="@/assets/images/workshop/bg/upload_bg.png" class="bg" />
+		<div class="texts">
+			<p class="title">Keep Styling with AI?</p>
+			<p class="desc">
+				Would you like to keep playing with<br />
+				our personalized AI tools?
+			</p>
+		</div>
+		<div class="btns">
+			<button @click="handleUploadFace">Upload Face</button>
+			<button @click="handleFinish">Finish</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 />
+				to Try-on
+			</div>
+			<!-- 照片 -->
+			<div class="picture">
+				<img :src="faceUrl" />
+			</div>
+			<div class="btns">
+				<button @click="handleUploadFace">Re-try</button>
+				<button @click="handleGenerate">Generate</button>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style scoped lang="less">
+	.header-title {
+		--header-title-color: #000;
+		--header-title-background: #fff;
+	}
+	.session {
+		width: 100%;
+		position: relative;
+		color: #fff;
+		> * {
+			position: absolute;
+		}
+		> .bg {
+			position: relative;
+			width: 100%;
+			height: auto;
+		}
+		.btns {
+			width: 100%;
+			display: flex;
+			justify-content: center;
+
+			> button {
+				box-sizing: content-box;
+				width: 40rem;
+				height: 8.3rem;
+				border-radius: 0.7rem;
+				border: 0.4rem solid #fff;
+				background: transparent;
+				font-family: satoshiRegular;
+				font-weight: 500;
+				font-size: 5.5rem;
+				margin: 0 1.8rem;
+				color: #fff;
+				&:active {
+					opacity: 0.7;
+				}
+			}
+		}
+	}
+	.session.session_1 {
+		> .texts {
+			top: 0;
+			left: 0;
+			padding: 9.9rem 0 0 7.2rem;
+			font-family: 'robotoBold';
+			> .title {
+				font-weight: 700;
+				font-size: 8.6rem;
+			}
+			> .desc {
+				font-weight: 500;
+				font-size: 4rem;
+				margin-top: 3rem;
+			}
+		}
+		> .btns {
+			bottom: 23.3rem;
+		}
+	}
+
+	.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;
+			width: 100%;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			> .title {
+				font-family: satoshiBold;
+				font-size: 11rem;
+				text-align: center;
+				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 {
+				> button {
+					width: 34.5rem;
+					height: 8.6rem;
+					border-radius: 4.3rem;
+					margin: 0 5rem;
+				}
+			}
+		}
+	}
+</style>