diff --git a/vue/src/apps/IngredientEditorView/IngredientEditorView.vue b/vue/src/apps/IngredientEditorView/IngredientEditorView.vue
index e5afa3fcd..9e9e4ee7b 100644
--- a/vue/src/apps/IngredientEditorView/IngredientEditorView.vue
+++ b/vue/src/apps/IngredientEditorView/IngredientEditorView.vue
@@ -4,6 +4,7 @@
             <div class="col-md-6">
                 <generic-multiselect @change="food = $event.val; refreshList()"
                                      :model="Models.FOOD"
+                                     :initial_single_selection="food"
                                      :multiple="false"></generic-multiselect>
                 <b-button @click="show_food_delete=true" :disabled="food === null"> <i class="fas fa-trash-alt"></i></b-button>
                 <generic-modal-form :model="Models.FOOD" :action="Actions.DELETE" :show="show_food_delete" :item1="food"
@@ -12,7 +13,12 @@
             <div class="col-md-6">
                 <generic-multiselect @change="unit = $event.val; refreshList()"
                                      :model="Models.UNIT"
+                                     :initial_single_selection="unit"
                                      :multiple="false"></generic-multiselect>
+<!--TODO remove unit/Food from list when deleted -->
+                 <b-button @click="show_unit_delete=true" :disabled="unit === null"> <i class="fas fa-trash-alt"></i></b-button>
+                <generic-modal-form :model="Models.UNIT" :action="Actions.DELETE" :show="show_unit_delete" :item1="unit"
+                                @finish-action="unit = null; show_unit_delete=false"/>
             </div>
         </div>
 
diff --git a/vue/src/apps/ModelListView/ModelListView.vue b/vue/src/apps/ModelListView/ModelListView.vue
index 6c61d37e2..8a2b49f81 100644
--- a/vue/src/apps/ModelListView/ModelListView.vue
+++ b/vue/src/apps/ModelListView/ModelListView.vue
@@ -1,6 +1,7 @@
 <template>
     <div id="app" style="margin-bottom: 4vh" v-if="this_model">
-        <generic-modal-form v-if="this_model" :model="this_model" :action="this_action" :item1="this_item" :item2="this_target" :show="show_modal" @finish-action="finishAction" />
+        <generic-modal-form v-if="this_model" :model="this_model" :action="this_action" :item1="this_item"
+                            :item2="this_target" :show="show_modal" @finish-action="finishAction"/>
 
         <div class="row">
             <div class="col-md-2 d-none d-md-block"></div>
@@ -17,17 +18,20 @@
                         <div class="col-md-9" style="margin-top: 1vh">
                             <h3>
                                 <!-- <span><b-button variant="link" size="sm" class="text-dark shadow-none"><i class="fas fa-chevron-down"></i></b-button></span> -->
-                                <model-menu />
+                                <model-menu/>
                                 <span>{{ $t(this.this_model.name) }}</span>
                                 <span v-if="apiName !== 'Step' && apiName !== 'CustomFilter'">
                                     <b-button variant="link" @click="startAction({ action: 'new' })">
                                         <i class="fas fa-plus-circle fa-2x"></i>
                                     </b-button> </span
-                                ><!-- TODO add proper field to model config to determine if create should be available or not -->
+                                >
+                                <!-- TODO add proper field to model config to determine if create should be available or not -->
                             </h3>
                         </div>
                         <div class="col-md-3" style="position: relative; margin-top: 1vh">
-                            <b-form-checkbox v-model="show_split" name="check-button" v-if="paginated" class="shadow-none" style="position: relative; top: 50%; transform: translateY(-50%)" switch>
+                            <b-form-checkbox v-model="show_split" name="check-button" v-if="paginated"
+                                             class="shadow-none"
+                                             style="position: relative; top: 50%; transform: translateY(-50%)" switch>
                                 {{ $t("show_split_screen") }}
                             </b-form-checkbox>
                         </div>
@@ -37,19 +41,29 @@
                         <div class="col" :class="{ 'col-md-6': show_split }">
                             <!-- model isn't paginated and loads in one API call -->
                             <div v-if="!paginated">
-                                <generic-horizontal-card v-for="i in items_left" v-bind:key="i.id" :item="i" :model="this_model" @item-action="startAction($event, 'left')" @finish-action="finishAction" />
+                                <generic-horizontal-card v-for="i in items_left" v-bind:key="i.id" :item="i"
+                                                         :model="this_model" @item-action="startAction($event, 'left')"
+                                                         @finish-action="finishAction"/>
                             </div>
                             <!-- model is paginated and needs managed -->
-                            <generic-infinite-cards v-if="paginated" :card_counts="left_counts" :scroll="show_split" @search="getItems($event, 'left')" @reset="resetList('left')">
+                            <generic-infinite-cards v-if="paginated" :card_counts="left_counts" :scroll="show_split"
+                                                    @search="getItems($event, 'left')" @reset="resetList('left')">
                                 <template v-slot:cards>
-                                    <generic-horizontal-card v-for="i in items_left" v-bind:key="i.id" :item="i" :model="this_model" @item-action="startAction($event, 'left')" @finish-action="finishAction" />
+                                    <generic-horizontal-card v-for="i in items_left" v-bind:key="i.id" :item="i"
+                                                             :model="this_model"
+                                                             @item-action="startAction($event, 'left')"
+                                                             @finish-action="finishAction"/>
                                 </template>
                             </generic-infinite-cards>
                         </div>
                         <div class="col col-md-6" v-if="show_split">
-                            <generic-infinite-cards v-if="this_model" :card_counts="right_counts" :scroll="show_split" @search="getItems($event, 'right')" @reset="resetList('right')">
+                            <generic-infinite-cards v-if="this_model" :card_counts="right_counts" :scroll="show_split"
+                                                    @search="getItems($event, 'right')" @reset="resetList('right')">
                                 <template v-slot:cards>
-                                    <generic-horizontal-card v-for="i in items_right" v-bind:key="i.id" :item="i" :model="this_model" @item-action="startAction($event, 'right')" @finish-action="finishAction" />
+                                    <generic-horizontal-card v-for="i in items_right" v-bind:key="i.id" :item="i"
+                                                             :model="this_model"
+                                                             @item-action="startAction($event, 'right')"
+                                                             @finish-action="finishAction"/>
                                 </template>
                             </generic-infinite-cards>
                         </div>
@@ -62,18 +76,18 @@
 
 <script>
 import Vue from "vue"
-import { BootstrapVue } from "bootstrap-vue"
+import {BootstrapVue} from "bootstrap-vue"
 
 import "bootstrap-vue/dist/bootstrap-vue.css"
 
-import { CardMixin, ApiMixin, getConfig } from "@/utils/utils"
-import { StandardToasts, ToastMixin } from "@/utils/utils"
+import {CardMixin, ApiMixin, getConfig} from "@/utils/utils"
+import {StandardToasts, ToastMixin} from "@/utils/utils"
 
 import GenericInfiniteCards from "@/components/GenericInfiniteCards"
 import GenericHorizontalCard from "@/components/GenericHorizontalCard"
 import GenericModalForm from "@/components/Modals/GenericModalForm"
 import ModelMenu from "@/components/ContextMenu/ModelMenu"
-import { ApiApiFactory } from "@/utils/openapi/api"
+import {ApiApiFactory} from "@/utils/openapi/api"
 //import StorageQuota from "@/components/StorageQuota";
 
 Vue.use(BootstrapVue)
@@ -94,8 +108,8 @@ export default {
             // this.Models and this.Actions inherited from ApiMixin
             items_left: [],
             items_right: [],
-            right_counts: { max: 9999, current: 0 },
-            left_counts: { max: 9999, current: 0 },
+            right_counts: {max: 9999, current: 0},
+            left_counts: {max: 9999, current: 0},
             this_model: undefined,
             model_menu: undefined,
             this_action: undefined,
@@ -127,7 +141,7 @@ export default {
         this.header_component_name = this.this_model?.list?.header_component?.name ?? undefined
         this.$nextTick(() => {
             if (!this.paginated) {
-                this.getItems({ page: 1 }, "left")
+                this.getItems({page: 1}, "left")
             }
         })
         this.$i18n.locale = window.CUSTOM_LOCALE
@@ -236,7 +250,7 @@ export default {
         },
         getItems: function (params = {}, col) {
             let column = col || "left"
-            params.options = { query: { extended: 1 } } // returns extended values in API response
+            params.options = {query: {extended: 1}} // returns extended values in API response
             this.genericAPI(this.this_model, this.Actions.LIST, params)
                 .then((result) => {
                     let results = result.data?.results ?? result.data
@@ -257,7 +271,7 @@ export default {
                 })
         },
         getThis: function (id, callback) {
-            return this.genericAPI(this.this_model, this.Actions.FETCH, { id: id })
+            return this.genericAPI(this.this_model, this.Actions.FETCH, {id: id})
         },
         saveThis: function (item) {
             if (!item?.id) {
@@ -268,7 +282,7 @@ export default {
                         // then place all new items at the top of the list - could sort instead
                         this.items_left = [result.data].concat(this.destroyCard(result?.data?.id, this.items_left))
                         // this creates a deep copy to make sure that columns stay independent
-                        this.items_right = [{ ...result.data }].concat(this.destroyCard(result?.data?.id, this.items_right))
+                        this.items_right = [{...result.data}].concat(this.destroyCard(result?.data?.id, this.items_right))
                         StandardToasts.makeStandardToast(StandardToasts.SUCCESS_CREATE)
                     })
                     .catch((err) => {
@@ -291,10 +305,10 @@ export default {
         addShopping: function (food) {
             let api = new ApiApiFactory()
             food.shopping = true
-            api.createShoppingListEntry({ food: food, amount: 1 }).then(() => {
+            api.createShoppingListEntry({food: food, amount: 1}).then(() => {
                 StandardToasts.makeStandardToast(StandardToasts.SUCCESS_CREATE)
                 this.refreshCard(food, this.items_left)
-                this.refreshCard({ ...food }, this.items_right)
+                this.refreshCard({...food}, this.items_right)
             })
         },
         updateThis: function (item) {
@@ -313,7 +327,7 @@ export default {
                 this.clearState()
                 return
             }
-            this.genericAPI(this.this_model, this.Actions.MOVE, { source: source_id, target: target_id })
+            this.genericAPI(this.this_model, this.Actions.MOVE, {source: source_id, target: target_id})
                 .then((result) => {
                     this.moveUpdateItem(source_id, target_id)
                     StandardToasts.makeStandardToast(StandardToasts.SUCCESS_MOVE)
@@ -395,8 +409,8 @@ export default {
             let params = {
                 root: item.id,
                 pageSize: 200,
-                query: { extended: 1 },
-                options: { query: { extended: 1 } },
+                query: {extended: 1},
+                options: {query: {extended: 1}},
             }
             this.genericAPI(this.this_model, this.Actions.LIST, params)
                 .then((result) => {
@@ -415,7 +429,7 @@ export default {
         getRecipes: function (col, item) {
             let parent = {}
             // TODO: make this generic
-            let params = { pageSize: 50, random: true }
+            let params = {pageSize: 50, random: true}
             params[this.this_recipe_param] = item.id
             this.genericAPI(this.Models.RECIPE, this.Actions.LIST, params)
                 .then((result) => {
@@ -434,7 +448,7 @@ export default {
         refreshThis: function (id) {
             this.getThis(id).then((result) => {
                 this.refreshCard(result.data, this.items_left)
-                this.refreshCard({ ...result.data }, this.items_right)
+                this.refreshCard({...result.data}, this.items_right)
             })
         },
         deleteThis: function (id) {