diff --git a/backend/api/models/course.py b/backend/api/models/course.py
index b8dd4a42..403cae8a 100644
--- a/backend/api/models/course.py
+++ b/backend/api/models/course.py
@@ -46,7 +46,7 @@ def clone(self, clone_assistants=True) -> Self:
         )
 
         if clone_assistants:
-            # Add all the assistants of the current course to the follow up course
+            # Add all the assistants of the current course to the follow-up course
             for assistant in self.assistants.all():
                 course.assistants.add(assistant)
 
diff --git a/backend/authentication/models.py b/backend/authentication/models.py
index dff350cb..71eadc53 100644
--- a/backend/authentication/models.py
+++ b/backend/authentication/models.py
@@ -1,5 +1,7 @@
 from datetime import MINYEAR
 from django.db import models
+from django.apps import apps
+from django.utils.functional import cached_property
 from django.db.models import CharField, EmailField, IntegerField, DateTimeField, BooleanField, Model
 from django.contrib.auth.models import AbstractBaseUser, AbstractUser, PermissionsMixin
 
@@ -38,6 +40,22 @@ def make_admin(self):
         self.is_staff = True
         self.save()
 
+    @cached_property
+    def roles(self):
+        """Return all roles associated with this user"""
+        return [
+            # Use the class' name in lower case...
+            model.__name__.lower()
+            # ...for each installed app that could define a role model...
+            for app_config in apps.get_app_configs()
+            # ...for each model in the app's models...
+            for model in app_config.get_models()
+            # ...that inherit the User class.
+            if model is not self.__class__
+            if issubclass(model, self.__class__)
+            if model.objects.filter(id=self.id).exists()
+        ]
+
     @staticmethod
     def get_dummy_admin():
         return User(
diff --git a/backend/authentication/serializers.py b/backend/authentication/serializers.py
index 86c44cf7..f7d9297b 100644
--- a/backend/authentication/serializers.py
+++ b/backend/authentication/serializers.py
@@ -7,7 +7,7 @@
 from django.contrib.auth.models import update_last_login
 from rest_framework.serializers import (
     CharField,
-    EmailField,
+    SerializerMethodField,
     HyperlinkedRelatedField,
     ModelSerializer,
     Serializer,
@@ -23,7 +23,6 @@ class CASTokenObtainSerializer(Serializer):
     This serializer takes the CAS ticket and tries to validate it.
     Upon successful validation, create a new user if it doesn't exist.
     """
-
     ticket = CharField(required=True, min_length=49, max_length=49)
 
     def validate(self, data):
@@ -64,35 +63,37 @@ def _validate_ticket(self, ticket: str) -> dict:
         return response.data.get("attributes", dict)
 
     def _fetch_user_from_cas(self, attributes: dict) -> Tuple[User, bool]:
+        # Convert the lastenrolled attribute
         if attributes.get("lastenrolled"):
             attributes["lastenrolled"] = int(attributes.get("lastenrolled").split()[0])
 
-        user = UserSerializer(
-            data={
-                "id": attributes.get("ugentID"),
-                "username": attributes.get("uid"),
-                "email": attributes.get("mail"),
-                "first_name": attributes.get("givenname"),
-                "last_name": attributes.get("surname"),
-                "last_enrolled": attributes.get("lastenrolled"),
-            }
-        )
+        # Map the CAS data onto the user data
+        data = {
+            "id": attributes.get("ugentID"),
+            "username": attributes.get("uid"),
+            "email": attributes.get("mail"),
+            "first_name": attributes.get("givenname"),
+            "last_name": attributes.get("surname"),
+            "last_enrolled": attributes.get("lastenrolled"),
+        }
+
+        # Get or create the user
+        user, created = User.objects.get_or_create(id=data["id"], defaults=data)
 
-        if not user.is_valid():
-            raise ValidationError(user.errors)
+        # Validate the serializer
+        serializer = UserSerializer(user, data=data)
 
-        return user.get_or_create(user.validated_data)
+        if not serializer.is_valid():
+            raise ValidationError(serializer.errors)
+
+        # Save the user
+        return serializer.save(), created
 
 
 class UserSerializer(ModelSerializer):
     """Serializer for the user model
     This serializer validates the user fields for creation and updating.
     """
-
-    id = CharField()
-    username = CharField()
-    email = EmailField()
-
     faculties = HyperlinkedRelatedField(
         many=True, read_only=True, view_name="faculty-detail"
     )
@@ -102,14 +103,16 @@ class UserSerializer(ModelSerializer):
         read_only=True,
     )
 
+    roles = SerializerMethodField()
+
+    def get_roles(self, user: User):
+        """Get the roles for the user"""
+        return user.roles
+
     class Meta:
         model = User
         fields = "__all__"
 
-    def get_or_create(self, validated_data: dict) -> Tuple[User, bool]:
-        """Create or fetch the user based on the validated data."""
-        return User.objects.get_or_create(**validated_data)
-
 
 class UserIDSerializer(Serializer):
     user = PrimaryKeyRelatedField(
diff --git a/backend/ypovoli/settings.py b/backend/ypovoli/settings.py
index c839e268..44171472 100644
--- a/backend/ypovoli/settings.py
+++ b/backend/ypovoli/settings.py
@@ -20,11 +20,8 @@
 BASE_DIR = Path(__file__).resolve().parent.parent
 MEDIA_ROOT = os.path.normpath(os.path.join(BASE_DIR, "data/production"))
 
-TESTING_BASE_LINK = "http://testserver"
-
 
-# Quick-start development settings - unsuitable for production
-# See https://docs.djangoproject.com/en/5.0/howto/deployment/checklist/
+TESTING_BASE_LINK = "http://testserver"
 
 # SECURITY WARNING: keep the secret key used in production secret!
 SECRET_KEY = environ.get("DJANGO_SECRET_KEY", "lnZZ2xHc6HjU5D85GDE3Nnu4CJsBnm")
@@ -36,7 +33,6 @@
 
 
 # Application definition
-
 INSTALLED_APPS = [
     # Built-ins
     "django.contrib.auth",
@@ -44,12 +40,12 @@
     "django.contrib.sessions",
     "django.contrib.messages",
     "django.contrib.staticfiles",
-    # Third party
+
     "rest_framework_swagger",  # Swagger
     "rest_framework",  # Django rest framework
     "drf_yasg",  # Yet Another Swagger generator
     "sslserver",  # Used for local SSL support (needed by CAS)
-    # First party``
+
     "authentication",  # Ypovoli authentication
     "api",  # Ypovoli logic of the base application
     "notifications",  # Ypovoli notifications
@@ -85,12 +81,13 @@
     "TOKEN_OBTAIN_SERIALIZER": "authentication.serializers.CASTokenObtainSerializer",
 }
 
-AUTH_USER_MODEL = "authentication.User"
 ROOT_URLCONF = "ypovoli.urls"
 WSGI_APPLICATION = "ypovoli.wsgi.application"
 
-# Application endpoints
+# Authentication
+AUTH_USER_MODEL = "authentication.User"
 
+# Application endpoints
 PORT = environ.get("DJANGO_CAS_PORT", "8080")
 CAS_ENDPOINT = "https://login.ugent.be"
 CAS_RESPONSE = f"https://{DOMAIN_NAME}:{PORT}/auth/verify"
@@ -114,7 +111,6 @@
 DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"
 
 # Internationalization
-
 LANGUAGE_CODE = "en-us"
 TIME_ZONE = "UTC"
 USE_I18N = True
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index b1756bb5..1f9a4633 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,6 +8,7 @@
       "name": "vite-vue-typescript-starter",
       "version": "0.0.0",
       "dependencies": {
+        "@vueuse/core": "^10.9.0",
         "axios": "^1.6.8",
         "js-cookie": "^3.0.5",
         "moment": "^2.30.1",
@@ -748,6 +749,11 @@
       "integrity": "sha512-0vWLNK2D5MT9dg0iOo8GlKguPAU02QjmZitPEsXRuJXU/OGIOt9vT9Fc26wtYuavLxtO45v9PGleoL9Z0k1LHg==",
       "dev": true
     },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.20",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
+      "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow=="
+    },
     "node_modules/@types/yauzl": {
       "version": "2.10.3",
       "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz",
@@ -998,6 +1004,89 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.21.tgz",
       "integrity": "sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g=="
     },
+    "node_modules/@vueuse/core": {
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.9.0.tgz",
+      "integrity": "sha512-/1vjTol8SXnx6xewDEKfS0Ra//ncg4Hb0DaZiwKf7drgfMsKFExQ+FnnENcN6efPen+1kIzhLQoGSy0eDUVOMg==",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.20",
+        "@vueuse/metadata": "10.9.0",
+        "@vueuse/shared": "10.9.0",
+        "vue-demi": ">=0.14.7"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.14.7",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
+      "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.9.0.tgz",
+      "integrity": "sha512-iddNbg3yZM0X7qFY2sAotomgdHK7YJ6sKUvQqbvwnf7TmaVPxS4EJydcNsVejNdS8iWCtDk+fYXr7E32nyTnGA==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.9.0.tgz",
+      "integrity": "sha512-Uud2IWncmAfJvRaFYzv5OHDli+FbOzxiVEQdLCKQKLyhz94PIyFC3CHcH7EDMwIn8NPtD06+PNbC/PiO0LGLtw==",
+      "dependencies": {
+        "vue-demi": ">=0.14.7"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.14.7",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
+      "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/acorn": {
       "version": "8.11.3",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 1d1e5699..12635ca3 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -13,6 +13,7 @@
     "cypress:test": "cypress run"
   },
   "dependencies": {
+    "@vueuse/core": "^10.9.0",
     "axios": "^1.6.8",
     "js-cookie": "^3.0.5",
     "moment": "^2.30.1",
diff --git a/frontend/src/assets/lang/en.json b/frontend/src/assets/lang/en.json
index d46828d7..0ddf5c85 100644
--- a/frontend/src/assets/lang/en.json
+++ b/frontend/src/assets/lang/en.json
@@ -1,13 +1,14 @@
 {
     "layout": {
         "header": {
-            "logo": "University of Ghent logo",
+            "logo": "Ghent University logo",
+            "login": "login",
             "navigation": {
                 "dashboard": "Dashboard",
                 "calendar": "Calendar",
-                "courses": "Courses",
-                "settings": "Preferences",
-                "help": "Help"
+                "courses": "courses",
+                "settings": "preferences",
+                "help": "help"
             },
             "language": {
                 "nl": "Dutch",
@@ -20,6 +21,16 @@
             "courses": "My courses",
             "projects": "Current projects"
         },
+        "login": {
+            "title": "Login",
+            "illustration": "Dare to think",
+            "subtitle": "Login is done with your UGent account. If you have problems logging in, please contact the administrator.",
+            "button": "UGent login",
+            "card": {
+                "title": "Ypovoli",
+                "subtitle": "The official submission platform of Ghent University."
+            }
+        },
         "calendar": {
             "title": "Calendar"
         },
@@ -30,30 +41,34 @@
         }
     },
     "composables": {
-      "helpers": {
-        "errors": {
-          "notFound": "Not Found",
-          "notFoundDetail": "Resource not found.",
-          "unauthorized": "Unauthorized",
-          "unauthorizedDetail": "You are not authorized to access this resource.",
-          "server": "Server Error",
-          "serverDetail": "An error occurred on the server.",
-          "network": "Network Error",
-          "networkDetail": "Unable to connect to the server.",
-          "request": "Request Error",
-          "requestDetail": "An error occurred while making the request."
+        "helpers": {
+            "errors": {
+                "notFound": "Not found",
+                "notFoundDetail": "Source not found",
+                "unauthorized": "unauthorized",
+                "unauthorizedDetail": "You are not authorized to access this resource.",
+                "server": "Server Error",
+                "serverDetail": "An error occurred on the server.",
+                "network": "Network Error",
+                "networkDetail": "Unable to reach the server.",
+                "request": "request error",
+                "requestDetail": "An error occurred while creating the request."
+            }
         }
-      }
     },
     "components": {
         "buttons": {
             "academic_year": "Academic year {0}"
         },
         "card": {
-            "open": "Details"
+            "open": "details"
+        }
+    },
+    "toasts": {
+        "messages": {
+            "unknown": "An unknown error has occurred."
         }
     },
-
     "primevue": {
         "startsWith": "Starts with",
         "contains": "Contains",
diff --git a/frontend/src/assets/lang/nl.json b/frontend/src/assets/lang/nl.json
index a19ead69..c183c120 100644
--- a/frontend/src/assets/lang/nl.json
+++ b/frontend/src/assets/lang/nl.json
@@ -3,6 +3,7 @@
         "header": {
             "logo": "Logo van de Universiteit Gent",
             "login": "Login",
+            "view": "Bekijken als {0}",
             "navigation": {
                 "dashboard": "Dashboard",
                 "calendar": "Kalender",
@@ -51,6 +52,7 @@
           "serverDetail": "Er vond een fout plaats op de server.",
           "network": "Netwerk Fout",
           "networkDetail": "Kan de server niet bereiken.",
+
           "request": "Fout verzoek",
           "requestDetail": "Een fout vond plaats tijdens het maken van het verzoek."
         }
@@ -64,7 +66,18 @@
             "open": "Details"
         }
     },
-    
+    "types": {
+        "roles": {
+            "student": "Student",
+            "assistant": "Assistent",
+            "teacher": "Professor"
+        }
+    },
+    "toasts": {
+        "messages": {
+            "unknown": "Er is een onbekende fout opgetreden."
+        }
+    },
     "primevue": {
         "accept": "Ja",
         "addRule": "Voeg regel toe",
diff --git a/frontend/src/components/LanguageSelector.vue b/frontend/src/components/LanguageSelector.vue
new file mode 100644
index 00000000..2a067930
--- /dev/null
+++ b/frontend/src/components/LanguageSelector.vue
@@ -0,0 +1,65 @@
+<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, Ref} from 'vue';
+import {useLocalStorage} from '@vueuse/core';
+import {PrimeVueLocaleOptions, usePrimeVue} from 'primevue/config';
+
+/* Composables */
+const { locale, availableLocales, t, messages } = useI18n();
+const { config } = usePrimeVue();
+const localeStorage = useLocalStorage('locale', locale.value);
+
+/**
+ * Update the locale settings when the locale changes.
+ *
+ * @param locale
+ */
+function updateLocale(locale: Ref<string>) {
+    // Update saved locale
+    localeStorage.value = locale.value;
+
+    // Update PrimeVue locale
+    config.locale = messages.value[locale.value]['primevue'] as PrimeVueLocaleOptions;
+}
+
+/**
+ * Get the flag for the given locale.
+ *
+ * @param locale
+ */
+function getFlag(locale: string) {
+    if (locale === 'nl') {
+        return nl;
+    }
+
+    return en;
+}
+
+/* Hooks */
+onMounted(() => {
+    updateLocale(locale);
+});
+</script>
+
+<template>
+    <Dropdown id="language" v-model="locale" class="w-auto" :options="availableLocales" @change="updateLocale" 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"/>
+                <span>{{ t('layout.header.language.' + option) }}</span>
+            </div>
+        </template>
+        <template #value="{ value }">
+            <div class="h-full flex justify-content-center align-items-center">
+                <div class="uppercase text-sm">{{ value }}</div>
+            </div>
+        </template>
+    </Dropdown>
+</template>
+
+<style scoped lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/RoleSelector.vue b/frontend/src/components/RoleSelector.vue
new file mode 100644
index 00000000..526f0287
--- /dev/null
+++ b/frontend/src/components/RoleSelector.vue
@@ -0,0 +1,30 @@
+<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';
+
+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">
+            <template #option="{ option }">
+                <div class="flex align-items-center">
+                    <div>{{ 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="text-sm">{{ t('types.roles.' + value) }}</div>
+                </div>
+            </template>
+        </Dropdown>
+    </template>
+</template>
+
+<style scoped lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/layout/BaseLayout.vue b/frontend/src/components/layout/BaseLayout.vue
index 232f94a0..e5b8398f 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/Header.vue';
-import Body from '@/components/Body.vue';
-import Footer from '@/components/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/Body.vue b/frontend/src/components/layout/Body.vue
similarity index 57%
rename from frontend/src/components/Body.vue
rename to frontend/src/components/layout/Body.vue
index e4697df8..793a8748 100644
--- a/frontend/src/components/Body.vue
+++ b/frontend/src/components/layout/Body.vue
@@ -2,7 +2,7 @@
 </script>
 
 <template>
-    <div class="pt-6 pb-7 px-3 lg:px-0 fadein">
+    <div class="pt-6 pb-7 px-3 lg:px-0 fadein animation-duration-300">
         <slot/>
     </div>
 </template>
diff --git a/frontend/src/components/Footer.vue b/frontend/src/components/layout/Footer.vue
similarity index 100%
rename from frontend/src/components/Footer.vue
rename to frontend/src/components/layout/Footer.vue
diff --git a/frontend/src/components/Header.vue b/frontend/src/components/layout/Header.vue
similarity index 65%
rename from frontend/src/components/Header.vue
rename to frontend/src/components/layout/Header.vue
index 1b2e0a0e..70ad2e4e 100644
--- a/frontend/src/components/Header.vue
+++ b/frontend/src/components/layout/Header.vue
@@ -1,22 +1,26 @@
 <script setup lang="ts">
-import enLogo from '@/assets/img/logo-en.png';
-import nlLogo from '@/assets/img/logo-nl.png';
-import nlFlag from '@/assets/img/flags/nl-flag.svg';
-import enFlag from '@/assets/img/flags/en-flag.svg';
-import Dropdown from 'primevue/dropdown';
+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, availableLocales } = useI18n();
+const { t, locale } = useI18n();
 
 /* Localization variables */
-const logo: {[key: string]: string} = { 'nl': nlLogo, en: enLogo };
-const flags: {[key: string]: string} = { nl: nlFlag, en: enFlag };
+const logo = computed(() => {
+    if (locale.value === 'nl') {
+        return nl;
+    }
+
+    return en;
+});
 
 /* Navigation items */
 const items = computed(() => [
@@ -30,35 +34,28 @@ const items = computed(() => [
 <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[locale]" :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 w-14rem ml-auto text-sm flex flex-column align-items-end gap-3">
-                    <!-- Language selector -->
-                    <Dropdown id="language" v-model="locale" class="w-auto" :options="availableLocales" variant="outlined">
-                        <template #option="{ option }">
-                            <div class="flex align-items-center">
-                                <img :alt="t('layout.header.language.' + option)" :src="flags[option]" class="h-1rem mr-3"/>
-                                <div>
-                                    {{ t('layout.header.language.' + option) }}
-                                </div>
-                            </div>
-                        </template>
-                        <template #value="{ value }" class="pr-0">
-                            <div class="uppercase text-sm">{{ value }}</div>
-                        </template>
-                    </Dropdown>
-                    <!-- User information -->
+                <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"/>
+                        <!-- Language selector -->
+                        <LanguageSelector/>
+                    </div>
                     <div>
+                        <!-- User information -->
                         <template v-if="isAuthenticated && user">
                             <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"/>
@@ -85,7 +82,7 @@ const items = computed(() => [
 #header {
     background: var(--primary-color);
 
-    #language {
+    #language, #view {
         background: transparent;
         color: var(--primary-color-text);
         border: none;
diff --git a/frontend/src/components/Title.vue b/frontend/src/components/layout/Title.vue
similarity index 100%
rename from frontend/src/components/Title.vue
rename to frontend/src/components/layout/Title.vue
diff --git a/frontend/src/composables/i18n.ts b/frontend/src/composables/i18n.ts
index 00a319f0..27af1600 100644
--- a/frontend/src/composables/i18n.ts
+++ b/frontend/src/composables/i18n.ts
@@ -2,9 +2,12 @@ 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');
 
 export const i18n = createI18n({
-    locale: 'nl',
+    locale: localeStorage.value,
     fallbackLocale: 'en',
     legacy: false,
     messages: { en, nl }
diff --git a/frontend/src/composables/services/helpers.ts b/frontend/src/composables/services/helpers.ts
index 45d0f4a7..de746884 100644
--- a/frontend/src/composables/services/helpers.ts
+++ b/frontend/src/composables/services/helpers.ts
@@ -1,8 +1,9 @@
 import { AxiosError, AxiosResponse } from 'axios';
 import { client } from '@/composables/axios.ts'
-import {Ref} from 'vue';
-import {useToastStore} from '@/store/toast.store.ts';
+import { Ref } from 'vue';
+import { useMessagesStore } from '@/store/messages.store.ts';
 import { i18n } from '../i18n';
+
 const lifeTime = 3000;
 
 export async function get<T>(endpoint: string, ref: Ref<T|null>, fromJson: (data: any) => T): Promise<void> {
@@ -78,7 +79,8 @@ export async function getListMerged<T>(endpoints: string[], ref: Ref<T[]|null>,
 
 export function processError(error: AxiosError){
     const { t } = i18n.global;
-    const { add } = useToastStore();
+    const { add } = useMessagesStore();
+
     if (error.response) {
         // The request was made and the server responded with a status code
         if (error.response.status === 404) {
diff --git a/frontend/src/composables/services/structure_check.service.ts b/frontend/src/composables/services/structure_check.service.ts
index ddb8b85d..efe3b62e 100644
--- a/frontend/src/composables/services/structure_check.service.ts
+++ b/frontend/src/composables/services/structure_check.service.ts
@@ -1,43 +1,43 @@
-import {Structure_check} from '@/types/Structure_check.ts';
+import {StructureCheck} from '@/types/StructureCheck.ts';
 import {ref} from 'vue';
 import {endpoints} from '@/config/endpoints.ts';
 import { get, getList, create, delete_id } from '@/composables/services/helpers.ts';
 
-export function useStructure_check() {
-    const structure_checks = ref<Structure_check[]|null>(null);
-    const structure_check = ref<Structure_check|null>(null);
+export function useStructureCheck() {
+    const structure_checks = ref<StructureCheck[]|null>(null);
+    const structure_check = ref<StructureCheck|null>(null);
 
-    async function getStructure_checkByID(id: string) {
+    async function getStructureCheckByID(id: string) {
         const endpoint = endpoints.structure_checks.retrieve.replace('{id}', id);
-        await get<Structure_check>(endpoint, structure_check, Structure_check.fromJSON);
+        await get<StructureCheck>(endpoint, structure_check, StructureCheck.fromJSON);
     }
 
-    async function getStructure_checkByProject(project_id: string) {
+    async function getStructureCheckByProject(project_id: string) {
         const endpoint = endpoints.structure_checks.byProject.replace('{project_id}', project_id);
-        await getList<Structure_check>(endpoint, structure_checks, Structure_check.fromJSON);
+        await getList<StructureCheck>(endpoint, structure_checks, StructureCheck.fromJSON);
     }
 
-    async function createStructure_check(structure_check_data: Structure_check, project_id: string) {
+    async function createStructureCheck(structure_check_data: StructureCheck, project_id: string) {
         const endpoint = endpoints.structure_checks.byProject.replace('{project_id}', project_id);
-        await create<Structure_check>(endpoint, 
+        await create<StructureCheck>(endpoint, 
             {
                 name: structure_check_data.name
             },
-        structure_check, Structure_check.fromJSON);
+        structure_check, StructureCheck.fromJSON);
     }
 
-    async function deleteStructure_check(id: string) {
+    async function deleteStructureCheck(id: string) {
         const endpoint = endpoints.structure_checks.retrieve.replace('{id}', id);
-        await delete_id<Structure_check>(endpoint, structure_check, Structure_check.fromJSON);
+        await delete_id<StructureCheck>(endpoint, structure_check, StructureCheck.fromJSON);
     }
 
     return {
         structure_checks,
         structure_check,
-        getStructure_checkByID,
-        getStructure_checkByProject,
+        getStructureCheckByID,
+        getStructureCheckByProject,
 
-        createStructure_check,
-        deleteStructure_check
+        createStructureCheck,
+        deleteStructureCheck
     };
 }
\ No newline at end of file
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 37de12d2..12a3a2ff 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -7,20 +7,15 @@ import {i18n} from '@/composables/i18n';
 import {createApp} from 'vue';
 import {createPinia} from 'pinia';
 
+/* Create the application */
 const app = createApp(App);
 
 /* Bind application plugins */
 app.use(createPinia());
-
-app.use(ToastService);
-
 app.use(i18n);
-
-app.use(router)
-
-app.use(PrimeVue, {
-    ripple: true
-});
+app.use(router);
+app.use(PrimeVue, { ripple: true });
+app.use(ToastService);
 
 /* Bind app directives */
 app.directive('ripple', Ripple);
diff --git a/frontend/src/router/guards/authentication.guard.ts b/frontend/src/router/guards/authentication.guard.ts
index 4007cf82..748dd66d 100644
--- a/frontend/src/router/guards/authentication.guard.ts
+++ b/frontend/src/router/guards/authentication.guard.ts
@@ -3,7 +3,9 @@ import {useAuthStore} from '@/store/authentication.store.ts';
 import {storeToRefs} from 'pinia';
 
 export async function AuthenticationGuard(to: RouteLocationNormalized) {
-    const { refresh, pushIntent } = useAuthStore();
+    const { refresh } = useAuthStore();
+    const { intent } = storeToRefs(useAuthStore());
+
     const { isAuthenticated} = storeToRefs(useAuthStore());
 
     if (!['login', 'verify'].includes(to.name as string)) {
@@ -11,8 +13,7 @@ export async function AuthenticationGuard(to: RouteLocationNormalized) {
             await refresh();
 
             if (!isAuthenticated.value) {
-                pushIntent(to.fullPath);
-
+                intent.value = to.fullPath;
                 return { name: 'login' };
             }
         }
diff --git a/frontend/src/store/authentication.store.ts b/frontend/src/store/authentication.store.ts
index 3fa986be..a119e52c 100644
--- a/frontend/src/store/authentication.store.ts
+++ b/frontend/src/store/authentication.store.ts
@@ -1,95 +1,93 @@
 import axios from 'axios';
 import {defineStore} from 'pinia';
-import {User} from '@/types/User.ts';
+import {Role, User} from '@/types/User.ts';
 import {endpoints} from '@/config/endpoints.ts';
-import {ref} from 'vue';
-import {useToastStore} from '@/store/toast.store.ts';
+import {useMessagesStore} from '@/store/messages.store.ts';
 import {client} from '@/composables/axios.ts';
+import {Teacher} from '@/types/Teacher.ts';
+import {Student} from '@/types/Student.ts';
+import {Assistant} from '@/types/Assistant.ts';
+import {useLocalStorage} from '@vueuse/core';
+import {computed, ref} from 'vue';
 
-const INTENT_KEY = 'intent';
+export const useAuthStore = defineStore('auth', () => {
+    /* Stores */
+    const user = ref<User|null>(null);
+    const teacher = ref<Teacher|null>(null);
+    const student = ref<Student|null>(null);
+    const assistant = ref<Assistant|null>(null);
+    const view = useLocalStorage<Role|null>('view', null);
+    const intent = useLocalStorage<string>('intent', '/');
 
-export const useAuthStore = defineStore('auth', {
-    state: () => {
-        return {
-            user: ref<User|null>(null)
-        };
-    },
-    actions: {
-        /**
-         * Attempt to log in the user using a CAS ticket.
-         *
-         * @param ticket
-         */
-        async login(ticket: string) {
-            // Display toast messages.
-            const { add } = useToastStore();
+    /**
+     * Attempt to log in the user using a CAS ticket.
+     *
+     * @param ticket
+     */
+    async function login(ticket: string) {
+        // Display toast messages.
+        const { add } = useMessagesStore();
 
-            // Attempt to log in the user using the ticket.
-            await axios.post(endpoints.auth.token.obtain, {
-                ticket
-            }).then(() => {
-                add({
-                    severity: 'success',
-                    summary: 'Success',
-                    detail: 'You have successfully logged in.'
-                })
-            }).catch((error) => {
-                add({
-                    severity: 'error',
-                    summary: error.response.statusText,
-                    detail: error.response.data.detail
-                });
+        // Attempt to log in the user using the ticket.
+        await axios.post(endpoints.auth.token.obtain, {
+            ticket
+        }).then(() => {
+            add({
+                severity: 'success',
+                summary: 'Success',
+                detail: 'You have successfully logged in.'
+            })
+        }).catch((error) => {
+            add({
+                severity: 'error',
+                summary: error.response.statusText,
+                detail: error.response.data.detail
             });
-        },
-        /**
-         * Refresh the user objects in the API endpoint.
-         */
-        async refresh() {
-            // Display toast messages.
-            const { add } = useToastStore();
+        });
+    }
+
+    /**
+     * Refresh the user objects in the API endpoint.
+     */
+    async function refresh() {
+        // Display toast messages.
+        const { add } = useMessagesStore();
+
+        // Get the user information (using a cookie).
+        await axios.get(endpoints.auth.whoami).then(response => {
+            user.value = User.fromJSON(response.data);
+
+            if (view.value === null) {
+                view.value = user.value.roles[0];
+            }
+
+            // TODO: Get the teacher, student, and assistant information.
 
-            // Get the user information (using a cookie).
-            await axios.get(endpoints.auth.whoami).then(response => {
-                this.user = User.fromJSON(response.data);
-            }).catch((error) => {
-                add({
-                    severity: 'error',
-                    summary: error.response.statusText,
-                    detail: error.response.data.detail
-                });
+        }).catch((error) => {
+            add({
+                severity: 'error',
+                summary: error.response.statusText,
+                detail: error.response.data.detail
             });
-        },
-        async logout() {
-            await client.post(endpoints.auth.logout).catch();
-            this.user = null;
-        },
-        /**
-         * Save the intent URL in the local storage.
-         *
-         * @param intent
-         */
-        pushIntent(intent: string): void {
-            localStorage.setItem(INTENT_KEY, intent);
-        },
-        /**
-         * Get the intent URL from the local storage.
-         *
-         * @return string
-         */
-        popIntent(): string {
-            const intent = localStorage.getItem(INTENT_KEY) || '/';
-            localStorage.removeItem(INTENT_KEY);
-            return intent;
-        }
-    },
-    getters: {
-        /**
-         * Check if the user is authenticated.
-         *
-         * @param state
-         */
-        isAuthenticated(state): boolean {
-            return state.user !== null;
-        }
+        });
+    }
+
+    /**
+     * Log out the user.
+     */
+    async function logout() {
+        await client.post(endpoints.auth.logout).catch();
+        user.value = null;
+    }
+
+    /* Getters */
+    const isAuthenticated = computed(() => {
+        return user.value !== null;
+    });
+
+    return {
+        user, teacher, student, assistant, view, intent,
+        login, refresh, logout,
+        isAuthenticated
     }
 });
\ No newline at end of file
diff --git a/frontend/src/store/messages.store.ts b/frontend/src/store/messages.store.ts
new file mode 100644
index 00000000..45fca12d
--- /dev/null
+++ b/frontend/src/store/messages.store.ts
@@ -0,0 +1,22 @@
+import {ref} from 'vue';
+import {ToastMessageOptions} from 'primevue/toast';
+import {defineStore} from 'pinia';
+
+export const useMessagesStore = defineStore('messages', () => {
+    /* State */
+    const message = ref<ToastMessageOptions|null>(null);
+
+    /**
+     * Update the toast message.
+     *
+     * @param newMessage
+     */
+    function add(newMessage: ToastMessageOptions): void {
+        message.value = newMessage;
+    }
+
+    return {
+        message,
+        add
+    }
+});
\ No newline at end of file
diff --git a/frontend/src/store/toast.store.ts b/frontend/src/store/toast.store.ts
deleted file mode 100644
index 0a018fe1..00000000
--- a/frontend/src/store/toast.store.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import {ref} from 'vue';
-import {ToastMessageOptions} from 'primevue/toast';
-import {defineStore} from 'pinia';
-
-export const useToastStore = defineStore('toast', {
-    state: () => {
-        return {
-            message: ref<ToastMessageOptions|null>(null)
-        }
-    },
-    actions: {
-        /**
-         * Update a toast message.
-         *
-         * @param message
-         */
-        add(message: ToastMessageOptions): void {
-            this.message = message;
-        }
-    }
-});
\ No newline at end of file
diff --git a/frontend/src/types/Admin.ts b/frontend/src/types/Admin.ts
deleted file mode 100644
index 77ba641a..00000000
--- a/frontend/src/types/Admin.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Faculty } from "./Faculty";
-
-export class Admin {
-    constructor(
-        public id: string,
-        public last_login: Date |null,
-        public username: string,
-        public is_staff: boolean,
-        public email: string,
-        public first_name: string,
-        public last_name: string,
-        public last_enrolled: number,
-        public create_time: Date,
-        public faculties: Faculty[] = []
-    ) {
-    }
-
-    /**
-     * Convert a admin object to a admin instance.
-     *
-     * @param admin
-     */
-    static fromJSON(admin: Admin): Admin {
-        return new Admin(
-            admin.id,
-            admin.last_login ? new Date(admin.last_login) : null,
-            admin.username,
-            admin.is_staff,
-            admin.email,
-            admin.first_name,
-            admin.last_name,
-            admin.last_enrolled,
-            new Date(admin.create_time)
-        );
-    }
-}
\ No newline at end of file
diff --git a/frontend/src/types/Assistant.ts b/frontend/src/types/Assistant.ts
index 0a5d3132..786c58ee 100644
--- a/frontend/src/types/Assistant.ts
+++ b/frontend/src/types/Assistant.ts
@@ -1,18 +1,19 @@
 import { Faculty } from "./Faculty";
+import {Role, User} from '@/types/User.ts';
 
-export class Assistant {
+export class Assistant extends User {
     constructor(
         public id: string,
-        public last_login: Date |null,
         public username: string,
-        public is_staff: boolean,
         public email: string,
         public first_name: string,
         public last_name: string,
         public last_enrolled: number,
-        public create_time: Date,
+        public is_staff: boolean,
+        public roles: Role[] = [],
         public faculties: Faculty[] = []
     ) {
+        super(id, username, email, first_name, last_name, last_enrolled, is_staff, roles);
     }
 
     /**
@@ -20,18 +21,17 @@ export class Assistant {
      *
      * @param assistant
      */
-    
     static fromJSON(assistant: Assistant): Assistant {
         return new Assistant(
             assistant.id,
-            assistant.last_login ? new Date(assistant.last_login) : null,
             assistant.username,
-            assistant.is_staff,
             assistant.email,
             assistant.first_name,
             assistant.last_name,
             assistant.last_enrolled,
-            new Date(assistant.create_time)
+            assistant.is_staff,
+            assistant.roles,
+            assistant.faculties
         );
     }
 }
\ No newline at end of file
diff --git a/frontend/src/types/Base.ts b/frontend/src/types/Base.ts
deleted file mode 100644
index f2f7b543..00000000
--- a/frontend/src/types/Base.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-/*
-export abstract class JSONConvertible {
-    constructor() {}
-
-    static fromJSON(json: any): any {
-        throw new Error("fromJSON method not implemented in subclass.");
-    }
-}
-*/
\ No newline at end of file
diff --git a/frontend/src/types/Extra_check.ts b/frontend/src/types/ExtraCheck.ts
similarity index 54%
rename from frontend/src/types/Extra_check.ts
rename to frontend/src/types/ExtraCheck.ts
index 0446408c..2ea95149 100644
--- a/frontend/src/types/Extra_check.ts
+++ b/frontend/src/types/ExtraCheck.ts
@@ -1,4 +1,4 @@
-export class Extra_check {
+export class ExtraCheck {
     constructor(
     ) {
     }
diff --git a/frontend/src/types/File_extensions.ts b/frontend/src/types/FileExtension.ts
similarity index 100%
rename from frontend/src/types/File_extensions.ts
rename to frontend/src/types/FileExtension.ts
diff --git a/frontend/src/types/Projects.ts b/frontend/src/types/Projects.ts
index e2df26c3..1afca8f1 100644
--- a/frontend/src/types/Projects.ts
+++ b/frontend/src/types/Projects.ts
@@ -1,7 +1,7 @@
 import { Course } from "./Course";
-import { Extra_check } from "./Extra_check";
+import { ExtraCheck } from "./ExtraCheck.ts";
 import { Group } from "./Group";
-import { Structure_check } from "./Structure_check";
+import { StructureCheck } from "./StructureCheck.ts";
 import { Submission } from "./Submission";
 
 export class Project {
@@ -24,8 +24,8 @@ export class Project {
             "this is a default project given in the service because it isnt initiated",
              0
         ), //TODO check
-        public structure_checks: Structure_check[] = [],
-        public extra_checks: Extra_check[] = [],
+        public structure_checks: StructureCheck[] = [],
+        public extra_checks: ExtraCheck[] = [],
         public groups: Group[] = [],
         public submissions: Submission = new Submission("0",0,new Date(), false), //TODO check
     ) {
diff --git a/frontend/src/types/Structure_check.ts b/frontend/src/types/StructureCheck.ts
similarity index 80%
rename from frontend/src/types/Structure_check.ts
rename to frontend/src/types/StructureCheck.ts
index 8bccf732..b065ce9f 100644
--- a/frontend/src/types/Structure_check.ts
+++ b/frontend/src/types/StructureCheck.ts
@@ -1,7 +1,7 @@
-import { File_extension } from "./File_extensions";
+import { File_extension } from "./FileExtension.ts";
 import { Project } from "./Projects";
 
-export class Structure_check {
+export class StructureCheck {
     constructor(
         public id: string,
         public name: string,
@@ -28,8 +28,8 @@ export class Structure_check {
      *
      * @param structure_check
      */
-    static fromJSON(structure_check: Structure_check): Structure_check {
-        return new Structure_check(
+    static fromJSON(structure_check: StructureCheck): StructureCheck {
+        return new StructureCheck(
             structure_check.id,
             structure_check.name
         )
diff --git a/frontend/src/types/Student.ts b/frontend/src/types/Student.ts
index 6d2d2c50..b884ae5c 100644
--- a/frontend/src/types/Student.ts
+++ b/frontend/src/types/Student.ts
@@ -1,23 +1,24 @@
 import { Course } from "./Course";
 import { Faculty } from "./Faculty";
 import { Group } from "./Group";
+import {Role, User} from '@/types/User.ts';
 
-export class Student {
+export class Student extends User {
     constructor(
         public id: string,
-        public last_login: Date |null,
         public username: string,
-        public is_staff: boolean,
         public email: string,
         public first_name: string,
         public last_name: string,
+        public is_staff: boolean,
         public last_enrolled: number,
-        public create_time: Date,
+        public roles: Role[] = [],
         public student_id: string,
         public courses: Course[] = [],
         public groups: Group[] = [],
         public faculties: Faculty[] = []
     ) {
+        super(id, username, email, first_name, last_name, last_enrolled, is_staff, roles);
     }
 
     /**
@@ -28,15 +29,17 @@ export class Student {
     static fromJSON(student: Student): Student {
         return new Student(
             student.id,
-            student.last_login ? new Date(student.last_login) : null,
             student.username,
-            student.is_staff,
             student.email,
             student.first_name,
             student.last_name,
+            student.is_staff,
             student.last_enrolled,
-            new Date(student.create_time),
-            student.student_id
+            student.roles,
+            student.student_id,
+            student.courses,
+            student.groups,
+            student.faculties
         );
     }
 }
\ No newline at end of file
diff --git a/frontend/src/types/Teacher.ts b/frontend/src/types/Teacher.ts
index c3237f20..93bed9df 100644
--- a/frontend/src/types/Teacher.ts
+++ b/frontend/src/types/Teacher.ts
@@ -1,18 +1,19 @@
 import { Faculty } from "./Faculty";
+import {Role, User} from '@/types/User.ts';
 
-export class Teacher {
+export class Teacher extends User {
     constructor(
         public id: string,
-        public last_login: Date | null,
         public username: string,
-        public is_staff: boolean,
         public email: string,
         public first_name: string,
         public last_name: string,
         public last_enrolled: number,
-        public create_time: Date,
+        public is_staff: boolean,
+        public roles: Role[] = [],
         public faculties: Faculty[] = []
     ) {
+        super(id, username, email, first_name, last_name, last_enrolled, is_staff, roles);
     }
 
     /**
@@ -24,14 +25,14 @@ export class Teacher {
     static fromJSON(teacher: Teacher): Teacher {
         return new Teacher(
             teacher.id,
-            teacher.last_login ? new Date(teacher.last_login) : null,
             teacher.username,
-            teacher.is_staff,
             teacher.email,
             teacher.first_name,
             teacher.last_name,
             teacher.last_enrolled,
-            new Date(teacher.create_time)
+            teacher.is_staff,
+            teacher.roles,
+            teacher.faculties
         );
     }
 }
\ No newline at end of file
diff --git a/frontend/src/types/User.ts b/frontend/src/types/User.ts
index 31de3a74..f72c685e 100644
--- a/frontend/src/types/User.ts
+++ b/frontend/src/types/User.ts
@@ -1,10 +1,15 @@
+export type Role = 'user' | 'student' | 'assistant' | 'teacher';
+
 export class User {
     constructor(
         public id: string,
         public username: string,
+        public email: string,
         public first_name: string,
         public last_name: string,
-        public last_enrolled: number
+        public last_enrolled: number,
+        public is_staff: boolean,
+        public roles: Role[] = []
     ) {
     }
 
@@ -17,6 +22,33 @@ export class User {
         return `${this.first_name} ${this.last_name}`;
     }
 
+    /**
+     * Check if the user is a student.
+     *
+     * @returns boolean
+     */
+    public isStudent(): boolean {
+        return this.roles.includes('student');
+    }
+
+    /**
+     * Check if the user is an assistant.
+     *
+     * @returns boolean
+     */
+    public isAssistant(): boolean {
+        return this.roles.includes('assistant');
+    }
+
+    /**
+     * Check if the user is a teacher.
+     *
+     * @returns boolean
+     */
+    public isTeacher(): boolean {
+        return this.roles.includes('teacher');
+    }
+
     /**
      * Convert a user object to a user instance.
      *
@@ -26,9 +58,12 @@ export class User {
         return new User(
             user.id,
             user.username,
+            user.email,
             user.first_name,
             user.last_name,
-            user.last_enrolled
+            user.last_enrolled,
+            user.is_staff,
+            user.roles
         );
     }
 }
\ No newline at end of file
diff --git a/frontend/src/views/App.vue b/frontend/src/views/App.vue
index 8ac761ea..4c067f5c 100644
--- a/frontend/src/views/App.vue
+++ b/frontend/src/views/App.vue
@@ -1,28 +1,27 @@
 <script setup lang="ts">
 import Toast from 'primevue/toast';
 import {watch} from 'vue';
-import {PrimeVueLocaleOptions, usePrimeVue} from 'primevue/config';
 import {useI18n} from 'vue-i18n';
-import {useToastStore} from '@/store/toast.store.ts';
+import {useMessagesStore} from '@/store/messages.store.ts';
 import {useToast} from 'primevue/usetoast';
 import {storeToRefs} from 'pinia';
 
 /* Composables */
-const { locale, messages } = useI18n();
-const { config } = usePrimeVue();
+const { t } = useI18n();
 const { add } = useToast();
-const { message } = storeToRefs(useToastStore());
-
-/* Set the PrimeVue locale when the locale changes */
-watch(locale, () => {
-    const translations = messages.value[locale.value]['primevue'];
-    config.locale = translations as PrimeVueLocaleOptions;
-}, { immediate: true });
+const { message } = storeToRefs(useMessagesStore());
 
 /* Show a toast message when a new message is added */
 watch(message, () => {
+    // Check if the message is not null.
     if (message.value !== null) {
-        add(message.value);
+        // Check if the message has a detail.
+        if (!message.value.detail) {
+            message.value.detail = t('toasts.messages.unknown');
+        }
+
+        // Add the message to the toast.
+        add({...message.value, life: 5000});
     }
 });
 </script>
diff --git a/frontend/src/views/authentication/LoginView.vue b/frontend/src/views/authentication/LoginView.vue
index 3983e488..42e0a7fe 100644
--- a/frontend/src/views/authentication/LoginView.vue
+++ b/frontend/src/views/authentication/LoginView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import Button from 'primevue/button';
 import BaseLayout from '@/components/layout/BaseLayout.vue';
-import Title from '@/components/Title.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';
diff --git a/frontend/src/views/authentication/VerifyView.vue b/frontend/src/views/authentication/VerifyView.vue
index 6b8cb168..4cfc5ada 100644
--- a/frontend/src/views/authentication/VerifyView.vue
+++ b/frontend/src/views/authentication/VerifyView.vue
@@ -3,22 +3,22 @@ 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/Title.vue';
+import Title from '@/components/layout/Title.vue';
 
 const { query } = useRoute();
 const { push } = useRouter();
-const { login, popIntent } = useAuthStore();
+const { login, intent } = useAuthStore();
 
 onMounted(async () => {
     await login(query.ticket as string).then(() => {
-        push(popIntent());
+        push(intent);
     });
 });
 </script>
 
 <template>
     <BaseLayout>
-        <div class="w-8 mx-auto border-round surface-100 p-4">
+        <div class="w-8 mx-auto surface-100 p-4">
             <Title>Inloggen</Title>
             <div class="flex align-items-center mt-3">
                 <span class="mr-2">Je wordt zo meteen doorverwezen</span> <span class="pi pi-spin pi-spinner"/>
diff --git a/frontend/src/views/calendar/CalendarView.vue b/frontend/src/views/calendar/CalendarView.vue
index 80a2392d..8cb9d5c4 100644
--- a/frontend/src/views/calendar/CalendarView.vue
+++ b/frontend/src/views/calendar/CalendarView.vue
@@ -2,7 +2,7 @@
 import moment from 'moment';
 import BaseLayout from '@/components/layout/BaseLayout.vue';
 import Calendar from 'primevue/calendar';
-import Title from '@/components/Title.vue';
+import Title from '@/components/layout/Title.vue';
 import { useProject } from '@/composables/services/project.service';
 import { computed, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
diff --git a/frontend/src/views/courses/CourseView.vue b/frontend/src/views/courses/CourseView.vue
index 42bb6469..d9b6ccc9 100644
--- a/frontend/src/views/courses/CourseView.vue
+++ b/frontend/src/views/courses/CourseView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import Calendar from 'primevue/calendar';
 import BaseLayout from '@/components/layout/BaseLayout.vue';
-import Title from '@/components/Title.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';
diff --git a/frontend/src/views/dashboard/DashboardView.vue b/frontend/src/views/dashboard/DashboardView.vue
index 437b5457..6640a0fe 100644
--- a/frontend/src/views/dashboard/DashboardView.vue
+++ b/frontend/src/views/dashboard/DashboardView.vue
@@ -1,74 +1,46 @@
 <script setup lang="ts">
+import Skeleton from 'primevue/skeleton';
 import ButtonGroup from 'primevue/buttongroup';
 import Button from 'primevue/button';
 import CourseCard from '@/components/courses/CourseCard.vue';
 import BaseLayout from '@/components/layout/BaseLayout.vue';
-import Title from '@/components/Title.vue';
-import { useI18n } from 'vue-i18n';
-import { PrimeIcons } from 'primevue/api';
-import { onMounted } from 'vue';
-import { useCourses } from '@/composables/services/courses.service.ts';
-import { useStudents } from '@/composables/services/students.service.ts';
+import Title from '@/components/layout/Title.vue';
+import {useI18n} from 'vue-i18n';
+import {PrimeIcons} from 'primevue/api';
+import {onMounted} from 'vue';
+import {useCourses} from '@/composables/services/courses.service.ts';
 import {ref} from 'vue';
 import {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';
 
 /* Composable injections */
-const { t } = useI18n();
+const {t} = useI18n();
 
-const allProjects= ref<Project[]>([]);
+/* Component state */
+const allProjects = ref<Project[]>([]);
 
 /* Service injection */
+const { user } = useAuthStore();
 const { projects, getProjectsByCourse } = useProject();
-const { courses, getCoursesByStudent, createCourse, deleteCourse } = useCourses();
-const { studentJoinCourse } = useStudents();
-
+const { courses, getCoursesByStudent } = useCourses();
 
 onMounted(async () => {
-  console.log("fetching courses");
-  await getCoursesByStudent("1", t);  // TODO make this the id of the logged in user
-  // loop through courses and fetch all projects
-  let tempProjects: Project[] = [];
-  for (const course of courses.value ?? []) {
-    await getProjectsByCourse(course.id, t);
-    const projectsWithCourse = projects.value?.map(project => ({
-      ...project,
-      course: course // Voeg de huidige cursus toe aan elk project
-    }));
-    // Add current course to the received projects
-    tempProjects = tempProjects.concat(projectsWithCourse ?? []);
-  }
-  allProjects.value = tempProjects;
-});
-
-// test code vvvv
-
-const idValue = ref('');
-const vaknaam = ref('');
+    if (user !== null) {
+        await getCoursesByStudent(user.id);
 
-// Method to execute when the button is clicked
-const executeCode = () => {
-  // Put your code here that you want to execute
-  console.log('Button clicked! Code executed.');
-  createCourse({name: vaknaam.value, academic_startyear:2023}, t);
-};
+        for (const course of courses.value ?? []) {
+            await getProjectsByCourse(course.id);
 
-// Function to handle form submission
-const handleSubmit = () => {
-  // Perform actions here, such as sending the input value to a backend API
-  console.log('Submitted value:', idValue.value);
-  studentJoinCourse(idValue.value, "1", t);
-};
+            projects.value?.forEach(project => {
+                project.course = course;
+            });
 
-// Function to handle form submission
-const handleDelete = () => {
-  // Perform actions here, such as sending the input value to a backend API
-  console.log('Submitted value:', idValue.value);
-  deleteCourse(idValue.value, t);
-};
-
-// test code ^^^^
+            allProjects.value.concat(projects.value ?? []);
+        }
+    }
+});
 
 </script>
 
@@ -80,23 +52,16 @@ const handleDelete = () => {
             <Title class="m-0">{{ t('views.dashboard.courses') }}</Title>
             <!-- Course list controls -->
             <ButtonGroup>
-                <Button :label="t('components.buttons.academic_year', ['2023-2024'])" :icon="PrimeIcons.CHEVRON_DOWN" icon-pos="right" outlined/>
+                <Button :label="t('components.buttons.academic_year', ['2023-2024'])" :icon="PrimeIcons.CHEVRON_DOWN"
+                        icon-pos="right" outlined/>
                 <Button :icon="PrimeIcons.PLUS" icon-pos="right"/>
             </ButtonGroup>
         </div>
-        <!--extra code to test -->
-        <input type="text" v-model="vaknaam" placeholder="vaknaam" />
-        <button @click="executeCode">create course with vaknaam</button>
-        <input type="text" v-model="idValue" placeholder="ID" />
-        <button @click="handleSubmit">join course with id</button>
-        <button @click="handleDelete">delete course with id</button>
-        <!--extra code to test -->
-
         <!-- Course list body -->
         <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 fadein" v-for="course in courses">
+                    <div class="col-12 md:col-6 lg:col-4 xl:col-3" v-for="course in courses">
                         <CourseCard class="h-100" :course="course"/>
                     </div>
                 </template>
@@ -118,16 +83,23 @@ const handleDelete = () => {
             <Title class="m-0">{{ t('views.dashboard.projects') }}</Title>
             <!-- Project list controls -->
             <ButtonGroup>
-                <Button :label="t('components.buttons.academic_year', ['2023-2024'])" :icon="PrimeIcons.CHEVRON_DOWN" icon-pos="right" outlined/>
+                <Button :label="t('components.buttons.academic_year', ['2023-2024'])" :icon="PrimeIcons.CHEVRON_DOWN"
+                        icon-pos="right" outlined/>
                 <Button :icon="PrimeIcons.PLUS" icon-pos="right"/>
             </ButtonGroup>
         </div>
         <!-- Project list body -->
         <div class="grid align-items-stretch">
-           <div class="col-12 md:col-6 lg:col-4 xl:col-3" v-for="project in allProjects">
-                <ProjectCard class="h-100" :project="project"/>
-            </div>
-
+            <template v-if="allProjects.length > 0">
+                <div class="col-12 md:col-6 lg:col-4 xl:col-3" v-for="project in allProjects">
+                    <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>
     </BaseLayout>
 </template>
diff --git a/frontend/src/views/projects/ProjectView.vue b/frontend/src/views/projects/ProjectView.vue
index 99b16038..d3f7157f 100644
--- a/frontend/src/views/projects/ProjectView.vue
+++ b/frontend/src/views/projects/ProjectView.vue
@@ -1,72 +1,65 @@
 <script setup lang="ts">
 import BaseLayout from "@/components/layout/BaseLayout.vue";
-import {useI18n} from 'vue-i18n';
 import {onMounted, ref} from "vue";
 import {useProject} from "@/composables/services/project.service.ts";
 import {useRoute} from "vue-router";
-import Title from "@/components/Title.vue";
+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";
 
-/**
- * Todo change all static id's to user.id
- */
-
 /* Composable injections */
-const { t } = useI18n();
-/* Service injections */
 const route = useRoute();
 const { project, getProjectByID } = useProject();
 const { groups, getGroupsByProject, getGroupsByStudent } = useGroup();
+
+/* Component state */
 const finalGroup = ref<Group>(new Group("-1"));
 
 onMounted(async () => {
-  const projectId = route.params.projectId;
-  await getProjectByID(projectId as string, t);
-  console.log("fetching groups")
-  // Get id group from project by comparing the users groups and the project groups
-  await getGroupsByProject(projectId as string, t);
-  const projectGroups = groups.value;
-  // get all groups from the user
-  await getGroupsByStudent("1", t);
-  for (const group of groups.value ?? []) {
-    const isCommonGroup = projectGroups?.some(projectGroup => projectGroup.id === group.id);
+    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);
 
-    if (isCommonGroup) {
-      finalGroup.value = group;
-      break;
+        if (isCommonGroup) {
+            finalGroup.value = group;
+            break;
+        }
     }
-  }
-  console.log('laatste id')
-  console.log(finalGroup.value.id);
 });
 
 </script>
 
 <template>
-  <BaseLayout>
-    <div class="grid">
-      <div class="col-12 md:col-8">
-        <div>
-          <Title v-if="project">
-            {{ project.name }}
-          </Title>
-          <Skeleton class="mb-4" height="3rem" width="30rem" v-else/>
-        </div>
-        <div>
-          <p v-if="project">
-            {{ project.description }}
-          </p>
-          <Skeleton height="10rem" v-else/>
+    <BaseLayout>
+        <div class="grid">
+            <div class="col-12 md:col-8">
+                <div>
+                    <Title v-if="project">
+                        {{ project.name }}
+                    </Title>
+                    <Skeleton class="mb-4" height="3rem" width="30rem" v-else/>
+                </div>
+                <div>
+                    <p v-if="project">
+                        {{ project.description }}
+                    </p>
+                    <Skeleton height="10rem" v-else/>
+                </div>
+            </div>
+            <div class="col-12 md:col-4">
+                <GroupCard v-if="finalGroup.id !== '-1'" :group-id="finalGroup.id"></GroupCard>
+            </div>
         </div>
-      </div>
-      <div class="col-12 md:col-4">
-        <GroupCard v-if="finalGroup.id !== '-1'" :group-id="finalGroup.id"></GroupCard>
-      </div>
-    </div>
-  </BaseLayout>
+    </BaseLayout>
 </template>
 
 <style scoped lang="scss">