diff --git a/src/components/card/BlogListingCard.astro b/src/components/card/BlogListingCard.astro
index e249efd..ef507b0 100644
--- a/src/components/card/BlogListingCard.astro
+++ b/src/components/card/BlogListingCard.astro
@@ -12,10 +12,10 @@ const { title, description, href, thumbnail, author, date } =
 ---
 
 <a href={href} class="">
-  <img href={href} class="h-72 rounded w-full object-cover" src={thumbnail} />
-  <div class="flex mt-3 gap-2 items-center">
-    <p class="">{author}</p>-<p class="">{date}</p>
+  <img href={href} class="h-48 md:h-72 rounded w-full object-cover" src={thumbnail} />
+  <div class="sm:flex mt-3 gap-2 items-center">
+    <p class="">{author}</p><p class="">{date}</p>
   </div>
   <h3 href={href} class="hover:text-blue-700 hover:underline font-bold text-gray-800 text-lg mt-2">{title}</h3>
-  <p class="mt-2">{description.slice(0, 200)}</p>
+  <p class="mt-2">{description.slice(0, 200)}...</p>
 </a>
diff --git a/src/components/homepage/BlogPosts.astro b/src/components/homepage/BlogPosts.astro
index 48541f4..31673ef 100644
--- a/src/components/homepage/BlogPosts.astro
+++ b/src/components/homepage/BlogPosts.astro
@@ -14,8 +14,8 @@ const posts = await Astro.glob<Frontmatter>("../../pages/posts/*.md");
 ---
 
 <section class="bg-gray-50">
-  <div class="mx-auto max-w-6xl px-3 lg:px-0 pt-24 pb-32 space-y-12">
-    <div class="flex justify-between items-center">
+  <div class="mx-auto max-w-4xl xl:max-w-6xl px-3 lg:px-0 pt-12 pb-16 md:pt-24 md:pb-32">
+    <div class="flex flex-col md:flex-row md:justify-between md:items-center">
       <h2 class="text-2xl xl:text-3xl font-bold text-gray-900">
         Latest blog posts
       </h2>
@@ -33,7 +33,7 @@ const posts = await Astro.glob<Frontmatter>("../../pages/posts/*.md");
         ></a
       >
     </div>
-    <div class="grid grid-cols-2 gap-12">
+    <div class="grid sm:grid-cols-2 gap-12 xl:gap-24 mt-6 md:mt-12">
       {
         posts
           .slice(0, 2)
diff --git a/src/pages/blog.astro b/src/pages/blog.astro
index d1a3169..1b68ea1 100644
--- a/src/pages/blog.astro
+++ b/src/pages/blog.astro
@@ -16,8 +16,8 @@ const posts = await Astro.glob<Frontmatter>("./posts/*.md");
 ---
 
   <PageLayout title="Blog">
-    <main class="mt-8">
-        <div class="grid md:grid-cols-2 gap-8">
+    <main class="mt-8 xl:mt-16">
+        <div class="grid md:grid-cols-2 gap-12 xl:gap-16">
           {
             posts
               .sort(