diff --git a/src/assets/icons/arrow.svg b/src/assets/icons/arrow.svg
new file mode 100644
index 0000000..fab4b18
--- /dev/null
+++ b/src/assets/icons/arrow.svg
@@ -0,0 +1 @@
+<svg t="1760412391648" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7776" width="200" height="200"><path d="M728.3 126.040c18.8 18.8 18.801 49.1 0 67.901l-318 318 318 318c18.8 18.8 18.8 49.2 0 67.901-18.8 18.8-49.1 18.801-67.901 0l-352-352c-18.8-18.8-18.8-49.2 0-67.901l352-352c9.4-9.4 21.7-14 34-14 12.2 0.1 24.501 4.7 33.9 14.1z" p-id="7777" fill="currentColor"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/audio.svg b/src/assets/icons/audio.svg
new file mode 100644
index 0000000..9455a01
--- /dev/null
+++ b/src/assets/icons/audio.svg
@@ -0,0 +1 @@
+<svg t="1760424451063" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13798" width="200" height="200"><path d="M842 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 140.3-113.7 254-254 254S258 594.3 258 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 168.7 126.6 307.9 290 327.6V884H326.7c-13.7 0-24.7 14.3-24.7 32v36c0 4.4 2.8 8 6.2 8h407.6c3.4 0 6.2-3.6 6.2-8v-36c0-17.7-11-32-24.7-32H548V782.1c165.3-18 294-158 294-328.1z" p-id="13799" fill="#6d6868"></path><path d="M512 624c93.9 0 170-75.2 170-168V232c0-92.8-76.1-168-170-168s-170 75.2-170 168v224c0 92.8 76.1 168 170 168z m-94-392c0-50.6 41.9-92 94-92s94 41.4 94 92v224c0 50.6-41.9 92-94 92s-94-41.4-94-92V232z" p-id="13800" fill="#6d6868"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/more.svg b/src/assets/icons/more.svg
new file mode 100644
index 0000000..6ea8fa4
--- /dev/null
+++ b/src/assets/icons/more.svg
@@ -0,0 +1 @@
+<svg t="1760423133873" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11699" width="200" height="200"><path d="M522.666667 522.666667m-53.333334 0a53.333333 53.333333 0 1 0 106.666667 0 53.333333 53.333333 0 1 0-106.666667 0Z" fill="currentColor" p-id="11700"></path><path d="M266.666667 522.666667m-53.333334 0a53.333333 53.333333 0 1 0 106.666667 0 53.333333 53.333333 0 1 0-106.666667 0Z" fill="currentColor" p-id="11701"></path><path d="M778.666667 522.666667m-53.333334 0a53.333333 53.333333 0 1 0 106.666667 0 53.333333 53.333333 0 1 0-106.666667 0Z" fill="currentColor" p-id="11702"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/plus.svg b/src/assets/icons/plus.svg
new file mode 100644
index 0000000..1859beb
--- /dev/null
+++ b/src/assets/icons/plus.svg
@@ -0,0 +1 @@
+<svg t="1760425581189" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23717" width="200" height="200"><path d="M928 608H608v320a96 96 0 0 1-192 0V608H96a96 96 0 0 1 0-192h320V96a96 96 0 0 1 192 0v320h320a96 96 0 0 1 0 192z" fill="#6D6868" p-id="23718"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/refresh.svg b/src/assets/icons/refresh.svg
new file mode 100644
index 0000000..97cfae1
--- /dev/null
+++ b/src/assets/icons/refresh.svg
@@ -0,0 +1 @@
+<svg t="1760423069787" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9536" width="200" height="200"><path d="M733.04 379.104a264.112 264.112 0 0 0-468.112 41.76 14.336 14.336 0 0 1-17.968 8.16l-20.256-7.008a12.352 12.352 0 0 1-7.456-16.192 312.112 312.112 0 0 1 556.736-48.56l12.704-44.352a16 16 0 0 1 7.632-9.584l24.752-13.712a14.464 14.464 0 0 1 20.912 16.64l-38.128 132.96a11.136 11.136 0 0 1-13.76 7.632l-132.96-38.128a14.464 14.464 0 0 1-3.04-26.56l24.752-13.712a16 16 0 0 1 12.16-1.392l42.032 12.048z m-447.52 280.352a264.112 264.112 0 0 0 468.112-41.76 14.336 14.336 0 0 1 17.968-8.16l20.256 7.008a12.352 12.352 0 0 1 7.44 16.176c-46.368 118.032-160.8 199.072-290.432 199.072-110.96 0-210.768-59.296-266.304-150.432l-12.704 44.288a16 16 0 0 1-7.616 9.584l-24.752 13.712a14.464 14.464 0 0 1-20.928-16.64l38.128-132.96a11.136 11.136 0 0 1 13.76-7.632l132.976 38.128a14.464 14.464 0 0 1 3.04 26.56l-24.768 13.712a16 16 0 0 1-12.16 1.392l-42.016-12.048z" fill="currentColor" p-id="9537"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/setting.svg b/src/assets/icons/setting.svg
index 4273101..1a34ce5 100644
--- a/src/assets/icons/setting.svg
+++ b/src/assets/icons/setting.svg
@@ -1 +1,9 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1760087026383" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4682" width="200" height="200" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56c10.1-8.6 13.8-22.6 9.3-35.2l-0.9-2.6c-18.1-50.5-44.9-96.9-79.7-137.9l-1.8-2.1c-8.6-10.1-22.5-13.9-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85c-2.4-13.1-12.7-23.3-25.8-25.7l-2.7-0.5c-52.1-9.4-106.9-9.4-159 0l-2.7 0.5c-13.1 2.4-23.4 12.6-25.8 25.7l-15.8 85.4c-35.9 13.6-69.2 32.9-99 57.4l-81.9-29.1c-12.5-4.4-26.5-0.7-35.1 9.5l-1.8 2.1c-34.8 41.1-61.6 87.5-79.7 137.9l-0.9 2.6c-4.5 12.5-0.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5c-10.1 8.6-13.8 22.6-9.3 35.2l0.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1c8.6 10.1 22.5 13.9 35.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4c2.4 13.1 12.7 23.3 25.8 25.7l2.7 0.5c26.1 4.7 52.8 7.1 79.5 7.1 26.7 0 53.5-2.4 79.5-7.1l2.7-0.5c13.1-2.4 23.4-12.6 25.8-25.7l15.7-85c36.2-13.6 69.7-32.9 99.7-57.6l81.3 28.9c12.5 4.4 26.5 0.7 35.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l0.9-2.6c4.5-12.3 0.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9c-11.3 26.1-25.6 50.7-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97c-28.1 3.2-56.8 3.2-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9z" p-id="4683" fill="#ffffff"></path><path d="M512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176z m79.2 255.2C570 602.3 541.9 614 512 614c-29.9 0-58-11.7-79.2-32.8C411.7 560 400 531.9 400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8C612.3 444 624 472.1 624 502c0 29.9-11.7 58-32.8 79.2z" p-id="4684" fill="currentColor"></path></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="294" height="328">
+<path d="M0 0 C97.02 0 194.04 0 294 0 C294 108.24 294 216.48 294 328 C196.98 328 99.96 328 0 328 C0 219.76 0 111.52 0 0 Z " fill="#FDFDFD" transform="translate(0,0)"/>
+<path d="M0 0 C97.02 0 194.04 0 294 0 C294 108.24 294 216.48 294 328 C196.98 328 99.96 328 0 328 C0 295.33 0 262.66 0 229 C0.33 229 0.66 229 1 229 C1.15855469 229.68964844 1.31710938 230.37929687 1.48046875 231.08984375 C4.38042778 242.76978922 9.44340429 252.74822442 19.875 259.25 C32.12022978 266.1344995 43.56240003 267.42121518 57.05078125 263.8671875 C59.62583444 263.11001954 62.11080455 262.24697973 64.625 261.3125 C73.55403779 258.29332895 81.6703721 259.89276412 90 264 C95.82995217 267.61215492 99.56407501 272.62493982 102 279 C102.8796309 282.76630697 103.58139766 286.54201135 104.26953125 290.34765625 C106.67225431 302.36127157 112.82696998 311.25147276 122.66015625 318.49609375 C132.74307345 324.97676674 143.23662285 326.21998368 155 325 C166.67240199 322.16142845 176.034178 315.74873618 183 306 C187.27295522 298.93775456 189.030148 291.40245618 190.48120117 283.36962891 C192.03363211 275.28850575 196.21154742 269.45508265 202.921875 264.61328125 C206.5413373 262.23885955 209.60640572 260.31382816 214 260 C214.99 259.88978516 214.99 259.88978516 216 259.77734375 C223.05710507 259.3246676 228.95762467 261.41226596 235.484375 263.80859375 C244.36497205 266.81812942 253.1182567 266.88864175 262 264 C263.17369141 263.63261719 263.17369141 263.63261719 264.37109375 263.2578125 C274.75055025 259.59828493 282.98978392 252.84820598 288 243 C292.72118257 232.89371855 293.53107502 221.62508889 291.375 210.6875 C287.75063678 200.96761681 282.88928647 193.8890069 274.953125 187.30078125 C269.398344 182.65439489 265.31871888 177.95615664 263 171 C262.26162838 160.74799399 263.13078862 151.93329928 269.48828125 143.609375 C271.72045117 141.23300806 274.30345232 139.47044081 276.94921875 137.58203125 C284.47649277 131.77527701 289.97849081 123.31604986 292 114 C292.88928037 99.42163334 291.71324611 86.66938595 282 75 C273.25735029 65.67325085 262.28235114 61.11838855 249.625 60.6875 C242.93869921 60.81823773 236.87378454 62.58555893 230.625 64.8671875 C221.84762339 68.06727272 214.58762989 67.77335253 206 64 C198.29745801 59.77115341 193.8176815 53.86834338 190.7890625 45.73046875 C189.95895323 42.85796194 189.51995507 40.08716299 189.125 37.125 C187.77703097 27.79753572 183.22701357 18.6669764 176.140625 12.33984375 C164.32227357 3.5737525 152.65533973 0.62970175 138 2 C125.87912849 4.38621184 117.2465897 11.18755772 110 21 C105.70679471 28.10714555 104.1979525 35.47937803 102.7421875 43.53515625 C101.09403833 51.22941053 97.41201489 57.76906719 90.75 62.125 C82.03495066 66.68649391 74.78640241 68.5767485 65.125 65.6875 C63.41454948 65.13147119 61.70626145 64.56875382 60 64 C47.6797625 60.08152905 36.26761532 59.48052431 24.30859375 65.3125 C22.76915202 66.18229693 21.24436879 67.07904575 19.7421875 68.01171875 C18 69 18 69 16 69 C15.67 69.99 15.34 70.98 15 72 C14.2575 72.556875 13.515 73.11375 12.75 73.6875 C5.22768554 80.01308262 3.31009083 88.8112588 1 98 C0.67 98 0.34 98 0 98 C0 65.66 0 33.32 0 0 Z " fill="#FDFDFD" transform="translate(0,0)"/>
+<path d="M0 0 C9.9585216 6.07836184 17.88865289 15.08208935 22 26 C22.52730389 28.63651944 22.98252494 31.22163851 23.375 33.875 C24.95804298 43.15777631 27.71693201 49.89533613 35.23828125 55.78515625 C41.94679983 60.41120786 48.90379974 62.04867218 57 61 C60.91073134 59.8692353 64.72156196 58.57741828 68.546875 57.19140625 C79.89924308 53.27458242 90.95528631 54.46736923 101.85546875 59.25390625 C114.20868458 65.5071893 120.67224349 74.31303757 125.140625 87.3203125 C127.56391453 97.69639769 127.44554873 109.65995666 122 119 C121.55269531 119.77601562 121.10539062 120.55203125 120.64453125 121.3515625 C116.36067518 128.21951406 111.71128005 134.13581027 104 137 C102.84077872 138.73142854 102.84077872 138.73142854 102 141 C100.98531607 142.71841634 99.94757775 144.42110939 98.90234375 146.12109375 C95.73395011 152.71848484 96.02991988 161.55266085 97.5546875 168.54296875 C100.46388805 175.71979821 106.40113948 180.21359834 112.03735352 185.24145508 C120.77013264 193.21214474 125.46139696 201.71787451 126.23828125 213.6640625 C126.49947545 227.60358471 123.69926154 238.42341832 114 249 C104.18599591 257.72844908 93.41895133 262.34887137 80.2734375 262.15234375 C75.61392225 261.84010819 71.35407382 260.45599915 66.9609375 258.9765625 C56.68302529 255.58268517 48.06683265 254.24511264 38 259 C35.15399323 261.05787515 35.15399323 261.05787515 33 263 C32.34 263 31.68 263 31 263 C30.70996094 263.59167969 30.41992188 264.18335938 30.12109375 264.79296875 C29.16847557 266.66833207 28.12449286 268.49683479 27.0625 270.3125 C25.09959817 274.17382879 24.40417784 277.86474839 23.6875 282.125 C21.4202353 294.29790782 16.19137707 305.47566459 6 313 C-6.09364558 320.34553902 -18.1932939 323.18237617 -32.2109375 320.3515625 C-44.11285402 316.36152172 -53.80741315 308.27111804 -59.75 297.25 C-62.65840414 291.05176168 -64.16430116 284.4859683 -65.4140625 277.77734375 C-66.73029087 271.28653129 -69.82335841 265.65471873 -74.92578125 261.390625 C-82.00166076 256.71917057 -89.59460721 254.86593907 -98 256 C-101.90598438 257.12641458 -105.66856203 258.40759966 -109.484375 259.80859375 C-120.97259322 263.70182326 -132.28427069 262.4324918 -143.125 257.3125 C-155.19190186 250.8922894 -161.83078473 241.94651059 -166 229 C-166.83981112 225.45070382 -167.13066144 222.16367684 -167.14717102 218.51966858 C-167.15432632 217.43077332 -167.16148163 216.34187805 -167.16885376 215.21998596 C-167.17154266 214.03501022 -167.17423157 212.85003448 -167.17700195 211.62915039 C-167.18357315 210.37319061 -167.19014435 209.11723083 -167.19691467 207.82321167 C-167.21789169 203.66470604 -167.22831589 199.50620034 -167.23828125 195.34765625 C-167.24233216 193.91007405 -167.24644918 192.47249203 -167.25063133 191.0349102 C-167.26967456 184.27420471 -167.28390348 177.51351002 -167.2922433 170.75278288 C-167.30199171 162.9807243 -167.32825173 155.20895235 -167.36874419 147.43699461 C-167.39905136 141.4103956 -167.41372618 135.38387803 -167.41702431 129.35720438 C-167.41935956 125.76736003 -167.42811731 122.1778221 -167.45348549 118.58806038 C-167.48141905 114.57032846 -167.47689091 110.55322369 -167.4699707 106.53540039 C-167.48278076 105.36864273 -167.49559082 104.20188507 -167.50878906 102.99977112 C-167.42284825 89.20885779 -163.87165544 77.42172293 -154.37890625 67.265625 C-144.90543615 58.45098136 -133.36402073 54.46180158 -120.56640625 54.7421875 C-114.9826059 55.30311722 -109.70061977 57.09979341 -104.3984375 58.8671875 C-94.18458375 62.18748051 -86.82263025 61.51903756 -77 57 C-70.61941772 53.11616731 -66.7828645 46.13145801 -65 39 C-64.896875 38.15953125 -64.79375 37.3190625 -64.6875 36.453125 C-62.95129979 22.78054836 -56.88840862 11.56446469 -46 3 C-32.33674388 -5.62620498 -14.64272968 -7.18865128 0 0 Z M-43.3125 20.8125 C-47.51784533 26.26387358 -49.01384092 31.4030146 -49.8125 38.1875 C-51.12542607 48.09834903 -56.20151316 59.42168457 -64 66 C-75.01182977 73.79927235 -86.49513334 77.22326691 -100 76 C-104.12255323 74.94944598 -108.03219599 73.52265868 -112 72 C-119.59936692 69.22686354 -127.04439405 68.86746512 -134.703125 71.7734375 C-141.92414646 75.6295612 -147.9327088 81.67877776 -151.22265625 89.1953125 C-153.43051827 97.16136742 -153.15699118 105.68478939 -149.2578125 113.046875 C-146.13871663 117.89019157 -142.80411807 121.52913584 -138.0625 124.8125 C-133.12595413 128.37096615 -130.08006693 132.80677322 -127 138 C-126.56300781 138.71414062 -126.12601563 139.42828125 -125.67578125 140.1640625 C-120.99747325 149.45501803 -121.65174812 161.9049074 -123.84765625 171.83203125 C-126.65009621 179.84035968 -131.30298016 188.18445685 -138.75 192.6484375 C-139.4925 193.09445313 -140.235 193.54046875 -141 194 C-141 194.66 -141 195.32 -141 196 C-141.556875 196.185625 -142.11375 196.37125 -142.6875 196.5625 C-147.06028782 199.28071946 -149.35215697 203.4575166 -151.3125 208.125 C-153.03222855 217.81801549 -152.80536405 225.61244581 -147.8984375 234.33203125 C-143.45731069 240.57336789 -137.73324213 244.20346937 -130.53125 246.58984375 C-122.93268744 247.82109231 -117.01312058 246.63677081 -109.875 244 C-97.60213364 239.84934304 -87.12932777 239.17457189 -74.9375 244.5234375 C-66.6068499 248.71091853 -61.2882345 253.28437917 -56 261 C-55.4225 261.804375 -54.845 262.60875 -54.25 263.4375 C-51.34985191 269.38280358 -50.02027595 275.53353656 -49.1875 282.0625 C-47.89404433 290.32153254 -43.49352225 296.61361672 -36.9765625 301.78125 C-29.36645459 306.47364855 -20.54010105 307.00161267 -11.9375 305.375 C-4.78666124 303.35225278 0.82960035 297.95771379 5 292 C7.38679148 286.95101803 8.34823075 282.18327733 9.3125 276.6875 C11.65926339 264.35163378 17.47931594 255.0090742 27.6875 247.8125 C37.76759818 241.4067997 48.13829542 239.31043037 60 241 C63.561154 242.11966414 66.95278766 243.48098542 70.4140625 244.875 C77.93498917 247.23450641 87.02360675 247.29561176 94.5625 244.875 C101.52602425 241.07671405 106.61069841 236.26879143 110 229 C112.21896797 220.52240444 112.55113421 210.44841517 108.15234375 202.68359375 C104.54937504 198.19132605 100.17953692 194.51267936 95.89013672 190.68798828 C90.07066628 185.38227742 86.64325607 180.50378892 84 173 C83.63390625 172.06671875 83.2678125 171.1334375 82.890625 170.171875 C80.05272084 160.06495316 81.14854333 148.25782557 86 139 C88.23216147 135.17676782 90.48403913 131.46320121 93.68359375 128.375 C95.23051624 127.07648382 95.23051624 127.07648382 95 125 C95.680625 124.814375 96.36125 124.62875 97.0625 124.4375 C103.69014299 121.19418534 107.91150736 115.8523964 110.3359375 108.9375 C112.33616015 100.08945626 112.30915811 91.08014898 107.60546875 83.1484375 C102.52441482 76.3489736 96.2412702 72.10415409 88 70 C79.88403707 68.88753156 72.70976564 71.07327769 65.25 74.125 C54.77118237 78.20009574 43.44308817 75.83546216 33.29296875 71.96875 C23.5879883 67.55603999 17.45805483 60.56197625 13 51 C12.48695313 49.9171875 11.97390625 48.834375 11.4453125 47.71875 C9.9393144 43.8438576 9.26438543 40.14469773 8.6875 36.0625 C7.57605745 29.37700467 5.92856042 24.74388368 1 20 C0.43925781 19.43925781 -0.12148437 18.87851562 -0.69921875 18.30078125 C-7.7983716 11.71212928 -13.918283 10.40623762 -23.49609375 10.66015625 C-31.83616821 11.46905979 -37.6819545 14.637063 -43.3125 20.8125 Z " fill="#030303" transform="translate(167,5)"/>
+<path d="M0 0 C8.10295267 7.55715793 12.98145888 15.89006687 14 27 C14.14613789 40.20112255 10.35543048 50.00167843 1.48046875 59.65234375 C-7.05347448 67.81253764 -17.2084888 69.77329874 -28.62670898 69.66186523 C-38.95547902 69.20087303 -46.86363071 64.89820415 -54.3203125 57.84375 C-57.08818569 54.80552641 -59.16420706 51.67158588 -61 48 C-61.3196875 47.38125 -61.639375 46.7625 -61.96875 46.125 C-65.7101629 37.25646573 -65.70385085 24.35871882 -62.375 15.375 C-61.24609375 13.09375 -61.24609375 13.09375 -60 11 C-59.39865234 9.96359375 -59.39865234 9.96359375 -58.78515625 8.90625 C-52.62016747 -0.38590701 -43.04504165 -5.73088569 -32.5625 -8.6875 C-20.56190614 -10.15098706 -9.67987676 -7.38431726 0 0 Z " fill="#FDFDFD" transform="translate(172,133)"/>
+<path d="M0 0 C14.51216876 -0.84722642 27.49096714 5.28545998 38.26171875 14.44140625 C48.68674043 24.19542968 55.38083438 36.35271375 56.296875 50.671875 C56.6715264 66.6515718 52.36433448 80.81809898 41.26171875 92.62890625 C31.80726095 101.23724526 19.04780882 108.4429299 6.07421875 109.19140625 C5.43871094 109.24167969 4.80320313 109.29195313 4.1484375 109.34375 C-11.46391188 110.0572943 -24.51018617 103.72964626 -36.30078125 94.06640625 C-46.95274206 83.8173979 -52.54454977 69.27937968 -53.42578125 54.62890625 C-52.53464218 39.06367714 -45.45732236 23.61591941 -33.92578125 13.19140625 C-33.26578125 13.19140625 -32.60578125 13.19140625 -31.92578125 13.19140625 C-31.92578125 12.53140625 -31.92578125 11.87140625 -31.92578125 11.19140625 C-22.5300453 3.915947 -11.5565006 1.14861771 0 0 Z M-28.36328125 28.69140625 C-36.77958163 39.53315343 -37.8545162 49.91428721 -36.92578125 63.19140625 C-35.38303063 73.33148532 -28.44548511 81.53727085 -20.52734375 87.62109375 C-13.42721805 91.90675521 -7.43772634 93.90316215 0.88671875 93.75390625 C1.76183105 93.74222412 2.63694336 93.73054199 3.53857422 93.71850586 C14.73831212 93.33855542 22.8265387 89.51733241 30.87890625 81.7109375 C38.79503488 72.62570091 41.44434846 62.96123671 40.94921875 51.12890625 C39.90248597 40.02391369 34.92452965 31.41725829 26.69921875 23.94140625 C10.0402961 10.49736341 -14.01357322 12.68318925 -28.36328125 28.69140625 Z " fill="#040404" transform="translate(144.92578125,108.80859375)"/>
+<path d="M0 0 C2.3364192 2.3364192 2.71392579 3.93032234 3.6875 7.0625 C6.93843452 16.13213617 12.65336418 21.77034511 19.6875 28.0625 C26.67897523 34.41838657 29.96174132 38.27221642 30.55859375 48.06103516 C30.81088046 56.6146676 29.41602687 63.09297279 24 70 C19.90697674 74 19.90697674 74 17 74 C17 74.66 17 75.32 17 76 C15.82358958 76.99726162 14.60712043 77.94744867 13.375 78.875 C6.16306945 85.00002612 2.75398817 93.8792615 1 103 C0.67 103 0.34 103 0 103 C0 69.01 0 35.02 0 0 Z " fill="#FCFCFC" transform="translate(0,113)"/>
+</svg>
diff --git a/src/assets/icons/thumbdown.svg b/src/assets/icons/thumbdown.svg
new file mode 100644
index 0000000..d2cc25b
--- /dev/null
+++ b/src/assets/icons/thumbdown.svg
@@ -0,0 +1 @@
+<svg t="1760422981103" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7310" width="200" height="200"><path d="M792.448 128c54.784 0 99.84 42.154667 103.338667 95.658667L896 230.4v246.4c0 54.4-42.837333 98.730667-96.725333 102.186667l-6.826667 0.213333h-86.613333L571.306667 877.226667a32 32 0 0 1-24.533334 18.474666l-4.650666 0.341334c-74.154667 0-134.954667-57.301333-139.093334-129.749334l-0.213333-7.850666v-108.8H232.746667a104.234667 104.234667 0 0 1-67.413334-23.68l-6.058666-5.418667-5.674667-5.888a101.717333 101.717333 0 0 1-25.301333-74.752l0.938666-8.106667 49.365334-316.757333A103.082667 103.082667 0 0 1 274.773333 128.170667L281.685333 128h510.762667zM717.226667 192v323.2h75.264c20.394667 0 37.034667-14.933333 39.253333-33.92l0.298667-4.48V230.4a38.826667 38.826667 0 0 0-34.901334-38.144l-4.650666-0.256H717.226667z m-194.602667 637.482667l130.56-289.194667V192H281.386667a39.594667 39.594667 0 0 0-36.992 23.765333l-1.536 4.394667-1.024 4.608-49.365334 316.757333c-1.706667 11.008 1.621333 22.186667 9.088 30.72a39.893333 39.893333 0 0 0 25.728 13.098667l5.12 0.256h202.410667a32 32 0 0 1 31.701333 27.648l0.298667 4.352v140.8c0 30.293333 18.773333 56.362667 45.610667 67.669333l5.845333 2.176 4.352 1.28z" fill="currentColor" p-id="7311"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/thumbup.svg b/src/assets/icons/thumbup.svg
new file mode 100644
index 0000000..8f643a0
--- /dev/null
+++ b/src/assets/icons/thumbup.svg
@@ -0,0 +1 @@
+<svg t="1760423035671" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8505" width="200" height="200"><path d="M832 364.8h-147.2s19.2-64 32-179.2c6.4-57.6-38.4-115.2-102.4-121.6h-12.8c-51.2 0-83.2 32-102.4 76.8l-38.4 96c-32 64-57.6 102.4-76.8 115.2-25.6 12.8-121.6 12.8-128 12.8H128c-38.4 0-64 25.6-64 57.6v480c0 32 25.6 57.6 64 57.6h646.4c96 0 121.6-64 134.4-153.6l51.2-307.2c6.4-70.4-6.4-134.4-128-134.4z m-576 537.6H128V422.4h128v480z m640-409.6l-51.2 307.2c-12.8 57.6-12.8 102.4-76.8 102.4H320V422.4c44.8 0 70.4-6.4 89.6-19.2 32-12.8 64-64 108.8-147.2 25.6-64 38.4-96 44.8-102.4 6.4-19.2 19.2-32 44.8-32h6.4c32 0 44.8 32 44.8 51.2-12.8 102.4-32 166.4-32 166.4l-25.6 83.2h243.2c19.2 0 32 0 44.8 12.8 12.8 12.8 6.4 38.4 6.4 57.6z" p-id="8506" fill="currentColor"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/upload.svg b/src/assets/icons/upload.svg
new file mode 100644
index 0000000..a796c81
--- /dev/null
+++ b/src/assets/icons/upload.svg
@@ -0,0 +1 @@
+<svg t="1760423103746" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10594" width="200" height="200"><path d="M823.424 395.296l-287.52-289.248c-3.2-3.2-6.88-5.536-10.816-7.104C521.056 97.12 516.672 96 512 96c-11.264 0-20.704 6.176-26.4 14.976l-254.4 253.952c-12.512 12.48-12.544 32.736-0.032 45.248 6.24 6.272 14.432 9.376 22.656 9.376 8.16 0 16.352-3.104 22.624-9.344L480 206.976 480 768c0 17.696 14.336 32 32 32s32-14.304 32-32L544 204.96l234.048 235.456c6.24 6.272 14.464 9.44 22.688 9.44 8.16 0 16.32-3.104 22.56-9.312C835.84 428.096 835.904 407.84 823.424 395.296z" fill="currentColor" p-id="10595"></path><path d="M896 704c-17.696 0-32 14.304-32 32l0 128L160 864l0-128c0-17.696-14.336-32-32-32s-32 14.304-32 32l0 160c0 17.696 14.336 32 32 32l768 0c17.696 0 32-14.304 32-32l0-160C928 718.304 913.696 704 896 704z" fill="currentColor" p-id="10596"></path></svg>
\ No newline at end of file
diff --git a/src/assets/images/chat_loading.png b/src/assets/images/chat_loading.png
new file mode 100644
index 0000000..66441fd
Binary files /dev/null and b/src/assets/images/chat_loading.png differ
diff --git a/src/assets/images/customer_form_bg.png b/src/assets/images/customer_form_bg.png
new file mode 100644
index 0000000..09b715e
Binary files /dev/null and b/src/assets/images/customer_form_bg.png differ
diff --git a/src/router/index.ts b/src/router/index.ts
index 6ad1ce5..e36fdbb 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -25,26 +25,36 @@ const router = createRouter({
     {
       path: '/stylist',
       name: 'StylistPage',
-      component: () => import('@/views/stylist/index.vue'),
+      redirect:'/stylist/index',
+      component: () => import('@/views/stylist/container.vue'),
       children: [
         {
-          path: '/stylist/sex',
+          path: 'index',
+          name: 'index',
+          component: () => import('@/views/stylist/index.vue')
+        },
+        {
+          path: 'sex',
           name: 'sex',
           component: () => import('@/views/stylist/sex.vue')
         },
         {
-          path: '/stylist/dressfor',
+          path: 'dressfor',
           name: 'dressfor',
           component: () => import('@/views/stylist/dressfor.vue')
         },
         {
-          path: '/stylist/customer',
+          path: 'customer',
           name: 'customer',
           component: () => import('@/views/stylist/customer.vue')
         }
       ]
     },
-
+    {
+      path: '/asistant',
+      name: 'asistant',
+      component: () => import('../views/asistant/index.vue')
+    },
     {
       path: '/workshop',
       name: 'Workshop',
diff --git a/src/views/asistant/components/ChatLoading.vue b/src/views/asistant/components/ChatLoading.vue
new file mode 100644
index 0000000..ab170ee
--- /dev/null
+++ b/src/views/asistant/components/ChatLoading.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="chat-loading">
+    <div class="loading-container flex flex-column flex-align-center">
+      <img src="@/assets/images/chat_loading.png" alt="Loading" class="loading-image" />
+      <!-- 阴影效果 -->
+      <div class="loading-shadow"></div>
+      <div class="loading-text">Analyzing the Outfit...</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 这个组件只负责显示loading动画
+interface LoadingProps {
+  // 可以在这里定义props类型
+}
+
+// 定义组件props类型
+const props = defineProps<LoadingProps>()
+</script>
+
+<style lang="less" scoped>
+.chat-loading {
+  display: flex;
+  justify-content: flex-start;
+}
+
+.loading-container {
+  position: relative;
+}
+
+.loading-image {
+  width: 36.4rem;
+  height: 36.4rem;
+  animation: rotate 1s linear infinite;
+}
+
+.loading-shadow {
+  width: 19.6rem;
+  height: 5.2rem;
+  background-color: #d9d9d9;
+  border-radius: 50%;
+  filter: blur(35.5px);
+  margin-top: 5.1rem;
+  margin-bottom: 6.4rem;
+}
+
+.loading-text{
+  font-family: 'satoshiRegular';
+  font-size: 4.8rem;
+  letter-spacing: 0.02em;
+  line-height: 124%;
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>
diff --git a/src/views/asistant/components/InputArea.vue b/src/views/asistant/components/InputArea.vue
new file mode 100644
index 0000000..78591b7
--- /dev/null
+++ b/src/views/asistant/components/InputArea.vue
@@ -0,0 +1,121 @@
+<template>
+  <div class="input-area">
+    <div class="input-container">
+      <!-- 加号图标 -->
+      <div class="icon-wrapper">
+        <SvgIcon name="plus" size="40" />
+      </div>
+
+      <!-- 分隔线 -->
+      <div class="divider"></div>
+
+      <!-- 输入框 -->
+      <div class="input-wrapper">
+        <input
+          v-model="inputValue"
+          type="text"
+          placeholder="Ask anything about your desired outfit"
+          class="text-input"
+          @keyup.enter="handleSend"
+        />
+      </div>
+
+      <!-- 语音图标 -->
+      <div class="icon-wrapper">
+        <SvgIcon name="audio" size="52" />
+      </div>
+
+      <!-- 发送图标 -->
+      <div class="icon-wrapper send-icon" @click="handleSend">
+        <SvgIcon name="send" size="46" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import SvgIcon from '@/components/SvgIcon/index.vue'
+
+interface InputAreaEmits {
+  'send-message': [message: string]
+}
+
+const inputValue = ref<string>('')
+
+const emit = defineEmits<InputAreaEmits>()
+
+const handleSend = (): void => {
+  if (inputValue.value.trim()) {
+    console.log('input发送消息:', inputValue.value)
+    emit('send-message', inputValue.value)
+    inputValue.value = ''
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.input-area {
+  background-color: #fff;
+}
+
+.input-container {
+  display: flex;
+  align-items: center;
+  background-color: #efefef;
+  padding: 0 4.85rem 0 5.2rem;
+  height: 19.3rem;
+}
+
+.icon-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+
+  &.send-icon {
+    margin-left: 4.38rem;
+  }
+}
+
+.divider {
+  width: 2px;
+  height: 14.9rem;
+  margin-left: 5.59rem;
+  margin-right: 3.5rem;
+  background-color: #888;
+}
+
+.input-wrapper {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+
+.text-input {
+  width: 100%;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 4rem;
+  font-family: 'robotoBold';
+  font-weight: 400;
+  line-height: 121%;
+  // padding-right: 2rem;
+  margin-right: 4.21rem;
+  color: #888;
+
+  &::placeholder {
+    color: #888;
+  }
+}
+
+// 确保图标颜色为 #6d6868
+:deep(.svg-icon) {
+  color: #6d6868;
+
+  svg {
+    fill: #6d6868;
+  }
+}
+</style>
diff --git a/src/views/asistant/components/NoticeItem.vue b/src/views/asistant/components/NoticeItem.vue
new file mode 100644
index 0000000..ade14ad
--- /dev/null
+++ b/src/views/asistant/components/NoticeItem.vue
@@ -0,0 +1,149 @@
+<template>
+  <div
+    class="chat-message"
+    :class="{ 'user-message': value.userId === '1', 'ai-message': value.userId !== '1' }"
+  >
+    <!-- AI消息显示头像 -->
+    <div v-if="value.userId !== '1'" class="chat-avatar">
+      <img :src="value.thumb" alt="AI Avatar" />
+    </div>
+
+    <!-- 消息内容 -->
+    <div class="message-content">
+      <div class="message-text">
+        {{ value.content }}
+      </div>
+      <!-- AI消息显示操作栏 -->
+      <div v-if="value.userId !== '1'" class="message-actions flex">
+        <SvgIcon
+          v-for="item in actionList"
+          :key="item.value"
+          :name="item.icon"
+          size="39"
+          @click.stop="handleClickAction(item.value)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 定义消息类型
+interface ChatMessage {
+  id: string
+  content: string
+  userId: string
+  time: string
+  thumb: string
+}
+
+// 定义操作项类型
+interface ActionItem {
+  value: string
+  icon: string
+}
+
+// 定义组件props类型
+interface NoticeItemProps {
+  value: ChatMessage
+}
+
+const props = defineProps<NoticeItemProps>()
+
+const handleClickAction = (value: string): void => {
+  console.log('click Action', value)
+}
+
+const actionList: ActionItem[] = [
+  {
+    value: 'thumbup',
+    icon: 'thumbup'
+  },
+  {
+    value: 'thumbdown',
+    icon: 'thumbdown'
+  },
+  {
+    value: 'refresh',
+    icon: 'refresh'
+  },
+  {
+    value: 'upload',
+    icon: 'upload'
+  },
+  {
+    value: 'more',
+    icon: 'more'
+  }
+]
+</script>
+
+<style lang="less" scoped>
+.chat-message {
+  display: flex;
+  margin-bottom: 16px;
+  align-items: flex-start;
+  .message-text {
+    font-size: 4.2rem;
+    font-family: 'robotoBold';
+    line-height: 121%;
+    font-weight: 400;
+    background-color: #efefef;
+    padding: 4.95rem 3.95rem;
+  }
+
+  &.user-message {
+    justify-content: flex-end;
+
+    .message-content {
+      align-items: flex-end;
+
+      .message-text {
+        border-radius: 2rem 2rem 0 2rem;
+      }
+    }
+  }
+
+  &.ai-message {
+    justify-content: flex-start;
+
+    .message-content {
+      align-items: flex-start;
+
+      .message-text {
+        color: #000;
+        border-radius: 0 2rem 2rem 2rem;
+      }
+    }
+  }
+}
+
+.chat-avatar {
+  width: 7.8rem;
+  height: 7.4rem;
+  border-radius: 50%;
+  margin-right: 1.88rem;
+
+  img {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    object-fit: cover;
+  }
+}
+
+.message-content {
+  display: flex;
+  flex-direction: column;
+  max-width: 70%;
+}
+
+.message-actions {
+  margin-top: 2.6rem;
+  color: #6b6b6b;
+  column-gap: 1.61rem;
+  .svg-icon {
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/src/views/asistant/components/NoticeList.vue b/src/views/asistant/components/NoticeList.vue
new file mode 100644
index 0000000..ca2b8e7
--- /dev/null
+++ b/src/views/asistant/components/NoticeList.vue
@@ -0,0 +1,103 @@
+<template>
+  <div class="chat-list">
+    <div class="chat-message-item" v-for="message in chatMessages" :key="message.id">
+      <NoticeItem :value="message" @send-message="handleSendMessage" />
+    </div>
+    <!-- Loading效果 -->
+    <div v-if="isLoading" class="chat-message-item">
+      <ChatLoading />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import NoticeItem from './NoticeItem.vue'
+import ChatLoading from './ChatLoading.vue'
+import { ref, onMounted, onUnmounted } from 'vue'
+
+// 定义消息类型
+interface ChatMessage {
+  id: string
+  content: string
+  userId: string
+  time: string
+  thumb: string
+}
+
+// 定义组件暴露的方法类型
+interface NoticeListExpose {
+  simulateSendMessage: () => void
+}
+
+const isLoading = ref<boolean>(false)
+let loadingTimer: any = null
+
+const chatMessages = ref<ChatMessage[]>([
+  {
+    id: '1',
+    content: 'I want a chic outfit for dinner.',
+    userId: '1',
+    time: '14:30',
+    thumb: ''
+  },
+  {
+    id: '2',
+    content:
+      "Hey there! A chic dinner outfit, I love that! To give you the perfect recommendations, tell me: is this a romantic date, business dinner, or celebration with friends? And what's your go-to style vibe: classic elegance or something with more edge?",
+    userId: '2',
+    time: '14:31',
+    thumb: 'https://files-dev.deercal.com/uploads/platforms/logo_code/669933e1b873e798.jpg'
+  },
+  {
+    id: '3',
+    content: "It's a romantic date, and I prefer classic elegance.",
+    userId: '1',
+    time: '14:32',
+    thumb: ''
+  },
+  {
+    id: '4',
+    content:
+      "Perfect! For a romantic dinner with classic elegance, I'd suggest a little black dress with delicate jewelry and elegant heels. Would you like me to show you some specific options?",
+    userId: '2',
+    time: '14:33',
+    thumb: 'https://files-dev.deercal.com/uploads/platforms/logo_code/669933e1b873e798.jpg'
+  }
+])
+
+const handleSendMessage = (message: string): void => {
+  console.log('list发送消息:', message)
+}
+
+const simulateSendMessage = (): void => {
+  isLoading.value = true
+
+  loadingTimer = setTimeout(() => {
+    const newMessage: ChatMessage = {
+      id: Date.now().toString(),
+      content:
+        "Thanks for your message! I'm processing your request and will provide you with the best fashion advice.",
+      userId: '2',
+      time: new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }),
+      thumb: 'https://files-dev.deercal.com/uploads/platforms/logo_code/669933e1b873e798.jpg'
+    }
+
+    chatMessages.value.push(newMessage)
+    isLoading.value = false
+  }, 3000)
+}
+</script>
+
+<style lang="less" scoped>
+.chat-list {
+  padding: 16px;
+  background-color: #fff;
+  height: 100%;
+  overflow-y: auto;
+  flex: 1;
+}
+
+.chat-message-item {
+  margin-bottom: 4.84rem;
+}
+</style>
diff --git a/src/views/asistant/index.vue b/src/views/asistant/index.vue
new file mode 100644
index 0000000..bd17cfe
--- /dev/null
+++ b/src/views/asistant/index.vue
@@ -0,0 +1,98 @@
+<template>
+  <div class="asistant-container flex flex-column">
+    <div class="header">
+      <HeaderTitle light hasSetting />
+    </div>
+    <div class="content flex-1" v-if="!isLoading">
+      <NoticeList ref="noticeListRef" @send-message="handleSendMessage" />
+    </div>
+    <div class="footer" v-if="!isLoading">
+      <InputArea @send-message="handleSendMessage" />
+      <div class="continue">
+        <button class="btn">Continue</button>
+      </div>
+    </div>
+    <!-- Loading状态时显示loading组件 -->
+    <div v-if="isLoading" class="loading-wrapper">
+      <ChatLoading />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import HeaderTitle from '@/components/HeaderTitle.vue'
+import NoticeList from './components/NoticeList.vue'
+import InputArea from './components/InputArea.vue'
+import ChatLoading from './components/ChatLoading.vue'
+import { ref, onMounted } from 'vue'
+
+// 定义NoticeList组件引用类型
+interface NoticeListRef {
+  simulateSendMessage: () => void
+}
+
+const isLoading = ref<boolean>(false)
+const noticeListRef = ref<NoticeListRef | null>(null)
+
+onMounted(() => {
+  // handleSendMessage('123')
+})
+
+const handleSendMessage = (message: string): void => {
+  console.log('收到消息:', message)
+  // 显示loading状态
+  isLoading.value = true
+  
+  // 模拟请求延迟
+  setTimeout(() => {
+    // 调用NoticeList的方法添加新消息
+    if (noticeListRef.value) {
+      noticeListRef.value.simulateSendMessage()
+    }
+    // 隐藏loading状态
+    isLoading.value = false
+  }, 10000) // 3秒后完成
+}
+</script>
+<style lang="less" scoped>
+.asistant-container {
+  height: 100vh;
+  overflow: hidden;
+}
+
+.header {
+  flex-shrink: 0;
+}
+
+.content {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.footer {
+  flex-shrink: 0;
+  
+  .continue {
+    font-family: 'satoshiRegular';
+    font-size: 3.6rem;
+    color: #fff;
+    text-align: right;
+    padding: 2.6rem 4.5rem;
+    .btn {
+      border-radius: 7px;
+      background-color: #000;
+      width: 24.6rem;
+      height: 5.9rem;
+    }
+  }
+}
+
+.loading-wrapper {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #fff;
+}
+</style>
+
diff --git a/src/views/login/SignupPage.vue b/src/views/login/SignupPage.vue
index 138654f..12e1f97 100644
--- a/src/views/login/SignupPage.vue
+++ b/src/views/login/SignupPage.vue
@@ -46,7 +46,7 @@
           </div>
 
           <!-- 登录按钮 -->
-          <button type="submit" class="login-button">Log in</button>
+          <button type="submit" class="login-button">Sign Up</button>
 
           <!-- Google登录按钮 -->
           <div type="button" class="google-button" @click="handleGoogleLogin">
diff --git a/src/views/stylist/container.vue b/src/views/stylist/container.vue
new file mode 100644
index 0000000..d048e93
--- /dev/null
+++ b/src/views/stylist/container.vue
@@ -0,0 +1,13 @@
+<template>
+  <div class="container">
+    <router-view />
+  </div>
+</template>
+<style lang="less" scoped>
+.container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  font-family: 'satoshiRegular';
+}
+</style>
diff --git a/src/views/stylist/customer.vue b/src/views/stylist/customer.vue
index 4020324..cad0c09 100644
--- a/src/views/stylist/customer.vue
+++ b/src/views/stylist/customer.vue
@@ -1,15 +1,41 @@
 <template>
-  <div class="customer-container safe-area-top" :class="{'form-mode': pageMode === 'form'}">
+  <div class="customer-container safe-area-top" :class="{ 'form-mode': pageMode === 'form' }">
     <template v-if="pageMode === 'entry'">
       <div class="setting flex flex-between">
         <van-icon name="arrow-left" color="#fff" size="70" />
-        <SvgIcon name="setting" color="#fff" size="70" style="width: 7rem" />
       </div>
       <div class="content flex flex-center flex-column">
         <div class="text">Who is Your Customer?</div>
       </div>
       <div class="entry-btn flex flex-center" @click="handleChangeMode('form')">Entry</div>
     </template>
+    <template v-else>
+      <div class="form-container">
+        <div class="back-container flex flex-center" @click="handleChangeMode('entry')">
+          <van-icon name="arrow-left" color="#fff" size="50" />
+        </div>
+        <div class="text">
+          <div class="form-title">Entry ID</div>
+          <div class="description">
+            Redefine the styling experience with AI.<br />
+            Use Styling Angel to speed up your fashion journey.
+          </div>
+        </div>
+
+        <div class="glass-form">
+          <div class="form-field">
+            <label class="field-label">Customer Name</label>
+            <input type="text" placeholder="Name" class="form-input" />
+          </div>
+          <div class="form-field email">
+            <label class="field-label">Customer Email</label>
+            <input type="email" placeholder="Email" class="form-input" />
+          </div>
+          <button class="confirm-btn" @click="handleConfirm">Confirm</button>
+        </div>
+        <div class="copyright">Powered by AiDLab for Lane Crawford</div>
+      </div>
+    </template>
   </div>
 </template>
 <script setup lang="ts">
@@ -20,6 +46,10 @@ const pageMode = ref<PageMode>('entry')
 const handleChangeMode = (mode: PageMode) => {
   pageMode.value = mode
 }
+
+const handleConfirm = () => {
+  console.log('handleConfirm')
+}
 </script>
 <style lang="less" scoped>
 .customer-container {
@@ -31,9 +61,9 @@ const handleChangeMode = (mode: PageMode) => {
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
-  padding-top: 12.17rem;
   &.form-mode {
     background: url('@/assets/images/has_shouder_bg.png') no-repeat center center;
+    padding-top: 21.47rem;
   }
 
   .setting {
@@ -70,5 +100,110 @@ const handleChangeMode = (mode: PageMode) => {
     line-height: 9rem;
     font-size: 5.6rem;
   }
+
+  .form-container {
+    .back-container {
+      width: 7.3rem;
+      height: 7.3rem;
+      border: 2px solid #fff;
+      border-radius: 1.8rem;
+      background: rgba(0, 0, 0, 0.2);
+      backdrop-filter: blur(20px);
+      -webkit-backdrop-filter: blur(20px);
+      margin-left: 7rem;
+      position: relative;
+      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), inset 0 1px 0 #000000;
+
+      .back-icon {
+        width: 2.08rem;
+        height: 3.47rem;
+      }
+    }
+    .text {
+      padding-left: 15.2rem;
+      margin-top: 7.9rem;
+      letter-spacing: 0.02rem;
+    }
+    .form-title {
+      font-family: 'satoshiBold';
+      font-size: 11rem;
+      line-height: 1.24em;
+    }
+    .description {
+      font-size: 3rem;
+      line-height: 141%;
+      letter-spacing: 0.08rem;
+      margin-top: 2.7rem;
+      font-family: 'satoshiRegular';
+    }
+
+    .glass-form {
+      height: 84.8rem;
+      border: 2px solid #FFFFFF;
+      border-radius: 4.7rem;
+      background: rgba(115, 115, 115, 0.23);
+      backdrop-filter: blur(70px);
+      -webkit-backdrop-filter: blur(70px);
+      margin: 0 14.2rem;
+      padding: 8.2rem 7.9rem;
+      margin-top: 7.5rem;
+      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+
+      .form-field {
+        margin-bottom: 3.6rem;
+        &.email {
+          margin-bottom: 6.8rem;
+        }
+        .field-label {
+          display: block;
+          color: #fff;
+          font-size: 3.6rem;
+          font-family: 'satoshiRegular';
+          margin-bottom: 3rem;
+        }
+
+        .form-input {
+          width: 100%;
+          height: 10rem;
+          line-height: 10rem;
+          border: 2px solid #fff;
+          border-radius: 7rem;
+          padding: 0 5.5rem;
+          color: #fff;
+          font-size: 3.8rem;
+          font-family: 'satoshiRegular';
+          background: transparent;
+
+          &::placeholder {
+            color: rgba(255, 255, 255, 0.6);
+          }
+        }
+      }
+
+      .confirm-btn {
+        width: 100%;
+        height: 10rem;
+        line-height: 10rem;
+        background: #000;
+        border: none;
+        border-radius: 7rem;
+        color: #fff;
+        font-size: 4rem;
+        font-family: 'satoshiRegular';
+        cursor: pointer;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+      }
+    }
+    .copyright{
+      font-family: 'satoshiRegular';
+      font-size: 3rem;
+      line-height: 124%;
+      letter-spacing: 0.08rem;
+      margin-top: 2.7rem;
+      text-align: center;
+      font-weight: 400;
+      margin-top: 18.7rem;
+    }
+  }
 }
 </style>