diff --git a/vue3/src/apps/tandoor/main.ts b/vue3/src/apps/tandoor/main.ts
index a7f3fc084..3eea376d4 100644
--- a/vue3/src/apps/tandoor/main.ts
+++ b/vue3/src/apps/tandoor/main.ts
@@ -18,6 +18,11 @@ import {setupI18n} from "@/i18n";
 import SettingsPage from "@/pages/SettingsPage.vue";
 import AccountSettings from "@/components/settings/AccountSettings.vue";
 import CosmeticSettings from "@/components/settings/CosmeticSettings.vue";
+import ShoppingSettings from "@/components/settings/ShoppingSettings.vue";
+import MealPlanSettings from "@/components/settings/MealPlanSettings.vue";
+import SpaceSettings from "@/components/settings/SpaceSettings.vue";
+import SpaceMemberSettings from "@/components/settings/SpaceMemberSettings.vue";
+import UserSpaceSettings from "@/components/settings/UserSpaceSettings.vue";
 
 const routes = [
     {path: '/', component: StartPage, name: 'view_home'},
@@ -26,6 +31,11 @@ const routes = [
         children: [
             {path: 'account', component: AccountSettings, name: 'view_settings_account'},
             {path: 'cosmetic', component: CosmeticSettings, name: 'view_settings_cosmetic'},
+            {path: 'shopping', component: ShoppingSettings, name: 'view_settings_shopping'},
+            {path: 'meal-plan', component: MealPlanSettings, name: 'view_settings_mealplan'},
+            {path: 'space', component: SpaceSettings, name: 'view_settings_space'},
+            {path: 'space-members', component: SpaceMemberSettings, name: 'view_settings_space_member'},
+            {path: 'user-space', component: UserSpaceSettings, name: 'view_settings_user_space'},
         ]},
     //{path: '/settings/:page', component: SettingsPage, name: 'view_settings_page', props: true},
     {path: '/search', component: SearchPage, name: 'view_search'},
diff --git a/vue3/src/components/settings/MealPlanSettings.vue b/vue3/src/components/settings/MealPlanSettings.vue
new file mode 100644
index 000000000..63a9f5f42
--- /dev/null
+++ b/vue3/src/components/settings/MealPlanSettings.vue
@@ -0,0 +1,21 @@
+<template>
+    <v-form>
+        <p class="text-h6">{{ $t('Cosmetic') }}</p>
+        <v-divider class="mb-3"></v-divider>
+
+
+        <v-btn class="mt-3" color="success" @click="useUserPreferenceStore().updateUserSettings()" prepend-icon="$save">{{$t('Save')}}</v-btn>
+    </v-form>
+</template>
+
+
+<script setup lang="ts">
+
+
+
+import {useUserPreferenceStore} from "@/stores/UserPreferenceStore";
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/vue3/src/components/settings/ShoppingSettings.vue b/vue3/src/components/settings/ShoppingSettings.vue
new file mode 100644
index 000000000..63a9f5f42
--- /dev/null
+++ b/vue3/src/components/settings/ShoppingSettings.vue
@@ -0,0 +1,21 @@
+<template>
+    <v-form>
+        <p class="text-h6">{{ $t('Cosmetic') }}</p>
+        <v-divider class="mb-3"></v-divider>
+
+
+        <v-btn class="mt-3" color="success" @click="useUserPreferenceStore().updateUserSettings()" prepend-icon="$save">{{$t('Save')}}</v-btn>
+    </v-form>
+</template>
+
+
+<script setup lang="ts">
+
+
+
+import {useUserPreferenceStore} from "@/stores/UserPreferenceStore";
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/vue3/src/components/settings/SpaceMemberSettings.vue b/vue3/src/components/settings/SpaceMemberSettings.vue
new file mode 100644
index 000000000..63a9f5f42
--- /dev/null
+++ b/vue3/src/components/settings/SpaceMemberSettings.vue
@@ -0,0 +1,21 @@
+<template>
+    <v-form>
+        <p class="text-h6">{{ $t('Cosmetic') }}</p>
+        <v-divider class="mb-3"></v-divider>
+
+
+        <v-btn class="mt-3" color="success" @click="useUserPreferenceStore().updateUserSettings()" prepend-icon="$save">{{$t('Save')}}</v-btn>
+    </v-form>
+</template>
+
+
+<script setup lang="ts">
+
+
+
+import {useUserPreferenceStore} from "@/stores/UserPreferenceStore";
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/vue3/src/components/settings/SpaceSettings.vue b/vue3/src/components/settings/SpaceSettings.vue
new file mode 100644
index 000000000..63a9f5f42
--- /dev/null
+++ b/vue3/src/components/settings/SpaceSettings.vue
@@ -0,0 +1,21 @@
+<template>
+    <v-form>
+        <p class="text-h6">{{ $t('Cosmetic') }}</p>
+        <v-divider class="mb-3"></v-divider>
+
+
+        <v-btn class="mt-3" color="success" @click="useUserPreferenceStore().updateUserSettings()" prepend-icon="$save">{{$t('Save')}}</v-btn>
+    </v-form>
+</template>
+
+
+<script setup lang="ts">
+
+
+
+import {useUserPreferenceStore} from "@/stores/UserPreferenceStore";
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/vue3/src/components/settings/UserSpaceSettings.vue b/vue3/src/components/settings/UserSpaceSettings.vue
new file mode 100644
index 000000000..c7bcde083
--- /dev/null
+++ b/vue3/src/components/settings/UserSpaceSettings.vue
@@ -0,0 +1,39 @@
+<template>
+
+
+    <v-row>
+        <v-col cols="12"></v-col>
+    </v-row>
+
+    <v-row>
+        <v-col cols="3" v-for="us in userSpaces">
+            <v-card>
+                <v-card-title>{{us.space}}</v-card-title>
+            </v-card>
+        </v-col>
+    </v-row>
+</template>
+
+
+<script setup lang="ts">
+
+import {onMounted, ref} from "vue";
+import {ApiApi, UserSpace} from "@/openapi";
+import {ErrorMessageType, useMessageStore} from "@/stores/MessageStore";
+
+const userSpaces = ref([] as UserSpace[])
+
+onMounted(() => {
+    const api = new ApiApi()
+
+    api.apiUserSpaceList().then(r => {
+        userSpaces.value = r.results
+    }).catch(err => {
+        useMessageStore().addError(ErrorMessageType.FETCH_ERROR, err)
+    })
+})
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/vue3/src/pages/SettingsPage.vue b/vue3/src/pages/SettingsPage.vue
index adc2a6117..f62bb4aa6 100644
--- a/vue3/src/pages/SettingsPage.vue
+++ b/vue3/src/pages/SettingsPage.vue
@@ -9,14 +9,14 @@
                     <v-divider></v-divider>
                     <v-list-subheader>{{ $t('Settings') }}</v-list-subheader>
                     <v-list-item :to="{name: 'view_settings_cosmetic'}" prepend-icon="fa-solid fa-palette">{{ $t('Cosmetic') }}</v-list-item>
-                    <v-list-item prepend-icon="$shopping">{{ $t('Shopping_list') }}</v-list-item>
-                    <v-list-item prepend-icon="$mealplan">{{ $t('Meal_Plan') }}</v-list-item>
-                    <v-list-item prepend-icon="$search">{{ $t('Search') }}</v-list-item>
+                    <v-list-item :to="{name: 'view_settings_shopping'}" prepend-icon="$shopping">{{ $t('Shopping_list') }}</v-list-item>
+                    <v-list-item :to="{name: 'view_settings_mealplan'}" prepend-icon="$mealplan">{{ $t('Meal_Plan') }}</v-list-item>
+<!--                    <v-list-item prepend-icon="$search">{{ $t('Search') }}</v-list-item>-->
                     <v-divider></v-divider>
                     <v-list-subheader>Space</v-list-subheader>
-                    <v-list-item prepend-icon="$spaces">{{ $t('YourSpaces') }}</v-list-item>
-                    <v-list-item prepend-icon="$settings">{{ $t('SpaceSettings') }}</v-list-item>
-                    <v-list-item prepend-icon="fa-solid fa-users">{{ $t('SpaceSettings') }}</v-list-item>
+                    <v-list-item :to="{name: 'view_settings_user_space'}" prepend-icon="$spaces">{{ $t('YourSpaces') }}</v-list-item>
+                    <v-list-item :to="{name: 'view_settings_space'}" prepend-icon="$settings">{{ $t('SpaceSettings') }}</v-list-item>
+                    <v-list-item :to="{name: 'view_settings_space_member'}" prepend-icon="fa-solid fa-users">{{ $t('SpaceMembers') }}</v-list-item>
                     <v-divider></v-divider>
                     <v-list-subheader>Admin</v-list-subheader>
                     <v-list-item prepend-icon="fa-solid fa-code">{{ $t('API') }}</v-list-item>
diff --git a/vue3/src/stores/UserPreferenceStore.ts b/vue3/src/stores/UserPreferenceStore.ts
index 90f368a51..9bcab8ebe 100644
--- a/vue3/src/stores/UserPreferenceStore.ts
+++ b/vue3/src/stores/UserPreferenceStore.ts
@@ -1,10 +1,11 @@
 import {acceptHMRUpdate, defineStore} from 'pinia'
 import {useStorage} from "@vueuse/core";
 import {ErrorMessageType, useMessageStore} from "@/stores/MessageStore";
-import {ApiApi, UserPreference} from "@/openapi";
+import {ApiApi, Space, UserPreference} from "@/openapi";
 
 const DEVICE_SETTINGS_KEY = 'TANDOOR_DEVICE_SETTINGS'
 const USER_PREFERENCE_KEY = 'TANDOOR_USER_PREFERENCE'
+const ACTIVE_SPACE_KEY = 'TANDOOR_ACTIVE_SPACE'
 
 class DeviceSettings {
 
@@ -29,6 +30,11 @@ export const useUserPreferenceStore = defineStore('user_preference_store', () =>
      */
     let userSettings = useStorage(USER_PREFERENCE_KEY, {} as UserPreference)
 
+    /**
+     * database user settings, cache in local storage in case application is started offline
+     */
+    let activeSpace = useStorage(ACTIVE_SPACE_KEY, {} as Space)
+
     /**
      * retrieve user settings from DB
      */