diff --git a/cms/src/app.postcss b/cms/src/app.postcss
index deaebf7..d00ac4a 100644
--- a/cms/src/app.postcss
+++ b/cms/src/app.postcss
@@ -95,4 +95,8 @@
     ::-webkit-scrollbar-thumb:hover {
       background-color: #a8bbbf;
     }
+
+    .display-none{
+      display: none;
+    }
   }
diff --git a/cms/src/lib/components/url.js b/cms/src/lib/components/url.js
new file mode 100644
index 0000000..ce03a12
--- /dev/null
+++ b/cms/src/lib/components/url.js
@@ -0,0 +1,36 @@
+import { derived, writable } from 'svelte/store'
+
+export function createUrlStore(ssrUrl) {
+  // Ideally a bundler constant so that it's tree-shakable
+  if (typeof window === 'undefined') {
+    const { subscribe } = writable(ssrUrl)
+    return { subscribe }
+  }
+
+  const href = writable(window.location.href)
+
+  const originalPushState = history.pushState
+  const originalReplaceState = history.replaceState
+
+  const updateHref = () => href.set(window.location.href)
+
+  history.pushState = function () {
+    originalPushState.apply(this, arguments)
+    updateHref()
+  }
+
+  history.replaceState = function () {
+    originalReplaceState.apply(this, arguments)
+    updateHref()
+  }
+
+  window.addEventListener('popstate', updateHref)
+  window.addEventListener('hashchange', updateHref)
+
+  return {
+    subscribe: derived(href, ($href) => new URL($href)).subscribe
+  }
+}
+
+// If you're using in a pure SPA, you can return a store directly and share it everywhere
+export default createUrlStore()
diff --git a/cms/src/lib/data/competitive-exam.json b/cms/src/lib/data/competitive-exam.json
index a51ddb6..5aa8870 100644
--- a/cms/src/lib/data/competitive-exam.json
+++ b/cms/src/lib/data/competitive-exam.json
@@ -11,6 +11,28 @@
                 "url":"/images/c1.jpg"
             }
         ],
+        "regi":[
+            {
+                "title":"เจ้าพนักงานเภสัชกรรมปฏิบัติงาน",
+                "url":"/"
+            },
+            {
+                "title":"เจ้าพนักงานทันตสาธารณสุขปฏิบัติงาน",
+                "url":"/"
+            },
+            {
+                "title":"ผู้ช่วยทันตแพทย์ปฏิบัติงาน",
+                "url":"/"
+            },
+            {
+                "title":"ดุริยางคศิลปินปฏิบัติงาน",
+                "url":"/"
+            },
+            {
+                "title":"คีตศิลปินปฏิบัติงาน",
+                "url":"/"
+            }
+        ],
         "files":[            
             {
                 "title":"รายละเอียดประกาศ",
diff --git a/cms/src/routes/+page.svelte b/cms/src/routes/+page.svelte
index 58de954..532c11a 100644
--- a/cms/src/routes/+page.svelte
+++ b/cms/src/routes/+page.svelte
@@ -83,7 +83,7 @@
 				>
 					<div class="card  bg-white shadow-xl w-full ">
 						<figure style="height: 250px;" class="img-hover-zoom--brightness">
-							<img src={qualify_exams[0].image} alt="1" />
+							<img src={qualify_exams[0].image} alt="1" class="h-full fit" />
 						</figure>
 						<div class="card-body">
 							<div class="text-sm font-medium text-gray-500">
@@ -121,7 +121,7 @@
 						<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 src={qualify_exams[1].image} alt="1" class="h-full" />
+									<img src={qualify_exams[1].image} alt="1" class="h-full fit" />
 								</figure>
 								<div class="card-body w-full lg:w-7/12">
 									<h2 class="text-sm font-medium text-gray-500">
@@ -156,7 +156,7 @@
 						<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 src={qualify_exams[2].image} alt="1"  class="h-full"/>
+									<img src={qualify_exams[2].image} alt="1"  class="h-full fit"/>
 								</figure>
 								<div class="card-body w-full lg:w-7/12">
 									<div class="text-sm font-medium text-gray-500">
@@ -213,7 +213,7 @@
 				<div class="w-full lg:w-6/12 cardxl">
 					<div class="card  bg-white shadow-xl w-full ">
 						<figure style="height: 250px;" class="img-hover-zoom--brightness">
-							<img src={competitive_exams[0].image} alt="1" />
+							<img src={competitive_exams[0].image} alt="1" class="h-full fit" />
 						</figure>
 						<div class="card-body">
 							<div class="text-sm font-medium text-gray-500">
@@ -252,7 +252,7 @@
 						<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 src={competitive_exams[1].image} alt="1" class="h-full" />
+									<img src={competitive_exams[1].image} alt="1" class="h-full fit" />
 								</figure>
 								<div class="card-body w-full lg:w-7/12">
 									<h2 class="text-sm font-medium text-gray-500">
@@ -287,7 +287,7 @@
 						<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 src={competitive_exams[2].image} alt="1"  class="h-full"/>
+									<img src={competitive_exams[2].image} alt="1"  class="h-full fit"/>
 								</figure>
 								<div class="card-body w-full lg:w-7/12">
 									<div class="text-sm font-medium text-gray-500">
@@ -360,4 +360,11 @@
 .imgCard{
 	height: 210px;
 }
+.fit{
+	display: block;
+    height: 100%;
+    width: 100%;
+	object-fit: cover;
+    object-position: top;
+}
 </style>
\ No newline at end of file
diff --git a/cms/src/routes/competitive/[id]/+page.svelte b/cms/src/routes/competitive/[id]/+page.svelte
index ed4a7d4..95c3752 100644
--- a/cms/src/routes/competitive/[id]/+page.svelte
+++ b/cms/src/routes/competitive/[id]/+page.svelte
@@ -39,12 +39,45 @@
 			<div><img src={i.url} alt={i.title}></div>
 				{/each}
 			{/if}
+
+			{#if data.regi}
+				<div class="{data.regi.length == 0 ? 'display-none': 'w-12/12 text-lg font-medium'}">สมัครสอบ</div>
+				{#each data.regi as regi}
+				<hr class="border-blueGray-200 my-2" />
+				
+				<div class="text-lg py-1">
+					<div class="flex flex-wrap  items-center">
+						<a class="btn btn-sm btn-outline btn-info cursor-pointe" href={regi.url}   target="_blank">
+							<i class="fa-solid fa-pen-to-square text-sm pr-2"></i>
+							สมัครสอบ
+						</a>
+						<div class="pl-4">
+							<span>{regi.title}</span>
+						</div>
+					</div>
+				</div>
+				{/each}
+				<div class="pb-7"></div>
+			{/if}
+			
 			{#if data.files}
+				<div class="{data.files.length == 0 ? 'display-none': 'w-12/12 text-lg font-medium'}">เอกสารประกอบ</div>
 				{#each data.files as file}
-			<hr class="border-blueGray-200 mb-4 mt-4" />
-			<div class="text-lg py-1">
-				<i class="fa-solid fa-bookmark mr-3 text-xs text-blue-400"></i><a href={file.url} class="text-blue-400 hover:text-blue-600"  target="_blank">คลิกที่นี่เพื่ออ่าน </a> <span class="font-medium">{file.title}</span>
-			</div>
+				<hr class="border-blueGray-200 my-2" />
+				
+				<div class="text-lg py-1">
+					<div class="flex flex-wrap  items-center">
+						<a class="btn  btn-sm btn-outline btn-primary cursor-pointe" href={file.url}  target="_blank">
+							<i class="fa-solid fa-eye text-sm pr-2"></i>
+							อ่านเพิ่มเติม
+						</a>
+						<div class="pl-4">
+							<!-- <i class="fa-solid fa-bookmark mr-3 text-xs text-primary"></i> -->
+							<span>{file.title}</span>
+						</div>
+						
+					</div>
+				</div>
 				{/each}
 			{/if}
 			<hr class="border-blueGray-200 my-7" />
diff --git a/cms/src/routes/qualifying/[id]/+page.svelte b/cms/src/routes/qualifying/[id]/+page.svelte
index 2ef78e6..b0ab303 100644
--- a/cms/src/routes/qualifying/[id]/+page.svelte
+++ b/cms/src/routes/qualifying/[id]/+page.svelte
@@ -39,13 +39,44 @@
 			<div><img src={i.url} alt={i.title}></div>
 				{/each}
 			{/if}
-
+			{#if data.regi}
+				<div class="{data.regi.length == 0 ? 'display-none': 'w-12/12 text-lg font-medium'}">สมัครสอบ</div>
+				{#each data.regi as regi}
+				<hr class="border-blueGray-200 my-2" />
+				
+				<div class="text-lg py-1">
+					<div class="flex flex-wrap  items-center">
+						<a class="btn btn-sm btn-outline btn-info cursor-pointe" href={regi.url}   target="_blank">
+							<i class="fa-solid fa-pen-to-square text-sm pr-2"></i>
+							สมัครสอบ
+						</a>
+						<div class="pl-4">
+							<span>{regi.title}</span>
+						</div>
+					</div>
+				</div>
+				{/each}
+				<div class="pb-7"></div>
+			{/if}
+			
 			{#if data.files}
+				<div class="{data.files.length == 0 ? 'display-none': 'w-12/12 text-lg font-medium'}">เอกสารประกอบ</div>
 				{#each data.files as file}
-			<hr class="border-blueGray-200 mb-4 mt-4" />
-			<div class="text-lg py-1">
-				<i class="fa-solid fa-bookmark mr-3 text-xs text-blue-400"></i><a href={file.url} class="text-blue-400 hover:text-blue-600"  target="_blank">คลิกที่นี่เพื่ออ่าน </a> <span class="font-medium">{file.title}</span>
-			</div>
+				<hr class="border-blueGray-200 my-2" />
+				
+				<div class="text-lg py-1">
+					<div class="flex flex-wrap  items-center">
+						<a class="btn  btn-sm btn-outline btn-primary cursor-pointe" href={file.url}  target="_blank">
+							<i class="fa-solid fa-eye text-sm pr-2"></i>
+							อ่านเพิ่มเติม
+						</a>
+						<div class="pl-4">
+							<!-- <i class="fa-solid fa-bookmark mr-3 text-xs text-primary"></i> -->
+							<span>{file.title}</span>
+						</div>
+						
+					</div>
+				</div>
 				{/each}
 			{/if}
 			<hr class="border-blueGray-200 my-7" />