diff --git a/src/assets/icons/love_1.svg b/src/assets/icons/love_1.svg
new file mode 100644
index 0000000..b13d3e0
--- /dev/null
+++ b/src/assets/icons/love_1.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="28" viewBox="0 0 32 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.166748 9.04153C0.16678 7.2796 0.701271 5.55912 1.69963 4.10733C2.69798 2.65554 4.11323 1.54074 5.75846 0.910159C7.40369 0.279582 9.2015 0.162897 10.9144 0.575513C12.6274 0.98813 14.1749 1.91064 15.3525 3.22119C15.4354 3.30988 15.5357 3.38059 15.6471 3.42893C15.7585 3.47727 15.8787 3.50221 16.0001 3.50221C16.1215 3.50221 16.2416 3.47727 16.353 3.42893C16.4644 3.38059 16.5647 3.30988 16.6477 3.22119C17.8216 1.90212 19.3694 0.971859 21.0852 0.554229C22.8009 0.1366 24.6031 0.251409 26.252 0.883376C27.9008 1.51534 29.3181 2.63449 30.3152 4.09187C31.3123 5.54925 31.8418 7.27573 31.8334 9.04153C31.8334 12.6674 29.4584 15.3749 27.0834 17.7499L18.3877 26.1621C18.0927 26.501 17.729 26.7731 17.3207 26.9606C16.9123 27.148 16.4688 27.2465 16.0195 27.2493C15.5703 27.2521 15.1255 27.1594 14.7149 26.9771C14.3042 26.7948 13.937 26.5273 13.6377 26.1922L4.91675 17.7499C2.54175 15.3749 0.166748 12.6832 0.166748 9.04153Z" fill="#FF4949"/>
+</svg>
diff --git a/src/assets/images/workshop/bg/end_bg.png b/src/assets/images/workshop/bg/end_bg.png
index f5f9fba..8873c16 100644
Binary files a/src/assets/images/workshop/bg/end_bg.png 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
index bdf81bb..87b1ff8 100644
Binary files a/src/assets/images/workshop/bg/picture_bg.png 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
index 2271943..2dc92ac 100644
Binary files a/src/assets/images/workshop/bg/upload_bg.png and b/src/assets/images/workshop/bg/upload_bg.png differ
diff --git a/src/components/FooterNavigation.vue b/src/components/FooterNavigation.vue
index 0ccd824..8dd3468 100644
--- a/src/components/FooterNavigation.vue
+++ b/src/components/FooterNavigation.vue
@@ -22,17 +22,17 @@
 			message: 'The current page has not been saved. Do you want to return to the home page?'
 		})
 			.then(() => {
-				router.push(nav.path)
+				nav.path && router.push(nav.path)
 			})
 			.catch(() => {})
 	}
 	const navs = [
 		{ label: 'Home', icon: 'home', size: 73, path: '/welcome', on: onHome },
 		{ label: 'Library', icon: 'library', size: 53, path: '/workshop/library' },
-		{ label: 'Profile', icon: 'profile', size: 55, path: '/workshop/creation' }
+		{ label: 'Profile', icon: 'profile', size: 55, path: '' }
 	]
 	const onNavClick = (nav) => {
-		if (currentRoute.value !== nav.path) nav.on ? nav.on(nav) : router.push(nav.path)
+		if (currentRoute.value !== nav.path) nav.on ? nav.on(nav) : nav.path && router.push(nav.path)
 	}
 </script>
 
diff --git a/src/router/index.ts b/src/router/index.ts
index 43697e3..5954606 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -60,12 +60,10 @@ const router = createRouter({
       name: 'Workshop',
       component: () => import('../views/Workshop/index.vue'),
       children: [
-        // {
-        // 	path: '',
-        // 	name: 'activitiesWorkshop',
-        // 	redirect: "/activities/workshop",
-        // },
-
+        {
+        	path: '/workshop',
+        	redirect: "/workshop/selectStyle",
+        },
         {
           path: '/workshop/selectStyle',
           name: 'SelectStyle',
diff --git a/src/views/Workshop/creation.vue b/src/views/Workshop/creation.vue
index 95713fb..46c7a64 100644
--- a/src/views/Workshop/creation.vue
+++ b/src/views/Workshop/creation.vue
@@ -11,12 +11,11 @@
 		emit('view-type', 1)
 	})
 	const onSave = () => {
-		// console.log('保存')
-		router.push({ name: 'end' })
+		console.log('保存')
 	}
 
 	const onContinue = () => {
-		console.log('继续创建')
+		router.push({ name: 'end' })
 	}
 </script>
 
@@ -72,6 +71,7 @@
 				border-radius: 2rem;
 				background-color: #fff;
 				margin-bottom: 4rem;
+				border: 0.1rem solid #000;
 				> img {
 					width: 100%;
 					height: 100%;
diff --git a/src/views/Workshop/customize.vue b/src/views/Workshop/customize.vue
index 72cf8f0..b868269 100644
--- a/src/views/Workshop/customize.vue
+++ b/src/views/Workshop/customize.vue
@@ -1,6 +1,33 @@
 <script setup lang="ts">
 	import HeaderTitle from '@/components/HeaderTitle.vue'
 	import FooterNavigation from '@/components/FooterNavigation.vue'
+	import { ref } from 'vue'
+	const emit = defineEmits(['viewType'])
+	import { useRouter } from 'vue-router'
+	const router = useRouter()
+
+	const inputText = ref('')
+	const isLoved = ref(false)
+
+	const onSend = () => {
+		if (inputText.value === '') return
+		const text = inputText.value
+		inputText.value = ''
+		console.log('发送消息:', text)
+	}
+	const onLove = () => {
+		console.log('love')
+		isLoved.value = !isLoved.value
+	}
+	const onReload = () => {
+		console.log('reload')
+	}
+	const onDownload = () => {
+		console.log('download')
+	}
+	const onContinue = () => {
+		router.push({ name: 'creation' })
+	}
 </script>
 
 <template>
@@ -10,8 +37,13 @@
 		<p class="tip">Refine your Look</p>
 		<div class="input-box">
 			<div class="help">?</div>
-			<input type="text" placeholder="Try: “Change background to Tokyo City”" />
-			<div class="send"><SvgIcon name="send" size="48" /></div>
+			<input
+				type="text"
+				v-model="inputText"
+				@keyup.enter="onSend"
+				placeholder="Try: “Change background to Tokyo City”"
+			/>
+			<div class="send" @click="onSend"><SvgIcon name="send" size="48" /></div>
 		</div>
 		<div class="card">
 			<img src="@/assets/images/workshop/posture/posture_1.png" />
@@ -21,17 +53,17 @@
 				<div class="icon"><SvgIcon name="xialajiantou" size="29" /></div>
 			</div>
 			<div class="icons">
-				<div><SvgIcon name="love_0" size="35" /></div>
-				<div><SvgIcon name="reload" size="35" /></div>
-				<div><SvgIcon name="download" size="35" /></div>
+				<div @click="onLove"><SvgIcon :name="`love_${isLoved ? 1 : 0}`" size="35" /></div>
+				<div @click="onReload"><SvgIcon name="reload" size="35" /></div>
+				<div @click="onDownload"><SvgIcon name="download" size="35" /></div>
 			</div>
 		</div>
+		<button class="continue-btn" @click="onContinue">Continue</button>
 	</div>
 	<footer-navigation />
 </template>
 
 <style scoped lang="less">
-	
 	.customize {
 		width: 100%;
 		position: relative;
@@ -95,7 +127,7 @@
 			height: 107.4rem;
 			border-radius: 2rem;
 			// box-shadow: 1.3rem 1.4rem 2rem 0.2rem #0000004d;
-			border: 0.2rem solid #D9D9D9;
+			border: 0.2rem solid #d9d9d9;
 			overflow: hidden;
 			> * {
 				position: absolute;
@@ -143,5 +175,20 @@
 				}
 			}
 		}
+		> .continue-btn {
+			box-sizing: content-box;
+			font-family: satoshiRegular;
+			margin: 2.5rem 2.5rem 0 auto;
+			width: 35rem;
+			height: 7rem;
+			border-radius: 1.3rem;
+			background: #000;
+			font-weight: 400;
+			font-size: 4.2rem;
+			color: #fff;
+			&:active {
+				opacity: 0.7;
+			}
+		}
 	}
 </style>
diff --git a/src/views/Workshop/library.vue b/src/views/Workshop/library.vue
index 002099e..d3c8009 100644
--- a/src/views/Workshop/library.vue
+++ b/src/views/Workshop/library.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-	import { ref, onMounted, inject } from 'vue'
+	import { ref, reactive, onMounted, inject } from 'vue'
 	import HeaderTitle from '@/components/HeaderTitle.vue'
 	import FooterNavigation from '@/components/FooterNavigation.vue'
 	const emit = defineEmits(['view-type'])
@@ -8,12 +8,24 @@
 		emit('view-type', 1)
 	})
 
+	const list = reactive([
+		{ id: 1, userID: '1111111111', datetime: '7/22/2025 18:20', lastopened: '18:20' },
+		{ id: 2, userID: '2222222222', datetime: '7/22/2025 18:20', lastopened: '18:20' },
+		{ id: 3, userID: '3333333333', datetime: '7/22/2025 18:20', lastopened: '18:20' },
+		{ id: 4, userID: '4444444444', datetime: '7/22/2025 18:20', lastopened: '18:20' },
+		{ id: 5, userID: '5555555555', datetime: '7/22/2025 18:20', lastopened: '18:20' },
+		{ id: 6, userID: '6666666666', datetime: '7/22/2025 18:20', lastopened: '18:20' },
+		{ id: 7, userID: '7777777777', datetime: '7/22/2025 18:20', lastopened: '18:20' },
+		{ id: 8, userID: '8888888888', datetime: '7/22/2025 18:20', lastopened: '18:20' },
+		{ id: 9, userID: '9999999999', datetime: '7/22/2025 18:20', lastopened: '18:20' },
+		{ id: 10, userID: '0000000000', datetime: '7/22/2025 18:20', lastopened: '18:20' }
+	])
 	const onRetrieveItem = (i: number) => {
 		console.log('检索' + i)
 	}
 
 	const deleteItem = (i: number) => {
-		console.log('删除' + i)
+		list.splice(i, 1)
 	}
 </script>
 
@@ -22,14 +34,14 @@
 	<div class="library">
 		<div class="title">Library</div>
 		<div class="list">
-			<div class="item" v-for="i in 10" :key="i">
+			<div class="item" v-for="(v, i) in list" :key="v.id">
 				<div class="image">
 					<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>
+					<span class="userID">User ID: {{ v.userID }}</span>
+					<span class="datetime">{{ v.datetime }}</span>
+					<span class="lastopened">Last opened {{ v.lastopened }}</span>
 					<button @click="onRetrieveItem(i)">Retrieve</button>
 				</div>
 				<div class="delete" @click="deleteItem(i)"><SvgIcon name="delete2" size="30" /></div>
@@ -65,7 +77,6 @@
 			right: -40rem;
 			background: linear-gradient(88.42deg, #ffffff 32.58%, #d9d9d9 94.9%);
 			transform: rotate(-45deg);
-
 		}
 
 		> .title {