diff --git a/vue3/package.json b/vue3/package.json
index 616035d26..754afa28a 100644
--- a/vue3/package.json
+++ b/vue3/package.json
@@ -23,7 +23,7 @@
     "vue-simple-calendar": "7.1.0",
     "vuedraggable": "^4.1.0",
     "@types/sortablejs": "^1.15.8",
-    "vuetify": "^3.8.12"
+    "vuetify": "^3.9.0"
   },
   "devDependencies": {
     "@fortawesome/fontawesome-free": "^6.7.2",
diff --git a/vue3/src/apps/tandoor/Tandoor.vue b/vue3/src/apps/tandoor/Tandoor.vue
index ee535cb28..dc8fbd371 100644
--- a/vue3/src/apps/tandoor/Tandoor.vue
+++ b/vue3/src/apps/tandoor/Tandoor.vue
@@ -3,92 +3,95 @@
         <v-app-bar color="tandoor" flat density="comfortable" v-if="!useUserPreferenceStore().isAuthenticated">
 
         </v-app-bar>
-        <v-app-bar :color="useUserPreferenceStore().activeSpace.navBgColor ? useUserPreferenceStore().activeSpace.navBgColor : useUserPreferenceStore().userSettings.navBgColor" flat density="comfortable" v-if="useUserPreferenceStore().isAuthenticated" :scroll-behavior="useUserPreferenceStore().userSettings.navSticky ? '' : 'hide'">
+        <v-app-bar :color="useUserPreferenceStore().activeSpace.navBgColor ? useUserPreferenceStore().activeSpace.navBgColor : useUserPreferenceStore().userSettings.navBgColor"
+                   flat density="comfortable" v-if="useUserPreferenceStore().isAuthenticated" :scroll-behavior="useUserPreferenceStore().userSettings.navSticky ? '' : 'hide'">
             <router-link :to="{ name: 'StartPage', params: {} }">
-                <v-img src="../../assets/brand_logo.svg" width="140px" class="ms-2" v-if="useUserPreferenceStore().userSettings.navShowLogo && !useUserPreferenceStore().activeSpace.navLogo"></v-img>
-                <v-img :src="useUserPreferenceStore().activeSpace.navLogo.preview" width="140px" class="ms-2" v-if="useUserPreferenceStore().userSettings.navShowLogo && useUserPreferenceStore().activeSpace.navLogo != undefined"></v-img>
+                <v-img src="../../assets/brand_logo.svg" width="140px" class="ms-2"
+                       v-if="useUserPreferenceStore().userSettings.navShowLogo && !useUserPreferenceStore().activeSpace.navLogo"></v-img>
+                <v-img :src="useUserPreferenceStore().activeSpace.navLogo.preview" width="140px" class="ms-2"
+                       v-if="useUserPreferenceStore().userSettings.navShowLogo && useUserPreferenceStore().activeSpace.navLogo != undefined"></v-img>
             </router-link>
 
 
-                <v-spacer></v-spacer>
-                <global-search-dialog ></global-search-dialog>
-                <v-btn icon="$add" class="d-print-none">
-                    <v-icon icon="$add" class="fa-fw"></v-icon>
-                    <v-menu activator="parent">
-                        <v-list>
-                            <v-list-item prepend-icon="$add" :to="{ name: 'ModelEditPage', params: {model: 'recipe'} }">{{ $t('Create Recipe') }}</v-list-item>
-                            <v-list-item prepend-icon="fa-solid fa-globe" :to="{ name: 'RecipeImportPage', params: {} }">{{ $t('Import Recipe') }}</v-list-item>
-                        </v-list>
-                    </v-menu>
-                </v-btn>
+            <v-spacer></v-spacer>
+            <global-search-dialog></global-search-dialog>
+            <v-btn icon="$add" class="d-print-none">
+                <v-icon icon="$add" class="fa-fw"></v-icon>
+                <v-menu activator="parent">
+                    <v-list>
+                        <v-list-item prepend-icon="$add" :to="{ name: 'ModelEditPage', params: {model: 'recipe'} }">{{ $t('Create Recipe') }}</v-list-item>
+                        <v-list-item prepend-icon="fa-solid fa-globe" :to="{ name: 'RecipeImportPage', params: {} }">{{ $t('Import Recipe') }}</v-list-item>
+                    </v-list>
+                </v-menu>
+            </v-btn>
 
-                <v-avatar color="primary" class="me-2 cursor-pointer d-print-none">{{ useUserPreferenceStore().userSettings.user.displayName.charAt(0) }}
-                    <v-menu activator="parent">
+            <v-avatar color="primary" class="me-2 cursor-pointer d-print-none">{{ useUserPreferenceStore().userSettings.user.displayName.charAt(0) }}
+                <v-menu activator="parent">
 
-                        <v-list density="compact">
-                            <v-list-item class="mb-1">
-                                <template #prepend>
-                                    <v-avatar color="primary">{{ useUserPreferenceStore().userSettings.user.displayName.charAt(0) }}</v-avatar>
-                                </template>
-                                <v-list-item-title>{{ useUserPreferenceStore().userSettings.user.displayName }}</v-list-item-title>
-                                <v-list-item-subtitle>{{ useUserPreferenceStore().activeSpace.name }}</v-list-item-subtitle>
-                            </v-list-item>
-                            <v-divider></v-divider>
-                            <v-list-item :to="{ name: 'SettingsPage', params: {} }">
-                                <template #prepend>
-                                    <v-icon icon="fa-solid fa-sliders"></v-icon>
-                                </template>
-                                {{ $t('Settings') }}
-                            </v-list-item>
-                            <v-list-item :to="{ name: 'DatabasePage', params: {} }">
-                                <template #prepend>
-                                    <v-icon icon="fa-solid fa-folder-tree"></v-icon>
-                                </template>
-                                {{ $t('Database') }}
-                            </v-list-item>
-                            <v-list-item :to="{ name: 'HelpPage' }">
-                                <template #prepend>
-                                    <v-icon icon="fa-solid fa-question"></v-icon>
-                                </template>
-                                {{ $t('Help') }}
-                            </v-list-item>
-                            <!--                        <v-list-item><template #prepend><v-icon icon="fa-solid fa-user-shield"></v-icon></template>Admin</v-list-item>-->
-                            <!--                        <v-list-item><template #prepend><v-icon icon="fa-solid fa-question"></v-icon></template>Help</v-list-item>-->
-                            <template v-if="useUserPreferenceStore().spaces.length > 1">
-                                <v-divider></v-divider>
-                                <v-list-subheader>{{ $t('YourSpaces') }}</v-list-subheader>
-                                <v-list-item v-for="s in useUserPreferenceStore().spaces" :key="s.id" @click="useUserPreferenceStore().switchSpace(s)">
-                                    <template #prepend>
-                                        <v-icon icon="fa-solid fa-circle-dot" v-if="s.id == useUserPreferenceStore().activeSpace.id"></v-icon>
-                                        <v-icon icon="fa-solid fa-circle" v-else></v-icon>
-                                    </template>
-                                    {{ s.name }}
-                                </v-list-item>
+                    <v-list density="compact">
+                        <v-list-item class="mb-1">
+                            <template #prepend>
+                                <v-avatar color="primary">{{ useUserPreferenceStore().userSettings.user.displayName.charAt(0) }}</v-avatar>
                             </template>
-
+                            <v-list-item-title>{{ useUserPreferenceStore().userSettings.user.displayName }}</v-list-item-title>
+                            <v-list-item-subtitle>{{ useUserPreferenceStore().activeSpace.name }}</v-list-item-subtitle>
+                        </v-list-item>
+                        <v-divider></v-divider>
+                        <v-list-item :to="{ name: 'SettingsPage', params: {} }">
+                            <template #prepend>
+                                <v-icon icon="fa-solid fa-sliders"></v-icon>
+                            </template>
+                            {{ $t('Settings') }}
+                        </v-list-item>
+                        <v-list-item :to="{ name: 'DatabasePage', params: {} }">
+                            <template #prepend>
+                                <v-icon icon="fa-solid fa-folder-tree"></v-icon>
+                            </template>
+                            {{ $t('Database') }}
+                        </v-list-item>
+                        <v-list-item :to="{ name: 'HelpPage' }">
+                            <template #prepend>
+                                <v-icon icon="fa-solid fa-question"></v-icon>
+                            </template>
+                            {{ $t('Help') }}
+                        </v-list-item>
+                        <!--                        <v-list-item><template #prepend><v-icon icon="fa-solid fa-user-shield"></v-icon></template>Admin</v-list-item>-->
+                        <!--                        <v-list-item><template #prepend><v-icon icon="fa-solid fa-question"></v-icon></template>Help</v-list-item>-->
+                        <template v-if="useUserPreferenceStore().spaces.length > 1">
                             <v-divider></v-divider>
-                            <v-list-item link>
+                            <v-list-subheader>{{ $t('YourSpaces') }}</v-list-subheader>
+                            <v-list-item v-for="s in useUserPreferenceStore().spaces" :key="s.id" @click="useUserPreferenceStore().switchSpace(s)">
                                 <template #prepend>
-                                    <v-icon icon="fa-solid fa-database"></v-icon>
+                                    <v-icon icon="fa-solid fa-circle-dot" v-if="s.id == useUserPreferenceStore().activeSpace.id"></v-icon>
+                                    <v-icon icon="fa-solid fa-circle" v-else></v-icon>
                                 </template>
-                                {{ $t('Messages') }}
-                                <message-list-dialog></message-list-dialog>
+                                {{ s.name }}
                             </v-list-item>
-                            <v-list-item :href="getDjangoUrl('admin')" target="_blank" v-if="useUserPreferenceStore().userSettings.user.isSuperuser">
-                                <template #prepend>
-                                    <v-icon icon="fa-solid fa-shield"></v-icon>
-                                </template>
-                                {{ $t('Admin') }}
-                            </v-list-item>
-                            <v-list-item :href="getDjangoUrl('accounts/logout')" link>
-                                <template #prepend>
-                                    <v-icon icon="fa-solid fa-arrow-right-from-bracket"></v-icon>
-                                </template>
-                                {{ $t('Logout') }}
-                            </v-list-item>
-                        </v-list>
-                    </v-menu>
-                </v-avatar>
+                        </template>
+
+                        <v-divider></v-divider>
+                        <v-list-item link>
+                            <template #prepend>
+                                <v-icon icon="fa-solid fa-database"></v-icon>
+                            </template>
+                            {{ $t('Messages') }}
+                            <message-list-dialog></message-list-dialog>
+                        </v-list-item>
+                        <v-list-item :href="getDjangoUrl('admin')" target="_blank" v-if="useUserPreferenceStore().userSettings.user.isSuperuser">
+                            <template #prepend>
+                                <v-icon icon="fa-solid fa-shield"></v-icon>
+                            </template>
+                            {{ $t('Admin') }}
+                        </v-list-item>
+                        <v-list-item :href="getDjangoUrl('accounts/logout')" link>
+                            <template #prepend>
+                                <v-icon icon="fa-solid fa-arrow-right-from-bracket"></v-icon>
+                            </template>
+                            {{ $t('Logout') }}
+                        </v-list-item>
+                    </v-list>
+                </v-menu>
+            </v-avatar>
 
         </v-app-bar>
         <v-app-bar color="info" density="compact"
@@ -187,15 +190,14 @@
 <script lang="ts" setup>
 import GlobalSearchDialog from "@/components/inputs/GlobalSearchDialog.vue"
 
-import {useDisplay, useTheme} from "vuetify"
+import {useDisplay} from "vuetify"
 import VSnackbarQueued from "@/components/display/VSnackbarQueued.vue";
 import MessageListDialog from "@/components/dialogs/MessageListDialog.vue";
 import {useUserPreferenceStore} from "@/stores/UserPreferenceStore";
 import NavigationDrawerContextMenu from "@/components/display/NavigationDrawerContextMenu.vue";
 import {useDjangoUrls} from "@/composables/useDjangoUrls";
-import {onMounted, ref} from "vue";
+import {onMounted} from "vue";
 import {isSpaceAboveLimit} from "@/utils/logic_utils";
-import '@/assets/tandoor_light.css'
 import {useMediaQuery} from "@vueuse/core";
 
 const {lgAndUp} = useDisplay()
@@ -209,6 +211,96 @@ onMounted(() => {
 
 </script>
 
-<style scoped>
+<style>
+
+.v-theme--dark {
+
+    a:not(.v-*) {
+        color: #b98766;
+        text-decoration: none;
+        background-color: transparent
+    }
+
+    a:hover {
+        color: #fff;
+        text-decoration: none
+    }
+
+    a:not([href]):not([tabindex]), a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
+        color: inherit;
+        text-decoration: none
+    }
+
+    a:not([href]):not([tabindex]):focus {
+        outline: 0
+    }
+
+
+    /* Meal-Plan */
+
+    .cv-header {
+        background-color: #303030 !important;
+    }
+
+    .cv-weeknumber, .cv-header-day {
+        background-color: #303030 !important;
+        color: #fff !important;
+    }
+
+    .cv-day.past {
+        background-color: #333333 !important;
+    }
+
+    .cv-day.today {
+        background-color: var(--primary) !important;
+    }
+
+    .cv-day.outsideOfMonth {
+        background-color: #0d0d0d !important;
+    }
+
+    .cv-item {
+        background-color: #4E4E4E !important;
+    }
+
+    .d01 .cv-day-number {
+        background-color: #b98766 !important;
+    }
+
+    /* vueform/multiselect */
+
+    .multiselect-dropdown {
+        background: #212121 !important;
+    }
+
+    .multiselect-option.is-pointed {
+        background: #b98766 !important;
+    }
+
+}
+
+.v-theme--light {
+    a {
+        color: #b98766;
+        text-decoration: none;
+        background-color: transparent
+    }
+
+    a:hover {
+        color: #000;
+        text-decoration: none
+    }
+
+    a:not([href]):not([tabindex]), a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
+        color: inherit;
+        text-decoration: none
+    }
+
+    a:not([href]):not([tabindex]):focus {
+        outline: 0
+    }
+
+
+}
 
 </style>
diff --git a/vue3/src/assets/tandoor_dark.css b/vue3/src/assets/tandoor_dark.css
deleted file mode 100644
index b66c9d8c3..000000000
--- a/vue3/src/assets/tandoor_dark.css
+++ /dev/null
@@ -1,60 +0,0 @@
-a {
-    color: #b98766;
-    text-decoration: none;
-    background-color: transparent
-}
-
-a:hover {
-    color: #fff;
-    text-decoration: none
-}
-
-a:not([href]):not([tabindex]), a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
-    color: inherit;
-    text-decoration: none
-}
-
-a:not([href]):not([tabindex]):focus {
-    outline: 0
-}
-
-/* Meal-Plan */
-
-.cv-header {
-    background-color: #303030 !important;
-}
-
-.cv-weeknumber, .cv-header-day {
-    background-color: #303030 !important;
-    color: #fff !important;
-}
-
-.cv-day.past {
-    background-color: #333333 !important;
-}
-
-.cv-day.today {
-    background-color: var(--primary) !important;
-}
-
-.cv-day.outsideOfMonth {
-    background-color: #0d0d0d !important;
-}
-
-.cv-item {
-    background-color: #4E4E4E !important;
-}
-
-.d01 .cv-day-number {
-    background-color: #b98766!important;
-}
-
-/* vueform/multiselect */
-
-.multiselect-dropdown {
-    background: #212121!important;
-}
-
-.multiselect-option.is-pointed {
-    background: #b98766!important;
-}
diff --git a/vue3/src/assets/tandoor_light.css b/vue3/src/assets/tandoor_light.css
deleted file mode 100644
index 3b7937582..000000000
--- a/vue3/src/assets/tandoor_light.css
+++ /dev/null
@@ -1,20 +0,0 @@
-a {
-    color: #b98766;
-    text-decoration: none;
-    background-color: transparent
-}
-
-a:hover {
-    color: #000;
-    text-decoration: none
-}
-
-a:not([href]):not([tabindex]), a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
-    color: inherit;
-    text-decoration: none
-}
-
-a:not([href]):not([tabindex]):focus {
-    outline: 0
-}
-
diff --git a/vue3/src/stores/UserPreferenceStore.ts b/vue3/src/stores/UserPreferenceStore.ts
index 36a3d55bf..ebeecadb2 100644
--- a/vue3/src/stores/UserPreferenceStore.ts
+++ b/vue3/src/stores/UserPreferenceStore.ts
@@ -1,12 +1,11 @@
 import {acceptHMRUpdate, defineStore} from 'pinia'
 import {useStorage} from "@vueuse/core";
 import {ErrorMessageType, PreparedMessage, useMessageStore} from "@/stores/MessageStore";
-import {ApiApi, ServerSettings, Space, Supermarket, UserPreference, UserSpace} from "@/openapi";
+import {ApiApi, ServerSettings, Space, UserPreference, UserSpace} from "@/openapi";
 import {ShoppingGroupingOptions} from "@/types/Shopping";
 import {computed, ComputedRef, ref} from "vue";
 import {DeviceSettings} from "@/types/settings";
 import {useTheme} from "vuetify";
-import tandoorDarkCustomCss from '@/assets/tandoor_dark.css?inline'
 
 const DEVICE_SETTINGS_KEY = 'TANDOOR_DEVICE_SETTINGS'
 const USER_PREFERENCE_KEY = 'TANDOOR_USER_PREFERENCE'
@@ -209,23 +208,10 @@ export const useUserPreferenceStore = defineStore('user_preference_store', () =>
      * applies user settings regarding themes/styling
      */
     function updateTheme() {
-        let customStyleTag = document.getElementById('id_style_custom_css')
-
         if (userSettings.value.theme == 'TANDOOR') {
-            theme.global.name.value = 'light'
-
-            if (customStyleTag) {
-                document.head.removeChild(customStyleTag)
-            }
+            theme.change('light')
         } else if (userSettings.value.theme == 'TANDOOR_DARK') {
-            theme.global.name.value = 'dark'
-
-            if (!customStyleTag) {
-                const styleTag = document.createElement('style')
-                styleTag.id = "id_style_custom_css"
-                styleTag.innerHTML = tandoorDarkCustomCss
-                document.head.appendChild(styleTag)
-            }
+            theme.change('dark')
         }
     }
 
diff --git a/vue3/yarn.lock b/vue3/yarn.lock
index ba9e3ae0b..f457d1a6c 100644
--- a/vue3/yarn.lock
+++ b/vue3/yarn.lock
@@ -3412,10 +3412,10 @@ vuedraggable@^4.1.0:
   dependencies:
     sortablejs "1.14.0"
 
-vuetify@^3.8.12:
-  version "3.8.12"
-  resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-3.8.12.tgz#7c433b8b036011bb0a800f08f5a53d61067eeae8"
-  integrity sha512-XRX/yRel/V5rlas12ovujVCo8RDb/NwICyef/DVYzybqbYz/UGHZd23sN5q1zw0h9jUN8httXI6ytWN7OFugmA==
+vuetify@^3.9.0:
+  version "3.9.0"
+  resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-3.9.0.tgz#e9412e9ba662fcd4b9946c589a984d157460943a"
+  integrity sha512-vjqyHP5gBFH4x0BAjdRAcS3FXY5OfHaKnC6Hhgln8tePZtKc3AUhF7BEJtcrD3l6XwL8gaYx/wMt+UP7X5EZJw==
 
 w3c-xmlserializer@^5.0.0:
   version "5.0.0"