diff --git a/src/assets/icons/seller/draft.svg b/src/assets/icons/seller/draft.svg
new file mode 100644
index 00000000..bbd74401
--- /dev/null
+++ b/src/assets/icons/seller/draft.svg
@@ -0,0 +1,11 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1622_6669)">
+<path d="M15.9998 13.3334C14.945 13.3334 13.9139 13.6462 13.0368 14.2322C12.1597 14.8182 11.4761 15.6512 11.0725 16.6257C10.6688 17.6003 10.5632 18.6726 10.769 19.7072C10.9748 20.7418 11.4827 21.6921 12.2286 22.4379C12.9745 23.1838 13.9248 23.6918 14.9594 23.8976C15.9939 24.1034 17.0663 23.9977 18.0408 23.5941C19.0154 23.1904 19.8483 22.5068 20.4343 21.6297C21.0204 20.7527 21.3332 19.7215 21.3332 18.6667C21.3332 17.2522 20.7713 15.8957 19.7711 14.8955C18.7709 13.8953 17.4143 13.3334 15.9998 13.3334ZM15.9998 21.3334C15.4724 21.3334 14.9569 21.177 14.5183 20.884C14.0798 20.5909 13.738 20.1745 13.5362 19.6872C13.3343 19.1999 13.2815 18.6637 13.3844 18.1465C13.4873 17.6292 13.7413 17.154 14.1142 16.7811C14.4872 16.4081 14.9623 16.1542 15.4796 16.0513C15.9969 15.9484 16.5331 16.0012 17.0203 16.203C17.5076 16.4049 17.9241 16.7467 18.2171 17.1852C18.5101 17.6237 18.6665 18.1393 18.6665 18.6667C18.6665 19.374 18.3856 20.0522 17.8855 20.5523C17.3854 21.0524 16.7071 21.3334 15.9998 21.3334Z" fill="white"/>
+<path d="M30.048 5.49603L26.504 1.95203C25.8865 1.33115 25.1519 0.838932 24.3429 0.503869C23.5338 0.168806 22.6664 -0.00244608 21.7907 2.6395e-05H6.66667C4.89921 0.00214354 3.20474 0.705202 1.95496 1.95499C0.705176 3.20477 0.00211714 4.89923 0 6.66669L0 25.3334C0.00211714 27.1008 0.705176 28.7953 1.95496 30.0451C3.20474 31.2949 4.89921 31.9979 6.66667 32H25.3333C27.1008 31.9979 28.7953 31.2949 30.045 30.0451C31.2948 28.7953 31.9979 27.1008 32 25.3334V10.2094C32.0025 9.33368 31.8312 8.4662 31.4962 7.65715C31.1611 6.8481 30.6689 6.11355 30.048 5.49603ZM22.6667 2.77336V4.00003C22.6667 5.06089 22.2452 6.07831 21.4951 6.82845C20.7449 7.5786 19.7275 8.00003 18.6667 8.00003H13.3333C12.2725 8.00003 11.2551 7.5786 10.5049 6.82845C9.75476 6.07831 9.33333 5.06089 9.33333 4.00003V2.66669H21.7907C22.0857 2.66931 22.3796 2.70509 22.6667 2.77336ZM29.3333 25.3334C29.3333 26.3942 28.9119 27.4116 28.1618 28.1618C27.4116 28.9119 26.3942 29.3334 25.3333 29.3334H6.66667C5.6058 29.3334 4.58839 28.9119 3.83824 28.1618C3.08809 27.4116 2.66667 26.3942 2.66667 25.3334V6.66669C2.66667 5.60583 3.08809 4.58841 3.83824 3.83827C4.58839 3.08812 5.6058 2.66669 6.66667 2.66669V4.00003C6.66878 5.76749 7.37184 7.46195 8.62163 8.71173C9.87141 9.96152 11.5659 10.6646 13.3333 10.6667H18.6667C20.3433 10.6615 21.9562 10.0236 23.1828 8.88051C24.4095 7.73745 25.1594 6.17348 25.2827 4.50136L28.1627 7.38136C28.9099 8.13319 29.3306 9.14935 29.3333 10.2094V25.3334Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_1622_6669">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/icons/seller/edit.svg b/src/assets/icons/seller/edit.svg
new file mode 100644
index 00000000..f917859d
--- /dev/null
+++ b/src/assets/icons/seller/edit.svg
@@ -0,0 +1,11 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1571_1813)">
+<path d="M24.8745 1.24001L8.61853 17.496C7.99765 18.1135 7.50544 18.8481 7.17037 19.6571C6.83531 20.4662 6.66406 21.3337 6.66653 22.2093V24C6.66653 24.3536 6.80701 24.6928 7.05705 24.9428C7.3071 25.1929 7.64624 25.3333 7.99986 25.3333H9.79053C10.6662 25.3358 11.5337 25.1646 12.3427 24.8295C13.1518 24.4944 13.8863 24.0022 14.5039 23.3813L30.7599 7.12535C31.5391 6.34424 31.9766 5.28598 31.9766 4.18268C31.9766 3.07938 31.5391 2.02112 30.7599 1.24001C29.9674 0.48254 28.9134 0.0598145 27.8172 0.0598145C26.721 0.0598145 25.667 0.48254 24.8745 1.24001ZM28.8745 5.24002L12.6185 21.496C11.8667 22.2433 10.8505 22.6639 9.79053 22.6667H9.3332V22.2093C9.33598 21.1493 9.75662 20.1332 10.5039 19.3813L26.7599 3.12535C27.0446 2.85329 27.4233 2.70147 27.8172 2.70147C28.2111 2.70147 28.5897 2.85329 28.8745 3.12535C29.1545 3.40603 29.3116 3.78627 29.3116 4.18268C29.3116 4.57909 29.1545 4.95933 28.8745 5.24002Z" fill="white"/>
+<path d="M30.6667 11.972C30.313 11.972 29.9739 12.1125 29.7239 12.3625C29.4738 12.6126 29.3333 12.9517 29.3333 13.3053V20H24C22.9391 20 21.9217 20.4214 21.1716 21.1716C20.4214 21.9217 20 22.9391 20 24V29.3333H6.66667C5.6058 29.3333 4.58839 28.9119 3.83824 28.1618C3.08809 27.4116 2.66667 26.3942 2.66667 25.3333V6.66667C2.66667 5.6058 3.08809 4.58839 3.83824 3.83824C4.58839 3.08809 5.6058 2.66667 6.66667 2.66667H18.7227C19.0763 2.66667 19.4154 2.52619 19.6655 2.27614C19.9155 2.02609 20.056 1.68696 20.056 1.33333C20.056 0.979711 19.9155 0.640573 19.6655 0.390524C19.4154 0.140476 19.0763 0 18.7227 0L6.66667 0C4.89921 0.00211714 3.20474 0.705176 1.95496 1.95496C0.705176 3.20474 0.00211714 4.89921 0 6.66667L0 25.3333C0.00211714 27.1008 0.705176 28.7953 1.95496 30.045C3.20474 31.2948 4.89921 31.9979 6.66667 32H21.7907C22.6666 32.0025 23.5342 31.8313 24.3435 31.4962C25.1528 31.1612 25.8876 30.6689 26.5053 30.048L30.0467 26.504C30.6677 25.8865 31.1601 25.152 31.4953 24.3429C31.8306 23.5339 32.0022 22.6664 32 21.7907V13.3053C32 12.9517 31.8595 12.6126 31.6095 12.3625C31.3594 12.1125 31.0203 11.972 30.6667 11.972ZM24.62 28.1627C24.084 28.6973 23.4062 29.0675 22.6667 29.2293V24C22.6667 23.6464 22.8071 23.3072 23.0572 23.0572C23.3072 22.8071 23.6464 22.6667 24 22.6667H29.2333C29.0684 23.4047 28.6987 24.0812 28.1667 24.6187L24.62 28.1627Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_1571_1813">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/icons/seller/share.svg b/src/assets/icons/seller/share.svg
new file mode 100644
index 00000000..c3658257
--- /dev/null
+++ b/src/assets/icons/seller/share.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M28 16H24C22.5293 16 21.3333 17.196 21.3333 18.6667C21.3333 20.1373 20.1373 21.3333 18.6667 21.3333H13.3333C11.8627 21.3333 10.6667 20.1373 10.6667 18.6667C10.6667 17.196 9.47067 16 8 16H4C1.79467 16 0 17.7947 0 20V25.3333C0 29.0093 2.99067 32 6.66667 32H25.3333C29.0093 32 32 29.0093 32 25.3333V20C32 17.7947 30.2053 16 28 16ZM29.3333 25.3333C29.3333 27.5387 27.5387 29.3333 25.3333 29.3333H6.66667C4.46133 29.3333 2.66667 27.5387 2.66667 25.3333V20C2.66667 19.264 3.264 18.6667 4 18.6667L8 18.664V18.6667C8 21.608 10.392 24 13.3333 24H18.6667C21.608 24 24 21.608 24 18.6667H28C28.736 18.6667 29.3333 19.264 29.3333 20V25.3333ZM9.724 7.05733C9.20267 6.536 9.20267 5.69333 9.724 5.172L14.1147 0.781333C14.6293 0.266667 15.3053 0.008 15.9813 0.004L16 0L16.0187 0.004C16.696 0.008 17.3707 0.266667 17.8853 0.781333L22.276 5.172C22.7973 5.69333 22.7973 6.536 22.276 7.05733C22.016 7.31733 21.6747 7.448 21.3333 7.448C20.992 7.448 20.6507 7.31733 20.3907 7.05733L17.3333 4V13.3333C17.3333 14.0707 16.7373 14.6667 16 14.6667C15.2627 14.6667 14.6667 14.0707 14.6667 13.3333V4L11.6093 7.05733C11.088 7.57867 10.2453 7.57867 9.724 7.05733Z" fill="white"/>
+</svg>
diff --git a/src/views/SellerDashboard/MyListings/createSelect/historyList.vue b/src/views/SellerDashboard/MyListings/createSelect/historyList.vue
new file mode 100644
index 00000000..ebaae023
--- /dev/null
+++ b/src/views/SellerDashboard/MyListings/createSelect/historyList.vue
@@ -0,0 +1,227 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+
+//const props = defineProps({
+//})
+const emit = defineEmits([
+	'selectCollectionItem',
+])
+const current = ref(1)
+const list = ref([
+	{
+		imgList:[
+			{
+				url:'https://www.minio-api.aida.com.hk/aida-users/83/avatar/2b3d5756-ea29-4020-86a9-3b02cfc73b5a.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20260410%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260410T013002Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=eedfd4114bde66f0ff8fe5e4d7a7274d9007b25deb40ee82a19427f29601e89b',
+			},{
+				url:'https://www.minio-api.aida.com.hk/aida-users/83/avatar/2b3d5756-ea29-4020-86a9-3b02cfc73b5a.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20260410%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260410T013002Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=eedfd4114bde66f0ff8fe5e4d7a7274d9007b25deb40ee82a19427f29601e89b',
+			},{
+				url:'https://www.minio-api.aida.com.hk/aida-users/83/avatar/2b3d5756-ea29-4020-86a9-3b02cfc73b5a.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20260410%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260410T013002Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=eedfd4114bde66f0ff8fe5e4d7a7274d9007b25deb40ee82a19427f29601e89b',
+			},{
+				url:'https://www.minio-api.aida.com.hk/aida-users/83/avatar/2b3d5756-ea29-4020-86a9-3b02cfc73b5a.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20260410%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260410T013002Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=eedfd4114bde66f0ff8fe5e4d7a7274d9007b25deb40ee82a19427f29601e89b',
+			},
+		],
+		type:'Series',
+		name:'Christmas',
+		sketchNum: 7,
+		date: 'today',
+		id:'1',
+	},{
+		imgList:[
+			{
+				url:'https://www.minio-api.aida.com.hk/aida-users/83/avatar/2b3d5756-ea29-4020-86a9-3b02cfc73b5a.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20260410%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260410T013002Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=eedfd4114bde66f0ff8fe5e4d7a7274d9007b25deb40ee82a19427f29601e89b',
+			},{
+				url:'https://www.minio-api.aida.com.hk/aida-users/83/avatar/2b3d5756-ea29-4020-86a9-3b02cfc73b5a.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20260410%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260410T013002Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=eedfd4114bde66f0ff8fe5e4d7a7274d9007b25deb40ee82a19427f29601e89b',
+			},{
+				url:'https://www.minio-api.aida.com.hk/aida-users/83/avatar/2b3d5756-ea29-4020-86a9-3b02cfc73b5a.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20260410%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260410T013002Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=eedfd4114bde66f0ff8fe5e4d7a7274d9007b25deb40ee82a19427f29601e89b',
+			},{
+				url:'https://www.minio-api.aida.com.hk/aida-users/83/avatar/2b3d5756-ea29-4020-86a9-3b02cfc73b5a.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20260410%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260410T013002Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=eedfd4114bde66f0ff8fe5e4d7a7274d9007b25deb40ee82a19427f29601e89b',
+			},
+		],
+		type:'Series',
+		name:'Christmas',
+		sketchNum: 7,
+		date: 'today',
+		id:'2',
+	},{
+		imgList:[
+			{
+				url:'https://www.minio-api.aida.com.hk/aida-users/83/avatar/2b3d5756-ea29-4020-86a9-3b02cfc73b5a.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20260410%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260410T013002Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=eedfd4114bde66f0ff8fe5e4d7a7274d9007b25deb40ee82a19427f29601e89b',
+			},{
+				url:'https://www.minio-api.aida.com.hk/aida-users/83/avatar/2b3d5756-ea29-4020-86a9-3b02cfc73b5a.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20260410%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260410T013002Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=eedfd4114bde66f0ff8fe5e4d7a7274d9007b25deb40ee82a19427f29601e89b',
+			},{
+				url:'https://www.minio-api.aida.com.hk/aida-users/83/avatar/2b3d5756-ea29-4020-86a9-3b02cfc73b5a.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20260410%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260410T013002Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=eedfd4114bde66f0ff8fe5e4d7a7274d9007b25deb40ee82a19427f29601e89b',
+			},{
+				url:'https://www.minio-api.aida.com.hk/aida-users/83/avatar/2b3d5756-ea29-4020-86a9-3b02cfc73b5a.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20260410%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260410T013002Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=eedfd4114bde66f0ff8fe5e4d7a7274d9007b25deb40ee82a19427f29601e89b',
+			},
+		],
+		type:'Series',
+		name:'Christmas',
+		sketchNum: 7,
+		date: 'today',
+		id:'1',
+	},{
+		imgList:[
+			{
+				url:'https://www.minio-api.aida.com.hk/aida-users/83/avatar/2b3d5756-ea29-4020-86a9-3b02cfc73b5a.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20260410%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260410T013002Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=eedfd4114bde66f0ff8fe5e4d7a7274d9007b25deb40ee82a19427f29601e89b',
+			},{
+				url:'https://www.minio-api.aida.com.hk/aida-users/83/avatar/2b3d5756-ea29-4020-86a9-3b02cfc73b5a.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20260410%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260410T013002Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=eedfd4114bde66f0ff8fe5e4d7a7274d9007b25deb40ee82a19427f29601e89b',
+			},{
+				url:'https://www.minio-api.aida.com.hk/aida-users/83/avatar/2b3d5756-ea29-4020-86a9-3b02cfc73b5a.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20260410%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260410T013002Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=eedfd4114bde66f0ff8fe5e4d7a7274d9007b25deb40ee82a19427f29601e89b',
+			},{
+				url:'https://www.minio-api.aida.com.hk/aida-users/83/avatar/2b3d5756-ea29-4020-86a9-3b02cfc73b5a.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20260410%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260410T013002Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=eedfd4114bde66f0ff8fe5e4d7a7274d9007b25deb40ee82a19427f29601e89b',
+			},
+		],
+		type:'Series',
+		name:'Christmas',
+		sketchNum: 7,
+		date: 'today',
+		id:'1',
+	},
+])
+
+const selectCollectionItem = (item:any)=>{
+	emit('selectCollectionItem',item)
+}
+onMounted(()=>{
+})
+onUnmounted(()=>{
+})
+defineExpose({})
+</script>
+<template>
+	<div class="historyList">
+		<div class="list">
+			<div v-for="(item,index) in list" :key="index" class="item" @click="selectCollectionItem(item)">
+				<div class="imgList">
+					<div v-for="(img,index) in item.imgList" :key="index" class="img">
+						<img :src="img.url" alt="">
+					</div>
+				</div>
+				<div class="detail">
+					<div class="name">{{item.name}}</div>
+					<div class="bottom">
+						<div>{{item.sketchNum}} sketchs</div>
+						<div>{{item.date}}</div>
+					</div>
+				</div>
+				<div class="type" :class="item.type">
+					{{item.type}}
+				</div>
+			</div>
+		</div>
+		<div class="pagination">
+			<a-pagination v-model:current="current" :pageSize="6" :showSizeChanger="false" show-quick-jumper :total="100" show-less-items />
+		</div>
+	</div>
+</template>
+<style lang="less" scoped>
+	.historyList{
+		width: 100%;
+		height: 100%;
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+		position: relative;
+		justify-content: space-between;
+		align-items: center;
+		margin-top: 3rem;
+		> .list{
+			height: 100%;
+			overflow: hidden;
+			display: grid;
+			grid-template-columns: repeat(3, 1fr);
+			row-gap: 2.4rem;      /* 垂直间距 3px */
+			column-gap: 3.2rem;   /* 横向间距 2px */
+			align-content: start;
+			overflow-y: auto;
+			&::-webkit-scrollbar{
+				display: none;
+			}
+			> .item{
+				width: 42.6rem;
+				height: auto;
+				// height: 27.6rem;
+				border: 1.5px solid #C7C7C7;
+				position: relative;
+				overflow: hidden;
+				border-radius: 2rem;
+				cursor: pointer;
+				transition: all .3s;
+				> .imgList{
+					background-color: #eaeaea;
+					height: 19.2rem;
+					padding: 1rem 1.3rem;
+					display: flex;
+					gap: .4rem;
+					> .img{
+						width: 9.7rem;
+						height: 17.2rem;
+						border-radius: 1rem;
+						overflow: hidden;
+						> img{
+							object-fit: cover;
+							height: 100%;
+							width: 100%;
+						}
+					}
+				}
+				> .detail{
+					padding: 2rem 2.4rem;
+					> .name{
+						font-family: pingfang_heavy;
+						font-weight: 400;
+						font-size: 1.797rem;
+						line-height: 1;
+					}
+					> .bottom{
+						display: flex;
+						margin-top: .8rem;
+						justify-content: space-between;
+						> div{
+							font-size: 1.2rem;
+							font-family: pingfang_regular;
+							font-weight: 400;
+							font-size: 1.6rem;
+							line-height: 1;
+							color: #585858;
+						}
+						> div:nth-child(2){
+							color: #979797;
+						}
+					}
+				}
+				> .type{
+					width: 7.6rem;
+					height: 3rem;
+					border-radius: 2rem;
+					border: 1px solid #727070;
+					background: #7E7C7C;
+					font-weight: 500;
+					font-size: 1.4rem;
+					line-height: 150%;
+					color: #fff;
+					position: absolute;
+					top: .5rem;
+					right: .5rem;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					&.Series{
+
+					}
+					&.Single{
+						background-color: #ffffff;
+						color: #727070;
+					}
+				}
+				&:hover{
+					border: 1.5px solid #000;
+				}
+			}
+		}
+		> .pagination{
+			margin-top: 3rem;
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/views/SellerDashboard/MyListings/createSelect/index.vue b/src/views/SellerDashboard/MyListings/createSelect/index.vue
index 8b5b1502..c099a534 100644
--- a/src/views/SellerDashboard/MyListings/createSelect/index.vue
+++ b/src/views/SellerDashboard/MyListings/createSelect/index.vue
@@ -1,13 +1,25 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
 import sellerHeader from "../../seller-header.vue"
+import historyList from "./historyList.vue"
+import { useRouter } from "vue-router"
 
 //const props = defineProps({
 //})
 //const emit = defineEmits([
 //])
+const router = useRouter()
 let data = reactive({
 })
+const searchType = ref('all')
+const searchText = ref('')
+
+const historyListRef = ref(null)
+const handleSearch = () => {
+}
+const selectCollectionItem = (item:any) => {
+	router.push({path:'/home/seller/myListings/select/'+item.id})
+}
 onMounted(()=>{
 })
 onUnmounted(()=>{
@@ -26,7 +38,27 @@ const {} = toRefs(data);
 		>
 		</seller-header>
 		<div class="content">
-			1231222aaa
+			<div class="title">
+				<div class="left">
+					<div :class="{active:searchType == 'all'}" @click="searchType = 'all'">All</div>
+					<div :class="{active:searchType == 'series'}" @click="searchType = 'series'">Series Design</div>
+					<div :class="{active:searchType == 'single'}" @click="searchType = 'single'">Single Design</div>
+				</div>
+				<div class="right">
+					<div class="search_input flex flex-align-center">
+						<input
+							class="search_input_inner"
+							v-model="searchText"
+							:bordered="false"
+							@keydown.enter="handleSearch"
+							placeholder="123123"
+						/>
+						<!-- <SearchOutlined class="search_input_icon" @click="handleSearch" /> -->
+						<SvgIcon name="CSearch" size="20" class="search_input_icon" @click="handleSearch" />
+					</div>
+				</div>
+			</div>
+			<historyList ref="historyListRef" @selectCollectionItem="selectCollectionItem"></historyList>
 		</div>
 	</div>
 </template>
@@ -42,6 +74,71 @@ const {} = toRefs(data);
 			margin-top: 2rem;
 			flex: 1;
 			overflow: hidden;
+			padding: 2.4rem 3rem; 
+			background-color: #f9fafa;
+			border-radius: 2rem;
+			display: flex;
+			flex-direction: column;
+			> .title{
+				display: flex;
+				justify-content: space-between;
+				> .left{
+					display: flex;
+					align-items: center;
+					gap: 1.2rem;
+					> div{
+						min-width: 9rem;
+						padding: .4rem 2.6rem;
+						background-color: #fff;
+						border-radius: 4rem;
+						border: 1px solid #000000;
+						font-weight: 500;
+						font-size: 1.6rem;
+						line-height: 150%;
+						text-align: center;
+						cursor: pointer;
+						&:hover{
+							color: #fff;
+							background-color: #000;
+
+						}
+					}
+					> .active{
+						color: #fff;
+						background-color: #000;
+					}
+				}
+				> .right{
+					.search_input {
+						height: 3.2rem;
+						width: 27rem; // 默认宽度
+						background-color: #fff;
+						border: 1px solid #000;
+						border-radius: 3rem;
+						// column-gap: 3rem;
+						padding: 0 2rem;
+						.search_input_inner {
+							border: none;
+							height: 100%;
+							width: calc(100% - 2rem);
+							padding: .6rem 0;
+							font-size: 1.2rem;
+							&::placeholder {
+								font-size: 1.2rem;
+							}
+							&::-webkit-input-placeholder{
+								font-size: 1.2rem;
+							}
+						}
+						.search_input_icon {
+							font-size: 1.6rem;
+							color: #000;
+							width: initial;
+							height: initial;
+						}
+					}
+				}
+			}
 		}
 	}
 </style>
\ No newline at end of file
diff --git a/src/views/SellerDashboard/MyListings/createSelectItem/index.vue b/src/views/SellerDashboard/MyListings/createSelectItem/index.vue
index b9e3cd66..4cb6d011 100644
--- a/src/views/SellerDashboard/MyListings/createSelectItem/index.vue
+++ b/src/views/SellerDashboard/MyListings/createSelectItem/index.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
 import sellerHeader from "../../seller-header.vue"
+import { VueDraggable } from "vue-draggable-plus"
+import selectMenu from '@/component/modules/selectMenu.vue'
 
 //const props = defineProps({
 //})
@@ -8,7 +10,101 @@ import sellerHeader from "../../seller-header.vue"
 //])
 let data = reactive({
 })
+const domSize = ref('Small')
+const domSizeList = ref([
+	{
+		label:'Small',
+		value:'Small',
+	},
+	{
+		label:'Medium',
+		value:'Medium',
+	},
+	{
+		label:'Large',
+		value:'Large',
+	},
+])
+const list = ref([
+	{ id: "1" },
+	{ id: "2" },
+	{ id: "3" },
+	{ id: "4" },
+	{ id: "5" },
+	{ id: "6" },
+	{ id: "7" },
+	{ id: "8" },
+	{ id: "9" },
+	{ id: "10" }
+])
+const chooseList = ref([])
+const chooseItem = (item:any)=>{	
+	chooseList.value.push(item)
+}
+
+const next = ()=>{
+	if(chooseList.value.length == 0)return
+}
+
+const config = ref({
+	"data-container-type": "root",
+	"data-parent-id": "null",
+	animation: 250,
+	handle: ".item", // 可拖动的元素
+	"ghost-class": "ghost", // 拖动时的类名
+	"chosen-class": "chosen", // 选中时的类名
+	"drag-class": "drag", // 拖动时的类名
+	"swap-threshold": 0.5,
+	"empty-insert-threshold": 5,
+	"force-fallback": false,
+	"fallback-tolerance": 3,
+	"scroll-sensitivity": 100,
+	"scroll-speed": 10,
+	onEnd: (e) => {}
+})
+
+
+let resizeObserver = null as any
+
+const gap = ref({
+	Small: '16px',
+	Medium: '24px',	
+	Large: '30px',
+})
+//根据宽度设置列表宽度
+let upDataDomWidthTime = null as any
+const listingsBoxRef = ref(null) as any
+const setDomSize = (width: number)=>{
+	if(!listingsBoxRef.value)return
+	let listDom = listingsBoxRef.value.querySelector('.list')
+	let listItemDom = listDom.querySelector('.item')
+	let offsetWidth = listItemDom.getBoundingClientRect().width
+	let lineNum = Math.floor(width / offsetWidth)
+	let itemNum = Math.floor((width - (lineNum - 1) * parseInt(gap.value[domSize.value])) / offsetWidth)
+	listDom.style.maxWidth = ((itemNum - 1) * parseInt(gap.value[domSize.value]) + itemNum * (offsetWidth)) + 'px'
+}
+
+const changeDomSize = ()=>{
+	setTimeout(()=>{
+		setDomSize(listingsBoxRef.value.clientWidth)
+	},350)
+}
 onMounted(()=>{
+	// 创建观察器
+	nextTick(()=>{
+		resizeObserver = new ResizeObserver((entries) => {
+			for (const entry of entries) {
+				// 获取元素尺寸
+				const width = entry.contentRect.width
+				if(upDataDomWidthTime)clearTimeout(upDataDomWidthTime)
+				upDataDomWidthTime = setTimeout(()=>{
+					setDomSize(width)
+				},200)
+			}
+		})
+		// 开始监听
+		if(resizeObserver)resizeObserver.observe(listingsBoxRef.value)
+	})
 })
 onUnmounted(()=>{
 })
@@ -25,9 +121,95 @@ const {} = toRefs(data);
 				{title:'Select Sketch', name: 'myListingsSelectItem' }
 			]"
 		>
+			<template #right>
+				<div class="header-right">
+					<div class="chooseNum">
+						{{ chooseList.length }} sketches selected
+					</div>
+					<div class="button" @click="next">
+						<span>Next</span>
+						<div class="icon">
+							<i class="fi fi-rr-arrow-small-right"></i>
+						</div>
+					</div>
+				</div>
+			</template>
 		</seller-header>
-		<div class="content">
-			1231222aaa
+		<div class="content" ref="listingsBoxRef">
+			<div class="title">
+				<div class="left">
+						<i class="fi fi-rs-comments"></i>
+						<span>Active Listings</span>
+				</div>
+				<div class="right">
+					<div class="generalModel_state">
+						<div>
+							<selectMenu 
+								:selectList="domSizeList" 
+								@change="changeDomSize" 
+								:isBtnOpen='true'
+								:style="{
+									'border-radius':'0rem',
+									'border':'none',
+									'font-weight': '900',
+									'border-right':'2px solid rgba(0,0,0,.2)',
+									'line-height': '3rem',
+									'height': '3rem',
+									'background': 'rgba(0,0,0,0)',
+								}"
+								v-model:select="domSize"
+								>
+								<template v-slot:btnText>
+									{{ $t('Header.Filter') }}
+								</template>
+							</selectMenu>
+						</div>
+						<div>
+							<selectMenu 
+								:selectList="domSizeList" 
+								@change="changeDomSize" 
+								:isBtnOpen='true'
+								:style="{
+									'border-radius':'0rem',
+									'border':'none',
+									'font-weight': '900',
+									'line-height': '3rem',
+									'height': '3rem',
+									'background': 'rgba(0,0,0,0)',
+								}"
+								v-model:select="domSize"
+								>
+								<template v-slot:btnText>
+									{{ $t('Header.Size') }}
+								</template>
+							</selectMenu>
+						</div>
+					</div>
+				</div>
+			</div>
+			<VueDraggable
+				v-model="list"
+				class="list"
+				:class="domSize"
+				v-bind="config"
+				:style="{gap: gap[domSize] || '1.6rem'}"
+				:group="{
+					name: 'sortable',
+					pull: false,
+					put: true
+				}"
+			>
+				<div v-for="v in list" :key="v.id" 
+					:draging="true" 
+					class="item" 
+					@click="chooseItem(v)"
+					:class="{'active':chooseList.some(item => item.id === v.id)}"
+				>
+					<div class="choose">
+						<i class="fi fi-rr-check"></i>
+					</div>
+				</div>
+			</VueDraggable>
 		</div>
 	</div>
 </template>
@@ -39,10 +221,125 @@ const {} = toRefs(data);
 		position: relative;
 		display: flex;
 		flex-direction: column;
+		.header-right{
+			display: flex;
+			.chooseNum{
+				font-family: pingfang_regular;
+				font-weight: 400;
+				font-size: 1.6rem;
+				line-height: 140%;
+				margin-right: 2rem;
+				line-height: 6rem;
+			}
+			.button {
+				width: 12.3rem;
+				height: 6rem;
+				border-radius: 4rem;
+				display: flex;
+				border: 1.5px solid #000000;
+				background-color: #000;
+				color: #fff;
+				transition: all .3s;
+				gap: .8rem;
+				align-items: center;
+				justify-content: center;
+				font-size: 1.6rem;
+				cursor: pointer;
+				i{
+					color: #fff;
+					display: flex;
+					font-size: 1.6rem;
+				}
+				&:hover{
+					background-color: #fff;
+					color: #000;
+					i{
+						color: #000;
+					}
+				}
+			}
+		}
 		> .content {
 			margin-top: 2rem;
 			flex: 1;
 			overflow: hidden;
+			padding: 2.4rem 3rem; 
+			background-color: #f9fafa;
+			border-radius: 2rem;
+			display: flex;
+			flex-direction: column;
+			> .title{
+				display: flex;
+					justify-content: space-between;
+					align-items: center;
+					margin-bottom: 3rem;
+				> .left{
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					font-family: pingfang_heavy;
+					font-weight: 400;
+					font-size: 1.8rem;
+					line-height: 130%;
+					letter-spacing: 0%;
+					gap: 1.2rem;
+					> i{
+						display: flex;
+						justify-content: space-between;
+						align-items: center;
+						font-size: 2.4rem;
+					}
+				}
+			}
+			.list{
+				display: flex;
+				flex: 1;
+				flex-wrap: wrap;
+				margin: 0 auto;
+				overflow-y: auto;
+				align-content: flex-start;
+				&::-webkit-scrollbar {
+					display: none;
+				}
+				&.Small{
+					--itemWidth: 17rem;
+					--itemHeight: 26.1rem;
+				}
+				> .item{
+					width: var(--itemWidth);
+					height: var(--itemHeight);
+					border-radius: 2rem;
+					border: 1.5px solid #C7C7C7;
+					// transition: all .3s;
+					position: relative;
+					> .choose{
+						display: flex;
+						width: 2.4rem;
+						height: 2.4rem;
+						position: absolute;
+						background-color: #000;
+						border-radius: 50%;
+						display: none;
+						justify-content: center;
+						align-items: center;
+						top: 1.2rem;
+						right: .9rem;
+						> i{
+							color: #fff;
+							display: flex;
+						}
+					}
+					&.active{
+						border: 1.5px solid #000;
+						> .choose{
+							display: flex;
+						}
+					}
+					&:hover{
+						border: 1.5px solid #000;
+					}
+				}
+			}
 		}
 	}
 </style>
\ No newline at end of file
diff --git a/src/views/SellerDashboard/MyListings/main/content.vue b/src/views/SellerDashboard/MyListings/main/content.vue
index 2f3ad05f..63b8f9cd 100644
--- a/src/views/SellerDashboard/MyListings/main/content.vue
+++ b/src/views/SellerDashboard/MyListings/main/content.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
 import { VueDraggable } from "vue-draggable-plus"
+import contentItem from "./contentItem.vue"
+import selectMenu from '@/component/modules/selectMenu.vue'
+
 
 //const props = defineProps({
 //})
@@ -54,9 +57,75 @@ const config = ref({
 	"scroll-speed": 10,
 	onEnd: (e) => {}
 })
+const domSize = ref('Small')
+const domSizeList = ref([
+	{
+		label:'Small',
+		value:'Small',
+	},
+	{
+		label:'Medium',
+		value:'Medium',
+	},
+	{
+		label:'Large',
+		value:'Large',
+	},
+])
+const listingsBoxRef = ref(null) as any
+let resizeObserver = null as any
+
+const gap = ref({
+	Small: '16px',
+	Medium: '24px',	
+	Large: '30px',
+})
+
+
+//根据宽度设置列表宽度
+let upDataDomWidthTime = null
+const setDomSize = (width: number)=>{
+	if(!listingsBoxRef.value)return
+	let listDom = listingsBoxRef.value.querySelector('.list')
+	let listItemDom = listDom.querySelector('.item')
+	let offsetWidth = listItemDom.getBoundingClientRect().width
+	let lineNum = Math.floor(width / offsetWidth)
+	let itemNum = Math.floor((width - (lineNum - 1) * parseInt(gap.value[domSize.value])) / offsetWidth)
+	listDom.style.maxWidth = ((itemNum - 1) * parseInt(gap.value[domSize.value]) + itemNum * (offsetWidth)) + 'px'
+}
+
+const changeDomSize = ()=>{
+	setTimeout(()=>{
+		setDomSize(listingsBoxRef.value.clientWidth)
+	},350)
+}
+
+const unfoldDrafits = ()=>{
+	data.showDrafts = !data.showDrafts
+}
 onMounted(()=>{
+	// 创建观察器
+	nextTick(()=>{
+		resizeObserver = new ResizeObserver((entries) => {
+			for (const entry of entries) {
+				// 获取元素尺寸
+				const width = entry.contentRect.width
+				const height = entry.contentRect.height
+				const borderBoxSize = entry.borderBoxSize[0] // 包含边框
+				const contentBoxSize = entry.contentBoxSize[0] // 内容区域
+				if(upDataDomWidthTime)clearTimeout(upDataDomWidthTime)
+				upDataDomWidthTime = setTimeout(()=>{
+					setDomSize(width)
+				},200)
+			}
+		})
+		// 开始监听
+		if(resizeObserver)resizeObserver.observe(listingsBoxRef.value)
+	})
 })
 onUnmounted(()=>{
+	// 停止监听
+	if(listingsBoxRef?.value)resizeObserver?.unobserve(listingsBoxRef?.value)
 })
 defineExpose({})
 const { showDrafts } = toRefs(data);
@@ -64,19 +133,62 @@ const { showDrafts } = toRefs(data);
 <template>
 	<div class="listings">
 		<div class="listingsBox listingsBox1">
-			<div class="box">
+			<div class="box" :class="domSize" ref="listingsBoxRef">
 				<div class="title">
 					<div class="left">
 						<i class="fi fi-rs-comments"></i>
 						<span>Active Listings</span>
 					</div>
 					<div class="right">
-
+						<div class="generalModel_state">
+							<div>
+								<selectMenu 
+									:selectList="domSizeList" 
+									@change="changeDomSize" 
+									:isBtnOpen='true'
+									:style="{
+										'border-radius':'0rem',
+										'border':'none',
+										'font-weight': '900',
+										'border-right':'2px solid rgba(0,0,0,.2)',
+										'line-height': '3rem',
+										'height': '3rem',
+										'background': 'rgba(0,0,0,0)',
+									}"
+									v-model:select="domSize"
+									>
+									<template v-slot:btnText>
+										{{ $t('Header.Filter') }}
+									</template>
+								</selectMenu>
+							</div>
+							<div>
+								<selectMenu 
+									:selectList="domSizeList" 
+									@change="changeDomSize" 
+									:isBtnOpen='true'
+									:style="{
+										'border-radius':'0rem',
+										'border':'none',
+										'font-weight': '900',
+										'line-height': '3rem',
+										'height': '3rem',
+										'background': 'rgba(0,0,0,0)',
+									}"
+									v-model:select="domSize"
+									>
+									<template v-slot:btnText>
+										{{ $t('Header.Size') }}
+									</template>
+								</selectMenu>
+							</div>
+						</div>
 					</div>
 				</div>
 				<VueDraggable
 					v-model="list"
 					class="list"
+					:style="{gap: gap[domSize] || '1.6rem'}"
 					v-bind="config"
 					:group="{
 						name: 'sortable',
@@ -84,20 +196,25 @@ const { showDrafts } = toRefs(data);
 						put: true
 					}"
 				>
-					<div class="item" v-for="v in list" :key="v.id" :draging="true">
-						{{ v.id }}
-					</div>
+					
+					<contentItem v-for="v in list" :key="v.id" type="listings" :domSize="domSize"/>
 				</VueDraggable>
 			</div>
-			<div class="openOrCloseDrafts" :class="{'active': showDrafts}" @click="showDrafts = !showDrafts">
+			<div class="openOrCloseDrafts" :class="{'active': showDrafts}" @click="unfoldDrafits">
 				<span class="icon iconfont icon-xiala"></span>
 			</div>
 		</div>
-		<!-- <div class="listingsBox listingsBox2" :class="{'active': showDrafts}">
-			<div class="box">
+		<div class="listingsBox listingsBox2" :class="{'active': showDrafts}">
+			<div class="box Small">
+				<div class="title">
+					<div class="left">
+						<i class="fi fi-rs-comments"></i>
+						<span>Drafts</span>
+					</div>
+				</div>
 				<VueDraggable
 					v-model="list2"
-					class="list"
+					class="list2"
 					v-bind="config"
 					:group="{
 						name: 'sortable',
@@ -105,12 +222,10 @@ const { showDrafts } = toRefs(data);
 						put: true
 					}"
 				>
-					<div class="item" v-for="v in list" :key="v.id" :draging="true">
-						{{ v.id }}
-					</div>
+					<contentItem v-for="v in list2" :key="v.id" domSize="Small" type="drafts"/>
 				</VueDraggable>
 			</div>
-		</div> -->
+		</div>
 	</div>
 </template>
 <style lang="less" scoped>
@@ -123,16 +238,19 @@ const { showDrafts } = toRefs(data);
 		.listingsBox{
 			background-color: #f9fafa;
 			border-radius: 2rem;
-			flex: 1;
 			position: relative;
 			// overflow: hidden;
 			display: flex;
+			transition: all .3s;
 			.box{
 				width: 100%;
-				padding: 2.4rem 4rem;
+				padding: 2.4rem 0;
 				padding-bottom: 0;
 				flex-direction: column;
+				overflow: hidden;
+				display: flex;
 				flex: 1;
+				padding: 2.4rem 4rem;
 				> .title{
 					display: flex;
 					justify-content: space-between;
@@ -148,6 +266,7 @@ const { showDrafts } = toRefs(data);
 						line-height: 130%;
 						letter-spacing: 0%;
 						gap: 1.2rem;
+						align-content: flex-start;
 						> i{
 							display: flex;
 							justify-content: space-between;
@@ -156,34 +275,30 @@ const { showDrafts } = toRefs(data);
 						}
 					}
 				}
-				.list{
+				.list2{
+					gap: 1.6rem;
+					.item{
+						width: 19.2rem;
+					}
+				}
+				.list,.list2{
 					display: flex;
 					flex-wrap: wrap;
-					gap: 20px;
-					.item{
-						width: 197px;
-						height: 249px;
-						border-radius: 20px;
-						border: 1.5px solid #C7C7C7;
-						&:hover{
-							border: 2px solid #000000;
-						}
+					// flex: 1;
+					margin: auto;
+					overflow: auto;
+					&::-webkit-scrollbar {
+						display: none;
 					}
 				}
 			}
 		}
 		.listingsBox1{
+			width: 100%;
 			flex: 1;
-			.box{
-				.list{
-					justify-content: center;
-				}
-			}
-
 		}
 		.listingsBox2{
 			width: 48.8rem;
-			transition: all .3s;
 			overflow: hidden;
 			&.active{
 				width: 0;
diff --git a/src/views/SellerDashboard/MyListings/main/contentItem.vue b/src/views/SellerDashboard/MyListings/main/contentItem.vue
new file mode 100644
index 00000000..22635422
--- /dev/null
+++ b/src/views/SellerDashboard/MyListings/main/contentItem.vue
@@ -0,0 +1,216 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+const props = defineProps({
+	domSize: {
+		type: String,
+		default: 'Small'
+	},
+	type: {
+		type: String,
+		default: 'listings'
+	}
+})
+//const emit = defineEmits([
+//])
+let data = reactive({
+})
+onMounted(()=>{
+})
+onUnmounted(()=>{
+})
+defineExpose({})
+const {} = toRefs(data);
+</script>
+<template>
+	<div class="item" :draging="true" :class="domSize">
+		<div class="imgBox">
+			<img src="" alt="">
+			<div class="maskBtn">
+				<div>
+					<svgIcon name="seller-edit" :size="domSize == 'Small'?32:domSize == 'Medium'?40:48" />
+					<div>Edit</div>
+				</div>
+				<div v-if="type == 'listings'">
+					<svgIcon name="seller-draft" :size="domSize == 'Small'?32:domSize == 'Medium'?40:48" />
+					<div>Draft</div>
+				</div>
+				<div v-else-if="type == 'drafts'">
+					<svgIcon name="seller-share" :size="domSize == 'Small'?32:domSize == 'Medium'?40:48" />
+					<div>Publish</div>
+				</div>
+			</div>
+		</div>
+		<div class="detail">
+			<div class="left">
+				<div class="name">item name</div>
+				<div class="price">$1123</div>
+			</div>
+			<div class="right">
+				<div class="detailItem" v-if="type == 'listings'">
+					<div class="shopping1">
+						<i class="fi fi-rr-shopping-bag-add"></i>
+					</div>
+					<span>123</span>
+				</div>
+				<div class="detailItem" v-if="type == 'listings'">
+					<div class="eye1">
+						<i class="fi fi-rs-eye"></i>
+					</div>
+					<span>123</span>
+				</div>
+				<div class="detailItem drafts" v-if="type == 'drafts'">
+					<div class="">
+						<i class="fi fi-rr-trash"></i>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+<style lang="less" scoped>
+	.item{
+		// height: 30.2rem;
+		&.Small{
+			--itemWidth: 19.7rem;
+			--itemImgHeight: 24.9rem;
+			--maskBtnGap: .8rem;
+			--maskBtnWidth: 6rem;
+			--maskBtnFS: 1.6rem;
+			--detailPadding: .8rem 1.2rem;
+			--detailLeftNameSize: 1.4rem;
+			--detailLeftPriceSize: 1.2rem;
+			--detailRightGap: .8rem;
+			--detailRightItemGap: .4rem;
+			--detailRightItemIcon: 1.6rem;
+			--detailRightItemDraftsIcon: 2rem;
+		}
+		&.Medium{
+			--itemWidth: 25.4rem;
+			--itemImgHeight: 32.2rem;
+			--maskBtnGap: 1rem;
+			--maskBtnWidth: 7.6rem;
+			--maskBtnFS: 2.07rem;
+			--detailPadding: 1.2rem 1.4rem;
+			--detailLeftNameSize: 1.6rem;
+			--detailLeftPriceSize: 1.4rem;
+			--detailRightGap: 1rem;
+			--detailRightItemGap: .4rem;
+			--detailRightItemIcon: 2rem;
+			--detailRightItemDraftsIcon: 2rem;
+		}
+		&.Large{
+			--itemWidth: 31.4rem;
+			--itemImgHeight: 39.8rem;
+			--maskBtnGap: 1.2rem;
+			--maskBtnWidth: 7.6rem;
+			--maskBtnFS: 2.56rem;
+			--detailPadding: 1.2rem 1.6rem;
+			--detailLeftNameSize: 1.98rem;
+			--detailLeftPriceSize: 1.73rem;
+			--detailRightGap: 1.2rem;
+			--detailRightItemGap: .4rem;
+			--detailRightItemIcon: 2.6rem;
+			--detailRightItemDraftsIcon: 2rem;
+		}
+		width: var(--itemWidth);
+		border-radius: 2rem;
+		border: 1.5px solid #C7C7C7;
+		overflow: hidden;
+		.imgBox{
+			position: relative;
+			height: var(--itemImgHeight);
+			width: 100%;
+			> .maskBtn{
+				position: absolute;
+				width: 100%;
+				height: 100%;
+				background: #00000066;
+				opacity: 0;
+				transition: all .3s;
+				top: 0;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				gap: var(--maskBtnGap);
+				> div{
+					font-family: pingfang_bold;
+					font-weight: 400;
+					font-size: var(--maskBtnFS);
+					line-height: 150%;
+					color: #fff;
+					cursor: pointer;
+					width: var(--maskBtnWidth);
+					text-align: center;
+					> div{
+						margin-top: .8rem;
+					}
+				}
+			}
+		}
+		.detail{
+			padding: var(--detailPadding);
+			display: flex;
+			justify-content: space-between;
+			--rightColor: #979797;
+			.left{
+				gap: var(--detailRightItemGap);
+				.name{
+					font-weight: 500;
+					font-size: var(--detailLeftNameSize);
+					line-height: 150%;
+				}
+				.price{
+					font-family: pingfang_regular;
+					font-weight: 400;
+					font-size: var(--detailLeftPriceSize);
+					line-height: 150%;
+				}
+			}
+			.right{
+				display: flex;
+				gap: var(--detailRightGap);
+				.detailItem{
+					display: flex;
+					gap: var(--detailRightItemGap);
+					flex-direction: column;
+					justify-content: space-between;
+					> div{
+						color: var(--rightColor);
+						display: flex;
+						justify-content: center;
+						> i{
+							font-size: var(--detailRightItemIcon);
+							display: flex;
+						}
+					}
+					> span{
+						color: var(--rightColor);
+						font-family: pingfang_regular;
+						font-weight: 400;
+						font-size: var(--detailLeftPriceSize);
+						line-height: 150%;
+					}
+					&.drafts{
+						justify-content: center;
+						> div{
+							> i{
+								font-size: var(--detailRightItemDraftsIcon);
+							}
+						}
+					}
+				}
+			}
+		}
+		&:hover{
+			border: 1.5px solid #000000;
+			.imgBox{
+				> .maskBtn{
+					opacity: 1;
+				}
+			}
+			.detail{
+				--rightColor: #000000;
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/views/SellerDashboard/MyListings/main/index.vue b/src/views/SellerDashboard/MyListings/main/index.vue
index f3e06a88..aa7dc00f 100644
--- a/src/views/SellerDashboard/MyListings/main/index.vue
+++ b/src/views/SellerDashboard/MyListings/main/index.vue
@@ -2,6 +2,7 @@
 import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
 import sellerHeader from "../../seller-header.vue"
 import sellerContent from "./content.vue"
+import myEvent from "@/tool/myEvents.js"
 
 //const props = defineProps({
 //})
@@ -9,6 +10,9 @@ import sellerContent from "./content.vue"
 //])
 let data = reactive({
 })
+const newListing = ()=>{
+	myEvent.emit('newListing')
+}
 onMounted(()=>{
 })
 onUnmounted(()=>{
@@ -23,7 +27,7 @@ const {} = toRefs(data);
 			tip="Active listings and unpublished inventory."
 		>
 			<template #right>
-				<div class="button">
+				<div class="button" @click="newListing">
 					<span>New Listing</span>
 					<div class="icon">
 						<i class="fi fi-br-plus"></i>
diff --git a/src/views/SellerDashboard/index.vue b/src/views/SellerDashboard/index.vue
index 743b1e59..8e77457a 100644
--- a/src/views/SellerDashboard/index.vue
+++ b/src/views/SellerDashboard/index.vue
@@ -21,6 +21,7 @@
 	import { ref, computed } from "vue"
 	import { useRoute, useRouter } from "vue-router"
 	import toolTipBox from "./toolTipBox.vue"
+	import myEvent from "@/tool/myEvents.js"
 	const route = useRoute()
 	const router = useRouter()
 	const visible = ref(false)
@@ -51,6 +52,14 @@
 		if (path === activePath.value) return
 		router.push(path)
 	}
+	onMounted(()=>{
+		myEvent.add('newListing',()=>{
+			visible.value = true
+		})
+	})
+	onUnmounted(()=>{
+		myEvent.remove('newListing')
+	})
 </script>
 <style scoped lang="less">
 	.seller-dashboard-index {
diff --git a/src/views/SellerDashboard/toolTipBox.vue b/src/views/SellerDashboard/toolTipBox.vue
index 9c0911b6..250b2828 100644
--- a/src/views/SellerDashboard/toolTipBox.vue
+++ b/src/views/SellerDashboard/toolTipBox.vue
@@ -4,7 +4,7 @@ import sellerToolTipImg1 from '@/assets/images/seller/sellerToolTip-1.png'
 import sellerToolTipImg2 from '@/assets/images/seller/sellerToolTip-2.png'
 import sellerToolTipImg3 from '@/assets/images/seller/sellerToolTip-3.png'
 import { useI18n } from 'vue-i18n'
-
+import { useRouter } from 'vue-router'
 const props = defineProps({
 	visible: {
 		type: Boolean,
@@ -14,9 +14,9 @@ const props = defineProps({
 const emit = defineEmits([
 	'update:visible','close'
 ])
+const router = useRouter()
 const {t} = useI18n()
 let data = reactive({
-	visible: props.visible,
 	stepList: [
 		{
 			img: sellerToolTipImg1,
@@ -44,6 +44,12 @@ const cleardata = ()=>{
 	emit('close', data.showAgain)
 }
 
+const getStarted = ()=>{
+	emit('update:visible', false)
+	router.push({path:'/home/seller/myListings/select'})
+}
+
+
 onMounted(()=>{
 })
 onUnmounted(()=>{
@@ -55,7 +61,7 @@ const { showAgain } = toRefs(data);
     <div ref="toolTipBoxRef" class="toolTipBox" v-if="visible">
 		<a-modal
 			class="collection generalModel"
-			v-model:visible="data.visible"
+			v-model:visible="props.visible"
 			:footer="null"
 			:get-container="() => toolTipBoxRef"
 			width="126.2rem"
@@ -105,7 +111,7 @@ const { showAgain } = toRefs(data);
 						{{t('SellerToolTip.showAgain')}}
 					</label>
 				</div>
-				<div class="gallery_btn" @click="cleardata()">
+				<div class="gallery_btn" @click="getStarted">
 					{{t('SellerToolTip.GetStarted')}}
 					<i class="fi fi-rr-arrow-small-right"></i>
 				</div>
@@ -116,9 +122,9 @@ const { showAgain } = toRefs(data);
 </template>
 <style lang="less" scoped>
 	.toolTipBox{
-		width: 100%;
-		height: 100%;
-		position: relative;
+		// width: 100%;
+		// height: 100%;
+		// position: relative;
 		:deep(.generalModel){
 			height: auto;
 			.ant-modal-body{