diff --git a/.gitignore b/.gitignore
new file mode 100644
index 00000000..af5c7297
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,7 @@
+.DS_Store
+logs
+*.logs
+npm-debug.log*
+node_modules
+.npm
+.env
\ No newline at end of file
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 00000000..dc42c6ac
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1 @@
+views/
\ No newline at end of file
diff --git a/README.md b/README.md
index 74859d8e..c9ecf9df 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 > _Fork_ deze leertaak en ga aan de slag. Onderstaande outline ga je gedurende deze taak in jouw eigen GitHub omgeving uitwerken. De instructie vind je in: [docs/INSTRUCTIONS.md](docs/INSTRUCTIONS.md)
 
-# Titel
+# Visual Thinking in het HBO
 <!-- Geef je project een titel en schrijf in één zin wat het is -->
 
 ## Inhoudsopgave
@@ -23,9 +23,31 @@
 ## Kenmerken
 <!-- Bij Kenmerken staat welke technieken zijn gebruikt en hoe. Wat is de HTML structuur? Wat zijn de belangrijkste dingen in CSS? Wat is er met JS gedaan en hoe? Misschien heb je iets met NodeJS gedaan, of heb je een framwork of library gebruikt? -->
 
+### tools 🍔
+- figma
+- goodnotes
+- visuel studio code
+- polyplane
+
+### gebruikte technieken 🍟
+- ejs
+- javascript
+- node.js
+- express
+- css
+
+
 ## Installatie
 <!-- Bij Instalatie staat hoe een andere developer aan jouw repo kan werken -->
 
+1. Om in de repository te werken en aanpassingen te maken moet je node.js downloaden versie: .
+2. Clone of download deze respository.
+3. Open hem in je `code-editor`.
+4. open de `terminal` en type `npm install`.
+5. Daarna door gerbruik van `npm start` krijg je een localhost link waar je de code live 
+6. gebruik `gitignore` voor de modules zodat het niet allemaal op github komt te staan.
+7. Live zetten van je project kan met behulp van cyclic.
+
 ## Bronnen
 
 ## Licentie
diff --git a/index.js b/index.js
new file mode 100644
index 00000000..e5601d32
--- /dev/null
+++ b/index.js
@@ -0,0 +1,144 @@
+// Import necesssary express and ejs modules
+import { render } from "ejs";
+import express, { response } from "express";
+
+// Create a new express instance
+const app = express();
+
+// Assign URL of API to variable
+const url = "https://api.visualthinking.fdnd.nl/api/v1";
+
+// Make EJS the selected view engine for our express app, and assign the views directory
+app.set("view engine", "ejs");
+app.set("views", "./views");
+
+// Let express know we want to use JSON and URL-encoded request bodies
+app.use(express.json());
+app.use(express.urlencoded({ extended: true }));
+
+// Use map "public" to serve static files
+app.use(express.static("public"));
+
+// --- Rendering the index page: ---
+app.get("/", (request, response) => {
+  response.render("index");
+});
+
+// --- Rendering the overview page: ---
+// Define an HTTP GET route for the path '/overviewpage'
+app.get("/overviewpage", (request, response) => {
+  // Log the value of the 'methods' parameter from the request's query string
+  console.log(request.query.methods);
+
+  // Define the URL to fetch the data from
+  const methodsUrl = url + "/methods?first=100";
+
+  // Use the fetchJson function to retrieve data from the specified URL
+  // Once the data is retrieved, render the 'overviewpage' view with the data
+  fetchJson(methodsUrl).then((data) => {
+    response.render("overviewpage", data);
+  });
+});
+
+// --- Rendering the detail page: ---
+// Define an HTTP GET route for the path '/detailpage/:slug', where ':slug' is a URL parameter
+app.get("/detailpage/:slug", (request, response) => {
+  // Construct the URL to fetch the detail page data from based on the URL parameter ':slug'
+  let detailPageUrl = url + "/method/" + request.params.slug;
+  // Construct the URL to fetch the comments page data from based on the query parameter 'id'
+  let commentsPageUrl = url + "/comments/?id=" + request.query.id;
+
+  // Log the constructed URL for the comments page
+  // console.log(commentsPageUrl);
+
+  const id = request.query.id;
+
+  // Use the fetchJson function to retrieve the data for the detail page
+  fetchJson(detailPageUrl).then((data) => {
+    // Use the fetchJson function to retrieve the data for the comments page
+    fetchJson(commentsPageUrl).then((data2) => {
+      // Combine the data from both responses into a single object
+      const combinedData = {
+        method: data.method, // Data from the detail page
+        comments: data2.comments, // Data from the comments page
+      };
+
+      // Log the combined data
+      // console.log(combinedData);
+
+      // Render the 'detailpage' view with the combined data
+      response.render("detailpage", combinedData);
+    });
+  });
+});
+
+// --- Handling post requests for the comments: ---
+// Define an HTTP POST route for the path '/detailpagina/:slug', where ':slug' is a URL parameter
+app.post("/detailpage/:slug", (request, response) => {
+  // Define the URLS we will use to post the comment data to
+  const baseurl = "https://api.visualthinking.fdnd.nl/api/v1/";
+  const url = `${baseurl}comments`;
+  // Construct the URL to fetch the comments page data from based on the query parameter 'id'
+  const commentUrl = `${baseurl}comments` + "?id=" + request.query.id;
+
+  // Log the request body (the data submitted by the user)
+  console.log("verstuurd:");
+  console.log(request.body);
+
+  // Use the postJson function to post the comment data to the specified URL
+  postJson(url, request.body).then((data) => {
+    // Create a copy of the request body
+    let newComment = { ...request.body };
+
+    // Log the response data from the API
+    console.log("ontvangen:");
+    console.log(data);
+
+    // Check if the comment was successfully posted
+    if (data.success) {
+      // If the comment was successfully posted, redirect to the detail page with a success message
+      response.redirect(
+        "/detailpage/" + request.params.slug + "?methodPosted=true"
+      );
+    } else {
+      // If the comment was not successfully posted, redirect to the detail page with an error message
+      response.redirect(
+        "/detailpage/" + request.params.slug + "?methodPosted=false"
+      );
+    }
+  });
+});
+
+// Stel het poortnummer in waar express op gaat luisteren
+app.set("port", process.env.PORT || 8000);
+
+// Start express op, haal het ingestelde poortnummer op
+app.listen(app.get("port"), function () {
+  // Toon een bericht in de console en geef het poortnummer door
+  console.log(`Application started on http://localhost:${app.get("port")}`);
+});
+
+/**
+ * Wraps the fetch api and returns the response body parsed through json
+ * @param {*} url the api endpoint to address
+ * @returns the json response from the api endpoint
+ */
+
+async function fetchJson(url) {
+  return await fetch(url)
+    .then((response) => response.json())
+    .catch((error) => error);
+}
+
+// post json
+
+export async function postJson(url, body) {
+  return await fetch(url, {
+    method: "post",
+    body: JSON.stringify(body),
+    headers: { "Content-Type": "application/json" },
+  })
+    .then((response) => response.json())
+    .catch((error) => error);
+}
+
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 00000000..64e1235d
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,759 @@
+{
+  "name": "server-side-rendering",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "server-side-rendering",
+      "version": "1.0.0",
+      "license": "GPL-3.0",
+      "dependencies": {
+        "dotenv": "^16.0.3",
+        "ejs": "^3.1.8",
+        "express": "^4.18.2"
+      }
+    },
+    "node_modules/accepts": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
+      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
+      "dependencies": {
+        "mime-types": "~2.1.34",
+        "negotiator": "0.6.3"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/array-flatten": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
+      "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg=="
+    },
+    "node_modules/async": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.4.tgz",
+      "integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ=="
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
+    },
+    "node_modules/body-parser": {
+      "version": "1.20.1",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz",
+      "integrity": "sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==",
+      "dependencies": {
+        "bytes": "3.1.2",
+        "content-type": "~1.0.4",
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
+        "http-errors": "2.0.0",
+        "iconv-lite": "0.4.24",
+        "on-finished": "2.4.1",
+        "qs": "6.11.0",
+        "raw-body": "2.5.1",
+        "type-is": "~1.6.18",
+        "unpipe": "1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8",
+        "npm": "1.2.8000 || >= 1.4.16"
+      }
+    },
+    "node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/bytes": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/call-bind": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
+      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "dependencies": {
+        "function-bind": "^1.1.1",
+        "get-intrinsic": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
+    },
+    "node_modules/content-disposition": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
+      "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
+      "dependencies": {
+        "safe-buffer": "5.2.1"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/content-type": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
+      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cookie": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
+      "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cookie-signature": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
+      "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
+    },
+    "node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/depd": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/destroy": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
+      "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
+      "engines": {
+        "node": ">= 0.8",
+        "npm": "1.2.8000 || >= 1.4.16"
+      }
+    },
+    "node_modules/dotenv": {
+      "version": "16.0.3",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.3.tgz",
+      "integrity": "sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
+    },
+    "node_modules/ejs": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.8.tgz",
+      "integrity": "sha512-/sXZeMlhS0ArkfX2Aw780gJzXSMPnKjtspYZv+f3NiKLlubezAHDU5+9xz6gd3/NhG3txQCo6xlglmTS+oTGEQ==",
+      "dependencies": {
+        "jake": "^10.8.5"
+      },
+      "bin": {
+        "ejs": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
+    },
+    "node_modules/etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/express": {
+      "version": "4.18.2",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
+      "integrity": "sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==",
+      "dependencies": {
+        "accepts": "~1.3.8",
+        "array-flatten": "1.1.1",
+        "body-parser": "1.20.1",
+        "content-disposition": "0.5.4",
+        "content-type": "~1.0.4",
+        "cookie": "0.5.0",
+        "cookie-signature": "1.0.6",
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "finalhandler": "1.2.0",
+        "fresh": "0.5.2",
+        "http-errors": "2.0.0",
+        "merge-descriptors": "1.0.1",
+        "methods": "~1.1.2",
+        "on-finished": "2.4.1",
+        "parseurl": "~1.3.3",
+        "path-to-regexp": "0.1.7",
+        "proxy-addr": "~2.0.7",
+        "qs": "6.11.0",
+        "range-parser": "~1.2.1",
+        "safe-buffer": "5.2.1",
+        "send": "0.18.0",
+        "serve-static": "1.15.0",
+        "setprototypeof": "1.2.0",
+        "statuses": "2.0.1",
+        "type-is": "~1.6.18",
+        "utils-merge": "1.0.1",
+        "vary": "~1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.10.0"
+      }
+    },
+    "node_modules/filelist": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",
+      "integrity": "sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==",
+      "dependencies": {
+        "minimatch": "^5.0.1"
+      }
+    },
+    "node_modules/filelist/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/filelist/node_modules/minimatch": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
+      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/finalhandler": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
+      "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==",
+      "dependencies": {
+        "debug": "2.6.9",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "on-finished": "2.4.1",
+        "parseurl": "~1.3.3",
+        "statuses": "2.0.1",
+        "unpipe": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/forwarded": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
+      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/fresh": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+      "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.0.tgz",
+      "integrity": "sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q==",
+      "dependencies": {
+        "function-bind": "^1.1.1",
+        "has": "^1.0.3",
+        "has-symbols": "^1.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "dependencies": {
+        "function-bind": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/http-errors": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
+      "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
+      "dependencies": {
+        "depd": "2.0.0",
+        "inherits": "2.0.4",
+        "setprototypeof": "1.2.0",
+        "statuses": "2.0.1",
+        "toidentifier": "1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+    },
+    "node_modules/ipaddr.js": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/jake": {
+      "version": "10.8.5",
+      "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.5.tgz",
+      "integrity": "sha512-sVpxYeuAhWt0OTWITwT98oyV0GsXyMlXCF+3L1SuafBVUIr/uILGRB+NqwkzhgXKvoJpDIpQvqkUALgdmQsQxw==",
+      "dependencies": {
+        "async": "^3.2.3",
+        "chalk": "^4.0.2",
+        "filelist": "^1.0.1",
+        "minimatch": "^3.0.4"
+      },
+      "bin": {
+        "jake": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/media-typer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/merge-descriptors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
+      "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w=="
+    },
+    "node_modules/methods": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
+      "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+    },
+    "node_modules/negotiator": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
+      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/object-inspect": {
+      "version": "1.12.3",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
+      "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/on-finished": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+      "dependencies": {
+        "ee-first": "1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/path-to-regexp": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
+      "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ=="
+    },
+    "node_modules/proxy-addr": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
+      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
+      "dependencies": {
+        "forwarded": "0.2.0",
+        "ipaddr.js": "1.9.1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/qs": {
+      "version": "6.11.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
+      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
+      "dependencies": {
+        "side-channel": "^1.0.4"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/raw-body": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz",
+      "integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==",
+      "dependencies": {
+        "bytes": "3.1.2",
+        "http-errors": "2.0.0",
+        "iconv-lite": "0.4.24",
+        "unpipe": "1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+    },
+    "node_modules/send": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
+      "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==",
+      "dependencies": {
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "fresh": "0.5.2",
+        "http-errors": "2.0.0",
+        "mime": "1.6.0",
+        "ms": "2.1.3",
+        "on-finished": "2.4.1",
+        "range-parser": "~1.2.1",
+        "statuses": "2.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/send/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+    },
+    "node_modules/serve-static": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz",
+      "integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==",
+      "dependencies": {
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "parseurl": "~1.3.3",
+        "send": "0.18.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/setprototypeof": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
+    },
+    "node_modules/side-channel": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
+      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "dependencies": {
+        "call-bind": "^1.0.0",
+        "get-intrinsic": "^1.0.2",
+        "object-inspect": "^1.9.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/statuses": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
+      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/toidentifier": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/type-is": {
+      "version": "1.6.18",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
+      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+      "dependencies": {
+        "media-typer": "0.3.0",
+        "mime-types": "~2.1.24"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/utils-merge": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
+      "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "node_modules/vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 00000000..23482be1
--- /dev/null
+++ b/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "server-side-rendering",
+  "version": "1.0.0",
+  "description": "Ontwerp en ontwikkel een server-side website voor een opdrachtgever.",
+  "main": "app.js",
+  "type": "module",
+  "directories": {
+    "doc": "docs"
+  },
+  "scripts": {
+    "start": "node index.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "node",
+    "express",
+    "ejs"
+  ],
+  "author": "J.P. Sturkenboom <j.p.sturkenboom@hva.nl>",
+  "license": "GPL-3.0",
+  "bugs": {
+    "url": "https://github.com/fdnd-task/server-side-rendering/issues"
+  },
+  "homepage": "https://github.com/fdnd-task/server-side-rendering#readme",
+  "dependencies": {
+    "dotenv": "^16.0.3",
+    "ejs": "^3.1.8",
+    "express": "^4.18.2"
+  }
+}
diff --git a/public/Communiceren-en-presenteren-icon.png b/public/Communiceren-en-presenteren-icon.png
new file mode 100644
index 00000000..a355f896
Binary files /dev/null and b/public/Communiceren-en-presenteren-icon.png differ
diff --git a/public/Creatief-denken-icon.png b/public/Creatief-denken-icon.png
new file mode 100644
index 00000000..f43803f4
Binary files /dev/null and b/public/Creatief-denken-icon.png differ
diff --git a/public/Leren-over-anderen-icon.png b/public/Leren-over-anderen-icon.png
new file mode 100644
index 00000000..e6f1eec5
Binary files /dev/null and b/public/Leren-over-anderen-icon.png differ
diff --git a/public/Leren-over-jezelf-en-reflecteren-icon.png b/public/Leren-over-jezelf-en-reflecteren-icon.png
new file mode 100644
index 00000000..3f0f5167
Binary files /dev/null and b/public/Leren-over-jezelf-en-reflecteren-icon.png differ
diff --git a/public/account1.svg b/public/account1.svg
new file mode 100644
index 00000000..6b58d322
--- /dev/null
+++ b/public/account1.svg
@@ -0,0 +1,4 @@
+<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.0017 0.000269868C12.4925 0.000269868 8.16822 1.7916 4.9797 4.97997C1.79133 8.16835 0 12.4931 0 17.002C0 21.5108 1.79133 25.8355 4.9797 29.024C8.16808 32.2124 12.4929 34.0037 17.0017 34.0037C20.8816 34.019 24.6471 32.6918 27.6602 30.2471C28.3418 29.6977 28.9803 29.097 29.5704 28.4503C32.5453 25.1845 34.1321 20.8892 33.995 16.4735C33.8577 12.0581 32.0074 7.86934 28.8353 4.79417C25.6633 1.71941 21.4193 -0.000202384 17.0015 1.78654e-08L17.0017 0.000269868ZM28.5906 26.0967C27.6851 22.3512 22.8411 19.4883 17.0017 19.4883C11.1589 19.4883 6.31758 22.3515 5.41285 26.0975C3.12449 23.184 2.01761 19.5152 2.31278 15.8222C2.60795 12.1294 4.28331 8.68279 7.00548 6.16963C9.72739 3.6562 13.296 2.2607 17.0008 2.2605C20.7054 2.2605 24.2745 3.65599 26.9968 6.16889C29.7189 8.68205 31.3946 12.1282 31.6897 15.8215C31.9852 19.5145 30.8786 23.1828 28.5904 26.0967L28.5906 26.0967Z" fill="#090940"/>
+<path d="M22.3779 10.2092C23.0789 13.1783 21.2399 16.1537 18.2708 16.8544C15.3017 17.5555 12.3266 15.7167 11.6255 12.7474C10.9247 9.77826 12.7635 6.80315 15.7326 6.10209C18.7017 5.40131 21.6768 7.24007 22.3779 10.2092Z" fill="#090940"/>
+</svg>
\ No newline at end of file
diff --git a/public/arrow-back.png b/public/arrow-back.png
new file mode 100644
index 00000000..d6adc33d
Binary files /dev/null and b/public/arrow-back.png differ
diff --git a/public/arrows-left.png b/public/arrows-left.png
new file mode 100644
index 00000000..67ebf615
Binary files /dev/null and b/public/arrows-left.png differ
diff --git a/public/arrows-right.png b/public/arrows-right.png
new file mode 100644
index 00000000..d6adc33d
Binary files /dev/null and b/public/arrows-right.png differ
diff --git a/public/client-side.js b/public/client-side.js
new file mode 100644
index 00000000..cb6995f6
--- /dev/null
+++ b/public/client-side.js
@@ -0,0 +1,32 @@
+// laad meer knop
+
+// lees meer functie detailpagina
+// Dit stuk zoekt de togglebutton en zorgt ervoor dat hij de functie eronder activeerd wanneer erop geklikt wordt
+let stappenplan = document.getElementById("stappenplanbutton");
+stappenplan.addEventListener("click", toonStappenplan);
+// Dit deel toggled de class "toon" waarop display none staat
+function toonStappenplan() {
+  document.getElementById("stappen").classList.toggle("toon");
+}
+
+// filter
+
+const searchBar = document.getElementById("site-search");
+const searchResults = document.querySelectorAll(".method-card");
+
+searchBar.addEventListener("keyup", search);
+
+function search() {
+  const searchValue = this.value.toLowerCase();
+  console.log("hiii");
+
+  if (this.value === "") {
+    searchResults.forEach((method) => {
+      method.hidden = false;
+    });
+  } else {
+    searchResults.forEach((method) => {
+      method.hidden = !method.textContent.toLowerCase().includes(searchValue);
+    });
+  }
+}
diff --git a/public/logo1.svg b/public/logo1.svg
new file mode 100644
index 00000000..ce450f85
--- /dev/null
+++ b/public/logo1.svg
@@ -0,0 +1,20 @@
+<svg width="81" height="78" viewBox="0 0 81 78" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_227_265)">
+<path d="M27.02 53.93V69.03L40.1 76.58L53.18 69.03V53.93L40.1 46.37L27.02 53.93Z" fill="#FEB51E" stroke="white" stroke-miterlimit="10"/>
+<path d="M53.46 8.12996V23.23L66.54 30.78L79.61 23.23V8.12996L66.54 0.579956L53.46 8.12996Z" fill="#FEB51E" stroke="white" stroke-miterlimit="10"/>
+<path d="M27.02 8.12996V23.23L40.1 30.78L53.18 23.23V8.12996L40.1 0.579956L27.02 8.12996Z" fill="#FEB51E" stroke="white" stroke-miterlimit="10"/>
+<path d="M0.5 8.12996V23.23L13.58 30.78L26.66 23.23V8.12996L13.58 0.579956L0.5 8.12996Z" fill="#FEB51E" stroke="white" stroke-miterlimit="10"/>
+<path d="M40.26 31.01V46.12L53.34 53.67L66.42 46.12V31.01L53.34 23.46L40.26 31.01Z" fill="#FEB51E" stroke="white" stroke-miterlimit="10"/>
+<path d="M13.8601 31.01V46.12L26.9401 53.67L40.0201 46.12V31.01L26.9401 23.46L13.8601 31.01Z" fill="#FEB51E" stroke="white" stroke-miterlimit="10"/>
+<path d="M18.3201 10.86L15.0601 19.88H12.0901L8.83008 10.86H12.0701L13.6501 16.19L15.2201 10.86H18.3201Z" fill="#41014A"/>
+<path d="M30.79 34.3999V42.9699H28.52V39.6299H25.52V42.9699H23.25V34.3999H25.52V37.6099H28.52V34.3999H30.79Z" fill="#41014A"/>
+<path d="M57.21 39.4499V41.3999L55.76 42.8499H49.71V34.2799H55.51L56.96 35.7299V37.6499L56.19 38.4199L57.21 39.4499ZM51.98 37.6699H54.32L54.69 37.2999V36.5199L54.41 36.2399H51.98V37.6599V37.6699ZM54.94 40.6099V39.9199L54.47 39.4499H51.97V40.8899H54.65L54.93 40.6099H54.94Z" fill="#41014A"/>
+<path d="M44.26 58.8899V64.0599L42.56 65.7599H38.2L36.5 64.0599V58.8899L38.2 57.1899H42.56L44.26 58.8899ZM41.99 63.2099V59.7299L41.46 59.1999H39.29L38.76 59.7299V63.2099L39.29 63.7399H41.46L41.99 63.2099Z" fill="#41014A"/>
+<path d="M67.8399 14.8399V18.2799L68.5199 18.9599H70.2099V21.4099H66.6999L64.7699 19.4799V14.8299H62.9299V12.3799H64.9499L65.3799 9.15991H67.8299V12.3799H70.2099V14.8299H67.8299L67.8399 14.8399Z" fill="#41014A"/>
+</g>
+<defs>
+<clipPath id="clip0_227_265">
+<rect width="80.11" height="77.15" fill="white"/>
+</clipPath>
+</defs>
+</svg>
\ No newline at end of file
diff --git a/public/onderzoeken-en-begrijpen-icon.png b/public/onderzoeken-en-begrijpen-icon.png
new file mode 100644
index 00000000..92ac5aed
Binary files /dev/null and b/public/onderzoeken-en-begrijpen-icon.png differ
diff --git a/public/organiseren-en-plannen-icon.png b/public/organiseren-en-plannen-icon.png
new file mode 100644
index 00000000..a4acc890
Binary files /dev/null and b/public/organiseren-en-plannen-icon.png differ
diff --git a/public/pen-potlood.png b/public/pen-potlood.png
new file mode 100644
index 00000000..ee7d7720
Binary files /dev/null and b/public/pen-potlood.png differ
diff --git a/public/pijl-hexagon-naar-beneden.svg b/public/pijl-hexagon-naar-beneden.svg
new file mode 100644
index 00000000..404f81eb
--- /dev/null
+++ b/public/pijl-hexagon-naar-beneden.svg
@@ -0,0 +1,6 @@
+<svg width="82" height="82" viewBox="0 0 82 82" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M41 0L76.507 20.5V61.5L41 82L5.49296 61.5V20.5L41 0Z" fill="#FEB51E"/>
+<path d="M56.7012 46.4337L56.7012 51.8895L41.3507 60.8527L26.0002 51.8895L26.0002 46.4337L41.3507 55.3968L56.7012 46.4337Z" fill="white"/>
+<path d="M56.7012 35.7169L56.7012 41.1727L41.3507 50.1358L26.0002 41.1727L26.0002 35.7169L41.3507 44.68L56.7012 35.7169Z" fill="white"/>
+<path d="M56.7012 25L56.7012 30.4559L41.3507 39.419L26.0002 30.4559L26.0002 25L41.3507 33.9632L56.7012 25Z" fill="white"/>
+</svg>
diff --git a/public/placeholder.png b/public/placeholder.png
new file mode 100644
index 00000000..f8538104
Binary files /dev/null and b/public/placeholder.png differ
diff --git a/public/scripts/index.js b/public/scripts/index.js
new file mode 100644
index 00000000..a35c4692
--- /dev/null
+++ b/public/scripts/index.js
@@ -0,0 +1,4 @@
+window.onload = () => {
+  const body = document.querySelector("body");
+  body.classList.toggle("index");
+};
diff --git a/public/style.css b/public/style.css
new file mode 100644
index 00000000..8a288f1f
--- /dev/null
+++ b/public/style.css
@@ -0,0 +1,552 @@
+:root {
+    /* primaire kleuren */
+    /* donkerblauw */
+    --text-color: #090940;
+    --text-color-var01: #3a3a66;
+    --text-color-var02: #6b6b8c;
+    --text-color-var03: #9d9db3;
+    --text-color-var04: #ceced9;
+
+    /* tekstvlakken of stroken */
+    /*lichtblauw */
+    --text-stroke-color: #67c5d1;
+    --text-stroke-color-var01: #85d1da;
+    --text-stroke-color-var02: #a4dce3;
+    --text-stroke-color-var03: #c2e8ed;
+    --text-stroke-color-var04: #e1f3f6;
+
+    /* rood */
+    --text-stroke-color-var05: #f96c4f;
+    --text-stroke-color-var06: #fa8972;
+    --text-stroke-color-var07: #fba795;
+    --text-stroke-color-var08: #fdc4b9;
+    --text-stroke-color-var09: #fee2dc;
+
+    /* interactieve elementen */
+    /* geel */
+    --interactive-el-color: #feb51e;
+    --interactive-el-color-var01: #fec44b;
+    --interactive-el-color-var02: #fed378;
+    --interactive-el-color-var03: #ffe1a5;
+    --interactive-el-color-var04: #fff0d2;
+
+    /* secundaire kleuren */
+    --sec-colors-01: #af1301;
+    --sec-colors-02: #fbc5b4;
+    --sec-colors-03: #169861;
+    --sec-colors-04: #63c09f;
+    --sec-colors-05: #4fbbc2;
+    --sec-colors-06: #31439c;
+    --sec-colors-07: #8b3a00;
+    --sec-colors-08: #fe6f07;
+
+
+    /* grey tones */
+    --grey-colors: #625c51;
+    --grey-colors-01: #c0beb9;
+    --grey-colors-02: #e0dedc;
+    --grey-colors-03: #f9f8f8;
+
+    --background-color: white;
+
+    /* fonts */
+    --rigid: rigid-square, sans-serif;
+    --broodtekst: "yrsa", "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
+
+    /* index variables */
+    --hexagon-radius: 3rem;
+    --hexagon-width: 16rem;
+    --hexagon-height: 18rem;
+    --hexagon-padding: 1rem;
+
+    --card-border-width: 0.3rem;
+
+    --line-gap: -3rem;
+
+}
+html{
+    scroll-behavior: smooth;
+}
+
+body{
+    margin: 0;
+}
+
+
+
+/* index styling */
+
+body.index {
+  background-color: white;
+}
+
+main.index {
+  /* dit ziet er ingewikkeld uit, maar dit is de layout nodig voor een hexagon patroon */
+  display: flex;
+  flex-direction: column;
+  gap: var(--line-gap);
+}
+
+.container {
+  margin-left: auto;
+  margin-right: auto;
+  width: calc(var(--hexagon-width) * 3.5);
+  background-color: var(--interactive-el-color-var03);
+}
+
+section.line-1 {
+  width: calc(var(--hexagon-width) * 3.5);
+  height: var(--hexagon-height);
+  display: grid;
+  grid-template-columns: repeat(3, 1fr) 0.5fr;
+  grid-template-rows: 1fr;
+  grid-column-gap: 0px;
+  grid-row-gap: 0px;
+}
+
+section.line-2 {
+  width: calc(var(--hexagon-width) * 3.5);
+  height: var(--hexagon-height);
+  display: grid;
+  grid-template-columns: repeat(3, 1fr) 0.5fr;
+  grid-template-rows: 1fr;
+  grid-column-gap: 0px;
+  grid-row-gap: 0px;
+  margin-top: calc(var(--line-gap));
+}
+
+.hexagon-dark {
+  display: block;
+  margin-left: calc(-0.5 * var(--hexagon-radius));
+  margin-right: calc(-0.5 * var(--hexagon-radius));
+  margin-top: calc(-0.5 * var(--hexagon-radius));
+  margin-bottom: calc(-0.5 * var(--hexagon-radius));
+  width: calc(var(--hexagon-width) + var(--hexagon-radius));
+  height: calc(var(--hexagon-height) + var(--hexagon-radius));
+  background-color: var(--interactive-el-color-var01);
+  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
+  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
+  z-index: 1;
+}
+
+.hexagon-light {
+  display: block;
+  margin: 0;
+  width: var(--hexagon-width);
+  height: var(--hexagon-height);
+  background-color: var(--interactive-el-color-var03);
+  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
+  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
+  z-index: 0;
+}
+
+.hexagon-half-left {
+  display: block;
+  -webkit-clip-path: polygon(100% 0, 100% 100%, 0% 75%, 0% 25%);
+  clip-path: polygon(100% 0, 100% 100%, 0% 75%, 0% 25%);
+}
+
+.hexagon-half-right {
+  display: block;
+  -webkit-clip-path: polygon(0 0, 100% 25%, 100% 75%, 0 100%);
+  clip-path: polygon(0 0, 100% 25%, 100% 75%, 0 100%);
+}
+
+.hexagon-half-dark-left {
+  width: calc(0.5 * (var(--hexagon-width) + var(--hexagon-radius)));
+  height: calc(var(--hexagon-height) + var(--hexagon-radius));
+  margin-left: calc(-0.5 * var(--hexagon-radius));
+  margin-top: calc(-0.5 * var(--hexagon-radius));
+  margin-bottom: calc(-0.5 * var(--hexagon-radius));
+  background-color: var(--interactive-el-color-var01);
+  z-index: 1;
+}
+
+.hexagon-half-light-right {
+  width: calc(0.5 * var(--hexagon-width));
+  height: var(--hexagon-height);
+  margin: 0;
+  background-color: var(--interactive-el-color-var03);
+  z-index: 0;
+}
+
+.label-card {
+  margin: auto;
+  left: calc(50% - (width / 2));
+  top: calc(50% - (height / 2));
+  background-color: var(--background-color);
+  width: calc(var(--hexagon-width) - var());
+}
+
+.card-border {
+  margin: calc((var(--hexagon-padding) * 2) - var(--card-border-width)) auto;
+  padding-left: var(--card-border-width);
+  padding-top: var(--card-border-width);
+  width: calc(var(--card-border-width) + (var(--hexagon-width) - var(--hexagon-padding)));
+  height: calc(var(--card-border-width) + (var(--hexagon-height) - var(--hexagon-padding)));
+  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
+  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
+  background-color: black;
+}
+
+.content-card {
+  left: calc(50% - (width / 2));
+  top: calc(50% - (height / 2));
+  width: calc(var(--hexagon-width) - var(--hexagon-padding));
+  height: calc(var(--hexagon-height) - var(--hexagon-padding));
+  display: flex;
+  flex-direction: column;
+  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
+  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
+  background-color: var(--interactive-el-color-var04);
+  border-radius: 5px;
+}
+
+.content-card>h3 {
+  display: block;
+  text-align: center;
+  width: 100%;
+  height: 2rem;
+  font-size: 1.5rem;
+}
+
+/* overviewpage styling */
+
+.overviewpage-header{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin-left: 10%;
+    margin-bottom: 2em;
+}
+
+.overviewpage-header a{
+    color: var(--text-color);
+    font-family: var(--rigid);
+    font-weight: bold;
+    font-size: 20px;
+    margin-left: 1em;
+    text-decoration: none;
+}
+
+.overviewpage-header a:hover{
+    color:var(--interactive-el-color);
+}
+
+.links {
+    margin-right: 3em;
+
+}
+
+
+.header-methodes h1{
+  color: var(--text-color);
+  font-family: var(--rigid);
+  margin-left: 2em;
+}
+
+.filter-search-container{
+    margin-bottom: 2em;
+    margin-left: 5em;
+}
+
+.filter-search-container input {
+    border: none;
+    font-size: 20px;
+}
+
+.search-button{
+    border: none;
+    background-color: white;
+}
+
+.search-button i{
+    font-size: 22px;
+}
+
+.search-button i:hover{
+    color: var(--interactive-el-color);
+}
+
+hr{
+ width: 90%;
+ margin-left: -0.3em;
+}
+
+
+.categories-container{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    margin-top: 1em;
+    margin-left: -2em;
+}
+
+.categories-container ul{
+    list-style: none;
+}
+
+
+.categories-container img{
+    height: auto;
+    width: 100%;
+}
+
+
+.overviewpage-main{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+
+.method-container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 5em 4em;
+
+}
+
+.method-card {
+    border-left: var(--interactive-el-color) 11px solid;
+    border-radius: 6px;
+    height: 15em;
+    width: 20em;
+}
+
+.method-card a {
+    display: flex;
+    flex-direction: column;
+    color: var(--text-color);
+    text-decoration: none;
+}
+
+.method-img {
+    height: 15em;
+    width: 100%;
+    border-radius: 6px;
+    -webkit-box-shadow: 12px 9px 11px -6px rgba(0, 0, 0, 0.37);
+    box-shadow: 12px 9px 11px -6px rgba(0, 0, 0, 0.37);
+}
+
+
+.method-name{
+    margin-top: 0.5em;
+    display: flex;
+    justify-content: space-between;
+    font-family: var(--rigid);
+    font-size: 18px;
+    font-weight: bold;
+}
+
+
+.arrow{
+    height: 1em;
+    width: auto;
+}
+
+.load-more{
+    display: flex;
+    justify-content: center;
+    margin-top: 4em;
+}
+
+.load-more-button{
+    font-family: var(--rigid);
+    font-weight: bold;
+    border: none;
+    background-color: var(--interactive-el-color);
+    height: 3em;
+    width: auto;
+    margin-bottom: 2em;
+}
+
+.add-method-text{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+
+.add-method-text h2{
+    font-size: 17px;
+    color: var(--text-color);
+    font-family: var(--broodtekst);
+    width: fit-content;
+}
+
+.add-method-text img{
+    position: relative;
+    top: -2.8em;
+    margin-left: 0.5em;
+    height: auto;
+    width: 4em;
+}
+
+footer {
+    height: 5em;
+    display: flex;
+    flex-direction: row;
+    gap: 1em;
+    background-color: var(--text-color-var01);
+    color: var(--text-color-var04);
+    margin-top: 4em;
+}
+
+
+
+footer h3{
+    margin-left: 1em;
+    font-family: var(--broodtekst);
+    font-size: 16px;
+}
+
+
+
+
+/* categories colors */
+
+.Leren-over-jezelf-en-reflecteren{
+    border-left-color:var(--text-stroke-color-var01);
+}
+
+.Leren-over-anderen{
+    border-left-color:var(--sec-colors-04);
+}
+
+.Creatief-denken{
+    border-left-color:var(--text-stroke-color-var05);
+}
+
+.Organiseren-en-plannen{
+    border-left-color:var(--sec-colors-03);
+}
+
+.Communcieren-en-presenteren{
+    border-left-color:var(--sec-colors-08);
+}
+
+.Onderzoeken-en-begrijpen{
+    border-left-color: var(--text-stroke-color-var07);
+}
+
+
+/* detailpage styling */
+
+.backtab{
+    height: 3em;
+    width: 100%;
+    background-color: #31439c;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+}
+.backtab h3{
+    color: white;
+}
+.backtab img{
+    margin: 1em 1em 1em 1em;
+}
+
+.nav{
+    background-color: var(--text-color-var04);
+    height: 4em;
+    width: 100%;
+    margin-top: 0;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+}
+
+.nav a{
+    text-decoration: none;
+    font: var(--broodtekst);
+    font-size: 1.6em;
+    color: var(--text-color);
+    font-weight: bold;
+}
+
+.nav a:hover{
+    border-bottom: solid 0.1em var(--text-color);
+    margin-bottom: -0.05em;
+    transition: 50ms;
+}
+
+.main-detailpage{
+    margin-left: 2em;
+    font-size: 1.5em;
+}
+
+.main-detailpage img{
+    width: 15em;
+    height: auto;
+}
+
+.main-detailpage h1{
+    color: var(--text-color);;
+}
+.main-detailpage h2{
+    color: var(--text-color);;
+}
+.main-detailpage h3{
+    color: var(--text-color);;
+}
+.main-detailpage h4{
+    color: var(--text-color);;
+}
+
+.stappen{
+    display: none;
+}
+
+.stappen.toon{
+    display: block;
+}
+
+.buttondeel{
+    display: flex;
+    justify-content: center;
+
+}
+
+#stappenplanbutton{
+    font: var(--rigid);
+    border-radius: 30px;
+    background-color: white;
+    border: 0px;
+    transition: 1s;
+}
+
+#stappenplanbutton:hover{
+    cursor: pointer;
+}
+
+#stappenplanbutton img{
+    width: 3em;
+    height: 3em;
+}
+
+#stappenplanbutton img:hover{
+    width: 3.5em;
+    height: 3.5em;
+    transform: translateY(-0.5em);
+    transition: 1s;
+    
+}
+
+.beschrijving{
+    display: flex;
+    flex-direction: column;
+}
+
+blockquote{
+    font-weight: bolder;
+}
+
+ol{
+    list-style-type: none;
+}
+
+
diff --git a/views/detailpage.ejs b/views/detailpage.ejs
new file mode 100644
index 00000000..f0e538ac
--- /dev/null
+++ b/views/detailpage.ejs
@@ -0,0 +1,55 @@
+<%- include('./head', {container:false}) %>
+
+
+<a href="/overviewpage"> 
+    <div class="backtab">
+        <img src="/arrow-back.png" alt="back arrow">
+        <h3>Tekenmethodes</h3>
+    </div>
+</a>
+
+<div class="nav">
+    <a href="#beschrijving">Beschrijving</a>
+    <a href="#stappenplanbutton">Stappenplan</a>
+    <a href="#categorieen">Categorieën</a>
+    <a href="#voorbeelden">Voorbeelden</a>
+</div>
+
+
+<div class="main-detailpage">
+    <h1><%- method.title %></h1>
+    <section class="beschrijving" id="beschrijving">
+        <%- method.description.html %>  
+        <img src="<%- method.template.url %>" alt="Method Template">  
+    </section>
+    <div class="buttondeel">
+     <button id="stappenplanbutton">
+        <h2>Stappenplan</h2>
+        <img src="/pijl-hexagon-naar-beneden.svg" alt="Pijl naar beneden">
+     </button>
+    </div>
+    <div id="stappen" class="stappen">
+        <ol>
+            <% method.steps.forEach(step => { %>
+                <li>
+                    <h4><%- step.title %></h4>
+                    <div>
+                        <%- step.description.html %>
+                    </div>
+                </li>
+            <% }) %>
+        </ol>
+            
+    </div>
+    <section id="categorieen">
+        <% method.categories.forEach(category => { %>
+            <ul>
+                <%- category.title %>
+        </ul>
+            <% }) %>
+    </section>
+    <section id="voorbeelden">
+    
+    </section>
+</div>
+<%- include('./foot') %>
\ No newline at end of file
diff --git a/views/foot.ejs b/views/foot.ejs
new file mode 100644
index 00000000..691287b6
--- /dev/null
+++ b/views/foot.ejs
@@ -0,0 +1,2 @@
+</body>
+</html>
\ No newline at end of file
diff --git a/views/head-overviewpage.ejs b/views/head-overviewpage.ejs
new file mode 100644
index 00000000..e3a3457c
--- /dev/null
+++ b/views/head-overviewpage.ejs
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="nl">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="/style.css" />
+    <title>Visual Thinking</title>
+    <script src="https://kit.fontawesome.com/7b7fa7c68b.js" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="https://use.typekit.net/brx3lyu.css" />
+    <!-- rigid square font -->
+    <link rel="stylesheet" href="https://use.typekit.net/kdb0mcl.css" />
+    <!-- yrsa font -->
+    <script src="/client-side.js" defer></script>
+  </head>
+  <body>
+
+    <header class="overviewpage-header">
+        <img src="/logo1.svg" loading="lazy" alt="Visual Thinking in Het HBO">
+        <div class="links">
+          <a href="">blog</a>
+          <a href=""><img src="account1.svg" alt="naar profiel"></a> 
+        </div>
+    </header>
diff --git a/views/head.ejs b/views/head.ejs
new file mode 100644
index 00000000..71379672
--- /dev/null
+++ b/views/head.ejs
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="nl">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="/style.css" />
+    <title>Visual Thinking</title>
+    <script src="https://kit.fontawesome.com/7b7fa7c68b.js" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="https://use.typekit.net/brx3lyu.css" />
+    <!-- rigid square font -->
+    <link rel="stylesheet" href="https://use.typekit.net/kdb0mcl.css" />
+    <!-- yrsa font -->
+    <script src="/client-side.js" defer></script>
+  </head>
+  <body>
+
+    <header class="overviewpage-header">
+      <img src="/logo1.svg" loading="lazy" alt="Visual Thinking in Het HBO">
+    </header>
+
+     <% try { if (container) { %>
+      <div class="container">
+    <% } } catch (error) {  %>
+      <% return %>
+    <% } %>
+
+    <header>
+      <a href=""><img src="" alt="" class="logo"></a>
+      <section class="right">
+        <button><img src="" alt="" class="search"></button>
+        <a href="" class="over">Over</a>
+        <a href="" class="blog">Blog</a>
+        <button><img src="" alt="" class="profiel"></button>
+      </section>
+
+    
\ No newline at end of file
diff --git a/views/index.ejs b/views/index.ejs
new file mode 100644
index 00000000..a250b194
--- /dev/null
+++ b/views/index.ejs
@@ -0,0 +1,86 @@
+<%- include('./head', {container:true}) %>
+
+<main class="index">
+  <section class="line-1">
+    <div class="hexagon-dark"></div>
+    <div class="hexagon-light"></div>
+    <div class="hexagon-dark"></div>
+    <div class="hexagon-half-left hexagon-half-dark-left"></div>
+  </section>
+
+  <section class="line-2">
+    <div class="hexagon-half-right hexagon-half-light-right"></div>
+    <div class="hexagon-dark"></div>
+    <div class="hexagon-dark">
+      <div class="label-card">
+        <h1 class="title">Visual Thinking in het HBO</h1>
+      </div>
+    </div>
+    <div class="hexagon-dark">
+      <div class="card-border">
+        <div class="content-card">
+          <h3>Blog</h3>
+          <p>Wat is Visual Thinking?</p>
+          <button>></button>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!--
+
+    <div class="hexagon content-card">
+      <h3>Blog</h3>
+      <p></p>
+      <button>></button>
+    </div>
+    <div class="hexagon content-card">
+      <h3>Blog</h3>
+      <p></p>
+      <button>></button>
+    </div>
+    <div class="hexagon content-card">
+      <h3>Blog</h3>
+      <p></p>
+      <button>></button>
+    </div>
+    <div class="card-double">
+      <h2>Meer informatie? Check de blog!</h2>
+      <button>></button>
+    </div>
+
+    <div class="card-triple">
+      <h2>Welke categorieën zijn er allemaal?</h2>
+    </div>
+    <div class="hexagon">
+      <img src="" alt=""></img>
+      <button>></button>
+    </div>
+    <div class="hexagon">
+      <img src="" alt=""></img>
+      <button>></button>
+    </div>
+    <div class="hexagon">
+      <img src="" alt=""></img>
+      <button>></button>
+    </div>
+    <div class="hexagon">
+      <img src="" alt=""></img>
+      <button>></button>
+    </div>
+    <div class="hexagon">
+      <img src="" alt=""></img>
+      <button>></button>
+    </div>
+    <div class="hexagon">
+      <img src="" alt=""></img>
+      <button>></button>
+    </div> -->
+    <a href="./overviewpage">naar overzichtspagina</a>
+</main>
+
+
+
+<script src="scripts/index.js" defer></script>
+
+<%- include('./foot') %>
\ No newline at end of file
diff --git a/views/overviewpage.ejs b/views/overviewpage.ejs
new file mode 100644
index 00000000..c945c873
--- /dev/null
+++ b/views/overviewpage.ejs
@@ -0,0 +1,67 @@
+<%- include('./head-overviewpage') %>
+
+
+<header class="header-methodes">
+  <h1>Tekenmethodes</h1>
+
+ <section class="filter-search-container">
+      <div class="searchbar">
+      <label class="label-search" for="site-search"></label>
+      <form method="get" action="" class="search-form"></form>
+         <button class="search-button"><i class="fa-solid fa-magnifying-glass"></i></button>
+          <input class="searchBar" type="search" id="site-search" name="q" placeholder="zoeken..."/>
+      </form>
+      <hr>
+     </div>
+         
+     <div class="categories-container">
+      <ul><li><img src="/Communiceren-en-presenteren-icon.png" alt=".."></li></ul>
+      <ul><li><img src="/Creatief-denken-icon.png" alt=".."></li></ul>
+      <ul><li><img src="/Leren-over-anderen-icon.png" alt=".."></li></ul>
+      <ul><li><img src="/Leren-over-jezelf-en-reflecteren-icon.png" alt=".."></li></ul>
+      <ul><li><img src="/onderzoeken-en-begrijpen-icon.png" alt=".."></li></ul>
+      <ul><li><img src="/organiseren-en-plannen-icon.png" alt=".."></li></ul>
+     </div>
+  </section>
+</header>
+
+
+<main class="overviewpage-main">
+
+    <section class="method-container">
+        
+      <% methods.forEach(method=> { %>
+        <article class="method-card <%= method.categories[0].title.replaceAll(" ", "-") %>">
+          <a href="./detailpage/<%= method.slug %>?id=<%= method.id %>">
+           <% if (method.template?.url) { %> 
+            <img class="method-img" src="<%= method.template?.url %>" loading="lazy" alt="<%= method.title %>">
+           <% } else { %>
+            <img  class="method-img" src="/placeholder.png" alt="Placeholder" />
+           <% } %>
+           <div class="method-name"><%= method.title %><img class="arrow" src="/arrows-left.png" loading="lazy" alt="pijltjes naar rechts"></div>
+         </a>
+        </article> 
+      <% }) %>
+    
+    </section>
+
+  <section class="load-more">
+    <button class="load-more-button">Laad Meer</button>
+ </section>
+
+
+  <section class="add-method-text">
+    <h2>Wil je zelf een tekenmethode toevoegen aan onze verzameling?</h2>
+    <img src="/pen-potlood.png" alt="pen en potlood illustratie">
+ </section>
+
+</main>
+
+
+
+<footer>
+   <h3>Visual Thinking in het HBO</h3>
+  <h3>© Charley Muhren, 2023</h3>
+</footer>
+
+<%- include('./foot') %>
\ No newline at end of file