diff --git a/vue/src/apps/ShoppingListView/ShoppingListView.vue b/vue/src/apps/ShoppingListView/ShoppingListView.vue
index 02349f52..43e74a25 100644
--- a/vue/src/apps/ShoppingListView/ShoppingListView.vue
+++ b/vue/src/apps/ShoppingListView/ShoppingListView.vue
@@ -367,25 +367,25 @@
         <b-popover target="id_filters_button" triggers="click" placement="bottomleft" :title="$t('Filters')">
             <div>
                 <b-form-group v-bind:label="$t('GroupBy')" label-for="popover-input-1" label-cols="6" class="mb-1">
-                    <b-form-select v-model="group_by" :options="group_by_choices" size="sm"></b-form-select>
+                    <b-form-select v-model="user_preference_store.device_settings.shopping_selected_grouping" size="sm">
+                        <b-form-select-option v-for="go in shopping_list_store.grouping_options" :value="go.id" v-bind:key="go.id">{{ $t(go.translatable_label)}}</b-form-select-option>
+                    </b-form-select>
                 </b-form-group>
                 <b-form-group v-bind:label="$t('Supermarket')" label-for="popover-input-2" label-cols="6" class="mb-1">
-                    <generic-multiselect :model="Models.SUPERMARKET" @change="shopping_list_store.selected_supermarket = $event.val" :multiple="false"></generic-multiselect>
-<!--                    <b-form-select v-model="shopping_list_store.selected_supermarket" :options="shopping_list_store.supermarkets" text-field="name"-->
-<!--                                   value-field="id" size="sm"></b-form-select>-->
+                    <generic-multiselect :model="Models.SUPERMARKET" :initial_single_selection="user_preference_store.device_settings.shopping_selected_supermarket"
+                                         @change="user_preference_store.device_settings.shopping_selected_supermarket = $event.val; user_preference_store.updateDeviceSettings()" :multiple="false"></generic-multiselect>
                 </b-form-group>
-                <!-- TODO: shade filters red when they are actually filtering content -->
                 <b-form-group v-bind:label="$t('ShowDelayed')" label-for="popover-input-3" content-cols="1"
                               class="mb-1">
-                    <b-form-checkbox v-model="show_delay"></b-form-checkbox>
+                    <b-form-checkbox v-model="user_preference_store.device_settings.shopping_show_delayed_entries" @change="user_preference_store.updateDeviceSettings()"></b-form-checkbox>
                 </b-form-group>
-                <b-form-group v-bind:label="$t('ShowUncategorizedFood')" label-for="popover-input-4" content-cols="1"
-                              class="mb-1" v-if="!ui.selected_supermarket">
-                    <b-form-checkbox v-model="show_undefined_categories"></b-form-checkbox>
+                <b-form-group v-bind:label="$t('ShowCompleted')" label-for="popover-input-3" content-cols="1"
+                              class="mb-1">
+                    <b-form-checkbox v-model="user_preference_store.device_settings.shopping_show_checked_entries" @change="user_preference_store.updateDeviceSettings()"></b-form-checkbox>
                 </b-form-group>
                 <b-form-group v-bind:label="$t('SupermarketCategoriesOnly')" label-for="popover-input-5"
-                              content-cols="1" class="mb-1" v-if="ui.selected_supermarket">
-                    <b-form-checkbox v-model="supermarket_categories_only"></b-form-checkbox>
+                              content-cols="1" class="mb-1" >
+                    <b-form-checkbox v-model="user_preference_store.device_settings.shopping_show_selected_supermarket_only" @change="user_preference_store.updateDeviceSettings()"></b-form-checkbox>
                 </b-form-group>
             </div>
             <div class="row" style="margin-top: 1vh; min-width: 300px">
@@ -524,6 +524,7 @@ let SETTINGS_COOKIE_NAME = "shopping_settings"
 import {Workbox} from 'workbox-window';
 import BottomNavigationBar from "@/components/BottomNavigationBar.vue";
 import {useShoppingListStore} from "@/stores/ShoppingListStore";
+import {useUserPreferenceStore} from "@/stores/UserPreferenceStore";
 
 export default {
     name: "ShoppingListView",
@@ -596,7 +597,8 @@ export default {
             add_recipe_servings: 1,
             shopping_list_height: '60vh',
 
-            shopping_list_store: useShoppingListStore()
+            shopping_list_store: useShoppingListStore(),
+            user_preference_store: useUserPreferenceStore(),
         }
     },
     computed: {
@@ -676,9 +678,10 @@ export default {
             return groups
         },
         csvData() {
-            return this.items.map((x) => {
-                return {amount: x.amount, unit: x.unit?.name ?? "", food: x.food?.name ?? ""}
-            })
+            // return this.items.map((x) => {
+            //     return {amount: x.amount, unit: x.unit?.name ?? "", food: x.food?.name ?? ""}
+            // })
+            return []
         },
         defaultDelay() {
             return Number(getUserPreference("default_delay")) || 2
@@ -718,54 +721,17 @@ export default {
         supermarket_categories() {
             return this.shopping_categories
         },
-        notsupermarket_categories() {
-            let supercats = this.new_supermarket.value.category_to_supermarket
-                .map((x) => x.category)
-                .flat()
-                .map((x) => x.id)
 
-            return this.shopping_categories
-                .filter((x) => !supercats.includes(x.id))
-                .map((x) => {
-                    return {
-                        id: Math.random(),
-                        category: x,
-                    }
-                })
-        },
     },
     watch: {
-        ui: {
-            handler() {
-                this.$cookies.set(SETTINGS_COOKIE_NAME, {ui: this.ui, settings: {entrymode: this.entrymode}}, "100y")
-                if (this.entrymode) {
-                    this.$nextTick(function () {
-                        this.setFocus()
-                    })
-                }
-            },
-            deep: true,
-        },
-        entrymode: {
-            handler() {
-                this.$cookies.set(SETTINGS_COOKIE_NAME, {ui: this.ui, settings: {entrymode: this.entrymode}}, "100y")
-                if (this.entrymode) {
-                    //document.getElementById('shoppinglist').scrollTop = 0
-                    this.$nextTick(function () {
-                        this.setFocus()
-                    })
-                }
-            }
-        },
+
         new_recipe: {
             handler() {
                 this.add_recipe_servings = this.new_recipe.servings
             },
             deep: true,
         },
-        "settings.filter_to_supermarket": function (newVal, oldVal) {
-            this.supermarket_categories_only = this.settings.filter_to_supermarket
-        },
+
         "settings.shopping_auto_sync": function (newVal, oldVal) {
             clearInterval(this.autosync_id)
             this.autosync_id = undefined
@@ -787,31 +753,18 @@ export default {
             }
 
         },
-        "settings.default_delay": function (newVal, oldVal) {
-            this.delay = Number(newVal)
-        },
-        "ui.selected_supermarket": function (newVal, oldVal) {
-            this.supermarket_categories_only = this.settings.filter_to_supermarket
-        },
+
     },
     mounted() {
-        this.getShoppingList()
+        //this.getShoppingList()
         this.getSupermarkets()
         this.getShoppingCategories()
 
-        this.settings = getUserPreference()
-        this.delay = Number(this.settings.default_delay || 4)
-        this.supermarket_categories_only = this.settings.filter_to_supermarket
         if (this.settings.shopping_auto_sync) {
             window.addEventListener("online", this.updateOnlineStatus)
             window.addEventListener("offline", this.updateOnlineStatus)
         }
-        this.$nextTick(function () {
-            if (this.$cookies.isKey(SETTINGS_COOKIE_NAME)) {
-                this.ui = Object.assign({}, this.ui, this.$cookies.get(SETTINGS_COOKIE_NAME).ui)
-                this.entrymode = this.$cookies.get(SETTINGS_COOKIE_NAME).settings.entrymode
-            }
-        })
+
         this.$i18n.locale = window.CUSTOM_LOCALE
 
         this.shopping_list_store.refreshFromAPI()
diff --git a/vue/src/components/ShoppingLineItem.vue b/vue/src/components/ShoppingLineItem.vue
index ffddc206..4583d7c2 100644
--- a/vue/src/components/ShoppingLineItem.vue
+++ b/vue/src/components/ShoppingLineItem.vue
@@ -1,7 +1,7 @@
 <template>
     <div id="shopping_line_item">
 
-        <b-button-group class="w-100" v-if="(useShoppingListStore().show_checked_entries || !is_checked) && !is_delayed">
+        <b-button-group class="w-100" v-if="(useUserPreferenceStore().device_settings.shopping_show_checked_entries || !is_checked) && (useUserPreferenceStore().device_settings.shopping_show_delayed_entries || !is_delayed)">
             <b-button :class="{'btn-dark': (!is_checked && !is_delayed), 'btn-success': is_checked, 'btn-warning': is_delayed}" block class="btn btn-block text-left" @click="detail_modal_visible = true">
                 <div class="d-flex ">
                     <div class="d-flex flex-column pr-2" v-if="Object.keys(amounts).length> 0">
@@ -95,6 +95,7 @@ import {ApiMixin, resolveDjangoUrl, StandardToasts} from "@/utils/utils"
 import {useMealPlanStore} from "@/stores/MealPlanStore";
 import {useShoppingListStore} from "@/stores/ShoppingListStore";
 import {ApiApiFactory} from "@/utils/openapi/api";
+import {useUserPreferenceStore} from "@/stores/UserPreferenceStore";
 
 
 Vue.use(BootstrapVue)
@@ -224,6 +225,7 @@ export default {
 
     },
     methods: {
+        useUserPreferenceStore,
         useShoppingListStore,
         resolveDjangoUrl,
 
diff --git a/vue/src/locales/en.json b/vue/src/locales/en.json
index ada615ec..2cc0af10 100644
--- a/vue/src/locales/en.json
+++ b/vue/src/locales/en.json
@@ -291,7 +291,8 @@
     "Warning": "Warning",
     "NoCategory": "No category selected.",
     "InheritWarning": "{food} is set to inherit, changes may not persist.",
-    "ShowDelayed": "Show Delayed Items",
+    "ShowDelayed": "Show delayed items",
+    "ShowCompleted": "Show completed items",
     "Completed": "Completed",
     "OfflineAlert": "You are offline, shopping list may not syncronize.",
     "shopping_share": "Share Shopping List",
@@ -448,8 +449,9 @@
     "show_ingredient_overview": "Display a list of all ingredients at the start of the recipe.",
     "Ingredient Overview": "Ingredient Overview",
     "last_viewed": "Last Viewed",
-    "created_on": "Created On",
-    "updatedon": "Updated On",
+    "created_on": "Created on",
+    "created_by": "Created by",
+    "updatedon": "Updated on",
     "Imported_From": "Imported from",
     "advanced_search_settings": "Advanced Search Settings",
     "nothing_planned_today": "You have nothing planned for today!",
diff --git a/vue/src/stores/ShoppingListStore.js b/vue/src/stores/ShoppingListStore.js
index a0be612e..5d4fa6ba 100644
--- a/vue/src/stores/ShoppingListStore.js
+++ b/vue/src/stores/ShoppingListStore.js
@@ -3,9 +3,9 @@ import {StandardToasts} from "@/utils/utils"
 import {defineStore} from "pinia"
 import Vue from "vue"
 import _ from 'lodash';
+import {useUserPreferenceStore} from "@/stores/UserPreferenceStore";
 
 const _STORE_ID = "shopping_list_store"
-const _LOCAL_STORAGE_KEY = "SHOPPING_LIST_CLIENT_SETTINGS"
 /*
  * test store to play around with pinia and see if it can work for my use cases
  * don't trust that all shopping list entries are in store as there is no cache validation logic, its just a shared data holder
@@ -17,22 +17,15 @@ export const useShoppingListStore = defineStore(_STORE_ID, {
         supermarket_categories: [],
         supermarkets: [],
 
-        //settings
-        show_checked_entries: false, // TODO move to settings
-        show_delayed_entries: false,
-        show_selected_supermarket_only: false,
-        selected_supermarket: null,
-        selected_group: 'food.supermarket_category.name',
-
         // internal
         currently_updating: false,
-        settings: null,
 
         // constants
         GROUP_CATEGORY: 'food.supermarket_category.name',
         GROUP_CREATED_BY: 'created_by.display_name',
         GROUP_RECIPE: 'recipe_mealplan.recipe_name',
         GROUP_MEALPLAN: 'recipe_mealplan.mealplan', //TODO give this some name from the API
+
         UNDEFINED_CATEGORY: 'shopping_undefined_category'
     }),
     getters: {
@@ -44,23 +37,24 @@ export const useShoppingListStore = defineStore(_STORE_ID, {
         get_entries_by_group: function () {
             let structure = {}
             let ordered_structure = []
+
             for (let i in this.entries) {
-                structure = this.updateEntryInStructure(structure, this.entries[i], this.selected_group)
+                structure = this.updateEntryInStructure(structure, this.entries[i], useUserPreferenceStore().device_settings.shopping_selected_grouping)
             }
 
-            if (this.selected_group === this.GROUP_CATEGORY && this.selected_supermarket !== null) {
+            if (useUserPreferenceStore().device_settings.shopping_selected_grouping === this.GROUP_CATEGORY && useUserPreferenceStore().device_settings.shopping_selected_supermarket !== null) {
                 if (this.UNDEFINED_CATEGORY in structure) {
                     ordered_structure.push(structure[this.UNDEFINED_CATEGORY])
                     Vue.delete(structure, this.UNDEFINED_CATEGORY)
                 }
 
-                for (let c of this.selected_supermarket.category_to_supermarket) {
+                for (let c of useUserPreferenceStore().device_settings.shopping_selected_supermarket.category_to_supermarket) {
                     if (c.category.name in structure) {
                         ordered_structure.push(structure[c.category.name])
                         Vue.delete(structure, c.category.name)
                     }
                 }
-                if (!this.show_selected_supermarket_only) {
+                if (!useUserPreferenceStore().device_settings.shopping_show_selected_supermarket_only) {
                     for (let i in structure) {
                         ordered_structure.push(structure[i])
                     }
@@ -74,19 +68,17 @@ export const useShoppingListStore = defineStore(_STORE_ID, {
             return ordered_structure
         },
 
-        client_settings: function () {
-            if (this.settings === null) {
-                this.settings = this.loadClientSettings()
-            }
-            return this.settings
-        },
+        grouping_options: function () {
+            return [{'id': this.GROUP_CATEGORY, 'translatable_label': 'Category'}, {'id': this.GROUP_CREATED_BY, 'translatable_label': 'created_by'}, {'id': this.GROUP_RECIPE, 'translatable_label': 'Recipe'}]
+        }
+
     },
     actions: {
+        // TODO implement shopping list recipes
+        /**
+         * Retrieves all shopping related data (shopping list entries, supermarkets, supermarket categories and shopping list recipes) from API
+         */
         refreshFromAPI() {
-            /**
-             * Retrieves all shopping list entries from the API and parses them into a structured object category > food > entry
-             */
-
             if (!this.currently_updating) {
                 this.currently_updating = true
                 let apiClient = new ApiApiFactory()
@@ -112,6 +104,12 @@ export const useShoppingListStore = defineStore(_STORE_ID, {
                 })
             }
         },
+        /**
+         * Create a new shopping list entry
+         * adds new entry to store
+         * @param object entry object to create
+         * @return {Promise<T | void>} promise of creation call to subscribe to
+         */
         createObject(object) {
             let apiClient = new ApiApiFactory()
 
@@ -123,6 +121,12 @@ export const useShoppingListStore = defineStore(_STORE_ID, {
                 StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE, err)
             })
         },
+        /**
+         * update existing entry object
+         * updates data in store
+         * @param object entry object to update
+         * @return {Promise<T | void>} promise of updating call to subscribe to
+         */
         updateObject(object) {
             let apiClient = new ApiApiFactory()
             return apiClient.updateShoppingListEntry(object.id, object).then((r) => {
@@ -131,6 +135,11 @@ export const useShoppingListStore = defineStore(_STORE_ID, {
                 StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE, err)
             })
         },
+        /**
+         * delete shopping list entry object from DB and store
+         * @param object entry object to delete
+         * @return {Promise<T | void>} promise of delete call to subscribe to
+         */
         deleteObject(object) {
             let apiClient = new ApiApiFactory()
             return apiClient.destroyShoppingListEntry(object.id).then((r) => {
@@ -139,25 +148,7 @@ export const useShoppingListStore = defineStore(_STORE_ID, {
                 StandardToasts.makeStandardToast(this, StandardToasts.FAIL_DELETE, err)
             })
         },
-        updateClientSettings(settings) {
-            // this.settings = settings
-            // localStorage.setItem(_LOCAL_STORAGE_KEY, JSON.stringify(this.settings))
-        },
-        loadClientSettings() {
-            // let s = localStorage.getItem(_LOCAL_STORAGE_KEY)
-            // if (s === null || s === {}) {
-            //     return {
-            //         displayPeriodUom: "week",
-            //         displayPeriodCount: 3,
-            //         startingDayOfWeek: 1,
-            //         displayWeekNumbers: true,
-            //     }
-            // } else {
-            //     return JSON.parse(s)
-            // }
-        },
-
-        // concenience methods
+        // convenience methods
         /**
          * function to set entry to its proper place in the data structure to perform grouping
          * @param {{}} structure datastructure
diff --git a/vue/src/stores/UserPreferenceStore.js b/vue/src/stores/UserPreferenceStore.js
index dbb3939e..5972a33d 100644
--- a/vue/src/stores/UserPreferenceStore.js
+++ b/vue/src/stores/UserPreferenceStore.js
@@ -2,19 +2,61 @@ import {defineStore} from 'pinia'
 
 
 import {ApiApiFactory} from "@/utils/openapi/api";
+import Vue from "vue";
 
 const _STALE_TIME_IN_MS = 1000 * 30
 const _STORE_ID = 'user_preference_store'
+
+const _LOCAL_STORAGE_KEY = 'TANDOOR_LOCAL_SETTINGS'
+
+
 export const useUserPreferenceStore = defineStore(_STORE_ID, {
     state: () => ({
         data: null,
         updated_at: null,
         currently_updating: false,
+
+        device_settings_initialized: false,
+        device_settings: {
+            // shopping
+            shopping_show_checked_entries: false,
+            shopping_show_delayed_entries: false,
+            shopping_show_selected_supermarket_only: false,
+            shopping_selected_grouping: 'food.supermarket_category.name',
+            shopping_selected_supermarket: null,
+        },
     }),
     getters: {
-
+        get_device_settings: function () {
+            if (!this.device_settings_initialized) {
+                // stupid hack to initialize device settings variable when store loads
+                this.loadDeviceSettings()
+                this.device_settings_initialized = true
+            }
+            return this.device_settings
+        }
     },
     actions: {
+        // Device settings (on device settings stored in local storage)
+        /**
+         * Load device settings from local storage and update state device_settings
+         */
+        loadDeviceSettings() {
+            let s = localStorage.getItem(_LOCAL_STORAGE_KEY)
+            if (!(s === null || s === {})) {
+                let settings = JSON.parse(s)
+                for (s in settings) {
+                    Vue.set(this.device_settings, s, settings[s])
+                }
+            }
+        },
+        /**
+         * persist changes to device settings into local storage
+         */
+        updateDeviceSettings: function () {
+            localStorage.setItem(_LOCAL_STORAGE_KEY, JSON.stringify(this.device_settings))
+        },
+        // User Preferences (database settings stored in user preference model)
         /**
          * gets data from the store either directly or refreshes from API if data is considered stale
          * @returns {UserPreference|*|Promise<axios.AxiosResponse<UserPreference>>}
@@ -69,7 +111,7 @@ export const useUserPreferenceStore = defineStore(_STORE_ID, {
          */
         refreshFromAPI() {
             let apiClient = new ApiApiFactory()
-            if(!this.currently_updating){
+            if (!this.currently_updating) {
                 this.currently_updating = true
                 return apiClient.retrieveUserPreference(localStorage.getItem('USER_ID')).then(r => {
                     this.data = r.data