diff --git a/config.toml b/config.toml
index 6e2f30f..feff6a2 100644
--- a/config.toml
+++ b/config.toml
@@ -5,3 +5,9 @@ theme = "vanilla"
 pygmentsCodeFences = true
 pygmentsStyle = "github"
 summaryLength = 20
+
+[markup]
+  [markup.tableOfContents]
+    endLevel = 4
+    ordered = false
+    startLevel = 3
diff --git a/themes/vanilla/assets/scss/style.scss b/themes/vanilla/assets/scss/style.scss
index 46899e1..857af4c 100755
--- a/themes/vanilla/assets/scss/style.scss
+++ b/themes/vanilla/assets/scss/style.scss
@@ -231,3 +231,41 @@ figure {
         text-align: center;
     }
 }
+
+.table-of-contents {
+    @include margin-content;
+    @include margin-content-left;
+    display: flex;
+    flex-direction: column;
+    align-items: end;
+
+    em {
+        font-style: normal;
+        font-weight: bold;
+        font-size: 1.2em;
+        display: block;
+        margin-bottom: 1rem;
+    }
+
+    #TableOfContents > ul {
+        padding-left: 0;
+    }
+
+    nav {
+        width: auto;
+    }
+
+    ul {
+        position: relative;
+        list-style: none;
+        padding-left: 2rem;
+    }
+
+    li {
+        position: relative;
+    }
+
+    a {
+        padding: 0;
+    }
+}
diff --git a/themes/vanilla/layouts/blog/single.html b/themes/vanilla/layouts/blog/single.html
index 3a38290..9991c25 100644
--- a/themes/vanilla/layouts/blog/single.html
+++ b/themes/vanilla/layouts/blog/single.html
@@ -10,6 +10,12 @@
 </div>
 
 <div class="post-content">
+    <div class="table-of-contents">
+        <div>
+            <em>Table of Contents</em>
+            {{ .TableOfContents }}
+        </div>
+    </div>
     {{ .Content }}
 </div>
 {{ end }}