diff --git a/src/Elastic.Documentation.Site/Assets/styles.css b/src/Elastic.Documentation.Site/Assets/styles.css
index 19544e485..89e17cf43 100644
--- a/src/Elastic.Documentation.Site/Assets/styles.css
+++ b/src/Elastic.Documentation.Site/Assets/styles.css
@@ -108,8 +108,8 @@ body {
 
 	.sidebar {
 		.sidebar-nav {
-			@apply sticky top-(--offset-top) overflow-y-auto;
-			max-height: calc(100vh - var(--offset-top));
+			@apply sticky top-0 z-30 overflow-y-auto;
+			max-height: 100vh;
 			scrollbar-gutter: stable;
 			transition:
 				top 0.3s ease,
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/NavigationSearch/NavigationSearch.tsx b/src/Elastic.Documentation.Site/Assets/web-components/NavigationSearch/NavigationSearch.tsx
index 621e63801..7db21cd79 100644
--- a/src/Elastic.Documentation.Site/Assets/web-components/NavigationSearch/NavigationSearch.tsx
+++ b/src/Elastic.Documentation.Site/Assets/web-components/NavigationSearch/NavigationSearch.tsx
@@ -138,7 +138,7 @@ export const NavigationSearch = () => {
         <div
             className="sticky top-0"
             css={css`
-                padding-top: ${euiTheme.size.base};
+                padding-top: ${euiTheme.size.l};
                 padding-right: ${euiTheme.size.base};
             `}
         >
diff --git a/src/Elastic.Documentation.Site/Layout/_AssemblerHeader.cshtml b/src/Elastic.Documentation.Site/Layout/_AssemblerHeader.cshtml
index 84b45bbff..a14cbeba1 100644
--- a/src/Elastic.Documentation.Site/Layout/_AssemblerHeader.cshtml
+++ b/src/Elastic.Documentation.Site/Layout/_AssemblerHeader.cshtml
@@ -3,8 +3,8 @@
 	<div id="elastic-nav" hx-disable="true"></div>
 	@{
 		var elasticNavUrl = Model.Features.StagingElasticNavEnabled
-			? "https://stag-www.elastic.co/elastic-nav.js"
-			: "https://www.elastic.co/elastic-nav.js";
+			? "https://www-elastic-co-pr-3017.app.elstc.co/elastic-nav.js"
+			: "https://www-elastic-co-pr-3017.app.elstc.co/elastic-nav.js";
 	}
 	<script src="@elasticNavUrl" async></script>
 </div>
diff --git a/src/Elastic.Documentation.Site/Layout/_Header.cshtml b/src/Elastic.Documentation.Site/Layout/_Header.cshtml
new file mode 100644
index 000000000..d2df6201f
--- /dev/null
+++ b/src/Elastic.Documentation.Site/Layout/_Header.cshtml
@@ -0,0 +1,31 @@
+@inherits RazorSlice<Elastic.Documentation.Site.GlobalLayoutViewModel>
+@if (Model.Features.PrimaryNavEnabled)
+{
+	<div id="elastic-nav-wrapper">
+		<div id="elastic-nav" hx-disable="true"></div>
+		@{
+			var elasticNavUrl = Model.Features.StagingElasticNavEnabled 
+				? "https://www-elastic-co-pr-3017.app.elstc.co/elastic-nav.js"
+				: "https://www-elastic-co-pr-3017.app.elstc.co/elastic-nav.js";
+		}
+		<script src="@elasticNavUrl" async></script>
+	</div>
+ 	@await RenderPartialAsync(_SecondaryNav.Create(Model))
+}
+else
+{
+	<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">
+				<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-8">
+					<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 text-lg font-semibold px-4">
+				<img src="@Model.Static("logo-elastic-glyph-color.svg")" alt="" width="32" height="32">
+				@Model.DocSetName
+			</a>
+		</div>
+	</header>
+}