diff --git a/src/assets/styles/blogs/blog.css b/src/assets/styles/blogs/blog.css
new file mode 100644
index 0000000..3c5f030
--- /dev/null
+++ b/src/assets/styles/blogs/blog.css
@@ -0,0 +1,135 @@
+.container__blog {
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 4rem 1.5rem;
+
+  & .blog-post-header {
+    text-align: center;
+    margin-bottom: 4rem;
+    position: relative;
+  }
+
+  & .blog-post-header::after {
+    content: '';
+    position: absolute;
+    bottom: -2rem;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 80px;
+    height: 3px;
+    background: linear-gradient(90deg, var(--primary), var(--primary-light));
+    border-radius: 3px;
+  }
+
+  & .blog-post-meta {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 2rem;
+    margin-top: 1.5rem;
+    font-size: 0.95rem;
+    color: var(--secondary);
+  }
+
+  & .blog-post-meta span {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  & .blog-post-content {
+    font-size: 1.125rem;
+    line-height: 1.8;
+    color: var(--text);
+  }
+
+  /* Markdown Content Styling */
+  & .markdown-content {
+    margin-top: 4rem;
+  }
+
+  & .markdown-content h1,
+  & .markdown-content h2,
+  & .markdown-content h3,
+  & .markdown-content h4 {
+    color: var(--text);
+    margin: 2.5rem 0 1rem;
+    font-weight: 600;
+    line-height: 1.3;
+  }
+
+  & .markdown-content h1 {
+    font-size: 2.5rem;
+    background: linear-gradient(90deg, var(--text), var(--primary-light));
+    -webkit-text-fill-color: transparent;
+  }
+
+  & .markdown-content h2 {
+    font-size: 2rem;
+  }
+
+  & .markdown-content h3 {
+    font-size: 1.5rem;
+  }
+
+  & .markdown-content p {
+    margin-bottom: 1.5rem;
+    color: var(--secondary);
+  }
+
+  & .markdown-content strong {
+    color: var(--text);
+    font-weight: 600;
+  }
+
+  & .markdown-content blockquote {
+    margin: 2rem 0;
+    padding: 1.5rem 2rem;
+    border-left: 4px solid var(--primary);
+    background: color-mix(in srgb, var(--background) 97%, var(--primary) 3%);
+    border-radius: 0.5rem;
+  }
+
+  & .markdown-content pre {
+    margin: 2rem 0;
+    padding: 1.5rem;
+    border-radius: 0.5rem;
+    background: color-mix(in srgb, var(--background) 97%, var(--text) 3%);
+    overflow-x: auto;
+  }
+
+  & .markdown-content code {
+    background: color-mix(in srgb, var(--background) 95%, var(--text) 5%);
+    padding: 0.2em 0.4em;
+    border-radius: 0.3rem;
+    font-size: 0.9em;
+  }
+
+  & .markdown-content ul,
+  & .markdown-content ol {
+    margin: 1.5rem 0;
+    padding-left: 1.5rem;
+    color: var(--secondary);
+  }
+
+  & .markdown-content li {
+    margin: 0.5rem 0;
+  }
+
+  & .markdown-content img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 0.5rem;
+    margin: 2rem 0;
+  }
+
+  & .markdown-content hr {
+    margin: 3rem 0;
+    border: none;
+    height: 1px;
+    background: linear-gradient(90deg,
+        transparent,
+        var(--border),
+        transparent);
+  }
+}
\ No newline at end of file
diff --git a/src/assets/styles/blogs/index.css b/src/assets/styles/blogs/index.css
new file mode 100644
index 0000000..e1e5ed6
--- /dev/null
+++ b/src/assets/styles/blogs/index.css
@@ -0,0 +1,172 @@
+.container__blog {
+  max-width: 1440px;
+  margin: 0 auto;
+  padding: 4rem 2rem;
+
+  & .blog-grid {
+    display: grid;
+    grid-template-columns: repeat(1, 1fr);
+    gap: 2rem;
+    margin-top: 3rem;
+    perspective: 1000px;
+  }
+
+  & .blog-card {
+    height: 100%;
+    border-radius: 1rem;
+    background: linear-gradient(145deg,
+        color-mix(in srgb, var(--background) 97%, var(--text) 3%),
+        var(--background));
+    box-shadow: 0 8px 32px -10px rgba(0, 0, 0, 0.3);
+    overflow: hidden;
+    transform-style: preserve-3d;
+    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  }
+
+  & .blog-card:hover {
+    transform: translateY(-10px) rotateX(4deg);
+    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.4);
+  }
+
+  & .blog-card a {
+    height: 100%;
+    text-decoration: none;
+  }
+
+  & .blog-card-content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  & .blog-card-image {
+    position: relative;
+    height: 240px;
+    overflow: hidden;
+  }
+
+  & .blog-card-image::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(180deg,
+        transparent 0%,
+        transparent 70%,
+        var(--background) 100%);
+  }
+
+  & .blog-card-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
+  }
+
+  & .blog-card:hover .blog-card-image img {
+    transform: scale(1.1);
+  }
+
+  & .blog-card-details {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 2rem;
+    flex: 1;
+    background: linear-gradient(to bottom,
+        transparent,
+        color-mix(in srgb, var(--background) 95%, var(--primary) 5%));
+  }
+
+  & .blog-card-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--text);
+    margin-bottom: 1rem;
+    line-height: 1.3;
+    background: linear-gradient(90deg, var(--text), var(--primary-light));
+    -webkit-text-fill-color: transparent;
+    opacity: 0.9;
+    transition: opacity 0.3s;
+  }
+
+  & .blog-card:hover .blog-card-title {
+    opacity: 1;
+  }
+
+  & .blog-card-description {
+    font-size: 1rem;
+    line-height: 1.6;
+    color: var(--secondary);
+    margin-bottom: 1.5rem;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  & .blog-card-meta {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-top: 1rem;
+    border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
+    font-size: 0.875rem;
+    color: var(--secondary);
+  }
+
+  & .blog-post {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 3rem 2rem;
+  }
+
+  & .blog-post-content {
+    margin-top: 3rem;
+    font-size: 1.125rem;
+    line-height: 1.8;
+    color: var(--text);
+  }
+
+  & .blog-post-content h1,
+  & .blog-post-content h2,
+  & .blog-post-content h3 {
+    margin: 2rem 0 1rem;
+    background: linear-gradient(90deg, var(--text), var(--primary-light));
+    -webkit-text-fill-color: transparent;
+  }
+
+  & .blog-post-content p {
+    margin-bottom: 1.5rem;
+  }
+
+  .blog-post-content a {
+    color: var(--primary-light);
+    text-decoration: underline;
+    text-underline-offset: 0.2em;
+    transition: color 0.3s;
+  }
+
+  & .blog-post-content a:hover {
+    color: var(--primary);
+  }
+
+  @media (min-width: 640px) {
+    .blog-grid {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .blog-grid {
+      grid-template-columns: repeat(3, 1fr);
+    }
+  }
+
+  @media (min-width: 1280px) {
+    .blog-grid {
+      grid-template-columns: repeat(4, 1fr);
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/components/BlogCard.astro b/src/components/BlogCard.astro
index 4fc43b5..c7a65df 100644
--- a/src/components/BlogCard.astro
+++ b/src/components/BlogCard.astro
@@ -6,24 +6,24 @@ const { post, height = "auto" } = props;
 const { url, title, description, image, author, date } = post;
 ---
 
-<article class="">
+<article class="blog-card">
   <a href={url}>
-    <div class="">
-      <div class="image">
-        <figure class={`overflow-hidden ${typeof height === "number" ? `h-[${height}px]` : `h-[${height}]`}`}>
-          <img src={image} alt={title} loading="lazy" class="" />
+    <div class="blog-card-content">
+      <div class="blog-card-image">
+        <figure class={`${typeof height === "number" ? `height: ${height}px` : `height: ${height}`}`}>
+          <img src={image} alt={title} loading="lazy" />
         </figure>
       </div>
-      <div class="">
-        <h3 class="">
+      <div class="blog-card-details">
+        <h3 class="blog-card-title">
           {title}
         </h3>
 
-        {description && <p class="">{description}</p>}
+        {description && <p class="blog-card-description">{description}</p>}
 
-        <div class="">
-          <div class="">
-            {author && <p class="font-medium">By {author}</p>}
+        <div class="blog-card-meta">
+          <div>
+            {author && <p>By {author}</p>}
           </div>
           {date && <time datetime={date.toString()}>{date}</time>}
         </div>
diff --git a/src/pages/blog/[slug].astro b/src/pages/blog/[slug].astro
index b6d6b6b..74affb1 100644
--- a/src/pages/blog/[slug].astro
+++ b/src/pages/blog/[slug].astro
@@ -1,8 +1,8 @@
 ---
+import "@/assets/styles/blogs/blog.css";
 import "@/assets/styles/page.css";
 import { blogSchema } from "@/content.config";
 import BaseLayout from "@/layouts/Base";
-import TitleLayout from "@/layouts/TitleLayout";
 import { getCollection, getEntry, render } from "astro:content";
 export const prerender = true;
 
@@ -39,8 +39,54 @@ if (!Content) {
 ---
 
 <BaseLayout meta={{ title: validatedData.title, description: validatedData.description }}>
-  <div class="container__blog">
-    <TitleLayout title={validatedData.title} />
-    <Content />
-  </div>
+  <article class="container__blog">
+    <header class="blog-post-header">
+      <h1
+        style="background: linear-gradient(90deg, var(--text), var(--primary-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"
+      >
+        {validatedData.title}
+      </h1>
+
+      {
+        validatedData.description && (
+          <p class="mx-auto mt-4 max-w-2xl text-lg" style="color: var(--secondary)">
+            {validatedData.description}
+          </p>
+        )
+      }
+
+      <div class="blog-post-meta">
+        {
+          validatedData.author && (
+            <span>
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+                <circle cx="12" cy="7" r="4" />
+              </svg>
+              {validatedData.author}
+            </span>
+          )
+        }
+        {
+          validatedData.publishDate && (
+            <span>
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
+                <line x1="16" y1="2" x2="16" y2="6" />
+                <line x1="8" y1="2" x2="8" y2="6" />
+                <line x1="3" y1="10" x2="21" y2="10" />
+              </svg>
+              <time datetime={validatedData.publishDate.toISOString()}>
+                {validatedData.publishDate.toLocaleDateString()}
+              </time>
+            </span>
+          )
+        }
+      </div>
+    </header>
+
+    <div class="markdown-content">
+      <Content />
+    </div>
+  </article>
 </BaseLayout>
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index 46c22cb..df94bb8 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -1,8 +1,8 @@
 ---
+import "@/assets/styles/blogs/index.css";
 import "@/assets/styles/page.css";
 import BlogCard from "@/components/BlogCard.astro";
 import BaseLayout from "@/layouts/Base";
-import TitleLayout from "@/layouts/TitleLayout";
 import { blogPostSchema, type BlogPost } from "@/types/blog";
 import { getCollection } from "astro:content";
 
@@ -23,9 +23,19 @@ const blogPosts = blogs.map((entry) => {
 
 <BaseLayout meta={{ title: "Blogs" }}>
   <div class="container__blog">
-    <TitleLayout title="Blogs" />
-    <div class="grid grid-cols-1 gap-2 sm:grid-cols-3 lg:grid-cols-4">
-      {blogPosts.map((post) => <BlogCard post={post} height="300px" />)}
+    <header class="mb-12 text-center">
+      <h1
+        class="mb-4 text-4xl font-bold md:text-6xl"
+        style="background: linear-gradient(90deg, var(--text), var(--primary-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"
+      >
+        Our Blog
+      </h1>
+      <p class="mx-auto max-w-2xl text-lg text-[var(--secondary)] md:text-xl">
+        Discover stories, thinking, and expertise from writers on any topic.
+      </p>
+    </header>
+    <div class="blog-grid">
+      {blogPosts.map((post) => <BlogCard post={post} height="240px" />)}
     </div>
   </div>
 </BaseLayout>
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index 8a2b7c8..8f46482 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -91,6 +91,11 @@ export const FooterLinks: LinkProps[] = [
     title: "Terms and Condition",
     path: "/terms",
     isActive: true
+  },
+  {
+    title: "Blogs",
+    path: "/blog",
+    isActive: true
   }
 ];