diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index 714d554..57ccb3a 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -52,11 +52,11 @@ const onScroll = (info: any) => { scrollInfo.value = info}
 </script>
 <!-- โครงเว็บ -->
 <template>
-	<q-layout view="hHh LpR fFr">
-    	<q-scroll-observer @scroll="onScroll" />
+	<q-layout view="hHh LpR fFr" @scroll="onScroll" >
+		
 		<!-- header -->
-		<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%;'">
+		<q-header flat :class="scrollInfo.position >= 10 ? 'text-dark col-12 bgHeader': 'text-dark col-12 bg-transparent'" height-hint="7">
+			<q-toolbar class="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" />
@@ -130,7 +130,7 @@ const onScroll = (info: any) => { scrollInfo.value = info}
 									</div>
 
 									<div class="col-12 row" v-if="currentRouteName != 'contact'">
-										<q-page-scroller position="bottom-center" :scroll-offset="300" :offset="[18, 18]" >
+										<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' })" />
@@ -221,4 +221,7 @@ const onScroll = (info: any) => { scrollInfo.value = info}
 	overflow-y:auto;
 }
 
+.bgHeader{
+	background: #1e2234e5;
+}
 </style>