diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index ce658910..6e1511c1 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -19,6 +19,8 @@ import NavBar from "@/components/navigation/NavBar.vue";
 import { computed, onBeforeMount, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { useLocale } from "@/stores/locale-store";
+import { useThemeStore } from "@/stores/theme-store";
+import { useTheme } from "vuetify";
 
 const navBar = ref<InstanceType<typeof NavBar> | null>(null);
 
@@ -28,6 +30,15 @@ const hideHeader = computed(() => currentRoute.meta.hideHeader);
 onBeforeMount(() => {
     const { locale } = useI18n();
     const { selectedLocale } = useLocale();
+    const { storedTheme } = useThemeStore();
+    const theme = useTheme();
     locale.value = selectedLocale;
+    theme.global.name.value = storedTheme;
 });
 </script>
+
+<style>
+.v-main {
+    background-color: rgb(var(--v-theme-background));
+}
+</style>
diff --git a/frontend/src/assets/base.scss b/frontend/src/assets/base.scss
index deace0a4..c6059b62 100644
--- a/frontend/src/assets/base.scss
+++ b/frontend/src/assets/base.scss
@@ -5,7 +5,7 @@
     --color-primary-dark: color-mod(var(--color-primary) shade(15%));
     --color-primary-bg: color-mod(var(--color-primary) alpha(30));
 
-    --color-secondary: #dfe5f7;
+    --color-secondary: #ebeffb;
 
     --color-accent: #ffd200;
     --color-accent-light: color-mod(var(--color-accent) tint(15%));
diff --git a/frontend/src/assets/ghent-university-logo-white.png b/frontend/src/assets/ghent-university-logo-white.png
new file mode 100644
index 00000000..56e2f20f
Binary files /dev/null and b/frontend/src/assets/ghent-university-logo-white.png differ
diff --git a/frontend/src/components/ApolloHeader.vue b/frontend/src/components/ApolloHeader.vue
index 35ea45d3..3882ce78 100644
--- a/frontend/src/components/ApolloHeader.vue
+++ b/frontend/src/components/ApolloHeader.vue
@@ -1,5 +1,5 @@
 <template>
-    <v-app-bar>
+    <v-app-bar class="bg-primary elevation-1">
         <v-app-bar-nav-icon variant="text" @click="emit('toggleNav')"></v-app-bar-nav-icon>
         <RouterLink to="/">
             <img alt="Logo" class="logo" src="@/assets/logo_white_transparant.png" />
@@ -10,6 +10,7 @@
         <div class="leftContent" v-else>
             <LogoutButton class="logout" v-if="isLoggedIn" />
             <LocaleSwitcher />
+            <ThemeSwitcher class="switcher" />
         </div>
     </v-app-bar>
 </template>
@@ -17,8 +18,9 @@
 <script setup lang="ts">
 import { RouterLink } from "vue-router";
 import { useDisplay } from "vuetify";
-import LocaleSwitcher from "./LocaleSwitcher.vue";
+import LocaleSwitcher from "./switcher/LocaleSwitcher.vue";
 import DropDownMobile from "@/components/navigation/DropDownMobile.vue";
+import ThemeSwitcher from "@/components/switcher/ThemeSwitcher.vue";
 import LogoutButton from "@/components/buttons/LogoutButton.vue";
 import { useAuthStore } from "@/stores/auth-store";
 import { storeToRefs } from "pinia";
@@ -39,8 +41,13 @@ const { isLoggedIn } = storeToRefs(useAuthStore());
 }
 
 .v-app-bar {
-    padding: 5px 0px;
+    padding: 5px 0;
 }
+
+.v-app-bar-nav-icon {
+    color: rgb(var(--v-theme-navtext));
+}
+
 .leftContent {
     margin-left: auto;
     display: flex;
@@ -48,6 +55,10 @@ const { isLoggedIn } = storeToRefs(useAuthStore());
 }
 
 .logout {
-    margin-right: 15px;
+    color: rgb(var(--v-theme-navtext));
+}
+
+.switcher {
+    margin-left: 20px;
 }
 </style>
diff --git a/frontend/src/components/buttons/LogoutButton.vue b/frontend/src/components/buttons/LogoutButton.vue
index 2d9393d1..594bd2d3 100644
--- a/frontend/src/components/buttons/LogoutButton.vue
+++ b/frontend/src/components/buttons/LogoutButton.vue
@@ -1,5 +1,5 @@
 <template>
-    <v-btn variant="text" class="logout" @click="logout"> logout </v-btn>
+    <v-btn variant="text" class="logout" @click="logout"> {{ $t("logout") }} </v-btn>
 </template>
 
 <script setup lang="ts">
diff --git a/frontend/src/components/home/cards/HomeScreenCard.vue b/frontend/src/components/home/cards/HomeScreenCard.vue
index 5712a739..de0f1cea 100644
--- a/frontend/src/components/home/cards/HomeScreenCard.vue
+++ b/frontend/src/components/home/cards/HomeScreenCard.vue
@@ -1,5 +1,5 @@
 <template>
-    <v-card variant="text" :title="$t(title)" class="card">
+    <v-card :title="$t(title)" class="card" variant="flat">
         <slot></slot>
     </v-card>
 </template>
@@ -12,8 +12,9 @@ defineProps<{
 
 <style scoped>
 .card {
-    background-color: white;
-    color: black;
-    border-radius: 20px;
+    background-color: rgb(var(--v-theme-secondary));
+    color: rgb(var(--v-theme-text));
+    border-radius: 2px;
+    text-transform: capitalize;
 }
 </style>
diff --git a/frontend/src/components/home/listcontent/DeadlineItem.vue b/frontend/src/components/home/listcontent/DeadlineItem.vue
index 685f22b1..743ff2d1 100644
--- a/frontend/src/components/home/listcontent/DeadlineItem.vue
+++ b/frontend/src/components/home/listcontent/DeadlineItem.vue
@@ -1,5 +1,6 @@
 <template>
-    <div :class="getBackgroundClass()" @click="navigateToProject">
+    <div class="projectbtn" @click="navigateToProject">
+        <div :class="getBackgroundClass()"></div>
         <div class="leftcontent">
             <h3>{{ deadline.project.name }}</h3>
             <p class="p">{{ deadline.project.subject_id }}</p>
@@ -23,7 +24,7 @@ const { deadline } = toRefs(props);
 
 const getBackgroundClass = () => {
     return {
-        projectbtn: true,
+        block: true,
         accepted: deadline.value.status === "accepted",
         rejected: deadline.value.status === "rejected",
         none: deadline.value.status === "none",
@@ -47,39 +48,39 @@ const navigateToProject = () => {
 
 <style scoped>
 .projectbtn {
-    margin: 10px;
-    width: calc(100% - 20px);
-    background-color: white;
-    padding: 10px;
+    margin: 5px;
+    background-color: rgb(var(--v-theme-background));
     display: flex;
-    align-items: center;
     transition: background-color 0.3s;
-    border-radius: 10px;
+    align-items: center;
     cursor: pointer;
+    height: 65px;
+    border-radius: 2px;
 }
 
-.none {
-    background-color: #eeeeee;
+.projectbtn:hover {
+    background-color: rgb(var(--v-theme-tertiary));
 }
 
-.accepted {
-    background-color: #e3f7e4;
+.block {
+    margin-left: 10px;
+    width: 5px;
+    height: 100%;
 }
 
-.rejected {
-    background-color: #ffcaca;
+.none {
+    background-color: gray;
 }
 
-.accepted:hover {
-    background-color: #c3f2c6;
+.accepted {
+    background-color: green;
 }
 
-.rejected:hover {
-    background-color: #ff9898;
+.rejected {
+    background-color: darkred;
 }
-
-.none:hover {
-    background-color: lightgray;
+.leftcontent {
+    margin-left: 20px;
 }
 
 .rightcontent {
@@ -89,6 +90,6 @@ const navigateToProject = () => {
 }
 
 .p {
-    color: lightslategrey;
+    color: rgb(var(--v-theme-textsecondary));
 }
 </style>
diff --git a/frontend/src/components/home/listcontent/SubjectItem.vue b/frontend/src/components/home/listcontent/SubjectItem.vue
index 07e21704..8a0e1d3e 100644
--- a/frontend/src/components/home/listcontent/SubjectItem.vue
+++ b/frontend/src/components/home/listcontent/SubjectItem.vue
@@ -1,5 +1,4 @@
 <template>
-    <v-divider></v-divider>
     <div class="coursebtn" @click="navigateToCourse">
         <div>
             <h3>{{ subject.name }}</h3>
@@ -35,17 +34,19 @@ const navigateToCourse = () => {
 
 <style scoped>
 .coursebtn {
-    width: 100%;
-    background-color: white;
+    width: calc(100% - 10px);
+    margin: 5px;
     padding: 10px;
     display: flex;
     align-items: center;
     transition: background-color 0.3s;
     cursor: pointer;
+    background-color: rgb(var(--v-theme-background));
+    border-radius: 2px;
 }
 
 .coursebtn:hover {
-    background-color: lightgray;
+    background-color: rgb(var(--v-theme-tertiary));
 }
 
 .chevron {
@@ -55,6 +56,6 @@ const navigateToCourse = () => {
 }
 
 .teacher {
-    color: lightslategrey;
+    color: rgb(var(--v-theme-textsecondary));
 }
 </style>
diff --git a/frontend/src/components/navigation/DropDownList.vue b/frontend/src/components/navigation/DropDownList.vue
index e6607eb5..74d824b7 100644
--- a/frontend/src/components/navigation/DropDownList.vue
+++ b/frontend/src/components/navigation/DropDownList.vue
@@ -1,17 +1,21 @@
 <template>
-    <v-list class="items">
+    <v-list class="items bg-primary">
         <v-list-item data-test="logoutButton" v-if="loggedInValue.value">
             <LogoutButton />
         </v-list-item>
         <v-list-item data-test="localeSwitcher">
             <LocaleSwitcher />
         </v-list-item>
+        <v-list-item data-test="themeSwitcher">
+            <themeSwitcher />
+        </v-list-item>
     </v-list>
 </template>
 
 <script setup lang="ts">
-import LocaleSwitcher from "@/components/LocaleSwitcher.vue";
+import LocaleSwitcher from "@/components/switcher/LocaleSwitcher.vue";
 import LogoutButton from "@/components/buttons/LogoutButton.vue";
+import ThemeSwitcher from "@/components/switcher/ThemeSwitcher.vue";
 
 import { useAuthStore } from "@/stores/auth-store";
 import { storeToRefs } from "pinia";
diff --git a/frontend/src/components/navigation/NavBar.vue b/frontend/src/components/navigation/NavBar.vue
index daf557ec..19f0e46b 100644
--- a/frontend/src/components/navigation/NavBar.vue
+++ b/frontend/src/components/navigation/NavBar.vue
@@ -1,5 +1,5 @@
 <template>
-    <v-navigation-drawer v-model="isOpen" app>
+    <v-navigation-drawer v-model="isOpen" app class="text-background">
         <div class="navbuttons">
             <NavButton
                 v-for="nav in navigations"
@@ -11,12 +11,7 @@
         </div>
         <template v-slot:append>
             <div class="ugent-logo">
-                <img
-                    alt="Logo"
-                    class="logo"
-                    src="@/assets/universiteit-gent-logo-white.png"
-                    height="150"
-                />
+                <img alt="Logo" class="logo" :src="`src/assets/${$t('logo')}`" height="150" />
             </div>
         </template>
     </v-navigation-drawer>
@@ -42,13 +37,12 @@ defineExpose({
 
 <style scoped lang="scss">
 .v-navigation-drawer {
-    background: linear-gradient(var(--color-primary), #0e2057);
+    background: rgb(var(--v-theme-primary));
     padding: 10px;
 }
 
 .ugent-logo {
     bottom: 0;
-    margin-bottom: 30px;
 }
 
 .navbuttons {
diff --git a/frontend/src/components/navigation/NavButton.vue b/frontend/src/components/navigation/NavButton.vue
index 93b8ad11..cb8f361e 100644
--- a/frontend/src/components/navigation/NavButton.vue
+++ b/frontend/src/components/navigation/NavButton.vue
@@ -22,6 +22,8 @@ defineProps<{
     justify-content: space-between;
     align-items: center;
     width: 100%;
+    color: rgb(var(--v-theme-navtext));
+    text-transform: capitalize;
 }
 
 .v-icon {
diff --git a/frontend/src/components/LocaleSwitcher.vue b/frontend/src/components/switcher/LocaleSwitcher.vue
similarity index 89%
rename from frontend/src/components/LocaleSwitcher.vue
rename to frontend/src/components/switcher/LocaleSwitcher.vue
index 68069109..b926288d 100644
--- a/frontend/src/components/LocaleSwitcher.vue
+++ b/frontend/src/components/switcher/LocaleSwitcher.vue
@@ -1,6 +1,5 @@
 <template>
     <div class="switcher">
-        <v-icon icon="mdi-earth" />
         <template v-for="(availableLocale, index) in availableLocales" :key="availableLocale">
             <v-btn
                 variant="text"
@@ -29,7 +28,7 @@ function handleLocaleChange(selectedLocale: string) {
 
 <style lang="scss" scoped>
 .switcher {
-    color: var(--color-text-on-primary);
+    color: rgb(var(--v-theme-navtext));
     display: flex;
     align-items: center;
 }
@@ -39,7 +38,7 @@ function handleLocaleChange(selectedLocale: string) {
 }
 
 .selected-option {
-    color: var(--color-text-on-primary);
+    color: rgb(var(--v-theme-navtext));
     font-style: bold;
 }
 </style>
diff --git a/frontend/src/components/switcher/ThemeSwitcher.vue b/frontend/src/components/switcher/ThemeSwitcher.vue
new file mode 100644
index 00000000..47cd0ba2
--- /dev/null
+++ b/frontend/src/components/switcher/ThemeSwitcher.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="container">
+        <v-icon class="moon" icon="mdi mdi-moon-waning-crescent"></v-icon>
+        <v-switch
+            class="switcher"
+            color="white"
+            v-model="switchValue"
+            false-value="darkTheme"
+            true-value="lightTheme"
+        ></v-switch>
+        <v-icon class="sun" icon="mdi mdi-white-balance-sunny"></v-icon>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useTheme } from "vuetify";
+import { ref, watch } from "vue";
+import { useThemeStore } from "@/stores/theme-store";
+const theme = useTheme();
+const { storedTheme, setTheme } = useThemeStore();
+
+const switchValue = ref(storedTheme);
+
+watch(switchValue, (newValue) => {
+    theme.global.name.value = newValue;
+    setTheme(newValue);
+    console.log(localStorage.getItem("theme"));
+});
+</script>
+
+<style scoped>
+.container {
+    display: flex;
+    align-items: center;
+}
+.switcher {
+    margin-left: 5px;
+    margin-right: 10px;
+    display: flex;
+}
+</style>
diff --git a/frontend/src/i18n/locales/en.ts b/frontend/src/i18n/locales/en.ts
index 255d0402..5c21f850 100644
--- a/frontend/src/i18n/locales/en.ts
+++ b/frontend/src/i18n/locales/en.ts
@@ -7,6 +7,8 @@ export default {
             loading_page: "Loading...",
         },
     },
+    logo: "ghent-university-logo-white.png",
+    logout: "logout",
     login: {
         about: "The official submission application of Ghent University",
         login: "Login",
diff --git a/frontend/src/i18n/locales/nl.ts b/frontend/src/i18n/locales/nl.ts
index 3ea22ba4..2a009b7b 100644
--- a/frontend/src/i18n/locales/nl.ts
+++ b/frontend/src/i18n/locales/nl.ts
@@ -7,6 +7,8 @@ export default {
             loading_page: "Aan het laden...",
         },
     },
+    logo: "universiteit-gent-logo-white.png",
+    logout: "uitloggen",
     login: {
         about: "De officiële indienapplicatie van de Universiteit Gent",
         login: "Inloggen",
diff --git a/frontend/src/plugins/vuetify.ts b/frontend/src/plugins/vuetify.ts
index d0ffe19e..89c457a3 100644
--- a/frontend/src/plugins/vuetify.ts
+++ b/frontend/src/plugins/vuetify.ts
@@ -26,7 +26,13 @@ const vuetify = createVuetify({
                 dark: false,
                 colors: {
                     background: "#ffffff",
-                    surface: "#1d357e",
+                    surface: "#ffffff",
+                    text: "#0E2057",
+                    textsecondary: "#868fab",
+                    primary: "#1d357e",
+                    secondary: "#DFE5F7",
+                    tertiary: "#E9EDFA",
+                    navtext: "#DFE5F7",
                     // TODO: Add rest of colors
                 },
             },
@@ -34,7 +40,13 @@ const vuetify = createVuetify({
                 dark: true,
                 colors: {
                     background: "#222222",
-                    surface: "#1d357e",
+                    surface: "#222222",
+                    text: "#DFE5F7",
+                    textsecondary: "#b2b2b2",
+                    primary: "#233161",
+                    secondary: "#595D6C",
+                    tertiary: "#353740",
+                    navtext: "#DFE5F7",
                     // TODO: Add rest of colors
                 },
             },
diff --git a/frontend/src/stores/theme-store.ts b/frontend/src/stores/theme-store.ts
new file mode 100644
index 00000000..46eab399
--- /dev/null
+++ b/frontend/src/stores/theme-store.ts
@@ -0,0 +1,16 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+export const useThemeStore = defineStore("theme", () => {
+    const storedTheme = ref(localStorage.getItem("theme"));
+
+    function setTheme(newTheme?: string | null) {
+        if (!newTheme) {
+            return;
+        }
+        storedTheme.value = newTheme;
+        localStorage.setItem("theme", newTheme);
+    }
+
+    return { storedTheme, setTheme };
+});
diff --git a/frontend/src/views/HomeScreenView.vue b/frontend/src/views/HomeScreenView.vue
index 52b52142..65dfc796 100644
--- a/frontend/src/views/HomeScreenView.vue
+++ b/frontend/src/views/HomeScreenView.vue
@@ -1,39 +1,38 @@
 <template>
-    <BackgroundContainer>
+    <v-container v-if="smAndDown">
         <h1 v-if="isLoading">Loading...</h1>
-        <h1 v-else>{{ $t("home.welcome", { name: user!.given_name }) }}</h1>
-        <v-container v-if="smAndDown">
-            <div class="mobileCard">
+        <h1 v-else class="title">{{ $t("home.welcome", { name: user!.given_name }) }}</h1>
+        <div class="mobileCard">
+            <DeadlinesCard />
+        </div>
+        <div class="mobileCard">
+            <SubjectsCard />
+        </div>
+        <div class="mobileCard">
+            <AnnouncementsCard />
+        </div>
+    </v-container>
+    <v-container v-else>
+        <h1 v-if="isLoading">Loading...</h1>
+        <h1 v-else class="title">{{ $t("home.welcome", { name: user!.given_name }) }}</h1>
+        <v-row>
+            <v-col>
                 <DeadlinesCard />
-            </div>
-            <div class="mobileCard">
+            </v-col>
+            <v-col>
                 <SubjectsCard />
-            </div>
-            <div class="mobileCard">
+            </v-col>
+            <v-col>
                 <AnnouncementsCard />
-            </div>
-        </v-container>
-        <v-container v-else>
-            <v-row>
-                <v-col>
-                    <DeadlinesCard />
-                </v-col>
-                <v-col>
-                    <SubjectsCard />
-                </v-col>
-                <v-col>
-                    <AnnouncementsCard />
-                </v-col>
-            </v-row>
-        </v-container>
-    </BackgroundContainer>
+            </v-col>
+        </v-row>
+    </v-container>
 </template>
 
 <script setup lang="ts">
 import SubjectsCard from "@/components/home/cards/SubjectsCard.vue";
 import DeadlinesCard from "@/components/home/cards/DeadlinesCard.vue";
 import AnnouncementsCard from "@/components/home/cards/AnnouncementsCard.vue";
-import BackgroundContainer from "@/components/BackgroundContainer.vue";
 import { useUserQuery } from "@/queries/User";
 import { useDisplay } from "vuetify";
 
@@ -42,8 +41,13 @@ const { smAndDown } = useDisplay();
 </script>
 
 <style scoped lang="scss">
-.h1 {
-    margin-bottom: 30px;
+.title {
+    background-color: rgb(var(--v-theme-secondary));
+    color: rgb(var(--v-theme-text));
+    margin-bottom: 15px;
+    margin-top: 15px;
+    padding: 10px;
+    border-radius: 2px;
 }
 
 .mobileCard {
diff --git a/frontend/src/views/LoginView.vue b/frontend/src/views/LoginView.vue
index e566ecbc..8d4a4bf0 100644
--- a/frontend/src/views/LoginView.vue
+++ b/frontend/src/views/LoginView.vue
@@ -9,11 +9,7 @@
             />
             <h3>{{ $t("login.about") }}</h3>
             <a class="login-button" :href="useCASUrl().CASUrl">{{ $t("login.login") }}</a>
-            <img
-                alt="ugent logo"
-                class="ugent-logo"
-                src="@/assets/universiteit-gent-logo-white.png"
-            />
+            <img alt="ugent logo" class="ugent-logo" :src="`src/assets/${$t('logo')}`" />
             <LocaleSwitcher class="login-switcher" />
         </div>
     </div>
@@ -21,7 +17,7 @@
 
 <script setup lang="ts">
 import { useCASUrl } from "@/stores/cas-url";
-import LocaleSwitcher from "@/components/LocaleSwitcher.vue";
+import LocaleSwitcher from "@/components/switcher/LocaleSwitcher.vue";
 </script>
 
 <style scoped>
@@ -38,7 +34,7 @@ import LocaleSwitcher from "@/components/LocaleSwitcher.vue";
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    background-color: var(--color-primary);
+    background: linear-gradient(rgb(var(--v-theme-primary)), #0e2057);
     height: 100%;
 }
 
@@ -60,12 +56,13 @@ import LocaleSwitcher from "@/components/LocaleSwitcher.vue";
 }
 
 .login-button {
-    background-color: var(--gray-4);
+    background-color: rgba(225, 225, 225, 0.1);
     color: var(--white);
-    border: 2px solid var(--color-border);
+    text-decoration: none;
+    border: 1px solid var(--color-border);
     padding: 10px 20px;
     font-size: 16px;
-    border-radius: 50px;
+    border-radius: 15px;
     cursor: pointer;
     transition:
         background-color 0.3s,
@@ -73,7 +70,7 @@ import LocaleSwitcher from "@/components/LocaleSwitcher.vue";
 }
 
 .login-button:hover {
-    background-color: var(--gray-3);
+    background-color: rgba(225, 225, 225, 0.2);
     color: var(--white);
 }