diff --git a/src/components/BackButton.astro b/src/components/BackButton.astro
index 80b6662..b16e33e 100644
--- a/src/components/BackButton.astro
+++ b/src/components/BackButton.astro
@@ -6,7 +6,7 @@ import { SITE } from "@/config";
 
 {
   SITE.showBackButton && (
-    <div class="mx-auto flex w-full max-w-3xl items-center justify-start px-2">
+    <div class="mx-auto flex w-full max-w-app items-center justify-start px-2">
       <LinkButton
         id="back-button"
         href="/"
diff --git a/src/components/Breadcrumb.astro b/src/components/Breadcrumb.astro
index 49f3975..d93e66c 100644
--- a/src/components/Breadcrumb.astro
+++ b/src/components/Breadcrumb.astro
@@ -23,7 +23,7 @@ if (breadcrumbList[0] === "tags" && !isNaN(Number(breadcrumbList[2]))) {
 }
 ---
 
-<nav class="mx-auto mt-8 mb-1 w-full max-w-3xl px-4" aria-label="breadcrumb">
+<nav class="mx-auto mt-8 mb-1 w-full max-w-app px-4" aria-label="breadcrumb">
   <ul
     class="font-light [&>li]:inline [&>li:not(:last-child)>a]:hover:opacity-100"
   >
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 21f85c5..4c06eae 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -33,7 +33,7 @@ const isActive = (path: string) => {
   </a>
   <div
     id="nav-container"
-    class="mx-auto flex max-w-3xl flex-col items-center justify-between sm:flex-row"
+    class="mx-auto flex max-w-app flex-col items-center justify-between sm:flex-row"
   >
     <div
       id="top-nav-wrap"
diff --git a/src/components/Hr.astro b/src/components/Hr.astro
index 9d77b46..356d3c0 100644
--- a/src/components/Hr.astro
+++ b/src/components/Hr.astro
@@ -7,6 +7,6 @@ export interface Props {
 const { noPadding = false, ariaHidden = true } = Astro.props;
 ---
 
-<div class={`max-w-3xl mx-auto ${noPadding ? "px-0" : "px-4"}`}>
+<div class:list={["mx-auto max-w-app", noPadding ? "px-0" : "px-4"]}>
   <hr class="border-border" aria-hidden={ariaHidden} />
 </div>
diff --git a/src/data/blog/how-to-configure-astropaper-theme.md b/src/data/blog/how-to-configure-astropaper-theme.md
index becfc31..50da1dd 100644
--- a/src/data/blog/how-to-configure-astropaper-theme.md
+++ b/src/data/blog/how-to-configure-astropaper-theme.md
@@ -69,6 +69,19 @@ Here are SITE configuration options
 | `lang`                | Used as HTML ISO Language code in `<html lang"en">`. Default is `en`.                                                                                                                                                                                                                                                                                                                                                             |
 | `timezone`            | This option allows you to specify your timezone using the [IANA format](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones). Setting this ensures consistent timestamps across your localhost and deployed site, eliminating time differences.                                                                                                                                                                          |
 
+## Update layout width
+
+The default `max-width` for the entire blog is `768px` (`max-w-3xl`). If you'd like to change it, you can easily update the `max-w-app` utility in your `src/styles/global.css` file:
+
+```css
+@utility max-w-app {
+  @apply max-w-4xl xl:max-w-5xl;
+  /* eg: max-w-4xl xl:max-w-5xl */
+}
+```
+
+You can explore more `max-width` values in the [Tailwind CSS docs](https://tailwindcss.com/docs/max-width).
+
 ## Configuring logo or title
 
 Prior to AstroPaper v5, you can update your site name/logo in `LOGO_IMAGE` object inside `src/config.ts` file. However, in AstroPaper v5, this option has been removed in favor of Astro's built-in SVG and Image components.
diff --git a/src/layouts/AboutLayout.astro b/src/layouts/AboutLayout.astro
index e38d457..e541625 100644
--- a/src/layouts/AboutLayout.astro
+++ b/src/layouts/AboutLayout.astro
@@ -19,7 +19,7 @@ const { frontmatter } = Astro.props;
   <Header />
   <Breadcrumb />
   <main id="main-content">
-    <section id="about" class="prose mb-28 max-w-3xl prose-img:border-0">
+    <section id="about" class="prose mb-28 max-w-app prose-img:border-0">
       <h1 class="text-2xl tracking-wider sm:text-3xl">{frontmatter.title}</h1>
       <slot />
     </section>
diff --git a/src/layouts/Main.astro b/src/layouts/Main.astro
index 91f7151..7520135 100644
--- a/src/layouts/Main.astro
+++ b/src/layouts/Main.astro
@@ -24,7 +24,7 @@ const backUrl = SITE.showBackButton ? Astro.url.pathname : "/";
 <main
   data-backUrl={backUrl}
   id="main-content"
-  class="mx-auto w-full max-w-3xl px-4 pb-4"
+  class="mx-auto w-full max-w-app px-4 pb-4"
 >
   {
     "titleTransition" in props ? (
diff --git a/src/layouts/PostDetails.astro b/src/layouts/PostDetails.astro
index 285ecc5..039322e 100644
--- a/src/layouts/PostDetails.astro
+++ b/src/layouts/PostDetails.astro
@@ -87,7 +87,7 @@ const nextPost =
   <main
     id="main-content"
     class:list={[
-      "mx-auto w-full max-w-3xl px-4 pb-12",
+      "mx-auto w-full max-w-app px-4 pb-12",
       { "mt-8": !SITE.showBackButton },
     ]}
     data-pagefind-body
@@ -102,7 +102,7 @@ const nextPost =
       <Datetime {pubDatetime} {modDatetime} {timezone} size="lg" class="my-2" />
       <EditPost class="max-sm:hidden" {hideEditPost} {post} />
     </div>
-    <article id="article" class="mx-auto prose mt-8 max-w-3xl">
+    <article id="article" class="mx-auto prose mt-8 max-w-app">
       <Content />
     </article>
 
diff --git a/src/pages/404.astro b/src/pages/404.astro
index e0ee430..3643653 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -11,7 +11,7 @@ import { SITE } from "@/config";
 
   <main
     id="main-content"
-    class="mx-auto flex max-w-3xl flex-1 items-center justify-center"
+    class="mx-auto flex max-w-app flex-1 items-center justify-center"
   >
     <div class="mb-14 flex flex-col items-center justify-center">
       <h1 class="text-9xl font-bold text-accent">404</h1>
diff --git a/src/styles/global.css b/src/styles/global.css
index 99077b1..4d56e57 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -50,10 +50,14 @@ html[data-theme="dark"] {
   }
   section,
   footer {
-    @apply mx-auto max-w-3xl px-4;
+    @apply mx-auto max-w-app px-4;
   }
 }
 
+@utility max-w-app {
+  @apply max-w-3xl;
+}
+
 .active-nav {
   @apply underline decoration-wavy decoration-2 underline-offset-4;
 }
