diff --git a/src/Elastic.Documentation.Site/Navigation/_TocTreeNav.cshtml b/src/Elastic.Documentation.Site/Navigation/_TocTreeNav.cshtml
index fefab98fa..213016686 100644
--- a/src/Elastic.Documentation.Site/Navigation/_TocTreeNav.cshtml
+++ b/src/Elastic.Documentation.Site/Navigation/_TocTreeNav.cshtml
@@ -25,12 +25,12 @@
 	{
 		var g = folder;
 		var allHidden = folder.NavigationItems.All(n => n.Hidden);
-		<li class="flex flex-wrap group-navigation @(isTopLevel ? "mt-6" : "mt-4")">
+		<li class="flex flex-wrap group-navigation @(isTopLevel ? "mt-6" : "mt-4") relative">
 			<div class="peer grid grid-cols-[1fr_auto] w-full">
 				<a
 					href="@(g.Url)"
 					@Htmx.GetNavHxAttributes(Model.IsPrimaryNavEnabled && g.NavigationRoot.Id == Model.RootNavigationId || true)
-					class="sidebar-link pr-2 content-center @(isTopLevel ? "font-semibold" : "")">
+					class="sidebar-link pr-2 content-center @(isTopLevel ? "font-semibold" : "") group-[.current]/li:text-blue-elastic!">
 					@(g.NavigationTitle)
 				</a>
 				@if (!allHidden)
@@ -60,7 +60,7 @@
 				// Only render children if we're within the allowed level depth
 				// MaxLevel of -1 means render all levels
 				bool shouldRenderChildren = Model.MaxLevel == -1 || Model.Level < (Model.MaxLevel);
-				<ul class="w-full hidden peer-has-checked:block ml-4">
+				<ul class="w-full hidden peer-has-checked:block ml-4 relative before:content-[''] before:absolute before:-left-[calc(var(--spacing)*4-1px)] before:top-0 before:bottom-0 before:w-px before:bg-grey-20 before:peer-has-checked:block peer-has-[.current]:before:bg-grey-40 has-[.current]:before:bg-grey-40">
 					@if (shouldRenderChildren)
 					{
 						@await RenderPartialAsync(_TocTreeNav.Create(new NavigationTreeItem