diff --git a/src/assets/icons/close_nocolor.svg b/src/assets/icons/close_nocolor.svg
new file mode 100644
index 0000000..b31f6f4
--- /dev/null
+++ b/src/assets/icons/close_nocolor.svg
@@ -0,0 +1,6 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M36.876 6.10352e-05C37.278 8.15739e-05 37.7109 0.0606485 38.082 0.210999C38.4531 0.361329 38.7933 0.601565 39.1025 0.872131C39.3809 1.14276 39.5983 1.50348 39.7529 1.86432C39.9385 2.22508 40 2.6163 40 3.03717C40 3.42815 39.9076 3.81982 39.7529 4.18073C39.5983 4.54161 39.3503 4.87217 39.041 5.17291L23.7295 20.0606L26.6367 22.8575L39.041 34.9473C39.5978 35.5188 39.9069 36.2708 39.876 37.0528C39.8759 37.8347 39.5671 38.5566 38.9795 39.128C38.4227 39.6693 37.649 40.0001 36.8447 40.0001C36.0405 40 35.2674 39.7289 34.6797 39.1876L17.1719 22.1651C16.8935 21.8944 16.6761 21.5641 16.5215 21.2032C16.3669 20.8424 16.2745 20.4514 16.2744 20.0606C16.2744 19.6696 16.3668 19.2778 16.5215 18.8868C16.6761 18.526 16.8935 18.1955 17.1719 17.9249L34.6797 0.902405C34.958 0.631804 35.2979 0.390671 35.6689 0.240295C36.0711 0.0899197 36.4738 6.10352e-05 36.876 6.10352e-05Z" fill="#A2A2A2"/>
+<path d="M36.876 6.10352e-05C37.278 8.15739e-05 37.7109 0.0606485 38.082 0.210999C38.4531 0.361329 38.7933 0.601565 39.1025 0.872131C39.3809 1.14276 39.5983 1.50348 39.7529 1.86432C39.9385 2.22508 40 2.6163 40 3.03717C40 3.42815 39.9076 3.81982 39.7529 4.18073C39.5983 4.54161 39.3503 4.87217 39.041 5.17291L23.7295 20.0606L26.6367 22.8575L39.041 34.9473C39.5978 35.5188 39.9069 36.2708 39.876 37.0528C39.8759 37.8347 39.5671 38.5566 38.9795 39.128C38.4227 39.6693 37.649 40.0001 36.8447 40.0001C36.0405 40 35.2674 39.7289 34.6797 39.1876L17.1719 22.1651C16.8935 21.8944 16.6761 21.5641 16.5215 21.2032C16.3669 20.8424 16.2745 20.4514 16.2744 20.0606C16.2744 19.6696 16.3668 19.2778 16.5215 18.8868C16.6761 18.526 16.8935 18.1955 17.1719 17.9249L34.6797 0.902405C34.958 0.631804 35.2979 0.390671 35.6689 0.240295C36.0711 0.0899197 36.4738 6.10352e-05 36.876 6.10352e-05Z" stroke="#A2A2A2"/>
+<path d="M3.12402 39.9999C2.72195 39.9999 2.2891 39.9393 1.91797 39.789C1.5469 39.6387 1.20671 39.3984 0.897461 39.1279C0.619115 38.8572 0.40173 38.4965 0.24707 38.1357C0.0615446 37.7749 4.72544e-05 37.3837 2.62463e-07 36.9628C2.9625e-07 36.5719 0.0924056 36.1802 0.247071 35.8193C0.401736 35.4584 0.649669 35.1278 0.958985 34.8271L16.2705 19.9394L13.3633 17.1425L0.958987 5.05267C0.402194 4.48124 0.0930932 3.72915 0.124027 2.9472C0.124068 2.16533 0.432862 1.44339 1.02051 0.872007C1.5773 0.330652 2.35102 -6.29255e-05 3.15528 -6.28544e-05C3.95949 -3.75358e-05 4.73262 0.271107 5.32032 0.812437L22.8281 17.8349C23.1065 18.1056 23.3239 18.4359 23.4785 18.7968C23.6331 19.1576 23.7255 19.5486 23.7256 19.9394C23.7256 20.3304 23.6332 20.7222 23.4785 21.1132C23.3239 21.474 23.1065 21.8045 22.8281 22.0751L5.32031 39.0976C5.04199 39.3682 4.70214 39.6093 4.33105 39.7597C3.92893 39.9101 3.52615 39.9999 3.12402 39.9999Z" fill="#A2A2A2"/>
+<path d="M3.12402 39.9999C2.72195 39.9999 2.2891 39.9393 1.91797 39.789C1.5469 39.6387 1.20671 39.3984 0.897461 39.1279C0.619115 38.8572 0.40173 38.4965 0.24707 38.1357C0.0615446 37.7749 4.72544e-05 37.3837 2.62463e-07 36.9628C2.9625e-07 36.5719 0.0924056 36.1802 0.247071 35.8193C0.401736 35.4584 0.649669 35.1278 0.958985 34.8271L16.2705 19.9394L13.3633 17.1425L0.958987 5.05267C0.402194 4.48124 0.0930932 3.72915 0.124027 2.9472C0.124068 2.16533 0.432862 1.44339 1.02051 0.872007C1.5773 0.330652 2.35102 -6.29255e-05 3.15528 -6.28544e-05C3.95949 -3.75358e-05 4.73262 0.271107 5.32032 0.812437L22.8281 17.8349C23.1065 18.1056 23.3239 18.4359 23.4785 18.7968C23.6331 19.1576 23.7255 19.5486 23.7256 19.9394C23.7256 20.3304 23.6332 20.7222 23.4785 21.1132C23.3239 21.474 23.1065 21.8045 22.8281 22.0751L5.32031 39.0976C5.04199 39.3682 4.70214 39.6093 4.33105 39.7597C3.92893 39.9101 3.52615 39.9999 3.12402 39.9999Z" stroke="#A2A2A2"/>
+</svg>
diff --git a/src/assets/icons/profile_white.svg b/src/assets/icons/profile_white.svg
new file mode 100644
index 0000000..7103aca
--- /dev/null
+++ b/src/assets/icons/profile_white.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="512" height="512">
+<path d="M0 0 C0.75078827 0.00182281 1.50157654 0.00364563 2.27511597 0.00552368 C13.21761547 0.05027143 23.62191026 0.48515561 34.25 3.3125 C34.93191406 3.48410645 35.61382812 3.65571289 36.31640625 3.83251953 C59.00177043 9.5913495 79.40710499 20.22441888 97.25 35.3125 C98.11625 36.03695312 98.9825 36.76140625 99.875 37.5078125 C121.03072338 55.7331823 135.73708646 81.30094695 143.5 107.875 C143.86967896 109.13219849 143.86967896 109.13219849 144.24682617 110.41479492 C147.73314603 122.88625162 148.62900837 135.1829942 148.5625 148.0625 C148.56034485 148.81428528 148.5581897 149.56607056 148.55596924 150.34063721 C148.50557623 161.29165017 148.10236932 171.68094163 145.25 182.3125 C145.05664062 183.075625 144.86328125 183.83875 144.6640625 184.625 C138.70530239 207.87152092 127.94069741 228.18414067 112.25 246.3125 C111.569375 247.11558594 110.88875 247.91867188 110.1875 248.74609375 C103.35666157 256.65759217 95.543982 262.99601834 87.25 269.3125 C89.82957733 271.89207733 92.26786511 272.58297433 95.6875 273.875 C138.59967012 290.63207925 177.93834483 320.05099223 205.25 357.3125 C205.88711914 358.16642334 205.88711914 358.16642334 206.53710938 359.03759766 C213.05268015 367.77841821 218.88588547 376.82336328 224.25 386.3125 C224.6521875 387.01971191 225.054375 387.72692383 225.46875 388.45556641 C246.93242591 426.5787439 256.80058004 468.81667677 256.25 512.3125 C242.72 512.3125 229.19 512.3125 215.25 512.3125 C214.92 505.7125 214.59 499.1125 214.25 492.3125 C213.79039897 488.03524524 213.3010447 483.86077695 212.625 479.625 C212.45387695 478.54468506 212.28275391 477.46437012 212.10644531 476.35131836 C206.60935354 443.73066749 193.60522612 411.53003125 173.25 385.3125 C172.38199281 384.15132264 171.51614482 382.98852844 170.65234375 381.82421875 C166.69979947 376.53512263 162.69932579 371.46825805 157.890625 366.91796875 C156.07346213 365.13974509 154.45402763 363.2534955 152.8125 361.3125 C149.27306554 357.22370765 145.40296396 353.7646974 141.25 350.3125 C140.47269531 349.64734375 139.69539063 348.9821875 138.89453125 348.296875 C136.05722631 345.91027659 133.17277195 343.59283744 130.25 341.3125 C129.68265137 340.86777344 129.11530273 340.42304688 128.53076172 339.96484375 C102.91739617 320.18490671 72.70307656 307.9897802 41.25 301.3125 C40.43789063 301.13315918 39.62578125 300.95381836 38.7890625 300.76904297 C-13.1279011 289.76727901 -70.4158177 302.91197056 -114.92041016 330.66601562 C-119.00484026 333.37186075 -122.88116241 336.30874411 -126.75 339.3125 C-127.91117736 340.18050719 -129.07397156 341.04635518 -130.23828125 341.91015625 C-135.52737737 345.86270053 -140.59424195 349.86317421 -145.14453125 354.671875 C-146.92275491 356.48903787 -148.8090045 358.10847237 -150.75 359.75 C-154.83879235 363.28943446 -158.2978026 367.15953604 -161.75 371.3125 C-162.41515625 372.08980469 -163.0803125 372.86710937 -163.765625 373.66796875 C-166.15222341 376.50527369 -168.46966256 379.38972805 -170.75 382.3125 C-171.19472656 382.87984863 -171.63945312 383.44719727 -172.09765625 384.03173828 C-193.98642519 412.37586492 -207.30205098 446.80110495 -212.5625 482.0625 C-212.67440674 482.80371094 -212.78631348 483.54492188 -212.90161133 484.30859375 C-214.13780819 493.62107917 -214.27883314 502.88916277 -214.75 512.3125 C-228.28 512.3125 -241.81 512.3125 -255.75 512.3125 C-257.02044663 447.51972193 -232.23141838 383.87916967 -187.36181641 336.98291016 C-178.26172749 327.55200916 -169.22377478 318.24056563 -158.75 310.3125 C-158.21117187 309.89726074 -157.67234375 309.48202148 -157.1171875 309.05419922 C-135.52893958 292.45762858 -112.04907118 280.19279862 -86.75 270.3125 C-89.98932855 267.02689532 -93.2994194 263.87489028 -96.75 260.8125 C-100.18819121 257.73435536 -103.52845207 254.61882551 -106.75 251.3125 C-107.31847656 250.78914062 -107.88695312 250.26578125 -108.47265625 249.7265625 C-125.46267938 233.71608345 -136.54271907 210.85460351 -143 188.75 C-143.24645264 187.91186768 -143.49290527 187.07373535 -143.74682617 186.21020508 C-147.23328996 173.73823352 -148.12743363 161.44230703 -148.0625 148.5625 C-148.06067719 147.81171173 -148.05885437 147.06092346 -148.05697632 146.28738403 C-148.01222857 135.34488453 -147.57734439 124.94058974 -144.75 114.3125 C-144.57839355 113.63058594 -144.40678711 112.94867188 -144.22998047 112.24609375 C-138.4711505 89.56072957 -127.83808112 69.15539501 -112.75 51.3125 C-112.02554688 50.44625 -111.30109375 49.58 -110.5546875 48.6875 C-92.3293177 27.53177662 -66.76155305 12.82541354 -40.1875 5.0625 C-39.34936768 4.81604736 -38.51123535 4.56959473 -37.64770508 4.31567383 C-25.17573352 0.82921004 -12.87980703 -0.06493363 0 0 Z M-82.75 79.3125 C-102.47284214 104.08592408 -109.85398681 133.75980081 -106.4453125 165.11523438 C-102.30107187 192.11623073 -86.96859344 216.80814884 -65.72265625 233.72265625 C-40.68832205 251.76346817 -11.18755441 259.34226559 19.546875 254.625 C46.79279426 249.44647287 71.72314797 233.62484698 87.9375 211.125 C104.55270793 186.00898802 111.82103489 156.68249116 106.12060547 126.69067383 C99.84821409 98.96546799 83.58704207 74.20277398 59.76171875 58.44140625 C12.2292209 29.00496857 -45.61252232 37.87082729 -82.75 79.3125 Z " fill="currentColor" transform="translate(255.75,-0.3125)"/>
+</svg>
diff --git a/src/assets/images/checked.png b/src/assets/images/checked.png
new file mode 100644
index 0000000..a0054b0
Binary files /dev/null and b/src/assets/images/checked.png differ
diff --git a/src/views/Workshop/profile.vue b/src/views/Workshop/profile.vue
index 11302da..e3dc126 100644
--- a/src/views/Workshop/profile.vue
+++ b/src/views/Workshop/profile.vue
@@ -1,261 +1,392 @@
 <script setup lang="ts">
-	import { ref, reactive, onMounted, inject } from 'vue'
-	import router from '@/router'
-	import { showConfirmDialog } from 'vant'
-	import { useUserInfoStore, useOverallStore } from '@/stores'
-	import { LogOut } from '@/api/login'
-	const userInfoStore = useUserInfoStore()
-	const overallStore = useOverallStore()
-	const emit = defineEmits(['view-type'])
-	const show = ref(false)
-	const isEdit = ref(false)
-	const form = reactive({
-		name: { msg: '', value: userInfoStore.state.userInfo.username },
-		email: { msg: '', value: userInfoStore.state.userInfo.email },
-		password: { show: false, msg: '', value: userInfoStore.state.userInfo.password }
-	})
-	const open = () => {
-		isEdit.value = false
-		show.value = true
-	}
-	const close = () => {
-		show.value = false
-	}
-	const onEditItem = (item) => {
-		if (!form[item]) return
-		form[item].edit = true
-	}
-	const onSaveItem = (item) => {
-		if (!form[item]) return
-		form[item].edit = false
-	}
-	const switchCustomer = () => {
-		console.log('switchCustomer')
-	}
-	const edit = () => {
-		isEdit.value = true
-	}
-	const confirm = () => {
-		overallStore.setLoading(true)
-		setTimeout(() => {
-			overallStore.setLoading(false)
-			isEdit.value = false
-		}, 1000)
-	}
-	const logout = () => {
-		showConfirmDialog({
-			title: 'Log out',
-			message: 'Are you sure you want to log out?',
-			confirmButtonText: 'Yes',
-			cancelButtonText: 'Cancel'
-		})
-			.then(() => {
-				LogOut().then(() => {
-					userInfoStore.logOut()
-					router.push({ path: '/welcome' })
-				})
-			})
-			.catch(() => {})
-	}
-	defineExpose({ open })
+import { ref, reactive, onMounted, inject } from 'vue'
+import router from '@/router'
+import { showConfirmDialog } from 'vant'
+import { useUserInfoStore, useOverallStore } from '@/stores'
+import { LogOut } from '@/api/login'
+const userInfoStore = useUserInfoStore()
+const overallStore = useOverallStore()
+const emit = defineEmits(['view-type', 'selected-customer'])
+const show = ref(false)
+const isEdit = ref(false)
+const form = reactive({
+  name: { msg: '', value: userInfoStore.state.userInfo.username },
+  email: { msg: '', value: userInfoStore.state.userInfo.email },
+  password: { show: false, msg: '', value: userInfoStore.state.userInfo.password }
+})
+const open = () => {
+  isEdit.value = false
+  show.value = true
+}
+const close = () => {
+  show.value = false
+}
+const onEditItem = (item) => {
+  if (!form[item]) return
+  form[item].edit = true
+}
+const onSaveItem = (item) => {
+  if (!form[item]) return
+  form[item].edit = false
+}
+const switchCustomer = () => {
+  // console.log('switchCustomer')
+  handleShowPopup(true)
+}
+const edit = () => {
+  isEdit.value = true
+}
+const confirm = () => {
+  overallStore.setLoading(true)
+  setTimeout(() => {
+    overallStore.setLoading(false)
+    isEdit.value = false
+  }, 1000)
+}
+const logout = () => {
+  showConfirmDialog({
+    title: 'Log out',
+    message: 'Are you sure you want to log out?',
+    confirmButtonText: 'Yes',
+    cancelButtonText: 'Cancel'
+  })
+    .then(() => {
+      LogOut().then(() => {
+        userInfoStore.logOut()
+        router.push({ path: '/welcome' })
+      })
+    })
+    .catch(() => {})
+}
+
+const showSwitchCustomerPopup = ref(false)
+
+const customerList = ref([
+  { id: 'CUST001', nickname: 'Customer One', checked: true },
+  { id: 'CUST002', nickname: 'Customer Two', checked: false },
+  { id: 'CUST003', nickname: 'Customer Three', checked: false },
+  { id: 'CUST004', nickname: 'Customer Four', checked: false },
+  { id: 'CUST005', nickname: 'Customer Five', checked: false }
+])
+// 打开customer选择时关闭profile弹窗 如果不是点击confirem关闭则重新打开profile弹窗
+const handleShowPopup = (flag: boolean) => {
+  showSwitchCustomerPopup.value = flag
+	show.value = !flag
+}
+const handleChangeChecked = (item) => {
+  customerList.value.forEach((customer) => {
+    customer.checked = customer.id === item.id
+  })
+}
+const handleSelectCustomer = () => {
+  const selectedCustomer = customerList.value.find((customer) => customer.checked)
+  if (selectedCustomer) {
+    emit('selected-customer', selectedCustomer)
+  }
+  showSwitchCustomerPopup.value = false
+}
+
+const openSwitchCustomerPopup = (flag = true) => {
+  showSwitchCustomerPopup.value = flag
+}
+
+defineExpose({ open, close, openSwitchCustomerPopup })
 </script>
 
 <template>
-	<van-popup class="van-popup" v-model:show="show" position="bottom" round>
-		<div class="profile">
-			<div class="header">
-				<span class="title">Profile</span>
-				<van-icon name="cross" class="close" @click="close" />
-			</div>
-			<div class="box">
-				<div class="form-item">
-					<div class="label">Your Name</div>
-					<label class="input">
-						<div class="icon"><SvgIcon name="user" size="64" /></div>
-						<input
-							type="text"
-							placeholder="Enter your name"
-							v-model="form.name.value"
-							:readonly="!isEdit"
-						/>
-						<!-- <div class="icon" v-if="isEdit" @click.stop="onSaveItem('name')">
+  <van-popup class="van-popup" v-model:show="show" position="bottom" round>
+    <div class="profile">
+      <div class="header">
+        <span class="title">Profile</span>
+        <van-icon name="cross" class="close" @click="close" />
+      </div>
+      <div class="box">
+        <div class="form-item">
+          <div class="label">Your Name</div>
+          <label class="input">
+            <div class="icon"><SvgIcon name="user" size="64" /></div>
+            <input
+              type="text"
+              placeholder="Enter your name"
+              v-model="form.name.value"
+              :readonly="!isEdit"
+            />
+            <!-- <div class="icon" v-if="isEdit" @click.stop="onSaveItem('name')">
 							<SvgIcon name="confirmation" size="37" />
 						</div>
 						<div class="icon" v-else @click="onEditItem('name')">
 							<SvgIcon name="edit" size="37" />
 						</div> -->
-					</label>
-					<p class="error" v-show="form.name.msg">{{ form.name.msg }}</p>
-				</div>
-				<div class="form-item">
-					<div class="label">Your Email</div>
-					<label class="input">
-						<div class="icon"><SvgIcon name="email" size="64" /></div>
-						<input
-							type="email"
-							placeholder="Enter your email"
-							v-model="form.email.value"
-							:readonly="!isEdit"
-							required
-						/>
-						<!-- <div class="icon" v-if="isEdit" @click.stop="onSaveItem('email')">
+          </label>
+          <p class="error" v-show="form.name.msg">{{ form.name.msg }}</p>
+        </div>
+        <div class="form-item">
+          <div class="label">Your Email</div>
+          <label class="input">
+            <div class="icon"><SvgIcon name="email" size="64" /></div>
+            <input
+              type="email"
+              placeholder="Enter your email"
+              v-model="form.email.value"
+              :readonly="!isEdit"
+              required
+            />
+            <!-- <div class="icon" v-if="isEdit" @click.stop="onSaveItem('email')">
 							<SvgIcon name="confirmation" size="37" />
 						</div>
 						<div class="icon" v-else @click="onEditItem('email')">
 							<SvgIcon name="edit" size="37" />
 						</div> -->
-					</label>
-					<p class="error" v-show="form.email.msg">{{ form.email.msg }}</p>
-				</div>
-				<div class="form-item">
-					<div class="label">Password</div>
-					<label class="input">
-						<div class="icon" @click="form.password.show = !form.password.show">
-							<SvgIcon :name="form.password.show ? 'password_1' : 'password_0'" size="64" />
-						</div>
-						<input
-							:type="form.password.show ? 'text' : 'password'"
-							placeholder="Enter your password"
-							v-model="form.password.value"
-							:readonly="!isEdit"
-						/>
-						<!-- <div class="icon" v-if="isEdit" @click.stop="onSaveItem('password')">
+          </label>
+          <p class="error" v-show="form.email.msg">{{ form.email.msg }}</p>
+        </div>
+        <div class="form-item">
+          <div class="label">Password</div>
+          <label class="input">
+            <div class="icon" @click="form.password.show = !form.password.show">
+              <SvgIcon :name="form.password.show ? 'password_1' : 'password_0'" size="64" />
+            </div>
+            <input
+              :type="form.password.show ? 'text' : 'password'"
+              placeholder="Enter your password"
+              v-model="form.password.value"
+              :readonly="!isEdit"
+            />
+            <!-- <div class="icon" v-if="isEdit" @click.stop="onSaveItem('password')">
 							<SvgIcon name="confirmation" size="37" />
 						</div>
 						<div class="icon" v-else @click="onEditItem('password')">
 							<SvgIcon name="edit" size="37" />
 						</div> -->
-					</label>
-					<p class="error" v-show="form.password.msg">{{ form.password.msg }}</p>
-				</div>
+          </label>
+          <p class="error" v-show="form.password.msg">{{ form.password.msg }}</p>
+        </div>
 
-				<template v-if="isEdit">
-					<button class="confirm" @click="confirm">Confirm</button>
-					<p class="tip">Powered by AiDLab for Lane Crawford</p>
-				</template>
-				<template v-else>
-					<button class="switch" @click="switchCustomer">Switch Customer</button>
-					<button class="edit" @click="edit">Edit Profile</button>
-					<button class="logout" @click="logout">Log out</button>
-				</template>
-			</div>
-		</div>
-	</van-popup>
+        <template v-if="isEdit">
+          <button class="confirm" @click="confirm">Confirm</button>
+          <p class="tip">Powered by AiDLab for Lane Crawford</p>
+        </template>
+        <template v-else>
+          <button class="switch" @click="switchCustomer">Switch Customer</button>
+          <button class="edit" @click="edit">Edit Profile</button>
+          <button class="logout" @click="logout">Log out</button>
+        </template>
+      </div>
+    </div>
+  </van-popup>
+  <van-popup
+    class="user-popup"
+    v-model:show="showSwitchCustomerPopup"
+    round
+    position="bottom"
+    teleport="body"
+  >
+    <div class="popup-title flex">
+      <div class="title-txt">Saved Customer ID</div>
+      <SvgIcon name="close_nocolor" color="#a1a1a1" size="40" @click="handleShowPopup(false)" />
+    </div>
+    <div class="cusomter-list">
+      <div
+        class="customer-item flex flex-align-center flex-between"
+        v-for="item in customerList"
+        :key="item.id"
+        @click="handleChangeChecked(item)"
+      >
+        <div class="info">
+          <div class="name">{{ item.nickname }}</div>
+          <div class="id">{{ item.id }}</div>
+        </div>
+        <div class="select-box">
+          <div class="check-box flex flex-center" v-show="!item.checked">
+            <div class="check"></div>
+          </div>
+          <img v-show="item.checked" class="checked-icon" src="@/assets/images/checked.png" />
+        </div>
+      </div>
+    </div>
+    <div class="confirm-btn" @click="handleSelectCustomer">Confirm</div>
+  </van-popup>
 </template>
 
 <style scoped lang="less">
-	.van-popup {
-		max-height: 90%;
-		--van-popup-round-radius: 7.8rem;
-	}
-	.profile {
-		margin: 6.5rem 0;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		> .header {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			width: 100%;
-			padding: 0 7rem;
-			margin-bottom: 8rem;
-			> .title {
-				font-family: satoshiBold;
-				font-size: 4.6rem;
-				color: #181725;
-			}
-			> .close {
-				margin-left: auto;
-				font-size: 5rem;
-				color: #a1a1a1;
-			}
-		}
-		> .box {
-			width: 100%;
-			padding: 0 13rem;
-			> div {
-				width: 100%;
-				margin-top: 5.1rem;
-				&:first-child {
-					margin-top: 0;
-				}
-			}
-			> button {
-				margin-top: 8.5rem;
-				width: 100%;
-				height: 14.5rem;
-				border-radius: 2rem;
-				font-size: 4rem;
-				border: 0.2rem solid #3b3b3b;
-				font-family: satoshiBold;
-			}
-			> .form-item {
-				> .label {
-					margin-bottom: 2.5rem;
-					font-family: satoshiBold;
-					font-size: 2.9rem;
-					line-height: 120%;
-					color: #262422;
-				}
-				> .input {
-					// width: 100%;
-					height: 13.9rem;
-					border-radius: 2.5rem;
-					border: 0.2rem solid #f1ecec;
-					box-sizing: content-box;
-					display: flex;
-					align-items: center;
-					overflow: hidden;
-					padding: 0 2.5rem;
-					> * {
-						margin-right: 2.5rem;
-						&:last-child {
-							margin-right: 0;
-						}
-					}
-					> .icon {
-						// margin: 0 2.5rem;
-						--svg-icon-color: #ababab;
-					}
-					> input {
-						width: 0;
-						flex: 1;
-						height: 100%;
-						font-family: satoshiMedium;
-						font-size: 3.5rem;
-						color: #000;
-						border: none;
-						&::placeholder {
-							color: #ababab;
-						}
-					}
-				}
-				> .error {
-					margin-top: 1rem;
-					font-family: satoshiRegular;
-					font-size: 2.5rem;
-					line-height: 120%;
-					color: #ff0000;
-				}
-			}
-			> .switch {
-				background-color: transparent;
-				color: #222;
-			}
-			> .confirm,
-			> .edit,
-			> .logout {
-				background-color: #000;
-				color: #fff;
-			}
-			> .tip {
-				font-family: satoshiRegular;
-				text-align: center;
-				font-size: 3rem;
-				color: #a1a1a1;
-				margin-top: 17.8rem;
-			}
-		}
-	}
+.van-popup {
+  max-height: 90%;
+  --van-popup-round-radius: 7.8rem;
+}
+.profile {
+  margin: 6.5rem 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  > .header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    padding: 0 7rem;
+    margin-bottom: 8rem;
+    > .title {
+      font-family: satoshiBold;
+      font-size: 4.6rem;
+      color: #181725;
+    }
+    > .close {
+      margin-left: auto;
+      font-size: 5rem;
+      color: #a1a1a1;
+    }
+  }
+  > .box {
+    width: 100%;
+    padding: 0 13rem;
+    > div {
+      width: 100%;
+      margin-top: 5.1rem;
+      &:first-child {
+        margin-top: 0;
+      }
+    }
+    > button {
+      margin-top: 8.5rem;
+      width: 100%;
+      height: 14.5rem;
+      border-radius: 2rem;
+      font-size: 4rem;
+      border: 0.2rem solid #3b3b3b;
+      font-family: satoshiBold;
+    }
+    > .form-item {
+      > .label {
+        margin-bottom: 2.5rem;
+        font-family: satoshiBold;
+        font-size: 2.9rem;
+        line-height: 120%;
+        color: #262422;
+      }
+      > .input {
+        // width: 100%;
+        height: 13.9rem;
+        border-radius: 2.5rem;
+        border: 0.2rem solid #f1ecec;
+        box-sizing: content-box;
+        display: flex;
+        align-items: center;
+        overflow: hidden;
+        padding: 0 2.5rem;
+        > * {
+          margin-right: 2.5rem;
+          &:last-child {
+            margin-right: 0;
+          }
+        }
+        > .icon {
+          // margin: 0 2.5rem;
+          --svg-icon-color: #ababab;
+        }
+        > input {
+          width: 0;
+          flex: 1;
+          height: 100%;
+          font-family: satoshiMedium;
+          font-size: 3.5rem;
+          color: #000;
+          border: none;
+          &::placeholder {
+            color: #ababab;
+          }
+        }
+      }
+      > .error {
+        margin-top: 1rem;
+        font-family: satoshiRegular;
+        font-size: 2.5rem;
+        line-height: 120%;
+        color: #ff0000;
+      }
+    }
+    > .switch {
+      background-color: transparent;
+      color: #222;
+    }
+    > .confirm,
+    > .edit,
+    > .logout {
+      background-color: #000;
+      color: #fff;
+    }
+    > .tip {
+      font-family: satoshiRegular;
+      text-align: center;
+      font-size: 3rem;
+      color: #a1a1a1;
+      margin-top: 17.8rem;
+    }
+  }
+}
+
+.van-popup.user-popup {
+  height: 116.1rem;
+  color: #181725;
+  border-top-left-radius: 7.8rem;
+  border-top-right-radius: 7.8rem;
+  .c-svg {
+    width: initial;
+  }
+  .popup-title {
+    align-items: center;
+    justify-content: space-between;
+    font-weight: 700;
+    font-family: 'satoshiBold';
+    font-size: 4.8rem;
+    padding: 12rem 7.4rem 7.8rem 6.7rem;
+    border-bottom: 0.26rem solid #e2e2e2b2;
+  }
+  .cusomter-list {
+    padding: 0 7rem 0 6.6rem;
+    font-family: 'satoshiMedium';
+    color: #000;
+    /* Fixed list area: show up to 4 items, enable vertical scroll when overflow */
+    height: 64.8rem; /* 4 * 16.2rem (customer-item height) */
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    .customer-item {
+      height: 16.2rem;
+      border-bottom: 0.26rem solid #e2e2e2b2;
+      .info {
+        .name {
+          font-size: 3.6rem;
+        }
+        .id {
+          font-size: 3.6rem;
+          color: #b3b3b3;
+        }
+      }
+      .checked-icon,
+      .check-box {
+        width: 6rem;
+        height: 6rem;
+        box-sizing: border-box;
+      }
+      .check {
+        width: 4.8rem;
+        height: 4.8rem;
+        border-radius: 50%;
+        border: 0.4rem solid #000;
+      }
+    }
+  }
+  .confirm-btn {
+    margin: 4.9rem 12.7rem 0 13.3rem;
+    border: 0.25rem solid #3b3b3b;
+    width: 82rem;
+    height: 14.5rem;
+    border-radius: 2rem;
+    font-family: 'satoshiBold';
+    font-weight: 700;
+    font-size: 4rem;
+    line-height: 14.5rem;
+    box-sizing: border-box;
+    text-align: center;
+  }
+}
 </style>
diff --git a/src/views/login/customer.vue b/src/views/login/customer.vue
index 413615e..ada4ffd 100644
--- a/src/views/login/customer.vue
+++ b/src/views/login/customer.vue
@@ -1,17 +1,17 @@
 <template>
   <div
     class="customer-container safe-area-top flex flex-column"
-    :class="{ 'form-mode': pageMode === 'form' }"
+    :class="{ 'form-mode': pageMode !== 'entry' }"
   >
     <div class="setting flex flex-between">
       <SvgIcon name="left" size="70" @click.stop="handleBack" />
-      <SvgIcon name="setting" size="70" />
+      <SvgIcon name="profile_white" size="55" @click="handleOpenProfile" />
     </div>
     <template v-if="pageMode === 'entry'">
       <div class="content flex-1 flex flex-center flex-column">
         <div class="text">Who is Your Customer?</div>
         <div class="btn-list flex flex-center">
-          <button class="sandblasted-blurred btn">
+          <button class="sandblasted-blurred btn" @click="handleChangeMode('create')">
             <span>Create</span>
           </button>
           <button class="sandblasted-blurred btn" @click="handleChangeMode('form')">
@@ -23,18 +23,27 @@
     <template v-else>
       <div class="form-container flex-1 flex flex-column flex-center">
         <div class="text">
-          <div class="form-title">Customer ID</div>
+          <div class="form-title">{{ formTitle }}</div>
           <div class="description">
             <p>Redefine the styling experience with AI.</p>
             <p>Use Styling Angel to speed up your fashion journey.</p>
           </div>
         </div>
 
-        <div class="glass-form">
+        <div class="glass-form" :class="{ create: pageMode === 'create' }">
+          <div class="form-field" v-if="pageMode === 'create'">
+            <label class="field-label">VIP ID</label>
+            <input
+              v-model="customerData.vipId"
+              type="text"
+              placeholder="Enter your ID"
+              class="form-input"
+            />
+          </div>
           <div class="form-field">
             <label class="field-label">Nickname</label>
             <input
-              v-model="customerData.vipId"
+              v-model="customerData.nickname"
               type="text"
               placeholder="Enter name"
               class="form-input"
@@ -42,41 +51,45 @@
           </div>
           <button class="confirm-btn" @click="handleConfirm">Confirm</button>
         </div>
-        <div class="show-all">Show All</div>
+        <div v-if="pageMode === 'form'" class="show-all" @click="handleShowPopup(true)">
+          Show All
+        </div>
         <div class="copyright">Powered by AiDLab for Lane Crawford</div>
       </div>
     </template>
+
+    <Profile ref="profileRef" @selected-customer="handleSelectCustomer" />
   </div>
 </template>
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { useGenerateStore, useUserInfoStore } from '@/stores'
 import { showToast } from 'vant'
 import { customerCheckin } from '@/api/workshop'
+import Profile from '../Workshop/profile.vue'
+
+const profileRef = ref<typeof Profile>(null)
+const handleOpenProfile = () => {
+  profileRef.value.open()
+}
 
 const router = useRouter()
 const generateStore = useGenerateStore()
 
-type PageMode = 'form' | 'entry'
+type PageMode = 'form' | 'entry' | 'create'
 const pageMode = ref<PageMode>('entry')
-
-const handleBack = (e?: Event) => {
-  e.stopPropagation()
-  e.preventDefault()
-  if (pageMode.value === 'form') {
-    pageMode.value = 'entry'
-    return
-  }
-  router.go(-1)
-}
+const formTitle = computed(() => {
+  return pageMode.value === 'entry' ? 'Customer ID' : 'Create Profile'
+})
 
 const handleChangeMode = (mode: PageMode) => {
   pageMode.value = mode
 }
 
 const customerData = ref({
-  vipId: ''
+  vipId: '',
+  nickname: ''
   // email: ''
 })
 
@@ -88,14 +101,41 @@ const handleConfirm = async () => {
     })
     return
   }
+  if (pageMode.value === 'form') {
+    await customerCheckin({ nickname: customerData.value.nickname }).then((res) => {
+      useUserInfoStore().resetGenerateParams()
+      generateStore.setCustomerInfo(res)
+      router.push('/workshop/home')
+    })
+  } else {
+    // 创建接口
+  }
+}
 
-  customerCheckin(customerData.value).then((res) => {
-    useUserInfoStore().resetGenerateParams()
-    // console.log('res', res)
-    generateStore.setCustomerInfo(res)
-    // router.push('/workshop/stylist/index')
-    router.push('/workshop/home')
-  })
+const handleShowPopup = (flag: Boolean) => {
+  // showPopup.value = flag
+  profileRef.value.openSwitchCustomerPopup(flag)
+}
+
+const handleSelectCustomer = (value) => {
+  console.log(value)
+  // if (selected) {
+  //   customerData.value.nickname = selected.nickname
+  // }
+}
+
+const handleBack = (e?: Event) => {
+  e.stopPropagation()
+  e.preventDefault()
+  if (pageMode.value !== 'entry') {
+    pageMode.value = 'entry'
+    customerData.value = {
+      vipId: '',
+      nickname: ''
+    }
+    return
+  }
+  router.go(-1)
 }
 </script>
 <style lang="less" scoped>
@@ -180,6 +220,9 @@ const handleConfirm = async () => {
       box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
       display: flex;
       flex-direction: column;
+      &.create {
+        height: 78.8rem;
+      }
 
       background: radial-gradient(
         100% 100% at 0% 0%,