diff --git a/src/components/ui/cards/CardBlog.astro b/src/components/ui/cards/CardBlog.astro
index b478245..732feac 100644
--- a/src/components/ui/cards/CardBlog.astro
+++ b/src/components/ui/cards/CardBlog.astro
@@ -1,52 +1,61 @@
 ---
 import AvatarBlog from "../avatars/AvatarBlog.astro";
-import {Image} from "astro:assets";
+import { Image } from "astro:assets";
 
-import {formatDate} from "../../../utils";
-import type {CollectionEntry} from "astro:content";
+import { formatDate } from "../../../utils";
+import type { CollectionEntry } from "astro:content";
 
-const {blogEntry} = Astro.props;
+const { blogEntry } = Astro.props;
 
 interface Props {
-    blogEntry: CollectionEntry<"blog">;
+  blogEntry: CollectionEntry<"blog">;
 }
 ---
 
-<a class="group relative block rounded-xl outline-none ring-zinc-500 focus-visible:ring dark:ring-zinc-200 dark:focus:outline-none transition duration-500"
-   href={`/blog/${blogEntry.slug}/`} data-astro-prefetch>
-    <div class="flex-shrink-0 relative rounded-xl overflow-hidden w-full h-[350px] before:absolute before:inset-x-0 before:size-full before:bg-gradient-to-t before:from-neutral-900/[.7] before:z-[1]">
-        <Image class="size-full absolute top-0 start-0 object-cover group-hover:scale-110 transition duration-500"
-               src={blogEntry.data.cardImage} alt={blogEntry.data.cardImageAlt} draggable={"false"} format={"avif"}/>
-    </div>
+<a
+  class="group relative block rounded-xl outline-none ring-zinc-500 transition duration-500 focus-visible:ring dark:ring-zinc-200 dark:focus:outline-none"
+  href={`/blog/${blogEntry.slug}/`}
+  data-astro-prefetch
+>
+  <div
+    class="relative h-[350px] w-full flex-shrink-0 overflow-hidden rounded-xl before:absolute before:inset-x-0 before:z-[1] before:size-full before:bg-gradient-to-t before:from-neutral-900/[.7]"
+  >
+    <Image
+      class="absolute start-0 top-0 size-full object-cover transition duration-500 group-hover:scale-110"
+      src={blogEntry.data.cardImage}
+      alt={blogEntry.data.cardImageAlt}
+      draggable={"false"}
+      format={"avif"}
+    />
+  </div>
 
-    <div class="absolute top-0 inset-x-0 z-10">
-        <div class="p-4 flex flex-col h-full sm:p-6">
+  <div class="absolute inset-x-0 top-0 z-10">
+    <div class="flex h-full flex-col p-4 sm:p-6">
+      <div class="flex items-center">
+        <AvatarBlog blogEntry={blogEntry} />
 
-            <div class="flex items-center">
-
-                <AvatarBlog blogEntry={blogEntry}/>
-
-                    <div class="ms-2.5 sm:ms-4">
-                        <h4 class="font-bold text-neutral-50">
-                            {blogEntry.data.author}
-                        </h4>
-                        <p class="text-xs text-neutral-50/[.8]">
-                            {formatDate(blogEntry.data.pubDate)}
-
-                        </p>
-                    </div>
-            </div>
+        <div class="ms-2.5 sm:ms-4">
+          <h4 class="font-bold text-neutral-50">
+            {blogEntry.data.author}
+          </h4>
+          <p class="text-xs text-neutral-50/[.8]">
+            {formatDate(blogEntry.data.pubDate)}
+          </p>
         </div>
+      </div>
     </div>
+  </div>
 
-    <div class="absolute bottom-0 inset-x-0 z-10">
-        <div class="flex flex-col h-full p-4 sm:p-6">
-            <h3 class="text-lg sm:text-3xl font-bold text-neutral-50 group-hover:text-neutral-50/[.8]">
-                {blogEntry.data.title}
-            </h3>
-            <p class="mt-2 text-neutral-50/[.8]">
-                {blogEntry.data.description}
-            </p>
-        </div>
+  <div class="absolute inset-x-0 bottom-0 z-10">
+    <div class="flex h-full flex-col p-4 sm:p-6">
+      <h3
+        class="text-balance text-lg font-bold text-neutral-50 group-hover:text-neutral-50/[.8] sm:text-3xl"
+      >
+        {blogEntry.data.title}
+      </h3>
+      <p class="mt-2 text-pretty text-neutral-50/[.8]">
+        {blogEntry.data.description}
+      </p>
     </div>
-</a>
\ No newline at end of file
+  </div>
+</a>
diff --git a/src/components/ui/cards/CardBlogRecent.astro b/src/components/ui/cards/CardBlogRecent.astro
index cdfd9b5..73c02ae 100644
--- a/src/components/ui/cards/CardBlogRecent.astro
+++ b/src/components/ui/cards/CardBlogRecent.astro
@@ -1,8 +1,6 @@
 ---
-
 import { Image } from "astro:assets";
 
-
 import type { CollectionEntry } from "astro:content";
 import AvatarBlogLarge from "../avatars/AvatarBlogLarge.astro";
 import PrimaryCTA from "../buttons/PrimaryCTA.astro";
@@ -10,41 +8,54 @@ import PrimaryCTA from "../buttons/PrimaryCTA.astro";
 const { blogEntry } = Astro.props;
 
 interface Props {
-    blogEntry: CollectionEntry<"blog">;
+  blogEntry: CollectionEntry<"blog">;
 }
 ---
-<div class="grid sm:grid-cols-2 sm:items-center gap-8">
-    <div class="sm:order-2">
-      <div class="relative pt-[50%] sm:pt-[100%] rounded-lg">
-        <Image class="size-full absolute top-0 start-0 object-cover rounded-xl" src={blogEntry.data.cardImage} alt={blogEntry.data.cardImageAlt} draggable={"false"} format={"avif"}/>
+
+<div class="grid gap-8 sm:grid-cols-2 sm:items-center">
+  <div class="sm:order-2">
+    <div class="relative rounded-lg pt-[50%] sm:pt-[100%]">
+      <Image
+        class="absolute start-0 top-0 size-full rounded-xl object-cover"
+        src={blogEntry.data.cardImage}
+        alt={blogEntry.data.cardImageAlt}
+        draggable={"false"}
+        format={"avif"}
+      />
+    </div>
+  </div>
+
+  <div class="sm:order-1">
+    <h2
+      class="text-balance text-2xl font-bold tracking-tight text-neutral-800 dark:text-neutral-200 md:text-3xl lg:text-4xl lg:leading-tight xl:text-5xl xl:leading-tight"
+    >
+      <a
+        class="outline-none ring-zinc-500 transition duration-300 hover:text-[#fa5a15] focus-visible:ring dark:text-neutral-300 dark:ring-zinc-200 dark:hover:text-neutral-50 dark:focus:outline-none"
+        href={`/blog/${blogEntry.slug}/`}
+      >
+        {blogEntry.data.description}
+      </a>
+    </h2>
+
+    <div class="mt-6 flex items-center sm:mt-10">
+      <AvatarBlogLarge blogEntry={blogEntry} />
+
+      <div class="ms-3 sm:ms-4">
+        <p class="font-bold text-neutral-800 dark:text-neutral-200 sm:mb-1">
+          {blogEntry.data.author}
+        </p>
+        <p class="text-xs text-neutral-500">
+          {blogEntry.data.role}
+        </p>
       </div>
     </div>
 
-    <div class="sm:order-1">
-      <h2 class="text-2xl font-bold md:text-3xl lg:text-4xl lg:leading-tight xl:text-5xl xl:leading-tight text-neutral-800 dark:text-neutral-200 tracking-tight">
-        <a class="hover:text-[#fa5a15] dark:text-neutral-300 dark:hover:text-neutral-50 transition duration-300 focus-visible:ring outline-none  dark:ring-zinc-200  ring-zinc-500 dark:focus:outline-none " href={`/blog/${blogEntry.slug}/`}>
-            {blogEntry.data.description}
-        </a>
-      </h2>
-
-  
-      <div class="mt-6 sm:mt-10 flex items-center">
-
-        <AvatarBlogLarge blogEntry={blogEntry}/>
-
-        <div class="ms-3 sm:ms-4">
-          <p class="sm:mb-1 font-bold text-neutral-800 dark:text-neutral-200">
-            {blogEntry.data.author}
-          </p>
-          <p class="text-xs text-neutral-500">
-            {blogEntry.data.role}
-          </p>
-        </div>
-      </div>
-
-      <div class="mt-5">
-        <PrimaryCTA url={`/blog/${blogEntry.slug}/`} title="Read More" data-astro-prefetch/>
-      </div>
+    <div class="mt-5">
+      <PrimaryCTA
+        url={`/blog/${blogEntry.slug}/`}
+        title="Read More"
+        data-astro-prefetch
+      />
     </div>
-    
-  </div>
\ No newline at end of file
+  </div>
+</div>
diff --git a/src/content/config.ts b/src/content/config.ts
index 77581b8..557d4e0 100644
--- a/src/content/config.ts
+++ b/src/content/config.ts
@@ -70,7 +70,19 @@ const blogCollection = defineCollection({
   }),
 });
 
+const insightsCollection = defineCollection({
+  type: "content",
+  schema: ({ image }) => z.object ({
+  title: z.string(),
+  description: z.string(),
+  contents: z.array(z.string()),
+  cardImage: image(),
+  cardImageAlt: z.string(),
+  }),
+});
+
 export const collections = {
   'products': productsCollection,
   'blog': blogCollection,
+  'insights': insightsCollection,
 };
\ No newline at end of file
diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
index dedb47e..4d94cc6 100644
--- a/src/pages/blog/[...slug].astro
+++ b/src/pages/blog/[...slug].astro
@@ -1,12 +1,12 @@
 ---
 // Import section components
 import MainLayout from "../../layouts/MainLayout.astro";
-import ProductTabBtn from "../../components/ui/buttons/ProductTabBtn.astro";
-import PrimaryCTA from "../../components/ui/buttons/PrimaryCTA.astro";
 import AvatarBlogLarge from "../../components/ui/avatars/AvatarBlogLarge.astro";
+import CardRelated from "../../components/ui/cards/CardRelated.astro";
 import { Image } from "astro:assets";
 import { capitalize, formatDate } from "../../utils";
 import { getCollection } from "astro:content";
+import type { CollectionEntry } from "astro:content";
 
 export async function getStaticPaths() {
   const blogPosts = await getCollection("blog");
@@ -17,6 +17,11 @@ export async function getStaticPaths() {
 }
 
 const { post } = Astro.props;
+
+const blogPosts: CollectionEntry<"blog">[] = await getCollection("blog");
+const relatedPosts: CollectionEntry<"blog"> = blogPosts.filter(
+  (blogEntry) => blogEntry.slug !== post.slug,
+);
 ---
 
 <MainLayout
@@ -34,11 +39,11 @@ const { post } = Astro.props;
                 <div
                   class="hs-tooltip inline-block [--placement:bottom] [--trigger:hover]"
                 >
-                  
-                    <span class="font-bold text-neutral-700 dark:text-neutral-300">
-                      {post.data.author}
-                    </span>
-                  
+                  <span
+                    class="font-bold text-neutral-700 dark:text-neutral-300"
+                  >
+                    {post.data.author}
+                  </span>
                 </div>
                 <ul class="text-xs text-neutral-500">
                   <li
@@ -58,27 +63,32 @@ const { post } = Astro.props;
         </div>
       </div>
 
-      <h2 class="mb-3 text-2xl font-bold text-neutral-800 dark:text-neutral-200 md:text-3xl">
+      <h2
+        class="mb-3 text-2xl font-bold text-neutral-800 dark:text-neutral-200 md:text-3xl"
+      >
         {post.data.title}
       </h2>
 
-      <div class="space-y-5 md:space-y-8 mb-5 md:mb-8">
+      <div class="mb-5 space-y-5 md:mb-8 md:space-y-8">
         {
-          post.data.contents.map((content: string, index: any) => (
-          index === 1 ? 
-            <p class="text-lg text-neutral-700 dark:text-neutral-300">
-              {content}
-            </p>
-            <Image
-        class="w-full rounded-xl object-cover"
-        src={post.data.cardImage}
-        alt={post.data.cardImageAlt}
-        draggable={"false"}
-        format={"avif"}
-      /> : <p class="text-lg text-neutral-700 dark:text-neutral-300">
-              {content}
-            </p>
-          ))
+          post.data.contents.map((content: string, index: any) =>
+            index === 1 ? (
+                <p class="text-pretty text-lg text-neutral-700 dark:text-neutral-300">
+                  {content}
+                </p>
+                <Image
+                  class="w-full rounded-xl object-cover"
+                  src={post.data.cardImage}
+                  alt={post.data.cardImageAlt}
+                  draggable={"false"}
+                  format={"avif"}
+                />
+            ) : (
+              <p class="text-pretty text-lg text-neutral-700 dark:text-neutral-300">
+                {content}
+              </p>
+            ),
+          )
         }
       </div>
 
@@ -93,4 +103,18 @@ const { post } = Astro.props;
       </div>
     </div>
   </div>
+
+  <div class="mx-auto max-w-3xl px-4 py-10 sm:px-6 lg:px-8 lg:py-14">
+    <div class="mb-10 max-w-2xl">
+      <h2
+        class="text-balance text-2xl font-bold text-neutral-800 dark:text-neutral-200 md:text-4xl md:leading-tight"
+      >
+        Related articles
+      </h2>
+    </div>
+
+    <div class="grid grid-cols-2 gap-6">
+      {relatedPosts.map((entry) => <CardRelated blogEntry={entry} />)}
+    </div>
+  </div>
 </MainLayout>
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index ec06b80..eb1e6a1 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -3,13 +3,19 @@
 import MainLayout from "../../layouts/MainLayout.astro";
 import CardBlog from "../../components/ui/cards/CardBlog.astro";
 import CardBlogRecent from "../../components/ui/cards/CardBlogRecent.astro";
+import CardInsight from "../../components/ui/cards/CardInsight.astro";
+import { Image } from "astro:assets";
 
 import { getCollection } from "astro:content";
 import type { CollectionEntry } from "astro:content";
 
-const blogPosts: CollectionEntry<"blog">[] = (
-  await getCollection("blog")
-).sort((a: CollectionEntry<"blog">, b: CollectionEntry<"blog">) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
+const blogPosts: CollectionEntry<"blog">[] = (await getCollection("blog")).sort(
+  (a: CollectionEntry<"blog">, b: CollectionEntry<"blog">) =>
+    b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
+);
+
+const insightPosts: CollectionEntry<"insights">[] =
+  await getCollection("insights");
 
 const mostRecentPost: CollectionEntry<"blog"> = blogPosts[0];
 const otherPosts: CollectionEntry<"blog">[] = blogPosts.slice(1);
@@ -22,112 +28,63 @@ const subTitle: string =
 const secondTitle: string = "Insights";
 
 const secondSubTitle: string =
-  "Stay up-to-date with the latest trends and developments in the construction industry with insights from ScrewFast's team of industry experts. ";  
+  "Stay up-to-date with the latest trends and developments in the construction industry with insights from ScrewFast's team of industry experts. ";
 ---
 
-<MainLayout title="Blog | ScrewFast" meta="ScrewFast offers top-tier hardware tools and expert construction services to meet all your project needs. Start exploring and contact our sales team for superior quality and reliability.">
-  
-    
-      <div class="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 py-16 space-y-8  2xl:max-w-full">
-    
-  
-        <div class="max-w-3xl text-center mx-auto">
-            <h1 class="block font-bold tracking-tight text-neutral-800 dark:text-neutral-200 text-4xl md:text-5xl lg:text-6xl text-balance">
-            {title}
-          </h1>
-        
-          <p class="text-lg text-pretty text-neutral-600 mt-4 dark:text-neutral-400">{subTitle}</p>
-        </div>
-  
-        
-      </div>
-    
-<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto 2xl:max-w-full">
-   
-    <div class="grid lg:grid-cols-2 gap-6">
-    
-      {otherPosts.map(blogEntry => (
-        <CardBlog blogEntry={blogEntry} />
-       ))}
+<MainLayout
+  title="Blog | ScrewFast"
+  meta="ScrewFast offers top-tier hardware tools and expert construction services to meet all your project needs. Start exploring and contact our sales team for superior quality and reliability."
+>
+  <div
+    class="mx-auto max-w-[85rem] space-y-8 px-4 pt-16 sm:px-6 lg:px-8 2xl:max-w-full"
+  >
+    <div class="mx-auto max-w-3xl text-center">
+      <h1
+        class="block text-balance text-4xl font-bold tracking-tight text-neutral-800 dark:text-neutral-200 md:text-5xl lg:text-6xl"
+      >
+        {title}
+      </h1>
+
+      <p
+        class="mt-4 text-pretty text-lg text-neutral-600 dark:text-neutral-400"
+      >
+        {subTitle}
+      </p>
     </div>
   </div>
-<!-- Card Blog -->
-<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto 2xl:max-w-full">
-    
+
+  <div
+    class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full"
+  >
+    <div class="grid gap-6 lg:grid-cols-2">
+      {otherPosts.map((blogEntry) => <CardBlog blogEntry={blogEntry} />)}
+    </div>
+  </div>
+
+  <div
+    class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full"
+  >
     <CardBlogRecent blogEntry={mostRecentPost} />
   </div>
-  
-<!-- Card Blog -->
-<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto 2xl:max-w-full">
-    <!-- Title -->
-    <div class="max-w-2xl mx-auto text-center mb-10 lg:mb-14">
-      <h2 class="text-2xl font-bold md:text-4xl md:leading-tight dark:text-white">{secondTitle}</h2>
-      <p class="mt-1 text-gray-600 dark:text-gray-400">{secondSubTitle}</p>
+
+  <div
+    class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full"
+  >
+    <div class="mx-auto mb-10 max-w-2xl text-center lg:mb-14">
+      <h2
+        class="text-2xl font-bold text-neutral-800 dark:text-neutral-200 md:text-4xl md:leading-tight"
+      >
+        {secondTitle}
+      </h2>
+      <p class="mt-1 text-neutral-600 dark:text-neutral-400 text-pretty">{secondSubTitle}</p>
     </div>
-    <!-- End Title -->
-  
-    <!-- Grid -->
-    <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
-      <!-- Card -->
-      <a class="group dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" href="#">
-        <div class="relative pt-[50%] sm:pt-[70%] rounded-xl overflow-hidden">
-          <img class="size-full absolute top-0 start-0 object-cover group-hover:scale-105 transition-transform duration-500 ease-in-out rounded-xl" src="https://images.unsplash.com/photo-1586232702178-f044c5f4d4b7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1035&q=80" alt="Image Description">
-          <span class="absolute top-0 end-0 rounded-se-xl rounded-es-xl text-xs font-medium bg-gray-800 text-white py-1.5 px-3 dark:bg-gray-900">
-            Sponsored
-          </span>
-        </div>
-  
-        <div class="mt-7">
-          <h3 class="text-xl font-bold text-gray-800 group-hover:text-gray-600 dark:text-gray-200">
-            Studio by Preline
-          </h3>
-          <p class="mt-3 text-gray-800 dark:text-gray-200">
-            Produce professional, reliable streams easily leveraging Preline's innovative broadcast studio
-          </p>
-          <p class="mt-5 inline-flex items-center gap-x-1 text-blue-600 decoration-2 group-hover:underline font-medium">
-            Read more
-            <svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
-          </p>
-        </div>
-      </a>
-      <!-- End Card -->
-  
-      <!-- Card -->
-      <a class="group dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" href="#">
-        <div class="relative pt-[50%] sm:pt-[70%] rounded-xl overflow-hidden">
-          <img class="size-full absolute top-0 start-0 object-cover group-hover:scale-105 transition-transform duration-500 ease-in-out rounded-xl" src="https://images.unsplash.com/photo-1542125387-c71274d94f0a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80" alt="Image Description">
-        </div>
-  
-        <div class="mt-7">
-          <h3 class="text-xl font-bold text-gray-800 group-hover:text-gray-600 dark:text-gray-200">
-            Onsite
-          </h3>
-          <p class="mt-3 text-gray-800 dark:text-gray-200">
-            Optimize your in-person experience with best-in-class capabilities like badge printing and lead retrieval
-          </p>
-          <p class="mt-5 inline-flex items-center gap-x-1 text-blue-600 decoration-2 group-hover:underline font-medium">
-            Read more
-            <svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
-          </p>
-        </div>
-      </a>
-      <!-- End Card -->
-  
-      <!-- Card -->
-      <a class="group relative flex flex-col w-full min-h-60 bg-center bg-cover rounded-xl hover:shadow-lg transition bg-[url('https://images.unsplash.com/photo-1634017839464-5c339ebe3cb4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3000&q=80')] dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" href="#">
-        <div class="flex-auto p-4 md:p-6">
-          <h3 class="text-xl text-white/[.9] group-hover:text-white"><span class="font-bold">Preline</span> Press publishes books about economic and technological advancement.</h3>
-        </div>
-        <div class="pt-0 p-4 md:p-6">
-          <div class="inline-flex items-center gap-2 text-sm font-medium text-white group-hover:text-white/[.7]">
-            Visit the site
-            <svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
-          </div>
-        </div>
-      </a>
-      <!-- End Card -->
+
+    <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+      {
+        insightPosts.map((insightEntry) => (
+          <CardInsight insightEntry={insightEntry} />
+        ))
+      }
     </div>
-    <!-- End Grid -->
   </div>
-  <!-- End Card Blog -->
 </MainLayout>