diff --git a/src/Elastic.Markdown/Assets/styles.css b/src/Elastic.Markdown/Assets/styles.css
index 860f01275..e1b19ba7a 100644
--- a/src/Elastic.Markdown/Assets/styles.css
+++ b/src/Elastic.Markdown/Assets/styles.css
@@ -24,10 +24,12 @@
 	--banner-height: calc(var(--spacing) * 9);
 	/*--offset-top: calc(var(--header-height) + var(--banner-height));*/
 	--offset-top: 72px;
-	--max-layout-width: 1500px;
+	--max-text-width: clamp(40ch, 90ch, 100%);
 	--max-sidebar-width: calc(var(--spacing) * 65);
-	--max-content-width: calc(
-		var(--max-layout-width) - (var(--max-sidebar-width) * 2)
+	--content-spacing: calc(var(--spacing) * 8);
+	--max-layout-width: calc(
+		var(--max-text-width) + (var(--max-sidebar-width) * 2) +
+			calc(var(--content-spacing) * 2)
 	);
 }
 
@@ -234,7 +236,11 @@
 
 .container {
 	@apply lg:px-3;
-	max-width: 1250px !important;
+	max-width: var(--max-layout-width) !important;
+
+	* {
+		@apply font-body;
+	}
 }
 
 #elastic-nav {
diff --git a/src/Elastic.Markdown/Slices/Layout/_Footer.cshtml b/src/Elastic.Markdown/Slices/Layout/_Footer.cshtml
index fb3c41449..e8f98644f 100644
--- a/src/Elastic.Markdown/Slices/Layout/_Footer.cshtml
+++ b/src/Elastic.Markdown/Slices/Layout/_Footer.cshtml
@@ -1,13 +1,14 @@
 @inherits RazorSlice<LayoutViewModel>
 
 
-<footer class="text-grey-20 text-[12px] bg-ink-dark py-12 px-6">
+<footer class="py-12 px-6 w-full mx-auto bg-ink-dark">
 	<div class="max-w-(--max-layout-width) w-full mx-auto">
+	<div class="text-grey-20 text-[12px]">
 		<a href="https://www.elastic.co/">
 			<img class="block" alt="Elastic logo" src="@Model.Static("logo-elastic-horizontal-white.svg")" width="120"/>
 		</a>
 	</div>
-	<div class="max-w-(--max-layout-width) w-full mx-auto grid grid-cols-1 md:grid-cols-2 gap-2 rounded-tl-4xl rounded-tr-4xl items-center">
+	<div class="text-grey-20 text-[12px] bg-ink-dark grid grid-cols-1 md:grid-cols-2 gap-2 items-center">
 		<div>
 			<ul class="mt-4 flex gap-3">
 				<li>
@@ -31,6 +32,7 @@
 			Elasticsearch is a trademark of Elasticsearch B.V., registered in the U.S. and in other countries. Apache, Apache Lucene, Apache Hadoop, Hadoop, HDFS and the yellow elephant logo are trademarks of the Apache Software Foundation in the United States and/or other countries.
 		</p>
 	</div>
+	</div>
 </footer>
 
 <script src="@Model.Static("main.js")"></script>
diff --git a/src/Elastic.Markdown/Slices/Layout/_Header.cshtml b/src/Elastic.Markdown/Slices/Layout/_Header.cshtml
index 76d6cf4d1..1ff6906cf 100644
--- a/src/Elastic.Markdown/Slices/Layout/_Header.cshtml
+++ b/src/Elastic.Markdown/Slices/Layout/_Header.cshtml
@@ -7,7 +7,7 @@
 }
 else
 {
-	<header class="sticky top-0 z-50 bg-blue-developer text-white text-lg font-semibold h-(--offset-top) flex items-center px-6">
+	<header class="sticky top-0 z-50 bg-blue-developer text-white h-(--offset-top) flex items-center">
 		<div class="max-w-(--max-layout-width) w-full mx-auto flex justify-between items-center">
 			@* ReSharper disable once Html.IdNotResolved *@
 			<label role="button" class="md:hidden cursor-pointer" for="pages-nav-hamburger">
@@ -15,7 +15,7 @@ else
 					<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12"/>
 				</svg>
 			</label>
-			<a href="@Model.Link("/")" class="flex items-center gap-2">
+			<a href="@Model.Link("/")" class="flex items-center gap-2 text-lg font-semibold px-4">
 				<img src="@Model.Static("logo-elastic-glyph-color.svg")" alt="" width="32" height="32">
 				@Model.DocSetName
 			</a>
diff --git a/src/Elastic.Markdown/Slices/Layout/_LandingPage.cshtml b/src/Elastic.Markdown/Slices/Layout/_LandingPage.cshtml
index d9e729800..27fc1c1cf 100644
--- a/src/Elastic.Markdown/Slices/Layout/_LandingPage.cshtml
+++ b/src/Elastic.Markdown/Slices/Layout/_LandingPage.cshtml
@@ -1,5 +1,5 @@
 @inherits RazorSlice<LayoutViewModel>
-<div class="w-full font-body text-ink relative text-pretty">
+<div class="w-full text-ink relative text-pretty">
 	<div class="w-full absolute top-0 left-0 right-0 htmx-indicator" id="htmx-indicator" role="status">
 		<div class="h-[2px] w-full overflow-hidden">
 			<div class="progress w-full h-full bg-pink-70 left-right"></div>
diff --git a/src/Elastic.Markdown/Slices/Layout/_PagesNav.cshtml b/src/Elastic.Markdown/Slices/Layout/_PagesNav.cshtml
index 5c1ebc0d8..43b34754b 100644
--- a/src/Elastic.Markdown/Slices/Layout/_PagesNav.cshtml
+++ b/src/Elastic.Markdown/Slices/Layout/_PagesNav.cshtml
@@ -1,5 +1,5 @@
 @inherits RazorSlice<LayoutViewModel>
-<aside class="sidebar bg-white fixed md:sticky shadow-2xl md:shadow-none left-[100%] group-has-[#pages-nav-hamburger:checked]/body:left-0 bottom-0 md:left-auto pl-6 md:pl-0 top-[calc(var(--offset-top)+1px)] w-[80%] md:w-auto shrink-0 border-r-1 border-r-grey-20 z-40 md:z-auto">
+<aside class="sidebar bg-white fixed md:sticky shadow-2xl md:shadow-none left-[100%] group-has-[#pages-nav-hamburger:checked]/body:left-0 bottom-0 md:left-auto pl-6 md:pl-2 top-[calc(var(--offset-top)+1px)] w-[80%] md:w-auto shrink-0 border-r-1 border-r-grey-20 z-40 md:z-auto">
 	<nav
 		id="pages-nav"
 		class="sidebar-nav h-full"
diff --git a/src/Elastic.Markdown/Slices/_Layout.cshtml b/src/Elastic.Markdown/Slices/_Layout.cshtml
index ecfa0f8d5..0838d11c0 100644
--- a/src/Elastic.Markdown/Slices/_Layout.cshtml
+++ b/src/Elastic.Markdown/Slices/_Layout.cshtml
@@ -23,15 +23,16 @@
 
 		private async Task DefaultLayout()
 		{
-			<div class="max-w-(--max-layout-width) w-full h-full grid px-6
+			<div class="max-w-(--max-layout-width) w-full h-full grid
 					grid-cols-1
 					md:grid-cols-[var(--max-sidebar-width)_1fr]
 					lg:grid-cols-[var(--max-sidebar-width)_1fr_var(--max-sidebar-width)]
 				">
 				@await RenderPartialAsync(_PagesNav.Create(Model))
-				<div class="justify-center px-6 grid
+				<div class="justify-center grid
 					grid-cols-1
-					lg:grid-cols-[1fr_clamp(40ch,80ch,100%)_1fr]
+					px-6 lg:px-0
+					lg:grid-cols-[1fr_var(--max-text-width)_1fr]
 					">
 					<div class="spacer"></div>
 					<main id="content-container" class="w-full flex flex-col relative pb-30 overflow-x-hidden">