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/lib/utils.ts b/cms/src/lib/utils.ts
index 3535b4d..46deaa4 100644
--- a/cms/src/lib/utils.ts
+++ b/cms/src/lib/utils.ts
@@ -6,7 +6,7 @@
      * @param nameColor dictionary like object for name and color
     */
     export function getBgColorDict(name:string,nameColor:{ [index: string]:string}){
-        const eventBg = ["#23ccef","rgba(251,64,75,.2)","rgba(68,125,247,.2)","rgba(64,251,75,.2)"]
+        const eventBg = ["#beffbf","#c6ebfe","#ffbebe","rgba(64,251,75,.2)"]
         if(!nameColor[name]){
             const len =  Object.keys(nameColor).length
             nameColor[name]=len>eventBg.length?eventBg[0]:eventBg[len]