diff --git a/backend/api/fixtures/groups.yaml b/backend/api/fixtures/groups.yaml
index 8d2a18b7..7b989dda 100644
--- a/backend/api/fixtures/groups.yaml
+++ b/backend/api/fixtures/groups.yaml
@@ -6,12 +6,36 @@
     students:
     - '1'
     - '2'
+    - '000200694919'
 - model: api.group
   pk: 3
   fields:
-    project: 123456
+    project: 2
     score: 8
     students: []
+- model: api.group
+  pk: 4
+  fields:
+    project: 2
+    score: 8
+    students:
+      - '1'
+- model: api.group
+  pk: 5
+  fields:
+    project: 2
+    score: 8
+    students:
+      - '2'
+
+- model: api.group
+  pk: 6
+  fields:
+    project: 2
+    score: 8
+    students:
+        - '3'
+
 - model: api.group
   pk: 2
   fields:
@@ -21,3 +45,4 @@
       - '1'
       - '2'
       - '3'
+      - '000200694919'
diff --git a/backend/api/fixtures/projects.yaml b/backend/api/fixtures/projects.yaml
index 6e16ad73..4099cbbc 100644
--- a/backend/api/fixtures/projects.yaml
+++ b/backend/api/fixtures/projects.yaml
@@ -1,7 +1,7 @@
 - model: api.project
   pk: 123456
   fields:
-    name: sel2
+    name: sel1
     description: make a project
     visible: true
     archived: false
@@ -22,3 +22,16 @@
     group_size: 3
     max_score: 20
     course: 1
+
+- model: api.project
+  pk: 2
+  fields:
+    name: sel2
+    description: make a project, but better and more fun than the previous one because it's the second one and we learned from the first one
+    visible: true
+    archived: false
+    start_date: 2024-02-26 00:00:00+00:00
+    deadline: 2024-02-27 00:00:00+00:00
+    group_size: 3
+    max_score: 20
+    course: 1
\ No newline at end of file
diff --git a/backend/api/fixtures/students.yaml b/backend/api/fixtures/students.yaml
index be45618b..2508b355 100644
--- a/backend/api/fixtures/students.yaml
+++ b/backend/api/fixtures/students.yaml
@@ -12,6 +12,12 @@
       - 1
 - model: api.student
   pk: '3'
+  fields:
+    student_id: null
+    courses:
+      - 1
+- model: api.student
+  pk: '000200694919'
   fields:
     student_id: null
     courses:
diff --git a/backend/api/fixtures/submissions.yaml b/backend/api/fixtures/submissions.yaml
index 3cb123db..aeb50e3f 100644
--- a/backend/api/fixtures/submissions.yaml
+++ b/backend/api/fixtures/submissions.yaml
@@ -12,6 +12,21 @@
     submission_number: 2
     submission_time: "2021-01-02T00:00:00Z"
     structure_checks_passed: True
+- model: api.submission
+  pk: 3
+  fields:
+    group: 4
+    submission_number: 1
+    submission_time: "2021-01-02T00:00:00Z"
+    structure_checks_passed: True
+- model: api.submission
+  pk: 4
+  fields:
+    group: 4
+    submission_number: 2
+    submission_time: "2021-01-02T00:00:00Z"
+    structure_checks_passed: True
+
 
 - model: api.submissionfile
   pk: 1
diff --git a/backend/api/permissions/group_permissions.py b/backend/api/permissions/group_permissions.py
index 64eea5b1..c8739a4f 100644
--- a/backend/api/permissions/group_permissions.py
+++ b/backend/api/permissions/group_permissions.py
@@ -22,8 +22,8 @@ def has_object_permission(self, request: Request, view: ViewSet, group) -> bool:
         """Check if user has permission to view a detailed group endpoint"""
         user: User = request.user
         course = group.project.course
-        teacher_or_assitant = is_teacher(user) and user.teacher.courses.filter(id=course.id).exists() or \
-            is_assistant(user) and user.assistant.courses.filter(id=course.id).exists()
+        teacher_or_assitant = is_teacher(user) and user.teacher.courses.filter(
+            id=course.id).exists() or is_assistant(user) and user.assistant.courses.filter(id=course.id).exists()
 
         if request.method in SAFE_METHODS:
             # Users that are linked to the course can view the group.
@@ -39,8 +39,8 @@ class GroupStudentPermission(BasePermission):
     def has_object_permission(self, request: Request, view: ViewSet, group) -> bool:
         user: User = request.user
         course = group.project.course
-        teacher_or_assitant = is_teacher(user) and user.teacher.courses.filter(id=course.id).exists() or \
-            is_assistant(user) and user.assistant.courses.filter(id=course.id).exists()
+        teacher_or_assitant = is_teacher(user) and user.teacher.courses.filter(
+            id=course.id).exists() or is_assistant(user) and user.assistant.courses.filter(id=course.id).exists()
 
         if request.method in SAFE_METHODS:
             # Users related to the course can view the students of the group.
@@ -53,3 +53,22 @@ def has_object_permission(self, request: Request, view: ViewSet, group) -> bool:
 
         # Teachers and assistants can add and remove any student from a group
         return teacher_or_assitant
+
+
+class GroupSubmissionPermission(BasePermission):
+    """Permission class for submission related group endpoints"""
+
+    def had_object_permission(self, request: Request, view: ViewSet, group) -> bool:
+        user: User = request.user
+        course = group.project.course
+        teacher_or_assitant = is_teacher(user) and user.teacher.courses.filter(
+            id=course.id).exists() or is_assistant(user) and user.assistant.courses.filter(id=course.id).exists()
+        if request.method in SAFE_METHODS:
+            # Users related to the group can view the submissions of the group
+            return teacher_or_assitant or (is_student(user) and user.student.groups.filter(id=group.id).exists())
+
+        # Student can only add submissions to there own group
+        if is_student(user) and request.data.get("student_id") == user.id and view.action == "create":
+            return user.student.course.filter(id=course.id).exists()
+
+        # Removing a Submissions is not possible for teachers and assistants
diff --git a/backend/api/views/group_view.py b/backend/api/views/group_view.py
index 65dd2488..156f7b55 100644
--- a/backend/api/views/group_view.py
+++ b/backend/api/views/group_view.py
@@ -6,7 +6,7 @@
 from rest_framework.response import Response
 from drf_yasg.utils import swagger_auto_schema
 from api.models.group import Group
-from api.permissions.group_permissions import GroupPermission
+from api.permissions.group_permissions import GroupPermission, GroupSubmissionPermission
 from api.permissions.group_permissions import GroupStudentPermission
 from api.serializers.group_serializer import GroupSerializer
 from api.serializers.student_serializer import StudentSerializer
@@ -38,7 +38,7 @@ def students(self, request, **_):
         )
         return Response(serializer.data)
 
-    @action(detail=True, permission_classes=[IsAdminUser])
+    @action(detail=True, permission_classes=[IsAdminUser | GroupSubmissionPermission])
     def submissions(self, request, **_):
         """Returns a list of submissions for the given group"""
         group = self.get_object()
diff --git a/backend/authentication/fixtures/users.yaml b/backend/authentication/fixtures/users.yaml
index f0edbaa9..45c08856 100644
--- a/backend/authentication/fixtures/users.yaml
+++ b/backend/authentication/fixtures/users.yaml
@@ -82,3 +82,15 @@
     create_time: 2024-02-29 20:35:45.688545+00:00
     faculties:
     - Psychologie_PedagogischeWetenschappen
+- model: authentication.user
+  pk: '000200694919'
+  fields:
+    last_login: null
+    username: landmaes
+    email: lander.maes@ugent.be
+    first_name: Lander
+    last_name: Maes
+    last_enrolled: 2023
+    create_time: 2024-02-29 20:35:45.688545+00:00
+    faculties:
+      - Wetenschappen
\ No newline at end of file
diff --git a/frontend/src/assets/lang/en.json b/frontend/src/assets/lang/en.json
index 5a5da5d3..bfea42df 100644
--- a/frontend/src/assets/lang/en.json
+++ b/frontend/src/assets/lang/en.json
@@ -8,6 +8,7 @@
                 "dashboard": "Dashboard",
                 "calendar": "Calendar",
                 "courses": "courses",
+                "projects": "projects",
                 "settings": "preferences",
                 "help": "help"
             },
@@ -41,7 +42,11 @@
         "projects": {
             "deadline": "Deadline",
             "submissionStatus": "Indienstatus",
+            "group": "Group",
             "groupMembers": "Group members",
+            "chooseGroup": "Choose a group",
+            "joinGroup": "Join group",
+            "leaveGroup": "Leave group",
             "create": "Create new project",
             "name": "Project name",
             "description": "Description",
@@ -51,6 +56,12 @@
             "visibility": "Make project visible to students",
             "score_visibility": "Make score, when uploaded, automatically visible to students"
         },
+        "submissions": {
+            "title": "Submissions",
+            "submit": "Submit",
+            "course": "Course",
+            "chooseFile": "Choose a file"
+        },
         "courses": {
             "create": "Create course",
             "name": "Course name",
@@ -80,7 +91,8 @@
         },
         "card": {
             "open": "details"
-        }
+        },
+        "submission": "Submit"
     },
     "types": {
         "roles": {
diff --git a/frontend/src/assets/lang/nl.json b/frontend/src/assets/lang/nl.json
index 38c5579c..ea528cf0 100644
--- a/frontend/src/assets/lang/nl.json
+++ b/frontend/src/assets/lang/nl.json
@@ -8,6 +8,7 @@
                 "dashboard": "Dashboard",
                 "calendar": "Kalender",
                 "courses": "Vakken",
+                "projects": "Projecten",
                 "settings": "Voorkeuren",
                 "help": "Help"
             },
@@ -41,7 +42,11 @@
         "projects": {
             "deadline": "Deadline",
             "submissionStatus": "Indienstatus",
+            "group": "Groep",
             "groupMembers": "Groepsleden",
+            "chooseGroup": "Kies een groep",
+            "joinGroup": "Kies groep",
+            "leaveGroup": "Verlaat groep",
             "create": "Creëer nieuw project",
             "name": "Projectnaam",
             "description": "Beschrijving",
@@ -51,6 +56,12 @@
             "visibility": "Project zichtbaar maken voor studenten",
             "score_visibility": "Maak score, wanneer ingevuld, automatisch zichtbaar voor studenten"
         },
+        "submissions": {
+            "title": "Inzendingen",
+            "submit": "Indienen",
+            "course": "Vak",
+            "chooseFile": "Kies bestand(en)"
+        },
         "courses": {
           "create": "Creëer vak",
           "name": "Vaknaam",
@@ -89,7 +100,8 @@
         },
         "card": {
             "open": "Details"
-        }
+        },
+        "submission" : "Indienen"
     },
     "types": {
         "roles": {
diff --git a/frontend/src/assets/scss/theme/_variables.scss b/frontend/src/assets/scss/theme/_variables.scss
index 70a12627..3df21c0f 100644
--- a/frontend/src/assets/scss/theme/_variables.scss
+++ b/frontend/src/assets/scss/theme/_variables.scss
@@ -32,6 +32,7 @@ $fontWeight:normal !default;
 $textColor:$shade700 !default;
 $textSecondaryColor:$shade600 !default;
 $borderRadius:6px !default;
+$borderWidth:2px !default;
 $transitionDuration:.2s !default;
 $formElementTransition:background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default;
 $actionIconTransition:background-color $transitionDuration, color $transitionDuration, box-shadow $transitionDuration !default;
diff --git a/frontend/src/assets/scss/theme/base/components/file/_fileupload.scss b/frontend/src/assets/scss/theme/base/components/file/_fileupload.scss
index 674e1273..804f56a0 100644
--- a/frontend/src/assets/scss/theme/base/components/file/_fileupload.scss
+++ b/frontend/src/assets/scss/theme/base/components/file/_fileupload.scss
@@ -1,15 +1,15 @@
 // core
 .p-fileupload-content {
     position: relative;
-}
-
-.p-fileupload-content .p-progressbar {
     width: 100%;
-    position: absolute;
     top: 0;
     left: 0;
 }
 
+.p-progressbar {
+    display: none;
+}
+
 .p-button.p-fileupload-choose {
     position: relative;
     overflow: hidden;
@@ -46,6 +46,7 @@
 // theme
 .p-fileupload {
     .p-fileupload-buttonbar {
+        justify-content: space-between;
         background: $panelHeaderBg;
         padding: $panelHeaderPadding;
         border: $panelHeaderBorder;
diff --git a/frontend/src/components/layout/Header.vue b/frontend/src/components/layout/Header.vue
index 72615863..86156ab2 100644
--- a/frontend/src/components/layout/Header.vue
+++ b/frontend/src/components/layout/Header.vue
@@ -39,6 +39,11 @@ const items = computed(() => [
         label: t('layout.header.navigation.courses'),
         route: 'courses',
     },
+    {
+        icon: 'file-plus',
+        label: t('layout.header.navigation.projects'),
+        route: 'projects',
+    },
 ]);
 </script>
 
diff --git a/frontend/src/components/projects/ChooseGroupCard.vue b/frontend/src/components/projects/ChooseGroupCard.vue
new file mode 100644
index 00000000..38100a49
--- /dev/null
+++ b/frontend/src/components/projects/ChooseGroupCard.vue
@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import Dialog from 'primevue/dialog';
+import { useStudents } from '@/composables/services/students.service.ts';
+import { storeToRefs } from 'pinia';
+import { useAuthStore } from '@/store/authentication.store.ts';
+import { type Group } from '@/types/Group.ts';
+import { PrimeIcons } from 'primevue/api';
+import Button from 'primevue/button';
+
+/* Props */
+defineProps<{
+    groups: Group[];
+}>();
+
+/* Composable injections */
+const { t } = useI18n();
+const { student } = storeToRefs(useAuthStore());
+const { students, getStudentsByGroup, studentJoinGroup } = useStudents();
+
+/* Emits */
+const emit = defineEmits(['group-joined']);
+
+/* State */
+const dialogVisible = ref<boolean>(false);
+const selectedGroup = ref<Group | null>(null);
+
+/**
+ * Shows the group dialog.
+ *
+ * @param group
+ */
+async function showGroupDialog(group: Group): Promise<void> {
+    selectedGroup.value = group;
+    await getStudentsByGroup(group.id);
+    dialogVisible.value = true;
+}
+
+/**
+ * Joins the selected group.
+ *
+ */
+async function joinSelectedGroup(): Promise<void> {
+    if (selectedGroup.value !== null && student.value !== null) {
+        await studentJoinGroup(selectedGroup.value.id, student.value.id);
+        dialogVisible.value = false;
+        emit('group-joined', selectedGroup.value);
+    }
+}
+</script>
+
+<template>
+    <div>
+        <div class="groupcard">
+            <h2>{{ t('views.projects.chooseGroup') }}</h2>
+            <div v-if="groups">
+                <button
+                    class="groupSelectionButton p-3"
+                    v-for="group in groups"
+                    :key="group.id"
+                    @click="showGroupDialog(group)"
+                >
+                    {{ t('views.projects.group') }} {{ group.id }}
+                </button>
+            </div>
+            <Dialog
+                v-model:visible="dialogVisible"
+                modal
+                :header="`${t('views.projects.group')} ${selectedGroup?.id}`"
+                :style="{ width: '25rem' }"
+            >
+                <ul v-if="students">
+                    <li v-for="student in students" :key="student.id">
+                        {{ student.first_name }} {{ student.last_name }}
+                    </li>
+                </ul>
+                <Button
+                    class="mt-3"
+                    @click="joinSelectedGroup"
+                    :icon="PrimeIcons.ARROW_RIGHT"
+                    :label="t('views.projects.joinGroup')"
+                    icon-pos="right"
+                    outlined
+                />
+            </Dialog>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+@import '@/assets/scss/theme/theme.scss';
+.groupSelectionButton {
+    display: block;
+    background: none;
+    border: none;
+    text-align: left;
+    font-size: $fontSize;
+    padding: 0.5rem 1rem;
+    cursor: pointer;
+    color: $textSecondaryColor;
+    margin-bottom: 0.5rem;
+    border-bottom: 1px solid #e0e0e0;
+    :last-child {
+        border-bottom: none;
+    }
+}
+.groupSelectionButton:last-child {
+    border-bottom: none;
+}
+</style>
diff --git a/frontend/src/components/projects/GroupCard.vue b/frontend/src/components/projects/GroupCard.vue
deleted file mode 100644
index 2b0a418c..00000000
--- a/frontend/src/components/projects/GroupCard.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<script setup lang="ts">
-import { useStudents } from '@/composables/services/students.service.ts';
-import { onMounted } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { type Group } from '@/types/Group.ts';
-
-/* Props */
-const props = defineProps<{
-    group: Group;
-}>();
-
-/* Composable injections */
-const { students, getStudentsByGroup } = useStudents();
-const { t } = useI18n();
-
-onMounted(async () => {
-    await getStudentsByGroup(props.group.id);
-});
-</script>
-
-<template>
-    <div>
-        <div class="groupcard">
-            <h2>{{ t('views.projects.groupMembers') }}</h2>
-            <div>
-                <p v-for="student in students" :key="student.id">{{ student.first_name }} {{ student.last_name }}</p>
-            </div>
-        </div>
-    </div>
-</template>
-
-<style scoped lang="scss">
-@import '@/assets/scss/theme/theme.scss';
-.groupcard {
-    background-color: white;
-    border-radius: $borderRadius;
-    padding: 1.5rem;
-    margin: 1rem;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-
-    div {
-        p {
-            color: $textSecondaryColor;
-            margin-bottom: 0.5rem;
-            padding-bottom: 0.5rem;
-            border-bottom: 1px solid #e0e0e0;
-        }
-
-        /* Zorgt ervoor dat er geen lijn onder de laatste naam staat */
-        p:last-child {
-            border-bottom: none;
-        }
-    }
-}
-</style>
diff --git a/frontend/src/components/projects/JoinedGroupCard.vue b/frontend/src/components/projects/JoinedGroupCard.vue
new file mode 100644
index 00000000..59236d65
--- /dev/null
+++ b/frontend/src/components/projects/JoinedGroupCard.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { useStudents } from '@/composables/services/students.service.ts';
+import { onMounted, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { type Group } from '@/types/Group.ts';
+import { storeToRefs } from 'pinia';
+import { useAuthStore } from '@/store/authentication.store.ts';
+import { PrimeIcons } from 'primevue/api';
+import Button from 'primevue/button';
+
+/* Props */
+const props = defineProps<{
+    group: Group;
+}>();
+
+/* Emits */
+const emit = defineEmits(['group-left']);
+
+/* Composable injections */
+const { student } = storeToRefs(useAuthStore());
+const { students, getStudentsByGroup, studentLeaveGroup } = useStudents();
+const { t } = useI18n();
+
+watch(
+    () => props.group,
+    async (newGroup) => {
+        await getStudentsByGroup(newGroup.id);
+    },
+    { deep: true, immediate: true },
+);
+
+/**
+ * Leaves the selected group.
+ */
+async function leaveSelectedGroup(): Promise<void> {
+    if (student.value !== null) {
+        await studentLeaveGroup(props.group.id, student.value.id);
+        emit('group-left', null);
+    }
+}
+
+onMounted(async () => {
+    await getStudentsByGroup(props.group.id);
+});
+</script>
+
+<template>
+    <div class="groupcard">
+        <h2>{{ t('views.projects.groupMembers') }}</h2>
+        <div class="mt-4">
+            <p v-for="student in students" :key="student.id">{{ student.first_name }} {{ student.last_name }}</p>
+        </div>
+        <Button
+            class="mt-3"
+            @click="leaveSelectedGroup"
+            :icon="PrimeIcons.ARROW_RIGHT"
+            :label="t('views.projects.leaveGroup')"
+            icon-pos="right"
+            outlined
+        />
+    </div>
+</template>
+
+<style lang="scss">
+@import '@/assets/scss/theme/theme.scss';
+
+.groupcard {
+    background-color: white;
+    border-radius: $borderRadius;
+    padding: $cardBodyPadding;
+    border-style: solid;
+    border-color: $primaryLightColor;
+    border-width: $borderWidth;
+    color: $primaryColor;
+
+    div {
+        p {
+            color: $textSecondaryColor;
+            padding-bottom: 1rem;
+            margin-bottom: 1rem;
+            border-bottom: 1px solid #e0e0e0;
+        }
+
+        /* Zorgt ervoor dat er geen lijn onder de laatste naam staat */
+        p:last-child {
+            border-bottom: none;
+            padding-bottom: 0;
+        }
+    }
+}
+</style>
diff --git a/frontend/src/components/projects/ProjectCard.vue b/frontend/src/components/projects/ProjectCard.vue
index 628b329b..83009f55 100644
--- a/frontend/src/components/projects/ProjectCard.vue
+++ b/frontend/src/components/projects/ProjectCard.vue
@@ -48,7 +48,7 @@ const { t } = useI18n();
         <template #footer>
             <RouterLink
                 :to="{
-                    name: 'project',
+                    name: 'courseProject',
                     params: {
                         courseId: course.id,
                         projectId: project.id,
@@ -65,7 +65,7 @@ const { t } = useI18n();
 @import '@/assets/scss/theme/theme.scss';
 .icon-color {
     color: $primaryColor;
-    font-size: 18px;
+    font-size: $fontSize;
 }
 
 .border-round {
@@ -74,7 +74,7 @@ const { t } = useI18n();
 
 .project-card {
     border-style: solid;
-    border-width: 2px;
+    border-width: $borderWidth;
     border-color: $primaryLightColor;
 
     .p-card-body {
diff --git a/frontend/src/components/projects/ProjectList.vue b/frontend/src/components/projects/ProjectList.vue
index 03fcc07a..54470237 100644
--- a/frontend/src/components/projects/ProjectList.vue
+++ b/frontend/src/components/projects/ProjectList.vue
@@ -22,6 +22,13 @@ const { projects, getProjectsByCourse } = useProject();
 /* State */
 const allProjects = computed(() => props.courses.flatMap((course) => course.projects));
 
+/**
+ * Sorts the projects by deadline
+ */
+const sortedProjects = computed(() =>
+    [...allProjects.value].sort((a, b) => new Date(a.deadline).getTime() - new Date(b.deadline).getTime()),
+);
+
 watch(
     () => props.courses,
     async (courses: Course[]) => {
@@ -47,7 +54,7 @@ watch(
 <template>
     <template v-if="allProjects.length > 0">
         <div class="grid align-items-stretch">
-            <div class="col-12 md:col-6 lg:col-4 xl:col-3" v-for="project in allProjects" :key="project.id">
+            <div class="col-12 md:col-6 lg:col-4 xl:col-3" v-for="project in sortedProjects" :key="project.id">
                 <ProjectCard class="h-100" :project="project" :course="project.course" />
             </div>
         </div>
diff --git a/frontend/src/components/projects/SubmissionCard.vue b/frontend/src/components/projects/SubmissionCard.vue
new file mode 100644
index 00000000..365730a8
--- /dev/null
+++ b/frontend/src/components/projects/SubmissionCard.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+/* Component props */
+import { type Project } from '@/types/Projects.ts';
+import { PrimeIcons } from 'primevue/api';
+import Card from 'primevue/card';
+import { useI18n } from 'vue-i18n';
+import { computed, onMounted } from 'vue';
+import { useSubmission } from '@/composables/services/submission.service.ts';
+import { type Group } from '@/types/Group.ts';
+import Button from 'primevue/button';
+
+const { t } = useI18n();
+const { submissions, getSubmissionByGroup } = useSubmission();
+
+const props = defineProps<{
+    project: Project;
+    group: Group;
+}>();
+
+onMounted(async () => {
+    await getSubmissionByGroup(props.group.id);
+});
+
+const formattedDeadline = computed(() => {
+    // changes deadline format to dd/mm.yyyy
+    const date = new Date(props.project.deadline);
+    return `${date.getDate()}/${date.getMonth() + 1}/${date.getFullYear()}`;
+});
+</script>
+
+<template>
+    <Card class="border-round project-card">
+        <template #content>
+            <div>
+                <div class="mb-3">
+                    <i :class="['pi', PrimeIcons.CALENDAR_PLUS, 'icon-color']" class="mr-2"></i>
+                    {{ t('views.projects.deadline') }}: {{ formattedDeadline }}<br />
+                </div>
+                <div>
+                    <i :class="['pi', PrimeIcons.INFO_CIRCLE, 'icon-color']" class="mr-2"></i>
+                    {{ t('views.projects.submissionStatus') }}:
+                    {{ submissions ? submissions.at(-1)?.structure_checks_passed : 'false' }}
+                </div>
+            </div>
+        </template>
+        <template #footer>
+            <RouterLink :to="{ name: 'submission' }">
+                <Button :icon="PrimeIcons.ARROW_RIGHT" :label="t('components.submission')" icon-pos="right" outlined />
+            </RouterLink>
+        </template>
+    </Card>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/frontend/src/router/router.ts b/frontend/src/router/router.ts
index 095f2842..0b201eb9 100644
--- a/frontend/src/router/router.ts
+++ b/frontend/src/router/router.ts
@@ -1,7 +1,9 @@
+// import { useUserStore } from '@/stores/userStore';
+// TODO: after pinia setup is done
+
 import DashboardView from '@/views/dashboard/DashboardView.vue';
 import CourseView from '@/views/courses/CourseView.vue';
 import CreateCourseView from '@/views/courses/CreateCourseView.vue';
-import CreateProjectView from '@/views/projects/CreateProjectView.vue';
 import Dummy from '@/components/Dummy.vue';
 import LoginView from '@/views/authentication/LoginView.vue';
 import CalendarView from '@/views/calendar/CalendarView.vue';
@@ -10,7 +12,10 @@ import { type RouteRecordRaw, createWebHistory, createRouter } from 'vue-router'
 import { AuthenticationGuard } from '@/router/guards/authentication.guard.ts';
 import { LogoutGuard } from '@/router/guards/logout.guard.ts';
 import ProjectView from '@/views/projects/ProjectView.vue';
+import CreateProjectView from '@/views/projects/CreateProjectView.vue';
 import SearchCourseView from '@/views/courses/SearchCourseView.vue';
+import SubmissionView from '@/views/submissions/submissionView.vue';
+import SingleProjectView from '@/views/projects/SingleProjectView.vue';
 
 const routes: RouteRecordRaw[] = [
     // Authentication
@@ -43,18 +48,19 @@ const routes: RouteRecordRaw[] = [
                     { path: 'edit', component: Dummy, name: 'course-edit' },
                     // Projects
                     {
-                        path: 'projects',
+                        path: 'courseProjects',
                         children: [
-                            { path: '', component: Dummy, name: 'projects' },
+                            { path: '', component: Dummy, name: 'courseProjects' },
                             { path: 'create', component: CreateProjectView, name: 'project-create' },
                             // Single project
                             {
                                 path: ':projectId',
                                 children: [
-                                    { path: '', component: ProjectView, name: 'project' },
+                                    { path: '', component: SingleProjectView, name: 'courseProject' },
                                     { path: 'edit', component: Dummy, name: 'project-edit' },
                                     { path: 'groups', component: Dummy, name: 'project-groups' },
                                     { path: 'submit', component: Dummy, name: 'project-submit' },
+                                    { path: 'submission', component: SubmissionView, name: 'submission' },
                                 ],
                             },
                         ],
@@ -67,6 +73,9 @@ const routes: RouteRecordRaw[] = [
     // Calendar
     { path: '/calendar', component: CalendarView, name: 'calendar' },
 
+    // Projects
+    { path: '/projects', component: ProjectView, name: 'projects' },
+
     // Users
     {
         path: '/users',
diff --git a/frontend/src/types/Submission.ts b/frontend/src/types/Submission.ts
index c0193c26..abc46dc5 100644
--- a/frontend/src/types/Submission.ts
+++ b/frontend/src/types/Submission.ts
@@ -5,7 +5,7 @@ export class Submission {
         public id: string,
         public submission_number: number,
         public submission_time: Date,
-        public structureChecks_passed: boolean,
+        public structure_checks_passed: boolean,
         public group: Group | null = null,
         public files: File[] = [], // TODO check
         public extra_checks_results: any[] = [], // TODO
@@ -21,7 +21,7 @@ export class Submission {
             submission.id,
             submission.submission_number,
             new Date(submission.submission_time),
-            submission.structureChecks_passed,
+            submission.structure_checks_passed,
         );
     }
 }
diff --git a/frontend/src/views/projects/ProjectView.vue b/frontend/src/views/projects/ProjectView.vue
index 536c984b..d3ef4c47 100644
--- a/frontend/src/views/projects/ProjectView.vue
+++ b/frontend/src/views/projects/ProjectView.vue
@@ -1,76 +1,42 @@
 <script setup lang="ts">
 import BaseLayout from '@/components/layout/BaseLayout.vue';
-import { ref, watch } from 'vue';
-import { useProject } from '@/composables/services/project.service.ts';
-import { useRoute } from 'vue-router';
-import Title from '@/components/layout/Title.vue';
-import Skeleton from 'primevue/skeleton';
-import GroupCard from '@/components/projects/GroupCard.vue';
-import { useGroup } from '@/composables/services/groups.service.ts';
-import { type Group } from '@/types/Group.ts';
-import { useAuthStore } from '@/store/authentication.store.ts';
+import { useCourses } from '@/composables/services/courses.service.ts';
+import { computed, onMounted, ref } from 'vue';
 import { storeToRefs } from 'pinia';
+import { useAuthStore } from '@/store/authentication.store.ts';
+import ProjectList from '@/components/projects/ProjectList.vue';
+import Title from '@/components/layout/Title.vue';
+import { useI18n } from 'vue-i18n';
+import YearSelector from '@/components/YearSelector.vue';
+import { User } from '@/types/users/User.ts';
 
-/* Composable injections */
-const route = useRoute();
-const { student } = storeToRefs(useAuthStore());
-const { project, getProjectByID } = useProject();
-const { groups, getGroupsByProject, getGroupsByStudent } = useGroup();
-
-/* Component state */
-const group = ref<Group | null>(null);
-
-watch(
-    student,
-    async () => {
-        if (student.value !== null) {
-            const projectId = route.params.projectId as string;
-            await getProjectByID(projectId.toString());
-            await getGroupsByProject(projectId.toString());
+const { t } = useI18n();
+const { user } = storeToRefs(useAuthStore());
+const { courses, getCoursesByStudent } = useCourses();
 
-            // Check if the student is in a group for the project
-            const projectGroups = groups.value;
-            await getGroupsByStudent('1');
+const selectedYear = ref<number>(User.getAcademicYear());
 
-            for (const studentGroup of groups.value ?? []) {
-                const isCommonGroup = projectGroups?.some((projectGroup) => projectGroup.id === studentGroup.id);
+onMounted(async () => {
+    if (user.value?.id != null) {
+        await getCoursesByStudent(user.value.id);
+    }
+});
 
-                if (isCommonGroup === true) {
-                    group.value = studentGroup;
-                    break;
-                }
-            }
-        }
-    },
-    {
-        immediate: true,
-    },
+const filteredCourses = computed(
+    () => courses.value?.filter((course) => course.academic_startyear === selectedYear.value) ?? [],
 );
 </script>
 
 <template>
     <BaseLayout>
-        <div class="grid">
-            <div class="col-12 md:col-8">
-                <div>
-                    <Title v-if="project">
-                        {{ project.name }}
-                    </Title>
-                    <Skeleton class="mb-4" height="3rem" width="30rem" v-else />
-                </div>
-                <div>
-                    <p v-if="project">
-                        {{ project.description }}
-                    </p>
-                    <Skeleton height="10rem" v-else />
-                </div>
-            </div>
-            <div class="col-12 md:col-4">
-                <GroupCard :group="group" v-if="group"></GroupCard>
-
-                <Skeleton height="20rem" v-else />
-            </div>
+        <!-- Project heading -->
+        <div class="flex justify-content-between align-items-center mb-6">
+            <!-- Project list title -->
+            <Title class="m-0">{{ t('views.dashboard.projects') }}</Title>
+            <YearSelector :years="user?.academic_years" v-model="selectedYear" />
         </div>
+
+        <ProjectList v-if="filteredCourses" :courses="filteredCourses" />
     </BaseLayout>
 </template>
 
diff --git a/frontend/src/views/projects/SingleProjectView.vue b/frontend/src/views/projects/SingleProjectView.vue
new file mode 100644
index 00000000..930c402b
--- /dev/null
+++ b/frontend/src/views/projects/SingleProjectView.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import BaseLayout from '@/components/layout/BaseLayout.vue';
+import { useAuthStore } from '@/store/authentication.store.ts';
+import { storeToRefs } from 'pinia';
+import { type Student } from '@/types/users/Student';
+import { type Teacher } from '@/types/users/Teacher';
+import { type Assistant } from '@/types/users/Assistant';
+import StudentProjectView from '@/views/projects/roles/StudentProjectView.vue';
+import TeacherProjectView from '@/views/projects/roles/TeacherProjectView.vue';
+import AssistantProjectView from '@/views/projects/roles/AssistantProjectView.vue';
+
+/* Service injection */
+const { user } = storeToRefs(useAuthStore());
+</script>
+
+<template>
+    <BaseLayout>
+        <StudentProjectView v-if="user?.isStudent()" :student="user as Student" />
+        <TeacherProjectView v-else-if="user?.isTeacher()" :teacher="user as Teacher" />
+        <AssistantProjectView v-else-if="user?.isAssistant()" :assistant="user as Assistant" />
+    </BaseLayout>
+</template>
+
+<style scoped></style>
diff --git a/frontend/src/views/projects/roles/AssistantProjectView.vue b/frontend/src/views/projects/roles/AssistantProjectView.vue
new file mode 100644
index 00000000..b57c793b
--- /dev/null
+++ b/frontend/src/views/projects/roles/AssistantProjectView.vue
@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>Not implemented</template>
+
+<style scoped lang="scss"></style>
diff --git a/frontend/src/views/projects/roles/StudentProjectView.vue b/frontend/src/views/projects/roles/StudentProjectView.vue
new file mode 100644
index 00000000..27a91f06
--- /dev/null
+++ b/frontend/src/views/projects/roles/StudentProjectView.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import ChooseGroupCard from '@/components/projects/ChooseGroupCard.vue';
+import JoinedGroupCard from '@/components/projects/JoinedGroupCard.vue';
+import Title from '@/components/layout/Title.vue';
+import Skeleton from 'primevue/skeleton';
+import { onMounted, ref } from 'vue';
+import { useProject } from '@/composables/services/project.service.ts';
+import { useRoute } from 'vue-router';
+import { useGroup } from '@/composables/services/groups.service.ts';
+import { type Group } from '@/types/Group.ts';
+import { useAuthStore } from '@/store/authentication.store.ts';
+import { storeToRefs } from 'pinia';
+import { type Student } from '@/types/users/Student.ts';
+import SubmissionCard from '@/components/projects/SubmissionCard.vue';
+
+/* Composable injections */
+const route = useRoute();
+const { student } = storeToRefs(useAuthStore());
+const { project, getProjectByID } = useProject();
+const { groups, getGroupsByProject, getGroupsByStudent } = useGroup();
+
+/* Component state */
+const group = ref<Group | null>(null);
+const projectGroups = ref<Group[]>([]);
+
+/**
+ * Handles the group changed event.
+ *
+ * @param joinedGroupData
+ */
+function handleGroupChanged(joinedGroupData: Group): void {
+    group.value = joinedGroupData;
+}
+
+onMounted(async () => {
+    if (student.value !== null) {
+        const currentStudent: Student = student.value;
+        const projectId: string = route.params.projectId as string;
+
+        await getProjectByID(projectId);
+        await getGroupsByProject(projectId);
+        projectGroups.value = groups.value ?? [];
+
+        // Check if the student is in a group for the project
+        await getGroupsByStudent(currentStudent.id.toString());
+
+        group.value =
+            groups.value?.find((group) => projectGroups.value?.some((projectGroup) => projectGroup.id === group.id)) ??
+            null;
+    }
+});
+</script>
+
+<template>
+    <div class="grid">
+        <div class="col-12 md:col-9">
+            <div>
+                <Title v-if="project">
+                    {{ project.name }}
+                </Title>
+                <Skeleton class="mb-4" height="3rem" width="30rem" v-else />
+            </div>
+            <div>
+                <p v-if="project">
+                    {{ project.description }}
+                </p>
+                <Skeleton height="10rem" v-else />
+            </div>
+        </div>
+        <div class="col-12 md:col-3">
+            <SubmissionCard v-if="group && project" :project="project" :group="group" />
+            <JoinedGroupCard v-if="group" :group="group" @group-left="handleGroupChanged"></JoinedGroupCard>
+            <ChooseGroupCard v-else :groups="projectGroups" @group-joined="handleGroupChanged"></ChooseGroupCard>
+        </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
new file mode 100644
index 00000000..b57c793b
--- /dev/null
+++ b/frontend/src/views/projects/roles/TeacherProjectView.vue
@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>Not implemented</template>
+
+<style scoped lang="scss"></style>
diff --git a/frontend/src/views/submissions/submissionView.vue b/frontend/src/views/submissions/submissionView.vue
new file mode 100644
index 00000000..84e19e56
--- /dev/null
+++ b/frontend/src/views/submissions/submissionView.vue
@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import BaseLayout from '@/components/layout/BaseLayout.vue';
+import Title from '@/components/layout/Title.vue';
+import Button from 'primevue/button';
+import { useI18n } from 'vue-i18n';
+import { onMounted, ref } from 'vue';
+import { useProject } from '@/composables/services/project.service.ts';
+import { useRoute } from 'vue-router';
+import { useCourses } from '@/composables/services/courses.service.ts';
+import FileUpload from 'primevue/fileupload';
+import { PrimeIcons } from 'primevue/api';
+
+const { t } = useI18n();
+const route = useRoute();
+const { project, getProjectByID } = useProject();
+const { course, getCourseByID } = useCourses();
+
+/* State */
+const files = ref<File[]>([]);
+
+onMounted(async () => {
+    await getProjectByID(route.params.projectId as string);
+    await getCourseByID(route.params.courseId as string);
+});
+
+const onUpload = (callback: () => void): void => {
+    // TODO call to server
+    files.value = [];
+    callback();
+};
+
+const onFileSelect = (event: any): void => {
+    files.value = [...files.value, ...event.files];
+};
+
+const removeFile = (removeFileCallback: (index: number) => void, index: number): void => {
+    removeFileCallback(index);
+    files.value.splice(index, 1);
+};
+
+function formatDate(deadline: Date): string {
+    // changes deadline format to dd/mm.yyyy
+    return `${deadline.getDate()}/${deadline.getMonth() + 1}/${deadline.getFullYear()}`;
+}
+</script>
+
+<template>
+    <BaseLayout>
+        <div class="grid">
+            <div class="col-12 md:col-4">
+                <div>
+                    <Title> {{ t(`views.submissions.title`) }}: {{ project ? project.name : 'Loading' }} </Title>
+                    <p v-if="course">{{ t(`views.submissions.course`) }}: {{ course.name }}</p>
+                    <p v-if="project?.deadline">Deadline: {{ project ? formatDate(project.deadline) : 'Loading' }}</p>
+                    <div class="py-2">
+                        <h1 class="pb-2">
+                            {{ t(`views.submissions.submit`) }}
+                        </h1>
+                        <FileUpload
+                            class="justify-between"
+                            :show-cancel-button="false"
+                            :multiple="true"
+                            :chooseLabel="t(`views.submissions.chooseFile`)"
+                            @select="onFileSelect"
+                        >
+                            <template #header="{ chooseCallback, clearCallback, files }">
+                                <div class="flex justify-content-between align-items-center flex-1 gap-2">
+                                    <Button
+                                        @click="chooseCallback()"
+                                        :icon="PrimeIcons.PLUS"
+                                        :label="t(`views.submissions.chooseFile`)"
+                                    ></Button>
+                                    <Button
+                                        @click="onUpload(clearCallback)"
+                                        :label="`Upload`"
+                                        :icon="PrimeIcons.UPLOAD"
+                                        :disabled="!files || files.length === 0"
+                                    ></Button>
+                                </div>
+                            </template>
+                            <template #content="{ files, removeFileCallback }">
+                                <div v-if="files.length > 0" class="flex-column">
+                                    <div
+                                        v-for="(file, index) of files"
+                                        :key="file.name + file.type + file.size"
+                                        class="m-0 p-0 flex sm:p-2 justify-content-between align-items-center"
+                                    >
+                                        <span class="font-semibold">{{ file.name }}</span>
+                                        <Button
+                                            class="w-2rem h-2rem"
+                                            icon="pi pi-times"
+                                            @click="removeFile(removeFileCallback, index)"
+                                            outlined
+                                            rounded
+                                            severity="danger"
+                                        />
+                                    </div>
+                                </div>
+                            </template>
+                        </FileUpload>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </BaseLayout>
+</template>
+
+<style scoped lang="scss">
+@import '@/assets/scss/theme/theme.scss';
+
+h1 {
+    color: $primaryDarkColor;
+}
+</style>