diff --git a/backend/api/management/commands/make_teacher.py b/backend/api/management/commands/make_teacher.py
index a44d7e58..90502d63 100644
--- a/backend/api/management/commands/make_teacher.py
+++ b/backend/api/management/commands/make_teacher.py
@@ -19,6 +19,6 @@ def handle(self, *args, **options):
             return
 
         user = user.get()
-        Teacher(user_ptr=user).save_base(raw=True)
+        Teacher.create(user)
 
         self.stdout.write(self.style.SUCCESS('Successfully made the user teacher!'))
diff --git a/frontend/src/assets/img/logo-tiny.png b/frontend/src/assets/img/logo-tiny.png
new file mode 100644
index 00000000..a2bd9887
Binary files /dev/null and b/frontend/src/assets/img/logo-tiny.png differ
diff --git a/frontend/src/assets/lang/nl.json b/frontend/src/assets/lang/nl.json
index 2556ed9e..d2b514a1 100644
--- a/frontend/src/assets/lang/nl.json
+++ b/frontend/src/assets/lang/nl.json
@@ -101,11 +101,13 @@
         }
     },
     "components": {
-        "buttons": {
-            "academic_year": "Academiejaar {0}"
+        "button": {
+            "academic_year": "Academiejaar {0}",
+            "createProject": "Maak een nieuw project"
         },
         "card": {
-            "open": "Details"
+            "open": "Details",
+            "newProject": "Nieuw Project"
         },
         "submission" : "Indienen"
     },
@@ -147,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..24377d9a 100644
--- a/frontend/src/components/courses/CourseDetailCard.vue
+++ b/frontend/src/components/courses/CourseDetailCard.vue
@@ -36,9 +36,16 @@ 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 5cc39c62..b233528d 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,21 @@ const { t } = useI18n();
     <div class="grid align-items-stretch">
         <template v-if="courses !== null">
             <template v-if="courses.length > 0">
-                <div
-                    class="col-12 md:col-6 lg:col-4"
-                    :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 deac8a68..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-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 47d0682e..973e5261 100644
--- a/frontend/src/components/layout/Header.vue
+++ b/frontend/src/components/layout/Header.vue
@@ -1,19 +1,23 @@
 <script setup lang="ts">
 import en from '@/assets/img/logo-en.png';
 import nl from '@/assets/img/logo-nl.png';
+import tiny from '@/assets/img/logo-tiny.png';
 import Button from 'primevue/button';
 import LanguageSelector from '@/components/LanguageSelector.vue';
+import RoleSelector from '@/components/RoleSelector.vue';
+import Sidebar from 'primevue/sidebar';
 import { useI18n } from 'vue-i18n';
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { useAuthStore } from '@/store/authentication.store.ts';
 import { storeToRefs } from 'pinia';
-import RoleSelector from '@/components/RoleSelector.vue';
 
 /* Composables */
 const { user, isAuthenticated } = storeToRefs(useAuthStore());
 const { t, locale } = useI18n();
 
-/* Localization variables */
+/* State */
+const showSidebar = ref(false);
+
 const logo = computed(() => {
     if (locale.value === 'nl') {
         return nl;
@@ -49,14 +53,21 @@ const items = computed(() => [
 
 <template>
     <div class="flex w-full">
-        <div class="w-full lg:w-2 flex align-items-center p-3 lg:pl-0">
-            <img class="w-full max-w-9rem" :src="logo" :alt="t('layout.header.logo')" />
+        <!-- Logo -->
+        <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>
         </div>
+        <!-- Content -->
         <div class="flex flex-column w-full lg:w-10">
+            <!-- Header -->
             <div id="header" class="w-full flex text-white p-4">
-                <div class="flex align-items-end">
+                <!-- Title -->
+                <div class="hidden md:flex align-items-end">
                     <h1 class="text-white m-0">Ypovoli</h1>
                 </div>
+                <!-- User information -->
                 <div class="text-right ml-auto text-sm flex flex-column align-items-end gap-3">
                     <div class="flex align-items-center gap-3">
                         <template v-if="user !== null && user.hasMultipleRoles()">
@@ -65,12 +76,19 @@ const items = computed(() => [
                         </template>
                         <!-- Language selector -->
                         <LanguageSelector />
+                        <!-- Menu selector -->
+                        <span @click="showSidebar = !showSidebar" class="md:hidden pi pi-bars cursor-pointer" />
                     </div>
                     <div>
                         <!-- User information -->
                         <template v-if="user !== null">
                             <RouterLink :to="{ name: 'logout' }" class="text-white">
-                                {{ t('layout.header.user', [user.getFullName()]) }}
+                                <span class="hidden md:inline">
+                                    {{ t('layout.header.user', [user.getFullName()]) }}
+                                </span>
+                                <span class="inline md:hidden">
+                                    {{ user.getFullName() }}
+                                </span>
                             </RouterLink>
                         </template>
                         <!-- Login button -->
@@ -88,7 +106,7 @@ const items = computed(() => [
                 </div>
             </div>
             <!-- Navigation -->
-            <div id="navigation" class="w-full h-full flex">
+            <div id="navigation" class="hidden md:flex w-full h-full">
                 <template v-if="isAuthenticated">
                     <RouterLink :to="{ name: item.route }" v-for="item in items" :key="item.route" class="nav-item">
                         <div
@@ -101,6 +119,43 @@ const items = computed(() => [
                 </template>
             </div>
         </div>
+        <Sidebar v-model:visible="showSidebar">
+            <template #container="{ closeCallback }">
+                <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>
+                        </span>
+                        <span>
+                            <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" :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>
+                        </ul>
+                    </div>
+                </div>
+            </template>
+        </Sidebar>
     </div>
 </template>
 
diff --git a/frontend/src/components/projects/ProjectCard.vue b/frontend/src/components/projects/ProjectCard.vue
index d462a283..f2832c15 100644
--- a/frontend/src/components/projects/ProjectCard.vue
+++ b/frontend/src/components/projects/ProjectCard.vue
@@ -52,7 +52,7 @@ const { t } = useI18n();
         <template #footer>
             <RouterLink
                 :to="{
-                    name: 'courseProject',
+                    name: 'course-project',
                     params: {
                         courseId: course.id,
                         projectId: project.id,
diff --git a/frontend/src/components/projects/ProjectCreateButton.vue b/frontend/src/components/projects/ProjectCreateButton.vue
index 164e5fba..44597f2f 100644
--- a/frontend/src/components/projects/ProjectCreateButton.vue
+++ b/frontend/src/components/projects/ProjectCreateButton.vue
@@ -1,72 +1,64 @@
 <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[] }>();
+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>
-    <!-- Button to create a new project -->
-    <Button
-        v-if="props.courses && props.courses.length > 0"
-        :icon="PrimeIcons.PLUS"
-        icon-pos="right"
-        class="custom-button"
-        @click="displayCourseSelection = true"
-    />
-    <!-- Dialog to select the course you want to create a project for -->
-    <Dialog
-        v-model:visible="displayCourseSelection"
-        modal
-        :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>
-    </Dialog>
+    <div>
+        <!-- Button to create a new project -->
+        <Button
+            v-if="props.courses && props.courses.length > 0"
+            :icon="PrimeIcons.PLUS"
+            icon-pos="right"
+            :label="label ?? ''"
+            :severity="severity ?? 'primary'"
+            class="custom-button"
+            @click="displayCourseSelection = true"
+        />
+        <!-- Dialog to select the course you want to create a project for -->
+        <Dialog
+            v-model:visible="displayCourseSelection"
+            class="m-3"
+            :draggable="false"
+            :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>
+<style scoped lang="scss"></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/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/router/router.ts b/frontend/src/router/router.ts
index deda535e..8c5aea6e 100644
--- a/frontend/src/router/router.ts
+++ b/frontend/src/router/router.ts
@@ -49,15 +49,15 @@ const routes: RouteRecordRaw[] = [
                     { path: 'edit', component: UpdateCourseView, name: 'course-edit' },
                     // Projects
                     {
-                        path: 'courseProjects',
+                        path: 'projects',
                         children: [
-                            { path: '', component: Dummy, name: 'courseProjects' },
+                            { path: '', component: Dummy, name: 'course-projects' },
                             { path: 'create', component: CreateProjectView, name: 'project-create' },
                             // Single project
                             {
                                 path: ':projectId',
                                 children: [
-                                    { path: '', component: SingleProjectView, name: 'courseProject' },
+                                    { path: '', component: SingleProjectView, name: 'course-project' },
                                     { path: 'edit', component: Dummy, name: 'project-edit' },
                                     { path: 'groups', component: Dummy, name: 'project-groups' },
                                     { path: 'submit', component: Dummy, name: 'project-submit' },
diff --git a/frontend/src/views/authentication/LoginView.vue b/frontend/src/views/authentication/LoginView.vue
index f316e3b1..c6e30bf3 100644
--- a/frontend/src/views/authentication/LoginView.vue
+++ b/frontend/src/views/authentication/LoginView.vue
@@ -12,39 +12,40 @@ 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%)"
+                    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"
                 >
-                    <h1 class="mt-0">
-                        {{ t('views.login.card.title') }}
-                    </h1>
-                    <span>
-                        {{ t('views.login.card.subtitle') }}
-                    </span>
+                    <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 0392bc33..b7933afe 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 */
@@ -34,9 +35,11 @@ const formattedDate = computed(() => {
 
 /* Filter the projects on the date selected on the calendar */
 const projectsWithDeadline = computed(() => {
-    return allProjects.value?.filter((project) => {
-        return moment(project.deadline).isSame(moment(selectedDate.value), 'day');
-    });
+    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 +59,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 +77,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 +184,71 @@ 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 -->
+                        <template v-if="projectsWithDeadline !== null">
+                            <template v-if="projectsWithDeadline.length > 0">
+                                <!-- Project cards -->
                                 <div
-                                    class="flex flex-column gap-3 justify-content-center bg-white text-black-alpha-80 p-3 w-9"
+                                    class="flex flex-column xl:flex-row border-round-md"
+                                    v-for="project in projectsWithDeadline"
+                                    :key="project.id"
                                 >
-                                    <RouterLink
-                                        :to="{
-                                            name: 'courseProject',
-                                            params: {
-                                                courseId: project.course?.id,
-                                                projectId: 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"
                                     >
-                                        <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>
+                                        <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>
+                                    </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 :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..77e10ef0 100644
--- a/frontend/src/views/dashboard/roles/StudentDashboardView.vue
+++ b/frontend/src/views/dashboard/roles/StudentDashboardView.vue
@@ -40,7 +40,9 @@ 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 aaa02c18..ef6edf5f 100644
--- a/frontend/src/views/dashboard/roles/TeacherDashboardView.vue
+++ b/frontend/src/views/dashboard/roles/TeacherDashboardView.vue
@@ -44,7 +44,9 @@ 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 +68,14 @@ 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" />
+        <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..71327383 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,147 @@ 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"
@@ -215,21 +250,4 @@ const submitProject = async (): Promise<void> => {
     </BaseLayout>
 </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>
+<style scoped></style>
diff --git a/frontend/src/views/projects/ProjectView.vue b/frontend/src/views/projects/ProjectView.vue
index cd0f505d..6e7ee7cc 100644
--- a/frontend/src/views/projects/ProjectView.vue
+++ b/frontend/src/views/projects/ProjectView.vue
@@ -33,7 +33,9 @@ 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" />