diff --git a/cms/src/app.html b/cms/src/app.html
index f0a1adb..48bbf3d 100644
--- a/cms/src/app.html
+++ b/cms/src/app.html
@@ -8,6 +8,7 @@
 		<link rel="shortcut icon" href="/favicon.ico" />
 		<link rel="stylesheet" href="/styles/tailwind.css" />
 		<link rel="stylesheet" href="/vendor/fontawesome-free/css/all.min.css"/>
+		<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@100;200;300;400;500;600;700;800;900&display=swap">
 		<title>กองสรรหาบุคคล</title>
 		%sveltekit.head%
 	</head>
diff --git a/cms/src/app.postcss b/cms/src/app.postcss
index d8c58ae..cf2690b 100644
--- a/cms/src/app.postcss
+++ b/cms/src/app.postcss
@@ -3,6 +3,9 @@
 @tailwind components;
 @tailwind utilities;
 @layer base {
+    html {
+      font-family: 'Noto Sans Thai', sans-serif;
+    }
     h1 {
       @apply text-4xl;
     }
@@ -15,4 +18,14 @@
     ol{
       @apply list-decimal
     }
+    .cardxl{
+      padding-right: 2rem;
+    }
+    @media only screen and (max-width: 1024px) {
+      .cardxl{
+        padding-right: 0rem !important;
+        padding-bottom: 2rem;
+      }
+     
+    }
   }
diff --git a/cms/src/routes/+page.svelte b/cms/src/routes/+page.svelte
index c853a71..6b8b816 100644
--- a/cms/src/routes/+page.svelte
+++ b/cms/src/routes/+page.svelte
@@ -77,7 +77,7 @@
     <div class="container mx-auto">
 			<div class="flex flex-wrap px-6">
 				<div
-					class="w-full pt-24 mb-10 flex flex-wrap justify-between">
+					class="w-full pt-20 mb-10 flex flex-wrap justify-between">
 					<h6 class="text-2xl font-semibold ">
 						ประกาศเกี่ยวกับ<span class="text-red-400">การคัดเลือกบุคลากรกทม.</span>
 					</h6>
@@ -123,7 +123,7 @@
 					<div class="flex flex-wrap space-y-8">
 						<div class="flex flex-col w-full">
 							<div class="card card-side bg-white shadow-xl w-full">
-								<figure class="w-full lg:w-5/12 imgCard img-hover-zoom--brightness">
+								<figure class="w-full lg:w-5/12 imgCard">
 									<img src="{sel2}" alt="1" class="h-full" />
 								</figure>
 								<div class="card-body w-full lg:w-7/12">
@@ -148,7 +148,7 @@
 						</div>
 						<div class=" flex flex-col w-full">
 							<div class="card card-side bg-white shadow-xl w-full">
-								<figure class="w-full lg:w-5/12 imgCard img-hover-zoom--brightness">
+								<figure class="w-full lg:w-5/12 imgCard">
 									<img src="{sel3}" alt="1"  class="h-full"/>
 								</figure>
 								<div class="card-body w-full lg:w-7/12">
@@ -180,7 +180,7 @@
     	<div class="container mx-auto mt-4">
 			<div class="flex flex-wrap px-6">
 				<div
-					class="w-full pt-24 mb-10 flex flex-wrap justify-between">
+					class="w-full pt-20 mb-10 flex flex-wrap justify-between">
 					<h6 class="text-2xl font-semibold ">
 						ประกาศเกี่ยวกับ<span class="text-red-400">การสอบแข่งขัน</span>
 					</h6>
@@ -226,7 +226,7 @@
 					<div class="flex flex-wrap space-y-8">
 						<div class="flex flex-col w-full">
 							<div class="card card-side bg-white shadow-xl w-full">
-								<figure class="w-full lg:w-5/12 imgCard img-hover-zoom--brightness">
+								<figure class="w-full lg:w-5/12 imgCard">
 									<img src="{c2}" alt="1" class="h-full" />
 								</figure>
 								<div class="card-body w-full lg:w-7/12">
@@ -251,7 +251,7 @@
 						</div>
 						<div class=" flex flex-col w-full">
 							<div class="card card-side bg-white shadow-xl w-full">
-								<figure class="w-full lg:w-5/12 imgCard img-hover-zoom--brightness">
+								<figure class="w-full lg:w-5/12 imgCard">
 									<img src="{c3}" alt="1"  class="h-full"/>
 								</figure>
 								<div class="card-body w-full lg:w-7/12">
@@ -283,10 +283,11 @@
 @media only screen and (max-width: 1024px) {
 	.card-side{
 		flex-direction: column !important;
+		
 	}
-	.cardxl{
-		padding-right: 0rem !important;
-		padding-bottom: 2rem;
+	.card-side :where(figure:first-child){
+		border-start-end-radius: 1rem !important;
+		border-end-start-radius: 0rem !important;
 	}
 	.imgCard{
 		height: 250px;
@@ -295,9 +296,6 @@
 .card-side{
 	flex-direction: row;
 }
-.cardxl{
-	padding-right: 2rem;
-}
 .card-title{
 	height: 80px;
 	align-items: start;
@@ -311,15 +309,4 @@
 .imgCard{
 	max-height: 220px;
 }
-.img-hover-zoom--brightness img {
-  transition: transform 2s, filter 1.5s ease-in-out;
-  transform-origin: center center;
-  filter: brightness(97%);
-}
-
-/* The Transformation */
-.img-hover-zoom--brightness:hover img {
-  filter: brightness(100%);
-  transform: scale(1.3);
-}
 </style>
\ No newline at end of file
diff --git a/cms/src/routes/competitive/+page.svelte b/cms/src/routes/competitive/+page.svelte
index d99be23..ae3da40 100644
--- a/cms/src/routes/competitive/+page.svelte
+++ b/cms/src/routes/competitive/+page.svelte
@@ -4,7 +4,7 @@
 	const exams = data.exams
 </script>
 
-<section class="items-start h-screen flex max-h-860-px pt-10  bg-blueGray-100">
+<section class="items-start h-screen flex max-h-860-px pt-12  bg-blueGray-100">
     <div class="container mx-auto items-start flex flex-wrap px-4">
 		<h2 class="font-semibold text-2xl text-blueGray-600 mb-4">
 			การสอบแข่งขัน
diff --git a/cms/src/routes/qualifying/+page.svelte b/cms/src/routes/qualifying/+page.svelte
index 9e32ae0..a9a21b4 100644
--- a/cms/src/routes/qualifying/+page.svelte
+++ b/cms/src/routes/qualifying/+page.svelte
@@ -6,50 +6,53 @@
 	const events = data.events
 </script>
 
-<div class="x">
-	<ActivityCalendar {events} />
-</div>
-<section class="items-start h-screen flex max-h-1000-px pt-10  bg-blueGray-100">
+<section class="items-start flex  pt-12 pb-20  bg-blueGray-100">
 
 	<div class="container mx-auto items-start flex flex-wrap px-4">
-		<h2 class="font-semibold text-2xl text-blueGray-600 mb-4">
+		<h2 class="font-semibold text-2xl text-blueGray-600 mb-4 w-full">
 			การสอบคัดเลือก
 		</h2>
-		<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="font-semibold text-lg text-blueGray-700'"
-				>
-					รายการสอบ
-				</h3>
-			</div>
+		<div class="w-full lg:w-6/12 cardxl">
+			<div class="card  bg-white shadow-xl w-full p-4">
+				<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={"/exams/"+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.detail}</td> 
-					<td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left">{exam.institute}</td> 
-					{/each}
-				</tbody> 
-				</table>
+		<div class="w-full lg:w-6/12">
+			<div
+			class=" card bg-white shadow-xl flex flex-col min-w-0 break-words w-full"
+			>
+			<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="font-semibold 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> 
+						<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={"/exams/"+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.detail}</td> 
+						<td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left">{exam.institute}</td> 
+						{/each}
+					</tbody> 
+					</table>
+				</div>
 			</div>
 		</div>
 	</div>
-
 </section>
 
diff --git a/cms/src/routes/qualifying/[id]/+page.svelte b/cms/src/routes/qualifying/[id]/+page.svelte
index 9579b2b..a591cd8 100644
--- a/cms/src/routes/qualifying/[id]/+page.svelte
+++ b/cms/src/routes/qualifying/[id]/+page.svelte
@@ -4,7 +4,7 @@
 
 </script>
 
-<section class="items-start h-screen flex max-h-1000-px pt-10  bg-blueGray-100">
+<section class="items-start h-screen flex max-h-1000-px pt-12  bg-blueGray-100">
 
 	<div class="container mx-auto items-start flex flex-wrap px-4">
 		<h2 class="font-semibold text-2xl text-blueGray-600 mb-4">