diff --git a/cms/src/app.postcss b/cms/src/app.postcss
index 3ada4e4..fac5e17 100644
--- a/cms/src/app.postcss
+++ b/cms/src/app.postcss
@@ -138,4 +138,9 @@
       color: #02A998;
       box-shadow: rgba(149, 157, 165, 0.15) 0px 5px 10px;
     }
+    .card-detail{
+      border: 1px solid rgba(51, 65, 85, 0.129);
+      background-color: rgba(197, 209, 227, 0.064);
+      border-radius: 5px;
+    }
   }
diff --git a/cms/src/routes/competitive/[id]/+page.svelte b/cms/src/routes/competitive/[id]/+page.svelte
index 95c1c2f..691bf31 100644
--- a/cms/src/routes/competitive/[id]/+page.svelte
+++ b/cms/src/routes/competitive/[id]/+page.svelte
@@ -37,15 +37,15 @@
 				<i class="fa-regular fa-calendar mr-4 text-blue-500"></i><span class="text-blue-500">{data.date}</span>
 			</div>
 			{#if data.announcementExam}
-			<div  class="text-sm">
+			<div class="text-md card-detail p-4 mt-5 space-y-2">
 				{#if data.register_startDate}
-				<div>สมัคร: {formatDate(data.register_startDate,data.register_endDate)}</div>
+				<div><span class="pr-1 font-semibold ">สมัคร :</span> {formatDate(data.register_startDate,data.register_endDate)}</div>
 				{/if}
 				{#if data.payment_startDate}
-				<div>ชำระเงิน: {formatDate(data.payment_startDate,data.payment_endDate)} </div>
+				<div><span class="pr-1 font-semibold">ชำระเงิน :</span> {formatDate(data.payment_startDate,data.payment_endDate)} </div>
 				{/if}
 				{#if data.examDate }
-				<div>สอบ: {formatDate(data.examDate)}</div>
+				<div><span class="pr-1 font-semibold">สอบ :</span> {formatDate(data.examDate)}</div>
 				{/if}
 			</div>
 			{/if}
@@ -61,7 +61,7 @@
 			{/if}
 
 			{#if data.regi}
-				<div class="{data.regi.length == 0 ? 'display-none': 'w-12/12 text-lg font-medium'}">สมัครสอบ</div>
+				<div class="{data.regi.length == 0 ? 'display-none': 'w-12/12 text-lg font-medium pt-6'}">สมัครสอบ</div>
 				{#each data.regi as regi}
 				<hr class="border-blueGray-200 my-2" />
 				
diff --git a/cms/src/routes/qualifying/[id]/+page.svelte b/cms/src/routes/qualifying/[id]/+page.svelte
index aceaa9d..083ccb2 100644
--- a/cms/src/routes/qualifying/[id]/+page.svelte
+++ b/cms/src/routes/qualifying/[id]/+page.svelte
@@ -33,21 +33,21 @@
 		</div>
 	</div>
 	<div class="container mx-auto items-start flex flex-wrap px-4 pt-11 justify-center">
-        <div class="card  bg-white shadow-xl w-full p-8 max-w-4xl ">
+        <div class="card bg-white shadow-xl w-full p-8 max-w-4xl ">
 			<div class="text-2xl mb-3 font-medium">{data.title}</div>
 			<div class="text-sm">
-				<i class="fa-regular fa-calendar mr-4 text-blue-500"></i><span class="text-blue-500">วันประกาศ {data.date}</span>
+				<i class="fa-regular fa-calendar mr-4 text-blue-500"></i><span class="text-blue-500">วันประกาศ : {data.date}</span>
 			</div>
 			{#if data.announcementExam}
-			<div  class="text-sm">
+			<div class="text-md card-detail p-4 mt-5 space-y-2">
 				{#if data.register_startDate}
-				<div>สมัคร: {formatDate(data.register_startDate,data.register_endDate)}</div>
+				<div><span class="pr-1 font-semibold ">สมัคร :</span> {formatDate(data.register_startDate,data.register_endDate)}</div>
 				{/if}
 				{#if data.payment_startDate}
-				<div>ชำระเงิน: {formatDate(data.payment_startDate,data.payment_endDate)} </div>
+				<div><span class="pr-1 font-semibold">ชำระเงิน :</span> {formatDate(data.payment_startDate,data.payment_endDate)} </div>
 				{/if}
 				{#if data.examDate }
-				<div>สอบ: {formatDate(data.examDate)}</div>
+				<div><span class="pr-1 font-semibold">สอบ :</span> {formatDate(data.examDate)}</div>
 				{/if}
 			</div>
 			{/if}
@@ -61,7 +61,7 @@
 				{/each}
 			{/if}
 			{#if data.announcementExam  && data.positions}
-				<div class="w-12/12 text-lg font-medium">สมัครสอบ</div>
+				<div class="w-12/12 text-lg font-medium pt-6">สมัครสอบ</div>
 				{#each data.positions as p}
 				<hr class="border-blueGray-200 my-2" />
 				
@@ -112,4 +112,3 @@
 </section>
 
 
-