diff --git a/.eleventy.js b/.eleventy.js
index 6619667..63c063f 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -10,6 +10,10 @@ module.exports = (eleventyConfig) => {
     // Optional (default is set): If your site deploys to a subdirectory, change `pathPrefix`, for example with with GitHub pages
     pathPrefix: "/",
 
+    markdownTemplateEngine: "njk",
+    dataTemplateEngine: "njk",
+    htmlTemplateEngine: "njk",
+
     dir: {
       output: "dist",
       input: "src",
diff --git a/src/_includes/partials/footer.html b/src/_includes/partials/footer.html
new file mode 100644
index 0000000..b39ed1f
--- /dev/null
+++ b/src/_includes/partials/footer.html
@@ -0,0 +1 @@
+<footer>Footer.</footer>
diff --git a/src/_includes/partials/footer.njk b/src/_includes/partials/footer.njk
deleted file mode 100644
index c851f2a..0000000
--- a/src/_includes/partials/footer.njk
+++ /dev/null
@@ -1,3 +0,0 @@
-<footer class="site-foot">
-    Footer.
-</footer>
diff --git a/src/_includes/partials/header.html b/src/_includes/partials/header.html
new file mode 100644
index 0000000..8116894
--- /dev/null
+++ b/src/_includes/partials/header.html
@@ -0,0 +1 @@
+<header>{% include "partials/menu.html" %}</header>
diff --git a/src/_includes/partials/header.njk b/src/_includes/partials/header.njk
deleted file mode 100644
index df4f926..0000000
--- a/src/_includes/partials/header.njk
+++ /dev/null
@@ -1,3 +0,0 @@
-<header class="wrapper">
-  {% include "partials/menu.njk" %}
-</header>
diff --git a/src/_includes/partials/menu.njk b/src/_includes/partials/menu.html
similarity index 85%
rename from src/_includes/partials/menu.njk
rename to src/_includes/partials/menu.html
index 055f78f..6281e1b 100644
--- a/src/_includes/partials/menu.njk
+++ b/src/_includes/partials/menu.html
@@ -1,4 +1,4 @@
-<nav id="mainnav" class="navbar" aria-label="Main">
+<nav aria-label="Main">
   Menu.
   <ul>
     {% for item in navigation.top %}
diff --git a/src/_layouts/base.njk b/src/_layouts/base.html
similarity index 70%
rename from src/_layouts/base.njk
rename to src/_layouts/base.html
index 198ce8a..425001a 100644
--- a/src/_layouts/base.njk
+++ b/src/_layouts/base.html
@@ -10,8 +10,8 @@
   </head>
 
   <body>
-  {% include "partials/header.njk" %}
-    <main id="main" class="flow">{{ content | safe }}</main>
-  {% include "partials/footer.njk" %}
+    {% include "partials/header.html" %}
+    <main id="main" class="wrapper">{{ content | safe }}</main>
+    {% include "partials/footer.html" %}
   </body>
 </html>
diff --git a/src/assets/css/global.css b/src/assets/css/global.css
index 7c0407b..9550522 100644
--- a/src/assets/css/global.css
+++ b/src/assets/css/global.css
@@ -1,3 +1,5 @@
 @import "global/reset.css";
 
 @import "global/global-styles.css";
+
+@import-glob "utils/*.css";
diff --git a/src/assets/css/global/variables.css b/src/assets/css/global/variables.css
new file mode 100644
index 0000000..e32a219
--- /dev/null
+++ b/src/assets/css/global/variables.css
@@ -0,0 +1,5 @@
+/* Global variables */
+:root {
+  --transition-duration: 250ms;
+  --transition-timing: ease;
+}
diff --git a/src/assets/css/utils/wrapper.css b/src/assets/css/utils/wrapper.css
new file mode 100644
index 0000000..234f7d3
--- /dev/null
+++ b/src/assets/css/utils/wrapper.css
@@ -0,0 +1,15 @@
+/**
+ * WRAPPER
+ * Sets a max width, adds a consistent gutter and horizontally
+ * centers the contents
+ * https://piccalil.li/quick-tip/use-css-clamp-to-create-a-more-flexible-wrapper-utility/
+ */
+.wrapper {
+  width: 90vw;
+  width: clamp(16rem, 90vw, 70rem);
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  position: relative;
+}
diff --git a/src/data/helpers.js b/src/data/helpers.js
new file mode 100644
index 0000000..b5e01a1
--- /dev/null
+++ b/src/data/helpers.js
@@ -0,0 +1,75 @@
+/** © Andy Bell - https://buildexcellentwebsit.es/ */
+
+module.exports = {
+  /**
+   * Returns back some attributes based on wether the
+   * link is active or a parent of an active item
+   *
+   * @param {String} itemUrl The link in question
+   * @param {String} pageUrl The page context
+   * @returns {String} The attributes or empty
+   */
+  getLinkActiveState(itemUrl, pageUrl) {
+    let response = "";
+
+    if (itemUrl === pageUrl) {
+      response = ' aria-current="page"';
+    }
+
+    if (itemUrl.length > 1 && pageUrl.indexOf(itemUrl) === 0) {
+      response += ' data-state="active"';
+    }
+
+    return response;
+  },
+  /**
+   * Filters out the passed item from the passed collection
+   * and randomises and limits them based on flags
+   *
+   * @param {Array} collection The 11ty collection we want to take from
+   * @param {Object} item The item we want to exclude (often current page)
+   * @param {Number} limit=3 How many items we want back
+   * @param {Boolean} random=true Wether or not this should be randomised
+   * @returns {Array} The resulting collection
+   */
+  getSiblingContent(collection, item, limit = 3, random = true) {
+    let filteredItems = collection.filter((x) => x.url !== item.url);
+
+    if (random) {
+      let counter = filteredItems.length;
+
+      while (counter > 0) {
+        // Pick a random index
+        let index = Math.floor(Math.random() * counter);
+
+        counter--;
+
+        let temp = filteredItems[counter];
+
+        // Swap the last element with the random one
+        filteredItems[counter] = filteredItems[index];
+        filteredItems[index] = temp;
+      }
+    }
+
+    // Lastly, trim to length
+    if (limit > 0) {
+      filteredItems = filteredItems.slice(0, limit);
+    }
+
+    return filteredItems;
+  },
+
+  /**
+   * Take an array of keys and return back items that match.
+   * Note: items in the collection must have a key attribute in
+   * Front Matter
+   *
+   * @param {Array} collection 11ty collection
+   * @param {Array} keys collection of keys
+   * @returns {Array} result collection or empty
+   */
+  filterCollectionByKeys(collection, keys) {
+    return collection.filter((x) => keys.includes(x.data.key));
+  },
+};
