diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 4ffe379..afc2086 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -29,13 +29,26 @@ button.sandblasted-blurred:active {
   opacity: 0.7;
 }
 html:root {
-  --van-dialog-width: 90rem;
-  --van-dialog-font-size: 5rem;
-  --van-dialog-header-line-height: 150%;
-  --van-dialog-message-font-size: 3.5rem;
-  --van-dialog-message-line-height: 150%;
-  --van-button-default-font-size: 4rem;
-  --van-dialog-button-height: 9rem;
-  --van-dialog-message-padding: 3rem 2.5rem;
+  --van-overlay-background: rgba(0, 0, 0, 0.4);
+  --van-dialog-width: 45rem;
+  --van-dialog-font-size: 2.83rem;
+  --van-dialog-header-font-weight: 600;
+  --van-dialog-header-line-height: 95%;
+  --van-text-color: #000;
+  --van-dialog-header-padding-top: 3rem;
+  --van-dialog-message-font-size: 2rem;
+  --van-dialog-message-line-height: 130%;
+  --van-dialog-has-title-message-text-color: #000;
+  --van-button-default-font-size: 2.8rem;
+  --van-dialog-button-height: 6.8rem;
+  --van-dialog-message-padding: 3.5rem;
   --van-dialog-has-title-message-padding-top: 2.5rem;
+  --van-button-default-color: #1B73E7;
+  --van-dialog-confirm-button-text-color: #1B73E7;
+}
+.van-toast__text {
+  font-size: 4rem;
+  height: 5rem;
+  line-height: 5rem;
+  padding: 0 2rem;
 }
diff --git a/src/assets/css/style.less b/src/assets/css/style.less
index c4ff8a9..516898c 100644
--- a/src/assets/css/style.less
+++ b/src/assets/css/style.less
@@ -23,6 +23,7 @@ button.sandblasted-blurred {
 	&::before {
 		backdrop-filter: blur(9.5rem);
 	}
+
 	&::after {
 		opacity: 0.1;
 		background: url('@/assets/images/customer_form_bg.png');
@@ -37,20 +38,28 @@ button.sandblasted-blurred {
 
 // vant dialog
 html:root {
-	--van-dialog-width: 90rem;
-	--van-dialog-font-size: 5rem;
-	--van-dialog-header-line-height: 150%;
-	--van-dialog-message-font-size: 3.5rem;
-	--van-dialog-message-line-height: 150%;
-	--van-button-default-font-size: 4rem;
-	--van-dialog-button-height: 9rem;
-	--van-dialog-message-padding: 3rem 2.5rem;
+	--van-overlay-background: rgba(0, 0, 0, 0.4);
+	--van-dialog-width: 45rem;
+	--van-dialog-font-size: 2.83rem;
+	--van-dialog-header-font-weight: 600;
+	--van-dialog-header-line-height: 95%;
+	--van-text-color: #000;
+	--van-dialog-header-padding-top: 3rem;
+	--van-dialog-message-font-size: 2rem;
+	--van-dialog-message-line-height: 130%;
+	--van-dialog-has-title-message-text-color: #000;
+	--van-button-default-font-size: 2.8rem;
+	--van-dialog-button-height: 6.8rem;
+	--van-dialog-message-padding: 3.5rem;
 	--van-dialog-has-title-message-padding-top: 2.5rem;
+	--van-button-default-color: #1B73E7;
+	--van-dialog-confirm-button-text-color: #1B73E7;
 }
 
+
 .van-toast__text {
-  font-size: 4rem;
-  height: 5rem;
-  line-height: 5rem;
-  padding: 0 2rem;
+	font-size: 4rem;
+	height: 5rem;
+	line-height: 5rem;
+	padding: 0 2rem;
 }
\ No newline at end of file
diff --git a/src/components/FooterNavigation.vue b/src/components/FooterNavigation.vue
index 700ddfb..3a62bd3 100644
--- a/src/components/FooterNavigation.vue
+++ b/src/components/FooterNavigation.vue
@@ -18,8 +18,10 @@
 	}
 	const onHome = (nav) => {
 		showConfirmDialog({
-			title: 'Tip',
-			message: 'The current page has not been saved. Do you want to return to the home page?'
+			title: 'Return to Home Page?',
+			message: 'You have unsaved changes. Your progress will be lost.',
+			confirmButtonText: 'Yes',
+			cancelButtonText: 'Cancel',
 		})
 			.then(() => {
 				nav.path && router.push(nav.path)
diff --git a/src/router/index.ts b/src/router/index.ts
index 5954606..2ce18b0 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -107,7 +107,7 @@ const router = createRouter({
 		  // creation
 		  path: '/workshop/creation',
 		  name: 'creation',
-		  component: () => import('../views/Workshop/creation.vue'),
+		  component: () => import('../views/Workshop/creation/index.vue'),
 		},
         {
           // 完成创建
diff --git a/src/views/Workshop/creation.vue b/src/views/Workshop/creation.vue
deleted file mode 100644
index 2c6dc49..0000000
--- a/src/views/Workshop/creation.vue
+++ /dev/null
@@ -1,122 +0,0 @@
-<script setup lang="ts">
-	import { ref, reactive, onMounted } from 'vue'
-	import HeaderTitle from '@/components/HeaderTitle.vue'
-	import FooterNavigation from '@/components/FooterNavigation.vue'
-	import MyList from '@/components/myList.vue'
-
-	import { useRouter } from 'vue-router'
-	const router = useRouter()
-	const emit = defineEmits(['view-type'])
-
-	onMounted(() => {
-		emit('view-type', 1)
-	})
-	const onSave = () => {
-		console.log('保存')
-	}
-
-	const onContinue = () => {
-		router.push({ name: 'end' })
-	}
-	const list = reactive([{},{},{},{},{},{}])
-	const loading = ref(false)
-	const finish = ref(false)
-	const onLoad = () => {
-		loading.value = true
-		setTimeout(() => {
-			list.push({},{},{},{},{},{})
-			loading.value = false
-			if (list.length >= 20) {
-				finish.value = true
-			}
-		}, 1500)
-	}
-</script>
-
-<template>
-	<header-title style-type="2" />
-	<div class="creation">
-		<div class="title">Your Creation</div>
-		<div class="list">
-			<my-list v-model:loading="loading" v-model:finish="finish" @load="onLoad">
-				<div class="item" v-for="(v,i) in list" :key="i">
-					<img src="@/assets/images/workshop/posture/posture_1.png" />
-				</div>
-			</my-list>
-		</div>
-		<div class="btns">
-			<button @click="onSave">Save</button>
-			<button @click="onContinue">Continue</button>
-		</div>
-	</div>
-	<footer-navigation is-placeholder />
-</template>
-
-<style scoped lang="less">
-	.creation {
-		width: 100%;
-		flex: 1;
-		overflow: hidden;
-		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: 7.2rem 0;
-		}
-		> .list {
-			flex: 1;
-			margin: 0 3.8rem;
-			overflow: hidden;
-			> .my-list {
-				padding: 0 6rem;
-				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;
-					border: 0.1rem solid #000;
-					> img {
-						width: 100%;
-						height: 100%;
-						object-fit: contain;
-					}
-				}
-			}
-		}
-		> .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/creation/creation-details.vue b/src/views/Workshop/creation/creation-details.vue
new file mode 100644
index 0000000..81f6b42
--- /dev/null
+++ b/src/views/Workshop/creation/creation-details.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+	import { ref, reactive, onMounted } from 'vue'
+	import { useRouter } from 'vue-router'
+	const router = useRouter()
+	const query = router.currentRoute.value.query
+
+	onMounted(() => {})
+</script>
+
+<template>
+	<div class="creation-details">
+		{{ query }}
+	</div>
+</template>
+
+<style scoped lang="less">
+	.creation-details {
+		width: 100%;
+		flex: 1;
+		overflow: hidden;
+		background-color: #e3e3e3;
+		border-radius: 1rem;
+		position: relative;
+		color: #000;
+		display: flex;
+		flex-direction: column;
+	}
+</style>
diff --git a/src/views/Workshop/creation/creation-list.vue b/src/views/Workshop/creation/creation-list.vue
new file mode 100644
index 0000000..3255ca1
--- /dev/null
+++ b/src/views/Workshop/creation/creation-list.vue
@@ -0,0 +1,195 @@
+<script setup lang="ts">
+	import { ref, reactive, onMounted } from 'vue'
+	import MyList from '@/components/myList.vue'
+
+	import { useRouter } from 'vue-router'
+	const router = useRouter()
+	const emit = defineEmits(['view-type'])
+
+	onMounted(() => {
+		emit('view-type', 1)
+	})
+	const onDetailsItem = (v) => {
+		if(v.isAi) return;
+		console.log('详情', v)
+		router.push({  query: { did: v.id } })
+		
+	}
+
+	const onDownloadItem = (v) => {
+		console.log('保存', v)
+	}
+	const onLoveItem = (v) => {
+		// Outfit暂时不可以like
+		console.log('喜欢', v)
+		v.love = !v.love
+	}
+	const onSaveAll = () => {
+		console.log('保存')
+	}
+
+	const onContinue = () => {
+		router.push({ name: 'end' })
+	}
+	const list = reactive([])
+	const loading = ref(false)
+	const finish = ref(false)
+	const onLoad = () => {
+		loading.value = true
+		setTimeout(() => {
+			for (var i = 0; i < 10; i++) list.push({id: list.length, love: Math.random() > 0.5, isAi: Math.random() > 0.5 })
+			loading.value = false
+			if (list.length >= 30) {
+				finish.value = true
+			}
+		}, 500)
+	}
+</script>
+
+<template>
+	<div class="creation-list">
+		<div class="title">Your Creation</div>
+		<div class="list">
+			<my-list v-model:loading="loading" v-model:finish="finish" @load="onLoad">
+				<div class="item" v-for="(v, i) in list" :key="i" @click="onDetailsItem(v)">
+					<img src="@/assets/images/workshop/posture/posture_1.png" />
+					<div class="corner">
+						<div class="ai" v-if="v.isAi">Gen-AI</div>
+						<div class="tryon" v-else>Try-on</div>
+					</div>
+					<div class="icons">
+						<div @click.stop="onLoveItem(v)">
+							<SvgIcon :name="`love_${v.love ? '1' : '0'}`" size="27" />
+						</div>
+						<div @click.stop="onDownloadItem(v)"><SvgIcon name="download" size="27" /></div>
+					</div>
+				</div>
+			</my-list>
+		</div>
+		<div class="btns">
+			<button @click="onSaveAll">Save All</button>
+			<button @click="onContinue">Continue</button>
+		</div>
+	</div>
+</template>
+
+<style scoped lang="less">
+	.creation-list {
+		width: 100%;
+		flex: 1;
+		overflow: hidden;
+		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: 7.2rem 0;
+		}
+		> .list {
+			flex: 1;
+			margin: 0 3.8rem;
+			overflow: hidden;
+			> .my-list {
+				padding: 0 6rem;
+				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;
+					border: 0.1rem solid #000;
+					position: relative;
+					> img {
+						width: 100%;
+						height: 100%;
+						object-fit: contain;
+					}
+					> .corner {
+						position: absolute;
+						top: 0;
+						right: 0;
+						> div {
+							display: flex;
+							align-items: center;
+							justify-content: center;
+							width: 12.6rem;
+							height: 3.6rem;
+							font-family: satoshiBold;
+							font-size: 1.6rem;
+							border-bottom-left-radius: 1.6rem;
+
+							background-color: #000;
+							color: #fff;
+						}
+						> .ai {
+							color: #646464;
+							background: linear-gradient(
+									137.95deg,
+									#7a96ac 2.28%,
+									#eaeff3 19.8%,
+									#c2d4e1 32.94%,
+									#ffffff 50.16%,
+									#d4dee5 62.15%,
+									#abbdc8 78.69%,
+									#bccad7 95.24%
+								),
+								linear-gradient(0deg, rgba(230, 219, 219, 0.5), rgba(230, 219, 219, 0.5));
+						}
+					}
+					> .icons {
+						position: absolute;
+						bottom: 0;
+						right: 1.7rem;
+						display: flex;
+						align-items: center;
+						flex-direction: column;
+						> div {
+							margin-bottom: 2.2rem;
+							width: 5rem;
+							height: 5rem;
+							border-radius: 1rem;
+							border: 0.2rem solid #000;
+							--svg-icon-color: #000;
+							display: flex;
+							align-items: center;
+							justify-content: center;
+						}
+					}
+				}
+			}
+		}
+		> .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/creation/index.vue b/src/views/Workshop/creation/index.vue
new file mode 100644
index 0000000..0d77b92
--- /dev/null
+++ b/src/views/Workshop/creation/index.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+	import { ref, reactive, onMounted, watch, computed } from 'vue'
+	import HeaderTitle from '@/components/HeaderTitle.vue'
+	import FooterNavigation from '@/components/FooterNavigation.vue'
+	import CreationList from '@/views/Workshop/creation/creation-list.vue'
+	import CreationDetails from '@/views/Workshop/creation/creation-details.vue'
+
+	import { useRouter } from 'vue-router'
+	const router = useRouter()
+	const detailsID = computed(() => router.currentRoute.value.query.did);
+	const emit = defineEmits(['view-type'])
+	watch(
+		() => router.currentRoute.value,
+		() => emit('view-type', 1)
+	)
+	
+	onMounted(() => {
+		emit('view-type', 1)
+	})
+</script>
+
+<template>
+	<header-title style-type="2" />
+	<creation-list v-show="!detailsID" />
+	<creation-details v-show="detailsID" />
+	<footer-navigation is-placeholder />
+</template>
+
+<style scoped lang="less">
+</style>
diff --git a/src/views/Workshop/customize.vue b/src/views/Workshop/customize.vue
index 5f6ec23..48b5de1 100644
--- a/src/views/Workshop/customize.vue
+++ b/src/views/Workshop/customize.vue
@@ -27,7 +27,7 @@
 	const onRetry = () => {
 		router.back()
 	}
-	const onContinue = () => {
+	const onFinish = () => {
 		router.push({ name: 'creation' })
 	}
 </script>
@@ -49,20 +49,19 @@
 		</div>
 		<div class="card">
 			<img src="@/assets/images/workshop/posture/posture_1.png" />
-			<div class="select-box">
+			<!-- <div class="select-box">
 				<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> -->
 			<div class="icons">
 				<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 @click="onDownload"><SvgIcon name="download" size="35" /></div> -->
 			</div>
 		</div>
 		<div class="btns">
-			<button @click="onRetry">Re-try?</button>
-			<button @click="onContinue">Continue</button>
+			<button @click="onFinish">Finish</button>
 		</div>
 	</div>
 	<footer-navigation />
@@ -88,13 +87,14 @@
 			font-family: satoshiRegular;
 			font-size: 3.74rem;
 			line-height: 124%;
+			color: rgba(0, 0, 0, 0.6);
 		}
 		> .input-box {
-			margin-top: 7.3rem;
+			margin-top: 6rem;
 			width: 87.5rem;
 			height: 8.3rem;
 			border-radius: 0.5rem;
-			border: 0.4rem solid #000000;
+			border: 0.3rem solid #000000;
 			box-sizing: content-box;
 			display: flex;
 			align-items: center;
@@ -127,9 +127,9 @@
 			}
 		}
 		> .card {
-			margin-top: 6.9rem;
-			width: 79.8rem;
-			height: 107.4rem;
+			margin-top: 6.4rem;
+			width: 72.9rem;
+			height: 102.3rem;
 			border-radius: 2rem;
 			// box-shadow: 1.3rem 1.4rem 2rem 0.2rem #0000004d;
 			border: 0.2rem solid #d9d9d9;
@@ -181,20 +181,21 @@
 			}
 		}
 		> .btns {
-			margin-top: 2.5rem;
+			margin-top: 5.6rem;
 			width: 100%;
 			display: flex;
 			justify-content: center;
 			> button {
 				box-sizing: content-box;
 				font-family: satoshiRegular;
-				margin: 0 2rem;
-				width: 35rem;
-				height: 6rem;
+				// margin: 0 1.8rem;
+				margin: 0 5.2rem 0 auto;
+				width: 23.8rem;
+				height: 6.9rem;
 				border-radius: 1.3rem;
 				background: #000;
 				font-weight: 400;
-				font-size: 3.6rem;
+				font-size: 3.89rem;
 				color: #fff;
 				&:active {
 					opacity: 0.7;
diff --git a/src/views/Workshop/library.vue b/src/views/Workshop/library.vue
index c7593b8..6e48626 100644
--- a/src/views/Workshop/library.vue
+++ b/src/views/Workshop/library.vue
@@ -3,6 +3,7 @@
 	import HeaderTitle from '@/components/HeaderTitle.vue'
 	import FooterNavigation from '@/components/FooterNavigation.vue'
 	import MyList from '@/components/myList.vue'
+	import router from '@/router'
 	const emit = defineEmits(['view-type'])
 
 	onMounted(() => {
@@ -25,10 +26,11 @@
 			}
 			loading.value = false
 			if (list.length >= 50) finish.value = true
-		}, 1500)
+		}, 500)
 	}
-	const onRetrieveItem = (i: number) => {
-		console.log('检索' + i)
+	const onDetailsItem = (v) => {
+		// console.log('检索' + i)
+		router.push({ name: 'creation', query: { date: v.datetime } })
 	}
 
 	const deleteItem = (i: number) => {
@@ -47,10 +49,10 @@
 						<img src="@/assets/images/workshop/posture/posture_1.png" />
 					</div>
 					<div class="content">
-						<span class="userID">User ID: {{ v.userID }}</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>
+						<button @click="onDetailsItem(v)">Details</button>
 					</div>
 					<div class="delete" @click="deleteItem(i)"><SvgIcon name="delete2" size="30" /></div>
 				</div>