diff --git a/src/Elastic.Markdown/Assets/pages-nav.ts b/src/Elastic.Markdown/Assets/pages-nav.ts
index ff9df8073..5686256f2 100644
--- a/src/Elastic.Markdown/Assets/pages-nav.ts
+++ b/src/Elastic.Markdown/Assets/pages-nav.ts
@@ -1,4 +1,8 @@
 import {$, $$} from "select-dom";
+import {initHighlight} from "./hljs";
+import {initCopyButton} from "./copybutton";
+import {initTabs} from "./tabs";
+import {initTocNav} from "./toc-nav";
 
 type NavExpandState = {
 	current:string,
@@ -109,6 +113,34 @@ export function initNav() {
 		keepNavStateCallback();
 		keepNavPositionCallback();
 	}, true);
+	
+	$$('a', pagesNav).forEach(a => {
+		a.addEventListener('click', (e) => {
+			e.preventDefault();
+			history.pushState(null, '', a.href);
+			const markdownContentContainer = $('.markdown-content');
+			markdownContentContainer.innerHTML = 'loading...';
+			const url = a.href;
+			fetch(url)
+				.then(response => response.text())
+				.then(text => {
+					const doc = new DOMParser().parseFromString(text, 'text/html')
+					const markdownContent = $('.markdown-content', doc);
+					const toc = $('#toc-nav', doc);
+					const tocContainer = $('#toc-nav');
+					if (toc && tocContainer) {
+						tocContainer.innerHTML = toc.innerHTML;
+					}
+					if (markdownContent && markdownContentContainer) {
+						markdownContentContainer.innerHTML = markdownContent.innerHTML;
+						initHighlight();
+						initCopyButton();
+						initTabs();
+						initTocNav();
+					}
+				});
+		});
+	});
 }
 
 initNav();
diff --git a/src/Elastic.Markdown/Slices/Layout/_PagesNav.cshtml b/src/Elastic.Markdown/Slices/Layout/_PagesNav.cshtml
index 52d8ed4db..85df8310d 100644
--- a/src/Elastic.Markdown/Slices/Layout/_PagesNav.cshtml
+++ b/src/Elastic.Markdown/Slices/Layout/_PagesNav.cshtml
@@ -5,7 +5,6 @@
 	     data-current-page-parent-ids="@(string.Join(",",Model.ParentIds))"
 	     @* used to invalidate session storage *@
 	     data-current-navigation="@LayoutViewModel.CurrentNavigationId">
-
 		@(new HtmlString(Model.NavigationHtml))
 	</nav>
 	<script src="@Model.Static("pages-nav.js")"></script>
diff --git a/src/Elastic.Markdown/Slices/Layout/_TocTree.cshtml b/src/Elastic.Markdown/Slices/Layout/_TocTree.cshtml
index 01de18781..8e837e00d 100644
--- a/src/Elastic.Markdown/Slices/Layout/_TocTree.cshtml
+++ b/src/Elastic.Markdown/Slices/Layout/_TocTree.cshtml
@@ -1,7 +1,7 @@
 @inherits RazorSlice<NavigationViewModel>
 <div class="pt-6 pb-20">
 	<div class="font-bold">Elastic Docs</div>
-	<ul class="block w-full">
+	<ul class="block">
 		@await RenderPartialAsync(_TocTreeNav.Create(new NavigationTreeItem
 		{
 			Level = Model.Tree.Depth,