diff --git a/src/assets/icons/seller/arrow_right_solid.svg b/src/assets/icons/seller/arrow_right_solid.svg
new file mode 100644
index 00000000..7a292dc2
--- /dev/null
+++ b/src/assets/icons/seller/arrow_right_solid.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 4.46552C9.66667 4.85042 9.66667 5.81267 9 6.19757L1.5 10.5277C0.833332 10.9126 -1.90735e-06 10.4315 -1.90735e-06 9.66167V1.00142C-1.90735e-06 0.231615 0.833331 -0.24951 1.5 0.13539L9 4.46552Z" fill="#999999"/>
+</svg>
diff --git a/src/assets/icons/seller/back.svg b/src/assets/icons/seller/back.svg
new file mode 100644
index 00000000..3c6986fc
--- /dev/null
+++ b/src/assets/icons/seller/back.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="24" viewBox="0 0 12 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.3489 24C10.2173 24.0008 10.0869 23.9755 9.96503 23.9258C9.84319 23.876 9.73238 23.8027 9.63894 23.71L1.46894 15.54C1.00331 15.0755 0.633877 14.5238 0.381813 13.9163C0.129748 13.3089 0 12.6577 0 12C0 11.3423 0.129748 10.6911 0.381813 10.0837C0.633877 9.47621 1.00331 8.92446 1.46894 8.46L9.63894 0.290002C9.73218 0.196764 9.84287 0.122803 9.96469 0.0723426C10.0865 0.0218822 10.2171 -0.00408935 10.3489 -0.00408936C10.4808 -0.00408936 10.6114 0.0218822 10.7332 0.0723426C10.855 0.122803 10.9657 0.196764 11.0589 0.290002C11.1522 0.383241 11.2261 0.493931 11.2766 0.615753C11.3271 0.737575 11.353 0.868143 11.353 1C11.353 1.13186 11.3271 1.26243 11.2766 1.38425C11.2261 1.50607 11.1522 1.61676 11.0589 1.71L2.88894 9.88C2.32714 10.4425 2.01158 11.205 2.01158 12C2.01158 12.795 2.32714 13.5575 2.88894 14.12L11.0589 22.29C11.1527 22.383 11.2271 22.4936 11.2778 22.6154C11.3286 22.7373 11.3547 22.868 11.3547 23C11.3547 23.132 11.3286 23.2627 11.2778 23.3846C11.2271 23.5064 11.1527 23.617 11.0589 23.71C10.9655 23.8027 10.8547 23.876 10.7328 23.9258C10.611 23.9755 10.4805 24.0008 10.3489 24Z" fill="black"/>
+</svg>
diff --git a/src/assets/images/seller/success-0.png b/src/assets/images/seller/success-0.png
new file mode 100644
index 00000000..b0ba1d98
Binary files /dev/null and b/src/assets/images/seller/success-0.png differ
diff --git a/src/assets/images/seller/success-1.png b/src/assets/images/seller/success-1.png
new file mode 100644
index 00000000..24128448
Binary files /dev/null and b/src/assets/images/seller/success-1.png differ
diff --git a/src/lang/cn.ts b/src/lang/cn.ts
index 9795b4b1..14ee7dc1 100644
--- a/src/lang/cn.ts
+++ b/src/lang/cn.ts
@@ -24,6 +24,8 @@ export default {
     SubscribeNow: '立即订阅',
     TaskList: '任务列表',
     ViewOrders: '查询订单',
+    BecomeSeller: '成为卖家',
+    SellerDashboard: '卖家中心',
     toolsToProduct: '转产品图',
     toolsRelight: '产品图编辑',
     toolsToTransferPose: '产品图视频',
diff --git a/src/lang/en.ts b/src/lang/en.ts
index 8cd19f8b..2b243faf 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -24,6 +24,8 @@ export default {
 		SubscribeNow: 'Subscribe now',
 		TaskList: 'Task List',
 		ViewOrders: 'View Orders',
+		BecomeSeller: 'Become a Seller',
+		SellerDashboard: 'Seller Dashboard',
 		toolsToProduct: 'To product image',
 		toolsRelight: 'Edit product image',
 		toolsToTransferPose: 'To product video',
diff --git a/src/router/index.ts b/src/router/index.ts
index 4a47bb56..1be69976 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -174,7 +174,7 @@ const routes: Array<RouteRecordRaw> = [
         path: "becomeSeller",
         name: "becomeSeller",
         meta: { enter: "all" },
-        component: () => import("@/views/SellerDashboard/becomeSeller.vue"),
+        component: () => import("@/views/SellerDashboard/BecomeSeller/index.vue"),
 	  },
 	  {
         path: "seller",
diff --git a/src/views/HomeMain.vue b/src/views/HomeMain.vue
index 253d9456..319fe42b 100644
--- a/src/views/HomeMain.vue
+++ b/src/views/HomeMain.vue
@@ -375,11 +375,11 @@
                 </div>
                 <div class="select_item" @click="onBecomeSeller">
                   <span class="icon"><svg-icon name="seller-sellerIndex" /></span>
-                  <span class="select_item_des">Become a Seller</span>
+                  <span class="select_item_des">{{ $t('Header.BecomeSeller') }}</span>
                 </div>
                 <div class="select_item" @click="onSellerDashboard">
                   <span class="icon"><svg-icon name="seller-sellerIndex" /></span>
-                  <span class="select_item_des">Seller Dashboard</span>
+                  <span class="select_item_des">{{ $t('Header.SellerDashboard') }}</span>
 				  <a-badge :dot="true"></a-badge>
                 </div>
                 <router-link
diff --git a/src/views/SellerDashboard/BecomeSeller/index.vue b/src/views/SellerDashboard/BecomeSeller/index.vue
new file mode 100644
index 00000000..e0b156a2
--- /dev/null
+++ b/src/views/SellerDashboard/BecomeSeller/index.vue
@@ -0,0 +1,37 @@
+<template>
+	<div class="become-seller">
+		<seller-header
+			title="Apply to Become a Seller"
+			tip="Join the Stylish Parade and start selling your design work"
+		/>
+		<div class="content">
+			<sellerReview v-if="isSubmit"></sellerReview>
+			<sellerReview v-else></sellerReview>
+		</div>
+	</div>
+</template>
+
+<script setup>
+	import { ref, computed } from "vue"
+	import sellerHeader from "../seller-header.vue"
+	import sellerReview from "./sellerReview.vue"
+	import { useRoute, useRouter } from "vue-router"
+	const route = useRoute()
+	const router = useRouter()
+	const isSubmit = ref(false)
+</script>
+<style scoped lang="less">
+	.become-seller {
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		> .content {
+			margin-top: 4rem;
+			flex: 1;
+			overflow: hidden;
+		}
+	}
+</style>
diff --git a/src/views/SellerDashboard/BecomeSeller/sellerReview.vue b/src/views/SellerDashboard/BecomeSeller/sellerReview.vue
new file mode 100644
index 00000000..05e269f7
--- /dev/null
+++ b/src/views/SellerDashboard/BecomeSeller/sellerReview.vue
@@ -0,0 +1,126 @@
+<template>
+	<div class="seller-review">
+		<img class="success" src="@/assets/images/seller/success-1.png" />
+		<div class="title">Application Submitted</div>
+		<div class="tip">
+			Our team will review your application and get back to you within 1–3 business days.
+			You'll receive a notification in your email once a decision has been made.
+		</div>
+		<div class="step-list">
+			<div v-for="v in list" :key="v.title" class="step-item">
+				<img v-show="!v.active" src="@/assets/images/seller/success-0.png" />
+				<img v-show="v.active" src="@/assets/images/seller/success-1.png" />
+				<div class="content">
+					<div class="title">{{ v.title }}</div>
+					<div class="tip">{{ v.tip }}</div>
+				</div>
+			</div>
+		</div>
+		<button class="home-btn" @click="onBackToHome">Back to Homepage</button>
+	</div>
+</template>
+
+<script setup>
+	import { ref, computed } from "vue"
+	import { useRoute, useRouter } from "vue-router"
+	const route = useRoute()
+	const router = useRouter()
+	const list = ref([
+		{
+			title: "Step 1: Submit Application",
+			tip: "Fill out the seller information form and agree to our terms",
+			active: true
+		},
+		{
+			title: "Step 2: Review & Verification",
+			tip: "Our team will review your application (typically 1-3 business days)",
+			active: false
+		},
+		{
+			title: "Step 3: Start Selling",
+			tip: "Once approved, access your seller dashboard and start listing products ",
+			active: false
+		}
+	])
+	const onBackToHome = () => {
+		router.push({ name: "home" })
+	}
+</script>
+<style scoped lang="less">
+	.seller-review {
+		margin: 0 auto;
+		width: 60rem;
+		height: 90%;
+		overflow-y: auto;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		gap: 2.4rem;
+		> .success {
+			width: 10rem;
+			height: 10rem;
+			padding: 1.2rem;
+		}
+		> .title {
+			font-size: 2.2rem;
+			line-height: 130%;
+			text-align: center;
+			color: #000;
+		}
+		> .tip {
+			font-family: pingfang_medium;
+			font-size: 1.8rem;
+			line-height: 170%;
+			text-align: center;
+			color: #585858;
+		}
+		> .step-list {
+			margin: 2.6rem 0;
+			width: 100%;
+			padding: 1.6rem;
+			background-color: #f9f9f9;
+			display: flex;
+			flex-direction: column;
+			gap: 1.4rem;
+			border-radius: 1.2rem;
+			> .step-item {
+				display: flex;
+				> img {
+					width: 2rem;
+					height: 2rem;
+					margin: 0.2rem;
+					margin-right: 1.2rem;
+				}
+				> .content {
+					flex: 1;
+					font-size: 1.4rem;
+					> .title {
+						font-style: Bold;
+						color: #000;
+						line-height: 150%;
+					}
+					> .tip {
+						font-family: "pingfang_medium";
+						line-height: 170%;
+						color: #737373;
+					}
+				}
+			}
+		}
+		> .home-btn {
+			width: 31rem;
+			height: 6rem;
+			border-radius: 4rem;
+			font-size: 1.6rem;
+			color: #fff;
+			background-color: #000;
+			border: none;
+			cursor: pointer;
+			outline: none;
+			&:active {
+				opacity: 0.8;
+			}
+		}
+	}
+</style>
diff --git a/src/views/SellerDashboard/becomeSeller.vue b/src/views/SellerDashboard/becomeSeller.vue
deleted file mode 100644
index 5f25e28b..00000000
--- a/src/views/SellerDashboard/becomeSeller.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-	<div class="become-seller"></div>
-</template>
-
-<script setup>
-	import { ref, computed } from "vue"
-	import { useRoute, useRouter } from "vue-router"
-	const route = useRoute()
-	const router = useRouter()
-
-	const activePath = computed(() => route.path)
-</script>
-<style scoped lang="less">
-	.become-seller {
-		width: 100%;
-		height: 100%;
-		overflow: hidden;
-		position: relative;
-		display: flex;
-		flex-direction: column;
-	}
-</style>
diff --git a/src/views/SellerDashboard/seller-header.vue b/src/views/SellerDashboard/seller-header.vue
new file mode 100644
index 00000000..33c693cb
--- /dev/null
+++ b/src/views/SellerDashboard/seller-header.vue
@@ -0,0 +1,95 @@
+<template>
+	<div class="seller-header">
+		<div class="back" @click="() => router.back()">
+			<svg-icon name="seller-back" size="24" />
+		</div>
+		<div class="content">
+			<span class="title" v-show="title">{{ title }}</span>
+			<span class="tip" v-show="tip">{{ tip }}</span>
+			<div class="breadcrumbs" v-show="breadcrumbs.length > 0">
+				<template v-for="(v, i) in breadcrumbs" :key="i">
+					<span
+						class="title"
+						:class="{
+							last: i === breadcrumbs.length - 1
+						}"
+						@click="() => router.push({ name: v.name })"
+						>{{ v.title }}</span
+					>
+					<span class="icon" v-show="i < breadcrumbs.length - 1">
+						<svg-icon name="seller-arrow_right_solid" size="10" />
+					</span>
+				</template>
+			</div>
+		</div>
+		<div class="right">
+			<slot name="right"></slot>
+		</div>
+	</div>
+</template>
+
+<script setup>
+	import { ref, computed } from "vue"
+	import { useRoute, useRouter } from "vue-router"
+	const props = defineProps({
+		title: {
+			type: String,
+			default: ""
+		},
+		tip: {
+			type: String,
+			default: ""
+		},
+		breadcrumbs: {
+			type: Array, // { title: string, name: string }
+			default: () => []
+		}
+	})
+	const route = useRoute()
+	const router = useRouter()
+</script>
+<style scoped lang="less">
+	.seller-header {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		gap: 2.4rem;
+		> .back {
+			width: 5rem;
+			height: 5rem;
+			border-radius: 1.2rem;
+			border: 1px solid #d7d7d7;
+			cursor: pointer;
+		}
+		> .content {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			> .title {
+				line-height: 130%;
+				font-size: 2.4rem;
+				color: #000;
+			}
+			> .tip {
+				font-family: "pingfang_medium";
+				font-size: 1.4rem;
+				line-height: 150%;
+				color: #888;
+			}
+			> .breadcrumbs {
+				display: flex;
+				align-items: center;
+				gap: 1rem;
+				> .title {
+					font-family: "pingfang_regular";
+					color: #999;
+					font-size: 1.4rem;
+					cursor: pointer;
+					&:not(.last) {
+						text-decoration: underline;
+					}
+				}
+			}
+		}
+	}
+</style>