diff --git a/vue/src/components/FoodEditor.vue b/vue/src/components/FoodEditor.vue
index f506c58b8..4b111ceb6 100644
--- a/vue/src/components/FoodEditor.vue
+++ b/vue/src/components/FoodEditor.vue
@@ -1,141 +1,153 @@
 <template>
 
     <div>
-        <div class="row" v-if="food">
-            <div class="col-12">
-                <h2>{{ food.name }} <small class="text-muted" v-if="food.plural_name">{{ food.plural_name }}</small>
-                </h2>
-            </div>
-        </div>
 
-        <div class="row">
-            <div class="col-12">
-                <b-form v-if="food">
-                    <b-form-group :label="$t('Name')" description="">
-                        <b-form-input v-model="food.name"></b-form-input>
-                    </b-form-group>
-                    <b-form-group :label="$t('Plural')" description="">
-                        <b-form-input v-model="food.plural_name"></b-form-input>
-                    </b-form-group>
+        <b-modal :id="id" size="xl" @hidden="cancelAction">
 
-                    <!-- Food properties -->
+            <template v-slot:modal-title>
+                <div class="row" v-if="food">
+                    <div class="col-12">
+                        <h2>{{ food.name }} <small class="text-muted" v-if="food.plural_name">{{
+                                food.plural_name
+                            }}</small>
+                        </h2>
+                    </div>
+                </div>
+            </template>
 
-                    <h5><i class="fas fa-database"></i> {{ $t('Properties') }} <small class="text-muted">{{
-                            food.name
-                        }}</small></h5>
-                    <table class="table table-bordered" v-if="food_properties">
-                        <tr v-for="fp in food_properties" v-bind:key="fp.id">
-                            <td><input v-model="fp.property_amount" type="number"> {{ fp.property_type.unit }}</td>
-                            <td><b> {{ fp.property_type.name }} </b></td>
-                            <td> /</td>
-                            <td><input v-model="fp.food_amount" type="number"></td>
-                            <td>
+            <div class="row">
+                <div class="col-12">
+                    <b-form v-if="food">
+                        <b-form-group :label="$t('Name')" description="">
+                            <b-form-input v-model="food.name"></b-form-input>
+                        </b-form-group>
+                        <b-form-group :label="$t('Plural')" description="">
+                            <b-form-input v-model="food.plural_name"></b-form-input>
+                        </b-form-group>
+
+                        <!-- Food properties -->
+
+                        <h5><i class="fas fa-database"></i> {{ $t('Properties') }}</h5>
+                        <table class="table table-bordered" v-if="food_properties">
+                            <tr v-for="fp in food_properties" v-bind:key="fp.id">
+                                <td><input v-model="fp.property_amount" type="number"> {{ fp.property_type.unit }}</td>
+                                <td><b> {{ fp.property_type.name }} </b></td>
+                                <td> /</td>
+                                <td><input v-model="fp.food_amount" type="number"></td>
+                                <td>
+                                    <generic-multiselect
+                                            @change="fp.food_unit = $event.val;"
+                                            :model="Models.UNIT"
+                                            :initial_single_selection="fp.food_unit"
+                                            label="name"
+                                            :multiple="false"
+                                            :placeholder="$t('Unit')"
+                                    ></generic-multiselect>
+                                </td>
+                            </tr>
+                        </table>
+
+
+                        <!-- Unit conversion -->
+
+                        <!-- ADVANCED FEATURES somehow hide this stuff -->
+                        <b-collapse id="collapse-advanced">
+                            <b-form-group :label="$t('Recipe')" :description="$t('food_recipe_help')">
                                 <generic-multiselect
-                                        @change="fp.food_unit = $event.val;"
-                                        :model="Models.UNIT"
-                                        :initial_single_selection="fp.food_unit"
+                                        @change="food.recipe = $event.val;"
+                                        :model="Models.RECIPE"
+                                        :initial_single_selection="food.recipe"
                                         label="name"
                                         :multiple="false"
-                                        :placeholder="$t('Unit')"
+                                        :placeholder="$t('Recipe')"
                                 ></generic-multiselect>
-                            </td>
-                        </tr>
-                    </table>
+                            </b-form-group>
+
+                            <b-form-group :description="$t('OnHand_help')">
+                                <b-form-checkbox v-model="food.food_onhand">{{ $t('OnHand') }}</b-form-checkbox>
+                            </b-form-group>
+
+                            <b-form-group :description="$t('ignore_shopping_help')">
+                                <b-form-checkbox v-model="food.ignore_shopping">{{
+                                        $t('Ignore_Shopping')
+                                    }}
+                                </b-form-checkbox>
+                            </b-form-group>
+
+                            <b-form-group :label="$t('Shopping_Category')" :description="$t('shopping_category_help')">
+                                <generic-multiselect
+                                        @change="food.supermarket_category = $event.val;"
+                                        :model="Models.SHOPPING_CATEGORY"
+                                        :initial_single_selection="food.supermarket_category"
+                                        label="name"
+                                        :multiple="false"
+                                        :allow_create="true"
+                                        :placeholder="$t('Shopping_Category')"
+                                ></generic-multiselect>
+                            </b-form-group>
+
+                            <hr/>
+                            <!-- todo add conditions if false disable dont hide -->
+                            <b-form-group :label="$t('Substitutes')" :description="$t('substitute_help')">
+                                <generic-multiselect
+                                        @change="food.substitute = $event.val;"
+                                        :model="Models.FOOD"
+                                        :initial_selection="food.substitute"
+                                        label="name"
+                                        :multiple="true"
+                                        :placeholder="$t('Substitutes')"
+                                ></generic-multiselect>
+                            </b-form-group>
+
+                            <b-form-group :description="$t('substitute_siblings_help')">
+                                <b-form-checkbox v-model="food.substitute_siblings">{{
+                                        $t('substitute_siblings')
+                                    }}
+                                </b-form-checkbox>
+                            </b-form-group>
+
+                            <b-form-group :label="$t('InheritFields')" :description="$t('InheritFields_help')">
+                                <generic-multiselect
+                                        @change="food.inherit_fields = $event.val;"
+                                        :model="Models.FOOD_INHERIT_FIELDS"
+                                        :initial_selection="food.inherit_fields"
+                                        label="name"
+                                        :multiple="true"
+                                        :placeholder="$t('InheritFields')"
+                                ></generic-multiselect>
+                            </b-form-group>
+
+                            <b-form-group :label="$t('ChildInheritFields')"
+                                          :description="$t('ChildInheritFields_help')">
+                                <generic-multiselect
+                                        @change="food.child_inherit_fields = $event.val;"
+                                        :model="Models.FOOD_INHERIT_FIELDS"
+                                        :initial_sselection="food.child_inherit_fields"
+                                        label="name"
+                                        :multiple="true"
+                                        :placeholder="$t('ChildInheritFields')"
+                                ></generic-multiselect>
+                            </b-form-group>
+
+                            <!-- TODO change to a button -->
+                            <b-form-group :description="$t('reset_children_help')">
+                                <b-form-checkbox v-model="food.reset_inherit">{{
+                                        $t('reset_children')
+                                    }}
+                                </b-form-checkbox>
+                            </b-form-group>
+                        </b-collapse>
 
 
-                    <!-- Unit conversion -->
-                    <b-button v-b-toggle.collapse-advanced class="m-1">{{$t('Advanced')}}</b-button>
-                    <!-- ADVANCED FEATURES somehow hide this stuff -->
-                    <b-collapse id="collapse-advanced">
-                        <b-form-group :label="$t('Recipe')" :description="$t('food_recipe_help')">
-                            <generic-multiselect
-                                    @change="food.recipe = $event.val;"
-                                    :model="Models.RECIPE"
-                                    :initial_selection="food.recipe"
-                                    label="name"
-                                    :multiple="false"
-                                    :placeholder="$t('Recipe')"
-                            ></generic-multiselect>
-                        </b-form-group>
-
-                        <b-form-group :description="$t('OnHand_help')">
-                            <b-form-checkbox v-model="food.food_onhand">{{ $t('OnHand') }}</b-form-checkbox>
-                        </b-form-group>
-
-                        <b-form-group :description="$t('ignore_shopping_help')">
-                            <b-form-checkbox v-model="food.ignore_shopping">{{
-                                    $t('Ignore_Shopping')
-                                }}
-                            </b-form-checkbox>
-                        </b-form-group>
-
-                        <b-form-group :label="$t('Shopping_Category')" :description="$t('shopping_category_help')">
-                            <generic-multiselect
-                                    @change="food.supermarket_category = $event.val;"
-                                    :model="Models.SHOPPING_CATEGORY"
-                                    :initial_selection="food.supermarket_category"
-                                    label="name"
-                                    :multiple="false"
-                                    :allow_create="true"
-                                    :placeholder="$t('Shopping_Category')"
-                            ></generic-multiselect>
-                        </b-form-group>
-
-                        <hr/>
-                        <!-- todo add conditions if false disable dont hide -->
-                        <b-form-group :label="$t('Substitutes')" :description="$t('substitute_help')">
-                            <generic-multiselect
-                                    @change="food.substitute = $event.val;"
-                                    :model="Models.FOOD"
-                                    :initial_selection="food.substitute"
-                                    label="name"
-                                    :multiple="false"
-                                    :placeholder="$t('Substitutes')"
-                            ></generic-multiselect>
-                        </b-form-group>
-
-                        <b-form-group :description="$t('substitute_siblings_help')">
-                            <b-form-checkbox v-model="food.substitute_siblings">{{
-                                    $t('substitute_siblings')
-                                }}
-                            </b-form-checkbox>
-                        </b-form-group>
-
-                        <b-form-group :label="$t('InheritFields')" :description="$t('InheritFields_help')">
-                            <generic-multiselect
-                                    @change="food.inherit_fields = $event.val;"
-                                    :model="Models.FOOD_INHERIT_FIELDS"
-                                    :initial_selection="food.inherit_fields"
-                                    label="name"
-                                    :multiple="false"
-                                    :placeholder="$t('InheritFields')"
-                            ></generic-multiselect>
-                        </b-form-group>
-
-                        <b-form-group :label="$t('ChildInheritFields')" :description="$t('ChildInheritFields_help')">
-                            <generic-multiselect
-                                    @change="food.child_inherit_fields = $event.val;"
-                                    :model="Models.FOOD_INHERIT_FIELDS"
-                                    :initial_selection="food.child_inherit_fields"
-                                    label="name"
-                                    :multiple="false"
-                                    :placeholder="$t('ChildInheritFields')"
-                            ></generic-multiselect>
-                        </b-form-group>
-
-                        <!-- TODO change to a button -->
-                        <b-form-group :description="$t('reset_children_help')">
-                            <b-form-checkbox v-model="food.reset_inherit">{{ $t('reset_children') }}</b-form-checkbox>
-                        </b-form-group>
-                    </b-collapse>
-
-
-                    <b-button variant="primary" @click="updateFood">{{ $t('Save') }}</b-button>
-                </b-form>
+                    </b-form>
 
+                </div>
             </div>
-        </div>
-
+            <template v-slot:modal-footer>
+                <b-button variant="primary" @click="updateFood">{{ $t('Save') }}</b-button>
+                <b-button v-b-toggle.collapse-advanced class="m-1">{{ $t('Advanced') }}</b-button>
+            </template>
+        </b-modal>
     </div>
 </template>
 
@@ -147,7 +159,7 @@ import {BootstrapVue} from "bootstrap-vue"
 import "bootstrap-vue/dist/bootstrap-vue.css"
 import {ApiApiFactory} from "@/utils/openapi/api";
 import GenericMultiselect from "@/components/GenericMultiselect.vue";
-import {ApiMixin, StandardToasts} from "@/utils/utils";
+import {ApiMixin, formFunctions, getForm, StandardToasts} from "@/utils/utils";
 
 
 Vue.use(BootstrapVue)
@@ -159,6 +171,22 @@ export default {
     components: {
         GenericMultiselect
     },
+    props: {
+        id: {type: String, default: 'id_food_edit_modal_modal'},
+        show: {required: true, type: Boolean, default: false},
+    },
+    watch: {
+        show: function () {
+            console.log('trigger')
+            if (this.show) {
+                console.log('show modal')
+                this.$bvModal.show(this.id)
+            } else {
+                console.log('show modal false')
+                this.$bvModal.hide(this.id)
+            }
+        },
+    },
     data() {
         return {
             food: undefined,
@@ -166,6 +194,7 @@ export default {
         }
     },
     mounted() {
+        this.$bvModal.show(this.id)
         this.$i18n.locale = window.CUSTOM_LOCALE
         let apiClient = new ApiApiFactory()
         apiClient.retrieveFood('1').then((r) => {
@@ -174,7 +203,7 @@ export default {
             let property_types = []
             let property_values = []
 
-            let p1 = apiClient.listFoodPropertyTypes().then((r) => {
+            let p1 = apiClient.listPropertyTypes().then((r) => {
                 property_types = r.data
             })
 
@@ -234,7 +263,10 @@ export default {
                 }
 
             })
-        }
+        },
+        cancelAction: function () {
+            this.$emit("hidden", "")
+        },
     },
 }
 </script>
diff --git a/vue/src/components/FoodPropertyViewComponent.vue b/vue/src/components/FoodPropertyViewComponent.vue
index fe3d6d591..6278ffe61 100644
--- a/vue/src/components/FoodPropertyViewComponent.vue
+++ b/vue/src/components/FoodPropertyViewComponent.vue
@@ -2,23 +2,21 @@
     <div>
 
 
-        <div class="card p-2" v-if="recipe !== undefined">
-            <div class="flex-row">
-                <div class="flex-column">
+        <div class="card p-4 pb-2" v-if="recipe !== undefined">
+            <b-row>
+                <b-col>
                     <h5><i class="fas fa-database"></i> {{ $t('Properties') }}</h5>
-                </div>
-                <div class="flex-column align-content-end text-right align-text-bottom">
-
-                    <span v-if="!show_total">{{ $t('per_serving') }}</span>
-                    <span v-if="show_total">{{ $t('total') }}</span>
+                </b-col>
+                <b-col class="text-right">
+                    <span v-if="!show_total">{{ $t('per_serving') }} </span>
+                    <span v-if="show_total">{{ $t('total') }} </span>
 
                     <a href="#" @click="show_total = !show_total">
                         <i class="fas fa-toggle-on" v-if="!show_total"></i>
                         <i class="fas fa-toggle-off" v-if="show_total"></i>
                     </a>
-
-                </div>
-            </div>
+                </b-col>
+            </b-row>
 
 
             <table class="table table-bordered table-sm">
diff --git a/vue/src/components/Modals/GenericModalForm.vue b/vue/src/components/Modals/GenericModalForm.vue
index 4bf4b42ed..5012a2c76 100644
--- a/vue/src/components/Modals/GenericModalForm.vue
+++ b/vue/src/components/Modals/GenericModalForm.vue
@@ -1,10 +1,7 @@
 <template>
     <div>
         <template v-if="form_component !== undefined">
-            <b-modal :id="'modal_' + id" @hidden="cancelAction" size="xl">
-                <component :is="form_component"></component>
-            </b-modal>
-
+            <component :is="form_component" :id="'modal_' + id" :show="show" @hidden="cancelAction"></component>
         </template>
         <template v-else>
             <b-modal :id="'modal_' + id" @hidden="cancelAction" size="lg">
@@ -43,13 +40,13 @@
 
 <script>
 import Vue from "vue"
-import { BootstrapVue } from "bootstrap-vue"
-import { getForm, formFunctions } from "@/utils/utils"
+import {BootstrapVue} from "bootstrap-vue"
+import {getForm, formFunctions} from "@/utils/utils"
 
 Vue.use(BootstrapVue)
 
-import { ApiApiFactory } from "@/utils/openapi/api"
-import { ApiMixin, StandardToasts, ToastMixin, getUserPreference } from "@/utils/utils"
+import {ApiApiFactory} from "@/utils/openapi/api"
+import {ApiMixin, StandardToasts, ToastMixin, getUserPreference} from "@/utils/utils"
 import CheckboxInput from "@/components/Modals/CheckboxInput"
 import LookupInput from "@/components/Modals/LookupInput"
 import TextInput from "@/components/Modals/TextInput"
@@ -63,10 +60,21 @@ import NumberInput from "@/components/Modals/NumberInput.vue";
 
 export default {
     name: "GenericModalForm",
-    components: { FileInput, CheckboxInput, LookupInput, TextInput, EmojiInput, ChoiceInput, SmallText, HelpBadge,DateInput, NumberInput },
+    components: {
+        FileInput,
+        CheckboxInput,
+        LookupInput,
+        TextInput,
+        EmojiInput,
+        ChoiceInput,
+        SmallText,
+        HelpBadge,
+        DateInput,
+        NumberInput
+    },
     mixins: [ApiMixin, ToastMixin],
     props: {
-        model: { required: true, type: Object },
+        model: {required: true, type: Object},
         action: {
             type: Object,
             default() {
@@ -85,7 +93,7 @@ export default {
                 return {}
             },
         },
-        show: { required: true, type: Boolean, default: false },
+        show: {required: true, type: Boolean, default: false},
     },
     data() {
         return {
@@ -123,9 +131,9 @@ export default {
         form_component() {
             // TODO this leads webpack to create one .js file for each component in this folder because at runtime any one of them could be requested
             // TODO this is not necessarily bad but maybe there are better options to do this
-            if (this.form.component !== undefined){
+            if (this.form.component !== undefined) {
                 return () => import(/* webpackChunkName: "header-component" */ `@/components/${this.form.component}`)
-            }else{
+            } else {
                 return undefined
             }
         },
@@ -192,16 +200,16 @@ export default {
             return form
         },
         delete: function () {
-            this.genericAPI(this.model, this.Actions.DELETE, { id: this.item1.id })
+            this.genericAPI(this.model, this.Actions.DELETE, {id: this.item1.id})
                 .then((result) => {
                     this.$emit("finish-action")
-                    StandardToasts.makeStandardToast(this,StandardToasts.SUCCESS_DELETE)
+                    StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_DELETE)
                 })
                 .catch((err) => {
-                    if (err.response.status === 403){
-                        StandardToasts.makeStandardToast(this,StandardToasts.FAIL_DELETE_PROTECTED, err)
-                    }else {
-                        StandardToasts.makeStandardToast(this,StandardToasts.FAIL_DELETE, err)
+                    if (err.response.status === 403) {
+                        StandardToasts.makeStandardToast(this, StandardToasts.FAIL_DELETE_PROTECTED, err)
+                    } else {
+                        StandardToasts.makeStandardToast(this, StandardToasts.FAIL_DELETE, err)
                     }
                     this.$emit("finish-action", "cancel")
                 })
@@ -211,22 +219,22 @@ export default {
                 // if there is no item id assume it's a new item
                 this.genericAPI(this.model, this.Actions.CREATE, this.form_data)
                     .then((result) => {
-                        this.$emit("finish-action", { item: result.data })
-                        StandardToasts.makeStandardToast(this,StandardToasts.SUCCESS_CREATE)
+                        this.$emit("finish-action", {item: result.data})
+                        StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_CREATE)
                     })
                     .catch((err) => {
                         console.log(err)
-                        StandardToasts.makeStandardToast(this,StandardToasts.FAIL_CREATE)
+                        StandardToasts.makeStandardToast(this, StandardToasts.FAIL_CREATE)
                         this.$emit("finish-action", "cancel")
                     })
             } else {
                 this.genericAPI(this.model, this.Actions.UPDATE, this.form_data)
                     .then((result) => {
-                        this.$emit("finish-action", { item: result.data })
-                        StandardToasts.makeStandardToast(this,StandardToasts.SUCCESS_UPDATE)
+                        this.$emit("finish-action", {item: result.data})
+                        StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_UPDATE)
                     })
                     .catch((err) => {
-                        StandardToasts.makeStandardToast(this,StandardToasts.FAIL_UPDATE, err)
+                        StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE, err)
                         this.$emit("finish-action", "cancel")
                     })
             }
@@ -242,13 +250,13 @@ export default {
                 this.$emit("finish-action", "cancel")
                 return
             }
-            this.genericAPI(this.model, this.Actions.MOVE, { source: this.item1.id, target: this.form_data.target.id })
+            this.genericAPI(this.model, this.Actions.MOVE, {source: this.item1.id, target: this.form_data.target.id})
                 .then((result) => {
-                    this.$emit("finish-action", { target: this.form_data.target.id })
-                    StandardToasts.makeStandardToast(this,StandardToasts.SUCCESS_MOVE)
+                    this.$emit("finish-action", {target: this.form_data.target.id})
+                    StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_MOVE)
                 })
                 .catch((err) => {
-                    StandardToasts.makeStandardToast(this,StandardToasts.FAIL_MOVE, err)
+                    StandardToasts.makeStandardToast(this, StandardToasts.FAIL_MOVE, err)
                     this.$emit("finish-action", "cancel")
                 })
         },
@@ -268,11 +276,14 @@ export default {
                 target: this.form_data.target.id,
             })
                 .then((result) => {
-                    this.$emit("finish-action", { target: this.form_data.target.id, target_object: this.form_data.target }) //TODO temporary workaround to not change other apis
-                    StandardToasts.makeStandardToast(this,StandardToasts.SUCCESS_MERGE)
+                    this.$emit("finish-action", {
+                        target: this.form_data.target.id,
+                        target_object: this.form_data.target
+                    }) //TODO temporary workaround to not change other apis
+                    StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_MERGE)
                 })
                 .catch((err) => {
-                    StandardToasts.makeStandardToast(this,StandardToasts.FAIL_MERGE, err)
+                    StandardToasts.makeStandardToast(this, StandardToasts.FAIL_MERGE, err)
                     this.$emit("finish-action", "cancel")
                 })