diff --git a/src/content/config.ts b/src/content/config.ts
index 969a837..77581b8 100644
--- a/src/content/config.ts
+++ b/src/content/config.ts
@@ -52,13 +52,25 @@ const productsCollection = defineCollection({
   }),
 });
 
-// const blogCollection = defineCollection({
-//     type: 'content',
-//     schema: z.object({})
-//   });
+const blogCollection = defineCollection({
+  type: "content",
+  schema: ({ image }) => z.object ({
+  title: z.string(),
+  description: z.string(),
+  contents: z.array(z.string()),
+  author: z.string(),
+  role: z.string().optional(),
+  authorImage: image(),
+  authorImageAlt: z.string(),
+  pubDate: z.date(),
+  cardImage: image(),
+  cardImageAlt: z.string(),
+  readTime: z.number(),
+  tags: z.array(z.string()).optional(),
+  }),
+});
 
-// 3. Export a single `collections` object to register your collection(s)
 export const collections = {
   'products': productsCollection,
-  // 'blog': blogCollection,
+  'blog': blogCollection,
 };
\ No newline at end of file
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index ba009be..ec06b80 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -1,7 +1,133 @@
 ---
 // Import section components
 import MainLayout from "../../layouts/MainLayout.astro";
+import CardBlog from "../../components/ui/cards/CardBlog.astro";
+import CardBlogRecent from "../../components/ui/cards/CardBlogRecent.astro";
+
+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 mostRecentPost: CollectionEntry<"blog"> = blogPosts[0];
+const otherPosts: CollectionEntry<"blog">[] = blogPosts.slice(1);
+
+const title: string = "Your Gateway to Construction Excellence";
+
+const subTitle: string =
+  "Explore the latest news, tips, and insights from ScrewFast to enhance your construction projects. From product spotlights to project management strategies, our blog is your go-to resource for all things hardware and construction.";
+
+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. ";  
 ---
 
-<MainLayout title="Blog | ScrewFast">
+<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} />
+       ))}
+    </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">
+    
+    <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>
+    <!-- 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>
+    <!-- End Grid -->
+  </div>
+  <!-- End Card Blog -->
 </MainLayout>
diff --git a/src/pages/products/[...slug].astro b/src/pages/products/[...slug].astro
index edbd11c..bb1f5a9 100644
--- a/src/pages/products/[...slug].astro
+++ b/src/pages/products/[...slug].astro
@@ -24,7 +24,7 @@ export async function getStaticPaths() {
 const { product } = Astro.props;
 ---
 
-<MainLayout title={product.data.main.title + " | ScrewFast"}>
+<MainLayout title={product.data.main.title + " | 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 id="overlay" class="fixed inset-0 bg-neutral-200 dark:bg-neutral-800">
   </div>
 
@@ -166,32 +166,36 @@ const { product } = Astro.props;
   <div id="tabs-with-card-3" class="hidden" role="tabpanel">
     <div class="mx-auto mb-20 flex w-full md:mb-28 2xl:w-4/5">
       <div
-        class="relative left-12 top-12 z-10 -ml-12 overflow-hidden rounded-xl shadow-lg md:left-12 md:top-16 lg:ml-0"
+        class="relative left-12 top-12 z-10 overflow-hidden rounded-xl shadow-lg md:left-12 md:top-16 md:-ml-12 lg:ml-0"
       >
-        {product.data.blueprints.first &&
+        {
+          product.data.blueprints.first && (
             <Image
-                src={product.data.blueprints.first}
-                class="h-full w-full object-cover object-center"
-                alt="Blueprint Illustration"
-                format={"avif"}
+              src={product.data.blueprints.first}
+              class="h-full w-full object-cover object-center"
+              alt="Blueprint Illustration"
+              format={"avif"}
             />
+          )
         }
       </div>
 
       <div class="relative right-12 overflow-hidden rounded-xl shadow-xl">
-        {product.data.blueprints.second &&
+        {
+          product.data.blueprints.second && (
             <Image
-                src={product.data.blueprints.second}
-                class="h-full w-full object-cover object-center"
-                alt="Blueprint Illustration"
-                format={"avif"}
+              src={product.data.blueprints.second}
+              class="h-full w-full object-cover object-center"
+              alt="Blueprint Illustration"
+              format={"avif"}
             />
+          )
         }
       </div>
     </div>
   </div>
 
-  <script is:inline src="/assets/vendor/gsap/gsap.min.js"></script>
+  <script is:inline src="/scripts/vendor/gsap/gsap.min.js"></script>
   <script>
     window.addEventListener("load", (event) => {
       if (window.gsap) {
@@ -203,7 +207,7 @@ const { product } = Astro.props;
         let timeline = gsap.timeline();
 
         timeline.to("#fadeText", {
-          duration: 2,
+          duration: 1.5,
           autoAlpha: 1,
           y: 0,
           delay: 1,
@@ -212,17 +216,17 @@ const { product } = Astro.props;
 
         timeline.to(
           "#fadeInUp",
-          { duration: 2, autoAlpha: 1, y: 0, ease: "power2.out" },
+          { duration: 1.5, autoAlpha: 1, y: 0, ease: "power2.out" },
           "-=1.2",
         );
 
         timeline.to(
           "#fadeInMoveRight",
-          { duration: 2, autoAlpha: 1, x: 0, ease: "power2.out" },
+          { duration: 1.5, autoAlpha: 1, x: 0, ease: "power2.inOut" },
           "-=1.2",
         );
 
-        timeline.to("#overlay", { duration: 1, autoAlpha: 0, delay: 0.5 });
+        timeline.to("#overlay", { duration: 1, autoAlpha: 0, delay: 0.2 });
       }
     });
   </script>
diff --git a/src/pages/products/index.astro b/src/pages/products/index.astro
index e3d2979..f0a72fe 100644
--- a/src/pages/products/index.astro
+++ b/src/pages/products/index.astro
@@ -2,8 +2,8 @@
 // Import section components
 import MainLayout from "../../layouts/MainLayout.astro";
 import PrimaryCTA from "../../components/ui/buttons/PrimaryCTA.astro";
-import ImgSmall from "../../components/ui/images/ImgSmall.astro";
-import ImgWide from "../../components/ui/images/ImgWide.astro";
+import CardSmall from "../../components/ui/cards/CardSmall.astro";
+import CardWide from "../../components/ui/cards/CardWide.astro";
 import FeaturesStats2 from "../../components/FeaturesStats2.astro";
 import TestimonialsSection2 from "../../components/TestimonialsSection2.astro";
 
@@ -14,7 +14,7 @@ const product: CollectionEntry<"products">[] = (
   await getCollection("products")
 ).sort(
   (a: CollectionEntry<"products">, b: CollectionEntry<"products">) =>
-    a.data.main.id - b.data.main.id,
+    a.data.main.id - b.data.main.id
 );
 
 const title: string = "Products";
@@ -47,14 +47,14 @@ const subTitle: string =
       <PrimaryCTA title="Customer Stories" url="#testimonials" noArrow={true} />
     </div>
 
-    <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:gap-6 xl:gap-8">
+    <div class="grid grid-cols-1 gap-4 sm:grid-cols-3 md:gap-6 xl:gap-8">
       {
         product.map((product, index) => {
           const position = index % 4;
           if (position === 0 || position === 3) {
-            return <ImgSmall product={product} />;
+            return <CardSmall product={product} />;
           } else {
-            return <ImgWide product={product} />;
+            return <CardWide product={product} />;
           }
         })
       }