diff --git a/frontend/src/assets/lang/nl.json b/frontend/src/assets/lang/nl.json
index a4a6d000..d2b514a1 100644
--- a/frontend/src/assets/lang/nl.json
+++ b/frontend/src/assets/lang/nl.json
@@ -103,10 +103,11 @@
     "components": {
         "button": {
             "academic_year": "Academiejaar {0}",
-            "create_project": "Maak een nieuw project"
+            "createProject": "Maak een nieuw project"
         },
         "card": {
-            "open": "Details"
+            "open": "Details",
+            "newProject": "Nieuw Project"
         },
         "submission" : "Indienen"
     },
@@ -148,7 +149,7 @@
         "am": "voormiddag",
         "apply": "Toepassen",
         "cancel": "Annuleer",
-        "choose": "Kies",
+        "choose": "Kies een bestand",
         "chooseDate": "Kies datum",
         "chooseMonth": "Kies maand",
         "chooseYear": "Kies jaar",
diff --git a/frontend/src/components/courses/CourseDetailCard.vue b/frontend/src/components/courses/CourseDetailCard.vue
index fae89e68..f19cd6cc 100644
--- a/frontend/src/components/courses/CourseDetailCard.vue
+++ b/frontend/src/components/courses/CourseDetailCard.vue
@@ -36,9 +36,11 @@ const { getRandomImport } = useGlob(import.meta.glob('@/assets/img/placeholders/
             {{ course.getExcerpt() }}
         </template>
         <template #footer>
-            <RouterLink :to="{ name: 'course', params: { courseId: course.id } }">
-                <Button :icon="PrimeIcons.ARROW_RIGHT" :label="t('components.card.open')" icon-pos="right" outlined />
-            </RouterLink>
+            <slot :course="course" name="footer">
+                <RouterLink :to="{ name: 'course', params: { courseId: course.id } }">
+                    <Button :icon="PrimeIcons.ARROW_RIGHT" :label="t('components.card.open')" icon-pos="right" outlined />
+                </RouterLink>
+            </slot>
         </template>
     </Card>
 </template>
diff --git a/frontend/src/components/courses/CourseList.vue b/frontend/src/components/courses/CourseList.vue
index f10ff35d..ec9009a9 100644
--- a/frontend/src/components/courses/CourseList.vue
+++ b/frontend/src/components/courses/CourseList.vue
@@ -4,6 +4,8 @@ import CourseDetailCard from '@/components/courses/CourseDetailCard.vue';
 import CourseGeneralCard from '@/components/courses/CourseGeneralCard.vue';
 import { type Course } from '@/types/Course.ts';
 import { useI18n } from 'vue-i18n';
+import { PrimeIcons } from 'primevue/api';
+import Button from 'primevue/button';
 
 /* Props */
 interface Props {
@@ -25,13 +27,16 @@ const { t } = useI18n();
     <div class="grid align-items-stretch">
         <template v-if="courses !== null">
             <template v-if="courses.length > 0">
-                <div
-                    class="col-12 lg:col-6"
-                    :class="'xl:col-' + 12 / cols"
-                    v-for="course in courses"
-                    :key="course.id"
-                >
-                    <CourseDetailCard :course="course" v-if="detail" />
+                <div class="col-12 md:col-6" :class="'xl:col-' + 12 / cols" v-for="course in courses" :key="course.id">
+                    <CourseDetailCard :course="course" v-if="detail">
+                        <template #footer="{ course }">
+                            <slot name="footer" :course="course">
+                                <RouterLink :to="{ name: 'course', params: { courseId: course.id } }">
+                                    <Button :icon="PrimeIcons.ARROW_RIGHT" :label="t('components.card.open')" icon-pos="right" outlined />
+                                </RouterLink>
+                            </slot>
+                        </template>
+                    </CourseDetailCard>
                     <CourseGeneralCard class="h-full" :course="course" v-else />
                 </div>
             </template>
diff --git a/frontend/src/components/layout/BaseLayout.vue b/frontend/src/components/layout/BaseLayout.vue
index 27f27830..c15fcf32 100644
--- a/frontend/src/components/layout/BaseLayout.vue
+++ b/frontend/src/components/layout/BaseLayout.vue
@@ -5,7 +5,7 @@ import Footer from '@/components/layout/Footer.vue';
 </script>
 
 <template>
-    <div id="layout" class="w-12 lg:w-11 xl:w-9 mx-auto">
+    <div id="layout" class="w-12 lg:w-11 xl:w-9 mx-auto h-100">
         <Header />
 
         <Body id="body">
@@ -19,6 +19,7 @@ import Footer from '@/components/layout/Footer.vue';
 <style scoped>
 #layout {
     max-width: 1460px;
+    height: 100vh;
 
     #body {
         min-height: calc(100vh - (180px + 175px));
diff --git a/frontend/src/components/layout/Footer.vue b/frontend/src/components/layout/Footer.vue
index 3ac8e1bc..d229e1ed 100644
--- a/frontend/src/components/layout/Footer.vue
+++ b/frontend/src/components/layout/Footer.vue
@@ -11,7 +11,7 @@ const logo: Record<string, string> = { nl, en };
 </script>
 
 <template>
-    <div id="footer" class="p-4 py-3">
+    <div id="footer" class="p-4 py-3 mt-auto">
         <div class="w-full lg:w-2 flex align-items-center py-3">
             <img class="w-full max-w-9rem" :src="logo[locale]" :alt="t('layout.header.logo')" />
         </div>
diff --git a/frontend/src/components/layout/Header.vue b/frontend/src/components/layout/Header.vue
index 19d89972..973e5261 100644
--- a/frontend/src/components/layout/Header.vue
+++ b/frontend/src/components/layout/Header.vue
@@ -54,7 +54,7 @@ const items = computed(() => [
 <template>
     <div class="flex w-full">
         <!-- Logo -->
-        <div class="lg:w-2 lg:pl-0 flex align-items-center p-3 ">
+        <div class="lg:w-2 lg:pl-0 flex align-items-center p-3">
             <RouterLink :to="'/'">
                 <img class="w-full max-w-9rem" :src="logo" :alt="t('layout.header.logo')" />
             </RouterLink>
@@ -124,20 +124,30 @@ const items = computed(() => [
                 <div class="flex flex-column h-full">
                     <div class="flex align-items-center justify-content-between p-4 pb-2 flex-shrink-0">
                         <span class="inline-flex align-items-center gap-2">
-                            <img :alt="t('layout.header.logo')" :src="tiny" class="w-2rem mr-2"/> <span class="font-bold text-2xl text-primary">Ypovoli</span>
+                            <img :alt="t('layout.header.logo')" :src="tiny" class="w-2rem mr-2" />
+                            <span class="font-bold text-2xl text-primary">Ypovoli</span>
                         </span>
                         <span>
-                            <Button type="button" @click="closeCallback" icon="pi pi-times" rounded outlined class="h-2rem w-2rem"/>
+                            <Button
+                                type="button"
+                                @click="closeCallback"
+                                icon="pi pi-times"
+                                rounded
+                                outlined
+                                class="h-2rem w-2rem"
+                            />
                         </span>
                     </div>
                     <div class="overflow-y-auto px-2">
                         <ul class="list-none p-0 m-0">
-                            <li v-for="item in items">
-                                <RouterLink :to="{name: item.route}"
-                                            @click="closeCallback"
-                                            class="flex align-items-center cursor-pointer p-3 text-black-alpha-90 border-bottom-1 border-300"
-                                            v-ripple>
-                                    <i class="mr-2" :class="'pi pi-' + item.icon"/>
+                            <li v-for="item in items" :key="item.route">
+                                <RouterLink
+                                    :to="{ name: item.route }"
+                                    @click="closeCallback"
+                                    class="flex align-items-center cursor-pointer p-3 text-black-alpha-90 border-bottom-1 border-300"
+                                    v-ripple
+                                >
+                                    <i class="mr-2" :class="'pi pi-' + item.icon" />
                                     <span class="font-medium">{{ item.label }}</span>
                                 </RouterLink>
                             </li>
diff --git a/frontend/src/components/projects/ProjectCreateButton.vue b/frontend/src/components/projects/ProjectCreateButton.vue
index f1597ba8..3d684175 100644
--- a/frontend/src/components/projects/ProjectCreateButton.vue
+++ b/frontend/src/components/projects/ProjectCreateButton.vue
@@ -1,27 +1,20 @@
 <script setup lang="ts">
+import Dialog from 'primevue/dialog';
+import Button from 'primevue/button';
 import { useI18n } from 'vue-i18n';
 import { type Course } from '@/types/Course.ts';
 import { PrimeIcons } from 'primevue/api';
-import Dialog from 'primevue/dialog';
-import Button from 'primevue/button';
-import { useRouter } from 'vue-router';
 import { ref } from 'vue';
+import CourseList from '@/components/courses/CourseList.vue';
 
 /* Composable injections */
 const { t } = useI18n();
-const { push } = useRouter();
 
 /* Props */
-const props = defineProps<{ courses: Course[], label?: string, severity?: string }>();
+const props = defineProps<{ courses: Course[]; label?: string; severity?: string }>();
 
 /* Dialog state to select the course you want to create a project for */
 const displayCourseSelection = ref(false);
-
-/* Method to route to the project creation view */
-const createProjectForCourse = (courseId: string): void => {
-    push({ name: 'project-create', params: { courseId } });
-    displayCourseSelection.value = false;
-};
 </script>
 
 <template>
@@ -39,38 +32,28 @@ const createProjectForCourse = (courseId: string): void => {
         <!-- Dialog to select the course you want to create a project for -->
         <Dialog
             v-model:visible="displayCourseSelection"
-            modal
+            class="m-3"
             :draggable="false"
-            :contentStyle="{ width: '50vw' }"
-            :header="t('views.dashboard.select_course')"
-        >
-            <!-- List of courses to select from-->
-            <div v-if="props.courses && props.courses.length > 0">
-                <div
-                    v-for="course in props.courses"
-                    :key="course.id"
-                    class="course-item"
-                    @click="createProjectForCourse(course.id)"
-                >
-                    <span class="course-name">{{ course.name }}</span>
-                </div>
-            </div>
+            :contentStyle="{ 'min-width': '50vw' }"
+            modal>
+            <template #header>
+                <h2 class="my-3 text-primary">
+                    {{ t('views.dashboard.select_course') }}
+                </h2>
+            </template>
+            <template #default>
+                <!-- List of courses to select from-->
+                <CourseList :cols="3" :courses="props.courses">
+                    <template #footer="{ course }">
+                        <RouterLink :to="{ name: 'project-create', params: { courseId: course.id } }">
+                            <Button :icon="PrimeIcons.PLUS" :label="t('components.card.newProject')" icon-pos="right" outlined />
+                        </RouterLink>
+                    </template>
+                </CourseList>
+            </template>
         </Dialog>
     </div>
 </template>
 
 <style scoped lang="scss">
-.course-item {
-    cursor: pointer;
-    padding: 8px;
-    border-radius: 4px;
-    margin-bottom: 8px;
-    transition: background-color 0.3s;
-}
-.course-item:hover {
-    background-color: #f0f0f0;
-}
-.course-name {
-    font-weight: bold;
-}
 </style>
diff --git a/frontend/src/components/projects/ProjectList.vue b/frontend/src/components/projects/ProjectList.vue
index 4fdf4a24..68cfd2f2 100644
--- a/frontend/src/components/projects/ProjectList.vue
+++ b/frontend/src/components/projects/ProjectList.vue
@@ -82,7 +82,7 @@ watch(
         <template v-if="sortedProjects !== null">
             <template v-if="sortedProjects.length > 0">
                 <div
-                    class="col-12 md:col-6 lg:col-4"
+                    class="col-12 md:col-6"
                     :class="'xl:col-' + 12 / cols"
                     v-for="project in sortedProjects"
                     :key="project.id"
diff --git a/frontend/src/composables/services/students.service.ts b/frontend/src/composables/services/students.service.ts
index ddd296cb..9d7f6579 100644
--- a/frontend/src/composables/services/students.service.ts
+++ b/frontend/src/composables/services/students.service.ts
@@ -80,9 +80,8 @@ export function useStudents(): StudentsState {
         await create<Student>(
             endpoint,
             {
-                email: studentData.email,
-                first_name: studentData.first_name,
-                last_name: studentData.last_name,
+                user: studentData.id,
+                student_id: studentData.studentId
             },
             student,
             Student.fromJSON,
diff --git a/frontend/src/composables/services/teachers.service.ts b/frontend/src/composables/services/teachers.service.ts
index 474b9ec6..9f4b4740 100644
--- a/frontend/src/composables/services/teachers.service.ts
+++ b/frontend/src/composables/services/teachers.service.ts
@@ -5,6 +5,7 @@ import { type Ref, ref } from 'vue';
 import { endpoints } from '@/config/endpoints.ts';
 import { get, getList, create, deleteId, deleteIdWithData } from '@/composables/services/helpers.ts';
 import { useCourses } from '@/composables/services/courses.service.ts';
+import { User } from '@/types/users/User.ts';
 
 interface TeacherState {
     teachers: Ref<Teacher[] | null>;
@@ -57,14 +58,12 @@ export function useTeacher(): TeacherState {
         await deleteIdWithData<Response>(endpoint, { teacherId }, response, Response.fromJSON);
     }
 
-    async function createTeacher(teacherData: Teacher): Promise<void> {
+    async function createTeacher(user: User): Promise<void> {
         const endpoint = endpoints.teachers.index;
         await create<Teacher>(
             endpoint,
             {
-                email: teacherData.email,
-                first_name: teacherData.first_name,
-                last_name: teacherData.last_name,
+                user: user.id
             },
             teacher,
             Teacher.fromJSON,
diff --git a/frontend/src/main.scss b/frontend/src/main.scss
index 599ef42d..63093b0a 100644
--- a/frontend/src/main.scss
+++ b/frontend/src/main.scss
@@ -10,6 +10,11 @@ body {
     padding: 0;
     overflow-x: hidden;
     line-height: 1.6rem;
+    min-height: 100vh;
+
+    #app {
+        min-height: 100vh;
+    }
 
     * {
         box-sizing: border-box;
diff --git a/frontend/src/views/authentication/LoginView.vue b/frontend/src/views/authentication/LoginView.vue
index f316e3b1..c068dd43 100644
--- a/frontend/src/views/authentication/LoginView.vue
+++ b/frontend/src/views/authentication/LoginView.vue
@@ -12,39 +12,42 @@ const { t } = useI18n();
 
 <template>
     <BaseLayout>
-        <div class="flex w-12 lg:w-10 mx-auto mb-8">
-            <div class="w-5 bg-primary text-white p-5">
-                <Title color="contrast">
-                    {{ t('views.login.title') }}
-                </Title>
-                <div class="mb-4 mt-3">
-                    {{ t('views.login.subtitle') }}
+        <div class="flex pb-7 h-full">
+            <div class="flex flex-column md:flex-row align-self-center w-12 lg:w-10 mx-auto">
+                <div class="w-12 md:w-5 bg-primary text-white p-5">
+                    <Title color="contrast">
+                        {{ t('views.login.title') }}
+                    </Title>
+                    <div class="mb-4 mt-3">
+                        {{ t('views.login.subtitle') }}
+                    </div>
+                    <a :href="endpoints.auth.login">
+                        <Button
+                            icon-pos="right"
+                            :icon="PrimeIcons.ARROW_RIGHT"
+                            :label="t('views.login.button')"
+                            severity="secondary"
+                        />
+                    </a>
                 </div>
-                <a :href="endpoints.auth.login">
-                    <Button
-                        icon-pos="right"
-                        :icon="PrimeIcons.ARROW_RIGHT"
-                        :label="t('views.login.button')"
-                        severity="secondary"
-                    />
-                </a>
-            </div>
-            <div class="w-7 relative surface-100 p-4">
-                <img :src="Illustration" :alt="t('views.login.illustration')" class="w-15rem" />
-                <div
-                    class="absolute bottom-0 right-0 bg-primary text-white p-4 w-20rem"
-                    style="transform: translateY(50%)"
-                >
-                    <h1 class="mt-0">
-                        {{ t('views.login.card.title') }}
-                    </h1>
-                    <span>
+                <div class="w-12 md:w-7 flex flex-column md:flex-row align-items-center md:align-items-end justify-content-between relative surface-100">
+                    <img :src="Illustration" :alt="t('views.login.illustration')" class="w-10rem md:w-15rem m-4 ml-7" />
+                    <div
+                        class="bg-primary text-white p-4 w-full md:w-20rem"
+                    >
+                        <h1 class="mt-0">
+                            {{ t('views.login.card.title') }}
+                        </h1>
+                        <span>
                         {{ t('views.login.card.subtitle') }}
                     </span>
+                    </div>
                 </div>
             </div>
         </div>
     </BaseLayout>
 </template>
 
-<style scoped lang="scss"></style>
+<style lang="scss">
+
+</style>
diff --git a/frontend/src/views/calendar/CalendarView.vue b/frontend/src/views/calendar/CalendarView.vue
index a2d823ab..c7eefea0 100644
--- a/frontend/src/views/calendar/CalendarView.vue
+++ b/frontend/src/views/calendar/CalendarView.vue
@@ -3,6 +3,8 @@ import moment from 'moment';
 import BaseLayout from '@/components/layout/BaseLayout.vue';
 import Calendar, { type CalendarDateSlotOptions } from 'primevue/calendar';
 import Title from '@/components/layout/Title.vue';
+import ProjectCreateButton from '@/components/projects/ProjectCreateButton.vue';
+import Skeleton from 'primevue/skeleton';
 import { useProject } from '@/composables/services/project.service';
 import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
@@ -11,7 +13,6 @@ import { storeToRefs } from 'pinia';
 import { type Project } from '@/types/Projects.ts';
 import { type RoleUser } from '@/types/users/Generics.ts';
 import { useRoute, useRouter } from 'vue-router';
-import ProjectCreateButton from '@/components/projects/ProjectCreateButton.vue';
 
 /* Composable injections */
 const { t, locale } = useI18n();
@@ -19,7 +20,7 @@ const { query } = useRoute();
 const { push } = useRouter();
 
 /* Component state */
-const allProjects = ref<Project[]>([]);
+const allProjects = ref<Project[]|null>(null);
 const selectedDate = ref<Date>(getQueryDate());
 
 /* Service injection */
@@ -36,7 +37,7 @@ const formattedDate = computed(() => {
 const projectsWithDeadline = computed(() => {
     return allProjects.value?.filter((project) => {
         return moment(project.deadline).isSame(moment(selectedDate.value), 'day');
-    });
+    }) ?? null;
 });
 
 /* Courses that take place on the selected date in the calendar => no display when the date is in the past */
@@ -56,10 +57,12 @@ const coursesWithProjectCreationPossibility = computed(() => {
 async function loadProjects(): Promise<void> {
     if (user.value !== null) {
         // Clear the old data, so that the data from another role is not displayed
-        allProjects.value = [];
+        allProjects.value = null;
 
         // Load the projects of the courses
         if (user.value.isSpecificRole()) {
+            let _allProjects: Project[] = [];
+
             // Cast the generic user to a specific role
             const role = user.value as RoleUser;
 
@@ -72,8 +75,10 @@ async function loadProjects(): Promise<void> {
                 });
 
                 // Concatenate the projects
-                allProjects.value = allProjects.value.concat(projects.value ?? []);
+                _allProjects = _allProjects.concat(projects.value ?? []);
             }
+
+            allProjects.value = _allProjects;
         }
     }
 }
@@ -177,50 +182,57 @@ watch(selectedDate, (date) => {
             <div class="col-12 md:col-6">
                 <div class="surface-100 p-6">
                     <!-- Selected date on the calendar -->
-                    <Title class="mb-6 font-extrabold">{{ formattedDate }}</Title>
+                    <Title class="mb-6 font-extrabold">
+                        {{ formattedDate }}
+                    </Title>
 
                     <!-- Listing projects with given deadline -->
                     <div class="flex flex-column gap-4">
-                        <template v-if="projectsWithDeadline.length > 0">
-                            <!-- Project cards -->
-                            <div class="flex border-round-md" v-for="project in projectsWithDeadline" :key="project.id">
-                                <!-- Icon -->
-                                <div
-                                    class="bg-primary flex justify-content-center align-items-center p-4 w-3 w-7rem h-7rem"
-                                >
-                                    <span class="pi pi-book text-6xl" />
-                                </div>
-                                <!-- Details -->
-                                <div
-                                    class="flex flex-column gap-3 justify-content-center bg-white text-black-alpha-80 p-3 w-9"
-                                >
-                                    <RouterLink
-                                        :to="{
+                        <template v-if="projectsWithDeadline !== null">
+                            <template v-if="projectsWithDeadline.length > 0">
+                                <!-- Project cards -->
+                                <div class="flex flex-column xl:flex-row border-round-md" v-for="project in projectsWithDeadline" :key="project.id">
+                                    <!-- Icon -->
+                                    <div
+                                        class="bg-primary flex justify-content-center align-items-center p-4 xl:w-7rem xl:h-7rem"
+                                    >
+                                        <span class="pi pi-book text-6xl" />
+                                    </div>
+                                    <!-- Details -->
+                                    <div
+                                        class="flex flex-column gap-3 justify-content-center bg-white text-black-alpha-80 p-3 w-full"
+                                    >
+                                        <RouterLink
+                                            :to="{
                                             name: 'course-project',
                                             params: {
                                                 courseId: project.course?.id,
                                                 projectId: project.id,
                                             },
                                         }"
-                                    >
-                                        <h3 class="flex gap-3 align-items-center text-primary m-0 text-xl">
-                                            {{ project.name }} <span class="pi pi-arrow-right text-xl" />
-                                        </h3>
-                                    </RouterLink>
-                                    <p class="font-bold m-0">
-                                        {{ project.course?.name }}
-                                    </p>
+                                        >
+                                            <h3 class="flex gap-3 align-items-center text-primary m-0 text-xl">
+                                                {{ project.name }} <span class="pi pi-arrow-right text-xl" />
+                                            </h3>
+                                        </RouterLink>
+                                        <p class="font-bold m-0">
+                                            {{ project.course?.name }}
+                                        </p>
+                                    </div>
                                 </div>
-                            </div>
+                            </template>
+                            <template v-else>
+                                <p class="m-0">{{ t('views.calendar.noProjects') }}</p>
+                            </template>
                         </template>
                         <template v-else>
-                            <p class="m-0">{{ t('views.calendar.noProjects') }}</p>
+                            <Skeleton height="7rem"/>
                         </template>
                     </div>
 
-                    <template v-if="user?.isTeacher() || user?.isAssistant()">
+                    <template v-if="coursesWithProjectCreationPossibility.length > 0 && user?.isTeacher() || user?.isAssistant()">
                         <!-- Add project button -->
-                        <ProjectCreateButton severity="secondary" :courses="coursesWithProjectCreationPossibility" />
+                        <ProjectCreateButton class="mt-5" :label="t('components.button.createProject')" severity="secondary" :courses="coursesWithProjectCreationPossibility" />
                     </template>
                 </div>
             </div>
diff --git a/frontend/src/views/courses/SearchCourseView.vue b/frontend/src/views/courses/SearchCourseView.vue
index 4565d5fa..a745561e 100644
--- a/frontend/src/views/courses/SearchCourseView.vue
+++ b/frontend/src/views/courses/SearchCourseView.vue
@@ -102,7 +102,7 @@ onMounted(async () => {
                     </AccordionTab>
                 </Accordion>
             </div>
-            <div class="col-12 xl:col-9">
+            <div class="col-12 xl:col-9 mt-4 xl:mt-0">
                 <Title>
                     {{ t('views.courses.search.title') }}
                 </Title>
diff --git a/frontend/src/views/dashboard/roles/StudentDashboardView.vue b/frontend/src/views/dashboard/roles/StudentDashboardView.vue
index fd4e67c4..ed91c7e8 100644
--- a/frontend/src/views/dashboard/roles/StudentDashboardView.vue
+++ b/frontend/src/views/dashboard/roles/StudentDashboardView.vue
@@ -40,7 +40,7 @@ watch(
 
 <template>
     <!-- Course heading -->
-    <div class="flex justify-content-between align-items-center mb-6">
+    <div class="flex gap-6 flex-column md:flex-row justify-content-between align-items-start md:align-items-center mb-6">
         <!-- Course list title -->
         <Title class="m-0">{{ t('views.dashboard.courses') }}</Title>
 
diff --git a/frontend/src/views/dashboard/roles/TeacherDashboardView.vue b/frontend/src/views/dashboard/roles/TeacherDashboardView.vue
index 83059a7e..b4406f65 100644
--- a/frontend/src/views/dashboard/roles/TeacherDashboardView.vue
+++ b/frontend/src/views/dashboard/roles/TeacherDashboardView.vue
@@ -44,7 +44,7 @@ watch(
 
 <template>
     <!-- Course heading -->
-    <div class="flex justify-content-between align-items-center mb-6">
+    <div class="flex gap-6 flex-column md:flex-row justify-content-between align-items-start md:align-items-center mb-6">
         <!-- Course list title -->
         <Title class="m-0">{{ t('views.dashboard.courses') }}</Title>
         <!-- Course list controls -->
@@ -66,12 +66,12 @@ watch(
     <!-- Course list body -->
     <CourseList :courses="filteredCourses" />
     <!-- Project heading -->
-    <div class="flex justify-content-between align-items-center my-6">
+    <div class="flex gap-6 flex-column md:flex-row justify-content-between align-items-start md:align-items-center mt-6 mb-5">
         <!-- Project list title -->
         <Title class="m-0">{{ t('views.dashboard.projects') }}</Title>
 
         <!-- Create project button -->
-        <ProjectCreateButton :courses="filteredCourses" :label="t('components.button.create_project')" />
+        <ProjectCreateButton :courses="filteredCourses" :label="t('components.button.createProject')" />
     </div>
     <!-- Project list body -->
     <ProjectList :courses="filteredCourses" />
diff --git a/frontend/src/views/projects/CreateProjectView.vue b/frontend/src/views/projects/CreateProjectView.vue
index 9dc09265..e3a4087a 100644
--- a/frontend/src/views/projects/CreateProjectView.vue
+++ b/frontend/src/views/projects/CreateProjectView.vue
@@ -3,19 +3,19 @@ import Calendar from 'primevue/calendar';
 import BaseLayout from '@/components/layout/BaseLayout.vue';
 import FileUpload from 'primevue/fileupload';
 import Title from '@/components/layout/Title.vue';
-import { reactive, computed } from 'vue';
-import { useRouter, useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
+import ErrorMessage from '@/components/forms/ErrorMessage.vue';
 import InputText from 'primevue/inputtext';
 import Textarea from 'primevue/textarea';
 import Button from 'primevue/button';
 import InputNumber from 'primevue/inputnumber';
 import InputSwitch from 'primevue/inputswitch';
+import { reactive, computed } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
 import { Project } from '@/types/Projects';
 import { useProject } from '@/composables/services/project.service';
 import { required, helpers } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
-import ErrorMessage from '@/components/forms/ErrorMessage.vue';
 
 /* Composable injections */
 const { t } = useI18n();
@@ -66,12 +66,15 @@ const onZipStructureUpload = (event: any): void => {
 // useVuelidate function to perform form validation
 const v$ = useVuelidate(rules, form);
 
-const submitProject = async (): Promise<void> => {
+/**
+ * Function to submit the project form.
+ */
+async function submitProject(): Promise<void> {
     // Validate the form
-    const result = await v$.value.$validate();
+    const validated = await v$.value.$validate();
 
     // Only submit the form if the validation was successful
-    if (result) {
+    if (validated) {
         // Pass the project data to the service
         await createProject(
             new Project(
@@ -92,115 +95,140 @@ const submitProject = async (): Promise<void> => {
         );
 
         // Redirect to the dashboard overview
-        push({ name: 'dashboard' });
+        await push({ name: 'dashboard' });
     }
-};
+}
 </script>
 
 <template>
     <BaseLayout>
+        <!-- Create project heading -->
+        <Title class="mb-6">
+            {{ t('views.projects.create') }}
+        </Title>
+
         <!-- Project form -->
         <form @submit.prevent="submitProject">
-            <div class="grid fadein">
-                <div class="col-12 md:col-10">
-                    <!-- Create project heading -->
-                    <Title class="mb-6">{{ t('views.projects.create') }}</Title>
-
-                    <!-- Project name -->
-                    <div class="mb-4">
-                        <label for="projectName">{{ t('views.projects.name') }}</label>
-                        <InputText id="projectName" v-model="form.name" />
-                        <ErrorMessage :field="v$.name" />
-                    </div>
-
-                    <!-- Project description -->
-                    <div class="mb-4">
-                        <label for="projectDescription">{{ t('views.projects.description') }}</label>
-                        <Textarea id="projectDescription" v-model="form.description" autoResize rows="5" cols="30" />
-                    </div>
-
-                    <!-- Start date of the project -->
-                    <div class="mb-4">
-                        <label for="projectStartDate">{{ t('views.projects.start_date') }}</label>
-                        <Calendar
-                            id="projectStartDate"
-                            v-model="form.startDate"
-                            dateFormat="dd-mm-yy"
-                            :min-date="new Date()"
-                            showIcon
-                        />
-                        <ErrorMessage :field="v$.startDate" />
+            <div class="grid">
+                <div class="col-12 lg:col-6">
+                    <div class="grid formgrid">
+                        <!-- Project name -->
+                        <div class="field col-12">
+                            <label for="projectName">
+                                {{ t('views.projects.name') }}
+                            </label>
+                            <InputText id="projectName" class="w-full" v-model="form.name" />
+                            <ErrorMessage :field="v$.name" />
+                        </div>
                     </div>
 
-                    <!-- Deadline of the project -->
-                    <div class="mb-4">
-                        <label for="projectDeadline">{{ t('views.projects.deadline') }}</label>
-                        <Calendar
-                            id="projectDeadline"
-                            v-model="form.deadline"
-                            dateFormat="dd-mm-yy"
-                            :min-date="form.startDate"
-                            showTime
-                            hourFormat="24"
-                            showIcon
-                        />
-                        <ErrorMessage :field="v$.deadline" />
+                    <div class="grid">
+                        <!-- Project description -->
+                        <div class="field col">
+                            <label for="projectDescription">
+                                {{ t('views.projects.description') }}
+                            </label>
+                            <Textarea id="projectDescription" class="w-full" v-model="form.description" autoResize rows="5" cols="30" />
+                        </div>
                     </div>
 
-                    <!-- Group size for the project -->
-                    <div class="mb-4">
-                        <label for="groupSize">{{ t('views.projects.group_size') }}</label>
-                        <InputNumber id="groupSize" v-model="form.groupSize" :min="1" />
-                        <ErrorMessage :field="v$.groupSize" />
+                    <div class="grid">
+                        <!-- Start date of the project -->
+                        <div class="field col">
+                            <label for="projectStartDate">{{ t('views.projects.start_date') }}</label>
+                            <Calendar
+                                id="projectStartDate"
+                                class="w-full"
+                                v-model="form.startDate"
+                                dateFormat="dd-mm-yy"
+                                :min-date="new Date()"
+                                showIcon
+                            />
+                            <ErrorMessage :field="v$.startDate" />
+                        </div>
+
+                        <!-- Deadline of the project -->
+                        <div class="field col">
+                            <label for="projectDeadline">{{ t('views.projects.deadline') }}</label>
+                            <Calendar
+                                id="projectDeadline"
+                                class="w-full"
+                                v-model="form.deadline"
+                                dateFormat="dd-mm-yy"
+                                :min-date="form.startDate"
+                                showTime
+                                hourFormat="24"
+                                showIcon
+                            />
+                            <ErrorMessage :field="v$.deadline" />
+                        </div>
                     </div>
 
-                    <!-- Max score for the project -->
-                    <div class="mb-4">
-                        <label for="maxScore">{{ t('views.projects.max_score') }}</label>
-                        <InputNumber id="maxScore" v-model="form.maxScore" :min="1" />
-                        <ErrorMessage :field="v$.maxScore" />
+                    <div class="grid align-items-end">
+                        <!-- Group size for the project -->
+                        <div class="field col">
+                            <label for="groupSize">
+                                {{ t('views.projects.group_size') }}
+                            </label>
+                            <InputNumber id="groupSize" class="w-full" v-model="form.groupSize" :min="1" />
+                            <ErrorMessage :field="v$.groupSize" />
+                        </div>
+
+                        <!-- Max score for the project -->
+                        <div class="field col">
+                            <label for="maxScore">{{ t('views.projects.max_score') }}</label>
+                            <InputNumber id="maxScore" class="w-full" v-model="form.maxScore" :min="1" />
+                            <ErrorMessage :field="v$.maxScore" />
+                        </div>
                     </div>
 
                     <!-- Visibility of the project -->
-                    <div class="mb-4">
-                        <label for="visibility">{{ t('views.projects.visibility') }}</label>
-                        <InputSwitch id="visibility" v-model="form.visibility" />
+                    <div class="grid">
+                        <div class="flex align-items-center field-checkbox col-12">
+                            <InputSwitch id="visibility" v-model="form.visibility" />
+                            <label for="visibility">{{ t('views.projects.visibility') }}</label>
+                        </div>
                     </div>
 
                     <!-- Score visibility of the project -->
-                    <div class="mb-4">
-                        <label for="scoreVisibility">{{ t('views.projects.score_visibility') }}</label>
-                        <InputSwitch id="scoreVisibility" v-model="form.scoreVisibility" />
+                    <div class="grid">
+                        <div class="flex align-items-center field-checkbox col-12">
+                            <InputSwitch id="scoreVisibility" v-model="form.scoreVisibility" />
+                            <label for="scoreVisibility">{{ t('views.projects.score_visibility') }}</label>
+                        </div>
                     </div>
 
                     <!-- Submit button -->
-                    <div class="flex justify-end">
-                        <Button
-                            :label="t('views.projects.create')"
-                            type="submit"
-                            icon="pi pi-check"
-                            iconPos="right"
-                            rounded
-                        />
-                    </div>
+                    <Button
+                        :label="t('views.projects.create')"
+                        type="submit"
+                        icon="pi pi-check"
+                        iconPos="right"
+                        rounded
+                    />
                 </div>
 
-                <div class="col-12 md:col-10">
+                <div class="col-12 lg:col-6">
                     <!-- Upload field for docker script -->
-                    <div class="mt-7 mb-4">
-                        <label for="dockerScript">{{ t('views.projects.docker_upload') }}</label>
+                    <div class="field col">
+                        <label for="dockerScript">
+                            {{ t('views.projects.docker_upload') }}
+                        </label>
                         <FileUpload
-                            id="dockerScript"
+                            input="dockerScript"
                             mode="basic"
                             accept=".sh"
                             :multiple="false"
+                            title="hellaur"
                             @select="onDockerScriptUpload"
                         />
                     </div>
 
                     <!-- Upload field for a zip file that contains the submission structure -->
-                    <div class="mb-4">
-                        <label for="submissionStructure">{{ t('views.projects.submission_structure') }}</label>
+                    <div class="field col">
+                        <label for="submissionStructure">
+                            {{ t('views.projects.submission_structure') }}
+                        </label>
                         <FileUpload
                             id="submissionStructure"
                             mode="basic"
@@ -216,20 +244,4 @@ const submitProject = async (): Promise<void> => {
 </template>
 
 <style scoped>
-/* Flex column layout for label and input */
-.mb-4 {
-    display: flex;
-    flex-direction: column;
-}
-
-/* Add margin between label and input */
-label {
-    margin-bottom: 0.5rem;
-}
-
-.grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 1rem;
-}
 </style>
diff --git a/frontend/src/views/projects/ProjectView.vue b/frontend/src/views/projects/ProjectView.vue
index cd0f505d..76ed46a0 100644
--- a/frontend/src/views/projects/ProjectView.vue
+++ b/frontend/src/views/projects/ProjectView.vue
@@ -33,7 +33,7 @@ const filteredCourses = computed(
 <template>
     <BaseLayout>
         <!-- Project heading -->
-        <div class="flex justify-content-between align-items-center mb-6">
+        <div class="flex gap-6 flex-column md:flex-row justify-content-between align-items-start md:align-items-center mb-5">
             <!-- Project list title -->
             <Title class="m-0">{{ t('views.dashboard.projects') }}</Title>
             <YearSelector :years="allYears" v-model="selectedYear" v-if="user" />