diff --git a/cms/src/lib/data/qualify-exam.json b/cms/src/lib/data/qualify-exam.json
index 52e214b..a14550c 100644
--- a/cms/src/lib/data/qualify-exam.json
+++ b/cms/src/lib/data/qualify-exam.json
@@ -4,14 +4,14 @@
         "date":"24 เม.ย. 2566","institute":"สำนักงาน ก.ก.","institute_id":1,
         "start":"2023-04-24",
         "title":"ด่วน !! ประกาศวัน เวลา สถานที่ และระเบียบการคัดเลือกลูกจ้างกทม.",
-        "detail":"ด่วน !! ประกาศวัน เวลา สถานที่ และระเบียบการคัดเลือกลูกจ้างกทม.",
+        "detail":"<p>สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร ประกาศกำหนดวัน เวลา สถานที่คัดเลือก และระเบียบ เกี่ยวกับการคัดเลือกบุคลากรกรุงเทพมหานครหรือผู้ปฏิบัติงานอื่นในกรุงเทพมหานครเพื่อบรรจุและแต่งตั้ง เป็นข้าราชการกรุงเทพมหานครสามัญ ครั้งที่ 1 / 2565</p><p><img width='50%' src='https://webportal.bangkok.go.th/public/user_files_editor/305/bkkgovjob202303_12.jpg'></p>",
         "img":"/images/sel1.png",
         "docurl":"https://webportal.bangkok.go.th/public/user_files_editor/305/%E0%B8%9B%E0%B8%A3%E0%B8%B0%E0%B8%81%E0%B8%B2%E0%B8%A8%E0%B8%84%E0%B8%B1%E0%B8%94%E0%B9%80%E0%B8%A5%E0%B8%B7%E0%B8%AD%E0%B8%81%E0%B8%A5%E0%B8%B9%E0%B8%81%E0%B8%88%E0%B9%89%E0%B8%B2%E0%B8%87.pdf"
         
     },
     {
         "id":"20",
-        "date":"3 เม.ย. 2566","institute":"สำนักอนามัย","institute_id":2,
+        "date":"3 เม.ย. 2566","institute":"สำนักงาน ก.ก.","institute_id":1,
         "start":"2023-04-03",
         "title":"วัน เวลา สถานที่ และระเบียบการคัดเลือกลูกจ้างกทม.",
         "detail":"ด่วน !! ประกาศวัน เวลา สถานที่ และระเบียบการคัดเลือกลูกจ้างกทม.",
diff --git a/cms/src/routes/+page.svelte b/cms/src/routes/+page.svelte
index b73c313..c218274 100644
--- a/cms/src/routes/+page.svelte
+++ b/cms/src/routes/+page.svelte
@@ -114,7 +114,7 @@
 								</div>
 
 								<a
-									href="/"
+									href="/qualifying/{qualify_exams[0].id}"
 									class=" text-blue-500 hover:text-blue-300 ease-linear transition-all duration-150"
 								>
 									อ่านต่อ
@@ -151,7 +151,7 @@
 										</div>
 		
 										<a
-											href="/"
+											href="/qualifying/{qualify_exams[1].id}"
 											class="  text-blue-500 hover:text-blue-300 ease-linear transition-all duration-150"
 										>
 											อ่านต่อ
@@ -186,7 +186,7 @@
 										</div>
 		
 										<a
-											href="/"
+											href="/qualifying/{qualify_exams[2].id}"
 											class="  text-blue-500 hover:text-blue-300 ease-linear transition-all duration-150"
 										>
 											อ่านต่อ
@@ -244,7 +244,7 @@
 								</div>
 
 								<a
-									href="/"
+									href="/competitive/{competitive_exams[0].id}"
 									class="  text-blue-500 hover:text-blue-300 ease-linear transition-all duration-150"
 								>
 									อ่านต่อ
@@ -281,7 +281,7 @@
 										</div>
 		
 										<a
-											href="/"
+											href="/competitive/{competitive_exams[1].id}"
 											class="  text-blue-500 hover:text-blue-300 ease-linear transition-all duration-150"
 										>
 											อ่านต่อ
@@ -316,7 +316,7 @@
 										</div>
 		
 										<a
-											href="/"
+											href="/competitive/{competitive_exams[2].id}"
 											class="  text-blue-500 hover:text-blue-300 ease-linear transition-all duration-150"
 										>
 											อ่านต่อ
diff --git a/cms/src/routes/competitive/+page.server.ts b/cms/src/routes/competitive/+page.server.ts
index 129a7a6..a5cdf73 100644
--- a/cms/src/routes/competitive/+page.server.ts
+++ b/cms/src/routes/competitive/+page.server.ts
@@ -6,11 +6,9 @@ export const load: PageServerLoad = async () => {
     const exams = await getCompetitiveExams() 
     const events:CalendarEvent[]=[]
     exams.forEach(({id,title,start})=>{
-        const backgroundColor ="#1111EE"
+        const backgroundColor ="#9999FF"
         const url = "/competitive/"+id
         events.push({id,title,start,url,backgroundColor})
     })
     return {content,exams,events}
-}
-
-
+}
\ No newline at end of file
diff --git a/cms/src/routes/competitive/+page.svelte b/cms/src/routes/competitive/+page.svelte
index 36dfe3d..957bddf 100644
--- a/cms/src/routes/competitive/+page.svelte
+++ b/cms/src/routes/competitive/+page.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
+	import ActivityCalendar from '$lib/components/ActivityCalendar.svelte'
     import type { PageData } from './$types'
     export let data: PageData;
 	const exams = data.exams
+	const events = data.events
 </script>
 <section>
     <div class="p-one parallax-inner">
@@ -9,13 +11,7 @@
     </div>
 </section>
 <section class="pb-40 relative bg-blueGray-100">
-	<div class="container mx-auto items-start flex flex-wrap px-4 pt-11">
-        <div class="card  bg-white shadow-xl w-full p-8">
-            <div>
-                {@html data.content}
-            </div>
-        </div>
-    </div>
+	<div class="p-3">{@html data.content}</div>
 	<div class="container mx-auto justify-center flex flex-wrap">
 		<div class=" bg-blueGray-100 -mt-6 px-5 top-0 bottom-auto absolute z-40 rounded-md" >
 			<div class="text-sm breadcrumbs">
@@ -32,39 +28,44 @@
 			</div>
 		</div>
 	</div>
-    <div class="container mx-auto items-start flex flex-wrap px-4 pt-11">
-		<div
-		class=" relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded bg-white"
-		>
-		<div class="rounded-t mb-0 px-4 py-3 border-0">
-			<div class="flex flex-wrap items-center">
-			<div class="relative w-full px-4 max-w-full flex-grow flex-1">
-				<h3
-				class="text-lg text-blueGray-700'"
-				>
-					รายการสอบ
-				</h3>
-			</div>
+	<div class="container mx-auto items-start flex flex-wrap px-4 pt-11">
+		<div class="w-full lg:w-7/12 cardxl">
+			<div class="card  bg-white shadow-xl w-full">
+				<ActivityCalendar {events} />
 			</div>
 		</div>
-			<div class="block w-full overflow-x-auto">
-				<table class="items-center w-full bg-transparent border-collapse">
-					<thead>
-					<tr>
-					<th class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left bg-blueGray-50 text-blueGray-500 border-blueGray-100">วันที่</th> 
-					<th class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left bg-blueGray-50 text-blueGray-500 border-blueGray-100">การสอบ</th> 
-					<th class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left bg-blueGray-50 text-blueGray-500 border-blueGray-100">หน่วยงาน</th> 
-					</tr>
-				</thead> 
-				<tbody>
-					{#each exams as exam}
-					<tr>
-					<th class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left"><a href={"/competitive/"+exam.id}>{exam.date}</a></th> 
-					<td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left">{exam.title}</td> 
-					<td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left"></td> 
-					{/each}
-				</tbody> 
-				</table>
+		<div class="w-full lg:w-5/12">
+			<div
+			class=" card bg-white shadow-xl flex flex-col min-w-0 break-words w-full auto-rows-max"
+			>
+			<div class="rounded-t mb-0 px-4 py-3 border-0">
+				<div class="flex flex-wrap items-center">
+				<div class="relative w-full px-4 max-w-full flex-grow flex-1">
+					<h3
+					class="text-lg text-blueGray-700'"
+					>
+						รายการสอบ
+					</h3>
+				</div>
+				</div>
+			</div>
+				<div class="block w-full overflow-x-auto">
+					<table class="items-center w-full bg-transparent border-collapse">
+						<thead>
+						<tr>
+						<th class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left bg-blueGray-50 text-blueGray-500 border-blueGray-100">วันที่</th> 
+						<th class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left bg-blueGray-50 text-blueGray-500 border-blueGray-100">การสอบ</th> 
+						</tr>
+					</thead> 
+					<tbody>
+						{#each exams as exam}
+						<tr>
+						<th class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left"><a href="/competitive/{exam.id}">{exam.date}</a></th> 
+						<td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left"><a href="/competitive/{exam.id}">{exam.title}</a></td> 
+						{/each}
+					</tbody> 
+					</table>
+				</div>
 			</div>
 		</div>
 	</div>
diff --git a/cms/src/routes/competitive/[id]/+page.svelte b/cms/src/routes/competitive/[id]/+page.svelte
index dd6addc..50e43d6 100644
--- a/cms/src/routes/competitive/[id]/+page.svelte
+++ b/cms/src/routes/competitive/[id]/+page.svelte
@@ -1,9 +1,6 @@
 <script lang="ts">
-
-    import ver from "$lib/ver.json"
     import type { PageData } from './$types'
     export let data: PageData;
-
 </script>
 <section>
     <div class="p-one parallax-inner">
@@ -32,13 +29,8 @@
             <div>
                 {@html data.detail}
             </div>
-			<div></div>
-			{#if data.docUrl}
-			<div><a href={data.docUrl} >เอกสาร</a></div>
-			{/if}
+            <div class="pt-12"></div>
+            <div></div>
         </div>
     </div>
-</section>
-
-
-
+</section>
\ No newline at end of file