diff --git a/src/assets/images/homeBg.png b/src/assets/images/homeBg.png
new file mode 100644
index 0000000..92b7848
Binary files /dev/null and b/src/assets/images/homeBg.png differ
diff --git a/src/views/Workshop/home.vue b/src/views/Workshop/home.vue
index 821a8a4..783c6c2 100644
--- a/src/views/Workshop/home.vue
+++ b/src/views/Workshop/home.vue
@@ -3,7 +3,7 @@ import { onMounted, onUnmounted, reactive, toRefs, computed, onActivated } from
 import { useRouter } from 'vue-router'
 const router = useRouter()
 import { showConfirmDialog } from 'vant'
-import MyEvent from '@/utils/myEvent'
+import { FlowType } from '@/types/enum'
 
 //const props = defineProps({
 //})
@@ -14,27 +14,12 @@ const emit = defineEmits([
 // const data = reactive({
 // })
 
-const clickSwitchVIPID = ()=>{
-	showConfirmDialog({
-		title: 'Switch VIP ID?',
-		message: 'You have unsaved changes. Your progress will be lost.',
-		confirmButtonText: 'Yes',
-		cancelButtonText: 'Cancel',
-	})
-		.then(() => {
-			MyEvent.emit('clear-generate-state')
-			MyEvent.emit('clearAllCache')
-			router.push({ name: 'customer', query: { demo: 1 } })
-		})
-		.catch(() => {})
+const newJourney = ()=>{
+	router.push(`/workshop/styList/index?flowType=${FlowType.MAIN}`)
 }
-const openFlow = (path:string,flowType:string)=>{
-	if(flowType == 'clientId')return clickSwitchVIPID()
-	if(flowType == 'main'){
-		router.push({ name: path })
-	}else{
-		router.push({ name: path, query: { demo: 1 } })
-	}
+
+const historicalReview = ()=>{
+	router.push(`/workshop/creation?flowType=${FlowType.HISTORY}`)
 }
 
 onMounted(()=>{
@@ -46,29 +31,14 @@ defineExpose({})
 // const {  } = toRefs(data);
 </script>
 <template>
-	<div class="homeNavPage">
-		<div class="title">
-			Welcome Back,
-			What can I help you today?
+	<div class="homePage">
+		<img class="homeBg" src="@/assets/images/homeBg.png" alt="">
+		<div class="button">
+			<div class="item" @click="newJourney">New Journey</div>
+			<div class="item" @click="historicalReview">Historical Review</div>
 		</div>
-		<div class="navBox">
-			<div class="navTitle">
-				Explore
-			</div>
-			<div class="navList">
-				<div class="item" @click="openFlow('index','main')">
-					<img src="@/assets/images/nav1.png" alt="">
-				</div>
-				<div class="item" @click="openFlow('recommended','reinventing')">
-					<img src="@/assets/images/nav2.png" alt="">
-				</div>
-				<div class="item" @click="openFlow('index','stylist')">
-					<img src="@/assets/images/nav3.png" alt="">
-				</div>
-				<div class="item" @click="openFlow('','clientId')">
-					<img src="@/assets/images/nav4.png" alt="">
-				</div>
-			</div>
+		<div class="info">
+			Powered by AiDLab for Lane Crawford
 		</div>
 	</div>
 </template>
@@ -77,46 +47,46 @@ defineExpose({})
 		--header-title-background: #fff;
 		--header-title-height: 12rem !important;
 	}
-	.homeNavPage{
-		> .title{
-			padding: 0 8.4rem;
-			font-family: satoshiBold;
-			font-weight: 700;
-			margin-top: 6.8rem;
-			font-size: 9.6rem;
-			line-height: 124%;
-			background: #B3B3B3;
-			background: linear-gradient(120deg, #b3b3b3 1%, rgba(0, 0, 0, 0) 48%), linear-gradient(
-				344deg, #B3B3B2 16%, #000000 66%);
-			-webkit-background-clip: text;
-			-webkit-text-fill-color: transparent;
-			background-clip: text;
+	.homePage{
+		position: relative;
+		flex: 1;
+		> .homeBg{
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
 		}
-		> .navBox{
-			> .navTitle{
-				padding: 0 8.4rem;
-				font-family: satoshiBold;
-				font-weight: 700;
-				font-size: 5.2rem;
-				margin: 6.3rem 0;
-			}
-			> .navList{
-				display: flex;
-				flex-wrap: wrap;
-				padding: 0 7.4rem;
-				gap: 4.8rem;
-				> .item{
-					// width: 44.2rem;
-					// height: 41.6rem;
-					height: auto;
-					width: calc(50% - 4.8rem / 2);
-					> img{
-						width: 100%;
-						height: 100%;
-						object-fit: contain;
-					}
+		> .button{
+			margin: 64.3rem auto 0;
+			font-family: satoshiBold;
+			font-size: 4.6rem;
+			color: #fff;
+			text-align: center;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			> .item{
+				width: 45.6rem;
+				margin-bottom: 8rem;
+				line-height: 13.1rem;
+				border: 1.16px solid #FFFFFF;
+				backdrop-filter: blur(2.5rem);
+				background: radial-gradient(100% 100% at 0% 0%, rgba(115, 115, 115, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
+				&:last-child{
+					margin-bottom: 0;
 				}
 			}
 		}
+		> .info{
+			position: absolute;
+			bottom: 7rem;
+			font-size: 3rem;
+			font-family: satoshiRegular;
+			color: #fff;
+			text-align: center;
+			width: 100%;
+			font-weight: 400;
+			letter-spacing: .5rem;
+		}
 	}
 </style>
\ No newline at end of file
diff --git a/src/views/Workshop/homeNav.vue b/src/views/Workshop/homeNav.vue
index 821a8a4..196178e 100644
--- a/src/views/Workshop/homeNav.vue
+++ b/src/views/Workshop/homeNav.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, reactive, toRefs, computed, onActivated } from "vue";
+import { onMounted, onUnmounted, reactive, ref, computed, onActivated } from "vue";
 import { useRouter } from 'vue-router'
 const router = useRouter()
 import { showConfirmDialog } from 'vant'
@@ -11,6 +11,9 @@ const emit = defineEmits([
 	'view-type'
 ])
 
+const navList = ref([])
+const navDisabledList = ref([])
+
 // const data = reactive({
 // })
 
@@ -28,17 +31,50 @@ const clickSwitchVIPID = ()=>{
 		})
 		.catch(() => {})
 }
-const openFlow = (path:string,flowType:string)=>{
-	if(flowType == 'clientId')return clickSwitchVIPID()
-	if(flowType == 'main'){
-		router.push({ name: path })
-	}else{
-		router.push({ name: path, query: { demo: 1 } })
-	}
+const openFlow = (path:string)=>{
+	const query = computed(() => router.currentRoute.value.query)
+	router.push({ name: path, query: {...query.value} })
+
+	// if(flowType == 'clientId')return clickSwitchVIPID()
+	// if(flowType == 'main'){
+	// 	router.push({ name: path })
+	// }else{
+	// 	router.push({ name: path, query: { demo: 1 } })
+	// }
 }
 
 onMounted(()=>{
 	emit('view-type', 1)
+	let nav = [
+		{
+			path: 'selectStyle',
+			imgPath: new URL('@/assets/images/nav1.png',import.meta.url).href,
+			flowTypeList: ['history-tryon','history-ai'],
+		},
+		{
+			path: 'recommended',
+			imgPath: new URL('@/assets/images/nav2.png',import.meta.url).href,
+			flowTypeList: ['history-outfit'],
+		},
+		{
+			path: 'uploadFace',
+			imgPath: new URL('@/assets/images/nav3.png',import.meta.url).href,
+			flowTypeList: ['history-tryon','history-ai'],
+		},
+		{
+			path: 'customize',
+			imgPath: new URL('@/assets/images/nav4.png',import.meta.url).href,
+			flowTypeList: ['history-tryon','history-ai'],
+		},
+	]
+	nav.forEach((item)=>{
+		const query = computed(() => router.currentRoute.value.query)
+		if(item.flowTypeList.includes(query.value?.flowType as string)){
+			navList.value.push(item)
+		}else{
+			navDisabledList.value.push(item)
+		}
+	})
 })
 onUnmounted(()=>{
 })
@@ -56,18 +92,24 @@ defineExpose({})
 				Explore
 			</div>
 			<div class="navList">
-				<div class="item" @click="openFlow('index','main')">
+				<div class="item active" v-for="item in navList" :key="item.path" @click="openFlow(item.path)">
+					<img :src="item.imgPath" alt="">
+				</div>
+				<div class="item" v-for="item in navDisabledList" :key="item.path" @click="openFlow(item.path)">
+					<img :src="item.imgPath" alt="">
+				</div>
+				<!-- <div class="item" @click="openFlow('index')">
 					<img src="@/assets/images/nav1.png" alt="">
 				</div>
-				<div class="item" @click="openFlow('recommended','reinventing')">
+				<div class="item" :class="{'active': ['history-outfit','history-ai'].includes($route.query?.flowType as string)}" @click="openFlow('recommended','reinventing')">
 					<img src="@/assets/images/nav2.png" alt="">
 				</div>
-				<div class="item" @click="openFlow('index','stylist')">
+				<div class="item" :class="{'active': ['history-outfit','history-ai'].includes($route.query?.flowType as string)}" @click="openFlow('index','stylist')">
 					<img src="@/assets/images/nav3.png" alt="">
 				</div>
-				<div class="item" @click="openFlow('','clientId')">
+				<div class="item" :class="{'active': ['history-ai'].includes($route.query?.flowType as string)}" @click="openFlow('','clientId')">
 					<img src="@/assets/images/nav4.png" alt="">
-				</div>
+				</div> -->
 			</div>
 		</div>
 	</div>
@@ -110,6 +152,12 @@ defineExpose({})
 					// height: 41.6rem;
 					height: auto;
 					width: calc(50% - 4.8rem / 2);
+					pointer-events: none;
+					opacity: .5;
+					&.active{
+						pointer-events: auto;
+						opacity: 1;
+					}
 					> img{
 						width: 100%;
 						height: 100%;
diff --git a/src/views/login/customer.vue b/src/views/login/customer.vue
index 6f1acc1..413615e 100644
--- a/src/views/login/customer.vue
+++ b/src/views/login/customer.vue
@@ -1,53 +1,48 @@
 <template>
-  <div class="customer-container safe-area-top" :class="{ 'form-mode': pageMode === 'form' }">
+  <div
+    class="customer-container safe-area-top flex flex-column"
+    :class="{ 'form-mode': pageMode === 'form' }"
+  >
+    <div class="setting flex flex-between">
+      <SvgIcon name="left" size="70" @click.stop="handleBack" />
+      <SvgIcon name="setting" size="70" />
+    </div>
     <template v-if="pageMode === 'entry'">
-      <div class="setting flex flex-between">
-        <SvgIcon name="left" size="70" @click="handleBack" />
-
-        <SvgIcon name="setting" size="70" />
-      </div>
-      <div class="content flex flex-center flex-column">
+      <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">
+            <span>Create</span>
+          </button>
+          <button class="sandblasted-blurred btn" @click="handleChangeMode('form')">
+            <span>Entry</span>
+          </button>
+        </div>
       </div>
-      <div class="entry-btn flex flex-center" @click="handleChangeMode('form')">Entry</div>
     </template>
     <template v-else>
-      <div class="form-container">
-        <div class="menu flex flex-between">
-          <div class="back-container flex flex-between" @click="handleBack">
-            <SvgIcon name="left" size="70" />
-          </div>
-          <SvgIcon name="setting" size="70" />
-        </div>
+      <div class="form-container flex-1 flex flex-column flex-center">
         <div class="text">
           <div class="form-title">Customer ID</div>
           <div class="description">
-            Redefine the styling experience with AI. Use<br />Styling Angel to speed up your
-            fashion<br />journey.
+            <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="form-field">
-            <label class="field-label">VIP ID</label>
+            <label class="field-label">Nickname</label>
             <input
               v-model="customerData.vipId"
               type="text"
-              placeholder="Enter your ID"
+              placeholder="Enter name"
               class="form-input"
             />
           </div>
-          <!-- <div class="form-field email">
-            <label class="field-label">Email Address</label>
-            <input
-              v-model="customerData.email"
-              type="email"
-              placeholder="Enter your email"
-              class="form-input"
-            />
-          </div> -->
           <button class="confirm-btn" @click="handleConfirm">Confirm</button>
         </div>
+        <div class="show-all">Show All</div>
         <div class="copyright">Powered by AiDLab for Lane Crawford</div>
       </div>
     </template>
@@ -64,10 +59,15 @@ const router = useRouter()
 const generateStore = useGenerateStore()
 
 type PageMode = 'form' | 'entry'
-const pageMode = ref<PageMode>('form')
-// const pageMode = ref<PageMode>('entry')
+const pageMode = ref<PageMode>('entry')
 
-const handleBack = () => {
+const handleBack = (e?: Event) => {
+  e.stopPropagation()
+  e.preventDefault()
+  if (pageMode.value === 'form') {
+    pageMode.value = 'entry'
+    return
+  }
   router.go(-1)
 }
 
@@ -94,7 +94,7 @@ const handleConfirm = async () => {
     // console.log('res', res)
     generateStore.setCustomerInfo(res)
     // router.push('/workshop/stylist/index')
-    router.push('/workshop/homeNav')
+    router.push('/workshop/home')
   })
 }
 </script>
@@ -104,13 +104,12 @@ const handleConfirm = async () => {
   overflow: hidden;
   color: #fff;
   position: relative;
-  // background: url('@/assets/images/no_shouder_bg.png') no-repeat center center;
+  background: url('@/assets/images/no_shouder_bg.png') no-repeat center center;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   &.form-mode {
     background: url('@/assets/images/has_shouder_bg.png') no-repeat center center/cover;
-    padding-top: 15.9rem;
   }
 
   .setting {
@@ -122,7 +121,8 @@ const handleConfirm = async () => {
     }
   }
   .content {
-    margin-top: 55.3rem;
+    // margin-top: 55.3rem;
+    row-gap: 12.7rem;
     .text {
       font-family: 'satoshiBold';
       font-size: 13rem;
@@ -140,37 +140,22 @@ const handleConfirm = async () => {
       justify-content: center;
       border-radius: 4rem;
     }
-  }
-  .entry-btn {
-    position: absolute;
-    border: 0.2rem solid #fff;
-    bottom: 10.3rem;
-    right: 5.5rem;
-    height: 9rem;
-    width: 27.5rem;
-    line-height: 9rem;
-    font-size: 5.6rem;
+    .btn-list {
+      column-gap: 17rem;
+      .btn {
+        height: 8.3rem;
+        width: 29.7rem;
+        line-height: 8.3rem;
+        font-size: 4.8rem;
+        border: 0.2rem solid #fff;
+      }
+    }
   }
 
   .form-container {
-    .menu {
-      padding: 0 4.8rem 0 8.4rem;
-      .back-container {
-        width: 7.3rem;
-        height: 7.3rem;
-        border-radius: 1.8rem;
-        font-size: 4.3rem;
-        position: relative;
-
-        .back-icon {
-          width: 2.08rem;
-          height: 3.47rem;
-        }
-      }
-    }
+    width: 78.8rem;
+    margin: 0 auto;
     .text {
-      padding-left: 15.2rem;
-      margin-top: 15.4rem;
       letter-spacing: 0.02rem;
     }
     .form-title {
@@ -182,18 +167,16 @@ const handleConfirm = async () => {
       font-size: 3.6rem;
       line-height: 141%;
       letter-spacing: 0.08rem;
-      margin-top: 2.7rem;
+      margin: 3.1rem 0 11rem 0;
       font-family: 'satoshiRegular';
     }
 
     .glass-form {
-      height: 68.8rem;
+      height: 68.7rem;
+      width: 78.8rem;
       border: 0.2rem solid #ffffff;
       border-radius: 4.7rem;
-      margin: 0 14.2rem;
-      //   padding: 8.2rem 7.9rem;
       padding: 11rem 7.5rem;
-      margin-top: 11rem;
       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;
@@ -251,6 +234,18 @@ const handleConfirm = async () => {
         box-shadow: 0 0.2rem 8px rgba(0, 0, 0, 0.2);
       }
     }
+    .show-all {
+      margin-top: 4rem;
+      width: 19rem;
+      height: 7.6rem;
+      border-radius: 54px;
+      color: #000;
+      text-align: center;
+      line-height: 7.6rem;
+      background-color: #fff;
+      font-size: 3.1rem;
+      font-family: 'satoshiRegular';
+    }
     .copyright {
       font-family: 'satoshiRegular';
       font-size: 3rem;
@@ -259,7 +254,7 @@ const handleConfirm = async () => {
       margin-top: 2.31rem;
       text-align: center;
       font-weight: 400;
-      margin-top: 18.7rem;
+      margin-top: 11.5rem;
     }
   }
 }
diff --git a/src/views/stylist/dressfor.vue b/src/views/stylist/dressfor.vue
index d4c210b..76768aa 100644
--- a/src/views/stylist/dressfor.vue
+++ b/src/views/stylist/dressfor.vue
@@ -1,11 +1,13 @@
 <template>
   <div class="dressfor-container flex">
     <div class="content flex-1 flex flex-column">
-      <!-- <div class="setting flex flex-between">
-        <van-icon name="arrow-left" color="#fff" @click="handleBack" />
-        <SvgIcon name="setting" size="70" />
-      </div> -->
-      <div class="text">What are you dressing for?</div>
+      <div class="loading-container flex flex-center">
+        <Icon class="icon-element" title="" />
+      </div>
+      <div class="text">
+        What are you <br />
+        dressing for?
+      </div>
       <!-- <div class="start-btn" @click="handleStart">Start</div> -->
       <div class="chatbox flex flex-center">
         <div class="input-box flex">
@@ -25,7 +27,7 @@
             class="audio-icon"
             :name="isRecording ? 'pause' : 'audio'"
             size="35"
-			color="#6D6868"
+            color="#6D6868"
             @click="handleClickAudio"
           />
         </div>
@@ -33,19 +35,45 @@
           <SvgIcon class="send-icon" name="send" size="26" color="#000000" />
         </div>
       </div>
+      <div class="tag-container flex flex-column flex-center">
+        <div class="tag-list short flex flex-justify-center">
+          <div
+            class="tag-item"
+            v-for="item in tagListShort"
+            :key="item"
+            @click="handleClickTag(item)"
+          >
+            {{ item }}
+          </div>
+        </div>
+        <div class="tag-list long flex flex-justify-center">
+          <div
+            class="tag-item"
+            v-for="item in tagListLong"
+            :key="item"
+            @click="handleClickTag(item)"
+          >
+            {{ item }}
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 <script setup lang="ts">
 import { ref, onUnmounted, nextTick, watch } from 'vue'
-import { showToast } from 'vant'
+import { showToast, closeToast } from 'vant'
 import HeaderTitle from '@/components/HeaderTitle.vue'
 import FooterNavigation from '@/components/FooterNavigation.vue'
 import { useRouter } from 'vue-router'
 import AudioVisualizer from '@/views/asistant/components/AudioVisualizer.vue'
+import Icon from '../asistant/components/GenerateLoading.vue'
 
 const router = useRouter()
 
+const tagListShort = ['Silk Slip Dress', 'Business Casual', 'Suggest Shoe Styles']
+const tagListLong = ['Linen Suit For Summer  Gaka', 'Recomment Evening Bags']
+
 const inputValue = ref('')
 const isRecording = ref(false)
 const audioVisualizerRef = ref<InstanceType<typeof AudioVisualizer> | null>(null)
@@ -69,11 +97,11 @@ watch(isRecording, async (newVal) => {
 
 const handleSendMessage = () => {
   const message = inputValue.value.trim()
-  if(!message){
+  if (!message) {
     showToast('Please enter a message')
     return
   }
-  showToast('Voice-to-text conversion has been completed.')
+
   router.push({
     path: '/asistant',
     query: message ? { message } : undefined
@@ -109,6 +137,10 @@ const startRecording = () => {
   }
 
   speechRecognition.onstart = () => {
+    showToast({
+      message: 'Listening...',
+      duration: 0
+    })
     isRecording.value = true
   }
 
@@ -136,6 +168,7 @@ const startRecording = () => {
   }
 
   speechRecognition.onend = () => {
+    closeToast()
     isRecording.value = false
     lastTranscript = ''
     isSpeechRecognitionActive = false
@@ -143,6 +176,7 @@ const startRecording = () => {
 
   speechRecognition.onerror = (event: any) => {
     console.error('Speech recognition error:', event.error)
+    closeToast()
     isRecording.value = false
     isSpeechRecognitionActive = false
     showToast('Speech recognition failed, please try again')
@@ -159,6 +193,10 @@ const stopRecording = () => {
   }
 }
 
+const handleClickTag = (tag: string) => {
+  inputValue.value = tag
+}
+
 onUnmounted(() => {
   if (speechRecognition && isRecording.value) {
     speechRecognition.stop()
@@ -167,35 +205,51 @@ onUnmounted(() => {
 })
 </script>
 <style lang="less" scoped>
-.c-svg{
+.c-svg {
   width: initial;
   height: initial;
 }
 .dressfor-container {
   height: calc(100vh - 12rem - 14.9rem);
-  overflow: hidden;
+  // overflow: hidden;
   color: #fff;
   position: relative;
-  background: url('@/assets/images/dress_for_bg.png') no-repeat center center;
+  // background: url('@/assets/images/dress_for_bg.png') no-repeat center center;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   padding: 6rem 0 0 0;
   .content {
-    .setting {
-      padding: 0 4.9rem 0 8.4rem;
-      font-size: 7rem;
-      .c-svg {
-        width: initial;
+    .loading-container {
+      :deep(.loading-image) {
+        width: 17rem;
+        height: 17rem;
+        animation: none;
+      }
+      :deep(.loading-shadow) {
+        width: 9.2rem;
+        height: 2.4rem;
+        filter: blur(6px);
+        opacity: 0.5;
+        margin: 2.4rem 0 0;
+        // background-color: #d9d9d9;
       }
     }
     .text {
       font-family: 'satoshiBold';
-      font-size: 11rem;
-      line-height: 106%;
+      font-size: 9.6rem;
       text-align: center;
-      margin-top: 43.8rem;
-      margin-bottom: 14rem;
+      padding-top: 9rem;
+      padding-bottom: 14rem;
+
+      font-weight: 700;
+      line-height: 1.12;
+      background: #b3b3b3;
+      background: linear-gradient(120deg, #b3b3b3 1%, rgba(0, 0, 0, 0) 48%),
+        linear-gradient(344deg, #b3b3b2 16%, #000000 66%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
     }
     .chatbox {
       height: 9.3rem;
@@ -204,7 +258,7 @@ onUnmounted(() => {
       .input-box {
         width: 59.8rem;
         height: 100%;
-        background-color: #fff;
+        background-color: #efefef;
         // border: 2px solid #5f5f5f;
         border-radius: 1rem;
         color: #222222;
@@ -213,7 +267,7 @@ onUnmounted(() => {
         padding: 0 2.6rem;
         column-gap: 2.6rem;
         overflow: hidden;
-        .input-wrapper{
+        .input-wrapper {
           overflow: hidden;
         }
         .recording-visualizer {
@@ -233,6 +287,7 @@ onUnmounted(() => {
           height: 100%;
           outline: none;
           border: none;
+          background-color: #efefef;
         }
         .audio-icon {
           width: initial;
@@ -241,8 +296,34 @@ onUnmounted(() => {
       .send {
         width: 7.6rem;
         height: 7.6rem;
-        background-color: #fff;
-		border-radius: 1rem;
+        background-color: #efefef;
+        border-radius: 1rem;
+      }
+    }
+    .tag-container {
+      row-gap: 3.1rem;
+      padding-top: 5.7rem;
+      .tag-list {
+        color: #000;
+        flex-wrap: wrap;
+        &.short {
+          column-gap: 1.91rem;
+        }
+        &.long {
+          column-gap: 3.1rem;
+          padding-left: 2.1rem;
+        }
+        .tag-item {
+          height: 6.8rem;
+          line-height: 6.8rem;
+          box-sizing: border-box;
+          font-family: 'satoshiRegular';
+          font-size: 2.8rem;
+          border: 0.15rem solid #cdcdcd;
+          text-align: center;
+          border-radius: 4.6rem;
+          padding: 0 2.15rem;
+        }
       }
     }
   }