diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index e1d4c50..96466ab 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,11 +1,17 @@
 ---
 import { Image } from "astro:assets";
 import forgejoIcon from "../assets/forgejo.svg";
+
+interface Props {
+	width?: "4xl" | "7xl";
+}
+const { width = "4xl" } = Astro.props;
+const maxWidth = width === "7xl" ? "max-w-7xl" : "max-w-4xl";
 ---
 
-<div class="w-full bg-secondary dark:bg-gray-800 py-8 px-4 transition-colors duration-200">
+<div class="w-full bg-secondary dark:bg-gray-800 py-8 transition-colors duration-200">
 	<div
-		class="max-w-6xl mx-auto flex justify-between flex-col-reverse sm:flex-row gap-4 sm:items-end items-center"
+		class:list={[maxWidth, "mx-auto px-4 sm:px-6 lg:px-8 flex justify-between flex-col-reverse sm:flex-row gap-4 sm:items-end items-center"]}
 	>
 		<div
 			class="text-center sm:text-left text-gray-800 dark:text-gray-200 flex flex-col items-center sm:items-start"
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index 4758422..c17b287 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -1,11 +1,17 @@
 ---
+interface Props {
+	// Match the page content: 4xl for reading pages, 7xl for posts with the table of contents
+	width?: "4xl" | "7xl";
+}
+const { width = "4xl" } = Astro.props;
+const maxWidth = width === "7xl" ? "max-w-7xl" : "max-w-4xl";
 const currentPath = Astro.url.pathname;
 ---
 
 <nav
 	class="fixed top-0 left-0 right-0 z-50 bg-secondary dark:bg-gray-800 shadow-sm transition-colors duration-200"
 >
-	<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+	<div class={`${maxWidth} mx-auto px-4 sm:px-6 lg:px-8`}>
 		<div class="flex justify-between items-center h-16">
 			<!-- Logo/Brand -->
 			<a
diff --git a/src/pages/blog/[slug].astro b/src/pages/blog/[slug].astro
index bd1a09e..f6af06a 100644
--- a/src/pages/blog/[slug].astro
+++ b/src/pages/blog/[slug].astro
@@ -38,7 +38,7 @@ const heroImageSrc = entry.data.heroImage?.src || mePhoto.src;
 	modifiedTime={entry.data.updatedDate}
 	tags={entry.data.tags}
 >
-	<Navbar />
+	<Navbar width="7xl" />
 	<div class="min-h-screen pt-16 bg-gray-50 dark:bg-gray-900 transition-colors duration-200">
 		<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 md:py-12">
 			<div class="flex gap-8 items-start">
@@ -200,5 +200,5 @@ const heroImageSrc = entry.data.heroImage?.src || mePhoto.src;
 			</div>
 		</div>
 	</div>
-	<Footer />
+	<Footer width="7xl" />
 </BaseLayout>