diff --git a/backend/api/fixtures/courses.yaml b/backend/api/fixtures/courses.yaml
index 4a8677c9..eba5159f 100644
--- a/backend/api/fixtures/courses.yaml
+++ b/backend/api/fixtures/courses.yaml
@@ -1,21 +1,87 @@
 - model: api.course
   pk: 1
   fields:
-    name: Math
+    name: "Parallel and Distributed Software Systems"
     academic_startyear: 2023
-    description: Math course
+    description: "Deze cursus brengt de studenten de verschillende aspecten aan van het ontwerp en
+implementatie van gedistribueerde software. De cursus geeft de studenten een state-of-the-art
+overzicht van parallelle en cloud-gebaseerde systemen, het ontwerp van parallelle software,
+software engineering specifiek voor deze applicaties en het beheren van hoog-performante en
+cloud-gebaseerde systemen. De nadruk ligt op de algoritmische aspecten, software aspecten
+en op de verschillende programmeermodellen. Hardware en architectuur aspecten worden
+slechts aangehaald in de mate noodzakelijk voor het begrijpen van de impact van software
+performantie."
     parent_course: null
+    faculty: "Ingenieurswetenschappen_Architectuur"
 - model: api.course
   pk: 2
   fields:
-    name: Sel2
+    name: "Wiskundige modellering in de ingenieurswetenschappen"
     academic_startyear: 2023
-    description: Software course
-    parent_course: 3
+    description: "De basiswiskunde en de eruit voortspruitende wiskundige modellen spelen een prominente rol
+in de ingenieurswetenschappen. Wiskunde maakt immers de kwantitatieve aanpak mogelijk die
+eigen is aan de ingenieurspraktijk, en wiskundig modelleren ligt aan de basis van de meeste
+courante technologische innovaties."
+    parent_course: null
+    faculty: "Wetenschappen"
 - model: api.course
   pk: 3
   fields:
-    name: Sel1
-    academic_startyear: 2022
-    description: Software course
+    name: "Software Engineering Lab 2"
+    academic_startyear: 2023
+    description: "Het ontwerpen en ontwikkelen van een groot software-project in teamverband waarbij
+vaardigheden en kennis uit verschillende opleidingsonderdelen moeten worden toegepast. De
+uitvoering van het project gebeurt in een context die de bedrijfsrealiteit zoveel mogelijk
+nabootst: de projectgroepen moeten zelfstandig beslissingen nemen over werkverdeling,
+tijdsbesteding, keuze van architectuur en programmeeromgeving, enz."
+    parent_course: null
+    faculty: "Wetenschappen"
+- model: api.course
+  pk: 4
+  fields:
+    name: "Informatiebeveiliging"
+    academic_startyear: 2023
+    description: "Kennis bijbrengen van basisbegrippen over informatiebeveiliging (wiskundige basis,
+toepassingen en legale aspecten)"
+    parent_course: null
+    faculty: "Ingenieurswetenschappen_Architectuur"
+- model: api.course
+  pk: 5
+  fields:
+    name: "Computationele biologie"
+    academic_startyear: 2023
+    description: "Waar komt SARS vandaan? Hebben wij genen geërfd van de Neanderthalers? Hoe gebruiken
+planten hun interne klok? Hoeveel genetisch materiaal wordt er uitgewisseld tussen bacteriële
+soorten? De genomische revolutie in de biologie maakt het mogelijk om een antwoord te
+vinden op elk van deze vragen. Maar deze revolutie zou onmogelijk geweest zijn zonder de
+ondersteuning van krachtige computationele en statistische methodes die toelaten om gebruik
+te maken van deze genomische informatie. Oplossen van openstaande en toekomstige
+problemen die opduiken in dit intrigerend onderzoeksdomein vereist de opleiding van een
+volgende generatie onderzoekers, die zich vloeiend kunnen uitdrukken in de taal van de
+wiskunde, informatica en biologie."
+    parent_course: null
+    faculty: "Wetenschappen"
+- model: api.course
+  pk: 6
+  fields:
+    name: "Inleiding tot de elektrotechniek"
+    academic_startyear: 2023
+    description: "Practica horend bij het opleidingsonderdeel"
+    parent_course: null
+    faculty: "Wetenschappen"
+- model: api.course
+  pk: 7
+  fields:
+    name: "Mobile and Broadband Access Networks"
+    academic_startyear: 2023
+    description: "Practica horend bij het opleidingsonderdeel"
+    parent_course: null
+    faculty: "Ingenieurswetenschappen_Architectuur"
+- model: api.course
+  pk: 8
+  fields:
+    name: "Design of Multimedia Applications"
+    academic_startyear: 2023
+    description: "Software projects"
     parent_course: null
+    faculty: "Ingenieurswetenschappen_Architectuur"
\ No newline at end of file
diff --git a/backend/api/migrations/0008_course_faculty.py b/backend/api/migrations/0008_course_faculty.py
new file mode 100644
index 00000000..e7641849
--- /dev/null
+++ b/backend/api/migrations/0008_course_faculty.py
@@ -0,0 +1,20 @@
+# Generated by Django 5.0.3 on 2024-04-03 10:01
+
+import django.db.models.deletion
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('api', '0007_merge_20240313_0639'),
+        ('authentication', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='course',
+            name='faculty',
+            field=models.ForeignKey(null=True, on_delete=django.db.models.deletion.SET_NULL, to='authentication.faculty'),
+        ),
+    ]
diff --git a/backend/api/migrations/0009_merge_0008_add_extra_checks_0008_course_faculty.py b/backend/api/migrations/0009_merge_0008_add_extra_checks_0008_course_faculty.py
new file mode 100644
index 00000000..409ccce3
--- /dev/null
+++ b/backend/api/migrations/0009_merge_0008_add_extra_checks_0008_course_faculty.py
@@ -0,0 +1,14 @@
+# Generated by Django 5.0.3 on 2024-04-04 14:51
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('api', '0008_add_extra_checks'),
+        ('api', '0008_course_faculty'),
+    ]
+
+    operations = [
+    ]
diff --git a/backend/api/models/course.py b/backend/api/models/course.py
index b4fdb972..3612827c 100644
--- a/backend/api/models/course.py
+++ b/backend/api/models/course.py
@@ -2,6 +2,8 @@
 from typing import Self
 from django.db import models
 
+from authentication.models import Faculty
+
 
 class Course(models.Model):
     """This model represents a single course.
@@ -14,8 +16,16 @@ class Course(models.Model):
     # Begin year of the academic year
     academic_startyear = models.IntegerField(blank=False, null=False)
 
+    # The description of the course
     description = models.TextField(blank=True, null=True)
 
+    # The faculty this course belongs to
+    faculty = models.ForeignKey(
+        Faculty,
+        null=True,
+        on_delete=models.SET_NULL
+    )
+
     # OneToOneField is used to represent a one-to-one relationship
     # with the course of the previous academic year
     parent_course = models.OneToOneField(
diff --git a/backend/api/permissions/student_permissions.py b/backend/api/permissions/student_permissions.py
index ab1afd57..7dc1b9c9 100644
--- a/backend/api/permissions/student_permissions.py
+++ b/backend/api/permissions/student_permissions.py
@@ -1,4 +1,6 @@
 from rest_framework.permissions import IsAuthenticated, SAFE_METHODS
+
+from api.models.student import Student
 from api.permissions.role_permissions import is_teacher
 from authentication.models import User
 
@@ -7,9 +9,10 @@ class StudentPermission(IsAuthenticated):
 
     def has_permission(self, request, view):
         """Check if user has permission to view a general student endpoint."""
-        return view.action == 'retrieve'
+        return True
 
-    def has_object_permission(self, request, view, obj):
+    def has_object_permission(self, request, view, student: Student) -> bool:
         """Check if user has permission to view a detailed group endpoint"""
         user: User = request.user
-        return request.method in SAFE_METHODS and (user.id == request.user.id or is_teacher(user))
+
+        return request.method in SAFE_METHODS and (user.id == student.id or is_teacher(user))
diff --git a/backend/api/serializers/course_serializer.py b/backend/api/serializers/course_serializer.py
index 4d7cf067..38b4c281 100644
--- a/backend/api/serializers/course_serializer.py
+++ b/backend/api/serializers/course_serializer.py
@@ -3,6 +3,7 @@
 from rest_framework.exceptions import ValidationError
 from api.serializers.student_serializer import StudentIDSerializer
 from api.serializers.teacher_serializer import TeacherIDSerializer
+from api.serializers.faculty_serializer import FacultySerializer
 from api.models.course import Course
 
 
@@ -31,6 +32,10 @@ class CourseSerializer(serializers.ModelSerializer):
         many=False, read_only=True, view_name="course-detail"
     )
 
+    faculty = FacultySerializer(
+        read_only=True
+    )
+
     class Meta:
         model = Course
         fields = "__all__"
diff --git a/backend/api/serializers/faculty_serializer.py b/backend/api/serializers/faculty_serializer.py
index 57bb9bbf..eed3fde7 100644
--- a/backend/api/serializers/faculty_serializer.py
+++ b/backend/api/serializers/faculty_serializer.py
@@ -1,8 +1,14 @@
+from django.utils.translation import gettext_lazy as _
 from rest_framework import serializers
 from authentication.models import Faculty
 
 
-class facultySerializer(serializers.ModelSerializer):
+class FacultySerializer(serializers.ModelSerializer):
+    name = serializers.SerializerMethodField()
+
+    def get_name(self, data) -> str:
+        return _(data.name)
+
     class Meta:
         model = Faculty
         fields = "__all__"
diff --git a/backend/api/tests/test_admin.py b/backend/api/tests/test_admin.py
index 5de600b2..be96e132 100644
--- a/backend/api/tests/test_admin.py
+++ b/backend/api/tests/test_admin.py
@@ -8,7 +8,7 @@
 def create_faculty(name):
     """
     Create a Faculty with the given arguments."""
-    return Faculty.objects.create(name=name)
+    return Faculty.objects.create(id=name, name=name)
 
 
 def create_admin(id, first_name, last_name, email, faculty=None):
diff --git a/backend/api/tests/test_assistant.py b/backend/api/tests/test_assistant.py
index b59ab048..dd52a797 100644
--- a/backend/api/tests/test_assistant.py
+++ b/backend/api/tests/test_assistant.py
@@ -22,7 +22,7 @@ def create_course(name, academic_startyear, description=None, parent_course=None
 
 def create_faculty(name):
     """Create a Faculty with the given arguments."""
-    return Faculty.objects.create(name=name)
+    return Faculty.objects.create(id=name, name=name)
 
 
 def create_assistant(id, first_name, last_name, email, faculty=None, courses=None):
diff --git a/backend/api/tests/test_student.py b/backend/api/tests/test_student.py
index 1fced767..68bcbee9 100644
--- a/backend/api/tests/test_student.py
+++ b/backend/api/tests/test_student.py
@@ -21,7 +21,7 @@ def create_course(name, academic_startyear, description=None, parent_course=None
 
 def create_faculty(name):
     """Create a Faculty with the given arguments."""
-    return Faculty.objects.create(name=name)
+    return Faculty.objects.create(id=name, name=name)
 
 
 def create_student(id, first_name, last_name, email, faculty=None, courses=None):
diff --git a/backend/api/tests/test_teacher.py b/backend/api/tests/test_teacher.py
index ec58ec95..ee41e6a9 100644
--- a/backend/api/tests/test_teacher.py
+++ b/backend/api/tests/test_teacher.py
@@ -21,7 +21,7 @@ def create_course(name, academic_startyear, description=None, parent_course=None
 
 def create_faculty(name):
     """Create a Faculty with the given arguments."""
-    return Faculty.objects.create(name=name)
+    return Faculty.objects.create(id=name, name=name)
 
 
 def create_teacher(id, first_name, last_name, email, faculty=None, courses=None):
diff --git a/backend/api/views/course_view.py b/backend/api/views/course_view.py
index bc61a913..38537f39 100644
--- a/backend/api/views/course_view.py
+++ b/backend/api/views/course_view.py
@@ -18,6 +18,7 @@
     CourseSerializer, StudentJoinSerializer, StudentLeaveSerializer, CourseCloneSerializer,
     TeacherJoinSerializer, TeacherLeaveSerializer
 )
+from api.views.pagination.basic_pagination import BasicPagination
 from api.serializers.teacher_serializer import TeacherSerializer
 from api.serializers.assistant_serializer import AssistantSerializer, AssistantIDSerializer
 from api.serializers.student_serializer import StudentSerializer
@@ -46,6 +47,35 @@ def create(self, request: Request, *_):
             status=status.HTTP_201_CREATED
         )
 
+    @action(detail=False)
+    def search(self, request: Request) -> Response:
+        self.pagination_class = BasicPagination
+
+        # Extract filter params
+        search = request.query_params.get("search", "")
+        years = request.query_params.getlist("years[]")
+        faculties = request.query_params.getlist("faculties[]")
+
+        # Filter the queryset based on the search term
+        queryset = self.get_queryset().filter(
+            name__icontains=search
+        )
+
+        # Filter the queryset based on selected years
+        if years:
+            queryset = queryset.filter(academic_startyear__in=years)
+
+        # Filter the queryset based on selected faculties
+        if faculties:
+            queryset = queryset.filter(faculty__in=faculties)
+
+        # Serialize the resulting queryset
+        serializer = self.serializer_class(self.paginate_queryset(queryset), many=True, context={
+            "request": request
+        })
+
+        return self.get_paginated_response(serializer.data)
+
     @action(detail=True, permission_classes=[IsAdminUser | CourseAssistantPermission])
     def assistants(self, request: Request, **_):
         """Returns a list of assistants for the given course"""
diff --git a/backend/api/views/faculty_view.py b/backend/api/views/faculty_view.py
index fc8c71ca..eb5423ac 100644
--- a/backend/api/views/faculty_view.py
+++ b/backend/api/views/faculty_view.py
@@ -2,10 +2,10 @@
 from rest_framework.permissions import IsAdminUser
 from authentication.models import Faculty
 from api.permissions.faculty_permissions import FacultyPermission
-from ..serializers.faculty_serializer import facultySerializer
+from ..serializers.faculty_serializer import FacultySerializer
 
 
 class FacultyViewSet(viewsets.ModelViewSet):
     queryset = Faculty.objects.all()
-    serializer_class = facultySerializer
+    serializer_class = FacultySerializer
     permission_classes = [IsAdminUser | FacultyPermission]
diff --git a/backend/api/views/pagination/__init__.py b/backend/api/views/pagination/__init__.py
new file mode 100644
index 00000000..e69de29b
diff --git a/backend/api/views/pagination/basic_pagination.py b/backend/api/views/pagination/basic_pagination.py
new file mode 100644
index 00000000..101e55bf
--- /dev/null
+++ b/backend/api/views/pagination/basic_pagination.py
@@ -0,0 +1,8 @@
+from rest_framework.pagination import PageNumberPagination
+
+
+class BasicPagination(PageNumberPagination):
+    page_size = 20
+    max_page_size = 50
+    page_size_query_param = 'page_size'
+    page_query_param = 'page'
diff --git a/backend/authentication/fixtures/faculties.yaml b/backend/authentication/fixtures/faculties.yaml
index e13fd9e5..66b69d4c 100644
--- a/backend/authentication/fixtures/faculties.yaml
+++ b/backend/authentication/fixtures/faculties.yaml
@@ -1,33 +1,44 @@
 - model: authentication.faculty
   pk: Bio-ingenieurswetenschappen
-  fields: {}
+  fields:
+    name: "faculties.bioscience_engineering"
 - model: authentication.faculty
   pk: Diergeneeskunde
-  fields: {}
+  fields:
+    name: "faculties.veterinary_medicine"
 - model: authentication.faculty
   pk: Economie_Bedrijfskunde
-  fields: {}
+  fields:
+    name: "faculties.economics_business_administration"
 - model: authentication.faculty
   pk: Farmaceutische_Wetenschappen
-  fields: {}
+  fields:
+    name: "faculties.pharmaceutical_sciences"
 - model: authentication.faculty
   pk: Geneeskunde_Gezondheidswetenschappen
-  fields: {}
+  fields:
+    name: "faculties.medicine_health_sciences"
 - model: authentication.faculty
   pk: Ingenieurswetenschappen_Architectuur
-  fields: {}
+  fields:
+    name: "faculties.engineering_architecture"
 - model: authentication.faculty
   pk: Letteren_Wijsbegeerte
-  fields: {}
+  fields:
+    name: "faculties.arts_philosophy"
 - model: authentication.faculty
   pk: Politieke_Sociale_Wetenschappen
-  fields: {}
+  fields:
+    name: "faculties.political_social_sciences"
 - model: authentication.faculty
   pk: Psychologie_PedagogischeWetenschappen
-  fields: {}
+  fields:
+    name: "faculties.psychology_educational_sciences"
 - model: authentication.faculty
   pk: Recht_Criminologie
-  fields: {}
+  fields:
+    name: "faculties.law_criminology"
 - model: authentication.faculty
   pk: Wetenschappen
-  fields: {}
+  fields:
+    name: "faculties.sciences"
diff --git a/backend/authentication/locale/en/LC_MESSAGES/django.po b/backend/authentication/locale/en/LC_MESSAGES/django.po
new file mode 100644
index 00000000..9ee53ff5
--- /dev/null
+++ b/backend/authentication/locale/en/LC_MESSAGES/django.po
@@ -0,0 +1,32 @@
+msgid "faculties.bioscience_engineering"
+msgstr "Bioscience Engineering"
+
+msgid "faculties.veterinary_medicine"
+msgstr "Veterinary Medicine"
+
+msgid "faculties.economics_business_administration"
+msgstr "Economics and Business Administration"
+
+msgid "faculties.pharmaceutical_sciences"
+msgstr "Pharmaceutical Sciences"
+
+msgid "faculties.medicine_health_sciences"
+msgstr "Medicine and Health Sciences"
+
+msgid "faculties.engineering_architecture"
+msgstr "Engineering and Architecture"
+
+msgid "faculties.arts_philosophy"
+msgstr "Arts and Philosophy"
+
+msgid "faculties.political_social_sciences"
+msgstr "Political and Social Sciences"
+
+msgid "faculties.psychology_educational_sciences"
+msgstr "Psychology and Educational Sciences"
+
+msgid "faculties.law_criminology"
+msgstr "Law and Criminology"
+
+msgid "faculties.sciences"
+msgstr "Sciences"
\ No newline at end of file
diff --git a/backend/authentication/locale/nl/LC_MESSAGES/django.po b/backend/authentication/locale/nl/LC_MESSAGES/django.po
new file mode 100644
index 00000000..b3ec5337
--- /dev/null
+++ b/backend/authentication/locale/nl/LC_MESSAGES/django.po
@@ -0,0 +1,32 @@
+msgid "faculties.bioscience_engineering"
+msgstr "Bio-ingenieurswetenschappen"
+
+msgid "faculties.veterinary_medicine"
+msgstr "Diergeneeskunde"
+
+msgid "faculties.economics_business_administration"
+msgstr "Economie en Bedrijfskunde"
+
+msgid "faculties.pharmaceutical_sciences"
+msgstr "Farmaceutische Wetenschappen"
+
+msgid "faculties.medicine_health_sciences"
+msgstr "Geneeskunde en Gezondheidswetenschappen"
+
+msgid "faculties.engineering_architecture"
+msgstr "Ingenieurswetenschappen en Architectuur"
+
+msgid "faculties.arts_philosophy"
+msgstr "Letteren en Wijsbegeerte"
+
+msgid "faculties.political_social_sciences"
+msgstr "Politieke en Sociale Wetenschappen"
+
+msgid "faculties.psychology_educational_sciences"
+msgstr "Psychologie en Pedagogische Wetenschappen"
+
+msgid "faculties.law_criminology"
+msgstr "Recht en Criminologie"
+
+msgid "faculties.science"
+msgstr "Wetenschappen"
\ No newline at end of file
diff --git a/backend/authentication/migrations/0002_rename_name_faculty_id_faculty_description.py b/backend/authentication/migrations/0002_rename_name_faculty_id_faculty_description.py
new file mode 100644
index 00000000..3e22f1ad
--- /dev/null
+++ b/backend/authentication/migrations/0002_rename_name_faculty_id_faculty_description.py
@@ -0,0 +1,23 @@
+# Generated by Django 5.0.3 on 2024-04-03 10:31
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('authentication', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.RenameField(
+            model_name='faculty',
+            old_name='name',
+            new_name='id',
+        ),
+        migrations.AddField(
+            model_name='faculty',
+            name='description',
+            field=models.CharField(default='faculty', max_length=50),
+        ),
+    ]
diff --git a/backend/authentication/migrations/0003_rename_description_faculty_name.py b/backend/authentication/migrations/0003_rename_description_faculty_name.py
new file mode 100644
index 00000000..1ec0cc3e
--- /dev/null
+++ b/backend/authentication/migrations/0003_rename_description_faculty_name.py
@@ -0,0 +1,18 @@
+# Generated by Django 5.0.3 on 2024-04-03 10:32
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('authentication', '0002_rename_name_faculty_id_faculty_description'),
+    ]
+
+    operations = [
+        migrations.RenameField(
+            model_name='faculty',
+            old_name='description',
+            new_name='name',
+        ),
+    ]
diff --git a/backend/authentication/models.py b/backend/authentication/models.py
index 71eadc53..e7f3e7dd 100644
--- a/backend/authentication/models.py
+++ b/backend/authentication/models.py
@@ -72,4 +72,10 @@ class Faculty(models.Model):
     """This model represents a faculty."""
 
     """Model fields"""
-    name = CharField(max_length=50, primary_key=True)
+    id = CharField(max_length=50, primary_key=True)
+
+    name = CharField(
+        max_length=50,
+        default="faculty",
+        null=False
+    )
diff --git a/backend/authentication/views.py b/backend/authentication/views.py
index 9836e3e5..617cd58e 100644
--- a/backend/authentication/views.py
+++ b/backend/authentication/views.py
@@ -18,8 +18,13 @@ class CASViewSet(ViewSet):
     permission_classes = [IsAuthenticated]
 
     @action(detail=False, methods=['GET'], permission_classes=[AllowAny])
-    def login(self, _: Request) -> Response:
+    def login(self, request: Request) -> Response:
         """Attempt to log in. Redirect to our single CAS endpoint."""
+        should_echo = request.query_params.get('echo', False)
+
+        if should_echo == "1" and settings.DEBUG:
+            client._service_url = settings.CAS_DEBUG_RESPONSE
+
         return redirect(client.get_login_url())
 
     @action(detail=False, methods=['POST'])
diff --git a/backend/ypovoli/settings.py b/backend/ypovoli/settings.py
index ce904f80..27d287c9 100644
--- a/backend/ypovoli/settings.py
+++ b/backend/ypovoli/settings.py
@@ -91,6 +91,7 @@
 PORT = environ.get("DJANGO_CAS_PORT", "8080")
 CAS_ENDPOINT = "https://login.ugent.be"
 CAS_RESPONSE = f"https://{DOMAIN_NAME}:{PORT}/auth/verify"
+CAS_DEBUG_RESPONSE = f"https://{DOMAIN_NAME}:{PORT}/api/auth/cas/echo"
 API_ENDPOINT = f"https://{DOMAIN_NAME}/api"
 
 # Database
diff --git a/frontend/.prettierrc b/frontend/.prettierrc
index f9ca8c32..1d946086 100644
--- a/frontend/.prettierrc
+++ b/frontend/.prettierrc
@@ -1,12 +1,8 @@
 {
 	"tabWidth": 4,
-	"printWidth": 140,
-	"max_line_length": 140,
+	"printWidth": 120,
+	"max_line_length": 120,
 	"semi": true,
 	"singleQuote": true,
-	"arrowParens": "always",
-	"wrapParens": "avoid",
-	"endOfLine": "auto",
-	"jsxBracketSameLine": true,
-	"bracketSameLine": true
+	"endOfLine": "auto"
 }
\ No newline at end of file
diff --git a/frontend/src/assets/img/faculties/Bio-ingenieurswetenschappen.png b/frontend/src/assets/img/faculties/Bio-ingenieurswetenschappen.png
new file mode 100644
index 00000000..253b49c2
Binary files /dev/null and b/frontend/src/assets/img/faculties/Bio-ingenieurswetenschappen.png differ
diff --git a/frontend/src/assets/img/faculties/Diergeneeskunde.png b/frontend/src/assets/img/faculties/Diergeneeskunde.png
new file mode 100644
index 00000000..0c934b27
Binary files /dev/null and b/frontend/src/assets/img/faculties/Diergeneeskunde.png differ
diff --git a/frontend/src/assets/img/faculties/Economie_Bedrijfskunde.png b/frontend/src/assets/img/faculties/Economie_Bedrijfskunde.png
new file mode 100644
index 00000000..fce93c41
Binary files /dev/null and b/frontend/src/assets/img/faculties/Economie_Bedrijfskunde.png differ
diff --git a/frontend/src/assets/img/faculties/Farmaceutische_Wetenschappen.png b/frontend/src/assets/img/faculties/Farmaceutische_Wetenschappen.png
new file mode 100644
index 00000000..0caed9bb
Binary files /dev/null and b/frontend/src/assets/img/faculties/Farmaceutische_Wetenschappen.png differ
diff --git a/frontend/src/assets/img/faculties/Geneeskunde_Gezondheidswetenschappen.png b/frontend/src/assets/img/faculties/Geneeskunde_Gezondheidswetenschappen.png
new file mode 100644
index 00000000..59cc06d3
Binary files /dev/null and b/frontend/src/assets/img/faculties/Geneeskunde_Gezondheidswetenschappen.png differ
diff --git a/frontend/src/assets/img/faculties/Ingenieurswetenschappen_Architectuur.png b/frontend/src/assets/img/faculties/Ingenieurswetenschappen_Architectuur.png
new file mode 100644
index 00000000..9a970f9f
Binary files /dev/null and b/frontend/src/assets/img/faculties/Ingenieurswetenschappen_Architectuur.png differ
diff --git a/frontend/src/assets/img/faculties/Letteren_Wijsbegeerte.png b/frontend/src/assets/img/faculties/Letteren_Wijsbegeerte.png
new file mode 100644
index 00000000..0e47d40d
Binary files /dev/null and b/frontend/src/assets/img/faculties/Letteren_Wijsbegeerte.png differ
diff --git a/frontend/src/assets/img/faculties/Politieke_Sociale_Wetenschappen.png b/frontend/src/assets/img/faculties/Politieke_Sociale_Wetenschappen.png
new file mode 100644
index 00000000..adad8eb8
Binary files /dev/null and b/frontend/src/assets/img/faculties/Politieke_Sociale_Wetenschappen.png differ
diff --git a/frontend/src/assets/img/faculties/Recht_Criminologie.png b/frontend/src/assets/img/faculties/Recht_Criminologie.png
new file mode 100644
index 00000000..197b479a
Binary files /dev/null and b/frontend/src/assets/img/faculties/Recht_Criminologie.png differ
diff --git a/frontend/src/assets/img/faculties/Wetenschappen.png b/frontend/src/assets/img/faculties/Wetenschappen.png
new file mode 100644
index 00000000..10e77295
Binary files /dev/null and b/frontend/src/assets/img/faculties/Wetenschappen.png differ
diff --git a/frontend/src/assets/lang/nl.json b/frontend/src/assets/lang/nl.json
index f470c32c..31ec1044 100644
--- a/frontend/src/assets/lang/nl.json
+++ b/frontend/src/assets/lang/nl.json
@@ -21,8 +21,8 @@
         "dashboard": {
             "courses": "Mijn vakken",
             "projects": "Lopende projecten",
-            "no_projects": "Geen projecten beschikbaar voor dit academiejaar.",
-            "no_courses": "Geen vakken beschikbaar voor dit academiejaar."
+            "no_projects": "Geen projecten gevonden.",
+            "no_courses": "Geen vakken gevonden."
         },
         "login": {
             "title": "Inloggen",
@@ -46,7 +46,15 @@
           "create": "Creëer vak",
           "name": "Vaknaam",
           "description": "Beschrijving",
-          "year": "Academiejaar"
+          "year": "Academiejaar",
+          "search": {
+              "search": "Zoeken",
+              "faculty": "Faculteit",
+              "year": "Academiejaar",
+              "placeholder": "Zoek een vak op naam",
+              "title": "Zoek een vak",
+              "results": "{0} vakken gevonden voor ingestelde filters"
+          }
       }
     },
     "composables": {
@@ -83,7 +91,23 @@
     },
     "toasts": {
         "messages": {
-            "unknown": "Er is een onbekende fout opgetreden."
+            "success": "Succes",
+            "error": "Fout",
+            "unknown": "Er is een onbekende fout opgetreden.",
+            "courses": {
+                "enrollment": {
+                    "success": "Je bent succesvol ingeschreven voor het vak '{0}'.",
+                    "error": "Er is een fout opgetreden tijdens het inschrijven voor het vak '{0}'."
+                },
+                "leave": {
+                    "success": "Je bent succesvol uitgeschreven voor het vak '{0}'.",
+                    "error": "Er is een fout opgetreden tijdens het uitschrijven voor het vak '{0}'."
+                }
+            },
+            "login": {
+                "success": "Je bent succesvol ingelogd.",
+                "error": "Er is een fout opgetreden tijdens het inloggen."
+            }
         }
     },
     "primevue": {
diff --git a/frontend/src/assets/scss/theme/_variables.scss b/frontend/src/assets/scss/theme/_variables.scss
index 72fa60b3..70a12627 100644
--- a/frontend/src/assets/scss/theme/_variables.scss
+++ b/frontend/src/assets/scss/theme/_variables.scss
@@ -73,7 +73,7 @@ $inputTextFontSize:1rem !default;
 $inputBg:$shade000 !default;
 $inputTextColor:$shade700 !default;
 $inputIconColor:$shade600 !default;
-$inputBorder:1px solid $primaryColor !default;
+$inputBorder:1px solid $shade400 !default;
 $inputHoverBorderColor:$primaryColor !default;
 $inputFocusBorderColor:$primaryColor !default;
 $inputErrorBorderColor:$errorColor !default;
@@ -231,12 +231,12 @@ $checkboxWidth:22px !default;
 $checkboxHeight:22px !default;
 $checkboxBorder:2px solid $shade400 !default;
 $checkboxIconFontSize:14px !default;
-$checkboxActiveBorderColor:$primaryColor !default;
-$checkboxActiveBg:$primaryColor !default;
-$checkboxIconActiveColor:$primaryTextColor !default;
-$checkboxActiveHoverBg:$primaryDarkerColor !default;
-$checkboxIconActiveHoverColor:$primaryTextColor !default;
-$checkboxActiveHoverBorderColor:$primaryDarkerColor !default;
+$checkboxActiveBorderColor:$secondaryColor !default;
+$checkboxActiveBg:$secondaryColor !default;
+$checkboxIconActiveColor:$secondaryTextColor !default;
+$checkboxActiveHoverBg:$secondaryDarkColor !default;
+$checkboxIconActiveHoverColor:$secondaryTextColor !default;
+$checkboxActiveHoverBorderColor:$secondaryDarkColor !default;
 
 //radiobutton
 $radiobuttonWidth:22px !default;
@@ -356,15 +356,15 @@ $inputSwitchHandleOnBg:$shade000 !default;
 //panel
 $panelHeaderBorderColor:$shade300 !default;
 $panelHeaderBorder:1px solid $shade300 !default;
-$panelHeaderBg:$shade100 !default;
-$panelHeaderTextColor:$shade800 !default;
+$panelHeaderBg:$primaryLightColor !default;
+$panelHeaderTextColor:$primaryColor !default;
 $panelHeaderFontWeight:700 !default;
 $panelHeaderPadding:1.25rem !default;
 $panelToggleableHeaderPadding:.75rem 1.25rem !default;
 
-$panelHeaderHoverBg:$shade200 !default;
+$panelHeaderHoverBg:$primaryLightColor !default;
 $panelHeaderHoverBorderColor:$shade300 !default;
-$panelHeaderTextHoverColor:$shade800 !default;
+$panelHeaderTextHoverColor:$primaryColor !default;
 
 $panelContentBorderColor: $shade300 !default;
 $panelContentBorder:1px solid $shade300 !default;
@@ -382,21 +382,21 @@ $panelFooterPadding:0.75rem 1.25rem !default;
 $accordionSpacing:4px !default;
 $accordionHeaderBorder:$panelHeaderBorder !default;
 $accordionHeaderBg:$panelHeaderBg !default;
-$accordionHeaderTextColor:$shade600 !default;
+$accordionHeaderTextColor:$panelHeaderTextColor !default;
 $accordionHeaderFontWeight:$panelHeaderFontWeight !default;
 $accordionHeaderPadding:$panelHeaderPadding !default;
 
-$accordionHeaderHoverBg:$shade200 !default;
+$accordionHeaderHoverBg:$panelHeaderBg !default;
 $accordionHeaderHoverBorderColor:$shade300 !default;
-$accordionHeaderTextHoverColor:$shade800 !default;
+$accordionHeaderTextHoverColor:$panelHeaderTextColor !default;
 
 $accordionHeaderActiveBg:$panelHeaderBg !default;
 $accordionHeaderActiveBorderColor:$shade300 !default;
-$accordionHeaderTextActiveColor:$shade800 !default;
+$accordionHeaderTextActiveColor:$panelHeaderTextColor !default;
 
-$accordionHeaderActiveHoverBg:$shade200 !default;
+$accordionHeaderActiveHoverBg:$panelHeaderBg !default;
 $accordionHeaderActiveHoverBorderColor:$shade300 !default;
-$accordionHeaderTextActiveHoverColor:$shade800 !default;
+$accordionHeaderTextActiveHoverColor:$panelHeaderTextColor !default;
 
 $accordionContentBorder:$panelContentBorder !default;
 $accordionContentBg:$panelContentBg !default;
@@ -875,10 +875,10 @@ $imagePreviewActionIconBorderRadius:50% !default;
     --secondary-color:#{$secondaryColor};
     --secondary-color-text:#{$secondaryTextColor};
     --surface-0: #ffffff;
-    --surface-50: #{$primaryLightColor}50;
-    --surface-100: #{$primaryLightColor};
-    --surface-200: #e5e7eb;
-    --surface-300: #d1d5db;
+    --surface-50: #{$primaryLightColor}55;
+    --surface-100: #{$primaryLightColor}70;
+    --surface-200: #{$primaryLightColor}85;
+    --surface-300: #{$primaryLightColor};
     --surface-400: #{$primaryColor}25;
     --surface-500: #{$primaryColor}40;
     --surface-600: #{$primaryColor}55;
diff --git a/frontend/src/components/LanguageSelector.vue b/frontend/src/components/LanguageSelector.vue
index 4bb89a5f..e4deaf19 100644
--- a/frontend/src/components/LanguageSelector.vue
+++ b/frontend/src/components/LanguageSelector.vue
@@ -50,7 +50,8 @@ 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" />
diff --git a/frontend/src/components/YearSelector.vue b/frontend/src/components/YearSelector.vue
index 07b42538..157c9bbf 100644
--- a/frontend/src/components/YearSelector.vue
+++ b/frontend/src/components/YearSelector.vue
@@ -24,7 +24,9 @@ const year = defineModel();
 <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>
+            <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" />
diff --git a/frontend/src/components/courses/CourseCard.vue b/frontend/src/components/courses/CourseDetailCard.vue
similarity index 83%
rename from frontend/src/components/courses/CourseCard.vue
rename to frontend/src/components/courses/CourseDetailCard.vue
index b3b3a38b..e5c87cb3 100644
--- a/frontend/src/components/courses/CourseCard.vue
+++ b/frontend/src/components/courses/CourseDetailCard.vue
@@ -27,17 +27,18 @@ const images = Object.keys(
             <img
                 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]" />
+                :alt="course.name ?? ''"
+                :src="images[Math.ceil(Math.random() * images.length) % images.length]"
+            />
         </template>
         <template #title>
-            <h2 class="text-primary m-0 text-2xl">{{ course.name }}</h2>
+            <h2 class="text-primary m-0 text-xl">{{ course.name }}</h2>
         </template>
         <template #subtitle>
             <span class="text-sm">{{ course.getCourseYear() }}</span>
         </template>
         <template #content>
-            {{ course.description }}
+            {{ course.getExcerpt() }}
         </template>
         <template #footer>
             <RouterLink :to="{ name: 'course', params: { courseId: course.id } }">
diff --git a/frontend/src/components/courses/CourseGeneralCard.vue b/frontend/src/components/courses/CourseGeneralCard.vue
new file mode 100644
index 00000000..a29ccfce
--- /dev/null
+++ b/frontend/src/components/courses/CourseGeneralCard.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import StudentCourseJoinButton from '@/components/courses/students/StudentCourseJoinButton.vue';
+import type { Course } from '@/types/Course.ts';
+import { type Faculty } from '@/types/Faculty.ts';
+import { useAuthStore } from '@/store/authentication.store.ts';
+import { storeToRefs } from 'pinia';
+
+/* Props */
+defineProps<{
+    course: Course;
+}>();
+
+/* Composable injections */
+const { user, student } = storeToRefs(useAuthStore());
+
+/* State */
+const images = Object.keys(
+    import.meta.glob('@/assets/img/faculties/*', {
+        eager: true,
+    }),
+);
+
+/**
+ * Get the faculty icon based on the faculty id.
+ * @param faculty
+ */
+function getFacultyIcon(faculty: Faculty): string {
+    return images.find((image) => image.includes(faculty.id)) ?? '';
+}
+</script>
+
+<template>
+    <div class="surface-300 pl-7 p-4 relative">
+        <img
+            :src="getFacultyIcon(course.faculty)"
+            :alt="course.faculty.name"
+            class="absolute top-0 left-0 w-3rem"
+            v-if="course.faculty !== null"
+        />
+        <div class="h-full flex flex-column justify-content-between">
+            <div>
+                <div class="text-primary font-semibold text-lg">
+                    {{ course.name }}
+                </div>
+                <div class="text-sm text-black-alpha-80">
+                    {{ course.getCourseYear() }}
+                </div>
+            </div>
+            <div v-if="user && user.isStudent()">
+                <StudentCourseJoinButton :student="student" :course="course" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/frontend/src/components/courses/CourseList.vue b/frontend/src/components/courses/CourseList.vue
index 6ef22e88..5cc39c62 100644
--- a/frontend/src/components/courses/CourseList.vue
+++ b/frontend/src/components/courses/CourseList.vue
@@ -1,11 +1,21 @@
 <script setup lang="ts">
-import { type Course } from '@/types/Course.ts';
-import CourseCard from '@/components/courses/CourseCard.vue';
 import Skeleton from 'primevue/skeleton';
+import CourseDetailCard from '@/components/courses/CourseDetailCard.vue';
+import CourseGeneralCard from '@/components/courses/CourseGeneralCard.vue';
+import { type Course } from '@/types/Course.ts';
 import { useI18n } from 'vue-i18n';
 
 /* Props */
-defineProps<{ courses: Course[] | null }>();
+interface Props {
+    detail?: boolean;
+    courses: Course[] | null;
+    cols?: number;
+}
+
+withDefaults(defineProps<Props>(), {
+    cols: 4,
+    detail: true,
+});
 
 /* Composable injections */
 const { t } = useI18n();
@@ -15,19 +25,25 @@ const { t } = useI18n();
     <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
+                    class="col-12 md:col-6 lg:col-4"
+                    :class="'xl:col-' + 12 / cols"
+                    v-for="course in courses"
+                    :key="course.id"
+                >
+                    <CourseDetailCard :course="course" v-if="detail" />
+                    <CourseGeneralCard class="h-full" :course="course" v-else />
                 </div>
             </template>
             <template v-else>
                 <div class="col-12">
-                    <p>{{ t('views.dashboard.no_courses') }}</p>
+                    <p class="mt-0">{{ 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 class="col-12 md:col-6 lg:col-4" :class="'xl:col-' + 12 / cols" v-for="index in cols" :key="index">
+                <Skeleton :height="detail ? '25rem' : '10rem'" />
             </div>
         </template>
     </div>
diff --git a/frontend/src/components/courses/students/StudentCourseJoinButton.vue b/frontend/src/components/courses/students/StudentCourseJoinButton.vue
new file mode 100644
index 00000000..458379b0
--- /dev/null
+++ b/frontend/src/components/courses/students/StudentCourseJoinButton.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import Button from 'primevue/button';
+import { type Course } from '@/types/Course.ts';
+import { type Student } from '@/types/users/Student.ts';
+import { useAuthStore } from '@/store/authentication.store.ts';
+import { useMessagesStore } from '@/store/messages.store.ts';
+import { useStudents } from '@/composables/services/students.service.ts';
+import { useI18n } from 'vue-i18n';
+
+/* Props */
+const props = defineProps<{ student: Student; course: Course }>();
+
+/* Composable injections */
+const { refreshUser } = useAuthStore();
+const { addSuccessMessage, addErrorMessage } = useMessagesStore();
+const { studentJoinCourse, studentLeaveCourse } = useStudents();
+const { t } = useI18n();
+
+/**
+ * Enroll the student in the course.
+ */
+async function joinCourse(): Promise<void> {
+    try {
+        await studentJoinCourse(props.course.id, props.student.id);
+
+        addSuccessMessage(
+            t('toasts.messages.success'),
+            t('toasts.messages.courses.enrollment.success', [props.course.name]),
+        );
+
+        await refreshUser();
+    } catch (error) {
+        addErrorMessage(t('toasts.messages.error'), t('toasts.messages.courses.enrollment.error', [props.course.name]));
+    }
+}
+
+/**
+ * Leave the course.
+ */
+async function leaveCourse(): Promise<void> {
+    try {
+        await studentLeaveCourse(props.course.id, props.student.id);
+
+        addSuccessMessage(
+            t('toasts.messages.success'),
+            t('toasts.messages.courses.leave.success', [props.course.name]),
+        );
+
+        await refreshUser();
+    } catch (error) {
+        addErrorMessage(t('toasts.messages.error'), t('toasts.messages.courses.leave.error', [props.course.name]));
+    }
+}
+</script>
+
+<template>
+    <Button
+        class="text-sm p-0"
+        label="Inschrijven"
+        icon-pos="right"
+        icon="pi pi-arrow-right"
+        @click="joinCourse"
+        v-if="!student.hasCourse(course)"
+        link
+    />
+    <Button
+        class="text-sm p-0"
+        label="Uitschrijven"
+        icon-pos="right"
+        icon="pi pi-arrow-right"
+        @click="leaveCourse"
+        v-else
+        link
+    />
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/frontend/src/components/layout/Body.vue b/frontend/src/components/layout/Body.vue
index 68755176..7b13ed8a 100644
--- a/frontend/src/components/layout/Body.vue
+++ b/frontend/src/components/layout/Body.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts"></script>
 
 <template>
-    <div class="pt-6 pb-7 px-3 lg:px-0 fadein animation-duration-300">
+    <div class="pt-6 pb-7 px-3 lg:px-0 fadein">
         <slot />
     </div>
 </template>
diff --git a/frontend/src/components/layout/Header.vue b/frontend/src/components/layout/Header.vue
index 738b8c6a..72615863 100644
--- a/frontend/src/components/layout/Header.vue
+++ b/frontend/src/components/layout/Header.vue
@@ -62,12 +62,19 @@ const items = computed(() => [
                     <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>
@@ -78,7 +85,8 @@ const items = computed(() => [
                 <template v-if="isAuthenticated">
                     <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/projects/ProjectCard.vue b/frontend/src/components/projects/ProjectCard.vue
index bc0ef609..628b329b 100644
--- a/frontend/src/components/projects/ProjectCard.vue
+++ b/frontend/src/components/projects/ProjectCard.vue
@@ -30,7 +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-xl"><span class="pi pi-book text-xl mr-2" /> {{ course.name }}</h2>
         </template>
         <template #subtitle>
             {{ project.name }}
@@ -53,7 +53,8 @@ const { t } = useI18n();
                         courseId: course.id,
                         projectId: project.id,
                     },
-                }">
+                }"
+            >
                 <Button :icon="PrimeIcons.ARROW_RIGHT" :label="t('components.card.open')" icon-pos="right" outlined />
             </RouterLink>
         </template>
diff --git a/frontend/src/components/projects/ProjectList.vue b/frontend/src/components/projects/ProjectList.vue
index a04bba61..03fcc07a 100644
--- a/frontend/src/components/projects/ProjectList.vue
+++ b/frontend/src/components/projects/ProjectList.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { type Course } from '@/types/Course.ts';
-import { watch } from 'vue';
+import { computed, watch } from 'vue';
 import { useProject } from '@/composables/services/project.service.ts';
 import ProjectCard from '@/components/projects/ProjectCard.vue';
 import { useI18n } from 'vue-i18n';
@@ -19,6 +19,9 @@ const props = withDefaults(
 const { t } = useI18n();
 const { projects, getProjectsByCourse } = useProject();
 
+/* State */
+const allProjects = computed(() => props.courses.flatMap((course) => course.projects));
+
 watch(
     () => props.courses,
     async (courses: Course[]) => {
@@ -42,13 +45,10 @@ watch(
 </script>
 
 <template>
-    <template v-if="courses.length > 0">
+    <template v-if="allProjects.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" v-if="project.course" />
+            <div class="col-12 md:col-6 lg:col-4 xl:col-3" v-for="project in allProjects" :key="project.id">
+                <ProjectCard class="h-100" :project="project" :course="project.course" />
             </div>
         </div>
     </template>
diff --git a/frontend/src/composables/configuration.ts b/frontend/src/composables/configuration.ts
deleted file mode 100644
index ef7976b6..00000000
--- a/frontend/src/composables/configuration.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { type Ref, ref } from 'vue';
-import { endpoints } from '../config/endpoints.ts';
-import { environment } from '../config/environment.ts';
-
-interface Config {
-    environment: any;
-    endpoints: any;
-}
-
-export function useConfig(): { config: Ref<Config> } {
-    const config = ref<Config>({
-        environment,
-        endpoints,
-    });
-
-    return { config };
-}
diff --git a/frontend/src/composables/filters/filter.ts b/frontend/src/composables/filters/filter.ts
new file mode 100644
index 00000000..92ef191e
--- /dev/null
+++ b/frontend/src/composables/filters/filter.ts
@@ -0,0 +1,15 @@
+import { type Ref, ref } from 'vue';
+import { type Filter } from '@/types/filter/Filter.ts';
+
+export interface FilterState {
+    filter: Ref<Filter>;
+}
+
+export function useFilter(initial: Filter): FilterState {
+    /* State */
+    const filter = ref<Filter>(initial);
+
+    return {
+        filter,
+    };
+}
diff --git a/frontend/src/composables/filters/paginator.ts b/frontend/src/composables/filters/paginator.ts
new file mode 100644
index 00000000..c2209677
--- /dev/null
+++ b/frontend/src/composables/filters/paginator.ts
@@ -0,0 +1,63 @@
+import { computed, type Ref, ref, watch } from 'vue';
+import { type LocationQuery, useRoute, useRouter } from 'vue-router';
+
+export interface PaginatorState {
+    page: Ref<number>;
+    pageSize: Ref<number>;
+    first: Ref<number>;
+    paginate: (newFirst: number) => Promise<void>;
+}
+
+export function usePaginator(initialPage: number = 1, initialPageSize: number = 20): PaginatorState {
+    /* Composables */
+    const { query } = useRoute();
+    const { push } = useRouter();
+
+    /* State */
+    const page = ref<number>(initialPage);
+    const pageSize = ref<number>(initialPageSize);
+
+    /* Watchers */
+    watch(
+        () => query,
+        (query: LocationQuery) => {
+            if (query.page !== undefined) {
+                page.value = parseInt(query.page as string);
+            }
+
+            if (query.pageSize !== undefined) {
+                pageSize.value = parseInt(query.pageSize as string);
+            }
+        },
+        { immediate: true },
+    );
+
+    /* Computed */
+    const first = computed({
+        get: () => (page.value - 1) * pageSize.value,
+        set: (value: number) => (page.value = Math.floor(value / pageSize.value) + 1),
+    });
+
+    /**
+     * Paginate using a new first item index.
+     *
+     * @param newFirst
+     */
+    async function paginate(newFirst: number): Promise<void> {
+        first.value = newFirst;
+
+        await push({
+            query: {
+                page: page.value,
+                pageSize: pageSize.value,
+            },
+        });
+    }
+
+    return {
+        page,
+        pageSize,
+        first,
+        paginate,
+    };
+}
diff --git a/frontend/src/composables/services/courses.service.ts b/frontend/src/composables/services/courses.service.ts
index df558a24..2cfe0620 100644
--- a/frontend/src/composables/services/courses.service.ts
+++ b/frontend/src/composables/services/courses.service.ts
@@ -1,13 +1,17 @@
 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 { get, getList, create, deleteId, getPaginatedList } from '@/composables/services/helpers.ts';
+import { type PaginatorResponse } from '@/types/filter/Paginator.ts';
+import { type Filter } from '@/types/filter/Filter.ts';
 
 interface CoursesState {
+    pagination: Ref<PaginatorResponse<Course> | null>;
     courses: Ref<Course[] | null>;
     course: Ref<Course | null>;
     getCourseByID: (id: string) => Promise<void>;
     getCourses: () => Promise<void>;
+    searchCourses: (filters: Filter, page: number, pageSize: number) => Promise<void>;
     getCoursesByStudent: (studentId: string) => Promise<void>;
     getCoursesByTeacher: (teacherId: string) => Promise<void>;
     getCourseByAssistant: (assistantId: string) => Promise<void>;
@@ -17,6 +21,7 @@ interface CoursesState {
 }
 
 export function useCourses(): CoursesState {
+    const pagination = ref<PaginatorResponse<Course> | null>(null);
     const courses = ref<Course[] | null>(null);
     const course = ref<Course | null>(null);
 
@@ -30,6 +35,11 @@ export function useCourses(): CoursesState {
         await getList<Course>(endpoint, courses, Course.fromJSON);
     }
 
+    async function searchCourses(filters: Filter, page: number, pageSize: number): Promise<void> {
+        const endpoint = endpoints.courses.search;
+        await getPaginatedList<Course>(endpoint, filters, page, pageSize, pagination, Course.fromJSON);
+    }
+
     async function getCoursesByStudent(studentId: string): Promise<void> {
         const endpoint = endpoints.courses.byStudent.replace('{studentId}', studentId);
         await getList<Course>(endpoint, courses, Course.fromJSON);
@@ -70,10 +80,12 @@ export function useCourses(): CoursesState {
     }
 
     return {
+        pagination,
         courses,
         course,
 
         getCourseByID,
+        searchCourses,
         getCourses,
         getCoursesByStudent,
         getCoursesByTeacher,
diff --git a/frontend/src/composables/services/faculties.service.ts b/frontend/src/composables/services/faculties.service.ts
index 747be4a8..9b298378 100644
--- a/frontend/src/composables/services/faculties.service.ts
+++ b/frontend/src/composables/services/faculties.service.ts
@@ -7,7 +7,7 @@ interface FacultyState {
     faculties: Ref<Faculty[] | null>;
     faculty: Ref<Faculty | null>;
     getFacultyByID: (name: string) => Promise<void>;
-    getFacultys: () => Promise<void>;
+    getFaculties: () => Promise<void>;
     createFaculty: (facultyData: Faculty) => Promise<void>;
     deleteFaculty: (id: string) => Promise<void>;
 }
@@ -21,7 +21,7 @@ export function useFaculty(): FacultyState {
         await get<Faculty>(endpoint, faculty, Faculty.fromJSON);
     }
 
-    async function getFacultys(): Promise<void> {
+    async function getFaculties(): Promise<void> {
         const endpoint = endpoints.faculties.index;
         await getList<Faculty>(endpoint, faculties, Faculty.fromJSON);
     }
@@ -40,7 +40,7 @@ export function useFaculty(): FacultyState {
         faculties,
         faculty,
         getFacultyByID,
-        getFacultys,
+        getFaculties,
 
         createFaculty,
         deleteFaculty,
diff --git a/frontend/src/composables/services/helpers.ts b/frontend/src/composables/services/helpers.ts
index d4477eb2..26e40da2 100644
--- a/frontend/src/composables/services/helpers.ts
+++ b/frontend/src/composables/services/helpers.ts
@@ -1,137 +1,232 @@
-import { type AxiosError, type AxiosResponse } from 'axios';
-import { client } from '@/composables/axios.ts';
+import { type AxiosError } from 'axios';
+import { client } from '@/config/axios.ts';
 import { type Ref } from 'vue';
 import { useMessagesStore } from '@/store/messages.store.ts';
-import { i18n } from '../i18n';
-
-const lifeTime = 3000;
+import { i18n } from '@/config/i18n.ts';
+import { type PaginatorResponse } from '@/types/filter/Paginator.ts';
+import { type Filter } from '@/types/filter/Filter.ts';
 
+/**
+ * Get an item given its ID.
+ *
+ * @param endpoint
+ * @param ref
+ * @param fromJson
+ */
 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);
-        })
-        .catch((error: AxiosError) => {
-            processError(error);
-            console.error(error); // Log the error for debugging
-        });
+    try {
+        const response = await client.get(endpoint);
+        ref.value = fromJson(response.data);
+    } catch (error: any) {
+        processError(error);
+        console.error(error); // Log the error for debugging
+        throw error; // Re-throw the error to the caller
+    }
 }
 
-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);
-        })
-        .catch((error: AxiosError) => {
-            processError(error);
-            console.error(error); // Log the error for debugging
-        });
+/**
+ * Create an item.
+ *
+ * @param endpoint
+ * @param data
+ * @param ref
+ * @param fromJson
+ */
+export async function create<T>(
+    endpoint: string,
+    data: any,
+    ref: Ref<T | null>,
+    fromJson: (data: any) => T,
+): Promise<void> {
+    try {
+        const response = await client.post(endpoint, data);
+        ref.value = fromJson(response.data);
+    } catch (error: any) {
+        processError(error);
+        console.error(error); // Log the error for debugging
+        throw error; // Re-throw the error to the caller
+    }
 }
 
+/**
+ * Delete an item given its ID.
+ *
+ * @param endpoint
+ * @param ref
+ * @param fromJson
+ */
 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);
-            // add({severity: "success", summary: "Success Message", detail: "Order submitted", life: lifeTime});
-        })
-        .catch((error: AxiosError) => {
-            processError(error);
-            console.error(error); // Log the error for debugging
-        });
+    try {
+        const response = await client.delete(endpoint);
+        ref.value = fromJson(response.data);
+    } catch (error: any) {
+        processError(error);
+        console.error(error); // Log the error for debugging
+        throw error; // Re-throw the error to the caller
+    }
 }
 
-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);
-            // add({severity: "success", summary: "Success Message", detail: "Order submitted", life: lifeTime});
-        })
-        .catch((error: AxiosError) => {
-            processError(error);
-            console.error(error); // Log the error for debugging
-        });
+/**
+ * Delete an item.
+ *
+ * @param endpoint
+ * @param data
+ * @param ref
+ * @param fromJson
+ */
+export async function deleteIdWithData<T>(
+    endpoint: string,
+    data: any,
+    ref: Ref<T | null>,
+    fromJson: (data: any) => T,
+): Promise<void> {
+    try {
+        const response = await client.delete(endpoint, { data });
+        ref.value = fromJson(response.data);
+    } catch (error: any) {
+        processError(error);
+        console.error(error); // Log the error for debugging
+        throw error; // Re-throw the error to the caller
+    }
 }
 
+/**
+ * Get a list of items.
+ *
+ * @param endpoint
+ * @param ref
+ * @param fromJson
+ */
 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));
-            // add({severity: "success", summary: "Success Message", detail: "Order submitted", life: lifeTime});
-        })
-        .catch((error: AxiosError) => {
-            processError(error);
-            console.error(error); // Log the error for debugging
+    try {
+        const response = await client.get(endpoint);
+        ref.value = response.data.map((data: T) => fromJson(data));
+    } catch (error: any) {
+        processError(error);
+        console.error(error); // Log the error for debugging
+        ref.value = []; // Set the ref to an empty array
+        throw error; // Re-throw the error to the caller
+    }
+}
+
+/**
+ * Get a paginated list of items.
+ *
+ * @param endpoint
+ * @param filters
+ * @param page
+ * @param pageSize
+ * @param pagination
+ * @param fromJson
+ */
+export async function getPaginatedList<T>(
+    endpoint: string,
+    filters: Filter,
+    page: number,
+    pageSize: number,
+    pagination: Ref<PaginatorResponse<T> | null>,
+    fromJson: (data: any) => T,
+): Promise<void> {
+    try {
+        const response = await client.get(endpoint, {
+            params: {
+                ...filters,
+                page,
+                page_size: pageSize,
+            },
         });
+
+        pagination.value = {
+            ...response.data,
+            results: response.data.results.map((data: T) => fromJson(data)),
+        };
+    } catch (error: any) {
+        processError(error);
+        console.error(error); // Log the error for debugging
+
+        pagination.value = {
+            // Set the ref to an empty array
+            ...error.data,
+            count: 0,
+            results: [],
+        };
+
+        throw error; // Re-throw the error to the caller
+    }
 }
 
-export async function getListMerged<T>(endpoints: string[], ref: Ref<T[] | null>, fromJson: (data: any) => T): Promise<void> {
+/**
+ * Get a list of items from multiple endpoints and merge them into a single list.
+ *
+ * @param endpoints
+ * @param ref
+ * @param fromJson
+ */
+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[] = [];
 
     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
-                // add({severity: "success", summary: "Success Message", detail: "Order submitted", life: lifeTime});
-            })
-            .catch((error: AxiosError) => {
-                processError(error);
-                console.error(error); // Log the error for debugging
-            });
+        try {
+            const response = await client.get(endpoint);
+            const responseData: T[] = response.data.map((data: T) => fromJson(data));
+            allData.push(...responseData); // Merge into the allData array
+        } catch (error: any) {
+            processError(error);
+            console.error(error); // Log the error for debugging
+            ref.value = []; // Set the ref to an empty array
+            throw error; // Re-throw the error to the caller
+        }
     }
+
     ref.value = allData;
 }
 
-export function processError(error: AxiosError): void {
+/**
+ * Process an error and display a message to the user.
+ *
+ * @param error
+ */
+export function processError(error: any): void {
     const { t } = i18n.global;
-    const { add } = useMessagesStore();
+    const { addErrorMessage } = useMessagesStore();
+
+    // Cast the error to an AxiosError
+    error = error as AxiosError;
 
     if (error.response !== undefined && error.response !== null) {
         // The request was made and the server responded with a status code
-        if (error.response.status === 404) {
-            add({
-                severity: 'error',
-                summary: t('composables.helpers.errors.notFound'),
-                detail: t('composables.helpers.errors.notFoundDetail'),
-                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,
-            });
+        const status = error.response.status;
+
+        if (status === 404) {
+            addErrorMessage(t('composables.helpers.errors.notFound'), t('composables.helpers.errors.notFoundDetail'));
+        } else if (error.response.status === 401 || error.response.status === 403) {
+            addErrorMessage(
+                t('composables.helpers.errors.unauthorized'),
+                t('composables.helpers.errors.unauthorizedDetail'),
+            );
         } else {
-            add({
-                severity: 'error',
-                summary: t('composables.helpers.errors.server'),
-                detail: t('composables.helpers.errors.serverDetail'),
-                life: lifeTime,
-            });
+            const response = error.response.data;
+
+            for (const key in response) {
+                let message: string = response[key];
+
+                if (Array.isArray(response[key])) {
+                    message = response[key].join(', ');
+                }
+
+                addErrorMessage(t('composables.helpers.errors.server'), message);
+            }
         }
     } else if (error.request !== undefined && error.request !== null) {
         // The request was made but no response was received
-        add({
-            severity: 'error',
-            summary: t('composables.helpers.errors.network'),
-            detail: t('composables.helpers.errors.networkDetail'),
-            life: lifeTime,
-        });
+        addErrorMessage(t('composables.helpers.errors.network'), t('composables.helpers.errors.networkDetail'));
     } 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,
-        });
+        addErrorMessage(t('composables.helpers.errors.request'), t('composables.helpers.errors.requestDetail'));
     }
 }
diff --git a/frontend/src/composables/services/students.service.ts b/frontend/src/composables/services/students.service.ts
index c3977095..d1931a07 100644
--- a/frontend/src/composables/services/students.service.ts
+++ b/frontend/src/composables/services/students.service.ts
@@ -56,26 +56,27 @@ export function useStudents(): StudentsState {
 
     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);
+        await create<Response>(endpoint, { student_id: 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);
+        await deleteIdWithData<Response>(endpoint, { student_id: 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);
+        await create<Response>(endpoint, { student_id: 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);
+        await deleteIdWithData<Response>(endpoint, { student_id: studentId }, response, Response.fromJSON);
     }
 
     async function createStudent(studentData: Student): Promise<void> {
         const endpoint = endpoints.students.index;
+
         await create<Student>(
             endpoint,
             {
diff --git a/frontend/src/composables/axios.ts b/frontend/src/config/axios.ts
similarity index 92%
rename from frontend/src/composables/axios.ts
rename to frontend/src/config/axios.ts
index b5cbe90f..554cb61f 100644
--- a/frontend/src/composables/axios.ts
+++ b/frontend/src/config/axios.ts
@@ -1,6 +1,6 @@
 import axios from 'axios';
 import Cookie from 'js-cookie';
-import { i18n } from '@/composables/i18n';
+import { i18n } from '@/config/i18n.ts';
 
 const { locale } = i18n.global;
 
diff --git a/frontend/src/config/endpoints.ts b/frontend/src/config/endpoints.ts
index 9d73f4e7..29d1df7f 100644
--- a/frontend/src/config/endpoints.ts
+++ b/frontend/src/config/endpoints.ts
@@ -11,6 +11,7 @@ export const endpoints = {
     },
     courses: {
         index: '/api/courses/',
+        search: '/api/courses/search/',
         retrieve: '/api/courses/{id}/',
         byStudent: '/api/students/{studentId}/courses/',
         byTeacher: '/api/teachers/{teacherId}/courses/',
diff --git a/frontend/src/composables/i18n.ts b/frontend/src/config/i18n.ts
similarity index 100%
rename from frontend/src/composables/i18n.ts
rename to frontend/src/config/i18n.ts
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 2bdc5b4a..0eae269f 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -3,7 +3,7 @@ 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 { i18n } from '@/config/i18n.ts';
 import { createApp } from 'vue';
 import { createPinia } from 'pinia';
 
diff --git a/frontend/src/router/guards/authentication.guard.ts b/frontend/src/router/guards/authentication.guard.ts
index a7c2faae..068a50ad 100644
--- a/frontend/src/router/guards/authentication.guard.ts
+++ b/frontend/src/router/guards/authentication.guard.ts
@@ -3,14 +3,14 @@ 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 { refreshUser } = useAuthStore();
     const { intent } = storeToRefs(useAuthStore());
 
     const { isAuthenticated } = storeToRefs(useAuthStore());
 
     if (!['login', 'verify'].includes(to.name as string)) {
         if (!isAuthenticated.value) {
-            await refresh();
+            await refreshUser();
 
             if (!isAuthenticated.value) {
                 intent.value = to.fullPath;
diff --git a/frontend/src/router/guards/logout.guard.ts b/frontend/src/router/guards/logout.guard.ts
index 158faf3c..5840b33f 100644
--- a/frontend/src/router/guards/logout.guard.ts
+++ b/frontend/src/router/guards/logout.guard.ts
@@ -1,7 +1,11 @@
 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> {
+export async function LogoutGuard(
+    _1: RouteLocationNormalized,
+    _2: RouteLocationNormalized,
+    next: NavigationGuardNext,
+): Promise<void> {
     await useAuthStore().logout();
 
     next({ name: 'login' });
diff --git a/frontend/src/router/router.ts b/frontend/src/router/router.ts
index 560085cc..d0d87a26 100644
--- a/frontend/src/router/router.ts
+++ b/frontend/src/router/router.ts
@@ -12,6 +12,7 @@ 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 SearchCourseView from '@/views/courses/SearchCourseView.vue';
 
 const routes: RouteRecordRaw[] = [
     // Authentication
@@ -34,7 +35,7 @@ const routes: RouteRecordRaw[] = [
     {
         path: '/courses',
         children: [
-            { path: '', component: Dummy, name: 'courses' },
+            { path: '', component: SearchCourseView, name: 'courses' },
             {
                 path: 'create',
                 component: CreateCourseView,
diff --git a/frontend/src/store/authentication.store.ts b/frontend/src/store/authentication.store.ts
index ab2b2751..e6bf4ef3 100644
--- a/frontend/src/store/authentication.store.ts
+++ b/frontend/src/store/authentication.store.ts
@@ -3,7 +3,7 @@ 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 { client } from '@/config/axios.ts';
 import { useLocalStorage } from '@vueuse/core';
 import { computed, ref, watch } from 'vue';
 import { useAssistant } from '@/composables/services/assistant.service';
@@ -12,6 +12,7 @@ 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';
+import { useI18n } from 'vue-i18n';
 
 export const useAuthStore = defineStore('auth', () => {
     /* Stores */
@@ -31,7 +32,6 @@ export const useAuthStore = defineStore('auth', () => {
 
     /**
      * Initialize the user object depending on the role.
-     *
      */
     async function initUser(): Promise<void> {
         if (user.value !== null) {
@@ -69,6 +69,32 @@ export const useAuthStore = defineStore('auth', () => {
         }
     }
 
+    /**
+     * Refresh the user objects in the API endpoint.
+     */
+    async function refreshUser(): Promise<void> {
+        // Display toast messages.
+        const { addErrorMessage } = useMessagesStore();
+
+        // Get the user information (using a cookie).
+        try {
+            // Get the user information when it is not set.
+            if (user.value === null) {
+                const response = await axios.get(endpoints.auth.whoami);
+                user.value = User.fromJSON(response.data as User);
+            }
+
+            if (view.value === null) {
+                view.value = user.value.roles[0];
+            }
+
+            // Get the role information.
+            await initUser();
+        } catch (error: any) {
+            addErrorMessage(error.response.statusText as string, error.response.data.detail as string);
+        }
+    }
+
     /**
      * Attempt to log in the user using a CAS ticket.
      *
@@ -76,63 +102,26 @@ export const useAuthStore = defineStore('auth', () => {
      */
     async function login(ticket: string): Promise<void> {
         // Display toast messages.
-        const { add } = useMessagesStore();
+        const { t } = useI18n();
+        const { addSuccessMessage, addErrorMessage } = useMessagesStore();
 
         // Attempt to log in the user using the ticket.
-        await axios
-            .post(endpoints.auth.token.obtain, {
+        try {
+            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 function refresh(): Promise<void> {
-        // Display toast messages.
-        const { add } = useMessagesStore();
 
-        // Get the user information (using a cookie).
-        await axios
-            .get(endpoints.auth.whoami)
-            .then(async (response) => {
-                user.value = User.fromJSON(response.data as User);
-
-                if (view.value === null) {
-                    view.value = user.value.roles[0];
-                }
-
-                // Init the user depending on the role selected.
-                await initUser();
-            })
-            .catch((error) => {
-                add({
-                    severity: 'error',
-                    summary: error.response.statusText,
-                    detail: error.response.data.detail,
-                });
-            });
+            addSuccessMessage(t('toasts.messages.success'), t('toasts.messages.login.success'));
+        } catch (error: any) {
+            addErrorMessage(t('toasts.messages.error'), error.response.data.detail as string);
+        }
     }
 
     /**
      * Log out the user.
      */
     async function logout(): Promise<void> {
-        await client.post(endpoints.auth.logout).catch();
+        await client.post(endpoints.auth.logout);
         user.value = null;
     }
 
@@ -149,7 +138,7 @@ export const useAuthStore = defineStore('auth', () => {
         view,
         intent,
         login,
-        refresh,
+        refreshUser,
         logout,
         isAuthenticated,
     };
diff --git a/frontend/src/store/messages.store.ts b/frontend/src/store/messages.store.ts
index 3fc75900..3a13a37f 100644
--- a/frontend/src/store/messages.store.ts
+++ b/frontend/src/store/messages.store.ts
@@ -7,16 +7,52 @@ export const useMessagesStore = defineStore('messages', () => {
     const message = ref<ToastMessageOptions | null>(null);
 
     /**
-     * Update the toast message.
+     * Add a success message to the toast.
      *
-     * @param newMessage
+     * @param title
+     * @param description
+     * @returns void
      */
-    function add(newMessage: ToastMessageOptions): void {
-        message.value = newMessage;
+    function addSuccessMessage(title: string, description: string): void {
+        message.value = {
+            severity: 'success',
+            summary: title,
+            detail: description,
+        };
+    }
+
+    /**
+     * Add an error message to the toast.
+     *
+     * @param title
+     * @param description
+     */
+    function addErrorMessage(title: string, description: string): void {
+        message.value = {
+            severity: 'error',
+            summary: title,
+            detail: description,
+        };
+    }
+
+    /**
+     * Add an info message to the toast.
+     * @param title
+     * @param description
+     */
+    function addInfoMessage(title: string, description: string): void {
+        message.value = {
+            severity: 'info',
+            summary: title,
+            detail: description,
+        };
     }
 
     return {
         message,
-        add,
+
+        addSuccessMessage,
+        addErrorMessage,
+        addInfoMessage,
     };
 });
diff --git a/frontend/src/test/unit/course_service.test.ts b/frontend/src/test/unit/course_service.test.ts
index a29d109c..27466f67 100644
--- a/frontend/src/test/unit/course_service.test.ts
+++ b/frontend/src/test/unit/course_service.test.ts
@@ -11,10 +11,6 @@ const {
     getCourseByID,
     getCourses,
     getCoursesByStudent,
-
-    createCourse,
-    cloneCourse,
-    deleteCourse,
 } = useCourses();
 
 // "describe" bundles tests about 1 specific thing; here we're testing course
diff --git a/frontend/src/test/unit/faculty_service.test.ts b/frontend/src/test/unit/faculty_service.test.ts
index fb5ba597..13c12807 100644
--- a/frontend/src/test/unit/faculty_service.test.ts
+++ b/frontend/src/test/unit/faculty_service.test.ts
@@ -6,7 +6,7 @@ const {
     faculties,
     faculty,
     getFacultyByID,
-    getFacultys,
+    getFaculties,
 
     createFaculty,
     deleteFaculty,
@@ -20,7 +20,7 @@ describe('faculty', (): void => {
     });
 
     it('gets faculties data', async () => {
-        await getFacultys();
+        await getFaculties();
         expect(faculties).not.toBeNull();
         expect(Array.isArray(faculties.value)).toBe(true);
         expect(faculties.value?.length).toBe(2);
diff --git a/frontend/src/test/unit/project_service.test.ts b/frontend/src/test/unit/project_service.test.ts
index db04dfda..aac8a074 100644
--- a/frontend/src/test/unit/project_service.test.ts
+++ b/frontend/src/test/unit/project_service.test.ts
@@ -1,18 +1,8 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { describe, it, expect, beforeEach } from 'vitest';
+import { describe, it, expect } from 'vitest';
 import { useProject } from '@/composables/services/project.service.ts';
 
-const {
-    projects,
-    project,
-    getProjectByID,
-    getProjectsByCourse,
-    getProjectsByCourseAndDeadline,
-    getProjectsByStudent,
-
-    createProject,
-    deleteProject,
-} = useProject();
+const { projects, project, getProjectByID, getProjectsByCourse, getProjectsByStudent } = useProject();
 
 describe('project', (): void => {
     it('gets project data by id', async () => {
diff --git a/frontend/src/test/unit/setup.ts b/frontend/src/test/unit/setup.ts
index 0ef80b23..983ca216 100644
--- a/frontend/src/test/unit/setup.ts
+++ b/frontend/src/test/unit/setup.ts
@@ -410,14 +410,18 @@ export const restHandlers = [
         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)));
+        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;
+                    return currentSubmission.submission_number > maxSubmission.submission_number
+                        ? currentSubmission
+                        : maxSubmission;
                 });
             } else {
                 return null;
diff --git a/frontend/src/test/unit/structure_check.test.ts b/frontend/src/test/unit/structure_check.test.ts
index db83eb4d..b2912e95 100644
--- a/frontend/src/test/unit/structure_check.test.ts
+++ b/frontend/src/test/unit/structure_check.test.ts
@@ -1,16 +1,8 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { describe, it, expect, beforeEach } from 'vitest';
+import { describe, it, expect } from 'vitest';
 import { useStructureCheck } from '@/composables/services/structure_check.service.ts';
 
-const {
-    structureChecks,
-    structureCheck,
-    getStructureCheckByID,
-    getStructureCheckByProject,
-
-    createStructureCheck,
-    deleteStructureCheck,
-} = useStructureCheck();
+const { structureChecks, structureCheck, getStructureCheckByID, getStructureCheckByProject } = useStructureCheck();
 
 describe('structureCheck', (): void => {
     it('gets structure check data by id', async () => {
diff --git a/frontend/src/types/Course.ts b/frontend/src/types/Course.ts
index e87f7f6b..ee30591d 100644
--- a/frontend/src/types/Course.ts
+++ b/frontend/src/types/Course.ts
@@ -2,6 +2,7 @@ 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';
+import { Faculty } from '@/types/Faculty.ts';
 
 export class Course {
     constructor(
@@ -10,6 +11,7 @@ export class Course {
         public description: string | null,
         public academic_startyear: number,
         public parent_course: Course | null = null,
+        public faculty: Faculty | null = null,
         public teachers: Teacher[] = [],
         public assistants: Assistant[] = [],
         public students: Student[] = [],
@@ -24,12 +26,35 @@ export class Course {
         return `${this.academic_startyear} - ${this.academic_startyear + 1}`;
     }
 
+    /**
+     * Get the excerpt of the course description.
+     *
+     * @param maxLength
+     * @returns string
+     */
+    public getExcerpt(maxLength: number = 100): string {
+        if (this.description === null) return '';
+
+        if (this.description.length < maxLength) return this.description;
+
+        return this.description.substring(0, maxLength) + '...';
+    }
+
     /**
      * Convert a course object to a course instance.
      *
      * @param course
      */
     static fromJSON(course: Course): Course {
-        return new Course(course.id, course.name, course.description, course.academic_startyear, course.parent_course);
+        const faculty = course.faculty !== null ? Faculty.fromJSON(course.faculty) : null;
+
+        return new Course(
+            course.id,
+            course.name,
+            course.description,
+            course.academic_startyear,
+            course.parent_course,
+            faculty,
+        );
     }
 }
diff --git a/frontend/src/types/Faculty.ts b/frontend/src/types/Faculty.ts
index d2149d96..b4d78e08 100644
--- a/frontend/src/types/Faculty.ts
+++ b/frontend/src/types/Faculty.ts
@@ -1,5 +1,8 @@
 export class Faculty {
-    constructor(public name: string) {}
+    constructor(
+        public id: string,
+        public name: string,
+    ) {}
 
     /**
      * Convert a faculty object to a faculty instance.
@@ -7,6 +10,6 @@ export class Faculty {
      * @param faculty
      */
     static fromJSON(faculty: Faculty): Faculty {
-        return new Faculty(faculty.name);
+        return new Faculty(faculty.id, faculty.name);
     }
 }
diff --git a/frontend/src/types/filter/Filter.ts b/frontend/src/types/filter/Filter.ts
new file mode 100644
index 00000000..edd36982
--- /dev/null
+++ b/frontend/src/types/filter/Filter.ts
@@ -0,0 +1,10 @@
+export const COURSE_FILTER = {
+    search: '',
+    faculties: [],
+    years: [],
+};
+
+export interface Filter {
+    search: string;
+    [key: string]: any;
+}
diff --git a/frontend/src/types/filter/Paginator.ts b/frontend/src/types/filter/Paginator.ts
new file mode 100644
index 00000000..4e6972fb
--- /dev/null
+++ b/frontend/src/types/filter/Paginator.ts
@@ -0,0 +1,6 @@
+export interface PaginatorResponse<T> {
+    count: number;
+    next: string | null;
+    previous: string | null;
+    results: T[];
+}
diff --git a/frontend/src/types/users/Assistant.ts b/frontend/src/types/users/Assistant.ts
index c19d736b..0f2604e6 100644
--- a/frontend/src/types/users/Assistant.ts
+++ b/frontend/src/types/users/Assistant.ts
@@ -17,7 +17,20 @@ 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);
+        super(
+            id,
+            username,
+            email,
+            first_name,
+            last_name,
+            last_enrolled,
+            is_staff,
+            roles,
+            faculties,
+            create_time,
+            last_login,
+            courses,
+        );
     }
 
     /**
diff --git a/frontend/src/types/users/Student.ts b/frontend/src/types/users/Student.ts
index e0e341ad..970bd9bd 100644
--- a/frontend/src/types/users/Student.ts
+++ b/frontend/src/types/users/Student.ts
@@ -20,7 +20,36 @@ 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);
+        super(
+            id,
+            username,
+            email,
+            first_name,
+            last_name,
+            last_enrolled,
+            is_staff,
+            roles,
+            faculties,
+            create_time,
+            last_login,
+        );
+    }
+
+    /**
+     * Check if the student has a course.
+     * @param course
+     */
+    public hasCourse(course: Course): boolean {
+        return this.courses.some((c) => c.id === course.id);
+    }
+
+    /**
+     * Check if the user is a student.
+     *
+     * @returns boolean
+     */
+    public isStudent(): boolean {
+        return true;
     }
 
     /**
@@ -42,13 +71,4 @@ export class Student extends User {
             student.studentId,
         );
     }
-
-    /**
-     * Check if the user is a student.
-     *
-     * @returns boolean
-     */
-    public isStudent(): boolean {
-        return true;
-    }
 }
diff --git a/frontend/src/types/users/Teacher.ts b/frontend/src/types/users/Teacher.ts
index c0063632..1273a3c5 100644
--- a/frontend/src/types/users/Teacher.ts
+++ b/frontend/src/types/users/Teacher.ts
@@ -17,7 +17,20 @@ 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);
+        super(
+            id,
+            username,
+            email,
+            first_name,
+            last_name,
+            last_enrolled,
+            is_staff,
+            roles,
+            faculties,
+            create_time,
+            last_login,
+            courses,
+        );
     }
 
     /**
diff --git a/frontend/src/types/users/User.ts b/frontend/src/types/users/User.ts
index 490d044f..d90e1de9 100644
--- a/frontend/src/types/users/User.ts
+++ b/frontend/src/types/users/User.ts
@@ -21,8 +21,8 @@ export class User {
      * Get the academic years of the user.
      */
     get academic_years(): number[] {
-        const startYear = this.getAcademicYear(this.create_time);
-        const endYear = this.getAcademicYear(new Date());
+        const startYear = User.getAcademicYear(this.create_time);
+        const endYear = User.getAcademicYear(new Date());
 
         return Array.from({ length: endYear - startYear + 1 }, (_, i) => startYear + i);
     }
@@ -42,7 +42,7 @@ export class User {
      * @param date
      * @returns number
      */
-    public getAcademicYear(date: Date = new Date()): number {
+    public static getAcademicYear(date: Date = new Date()): number {
         const year = date.getFullYear();
 
         if (date.getMonth() >= 9) {
diff --git a/frontend/src/views/App.vue b/frontend/src/views/App.vue
index 88c68367..2bc2713b 100644
--- a/frontend/src/views/App.vue
+++ b/frontend/src/views/App.vue
@@ -14,7 +14,7 @@ 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) {
+    if (message.value !== null) {
         // Check if the message has a detail.
         if (message.value.detail === null || message.value.detail === undefined) {
             message.value.detail = t('toasts.messages.unknown');
diff --git a/frontend/src/views/authentication/LoginView.vue b/frontend/src/views/authentication/LoginView.vue
index a4aaaacd..f316e3b1 100644
--- a/frontend/src/views/authentication/LoginView.vue
+++ b/frontend/src/views/authentication/LoginView.vue
@@ -21,12 +21,20 @@ 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%)">
+                <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 68296e02..b2898ff6 100644
--- a/frontend/src/views/authentication/VerifyView.vue
+++ b/frontend/src/views/authentication/VerifyView.vue
@@ -1,18 +1,17 @@
 <script setup lang="ts">
 import BaseLayout from '@/components/layout/BaseLayout.vue';
+import Title from '@/components/layout/Title.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();
 
 onMounted(async () => {
-    await login(query.ticket as string).then(() => {
-        push(intent);
-    });
+    await login(query.ticket as string);
+    await push(intent);
 });
 </script>
 
diff --git a/frontend/src/views/calendar/CalendarView.vue b/frontend/src/views/calendar/CalendarView.vue
index 55733feb..20eb4ccf 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-2">
+                <div class="grid grid-cols-2 gap-4">
                     <div v-for="project in projectsWithDeadline" :key="project.id">
-                        <ProjectCard class="h-100" :project="project" :course="project.course" v-if="project.course" />
+                        <ProjectCard class="h-100" :project="project" :course="project.course" />
                     </div>
                 </div>
             </div>
diff --git a/frontend/src/views/courses/CreateCourseView.vue b/frontend/src/views/courses/CreateCourseView.vue
index 1230fd69..93a519a9 100644
--- a/frontend/src/views/courses/CreateCourseView.vue
+++ b/frontend/src/views/courses/CreateCourseView.vue
@@ -67,7 +67,13 @@ const submitCourse = async (): Promise<void> => {
 
                     <!-- 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/courses/SearchCourseView.vue b/frontend/src/views/courses/SearchCourseView.vue
new file mode 100644
index 00000000..007a7a89
--- /dev/null
+++ b/frontend/src/views/courses/SearchCourseView.vue
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import Accordion from 'primevue/accordion';
+import AccordionTab from 'primevue/accordiontab';
+import InputText from 'primevue/inputtext';
+import IconField from 'primevue/iconfield';
+import InputIcon from 'primevue/inputicon';
+import Checkbox from 'primevue/checkbox';
+import Paginator from 'primevue/paginator';
+import Title from '@/components/layout/Title.vue';
+import BaseLayout from '@/components/layout/BaseLayout.vue';
+import CourseList from '@/components/courses/CourseList.vue';
+import { onMounted, watch } from 'vue';
+import { useCourses } from '@/composables/services/courses.service.ts';
+import { useAuthStore } from '@/store/authentication.store.ts';
+import { useFaculty } from '@/composables/services/faculties.service.ts';
+import { storeToRefs } from 'pinia';
+import { useI18n } from 'vue-i18n';
+import { useFilter } from '@/composables/filters/filter.ts';
+import { usePaginator } from '@/composables/filters/paginator.ts';
+import { watchDebounced } from '@vueuse/core';
+import { COURSE_FILTER } from '@/types/filter/Filter.ts';
+
+/* Composable injections */
+const { t } = useI18n();
+const { user } = storeToRefs(useAuthStore());
+const { faculties, getFaculties } = useFaculty();
+const { pagination, searchCourses } = useCourses();
+const { paginate, page, first, pageSize } = usePaginator();
+const { filter } = useFilter(COURSE_FILTER);
+
+/* Fetch the faculties */
+onMounted(async () => {
+    await getFaculties();
+
+    /* Reset current page on filter changes */
+    watch(
+        filter,
+        () => {
+            paginate(0);
+            pagination.value = null;
+        },
+        { deep: true },
+    );
+
+    /* Search courses on page change */
+    watch(page, async () => {
+        await searchCourses(filter.value, page.value, pageSize.value);
+    });
+
+    /* Search courses on filter change */
+    watchDebounced(
+        filter,
+        async () => {
+            await searchCourses(filter.value, page.value, pageSize.value);
+        },
+        { debounce: 500, immediate: true, deep: true },
+    );
+});
+</script>
+
+<template>
+    <BaseLayout>
+        <div class="grid">
+            <div class="col-12 xl:col-3">
+                <Accordion :active-index="[0]" multiple>
+                    <AccordionTab :header="t('views.courses.search.search')">
+                        <IconField iconPosition="left">
+                            <InputText
+                                :placeholder="t('views.courses.search.placeholder')"
+                                v-model="filter.search"
+                                class="w-full"
+                            />
+                            <InputIcon class="pi pi-search"></InputIcon>
+                        </IconField>
+                    </AccordionTab>
+                    <AccordionTab :header="t('views.courses.search.faculty')" v-if="faculties">
+                        <div v-for="faculty in faculties" :key="faculty.id" class="flex align-items-center mb-2">
+                            <Checkbox
+                                v-model="filter.faculties"
+                                :inputId="faculty.id"
+                                name="faculties"
+                                :value="faculty.id"
+                            />
+                            <label :for="faculty.id" class="ml-2 text-sm">{{ faculty.name }}</label>
+                        </div>
+                    </AccordionTab>
+                    <AccordionTab :header="t('views.courses.search.year')" v-if="user">
+                        <div v-for="year in user.academic_years" :key="year" class="flex align-items-center mb-2">
+                            <Checkbox
+                                v-model="filter.years"
+                                :inputId="year.toString()"
+                                name="faculties"
+                                :value="year"
+                            />
+                            <label :for="year.toString()" class="ml-2 text-sm">{{ year }} - {{ year + 1 }}</label>
+                        </div>
+                    </AccordionTab>
+                </Accordion>
+            </div>
+            <div class="col-12 xl:col-9">
+                <Title>
+                    {{ t('views.courses.search.title') }}
+                </Title>
+                <p class="mt-3" v-if="pagination">
+                    {{ t('views.courses.search.results', [pagination.count]) }}
+                </p>
+                <CourseList class="mt-3" :courses="pagination?.results ?? null" :cols="3" :detail="false" />
+                <Paginator
+                    :rows="pageSize"
+                    :total-records="pagination?.count"
+                    :first="first"
+                    @update:first="paginate($event)"
+                />
+            </div>
+        </div>
+    </BaseLayout>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/frontend/src/views/dashboard/roles/StudentDashboardView.vue b/frontend/src/views/dashboard/roles/StudentDashboardView.vue
index b5791478..e88bfdc8 100644
--- a/frontend/src/views/dashboard/roles/StudentDashboardView.vue
+++ b/frontend/src/views/dashboard/roles/StudentDashboardView.vue
@@ -10,6 +10,7 @@ import { PrimeIcons } from 'primevue/api';
 import { useI18n } from 'vue-i18n';
 import { computed, ref, watch } from 'vue';
 import { useCourses } from '@/composables/services/courses.service.ts';
+import { User } from '@/types/users/User.ts';
 
 /* Props */
 const props = defineProps<{
@@ -21,9 +22,11 @@ const { t } = useI18n();
 const { courses, getCoursesByStudent } = useCourses();
 
 /* State */
-const selectedYear = ref<number>(props.student.getAcademicYear());
+const selectedYear = ref<number>(User.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(
@@ -46,7 +49,12 @@ 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>