diff --git a/src/modules/00_contact/views/1.vue b/src/modules/00_contact/views/1.vue
deleted file mode 100644
index f6fc50d..0000000
--- a/src/modules/00_contact/views/1.vue
+++ /dev/null
@@ -1,215 +0,0 @@
-<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 bff05d7..ed10bc1 100644
--- a/src/modules/00_contact/views/Main.vue
+++ b/src/modules/00_contact/views/Main.vue
@@ -2,18 +2,128 @@
 </script>
 <template>
     <div class="col-12 row justify-center text-h6 text-dark q-pt-md">ติดต่อเรา</div>
+    <div class="col-12 q-pt-md "></div>
 	<div class="col-12"><q-separator color="grey-4" /></div>
 
+
     <q-card class="row col-12 q-mt-md">
-        <div class="col-12 q-px-md q-py-sm text-subtitle1 text-dark bg-grey-4 text-weight-medium">
+        <div class="col-12 q-px-md q-py-sm text-subtitle2 text-blue bg-light-blue-1 text-weight-medium">
             ระบบหลัก
         </div>
         <div class="col-12 row q-pa-md">
+            <div class="col-6 row q-pa-sm icon_cer q-col-gutter-md">
+                        <q-icon class="iconcontat" name="mdi-account-tie"/>
+                        <div class="txt text-weight-regular">ผู้ดูแล
+                            <br>
+                            <div class="txt1 text-weight-regular">
+                                นางสาวกัณฐิมา กาฬสินธุ์
+                            </div>
+                        </div>
+            </div>
+
+            <div class="col-6 row q-pa-sm icon_cer q-col-gutter-md">
+                        <q-icon class="iconcontat" name="mdi-briefcase"/>
+                        <div class="txt text-weight-regular">หน่วยงาน
+                            <br>
+                            <div class="txt1 text-weight-regular ">
+                                สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร
+                            </div>
+                        </div>
+            </div>
+
+            <div class="col-6 row q-pa-sm icon_cer q-col-gutter-md">
+                        <q-icon class="iconcontat" name="mdi-phone"/>
+                        <div class="txt text-weight-regular">เบอร์โทร
+                            <br>
+                            <div class="txt1 text-weight-regular">
+                                012111111111
+                            </div>
+                        </div>
+            </div>
+
+            <div class="col-6 row q-pa-sm icon_cer q-col-gutter-md">
+                        <q-icon class="iconcontat" name="mdi-email"/>
+                        <div class="txt text-weight-regular">อีเมล
+                            <br>
+                            <div class="txt1 text-weight-regular ">
+                                g@gmail.com
+                            </div>
+                        </div>
+            </div>
+        </div>
+    </q-card>
+
+
+    <q-card class="row col-12 q-mt-md">
+        <div class="col-12 q-px-md q-py-sm text-subtitle2 text-blue bg-blue-1 text-weight-medium">
+            โครงสร้างอัตรากำลัง
+        </div>
+        <div class="col-12 row q-pa-md">
+            <div class="col-6 row q-pa-sm icon_cer q-col-gutter-md">
+                        <q-icon class="iconcontat" name="mdi-account-tie"/>
+                        <div class="txt text-weight-regular">ผู้ดูแล
+                            <br>
+                            <div class="txt1 text-weight-regular">
+                                นางสาวรัชภรณ์ ภักดี
+                            </div>
+                        </div>
+            </div>
+
+            <div class="col-6 row q-pa-sm icon_cer q-col-gutter-md">
+                        <q-icon class="iconcontat" name="mdi-briefcase"/>
+                        <div class="txt text-weight-regular">หน่วยงาน
+                            <br>
+                            <div class="txt1 text-weight-regular ">
+                                สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร
+                            </div>
+                        </div>
+            </div>
+
+            <div class="col-6 row q-pa-sm icon_cer q-col-gutter-md">
+                        <q-icon class="iconcontat" name="mdi-phone"/>
+                        <div class="txt text-weight-regular">เบอร์โทร
+                            <br>
+                            <div class="txt1 text-weight-regular">
+                                01111222333
+                            </div>
+                        </div>
+            </div>
+
+            <div class="col-6 row q-pa-sm icon_cer q-col-gutter-md">
+                        <q-icon class="iconcontat" name="mdi-email"/>
+                        <div class="txt text-weight-regular">อีเมล
+                            <br>
+                            <div class="txt1 text-weight-regular ">
+                                t@gmail.com
+                            </div>
+                        </div>
+            </div>
         </div>
     </q-card>  
+
+    
 </template>
 
 <style>
+.iconcontat {
+    color: #74747468; 
+    font-size: 25px;
+    margin-right: 1%;
+}
 
-</style>
+.icon_cer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+}
 
+.txt{
+    color: #747474df;
+    font-size :12px;
+}
+
+.txt1{
+    color: black;
+    font-size :14px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index 57ccb3a..aa728dd 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from "vue";
-import { useRoute, useRouter } from "vue-router";
+import { ref} from "vue";
+import { useRouter } from "vue-router";
 import { useQuasar } from "quasar";
 
 const router = useRouter();
@@ -12,9 +12,20 @@ const tab = ref('')
 const currentRouteName = router.currentRoute.value.name;
 const currentRoute = ref(currentRouteName);
 const text = ref('');
-const menuList = [
-	{text:'ข้อมูลหลัก',path: 'metadata'},
-	{text:'โครงสร้างอัตรากำลัง',path: 'organizational'},
+const tabManu = [
+	{name: 'metadata',label:'ข้อมูลหลัก',path: 'metadata'},
+	{name: 'organizational',label:'โครงสร้างอัตรากำลัง',path: 'organizational'},
+	{name: '3',label:'ทะเบียนประวัติ',path: ''},
+	{name: '4',label:'ทะเบียนประวัติลูกจ้าง',path: ''},
+	{name: '5',label:'ออกคำสั่ง',path: ''},
+	{name: '6',label:'สรรหา',path: ''},
+];
+const tabManu2 = [
+	{name: '7',label:'บรรจุ แต่งตั้ง ย้าย โอน',path: ''},
+	{name: '8',label:'พ้นราชการ',path: ''},
+	{name: '9',label:'เครื่องราชฯ',path: ''},
+	{name: '10',label:'การลา',path: ''},
+	{name: '11',label:'วินัย',path: ''},
 ];
 
 const mainmenu = [
@@ -37,6 +48,11 @@ const clickMain = (val: string) => {
 	tab.value=val
 };
 
+const clickTab= (val2: string,el: any ) => {
+	router.push(val2)
+	window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+};
+
 const goHome = () => {
 	router.push('/')
 	currentRoute.value = 'home'
@@ -119,25 +135,42 @@ const onScroll = (info: any) => { scrollInfo.value = info}
 						</div>
 					</div>
 					
-					<div class="col-9 row" style=" margin-top: 80px;" v-else>
+					<div class="col-8 row" style=" margin-top: 80px;" v-else>
 						<q-layout>
-							<q-page-container class="col-12">
+							<q-page-container class="col-12 ">
 								<q-page>
 									<div class="col-12 row ">
-										<div class="col-12" >
+										<div class="col-12 q-mt-lg" >
 											<router-view :key="$route.fullPath" />
 										</div>
+
+										<div class="col-12 row justify-center q-mt-lg" v-if="currentRoute != 'contact'">
+											<q-tabs
+												v-model="tab" 
+												class="text-grey-8" dense 
+												align="center" 
+												no-caps 
+												active-color="primary" 
+												indicator-color="transparent" 
+												 >
+												<q-tab 
+													v-for="(tab,index) in tabManu"
+													:key="index"
+													:name="tab.name" 
+													:label="tab.label" 
+													@click="clickTab(tab.path)" />
+											</q-tabs>
+											<q-tabs class="text-grey-8" dense align="center" no-caps active-color="primary" indicator-color="transparent" v-model="tab">
+												<q-tab 
+													v-for="(tab,index) in tabManu2"
+													:key="index"
+													:name="tab.name" 
+													:label="tab.label" 
+													@click="clickTab(tab.path)" />
+											</q-tabs>
+										</div>
 									</div>
 
-									<div class="col-12 row" v-if="currentRouteName != 'contact'">
-										<q-page-scroller  :scroll-offset="300" :offset="[18, 18]" >
-											<q-tabs content-class="red" 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>
-										</q-page-scroller>
-									</div>
 								</q-page>
 							</q-page-container>
 						</q-layout>
@@ -224,4 +257,5 @@ const onScroll = (info: any) => { scrollInfo.value = info}
 .bgHeader{
 	background: #1e2234e5;
 }
+
 </style>