diff --git a/vue/src/apps/IngredientEditorView/IngredientEditorView.vue b/vue/src/apps/IngredientEditorView/IngredientEditorView.vue
index 254b82ee6..e5afa3fcd 100644
--- a/vue/src/apps/IngredientEditorView/IngredientEditorView.vue
+++ b/vue/src/apps/IngredientEditorView/IngredientEditorView.vue
@@ -5,6 +5,9 @@
                 <generic-multiselect @change="food = $event.val; refreshList()"
                                      :model="Models.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"
+                                @finish-action="food = null; show_food_delete=false"/>
             </div>
             <div class="col-md-6">
                 <generic-multiselect @change="unit = $event.val; refreshList()"
@@ -16,11 +19,11 @@
         <table class="table table-bordered">
             <thead>
             <tr>
-                <th>Amount</th>
-                <th>Unit</th>
-                <th>Food</th>
-                <th>Note</th>
-                <th>Save</th>
+                <th>{{$t('Amount')}}</th>
+                <th>{{$t('Unit')}}</th>
+                <th>{{$t('Food')}}</th>
+                <th>{{$t('Note')}}</th>
+                <th>{{$t('Save')}}</th>
             </tr>
             </thead>
             <tr v-for="i in ingredients" v-bind:key="i.id">
@@ -68,18 +71,21 @@ import "bootstrap-vue/dist/bootstrap-vue.css"
 import {ApiMixin, StandardToasts} from "@/utils/utils"
 import {ApiApiFactory} from "@/utils/openapi/api";
 import GenericMultiselect from "@/components/GenericMultiselect";
+import GenericModalForm from "@/components/Modals/GenericModalForm";
 
 Vue.use(BootstrapVue)
 
 export default {
     name: "IngredientEditorView",
     mixins: [ApiMixin],
-    components: {GenericMultiselect},
+    components: {GenericMultiselect, GenericModalForm},
     data() {
         return {
             ingredients: [],
             food: null,
             unit: null,
+            show_food_delete: false,
+            show_unit_delete: false,
         }
     },
     computed: {},
diff --git a/vue/src/components/Modals/GenericModalForm.vue b/vue/src/components/Modals/GenericModalForm.vue
index 717421a9a..852f36d49 100644
--- a/vue/src/components/Modals/GenericModalForm.vue
+++ b/vue/src/components/Modals/GenericModalForm.vue
@@ -176,8 +176,11 @@ export default {
                     StandardToasts.makeStandardToast(StandardToasts.SUCCESS_DELETE)
                 })
                 .catch((err) => {
-                    console.log(err)
-                    StandardToasts.makeStandardToast(StandardToasts.FAIL_DELETE)
+                    if (err.response.status === 403){
+                        StandardToasts.makeStandardToast(StandardToasts.FAIL_DELETE_PROTECTED)
+                    }else {
+                        StandardToasts.makeStandardToast(StandardToasts.FAIL_DELETE)
+                    }
                     this.$emit("finish-action", "cancel")
                 })
         },
diff --git a/vue/src/locales/en.json b/vue/src/locales/en.json
index c6d79cf91..284f4316f 100644
--- a/vue/src/locales/en.json
+++ b/vue/src/locales/en.json
@@ -4,6 +4,7 @@
     "err_creating_resource": "There was an error creating a resource!",
     "err_updating_resource": "There was an error updating a resource!",
     "err_deleting_resource": "There was an error deleting a resource!",
+    "err_deleting_protected_resource": "The object you are trying to delete is still used and can't be deleted.",
     "err_moving_resource": "There was an error moving a resource!",
     "err_merging_resource": "There was an error merging a resource!",
     "success_fetching_resource": "Successfully fetched a resource!",
@@ -87,6 +88,7 @@
     "Note": "Note",
     "Success": "Success",
     "Failure": "Failure",
+    "Protected": "Protected",
     "Ingredients": "Ingredients",
     "Supermarket": "Supermarket",
     "Categories": "Categories",
diff --git a/vue/src/utils/utils.js b/vue/src/utils/utils.js
index 871e5b749..f9f550c9e 100644
--- a/vue/src/utils/utils.js
+++ b/vue/src/utils/utils.js
@@ -46,6 +46,7 @@ export class StandardToasts {
     static FAIL_FETCH = "FAIL_FETCH"
     static FAIL_UPDATE = "FAIL_UPDATE"
     static FAIL_DELETE = "FAIL_DELETE"
+    static FAIL_DELETE_PROTECTED = "FAIL_DELETE_PROTECTED"
     static FAIL_MOVE = "FAIL_MOVE"
     static FAIL_MERGE = "FAIL_MERGE"
 
@@ -81,6 +82,9 @@ export class StandardToasts {
             case StandardToasts.FAIL_DELETE:
                 makeToast(i18n.tc("Failure"), i18n.tc("err_deleting_resource"), "danger")
                 break
+            case StandardToasts.FAIL_DELETE_PROTECTED:
+                makeToast(i18n.tc("Protected"), i18n.tc("err_deleting_protected_resource"), "danger")
+                break
             case StandardToasts.FAIL_MOVE:
                 makeToast(i18n.tc("Failure"), i18n.tc("err_moving_resource") + (err_details ? "\n" + err_details : ""), "danger")
                 break