diff --git a/vue3/src/components/display/ShoppingListView.vue b/vue3/src/components/display/ShoppingListView.vue
index 1ff3daf05..929986de3 100644
--- a/vue3/src/components/display/ShoppingListView.vue
+++ b/vue3/src/components/display/ShoppingListView.vue
@@ -26,8 +26,9 @@
                     <v-select hide-details :items="groupingOptionsItems" v-model="useUserPreferenceStore().deviceSettings.shopping_selected_grouping" :label="$t('GroupBy')">
                     </v-select>
                 </v-list-item>
-                 <v-list-item v-if="useUserPreferenceStore().deviceSettings.shopping_selected_grouping == ShoppingGroupingOptions.CATEGORY">
-                    <v-switch color="primary" hide-details :label="$t('SupermarketCategoriesOnly')" v-model="useUserPreferenceStore().deviceSettings.shopping_show_selected_supermarket_only"></v-switch>
+                <v-list-item v-if="useUserPreferenceStore().deviceSettings.shopping_selected_grouping == ShoppingGroupingOptions.CATEGORY">
+                    <v-switch color="primary" hide-details :label="$t('SupermarketCategoriesOnly')"
+                              v-model="useUserPreferenceStore().deviceSettings.shopping_show_selected_supermarket_only"></v-switch>
                 </v-list-item>
                 <v-list-item>
                     <model-select model="Supermarket" v-model="useUserPreferenceStore().deviceSettings.shopping_selected_supermarket"></model-select>
@@ -122,21 +123,32 @@
             </v-container>
         </v-window-item>
         <v-window-item value="recipes">
-            <v-card>
-                <v-card-title>{{ $t('Recipes') }}</v-card-title>
-                <v-card-text>
+            <v-container>
+                <v-row>
+                    <v-col>
+                        <v-card>
+                            <v-card-title>{{ $t('Recipes') }}</v-card-title>
+                            <v-card-text>
 
-                    <v-label>{{ $t('Add_to_Shopping') }}</v-label>
-                    <ModelSelect model="Recipe"></ModelSelect>
+                                <v-label>{{ $t('Add_to_Shopping') }}</v-label>
+                                <ModelSelect model="Recipe"></ModelSelect>
+
+                                <v-label>{{ $t('Recipes') }}</v-label>
+                                <v-list>
+                                    <v-list-item v-for="r in useShoppingStore().getAssociatedRecipes()">
+                                        {{ r.recipeName }}
+                                        <template #append>
+                                            <v-btn icon="$delete" color="delete"></v-btn>
+                                            <number-scaler-dialog ></number-scaler-dialog>
+                                        </template>
+                                    </v-list-item>
+                                </v-list>
+                            </v-card-text>
+                        </v-card>
+                    </v-col>
+                </v-row>
+            </v-container>
 
-                    <v-label>{{ $t('Recipes') }}</v-label>
-                    <v-list>
-                        <v-list-item v-for="r in useShoppingStore().getAssociatedRecipes()">
-                            {{ r }}
-                        </v-list-item>
-                    </v-list>
-                </v-card-text>
-            </v-card>
         </v-window-item>
     </v-window>
 
@@ -156,6 +168,7 @@ import ModelSelect from "@/components/inputs/ModelSelect.vue";
 import ShoppingLineItemDialog from "@/components/dialogs/ShoppingLineItemDialog.vue";
 import {IShoppingListFood, ShoppingGroupingOptions} from "@/types/Shopping";
 import {useI18n} from "vue-i18n";
+import NumberScalerDialog from "@/components/inputs/NumberScalerDialog.vue";
 
 const {t} = useI18n()
 
diff --git a/vue3/src/stores/ShoppingStore.ts b/vue3/src/stores/ShoppingStore.ts
index 4c49496ce..82e22e5d1 100644
--- a/vue3/src/stores/ShoppingStore.ts
+++ b/vue3/src/stores/ShoppingStore.ts
@@ -1,5 +1,5 @@
 import {acceptHMRUpdate, defineStore} from "pinia"
-import {ApiApi, Food, ShoppingListEntry, ShoppingListEntryBulk, Supermarket, SupermarketCategory} from "@/openapi";
+import {ApiApi, Food, Recipe, ShoppingListEntry, ShoppingListEntryBulk, ShoppingListRecipe, Supermarket, SupermarketCategory} from "@/openapi";
 import {computed, ref} from "vue";
 import {
     IShoppingExportEntry,
@@ -261,26 +261,17 @@ export const useShoppingStore = defineStore(_STORE_ID, () => {
         })
     }
 
-//TODO fix/verify for typescript
     /**
      * returns a distinct list of recipes associated with unchecked shopping list entries
      */
     function getAssociatedRecipes() {
-        let recipes = {} // TODO this needs a type
+        let recipes = [] as ShoppingListRecipe[]
 
-        for (let i in this.entries) {
-            let e = this.entries[i]
-            if (e.recipe_mealplan !== null) {
-                recipes[e.recipe_mealplan.recipe] = {
-                    'shopping_list_recipe_id': e.list_recipe,
-                    'recipe_id': e.recipe_mealplan.recipe,
-                    'recipe_name': e.recipe_mealplan.recipe_name,
-                    'servings': e.recipe_mealplan.servings,
-                    'mealplan_from_date': e.recipe_mealplan.mealplan_from_date,
-                    'mealplan_type': e.recipe_mealplan.mealplan_type,
-                }
+        entries.value.forEach(e => {
+            if(e.recipeMealplan != null && recipes.findIndex(x => x.id == e.recipeMealplan.id) == -1){
+                recipes.push(e.recipeMealplan)
             }
-        }
+        })
 
         return recipes
     }