diff --git a/web/_includes/blognav.html b/web/_includes/blognav.html
index 0495843..2388d78 100644
--- a/web/_includes/blognav.html
+++ b/web/_includes/blognav.html
@@ -5,3 +5,4 @@
 {% if page.next %}
     <a class="nav-item nav-link" href="{{ page.next.url }}">⏭️ Next Post</a>
 {% endif %}
+{% include tocnavitem.html headers="h1, h2, h3, h4, h5, h6" %}
diff --git a/web/_includes/changelognav.html b/web/_includes/changelognav.html
new file mode 100644
index 0000000..a1f2a22
--- /dev/null
+++ b/web/_includes/changelognav.html
@@ -0,0 +1,2 @@
+<a class="nav-item nav-link" href="../../">🏠 Home</a>
+{% include tocnavitem.html headers="h2" %}
diff --git a/web/_includes/navbar.html b/web/_includes/navbar.html
index 7e1f324..9895970 100644
--- a/web/_includes/navbar.html
+++ b/web/_includes/navbar.html
@@ -39,10 +39,6 @@
                     });
                 </script>
             </span>
-
-            <script>
-                $(".navbar-collapse a").on("click", () => $(".navbar-collapse").collapse("hide"));
-            </script>
         </div>
     </div>
 </nav>
diff --git a/web/_includes/tocnavitem.html b/web/_includes/tocnavitem.html
new file mode 100644
index 0000000..a568764
--- /dev/null
+++ b/web/_includes/tocnavitem.html
@@ -0,0 +1,17 @@
+<div class="nav-item dropdown">
+    <a class="nav-link dropdown-toggle" type="button" data-toggle="dropdown">🧭 Navigation</a>
+    <div class="dropdown-menu">
+        <div id="navigator-content" style="height: auto; max-height: 50vh; overflow-y: scroll;"></div>
+        <script>
+            $(() => $("{{ include.headers }}").each((i, h) => {
+                console.log(h);
+                let offset = `${0.5 + Number(h.nodeName.substring(1)) - 1}rem`;
+                console.log(offset);
+                $("#navigator-content").append(`
+                    <a class="nav-item nav-link dropdown-item-text" href="#${h.id}" style="padding-left: ${offset}; white-space: nowrap;">
+                        ${h.innerText.trim()}
+                    </a>`);
+            }));
+        </script>
+    </div>
+</div>
diff --git a/web/changelog.html b/web/changelog.html
index b8a9443..5c8f6ca 100644
--- a/web/changelog.html
+++ b/web/changelog.html
@@ -1,6 +1,6 @@
 ---
 layout: default
-nav: basicnav.html
+nav: changelognav.html
 title: Tiny Life Changelog
 summary: The full changelog for Tiny Life
 ---
diff --git a/web/style.css b/web/style.css
index 82e6f64..5a041e5 100644
--- a/web/style.css
+++ b/web/style.css
@@ -256,7 +256,8 @@ h1:hover .anchor-heading, h2:hover .anchor-heading, h3:hover .anchor-heading, h4
     visibility: visible;
 }
 
-body.dark-mode {
+body.dark-mode,
+body.dark-mode .dropdown-menu {
     color: #d8d8d8;
     background-color: #1b1b1b;
 }