diff --git a/cms/package.json b/cms/package.json
index c175927..c5d0dda 100644
--- a/cms/package.json
+++ b/cms/package.json
@@ -3,7 +3,7 @@
 	"version": "0.0.1",
 	"private": true,
 	"scripts": {
-		"dev": "vite dev",
+		"dev": "vite dev --port=4000 --host=0.0.0.0",
 		"build": "vite build",
 		"preview": "vite preview",
 		"test": "playwright test",
diff --git a/cms/src/routes/+layout.server.ts b/cms/src/routes/+layout.server.ts
index 8d56a78..0bdd220 100644
--- a/cms/src/routes/+layout.server.ts
+++ b/cms/src/routes/+layout.server.ts
@@ -1,7 +1,10 @@
 import { env } from '$env/dynamic/private'
 import type { PageServerLoad } from './$types'
 export const load: PageServerLoad = async ({fetch}) => {
-	const res = await fetch(env.API_CMS_URL+"/home")
+	const url = env.API_CMS_URL+"/home"
+	console.log(url)
+	const res = await fetch(url)
+	console.log("after fetch")
 	if(!res.ok)
 	{
 		console.log("load offline data instead")
diff --git a/cms/src/routes/competitive/+page.server.ts b/cms/src/routes/competitive/+page.server.ts
index 6a70678..514348d 100644
--- a/cms/src/routes/competitive/+page.server.ts
+++ b/cms/src/routes/competitive/+page.server.ts
@@ -17,6 +17,7 @@ export const load: PageServerLoad = async ({fetch}) => {
         const backgroundColor = category? getBgColorDict(category,catColor):"n/a"
         const url = "/qualifying/"+id
         ex.date = dayjs(announcement_startDate).format("DD MMM BBBB")
+        ex.image = ex.image?ex.image:"/images/exam_place_holder.png"
         if(!ex.announcementExam)
             return //ignore other date for normal post
 
diff --git a/cms/src/routes/competitive/[id]/+page.svelte b/cms/src/routes/competitive/[id]/+page.svelte
index 95c3752..95c1c2f 100644
--- a/cms/src/routes/competitive/[id]/+page.svelte
+++ b/cms/src/routes/competitive/[id]/+page.svelte
@@ -1,6 +1,12 @@
 <script lang="ts">
     import type { PageData } from './$types'
     export let data: PageData;
+	import dayjs from 'dayjs'
+	function formatDate(start:string,end:string|undefined=undefined){
+		if(!end)
+			return dayjs(start).format("DD MMM BBBB")
+		return dayjs(start).format("DD MMM BBBB")+" - "+dayjs(end).format("DD MMM BBBB")
+	}
 </script>
 <section>
     <div class="p-one parallax-inner">
@@ -30,6 +36,20 @@
 			<div class="text-sm">
 				<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">
+				{#if data.register_startDate}
+				<div>สมัคร: {formatDate(data.register_startDate,data.register_endDate)}</div>
+				{/if}
+				{#if data.payment_startDate}
+				<div>ชำระเงิน: {formatDate(data.payment_startDate,data.payment_endDate)} </div>
+				{/if}
+				{#if data.examDate }
+				<div>สอบ: {formatDate(data.examDate)}</div>
+				{/if}
+			</div>
+			{/if}
+
 			<hr class="border-blueGray-200 my-7" />
             <div class="">
                 {@html data.detail}
diff --git a/cms/src/routes/qualifying/+page.server.ts b/cms/src/routes/qualifying/+page.server.ts
index d6cbad2..d413683 100644
--- a/cms/src/routes/qualifying/+page.server.ts
+++ b/cms/src/routes/qualifying/+page.server.ts
@@ -17,6 +17,7 @@ export const load: PageServerLoad = async ({fetch}) => {
         const backgroundColor = category? getBgColorDict(category,catColor):"n/a"
         const url = "/qualifying/"+id
         ex.date = dayjs(announcement_startDate).format("DD MMM BBBB")
+        ex.image = ex.image?ex.image:"/images/exam_place_holder.png"
         if(!ex.announcementExam)
             return //ignore other date for normal post
 
diff --git a/cms/src/routes/qualifying/[id]/+page.svelte b/cms/src/routes/qualifying/[id]/+page.svelte
index f7765e0..aceaa9d 100644
--- a/cms/src/routes/qualifying/[id]/+page.svelte
+++ b/cms/src/routes/qualifying/[id]/+page.svelte
@@ -3,6 +3,12 @@
     export let data: PageData;
 	import { env } from '$env/dynamic/public'
 	const positions_base_url = env.PUBLIC_URL_REGISTER_QUALIFY_EXAM+"/exam/"
+	import dayjs from 'dayjs'
+	function formatDate(start:string,end:string|undefined=undefined){
+		if(!end)
+			return dayjs(start).format("DD MMM BBBB")
+		return dayjs(start).format("DD MMM BBBB")+" - "+dayjs(end).format("DD MMM BBBB")
+	}
 </script>
 <section>
     <div class="p-one parallax-inner">
@@ -30,8 +36,21 @@
         <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">
+				{#if data.register_startDate}
+				<div>สมัคร: {formatDate(data.register_startDate,data.register_endDate)}</div>
+				{/if}
+				{#if data.payment_startDate}
+				<div>ชำระเงิน: {formatDate(data.payment_startDate,data.payment_endDate)} </div>
+				{/if}
+				{#if data.examDate }
+				<div>สอบ: {formatDate(data.examDate)}</div>
+				{/if}
+			</div>
+			{/if}
 			<hr class="border-blueGray-200 my-7" />
             <div class="">
                 {@html data.detail}
@@ -41,7 +60,7 @@
 			<div><img src={i.url} alt={i.title}></div>
 				{/each}
 			{/if}
-			{#if data.positions}
+			{#if data.announcementExam  && data.positions}
 				<div class="w-12/12 text-lg font-medium">สมัครสอบ</div>
 				{#each data.positions as p}
 				<hr class="border-blueGray-200 my-2" />