diff --git a/vue3/src/components/display/MealPlanView.vue b/vue3/src/components/display/MealPlanView.vue
index 74793a4fd..24d082746 100644
--- a/vue3/src/components/display/MealPlanView.vue
+++ b/vue3/src/components/display/MealPlanView.vue
@@ -8,6 +8,10 @@
                 :item-content-height="calendarItemHeight"
                 :enable-drag-drop="true"
                 @dropOnDate="dropCalendarItemOnDate"
+                :display-period-uom="useUserPreferenceStore().deviceSettings.mealplan_displayPeriod"
+                :display-period-count="useUserPreferenceStore().deviceSettings.mealplan_displayPeriodCount"
+                :starting-day-of-week="useUserPreferenceStore().deviceSettings.mealplan_startingDayOfWeek"
+                :display-week-numbers="useUserPreferenceStore().deviceSettings.mealplan_displayWeekNumbers"
                 @click-date="(date : Date, calendarItems: [], windowEvent: any) => { newPlanDialogDefaultItem.fromDate = date; newPlanDialogDefaultItem.toDate = date; newPlanDialog = true }">
                 <template #header="{ headerProps }">
                     <CalendarViewHeader :header-props="headerProps"></CalendarViewHeader>
@@ -24,7 +28,8 @@
                 </template>
             </CalendarView>
 
-            <model-edit-dialog model="MealPlan" v-model="newPlanDialog" :itemDefaults="newPlanDialogDefaultItem" @create="(arg: any) => useMealPlanStore().plans.set(arg.id, arg)"></model-edit-dialog>
+            <model-edit-dialog model="MealPlan" v-model="newPlanDialog" :itemDefaults="newPlanDialogDefaultItem"
+                               @create="(arg: any) => useMealPlanStore().plans.set(arg.id, arg)"></model-edit-dialog>
         </v-col>
     </v-row>
 </template>
@@ -43,6 +48,7 @@ import {useDisplay} from "vuetify";
 import {useMealPlanStore} from "@/stores/MealPlanStore";
 import ModelEditDialog from "@/components/dialogs/ModelEditDialog.vue";
 import {MealPlan} from "@/openapi";
+import {useUserPreferenceStore} from "@/stores/UserPreferenceStore";
 
 const {lgAndUp} = useDisplay()
 
diff --git a/vue3/src/pages/SettingsPage.vue b/vue3/src/pages/SettingsPage.vue
index 265a0e69f..5203e7cba 100644
--- a/vue3/src/pages/SettingsPage.vue
+++ b/vue3/src/pages/SettingsPage.vue
@@ -20,7 +20,7 @@
                     <v-divider></v-divider>
                     <v-list-subheader>Admin</v-list-subheader>
                     <v-list-item :to="{name: 'view_settings_api'}" prepend-icon="fa-solid fa-code">{{ $t('API') }}</v-list-item>
-                    <v-list-item prepend-icon="fa-solid fa-server">{{ $t('System') }}</v-list-item>
+                    <v-list-item href="/system/" prepend-icon="fa-solid fa-server">{{ $t('System') }}</v-list-item>
                 </v-list>
 
             </v-col>
diff --git a/vue3/src/stores/UserPreferenceStore.ts b/vue3/src/stores/UserPreferenceStore.ts
index 9a400918a..01f797313 100644
--- a/vue3/src/stores/UserPreferenceStore.ts
+++ b/vue3/src/stores/UserPreferenceStore.ts
@@ -9,7 +9,6 @@ const SERVER_SETTINGS_KEY = 'TANDOOR_SERVER_SETTINGS'
 const ACTIVE_SPACE_KEY = 'TANDOOR_ACTIVE_SPACE'
 
 class DeviceSettings {
-
     shopping_show_checked_entries = false
     shopping_show_delayed_entries = false
     shopping_show_selected_supermarket_only = false
@@ -25,14 +24,13 @@ class DeviceSettings {
     mealplan_displayWeekNumbers = true
 
     general_tableItemsPerPage = 10
-
 }
 
 export const useUserPreferenceStore = defineStore('user_preference_store', () => {
     /**
      * settings only saved on device to allow per device customization
      */
-    let deviceSettings = useStorage(DEVICE_SETTINGS_KEY, {} as DeviceSettings)
+    let deviceSettings = useStorage(DEVICE_SETTINGS_KEY, new DeviceSettings(), localStorage, {mergeDefaults: true})
     /**
      * database user settings, cache in local storage in case application is started offline
      */
@@ -92,7 +90,7 @@ export const useUserPreferenceStore = defineStore('user_preference_store', () =>
     /**
      * load data for currently active space
      */
-    function loadActiveSpace(){
+    function loadActiveSpace() {
         let api = new ApiApi()
         api.apiSpaceCurrentRetrieve().then(r => {
             activeSpace.value = r
@@ -104,7 +102,7 @@ export const useUserPreferenceStore = defineStore('user_preference_store', () =>
     /**
      * switch to the given space
      */
-    function switchSpace(space: Space){
+    function switchSpace(space: Space) {
         let api = new ApiApi()
 
         api.apiSwitchActiveSpaceRetrieve({spaceId: space.id}).then(r => {
@@ -121,7 +119,7 @@ export const useUserPreferenceStore = defineStore('user_preference_store', () =>
     // always load active space on first initialization of store
     loadActiveSpace()
 
-    return {deviceSettings, userSettings, serverSettings, activeSpace, loadUserSettings, loadServerSettings,updateUserSettings, switchSpace}
+    return {deviceSettings, userSettings, serverSettings, activeSpace, loadUserSettings, loadServerSettings, updateUserSettings, switchSpace}
 })
 
 // enable hot reload for store