diff --git a/cms/src/routes/+page.svelte b/cms/src/routes/+page.svelte
index 66ae47a..f10bd52 100644
--- a/cms/src/routes/+page.svelte
+++ b/cms/src/routes/+page.svelte
@@ -28,7 +28,6 @@
                 <div class="mt-12">
                     <a
                       href="/qualifying"
-                      target="_blank"
                       class=" text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-1 bg-red-400 active:bg-red-500 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150"
                     >
                       การสอบคัดเลือก
@@ -36,7 +35,6 @@
                     <a
                       href="/competitive"
                       class=" ml-1 text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-1 bg-blueGray-700 active:bg-blueGray-600 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150"
-                      target="_blank"
                     >
                         การสอบแข่งขัน
                     </a>
@@ -45,12 +43,12 @@
         </div>
     </div>
     <img
-		class="absolute top-0 b-auto right-0 sm:w-5/12 -mt-48 sm:mt-0 w-9/12  hidden md:flex"
+		class="absolute top-0 b-auto right-0  sm:w-5/12 sm:mt-32 pr-10 hidden md:flex"
 		src="{patternVue}"
 		alt="..."
     />
 </section>
-<section class="mt-48 md:mt-40 pb-40 relative bg-blueGray-100">
+<section class="pb-40 relative bg-blueGray-100"><!-- mt-48 md:mt-40  -->
     <div
       class="-mt-20 top-0 bottom-auto left-0 right-0 w-full absolute h-20"
       style="transform: translateZ(0);"
@@ -75,8 +73,8 @@
     <div class="container mx-auto">
 			<div class="flex flex-wrap px-6">
 				<div
-					class="w-full pt-20 mb-10 flex flex-wrap justify-between">
-					<h6 class="text-2xl font-semibold ">
+					class="w-full pt-20 mb-8 flex flex-wrap justify-between">
+					<h6 class="text-2xl font-semibold pb-2">
 						ประกาศเกี่ยวกับ<span class="text-red-400">การคัดเลือกบุคลากรกทม.</span>
 					</h6>
 					<a
@@ -103,15 +101,25 @@
 							<div class="card-title font-medium">
 								{qualify_exams[0].title}
 							</div>
-							<div class="mt-4 text-sm row-auto no-wrap">
-								<i class="fab fa-twitter text-blue-500"></i>
-								<span class="pl-2 pr-4 text-gray-400">0</span>
+							<div class="mt-4 text-sm flex flex-wrap justify-between">
+								<div>
+									<i class="fab fa-twitter text-blue-500"></i>
+									<span class="pl-1 pr-3 text-gray-400">0</span>
 
-								<i class="fab fa-facebook-f text-blue-700"></i>
-								<span class="pl-2 pr-4 text-gray-400">0</span>
-							
-								<i class="fab fa-line text-green-500"></i>
-								<span class="pl-2 pr-4 text-gray-400">0</span>
+									<i class="fab fa-facebook-f text-blue-700"></i>
+									<span class="pl-1 pr-3 text-gray-400">0</span>
+								
+									<i class="fab fa-line text-green-500"></i>
+									<span class="pl-1 pr-3 text-gray-400">0</span>
+								</div>
+
+								<a
+									href="/"
+									class=" text-blue-500 hover:text-blue-300 ease-linear transition-all duration-150"
+								>
+									อ่านต่อ
+									<i class="fa fa-angle-double-right ml-1 text-xs"></i>
+								</a>
 							</div>						
 						</div>
 					</div>
@@ -130,16 +138,26 @@
 									<div class="card-title font-medium">
 										{qualify_exams[1].title}
 									</div>
-									<div class="mt-4 text-sm row-auto no-wrap">
-										<i class="fab fa-twitter text-blue-500"></i>
-										<span class="pl-2 pr-4 text-gray-400">0</span>
+									<div class="mt-4 text-sm flex flex-wrap justify-between">
+										<div>
+											<i class="fab fa-twitter text-blue-500"></i>
+											<span class="pl-1 pr-3 text-gray-400">0</span>
 		
-										<i class="fab fa-facebook-f text-blue-700"></i>
-										<span class="pl-2 pr-4 text-gray-400">0</span>
-									
-										<i class="fab fa-line text-green-500"></i>
-										<span class="pl-2 pr-4 text-gray-400">0</span>
-									</div>							
+											<i class="fab fa-facebook-f text-blue-700"></i>
+											<span class="pl-1 pr-3 text-gray-400">0</span>
+										
+											<i class="fab fa-line text-green-500"></i>
+											<span class="pl-1 pr-3 text-gray-400">0</span>
+										</div>
+		
+										<a
+											href="/"
+											class="  text-blue-500 hover:text-blue-300 ease-linear transition-all duration-150"
+										>
+											อ่านต่อ
+											<i class="fa fa-angle-double-right ml-1 text-xs"></i>
+										</a>
+									</div>						
 								</div>
 							</div>
 						</div>
@@ -155,16 +173,26 @@
 									<div class="card-title font-medium">
 										{qualify_exams[2].title}
 									</div>
-									<div class="mt-4 text-sm row-auto no-wrap">
-										<i class="fab fa-twitter text-blue-500"></i>
-										<span class="pl-2 pr-4 text-gray-400">0</span>
+									<div class="mt-4 text-sm flex flex-wrap justify-between">
+										<div>
+											<i class="fab fa-twitter text-blue-500"></i>
+											<span class="pl-1 pr-3 text-gray-400">0</span>
 		
-										<i class="fab fa-facebook-f text-blue-700"></i>
-										<span class="pl-2 pr-4 text-gray-400">0</span>
-									
-										<i class="fab fa-line text-green-500"></i>
-										<span class="pl-2 pr-4 text-gray-400">0</span>
-									</div>						
+											<i class="fab fa-facebook-f text-blue-700"></i>
+											<span class="pl-1 pr-3 text-gray-400">0</span>
+										
+											<i class="fab fa-line text-green-500"></i>
+											<span class="pl-1 pr-3 text-gray-400">0</span>
+										</div>
+		
+										<a
+											href="/"
+											class="  text-blue-500 hover:text-blue-300 ease-linear transition-all duration-150"
+										>
+											อ่านต่อ
+											<i class="fa fa-angle-double-right ml-1 text-xs"></i>
+										</a>
+									</div>					
 								</div>
 							</div>
 						</div>
@@ -177,8 +205,8 @@
     	<div class="container mx-auto mt-4">
 			<div class="flex flex-wrap px-6">
 				<div
-					class="w-full pt-20 mb-10 flex flex-wrap justify-between">
-					<h6 class="text-2xl font-semibold ">
+					class="w-full pt-20 mb-8 flex flex-wrap justify-between">
+					<h6 class="text-2xl font-semibold pb-2">
 						ประกาศเกี่ยวกับ<span class="text-red-400">การสอบแข่งขัน</span>
 					</h6>
 					<a
@@ -203,16 +231,26 @@
 							<div class="card-title font-medium">
 								{competitive_exams[0].title}
 							</div>
-							<div class="mt-4 text-sm row-auto no-wrap">
-								<i class="fab fa-twitter text-blue-500"></i>
-								<span class="pl-2 pr-4 text-gray-400">0</span>
+							<div class="mt-4 text-sm flex flex-wrap justify-between">
+								<div>
+									<i class="fab fa-twitter text-blue-500"></i>
+									<span class="pl-1 pr-3 text-gray-400">0</span>
 
-								<i class="fab fa-facebook-f text-blue-700"></i>
-								<span class="pl-2 pr-4 text-gray-400">0</span>
-							
-								<i class="fab fa-line text-green-500"></i>
-								<span class="pl-2 pr-4 text-gray-400">0</span>
-							</div>						
+									<i class="fab fa-facebook-f text-blue-700"></i>
+									<span class="pl-1 pr-3 text-gray-400">0</span>
+								
+									<i class="fab fa-line text-green-500"></i>
+									<span class="pl-1 pr-3 text-gray-400">0</span>
+								</div>
+
+								<a
+									href="/"
+									class="  text-blue-500 hover:text-blue-300 ease-linear transition-all duration-150"
+								>
+									อ่านต่อ
+									<i class="fa fa-angle-double-right ml-1 text-xs"></i>
+								</a>
+							</div>				
 						</div>
 					</div>
 				</div>
@@ -230,16 +268,26 @@
 									<div class="card-title font-medium">
 										{competitive_exams[1].title}
 									</div>
-									<div class="mt-4 text-sm row-auto no-wrap">
-										<i class="fab fa-twitter text-blue-500"></i>
-										<span class="pl-2 pr-4 text-gray-400">0</span>
+									<div class="mt-4 text-sm flex flex-wrap justify-between">
+										<div>
+											<i class="fab fa-twitter text-blue-500"></i>
+											<span class="pl-1 pr-3 text-gray-400">0</span>
 		
-										<i class="fab fa-facebook-f text-blue-700"></i>
-										<span class="pl-2 pr-4 text-gray-400">0</span>
-									
-										<i class="fab fa-line text-green-500"></i>
-										<span class="pl-2 pr-4 text-gray-400">0</span>
-									</div>							
+											<i class="fab fa-facebook-f text-blue-700"></i>
+											<span class="pl-1 pr-3 text-gray-400">0</span>
+										
+											<i class="fab fa-line text-green-500"></i>
+											<span class="pl-1 pr-3 text-gray-400">0</span>
+										</div>
+		
+										<a
+											href="/"
+											class="  text-blue-500 hover:text-blue-300 ease-linear transition-all duration-150"
+										>
+											อ่านต่อ
+											<i class="fa fa-angle-double-right ml-1 text-xs"></i>
+										</a>
+									</div>					
 								</div>
 							</div>
 						</div>
@@ -255,16 +303,26 @@
 									<div class="card-title font-medium">
 										{competitive_exams[2].title}
 									</div>
-									<div class="mt-4 text-sm row-auto no-wrap">
-										<i class="fab fa-twitter text-blue-500"></i>
-										<span class="pl-2 pr-4 text-gray-400">0</span>
+									<div class="mt-4 text-sm flex flex-wrap justify-between">
+										<div>
+											<i class="fab fa-twitter text-blue-500"></i>
+											<span class="pl-1 pr-3 text-gray-400">0</span>
 		
-										<i class="fab fa-facebook-f text-blue-700"></i>
-										<span class="pl-2 pr-4 text-gray-400">0</span>
-									
-										<i class="fab fa-line text-green-500"></i>
-										<span class="pl-2 pr-4 text-gray-400">0</span>
-									</div>						
+											<i class="fab fa-facebook-f text-blue-700"></i>
+											<span class="pl-1 pr-3 text-gray-400">0</span>
+										
+											<i class="fab fa-line text-green-500"></i>
+											<span class="pl-1 pr-3 text-gray-400">0</span>
+										</div>
+		
+										<a
+											href="/"
+											class="  text-blue-500 hover:text-blue-300 ease-linear transition-all duration-150"
+										>
+											อ่านต่อ
+											<i class="fa fa-angle-double-right ml-1 text-xs"></i>
+										</a>
+									</div>				
 								</div>
 							</div>
 						</div>
@@ -286,6 +344,12 @@
 	.imgCard{
 		height: 250px;
 	}
+	
+}
+@media only screen and (max-width: 640px) {
+	.bg-gradient{
+		background-image: linear-gradient(300deg, rgba(255,0,0,0), #faecf0b4);
+	}
 }
 .card-side{
 	flex-direction: row;
@@ -303,4 +367,7 @@
 .imgCard{
 	max-height: 220px;
 }
+.img-drop {
+	filter: brightness(0.98);
+}
 </style>
\ No newline at end of file