diff --git a/blog/static/css/main.css b/blog/static/css/main.css
index 74f058bd..7e04ef97 100644
--- a/blog/static/css/main.css
+++ b/blog/static/css/main.css
@@ -172,6 +172,10 @@ aside#all-posts-link {
 }
 
 @media (min-width: 80rem) {
+  #toc-inline {
+    display: none;
+  }
+
   #toc-aside {
     display: block;
     width: 12rem;
diff --git a/blog/templates/macros.html b/blog/templates/macros.html
index 0e6622da..85909670 100644
--- a/blog/templates/macros.html
+++ b/blog/templates/macros.html
@@ -17,3 +17,19 @@
         async>
     </script>
 {% endmacro utterances %}
+
+{% macro toc(page) %}
+    <details id = "toc-inline">
+        <summary><b>Table of Contents</b></summary>
+        <ul>
+            {% for h2 in page.toc %}<li>
+                <a href="#{{h2.id | safe}}">{{ h2.title | safe }}</a>
+                {% if h2.children %}<ul>
+                    {% for h3 in h2.children %}<li>
+                        <a href="#{{h3.id | safe}}">{{ h3.title | safe }}</a>
+                    </li>{% endfor %}
+                </ul>{% endif %}
+            </li>{% endfor %}
+        </ul>
+    </details>
+{% endmacro toc %}
diff --git a/blog/templates/second-edition/page.html b/blog/templates/second-edition/page.html
index 99f02bda..822f31ca 100644
--- a/blog/templates/second-edition/page.html
+++ b/blog/templates/second-edition/page.html
@@ -34,7 +34,7 @@
             </li>{% endfor %}
         </ol>
     </aside>
-    {{ page.content | safe }}
+    {{ page.content | safe | replace(from="<!-- toc -->", to=macros::toc(page=page))}}
 
     <div class="post-footer-support">
         <h2>Support Me</h2>