diff --git a/vue3/src/stores/UserPreferenceStore.ts b/vue3/src/stores/UserPreferenceStore.ts
index c5aec1857..5d6d84c36 100644
--- a/vue3/src/stores/UserPreferenceStore.ts
+++ b/vue3/src/stores/UserPreferenceStore.ts
@@ -5,6 +5,7 @@ import {ApiApi, UserPreference} from "@/openapi";
 import {ref} from "vue";
 
 const DEVICE_SETTINGS_KEY = 'TANDOOR_DEVICE_SETTINGS'
+const USER_PREFERENCE_KEY = 'TANDOOR_USER_PREFERENCE'
 
 class DeviceSettings {
 
@@ -20,9 +21,18 @@ class DeviceSettings {
 }
 
 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 userSettings = ref({} as UserPreference)
+    /**
+     * database user settings, cache in local storage in case application is started offline
+     */
+    let userSettings = useStorage(USER_PREFERENCE_KEY, {} as UserPreference)
 
+    /**
+     * retrieve user settings from DB
+     */
     function loadUserSettings() {
         console.log('loading user settings from DB')
         let api = new ApiApi()
@@ -37,9 +47,10 @@ export const useUserPreferenceStore = defineStore('user_preference_store', () =>
         })
     }
 
+    // always load user settings on first initialization of store
     loadUserSettings()
 
-    return {deviceSettings, userSettings}
+    return {deviceSettings, userSettings, loadUserSettings}
 })
 
 // enable hot reload for store