diff --git a/src/components/FooterNavigation.vue b/src/components/FooterNavigation.vue
index 0f63833..f9621a4 100644
--- a/src/components/FooterNavigation.vue
+++ b/src/components/FooterNavigation.vue
@@ -31,7 +31,7 @@
 			.catch(() => {})
 	}
 	const navs = [
-		{ label: 'Home', icon: 'home', size: 73, path: '/homeNav' },
+		{ label: 'Home', icon: 'home', size: 73, path: '/workshop/home' },
 		{ label: 'Library', icon: 'library', size: 53, path: '/workshop/library' },
 		// { label: 'Profile', icon: 'profile', size: 55, path: '/workshop/profile' }
 	]
diff --git a/src/router/index.ts b/src/router/index.ts
index 2498bec..04c585e 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -66,13 +66,7 @@ const router = createRouter({
 		path: '/customer',
 		name: 'customer',
 		component: () => import('@/views/login/customer.vue'),
-	  },
-	{
-		path: '/homeNav',
-		name: 'HomeNav',
-		component: () => import('@/views/Workshop/home.vue')
-	  },
-    
+	},
     {
       path: '/asistant',
       name: 'asistant',
@@ -88,6 +82,16 @@ const router = createRouter({
         //   path: '/workshop',
         //   redirect: '/workshop/selectStyle'
         // },
+		{
+			path: '/workshop/home',
+			name: 'Home',
+			component: () => import('@/views/Workshop/home.vue')
+		},
+		{
+			path: '/workshop/homeNav',
+			name: 'HomeNav',
+			component: () => import('@/views/Workshop/homeNav.vue')
+		},
 		{
 			path: '/workshop/stylist',
 			name: 'StylistPage',
diff --git a/src/views/Workshop/homeNav.vue b/src/views/Workshop/homeNav.vue
new file mode 100644
index 0000000..821a8a4
--- /dev/null
+++ b/src/views/Workshop/homeNav.vue
@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, reactive, toRefs, computed, onActivated } from "vue";
+import { useRouter } from 'vue-router'
+const router = useRouter()
+import { showConfirmDialog } from 'vant'
+import MyEvent from '@/utils/myEvent'
+
+//const props = defineProps({
+//})
+const emit = defineEmits([
+	'view-type'
+])
+
+// 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 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 } })
+	}
+}
+
+onMounted(()=>{
+	emit('view-type', 1)
+})
+onUnmounted(()=>{
+})
+defineExpose({})
+// const {  } = toRefs(data);
+</script>
+<template>
+	<div class="homeNavPage">
+		<div class="title">
+			Welcome Back,
+			What can I help you today?
+		</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>
+	</div>
+</template>
+<style lang="less" scoped>
+	.header-title {
+		--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;
+		}
+		> .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;
+					}
+				}
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/views/login/customer.vue b/src/views/login/customer.vue
index f3f39dc..6f1acc1 100644
--- a/src/views/login/customer.vue
+++ b/src/views/login/customer.vue
@@ -94,7 +94,7 @@ const handleConfirm = async () => {
     // console.log('res', res)
     generateStore.setCustomerInfo(res)
     // router.push('/workshop/stylist/index')
-    router.push('/homeNav')
+    router.push('/workshop/homeNav')
   })
 }
 </script>