diff --git a/vue/src/apps/MealPlanView/MealPlanView.vue b/vue/src/apps/MealPlanView/MealPlanView.vue
index 14f278583..97a4b8513 100644
--- a/vue/src/apps/MealPlanView/MealPlanView.vue
+++ b/vue/src/apps/MealPlanView/MealPlanView.vue
@@ -209,11 +209,9 @@
             @reload-meal-types="refreshMealTypes"
         ></meal-plan-edit-modal>
       <auto-meal-plan-modal
-        :entry="entryEditing"
         :modal_title="'Auto create meal plan'"
-        :auto_plan_show="auto_plan_show"
-        @create-plan="autoPlan"
-
+        :current_period="current_period"
+        @create-plan="doAutoPlan"
       ></auto-meal-plan-modal>
 
         <transition name="slide-fade">
@@ -305,6 +303,14 @@ export default {
     mixins: [CalendarMathMixin, ApiMixin, ResolveUrlMixin],
     data: function () {
         return {
+          AutoPlan: {
+            meal_types: [],
+            keywords: [[]],
+            servings: 1,
+            date: Date.now(),
+            startDay: null,
+            endDay: null
+          },
             showDate: new Date(),
             plan_entries: [],
             recipe_viewed: {},
@@ -555,7 +561,7 @@ export default {
         },
         deleteEntry(data) {
             this.plan_entries.forEach((entry, index, list) => {
-                //if (entry.id === data.id) {//todo:remove block!
+                if (entry.id === data.id) {
                     let apiClient = new ApiApiFactory()
 
                     apiClient
@@ -566,7 +572,7 @@ export default {
                         .catch((err) => {
                             StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE, err)
                         })
-                //}
+                }
             })
         },
         entryClick(data) {
@@ -643,35 +649,44 @@ export default {
                 entry: plan_entry,
             }
         },
-        createAutoPlan(date) {
+        createAutoPlan() {
             this.$bvModal.show(`autoplan-modal`)
         },
-      async autoPlanThread(date,dateOffset,i,servings){
+      async autoPlanThread(date,dateOffset,meal_type,keywords,servings,mealTypesKey){
 
           let apiClient = new ApiApiFactory()
           let currentEntry = Object.assign({}, this.options.entryEditing)
                 currentEntry.date = moment(date).add(dateOffset,"d").format("YYYY-MM-DD")
                 currentEntry.servings = servings
         await Promise.all([
-            currentEntry.recipe = await this.randomRecipe(i+3).then((result)=>{return result}),
+            currentEntry.recipe = await this.randomRecipe(keywords[mealTypesKey]).then((result)=>{return result}),
             currentEntry.shared = await apiClient.listUserPreferences().then((result) => {return result.data[0].plan_share}),
-            currentEntry.meal_type = await this.getMealType(i+2).then((result)=>{return result})
+            currentEntry.meal_type = await this.getMealType(meal_type[mealTypesKey].id).then((result)=>{return result})
         ])
                 currentEntry.title = currentEntry.recipe.name
                 this.createEntry(currentEntry)
       },
-       autoPlan(data, servings){
-            // ["breakfast","lunch","dinner"]
-          //   meal types: 4,3,2
-          //meal keywords: 5,4,3
-        for (let i = 0; i < 3; i++) {
-              for (let dateOffset = 0; dateOffset < 7; dateOffset++) {
-                 this.autoPlanThread(data,dateOffset,i,servings)
-              }
-            }
+       doAutoPlan(autoPlan){
+         console.log(autoPlan)
+          let dayInMilliseconds = (86400000)
+         console.log(autoPlan.startDay)
+         console.log(autoPlan.endDay)
+         console.log(autoPlan.endDay - autoPlan.startDay)
+         console.log(((autoPlan.endDay - autoPlan.startDay)/dayInMilliseconds) + 1)
+         let numberOfDays = ((autoPlan.endDay - autoPlan.startDay)/dayInMilliseconds) + 1
+
+         for (const mealTypesKey in autoPlan.meal_types) {
+           for (let dateOffset = 0; dateOffset < numberOfDays; dateOffset++) {
+             this.autoPlanThread(autoPlan.date, dateOffset, autoPlan.meal_types, autoPlan.keywords, autoPlan.servings, mealTypesKey)
+           }
+         }
         },
-        randomRecipe(keyword) {
-          let url = `/api/recipe/?query=&keywords_or=${keyword}`
+        randomRecipe(keywords) {
+          let url = "/api/recipe/?query="
+          for (const keywordsKey in keywords) {
+            let keyword = keywords[keywordsKey]
+            url += `&keywords_and=${keyword.id}`
+          }
           return axios.get(url).then((response) => {
             let result = response.data
             let count = result.count
diff --git a/vue/src/components/AutoMealPlanModal.vue b/vue/src/components/AutoMealPlanModal.vue
index 1138e67b7..339427aa7 100644
--- a/vue/src/components/AutoMealPlanModal.vue
+++ b/vue/src/components/AutoMealPlanModal.vue
@@ -1,245 +1,167 @@
 <template>
     <b-modal :id="modal_id" size="lg" :title="modal_title" hide-footer aria-label="" @show="showModal">
-        <div class="row">
-            <div class="col col-md-12">
-                <div class="row">
-                    <div class="col col-md-12">
-                        <div class="row">
-                            <div class="col-6 col-lg-9">
-                                <b-input-group>
-                                    <b-form-input id="TitleInput" v-model="entryEditing.title" :placeholder="entryEditing.title_placeholder" @change="missing_recipe = false"></b-form-input>
-                                    <b-input-group-append class="d-none d-lg-block">
-                                        <b-button variant="primary" @click="entryEditing.title = ''"><i class="fa fa-eraser"></i></b-button>
-                                    </b-input-group-append>
-                                </b-input-group>
-                                <span class="text-danger" v-if="missing_recipe">{{ $t("Title_or_Recipe_Required") }}</span>
-                                <small tabindex="-1" class="form-text text-muted" v-if="!missing_recipe">{{ $t("Title") }}</small>
-                            </div>
-                            <div class="col-6 col-lg-3">
-                                <input type="date" id="DateInput" class="form-control" v-model="entryEditing.date" />
-                                <small tabindex="-1" class="form-text text-muted">{{ $t("Date") }}</small>
+      <h5>{{ $t("Meal_Types") }}</h5>
+                        <div>
+                            <div>
+                                <b-card no-body class="mt-1 p-2"
+                                        v-for="(meal_type, k) in AutoPlan.meal_types" :key="meal_type.id">
+                                    <b-card-header class="p-2 border-0">
+                                        <div class="row">
+                                            <div class="col-10">
+                                                <h5 class="mt-1 mb-1">
+                                                    {{ meal_type.icon }} {{
+                                                        meal_type.name
+                                                    }}
+                                                </h5>
+                                            </div>
+                                        </div>
+                                      <div class="col-12">
+                                                <generic-multiselect
+                                                    @change="genericSelectChanged"
+                                                    :initial_selection="AutoPlan.keywords[meal_type]"
+                                                    :parent_variable="`${k}`"
+                                                    :model="Models.KEYWORD"
+                                                    :placeholder="$t('Keywords')"
+                                                    :limit="50"
+                                                />
+                                        </div>
+                                    </b-card-header>
+                                </b-card>
                             </div>
+                          <div class="row-cols-1 m-3">
+                            <b-form-input class="w-25 m-2 mb-0" :value = "AutoPlan.servings" :type="'number'" @input="updateServings"></b-form-input>
+                            <small tabindex="-1" class="m-2 mt-0 form-text text-muted">{{ $t("Servings") }}</small>
+                          </div>
+
+                          <div class="">
+                            <div class="row m-3 mb-0">
+                            <b-form-datepicker class="col" :value-as-date="true" :value="current_period.periodStart" @input="updateStartDay"></b-form-datepicker>
+                            <div class="col"></div>
+                            <b-form-datepicker class="col" :value-as-date="true" :value="current_period.periodEnd" @input="updateEndDay"></b-form-datepicker>
+                          </div>
+                          <div class="row align-top m-3 mt-0">
+                            <small tabindex="-1" class="col align-text-top text-muted">{{ $t("Start Day") }}</small>
+                            <div class="col"></div>
+                            <small tabindex="-1" class="col align-self-end text-muted">{{ $t("End Day") }}</small>
+                          </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_single_selection="entryEditing.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_single_selection="entryEditing.meal_type"
-                                        :allow_create="true"
-                                        :create_placeholder="$t('Create_New_Meal_Type')"
-                                    ></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="'display_name'"
-                                        :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>
-                                <b-input-group v-if="!autoMealPlan">
-                                    <b-form-checkbox id="AddToShopping" v-model="mealplan_settings.addshopping" />
-                                    <small tabindex="-1" class="form-text text-muted">{{ $t("AddToShopping") }}</small>
-                                </b-input-group>
-                                <b-input-group v-if="mealplan_settings.addshopping">
-                                    <b-form-checkbox id="reviewShopping" v-model="mealplan_settings.reviewshopping" />
-                                    <small tabindex="-1" class="form-text text-muted">{{ $t("review_shopping") }}</small>
-                                </b-input-group>
-                            </div>
-                            <div class="col-lg-6 d-none d-lg-block d-xl-block">
-                                <recipe-card v-if="entryEditing.recipe" :recipe="entryEditing.recipe" :detailed="false"></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>
-            </div>
+                          </div>
+
+      <div class="row mt-3 mb-3">
+        <div class="col-12">
+          <b-button class="float-right" variant="primary" @click="createPlan">{{ $t("Create Meal Plan") }}</b-button>
+        <b-button class="" variant="danger" @click="exitPlan">{{ $t("Exit") }}</b-button>
         </div>
+      </div>
     </b-modal>
 </template>
 
 <script>
 import Vue from "vue"
-import VueCookies from "vue-cookies"
-import { BootstrapVue } from "bootstrap-vue"
+import {BootstrapVue} from "bootstrap-vue"
 import GenericMultiselect from "@/components/GenericMultiselect"
-import { ApiMixin, getUserPreference } from "@/utils/utils"
+import {ApiMixin} from "@/utils/utils"
 
 const { ApiApiFactory } = require("@/utils/openapi/api")
 const { StandardToasts } = require("@/utils/utils")
 
 Vue.use(BootstrapVue)
-Vue.use(VueCookies)
-let MEALPLAN_COOKIE_NAME = "mealplan_settings"
 
 export default {
     name: "AutoMealPlanModal",
+  components: {
+    GenericMultiselect
+    },
     props: {
-        entry: Object,
-        entryEditing_inital_servings: Number,
         modal_title: String,
         modal_id: {
             type: String,
             default: "autoplan-modal",
         },
-        allow_delete: {
-            type: Boolean,
-            default: true,
-        },
+        current_period: Object
     },
     mixins: [ApiMixin],
-    components: {
-        GenericMultiselect,
-        RecipeCard: () => import("@/components/RecipeCard.vue"),
-    },
     data() {
         return {
-            entryEditing: {},
-            missing_recipe: false,
-            missing_meal_type: false,
-            default_plan_share: [],
-            mealplan_settings: {
-                addshopping: false,
-                reviewshopping: false,
-            },
+          AutoPlan: {
+            meal_types: [],
+            keywords: [[]],
+            servings: 1,
+            date: Date.now(),
+            startDay: null,
+            endDay: null
+          }
         }
     },
-    watch: {
-        entry: {
-            handler() {
-                this.entryEditing = Object.assign({}, this.entry)
-
-                if (this.entryEditing_inital_servings) {
-                    this.entryEditing.servings = this.entryEditing_inital_servings
-                }
-            },
-            deep: true,
-        },
-        entryEditing: {
-            handler(newVal) {},
-            deep: true,
-        },
-        mealplan_settings: {
-            handler(newVal) {
-                this.$cookies.set(MEALPLAN_COOKIE_NAME, this.mealplan_settings)
-            },
-            deep: true,
-        },
-        entryEditing_inital_servings: function (newVal) {
-            this.entryEditing.servings = newVal
-        },
-    },
     mounted: function () {},
-    computed: {
-        autoMealPlan: function () {
-            return getUserPreference("mealplan_autoadd_shopping")
-        },
-    },
     methods: {
+        genericSelectChanged: function (obj) {
+          this.AutoPlan.keywords[obj.var] = obj.val
+        },
         showModal() {
-            if (this.$cookies.isKey(MEALPLAN_COOKIE_NAME)) {
-                this.mealplan_settings = Object.assign({}, this.mealplan_settings, this.$cookies.get(MEALPLAN_COOKIE_NAME))
-            }
-            let apiClient = new ApiApiFactory()
+          this.refreshMealTypes()
 
-            apiClient.listUserPreferences().then((result) => {
-                if (this.entry.id === -1) {
-                    this.entryEditing.shared = result.data[0].plan_share
-                }
+          this.AutoPlan.servings = 1
+          this.AutoPlan.startDay = this.current_period.periodStart
+          this.AutoPlan.endDay = this.current_period.periodEnd
+        },
+       sortMealTypes() {
+            this.meal_types.forEach(function (element, index) {
+                element.order = index
+            })
+            let updated = 0
+            this.meal_types.forEach((meal_type) => {
+                let apiClient = new ApiApiFactory()
+
+                apiClient
+                    .updateMealType(this.AutoPlan.meal_type, meal_type)
+                    .then((e) => {
+                        if (updated === this.meal_types.length - 1) {
+                            this.periodChangedCallback(this.current_period)
+                        } else {
+                            updated++
+                        }
+                    })
+                    .catch((err) => {
+                        StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE, err)
+                    })
             })
         },
+      refreshMealTypes() {
+            let apiClient = new ApiApiFactory()
 
-        editEntry() {
-            this.missing_meal_type = false
-            this.missing_recipe = false
-            let cancel = false
-            if (this.entryEditing.meal_type == null) {
-                this.missing_meal_type = true
-                cancel = true
-            }
-            if (this.entryEditing.recipe == null && this.entryEditing.title === "") {
-                this.missing_recipe = true
-                cancel = true
-            }
-            if (!cancel) {
-                this.$bvModal.hide(`edit-modal`)
-                this.$emit("save-entry", { ...this.mealplan_settings, ...this.entryEditing, ...{ addshopping: this.mealplan_settings.addshopping && !this.autoMealPlan } })
-            }
+            Promise.resolve(apiClient.listMealTypes().then((result) => {
+                result.data.forEach((meal_type) => {
+                    meal_type.editing = false
+                })
+                this.AutoPlan.meal_types = result.data
+            })).then( () => {
+              let mealArray = this.AutoPlan.meal_types
+              for (let i = 0; i < mealArray.length; i++) {
+                 this.AutoPlan.keywords[i] = [];
+              }}
+            )
         },
-        deleteEntry() {
-            this.$bvModal.hide(`edit-modal`)
-            this.$emit("delete-entry", this.entryEditing)
-        },
-        selectMealType(event) {
-            this.missing_meal_type = false
-            if (event.val != null) {
-                this.entryEditing.meal_type = event.val
-            } else {
-                this.entryEditing.meal_type = null
-            }
-        },
-        selectShared(event) {
-            if (event.val != null) {
-                this.entryEditing.shared = event.val
-            } else {
-                this.entryEditing.meal_type = null
-            }
-        },
-        selectRecipe(event) {
-            this.missing_recipe = false
-            if (event.val != null) {
-                this.entryEditing.recipe = event.val
-                this.entryEditing.title_placeholder = this.entryEditing.recipe.name
-                this.entryEditing.servings = this.entryEditing.recipe.servings
-            } else {
-                this.entryEditing.recipe = null
-                this.entryEditing.title_placeholder = ""
-                this.entryEditing.servings = 1
-            }
+      createPlan() {
+            this.$bvModal.hide(`autoplan-modal`)
+            this.$emit("create-plan", this.AutoPlan)
         },
+      updateStartDay(date){
+          this.AutoPlan.startDay = date
+        console.log(date)
+      },
+      updateEndDay(date){
+          this.AutoPlan.endDay = date
+      },
+      updateServings(numberOfServings) {
+          this.AutoPlan.servings = numberOfServings
+      },
+      exitPlan() {
+          this.$bvModal.hide(`autoplan-modal`)
+      }
     },
+
+
 }
 </script>