diff --git a/vue/src/apps/ShoppingListView/ShoppingListView.vue b/vue/src/apps/ShoppingListView/ShoppingListView.vue
index b616ddea4..02349f523 100644
--- a/vue/src/apps/ShoppingListView/ShoppingListView.vue
+++ b/vue/src/apps/ShoppingListView/ShoppingListView.vue
@@ -52,20 +52,19 @@
                 </b-row>
 
                 <!-- shopping list table -->
-
                 <b-row v-for="c in shopping_list_store.get_entries_by_group" v-bind:key="c.id" class="pr-1 pl-1">
                     <b-col cols="12">
                         <b-button-group class="w-100 mt-1">
                             <b-button variant="light" block class="btn btn-block text-left">
-                                <span v-if="c.name === -1">{{ $t('Undefined') }}</span>
+                                <span v-if="c.name === shopping_list_store.UNDEFINED_CATEGORY">{{ $t('Undefined') }}</span>
                                 <span v-else>{{ c.name }}</span>
                             </b-button>
                             <b-button variant="success"><i class="fas fa-check"></i></b-button> <!-- todo implement -->
                         </b-button-group>
 
                         <span v-for="f in c.foods" v-bind:key="f.id">
-                                            <shopping-line-item :entries="f['entries']" class="mt-1"/>
-                                        </span>
+                            <shopping-line-item :entries="f['entries']" class="mt-1"/>
+                        </span>
                     </b-col>
                 </b-row>
 
@@ -371,8 +370,9 @@
                     <b-form-select v-model="group_by" :options="group_by_choices" size="sm"></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">
-                    <b-form-select v-model="ui.selected_supermarket" :options="supermarkets" text-field="name"
-                                   value-field="id" size="sm"></b-form-select>
+                    <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>-->
                 </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"
@@ -814,8 +814,7 @@ export default {
         })
         this.$i18n.locale = window.CUSTOM_LOCALE
 
-        let store = useShoppingListStore()
-        store.refreshFromAPI()
+        this.shopping_list_store.refreshFromAPI()
     },
     methods: {
         useShoppingListStore,
@@ -951,32 +950,32 @@ export default {
             } else {
                 this.loading = true
             }
-            this.genericAPI(this.Models.SHOPPING_LIST, this.Actions.LIST, params).then((results) => {
-                if (!autosync) {
-                    if (results.data?.length) {
-                        this.items = results.data
-                    } else {
-                        console.log("no data returned")
-                    }
-                    this.loading = false
-                } else {
-                    if (!this.auto_sync_blocked) {
-                        this.getSyncQueueLength().then((r) => {
-                            if (r === 0) {
-                                this.mergeShoppingList(results.data)
-                            } else {
-                                this.auto_sync_running = false
-                                this.replaySyncQueue()
-                            }
-                        })
-                    }
-                }
-            })
-                .catch((err) => {
-                    if (!autosync) {
-                        StandardToasts.makeStandardToast(this, StandardToasts.FAIL_FETCH, err)
-                    }
-                })
+            // this.genericAPI(this.Models.SHOPPING_LIST, this.Actions.LIST, params).then((results) => {
+            //     if (!autosync) {
+            //         if (results.data?.length) {
+            //             this.items = results.data
+            //         } else {
+            //             console.log("no data returned")
+            //         }
+            //         this.loading = false
+            //     } else {
+            //         if (!this.auto_sync_blocked) {
+            //             this.getSyncQueueLength().then((r) => {
+            //                 if (r === 0) {
+            //                     this.mergeShoppingList(results.data)
+            //                 } else {
+            //                     this.auto_sync_running = false
+            //                     this.replaySyncQueue()
+            //                 }
+            //             })
+            //         }
+            //     }
+            // })
+            //     .catch((err) => {
+            //         if (!autosync) {
+            //             StandardToasts.makeStandardToast(this, StandardToasts.FAIL_FETCH, err)
+            //         }
+            //     })
         },
         getSupermarkets: function () {
             let api = new ApiApiFactory()
diff --git a/vue/src/components/ShoppingLineItem.vue b/vue/src/components/ShoppingLineItem.vue
index ba3078390..ffddc206b 100644
--- a/vue/src/components/ShoppingLineItem.vue
+++ b/vue/src/components/ShoppingLineItem.vue
@@ -31,7 +31,8 @@
             </template>
 
             <template #default>
-                <h6 class="mt-2">{{ $t('Quick actions') }}</h6>
+                <h5 class="mt-2">{{ $t('Quick actions') }}</h5>
+                {{ $t('Category')}}
                 <b-form-select
                     class="form-control mb-2"
                     :options="useShoppingListStore().supermarket_categories"
@@ -41,9 +42,10 @@
                     @change="detail_modal_visible = false; updateFoodCategory(food)"
                 ></b-form-select>
 
-                <b-button variant="success" block @click="detail_modal_visible = false;"> {{ $t("Edit_Food") }}</b-button>  <!-- TODO implement -->
+                <!-- TODO implement -->
+<!--                <b-button variant="success" block @click="detail_modal_visible = false;"> {{ $t("Edit_Food") }}</b-button>  -->
 
-                <b-button variant="info" block @click="detail_modal_visible = false;useShoppingListStore().delayEntries(entries)">{{ $t('Delay') }}</b-button>
+                <b-button variant="info" block @click="detail_modal_visible = false;useShoppingListStore().delayEntries(entries)">{{ $t('Shop_later') }}</b-button>
 
 
                 <h6 class="mt-2">{{ $t('Entries') }}</h6>
diff --git a/vue/src/locales/en.json b/vue/src/locales/en.json
index 846887abe..ada615ecd 100644
--- a/vue/src/locales/en.json
+++ b/vue/src/locales/en.json
@@ -67,6 +67,7 @@
     "Step_Type": "Step Type",
     "Make_Header": "Make Header",
     "Make_Ingredient": "Make Ingredient",
+    "Shop_later": "Shop later",
     "Amount": "Amount",
     "Enable_Amount": "Enable Amount",
     "Disable_Amount": "Disable Amount",
diff --git a/vue/src/stores/ShoppingListStore.js b/vue/src/stores/ShoppingListStore.js
index 7d7182aac..a0be612ee 100644
--- a/vue/src/stores/ShoppingListStore.js
+++ b/vue/src/stores/ShoppingListStore.js
@@ -12,32 +12,66 @@ const _LOCAL_STORAGE_KEY = "SHOPPING_LIST_CLIENT_SETTINGS"
  * */
 export const useShoppingListStore = defineStore(_STORE_ID, {
     state: () => ({
+        // shopping data
         entries: {},
-
-        category_food_entries: {},
         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
-
-        selected_group: 'food.supermarket_category.name',
+        UNDEFINED_CATEGORY: 'shopping_undefined_category'
     }),
     getters: {
-
+        /**
+         * build a multi-level data structure ready for display from shopping list entries
+         * group by selected grouping key
+         * @return {{}}
+         */
         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)
             }
-            return structure
+
+            if (this.selected_group === this.GROUP_CATEGORY && this.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) {
+                    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) {
+                    for (let i in structure) {
+                        ordered_structure.push(structure[i])
+                    }
+                }
+            } else {
+                for (let i in structure) {
+                    ordered_structure.push(structure[i])
+                }
+            }
+
+            return ordered_structure
         },
 
         client_settings: function () {
@@ -52,8 +86,6 @@ export const useShoppingListStore = defineStore(_STORE_ID, {
             /**
              * Retrieves all shopping list entries from the API and parses them into a structured object category > food > entry
              */
-            this.category_food_entries = {}
-            Vue.set(this.category_food_entries, -1, {'id': -1, 'name': '', foods: {}})
 
             if (!this.currently_updating) {
                 this.currently_updating = true
@@ -72,6 +104,12 @@ export const useShoppingListStore = defineStore(_STORE_ID, {
                 }).catch((err) => {
                     StandardToasts.makeStandardToast(this, StandardToasts.FAIL_FETCH, err)
                 })
+
+                apiClient.listSupermarkets().then(r => {
+                    this.supermarkets = r.data
+                }).catch((err) => {
+                    StandardToasts.makeStandardToast(this, StandardToasts.FAIL_FETCH, err)
+                })
             }
         },
         createObject(object) {
@@ -120,15 +158,6 @@ export const useShoppingListStore = defineStore(_STORE_ID, {
         },
 
         // concenience methods
-        getFoodCategory(food) {
-            /**
-             * Get category id from food or return -1 if food has no category
-             */
-            if (food.supermarket_category !== null) {
-                return food.supermarket_category.id
-            }
-            return -1
-        },
         /**
          * function to set entry to its proper place in the data structure to perform grouping
          * @param {{}} structure datastructure
@@ -137,10 +166,10 @@ export const useShoppingListStore = defineStore(_STORE_ID, {
          * @returns updated datastructure including entry
          */
         updateEntryInStructure(structure, entry, group) {
-            let grouping_key = _.get(entry, group, -1)
+            let grouping_key = _.get(entry, group, this.UNDEFINED_CATEGORY)
             // todo handele parent
             if (grouping_key === undefined || grouping_key === null) {
-                grouping_key = -1
+                grouping_key = this.UNDEFINED_CATEGORY
             }
 
             if (!(grouping_key in structure)) {