diff --git a/cms/src/app.html b/cms/src/app.html
index 48bbf3d..e09b908 100644
--- a/cms/src/app.html
+++ b/cms/src/app.html
@@ -6,9 +6,11 @@
 		<meta name="viewport" content="width=device-width" />
 		<link rel="manifest" href="manifest.json" />
 		<link rel="shortcut icon" href="/favicon.ico" />
+		<link rel="stylesheet" href="/styles/fullcalendar.css" />
 		<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 cf2690b..a9f59b2 100644
--- a/cms/src/app.postcss
+++ b/cms/src/app.postcss
@@ -28,4 +28,55 @@
       }
      
     }
+    .p-one{
+      background-image:  linear-gradient(to top,rgba(71, 85, 105, 0.647),rgba(67, 84, 107, 0.807)),url('/images/p1.jpg'); 
+    }
+    .parallax-inner{
+      position:relative;
+      min-height: 130px;
+      background-position: top center;
+      background-attachment: fixed;
+      background-size: cover;
+    }
+    .parallax-inner > h2{
+      color: #fff;
+      text-transform: uppercase;
+      letter-spacing: 5px;
+      position: absolute;
+      top: 50%;
+      left: 0;
+      margin-top: -20.5px;
+      width: 100%;
+      text-align: center;
+      font-weight: 500;
+    }
+    .breadTaxt{
+      font-weight: 300;
+      letter-spacing: 2px;
+    }
+
+    body {
+      overflow: overlay;
+    }
+    /* custom scrollbar */
+   ::-webkit-scrollbar {
+      width: 20px;
+      height: 20px;
+    }
+
+    ::-webkit-scrollbar-track {
+      background-color: transparent !important;
+      -webkit-box-shadow: none;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      background-color: #d6dee1;
+      border-radius: 20px;
+      border: 6px solid transparent;
+      background-clip: content-box;
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+      background-color: #a8bbbf;
+    }
   }
diff --git a/cms/src/lib/components/ActivityCalendar.svelte b/cms/src/lib/components/ActivityCalendar.svelte
index e9ecfc5..236abbe 100644
--- a/cms/src/lib/components/ActivityCalendar.svelte
+++ b/cms/src/lib/components/ActivityCalendar.svelte
@@ -6,13 +6,16 @@
 	let calendarRef;
 	export let events:CalendarEvent[]
 	let options = {
+		themeSystem: 'bootstrap5',
 		initialView: 'dayGridMonth',
 		plugins: [daygridPlugin],
 		locale: 'th',
-        headerToolbar: {
-			start: 'prev,next',
-			center: 'title'
+		headerToolbar: {
+			left: 'title',
+			center: '',
+			right: 'prev,next today'
 		},
+       
         contentHeight:"auto",
         selectable: true,
         buttonText: {
diff --git a/cms/src/lib/components/Footer.svelte b/cms/src/lib/components/Footer.svelte
index 024f1a7..ad93671 100644
--- a/cms/src/lib/components/Footer.svelte
+++ b/cms/src/lib/components/Footer.svelte
@@ -59,6 +59,7 @@
                 <a
                   class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
                   href="https://webportal.bangkok.go.th/KSB"
+                  target="_blank"
                 >
                   กองสรรหาบุคคล
                 </a>
@@ -67,6 +68,7 @@
                 <a
                   class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
                   href="https://webportal.bangkok.go.th/pdbma"
+                  target="_blank"
                 >
                 กองพัฒนาระบบราชการ
                 </a>
@@ -75,6 +77,7 @@
                 <a
                   class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
                   href="https://webportal.bangkok.go.th/csc_personal"
+                  target="_blank"
                 >
                 กองอัตรากำลัง
                 </a>
@@ -83,6 +86,7 @@
                 <a
                   class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
                   href="http://203.155.220.238/csc/index.php/en/discipline-morality"
+                  target="_blank"
                 >
                 กองทะเบียนประวัติข้าราชการ
                 </a>
@@ -100,6 +104,7 @@
                 <a
                   class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
                   href="https://main.bangkok.go.th/"
+                  target="_blank"
                 >
                 กรุงเทพมหานคร
                 </a>
@@ -108,6 +113,7 @@
                 <a
                   class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
                   href="https://webportal.bangkok.go.th/pdd"
+                  target="_blank"
                 >
                 สนป.กทม./กองการเจ้าหน้าที่
                 </a>
@@ -116,6 +122,7 @@
                 <a
                   class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
                   href="https://webportal.bangkok.go.th/bangkokeducation"
+                  target="_blank"
                 >
                 สำนักการศึกษา กทม.
                 </a>
@@ -124,6 +131,7 @@
                 <a
                   class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
                   href="https://www.ocsc.go.th/"
+                  target="_blank"
                 >
                 สำนักงาน ก.พ.
                 </a>
diff --git a/cms/src/lib/components/FullCalendar.svelte b/cms/src/lib/components/FullCalendar.svelte
index facf18c..03ea977 100644
--- a/cms/src/lib/components/FullCalendar.svelte
+++ b/cms/src/lib/components/FullCalendar.svelte
@@ -53,3 +53,6 @@
 </script>
 
 <div bind:this={calendarEl} class={classes} {style} />
+<style>
+    
+</style>
\ No newline at end of file
diff --git a/cms/src/lib/components/Header.svelte b/cms/src/lib/components/Header.svelte
index c18783b..70f1b10 100644
--- a/cms/src/lib/components/Header.svelte
+++ b/cms/src/lib/components/Header.svelte
@@ -1,4 +1,4 @@
-<div class="navbar bg-white w-full top-0 z-50 fixed flex-wrap items-center justify-between px-4">
+<div class="navbar bg-white w-full top-0 z-50 fixed flex-wrap items-center justify-between px-4 ">
 	<div
 	class="container px-4 mx-auto flex flex-no-wrap items-center justify-between"
 	>
@@ -13,6 +13,7 @@
 		</div>
 		<div class="content-center grid pl-4">
 		<a class="textline1" 
+			target="_blank"
 			href="https://webportal.bangkok.go.th/KSB/page/top/1119/%E0%B8%81%E0%B8%AD%E0%B8%87%E0%B8%AA%E0%B8%A3%E0%B8%A3%E0%B8%AB%E0%B8%B2%E0%B8%9A%E0%B8%B8%E0%B8%84%E0%B8%84%E0%B8%A5">
 			กองสรรหาบุคคล
 		</a>
@@ -28,11 +29,11 @@
 				<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" /></svg>
 			</label>
 		<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-			<ul tabindex="0" class="menu menu-compact dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-52">
-				<li><a href="/">หน้าหลัก</a></li>
-				<li><a href="/qualifying">การสอบคัดเลือก</a></li>
-				<li><a href="/competitive">การสอบแข่งขัน</a></li>
-				<li><a href="/about">เกี่ยวกับเรา</a></li>
+			<ul tabindex="0" style="width: 150px;" class="menu menu-compact dropdown-content mt-3 right-0 p-2 shadow bg-base-100 rounded-box w-52">
+				<li ><a class="hover:text-gray-500 active:bg-white" href="/">หน้าหลัก</a></li>
+				<li><a class="hover:text-gray-500 active:bg-white" href="/qualifying">การสอบคัดเลือก</a></li>
+				<li><a class="hover:text-gray-500 active:bg-white" href="/competitive">การสอบแข่งขัน</a></li>
+				<li><a class="hover:text-gray-500 active:bg-white" href="/about">เกี่ยวกับเรา</a></li>
 			</ul>
 		</div>
 		<div class="tabs hidden lg:flex w-full"><!-- tab-active -->
@@ -61,5 +62,4 @@ letter-spacing: 0.05rem;
 font-weight: 400;
 color: #96a9ad;
 }
-
 </style>
\ No newline at end of file
diff --git a/cms/src/routes/+page.svelte b/cms/src/routes/+page.svelte
index f10bd52..5ee94e7 100644
--- a/cms/src/routes/+page.svelte
+++ b/cms/src/routes/+page.svelte
@@ -90,6 +90,7 @@
 					class="w-full lg:w-6/12 cardxl"
 				>
 					<div class="card  bg-white shadow-xl w-full ">
+<<<<<<< HEAD
 						<figure style="height: 250px;" class="img-hover-zoom--brightness">
 							<img src={qualify_exams[0].img} alt="1" />
 						</figure>
@@ -97,6 +98,15 @@
 							<div class="text-sm font-medium text-gray-500">
 								ข่าววันที่ : {qualify_exams[0].date}
 								<div class="badge badge-secondary text-white ml-4">NEW</div>
+=======
+						<figure style="height: 250px;" class="img-drop">
+							<img src="{sel1}" alt="1" />
+						</figure>
+						<div class="card-body">
+							<div class="text-sm font-medium text-gray-500">
+								ข่าววันที่ : 24  มี.ค. 2566  
+								<div class="badge bg-blue-100 text-blue-500 ml-4 border-0">NEW</div>
+>>>>>>> 9fc92cfbcdd0223b44545f835b02bf845116d14b
 							</div>
 							<div class="card-title font-medium">
 								{qualify_exams[0].title}
@@ -128,8 +138,13 @@
 					<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">
+<<<<<<< HEAD
 								<figure class="w-full lg:w-5/12 imgCard">
 									<img src={qualify_exams[1].img} alt="1" class="h-full" />
+=======
+								<figure class="w-full lg:w-5/12 img-drop">
+									<img src="{sel2}" alt="1" class="h-full" />
+>>>>>>> 9fc92cfbcdd0223b44545f835b02bf845116d14b
 								</figure>
 								<div class="card-body w-full lg:w-7/12">
 									<h2 class="text-sm font-medium text-gray-500">
@@ -163,8 +178,13 @@
 						</div>
 						<div class=" flex flex-col w-full">
 							<div class="card card-side bg-white shadow-xl w-full">
+<<<<<<< HEAD
 								<figure class="w-full lg:w-5/12 imgCard">
 									<img src={qualify_exams[2].img} alt="1"  class="h-full"/>
+=======
+								<figure class="w-full lg:w-5/12 img-drop">
+									<img src="{sel3}" alt="1"  class="h-full"/>
+>>>>>>> 9fc92cfbcdd0223b44545f835b02bf845116d14b
 								</figure>
 								<div class="card-body w-full lg:w-7/12">
 									<div class="text-sm font-medium text-gray-500">
@@ -220,6 +240,7 @@
 				
 				<div class="w-full lg:w-6/12 cardxl">
 					<div class="card  bg-white shadow-xl w-full ">
+<<<<<<< HEAD
 						<figure style="height: 250px;" class="img-hover-zoom--brightness">
 							<img src={competitive_exams[0].img} alt="1" />
 						</figure>
@@ -227,6 +248,15 @@
 							<div class="text-sm font-medium text-gray-500">
 								ข่าววันที่ : {competitive_exams[0].date}
 								<div class="badge badge-secondary text-white ml-4">NEW</div>
+=======
+						<figure style="height: 250px;" class="img-drop">
+							<img src="{c1}" alt="1" />
+						</figure>
+						<div class="card-body">
+							<div class="text-sm font-medium text-gray-500">
+								ข่าววันที่ : 24  มี.ค. 2566
+								<div class="badge bg-blue-100 text-blue-500 ml-4 border-0">NEW</div>
+>>>>>>> 9fc92cfbcdd0223b44545f835b02bf845116d14b
 							</div>
 							<div class="card-title font-medium">
 								{competitive_exams[0].title}
@@ -258,8 +288,13 @@
 					<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">
+<<<<<<< HEAD
 								<figure class="w-full lg:w-5/12 imgCard">
 									<img src={competitive_exams[1].img} alt="1" class="h-full" />
+=======
+								<figure class="w-full lg:w-5/12 imgCard img-drop">
+									<img src="{c2}" alt="1" class="h-full" />
+>>>>>>> 9fc92cfbcdd0223b44545f835b02bf845116d14b
 								</figure>
 								<div class="card-body w-full lg:w-7/12">
 									<h2 class="text-sm font-medium text-gray-500">
@@ -293,8 +328,13 @@
 						</div>
 						<div class=" flex flex-col w-full">
 							<div class="card card-side bg-white shadow-xl w-full">
+<<<<<<< HEAD
 								<figure class="w-full lg:w-5/12 imgCard">
 									<img src={competitive_exams[2].img} alt="1"  class="h-full"/>
+=======
+								<figure class="w-full lg:w-5/12 imgCard img-drop">
+									<img src="{c3}" alt="1"  class="h-full"/>
+>>>>>>> 9fc92cfbcdd0223b44545f835b02bf845116d14b
 								</figure>
 								<div class="card-body w-full lg:w-7/12">
 									<div class="text-sm font-medium text-gray-500">
diff --git a/cms/static/images/p1.jpg b/cms/static/images/p1.jpg
new file mode 100644
index 0000000..e7f0d71
Binary files /dev/null and b/cms/static/images/p1.jpg differ
diff --git a/cms/static/styles/fullcalendar.css b/cms/static/styles/fullcalendar.css
new file mode 100644
index 0000000..1cafbef
--- /dev/null
+++ b/cms/static/styles/fullcalendar.css
@@ -0,0 +1,87 @@
+
+/* ----------- toolbar ----------- */
+
+.fc .fc-toolbar.fc-header-toolbar{
+	margin: 1em 1em 0.8em 1em;
+}
+.fc .fc-button{
+	height:35px;
+	font-size: 0.8em;
+	padding: 0 1em;
+}
+.fc .fc-button-group>.fc-button{
+	background: transparent;
+	border-color: #334155;
+	color: #334155;
+	margin: 0 6px 0 0;
+}
+.fc .fc-button-group>.fc-button:hover{
+	background: #334155;
+	border-color: #334155;
+	color: #fff;
+	
+}
+
+button:focus { outline: none !important; box-shadow: none !important; }
+button:active {outline:none;}
+
+.fc .fc-button-primary{
+	border-color: #334155 ;
+	background: transparent ;
+	color : #334155;
+	border-width: 2px;
+	border-radius: 20px !important;
+}
+.fc .fc-button:hover {
+	border-color:  transparent;
+	background: #334155 ;
+	color : white;
+}
+.fc .fc-button-primary:disabled{
+	border-color:  transparent ;
+	background: #e3e3e3 ;
+	color : #66615b;
+}
+/* ----------- table ----------- */
+
+.fc .fc-toolbar-title{
+	font-size: 1.4rem;
+}
+
+thead tr.fc-first{
+	border-color: #cdcdcd;
+}
+
+.fc th{
+	border-bottom-width: 1px;
+	font-size: 16px;
+	background-color: #f7f7f7;
+}
+th{
+	font-weight: 300;
+}
+.fc td{
+	border-width: 1px 0 0 1px;
+
+}
+.fc tr th {
+	text-align: right;
+	border-width: 0 0 1px 0px;
+}
+.fc-theme-standard th{
+	border: 1px solid #e5e5e5;
+}
+.fc-theme-standard .fc-scrollgrid{
+	border: none;
+}
+table.fc-border-separate{
+	border-collapse: separate;
+}
+.fc .fc-daygrid-day-number{
+	font-size: 0.8em;
+}
+
+/* ----------- table today ----------- */
+.fc .fc-daygrid-day.fc-day-today{
+	background-color: rgba(100, 116, 139, 0.06);
+}
\ No newline at end of file