diff --git a/v3/src/components/blog/Headline.astro b/v3/src/components/blog/Headline.astro
index 5d3ccc6..585a1dd 100644
--- a/v3/src/components/blog/Headline.astro
+++ b/v3/src/components/blog/Headline.astro
@@ -2,7 +2,7 @@
 const { title = await Astro.slots.render('default'), subtitle = await Astro.slots.render('subtitle') } = Astro.props;
 ---
 
-<header class="mb-8 md:mb-16 text-center max-w-3xl mx-auto">
+<header class="mb-8 md:mb-16 text-center max-w-4xl mx-auto">
   <h1 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter font-heading" set:html={title} />
   {
     subtitle && (
diff --git a/v3/src/components/blog/SinglePost.astro b/v3/src/components/blog/SinglePost.astro
index 0bb70c8..9927c32 100644
--- a/v3/src/components/blog/SinglePost.astro
+++ b/v3/src/components/blog/SinglePost.astro
@@ -21,7 +21,7 @@ const { post, url } = Astro.props;
 <section class="py-8 sm:py-16 lg:py-20 mx-auto">
   <article>
     <header class={post.image ? '' : ''}>
-      <div class="flex justify-between flex-col sm:flex-row max-w-3xl mx-auto mt-0 mb-2 px-4 sm:px-6 sm:items-center">
+      <div class="flex justify-between flex-col sm:flex-row max-w-4xl mx-auto mt-0 mb-2 px-4 sm:px-6 sm:items-center">
         <p>
           <Icon name="tabler:clock" class="w-4 h-4 inline-block -mt-0.5 dark:text-gray-400" />
           <time datetime={String(post.publishDate)} class="inline-block">{getFormattedDate(post.publishDate)}</time>
@@ -56,7 +56,7 @@ const { post, url } = Astro.props;
       </div>
 
       <h1
-        class="px-4 sm:px-6 max-w-3xl mx-auto text-4xl md:text-5xl font-bold leading-tighter tracking-tighter font-heading"
+        class="px-4 sm:px-6 max-w-4xl mx-auto text-4xl md:text-5xl font-bold leading-tighter tracking-tighter font-heading"
       >
         {post.title}
       </h1>
@@ -75,18 +75,18 @@ const { post, url } = Astro.props;
             decoding="async"
           />
         ) : (
-          <div class="max-w-3xl mx-auto px-4 sm:px-6">
+          <div class="max-w-4xl mx-auto px-4 sm:px-6">
             <div class="border-t dark:border-slate-700" />
           </div>
         )
       }
     </header>
     <div
-      class="mx-auto px-6 sm:px-6 max-w-3xl prose prose-md lg:prose-xl dark:prose-invert dark:prose-headings:text-slate-300 prose-headings:font-heading prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-primary dark:prose-a:text-blue-400 prose-img:rounded-md prose-img:shadow-lg mt-8 prose-headings:scroll-mt-[80px] prose-li:my-0"
+      class="mx-auto px-6 sm:px-6 max-w-4xl prose prose-md lg:prose-xl dark:prose-invert dark:prose-headings:text-slate-300 prose-headings:font-heading prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-primary dark:prose-a:text-blue-400 prose-img:rounded-md prose-img:shadow-lg mt-8 prose-headings:scroll-mt-[80px] prose-li:my-0"
     >
       <slot />
     </div>
-    <div class="mx-auto px-6 sm:px-6 max-w-3xl mt-8 flex justify-between flex-col sm:flex-row">
+    <div class="mx-auto px-6 sm:px-6 max-w-4xl mt-8 flex justify-between flex-col sm:flex-row">
       <PostTags tags={post.tags} class="mr-5 rtl:mr-0 rtl:ml-5" />
       <SocialShare url={url} text={post.title} class="mt-5 sm:mt-1 align-middle text-gray-500 dark:text-slate-600" />
     </div>
diff --git a/v3/src/components/blog/ToBlogLink.astro b/v3/src/components/blog/ToBlogLink.astro
index 7fb7a49..a04fe5c 100644
--- a/v3/src/components/blog/ToBlogLink.astro
+++ b/v3/src/components/blog/ToBlogLink.astro
@@ -7,7 +7,7 @@ import Button from '~/components/ui/Button.astro';
 const { textDirection } = I18N;
 ---
 
-<div class="mx-auto px-6 sm:px-6 max-w-3xl pt-8 md:pt-4 pb-12 md:pb-20">
+<div class="mx-auto px-6 sm:px-6 max-w-4xl pt-8 md:pt-4 pb-12 md:pb-20">
   <Button variant="tertiary" class="px-3 md:px-3" href={getBlogPermalink()}>
     {
       textDirection === 'rtl' ? (