diff --git a/vue/src/apps/MealPlanView/MealPlanView.vue b/vue/src/apps/MealPlanView/MealPlanView.vue
index a1b24c4fb..43542a862 100644
--- a/vue/src/apps/MealPlanView/MealPlanView.vue
+++ b/vue/src/apps/MealPlanView/MealPlanView.vue
@@ -203,7 +203,6 @@
         <meal-plan-edit-modal
             :entry="entryEditing"
             :modal_title="modal_title"
-            :edit_modal_show="edit_modal_show"
             :create_date="edit_modal_default_date"
             @reload-meal-types="refreshMealTypes"
         ></meal-plan-edit-modal>
@@ -327,7 +326,6 @@ export default {
             shopping_list: [],
             current_period: null,
             entryEditing: null,
-            edit_modal_show: false,
             edit_modal_default_date: null,
             ical_url: window.ICAL_URL,
         }
@@ -489,7 +487,7 @@ export default {
             this.edit_modal_default_date = moment(data).format("YYYY-MM-DD")
             this.entryEditing = null
             this.$nextTick(function () {
-                this.$bvModal.show(`edit-modal`)
+                this.$bvModal.show(`id_meal_plan_edit_modal`)
             })
         },
         findEntry(id) {
@@ -538,7 +536,7 @@ export default {
             this.$refs.menu.open($event, value)
         },
         openEntryEdit(entry) {
-            this.$bvModal.show(`edit-modal`)
+            this.$bvModal.show(`id_meal_plan_edit_modal`)
             this.entryEditing = entry
             this.entryEditing.date = moment(entry.date).format("YYYY-MM-DD")
             if (this.entryEditing.recipe != null) {
diff --git a/vue/src/apps/RecipeSearchView/RecipeSearchView.vue b/vue/src/apps/RecipeSearchView/RecipeSearchView.vue
index 7b0215245..90e933199 100644
--- a/vue/src/apps/RecipeSearchView/RecipeSearchView.vue
+++ b/vue/src/apps/RecipeSearchView/RecipeSearchView.vue
@@ -844,8 +844,8 @@
                                                     <h4>{{ day.date_label }}</h4>
                                                 </div>
                                                 <div class="flex-grow-1 text-right">
-                                                    <!--<b-button class=""><i class="fa fa-plus"></i></b-button>-->
-                                                    <!-- TODO need to rewrite meal plan edit modal to use store -->
+                                                    <b-button class="" @click="showMealPlanEditModal(null, day.create_default_date)"><i
+                                                        class="fa fa-plus"></i></b-button>
                                                 </div>
                                             </div>
 
@@ -949,6 +949,11 @@
                     </div>
                 </div>
 
+                <meal-plan-edit-modal
+                    :entry="mealplan_entry_edit"
+                    :create_date="mealplan_default_date"
+                ></meal-plan-edit-modal>
+
                 <bottom-navigation-bar></bottom-navigation-bar>
             </div>
         </div>
@@ -975,6 +980,7 @@ import RecipeSwitcher from "@/components/Buttons/RecipeSwitcher"
 import {ApiApiFactory} from "@/utils/openapi/api"
 import {useMealPlanStore} from "@/stores/MealPlanStore";
 import BottomNavigationBar from "@/components/BottomNavigationBar.vue";
+import MealPlanEditModal from "@/components/MealPlanEditModal.vue";
 
 Vue.use(VueCookies)
 Vue.use(BootstrapVue)
@@ -985,7 +991,7 @@ let UI_COOKIE_NAME = "ui_search_settings"
 export default {
     name: "RecipeSearchView",
     mixins: [ResolveUrlMixin, ApiMixin, ToastMixin],
-    components: {GenericMultiselect, RecipeCard, Treeselect, RecipeSwitcher, Multiselect, BottomNavigationBar},
+    components: {GenericMultiselect, RecipeCard, Treeselect, RecipeSwitcher, Multiselect, BottomNavigationBar, MealPlanEditModal},
     data() {
         return {
             // this.Models and this.Actions inherited from ApiMixin
@@ -1074,6 +1080,8 @@ export default {
             pagination_count: 0,
             random_search: false,
             debug: false,
+            mealplan_default_date: null,
+            mealplan_entry_edit: null,
         }
     },
     computed: {
@@ -1084,6 +1092,7 @@ export default {
                     let moment_date = moment().add(x, "d")
                     grid.push({
                         date: moment_date,
+                        create_default_date: moment_date.format("YYYY-MM-DD"), // improve meal plan edit modal to do formatting itself and accept dates
                         date_label: moment_date.format('DD.MM'),
                         plan_entries: this.meal_plan_store.plan_list.filter((m) => moment(m.date).isSame(moment_date, 'day'))
                     })
@@ -1628,6 +1637,18 @@ export default {
                 type.filter((x) => x.operator === false && x.not === false).length > 1
             )
         },
+        showMealPlanEditModal: function (entry, date) {
+            if (entry) {
+                this.mealplan_entry_edit = entry
+            }
+            if (date) {
+                this.mealplan_default_date = date
+            }
+            this.$nextTick(function () {
+                this.$bvModal.show(`id_meal_plan_edit_modal`)
+            })
+
+        }
     },
 }
 </script>
diff --git a/vue/src/components/MealPlanEditModal.vue b/vue/src/components/MealPlanEditModal.vue
index ab1aa7e0c..718bff674 100644
--- a/vue/src/components/MealPlanEditModal.vue
+++ b/vue/src/components/MealPlanEditModal.vue
@@ -156,7 +156,7 @@ export default {
         modal_title: String,
         modal_id: {
             type: String,
-            default: "edit-modal",
+            default: "id_meal_plan_edit_modal",
         },
         allow_delete: {
             type: Boolean,
@@ -240,7 +240,7 @@ export default {
                 return
             }
             //TODO properly validate
-            this.$bvModal.hide(`edit-modal`)
+            this.$bvModal.hide(`id_meal_plan_edit_modal`)
 
             if ((this.mealplan_settings.addshopping || this.autoMealPlan) && !this.mealplan_settings.reviewshopping) {
                 this.$set(this.entryEditing, 'addshopping', true)
@@ -250,7 +250,6 @@ export default {
                 useMealPlanStore().createObject(this.entryEditing).then((r) => {
                     this.last_created_plan = r.data
                     if (r.data.recipe && (this.mealplan_settings.addshopping || this.autoMealPlan) && this.mealplan_settings.reviewshopping) {
-                        console.log('OPENING SHOPPING MODAL', this.$bvModal)
                         this.$nextTick(function () {
                             this.$bvModal.show(`shopping_999999`)
                         })
@@ -262,7 +261,7 @@ export default {
             }
         },
         deleteEntry() {
-            this.$bvModal.hide(`edit-modal`)
+            this.$bvModal.hide(`id_meal_plan_edit_modal`)
             useMealPlanStore().deleteObject(this.entryEditing)
         },
         selectMealType(event) {