diff --git a/vue/src/apps/RecipeView/RecipeView.vue b/vue/src/apps/RecipeView/RecipeView.vue
index 98ee617eb..0000d491c 100644
--- a/vue/src/apps/RecipeView/RecipeView.vue
+++ b/vue/src/apps/RecipeView/RecipeView.vue
@@ -76,12 +76,12 @@
                             />
                         </div>
                         <div class="my-auto">
-                            <span class="text-primary"
-                                ><b
-                                    ><template v-if="recipe.servings_text === ''">{{ $t("Servings") }}</template
-                                    ><template v-else>{{ recipe.servings_text }}</template></b
-                                ></span
-                            >
+                            <span class="text-primary">
+                                <b>
+                                    <template v-if="recipe.servings_text === ''">{{ $t("Servings") }}</template>
+                                    <template v-else>{{ recipe.servings_text }}</template>
+                                </b>
+                            </span>
                         </div>
                     </div>
                 </div>
@@ -200,8 +200,8 @@ export default {
         ingredient_factor: function () {
             return this.servings / this.recipe.servings
         },
-        title() {
-            return this.recipe?.steps?.map((x) => x?.ingredients).flat()
+        ingredient_count() {
+            return this.recipe?.steps.map((x) => x.ingredients).flat().length
         },
     },
     data() {
@@ -209,17 +209,20 @@ export default {
             loading: true,
             recipe: undefined,
             rootrecipe: undefined,
-            ingredient_count: 0,
             servings: 1,
+            servings_cache: {},
             start_time: "",
             share_uid: window.SHARE_UID,
         }
     },
-
+    watch: {
+        servings(newVal, oldVal) {
+            this.servings_cache[this.recipe.id] = this.servings
+        },
+    },
     mounted() {
         this.loadRecipe(window.RECIPE_ID)
         this.$i18n.locale = window.CUSTOM_LOCALE
-        console.log(this.recipe)
     },
     methods: {
         loadRecipe: function (recipe_id) {
@@ -227,12 +230,9 @@ export default {
                 if (window.USER_SERVINGS !== 0) {
                     recipe.servings = window.USER_SERVINGS
                 }
-                this.servings = recipe.servings
 
                 let total_time = 0
                 for (let step of recipe.steps) {
-                    this.ingredient_count += step.ingredients.length
-
                     for (let ingredient of step.ingredients) {
                         this.$set(ingredient, "checked", false)
                     }
@@ -247,6 +247,7 @@ export default {
                 }
 
                 this.recipe = this.rootrecipe = recipe
+                this.servings = this.servings_cache[this.rootrecipe.id] = recipe.servings
                 this.loading = false
             })
         },
@@ -265,8 +266,10 @@ export default {
         quickSwitch: function (e) {
             if (e === -1) {
                 this.recipe = this.rootrecipe
+                this.servings = this.servings_cache[this.rootrecipe?.id ?? 1]
             } else {
                 this.recipe = e
+                this.servings = this.servings_cache?.[e.id] ?? e.servings
             }
         },
     },
diff --git a/vue/src/components/Buttons/RecipeSwitcher.vue b/vue/src/components/Buttons/RecipeSwitcher.vue
index ddf6667ec..eae212523 100644
--- a/vue/src/components/Buttons/RecipeSwitcher.vue
+++ b/vue/src/components/Buttons/RecipeSwitcher.vue
@@ -83,7 +83,6 @@ export default {
                     this.$emit("switch", recipe)
                     break
                 case "mealplan":
-                    console.log("navigate to")
                     window.location.href = this.resolveDjangoUrl("view_recipe", recipe.id)
                     break
                 default:
@@ -117,14 +116,21 @@ export default {
                 .then((result) => {
                     let promises = []
                     result.data.forEach((mealplan) => {
-                        this.recipe_list.push(mealplan?.recipe)
+                        this.recipe_list.push({ ...mealplan?.recipe, servings: mealplan?.servings })
+                        const serving_factor = (mealplan?.servings ?? mealplan?.recipe?.servings ?? 1) / (mealplan?.recipe?.servings ?? 1)
                         promises.push(
                             apiClient.relatedRecipe(mealplan?.recipe?.id, { query: { levels: 2 } }).then((r) => {
+                                // scale all recipes to mealplan servings
+                                r.data = r.data.map((x) => {
+                                    return { ...x, factor: serving_factor }
+                                })
                                 this.recipe_list = [...this.recipe_list, ...r.data]
                             })
                         )
                     })
+
                     return Promise.all(promises).then(() => {
+                        console.log(this.recipe_list)
                         let promises = []
                         let dedup = []
                         this.recipe_list.forEach((recipe) => {
@@ -132,6 +138,8 @@ export default {
                                 dedup.push(recipe.id)
                                 promises.push(
                                     apiClient.retrieveRecipe(recipe.id).then((result) => {
+                                        // scale all recipes to mealplan servings
+                                        result.data.servings = recipe?.servings ?? result.data.servings * (recipe?.factor ?? 1)
                                         this.recipes.push(result.data)
                                     })
                                 )
diff --git a/vue/src/components/IngredientComponent.vue b/vue/src/components/IngredientComponent.vue
index 184765c97..595db720b 100644
--- a/vue/src/components/IngredientComponent.vue
+++ b/vue/src/components/IngredientComponent.vue
@@ -108,7 +108,7 @@ export default {
                     this.shop = false // don't check any boxes until user selects a shopping list to edit
                     if (count_shopping_ingredient >= 1) {
                         this.shopping_status = true // ingredient is in the shopping list - probably (but not definitely, this ingredient)
-                    } else if (this.ingredient.food.shopping) {
+                    } else if (this.ingredient?.food?.shopping) {
                         this.shopping_status = null // food is in the shopping list, just not for this ingredient/recipe
                     } else {
                         // food is not in any shopping list
@@ -123,7 +123,7 @@ export default {
                     if (count_shopping_ingredient >= 1) {
                         // ingredient is in this shopping list (not entirely sure how this could happen?)
                         this.shopping_status = true
-                    } else if (count_shopping_ingredient == 0 && this.ingredient.food.shopping) {
+                    } else if (count_shopping_ingredient == 0 && this.ingredient?.food?.shopping) {
                         // food is in the shopping list, just not for this ingredient/recipe
                         this.shopping_status = null
                     } else {