diff --git a/site/assets/scss/_toc.scss b/site/assets/scss/_toc.scss
index 596945628e7c..3e09e50b260a 100644
--- a/site/assets/scss/_toc.scss
+++ b/site/assets/scss/_toc.scss
@@ -13,25 +13,24 @@
   nav {
     @include font-size(.875rem);
 
-    ul {
-      padding-left: 0;
-      list-style: none;
-
-      ul {
-        padding-left: 1rem;
-        margin-top: .25rem;
-      }
+    ul ul {
+      padding-left: 1rem;
+      margin-top: .25rem;
     }
 
     li {
       margin-bottom: .25rem;
+
+      > .nav-link.active {
+        background-color: $bd-purple-light;
+      }
     }
 
     a {
       color: inherit;
 
-      &:not(:hover) {
-        text-decoration: none;
+      &:hover:not(.active) {
+        text-decoration: underline;
       }
 
       code {
diff --git a/site/layouts/_default/docs.html b/site/layouts/_default/docs.html
index dd063c5dc8a8..3428ecaa2128 100644
--- a/site/layouts/_default/docs.html
+++ b/site/layouts/_default/docs.html
@@ -1,3 +1,4 @@
+{{ define "body_override" }}<body data-bs-spy="scroll" data-bs-offset="30" tabindex="0" data-bs-target="#TableOfContents">{{ end }}
 {{ define "main" }}
   {{ partial "docs-subnav" . }}
 
@@ -19,7 +20,7 @@ <h1 class="bd-title" id="content">{{ .Title | markdownify }}</h1>
       {{ if (eq .Page.Params.toc true) }}
         <div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
           <strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
-          {{ .TableOfContents }}
+          {{ .Page.TableOfContents  | replaceRE "(<li>)" "<li class=\"nav-item\">"  | replaceRE "(<ul>)" "<ul class=\"nav nav-pills flex-column\">" | replaceRE "(?s:href)" "class=\"nav-link py-0 px-1\" href" |  safeHTML }}
         </div>
       {{ end }}
 
