diff --git a/src/assets/icons/card.svg b/src/assets/icons/card.svg
new file mode 100644
index 0000000..ab8adc7
--- /dev/null
+++ b/src/assets/icons/card.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 0H2C0.9 0 0 0.9 0 2V14C0 15.1 0.9 16 2 16H18C19.1 16 20 15.1 20 14V2C20 0.9 19.1 0 18 0ZM19 14C19 14.5515 18.5515 15 18 15H2C1.4485 15 1 14.5515 1 14V11H19V14ZM19 9H1V2C1 1.4485 1.4485 1 2 1H18C18.5515 1 19 1.4485 19 2V9Z" fill="#232323"/>
+</svg>
diff --git a/src/assets/icons/pay/stripe.svg b/src/assets/icons/pay/stripe.svg
new file mode 100644
index 0000000..5e10806
--- /dev/null
+++ b/src/assets/icons/pay/stripe.svg
@@ -0,0 +1,9 @@
+<svg width="71" height="20" viewBox="0 0 71 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.7027 3.99951C22.5565 3.99951 22.4324 4.11223 22.4096 4.2657L20.7182 15.6629C20.712 15.7045 20.7144 15.7471 20.7252 15.7876C20.736 15.8282 20.755 15.8658 20.7808 15.8978C20.8065 15.9298 20.8385 15.9555 20.8746 15.9732C20.9106 15.9908 20.9498 15.9999 20.9894 15.9999H22.9953C23.1412 15.9999 23.2656 15.887 23.2884 15.7337L23.7853 12.3869C23.8079 12.2336 23.9322 12.1207 24.0784 12.1207H25.9021C28.0329 12.1207 29.8417 10.4687 30.1721 8.23028C30.5053 5.97289 28.8455 4.00441 26.4931 3.99951H22.7027ZM24.6526 6.54381H26.1117C27.313 6.54381 27.7042 7.29694 27.5805 8.12982C27.4568 8.96448 26.8492 9.57928 25.6872 9.57928H24.202L24.6526 6.54381ZM34.2518 7.31855C33.7453 7.32055 33.1625 7.43081 32.5082 7.7204C31.0074 8.38509 30.2866 9.75882 29.9805 10.7603C29.9805 10.7603 29.0063 13.8158 31.2074 15.4945C31.2074 15.4945 33.2487 17.1106 35.5466 15.3949L35.507 15.6629C35.5008 15.7045 35.5032 15.747 35.514 15.7875C35.5248 15.8281 35.5437 15.8656 35.5694 15.8976C35.5952 15.9296 35.6271 15.9554 35.6631 15.973C35.6991 15.9907 35.7382 15.9999 35.7778 15.9999H37.682C37.8282 15.9999 37.9523 15.887 37.9751 15.7337L39.1334 7.92889C39.1396 7.88726 39.1373 7.8447 39.1265 7.80413C39.1158 7.76356 39.0969 7.72595 39.0711 7.69388C39.0454 7.66181 39.0134 7.63604 38.9774 7.61836C38.9414 7.60067 38.9022 7.59148 38.8626 7.59142H36.9584C36.8122 7.59142 36.6879 7.70436 36.6653 7.85761L36.603 8.27773C36.603 8.27773 35.7715 7.31253 34.2518 7.31855ZM34.3141 9.78376C34.5327 9.78376 34.7328 9.81584 34.9122 9.8771C35.7338 10.1573 36.1996 10.996 36.0648 11.9051C35.8986 13.0244 35.0346 13.8486 33.9267 13.8486C33.7082 13.8486 33.5082 13.8167 33.3285 13.7555C32.5072 13.4752 32.0384 12.6366 32.1732 11.7275C32.3394 10.6082 33.2061 9.78376 34.3141 9.78376Z" fill="#B4B4B4"/>
+<path d="M50.1245 3.99951C49.9784 3.99951 49.8543 4.11223 49.8315 4.2657L48.14 15.6629C48.1339 15.7045 48.1363 15.7471 48.1471 15.7876C48.1579 15.8282 48.1769 15.8658 48.2026 15.8978C48.2284 15.9298 48.2604 15.9555 48.2965 15.9732C48.3325 15.9908 48.3717 15.9999 48.4113 15.9999H50.4172C50.5631 15.9999 50.6874 15.887 50.7103 15.7337L51.2071 12.3869C51.2298 12.2336 51.3541 12.1207 51.5002 12.1207H53.3239C55.4548 12.1207 57.2634 10.4687 57.5936 8.23028C57.9269 5.97289 56.2674 4.00441 53.9149 3.99951H50.1245ZM52.0745 6.54381H53.5336C54.7349 6.54381 55.1261 7.29694 55.0024 8.12982C54.8787 8.96448 54.2713 9.57928 53.1091 9.57928H51.6239L52.0745 6.54381ZM61.6735 7.31855C61.167 7.32055 60.5842 7.43081 59.9299 7.7204C58.429 8.38509 57.7083 9.75882 57.4022 10.7603C57.4022 10.7603 56.4284 13.8158 58.6294 15.4945C58.6294 15.4945 60.6703 17.1106 62.9685 15.3949L62.9288 15.6629C62.9227 15.7045 62.9251 15.7471 62.9359 15.7876C62.9467 15.8282 62.9657 15.8658 62.9915 15.8978C63.0172 15.9298 63.0492 15.9555 63.0853 15.9732C63.1213 15.9908 63.1605 15.9999 63.2001 15.9999H65.1041C65.2503 15.9999 65.3744 15.887 65.3972 15.7337L66.5559 7.92889C66.5621 7.88723 66.5598 7.84463 66.549 7.80402C66.5382 7.76342 66.5193 7.72579 66.4935 7.69371C66.4677 7.66163 66.4357 7.63588 66.3996 7.61822C66.3636 7.60056 66.3243 7.59142 66.2846 7.59142H64.3804C64.2343 7.59142 64.11 7.70436 64.0873 7.85761L64.0251 8.27773C64.0251 8.27773 63.1932 7.31253 61.6735 7.31855ZM61.7358 9.78376C61.9544 9.78376 62.1544 9.81584 62.3339 9.8771C63.1555 10.1573 63.6213 10.996 63.4865 11.9051C63.3203 13.0244 62.4563 13.8486 61.3483 13.8486C61.1299 13.8486 60.9299 13.8167 60.7502 13.7555C59.9288 13.4752 59.4601 12.6366 59.5949 11.7275C59.7611 10.6082 60.6278 9.78376 61.7358 9.78376Z" fill="#ECECEC"/>
+<path d="M40.0394 7.59129C39.8884 7.59129 39.7811 7.74788 39.8272 7.90047L41.9149 14.7838L40.0272 18.0275C39.9356 18.185 40.0421 18.3884 40.2163 18.3884H42.4474C42.5112 18.3883 42.5739 18.3708 42.6294 18.3375C42.685 18.3042 42.7315 18.2562 42.7645 18.1982L48.595 7.94992C48.6845 7.79243 48.5776 7.59106 48.4044 7.59106H46.1736C46.1092 7.59112 46.0459 7.609 45.9899 7.64294C45.934 7.67688 45.8873 7.72572 45.8545 7.78464L43.5595 11.9016L42.3945 7.81515C42.3566 7.68217 42.2411 7.59106 42.1105 7.59106L40.0394 7.59129Z" fill="#B4B4B4"/>
+<path d="M68.7188 3.99951C68.5729 3.99951 68.4485 4.11245 68.4257 4.2657L66.7338 15.6625C66.7276 15.7041 66.73 15.7467 66.7408 15.7873C66.7516 15.8279 66.7705 15.8656 66.7963 15.8977C66.8221 15.9297 66.8541 15.9555 66.8901 15.9731C66.9262 15.9908 66.9654 15.9999 67.0051 15.9999H69.011C69.1569 15.9999 69.2813 15.887 69.3041 15.7337L70.9955 4.33654C71.0017 4.29494 70.9993 4.25243 70.9885 4.21191C70.9777 4.1714 70.9588 4.13384 70.9331 4.10182C70.9073 4.06981 70.8754 4.04408 70.8394 4.02642C70.8034 4.00876 70.7643 3.99958 70.7247 3.99951H68.7188Z" fill="#ECECEC"/>
+<path d="M5.9809 3.99951C5.85169 3.99963 5.72675 4.0487 5.62853 4.13791C5.53031 4.22712 5.46525 4.35062 5.44504 4.48623L4.55469 10.4863C4.5962 10.2061 4.82345 9.99961 5.09053 9.99961H7.69957C10.3254 9.99961 12.5535 7.96431 12.9606 5.20617C12.9909 5.00025 13.0081 4.7924 13.012 4.58402C12.3447 4.21224 11.5608 3.99951 10.7019 3.99951H5.9809Z" fill="#828282"/>
+<path d="M13.013 4.58423C13.0091 4.79261 12.9919 5.00046 12.9616 5.20638C12.5545 7.96452 10.3262 9.99983 7.70057 9.99983H5.09153C4.82465 9.99983 4.59719 10.2061 4.55568 10.4865L3.73701 16.0002L3.22422 19.4591C3.21421 19.5259 3.21796 19.5942 3.23523 19.6594C3.25249 19.7245 3.28285 19.7849 3.32421 19.8364C3.36556 19.8878 3.41693 19.9291 3.47478 19.9574C3.53262 19.9858 3.59555 20.0004 3.65924 20.0004H6.49113C6.62034 20.0003 6.74528 19.9512 6.8435 19.862C6.94172 19.7728 7.00677 19.6493 7.02698 19.5137L7.77289 14.4868C7.79311 14.3511 7.85823 14.2275 7.95654 14.1383C8.05484 14.0491 8.17989 14 8.30917 14H9.97648C12.6023 14 14.8304 11.9647 15.2375 9.2066C15.5266 7.24904 14.5987 5.46767 13.013 4.58423Z" fill="#ECECEC"/>
+<path d="M2.76357 0C2.49669 0 2.26923 0.20627 2.22772 0.486272L0.00546928 15.4589C-0.0366695 15.7431 0.170046 16.0002 0.440908 16.0002H3.73632L4.55457 10.4866L5.44493 4.48649C5.46513 4.35088 5.5302 4.22738 5.62842 4.13817C5.72664 4.04896 5.85157 3.99989 5.98079 3.99977H10.7018C11.5609 3.99977 12.3446 4.21273 13.0119 4.58428C13.0576 2.07317 11.1075 0 8.4263 0H2.76357Z" fill="#B4B4B4"/>
+</svg>
diff --git a/src/assets/images/pay/stripe.png b/src/assets/images/pay/stripe.png
new file mode 100644
index 0000000..cd5568d
Binary files /dev/null and b/src/assets/images/pay/stripe.png differ
diff --git a/src/assets/images/pay/success.png b/src/assets/images/pay/success.png
new file mode 100644
index 0000000..4cfb570
Binary files /dev/null and b/src/assets/images/pay/success.png differ
diff --git a/src/components/SvgIcon/index.vue b/src/components/SvgIcon/index.vue
index e00e238..baa6abd 100644
--- a/src/components/SvgIcon/index.vue
+++ b/src/components/SvgIcon/index.vue
@@ -1,50 +1,50 @@
 <template>
-  <div class="c-svg">
-    <svg
-      :class="svgClass"
-      v-bind="$attrs"
-      :style="{ color: color, fontSize: size/10 + 'rem' }"
-    >
-      <use :href="iconName"></use>
-    </svg>
-  </div>
+	<div class="c-svg">
+		<svg
+			:class="svgClass"
+			v-bind="$attrs"
+			:style="{ color: color, fontSize: size / 10 + 'rem' }"
+		>
+			<use :href="iconName"></use>
+		</svg>
+	</div>
 </template>
 
 <script setup>
-import { computed } from "vue";
-const props = defineProps({
-  name: {
-    type: String,
-    required: true,
-  },
-  color: {
-    type: String,
-    default: "",
-  },
-  size: {
-    type: [Number, String],
-    default: 16,
-  },
-});
-const iconName = computed(() => `#icon-${props.name}`);
-const svgClass = computed(() => {
-  if (props.name) return `svg-icon icon-${props.name}`;
-  return "svg-icon";
-});
+	import { computed } from 'vue'
+	const props = defineProps({
+		name: {
+			type: String,
+			required: true
+		},
+		color: {
+			type: String,
+			default: ''
+		},
+		size: {
+			type: [Number, String],
+			default: 16
+		}
+	})
+	const iconName = computed(() => `#icon-${props.name}`)
+	const svgClass = computed(() => {
+		if (props.name) return `svg-icon icon-${props.name}`
+		return 'svg-icon'
+	})
 </script>
 
 <style scoped>
-.svg-icon {
-  width: 1em;
-  height: 1em;
-  fill: currentColor;
-	color: var(--svg-icon-color);
-}
-.c-svg {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
+	.svg-icon {
+		width: var(--svg-icon-width, 1em);
+		height: var(--svg-icon-height, 1em);
+		fill: currentColor;
+		color: var(--svg-icon-color);
+	}
+	.c-svg {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
 </style>
diff --git a/src/views/pay/index.vue b/src/views/pay/index.vue
index 201dba7..203805d 100644
--- a/src/views/pay/index.vue
+++ b/src/views/pay/index.vue
@@ -33,30 +33,17 @@
 		overflow-y: auto;
 		--content-top: 4.8rem;
 		> .content {
+			max-width: 160rem;
+			margin: 0 auto;
+			padding: 4rem 9rem 10rem;
+			gap: 10rem;
 			display: flex;
-			> * {
-				flex: 1;
+			> .payment {
+				width: 60%;
 			}
-			> .order-summary {
-				flex: 1;
+			> .sc-list {
+				width: 40%;
 			}
-			// max-width: 126rem;
-			// padding-top: var(--content-top);
-			// margin: 0 auto;
-			// min-height: var(--app-view-height);
-			// display: flex;
-			// align-items: flex-start;
-			// > .sc-list {
-			// 	flex: 1;
-			// 	margin-right: 7.5rem;
-			// 	margin-bottom: 8rem;
-			// 	--sc-list-header-top: var(--content-top);
-			// }
-			// > .order-summary {
-			// 	position: sticky;
-			// 	top: var(--content-top);
-			// 	max-height: var(--app-view-height);
-			// }
 		}
 	}
 </style>
diff --git a/src/views/pay/payment.vue b/src/views/pay/payment.vue
index d9ac9ff..715042d 100644
--- a/src/views/pay/payment.vue
+++ b/src/views/pay/payment.vue
@@ -1,18 +1,238 @@
 <template>
-	<div class="pay">{{ props.ids }}</div>
+	<div class="payment">
+		<div class="header" @click="onBack">
+			<span class="icon"><svg-icon name="back" size="30" /></span>
+			<span class="text">Payment Details</span>
+		</div>
+		<div class="paylist" v-if="status !== 2">
+			<div class="item">
+				<img src="@/assets/images/pay/stripe.png" alt="" />
+				<span>Credit / Debit Card</span>
+			</div>
+		</div>
+		<div class="agreement" v-if="status !== 2">
+			<el-checkbox v-model="agreement">
+				<div class="text">
+					I agree to the <span>Terms & Conditions</span> and <span>Privacy Policy</span>.
+					All digital item sales are final and non-refundable.
+				</div></el-checkbox
+			>
+		</div>
+		<div class="title" v-if="status !== 2">
+			<span class="icon"><svg-icon name="card" size="20" /></span>
+			<span class="text">Pay with Paypal</span>
+		</div>
+		<template v-if="status === 0">
+			<div class="tip">
+				You'll be redirected to a Paypal popup to log in and confirm. No card details are
+				shared with Stylish Parade — PayPal handles all payment security.
+			</div>
+			<div class="buttons">
+				<button custom="black" @click="onPayWith">
+					<span class="text">Pay with</span>
+					<span class="icon pay"><svg-icon name="pay-stripe" /></span>
+				</button>
+			</div>
+			<div class="buttons">
+				<span class="text" @click="onBack">Cancel</span>
+			</div>
+		</template>
+		<template v-if="status === 1">
+			<div class="tip">
+				Please keep the window open until the payment is completed. If you are to open the
+				payment window, please check your browser settings to see if pop-ups are being
+				blocked. Points may be delayed after successful payment. Please wait 1-3 minutes and
+				click the credits refresh button.
+			</div>
+			<div class="buttons">
+				<button custom="black" @click="getOrderStatus">I Have Completed payment</button>
+			</div>
+			<div class="buttons">
+				<span class="text" @click="onBack">Back</span>
+			</div>
+		</template>
+		<template v-if="status === 2">
+			<div class="success">
+				<img src="@/assets/images/pay/success.png" alt="" />
+				<div class="title">Purchase Successful!</div>
+				<div class="tip">
+					Your digital items are now available and have been saved in Personal Center → My
+					Wardrobe.
+				</div>
+			</div>
+			<div class="buttons">
+				<button custom="black">download all Assets</button>
+				<button custom="black-box">
+					<span class="icon"><svg-icon name="order-file" size="18" /></span>
+					<span class="text">Export Invoice</span>
+				</button>
+			</div>
+			<div class="buttons">
+				<span class="text" @click="onBack">Continue Shopping</span>
+			</div>
+		</template>
+	</div>
 </template>
 
 <script setup lang="ts">
 	import { computed, onMounted, ref } from 'vue'
+	import { CreateOrder } from '@/api/shoppingCart'
+	import { useRouter } from 'vue-router'
+	import { ElMessage } from 'element-plus'
+	const router = useRouter()
+	const onBack = () => router.back()
 	const props = defineProps({
 		ids: {
 			type: Array,
 			default: () => []
 		}
 	})
+	const agreement = ref(false)
+	const status = ref(0) // 0 初始 1 待支付 2 支付成功
+	const onPayWith = () => {
+		if (!agreement.value) {
+			return ElMessage.warning('Please agree to the Terms & Conditions and Privacy Policy.')
+		}
+		const ids = [...props.ids]
+		if (ids.length === 0) return
+		// CreateOrder(ids, true).then((res) => {
+		// 	console.log(res)
+		// })
+		status.value = 1
+	}
+	const getOrderStatus = () => {
+		status.value = 2
+	}
 </script>
 
 <style lang="less" scoped>
-	.pay {
+	.payment {
+		display: flex;
+		flex-direction: column;
+		> .header {
+			display: flex;
+			align-items: center;
+			gap: 2rem;
+			cursor: pointer;
+			user-select: none;
+			> .text {
+				font-family: KaiseiOpti-Bold;
+				font-size: 4rem;
+			}
+		}
+		> .paylist {
+			margin: 4rem 0 0 4rem;
+			padding: 2.7rem 0;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			border-bottom: 0.1rem solid #c4c4c4;
+			> .item {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				> img {
+					width: auto;
+					height: 3rem;
+					margin-bottom: 1.6rem;
+				}
+				> span {
+					font-family: KaiseiOpti-Regular;
+					font-size: 1.2rem;
+					color: #585858;
+				}
+			}
+		}
+		> .agreement {
+			margin-top: 2.4rem;
+			margin-left: 2rem;
+			margin-bottom: 10rem;
+			display: flex;
+			> .el-checkbox {
+				--el-checkbox-font-size: 1.4rem;
+				--el-checkbox-input-width: 1.4rem;
+				--el-checkbox-input-height: 1.4rem;
+				--el-checkbox-checked-bg-color: #000;
+				--el-checkbox-checked-input-border-color: #000;
+				--el-checkbox-input-border: 0.1rem solid #c4c4c4;
+				--el-checkbox-bg-color: #fff;
+				--el-checkbox-border-radius: 0;
+			}
+
+			.text {
+				color: #666;
+				word-break: break-word;
+				white-space: pre-wrap;
+				> * {
+					font-family: KaiseiOpti-Bold;
+					text-decoration: underline;
+					color: #232323;
+				}
+			}
+		}
+		> .title {
+			display: flex;
+			align-items: center;
+			gap: 1rem;
+		}
+		> .tip {
+			margin: 60px auto;
+			max-width: 59rem;
+			background: #f6f6f6;
+			border-left: 0.2rem solid #979797;
+			padding: 1.5rem 2rem;
+			font-size: 1.4rem;
+			line-height: 2.5rem;
+			color: #585858;
+		}
+		> .buttons {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			margin-bottom: 1.8rem;
+			gap: 1.2rem;
+			> button {
+				min-width: 28rem;
+				height: 5rem;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				gap: 0.8rem;
+				text-transform: uppercase;
+				> .icon.pay {
+					width: 7rem;
+					--svg-icon-width: auto;
+					--svg-icon-height: 2rem;
+				}
+			}
+			> span {
+				user-select: none;
+				cursor: pointer;
+				font-size: 1.4rem;
+				color: #979797;
+			}
+		}
+		> .success {
+			margin: 12rem auto;
+			max-width: 39rem;
+			display: flex;
+			align-items: center;
+			flex-direction: column;
+			> img {
+				width: 19.8rem;
+				height: auto;
+				margin-bottom: 2.4rem;
+			}
+			> .title {
+				font-size: 2rem;
+				margin-bottom: 0.8rem;
+			}
+			> .tip {
+				font-family: KaiseiOpti-Regular;
+				font-size: 1.4rem;
+				color: #666;
+				text-align: center;
+			}
+		}
 	}
 </style>
diff --git a/src/views/shoppingCart/order-summary.vue b/src/views/shoppingCart/order-summary.vue
index 650b302..463af68 100644
--- a/src/views/shoppingCart/order-summary.vue
+++ b/src/views/shoppingCart/order-summary.vue
@@ -37,7 +37,6 @@
 	import { computed, ref } from 'vue'
 	import { FormatBytes, FormatDate } from '@/utils/tools'
 	import { useRouter } from 'vue-router'
-	import { CreateOrder } from '@/api/shoppingCart'
 	const router = useRouter()
 	const props = defineProps({
 		list: {
diff --git a/src/views/shoppingCart/sc-list.vue b/src/views/shoppingCart/sc-list.vue
index 07c35e2..843705f 100644
--- a/src/views/shoppingCart/sc-list.vue
+++ b/src/views/shoppingCart/sc-list.vue
@@ -34,7 +34,7 @@
 					>
 						<template #label="{ label }">
 							<span class="header-label">{{ $t('Wardrobe.sort.label') }}</span>
-							<span class="header-value">{{ $t(label) }}</span>
+							<span class="header-value">{{ label }}</span>
 						</template>
 						<el-option
 							v-for="item in sortByOptions"
@@ -147,6 +147,7 @@
 				.sort((a, b) => (b.checked ? 1 : 0) - (a.checked ? 1 : 0))
 		}
 		if (sortBy.value === 'DateAdded') {
+			console.log(list_.value)
 			return list_.value.filter(() => true).sort((a, b) => b.date - a.date)
 		}
 		return list_.value.filter(() => true)
@@ -164,7 +165,7 @@
 					cover: v.cover, //封面
 					amount: v.price, //价格
 					status: v.status, //状态
-					date: v.addTime, //添加时间
+					date: new Date(v.addTime).getTime(), //添加时间
 					tags: v.productCategory, //标签
 					salesVolume: v.salesVolume, //销售量
 					checked: false