diff --git a/README.md b/README.md
index 1a60bc6..f91be65 100644
--- a/README.md
+++ b/README.md
@@ -28,6 +28,7 @@ I can *promise* you that there is no malicious code or dependency in this projec
 The project depends on the following packages (installed when you ran `npm i`):
 * express (a web server framework)
 * nunjucks (a templating engine)
+* nunjucks-append (an extension that adds more functionality to nunjucks)
 * chokidar (reload templates if they change on disk)
 * fs (used for filesystem operations)
 
diff --git a/content/components/toc.njk b/content/components/toc.njk
index 86aefe7..5ab3288 100644
--- a/content/components/toc.njk
+++ b/content/components/toc.njk
@@ -1,19 +1,9 @@
-{% macro header(size, text, tocList) %}
-    {% set tocList = (tocList.push([size, text]), tocList) %}
-    <a name="{{ text | replace(" ", "-") }}"></a>
+{% macro header(size, text) %}
+    {% append "toc" %}
+    <a name="{{ text | replace(" ", "-") }}" class="toc-{{ size }}">{{ text }}</a>
+    {% endappend %}
+
     <{{ size }}>
         {{ text }}
     </{{ size }}>
-{% endmacro %}
-
-{% macro generate(tocList) %}
-    <div class="toc-container">
-        <div class="toc">
-            <p class="toc-title">Table of Contents</p>
-
-            {% for size, text in tocList %}
-                <a href="#{{ text | replace(" ", "-") }}" class="toc-{{ size }}">{{ text }}</a>
-            {% endfor %}
-        </div>
-    </div>
 {% endmacro %}
\ No newline at end of file
diff --git a/content/pages/article/how-to.njk b/content/pages/article/how-to.njk
index 6cbc6b6..c92e133 100644
--- a/content/pages/article/how-to.njk
+++ b/content/pages/article/how-to.njk
@@ -5,8 +5,13 @@
     How to - Article template
 {% endblock %}
 
+{% block toc %}
+    {% output "toc" %}{% endoutput %}
+{% endblock %}
+
 {% block body %}
     <div class="content">
+
         {{ toc.header("h1", "Introduction", tocList) }}
         <p>
             I want to start off by saying that this article template (as of now) is really fricking shit.
@@ -98,5 +103,4 @@
         </code>
     </div>
 
-    {{ toc.generate(tocList) }}
 {% endblock %}
\ No newline at end of file
diff --git a/content/templates/article.njk b/content/templates/article.njk
index 1806434..8677795 100644
--- a/content/templates/article.njk
+++ b/content/templates/article.njk
@@ -8,13 +8,18 @@
     {% endblock %}
 </head>
 <body>
-    {% set tocList = [] %}
-
     <article>
         <header>
             {% block header %}{% endblock %}
         </header>
 
+        <div class="toc-container">
+            <div class="toc">
+                <p class="toc-title">Table of Contents</p>
+                {% block toc %}{% endblock %}
+            </div>
+        </div>
+
         {% block body %}{% endblock %}
     </article>
 </body>
diff --git a/index.js b/index.js
index 40c0a3f..28d1301 100644
--- a/index.js
+++ b/index.js
@@ -1,5 +1,6 @@
 import express from 'express'
 import njk from 'nunjucks'
+import njkAppend from 'nunjucks-append'
 import fs from 'fs'
 
 
@@ -13,10 +14,10 @@ const Server = express()
 
 Server.use('/assets', express.static(Config.assetsDir))
 
-njk.configure(
+const njkEnv = njk.configure(
     Config.contentDir,
     {
-        autoescape: true,
+        autoescape: false,
         watch: true,
         trimBlocks: true,
         lstripBlocks: true,
@@ -24,6 +25,7 @@ njk.configure(
     }
 )
 
+njkAppend.initialise(njkEnv)
 
 
 Server.get(
diff --git a/package.json b/package.json
index aab67b7..f4cbd00 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
   "dependencies": {
     "chokidar": "^3.5.2",
     "express": "^4.17.1",
-    "nunjucks": "^3.2.3"
+    "nunjucks": "^3.2.3",
+    "nunjucks-append": "^0.0.3"
   }
 }
