diff --git a/vue3/src/components/dialogs/AddToShoppingDialog.vue b/vue3/src/components/dialogs/AddToShoppingDialog.vue
index 950188427..771064d37 100644
--- a/vue3/src/components/dialogs/AddToShoppingDialog.vue
+++ b/vue3/src/components/dialogs/AddToShoppingDialog.vue
@@ -14,12 +14,12 @@
                                         <v-checkbox-btn v-model="e.checked" color="success"></v-checkbox-btn>
                                     </td>
                                     <td style="width: 1%; text-wrap: nowrap" class="pr-1"
-                                        v-html="calculateFoodAmount(e.amount, 1, useUserPreferenceStore().userSettings.useFractions)"></td>
+                                        v-html="calculateFoodAmount(e.amount, ingredientFactor, useUserPreferenceStore().userSettings.useFractions)"></td>
                                     <td style="width: 1%; text-wrap: nowrap" class="pr-1">
-                                        <template v-if="e.unit"> {{ e.unit.name }}</template>
+                                        <template v-if="e.unit"> {{ ingredientToUnitString(e.ingredient, ingredientFactor) }}</template>
                                     </td>
                                     <td>
-                                        <template v-if="e.food"> {{ e.food.name }}</template>
+                                        <template v-if="e.food"> {{ ingredientToFoodString(e.ingredient, ingredientFactor) }}</template>
                                     </td>
                                 </tr>
                                 </tbody>
@@ -38,13 +38,14 @@
 
 <script setup lang="ts">
 
-import {onMounted, PropType, ref} from "vue";
+import {computed, onMounted, PropType, ref} from "vue";
 import VClosableCardTitle from "@/components/dialogs/VClosableCardTitle.vue";
 import {ApiApi, Recipe, RecipeFlat, RecipeOverview, type ShoppingListEntryBulkCreate, ShoppingListRecipe} from "@/openapi";
 import {ErrorMessageType, PreparedMessage, useMessageStore} from "@/stores/MessageStore";
 import {ShoppingDialogRecipe, ShoppingDialogRecipeEntry} from "@/types/Shopping";
 import {calculateFoodAmount} from "@/utils/number_utils";
 import {useUserPreferenceStore} from "@/stores/UserPreferenceStore";
+import {ingredientToUnitString, ingredientToFoodString} from "@/utils/model_utils.ts";
 
 const props = defineProps({
     recipe: {type: Object as PropType<Recipe | RecipeFlat | RecipeOverview>, required: true},
@@ -60,6 +61,10 @@ const relatedRecipes = ref([] as Recipe[])
 
 const dialogRecipes = ref([] as ShoppingDialogRecipe[])
 
+const ingredientFactor = computed(() => {
+    return servings.value / ((recipe.value.servings != undefined) ? recipe.value.servings : 1)
+})
+
 onMounted(() => {
     loadRecipeData()
 })
diff --git a/vue3/src/components/display/IngredientsTable.vue b/vue3/src/components/display/IngredientsTable.vue
index 944df01b1..62a01e636 100644
--- a/vue3/src/components/display/IngredientsTable.vue
+++ b/vue3/src/components/display/IngredientsTable.vue
@@ -36,12 +36,13 @@
                 <td style="width: 1%; text-wrap: nowrap" class="pa-0" v-if="showCheckbox">
                     <v-checkbox-btn v-model="i.checked" color="success" v-if="!i.isHeader"></v-checkbox-btn>
                 </td>
-                <td style="width: 1%; text-wrap: nowrap" class="pr-1" v-html="calculateFoodAmount(i.amount, props.ingredientFactor, useUserPreferenceStore().userSettings.useFractions)"></td>
+                <td style="width: 1%; text-wrap: nowrap" class="pr-1" v-html="calculateFoodAmount(i.amount, props.ingredientFactor, useUserPreferenceStore().userSettings.useFractions)" v-if="!i.noAmount"></td>
+                <td style="width: 1%; text-wrap: nowrap" class="pr-1" v-if="i.noAmount"></td>
                 <td style="width: 1%; text-wrap: nowrap" class="pr-1">
-                    <template v-if="i.unit"> {{ i.unit.name }}</template>
+                    <template v-if="i.unit"> {{ ingredientToUnitString(i, ingredientFactor) }}</template>
                 </td>
                 <td>
-                    <template v-if="i.food"> {{ i.food.name }}</template>
+                    <template v-if="i.food"> {{ ingredientToFoodString(i, ingredientFactor) }}</template>
                 </td>
 
                 <td style="width: 1%; text-wrap: nowrap">
@@ -61,6 +62,7 @@ import {Ingredient} from "@/openapi";
 import {computed} from "vue";
 import {calculateFoodAmount} from "../../utils/number_utils";
 import {useUserPreferenceStore} from "../../stores/UserPreferenceStore";
+import {ingredientToFoodString, ingredientToUnitString} from "@/utils/model_utils.ts";
 
 const ingredients = defineModel<Ingredient[]>({required: true})
 
diff --git a/vue3/src/utils/model_utils.ts b/vue3/src/utils/model_utils.ts
index 36351200a..9ec6dc9d6 100644
--- a/vue3/src/utils/model_utils.ts
+++ b/vue3/src/utils/model_utils.ts
@@ -15,10 +15,10 @@ export function ingredientToString(ingredient: Ingredient) {
         content.push(ingredient.amount)
     }
     if (ingredient.unit) {
-        content.push(ingredient.unit.name)
+        content.push(ingredientToUnitString(ingredient, 1))
     }
     if (ingredient.food) {
-        content.push(ingredient.food.name)
+        content.push(ingredientToFoodString(ingredient, 1))
     }
     if (ingredient.note) {
         content.push(`(${ingredient.note})`)
@@ -26,6 +26,49 @@ export function ingredientToString(ingredient: Ingredient) {
     return content.join(' ')
 }
 
+/**
+ * returns the food string from an ingredient, pluralizing if necessary
+ * @param ingredient
+ * @param ingredientFactor
+ * @return food string or empty string if no food is available for the given ingredient
+ */
+export function ingredientToFoodString(ingredient: Ingredient, ingredientFactor: number) {
+    if (ingredient.food) {
+        if (ingredient.food.pluralName == '' || ingredient.food.pluralName == undefined || ingredient.noAmount) {
+            return ingredient.food.name
+        } else {
+            if (ingredient.alwaysUsePluralFood || ingredient.amount * ingredientFactor > 1) {
+                return ingredient.food.pluralName
+            } else {
+                return ingredient.food.name
+            }
+        }
+    } else {
+        return ''
+    }
+}
+
+/**
+ * returns the unit name from an ingredient, pluralizing if necessary
+ * @param ingredient
+ * @param ingredientFactor
+ * @return unit name or empty string if no food is available for the given ingredient
+ */
+export function ingredientToUnitString(ingredient: Ingredient, ingredientFactor: number) {
+    if (ingredient.unit) {
+        if (ingredient.unit.pluralName == '' || ingredient.unit.pluralName == undefined || ingredient.noAmount) {
+            return ingredient.unit.name
+        } else {
+            if (ingredient.alwaysUsePluralUnit || ingredient.amount * ingredientFactor > 1) {
+                return ingredient.unit.pluralName
+            } else {
+                return ingredient.unit.name
+            }
+        }
+    } else {
+        return ''
+    }
+}
 
 /**
  * returns a list of all ingredients used by the given recipe