From 257eac3dac7f685efb8f4104b9ee86cb9d551486 Mon Sep 17 00:00:00 2001
From: matisse <matisse.sulzer@ugent.be>
Date: Wed, 13 Mar 2024 18:48:19 +0100
Subject: [PATCH 01/16] initial draft for error pages

---
 frontend/package-lock.json         | 54 +++++++++++++++++++++++-------
 frontend/package.json              |  3 +-
 frontend/src/pages/error/Error.tsx | 32 ++++++++++++++++++
 3 files changed, 75 insertions(+), 14 deletions(-)
 create mode 100644 frontend/src/pages/error/Error.tsx

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 4fc8aea3..0940a1bc 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -15,12 +15,13 @@
         "@mui/styled-engine-sc": "^6.0.0-alpha.16",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-router-dom": "^6.22.1",
+        "react-router-dom": "^6.22.3",
         "styled-components": "^6.1.8"
       },
       "devDependencies": {
         "@types/react": "^18.2.55",
         "@types/react-dom": "^18.2.19",
+        "@types/react-router-dom": "^5.3.3",
         "@typescript-eslint/eslint-plugin": "^6.21.0",
         "@typescript-eslint/parser": "^6.21.0",
         "@vitejs/plugin-react": "^4.2.1",
@@ -1572,9 +1573,9 @@
       }
     },
     "node_modules/@remix-run/router": {
-      "version": "1.15.1",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.1.tgz",
-      "integrity": "sha512-zcU0gM3z+3iqj8UX45AmWY810l3oUmXM7uH4dt5xtzvMhRtYVhKGOmgOd1877dOPPepfCjUv57w+syamWIYe7w==",
+      "version": "1.15.3",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz",
+      "integrity": "sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==",
       "engines": {
         "node": ">=14.0.0"
       }
@@ -1795,6 +1796,12 @@
       "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
       "dev": true
     },
+    "node_modules/@types/history": {
+      "version": "4.7.11",
+      "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
+      "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==",
+      "dev": true
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -1840,6 +1847,27 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-router": {
+      "version": "5.1.20",
+      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz",
+      "integrity": "sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==",
+      "dev": true,
+      "dependencies": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/react-router-dom": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz",
+      "integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==",
+      "dev": true,
+      "dependencies": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*",
+        "@types/react-router": "*"
+      }
+    },
     "node_modules/@types/react-transition-group": {
       "version": "4.4.10",
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz",
@@ -5201,11 +5229,11 @@
       }
     },
     "node_modules/react-router": {
-      "version": "6.22.1",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.1.tgz",
-      "integrity": "sha512-0pdoRGwLtemnJqn1K0XHUbnKiX0S4X8CgvVVmHGOWmofESj31msHo/1YiqcJWK7Wxfq2a4uvvtS01KAQyWK/CQ==",
+      "version": "6.22.3",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz",
+      "integrity": "sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==",
       "dependencies": {
-        "@remix-run/router": "1.15.1"
+        "@remix-run/router": "1.15.3"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -5215,12 +5243,12 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "6.22.1",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.1.tgz",
-      "integrity": "sha512-iwMyyyrbL7zkKY7MRjOVRy+TMnS/OPusaFVxM2P11x9dzSzGmLsebkCvYirGq0DWB9K9hOspHYYtDz33gE5Duw==",
+      "version": "6.22.3",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.3.tgz",
+      "integrity": "sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==",
       "dependencies": {
-        "@remix-run/router": "1.15.1",
-        "react-router": "6.22.1"
+        "@remix-run/router": "1.15.3",
+        "react-router": "6.22.3"
       },
       "engines": {
         "node": ">=14.0.0"
diff --git a/frontend/package.json b/frontend/package.json
index 4645a37b..4f9b20e1 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -19,12 +19,13 @@
     "@mui/styled-engine-sc": "^6.0.0-alpha.16",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.22.1",
+    "react-router-dom": "^6.22.3",
     "styled-components": "^6.1.8"
   },
   "devDependencies": {
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
+    "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
     "@vitejs/plugin-react": "^4.2.1",
diff --git a/frontend/src/pages/error/Error.tsx b/frontend/src/pages/error/Error.tsx
new file mode 100644
index 00000000..29753ec5
--- /dev/null
+++ b/frontend/src/pages/error/Error.tsx
@@ -0,0 +1,32 @@
+import { isRouteErrorResponse, useRouteError } from "react-router-dom"
+
+export function Error() {
+    const error = useRouteError();
+
+    if (isRouteErrorResponse(error)) {
+
+        let message = "";
+        if (error.status == 403) {
+            message = "Forbidden"
+        } else if (error.status == 404) {
+            message = "Page not found";
+        } else if (error.status == 500) {
+            message = "Internal server error";
+        } else if (error.status == 503) {
+            message = "Looks like our API is down";
+        } else if (500 <= error.status && error.status <= 599) {
+            message = "General server error";
+        }
+
+        return(
+            <div>
+                <p>
+                    { error.status }
+                </p>
+                <p>
+                    { message }
+                </p>
+            </div>
+        )
+    }
+}
\ No newline at end of file

From 51f824099b10b1a23a8bedf35140630b571ac240 Mon Sep 17 00:00:00 2001
From: matisse <matisse.sulzer@ugent.be>
Date: Wed, 13 Mar 2024 19:13:30 +0100
Subject: [PATCH 02/16] indentation fixed

---
 frontend/src/pages/error/Error.tsx | 50 +++++++++++++++---------------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/frontend/src/pages/error/Error.tsx b/frontend/src/pages/error/Error.tsx
index 29753ec5..51af6021 100644
--- a/frontend/src/pages/error/Error.tsx
+++ b/frontend/src/pages/error/Error.tsx
@@ -1,32 +1,32 @@
 import { isRouteErrorResponse, useRouteError } from "react-router-dom"
 
 export function Error() {
-    const error = useRouteError();
+  const error = useRouteError();
 
-    if (isRouteErrorResponse(error)) {
+  if (isRouteErrorResponse(error)) {
 
-        let message = "";
-        if (error.status == 403) {
-            message = "Forbidden"
-        } else if (error.status == 404) {
-            message = "Page not found";
-        } else if (error.status == 500) {
-            message = "Internal server error";
-        } else if (error.status == 503) {
-            message = "Looks like our API is down";
-        } else if (500 <= error.status && error.status <= 599) {
-            message = "General server error";
-        }
-
-        return(
-            <div>
-                <p>
-                    { error.status }
-                </p>
-                <p>
-                    { message }
-                </p>
-            </div>
-        )
+    let message = "";
+    if (error.status == 403) {
+      message = "Forbidden"
+    } else if (error.status == 404) {
+      message = "Page not found";
+    } else if (error.status == 500) {
+      message = "Internal server error";
+    } else if (error.status == 503) {
+      message = "Looks like our API is down";
+    } else if (500 <= error.status && error.status <= 599) {
+      message = "General server error";
     }
+
+    return(
+      <div>
+        <h1>
+          { error.status }
+        </h1>
+        <p>
+          { message }
+        </p>
+      </div>
+    )
+  }
 }
\ No newline at end of file

From 044f6d70b7171553042d363d60bf49469257053e Mon Sep 17 00:00:00 2001
From: matisse <matisse.sulzer@ugent.be>
Date: Wed, 13 Mar 2024 21:27:57 +0100
Subject: [PATCH 03/16] docs

---
 frontend/src/pages/error/Error.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/frontend/src/pages/error/Error.tsx b/frontend/src/pages/error/Error.tsx
index 51af6021..faee38d9 100644
--- a/frontend/src/pages/error/Error.tsx
+++ b/frontend/src/pages/error/Error.tsx
@@ -1,5 +1,9 @@
 import { isRouteErrorResponse, useRouteError } from "react-router-dom"
 
+/**
+ * This component is the error page component that will be rendered when an error occurs.
+ * @returns - The error page component
+ */
 export function Error() {
   const error = useRouteError();
 

From 983c7215a37b18b82b88f304ae755b66fe43e3b4 Mon Sep 17 00:00:00 2001
From: matisse <matisse.sulzer@ugent.be>
Date: Thu, 14 Mar 2024 17:42:31 +0100
Subject: [PATCH 04/16] error pages v1

---
 frontend/public/error_pigeon.png         | Bin 0 -> 2358 bytes
 frontend/src/App.tsx                     |   2 ++
 frontend/src/pages/error/Error.tsx       |  36 -----------------------
 frontend/src/pages/error/NotFound.tsx    |  22 ++++++++++++++
 frontend/src/pages/error/ServerError.tsx |  22 ++++++++++++++
 5 files changed, 46 insertions(+), 36 deletions(-)
 create mode 100644 frontend/public/error_pigeon.png
 delete mode 100644 frontend/src/pages/error/Error.tsx
 create mode 100644 frontend/src/pages/error/NotFound.tsx
 create mode 100644 frontend/src/pages/error/ServerError.tsx

diff --git a/frontend/public/error_pigeon.png b/frontend/public/error_pigeon.png
new file mode 100644
index 0000000000000000000000000000000000000000..f2264ead5c834fc6b0e317a2497ae8d11a88d241
GIT binary patch
literal 2358
zcmbVO`BxGM7X?AF1@~|%r5yKNa$zLF6c@}S0ds9M%G6ZEB?r?KY;nN~P0LcVlrkkr
z)U;g5r7S7OEv&Ts)ZB1yNXI2V=3kh1-hKDHcis>8ymQ_;H}iz2D|ENUZU6uP#kpY#
z67K#NvNDod<;%S<A#j`{jwCCIWZAPBl71J}%`XlB*rWU}fPi~NY5;)jFb;c^L@Qbt
zjmp;aR_Cu^My30?qyF`|X$E<86)W*0SdLO@r<IN4pxSjfJqvbx5Nl;gW^KG$KI%Rm
zU{Sw*jgZmz<e=>NWM~@HKR=~9zciPWwNLsBIjSdNdwHbLY~j+~q$Pp<;kcc)NnCx?
z0IGMSI5c$e_s|bOT&~W4&D}A9bKt@Lz_F`*m1;l%cnb6e6sKVcnvd>0%ul6{UZ<U3
zHx%BI&i!yCSe<HCU8fkTbd^Wt3(>MiWVWPfDl{-nZ5_0{1Pn@I`yTA5RiSB8fz?F@
z**tLKJXlL=F}f2r_6eLA)>#Y=l#7(o(x+s;Q`@9BG1frks;i!EP$okj*ancx`8Bzu
zUoR!1*Z#N^VO2Q=^Z{VBDc*#VvBcM~(lN-k2U{^-ZrQK2%RrnN7(Wkb1qK%MpvwK5
zuDtMPqr-_^(ewtz<L{LesxCzXZEpPnn;ttN)m&(08e^2>&5y>VI^MRf2Q77)UC#Nj
zd#s#|0dkbuAZClAVo%W{K8L99rMrhw$O!K*iTBP%W%L0;8q|i}>W;LcW6bh-GVA)Y
z_?pT$=&_ExAD6el%eY{3*HwGnaF=~l4XXJp{%K<us8gX3Q2=`Seb@_%FZZb2&DC~k
ze~i96r?CU#>PAHf&y%k>aJFpp1)RYt<+Yv)`~$DdAmy_B^x5xxeB<N=5i73p%6Gn8
ze~DEYEGeV)R%x+Ja&aWo6b^Sp=f_H0#%qh;BHpc>3ifIUBEhFXwt$_5Lw6crELYv@
zKwHTPEwmF9OQ5S3o_mEmuJFX7J4CsB8{ml3#;taw4Mk7Oa#2{wh`O}6sX%Q9Y;vy}
zlIf@BlwXCxQ?=2mKgrU|J;1fiX{|Lsl=<VGHnZ2%iGx(l(Zb8U018BIy1KWiah~(>
zHX!x4ZS$`)rk|}L7`QL~Z_ecNXZr)@Lv>6JofErl_t<PO?XeKEPLit-uwxXA=?IH8
zD<0q>=akk?M5cNR^>sux*HRTN^WXnoq3osW(HC;R8gZk3-lx`3IDP_#&poZw(x}p{
zwj4FKHJJGXQ6KW@iJ5fG{jG~3)*3F49X=|^PrJ3KWlH%0Bi)Lx7*+g~t^usWsN^{;
z3HRKbbsd}jV2}gi2h~RU4oSV#pt;WJko-^?yuef5JcmCV1)0WT<AH^Jq-PGV8DBEg
zhaRO2)jM$Y{kiO;gEbCj2k)!0Wb$7+R3dz1(tPQwPbDH?Q_8iN1n+#~?$Byv-c1ny
zt)DH|krC)(C2~(hD$-clz5F}dFwt4^yKccg^N>1u+HWfv(E%ZCY01(|r!Jb-%GO`T
zs3_8uR3e-jE)f*5hrT&ejZXH9=6%pRX>!l4IK!nK7OZP|=3QJ~4DfZ#c>lBm7TROj
znMK4PHy|O+T^nGu9p`@m$C%}Wo&=^?gM2b~WiT^LXF&%h9vRqjxl7^c(cwfv-8unw
zt25aT6OmHp;lqORlZg5ca~eu$Y_fjd^zK-7UP5}_=M`-9ru@SLJ_<=aoCVy)CR4PB
z$-Tzvg80~#z02BT6^J_WC3R+5CFPJz4!R&_v!jzes0wUix*I{1v7D2!KDScR&X%<e
zcjus3xKcN}C=4|4t>Sdwx7_fKtSX%Zm}Rhuc>n3YwQ8AV6~r75W#ui+s(I&{r_LXo
zEN}FbdRtQ-ZifnSH?~_mK}+Xr?em)4xOlPpq+KcT#L!{q%^M^3e52sFiErtQHHC=V
z4Yl-FuoaX3{e=0ylgStQ22(Y&e@!G|<HAsT=n!O$I|=nnH_J%8QpW_HTJ0SL^J>E8
zK(;bBDbD>>H>>8m`m!Hx5N>4dpDhc>sUzl(7tBr!ZzO~>Ag9^PrGbDPQU&tdMI@Ke
z44{$SAZPbt7Ih@UD&#rD0ixOBfpMUE$Ib9kab@AAJ1gRu*Nf-7<Ubgo8^v(~o070m
z_u@EnFN35Wk!FjED{&}`ZE+?ZUUG(H`xy#<Tk7siD7c`DM3xnF6AtvymF>2gjhqP?
z`-TJl5F#&<D8{P5q}i{H-dDBXjvfh4+9fA2&_g?hz8?>xlss}v$Qyg{*?F<mH|;Va
zi@CtBsH@MNhPfWLyP%g+4Sq9d82h{t3^}U;ugW^BTZ{q*K#v(F#Ryns&U~)Y0hVP^
z!6_Zp+^Y2CgdEaC<l`SjLz6av7;2t}Vr}2NRI5|+?U{3i%ZSoyv`^sqm!IwlpX&Jl
zgWk_RXV<JdYDvfH@lt|sw;d$p2O`24*}yjK#iNhxK0%A@W)9B^$uUpvQy`BaFVjr)
zU;B%HVDFO79q!y}Ms2jD33UCdOyq|8TChtg-}cOmV68skF2p<iV5U%bCkG1t@vnT?
zl=(~Z!J3pGR^Zo&?9FE9BC&f1zJ1(sdDh^&pNAv`*&;Z|2Mxv<E#E6^F-o;5T1DIM
zpGw!TSEPR4=G^$HG$Gpn-@a_p;CqH|E7`}VGkU_k4zQ{m&@S2HJ99G{W84JHyyRbu
z$Sn{Q*xOY^$6xsTfXEO?r$CAdLtO~F1PXt;h?=5?DTh?(_%kt2Qsfkv8<Fp7Vw#M*
zjmTO<2oq(~@82!Q7WhtnJ5C%aWaf-%v~Ao~l5-(lULm3`^ke0|2oNlNZo+HqIF?Ak
zclEu?XP4mGEmkx1GxSD02TBsGH({c^r47lkEY&=vFLKFR>l)Rmf2l^)livd=UE?RL
z?L7rwX%K4aee)3$)=eqZ>3`Y@N97dpoAw^@<elafv4<iG#Z`<5OMPZDFeOT<OR8#?
zUz`z&el8&vl30PLmU8FTH_ojky-G|A`{M$u)j!GC6920;ka&v9`5nMxE-5xfRZ(Jm
N061q)EY~qO?f>Z<Mh*Y~

literal 0
HcmV?d00001

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 22932a0e..1fdd1795 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,6 +1,7 @@
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import Home from "./pages/home/Home";
 import { Header } from "./components/Header/Header";
+import { NotFound } from "./pages/error/NotFound";
 
 /**
  * This component is the main application component that will be rendered by the ReactDOM. 
@@ -12,6 +13,7 @@ function App(): JSX.Element {
       <Header />
       <Routes>
         <Route index element={<Home />} />
+        <Route path="*" element={<NotFound />} />
       </Routes>
     </BrowserRouter>
   );
diff --git a/frontend/src/pages/error/Error.tsx b/frontend/src/pages/error/Error.tsx
deleted file mode 100644
index faee38d9..00000000
--- a/frontend/src/pages/error/Error.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { isRouteErrorResponse, useRouteError } from "react-router-dom"
-
-/**
- * This component is the error page component that will be rendered when an error occurs.
- * @returns - The error page component
- */
-export function Error() {
-  const error = useRouteError();
-
-  if (isRouteErrorResponse(error)) {
-
-    let message = "";
-    if (error.status == 403) {
-      message = "Forbidden"
-    } else if (error.status == 404) {
-      message = "Page not found";
-    } else if (error.status == 500) {
-      message = "Internal server error";
-    } else if (error.status == 503) {
-      message = "Looks like our API is down";
-    } else if (500 <= error.status && error.status <= 599) {
-      message = "General server error";
-    }
-
-    return(
-      <div>
-        <h1>
-          { error.status }
-        </h1>
-        <p>
-          { message }
-        </p>
-      </div>
-    )
-  }
-}
\ No newline at end of file
diff --git a/frontend/src/pages/error/NotFound.tsx b/frontend/src/pages/error/NotFound.tsx
new file mode 100644
index 00000000..f0c6ec55
--- /dev/null
+++ b/frontend/src/pages/error/NotFound.tsx
@@ -0,0 +1,22 @@
+import { Box, Typography } from "@mui/material";
+
+/**
+ * This component is the NotFound component that will be rendered when a page is not found.
+ * @returns - The NotFound component
+ */
+export function NotFound() {
+  return (
+  <Box sx={{ flexGrow: 1 }}>
+    <Typography variant="h1">
+      404
+    </Typography>
+    <Typography variant="h3">
+      Page Not Found
+    </Typography>
+    <Typography variant="body1">
+      Sorry, the page you are looking for could not be found.  
+    </Typography>
+    <Box component="img" src="/error_pigeon.png" alt="icon" />
+  </Box>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/pages/error/ServerError.tsx b/frontend/src/pages/error/ServerError.tsx
new file mode 100644
index 00000000..cff9e1bc
--- /dev/null
+++ b/frontend/src/pages/error/ServerError.tsx
@@ -0,0 +1,22 @@
+import { Box, Typography } from "@mui/material";
+
+/**
+ * This component is the ServerError component that will be rendered when a general server error occurs.
+ * @returns - The ServerError component
+ */
+export function ServerError() {
+  return (
+    <Box sx={{ flexGrow: 1 }}>
+      <Typography variant="h1">
+        5XX
+      </Typography>
+      <Typography variant="h3">
+        General Server Error
+      </Typography>
+      <Typography variant="body1">
+        Sorry, there seems to be a problem with the server.  
+      </Typography>
+      <Box component="img" src="/error_pigeon.png" alt="icon" />
+    </Box>
+    );
+}
\ No newline at end of file

From 5c517573759fddb56b52abc8d8139586e892c7dc Mon Sep 17 00:00:00 2001
From: matisse <matisse.sulzer@ugent.be>
Date: Thu, 14 Mar 2024 17:46:44 +0100
Subject: [PATCH 05/16] indentation fixed

---
 frontend/src/pages/error/NotFound.tsx    | 24 ++++++++++++------------
 frontend/src/pages/error/ServerError.tsx |  2 +-
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/frontend/src/pages/error/NotFound.tsx b/frontend/src/pages/error/NotFound.tsx
index f0c6ec55..c8c859b9 100644
--- a/frontend/src/pages/error/NotFound.tsx
+++ b/frontend/src/pages/error/NotFound.tsx
@@ -6,17 +6,17 @@ import { Box, Typography } from "@mui/material";
  */
 export function NotFound() {
   return (
-  <Box sx={{ flexGrow: 1 }}>
-    <Typography variant="h1">
-      404
-    </Typography>
-    <Typography variant="h3">
-      Page Not Found
-    </Typography>
-    <Typography variant="body1">
-      Sorry, the page you are looking for could not be found.  
-    </Typography>
-    <Box component="img" src="/error_pigeon.png" alt="icon" />
-  </Box>
+    <Box sx={{ flexGrow: 1 }}>
+      <Typography variant="h1">
+        404
+      </Typography>
+      <Typography variant="h3">
+        Page Not Found
+      </Typography>
+      <Typography variant="body1">
+        Sorry, the page you are looking for could not be found.  
+      </Typography>
+      <Box component="img" src="/error_pigeon.png" alt="icon" />
+    </Box>
   );
 }
\ No newline at end of file
diff --git a/frontend/src/pages/error/ServerError.tsx b/frontend/src/pages/error/ServerError.tsx
index cff9e1bc..1d1a0bc6 100644
--- a/frontend/src/pages/error/ServerError.tsx
+++ b/frontend/src/pages/error/ServerError.tsx
@@ -18,5 +18,5 @@ export function ServerError() {
       </Typography>
       <Box component="img" src="/error_pigeon.png" alt="icon" />
     </Box>
-    );
+  );
 }
\ No newline at end of file

From 2e0f86e158faf335f5f36b71062f9624d6014213 Mon Sep 17 00:00:00 2001
From: matisse <matisse.sulzer@ugent.be>
Date: Thu, 21 Mar 2024 04:57:44 +0100
Subject: [PATCH 06/16] layout adjusted, using RouterProvider instead of
 BrowserRouter to render errors correctly, tests added

---
 frontend/cypress/e2e/ErrorPage.cy.tsx      | 16 ++++
 frontend/package-lock.json                 | 95 ++++++++++++++++++++--
 frontend/package.json                      |  5 +-
 frontend/src/App.tsx                       | 38 +++++----
 frontend/src/Layout.tsx                    | 15 ++++
 frontend/src/pages/error/ErrorBoundary.tsx | 27 ++++++
 frontend/src/pages/error/ErrorPage.tsx     | 53 ++++++++++++
 frontend/src/pages/error/NotFound.tsx      | 22 -----
 frontend/src/pages/error/ServerError.tsx   | 22 -----
 9 files changed, 225 insertions(+), 68 deletions(-)
 create mode 100644 frontend/cypress/e2e/ErrorPage.cy.tsx
 create mode 100644 frontend/src/Layout.tsx
 create mode 100644 frontend/src/pages/error/ErrorBoundary.tsx
 create mode 100644 frontend/src/pages/error/ErrorPage.tsx
 delete mode 100644 frontend/src/pages/error/NotFound.tsx
 delete mode 100644 frontend/src/pages/error/ServerError.tsx

diff --git a/frontend/cypress/e2e/ErrorPage.cy.tsx b/frontend/cypress/e2e/ErrorPage.cy.tsx
new file mode 100644
index 00000000..4ad7e19a
--- /dev/null
+++ b/frontend/cypress/e2e/ErrorPage.cy.tsx
@@ -0,0 +1,16 @@
+describe('Error page test', () => {
+  it('Error page should load appropriately', () => {
+    expect(
+      () => {
+        cy.request({
+          method: 'POST',
+          path: '**',
+          body: {name: "fail"},
+          failOnStatusCode: false
+        }).then(response => {
+          expect(response.status).to.be.gt(299) // is supposed to be 404
+        })
+      }
+    )
+  })
+})
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 0940a1bc..aee6d7c2 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -13,8 +13,11 @@
         "@mui/icons-material": "^5.15.10",
         "@mui/material": "^5.15.10",
         "@mui/styled-engine-sc": "^6.0.0-alpha.16",
+        "@types/mui-image": "^1.0.5",
+        "mui-image": "^1.0.7",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-i18next": "^14.1.0",
         "react-router-dom": "^6.22.3",
         "styled-components": "^6.1.8"
       },
@@ -25,7 +28,7 @@
         "@typescript-eslint/eslint-plugin": "^6.21.0",
         "@typescript-eslint/parser": "^6.21.0",
         "@vitejs/plugin-react": "^4.2.1",
-        "cypress": "^13.6.4",
+        "cypress": "^13.7.0",
         "eslint": "^8.56.0",
         "eslint-plugin-jsdoc": "^48.1.0",
         "eslint-plugin-react-hooks": "^4.6.0",
@@ -1808,6 +1811,14 @@
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
       "dev": true
     },
+    "node_modules/@types/mui-image": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/mui-image/-/mui-image-1.0.5.tgz",
+      "integrity": "sha512-xbOpuowqvMyRiiM3U39AApyVj2xIoNH6egvMCWQ+d9AzILs0cT688x33AfPnQrnMqmJBclo4hRyUzpxGQwTqkQ==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/node": {
       "version": "20.11.19",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.19.tgz",
@@ -2797,9 +2808,9 @@
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "node_modules/cypress": {
-      "version": "13.6.4",
-      "resolved": "https://registry.npmjs.org/cypress/-/cypress-13.6.4.tgz",
-      "integrity": "sha512-pYJjCfDYB+hoOoZuhysbbYhEmNW7DEDsqn+ToCLwuVowxUXppIWRr7qk4TVRIU471ksfzyZcH+mkoF0CQUKnpw==",
+      "version": "13.7.0",
+      "resolved": "https://registry.npmjs.org/cypress/-/cypress-13.7.0.tgz",
+      "integrity": "sha512-UimjRSJJYdTlvkChcdcfywKJ6tUYuwYuk/n1uMMglrvi+ZthNhoRYcxnWgTqUtkl17fXrPAsD5XT2rcQYN1xKA==",
       "dev": true,
       "hasInstallScript": true,
       "dependencies": {
@@ -2810,7 +2821,7 @@
         "arch": "^2.2.0",
         "blob-util": "^2.0.2",
         "bluebird": "^3.7.2",
-        "buffer": "^5.6.0",
+        "buffer": "^5.7.1",
         "cachedir": "^2.3.0",
         "chalk": "^4.1.0",
         "check-more-types": "^2.24.0",
@@ -2828,7 +2839,7 @@
         "figures": "^3.2.0",
         "fs-extra": "^9.1.0",
         "getos": "^3.2.1",
-        "is-ci": "^3.0.0",
+        "is-ci": "^3.0.1",
         "is-installed-globally": "~0.4.0",
         "lazy-ass": "^1.6.0",
         "listr2": "^3.8.3",
@@ -4030,6 +4041,14 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/html-parse-stringify": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "dependencies": {
+        "void-elements": "3.1.0"
+      }
+    },
     "node_modules/http-signature": {
       "version": "1.3.6",
       "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.3.6.tgz",
@@ -4053,6 +4072,29 @@
         "node": ">=8.12.0"
       }
     },
+    "node_modules/i18next": {
+      "version": "23.10.1",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-23.10.1.tgz",
+      "integrity": "sha512-NDiIzFbcs3O9PXpfhkjyf7WdqFn5Vq6mhzhtkXzj51aOcNuPNcTwuYNuXCpHsanZGHlHKL35G7huoFeVic1hng==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://locize.com"
+        },
+        {
+          "type": "individual",
+          "url": "https://locize.com/i18next.html"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+        }
+      ],
+      "peer": true,
+      "dependencies": {
+        "@babel/runtime": "^7.23.2"
+      }
+    },
     "node_modules/ieee754": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
@@ -4785,6 +4827,18 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
       "dev": true
     },
+    "node_modules/mui-image": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/mui-image/-/mui-image-1.0.7.tgz",
+      "integrity": "sha512-U79TWMKMfMC1ZiGnv/M+SaVJeUpubEjXOdy7w53RsvidUAMZ+4nW+QmDG9yg5fgWeYy6YJgLHyI9BHSDw76iIg==",
+      "peerDependencies": {
+        "@emotion/react": "^11.4.1",
+        "@emotion/styled": "^11.3.0",
+        "@mui/material": "^5.0.1",
+        "prop-types": "^15.7.2",
+        "react": "^17.0.2 || ^18.0.0"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
@@ -5214,6 +5268,27 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-i18next": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-14.1.0.tgz",
+      "integrity": "sha512-3KwX6LHpbvGQ+sBEntjV4sYW3Zovjjl3fpoHbUwSgFHf0uRBcbeCBLR5al6ikncI5+W0EFb71QXZmfop+J6NrQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "html-parse-stringify": "^3.0.1"
+      },
+      "peerDependencies": {
+        "i18next": ">= 23.2.3",
+        "react": ">= 16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-is": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
@@ -6117,6 +6192,14 @@
         }
       }
     },
+    "node_modules/void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 4f9b20e1..acb16d3e 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -17,8 +17,11 @@
     "@mui/icons-material": "^5.15.10",
     "@mui/material": "^5.15.10",
     "@mui/styled-engine-sc": "^6.0.0-alpha.16",
+    "@types/mui-image": "^1.0.5",
+    "mui-image": "^1.0.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-i18next": "^14.1.0",
     "react-router-dom": "^6.22.3",
     "styled-components": "^6.1.8"
   },
@@ -29,7 +32,7 @@
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
     "@vitejs/plugin-react": "^4.2.1",
-    "cypress": "^13.6.4",
+    "cypress": "^13.7.0",
     "eslint": "^8.56.0",
     "eslint-plugin-jsdoc": "^48.1.0",
     "eslint-plugin-react-hooks": "^4.6.0",
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 1fdd1795..1adaeeea 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,22 +1,26 @@
-import { BrowserRouter, Route, Routes } from "react-router-dom";
-import Home from "./pages/home/Home";
-import { Header } from "./components/Header/Header";
-import { NotFound } from "./pages/error/NotFound";
+import { RouterProvider, createBrowserRouter } from "react-router-dom";
+import Home from "./pages/home/Home.tsx";
+import { Layout } from "./Layout.tsx";
+import { ErrorBoundary } from "./pages/error/ErrorBoundary.tsx";
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    Component: Layout ,
+    errorElement: <ErrorBoundary />,
+    children: [
+      {
+        index: true,
+        Component: Home
+      }
+    ]
+  }
+]);
 
 /**
  * This component is the main application component that will be rendered by the ReactDOM. 
- * @returns - The main application component
+ * @returns The main application component
  */
-function App(): JSX.Element {
-  return (
-    <BrowserRouter>
-      <Header />
-      <Routes>
-        <Route index element={<Home />} />
-        <Route path="*" element={<NotFound />} />
-      </Routes>
-    </BrowserRouter>
-  );
+export default function App(): React.JSX.Element {
+  return <RouterProvider router={router} />;
 }
-
-export default App;
diff --git a/frontend/src/Layout.tsx b/frontend/src/Layout.tsx
new file mode 100644
index 00000000..2184d5c7
--- /dev/null
+++ b/frontend/src/Layout.tsx
@@ -0,0 +1,15 @@
+import { Outlet } from "react-router-dom";
+import { Header } from "./components/Header/Header.tsx";
+
+/**
+ * Basic layout component that will be used on all routes.
+ * @returns The Layout component
+ */
+export function Layout(): JSX.Element {
+  return (
+    <>
+      <Header />
+      <Outlet />
+    </>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/pages/error/ErrorBoundary.tsx b/frontend/src/pages/error/ErrorBoundary.tsx
new file mode 100644
index 00000000..d2a3f0f3
--- /dev/null
+++ b/frontend/src/pages/error/ErrorBoundary.tsx
@@ -0,0 +1,27 @@
+import { useRouteError, isRouteErrorResponse } from "react-router-dom";
+import { ErrorPage } from "./ErrorPage.tsx";
+
+/**
+ * This component will render the ErrorPage component with the appropriate data when an error occurs.
+ * @returns The ErrorBoundary component
+ */
+export function ErrorBoundary() {
+  const error = useRouteError();
+  if (isRouteErrorResponse(error)) {
+    if (error.status == 404) {
+      return (
+        <ErrorPage statusCode={"404"} statusTitle={"Page Not Found"} message={"page_not_found_message"} />
+      );
+    }
+    if (error.status == 403) {
+      return (
+        <ErrorPage statusCode={"403"} statusTitle={"Forbidden"} message={"forbidden_message"} />
+      );
+    }
+    if (error.status >= 500 && error.status <= 599) {
+      return (
+        <ErrorPage statusCode={error.statusText} statusTitle={"Server Error"} message={"server_error_message"} />
+      );
+    }
+  }
+}
diff --git a/frontend/src/pages/error/ErrorPage.tsx b/frontend/src/pages/error/ErrorPage.tsx
new file mode 100644
index 00000000..55b0dae9
--- /dev/null
+++ b/frontend/src/pages/error/ErrorPage.tsx
@@ -0,0 +1,53 @@
+import { Grid, Typography } from "@mui/material";
+import { Image } from "mui-image"; 
+import { useTranslation } from "react-i18next";
+
+/**
+ * This component will be rendered when an error occurs.
+ * @returns - The ErrorPage component
+ */
+export function ErrorPage(
+  { statusCode, statusTitle, message }: { statusCode: string, statusTitle: string, message: string}
+): JSX.Element {
+
+  const { t } = useTranslation();
+
+  return (
+    <Grid
+      container
+      justifyContent="center"
+      alignItems="center"
+      direction="column"
+      sx={{ minHeight: "100vh" }}
+      spacing={2}
+    >
+      <Grid item>
+        <Grid
+          container
+          justifyContent="center"
+          alignItems="center"
+          spacing={4}
+        >
+          <Grid item>
+            <Typography variant="h1">
+              { statusCode }
+            </Typography>
+          </Grid>
+          <Grid item>
+            <Image src="/error_pigeon.png" height="20vh" alt="icon" />
+          </Grid>
+        </Grid>
+      </Grid>
+      <Grid item>
+        <Typography variant="h3">
+          { statusTitle }
+        </Typography>
+      </Grid>
+      <Grid item>
+        <Typography variant="body1">
+          { t(message) }
+        </Typography>
+      </Grid>
+    </Grid>
+  );
+}
diff --git a/frontend/src/pages/error/NotFound.tsx b/frontend/src/pages/error/NotFound.tsx
deleted file mode 100644
index c8c859b9..00000000
--- a/frontend/src/pages/error/NotFound.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Box, Typography } from "@mui/material";
-
-/**
- * This component is the NotFound component that will be rendered when a page is not found.
- * @returns - The NotFound component
- */
-export function NotFound() {
-  return (
-    <Box sx={{ flexGrow: 1 }}>
-      <Typography variant="h1">
-        404
-      </Typography>
-      <Typography variant="h3">
-        Page Not Found
-      </Typography>
-      <Typography variant="body1">
-        Sorry, the page you are looking for could not be found.  
-      </Typography>
-      <Box component="img" src="/error_pigeon.png" alt="icon" />
-    </Box>
-  );
-}
\ No newline at end of file
diff --git a/frontend/src/pages/error/ServerError.tsx b/frontend/src/pages/error/ServerError.tsx
deleted file mode 100644
index 1d1a0bc6..00000000
--- a/frontend/src/pages/error/ServerError.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Box, Typography } from "@mui/material";
-
-/**
- * This component is the ServerError component that will be rendered when a general server error occurs.
- * @returns - The ServerError component
- */
-export function ServerError() {
-  return (
-    <Box sx={{ flexGrow: 1 }}>
-      <Typography variant="h1">
-        5XX
-      </Typography>
-      <Typography variant="h3">
-        General Server Error
-      </Typography>
-      <Typography variant="body1">
-        Sorry, there seems to be a problem with the server.  
-      </Typography>
-      <Box component="img" src="/error_pigeon.png" alt="icon" />
-    </Box>
-  );
-}
\ No newline at end of file

From 3b7cb88b098ba834f39bf665bb6c11cb9e8af825 Mon Sep 17 00:00:00 2001
From: matisse <matisse.sulzer@ugent.be>
Date: Thu, 21 Mar 2024 11:54:43 +0100
Subject: [PATCH 07/16] linter

---
 frontend/src/pages/error/ErrorPage.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/error/ErrorPage.tsx b/frontend/src/pages/error/ErrorPage.tsx
index 55b0dae9..3fc70293 100644
--- a/frontend/src/pages/error/ErrorPage.tsx
+++ b/frontend/src/pages/error/ErrorPage.tsx
@@ -4,7 +4,10 @@ import { useTranslation } from "react-i18next";
 
 /**
  * This component will be rendered when an error occurs.
- * @returns - The ErrorPage component
+ * @param statusCode The status code of the error.
+ * @param statusTitle The name of the error.
+ * @param message Additional information about the error.
+ * @returns The ErrorPage component
  */
 export function ErrorPage(
   { statusCode, statusTitle, message }: { statusCode: string, statusTitle: string, message: string}

From 9a2b0a597c1dcf9ebe4be585f060a44da9a93921 Mon Sep 17 00:00:00 2001
From: matisse <matisse.sulzer@ugent.be>
Date: Thu, 28 Mar 2024 14:12:39 +0100
Subject: [PATCH 08/16] documentation

---
 frontend/src/pages/error/ErrorPage.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/pages/error/ErrorPage.tsx b/frontend/src/pages/error/ErrorPage.tsx
index 3fc70293..19b27c9c 100644
--- a/frontend/src/pages/error/ErrorPage.tsx
+++ b/frontend/src/pages/error/ErrorPage.tsx
@@ -4,13 +4,13 @@ import { useTranslation } from "react-i18next";
 
 /**
  * This component will be rendered when an error occurs.
- * @param statusCode The status code of the error.
- * @param statusTitle The name of the error.
- * @param message Additional information about the error.
+ * @param statusCode - The status code of the error
+ * @param statusTitle - The name of the error
+ * @param message - Additional information about the error
  * @returns The ErrorPage component
  */
 export function ErrorPage(
-  { statusCode, statusTitle, message }: { statusCode: string, statusTitle: string, message: string}
+  { statusCode, statusTitle, message }: { statusCode: string, statusTitle: string, message: string }
 ): JSX.Element {
 
   const { t } = useTranslation();

From 32e501e1e9bceb8a0c08e57ec089f400486d9d98 Mon Sep 17 00:00:00 2001
From: matisse <matisse.sulzer@ugent.be>
Date: Thu, 28 Mar 2024 15:45:01 +0100
Subject: [PATCH 09/16] linter error parameters

---
 frontend/.eslintrc.cjs | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/.eslintrc.cjs b/frontend/.eslintrc.cjs
index c685b20b..0229c600 100644
--- a/frontend/.eslintrc.cjs
+++ b/frontend/.eslintrc.cjs
@@ -26,7 +26,7 @@ module.exports = {
     "jsdoc/check-access": 1,
     "tsdoc/syntax": "warn",
     "jsdoc/check-alignment": 1,
-    "jsdoc/check-param-names": 1,
+    "jsdoc/check-param-names": 0,
     "jsdoc/check-property-names": 1,
     "jsdoc/check-tag-names": 1,
     "jsdoc/check-types": 1,
@@ -37,10 +37,10 @@ module.exports = {
     "jsdoc/no-multi-asterisks": 1,
     "jsdoc/no-undefined-types": 1,
     "jsdoc/require-jsdoc": 1,
-    "jsdoc/require-param": 1,
+    "jsdoc/require-param": 0,
     "jsdoc/require-param-description": 1,
     "jsdoc/require-param-name": 1,
-    "jsdoc/require-param-type": 1,
+    "jsdoc/require-param-type": 0,
     "jsdoc/require-property": 1,
     "jsdoc/require-property-description": 1,
     "jsdoc/require-property-name": 1,

From 0c632c05df1cf0936851102b1c5acf812c73e0fe Mon Sep 17 00:00:00 2001
From: matisse <matisse.sulzer@ugent.be>
Date: Sat, 13 Apr 2024 23:52:09 +0200
Subject: [PATCH 10/16] Added i18n, changed general structure of App component
 and got rid of fade animation for the image

---
 frontend/cypress/e2e/ErrorPage.cy.tsx       |   2 +-
 frontend/package-lock.json                  | 355 +++++++++++---------
 frontend/public/{ => img}/error_pigeon.png  | Bin
 frontend/public/{ => img}/logo_ugent.png    | Bin
 frontend/public/locales/en/translation.json |  13 +-
 frontend/public/locales/nl/translation.json |  13 +-
 frontend/src/App.tsx                        |  22 +-
 frontend/src/pages/error/ErrorBoundary.tsx  |  16 +-
 frontend/src/pages/error/ErrorPage.tsx      |   7 +-
 9 files changed, 236 insertions(+), 192 deletions(-)
 rename frontend/public/{ => img}/error_pigeon.png (100%)
 rename frontend/public/{ => img}/logo_ugent.png (100%)

diff --git a/frontend/cypress/e2e/ErrorPage.cy.tsx b/frontend/cypress/e2e/ErrorPage.cy.tsx
index 4ad7e19a..7d998994 100644
--- a/frontend/cypress/e2e/ErrorPage.cy.tsx
+++ b/frontend/cypress/e2e/ErrorPage.cy.tsx
@@ -8,7 +8,7 @@ describe('Error page test', () => {
           body: {name: "fail"},
           failOnStatusCode: false
         }).then(response => {
-          expect(response.status).to.be.gt(299) // is supposed to be 404
+          expect(response.status).to.be(404) // is supposed to be 404
         })
       }
     )
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index a9d2e87f..dde282ec 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -641,9 +641,9 @@
       }
     },
     "node_modules/@esbuild/aix-ppc64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz",
-      "integrity": "sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
+      "integrity": "sha512-D+EBOJHXdNZcLJRBkhENNG8Wji2kgc9AZ9KiPr1JuZjsNtyHzrsfLRrY0tk2H2aoFu6RANO1y1iPPUCDYWkb5g==",
       "cpu": [
         "ppc64"
       ],
@@ -657,9 +657,9 @@
       }
     },
     "node_modules/@esbuild/android-arm": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.12.tgz",
-      "integrity": "sha512-qg/Lj1mu3CdQlDEEiWrlC4eaPZ1KztwGJ9B6J+/6G+/4ewxJg7gqj8eVYWvao1bXrqGiW2rsBZFSX3q2lcW05w==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.20.2.tgz",
+      "integrity": "sha512-t98Ra6pw2VaDhqNWO2Oph2LXbz/EJcnLmKLGBJwEwXX/JAN83Fym1rU8l0JUWK6HkIbWONCSSatf4sf2NBRx/w==",
       "cpu": [
         "arm"
       ],
@@ -673,9 +673,9 @@
       }
     },
     "node_modules/@esbuild/android-arm64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.12.tgz",
-      "integrity": "sha512-P0UVNGIienjZv3f5zq0DP3Nt2IE/3plFzuaS96vihvD0Hd6H/q4WXUGpCxD/E8YrSXfNyRPbpTq+T8ZQioSuPA==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.20.2.tgz",
+      "integrity": "sha512-mRzjLacRtl/tWU0SvD8lUEwb61yP9cqQo6noDZP/O8VkwafSYwZ4yWy24kan8jE/IMERpYncRt2dw438LP3Xmg==",
       "cpu": [
         "arm64"
       ],
@@ -689,9 +689,9 @@
       }
     },
     "node_modules/@esbuild/android-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.12.tgz",
-      "integrity": "sha512-3k7ZoUW6Q6YqhdhIaq/WZ7HwBpnFBlW905Fa4s4qWJyiNOgT1dOqDiVAQFwBH7gBRZr17gLrlFCRzF6jFh7Kew==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.20.2.tgz",
+      "integrity": "sha512-btzExgV+/lMGDDa194CcUQm53ncxzeBrWJcncOBxuC6ndBkKxnHdFJn86mCIgTELsooUmwUm9FkhSp5HYu00Rg==",
       "cpu": [
         "x64"
       ],
@@ -705,9 +705,9 @@
       }
     },
     "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.12.tgz",
-      "integrity": "sha512-B6IeSgZgtEzGC42jsI+YYu9Z3HKRxp8ZT3cqhvliEHovq8HSX2YX8lNocDn79gCKJXOSaEot9MVYky7AKjCs8g==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.20.2.tgz",
+      "integrity": "sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==",
       "cpu": [
         "arm64"
       ],
@@ -721,9 +721,9 @@
       }
     },
     "node_modules/@esbuild/darwin-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.12.tgz",
-      "integrity": "sha512-hKoVkKzFiToTgn+41qGhsUJXFlIjxI/jSYeZf3ugemDYZldIXIxhvwN6erJGlX4t5h417iFuheZ7l+YVn05N3A==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.20.2.tgz",
+      "integrity": "sha512-tBcXp9KNphnNH0dfhv8KYkZhjc+H3XBkF5DKtswJblV7KlT9EI2+jeA8DgBjp908WEuYll6pF+UStUCfEpdysA==",
       "cpu": [
         "x64"
       ],
@@ -737,9 +737,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.12.tgz",
-      "integrity": "sha512-4aRvFIXmwAcDBw9AueDQ2YnGmz5L6obe5kmPT8Vd+/+x/JMVKCgdcRwH6APrbpNXsPz+K653Qg8HB/oXvXVukA==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.20.2.tgz",
+      "integrity": "sha512-d3qI41G4SuLiCGCFGUrKsSeTXyWG6yem1KcGZVS+3FYlYhtNoNgYrWcvkOoaqMhwXSMrZRl69ArHsGJ9mYdbbw==",
       "cpu": [
         "arm64"
       ],
@@ -753,9 +753,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.12.tgz",
-      "integrity": "sha512-EYoXZ4d8xtBoVN7CEwWY2IN4ho76xjYXqSXMNccFSx2lgqOG/1TBPW0yPx1bJZk94qu3tX0fycJeeQsKovA8gg==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.20.2.tgz",
+      "integrity": "sha512-d+DipyvHRuqEeM5zDivKV1KuXn9WeRX6vqSqIDgwIfPQtwMP4jaDsQsDncjTDDsExT4lR/91OLjRo8bmC1e+Cw==",
       "cpu": [
         "x64"
       ],
@@ -769,9 +769,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.12.tgz",
-      "integrity": "sha512-J5jPms//KhSNv+LO1S1TX1UWp1ucM6N6XuL6ITdKWElCu8wXP72l9MM0zDTzzeikVyqFE6U8YAV9/tFyj0ti+w==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.20.2.tgz",
+      "integrity": "sha512-VhLPeR8HTMPccbuWWcEUD1Az68TqaTYyj6nfE4QByZIQEQVWBB8vup8PpR7y1QHL3CpcF6xd5WVBU/+SBEvGTg==",
       "cpu": [
         "arm"
       ],
@@ -785,9 +785,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.12.tgz",
-      "integrity": "sha512-EoTjyYyLuVPfdPLsGVVVC8a0p1BFFvtpQDB/YLEhaXyf/5bczaGeN15QkR+O4S5LeJ92Tqotve7i1jn35qwvdA==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.20.2.tgz",
+      "integrity": "sha512-9pb6rBjGvTFNira2FLIWqDk/uaf42sSyLE8j1rnUpuzsODBq7FvpwHYZxQ/It/8b+QOS1RYfqgGFNLRI+qlq2A==",
       "cpu": [
         "arm64"
       ],
@@ -801,9 +801,9 @@
       }
     },
     "node_modules/@esbuild/linux-ia32": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.12.tgz",
-      "integrity": "sha512-Thsa42rrP1+UIGaWz47uydHSBOgTUnwBwNq59khgIwktK6x60Hivfbux9iNR0eHCHzOLjLMLfUMLCypBkZXMHA==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.20.2.tgz",
+      "integrity": "sha512-o10utieEkNPFDZFQm9CoP7Tvb33UutoJqg3qKf1PWVeeJhJw0Q347PxMvBgVVFgouYLGIhFYG0UGdBumROyiig==",
       "cpu": [
         "ia32"
       ],
@@ -817,9 +817,9 @@
       }
     },
     "node_modules/@esbuild/linux-loong64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.12.tgz",
-      "integrity": "sha512-LiXdXA0s3IqRRjm6rV6XaWATScKAXjI4R4LoDlvO7+yQqFdlr1Bax62sRwkVvRIrwXxvtYEHHI4dm50jAXkuAA==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.20.2.tgz",
+      "integrity": "sha512-PR7sp6R/UC4CFVomVINKJ80pMFlfDfMQMYynX7t1tNTeivQ6XdX5r2XovMmha/VjR1YN/HgHWsVcTRIMkymrgQ==",
       "cpu": [
         "loong64"
       ],
@@ -833,9 +833,9 @@
       }
     },
     "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.12.tgz",
-      "integrity": "sha512-fEnAuj5VGTanfJ07ff0gOA6IPsvrVHLVb6Lyd1g2/ed67oU1eFzL0r9WL7ZzscD+/N6i3dWumGE1Un4f7Amf+w==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.20.2.tgz",
+      "integrity": "sha512-4BlTqeutE/KnOiTG5Y6Sb/Hw6hsBOZapOVF6njAESHInhlQAghVVZL1ZpIctBOoTFbQyGW+LsVYZ8lSSB3wkjA==",
       "cpu": [
         "mips64el"
       ],
@@ -849,9 +849,9 @@
       }
     },
     "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.12.tgz",
-      "integrity": "sha512-nYJA2/QPimDQOh1rKWedNOe3Gfc8PabU7HT3iXWtNUbRzXS9+vgB0Fjaqr//XNbd82mCxHzik2qotuI89cfixg==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.20.2.tgz",
+      "integrity": "sha512-rD3KsaDprDcfajSKdn25ooz5J5/fWBylaaXkuotBDGnMnDP1Uv5DLAN/45qfnf3JDYyJv/ytGHQaziHUdyzaAg==",
       "cpu": [
         "ppc64"
       ],
@@ -865,9 +865,9 @@
       }
     },
     "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.12.tgz",
-      "integrity": "sha512-2MueBrlPQCw5dVJJpQdUYgeqIzDQgw3QtiAHUC4RBz9FXPrskyyU3VI1hw7C0BSKB9OduwSJ79FTCqtGMWqJHg==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.20.2.tgz",
+      "integrity": "sha512-snwmBKacKmwTMmhLlz/3aH1Q9T8v45bKYGE3j26TsaOVtjIag4wLfWSiZykXzXuE1kbCE+zJRmwp+ZbIHinnVg==",
       "cpu": [
         "riscv64"
       ],
@@ -881,9 +881,9 @@
       }
     },
     "node_modules/@esbuild/linux-s390x": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.12.tgz",
-      "integrity": "sha512-+Pil1Nv3Umes4m3AZKqA2anfhJiVmNCYkPchwFJNEJN5QxmTs1uzyy4TvmDrCRNT2ApwSari7ZIgrPeUx4UZDg==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.20.2.tgz",
+      "integrity": "sha512-wcWISOobRWNm3cezm5HOZcYz1sKoHLd8VL1dl309DiixxVFoFe/o8HnwuIwn6sXre88Nwj+VwZUvJf4AFxkyrQ==",
       "cpu": [
         "s390x"
       ],
@@ -897,9 +897,9 @@
       }
     },
     "node_modules/@esbuild/linux-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.12.tgz",
-      "integrity": "sha512-B71g1QpxfwBvNrfyJdVDexenDIt1CiDN1TIXLbhOw0KhJzE78KIFGX6OJ9MrtC0oOqMWf+0xop4qEU8JrJTwCg==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.20.2.tgz",
+      "integrity": "sha512-1MdwI6OOTsfQfek8sLwgyjOXAu+wKhLEoaOLTjbijk6E2WONYpH9ZU2mNtR+lZ2B4uwr+usqGuVfFT9tMtGvGw==",
       "cpu": [
         "x64"
       ],
@@ -913,9 +913,9 @@
       }
     },
     "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.12.tgz",
-      "integrity": "sha512-3ltjQ7n1owJgFbuC61Oj++XhtzmymoCihNFgT84UAmJnxJfm4sYCiSLTXZtE00VWYpPMYc+ZQmB6xbSdVh0JWA==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.20.2.tgz",
+      "integrity": "sha512-K8/DhBxcVQkzYc43yJXDSyjlFeHQJBiowJ0uVL6Tor3jGQfSGHNNJcWxNbOI8v5k82prYqzPuwkzHt3J1T1iZQ==",
       "cpu": [
         "x64"
       ],
@@ -929,9 +929,9 @@
       }
     },
     "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.12.tgz",
-      "integrity": "sha512-RbrfTB9SWsr0kWmb9srfF+L933uMDdu9BIzdA7os2t0TXhCRjrQyCeOt6wVxr79CKD4c+p+YhCj31HBkYcXebw==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.20.2.tgz",
+      "integrity": "sha512-eMpKlV0SThJmmJgiVyN9jTPJ2VBPquf6Kt/nAoo6DgHAoN57K15ZghiHaMvqjCye/uU4X5u3YSMgVBI1h3vKrQ==",
       "cpu": [
         "x64"
       ],
@@ -945,9 +945,9 @@
       }
     },
     "node_modules/@esbuild/sunos-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.12.tgz",
-      "integrity": "sha512-HKjJwRrW8uWtCQnQOz9qcU3mUZhTUQvi56Q8DPTLLB+DawoiQdjsYq+j+D3s9I8VFtDr+F9CjgXKKC4ss89IeA==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.20.2.tgz",
+      "integrity": "sha512-2UyFtRC6cXLyejf/YEld4Hajo7UHILetzE1vsRcGL3earZEW77JxrFjH4Ez2qaTiEfMgAXxfAZCm1fvM/G/o8w==",
       "cpu": [
         "x64"
       ],
@@ -961,9 +961,9 @@
       }
     },
     "node_modules/@esbuild/win32-arm64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.12.tgz",
-      "integrity": "sha512-URgtR1dJnmGvX864pn1B2YUYNzjmXkuJOIqG2HdU62MVS4EHpU2946OZoTMnRUHklGtJdJZ33QfzdjGACXhn1A==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.20.2.tgz",
+      "integrity": "sha512-GRibxoawM9ZCnDxnP3usoUDO9vUkpAxIIZ6GQI+IlVmr5kP3zUq+l17xELTHMWTWzjxa2guPNyrpq1GWmPvcGQ==",
       "cpu": [
         "arm64"
       ],
@@ -977,9 +977,9 @@
       }
     },
     "node_modules/@esbuild/win32-ia32": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.12.tgz",
-      "integrity": "sha512-+ZOE6pUkMOJfmxmBZElNOx72NKpIa/HFOMGzu8fqzQJ5kgf6aTGrcJaFsNiVMH4JKpMipyK+7k0n2UXN7a8YKQ==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.20.2.tgz",
+      "integrity": "sha512-HfLOfn9YWmkSKRQqovpnITazdtquEW8/SoHW7pWpuEeguaZI4QnCRW6b+oZTztdBnZOS2hqJ6im/D5cPzBTTlQ==",
       "cpu": [
         "ia32"
       ],
@@ -993,9 +993,9 @@
       }
     },
     "node_modules/@esbuild/win32-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.12.tgz",
-      "integrity": "sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.20.2.tgz",
+      "integrity": "sha512-N49X4lJX27+l9jbLKSqZ6bKNjzQvHaT8IIFUy+YIqmXQdjYCToGWwOItDrfby14c78aDd5NHQl29xingXfCdLQ==",
       "cpu": [
         "x64"
       ],
@@ -1588,9 +1588,9 @@
       }
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.12.0.tgz",
-      "integrity": "sha512-+ac02NL/2TCKRrJu2wffk1kZ+RyqxVUlbjSagNgPm94frxtr+XDL12E5Ll1enWskLrtrZ2r8L3wED1orIibV/w==",
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.14.1.tgz",
+      "integrity": "sha512-fH8/o8nSUek8ceQnT7K4EQbSiV7jgkHq81m9lWZFIXjJ7lJzpWXbQFpT/Zh6OZYnpFykvzC3fbEvEAFZu03dPA==",
       "cpu": [
         "arm"
       ],
@@ -1601,9 +1601,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.12.0.tgz",
-      "integrity": "sha512-OBqcX2BMe6nvjQ0Nyp7cC90cnumt8PXmO7Dp3gfAju/6YwG0Tj74z1vKrfRz7qAv23nBcYM8BCbhrsWqO7PzQQ==",
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.14.1.tgz",
+      "integrity": "sha512-Y/9OHLjzkunF+KGEoJr3heiD5X9OLa8sbT1lm0NYeKyaM3oMhhQFvPB0bNZYJwlq93j8Z6wSxh9+cyKQaxS7PQ==",
       "cpu": [
         "arm64"
       ],
@@ -1614,9 +1614,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.12.0.tgz",
-      "integrity": "sha512-X64tZd8dRE/QTrBIEs63kaOBG0b5GVEd3ccoLtyf6IdXtHdh8h+I56C2yC3PtC9Ucnv0CpNFJLqKFVgCYe0lOQ==",
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.14.1.tgz",
+      "integrity": "sha512-+kecg3FY84WadgcuSVm6llrABOdQAEbNdnpi5X3UwWiFVhZIZvKgGrF7kmLguvxHNQy+UuRV66cLVl3S+Rkt+Q==",
       "cpu": [
         "arm64"
       ],
@@ -1627,9 +1627,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.12.0.tgz",
-      "integrity": "sha512-cc71KUZoVbUJmGP2cOuiZ9HSOP14AzBAThn3OU+9LcA1+IUqswJyR1cAJj3Mg55HbjZP6OLAIscbQsQLrpgTOg==",
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.14.1.tgz",
+      "integrity": "sha512-2pYRzEjVqq2TB/UNv47BV/8vQiXkFGVmPFwJb+1E0IFFZbIX8/jo1olxqqMbo6xCXf8kabANhp5bzCij2tFLUA==",
       "cpu": [
         "x64"
       ],
@@ -1640,9 +1640,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.12.0.tgz",
-      "integrity": "sha512-a6w/Y3hyyO6GlpKL2xJ4IOh/7d+APaqLYdMf86xnczU3nurFTaVN9s9jOXQg97BE4nYm/7Ga51rjec5nfRdrvA==",
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.14.1.tgz",
+      "integrity": "sha512-mS6wQ6Do6/wmrF9aTFVpIJ3/IDXhg1EZcQFYHZLHqw6AzMBjTHWnCG35HxSqUNphh0EHqSM6wRTT8HsL1C0x5g==",
       "cpu": [
         "arm"
       ],
@@ -1653,9 +1653,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.12.0.tgz",
-      "integrity": "sha512-0fZBq27b+D7Ar5CQMofVN8sggOVhEtzFUwOwPppQt0k+VR+7UHMZZY4y+64WJ06XOhBTKXtQB/Sv0NwQMXyNAA==",
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.14.1.tgz",
+      "integrity": "sha512-p9rGKYkHdFMzhckOTFubfxgyIO1vw//7IIjBBRVzyZebWlzRLeNhqxuSaZ7kCEKVkm/kuC9fVRW9HkC/zNRG2w==",
       "cpu": [
         "arm64"
       ],
@@ -1666,9 +1666,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.12.0.tgz",
-      "integrity": "sha512-eTvzUS3hhhlgeAv6bfigekzWZjaEX9xP9HhxB0Dvrdbkk5w/b+1Sxct2ZuDxNJKzsRStSq1EaEkVSEe7A7ipgQ==",
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.14.1.tgz",
+      "integrity": "sha512-nDY6Yz5xS/Y4M2i9JLQd3Rofh5OR8Bn8qe3Mv/qCVpHFlwtZSBYSPaU4mrGazWkXrdQ98GB//H0BirGR/SKFSw==",
       "cpu": [
         "arm64"
       ],
@@ -1678,10 +1678,23 @@
         "linux"
       ]
     },
+    "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.14.1.tgz",
+      "integrity": "sha512-im7HE4VBL+aDswvcmfx88Mp1soqL9OBsdDBU8NqDEYtkri0qV0THhQsvZtZeNNlLeCUQ16PZyv7cqutjDF35qw==",
+      "cpu": [
+        "ppc64le"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.12.0.tgz",
-      "integrity": "sha512-ix+qAB9qmrCRiaO71VFfY8rkiAZJL8zQRXveS27HS+pKdjwUfEhqo2+YF2oI+H/22Xsiski+qqwIBxVewLK7sw==",
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.14.1.tgz",
+      "integrity": "sha512-RWdiHuAxWmzPJgaHJdpvUUlDz8sdQz4P2uv367T2JocdDa98iRw2UjIJ4QxSyt077mXZT2X6pKfT2iYtVEvOFw==",
       "cpu": [
         "riscv64"
       ],
@@ -1691,10 +1704,23 @@
         "linux"
       ]
     },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.14.1.tgz",
+      "integrity": "sha512-VMgaGQ5zRX6ZqV/fas65/sUGc9cPmsntq2FiGmayW9KMNfWVG/j0BAqImvU4KTeOOgYSf1F+k6at1UfNONuNjA==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.12.0.tgz",
-      "integrity": "sha512-TenQhZVOtw/3qKOPa7d+QgkeM6xY0LtwzR8OplmyL5LrgTWIXpTQg2Q2ycBf8jm+SFW2Wt/DTn1gf7nFp3ssVA==",
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.14.1.tgz",
+      "integrity": "sha512-9Q7DGjZN+hTdJomaQ3Iub4m6VPu1r94bmK2z3UeWP3dGUecRC54tmVu9vKHTm1bOt3ASoYtEz6JSRLFzrysKlA==",
       "cpu": [
         "x64"
       ],
@@ -1705,9 +1731,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.12.0.tgz",
-      "integrity": "sha512-LfFdRhNnW0zdMvdCb5FNuWlls2WbbSridJvxOvYWgSBOYZtgBfW9UGNJG//rwMqTX1xQE9BAodvMH9tAusKDUw==",
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.14.1.tgz",
+      "integrity": "sha512-JNEG/Ti55413SsreTguSx0LOVKX902OfXIKVg+TCXO6Gjans/k9O6ww9q3oLGjNDaTLxM+IHFMeXy/0RXL5R/g==",
       "cpu": [
         "x64"
       ],
@@ -1718,9 +1744,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.12.0.tgz",
-      "integrity": "sha512-JPDxovheWNp6d7AHCgsUlkuCKvtu3RB55iNEkaQcf0ttsDU/JZF+iQnYcQJSk/7PtT4mjjVG8N1kpwnI9SLYaw==",
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.14.1.tgz",
+      "integrity": "sha512-ryS22I9y0mumlLNwDFYZRDFLwWh3aKaC72CWjFcFvxK0U6v/mOkM5Up1bTbCRAhv3kEIwW2ajROegCIQViUCeA==",
       "cpu": [
         "arm64"
       ],
@@ -1731,9 +1757,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.12.0.tgz",
-      "integrity": "sha512-fjtuvMWRGJn1oZacG8IPnzIV6GF2/XG+h71FKn76OYFqySXInJtseAqdprVTDTyqPxQOG9Exak5/E9Z3+EJ8ZA==",
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.14.1.tgz",
+      "integrity": "sha512-TdloItiGk+T0mTxKx7Hp279xy30LspMso+GzQvV2maYePMAWdmrzqSNZhUpPj3CGw12aGj57I026PgLCTu8CGg==",
       "cpu": [
         "ia32"
       ],
@@ -1744,9 +1770,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.12.0.tgz",
-      "integrity": "sha512-ZYmr5mS2wd4Dew/JjT0Fqi2NPB/ZhZ2VvPp7SmvPZb4Y1CG/LRcS6tcRo2cYU7zLK5A7cdbhWnnWmUjoI4qapg==",
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.14.1.tgz",
+      "integrity": "sha512-wQGI+LY/Py20zdUPq+XCem7JcPOyzIJBm3dli+56DJsQOHbnXZFEwgmnC6el1TPAfC8lBT3m+z69RmLykNUbew==",
       "cpu": [
         "x64"
       ],
@@ -3136,9 +3162,9 @@
       }
     },
     "node_modules/esbuild": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.12.tgz",
-      "integrity": "sha512-aARqgq8roFBj054KvQr5f1sFu0D65G+miZRCuJyJ0G13Zwx7vRar5Zhn2tkQNzIXcBrNVsv/8stehpj+GAjgbg==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz",
+      "integrity": "sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==",
       "dev": true,
       "hasInstallScript": true,
       "bin": {
@@ -3148,29 +3174,29 @@
         "node": ">=12"
       },
       "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.19.12",
-        "@esbuild/android-arm": "0.19.12",
-        "@esbuild/android-arm64": "0.19.12",
-        "@esbuild/android-x64": "0.19.12",
-        "@esbuild/darwin-arm64": "0.19.12",
-        "@esbuild/darwin-x64": "0.19.12",
-        "@esbuild/freebsd-arm64": "0.19.12",
-        "@esbuild/freebsd-x64": "0.19.12",
-        "@esbuild/linux-arm": "0.19.12",
-        "@esbuild/linux-arm64": "0.19.12",
-        "@esbuild/linux-ia32": "0.19.12",
-        "@esbuild/linux-loong64": "0.19.12",
-        "@esbuild/linux-mips64el": "0.19.12",
-        "@esbuild/linux-ppc64": "0.19.12",
-        "@esbuild/linux-riscv64": "0.19.12",
-        "@esbuild/linux-s390x": "0.19.12",
-        "@esbuild/linux-x64": "0.19.12",
-        "@esbuild/netbsd-x64": "0.19.12",
-        "@esbuild/openbsd-x64": "0.19.12",
-        "@esbuild/sunos-x64": "0.19.12",
-        "@esbuild/win32-arm64": "0.19.12",
-        "@esbuild/win32-ia32": "0.19.12",
-        "@esbuild/win32-x64": "0.19.12"
+        "@esbuild/aix-ppc64": "0.20.2",
+        "@esbuild/android-arm": "0.20.2",
+        "@esbuild/android-arm64": "0.20.2",
+        "@esbuild/android-x64": "0.20.2",
+        "@esbuild/darwin-arm64": "0.20.2",
+        "@esbuild/darwin-x64": "0.20.2",
+        "@esbuild/freebsd-arm64": "0.20.2",
+        "@esbuild/freebsd-x64": "0.20.2",
+        "@esbuild/linux-arm": "0.20.2",
+        "@esbuild/linux-arm64": "0.20.2",
+        "@esbuild/linux-ia32": "0.20.2",
+        "@esbuild/linux-loong64": "0.20.2",
+        "@esbuild/linux-mips64el": "0.20.2",
+        "@esbuild/linux-ppc64": "0.20.2",
+        "@esbuild/linux-riscv64": "0.20.2",
+        "@esbuild/linux-s390x": "0.20.2",
+        "@esbuild/linux-x64": "0.20.2",
+        "@esbuild/netbsd-x64": "0.20.2",
+        "@esbuild/openbsd-x64": "0.20.2",
+        "@esbuild/sunos-x64": "0.20.2",
+        "@esbuild/win32-arm64": "0.20.2",
+        "@esbuild/win32-ia32": "0.20.2",
+        "@esbuild/win32-x64": "0.20.2"
       }
     },
     "node_modules/escalade": {
@@ -4105,7 +4131,6 @@
           "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
         }
       ],
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.23.2"
       }
@@ -5149,9 +5174,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.35",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.35.tgz",
-      "integrity": "sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==",
+      "version": "8.4.38",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+      "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
       "dev": true,
       "funding": [
         {
@@ -5170,7 +5195,7 @@
       "dependencies": {
         "nanoid": "^3.3.7",
         "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
+        "source-map-js": "^1.2.0"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
@@ -5491,9 +5516,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.12.0.tgz",
-      "integrity": "sha512-wz66wn4t1OHIJw3+XU7mJJQV/2NAfw5OAk6G6Hoo3zcvz/XOfQ52Vgi+AN4Uxoxi0KBBwk2g8zPrTDA4btSB/Q==",
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.14.1.tgz",
+      "integrity": "sha512-4LnHSdd3QK2pa1J6dFbfm1HN0D7vSK/ZuZTsdyUAlA6Rr1yTouUTL13HaDOGJVgby461AhrNGBS7sCGXXtT+SA==",
       "dev": true,
       "dependencies": {
         "@types/estree": "1.0.5"
@@ -5506,19 +5531,21 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.12.0",
-        "@rollup/rollup-android-arm64": "4.12.0",
-        "@rollup/rollup-darwin-arm64": "4.12.0",
-        "@rollup/rollup-darwin-x64": "4.12.0",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.12.0",
-        "@rollup/rollup-linux-arm64-gnu": "4.12.0",
-        "@rollup/rollup-linux-arm64-musl": "4.12.0",
-        "@rollup/rollup-linux-riscv64-gnu": "4.12.0",
-        "@rollup/rollup-linux-x64-gnu": "4.12.0",
-        "@rollup/rollup-linux-x64-musl": "4.12.0",
-        "@rollup/rollup-win32-arm64-msvc": "4.12.0",
-        "@rollup/rollup-win32-ia32-msvc": "4.12.0",
-        "@rollup/rollup-win32-x64-msvc": "4.12.0",
+        "@rollup/rollup-android-arm-eabi": "4.14.1",
+        "@rollup/rollup-android-arm64": "4.14.1",
+        "@rollup/rollup-darwin-arm64": "4.14.1",
+        "@rollup/rollup-darwin-x64": "4.14.1",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.14.1",
+        "@rollup/rollup-linux-arm64-gnu": "4.14.1",
+        "@rollup/rollup-linux-arm64-musl": "4.14.1",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.14.1",
+        "@rollup/rollup-linux-riscv64-gnu": "4.14.1",
+        "@rollup/rollup-linux-s390x-gnu": "4.14.1",
+        "@rollup/rollup-linux-x64-gnu": "4.14.1",
+        "@rollup/rollup-linux-x64-musl": "4.14.1",
+        "@rollup/rollup-win32-arm64-msvc": "4.14.1",
+        "@rollup/rollup-win32-ia32-msvc": "4.14.1",
+        "@rollup/rollup-win32-x64-msvc": "4.14.1",
         "fsevents": "~2.3.2"
       }
     },
@@ -5753,9 +5780,9 @@
       }
     },
     "node_modules/source-map-js": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -6198,14 +6225,14 @@
       }
     },
     "node_modules/vite": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.1.3.tgz",
-      "integrity": "sha512-UfmUD36DKkqhi/F75RrxvPpry+9+tTkrXfMNZD+SboZqBCMsxKtO52XeGzzuh7ioz+Eo/SYDBbdb0Z7vgcDJew==",
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.8.tgz",
+      "integrity": "sha512-OyZR+c1CE8yeHw5V5t59aXsUPPVTHMDjEZz8MgguLL/Q7NblxhZUlTu9xSPqlsUO/y+X7dlU05jdhvyycD55DA==",
       "dev": true,
       "dependencies": {
-        "esbuild": "^0.19.3",
-        "postcss": "^8.4.35",
-        "rollup": "^4.2.0"
+        "esbuild": "^0.20.1",
+        "postcss": "^8.4.38",
+        "rollup": "^4.13.0"
       },
       "bin": {
         "vite": "bin/vite.js"
diff --git a/frontend/public/error_pigeon.png b/frontend/public/img/error_pigeon.png
similarity index 100%
rename from frontend/public/error_pigeon.png
rename to frontend/public/img/error_pigeon.png
diff --git a/frontend/public/logo_ugent.png b/frontend/public/img/logo_ugent.png
similarity index 100%
rename from frontend/public/logo_ugent.png
rename to frontend/public/img/logo_ugent.png
diff --git a/frontend/public/locales/en/translation.json b/frontend/public/locales/en/translation.json
index 1447580c..050a63bc 100644
--- a/frontend/public/locales/en/translation.json
+++ b/frontend/public/locales/en/translation.json
@@ -3,5 +3,16 @@
     "myProjects": "My Projects",
     "myCourses": "My Courses",
     "login": "Login",
-    "home": "Home"
+    "home": "Home",
+
+    "error": {
+      "pageNotFound": "Page Not Found",
+      "pageNotFoundMessage": "The requested page was not found.",
+      "forbidden": "Forbidden",
+      "forbiddenMessage": "You don't have access to this resource.",
+      "clientError": "Client Error",
+      "clientErrorMessage": "A client error has occured.",
+      "serverError": "Server Error",
+      "serverErrorMessage": "A server error has occured."
+    }
   }
\ No newline at end of file
diff --git a/frontend/public/locales/nl/translation.json b/frontend/public/locales/nl/translation.json
index c852df96..b3e60447 100644
--- a/frontend/public/locales/nl/translation.json
+++ b/frontend/public/locales/nl/translation.json
@@ -3,5 +3,16 @@
     "myProjects": "Mijn Projecten",
     "myCourses": "Mijn Vakken",
     "login": "Login",
-    "home": "Home"
+    "home": "Home",
+
+    "error": {
+      "pageNotFound": "Pagina Niet Gevonden",
+      "pageNotFoundMessage": "De opgevraagde pagina werd niet gevonden.",
+      "forbidden": "Verboden",
+      "forbiddenMessage": "Je hebt geen toegang tot deze bron.",
+      "clientError": "Client Fout",
+      "clientErrorMessage": "Er is een client fout opgetreden.",
+      "serverError": "Server Fout",
+      "serverErrorMessage": "Er is een server fout opgetreden."
+    }
   }
\ No newline at end of file
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 1adaeeea..1f0073fe 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,21 +1,15 @@
-import { RouterProvider, createBrowserRouter } from "react-router-dom";
+import { RouterProvider, createBrowserRouter, createRoutesFromElements, Route } from "react-router-dom";
 import Home from "./pages/home/Home.tsx";
 import { Layout } from "./Layout.tsx";
 import { ErrorBoundary } from "./pages/error/ErrorBoundary.tsx";
 
-const router = createBrowserRouter([
-  {
-    path: "/",
-    Component: Layout ,
-    errorElement: <ErrorBoundary />,
-    children: [
-      {
-        index: true,
-        Component: Home
-      }
-    ]
-  }
-]);
+const router = createBrowserRouter(
+  createRoutesFromElements(
+    <Route path="/" element={<Layout />} errorElement={<ErrorBoundary />}>
+      <Route index element={<Home />} />
+    </Route>
+  )
+);
 
 /**
  * This component is the main application component that will be rendered by the ReactDOM. 
diff --git a/frontend/src/pages/error/ErrorBoundary.tsx b/frontend/src/pages/error/ErrorBoundary.tsx
index d2a3f0f3..23cf3e68 100644
--- a/frontend/src/pages/error/ErrorBoundary.tsx
+++ b/frontend/src/pages/error/ErrorBoundary.tsx
@@ -10,17 +10,19 @@ export function ErrorBoundary() {
   if (isRouteErrorResponse(error)) {
     if (error.status == 404) {
       return (
-        <ErrorPage statusCode={"404"} statusTitle={"Page Not Found"} message={"page_not_found_message"} />
+        <ErrorPage statusCode={"404"} statusTitle={"error.pageNotFound"} message={"error.pageNotFoundMessage"} />
       );
-    }
-    if (error.status == 403) {
+    } else if (error.status == 403) {
       return (
-        <ErrorPage statusCode={"403"} statusTitle={"Forbidden"} message={"forbidden_message"} />
+        <ErrorPage statusCode={"403"} statusTitle={"error.forbidden"} message={"error.forbiddenMessage"} />
       );
-    }
-    if (error.status >= 500 && error.status <= 599) {
+    } else if (error.status >= 400 && error.status <= 499) {
+      return (
+        <ErrorPage statusCode={error.statusText} statusTitle={"error.clientError"} message={"error.clientErrorMessage"} />
+      );
+    } else if (error.status >= 500 && error.status <= 599) {
       return (
-        <ErrorPage statusCode={error.statusText} statusTitle={"Server Error"} message={"server_error_message"} />
+        <ErrorPage statusCode={error.statusText} statusTitle={"error.serverError"} message={"error.serverErrorMessage"} />
       );
     }
   }
diff --git a/frontend/src/pages/error/ErrorPage.tsx b/frontend/src/pages/error/ErrorPage.tsx
index 19b27c9c..f9b1f706 100644
--- a/frontend/src/pages/error/ErrorPage.tsx
+++ b/frontend/src/pages/error/ErrorPage.tsx
@@ -1,5 +1,4 @@
 import { Grid, Typography } from "@mui/material";
-import { Image } from "mui-image"; 
 import { useTranslation } from "react-i18next";
 
 /**
@@ -11,7 +10,7 @@ import { useTranslation } from "react-i18next";
  */
 export function ErrorPage(
   { statusCode, statusTitle, message }: { statusCode: string, statusTitle: string, message: string }
-): JSX.Element {
+): React.JSX.Element {
 
   const { t } = useTranslation();
 
@@ -37,13 +36,13 @@ export function ErrorPage(
             </Typography>
           </Grid>
           <Grid item>
-            <Image src="/error_pigeon.png" height="20vh" alt="icon" />
+            <img src="/img/error_pigeon.png" height="150vh" alt="icon" />
           </Grid>
         </Grid>
       </Grid>
       <Grid item>
         <Typography variant="h3">
-          { statusTitle }
+          { t(statusTitle) }
         </Typography>
       </Grid>
       <Grid item>

From 8d5178c8072e913eb6279b84b7feeab675b1d064 Mon Sep 17 00:00:00 2001
From: matisse <matisse.sulzer@ugent.be>
Date: Sun, 14 Apr 2024 00:48:37 +0200
Subject: [PATCH 11/16] linting, package-lock.json fix

---
 frontend/package-lock.json | 14 +++++++++++---
 frontend/package.json      |  4 +++-
 frontend/src/App.tsx       | 10 +++++-----
 3 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 126dfde2..f166ffc8 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -32,6 +32,7 @@
         "@types/react": "^18.2.55",
         "@types/react-dom": "^18.2.19",
         "@types/react-router-dom": "^5.3.3",
+        "@types/scheduler": "^0.23.0",
         "@typescript-eslint/eslint-plugin": "^6.21.0",
         "@typescript-eslint/parser": "^6.21.0",
         "@vitejs/plugin-react": "^4.2.1",
@@ -45,6 +46,7 @@
         "i18next-browser-languagedetector": "^7.2.1",
         "i18next-http-backend": "^2.5.0",
         "react-i18next": "^14.1.0",
+        "scheduler": "^0.23.0",
         "typescript": "^5.2.2",
         "vite": "^5.1.7"
       }
@@ -1786,9 +1788,9 @@
       "integrity": "sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g=="
     },
     "node_modules/@types/node": {
-      "version": "20.12.6",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.6.tgz",
-      "integrity": "sha512-3KurE8taB8GCvZBPngVbp0lk5CKi8M9f9k1rsADh0Evdz5SzJ+Q+Hx9uHoFGsLnLnd1xmkDQr2hVhlA0Mn0lKQ==",
+      "version": "20.12.7",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.7.tgz",
+      "integrity": "sha512-wq0cICSkRLVaf3UGLMGItu/PtdY7oaXaI/RVU+xliKVOtRna3PRY57ZDfztpDL0n11vfymMUnXv8QwYCO7L1wg==",
       "dev": true,
       "optional": true,
       "dependencies": {
@@ -1852,6 +1854,12 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/scheduler": {
+      "version": "0.23.0",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.23.0.tgz",
+      "integrity": "sha512-YIoDCTH3Af6XM5VuwGG/QL/CJqga1Zm3NkU3HZ4ZHK2fRMPYP1VczsTUqtsf43PH/iJNVlPHAo2oWX7BSdB2Hw==",
+      "dev": true
+    },
     "node_modules/@types/semver": {
       "version": "7.5.8",
       "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.8.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index a7c1f0c0..049f5433 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -18,8 +18,8 @@
     "@mui/material": "^5.15.10",
     "@mui/styled-engine-sc": "^6.0.0-alpha.16",
     "@mui/x-data-grid": "^7.1.1",
-    "axios": "^1.6.8",
     "@mui/x-date-pickers": "^7.1.1",
+    "axios": "^1.6.8",
     "dayjs": "^1.11.10",
     "i18next-browser-languagedetector": "^7.2.0",
     "i18next-http-backend": "^2.5.0",
@@ -36,6 +36,7 @@
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
     "@types/react-router-dom": "^5.3.3",
+    "@types/scheduler": "^0.23.0",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
     "@vitejs/plugin-react": "^4.2.1",
@@ -49,6 +50,7 @@
     "i18next-browser-languagedetector": "^7.2.1",
     "i18next-http-backend": "^2.5.0",
     "react-i18next": "^14.1.0",
+    "scheduler": "^0.23.0",
     "typescript": "^5.2.2",
     "vite": "^5.1.7"
   }
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index dc2ead8f..3cd0aa14 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -9,12 +9,12 @@ const router = createBrowserRouter(
   createRoutesFromElements(
     <Route path="/" element={<Layout />} errorElement={<ErrorBoundary />}>
       <Route index element={<Home />} />
-        <Route path=":lang" element={<LanguagePath/>}>
-          <Route path="home" element={<Home />} />
-          <Route path="project" >
-            <Route path=":projectId" element={<ProjectView />}/>
-          </Route>
+      <Route path=":lang" element={<LanguagePath/>}>
+        <Route path="home" element={<Home />} />
+        <Route path="project" >
+          <Route path=":projectId" element={<ProjectView />}/>
         </Route>
+      </Route>
     </Route>
   )
 );

From 246cec7610a2d09bb7d69a0fba7573b0e75b21f6 Mon Sep 17 00:00:00 2001
From: matisse <matisse.sulzer@ugent.be>
Date: Sun, 14 Apr 2024 01:21:20 +0200
Subject: [PATCH 12/16] package file

---
 frontend/package-lock.json | 7 +++++++
 frontend/package.json      | 1 +
 2 files changed, 8 insertions(+)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index f166ffc8..42efac49 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -29,6 +29,7 @@
         "styled-components": "^6.1.8"
       },
       "devDependencies": {
+        "@types/history": "^4.7.11",
         "@types/react": "^18.2.55",
         "@types/react-dom": "^18.2.19",
         "@types/react-router-dom": "^5.3.3",
@@ -1768,6 +1769,12 @@
         "@types/unist": "*"
       }
     },
+    "node_modules/@types/history": {
+      "version": "4.7.11",
+      "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
+      "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==",
+      "dev": true
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 049f5433..21eb6c43 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -36,6 +36,7 @@
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
     "@types/react-router-dom": "^5.3.3",
+    "@types/history": "^4.7.11",
     "@types/scheduler": "^0.23.0",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",

From 8baecd86493b25c7b84931ba7e844ebdd807ee64 Mon Sep 17 00:00:00 2001
From: matisse <matisse.sulzer@ugent.be>
Date: Sun, 14 Apr 2024 18:19:46 +0200
Subject: [PATCH 13/16] changes to paramters in ErrorPage.tsx

---
 frontend/src/pages/error/ErrorBoundary.tsx | 11 +++++++----
 frontend/src/pages/error/ErrorPage.tsx     |  8 ++------
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/frontend/src/pages/error/ErrorBoundary.tsx b/frontend/src/pages/error/ErrorBoundary.tsx
index 23cf3e68..fc7affa1 100644
--- a/frontend/src/pages/error/ErrorBoundary.tsx
+++ b/frontend/src/pages/error/ErrorBoundary.tsx
@@ -1,5 +1,6 @@
 import { useRouteError, isRouteErrorResponse } from "react-router-dom";
 import { ErrorPage } from "./ErrorPage.tsx";
+import { useTranslation } from "react-i18next";
 
 /**
  * This component will render the ErrorPage component with the appropriate data when an error occurs.
@@ -7,22 +8,24 @@ import { ErrorPage } from "./ErrorPage.tsx";
  */
 export function ErrorBoundary() {
   const error = useRouteError();
+  const { t } = useTranslation();
+
   if (isRouteErrorResponse(error)) {
     if (error.status == 404) {
       return (
-        <ErrorPage statusCode={"404"} statusTitle={"error.pageNotFound"} message={"error.pageNotFoundMessage"} />
+        <ErrorPage statusCode={"404"} statusTitle={t("error.pageNotFound")} message={t("error.pageNotFoundMessage")} />
       );
     } else if (error.status == 403) {
       return (
-        <ErrorPage statusCode={"403"} statusTitle={"error.forbidden"} message={"error.forbiddenMessage"} />
+        <ErrorPage statusCode={"403"} statusTitle={t("error.forbidden")} message={t("error.forbiddenMessage")} />
       );
     } else if (error.status >= 400 && error.status <= 499) {
       return (
-        <ErrorPage statusCode={error.statusText} statusTitle={"error.clientError"} message={"error.clientErrorMessage"} />
+        <ErrorPage statusCode={error.statusText} statusTitle={t("error.clientError")} message={t("error.clientErrorMessage")} />
       );
     } else if (error.status >= 500 && error.status <= 599) {
       return (
-        <ErrorPage statusCode={error.statusText} statusTitle={"error.serverError"} message={"error.serverErrorMessage"} />
+        <ErrorPage statusCode={error.statusText} statusTitle={t("error.serverError")} message={t("error.serverErrorMessage")} />
       );
     }
   }
diff --git a/frontend/src/pages/error/ErrorPage.tsx b/frontend/src/pages/error/ErrorPage.tsx
index f9b1f706..edabd86e 100644
--- a/frontend/src/pages/error/ErrorPage.tsx
+++ b/frontend/src/pages/error/ErrorPage.tsx
@@ -1,5 +1,4 @@
 import { Grid, Typography } from "@mui/material";
-import { useTranslation } from "react-i18next";
 
 /**
  * This component will be rendered when an error occurs.
@@ -11,9 +10,6 @@ import { useTranslation } from "react-i18next";
 export function ErrorPage(
   { statusCode, statusTitle, message }: { statusCode: string, statusTitle: string, message: string }
 ): React.JSX.Element {
-
-  const { t } = useTranslation();
-
   return (
     <Grid
       container
@@ -42,12 +38,12 @@ export function ErrorPage(
       </Grid>
       <Grid item>
         <Typography variant="h3">
-          { t(statusTitle) }
+          { statusTitle }
         </Typography>
       </Grid>
       <Grid item>
         <Typography variant="body1">
-          { t(message) }
+          { message }
         </Typography>
       </Grid>
     </Grid>

From 04c19cbfbe099be973de2ef5cb59bce8cd9b4603 Mon Sep 17 00:00:00 2001
From: matisse <matisse.sulzer@ugent.be>
Date: Thu, 18 Apr 2024 14:39:34 +0200
Subject: [PATCH 14/16] use of keyPrefix

---
 frontend/src/pages/error/ErrorBoundary.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/frontend/src/pages/error/ErrorBoundary.tsx b/frontend/src/pages/error/ErrorBoundary.tsx
index fc7affa1..6cff1b75 100644
--- a/frontend/src/pages/error/ErrorBoundary.tsx
+++ b/frontend/src/pages/error/ErrorBoundary.tsx
@@ -9,23 +9,24 @@ import { useTranslation } from "react-i18next";
 export function ErrorBoundary() {
   const error = useRouteError();
   const { t } = useTranslation();
+  const keyPrefix = "error.";
 
   if (isRouteErrorResponse(error)) {
     if (error.status == 404) {
       return (
-        <ErrorPage statusCode={"404"} statusTitle={t("error.pageNotFound")} message={t("error.pageNotFoundMessage")} />
+        <ErrorPage statusCode={"404"} statusTitle={t(keyPrefix + "pageNotFound")} message={t(keyPrefix + "pageNotFoundMessage")} />
       );
     } else if (error.status == 403) {
       return (
-        <ErrorPage statusCode={"403"} statusTitle={t("error.forbidden")} message={t("error.forbiddenMessage")} />
+        <ErrorPage statusCode={"403"} statusTitle={t(keyPrefix + "forbidden")} message={t(keyPrefix + "forbiddenMessage")} />
       );
     } else if (error.status >= 400 && error.status <= 499) {
       return (
-        <ErrorPage statusCode={error.statusText} statusTitle={t("error.clientError")} message={t("error.clientErrorMessage")} />
+        <ErrorPage statusCode={error.statusText} statusTitle={t(keyPrefix + "clientError")} message={t(keyPrefix + "clientErrorMessage")} />
       );
     } else if (error.status >= 500 && error.status <= 599) {
       return (
-        <ErrorPage statusCode={error.statusText} statusTitle={t("error.serverError")} message={t("error.serverErrorMessage")} />
+        <ErrorPage statusCode={error.statusText} statusTitle={t(keyPrefix + "serverError")} message={t(keyPrefix + "serverErrorMessage")} />
       );
     }
   }

From 763457790946eaa0bbe00cf5ee417da327322757 Mon Sep 17 00:00:00 2001
From: matisse <matisse.sulzer@ugent.be>
Date: Thu, 18 Apr 2024 15:23:49 +0200
Subject: [PATCH 15/16] keyPrefix

---
 frontend/src/pages/error/ErrorBoundary.tsx | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/frontend/src/pages/error/ErrorBoundary.tsx b/frontend/src/pages/error/ErrorBoundary.tsx
index 6cff1b75..16b7ccb2 100644
--- a/frontend/src/pages/error/ErrorBoundary.tsx
+++ b/frontend/src/pages/error/ErrorBoundary.tsx
@@ -8,25 +8,24 @@ import { useTranslation } from "react-i18next";
  */
 export function ErrorBoundary() {
   const error = useRouteError();
-  const { t } = useTranslation();
-  const keyPrefix = "error.";
+  const { t } = useTranslation('translation', { keyPrefix: 'projectView' });
 
   if (isRouteErrorResponse(error)) {
     if (error.status == 404) {
       return (
-        <ErrorPage statusCode={"404"} statusTitle={t(keyPrefix + "pageNotFound")} message={t(keyPrefix + "pageNotFoundMessage")} />
+        <ErrorPage statusCode={"404"} statusTitle={t("pageNotFound")} message={t("pageNotFoundMessage")} />
       );
     } else if (error.status == 403) {
       return (
-        <ErrorPage statusCode={"403"} statusTitle={t(keyPrefix + "forbidden")} message={t(keyPrefix + "forbiddenMessage")} />
+        <ErrorPage statusCode={"403"} statusTitle={t("forbidden")} message={t("forbiddenMessage")} />
       );
     } else if (error.status >= 400 && error.status <= 499) {
       return (
-        <ErrorPage statusCode={error.statusText} statusTitle={t(keyPrefix + "clientError")} message={t(keyPrefix + "clientErrorMessage")} />
+        <ErrorPage statusCode={error.statusText} statusTitle={t("clientError")} message={t("clientErrorMessage")} />
       );
     } else if (error.status >= 500 && error.status <= 599) {
       return (
-        <ErrorPage statusCode={error.statusText} statusTitle={t(keyPrefix + "serverError")} message={t(keyPrefix + "serverErrorMessage")} />
+        <ErrorPage statusCode={error.statusText} statusTitle={t("serverError")} message={t("serverErrorMessage")} />
       );
     }
   }

From 3cc825722d555d286e21d96afdf4362bd2d56716 Mon Sep 17 00:00:00 2001
From: matisse <matisse.sulzer@ugent.be>
Date: Thu, 18 Apr 2024 15:30:09 +0200
Subject: [PATCH 16/16] fix

---
 frontend/src/pages/error/ErrorBoundary.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/error/ErrorBoundary.tsx b/frontend/src/pages/error/ErrorBoundary.tsx
index 16b7ccb2..d6d48ca9 100644
--- a/frontend/src/pages/error/ErrorBoundary.tsx
+++ b/frontend/src/pages/error/ErrorBoundary.tsx
@@ -8,7 +8,7 @@ import { useTranslation } from "react-i18next";
  */
 export function ErrorBoundary() {
   const error = useRouteError();
-  const { t } = useTranslation('translation', { keyPrefix: 'projectView' });
+  const { t } = useTranslation('translation', { keyPrefix: 'error' });
 
   if (isRouteErrorResponse(error)) {
     if (error.status == 404) {