diff --git a/cms/src/lib/components/Footer.svelte b/cms/src/lib/components/Footer.svelte
index b16be73..408e7a6 100644
--- a/cms/src/lib/components/Footer.svelte
+++ b/cms/src/lib/components/Footer.svelte
@@ -31,8 +31,8 @@
   <div class="container mx-auto px-4">
     <div class="flex flex-wrap text-center lg:text-left">
       <div class="w-full lg:w-6/12 px-4">
-        <div class=" mb-4">
-          <div class="w-12 rounded-full">
+        <div class="mb-4 flex flex-wrap justify-center lg:justify-start ">
+          <div class="w-12 rounded-full ">
           <img src={logo_url?logo_url:'/images/logo.png'} alt="logo">
           </div>
         </div>
diff --git a/cms/src/lib/components/Header.svelte b/cms/src/lib/components/Header.svelte
index 94d4b30..a5de37e 100644
--- a/cms/src/lib/components/Header.svelte
+++ b/cms/src/lib/components/Header.svelte
@@ -2,6 +2,13 @@
   export let logo_url:string = "/images/logo.png"
   export let title:string = "ใส่ชื่อองค์กรที่นี้"
   export let supervised:string = "ใส่สังกัดที่นี้"
+	export let home:string = "/"
+	export let qualifying:string = "/qualifying"
+	export let competitive:string = "/competitive"
+	export let about:string = "/about"
+	
+	import { page } from '$app/stores';
+
 </script>
 
 <div class="navbar bg-white w-full top-0 z-50 fixed flex-wrap items-center justify-between px-4 ">
@@ -39,11 +46,12 @@
 			</ul>
 		</div>
 		<div class="tabs hidden lg:flex w-full"><!-- tab-active -->
-			<a href="/" class="tab " >หน้าแรก</a>
-			<a href="/qualifying" class="tab ">การสอบคัดเลือก</a>
-			<a href="/competitive" class="tab">การสอบแข่งขัน</a>
-			<a href="/about" class="tab">เกี่ยวกับเรา</a>
+			<a href="{home}" class="{$page.url.pathname == home? 'tab text-gray-700': 'tab '}">หน้าแรก</a>
+			<a href="{qualifying}" class="{$page.url.pathname == qualifying? 'tab text-gray-700': 'tab '}">การสอบคัดเลือก</a>
+			<a href="{competitive}"  class="{$page.url.pathname == competitive? 'tab text-gray-700': 'tab '}">การสอบแข่งขัน</a>
+			<a href="{about}"  class="{$page.url.pathname == about? 'tab text-gray-700': 'tab '}">เกี่ยวกับเรา</a>
 		</div>
+		
 	</div>
 </div>
 </div>
diff --git a/cms/src/routes/competitive/+page.server.ts b/cms/src/routes/competitive/+page.server.ts
index bfe3f87..4e4b7e3 100644
--- a/cms/src/routes/competitive/+page.server.ts
+++ b/cms/src/routes/competitive/+page.server.ts
@@ -13,16 +13,16 @@ export const load: PageServerLoad = async ({fetch}) => {
     const events:CalendarEvent[]=[]
     exams.forEach((ex)=>{
         const {id,title,start,end,category_id} = ex
-        let backgroundColor ="#23ccef"
+        let backgroundColor ="#c6ebfe"
         switch (String(category_id)) {
             case "1":
-                backgroundColor="rgba(251,64,75,.2)"
+                backgroundColor="#beffbf"
                 break;
             case "2":
-                backgroundColor="#23ccef"
+                backgroundColor="#c6ebfe"
                 break;
             case "3":
-                backgroundColor="rgba(68,125,247,.2)"
+                backgroundColor="#ffbebe"
                 break;
             default:
                 break;