diff --git a/helpers/fetch-json.js b/helpers/fetch-json.js
new file mode 100644
index 000000000..962062b34
--- /dev/null
+++ b/helpers/fetch-json.js
@@ -0,0 +1,20 @@
+/**
+ * An asynchronous helper function that wraps the standard node.js fetch API.
+ * This function calls an API url passed as the first and mandatory parameter,
+ * there is an optional payload parameter to send a json object, eg. a filter.
+ * It then calls the API and returns the response body parsed  as a json object.
+ * @example <caption>fetchJson as returning function using the await keyword</caption>
+ * const data = await fetchJson('https://api-url.com/endpoint/')
+ * @example <caption>fetchJson as oneliner using the then() structure.</caption>
+ * fetchJson('https://api-url.com/endpoint/').then((data)=>{
+ *  // use data...
+ * })
+ * @param {string} url the api endpoint to address
+ * @param {object} [payload] the payload to send to the API
+ * @returns the response from the API endpoint parsed as a json object
+ */
+export default async function fetchJson(url, payload = {}) {
+  return await fetch(url, payload)
+    .then((response) => response.json())
+    .catch((error) => error)
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 000000000..eed2e69fb
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,1190 @@
+{
+    "name": "pleasurable-ui",
+    "version": "1.0.0",
+    "lockfileVersion": 3,
+    "requires": true,
+    "packages": {
+        "": {
+            "name": "pleasurable-ui",
+            "version": "1.0.0",
+            "license": "MIT",
+            "dependencies": {
+                "ejs": "^3.1.10",
+                "express": "^4.19.2"
+            },
+            "devDependencies": {
+                "nodemon": "^3.1.0"
+            }
+        },
+        "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/anymatch": {
+            "version": "3.1.3",
+            "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+            "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "normalize-path": "^3.0.0",
+                "picomatch": "^2.0.4"
+            },
+            "engines": {
+                "node": ">= 8"
+            }
+        },
+        "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.5",
+            "resolved": "https://registry.npmjs.org/async/-/async-3.2.5.tgz",
+            "integrity": "sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg=="
+        },
+        "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/binary-extensions": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+            "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/body-parser": {
+            "version": "1.20.2",
+            "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.2.tgz",
+            "integrity": "sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==",
+            "dependencies": {
+                "bytes": "3.1.2",
+                "content-type": "~1.0.5",
+                "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.2",
+                "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/braces": {
+            "version": "3.0.2",
+            "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+            "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "fill-range": "^7.0.1"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "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.7",
+            "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
+            "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
+            "dependencies": {
+                "es-define-property": "^1.0.0",
+                "es-errors": "^1.3.0",
+                "function-bind": "^1.1.2",
+                "get-intrinsic": "^1.2.4",
+                "set-function-length": "^1.2.1"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "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/chokidar": {
+            "version": "3.6.0",
+            "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+            "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "anymatch": "~3.1.2",
+                "braces": "~3.0.2",
+                "glob-parent": "~5.1.2",
+                "is-binary-path": "~2.1.0",
+                "is-glob": "~4.0.1",
+                "normalize-path": "~3.0.0",
+                "readdirp": "~3.6.0"
+            },
+            "engines": {
+                "node": ">= 8.10.0"
+            },
+            "funding": {
+                "url": "https://paulmillr.com/funding/"
+            },
+            "optionalDependencies": {
+                "fsevents": "~2.3.2"
+            }
+        },
+        "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.6.0",
+            "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
+            "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
+            "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/define-data-property": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+            "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+            "dependencies": {
+                "es-define-property": "^1.0.0",
+                "es-errors": "^1.3.0",
+                "gopd": "^1.0.1"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "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/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.10",
+            "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.10.tgz",
+            "integrity": "sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==",
+            "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/es-define-property": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
+            "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
+            "dependencies": {
+                "get-intrinsic": "^1.2.4"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
+        "node_modules/es-errors": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+            "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
+        "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.19.2",
+            "resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz",
+            "integrity": "sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==",
+            "dependencies": {
+                "accepts": "~1.3.8",
+                "array-flatten": "1.1.1",
+                "body-parser": "1.20.2",
+                "content-disposition": "0.5.4",
+                "content-type": "~1.0.4",
+                "cookie": "0.6.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/fill-range": {
+            "version": "7.0.1",
+            "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+            "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "to-regex-range": "^5.0.1"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "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/fsevents": {
+            "version": "2.3.3",
+            "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+            "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+            "dev": true,
+            "hasInstallScript": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+            }
+        },
+        "node_modules/function-bind": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+            "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/get-intrinsic": {
+            "version": "1.2.4",
+            "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
+            "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
+            "dependencies": {
+                "es-errors": "^1.3.0",
+                "function-bind": "^1.1.2",
+                "has-proto": "^1.0.1",
+                "has-symbols": "^1.0.3",
+                "hasown": "^2.0.0"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/glob-parent": {
+            "version": "5.1.2",
+            "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+            "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "is-glob": "^4.0.1"
+            },
+            "engines": {
+                "node": ">= 6"
+            }
+        },
+        "node_modules/gopd": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
+            "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
+            "dependencies": {
+                "get-intrinsic": "^1.1.3"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "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-property-descriptors": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+            "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+            "dependencies": {
+                "es-define-property": "^1.0.0"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/has-proto": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz",
+            "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==",
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "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/hasown": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+            "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+            "dependencies": {
+                "function-bind": "^1.1.2"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
+        "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/ignore-by-default": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-1.0.1.tgz",
+            "integrity": "sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA==",
+            "dev": true,
+            "license": "ISC"
+        },
+        "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/is-binary-path": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+            "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "binary-extensions": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/is-extglob": {
+            "version": "2.1.1",
+            "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+            "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/is-glob": {
+            "version": "4.0.3",
+            "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+            "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "is-extglob": "^2.1.1"
+            },
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/is-number": {
+            "version": "7.0.0",
+            "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+            "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.12.0"
+            }
+        },
+        "node_modules/jake": {
+            "version": "10.9.1",
+            "resolved": "https://registry.npmjs.org/jake/-/jake-10.9.1.tgz",
+            "integrity": "sha512-61btcOHNnLnsOdtLgA5efqQWjnSi/vow5HbI7HMdKKWqvrKR1bLK3BPlJn9gcSaP2ewuamUSMB5XEy76KUIS2w==",
+            "dependencies": {
+                "async": "^3.2.3",
+                "chalk": "^4.0.2",
+                "filelist": "^1.0.4",
+                "minimatch": "^3.1.2"
+            },
+            "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/nodemon": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.1.0.tgz",
+            "integrity": "sha512-xqlktYlDMCepBJd43ZQhjWwMw2obW/JRvkrLxq5RCNcuDDX1DbcPT+qT1IlIIdf+DhnWs90JpTMe+Y5KxOchvA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "chokidar": "^3.5.2",
+                "debug": "^4",
+                "ignore-by-default": "^1.0.1",
+                "minimatch": "^3.1.2",
+                "pstree.remy": "^1.1.8",
+                "semver": "^7.5.3",
+                "simple-update-notifier": "^2.0.0",
+                "supports-color": "^5.5.0",
+                "touch": "^3.1.0",
+                "undefsafe": "^2.0.5"
+            },
+            "bin": {
+                "nodemon": "bin/nodemon.js"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/nodemon"
+            }
+        },
+        "node_modules/nodemon/node_modules/debug": {
+            "version": "4.3.4",
+            "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+            "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "ms": "2.1.2"
+            },
+            "engines": {
+                "node": ">=6.0"
+            },
+            "peerDependenciesMeta": {
+                "supports-color": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/nodemon/node_modules/has-flag": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+            "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=4"
+            }
+        },
+        "node_modules/nodemon/node_modules/ms": {
+            "version": "2.1.2",
+            "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+            "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/nodemon/node_modules/supports-color": {
+            "version": "5.5.0",
+            "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+            "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "has-flag": "^3.0.0"
+            },
+            "engines": {
+                "node": ">=4"
+            }
+        },
+        "node_modules/normalize-path": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+            "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/object-inspect": {
+            "version": "1.13.1",
+            "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
+            "integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==",
+            "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/picomatch": {
+            "version": "2.3.1",
+            "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+            "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8.6"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/jonschlinkert"
+            }
+        },
+        "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/pstree.remy": {
+            "version": "1.1.8",
+            "resolved": "https://registry.npmjs.org/pstree.remy/-/pstree.remy-1.1.8.tgz",
+            "integrity": "sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "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.2",
+            "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz",
+            "integrity": "sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==",
+            "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/readdirp": {
+            "version": "3.6.0",
+            "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+            "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "picomatch": "^2.2.1"
+            },
+            "engines": {
+                "node": ">=8.10.0"
+            }
+        },
+        "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/semver": {
+            "version": "7.6.2",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz",
+            "integrity": "sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==",
+            "dev": true,
+            "license": "ISC",
+            "bin": {
+                "semver": "bin/semver.js"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "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/set-function-length": {
+            "version": "1.2.2",
+            "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+            "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+            "dependencies": {
+                "define-data-property": "^1.1.4",
+                "es-errors": "^1.3.0",
+                "function-bind": "^1.1.2",
+                "get-intrinsic": "^1.2.4",
+                "gopd": "^1.0.1",
+                "has-property-descriptors": "^1.0.2"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
+        "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.6",
+            "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz",
+            "integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==",
+            "dependencies": {
+                "call-bind": "^1.0.7",
+                "es-errors": "^1.3.0",
+                "get-intrinsic": "^1.2.4",
+                "object-inspect": "^1.13.1"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/simple-update-notifier": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-2.0.0.tgz",
+            "integrity": "sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "semver": "^7.5.3"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "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/to-regex-range": {
+            "version": "5.0.1",
+            "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+            "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "is-number": "^7.0.0"
+            },
+            "engines": {
+                "node": ">=8.0"
+            }
+        },
+        "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/touch": {
+            "version": "3.1.1",
+            "resolved": "https://registry.npmjs.org/touch/-/touch-3.1.1.tgz",
+            "integrity": "sha512-r0eojU4bI8MnHr8c5bNo7lJDdI2qXlWWJk6a9EAFG7vbhTjElYhBVS3/miuE0uOuoLdb8Mc/rVfsmm6eo5o9GA==",
+            "dev": true,
+            "license": "ISC",
+            "bin": {
+                "nodetouch": "bin/nodetouch.js"
+            }
+        },
+        "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/undefsafe": {
+            "version": "2.0.5",
+            "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz",
+            "integrity": "sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "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
index a09003bcc..96a9119cb 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,8 @@
     "doc": "docs"
   },
   "scripts": {
-    "start": "node server.js"
+    "start": "node server.js",
+    "dev": "nodemon server.js"
   },
   "repository": {
     "type": "git",
@@ -27,6 +28,7 @@
   "homepage": "https://github.com/fdnd-task/pleasurable-ui#readme",
   "dependencies": {
     "ejs": "^3.1.10",
-    "express": "^4.19.2"
+    "express": "^4.19.2",
+    "nodemon": "^3.1.0"
   }
 }
diff --git a/public/assets/favicon.png b/public/assets/favicon.png
new file mode 100644
index 000000000..ba0c8fc93
Binary files /dev/null and b/public/assets/favicon.png differ
diff --git a/public/assets/font/ProximaNova-Black.woff b/public/assets/font/ProximaNova-Black.woff
new file mode 100644
index 000000000..794921ac6
Binary files /dev/null and b/public/assets/font/ProximaNova-Black.woff differ
diff --git a/public/assets/font/ProximaNova-Black.woff2 b/public/assets/font/ProximaNova-Black.woff2
new file mode 100644
index 000000000..173cce598
Binary files /dev/null and b/public/assets/font/ProximaNova-Black.woff2 differ
diff --git a/public/assets/font/ProximaNova-BlackIt.woff b/public/assets/font/ProximaNova-BlackIt.woff
new file mode 100644
index 000000000..3ad23f13f
Binary files /dev/null and b/public/assets/font/ProximaNova-BlackIt.woff differ
diff --git a/public/assets/font/ProximaNova-BlackIt.woff2 b/public/assets/font/ProximaNova-BlackIt.woff2
new file mode 100644
index 000000000..5db7303a4
Binary files /dev/null and b/public/assets/font/ProximaNova-BlackIt.woff2 differ
diff --git a/public/assets/font/ProximaNova-Bold.woff b/public/assets/font/ProximaNova-Bold.woff
new file mode 100644
index 000000000..13f808cab
Binary files /dev/null and b/public/assets/font/ProximaNova-Bold.woff differ
diff --git a/public/assets/font/ProximaNova-Bold.woff2 b/public/assets/font/ProximaNova-Bold.woff2
new file mode 100644
index 000000000..b201aa6d4
Binary files /dev/null and b/public/assets/font/ProximaNova-Bold.woff2 differ
diff --git a/public/assets/font/ProximaNova-BoldIt.woff b/public/assets/font/ProximaNova-BoldIt.woff
new file mode 100644
index 000000000..1f0a49489
Binary files /dev/null and b/public/assets/font/ProximaNova-BoldIt.woff differ
diff --git a/public/assets/font/ProximaNova-BoldIt.woff2 b/public/assets/font/ProximaNova-BoldIt.woff2
new file mode 100644
index 000000000..7c8b833c3
Binary files /dev/null and b/public/assets/font/ProximaNova-BoldIt.woff2 differ
diff --git a/public/assets/font/ProximaNova-Extrabld.woff b/public/assets/font/ProximaNova-Extrabld.woff
new file mode 100644
index 000000000..8cedbbeb0
Binary files /dev/null and b/public/assets/font/ProximaNova-Extrabld.woff differ
diff --git a/public/assets/font/ProximaNova-Extrabld.woff2 b/public/assets/font/ProximaNova-Extrabld.woff2
new file mode 100644
index 000000000..cf983630a
Binary files /dev/null and b/public/assets/font/ProximaNova-Extrabld.woff2 differ
diff --git a/public/assets/font/ProximaNova-ExtrabldIt.woff b/public/assets/font/ProximaNova-ExtrabldIt.woff
new file mode 100644
index 000000000..8ef7b63dd
Binary files /dev/null and b/public/assets/font/ProximaNova-ExtrabldIt.woff differ
diff --git a/public/assets/font/ProximaNova-ExtrabldIt.woff2 b/public/assets/font/ProximaNova-ExtrabldIt.woff2
new file mode 100644
index 000000000..7665296b1
Binary files /dev/null and b/public/assets/font/ProximaNova-ExtrabldIt.woff2 differ
diff --git a/public/assets/font/ProximaNova-Light.woff b/public/assets/font/ProximaNova-Light.woff
new file mode 100644
index 000000000..38ef3a4d6
Binary files /dev/null and b/public/assets/font/ProximaNova-Light.woff differ
diff --git a/public/assets/font/ProximaNova-Light.woff2 b/public/assets/font/ProximaNova-Light.woff2
new file mode 100644
index 000000000..9162a066c
Binary files /dev/null and b/public/assets/font/ProximaNova-Light.woff2 differ
diff --git a/public/assets/font/ProximaNova-LightIt.woff b/public/assets/font/ProximaNova-LightIt.woff
new file mode 100644
index 000000000..9f23d6339
Binary files /dev/null and b/public/assets/font/ProximaNova-LightIt.woff differ
diff --git a/public/assets/font/ProximaNova-LightIt.woff2 b/public/assets/font/ProximaNova-LightIt.woff2
new file mode 100644
index 000000000..54361cded
Binary files /dev/null and b/public/assets/font/ProximaNova-LightIt.woff2 differ
diff --git a/public/assets/font/ProximaNova-Medium.woff b/public/assets/font/ProximaNova-Medium.woff
new file mode 100644
index 000000000..3bda6d7b3
Binary files /dev/null and b/public/assets/font/ProximaNova-Medium.woff differ
diff --git a/public/assets/font/ProximaNova-Medium.woff2 b/public/assets/font/ProximaNova-Medium.woff2
new file mode 100644
index 000000000..5e8332d20
Binary files /dev/null and b/public/assets/font/ProximaNova-Medium.woff2 differ
diff --git a/public/assets/font/ProximaNova-MediumIt.woff b/public/assets/font/ProximaNova-MediumIt.woff
new file mode 100644
index 000000000..b91d928f8
Binary files /dev/null and b/public/assets/font/ProximaNova-MediumIt.woff differ
diff --git a/public/assets/font/ProximaNova-MediumIt.woff2 b/public/assets/font/ProximaNova-MediumIt.woff2
new file mode 100644
index 000000000..8ac96d037
Binary files /dev/null and b/public/assets/font/ProximaNova-MediumIt.woff2 differ
diff --git a/public/assets/font/ProximaNova-Regular.woff b/public/assets/font/ProximaNova-Regular.woff
new file mode 100644
index 000000000..912d8d3fb
Binary files /dev/null and b/public/assets/font/ProximaNova-Regular.woff differ
diff --git a/public/assets/font/ProximaNova-Regular.woff2 b/public/assets/font/ProximaNova-Regular.woff2
new file mode 100644
index 000000000..a1f589685
Binary files /dev/null and b/public/assets/font/ProximaNova-Regular.woff2 differ
diff --git a/public/assets/font/ProximaNova-RegularIt.woff b/public/assets/font/ProximaNova-RegularIt.woff
new file mode 100644
index 000000000..ead931039
Binary files /dev/null and b/public/assets/font/ProximaNova-RegularIt.woff differ
diff --git a/public/assets/font/ProximaNova-RegularIt.woff2 b/public/assets/font/ProximaNova-RegularIt.woff2
new file mode 100644
index 000000000..a03020181
Binary files /dev/null and b/public/assets/font/ProximaNova-RegularIt.woff2 differ
diff --git a/public/assets/font/ProximaNova-Semibold.woff b/public/assets/font/ProximaNova-Semibold.woff
new file mode 100644
index 000000000..96fcc5f03
Binary files /dev/null and b/public/assets/font/ProximaNova-Semibold.woff differ
diff --git a/public/assets/font/ProximaNova-Semibold.woff2 b/public/assets/font/ProximaNova-Semibold.woff2
new file mode 100644
index 000000000..30b3b93e5
Binary files /dev/null and b/public/assets/font/ProximaNova-Semibold.woff2 differ
diff --git a/public/assets/font/ProximaNova-SemiboldIt.woff b/public/assets/font/ProximaNova-SemiboldIt.woff
new file mode 100644
index 000000000..bd2fa5a9a
Binary files /dev/null and b/public/assets/font/ProximaNova-SemiboldIt.woff differ
diff --git a/public/assets/font/ProximaNova-SemiboldIt.woff2 b/public/assets/font/ProximaNova-SemiboldIt.woff2
new file mode 100644
index 000000000..924c7de31
Binary files /dev/null and b/public/assets/font/ProximaNova-SemiboldIt.woff2 differ
diff --git a/public/assets/font/ProximaNova-ThinIt.woff b/public/assets/font/ProximaNova-ThinIt.woff
new file mode 100644
index 000000000..3529452ee
Binary files /dev/null and b/public/assets/font/ProximaNova-ThinIt.woff differ
diff --git a/public/assets/font/ProximaNova-ThinIt.woff2 b/public/assets/font/ProximaNova-ThinIt.woff2
new file mode 100644
index 000000000..3ec2b1d9a
Binary files /dev/null and b/public/assets/font/ProximaNova-ThinIt.woff2 differ
diff --git a/public/assets/font/ProximaNovaT-Thin.woff b/public/assets/font/ProximaNovaT-Thin.woff
new file mode 100644
index 000000000..1f4c13369
Binary files /dev/null and b/public/assets/font/ProximaNovaT-Thin.woff differ
diff --git a/public/assets/font/ProximaNovaT-Thin.woff2 b/public/assets/font/ProximaNovaT-Thin.woff2
new file mode 100644
index 000000000..fdbaff8d5
Binary files /dev/null and b/public/assets/font/ProximaNovaT-Thin.woff2 differ
diff --git a/public/assets/font/stylesheet.css b/public/assets/font/stylesheet.css
new file mode 100644
index 000000000..3ab69ebb4
--- /dev/null
+++ b/public/assets/font/stylesheet.css
@@ -0,0 +1,198 @@
+@font-face {
+    font-family: 'Proxima Nova';
+    src: url('ProximaNova-BoldIt.woff2') format('woff2'),
+        url('ProximaNova-BoldIt.woff') format('woff');
+    font-weight: bold;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Proxima Nova';
+    src: url('ProximaNova-Extrabld.woff2') format('woff2'),
+        url('ProximaNova-Extrabld.woff') format('woff');
+    font-weight: 800;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Proxima Nova';
+    src: url('ProximaNova-Bold.woff2') format('woff2'),
+        url('ProximaNova-Bold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Proxima Nova';
+    src: url('ProximaNova-Black.woff2') format('woff2'),
+        url('ProximaNova-Black.woff') format('woff');
+    font-weight: 900;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Proxima Nova';
+    src: url('ProximaNova-Light.woff2') format('woff2'),
+        url('ProximaNova-Light.woff') format('woff');
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Proxima Nova';
+    src: url('ProximaNova-ExtrabldIt.woff2') format('woff2'),
+        url('ProximaNova-ExtrabldIt.woff') format('woff');
+    font-weight: 800;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Proxima Nova';
+    src: url('ProximaNova-LightIt.woff2') format('woff2'),
+        url('ProximaNova-LightIt.woff') format('woff');
+    font-weight: 300;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Proxima Nova';
+    src: url('ProximaNova-BlackIt.woff2') format('woff2'),
+        url('ProximaNova-BlackIt.woff') format('woff');
+    font-weight: 900;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Proxima Nova';
+    src: url('ProximaNova-Medium.woff2') format('woff2'),
+        url('ProximaNova-Medium.woff') format('woff');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Proxima Nova';
+    src: url('ProximaNova-Regular.woff2') format('woff2'),
+        url('ProximaNova-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Proxima Nova';
+    src: url('ProximaNova-Regular.woff2') format('woff2'),
+        url('ProximaNova-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Proxima Nova';
+    src: url('ProximaNova-Semibold.woff2') format('woff2'),
+        url('ProximaNova-Semibold.woff') format('woff');
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Proxima Nova';
+    src: url('ProximaNova-RegularIt.woff2') format('woff2'),
+        url('ProximaNova-RegularIt.woff') format('woff');
+    font-weight: normal;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Proxima Nova';
+    src: url('ProximaNova-Semibold.woff2') format('woff2'),
+        url('ProximaNova-Semibold.woff') format('woff');
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Proxima Nova';
+    src: url('ProximaNova-SemiboldIt.woff2') format('woff2'),
+        url('ProximaNova-SemiboldIt.woff') format('woff');
+    font-weight: 600;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Proxima Nova';
+    src: url('ProximaNova-Semibold.woff2') format('woff2'),
+        url('ProximaNova-Semibold.woff') format('woff');
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Proxima Nova';
+    src: url('ProximaNovaT-Thin.woff2') format('woff2'),
+        url('ProximaNovaT-Thin.woff') format('woff');
+    font-weight: 100;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Proxima Nova';
+    src: url('ProximaNova-MediumIt.woff2') format('woff2'),
+        url('ProximaNova-MediumIt.woff') format('woff');
+    font-weight: 500;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Proxima Nova';
+    src: url('ProximaNova-ThinIt.woff2') format('woff2'),
+        url('ProximaNova-ThinIt.woff') format('woff');
+    font-weight: 100;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Proxima Nova';
+    src: url('ProximaNova-RegularIt.woff2') format('woff2'),
+        url('ProximaNova-RegularIt.woff') format('woff');
+    font-weight: normal;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Proxima Nova';
+    src: url('ProximaNova-SemiboldIt.woff2') format('woff2'),
+        url('ProximaNova-SemiboldIt.woff') format('woff');
+    font-weight: 600;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Proxima Nova';
+    src: url('ProximaNova-Regular.woff2') format('woff2'),
+        url('ProximaNova-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
diff --git a/public/assets/icons/agent-img.svg b/public/assets/icons/agent-img.svg
new file mode 100644
index 000000000..bb5f4e8b2
--- /dev/null
+++ b/public/assets/icons/agent-img.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:v="https://vecta.io/nano" width="140" height="104" fill="none"><style><![CDATA[.B{fill:#fdcc2e}.C{fill:#694039}.D{fill:#ffb70a}.E{fill:#0071b3}.F{fill:#53241b}.G{fill-rule:evenodd}.H{fill:#00a8e8}.I{fill:#00558f}.J{fill:#f97d00}.K{fill:#8f5344}]]></style><g fill="#f8fdff"><path d="M139.917 73.078v-.055a7.3 7.3 0 0 0 0-1.107v-.166c0-.138 0-.277-.027-.415 0-.055 0-.138-.028-.194 0-.111-.028-.249-.028-.36 0-.055-.027-.138-.027-.194-.028-.111-.028-.249-.056-.36 0-.055-.027-.138-.027-.194l-.083-.415c0-.055-.028-.083-.028-.138-.028-.194-.083-.36-.138-.526 0-.028-.028-.055-.028-.083-.055-.138-.083-.304-.138-.443-.028-.055-.028-.111-.056-.166-.027-.111-.083-.221-.11-.36-.028-.055-.056-.111-.083-.194-.056-.111-.083-.221-.139-.332-.027-.055-.055-.111-.083-.194-.055-.111-.11-.221-.138-.332l-.083-.166c-.055-.138-.138-.249-.194-.387-.027-.028-.027-.055-.055-.083a4.12 4.12 0 0 0-.277-.47c-.027-.028-.055-.083-.083-.111l-.166-.277a7.5 7.5 0 0 1-1.134-2.905c-.194-1.217-.083-2.49.221-3.707a.97.97 0 0 0 .055-.277c.028-.083.056-.166.056-.277.027-.138.055-.277.055-.387.028-.083.028-.166.055-.249.028-.138.028-.304.056-.443 0-.083.027-.166.027-.221.028-.221.028-.415.028-.636v-.028-.055l-.028-.692c0-.083-.027-.166-.027-.277l-.056-.47c-.027-.111-.027-.194-.055-.304l-.083-.415-.083-.304c-.028-.138-.055-.277-.111-.387a1.33 1.33 0 0 0-.11-.304l-.139-.387c-.027-.111-.083-.194-.11-.304a1.9 1.9 0 0 1-.139-.36c-.055-.111-.083-.194-.138-.277l-.166-.332-.166-.277c-.055-.083-.083-.166-.138-.249-.637-1.024-1.052-2.185-1.162-3.347a7.35 7.35 0 0 1 .193-2.324c.028-.083.028-.166.056-.221 0-.055.027-.138.027-.194.028-.111.028-.194.056-.304 0-.055.027-.111.027-.194.028-.111.028-.221.028-.332 0-.055 0-.111.028-.166 0-.166.027-.304.027-.47v-.028-.36c0-.083 0-.166-.027-.277v-.083a7.93 7.93 0 0 0-7.609-7.193c-4.399-.138-8.162 3.513-8.162 7.912 0 .664.083 1.3.221 1.909.471 1.881.194 3.873-.857 5.505-1.024 1.604-1.633 3.486-1.633 5.533 0 .941.139 1.854.36 2.739.609 2.241.221 4.592-1.024 6.556-1.245 1.992-1.992 4.316-1.992 6.861 0 5.45 3.403 10.097 8.217 11.951h.028c.138.055.249.111.387.138.028 0 .083.028.111.028.194.055.415.138.609.194.083.028.138.028.221.055s.194.055.277.055c.111.028.194.055.304.055.083.028.166.028.249.055l.526.083c.055 0 .083 0 .138.028.139.028.305.028.443.055h.083v8.853h2.545v-8.797h.166c5.672-.609 10.376-5.062 11.234-10.706l.083-.692c0-.083.027-.194.027-.277-.027-.138 0-.249 0-.36z"/><path d="M18.012 92.277h114.545a6.86 6.86 0 0 1 6.862 6.861v.526H18.012v-7.386zm-10.32-68.3h16.02v22.768H7.692z"/><path d="M68.257 58.113h23.435c1.19 0 2.13.941 2.13 2.102v2.241a2.13 2.13 0 0 1-2.13 2.13h-.443v35.05h-3.016v-35.05H55.032l-.028 35.05H2.601V47.463L35.526 1.789l32.731 45.397v10.927zM10.514 87.576h16.463.028V64.891h-16.49v22.685zm18.15-62.189h13.004v17.899H28.664V25.387zm2.047 62.189h16.463.028V64.891h-16.49v22.685z" class="G"/><path d="M21.969 26.574H7.498c-.47 0-.885-.387-.885-.885v-1.273c0-.47.387-.885.885-.885h14.443v3.043h.028z"/><path d="M69.419 49.647c-.332 0-.692-.166-.913-.47L35.526 3.669 2.186 49.205a1.11 1.11 0 0 1-1.549.249 1.11 1.11 0 0 1-.249-1.549L34.945.737c.304-.415.885-.415 1.19 0l34.198 47.167a1.11 1.11 0 0 1-.249 1.549c-.194.138-.443.194-.664.194zM9.269 75.402H51.02v.913H9.269z"/><path d="M18.261 63.922h.968v25.202h-.968zm20.198 0h.968v25.202h-.968zM14.194 78.253c0 2.407-.747 4.343-.747 4.343s-.747-1.964-.747-4.343.747-4.343.747-4.343.747 1.936.747 4.343z"/><path d="M13.004 79.942c.553 1.715.47 3.513.47 3.513s-.996-.996-1.549-2.739c-.553-1.715-.47-3.513-.47-3.513s.996.996 1.549 2.739z"/><path d="M13.779 79.942c-.553 1.715-.47 3.513-.47 3.513s.996-.996 1.549-2.739c.553-1.715.47-3.513.47-3.513s-.996.996-1.549 2.739z"/><path d="M14.83 87.604h-2.905l-.498-5.644h3.901l-.498 5.644z"/><path d="M15.162 83.869l.028-.498h-3.652l.055.498h3.569zm10.293.829l.498-1.549h-1.964l.498 1.549a1.53 1.53 0 0 0-1.051 1.466c0 .858.692 1.549 1.549 1.549s1.549-.692 1.549-1.549a1.62 1.62 0 0 0-1.079-1.466zm-10.459.911c.166 1.134 1.134 2.02 2.324 2.02s2.158-.885 2.324-2.02h-4.648z"/><path d="M81.372 79.608h-.166l-3.182-8.714c-.221-.581-.775-.968-1.383-.968H66.127c-.636 0-1.19.387-1.383.968l-3.182 8.714h-.166c-1.715 0-3.071 1.383-3.071 3.071v4.371a1.05 1.05 0 0 0 1.051 1.051h.138v3.486c0 .387.332.719.719.719h2.933c.387 0 .719-.332.719-.719v-3.486h14.968v3.486c0 .387.332.719.719.719h2.933c.387 0 .719-.332.719-.719v-3.486h.138a1.05 1.05 0 0 0 1.051-1.051v-4.371c.028-1.687-1.356-3.071-3.043-3.071zm-19.81 5.727c-.802 0-1.466-.664-1.466-1.466s.664-1.466 1.466-1.466 1.466.664 1.466 1.466-.664 1.466-1.466 1.466zm12.976.498c.249 0 .47-.221.47-.47v-1.051c0-.249-.221-.47-.47-.47h-6.336c-.249 0-.47.221-.47.47v1.051c0 .249.221.47.47.47h6.336zm-11.399-6.225l2.878-8.382h10.652l2.877 8.382H63.138zm16.601 4.26c0 .802.664 1.466 1.466 1.466s1.466-.664 1.466-1.466-.664-1.466-1.466-1.466-1.466.664-1.466 1.466z" class="G"/></g><path d="M39.842 49.674c-.221 0-.47-.055-.692-.138l-4.316-1.853c-.885-.387-1.3-1.411-.913-2.296s1.411-1.3 2.296-.913l4.316 1.854c.885.387 1.3 1.411.913 2.296-.277.664-.941 1.051-1.605 1.051z" fill="#66ba96"/><path d="M53.095 52.303c-.138 0-.304-.028-.443-.055l-7.996-2.102c-.941-.249-1.494-1.19-1.245-2.13s1.19-1.494 2.13-1.245l7.996 2.102c.941.249 1.494 1.19 1.245 2.13-.194.775-.913 1.3-1.688 1.3z" class="H"/><path d="M49.719 52.747h-.083l-3.735-.194c-.968-.055-1.715-.858-1.66-1.826s.858-1.687 1.826-1.66l3.735.194c.968.055 1.715.858 1.66 1.826-.055.941-.83 1.66-1.743 1.66z" fill="#66ba96"/><circle cx="59.486" cy="70.644" r="1.992" class="D"/><path d="M61.479 69.953l-1.992-9.074-2.656.055-.858 8.797 5.506.221z" fill="#acc700"/><path d="M58.933 61.02c-.332 0-.609.277-.609.609s.277.609.609.609.609-.277.609-.609-.277-.609-.609-.609zm-2.435 3.237l-.111 1.19h.111c.332 0 .609-.277.609-.609a.61.61 0 0 0-.609-.581zm3.514.636c0-.221.111-.387.249-.498l.249 1.079c-.277-.028-.498-.277-.498-.581z" fill="#c0d219" class="G"/><path d="M59.016 68.57l1.051 32.644-3.182.277-4.288-32.395 6.419-.526z" class="H"/><path d="M63.415 103.566h-6.502v-2.324h2.961l1.245.719c.47.277 1.024.415 1.577.415.387 0 .719.332.719.72v.47z" class="E"/><g fill="#6dcbf7"><path d="M57.439 69.814h-7.664a1.91 1.91 0 0 1-1.909-1.798l-.138-2.02h11.731l.028 1.77c0 1.134-.913 2.047-2.047 2.047z"/><path d="M55.225 69.399l-3.458 31.952-3.182-.166.221-32.146 6.419.36z"/></g><path d="M55.143 103.566h-6.502v-2.324h2.961l1.245.719c.47.277 1.024.415 1.577.415.387 0 .719.332.719.72v.47z" class="E"/><circle cx="54.091" cy="48.097" r="1.328" class="C"/><path d="M60.206 63.369c0-.028.028-.083.028-.111 0 .028 0 .055-.028.111z" fill="#0072ba"/><path d="M46.953 55.209l-.028 10.429c.055.664.609 1.19 1.273 1.19h11.427l-.083-6.722.415-.968c.443-1.051.443-2.269-.055-3.292-1.134-2.462-3.403-6.695-5.423-6.529l-4.261-.028c-2.877.249-3.514 3.071-3.265 5.92z" fill="#acc700"/><path d="M54.838 49.95c.277 0 .498-.194.581-.443-.332-.166-.636-.249-.968-.221h-.221v.055c0 .332.277.609.609.609zm1.051 2.656c0-.332.277-.609.609-.609s.609.277.609.609-.277.609-.609.609-.609-.277-.609-.609zm2.435 2.877c0-.332.277-.609.609-.609s.609.277.609.609-.277.609-.609.609-.609-.277-.609-.609zm-2.435 3.237c0-.332.277-.609.609-.609s.609.277.609.609-.277.609-.609.609-.609-.277-.609-.609zm-8.937-3.735c0 .083 0 .138.028.221v.802a.62.62 0 0 0 .277-.498c-.028-.249-.138-.443-.304-.526zm13.087 3.901c-.028-.055-.028-.111-.028-.166a.55.55 0 0 1 .194-.443c-.028.194-.083.415-.166.609zm-11.759 5.367c-.332 0-.609.277-.609.609s.277.609.609.609.609-.277.609-.609-.277-.609-.609-.609zm1.854-14.966h.055 1.162v.055c0 .332-.277.609-.609.609s-.609-.277-.609-.609v-.055zm-3.182 11.813v1.024a.63.63 0 0 0 .277-.526c0-.194-.111-.387-.277-.498zm8.937 3.762c0-.332.277-.609.609-.609s.609.277.609.609-.277.609-.609.609-.609-.277-.609-.609zm-1.051-9.987c-.332 0-.609.277-.609.609s.277.609.609.609.609-.277.609-.609-.277-.609-.609-.609zm-4.731 6.75c0-.332.277-.609.609-.609.36 0 .609.277.609.609s-.277.609-.609.609-.609-.277-.609-.609zm-1.826-3.513c-.332 0-.609.277-.609.609s.277.609.609.609.609-.277.609-.609-.277-.609-.609-.609zm1.826-2.628c0-.332.277-.609.609-.609.36 0 .609.277.609.609s-.277.609-.609.609-.609-.277-.609-.609zm8.826 5.533c-.332 0-.609.277-.609.609s.277.609.609.609.609-.277.609-.609-.277-.609-.609-.609zm-11.261-8.41c0-.332.277-.609.609-.609s.609.277.609.609-.277.609-.609.609-.609-.277-.609-.609zm4.731-.609c-.332 0-.609.277-.609.609s.277.609.609.609.609-.277.609-.609-.277-.609-.609-.609zm1.826 9.627c0-.332.277-.609.609-.609s.609.277.609.609-.277.609-.609.609-.609-.277-.609-.609zm-1.826-3.513c-.332 0-.609.277-.609.609s.277.609.609.609.609-.277.609-.609-.277-.609-.609-.609zm-.609 6.75c0-.332.277-.609.609-.609s.609.277.609.609-.277.609-.609.609-.609-.277-.609-.609z" fill="#c0d219" class="G"/><path d="M55.474 49.093s.055 3.596-.747 3.569c-2.047-.028-3.874-3.347-3.874-3.347l-.111-5.754 4.344-.498.387 6.031z" class="D"/><path d="M55.392 49.48l.083-.387-.028-2.296c-.332.083-3.431.553-3.431.553l3.375 2.13z" fill="#f7a100"/><path d="M54.589 48.268a5.96 5.96 0 0 1-5.727-6.169l.277-7.165c.083-2.047 1.798-3.652 3.874-3.596l4.814.194c1.854.083 3.292 1.632 3.237 3.486l-.277 7.525c-.138 3.292-2.905 5.865-6.198 5.727z" class="D"/><path d="M54.257 42.676c-.111 0-.194.083-.166.194.194.858.941 1.522 1.854 1.577s1.715-.498 2.02-1.328c.055-.111-.055-.249-.166-.249l-3.541-.194z" fill="#fff"/><path d="M48.502 39.358c-.028-1.494-.609-2.213-.609-4.122.028-5.201 4.703-6.584 7.719-6.252 5.534.609 6.696 4.952 6.751 7.137.028 1.134-.636 3.181-1.051 4.343-.166.47-.747.553-1.079.194-.775-.913-1.715-2.434-1.715-2.434l.221 1.383c.083.498-.526.802-.885.443-.968-.996-1.881-2.324-1.881-2.324l.083 1.3c.028.47-.526.747-.885.415-1.549-1.494-2.656-4.094-2.656-4.094-.415 2.351-1.881 4.288-2.822 5.339-.332.36-.941.194-1.024-.304l-.166-1.024zm5.147 64.208h-6.502v-2.324h2.96l1.245.719c.47.277 1.024.415 1.577.415.387 0 .719.332.719.72v.47z" class="J"/><path d="M46.676 65.418l3.486 35.797-3.292.443L40.7 66.22l5.976-.802z" class="C"/><path d="M41.087 68.402h3.154l-2.85 1.494-.304-1.494z" class="F"/><path d="M46.731 66.22c-.055 1.217-1.051 2.185-2.269 2.185h-7.719c-.996 0-1.854-.802-1.909-1.853l-.138-2.102h12.119l-.083 1.77z" class="C"/><path d="M40.7 103.566h-5.81l.055-2.324h3.154l.664.719s.664.415 1.19.415c.387 0 .719.332.719.72v.47h.028z" class="J"/><path d="M40.838 67.075l-2.628 34.276h-3.32l-.055-34.718 6.004.443z" class="C"/><path d="M33.368 51.171v12.56a1.37 1.37 0 0 0 1.383 1.383h11.925a1.12 1.12 0 0 0 1.134-1.134V50.23a3.7 3.7 0 0 0-3.68-3.679h-6.17c-2.518 0-4.593 2.075-4.593 4.62z" class="H"/><path d="M38.32 46.8c.221.885 1.3 2.517 3.763 2.517 2.186 0 3.044-1.522 3.099-2.628-.332-.111-.692-.138-1.051-.138h-5.838v.138l.028.111z" class="E"/><path d="M39.15 46.578s.47 1.881 2.933 1.881c2.241 0 2.241-1.881 2.241-1.881l-.304-3.707h-4.87v3.707z" class="B"/><path d="M44.352 46.163l-.332-3.292-3.542.913 3.874 2.379z" class="D"/><g class="F"><path d="M46.095 30.81c.083 1.439 1.3 2.545 2.739 2.462s2.545-1.3 2.462-2.739-1.3-2.545-2.739-2.462a2.64 2.64 0 0 0-2.462 2.739z"/><circle cx="48.087" cy="34.683" r="2.601"/><circle cx="47.202" cy="27.518" r="2.601"/><path d="M41.585 25.829c.083 1.439 1.3 2.545 2.739 2.462s2.545-1.3 2.462-2.739-1.3-2.545-2.739-2.462c-1.439.055-2.546 1.3-2.463 2.739z"/><path d="M38.154 26.271c.083 1.439 1.3 2.545 2.739 2.462s2.545-1.3 2.462-2.739-1.3-2.545-2.739-2.462-2.545 1.3-2.462 2.739z"/><path d="M34.751 28.567c.083 1.439 1.3 2.545 2.739 2.462s2.545-1.3 2.462-2.739-1.3-2.545-2.739-2.462c-1.439.055-2.545 1.3-2.462 2.739z"/><path d="M33.368 31.446c.083 1.438 1.3 2.545 2.739 2.462s2.545-1.3 2.462-2.739-1.3-2.545-2.739-2.462-2.545 1.3-2.462 2.739z"/><path d="M33.534 34.821c.083 1.438 1.3 2.545 2.739 2.462s2.545-1.3 2.462-2.739-1.3-2.545-2.739-2.462a2.64 2.64 0 0 0-2.462 2.739z"/><path d="M35.747 37.31c.083 1.439 1.3 2.545 2.739 2.462s2.545-1.3 2.462-2.739-1.3-2.545-2.739-2.462-2.545 1.3-2.462 2.739z"/></g><path d="M42.83 26.685c3.597-.194 6.668 2.573 6.834 6.169l.249 5.118c.194 3.596-2.573 6.667-6.17 6.833-3.597.194-6.668-2.573-6.834-6.169l-.249-5.118c-.194-3.596 2.573-6.639 6.17-6.833z" class="B"/><path d="M43.909 38.777c-.194 0-.36.194-.304.36a2.35 2.35 0 0 0 2.269 1.715c1.079 0 1.992-.692 2.269-1.688.055-.194-.083-.36-.277-.387h-3.957z" fill="#fff"/><g class="F"><path d="M38.68 32.469s3.597.996 6.668.83c4.261-.221 5.257-1.438 5.257-1.438l-1.356-3.458-1.909-1.522s-1.771-.194-2.02-.332c-.221-.138-1.771-.138-1.771-.138l-2.047.111-1.66.387-1.965 1.217.802 4.343z"/><path d="M39.593 33.685c-.111 3.292-2.324 3.513-3.32 3.596.111-1.577-.028-4.869-.083-6.473-.028-.913.111-1.798.387-2.573.249-.802.692-1.549 1.3-1.66.443-.083.913.249 1.217.775.47.802.194 1.826.332 2.822.194 1.217.194 2.407.166 3.513z"/></g><path d="M38.099 38.083c-1.051 0-1.909-.858-1.909-1.909s.858-1.909 1.909-1.909v3.818z" class="B"/><path d="M47.838 53.384l-.692-1.577c-.138-.332-.609-.332-.747 0l-1.964 4.454-1.964-4.454c-.138-.332-.609-.332-.747 0l-1.964 4.454-1.964-4.454c-.138-.332-.609-.332-.747 0l-1.965 4.454-1.66-3.735v7.635l1.66-3.735 1.965 4.454c.138.332.609.332.747 0l1.964-4.454 1.964 4.454c.138.332.609.332.747 0l1.964-4.454 1.964 4.454c.138.332.609.332.747 0l.692-1.577v-5.92z" fill="#0098d9"/><path d="M37.822 65.279c-.747.636-1.881.553-2.545-.194l-.885-1.024c-.636-.747-.553-1.881.194-2.545.747-.636 1.882-.553 2.546.194l.885 1.023c.636.775.553 1.909-.194 2.545z" class="B"/><path d="M36.909 51.004l-4.731 3.098-4.759 3.043.111-3.541 4.04 3.071 2.02 1.549 1.992 1.549c.858.664 1.024 1.909.36 2.794a2.03 2.03 0 0 1-2.712.415l-2.075-1.466-2.075-1.466-4.122-2.96c-.968-.692-1.162-2.019-.47-2.988a2.46 2.46 0 0 1 .553-.526l.028-.028 4.731-3.098 4.759-3.043a2.15 2.15 0 0 1 2.961.664c.636.968.36 2.296-.609 2.932z" class="H"/><circle cx="35.166" cy="46.799" r="2.241" class="D"/><g class="B"><circle cx="90.308" cy="35.952" r="2.269"/><path d="M88.178 32.023c-.332.028-.581.36-.526.692l.498 4.565 1.217-.138-.498-4.565c-.055-.36-.36-.609-.692-.553zm1.134-1.632c-.332.028-.581.36-.526.692l.498 4.565 1.217-.138-.498-4.565c-.055-.36-.36-.609-.692-.553z"/><path d="M90.474 30.973c-.332.055-.581.36-.526.692l.553 4.565 1.217-.166-.553-4.565c-.055-.332-.36-.581-.692-.526z"/><path d="M92.965 33.047c-.36-.111-.747.083-.885.443l-.941 2.766 1.328.443.941-2.767c.111-.36-.083-.747-.443-.885z"/></g><path d="M88.842 34.928a.25.25 0 0 1-.194-.083c-.111-.111-.083-.277.028-.387a2.46 2.46 0 0 1 2.739-.221.28.28 0 0 1 .111.36.28.28 0 0 1-.36.111c-1.134-.636-2.075.138-2.103.166-.083.028-.138.055-.221.055z" class="D"/><path fill="#fff" d="M105.498 65.469h4.427v4.426h-4.427z"/><path d="M102.372 52.882l-11.233-1.356c-2.269-.221-3.043-1.466-3.016-3.43v-10.9l4.178-.111.885 9.738 9.711 1.328c1.273.166 2.159 1.3 1.993 2.573s-1.245 2.324-2.518 2.158z" class="I"/><path d="M114.38 61.432c0-.028.028-.083.028-.111 0 .028 0 .055-.028.111z" fill="#0072b9"/><path d="M116.344 66.023c0 .277-.803 4.426-.803 4.426h-11.565a2.47 2.47 0 0 1-2.462-2.379l-.083-2.047h14.913z" class="E"/><path d="M102.759 66.465h12.644v1.051h-12.644z" class="C"/><path d="M108.237 66.133h.47v1.577h-.47zm-1.937.082h.47v1.577h-.47z" fill="#0068a9"/><g class="I"><path d="M101.099 61.817l-.554-9.544c.056-2.905 1.633-4.205 4.538-4.15h5.312c3.569 0 5.7 1.522 5.7 5.533l-.166 6.861 1.162 7.552a.66.66 0 0 1-.664.747h-5.7c-1.688 0-3.431-4.786-3.431-4.786s-2.075 4.73-4.067 4.73l-1.632.028c-.664 0-1.024-.443-.941-.996l.443-5.976z"/><path d="M104.945 48.125h-3.874l-.028 3.735 2.02-.194 1.882-3.375v-.166z"/></g><path d="M104.834 48.125l2.573 9.71 2.878-9.71h-5.451z" fill="#fff"/><path d="M104.17 101.822l3.68-33.197-6.17.166-.554 33.003 3.044.028z" class="E"/><path d="M107.573 70.449h-2.739l2.601 1.383.138-1.383z" class="I"/><path d="M107.712 52.135l.608-.858-.774-1.051-.83 1.051.664.83-.775 2.739.802 2.988.941-3.126-.636-2.573z" class="J"/><g class="B"><circle cx="107.435" cy="59.577" r=".553"/><circle cx="107.352" cy="62.124" r=".553"/></g><path d="M108.652 70.008h5.451v31.426h-3.431l-2.02-31.426z" class="E"/><path d="M110.312 48.124l.083-5.948h-5.146l-.415 5.948 2.739 2.102 2.739-2.102z" class="B"/><path d="M104.89 47.295l4.261-3.181-4.068.553-.193 2.628z" class="D"/><path d="M98.332 29.508l-.138 5.229c-.028 1.549 1.19 2.822 2.711 2.849l1.19.028.111-4.122-1.992-2.684-1.882-1.3z" class="C"/><path d="M105.277 45.66c-3.791-.083-6.779-2.573-6.696-6.363l.138-5.948c.083-3.79 3.237-6.778 7-6.667 3.79.083 6.778 3.237 6.668 6.999l-.139 5.948c-.083 3.79-3.209 6.141-6.972 6.031z" class="B"/><g class="C"><path d="M97.281 29.976c1.273-2.407 4.316-4.094 7.221-3.956 4.012.194 7.111 3.596 6.917 7.635l-.111 4.177s.36.138-.996-.609c-1.66-.885-1.466-4.067-1.466-4.067s-6.945-.498-8.3-.941c-2.076-.719-3.265-2.241-3.265-2.241z"/><path d="M105.886 26.047l2.379.055c2.601.055 4.648 2.213 4.593 4.814l-.111 4.067-6.861-8.935z"/><path d="M97.585 30.281c-1.937-1.854-1.881-3.79-.47-4.509 1.411-.747 2.905.553 2.905.553s-.138-1.604 1.522-1.743 2.158.996 2.158.996 1.522-1.355 3.237 1.107l-5.866 3.32-3.486.277zm11.261 2.876l-.055 1.826c-.028 1.549 1.19 2.822 2.711 2.849l1.19.028.111-4.122-1.992-2.683-1.965 2.103z"/></g><path d="M111.281 35.289c1.134.028 2.02.968 1.992 2.075-.028 1.134-.969 2.02-2.075 1.992l.083-4.067z" class="B"/><path d="M101.514 39.77c-.138 0-.221.138-.194.249.222 1.051 1.218 1.798 2.324 1.688s1.937-1.051 1.937-2.13c0-.138-.111-.221-.221-.221l-3.846.415z" fill="#fff"/><path d="M116.842 75.291h-1.162v-1.19a1.17 1.17 0 0 0-1.162-1.162h-1.467a1.17 1.17 0 0 0-1.162 1.162v1.19h-1.162v-1.19a2.34 2.34 0 0 1 2.324-2.324h1.467a2.34 2.34 0 0 1 2.324 2.324v1.19z" class="K"/><circle cx="113.798" cy="71.473" r="2.352" class="B"/><path d="M117.616 58.139l-1.743-7.193c-.415-1.411-1.079-2.822-3.818-2.822h-1.743l-.083 1.162h1.217a2.46 2.46 0 0 0-.304 1.19l2.407 9.738-2.02 9.932h4.566l1.549-7.967c.304-1.328.277-2.711-.028-4.039z" class="I"/><path d="M108.763 86.659h11.261c.442 0 .802-.36.802-.802V75.732c0-.443-.36-.802-.802-.802h-11.261v11.73z" class="F"/><path d="M106.771 86.659h2.545V74.93h-2.545c-.443 0-.803.36-.803.802v10.125c0 .443.36.802.803.802z" class="C"/><path d="M107.601 74.93h.277v11.73h-.277z" class="F"/><path d="M111.28 79.826h9.546v-4.094c0-.443-.36-.802-.803-.802h-10.707l1.19 4.316a.83.83 0 0 0 .774.581z" class="C"/><g fill="#f87d00"><use xlink:href="#B"/><use xlink:href="#C"/></g><g fill="#ffb60a"><use xlink:href="#B" x="0.249"/><use xlink:href="#C" x="0.221"/></g><path d="M97.668 103.564h6.668v-2.49h-3.292l-1.052.609c-.498.304-.802.47-1.411.47-.636 0-.941.526-.941.941v.47h.028z" class="K"/><path fill="#3e131b" d="M97.669 103.066h6.668v.498h-6.668z"/><path d="M108.099 103.564h6.142l-.083-2.49h-3.541l-.664.581c-.443.36-.415.498-.996.498-.637 0-.858.526-.858.941v.47h0z" class="K"/><path fill="#3e131b" d="M108.099 103.066h6.142v.498h-6.142z"/><path d="M88.123 37.223s.692 1.245 2.241 1.162c1.577-.083 1.937-1.245 1.937-1.245l-2.988-.636-1.19.719z" class="B"/><defs><path id="B" d="M117.561 80.572c.249 0 .443-.194.443-.443v-.609c0-.249-.194-.443-.443-.443s-.442.194-.442.443v.636c0 .221.193.415.442.415z"/><path id="C" d="M112.166 80.572c.249 0 .443-.194.443-.443v-.609c0-.249-.194-.443-.443-.443s-.443.194-.443.443v.636c0 .221.194.415.443.415z"/></defs></svg>
\ No newline at end of file
diff --git a/public/assets/icons/icon-close.svg b/public/assets/icons/icon-close.svg
new file mode 100644
index 000000000..bad950953
--- /dev/null
+++ b/public/assets/icons/icon-close.svg
@@ -0,0 +1 @@
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" role="presentation" viewBox="0 0 48 48" class="text-secondary-70"><path d="M26.12 24l10.61-10.61a1.5 1.5 0 000-2.12 1.5 1.5 0 00-2.12 0L24 21.88 13.39 11.27a1.5 1.5 0 10-2.12 2.12L21.88 24 11.27 34.61a1.5 1.5 0 102.12 2.12L24 26.12l10.61 10.61a1.5 1.5 0 002.12 0 1.5 1.5 0 000-2.12z" fill="#0071B3"></path></svg>
\ No newline at end of file
diff --git a/public/assets/icons/icon-energy.svg b/public/assets/icons/icon-energy.svg
new file mode 100644
index 000000000..0492c5986
--- /dev/null
+++ b/public/assets/icons/icon-energy.svg
@@ -0,0 +1 @@
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" role="presentation" viewBox="0 0 48 48" class="mr-1"><path d="M23.675 12.891l-6.852 13.063 7.032 1.628.492 7.872 7.31-13.373-7.51-1.63-.472-7.56zm2.45-8.897L27 18l6.274 1.362c1.62.351 2.295 1.818 1.5 3.274l-11.82 21.618c-.529.968-1.01.853-1.079-.248L21 30l-5.714-1.323c-1.612-.373-2.3-1.868-1.529-3.337L25.073 3.767c.511-.975.983-.874 1.052.227z" fill="#333333"></path></svg>
\ No newline at end of file
diff --git a/public/assets/icons/icon-garden.svg b/public/assets/icons/icon-garden.svg
new file mode 100644
index 000000000..6c9102f00
--- /dev/null
+++ b/public/assets/icons/icon-garden.svg
@@ -0,0 +1 @@
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" role="presentation" viewBox="0 0 48 48" class="mr-1"><path d="M43 5.5A1.5 1.5 0 0041.5 4h-35A1.5 1.5 0 005 5.5v37A1.5 1.5 0 006.5 44h35a1.5 1.5 0 001.5-1.5zm-35 9h13v5a1.5 1.5 0 001.5 1.5H30v20H8zm25 5a1.5 1.5 0 00-1.5-1.5H24v-5a1.5 1.5 0 00-1.5-1.5H8V7h32v34h-7z" fill="#333333"></path></svg>
\ No newline at end of file
diff --git a/public/assets/icons/icon-room.svg b/public/assets/icons/icon-room.svg
new file mode 100644
index 000000000..5233c661c
--- /dev/null
+++ b/public/assets/icons/icon-room.svg
@@ -0,0 +1 @@
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" role="presentation" viewBox="0 0 48 48" class="mr-1"><path d="M11 20l-3.999 5.999h33.998L37 20h3l3.999 5.999L44 26v9.5a1.5 1.5 0 01-1.5 1.5H39v1.5a1.5 1.5 0 01-3 0V37H12v1.5a1.5 1.5 0 01-3 0V37H5.5A1.5 1.5 0 014 35.5V26l.001-.001L8 20h3zm30 9H7v5h34v-5zM38.5 8A1.5 1.5 0 0140 9.5V20l-9-.001V21.5a1.5 1.5 0 01-1.5 1.5h-11a1.5 1.5 0 01-1.5-1.5v-1.501L8 20V9.5A1.5 1.5 0 019.5 8h29zM28 17h-8v3h8v-3zm9-6H11v5.999h6V15.5a1.5 1.5 0 011.5-1.5h11a1.5 1.5 0 011.5 1.5v1.499h6V11z" fill="#333333"></path></svg>
\ No newline at end of file
diff --git a/public/assets/icons/icon-size.svg b/public/assets/icons/icon-size.svg
new file mode 100644
index 000000000..0a7e04436
--- /dev/null
+++ b/public/assets/icons/icon-size.svg
@@ -0,0 +1 @@
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" role="presentation" viewBox="0 0 48 48" class="mr-1"><path d="M38.5 32.25v-16.5a5 5 0 10-6.25-6.25h-16.5a5 5 0 10-6.25 6.25v16.5a5 5 0 106.25 6.25h16.5a5 5 0 106.25-6.25zm-6.25 3.25h-16.5a5 5 0 00-3.25-3.25v-16.5a5 5 0 003.25-3.25h16.5a5 5 0 003.25 3.25v16.5a5 5 0 00-3.25 3.25zM37 9a2 2 0 11-2 2 2 2 0 012-2zM11 9a2 2 0 11-2 2 2 2 0 012-2zm0 30a2 2 0 112-2 2 2 0 01-2 2zm26 0a2 2 0 112-2 2 2 0 01-2 2z" fill="#333333"></path></svg>
\ No newline at end of file
diff --git a/public/assets/icons/icon-sort.svg b/public/assets/icons/icon-sort.svg
new file mode 100644
index 000000000..20e4f0e32
--- /dev/null
+++ b/public/assets/icons/icon-sort.svg
@@ -0,0 +1 @@
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" role="presentation" viewBox="0 0 48 48" class="mr-2 w-6 shrink-0"><rect width="36" height="3" x="6" y="12.5" rx="1.5" ry="1.5" fill="#0071B3"></rect><rect width="24" height="3" x="6" y="22.5" rx="1.5" ry="1.5" fill="#0071B3"></rect><rect width="12" height="3" x="6" y="32.5" rx="1.5" ry="1.5" fill="#0071B3"></rect></svg>
\ No newline at end of file
diff --git a/public/assets/icons/icon-user-2.svg b/public/assets/icons/icon-user-2.svg
new file mode 100644
index 000000000..69822bf36
--- /dev/null
+++ b/public/assets/icons/icon-user-2.svg
@@ -0,0 +1 @@
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" role="presentation" viewBox="0 0 48 48" class="-mt-0.5 mr-2"><path d="M24 9a8 8 0 108 8 8 8 0 00-8-8zm0 13a5 5 0 115-5 5 5 0 01-5 5z" fill="#0071B3"></path><path d="M24 3a21 21 0 1021 21A21 21 0 0024 3zm-9 36.56V35c0-2.45 2.12-4.48 4.91-4.91A7.16 7.16 0 0121 30h6a7.16 7.16 0 011.09.09C30.88 30.52 33 32.55 33 35v4.56a17.85 17.85 0 01-18 0zm21-2.19V34.5a1.48 1.48 0 00-.06-.4c-.5-4-4.31-7.1-8.94-7.1h-6c-4.63 0-8.44 3.11-8.94 7.1a1.48 1.48 0 00-.06.4v2.88a18 18 0 1124 0z" fill="#0071B3"></path></svg>
\ No newline at end of file
diff --git a/public/assets/icons/icon-user.svg b/public/assets/icons/icon-user.svg
new file mode 100644
index 000000000..d6248b207
--- /dev/null
+++ b/public/assets/icons/icon-user.svg
@@ -0,0 +1 @@
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" role="presentation" viewBox="0 0 48 48" aria-label="Account"><path d="M24 9a8 8 0 108 8 8 8 0 00-8-8zm0 13a5 5 0 115-5 5 5 0 01-5 5z" fill="#FFFFFF"></path><path d="M24 3a21 21 0 1021 21A21 21 0 0024 3zm-9 36.56V35c0-2.45 2.12-4.48 4.91-4.91A7.16 7.16 0 0121 30h6a7.16 7.16 0 011.09.09C30.88 30.52 33 32.55 33 35v4.56a17.85 17.85 0 01-18 0zm21-2.19V34.5a1.48 1.48 0 00-.06-.4c-.5-4-4.31-7.1-8.94-7.1h-6c-4.63 0-8.44 3.11-8.94 7.1a1.48 1.48 0 00-.06.4v2.88a18 18 0 1124 0z" fill="#FFFFFF"></path></svg>
\ No newline at end of file
diff --git a/public/fonts/ProximaNova-Bold_1760577842[2252].otf b/public/fonts/ProximaNova-Bold_1760577842[2252].otf
new file mode 100644
index 000000000..9d9115acb
Binary files /dev/null and b/public/fonts/ProximaNova-Bold_1760577842[2252].otf differ
diff --git a/public/fonts/ProximaNova-Medium_2770618388[2258].otf b/public/fonts/ProximaNova-Medium_2770618388[2258].otf
new file mode 100644
index 000000000..3dec3bf33
Binary files /dev/null and b/public/fonts/ProximaNova-Medium_2770618388[2258].otf differ
diff --git a/public/fonts/ProximaNova-Regular_2607783814.otf b/public/fonts/ProximaNova-Regular_2607783814.otf
new file mode 100644
index 000000000..5ff48703b
Binary files /dev/null and b/public/fonts/ProximaNova-Regular_2607783814.otf differ
diff --git a/public/fonts/ProximaNova-Semibold_3872794340.otf b/public/fonts/ProximaNova-Semibold_3872794340.otf
new file mode 100644
index 000000000..eec985975
Binary files /dev/null and b/public/fonts/ProximaNova-Semibold_3872794340.otf differ
diff --git a/public/scripts/detail.js b/public/scripts/detail.js
new file mode 100644
index 000000000..372e08243
--- /dev/null
+++ b/public/scripts/detail.js
@@ -0,0 +1,10 @@
+const price = document.querySelector(".house-price span");
+const priceValue = parseInt(price.textContent, 10);
+const priceFormatted = priceValue.toLocaleString("nl-NL");
+const formattedPrice = formatPrice(priceValue);
+
+function formatPrice(priceValue) {
+    return new Intl.NumberFormat("nl-NL").format(priceValue);
+}
+
+price.textContent = formattedPrice;
diff --git a/public/scripts/favorieten.js b/public/scripts/favorieten.js
new file mode 100644
index 000000000..52dc7eda7
--- /dev/null
+++ b/public/scripts/favorieten.js
@@ -0,0 +1,189 @@
+// Houd de positie van de cursor bij. Zet dit om naar een waarde tussen 0 en 1 & zet dit in een globaal variabel
+let normalizedX = 0;
+let normalizedY = 0;
+
+document.addEventListener("mousemove", function (e) {
+    normalizedX = e.clientX / window.innerWidth;
+    normalizedY = e.clientY / window.innerHeight;
+});
+
+// ---- Prijzen conversie ----
+
+// Functie om nummers te converteren voor leesbaarheid (30000 -> 30.000)
+const numberWithPeriods = (value) => {
+    return value.replace(/\B(?=(\d{3})+(?!\d))/g, ".");
+};
+
+// Zoek alle prijzen op de pagina en voer de eerdere functie hierop uit
+prices = document.querySelectorAll(".price");
+
+prices.forEach((price) => {
+    // Haal eerst het euroteken weg, zodat we enkel de waarde overhouden
+    // Deze zetten we hierna weer terug met een template literal
+    const priceValue = price.innerHTML.toString().replace("€", "");
+    price.innerHTML = `€${numberWithPeriods(priceValue)}`;
+});
+
+// ---- Confetti effect ----
+
+// Configureer de confetti
+const confettiDefaults = {
+    spread: 120,
+    // ticks: 20,
+    // gravity: 0,
+    // decay: 0.97,
+    startVelocity: 10,
+    shapes: ["star"],
+    colors: ["FFE400", "FFBD00", "E89400", "FFCA6C", "FDFFB8"],
+};
+
+function shootConfetti() {
+    confetti({
+        ...confettiDefaults,
+        particleCount: 15,
+        scalar: 0.8,
+        shapes: ["star"],
+        origin: { x: normalizedX, y: normalizedY },
+    });
+
+    confetti({
+        ...confettiDefaults,
+        particleCount: 4,
+        scalar: 0.4,
+        shapes: ["circle"],
+        origin: { x: normalizedX, y: normalizedY },
+    });
+}
+
+// ---- Rating form ----
+
+// Zorg ervoor dat de success states weer verdwijnen na de animatie
+document.querySelectorAll(".rating-success .tick").forEach((successEl) => {
+    successEl.addEventListener("animationend", () => {
+        successEl.classList.remove("draw");
+    });
+});
+
+// Onderdeel van de Progressive Enhancement feature voor het submitten op de eventListener van de radio buttons, verbergt de submit knop
+// Verberg alle submit knoppen op de rating forms
+document.querySelectorAll(".rating-form button").forEach((button) => {
+    button.classList.add("hidden");
+});
+
+// Rating form logica
+document.querySelectorAll(".rating-form").forEach((form) => {
+    const radios = form.querySelectorAll("input[type=radio]");
+
+    // Voeg een eventListener toe aan elke radio button
+    radios.forEach((radio) => {
+        radio.addEventListener("change", (event) => {
+            const id = form.dataset.id;
+            const rating = event.target.value;
+            const loaderEl = form.querySelector(".loader");
+            const successEl = form.querySelector(".rating-success .tick");
+
+            // Als de radio button gecheckt is (want de 'change' event wordt ook uitgevoerd als een radio button unchecked wordt)
+            if (event.target.checked) {
+                // Als de rating 5 is, schiet dan confetti
+                if (rating == 5) {
+                    shootConfetti();
+                }
+                // Roep de RatingHandler functie aan met de juiste parameters
+                ratingHandler(id, rating, loaderEl, successEl);
+            }
+        });
+    });
+});
+
+// Verberg alle submit knoppen op de rating forms
+document.querySelectorAll(".rating-form button").forEach((button) => {
+    button.classList.add("hidden");
+});
+
+// POST request handler voor het sturen van een rating
+function ratingHandler(id, rating, loaderEl, successEl) {
+    // Toon de loading state
+    if (loaderEl.classList.contains("hidden")) {
+        loaderEl.classList.remove("hidden");
+    }
+    try {
+        // POST request naar de server met de rating
+        // (URL: "/rate/:id/:rating", e.g. "/rate/6/5")
+
+        // throw "Debug error";
+        fetch(`/rate/${id}/${rating}`, {
+            method: "POST",
+        })
+            .then((response) => response.json())
+            .then((data) => {
+                // Verberg de loader en toon de success state
+                loaderEl.classList.add("hidden");
+                successEl.classList.add("draw");
+            });
+    } catch (error) {
+        // Log eventuele errors en verberg de loader
+        console.error(error);
+        loaderEl.classList.add("hidden");
+        // Gebruik Toastify om een toast notificatie te weergeven als error state
+        Toastify({
+            text: "Beoordeling niet opgeslagen. Probeer het later nog eens. ",
+            duration: 3000,
+            close: true,
+            gravity: "top",
+            position: "right",
+            stopOnFocus: true,
+            style: {
+                background: "linear-gradient(to right, #ad2429, #9e181c)",
+            },
+        }).showToast();
+    }
+}
+
+// ---- Dialog venster ----
+const dialogList = document.querySelector("#dialog-list");
+const dialogLeden = document.querySelector("#dialog-leden");
+const btnDialogs = document.querySelectorAll(".btn-dialog");
+const btnCloseDialogs = document.querySelectorAll(".btn-close-dialog");
+
+btnDialogs.forEach((btnDialog, index) => {
+    btnDialog.addEventListener("click", () => {
+        // console.log(index);
+        if (index == 1) {
+            dialogLeden.showModal();
+        } else {
+            dialogList.showModal();
+        }
+    });
+});
+
+btnCloseDialogs.forEach((btnClose, index) => {
+    btnClose.addEventListener("click", () => {
+        // console.log(index);
+        if (index == 1) {
+            dialogLeden.close();
+        } else {
+            dialogList.close();
+        }
+    })
+});
+
+/* ---- Footer ---- */
+
+// Voeg een class toe aan de ul elementen om ze zichtbaar te maken als JS werkt
+document.addEventListener("DOMContentLoaded", function () {
+    document.querySelectorAll(".footer-col ul").forEach(function (ul) {
+        ul.classList.add("js-enabled");
+    });
+
+    // Voeg click event listeners toe aan de titels
+    document.querySelectorAll(".footer-title").forEach(function (button) {
+        button.addEventListener("click", function () {
+            let ul = this.nextElementSibling;
+            if (ul.style.display === "block") {
+                ul.style.display = "none";
+            } else {
+                ul.style.display = "block";
+            }
+        });
+    });
+});
diff --git a/public/styles/detail.css b/public/styles/detail.css
new file mode 100644
index 000000000..11bedcd94
--- /dev/null
+++ b/public/styles/detail.css
@@ -0,0 +1,51 @@
+img {
+    width: 100%;
+    height: auto;
+    object-fit: cover;
+}
+
+.house-container {
+    margin-top: 1rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+}
+
+.house-name {
+    font-size: 1.5rem;
+}
+
+.house-code {
+    color: #999;
+    font-size: 1rem;
+}
+
+.house-width {
+    margin-top: 5px;
+    color: orange;
+}
+
+.house-agent {
+    color: #0071b3;
+    margin-top: 5px;
+}
+
+.house-price {
+    margin-top: 10px;
+    font-size: 1.25rem;
+    font-weight: 700;
+}
+
+.house-price::after {
+    content: "";
+    display: block;
+    width: 100%;
+    height: 1px;
+    margin-top: 10px;
+    background-color: rgb(218, 218, 218);
+}
+
+.heading {
+    margin-top: 10px;
+    font-size: 1.25rem;
+    font-weight: 700;
+}
diff --git a/public/styles/style.css b/public/styles/style.css
new file mode 100644
index 000000000..2e1b0e881
--- /dev/null
+++ b/public/styles/style.css
@@ -0,0 +1,1029 @@
+/* ---- Global styles ---- */
+
+:root {
+    /* colors */
+    --white: #ffffff;
+    --web-orange: #f7a100;
+    --regent-blue: #e6f2f7;
+    --lochmara: #0071b3;
+    --mine-shaft: #333333;
+    --neutral: #999999;
+    --neutral-2: #666666;
+    --silver: #cccccc;
+    --orange-darker: #de9000;
+    --bahama-blue: #006199;
+    --regent-blue-darker: #a2c9da;
+
+    --default-star: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 53.867 53.867" xml:space="preserve"><polygon fill="%23e6e6e6" points="26.934,1.318 35.256,18.182 53.867,20.887 40.4,34.013 43.579,52.549 26.934,43.798 10.288,52.549 13.467,34.013 0,20.887 18.611,18.182 "/></svg>');
+    --active-star: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 53.867 53.867" xml:space="preserve"><polygon fill="%23f7a100" points="26.934,1.318 35.256,18.182 53.867,20.887 40.4,34.013 43.579,52.549 26.934,43.798 10.288,52.549 13.467,34.013 0,20.887 18.611,18.182 "/></svg>');
+    --hover-star: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 53.867 53.867" xml:space="preserve"><polygon fill="%23fff0d4" points="26.934,1.318 35.256,18.182 53.867,20.887 40.4,34.013 43.579,52.549 26.934,43.798 10.288,52.549 13.467,34.013 0,20.887 18.611,18.182 "/></svg>');
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: "Proxima Nova", sans-serif;
+    font-size: 16px;
+    line-height: 1.5;
+    color: #333;
+}
+
+/* ---- Utility classes ---- */
+
+.underlined {
+    text-decoration: underline;
+}
+
+.layout-container {
+    max-width: 1032px;
+    padding: 1rem;
+    /* padding-top: 4.76rem; */
+    margin: auto;
+}
+
+.hidden {
+    display: none !important;
+}
+
+h1,
+h2,
+h3 {
+    color: var(--mine-shaft);
+}
+
+/* ======================================= */
+/* member section */
+/* ======================================= */
+section p {
+    color: var(--neutral-2);
+    margin-bottom: 0;
+}
+
+.member-list {
+    display: flex;
+    flex-direction: row;
+    justify-content: start;
+    align-items: center;
+    list-style-type: none;
+    overflow-x: scroll;
+    padding: 1rem 0;
+}
+
+.member-list .member-item {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-right: 1rem;
+    position: relative;
+    width: 5rem;
+    transition: 0.2s ease-in;
+}
+
+.member-list .member-item picture {
+    border-radius: 50%;
+    width: 3rem;
+    height: 3rem;
+    background-color: var(--web-orange);
+    overflow: hidden;
+}
+
+.member-list .member-item picture img {
+    width: 100%;
+    height: auto;
+    object-fit: cover;
+}
+
+.member-list .member-item:hover {
+    scale: 1.2;
+}
+
+.option-row {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 1rem;
+}
+
+.option-row .btn-blue {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--regent-blue);
+    margin-right: 1rem;
+    flex: 1;
+    outline: none;
+    border: 0.1rem solid var(--regent-blue);
+    padding: 0.5rem;
+    color: var(--lochmara);
+    border-radius: 0.25rem;
+    transition: 0.2s ease-in;
+}
+
+.option-row .btn-blue:hover {
+    border: 0.1rem solid var(--regent-blue-darker);
+    outline-offset: 1rem;
+}
+
+.option-row .btn-blue:last-child {
+    margin-right: 0;
+}
+
+.option-row .btn-blue:nth-child(2)::before {
+    content: url('../assets/icons/icon-sort.svg');
+    margin-right: 0.25rem;
+    width: 24px;
+    height: 24px;
+}
+
+.option-row .btn-blue:nth-child(3)::before {
+    content: url('../assets/icons/icon-user-2.svg');
+    margin-right: 0.25rem;
+    width: 24px;
+    height: 24px;
+}
+/* ======================================= */
+/* Dialog
+/* ======================================= */
+#dialog-list {
+    top: 16.2rem;
+}
+
+#dialog-leden {
+    top: 7.5rem;
+}
+
+dialog {
+    position: fixed;
+    /* bottom: 0; */
+    left: 50%;
+    transform: translateX(-50%);
+    width: 100%;
+    border-radius: 0.75rem 0.75rem 0 0;
+    border: none;
+    box-shadow: 0 -0.25rem 0.75rem rgb(0 0 0 / 0.2);
+    padding: 1rem;
+    z-index: 2;
+    overflow: hidden;
+}
+
+dialog::backdrop {
+    background-color: rgb(0 0 0 / 0.5);
+}
+
+dialog hr {
+    height: 0.1rem;
+    background-color: var(--silver);
+    outline: none;
+    border: none;
+    margin: 1rem 0;
+}
+
+dialog .title-row {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}
+
+dialog .title-row button {
+    background: none;
+    padding: 1rem;
+    color: var(--lochmara);
+    outline: none;
+    border: none;
+    font-size: 1rem;
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+dialog .title-row button:hover {
+    background-color: var(--silver);
+}
+
+dialog input {
+    width: 100%;
+    padding: 0.75rem;
+    border: 0.1rem solid var(--lochmara);
+    border-radius: 0.25rem;
+    margin-bottom: 1rem;
+}
+
+dialog input:focus,
+dialog button:focus {
+    border: 0.05rem solid var(--web-orange);
+    outline: 0.05rem solid var(--web-orange);
+}
+
+dialog .btn-primary-solid {
+    width: 100%;
+    background-color: var(--web-orange);
+    border: 0.1rem solid var(--web-orange);
+    color: var(--white);
+    padding: 0.75rem;
+    border-radius: 0.25rem;
+    margin-bottom: 1rem;
+}
+
+dialog .btn-primary-solid:hover {
+    background-color: var(--orange-darker);
+    border: 0.1rem solid var(--orange-darker);
+}
+
+dialog .btn-secondary-outline {
+    width: 100%;
+    background-color: var(--white);
+    border: 0.1rem solid var(--lochmara);
+    color: var(--lochmara);
+    padding: 0.75rem;
+    border-radius: 0.25rem;
+    margin-bottom: 1rem;
+}
+
+dialog .btn-secondary-outline:hover {
+    background-color: var(--regent-blue);
+}
+
+dialog .title-row .btn-close-dialog {
+    background-image: url('../assets/icons/icon-close.svg');
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+    width: 24px;
+    height: 24px;
+}
+
+/* ---- Header / Nav ---- */
+
+header {
+    background-color: var(--web-orange);
+    color: #fff;
+    display: flex;
+    /* width: 100vw; */
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+}
+
+nav {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
+
+/* Navbar layout */
+
+ul.nav {
+    list-style: none;
+    display: flex;
+    max-width: 61.5rem;
+    padding: 0rem 0.5rem;
+    justify-content: space-between;
+    align-items: center;
+    flex: 1 0 0;
+    width: 100%;
+}
+
+.nav-left {
+    display: flex;
+    height: 3.75rem;
+    justify-content: center;
+    align-items: center;
+}
+
+.nav-right {
+    display: flex;
+    height: 3.75rem;
+    justify-content: center;
+    align-items: center;
+}
+
+/* Nav items */
+
+nav li {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    padding: 0 0.75rem;
+}
+
+.left-item {
+    display: none;
+}
+
+nav a,
+nav button {
+    color: #fff;
+    text-decoration: none;
+
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+}
+
+nav button {
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+}
+
+.nav-right a,
+nav button {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+nav span {
+    font-size: 0.75rem;
+    margin-top: -0.2rem;
+    margin-bottom: 0.2rem;
+}
+
+/* Mobile nav */
+
+#mobile-menu-check {
+    display: none;
+}
+
+.li-menu label {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer;
+}
+
+.li-menu input[type="checkbox"] {
+    display: none;
+}
+
+.li-menu:has(input[type="checkbox"]:checked) {
+    background-color: var(--primary-color-2);
+}
+
+.nav-left:has(input[type="checkbox"]:checked) .mobile-nav {
+    height: 100vh;
+}
+
+.nav-left:has(input[type="checkbox"]:checked) .mobile-nav li {
+    opacity: 1;
+    height: 4rem;
+}
+
+.mobile-nav {
+    position: fixed;
+    width: 100vw;
+    height: 0vh;
+    top: 3.76rem;
+    background: white;
+    text-align: left;
+    transition: all 0.5s;
+    z-index: 1;
+    left: 0;
+}
+
+.mobile-nav > li {
+    opacity: 0;
+    line-height: 1.875rem;
+    height: 0;
+}
+
+.mobile-nav > li:hover {
+    background-color: var(--blue-light) !important;
+}
+
+.mobile-nav > li a {
+    color: black;
+}
+
+/* Logo & icons */
+
+nav svg {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+.li-logo svg {
+    margin-top: 0.3rem;
+    height: auto;
+    width: 5.625rem;
+}
+
+/* Hover */
+
+nav li:not(.li-logo):hover {
+    cursor: pointer;
+    background-color: var(--orange-darker);
+}
+
+/* Breadcumbs */
+
+.breadcrumbs {
+    display: flex;
+    align-items: center;
+    list-style-type: none;
+}
+
+.breadcrumbs > li {
+    color: var(--gray);
+}
+
+.breadcrumbs:last-child {
+    color: var(--lightgray);
+}
+
+.breadcrumbs > li::after {
+    content: ">";
+    width: 1em;
+    height: 1em;
+    margin: 0 0.75em;
+    color: var(--lightgray);
+}
+
+.breadcrumbs > li:last-child::after {
+    content: "";
+}
+
+/* ---- Footer ---- */
+
+.footer-container {
+    max-width: 95rem;
+    margin: auto;
+    padding: 0 4rem 2rem;
+}
+
+.row {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+
+.footer {
+    font-family: "Proxima Nova", sans-serif;
+    background-color: var(--color-footer);
+    padding: 4.375rem 0 0 0;
+    margin: 4.375rem 0 0 0;
+}
+
+.footer-col {
+    width: 25%;
+    padding: 0 15px;
+}
+
+.footer-col .footer-title {
+    display: flex;
+    align-items: center;
+    background: none;
+    border: none;
+    font-size: 1.125rem;
+    white-space: nowrap;
+    text-transform: capitalize;
+    font-weight: 500;
+    color: var(--color-black);
+    margin-bottom: 2.188rem;
+    position: relative;
+    cursor: pointer;
+}
+
+.footer-col .footer-title::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: -10px;
+    background-color: var(--primary-color);
+    height: 2px;
+    box-sizing: border-box;
+    width: 3.125rem;
+}
+
+.footer-col .footer-title svg {
+    fill: var(--blue);
+}
+
+.footer-col ul {
+    text-decoration: none;
+    list-style: none;
+}
+
+.footer-col ul li:not(:last-child) {
+    margin-bottom: 10px;
+}
+
+.footer-col ul li a {
+    font-size: 1rem;
+    text-transform: capitalize;
+    text-decoration: none;
+    font-weight: 300;
+    color: var(--blue);
+    display: block;
+    transition: all 0.3s ease;
+}
+
+.footer-col ul li a:hover {
+    color: var(--malibu);
+    padding-left: 8px;
+}
+
+.second-footer {
+    padding: 0 4rem;
+    background-color: var(--gray);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.second-footer .social-links {
+    display: flex;
+    padding: 0 15px;
+}
+
+.second-footer .social-links a {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 2.5rem;
+    width: 2.5rem;
+    padding: 1rem 0;
+    margin: 0.5rem;
+    background-color: var(--border-color);
+    text-align: center;
+    line-height: 2.5rem;
+    border-radius: 50%;
+    color: var(--primary-color-light);
+    transition: all 0.5s ease;
+}
+
+.second-footer .social-links svg {
+    fill: var(--blue);
+}
+
+.second-footer .social-links a:first-child {
+    margin: 0.5rem 0.5rem 0.5rem 0;
+}
+
+.second-footer .social-links a:hover {
+    color: var(--color-black);
+    background-color: var(--malibu);
+}
+
+.second-footer p,
+.second-footer a {
+    padding: 1rem 15px;
+    font-size: 0.75rem;
+    display: flex;
+    align-items: center;
+}
+
+.second-footer a.privacy-statement {
+    color: var(--blue-light);
+    transition: all 0.5s ease;
+    cursor: pointer;
+}
+
+.second-footer a.privacy-statement:hover {
+    color: var(--malibu);
+    transition: all 0.5s ease;
+}
+
+.second-footer a.language span {
+    margin-left: 5px;
+    text-align: center;
+    color: var(--blue-light);
+}
+
+.second-footer a.language svg {
+    fill: var(--malibu);
+}
+
+/* ---- Footer breakpoints ---- */
+
+@media (min-width: 768px) {
+    .footer-col .footer-title {
+        cursor: default;
+    }
+
+    .footer-col .footer-title svg {
+        display: none;
+    }
+}
+
+@media (max-width: 768px) {
+    .footer-container {
+        padding: 0 4rem 2rem;
+    }
+    .footer-col {
+        width: 50%;
+        margin-bottom: 1.875rem;
+    }
+}
+
+@media (max-width: 575px) {
+    .footer-col {
+        width: 100%;
+        padding: 0 4rem;
+    }
+
+    .second-footer {
+        padding: 0 4rem;
+        background-color: var(--gray);
+        display: flex;
+        flex-direction: column;
+    }
+}
+
+/* ---- JS ENABLED/DISABLED ---- */
+
+@media (max-width: 768px) {
+    .footer-col ul {
+        display: block;
+    }
+
+    .footer-col ul.js-enabled {
+        display: none;
+    }
+}
+
+/* ---- Favourites page ---- */
+
+.page-favourites h1 {
+    font-size: 3rem;
+    font-weight: 600;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+}
+
+.page-favourites h1::after {
+    content: "";
+    display: block;
+    width: 2.5rem;
+    height: 0.25rem;
+    background-color: var(--web-orange);
+    margin-top: -0.5rem;
+}
+
+.page-favourites p {
+    font-size: 1rem;
+    font-weight: 400;
+    color: var(--neutral-2);
+    margin-bottom: 0.5rem;
+}
+
+.favourites-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(10rem, 20.15rem));
+    grid-template-rows: auto;
+    justify-content: center;
+    /* align-items: center; */
+    gap: 1rem;
+    /* padding: 1rem; */
+    width: 100%;
+}
+
+.house-card {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border: 1px solid var(--silver);
+    border-radius: 0.75rem;
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+    background-color: white;
+    padding-bottom: 1rem;
+}
+
+.house-card .card-container {
+    display: flex;
+    flex-direction: column;
+    padding: 0 1rem;
+    width: 100%;
+    height: 100%;
+}
+
+.house-card .card-container .price {
+    font-weight: 600;
+}
+
+.house-card .card-container .info-list {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: start;
+    list-style-type: none;
+    margin-bottom: 1rem;
+}
+
+.house-card .card-container .info-list .info-item {
+    margin-right: 1rem;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+}
+
+.house-card .card-container .info-list .info-item:nth-child(1)::before {
+    content: url('../assets/icons/icon-size.svg');
+    width: 24px;
+    height: 24px;
+}
+
+.house-card .card-container .info-list .info-item:nth-child(2)::before {
+    content: url('../assets/icons/icon-room.svg');
+    width: 24px;
+    height: 24px;
+}
+
+.house-card .card-container .info-list .info-item:nth-child(3)::before {
+    content: url('../assets/icons/icon-garden.svg');
+    width: 24px;
+    height: 24px;
+}
+
+.house-card a {
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.house-card img {
+    width: auto;
+    height: 15rem;
+}
+
+.house-card h2 {
+    font-size: 1rem;
+    font-weight: 700;
+    color: var(--lochmara);
+}
+
+.house-card span {
+    /* width: 100%; */
+    font-weight: 400;
+    color: black;
+
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.delete-house {
+    position: absolute;
+    top: 0.3rem;
+    right: 0.3rem;
+    border-radius: 50%;
+    background-color: white;
+    color: var(--neutral-2);
+    font-size: 1rem;
+    width: 1.5rem;
+    height: 1.5rem;
+    border: 1px solid var(--white);
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.delete-house > svg {
+    width: 0.7rem;
+    height: 0.7rem;
+    color: var(--neutral-2);
+}
+
+.delete-house:hover {
+    background-color: var(--white);
+    border: 1px solid var(--silver);
+}
+
+.agent-card {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border: 1px solid var(--regent-blue-darker);
+    border-radius: 0.75rem;
+    width: 100%;
+    overflow: hidden;
+    background-color: var(--regent-blue);
+    padding: 1rem;
+    text-align: center;
+}
+
+.agent-card h2 {
+    font-size: 1.3rem;
+}
+
+.agent-card .btn-agent {
+    background-color: var(--white);
+    border: 0.1rem solid var(--lochmara);
+    color: var(--lochmara);
+    border-radius: 0.25rem;
+    text-decoration: none;
+    padding: 0.5rem;
+}
+
+.agent-card .btn-agent:hover {
+    background-color: var(--regent-blue);
+}
+
+/* Ratings */
+
+.rating-form {
+    display: flex;
+    position: relative;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    border-top: 1px solid var(--silver);
+    padding-top: 1rem;
+    margin-top: 0.5rem;
+}
+
+.rating-form input[type="radio"] {
+    appearance: none;
+    display: block;
+    background-image: var(--default-star);
+    background-repeat: no-repeat;
+    background-size: cover;
+    height: 1.5rem;
+    width: 1.5rem;
+    cursor: pointer;
+    margin: 0;
+    transition: scale 0.1s ease-in;
+    transition: background-image 0.08s ease-in;
+}
+
+.rating-form input[type="radio"]:nth-of-type(1) {--i:1;}
+.rating-form input[type="radio"]:nth-of-type(2) {--i:2;}
+.rating-form input[type="radio"]:nth-of-type(3) {--i:3;}
+.rating-form input[type="radio"]:nth-of-type(4) {--i:4;}
+.rating-form input[type="radio"]:nth-of-type(5) {--i:5;}
+
+.rating-form input[type="radio"]:hover,
+.rating-form input[type="radio"]:has(~ input[type="radio"]:hover) {
+	scale: calc(1 + var(--i) * .03);	
+    background-image: var(--active-star);
+}
+
+.rating-form input[type="radio"]:hover ~ input[type="radio"] {
+    background-image: var(--default-star) !important;
+}
+
+.rating-form input[type="radio"]:checked,
+.rating-form input[type="radio"]:has(~ input[type="radio"]:checked) {
+    background-image: var(--active-star);
+}
+
+/* Rating states */
+
+.loader,
+.rating-success {
+    color: var(--neutral-2);
+    position: absolute;
+    display: inline-block;
+    width: 1.5rem;
+    height: 1.5rem;
+    left: 0;
+    top: auto;
+}
+
+.loader:after {
+    content: " ";
+    display: block;
+    width: 1rem;
+    height: 1rem;
+    margin: 0.2rem;
+    border-radius: 50%;
+    border: 0.2rem solid currentColor;
+    border-color: currentColor transparent currentColor transparent;
+    animation: spin 1.2s linear infinite;
+}
+
+.rating-success .tick {
+    stroke-dasharray: 18;
+    stroke-dashoffset: 18;
+}
+
+.rating-success .draw {
+    animation: draw 3s forwards;
+}
+
+/* ---- Breakpoints ---- */
+
+@media (min-width: 760px) {
+    .layout-container {
+        padding-top: 1rem;
+    }
+
+    header {
+        position: relative;
+    }
+
+    .left-item {
+        display: flex;
+    }
+
+    .li-menu {
+        display: none;
+    }
+
+    .li-logo {
+        padding-left: 0;
+    }
+
+    .li-logo svg {
+        width: 6.3125rem;
+    }
+
+    .nav-right span,
+    .nav-left a:not(.li-logo a, .li-menu a) {
+        height: 1rem;
+    }
+
+    .nav-right a,
+    nav button {
+        flex-direction: row;
+    }
+
+    nav span {
+        font-size: 1rem;
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+
+    dialog {
+        width: 50%;
+        border-radius: 0.75rem;
+    }
+}
+
+/* ---- Footer breakpoints ---- */
+
+@media (max-width: 768px) {
+    .footer-container {
+        padding: 0 4rem 2rem;
+    }
+    .footer-col {
+        width: 50%;
+        margin-bottom: 1.875rem;
+    }
+}
+
+@media (max-width: 575px) {
+    .footer-col {
+        width: 100%;
+        padding: 0 4rem;
+    }
+
+    .second-footer {
+        padding: 0 4rem;
+        background-color: var(--gray);
+        display: flex;
+        flex-direction: column;
+    }
+}
+
+/* ======================================= */
+/* Keyframes
+/* ======================================= */
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes draw {
+    0% {
+        stroke-dashoffset: 18;
+    }
+    20% {
+        stroke-dashoffset: 0;
+    }
+    80% {
+        stroke-dashoffset: 0;
+    }
+    100% {
+        stroke-dashoffset: -18;
+    }
+}
diff --git a/server.js b/server.js
index 562d97a21..6fb1e5564 100644
--- a/server.js
+++ b/server.js
@@ -1 +1,127 @@
-console.log('Hier komt jullie server')
\ No newline at end of file
+// Importeer het npm pakket express uit de node_modules map
+import express from "express";
+
+// Importeer de zelfgemaakte functie fetchJson uit de ./helpers map
+import fetchJson from "./helpers/fetch-json.js";
+
+// Maak een nieuwe express app aan
+const app = express();
+
+const apiUrl = "https://fdnd-agency.directus.app/items/";
+const f_houses = apiUrl + "f_houses";
+const f_list = apiUrl + "f_list";
+const f_files = apiUrl + "f_houses_files";
+const f_feedback = apiUrl + "f_feedback";
+
+// Stel ejs in als template engine
+app.set("view engine", "ejs");
+
+// Stel de map met ejs templates in
+app.set("views", "./views");
+
+// Gebruik de map 'public' voor statische resources, zoals stylesheets, afbeeldingen en client-side JavaScript
+app.use(express.static("public"));
+
+// Zorg dat werken met request data makkelijker wordt
+app.use(express.urlencoded({ extended: true }));
+
+// ---- GET Routes ----
+
+// Maak een GET route voor de favorieten pagina
+app.get("/", function (request, response) {
+    // Voer tegelijkertijd een GET request uit naar de API om de huizen, en de ratings op te halen
+    Promise.all([
+        fetch(
+            `https://fdnd-agency.directus.app/items/f_list/6?fields=
+            id,
+            title,
+            description,
+            users.id,
+            users.f_users_id.name,
+            users.f_users_id.email,
+            users.f_users_id.avatar,
+            houses.id,
+            houses.f_houses_id.id,
+            houses.f_houses_id.street,
+            houses.f_houses_id.house_nr,
+            houses.f_houses_id.city,
+            houses.f_houses_id.postal_code,
+            houses.f_houses_id.price,
+            houses.f_houses_id.m2,
+            houses.f_houses_id.m2_garden,
+            houses.f_houses_id.rooms,
+            houses.f_houses_id.agent,
+            houses.f_houses_id.poster_image.id,
+            houses.f_houses_id.poster_image.width,
+            houses.f_houses_id.poster_image.height`
+        ),
+        fetch(
+            "https://fdnd-agency.directus.app/items/f_feedback?fields=house,rating&filter[list][_eq]=6"
+        )
+    ]).then(function (responses) {
+        // Maak van beide responses een json object
+        return Promise.all(responses.map(function (response) {
+            return response.json();
+        }));
+    }).then(function (data) {
+        // Maak een nieuwe array aan waarin de huizen en de ratings worden gecombineerd
+        // data[0] is de response van de huizen fetch
+        // data[1] is de response van de ratings fetch
+        const houses = data[0].data;
+        const ratings = data[1].data.reverse();
+        const updatedHousesData = houses.houses.map((house) => {
+            const foundRating = ratings.find((currentRating) => currentRating.house === house.f_houses_id.id);
+            return {
+                ...house,
+                rating: foundRating ? foundRating.rating.general : 0,
+            };
+        });
+        const finalData = { ...houses, houses: updatedHousesData };
+
+        // Render de favorieten.ejs template en geef de gecombineerde data mee
+        response.render("favorieten", { data: finalData });
+    }).catch(function (error) {
+        // if there's an error in any of the fetches, it will be caught here
+        console.error('Error:', error);
+    });
+});
+
+// Get route voor een detailpagina met een request parameter id
+app.get("/detail/:id", function (request, response) {
+    fetchJson(f_houses + "/" + request.params.id + "?fields=*.*.*.*").then(
+        (housesData) => {
+            response.render("detail", { house: housesData.data });
+        }
+    );
+});
+
+// ---- POST Routes ----
+
+app.post("/rate/:id/:rating", function (request, response) {
+    const id = request.params.id;
+    const rating = request.params.rating;
+
+    fetch("https://fdnd-agency.directus.app/items/f_feedback", {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+            house: id,
+            list: 6,
+            user: 6,
+            rating: { general: rating },
+        }),
+    }).then((data) => {
+        response.json(data);
+    });
+});
+
+// Stel het poortnummer in waar express op moet gaan luisteren
+app.set("port", process.env.PORT || 8000);
+
+// Start express op, haal daarbij het zojuist 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")}`);
+});
diff --git a/views/detail.ejs b/views/detail.ejs
new file mode 100644
index 000000000..cb2c5dbf0
--- /dev/null
+++ b/views/detail.ejs
@@ -0,0 +1,22 @@
+<%- include('partials/head', {page: `${house.street} ${house.house_nr}`}) %> <%- include('partials/nav') %>
+
+<figure>
+    <img 
+        src="https://fdnd-agency.directus.app/assets/<%= house.poster_image.id %>"
+        height="<%= house.poster_image.height %>" 
+        width="<%= house.poster_image.width %>" 
+        alt="Foto van het huis">
+</figure>
+<div class="house-container">
+    <h1 class="house-name"><%= house.street %> <%= house.house_nr %> <%= house.nr_addition %></h1>
+    <p class="house-code"><%= house.postal_code%> <%= house.city %></p>
+    <p class="house-width"><%= house.m2 %> m² / <%= house.m2_garden %> m² <%= house.rooms %> kamers</p>
+    <p class="house-agent"><%= house.agent %></p>
+    <p class="house-price">€ <span><%= house.price %></span> k.k.</pricetag>
+    <h2 class="heading">Omschrijving</h2>
+    <p><%- house.description %></p>
+</div>
+
+<script src="/scripts/detail.js" defer></script>
+
+<%- include('partials/foot') %>
\ No newline at end of file
diff --git a/views/favorieten.ejs b/views/favorieten.ejs
new file mode 100644
index 000000000..767087d6c
--- /dev/null
+++ b/views/favorieten.ejs
@@ -0,0 +1,105 @@
+<%- include('partials/head', {page: 'Favorieten'}) %> <%-
+include('partials/nav') %>
+
+<div class="layout-container page-favourites">
+    <%- include('partials/breadcrumbs', {items: ['Home', 'Mijn Account',
+    'Favorieten']}) %>
+    <h1>Favorieten</h1>
+    <p>
+        In dit overzicht vind je al je favoriete huizen terug. Maak het jezelf
+        makkelijker door huizen te bewaren en notities toe te voegen over het
+        huis, de buurt en andere belangrijke details voor je zoektocht.
+    </p>
+
+    <!-- ================================================== -->
+    <!-- Leden section -->
+    <!-- ================================================== -->
+    <section>
+        <!-- leden beschrijving -->
+        <h2>Leden</h2>
+        <p>Alle leden van de favorieten lijst.</p>
+        <!-- leden list -->
+        <ul class="member-list">
+            <% data.users.forEach(user => { %>
+            <%- include('partials/users', {user: user}) %>
+            <%  }) %>
+        </ul>
+        <!-- buttons -->
+        <div class="option-row">
+            <select class="btn-blue">
+                <option selected>Relevantie</option>
+            </select>
+            <button class="btn-blue btn-dialog">Lijst</button>
+            <button class="btn-blue btn-dialog">Leden</button>
+        </div>
+    </section>
+    <!-- ================================================== -->
+    <!-- List dialog -->
+    <!-- ================================================== -->
+    <dialog id="dialog-list">
+            <!-- Title -->
+            <div class="title-row">
+                <h2><%= data.title %></h2>
+                <button class="btn-close-dialog" formmethod="dialog"></button>
+            </div>
+            <p><%= data.description %></p>
+            <p>Leden: <%= data.users %></p>
+            <p>Huizen: <%= data.houses %></p>
+            <hr>
+            <!-- Buttons -->
+            <button class="btn-secondary-outline" formmethod="dialog">Annuleren</button>
+    </dialog>
+    <!-- ================================================== -->
+    <!-- Leden dialog -->
+    <!-- ================================================== -->
+    <dialog id="dialog-leden">
+        <form>
+            <!-- Title -->
+            <div class="title-row">
+                <h2>Leden</h2>
+                <button class="btn-close-dialog" formmethod="dialog"></button>
+            </div>
+            <p>Alle leden van de favorieten lijst.</p>
+
+            <!-- Leden lijst -->
+            <ul class="member-list">
+                <% data.users.forEach(user => { %>
+                <%- include('partials/users', {user: user}) %>
+                <%  }) %>
+            </ul>
+            <hr>
+            <!-- Nieuwe leden -->
+            <h2>Nieuwe leden</h2>
+            <p>Voeg nieuwe leden toe.</p>
+            <input type="search" placeholder="Zoek naar nieuwe leden..." />
+            <ul class="member-list">
+            </ul>
+            <!-- Buttons -->
+            <button class="btn-secondary-outline" value="cancel" formmethod="dialog">Annuleren</button>
+            <button class="btn-primary-solid" value="default">Opslaan</button>
+        </form>
+    </dialog>
+
+    <ul class="favourites-grid">
+        <% data.houses.forEach(currentHouse => { %> <%-
+        include('partials/card/house-card', {house: currentHouse.f_houses_id, rating: currentHouse.rating}) %>
+        %> <% }) %>
+        <li class="agent-card">
+            <img src="/assets/icons/agent-img.svg" alt="vind een makelaar" width="104" height="104">
+            <h2>Overweeg je om te verkopen?</h2>
+            <p>Een makelaar kan je helpen om de opties te bekijken die relevant zijn voor jou.</p>
+            <a href="#" class="btn-agent">Vind een makelaar</a>
+        </li>
+    </ul>
+</div>
+
+<script src="/scripts/favorieten.js" defer></script>
+<!-- Script voor toast notificaties -->
+<script
+    type="text/javascript"
+    src="https://cdn.jsdelivr.net/npm/toastify-js"
+></script>
+<!-- Script voor confetti effect (bij 5 sterren rating) -->
+<script src="https://cdn.jsdelivr.net/npm/@tsparticles/confetti@3.0.3/tsparticles.confetti.bundle.min.js"></script>
+
+<%- include('partials/footer') %> <%- include('partials/foot') %>
diff --git a/views/index.ejs b/views/index.ejs
new file mode 100644
index 000000000..f6456ec9e
--- /dev/null
+++ b/views/index.ejs
@@ -0,0 +1,6 @@
+<%- include('partials/head') %>
+<%- include('partials/nav') %>
+<h1>Test</h1>
+<p>Deze pagina komt later pas. Op dit moment is de relevante pagina hier te vinden: <a href="/favorieten">Favorieten</a></p>
+<%- include('partials/footer') %>
+<%- include('partials/foot') %>
\ No newline at end of file
diff --git a/views/partials/breadcrumbs.ejs b/views/partials/breadcrumbs.ejs
new file mode 100644
index 000000000..410a1f8c5
--- /dev/null
+++ b/views/partials/breadcrumbs.ejs
@@ -0,0 +1,15 @@
+<!-- 
+    Deze partial verwacht een data object.
+    Het object bevat 1 key-value pair met de key 'items' en een array als value.
+    De array bevat de namen van de breadcrumbs in volgorde van links naar rechts.
+    Zo kan het hergebruikt worden op meerdere pagina's en daarbij de juiste items tonen.
+
+    Voorbeeld:
+    include('partials/breadcrumbs', {items: ['Home', 'Mijn Account', 'Favorieten']})
+-->
+
+<ul class="breadcrumbs">
+    <% items.forEach(item => { %>
+    <li><%= item %></li>
+    <% }) %>
+</ul>
diff --git a/views/partials/card/house-card.ejs b/views/partials/card/house-card.ejs
new file mode 100644
index 000000000..2ca3cb942
--- /dev/null
+++ b/views/partials/card/house-card.ejs
@@ -0,0 +1,41 @@
+<li class="house-card">
+    <form method="post" action="/delete/<%= house.id %>">
+        <button type="submit" class="delete-house">
+            <%- include('../icons/cross-icon') %>
+        </button>
+    </form>
+    <a href="/detail/<%= house.id %>">
+        <picture>
+            <source
+                srcset="https://fdnd-agency.directus.app/assets/<%= house.poster_image.id %>?format=avif"
+                type="image/avif"
+            />
+            <source
+                srcset="https://fdnd-agency.directus.app/assets/<%= house.poster_image.id %>?format=webp"
+                type="image/webp"
+            />
+            <img
+                src="https://fdnd-agency.directus.app/assets/<%= house.poster_image.id %>"
+                alt="<%= house.title %>"
+                height="<%= house.poster_image.height %>"
+                width="<%= house.poster_image.width %>"
+                loading="lazy"
+            />
+        </picture>
+    </a>
+    <div class="card-container">
+        <a href="/detail/<%= house.id %>">
+            <h2><%= house.street %> <%= house.house_nr %></h2>
+        </a>
+        <p><%= house.postal_code + house.city %></p>
+        <p class="price">€<%= house.price %> k.k.</p>
+        <ul class="info-list">
+            <li class="info-item"><%= house.m2 ? house.m2 + "m²" : 0 %></li>
+            <li class="info-item"><%= house.rooms ? house.rooms : 0 %></li>
+            <li class="info-item"><%= house.m2_garden ? house.m2_garden + "m²" : 0 %></li>
+        </ul>
+        <p><%= house.agent %></p>
+        <!-- <span class="underlined">Bekijken</span> -->
+        <%- include('./rating-form', {house: house, rating: rating}) %>
+    </div>
+</li>
diff --git a/views/partials/card/rating-form-old.ejs b/views/partials/card/rating-form-old.ejs
new file mode 100644
index 000000000..24d2e9ca9
--- /dev/null
+++ b/views/partials/card/rating-form-old.ejs
@@ -0,0 +1,21 @@
+<form
+  class="rating-form"
+  method="POST"
+  data-current-rating="<%- Math.floor(Math.random() * 6) %>"
+>
+  <button type="submit" formaction="/rate/<%= house.id %>/1">
+    <%- include('./icons/star-icon') %>
+  </button>
+  <button type="submit" formaction="/rate/<%= house.id %>/2">
+    <%- include('./icons/star-icon') %>
+  </button>
+  <button type="submit" formaction="/rate/<%= house.id %>/3">
+    <%- include('./icons/star-icon') %>
+  </button>
+  <button type="submit" formaction="/rate/<%= house.id %>/4">
+    <%- include('./icons/star-icon') %>
+  </button>
+  <button type="submit" formaction="/rate/<%= house.id %>/5">
+    <%- include('./icons/star-icon') %>
+  </button>
+</form>
diff --git a/views/partials/card/rating-form.ejs b/views/partials/card/rating-form.ejs
new file mode 100644
index 000000000..4e440cf45
--- /dev/null
+++ b/views/partials/card/rating-form.ejs
@@ -0,0 +1,37 @@
+<form
+    class="rating-form"
+    method="POST"
+    action="/rate/<%= house.id %>"
+    data-current-rating="<%- Math.floor(Math.random() * 6) %>"
+    data-id="<%= house.id %>"
+>
+    <%- include('../loader') %> <%- include('../success') %>
+
+    <input type="radio" name="rating" value="1" 
+        <% if (rating == 1) { %>
+            checked
+        <% } %>
+    />
+    <input type="radio" name="rating" value="2" 
+        <% if (rating == 2) { %>
+            checked
+        <% } %>
+    />
+    <input type="radio" name="rating" value="3" 
+        <% if (rating == 3) { %>
+            checked
+        <% } %>
+    />
+    <input type="radio" name="rating" value="4" 
+        <% if (rating == 4) { %>
+            checked
+        <% } %>
+    />
+    <input type="radio" name="rating" value="5" 
+        <% if (rating == 5) { %>
+            checked
+        <% } %>
+    />
+
+    <button type="submit">Submit</button>
+</form>
diff --git a/views/partials/foot.ejs b/views/partials/foot.ejs
new file mode 100644
index 000000000..b605728ee
--- /dev/null
+++ b/views/partials/foot.ejs
@@ -0,0 +1,2 @@
+  </body>
+</html>
diff --git a/views/partials/footer.ejs b/views/partials/footer.ejs
new file mode 100644
index 000000000..9068fc787
--- /dev/null
+++ b/views/partials/footer.ejs
@@ -0,0 +1,69 @@
+<footer class="footer">
+  <div class="footer-container">
+      <div class="row">
+          <div class="footer-col">
+              <button class="footer-title">
+                  Snel naar
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16.293 9.293 12 13.586 7.707 9.293l-1.414 1.414L12 16.414l5.707-5.707z"></path></svg>
+              </button>
+              <ul>
+                  <li><a href="#/">Verkoop je huis op funda</a></li>
+                  <li><a href="#/">Check je woningwaarde</a></li>
+                  <li><a href="#/">Zoek een NVM-makelaar</a></li>
+                  <li><a href="#/">Volg de woningmarkt: funda Index</a></li>
+                  <li><a href="#/">Blader door al het aanbod</a></li>
+              </ul>
+          </div>
+          <div class="footer-col">
+              <button class="footer-title">
+                  Inzichten & inspiratie
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16.293 9.293 12 13.586 7.707 9.293l-1.414 1.414L12 16.414l5.707-5.707z"></path></svg>
+              </button>
+              <ul>
+                  <li><a href="#/">Inloggen Mijn Huis</a></li>
+                  <li><a href="#/">Alles over een huis kopen</a></li>
+                  <li><a href="#/">Alles over een huis verkopen</a></li>
+                  <li><a href="#/">Alles over je huis aanpakken</a></li>
+                  <li><a href="#/">Tips voor zoeken op funda</a></li>
+              </ul>
+          </div>
+          <div class="footer-col">
+              <button class="footer-title">
+                  Voor makelaars
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16.293 9.293 12 13.586 7.707 9.293l-1.414 1.414L12 16.414l5.707-5.707z"></path></svg>
+              </button>
+              <ul>
+                  <li><a href="#/">Meld je aan bij funda</a></li>
+                  <li><a href="#/">Plaats en promoot objecten</a></li>
+                  <li><a href="#/">Promoot je kantoor</a></li>
+                  <li><a href="#/">Verbreed je kennis</a></li>
+                  <li><a href="#/">Inloggen funda desk</a></li>
+              </ul>
+          </div>
+          <div class="footer-col">
+              <button class="footer-title">
+                  Meer Funda
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16.293 9.293 12 13.586 7.707 9.293l-1.414 1.414L12 16.414l5.707-5.707z"></path></svg>
+              </button>
+              <ul>
+                  <li><a href="#/">Over Funda</a></li>
+                  <li><a href="#/">Werken bij Funda</a></li>
+                  <li><a href="#/">Voor adverteerders</a></li>
+                  <li><a href="#/">Redactioneel beleid</a></li>
+                  <li><a href="#/">Contact</a></li>
+              </ul>
+          </div>
+      </div>
+  </div>
+  <div class="second-footer">
+     <div class="social-links">
+        <a href="https://x.com/funda"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M19.633 7.997c.013.175.013.349.013.523 0 5.325-4.053 11.461-11.46 11.461-2.282 0-4.402-.661-6.186-1.809.324.037.636.05.973.05a8.07 8.07 0 0 0 5.001-1.721 4.036 4.036 0 0 1-3.767-2.793c.249.037.499.062.761.062.361 0 .724-.05 1.061-.137a4.027 4.027 0 0 1-3.23-3.953v-.05c.537.299 1.16.486 1.82.511a4.022 4.022 0 0 1-1.796-3.354c0-.748.199-1.434.548-2.032a11.457 11.457 0 0 0 8.306 4.215c-.062-.3-.1-.611-.1-.923a4.026 4.026 0 0 1 4.028-4.028c1.16 0 2.207.486 2.943 1.272a7.957 7.957 0 0 0 2.556-.973 4.02 4.02 0 0 1-1.771 2.22 8.073 8.073 0 0 0 2.319-.624 8.645 8.645 0 0 1-2.019 2.083z"></path></svg></a>
+        <a href="https://www.facebook.com/funda"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M13.397 20.997v-8.196h2.765l.411-3.209h-3.176V7.548c0-.926.258-1.56 1.587-1.56h1.684V3.127A22.336 22.336 0 0 0 14.201 3c-2.444 0-4.122 1.492-4.122 4.231v2.355H7.332v3.209h2.753v8.202h3.312z"></path></svg></a>
+        <a href="https://www.instagram.com/funda.nl/"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M11.999 7.377a4.623 4.623 0 1 0 0 9.248 4.623 4.623 0 0 0 0-9.248zm0 7.627a3.004 3.004 0 1 1 0-6.008 3.004 3.004 0 0 1 0 6.008z"></path><circle cx="16.806" cy="7.207" r="1.078"></circle><path d="M20.533 6.111A4.605 4.605 0 0 0 17.9 3.479a6.606 6.606 0 0 0-2.186-.42c-.963-.042-1.268-.054-3.71-.054s-2.755 0-3.71.054a6.554 6.554 0 0 0-2.184.42 4.6 4.6 0 0 0-2.633 2.632 6.585 6.585 0 0 0-.419 2.186c-.043.962-.056 1.267-.056 3.71 0 2.442 0 2.753.056 3.71.015.748.156 1.486.419 2.187a4.61 4.61 0 0 0 2.634 2.632 6.584 6.584 0 0 0 2.185.45c.963.042 1.268.055 3.71.055s2.755 0 3.71-.055a6.615 6.615 0 0 0 2.186-.419 4.613 4.613 0 0 0 2.633-2.633c.263-.7.404-1.438.419-2.186.043-.962.056-1.267.056-3.71s0-2.753-.056-3.71a6.581 6.581 0 0 0-.421-2.217zm-1.218 9.532a5.043 5.043 0 0 1-.311 1.688 2.987 2.987 0 0 1-1.712 1.711 4.985 4.985 0 0 1-1.67.311c-.95.044-1.218.055-3.654.055-2.438 0-2.687 0-3.655-.055a4.96 4.96 0 0 1-1.669-.311 2.985 2.985 0 0 1-1.719-1.711 5.08 5.08 0 0 1-.311-1.669c-.043-.95-.053-1.218-.053-3.654 0-2.437 0-2.686.053-3.655a5.038 5.038 0 0 1 .311-1.687c.305-.789.93-1.41 1.719-1.712a5.01 5.01 0 0 1 1.669-.311c.951-.043 1.218-.055 3.655-.055s2.687 0 3.654.055a4.96 4.96 0 0 1 1.67.311 2.991 2.991 0 0 1 1.712 1.712 5.08 5.08 0 0 1 .311 1.669c.043.951.054 1.218.054 3.655 0 2.436 0 2.698-.043 3.654h-.011z"></path></svg></a>
+        <a href="https://www.youtube.com/funda"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M21.593 7.203a2.506 2.506 0 0 0-1.762-1.766C18.265 5.007 12 5 12 5s-6.264-.007-7.831.404a2.56 2.56 0 0 0-1.766 1.778c-.413 1.566-.417 4.814-.417 4.814s-.004 3.264.406 4.814c.23.857.905 1.534 1.763 1.765 1.582.43 7.83.437 7.83.437s6.265.007 7.831-.403a2.515 2.515 0 0 0 1.767-1.763c.414-1.565.417-4.812.417-4.812s.02-3.265-.407-4.831zM9.996 15.005l.005-6 5.207 3.005-5.212 2.995z"></path></svg></a>
+        <a href="https://www.linkedin.com/feed/"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><circle cx="4.983" cy="5.009" r="2.188"></circle><path d="M9.237 8.855v12.139h3.769v-6.003c0-1.584.298-3.118 2.262-3.118 1.937 0 1.961 1.811 1.961 3.218v5.904H21v-6.657c0-3.27-.704-5.783-4.526-5.783-1.835 0-3.065 1.007-3.568 1.96h-.051v-1.66H9.237zm-6.142 0H6.87v12.139H3.095z"></path></svg></a>
+    </div>
+    <a class="privacy-statement">© 2001-2024 funda • Privacy • Cookies • Voorwaarden</a>
+    <a class="language"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm7.931 9h-2.764a14.67 14.67 0 0 0-1.792-6.243A8.013 8.013 0 0 1 19.931 11zM12.53 4.027c1.035 1.364 2.427 3.78 2.627 6.973H9.03c.139-2.596.994-5.028 2.451-6.974.172-.01.344-.026.519-.026.179 0 .354.016.53.027zm-3.842.7C7.704 6.618 7.136 8.762 7.03 11H4.069a8.013 8.013 0 0 1 4.619-6.273zM4.069 13h2.974c.136 2.379.665 4.478 1.556 6.23A8.01 8.01 0 0 1 4.069 13zm7.381 6.973C10.049 18.275 9.222 15.896 9.041 13h6.113c-.208 2.773-1.117 5.196-2.603 6.972-.182.012-.364.028-.551.028-.186 0-.367-.016-.55-.027zm4.011-.772c.955-1.794 1.538-3.901 1.691-6.201h2.778a8.005 8.005 0 0 1-4.469 6.201z"></path></svg><span>English</span></a>
+  </div>
+</footer>
\ No newline at end of file
diff --git a/views/partials/head.ejs b/views/partials/head.ejs
new file mode 100644
index 000000000..00d6f7df7
--- /dev/null
+++ b/views/partials/head.ejs
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="nl">
+    <head>
+        <meta charset="UTF-8" />
+
+        <!-- Minimum-scale moest ik toevoegen vanwege een bug in Chrome -->
+        <!-- Meer info: -->
+        <!-- https://stackoverflow.com/questions/62044935/div-height-and-width-inconsistent-to-screen-dimensions-in-devtools-in-chrome -->
+
+        <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1.0, minimum-scale=1.0"
+        />
+        <meta name="theme-color" content="#F7A100" />
+        <link rel="stylesheet" href="/styles/style.css" />
+        <link rel="stylesheet" href="/styles/detail.css" />
+        <link rel="stylesheet" href="/assets/font/stylesheet.css" />
+        <!-- Library voor toast notifications -->
+        <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
+        <link rel="icon" type="image/png" href="/assets/favicon.png" />
+        <title>Funda | <%= page %></title>
+    </head>
+    <body>
+</html>
diff --git a/views/partials/icons/cross-icon.ejs b/views/partials/icons/cross-icon.ejs
new file mode 100644
index 000000000..e731cb36e
--- /dev/null
+++ b/views/partials/icons/cross-icon.ejs
@@ -0,0 +1,13 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  fill="currentColor"
+  height="16px"
+  width="16px"
+  viewBox="0 0 490 490"
+  xml:space="preserve"
+>
+  <polygon
+    points="456.851,0 245,212.564 33.149,0 0.708,32.337 212.669,245.004 0.708,457.678 33.149,490 245,277.443 456.851,490   489.292,457.678 277.331,245.004 489.292,32.337 "
+  />
+</svg>
diff --git a/views/partials/icons/house-icon.ejs b/views/partials/icons/house-icon.ejs
new file mode 100644
index 000000000..8cba50ff5
--- /dev/null
+++ b/views/partials/icons/house-icon.ejs
@@ -0,0 +1,12 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+>
+  <path
+    d="M17.359 11.969L18.859 13.635V21.298C18.859 21.4966 18.7802 21.6872 18.6399 21.8278C18.4995 21.9684 18.3091 22.0476 18.1105 22.048H5.60899C5.41008 22.048 5.21931 21.969 5.07866 21.8283C4.93801 21.6877 4.85899 21.4969 4.85899 21.298V13.6355L6.35899 11.9695V20.548H17.359V11.969ZM11.8675 2.49899C11.9085 2.49999 11.949 2.50899 11.9895 2.51649C12.0395 2.52549 12.0895 2.53449 12.1375 2.55349C12.187 2.57349 12.2325 2.60499 12.2775 2.63649C12.312 2.65999 12.3475 2.68149 12.3775 2.71149C12.3905 2.72299 12.4075 2.72799 12.4195 2.74149L21.025 12.3C21.1581 12.4478 21.2271 12.6424 21.2167 12.8411C21.2064 13.0397 21.1175 13.2261 20.9697 13.3592C20.8219 13.4924 20.6273 13.5614 20.4287 13.551C20.23 13.5406 20.0436 13.4518 19.9105 13.304L18.8575 12.1345L17.3575 10.4685L11.8575 4.36049L6.35749 10.469L4.85749 12.135L3.80699 13.3015C3.67392 13.4494 3.48756 13.5383 3.28891 13.5487C3.09026 13.5592 2.8956 13.4903 2.74774 13.3572C2.59988 13.2242 2.51094 13.0378 2.50049 12.8392C2.49003 12.6405 2.55892 12.4459 2.69199 12.298L11.299 2.73999C11.313 2.72399 11.333 2.71749 11.348 2.70349C11.3675 2.68549 11.3895 2.67349 11.4105 2.65699C11.4685 2.61249 11.529 2.57349 11.5945 2.54849C11.6245 2.53699 11.6555 2.53249 11.6865 2.52549C11.7465 2.51099 11.8065 2.49899 11.8675 2.49899Z"
+    fill="currentColor"
+  />
+</svg>
diff --git a/views/partials/icons/logo-old.ejs b/views/partials/icons/logo-old.ejs
new file mode 100644
index 000000000..42d661123
--- /dev/null
+++ b/views/partials/icons/logo-old.ejs
@@ -0,0 +1,19 @@
+<svg
+  alt="funda logo"
+  viewBox="0 0 425.1 150.4"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M425.1 150.3l-26-92.4A81.8 81.8 0 00321.8 0H0l25.6 92.6v.1a81.4 81.4 0 0075.7 57.7zm-377.3-64L30.3 23h291.4A58.8 58.8 0 01377 64.2l17.6 63.2H102a58.1 58.1 0 01-54.3-41z"
+    fill="#60c5f8"
+  ></path>
+  <path
+    d="M47.8 86.4L30.3 23h291.4a58.8 58.8 0 0155.2 41.2l17.6 63.2H102c-22.1 0-46.8-15.3-54.3-41z"
+    fill="#53241b"
+  ></path>
+  <path
+    d="M94.6 107.1h10.2V64.2h11.8v-7.8h-11.8v-6.7c0-3.1 1-4.2 4.4-4.2h7.4v-9.6h-8.2c-8 0-13.9 4.3-13.9 13.8v6.7H82.8l2.3 7.8h9.5zm35-17a17 17 0 0017 17.6 16.2 16.2 0 0013-6h.3v5.4H170V56.4h-10.2v30.2c0 6.9-4.4 11-10 11s-10.1-4-10.1-11V56.4h-10.2zm58.6 17h10.2V77c0-7 4.3-11 10-11s10 4 10 11V107h10.3V73.4a17 17 0 00-17-17.7 16.3 16.3 0 00-13.1 6h-.2v-5.4h-10.2zm85.8 0h10.2V35.8H274v26c-3.8-3.6-7.9-6-13.1-6a16.6 16.6 0 00-13.6 6.6c-2.8 3.6-3.6 6.9-3.6 19.3s.8 15.8 3.6 19.4a16.6 16.6 0 0013.6 6.6 17.9 17.9 0 0013.1-5.9zM264 66c9.5 0 10 8.4 10 15.7s-.5 15.9-10 15.9-10.1-8-10.1-15.9S254.4 66 264 66zm64.7 41.1H339V72.5c0-12.6-8.6-16.8-21.1-16.8-7.6 0-13.2 2-17.1 7.4l8 6.2c1.8-3 4.3-4 9.6-4 7.3 0 10.4 1.8 10.4 6.6v5.3h-14.1c-11 0-16.6 7-16.6 15 0 8.8 6.6 15.5 18 15.5 6.9 0 10.4-1.6 12.5-5h.2zm0-17.8c0 7.9-2.9 8.8-11.4 8.8-7 0-9.6-3-9.6-6.4 0-3.7 2.8-6.1 8.8-6.1h12.2z"
+    fill="#fff"
+    fill-rule="evenodd"
+  ></path>
+</svg>
diff --git a/views/partials/icons/logo.ejs b/views/partials/icons/logo.ejs
new file mode 100644
index 000000000..4dc87e013
--- /dev/null
+++ b/views/partials/icons/logo.ejs
@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="101" height="36" viewBox="0 0 425.12 150.44">
+  <defs>
+    <style>
+      .cls-3 {
+        fill: #fff;
+        fill-rule: evenodd;
+      }
+    </style>
+  </defs>
+  <path
+    d="M425.12 150.29l-26-92.43C388.52 21.4 353.81 0 321.76 0H0l25.64 92.59v.14c10.65 36.78 45.39 57.36 75.64 57.71zM47.82 86.38c-.07-.2-12.17-44.1-17.51-63.35h291.4c21.69 0 47.47 14.6 55.23 41.16.08.29 15.51 56 17.52 63.21H102.09c-22.1 0-46.77-15.33-54.28-41z"
+    fill="#60c5f8"
+  />
+  <path
+    d="M47.81 86.38c-.07-.2-12.17-44.1-17.51-63.35h291.4c21.69 0 47.47 14.6 55.23 41.16.08.29 15.51 56 17.52 63.21H102.09c-22.09 0-46.77-15.33-54.28-41.02z"
+    fill="#53241b"
+  />
+  <path
+    class="cls-3"
+    d="M94.56 107.12h10.2V64.21h11.88V56.4h-11.88v-6.71c0-3.11 1.11-4.21 4.41-4.21h7.47v-9.62h-8.28c-7.91 0-13.81 4.31-13.81 13.82v6.71h-11.7l2.23 7.81h9.48zM129.56 90.1c0 11.52 9 17.62 17 17.62a16.19 16.19 0 0 0 13.12-6h.2v5.41h10.21V56.35h-10.22v30.24c0 6.91-4.32 10.92-10 10.92s-10.11-4-10.11-10.92V56.35h-10.2zM188.15 107.12h10.22V76.88c0-6.91 4.3-10.92 10.12-10.92s10 4 10 10.92v30.24h10.21V73.37c0-11.52-9-17.63-16.92-17.63a16.27 16.27 0 0 0-13.22 6h-.2v-5.41h-10.21zM274 107.12h10.22v-71.3H274v25.94c-3.8-3.61-7.9-6-13.11-6a16.58 16.58 0 0 0-13.62 6.61c-2.8 3.6-3.6 6.91-3.6 19.33s.81 15.82 3.6 19.43a16.56 16.56 0 0 0 13.62 6.6 17.88 17.88 0 0 0 13.11-5.91zM264 66c9.52 0 10 8.41 10 15.73s-.5 15.82-10 15.82-10.1-7.91-10.1-15.82S254.38 66 264 66zM328.71 107.12h10.21V72.47c0-12.52-8.6-16.73-21.12-16.73-7.61 0-13.23 2-17.13 7.41l8 6.11c1.81-2.9 4.32-3.9 9.62-3.9 7.31 0 10.41 1.7 10.41 6.51v5.34h-14.14c-10.9 0-16.52 6.91-16.52 15 0 8.81 6.6 15.52 17.92 15.52 6.91 0 10.42-1.6 12.52-5.1h.2zm0-17.83c0 7.91-2.9 8.81-11.42 8.81-6.91 0-9.62-3-9.62-6.41 0-3.7 2.81-6.11 8.82-6.11h12.22z"
+  />
+</svg>
diff --git a/views/partials/icons/menu-icon.ejs b/views/partials/icons/menu-icon.ejs
new file mode 100644
index 000000000..1e5e487da
--- /dev/null
+++ b/views/partials/icons/menu-icon.ejs
@@ -0,0 +1,12 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  fill="currentColor"
+  role="presentation"
+  width="24"
+  height="24"
+  viewBox="0 0 48 48"
+>
+  <path
+    d="M7.5 12.5h30a1.5 1.5 0 010 3h-30a1.5 1.5 0 010-3zm0 10h33a1.5 1.5 0 010 3h-33a1.5 1.5 0 010-3zm0 10h22a1.5 1.5 0 010 3h-22a1.5 1.5 0 010-3z"
+  ></path>
+</svg>
diff --git a/views/partials/icons/profile-icon.ejs b/views/partials/icons/profile-icon.ejs
new file mode 100644
index 000000000..33ec43c5a
--- /dev/null
+++ b/views/partials/icons/profile-icon.ejs
@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  width="24"
+  height="24"
+  fill="none"
+>
+  <path
+    d="M12 4.5C11.2089 4.5 10.4355 4.7346 9.77772 5.17412C9.11993 5.61365 8.60723 6.23836 8.30448 6.96927C8.00173 7.70017 7.92252 8.50444 8.07686 9.28036C8.2312 10.0563 8.61216 10.769 9.17157 11.3284C9.73098 11.8878 10.4437 12.2688 11.2196 12.4231C11.9956 12.5775 12.7998 12.4983 13.5307 12.1955C14.2616 11.8928 14.8864 11.3801 15.3259 10.7223C15.7654 10.0645 16 9.29113 16 8.5C16 7.43913 15.5786 6.42172 14.8284 5.67157C14.0783 4.92143 13.0609 4.5 12 4.5ZM12 11C11.5055 11 11.0222 10.8534 10.6111 10.5787C10.2 10.304 9.87952 9.91352 9.6903 9.45671C9.50108 8.99989 9.45158 8.49723 9.54804 8.01227C9.6445 7.52732 9.8826 7.08186 10.2322 6.73223C10.5819 6.3826 11.0273 6.1445 11.5123 6.04804C11.9972 5.95157 12.4999 6.00108 12.9567 6.1903C13.4135 6.37952 13.804 6.69995 14.0787 7.11107C14.3534 7.5222 14.5 8.00555 14.5 8.5C14.5 9.16304 14.2366 9.79893 13.7678 10.2678C13.2989 10.7366 12.663 11 12 11Z"
+    fill="currentColor"
+  />
+  <path
+    d="M12 1.5C9.9233 1.5 7.89323 2.11581 6.16652 3.26957C4.4398 4.42332 3.09399 6.0632 2.29927 7.98182C1.50455 9.90045 1.29661 12.0116 1.70176 14.0484C2.1069 16.0852 3.10693 17.9562 4.57538 19.4246C6.04384 20.8931 7.91476 21.8931 9.95156 22.2982C11.9884 22.7034 14.0996 22.4955 16.0182 21.7007C17.9368 20.906 19.5767 19.5602 20.7304 17.8335C21.8842 16.1068 22.5 14.0767 22.5 12C22.5 9.21523 21.3938 6.54451 19.4246 4.57538C17.4555 2.60625 14.7848 1.5 12 1.5ZM7.5 19.78V17.5C7.5 16.275 8.56 15.26 9.955 15.045C10.1353 15.0161 10.3175 15.0011 10.5 15H13.5C13.6826 15.0011 13.8648 15.0161 14.045 15.045C15.44 15.26 16.5 16.275 16.5 17.5V19.78C15.1344 20.5773 13.5814 20.9975 12 20.9975C10.4186 20.9975 8.86565 20.5773 7.5 19.78ZM18 18.685V17.25C17.9992 17.1823 17.9891 17.115 17.97 17.05C17.72 15.05 15.815 13.5 13.5 13.5H10.5C8.185 13.5 6.28 15.055 6.03 17.05C6.0109 17.115 6.0008 17.1823 6 17.25V18.69C4.64143 17.4748 3.68383 15.8758 3.25392 14.1045C2.82401 12.3332 2.94206 10.4731 3.59245 8.7704C4.24284 7.06766 5.39491 5.60253 6.89621 4.56888C8.39751 3.53524 10.1773 2.9818 12 2.9818C13.8227 2.9818 15.6025 3.53524 17.1038 4.56888C18.6051 5.60253 19.7572 7.06766 20.4076 8.7704C21.0579 10.4731 21.176 12.3332 20.7461 14.1045C20.3162 15.8758 19.3586 17.4748 18 18.69V18.685Z"
+    fill="currentColor"
+  />
+</svg>
diff --git a/views/partials/icons/star-icon.ejs b/views/partials/icons/star-icon.ejs
new file mode 100644
index 000000000..aa2635fc9
--- /dev/null
+++ b/views/partials/icons/star-icon.ejs
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 53.867 53.867" xml:space="preserve">
+  <polygon points="26.934,1.318 35.256,18.182 53.867,20.887 40.4,34.013 43.579,52.549 26.934,43.798 10.288,52.549 13.467,34.013 0,20.887 18.611,18.182 "/>
+</svg>
\ No newline at end of file
diff --git a/views/partials/loader.ejs b/views/partials/loader.ejs
new file mode 100644
index 000000000..0eb150a28
--- /dev/null
+++ b/views/partials/loader.ejs
@@ -0,0 +1 @@
+<div class="loader hidden"></div>
\ No newline at end of file
diff --git a/views/partials/nav.ejs b/views/partials/nav.ejs
new file mode 100644
index 000000000..fa252a6c1
--- /dev/null
+++ b/views/partials/nav.ejs
@@ -0,0 +1,43 @@
+<header>
+    <nav>
+        <ul class="nav">
+            <div class="nav-left">
+                <!-- Nav menu button on mobile -->
+                <li class="li-menu">
+                    <input type="checkbox" id="mobile-menu-check"/>
+                    <label for="mobile-menu-check" class="menu-button">
+                        <%- include('./icons/menu-icon') %>
+                        <span>Menu</span>
+                    </label>
+                </li>
+                <!-- Nav menu on mobile -->
+                <ul class="mobile-nav">
+                    <li><a href="#" role="button">Kopen</a></li>
+                    <li><a href="#" role="button">Huren</a></li>
+                    <li><a href="#" role="button">Verkopen</a></li>
+                </ul>
+
+                <li class="li-logo">
+                    <a href="/"><%- include('./icons/logo') %></a>
+                </li>
+                <li class="left-item"><a href="/">Kopen</a></li>
+                <li class="left-item"><a href="/about">Huren</a></li>
+                <li class="left-item"><a href="/contact">Verkopen</a></li>
+            </div>
+            <div class="nav-right">
+                <li>
+                    <a href="/users">
+                        <%- include('./icons/house-icon') %>
+                        <span>Mijn Huis</span>
+                    </a>
+                </li>
+                <li>
+                    <button>
+                        <%- include('./icons/profile-icon') %>
+                        <span>Account</span>
+                    </button>
+                </li>
+            </div>
+        </ul>
+    </nav>
+</header>
diff --git a/views/partials/success.ejs b/views/partials/success.ejs
new file mode 100644
index 000000000..a062528e8
--- /dev/null
+++ b/views/partials/success.ejs
@@ -0,0 +1,17 @@
+<svg
+    viewBox="0 0 20 20"
+    xmlns="http://www.w3.org/2000/svg"
+    role="presentation"
+    width="24"
+    height="24"
+    class="rating-success"
+>
+    <path
+        stroke="currentColor"
+        stroke-width="3"
+        fill="none"
+        fill-rule="evenodd"
+        class="tick"
+        d="M6.5 13.5L10 17 l8.808621-8.308621"
+    />
+</svg>
diff --git a/views/partials/users.ejs b/views/partials/users.ejs
new file mode 100644
index 000000000..3b92545cd
--- /dev/null
+++ b/views/partials/users.ejs
@@ -0,0 +1,11 @@
+<li class="member-item">
+    <picture>
+        <% if (user.f_users_id.avatar !== null) { %>
+            <source src="https://fdnd-agency.directus.app/assets/<%= user.f_users_id.avatar %>?format=webp" type="image/webp">
+            <img loading="lazy" src="https://fdnd-agency.directus.app/assets/<%= user.f_users_id.avatar %>" width="25" height="25" alt="profile-image">
+        <% } else { %>
+            <img loading="lazy" src="/assets/icons/icon-user.svg" width="25" height="25" alt="profile-image">
+        <% } %>
+    </picture>                    
+    <p><%= user.f_users_id.name %></p>
+</li>
\ No newline at end of file