diff --git a/frontend/src/components/subject/createSubjectView/body/CreateSubjectBody.vue b/frontend/src/components/subject/createSubjectView/body/CreateSubjectBody.vue
new file mode 100644
index 00000000..16f3e330
--- /dev/null
+++ b/frontend/src/components/subject/createSubjectView/body/CreateSubjectBody.vue
@@ -0,0 +1,35 @@
+<template>
+    <v-row class="body">
+        <v-col cols="4">
+            <SubjectInstructorsCard
+                :instructors="instructors"
+                @remove-instructor="$emit('remove-instructor', $event)"
+            ></SubjectInstructorsCard>
+        </v-col>
+        <v-col cols="8">
+            <UserSearchCard
+                :current-user="currentUser"
+                :instructors="instructors"
+                @add-instructor="$emit('add-instructor', $event)"
+            ></UserSearchCard>
+        </v-col>
+    </v-row>
+</template>
+
+<script setup lang="ts">
+import SubjectInstructorsCard from "@/components/subject/createSubjectView/body/SubjectInstructorsCard.vue";
+import type User from "@/models/User";
+import UserSearchCard from "@/components/subject/createSubjectView/body/UserSearchCard.vue";
+
+defineProps<{
+    currentUser: User;
+    instructors: User[];
+}>();
+
+defineEmits<{
+    (e: "add-instructor", user: User): void;
+    (e: "remove-instructor", user: User): void;
+}>();
+</script>
+
+<style scoped></style>
diff --git a/frontend/src/components/subject/createSubjectView/body/SubjectInstructorsCard.vue b/frontend/src/components/subject/createSubjectView/body/SubjectInstructorsCard.vue
new file mode 100644
index 00000000..b4bdcf64
--- /dev/null
+++ b/frontend/src/components/subject/createSubjectView/body/SubjectInstructorsCard.vue
@@ -0,0 +1,55 @@
+<template>
+    <v-card variant="text" width="100%" class="title-card" height="100%">
+        <v-card-title class="card-title">
+            {{ $t("create_subject.subject_instructors") }}
+        </v-card-title>
+        <v-card-text>
+            <v-chip
+                v-for="instructor in instructors"
+                :key="instructor!.uid"
+                closable
+                variant="elevated"
+                :color="instructor!.is_teacher ? `primary` : `green`"
+                @click:close="$emit('remove-instructor', instructor)"
+                class="ma-1"
+            >
+                <v-icon
+                    :icon="instructor!.is_teacher ? `mdi-account-tie-outline` : `mdi-school`"
+                    start
+                ></v-icon>
+                {{ instructor.given_name[0] }}. {{ instructor.surname }}
+            </v-chip>
+        </v-card-text>
+    </v-card>
+</template>
+
+<script setup lang="ts">
+import type User from "@/models/User";
+
+defineProps<{
+    instructors: User[];
+}>();
+
+defineEmits<{
+    (e: "remove-instructor", user: User): void;
+}>();
+</script>
+
+<style scoped>
+.title-card {
+    background-color: var(--color-secondary);
+    padding: 20px;
+}
+
+.card-title {
+    font-size: 24px;
+    text-transform: capitalize;
+    display: block;
+    line-height: 1.2;
+    font-weight: 500;
+    color: black;
+    word-wrap: break-word;
+    white-space: normal;
+    overflow: hidden;
+}
+</style>
diff --git a/frontend/src/components/subject/createSubjectView/body/UserSearchCard.vue b/frontend/src/components/subject/createSubjectView/body/UserSearchCard.vue
new file mode 100644
index 00000000..3a4bce23
--- /dev/null
+++ b/frontend/src/components/subject/createSubjectView/body/UserSearchCard.vue
@@ -0,0 +1,45 @@
+<template>
+    <v-card variant="text" class="title-card" width="100%" height="50vh">
+        <v-card-title class="card-title">
+            {{ $t("create_subject.search_for_instructors") }}
+        </v-card-title>
+        <v-card-text>
+            <UserSearchList
+                :current-user="currentUser"
+                :instructors="instructors"
+                @add-instructor="$emit('add-instructor', $event)"
+            >
+            </UserSearchList>
+        </v-card-text>
+    </v-card>
+</template>
+
+<script setup lang="ts">
+import UserSearchList from "@/components/subject/createSubjectView/body/UserSearchList.vue";
+import type User from "@/models/User";
+
+defineProps<{
+    currentUser: User;
+    instructors: User[];
+}>();
+
+defineEmits<{
+    (e: "add-instructor", user: User): void;
+}>();
+</script>
+
+<style scoped>
+.title-card {
+    background-color: var(--color-secondary);
+    padding: 20px;
+}
+
+.card-title {
+    font-size: 24px;
+    text-transform: capitalize;
+    display: block;
+    line-height: 1.2;
+    font-weight: 500;
+    color: black;
+}
+</style>
diff --git a/frontend/src/components/subject/createSubjectView/body/UserSearchList.vue b/frontend/src/components/subject/createSubjectView/body/UserSearchList.vue
new file mode 100644
index 00000000..0a75b6d7
--- /dev/null
+++ b/frontend/src/components/subject/createSubjectView/body/UserSearchList.vue
@@ -0,0 +1,104 @@
+<template>
+    <v-text-field
+        :loading="searchLoading"
+        v-model="search"
+        :label="$t('default.search')"
+        :placeholder="$t('create_subject.search_for_instructors')"
+        prepend-inner-icon="mdi-magnify"
+        clearable
+        single-line
+        hide-details
+        variant="outlined"
+        @click:prepend-inner="onSearchIconClicked"
+        @keydown.enter="onSearchIconClicked"
+    ></v-text-field>
+
+    <div class="scrollable-list">
+        <p v-if="shownUsers.length === 0">No results found</p>
+        <v-list v-else>
+            <v-list-item v-for="(user, index) in shownUsers" :key="index">
+                <v-row>
+                    <v-col>
+                        <v-list-item-title>
+                            {{ user.given_name }} {{ user.surname }}
+                        </v-list-item-title>
+                    </v-col>
+                    <v-col>
+                        <v-btn
+                            @click="$emit('add-instructor', user)"
+                            color="primary"
+                            :disabled="userIsInstructor(user)"
+                        >
+                            {{ $t("default.add") }}
+                        </v-btn>
+                    </v-col>
+                </v-row>
+            </v-list-item>
+        </v-list>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useUsersQuery } from "@/queries/User";
+import { computed, ref, toRefs } from "vue";
+import type User from "@/models/User";
+
+const props = defineProps<{
+    instructors: User[];
+    currentUser: User;
+}>();
+
+const { instructors, currentUser } = toRefs(props);
+
+const { data: users } = useUsersQuery();
+
+const search = ref("");
+const searchLoading = ref(false);
+const searchLoaded = ref(false);
+
+const shownUsers = computed(() => {
+    if (!search.value) {
+        return [];
+    }
+    return [...(users.value || [])]
+        .sort((a: User, b: User) => {
+            return a.surname.localeCompare(b.surname);
+        })
+        .filter((user: User) => {
+            return (
+                user?.uid !== currentUser.value?.uid &&
+                `${user?.given_name} ${user.surname}`
+                    .toLowerCase()
+                    .includes(search.value.toLowerCase())
+            );
+        });
+});
+
+defineEmits<{
+    (e: "add-instructor", user: User): void;
+}>();
+
+const onSearchIconClicked = () => {
+    searchLoading.value = true;
+    setTimeout(() => {
+        searchLoaded.value = true;
+        searchLoading.value = false;
+    }, 1000);
+};
+
+const userIsInstructor = (user: User) => {
+    return instructors.value.some((instructor: User) => instructor?.uid === user?.uid);
+};
+</script>
+
+<style scoped>
+.scrollable-list {
+    overflow-y: auto;
+    max-height: 30vh;
+    scrollbar-width: none;
+}
+
+.scrollable-list::-webkit-scrollbar {
+    width: 0; /* For Chrome, Safari, and Opera */
+}
+</style>
diff --git a/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue
new file mode 100644
index 00000000..0e7a2676
--- /dev/null
+++ b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue
@@ -0,0 +1,142 @@
+<template>
+    <v-card variant="text" class="title-card" width="100%" height="45vh">
+        <v-card-title class="title">
+            {{ $t("create_subject.new_subject") }}
+        </v-card-title>
+
+        <v-card-text>
+            <v-text-field
+                v-model="subjectName"
+                :rules="[rules.required, rules.length]"
+                :label="$t('create_subject.title')"
+                required
+                variant="outlined"
+                :placeholder="$t('create_subject.enter_title')"
+                clearable
+                hide-details="auto"
+                @keydown.enter.prevent
+                :error="isSubjectNameError"
+                class="form-elem"
+            ></v-text-field>
+
+            <v-row>
+                <v-col>
+                    <v-select
+                        v-model="activeAcademicYear"
+                        variant="outlined"
+                        :items="academicYearItems"
+                        :item-title="(item) => `20${item}-20${item + 1}`"
+                        :item-value="(item) => item"
+                        :label="$t('subject.academy_year')"
+                        required
+                        class="form-elem-academic"
+                    ></v-select>
+                </v-col>
+                <v-col>
+                    <v-checkbox
+                        :label="$t('create_subject.assign_self')"
+                        v-model="checkbox"
+                        color="primary"
+                        class="checkbox"
+                    ></v-checkbox>
+                </v-col>
+            </v-row>
+            <v-text-field
+                v-model="subjectMail"
+                type="email"
+                variant="outlined"
+                :rules="[rules.email]"
+                :label="$t('create_subject.email')"
+                clearable
+                :placeholder="$t('create_subject.enter_email')"
+                :hint="$t('create_subject.email_hint')"
+                hide-details="auto"
+                @keydown.enter.prevent
+                :error="isSubjectMailError"
+                class="form-elem"
+            >
+            </v-text-field>
+        </v-card-text>
+    </v-card>
+</template>
+
+<script setup lang="ts">
+import { ref, toRefs, watch } from "vue";
+import useAcademicYear from "@/composables/useAcademicYear";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+
+const props = defineProps<{
+    currentUserAsInstructor: boolean;
+    isSubjectNameError: boolean;
+    isSubjectMailError: boolean;
+}>();
+
+const { currentUserAsInstructor } = toRefs(props);
+
+const checkbox = ref(currentUserAsInstructor.value);
+
+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 rules = {
+    required: (value: string) => !!value || t("create_subject.field_required"),
+    length: (value: string) => value.length > 2 || t("create_subject.field_length"),
+    email: (value: string) =>
+        !value || /.+@.+\..+/.test(value) || t("create_subject.email_invalid"),
+};
+
+const emit = defineEmits<{
+    (e: "update:current-user-as-instructor", value: boolean): void;
+    (e: "update:subject-name", value: string): void;
+    (e: "update:active-academic-year", value: number): void;
+    (e: "update:subject-mail", value: string): void;
+}>();
+
+watch(subjectName, (newValue) => {
+    emit("update:subject-name", newValue);
+});
+
+watch(activeAcademicYear, (newValue) => {
+    emit("update:active-academic-year", newValue);
+});
+
+watch(checkbox, (newValue) => {
+    emit("update:current-user-as-instructor", newValue);
+});
+
+watch(subjectMail, (newValue) => {
+    emit("update:subject-mail", newValue);
+});
+</script>
+
+<style scoped>
+.title-card {
+    background-color: var(--color-secondary);
+    padding: 20px;
+}
+
+.form-elem {
+    margin-bottom: 2vh;
+    margin-top: -3vh;
+}
+
+.form-elem-academic {
+    max-width: 20vw;
+}
+.title {
+    font-size: 32px;
+    letter-spacing: -0.5px;
+    text-transform: capitalize;
+    font-weight: bold;
+    margin-bottom: 4vh;
+    font-family: "Poppins", sans-serif;
+}
+</style>
diff --git a/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderContainer.vue b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderContainer.vue
new file mode 100644
index 00000000..d149c68b
--- /dev/null
+++ b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderContainer.vue
@@ -0,0 +1,42 @@
+<template>
+    <v-row>
+        <v-col cols="4">
+            <CreateSubjectHeaderImage :imagePath="imagePath"></CreateSubjectHeaderImage>
+        </v-col>
+        <v-col cols="8">
+            <CreateSubjectHeaderCard
+                :current-user-as-instructor="currentUserAsInstructor"
+                :is-subject-name-error="isSubjectNameError"
+                :is-subject-mail-error="isSubjectMailError"
+                @update:subject-name="$emit('update:subject-name', $event)"
+                @update:active-academic-year="$emit('update:active-academic-year', $event)"
+                @update:subject-mail="$emit('update:subject-mail', $event)"
+                @update:current-user-as-instructor="
+                    $emit('update:current-user-as-instructor', $event)
+                "
+            >
+            </CreateSubjectHeaderCard>
+        </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";
+
+defineProps<{
+    imagePath: string;
+    currentUserAsInstructor: boolean;
+    isSubjectNameError: boolean;
+    isSubjectMailError: boolean;
+}>();
+
+defineEmits<{
+    (e: "update:current-user-as-instructor", value: boolean): void;
+    (e: "update:subject-name", value: string): void;
+    (e: "update:subject-mail", value: string): void;
+    (e: "update:active-academic-year", value: number): void;
+}>();
+</script>
+
+<style scoped></style>
diff --git a/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderImage.vue b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderImage.vue
new file mode 100644
index 00000000..53f4dad8
--- /dev/null
+++ b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderImage.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: 45vh;
+}
+</style>
diff --git a/frontend/src/components/subject/subjectsview/SubjectCard.vue b/frontend/src/components/subject/subjectsview/body/SubjectCard.vue
similarity index 93%
rename from frontend/src/components/subject/subjectsview/SubjectCard.vue
rename to frontend/src/components/subject/subjectsview/body/SubjectCard.vue
index 8701fce1..60834f0b 100644
--- a/frontend/src/components/subject/subjectsview/SubjectCard.vue
+++ b/frontend/src/components/subject/subjectsview/body/SubjectCard.vue
@@ -1,6 +1,6 @@
 <template>
     <router-link :to="{ name: 'subject', params: { subjectId: subject.id } }" class="router-link">
-        <v-card class="subject-card" height="16vh" color="#1D357EFF">
+        <v-card class="subject-card" height="16vh" color="primary">
             <SubjectIcon :role="role" size="xx-large" class="subject-icon"></SubjectIcon>
             <v-card-title class="subject-title">
                 {{ subject?.name }}
diff --git a/frontend/src/components/subject/subjectsview/SubjectsHeaderCard.vue b/frontend/src/components/subject/subjectsview/header/SubjectsHeaderCard.vue
similarity index 95%
rename from frontend/src/components/subject/subjectsview/SubjectsHeaderCard.vue
rename to frontend/src/components/subject/subjectsview/header/SubjectsHeaderCard.vue
index c70bb20e..bf05ca66 100644
--- a/frontend/src/components/subject/subjectsview/SubjectsHeaderCard.vue
+++ b/frontend/src/components/subject/subjectsview/header/SubjectsHeaderCard.vue
@@ -7,7 +7,7 @@
                 </v-card-title>
 
                 <v-card-text>
-                    <div class="chip_container">
+                    <div class="chip-container">
                         <v-chip-group mandatory v-model="activeAcademicYear" column>
                             <v-chip
                                 v-for="(academicYear, index) in academicYears"
@@ -103,15 +103,10 @@ watch(activeSubjectFilter, (newVal: SubjectFilter | undefined) => {
     font-family: "Poppins", sans-serif;
 }
 
-.chip_container {
+.chip-container {
     overflow-x: auto;
 }
 
-.checkbox container {
-    display: flex;
-    justify-content: flex-end;
-}
-
 .subject-checkbox {
     margin-top: -15px;
 }
diff --git a/frontend/src/components/subject/subjectsview/SubjectsHeaderContainer.vue b/frontend/src/components/subject/subjectsview/header/SubjectsHeaderContainer.vue
similarity index 93%
rename from frontend/src/components/subject/subjectsview/SubjectsHeaderContainer.vue
rename to frontend/src/components/subject/subjectsview/header/SubjectsHeaderContainer.vue
index 6aa0eb17..14fe97fb 100644
--- a/frontend/src/components/subject/subjectsview/SubjectsHeaderContainer.vue
+++ b/frontend/src/components/subject/subjectsview/header/SubjectsHeaderContainer.vue
@@ -17,8 +17,8 @@
 </template>
 
 <script setup lang="ts">
-import SubjectsHeaderCard from "@/components/subject/subjectsview/SubjectsHeaderCard.vue";
-import SubjectsHeaderImage from "@/components/subject/subjectsview/SubjectsHeaderImage.vue";
+import SubjectsHeaderCard from "@/components/subject/subjectsview/header/SubjectsHeaderCard.vue";
+import SubjectsHeaderImage from "@/components/subject/subjectsview/header/SubjectsHeaderImage.vue";
 import type { SubjectDetails, SubjectFilter } from "@/models/Subject";
 
 defineProps<{
diff --git a/frontend/src/components/subject/subjectsview/SubjectsHeaderImage.vue b/frontend/src/components/subject/subjectsview/header/SubjectsHeaderImage.vue
similarity index 100%
rename from frontend/src/components/subject/subjectsview/SubjectsHeaderImage.vue
rename to frontend/src/components/subject/subjectsview/header/SubjectsHeaderImage.vue
diff --git a/frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue b/frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue
index d054fb30..e216df2c 100644
--- a/frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue
+++ b/frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue
@@ -1,28 +1,41 @@
 <template>
     <v-card variant="text" class="title-card" height="165">
         <v-row>
-            <v-col :cols="isAdmin || (isInstructor && isTeacher) ? 10 : 12">
+            <v-col :cols="isAdmin || (isInstructor && isTeacher) ? 11 : 12" class="scrollable-col">
                 <v-card-title class="title">
-                    {{ title }}
+                    <div class="scrollable">
+                        {{ title }}
+                    </div>
                 </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-chip color="primary" variant="flat" label>
+                        {{
+                            `${$t("subject.academy_year")} 20${academicYear}-20${academicYear + 1}`
+                        }}
+                    </v-chip>
+                    <v-row class="instr-container">
+                        <v-chip
                             v-for="instructor in instructors"
-                            :key="instructor.uid"
-                            :title="`${instructor.given_name[0]}. ${instructor.surname}`"
-                            :clickable="false"
-                            :active="false"
-                        ></HeaderSubtitleButton>
-                    </div>
+                            :key="instructor!.uid"
+                            variant="outlined"
+                            :color="instructor!.is_teacher ? `primary` : `green`"
+                            class="ma-1 instr-chip"
+                            exact
+                        >
+                            <v-icon
+                                :icon="
+                                    instructor!.is_teacher
+                                        ? `mdi-account-tie-outline`
+                                        : `mdi-school`
+                                "
+                                start
+                            ></v-icon>
+                            {{ instructor.given_name[0] }}. {{ instructor.surname }}
+                        </v-chip>
+                    </v-row>
                 </v-card-text>
             </v-col>
-            <v-col v-if="isAdmin || (isInstructor && isTeacher)" cols="2">
+            <v-col v-if="isAdmin || (isInstructor && isTeacher)" cols="1">
                 <router-link to="" class="link">
                     <v-icon size="large">mdi-square-edit-outline</v-icon>
                 </router-link>
@@ -33,7 +46,6 @@
 
 <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";
 
@@ -52,20 +64,32 @@ const { isTeacher } = useIsTeacher();
 .title-card {
     background-color: white;
     padding: 20px;
+    overflow-y: auto;
+    scrollbar-width: none;
+}
+
+.title-card::-webkit-scrollbar {
+    display: none;
 }
 
-.title {
+.scrollable {
     font-size: 32px;
     letter-spacing: -0.5px;
     text-transform: capitalize;
     font-weight: bold;
     margin-bottom: 12px;
     font-family: "Poppins", sans-serif;
+    max-width: 49vw;
+    overflow-x: auto;
+    scrollbar-width: none;
+}
+
+.scrollable::-webkit-scrollbar {
+    display: none;
 }
 
 .instr-container {
-    margin-top: 10px;
-    margin-bottom: 5px;
+    margin-top: 1vh;
 }
 
 .link {
diff --git a/frontend/src/i18n/locales/en.ts b/frontend/src/i18n/locales/en.ts
index 1c9c4c55..51a64844 100644
--- a/frontend/src/i18n/locales/en.ts
+++ b/frontend/src/i18n/locales/en.ts
@@ -9,6 +9,12 @@ export default {
         },
         no: "no",
         to: "to ",
+        no_capital: "No",
+        yes_capital: "Yes",
+        cancel: "Cancel",
+        confirm: "Confirm",
+        search: "Search",
+        add: "Add",
     },
     logo: "ghent-university-logo-white.png",
     logout: "logout",
@@ -130,6 +136,25 @@ export default {
         student_subjects: "Show student subjects",
         no_subjects: "No subjects found.",
     },
+
+    create_subject: {
+        error_snackbar: "There needs to be at least one teacher amongst the subject instructors.",
+        cancel_dialog: "Cancel subject creation?",
+        new_subject: "New subject",
+        title: "Title",
+        enter_title: "Enter title",
+        enter_title_hint: "Enter a valid title for the new subject",
+        assign_self: "Assign myself as instructor",
+        field_required: "This field is required",
+        field_length: "Title must be at least 3 characters long",
+        subject_instructors: "Subject instructors",
+        search_for_instructors: "Search for instructors",
+        email: "Subject email",
+        enter_email: "Enter email",
+        email_hint: "Field is optional",
+        email_invalid: "Provided email is invalid",
+    },
+
     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 37693491..d7562635 100644
--- a/frontend/src/i18n/locales/nl.ts
+++ b/frontend/src/i18n/locales/nl.ts
@@ -9,6 +9,12 @@ export default {
         },
         no: "geen",
         to: "naar ",
+        no_capital: "Neen",
+        yes_capital: "Ja",
+        cancel: "Annuleren",
+        confirm: "Bevestigen",
+        search: "Zoeken",
+        add: "Toevoegen",
     },
     logo: "universiteit-gent-logo-white.png",
     logout: "uitloggen",
@@ -131,6 +137,26 @@ export default {
         student_subjects: "Toon student vakken",
         no_subjects: "Geen vakken gevonden.",
     },
+
+    create_subject: {
+        error_snackbar:
+            "Er moet minstens één lesgever bij de geselecteerde vakverantwoordelijken aanwezig zijn.",
+        cancel_dialog: "Vak aanmaken annuleren?",
+        new_subject: "Nieuw vak",
+        title: "Titel",
+        enter_title: "Voer titel in",
+        enter_title_hint: "Voer een geldige titel in voor het nieuwe vak",
+        assign_self: "Wijs mezelf toe als lesgever",
+        field_required: "Dit veld is verplicht",
+        field_length: "Titel moet minstens 3 tekens lang zijn",
+        subject_instructors: "Vak verantwoordelijken",
+        search_for_instructors: "Zoek naar vak verantwoordelijken",
+        email: "Vak email",
+        enter_email: "Voer email in",
+        email_hint: "Veld is optioneel",
+        email_invalid: "Ingevoerde email is ongeldig",
+    },
+
     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 9a391ec4..e965ed4c 100644
--- a/frontend/src/models/Subject.ts
+++ b/frontend/src/models/Subject.ts
@@ -26,3 +26,9 @@ export interface SubjectDetails {
     subjectData: Subject;
     role: SubjectRole;
 }
+
+export default interface SubjectForm {
+    name: string;
+    email: string;
+    academic_year: number;
+}
diff --git a/frontend/src/queries/Subject.ts b/frontend/src/queries/Subject.ts
index 8ea2f5f0..70f330d3 100644
--- a/frontend/src/queries/Subject.ts
+++ b/frontend/src/queries/Subject.ts
@@ -10,12 +10,15 @@ import {
     getSubjectByUuid,
     registerToSubject,
     getSubjectUuid,
+    createSubject,
+    createSubjectInstructor,
 } 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";
 
 function SUBJECT_QUERY_KEY(subjectId: number | string): (string | number)[] {
     return ["subject", subjectId];
@@ -142,9 +145,67 @@ export function useRegisterToSubjectMutation(): UseMutationReturnType<
         onSettled: () => {
             queryClient.invalidateQueries({ queryKey: SUBJECTS_QUERY_KEY() });
         },
-        onError: (error) => {
-            console.error(error);
+        onError: () => {
             alert("Failed to register to subject");
         },
     });
 }
+
+/**
+ * Mutation composable for creating a subject
+ */
+export function useCreateSubjectMutation(): UseMutationReturnType<
+    number,
+    Error,
+    SubjectForm,
+    void
+> {
+    const queryClient = useQueryClient();
+    return useMutation<number, Error, SubjectForm, void>({
+        mutationFn: createSubject,
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: SUBJECTS_QUERY_KEY() });
+        },
+        onError: () => {
+            alert("Could not create subject. Please try again.");
+        },
+    });
+}
+
+/**
+ * Mutation composable for creating subject instructor
+ */
+
+export function useCreateSubjectInstructorMutation(): UseMutationReturnType<
+    void,
+    Error,
+    { user: User; subjectId: number },
+    { previousUsers: User[] }
+> {
+    const queryClient = useQueryClient();
+    return useMutation({
+        mutationFn: ({ user, subjectId }) => createSubjectInstructor(subjectId, user.uid),
+        onMutate: ({ subjectId, user }) => {
+            const previousUsers = queryClient.getQueryData<User[]>(
+                SUBJECT_INSTRUCTORS_QUERY_KEY(subjectId)
+            );
+            queryClient.cancelQueries({ queryKey: SUBJECT_INSTRUCTORS_QUERY_KEY(subjectId) });
+            const newUsers = previousUsers ? [...previousUsers] : [];
+            newUsers.push(user);
+            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 create subject instructor. Please try again.");
+        },
+    });
+}
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 3c613489..7d3d04e4 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -80,7 +80,11 @@ const router = createRouter({
             path: "/subjects",
             name: "subjects",
             component: () => import("../views/subject/SubjectsView.vue"),
-            children: [],
+        },
+        {
+            path: "/subjects/create",
+            name: "create-subject",
+            component: () => import("../views/subject/CreateSubjectView.vue"),
         },
         {
             path: "/subjects/:subjectId(\\d+)",
diff --git a/frontend/src/services/subject.ts b/frontend/src/services/subject.ts
index 328c8e79..601b5864 100644
--- a/frontend/src/services/subject.ts
+++ b/frontend/src/services/subject.ts
@@ -2,6 +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";
 
 /**
  * Fetches the subject with the given ID.
@@ -53,3 +54,20 @@ export async function getSubjectUuid(subjectId: number): Promise<string> {
     const result = await authorized_fetch(`/api/subjects/${subjectId}/uuid`, { method: "GET" });
     return result.subject_uuid;
 }
+
+/**
+ * Creates a new project.
+ */
+export async function createSubject(projectData: SubjectForm): Promise<number> {
+    const response = await authorized_fetch<Subject>(`/api/subjects/`, {
+        method: "POST",
+        body: JSON.stringify(projectData),
+    });
+    return response.id;
+}
+
+export async function createSubjectInstructor(subjectId: number, uid: string): Promise<void> {
+    return authorized_fetch(`/api/subjects/${subjectId}/instructors?user_id=${uid}`, {
+        method: "POST",
+    });
+}
diff --git a/frontend/src/views/subject/CreateSubjectView.vue b/frontend/src/views/subject/CreateSubjectView.vue
new file mode 100644
index 00000000..67ca426c
--- /dev/null
+++ b/frontend/src/views/subject/CreateSubjectView.vue
@@ -0,0 +1,207 @@
+<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("create_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: 'subjects' })">
+                                {{ $t("default.yes_capital") }}
+                            </v-btn>
+                        </v-card-actions>
+                    </v-card>
+                </v-dialog>
+                <div class="flex-container">
+                    <CreateSubjectHeaderContainer
+                        :image-path="`https://www.ugent.be/img/dcom/faciliteiten/ufo-logo.png`"
+                        :current-user-as-instructor="currentUserAsInstructor"
+                        :is-subject-name-error="isSubjectNameError"
+                        :is-subject-mail-error="isSubjectMailError"
+                        @update:subject-name="onSubjectNameUpdated"
+                        @update:active-academic-year="activeAcademicYear = $event"
+                        @update:subject-mail="onSubjectMailUpdated"
+                        @update:current-user-as-instructor="currentUserAsInstructor = $event"
+                    >
+                    </CreateSubjectHeaderContainer>
+                    <CreateSubjectBody
+                        :current-user="currentUser"
+                        :instructors="shownInstructors"
+                        @add-instructor="addInstructor"
+                        @remove-instructor="removeInstructor"
+                    >
+                    </CreateSubjectBody>
+                </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="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 } from "vue";
+import useAcademicYear from "@/composables/useAcademicYear";
+import { useCreateSubjectInstructorMutation, useCreateSubjectMutation } from "@/queries/Subject";
+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 { useRouter } from "vue-router";
+
+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>(useAcademicYear());
+const instructors = ref<User[]>([]);
+const currentUserAsInstructor = ref(true);
+const subjectId = ref<number | undefined>(undefined);
+
+const { data: currentUser, isLoading, isError } = useCurrentUserQuery();
+const createSubjectMutation = useCreateSubjectMutation();
+const createSubjectInstructorMutation = useCreateSubjectInstructorMutation();
+
+const router = useRouter();
+
+const shownInstructors = computed(() => {
+    if (currentUserAsInstructor.value) {
+        return [currentUser.value, ...instructors.value];
+    }
+    return instructors.value;
+});
+
+const addInstructor = (user: User) => {
+    instructors.value.push(user);
+    instructors.value.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 removeInstructor = (instructor: User) => {
+    if (currentUser.value?.uid === instructor?.uid) {
+        currentUserAsInstructor.value = false;
+    } else {
+        instructors.value.splice(instructors.value.indexOf(instructor), 1);
+    }
+};
+
+const onSubjectNameUpdated = (name: string) => {
+    subjectName.value = name;
+    isSubjectNameError.value = false;
+};
+
+const onSubjectMailUpdated = (mail: string) => {
+    subjectMail.value = mail;
+    isSubjectMailError.value = false;
+};
+
+const validateSubjectName = () => {
+    return !(!subjectName.value || subjectName.value.trim().length < 3);
+};
+
+const validateSubjectMail = () => {
+    return !subjectMail.value || /.+@.+\..+/.test(subjectMail.value);
+};
+
+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 name = subjectName.value.trim();
+    const subjectData: SubjectForm = {
+        name: name.charAt(0).toUpperCase() + name.slice(1),
+        email: subjectMail.value,
+        academic_year: activeAcademicYear.value,
+    };
+
+    try {
+        subjectId.value = await createSubjectMutation.mutateAsync(subjectData);
+        for (let instructor of shownInstructors.value!) {
+            await createSubjectInstructorMutation.mutateAsync({
+                user: instructor!,
+                subjectId: subjectId.value!,
+            });
+        }
+
+        await router.push({ name: "subject", params: { subjectId: subjectId.value } });
+    } catch (error) {
+        console.error("Error during subject creation:", 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/src/views/subject/SubjectView.vue b/frontend/src/views/subject/SubjectView.vue
index 2e05df13..fb7cffeb 100644
--- a/frontend/src/views/subject/SubjectView.vue
+++ b/frontend/src/views/subject/SubjectView.vue
@@ -28,7 +28,7 @@
                             <SubjectHeaderContainer
                                 v-if="subject"
                                 :title="subject!.name"
-                                :instructors="instructors"
+                                :instructors="sortedInstructors"
                                 :academic-year="subject!.academic_year"
                                 :is-instructor="isInstructor"
                                 :is-student="isStudent"
@@ -133,6 +133,19 @@ const isInstructor = computed(() => {
 const isStudent = computed(() => {
     return [...(students.value || [])].some((student) => student?.uid === user.value?.uid);
 });
+
+const sortedInstructors = computed(() => {
+    return [...(instructors.value || [])].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 { isAdmin } = useIsAdmin();
 const { isTeacher } = useIsTeacher();
 </script>
diff --git a/frontend/src/views/subject/SubjectsView.vue b/frontend/src/views/subject/SubjectsView.vue
index a5aec499..e15e46ee 100644
--- a/frontend/src/views/subject/SubjectsView.vue
+++ b/frontend/src/views/subject/SubjectsView.vue
@@ -38,7 +38,7 @@
             </v-col>
             <v-col v-if="isAdmin || isTeacher" cols="2">
                 <div class="action-btn-container">
-                    <router-link to="">
+                    <router-link :to="{ name: 'create-subject' }">
                         <v-btn prepend-icon="mdi-plus-circle">
                             {{ $t("subjects.create_subject") }}
                         </v-btn>
@@ -52,8 +52,8 @@
 <script setup lang="ts">
 import { useSubjectsQuery } from "@/queries/Subject";
 import BackgroundContainer from "@/components/BackgroundContainer.vue";
-import SubjectsHeaderContainer from "@/components/subject/subjectsview/SubjectsHeaderContainer.vue";
-import SubjectCard from "@/components/subject/subjectsview/SubjectCard.vue";
+import SubjectsHeaderContainer from "@/components/subject/subjectsview/header/SubjectsHeaderContainer.vue";
+import SubjectCard from "@/components/subject/subjectsview/body/SubjectCard.vue";
 import { computed, ref } from "vue";
 import useAcademicYear from "@/composables/useAcademicYear";
 import useIsTeacher from "@/composables/useIsTeacher";