diff --git a/frontend/src/assets/ugent_background.png b/frontend/src/assets/ugent_background.png
new file mode 100644
index 00000000..1b133771
Binary files /dev/null and b/frontend/src/assets/ugent_background.png differ
diff --git a/frontend/src/components/TitleContainer.vue b/frontend/src/components/TitleContainer.vue
new file mode 100644
index 00000000..5798864b
--- /dev/null
+++ b/frontend/src/components/TitleContainer.vue
@@ -0,0 +1,35 @@
+<template>
+    <v-card class="title-card" variant="flat" color="primary">
+        <v-card-title class="title"> {{ props.title }}</v-card-title>
+        <slot></slot>
+    </v-card>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+    title: string;
+}>();
+</script>
+
+<style scoped>
+.title-card {
+    padding: 30px;
+    color: white;
+}
+.title-card:after {
+    content: "";
+    background: url("@/assets/ugent_background.png") no-repeat center center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    opacity: 0.4;
+}
+
+.title {
+    font-size: 32px;
+    margin-bottom: 12px;
+}
+</style>
diff --git a/frontend/src/components/buttons/GroupButtons.vue b/frontend/src/components/buttons/GroupButtons.vue
index 2f99d9aa..f40c8cf4 100644
--- a/frontend/src/components/buttons/GroupButtons.vue
+++ b/frontend/src/components/buttons/GroupButtons.vue
@@ -67,7 +67,7 @@ const { mutateAsync: removeGroup } = useDeleteGroupMutation();
 
 const joinGroupAndRedirect = async () => {
     await joinGroup({ groupId: group.value.id, projectId: project.value.id });
-    router.push(`/groups/${group.value.id}`);
+    router.push(`/submissions/${group.value.id}`);
 };
 
 const leaveGroupAndRedirect = async () => {
diff --git a/frontend/src/components/groups/GroupCard.vue b/frontend/src/components/groups/GroupCard.vue
index 8dccc934..46963879 100644
--- a/frontend/src/components/groups/GroupCard.vue
+++ b/frontend/src/components/groups/GroupCard.vue
@@ -49,7 +49,7 @@ const amountOfMembers = computed(() => {
 });
 
 const toGroupPage = async () => {
-    router.push(`/groups/${group.value.id}`);
+    router.push(`/submissions/${group.value.id}`);
 };
 </script>
 
diff --git a/frontend/src/components/project/ProjectInfo.vue b/frontend/src/components/project/ProjectInfo.vue
index 3cc00f9e..483f6d86 100644
--- a/frontend/src/components/project/ProjectInfo.vue
+++ b/frontend/src/components/project/ProjectInfo.vue
@@ -58,10 +58,7 @@ const props = defineProps<{
 const { project, group, instructors, subject, user } = toRefs(props);
 
 const isTeacher = computed(
-    () =>
-        user.value.is_teacher ||
-        user.value.is_admin ||
-        instructors.value?.some((element) => element.uid == user.value.uid)
+    () => user.value.is_admin || instructors.value?.some((element) => element.uid == user.value.uid)
 );
 
 const renderQuillContent = (content: string) => {
diff --git a/frontend/src/components/project/ProjectMiniCard.vue b/frontend/src/components/project/ProjectMiniCard.vue
index dd90fc78..8468af39 100644
--- a/frontend/src/components/project/ProjectMiniCard.vue
+++ b/frontend/src/components/project/ProjectMiniCard.vue
@@ -1,24 +1,19 @@
 <template>
-    <v-card variant="flat">
+    <v-card @click="toProject" variant="flat">
         <v-skeleton-loader :loading="isSubjectLoading" type="article">
-            <v-card-item>
+            <v-col cols="9">
                 <v-card-title>
                     {{ project?.name }}
                 </v-card-title>
                 <v-card-subtitle>
                     {{ subject?.name }}
                 </v-card-subtitle>
-            </v-card-item>
-            <v-card-text>
+            </v-col>
+            <v-col cols="3" class="deadline">
                 <b>{{ $t("project.deadline") }}:</b>
                 <p>{{ $d(project!.deadline, "long") }}</p>
-            </v-card-text>
+            </v-col>
         </v-skeleton-loader>
-        <v-card-actions>
-            <v-btn :to="`/project/${project.id}`">
-                {{ $t("project.details_button") }}
-            </v-btn>
-        </v-card-actions>
     </v-card>
 </template>
 
@@ -26,6 +21,7 @@
 import { useSubjectQuery } from "@/queries/Subject";
 import { computed, toRefs } from "vue";
 import type Project from "@/models/Project";
+import router from "@/router";
 
 const props = defineProps<{
     project: Project;
@@ -36,6 +32,10 @@ const { project } = toRefs(props);
 const { data: subject, isLoading: isSubjectLoading } = useSubjectQuery(
     computed(() => project.value.subject_id)
 );
+
+const toProject = async () => {
+    await router.push({ name: "project", params: { projectId: project.value.id } });
+};
 </script>
 
 <style scoped>
diff --git a/frontend/src/components/project/ProjectSideBar.vue b/frontend/src/components/project/ProjectSideBar.vue
index 2550f0f6..6cb72088 100644
--- a/frontend/src/components/project/ProjectSideBar.vue
+++ b/frontend/src/components/project/ProjectSideBar.vue
@@ -4,7 +4,7 @@
             {{ $t("project.to_subject") }}
         </v-btn>
     </router-link>
-    <router-link v-if="group && !isSoloProject && !isTeacher" :to="`/groups/${group!.id}`">
+    <router-link v-if="group && !isSoloProject && !isTeacher" :to="`/submissions/${group!.id}`">
         <v-btn class="group-button" prepend-icon="mdi-account-group">
             {{ $t("project.group", { number: group!.num }) }}
         </v-btn>
@@ -14,7 +14,7 @@
             {{ $t("project.group_button") }}
         </v-btn>
     </router-link>
-    <router-link v-else-if="isTeacher" :to="`/project/${project!.id}/groups`">
+    <router-link v-else-if="isTeacher && !isSoloProject" :to="`/project/${project!.id}/groups`">
         <v-btn class="group-button" prepend-icon="mdi-account-group">
             {{ $t("project.to_groups") }}
         </v-btn>
@@ -55,7 +55,10 @@ const isTeacher = computed(() => {
     if (!user.value || !instructors.value) {
         return false;
     }
-    return instructors.value.some((instructor) => instructor.uid === user.value.uid);
+    return (
+        user.value.is_admin ||
+        instructors.value.some((instructor) => instructor.uid === user.value.uid)
+    );
 });
 
 const isSoloProject = computed(() => project.value.capacity === 1);
@@ -64,7 +67,7 @@ const isSoloProject = computed(() => project.value.capacity === 1);
 <style scoped>
 .group-button {
     margin-bottom: 5px;
-    min-width: 150px;
+    width: 200px;
     background-color: rgb(var(--v-theme-primary));
     color: rgb(var(--v-theme-navtext));
 }
diff --git a/frontend/src/components/project/RequirementsInput.vue b/frontend/src/components/project/RequirementsInput.vue
index 4edfcf39..d1ad07de 100644
--- a/frontend/src/components/project/RequirementsInput.vue
+++ b/frontend/src/components/project/RequirementsInput.vue
@@ -28,12 +28,12 @@
         </v-col>
     </v-row>
     <v-row v-for="(req, index) in internalRequirements" :key="index" class="align-center my-1">
-        <v-col cols="10">
+        <v-col cols="5">
             <v-chip class="me-2" color="blue" text-color="white">
                 {{ req.value }}
             </v-chip>
         </v-col>
-        <v-col cols="2" class="d-flex justify-space-between align-center">
+        <v-col cols="4" class="d-flex justify-space-between align-center">
             <v-switch
                 v-model="req.mandatory"
                 :label="req.mandatory ? $t('project.mandatory') : $t('project.forbidden')"
@@ -41,6 +41,8 @@
                 hide-details
                 inset
             ></v-switch>
+        </v-col>
+        <v-col cols="2">
             <v-btn icon="mdi-delete" @click="deleteRequirement(index)" />
         </v-col>
     </v-row>
diff --git a/frontend/src/components/subject/createSubjectView/body/SubjectInstructorsCard.vue b/frontend/src/components/subject/createSubjectView/body/SubjectInstructorsCard.vue
index b4bdcf64..9b137f7f 100644
--- a/frontend/src/components/subject/createSubjectView/body/SubjectInstructorsCard.vue
+++ b/frontend/src/components/subject/createSubjectView/body/SubjectInstructorsCard.vue
@@ -37,7 +37,7 @@ defineEmits<{
 
 <style scoped>
 .title-card {
-    background-color: var(--color-secondary);
+    background-color: rgb(var(--v-theme-secondary));
     padding: 20px;
 }
 
@@ -47,7 +47,6 @@ defineEmits<{
     display: block;
     line-height: 1.2;
     font-weight: 500;
-    color: black;
     word-wrap: break-word;
     white-space: normal;
     overflow: hidden;
diff --git a/frontend/src/components/subject/createSubjectView/body/UserSearchCard.vue b/frontend/src/components/subject/createSubjectView/body/UserSearchCard.vue
index 3a4bce23..1c598526 100644
--- a/frontend/src/components/subject/createSubjectView/body/UserSearchCard.vue
+++ b/frontend/src/components/subject/createSubjectView/body/UserSearchCard.vue
@@ -30,7 +30,7 @@ defineEmits<{
 
 <style scoped>
 .title-card {
-    background-color: var(--color-secondary);
+    background-color: rgb(var(--v-theme-secondary));
     padding: 20px;
 }
 
@@ -40,6 +40,5 @@ defineEmits<{
     display: block;
     line-height: 1.2;
     font-weight: 500;
-    color: black;
 }
 </style>
diff --git a/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue
index 0e7a2676..d522a9ad 100644
--- a/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue
+++ b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue
@@ -3,7 +3,6 @@
         <v-card-title class="title">
             {{ $t("create_subject.new_subject") }}
         </v-card-title>
-
         <v-card-text>
             <v-text-field
                 v-model="subjectName"
@@ -36,7 +35,7 @@
                     <v-checkbox
                         :label="$t('create_subject.assign_self')"
                         v-model="checkbox"
-                        color="primary"
+                        color="text"
                         class="checkbox"
                     ></v-checkbox>
                 </v-col>
@@ -119,7 +118,7 @@ watch(subjectMail, (newValue) => {
 
 <style scoped>
 .title-card {
-    background-color: var(--color-secondary);
+    background-color: rgb(var(--v-theme-secondary));
     padding: 20px;
 }
 
diff --git a/frontend/src/components/subject/extra/SubjectIcon.vue b/frontend/src/components/subject/extra/SubjectIcon.vue
index 8dcd8a83..919519fb 100644
--- a/frontend/src/components/subject/extra/SubjectIcon.vue
+++ b/frontend/src/components/subject/extra/SubjectIcon.vue
@@ -1,5 +1,5 @@
 <template>
-    <v-icon color="white" :size="size">
+    <v-icon :size="size">
         {{ `mdi-${userRole}` }}
     </v-icon>
 </template>
diff --git a/frontend/src/components/subject/subjectsview/body/SubjectCard.vue b/frontend/src/components/subject/subjectsview/body/SubjectCard.vue
index 60834f0b..e4c0b90d 100644
--- a/frontend/src/components/subject/subjectsview/body/SubjectCard.vue
+++ b/frontend/src/components/subject/subjectsview/body/SubjectCard.vue
@@ -1,6 +1,6 @@
 <template>
     <router-link :to="{ name: 'subject', params: { subjectId: subject.id } }" class="router-link">
-        <v-card class="subject-card" height="16vh" color="primary">
+        <v-card class="subject-card">
             <SubjectIcon :role="role" size="xx-large" class="subject-icon"></SubjectIcon>
             <v-card-title class="subject-title">
                 {{ subject?.name }}
@@ -33,18 +33,19 @@ defineProps<{
     justify-content: space-between;
     position: relative;
     width: 100%;
+    height: 100px;
+    background-color: rgb(var(--v-theme-secondary));
+    border-radius: 3px;
 }
 
 .subject-title {
-    color: white;
-    font-size: 3vh;
-    position: absolute;
-    bottom: 0;
+    color: rgb(var(--v-theme-text));
 }
 
 .subject-icon {
     position: absolute;
-    top: 10px;
+    bottom: 10px;
     right: 15px;
+    color: rgb(var(--v-theme-text));
 }
 </style>
diff --git a/frontend/src/components/subject/subjectsview/header/SubjectsHeaderCard.vue b/frontend/src/components/subject/subjectsview/header/SubjectsHeaderCard.vue
index bf05ca66..20d70cfc 100644
--- a/frontend/src/components/subject/subjectsview/header/SubjectsHeaderCard.vue
+++ b/frontend/src/components/subject/subjectsview/header/SubjectsHeaderCard.vue
@@ -1,41 +1,38 @@
 <template>
-    <v-card variant="text" class="title-card" width="100%">
-        <v-row>
-            <v-col>
-                <v-card-title class="title">
-                    {{ $t("subjects.title") }}
-                </v-card-title>
-
-                <v-card-text>
-                    <div class="chip-container">
-                        <v-chip-group mandatory v-model="activeAcademicYear" column>
-                            <v-chip
-                                v-for="(academicYear, index) in academicYears"
-                                :key="index"
-                                :value="academicYear"
-                                color="primary"
-                                class="ma-1"
-                                variant="tonal"
-                            >
-                                {{ `${academicYear}-${academicYear + 1}` }}
-                            </v-chip>
-                        </v-chip-group>
-                    </div>
-                </v-card-text>
-            </v-col>
-            <v-col v-if="isInstructor && isStudent" cols="6">
-                <v-checkbox
-                    class="subject-checkbox"
-                    v-model="showInstructorSubjects"
-                    :label="$t('subjects.instructor_subjects')"
-                ></v-checkbox>
-                <v-checkbox
-                    class="subject-checkbox"
-                    v-model="showStudentSubjects"
-                    :label="$t('subjects.student_subjects')"
-                ></v-checkbox>
-            </v-col>
-        </v-row>
+    <v-card variant="flat" class="title-card">
+        <div class="leftcontent">
+            <v-card-title class="title">
+                {{ $t("subjects.title") }}
+            </v-card-title>
+            <v-card-text>
+                <div class="chip-container">
+                    <v-chip-group mandatory v-model="activeAcademicYear" column>
+                        <v-chip
+                            v-for="(academicYear, index) in academicYears"
+                            :key="index"
+                            :value="academicYear"
+                            class="ma-1 chip"
+                            color="secondary"
+                            variant="flat"
+                        >
+                            {{ `${academicYear}-${academicYear + 1}` }}
+                        </v-chip>
+                    </v-chip-group>
+                </div>
+            </v-card-text>
+        </div>
+        <div v-if="isInstructor && isStudent" class="checkboxes">
+            <v-checkbox
+                class="subject-checkbox"
+                v-model="showInstructorSubjects"
+                :label="$t('subjects.instructor_subjects')"
+            ></v-checkbox>
+            <v-checkbox
+                class="subject-checkbox"
+                v-model="showStudentSubjects"
+                :label="$t('subjects.student_subjects')"
+            ></v-checkbox>
+        </div>
     </v-card>
 </template>
 
@@ -49,6 +46,7 @@ const props = defineProps<{
     subjects: SubjectDetails[];
 }>();
 const { academicYears, subjects } = toRefs(props);
+
 const activeAcademicYear = ref(useAcademicYear());
 const showInstructorSubjects = ref(true);
 const showStudentSubjects = ref(true);
@@ -90,24 +88,38 @@ watch(activeSubjectFilter, (newVal: SubjectFilter | undefined) => {
 
 <style scoped>
 .title-card {
-    background-color: white;
+    position: relative;
+    display: flex;
     padding: 20px;
+    color: white;
+}
+.title-card:after {
+    content: "";
+    background: url("@/assets/ugent_background.png") no-repeat center center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    opacity: 0.4;
 }
 
 .title {
     font-size: 32px;
-    letter-spacing: -0.5px;
-    text-transform: capitalize;
-    font-weight: bold;
     margin-bottom: 12px;
-    font-family: "Poppins", sans-serif;
 }
 
 .chip-container {
     overflow-x: auto;
 }
 
-.subject-checkbox {
-    margin-top: -15px;
+.chip {
+    color: rgb(var(--v-theme-text));
+    background-color: rgb(var(--v-theme-background));
+}
+
+.leftcontent {
+    max-width: 400px;
 }
 </style>
diff --git a/frontend/src/components/subject/subjectsview/header/SubjectsHeaderContainer.vue b/frontend/src/components/subject/subjectsview/header/SubjectsHeaderContainer.vue
index 14fe97fb..8c6c6df7 100644
--- a/frontend/src/components/subject/subjectsview/header/SubjectsHeaderContainer.vue
+++ b/frontend/src/components/subject/subjectsview/header/SubjectsHeaderContainer.vue
@@ -1,24 +1,14 @@
 <template>
-    <v-row>
-        <v-col cols="7">
-            <SubjectsHeaderCard
-                :academic-years="academicYears"
-                :subjects="subjects"
-                @academic-year-changed="$emit('academic-year-changed', $event)"
-                @subjects-filter-changed="$emit('subjects-filter-changed', $event)"
-            ></SubjectsHeaderCard>
-        </v-col>
-        <v-col>
-            <SubjectsHeaderImage
-                image-path="https://www.ugent.be/img/dcom/faciliteiten/ufo-logo.png"
-            ></SubjectsHeaderImage>
-        </v-col>
-    </v-row>
+    <SubjectsHeaderCard
+        :academic-years="academicYears"
+        :subjects="subjects"
+        @academic-year-changed="$emit('academic-year-changed', $event)"
+        @subjects-filter-changed="$emit('subjects-filter-changed', $event)"
+    ></SubjectsHeaderCard>
 </template>
 
 <script setup lang="ts">
 import SubjectsHeaderCard from "@/components/subject/subjectsview/header/SubjectsHeaderCard.vue";
-import SubjectsHeaderImage from "@/components/subject/subjectsview/header/SubjectsHeaderImage.vue";
 import type { SubjectDetails, SubjectFilter } from "@/models/Subject";
 
 defineProps<{
diff --git a/frontend/src/components/subject/subjectsview/header/SubjectsHeaderImage.vue b/frontend/src/components/subject/subjectsview/header/SubjectsHeaderImage.vue
index 1be93d63..e69de29b 100644
--- a/frontend/src/components/subject/subjectsview/header/SubjectsHeaderImage.vue
+++ b/frontend/src/components/subject/subjectsview/header/SubjectsHeaderImage.vue
@@ -1,15 +0,0 @@
-<template>
-    <v-img aspect-ratio="16/9" cover :src="imagePath" class="header-img"> </v-img>
-</template>
-
-<script setup lang="ts">
-defineProps<{
-    imagePath: string;
-}>();
-</script>
-
-<style scoped>
-.header-img {
-    height: 165px;
-}
-</style>
diff --git a/frontend/src/components/subject/subjectview/body/SubjectBody.vue b/frontend/src/components/subject/subjectview/body/SubjectBody.vue
deleted file mode 100644
index bc04c9c6..00000000
--- a/frontend/src/components/subject/subjectview/body/SubjectBody.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-    <div class="tab-container">
-        <v-tabs v-model="tab" align-tabs="center" grow slider-color="#3F3BE1">
-            <v-tab
-                height="25px"
-                v-for="(item, index) in items"
-                :key="index"
-                :value="index"
-                :class="{ 'page-tab': true, active: index === tab }"
-                >{{ $t(`subject.${item}`) }}
-            </v-tab>
-        </v-tabs>
-    </div>
-
-    <v-window v-model="tab">
-        <v-window-item value="0" key="0">
-            <SubjectProjectsPage :projects="projects"></SubjectProjectsPage>
-        </v-window-item>
-        <v-window-item value="1" key="1">
-            <SubjectGroupsPage />
-        </v-window-item>
-    </v-window>
-</template>
-
-<script setup lang="ts">
-import SubjectProjectsPage from "@/components/subject/subjectview/body/projects/SubjectProjectsPage.vue";
-import SubjectGroupsPage from "@/components/subject/subjectview/body/groups/SubjectGroupsPage.vue";
-
-import { ref } from "vue";
-import type Project from "@/models/Project";
-
-defineProps<{
-    projects: Project[];
-}>();
-
-const items = ["projects", "groups"];
-const tab = ref(0);
-</script>
-
-<style scoped>
-.active {
-    color: #003eff;
-}
-
-.page-tab {
-    font-size: 16px;
-    font-weight: 500;
-    font-family: "Poppins", sans-serif;
-    text-transform: capitalize;
-    background-color: white;
-}
-
-.tab-container {
-    border-top-right-radius: 20px;
-    border-top-left-radius: 20px;
-    background-color: white;
-    padding-top: 16px;
-    height: 30px;
-    margin-bottom: 20px;
-}
-</style>
diff --git a/frontend/src/components/subject/subjectview/body/projects/SubjectProjectPage.vue b/frontend/src/components/subject/subjectview/body/projects/SubjectProjectPage.vue
index a039d150..1644fe41 100644
--- a/frontend/src/components/subject/subjectview/body/projects/SubjectProjectPage.vue
+++ b/frontend/src/components/subject/subjectview/body/projects/SubjectProjectPage.vue
@@ -17,13 +17,17 @@
                     </v-row>
                 </v-card-title>
             </router-link>
-
             <v-card-text class="d-block py-3 deadline">
                 <v-icon>mdi-alarm</v-icon>
                 {{ $d(project.deadline, "long") }}
             </v-card-text>
-
             <v-card-text>
+                <h2 v-if="project.capacity > 1 && !isLoading && group !== null" class="group">
+                    {{ $t("project.group", { number: group?.num }) }}
+                </h2>
+                <h2 v-else-if="!isError && project.capacity > 1" class="group">
+                    {{ $t("project.no_group") }}
+                </h2>
                 <h2>{{ $t("subject.project.assignment") }}</h2>
                 <div
                     v-if="project.description && project.description.length <= assignmentLength"
@@ -63,26 +67,22 @@
                 </v-card-actions>
             </div>
         </v-card>
-        <v-card class="project-card" variant="text">
-            <v-card-title class="card_title">{{ $t("subject.project.group") }}</v-card-title>
-        </v-card>
-
-        <v-card class="project-card" variant="text">
-            <v-card-title class="card_title">{{ $t("subject.project.submissions") }}</v-card-title>
-        </v-card>
     </div>
 </template>
 
 <script setup lang="ts">
 import type Project from "@/models/Project";
-import { ref } from "vue";
+import { ref, toRefs } from "vue";
 import { Quill } from "@vueup/vue-quill";
+import { useProjectGroupQuery } from "@/queries/Group";
 
-defineProps<{
+const props = defineProps<{
     selectedTab: number;
     project: Project;
 }>();
 
+const { project } = toRefs(props);
+
 const expanded = ref(false);
 const assignmentLength = 100;
 
@@ -91,19 +91,20 @@ const renderQuillContent = (content: string) => {
     quill.root.innerHTML = content;
     return quill.root.innerHTML;
 };
+
+const { data: group, isLoading, isError } = useProjectGroupQuery(project.value.id);
 </script>
 
 <style scoped>
 .project_description {
     font-size: 14px;
     line-height: 1.5;
-    color: #333;
     margin-top: 10px;
     margin-left: 10px;
 }
 
 .project-card {
-    background-color: white;
+    background-color: rgb(var(--v-theme-background));
     padding: 20px;
     display: flex;
     flex-direction: column;
@@ -117,17 +118,13 @@ const renderQuillContent = (content: string) => {
     color: inherit;
 }
 
-.deadline {
-    color: #181818;
-}
-
 .colored-zone {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 80px; /* Adjust the height as needed */
-    background-color: var(--color-primary); /* Desired background color */
+    background-color: rgb(var(--v-theme-primary)); /* Desired background color */
     z-index: -1; /* Ensure the colored zone is behind the card content */
 }
 
@@ -141,15 +138,6 @@ const renderQuillContent = (content: string) => {
     text-transform: capitalize;
 }
 
-.card_title {
-    font-size: 24px;
-    text-transform: capitalize;
-    display: block;
-    line-height: 1.2;
-    font-weight: 500;
-    color: black;
-}
-
 .project-container {
     overflow: auto;
     max-height: 55vh;
@@ -171,4 +159,8 @@ const renderQuillContent = (content: string) => {
 .title-col::-webkit-scrollbar {
     width: 0; /* For Chrome, Safari, and Opera */
 }
+
+.group {
+    margin-bottom: 25px;
+}
 </style>
diff --git a/frontend/src/components/subject/subjectview/body/projects/SubjectProjectsPage.vue b/frontend/src/components/subject/subjectview/body/projects/SubjectProjectsPage.vue
index b84a79ec..b0717710 100644
--- a/frontend/src/components/subject/subjectview/body/projects/SubjectProjectsPage.vue
+++ b/frontend/src/components/subject/subjectview/body/projects/SubjectProjectsPage.vue
@@ -20,7 +20,6 @@
                         :project="project"
                     ></SubjectProjectPage>
                 </v-window-item>
-
                 <v-window-item v-if="filteredProjects.length === 0" :key="'placeholder'">
                     <div class="placeholder">
                         <p>{{ $t("subject.projectsPage.no_projects") }}</p>
@@ -78,7 +77,8 @@ const updateFilterOption = (option: FilterOptions) => {
     justify-content: center;
     align-items: center;
     height: 400px; /* Adjust height as needed */
-    border: 1px solid #ccc;
+    border-radius: 3px;
+    background-color: rgb(var(--v-theme-background));
 }
 
 .placeholder p {
diff --git a/frontend/src/components/subject/subjectview/body/projects/list/SubjectProjectsList.vue b/frontend/src/components/subject/subjectview/body/projects/list/SubjectProjectsList.vue
index ffc25f33..6ef81755 100644
--- a/frontend/src/components/subject/subjectview/body/projects/list/SubjectProjectsList.vue
+++ b/frontend/src/components/subject/subjectview/body/projects/list/SubjectProjectsList.vue
@@ -9,7 +9,7 @@
                     v-for="(filter, index) in filterOptions"
                     :key="index"
                     :value="FilterOptions[filter]"
-                    color="primary"
+                    color="text"
                     variant="tonal"
                 >
                     {{ $t(`subject.projectsPage.${filter.toLowerCase()}`) }}
@@ -73,7 +73,7 @@ watch(activeButton, (newVal: string) => {
 
 <style scoped>
 .projects-card {
-    background-color: white;
+    background-color: rgb(var(--v-theme-background));
     padding: 20px;
     display: flex;
     flex-direction: column;
diff --git a/frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue b/frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue
index e216df2c..01078d80 100644
--- a/frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue
+++ b/frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue
@@ -1,14 +1,17 @@
 <template>
-    <v-card variant="text" class="title-card" height="165">
+    <v-card variant="text" class="title-card">
         <v-row>
-            <v-col :cols="isAdmin || (isInstructor && isTeacher) ? 11 : 12" class="scrollable-col">
-                <v-card-title class="title">
-                    <div class="scrollable">
-                        {{ title }}
-                    </div>
-                </v-card-title>
+            <v-col :cols="isAdmin || (isInstructor && isTeacher) ? 11 : 12">
+                <div class="icon">
+                    <SubjectIcon :role="role" size="xxx-large" class="subject-icon"></SubjectIcon>
+                    <v-card-title class="title">
+                        <div class="scrollable">
+                            {{ title }}
+                        </div>
+                    </v-card-title>
+                </div>
                 <v-card-text>
-                    <v-chip color="primary" variant="flat" label>
+                    <v-chip color="secondary" variant="flat" label class="academyyear">
                         {{
                             `${$t("subject.academy_year")} 20${academicYear}-20${academicYear + 1}`
                         }}
@@ -19,7 +22,11 @@
                             :key="instructor!.uid"
                             variant="outlined"
                             :color="instructor!.is_teacher ? `primary` : `green`"
-                            class="ma-1 instr-chip"
+                            :class="
+                                instructor!.is_teacher
+                                    ? `ma-1 instr-chip-instructor`
+                                    : `ma-1 instr-chip-assistent`
+                            "
                             exact
                         >
                             <v-icon
@@ -48,12 +55,15 @@
 import type User from "@/models/User";
 import useIsAdmin from "@/composables/useIsAdmin";
 import useIsTeacher from "@/composables/useIsTeacher";
+import SubjectIcon from "@/components/subject/extra/SubjectIcon.vue";
+import { SubjectRole } from "@/models/Subject";
 
 defineProps<{
     title: string;
     academicYear: number;
     instructors: User[];
     isInstructor: boolean;
+    role: SubjectRole;
 }>();
 
 const { isAdmin } = useIsAdmin();
@@ -62,14 +72,8 @@ const { isTeacher } = useIsTeacher();
 
 <style scoped>
 .title-card {
-    background-color: white;
+    background-color: rgb(var(--v-theme-background));
     padding: 20px;
-    overflow-y: auto;
-    scrollbar-width: none;
-}
-
-.title-card::-webkit-scrollbar {
-    display: none;
 }
 
 .scrollable {
@@ -99,4 +103,21 @@ const { isTeacher } = useIsTeacher();
     justify-content: flex-end;
     margin-top: 10px;
 }
+
+.instr-chip-instructor {
+    background-color: #dfe5f7;
+}
+
+.instr-chip-assistent {
+    background-color: #d0efd1;
+}
+
+.academyyear {
+    border-radius: 50px;
+    border: 1px solid rgb(var(--v-theme-text));
+}
+
+.icon {
+    display: flex;
+}
 </style>
diff --git a/frontend/src/components/subject/subjectview/header/SubjectHeaderContainer.vue b/frontend/src/components/subject/subjectview/header/SubjectHeaderContainer.vue
index c3019e11..bb1e50ce 100644
--- a/frontend/src/components/subject/subjectview/header/SubjectHeaderContainer.vue
+++ b/frontend/src/components/subject/subjectview/header/SubjectHeaderContainer.vue
@@ -1,24 +1,17 @@
 <template>
-    <v-row>
-        <v-col cols="4">
-            <SubjectHeaderImage :imagePath="imagePath" :role="userRole"></SubjectHeaderImage>
-        </v-col>
-        <v-col cols="8">
-            <SubjectHeaderCard
-                :title="title"
-                :academic-year="academicYear"
-                :instructors="instructors"
-                :isInstructor="isInstructor"
-            >
-            </SubjectHeaderCard>
-        </v-col>
-    </v-row>
+    <SubjectHeaderCard
+        :title="title"
+        :academic-year="academicYear"
+        :instructors="instructors"
+        :isInstructor="isInstructor"
+        :role="userRole"
+    >
+    </SubjectHeaderCard>
 </template>
 
 <script setup lang="ts">
 import SubjectHeaderCard from "@/components/subject/subjectview/header/SubjectHeaderCard.vue";
 import type User from "@/models/User";
-import SubjectHeaderImage from "@/components/subject/subjectview/header/SubjectHeaderImage.vue";
 import { SubjectRole } from "@/models/Subject";
 import { computed, toRefs } from "vue";
 
diff --git a/frontend/src/components/subject/subjectview/header/SubjectHeaderImage.vue b/frontend/src/components/subject/subjectview/header/SubjectHeaderImage.vue
index 9f5434d7..f6049bb2 100644
--- a/frontend/src/components/subject/subjectview/header/SubjectHeaderImage.vue
+++ b/frontend/src/components/subject/subjectview/header/SubjectHeaderImage.vue
@@ -15,10 +15,6 @@ defineProps<{
 </script>
 
 <style scoped>
-.header-img {
-    height: 165px;
-}
-
 .subject-icon {
     position: absolute;
     top: 10px;
diff --git a/frontend/src/components/submission/SubmitInfo.vue b/frontend/src/components/submission/SubmitInfo.vue
index d84eaaf7..21609d1c 100644
--- a/frontend/src/components/submission/SubmitInfo.vue
+++ b/frontend/src/components/submission/SubmitInfo.vue
@@ -18,7 +18,7 @@
             <v-btn :to="`/project/${project?.id}/submit`">
                 {{ $t("submit.new_submission") }}
             </v-btn>
-            <v-btn :to="`/groups/${group?.id}`">
+            <v-btn :to="`/submissions/${group?.id}`">
                 {{ $t("project.submissions_list") }}
             </v-btn>
         </v-card-actions>
diff --git a/frontend/src/i18n/locales/en.ts b/frontend/src/i18n/locales/en.ts
index cc0c94b6..e8feac8e 100644
--- a/frontend/src/i18n/locales/en.ts
+++ b/frontend/src/i18n/locales/en.ts
@@ -28,6 +28,7 @@ export default {
     },
     submit: {
         submit_title: "Submit solution",
+        create_title_tip: "Choose a title",
         submit_button: "Submit",
         remarks: "Remarks",
         files: "Files",
@@ -62,6 +63,7 @@ export default {
         group_button: "Join group",
         needhelp_button: "Need help",
         group: "Group {number}",
+        no_group: "Not yet in a group",
         assignment: "Assignment:",
         myProject: "My projects",
         capacity_group: "Capacity: ",
diff --git a/frontend/src/i18n/locales/nl.ts b/frontend/src/i18n/locales/nl.ts
index 0cd597de..f35673a2 100644
--- a/frontend/src/i18n/locales/nl.ts
+++ b/frontend/src/i18n/locales/nl.ts
@@ -27,6 +27,7 @@ export default {
     },
     submit: {
         submit_title: "Oplossing indienen",
+        create_title_tip: "Kies een titel",
         submit_button: "Indienen",
         remarks: "Opmerkingen",
         files: "Bestanden",
@@ -62,6 +63,7 @@ export default {
         group_button: "Vind groep",
         needhelp_button: "Hulp nodig",
         group: "Groep {number}",
+        no_group: "Nog niet ingeschreven in een groep",
         assignment: "Opdracht:",
         myProject: "Mijn projecten",
         capacity_group: "Capaciteit: ",
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 8b2f1bd8..1b483e23 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -65,8 +65,8 @@ const router = createRouter({
             props: (route) => ({ projectId: Number(route.params.projectId) }),
         },
         {
-            path: "/groups/:groupId(\\d+)",
-            name: "group",
+            path: "/submissions/:groupId(\\d+)",
+            name: "submissions",
             component: () => import("../views/GroupView.vue"),
             props: (route) => ({ groupId: Number(route.params.groupId) }),
         },
diff --git a/frontend/src/views/AboutView.vue b/frontend/src/views/AboutView.vue
index d94b68ef..03d36af7 100644
--- a/frontend/src/views/AboutView.vue
+++ b/frontend/src/views/AboutView.vue
@@ -1,7 +1,6 @@
 <template>
     <div class="info">
-        <div class="about">
-            <h1>{{ $t("about.about") }}</h1>
+        <TitleContainer :title="$t('about.about')" class="titlecontainer">
             <p>
                 {{ $t("about.p_1") }}
                 <a href="https://studiekiezer.ugent.be/2023/studiefiche/nl/C003784" class="link">
@@ -9,7 +8,7 @@
                 >. {{ $t("about.p_2") }}
                 <a href="https://github.com/SELab-2/UGent-5" class="link"> GitHub </a>.
             </p>
-        </div>
+        </TitleContainer>
         <h2>{{ $t("about.developers") }}:</h2>
         <v-list lines="one">
             <v-list-item v-for="developer in developers" :key="developer.name" class="developers">
@@ -25,6 +24,7 @@
 </template>
 
 <script setup lang="ts">
+import TitleContainer from "@/components/TitleContainer.vue";
 interface Developer {
     role: string;
     name: string;
@@ -71,14 +71,19 @@ const developers: Developer[] = [
 <style scoped>
 .info {
     padding: 30px;
+    margin-left: 25px;
+    margin-top: 10px;
+    margin-right: 25px;
 }
 
 .link {
-    color: rgb(var(--v-theme-text));
+    color: white;
 }
 
 .about {
     margin-bottom: 25px;
+    background-color: rgb(var(--v-theme-secondary));
+    padding: 15px;
 }
 
 .v-btn {
@@ -90,4 +95,8 @@ const developers: Developer[] = [
     align-items: center;
     margin-bottom: 15px;
 }
+
+.titlecontainer {
+    margin-bottom: 30px;
+}
 </style>
diff --git a/frontend/src/views/CreateProjectView.vue b/frontend/src/views/CreateProjectView.vue
index 52bf5817..211f8b3c 100644
--- a/frontend/src/views/CreateProjectView.vue
+++ b/frontend/src/views/CreateProjectView.vue
@@ -8,18 +8,14 @@
             {{ $t("project.not_found") }}
         </h1>
         <div v-else class="projectInfo">
-            <v-row>
+            <v-row class="createproject">
                 <v-col cols="12" md="6">
                     <v-text-field
                         v-model="project_title"
                         :label="$t('project.assignment')"
                         required
-                        :placeholder="$t('submit.submit_title')"
+                        :placeholder="$t('submit.create_title_tip')"
                     />
-                </v-col>
-            </v-row>
-            <v-row>
-                <v-col cols="12" md="6">
                     <v-select
                         v-if="!isEditMode"
                         v-model="selectedSubject"
@@ -30,6 +26,17 @@
                         required
                         :placeholder="$t('submit.submit_title')"
                     />
+                    <DatePicker
+                        :modelValue="deadlineModel"
+                        @update:modelValue="updateDeadline"
+                        :label="$t('project.deadline')"
+                    />
+                    <DatePicker
+                        :modelValue="publishDateModel"
+                        @update:modelValue="updatePublishDate"
+                        :label="$t('project.publish_date')"
+                        required
+                    />
                 </v-col>
                 <v-col cols="12" md="6">
                     <v-alert v-if="!isEditMode" dense text class="custom-alert">
@@ -45,21 +52,7 @@
                         @update:capacity="handleCapacityChange"
                         @update:selected-option="handleOptionChange"
                         required
-                    />
-                </v-col>
-            </v-row>
-            <v-row>
-                <v-col cols="12" md="6">
-                    <DatePicker
-                        :modelValue="deadlineModel"
-                        @update:modelValue="updateDeadline"
-                        :label="$t('project.deadline')"
-                    />
-                    <DatePicker
-                        :modelValue="publishDateModel"
-                        @update:modelValue="updatePublishDate"
-                        :label="$t('project.publish_date')"
-                        required
+                        class="radiolist"
                     />
                 </v-col>
             </v-row>
@@ -112,11 +105,7 @@
                     />
                 </v-col>
             </v-row>
-            <v-row>
-                <v-col cols="12" class="text-right">
-                    <v-btn @click="submitForm">{{ $t("submit.submit_button") }}</v-btn>
-                </v-col>
-            </v-row>
+            <v-btn color="primary" @click="submitForm">{{ $t("submit.submit_button") }}</v-btn>
             <v-alert v-model="showErrorAlert" type="error" dense dismissible :value="true">
                 {{ errorMessage }}
             </v-alert>
@@ -475,4 +464,13 @@ function divideStudentsIntoGroups(students: User[], capacity: number) {
 .alert-bottom-margin {
     margin-bottom: 15px;
 }
+
+.createproject {
+    border-radius: 3px;
+    margin-top: 25px;
+}
+
+.radiolist {
+    padding: 5px;
+}
 </style>
diff --git a/frontend/src/views/GroupView.vue b/frontend/src/views/GroupView.vue
index f82abb6c..961b68e5 100644
--- a/frontend/src/views/GroupView.vue
+++ b/frontend/src/views/GroupView.vue
@@ -111,7 +111,10 @@ const isTeacher = computed(() => {
     if (!user.value || !instructors.value) {
         return false;
     }
-    return instructors.value.some((instructor) => instructor.uid === user.value.uid);
+    return (
+        user.value.is_admin ||
+        instructors.value.some((instructor) => instructor.uid === user.value.uid)
+    );
 });
 
 const amountOfMembers = computed(() => {
diff --git a/frontend/src/views/GroupsView.vue b/frontend/src/views/GroupsView.vue
index eca52fcf..140c0061 100644
--- a/frontend/src/views/GroupsView.vue
+++ b/frontend/src/views/GroupsView.vue
@@ -2,35 +2,44 @@
     <v-container>
         <h1 v-if="isDataLoading" class="welcome">{{ $t("default.loading.loading_page") }}</h1>
         <h1 v-else-if="isDataError" class="welcome">{{ $t("group.error") }}</h1>
-        <div v-else class="projectInfo">
-            <h2>{{ "Project: " + project!.name }}</h2>
-            <StudentsDialog :students="allStudents" :title="$t('group.all_students')" />
-            <v-divider class="border-opacity-50"></v-divider>
-            <div v-if="groups.length > 0">
-                <v-row>
-                    <v-col cols="7">{{ $t("group.groups") }}</v-col>
-                    <v-col cols="2">{{ $t("group.members") }}</v-col>
-                    <v-col cols="3">{{ $t("group.actions") }}</v-col>
-                </v-row>
-                <GroupCard
-                    v-for="group in groups"
-                    :key="group.id"
-                    :project="project!"
-                    :group="group"
-                    :user="user!"
-                    :isTeacher="isTeacher!"
-                    class="group-card"
+        <v-row v-else class="projectinfo">
+            <v-col class="col-sm-12 col-md-6">
+                <h2>{{ "Project: " + project!.name }}</h2>
+                <StudentsDialog :students="allStudents" :title="$t('group.all_students')" />
+                <v-divider class="border-opacity-50"></v-divider>
+                <div v-if="groups.length > 0">
+                    <v-row>
+                        <v-col cols="7">{{ $t("group.groups") }}</v-col>
+                        <v-col cols="2">{{ $t("group.members") }}</v-col>
+                        <v-col cols="3">{{ $t("group.actions") }}</v-col>
+                    </v-row>
+                    <GroupCard
+                        v-for="group in groups"
+                        :key="group.id"
+                        :project="project!"
+                        :group="group"
+                        :user="user!"
+                        :isTeacher="isTeacher!"
+                        class="group-card"
+                    />
+                </div>
+                <div v-else>
+                    <v-row>
+                        <v-col cols="8"> {{ $t("group.not_found2") }}</v-col>
+                    </v-row>
+                </div>
+                <v-btn v-if="isTeacher" @click="createGroup" variant="flat">{{
+                    $t("group.create_group")
+                }}</v-btn>
+            </v-col>
+            <v-col cols="2" class="buttoncontainer">
+                <BackButton
+                    title="project.to_project"
+                    :destination="`/project/${projectId}`"
+                    class="backbutton"
                 />
-            </div>
-            <div v-else>
-                <v-row>
-                    <v-col cols="8"> {{ $t("group.not_found2") }}</v-col>
-                </v-row>
-            </div>
-            <v-btn v-if="isTeacher" @click="createGroup" variant="flat">{{
-                $t("group.create_group")
-            }}</v-btn>
-        </div>
+            </v-col>
+        </v-row>
     </v-container>
 </template>
 
@@ -43,6 +52,7 @@ import { useCurrentUserQuery } from "@/queries/User";
 import { type GroupForm } from "@/models/Group";
 import { useSubjectInstructorsQuery, useSubjectStudentsQuery } from "@/queries/Subject";
 import StudentsDialog from "@/components/groups/StudentsDialog.vue";
+import BackButton from "@/components/buttons/BackButton.vue";
 
 const props = defineProps<{
     projectId: number;
@@ -99,7 +109,6 @@ const isTeacher = computed(() => {
         return false;
     }
     return (
-        user.value.is_teacher ||
         user.value.is_admin ||
         instructors.value.some((instructor) => instructor.uid === user.value.uid)
     );
@@ -124,6 +133,7 @@ async function createGroup() {
 <style scoped>
 .v-container {
     padding: 25px;
+    position: relative;
 }
 
 .group-card {
@@ -137,4 +147,28 @@ async function createGroup() {
     margin-bottom: 15px;
     margin-top: 15px;
 }
+
+.backbutton {
+    margin: 25px;
+}
+
+.buttoncontainer {
+    min-width: 200px;
+}
+@media (max-width: 900px) {
+    .backbutton {
+        margin-right: 0;
+    }
+
+    .buttoncontainer {
+        z-index: 10;
+        position: absolute;
+        right: 20px;
+        top: 10px;
+    }
+
+    .projectinfo {
+        position: relative;
+    }
+}
 </style>
diff --git a/frontend/src/views/HomeScreenView.vue b/frontend/src/views/HomeScreenView.vue
index de629bd6..8bd6cb57 100644
--- a/frontend/src/views/HomeScreenView.vue
+++ b/frontend/src/views/HomeScreenView.vue
@@ -1,9 +1,10 @@
 <template>
     <v-container v-if="smAndDown">
         <h1 v-if="isLoading">Loading...</h1>
-        <h1 v-else class="title">
-            {{ $t("home.welcome", { name: user!.given_name, surname: user!.surname }) }}
-        </h1>
+        <TitleContainer
+            v-else
+            :title="$t('home.welcome', { name: user!.given_name, surname: user!.surname })"
+        ></TitleContainer>
         <div class="mobileCard">
             <DeadlinesCard />
         </div>
@@ -11,11 +12,13 @@
             <SubjectsCard />
         </div>
     </v-container>
-    <v-container v-else>
+    <v-container v-else class="homescreencontainer">
         <h1 v-if="isLoading">Loading...</h1>
-        <h1 v-else class="title">
-            {{ $t("home.welcome", { name: user!.given_name, surname: user!.surname }) }}
-        </h1>
+        <TitleContainer
+            v-else
+            :title="$t('home.welcome', { name: user!.given_name, surname: user!.surname })"
+            class="title"
+        ></TitleContainer>
         <v-row>
             <v-col>
                 <DeadlinesCard />
@@ -30,6 +33,7 @@
 <script setup lang="ts">
 import SubjectsCard from "@/components/home/cards/SubjectsCard.vue";
 import DeadlinesCard from "@/components/home/cards/DeadlinesCard.vue";
+import TitleContainer from "@/components/TitleContainer.vue";
 import { useCurrentUserQuery } from "@/queries/User";
 import { useDisplay } from "vuetify";
 
@@ -39,15 +43,16 @@ const { smAndDown } = useDisplay();
 
 <style scoped lang="scss">
 .title {
-    background-color: rgb(var(--v-theme-secondary));
-    color: rgb(var(--v-theme-text));
     margin-bottom: 15px;
-    margin-top: 15px;
-    padding: 10px;
-    border-radius: 2px;
+    margin-top: 30px;
 }
 
 .mobileCard {
     margin: 15px;
 }
+
+.homescreencontainer {
+    margin-left: 40px;
+    margin-right: 40px;
+}
 </style>
diff --git a/frontend/src/views/ProjectView.vue b/frontend/src/views/ProjectView.vue
index e041c9c5..a882b636 100644
--- a/frontend/src/views/ProjectView.vue
+++ b/frontend/src/views/ProjectView.vue
@@ -92,6 +92,6 @@ const isDataError = computed(
 <style scoped>
 .button-container {
     margin-top: 20px;
-    min-width: 170px;
+    min-width: 200px;
 }
 </style>
diff --git a/frontend/src/views/ProjectsView.vue b/frontend/src/views/ProjectsView.vue
index 6a158210..862ea6b8 100644
--- a/frontend/src/views/ProjectsView.vue
+++ b/frontend/src/views/ProjectsView.vue
@@ -1,16 +1,16 @@
 <template>
-    <div>
+    <div class="projects">
         <h1 v-if="isLoading">{{ $t("default.loading.loading_page") }}</h1>
         <h1 v-else-if="isError || noProjectsFound" class="welcome">
             {{ $t("project.not_found") }}
         </h1>
         <div v-else class="projectInfo">
-            <div class="rowheader">
-                <h1>{{ $t("project.myProject") }}</h1>
+            <TitleContainer :title="$t('project.myProject')">
                 <v-btn-toggle v-model="activeButton" class="button">
                     <v-btn value="finished">{{ $t("project.finished") }}</v-btn>
                 </v-btn-toggle>
-            </div>
+            </TitleContainer>
+            <v-divider class="divider" />
             <ProjectMiniCard
                 v-for="project in filteredProjects"
                 :key="project.id"
@@ -24,9 +24,9 @@
 <script setup lang="ts">
 import { useProjectsQuery } from "@/queries/Project";
 import ProjectMiniCard from "@/components/project/ProjectMiniCard.vue";
+import TitleContainer from "@/components/TitleContainer.vue";
 import { computed, ref } from "vue";
 import type Project from "@/models/Project";
-
 const { data: projects, isLoading, isError } = useProjectsQuery();
 const allProjects = computed(() =>
     isLoading.value ? [] : [...projects.value!.as_student, ...projects.value!.as_instructor]
@@ -63,16 +63,17 @@ const filteredProjects = computed(() => {
     margin: 25px;
 }
 
-.rowheader {
-    display: flex;
-    align-items: center;
-    margin-bottom: 30px;
-}
-
 .button {
     height: 30px;
     margin-top: 10px;
-    margin-left: 75px;
-    border: 1px solid rgb(var(--v-theme-text));
+    margin-left: 30px;
+}
+
+.projects {
+    margin: 15px;
+}
+
+.divider {
+    margin-bottom: 30px;
 }
 </style>
diff --git a/frontend/src/views/subject/CreateSubjectView.vue b/frontend/src/views/subject/CreateSubjectView.vue
index 67ca426c..bf559c44 100644
--- a/frontend/src/views/subject/CreateSubjectView.vue
+++ b/frontend/src/views/subject/CreateSubjectView.vue
@@ -2,10 +2,15 @@
     <div v-if="isError" class="v-container">
         <p>{{ $t("default.something-went-wrong") }}</p>
     </div>
-
     <v-row v-else>
         <v-col cols="1">
-            <v-btn variant="elevated" class="back-button" size="large" @click="dialog = true">
+            <v-btn
+                color="primary"
+                variant="elevated"
+                class="back-button"
+                size="large"
+                @click="dialog = true"
+            >
                 <v-icon>mdi-arrow-left</v-icon>
             </v-btn>
         </v-col>
@@ -14,7 +19,6 @@
                 <v-snackbar v-model="snackbar" :timeout="3500" color="error" top>
                     {{ $t("create_subject.error_snackbar") }}
                 </v-snackbar>
-
                 <v-dialog v-model="dialog" max-width="290" persistent>
                     <v-card>
                         <v-card-title class="headline">
@@ -51,7 +55,6 @@
                     >
                     </CreateSubjectBody>
                 </div>
-
                 <div class="confirm-btn-container">
                     <v-btn class="ma-2" color="grey" @click="dialog = true">
                         {{ $t("default.cancel") }}
@@ -187,11 +190,7 @@ async function handleSubmit() {
 
 <style scoped>
 .confirm-btn-container {
-    display: flex;
-    position: absolute;
-    right: 4vw;
-    bottom: 4vw;
-    margin-top: 2vh;
+    margin-top: 10px;
 }
 
 .back-button {
diff --git a/frontend/src/views/subject/SubjectView.vue b/frontend/src/views/subject/SubjectView.vue
index fb7cffeb..6db57b44 100644
--- a/frontend/src/views/subject/SubjectView.vue
+++ b/frontend/src/views/subject/SubjectView.vue
@@ -2,7 +2,6 @@
     <div v-if="isError" class="v-container">
         <p>{{ $t("default.something-went-wrong") }}</p>
     </div>
-
     <v-skeleton-loader v-else type="card" :loading="isLoading">
         <v-row>
             <v-snackbar v-model="snackbar" timeout="3000" color="primary">
@@ -13,51 +12,43 @@
                     </v-btn>
                 </template>
             </v-snackbar>
-
-            <v-col cols="1">
-                <router-link :to="{ name: 'subjects' }">
-                    <v-btn variant="elevated" class="back-button" size="large">
-                        <v-icon>mdi-arrow-left</v-icon>
+            <v-col class="col-sm-12 col-md-6 subjectcard">
+                <v-row>
+                    <v-col>
+                        <SubjectHeaderContainer
+                            v-if="subject"
+                            :title="subject!.name"
+                            :instructors="sortedInstructors"
+                            :academic-year="subject!.academic_year"
+                            :is-instructor="isInstructor"
+                            :is-student="isStudent"
+                            :is-admin="isAdmin"
+                            image-path="https://www.ugent.be/img/dcom/faciliteiten/ufo-logo.png"
+                        ></SubjectHeaderContainer>
+                    </v-col>
+                </v-row>
+                <v-row>
+                    <v-col>
+                        <SubjectProjectsPage
+                            v-if="subject"
+                            :projects="projects"
+                        ></SubjectProjectsPage>
+                    </v-col>
+                </v-row>
+            </v-col>
+            <v-col v-if="isAdmin || isInstructor" cols="2" class="action-btn-container">
+                <router-link :to="{ name: 'create-project', params: { subjectId: subjectId } }">
+                    <v-btn prepend-icon="mdi-plus-circle" class="button">
+                        {{ $t("subject.create_project") }}
                     </v-btn>
                 </router-link>
-            </v-col>
-            <v-col>
-                <BackgroundContainer>
-                    <v-row>
-                        <v-col>
-                            <SubjectHeaderContainer
-                                v-if="subject"
-                                :title="subject!.name"
-                                :instructors="sortedInstructors"
-                                :academic-year="subject!.academic_year"
-                                :is-instructor="isInstructor"
-                                :is-student="isStudent"
-                                :is-admin="isAdmin"
-                                image-path="https://www.ugent.be/img/dcom/faciliteiten/ufo-logo.png"
-                            ></SubjectHeaderContainer>
-                        </v-col>
-                    </v-row>
-                    <v-row>
-                        <v-col>
-                            <SubjectBody v-if="subject" :projects="projects"></SubjectBody>
-                        </v-col>
-                    </v-row>
-                </BackgroundContainer>
-            </v-col>
-            <v-col v-if="isAdmin || isInstructor" cols="2">
-                <div class="action-btn-container">
-                    <router-link :to="{ name: 'create-project', params: { subjectId: subjectId } }">
-                        <v-btn prepend-icon="mdi-plus-circle">
-                            {{ $t("subject.create_project") }}
-                        </v-btn>
-                    </router-link>
-                    <RegisterLinkButton
-                        v-if="isAdmin || isTeacher"
-                        :subjectId="subjectId"
-                        @register-link-btn-pressed="snackbar = true"
-                        @is-uuid-error="isUuidError = true"
-                    ></RegisterLinkButton>
-                </div>
+                <RegisterLinkButton
+                    v-if="isAdmin || isTeacher"
+                    :subjectId="subjectId"
+                    @register-link-btn-pressed="snackbar = true"
+                    @is-uuid-error="isUuidError = true"
+                    class="button"
+                ></RegisterLinkButton>
             </v-col>
         </v-row>
     </v-skeleton-loader>
@@ -71,9 +62,8 @@ import {
     useSubjectInstructorsQuery,
     useSubjectStudentsQuery,
 } from "@/queries/Subject";
-import BackgroundContainer from "@/components/BackgroundContainer.vue";
 import SubjectHeaderContainer from "@/components/subject/subjectview/header/SubjectHeaderContainer.vue";
-import SubjectBody from "@/components/subject/subjectview/body/SubjectBody.vue";
+import SubjectProjectsPage from "@/components/subject/subjectview/body/projects/SubjectProjectsPage.vue";
 import { useCurrentUserQuery } from "@/queries/User";
 import useIsTeacher from "@/composables/useIsTeacher";
 import useIsAdmin from "@/composables/useIsAdmin";
@@ -151,11 +141,38 @@ const { isTeacher } = useIsTeacher();
 </script>
 ;
 <style scoped>
-.back-button {
-    margin: 30px;
+.action-btn-container {
+    margin-top: 50px;
+    margin-right: 25px;
+    min-width: 200px;
+    margin-left: 25px;
 }
 
-.action-btn-container {
-    margin-top: 30px;
+@media (max-width: 900px) {
+    .action-btn-container {
+        display: flex;
+        order: -1;
+        margin-top: 50px;
+        margin-bottom: -30px;
+        width: 100%;
+        margin-left: 50px;
+    }
+    .button {
+        margin-right: 10px;
+    }
+}
+
+.subjectcard {
+    background-color: rgb(var(--v-theme-secondary));
+    margin: 50px 50px 50px 50px;
+    border-radius: 3px;
+    padding: 20px;
+}
+
+.button {
+    background-color: rgb(var(--v-theme-primary));
+    color: rgb(var(--v-theme-navtext));
+    margin-bottom: 10px;
+    width: 200px;
 }
 </style>
diff --git a/frontend/src/views/subject/SubjectsView.vue b/frontend/src/views/subject/SubjectsView.vue
index e15e46ee..a462c513 100644
--- a/frontend/src/views/subject/SubjectsView.vue
+++ b/frontend/src/views/subject/SubjectsView.vue
@@ -2,11 +2,10 @@
     <div v-if="isError" class="v-container">
         <p>Error: {{ error }}</p>
     </div>
-
     <v-skeleton-loader v-else type="card" :loading="isLoading">
-        <v-row>
-            <v-col :cols="isAdmin || isTeacher ? 10 : 12">
-                <BackgroundContainer>
+        <v-row class="subjectsview">
+            <v-col class="col-sm-12 col-md-6">
+                <v-card variant="flat">
                     <v-row>
                         <v-col>
                             <SubjectsHeaderContainer
@@ -14,6 +13,7 @@
                                 :subjects="subjectsByAcademicYear"
                                 @academic-year-changed="onAcademicYearChanged"
                                 @subjects-filter-changed="onSubjectsFilterChanged"
+                                class="headercontainer"
                             ></SubjectsHeaderContainer>
                         </v-col>
                     </v-row>
@@ -34,16 +34,14 @@
                             ></SubjectCard>
                         </v-col>
                     </v-row>
-                </BackgroundContainer>
+                </v-card>
             </v-col>
-            <v-col v-if="isAdmin || isTeacher" cols="2">
-                <div class="action-btn-container">
-                    <router-link :to="{ name: 'create-subject' }">
-                        <v-btn prepend-icon="mdi-plus-circle">
-                            {{ $t("subjects.create_subject") }}
-                        </v-btn>
-                    </router-link>
-                </div>
+            <v-col v-if="isAdmin || isTeacher" cols="2" class="action-btn-container">
+                <router-link :to="{ name: 'create-subject' }">
+                    <v-btn prepend-icon="mdi-plus-circle" class="button">
+                        {{ $t("subjects.create_subject") }}
+                    </v-btn>
+                </router-link>
             </v-col>
         </v-row>
     </v-skeleton-loader>
@@ -51,7 +49,6 @@
 
 <script setup lang="ts">
 import { useSubjectsQuery } from "@/queries/Subject";
-import BackgroundContainer from "@/components/BackgroundContainer.vue";
 import SubjectsHeaderContainer from "@/components/subject/subjectsview/header/SubjectsHeaderContainer.vue";
 import SubjectCard from "@/components/subject/subjectsview/body/SubjectCard.vue";
 import { computed, ref } from "vue";
@@ -126,15 +123,32 @@ const onAcademicYearChanged = (academicYear: number) => {
 </script>
 
 <style scoped>
-.subject-card {
-    margin-top: 10px;
-}
-
 .action-btn-container {
     margin-top: 30px;
+    min-width: 200px;
 }
 
 .no-results {
     text-align: center;
+    margin: 50px;
+}
+
+.subjectsview {
+    margin-left: 40px;
+    margin-top: 30px;
+    margin-right: 40px;
+    background-color: rgb(var(--v-theme-background));
+}
+
+.headercontainer {
+    border-color: rgb(var(--v-theme-text));
+    background-color: rgb(var(--v-theme-primary));
+    border-radius: 3px;
+}
+
+.button {
+    background-color: rgb(var(--v-theme-primary));
+    color: white;
+    width: 200px;
 }
 </style>
diff --git a/frontend/tests/components/project/ProjectMiniCard.spec.ts b/frontend/tests/components/project/ProjectMiniCard.spec.ts
index 18bf83e4..5d064ad9 100644
--- a/frontend/tests/components/project/ProjectMiniCard.spec.ts
+++ b/frontend/tests/components/project/ProjectMiniCard.spec.ts
@@ -40,9 +40,4 @@ describe("ProjectMiniCard", async () => {
         expect(wrapper.text()).toContain("subjectnaam")
         expect(wrapper.text()).toContain("Deadline:")
     });
-
-    it("render button", () => {
-        const VButton = wrapper.findComponent({name: 'VBtn'})
-        expect(VButton.text()).toContain("Naar project")
-    });
 });
diff --git a/frontend/tests/components/subject/extra/SubjectIcon.spec.ts b/frontend/tests/components/subject/extra/SubjectIcon.spec.ts
new file mode 100644
index 00000000..c6202534
--- /dev/null
+++ b/frontend/tests/components/subject/extra/SubjectIcon.spec.ts
@@ -0,0 +1,15 @@
+import { mount } from "@vue/test-utils";
+import {expect, describe, it} from "vitest";
+import SubjectIcon from "@/components/subject/extra/SubjectIcon.vue"
+
+describe("SubjectIcon", () => {
+    const wrapper = mount(SubjectIcon, {
+        props: {
+            role: "student",
+            size: "30px"
+        }
+    })
+    it("render icon", () => {
+        expect(wrapper.findComponent({name: "VIcon"}).exists()).toBeTruthy()
+    })
+})
diff --git a/frontend/tests/components/subject/subjectsview/body/SubjectCard.spec.ts b/frontend/tests/components/subject/subjectsview/body/SubjectCard.spec.ts
new file mode 100644
index 00000000..09c9a5e1
--- /dev/null
+++ b/frontend/tests/components/subject/subjectsview/body/SubjectCard.spec.ts
@@ -0,0 +1,18 @@
+import { mount } from "@vue/test-utils";
+import {expect, describe, it} from "vitest";
+import SubjectsCard from "@/components/subject/subjectsview/body/SubjectCard.vue"
+
+describe("subjectsCard", () => {
+    const wrapper = mount(SubjectsCard, {
+        props: {
+            subject: {id: 1, name: "testsubject"},
+            role: "student"
+        },
+        global: {
+            stubs: ['router-link']
+        }
+    })
+    it("render card", () => {
+        expect(wrapper.findComponent({name: 'router-link'}).exists()).toBeTruthy()
+    })
+})
diff --git a/frontend/tests/components/subject/subjectsview/header/SubjectsHeaderCard.spec.ts b/frontend/tests/components/subject/subjectsview/header/SubjectsHeaderCard.spec.ts
new file mode 100644
index 00000000..c87d31fe
--- /dev/null
+++ b/frontend/tests/components/subject/subjectsview/header/SubjectsHeaderCard.spec.ts
@@ -0,0 +1,33 @@
+import { mount } from "@vue/test-utils";
+import {expect, describe, it, vi} from "vitest";
+import SubjectsHeaderCard from "@/components/subject/subjectsview/header/SubjectsHeaderCard.vue"
+
+describe("SubjectsHeaderCard", () => {
+    const ResizeObserverMock = vi.fn(() => ({
+        observe: vi.fn(),
+        unobserve: vi.fn(),
+        disconnect: vi.fn(),
+    }));
+
+    vi.stubGlobal("ResizeObserver", ResizeObserverMock);
+    it("render as student"), () => {
+        const wrapper = mount(SubjectsHeaderCard, {
+            props: {
+                academicYears: [23],
+                subjects: [{role: "student", subjectData: {id: 1}}]
+            }
+        })
+        expect(wrapper.text()).toContain("Mijn vakken")
+        expect(wrapper.text()).toContain("23-24")
+    }
+    it("render as teacher", () => {
+        const wrapper = mount(SubjectsHeaderCard, {
+            props: {
+                academicYears: [23],
+                subjects: [{role: "instructor", subjectData: {id: 1}}, {role: "student", subjectData: {id: 2}}]
+            }
+        })
+        expect(wrapper.text()).toContain("Toon lesgever vakken")
+        expect(wrapper.text()).toContain("Toon student vakken")
+    });
+})
diff --git a/frontend/tests/components/subject/subjectsview/header/SubjectsHeaderContainer.spec.ts b/frontend/tests/components/subject/subjectsview/header/SubjectsHeaderContainer.spec.ts
new file mode 100644
index 00000000..b63e535b
--- /dev/null
+++ b/frontend/tests/components/subject/subjectsview/header/SubjectsHeaderContainer.spec.ts
@@ -0,0 +1,18 @@
+import { mount } from "@vue/test-utils";
+import {expect, describe, it} from "vitest";
+import SubjectsHeaderContainer from "@/components/subject/subjectsview/header/SubjectsHeaderContainer.vue"
+
+describe("SubjectsHeaderContainer", () => {
+    const wrapper = mount(SubjectsHeaderContainer, {
+        props: {
+            academicYears: [23],
+            subjects: [{role: "student"}]
+        },
+        global: {
+            stubs: ['SubjectsHeaderCard']
+        }
+    })
+    it("render card", () => {
+        expect(wrapper.findComponent({name: "SubjectsHeaderCard"}).exists()).toBeTruthy()
+    })
+})
diff --git a/frontend/tests/views/GroupsView.spec.ts b/frontend/tests/views/GroupsView.spec.ts
index bbfa093f..36225484 100644
--- a/frontend/tests/views/GroupsView.spec.ts
+++ b/frontend/tests/views/GroupsView.spec.ts
@@ -117,10 +117,6 @@ describe("GroupsView", () => {
         expect(wrapper.findComponent(".groupCard").exists()).toBeTruthy()
     });
 
-    it("render if user is student", () => {
-        expect(wrapper.findComponent({name: "VBtn"}).exists()).toBeFalsy()
-    });
-
     it("render if user is teacher", async () => {
         testCurrentUserQuery.data.value.setUid("teacher")
         await wrapper.vm.$nextTick();
diff --git a/frontend/tests/views/subject/SubjectsView.spec.ts b/frontend/tests/views/subject/SubjectsView.spec.ts
new file mode 100644
index 00000000..151c153f
--- /dev/null
+++ b/frontend/tests/views/subject/SubjectsView.spec.ts
@@ -0,0 +1,54 @@
+import { mount } from "@vue/test-utils";
+import {expect, describe, it, vi} from "vitest";
+import SubjectsView from "../../../src/views/subject/SubjectsView.vue"
+import {ref} from "vue";
+
+const testSubjectsQuery = {
+    data: ref({as_student: [{id: 1, academic_year: 23}], as_instructor: []}),
+    isLoading: ref(false),
+    isError: ref(true),
+    error: ref({as_student: [{id: 1}]}),
+    setError(value){
+        this.isError.value = value
+    },
+    setData(value){
+        this.data.value = value
+    }
+}
+
+const testCurrentUserQuery = {
+    data: ref({is_admin: false, is_teacher: true}),
+}
+
+vi.mock("@/queries/User", () => ({
+    useCurrentUserQuery: vi.fn(() => testCurrentUserQuery)
+}))
+
+vi.mock("@/queries/Subject", () => ({
+    useSubjectsQuery: vi.fn(() => testSubjectsQuery)
+}))
+
+describe("SubjectsView", () => {
+    const wrapper = mount(SubjectsView, {
+        global: {
+            stubs: ['router-link', 'SubjectCard', 'SubjectsHeaderContainer']
+        }
+    })
+    it("render if error", async () => {
+        expect(wrapper.text()).toContain("Error:")
+        testSubjectsQuery.setError(false)
+        await wrapper.vm.$nextTick()
+    })
+    it("render subjectsview with subjects", () => {
+        expect(wrapper.findComponent({name: "SubjectsHeaderContainer"}).exists()).toBe(true)
+        expect(wrapper.findComponent({name: "SubjectCard"}).exists()).toBe(true)
+    })
+    it("render subjectsview without subjects", async () => {
+        testSubjectsQuery.setData({as_student: [], as_instructor: []})
+        await wrapper.vm.$nextTick()
+        expect(wrapper.text()).toContain("Geen vakken gevonden.")
+    })
+    it("render if teacher", () => {
+        expect(wrapper.findComponent({name: 'router-link'}).exists()).toBe(true)
+    })
+})