diff --git a/src/pages/blog/[...page].astro b/src/pages/blog/[...page].astro
index 4a60a6d..dff1adf 100644
--- a/src/pages/blog/[...page].astro
+++ b/src/pages/blog/[...page].astro
@@ -44,27 +44,27 @@ const {
 <BaseLayout
 	title="Blog | Astro Deploy"
 	description="Explore insightful articles on our Blog: Dive into a world of knowledge through posts crafted with expertise. Discover, learn, and grow with us.">
-	<div class="container mx-auto px-4 py-16 sm:py-24 lg:px-8 lg:py-32 xl:max-w-7xl">
-		<div class="mb-12 text-center text-zinc-900 dark:text-zinc-200">
+	<div class="container mx-auto px-4 py-8 sm:py-12 lg:px-8 lg:py-16 xl:max-w-7xl">
+		<div class="text-center text-zinc-800 dark:text-zinc-200">
 			<Heading level={1}>Blog</Heading>
 			<Search />
-			<p>Here are some blogposts, they are located in the repository as mdx files.</p>
+			<p class="text-lg leading-relaxed text-zinc-600 dark:text-zinc-400">
+				Here are some blogposts, they are located in the repository as mdx files.
+			</p>
 		</div>
-		<hr class="mb-12 dark:border-zinc-700/75" />
+		<hr class="my-8 border-t border-zinc-300 dark:border-zinc-700" />
 		<div class="grid grid-cols-1 gap-8 md:grid-cols-2">
 			{
 				page.data.map((post) => (
-					<div class="flex flex-col space-y-4">
+					<div class="rotate-1 transform rounded-lg bg-white p-6 shadow-md transition-transform duration-300 hover:rotate-0 dark:bg-zinc-800">
 						<h2
 							transition:name={post.data.title}
-							class="text-lg font-semibold text-zinc-800 hover:text-zinc-600 dark:text-zinc-200 dark:hover:text-zinc-400 sm:text-xl">
+							class="mb-2 text-xl font-semibold text-zinc-800 hover:text-zinc-600 dark:text-zinc-200 dark:hover:text-zinc-400">
 							<a href={`/blog/${post.slug}/`}>{post.data.title}</a>
 						</h2>
-						<p class="text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">
-							{post.data.description}
-						</p>
+						<p class="mb-4 text-sm text-zinc-600 dark:text-zinc-400">{post.data.description}</p>
 						<a
-							class="text-sm font-medium text-primary-600 hover:text-primary-400 dark:text-primary-400 dark:hover:text-primary-300"
+							class="text-primary-600 hover:text-primary-400 dark:text-primary-400 dark:hover:text-primary-300"
 							href={`/blog/${post.slug}/`}>
 							Read more
 						</a>
@@ -72,7 +72,7 @@ const {
 				))
 			}
 		</div>
-		<div class="mt-12 text-black dark:text-white">
+		<div class="mt-12 text-center text-black dark:text-white">
 			<Pagination>
 				<PaginationContent>
 					{