diff --git a/content/en/blog/what-is-mksaas.mdx b/content/en/blog/what-is-mksaas.mdx
index 0d7de69..d83c4be 100644
--- a/content/en/blog/what-is-mksaas.mdx
+++ b/content/en/blog/what-is-mksaas.mdx
@@ -2,7 +2,7 @@
 title: What is MkSaaS?
 description: MkSaaS is the best boilerplate for building AI SaaS websites.
 image: /images/blog/mksaas-og.png
-date: 2024-11-24T12:00:00.000Z
+date: 2024-11-26T12:00:00.000Z
 published: true
 categories: [news, guide]
 author: mksaas
diff --git a/content/zh/blog/what-is-mksaas.mdx b/content/zh/blog/what-is-mksaas.mdx
index 290a32d..82ae335 100644
--- a/content/zh/blog/what-is-mksaas.mdx
+++ b/content/zh/blog/what-is-mksaas.mdx
@@ -2,7 +2,7 @@
 title: MkSaaS 是什么？
 description: MkSaaS 是构建 AI SaaS 网站的最佳样板。
 image: /images/blog/mksaas-og.png
-date: 2024-11-24T12:00:00.000Z
+date: 2024-11-26T12:00:00.000Z
 published: true
 categories: [news, guide]
 author: mksaas
diff --git a/src/app/(protected)/dashboard/page.tsx b/src/app/[locale]/(dashborad)/dashboard/page.tsx
similarity index 100%
rename from src/app/(protected)/dashboard/page.tsx
rename to src/app/[locale]/(dashborad)/dashboard/page.tsx
diff --git a/src/app/[locale]/(marketing)/blog/(blog)/layout.tsx b/src/app/[locale]/(marketing)/blog/(blog)/layout.tsx
index 85f2c23..c07c4ba 100644
--- a/src/app/[locale]/(marketing)/blog/(blog)/layout.tsx
+++ b/src/app/[locale]/(marketing)/blog/(blog)/layout.tsx
@@ -1,5 +1,25 @@
+import Container from '@/components/container';
+import { HeaderSection } from '@/components/shared/header-section';
 import { PropsWithChildren } from 'react';
 
-export default function BlogLayout({ children }: PropsWithChildren) {
-  return children;
-} 
\ No newline at end of file
+export default async function BlogListLayout({
+  children,
+}: { children: React.ReactNode }) {
+  return (
+    <div className="mb-16">
+      <div className="mt-8 w-full flex flex-col items-center justify-center gap-8">
+        <HeaderSection
+          titleAs="h2"
+          title="MkSaaS Blog"
+          subtitle="Read our latest blog posts about MkSaaS"
+        />
+
+        {/* <BlogCategoryFilter /> */}
+      </div>
+
+      <Container className="mt-8 px-4">
+        {children}
+      </Container>
+    </div>
+  );
+}
diff --git a/src/app/[locale]/(marketing)/blog/(blog)/page.tsx b/src/app/[locale]/(marketing)/blog/(blog)/page.tsx
index bc54f5f..a49291f 100644
--- a/src/app/[locale]/(marketing)/blog/(blog)/page.tsx
+++ b/src/app/[locale]/(marketing)/blog/(blog)/page.tsx
@@ -36,20 +36,6 @@ export default async function BlogPage({ params }: BlogPageProps) {
   );
 
   return (
-    <Container className="py-8 md:py-12">
-      <div className="">
-        <div className="flex flex-col items-start gap-4 md:flex-row md:justify-between md:gap-8">
-          <div className="flex-1 space-y-4">
-            <h1 className="inline-block text-4xl font-bold tracking-tight lg:text-5xl">
-              Blog
-            </h1>
-            <p className="text-xl text-muted-foreground">
-              Latest news and updates from our team
-            </p>
-          </div>
-        </div>
-        <BlogGrid posts={sortedPosts} />
-      </div>
-    </Container>
+    <BlogGrid posts={sortedPosts} />
   );
 } 
\ No newline at end of file
diff --git a/src/app/[locale]/(marketing)/blog/[...slug]/layout.tsx b/src/app/[locale]/(marketing)/blog/[...slug]/layout.tsx
index 746ffc1..3ed16d2 100644
--- a/src/app/[locale]/(marketing)/blog/[...slug]/layout.tsx
+++ b/src/app/[locale]/(marketing)/blog/[...slug]/layout.tsx
@@ -1,10 +1,9 @@
 import Container from '@/components/container';
-import { Separator } from '@/components/ui/separator';
 import { PropsWithChildren } from 'react';
 
 export default function BlogPostLayout({ children }: PropsWithChildren) {
   return (
-    <Container className="py-8 md:py-12">
+    <Container className="py-8 px-4">
       <div className="mx-auto">
         {children}
       </div>
diff --git a/src/app/[locale]/(marketing)/blog/[...slug]/page.tsx b/src/app/[locale]/(marketing)/blog/[...slug]/page.tsx
index 997b46a..4f5448b 100644
--- a/src/app/[locale]/(marketing)/blog/[...slug]/page.tsx
+++ b/src/app/[locale]/(marketing)/blog/[...slug]/page.tsx
@@ -92,9 +92,9 @@ export default async function BlogPostPage(props: NextPageProps) {
 
   return (
     <div className="flex flex-col gap-8">
-      {/* Content section */}
+      {/* content section */}
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
-        {/* Left column */}
+        {/* left column (blog post content) */}
         <div className="lg:col-span-2 flex flex-col">
           {/* Basic information */}
           <div className="space-y-8">
@@ -129,7 +129,7 @@ export default async function BlogPostPage(props: NextPageProps) {
           </div>
         </div>
 
-        {/* Right column (sidebar) */}
+        {/* right column (sidebar) */}
         <div>
           <div className="space-y-4 lg:sticky lg:top-24">
             {/* author info */}
@@ -184,6 +184,9 @@ export default async function BlogPostPage(props: NextPageProps) {
           </div>
         </div>
       </div>
+
+      {/* newsletter */}
+      {/* TODO: add newsletter */}
     </div>
   );
 } 
\ No newline at end of file
diff --git a/src/components/blog/blog-card.tsx b/src/components/blog/blog-card.tsx
index 9b285d7..1f6a616 100644
--- a/src/components/blog/blog-card.tsx
+++ b/src/components/blog/blog-card.tsx
@@ -71,9 +71,9 @@ export default function BlogCard({ post }: BlogCardProps) {
           </h3>
 
           {/* Post excerpt, hidden for now */}
-          <div className="hidden">
+          <div className="">
             {post.description && (
-              <p className="mt-2 line-clamp-3 text-sm text-gray-500 dark:text-gray-400">
+              <p className="mt-2 line-clamp-2 text-sm text-gray-500 dark:text-gray-400">
                 <Link href={postUrl}>{post.description}</Link>
               </p>
             )}
@@ -83,7 +83,7 @@ export default function BlogCard({ post }: BlogCardProps) {
         {/* Author and date */}
         <div className="mt-auto pt-4 flex items-center justify-between space-x-4 text-muted-foreground">
           <div className="flex items-center gap-2">
-            <div className="relative h-5 w-5 flex-shrink-0">
+            <div className="relative h-8 w-8 flex-shrink-0">
               {post?.author?.avatar && (
                 <Image
                   src={post?.author?.avatar}
diff --git a/src/components/blog/blog-grid.tsx b/src/components/blog/blog-grid.tsx
index 0deaf94..adcf4a7 100644
--- a/src/components/blog/blog-grid.tsx
+++ b/src/components/blog/blog-grid.tsx
@@ -11,7 +11,7 @@ export default function BlogGrid({ posts }: BlogGridProps) {
   return (
     <div>
       {posts?.length > 0 && (
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12">
           {posts.map((post) => (
             <BlogCard key={post.slug} post={post} />
           ))}
@@ -25,7 +25,7 @@ export function BlogGridSkeleton({
   count = POSTS_PER_PAGE,
 }: { count?: number }) {
   return (
-    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12">
       {[...Array(count)].map((_, index) => (
         <BlogCardSkeleton key={index} />
       ))}
diff --git a/src/components/shared/header-section.tsx b/src/components/shared/header-section.tsx
index 11f8455..ff61ef8 100644
--- a/src/components/shared/header-section.tsx
+++ b/src/components/shared/header-section.tsx
@@ -45,7 +45,7 @@ export function HeaderSection({
         </TitleComponent>
       ) : null}
       {subtitle ? (
-        <SubtitleComponent className="text-balance text-lg text-foreground/80">
+        <SubtitleComponent className="text-balance text-lg text-muted-foreground">
           {subtitle}
         </SubtitleComponent>
       ) : null}