diff --git a/src/modules/00_contact/views/1.vue b/src/modules/00_contact/views/1.vue
new file mode 100644
index 0000000..f6fc50d
--- /dev/null
+++ b/src/modules/00_contact/views/1.vue
@@ -0,0 +1,215 @@
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useQuasar } from "quasar";
+
+const router = useRouter();
+
+const $q = useQuasar();
+
+const tab = ref('')
+
+const currentRouteName = ref('');
+const text = ref('');
+const menuList = [
+	{text:'ข้อมูลหลัก',path: 'metadata'},
+	{text:'โครงสร้างอัตรากำลัง',path: 'organizational'},
+
+];
+
+const mainmenu = [
+	{text: 'ข้อมูลหลัก', icon:'mdi-account-outline', path: 'metadata'},
+	{text: 'โครงสร้างอัตรากำลัง', icon:'mdi-account-group-outline',path: 'organizational'},
+	{text: 'ทะเบียนประวัติ', icon:'mdi-file-account-outline',path: 'organizational'},
+	{text: 'ทะเบียนประวัติลูกจ้าง', icon:'mdi-file-account-outline',path: 'organizational'},
+	{text: 'ออกคำสั่ง', icon:'mdi-file-certificate-outline',path: 'organizational'},
+	{text: 'สรรหา', icon:'mdi-magnify',path: 'organizational'},
+	{text: 'บรรจุ แต่งตั้ง ย้าย โอน', icon:'mdi-account-check',path: 'organizational'},
+	{text: 'พ้นราชการ', icon:'mdi-account-cancel-outline',path: 'organizational'},
+	{text: 'เครื่องราชฯ', icon:'mdi-medal-outline',path: 'organizational'},
+	{text: 'การลา', icon:'mdi-calendar',path: 'organizational'},
+	{text: 'วินัย', icon:'mdi-scale-balance',path: 'organizational'}
+];
+
+const clickMain = (val: string) => {
+	router.push(val)
+	currentRouteName.value = val
+	tab.value=val
+};
+
+const goHome = () => {
+	router.push('/')
+	currentRouteName.value = ''
+};
+
+const click = () => {
+	router.push('/contact')
+	currentRouteName.value = 'contact'
+};
+
+</script>
+<!-- โครงเว็บ -->
+<template>
+	<q-layout view="hHh LpR fFr">
+		<!-- header -->
+		<q-header flat class="text-dark col-12 bg-header bg-transparent" height-hint="7">
+			<q-toolbar class="q-my-xs items-center" :style="$q.screen.gt.xs ? 'padding: 1% 2%;': 'padding: 1% 4%;'">
+				<div class="row items-center no-wrap cursor-pointer" @click="goHome" v-if="$q.screen.gt.xs">
+					<q-img src="@/assets/logo.png" spinner-color="white" style="height: 35px; max-width: 35px"/>
+					<q-separator vertical inset class="q-ml-md" />
+					<div class="row q-ml-md items-center q-pt-xs">
+						<div 
+							style="color: #ffffff; letter-spacing: 1px; line-height:10px;"
+							class="text-body2 text-weight-bolder col-12"
+							
+						>
+							ระบบ<span class="text-primary">ทรัพยากรบุคคล</span>
+						</div>
+
+						<div class="text-caption text-white">SUPPORT</div>
+
+					</div>
+					
+				</div>
+				
+				<div v-else class="row items-center">
+					<img src="@/assets/logo.png" style="height: 35px; max-width: 35px" />
+				</div>
+				<q-space></q-space>
+				<div>
+					<q-btn class="text-weight-medium" flat color="white" label="หน้าแรก" @click="goHome"/>
+					<q-btn color="secondary" text-color="white" label="ติดต่อเรา" @click="click()"/>
+				</div>
+				
+
+			</q-toolbar>
+		</q-header>
+
+		<div class="bg-top"  :style="$q.screen.gt.xs ? 'height: 240px;': 'height: 240px;'" />
+		<!-- end header -->
+
+		<q-page-container class="bg-grey-2 q-pb-md">
+			<q-page :style="$q.screen.gt.xs ? 'padding: 1.8% 2%; margin-top: -250px;': 'padding: 5% 4%; margin-top: -250px;'">
+				<div class="col-12 row justify-center">
+					<div class="col-xs-10 col-md-8 text-h6 text-white">
+						<div class="q-pb-md">เราจะช่วยคุณได้อย่างไร</div>
+						<q-input outlined bg-color="white" label="ค้นหา" v-model="text" dense>
+							<template v-slot:prepend>
+								<q-icon name="search" />
+							</template>
+						</q-input>
+					</div>
+					<div class="col-xs-10 col-md-8 row q-col-gutter-md" style=" margin-top: 80px;" v-if="currentRouteName == ''">
+<div class="col-12 row justify-center text-h6 text-dark">ระบบทรัพยากรบุคคล</div>
+                        <div class="col-12"><q-separator color="grey-4" /></div>
+						<div class="col-12">
+							<div class="col-12 row q-col-gutter-lg">
+
+							<div class="col-xs-12 col-sm-4" 
+								v-for="(menu , index) in mainmenu"
+								:key="index"
+							>
+								<q-card class="q-pa-md row justify-center text-dark cursor-pointer cardmenu" @click="clickMain(menu.path)" ><!-- router.push({ name: `${}`}) -->
+									<q-icon class="col-12 items-center" size="20px" :name="`${menu.icon}`"/>
+									<div class="q-pt-md">{{ menu.text }} </div>
+								</q-card>
+							</div>	
+							</div>
+						</div>
+					</div>
+					
+					<div class="col-9 row q-col-gutter-md" style=" margin-top: 80px;" v-else>
+						<div class="col-12 content-heigt">
+
+						
+						<div class="col-12 row ">
+							<q-card class="col-12">
+								<router-view :key="$route.fullPath" />
+							</q-card>
+						</div>
+
+						<div class="col-12 row " v-if="currentRouteName != 'contact'">
+							<q-tabs no-caps active-color="primary" indicator-color="transparent" class="text-grey-8" v-model="tab">
+							<q-tab name="metadata" label="ข้อมูลหลัก" @click="router.push({ path: '/metadata' })"/>
+							<q-tab name="organizational" label="โครงสร้างอัตรากำลัง" @click="router.push({ path: '/organizational' })" />
+							<q-tab name="articles" label="Articles" />
+							</q-tabs>
+						</div>
+					</div>
+					</div>
+				</div>
+			</q-page>
+		</q-page-container>
+	</q-layout>
+</template>
+
+<style>
+.bg-drawer{
+  background: #242a3d;
+}
+.menu {
+  padding-bottom: 5px;
+  padding-top: 5px;
+}
+.tabsHome .q-tab__icon{
+	font-size: 18px;
+}
+.border-100{
+	border-radius: 100px;
+}
+.bg-header{
+ 	background:rgba(39, 50, 56, 0)8 !important;
+}
+
+.bg-top{
+	/* background: #273238; */
+	background-image: url("@/assets/1.png");
+	background-size: cover;
+}
+.header-br{
+	border-bottom: 1px solid #fdfdfd31;
+}
+.menuActive {
+  background: #1e2234;
+  border-radius: 0 100px 100px 0;
+  margin-right: 4%;
+}
+.q-card {
+  box-shadow: 3px 3px 20px -10px rgba(151, 150, 150, 0.261) !important;
+	border: 1px solid #eeeded;
+}
+.q-menu {
+  box-shadow: 3px 3px 10px 1px rgba(95, 95, 95, 0.15) !important;
+}
+.toptitle {
+  font-size: 1.2rem;
+  font-weight: bold;
+  margin-bottom: 1.2%;
+}
+.q-field--outlined .q-field__control{
+	border-radius: 5px;
+}
+.q-field--outlined .q-field__control:before {
+  border-color: #C8D3DB;
+}
+.q-field--outlined .q-icon{
+	color: #7474747f;
+}
+
+.cardmenu:hover{
+   border-color: #02A998;
+   color: #02A998 !important;
+   box-shadow: 3px 3px 10px 1px rgba(95, 95, 95, 0.15) !important;
+}
+
+.cardmenu{
+	padding: 35px; /* ปรับขนาด padding ตามที่คุณต้องการ */
+
+}
+
+.content-heigt{
+	height: 55vh !important;
+	overflow-y:auto;
+}
+
+</style>
diff --git a/src/modules/00_contact/views/Main.vue b/src/modules/00_contact/views/Main.vue
index 170c690..6545f3f 100644
--- a/src/modules/00_contact/views/Main.vue
+++ b/src/modules/00_contact/views/Main.vue
@@ -1,8 +1,26 @@
 <script setup lang="ts">
 </script>
 <template>
+<<<<<<< HEAD
     <div class="col-12 row justify-center text-h6 text-dark q-pt-md">ติดต่อเรา</div>
 	<div class="col-12"><q-separator color="grey-4" /></div>
+=======
+
+<div class="col-xs-10 col-md-8 row q-col-gutter-md">
+    <div class="col-12 row justify-center text-h6 text-dark">ระบบทรัพยากรบุคคล</div>
+                        <div class="col-12">
+                        <q-separator color="grey-4" /></div>
+						<div class="col-12">
+							<div class="col-12 row q-col-gutter-lg">
+							</div>
+						</div>
+					</div>
+
+    <div class="q-px-md q-py-sm text-subtitle1 text-dark bg-grey-4 text-weight-medium">
+        ระบบหลัก
+    </div>
+    
+>>>>>>> aom_dev
 
 
     
@@ -11,17 +29,6 @@
 </template>
 
 <style>
-.card1{
-    margin-top:15px;
-    background-color:#F8F8F8;
-    border-color: #EDEDED !important;
-}
-
-.iconQA {
-    color: #016987; 
-    font-size: 20px;
-    margin-right: 1%;
-}
 
 </style>
 
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index b5c30bc..c629620 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -79,9 +79,15 @@ const onScroll = (info: any) => { scrollInfo.value = info}
 					<img src="@/assets/logo.png" style="height: 35px; max-width: 35px" />
 				</div>
 				<q-space></q-space>
+<<<<<<< HEAD
 				<div class="row q-col-gutter-x-sm">
 					<div><q-btn flat color="white" label="หน้าแรก" @click="goHome"/></div>
 					<div><q-btn color="primary" label="ติดต่อเรา" @click="click()"/></div>
+=======
+				<div>
+					<q-btn class="text-weight-medium" flat color="white" label="หน้าแรก" @click="goHome"/>
+					<q-btn color="secondary" text-color="white" label="ติดต่อเรา" @click="click()"/>
+>>>>>>> aom_dev
 				</div>
 			</q-toolbar>
 		</q-header>
@@ -100,9 +106,15 @@ const onScroll = (info: any) => { scrollInfo.value = info}
 							</template>
 						</q-input>
 					</div>
+<<<<<<< HEAD
 					<div class="col-xs-10 col-md-8 row q-col-gutter-md" style=" margin-top: 80px;" v-if="currentRoute == 'home'">
 						<div class="col-12 row justify-center text-h6 text-dark">ระบบทรัพยากรบุคคล</div>
 						<div class="col-12"><q-separator color="grey-4" /></div>
+=======
+					<div class="col-xs-10 col-md-8 row q-col-gutter-md" style=" margin-top: 80px;" v-if="currentRouteName == ''">
+<div class="col-12 row justify-center text-h6 text-dark">ระบบทรัพยากรบุคคล</div>
+                        <div class="col-12"><q-separator color="grey-4" /></div>
+>>>>>>> aom_dev
 						<div class="col-12">
 							<div class="col-12 row q-col-gutter-lg">