diff --git a/src/modules/00_contact/views/Main.vue b/src/modules/00_contact/views/Main.vue
index 4e784d2..ed10bc1 100644
--- a/src/modules/00_contact/views/Main.vue
+++ b/src/modules/00_contact/views/Main.vue
@@ -1,11 +1,129 @@
 <script setup lang="ts">
 </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-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 d1dcfad..6eb31bb 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -9,12 +9,12 @@ const $q = useQuasar();
 
 const tab = ref('')
 
-const currentRouteName = ref('');
+const currentRouteName = router.currentRoute.value.name;
+const currentRoute = ref(currentRouteName);
 const text = ref('');
 const menuList = [
 	{text:'ข้อมูลหลัก',path: 'metadata'},
 	{text:'โครงสร้างอัตรากำลัง',path: 'organizational'},
-
 ];
 
 const mainmenu = [
@@ -33,26 +33,29 @@ const mainmenu = [
 
 const clickMain = (val: string) => {
 	router.push(val)
-	currentRouteName.value = val
+	currentRoute.value = val
 	tab.value=val
 };
 
 const goHome = () => {
 	router.push('/')
-	currentRouteName.value = ''
+	currentRoute.value = 'home'
 };
 
 const click = () => {
 	router.push('/contact')
-	currentRouteName.value = 'contact'
+	currentRoute.value = 'contact'
 };
+const scrollInfo = ref({})
+const onScroll = (info: any) => { scrollInfo.value = info}
 
 </script>
 <!-- โครงเว็บ -->
 <template>
 	<q-layout view="hHh LpR fFr">
+    	<q-scroll-observer @scroll="onScroll" />
 		<!-- header -->
-		<q-header flat class="text-dark col-12 bg-header bg-transparent" height-hint="7">
+		<q-header flat class="text-dark col-12 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"/>
@@ -76,12 +79,10 @@ const click = () => {
 					<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 class="row q-col-gutter-x-sm">
+					<div><q-btn class="text-weight-medium" flat color="white" label="หน้าแรก" @click="goHome"/></div>
+					<div><q-btn color="secondary" text-color="white" label="ติดต่อเรา" @click="click()"/></div>
 				</div>
-				
-
 			</q-toolbar>
 		</q-header>
 
@@ -99,10 +100,9 @@ const click = () => {
 							</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-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-12">
 							<div class="col-12 row q-col-gutter-lg">
 
@@ -119,27 +119,46 @@ const click = () => {
 						</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-8 row" style=" margin-top: 80px;" v-else>
+						<q-layout>
+							<q-page-container class="col-12 ">
+								<q-page>
+									<div class="col-12 row ">
+										<div class="col-12" >
+											<router-view :key="$route.fullPath" />
+										</div>
 
-						
-						<div class="col-12 row ">
-							<q-card class="col-12">
-								<router-view :key="$route.fullPath" />
-							</q-card>
-						</div>
+										<div class="col-12 row" style="margin-top: 30px;" v-if="currentRouteName != 'contact'">
+										<q-page-scroller position="bottom-center" :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' })" />
 
-						<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>
+												<q-tab name="organizational" label="ทะเบียนประวัติ" @click="router.push({ path: '/organizational' })" />
+												<q-tab name="organizational" label="ทะเบียนประวัติลูกจ้าง" @click="router.push({ path: '/organizational' })" />
+												<q-tab name="organizational" label="ออกคำสั่ง" @click="router.push({ path: '/organizational' })" />
+												<q-tab name="organizational" label="สรรหา" @click="router.push({ path: '/organizational' })" />
+												<q-tab name="organizational" label="บรรจุ แต่งตั้ง ย้าย โอน" @click="router.push({ path: '/organizational' })" />
+												<q-tab name="organizational" label="พ้นราชการ" @click="router.push({ path: '/organizational' })" />
+												<q-tab name="organizational" label="เครื่องราชฯ" @click="router.push({ path: '/organizational' })" />
+												<q-tab name="organizational" label="การลา" @click="router.push({ path: '/organizational' })" />
+												<q-tab name="organizational" label="วินัย" @click="router.push({ path: '/organizational' })" />
+												
+											</q-tabs>
+										</q-page-scroller>
+									</div>
+									</div>
+
+								</q-page>
+							</q-page-container>
+						</q-layout>
 					</div>
 				</div>
 			</q-page>
+			<!-- place QPageScroller at end of page -->
+			<q-page-scroller position="bottom-right" :scroll-offset="150" :offset="[18, 50]">
+				<q-btn fab icon="keyboard_arrow_up" color="blue" />
+			</q-page-scroller>
 		</q-page-container>
 	</q-layout>
 </template>
@@ -209,7 +228,7 @@ const click = () => {
 }
 
 .content-heigt{
-	height: 55vh !important;
+	height: 60vh !important;
 	overflow-y:auto;
 }