diff --git a/vue/src/apps/RecipeView/RecipeView.vue b/vue/src/apps/RecipeView/RecipeView.vue
index dbd71ca3b..9a73a5448 100644
--- a/vue/src/apps/RecipeView/RecipeView.vue
+++ b/vue/src/apps/RecipeView/RecipeView.vue
@@ -93,30 +93,7 @@
 
             <div class="row">
                 <div class="col-md-6 order-md-1 col-sm-12 order-sm-2 col-12 order-2" v-if="recipe && ingredient_count > 0">
-                    <div class="card border-primary">
-                        <div class="card-body">
-                            <div class="row">
-                                <div class="col col-md-8">
-                                    <h4 class="card-title"><i class="fas fa-pepper-hot"></i> {{ $t("Ingredients") }}</h4>
-                                </div>
-                            </div>
-                            <br />
-                            <template v-for="s in recipe.steps" v-bind:key="s.id">
-                                <div class="row">
-                                    <div class="col-md-12">
-                                        <template v-if="s.show_as_header && s.name !== '' && s.ingredients.length > 0">
-                                            <b v-bind:key="s.id">{{ s.name }}</b>
-                                        </template>
-                                        <table class="table table-sm">
-                                            <template v-for="i in s.ingredients" :key="i.id">
-                                                <ingredient-component :ingredient="i" :ingredient_factor="ingredient_factor" @checked-state-changed="updateIngredientCheckedState"></ingredient-component>
-                                            </template>
-                                        </table>
-                                    </div>
-                                </div>
-                            </template>
-                        </div>
-                    </div>
+                    <ingredients-card :steps="recipe.steps" :ingredient_factor="ingredient_factor" :servings="servings" :header="true" @checked-state-changed="updateIngredientCheckedState" />
                 </div>
 
                 <div class="col-12 order-1 col-sm-12 order-sm-1 col-md-6 order-md-2">
@@ -173,22 +150,18 @@ import "bootstrap-vue/dist/bootstrap-vue.css"
 
 import { apiLoadRecipe } from "@/utils/api"
 
-import Step from "@/components/StepComponent"
 import RecipeContextMenu from "@/components/RecipeContextMenu"
 import { ResolveUrlMixin, ToastMixin } from "@/utils/utils"
-import Ingredient from "@/components/IngredientComponent"
 
 import PdfViewer from "@/components/PdfViewer"
 import ImageViewer from "@/components/ImageViewer"
-import Nutrition from "@/components/NutritionComponent"
 
 import moment from "moment"
-import Keywords from "@/components/KeywordsComponent"
 import LoadingSpinner from "@/components/LoadingSpinner"
-import AddRecipeToBook from "@/components/AddRecipeToBook"
+import AddRecipeToBook from "@/components/Modals/AddRecipeToBook"
 import RecipeRating from "@/components/RecipeRating"
 import LastCooked from "@/components/LastCooked"
-import IngredientComponent from "@/components/IngredientComponent"
+import IngredientsCard from "@/components/IngredientsCard"
 import StepComponent from "@/components/StepComponent"
 import KeywordsComponent from "@/components/KeywordsComponent"
 import NutritionComponent from "@/components/NutritionComponent"
@@ -205,7 +178,7 @@ export default {
         RecipeRating,
         PdfViewer,
         ImageViewer,
-        IngredientComponent,
+        IngredientsCard,
         StepComponent,
         RecipeContextMenu,
         NutritionComponent,
diff --git a/vue/src/components/MealPlanEditModal.vue b/vue/src/components/MealPlanEditModal.vue
index 7fc8169b4..02353c4ea 100644
--- a/vue/src/components/MealPlanEditModal.vue
+++ b/vue/src/components/MealPlanEditModal.vue
@@ -82,7 +82,7 @@
                                 </b-input-group>
                             </div>
                             <div class="col-lg-6 d-none d-lg-block d-xl-block">
-                                <recipe-card :recipe="entryEditing.recipe" v-if="entryEditing.recipe != null"></recipe-card>
+                                <recipe-card :recipe="entryEditing.recipe" v-if="entryEditing.recipe != null" :detailed="false"></recipe-card>
                             </div>
                         </div>
                         <div class="row mt-3 mb-3">
@@ -93,72 +93,6 @@
                         </div>
                     </div>
                 </div>
-                <div class="row mt-3">
-                    <div class="col-12 col-lg-6 col-xl-6">
-                        <b-form-group>
-                            <generic-multiselect
-                                @change="selectRecipe"
-                                :initial_selection="entryEditing_initial_recipe"
-                                :label="'name'"
-                                :model="Models.RECIPE"
-                                style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
-                                v-bind:placeholder="$t('Recipe')"
-                                :limit="10"
-                                :multiple="false"
-                            ></generic-multiselect>
-                            <small tabindex="-1" class="form-text text-muted">{{ $t("Recipe") }}</small>
-                        </b-form-group>
-                        <b-form-group class="mt-3">
-                            <generic-multiselect
-                                required
-                                @change="selectMealType"
-                                :label="'name'"
-                                :model="Models.MEAL_TYPE"
-                                style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
-                                v-bind:placeholder="$t('Meal_Type')"
-                                :limit="10"
-                                :multiple="false"
-                                :initial_selection="entryEditing_initial_meal_type"
-                                :allow_create="true"
-                                :create_placeholder="$t('Create_New_Meal_Type')"
-                                @new="createMealType"
-                            ></generic-multiselect>
-                            <span class="text-danger" v-if="missing_meal_type">{{ $t("Meal_Type_Required") }}</span>
-                            <small tabindex="-1" class="form-text text-muted" v-if="!missing_meal_type">{{ $t("Meal_Type") }}</small>
-                        </b-form-group>
-                        <b-form-group label-for="NoteInput" :description="$t('Note')" class="mt-3">
-                            <textarea class="form-control" id="NoteInput" v-model="entryEditing.note" :placeholder="$t('Note')"></textarea>
-                        </b-form-group>
-                        <b-input-group>
-                            <b-form-input id="ServingsInput" v-model="entryEditing.servings" :placeholder="$t('Servings')"></b-form-input>
-                        </b-input-group>
-                        <small tabindex="-1" class="form-text text-muted">{{ $t("Servings") }}</small>
-                        <b-form-group class="mt-3">
-                            <generic-multiselect
-                                required
-                                @change="entryEditing.shared = $event.val"
-                                parent_variable="entryEditing.shared"
-                                :label="'username'"
-                                :model="Models.USER_NAME"
-                                style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
-                                v-bind:placeholder="$t('Share')"
-                                :limit="10"
-                                :multiple="true"
-                                :initial_selection="entryEditing.shared"
-                            ></generic-multiselect>
-                            <small tabindex="-1" class="form-text text-muted">{{ $t("Share") }}</small>
-                        </b-form-group>
-                    </div>
-                    <div class="col-lg-6 d-none d-lg-block d-xl-block">
-                        <recipe-card :recipe="entryEditing.recipe" v-if="entryEditing.recipe != null"></recipe-card>
-                    </div>
-                </div>
-                <div class="row mt-3 mb-3">
-                    <div class="col-12">
-                        <b-button variant="danger" @click="deleteEntry" v-if="allow_delete">{{ $t("Delete") }} </b-button>
-                        <b-button class="float-right" variant="primary" @click="editEntry">{{ $t("Save") }}</b-button>
-                    </div>
-                </div>
             </div>
         </div>
     </b-modal>
diff --git a/vue/src/components/RecipeCard.vue b/vue/src/components/RecipeCard.vue
index 95b8392ad..664b4f640 100755
--- a/vue/src/components/RecipeCard.vue
+++ b/vue/src/components/RecipeCard.vue
@@ -37,11 +37,11 @@
                         <keywords-component :recipe="recipe" style="margin-top: 4px"></keywords-component>
                     </p>
                     <transition name="fade" mode="in-out">
-                        <div class="row mt-3" v-if="detailed">
+                        <div class="row mt-3" v-if="show_detail">
                             <div class="col-md-12">
                                 <h6 class="card-title"><i class="fas fa-pepper-hot"></i> {{ $t("Ingredients") }}</h6>
 
-                                <ingredients-card :steps="recipe.steps" :header="false" :detailed="false" />
+                                <ingredients-card :steps="recipe.steps" :header="false" :detailed="false" :servings="recipe.servings" />
                             </div>
                         </div>
                     </transition>
@@ -77,14 +77,15 @@ export default {
         meal_plan: Object,
         footer_text: String,
         footer_icon: String,
+        detailed: { type: Boolean, default: true },
     },
     mounted() {},
     computed: {
-        detailed: function () {
-            return this.recipe?.steps !== undefined
+        show_detail: function () {
+            return this.recipe?.steps !== undefined && this.detailed
         },
         text_length: function () {
-            if (this.detailed) {
+            if (this.show_detail) {
                 return 200
             } else {
                 return 120