diff --git a/layouts/compliance/list.html b/layouts/compliance/list.html
index 4911f90f..3f7e07a8 100644
--- a/layouts/compliance/list.html
+++ b/layouts/compliance/list.html
@@ -26,7 +26,7 @@
             <div class="container">
 
                 <div class="row">
-                    {{ if isset .Params "toc" }}
+                    {{ if .Params.toc }}
                     <div class="col-md-9">
                     {{ else }}
                     <div class="col-md-12">
@@ -37,16 +37,9 @@
                         </div>
 
                     </div>
-                    {{ if isset .Params "toc" }}
-                    <div class="col-md-3">
-                        <div class="panel sidebar-menu">
-                            <div class="panel-heading">
-                                <h3 class="panel-title">Table of Content</h3>
-                            </div>
-                            <div class="panel-body">
-                                {{ .TableOfContents }}
-                            </div>
-                        </div>
+                    {{ if .Params.toc }}
+                    <div class="col-md-3 page-toc-column">
+                        {{ partial "table-of-contents.html" . }}
                     </div>
                     {{ end }}
 
diff --git a/layouts/page/single.html b/layouts/page/single.html
index 4911f90f..3f7e07a8 100644
--- a/layouts/page/single.html
+++ b/layouts/page/single.html
@@ -26,7 +26,7 @@
             <div class="container">
 
                 <div class="row">
-                    {{ if isset .Params "toc" }}
+                    {{ if .Params.toc }}
                     <div class="col-md-9">
                     {{ else }}
                     <div class="col-md-12">
@@ -37,16 +37,9 @@
                         </div>
 
                     </div>
-                    {{ if isset .Params "toc" }}
-                    <div class="col-md-3">
-                        <div class="panel sidebar-menu">
-                            <div class="panel-heading">
-                                <h3 class="panel-title">Table of Content</h3>
-                            </div>
-                            <div class="panel-body">
-                                {{ .TableOfContents }}
-                            </div>
-                        </div>
+                    {{ if .Params.toc }}
+                    <div class="col-md-3 page-toc-column">
+                        {{ partial "table-of-contents.html" . }}
                     </div>
                     {{ end }}
 
diff --git a/layouts/partials/table-of-contents.html b/layouts/partials/table-of-contents.html
new file mode 100644
index 00000000..61ba8ad2
--- /dev/null
+++ b/layouts/partials/table-of-contents.html
@@ -0,0 +1,9 @@
+<aside class="page-toc" aria-labelledby="page-toc-title">
+    <div class="page-toc__heading">
+        <span class="page-toc__eyebrow">Navigate</span>
+        <h2 id="page-toc-title">On this page</h2>
+    </div>
+    <div class="page-toc__content">
+        {{ .TableOfContents }}
+    </div>
+</aside>
diff --git a/static/css/custom.css b/static/css/custom.css
index f98e59de..551c74a0 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -505,6 +505,98 @@ h3.text-uppercase {
     overflow: hidden;
 }
 
+/* In-page navigation */
+.page-toc {
+    background: var(--surface);
+    border: 1px solid var(--line);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-sm);
+    overflow: hidden;
+    position: sticky;
+    top: 104px;
+}
+
+.page-toc__heading {
+    border-bottom: 1px solid var(--line);
+    padding: 20px 22px 17px;
+    position: relative;
+}
+
+.page-toc__heading::after {
+    background: var(--primary-accent);
+    border-radius: 99px;
+    bottom: -2px;
+    content: "";
+    height: 3px;
+    left: 22px;
+    position: absolute;
+    width: 44px;
+}
+
+.page-toc__eyebrow {
+    color: var(--ink-muted);
+    display: block;
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.12em;
+    margin-bottom: 3px;
+    text-transform: uppercase;
+}
+
+#content .page-toc__heading h2 {
+    font-size: 18px;
+    letter-spacing: -0.01em;
+    margin: 0;
+}
+
+.page-toc__content {
+    font-size: 14px;
+    line-height: 1.45;
+    max-height: calc(100vh - 220px);
+    overflow-y: auto;
+    padding: 12px 10px 14px;
+}
+
+.page-toc nav > ul,
+.page-toc nav > ol {
+    margin: 0;
+}
+
+.page-toc ul,
+.page-toc ol {
+    list-style: none;
+    padding-left: 0;
+}
+
+.page-toc li {
+    margin: 2px 0;
+}
+
+.page-toc li li {
+    border-left: 1px solid var(--line);
+    margin-left: 13px;
+    padding-left: 9px;
+}
+
+.page-toc a {
+    border-radius: 7px;
+    color: #3d505b;
+    display: block;
+    overflow-wrap: anywhere;
+    padding: 7px 10px;
+    text-decoration: none;
+}
+
+.page-toc a:hover,
+.page-toc a:focus {
+    background: var(--primary-accent-light);
+    color: var(--primary-accent-dark);
+}
+
+#content :is(h2, h3, h4, h5, h6)[id] {
+    scroll-margin-top: 110px;
+}
+
 /* Footer */
 #footer {
     background: #102633;
@@ -584,6 +676,15 @@ ul ul {
     .box-simple {
         min-height: 0;
     }
+
+    .page-toc {
+        margin-top: 36px;
+        position: static;
+    }
+
+    .page-toc__content {
+        max-height: none;
+    }
 }
 
 @media (max-width: 767px) {