diff --git a/public/avtar.png b/public/avtar.png
new file mode 100644
index 0000000..a55f62f
Binary files /dev/null and b/public/avtar.png differ
diff --git a/public/image.png b/public/image.png
new file mode 100644
index 0000000..c6d8fca
Binary files /dev/null and b/public/image.png differ
diff --git a/public/mobile-icon.png b/public/mobile-icon.png
new file mode 100644
index 0000000..fbe6a3e
Binary files /dev/null and b/public/mobile-icon.png differ
diff --git a/public/service-picture.png b/public/service-picture.png
new file mode 100644
index 0000000..79ecb1b
Binary files /dev/null and b/public/service-picture.png differ
diff --git a/public/stack-1.png b/public/stack-1.png
new file mode 100644
index 0000000..2756c35
Binary files /dev/null and b/public/stack-1.png differ
diff --git a/public/stack-2.png b/public/stack-2.png
new file mode 100644
index 0000000..802cc4d
Binary files /dev/null and b/public/stack-2.png differ
diff --git a/public/stack-3.png b/public/stack-3.png
new file mode 100644
index 0000000..13cc862
Binary files /dev/null and b/public/stack-3.png differ
diff --git a/public/stack.png b/public/stack.png
new file mode 100644
index 0000000..943b3dc
Binary files /dev/null and b/public/stack.png differ
diff --git a/public/web-icon.png b/public/web-icon.png
new file mode 100644
index 0000000..c2b2ee9
Binary files /dev/null and b/public/web-icon.png differ
diff --git a/src/app/_components/header.tsx b/src/app/_components/header.tsx
index 96d099b..f4e44d3 100644
--- a/src/app/_components/header.tsx
+++ b/src/app/_components/header.tsx
@@ -5,6 +5,7 @@ export const navLinks = [
   { href: "/about", text: "About" },
   { href: "#contact", text: "Contact Us" },
   { href: "/work", text: "Work" },
+  { href: "/blogs", text: "Blogs" },
 ];
 
 const Header = () => {
diff --git a/src/app/blogs/[slug]/_components/credits.tsx b/src/app/blogs/[slug]/_components/credits.tsx
new file mode 100644
index 0000000..0f41855
--- /dev/null
+++ b/src/app/blogs/[slug]/_components/credits.tsx
@@ -0,0 +1,35 @@
+import Image from "next/image";
+import React from "react";
+
+const Credits = ({ credits }: { credits: any }) => {
+  return (
+    <div className="grid grid-cols-6 lg:grid-cols-12 space-y-5">
+      <div className="col-span-4 space-y-3 lg:w-1/2">
+        <h1>Credits</h1>
+        <div className="flex  lg:flex-col gap-x-2">
+          <Image
+            src="/avtar.png"
+            alt="avator"
+            width={100}
+            height={100}
+            className="w-14 h-14"
+          />
+          <div>
+            <h1 className="font-normal">{credits.name}</h1>
+            <p className="text-textSecondary">{credits.rol}</p>
+          </div>
+        </div>
+      </div>
+      <p className="col-span-2 lg:col-span-4 lg:order-3 text-textSuccess">
+        January 3. 2025
+      </p>
+
+      <div className="col-span-full lg:col-span-4 lg:w-1/2">
+        <h1>TLDR</h1>
+        <p>{credits.TLDR}</p>
+      </div>
+    </div>
+  );
+};
+
+export default Credits;
diff --git a/src/app/blogs/[slug]/_components/strategies.tsx b/src/app/blogs/[slug]/_components/strategies.tsx
new file mode 100644
index 0000000..d33756d
--- /dev/null
+++ b/src/app/blogs/[slug]/_components/strategies.tsx
@@ -0,0 +1,67 @@
+import Image from "next/image";
+import React from "react";
+
+const Strategies = ({ keyStrategies }: { keyStrategies: any }) => {
+  return (
+    <div className="space-y-4 lg:space-y-0 lg:gap-6 lg:grid lg:grid-cols-8">
+      <div className="grid grid-cols-2 lg:grid-cols-1 lg:flex-col gap-5 lg:col-span-2 lg:order-2">
+        <div className="bg-charcoal space-y-3 p-3">
+          <h1 className="text-[22px]">Tech Stack</h1>
+          <div className="flex flex-wrap gap-3">
+            <Image src="/stack.png" alt="tech-stack" width={54} height={54} />
+            <Image src="/stack-1.png" alt="tech-stack" width={54} height={54} />
+            <Image src="/stack-2.png" alt="tech-stack" width={54} height={54} />
+            <Image src="/stack-3.png" alt="tech-stack" width={54} height={54} />
+          </div>
+        </div>
+        <div className="bg-charcoal  space-y-3 p-3">
+          <h1 className="text-[22px]">Services</h1>
+          <div>
+            <Image
+              src="/mobile-icon.png"
+              alt="service"
+              width={24}
+              height={24}
+            />
+            <p>Mobile App Development</p>
+          </div>
+          <div>
+            <Image src="/web-icon.png" alt="service" width={24} height={24} />
+            <p>web App Development</p>
+          </div>
+        </div>
+      </div>
+
+      <div className="bg-charcoal lg:col-span-4 relative lg:order-3  overflow-hidden p-6">
+        <Image
+          src="/service-picture.png"
+          alt="service"
+          width={400}
+          height={400}
+          objectFit="cover"
+          layout="responsive"
+          className="relative left-12  w-full"
+        />
+        <Image
+          src="/service-picture.png"
+          alt="service"
+          objectFit="cover"
+          layout="responsive"
+          width={400}
+          height={400}
+          className="absolute top-14 sm:top-24 w-full"
+        />
+      </div>
+      <div className="bg-charcoal lg:col-span-2 p-4">
+        <h1 className="text-[22px]">Key Strategies</h1>
+        <ul className="space-y-3">
+          {keyStrategies?.map((e: any, i: number) => (
+            <li key={i}>- {e}</li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default Strategies;
diff --git a/src/app/blogs/[slug]/page.tsx b/src/app/blogs/[slug]/page.tsx
new file mode 100644
index 0000000..8084237
--- /dev/null
+++ b/src/app/blogs/[slug]/page.tsx
@@ -0,0 +1,94 @@
+import Image from "next/image";
+import React from "react";
+import Strategies from "./_components/strategies";
+import Credits from "./_components/credits";
+import { Metadata } from "next";
+import { blogs } from "../page";
+
+interface props {
+  params: {
+    slug: string;
+  };
+}
+
+export const generateMetadata = ({ params }: props): Metadata => {
+  const formatSlug = (slug: string) => {
+    return slug
+      .toLowerCase()
+      .replace(/\s+/g, "-")
+      .replace(/[^\w-]+/g, "");
+  };
+  const blog = blogs.find((e) => formatSlug(e.slug) === params.slug);
+  const blogzDetails = blog ? blog : null;
+
+  return {
+    title: `${blogzDetails?.title}`,
+    description: `We Build Elegant Websites.`,
+    openGraph: {
+      title: `blog ${blogzDetails?.title}`,
+      description: `blog ${blogzDetails?.textBlock}`,
+      url: "https://zero8.dev",
+      siteName: `Blog ${blogzDetails?.title}`,
+      images: [
+        {
+          url: "/image.png",
+          width: 1200,
+          height: 630,
+          alt: `blog ${blogzDetails?.title}`,
+        },
+      ],
+      type: "article",
+    },
+    twitter: {
+      card: "summary_large_image",
+      title: "Zero8.Dev",
+      description: "We Build Elegant Websites.",
+      images: ["/home.png"],
+    },
+  };
+};
+
+const Page = ({ params }: props) => {
+  const slug = params.slug;
+
+  const formatSlug = (slug: string) => {
+    return slug
+      .toLowerCase()
+      .replace(/\s+/g, "-")
+      .replace(/[^\w-]+/g, "");
+  };
+  const blogzDetails = blogs.find((e) => formatSlug(e.slug) === slug);
+
+  if (!blogzDetails) {
+    return <div className="text-red-500">Blog not found!</div>;
+  }
+
+  return (
+    <div className="col-span-full h-auto space-y-5">
+      <p className="text-textSecondary text-2xl font-bold">Blogs</p>
+      {/* heading */}
+      <h1 className="text-[34px] text-primary letter">{blogzDetails?.title}</h1>
+      <Credits credits={blogzDetails?.credits} />
+      <div className="col-span-full bg-charcoal p-4">
+        <h1 className="text-[22px]">The Challenge</h1>
+        <p>{blogzDetails?.challenges}</p>
+      </div>
+      <Strategies keyStrategies={blogzDetails?.strategies} />
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <Image
+          alt="/image"
+          src="/image.png"
+          className="w-full"
+          width={400}
+          height={400}
+        />
+        <div className=" bg-charcoal p-4">
+          <h1 className="text-[22px]">Another text block</h1>
+          <p>{blogzDetails?.textBlock}</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Page;
diff --git a/src/app/blogs/_components/blog.tsx b/src/app/blogs/_components/blog.tsx
new file mode 100644
index 0000000..24bee62
--- /dev/null
+++ b/src/app/blogs/_components/blog.tsx
@@ -0,0 +1,36 @@
+import Image from "next/image";
+import Link from "next/link";
+import React from "react";
+
+const Blog = ({ item }: { item: any }) => {
+  const formatSlug = (slug: string) => {
+    return slug
+      .toLowerCase()
+      .replace(/\s+/g, "-")
+      .replace(/[^\w-]+/g, "");
+  };
+  return (
+    <Link
+      href={`/blogs/${formatSlug(item.slug)}`}
+      className="bg-charcoal grid lg:grid-cols-2 cursor-pointer"
+    >
+      <Image
+        src={`${item.image}`}
+        alt="yoga"
+        width={0}
+        height={0}
+        className="w-full lg:col-span-1"
+        layout="responsive"
+        objectFit="cover"
+      />
+      <div className="px-4 lg:col-span-1 space-y-4 p-4 ">
+        <h1 className="text-4xl">{item.title}</h1>
+        <p className="text-textSecondary"> 2 min read</p>
+        <p className="text-textSecondary">{item.desc}</p>
+        <p className="text-textSecondary">6 January 2025</p>
+      </div>
+    </Link>
+  );
+};
+
+export default Blog;
diff --git a/src/app/blogs/_components/featured.tsx b/src/app/blogs/_components/featured.tsx
new file mode 100644
index 0000000..a72b6bd
--- /dev/null
+++ b/src/app/blogs/_components/featured.tsx
@@ -0,0 +1,30 @@
+import Image from "next/image";
+import React from "react";
+
+const Featured = () => {
+  return (
+    <div className="bg-charcoal">
+      <Image
+        src="/yoga.png"
+        alt="yoga"
+        width={0}
+        height={0}
+        className="w-full"
+        layout="responsive"
+        objectFit="cover"
+      />
+      <div className="px-4 py-4 grid lg:grid-cols-4">
+        <h1 className="text-[22px] md:col-span-3 ">
+          Headline : Enabling this bootstrapped brand set up end-to-end business
+          solution.
+        </h1>
+        <p className=" lg:col-span-1 lg:text-right font-extralight text-textSecondary">
+          {" "}
+          2 min read
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default Featured;
diff --git a/src/app/blogs/page.tsx b/src/app/blogs/page.tsx
new file mode 100644
index 0000000..934e264
--- /dev/null
+++ b/src/app/blogs/page.tsx
@@ -0,0 +1,119 @@
+import React from "react";
+import Featured from "./_components/featured";
+import Blog from "./_components/blog";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Blogs - Zero8.Dev",
+  description: "We Build Elegant Websites.",
+  openGraph: {
+    title: "Zero8.Dev",
+    description: "We Build Elegant Websites.",
+    images: [
+      {
+        url: "/home.png",
+        width: 1200,
+        height: 630,
+        alt: "Zero8.Dev about image",
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "Zero8.Dev",
+    description: "We Build Elegant Websites.",
+    images: ["/home.png"],
+  },
+};
+export const blogs = [
+  {
+    id: 1,
+    slug: "From Concept to Code: How we Build scalable Digital Solutions",
+    image: "/digital.png",
+    title: "From Concept to Code: How we Build scalable Digital Solutions",
+    credits: {
+      name: "Amit Velankani",
+      rol: "Tech Advisor and Front End Developer @Zero8.Dev",
+      TLDR: "Using AI and putting smart analytics in the hands of entrepeneurs.Lorem ipsum dolor sit amet, consctetur adipiscing elit. Ut",
+    },
+    challenges:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Lorem ipsum dolor sit amet, consecteture adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Lorem ipsum dolor sit amet, consetetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna.",
+    techStack: ["stack.png", "stack.png-1", "stack.png-2", "stack.png-3"],
+    images: "service-picture",
+    strategies: [
+      "Lorem ipsum dolor sit amet ,consecterur adipiscing elit.",
+      "Lorem ipsum dolor sit amet , consecterur adipiscing elit.",
+      "Lorem ipsum dolor sit amet , consecterur adipiscing elit.",
+    ],
+
+    textBlock:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Lorem ipsum dolor sit amet, consecteture adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Lorem ipsum dolor sit amet, consetetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Lorem ipsum dolor sit amet, consecterur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna.",
+  },
+  {
+    id: 2,
+    slug: "5 Tools Every Developer Should Have in Their Toolkit",
+    image: "/desk.png",
+    title: "5 Tools Every Developer Should Have in Their Toolkit",
+    credits: {
+      name: "Amit Velankani",
+      rol: "Tech Advisor and Front End Developer @Zero8.Dev",
+      TLDR: "Using AI and putting sma5 Tools Every Developer Should Have in Their Toolkitrt analytics in the hands of entrepeneurs.Lorem ipsum dolor sit amet, consctetur adipiscing elit. Ut",
+    },
+    challenges:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Lorem ipsum dolor sit amet, consecteture adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Lorem ipsum dolor sit amet, consetetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Lorem ipsum dolor sit amet, consecterur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna.",
+    techStack: ["stack.png", "stack.png-1", "stack.png-2", "stack.png-3"],
+    images: "service-picture",
+    strategies: [
+      "Lorem ipsum dolor sit amet ,consecterur adipiscing elit.",
+      "Lorem ipsum dolor sit amet , consecterur adipiscing elit.",
+      "Lorem ipsum dolor sit amet , consecterur adipiscing elit.",
+    ],
+
+    textBlock:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Lorem ipsum dolor sit amet, consecteture adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Lorem ipsum dolor sit amet, consetetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Lorem ipsum dolor sit amet, consecterur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna.",
+  },
+  {
+    id: 3,
+    slug: "Understanding the Cloud: A Develpers Perspective",
+    image: "/cloud.png",
+    title: "Understanding the Cloud: A Develpers Perspective",
+    credits: {
+      name: "Amit Velankani",
+      rol: "Tech Advisor and Front End Developer @Zero8.Dev",
+      TLDR: "Using AI and putting smart analytics in the hands of entrepeneurs.Lorem ipsum dolor sit amet, consctetur adipiscing elit. Ut",
+    },
+    challenges:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Lorem ipsum dolor sit amet, consecteture adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Lorem ipsum dolor sit amet, consetetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Lorem ipsum dolor sit amet, consecterur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna.",
+    techStack: ["stack.png", "stack.png-1", "stack.png-2", "stack.png-3"],
+    images: "service-picture",
+    strategies: [
+      "Lorem ipsum dolor sit amet ,consecterur adipiscing elit.",
+      "Lorem ipsum dolor sit amet , consecterur adipiscing elit.",
+      "Lorem ipsum dolor sit amet , consecterur adipiscing elit.",
+    ],
+
+    textBlock:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Lorem ipsum dolor sit amet, consecteture adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Lorem ipsum dolor sit amet, consetetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Lorem ipsum dolor sit amet, consecterur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna.",
+  },
+];
+const page = () => {
+  return (
+    <div className="h-auto col-span-full ">
+      <h1 className="text-[55px] text-primary ">Blogs</h1>
+      <div className="space-y-5  ">
+        <div className="space-y-3">
+          <h1 className="text-2xl ">Featured</h1>
+          <Featured />
+        </div>
+        <div className="space-y-4">
+          <h1 className="text-2xl">Recently Published</h1>
+          {blogs.map((item, index) => (
+            <Blog item={item} key={index} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default page;