From 3dea579e1eb11d360f765f24c888b035dc6a2d88 Mon Sep 17 00:00:00 2001
From: EwoutV <ewoutverlinde@hotmail.com>
Date: Thu, 23 May 2024 00:54:57 +0200
Subject: [PATCH] feat: project views

---
 backend/api/permissions/role_permissions.py   |   7 +-
 backend/api/serializers/group_serializer.py   |  30 ++-
 backend/api/views/project_view.py             |  22 ++
 frontend/src/assets/lang/app/en.json          |  14 ++
 frontend/src/assets/lang/app/nl.json          |  14 ++
 frontend/src/components/Loading.vue           |   2 +-
 .../src/components/help/HelpBaseLayout.vue    |  28 ---
 frontend/src/components/help/HelpHeader.vue   | 208 ------------------
 .../TeacherAssistantCard.vue                  |   4 +-
 .../TeacherAssistantList.vue                  |   0
 .../TeacherAssistantSearch.vue                |   0
 .../TeacherAssistantUpdateButton.vue          |   0
 .../buttons/CourseRoleAddButton.vue           |   0
 .../buttons/LeaveCourseButton.vue             |   0
 frontend/src/components/layout/Footer.vue     |  25 ---
 ...on.vue => ProjectDownloadGradesButton.vue} |  39 ++--
 ...pload.vue => ProjectExtraChecksEditor.vue} |   0
 .../src/components/projects/ProjectForm.vue   |   4 +-
 ...ureTree.vue => ProjectStructureEditor.vue} |   0
 ...hooseGroupCard.vue => GroupChooseCard.vue} |  40 ++--
 ...oinedGroupCard.vue => GroupJoinedCard.vue} |  13 +-
 .../projects/groups/GroupsManageTable.vue     | 130 +++++++++++
 .../components/submissions/ProjectMeter.vue   |  16 +-
 .../components/submissions/SubmissionCard.vue |  64 +++---
 .../src/composables/services/group.service.ts |  26 ++-
 frontend/src/composables/services/helpers.ts  |   5 +-
 .../composables/services/project.service.ts   |   4 +-
 frontend/src/config/endpoints.ts              |   1 +
 frontend/src/router/router.ts                 |  45 ----
 frontend/src/types/Group.ts                   |  18 +-
 frontend/src/types/Project.ts                 |  10 +-
 frontend/src/views/admin/DockerImagesView.vue |   6 +-
 frontend/src/views/admin/UsersView.vue        |   6 +-
 .../src/views/authentication/LoginView.vue    |   4 +-
 .../src/views/authentication/VerifyView.vue   |   4 +-
 frontend/src/views/calendar/CalendarView.vue  |   4 +-
 frontend/src/views/courses/CourseView.vue     |   2 +-
 .../src/views/courses/CreateCourseView.vue    |   4 +-
 frontend/src/views/courses/JoinCourseView.vue |   6 +-
 .../src/views/courses/SearchCourseView.vue    |   4 +-
 .../src/views/courses/UpdateCourseView.vue    |   4 +-
 .../courses/roles/AssistantCourseView.vue     |   4 +-
 .../views/courses/roles/StudentCourseView.vue |   4 +-
 .../views/courses/roles/TeacherCourseView.vue |   6 +-
 .../src/views/dashboard/DashboardView.vue     |   2 +-
 .../roles/AssistantDashboardView.vue          |   2 +-
 .../dashboard/roles/StudentDashboardView.vue  |   2 +-
 .../dashboard/roles/TeacherDashboardView.vue  |   2 +-
 frontend/src/views/help/HelpDashboard.vue     |  58 -----
 .../src/{components => views}/layout/Body.vue |   0
 frontend/src/views/layout/Footer.vue          |  64 ++++++
 .../{components => views}/layout/Title.vue    |   0
 .../layout/admin/AdminHeader.vue              |   0
 .../layout/admin/AdminLayout.vue              |   6 +-
 .../layout/admin/AdminSidebar.vue             |   0
 .../layout/base/BaseHeader.vue                |   0
 .../layout/base/BaseLayout.vue                |   6 +-
 .../src/views/projects/CreateProjectView.vue  |   4 +-
 frontend/src/views/projects/ProjectView.vue   |  68 ++----
 frontend/src/views/projects/ProjectsView.vue  |   4 +-
 .../src/views/projects/UpdateProjectView.vue  |   4 +-
 .../projects/roles/StudentProjectView.vue     | 203 +++++++++++------
 .../projects/roles/TeacherProjectView.vue     | 156 ++++++++++---
 .../src/views/submissions/SubmissionView.vue  |   4 +-
 64 files changed, 731 insertions(+), 681 deletions(-)
 delete mode 100644 frontend/src/components/help/HelpBaseLayout.vue
 delete mode 100644 frontend/src/components/help/HelpHeader.vue
 rename frontend/src/components/{teachers_assistants => instructors}/TeacherAssistantCard.vue (92%)
 rename frontend/src/components/{teachers_assistants => instructors}/TeacherAssistantList.vue (100%)
 rename frontend/src/components/{teachers_assistants => instructors}/TeacherAssistantSearch.vue (100%)
 rename frontend/src/components/{teachers_assistants => instructors}/TeacherAssistantUpdateButton.vue (100%)
 rename frontend/src/components/{teachers_assistants => instructors}/buttons/CourseRoleAddButton.vue (100%)
 rename frontend/src/components/{teachers_assistants => instructors}/buttons/LeaveCourseButton.vue (100%)
 delete mode 100644 frontend/src/components/layout/Footer.vue
 rename frontend/src/components/projects/{DownloadCSVButton.vue => ProjectDownloadGradesButton.vue} (63%)
 rename frontend/src/components/projects/{ExtraChecksUpload.vue => ProjectExtraChecksEditor.vue} (100%)
 rename frontend/src/components/projects/{ProjectStructureTree.vue => ProjectStructureEditor.vue} (100%)
 rename frontend/src/components/projects/groups/{ChooseGroupCard.vue => GroupChooseCard.vue} (72%)
 rename frontend/src/components/projects/groups/{JoinedGroupCard.vue => GroupJoinedCard.vue} (75%)
 create mode 100644 frontend/src/components/projects/groups/GroupsManageTable.vue
 delete mode 100644 frontend/src/views/help/HelpDashboard.vue
 rename frontend/src/{components => views}/layout/Body.vue (100%)
 create mode 100644 frontend/src/views/layout/Footer.vue
 rename frontend/src/{components => views}/layout/Title.vue (100%)
 rename frontend/src/{components => views}/layout/admin/AdminHeader.vue (100%)
 rename frontend/src/{components => views}/layout/admin/AdminLayout.vue (70%)
 rename frontend/src/{components => views}/layout/admin/AdminSidebar.vue (100%)
 rename frontend/src/{components => views}/layout/base/BaseHeader.vue (100%)
 rename frontend/src/{components => views}/layout/base/BaseLayout.vue (69%)

diff --git a/backend/api/permissions/role_permissions.py b/backend/api/permissions/role_permissions.py
index 68cc428e..b0846746 100644
--- a/backend/api/permissions/role_permissions.py
+++ b/backend/api/permissions/role_permissions.py
@@ -1,3 +1,4 @@
+from django.contrib.auth.base_user import AbstractBaseUser
 from rest_framework.permissions import IsAuthenticated
 from rest_framework.request import Request
 from rest_framework.viewsets import ViewSet
@@ -7,17 +8,17 @@
 from api.models.teacher import Teacher
 
 
-def is_student(user: User) -> bool:
+def is_student(user: AbstractBaseUser) -> bool:
     """Check whether the user is a student"""
     return Student.objects.filter(id=user.id, is_active=True).exists()
 
 
-def is_assistant(user: User) -> bool:
+def is_assistant(user: AbstractBaseUser) -> bool:
     """Check whether the user is an assistant"""
     return Assistant.objects.filter(id=user.id, is_active=True).exists()
 
 
-def is_teacher(user: User) -> bool:
+def is_teacher(user: AbstractBaseUser) -> bool:
     """Check whether the user is a teacher"""
     return Teacher.objects.filter(id=user.id, is_active=True).exists()
 
diff --git a/backend/api/serializers/group_serializer.py b/backend/api/serializers/group_serializer.py
index ae2e474f..b62102c7 100644
--- a/backend/api/serializers/group_serializer.py
+++ b/backend/api/serializers/group_serializer.py
@@ -13,8 +13,8 @@
 
 
 class GroupSerializer(serializers.ModelSerializer):
-    project = ProjectSerializer(
-        read_only=True,
+    project = serializers.HyperlinkedIdentityField(
+        view_name="project-detail"
     )
 
     students = serializers.HyperlinkedIdentityField(
@@ -22,28 +22,32 @@ class GroupSerializer(serializers.ModelSerializer):
         read_only=True,
     )
 
+    occupation = serializers.SerializerMethodField()
+
     submissions = serializers.HyperlinkedIdentityField(
         view_name="group-submissions",
         read_only=True,
     )
 
-    class Meta:
-        model = Group
-        fields = "__all__"
+    def get_occupation(self, instance: Group):
+        """Get the number of students in the group"""
+        return instance.students.count()
 
-    def to_representation(self, instance):
+    def to_representation(self, instance: Group):
+        """Convert the group to a JSON representation"""
         data = super().to_representation(instance)
 
         user = self.context["request"].user
         course_id = instance.project.course.id
 
         # If you are not a student, you can always see the score
-        if is_student(user):
+        if is_student(user) and not is_teacher(user) and not is_assistant(user) and not user.is_staff:
             student_in_course = user.student.courses.filter(id=course_id).exists()
+
             # Student can not see the score if they are not part of the course associated with group and
             # neither an assistant or a teacher,
             # or it is not visible yet when they are part of the course associated with the group
-            if not student_in_course and not is_assistant(user) and not is_teacher(user) or \
+            if not student_in_course or \
                     not instance.project.score_visible and student_in_course:
                 data.pop("score")
 
@@ -51,14 +55,20 @@ def to_representation(self, instance):
 
     def validate(self, attrs):
         # Make sure the score of the group is lower or equal to the maximum score
-        self.instance: Group
-        group = self.instance
+        group: Group = self.instance or self.context.get("group")
+
+        if group is None:
+            raise ValueError("Group is not in context")
 
         if "score" in attrs and attrs["score"] > group.project.max_score:
             raise ValidationError(gettext("group.errors.score_exceeds_max"))
 
         return attrs
 
+    class Meta:
+        model = Group
+        fields = "__all__"
+
 
 class StudentJoinGroupSerializer(StudentIDSerializer):
 
diff --git a/backend/api/views/project_view.py b/backend/api/views/project_view.py
index 180dd5d1..9267dbfc 100644
--- a/backend/api/views/project_view.py
+++ b/backend/api/views/project_view.py
@@ -1,8 +1,10 @@
 from api.models.group import Group
 from api.models.project import Project
+from api.models.student import Student
 from api.models.submission import Submission
 from api.permissions.project_permissions import (ProjectGroupPermission,
                                                  ProjectPermission)
+from api.permissions.role_permissions import is_student, IsStudent
 from api.serializers.checks_serializer import (ExtraCheckSerializer,
                                                StructureCheckSerializer)
 from api.serializers.group_serializer import GroupSerializer
@@ -31,6 +33,26 @@ class ProjectViewSet(RetrieveModelMixin,
     serializer_class = ProjectSerializer
     permission_classes = [IsAdminUser | ProjectPermission]  # GroupPermission has exact the same logic as for a project
 
+    @action(detail=True, permission_classes=[IsAdminUser | ProjectGroupPermission | IsStudent], url_path='student-group')
+    def student_group(self, request: Request, **_) -> Response:
+        """Returns the group of the student for the given project"""
+
+        # Get the student object from the user
+        student = Student.objects.get(id=request.user.id)
+
+        # Get the group of the student for the project
+        group = student.groups.filter(project=self.get_object()).first()
+
+        if group is None:
+            return Response(None)
+
+        # Serialize the group object
+        serializer = GroupSerializer(
+            group, context={"request": request}
+        )
+
+        return Response(serializer.data)
+
     @action(detail=True, permission_classes=[IsAdminUser | ProjectGroupPermission])
     def groups(self, request, **_):
         """Returns a list of groups for the given project"""
diff --git a/frontend/src/assets/lang/app/en.json b/frontend/src/assets/lang/app/en.json
index dbcd356f..4d812ac4 100644
--- a/frontend/src/assets/lang/app/en.json
+++ b/frontend/src/assets/lang/app/en.json
@@ -15,6 +15,13 @@
                 "nl": "Nederlands",
                 "en": "English"
             }
+        },
+        "footer": {
+            "home": "Dashboard",
+            "about": "Help",
+            "privacy": "Cookies",
+            "contact": "Contact",
+            "rights": "All rights reserved"
         }
     },
     "views": {
@@ -41,11 +48,18 @@
         },
         "projects": {
             "all": "All projects",
+            "backToCourse": "Back to course",
             "coming": "Near deadlines",
             "deadline": "Deadline",
             "days": "Today at {hour} | Tomorrow at {hour} | In {count} days",
             "ago": "1 day ago | {count} days ago",
+            "chooseGroupMessage": "Choose a group before {0}",
+            "groupScore": "Group score",
+            "noGroupScore": "No group score",
+            "noGroupMembers": "No group members",
+            "publishScores": "Publish scores",
             "groupName": "Group name",
+            "groups": "Groups",
             "groupPopulation": "Size",
             "groupStatus": "Status",
             "start": "Start date",
diff --git a/frontend/src/assets/lang/app/nl.json b/frontend/src/assets/lang/app/nl.json
index be118d94..b933ef13 100644
--- a/frontend/src/assets/lang/app/nl.json
+++ b/frontend/src/assets/lang/app/nl.json
@@ -15,6 +15,13 @@
                 "nl": "Nederlands",
                 "en": "English"
             }
+        },
+        "footer": {
+            "home": "Dashboard",
+            "about": "Help",
+            "privacy": "Cookies",
+            "contact": "Contacteer ons",
+            "rights": "Alle rechten voorbehouden"
         }
     },
     "views": {
@@ -42,15 +49,22 @@
         "projects": {
             "all": "Alle projecten",
             "coming": "Aankomende deadlines",
+            "backToCourse": "Terug naar het vak",
             "deadline": "Deadline",
             "days": "Vandaag om {hour} | Morgen om {hour} | Over {count} dagen",
             "ago": "1 dag geleden | {count} dagen geleden",
+            "chooseGroupMessage": "Kies een groep voor {0}",
+            "groupScore": "Groepsscore",
+            "noGroupScore": "Nog geen score",
+            "publishScores": "Publiceer scores",
             "groupName": "Groepsnaam",
+            "noGroupMembers": "Geen groepsleden",
             "groupPopulation": "Grootte",
             "groupStatus": "Status",
             "start": "Startdatum",
             "submissionStatus": "Indienstatus",
             "group": "Groep",
+            "groups": "Groepen",
             "groupSize": "Individueel | Groepen van {count} personen",
             "noGroups": "Geen groepen beschikbaar",
             "groupMembers": "Groepsleden",
diff --git a/frontend/src/components/Loading.vue b/frontend/src/components/Loading.vue
index eac23369..272c1aa0 100644
--- a/frontend/src/components/Loading.vue
+++ b/frontend/src/components/Loading.vue
@@ -6,7 +6,7 @@ withDefaults(defineProps<{ height?: string }>(), {
     height: '4rem',
 });
 
-const show = useTimeout(250);
+const show = useTimeout(350);
 </script>
 
 <template>
diff --git a/frontend/src/components/help/HelpBaseLayout.vue b/frontend/src/components/help/HelpBaseLayout.vue
deleted file mode 100644
index bba946d6..00000000
--- a/frontend/src/components/help/HelpBaseLayout.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<script setup lang="ts">
-import HelpHeader from '@/components/help/HelpHeader.vue';
-import Body from '@/components/layout/Body.vue';
-import Footer from '@/components/layout/Footer.vue';
-</script>
-
-<template>
-    <div id="layout" class="w-12 lg:w-11 xl:w-9 mx-auto">
-        <HelpHeader />
-
-        <Body id="body">
-            <slot />
-        </Body>
-
-        <Footer />
-    </div>
-</template>
-
-<style scoped>
-#layout {
-    max-width: 1460px;
-    height: 100vh;
-
-    #body {
-        min-height: calc(100vh - (180px + 175px));
-    }
-}
-</style>
diff --git a/frontend/src/components/help/HelpHeader.vue b/frontend/src/components/help/HelpHeader.vue
deleted file mode 100644
index cced6965..00000000
--- a/frontend/src/components/help/HelpHeader.vue
+++ /dev/null
@@ -1,208 +0,0 @@
-<script setup lang="ts">
-import en from '@/assets/img/logo-en.png';
-import nl from '@/assets/img/logo-nl.png';
-import tiny from '@/assets/img/logo-tiny.png';
-import Button from 'primevue/button';
-import LanguageSelector from '@/components/LanguageSelector.vue';
-import RoleSelector from '@/components/RoleSelector.vue';
-import Sidebar from 'primevue/sidebar';
-import { useI18n } from 'vue-i18n';
-import { computed, ref } from 'vue';
-import { useAuthStore } from '@/store/authentication.store.ts';
-import { storeToRefs } from 'pinia';
-import { endpoints } from '@/config/endpoints.ts';
-
-/* Composables */
-const { user, isAuthenticated } = storeToRefs(useAuthStore());
-const { t, locale } = useI18n();
-
-/* State */
-const showSidebar = ref(false);
-
-const logo = computed(() => {
-    if (locale.value === 'nl') {
-        return nl;
-    }
-
-    return en;
-});
-
-/* Navigation items */
-const items = computed(() => [
-    {
-        icon: 'person', // TODO
-        label: t('info.header.student'),
-        route: 'help-student',
-    },
-    {
-        icon: 'calendar', // TODO
-        label: t('info.header.teacher'),
-        route: 'help-teacher',
-    },
-    {
-        icon: 'book', // TODO
-        label: t('info.header.assistant'),
-        route: 'help-assistant',
-    },
-    {
-        icon: 'bookmark', // TODO
-        label: t('info.header.admin'),
-        route: 'help-admin',
-    },
-]);
-</script>
-
-<template>
-    <div class="flex w-full">
-        <!-- Logo -->
-        <div class="lg:w-2 lg:pl-0 flex align-items-center p-3">
-            <RouterLink :to="'/'">
-                <img class="w-full max-w-9rem" :src="logo" :alt="t('layout.header.logo')" />
-            </RouterLink>
-        </div>
-        <!-- Content -->
-        <div class="flex flex-column w-full lg:w-10">
-            <!-- Header -->
-            <div id="header" class="w-full flex text-white p-4">
-                <!-- Title -->
-                <div class="hidden md:flex align-items-end">
-                    <h1 class="text-white m-0">Ypovoli</h1>
-                </div>
-                <!-- User information -->
-                <div class="text-right ml-auto text-sm flex flex-column align-items-end gap-3">
-                    <div class="flex align-items-center gap-3">
-                        <template v-if="user !== null && user.hasMultipleRoles()">
-                            <!-- Role selector -->
-                            <RoleSelector />
-                        </template>
-                        <!-- Language selector -->
-                        <LanguageSelector />
-                        <!-- Menu selector -->
-                        <span @click="showSidebar = !showSidebar" class="md:hidden pi pi-bars cursor-pointer" />
-                    </div>
-                    <div>
-                        <!-- User information -->
-                        <template v-if="user !== null">
-                            <RouterLink :to="{ name: 'logout' }" class="text-white">
-                                <span class="hidden md:inline">
-                                    {{ t('layout.header.user', [user.getFullName()]) }}
-                                </span>
-                                <span class="inline md:hidden">
-                                    {{ user.getFullName() }}
-                                </span>
-                            </RouterLink>
-                        </template>
-                        <!-- Login button -->
-                        <template v-else>
-                            <a :href="endpoints.auth.login">
-                                <Button
-                                    icon="pi pi-unlock"
-                                    :label="t('layout.header.login')"
-                                    severity="secondary"
-                                    class="text-sm"
-                                />
-                            </a>
-                        </template>
-                    </div>
-                </div>
-            </div>
-            <!-- Navigation -->
-            <div id="navigation" class="hidden md:flex w-full h-full">
-                <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"
-                        >
-                            <span class="mr-2" :class="'pi pi-' + item.icon" />
-                            {{ item.label }}
-                        </div>
-                    </RouterLink>
-                </template>
-            </div>
-        </div>
-        <Sidebar v-model:visible="showSidebar">
-            <template #container="{ closeCallback }">
-                <div class="flex flex-column h-full">
-                    <div class="flex align-items-center justify-content-between p-4 pb-2 flex-shrink-0">
-                        <span class="inline-flex align-items-center gap-2">
-                            <img :alt="t('layout.header.logo')" :src="tiny" class="w-2rem mr-2" />
-                            <span class="font-bold text-2xl text-primary">Ypovoli</span>
-                        </span>
-                        <span>
-                            <Button
-                                type="button"
-                                @click="closeCallback"
-                                icon="pi pi-times"
-                                rounded
-                                outlined
-                                class="h-2rem w-2rem"
-                            />
-                        </span>
-                    </div>
-                    <div class="overflow-y-auto px-2">
-                        <ul class="list-none p-0 m-0">
-                            <li v-for="item in items" :key="item.route">
-                                <RouterLink
-                                    :to="{ name: item.route }"
-                                    @click="closeCallback"
-                                    class="flex align-items-center cursor-pointer p-3 text-black-alpha-90 border-bottom-1 border-300"
-                                    v-ripple
-                                >
-                                    <i class="mr-2" :class="'pi pi-' + item.icon" />
-                                    <span class="font-medium">{{ item.label }}</span>
-                                </RouterLink>
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-            </template>
-        </Sidebar>
-    </div>
-</template>
-
-<style lang="scss">
-#header {
-    background: var(--primary-color);
-
-    #language,
-    #view {
-        background: transparent;
-        color: var(--primary-color-text);
-        border: none;
-        padding: 0.25rem;
-
-        .p-inputtext {
-            padding: 0;
-            color: var(--primary-color-text);
-        }
-
-        .p-dropdown-trigger {
-            width: auto;
-            color: var(--primary-color-text);
-            margin-left: 0.5rem;
-        }
-    }
-}
-
-.nav-item {
-    position: relative;
-    z-index: 1;
-
-    &::after {
-        content: '';
-        display: block;
-        position: absolute;
-        bottom: 0.2rem;
-        left: 0;
-        width: 0;
-        height: 2px;
-        background: var(--primary-color);
-        transition: width 0.3s;
-    }
-
-    &:hover::after,
-    &.active::after {
-        width: calc(100% - 1rem);
-    }
-}
-</style>
diff --git a/frontend/src/components/teachers_assistants/TeacherAssistantCard.vue b/frontend/src/components/instructors/TeacherAssistantCard.vue
similarity index 92%
rename from frontend/src/components/teachers_assistants/TeacherAssistantCard.vue
rename to frontend/src/components/instructors/TeacherAssistantCard.vue
index 9fb4b42d..48c58997 100644
--- a/frontend/src/components/teachers_assistants/TeacherAssistantCard.vue
+++ b/frontend/src/components/instructors/TeacherAssistantCard.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import Card from 'primevue/card';
-import CourseRoleAddButton from '@/components/teachers_assistants/buttons/CourseRoleAddButton.vue';
-import LeaveCourseButton from '@/components/teachers_assistants/buttons/LeaveCourseButton.vue';
+import CourseRoleAddButton from '@/components/instructors/buttons/CourseRoleAddButton.vue';
+import LeaveCourseButton from '@/components/instructors/buttons/LeaveCourseButton.vue';
 import { type User } from '@/types/users/User.ts';
 import { type Course } from '@/types/Course';
 import { useI18n } from 'vue-i18n';
diff --git a/frontend/src/components/teachers_assistants/TeacherAssistantList.vue b/frontend/src/components/instructors/TeacherAssistantList.vue
similarity index 100%
rename from frontend/src/components/teachers_assistants/TeacherAssistantList.vue
rename to frontend/src/components/instructors/TeacherAssistantList.vue
diff --git a/frontend/src/components/teachers_assistants/TeacherAssistantSearch.vue b/frontend/src/components/instructors/TeacherAssistantSearch.vue
similarity index 100%
rename from frontend/src/components/teachers_assistants/TeacherAssistantSearch.vue
rename to frontend/src/components/instructors/TeacherAssistantSearch.vue
diff --git a/frontend/src/components/teachers_assistants/TeacherAssistantUpdateButton.vue b/frontend/src/components/instructors/TeacherAssistantUpdateButton.vue
similarity index 100%
rename from frontend/src/components/teachers_assistants/TeacherAssistantUpdateButton.vue
rename to frontend/src/components/instructors/TeacherAssistantUpdateButton.vue
diff --git a/frontend/src/components/teachers_assistants/buttons/CourseRoleAddButton.vue b/frontend/src/components/instructors/buttons/CourseRoleAddButton.vue
similarity index 100%
rename from frontend/src/components/teachers_assistants/buttons/CourseRoleAddButton.vue
rename to frontend/src/components/instructors/buttons/CourseRoleAddButton.vue
diff --git a/frontend/src/components/teachers_assistants/buttons/LeaveCourseButton.vue b/frontend/src/components/instructors/buttons/LeaveCourseButton.vue
similarity index 100%
rename from frontend/src/components/teachers_assistants/buttons/LeaveCourseButton.vue
rename to frontend/src/components/instructors/buttons/LeaveCourseButton.vue
diff --git a/frontend/src/components/layout/Footer.vue b/frontend/src/components/layout/Footer.vue
deleted file mode 100644
index d229e1ed..00000000
--- a/frontend/src/components/layout/Footer.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import en from '@/assets/img/logo-white-en.png';
-import nl from '@/assets/img/logo-white-nl.png';
-import { useI18n } from 'vue-i18n';
-
-/* Translation composable */
-const { t, locale } = useI18n();
-
-/* Available localized images */
-const logo: Record<string, string> = { nl, en };
-</script>
-
-<template>
-    <div id="footer" class="p-4 py-3 mt-auto">
-        <div class="w-full lg:w-2 flex align-items-center py-3">
-            <img class="w-full max-w-9rem" :src="logo[locale]" :alt="t('layout.header.logo')" />
-        </div>
-    </div>
-</template>
-
-<style lang="scss" scoped>
-#footer {
-    background: var(--primary-color);
-}
-</style>
diff --git a/frontend/src/components/projects/DownloadCSVButton.vue b/frontend/src/components/projects/ProjectDownloadGradesButton.vue
similarity index 63%
rename from frontend/src/components/projects/DownloadCSVButton.vue
rename to frontend/src/components/projects/ProjectDownloadGradesButton.vue
index 4f6915c3..202606d5 100644
--- a/frontend/src/components/projects/DownloadCSVButton.vue
+++ b/frontend/src/components/projects/ProjectDownloadGradesButton.vue
@@ -1,46 +1,45 @@
 <script setup lang="ts">
 import Button from 'primevue/button';
 import { useI18n } from 'vue-i18n';
-import { useGroup } from '@/composables/services/group.service.ts';
 import { useStudents } from '@/composables/services/student.service.ts';
 import { type Project } from '@/types/Project.ts';
+import { type Group } from '@/types/Group.ts';
+import { type Student } from '@/types/users/Student.ts';
 
 /* Props */
 const props = defineProps<{
     project: Project;
+    groups: Group[];
 }>();
 
 /* Injections */
 const { t } = useI18n();
-const { groups, getGroupsByProject } = useGroup();
 const { students, getStudentsByGroup } = useStudents();
 
 /* Constants */
 const header = 'OrgDefinedId,Last Name,First Name,Email,Grade,End-of-Line Indicator\n';
 
-/* Functions */
 /**
  * generateCSVAndDownload generates a csv combining all the scores for all students in all groups associated
  * with the projectId in this component's props.
  * After generating a csv, a download link is created and clicked.
  */
 const generateCSVAndDownload = async (): Promise<void> => {
-    // retrieve all the groups associated with a given project
-    await getGroupsByProject(props.project.id);
-    // construct for every group's student a csv line according to ufora grade csv standard
+    // construct for every group's student a csv line according to Ufora grade csv standard
     // and concatenate them all into one csv
-    const csvPromises =
-        groups.value?.map(async (group) => {
-            await getStudentsByGroup(group.id);
-            return (
-                students.value
-                    ?.map((student) => {
-                        // single csv line
-                        return `#${student.student_id},${student.last_name},${student.first_name},${student.email},${(group.score * 10) / props.project.max_score},#`;
-                    })
-                    .join('\n') ?? ''
-            );
-        }) ?? [];
+    const csvPromises = props.groups.map(async (group: Group) => {
+        await getStudentsByGroup(group.id);
+
+        if (students.value !== null) {
+            return students.value
+                .map((student: Student) => {
+                    return `#${student.student_id},${student.last_name},${student.first_name},${student.email},${((group.score ?? 0) * 10) / props.project.max_score},#`;
+                })
+                .join('\n');
+        }
+
+        return [];
+    });
 
     const csvList = await Promise.all(csvPromises);
     const csvContent = header + csvList.join('\n');
@@ -65,9 +64,7 @@ const generateCSVAndDownload = async (): Promise<void> => {
 </script>
 
 <template>
-    <Button @click="generateCSVAndDownload">
-        {{ t('components.button.csv') }}
-    </Button>
+    <Button @click="generateCSVAndDownload" :label="t('components.button.csv')" />
 </template>
 
 <style scoped lang="scss"></style>
diff --git a/frontend/src/components/projects/ExtraChecksUpload.vue b/frontend/src/components/projects/ProjectExtraChecksEditor.vue
similarity index 100%
rename from frontend/src/components/projects/ExtraChecksUpload.vue
rename to frontend/src/components/projects/ProjectExtraChecksEditor.vue
diff --git a/frontend/src/components/projects/ProjectForm.vue b/frontend/src/components/projects/ProjectForm.vue
index 570db1e1..a69aa128 100644
--- a/frontend/src/components/projects/ProjectForm.vue
+++ b/frontend/src/components/projects/ProjectForm.vue
@@ -12,9 +12,9 @@ import { computed, ref, watchEffect } from 'vue';
 import { helpers, required } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
 import { type Course } from '@/types/Course.ts';
-import ProjectStructureTree from '@/components/projects/ProjectStructureTree.vue';
+import ProjectStructureTree from '@/components/projects/ProjectStructureEditor.vue';
 import { type DockerImage } from '@/types/DockerImage.ts';
-import ExtraChecksUpload from '@/components/projects/ExtraChecksUpload.vue';
+import ExtraChecksUpload from '@/components/projects/ProjectExtraChecksEditor.vue';
 
 /* Props */
 const props = defineProps<{
diff --git a/frontend/src/components/projects/ProjectStructureTree.vue b/frontend/src/components/projects/ProjectStructureEditor.vue
similarity index 100%
rename from frontend/src/components/projects/ProjectStructureTree.vue
rename to frontend/src/components/projects/ProjectStructureEditor.vue
diff --git a/frontend/src/components/projects/groups/ChooseGroupCard.vue b/frontend/src/components/projects/groups/GroupChooseCard.vue
similarity index 72%
rename from frontend/src/components/projects/groups/ChooseGroupCard.vue
rename to frontend/src/components/projects/groups/GroupChooseCard.vue
index 025c76aa..213285b1 100644
--- a/frontend/src/components/projects/groups/ChooseGroupCard.vue
+++ b/frontend/src/components/projects/groups/GroupChooseCard.vue
@@ -3,32 +3,39 @@ import Dialog from 'primevue/dialog';
 import Button from 'primevue/button';
 import DataTable from 'primevue/datatable';
 import Column from 'primevue/column';
+import Message from 'primevue/message';
 import { ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useStudents } from '@/composables/services/student.service.ts';
 import { type Group } from '@/types/Group.ts';
 import { PrimeIcons } from 'primevue/api';
 import { type Student } from '@/types/users/Student.ts';
 import { type Project } from '@/types/Project.ts';
+import { useStudents } from '@/composables/services/student.service.ts';
 
 /* Props */
 const props = defineProps<{
     project: Project;
+    groups: Group[];
     student: Student;
 }>();
 
 /* Composable injections */
 const { t } = useI18n();
-const { studentJoinGroup } = useStudents();
+const { students, getStudentsByGroup } = useStudents();
 
 /* Emits */
-const emit = defineEmits(['group-joined']);
+const emit = defineEmits(['join:group']);
 
 /* State */
 const dialogVisible = ref<boolean>(false);
 const selectedGroup = ref<Group | null>(null);
 
-watch(selectedGroup, () => {
+/* Watch the selected group for changes */
+watch(selectedGroup, async (group: Group | null) => {
+    if (group !== null) {
+        await getStudentsByGroup(group.id);
+    }
+
     dialogVisible.value = true;
 });
 
@@ -38,8 +45,7 @@ watch(selectedGroup, () => {
  */
 async function joinSelectedGroup(): Promise<void> {
     if (selectedGroup.value !== null) {
-        await studentJoinGroup(selectedGroup.value.id, props.student.id);
-        emit('group-joined', selectedGroup.value);
+        emit('join:group', selectedGroup.value, props.student);
         selectedGroup.value = null;
         dialogVisible.value = false;
     }
@@ -47,12 +53,20 @@ async function joinSelectedGroup(): Promise<void> {
 </script>
 
 <template>
-    <div class="p-4 shadow-1">
+    <div class="p-4 border-1 border-300 border-round-2xl">
         <h2 class="mt-0">
             {{ t('views.projects.chooseGroup') }}
         </h2>
-        <template v-if="project.groups !== null && project.groups.length > 0 && !project.isLocked()">
-            <DataTable :value="project.groups" v-model:selection="selectedGroup" selection-mode="single">
+        <Message severity="warn" class="my-4 text-sm" :closable="false">
+            {{ t('views.projects.chooseGroupMessage', [project.getFormattedStartDate()]) }}
+        </Message>
+        <template v-if="groups.length > 0 && !project.isLocked()">
+            <DataTable
+                :value="groups"
+                v-model:selection="selectedGroup"
+                selection-mode="single"
+                class="border-1 border-300"
+            >
                 <Column :header="t('views.projects.groupName')">
                     <template #body="{ data }">
                         {{ t('views.projects.group') }} {{ project.getGroupNumber(data) }}
@@ -75,15 +89,15 @@ async function joinSelectedGroup(): Promise<void> {
             {{ t('views.projects.noGroups') }}
         </template>
         <Dialog
-            v-if="selectedGroup !== null"
+            v-if="selectedGroup !== null && students !== null"
             v-model:visible="dialogVisible"
             modal
             :header="`${t('views.projects.group')} ${project.getGroupNumber(selectedGroup)}`"
             :style="{ width: '25rem' }"
         >
-            <template v-if="selectedGroup.students.length > 0">
-                <ul v-if="selectedGroup.students" class="mt-0">
-                    <li v-for="student in selectedGroup.students" :key="student.id">
+            <template v-if="students.length > 0">
+                <ul class="mt-0">
+                    <li v-for="student in students" :key="student.id">
                         {{ student.first_name }} {{ student.last_name }}
                     </li>
                 </ul>
diff --git a/frontend/src/components/projects/groups/JoinedGroupCard.vue b/frontend/src/components/projects/groups/GroupJoinedCard.vue
similarity index 75%
rename from frontend/src/components/projects/groups/JoinedGroupCard.vue
rename to frontend/src/components/projects/groups/GroupJoinedCard.vue
index a9425c63..8d6257a5 100644
--- a/frontend/src/components/projects/groups/JoinedGroupCard.vue
+++ b/frontend/src/components/projects/groups/GroupJoinedCard.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useStudents } from '@/composables/services/student.service.ts';
 import { useI18n } from 'vue-i18n';
 import { type Group } from '@/types/Group.ts';
 import { storeToRefs } from 'pinia';
@@ -13,26 +12,24 @@ const props = defineProps<{
 }>();
 
 /* Emits */
-const emit = defineEmits(['group-left']);
+const emit = defineEmits(['leave:group']);
 
 /* Composable injections */
 const { student } = storeToRefs(useAuthStore());
-const { studentLeaveGroup } = useStudents();
 const { t } = useI18n();
 
 /**
  * Leaves the selected group.
  */
-async function leaveSelectedGroup(): Promise<void> {
+async function leaveGroup(): Promise<void> {
     if (student.value !== null) {
-        await studentLeaveGroup(props.group.id, student.value.id);
-        emit('group-left', null);
+        emit('leave:group', props.group, student.value);
     }
 }
 </script>
 
 <template>
-    <div class="p-4 surface-50">
+    <div class="border-round p-4 surface-100 border-1 border-300">
         <h2 class="mt-0">
             {{ t('views.projects.groupMembers') }}
         </h2>
@@ -42,7 +39,7 @@ async function leaveSelectedGroup(): Promise<void> {
             </div>
         </div>
         <Button
-            @click="leaveSelectedGroup"
+            @click="leaveGroup"
             :icon="PrimeIcons.ARROW_RIGHT"
             :label="t('views.projects.leaveGroup')"
             icon-pos="right"
diff --git a/frontend/src/components/projects/groups/GroupsManageTable.vue b/frontend/src/components/projects/groups/GroupsManageTable.vue
new file mode 100644
index 00000000..65b00c68
--- /dev/null
+++ b/frontend/src/components/projects/groups/GroupsManageTable.vue
@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import DataTable, { type DataTableRowExpandEvent } from 'primevue/datatable';
+import Column from 'primevue/column';
+import AllSubmission from '@/components/submissions/AllSubmission.vue';
+import InputNumber from 'primevue/inputnumber';
+import { type Project } from '@/types/Project.ts';
+import { useStudents } from '@/composables/services/student.service.ts';
+import { ref } from 'vue';
+import { type Group } from '@/types/Group.ts';
+import { useSubmission } from '@/composables/services/submission.service.ts';
+import { useI18n } from 'vue-i18n';
+import { PrimeIcons } from 'primevue/api';
+
+/* Props */
+defineProps<{
+    project: Project;
+    groups: Group[];
+}>();
+
+/* Emits */
+const emit = defineEmits(['update:group-score']);
+
+/* Composable injections */
+const { t } = useI18n();
+const { students, getStudentsByGroup } = useStudents();
+const { submissions, getSubmissionByGroup } = useSubmission();
+
+/* State */
+const expandedRows = ref<any[]>();
+const editingGroup = ref<Group | null>();
+
+/**
+ * Updates the score of a group.
+ *
+ * @param group The group to update.
+ * @param score The new score.
+ */
+function updateGroupScore(group: Group, score: number): void {
+    emit('update:group-score', group, score);
+    editingGroup.value = null;
+}
+
+/**
+ * Logic when triggering the collapse of a row.
+ * @param event
+ */
+async function expandGroup(event: DataTableRowExpandEvent): Promise<void> {
+    // Extract the group from the event data.
+    const group: Group = event.data;
+
+    // Load the group's students.
+    await getStudentsByGroup(group.id);
+    group.students = students.value ?? [];
+
+    // Load the group's submissions.
+    await getSubmissionByGroup(group.id);
+    group.submissions = submissions.value ?? [];
+}
+</script>
+
+<template>
+    <DataTable data-key="id" :value="groups" v-model:expanded-rows="expandedRows" @row-expand="expandGroup">
+        <Column expander />
+
+        <Column :header="t('views.projects.groupName')">
+            <template #body="{ data }">
+                <i :class="PrimeIcons.TAG" class="mr-2" />{{ t('views.projects.group') }}
+                {{ project.getGroupNumber(data) }}
+            </template>
+        </Column>
+
+        <Column :header="t('views.projects.groupPopulation')">
+            <template #body="{ data }">
+                <i :class="PrimeIcons.USERS" class="mr-2" /> {{ data.getSize() }} / {{ project.group_size }}
+            </template>
+        </Column>
+
+        <Column :header="t('views.projects.groupScore')">
+            <template #body="{ data }">
+                <i :class="PrimeIcons.CHART_BAR" class="mr-2" />
+                <template v-if="editingGroup === data">
+                    <InputNumber
+                        :model-value="data.score"
+                        @change="updateGroupScore(data, $event.target.value)"
+                        @keydown.enter="updateGroupScore(data, $event.target.value)"
+                    />
+                </template>
+                <template v-else>
+                    <template v-if="data.score !== null && data.score !== undefined">
+                        {{ data.score }} / {{ project.max_score }}
+                    </template>
+                    <template v-else>
+                        {{ t('views.projects.noGroupScore') }}
+                    </template>
+                    <i :class="PrimeIcons.PENCIL" class="ml-3" @click="editingGroup = data" />
+                </template>
+            </template>
+        </Column>
+
+        <template #expansion="{ data }">
+            <div class="grid">
+                <div class="col">
+                    <h3>{{ t('views.projects.groupMembers') }}</h3>
+                    <template v-if="data.students.length > 0">
+                        <div class="flex flex-column gap-3">
+                            <div
+                                class="flex align-items-center gap-2"
+                                v-for="student in data.students"
+                                :key="student.id"
+                            >
+                                <i class="pi pi-user" /> <span>{{ student.getFullName() }}</span>
+                            </div>
+                        </div>
+                    </template>
+                    <template v-else>
+                        {{ t('views.projects.noGroupMembers') }}
+                    </template>
+                </div>
+                <div class="col">
+                    <h3>{{ t('views.projects.submissionStatus') }}</h3>
+                    <AllSubmission :submissions="data.submissions" />
+                </div>
+            </div>
+        </template>
+
+        <template #empty> </template>
+    </DataTable>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/frontend/src/components/submissions/ProjectMeter.vue b/frontend/src/components/submissions/ProjectMeter.vue
index e7e9bf83..2a5e8f58 100644
--- a/frontend/src/components/submissions/ProjectMeter.vue
+++ b/frontend/src/components/submissions/ProjectMeter.vue
@@ -23,10 +23,10 @@ const meterItems = computed(() => {
 
     return [
         {
-            value: (submissionsFailed / groups) * 100,
-            color: '#F37142',
-            label: t('components.card.testsFail'),
-            icon: 'pi pi-times',
+            value: (extraChecksPassed / groups) * 100,
+            color: '#8fb682',
+            label: t('components.card.extraTestsSucceed'),
+            icon: 'pi pi-check',
         },
         {
             value: ((structureChecksPassed - extraChecksPassed) / groups) * 100,
@@ -35,10 +35,10 @@ const meterItems = computed(() => {
             icon: 'pi pi-exclamation-circle',
         },
         {
-            value: (extraChecksPassed / groups) * 100,
-            color: '#76DD78',
-            label: t('components.card.extraTestsSucceed'),
-            icon: 'pi pi-check',
+            value: (submissionsFailed / groups) * 100,
+            color: 'indianred',
+            label: t('components.card.testsFail'),
+            icon: 'pi pi-times',
         },
     ];
 });
diff --git a/frontend/src/components/submissions/SubmissionCard.vue b/frontend/src/components/submissions/SubmissionCard.vue
index bf33f9c6..78e062d0 100644
--- a/frontend/src/components/submissions/SubmissionCard.vue
+++ b/frontend/src/components/submissions/SubmissionCard.vue
@@ -2,24 +2,18 @@
 import Button from 'primevue/button';
 import { PrimeIcons } from 'primevue/api';
 import { useI18n } from 'vue-i18n';
-import { onMounted } from 'vue';
-import { useSubmission } from '@/composables/services/submission.service.ts';
 import { type Group } from '@/types/Group.ts';
 import { type Submission } from '@/types/submission/Submission.ts';
 
 /* Composable injections */
 const { t } = useI18n();
-const { submissions, getSubmissionByGroup } = useSubmission();
 
 /* Component props */
 const props = defineProps<{
     group: Group;
+    submissions: Submission[];
 }>();
 
-onMounted(async () => {
-    await getSubmissionByGroup(props.group.id);
-});
-
 /**
  * Returns the icon name, color and hover text for the submission
  * @param submission
@@ -38,39 +32,35 @@ const parseSubmissionStatus = (submission: Submission): string => {
 </script>
 
 <template>
-    <template v-if="group.project !== null">
-        <div class="border-round surface-300 p-4">
+    <div class="border-round surface-300 p-4 border-1 border-300">
+        <h2 class="mt-0">
+            {{ t('views.projects.submissionStatus') }}
+        </h2>
+        <div class="my-4">
             <div class="mb-3">
-                <div class="mb-3">
-                    <i :class="['pi', PrimeIcons.CALENDAR_PLUS, 'icon-color']" class="mr-2"></i>
-                    {{ t('views.projects.deadline') }}: {{ group.project.getFormattedDeadline() }}<br />
-                </div>
-                <div>
-                    <i :class="['pi', PrimeIcons.INFO_CIRCLE, 'icon-color']" class="mr-2"></i>
-                    {{ t('views.projects.submissionStatus') }}:
-                    <template v-if="submissions !== null">
-                        <template v-if="submissions.length > 0">
-                            {{ parseSubmissionStatus(submissions.at(-1)!) }}
-                        </template>
-                        <template v-else>
-                            {{ t('views.submissions.noSubmissions') }}
-                        </template>
-                    </template>
-                    <template v-else>
-                        {{ t('helpers.loading') }}
-                    </template>
-                </div>
+                <i :class="['pi', PrimeIcons.CALENDAR_PLUS, 'icon-color']" class="mr-2"></i>
+                {{ t('views.projects.deadline') }}: {{ group.project.getFormattedDeadline() }}<br />
+            </div>
+            <div>
+                <i :class="['pi', PrimeIcons.INFO_CIRCLE, 'icon-color']" class="mr-2"></i>
+                {{ t('views.projects.submissionStatus') }}:
+                <template v-if="submissions.length > 0">
+                    {{ parseSubmissionStatus(submissions.at(-1)!) }}
+                </template>
+                <template v-else>
+                    {{ t('views.submissions.noSubmissions') }}
+                </template>
             </div>
-            <RouterLink
-                :to="{
-                    name: 'submission',
-                    params: { groupId: props.group.id },
-                }"
-            >
-                <Button :icon="PrimeIcons.ARROW_RIGHT" :label="t('components.submission')" icon-pos="right" outlined />
-            </RouterLink>
         </div>
-    </template>
+        <RouterLink
+            :to="{
+                name: 'submission',
+                params: { groupId: props.group.id },
+            }"
+        >
+            <Button :icon="PrimeIcons.ARROW_RIGHT" :label="t('components.submission')" icon-pos="right" outlined />
+        </RouterLink>
+    </div>
 </template>
 
 <style scoped lang="scss"></style>
diff --git a/frontend/src/composables/services/group.service.ts b/frontend/src/composables/services/group.service.ts
index 50ad2e7a..943118b7 100644
--- a/frontend/src/composables/services/group.service.ts
+++ b/frontend/src/composables/services/group.service.ts
@@ -1,7 +1,8 @@
 import { Group } from '@/types/Group.ts';
 import { type Ref, ref } from 'vue';
 import { endpoints } from '@/config/endpoints.ts';
-import { get, getList, create, deleteId } from '@/composables/services/helpers.ts';
+import { get, getList, create, deleteId, patch } from '@/composables/services/helpers.ts';
+import type { Response } from '@/types/Response.ts';
 
 interface GroupState {
     groups: Ref<Group[] | null>;
@@ -9,13 +10,16 @@ interface GroupState {
     getGroupByID: (id: string) => Promise<void>;
     getGroupsByProject: (projectId: string) => Promise<void>;
     getGroupsByStudent: (studentId: string) => Promise<void>;
+    getGroupByStudentProject: (projectId: string) => Promise<void>;
     createGroup: (groupData: Group, projectId: string) => Promise<void>;
+    updateGroup: (groupData: Partial<Group>) => Promise<void>;
     deleteGroup: (id: string) => Promise<void>;
 }
 
 export function useGroup(): GroupState {
     const groups = ref<Group[] | null>(null);
     const group = ref<Group | null>(null);
+    const response = ref<Response | null>(null);
 
     async function getGroupByID(id: string): Promise<void> {
         const endpoint = endpoints.groups.retrieve.replace('{id}', id);
@@ -32,6 +36,11 @@ export function useGroup(): GroupState {
         await getList<Group>(endpoint, groups, Group.fromJSON);
     }
 
+    async function getGroupByStudentProject(projectId: string): Promise<void> {
+        const endpoint = endpoints.groups.byProjectStudent.replace('{projectId}', projectId);
+        await get<Group>(endpoint, group, Group.fromJSON);
+    }
+
     async function createGroup(groupData: Group, projectId: string): Promise<void> {
         const endpoint = endpoints.groups.byProject.replace('{projectId}', projectId);
         await create<Group>(
@@ -45,6 +54,19 @@ export function useGroup(): GroupState {
         );
     }
 
+    async function updateGroup(groupData: Partial<Group>): Promise<void> {
+        if (groupData.id !== undefined) {
+            const endpoint = endpoints.groups.retrieve.replace('{id}', groupData.id);
+            await patch(
+                endpoint,
+                {
+                    score: groupData.score,
+                },
+                response,
+            );
+        }
+    }
+
     async function deleteGroup(id: string): Promise<void> {
         const endpoint = endpoints.groups.retrieve.replace('{id}', id);
         await deleteId<Group>(endpoint, group, Group.fromJSON);
@@ -56,8 +78,10 @@ export function useGroup(): GroupState {
         getGroupByID,
         getGroupsByProject,
         getGroupsByStudent,
+        getGroupByStudentProject,
 
         createGroup,
         deleteGroup,
+        updateGroup,
     };
 }
diff --git a/frontend/src/composables/services/helpers.ts b/frontend/src/composables/services/helpers.ts
index b5a4d1db..eff86b12 100644
--- a/frontend/src/composables/services/helpers.ts
+++ b/frontend/src/composables/services/helpers.ts
@@ -17,7 +17,10 @@ import { type Filter } from '@/types/filter/Filter.ts';
 export async function get<T>(endpoint: string, ref: Ref<T | null>, fromJson: (data: any) => T): Promise<void> {
     try {
         const response = await client.get(endpoint);
-        ref.value = fromJson(response.data);
+
+        if (response.data !== '' && response.data !== null) {
+            ref.value = fromJson(response.data);
+        }
     } catch (error: any) {
         processError(error);
         console.error(error); // Log the error for debugging
diff --git a/frontend/src/composables/services/project.service.ts b/frontend/src/composables/services/project.service.ts
index faa7c2dd..d4e59455 100644
--- a/frontend/src/composables/services/project.service.ts
+++ b/frontend/src/composables/services/project.service.ts
@@ -1,4 +1,4 @@
-import { Project } from '@/types/Project';
+import { Project, type ProjectJSON } from '@/types/Project';
 import { type Ref, ref } from 'vue';
 import { endpoints } from '@/config/endpoints.ts';
 import axios from 'axios';
@@ -55,7 +55,7 @@ export function useProject(): ProjectState {
         await axios
             .get(endpoint)
             .then((response) => {
-                const allProjects = response.data.map((projectData: Project) => Project.fromJSON(projectData));
+                const allProjects = response.data.map((projectData: ProjectJSON) => Project.fromJSON(projectData));
 
                 // Filter projects based on the deadline date
                 // Update the projects ref with the filtered projects
diff --git a/frontend/src/config/endpoints.ts b/frontend/src/config/endpoints.ts
index 006e8ecf..b4a7f269 100644
--- a/frontend/src/config/endpoints.ts
+++ b/frontend/src/config/endpoints.ts
@@ -62,6 +62,7 @@ export const endpoints = {
         retrieve: '/api/groups/{id}/',
         byProject: '/api/projects/{projectId}/groups/',
         byStudent: '/api/students/{studentId}/groups/',
+        byProjectStudent: '/api/projects/{projectId}/student-group/',
     },
     projects: {
         retrieve: '/api/projects/{id}/',
diff --git a/frontend/src/router/router.ts b/frontend/src/router/router.ts
index d47ccc7e..e2152637 100644
--- a/frontend/src/router/router.ts
+++ b/frontend/src/router/router.ts
@@ -2,7 +2,6 @@
 // TODO: after pinia setup is done
 
 import DashboardView from '@/views/dashboard/DashboardView.vue';
-import HelpDashboard from '@/views/help/HelpDashboard.vue';
 import CourseView from '@/views/courses/CourseView.vue';
 import CreateCourseView from '@/views/courses/CreateCourseView.vue';
 import UpdateCourseView from '@/views/courses/UpdateCourseView.vue';
@@ -161,50 +160,6 @@ const routes: RouteRecordRaw[] = [
         ],
     },
 
-    // help
-    {
-        path: '/help',
-        children: [
-            {
-                path: '',
-                component: HelpDashboard,
-                name: 'help-dashboard',
-            },
-            {
-                path: 'student',
-                component: Dummy,
-                name: 'help-student',
-                children: [
-                    {
-                        path: 'login-out',
-                        component: Dummy,
-                        name: 'help-student-login_out',
-                    },
-                    {
-                        path: 'change-lang',
-                        component: Dummy,
-                        name: 'help-student-change_lang',
-                    },
-                ],
-            },
-            {
-                path: 'teacher',
-                component: Dummy,
-                name: 'help-teacher',
-            },
-            {
-                path: 'assistant',
-                component: Dummy,
-                name: 'help-assistant',
-            },
-            {
-                path: 'admin',
-                component: Dummy,
-                name: 'help-admin',
-            },
-        ],
-    },
-
     // Page not found: redirect to dashboard
     { path: '/:pathMatch(.*)*', redirect: { name: 'dashboard' } },
 ];
diff --git a/frontend/src/types/Group.ts b/frontend/src/types/Group.ts
index d5f1e78f..6937470c 100644
--- a/frontend/src/types/Group.ts
+++ b/frontend/src/types/Group.ts
@@ -1,12 +1,13 @@
-import { Project, type ProjectJSON } from './Project.ts';
+import { Project } from './Project.ts';
 import { type Student } from './users/Student.ts';
 import { type Submission } from './submission/Submission.ts';
 import { type HyperlinkedRelation } from '@/types/ApiResponse.ts';
 
 export interface GroupJSON {
     id: string;
-    score: number;
-    project: ProjectJSON;
+    score?: number;
+    occupation: number;
+    project: HyperlinkedRelation;
     students: HyperlinkedRelation;
     submissions: HyperlinkedRelation;
 }
@@ -14,7 +15,8 @@ export interface GroupJSON {
 export class Group {
     constructor(
         public id: string = '',
-        public score: number = -1,
+        public score?: number | null,
+        public occupation: number = 0,
         public project: Project = new Project(),
         public students: Student[] = [],
         public submissions: Submission[] = [],
@@ -41,7 +43,11 @@ export class Group {
      * @returns {number} The size of the group.
      */
     public getSize(): number {
-        return this.students?.length ?? 0;
+        if (this.students.length > 0) {
+            return this.students.length;
+        }
+
+        return Math.max(this.students.length, this.occupation);
     }
 
     /**
@@ -50,6 +56,6 @@ export class Group {
      * @param group
      */
     static fromJSON(group: GroupJSON): Group {
-        return new Group(group.id, group.score, Project.fromJSON(group.project));
+        return new Group(group.id, group.score, group.occupation);
     }
 }
diff --git a/frontend/src/types/Project.ts b/frontend/src/types/Project.ts
index d84c685a..84cc75d8 100644
--- a/frontend/src/types/Project.ts
+++ b/frontend/src/types/Project.ts
@@ -102,9 +102,7 @@ export class Project {
      * @returns The number of the group.
      */
     public getGroupNumber(group: Group): number {
-        const groups = this.groups ?? [];
-
-        return groups.sort((a, b) => parseInt(a.id) - parseInt(b.id)).findIndex((g) => g.id === group.id) + 1;
+        return this.groups.sort((a, b) => parseInt(a.id) - parseInt(b.id)).findIndex((g) => g.id === group.id) + 1;
     }
 
     /**
@@ -114,10 +112,8 @@ export class Project {
      */
     public isLocked(): boolean {
         return (
-            !this.visible ||
-            this.archived ||
-            this.locked_groups ||
-            moment(this.start_date).isBefore(moment().startOf('day'))
+            !this.visible || this.archived || this.locked_groups
+            // moment(this.start_date).isBefore(moment().startOf('day'))
         );
     }
 
diff --git a/frontend/src/views/admin/DockerImagesView.vue b/frontend/src/views/admin/DockerImagesView.vue
index e664ac2f..bc24007e 100644
--- a/frontend/src/views/admin/DockerImagesView.vue
+++ b/frontend/src/views/admin/DockerImagesView.vue
@@ -9,9 +9,9 @@ import InputIcon from 'primevue/inputicon';
 import Column from 'primevue/column';
 import IconField from 'primevue/iconfield';
 import { useConfirm } from 'primevue/useconfirm';
-import AdminLayout from '@/components/layout/admin/AdminLayout.vue';
-import Title from '@/components/layout/Title.vue';
-import Body from '@/components/layout/Body.vue';
+import AdminLayout from '@/views/layout/admin/AdminLayout.vue';
+import Title from '@/views/layout/Title.vue';
+import Body from '@/views/layout/Body.vue';
 import LazyDataTable from '@/components/admin/LazyDataTable.vue';
 import { useDockerImages } from '@/composables/services/docker.service.ts';
 import { useFilter } from '@/composables/filters/filter.ts';
diff --git a/frontend/src/views/admin/UsersView.vue b/frontend/src/views/admin/UsersView.vue
index 3b0819bd..470d683b 100644
--- a/frontend/src/views/admin/UsersView.vue
+++ b/frontend/src/views/admin/UsersView.vue
@@ -7,9 +7,9 @@ import IconField from 'primevue/iconfield';
 import InputIcon from 'primevue/inputicon';
 import InputText from 'primevue/inputtext';
 import MultiSelect from 'primevue/multiselect';
-import AdminLayout from '@/components/layout/admin/AdminLayout.vue';
-import Title from '@/components/layout/Title.vue';
-import Body from '@/components/layout/Body.vue';
+import AdminLayout from '@/views/layout/admin/AdminLayout.vue';
+import Title from '@/views/layout/Title.vue';
+import Body from '@/views/layout/Body.vue';
 import LazyDataTable from '@/components/admin/LazyDataTable.vue';
 import { ref, onMounted, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
diff --git a/frontend/src/views/authentication/LoginView.vue b/frontend/src/views/authentication/LoginView.vue
index 3b40029d..d9f471ad 100644
--- a/frontend/src/views/authentication/LoginView.vue
+++ b/frontend/src/views/authentication/LoginView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import Button from 'primevue/button';
-import BaseLayout from '@/components/layout/base/BaseLayout.vue';
-import Title from '@/components/layout/Title.vue';
+import BaseLayout from '@/views/layout/base/BaseLayout.vue';
+import Title from '@/views/layout/Title.vue';
 import Illustration from '@/assets/img/auth/illustration.png';
 import { useI18n } from 'vue-i18n';
 import { PrimeIcons } from 'primevue/api';
diff --git a/frontend/src/views/authentication/VerifyView.vue b/frontend/src/views/authentication/VerifyView.vue
index eaf37817..22fa0cdd 100644
--- a/frontend/src/views/authentication/VerifyView.vue
+++ b/frontend/src/views/authentication/VerifyView.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import BaseLayout from '@/components/layout/base/BaseLayout.vue';
-import Title from '@/components/layout/Title.vue';
+import BaseLayout from '@/views/layout/base/BaseLayout.vue';
+import Title from '@/views/layout/Title.vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useAuthStore } from '@/store/authentication.store.ts';
 import { onMounted } from 'vue';
diff --git a/frontend/src/views/calendar/CalendarView.vue b/frontend/src/views/calendar/CalendarView.vue
index 55440ed0..f416621c 100644
--- a/frontend/src/views/calendar/CalendarView.vue
+++ b/frontend/src/views/calendar/CalendarView.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 import moment from 'moment';
-import BaseLayout from '@/components/layout/base/BaseLayout.vue';
+import BaseLayout from '@/views/layout/base/BaseLayout.vue';
 import Calendar, { type CalendarDateSlotOptions } from 'primevue/calendar';
-import Title from '@/components/layout/Title.vue';
+import Title from '@/views/layout/Title.vue';
 import ProjectCreateButton from '@/components/projects/ProjectCreateButton.vue';
 import { useProject } from '@/composables/services/project.service';
 import { computed, ref, watch } from 'vue';
diff --git a/frontend/src/views/courses/CourseView.vue b/frontend/src/views/courses/CourseView.vue
index 7efcfbc9..8b0a910b 100644
--- a/frontend/src/views/courses/CourseView.vue
+++ b/frontend/src/views/courses/CourseView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import BaseLayout from '@/components/layout/base/BaseLayout.vue';
+import BaseLayout from '@/views/layout/base/BaseLayout.vue';
 import StudentCourseView from './roles/StudentCourseView.vue';
 import TeacherCourseView from './roles/TeacherCourseView.vue';
 import AssistantCourseView from './roles/AssistantCourseView.vue';
diff --git a/frontend/src/views/courses/CreateCourseView.vue b/frontend/src/views/courses/CreateCourseView.vue
index abfd0be5..20cf69e4 100644
--- a/frontend/src/views/courses/CreateCourseView.vue
+++ b/frontend/src/views/courses/CreateCourseView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import CourseForm from '@/components/courses/CourseForm.vue';
-import Title from '@/components/layout/Title.vue';
-import BaseLayout from '@/components/layout/base/BaseLayout.vue';
+import Title from '@/views/layout/Title.vue';
+import BaseLayout from '@/views/layout/base/BaseLayout.vue';
 import Loading from '@/components/Loading.vue';
 import { useI18n } from 'vue-i18n';
 import { onMounted, ref } from 'vue';
diff --git a/frontend/src/views/courses/JoinCourseView.vue b/frontend/src/views/courses/JoinCourseView.vue
index 659845e3..16e4b00f 100644
--- a/frontend/src/views/courses/JoinCourseView.vue
+++ b/frontend/src/views/courses/JoinCourseView.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import BaseLayout from '@/components/layout/base/BaseLayout.vue';
-import Title from '@/components/layout/Title.vue';
+import BaseLayout from '@/views/layout/base/BaseLayout.vue';
+import Title from '@/views/layout/Title.vue';
 import Button from 'primevue/button';
-import TeacherAssistantList from '@/components/teachers_assistants/TeacherAssistantList.vue';
+import TeacherAssistantList from '@/components/instructors/TeacherAssistantList.vue';
 import ConfirmDialog from 'primevue/confirmdialog';
 import { useConfirm } from 'primevue/useconfirm';
 import { onMounted, computed } from 'vue';
diff --git a/frontend/src/views/courses/SearchCourseView.vue b/frontend/src/views/courses/SearchCourseView.vue
index 5ce3f0a1..63fe0809 100644
--- a/frontend/src/views/courses/SearchCourseView.vue
+++ b/frontend/src/views/courses/SearchCourseView.vue
@@ -6,8 +6,8 @@ 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/base/BaseLayout.vue';
+import Title from '@/views/layout/Title.vue';
+import BaseLayout from '@/views/layout/base/BaseLayout.vue';
 import CourseGeneralList from '@/components/courses/CourseGeneralList.vue';
 import { onMounted } from 'vue';
 import { useCourses } from '@/composables/services/course.service.ts';
diff --git a/frontend/src/views/courses/UpdateCourseView.vue b/frontend/src/views/courses/UpdateCourseView.vue
index fa1f44ea..04fe61b4 100644
--- a/frontend/src/views/courses/UpdateCourseView.vue
+++ b/frontend/src/views/courses/UpdateCourseView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import BaseLayout from '@/components/layout/base/BaseLayout.vue';
+import BaseLayout from '@/views/layout/base/BaseLayout.vue';
 import CourseForm from '@/components/courses/CourseForm.vue';
-import Title from '@/components/layout/Title.vue';
+import Title from '@/views/layout/Title.vue';
 import Loading from '@/components/Loading.vue';
 import { ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
diff --git a/frontend/src/views/courses/roles/AssistantCourseView.vue b/frontend/src/views/courses/roles/AssistantCourseView.vue
index 4b513b01..786c0644 100644
--- a/frontend/src/views/courses/roles/AssistantCourseView.vue
+++ b/frontend/src/views/courses/roles/AssistantCourseView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import Title from '@/components/layout/Title.vue';
+import Title from '@/views/layout/Title.vue';
 import ProjectList from '@/components/projects/ProjectList.vue';
-import TeacherAssistantList from '@/components/teachers_assistants/TeacherAssistantList.vue';
+import TeacherAssistantList from '@/components/instructors/TeacherAssistantList.vue';
 import ProjectCreateButton from '@/components/projects/ProjectCreateButton.vue';
 import { type Course } from '@/types/Course.ts';
 import { useI18n } from 'vue-i18n';
diff --git a/frontend/src/views/courses/roles/StudentCourseView.vue b/frontend/src/views/courses/roles/StudentCourseView.vue
index 8de95c12..d796ff62 100644
--- a/frontend/src/views/courses/roles/StudentCourseView.vue
+++ b/frontend/src/views/courses/roles/StudentCourseView.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import Title from '@/components/layout/Title.vue';
+import Title from '@/views/layout/Title.vue';
 import Button from 'primevue/button';
 import ProjectList from '@/components/projects/ProjectList.vue';
-import TeacherAssistantList from '@/components/teachers_assistants/TeacherAssistantList.vue';
+import TeacherAssistantList from '@/components/instructors/TeacherAssistantList.vue';
 import { type Course } from '@/types/Course.ts';
 import { useI18n } from 'vue-i18n';
 import ConfirmDialog from 'primevue/confirmdialog';
diff --git a/frontend/src/views/courses/roles/TeacherCourseView.vue b/frontend/src/views/courses/roles/TeacherCourseView.vue
index 7e36c30f..da248804 100644
--- a/frontend/src/views/courses/roles/TeacherCourseView.vue
+++ b/frontend/src/views/courses/roles/TeacherCourseView.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import Title from '@/components/layout/Title.vue';
+import Title from '@/views/layout/Title.vue';
 import ProjectList from '@/components/projects/ProjectList.vue';
-import TeacherAssistantList from '@/components/teachers_assistants/TeacherAssistantList.vue';
+import TeacherAssistantList from '@/components/instructors/TeacherAssistantList.vue';
 import ProjectCreateButton from '@/components/projects/ProjectCreateButton.vue';
-import TeacherAssistantUpdateButton from '@/components/teachers_assistants/TeacherAssistantUpdateButton.vue';
+import TeacherAssistantUpdateButton from '@/components/instructors/TeacherAssistantUpdateButton.vue';
 import ShareCourseButton from '@/components/courses/ShareCourseButton.vue';
 import Button from 'primevue/button';
 import ButtonGroup from 'primevue/buttongroup';
diff --git a/frontend/src/views/dashboard/DashboardView.vue b/frontend/src/views/dashboard/DashboardView.vue
index fda04b28..9ec8ca43 100644
--- a/frontend/src/views/dashboard/DashboardView.vue
+++ b/frontend/src/views/dashboard/DashboardView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import BaseLayout from '@/components/layout/base/BaseLayout.vue';
+import BaseLayout from '@/views/layout/base/BaseLayout.vue';
 import { useAuthStore } from '@/store/authentication.store.ts';
 import { storeToRefs } from 'pinia';
 import StudentDashboardView from '@/views/dashboard/roles/StudentDashboardView.vue';
diff --git a/frontend/src/views/dashboard/roles/AssistantDashboardView.vue b/frontend/src/views/dashboard/roles/AssistantDashboardView.vue
index e58fc3db..da757c23 100644
--- a/frontend/src/views/dashboard/roles/AssistantDashboardView.vue
+++ b/frontend/src/views/dashboard/roles/AssistantDashboardView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Title from '@/components/layout/Title.vue';
+import Title from '@/views/layout/Title.vue';
 import YearSelector from '@/components/YearSelector.vue';
 import CourseList from '@/components/courses/CourseDetailList.vue';
 import ProjectList from '@/components/projects/ProjectList.vue';
diff --git a/frontend/src/views/dashboard/roles/StudentDashboardView.vue b/frontend/src/views/dashboard/roles/StudentDashboardView.vue
index 11a29f6b..c29d479f 100644
--- a/frontend/src/views/dashboard/roles/StudentDashboardView.vue
+++ b/frontend/src/views/dashboard/roles/StudentDashboardView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Title from '@/components/layout/Title.vue';
+import Title from '@/views/layout/Title.vue';
 import YearSelector from '@/components/YearSelector.vue';
 import CourseList from '@/components/courses/CourseDetailList.vue';
 import ProjectList from '@/components/projects/ProjectList.vue';
diff --git a/frontend/src/views/dashboard/roles/TeacherDashboardView.vue b/frontend/src/views/dashboard/roles/TeacherDashboardView.vue
index 6f0faf55..1c23bfbb 100644
--- a/frontend/src/views/dashboard/roles/TeacherDashboardView.vue
+++ b/frontend/src/views/dashboard/roles/TeacherDashboardView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import ButtonGroup from 'primevue/buttongroup';
 import Button from 'primevue/button';
-import Title from '@/components/layout/Title.vue';
+import Title from '@/views/layout/Title.vue';
 import YearSelector from '@/components/YearSelector.vue';
 import CourseList from '@/components/courses/CourseDetailList.vue';
 import ProjectList from '@/components/projects/ProjectList.vue';
diff --git a/frontend/src/views/help/HelpDashboard.vue b/frontend/src/views/help/HelpDashboard.vue
deleted file mode 100644
index 94cd8dcf..00000000
--- a/frontend/src/views/help/HelpDashboard.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<script setup lang="ts">
-import HelpBaseLayout from '@/components/help/HelpBaseLayout.vue';
-import Menu from 'primevue/menu';
-import { RouterLink } from 'vue-router';
-// TODO add menu
-
-const itemsStudent = [
-    { label: 'login-logout', route: '/help/student/login-out' },
-    { label: 'verander taal', route: '/help/student/change-lang' },
-    // Add more sidebar items as needed
-];
-
-const items = itemsStudent;
-</script>
-
-<template>
-    <HelpBaseLayout>
-        <div>
-            <Menu :model="items" class="w-full md:w-15rem">
-                <template #start>
-                    <span class="inline-flex align-items-center gap-1 px-2 py-2">
-                        <svg
-                            width="35"
-                            height="40"
-                            viewBox="0 0 35 40"
-                            fill="none"
-                            xmlns="http://www.w3.org/2000/svg"
-                            class="h-2rem"
-                        >
-                            <path d="..." fill="var(--primary-color)" />
-                            <path d="..." fill="var(--text-color)" />
-                        </svg>
-                        <span class="font-medium text-xl font-semibold"><span class="text-primary">YPOVOLI</span></span>
-                    </span>
-                </template>
-                <template #submenuheader="{ item }">
-                    <span class="text-primary font-bold">{{ item.label }}</span>
-                </template>
-                <template #item="{ item, props }">
-                    <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
-                        <a v-ripple :href="href" v-bind="props.action" @click="navigate">
-                            <span :class="item.icon" />
-                            <span class="ml-2">{{ item.label }}</span>
-                            <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-                            <span
-                                v-if="item.shortcut"
-                                class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1"
-                                >{{ item.shortcut }}</span
-                            >
-                        </a>
-                    </router-link>
-                </template>
-            </Menu>
-        </div>
-    </HelpBaseLayout>
-</template>
-
-<style scoped></style>
diff --git a/frontend/src/components/layout/Body.vue b/frontend/src/views/layout/Body.vue
similarity index 100%
rename from frontend/src/components/layout/Body.vue
rename to frontend/src/views/layout/Body.vue
diff --git a/frontend/src/views/layout/Footer.vue b/frontend/src/views/layout/Footer.vue
new file mode 100644
index 00000000..788ed456
--- /dev/null
+++ b/frontend/src/views/layout/Footer.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import en from '@/assets/img/logo-en.png';
+import nl from '@/assets/img/logo-nl.png';
+import { useI18n } from 'vue-i18n';
+
+/* Translation composable */
+const { t, locale } = useI18n();
+
+/* Available localized images */
+const logo: Record<string, string> = { nl, en };
+</script>
+
+<template>
+    <div id="footer" class="p-6 py-4 mt-auto text-md">
+        <div class="w-full flex flex-column md:flex-row justify-content-between align-items-center gap-4 py-3">
+            <!-- Logo -->
+            <img class="w-full max-w-9rem" :src="logo[locale]" :alt="t('layout.header.logo')" />
+
+            <div class="flex flex-column gap-3 justify-content-center">
+                <!-- Links and Company Info -->
+                <div class="flex flex-column md:flex-row align-items-center gap-3">
+                    <a class="text-md">{{ t('layout.footer.home') }}</a>
+                    <a class="text-md">{{ t('layout.footer.about') }}</a>
+                    <a class="text-md">{{ t('layout.footer.contact') }}</a>
+                    <a class="text-md">{{ t('layout.footer.privacy') }}</a>
+                </div>
+
+                <!-- Social Media Icons -->
+                <div class="flex align-items-center text-primary gap-3">
+                    <a class="text-md text-primary">
+                        <i class="pi pi-discord"></i>
+                    </a>
+                    <a class="text-md text-primary" href="https://github.com/tyboro2002">
+                        <i class="pi pi-github"></i>
+                    </a>
+                    <a class="text-md text-primary" href="https://paypal.me/ewiev">
+                        <i class="pi pi-paypal"></i>
+                    </a>
+                    <a class="text-md text-primary" href="https://www.facebook.com/profile.php?id=100015599597182">
+                        <i class="pi pi-facebook"></i>
+                    </a>
+                    <a class="text-md text-primary">
+                        <i class="pi pi-twitter"></i>
+                    </a>
+                    <a class="text-md text-primary">
+                        <i class="pi pi-instagram"></i>
+                    </a>
+                    <a class="text-md text-primary" href="https://www.linkedin.com/in/vincent-vallaeys-855637309/">
+                        <i class="pi pi-linkedin"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="text-center p-2 text-sm surface-100">
+        <span>&copy; {{ new Date().getFullYear() }} Ypovoli. {{ t('layout.footer.rights') }}</span>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+#footer {
+    background: var(--primary-color-light);
+}
+</style>
diff --git a/frontend/src/components/layout/Title.vue b/frontend/src/views/layout/Title.vue
similarity index 100%
rename from frontend/src/components/layout/Title.vue
rename to frontend/src/views/layout/Title.vue
diff --git a/frontend/src/components/layout/admin/AdminHeader.vue b/frontend/src/views/layout/admin/AdminHeader.vue
similarity index 100%
rename from frontend/src/components/layout/admin/AdminHeader.vue
rename to frontend/src/views/layout/admin/AdminHeader.vue
diff --git a/frontend/src/components/layout/admin/AdminLayout.vue b/frontend/src/views/layout/admin/AdminLayout.vue
similarity index 70%
rename from frontend/src/components/layout/admin/AdminLayout.vue
rename to frontend/src/views/layout/admin/AdminLayout.vue
index 8d32f0c0..38a32c58 100644
--- a/frontend/src/components/layout/admin/AdminLayout.vue
+++ b/frontend/src/views/layout/admin/AdminLayout.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import Footer from '@/components/layout/Footer.vue';
-import Body from '@/components/layout/Body.vue';
-import AdminHeader from '@/components/layout/admin/AdminHeader.vue';
+import Footer from '@/views/layout/Footer.vue';
+import Body from '@/views/layout/Body.vue';
+import AdminHeader from '@/views/layout/admin/AdminHeader.vue';
 </script>
 
 <template>
diff --git a/frontend/src/components/layout/admin/AdminSidebar.vue b/frontend/src/views/layout/admin/AdminSidebar.vue
similarity index 100%
rename from frontend/src/components/layout/admin/AdminSidebar.vue
rename to frontend/src/views/layout/admin/AdminSidebar.vue
diff --git a/frontend/src/components/layout/base/BaseHeader.vue b/frontend/src/views/layout/base/BaseHeader.vue
similarity index 100%
rename from frontend/src/components/layout/base/BaseHeader.vue
rename to frontend/src/views/layout/base/BaseHeader.vue
diff --git a/frontend/src/components/layout/base/BaseLayout.vue b/frontend/src/views/layout/base/BaseLayout.vue
similarity index 69%
rename from frontend/src/components/layout/base/BaseLayout.vue
rename to frontend/src/views/layout/base/BaseLayout.vue
index 4bf48401..cc598a03 100644
--- a/frontend/src/components/layout/base/BaseLayout.vue
+++ b/frontend/src/views/layout/base/BaseLayout.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import Header from '@/components/layout/base/BaseHeader.vue';
-import Body from '@/components/layout/Body.vue';
-import Footer from '@/components/layout/Footer.vue';
+import Header from '@/views/layout/base/BaseHeader.vue';
+import Body from '@/views/layout/Body.vue';
+import Footer from '@/views/layout/Footer.vue';
 </script>
 
 <template>
diff --git a/frontend/src/views/projects/CreateProjectView.vue b/frontend/src/views/projects/CreateProjectView.vue
index 314880e4..d0f9ec08 100644
--- a/frontend/src/views/projects/CreateProjectView.vue
+++ b/frontend/src/views/projects/CreateProjectView.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import BaseLayout from '@/components/layout/base/BaseLayout.vue';
-import Title from '@/components/layout/Title.vue';
+import BaseLayout from '@/views/layout/base/BaseLayout.vue';
+import Title from '@/views/layout/Title.vue';
 import { ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
diff --git a/frontend/src/views/projects/ProjectView.vue b/frontend/src/views/projects/ProjectView.vue
index da42bd9a..98bb9285 100644
--- a/frontend/src/views/projects/ProjectView.vue
+++ b/frontend/src/views/projects/ProjectView.vue
@@ -1,63 +1,39 @@
 <script setup lang="ts">
 import StudentProjectView from '@/views/projects/roles/StudentProjectView.vue';
 import TeacherProjectView from '@/views/projects/roles/TeacherProjectView.vue';
-import AssistantProjectView from '@/views/projects/roles/AssistantProjectView.vue';
-import BaseLayout from '@/components/layout/base/BaseLayout.vue';
-import { useAuthStore } from '@/store/authentication.store.ts';
-import { storeToRefs } from 'pinia';
+import BaseLayout from '@/views/layout/base/BaseLayout.vue';
+import Button from 'primevue/button';
 import { type Student } from '@/types/users/Student';
 import { type Teacher } from '@/types/users/Teacher';
 import { type Assistant } from '@/types/users/Assistant';
-import { useProject } from '@/composables/services/project.service.ts';
 import { useRoute } from 'vue-router';
-import { watch } from 'vue';
-import { useGroup } from '@/composables/services/group.service.ts';
-import { useStudents } from '@/composables/services/student.service.ts';
+import { PrimeIcons } from 'primevue/api';
+import { useI18n } from 'vue-i18n';
+import { storeToRefs } from 'pinia';
+import { useAuthStore } from '@/store/authentication.store.ts';
 
 /* Service injection */
-const { params } = useRoute();
 const { user } = storeToRefs(useAuthStore());
-const { project, getProjectByID } = useProject();
-const { groups, getGroupsByProject } = useGroup();
-const { students, getStudentsByGroup } = useStudents();
-
-/* Watch the query parameters for changes */
-watch(
-    () => params,
-    async (params) => {
-        const projectId = params.projectId as string;
-
-        if (projectId !== '') {
-            // Get the project by the ID param.
-            await getProjectByID(projectId);
-
-            // Get the groups of the project.
-            await getGroupsByProject(projectId);
-
-            if (project.value !== null && groups.value !== null) {
-                project.value.groups = groups.value;
-
-                // Fill the students with each group.
-                for (const group of groups.value) {
-                    await getStudentsByGroup(group.id);
-                    group.students = students.value ?? [];
-                    group.project = project.value;
-                }
-            }
-        }
-    },
-    {
-        immediate: true,
-    },
-);
+const { params } = useRoute();
+const { t } = useI18n();
 </script>
 
 <template>
     <BaseLayout>
-        <StudentProjectView v-if="user?.isStudent()" :student="user as Student" :project="project" />
-        <TeacherProjectView v-else-if="user?.isTeacher()" :teacher="user as Teacher" :project="project" />
-        <AssistantProjectView v-else-if="user?.isAssistant()" :assistant="user as Assistant" :project="project" />
+        <RouterLink :to="{ name: 'course', params: { courseId: params.courseId } }">
+            <Button
+                class="mb-4 p-0 text-sm text-black-alpha-70"
+                :icon="PrimeIcons.ARROW_LEFT"
+                :label="t('views.projects.backToCourse')"
+                link
+            />
+        </RouterLink>
+        <template v-if="user !== null">
+            <StudentProjectView v-if="user.isStudent()" :student="user as Student"> </StudentProjectView>
+            <TeacherProjectView v-else-if="user.isTeacher()" :teacher="user as Teacher"> </TeacherProjectView>
+            <TeacherProjectView v-else-if="user.isAssistant()" :teacher="user as Assistant"> </TeacherProjectView>
+        </template>
     </BaseLayout>
 </template>
 
-<style scoped></style>
+<style lang="scss" scoped></style>
diff --git a/frontend/src/views/projects/ProjectsView.vue b/frontend/src/views/projects/ProjectsView.vue
index deb66007..48611dd9 100644
--- a/frontend/src/views/projects/ProjectsView.vue
+++ b/frontend/src/views/projects/ProjectsView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import ProjectList from '@/components/projects/ProjectList.vue';
-import BaseLayout from '@/components/layout/base/BaseLayout.vue';
-import Title from '@/components/layout/Title.vue';
+import BaseLayout from '@/views/layout/base/BaseLayout.vue';
+import Title from '@/views/layout/Title.vue';
 import { watch } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useAuthStore } from '@/store/authentication.store.ts';
diff --git a/frontend/src/views/projects/UpdateProjectView.vue b/frontend/src/views/projects/UpdateProjectView.vue
index 6d7dadf4..2cdd1532 100644
--- a/frontend/src/views/projects/UpdateProjectView.vue
+++ b/frontend/src/views/projects/UpdateProjectView.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import BaseLayout from '@/components/layout/base/BaseLayout.vue';
-import Title from '@/components/layout/Title.vue';
+import BaseLayout from '@/views/layout/base/BaseLayout.vue';
+import Title from '@/views/layout/Title.vue';
 import ProjectForm from '@/components/projects/ProjectForm.vue';
 import Loading from '@/components/Loading.vue';
 import { ref } from 'vue';
diff --git a/frontend/src/views/projects/roles/StudentProjectView.vue b/frontend/src/views/projects/roles/StudentProjectView.vue
index e9c595b4..b3ab8784 100644
--- a/frontend/src/views/projects/roles/StudentProjectView.vue
+++ b/frontend/src/views/projects/roles/StudentProjectView.vue
@@ -1,98 +1,167 @@
 <script setup lang="ts">
-import ChooseGroupCard from '@/components/projects/groups/ChooseGroupCard.vue';
-import JoinedGroupCard from '@/components/projects/groups/JoinedGroupCard.vue';
+import ChooseGroupCard from '@/components/projects/groups/GroupChooseCard.vue';
+import JoinedGroupCard from '@/components/projects/groups/GroupJoinedCard.vue';
 import SubmissionCard from '@/components/submissions/SubmissionCard.vue';
 import ProjectInfo from '@/components/projects/ProjectInfo.vue';
-import Title from '@/components/layout/Title.vue';
-import Skeleton from 'primevue/skeleton';
-import { computed, watch } from 'vue';
+import Title from '@/views/layout/Title.vue';
+import Loading from '@/components/Loading.vue';
+import { ref } from 'vue';
 import { useGroup } from '@/composables/services/group.service.ts';
 import { type Group } from '@/types/Group.ts';
 import { type Student } from '@/types/users/Student.ts';
+import { watchImmediate } from '@vueuse/core';
+import { useStudents } from '@/composables/services/student.service.ts';
+import { useSubmission } from '@/composables/services/submission.service.ts';
+import { useProject } from '@/composables/services/project.service.ts';
+import { useRoute } from 'vue-router';
 import { type Project } from '@/types/Project.ts';
 
 /* Props */
-const props = defineProps<{
+defineProps<{
     student: Student;
-    project: Project | null;
 }>();
 
 /* Composable injections */
-const { groups, getGroupsByStudent } = useGroup();
-
-/* Component state */
-const group = computed(() => {
-    if (groups.value !== null && props.project !== null) {
-        const studentGroups = groups.value;
-
-        if (studentGroups !== null) {
-            return (
-                props.project.groups?.find((projectGroup: Group) =>
-                    studentGroups.some((studentGroup: Group) => studentGroup.id === projectGroup.id),
-                ) ?? null
-            );
-        }
+const { params } = useRoute();
+const { group, groups, getGroupByStudentProject, getGroupsByProject } = useGroup();
+const { students, getStudentsByGroup, studentJoinGroup, studentLeaveGroup } = useStudents();
+const { project, getProjectByID } = useProject();
+const { submissions, getSubmissionByGroup } = useSubmission();
+
+/* State */
+const loadingGroup = ref<boolean>(true);
+
+/**
+ * Join a group.
+ *
+ * @param newGroup The group to join.
+ * @param student The student joining the group.
+ */
+async function joinGroup(newGroup: Group, student: Student): Promise<void> {
+    await studentJoinGroup(newGroup.id, student.id);
 
-        return null;
+    if (project.value !== null) {
+        await getStudentData(project.value);
     }
+}
 
-    return undefined;
-});
+/**
+ * Leave a group.
+ *
+ * @param newGroup The group to leave.
+ * @param student The student leaving the group.
+ */
+async function leaveGroup(newGroup: Group, student: Student): Promise<void> {
+    await studentLeaveGroup(newGroup.id, student.id);
 
-/* Watch the student and project ID for changes */
-watch(() => [props.student], loadStudentGroups, {
-    immediate: true,
-});
+    if (project.value !== null) {
+        group.value = null;
+    }
+}
 
 /**
- * Loads the data for the project view.
+ * Get the student's group.
+ *
+ * @param project The project to get the group for.
  */
-async function loadStudentGroups(): Promise<void> {
-    // Get the groups of the given student.
-    await getGroupsByStudent(props.student.id);
+async function getStudentData(project: Project): Promise<void> {
+    loadingGroup.value = true;
+    await getGroupByStudentProject(project.id);
+
+    if (group.value !== null) {
+        // Load the group's submissions.
+        await getSubmissionByGroup(group.value.id);
+
+        // Load the group's students.
+        await getStudentsByGroup(group.value.id);
+
+        if (students.value !== null) {
+            group.value.students = students.value;
+        }
+    }
+
+    loadingGroup.value = false;
+}
+
+/**
+ * Get the project's groups.
+ *
+ * @param project The project to get the groups for.
+ */
+async function getProjectData(project: Project): Promise<void> {
+    await getGroupsByProject(project.id);
+
+    if (groups.value !== null) {
+        project.groups = groups.value;
+    }
 }
+
+/* Load the project groups. */
+watchImmediate(
+    () => params,
+    async () => {
+        // Load the project.
+        await getProjectByID(params.projectId.toString());
+
+        if (project.value !== null) {
+            // Load the student's group.
+            await getStudentData(project.value);
+
+            // Load the project's groups.
+            await getProjectData(project.value);
+        }
+    },
+);
 </script>
 
 <template>
     <template v-if="project !== null">
-        <Title class="mb-5">
-            {{ project.name }}
-        </Title>
+        <div class="fadein">
+            <Title class="mb-5">
+                {{ project.name }}
+            </Title>
+            <div class="grid">
+                <div class="col-12 md:col-8">
+                    <ProjectInfo class="mb-3" :project="project" />
+                    <div v-if="project" v-html="project.description" />
+                </div>
+                <div class="col-12 md:col-4">
+                    <template v-if="!loadingGroup">
+                        <template v-if="group === null && groups !== null">
+                            <div class="fadein">
+                                <ChooseGroupCard
+                                    :project="project"
+                                    :groups="groups"
+                                    :student="student"
+                                    @join:group="joinGroup"
+                                />
+                            </div>
+                        </template>
+                        <template v-else>
+                            <template v-if="submissions !== null && group !== null">
+                                <div class="fadein">
+                                    <SubmissionCard class="mb-3" :group="group" :submissions="submissions">
+                                    </SubmissionCard>
+                                    <JoinedGroupCard
+                                        v-if="project.group_size !== 1"
+                                        :group="group"
+                                        @leave:group="leaveGroup"
+                                    >
+                                    </JoinedGroupCard>
+                                </div>
+                            </template>
+                        </template>
+                    </template>
+                    <template v-else>
+                        <Loading height="70vh" />
+                    </template>
+                </div>
+            </div>
+        </div>
     </template>
     <template v-else>
-        <Skeleton class="mb-4" height="3rem" width="30rem" />
+        <Loading height="70vh" />
     </template>
-    <div class="grid">
-        <div class="col-12 md:col-8">
-            <template v-if="project !== null">
-                <ProjectInfo class="mb-3" :project="project" />
-                <div v-if="project" v-html="project.description" />
-            </template>
-            <template v-else>
-                <Skeleton height="4rem" class="mb-3" />
-                <Skeleton height="10rem" />
-            </template>
-        </div>
-        <div class="col-12 md:col-4">
-            <template v-if="project !== null && group !== undefined">
-                <template v-if="group === null">
-                    <ChooseGroupCard :project="project" :student="student" @group-joined="loadStudentGroups" />
-                </template>
-                <template v-else>
-                    <SubmissionCard class="mb-3" :group="group" />
-                    <JoinedGroupCard
-                        v-if="project.group_size !== 1"
-                        :group="group"
-                        @group-left="loadStudentGroups"
-                    ></JoinedGroupCard>
-                </template>
-            </template>
-            <template v-else>
-                <Skeleton height="10rem" class="mb-3" />
-                <Skeleton height="30rem" />
-            </template>
-        </div>
-    </div>
 </template>
 
 <style scoped lang="scss"></style>
diff --git a/frontend/src/views/projects/roles/TeacherProjectView.vue b/frontend/src/views/projects/roles/TeacherProjectView.vue
index 20df9dd4..7628e2fe 100644
--- a/frontend/src/views/projects/roles/TeacherProjectView.vue
+++ b/frontend/src/views/projects/roles/TeacherProjectView.vue
@@ -1,55 +1,141 @@
 <script setup lang="ts">
-import Title from '@/components/layout/Title.vue';
-import Skeleton from 'primevue/skeleton';
+import Title from '@/views/layout/Title.vue';
 import Button from 'primevue/button';
-import { type Teacher } from '@/types/users/Teacher.ts';
-import { type Project } from '@/types/Project.ts';
+import ButtonGroup from 'primevue/buttongroup';
 import ProjectInfo from '@/components/projects/ProjectInfo.vue';
-import DownloadCSVButton from '@/components/projects/DownloadCSVButton.vue';
+import DownloadCSVButton from '@/components/projects/ProjectDownloadGradesButton.vue';
 import ProjectMeter from '@/components/submissions/ProjectMeter.vue';
+import GroupsManageTable from '@/components/projects/groups/GroupsManageTable.vue';
+import Loading from '@/components/Loading.vue';
+import { type Teacher } from '@/types/users/Teacher.ts';
 import { PrimeIcons } from 'primevue/api';
+import { useI18n } from 'vue-i18n';
+import { useGroup } from '@/composables/services/group.service.ts';
+import { watchImmediate } from '@vueuse/core';
+import { useProject } from '@/composables/services/project.service.ts';
+import { useRoute } from 'vue-router';
+import { useMessagesStore } from '@/store/messages.store.ts';
+import { type Group } from '@/types/Group.ts';
+import { type Assistant } from '@/types/users/Assistant.ts';
 
 /* Props */
 defineProps<{
-    teacher: Teacher;
-    project: Project | null;
+    teacher: Teacher | Assistant;
 }>();
+
+/* Composables */
+const { t } = useI18n();
+const { params } = useRoute();
+const { addSuccessMessage } = useMessagesStore();
+const { project, getProjectByID, updateProject } = useProject();
+const { groups, getGroupsByProject, updateGroup } = useGroup();
+
+/**
+ * Updates the score of a group.
+ *
+ * @param group The group to update.
+ * @param score The new score.
+ */
+async function updateGroupScore(group: Group, score: number): Promise<void> {
+    group.score = score;
+
+    await updateGroup({
+        ...group,
+        score,
+    });
+}
+
+/**
+ * Publishes the scores of the project.
+ */
+async function publishScores(): Promise<void> {
+    if (project.value !== null) {
+        project.value.score_visible = true;
+
+        try {
+            await updateProject(project.value);
+            addSuccessMessage(t('toasts.messages.success'), t('views.projects.scoresPublished'));
+        } catch (error) {
+            console.log(error);
+        }
+    }
+}
+
+/* Load the project groups. */
+watchImmediate(
+    () => params,
+    async () => {
+        await getProjectByID(params.projectId.toString());
+
+        if (project.value !== null) {
+            await getGroupsByProject(project.value.id);
+
+            if (groups.value !== null) {
+                project.value.groups = groups.value;
+            }
+        }
+    },
+);
 </script>
 
 <template>
     <template v-if="project !== null">
-        <div class="flex align-items-center justify-content-between gap-3">
-            <Title class="mb-5">
-                {{ project.name }}
-            </Title>
-            <RouterLink :to="{ name: 'project-edit', params: { courseId: project.course.id, projectId: project.id } }">
-                <Button label="Bewerk project" :icon="PrimeIcons.PENCIL"> </Button>
-            </RouterLink>
+        <div class="fadein">
+            <div class="flex align-items-center justify-content-between gap-3">
+                <Title class="mb-5">
+                    {{ project.name }}
+                </Title>
+                <RouterLink
+                    :to="{ name: 'project-edit', params: { courseId: project.course.id, projectId: project.id } }"
+                >
+                    <Button :label="t('views.projects.edit')" :icon="PrimeIcons.PENCIL"> </Button>
+                </RouterLink>
+            </div>
+            <div class="grid">
+                <div class="col-12 md:col-8">
+                    <ProjectInfo class="mb-3" :project="project" />
+                    <h2>
+                        {{ t('views.projects.groups') }}
+                    </h2>
+                    <template v-if="groups !== null">
+                        <div class="fadein">
+                            <GroupsManageTable
+                                :project="project"
+                                :groups="groups"
+                                @update:group-score="updateGroupScore"
+                            />
+                            <ButtonGroup class="flex mt-4">
+                                <Button
+                                    :icon="PrimeIcons.UPLOAD"
+                                    :disabled="project.score_visible"
+                                    :label="t('views.projects.publishScores')"
+                                    @click="publishScores"
+                                />
+                                <DownloadCSVButton
+                                    :project="project"
+                                    :groups="groups"
+                                    :icon="PrimeIcons.DOWNLOAD"
+                                    outlined
+                                />
+                            </ButtonGroup>
+                        </div>
+                    </template>
+                    <template v-else>
+                        <Loading height="70vh" />
+                    </template>
+                </div>
+                <div class="col-12 md:col-4">
+                    <h2 class="mt-0">
+                        {{ t('views.projects.submissionStatus') }}
+                    </h2>
+                    <ProjectMeter :project="project" />
+                </div>
+            </div>
         </div>
     </template>
     <template v-else>
-        <Skeleton class="mb-4" height="3rem" width="30rem" />
+        <Loading height="70vh" />
     </template>
-    <div class="grid">
-        <div class="col-12 md:col-8">
-            <template v-if="project !== null">
-                <ProjectInfo class="mb-3" :project="project" />
-                <div v-if="project" v-html="project.description" />
-            </template>
-            <template v-else>
-                <Skeleton height="4rem" />
-                <Skeleton height="10rem" />
-            </template>
-        </div>
-        <div class="col-12 md:col-4">
-            <ProjectMeter :project="project" />
-        </div>
-        <div class="col-12 md:col-4">
-            <template v-if="project !== null">
-                <DownloadCSVButton :project="project" />
-            </template>
-        </div>
-    </div>
 </template>
 
 <style scoped lang="scss"></style>
diff --git a/frontend/src/views/submissions/SubmissionView.vue b/frontend/src/views/submissions/SubmissionView.vue
index 48cecc0f..7771ac21 100644
--- a/frontend/src/views/submissions/SubmissionView.vue
+++ b/frontend/src/views/submissions/SubmissionView.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import BaseLayout from '@/components/layout/base/BaseLayout.vue';
-import Title from '@/components/layout/Title.vue';
+import BaseLayout from '@/views/layout/base/BaseLayout.vue';
+import Title from '@/views/layout/Title.vue';
 import Button from 'primevue/button';
 import { useI18n } from 'vue-i18n';
 import { onMounted, ref } from 'vue';