diff --git a/src/assets/img/features/ShareAudio.png b/src/assets/img/features/ShareAudio.png
index 36d65ae..74cfa14 100644
Binary files a/src/assets/img/features/ShareAudio.png and b/src/assets/img/features/ShareAudio.png differ
diff --git a/src/assets/img/features/Spectrogram.png b/src/assets/img/features/Spectrogram.png
new file mode 100644
index 0000000..1374a18
Binary files /dev/null and b/src/assets/img/features/Spectrogram.png differ
diff --git a/src/components/card/BlogListingCard.astro b/src/components/card/BlogListingCard.astro
index 06b5dc3..f99d6cb 100644
--- a/src/components/card/BlogListingCard.astro
+++ b/src/components/card/BlogListingCard.astro
@@ -11,22 +11,16 @@ const { title, description, href, thumbnail, author, date } =
   Astro.props as Props;
 ---
 
-<div class="bg-white flex flex-col py-12">
-  <div class="flex gap-8">
-    <img src={thumbnail} class="h-40 w-40 object-cover rounded" />
-    <div class="flex flex-col space-y-2">
-      <a href={href}
-        ><h3
-          class="text-xl font-bold text-gray-900 hover:text-blue-700 hover:underline"
-        >
-          {title}
-        </h3></a
-      >
-      <p class="text-base font-normal text-gray-700 mt-2">{description}</p>
-      <div class="pt-4">
-        <p class="font-bold text-gray-800">By {author}</p>
-        <p class="font-mono text-gray-700">{date}</p>
+<div class="flex rounded overflow-hidden bg-white shadow-lg">
+    <img src={thumbnail} class="h-fill w-40 object-cover" />
+    <div class="flex flex-col py-6 px-4 ">
+      <div class="h-32">
+        <h4 class="text-lg font-bold">{title}</h4>
+        <p class="mt-2">{description.slice(0, 50) + "..."}</p>
+      </div>
+      <div class="flex flex-col">
+        <p class="font-bold text-sm">{author}</p>
+        <p class="font-mono text-sm">{date}</p>
       </div>
     </div>
-  </div>
 </div>
diff --git a/src/components/homepage/BlogPosts.astro b/src/components/homepage/BlogPosts.astro
index 0e1ab5f..5359bb0 100644
--- a/src/components/homepage/BlogPosts.astro
+++ b/src/components/homepage/BlogPosts.astro
@@ -13,13 +13,13 @@ interface Frontmatter {
 const posts = await Astro.glob<Frontmatter>("../../pages/posts/*.md");
 ---
 
-<section>
-  <div class="mx-auto max-w-4xl px-3 lg:px-0 pt-24 pb-32 space-y-12">
+<section class="grid-background">
+  <div class="mx-auto max-w-4xl px-3 lg:px-0 pt-40 pb-44 space-y-12">
     <div class="flex justify-between items-center">
-        <h2 class="text-2xl xl:text-3xl font-bold text-gray-900">
-          Latest blog posts
-        </h2>
-        <a
+      <h2 class="text-2xl xl:text-3xl font-bold text-gray-900">
+        Latest blog posts
+      </h2>
+      <a
         class="font-medium inline-flex gap-x-2 hover:underline text-blue-700 items-center"
         href="/blog"
         >View all<svg
@@ -32,8 +32,8 @@ const posts = await Astro.glob<Frontmatter>("../../pages/posts/*.md");
           ></path></svg
         ></a
       >
-      </div>
-    <div class="space-y-6 mt-6 divide-y-2">
+    </div>
+    <div class="grid grid-cols-2 gap-12">
       {
         posts
           .sort(
@@ -43,12 +43,11 @@ const posts = await Astro.glob<Frontmatter>("../../pages/posts/*.md");
           .map((post) => (
             <BlogListingCard
               title={post.frontmatter.title}
-              description={post.frontmatter.description.slice(0, 200) + "..."}
+              description={post.frontmatter.description}
               href={`/posts/${post.frontmatter.slug}`}
               thumbnail={post.frontmatter.thumbnail}
               author={post.frontmatter.author}
               date={post.frontmatter.date}
-
             />
           ))
       }
@@ -56,5 +55,8 @@ const posts = await Astro.glob<Frontmatter>("../../pages/posts/*.md");
   </div>
 </section>
 
-
-  
+<style>
+    .grid-background {
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.1'%3E%3Cpath opacity='0.8' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+    }
+  </style>