From f9a47d4941627dbb2ea3d53dfb91b486bb2551f6 Mon Sep 17 00:00:00 2001
From: EwoutV <ewoutverlinde@hotmail.com>
Date: Tue, 2 Apr 2024 23:19:17 +0200
Subject: [PATCH 1/6] chore: dashboard & project cleanup

---
 frontend/.eslintrc.cjs                        |   6 +-
 frontend/.prettierrc                          |  12 +-
 .../src/assets/scss/theme/_variables.scss     |  10 +-
 .../base/components/input/_dropdown.scss      |  10 +-
 frontend/src/assets/scss/theme/theme.scss     |   2 +-
 frontend/src/components/Dummy.vue             |   2 +-
 frontend/src/components/LanguageSelector.vue  |  41 +-
 frontend/src/components/RoleSelector.vue      |  30 +-
 frontend/src/components/YearSelector.vue      |  34 ++
 .../src/components/courses/CourseCard.vue     |  36 +-
 .../src/components/courses/CourseList.vue     |  36 ++
 frontend/src/components/layout/BaseLayout.vue |   6 +-
 frontend/src/components/layout/Footer.vue     |  16 +-
 frontend/src/components/layout/Header.vue     |  76 +--
 frontend/src/components/layout/Title.vue      |   4 +-
 .../src/components/projects/GroupCard.vue     |  32 +-
 .../src/components/projects/ProjectCard.vue   |  66 ++-
 .../src/components/projects/ProjectList.vue   |  62 +++
 frontend/src/composables/axios.ts             |  18 +-
 frontend/src/composables/configuration.ts     |  16 +-
 frontend/src/composables/i18n.ts              |  16 +-
 .../composables/services/admins.service.ts    |  53 +-
 .../composables/services/assistant.service.ts | 131 +++--
 .../composables/services/courses.service.ts   |  96 ++--
 .../composables/services/faculties.service.ts |  54 +-
 .../composables/services/groups.service.ts    |  73 ++-
 frontend/src/composables/services/helpers.ts  | 132 ++---
 .../composables/services/project.service.ts   | 138 ++----
 .../services/structure_check.service.ts       |  83 +---
 .../composables/services/students.service.ts  | 172 +++----
 .../services/submission.service.ts            |  76 ++-
 .../services/submissionStatus.service.ts      |  32 --
 .../services/submission_status.service.ts     |  23 +
 .../composables/services/teachers.service.ts  | 125 +++--
 frontend/src/config/endpoints.ts              |  28 +-
 frontend/src/config/environment.ts            |   2 +-
 frontend/src/main.ts                          |  32 +-
 .../src/router/guards/authentication.guard.ts |  22 +-
 frontend/src/router/guards/logout.guard.ts    |  17 +-
 frontend/src/router/router.ts                 |  90 ++--
 frontend/src/store/authentication.store.ts    | 130 +++--
 frontend/src/store/messages.store.ts          |  16 +-
 frontend/src/test/e2e/login.cy.ts             |  16 +-
 frontend/src/test/unit/admin_service.test.ts  |  92 ++--
 .../src/test/unit/assistant_service.test.ts   | 146 +++---
 frontend/src/test/unit/course_service.test.ts | 234 ++++-----
 .../src/test/unit/faculty_service.test.ts     |  36 +-
 frontend/src/test/unit/group_service.test.ts  |  82 +--
 .../src/test/unit/project_service.test.ts     | 220 ++++-----
 frontend/src/test/unit/setup.ts               | 467 +++++++-----------
 .../src/test/unit/structure_check.test.ts     |  76 +--
 .../src/test/unit/student_service.test.ts     | 290 +++++------
 .../src/test/unit/submission_service.test.ts  |  96 ++--
 .../unit/submission_status_service.test.ts    |  20 +-
 .../src/test/unit/teacher_service.test.ts     | 146 +++---
 frontend/src/types/Course.ts                  |  20 +-
 frontend/src/types/Faculty.ts                 |   2 +-
 frontend/src/types/Group.ts                   |  18 +-
 frontend/src/types/Projects.ts                |  16 +-
 frontend/src/types/Response.ts                |   2 +-
 frontend/src/types/StructureCheck.ts          |   8 +-
 frontend/src/types/SubmisionStatus.ts         |   6 +-
 frontend/src/types/Submission.ts              |   8 +-
 frontend/src/types/{ => users}/Assistant.ts   |  31 +-
 frontend/src/types/users/Generics.ts          |   5 +
 frontend/src/types/{ => users}/Student.ts     |  29 +-
 frontend/src/types/{ => users}/Teacher.ts     |  29 +-
 frontend/src/types/{ => users}/User.ts        |  27 +-
 frontend/src/views/App.vue                    |  29 +-
 .../src/views/authentication/LoginView.vue    |  34 +-
 .../src/views/authentication/VerifyView.vue   |  22 +-
 frontend/src/views/calendar/CalendarView.vue  |  93 ++--
 frontend/src/views/courses/CourseView.vue     |  20 +-
 .../src/views/courses/CreateCourseView.vue    |  86 ++--
 .../src/views/dashboard/DashboardView.vue     | 260 ++++------
 frontend/src/views/projects/ProjectView.vue   |  76 +--
 frontend/src/vite-env.d.ts                    |   2 +-
 frontend/tsconfig.json                        |  67 ++-
 78 files changed, 2150 insertions(+), 2717 deletions(-)
 create mode 100644 frontend/src/components/YearSelector.vue
 create mode 100644 frontend/src/components/courses/CourseList.vue
 create mode 100644 frontend/src/components/projects/ProjectList.vue
 delete mode 100644 frontend/src/composables/services/submissionStatus.service.ts
 create mode 100644 frontend/src/composables/services/submission_status.service.ts
 rename frontend/src/types/{ => users}/Assistant.ts (65%)
 create mode 100644 frontend/src/types/users/Generics.ts
 rename frontend/src/types/{ => users}/Student.ts (69%)
 rename frontend/src/types/{ => users}/Teacher.ts (69%)
 rename frontend/src/types/{ => users}/User.ts (75%)

diff --git a/frontend/.eslintrc.cjs b/frontend/.eslintrc.cjs
index 8e1d2914..e177d614 100644
--- a/frontend/.eslintrc.cjs
+++ b/frontend/.eslintrc.cjs
@@ -37,7 +37,9 @@ module.exports = {
         "vue/multi-word-component-names": "off",  // Disable rule that requires multi-word component names in Vue files
         "@typescript-eslint/no-floating-promises": "off", // Disable rule that flags floating promises in .ts files
         "@typescript-eslint/no-extraneous-class": "off", // Disable rule that flags usage of unnecessary classes in the codebase
-        "@typescript-eslint/unbound-method": "off", // Disable rule that refuses unboud methods that could scope `this`
-        "prettier/prettier": "error"
+        "@typescript-eslint/unbound-method": "off", // Disable rule that refuses unbound methods that could scope `this`
+        "prettier/prettier": "error",
+        "function-paren-newline": "off",
+        "function-call-argument-newline": "off"
     }
 }
diff --git a/frontend/.prettierrc b/frontend/.prettierrc
index a05a2b1e..62d1b562 100644
--- a/frontend/.prettierrc
+++ b/frontend/.prettierrc
@@ -1,7 +1,11 @@
 {
 	"tabWidth": 4,
-	"semi": false,
-	"trailingComma": "none",
-	"bracketSpacing": true,
-	"singleQuote": true
+	"printWidth": 140,
+	"max_line_length": 140,
+	"semi": true,
+	"singleQuote": true,
+	"arrowParens": "always",
+	"wrapParens": "avoid",
+	"jsxBracketSameLine": true,
+	"bracketSameLine": true
 }
\ No newline at end of file
diff --git a/frontend/src/assets/scss/theme/_variables.scss b/frontend/src/assets/scss/theme/_variables.scss
index 3664f1bd..72fa60b3 100644
--- a/frontend/src/assets/scss/theme/_variables.scss
+++ b/frontend/src/assets/scss/theme/_variables.scss
@@ -95,10 +95,10 @@ $inputListPadding:0 0 !default;
 $inputListItemPadding:.75rem 1.25rem !default;
 $inputListItemBg:transparent !default;
 $inputListItemTextColor:$shade700 !default;
-$inputListItemHoverBg:$shade200 !default;
-$inputListItemTextHoverColor:$shade700 !default;
+$inputListItemHoverBg:$highlightBg !default;
+$inputListItemTextHoverColor:$primaryColor !default;
 $inputListItemFocusBg:$shade300 !default;
-$inputListItemTextFocusColor:$shade700 !default;
+$inputListItemTextFocusColor: red !default;
 $inputListItemBorder:0 none !default;
 $inputListItemBorderRadius:0 !default;
 $inputListItemMargin:0 !default;
@@ -112,8 +112,8 @@ $inputListHeaderBorder:1px solid $shade300 !default;
 //inputs with overlays (e.g. autocomplete, dropdown, multiselect)
 $inputOverlayBg:$inputListBg !default;
 $inputOverlayHeaderBg:$inputListHeaderBg !default;
-$inputOverlayBorder:0 none !default;
-$inputOverlayShadow:0 2px 12px 0 rgba(0,0,0,.1) !default;
+$inputOverlayBorder: 1px solid $highlightBg !default;
+$inputOverlayShadow: none !default;
 
 //password
 $passwordMeterBg:$shade300 !default;
diff --git a/frontend/src/assets/scss/theme/base/components/input/_dropdown.scss b/frontend/src/assets/scss/theme/base/components/input/_dropdown.scss
index d41348dc..8b5f11c4 100644
--- a/frontend/src/assets/scss/theme/base/components/input/_dropdown.scss
+++ b/frontend/src/assets/scss/theme/base/components/input/_dropdown.scss
@@ -169,7 +169,7 @@ input.p-dropdown-label {
     background: $inputOverlayBg;
     color: $inputListTextColor;
     border: $inputOverlayBorder;
-    border-radius: $borderRadius;
+    border-radius:0;
     box-shadow: $inputOverlayShadow;
 
     .p-dropdown-header {
@@ -206,14 +206,14 @@ input.p-dropdown-label {
 
             &:first-child {
                 margin-top: 0;
-                border-top-left-radius: $borderRadius;
-                border-top-right-radius: $borderRadius;
+                border-top-left-radius:0;
+                border-top-right-radius:0;
             }
 
             &:last-child {
                 margin-bottom: 0;
-                border-bottom-left-radius: $borderRadius;
-                border-bottom-right-radius: $borderRadius;
+                border-bottom-left-radius:0;
+                border-bottom-right-radius:0;
             }
 
             &.p-highlight {
diff --git a/frontend/src/assets/scss/theme/theme.scss b/frontend/src/assets/scss/theme/theme.scss
index 6c7bdf8d..c8359a42 100644
--- a/frontend/src/assets/scss/theme/theme.scss
+++ b/frontend/src/assets/scss/theme/theme.scss
@@ -12,7 +12,7 @@ $secondaryTextColor: #000000 !default;
 
 $highlightBg: $primaryLightColor !default;
 $highlightTextColor: $primaryDarkerColor !default;
-$highlightFocusBg: rgba($primaryColor, .24) !default;
+$highlightFocusBg: rgba($primaryColor, .1) !default;
 
 @import 'variables';
 @import 'extensions';
diff --git a/frontend/src/components/Dummy.vue b/frontend/src/components/Dummy.vue
index 56b87abc..514b58f4 100644
--- a/frontend/src/components/Dummy.vue
+++ b/frontend/src/components/Dummy.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useRoute } from 'vue-router'
+import { useRoute } from 'vue-router';
 </script>
 
 <template>
diff --git a/frontend/src/components/LanguageSelector.vue b/frontend/src/components/LanguageSelector.vue
index 671fdb06..4bb89a5f 100644
--- a/frontend/src/components/LanguageSelector.vue
+++ b/frontend/src/components/LanguageSelector.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import nl from '@/assets/img/flags/nl-flag.svg'
-import en from '@/assets/img/flags/en-flag.svg'
-import Dropdown from 'primevue/dropdown'
-import { useI18n } from 'vue-i18n'
-import { onMounted } from 'vue'
-import { useLocalStorage } from '@vueuse/core'
-import { type PrimeVueLocaleOptions, usePrimeVue } from 'primevue/config'
+import nl from '@/assets/img/flags/nl-flag.svg';
+import en from '@/assets/img/flags/en-flag.svg';
+import Dropdown from 'primevue/dropdown';
+import { useI18n } from 'vue-i18n';
+import { onMounted } from 'vue';
+import { useLocalStorage } from '@vueuse/core';
+import { type PrimeVueLocaleOptions, usePrimeVue } from 'primevue/config';
 
 /* Composables */
-const { locale, availableLocales, t, messages } = useI18n()
-const { config } = usePrimeVue()
-const localeStorage = useLocalStorage('locale', locale.value)
+const { locale, availableLocales, t, messages } = useI18n();
+const { config } = usePrimeVue();
+const localeStorage = useLocalStorage('locale', locale.value);
 
 /**
  * Update the locale settings when the locale changes.
@@ -19,9 +19,9 @@ const localeStorage = useLocalStorage('locale', locale.value)
  */
 function updateLocale(locale: string): void {
     // Update saved locale
-    localeStorage.value = locale
+    localeStorage.value = locale;
     // Update PrimeVue locale
-    config.locale = messages.value[locale].primevue as PrimeVueLocaleOptions
+    config.locale = messages.value[locale].primevue as PrimeVueLocaleOptions;
 }
 
 /**
@@ -31,16 +31,16 @@ function updateLocale(locale: string): void {
  */
 function getFlag(locale: string): string {
     if (locale === 'nl') {
-        return nl
+        return nl;
     }
 
-    return en
+    return en;
 }
 
 /* Hooks */
 onMounted(() => {
-    updateLocale(locale.value)
-})
+    updateLocale(locale.value);
+});
 </script>
 
 <template>
@@ -50,15 +50,10 @@ onMounted(() => {
         class="w-auto"
         :options="availableLocales"
         @change="updateLocale($event.value)"
-        variant="outlined"
-    >
+        variant="outlined">
         <template #option="{ option }">
             <div class="flex align-items-center">
-                <img
-                    :alt="t('layout.header.language.' + option)"
-                    :src="getFlag(option)"
-                    class="h-1rem mr-2"
-                />
+                <img :alt="t('layout.header.language.' + option)" :src="getFlag(option)" class="h-1rem mr-2" />
                 <span>{{ t('layout.header.language.' + option) }}</span>
             </div>
         </template>
diff --git a/frontend/src/components/RoleSelector.vue b/frontend/src/components/RoleSelector.vue
index cff9282a..bc2bea57 100644
--- a/frontend/src/components/RoleSelector.vue
+++ b/frontend/src/components/RoleSelector.vue
@@ -1,37 +1,25 @@
 <script setup lang="ts">
-import Dropdown from 'primevue/dropdown'
-import { storeToRefs } from 'pinia'
-import { useAuthStore } from '@/store/authentication.store.ts'
-import { useI18n } from 'vue-i18n'
+import Dropdown from 'primevue/dropdown';
+import { storeToRefs } from 'pinia';
+import { useAuthStore } from '@/store/authentication.store.ts';
+import { useI18n } from 'vue-i18n';
 
-const { t } = useI18n()
-const { view, user } = storeToRefs(useAuthStore())
+const { t } = useI18n();
+const { view, user } = storeToRefs(useAuthStore());
 </script>
 
 <template>
     <template v-if="user !== null">
-        <Dropdown
-            id="view"
-            v-model="view"
-            class="w-auto"
-            :options="user.roles"
-            variant="outlined"
-        >
+        <Dropdown id="view" v-model="view" class="w-auto" :options="user.roles" variant="outlined">
             <template #option="{ option }">
                 <div class="flex align-items-center">
                     <div>
-                        {{
-                            t('layout.header.view', [
-                                t('types.roles.' + option).toLowerCase()
-                            ])
-                        }}
+                        {{ t('layout.header.view', [t('types.roles.' + option).toLowerCase()]) }}
                     </div>
                 </div>
             </template>
             <template #value="{ value }">
-                <div
-                    class="h-full flex justify-content-center align-items-center"
-                >
+                <div class="h-full flex justify-content-center align-items-center">
                     <div class="text-sm">{{ t('types.roles.' + value) }}</div>
                 </div>
             </template>
diff --git a/frontend/src/components/YearSelector.vue b/frontend/src/components/YearSelector.vue
new file mode 100644
index 00000000..dd878234
--- /dev/null
+++ b/frontend/src/components/YearSelector.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import Dropdown from 'primevue/dropdown';
+import { useI18n } from 'vue-i18n';
+
+/* Composable injections */
+const { t } = useI18n();
+
+/* Props */
+defineProps<{ years: string[] }>();
+
+/* Models */
+const year = defineModel();
+</script>
+
+<template>
+    <Dropdown v-model="year" :options="years" optionLabel="label" optionValue="value" class="custom-dropdown">
+        <template #value="{ value }">
+            <span class="text-primary font-semibold">{{ t('components.buttons.academic_year') }} {{ value }} - {{ value + 1 }}</span>
+        </template>
+        <template #option="{ option }">
+            <span class="pi pi-calendar mr-2" />
+            <span>{{ t('components.buttons.academic_year') }} {{ (option as any).label }}</span>
+        </template>
+        <template #dropdownicon>
+            <i class="pi pi-chevron-down pr-1 text-primary"></i>
+        </template>
+    </Dropdown>
+</template>
+
+<style scoped lang="scss">
+.custom-dropdown {
+    border-radius: 0;
+}
+</style>
diff --git a/frontend/src/components/courses/CourseCard.vue b/frontend/src/components/courses/CourseCard.vue
index 530103fb..b3b3a38b 100644
--- a/frontend/src/components/courses/CourseCard.vue
+++ b/frontend/src/components/courses/CourseCard.vue
@@ -1,24 +1,24 @@
 <script setup lang="ts">
-import Card from 'primevue/card'
-import Button from 'primevue/button'
-import { type Course } from '@/types/Course.ts'
-import { PrimeIcons } from 'primevue/api'
-import { useI18n } from 'vue-i18n'
+import Card from 'primevue/card';
+import Button from 'primevue/button';
+import { type Course } from '@/types/Course.ts';
+import { PrimeIcons } from 'primevue/api';
+import { useI18n } from 'vue-i18n';
 
 /* Component props */
 defineProps<{
-    course: Course
-}>()
+    course: Course;
+}>();
 
 /* Composable injections */
-const { t } = useI18n()
+const { t } = useI18n();
 
 /* Default image thumbnails */
 const images = Object.keys(
     import.meta.glob('@/assets/img/placeholders/*', {
-        eager: true
-    })
-)
+        eager: true,
+    }),
+);
 </script>
 
 <template>
@@ -28,8 +28,7 @@ const images = Object.keys(
                 class="w-full h-12rem border-round-top"
                 style="object-fit: cover; margin-bottom: -4px"
                 :alt="course.description"
-                :src="images[course.name.length % images.length]"
-            />
+                :src="images[course.name.length % images.length]" />
         </template>
         <template #title>
             <h2 class="text-primary m-0 text-2xl">{{ course.name }}</h2>
@@ -41,15 +40,8 @@ const images = Object.keys(
             {{ course.description }}
         </template>
         <template #footer>
-            <RouterLink
-                :to="{ name: 'course', params: { courseId: course.id } }"
-            >
-                <Button
-                    :icon="PrimeIcons.ARROW_RIGHT"
-                    :label="t('components.card.open')"
-                    icon-pos="right"
-                    outlined
-                />
+            <RouterLink :to="{ name: 'course', params: { courseId: course.id } }">
+                <Button :icon="PrimeIcons.ARROW_RIGHT" :label="t('components.card.open')" icon-pos="right" outlined />
             </RouterLink>
         </template>
     </Card>
diff --git a/frontend/src/components/courses/CourseList.vue b/frontend/src/components/courses/CourseList.vue
new file mode 100644
index 00000000..6ef22e88
--- /dev/null
+++ b/frontend/src/components/courses/CourseList.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { type Course } from '@/types/Course.ts';
+import CourseCard from '@/components/courses/CourseCard.vue';
+import Skeleton from 'primevue/skeleton';
+import { useI18n } from 'vue-i18n';
+
+/* Props */
+defineProps<{ courses: Course[] | null }>();
+
+/* Composable injections */
+const { t } = useI18n();
+</script>
+
+<template>
+    <div class="grid align-items-stretch">
+        <template v-if="courses !== null">
+            <template v-if="courses.length > 0">
+                <div class="col-12 md:col-6 lg:col-4 xl:col-3" v-for="course in courses" :key="course.id">
+                    <CourseCard class="h-100" :course="course" />
+                </div>
+            </template>
+            <template v-else>
+                <div class="col-12">
+                    <p>{{ t('views.dashboard.no_courses') }}</p>
+                </div>
+            </template>
+        </template>
+        <template v-else>
+            <div class="col-12 md:col-6 lg:col-4 xl:col-3" v-for="index in 4" :key="index">
+                <Skeleton height="25rem" style="visibility: hidden" />
+            </div>
+        </template>
+    </div>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/frontend/src/components/layout/BaseLayout.vue b/frontend/src/components/layout/BaseLayout.vue
index 72e2ae37..deac8a68 100644
--- a/frontend/src/components/layout/BaseLayout.vue
+++ b/frontend/src/components/layout/BaseLayout.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import Header from '@/components/layout/Header.vue'
-import Body from '@/components/layout/Body.vue'
-import Footer from '@/components/layout/Footer.vue'
+import Header from '@/components/layout/Header.vue';
+import Body from '@/components/layout/Body.vue';
+import Footer from '@/components/layout/Footer.vue';
 </script>
 
 <template>
diff --git a/frontend/src/components/layout/Footer.vue b/frontend/src/components/layout/Footer.vue
index 3c6af99b..3ac8e1bc 100644
--- a/frontend/src/components/layout/Footer.vue
+++ b/frontend/src/components/layout/Footer.vue
@@ -1,23 +1,19 @@
 <script setup lang="ts">
-import en from '@/assets/img/logo-white-en.png'
-import nl from '@/assets/img/logo-white-nl.png'
-import { useI18n } from 'vue-i18n'
+import en from '@/assets/img/logo-white-en.png';
+import nl from '@/assets/img/logo-white-nl.png';
+import { useI18n } from 'vue-i18n';
 
 /* Translation composable */
-const { t, locale } = useI18n()
+const { t, locale } = useI18n();
 
 /* Available localized images */
-const logo: Record<string, string> = { nl, en }
+const logo: Record<string, string> = { nl, en };
 </script>
 
 <template>
     <div id="footer" class="p-4 py-3">
         <div class="w-full lg:w-2 flex align-items-center py-3">
-            <img
-                class="w-full max-w-9rem"
-                :src="logo[locale]"
-                :alt="t('layout.header.logo')"
-            />
+            <img class="w-full max-w-9rem" :src="logo[locale]" :alt="t('layout.header.logo')" />
         </div>
     </div>
 </template>
diff --git a/frontend/src/components/layout/Header.vue b/frontend/src/components/layout/Header.vue
index d94080a8..738b8c6a 100644
--- a/frontend/src/components/layout/Header.vue
+++ b/frontend/src/components/layout/Header.vue
@@ -1,91 +1,73 @@
 <script setup lang="ts">
-import en from '@/assets/img/logo-en.png'
-import nl from '@/assets/img/logo-nl.png'
-import Button from 'primevue/button'
-import LanguageSelector from '@/components/LanguageSelector.vue'
-import { useI18n } from 'vue-i18n'
-import { computed } from 'vue'
-import { useAuthStore } from '@/store/authentication.store.ts'
-import { storeToRefs } from 'pinia'
-import RoleSelector from '@/components/RoleSelector.vue'
+import en from '@/assets/img/logo-en.png';
+import nl from '@/assets/img/logo-nl.png';
+import Button from 'primevue/button';
+import LanguageSelector from '@/components/LanguageSelector.vue';
+import { useI18n } from 'vue-i18n';
+import { computed } from 'vue';
+import { useAuthStore } from '@/store/authentication.store.ts';
+import { storeToRefs } from 'pinia';
+import RoleSelector from '@/components/RoleSelector.vue';
 
 /* Composables */
-const { user, isAuthenticated } = storeToRefs(useAuthStore())
-const { t, locale } = useI18n()
+const { user, isAuthenticated } = storeToRefs(useAuthStore());
+const { t, locale } = useI18n();
 
 /* Localization variables */
 const logo = computed(() => {
     if (locale.value === 'nl') {
-        return nl
+        return nl;
     }
 
-    return en
-})
+    return en;
+});
 
 /* Navigation items */
 const items = computed(() => [
     {
         icon: 'home',
         label: t('layout.header.navigation.dashboard'),
-        route: 'dashboard'
+        route: 'dashboard',
     },
     {
         icon: 'calendar',
         label: t('layout.header.navigation.calendar'),
-        route: 'calendar'
+        route: 'calendar',
     },
     {
         icon: 'book',
         label: t('layout.header.navigation.courses'),
-        route: 'courses'
-    }
-])
+        route: 'courses',
+    },
+]);
 </script>
 
 <template>
     <div class="flex w-full">
         <div class="w-full lg:w-2 flex align-items-center p-3 lg:pl-0">
-            <img
-                class="w-full max-w-9rem"
-                :src="logo"
-                :alt="t('layout.header.logo')"
-            />
+            <img class="w-full max-w-9rem" :src="logo" :alt="t('layout.header.logo')" />
         </div>
         <div class="flex flex-column w-full lg:w-10">
             <div id="header" class="w-full flex text-white p-4">
                 <div class="flex align-items-end">
                     <h1 class="text-white m-0">Ypovoli</h1>
                 </div>
-                <div
-                    class="text-right ml-auto text-sm flex flex-column align-items-end gap-3"
-                >
+                <div class="text-right ml-auto text-sm flex flex-column align-items-end gap-3">
                     <div class="flex align-items-center gap-3">
                         <!-- Role selector -->
-                        <RoleSelector
-                            v-if="user !== null && user.roles.length > 1"
-                        />
+                        <RoleSelector v-if="user !== null && user.roles.length > 1" />
                         <!-- Language selector -->
                         <LanguageSelector />
                     </div>
                     <div>
                         <!-- User information -->
                         <template v-if="isAuthenticated && user">
-                            <RouterLink
-                                :to="{ name: 'logout' }"
-                                class="text-white"
-                            >
-                                Ingelogd als {{ user.getFullName() }}
-                            </RouterLink>
+                            <RouterLink :to="{ name: 'logout' }" class="text-white"> Ingelogd als {{ user.getFullName() }} </RouterLink>
                         </template>
                         <!-- Login button -->
                         <template v-else>
                             <RouterLink :to="{ name: 'login' }">
-                                <Button
-                                    icon="pi pi-unlock"
-                                    :label="t('layout.header.login')"
-                                    severity="secondary"
-                                    class="text-sm"
-                                />
+                                <Button icon="pi pi-unlock" :label="t('layout.header.login')" severity="secondary" class="text-sm" />
                             </RouterLink>
                         </template>
                     </div>
@@ -94,15 +76,9 @@ const items = computed(() => [
             <!-- Navigation -->
             <div id="navigation" class="w-full h-full flex">
                 <template v-if="isAuthenticated">
-                    <RouterLink
-                        :to="{ name: item.route }"
-                        v-for="item in items"
-                        :key="item.route"
-                        class="nav-item"
-                    >
+                    <RouterLink :to="{ name: item.route }" v-for="item in items" :key="item.route" class="nav-item">
                         <div
-                            class="flex align-items-center uppercase flex justify-content-center p-3 pl-0 cursor-pointer text-primary font-medium"
-                        >
+                            class="flex align-items-center uppercase flex justify-content-center p-3 pl-0 cursor-pointer text-primary font-medium">
                             <span class="mr-2" :class="'pi pi-' + item.icon" />
                             {{ item.label }}
                         </div>
diff --git a/frontend/src/components/layout/Title.vue b/frontend/src/components/layout/Title.vue
index d123729c..44d88f1b 100644
--- a/frontend/src/components/layout/Title.vue
+++ b/frontend/src/components/layout/Title.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 withDefaults(defineProps<{ color?: 'primary' | 'contrast' }>(), {
-    color: 'primary'
-})
+    color: 'primary',
+});
 </script>
 
 <template>
diff --git a/frontend/src/components/projects/GroupCard.vue b/frontend/src/components/projects/GroupCard.vue
index f10dd48c..7b9c306c 100644
--- a/frontend/src/components/projects/GroupCard.vue
+++ b/frontend/src/components/projects/GroupCard.vue
@@ -1,23 +1,21 @@
 <script setup lang="ts">
-import { useStudents } from '@/composables/services/students.service.ts'
-import { onMounted } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-/**
- * This card lists all users in the group of a project
- */
-const { students, getStudentsByGroup } = useStudents()
-const { t } = useI18n()
-
-/* Component props */
+import { useStudents } from '@/composables/services/students.service.ts';
+import { onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { Group } from '@/types/Group.ts';
 
+/* Props */
 const props = defineProps<{
-    groupId: string
-}>()
+    group: Group;
+}>();
+
+/* Composable injections */
+const { students, getStudentsByGroup } = useStudents();
+const { t } = useI18n();
 
 onMounted(async () => {
-    await getStudentsByGroup(props.groupId)
-})
+    await getStudentsByGroup(props.group.id);
+});
 </script>
 
 <template>
@@ -25,9 +23,7 @@ onMounted(async () => {
         <div class="groupcard">
             <h2>{{ t('views.projects.groupMembers') }}</h2>
             <div>
-                <p v-for="student in students" :key="student.id">
-                    {{ student.first_name }} {{ student.last_name }}
-                </p>
+                <p v-for="student in students" :key="student.id">{{ student.first_name }} {{ student.last_name }}</p>
             </div>
         </div>
     </div>
diff --git a/frontend/src/components/projects/ProjectCard.vue b/frontend/src/components/projects/ProjectCard.vue
index 27396010..747c3207 100644
--- a/frontend/src/components/projects/ProjectCard.vue
+++ b/frontend/src/components/projects/ProjectCard.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
-import Card from 'primevue/card'
-import Button from 'primevue/button'
-import { type Project } from '@/types/Projects.ts'
-import { PrimeIcons } from 'primevue/api'
-import { useI18n } from 'vue-i18n'
-import { computed } from 'vue'
+import Card from 'primevue/card';
+import Button from 'primevue/button';
+import { type Project } from '@/types/Projects.ts';
+import { PrimeIcons } from 'primevue/api';
+import { useI18n } from 'vue-i18n';
+import { computed } from 'vue';
+import moment from 'moment';
+import { Course } from '@/types/Course.ts';
 
 /**
  * TODO
@@ -13,42 +15,36 @@ import { computed } from 'vue'
 
 /* Component props */
 const props = defineProps<{
-    project: Project
-}>()
+    project: Project;
+    course: Course;
+}>();
 
 const formattedDeadline = computed(() => {
-    // changes deadline format to dd/mm.yyyy
-    const date = new Date(props.project.deadline)
-    return `${date.getDate()}/${date.getMonth() + 1}/${date.getFullYear()}`
-})
+    return moment(props.project.deadline).format("DD MMMM YYYY")
+});
 
 /* Composable injections */
-const { t } = useI18n()
+const { t } = useI18n();
 </script>
 
 <template>
     <Card class="border-round project-card">
         <template #header>
             <h2 class="text-primary m-0 text-2xl">
-                {{ project.name }} - {{ project.course.name }}
+                <span class="pi pi-book text-xl mr-2"/> {{ course.name }}
             </h2>
         </template>
+        <template #subtitle>
+            {{ project.name }}
+        </template>
         <template #content>
-            <div>
-                <i
-                    :class="['pi', PrimeIcons.CALENDAR_PLUS, 'icon-color']"
-                    class="mr-2"
-                ></i>
-                {{ t('views.projects.deadline') }}: {{ formattedDeadline
-                }}<br />
+            <div class="mb-2">
+                <i :class="['pi', PrimeIcons.CALENDAR_PLUS, 'icon-color']" class="mr-2"></i>
+                {{ t('views.projects.deadline') }}: {{ formattedDeadline }}<br />
             </div>
             <div>
-                <i
-                    :class="['pi', PrimeIcons.INFO_CIRCLE, 'icon-color']"
-                    class="mr-2"
-                ></i>
-                {{ t('views.projects.submissionStatus') }}:
-                {{ project.submissions.structureChecks_passed }}
+                <i :class="['pi', PrimeIcons.INFO_CIRCLE, 'icon-color']" class="mr-2"></i>
+                {{ t('views.projects.submissionStatus') }}: ok
             </div>
         </template>
         <template #footer>
@@ -56,17 +52,11 @@ const { t } = useI18n()
                 :to="{
                     name: 'project',
                     params: {
-                        courseId: project.course.id,
-                        projectId: project.id
-                    }
-                }"
-            >
-                <Button
-                    :icon="PrimeIcons.ARROW_RIGHT"
-                    :label="t('components.card.open')"
-                    icon-pos="right"
-                    outlined
-                />
+                        courseId: course.id,
+                        projectId: project.id,
+                    },
+                }">
+                <Button :icon="PrimeIcons.ARROW_RIGHT" :label="t('components.card.open')" icon-pos="right" outlined />
             </RouterLink>
         </template>
     </Card>
diff --git a/frontend/src/components/projects/ProjectList.vue b/frontend/src/components/projects/ProjectList.vue
new file mode 100644
index 00000000..469b686a
--- /dev/null
+++ b/frontend/src/components/projects/ProjectList.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { Course } from '@/types/Course.ts';
+import { watch } from 'vue';
+import { useProject } from '@/composables/services/project.service.ts';
+import ProjectCard from '@/components/projects/ProjectCard.vue';
+import { useI18n } from 'vue-i18n';
+
+/* Props */
+const props = withDefaults(defineProps<{
+    courses: Course[];
+}>(), {
+    courses: []
+});
+
+/* Composables */
+const { t } = useI18n();
+const { projects, getProjectsByCourse } = useProject();
+
+watch(
+    () => props.courses,
+    async (courses: Course[]) => {
+        for (const course of courses) {
+            // Fetch the projects for the course
+            await getProjectsByCourse(course.id);
+
+            // Assign the course to the projects
+            projects.value?.forEach((project) => {
+                project.course = course;
+            });
+
+            // Assign the projects to the course
+            course.projects = projects.value ?? [];
+        }
+    },
+    {
+        immediate: true,
+    },
+);
+</script>
+
+<template>
+    <template v-if="courses.length > 0">
+        <div class="grid align-items-stretch">
+            <div
+                class="col-12 md:col-6 lg:col-4 xl:col-3"
+                v-for="project in courses.flatMap((course) => course.projects)"
+                :key="project.id"
+            >
+                <ProjectCard class="h-100" :project="project" :course="project.course" />
+            </div>
+        </div>
+    </template>
+    <template v-else>
+        <div class="col-12">
+            <p>{{ t('views.dashboard.no_projects') }}</p>
+        </div>
+    </template>
+</template>
+
+<style scoped lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/frontend/src/composables/axios.ts b/frontend/src/composables/axios.ts
index 0888e22c..b5cbe90f 100644
--- a/frontend/src/composables/axios.ts
+++ b/frontend/src/composables/axios.ts
@@ -1,20 +1,20 @@
-import axios from 'axios'
-import Cookie from 'js-cookie'
-import { i18n } from '@/composables/i18n'
+import axios from 'axios';
+import Cookie from 'js-cookie';
+import { i18n } from '@/composables/i18n';
 
-const { locale } = i18n.global
+const { locale } = i18n.global;
 
-axios.defaults.xsrfHeaderName = 'X-CSRFToken'
-axios.defaults.xsrfCookieName = 'csrftoken'
+axios.defaults.xsrfHeaderName = 'X-CSRFToken';
+axios.defaults.xsrfCookieName = 'csrftoken';
 
 export const client = axios.create({
     headers: {
         'Content-Type': 'application/json',
         Accept: 'application/json',
         'X-CSRFToken': Cookie.get('csrftoken'),
-        'Accept-Language': locale.value
+        'Accept-Language': locale.value,
     },
     withCredentials: true,
     xsrfHeaderName: 'X-CSRFToken',
-    xsrfCookieName: 'csrftoken'
-})
+    xsrfCookieName: 'csrftoken',
+});
diff --git a/frontend/src/composables/configuration.ts b/frontend/src/composables/configuration.ts
index 941ad6bc..ef7976b6 100644
--- a/frontend/src/composables/configuration.ts
+++ b/frontend/src/composables/configuration.ts
@@ -1,17 +1,17 @@
-import { type Ref, ref } from 'vue'
-import { endpoints } from '../config/endpoints.ts'
-import { environment } from '../config/environment.ts'
+import { type Ref, ref } from 'vue';
+import { endpoints } from '../config/endpoints.ts';
+import { environment } from '../config/environment.ts';
 
 interface Config {
-    environment: any
-    endpoints: any
+    environment: any;
+    endpoints: any;
 }
 
 export function useConfig(): { config: Ref<Config> } {
     const config = ref<Config>({
         environment,
-        endpoints
-    })
+        endpoints,
+    });
 
-    return { config }
+    return { config };
 }
diff --git a/frontend/src/composables/i18n.ts b/frontend/src/composables/i18n.ts
index b852f6ec..98617ed8 100644
--- a/frontend/src/composables/i18n.ts
+++ b/frontend/src/composables/i18n.ts
@@ -1,14 +1,14 @@
-import 'moment/dist/locale/nl'
-import en from '@/assets/lang/en.json'
-import nl from '@/assets/lang/nl.json'
-import { createI18n } from 'vue-i18n'
-import { useLocalStorage } from '@vueuse/core'
+import 'moment/dist/locale/nl';
+import en from '@/assets/lang/en.json';
+import nl from '@/assets/lang/nl.json';
+import { createI18n } from 'vue-i18n';
+import { useLocalStorage } from '@vueuse/core';
 
-const localeStorage = useLocalStorage('locale', 'nl')
+const localeStorage = useLocalStorage('locale', 'nl');
 
 export const i18n = createI18n({
     locale: localeStorage.value,
     fallbackLocale: 'en',
     legacy: false,
-    messages: { en, nl }
-})
+    messages: { en, nl },
+});
diff --git a/frontend/src/composables/services/admins.service.ts b/frontend/src/composables/services/admins.service.ts
index d7097a93..45288d95 100644
--- a/frontend/src/composables/services/admins.service.ts
+++ b/frontend/src/composables/services/admins.service.ts
@@ -1,53 +1,48 @@
-import { type Ref, ref } from 'vue'
-import { endpoints } from '@/config/endpoints.ts'
-import {
-    get,
-    getList,
-    create,
-    deleteId
-} from '@/composables/services/helpers.ts'
-import { User } from '@/types/User.ts'
+import { type Ref, ref } from 'vue';
+import { endpoints } from '@/config/endpoints.ts';
+import { get, getList, create, deleteId } from '@/composables/services/helpers.ts';
+import { User } from '@/types/users/User.ts';
 
 interface AdminState {
-    admins: Ref<User[] | null>
-    admin: Ref<User | null>
-    getAdminByID: (id: string) => Promise<void>
-    getAdmins: () => Promise<void>
-    createAdmin: (adminData: User) => Promise<void>
-    deleteAdmin: (id: string) => Promise<void>
+    admins: Ref<User[] | null>;
+    admin: Ref<User | null>;
+    getAdminByID: (id: string) => Promise<void>;
+    getAdmins: () => Promise<void>;
+    createAdmin: (adminData: User) => Promise<void>;
+    deleteAdmin: (id: string) => Promise<void>;
 }
 
 export function useAdmin(): AdminState {
-    const admins = ref<User[] | null>(null)
-    const admin = ref<User | null>(null)
+    const admins = ref<User[] | null>(null);
+    const admin = ref<User | null>(null);
 
     async function getAdminByID(id: string): Promise<void> {
-        const endpoint = endpoints.admins.retrieve.replace('{id}', id)
-        await get<User>(endpoint, admin, User.fromJSON)
+        const endpoint = endpoints.admins.retrieve.replace('{id}', id);
+        await get<User>(endpoint, admin, User.fromJSON);
     }
 
     async function getAdmins(): Promise<void> {
-        const endpoint = endpoints.admins.index
-        await getList<User>(endpoint, admins, User.fromJSON)
+        const endpoint = endpoints.admins.index;
+        await getList<User>(endpoint, admins, User.fromJSON);
     }
 
     async function createAdmin(adminData: User): Promise<void> {
-        const endpoint = endpoints.admins.index
+        const endpoint = endpoints.admins.index;
         await create<User>(
             endpoint,
             {
                 email: adminData.email,
                 first_name: adminData.first_name,
-                last_name: adminData.last_name
+                last_name: adminData.last_name,
             },
             admin,
-            User.fromJSON
-        )
+            User.fromJSON,
+        );
     }
 
     async function deleteAdmin(id: string): Promise<void> {
-        const endpoint = endpoints.admins.retrieve.replace('{id}', id)
-        await deleteId<User>(endpoint, admin, User.fromJSON)
+        const endpoint = endpoints.admins.retrieve.replace('{id}', id);
+        await deleteId<User>(endpoint, admin, User.fromJSON);
     }
 
     return {
@@ -57,6 +52,6 @@ export function useAdmin(): AdminState {
         getAdmins,
 
         createAdmin,
-        deleteAdmin
-    }
+        deleteAdmin,
+    };
 }
diff --git a/frontend/src/composables/services/assistant.service.ts b/frontend/src/composables/services/assistant.service.ts
index 02a8b1d3..a9569f83 100644
--- a/frontend/src/composables/services/assistant.service.ts
+++ b/frontend/src/composables/services/assistant.service.ts
@@ -1,106 +1,85 @@
-import { Assistant } from '@/types/Assistant.ts'
-import { Response } from '@/types/Response'
-import { type Ref, ref } from 'vue'
-import { endpoints } from '@/config/endpoints.ts'
-import {
-    get,
-    getList,
-    create,
-    deleteId,
-    deleteIdWithData
-} from '@/composables/services/helpers.ts'
+import { Assistant } from '@/types/users/Assistant.ts';
+import { Response } from '@/types/Response';
+import { type Ref, ref } from 'vue';
+import { endpoints } from '@/config/endpoints.ts';
+import { get, getList, create, deleteId, deleteIdWithData } from '@/composables/services/helpers.ts';
+import { useCourses } from '@/composables/services/courses.service.ts';
 
 interface AssistantState {
-    assistants: Ref<Assistant[] | null>
-    assistant: Ref<Assistant | null>
-    response: Ref<Response | null>
-    getAssistantByID: (id: string) => Promise<void>
-    getAssistantByCourse: (courseId: string) => Promise<void>
-    getAssistants: () => Promise<void>
-    assistantJoinCourse: (
-        courseId: string,
-        assistantId: string
-    ) => Promise<void>
-    assistantLeaveCourse: (
-        courseId: string,
-        assistantId: string
-    ) => Promise<void>
-    createAssistant: (assistantData: Assistant) => Promise<void>
-    deleteAssistant: (id: string) => Promise<void>
+    assistants: Ref<Assistant[] | null>;
+    assistant: Ref<Assistant | null>;
+    response: Ref<Response | null>;
+    getAssistantByID: (id: string, init: boolean) => Promise<void>;
+    getAssistantByCourse: (courseId: string) => Promise<void>;
+    getAssistants: () => Promise<void>;
+    assistantJoinCourse: (courseId: string, assistantId: string) => Promise<void>;
+    assistantLeaveCourse: (courseId: string, assistantId: string) => Promise<void>;
+    createAssistant: (assistantData: Assistant) => Promise<void>;
+    deleteAssistant: (id: string) => Promise<void>;
 }
 
 export function useAssistant(): AssistantState {
-    const assistants = ref<Assistant[] | null>(null)
-    const assistant = ref<Assistant | null>(null)
-    const response = ref<Response | null>(null)
+    /* State */
+    const assistants = ref<Assistant[] | null>(null);
+    const assistant = ref<Assistant | null>(null);
+    const response = ref<Response | null>(null);
 
-    async function getAssistantByID(id: string): Promise<void> {
-        const endpoint = endpoints.assistants.retrieve.replace('{id}', id)
-        await get<Assistant>(endpoint, assistant, Assistant.fromJSON)
+    /* Nested state */
+    const { courses, getCourseByAssistant } = useCourses();
+
+    async function getAssistantByID(id: string, init: boolean = false): Promise<void> {
+        const endpoint = endpoints.assistants.retrieve.replace('{id}', id);
+        await get<Assistant>(endpoint, assistant, Assistant.fromJSON);
+
+        if (init) {
+            await initAssistant(assistant.value);
+        }
     }
 
     async function getAssistantByCourse(courseId: string): Promise<void> {
-        const endpoint = endpoints.assistants.byCourse.replace(
-            '{courseId}',
-            courseId
-        )
-        await get<Assistant>(endpoint, assistant, Assistant.fromJSON)
+        const endpoint = endpoints.assistants.byCourse.replace('{courseId}', courseId);
+        await get<Assistant>(endpoint, assistant, Assistant.fromJSON);
     }
 
     async function getAssistants(): Promise<void> {
-        const endpoint = endpoints.assistants.index
-        await getList<Assistant>(endpoint, assistants, Assistant.fromJSON)
+        const endpoint = endpoints.assistants.index;
+        await getList<Assistant>(endpoint, assistants, Assistant.fromJSON);
     }
 
-    async function assistantJoinCourse(
-        courseId: string,
-        assistantId: string
-    ): Promise<void> {
-        const endpoint = endpoints.assistants.byCourse.replace(
-            '{courseId}',
-            courseId
-        )
-        await create<Response>(
-            endpoint,
-            { assistantId },
-            response,
-            Response.fromJSON
-        )
+    async function assistantJoinCourse(courseId: string, assistantId: string): Promise<void> {
+        const endpoint = endpoints.assistants.byCourse.replace('{courseId}', courseId);
+        await create<Response>(endpoint, { assistantId }, response, Response.fromJSON);
     }
 
-    async function assistantLeaveCourse(
-        courseId: string,
-        assistantId: string
-    ): Promise<void> {
-        const endpoint = endpoints.assistants.byCourse.replace(
-            '{courseId}',
-            courseId
-        )
-        await deleteIdWithData<Response>(
-            endpoint,
-            { assistantId },
-            response,
-            Response.fromJSON
-        )
+    async function assistantLeaveCourse(courseId: string, assistantId: string): Promise<void> {
+        const endpoint = endpoints.assistants.byCourse.replace('{courseId}', courseId);
+        await deleteIdWithData<Response>(endpoint, { assistantId }, response, Response.fromJSON);
     }
 
     async function createAssistant(assistantData: Assistant): Promise<void> {
-        const endpoint = endpoints.assistants.index
+        const endpoint = endpoints.assistants.index;
         await create<Assistant>(
             endpoint,
             {
                 email: assistantData.email,
                 first_name: assistantData.first_name,
-                last_name: assistantData.last_name
+                last_name: assistantData.last_name,
             },
             assistant,
-            Assistant.fromJSON
-        )
+            Assistant.fromJSON,
+        );
     }
 
     async function deleteAssistant(id: string): Promise<void> {
-        const endpoint = endpoints.admins.retrieve.replace('{id}', id)
-        await deleteId<Assistant>(endpoint, assistant, Assistant.fromJSON)
+        const endpoint = endpoints.admins.retrieve.replace('{id}', id);
+        await deleteId<Assistant>(endpoint, assistant, Assistant.fromJSON);
+    }
+
+    async function initAssistant(assistant: Assistant|null) {
+        if (assistant !== null)  {
+            await getCourseByAssistant(assistant.id);
+            assistant.courses = courses.value ?? [];
+        }
     }
 
     return {
@@ -116,6 +95,6 @@ export function useAssistant(): AssistantState {
         deleteAssistant,
 
         assistantJoinCourse,
-        assistantLeaveCourse
-    }
+        assistantLeaveCourse,
+    };
 }
diff --git a/frontend/src/composables/services/courses.service.ts b/frontend/src/composables/services/courses.service.ts
index 162dcb6d..df558a24 100644
--- a/frontend/src/composables/services/courses.service.ts
+++ b/frontend/src/composables/services/courses.service.ts
@@ -1,94 +1,72 @@
-import { Course } from '@/types/Course.ts'
-import { type Ref, ref } from 'vue'
-import { endpoints } from '@/config/endpoints.ts'
-import {
-    get,
-    getList,
-    create,
-    deleteId
-} from '@/composables/services/helpers.ts'
+import { Course } from '@/types/Course.ts';
+import { type Ref, ref } from 'vue';
+import { endpoints } from '@/config/endpoints.ts';
+import { get, getList, create, deleteId } from '@/composables/services/helpers.ts';
 
 interface CoursesState {
-    courses: Ref<Course[] | null>
-    course: Ref<Course | null>
-    getCourseByID: (id: string) => Promise<void>
-    getCourses: () => Promise<void>
-    getCoursesByStudent: (studentId: string) => Promise<void>
-    getCoursesByTeacher: (teacherId: string) => Promise<void>
-    getCourseByAssistant: (assistantId: string) => Promise<void>
-    createCourse: (courseData: Course) => Promise<void>
-    cloneCourse: (courseId: string, cloneAssistants: boolean) => Promise<void>
-    deleteCourse: (id: string) => Promise<void>
+    courses: Ref<Course[] | null>;
+    course: Ref<Course | null>;
+    getCourseByID: (id: string) => Promise<void>;
+    getCourses: () => Promise<void>;
+    getCoursesByStudent: (studentId: string) => Promise<void>;
+    getCoursesByTeacher: (teacherId: string) => Promise<void>;
+    getCourseByAssistant: (assistantId: string) => Promise<void>;
+    createCourse: (courseData: Course) => Promise<void>;
+    cloneCourse: (courseId: string, cloneAssistants: boolean) => Promise<void>;
+    deleteCourse: (id: string) => Promise<void>;
 }
 
 export function useCourses(): CoursesState {
-    const courses = ref<Course[] | null>(null)
-    const course = ref<Course | null>(null)
+    const courses = ref<Course[] | null>(null);
+    const course = ref<Course | null>(null);
 
     async function getCourseByID(id: string): Promise<void> {
-        const endpoint = endpoints.courses.retrieve.replace('{id}', id)
-        await get<Course>(endpoint, course, Course.fromJSON)
+        const endpoint = endpoints.courses.retrieve.replace('{id}', id);
+        await get<Course>(endpoint, course, Course.fromJSON);
     }
 
     async function getCourses(): Promise<void> {
-        const endpoint = endpoints.courses.index
-        await getList<Course>(endpoint, courses, Course.fromJSON)
+        const endpoint = endpoints.courses.index;
+        await getList<Course>(endpoint, courses, Course.fromJSON);
     }
 
     async function getCoursesByStudent(studentId: string): Promise<void> {
-        const endpoint = endpoints.courses.byStudent.replace(
-            '{studentId}',
-            studentId
-        )
-        await getList<Course>(endpoint, courses, Course.fromJSON)
+        const endpoint = endpoints.courses.byStudent.replace('{studentId}', studentId);
+        await getList<Course>(endpoint, courses, Course.fromJSON);
     }
 
     async function getCoursesByTeacher(teacherId: string): Promise<void> {
-        const endpoint = endpoints.courses.byTeacher.replace(
-            '{teacherId}',
-            teacherId
-        )
-        await getList<Course>(endpoint, courses, Course.fromJSON)
+        const endpoint = endpoints.courses.byTeacher.replace('{teacherId}', teacherId);
+        await getList<Course>(endpoint, courses, Course.fromJSON);
     }
 
     async function getCourseByAssistant(assistantId: string): Promise<void> {
-        const endpoint = endpoints.courses.byAssistant.replace(
-            '{assistantId}',
-            assistantId
-        )
-        await getList<Course>(endpoint, courses, Course.fromJSON)
+        const endpoint = endpoints.courses.byAssistant.replace('{assistantId}', assistantId);
+        await getList<Course>(endpoint, courses, Course.fromJSON);
     }
 
     async function createCourse(courseData: Course): Promise<void> {
-        const endpoint = endpoints.courses.index
+        const endpoint = endpoints.courses.index;
         await create<Course>(
             endpoint,
             {
                 name: courseData.name,
                 description: courseData.description,
-                academic_startyear: courseData.academic_startyear
+                academic_startyear: courseData.academic_startyear,
             },
             course,
-            Course.fromJSON
-        )
+            Course.fromJSON,
+        );
     }
 
-    async function cloneCourse(
-        courseId: string,
-        cloneAssistants: boolean
-    ): Promise<void> {
-        const endpoint = endpoints.courses.clone.replace('{courseId}', courseId)
-        await create<Course>(
-            endpoint,
-            { cloneAssistants: cloneAssistants.toString() },
-            course,
-            Course.fromJSON
-        )
+    async function cloneCourse(courseId: string, cloneAssistants: boolean): Promise<void> {
+        const endpoint = endpoints.courses.clone.replace('{courseId}', courseId);
+        await create<Course>(endpoint, { cloneAssistants: cloneAssistants.toString() }, course, Course.fromJSON);
     }
 
     async function deleteCourse(id: string): Promise<void> {
-        const endpoint = endpoints.courses.retrieve.replace('{id}', id)
-        await deleteId<Course>(endpoint, course, Course.fromJSON)
+        const endpoint = endpoints.courses.retrieve.replace('{id}', id);
+        await deleteId<Course>(endpoint, course, Course.fromJSON);
     }
 
     return {
@@ -103,6 +81,6 @@ export function useCourses(): CoursesState {
 
         createCourse,
         cloneCourse,
-        deleteCourse
-    }
+        deleteCourse,
+    };
 }
diff --git a/frontend/src/composables/services/faculties.service.ts b/frontend/src/composables/services/faculties.service.ts
index c8a7caff..747be4a8 100644
--- a/frontend/src/composables/services/faculties.service.ts
+++ b/frontend/src/composables/services/faculties.service.ts
@@ -1,49 +1,39 @@
-import { Faculty } from '@/types/Faculty.ts'
-import { type Ref, ref } from 'vue'
-import { endpoints } from '@/config/endpoints.ts'
-import {
-    get,
-    getList,
-    create,
-    deleteId
-} from '@/composables/services/helpers.ts'
+import { Faculty } from '@/types/Faculty.ts';
+import { type Ref, ref } from 'vue';
+import { endpoints } from '@/config/endpoints.ts';
+import { get, getList, create, deleteId } from '@/composables/services/helpers.ts';
 
 interface FacultyState {
-    faculties: Ref<Faculty[] | null>
-    faculty: Ref<Faculty | null>
-    getFacultyByID: (name: string) => Promise<void>
-    getFacultys: () => Promise<void>
-    createFaculty: (facultyData: Faculty) => Promise<void>
-    deleteFaculty: (id: string) => Promise<void>
+    faculties: Ref<Faculty[] | null>;
+    faculty: Ref<Faculty | null>;
+    getFacultyByID: (name: string) => Promise<void>;
+    getFacultys: () => Promise<void>;
+    createFaculty: (facultyData: Faculty) => Promise<void>;
+    deleteFaculty: (id: string) => Promise<void>;
 }
 
 export function useFaculty(): FacultyState {
-    const faculties = ref<Faculty[] | null>(null)
-    const faculty = ref<Faculty | null>(null)
+    const faculties = ref<Faculty[] | null>(null);
+    const faculty = ref<Faculty | null>(null);
 
     async function getFacultyByID(name: string): Promise<void> {
-        const endpoint = endpoints.faculties.retrieve.replace('{name}', name)
-        await get<Faculty>(endpoint, faculty, Faculty.fromJSON)
+        const endpoint = endpoints.faculties.retrieve.replace('{name}', name);
+        await get<Faculty>(endpoint, faculty, Faculty.fromJSON);
     }
 
     async function getFacultys(): Promise<void> {
-        const endpoint = endpoints.faculties.index
-        await getList<Faculty>(endpoint, faculties, Faculty.fromJSON)
+        const endpoint = endpoints.faculties.index;
+        await getList<Faculty>(endpoint, faculties, Faculty.fromJSON);
     }
 
     async function createFaculty(facultyData: Faculty): Promise<void> {
-        const endpoint = endpoints.faculties.index
-        await create<Faculty>(
-            endpoint,
-            { name: facultyData.name },
-            faculty,
-            Faculty.fromJSON
-        )
+        const endpoint = endpoints.faculties.index;
+        await create<Faculty>(endpoint, { name: facultyData.name }, faculty, Faculty.fromJSON);
     }
 
     async function deleteFaculty(id: string): Promise<void> {
-        const endpoint = endpoints.faculties.retrieve.replace('{id}', id)
-        await deleteId<Faculty>(endpoint, faculty, Faculty.fromJSON)
+        const endpoint = endpoints.faculties.retrieve.replace('{id}', id);
+        await deleteId<Faculty>(endpoint, faculty, Faculty.fromJSON);
     }
 
     return {
@@ -53,6 +43,6 @@ export function useFaculty(): FacultyState {
         getFacultys,
 
         createFaculty,
-        deleteFaculty
-    }
+        deleteFaculty,
+    };
 }
diff --git a/frontend/src/composables/services/groups.service.ts b/frontend/src/composables/services/groups.service.ts
index 661d1b6c..e56b5dc1 100644
--- a/frontend/src/composables/services/groups.service.ts
+++ b/frontend/src/composables/services/groups.service.ts
@@ -1,69 +1,52 @@
-import { Group } from '@/types/Group.ts'
-import { type Ref, ref } from 'vue'
-import { endpoints } from '@/config/endpoints.ts'
-import {
-    get,
-    getList,
-    create,
-    deleteId
-} from '@/composables/services/helpers.ts'
+import { Group } from '@/types/Group.ts';
+import { type Ref, ref } from 'vue';
+import { endpoints } from '@/config/endpoints.ts';
+import { get, getList, create, deleteId } from '@/composables/services/helpers.ts';
 
 interface GroupState {
-    groups: Ref<Group[] | null>
-    group: Ref<Group | null>
-    getGroupByID: (id: string) => Promise<void>
-    getGroupsByProject: (projectId: string) => Promise<void>
-    getGroupsByStudent: (studentId: string) => Promise<void>
-    createGroup: (groupData: Group, projectId: string) => Promise<void>
-    deleteGroup: (id: string) => Promise<void>
+    groups: Ref<Group[] | null>;
+    group: Ref<Group | null>;
+    getGroupByID: (id: string) => Promise<void>;
+    getGroupsByProject: (projectId: string) => Promise<void>;
+    getGroupsByStudent: (studentId: string) => Promise<void>;
+    createGroup: (groupData: Group, projectId: string) => Promise<void>;
+    deleteGroup: (id: string) => Promise<void>;
 }
 
 export function useGroup(): GroupState {
-    const groups = ref<Group[] | null>(null)
-    const group = ref<Group | null>(null)
+    const groups = ref<Group[] | null>(null);
+    const group = ref<Group | null>(null);
 
     async function getGroupByID(id: string): Promise<void> {
-        const endpoint = endpoints.groups.retrieve.replace('{id}', id)
-        await get<Group>(endpoint, group, Group.fromJSON)
+        const endpoint = endpoints.groups.retrieve.replace('{id}', id);
+        await get<Group>(endpoint, group, Group.fromJSON);
     }
 
     async function getGroupsByProject(projectId: string): Promise<void> {
-        const endpoint = endpoints.groups.byProject.replace(
-            '{projectId}',
-            projectId
-        )
-        await getList<Group>(endpoint, groups, Group.fromJSON)
+        const endpoint = endpoints.groups.byProject.replace('{projectId}', projectId);
+        await getList<Group>(endpoint, groups, Group.fromJSON);
     }
 
     async function getGroupsByStudent(studentId: string): Promise<void> {
-        const endpoint = endpoints.groups.byStudent.replace(
-            '{studentId}',
-            studentId
-        )
-        await getList<Group>(endpoint, groups, Group.fromJSON)
+        const endpoint = endpoints.groups.byStudent.replace('{studentId}', studentId);
+        await getList<Group>(endpoint, groups, Group.fromJSON);
     }
 
-    async function createGroup(
-        groupData: Group,
-        projectId: string
-    ): Promise<void> {
-        const endpoint = endpoints.groups.byProject.replace(
-            '{projectId}',
-            projectId
-        )
+    async function createGroup(groupData: Group, projectId: string): Promise<void> {
+        const endpoint = endpoints.groups.byProject.replace('{projectId}', projectId);
         await create<Group>(
             endpoint,
             {
-                score: groupData.score
+                score: groupData.score,
             },
             group,
-            Group.fromJSON
-        )
+            Group.fromJSON,
+        );
     }
 
     async function deleteGroup(id: string): Promise<void> {
-        const endpoint = endpoints.groups.retrieve.replace('{id}', id)
-        await deleteId<Group>(endpoint, group, Group.fromJSON)
+        const endpoint = endpoints.groups.retrieve.replace('{id}', id);
+        await deleteId<Group>(endpoint, group, Group.fromJSON);
     }
 
     return {
@@ -74,6 +57,6 @@ export function useGroup(): GroupState {
         getGroupsByStudent,
 
         createGroup,
-        deleteGroup
-    }
+        deleteGroup,
+    };
 }
diff --git a/frontend/src/composables/services/helpers.ts b/frontend/src/composables/services/helpers.ts
index 4303f33c..d4477eb2 100644
--- a/frontend/src/composables/services/helpers.ts
+++ b/frontend/src/composables/services/helpers.ts
@@ -1,127 +1,97 @@
-import { type AxiosError, type AxiosResponse } from 'axios'
-import { client } from '@/composables/axios.ts'
-import { type Ref } from 'vue'
-import { useMessagesStore } from '@/store/messages.store.ts'
-import { i18n } from '../i18n'
+import { type AxiosError, type AxiosResponse } from 'axios';
+import { client } from '@/composables/axios.ts';
+import { type Ref } from 'vue';
+import { useMessagesStore } from '@/store/messages.store.ts';
+import { i18n } from '../i18n';
 
-const lifeTime = 3000
+const lifeTime = 3000;
 
-export async function get<T>(
-    endpoint: string,
-    ref: Ref<T | null>,
-    fromJson: (data: any) => T
-): Promise<void> {
+export async function get<T>(endpoint: string, ref: Ref<T | null>, fromJson: (data: any) => T): Promise<void> {
     await client
         .get(endpoint)
         .then((response: AxiosResponse) => {
-            ref.value = fromJson(response.data)
-            // add({severity: "success", summary: "Success Message", detail: "Order submitted", life: lifeTime});
+            ref.value = fromJson(response.data);
         })
         .catch((error: AxiosError) => {
-            processError(error)
-            console.error(error) // Log the error for debugging
-        })
+            processError(error);
+            console.error(error); // Log the error for debugging
+        });
 }
 
-export async function create<T>(
-    endpoint: string,
-    data: any,
-    ref: Ref<T | null>,
-    fromJson: (data: any) => T
-): Promise<void> {
+export async function create<T>(endpoint: string, data: any, ref: Ref<T | null>, fromJson: (data: any) => T): Promise<void> {
     await client
         .post(endpoint, data)
         .then((response: AxiosResponse) => {
-            ref.value = fromJson(response.data)
-            // add({severity: "success", summary: "Success Message", detail: "Order submitted", life: lifeTime});
+            ref.value = fromJson(response.data);
         })
         .catch((error: AxiosError) => {
-            processError(error)
-            console.error(error) // Log the error for debugging
-        })
+            processError(error);
+            console.error(error); // Log the error for debugging
+        });
 }
 
-export async function deleteId<T>(
-    endpoint: string,
-    ref: Ref<T | null>,
-    fromJson: (data: any) => T
-): Promise<void> {
+export async function deleteId<T>(endpoint: string, ref: Ref<T | null>, fromJson: (data: any) => T): Promise<void> {
     await client
         .delete(endpoint)
         .then((response: AxiosResponse) => {
-            ref.value = fromJson(response.data)
+            ref.value = fromJson(response.data);
             // add({severity: "success", summary: "Success Message", detail: "Order submitted", life: lifeTime});
         })
         .catch((error: AxiosError) => {
-            processError(error)
-            console.error(error) // Log the error for debugging
-        })
+            processError(error);
+            console.error(error); // Log the error for debugging
+        });
 }
 
-export async function deleteIdWithData<T>(
-    endpoint: string,
-    data: any,
-    ref: Ref<T | null>,
-    fromJson: (data: any) => T
-): Promise<void> {
+export async function deleteIdWithData<T>(endpoint: string, data: any, ref: Ref<T | null>, fromJson: (data: any) => T): Promise<void> {
     await client
         .delete(endpoint, { data })
         .then((response: AxiosResponse) => {
-            ref.value = fromJson(response.data)
+            ref.value = fromJson(response.data);
             // add({severity: "success", summary: "Success Message", detail: "Order submitted", life: lifeTime});
         })
         .catch((error: AxiosError) => {
-            processError(error)
-            console.error(error) // Log the error for debugging
-        })
+            processError(error);
+            console.error(error); // Log the error for debugging
+        });
 }
 
-export async function getList<T>(
-    endpoint: string,
-    ref: Ref<T[] | null>,
-    fromJson: (data: any) => T
-): Promise<void> {
+export async function getList<T>(endpoint: string, ref: Ref<T[] | null>, fromJson: (data: any) => T): Promise<void> {
     await client
         .get(endpoint)
         .then((response) => {
-            ref.value = response.data.map((data: T) => fromJson(data))
+            ref.value = response.data.map((data: T) => fromJson(data));
             // add({severity: "success", summary: "Success Message", detail: "Order submitted", life: lifeTime});
         })
         .catch((error: AxiosError) => {
-            processError(error)
-            console.error(error) // Log the error for debugging
-        })
+            processError(error);
+            console.error(error); // Log the error for debugging
+        });
 }
 
-export async function getListMerged<T>(
-    endpoints: string[],
-    ref: Ref<T[] | null>,
-    fromJson: (data: any) => T
-): Promise<void> {
+export async function getListMerged<T>(endpoints: string[], ref: Ref<T[] | null>, fromJson: (data: any) => T): Promise<void> {
     // Create an array to accumulate all response data
-    const allData: T[] = []
+    const allData: T[] = [];
 
     for (const endpoint of endpoints) {
         await client
             .get(endpoint)
             .then((response) => {
-                const responseData: T[] = response.data.map((data: T) =>
-                    fromJson(data)
-                )
-                allData.push(...responseData) // Merge into the allData array
+                const responseData: T[] = response.data.map((data: T) => fromJson(data));
+                allData.push(...responseData); // Merge into the allData array
                 // add({severity: "success", summary: "Success Message", detail: "Order submitted", life: lifeTime});
             })
             .catch((error: AxiosError) => {
-                processError(error)
-                console.error(error) // Log the error for debugging
-            })
+                processError(error);
+                console.error(error); // Log the error for debugging
+            });
     }
-    ref.value = allData
+    ref.value = allData;
 }
 
 export function processError(error: AxiosError): void {
-    const { t } = i18n.global
-    const { add } = useMessagesStore()
+    const { t } = i18n.global;
+    const { add } = useMessagesStore();
 
     if (error.response !== undefined && error.response !== null) {
         // The request was made and the server responded with a status code
@@ -130,22 +100,22 @@ export function processError(error: AxiosError): void {
                 severity: 'error',
                 summary: t('composables.helpers.errors.notFound'),
                 detail: t('composables.helpers.errors.notFoundDetail'),
-                life: lifeTime
-            })
+                life: lifeTime,
+            });
         } else if (error.response.status === 401) {
             add({
                 severity: 'error',
                 summary: t('composables.helpers.errors.unauthorized'),
                 detail: t('composables.helpers.errors.unauthorizedDetail'),
-                life: lifeTime
-            })
+                life: lifeTime,
+            });
         } else {
             add({
                 severity: 'error',
                 summary: t('composables.helpers.errors.server'),
                 detail: t('composables.helpers.errors.serverDetail'),
-                life: lifeTime
-            })
+                life: lifeTime,
+            });
         }
     } else if (error.request !== undefined && error.request !== null) {
         // The request was made but no response was received
@@ -153,15 +123,15 @@ export function processError(error: AxiosError): void {
             severity: 'error',
             summary: t('composables.helpers.errors.network'),
             detail: t('composables.helpers.errors.networkDetail'),
-            life: lifeTime
-        })
+            life: lifeTime,
+        });
     } else {
         // Something happened in setting up the request that triggered an error
         add({
             severity: 'error',
             summary: t('composables.helpers.errors.request'),
             detail: t('composables.helpers.errors.requestDetail'),
-            life: lifeTime
-        })
+            life: lifeTime,
+        });
     }
 }
diff --git a/frontend/src/composables/services/project.service.ts b/frontend/src/composables/services/project.service.ts
index 62297b5d..4e39187f 100644
--- a/frontend/src/composables/services/project.service.ts
+++ b/frontend/src/composables/services/project.service.ts
@@ -1,121 +1,81 @@
-import { Project } from '@/types/Projects.ts'
-import { Course } from '@/types/Course'
-import { type Ref, ref } from 'vue'
-import { endpoints } from '@/config/endpoints.ts'
-import axios from 'axios'
-import {
-    get,
-    getList,
-    getListMerged,
-    create,
-    deleteId,
-    processError
-} from '@/composables/services/helpers.ts'
+import { Project } from '@/types/Projects.ts';
+import { Course } from '@/types/Course';
+import { type Ref, ref } from 'vue';
+import { endpoints } from '@/config/endpoints.ts';
+import axios from 'axios';
+import { get, getList, getListMerged, create, deleteId, processError } from '@/composables/services/helpers.ts';
 
 interface ProjectState {
-    projects: Ref<Project[] | null>
-    project: Ref<Project | null>
-    getProjectByID: (id: string) => Promise<void>
-    getProjectsByCourse: (courseId: string) => Promise<void>
-    getProjectsByStudent: (studentId: string) => Promise<void>
-    getProjectsByCourseAndDeadline: (
-        courseId: string,
-        deadlineDate: Date
-    ) => Promise<void>
-    createProject: (projectData: Project, courseId: string) => Promise<void>
-    deleteProject: (id: string) => Promise<void>
+    projects: Ref<Project[] | null>;
+    project: Ref<Project | null>;
+    getProjectByID: (id: string) => Promise<void>;
+    getProjectsByCourse: (courseId: string) => Promise<void>;
+    getProjectsByStudent: (studentId: string) => Promise<void>;
+    getProjectsByCourseAndDeadline: (courseId: string, deadlineDate: Date) => Promise<void>;
+    createProject: (projectData: Project, courseId: string) => Promise<void>;
+    deleteProject: (id: string) => Promise<void>;
 }
 
 export function useProject(): ProjectState {
-    const projects = ref<Project[] | null>(null)
-    const project = ref<Project | null>(null)
+    const projects = ref<Project[] | null>(null);
+    const project = ref<Project | null>(null);
 
     async function getProjectByID(id: string): Promise<void> {
-        const endpoint = endpoints.projects.retrieve.replace('{id}', id)
-        await get<Project>(endpoint, project, Project.fromJSON)
+        const endpoint = endpoints.projects.retrieve.replace('{id}', id);
+        await get<Project>(endpoint, project, Project.fromJSON);
     }
 
     async function getProjectsByCourse(courseId: string): Promise<void> {
-        const endpoint = endpoints.projects.byCourse.replace(
-            '{courseId}',
-            courseId
-        )
-        await getList<Project>(endpoint, projects, Project.fromJSON)
+        const endpoint = endpoints.projects.byCourse.replace('{courseId}', courseId);
+        await getList<Project>(endpoint, projects, Project.fromJSON);
     }
 
     async function getProjectsByStudent(studentId: string): Promise<void> {
-        const endpoint = endpoints.courses.byStudent.replace(
-            '{studentId}',
-            studentId
-        )
-        const courses = ref<Course[] | null>(null)
-        await getList<Course>(endpoint, courses, Course.fromJSON)
+        const endpoint = endpoints.courses.byStudent.replace('{studentId}', studentId);
+        const courses = ref<Course[] | null>(null);
+        await getList<Course>(endpoint, courses, Course.fromJSON);
 
-        const endpList = []
-        let coursesValue: Course[] | null = courses.value
+        const endpList = [];
+        let coursesValue: Course[] | null = courses.value;
         if (coursesValue === null) {
-            coursesValue = []
+            coursesValue = [];
         }
         for (const course of coursesValue) {
-            endpList.push(
-                endpoints.projects.byCourse.replace(
-                    '{courseId}',
-                    course.id.toString()
-                )
-            )
+            endpList.push(endpoints.projects.byCourse.replace('{courseId}', course.id.toString()));
         }
 
-        await getListMerged<Project>(endpList, projects, Project.fromJSON)
+        await getListMerged<Project>(endpList, projects, Project.fromJSON);
     }
 
-    async function getProjectsByCourseAndDeadline(
-        courseId: string,
-        deadlineDate: Date
-    ): Promise<void> {
-        const endpoint = endpoints.projects.byCourse.replace(
-            '{courseId}',
-            courseId
-        )
+    async function getProjectsByCourseAndDeadline(courseId: string, deadlineDate: Date): Promise<void> {
+        const endpoint = endpoints.projects.byCourse.replace('{courseId}', courseId);
 
         await axios
             .get(endpoint)
             .then((response) => {
-                const allProjects = response.data.map((projectData: Project) =>
-                    Project.fromJSON(projectData)
-                )
+                const allProjects = response.data.map((projectData: Project) => Project.fromJSON(projectData));
 
                 // Filter projects based on the deadline date
-                const projectsWithMatchingDeadline = allProjects.filter(
-                    (project: Project) => {
-                        const projectDeadlineDate = project.deadline
-                        return (
-                            projectDeadlineDate.toDateString() ===
-                            deadlineDate.toDateString()
-                        )
-                    }
-                )
+                const projectsWithMatchingDeadline = allProjects.filter((project: Project) => {
+                    const projectDeadlineDate = project.deadline;
+                    return projectDeadlineDate.toDateString() === deadlineDate.toDateString();
+                });
 
                 // Update the projects ref with the filtered projects
-                projects.value = projectsWithMatchingDeadline
+                projects.value = projectsWithMatchingDeadline;
             })
             .catch((error) => {
                 if (axios.isAxiosError(error)) {
-                    processError(error)
-                    console.log(error.response?.data)
+                    processError(error);
+                    console.log(error.response?.data);
                 } else {
-                    console.error('An unexpected error ocurred: ', error)
+                    console.error('An unexpected error ocurred: ', error);
                 }
-            })
+            });
     }
 
-    async function createProject(
-        projectData: Project,
-        courseId: string
-    ): Promise<void> {
-        const endpoint = endpoints.projects.byCourse.replace(
-            '{courseId}',
-            courseId
-        )
+    async function createProject(projectData: Project, courseId: string): Promise<void> {
+        const endpoint = endpoints.projects.byCourse.replace('{courseId}', courseId);
         await create<Project>(
             endpoint,
             {
@@ -128,16 +88,16 @@ export function useProject(): ProjectState {
                 deadline: projectData.deadline,
                 max_score: projectData.max_score,
                 score_visible: projectData.score_visible,
-                group_size: projectData.group_size
+                group_size: projectData.group_size,
             },
             project,
-            Project.fromJSON
-        )
+            Project.fromJSON,
+        );
     }
 
     async function deleteProject(id: string): Promise<void> {
-        const endpoint = endpoints.projects.retrieve.replace('{id}', id)
-        await deleteId<Project>(endpoint, project, Project.fromJSON)
+        const endpoint = endpoints.projects.retrieve.replace('{id}', id);
+        await deleteId<Project>(endpoint, project, Project.fromJSON);
     }
 
     return {
@@ -149,6 +109,6 @@ export function useProject(): ProjectState {
         getProjectsByStudent,
 
         createProject,
-        deleteProject
-    }
+        deleteProject,
+    };
 }
diff --git a/frontend/src/composables/services/structure_check.service.ts b/frontend/src/composables/services/structure_check.service.ts
index a0c4c3a2..cfc89d90 100644
--- a/frontend/src/composables/services/structure_check.service.ts
+++ b/frontend/src/composables/services/structure_check.service.ts
@@ -1,77 +1,46 @@
-import { StructureCheck } from '@/types/StructureCheck.ts'
-import { type Ref, ref } from 'vue'
-import { endpoints } from '@/config/endpoints.ts'
-import {
-    get,
-    getList,
-    create,
-    deleteId
-} from '@/composables/services/helpers.ts'
+import { StructureCheck } from '@/types/StructureCheck.ts';
+import { type Ref, ref } from 'vue';
+import { endpoints } from '@/config/endpoints.ts';
+import { get, getList, create, deleteId } from '@/composables/services/helpers.ts';
 
 interface StructureCheckState {
-    structureChecks: Ref<StructureCheck[] | null>
-    structureCheck: Ref<StructureCheck | null>
-    getStructureCheckByID: (id: string) => Promise<void>
-    getStructureCheckByProject: (projectId: string) => Promise<void>
-    createStructureCheck: (
-        structureCheckData: StructureCheck,
-        projectId: string
-    ) => Promise<void>
-    deleteStructureCheck: (id: string) => Promise<void>
+    structureChecks: Ref<StructureCheck[] | null>;
+    structureCheck: Ref<StructureCheck | null>;
+    getStructureCheckByID: (id: string) => Promise<void>;
+    getStructureCheckByProject: (projectId: string) => Promise<void>;
+    createStructureCheck: (structureCheckData: StructureCheck, projectId: string) => Promise<void>;
+    deleteStructureCheck: (id: string) => Promise<void>;
 }
 
 export function useStructureCheck(): StructureCheckState {
-    const structureChecks = ref<StructureCheck[] | null>(null)
-    const structureCheck = ref<StructureCheck | null>(null)
+    const structureChecks = ref<StructureCheck[] | null>(null);
+    const structureCheck = ref<StructureCheck | null>(null);
 
     async function getStructureCheckByID(id: string): Promise<void> {
-        const endpoint = endpoints.structureChecks.retrieve.replace('{id}', id)
-        await get<StructureCheck>(
-            endpoint,
-            structureCheck,
-            StructureCheck.fromJSON
-        )
+        const endpoint = endpoints.structureChecks.retrieve.replace('{id}', id);
+        await get<StructureCheck>(endpoint, structureCheck, StructureCheck.fromJSON);
     }
 
-    async function getStructureCheckByProject(
-        projectId: string
-    ): Promise<void> {
-        const endpoint = endpoints.structureChecks.byProject.replace(
-            '{projectId}',
-            projectId
-        )
-        await getList<StructureCheck>(
-            endpoint,
-            structureChecks,
-            StructureCheck.fromJSON
-        )
+    async function getStructureCheckByProject(projectId: string): Promise<void> {
+        const endpoint = endpoints.structureChecks.byProject.replace('{projectId}', projectId);
+        await getList<StructureCheck>(endpoint, structureChecks, StructureCheck.fromJSON);
     }
 
-    async function createStructureCheck(
-        structureCheckData: StructureCheck,
-        projectId: string
-    ): Promise<void> {
-        const endpoint = endpoints.structureChecks.byProject.replace(
-            '{projectId}',
-            projectId
-        )
+    async function createStructureCheck(structureCheckData: StructureCheck, projectId: string): Promise<void> {
+        const endpoint = endpoints.structureChecks.byProject.replace('{projectId}', projectId);
         await create<StructureCheck>(
             endpoint,
             {
-                name: structureCheckData.name
+                name: structureCheckData.name,
             },
             structureCheck,
-            StructureCheck.fromJSON
-        )
+            StructureCheck.fromJSON,
+        );
     }
 
     async function deleteStructureCheck(id: string): Promise<void> {
-        const endpoint = endpoints.structureChecks.retrieve.replace('{id}', id)
-        await deleteId<StructureCheck>(
-            endpoint,
-            structureCheck,
-            StructureCheck.fromJSON
-        )
+        const endpoint = endpoints.structureChecks.retrieve.replace('{id}', id);
+        await deleteId<StructureCheck>(endpoint, structureCheck, StructureCheck.fromJSON);
     }
 
     return {
@@ -81,6 +50,6 @@ export function useStructureCheck(): StructureCheckState {
         getStructureCheckByProject,
 
         createStructureCheck,
-        deleteStructureCheck
-    }
+        deleteStructureCheck,
+    };
 }
diff --git a/frontend/src/composables/services/students.service.ts b/frontend/src/composables/services/students.service.ts
index 9b2e2110..6efe45f1 100644
--- a/frontend/src/composables/services/students.service.ts
+++ b/frontend/src/composables/services/students.service.ts
@@ -1,143 +1,103 @@
-import { Student } from '@/types/Student'
-import { Response } from '@/types/Response'
-import { type Ref, ref } from 'vue'
-import { endpoints } from '@/config/endpoints.ts'
-import {
-    get,
-    getList,
-    create,
-    deleteId,
-    deleteIdWithData
-} from '@/composables/services/helpers.ts'
+import { Student } from '@/types/users/Student.ts';
+import { Response } from '@/types/Response';
+import { type Ref, ref } from 'vue';
+import { endpoints } from '@/config/endpoints.ts';
+import { get, getList, create, deleteId, deleteIdWithData } from '@/composables/services/helpers.ts';
+import { useCourses } from '@/composables/services/courses.service.ts';
 
 interface StudentsState {
-    students: Ref<Student[] | null>
-    student: Ref<Student | null>
-    response: Ref<Response | null>
-    getStudentByID: (id: string) => Promise<void>
-    getStudents: () => Promise<void>
-    getStudentsByCourse: (courseId: string) => Promise<void>
-    getStudentsByGroup: (groupId: string) => Promise<void>
-    createStudent: (studentData: Student) => Promise<void>
-    deleteStudent: (id: string) => Promise<void>
-    studentJoinCourse: (courseId: string, studentId: string) => Promise<void>
-    studentLeaveCourse: (courseId: string, studentId: string) => Promise<void>
-    studentJoinGroup: (groupId: string, studentId: string) => Promise<void>
-    studentLeaveGroup: (groupId: string, studentId: string) => Promise<void>
+    students: Ref<Student[] | null>;
+    student: Ref<Student | null>;
+    response: Ref<Response | null>;
+    getStudentByID: (id: string, init: boolean) => Promise<void>;
+    getStudents: () => Promise<void>;
+    getStudentsByCourse: (courseId: string) => Promise<void>;
+    getStudentsByGroup: (groupId: string) => Promise<void>;
+    createStudent: (studentData: Student) => Promise<void>;
+    deleteStudent: (id: string) => Promise<void>;
+    studentJoinCourse: (courseId: string, studentId: string) => Promise<void>;
+    studentLeaveCourse: (courseId: string, studentId: string) => Promise<void>;
+    studentJoinGroup: (groupId: string, studentId: string) => Promise<void>;
+    studentLeaveGroup: (groupId: string, studentId: string) => Promise<void>;
 }
 
 export function useStudents(): StudentsState {
-    const students = ref<Student[] | null>(null)
-    const student = ref<Student | null>(null)
-    const response = ref<Response | null>(null)
+    /* State */
+    const students = ref<Student[] | null>(null);
+    const student = ref<Student | null>(null);
+    const response = ref<Response | null>(null);
 
-    async function getStudentByID(id: string): Promise<void> {
-        const endpoint = endpoints.students.retrieve.replace('{id}', id)
-        await get<Student>(endpoint, student, Student.fromJSON)
+    /* Nested state */
+    const { courses, getCoursesByStudent } = useCourses();
+
+    async function getStudentByID(id: string, init: boolean = false): Promise<void> {
+        const endpoint = endpoints.students.retrieve.replace('{id}', id);
+        await get<Student>(endpoint, student, Student.fromJSON);
+
+        if (init) {
+            await initStudent(student.value);
+        }
     }
 
     async function getStudents(): Promise<void> {
-        const endpoint = endpoints.students.index
-        await getList<Student>(endpoint, students, Student.fromJSON)
+        const endpoint = endpoints.students.index;
+        await getList<Student>(endpoint, students, Student.fromJSON);
     }
 
     async function getStudentsByCourse(courseId: string): Promise<void> {
-        const endpoint = endpoints.students.byCourse.replace(
-            '{courseId}',
-            courseId
-        )
-        await getList<Student>(endpoint, students, Student.fromJSON)
+        const endpoint = endpoints.students.byCourse.replace('{courseId}', courseId);
+        await getList<Student>(endpoint, students, Student.fromJSON);
     }
 
     async function getStudentsByGroup(groupId: string): Promise<void> {
-        const endpoint = endpoints.students.byGroup.replace(
-            '{groupId}',
-            groupId
-        )
-        await getList<Student>(endpoint, students, Student.fromJSON)
+        const endpoint = endpoints.students.byGroup.replace('{groupId}', groupId);
+        await getList<Student>(endpoint, students, Student.fromJSON);
     }
 
-    async function studentJoinCourse(
-        courseId: string,
-        studentId: string
-    ): Promise<void> {
-        const endpoint = endpoints.students.byCourse.replace(
-            '{courseId}',
-            courseId
-        )
-        await create<Response>(
-            endpoint,
-            { studentId },
-            response,
-            Response.fromJSON
-        )
+    async function studentJoinCourse(courseId: string, studentId: string): Promise<void> {
+        const endpoint = endpoints.students.byCourse.replace('{courseId}', courseId);
+        await create<Response>(endpoint, { studentId }, response, Response.fromJSON);
     }
 
-    async function studentLeaveCourse(
-        courseId: string,
-        studentId: string
-    ): Promise<void> {
-        const endpoint = endpoints.students.byCourse.replace(
-            '{courseId}',
-            courseId
-        )
-        await deleteIdWithData<Response>(
-            endpoint,
-            { studentId },
-            response,
-            Response.fromJSON
-        )
+    async function studentLeaveCourse(courseId: string, studentId: string): Promise<void> {
+        const endpoint = endpoints.students.byCourse.replace('{courseId}', courseId);
+        await deleteIdWithData<Response>(endpoint, { studentId }, response, Response.fromJSON);
     }
 
-    async function studentJoinGroup(
-        groupId: string,
-        studentId: string
-    ): Promise<void> {
-        const endpoint = endpoints.students.byGroup.replace(
-            '{groupId}',
-            groupId
-        )
-        await create<Response>(
-            endpoint,
-            { studentId },
-            response,
-            Response.fromJSON
-        )
+    async function studentJoinGroup(groupId: string, studentId: string): Promise<void> {
+        const endpoint = endpoints.students.byGroup.replace('{groupId}', groupId);
+        await create<Response>(endpoint, { studentId }, response, Response.fromJSON);
     }
 
-    async function studentLeaveGroup(
-        groupId: string,
-        studentId: string
-    ): Promise<void> {
-        const endpoint = endpoints.students.byGroup.replace(
-            '{groupId}',
-            groupId
-        )
-        await deleteIdWithData<Response>(
-            endpoint,
-            { studentId },
-            response,
-            Response.fromJSON
-        )
+    async function studentLeaveGroup(groupId: string, studentId: string): Promise<void> {
+        const endpoint = endpoints.students.byGroup.replace('{groupId}', groupId);
+        await deleteIdWithData<Response>(endpoint, { studentId }, response, Response.fromJSON);
     }
 
     async function createStudent(studentData: Student): Promise<void> {
-        const endpoint = endpoints.students.index
+        const endpoint = endpoints.students.index;
         await create<Student>(
             endpoint,
             {
                 email: studentData.email,
                 first_name: studentData.first_name,
-                last_name: studentData.last_name
+                last_name: studentData.last_name,
             },
             student,
-            Student.fromJSON
-        )
+            Student.fromJSON,
+        );
     }
 
     async function deleteStudent(id: string): Promise<void> {
-        const endpoint = endpoints.students.retrieve.replace('{id}', id)
-        await deleteId<Student>(endpoint, student, Student.fromJSON)
+        const endpoint = endpoints.students.retrieve.replace('{id}', id);
+        await deleteId<Student>(endpoint, student, Student.fromJSON);
+    }
+
+    async function initStudent(student: Student|null) {
+        if (student !== null)  {
+            await getCoursesByStudent(student.id);
+            student.courses = courses.value ?? [];
+        }
     }
 
     return {
@@ -157,6 +117,6 @@ export function useStudents(): StudentsState {
         studentJoinCourse,
         studentLeaveCourse,
         studentJoinGroup,
-        studentLeaveGroup
-    }
+        studentLeaveGroup,
+    };
 }
diff --git a/frontend/src/composables/services/submission.service.ts b/frontend/src/composables/services/submission.service.ts
index 2fe58534..a2cc0c76 100644
--- a/frontend/src/composables/services/submission.service.ts
+++ b/frontend/src/composables/services/submission.service.ts
@@ -1,72 +1,52 @@
-import { Submission } from '@/types/Submission.ts'
-import { type Ref, ref } from 'vue'
-import { endpoints } from '@/config/endpoints.ts'
-import {
-    get,
-    getList,
-    create,
-    deleteId
-} from '@/composables/services/helpers.ts'
+import { Submission } from '@/types/Submission.ts';
+import { type Ref, ref } from 'vue';
+import { endpoints } from '@/config/endpoints.ts';
+import { get, getList, create, deleteId } from '@/composables/services/helpers.ts';
 
 interface SubmissionState {
-    submissions: Ref<Submission[] | null>
-    submission: Ref<Submission | null>
-    getSubmissionByID: (id: string) => Promise<void>
-    getSubmissionByProject: (projectId: string) => Promise<void>
-    getSubmissionByGroup: (groupId: string) => Promise<void>
-    createSubmission: (
-        submissionData: Submission,
-        groupId: string
-    ) => Promise<void>
-    deleteSubmission: (id: string) => Promise<void>
+    submissions: Ref<Submission[] | null>;
+    submission: Ref<Submission | null>;
+    getSubmissionByID: (id: string) => Promise<void>;
+    getSubmissionByProject: (projectId: string) => Promise<void>;
+    getSubmissionByGroup: (groupId: string) => Promise<void>;
+    createSubmission: (submissionData: Submission, groupId: string) => Promise<void>;
+    deleteSubmission: (id: string) => Promise<void>;
 }
 
 export function useSubmission(): SubmissionState {
-    const submissions = ref<Submission[] | null>(null)
-    const submission = ref<Submission | null>(null)
+    const submissions = ref<Submission[] | null>(null);
+    const submission = ref<Submission | null>(null);
 
     async function getSubmissionByID(id: string): Promise<void> {
-        const endpoint = endpoints.submissions.retrieve.replace('{id}', id)
-        await get<Submission>(endpoint, submission, Submission.fromJSON)
+        const endpoint = endpoints.submissions.retrieve.replace('{id}', id);
+        await get<Submission>(endpoint, submission, Submission.fromJSON);
     }
 
     async function getSubmissionByProject(projectId: string): Promise<void> {
-        const endpoint = endpoints.submissions.byProject.replace(
-            '{projectId}',
-            projectId
-        )
-        await getList<Submission>(endpoint, submissions, Submission.fromJSON)
+        const endpoint = endpoints.submissions.byProject.replace('{projectId}', projectId);
+        await getList<Submission>(endpoint, submissions, Submission.fromJSON);
     }
 
     async function getSubmissionByGroup(groupId: string): Promise<void> {
-        const endpoint = endpoints.submissions.byGroup.replace(
-            '{groupId}',
-            groupId
-        )
-        await getList<Submission>(endpoint, submissions, Submission.fromJSON)
+        const endpoint = endpoints.submissions.byGroup.replace('{groupId}', groupId);
+        await getList<Submission>(endpoint, submissions, Submission.fromJSON);
     }
 
-    async function createSubmission(
-        submissionData: Submission,
-        groupId: string
-    ): Promise<void> {
-        const endpoint = endpoints.submissions.byGroup.replace(
-            '{groupId}',
-            groupId
-        )
+    async function createSubmission(submissionData: Submission, groupId: string): Promise<void> {
+        const endpoint = endpoints.submissions.byGroup.replace('{groupId}', groupId);
         await create<Submission>(
             endpoint,
             {
-                files: submissionData.files // TODO look how this will need to be given
+                files: submissionData.files, // TODO look how this will need to be given
             },
             submission,
-            Submission.fromJSON
-        )
+            Submission.fromJSON,
+        );
     }
 
     async function deleteSubmission(id: string): Promise<void> {
-        const endpoint = endpoints.submissions.retrieve.replace('{id}', id)
-        await deleteId<Submission>(endpoint, submission, Submission.fromJSON)
+        const endpoint = endpoints.submissions.retrieve.replace('{id}', id);
+        await deleteId<Submission>(endpoint, submission, Submission.fromJSON);
     }
 
     return {
@@ -77,6 +57,6 @@ export function useSubmission(): SubmissionState {
         getSubmissionByGroup,
 
         createSubmission,
-        deleteSubmission
-    }
+        deleteSubmission,
+    };
 }
diff --git a/frontend/src/composables/services/submissionStatus.service.ts b/frontend/src/composables/services/submissionStatus.service.ts
deleted file mode 100644
index b5e97389..00000000
--- a/frontend/src/composables/services/submissionStatus.service.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { type Ref, ref } from 'vue'
-import { endpoints } from '@/config/endpoints.ts'
-import { get } from '@/composables/services/helpers.ts'
-import { SubmissionStatus } from '@/types/SubmisionStatus'
-
-interface SubmissionStatusState {
-    submissionStatus: Ref<SubmissionStatus | null>
-    getSubmissionStatusByProject: (projectId: string) => Promise<void>
-}
-
-export function useSubmissionStatus(): SubmissionStatusState {
-    const submissionStatus = ref<SubmissionStatus | null>(null)
-
-    async function getSubmissionStatusByProject(
-        projectId: string
-    ): Promise<void> {
-        const endpoint = endpoints.submissions.status.replace(
-            '{projectId}',
-            projectId
-        )
-        await get<SubmissionStatus>(
-            endpoint,
-            submissionStatus,
-            SubmissionStatus.fromJSON
-        )
-    }
-
-    return {
-        submissionStatus,
-        getSubmissionStatusByProject
-    }
-}
diff --git a/frontend/src/composables/services/submission_status.service.ts b/frontend/src/composables/services/submission_status.service.ts
new file mode 100644
index 00000000..77174b7a
--- /dev/null
+++ b/frontend/src/composables/services/submission_status.service.ts
@@ -0,0 +1,23 @@
+import { type Ref, ref } from 'vue';
+import { endpoints } from '@/config/endpoints.ts';
+import { get } from '@/composables/services/helpers.ts';
+import { SubmissionStatus } from '@/types/SubmisionStatus';
+
+interface SubmissionStatusState {
+    submissionStatus: Ref<SubmissionStatus | null>;
+    getSubmissionStatusByProject: (projectId: string) => Promise<void>;
+}
+
+export function useSubmissionStatus(): SubmissionStatusState {
+    const submissionStatus = ref<SubmissionStatus | null>(null);
+
+    async function getSubmissionStatusByProject(projectId: string): Promise<void> {
+        const endpoint = endpoints.submissions.status.replace('{projectId}', projectId);
+        await get<SubmissionStatus>(endpoint, submissionStatus, SubmissionStatus.fromJSON);
+    }
+
+    return {
+        submissionStatus,
+        getSubmissionStatusByProject,
+    };
+}
diff --git a/frontend/src/composables/services/teachers.service.ts b/frontend/src/composables/services/teachers.service.ts
index ba97a0c7..90e2e724 100644
--- a/frontend/src/composables/services/teachers.service.ts
+++ b/frontend/src/composables/services/teachers.service.ts
@@ -1,101 +1,86 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { Teacher } from '@/types/Teacher.ts'
-import { Response } from '@/types/Response'
-import { type Ref, ref } from 'vue'
-import { endpoints } from '@/config/endpoints.ts'
-import {
-    get,
-    getList,
-    create,
-    deleteId,
-    deleteIdWithData
-} from '@/composables/services/helpers.ts'
+import { Teacher } from '@/types/users/Teacher.ts';
+import { Response } from '@/types/Response';
+import { type Ref, ref } from 'vue';
+import { endpoints } from '@/config/endpoints.ts';
+import { get, getList, create, deleteId, deleteIdWithData } from '@/composables/services/helpers.ts';
+import { useCourses } from '@/composables/services/courses.service.ts';
 
 interface TeacherState {
-    teachers: Ref<Teacher[] | null>
-    teacher: Ref<Teacher | null>
-    response: Ref<Response | null>
-    getTeacherByID: (id: string) => Promise<void>
-    getTeacherByCourse: (courseId: string) => Promise<void>
-    getTeachers: () => Promise<void>
-    teacherJoinCourse: (courseId: string, teacherId: string) => Promise<void>
-    teacherLeaveCourse: (courseId: string, teacherId: string) => Promise<void>
-    createTeacher: (teacherData: Teacher) => Promise<void>
-    deleteTeacher: (id: string) => Promise<void>
+    teachers: Ref<Teacher[] | null>;
+    teacher: Ref<Teacher | null>;
+    response: Ref<Response | null>;
+    getTeacherByID: (id: string, init: boolean) => Promise<void>;
+    getTeacherByCourse: (courseId: string) => Promise<void>;
+    getTeachers: () => Promise<void>;
+    teacherJoinCourse: (courseId: string, teacherId: string) => Promise<void>;
+    teacherLeaveCourse: (courseId: string, teacherId: string) => Promise<void>;
+    createTeacher: (teacherData: Teacher) => Promise<void>;
+    deleteTeacher: (id: string) => Promise<void>;
 }
 
 export function useTeacher(): TeacherState {
-    const teachers = ref<Teacher[] | null>(null)
-    const teacher = ref<Teacher | null>(null)
-    const response = ref<Response | null>(null)
+    /* State */
+    const teachers = ref<Teacher[] | null>(null);
+    const teacher = ref<Teacher | null>(null);
+    const response = ref<Response | null>(null);
 
-    async function getTeacherByID(id: string): Promise<void> {
-        const endpoint = endpoints.teachers.retrieve.replace('{id}', id)
-        await get<Teacher>(endpoint, teacher, Teacher.fromJSON)
+    /* Nested state */
+    const { courses, getCoursesByTeacher } = useCourses();
+
+    async function getTeacherByID(id: string, init: boolean = false): Promise<void> {
+        const endpoint = endpoints.teachers.retrieve.replace('{id}', id);
+        await get<Teacher>(endpoint, teacher, Teacher.fromJSON);
+
+        if (init) {
+            await initTeacher(teacher.value);
+        }
     }
 
     async function getTeacherByCourse(courseId: string): Promise<void> {
-        const endpoint = endpoints.teachers.byCourse.replace(
-            '{courseId}',
-            courseId
-        )
-        await get<Teacher>(endpoint, teacher, Teacher.fromJSON)
+        const endpoint = endpoints.teachers.byCourse.replace('{courseId}', courseId);
+        await get<Teacher>(endpoint, teacher, Teacher.fromJSON);
     }
 
     async function getTeachers(): Promise<void> {
-        const endpoint = endpoints.teachers.index
-        await getList<Teacher>(endpoint, teachers, Teacher.fromJSON)
+        const endpoint = endpoints.teachers.index;
+        await getList<Teacher>(endpoint, teachers, Teacher.fromJSON);
     }
 
-    async function teacherJoinCourse(
-        courseId: string,
-        teacherId: string
-    ): Promise<void> {
-        const endpoint = endpoints.teachers.byCourse.replace(
-            '{courseId}',
-            courseId
-        )
-        await create<Response>(
-            endpoint,
-            { teacherId },
-            response,
-            Response.fromJSON
-        )
+    async function teacherJoinCourse(courseId: string, teacherId: string): Promise<void> {
+        const endpoint = endpoints.teachers.byCourse.replace('{courseId}', courseId);
+        await create<Response>(endpoint, { teacherId }, response, Response.fromJSON);
     }
 
-    async function teacherLeaveCourse(
-        courseId: string,
-        teacherId: string
-    ): Promise<void> {
-        const endpoint = endpoints.teachers.byCourse.replace(
-            '{courseId}',
-            courseId
-        )
-        await deleteIdWithData<Response>(
-            endpoint,
-            { teacherId },
-            response,
-            Response.fromJSON
-        )
+    async function teacherLeaveCourse(courseId: string, teacherId: string): Promise<void> {
+        const endpoint = endpoints.teachers.byCourse.replace('{courseId}', courseId);
+        await deleteIdWithData<Response>(endpoint, { teacherId }, response, Response.fromJSON);
     }
 
     async function createTeacher(teacherData: Teacher): Promise<void> {
-        const endpoint = endpoints.teachers.index
+        const endpoint = endpoints.teachers.index;
         await create<Teacher>(
             endpoint,
             {
                 email: teacherData.email,
                 first_name: teacherData.first_name,
-                last_name: teacherData.last_name
+                last_name: teacherData.last_name,
             },
             teacher,
-            Teacher.fromJSON
-        )
+            Teacher.fromJSON,
+        );
     }
 
     async function deleteTeacher(id: string): Promise<void> {
-        const endpoint = endpoints.students.retrieve.replace('{id}', id)
-        await deleteId<Teacher>(endpoint, teacher, Teacher.fromJSON)
+        const endpoint = endpoints.students.retrieve.replace('{id}', id);
+        await deleteId<Teacher>(endpoint, teacher, Teacher.fromJSON);
+    }
+
+    async function initTeacher(teacher: Teacher|null) {
+        if (teacher !== null)  {
+            await getCoursesByTeacher(teacher.id);
+            teacher.courses = courses.value ?? [];
+        }
     }
 
     return {
@@ -111,6 +96,6 @@ export function useTeacher(): TeacherState {
         deleteTeacher,
 
         teacherJoinCourse,
-        teacherLeaveCourse
-    }
+        teacherLeaveCourse,
+    };
 }
diff --git a/frontend/src/config/endpoints.ts b/frontend/src/config/endpoints.ts
index 87c161bf..9d73f4e7 100644
--- a/frontend/src/config/endpoints.ts
+++ b/frontend/src/config/endpoints.ts
@@ -6,8 +6,8 @@ export const endpoints = {
         token: {
             refresh: '/api/auth/token/refresh/',
             verify: '/api/auth/token/verify/',
-            obtain: '/api/auth/token/'
-        }
+            obtain: '/api/auth/token/',
+        },
     },
     courses: {
         index: '/api/courses/',
@@ -15,49 +15,49 @@ export const endpoints = {
         byStudent: '/api/students/{studentId}/courses/',
         byTeacher: '/api/teachers/{teacherId}/courses/',
         byAssistant: '/api/assistants/{assistantId}/courses/',
-        clone: '/api/courses/{courseId}/clone/'
+        clone: '/api/courses/{courseId}/clone/',
     },
     students: {
         index: '/api/students/',
         retrieve: '/api/students/{id}/',
         byCourse: '/api/courses/{courseId}/students/',
-        byGroup: '/api/groups/{groupId}/students/'
+        byGroup: '/api/groups/{groupId}/students/',
     },
     teachers: {
         index: '/api/teachers/',
         retrieve: '/api/teachers/{id}/',
-        byCourse: '/api/courses/{courseId}/teachers/'
+        byCourse: '/api/courses/{courseId}/teachers/',
     },
     assistants: {
         index: '/api/assistants/',
         retrieve: '/api/assistants/{id}/',
-        byCourse: '/api/courses/{courseId}/assistants/'
+        byCourse: '/api/courses/{courseId}/assistants/',
     },
     admins: {
         index: '/api/admins/',
-        retrieve: '/api/admins/{id}/'
+        retrieve: '/api/admins/{id}/',
     },
     faculties: {
         index: '/api/faculties/',
-        retrieve: '/api/faculties/{name}'
+        retrieve: '/api/faculties/{name}',
     },
     groups: {
         retrieve: '/api/groups/{id}/',
         byProject: '/api/projects/{projectId}/groups/',
-        byStudent: '/api/students/{studentId}/groups/'
+        byStudent: '/api/students/{studentId}/groups/',
     },
     projects: {
         retrieve: '/api/projects/{id}',
-        byCourse: '/api/courses/{courseId}/projects/'
+        byCourse: '/api/courses/{courseId}/projects/',
     },
     submissions: {
         retrieve: '/api/submissions/{id}',
         byProject: '/api/projects/{projectId}/submissions/',
         byGroup: '/api/groups/{groupId}/submissions/',
-        status: '/api/projects/{projectId}/submission_status/'
+        status: '/api/projects/{projectId}/submission_status/',
     },
     structureChecks: {
         retrieve: '/api/structureChecks/{id}',
-        byProject: '/api/projects/{projectId}/structureChecks/'
-    }
-}
+        byProject: '/api/projects/{projectId}/structureChecks/',
+    },
+};
diff --git a/frontend/src/config/environment.ts b/frontend/src/config/environment.ts
index aeae12e3..f274e5ed 100644
--- a/frontend/src/config/environment.ts
+++ b/frontend/src/config/environment.ts
@@ -1 +1 @@
-export const environment = {}
+export const environment = {};
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 9146f01b..2bdc5b4a 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -1,25 +1,25 @@
-import App from '@/views/App.vue'
-import router from '@/router/router'
-import PrimeVue from 'primevue/config'
-import ToastService from 'primevue/toastservice'
-import Ripple from 'primevue/ripple'
-import { i18n } from '@/composables/i18n'
-import { createApp } from 'vue'
-import { createPinia } from 'pinia'
+import App from '@/views/App.vue';
+import router from '@/router/router';
+import PrimeVue from 'primevue/config';
+import ToastService from 'primevue/toastservice';
+import Ripple from 'primevue/ripple';
+import { i18n } from '@/composables/i18n';
+import { createApp } from 'vue';
+import { createPinia } from 'pinia';
 
 /* Create the application */
 // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-const app = createApp(App)
+const app = createApp(App);
 
 /* Bind application plugins */
-app.use(createPinia())
-app.use(i18n)
-app.use(router)
-app.use(PrimeVue, { ripple: true })
-app.use(ToastService)
+app.use(createPinia());
+app.use(i18n);
+app.use(router);
+app.use(PrimeVue, { ripple: true });
+app.use(ToastService);
 
 /* Bind app directives */
-app.directive('ripple', Ripple)
+app.directive('ripple', Ripple);
 
 /* Mount the application */
-app.mount('#app')
+app.mount('#app');
diff --git a/frontend/src/router/guards/authentication.guard.ts b/frontend/src/router/guards/authentication.guard.ts
index f03461ba..a7c2faae 100644
--- a/frontend/src/router/guards/authentication.guard.ts
+++ b/frontend/src/router/guards/authentication.guard.ts
@@ -1,22 +1,20 @@
-import { type RouteLocationNormalized } from 'vue-router'
-import { useAuthStore } from '@/store/authentication.store.ts'
-import { storeToRefs } from 'pinia'
+import { type RouteLocationNormalized } from 'vue-router';
+import { useAuthStore } from '@/store/authentication.store.ts';
+import { storeToRefs } from 'pinia';
 
-export async function AuthenticationGuard(
-    to: RouteLocationNormalized
-): Promise<{ name: string } | undefined> {
-    const { refresh } = useAuthStore()
-    const { intent } = storeToRefs(useAuthStore())
+export async function AuthenticationGuard(to: RouteLocationNormalized): Promise<{ name: string } | undefined> {
+    const { refresh } = useAuthStore();
+    const { intent } = storeToRefs(useAuthStore());
 
-    const { isAuthenticated } = storeToRefs(useAuthStore())
+    const { isAuthenticated } = storeToRefs(useAuthStore());
 
     if (!['login', 'verify'].includes(to.name as string)) {
         if (!isAuthenticated.value) {
-            await refresh()
+            await refresh();
 
             if (!isAuthenticated.value) {
-                intent.value = to.fullPath
-                return { name: 'login' }
+                intent.value = to.fullPath;
+                return { name: 'login' };
             }
         }
     }
diff --git a/frontend/src/router/guards/logout.guard.ts b/frontend/src/router/guards/logout.guard.ts
index 166c528e..158faf3c 100644
--- a/frontend/src/router/guards/logout.guard.ts
+++ b/frontend/src/router/guards/logout.guard.ts
@@ -1,15 +1,8 @@
-import {
-    type NavigationGuardNext,
-    type RouteLocationNormalized
-} from 'vue-router'
-import { useAuthStore } from '@/store/authentication.store.ts'
+import { type NavigationGuardNext, type RouteLocationNormalized } from 'vue-router';
+import { useAuthStore } from '@/store/authentication.store.ts';
 
-export async function LogoutGuard(
-    _1: RouteLocationNormalized,
-    _2: RouteLocationNormalized,
-    next: NavigationGuardNext
-): Promise<void> {
-    await useAuthStore().logout()
+export async function LogoutGuard(_1: RouteLocationNormalized, _2: RouteLocationNormalized, next: NavigationGuardNext): Promise<void> {
+    await useAuthStore().logout();
 
-    next({ name: 'login' })
+    next({ name: 'login' });
 }
diff --git a/frontend/src/router/router.ts b/frontend/src/router/router.ts
index 8641ec29..560085cc 100644
--- a/frontend/src/router/router.ts
+++ b/frontend/src/router/router.ts
@@ -1,17 +1,17 @@
 // import { useUserStore } from '@/stores/userStore';
 // TODO: after pinia setup is done
 
-import DashboardView from '@/views/dashboard/DashboardView.vue'
-import CourseView from '@/views/courses/CourseView.vue'
-import CreateCourseView from '@/views/courses/CreateCourseView.vue'
-import Dummy from '@/components/Dummy.vue'
-import LoginView from '@/views/authentication/LoginView.vue'
-import CalendarView from '@/views/calendar/CalendarView.vue'
-import VerifyView from '@/views/authentication/VerifyView.vue'
-import { type RouteRecordRaw, createWebHistory, createRouter } from 'vue-router'
-import { AuthenticationGuard } from '@/router/guards/authentication.guard.ts'
-import { LogoutGuard } from '@/router/guards/logout.guard.ts'
-import ProjectView from '@/views/projects/ProjectView.vue'
+import DashboardView from '@/views/dashboard/DashboardView.vue';
+import CourseView from '@/views/courses/CourseView.vue';
+import CreateCourseView from '@/views/courses/CreateCourseView.vue';
+import Dummy from '@/components/Dummy.vue';
+import LoginView from '@/views/authentication/LoginView.vue';
+import CalendarView from '@/views/calendar/CalendarView.vue';
+import VerifyView from '@/views/authentication/VerifyView.vue';
+import { type RouteRecordRaw, createWebHistory, createRouter } from 'vue-router';
+import { AuthenticationGuard } from '@/router/guards/authentication.guard.ts';
+import { LogoutGuard } from '@/router/guards/logout.guard.ts';
+import ProjectView from '@/views/projects/ProjectView.vue';
 
 const routes: RouteRecordRaw[] = [
     // Authentication
@@ -23,9 +23,9 @@ const routes: RouteRecordRaw[] = [
             {
                 path: 'logout',
                 component: { beforeRouteEnter: LogoutGuard },
-                name: 'logout'
-            }
-        ]
+                name: 'logout',
+            },
+        ],
     },
 
     { path: '/', component: DashboardView, name: 'dashboard' },
@@ -38,7 +38,7 @@ const routes: RouteRecordRaw[] = [
             {
                 path: 'create',
                 component: CreateCourseView,
-                name: 'course-create'
+                name: 'course-create',
             },
             // Single course
             {
@@ -54,7 +54,7 @@ const routes: RouteRecordRaw[] = [
                             {
                                 path: 'create',
                                 component: Dummy,
-                                name: 'project-create'
+                                name: 'project-create',
                             },
                             // Single project
                             {
@@ -63,30 +63,30 @@ const routes: RouteRecordRaw[] = [
                                     {
                                         path: '',
                                         component: ProjectView,
-                                        name: 'project'
+                                        name: 'project',
                                     },
                                     {
                                         path: 'edit',
                                         component: Dummy,
-                                        name: 'project-edit'
+                                        name: 'project-edit',
                                     },
                                     {
                                         path: 'groups',
                                         component: Dummy,
-                                        name: 'project-groups'
+                                        name: 'project-groups',
                                     },
                                     {
                                         path: 'submit',
                                         component: Dummy,
-                                        name: 'project-submit'
-                                    }
-                                ]
-                            }
-                        ]
-                    }
-                ]
-            }
-        ]
+                                        name: 'project-submit',
+                                    },
+                                ],
+                            },
+                        ],
+                    },
+                ],
+            },
+        ],
     },
 
     // Calendar
@@ -101,31 +101,31 @@ const routes: RouteRecordRaw[] = [
                 path: 'students',
                 children: [
                     { path: '', component: Dummy, name: 'students' },
-                    { path: ':id', component: Dummy, name: 'student' }
-                ]
+                    { path: ':id', component: Dummy, name: 'student' },
+                ],
             },
             {
                 path: 'admins',
                 children: [
                     { path: '', component: Dummy, name: 'admins' },
-                    { path: ':id', component: Dummy, name: 'admin' }
-                ]
+                    { path: ':id', component: Dummy, name: 'admin' },
+                ],
             },
             {
                 path: 'teachers',
                 children: [
                     { path: '', component: Dummy, name: 'teachers' },
-                    { path: ':id', component: Dummy, name: 'teacher' }
-                ]
+                    { path: ':id', component: Dummy, name: 'teacher' },
+                ],
             },
             {
                 path: 'assistants',
                 children: [
                     { path: '', component: Dummy, name: 'assistants' },
-                    { path: ':id', component: Dummy, name: 'assistant' }
-                ]
-            }
-        ]
+                    { path: ':id', component: Dummy, name: 'assistant' },
+                ],
+            },
+        ],
     },
 
     // Faculties
@@ -139,19 +139,19 @@ const routes: RouteRecordRaw[] = [
     // Authentication
     {
         path: '/auth/',
-        children: [{ path: 'login', component: LoginView, name: 'login' }]
+        children: [{ path: 'login', component: LoginView, name: 'login' }],
     },
 
     // Page not found: redirect to dashboard
-    { path: '/:pathMatch(.*)*', redirect: { name: 'dashboard' } }
-]
+    { path: '/:pathMatch(.*)*', redirect: { name: 'dashboard' } },
+];
 
 const router = createRouter({
     history: createWebHistory(),
     linkActiveClass: 'active',
-    routes
-})
+    routes,
+});
 
-router.beforeEach(AuthenticationGuard)
+router.beforeEach(AuthenticationGuard);
 
-export default router
+export default router;
diff --git a/frontend/src/store/authentication.store.ts b/frontend/src/store/authentication.store.ts
index 43afe925..ce8f95ae 100644
--- a/frontend/src/store/authentication.store.ts
+++ b/frontend/src/store/authentication.store.ts
@@ -1,82 +1,70 @@
-import axios from 'axios'
-import { defineStore } from 'pinia'
-import { type Role, User } from '@/types/User.ts'
-import { endpoints } from '@/config/endpoints.ts'
-import { useMessagesStore } from '@/store/messages.store.ts'
-import { client } from '@/composables/axios.ts'
-import { useLocalStorage } from '@vueuse/core'
-import { useCourses } from '@/composables/services/courses.service'
-import { computed, ref, watch } from 'vue'
-import { useAssistant } from '@/composables/services/assistant.service'
-import { useStudents } from '@/composables/services/students.service'
-import { useTeacher } from '@/composables/services/teachers.service'
+import axios from 'axios';
+import { defineStore } from 'pinia';
+import { type Role, User } from '@/types/users/User.ts';
+import { endpoints } from '@/config/endpoints.ts';
+import { useMessagesStore } from '@/store/messages.store.ts';
+import { client } from '@/composables/axios.ts';
+import { useLocalStorage } from '@vueuse/core';
+import { computed, ref, watch } from 'vue';
+import { useAssistant } from '@/composables/services/assistant.service';
+import { useStudents } from '@/composables/services/students.service';
+import { useTeacher } from '@/composables/services/teachers.service';
+import { type Teacher } from '@/types/users/Teacher.ts';
+import { type Student } from '@/types/users/Student.ts';
+import { type Assistant } from '@/types/users/Assistant.ts';
 
 export const useAuthStore = defineStore('auth', () => {
     /* Stores */
-    const user = ref<User | null>(null)
-    const view = useLocalStorage<Role | null>('view', null)
-    const intent = useLocalStorage<string>('intent', '/')
+    const user = ref<User | Teacher | Student | Assistant | null>(null);
+    const view = useLocalStorage<Role | null>('view', null);
+    const intent = useLocalStorage<string>('intent', '/');
 
     /* Services */
-    const {
-        courses,
-        getCoursesByTeacher,
-        getCoursesByStudent,
-        getCourseByAssistant
-    } = useCourses()
-    const { assistant, getAssistantByID } = useAssistant()
-    const { student, getStudentByID } = useStudents()
-    const { teacher, getTeacherByID } = useTeacher()
+    const { assistant, getAssistantByID } = useAssistant();
+    const { student, getStudentByID } = useStudents();
+    const { teacher, getTeacherByID } = useTeacher();
 
     /* Update the user object when the view changes. */
     watch(view, async () => {
-        initUser()
-    })
+        await initUser();
+    });
 
-    const initUser = async (): Promise<void> => {
+    /**
+     * Initialize the user object depending on the role.
+     *
+     */
+    async function initUser(): Promise<void> {
         if (user.value !== null) {
             if (view.value === 'teacher') {
                 // Get the teacher information.
-                await getTeacherByID(user.value.id)
-
-                // Get the courses for the teacher.
-                await getCoursesByTeacher(user.value.id)
+                await getTeacherByID(user.value.id, true);
 
                 // Set the user object with the teacher information.
                 if (teacher.value !== undefined && teacher.value !== null) {
-                    teacher.value.courses = courses.value ?? []
-                    teacher.value.roles = user.value.roles
+                    teacher.value.roles = user.value.roles;
                 }
 
-                user.value = teacher.value
+                user.value = teacher.value;
             } else if (view.value === 'student') {
                 // Get the student information.
-                await getStudentByID(user.value.id)
-
-                // Get the courses for the student.
-                await getCoursesByStudent(user.value.id)
+                await getStudentByID(user.value.id, true);
 
                 // Set the user object with the student information.
                 if (student.value !== undefined && student.value !== null) {
-                    student.value.courses = courses.value ?? []
-                    student.value.roles = user.value.roles
+                    student.value.roles = user.value.roles;
                 }
 
-                user.value = student.value
+                user.value = student.value;
             } else {
                 // Get the assistant information.
-                await getAssistantByID(user.value.id)
-
-                // Get the courses for the assistant.
-                await getCourseByAssistant(user.value.id)
+                await getAssistantByID(user.value.id, true);
 
                 // Set the user object with the assistant information.
                 if (assistant.value !== undefined && assistant.value !== null) {
-                    assistant.value.courses = courses.value ?? []
-                    assistant.value.roles = user.value.roles
+                    assistant.value.roles = user.value.roles;
                 }
 
-                user.value = assistant.value
+                user.value = assistant.value;
             }
         }
     }
@@ -88,27 +76,27 @@ export const useAuthStore = defineStore('auth', () => {
      */
     async function login(ticket: string): Promise<void> {
         // Display toast messages.
-        const { add } = useMessagesStore()
+        const { add } = useMessagesStore();
 
         // Attempt to log in the user using the ticket.
         await axios
             .post(endpoints.auth.token.obtain, {
-                ticket
+                ticket,
             })
             .then(() => {
                 add({
                     severity: 'success',
                     summary: 'Success',
-                    detail: 'You have successfully logged in.'
-                })
+                    detail: 'You have successfully logged in.',
+                });
             })
             .catch((error) => {
                 add({
                     severity: 'error',
                     summary: error.response.statusText,
-                    detail: error.response.data.detail
-                })
-            })
+                    detail: error.response.data.detail,
+                });
+            });
     }
 
     /**
@@ -116,50 +104,50 @@ export const useAuthStore = defineStore('auth', () => {
      */
     async function refresh(): Promise<void> {
         // Display toast messages.
-        const { add } = useMessagesStore()
+        const { add } = useMessagesStore();
 
         // Get the user information (using a cookie).
         await axios
             .get(endpoints.auth.whoami)
-            .then((response) => {
-                user.value = User.fromJSON(response.data as User)
+            .then(async (response) => {
+                user.value = User.fromJSON(response.data as User);
 
                 if (view.value === null) {
-                    view.value = user.value.roles[0]
+                    view.value = user.value.roles[0];
                 }
 
                 // Init the user depending on the role selected.
-                initUser()
+                await initUser();
             })
             .catch((error) => {
                 add({
                     severity: 'error',
                     summary: error.response.statusText,
-                    detail: error.response.data.detail
-                })
-            })
+                    detail: error.response.data.detail,
+                });
+            });
     }
 
     /**
      * Log out the user.
      */
     async function logout(): Promise<void> {
-        await client.post(endpoints.auth.logout).catch()
-        user.value = null
+        await client.post(endpoints.auth.logout).catch();
+        user.value = null;
     }
 
     /* Getters */
     const isAuthenticated = computed(() => {
-        return user.value !== null
-    })
+        return user.value !== null;
+    });
 
     return {
-        user,
+        user, student, teacher, assistant,
         view,
         intent,
         login,
         refresh,
         logout,
-        isAuthenticated
-    }
-})
+        isAuthenticated,
+    };
+});
diff --git a/frontend/src/store/messages.store.ts b/frontend/src/store/messages.store.ts
index 6e50d4af..3fc75900 100644
--- a/frontend/src/store/messages.store.ts
+++ b/frontend/src/store/messages.store.ts
@@ -1,10 +1,10 @@
-import { ref } from 'vue'
-import { type ToastMessageOptions } from 'primevue/toast'
-import { defineStore } from 'pinia'
+import { ref } from 'vue';
+import { type ToastMessageOptions } from 'primevue/toast';
+import { defineStore } from 'pinia';
 
 export const useMessagesStore = defineStore('messages', () => {
     /* State */
-    const message = ref<ToastMessageOptions | null>(null)
+    const message = ref<ToastMessageOptions | null>(null);
 
     /**
      * Update the toast message.
@@ -12,11 +12,11 @@ export const useMessagesStore = defineStore('messages', () => {
      * @param newMessage
      */
     function add(newMessage: ToastMessageOptions): void {
-        message.value = newMessage
+        message.value = newMessage;
     }
 
     return {
         message,
-        add
-    }
-})
+        add,
+    };
+});
diff --git a/frontend/src/test/e2e/login.cy.ts b/frontend/src/test/e2e/login.cy.ts
index 529b9216..8bf35f54 100644
--- a/frontend/src/test/e2e/login.cy.ts
+++ b/frontend/src/test/e2e/login.cy.ts
@@ -7,24 +7,24 @@ describe('login page', () => {
         // these are e2e tests, they have access to the whole website, not a single component
         // for specific tests, we want to go to a specific parts of the website though
         // we use cy.visit for this, with input an absolute or relative url with https://localhost as current baseUrl
-        cy.visit('/auth/login')
-    })
+        cy.visit('/auth/login');
+    });
 
     it('routes to course when button clicked', () => {
         // we can check for elements in a web page using a selector or the contents of the element you're searching for
-        cy.contains('UGent login') // .click()
+        cy.contains('UGent login'); // .click()
 
         // then you can check whether the new url is correct
         // currently it seems to take too long to load, though
         // cy.url().should("include", "https://login.microsoft.com/")
-    })
+    });
 
     it('routes to dashboard when pressing dashboard button', () => {
-        cy.contains('Dashboard').click()
+        cy.contains('Dashboard').click();
         cy.url()
             // we check whether it ends with "/"
             .should('match', /\/$/)
             // we check whether we're not still on the login page
-            .should('not.include', '/auth/login')
-    })
-})
+            .should('not.include', '/auth/login');
+    });
+});
diff --git a/frontend/src/test/unit/admin_service.test.ts b/frontend/src/test/unit/admin_service.test.ts
index d1d4f29f..415f300d 100644
--- a/frontend/src/test/unit/admin_service.test.ts
+++ b/frontend/src/test/unit/admin_service.test.ts
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { describe, it, expect, beforeEach } from 'vitest'
-import { useAdmin } from '@/composables/services/admins.service.ts'
+import { describe, it, expect, beforeEach } from 'vitest';
+import { useAdmin } from '@/composables/services/admins.service.ts';
 
 const {
     admins,
@@ -9,60 +9,48 @@ const {
     getAdmins,
 
     createAdmin,
-    deleteAdmin
-} = useAdmin()
+    deleteAdmin,
+} = useAdmin();
 
 describe('admin', (): void => {
     it('gets assistant data by id', async () => {
-        await getAdminByID('300201547011')
-        expect(admin.value).not.toBeNull()
-        expect(admin.value?.username).toBe('tverslyp')
-        expect(admin.value?.is_staff).toBe(true)
-        expect(admin.value?.email).toBe('Tybo.Verslype@UGent.be')
-        expect(admin.value?.first_name).toBe('Tybo')
-        expect(admin.value?.last_name).toBe('Verslype')
-        expect(admin.value?.last_enrolled).toBe(2023)
-        expect(admin.value?.last_login).toEqual(
-            new Date('July 23, 2024 01:15:00')
-        )
-        expect(admin.value?.create_time).toEqual(
-            new Date('July 21, 2024 01:15:00')
-        )
-        expect(admin.value?.faculties).toEqual([])
-    })
+        await getAdminByID('300201547011');
+        expect(admin.value).not.toBeNull();
+        expect(admin.value?.username).toBe('tverslyp');
+        expect(admin.value?.is_staff).toBe(true);
+        expect(admin.value?.email).toBe('Tybo.Verslype@UGent.be');
+        expect(admin.value?.first_name).toBe('Tybo');
+        expect(admin.value?.last_name).toBe('Verslype');
+        expect(admin.value?.last_enrolled).toBe(2023);
+        expect(admin.value?.last_login).toEqual(new Date('July 23, 2024 01:15:00'));
+        expect(admin.value?.create_time).toEqual(new Date('July 21, 2024 01:15:00'));
+        expect(admin.value?.faculties).toEqual([]);
+    });
 
     it('gets admins data', async () => {
-        await getAdmins()
-        expect(admins).not.toBeNull()
-        expect(Array.isArray(admins.value)).toBe(true)
-        expect(admins.value?.length).toBe(2)
+        await getAdmins();
+        expect(admins).not.toBeNull();
+        expect(Array.isArray(admins.value)).toBe(true);
+        expect(admins.value?.length).toBe(2);
 
-        expect(admins.value?.[0]?.username).toBe('tverslyp')
-        expect(admins.value?.[0]?.is_staff).toBe(true)
-        expect(admins.value?.[0]?.email).toBe('Tybo.Verslype@UGent.be')
-        expect(admins.value?.[0]?.first_name).toBe('Tybo')
-        expect(admins.value?.[0]?.last_name).toBe('Verslype')
-        expect(admins.value?.[0]?.last_enrolled).toBe(2023)
-        expect(admins.value?.[0]?.last_login).toEqual(
-            new Date('July 23, 2024 01:15:00')
-        )
-        expect(admins.value?.[0]?.create_time).toEqual(
-            new Date('July 21, 2024 01:15:00')
-        )
-        expect(admins.value?.[0]?.faculties).toEqual([])
+        expect(admins.value?.[0]?.username).toBe('tverslyp');
+        expect(admins.value?.[0]?.is_staff).toBe(true);
+        expect(admins.value?.[0]?.email).toBe('Tybo.Verslype@UGent.be');
+        expect(admins.value?.[0]?.first_name).toBe('Tybo');
+        expect(admins.value?.[0]?.last_name).toBe('Verslype');
+        expect(admins.value?.[0]?.last_enrolled).toBe(2023);
+        expect(admins.value?.[0]?.last_login).toEqual(new Date('July 23, 2024 01:15:00'));
+        expect(admins.value?.[0]?.create_time).toEqual(new Date('July 21, 2024 01:15:00'));
+        expect(admins.value?.[0]?.faculties).toEqual([]);
 
-        expect(admins.value?.[1]?.username).toBe('simmig')
-        expect(admins.value?.[1]?.is_staff).toBe(true)
-        expect(admins.value?.[1]?.email).toBe('Simon.Mignolet@UGent.be')
-        expect(admins.value?.[1]?.first_name).toBe('Simon')
-        expect(admins.value?.[1]?.last_name).toBe('Mignolet')
-        expect(admins.value?.[1]?.last_enrolled).toBe(2023)
-        expect(admins.value?.[0]?.last_login).toEqual(
-            new Date('July 23, 2024 01:15:00')
-        )
-        expect(admins.value?.[0]?.create_time).toEqual(
-            new Date('July 21, 2024 01:15:00')
-        )
-        expect(admins.value?.[1]?.faculties).toEqual([])
-    })
-})
+        expect(admins.value?.[1]?.username).toBe('simmig');
+        expect(admins.value?.[1]?.is_staff).toBe(true);
+        expect(admins.value?.[1]?.email).toBe('Simon.Mignolet@UGent.be');
+        expect(admins.value?.[1]?.first_name).toBe('Simon');
+        expect(admins.value?.[1]?.last_name).toBe('Mignolet');
+        expect(admins.value?.[1]?.last_enrolled).toBe(2023);
+        expect(admins.value?.[0]?.last_login).toEqual(new Date('July 23, 2024 01:15:00'));
+        expect(admins.value?.[0]?.create_time).toEqual(new Date('July 21, 2024 01:15:00'));
+        expect(admins.value?.[1]?.faculties).toEqual([]);
+    });
+});
diff --git a/frontend/src/test/unit/assistant_service.test.ts b/frontend/src/test/unit/assistant_service.test.ts
index 6d0d3780..cd8ec120 100644
--- a/frontend/src/test/unit/assistant_service.test.ts
+++ b/frontend/src/test/unit/assistant_service.test.ts
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { describe, it, expect, beforeEach } from 'vitest'
-import { useAssistant } from '@/composables/services/assistant.service.ts'
+import { describe, it, expect, beforeEach } from 'vitest';
+import { useAssistant } from '@/composables/services/assistant.service.ts';
 
 const {
     assistants,
@@ -15,90 +15,80 @@ const {
     deleteAssistant,
 
     assistantJoinCourse,
-    assistantLeaveCourse
-} = useAssistant()
+    assistantLeaveCourse,
+} = useAssistant();
 
 describe('assistant', (): void => {
     it('gets assistant data by id', async () => {
-        await getAssistantByID('235')
-        expect(assistant.value).not.toBeNull()
-        expect(assistant.value?.username).toBe('bsimpson')
-        expect(assistant.value?.is_staff).toBe(false)
-        expect(assistant.value?.email).toBe('Bart.Simpson@gmail.be')
-        expect(assistant.value?.first_name).toBe('Bart')
-        expect(assistant.value?.last_name).toBe('Simpson')
-        expect(assistant.value?.last_enrolled).toBe(2023)
-        expect(assistant.value?.last_login).toBeNull()
-        expect(assistant.value?.create_time).toEqual(
-            new Date('July 21, 2024 01:15:00')
-        )
-        expect(assistant.value?.courses).toEqual([])
-        expect(assistant.value?.faculties).toEqual([])
-    })
+        await getAssistantByID('235');
+        expect(assistant.value).not.toBeNull();
+        expect(assistant.value?.username).toBe('bsimpson');
+        expect(assistant.value?.is_staff).toBe(false);
+        expect(assistant.value?.email).toBe('Bart.Simpson@gmail.be');
+        expect(assistant.value?.first_name).toBe('Bart');
+        expect(assistant.value?.last_name).toBe('Simpson');
+        expect(assistant.value?.last_enrolled).toBe(2023);
+        expect(assistant.value?.last_login).toBeNull();
+        expect(assistant.value?.create_time).toEqual(new Date('July 21, 2024 01:15:00'));
+        expect(assistant.value?.courses).toEqual([]);
+        expect(assistant.value?.faculties).toEqual([]);
+    });
 
     it('gets assistants data', async () => {
-        await getAssistants()
-        expect(assistants).not.toBeNull()
-        expect(Array.isArray(assistants.value)).toBe(true)
-        expect(assistants.value?.length).toBe(2)
+        await getAssistants();
+        expect(assistants).not.toBeNull();
+        expect(Array.isArray(assistants.value)).toBe(true);
+        expect(assistants.value?.length).toBe(2);
 
-        expect(assistants.value?.[0]?.username).toBe('bsimpson')
-        expect(assistants.value?.[0]?.is_staff).toBe(false)
-        expect(assistants.value?.[0]?.email).toBe('Bart.Simpson@gmail.be')
-        expect(assistants.value?.[0]?.first_name).toBe('Bart')
-        expect(assistants.value?.[0]?.last_name).toBe('Simpson')
-        expect(assistants.value?.[0]?.last_enrolled).toBe(2023)
-        expect(assistants.value?.[0]?.last_login).toBeNull()
-        expect(assistants.value?.[0]?.create_time).toEqual(
-            new Date('July 21, 2024 01:15:00')
-        )
-        expect(assistants.value?.[0]?.courses).toEqual([])
-        expect(assistants.value?.[0]?.faculties).toEqual([])
+        expect(assistants.value?.[0]?.username).toBe('bsimpson');
+        expect(assistants.value?.[0]?.is_staff).toBe(false);
+        expect(assistants.value?.[0]?.email).toBe('Bart.Simpson@gmail.be');
+        expect(assistants.value?.[0]?.first_name).toBe('Bart');
+        expect(assistants.value?.[0]?.last_name).toBe('Simpson');
+        expect(assistants.value?.[0]?.last_enrolled).toBe(2023);
+        expect(assistants.value?.[0]?.last_login).toBeNull();
+        expect(assistants.value?.[0]?.create_time).toEqual(new Date('July 21, 2024 01:15:00'));
+        expect(assistants.value?.[0]?.courses).toEqual([]);
+        expect(assistants.value?.[0]?.faculties).toEqual([]);
 
-        expect(assistants.value?.[1]?.username).toBe('kclijster')
-        expect(assistants.value?.[1]?.is_staff).toBe(false)
-        expect(assistants.value?.[1]?.email).toBe('Kim.Clijsters@gmail.be')
-        expect(assistants.value?.[1]?.first_name).toBe('Kim')
-        expect(assistants.value?.[1]?.last_name).toBe('Clijsters')
-        expect(assistants.value?.[1]?.last_enrolled).toBe(2023)
-        expect(assistants.value?.[0]?.last_login).toBeNull()
-        expect(assistants.value?.[0]?.create_time).toEqual(
-            new Date('July 21, 2024 01:15:00')
-        )
-        expect(assistants.value?.[1]?.courses).toEqual([])
-        expect(assistants.value?.[1]?.faculties).toEqual([])
-    })
+        expect(assistants.value?.[1]?.username).toBe('kclijster');
+        expect(assistants.value?.[1]?.is_staff).toBe(false);
+        expect(assistants.value?.[1]?.email).toBe('Kim.Clijsters@gmail.be');
+        expect(assistants.value?.[1]?.first_name).toBe('Kim');
+        expect(assistants.value?.[1]?.last_name).toBe('Clijsters');
+        expect(assistants.value?.[1]?.last_enrolled).toBe(2023);
+        expect(assistants.value?.[0]?.last_login).toBeNull();
+        expect(assistants.value?.[0]?.create_time).toEqual(new Date('July 21, 2024 01:15:00'));
+        expect(assistants.value?.[1]?.courses).toEqual([]);
+        expect(assistants.value?.[1]?.faculties).toEqual([]);
+    });
 
     it('gets assistants data by course', async () => {
-        await getAssistantByCourse('1')
-        expect(assistants).not.toBeNull()
-        expect(Array.isArray(assistants.value)).toBe(true)
-        expect(assistants.value?.length).toBe(2)
+        await getAssistantByCourse('1');
+        expect(assistants).not.toBeNull();
+        expect(Array.isArray(assistants.value)).toBe(true);
+        expect(assistants.value?.length).toBe(2);
 
-        expect(assistants.value?.[0]?.username).toBe('bsimpson')
-        expect(assistants.value?.[0]?.is_staff).toBe(false)
-        expect(assistants.value?.[0]?.email).toBe('Bart.Simpson@gmail.be')
-        expect(assistants.value?.[0]?.first_name).toBe('Bart')
-        expect(assistants.value?.[0]?.last_name).toBe('Simpson')
-        expect(assistants.value?.[0]?.last_enrolled).toBe(2023)
-        expect(assistants.value?.[0]?.last_login).toBeNull()
-        expect(assistants.value?.[0]?.create_time).toEqual(
-            new Date('July 21, 2024 01:15:00')
-        )
-        expect(assistants.value?.[0]?.courses).toEqual([])
-        expect(assistants.value?.[0]?.faculties).toEqual([])
+        expect(assistants.value?.[0]?.username).toBe('bsimpson');
+        expect(assistants.value?.[0]?.is_staff).toBe(false);
+        expect(assistants.value?.[0]?.email).toBe('Bart.Simpson@gmail.be');
+        expect(assistants.value?.[0]?.first_name).toBe('Bart');
+        expect(assistants.value?.[0]?.last_name).toBe('Simpson');
+        expect(assistants.value?.[0]?.last_enrolled).toBe(2023);
+        expect(assistants.value?.[0]?.last_login).toBeNull();
+        expect(assistants.value?.[0]?.create_time).toEqual(new Date('July 21, 2024 01:15:00'));
+        expect(assistants.value?.[0]?.courses).toEqual([]);
+        expect(assistants.value?.[0]?.faculties).toEqual([]);
 
-        expect(assistants.value?.[1]?.username).toBe('kclijster')
-        expect(assistants.value?.[1]?.is_staff).toBe(false)
-        expect(assistants.value?.[1]?.email).toBe('Kim.Clijsters@gmail.be')
-        expect(assistants.value?.[1]?.first_name).toBe('Kim')
-        expect(assistants.value?.[1]?.last_name).toBe('Clijsters')
-        expect(assistants.value?.[1]?.last_enrolled).toBe(2023)
-        expect(assistants.value?.[0]?.last_login).toBeNull()
-        expect(assistants.value?.[0]?.create_time).toEqual(
-            new Date('July 21, 2024 01:15:00')
-        )
-        expect(assistants.value?.[1]?.courses).toEqual([])
-        expect(assistants.value?.[1]?.faculties).toEqual([])
-    })
-})
+        expect(assistants.value?.[1]?.username).toBe('kclijster');
+        expect(assistants.value?.[1]?.is_staff).toBe(false);
+        expect(assistants.value?.[1]?.email).toBe('Kim.Clijsters@gmail.be');
+        expect(assistants.value?.[1]?.first_name).toBe('Kim');
+        expect(assistants.value?.[1]?.last_name).toBe('Clijsters');
+        expect(assistants.value?.[1]?.last_enrolled).toBe(2023);
+        expect(assistants.value?.[0]?.last_login).toBeNull();
+        expect(assistants.value?.[0]?.create_time).toEqual(new Date('July 21, 2024 01:15:00'));
+        expect(assistants.value?.[1]?.courses).toEqual([]);
+        expect(assistants.value?.[1]?.faculties).toEqual([]);
+    });
+});
diff --git a/frontend/src/test/unit/course_service.test.ts b/frontend/src/test/unit/course_service.test.ts
index b69e1306..a29d109c 100644
--- a/frontend/src/test/unit/course_service.test.ts
+++ b/frontend/src/test/unit/course_service.test.ts
@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { describe, it, expect } from 'vitest'
-import { Course } from '@/types/Course.ts'
+import { describe, it, expect } from 'vitest';
+import { Course } from '@/types/Course.ts';
 
-import { useCourses } from '@/composables/services/courses.service.ts'
+import { useCourses } from '@/composables/services/courses.service.ts';
 
 const {
     courses,
@@ -14,8 +14,8 @@ const {
 
     createCourse,
     cloneCourse,
-    deleteCourse
-} = useCourses()
+    deleteCourse,
+} = useCourses();
 
 // "describe" bundles tests about 1 specific thing; here we're testing course
 // aka a test suite
@@ -24,127 +24,127 @@ describe('course', (): void => {
     // you can also import "test" instead of "it", because it's the exact same
     // but with "it", it's easy to read => it (referring to the course) returns correct course year
     it('returns correct course year', (): void => {
-        const course: Course = new Course('1', 'course', 'description', 2003)
+        const course: Course = new Course('1', 'course', 'description', 2003);
         // use expect for assertions
         // after expect, there are a multitude of possible functions such as:
         // toBe, toEqual, toContain
         // check https://vitest.dev/api/expect.html for all possibilities
-        expect(course.getCourseYear()).toBe('2003 - 2004')
+        expect(course.getCourseYear()).toBe('2003 - 2004');
         // assert can also be used instead, if you like its syntax more
         // check out https://vitest.dev/api/assert.html for more info
-    })
+    });
 
     it('gets course data by id', async () => {
-        await getCourseByID('1')
-        expect(course.value).not.toBeNull()
-        expect(course.value?.name).toBe('Math')
-        expect(course.value?.parent_course).toBeNull()
-        expect(course.value?.academic_startyear).toBe(2023)
-        expect(course.value?.description).toBe('Math course')
-        expect(course.value?.students).toEqual([])
-        expect(course.value?.teachers).toEqual([])
-        expect(course.value?.assistants).toEqual([])
-        expect(course.value?.projects).toEqual([])
-    })
+        await getCourseByID('1');
+        expect(course.value).not.toBeNull();
+        expect(course.value?.name).toBe('Math');
+        expect(course.value?.parent_course).toBeNull();
+        expect(course.value?.academic_startyear).toBe(2023);
+        expect(course.value?.description).toBe('Math course');
+        expect(course.value?.students).toEqual([]);
+        expect(course.value?.teachers).toEqual([]);
+        expect(course.value?.assistants).toEqual([]);
+        expect(course.value?.projects).toEqual([]);
+    });
 
     it('gets courses data', async () => {
-        await getCourses()
-        expect(courses.value).not.toBeNull()
-        expect(courses.value?.[0]?.name).toBe('Math')
-        expect(courses.value?.[0]?.parent_course).toBeNull()
-        expect(courses.value?.[0]?.academic_startyear).toBe(2023)
-        expect(courses.value?.[0]?.description).toBe('Math course')
-        expect(courses.value?.[0]?.students).toEqual([])
-        expect(courses.value?.[0]?.teachers).toEqual([])
-        expect(courses.value?.[0]?.assistants).toEqual([])
-        expect(courses.value?.[0]?.projects).toEqual([])
-
-        expect(courses.value?.[1]?.name).toBe('Sel2')
-        expect(courses.value?.[1]?.parent_course).toBe('3')
-        expect(courses.value?.[1]?.academic_startyear).toBe(2023)
-        expect(courses.value?.[1]?.description).toBe('Software course')
-        expect(courses.value?.[1]?.students).toEqual([])
-        expect(courses.value?.[1]?.teachers).toEqual([])
-        expect(courses.value?.[1]?.assistants).toEqual([])
-        expect(courses.value?.[1]?.projects).toEqual([])
-
-        expect(courses.value?.[2]?.name).toBe('Sel1')
-        expect(courses.value?.[2]?.parent_course).toBeNull()
-        expect(courses.value?.[2]?.academic_startyear).toBe(2022)
-        expect(courses.value?.[2]?.description).toBe('Software course')
-        expect(courses.value?.[2]?.students).toEqual([])
-        expect(courses.value?.[2]?.teachers).toEqual([])
-        expect(courses.value?.[2]?.assistants).toEqual([])
-        expect(courses.value?.[2]?.projects).toEqual([])
-
-        expect(courses.value?.[3]?.name).toBe('Math')
-        expect(courses.value?.[3]?.parent_course).toBe('1')
-        expect(courses.value?.[3]?.academic_startyear).toBe(2024)
-        expect(courses.value?.[3]?.description).toBe('Math course')
-        expect(courses.value?.[3]?.students).toEqual([])
-        expect(courses.value?.[3]?.teachers).toEqual([])
-        expect(courses.value?.[3]?.assistants).toEqual([])
-        expect(courses.value?.[3]?.projects).toEqual([])
-
-        expect(courses.value?.[4]?.name).toBe('Math')
-        expect(courses.value?.[4]?.parent_course).toBe('12')
-        expect(courses.value?.[4]?.academic_startyear).toBe(2025)
-        expect(courses.value?.[4]?.description).toBe('Math course')
-        expect(courses.value?.[4]?.students).toEqual([])
-        expect(courses.value?.[4]?.teachers).toEqual([])
-        expect(courses.value?.[4]?.assistants).toEqual([])
-        expect(courses.value?.[4]?.projects).toEqual([])
-
-        expect(courses.value?.[5]?.name).toBe('Club brugge')
-        expect(courses.value?.[5]?.parent_course).toBeNull()
-        expect(courses.value?.[5]?.academic_startyear).toBe(2023)
-        expect(courses.value?.[5]?.description).toBeNull()
-        expect(courses.value?.[5]?.students).toEqual([])
-        expect(courses.value?.[5]?.teachers).toEqual([])
-        expect(courses.value?.[5]?.assistants).toEqual([])
-        expect(courses.value?.[5]?.projects).toEqual([])
-
-        expect(courses.value?.[6]?.name).toBe('vergeet barbara')
-        expect(courses.value?.[6]?.parent_course).toBeNull()
-        expect(courses.value?.[6]?.academic_startyear).toBe(2023)
-        expect(courses.value?.[6]?.description).toBeNull()
-        expect(courses.value?.[6]?.students).toEqual([])
-        expect(courses.value?.[6]?.teachers).toEqual([])
-        expect(courses.value?.[6]?.assistants).toEqual([])
-        expect(courses.value?.[6]?.projects).toEqual([])
-    })
+        await getCourses();
+        expect(courses.value).not.toBeNull();
+        expect(courses.value?.[0]?.name).toBe('Math');
+        expect(courses.value?.[0]?.parent_course).toBeNull();
+        expect(courses.value?.[0]?.academic_startyear).toBe(2023);
+        expect(courses.value?.[0]?.description).toBe('Math course');
+        expect(courses.value?.[0]?.students).toEqual([]);
+        expect(courses.value?.[0]?.teachers).toEqual([]);
+        expect(courses.value?.[0]?.assistants).toEqual([]);
+        expect(courses.value?.[0]?.projects).toEqual([]);
+
+        expect(courses.value?.[1]?.name).toBe('Sel2');
+        expect(courses.value?.[1]?.parent_course).toBe('3');
+        expect(courses.value?.[1]?.academic_startyear).toBe(2023);
+        expect(courses.value?.[1]?.description).toBe('Software course');
+        expect(courses.value?.[1]?.students).toEqual([]);
+        expect(courses.value?.[1]?.teachers).toEqual([]);
+        expect(courses.value?.[1]?.assistants).toEqual([]);
+        expect(courses.value?.[1]?.projects).toEqual([]);
+
+        expect(courses.value?.[2]?.name).toBe('Sel1');
+        expect(courses.value?.[2]?.parent_course).toBeNull();
+        expect(courses.value?.[2]?.academic_startyear).toBe(2022);
+        expect(courses.value?.[2]?.description).toBe('Software course');
+        expect(courses.value?.[2]?.students).toEqual([]);
+        expect(courses.value?.[2]?.teachers).toEqual([]);
+        expect(courses.value?.[2]?.assistants).toEqual([]);
+        expect(courses.value?.[2]?.projects).toEqual([]);
+
+        expect(courses.value?.[3]?.name).toBe('Math');
+        expect(courses.value?.[3]?.parent_course).toBe('1');
+        expect(courses.value?.[3]?.academic_startyear).toBe(2024);
+        expect(courses.value?.[3]?.description).toBe('Math course');
+        expect(courses.value?.[3]?.students).toEqual([]);
+        expect(courses.value?.[3]?.teachers).toEqual([]);
+        expect(courses.value?.[3]?.assistants).toEqual([]);
+        expect(courses.value?.[3]?.projects).toEqual([]);
+
+        expect(courses.value?.[4]?.name).toBe('Math');
+        expect(courses.value?.[4]?.parent_course).toBe('12');
+        expect(courses.value?.[4]?.academic_startyear).toBe(2025);
+        expect(courses.value?.[4]?.description).toBe('Math course');
+        expect(courses.value?.[4]?.students).toEqual([]);
+        expect(courses.value?.[4]?.teachers).toEqual([]);
+        expect(courses.value?.[4]?.assistants).toEqual([]);
+        expect(courses.value?.[4]?.projects).toEqual([]);
+
+        expect(courses.value?.[5]?.name).toBe('Club brugge');
+        expect(courses.value?.[5]?.parent_course).toBeNull();
+        expect(courses.value?.[5]?.academic_startyear).toBe(2023);
+        expect(courses.value?.[5]?.description).toBeNull();
+        expect(courses.value?.[5]?.students).toEqual([]);
+        expect(courses.value?.[5]?.teachers).toEqual([]);
+        expect(courses.value?.[5]?.assistants).toEqual([]);
+        expect(courses.value?.[5]?.projects).toEqual([]);
+
+        expect(courses.value?.[6]?.name).toBe('vergeet barbara');
+        expect(courses.value?.[6]?.parent_course).toBeNull();
+        expect(courses.value?.[6]?.academic_startyear).toBe(2023);
+        expect(courses.value?.[6]?.description).toBeNull();
+        expect(courses.value?.[6]?.students).toEqual([]);
+        expect(courses.value?.[6]?.teachers).toEqual([]);
+        expect(courses.value?.[6]?.assistants).toEqual([]);
+        expect(courses.value?.[6]?.projects).toEqual([]);
+    });
 
     it('gets courses data by student', async () => {
-        await getCoursesByStudent('1')
-        expect(courses).not.toBeNull()
-        expect(Array.isArray(courses.value)).toBe(true)
-        expect(courses.value?.length).toBe(3)
-
-        expect(courses.value?.[0]?.name).toBe('Math')
-        expect(courses.value?.[0]?.parent_course).toBeNull()
-        expect(courses.value?.[0]?.academic_startyear).toBe(2023)
-        expect(courses.value?.[0]?.description).toBe('Math course')
-        expect(courses.value?.[0]?.students).toEqual([])
-        expect(courses.value?.[0]?.teachers).toEqual([])
-        expect(courses.value?.[0]?.assistants).toEqual([])
-        expect(courses.value?.[0]?.projects).toEqual([])
-
-        expect(courses.value?.[1]?.name).toBe('Sel2')
-        expect(courses.value?.[1]?.parent_course).toBe('3')
-        expect(courses.value?.[1]?.academic_startyear).toBe(2023)
-        expect(courses.value?.[1]?.description).toBe('Software course')
-        expect(courses.value?.[1]?.students).toEqual([])
-        expect(courses.value?.[1]?.teachers).toEqual([])
-        expect(courses.value?.[1]?.assistants).toEqual([])
-        expect(courses.value?.[1]?.projects).toEqual([])
-
-        expect(courses.value?.[2]?.name).toBe('Sel1')
-        expect(courses.value?.[2]?.parent_course).toBeNull()
-        expect(courses.value?.[2]?.academic_startyear).toBe(2022)
-        expect(courses.value?.[2]?.description).toBe('Software course')
-        expect(courses.value?.[2]?.students).toEqual([])
-        expect(courses.value?.[2]?.teachers).toEqual([])
-        expect(courses.value?.[2]?.assistants).toEqual([])
-        expect(courses.value?.[2]?.projects).toEqual([])
-    })
-})
+        await getCoursesByStudent('1');
+        expect(courses).not.toBeNull();
+        expect(Array.isArray(courses.value)).toBe(true);
+        expect(courses.value?.length).toBe(3);
+
+        expect(courses.value?.[0]?.name).toBe('Math');
+        expect(courses.value?.[0]?.parent_course).toBeNull();
+        expect(courses.value?.[0]?.academic_startyear).toBe(2023);
+        expect(courses.value?.[0]?.description).toBe('Math course');
+        expect(courses.value?.[0]?.students).toEqual([]);
+        expect(courses.value?.[0]?.teachers).toEqual([]);
+        expect(courses.value?.[0]?.assistants).toEqual([]);
+        expect(courses.value?.[0]?.projects).toEqual([]);
+
+        expect(courses.value?.[1]?.name).toBe('Sel2');
+        expect(courses.value?.[1]?.parent_course).toBe('3');
+        expect(courses.value?.[1]?.academic_startyear).toBe(2023);
+        expect(courses.value?.[1]?.description).toBe('Software course');
+        expect(courses.value?.[1]?.students).toEqual([]);
+        expect(courses.value?.[1]?.teachers).toEqual([]);
+        expect(courses.value?.[1]?.assistants).toEqual([]);
+        expect(courses.value?.[1]?.projects).toEqual([]);
+
+        expect(courses.value?.[2]?.name).toBe('Sel1');
+        expect(courses.value?.[2]?.parent_course).toBeNull();
+        expect(courses.value?.[2]?.academic_startyear).toBe(2022);
+        expect(courses.value?.[2]?.description).toBe('Software course');
+        expect(courses.value?.[2]?.students).toEqual([]);
+        expect(courses.value?.[2]?.teachers).toEqual([]);
+        expect(courses.value?.[2]?.assistants).toEqual([]);
+        expect(courses.value?.[2]?.projects).toEqual([]);
+    });
+});
diff --git a/frontend/src/test/unit/faculty_service.test.ts b/frontend/src/test/unit/faculty_service.test.ts
index 69fe6c8e..fb5ba597 100644
--- a/frontend/src/test/unit/faculty_service.test.ts
+++ b/frontend/src/test/unit/faculty_service.test.ts
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { describe, it, expect, beforeEach } from 'vitest'
-import { useFaculty } from '@/composables/services/faculties.service.ts'
+import { describe, it, expect, beforeEach } from 'vitest';
+import { useFaculty } from '@/composables/services/faculties.service.ts';
 
 const {
     faculties,
@@ -9,24 +9,24 @@ const {
     getFacultys,
 
     createFaculty,
-    deleteFaculty
-} = useFaculty()
+    deleteFaculty,
+} = useFaculty();
 
 describe('faculty', (): void => {
     it('gets faculty data by id', async () => {
-        await getFacultyByID('wetenschappen')
-        expect(faculty.value).not.toBeNull()
-        expect(faculty.value?.name).toBe('wetenschappen')
-    })
+        await getFacultyByID('wetenschappen');
+        expect(faculty.value).not.toBeNull();
+        expect(faculty.value?.name).toBe('wetenschappen');
+    });
 
     it('gets faculties data', async () => {
-        await getFacultys()
-        expect(faculties).not.toBeNull()
-        expect(Array.isArray(faculties.value)).toBe(true)
-        expect(faculties.value?.length).toBe(2)
-        expect(faculties.value?.[0]).not.toBeNull()
-        expect(faculties.value?.[0].name).toBe('wetenschappen')
-        expect(faculties.value?.[1]).not.toBeNull()
-        expect(faculties.value?.[1].name).toBe('voetbal')
-    })
-})
+        await getFacultys();
+        expect(faculties).not.toBeNull();
+        expect(Array.isArray(faculties.value)).toBe(true);
+        expect(faculties.value?.length).toBe(2);
+        expect(faculties.value?.[0]).not.toBeNull();
+        expect(faculties.value?.[0].name).toBe('wetenschappen');
+        expect(faculties.value?.[1]).not.toBeNull();
+        expect(faculties.value?.[1].name).toBe('voetbal');
+    });
+});
diff --git a/frontend/src/test/unit/group_service.test.ts b/frontend/src/test/unit/group_service.test.ts
index 47568c31..0eec15ed 100644
--- a/frontend/src/test/unit/group_service.test.ts
+++ b/frontend/src/test/unit/group_service.test.ts
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { describe, it, expect, beforeEach } from 'vitest'
-import { useGroup } from '@/composables/services/groups.service.ts'
+import { describe, it, expect, beforeEach } from 'vitest';
+import { useGroup } from '@/composables/services/groups.service.ts';
 
 const {
     groups,
@@ -10,56 +10,56 @@ const {
     getGroupsByStudent,
 
     createGroup,
-    deleteGroup
-} = useGroup()
+    deleteGroup,
+} = useGroup();
 
 describe('group', (): void => {
     it('gets group data by id', async () => {
-        await getGroupByID('0')
-        expect(group.value).not.toBeNull()
-        expect(group.value?.score).toBe(20)
-        expect(group.value?.id).toBe('0')
-        expect(group.value?.project).toBeNull()
-        expect(group.value?.students).toEqual([])
-        expect(group.value?.submissions).toEqual([])
-    })
+        await getGroupByID('0');
+        expect(group.value).not.toBeNull();
+        expect(group.value?.score).toBe(20);
+        expect(group.value?.id).toBe('0');
+        expect(group.value?.project).toBeNull();
+        expect(group.value?.students).toEqual([]);
+        expect(group.value?.submissions).toEqual([]);
+    });
 
     it('gets groups data by project', async () => {
-        await getGroupsByProject('0')
+        await getGroupsByProject('0');
         // console.log(groups.value)
         // Ensure group data is not null
-        expect(groups.value).not.toBeNull()
-        expect(Array.isArray(groups.value)).toBe(true)
-        expect(groups.value?.length).toBe(2)
+        expect(groups.value).not.toBeNull();
+        expect(Array.isArray(groups.value)).toBe(true);
+        expect(groups.value?.length).toBe(2);
 
-        expect(groups.value?.[0]).not.toBeNull()
-        expect(groups.value?.[0]?.score).toBe(20)
-        expect(groups.value?.[0]?.id).toBe('0')
-        expect(groups.value?.[0]?.project).toBeNull()
-        expect(groups.value?.[0]?.students).toEqual([])
-        expect(groups.value?.[0]?.submissions).toEqual([])
+        expect(groups.value?.[0]).not.toBeNull();
+        expect(groups.value?.[0]?.score).toBe(20);
+        expect(groups.value?.[0]?.id).toBe('0');
+        expect(groups.value?.[0]?.project).toBeNull();
+        expect(groups.value?.[0]?.students).toEqual([]);
+        expect(groups.value?.[0]?.submissions).toEqual([]);
 
-        expect(groups.value?.[1]).not.toBeNull()
-        expect(groups.value?.[1]?.score).toBe(18)
-        expect(groups.value?.[1]?.id).toBe('1')
-        expect(groups.value?.[1]?.project).toBeNull()
-        expect(groups.value?.[1]?.students).toEqual([])
-        expect(groups.value?.[1]?.submissions).toEqual([])
-    })
+        expect(groups.value?.[1]).not.toBeNull();
+        expect(groups.value?.[1]?.score).toBe(18);
+        expect(groups.value?.[1]?.id).toBe('1');
+        expect(groups.value?.[1]?.project).toBeNull();
+        expect(groups.value?.[1]?.students).toEqual([]);
+        expect(groups.value?.[1]?.submissions).toEqual([]);
+    });
 
     it('gets groups data by student', async () => {
-        await getGroupsByStudent('1')
-        expect(groups.value).not.toBeNull()
-        expect(Array.isArray(groups.value)).toBe(true)
-        expect(groups.value?.length).toBe(1)
+        await getGroupsByStudent('1');
+        expect(groups.value).not.toBeNull();
+        expect(Array.isArray(groups.value)).toBe(true);
+        expect(groups.value?.length).toBe(1);
 
-        expect(groups.value?.[0]).not.toBeNull()
-        expect(groups.value?.[0]?.score).toBe(20)
-        expect(groups.value?.[0]?.id).toBe('0')
-        expect(groups.value?.[0]?.project).toBeNull()
-        expect(groups.value?.[0]?.students).toEqual([])
-        expect(groups.value?.[0]?.submissions).toEqual([])
-    })
+        expect(groups.value?.[0]).not.toBeNull();
+        expect(groups.value?.[0]?.score).toBe(20);
+        expect(groups.value?.[0]?.id).toBe('0');
+        expect(groups.value?.[0]?.project).toBeNull();
+        expect(groups.value?.[0]?.students).toEqual([]);
+        expect(groups.value?.[0]?.submissions).toEqual([]);
+    });
 
     /*
     it("create group", async () => {
@@ -68,4 +68,4 @@ describe('group', (): void => {
         console.log(group.value)
     })
     */
-})
+});
diff --git a/frontend/src/test/unit/project_service.test.ts b/frontend/src/test/unit/project_service.test.ts
index b1f0d9c3..db04dfda 100644
--- a/frontend/src/test/unit/project_service.test.ts
+++ b/frontend/src/test/unit/project_service.test.ts
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { describe, it, expect, beforeEach } from 'vitest'
-import { useProject } from '@/composables/services/project.service.ts'
+import { describe, it, expect, beforeEach } from 'vitest';
+import { useProject } from '@/composables/services/project.service.ts';
 
 const {
     projects,
@@ -11,130 +11,110 @@ const {
     getProjectsByStudent,
 
     createProject,
-    deleteProject
-} = useProject()
+    deleteProject,
+} = useProject();
 
 describe('project', (): void => {
     it('gets project data by id', async () => {
-        await getProjectByID('0')
-        expect(project.value).not.toBeNull()
-        expect(project.value?.name).toBe('sel2')
-        expect(project.value?.course).toBeNull()
-        expect(project.value?.description).toBe('this is a test')
-        expect(project.value?.visible).toBe(true)
-        expect(project.value?.archived).toBe(false)
-        expect(project.value?.locked_groups).toBe(false)
-        expect(project.value?.start_date).toStrictEqual(
-            new Date('July 21, 2024 01:15:00')
-        )
-        expect(project.value?.deadline).toStrictEqual(
-            new Date('July 23, 2024 01:15:00')
-        )
-        expect(project.value?.max_score).toBe(100)
-        expect(project.value?.score_visible).toBe(true)
-        expect(project.value?.group_size).toBe(8)
-        expect(project.value?.course).toBeNull()
-        expect(project.value?.structureChecks).toEqual([])
-        expect(project.value?.extra_checks).toEqual([])
-        expect(project.value?.groups).toEqual([])
-        expect(project.value?.submissions).toEqual([])
-    })
+        await getProjectByID('0');
+        expect(project.value).not.toBeNull();
+        expect(project.value?.name).toBe('sel2');
+        expect(project.value?.course).toBeNull();
+        expect(project.value?.description).toBe('this is a test');
+        expect(project.value?.visible).toBe(true);
+        expect(project.value?.archived).toBe(false);
+        expect(project.value?.locked_groups).toBe(false);
+        expect(project.value?.start_date).toStrictEqual(new Date('July 21, 2024 01:15:00'));
+        expect(project.value?.deadline).toStrictEqual(new Date('July 23, 2024 01:15:00'));
+        expect(project.value?.max_score).toBe(100);
+        expect(project.value?.score_visible).toBe(true);
+        expect(project.value?.group_size).toBe(8);
+        expect(project.value?.course).toBeNull();
+        expect(project.value?.structureChecks).toEqual([]);
+        expect(project.value?.extra_checks).toEqual([]);
+        expect(project.value?.groups).toEqual([]);
+        expect(project.value?.submissions).toEqual([]);
+    });
 
     it('gets projects data', async () => {
-        await getProjectsByCourse('1')
-        expect(projects).not.toBeNull()
-        expect(Array.isArray(projects.value)).toBe(true)
-        expect(projects.value?.length).toBe(2)
-        expect(projects.value).not.toBeNull()
-        expect(projects.value?.[0]?.name).toBe('sel2')
-        expect(projects.value?.[0]?.course).toBeNull()
-        expect(projects.value?.[0]?.description).toBe('this is a test')
-        expect(projects.value?.[0]?.visible).toBe(true)
-        expect(projects.value?.[0]?.archived).toBe(false)
-        expect(projects.value?.[0]?.locked_groups).toBe(false)
-        expect(projects.value?.[0]?.start_date).toStrictEqual(
-            new Date('July 21, 2024 01:15:00')
-        )
-        expect(projects.value?.[0]?.deadline).toStrictEqual(
-            new Date('July 23, 2024 01:15:00')
-        )
-        expect(projects.value?.[0]?.max_score).toBe(100)
-        expect(projects.value?.[0]?.score_visible).toBe(true)
-        expect(projects.value?.[0]?.group_size).toBe(8)
-        expect(projects.value?.[0]?.course).toBeNull()
-        expect(projects.value?.[0]?.structureChecks).toEqual([])
-        expect(projects.value?.[0]?.extra_checks).toEqual([])
-        expect(projects.value?.[0]?.groups).toEqual([])
-        expect(projects.value?.[0]?.submissions).toEqual([])
+        await getProjectsByCourse('1');
+        expect(projects).not.toBeNull();
+        expect(Array.isArray(projects.value)).toBe(true);
+        expect(projects.value?.length).toBe(2);
+        expect(projects.value).not.toBeNull();
+        expect(projects.value?.[0]?.name).toBe('sel2');
+        expect(projects.value?.[0]?.course).toBeNull();
+        expect(projects.value?.[0]?.description).toBe('this is a test');
+        expect(projects.value?.[0]?.visible).toBe(true);
+        expect(projects.value?.[0]?.archived).toBe(false);
+        expect(projects.value?.[0]?.locked_groups).toBe(false);
+        expect(projects.value?.[0]?.start_date).toStrictEqual(new Date('July 21, 2024 01:15:00'));
+        expect(projects.value?.[0]?.deadline).toStrictEqual(new Date('July 23, 2024 01:15:00'));
+        expect(projects.value?.[0]?.max_score).toBe(100);
+        expect(projects.value?.[0]?.score_visible).toBe(true);
+        expect(projects.value?.[0]?.group_size).toBe(8);
+        expect(projects.value?.[0]?.course).toBeNull();
+        expect(projects.value?.[0]?.structureChecks).toEqual([]);
+        expect(projects.value?.[0]?.extra_checks).toEqual([]);
+        expect(projects.value?.[0]?.groups).toEqual([]);
+        expect(projects.value?.[0]?.submissions).toEqual([]);
 
-        expect(projects.value?.[1]?.name).toBe('sel3')
-        expect(projects.value?.[1]?.course).toBeNull()
-        expect(projects.value?.[1]?.description).toBe('make a project')
-        expect(projects.value?.[1]?.visible).toBe(true)
-        expect(projects.value?.[1]?.archived).toBe(false)
-        expect(projects.value?.[1]?.locked_groups).toBe(false)
-        expect(projects.value?.[1]?.start_date).toStrictEqual(
-            new Date('July 21, 2024 01:15:00')
-        )
-        expect(projects.value?.[1]?.deadline).toStrictEqual(
-            new Date('July 23, 2024 01:15:00')
-        )
-        expect(projects.value?.[1]?.max_score).toBe(20)
-        expect(projects.value?.[1]?.score_visible).toBe(false)
-        expect(projects.value?.[1]?.group_size).toBe(3)
-        expect(projects.value?.[1]?.course).toBeNull()
-        expect(projects.value?.[1]?.structureChecks).toEqual([])
-        expect(projects.value?.[1]?.extra_checks).toEqual([])
-        expect(projects.value?.[1]?.groups).toEqual([])
-        expect(projects.value?.[1]?.submissions).toEqual([])
-    })
+        expect(projects.value?.[1]?.name).toBe('sel3');
+        expect(projects.value?.[1]?.course).toBeNull();
+        expect(projects.value?.[1]?.description).toBe('make a project');
+        expect(projects.value?.[1]?.visible).toBe(true);
+        expect(projects.value?.[1]?.archived).toBe(false);
+        expect(projects.value?.[1]?.locked_groups).toBe(false);
+        expect(projects.value?.[1]?.start_date).toStrictEqual(new Date('July 21, 2024 01:15:00'));
+        expect(projects.value?.[1]?.deadline).toStrictEqual(new Date('July 23, 2024 01:15:00'));
+        expect(projects.value?.[1]?.max_score).toBe(20);
+        expect(projects.value?.[1]?.score_visible).toBe(false);
+        expect(projects.value?.[1]?.group_size).toBe(3);
+        expect(projects.value?.[1]?.course).toBeNull();
+        expect(projects.value?.[1]?.structureChecks).toEqual([]);
+        expect(projects.value?.[1]?.extra_checks).toEqual([]);
+        expect(projects.value?.[1]?.groups).toEqual([]);
+        expect(projects.value?.[1]?.submissions).toEqual([]);
+    });
 
     it('gets projects data', async () => {
-        await getProjectsByStudent('1')
-        expect(projects).not.toBeNull()
-        expect(Array.isArray(projects.value)).toBe(true)
-        expect(projects.value?.length).toBe(2)
-        expect(projects.value).not.toBeNull()
-        expect(projects.value?.[0]?.name).toBe('sel2')
-        expect(projects.value?.[0]?.course).toBeNull()
-        expect(projects.value?.[0]?.description).toBe('this is a test')
-        expect(projects.value?.[0]?.visible).toBe(true)
-        expect(projects.value?.[0]?.archived).toBe(false)
-        expect(projects.value?.[0]?.locked_groups).toBe(false)
-        expect(projects.value?.[0]?.start_date).toStrictEqual(
-            new Date('July 21, 2024 01:15:00')
-        )
-        expect(projects.value?.[0]?.deadline).toStrictEqual(
-            new Date('July 23, 2024 01:15:00')
-        )
-        expect(projects.value?.[0]?.max_score).toBe(100)
-        expect(projects.value?.[0]?.score_visible).toBe(true)
-        expect(projects.value?.[0]?.group_size).toBe(8)
-        expect(projects.value?.[0]?.course).toBeNull()
-        expect(projects.value?.[0]?.structureChecks).toEqual([])
-        expect(projects.value?.[0]?.extra_checks).toEqual([])
-        expect(projects.value?.[0]?.groups).toEqual([])
-        expect(projects.value?.[0]?.submissions).toEqual([])
+        await getProjectsByStudent('1');
+        expect(projects).not.toBeNull();
+        expect(Array.isArray(projects.value)).toBe(true);
+        expect(projects.value?.length).toBe(2);
+        expect(projects.value).not.toBeNull();
+        expect(projects.value?.[0]?.name).toBe('sel2');
+        expect(projects.value?.[0]?.course).toBeNull();
+        expect(projects.value?.[0]?.description).toBe('this is a test');
+        expect(projects.value?.[0]?.visible).toBe(true);
+        expect(projects.value?.[0]?.archived).toBe(false);
+        expect(projects.value?.[0]?.locked_groups).toBe(false);
+        expect(projects.value?.[0]?.start_date).toStrictEqual(new Date('July 21, 2024 01:15:00'));
+        expect(projects.value?.[0]?.deadline).toStrictEqual(new Date('July 23, 2024 01:15:00'));
+        expect(projects.value?.[0]?.max_score).toBe(100);
+        expect(projects.value?.[0]?.score_visible).toBe(true);
+        expect(projects.value?.[0]?.group_size).toBe(8);
+        expect(projects.value?.[0]?.course).toBeNull();
+        expect(projects.value?.[0]?.structureChecks).toEqual([]);
+        expect(projects.value?.[0]?.extra_checks).toEqual([]);
+        expect(projects.value?.[0]?.groups).toEqual([]);
+        expect(projects.value?.[0]?.submissions).toEqual([]);
 
-        expect(projects.value?.[1]?.name).toBe('sel3')
-        expect(projects.value?.[1]?.course).toBeNull()
-        expect(projects.value?.[1]?.description).toBe('make a project')
-        expect(projects.value?.[1]?.visible).toBe(true)
-        expect(projects.value?.[1]?.archived).toBe(false)
-        expect(projects.value?.[1]?.locked_groups).toBe(false)
-        expect(projects.value?.[1]?.start_date).toStrictEqual(
-            new Date('July 21, 2024 01:15:00')
-        )
-        expect(projects.value?.[1]?.deadline).toStrictEqual(
-            new Date('July 23, 2024 01:15:00')
-        )
-        expect(projects.value?.[1]?.max_score).toBe(20)
-        expect(projects.value?.[1]?.score_visible).toBe(false)
-        expect(projects.value?.[1]?.group_size).toBe(3)
-        expect(projects.value?.[1]?.course).toBeNull()
-        expect(projects.value?.[1]?.structureChecks).toEqual([])
-        expect(projects.value?.[1]?.extra_checks).toEqual([])
-        expect(projects.value?.[1]?.groups).toEqual([])
-        expect(projects.value?.[1]?.submissions).toEqual([])
-    })
-})
+        expect(projects.value?.[1]?.name).toBe('sel3');
+        expect(projects.value?.[1]?.course).toBeNull();
+        expect(projects.value?.[1]?.description).toBe('make a project');
+        expect(projects.value?.[1]?.visible).toBe(true);
+        expect(projects.value?.[1]?.archived).toBe(false);
+        expect(projects.value?.[1]?.locked_groups).toBe(false);
+        expect(projects.value?.[1]?.start_date).toStrictEqual(new Date('July 21, 2024 01:15:00'));
+        expect(projects.value?.[1]?.deadline).toStrictEqual(new Date('July 23, 2024 01:15:00'));
+        expect(projects.value?.[1]?.max_score).toBe(20);
+        expect(projects.value?.[1]?.score_visible).toBe(false);
+        expect(projects.value?.[1]?.group_size).toBe(3);
+        expect(projects.value?.[1]?.course).toBeNull();
+        expect(projects.value?.[1]?.structureChecks).toEqual([]);
+        expect(projects.value?.[1]?.extra_checks).toEqual([]);
+        expect(projects.value?.[1]?.groups).toEqual([]);
+        expect(projects.value?.[1]?.submissions).toEqual([]);
+    });
+});
diff --git a/frontend/src/test/unit/setup.ts b/frontend/src/test/unit/setup.ts
index 4878c411..0ef80b23 100644
--- a/frontend/src/test/unit/setup.ts
+++ b/frontend/src/test/unit/setup.ts
@@ -1,25 +1,25 @@
-import { afterAll, afterEach, beforeAll } from 'vitest'
-import { setupServer } from 'msw/node'
-import { HttpResponse, http } from 'msw'
+import { afterAll, afterEach, beforeAll } from 'vitest';
+import { setupServer } from 'msw/node';
+import { HttpResponse, http } from 'msw';
 
-import { endpoints } from '@/config/endpoints.ts'
+import { endpoints } from '@/config/endpoints.ts';
 
-const baseUrl = 'http://localhost'
+const baseUrl = 'http://localhost';
 
 const groups = [
     {
         id: '0',
         score: 20,
         project: '0',
-        students: ['1', '2', '3', '000201247011']
+        students: ['1', '2', '3', '000201247011'],
     },
     {
         id: '1',
         score: 18,
         project: '0',
-        students: ['1', '2', '3', '000201247011']
-    }
-]
+        students: ['1', '2', '3', '000201247011'],
+    },
+];
 
 const projects = [
     {
@@ -36,7 +36,7 @@ const projects = [
         score_visible: true,
         group_size: 8,
         submissions: ['1', '2'],
-        groups: ['0', '1']
+        groups: ['0', '1'],
     },
     {
         id: 1,
@@ -52,9 +52,9 @@ const projects = [
         score_visible: false,
         group_size: 3,
         submissions: [],
-        groups: ['0', '1']
-    }
-]
+        groups: ['0', '1'],
+    },
+];
 
 const courses = [
     {
@@ -66,7 +66,7 @@ const courses = [
         parent_course: null,
         name: 'Math',
         academic_startyear: 2023,
-        description: 'Math course'
+        description: 'Math course',
     },
     {
         id: '2',
@@ -77,7 +77,7 @@ const courses = [
         parent_course: '3',
         name: 'Sel2',
         academic_startyear: 2023,
-        description: 'Software course'
+        description: 'Software course',
     },
     {
         id: '3',
@@ -88,7 +88,7 @@ const courses = [
         parent_course: null,
         name: 'Sel1',
         academic_startyear: 2022,
-        description: 'Software course'
+        description: 'Software course',
     },
     {
         id: '12',
@@ -99,7 +99,7 @@ const courses = [
         parent_course: '1',
         name: 'Math',
         academic_startyear: 2024,
-        description: 'Math course'
+        description: 'Math course',
     },
     {
         id: '13',
@@ -110,7 +110,7 @@ const courses = [
         parent_course: '12',
         name: 'Math',
         academic_startyear: 2025,
-        description: 'Math course'
+        description: 'Math course',
     },
     {
         id: '14',
@@ -121,7 +121,7 @@ const courses = [
         parent_course: null,
         name: 'Club brugge',
         academic_startyear: 2023,
-        description: null
+        description: null,
     },
     {
         id: '15',
@@ -132,11 +132,11 @@ const courses = [
         parent_course: null,
         name: 'vergeet barbara',
         academic_startyear: 2023,
-        description: null
-    }
-]
+        description: null,
+    },
+];
 
-const faculties = [{ name: 'wetenschappen' }, { name: 'voetbal' }]
+const faculties = [{ name: 'wetenschappen' }, { name: 'voetbal' }];
 
 const students = [
     {
@@ -151,7 +151,7 @@ const students = [
         create_time: new Date('July 21, 2024 01:15:00'),
         studentId: null,
         courses: ['1', '2', '3'],
-        groups: ['0']
+        groups: ['0'],
     },
     {
         id: '2',
@@ -165,7 +165,7 @@ const students = [
         create_time: new Date('July 21, 2024 01:15:00'),
         studentId: null,
         courses: [],
-        groups: []
+        groups: [],
     },
     {
         id: '000201247011',
@@ -179,7 +179,7 @@ const students = [
         create_time: new Date('July 21, 2024 01:15:00'),
         studentId: '02012470',
         courses: [],
-        groups: []
+        groups: [],
     },
     {
         id: '3',
@@ -193,9 +193,9 @@ const students = [
         create_time: new Date('July 21, 2024 01:15:00'),
         studentId: null,
         courses: [],
-        groups: []
-    }
-]
+        groups: [],
+    },
+];
 
 const teachers = [
     {
@@ -207,7 +207,7 @@ const teachers = [
         first_name: 'Tom',
         last_name: 'Boonen',
         last_enrolled: 2023,
-        create_time: new Date('July 21, 2024 01:15:00')
+        create_time: new Date('July 21, 2024 01:15:00'),
     },
     {
         id: '124',
@@ -218,9 +218,9 @@ const teachers = [
         first_name: 'Peter',
         last_name: 'Sagan',
         last_enrolled: 2023,
-        create_time: new Date('July 21, 2024 01:15:00')
-    }
-]
+        create_time: new Date('July 21, 2024 01:15:00'),
+    },
+];
 
 const assistants = [
     {
@@ -234,7 +234,7 @@ const assistants = [
         first_name: 'Bart',
         last_name: 'Simpson',
         last_enrolled: 2023,
-        create_time: new Date('July 21, 2024 01:15:00')
+        create_time: new Date('July 21, 2024 01:15:00'),
     },
     {
         id: '236',
@@ -247,9 +247,9 @@ const assistants = [
         first_name: 'Kim',
         last_name: 'Clijsters',
         last_enrolled: 2023,
-        create_time: new Date('July 21, 2024 01:15:00')
-    }
-]
+        create_time: new Date('July 21, 2024 01:15:00'),
+    },
+];
 
 const admins = [
     {
@@ -263,7 +263,7 @@ const admins = [
         first_name: 'Tybo',
         last_name: 'Verslype',
         last_enrolled: 2023,
-        create_time: new Date('July 21, 2024 01:15:00')
+        create_time: new Date('July 21, 2024 01:15:00'),
     },
     {
         id: '400251245031',
@@ -276,9 +276,9 @@ const admins = [
         first_name: 'Simon',
         last_name: 'Mignolet',
         last_enrolled: 2023,
-        create_time: new Date('July 21, 2024 01:15:00')
-    }
-]
+        create_time: new Date('July 21, 2024 01:15:00'),
+    },
+];
 
 const structureChecks = [
     {
@@ -286,38 +286,38 @@ const structureChecks = [
         project: '123456',
         obligated_extensions: [],
         blocked_extensions: [],
-        name: '.'
+        name: '.',
     },
     {
         id: '2',
         project: '123456',
         obligated_extensions: [
             {
-                extension: 'pdf'
-            }
+                extension: 'pdf',
+            },
         ],
         blocked_extensions: [],
-        name: 'folder1'
+        name: 'folder1',
     },
     {
         id: '3',
         project: '123456',
         obligated_extensions: [],
         blocked_extensions: [],
-        name: 'folder3'
+        name: 'folder3',
     },
     {
         id: '4',
         project: '123456',
         obligated_extensions: [
             {
-                extension: 'gif'
-            }
+                extension: 'gif',
+            },
         ],
         blocked_extensions: [],
-        name: 'folder3/folder3-1'
-    }
-]
+        name: 'folder3/folder3-1',
+    },
+];
 
 const submissions = [
     {
@@ -327,7 +327,7 @@ const submissions = [
         extra_checks_results: [],
         submission_number: 1,
         submission_time: new Date('July 21, 2024 01:15:00'),
-        structureChecks_passed: true
+        structureChecks_passed: true,
     },
     {
         id: '2',
@@ -336,258 +336,129 @@ const submissions = [
         extra_checks_results: [],
         submission_number: 2,
         submission_time: new Date('July 21, 2024 01:15:00'),
-        structureChecks_passed: true
-    }
-]
+        structureChecks_passed: true,
+    },
+];
 
 export const restHandlers = [
-    http.get(
-        baseUrl + endpoints.groups.retrieve.replace('{id}', ':id'),
-        ({ params }) => {
-            return HttpResponse.json(groups.find((x) => x.id === params.id))
-        }
-    ),
-    http.get(
-        baseUrl + endpoints.submissions.retrieve.replace('{id}', ':id'),
-        ({ params }) => {
-            return HttpResponse.json(
-                submissions.find((x) => x.id === params.id)
-            )
-        }
-    ),
-    http.get(
-        baseUrl + endpoints.structureChecks.retrieve.replace('{id}', ':id'),
-        ({ params }) => {
-            return HttpResponse.json(
-                structureChecks.find((x) => x.id === params.id)
-            )
-        }
-    ),
-    http.get(
-        baseUrl + endpoints.admins.retrieve.replace('{id}', ':id'),
-        ({ params }) => {
-            return HttpResponse.json(admins.find((x) => x.id === params.id))
-        }
-    ),
-    http.get(
-        baseUrl + endpoints.teachers.retrieve.replace('{id}', ':id'),
-        ({ params }) => {
-            return HttpResponse.json(teachers.find((x) => x.id === params.id))
-        }
-    ),
-    http.get(
-        baseUrl + endpoints.assistants.retrieve.replace('{id}', ':id'),
-        ({ params }) => {
-            return HttpResponse.json(assistants.find((x) => x.id === params.id))
-        }
-    ),
-    http.get(
-        baseUrl + endpoints.students.retrieve.replace('{id}', ':id'),
-        ({ params }) => {
-            return HttpResponse.json(students.find((x) => x.id === params.id))
-        }
-    ),
-    http.get(
-        baseUrl + endpoints.projects.retrieve.replace('{id}', ':id'),
-        ({ params }) => {
-            return HttpResponse.json(projects.find((x) => x.id === params.id))
-        }
-    ),
-    http.get(
-        baseUrl + endpoints.courses.retrieve.replace('{id}', ':id'),
-        ({ params }) => {
-            return HttpResponse.json(courses.find((x) => x.id === params.id))
-        }
-    ),
-    http.get(
-        baseUrl + endpoints.groups.byProject.replace('{projectId}', ':id'),
-        ({ params }) => {
-            return HttpResponse.json(
-                groups.filter((x) => x.project === params.id)
-            )
-        }
-    ),
-    http.get(
-        baseUrl + endpoints.submissions.byProject.replace('{projectId}', ':id'),
-        ({ params }) => {
-            const project = projects.find((x) => x.id === params.id)
-            const submittedSubmissions =
-                project !== null && project !== undefined
-                    ? project.submissions
-                    : []
-            return HttpResponse.json(
-                submissions.filter((x) => submittedSubmissions.includes(x.id))
-            )
-        }
-    ),
-    http.get(
-        baseUrl + endpoints.teachers.byCourse.replace('{courseId}', ':id'),
-        ({ params }) => {
-            const course = courses.find((x) => x.id === params.id)
-            const teacherIds =
-                course !== null && course !== undefined ? course.teachers : []
-            return HttpResponse.json(
-                submissions.filter((x) => teacherIds.includes(x.id))
-            )
-        }
-    ),
-    http.get(
-        baseUrl + endpoints.assistants.byCourse.replace('{courseId}', ':id'),
-        ({ params }) => {
-            const course = courses.find((x) => x.id === params.id)
-            const assistantIds =
-                course !== null && course !== undefined ? course.assistants : []
-            return HttpResponse.json(
-                assistants.filter((x) => assistantIds.includes(x.id))
-            )
-        }
-    ),
-    http.get(
-        baseUrl + endpoints.courses.byStudent.replace('{studentId}', ':id'),
-        ({ params }) => {
-            const student = students.find((x) => x.id === params.id)
-            const courseIds =
-                student !== null && student !== undefined ? student.courses : []
-            return HttpResponse.json(
-                courses.filter((x) => courseIds.includes(x.id))
-            )
-        }
-    ),
-    http.get(
-        baseUrl + endpoints.groups.byStudent.replace('{studentId}', ':id'),
-        ({ params }) => {
-            const student = students.find((x) => x.id === params.id)
-            const groupIds =
-                student !== null && student !== undefined ? student.groups : []
-            return HttpResponse.json(
-                groups.filter((x) => groupIds.includes(x.id))
-            )
-        }
-    ),
-    http.get(
-        baseUrl + endpoints.students.byCourse.replace('{courseId}', ':id'),
-        ({ params }) => {
-            const course = courses.find((x) => x.id === params.id)
-            const studentIds =
-                course !== null && course !== undefined ? course.students : []
-            return HttpResponse.json(
-                students.filter((x) => studentIds.includes(x.id))
-            )
-        }
-    ),
-    http.get(
-        baseUrl + endpoints.students.byGroup.replace('{groupId}', ':id'),
-        ({ params }) => {
-            const group = groups.find((x) => x.id === params.id)
-            const studentIds =
-                group !== null && group !== undefined ? group.students : []
-            return HttpResponse.json(
-                students.filter((x) => studentIds.includes(x.id))
-            )
-        }
-    ),
-    http.get(
-        baseUrl + endpoints.submissions.status.replace('{projectId}', ':id'),
-        ({ params }) => {
-            const project = projects.find((x) => x.id === params.id)
-            const groupIds =
-                project !== null && project !== undefined ? project.groups : []
-            const submissionIds =
-                project !== null && project !== undefined
-                    ? project.submissions
-                    : []
-            const subGroupIds = Array.from(
-                new Set(
-                    submissions
-                        .filter((x) => submissionIds.includes(x.id))
-                        .map((x) => x.group)
-                )
-            )
+    http.get(baseUrl + endpoints.groups.retrieve.replace('{id}', ':id'), ({ params }) => {
+        return HttpResponse.json(groups.find((x) => x.id === params.id));
+    }),
+    http.get(baseUrl + endpoints.submissions.retrieve.replace('{id}', ':id'), ({ params }) => {
+        return HttpResponse.json(submissions.find((x) => x.id === params.id));
+    }),
+    http.get(baseUrl + endpoints.structureChecks.retrieve.replace('{id}', ':id'), ({ params }) => {
+        return HttpResponse.json(structureChecks.find((x) => x.id === params.id));
+    }),
+    http.get(baseUrl + endpoints.admins.retrieve.replace('{id}', ':id'), ({ params }) => {
+        return HttpResponse.json(admins.find((x) => x.id === params.id));
+    }),
+    http.get(baseUrl + endpoints.teachers.retrieve.replace('{id}', ':id'), ({ params }) => {
+        return HttpResponse.json(teachers.find((x) => x.id === params.id));
+    }),
+    http.get(baseUrl + endpoints.assistants.retrieve.replace('{id}', ':id'), ({ params }) => {
+        return HttpResponse.json(assistants.find((x) => x.id === params.id));
+    }),
+    http.get(baseUrl + endpoints.students.retrieve.replace('{id}', ':id'), ({ params }) => {
+        return HttpResponse.json(students.find((x) => x.id === params.id));
+    }),
+    http.get(baseUrl + endpoints.projects.retrieve.replace('{id}', ':id'), ({ params }) => {
+        return HttpResponse.json(projects.find((x) => x.id === params.id));
+    }),
+    http.get(baseUrl + endpoints.courses.retrieve.replace('{id}', ':id'), ({ params }) => {
+        return HttpResponse.json(courses.find((x) => x.id === params.id));
+    }),
+    http.get(baseUrl + endpoints.groups.byProject.replace('{projectId}', ':id'), ({ params }) => {
+        return HttpResponse.json(groups.filter((x) => x.project === params.id));
+    }),
+    http.get(baseUrl + endpoints.submissions.byProject.replace('{projectId}', ':id'), ({ params }) => {
+        const project = projects.find((x) => x.id === params.id);
+        const submittedSubmissions = project !== null && project !== undefined ? project.submissions : [];
+        return HttpResponse.json(submissions.filter((x) => submittedSubmissions.includes(x.id)));
+    }),
+    http.get(baseUrl + endpoints.teachers.byCourse.replace('{courseId}', ':id'), ({ params }) => {
+        const course = courses.find((x) => x.id === params.id);
+        const teacherIds = course !== null && course !== undefined ? course.teachers : [];
+        return HttpResponse.json(submissions.filter((x) => teacherIds.includes(x.id)));
+    }),
+    http.get(baseUrl + endpoints.assistants.byCourse.replace('{courseId}', ':id'), ({ params }) => {
+        const course = courses.find((x) => x.id === params.id);
+        const assistantIds = course !== null && course !== undefined ? course.assistants : [];
+        return HttpResponse.json(assistants.filter((x) => assistantIds.includes(x.id)));
+    }),
+    http.get(baseUrl + endpoints.courses.byStudent.replace('{studentId}', ':id'), ({ params }) => {
+        const student = students.find((x) => x.id === params.id);
+        const courseIds = student !== null && student !== undefined ? student.courses : [];
+        return HttpResponse.json(courses.filter((x) => courseIds.includes(x.id)));
+    }),
+    http.get(baseUrl + endpoints.groups.byStudent.replace('{studentId}', ':id'), ({ params }) => {
+        const student = students.find((x) => x.id === params.id);
+        const groupIds = student !== null && student !== undefined ? student.groups : [];
+        return HttpResponse.json(groups.filter((x) => groupIds.includes(x.id)));
+    }),
+    http.get(baseUrl + endpoints.students.byCourse.replace('{courseId}', ':id'), ({ params }) => {
+        const course = courses.find((x) => x.id === params.id);
+        const studentIds = course !== null && course !== undefined ? course.students : [];
+        return HttpResponse.json(students.filter((x) => studentIds.includes(x.id)));
+    }),
+    http.get(baseUrl + endpoints.students.byGroup.replace('{groupId}', ':id'), ({ params }) => {
+        const group = groups.find((x) => x.id === params.id);
+        const studentIds = group !== null && group !== undefined ? group.students : [];
+        return HttpResponse.json(students.filter((x) => studentIds.includes(x.id)));
+    }),
+    http.get(baseUrl + endpoints.submissions.status.replace('{projectId}', ':id'), ({ params }) => {
+        const project = projects.find((x) => x.id === params.id);
+        const groupIds = project !== null && project !== undefined ? project.groups : [];
+        const submissionIds = project !== null && project !== undefined ? project.submissions : [];
+        const subGroupIds = Array.from(new Set(submissions.filter((x) => submissionIds.includes(x.id)).map((x) => x.group)));
 
-            // Filter submissions for each subgroup and get the submission with the highest number
-            const subgroupSubmissions = subGroupIds.map((groupId) => {
-                const submissionsForGroup = submissions.filter(
-                    (submission) => submission.group === groupId
-                )
-                if (submissionsForGroup.length > 0) {
-                    return submissionsForGroup.reduce(
-                        (maxSubmission, currentSubmission) => {
-                            return currentSubmission.submission_number >
-                                maxSubmission.submission_number
-                                ? currentSubmission
-                                : maxSubmission
-                        }
-                    )
-                } else {
-                    return null
-                }
-            })
-            return HttpResponse.json({
-                groups_submitted: new Set(
-                    submissions
-                        .filter((x) => submissionIds.includes(x.id))
-                        .map((x) => x.group)
-                ).size,
-                non_empty_groups: groups.filter(
-                    (x) => groupIds.includes(x.id) && x.students.length > 0
-                ).length,
-                submissions_passed: subgroupSubmissions.filter(
-                    (x) => x?.structureChecks_passed
-                ).length
-            })
-        }
-    ),
-    http.get(
-        baseUrl +
-            endpoints.structureChecks.byProject.replace('{projectId}', ':id'),
-        ({ params }) => {
-            return HttpResponse.json(
-                structureChecks.filter((x) => x.project === params.id)
-            )
-        }
-    ),
-    http.get(
-        baseUrl + endpoints.projects.byCourse.replace('{courseId}', ':id'),
-        ({ params }) => {
-            return HttpResponse.json(
-                projects.filter((x) => x.course === params.id)
-            )
-        }
-    ),
-    http.get(
-        baseUrl + endpoints.submissions.byGroup.replace('{groupId}', ':id'),
-        ({ params }) => {
-            return HttpResponse.json(
-                submissions.filter((x) => x.group === params.id)
-            )
-        }
-    ),
-    http.get(
-        baseUrl + endpoints.faculties.retrieve.replace('{name}', ':name'),
-        ({ params }) => {
-            return HttpResponse.json(
-                faculties.find((x) => x.name === params.name)
-            )
-        }
-    ),
+        // Filter submissions for each subgroup and get the submission with the highest number
+        const subgroupSubmissions = subGroupIds.map((groupId) => {
+            const submissionsForGroup = submissions.filter((submission) => submission.group === groupId);
+            if (submissionsForGroup.length > 0) {
+                return submissionsForGroup.reduce((maxSubmission, currentSubmission) => {
+                    return currentSubmission.submission_number > maxSubmission.submission_number ? currentSubmission : maxSubmission;
+                });
+            } else {
+                return null;
+            }
+        });
+        return HttpResponse.json({
+            groups_submitted: new Set(submissions.filter((x) => submissionIds.includes(x.id)).map((x) => x.group)).size,
+            non_empty_groups: groups.filter((x) => groupIds.includes(x.id) && x.students.length > 0).length,
+            submissions_passed: subgroupSubmissions.filter((x) => x?.structureChecks_passed).length,
+        });
+    }),
+    http.get(baseUrl + endpoints.structureChecks.byProject.replace('{projectId}', ':id'), ({ params }) => {
+        return HttpResponse.json(structureChecks.filter((x) => x.project === params.id));
+    }),
+    http.get(baseUrl + endpoints.projects.byCourse.replace('{courseId}', ':id'), ({ params }) => {
+        return HttpResponse.json(projects.filter((x) => x.course === params.id));
+    }),
+    http.get(baseUrl + endpoints.submissions.byGroup.replace('{groupId}', ':id'), ({ params }) => {
+        return HttpResponse.json(submissions.filter((x) => x.group === params.id));
+    }),
+    http.get(baseUrl + endpoints.faculties.retrieve.replace('{name}', ':name'), ({ params }) => {
+        return HttpResponse.json(faculties.find((x) => x.name === params.name));
+    }),
     http.get(baseUrl + endpoints.faculties.index, () => {
-        return HttpResponse.json(faculties)
+        return HttpResponse.json(faculties);
     }),
     http.get(baseUrl + endpoints.courses.index, () => {
-        return HttpResponse.json(courses)
+        return HttpResponse.json(courses);
     }),
     http.get(baseUrl + endpoints.admins.index, () => {
-        return HttpResponse.json(admins)
+        return HttpResponse.json(admins);
     }),
     http.get(baseUrl + endpoints.students.index, () => {
-        return HttpResponse.json(students)
+        return HttpResponse.json(students);
     }),
     http.get(baseUrl + endpoints.teachers.index, () => {
-        return HttpResponse.json(teachers)
+        return HttpResponse.json(teachers);
     }),
     http.get(baseUrl + endpoints.assistants.index, () => {
-        return HttpResponse.json(assistants)
-    })
+        return HttpResponse.json(assistants);
+    }),
 
     /*
     http.post(baseUrl + endpoints.groups.byProject.replace('{projectId}', ':id'),
@@ -598,18 +469,18 @@ export const restHandlers = [
         }
     )
     */
-]
+];
 
-const server = setupServer(...restHandlers)
+const server = setupServer(...restHandlers);
 
 beforeAll(() => {
-    server.listen({ onUnhandledRequest: 'error' })
-})
+    server.listen({ onUnhandledRequest: 'error' });
+});
 
 afterAll(() => {
-    server.close()
-})
+    server.close();
+});
 
 afterEach(() => {
-    server.resetHandlers()
-})
+    server.resetHandlers();
+});
diff --git a/frontend/src/test/unit/structure_check.test.ts b/frontend/src/test/unit/structure_check.test.ts
index 7f9a47e1..db83eb4d 100644
--- a/frontend/src/test/unit/structure_check.test.ts
+++ b/frontend/src/test/unit/structure_check.test.ts
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { describe, it, expect, beforeEach } from 'vitest'
-import { useStructureCheck } from '@/composables/services/structure_check.service.ts'
+import { describe, it, expect, beforeEach } from 'vitest';
+import { useStructureCheck } from '@/composables/services/structure_check.service.ts';
 
 const {
     structureChecks,
@@ -9,44 +9,44 @@ const {
     getStructureCheckByProject,
 
     createStructureCheck,
-    deleteStructureCheck
-} = useStructureCheck()
+    deleteStructureCheck,
+} = useStructureCheck();
 
 describe('structureCheck', (): void => {
     it('gets structure check data by id', async () => {
-        await getStructureCheckByID('1')
-        expect(structureCheck.value).not.toBeNull()
-        expect(structureCheck.value?.name).toBe('.')
-        expect(structureCheck.value?.project).toBeNull()
-        expect(structureCheck.value?.name).toBe('.')
-        expect(structureCheck.value?.name).toBe('.')
-    })
+        await getStructureCheckByID('1');
+        expect(structureCheck.value).not.toBeNull();
+        expect(structureCheck.value?.name).toBe('.');
+        expect(structureCheck.value?.project).toBeNull();
+        expect(structureCheck.value?.name).toBe('.');
+        expect(structureCheck.value?.name).toBe('.');
+    });
 
     it('gets structureCheck data', async () => {
-        await getStructureCheckByProject('123456')
-        expect(structureChecks).not.toBeNull()
-        expect(Array.isArray(structureChecks.value)).toBe(true)
-        expect(structureChecks.value?.length).toBe(4)
-        expect(structureChecks.value).not.toBeNull()
-
-        expect(structureChecks.value?.[0]?.name).toBe('.')
-        expect(structureChecks.value?.[0]?.project).toBeNull()
-        expect(structureChecks.value?.[0]?.obligated_extensions).toEqual([])
-        expect(structureChecks.value?.[0]?.blocked_extensions).toEqual([])
-
-        expect(structureChecks.value?.[1]?.name).toBe('folder1')
-        expect(structureChecks.value?.[1]?.project).toBeNull()
-        expect(structureChecks.value?.[1]?.obligated_extensions).toEqual([])
-        expect(structureChecks.value?.[1]?.blocked_extensions).toEqual([])
-
-        expect(structureChecks.value?.[2]?.name).toBe('folder3')
-        expect(structureChecks.value?.[2]?.project).toBeNull()
-        expect(structureChecks.value?.[2]?.obligated_extensions).toEqual([])
-        expect(structureChecks.value?.[2]?.blocked_extensions).toEqual([])
-
-        expect(structureChecks.value?.[3]?.name).toBe('folder3/folder3-1')
-        expect(structureChecks.value?.[3]?.project).toBeNull()
-        expect(structureChecks.value?.[3]?.obligated_extensions).toEqual([])
-        expect(structureChecks.value?.[3]?.blocked_extensions).toEqual([])
-    })
-})
+        await getStructureCheckByProject('123456');
+        expect(structureChecks).not.toBeNull();
+        expect(Array.isArray(structureChecks.value)).toBe(true);
+        expect(structureChecks.value?.length).toBe(4);
+        expect(structureChecks.value).not.toBeNull();
+
+        expect(structureChecks.value?.[0]?.name).toBe('.');
+        expect(structureChecks.value?.[0]?.project).toBeNull();
+        expect(structureChecks.value?.[0]?.obligated_extensions).toEqual([]);
+        expect(structureChecks.value?.[0]?.blocked_extensions).toEqual([]);
+
+        expect(structureChecks.value?.[1]?.name).toBe('folder1');
+        expect(structureChecks.value?.[1]?.project).toBeNull();
+        expect(structureChecks.value?.[1]?.obligated_extensions).toEqual([]);
+        expect(structureChecks.value?.[1]?.blocked_extensions).toEqual([]);
+
+        expect(structureChecks.value?.[2]?.name).toBe('folder3');
+        expect(structureChecks.value?.[2]?.project).toBeNull();
+        expect(structureChecks.value?.[2]?.obligated_extensions).toEqual([]);
+        expect(structureChecks.value?.[2]?.blocked_extensions).toEqual([]);
+
+        expect(structureChecks.value?.[3]?.name).toBe('folder3/folder3-1');
+        expect(structureChecks.value?.[3]?.project).toBeNull();
+        expect(structureChecks.value?.[3]?.obligated_extensions).toEqual([]);
+        expect(structureChecks.value?.[3]?.blocked_extensions).toEqual([]);
+    });
+});
diff --git a/frontend/src/test/unit/student_service.test.ts b/frontend/src/test/unit/student_service.test.ts
index 341c8dc7..f966e4bc 100644
--- a/frontend/src/test/unit/student_service.test.ts
+++ b/frontend/src/test/unit/student_service.test.ts
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { describe, it, expect, beforeEach } from 'vitest'
-import { useStudents } from '@/composables/services/students.service.ts'
+import { describe, it, expect, beforeEach } from 'vitest';
+import { useStudents } from '@/composables/services/students.service.ts';
 
 const {
     students,
@@ -19,164 +19,142 @@ const {
     studentJoinCourse,
     studentLeaveCourse,
     studentJoinGroup,
-    studentLeaveGroup
-} = useStudents()
+    studentLeaveGroup,
+} = useStudents();
 
 describe('students', (): void => {
     it('gets student data by id', async () => {
-        await getStudentByID('1')
-        expect(student.value).not.toBeNull()
-        expect(student.value?.username).toBe('jdoe')
-        expect(student.value?.is_staff).toBe(false)
-        expect(student.value?.email).toBe('John.Doe@hotmail.com')
-        expect(student.value?.first_name).toBe('John')
-        expect(student.value?.last_name).toBe('Doe')
-        expect(student.value?.last_enrolled).toBe(2023)
-        expect(student.value?.studentId).toBeNull()
-        expect(student.value?.last_login).toBeNull()
-        expect(student.value?.create_time.toISOString()).toEqual(
-            '2024-07-20T23:15:00.000Z'
-        )
-        expect(student.value?.courses).toEqual([])
-        expect(student.value?.groups).toEqual([])
-        expect(student.value?.faculties).toEqual([])
-    })
+        await getStudentByID('1');
+        expect(student.value).not.toBeNull();
+        expect(student.value?.username).toBe('jdoe');
+        expect(student.value?.is_staff).toBe(false);
+        expect(student.value?.email).toBe('John.Doe@hotmail.com');
+        expect(student.value?.first_name).toBe('John');
+        expect(student.value?.last_name).toBe('Doe');
+        expect(student.value?.last_enrolled).toBe(2023);
+        expect(student.value?.studentId).toBeNull();
+        expect(student.value?.last_login).toBeNull();
+        expect(student.value?.create_time.toISOString()).toEqual('2024-07-20T23:15:00.000Z');
+        expect(student.value?.courses).toEqual([]);
+        expect(student.value?.groups).toEqual([]);
+        expect(student.value?.faculties).toEqual([]);
+    });
 
     it('gets students data', async () => {
-        await getStudents()
-        expect(students).not.toBeNull()
-        expect(Array.isArray(students.value)).toBe(true)
-        expect(students.value?.length).toBe(4)
-
-        expect(students.value?.[0]?.username).toBe('jdoe')
-        expect(students.value?.[0]?.is_staff).toBe(false)
-        expect(students.value?.[0]?.email).toBe('John.Doe@hotmail.com')
-        expect(students.value?.[0]?.first_name).toBe('John')
-        expect(students.value?.[0]?.last_name).toBe('Doe')
-        expect(students.value?.[0]?.last_enrolled).toBe(2023)
-        expect(students.value?.[0]?.studentId).toBeNull()
-        expect(students.value?.[0]?.last_login).toBeNull()
-        expect(students.value?.[0]?.create_time).toEqual(
-            new Date('July 21, 2024 01:15:00')
-        )
-        expect(students.value?.[0]?.courses).toEqual([])
-        expect(students.value?.[0]?.groups).toEqual([])
-        expect(students.value?.[0]?.faculties).toEqual([])
-
-        expect(students.value?.[1]?.username).toBe('bverhae')
-        expect(students.value?.[1]?.is_staff).toBe(false)
-        expect(students.value?.[1]?.email).toBe('Bartje.Verhaege@gmail.com')
-        expect(students.value?.[1]?.first_name).toBe('Bartje')
-        expect(students.value?.[1]?.last_name).toBe('Verhaege')
-        expect(students.value?.[1]?.last_enrolled).toBe(2023)
-        expect(students.value?.[1]?.studentId).toBeNull()
-        expect(students.value?.[1]?.last_login).toBeNull()
-        expect(students.value?.[1]?.create_time).toEqual(
-            new Date('July 21, 2024 01:15:00')
-        )
-        expect(students.value?.[1]?.courses).toEqual([])
-        expect(students.value?.[1]?.groups).toEqual([])
-        expect(students.value?.[1]?.faculties).toEqual([])
-
-        expect(students.value?.[2]?.username).toBe('tverslyp')
-        expect(students.value?.[2]?.is_staff).toBe(true)
-        expect(students.value?.[2]?.email).toBe('Tybo.Verslype@UGent.be')
-        expect(students.value?.[2]?.first_name).toBe('Tybo')
-        expect(students.value?.[2]?.last_name).toBe('Verslype')
-        expect(students.value?.[2]?.last_enrolled).toBe(2023)
-        expect(students.value?.[2]?.studentId).toBe('02012470')
-        expect(students.value?.[2]?.last_login).toEqual(
-            new Date('July 30, 2024 01:15:00')
-        )
-        expect(students.value?.[2]?.create_time).toEqual(
-            new Date('July 21, 2024 01:15:00')
-        )
-        expect(students.value?.[2]?.courses).toEqual([])
-        expect(students.value?.[2]?.groups).toEqual([])
-        expect(students.value?.[2]?.faculties).toEqual([])
-
-        expect(students.value?.[3]?.username).toBe('somtin')
-        expect(students.value?.[3]?.is_staff).toBe(false)
-        expect(students.value?.[3]?.email).toBe('somtin.somtin@gmail.com')
-        expect(students.value?.[3]?.first_name).toBe('somtin')
-        expect(students.value?.[3]?.last_name).toBe('somtin')
-        expect(students.value?.[3]?.last_enrolled).toBe(2023)
-        expect(students.value?.[3]?.studentId).toBeNull()
-        expect(students.value?.[3]?.last_login).toBeNull()
-        expect(students.value?.[3]?.create_time).toEqual(
-            new Date('July 21, 2024 01:15:00')
-        )
-        expect(students.value?.[3]?.courses).toEqual([])
-        expect(students.value?.[3]?.groups).toEqual([])
-        expect(students.value?.[3]?.faculties).toEqual([])
-    })
+        await getStudents();
+        expect(students).not.toBeNull();
+        expect(Array.isArray(students.value)).toBe(true);
+        expect(students.value?.length).toBe(4);
+
+        expect(students.value?.[0]?.username).toBe('jdoe');
+        expect(students.value?.[0]?.is_staff).toBe(false);
+        expect(students.value?.[0]?.email).toBe('John.Doe@hotmail.com');
+        expect(students.value?.[0]?.first_name).toBe('John');
+        expect(students.value?.[0]?.last_name).toBe('Doe');
+        expect(students.value?.[0]?.last_enrolled).toBe(2023);
+        expect(students.value?.[0]?.studentId).toBeNull();
+        expect(students.value?.[0]?.last_login).toBeNull();
+        expect(students.value?.[0]?.create_time).toEqual(new Date('July 21, 2024 01:15:00'));
+        expect(students.value?.[0]?.courses).toEqual([]);
+        expect(students.value?.[0]?.groups).toEqual([]);
+        expect(students.value?.[0]?.faculties).toEqual([]);
+
+        expect(students.value?.[1]?.username).toBe('bverhae');
+        expect(students.value?.[1]?.is_staff).toBe(false);
+        expect(students.value?.[1]?.email).toBe('Bartje.Verhaege@gmail.com');
+        expect(students.value?.[1]?.first_name).toBe('Bartje');
+        expect(students.value?.[1]?.last_name).toBe('Verhaege');
+        expect(students.value?.[1]?.last_enrolled).toBe(2023);
+        expect(students.value?.[1]?.studentId).toBeNull();
+        expect(students.value?.[1]?.last_login).toBeNull();
+        expect(students.value?.[1]?.create_time).toEqual(new Date('July 21, 2024 01:15:00'));
+        expect(students.value?.[1]?.courses).toEqual([]);
+        expect(students.value?.[1]?.groups).toEqual([]);
+        expect(students.value?.[1]?.faculties).toEqual([]);
+
+        expect(students.value?.[2]?.username).toBe('tverslyp');
+        expect(students.value?.[2]?.is_staff).toBe(true);
+        expect(students.value?.[2]?.email).toBe('Tybo.Verslype@UGent.be');
+        expect(students.value?.[2]?.first_name).toBe('Tybo');
+        expect(students.value?.[2]?.last_name).toBe('Verslype');
+        expect(students.value?.[2]?.last_enrolled).toBe(2023);
+        expect(students.value?.[2]?.studentId).toBe('02012470');
+        expect(students.value?.[2]?.last_login).toEqual(new Date('July 30, 2024 01:15:00'));
+        expect(students.value?.[2]?.create_time).toEqual(new Date('July 21, 2024 01:15:00'));
+        expect(students.value?.[2]?.courses).toEqual([]);
+        expect(students.value?.[2]?.groups).toEqual([]);
+        expect(students.value?.[2]?.faculties).toEqual([]);
+
+        expect(students.value?.[3]?.username).toBe('somtin');
+        expect(students.value?.[3]?.is_staff).toBe(false);
+        expect(students.value?.[3]?.email).toBe('somtin.somtin@gmail.com');
+        expect(students.value?.[3]?.first_name).toBe('somtin');
+        expect(students.value?.[3]?.last_name).toBe('somtin');
+        expect(students.value?.[3]?.last_enrolled).toBe(2023);
+        expect(students.value?.[3]?.studentId).toBeNull();
+        expect(students.value?.[3]?.last_login).toBeNull();
+        expect(students.value?.[3]?.create_time).toEqual(new Date('July 21, 2024 01:15:00'));
+        expect(students.value?.[3]?.courses).toEqual([]);
+        expect(students.value?.[3]?.groups).toEqual([]);
+        expect(students.value?.[3]?.faculties).toEqual([]);
+    });
 
     it('gets students data by course', async () => {
-        await getStudentsByCourse('1')
-        expect(students).not.toBeNull()
-        expect(Array.isArray(students.value)).toBe(true)
-        expect(students.value?.length).toBe(4)
-
-        expect(students.value?.[0]?.username).toBe('jdoe')
-        expect(students.value?.[0]?.is_staff).toBe(false)
-        expect(students.value?.[0]?.email).toBe('John.Doe@hotmail.com')
-        expect(students.value?.[0]?.first_name).toBe('John')
-        expect(students.value?.[0]?.last_name).toBe('Doe')
-        expect(students.value?.[0]?.last_enrolled).toBe(2023)
-        expect(students.value?.[0]?.studentId).toBeNull()
-        expect(students.value?.[0]?.last_login).toBeNull()
-        expect(students.value?.[0]?.create_time).toEqual(
-            new Date('July 21, 2024 01:15:00')
-        )
-        expect(students.value?.[0]?.courses).toEqual([])
-        expect(students.value?.[0]?.groups).toEqual([])
-        expect(students.value?.[0]?.faculties).toEqual([])
-
-        expect(students.value?.[1]?.username).toBe('bverhae')
-        expect(students.value?.[1]?.is_staff).toBe(false)
-        expect(students.value?.[1]?.email).toBe('Bartje.Verhaege@gmail.com')
-        expect(students.value?.[1]?.first_name).toBe('Bartje')
-        expect(students.value?.[1]?.last_name).toBe('Verhaege')
-        expect(students.value?.[1]?.last_enrolled).toBe(2023)
-        expect(students.value?.[1]?.studentId).toBeNull()
-        expect(students.value?.[1]?.last_login).toBeNull()
-        expect(students.value?.[1]?.create_time).toEqual(
-            new Date('July 21, 2024 01:15:00')
-        )
-        expect(students.value?.[1]?.courses).toEqual([])
-        expect(students.value?.[1]?.groups).toEqual([])
-        expect(students.value?.[1]?.faculties).toEqual([])
-
-        expect(students.value?.[2]?.username).toBe('tverslyp')
-        expect(students.value?.[2]?.is_staff).toBe(true)
-        expect(students.value?.[2]?.email).toBe('Tybo.Verslype@UGent.be')
-        expect(students.value?.[2]?.first_name).toBe('Tybo')
-        expect(students.value?.[2]?.last_name).toBe('Verslype')
-        expect(students.value?.[2]?.last_enrolled).toBe(2023)
-        expect(students.value?.[2]?.studentId).toBe('02012470')
-        expect(students.value?.[2]?.last_login).toEqual(
-            new Date('July 30, 2024 01:15:00')
-        )
-        expect(students.value?.[2]?.create_time).toEqual(
-            new Date('July 21, 2024 01:15:00')
-        )
-        expect(students.value?.[2]?.courses).toEqual([])
-        expect(students.value?.[2]?.groups).toEqual([])
-        expect(students.value?.[2]?.faculties).toEqual([])
-
-        expect(students.value?.[3]?.username).toBe('somtin')
-        expect(students.value?.[3]?.is_staff).toBe(false)
-        expect(students.value?.[3]?.email).toBe('somtin.somtin@gmail.com')
-        expect(students.value?.[3]?.first_name).toBe('somtin')
-        expect(students.value?.[3]?.last_name).toBe('somtin')
-        expect(students.value?.[3]?.last_enrolled).toBe(2023)
-        expect(students.value?.[3]?.studentId).toBeNull()
-        expect(students.value?.[3]?.last_login).toBeNull()
-        expect(students.value?.[3]?.create_time).toEqual(
-            new Date('July 21, 2024 01:15:00')
-        )
-        expect(students.value?.[3]?.courses).toEqual([])
-        expect(students.value?.[3]?.groups).toEqual([])
-        expect(students.value?.[3]?.faculties).toEqual([])
-    })
-})
+        await getStudentsByCourse('1');
+        expect(students).not.toBeNull();
+        expect(Array.isArray(students.value)).toBe(true);
+        expect(students.value?.length).toBe(4);
+
+        expect(students.value?.[0]?.username).toBe('jdoe');
+        expect(students.value?.[0]?.is_staff).toBe(false);
+        expect(students.value?.[0]?.email).toBe('John.Doe@hotmail.com');
+        expect(students.value?.[0]?.first_name).toBe('John');
+        expect(students.value?.[0]?.last_name).toBe('Doe');
+        expect(students.value?.[0]?.last_enrolled).toBe(2023);
+        expect(students.value?.[0]?.studentId).toBeNull();
+        expect(students.value?.[0]?.last_login).toBeNull();
+        expect(students.value?.[0]?.create_time).toEqual(new Date('July 21, 2024 01:15:00'));
+        expect(students.value?.[0]?.courses).toEqual([]);
+        expect(students.value?.[0]?.groups).toEqual([]);
+        expect(students.value?.[0]?.faculties).toEqual([]);
+
+        expect(students.value?.[1]?.username).toBe('bverhae');
+        expect(students.value?.[1]?.is_staff).toBe(false);
+        expect(students.value?.[1]?.email).toBe('Bartje.Verhaege@gmail.com');
+        expect(students.value?.[1]?.first_name).toBe('Bartje');
+        expect(students.value?.[1]?.last_name).toBe('Verhaege');
+        expect(students.value?.[1]?.last_enrolled).toBe(2023);
+        expect(students.value?.[1]?.studentId).toBeNull();
+        expect(students.value?.[1]?.last_login).toBeNull();
+        expect(students.value?.[1]?.create_time).toEqual(new Date('July 21, 2024 01:15:00'));
+        expect(students.value?.[1]?.courses).toEqual([]);
+        expect(students.value?.[1]?.groups).toEqual([]);
+        expect(students.value?.[1]?.faculties).toEqual([]);
+
+        expect(students.value?.[2]?.username).toBe('tverslyp');
+        expect(students.value?.[2]?.is_staff).toBe(true);
+        expect(students.value?.[2]?.email).toBe('Tybo.Verslype@UGent.be');
+        expect(students.value?.[2]?.first_name).toBe('Tybo');
+        expect(students.value?.[2]?.last_name).toBe('Verslype');
+        expect(students.value?.[2]?.last_enrolled).toBe(2023);
+        expect(students.value?.[2]?.studentId).toBe('02012470');
+        expect(students.value?.[2]?.last_login).toEqual(new Date('July 30, 2024 01:15:00'));
+        expect(students.value?.[2]?.create_time).toEqual(new Date('July 21, 2024 01:15:00'));
+        expect(students.value?.[2]?.courses).toEqual([]);
+        expect(students.value?.[2]?.groups).toEqual([]);
+        expect(students.value?.[2]?.faculties).toEqual([]);
+
+        expect(students.value?.[3]?.username).toBe('somtin');
+        expect(students.value?.[3]?.is_staff).toBe(false);
+        expect(students.value?.[3]?.email).toBe('somtin.somtin@gmail.com');
+        expect(students.value?.[3]?.first_name).toBe('somtin');
+        expect(students.value?.[3]?.last_name).toBe('somtin');
+        expect(students.value?.[3]?.last_enrolled).toBe(2023);
+        expect(students.value?.[3]?.studentId).toBeNull();
+        expect(students.value?.[3]?.last_login).toBeNull();
+        expect(students.value?.[3]?.create_time).toEqual(new Date('July 21, 2024 01:15:00'));
+        expect(students.value?.[3]?.courses).toEqual([]);
+        expect(students.value?.[3]?.groups).toEqual([]);
+        expect(students.value?.[3]?.faculties).toEqual([]);
+    });
+});
diff --git a/frontend/src/test/unit/submission_service.test.ts b/frontend/src/test/unit/submission_service.test.ts
index ec52c83a..e555aa3f 100644
--- a/frontend/src/test/unit/submission_service.test.ts
+++ b/frontend/src/test/unit/submission_service.test.ts
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { describe, it, expect, beforeEach } from 'vitest'
-import { useSubmission } from '@/composables/services/submission.service.ts'
+import { describe, it, expect, beforeEach } from 'vitest';
+import { useSubmission } from '@/composables/services/submission.service.ts';
 
 const {
     submissions,
@@ -10,65 +10,55 @@ const {
     getSubmissionByGroup,
 
     createSubmission,
-    deleteSubmission
-} = useSubmission()
+    deleteSubmission,
+} = useSubmission();
 
 describe('submissions', (): void => {
     it('gets submissions data by id', async () => {
-        await getSubmissionByID('1')
-        expect(submission.value).not.toBeNull()
-        expect(submission.value?.group).toBeNull()
-        expect(submission.value?.files).toEqual([])
-        expect(submission.value?.extra_checks_results).toEqual([])
-        expect(submission.value?.submission_number).toBe(1)
-        expect(submission.value?.submission_time).toEqual(
-            new Date('July 21, 2024 01:15:00')
-        )
-    })
+        await getSubmissionByID('1');
+        expect(submission.value).not.toBeNull();
+        expect(submission.value?.group).toBeNull();
+        expect(submission.value?.files).toEqual([]);
+        expect(submission.value?.extra_checks_results).toEqual([]);
+        expect(submission.value?.submission_number).toBe(1);
+        expect(submission.value?.submission_time).toEqual(new Date('July 21, 2024 01:15:00'));
+    });
 
     it('gets submissions data by group', async () => {
-        await getSubmissionByGroup('1')
-        expect(submissions).not.toBeNull()
-        expect(Array.isArray(submissions.value)).toBe(true)
-        expect(submissions.value?.length).toBe(2)
+        await getSubmissionByGroup('1');
+        expect(submissions).not.toBeNull();
+        expect(Array.isArray(submissions.value)).toBe(true);
+        expect(submissions.value?.length).toBe(2);
 
-        expect(submissions.value?.[0]?.group).toBeNull()
-        expect(submissions.value?.[0]?.files).toEqual([])
-        expect(submissions.value?.[0]?.extra_checks_results).toEqual([])
-        expect(submissions.value?.[0]?.submission_number).toBe(1)
-        expect(submissions.value?.[0]?.submission_time).toEqual(
-            new Date('July 21, 2024 01:15:00')
-        )
+        expect(submissions.value?.[0]?.group).toBeNull();
+        expect(submissions.value?.[0]?.files).toEqual([]);
+        expect(submissions.value?.[0]?.extra_checks_results).toEqual([]);
+        expect(submissions.value?.[0]?.submission_number).toBe(1);
+        expect(submissions.value?.[0]?.submission_time).toEqual(new Date('July 21, 2024 01:15:00'));
 
-        expect(submissions.value?.[1]?.group).toBeNull()
-        expect(submissions.value?.[1]?.files).toEqual([])
-        expect(submissions.value?.[1]?.extra_checks_results).toEqual([])
-        expect(submissions.value?.[1]?.submission_number).toBe(2)
-        expect(submissions.value?.[1]?.submission_time).toEqual(
-            new Date('July 21, 2024 01:15:00')
-        )
-    })
+        expect(submissions.value?.[1]?.group).toBeNull();
+        expect(submissions.value?.[1]?.files).toEqual([]);
+        expect(submissions.value?.[1]?.extra_checks_results).toEqual([]);
+        expect(submissions.value?.[1]?.submission_number).toBe(2);
+        expect(submissions.value?.[1]?.submission_time).toEqual(new Date('July 21, 2024 01:15:00'));
+    });
 
     it('gets submissions data by project', async () => {
-        await getSubmissionByProject('0')
-        expect(submissions).not.toBeNull()
-        expect(Array.isArray(submissions.value)).toBe(true)
-        expect(submissions.value?.length).toBe(2)
+        await getSubmissionByProject('0');
+        expect(submissions).not.toBeNull();
+        expect(Array.isArray(submissions.value)).toBe(true);
+        expect(submissions.value?.length).toBe(2);
 
-        expect(submissions.value?.[0]?.group).toBeNull()
-        expect(submissions.value?.[0]?.files).toEqual([])
-        expect(submissions.value?.[0]?.extra_checks_results).toEqual([])
-        expect(submissions.value?.[0]?.submission_number).toBe(1)
-        expect(submissions.value?.[0]?.submission_time).toEqual(
-            new Date('July 21, 2024 01:15:00')
-        )
+        expect(submissions.value?.[0]?.group).toBeNull();
+        expect(submissions.value?.[0]?.files).toEqual([]);
+        expect(submissions.value?.[0]?.extra_checks_results).toEqual([]);
+        expect(submissions.value?.[0]?.submission_number).toBe(1);
+        expect(submissions.value?.[0]?.submission_time).toEqual(new Date('July 21, 2024 01:15:00'));
 
-        expect(submissions.value?.[1]?.group).toBeNull()
-        expect(submissions.value?.[1]?.files).toEqual([])
-        expect(submissions.value?.[1]?.extra_checks_results).toEqual([])
-        expect(submissions.value?.[1]?.submission_number).toBe(2)
-        expect(submissions.value?.[1]?.submission_time).toEqual(
-            new Date('July 21, 2024 01:15:00')
-        )
-    })
-})
+        expect(submissions.value?.[1]?.group).toBeNull();
+        expect(submissions.value?.[1]?.files).toEqual([]);
+        expect(submissions.value?.[1]?.extra_checks_results).toEqual([]);
+        expect(submissions.value?.[1]?.submission_number).toBe(2);
+        expect(submissions.value?.[1]?.submission_time).toEqual(new Date('July 21, 2024 01:15:00'));
+    });
+});
diff --git a/frontend/src/test/unit/submission_status_service.test.ts b/frontend/src/test/unit/submission_status_service.test.ts
index e9a47db2..0573af2c 100644
--- a/frontend/src/test/unit/submission_status_service.test.ts
+++ b/frontend/src/test/unit/submission_status_service.test.ts
@@ -1,15 +1,15 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { describe, it, expect, beforeEach } from 'vitest'
-import { useSubmissionStatus } from '@/composables/services/submissionStatus.service.ts'
+import { describe, it, expect, beforeEach } from 'vitest';
+import { useSubmissionStatus } from '@/composables/services/submission_status.service.ts';
 
-const { submissionStatus, getSubmissionStatusByProject } = useSubmissionStatus()
+const { submissionStatus, getSubmissionStatusByProject } = useSubmissionStatus();
 
 describe('submision_status', (): void => {
     it('gets submision status data by project', async () => {
-        await getSubmissionStatusByProject('0')
-        expect(submissionStatus.value).not.toBeNull()
-        expect(submissionStatus.value?.groups_submitted).toBe(1)
-        expect(submissionStatus.value?.non_empty_groups).toBe(2)
-        expect(submissionStatus.value?.submissions_passed).toBe(1)
-    })
-})
+        await getSubmissionStatusByProject('0');
+        expect(submissionStatus.value).not.toBeNull();
+        expect(submissionStatus.value?.groups_submitted).toBe(1);
+        expect(submissionStatus.value?.non_empty_groups).toBe(2);
+        expect(submissionStatus.value?.submissions_passed).toBe(1);
+    });
+});
diff --git a/frontend/src/test/unit/teacher_service.test.ts b/frontend/src/test/unit/teacher_service.test.ts
index 4fc2e693..e0816395 100644
--- a/frontend/src/test/unit/teacher_service.test.ts
+++ b/frontend/src/test/unit/teacher_service.test.ts
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { describe, it, expect, beforeEach } from 'vitest'
-import { useTeacher } from '@/composables/services/teachers.service.ts'
+import { describe, it, expect, beforeEach } from 'vitest';
+import { useTeacher } from '@/composables/services/teachers.service.ts';
 
 const {
     teachers,
@@ -15,90 +15,80 @@ const {
     deleteTeacher,
 
     teacherJoinCourse,
-    teacherLeaveCourse
-} = useTeacher()
+    teacherLeaveCourse,
+} = useTeacher();
 
 describe('teachers', (): void => {
     it('gets teacher data by id', async () => {
-        await getTeacherByID('123')
-        expect(teacher.value).not.toBeNull()
-        expect(teacher.value?.username).toBe('tboonen')
-        expect(teacher.value?.is_staff).toBe(false)
-        expect(teacher.value?.email).toBe('Tom.Boonen@gmail.be')
-        expect(teacher.value?.first_name).toBe('Tom')
-        expect(teacher.value?.last_name).toBe('Boonen')
-        expect(teacher.value?.last_enrolled).toBe(2023)
-        expect(teacher.value?.last_login).toBeNull()
-        expect(teacher.value?.create_time).toEqual(
-            new Date('July 21, 2024 01:15:00')
-        )
-        expect(teacher.value?.courses).toEqual([])
-        expect(teacher.value?.faculties).toEqual([])
-    })
+        await getTeacherByID('123');
+        expect(teacher.value).not.toBeNull();
+        expect(teacher.value?.username).toBe('tboonen');
+        expect(teacher.value?.is_staff).toBe(false);
+        expect(teacher.value?.email).toBe('Tom.Boonen@gmail.be');
+        expect(teacher.value?.first_name).toBe('Tom');
+        expect(teacher.value?.last_name).toBe('Boonen');
+        expect(teacher.value?.last_enrolled).toBe(2023);
+        expect(teacher.value?.last_login).toBeNull();
+        expect(teacher.value?.create_time).toEqual(new Date('July 21, 2024 01:15:00'));
+        expect(teacher.value?.courses).toEqual([]);
+        expect(teacher.value?.faculties).toEqual([]);
+    });
 
     it('gets teacher data', async () => {
-        await getTeachers()
-        expect(teachers).not.toBeNull()
-        expect(Array.isArray(teachers.value)).toBe(true)
-        expect(teachers.value?.length).toBe(2)
+        await getTeachers();
+        expect(teachers).not.toBeNull();
+        expect(Array.isArray(teachers.value)).toBe(true);
+        expect(teachers.value?.length).toBe(2);
 
-        expect(teachers.value?.[0]?.username).toBe('tboonen')
-        expect(teachers.value?.[0]?.is_staff).toBe(false)
-        expect(teachers.value?.[0]?.email).toBe('Tom.Boonen@gmail.be')
-        expect(teachers.value?.[0]?.first_name).toBe('Tom')
-        expect(teachers.value?.[0]?.last_name).toBe('Boonen')
-        expect(teachers.value?.[0]?.last_enrolled).toBe(2023)
-        expect(teachers.value?.[0]?.last_login).toBeNull()
-        expect(teachers.value?.[0]?.create_time).toEqual(
-            new Date('July 21, 2024 01:15:00')
-        )
-        expect(teachers.value?.[0]?.courses).toEqual([])
-        expect(teachers.value?.[0]?.faculties).toEqual([])
+        expect(teachers.value?.[0]?.username).toBe('tboonen');
+        expect(teachers.value?.[0]?.is_staff).toBe(false);
+        expect(teachers.value?.[0]?.email).toBe('Tom.Boonen@gmail.be');
+        expect(teachers.value?.[0]?.first_name).toBe('Tom');
+        expect(teachers.value?.[0]?.last_name).toBe('Boonen');
+        expect(teachers.value?.[0]?.last_enrolled).toBe(2023);
+        expect(teachers.value?.[0]?.last_login).toBeNull();
+        expect(teachers.value?.[0]?.create_time).toEqual(new Date('July 21, 2024 01:15:00'));
+        expect(teachers.value?.[0]?.courses).toEqual([]);
+        expect(teachers.value?.[0]?.faculties).toEqual([]);
 
-        expect(teachers.value?.[1]?.username).toBe('psagan')
-        expect(teachers.value?.[1]?.is_staff).toBe(false)
-        expect(teachers.value?.[1]?.email).toBe('Peter.Sagan@gmail.com')
-        expect(teachers.value?.[1]?.first_name).toBe('Peter')
-        expect(teachers.value?.[1]?.last_name).toBe('Sagan')
-        expect(teachers.value?.[1]?.last_enrolled).toBe(2023)
-        expect(teachers.value?.[0]?.last_login).toBeNull()
-        expect(teachers.value?.[0]?.create_time).toEqual(
-            new Date('July 21, 2024 01:15:00')
-        )
-        expect(teachers.value?.[1]?.courses).toEqual([])
-        expect(teachers.value?.[1]?.faculties).toEqual([])
-    })
+        expect(teachers.value?.[1]?.username).toBe('psagan');
+        expect(teachers.value?.[1]?.is_staff).toBe(false);
+        expect(teachers.value?.[1]?.email).toBe('Peter.Sagan@gmail.com');
+        expect(teachers.value?.[1]?.first_name).toBe('Peter');
+        expect(teachers.value?.[1]?.last_name).toBe('Sagan');
+        expect(teachers.value?.[1]?.last_enrolled).toBe(2023);
+        expect(teachers.value?.[0]?.last_login).toBeNull();
+        expect(teachers.value?.[0]?.create_time).toEqual(new Date('July 21, 2024 01:15:00'));
+        expect(teachers.value?.[1]?.courses).toEqual([]);
+        expect(teachers.value?.[1]?.faculties).toEqual([]);
+    });
 
     it('gets teacher data by course', async () => {
-        await getTeacherByCourse('1')
-        expect(teachers).not.toBeNull()
-        expect(Array.isArray(teachers.value)).toBe(true)
-        expect(teachers.value?.length).toBe(2)
+        await getTeacherByCourse('1');
+        expect(teachers).not.toBeNull();
+        expect(Array.isArray(teachers.value)).toBe(true);
+        expect(teachers.value?.length).toBe(2);
 
-        expect(teachers.value?.[0]?.username).toBe('tboonen')
-        expect(teachers.value?.[0]?.is_staff).toBe(false)
-        expect(teachers.value?.[0]?.email).toBe('Tom.Boonen@gmail.be')
-        expect(teachers.value?.[0]?.first_name).toBe('Tom')
-        expect(teachers.value?.[0]?.last_name).toBe('Boonen')
-        expect(teachers.value?.[0]?.last_enrolled).toBe(2023)
-        expect(teachers.value?.[0]?.last_login).toBeNull()
-        expect(teachers.value?.[0]?.create_time).toEqual(
-            new Date('July 21, 2024 01:15:00')
-        )
-        expect(teachers.value?.[0]?.courses).toEqual([])
-        expect(teachers.value?.[0]?.faculties).toEqual([])
+        expect(teachers.value?.[0]?.username).toBe('tboonen');
+        expect(teachers.value?.[0]?.is_staff).toBe(false);
+        expect(teachers.value?.[0]?.email).toBe('Tom.Boonen@gmail.be');
+        expect(teachers.value?.[0]?.first_name).toBe('Tom');
+        expect(teachers.value?.[0]?.last_name).toBe('Boonen');
+        expect(teachers.value?.[0]?.last_enrolled).toBe(2023);
+        expect(teachers.value?.[0]?.last_login).toBeNull();
+        expect(teachers.value?.[0]?.create_time).toEqual(new Date('July 21, 2024 01:15:00'));
+        expect(teachers.value?.[0]?.courses).toEqual([]);
+        expect(teachers.value?.[0]?.faculties).toEqual([]);
 
-        expect(teachers.value?.[1]?.username).toBe('psagan')
-        expect(teachers.value?.[1]?.is_staff).toBe(false)
-        expect(teachers.value?.[1]?.email).toBe('Peter.Sagan@gmail.com')
-        expect(teachers.value?.[1]?.first_name).toBe('Peter')
-        expect(teachers.value?.[1]?.last_name).toBe('Sagan')
-        expect(teachers.value?.[1]?.last_enrolled).toBe(2023)
-        expect(teachers.value?.[0]?.last_login).toBeNull()
-        expect(teachers.value?.[0]?.create_time).toEqual(
-            new Date('July 21, 2024 01:15:00')
-        )
-        expect(teachers.value?.[1]?.courses).toEqual([])
-        expect(teachers.value?.[1]?.faculties).toEqual([])
-    })
-})
+        expect(teachers.value?.[1]?.username).toBe('psagan');
+        expect(teachers.value?.[1]?.is_staff).toBe(false);
+        expect(teachers.value?.[1]?.email).toBe('Peter.Sagan@gmail.com');
+        expect(teachers.value?.[1]?.first_name).toBe('Peter');
+        expect(teachers.value?.[1]?.last_name).toBe('Sagan');
+        expect(teachers.value?.[1]?.last_enrolled).toBe(2023);
+        expect(teachers.value?.[0]?.last_login).toBeNull();
+        expect(teachers.value?.[0]?.create_time).toEqual(new Date('July 21, 2024 01:15:00'));
+        expect(teachers.value?.[1]?.courses).toEqual([]);
+        expect(teachers.value?.[1]?.faculties).toEqual([]);
+    });
+});
diff --git a/frontend/src/types/Course.ts b/frontend/src/types/Course.ts
index f7d14768..e87f7f6b 100644
--- a/frontend/src/types/Course.ts
+++ b/frontend/src/types/Course.ts
@@ -1,7 +1,7 @@
-import { type Assistant } from './Assistant'
-import { type Project } from './Projects'
-import { type Student } from './Student'
-import { type Teacher } from './Teacher'
+import { type Assistant } from './users/Assistant.ts';
+import { type Project } from './Projects';
+import { type Student } from './users/Student.ts';
+import { type Teacher } from './users/Teacher.ts';
 
 export class Course {
     constructor(
@@ -13,7 +13,7 @@ export class Course {
         public teachers: Teacher[] = [],
         public assistants: Assistant[] = [],
         public students: Student[] = [],
-        public projects: Project[] = []
+        public projects: Project[] = [],
     ) {}
 
     /**
@@ -21,7 +21,7 @@ export class Course {
      * @returns string
      */
     public getCourseYear(): string {
-        return `${this.academic_startyear} - ${this.academic_startyear + 1}`
+        return `${this.academic_startyear} - ${this.academic_startyear + 1}`;
     }
 
     /**
@@ -30,12 +30,6 @@ export class Course {
      * @param course
      */
     static fromJSON(course: Course): Course {
-        return new Course(
-            course.id,
-            course.name,
-            course.description,
-            course.academic_startyear,
-            course.parent_course
-        )
+        return new Course(course.id, course.name, course.description, course.academic_startyear, course.parent_course);
     }
 }
diff --git a/frontend/src/types/Faculty.ts b/frontend/src/types/Faculty.ts
index 2a02bbbd..d2149d96 100644
--- a/frontend/src/types/Faculty.ts
+++ b/frontend/src/types/Faculty.ts
@@ -7,6 +7,6 @@ export class Faculty {
      * @param faculty
      */
     static fromJSON(faculty: Faculty): Faculty {
-        return new Faculty(faculty.name)
+        return new Faculty(faculty.name);
     }
 }
diff --git a/frontend/src/types/Group.ts b/frontend/src/types/Group.ts
index 08265118..b2e29f1b 100644
--- a/frontend/src/types/Group.ts
+++ b/frontend/src/types/Group.ts
@@ -1,6 +1,6 @@
-import { type Project } from './Projects'
-import { type Student } from './Student'
-import { type Submission } from './Submission'
+import { type Project } from './Projects';
+import { type Student } from './users/Student.ts';
+import { type Submission } from './Submission';
 
 export class Group {
     constructor(
@@ -8,7 +8,7 @@ export class Group {
         public score: number = -1,
         public project: Project | null = null,
         public students: Student[] = [],
-        public submissions: Submission[] = []
+        public submissions: Submission[] = [],
     ) {}
 
     /**
@@ -17,16 +17,10 @@ export class Group {
      * @param group
      */
     static fromJSON(group: Group): Group {
-        return new Group(group.id, group.score)
+        return new Group(group.id, group.score);
     }
 
     static fromJSONFullObject(group: Group): Group {
-        return new Group(
-            group.id,
-            group.score,
-            group.project,
-            group.students,
-            group.submissions
-        )
+        return new Group(group.id, group.score, group.project, group.students, group.submissions);
     }
 }
diff --git a/frontend/src/types/Projects.ts b/frontend/src/types/Projects.ts
index 95d2bdd7..8fa0f2a4 100644
--- a/frontend/src/types/Projects.ts
+++ b/frontend/src/types/Projects.ts
@@ -1,8 +1,8 @@
-import { type Course } from './Course'
-import { type ExtraCheck } from './ExtraCheck.ts'
-import { type Group } from './Group'
-import { type StructureCheck } from './StructureCheck.ts'
-import { type Submission } from './Submission'
+import { type Course } from './Course';
+import { type ExtraCheck } from './ExtraCheck.ts';
+import { type Group } from './Group';
+import { type StructureCheck } from './StructureCheck.ts';
+import { type Submission } from './Submission';
 
 export class Project {
     constructor(
@@ -22,7 +22,7 @@ export class Project {
         public structureChecks: StructureCheck[] = [],
         public extra_checks: ExtraCheck[] = [],
         public groups: Group[] = [],
-        public submissions: Submission[] = []
+        public submissions: Submission[] = [],
     ) {}
 
     /**
@@ -42,7 +42,7 @@ export class Project {
             new Date(project.deadline),
             project.max_score,
             project.score_visible,
-            project.group_size
-        )
+            project.group_size,
+        );
     }
 }
diff --git a/frontend/src/types/Response.ts b/frontend/src/types/Response.ts
index 012dce74..d5a97d29 100644
--- a/frontend/src/types/Response.ts
+++ b/frontend/src/types/Response.ts
@@ -7,6 +7,6 @@ export class Response {
      * @param response
      */
     static fromJSON(response: Response): Response {
-        return new Response(response.message)
+        return new Response(response.message);
     }
 }
diff --git a/frontend/src/types/StructureCheck.ts b/frontend/src/types/StructureCheck.ts
index 4580ffa8..45a51543 100644
--- a/frontend/src/types/StructureCheck.ts
+++ b/frontend/src/types/StructureCheck.ts
@@ -1,5 +1,5 @@
-import { type File_extension } from './FileExtension.ts'
-import { type Project } from './Projects'
+import { type File_extension } from './FileExtension.ts';
+import { type Project } from './Projects';
 
 export class StructureCheck {
     constructor(
@@ -7,7 +7,7 @@ export class StructureCheck {
         public name: string,
         public obligated_extensions: File_extension[] = [],
         public blocked_extensions: File_extension[] = [],
-        public project: Project | null = null
+        public project: Project | null = null,
     ) {}
 
     /**
@@ -16,6 +16,6 @@ export class StructureCheck {
      * @param structureCheck
      */
     static fromJSON(structureCheck: StructureCheck): StructureCheck {
-        return new StructureCheck(structureCheck.id, structureCheck.name)
+        return new StructureCheck(structureCheck.id, structureCheck.name);
     }
 }
diff --git a/frontend/src/types/SubmisionStatus.ts b/frontend/src/types/SubmisionStatus.ts
index f52aa89f..159b1129 100644
--- a/frontend/src/types/SubmisionStatus.ts
+++ b/frontend/src/types/SubmisionStatus.ts
@@ -2,7 +2,7 @@ export class SubmissionStatus {
     constructor(
         public non_empty_groups: number,
         public groups_submitted: number,
-        public submissions_passed: number
+        public submissions_passed: number,
     ) {}
 
     /**
@@ -14,7 +14,7 @@ export class SubmissionStatus {
         return new SubmissionStatus(
             submissionStatus.non_empty_groups,
             submissionStatus.groups_submitted,
-            submissionStatus.submissions_passed
-        )
+            submissionStatus.submissions_passed,
+        );
     }
 }
diff --git a/frontend/src/types/Submission.ts b/frontend/src/types/Submission.ts
index 9f3f90f7..c0193c26 100644
--- a/frontend/src/types/Submission.ts
+++ b/frontend/src/types/Submission.ts
@@ -1,4 +1,4 @@
-import { type Group } from './Group'
+import { type Group } from './Group';
 
 export class Submission {
     constructor(
@@ -8,7 +8,7 @@ export class Submission {
         public structureChecks_passed: boolean,
         public group: Group | null = null,
         public files: File[] = [], // TODO check
-        public extra_checks_results: any[] = [] // TODO
+        public extra_checks_results: any[] = [], // TODO
     ) {}
 
     /**
@@ -21,7 +21,7 @@ export class Submission {
             submission.id,
             submission.submission_number,
             new Date(submission.submission_time),
-            submission.structureChecks_passed
-        )
+            submission.structureChecks_passed,
+        );
     }
 }
diff --git a/frontend/src/types/Assistant.ts b/frontend/src/types/users/Assistant.ts
similarity index 65%
rename from frontend/src/types/Assistant.ts
rename to frontend/src/types/users/Assistant.ts
index 8bea967d..84a06f08 100644
--- a/frontend/src/types/Assistant.ts
+++ b/frontend/src/types/users/Assistant.ts
@@ -1,6 +1,6 @@
-import { type Course } from './Course'
-import { type Faculty } from './Faculty'
-import { type Role, User } from '@/types/User.ts'
+import { type Course } from '../Course.ts';
+import { type Faculty } from '../Faculty.ts';
+import { type Role, User } from '@/types/users/User.ts';
 
 export class Assistant extends User {
     constructor(
@@ -15,22 +15,9 @@ export class Assistant extends User {
         public faculties: Faculty[] = [],
         public courses: Course[] = [],
         public create_time: Date,
-        public last_login: Date | null
+        public last_login: Date | null,
     ) {
-        super(
-            id,
-            username,
-            email,
-            first_name,
-            last_name,
-            last_enrolled,
-            is_staff,
-            roles,
-            faculties,
-            create_time,
-            last_login,
-            courses
-        )
+        super(id, username, email, first_name, last_name, last_enrolled, is_staff, roles, faculties, create_time, last_login, courses);
     }
 
     /**
@@ -51,10 +38,8 @@ export class Assistant extends User {
             assistant.faculties,
             assistant.courses,
             new Date(assistant.create_time),
-            assistant.last_login !== null
-                ? new Date(assistant.last_login)
-                : null
-        )
+            assistant.last_login !== null ? new Date(assistant.last_login) : null,
+        );
     }
 
     /**
@@ -63,6 +48,6 @@ export class Assistant extends User {
      * @returns boolean
      */
     public isAssistant(): boolean {
-        return true
+        return true;
     }
 }
diff --git a/frontend/src/types/users/Generics.ts b/frontend/src/types/users/Generics.ts
new file mode 100644
index 00000000..e04bb885
--- /dev/null
+++ b/frontend/src/types/users/Generics.ts
@@ -0,0 +1,5 @@
+import { type Assistant } from '@/types/users/Assistant.ts';
+import { type Teacher } from '@/types/users/Teacher.ts';
+import { type Student } from '@/types/users/Student.ts';
+
+export type RoleUser = Student | Teacher | Assistant;
diff --git a/frontend/src/types/Student.ts b/frontend/src/types/users/Student.ts
similarity index 69%
rename from frontend/src/types/Student.ts
rename to frontend/src/types/users/Student.ts
index 9c4dec1f..a0a37e37 100644
--- a/frontend/src/types/Student.ts
+++ b/frontend/src/types/users/Student.ts
@@ -1,7 +1,7 @@
-import { type Course } from './Course'
-import { type Faculty } from './Faculty'
-import { type Group } from './Group'
-import { type Role, User } from '@/types/User.ts'
+import { type Course } from '../Course.ts';
+import { type Faculty } from '../Faculty.ts';
+import { type Group } from '../Group.ts';
+import { type Role, User } from '@/types/users/User.ts';
 
 export class Student extends User {
     constructor(
@@ -20,20 +20,7 @@ export class Student extends User {
         public groups: Group[] = [],
         public faculties: Faculty[] = []
     ) {
-        super(
-            id,
-            username,
-            email,
-            first_name,
-            last_name,
-            last_enrolled,
-            is_staff,
-            roles,
-            faculties,
-            create_time,
-            last_login,
-            courses
-        )
+        super(id, username, email, first_name, last_name, last_enrolled, is_staff, roles, faculties, create_time, last_login);
     }
 
     /**
@@ -52,8 +39,8 @@ export class Student extends User {
             student.last_enrolled,
             new Date(student.create_time),
             student.last_login !== null ? new Date(student.last_login) : null,
-            student.studentId
-        )
+            student.studentId,
+        );
     }
 
     /**
@@ -62,6 +49,6 @@ export class Student extends User {
      * @returns boolean
      */
     public isStudent(): boolean {
-        return true
+        return true;
     }
 }
diff --git a/frontend/src/types/Teacher.ts b/frontend/src/types/users/Teacher.ts
similarity index 69%
rename from frontend/src/types/Teacher.ts
rename to frontend/src/types/users/Teacher.ts
index a98e7847..d75597b3 100644
--- a/frontend/src/types/Teacher.ts
+++ b/frontend/src/types/users/Teacher.ts
@@ -1,6 +1,6 @@
-import { type Course } from './Course'
-import { type Faculty } from './Faculty'
-import { type Role, User } from '@/types/User.ts'
+import { type Course } from '../Course.ts';
+import { type Faculty } from '../Faculty.ts';
+import { type Role, User } from '@/types/users/User.ts';
 
 export class Teacher extends User {
     constructor(
@@ -15,22 +15,9 @@ export class Teacher extends User {
         public faculties: Faculty[] = [],
         public courses: Course[] = [],
         public create_time: Date,
-        public last_login: Date | null
+        public last_login: Date | null,
     ) {
-        super(
-            id,
-            username,
-            email,
-            first_name,
-            last_name,
-            last_enrolled,
-            is_staff,
-            roles,
-            faculties,
-            create_time,
-            last_login,
-            courses
-        )
+        super(id, username, email, first_name, last_name, last_enrolled, is_staff, roles, faculties, create_time, last_login, courses);
     }
 
     /**
@@ -52,8 +39,8 @@ export class Teacher extends User {
             teacher.faculties,
             teacher.courses,
             new Date(teacher.create_time),
-            teacher.last_login !== null ? new Date(teacher.last_login) : null
-        )
+            teacher.last_login !== null ? new Date(teacher.last_login) : null,
+        );
     }
 
     /**
@@ -62,6 +49,6 @@ export class Teacher extends User {
      * @returns boolean
      */
     public isTeacher(): boolean {
-        return true
+        return true;
     }
 }
diff --git a/frontend/src/types/User.ts b/frontend/src/types/users/User.ts
similarity index 75%
rename from frontend/src/types/User.ts
rename to frontend/src/types/users/User.ts
index 7618ad45..daf2c16f 100644
--- a/frontend/src/types/User.ts
+++ b/frontend/src/types/users/User.ts
@@ -1,7 +1,6 @@
-import { type Course } from './Course'
-import { type Faculty } from './Faculty'
+import { type Faculty } from '../Faculty.ts';
 
-export type Role = 'user' | 'student' | 'assistant' | 'teacher'
+export type Role = 'user' | 'student' | 'assistant' | 'teacher';
 
 export class User {
     constructor(
@@ -16,7 +15,6 @@ export class User {
         public faculties: Faculty[] = [],
         public create_time: Date,
         public last_login: Date | null,
-        public courses: Course[] = []
     ) {}
 
     /**
@@ -25,7 +23,7 @@ export class User {
      * @returns string
      */
     public getFullName(): string {
-        return `${this.first_name} ${this.last_name}`
+        return `${this.first_name} ${this.last_name}`;
     }
 
     /**
@@ -34,7 +32,7 @@ export class User {
      * @returns boolean
      */
     public isStudent(): boolean {
-        return false
+        return false;
     }
 
     /**
@@ -43,7 +41,7 @@ export class User {
      * @returns boolean
      */
     public isAssistant(): boolean {
-        return false
+        return false;
     }
 
     /**
@@ -52,7 +50,16 @@ export class User {
      * @returns boolean
      */
     public isTeacher(): boolean {
-        return false
+        return false;
+    }
+
+    /**
+     * Check if the user is a specific role.
+     *
+     * @returns boolean
+     */
+    public isSpecificRole(): boolean {
+        return this.isStudent() || this.isAssistant() || this.isTeacher();
     }
 
     /**
@@ -72,7 +79,7 @@ export class User {
             user.roles,
             user.faculties,
             new Date(user.create_time),
-            user.last_login !== null ? new Date(user.last_login) : null
-        )
+            user.last_login !== null ? new Date(user.last_login) : null,
+        );
     }
 }
diff --git a/frontend/src/views/App.vue b/frontend/src/views/App.vue
index e14c0e48..88c68367 100644
--- a/frontend/src/views/App.vue
+++ b/frontend/src/views/App.vue
@@ -1,32 +1,29 @@
 <script setup lang="ts">
-import Toast from 'primevue/toast'
-import { watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useMessagesStore } from '@/store/messages.store.ts'
-import { useToast } from 'primevue/usetoast'
-import { storeToRefs } from 'pinia'
+import Toast from 'primevue/toast';
+import { watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useMessagesStore } from '@/store/messages.store.ts';
+import { useToast } from 'primevue/usetoast';
+import { storeToRefs } from 'pinia';
 
 /* Composables */
-const { t } = useI18n()
-const { add } = useToast()
-const { message } = storeToRefs(useMessagesStore())
+const { t } = useI18n();
+const { add } = useToast();
+const { message } = storeToRefs(useMessagesStore());
 
 /* Show a toast message when a new message is added */
 watch(message, () => {
     // Check if the message is not null or undefined.
     if (message.value !== null && message.value !== undefined) {
         // Check if the message has a detail.
-        if (
-            message.value.detail === null ||
-            message.value.detail === undefined
-        ) {
-            message.value.detail = t('toasts.messages.unknown')
+        if (message.value.detail === null || message.value.detail === undefined) {
+            message.value.detail = t('toasts.messages.unknown');
         }
 
         // Add the message to the toast.
-        add({ ...message.value, life: 5000 })
+        add({ ...message.value, life: 5000 });
     }
-})
+});
 </script>
 
 <template>
diff --git a/frontend/src/views/authentication/LoginView.vue b/frontend/src/views/authentication/LoginView.vue
index fc87f218..a4aaaacd 100644
--- a/frontend/src/views/authentication/LoginView.vue
+++ b/frontend/src/views/authentication/LoginView.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import Button from 'primevue/button'
-import BaseLayout from '@/components/layout/BaseLayout.vue'
-import Title from '@/components/layout/Title.vue'
-import Illustration from '@/assets/img/auth/illustration.png'
-import { useI18n } from 'vue-i18n'
-import { PrimeIcons } from 'primevue/api'
-import { endpoints } from '@/config/endpoints.ts'
+import Button from 'primevue/button';
+import BaseLayout from '@/components/layout/BaseLayout.vue';
+import Title from '@/components/layout/Title.vue';
+import Illustration from '@/assets/img/auth/illustration.png';
+import { useI18n } from 'vue-i18n';
+import { PrimeIcons } from 'primevue/api';
+import { endpoints } from '@/config/endpoints.ts';
 
-const { t } = useI18n()
+const { t } = useI18n();
 </script>
 
 <template>
@@ -21,24 +21,12 @@ const { t } = useI18n()
                     {{ t('views.login.subtitle') }}
                 </div>
                 <a :href="endpoints.auth.login">
-                    <Button
-                        icon-pos="right"
-                        :icon="PrimeIcons.ARROW_RIGHT"
-                        :label="t('views.login.button')"
-                        severity="secondary"
-                    />
+                    <Button icon-pos="right" :icon="PrimeIcons.ARROW_RIGHT" :label="t('views.login.button')" severity="secondary" />
                 </a>
             </div>
             <div class="w-7 relative surface-100 p-4">
-                <img
-                    :src="Illustration"
-                    :alt="t('views.login.illustration')"
-                    class="w-15rem"
-                />
-                <div
-                    class="absolute bottom-0 right-0 bg-primary text-white p-4 w-20rem"
-                    style="transform: translateY(50%)"
-                >
+                <img :src="Illustration" :alt="t('views.login.illustration')" class="w-15rem" />
+                <div class="absolute bottom-0 right-0 bg-primary text-white p-4 w-20rem" style="transform: translateY(50%)">
                     <h1 class="mt-0">
                         {{ t('views.login.card.title') }}
                     </h1>
diff --git a/frontend/src/views/authentication/VerifyView.vue b/frontend/src/views/authentication/VerifyView.vue
index 9a373052..68296e02 100644
--- a/frontend/src/views/authentication/VerifyView.vue
+++ b/frontend/src/views/authentication/VerifyView.vue
@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import BaseLayout from '@/components/layout/BaseLayout.vue'
-import { useRoute, useRouter } from 'vue-router'
-import { useAuthStore } from '@/store/authentication.store.ts'
-import { onMounted } from 'vue'
-import Title from '@/components/layout/Title.vue'
+import BaseLayout from '@/components/layout/BaseLayout.vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useAuthStore } from '@/store/authentication.store.ts';
+import { onMounted } from 'vue';
+import Title from '@/components/layout/Title.vue';
 
-const { query } = useRoute()
-const { push } = useRouter()
-const { login, intent } = useAuthStore()
+const { query } = useRoute();
+const { push } = useRouter();
+const { login, intent } = useAuthStore();
 
 onMounted(async () => {
     await login(query.ticket as string).then(() => {
-        push(intent)
-    })
-})
+        push(intent);
+    });
+});
 </script>
 
 <template>
diff --git a/frontend/src/views/calendar/CalendarView.vue b/frontend/src/views/calendar/CalendarView.vue
index 6651e6f5..11679cde 100644
--- a/frontend/src/views/calendar/CalendarView.vue
+++ b/frontend/src/views/calendar/CalendarView.vue
@@ -1,73 +1,73 @@
 <script setup lang="ts">
-import moment from 'moment'
-import BaseLayout from '@/components/layout/BaseLayout.vue'
-import ProjectCard from '@/components/projects/ProjectCard.vue'
-import Calendar from 'primevue/calendar'
-import Title from '@/components/layout/Title.vue'
-import { useProject } from '@/composables/services/project.service'
-import { computed, onMounted, ref, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useAuthStore } from '@/store/authentication.store.ts'
-import { storeToRefs } from 'pinia'
-import { type Project } from '@/types/Projects.ts'
+import moment from 'moment';
+import BaseLayout from '@/components/layout/BaseLayout.vue';
+import ProjectCard from '@/components/projects/ProjectCard.vue';
+import Calendar from 'primevue/calendar';
+import Title from '@/components/layout/Title.vue';
+import { useProject } from '@/composables/services/project.service';
+import { computed, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useAuthStore } from '@/store/authentication.store.ts';
+import { storeToRefs } from 'pinia';
+import { type Project } from '@/types/Projects.ts';
+import { type RoleUser } from '@/types/users/Generics.ts';
 
 /* Composable injections */
-const { t, locale } = useI18n()
+const { t, locale } = useI18n();
 
 /* Component state */
-const allProjects = ref<Project[]>([])
-const selectedDate = ref(new Date())
+const allProjects = ref<Project[]>([]);
+const selectedDate = ref(new Date());
 
 /* Service injection */
-const { user } = storeToRefs(useAuthStore())
-const { projects, getProjectsByCourse } = useProject()
+const { user } = storeToRefs(useAuthStore());
+const { projects, getProjectsByCourse } = useProject();
 
 const formattedDate = computed(() => {
     // Format the selected date using moment.js
-    return moment(selectedDate.value)
-        .locale(locale.value)
-        .format('DD MMMM YYYY')
-})
+    return moment(selectedDate.value).locale(locale.value).format('DD MMMM YYYY');
+});
 
 const loadProjects = async (): Promise<void> => {
     if (user.value !== null) {
         // Clear the old data, so that the data from another role is not displayed
-        allProjects.value = []
+        allProjects.value = [];
 
         // Load the projects of the courses
-        for (const course of user.value.courses) {
-            await getProjectsByCourse(course.id)
+        if (user.value.isSpecificRole()) {
+            // Cast the generic user to a specific role
+            const role = user.value as RoleUser;
 
-            // Assign the course to the project
-            projects.value?.forEach((project) => {
-                project.course = course
-            })
+            for (const course of role.courses) {
+                await getProjectsByCourse(course.id);
 
-            // Concatenate the projects
-            allProjects.value = allProjects.value.concat(projects.value ?? [])
+                // Assign the course to the project
+                projects.value?.forEach((project) => {
+                    project.course = course;
+                });
+
+                // Concatenate the projects
+                allProjects.value = allProjects.value.concat(projects.value ?? []);
+            }
         }
     }
-}
+};
 
 /* Filter the projects on the date selected on the calendar */
 const projectsWithDeadline = computed(() => {
     // Filter the projects with the selected date
     return allProjects.value?.filter((project) => {
-        return moment(project.deadline).isSame(
-            moment(selectedDate.value),
-            'day'
-        )
-    })
-})
-
-/* Load the projects when the component is mounted */
-onMounted(async () => {
-    await loadProjects()
-})
+        return moment(project.deadline).isSame(moment(selectedDate.value), 'day');
+    });
+});
 
-watch(user, async () => {
-    await loadProjects()
-})
+watch(
+    user,
+    async () => {
+        await loadProjects();
+    },
+    { immediate: true },
+);
 </script>
 
 <template>
@@ -88,10 +88,7 @@ watch(user, async () => {
 
                 <!-- Listing projects with given deadline -->
                 <div class="grid grid-cols-2 gap-4">
-                    <div
-                        v-for="project in projectsWithDeadline"
-                        :key="project.id"
-                    >
+                    <div v-for="project in projectsWithDeadline" :key="project.id">
                         <ProjectCard class="h-100" :project="project" />
                     </div>
                 </div>
diff --git a/frontend/src/views/courses/CourseView.vue b/frontend/src/views/courses/CourseView.vue
index 04a76e71..13cfdcf9 100644
--- a/frontend/src/views/courses/CourseView.vue
+++ b/frontend/src/views/courses/CourseView.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import Calendar from 'primevue/calendar'
-import BaseLayout from '@/components/layout/BaseLayout.vue'
-import Title from '@/components/layout/Title.vue'
-import { onMounted } from 'vue'
-import { useCourses } from '@/composables/services/courses.service.ts'
-import { useRoute } from 'vue-router'
+import Calendar from 'primevue/calendar';
+import BaseLayout from '@/components/layout/BaseLayout.vue';
+import Title from '@/components/layout/Title.vue';
+import { onMounted } from 'vue';
+import { useCourses } from '@/composables/services/courses.service.ts';
+import { useRoute } from 'vue-router';
 
-const { params } = useRoute()
-const { course, getCourseByID } = useCourses()
+const { params } = useRoute();
+const { course, getCourseByID } = useCourses();
 
 onMounted(() => {
-    getCourseByID(params.courseId as string)
-})
+    getCourseByID(params.courseId as string);
+});
 </script>
 
 <template>
diff --git a/frontend/src/views/courses/CreateCourseView.vue b/frontend/src/views/courses/CreateCourseView.vue
index d68051c9..1230fd69 100644
--- a/frontend/src/views/courses/CreateCourseView.vue
+++ b/frontend/src/views/courses/CreateCourseView.vue
@@ -1,26 +1,26 @@
 <script setup lang="ts">
-import Calendar from 'primevue/calendar'
-import BaseLayout from '@/components/layout/BaseLayout.vue'
-import Title from '@/components/layout/Title.vue'
-import { ref } from 'vue'
-import { useRouter } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-import InputText from 'primevue/inputtext'
-import Textarea from 'primevue/textarea'
-import Button from 'primevue/button'
-import { Course } from '@/types/Course'
-import { useCourses } from '@/composables/services/courses.service'
+import Calendar from 'primevue/calendar';
+import BaseLayout from '@/components/layout/BaseLayout.vue';
+import Title from '@/components/layout/Title.vue';
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import InputText from 'primevue/inputtext';
+import Textarea from 'primevue/textarea';
+import Button from 'primevue/button';
+import { Course } from '@/types/Course';
+import { useCourses } from '@/composables/services/courses.service';
 
 /* Composable injections */
-const { t } = useI18n()
-const { push } = useRouter()
+const { t } = useI18n();
+const { push } = useRouter();
 
 /* Service injection */
-const { createCourse } = useCourses()
+const { createCourse } = useCourses();
 
-const courseName = ref<string>('')
-const courseDescription = ref<string>('')
-const courseYear = ref<Date>(new Date())
+const courseName = ref<string>('');
+const courseDescription = ref<string>('');
+const courseYear = ref<Date>(new Date());
 
 const submitCourse = async (): Promise<void> => {
     // Pass the course data to the service
@@ -29,13 +29,13 @@ const submitCourse = async (): Promise<void> => {
             '', // ID not needed for creation, will be generated by the backend
             courseName.value,
             courseDescription.value,
-            courseYear.value.getFullYear()
-        )
-    )
+            courseYear.value.getFullYear(),
+        ),
+    );
 
     // Redirect to the dashboard overview
-    push({ name: 'dashboard' })
-}
+    push({ name: 'dashboard' });
+};
 </script>
 
 <template>
@@ -49,53 +49,25 @@ const submitCourse = async (): Promise<void> => {
                 <form @submit.prevent="submitCourse">
                     <!-- Course name -->
                     <div class="mb-4">
-                        <label for="courseName">{{
-                            t('views.courses.name')
-                        }}</label>
-                        <InputText
-                            id="courseName"
-                            v-model="courseName"
-                            required
-                        />
+                        <label for="courseName">{{ t('views.courses.name') }}</label>
+                        <InputText id="courseName" v-model="courseName" required />
                     </div>
 
                     <!-- Course description -->
                     <div class="mb-4">
-                        <label for="courseDescription">{{
-                            t('views.courses.description')
-                        }}</label>
-                        <Textarea
-                            id="courseDescription"
-                            v-model="courseDescription"
-                            autoResize
-                            rows="5"
-                            cols="30"
-                        />
+                        <label for="courseDescription">{{ t('views.courses.description') }}</label>
+                        <Textarea id="courseDescription" v-model="courseDescription" autoResize rows="5" cols="30" />
                     </div>
 
                     <!-- Course academic year -->
                     <div class="mb-4">
-                        <label for="courseYear">{{
-                            t('views.courses.year')
-                        }}</label>
-                        <Calendar
-                            id="courseYear"
-                            v-model="courseYear"
-                            view="year"
-                            dateFormat="yy"
-                            required
-                        />
+                        <label for="courseYear">{{ t('views.courses.year') }}</label>
+                        <Calendar id="courseYear" v-model="courseYear" view="year" dateFormat="yy" required />
                     </div>
 
                     <!-- Submit button -->
                     <div class="flex justify-end">
-                        <Button
-                            :label="t('views.courses.create')"
-                            type="submit"
-                            icon="pi pi-check"
-                            iconPos="right"
-                            rounded
-                        />
+                        <Button :label="t('views.courses.create')" type="submit" icon="pi pi-check" iconPos="right" rounded />
                     </div>
                 </form>
             </div>
diff --git a/frontend/src/views/dashboard/DashboardView.vue b/frontend/src/views/dashboard/DashboardView.vue
index ebe19cc4..b3d9a11c 100644
--- a/frontend/src/views/dashboard/DashboardView.vue
+++ b/frontend/src/views/dashboard/DashboardView.vue
@@ -1,106 +1,101 @@
 <script setup lang="ts">
-import Skeleton from 'primevue/skeleton'
-import ButtonGroup from 'primevue/buttongroup'
-import Button from 'primevue/button'
-import Dropdown from 'primevue/dropdown'
-import CourseCard from '@/components/courses/CourseCard.vue'
-import BaseLayout from '@/components/layout/BaseLayout.vue'
-import Title from '@/components/layout/Title.vue'
-import { useI18n } from 'vue-i18n'
-import { PrimeIcons } from 'primevue/api'
-import { ref, onMounted, watch, computed } from 'vue'
-import { type Project } from '@/types/Projects.ts'
-import { useProject } from '@/composables/services/project.service.ts'
-import ProjectCard from '@/components/projects/ProjectCard.vue'
-import { useAuthStore } from '@/store/authentication.store.ts'
-import { storeToRefs } from 'pinia'
+import ButtonGroup from 'primevue/buttongroup';
+import Button from 'primevue/button';
+import CourseList from '@/components/courses/CourseList.vue';
+import BaseLayout from '@/components/layout/BaseLayout.vue';
+import Title from '@/components/layout/Title.vue';
+import YearSelector from '@/components/YearSelector.vue';
+import { useI18n } from 'vue-i18n';
+import { PrimeIcons } from 'primevue/api';
+import { ref, watch, computed } from 'vue';
+import { useProject } from '@/composables/services/project.service.ts';
+import { useAuthStore } from '@/store/authentication.store.ts';
+import { storeToRefs } from 'pinia';
+import { type RoleUser } from '@/types/users/Generics.ts';
+import ProjectList from '@/components/projects/ProjectList.vue';
 
 /* Composable injections */
-const { t } = useI18n()
+const { t } = useI18n();
 
 /* Component state */
-const allProjects = ref<Project[]>([])
-const academicYears = ref<Array<{ label: string; value: number }>>()
-const selectedCoursesYear = ref<number>()
-const selectedProjectsYear = ref<number>()
+const academicYears = ref<any[]>([]);
+const selectedCoursesYear = ref<number>();
+const selectedProjectsYear = ref<number>();
 
 /* Service injection */
-const { user } = storeToRefs(useAuthStore())
-const { projects, getProjectsByCourse } = useProject()
-
-onMounted(async () => {
-    await fetchDashboardData()
-    selectedCoursesYear.value = getCurrentAcademicYear()
-    selectedProjectsYear.value = getCurrentAcademicYear()
-})
-
-watch(user, async () => {
-    await fetchDashboardData()
-    selectedCoursesYear.value = getCurrentAcademicYear()
-    selectedProjectsYear.value = getCurrentAcademicYear()
-})
-
-/* Fetch the data for the dashboard */
-const fetchDashboardData = async (): Promise<void> => {
+const { user } = storeToRefs(useAuthStore());
+const { projects, getProjectsByCourse } = useProject();
+
+watch(
+    user,
+    () => {
+        fetchDashboardData().then(() => {
+            selectedCoursesYear.value = getCurrentAcademicYear();
+            selectedProjectsYear.value = getCurrentAcademicYear();
+        });
+    },
+    {
+        immediate: true,
+    },
+);
+
+/**
+ * Fetches the projects and academic years for the dashboard
+ */
+async function fetchDashboardData(): Promise<void> {
     if (user.value !== null) {
-        // Clear the old data, so that the data from another role is not displayed
-        allProjects.value = []
-        academicYears.value = []
-
-        for (const course of user.value.courses) {
-            await getProjectsByCourse(course.id)
-
-            projects.value?.forEach((project) => {
-                project.course = course
-            })
-
-            allProjects.value = allProjects.value.concat(projects.value ?? [])
-
-            // Add the academic year to the list
-            const year = course.academic_startyear
-            if (!academicYears.value?.some((el) => el.value === year)) {
-                academicYears.value?.push({
-                    label: `${year}-${year + 1}`,
-                    value: year
-                })
+        // Clear the old data, so that the data from another role is not displayed.
+        academicYears.value = [];
+
+        // All specific roles (students, assistants and teachers) have courses
+        if (user.value.isSpecificRole()) {
+            // Cast the generic user to a specific role
+            const role = user.value as RoleUser;
+
+            for (const course of role.courses) {
+                // Add the academic year to the list
+                const year = course.academic_startyear;
+
+                if (!academicYears.value?.some((el) => el.value === year)) {
+                    academicYears.value?.push({
+                        value: year,
+                        label: `${year} - ${year + 1}`
+                    });
+                }
             }
-        }
 
-        // Sort the academic years in descending order
-        academicYears.value?.sort((a, b) => b.value - a.value)
+            // Sort the academic years in descending order
+            academicYears.value?.sort((a, b) => b - a);
+        }
     }
 }
 
-const filteredProjects = computed(() => {
-    return allProjects.value !== undefined && allProjects.value !== null
-        ? allProjects.value.filter(
-              (project) =>
-                  project.course?.academic_startyear ===
-                  selectedProjectsYear.value
-          )
-        : []
-})
-
-const filteredCourses = computed(() => {
-    return user.value !== undefined && user.value !== null
-        ? user.value.courses?.filter(
-              (course) =>
-                  course.academic_startyear === selectedCoursesYear.value
-          )
-        : []
-})
-
-// Method to get the current academic year
-const getCurrentAcademicYear: () => number = () => {
-    const today = new Date()
-    const currentYear = today.getFullYear()
+/**
+ * Get the current academic year
+ *
+ * @returns The current academic year
+ */
+function getCurrentAcademicYear(): number {
+    const today = new Date();
+    const currentYear = today.getFullYear();
 
     if (today.getMonth() >= 9) {
-        return currentYear
-    } else {
-        return currentYear - 1
+        return currentYear;
     }
+
+    return currentYear - 1;
 }
+
+// Filter the courses based on the selected year
+const filteredCourses = computed(() => {
+    if (user.value !== null && user.value.isSpecificRole()) {
+        const role = user.value as RoleUser;
+
+        return role.courses.filter((course) => course.academic_startyear === selectedCoursesYear.value);
+    }
+
+    return [];
+});
 </script>
 
 <template>
@@ -111,105 +106,30 @@ const getCurrentAcademicYear: () => number = () => {
             <Title class="m-0">{{ t('views.dashboard.courses') }}</Title>
             <!-- Course list controls -->
             <ButtonGroup>
-                <Dropdown
-                    v-model="selectedCoursesYear"
-                    :options="academicYears"
-                    optionLabel="label"
-                    optionValue="value"
-                    class="custom-dropdown"
-                />
-
-                <RouterLink
-                    :to="{ name: 'course-create' }"
-                    v-if="user?.isTeacher()"
-                >
-                    <Button
-                        :icon="PrimeIcons.PLUS"
-                        icon-pos="right"
-                        class="custom-button"
-                    />
+                <YearSelector :years="academicYears" v-model="selectedCoursesYear" />
+                <RouterLink :to="{ name: 'course-create' }" v-if="user?.isTeacher()">
+                    <Button :icon="PrimeIcons.PLUS" icon-pos="right" class="custom-button" />
                 </RouterLink>
             </ButtonGroup>
         </div>
         <!-- Course list body -->
-        <div class="grid align-items-stretch">
-            <template v-if="filteredCourses !== null">
-                <template v-if="filteredCourses.length > 0">
-                    <div
-                        class="col-12 md:col-6 lg:col-4 xl:col-3"
-                        v-for="course in filteredCourses"
-                        :key="course.id"
-                    >
-                        <CourseCard class="h-100" :course="course" />
-                    </div>
-                </template>
-                <template v-else>
-                    <div class="col-12">
-                        <p>{{ t('views.dashboard.no_courses') }}</p>
-                    </div>
-                </template>
-            </template>
-            <template v-else>
-                <div
-                    class="col-12 md:col-6 lg:col-4 xl:col-3"
-                    v-for="index in 4"
-                    :key="index"
-                >
-                    <Skeleton height="25rem" style="visibility: hidden" />
-                </div>
-            </template>
-        </div>
+        <CourseList :courses="filteredCourses" />
         <!-- Project heading -->
         <div class="flex justify-content-between align-items-center my-6">
             <!-- Project list title -->
             <Title class="m-0">{{ t('views.dashboard.projects') }}</Title>
             <!-- Project list controls -->
             <ButtonGroup>
-                <Dropdown
-                    v-model="selectedProjectsYear"
-                    :options="academicYears"
-                    optionLabel="label"
-                    optionValue="value"
-                    class="custom-dropdown"
-                />
-
+                <YearSelector :years="academicYears" v-model="selectedProjectsYear" />
                 <!-- TODO: Set to create a project-->
-                <RouterLink
-                    :to="{ name: 'course-create' }"
-                    v-if="!user?.isStudent()"
-                >
-                    <Button
-                        :icon="PrimeIcons.PLUS"
-                        icon-pos="right"
-                        class="custom-button"
-                    />
+                <RouterLink :to="{ name: 'course-create' }" v-if="!user?.isStudent()">
+                    <Button :icon="PrimeIcons.PLUS" icon-pos="right" class="custom-button" />
                 </RouterLink>
             </ButtonGroup>
         </div>
         <!-- Project list body -->
-        <div class="grid align-items-stretch">
-            <template v-if="filteredProjects.length > 0">
-                <div
-                    class="col-12 md:col-6 lg:col-4 xl:col-3"
-                    v-for="project in filteredProjects"
-                    :key="project.id"
-                >
-                    <ProjectCard class="h-100" :project="project" />
-                </div>
-            </template>
-            <template v-else>
-                <div class="col-12">
-                    <p>{{ t('views.dashboard.no_projects') }}</p>
-                </div>
-            </template>
-        </div>
+        <ProjectList :courses="filteredCourses" />
     </BaseLayout>
 </template>
 
-<style scoped>
-.custom-dropdown,
-.custom-button {
-    border-radius: 0;
-    height: 50px;
-}
-</style>
+<style scoped></style>
diff --git a/frontend/src/views/projects/ProjectView.vue b/frontend/src/views/projects/ProjectView.vue
index 9af7d740..ec300091 100644
--- a/frontend/src/views/projects/ProjectView.vue
+++ b/frontend/src/views/projects/ProjectView.vue
@@ -1,42 +1,51 @@
 <script setup lang="ts">
-import BaseLayout from '@/components/layout/BaseLayout.vue'
-import { onMounted, ref } from 'vue'
-import { useProject } from '@/composables/services/project.service.ts'
-import { useRoute } from 'vue-router'
-import Title from '@/components/layout/Title.vue'
-import Skeleton from 'primevue/skeleton'
-import GroupCard from '@/components/projects/GroupCard.vue'
-import { useGroup } from '@/composables/services/groups.service.ts'
-import { Group } from '@/types/Group.ts'
+import BaseLayout from '@/components/layout/BaseLayout.vue';
+import { ref, watch } from 'vue';
+import { useProject } from '@/composables/services/project.service.ts';
+import { useRoute } from 'vue-router';
+import Title from '@/components/layout/Title.vue';
+import Skeleton from 'primevue/skeleton';
+import GroupCard from '@/components/projects/GroupCard.vue';
+import { useGroup } from '@/composables/services/groups.service.ts';
+import { Group } from '@/types/Group.ts';
+import { useAuthStore } from '@/store/authentication.store.ts';
+import { storeToRefs } from 'pinia';
 
 /* Composable injections */
-const route = useRoute()
-const { project, getProjectByID } = useProject()
-const { groups, getGroupsByProject, getGroupsByStudent } = useGroup()
+const route = useRoute();
+const { user, student } = storeToRefs(useAuthStore());
+const { project, getProjectByID } = useProject();
+const { groups, getGroupsByProject, getGroupsByStudent } = useGroup();
 
 /* Component state */
-const finalGroup = ref<Group>(new Group('-1'))
+const group = ref<Group|null>(null);
 
-onMounted(async () => {
-    const projectId = route.params.projectId
-    await getProjectByID(projectId as string)
-    console.log('fetching groups')
-    // Get id group from project by comparing the users groups and the project groups
-    await getGroupsByProject(projectId as string)
-    const projectGroups = groups.value
-    // get all groups from the user
-    await getGroupsByStudent('1')
-    for (const group of groups.value ?? []) {
-        const isCommonGroup = projectGroups?.some(
-            (projectGroup) => projectGroup.id === group.id
-        )
+watch(
+    student,
+    async () => {
+        if (student.value !== null) {
+            const projectId = route.params.projectId as string;
+            await getProjectByID(projectId.toString());
+            await getGroupsByProject(projectId.toString());
 
-        if (isCommonGroup != null && isCommonGroup) {
-            finalGroup.value = group
-            break
+            // Check if the student is in a group for the project
+            const projectGroups = groups.value;
+            await getGroupsByStudent("1");
+
+            for (const studentGroup of groups.value ?? []) {
+                const isCommonGroup = projectGroups?.some((projectGroup) => projectGroup.id === studentGroup.id);
+
+                if (isCommonGroup) {
+                    group.value = studentGroup;
+                    break;
+                }
+            }
         }
+    },
+    {
+        immediate: true,
     }
-})
+);
 </script>
 
 <template>
@@ -57,10 +66,9 @@ onMounted(async () => {
                 </div>
             </div>
             <div class="col-12 md:col-4">
-                <GroupCard
-                    v-if="finalGroup.id !== '-1'"
-                    :group-id="finalGroup.id"
-                ></GroupCard>
+                <GroupCard :group="group" v-if="group"></GroupCard>
+
+                <Skeleton height="20rem" v-else />
             </div>
         </div>
     </BaseLayout>
diff --git a/frontend/src/vite-env.d.ts b/frontend/src/vite-env.d.ts
index bebda1d5..710a84d5 100644
--- a/frontend/src/vite-env.d.ts
+++ b/frontend/src/vite-env.d.ts
@@ -1,3 +1,3 @@
 // eslint-disable-next-line @typescript-eslint/triple-slash-reference
 /// <reference types="vite/client" />
-declare module 'js-cookie'
+declare module 'js-cookie';
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index f662f43f..62db761d 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -1,29 +1,44 @@
 {
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "module": "ESNext",
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "skipLibCheck": true,
-    "types": ["cypress"],
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "preserve",
-    "paths": {
-        "@/*": ["./src/*"]
+    "compilerOptions": {
+        "target": "ES2020",
+        "useDefineForClassFields": true,
+        "module": "ESNext",
+        "lib": [
+            "ES2020",
+            "DOM",
+            "DOM.Iterable"
+        ],
+        "skipLibCheck": true,
+        "types": [
+            "cypress"
+        ],
+        /* Bundler mode */
+        "moduleResolution": "bundler",
+        "allowImportingTsExtensions": true,
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "noEmit": true,
+        "jsx": "preserve",
+        "paths": {
+            "@/*": [
+                "./src/*"
+            ]
+        },
+        /* Linting */
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "noFallthroughCasesInSwitch": true,
+        "allowSyntheticDefaultImports": true
     },
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+    "include": [
+        "src/**/*.ts",
+        "src/**/*.tsx",
+        "src/**/*.vue"
+    ],
+    "references": [
+        {
+            "path": "./tsconfig.node.json"
+        }
+    ]
 }

From f8c61cc5d43ec838e35bed41558dab17a14b62f5 Mon Sep 17 00:00:00 2001
From: EwoutV <ewoutverlinde@hotmail.com>
Date: Wed, 3 Apr 2024 00:05:21 +0200
Subject: [PATCH 2/6] chore: abstracted the dashboard as example for future
 views

---
 frontend/src/components/YearSelector.vue      |  11 +-
 .../src/components/projects/GroupCard.vue     |   2 +-
 .../src/components/projects/ProjectCard.vue   |   8 +-
 .../src/components/projects/ProjectList.vue   | 124 +++++++++---------
 .../composables/services/assistant.service.ts |   4 +-
 .../composables/services/students.service.ts  |   4 +-
 .../composables/services/teachers.service.ts  |   4 +-
 frontend/src/store/authentication.store.ts    |   5 +-
 frontend/src/types/users/Student.ts           |   2 +-
 frontend/src/types/users/User.ts              |  26 ++++
 .../views/courses/roles/StudentCourseView.vue |  11 ++
 .../views/courses/roles/TeacherCourseView.vue |  11 ++
 .../src/views/dashboard/DashboardView.vue     | 122 +----------------
 .../dashboard/roles/StudentDashboardView.vue  |  74 +++++++++++
 frontend/src/views/projects/ProjectView.vue   |  12 +-
 15 files changed, 217 insertions(+), 203 deletions(-)
 create mode 100644 frontend/src/views/courses/roles/StudentCourseView.vue
 create mode 100644 frontend/src/views/courses/roles/TeacherCourseView.vue
 create mode 100644 frontend/src/views/dashboard/roles/StudentDashboardView.vue

diff --git a/frontend/src/components/YearSelector.vue b/frontend/src/components/YearSelector.vue
index dd878234..205b15b6 100644
--- a/frontend/src/components/YearSelector.vue
+++ b/frontend/src/components/YearSelector.vue
@@ -1,12 +1,21 @@
 <script setup lang="ts">
 import Dropdown from 'primevue/dropdown';
 import { useI18n } from 'vue-i18n';
+import { computed } from 'vue';
 
 /* Composable injections */
 const { t } = useI18n();
 
 /* Props */
-defineProps<{ years: string[] }>();
+const props = defineProps<{ years: number[] }>();
+
+/* State */
+const years = computed(() =>
+    props.years.map((year) => ({
+        label: `${year} - ${year + 1}`,
+        value: year
+    }))
+);
 
 /* Models */
 const year = defineModel();
diff --git a/frontend/src/components/projects/GroupCard.vue b/frontend/src/components/projects/GroupCard.vue
index 7b9c306c..2b0a418c 100644
--- a/frontend/src/components/projects/GroupCard.vue
+++ b/frontend/src/components/projects/GroupCard.vue
@@ -2,7 +2,7 @@
 import { useStudents } from '@/composables/services/students.service.ts';
 import { onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { Group } from '@/types/Group.ts';
+import { type Group } from '@/types/Group.ts';
 
 /* Props */
 const props = defineProps<{
diff --git a/frontend/src/components/projects/ProjectCard.vue b/frontend/src/components/projects/ProjectCard.vue
index 747c3207..bc0ef609 100644
--- a/frontend/src/components/projects/ProjectCard.vue
+++ b/frontend/src/components/projects/ProjectCard.vue
@@ -6,7 +6,7 @@ import { PrimeIcons } from 'primevue/api';
 import { useI18n } from 'vue-i18n';
 import { computed } from 'vue';
 import moment from 'moment';
-import { Course } from '@/types/Course.ts';
+import { type Course } from '@/types/Course.ts';
 
 /**
  * TODO
@@ -20,7 +20,7 @@ const props = defineProps<{
 }>();
 
 const formattedDeadline = computed(() => {
-    return moment(props.project.deadline).format("DD MMMM YYYY")
+    return moment(props.project.deadline).format('DD MMMM YYYY');
 });
 
 /* Composable injections */
@@ -30,9 +30,7 @@ const { t } = useI18n();
 <template>
     <Card class="border-round project-card">
         <template #header>
-            <h2 class="text-primary m-0 text-2xl">
-                <span class="pi pi-book text-xl mr-2"/> {{ course.name }}
-            </h2>
+            <h2 class="text-primary m-0 text-2xl"><span class="pi pi-book text-xl mr-2" /> {{ course.name }}</h2>
         </template>
         <template #subtitle>
             {{ project.name }}
diff --git a/frontend/src/components/projects/ProjectList.vue b/frontend/src/components/projects/ProjectList.vue
index 469b686a..aa8ec771 100644
--- a/frontend/src/components/projects/ProjectList.vue
+++ b/frontend/src/components/projects/ProjectList.vue
@@ -1,62 +1,62 @@
-<script setup lang="ts">
-import { Course } from '@/types/Course.ts';
-import { watch } from 'vue';
-import { useProject } from '@/composables/services/project.service.ts';
-import ProjectCard from '@/components/projects/ProjectCard.vue';
-import { useI18n } from 'vue-i18n';
-
-/* Props */
-const props = withDefaults(defineProps<{
-    courses: Course[];
-}>(), {
-    courses: []
-});
-
-/* Composables */
-const { t } = useI18n();
-const { projects, getProjectsByCourse } = useProject();
-
-watch(
-    () => props.courses,
-    async (courses: Course[]) => {
-        for (const course of courses) {
-            // Fetch the projects for the course
-            await getProjectsByCourse(course.id);
-
-            // Assign the course to the projects
-            projects.value?.forEach((project) => {
-                project.course = course;
-            });
-
-            // Assign the projects to the course
-            course.projects = projects.value ?? [];
-        }
-    },
-    {
-        immediate: true,
-    },
-);
-</script>
-
-<template>
-    <template v-if="courses.length > 0">
-        <div class="grid align-items-stretch">
-            <div
-                class="col-12 md:col-6 lg:col-4 xl:col-3"
-                v-for="project in courses.flatMap((course) => course.projects)"
-                :key="project.id"
-            >
-                <ProjectCard class="h-100" :project="project" :course="project.course" />
-            </div>
-        </div>
-    </template>
-    <template v-else>
-        <div class="col-12">
-            <p>{{ t('views.dashboard.no_projects') }}</p>
-        </div>
-    </template>
-</template>
-
-<style scoped lang="scss">
-
-</style>
\ No newline at end of file
+<script setup lang="ts">
+import { type Course } from '@/types/Course.ts';
+import { watch } from 'vue';
+import { useProject } from '@/composables/services/project.service.ts';
+import ProjectCard from '@/components/projects/ProjectCard.vue';
+import { useI18n } from 'vue-i18n';
+
+/* Props */
+const props = withDefaults(
+    defineProps<{
+        courses: Course[];
+    }>(),
+    {
+        courses: () => [],
+    },
+);
+
+/* Composables */
+const { t } = useI18n();
+const { projects, getProjectsByCourse } = useProject();
+
+watch(
+    () => props.courses,
+    async (courses: Course[]) => {
+        for (const course of courses) {
+            // Fetch the projects for the course
+            await getProjectsByCourse(course.id);
+
+            // Assign the course to the projects
+            projects.value?.forEach((project) => {
+                project.course = course;
+            });
+
+            // Assign the projects to the course
+            course.projects = projects.value ?? [];
+        }
+    },
+    {
+        immediate: true,
+    },
+);
+</script>
+
+<template>
+    <template v-if="courses.length > 0">
+        <div class="grid align-items-stretch">
+            <div
+                class="col-12 md:col-6 lg:col-4 xl:col-3"
+                v-for="project in courses.flatMap((course) => course.projects)"
+                :key="project.id">
+                <ProjectCard class="h-100" :project="project" :course="project.course" />
+            </div>
+        </div>
+    </template>
+    <template v-else>
+        <div class="col-12">
+            <p>{{ t('views.dashboard.no_projects') }}</p>
+        </div>
+    </template>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/frontend/src/composables/services/assistant.service.ts b/frontend/src/composables/services/assistant.service.ts
index a9569f83..aa7e6a3f 100644
--- a/frontend/src/composables/services/assistant.service.ts
+++ b/frontend/src/composables/services/assistant.service.ts
@@ -75,8 +75,8 @@ export function useAssistant(): AssistantState {
         await deleteId<Assistant>(endpoint, assistant, Assistant.fromJSON);
     }
 
-    async function initAssistant(assistant: Assistant|null) {
-        if (assistant !== null)  {
+    async function initAssistant(assistant: Assistant | null): Promise<void> {
+        if (assistant !== null) {
             await getCourseByAssistant(assistant.id);
             assistant.courses = courses.value ?? [];
         }
diff --git a/frontend/src/composables/services/students.service.ts b/frontend/src/composables/services/students.service.ts
index 6efe45f1..c3977095 100644
--- a/frontend/src/composables/services/students.service.ts
+++ b/frontend/src/composables/services/students.service.ts
@@ -93,8 +93,8 @@ export function useStudents(): StudentsState {
         await deleteId<Student>(endpoint, student, Student.fromJSON);
     }
 
-    async function initStudent(student: Student|null) {
-        if (student !== null)  {
+    async function initStudent(student: Student | null): Promise<void> {
+        if (student !== null) {
             await getCoursesByStudent(student.id);
             student.courses = courses.value ?? [];
         }
diff --git a/frontend/src/composables/services/teachers.service.ts b/frontend/src/composables/services/teachers.service.ts
index 90e2e724..22ada208 100644
--- a/frontend/src/composables/services/teachers.service.ts
+++ b/frontend/src/composables/services/teachers.service.ts
@@ -76,8 +76,8 @@ export function useTeacher(): TeacherState {
         await deleteId<Teacher>(endpoint, teacher, Teacher.fromJSON);
     }
 
-    async function initTeacher(teacher: Teacher|null) {
-        if (teacher !== null)  {
+    async function initTeacher(teacher: Teacher | null): Promise<void> {
+        if (teacher !== null) {
             await getCoursesByTeacher(teacher.id);
             teacher.courses = courses.value ?? [];
         }
diff --git a/frontend/src/store/authentication.store.ts b/frontend/src/store/authentication.store.ts
index ce8f95ae..ab2b2751 100644
--- a/frontend/src/store/authentication.store.ts
+++ b/frontend/src/store/authentication.store.ts
@@ -142,7 +142,10 @@ export const useAuthStore = defineStore('auth', () => {
     });
 
     return {
-        user, student, teacher, assistant,
+        user,
+        student,
+        teacher,
+        assistant,
         view,
         intent,
         login,
diff --git a/frontend/src/types/users/Student.ts b/frontend/src/types/users/Student.ts
index a0a37e37..e0e341ad 100644
--- a/frontend/src/types/users/Student.ts
+++ b/frontend/src/types/users/Student.ts
@@ -18,7 +18,7 @@ export class Student extends User {
         public roles: Role[] = [],
         public courses: Course[] = [],
         public groups: Group[] = [],
-        public faculties: Faculty[] = []
+        public faculties: Faculty[] = [],
     ) {
         super(id, username, email, first_name, last_name, last_enrolled, is_staff, roles, faculties, create_time, last_login);
     }
diff --git a/frontend/src/types/users/User.ts b/frontend/src/types/users/User.ts
index daf2c16f..28c1c212 100644
--- a/frontend/src/types/users/User.ts
+++ b/frontend/src/types/users/User.ts
@@ -17,6 +17,16 @@ export class User {
         public last_login: Date | null,
     ) {}
 
+    /**
+     * Get the academic years of the user.
+     */
+    get academic_years(): number[] {
+        const startYear = this.getAcademicYear(this.create_time);
+        const endYear = this.getAcademicYear(new Date());
+
+        return Array.from({ length: endYear - startYear + 1 }, (_, i) => startYear + i);
+    }
+
     /**
      * Get the full name of the user.
      *
@@ -26,6 +36,22 @@ export class User {
         return `${this.first_name} ${this.last_name}`;
     }
 
+    /**
+     * Get the academic year of a date.
+     *
+     * @param date
+     * @returns number
+     */
+    public getAcademicYear(date: Date = new Date): number {
+        const year = date.getFullYear();
+
+        if (date.getMonth() >= 9) {
+            return year;
+        }
+
+        return year - 1;
+    }
+
     /**
      * Check if the user is a student.
      *
diff --git a/frontend/src/views/courses/roles/StudentCourseView.vue b/frontend/src/views/courses/roles/StudentCourseView.vue
new file mode 100644
index 00000000..8af2373f
--- /dev/null
+++ b/frontend/src/views/courses/roles/StudentCourseView.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/courses/roles/TeacherCourseView.vue b/frontend/src/views/courses/roles/TeacherCourseView.vue
new file mode 100644
index 00000000..8af2373f
--- /dev/null
+++ b/frontend/src/views/courses/roles/TeacherCourseView.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/dashboard/DashboardView.vue b/frontend/src/views/dashboard/DashboardView.vue
index b3d9a11c..acce43d8 100644
--- a/frontend/src/views/dashboard/DashboardView.vue
+++ b/frontend/src/views/dashboard/DashboardView.vue
@@ -1,134 +1,16 @@
 <script setup lang="ts">
-import ButtonGroup from 'primevue/buttongroup';
-import Button from 'primevue/button';
-import CourseList from '@/components/courses/CourseList.vue';
 import BaseLayout from '@/components/layout/BaseLayout.vue';
-import Title from '@/components/layout/Title.vue';
-import YearSelector from '@/components/YearSelector.vue';
-import { useI18n } from 'vue-i18n';
-import { PrimeIcons } from 'primevue/api';
-import { ref, watch, computed } from 'vue';
-import { useProject } from '@/composables/services/project.service.ts';
 import { useAuthStore } from '@/store/authentication.store.ts';
 import { storeToRefs } from 'pinia';
-import { type RoleUser } from '@/types/users/Generics.ts';
-import ProjectList from '@/components/projects/ProjectList.vue';
-
-/* Composable injections */
-const { t } = useI18n();
-
-/* Component state */
-const academicYears = ref<any[]>([]);
-const selectedCoursesYear = ref<number>();
-const selectedProjectsYear = ref<number>();
+import StudentDashboardView from '@/views/dashboard/roles/StudentDashboardView.vue';
 
 /* Service injection */
 const { user } = storeToRefs(useAuthStore());
-const { projects, getProjectsByCourse } = useProject();
-
-watch(
-    user,
-    () => {
-        fetchDashboardData().then(() => {
-            selectedCoursesYear.value = getCurrentAcademicYear();
-            selectedProjectsYear.value = getCurrentAcademicYear();
-        });
-    },
-    {
-        immediate: true,
-    },
-);
-
-/**
- * Fetches the projects and academic years for the dashboard
- */
-async function fetchDashboardData(): Promise<void> {
-    if (user.value !== null) {
-        // Clear the old data, so that the data from another role is not displayed.
-        academicYears.value = [];
-
-        // All specific roles (students, assistants and teachers) have courses
-        if (user.value.isSpecificRole()) {
-            // Cast the generic user to a specific role
-            const role = user.value as RoleUser;
-
-            for (const course of role.courses) {
-                // Add the academic year to the list
-                const year = course.academic_startyear;
-
-                if (!academicYears.value?.some((el) => el.value === year)) {
-                    academicYears.value?.push({
-                        value: year,
-                        label: `${year} - ${year + 1}`
-                    });
-                }
-            }
-
-            // Sort the academic years in descending order
-            academicYears.value?.sort((a, b) => b - a);
-        }
-    }
-}
-
-/**
- * Get the current academic year
- *
- * @returns The current academic year
- */
-function getCurrentAcademicYear(): number {
-    const today = new Date();
-    const currentYear = today.getFullYear();
-
-    if (today.getMonth() >= 9) {
-        return currentYear;
-    }
-
-    return currentYear - 1;
-}
-
-// Filter the courses based on the selected year
-const filteredCourses = computed(() => {
-    if (user.value !== null && user.value.isSpecificRole()) {
-        const role = user.value as RoleUser;
-
-        return role.courses.filter((course) => course.academic_startyear === selectedCoursesYear.value);
-    }
-
-    return [];
-});
 </script>
 
 <template>
     <BaseLayout>
-        <!-- Course heading -->
-        <div class="flex justify-content-between align-items-center mb-6">
-            <!-- Course list title -->
-            <Title class="m-0">{{ t('views.dashboard.courses') }}</Title>
-            <!-- Course list controls -->
-            <ButtonGroup>
-                <YearSelector :years="academicYears" v-model="selectedCoursesYear" />
-                <RouterLink :to="{ name: 'course-create' }" v-if="user?.isTeacher()">
-                    <Button :icon="PrimeIcons.PLUS" icon-pos="right" class="custom-button" />
-                </RouterLink>
-            </ButtonGroup>
-        </div>
-        <!-- Course list body -->
-        <CourseList :courses="filteredCourses" />
-        <!-- Project heading -->
-        <div class="flex justify-content-between align-items-center my-6">
-            <!-- Project list title -->
-            <Title class="m-0">{{ t('views.dashboard.projects') }}</Title>
-            <!-- Project list controls -->
-            <ButtonGroup>
-                <YearSelector :years="academicYears" v-model="selectedProjectsYear" />
-                <!-- TODO: Set to create a project-->
-                <RouterLink :to="{ name: 'course-create' }" v-if="!user?.isStudent()">
-                    <Button :icon="PrimeIcons.PLUS" icon-pos="right" class="custom-button" />
-                </RouterLink>
-            </ButtonGroup>
-        </div>
-        <!-- Project list body -->
-        <ProjectList :courses="filteredCourses" />
+        <StudentDashboardView v-if="user?.isStudent()" :student="user" />
     </BaseLayout>
 </template>
 
diff --git a/frontend/src/views/dashboard/roles/StudentDashboardView.vue b/frontend/src/views/dashboard/roles/StudentDashboardView.vue
new file mode 100644
index 00000000..ec77cd29
--- /dev/null
+++ b/frontend/src/views/dashboard/roles/StudentDashboardView.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import ButtonGroup from 'primevue/buttongroup';
+import Button from 'primevue/button';
+import Title from '@/components/layout/Title.vue';
+import YearSelector from '@/components/YearSelector.vue';
+import CourseList from '@/components/courses/CourseList.vue'
+import ProjectList from '@/components/projects/ProjectList.vue';
+import { Student } from '@/types/users/Student.ts';
+import { PrimeIcons } from 'primevue/api';
+import { useI18n } from 'vue-i18n';
+import { computed, ref, watch } from 'vue';
+import { useCourses } from '@/composables/services/courses.service.ts';
+
+/* Props */
+const props = defineProps<{
+    student: Student;
+}>();
+
+/* Composable injections */
+const { t } = useI18n();
+const { courses, getCoursesByStudent } = useCourses();
+
+/* State */
+const selectedYear = ref<number>(props.student.getAcademicYear());
+
+const filteredCourses = computed(() =>
+    courses.value?.filter((course) =>
+        course.academic_startyear === selectedYear.value
+    ) ?? []
+);
+
+/* Watchers */
+watch(
+    props.student,
+    () => {
+        getCoursesByStudent(props.student.id);
+    },
+    {
+        immediate: true,
+    }
+);
+</script>
+
+<template>
+    <!-- Course heading -->
+    <div class="flex justify-content-between align-items-center mb-6">
+        <!-- Course list title -->
+        <Title class="m-0">{{ t('views.dashboard.courses') }}</Title>
+        <!-- Course list controls -->
+        <ButtonGroup class="flex align-items-center">
+            <YearSelector :years="student.academic_years" v-model="selectedYear" />
+            <RouterLink :to="{ name: 'courses' }">
+                <Button :icon="PrimeIcons.PLUS" icon-pos="right" class="custom-button" style="height:51px; width: 51px;" />
+            </RouterLink>
+        </ButtonGroup>
+    </div>
+    <!-- Course list body -->
+    <CourseList :courses="filteredCourses" />
+    <!-- Project heading -->
+    <div class="flex justify-content-between align-items-center my-6">
+        <!-- Project list title -->
+        <Title class="m-0">{{ t('views.dashboard.projects') }}</Title>
+        <!-- Project list controls -->
+        <ButtonGroup>
+            <YearSelector :years="student.academic_years" v-model="selectedYear" />
+        </ButtonGroup>
+    </div>
+    <!-- Project list body -->
+    <ProjectList :courses="filteredCourses" />
+</template>
+
+<style scoped lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/projects/ProjectView.vue b/frontend/src/views/projects/ProjectView.vue
index ec300091..536c984b 100644
--- a/frontend/src/views/projects/ProjectView.vue
+++ b/frontend/src/views/projects/ProjectView.vue
@@ -7,18 +7,18 @@ import Title from '@/components/layout/Title.vue';
 import Skeleton from 'primevue/skeleton';
 import GroupCard from '@/components/projects/GroupCard.vue';
 import { useGroup } from '@/composables/services/groups.service.ts';
-import { Group } from '@/types/Group.ts';
+import { type Group } from '@/types/Group.ts';
 import { useAuthStore } from '@/store/authentication.store.ts';
 import { storeToRefs } from 'pinia';
 
 /* Composable injections */
 const route = useRoute();
-const { user, student } = storeToRefs(useAuthStore());
+const { student } = storeToRefs(useAuthStore());
 const { project, getProjectByID } = useProject();
 const { groups, getGroupsByProject, getGroupsByStudent } = useGroup();
 
 /* Component state */
-const group = ref<Group|null>(null);
+const group = ref<Group | null>(null);
 
 watch(
     student,
@@ -30,12 +30,12 @@ watch(
 
             // Check if the student is in a group for the project
             const projectGroups = groups.value;
-            await getGroupsByStudent("1");
+            await getGroupsByStudent('1');
 
             for (const studentGroup of groups.value ?? []) {
                 const isCommonGroup = projectGroups?.some((projectGroup) => projectGroup.id === studentGroup.id);
 
-                if (isCommonGroup) {
+                if (isCommonGroup === true) {
                     group.value = studentGroup;
                     break;
                 }
@@ -44,7 +44,7 @@ watch(
     },
     {
         immediate: true,
-    }
+    },
 );
 </script>
 

From 9ca6088d7de70e6a66f8be65ef3b8f0461a1b27b Mon Sep 17 00:00:00 2001
From: EwoutV <ewoutverlinde@hotmail.com>
Date: Wed, 3 Apr 2024 00:10:57 +0200
Subject: [PATCH 3/6] chore: linting

---
 frontend/.eslintrc.cjs                        | 68 +++++++++----------
 frontend/.prettierrc                          |  1 +
 frontend/src/components/YearSelector.vue      |  4 +-
 frontend/src/types/users/User.ts              |  2 +-
 .../views/courses/roles/StudentCourseView.vue | 10 +--
 .../views/courses/roles/TeacherCourseView.vue |  7 +-
 .../dashboard/roles/StudentDashboardView.vue  | 18 ++---
 7 files changed, 49 insertions(+), 61 deletions(-)

diff --git a/frontend/.eslintrc.cjs b/frontend/.eslintrc.cjs
index e177d614..b9c5b164 100644
--- a/frontend/.eslintrc.cjs
+++ b/frontend/.eslintrc.cjs
@@ -1,45 +1,45 @@
 module.exports = {
-    "env": {
-        "browser": true,
-        "es2021": true
+    'env': {
+        'browser': true,
+        'es2021': true
     },
-    "extends": [
-        "standard-with-typescript",
-        "plugin:vue/vue3-essential",
-        "plugin:prettier/recommended"
+    'extends': [
+        'standard-with-typescript',
+        'plugin:vue/vue3-essential',
+        'plugin:prettier/recommended'
     ],
-    "overrides": [
+    'overrides': [
         {
-            "env": {
-                "node": true
+            'env': {
+                'node': true
             },
-            "files": [
-                ".eslintrc.{js,cjs}"
+            'files': [
+                '.eslintrc.{js,cjs}'
             ],
-            "parserOptions": {
-                "sourceType": "script",
-            },
+            'parserOptions': {
+                'sourceType': 'script'
+            }
         }
     ],
-    "parser": "vue-eslint-parser",
-    "parserOptions": {
-        "parser": "@typescript-eslint/parser" ,
-        "ecmaVersion": "latest",
-        "sourceType": "module",
-        "project": ["./tsconfig.json"],
-        "extraFileExtensions": [".vue"]
+    'parser': 'vue-eslint-parser',
+    'parserOptions': {
+        'parser': '@typescript-eslint/parser',
+        'ecmaVersion': 'latest',
+        'sourceType': 'module',
+        'project': ['./tsconfig.json'],
+        'extraFileExtensions': ['.vue']
     },
-    "plugins": [
-        "vue",
-        "prettier"
+    'plugins': [
+        'vue',
+        'prettier'
     ],
-    "rules": {
-        "vue/multi-word-component-names": "off",  // Disable rule that requires multi-word component names in Vue files
-        "@typescript-eslint/no-floating-promises": "off", // Disable rule that flags floating promises in .ts files
-        "@typescript-eslint/no-extraneous-class": "off", // Disable rule that flags usage of unnecessary classes in the codebase
-        "@typescript-eslint/unbound-method": "off", // Disable rule that refuses unbound methods that could scope `this`
-        "prettier/prettier": "error",
-        "function-paren-newline": "off",
-        "function-call-argument-newline": "off"
+    'rules': {
+        'vue/multi-word-component-names': 'off',  // Disable rule that requires multi-word component names in Vue files
+        '@typescript-eslint/no-floating-promises': 'off', // Disable rule that flags floating promises in .ts files
+        '@typescript-eslint/no-extraneous-class': 'off', // Disable rule that flags usage of unnecessary classes in the codebase
+        '@typescript-eslint/unbound-method': 'off', // Disable rule that refuses unbound methods that could scope `this`
+        'prettier/prettier': "error",
+        'function-paren-newline': 'off',
+        'function-call-argument-newline': 'off'
     }
-}
+};
diff --git a/frontend/.prettierrc b/frontend/.prettierrc
index 62d1b562..f9ca8c32 100644
--- a/frontend/.prettierrc
+++ b/frontend/.prettierrc
@@ -6,6 +6,7 @@
 	"singleQuote": true,
 	"arrowParens": "always",
 	"wrapParens": "avoid",
+	"endOfLine": "auto",
 	"jsxBracketSameLine": true,
 	"bracketSameLine": true
 }
\ No newline at end of file
diff --git a/frontend/src/components/YearSelector.vue b/frontend/src/components/YearSelector.vue
index 205b15b6..07b42538 100644
--- a/frontend/src/components/YearSelector.vue
+++ b/frontend/src/components/YearSelector.vue
@@ -13,8 +13,8 @@ const props = defineProps<{ years: number[] }>();
 const years = computed(() =>
     props.years.map((year) => ({
         label: `${year} - ${year + 1}`,
-        value: year
-    }))
+        value: year,
+    })),
 );
 
 /* Models */
diff --git a/frontend/src/types/users/User.ts b/frontend/src/types/users/User.ts
index 28c1c212..490d044f 100644
--- a/frontend/src/types/users/User.ts
+++ b/frontend/src/types/users/User.ts
@@ -42,7 +42,7 @@ export class User {
      * @param date
      * @returns number
      */
-    public getAcademicYear(date: Date = new Date): number {
+    public getAcademicYear(date: Date = new Date()): number {
         const year = date.getFullYear();
 
         if (date.getMonth() >= 9) {
diff --git a/frontend/src/views/courses/roles/StudentCourseView.vue b/frontend/src/views/courses/roles/StudentCourseView.vue
index 8af2373f..8c26a6d7 100644
--- a/frontend/src/views/courses/roles/StudentCourseView.vue
+++ b/frontend/src/views/courses/roles/StudentCourseView.vue
@@ -1,11 +1,7 @@
-<script setup lang="ts">
-
-</script>
+<script setup lang="ts"></script>
 
 <template>
-
+    <div/>
 </template>
 
-<style scoped lang="scss">
-
-</style>
\ No newline at end of file
+<style scoped lang="scss"></style>
diff --git a/frontend/src/views/courses/roles/TeacherCourseView.vue b/frontend/src/views/courses/roles/TeacherCourseView.vue
index 8af2373f..2dbfcb6b 100644
--- a/frontend/src/views/courses/roles/TeacherCourseView.vue
+++ b/frontend/src/views/courses/roles/TeacherCourseView.vue
@@ -1,11 +1,8 @@
 <script setup lang="ts">
-
 </script>
 
 <template>
-
+    <div/>
 </template>
 
-<style scoped lang="scss">
-
-</style>
\ No newline at end of file
+<style scoped lang="scss"></style>
diff --git a/frontend/src/views/dashboard/roles/StudentDashboardView.vue b/frontend/src/views/dashboard/roles/StudentDashboardView.vue
index ec77cd29..b5791478 100644
--- a/frontend/src/views/dashboard/roles/StudentDashboardView.vue
+++ b/frontend/src/views/dashboard/roles/StudentDashboardView.vue
@@ -3,9 +3,9 @@ import ButtonGroup from 'primevue/buttongroup';
 import Button from 'primevue/button';
 import Title from '@/components/layout/Title.vue';
 import YearSelector from '@/components/YearSelector.vue';
-import CourseList from '@/components/courses/CourseList.vue'
+import CourseList from '@/components/courses/CourseList.vue';
 import ProjectList from '@/components/projects/ProjectList.vue';
-import { Student } from '@/types/users/Student.ts';
+import { type Student } from '@/types/users/Student.ts';
 import { PrimeIcons } from 'primevue/api';
 import { useI18n } from 'vue-i18n';
 import { computed, ref, watch } from 'vue';
@@ -23,11 +23,7 @@ const { courses, getCoursesByStudent } = useCourses();
 /* State */
 const selectedYear = ref<number>(props.student.getAcademicYear());
 
-const filteredCourses = computed(() =>
-    courses.value?.filter((course) =>
-        course.academic_startyear === selectedYear.value
-    ) ?? []
-);
+const filteredCourses = computed(() => courses.value?.filter((course) => course.academic_startyear === selectedYear.value) ?? []);
 
 /* Watchers */
 watch(
@@ -37,7 +33,7 @@ watch(
     },
     {
         immediate: true,
-    }
+    },
 );
 </script>
 
@@ -50,7 +46,7 @@ watch(
         <ButtonGroup class="flex align-items-center">
             <YearSelector :years="student.academic_years" v-model="selectedYear" />
             <RouterLink :to="{ name: 'courses' }">
-                <Button :icon="PrimeIcons.PLUS" icon-pos="right" class="custom-button" style="height:51px; width: 51px;" />
+                <Button :icon="PrimeIcons.PLUS" icon-pos="right" class="custom-button" style="height: 51px; width: 51px" />
             </RouterLink>
         </ButtonGroup>
     </div>
@@ -69,6 +65,4 @@ watch(
     <ProjectList :courses="filteredCourses" />
 </template>
 
-<style scoped lang="scss">
-
-</style>
\ No newline at end of file
+<style scoped lang="scss"></style>

From d12e5a4ae0f9d9474df06509db0b86dfdd4ef4db Mon Sep 17 00:00:00 2001
From: EwoutV <ewoutverlinde@hotmail.com>
Date: Wed, 3 Apr 2024 00:17:14 +0200
Subject: [PATCH 4/6] chore: linting

---
 frontend/src/views/courses/roles/StudentCourseView.vue | 2 +-
 frontend/src/views/courses/roles/TeacherCourseView.vue | 5 ++---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/frontend/src/views/courses/roles/StudentCourseView.vue b/frontend/src/views/courses/roles/StudentCourseView.vue
index 8c26a6d7..7e4c42ee 100644
--- a/frontend/src/views/courses/roles/StudentCourseView.vue
+++ b/frontend/src/views/courses/roles/StudentCourseView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts"></script>
 
 <template>
-    <div/>
+    <div />
 </template>
 
 <style scoped lang="scss"></style>
diff --git a/frontend/src/views/courses/roles/TeacherCourseView.vue b/frontend/src/views/courses/roles/TeacherCourseView.vue
index 2dbfcb6b..7e4c42ee 100644
--- a/frontend/src/views/courses/roles/TeacherCourseView.vue
+++ b/frontend/src/views/courses/roles/TeacherCourseView.vue
@@ -1,8 +1,7 @@
-<script setup lang="ts">
-</script>
+<script setup lang="ts"></script>
 
 <template>
-    <div/>
+    <div />
 </template>
 
 <style scoped lang="scss"></style>

From 036a9f91b30c443138362b359e0c783358451eee Mon Sep 17 00:00:00 2001
From: Bram Meir <bram.meir@ugent.be>
Date: Wed, 3 Apr 2024 11:18:45 +0200
Subject: [PATCH 5/6] fix: little fixes

---
 frontend/src/components/projects/ProjectList.vue | 2 +-
 frontend/src/types/users/Assistant.ts            | 2 +-
 frontend/src/types/users/Teacher.ts              | 2 +-
 frontend/src/views/calendar/CalendarView.vue     | 4 ++--
 frontend/src/views/dashboard/DashboardView.vue   | 3 ++-
 5 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/projects/ProjectList.vue b/frontend/src/components/projects/ProjectList.vue
index aa8ec771..a04bba61 100644
--- a/frontend/src/components/projects/ProjectList.vue
+++ b/frontend/src/components/projects/ProjectList.vue
@@ -48,7 +48,7 @@ watch(
                 class="col-12 md:col-6 lg:col-4 xl:col-3"
                 v-for="project in courses.flatMap((course) => course.projects)"
                 :key="project.id">
-                <ProjectCard class="h-100" :project="project" :course="project.course" />
+                <ProjectCard class="h-100" :project="project" :course="project.course" v-if="project.course" />
             </div>
         </div>
     </template>
diff --git a/frontend/src/types/users/Assistant.ts b/frontend/src/types/users/Assistant.ts
index 84a06f08..c19d736b 100644
--- a/frontend/src/types/users/Assistant.ts
+++ b/frontend/src/types/users/Assistant.ts
@@ -17,7 +17,7 @@ export class Assistant extends User {
         public create_time: Date,
         public last_login: Date | null,
     ) {
-        super(id, username, email, first_name, last_name, last_enrolled, is_staff, roles, faculties, create_time, last_login, courses);
+        super(id, username, email, first_name, last_name, last_enrolled, is_staff, roles, faculties, create_time, last_login);
     }
 
     /**
diff --git a/frontend/src/types/users/Teacher.ts b/frontend/src/types/users/Teacher.ts
index d75597b3..c0063632 100644
--- a/frontend/src/types/users/Teacher.ts
+++ b/frontend/src/types/users/Teacher.ts
@@ -17,7 +17,7 @@ export class Teacher extends User {
         public create_time: Date,
         public last_login: Date | null,
     ) {
-        super(id, username, email, first_name, last_name, last_enrolled, is_staff, roles, faculties, create_time, last_login, courses);
+        super(id, username, email, first_name, last_name, last_enrolled, is_staff, roles, faculties, create_time, last_login);
     }
 
     /**
diff --git a/frontend/src/views/calendar/CalendarView.vue b/frontend/src/views/calendar/CalendarView.vue
index 11679cde..55733feb 100644
--- a/frontend/src/views/calendar/CalendarView.vue
+++ b/frontend/src/views/calendar/CalendarView.vue
@@ -87,9 +87,9 @@ watch(
                 <Title class="mb-6">{{ formattedDate }}</Title>
 
                 <!-- Listing projects with given deadline -->
-                <div class="grid grid-cols-2 gap-4">
+                <div class="grid grid-cols-2 gap-2">
                     <div v-for="project in projectsWithDeadline" :key="project.id">
-                        <ProjectCard class="h-100" :project="project" />
+                        <ProjectCard class="h-100" :project="project" :course="project.course" v-if="project.course" />
                     </div>
                 </div>
             </div>
diff --git a/frontend/src/views/dashboard/DashboardView.vue b/frontend/src/views/dashboard/DashboardView.vue
index acce43d8..99ba852b 100644
--- a/frontend/src/views/dashboard/DashboardView.vue
+++ b/frontend/src/views/dashboard/DashboardView.vue
@@ -3,6 +3,7 @@ import BaseLayout from '@/components/layout/BaseLayout.vue';
 import { useAuthStore } from '@/store/authentication.store.ts';
 import { storeToRefs } from 'pinia';
 import StudentDashboardView from '@/views/dashboard/roles/StudentDashboardView.vue';
+import { Student } from '@/types/users/Student';
 
 /* Service injection */
 const { user } = storeToRefs(useAuthStore());
@@ -10,7 +11,7 @@ const { user } = storeToRefs(useAuthStore());
 
 <template>
     <BaseLayout>
-        <StudentDashboardView v-if="user?.isStudent()" :student="user" />
+        <StudentDashboardView v-if="user?.isStudent()" :student="user as Student" />
     </BaseLayout>
 </template>
 

From cf7a5d859a22ac06e688158989d5825fe1cc4ee8 Mon Sep 17 00:00:00 2001
From: Bram Meir <bram.meir@ugent.be>
Date: Wed, 3 Apr 2024 11:21:06 +0200
Subject: [PATCH 6/6] fix: linting

---
 frontend/src/views/dashboard/DashboardView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/views/dashboard/DashboardView.vue b/frontend/src/views/dashboard/DashboardView.vue
index 99ba852b..a6dc5a87 100644
--- a/frontend/src/views/dashboard/DashboardView.vue
+++ b/frontend/src/views/dashboard/DashboardView.vue
@@ -3,7 +3,7 @@ import BaseLayout from '@/components/layout/BaseLayout.vue';
 import { useAuthStore } from '@/store/authentication.store.ts';
 import { storeToRefs } from 'pinia';
 import StudentDashboardView from '@/views/dashboard/roles/StudentDashboardView.vue';
-import { Student } from '@/types/users/Student';
+import { type Student } from '@/types/users/Student';
 
 /* Service injection */
 const { user } = storeToRefs(useAuthStore());