diff --git a/README.md b/README.md
index aee8260..8c4ab24 100644
--- a/README.md
+++ b/README.md
@@ -117,6 +117,7 @@ summaryLength = 70  # number of words for article summaries
     enableSidebarLayout = false
     sidebarBackgroundColor = "#34363b"
     sidebarForegroundColor = "white"
+    tocInSidebar = false  # if the sidebar is enbabled, show the TOC in the sidebar
 
     # redirect to baseURL if current URL host doesn't match
     # useful if deploying in gitlab pages with custom domain and don't want
@@ -249,8 +250,21 @@ Every post can have various parameters in the frontmatter, here are some that yo
 - `comments`: boolean, if true it enables comments for the current post, if false it disables them (default is true)
 - `showDate`: boolean, true by default, if false hides the date. Useful for non-article pages where the date isn't important
 - `norss`: boolean, if set to true the page will be skipped in the rss feed
+- `toc`: boolean, if set to true a table of contents will be shown for the article
 
-## Generate icons
+## Table of contents settings
+
+You can tweak the TOC settings in your `config.toml`:
+
+```toml
+[markup]
+  [markup.tableOfContents]
+    endLevel = 5
+    ordered = false
+    startLevel = 1
+```
+
+# Generate icons
 
 It's best to use the provided `generate_icons.sh` script to generate all necessary icons for your website. This script requires ImageMagick, that you will need to install separately.
 
@@ -271,7 +285,7 @@ Finally, make sure to edit your config.toml to include the following:
     # ...
 ```
 
-## Inject custom content
+# Inject custom content
 
 Ficurinia supports injecting custom content into the theme. There are several files you can create in `layouts/partials/inject` that will be included inside the theme in different places.
 
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index e191aa9..26eae76 100644
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -137,7 +137,7 @@ table {
     font-size: .9em;
 }
 
-#pageNavigation, .nerdlink, nav {
+#pageNavigation, .nerdlink, nav:not(#TableOfContents) {
     a {
         border-bottom: none;
         &:hover {
@@ -482,7 +482,7 @@ ul.list {
     }
 }
 
-nav, #links {
+nav:not(#TableOfContents), #links {
     ul {
         list-style-type: none;
         display: flex;
@@ -507,7 +507,7 @@ header {
             justify-content: space-between;
         }
     }
-    nav {
+    nav:not(#TableOfContents) {
         font-size: .9em;
         ul {
             li {
@@ -638,7 +638,7 @@ header {
             padding: ($content_spacing / 4);
             align-self: center;
         }
-        nav {
+        nav:not(#TableOfContents) {
             ul#main-nav {
                 &, li, li a {text-shadow: none !important;}
                 display: none;
@@ -920,7 +920,7 @@ header.jumbotronContainer {
     }};
 
     header {
-        #sidebar_nav {
+        #sidebar_nav, .sidebarToc {
             display: none;
         }
         #wide_nav {
@@ -930,7 +930,7 @@ header.jumbotronContainer {
 
     @media only screen and (min-width: 950px) {
         html{{if .Site.Params.enableJumbotron}}:not(.home){{end}} {
-            overflow-y: hidden;
+            position: fixed; top: 0; bottom: 0; left: 0; right: 0;
             #baseContainer {
                 display: flex;
                 flex-direction: row;
@@ -957,7 +957,7 @@ header.jumbotronContainer {
                         display: block;
                         margin: 12px 0;
                         width: 100%;
-                        nav {
+                        nav:not(#TableOfContents) {
                             font-size: 1.1em;
                             ul#main-nav {
                                 flex-direction: column;
@@ -974,12 +974,26 @@ header.jumbotronContainer {
                     #wide_nav {
                         display: none;
                     }
+                    .sidebarToc {
+                        display: block;
+                        nav#TableOfContents {
+                            ul {
+                                padding-left: 24px;
+                                a:not(:hover) {
+                                    border-color: transparent;
+                                }
+                            }
+                        }
+                    }
                 }
                 #contentContainer {
                     flex-grow: 1;
                     overflow-y: auto;
                 }
             }
+            .articleToc {
+                display: none;
+            }
         }
     }
 
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 39b76f2..3c3315d 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -11,6 +11,10 @@
         {{ if .Params.Image }}
         <img src="{{ .Params.Image }}" alt="" />
         {{ end }}
+        <div class="articleToc">
+            {{ .TableOfContents }}
+            <hr />
+        </div>
         <div>{{ .Content }}</div>
     </article>
     {{ if .Params.tags }}
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 562f503..70d0c59 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -42,6 +42,12 @@
         <div id="sidebar_nav">
             {{- partial "header_navigation.html" . -}}
         </div>
+        {{ if and .IsPage .Params.toc }}
+            <div class="sidebarToc">
+                <hr />
+                {{ .TableOfContents }}
+            </div>
+        {{ end }}
     {{ end }}
     {{- partial "inject/header-after.html" . -}}
     {{- partial "jumbotron.html" . -}}