diff --git a/src/components/MyList.vue b/src/components/MyList.vue
index 425bee6..4aad281 100644
--- a/src/components/MyList.vue
+++ b/src/components/MyList.vue
@@ -3,6 +3,7 @@
 	const props = defineProps({
 		loading: { default: false, type: Boolean },
 		finish: { default: false, type: Boolean },
+		empty: { default: false, type: Boolean },
 		pel: { default: () => {}, type: Function }
 	})
 	const emit = defineEmits(['load'])
@@ -23,12 +24,13 @@
 	})
 </script>
 <template>
-	<div class="my-list" ref="el">
+	<div class="my-list" ref="el" :class="{ empty: !loading && empty }">
 		<slot></slot>
 		<div class="footer">
 			<p v-show="!loading" class="placeholder" ref="placeholder"></p>
-			<span class="loading" v-show="loading">Loading...</span>
-			<span class="nomore" v-show="finish">No more</span>
+			<span class="loading" v-if="loading">Loading...</span>
+			<span class="empty" v-else-if="empty">Nothing Here</span>
+			<span class="nomore" v-else-if="finish">No more</span>
 		</div>
 	</div>
 </template>
@@ -40,12 +42,28 @@
 		> .footer {
 			width: 100%;
 			font-size: 3rem;
-			color: #000;
+			color: #a1a1a1;
 			text-align: center;
 			margin: var(--my-list-footer-margin, 0);
 			> .placeholder {
 				height: 1px;
 			}
+			> .empty {
+				font-size: 4rem;
+			}
+		}
+		&.empty {
+			> .footer {
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				height: 100%;
+				padding: 0;
+				margin: 0;
+				> .empty {
+					margin-bottom: 5rem;
+				}
+			}
 		}
 	}
 </style>
diff --git a/src/views/Workshop/creation/creation-list.vue b/src/views/Workshop/creation/creation-list.vue
index b5cc31d..2a336ad 100644
--- a/src/views/Workshop/creation/creation-list.vue
+++ b/src/views/Workshop/creation/creation-list.vue
@@ -268,7 +268,12 @@
 			</div>
 		</div>
 		<div class="list">
-			<my-list v-model:loading="loading" v-model:finish="finish" @load="onLoad">
+			<my-list
+				v-model:loading="loading"
+				v-model:finish="finish"
+				@load="onLoad"
+				:empty="list.length === 0"
+			>
 				<div
 					class="item"
 					v-for="(v, i) in list"
diff --git a/src/views/Workshop/library.vue b/src/views/Workshop/library.vue
index f69c4dd..17527e9 100644
--- a/src/views/Workshop/library.vue
+++ b/src/views/Workshop/library.vue
@@ -47,7 +47,7 @@
 			cancelButtonText: 'Cancel'
 		}).catch(() => 0)
 		if (res === 0) return
-		console.log(obj,i)
+		console.log(obj, i)
 		deleteCustomerPhoto(obj.visitRecordId)
 			.then(() => {
 				list.splice(i, 1)
@@ -68,7 +68,12 @@
 	<div class="library">
 		<div class="title">Library</div>
 		<div class="list">
-			<my-list v-model:loading="loading" v-model:finish="finish" @load="onLoad">
+			<my-list
+				v-model:loading="loading"
+				v-model:finish="finish"
+				:empty="list.length === 0"
+				@load="onLoad"
+			>
 				<div class="item" v-for="(v, i) in list" :key="v.visitRecordId">
 					<div class="image">
 						<img v-lazy="v.defaultImageUrl" />
@@ -115,18 +120,18 @@
 		}
 
 		> .title {
-			font-family: satoshiRegular;
-			font-size: 9rem;
+			font-family: satoshiBold;
+			font-size: 8.9rem;
 			text-align: left;
 			line-height: 124%;
-			margin: 5rem;
+			margin: 5rem 9.1rem;
 		}
 		> .list {
 			flex: 1;
 			overflow: hidden;
-			margin: 0 3rem;
+			margin: 0 4.5rem;
 			> .my-list {
-				padding: 0 3.8rem;
+				padding: 0 4.5rem;
 				--my-list-footer-margin: 2rem 0;
 				> .item {
 					position: relative;