diff --git a/frontend/src/components/subject/createSubjectView/body/CreateSubjectBody.vue b/frontend/src/components/subject/modify/body/ModifySubjectBody.vue
similarity index 80%
rename from frontend/src/components/subject/createSubjectView/body/CreateSubjectBody.vue
rename to frontend/src/components/subject/modify/body/ModifySubjectBody.vue
index 16f3e330..344a81a3 100644
--- a/frontend/src/components/subject/createSubjectView/body/CreateSubjectBody.vue
+++ b/frontend/src/components/subject/modify/body/ModifySubjectBody.vue
@@ -17,9 +17,9 @@
 </template>
 
 <script setup lang="ts">
-import SubjectInstructorsCard from "@/components/subject/createSubjectView/body/SubjectInstructorsCard.vue";
+import SubjectInstructorsCard from "@/components/subject/modify/body/SubjectInstructorsCard.vue";
 import type User from "@/models/User";
-import UserSearchCard from "@/components/subject/createSubjectView/body/UserSearchCard.vue";
+import UserSearchCard from "@/components/subject/modify/body/UserSearchCard.vue";
 
 defineProps<{
     currentUser: User;
diff --git a/frontend/src/components/subject/createSubjectView/body/SubjectInstructorsCard.vue b/frontend/src/components/subject/modify/body/SubjectInstructorsCard.vue
similarity index 100%
rename from frontend/src/components/subject/createSubjectView/body/SubjectInstructorsCard.vue
rename to frontend/src/components/subject/modify/body/SubjectInstructorsCard.vue
diff --git a/frontend/src/components/subject/createSubjectView/body/UserSearchCard.vue b/frontend/src/components/subject/modify/body/UserSearchCard.vue
similarity index 91%
rename from frontend/src/components/subject/createSubjectView/body/UserSearchCard.vue
rename to frontend/src/components/subject/modify/body/UserSearchCard.vue
index 1c598526..53936ba6 100644
--- a/frontend/src/components/subject/createSubjectView/body/UserSearchCard.vue
+++ b/frontend/src/components/subject/modify/body/UserSearchCard.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script setup lang="ts">
-import UserSearchList from "@/components/subject/createSubjectView/body/UserSearchList.vue";
+import UserSearchList from "@/components/subject/modify/body/UserSearchList.vue";
 import type User from "@/models/User";
 
 defineProps<{
diff --git a/frontend/src/components/subject/createSubjectView/body/UserSearchList.vue b/frontend/src/components/subject/modify/body/UserSearchList.vue
similarity index 100%
rename from frontend/src/components/subject/createSubjectView/body/UserSearchList.vue
rename to frontend/src/components/subject/modify/body/UserSearchList.vue
diff --git a/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue b/frontend/src/components/subject/modify/header/ModifySubjectHeaderCard.vue
similarity index 86%
rename from frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue
rename to frontend/src/components/subject/modify/header/ModifySubjectHeaderCard.vue
index fae6ed97..5cf9d143 100644
--- a/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue
+++ b/frontend/src/components/subject/modify/header/ModifySubjectHeaderCard.vue
@@ -1,7 +1,7 @@
 <template>
     <v-card variant="text" class="title-card" width="100%" height="45vh">
         <v-card-title class="title">
-            {{ $t("create_subject.new_subject") }}
+            {{ title }}
         </v-card-title>
         <v-card-text>
             <v-text-field
@@ -60,13 +60,17 @@
 </template>
 
 <script setup lang="ts">
-import { ref, toRefs, watch } from "vue";
 import useAcademicYear from "@/composables/useAcademicYear";
+import { computed, ref, toRefs, watch } from "vue";
 import { useI18n } from "vue-i18n";
 
 const { t } = useI18n();
 
 const props = defineProps<{
+    title: string;
+    subjectName: string;
+    academicYear: number;
+    subjectMail: string;
     currentUserAsInstructor: boolean;
     isSubjectNameError: boolean;
     isSubjectMailError: boolean;
@@ -80,11 +84,19 @@ watch(currentUserAsInstructor, (newValue) => {
     checkbox.value = newValue;
 });
 
-const subjectName = ref("");
-const subjectMail = ref("");
-const activeAcademicYear = ref<number>(useAcademicYear());
-
-const academicYearItems = [activeAcademicYear.value, activeAcademicYear.value + 1];
+const subjectName = ref(props.subjectName);
+const activeAcademicYear = ref<number>(props.academicYear);
+const subjectMail = ref(props.subjectMail);
+const currentAcademicYear = useAcademicYear();
+
+const academicYearItems = computed(() => {
+    const years = [currentAcademicYear];
+    if (activeAcademicYear.value !== currentAcademicYear) {
+        years.push(activeAcademicYear.value);
+    }
+    years.push(activeAcademicYear.value + 1);
+    return years;
+});
 const rules = {
     required: (value: string) => !!value || t("create_subject.field_required"),
     length: (value: string) => value.length > 2 || t("create_subject.field_length"),
diff --git a/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderContainer.vue b/frontend/src/components/subject/modify/header/ModifySubjectHeaderContainer.vue
similarity index 65%
rename from frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderContainer.vue
rename to frontend/src/components/subject/modify/header/ModifySubjectHeaderContainer.vue
index d149c68b..9d0c7783 100644
--- a/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderContainer.vue
+++ b/frontend/src/components/subject/modify/header/ModifySubjectHeaderContainer.vue
@@ -1,10 +1,14 @@
 <template>
     <v-row>
         <v-col cols="4">
-            <CreateSubjectHeaderImage :imagePath="imagePath"></CreateSubjectHeaderImage>
+            <ModifySubjectHeaderImage :imagePath="imagePath"></ModifySubjectHeaderImage>
         </v-col>
         <v-col cols="8">
-            <CreateSubjectHeaderCard
+            <ModifySubjectHeaderCard
+                :title="title"
+                :subject-name="subjectName"
+                :academic-year="academicYear"
+                :subject-mail="subjectMail"
                 :current-user-as-instructor="currentUserAsInstructor"
                 :is-subject-name-error="isSubjectNameError"
                 :is-subject-mail-error="isSubjectMailError"
@@ -15,17 +19,21 @@
                     $emit('update:current-user-as-instructor', $event)
                 "
             >
-            </CreateSubjectHeaderCard>
+            </ModifySubjectHeaderCard>
         </v-col>
     </v-row>
 </template>
 
 <script setup lang="ts">
-import CreateSubjectHeaderCard from "@/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue";
-import CreateSubjectHeaderImage from "@/components/subject/createSubjectView/header/CreateSubjectHeaderImage.vue";
+import ModifySubjectHeaderCard from "@/components/subject/modify/header/ModifySubjectHeaderCard.vue";
+import ModifySubjectHeaderImage from "@/components/subject/modify/header/ModifySubjectHeaderImage.vue";
 
 defineProps<{
+    title: string;
     imagePath: string;
+    subjectName: string;
+    academicYear: number;
+    subjectMail: string;
     currentUserAsInstructor: boolean;
     isSubjectNameError: boolean;
     isSubjectMailError: boolean;
diff --git a/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderImage.vue b/frontend/src/components/subject/modify/header/ModifySubjectHeaderImage.vue
similarity index 100%
rename from frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderImage.vue
rename to frontend/src/components/subject/modify/header/ModifySubjectHeaderImage.vue
diff --git a/frontend/src/components/subject/subjectview/body/groups/SubjectGroupsPage.vue b/frontend/src/components/subject/subject/body/groups/SubjectGroupsPage.vue
similarity index 100%
rename from frontend/src/components/subject/subjectview/body/groups/SubjectGroupsPage.vue
rename to frontend/src/components/subject/subject/body/groups/SubjectGroupsPage.vue
diff --git a/frontend/src/components/subject/subjectview/body/projects/SubjectProjectPage.vue b/frontend/src/components/subject/subject/body/projects/SubjectProjectPage.vue
similarity index 100%
rename from frontend/src/components/subject/subjectview/body/projects/SubjectProjectPage.vue
rename to frontend/src/components/subject/subject/body/projects/SubjectProjectPage.vue
diff --git a/frontend/src/components/subject/subjectview/body/projects/SubjectProjectsPage.vue b/frontend/src/components/subject/subject/body/projects/SubjectProjectsPage.vue
similarity index 92%
rename from frontend/src/components/subject/subjectview/body/projects/SubjectProjectsPage.vue
rename to frontend/src/components/subject/subject/body/projects/SubjectProjectsPage.vue
index b0717710..47403dc7 100644
--- a/frontend/src/components/subject/subjectview/body/projects/SubjectProjectsPage.vue
+++ b/frontend/src/components/subject/subject/body/projects/SubjectProjectsPage.vue
@@ -31,11 +31,11 @@
 </template>
 
 <script setup lang="ts">
-import SubjectProjectsList from "@/components/subject/subjectview/body/projects/list/SubjectProjectsList.vue";
+import SubjectProjectsList from "@/components/subject/subject/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/subjectview/body/projects/SubjectProjectPage.vue";
+import SubjectProjectPage from "@/components/subject/subject/body/projects/SubjectProjectPage.vue";
 
 const props = defineProps<{
     projects: Project[];
diff --git a/frontend/src/components/subject/subjectview/body/projects/list/SubjectProjectsList.vue b/frontend/src/components/subject/subject/body/projects/list/SubjectProjectsList.vue
similarity index 97%
rename from frontend/src/components/subject/subjectview/body/projects/list/SubjectProjectsList.vue
rename to frontend/src/components/subject/subject/body/projects/list/SubjectProjectsList.vue
index 6ef81755..e6c1ebd8 100644
--- a/frontend/src/components/subject/subjectview/body/projects/list/SubjectProjectsList.vue
+++ b/frontend/src/components/subject/subject/body/projects/list/SubjectProjectsList.vue
@@ -39,7 +39,7 @@
 </template>
 
 <script setup lang="ts">
-import SubjectTab from "@/components/subject/subjectview/body/projects/list/SubjectTab.vue";
+import SubjectTab from "@/components/subject/subject/body/projects/list/SubjectTab.vue";
 import type Project from "@/models/Project";
 import { FilterOptions } from "@/models/Project";
 import { ref, watch } from "vue";
diff --git a/frontend/src/components/subject/subjectview/body/projects/list/SubjectTab.vue b/frontend/src/components/subject/subject/body/projects/list/SubjectTab.vue
similarity index 100%
rename from frontend/src/components/subject/subjectview/body/projects/list/SubjectTab.vue
rename to frontend/src/components/subject/subject/body/projects/list/SubjectTab.vue
diff --git a/frontend/src/components/subject/subjectview/buttons/RegisterLinkButton.vue b/frontend/src/components/subject/subject/buttons/RegisterLinkButton.vue
similarity index 100%
rename from frontend/src/components/subject/subjectview/buttons/RegisterLinkButton.vue
rename to frontend/src/components/subject/subject/buttons/RegisterLinkButton.vue
diff --git a/frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue b/frontend/src/components/subject/subject/header/SubjectHeaderCard.vue
similarity index 94%
rename from frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue
rename to frontend/src/components/subject/subject/header/SubjectHeaderCard.vue
index 5d397b66..3747ae29 100644
--- a/frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue
+++ b/frontend/src/components/subject/subject/header/SubjectHeaderCard.vue
@@ -41,7 +41,10 @@
                 </v-card-text>
             </v-col>
             <v-col v-if="isAdmin || (isInstructor && isTeacher)" cols="1">
-                <router-link to="" class="link">
+                <router-link
+                    :to="{ name: 'edit-subject', params: { subjectId: subjectId } }"
+                    class="link"
+                >
                     <v-icon size="large">mdi-square-edit-outline</v-icon>
                 </router-link>
             </v-col>
@@ -57,6 +60,7 @@ import SubjectIcon from "@/components/subject/extra/SubjectIcon.vue";
 import { SubjectRole } from "@/models/Subject";
 
 defineProps<{
+    subjectId: number;
     title: string;
     academicYear: number;
     instructors: User[];
diff --git a/frontend/src/components/subject/subjectview/header/SubjectHeaderContainer.vue b/frontend/src/components/subject/subject/header/SubjectHeaderContainer.vue
similarity index 86%
rename from frontend/src/components/subject/subjectview/header/SubjectHeaderContainer.vue
rename to frontend/src/components/subject/subject/header/SubjectHeaderContainer.vue
index bb1e50ce..cf4fe3d5 100644
--- a/frontend/src/components/subject/subjectview/header/SubjectHeaderContainer.vue
+++ b/frontend/src/components/subject/subject/header/SubjectHeaderContainer.vue
@@ -1,6 +1,7 @@
 <template>
     <SubjectHeaderCard
         :title="title"
+        :subject-id="subjectId"
         :academic-year="academicYear"
         :instructors="instructors"
         :isInstructor="isInstructor"
@@ -10,13 +11,14 @@
 </template>
 
 <script setup lang="ts">
-import SubjectHeaderCard from "@/components/subject/subjectview/header/SubjectHeaderCard.vue";
+import SubjectHeaderCard from "@/components/subject/subject/header/SubjectHeaderCard.vue";
 import type User from "@/models/User";
 import { SubjectRole } from "@/models/Subject";
 import { computed, toRefs } from "vue";
 
 const props = defineProps<{
     title: string;
+    subjectId: number;
     academicYear: number;
     instructors: User[];
     imagePath: string;
diff --git a/frontend/src/components/subject/subjectview/header/SubjectHeaderImage.vue b/frontend/src/components/subject/subject/header/SubjectHeaderImage.vue
similarity index 100%
rename from frontend/src/components/subject/subjectview/header/SubjectHeaderImage.vue
rename to frontend/src/components/subject/subject/header/SubjectHeaderImage.vue
diff --git a/frontend/src/components/subject/subjectsview/body/SubjectCard.vue b/frontend/src/components/subject/subjects/body/SubjectCard.vue
similarity index 100%
rename from frontend/src/components/subject/subjectsview/body/SubjectCard.vue
rename to frontend/src/components/subject/subjects/body/SubjectCard.vue
diff --git a/frontend/src/components/subject/subjectsview/header/SubjectsHeaderCard.vue b/frontend/src/components/subject/subjects/header/SubjectsHeaderCard.vue
similarity index 97%
rename from frontend/src/components/subject/subjectsview/header/SubjectsHeaderCard.vue
rename to frontend/src/components/subject/subjects/header/SubjectsHeaderCard.vue
index 20d70cfc..5221bedb 100644
--- a/frontend/src/components/subject/subjectsview/header/SubjectsHeaderCard.vue
+++ b/frontend/src/components/subject/subjects/header/SubjectsHeaderCard.vue
@@ -15,7 +15,7 @@
                             color="secondary"
                             variant="flat"
                         >
-                            {{ `${academicYear}-${academicYear + 1}` }}
+                            {{ `${academicYear - 2000}-${academicYear - 2000 + 1}` }}
                         </v-chip>
                     </v-chip-group>
                 </div>
diff --git a/frontend/src/components/subject/subjectsview/header/SubjectsHeaderContainer.vue b/frontend/src/components/subject/subjects/header/SubjectsHeaderContainer.vue
similarity index 86%
rename from frontend/src/components/subject/subjectsview/header/SubjectsHeaderContainer.vue
rename to frontend/src/components/subject/subjects/header/SubjectsHeaderContainer.vue
index 8c6c6df7..ae96d040 100644
--- a/frontend/src/components/subject/subjectsview/header/SubjectsHeaderContainer.vue
+++ b/frontend/src/components/subject/subjects/header/SubjectsHeaderContainer.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script setup lang="ts">
-import SubjectsHeaderCard from "@/components/subject/subjectsview/header/SubjectsHeaderCard.vue";
+import SubjectsHeaderCard from "@/components/subject/subjects/header/SubjectsHeaderCard.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/subjects/header/SubjectsHeaderImage.vue
similarity index 100%
rename from frontend/src/components/subject/subjectsview/header/SubjectsHeaderImage.vue
rename to frontend/src/components/subject/subjects/header/SubjectsHeaderImage.vue
diff --git a/frontend/src/i18n/locales/en.ts b/frontend/src/i18n/locales/en.ts
index 8212be92..dda0889d 100644
--- a/frontend/src/i18n/locales/en.ts
+++ b/frontend/src/i18n/locales/en.ts
@@ -182,6 +182,11 @@ export default {
         email_invalid: "Provided email is invalid",
     },
 
+    patch_subject: {
+        cancel_dialog: "Cancel editing subject?",
+        edit_subject: "Edit subject",
+    },
+
     group: {
         not_found: "Group not found",
         not_found2: "No groups found",
diff --git a/frontend/src/i18n/locales/nl.ts b/frontend/src/i18n/locales/nl.ts
index 652d7180..e2b611c0 100644
--- a/frontend/src/i18n/locales/nl.ts
+++ b/frontend/src/i18n/locales/nl.ts
@@ -186,6 +186,11 @@ export default {
         email_invalid: "Ingevoerde email is ongeldig",
     },
 
+    patch_subject: {
+        cancel_dialog: "Wijzigingen annuleren?",
+        edit_subject: "Wijzig vak",
+    },
+
     group: {
         not_found: "Groep niet gevonden",
         not_found2: "Geen groepen teruggevonden",
diff --git a/frontend/src/models/Subject.ts b/frontend/src/models/Subject.ts
index e965ed4c..f30fe78c 100644
--- a/frontend/src/models/Subject.ts
+++ b/frontend/src/models/Subject.ts
@@ -27,7 +27,7 @@ export interface SubjectDetails {
     role: SubjectRole;
 }
 
-export default interface SubjectForm {
+export interface SubjectForm {
     name: string;
     email: string;
     academic_year: number;
diff --git a/frontend/src/queries/Subject.ts b/frontend/src/queries/Subject.ts
index dad0cd48..44cbb482 100644
--- a/frontend/src/queries/Subject.ts
+++ b/frontend/src/queries/Subject.ts
@@ -12,13 +12,15 @@ import {
     getSubjectUuid,
     createSubject,
     createSubjectInstructor,
+    updateSubject,
+    deleteSubjectInstructor,
 } from "@/services/subject";
 import { getSubjectProjects } from "@/services/project";
 import type User from "@/models/User";
 import type Subject from "@/models/Subject";
 import type { UserSubjectList } from "@/models/Subject";
 import type Project from "@/models/Project";
-import type SubjectForm from "@/models/Subject";
+import type { SubjectForm } from "@/models/Subject";
 
 function SUBJECT_QUERY_KEY(subjectId: number | string): (string | number)[] {
     return ["subject", subjectId];
@@ -177,6 +179,31 @@ export function useCreateSubjectMutation(): UseMutationReturnType<
     });
 }
 
+export function useUpdateSubjectMutation(): UseMutationReturnType<
+    void,
+    Error,
+    { subjectId: number; subject: SubjectForm },
+    Subject
+> {
+    const queryClient = useQueryClient();
+    return useMutation({
+        mutationFn: ({ subjectId, subject }) => updateSubject(subjectId, subject),
+        onMutate: ({ subjectId, subject }) => {
+            const previousSubject = queryClient.getQueryData<Subject>(SUBJECT_QUERY_KEY(subjectId));
+            queryClient.cancelQueries({ queryKey: SUBJECT_QUERY_KEY(subjectId) });
+            queryClient.setQueryData(SUBJECT_QUERY_KEY(subjectId), subject);
+            return previousSubject;
+        },
+        onSuccess: (_, { subjectId }) => {
+            queryClient.invalidateQueries({ queryKey: SUBJECT_QUERY_KEY(subjectId) });
+        },
+        onError: (_, { subjectId }, previousSubject) => {
+            queryClient.setQueryData(SUBJECT_QUERY_KEY(subjectId), previousSubject);
+            alert("Could not update subject. Please try again.");
+        },
+    });
+}
+
 /**
  * Mutation composable for creating subject instructor
  */
@@ -214,3 +241,36 @@ export function useCreateSubjectInstructorMutation(): UseMutationReturnType<
         },
     });
 }
+
+export function useDeleteSubjectInstructorMutation(): UseMutationReturnType<
+    void,
+    Error,
+    { user: User; subjectId: number },
+    { previousUsers: User[] }
+> {
+    const queryClient = useQueryClient();
+    return useMutation({
+        mutationFn: ({ user, subjectId }) => deleteSubjectInstructor(subjectId, user.uid),
+        onMutate: ({ user, subjectId }) => {
+            const previousUsers = queryClient.getQueryData<User[]>(
+                SUBJECT_INSTRUCTORS_QUERY_KEY(subjectId)
+            );
+            queryClient.cancelQueries({ queryKey: SUBJECT_INSTRUCTORS_QUERY_KEY(subjectId) });
+            const newUsers = previousUsers ? previousUsers.filter((u) => u.uid !== user.uid) : [];
+            queryClient.setQueryData(SUBJECT_INSTRUCTORS_QUERY_KEY(subjectId), newUsers);
+            return { previousUsers: previousUsers || [] };
+        },
+        onSuccess: (_, { subjectId }) => {
+            queryClient.invalidateQueries({
+                queryKey: SUBJECT_INSTRUCTORS_QUERY_KEY(subjectId),
+            });
+        },
+        onError: (_, { subjectId }, ctx) => {
+            queryClient.setQueryData<User[]>(
+                SUBJECT_INSTRUCTORS_QUERY_KEY(subjectId),
+                () => ctx!.previousUsers!
+            );
+            alert("Could not delete subject instructor. Please try again.");
+        },
+    });
+}
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index aaa0e90c..ddf57daf 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -13,6 +13,7 @@ import useCanVisit, {
     useOrCondition,
     useIsInGroupOfProjectCondition,
     useIsTeacherCondition,
+    useAndCondition,
 } from "./middleware/canVisit";
 
 declare module "vue-router" {
@@ -123,11 +124,22 @@ const router = createRouter({
         {
             path: "/subjects/create",
             name: "create-subject",
-            component: () => import("../views/subject/CreateSubjectView.vue"),
+            component: () => import("../views/subject/modify/CreateSubjectView.vue"),
             meta: {
                 middleware: useCanVisit(useOrCondition(useIsAdminCondition, useIsTeacherCondition)),
             },
         },
+        {
+            path: "/subjects/:subjectId(\\d+)/edit",
+            name: "edit-subject",
+            component: () => import("../views/subject/modify/PatchSubjectView.vue"),
+            props: (route) => ({ subjectId: Number(route.params.subjectId) }),
+            meta: {
+                middleware: useCanVisit(
+                    useAndCondition(useIsTeacherCondition, useIsInstructorOfSubjectCondition)
+                ),
+            },
+        },
         {
             path: "/subjects/:subjectId(\\d+)",
             name: "subject",
@@ -205,7 +217,7 @@ router.beforeEach(async (to, from, next) => {
     }
 
     let new_next = next;
-    for (let middleware of middlewares) {
+    for (const middleware of middlewares) {
         const context: MiddlewareContext = { to, from, next: new_next, router };
         const { next: returned_next, final } = await middleware(context);
         if (final) {
diff --git a/frontend/src/services/subject.ts b/frontend/src/services/subject.ts
index 601b5864..d0a56843 100644
--- a/frontend/src/services/subject.ts
+++ b/frontend/src/services/subject.ts
@@ -2,7 +2,7 @@ import type User from "@/models/User";
 import type Subject from "@/models/Subject";
 import type { UserSubjectList } from "@/models/Subject";
 import { authorized_fetch } from "@/services";
-import type SubjectForm from "@/models/Subject";
+import type { SubjectForm } from "@/models/Subject";
 
 /**
  * Fetches the subject with the given ID.
@@ -51,23 +51,45 @@ export async function registerToSubject(subjectUuid: string): Promise<Subject> {
 }
 
 export async function getSubjectUuid(subjectId: number): Promise<string> {
-    const result = await authorized_fetch(`/api/subjects/${subjectId}/uuid`, { method: "GET" });
+    const result = await authorized_fetch<{ subject_uuid: string }>(
+        `/api/subjects/${subjectId}/uuid`,
+        { method: "GET" }
+    );
     return result.subject_uuid;
 }
 
 /**
- * Creates a new project.
+ * Creates a new subject.
  */
-export async function createSubject(projectData: SubjectForm): Promise<number> {
+export async function createSubject(subjectData: SubjectForm): Promise<number> {
     const response = await authorized_fetch<Subject>(`/api/subjects/`, {
         method: "POST",
-        body: JSON.stringify(projectData),
+        body: JSON.stringify(subjectData),
     });
     return response.id;
 }
 
+/**
+ * Updates the subject with the given ID.
+ */
+export async function updateSubject(subjectId: number, subjectData: SubjectForm): Promise<void> {
+    return await authorized_fetch(`/api/subjects/${subjectId}`, {
+        method: "PATCH",
+        body: JSON.stringify(subjectData),
+    });
+}
+
+/**
+ * Creates a new subject instructor.
+ */
 export async function createSubjectInstructor(subjectId: number, uid: string): Promise<void> {
     return authorized_fetch(`/api/subjects/${subjectId}/instructors?user_id=${uid}`, {
         method: "POST",
     });
 }
+
+export async function deleteSubjectInstructor(subjectId: number, uid: string): Promise<void> {
+    return authorized_fetch(`/api/subjects/${subjectId}/instructors/${uid}`, {
+        method: "DELETE",
+    });
+}
diff --git a/frontend/src/views/subject/SubjectView.vue b/frontend/src/views/subject/SubjectView.vue
index 6db57b44..4852db24 100644
--- a/frontend/src/views/subject/SubjectView.vue
+++ b/frontend/src/views/subject/SubjectView.vue
@@ -18,6 +18,7 @@
                         <SubjectHeaderContainer
                             v-if="subject"
                             :title="subject!.name"
+                            :subject-id="subjectId"
                             :instructors="sortedInstructors"
                             :academic-year="subject!.academic_year"
                             :is-instructor="isInstructor"
@@ -62,12 +63,12 @@ import {
     useSubjectInstructorsQuery,
     useSubjectStudentsQuery,
 } from "@/queries/Subject";
-import SubjectHeaderContainer from "@/components/subject/subjectview/header/SubjectHeaderContainer.vue";
-import SubjectProjectsPage from "@/components/subject/subjectview/body/projects/SubjectProjectsPage.vue";
+import SubjectHeaderContainer from "@/components/subject/subject/header/SubjectHeaderContainer.vue";
+import SubjectProjectsPage from "@/components/subject/subject/body/projects/SubjectProjectsPage.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";
+import RegisterLinkButton from "@/components/subject/subject/buttons/RegisterLinkButton.vue";
 
 const props = defineProps<{
     subjectId: number;
diff --git a/frontend/src/views/subject/SubjectsView.vue b/frontend/src/views/subject/SubjectsView.vue
index a462c513..16626491 100644
--- a/frontend/src/views/subject/SubjectsView.vue
+++ b/frontend/src/views/subject/SubjectsView.vue
@@ -49,8 +49,8 @@
 
 <script setup lang="ts">
 import { useSubjectsQuery } from "@/queries/Subject";
-import SubjectsHeaderContainer from "@/components/subject/subjectsview/header/SubjectsHeaderContainer.vue";
-import SubjectCard from "@/components/subject/subjectsview/body/SubjectCard.vue";
+import SubjectsHeaderContainer from "@/components/subject/subjects/header/SubjectsHeaderContainer.vue";
+import SubjectCard from "@/components/subject/subjects/body/SubjectCard.vue";
 import { computed, ref } from "vue";
 import useAcademicYear from "@/composables/useAcademicYear";
 import useIsTeacher from "@/composables/useIsTeacher";
diff --git a/frontend/src/views/subject/CreateSubjectView.vue b/frontend/src/views/subject/modify/CreateSubjectView.vue
similarity index 91%
rename from frontend/src/views/subject/CreateSubjectView.vue
rename to frontend/src/views/subject/modify/CreateSubjectView.vue
index bf559c44..aac4feb3 100644
--- a/frontend/src/views/subject/CreateSubjectView.vue
+++ b/frontend/src/views/subject/modify/CreateSubjectView.vue
@@ -36,8 +36,12 @@
                     </v-card>
                 </v-dialog>
                 <div class="flex-container">
-                    <CreateSubjectHeaderContainer
+                    <ModifySubjectHeaderContainer
+                        :title="$t('create_subject.new_subject')"
                         :image-path="`https://www.ugent.be/img/dcom/faciliteiten/ufo-logo.png`"
+                        :subject-name="subjectName"
+                        :academic-year="activeAcademicYear"
+                        :subject-mail="subjectMail"
                         :current-user-as-instructor="currentUserAsInstructor"
                         :is-subject-name-error="isSubjectNameError"
                         :is-subject-mail-error="isSubjectMailError"
@@ -46,14 +50,14 @@
                         @update:subject-mail="onSubjectMailUpdated"
                         @update:current-user-as-instructor="currentUserAsInstructor = $event"
                     >
-                    </CreateSubjectHeaderContainer>
-                    <CreateSubjectBody
+                    </ModifySubjectHeaderContainer>
+                    <ModifySubjectBody
                         :current-user="currentUser"
                         :instructors="shownInstructors"
                         @add-instructor="addInstructor"
                         @remove-instructor="removeInstructor"
                     >
-                    </CreateSubjectBody>
+                    </ModifySubjectBody>
                 </div>
                 <div class="confirm-btn-container">
                     <v-btn class="ma-2" color="grey" @click="dialog = true">
@@ -75,8 +79,8 @@ import { useCreateSubjectInstructorMutation, useCreateSubjectMutation } from "@/
 import type SubjectForm from "@/models/Subject";
 import type User from "@/models/User";
 import { useCurrentUserQuery } from "@/queries/User";
-import CreateSubjectHeaderContainer from "@/components/subject/createSubjectView/header/CreateSubjectHeaderContainer.vue";
-import CreateSubjectBody from "@/components/subject/createSubjectView/body/CreateSubjectBody.vue";
+import ModifySubjectHeaderContainer from "@/components/subject/modify/header/ModifySubjectHeaderContainer.vue";
+import ModifySubjectBody from "@/components/subject/modify/body/ModifySubjectBody.vue";
 import { useRouter } from "vue-router";
 
 const snackbar = ref(false);
diff --git a/frontend/src/views/subject/modify/PatchSubjectView.vue b/frontend/src/views/subject/modify/PatchSubjectView.vue
new file mode 100644
index 00000000..592ab15a
--- /dev/null
+++ b/frontend/src/views/subject/modify/PatchSubjectView.vue
@@ -0,0 +1,313 @@
+<template>
+    <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-icon>mdi-arrow-left</v-icon>
+            </v-btn>
+        </v-col>
+        <v-col cols="11">
+            <v-skeleton-loader :loading="isLoading" type="card" class="ma-8">
+                <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">
+                            {{ $t("patch_subject.cancel_dialog") }}
+                        </v-card-title>
+                        <v-card-actions>
+                            <v-spacer></v-spacer>
+                            <v-btn color="blue darken-1" @click="dialog = false">
+                                {{ $t("default.no_capital") }}
+                            </v-btn>
+                            <v-btn
+                                color="blue darken-1"
+                                @click="
+                                    router.push({
+                                        name: 'subject',
+                                        params: { subjectId: subjectId },
+                                    })
+                                "
+                            >
+                                {{ $t("default.yes_capital") }}
+                            </v-btn>
+                        </v-card-actions>
+                    </v-card>
+                </v-dialog>
+                <div class="flex-container">
+                    <ModifySubjectHeaderContainer
+                        :title="$t('patch_subject.edit_subject')"
+                        :image-path="`https://www.ugent.be/img/dcom/faciliteiten/ufo-logo.png`"
+                        :subject-name="subject!.name"
+                        :academic-year="subject!.academic_year"
+                        :subject-mail="subject!.email || ''"
+                        :current-user-as-instructor="currentUserAsInstructor"
+                        :is-subject-name-error="isSubjectNameError"
+                        :is-subject-mail-error="isSubjectMailError"
+                        @update:subject-name="onSubjectNameUpdated"
+                        @update:subject-mail="onSubjectMailUpdated"
+                        @update:active-academic-year="activeAcademicYear = $event"
+                        @update:current-user-as-instructor="onCurrentUserAsInstructorChanged"
+                    >
+                    </ModifySubjectHeaderContainer>
+                    <ModifySubjectBody
+                        :current-user="currentUser"
+                        :instructors="pageUpdating ? tempInstructors : shownInstructors"
+                        @add-instructor="addInstructor"
+                        @remove-instructor="removeInstructor"
+                    >
+                    </ModifySubjectBody>
+                </div>
+
+                <div class="confirm-btn-container">
+                    <v-btn class="ma-2" color="grey" @click="dialog = true">
+                        {{ $t("default.cancel") }}
+                    </v-btn>
+                    <v-btn class="ma-2" @click.prevent="handleSubmit" color="primary" type="submit">
+                        {{ $t("default.confirm") }}
+                    </v-btn>
+                </div>
+            </v-skeleton-loader>
+        </v-col>
+    </v-row>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, toRefs } from "vue";
+import {
+    useCreateSubjectInstructorMutation,
+    useDeleteSubjectInstructorMutation,
+    useSubjectInstructorsQuery,
+    useSubjectQuery,
+    useUpdateSubjectMutation,
+} from "@/queries/Subject";
+import type SubjectForm from "@/models/Subject";
+import type User from "@/models/User";
+import { useCurrentUserQuery } from "@/queries/User";
+import { useRouter } from "vue-router";
+import ModifySubjectHeaderContainer from "@/components/subject/modify/header/ModifySubjectHeaderContainer.vue";
+import ModifySubjectBody from "@/components/subject/modify/body/ModifySubjectBody.vue";
+
+const props = defineProps<{
+    subjectId: number;
+}>();
+
+const { subjectId } = toRefs(props);
+
+const snackbar = ref(false);
+const dialog = ref(false);
+const isSubjectNameError = ref(false);
+const isSubjectMailError = ref(false);
+const subjectName = ref("");
+const subjectMail = ref("");
+const activeAcademicYear = ref<number | null>(null);
+const currentUserAsInstructor = ref(computed(() => isInstructor.value));
+const addedInstructors = ref<Set<User>>(new Set());
+const removedInstructorUIDs = ref<Set<string>>(new Set());
+const subjectNameChanged = ref(false);
+const subjectMailChanged = ref(false);
+const pageUpdating = ref(false);
+const tempInstructors = ref<User[]>([]);
+
+const {
+    data: currentUser,
+    isLoading: isCurrentUserLoading,
+    isError: isCurrentUserError,
+} = useCurrentUserQuery();
+const {
+    data: subject,
+    isLoading: isSubjectLoading,
+    isError: isSubjectError,
+} = useSubjectQuery(subjectId);
+const {
+    data: instructors,
+    isLoading: isInstructorsLoading,
+    isError: isInstructorsError,
+} = useSubjectInstructorsQuery(subjectId);
+
+const { mutateAsync: updateSubject } = useUpdateSubjectMutation();
+const { mutateAsync: createSubjectInstructor } = useCreateSubjectInstructorMutation();
+const { mutateAsync: deleteSubjectInstructor } = useDeleteSubjectInstructorMutation();
+
+const isLoading = computed(
+    () => isCurrentUserLoading.value || isSubjectLoading.value || isInstructorsLoading.value
+);
+
+const isError = computed(
+    () => isCurrentUserError.value || isSubjectError.value || isInstructorsError.value
+);
+
+const isInstructor = computed(() => {
+    return shownInstructors.value.some((instructor) => instructor?.uid === currentUser.value?.uid);
+});
+
+const isCurrentInstructor = (user: User) => {
+    return new Set([...(instructors.value || [])].map((instructor) => instructor.uid)).has(
+        user.uid
+    );
+};
+
+const name = computed(() =>
+    subjectNameChanged.value ? subjectName.value || "" : subject.value!.name
+);
+const academicYear = computed(() => activeAcademicYear.value || subject.value!.academic_year);
+const mail = computed(() =>
+    subjectMailChanged.value ? subjectMail.value || "" : subject.value!.email || ""
+);
+
+const router = useRouter();
+
+const shownInstructors = computed(() => {
+    return Array.from(
+        new Set(
+            [...(instructors.value || []), ...addedInstructors.value].filter((instructor: User) => {
+                return !removedInstructorUIDs.value.has(instructor.uid);
+            })
+        )
+    ).sort((a, b) => {
+        if (a?.is_teacher && !b?.is_teacher) {
+            return -1;
+        } else if (!a?.is_teacher && b?.is_teacher) {
+            return 1;
+        } else {
+            return a?.surname.localeCompare(b?.surname);
+        }
+    });
+});
+
+const getInstructor = (instructorUID: string) => {
+    return [...(instructors.value || [])].find((i) => i.uid === instructorUID);
+};
+
+const addInstructor = (instructor: User) => {
+    if (isCurrentInstructor(instructor)) {
+        removedInstructorUIDs.value.delete(instructor.uid);
+    } else {
+        addedInstructors.value.add(instructor);
+    }
+};
+
+const removeInstructor = (instructor: User) => {
+    if (isCurrentInstructor(instructor)) {
+        removedInstructorUIDs.value.add(instructor.uid);
+    }
+    addedInstructors.value.delete(instructor);
+};
+
+const onCurrentUserAsInstructorChanged = (isCurrentUserInstructor: boolean) => {
+    if (isCurrentUserInstructor) {
+        removedInstructorUIDs.value.delete(currentUser.value.uid);
+    } else {
+        removedInstructorUIDs.value.add(currentUser.value.uid);
+    }
+};
+
+const onSubjectNameUpdated = (name: string) => {
+    subjectName.value = name;
+    subjectNameChanged.value = true;
+    isSubjectNameError.value = false;
+};
+
+const onSubjectMailUpdated = (mail: string) => {
+    subjectMail.value = mail;
+    subjectMailChanged.value = true;
+    isSubjectMailError.value = false;
+};
+
+const validateSubjectName = () => {
+    if (!subjectNameChanged.value) {
+        return true;
+    }
+    return name.value.trim() !== "" && name.value.trim().length > 2;
+};
+
+const validateSubjectMail = () => {
+    if (!subjectMailChanged.value) {
+        return true;
+    }
+    return subjectMail.value == "" || /.+@.+\..+/.test(subjectMail.value.trim());
+};
+
+const validateInstructors = () => {
+    return (
+        shownInstructors.value.length > 0 &&
+        shownInstructors.value.some((instructor) => instructor.is_teacher)
+    );
+};
+
+async function handleSubmit() {
+    if (!validateSubjectName()) {
+        isSubjectNameError.value = true;
+        return;
+    }
+
+    if (!validateSubjectMail()) {
+        isSubjectMailError.value = true;
+        return;
+    }
+
+    if (!validateInstructors()) {
+        snackbar.value = true;
+        return;
+    }
+
+    const subjectData: SubjectForm = {
+        name: name.value.trim().charAt(0).toUpperCase() + name.value.trim().slice(1),
+        email: mail.value.trim(),
+        academic_year: academicYear.value,
+    };
+
+    try {
+        await updateSubject({ subject: subjectData, subjectId: subjectId.value });
+
+        pageUpdating.value = true;
+        tempInstructors.value = [...shownInstructors.value];
+
+        for (let instructorUID of removedInstructorUIDs.value) {
+            const instructor = getInstructor(instructorUID);
+            if (instructor)
+                await deleteSubjectInstructor({
+                    subjectId: subjectId.value,
+                    user: instructor,
+                });
+        }
+
+        for (let instructor of addedInstructors.value) {
+            await createSubjectInstructor({
+                subjectId: subjectId.value,
+                user: instructor,
+            });
+        }
+
+        await router.push({ name: "subject", params: { subjectId: subjectId.value } });
+    } catch (error) {
+        console.error("Error during subject alteration:", error);
+    }
+}
+</script>
+
+<style scoped>
+.confirm-btn-container {
+    display: flex;
+    position: absolute;
+    right: 4vw;
+    bottom: 4vw;
+    margin-top: 2vh;
+}
+
+.back-button {
+    margin: 30px;
+}
+
+.flex-container {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    width: 100%;
+}
+</style>
diff --git a/frontend/tests/components/subject/subjectsview/body/SubjectCard.spec.ts b/frontend/tests/components/subject/subjectsview/body/SubjectCard.spec.ts
index 09c9a5e1..ae4a7e52 100644
--- a/frontend/tests/components/subject/subjectsview/body/SubjectCard.spec.ts
+++ b/frontend/tests/components/subject/subjectsview/body/SubjectCard.spec.ts
@@ -1,6 +1,6 @@
 import { mount } from "@vue/test-utils";
 import {expect, describe, it} from "vitest";
-import SubjectsCard from "@/components/subject/subjectsview/body/SubjectCard.vue"
+import SubjectsCard from "@/components/subject/subjects/body/SubjectCard.vue"
 
 describe("subjectsCard", () => {
     const wrapper = mount(SubjectsCard, {
diff --git a/frontend/tests/components/subject/subjectsview/header/SubjectsHeaderCard.spec.ts b/frontend/tests/components/subject/subjectsview/header/SubjectsHeaderCard.spec.ts
index c87d31fe..391b90dd 100644
--- a/frontend/tests/components/subject/subjectsview/header/SubjectsHeaderCard.spec.ts
+++ b/frontend/tests/components/subject/subjectsview/header/SubjectsHeaderCard.spec.ts
@@ -1,6 +1,6 @@
 import { mount } from "@vue/test-utils";
 import {expect, describe, it, vi} from "vitest";
-import SubjectsHeaderCard from "@/components/subject/subjectsview/header/SubjectsHeaderCard.vue"
+import SubjectsHeaderCard from "@/components/subject/subjects/header/SubjectsHeaderCard.vue"
 
 describe("SubjectsHeaderCard", () => {
     const ResizeObserverMock = vi.fn(() => ({
diff --git a/frontend/tests/components/subject/subjectsview/header/SubjectsHeaderContainer.spec.ts b/frontend/tests/components/subject/subjectsview/header/SubjectsHeaderContainer.spec.ts
index b63e535b..9f1522a1 100644
--- a/frontend/tests/components/subject/subjectsview/header/SubjectsHeaderContainer.spec.ts
+++ b/frontend/tests/components/subject/subjectsview/header/SubjectsHeaderContainer.spec.ts
@@ -1,6 +1,6 @@
 import { mount } from "@vue/test-utils";
 import {expect, describe, it} from "vitest";
-import SubjectsHeaderContainer from "@/components/subject/subjectsview/header/SubjectsHeaderContainer.vue"
+import SubjectsHeaderContainer from "@/components/subject/subjects/header/SubjectsHeaderContainer.vue"
 
 describe("SubjectsHeaderContainer", () => {
     const wrapper = mount(SubjectsHeaderContainer, {