diff --git a/assets/static/css/bcarlin.css b/assets/static/css/bcarlin.css
index b00a9f7..f3f1961 100644
--- a/assets/static/css/bcarlin.css
+++ b/assets/static/css/bcarlin.css
@@ -266,6 +266,43 @@ main {
       }
     }
 
+    section.table-of-contents {
+      font-size: 0.9em;
+      margin-block-end: 2em;
+      margin-inline-start: 1em;
+      padding-inline-start: 1em;
+      border-inline-start: 1px solid var(--pico-muted-color);
+
+
+      p {
+        margin-bottom: 0; /* reset pico styles */
+        margin-block-end: 0.2em;
+        font-weight: bold;
+      }
+
+      nav {
+        ol {
+          &:last-of-type {
+            margin-right: initial; /* reset pico styles */
+          }
+
+          &:first-of-type {
+            margin-left: initial; /* reset pico styles */
+          }
+          
+          li {
+            display: list-item; /* reset pico styles */
+            padding: initial; /* reset pico styles */
+            list-style-type: none;
+
+            ol {
+              margin-inline-start: 1em !important;
+            }
+          }
+        }
+      }
+    }
+
     ul > li {
       list-style-type: disc;
     }
diff --git a/config/_default/hugo.yaml b/config/_default/hugo.yaml
index 3427092..d015ad6 100644
--- a/config/_default/hugo.yaml
+++ b/config/_default/hugo.yaml
@@ -41,3 +41,5 @@ markup:
   goldmark:
     parser:
       wrapStandAloneImageWithinParagraph: false
+  tableOfContents:
+    ordered: true
diff --git a/i18n/en.yaml b/i18n/en.yaml
index e886410..2b3a6c2 100644
--- a/i18n/en.yaml
+++ b/i18n/en.yaml
@@ -18,3 +18,4 @@ tags: Tags
 information_icon: Information icon
 warning_icon: Warning icon
 also_available_in: "Also available in:"
+table_of_contents: "Contents:"
diff --git a/i18n/fr.yaml b/i18n/fr.yaml
index acb8a4d..8225ca2 100644
--- a/i18n/fr.yaml
+++ b/i18n/fr.yaml
@@ -18,3 +18,4 @@ tags: Tags
 information_icon: Icône information
 warning_icon: Icône attention
 also_available_in: "Également disponible en :"
+table_of_contents: "Contenu :"
diff --git a/layouts/blog/single.html b/layouts/blog/single.html
index e7933c4..6c9a8fe 100644
--- a/layouts/blog/single.html
+++ b/layouts/blog/single.html
@@ -23,6 +23,16 @@
       </div>
     </header>
 
+    
+    {{ with .TableOfContents }}
+    {{- if ne . `<nav id="TableOfContents"></nav>` }}
+    <section class="table-of-contents">
+      <p>{{ T "table_of_contents" }}</p>
+      {{ . }}
+    </section>
+    {{- end }}
+    {{- end }}
+
     <section class="e-content">
       {{ .Content }}
     </section>