diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInfoCard.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInfoCard.vue
index 962b2c6fa..54e39e86e 100644
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInfoCard.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInfoCard.vue
@@ -35,7 +35,7 @@
                 >
                   <RecipeYield
                     :yield-quantity="recipe.recipeYieldQuantity"
-                    :yield="recipe.recipeYield"
+                    :yield-text="recipe.recipeYield"
                     :scale="recipeScale"
                     class="mb-4"
                   />
diff --git a/frontend/components/Domain/Recipe/RecipePrintView.vue b/frontend/components/Domain/Recipe/RecipePrintView.vue
index c9e0ee9ac..1c8a261fb 100644
--- a/frontend/components/Domain/Recipe/RecipePrintView.vue
+++ b/frontend/components/Domain/Recipe/RecipePrintView.vue
@@ -222,7 +222,7 @@ export default defineNuxtComponent({
 
     const servingsDisplay = computed(() => {
       const { scaledAmountDisplay } = useScaledAmount(props.recipe.recipeYieldQuantity, props.scale);
-      return scaledAmountDisplay
+      return scaledAmountDisplay || props.recipe.recipeYield
         ? i18n.t("recipe.yields-amount-with-text", {
           amount: scaledAmountDisplay,
           text: props.recipe.recipeYield,
diff --git a/frontend/components/Domain/Recipe/RecipeYield.vue b/frontend/components/Domain/Recipe/RecipeYield.vue
index 0ba676a3a..acb34dd7e 100644
--- a/frontend/components/Domain/Recipe/RecipeYield.vue
+++ b/frontend/components/Domain/Recipe/RecipeYield.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    v-if="scaledAmount"
+    v-if="yieldDisplay"
     class="d-flex align-center"
   >
     <v-row
@@ -18,7 +18,7 @@
       <p class="my-0 opacity-80">
         <span class="font-weight-bold">{{ $t("recipe.yield") }}</span><br>
         <!-- eslint-disable-next-line vue/no-v-html -->
-        <span v-html="scaledAmount" /> {{ text }}
+        <span v-html="yieldDisplay" />
       </p>
     </v-row>
   </div>
@@ -34,7 +34,7 @@ export default defineNuxtComponent({
       type: Number,
       default: 0,
     },
-    yield: {
+    yieldText: {
       type: String,
       default: "",
     },
@@ -55,15 +55,24 @@ export default defineNuxtComponent({
       });
     }
 
-    const scaledAmount = computed(() => {
+    const yieldDisplay = computed<string>(() => {
+      const components: string[] = [];
+
       const { scaledAmountDisplay } = useScaledAmount(props.yieldQuantity, props.scale);
-      return scaledAmountDisplay;
+      if (scaledAmountDisplay) {
+        components.push(scaledAmountDisplay);
+      }
+
+      const text = props.yieldText;
+      if (text) {
+        components.push(text);
+      }
+
+      return sanitizeHTML(components.join(" "));
     });
-    const text = sanitizeHTML(props.yield);
 
     return {
-      scaledAmount,
-      text,
+      yieldDisplay,
     };
   },
 });