diff --git a/src/assets/images/workshop/selectStyle/selectStyle1-1.png b/src/assets/images/workshop/selectStyle/selectStyle1-1.png
new file mode 100644
index 0000000..1e7d9db
Binary files /dev/null and b/src/assets/images/workshop/selectStyle/selectStyle1-1.png differ
diff --git a/src/assets/images/workshop/selectStyle/selectStyle1-2.png b/src/assets/images/workshop/selectStyle/selectStyle1-2.png
new file mode 100644
index 0000000..f05b89c
Binary files /dev/null and b/src/assets/images/workshop/selectStyle/selectStyle1-2.png differ
diff --git a/src/assets/images/workshop/selectStyle/selectStyle1-3.png b/src/assets/images/workshop/selectStyle/selectStyle1-3.png
new file mode 100644
index 0000000..ed3832f
Binary files /dev/null and b/src/assets/images/workshop/selectStyle/selectStyle1-3.png differ
diff --git a/src/assets/images/workshop/selectStyle/selectStyle1-4.png b/src/assets/images/workshop/selectStyle/selectStyle1-4.png
new file mode 100644
index 0000000..2c87bae
Binary files /dev/null and b/src/assets/images/workshop/selectStyle/selectStyle1-4.png differ
diff --git a/src/components/selectStyle/selectItem.vue b/src/components/selectStyle/selectItem.vue
index 1935e3e..b052897 100644
--- a/src/components/selectStyle/selectItem.vue
+++ b/src/components/selectStyle/selectItem.vue
@@ -5,9 +5,14 @@ const props = defineProps({
 		type: Array,
 		default: () => [],
 	} as any,
+	select: {
+		type: Array,
+		default: () => {},
+	} as any,
 })
-//const emit = defineEmits([
-//])
+const emit = defineEmits([
+	'update:select'
+])
 let data = reactive({
 })
 
@@ -19,12 +24,8 @@ const setLike = (item,str)=>{
 	}
 }
 
-const addLibrary = (item,str)=>{
-	if(str === 'add'){
-		item.isAdd = true
-	}else{
-		item.isAdd = false
-	}
+const setSelectList = (item)=>{
+	emit('update:select', {...item})
 }
 
 const deleteStyle = (index)=>{
@@ -55,23 +56,27 @@ const {} = toRefs(data);
 <template>
 	<div class="list">
 		<div class="item" v-for="(item,index) in selectList" :key="item.id">
-			<div class="imgBox">
+			<div class="title">look {{ index + 1 }}</div>
+			<div class="imgBox" @click="setSelectList(item)">
 				<img v-for="(img,index) in item?.imgList" :key="index" :src="img" alt="">
+				<div class="icon" v-if="item.id == select?.id">
+					<SvgIcon  name="modelSelected" size="60" />
+				</div>
 			</div>
 			<div class="btn">
 				<div>
-					<SvgIcon v-if="!item.isLike" @click.stop="setLike(item,'like')" name="noLike" size="40" />
-					<SvgIcon v-else name="like" @click.stop="setLike(item,'noLike')" color="#FF4949" size="40" />
+					<SvgIcon v-if="!item.isLike" @click.stop="setLike(item,'like')" name="noLike" size="30" />
+					<SvgIcon v-else name="like" @click.stop="setLike(item,'noLike')" color="#FF4949" size="30" />
 				</div>
 				<div>
-					<SvgIcon @click.stop="updateStyle(item,index)" name="update" size="40" />
+					<SvgIcon @click.stop="updateStyle(item,index)" name="update" size="30" />
 				</div>
+				<!-- <div>
+					<SvgIcon v-if="!item.isAdd" @click.stop="addLibrary(item,'add')" name="add" size="30" />
+					<SvgIcon v-else @click.stop="addLibrary(item,'delete')" name="confirmation" size="30" />
+				</div> -->
 				<div>
-					<SvgIcon v-if="!item.isAdd" @click.stop="addLibrary(item,'add')" name="add" size="40" />
-					<SvgIcon v-else @click.stop="addLibrary(item,'delete')" name="confirmation" size="40" />
-				</div>
-				<div>
-					<SvgIcon @click.stop="deleteStyle(index)" name="delete" size="40" />
+					<SvgIcon @click.stop="deleteStyle(index)" name="delete" size="30" />
 				</div>
 			</div>
 		</div>
@@ -80,36 +85,63 @@ const {} = toRefs(data);
 </template>
 <style lang="less" scoped>
 	.list{
+		display: flex;
+		width: 100%;
+		flex-wrap: wrap;
+		justify-content: space-between;
 		> .item{
-			width: 100%;
+			width: calc(50% - 3.1rem / 2);
 			position: relative;
-			margin-bottom: 5.8rem;
-			height: 29rem;
+			margin-bottom: 3.3rem;
 			display: flex;
-			align-items: center;
-			&:last-child{
-				margin-bottom: 0;
+			flex-direction: column;
+			> .title{
+				font-size: 3.6rem;
+				font-weight: 700;
+				color: #000;
+				font-family: 'satoshiMedium';
 			}
 			> .imgBox{
-				flex: 1;
 				display: flex;
-				height: 100%;
 				justify-content: space-between;
 				align-items: center;
+				flex-wrap: wrap;
+				height: 47.2rem;
+				margin: 2.4rem 0;
+				background-color: #fff;
+				justify-content: center;
+				border: .6px solid #acacac;
+				border-radius: 1.3px;
+				position: relative;
+				> .icon{
+					position: absolute;
+					width: 6rem;
+					height: 6rem;
+					bottom: -1.8rem;
+					right: -2.1rem;
+				}
 				> img{
 					height: 26rem;
 					object-fit: cover;
 					// object-fit: contain;
-					width: calc((100% - 1.4rem * 3) / 4);
+					max-width: 50%;
+					max-height: 50%;
 				}
 			}
 			> .btn{
-				margin-left: 7rem;
+				display: flex;
+				align-items: center;
+				justify-content: flex-end;
 				> div{
-					color: #989898;
-					margin-bottom: 2.6rem;
+					color: #000;
+					margin-right: 1.2rem;
+					border-radius: 50%;
+					width: 6.6rem;
+					height: 6.6rem;
+					padding: 1rem;
+					background-color: #fff;
 					&:last-child{
-						margin-bottom: 0;
+						margin-right: 0rem;
 					}
 					&:hover{
 						color: #000;
diff --git a/src/router/index.ts b/src/router/index.ts
index 0dd4f6a..1b34ceb 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -5,7 +5,7 @@ const router = createRouter({
   routes: [
     {
       path: '/',
-      redirect: '/workshop'
+      redirect: '/welcome'
     },
     {
       path: '/login',
diff --git a/src/views/Workshop/selectModel.vue b/src/views/Workshop/selectModel.vue
index 1628c92..e0a9e1c 100644
--- a/src/views/Workshop/selectModel.vue
+++ b/src/views/Workshop/selectModel.vue
@@ -6,8 +6,9 @@ import imgReturn from '@/assets/images/workshop/posture/posture_1.png'
 const router = useRouter()
 //const props = defineProps({
 //})
-//const emit = defineEmits([
-//])
+const emit = defineEmits([
+	'view-type'
+])
 let data = reactive({
 	modelList: 
 	[
@@ -43,6 +44,9 @@ let data = reactive({
 const setSelectedModelId = (item)=>{
 	data.selectedModelId = item.id;
 }
+onMounted(()=>{
+	emit('view-type', 1)
+})
 const toSelectModelContinue = ()=>{
 	router.push({ path: 'selectModelContinue' })
 }
@@ -54,7 +58,7 @@ defineExpose({})
 const { modelList, selectedModelId } = toRefs(data);
 </script>
 <template>
-	<header-title />
+	<header-title style-type="2" />
 	<div class="selectModel">
 		<div class="text">
 			<div class="title">
@@ -75,6 +79,7 @@ const { modelList, selectedModelId } = toRefs(data);
 			</div>
 		</div>
 	</div>
+	<div class="footer placeholder"></div>
 	<div class="footer">
 		<button @click.stop="toSelectModelContinue">Continue</button>
 	</div>
@@ -86,11 +91,13 @@ const { modelList, selectedModelId } = toRefs(data);
 		position: relative;
 		display: flex;
 		flex-direction: column;
+		flex: 1;
+		overflow: hidden;
 		> .text{
 			text-align: center;
 			width: 100%;
-			margin-top: 7rem;
-			margin-bottom: 4rem;
+			margin-top: 3.4rem;
+			margin-bottom: 6rem;
 			> .title{
 				font-family: satoshiBold;
 				font-weight: 700;
@@ -142,20 +149,24 @@ const { modelList, selectedModelId } = toRefs(data);
 		bottom: 0;
 		left: 0;
 		height: 11.2rem;
-		background-color: #000;
 		display: flex;
 		align-items: center;
 		justify-content: flex-end;
+		background-color: #fff;
+		box-shadow: -2.6rem -1.4rem 3.47rem 0 rgba(0, 0, 0, 0.05);
+		&.placeholder{
+			position: relative;
+		}
 		> 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;
+			border: 0.3rem solid #000;
+			background-color: #000;
+			font-family: satoshiBold;
+			font-weight: 700;
+			font-size: 3.6rem;
 			color: #fff;
 			margin-right: 5rem;
 			&:active {
diff --git a/src/views/Workshop/selectModelContinue.vue b/src/views/Workshop/selectModelContinue.vue
index 230fdef..45aad9d 100644
--- a/src/views/Workshop/selectModelContinue.vue
+++ b/src/views/Workshop/selectModelContinue.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, reactive, toRefs } from "vue";
 import HeaderTitle from '@/components/HeaderTitle.vue'
+import FooterNavigation from '@/components/FooterNavigation.vue'
 import { useRouter } from 'vue-router'
 const router = useRouter()
 //const props = defineProps({
 //})
-//const emit = defineEmits([
-//])
+const emit = defineEmits(['view-type'])
 // let data = reactive({
 // 	modelList: 
 // 	[
@@ -24,7 +24,8 @@ const onContinue = ()=>{
 
 }
 
-onMounted(()=>{
+onMounted(() => {
+	emit('view-type', 1)
 })
 onUnmounted(()=>{
 })
@@ -32,44 +33,37 @@ defineExpose({})
 // const { modelList, selectedModelId } = toRefs(data);
 </script>
 <template>
-	<header-title />
+	<header-title style-type="2" />
 	<div class="selectModelContinue">
-		<div class="router">
-			<div>Home</div>
-			<div>Liberay</div>
-		</div>
 		<div class="text">
 			<div class="title">
 				Go with this Look?
 			</div>
 		</div>
 		<div class="selectContent">
-			<div class="history"></div>
+			<div class="history">
+				<div class="icon"><SvgIcon name="history" size="35" /></div>
+				<div class="label">History</div>
+				<div class="icon"><SvgIcon name="xialajiantou" size="29" /></div>
+			</div>
 			<div class="modelBox">
 				<div></div>
 				<div class="model">
 					<img src="@/assets/images/workshop/posture/posture_1.png" />
 					<div class="operation">
-						<div class="iconItem">
-							<SvgIcon name="noLike" size="30" />
-						</div>
-						<div class="iconItem">
-							<SvgIcon name="noLike" size="30" />
-						</div>
-						<div class="iconItem">
-							<SvgIcon name="noLike" size="30" />
-						</div>
+						<div><SvgIcon name="love_0" size="35" /></div>
+						<div><SvgIcon name="reload" size="35" /></div>
+						<div><SvgIcon name="download" size="35" /></div>
 					</div>
 				</div>
 			</div>
 			<div class="again">
-				Re-try with a new model?
+				<div>Re-try?</div>
+				<div @click="onContinue">Continue</div>
 			</div>
 		</div>
 	</div>
-	<div class="footer">
-		<button @click="onContinue">Continue</button>
-	</div>
+	<footer-navigation is-placeholder />
 </template>
 <style lang="less" scoped>
 	.selectModelContinue{
@@ -78,24 +72,10 @@ defineExpose({})
 		position: relative;
 		display: flex;
 		flex-direction: column;
-		> .router{
-			margin-top: 3rem;
-			margin-left: 5.4rem;
-			display: flex;
-			> div{
-				margin-right: 4.4rem;
-				font-size: 3rem;
-				font-family: satoshiRegular;
-				font-weight: 400;
-				&:last-child{
-					margin-right: 0;
-				}
-			}
-		}
 		> .text{
 			text-align: center;
 			width: 100%;
-			margin-top: 6rem;
+			margin-top: 4.3rem;
 			> .title{
 				font-family: satoshiBold;
 				font-weight: 700;
@@ -107,15 +87,29 @@ defineExpose({})
 			flex: 1;
 			overflow-y: auto;
 			padding: 0 14.1rem;
-			margin-top: 1.5rem;
+			margin-top: 4.8rem;
 			> .history{
-				
+				width: 30.2rem;
+				height: 6.52rem;
+				border-radius: 0.91rem;
+				border: 0.24rem solid #000;
+				display: flex;
+				align-items: center;
+				> .icon {
+					margin: 0 1.8rem;
+				}
+				> .label {
+					flex: 1;
+					font-family: satoshiRegular;
+					font-size: 2.97rem;
+					color: #000;
+				}
 			}
 			> .modelBox{
 				margin-top: 2.5rem;
 				> .model{
 					border: 2px solid #D9D9D9;
-					height: 79.8rem;
+					height: 110rem;
 					position: relative;
 					width: 100%;
 					> img{
@@ -128,52 +122,38 @@ defineExpose({})
 						display: flex;
 						bottom: 2rem;
 						right: 0rem;
-						> .iconItem{
-							border-radius: .96rem;
-							font-weight: 600;
-							padding: 1.2rem;
-							border: 2px solid #000;
-							margin-right: 1.4rem;
+						> div {
+							margin-right: 1.5rem;
+							width: 6.2rem;
+							height: 6.2rem;
+							border-radius: 1rem;
+							border: 0.2rem solid #000;
+							display: flex;
+							align-items: center;
+							justify-content: center;
 						}
 					}
 				}
 			}
 			> .again{
-				margin-top: 5.6rem;
+				margin-top: 4.4rem;
 				font-family: satoshiMedium;
-				padding: 0 10.5rem;
 				line-height: 10.4rem;
-				background-color: #000;
 				color: #fff;
-				border-radius: 10rem;
-				font-size: 4.8rem;
-			}
-		}
-	}
-	.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;
+				font-size: 4.2rem;
+				display: flex;
+				justify-content: center;
+				> div{
+					width: 36rem;
+					border-radius: 15px;
+					background-color: #000;
+					text-align: center;
+					margin-right: 3.9rem;
+					justify-content: center;
+					&:last-child{
+						margin-right: 0;
+					}
+				}
 			}
 		}
 	}
diff --git a/src/views/Workshop/selectStyle.vue b/src/views/Workshop/selectStyle.vue
index 8d21a72..95c7f77 100644
--- a/src/views/Workshop/selectStyle.vue
+++ b/src/views/Workshop/selectStyle.vue
@@ -3,23 +3,27 @@ import { onMounted, onUnmounted, reactive, toRefs } from "vue";
 import SelectItem from "@/components/selectStyle/selectItem.vue";
 import HeaderTitle from '@/components/HeaderTitle.vue'
 import { useRouter } from 'vue-router'
-import editProfile1 from '@/assets/images/editProfile1.jpg'
+import editProfile1_1 from '@/assets/images/workshop/selectStyle/selectStyle1-1.png'
+import editProfile1_2 from '@/assets/images/workshop/selectStyle/selectStyle1-2.png'
+import editProfile1_3 from '@/assets/images/workshop/selectStyle/selectStyle1-3.png'
+import editProfile1_4 from '@/assets/images/workshop/selectStyle/selectStyle1-4.png'
 const router = useRouter()
 
 //const props = defineProps({
 //})
-//const emit = defineEmits([
-//])
+const emit = defineEmits([
+	'view-type'
+])
 let data = reactive({
 	selectList: 
 	[
 		{
 			id:1,
 			imgList:[
-				editProfile1,
-				editProfile1,
-				editProfile1,
-				editProfile1,
+				editProfile1_1,
+				editProfile1_2,
+				editProfile1_3,
+				editProfile1_4,
 			],
 			isLike: false,
 			isAdd: false,
@@ -27,50 +31,54 @@ let data = reactive({
 		{
 			id:2,
 			imgList:[
-				editProfile1,
-				editProfile1,
-				editProfile1,
-				editProfile1,
+				editProfile1_1,
+				editProfile1_2,
+				editProfile1_3,
+				editProfile1_4,
 			],
 			isLike: false,
 			isAdd: false,
 		},
 		{
-			id:2,
+			id:3,
 			imgList:[
-				editProfile1,
-				editProfile1,
-				editProfile1,
-				editProfile1,
+				editProfile1_1,
+				editProfile1_2,
+				editProfile1_3,
+				editProfile1_4,
 			],
 			isLike: false,
 			isAdd: false,
 		},
 		{
-			id:2,
+			id:4,
 			imgList:[
-				editProfile1,
-				editProfile1,
-				editProfile1,
-				editProfile1,
+				editProfile1_1,
+				editProfile1_2,
+				editProfile1_3,
+				editProfile1_4,
 			],
 			isLike: false,
 			isAdd: false,
 		},
-	]
+	],
+	select:{
+		
+	}
 })
 const toSelectModel = ()=>{
 	router.push({ path: 'selectModel' })
 }
 onMounted(()=>{
+	emit('view-type', 1)
 })
 onUnmounted(()=>{
 })
 defineExpose({})
-const { selectList } = toRefs(data);
+const { selectList, select } = toRefs(data);
 </script>
 <template>
-	<header-title />
+	<header-title style-type="2" />
 	<div class="selectStyle">
 		<div class="text">
 			<div class="title">
@@ -81,23 +89,32 @@ const { selectList } = toRefs(data);
 			</div>
 		</div>
 		<div class="selectContent">
-			<SelectItem :selectList="selectList" />
+			<SelectItem :selectList="selectList" v-model:select="select" />
 		</div>
 	</div>
+	<div class="footer placeholder"></div>
 	<div class="footer">
 		<button @click.stop="toSelectModel">Continue</button>
 	</div>
 </template>
 <style lang="less" scoped>
+	.header-title {
+		--header-title-background: #f6f6f6;
+	}
 	.selectStyle{
 		width: 100%;
+		flex: 1;
 		// height: 100%;
 		position: relative;
+		display: flex;
+		flex-direction: column;
+		background-color: #f6f6f6;
+		overflow: hidden;
 		> .text{
 			text-align: center;
 			width: 100%;
-			margin-top: 7rem;
-			margin-bottom: 4.8rem;
+			margin-top: 3.4rem;
+			margin-bottom: 7.2rem;
 			> .title{
 				font-family: satoshiBold;
 				font-weight: 700;
@@ -112,7 +129,9 @@ const { selectList } = toRefs(data);
 			}
 		}
 		.selectContent{
-			padding: 0 4rem;
+			padding: 0 3.5rem;
+			flex: 1;
+			overflow: auto;
 		}
 	}
 	.footer {
@@ -121,20 +140,23 @@ const { selectList } = toRefs(data);
 		bottom: 0;
 		left: 0;
 		height: 11.2rem;
-		background-color: #000;
 		display: flex;
 		align-items: center;
 		justify-content: flex-end;
+		background-color: #f6f6f6;
+		&.placeholder{
+			position: relative;
+		}
 		> 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;
+			border: 0.3rem solid #000;
+			background-color: #000;
+			font-family: satoshiBold;
+			font-weight: 700;
+			font-size: 3.6rem;
 			color: #fff;
 			margin-right: 5rem;
 			&:active {