diff --git a/frontend/src/components/BackgroundContainer.vue b/frontend/src/components/BackgroundContainer.vue
index b9623d9a..0ea05c3b 100644
--- a/frontend/src/components/BackgroundContainer.vue
+++ b/frontend/src/components/BackgroundContainer.vue
@@ -11,7 +11,6 @@
     padding: 20px;
     height: 100vh;
     border: 25px solid white;
-    border-radius: 50px;
     background-color: var(--color-secondary);
 }
 </style>
diff --git a/frontend/src/components/buttons/HeaderSubtitleButton.vue b/frontend/src/components/buttons/HeaderSubtitleButton.vue
index f622ccb6..ba34d3a3 100644
--- a/frontend/src/components/buttons/HeaderSubtitleButton.vue
+++ b/frontend/src/components/buttons/HeaderSubtitleButton.vue
@@ -25,10 +25,19 @@ defineProps<{
 </script>
 
 <style scoped>
+.not-clickable {
+    cursor: default;
+    pointer-events: none;
+}
+
 .subtitle-button {
     margin-right: 10px;
 }
 
+.subtitle-button-active {
+    background-color: #9fb6ff;
+}
+
 .button-text {
     color: #003eff;
     font-weight: 1000;
diff --git a/frontend/src/components/subject/body/announcements/SubjectAnnouncementsPage.vue b/frontend/src/components/subject/body/announcements/SubjectAnnouncementsPage.vue
deleted file mode 100644
index 5b966c85..00000000
--- a/frontend/src/components/subject/body/announcements/SubjectAnnouncementsPage.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-    <h1>Announcements</h1>
-</template>
-
-<script setup lang="ts"></script>
-
-<style scoped></style>
diff --git a/frontend/src/components/subject/body/projects/SubjectProjectPage.vue b/frontend/src/components/subject/body/projects/SubjectProjectPage.vue
deleted file mode 100644
index 84d96ea7..00000000
--- a/frontend/src/components/subject/body/projects/SubjectProjectPage.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<template>
-    <div class="project-container">
-        <v-card class="project-card" variant="text" rounded="xl">
-            <div class="colored-zone"></div>
-
-            <v-card-title class="title">
-                <v-row>
-                    <v-col>
-                        <span>{{ project.name }}</span>
-                    </v-col>
-                    <v-col class="text-right">
-                        <router-link :to="`/project/${project.id}`" class="text-right chevron">
-                            <v-icon size="small">mdi-arrow-right</v-icon>
-                        </router-link>
-                    </v-col>
-                </v-row>
-            </v-card-title>
-            <v-card-subtitle class="d-block py-3">
-                <v-icon>mdi-alarm</v-icon>
-                {{ $d(project.deadline, "long") }}
-            </v-card-subtitle>
-
-            <v-card-text>
-                <h2>{{ $t("subject.project.assignment") }}</h2>
-                <p
-                    v-if="project.description && project.description.length <= assignmentLength"
-                    class="project_description"
-                >
-                    {{ project.description }}
-                </p>
-                <!-- Show truncated description if not expanded -->
-                <p v-else-if="project.description && !expanded" class="project_description">
-                    {{ project.description.substring(0, assignmentLength) + "..." }}
-                </p>
-                <!-- Show full description if expanded -->
-                <v-expand-transition>
-                    <div v-if="expanded">
-                        <p class="project_description">{{ project.description }}</p>
-                    </div>
-                </v-expand-transition>
-            </v-card-text>
-            <!-- Toggle button for expanding/collapsing description -->
-            <div v-if="project.description && project.description.length > assignmentLength">
-                <v-divider></v-divider>
-                <v-card-actions>
-                    <v-btn @click="expanded = !expanded">
-                        {{ !expanded ? "Show Full Assignment" : "Hide Assignment" }}
-                    </v-btn>
-                </v-card-actions>
-            </div>
-        </v-card>
-        <v-card class="project-card" rounded="xl" variant="text">
-            <v-card-title class="title">{{ $t("subject.project.group") }}</v-card-title>
-        </v-card>
-
-        <v-card class="project-card" rounded="xl" variant="text" height="410px">
-            <v-card-title class="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";
-
-defineProps<{
-    selectedTab: number;
-    project: Project;
-    isLoading: boolean;
-}>();
-
-const expanded = ref(false);
-const assignmentLength = 100;
-</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;
-    padding: 20px;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    position: relative;
-    margin-bottom: 10px;
-}
-
-.colored-zone {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 80px; /* Adjust the height as needed */
-    background-color: #eafbff; /* Desired background color */
-    border-radius: 20px 20px 0 0; /* Rounded corners for top half */
-    z-index: -1; /* Ensure the colored zone is behind the card content */
-}
-
-.title {
-    font-size: 28px;
-    text-transform: capitalize;
-    display: block;
-    line-height: 1.2;
-    font-weight: 500;
-}
-
-.chevron {
-    margin-right: 10px;
-    color: black;
-    display: block;
-}
-
-.project-container {
-    overflow: auto;
-    max-height: 400px;
-    scrollbar-width: none; /* For Firefox */
-}
-
-.project-container::-webkit-scrollbar {
-    width: 0; /* For Chrome, Safari, and Opera */
-}
-</style>
diff --git a/frontend/src/components/subject/extra/SubjectIcon.vue b/frontend/src/components/subject/extra/SubjectIcon.vue
new file mode 100644
index 00000000..8dcd8a83
--- /dev/null
+++ b/frontend/src/components/subject/extra/SubjectIcon.vue
@@ -0,0 +1,26 @@
+<template>
+    <v-icon color="white" :size="size">
+        {{ `mdi-${userRole}` }}
+    </v-icon>
+</template>
+
+<script setup lang="ts">
+import { SubjectRole } from "@/models/Subject";
+import { computed, toRefs } from "vue";
+
+const props = defineProps<{
+    role: SubjectRole;
+    size: string;
+}>();
+
+const { role } = toRefs(props);
+
+const userRole = computed(() => {
+    if (role.value === SubjectRole.Instructor) return "account-tie";
+    if (role.value === SubjectRole.Student) return "school";
+    if (role.value === SubjectRole.Admin) return "security";
+    return "cancel";
+});
+</script>
+
+<style scoped></style>
diff --git a/frontend/src/components/subject/header/SubjectHeaderCard.vue b/frontend/src/components/subject/header/SubjectHeaderCard.vue
deleted file mode 100644
index e368af31..00000000
--- a/frontend/src/components/subject/header/SubjectHeaderCard.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<template>
-    <v-card variant="text" class="title-card" height="165">
-        <v-skeleton-loader :loading="isLoading" type="card" color="white">
-            <v-row>
-                <v-col>
-                    <v-card-title class="title">
-                        {{ title }}
-                    </v-card-title>
-                    <v-card-text>
-                        <HeaderSubtitleButton
-                            :title="$t('subject.academy_year') + ' ' + academicYear"
-                            :clickable="false"
-                            :active="false"
-                        ></HeaderSubtitleButton>
-                        <div class="d-flex justify-start instr-container">
-                            <HeaderSubtitleButton
-                                v-for="instructor in instructors"
-                                :key="instructor?.uid"
-                                :title="instructor?.given_name"
-                                :clickable="false"
-                                :active="false"
-                            ></HeaderSubtitleButton>
-                        </div>
-                    </v-card-text>
-                </v-col>
-            </v-row>
-        </v-skeleton-loader>
-    </v-card>
-</template>
-
-<script setup lang="ts">
-import type User from "@/models/User";
-import HeaderSubtitleButton from "@/components/buttons/HeaderSubtitleButton.vue";
-
-defineProps<{
-    title: string;
-    academicYear: string;
-    instructors: User[];
-    isLoading: boolean;
-}>();
-</script>
-
-<style scoped>
-.title-card {
-    background-color: white;
-    padding: 20px;
-    border-radius: 20px;
-}
-
-.title {
-    font-size: 32px;
-    letter-spacing: -0.5px;
-    text-transform: capitalize;
-    font-weight: bold;
-    margin-bottom: 12px;
-    font-family: "Poppins", sans-serif;
-}
-
-.instr-container {
-    margin-top: 10px;
-    margin-bottom: 5px;
-}
-</style>
diff --git a/frontend/src/components/subject/header/SubjectHeaderContainer.vue b/frontend/src/components/subject/header/SubjectHeaderContainer.vue
deleted file mode 100644
index c3953968..00000000
--- a/frontend/src/components/subject/header/SubjectHeaderContainer.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template>
-    <v-row>
-        <v-col cols="4">
-            <SubjectHeaderImage :imagePath="imagePath" :is-loading="isLoading">
-            </SubjectHeaderImage>
-        </v-col>
-        <v-col cols="8">
-            <SubjectHeaderCard
-                :title="title"
-                :academic-year="academicYear"
-                :instructors="instructors"
-                :is-loading="isLoading"
-            >
-            </SubjectHeaderCard>
-        </v-col>
-    </v-row>
-</template>
-
-<script setup lang="ts">
-import SubjectHeaderCard from "@/components/subject/header/SubjectHeaderCard.vue";
-import type User from "@/models/User";
-import SubjectHeaderImage from "@/components/subject/header/SubjectHeaderImage.vue";
-
-defineProps<{
-    title: string;
-    academicYear: string;
-    instructors: User[];
-    isLoading: boolean;
-    imagePath: string;
-}>();
-</script>
-
-<style scoped></style>
diff --git a/frontend/src/components/subject/header/SubjectHeaderImage.vue b/frontend/src/components/subject/header/SubjectHeaderImage.vue
deleted file mode 100644
index 2f079900..00000000
--- a/frontend/src/components/subject/header/SubjectHeaderImage.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-    <v-skeleton-loader type="image" class="header-img" :loading="isLoading">
-        <v-img aspect-ratio="16/9" cover :src="imagePath" class="header-img"></v-img>
-    </v-skeleton-loader>
-</template>
-
-<script setup lang="ts">
-defineProps<{
-    imagePath: string;
-    isLoading: boolean;
-}>();
-</script>
-
-<style scoped>
-.header-img {
-    border-radius: 20px;
-    height: 165px;
-}
-</style>
diff --git a/frontend/src/components/subject/subjectsview/SubjectCard.vue b/frontend/src/components/subject/subjectsview/SubjectCard.vue
new file mode 100644
index 00000000..8701fce1
--- /dev/null
+++ b/frontend/src/components/subject/subjectsview/SubjectCard.vue
@@ -0,0 +1,50 @@
+<template>
+    <router-link :to="{ name: 'subject', params: { subjectId: subject.id } }" class="router-link">
+        <v-card class="subject-card" height="16vh" color="#1D357EFF">
+            <SubjectIcon :role="role" size="xx-large" class="subject-icon"></SubjectIcon>
+            <v-card-title class="subject-title">
+                {{ subject?.name }}
+                <v-icon class="">mdi-chevron-right</v-icon>
+            </v-card-title>
+        </v-card>
+    </router-link>
+</template>
+
+<script setup lang="ts">
+import type Subject from "@/models/Subject";
+import { SubjectRole } from "@/models/Subject";
+import SubjectIcon from "@/components/subject/extra/SubjectIcon.vue";
+
+defineProps<{
+    subject: Subject;
+    role: SubjectRole;
+}>();
+</script>
+
+<style scoped>
+.router-link {
+    text-decoration: none;
+    width: 100%;
+}
+
+.subject-card {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    position: relative;
+    width: 100%;
+}
+
+.subject-title {
+    color: white;
+    font-size: 3vh;
+    position: absolute;
+    bottom: 0;
+}
+
+.subject-icon {
+    position: absolute;
+    top: 10px;
+    right: 15px;
+}
+</style>
diff --git a/frontend/src/components/subject/subjectsview/SubjectsHeaderCard.vue b/frontend/src/components/subject/subjectsview/SubjectsHeaderCard.vue
new file mode 100644
index 00000000..c70bb20e
--- /dev/null
+++ b/frontend/src/components/subject/subjectsview/SubjectsHeaderCard.vue
@@ -0,0 +1,118 @@
+<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>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, toRefs, watch } from "vue";
+import useAcademicYear from "@/composables/useAcademicYear";
+import { type SubjectDetails, type SubjectFilter, SubjectRole } from "@/models/Subject";
+
+const props = defineProps<{
+    academicYears: number[];
+    subjects: SubjectDetails[];
+}>();
+const { academicYears, subjects } = toRefs(props);
+const activeAcademicYear = ref(useAcademicYear());
+const showInstructorSubjects = ref(true);
+const showStudentSubjects = ref(true);
+
+const activeSubjectFilter = computed(() => {
+    return {
+        showInstructorSubjects: showInstructorSubjects.value,
+        showStudentSubjects: showStudentSubjects.value,
+    };
+});
+
+const isInstructor = computed(() => {
+    return subjects.value.some((subject) => subject.role === SubjectRole.Instructor);
+});
+
+const isStudent = computed(() => {
+    return subjects.value.some((subject) => subject.role === SubjectRole.Student);
+});
+
+const emit = defineEmits<{
+    (e: "academic-year-changed", academicYear: number): void;
+    (e: "subjects-filter-changed", filter: SubjectFilter): void;
+}>();
+
+watch(activeAcademicYear, (newVal: number | undefined) => {
+    if (newVal !== undefined) {
+        emit("academic-year-changed", newVal);
+        showInstructorSubjects.value = true;
+        showStudentSubjects.value = true;
+    }
+});
+
+watch(activeSubjectFilter, (newVal: SubjectFilter | undefined) => {
+    if (newVal !== undefined) {
+        emit("subjects-filter-changed", newVal);
+    }
+});
+</script>
+
+<style scoped>
+.title-card {
+    background-color: white;
+    padding: 20px;
+}
+
+.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;
+}
+
+.checkbox container {
+    display: flex;
+    justify-content: flex-end;
+}
+
+.subject-checkbox {
+    margin-top: -15px;
+}
+</style>
diff --git a/frontend/src/components/subject/subjectsview/SubjectsHeaderContainer.vue b/frontend/src/components/subject/subjectsview/SubjectsHeaderContainer.vue
new file mode 100644
index 00000000..6aa0eb17
--- /dev/null
+++ b/frontend/src/components/subject/subjectsview/SubjectsHeaderContainer.vue
@@ -0,0 +1,35 @@
+<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>
+</template>
+
+<script setup lang="ts">
+import SubjectsHeaderCard from "@/components/subject/subjectsview/SubjectsHeaderCard.vue";
+import SubjectsHeaderImage from "@/components/subject/subjectsview/SubjectsHeaderImage.vue";
+import type { SubjectDetails, SubjectFilter } from "@/models/Subject";
+
+defineProps<{
+    academicYears: number[];
+    subjects: SubjectDetails[];
+}>();
+
+defineEmits<{
+    (e: "academic-year-changed", academicYear: number): void;
+    (e: "subjects-filter-changed", filter: SubjectFilter): void;
+}>();
+</script>
+
+<style scoped></style>
diff --git a/frontend/src/components/subject/subjectsview/SubjectsHeaderImage.vue b/frontend/src/components/subject/subjectsview/SubjectsHeaderImage.vue
new file mode 100644
index 00000000..1be93d63
--- /dev/null
+++ b/frontend/src/components/subject/subjectsview/SubjectsHeaderImage.vue
@@ -0,0 +1,15 @@
+<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/body/SubjectBody.vue b/frontend/src/components/subject/subjectview/body/SubjectBody.vue
similarity index 68%
rename from frontend/src/components/subject/body/SubjectBody.vue
rename to frontend/src/components/subject/subjectview/body/SubjectBody.vue
index da4a6632..bc04c9c6 100644
--- a/frontend/src/components/subject/body/SubjectBody.vue
+++ b/frontend/src/components/subject/subjectview/body/SubjectBody.vue
@@ -14,31 +14,26 @@
 
     <v-window v-model="tab">
         <v-window-item value="0" key="0">
-            <SubjectProjectsPage :projects="projects" :is-loading="isLoading"></SubjectProjectsPage>
+            <SubjectProjectsPage :projects="projects"></SubjectProjectsPage>
         </v-window-item>
         <v-window-item value="1" key="1">
-            <SubjectAnnouncementsPage />
-        </v-window-item>
-        <v-window-item value="2" key="2">
             <SubjectGroupsPage />
         </v-window-item>
     </v-window>
 </template>
 
 <script setup lang="ts">
-import SubjectProjectsPage from "@/components/subject/body/projects/SubjectProjectsPage.vue";
-import SubjectAnnouncementsPage from "@/components/subject/body/announcements/SubjectAnnouncementsPage.vue";
-import SubjectGroupsPage from "@/components/subject/body/groups/SubjectGroupsPage.vue";
+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[];
-    isLoading: boolean;
 }>();
 
-const items = ["projects", "announcements", "groups"];
+const items = ["projects", "groups"];
 const tab = ref(0);
 </script>
 
diff --git a/frontend/src/components/subject/body/groups/SubjectGroupsPage.vue b/frontend/src/components/subject/subjectview/body/groups/SubjectGroupsPage.vue
similarity index 100%
rename from frontend/src/components/subject/body/groups/SubjectGroupsPage.vue
rename to frontend/src/components/subject/subjectview/body/groups/SubjectGroupsPage.vue
diff --git a/frontend/src/components/subject/subjectview/body/projects/SubjectProjectPage.vue b/frontend/src/components/subject/subjectview/body/projects/SubjectProjectPage.vue
new file mode 100644
index 00000000..a039d150
--- /dev/null
+++ b/frontend/src/components/subject/subjectview/body/projects/SubjectProjectPage.vue
@@ -0,0 +1,174 @@
+<template>
+    <div class="project-container">
+        <v-card class="project-card" variant="text">
+            <router-link
+                :to="{ name: 'project', params: { projectId: project.id } }"
+                class="router"
+            >
+                <div class="colored-zone"></div>
+                <v-card-title class="title">
+                    <v-row>
+                        <v-col class="title-col" cols="10">
+                            <span>{{ project.name }}</span>
+                        </v-col>
+                        <v-col class="text-right">
+                            <v-icon size="small">mdi-arrow-right</v-icon>
+                        </v-col>
+                    </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>{{ $t("subject.project.assignment") }}</h2>
+                <div
+                    v-if="project.description && project.description.length <= assignmentLength"
+                    class="project_description"
+                    v-html="renderQuillContent(project.description)"
+                ></div>
+                <!-- Show truncated description if not expanded -->
+                <div
+                    v-else-if="project.description && !expanded"
+                    class="project_description"
+                    v-html="
+                        renderQuillContent(
+                            project.description.substring(0, assignmentLength) + '...'
+                        )
+                    "
+                ></div>
+                <!-- Show full description if expanded -->
+                <v-expand-transition>
+                    <div
+                        v-if="expanded"
+                        class="project_description"
+                        v-html="renderQuillContent(project.description)"
+                    ></div>
+                </v-expand-transition>
+            </v-card-text>
+            <!-- Toggle button for expanding/collapsing description -->
+            <div v-if="project.description && project.description.length > assignmentLength">
+                <v-divider></v-divider>
+                <v-card-actions>
+                    <v-btn @click="expanded = !expanded">
+                        {{
+                            !expanded
+                                ? $t("subject.projectsPage.show_assignment")
+                                : $t("subject.projectsPage.hide_assignment")
+                        }}
+                    </v-btn>
+                </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 { Quill } from "@vueup/vue-quill";
+
+defineProps<{
+    selectedTab: number;
+    project: Project;
+}>();
+
+const expanded = ref(false);
+const assignmentLength = 100;
+
+const renderQuillContent = (content: string) => {
+    const quill = new Quill(document.createElement("div"));
+    quill.root.innerHTML = content;
+    return quill.root.innerHTML;
+};
+</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;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    position: relative;
+    margin-bottom: 10px;
+}
+
+.router {
+    text-decoration: none;
+    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 */
+    z-index: -1; /* Ensure the colored zone is behind the card content */
+}
+
+.title {
+    font-size: 30px;
+    letter-spacing: -0.5px;
+    font-weight: bold;
+    margin-bottom: 20px;
+    font-family: "Poppins", sans-serif;
+    color: white;
+    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;
+    scrollbar-width: none; /* For Firefox */
+}
+
+.project-container::-webkit-scrollbar {
+    width: 0; /* For Chrome, Safari, and Opera */
+}
+
+.title-col {
+    display: flex;
+    justify-content: space-between;
+    max-width: 80%;
+    overflow: auto;
+    scrollbar-width: none;
+}
+
+.title-col::-webkit-scrollbar {
+    width: 0; /* For Chrome, Safari, and Opera */
+}
+</style>
diff --git a/frontend/src/components/subject/body/projects/SubjectProjectsPage.vue b/frontend/src/components/subject/subjectview/body/projects/SubjectProjectsPage.vue
similarity index 80%
rename from frontend/src/components/subject/body/projects/SubjectProjectsPage.vue
rename to frontend/src/components/subject/subjectview/body/projects/SubjectProjectsPage.vue
index 0688227b..b84a79ec 100644
--- a/frontend/src/components/subject/body/projects/SubjectProjectsPage.vue
+++ b/frontend/src/components/subject/subjectview/body/projects/SubjectProjectsPage.vue
@@ -4,7 +4,6 @@
             <SubjectProjectsList
                 :projects="filteredProjects"
                 :selected-tab="selectedTab"
-                :is-loading="isLoading"
                 @tab-changed="updateSelectedTab"
                 @filter-changed="updateFilterOption"
             ></SubjectProjectsList>
@@ -12,20 +11,19 @@
         <v-col cols="7">
             <v-window v-model="selectedTab" direction="vertical">
                 <v-window-item
-                    v-for="(project, index) in filteredProjects"
-                    :key="index"
-                    :value="index"
+                    v-for="project in filteredProjects"
+                    :key="project.id"
+                    :value="project.id"
                 >
                     <SubjectProjectPage
                         :selected-tab="selectedTab"
                         :project="project"
-                        :is-loading="isLoading"
                     ></SubjectProjectPage>
                 </v-window-item>
 
                 <v-window-item v-if="filteredProjects.length === 0" :key="'placeholder'">
                     <div class="placeholder">
-                        <p>No projects available.</p>
+                        <p>{{ $t("subject.projectsPage.no_projects") }}</p>
                     </div>
                 </v-window-item>
             </v-window>
@@ -34,15 +32,14 @@
 </template>
 
 <script setup lang="ts">
-import SubjectProjectsList from "@/components/subject/body/projects/list/SubjectProjectsList.vue";
+import SubjectProjectsList from "@/components/subject/subjectview/body/projects/list/SubjectProjectsList.vue";
 import type Project from "@/models/Project";
 import { FilterOptions } from "@/models/Project";
 import { computed, ref, toRefs } from "vue";
-import SubjectProjectPage from "@/components/subject/body/projects/SubjectProjectPage.vue";
+import SubjectProjectPage from "@/components/subject/subjectview/body/projects/SubjectProjectPage.vue";
 
 const props = defineProps<{
     projects: Project[];
-    isLoading: boolean;
 }>();
 
 const { projects } = toRefs(props);
@@ -60,7 +57,6 @@ const filteredProjects = computed(() => {
     } else if (filterOption.value === FilterOptions.Completed) {
         return sortedProjects.filter((project) => new Date(project.deadline) <= currentDate);
     }
-    console.error("Invalid filter option");
     return sortedProjects;
 });
 
@@ -70,7 +66,9 @@ const updateSelectedTab = (tabIndex: number) => {
 
 const updateFilterOption = (option: FilterOptions) => {
     filterOption.value = option;
-    updateSelectedTab(0);
+    if (filteredProjects.value.length > 0) {
+        updateSelectedTab(filteredProjects.value[0].id);
+    }
 };
 </script>
 
@@ -81,7 +79,6 @@ const updateFilterOption = (option: FilterOptions) => {
     align-items: center;
     height: 400px; /* Adjust height as needed */
     border: 1px solid #ccc;
-    border-radius: 8px;
 }
 
 .placeholder p {
diff --git a/frontend/src/components/subject/body/projects/list/SubjectProjectsList.vue b/frontend/src/components/subject/subjectview/body/projects/list/SubjectProjectsList.vue
similarity index 53%
rename from frontend/src/components/subject/body/projects/list/SubjectProjectsList.vue
rename to frontend/src/components/subject/subjectview/body/projects/list/SubjectProjectsList.vue
index 7893885a..ffc25f33 100644
--- a/frontend/src/components/subject/body/projects/list/SubjectProjectsList.vue
+++ b/frontend/src/components/subject/subjectview/body/projects/list/SubjectProjectsList.vue
@@ -1,53 +1,45 @@
 <template>
-    <v-card variant="text" class="projects-card" height="400px">
+    <v-card variant="text" class="projects-card">
         <v-card-title>
             <span class="title">{{ $t("subject.projects") }}</span>
         </v-card-title>
         <v-card-subtitle>
-            <div class="d-flex justify-start filter-btn-container">
-                <HeaderSubtitleButton
-                    :title="$t('subject.projectsPage.all')"
-                    clickable
-                    :active="activeButton === FilterOptions.All"
-                    @click="activeButton = FilterOptions.All"
-                ></HeaderSubtitleButton>
-                <HeaderSubtitleButton
-                    :title="$t('subject.projectsPage.active')"
-                    clickable
-                    :active="activeButton === FilterOptions.Active"
-                    @click="activeButton = FilterOptions.Active"
-                ></HeaderSubtitleButton>
-                <HeaderSubtitleButton
-                    :title="$t('subject.projectsPage.completed')"
-                    clickable
-                    :active="activeButton === FilterOptions.Completed"
-                    @click="activeButton = FilterOptions.Completed"
-                ></HeaderSubtitleButton>
-            </div>
+            <v-chip-group v-model="activeButton" column mandatory>
+                <v-chip
+                    v-for="(filter, index) in filterOptions"
+                    :key="index"
+                    :value="FilterOptions[filter]"
+                    color="primary"
+                    variant="tonal"
+                >
+                    {{ $t(`subject.projectsPage.${filter.toLowerCase()}`) }}
+                </v-chip>
+            </v-chip-group>
         </v-card-subtitle>
-        <v-skeleton-loader type="card" :loading="isLoading" color="white">
-            <v-card-text class="projects-tab">
+        <v-card-text>
+            <div class="scrollable-tabs">
                 <v-tabs
                     v-if="projects!.length > 0"
                     direction="vertical"
                     v-model="selectedTab"
-                    class="projects-tab"
+                    show-arrows
+                    prev-icon="mdi-chevron-up"
+                    next-icon="mdi-chevron-down"
                 >
-                    <v-tab v-for="project in projects" :key="project.id">
+                    <v-tab v-for="project in projects" :key="project.id" :value="project.id">
                         <SubjectTab :projectName="project.name"></SubjectTab>
                     </v-tab>
                 </v-tabs>
                 <div v-else class="placeholder">
-                    <p>No projects available.</p>
+                    <p>{{ $t("subject.projectsPage.no_projects") }}</p>
                 </div>
-            </v-card-text>
-        </v-skeleton-loader>
+            </div>
+        </v-card-text>
     </v-card>
 </template>
 
 <script setup lang="ts">
-import SubjectTab from "@/components/subject/body/projects/list/SubjectTab.vue";
-import HeaderSubtitleButton from "@/components/buttons/HeaderSubtitleButton.vue";
+import SubjectTab from "@/components/subject/subjectview/body/projects/list/SubjectTab.vue";
 import type Project from "@/models/Project";
 import { FilterOptions } from "@/models/Project";
 import { ref, watch } from "vue";
@@ -55,11 +47,11 @@ import { ref, watch } from "vue";
 const props = defineProps<{
     projects: Project[];
     selectedTab: number;
-    isLoading: boolean;
 }>();
 
 const selectedTab = ref(props.selectedTab);
 
+const filterOptions = Object.keys(FilterOptions);
 const activeButton = ref(FilterOptions.All);
 
 const emit = defineEmits<{
@@ -83,9 +75,9 @@ watch(activeButton, (newVal: string) => {
 .projects-card {
     background-color: white;
     padding: 20px;
-    border-radius: 20px;
     display: flex;
     flex-direction: column;
+    max-height: 55vh;
 }
 
 .title {
@@ -96,22 +88,13 @@ watch(activeButton, (newVal: string) => {
     font-family: "Poppins", sans-serif;
 }
 
-.projects-tab {
-    flex-grow: 1;
+.scrollable-tabs {
     overflow-y: auto;
     scrollbar-width: none; /* For Firefox */
+    max-height: 30vh;
 }
 
-.projects-tab::-webkit-scrollbar {
-    width: 0; /* For Chrome, Safari, and Opera */
-}
-
-.filter-btn-container {
-    overflow-x: auto;
-    scrollbar-width: none; /* For Firefox */
-}
-
-.filter-btn-container::-webkit-scrollbar {
+.scrollable-tabs::-webkit-scrollbar {
     width: 0; /* For Chrome, Safari, and Opera */
 }
 
@@ -121,7 +104,6 @@ watch(activeButton, (newVal: string) => {
     align-items: center;
     height: 200px; /* Adjust height as needed */
     border: 1px solid #ccc;
-    border-radius: 8px;
 }
 
 .placeholder p {
diff --git a/frontend/src/components/subject/body/projects/list/SubjectTab.vue b/frontend/src/components/subject/subjectview/body/projects/list/SubjectTab.vue
similarity index 100%
rename from frontend/src/components/subject/body/projects/list/SubjectTab.vue
rename to frontend/src/components/subject/subjectview/body/projects/list/SubjectTab.vue
diff --git a/frontend/src/components/subject/subjectview/buttons/RegisterLinkButton.vue b/frontend/src/components/subject/subjectview/buttons/RegisterLinkButton.vue
new file mode 100644
index 00000000..ecb82d40
--- /dev/null
+++ b/frontend/src/components/subject/subjectview/buttons/RegisterLinkButton.vue
@@ -0,0 +1,47 @@
+<template>
+    <v-btn v-if="!isLoading" prepend-icon="mdi-content-copy" @click="copyRegisterLink">
+        {{ $t("subject.register_link_button.title") }}
+    </v-btn>
+</template>
+
+<script setup lang="ts">
+import { computed, toRefs, watch } from "vue";
+import { useUuidSubjectQuery } from "@/queries/Subject";
+import { useRouter } from "vue-router";
+
+const props = defineProps<{
+    subjectId: number;
+}>();
+
+const { subjectId } = toRefs(props);
+
+const { data: subjectUuid, isLoading, isError } = useUuidSubjectQuery(subjectId);
+
+const router = useRouter();
+
+const registerLink = computed(() => {
+    return router.resolve({
+        name: "registerSubject",
+        params: { uuid: subjectUuid.value },
+    }).path;
+});
+
+const emit = defineEmits<{
+    (e: "register-link-btn-pressed"): void;
+    (e: "is-uuid-error"): void;
+}>();
+
+const copyRegisterLink = () => {
+    const baseAddress = window.location.origin;
+    navigator.clipboard.writeText(`${baseAddress}${registerLink.value}`);
+    emit("register-link-btn-pressed");
+};
+
+watch(isError, (newVal: boolean) => {
+    if (newVal) {
+        emit("is-uuid-error");
+    }
+});
+</script>
+
+<style scoped></style>
diff --git a/frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue b/frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue
new file mode 100644
index 00000000..d054fb30
--- /dev/null
+++ b/frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue
@@ -0,0 +1,78 @@
+<template>
+    <v-card variant="text" class="title-card" height="165">
+        <v-row>
+            <v-col :cols="isAdmin || (isInstructor && isTeacher) ? 10 : 12">
+                <v-card-title class="title">
+                    {{ title }}
+                </v-card-title>
+                <v-card-text>
+                    <HeaderSubtitleButton
+                        :title="`${$t('subject.academy_year')} 20${academicYear}-20${academicYear + 1}`"
+                        :clickable="false"
+                        :active="false"
+                    ></HeaderSubtitleButton>
+                    <div class="d-flex justify-start instr-container">
+                        <HeaderSubtitleButton
+                            v-for="instructor in instructors"
+                            :key="instructor.uid"
+                            :title="`${instructor.given_name[0]}. ${instructor.surname}`"
+                            :clickable="false"
+                            :active="false"
+                        ></HeaderSubtitleButton>
+                    </div>
+                </v-card-text>
+            </v-col>
+            <v-col v-if="isAdmin || (isInstructor && isTeacher)" cols="2">
+                <router-link to="" class="link">
+                    <v-icon size="large">mdi-square-edit-outline</v-icon>
+                </router-link>
+            </v-col>
+        </v-row>
+    </v-card>
+</template>
+
+<script setup lang="ts">
+import type User from "@/models/User";
+import HeaderSubtitleButton from "@/components/buttons/HeaderSubtitleButton.vue";
+import useIsAdmin from "@/composables/useIsAdmin";
+import useIsTeacher from "@/composables/useIsTeacher";
+
+defineProps<{
+    title: string;
+    academicYear: number;
+    instructors: User[];
+    isInstructor: boolean;
+}>();
+
+const { isAdmin } = useIsAdmin();
+const { isTeacher } = useIsTeacher();
+</script>
+
+<style scoped>
+.title-card {
+    background-color: white;
+    padding: 20px;
+}
+
+.title {
+    font-size: 32px;
+    letter-spacing: -0.5px;
+    text-transform: capitalize;
+    font-weight: bold;
+    margin-bottom: 12px;
+    font-family: "Poppins", sans-serif;
+}
+
+.instr-container {
+    margin-top: 10px;
+    margin-bottom: 5px;
+}
+
+.link {
+    text-decoration: none;
+    color: inherit;
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 10px;
+}
+</style>
diff --git a/frontend/src/components/subject/subjectview/header/SubjectHeaderContainer.vue b/frontend/src/components/subject/subjectview/header/SubjectHeaderContainer.vue
new file mode 100644
index 00000000..c3019e11
--- /dev/null
+++ b/frontend/src/components/subject/subjectview/header/SubjectHeaderContainer.vue
@@ -0,0 +1,45 @@
+<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>
+</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";
+
+const props = defineProps<{
+    title: string;
+    academicYear: number;
+    instructors: User[];
+    imagePath: string;
+    isInstructor: boolean;
+    isStudent: boolean;
+    isAdmin: boolean;
+}>();
+
+const { isInstructor, isStudent, isAdmin } = toRefs(props);
+
+const userRole = computed(() => {
+    if (isInstructor.value) return SubjectRole.Instructor;
+    if (isStudent.value) return SubjectRole.Student;
+    if (isAdmin.value) return SubjectRole.Admin;
+    return SubjectRole.None;
+});
+</script>
+
+<style scoped></style>
diff --git a/frontend/src/components/subject/subjectview/header/SubjectHeaderImage.vue b/frontend/src/components/subject/subjectview/header/SubjectHeaderImage.vue
new file mode 100644
index 00000000..9f5434d7
--- /dev/null
+++ b/frontend/src/components/subject/subjectview/header/SubjectHeaderImage.vue
@@ -0,0 +1,27 @@
+<template>
+    <v-img aspect-ratio="16/9" cover :src="imagePath" class="header-img">
+        <SubjectIcon :role="role" size="xxx-large" class="subject-icon"></SubjectIcon>
+    </v-img>
+</template>
+
+<script setup lang="ts">
+import SubjectIcon from "@/components/subject/extra/SubjectIcon.vue";
+import { SubjectRole } from "@/models/Subject";
+
+defineProps<{
+    imagePath: string;
+    role: SubjectRole;
+}>();
+</script>
+
+<style scoped>
+.header-img {
+    height: 165px;
+}
+
+.subject-icon {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+}
+</style>
diff --git a/frontend/src/components/subjects/SubjectCard.vue b/frontend/src/components/subjects/SubjectCard.vue
deleted file mode 100644
index 2e125cf0..00000000
--- a/frontend/src/components/subjects/SubjectCard.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-    <router-link :to="{ name: 'subject', params: { subjectId: subject.id } }" class="router-link">
-        <v-card rounded="xl" class="subject-card" width="50%">
-            <v-skeleton-loader :loading="isLoading">
-                <v-img
-                    src="https://cdn.vuetifyjs.com/images/cards/desert.jpg"
-                    class="align-end"
-                    gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
-                    cover
-                    aspect-ratio="16/9"
-                    height="120px"
-                >
-                    <v-card-title>
-                        {{ subject?.name }}
-                        <v-icon class="">mdi-chevron-right</v-icon>
-                    </v-card-title>
-                </v-img>
-            </v-skeleton-loader>
-        </v-card>
-    </router-link>
-</template>
-
-<script setup lang="ts">
-import type Subject from "@/models/Subject";
-
-defineProps<{
-    subject: Subject;
-    isLoading: boolean;
-}>();
-</script>
-
-<style scoped>
-.router-link {
-    text-decoration: none;
-}
-
-.subject-card {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    position: relative;
-    margin-top: 10px;
-}
-</style>
diff --git a/frontend/src/components/subjects/SubjectsHeaderCard.vue b/frontend/src/components/subjects/SubjectsHeaderCard.vue
deleted file mode 100644
index 4734454b..00000000
--- a/frontend/src/components/subjects/SubjectsHeaderCard.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<template>
-    <v-card variant="text" class="title-card" height="165" width="50%" rounded="xl">
-        <v-skeleton-loader :loading="isLoading" type="card" color="white">
-            <v-row>
-                <v-col>
-                    <v-card-title class="title">
-                        {{ $t("subjects.title") }}
-                    </v-card-title>
-                    <v-card-text>
-                        <HeaderSubtitleButton
-                            :title="$t('subject.academy_year') + ' ' + academicYears[0]"
-                            :clickable="true"
-                            :active="true"
-                        ></HeaderSubtitleButton>
-                        <v-chip-group>
-                            <v-chip
-                                v-for="(academicYear, index) in academicYears"
-                                :key="index"
-                                color="primary"
-                                class="ma-1"
-                            >
-                                {{ academicYear }}
-                            </v-chip>
-                        </v-chip-group>
-                    </v-card-text>
-                </v-col>
-            </v-row>
-        </v-skeleton-loader>
-    </v-card>
-</template>
-
-<script setup lang="ts">
-import HeaderSubtitleButton from "@/components/buttons/HeaderSubtitleButton.vue";
-
-defineProps<{
-    isLoading: boolean;
-}>();
-
-const academicYears = ["2023-2024", "2022-2023", "2021-2022"];
-</script>
-
-<style scoped>
-.title-card {
-    background-color: white;
-    padding: 20px;
-}
-
-.title {
-    font-size: 32px;
-    letter-spacing: -0.5px;
-    text-transform: capitalize;
-    font-weight: bold;
-    margin-bottom: 12px;
-    font-family: "Poppins", sans-serif;
-}
-</style>
diff --git a/frontend/src/components/subjects/SubjectsHeaderContainer.vue b/frontend/src/components/subjects/SubjectsHeaderContainer.vue
deleted file mode 100644
index 399c2d3d..00000000
--- a/frontend/src/components/subjects/SubjectsHeaderContainer.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-    <SubjectsHeaderCard :is-loading="isLoading"> </SubjectsHeaderCard>
-</template>
-
-<script setup lang="ts">
-import SubjectsHeaderCard from "@/components/subjects/SubjectsHeaderCard.vue";
-
-defineProps<{
-    isLoading: boolean;
-}>();
-</script>
-
-<style scoped></style>
diff --git a/frontend/src/composables/useAcademicYear.ts b/frontend/src/composables/useAcademicYear.ts
new file mode 100644
index 00000000..e772df24
--- /dev/null
+++ b/frontend/src/composables/useAcademicYear.ts
@@ -0,0 +1,14 @@
+export default function useAcademicYear(): number {
+    const currentDate = new Date();
+    const currentYear = currentDate.getFullYear();
+    const currentMonth = currentDate.getMonth();
+    const currentDay = currentDate.getDate();
+
+    // If the current date is before September 15, the default selected academic year is the current year.
+    // Otherwise, the academic year is the next year.
+    if (currentMonth < 8 || (currentMonth === 8 && currentDay < 15)) {
+        return currentYear - 1 - 2000;
+    } else {
+        return currentYear - 2000;
+    }
+}
diff --git a/frontend/src/i18n/locales/en.ts b/frontend/src/i18n/locales/en.ts
index 5f96584b..bbbc32c4 100644
--- a/frontend/src/i18n/locales/en.ts
+++ b/frontend/src/i18n/locales/en.ts
@@ -2,6 +2,7 @@ export default {
     default: {
         error: {
             "not-found": "Page not found",
+            "something-went-wrong": "Something went wrong",
         },
         loading: {
             loading_page: "Loading...",
@@ -99,15 +100,29 @@ export default {
             all: "All",
             active: "Active",
             completed: "Completed",
+            no_projects: "No projects found.",
+            show_assignment: "Show more",
+            hide_assignment: "Hide less",
         },
         project: {
             assignment: "Assignment",
             group: "Group",
             submissions: "Submissions",
         },
+        create_project: "Create project",
+        register_link_button: {
+            title: "Register link",
+            snackbar: "Register link copied to clipboard.",
+            tooltip:
+                "Copy register link for this subject, this can be shared with students to register for the subject.",
+        },
     },
     subjects: {
         title: "My Subjects",
+        create_subject: "Create subject",
+        instructor_subjects: "Show instructor subjects",
+        student_subjects: "Show student subjects",
+        no_subjects: "No subjects found.",
     },
     group: {
         not_found: "Group not found",
diff --git a/frontend/src/i18n/locales/nl.ts b/frontend/src/i18n/locales/nl.ts
index 1fbb25a7..539076f5 100644
--- a/frontend/src/i18n/locales/nl.ts
+++ b/frontend/src/i18n/locales/nl.ts
@@ -2,6 +2,7 @@ export default {
     default: {
         error: {
             "not-found": "Pagina niet gevonden",
+            "something-went-wrong": "Er is iets misgegaan",
         },
         loading: {
             loading_page: "Aan het laden...",
@@ -99,16 +100,30 @@ export default {
             all: "Alle",
             active: "Actief",
             completed: "Voltooid",
+            no_projects: "Geen projecten gevonden.",
+            show_assignment: "Meer",
+            hide_assignment: "Minder",
         },
         project: {
             assignment: "Opdracht",
             group: "Groep",
             submissions: "Indieningen",
         },
+        create_project: "Nieuw project",
+        register_link_button: {
+            title: "Registratie link",
+            snackbar: "Registratie link gekopieerd naar klembord.",
+            tooltip:
+                "Kopieer de registratie link voor dit vak, deze kan gedeeld worden met studenten om zich te registreren voor het vak.",
+        },
     },
 
     subjects: {
         title: "Mijn vakken",
+        create_subject: "Nieuw vak",
+        instructor_subjects: "Toon lesgever vakken",
+        student_subjects: "Toon student vakken",
+        no_subjects: "Geen vakken gevonden.",
     },
     group: {
         not_found: "Groep niet gevonden",
diff --git a/frontend/src/models/Project.ts b/frontend/src/models/Project.ts
index 5c747825..fa72c285 100644
--- a/frontend/src/models/Project.ts
+++ b/frontend/src/models/Project.ts
@@ -28,6 +28,6 @@ export interface Deadline {
 
 export enum FilterOptions {
     All = "All",
-    Completed = "Completed",
     Active = "Active",
+    Completed = "Completed",
 }
diff --git a/frontend/src/models/Subject.ts b/frontend/src/models/Subject.ts
index ff6d3ef1..9a391ec4 100644
--- a/frontend/src/models/Subject.ts
+++ b/frontend/src/models/Subject.ts
@@ -2,7 +2,6 @@ export default interface Subject {
     id: number;
     name: string;
     academic_year: number;
-    uuid: string;
     email: string;
 }
 
@@ -10,3 +9,20 @@ export interface UserSubjectList {
     as_student: Subject[];
     as_instructor: Subject[];
 }
+
+export enum SubjectRole {
+    Student = "student",
+    Instructor = "instructor",
+    Admin = "admin",
+    None = "none",
+}
+
+export interface SubjectFilter {
+    showInstructorSubjects: boolean;
+    showStudentSubjects: boolean;
+}
+
+export interface SubjectDetails {
+    subjectData: Subject;
+    role: SubjectRole;
+}
diff --git a/frontend/src/models/SubjectDetails.ts b/frontend/src/models/SubjectDetails.ts
deleted file mode 100644
index b142bc55..00000000
--- a/frontend/src/models/SubjectDetails.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import type User from "@/models/User";
-import type Project from "@/models/Project";
-
-export default interface SubjectDetails {
-    id: number;
-    name: string;
-    instructors: User[];
-    students: User[];
-    projects: Project[];
-}
diff --git a/frontend/src/queries/Subject.ts b/frontend/src/queries/Subject.ts
index e598543f..8ea2f5f0 100644
--- a/frontend/src/queries/Subject.ts
+++ b/frontend/src/queries/Subject.ts
@@ -9,6 +9,7 @@ import {
     getSubjectStudents,
     getSubjectByUuid,
     registerToSubject,
+    getSubjectUuid,
 } from "@/services/subject";
 import { getSubjectProjects } from "@/services/project";
 import type User from "@/models/User";
@@ -36,6 +37,10 @@ function SUBJECT_PROJECTS_QUERY_KEY(subjectId: number): (string | number)[] {
     return ["subject", "projects", subjectId];
 }
 
+function SUBJECT_UUID_QUERY_KEY(subjectId: number): (string | number)[] {
+    return ["subject", "uuid", subjectId];
+}
+
 /**
  * Query composable for fetching a subject by id
  */
@@ -112,6 +117,16 @@ export function useSubjectProjectsQuery(
     });
 }
 
+export function useUuidSubjectQuery(
+    subjectId: MaybeRefOrGetter<number | undefined>
+): UseQueryReturnType<string, Error> {
+    return useQuery<string, Error>({
+        queryKey: computed(() => SUBJECT_UUID_QUERY_KEY(toValue(subjectId)!)),
+        queryFn: () => getSubjectUuid(toValue(subjectId)!),
+        enabled: () => !!toValue(subjectId),
+    });
+}
+
 /**
  * Mutation composable for registering the current user to a subject
  */
diff --git a/frontend/src/services/subject.ts b/frontend/src/services/subject.ts
index fea50723..328c8e79 100644
--- a/frontend/src/services/subject.ts
+++ b/frontend/src/services/subject.ts
@@ -48,3 +48,8 @@ export async function registerToSubject(subjectUuid: string): Promise<Subject> {
         method: "POST",
     });
 }
+
+export async function getSubjectUuid(subjectId: number): Promise<string> {
+    const result = await authorized_fetch(`/api/subjects/${subjectId}/uuid`, { method: "GET" });
+    return result.subject_uuid;
+}
diff --git a/frontend/src/views/subject/SubjectView.vue b/frontend/src/views/subject/SubjectView.vue
index 74f570fd..2e05df13 100644
--- a/frontend/src/views/subject/SubjectView.vue
+++ b/frontend/src/views/subject/SubjectView.vue
@@ -1,48 +1,91 @@
 <template>
-    <div v-if="isError" class="v-container">Error...</div>
-    <div v-else-if="isLoading">Loading...</div>
+    <div v-if="isError" class="v-container">
+        <p>{{ $t("default.something-went-wrong") }}</p>
+    </div>
 
-    <BackgroundContainer v-else>
+    <v-skeleton-loader v-else type="card" :loading="isLoading">
         <v-row>
-            <v-col>
-                <SubjectHeaderContainer
-                    v-if="subject"
-                    :title="subject!.name"
-                    :instructors="instructors!"
-                    academic-year="2023-2024"
-                    :is-loading="isLoading"
-                    image-path="https://cdn.vuetifyjs.com/images/parallax/material.jpg"
-                ></SubjectHeaderContainer>
+            <v-snackbar v-model="snackbar" timeout="3000" color="primary">
+                {{ $t("subject.register_link_button.snackbar") }}
+                <template v-slot:actions>
+                    <v-btn @click="snackbar = false">
+                        <v-icon>mdi-close</v-icon>
+                    </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-btn>
+                </router-link>
             </v-col>
-        </v-row>
-        <v-row>
             <v-col>
-                <SubjectBody
-                    v-if="subject"
-                    :projects="projects!"
-                    :is-loading="isLoading"
-                ></SubjectBody>
+                <BackgroundContainer>
+                    <v-row>
+                        <v-col>
+                            <SubjectHeaderContainer
+                                v-if="subject"
+                                :title="subject!.name"
+                                :instructors="instructors"
+                                :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>
             </v-col>
         </v-row>
-    </BackgroundContainer>
+    </v-skeleton-loader>
 </template>
 
 <script setup lang="ts">
-import { computed, toRefs } from "vue";
+import { computed, ref, toRefs } from "vue";
 import {
     useSubjectQuery,
     useSubjectProjectsQuery,
     useSubjectInstructorsQuery,
+    useSubjectStudentsQuery,
 } from "@/queries/Subject";
 import BackgroundContainer from "@/components/BackgroundContainer.vue";
-import SubjectHeaderContainer from "@/components/subject/header/SubjectHeaderContainer.vue";
-import SubjectBody from "@/components/subject/body/SubjectBody.vue";
+import SubjectHeaderContainer from "@/components/subject/subjectview/header/SubjectHeaderContainer.vue";
+import SubjectBody from "@/components/subject/subjectview/body/SubjectBody.vue";
+import { useCurrentUserQuery } from "@/queries/User";
+import useIsTeacher from "@/composables/useIsTeacher";
+import useIsAdmin from "@/composables/useIsAdmin";
+import RegisterLinkButton from "@/components/subject/subjectview/buttons/RegisterLinkButton.vue";
 
 const props = defineProps<{
     subjectId: number;
 }>();
 
 const { subjectId } = toRefs(props);
+const snackbar = ref(false);
+const isUuidError = ref(false);
 
 const {
     data: subject,
@@ -59,13 +102,47 @@ const {
     isLoading: isInstructorsLoading,
     isError: isInstructorsError,
 } = useSubjectInstructorsQuery(subjectId);
+const { data: user, isLoading: isUserLoading, isError: isUserError } = useCurrentUserQuery();
+const {
+    data: students,
+    isLoading: isStudentsLoading,
+    isError: isStudentsError,
+} = useSubjectStudentsQuery(subjectId);
 
 const isLoading = computed(
-    () => isSubjectLoading.value || isProjectsLoading.value || isInstructorsLoading.value
+    () =>
+        isSubjectLoading.value ||
+        isProjectsLoading.value ||
+        isInstructorsLoading.value ||
+        isUserLoading.value ||
+        isStudentsLoading.value
 );
 const isError = computed(
-    () => isSubjectError.value || isProjectsError.value || isInstructorsError.value
+    () =>
+        isSubjectError.value ||
+        isProjectsError.value ||
+        isInstructorsError.value ||
+        isUserError.value ||
+        isUuidError.value ||
+        isStudentsError.value
 );
+
+const isInstructor = computed(() => {
+    return [...(instructors.value || [])].some((instructor) => instructor?.uid === user.value?.uid);
+});
+const isStudent = computed(() => {
+    return [...(students.value || [])].some((student) => student?.uid === user.value?.uid);
+});
+const { isAdmin } = useIsAdmin();
+const { isTeacher } = useIsTeacher();
 </script>
 ;
-<style scoped></style>
+<style scoped>
+.back-button {
+    margin: 30px;
+}
+
+.action-btn-container {
+    margin-top: 30px;
+}
+</style>
diff --git a/frontend/src/views/subject/SubjectsView.vue b/frontend/src/views/subject/SubjectsView.vue
index 618f412c..a5aec499 100644
--- a/frontend/src/views/subject/SubjectsView.vue
+++ b/frontend/src/views/subject/SubjectsView.vue
@@ -2,39 +2,139 @@
     <div v-if="isError" class="v-container">
         <p>Error: {{ error }}</p>
     </div>
-    <div v-if="isLoading">Loading...</div>
 
-    <BackgroundContainer v-else>
+    <v-skeleton-loader v-else type="card" :loading="isLoading">
         <v-row>
-            <v-col>
-                <SubjectsHeaderContainer :is-loading="isLoading"></SubjectsHeaderContainer>
+            <v-col :cols="isAdmin || isTeacher ? 10 : 12">
+                <BackgroundContainer>
+                    <v-row>
+                        <v-col>
+                            <SubjectsHeaderContainer
+                                :academic-years="academicYears"
+                                :subjects="subjectsByAcademicYear"
+                                @academic-year-changed="onAcademicYearChanged"
+                                @subjects-filter-changed="onSubjectsFilterChanged"
+                            ></SubjectsHeaderContainer>
+                        </v-col>
+                    </v-row>
+                    <v-row>
+                        <div v-if="filteredSubjectsByAcademicYear.length === 0" class="no-results">
+                            <h1>{{ $t("subjects.no_subjects") }}</h1>
+                        </div>
+                        <v-col
+                            v-else
+                            v-for="(subject, index) in filteredSubjectsByAcademicYear"
+                            :key="index"
+                            cols="6"
+                        >
+                            <SubjectCard
+                                :subject="subject.subjectData"
+                                :role="subject.role"
+                                class="subject-card"
+                            ></SubjectCard>
+                        </v-col>
+                    </v-row>
+                </BackgroundContainer>
             </v-col>
-        </v-row>
-        <v-row>
-            <v-col>
-                <SubjectCard
-                    v-for="(subject, index) in subjectsList"
-                    :subject="subject"
-                    :is-loading="isLoading"
-                    :key="index"
-                >
-                </SubjectCard>
+            <v-col v-if="isAdmin || isTeacher" cols="2">
+                <div class="action-btn-container">
+                    <router-link to="">
+                        <v-btn prepend-icon="mdi-plus-circle">
+                            {{ $t("subjects.create_subject") }}
+                        </v-btn>
+                    </router-link>
+                </div>
             </v-col>
         </v-row>
-    </BackgroundContainer>
+    </v-skeleton-loader>
 </template>
 
 <script setup lang="ts">
 import { useSubjectsQuery } from "@/queries/Subject";
 import BackgroundContainer from "@/components/BackgroundContainer.vue";
-import SubjectsHeaderContainer from "@/components/subjects/SubjectsHeaderContainer.vue";
-import SubjectCard from "@/components/subjects/SubjectCard.vue";
-import { computed } from "vue";
+import SubjectsHeaderContainer from "@/components/subject/subjectsview/SubjectsHeaderContainer.vue";
+import SubjectCard from "@/components/subject/subjectsview/SubjectCard.vue";
+import { computed, ref } from "vue";
+import useAcademicYear from "@/composables/useAcademicYear";
+import useIsTeacher from "@/composables/useIsTeacher";
+import useIsAdmin from "@/composables/useIsAdmin";
+import { type SubjectFilter, SubjectRole } from "@/models/Subject";
 
 const { data: subjects, error, isLoading, isError } = useSubjectsQuery();
 const subjectsList = computed(() => {
-    return [...subjects.value!.as_student, ...subjects.value!.as_instructor] || [];
+    const instructorSubjects = subjects.value!.as_instructor.map((subject) => ({
+        subjectData: subject,
+        role: SubjectRole.Instructor,
+    }));
+    const studentSubjects = subjects.value!.as_student.map((subject) => ({
+        subjectData: subject,
+        role: SubjectRole.Student,
+    }));
+
+    return [...instructorSubjects, ...studentSubjects];
+});
+const activeAcademicYear = ref<number>(useAcademicYear());
+const activeSubjectsFilter = ref<SubjectFilter>({
+    showInstructorSubjects: true,
+    showStudentSubjects: true,
+});
+const { isTeacher } = useIsTeacher();
+const { isAdmin } = useIsAdmin();
+
+const academicYears = computed(() => {
+    return Array.from(
+        new Set([...(subjectsList.value || [])].map((subject) => subject.subjectData.academic_year))
+    ).sort((a, b) => b - a);
+});
+
+const subjectsByAcademicYear = computed(() => {
+    return [...(subjectsList.value || [])].filter(
+        (subject) => subject.subjectData.academic_year === activeAcademicYear.value
+    );
+});
+
+const filteredSubjectsByAcademicYear = computed(() => {
+    const subjects = [...(subjectsByAcademicYear.value || [])];
+    return subjects.filter((subject) => {
+        if (
+            activeSubjectsFilter.value.showInstructorSubjects &&
+            subject.role === SubjectRole.Instructor
+        ) {
+            return true;
+        }
+        if (
+            activeSubjectsFilter.value.showStudentSubjects &&
+            subject.role === SubjectRole.Student
+        ) {
+            return true;
+        }
+        return false;
+    });
 });
+
+const onSubjectsFilterChanged = (filter: SubjectFilter) => {
+    activeSubjectsFilter.value = filter;
+};
+
+const onAcademicYearChanged = (academicYear: number) => {
+    activeAcademicYear.value = academicYear;
+    activeSubjectsFilter.value = {
+        showInstructorSubjects: true,
+        showStudentSubjects: true,
+    };
+};
 </script>
 
-<style scoped></style>
+<style scoped>
+.subject-card {
+    margin-top: 10px;
+}
+
+.action-btn-container {
+    margin-top: 30px;
+}
+
+.no-results {
+    text-align: center;
+}
+</style>