diff --git a/frontend/components/Domain/Recipe/RecipeIngredientEditor.vue b/frontend/components/Domain/Recipe/RecipeIngredientEditor.vue
index 6e659c156f09..2b7a15191b49 100644
--- a/frontend/components/Domain/Recipe/RecipeIngredientEditor.vue
+++ b/frontend/components/Domain/Recipe/RecipeIngredientEditor.vue
@@ -59,9 +59,6 @@
             <RecipeIngredientFoodDialog class="mx-2" block small />
           </template>
         </v-autocomplete>
-        <template v-if="!checkForFood(value.food)">
-          '{{ value.food && value.food !== "" ? value.food.name : null }}' does not exists. Would you like to create it?
-        </template>
       </v-col>
       <v-col sm="12" md="" cols="12">
         <v-text-field v-model="value.note" hide-details dense solo class="mx-1" placeholder="Notes">
@@ -95,7 +92,6 @@ import RecipeIngredientFoodDialog from "./RecipeIngredientFoodDialog.vue";
 import { useFoods } from "~/composables/use-recipe-foods";
 import { useUnits } from "~/composables/use-recipe-units";
 import { validators } from "~/composables/use-validators";
-import { RecipeIngredientFood } from "~/types/api-types/recipe";
 
 export default defineComponent({
   components: { RecipeIngredientUnitDialog, RecipeIngredientFoodDialog },
@@ -119,20 +115,6 @@ export default defineComponent({
       showTitle: false,
     });
 
-    function checkForUnit(unit: RecipeIngredientFood) {
-      if (units.value && unit?.name) {
-        return units.value.some((u) => u.name === unit.name);
-      }
-      return false;
-    }
-
-    function checkForFood(food: RecipeIngredientFood) {
-      if (foods.value && food?.name) {
-        return foods.value.some((f) => f.name === food.name);
-      }
-      return false;
-    }
-
     function toggleTitle() {
       if (value.title) {
         state.showTitle = false;
@@ -151,8 +133,6 @@ export default defineComponent({
       units,
       ...toRefs(state),
       toggleTitle,
-      checkForUnit,
-      checkForFood,
     };
   },
 });
diff --git a/frontend/components/Domain/Recipe/RecipeIngredientParserMenu.vue b/frontend/components/Domain/Recipe/RecipeIngredientParserMenu.vue
index 9dc903e7968b..e8f9b7367cb1 100644
--- a/frontend/components/Domain/Recipe/RecipeIngredientParserMenu.vue
+++ b/frontend/components/Domain/Recipe/RecipeIngredientParserMenu.vue
@@ -10,7 +10,10 @@
         </v-btn>
       </template>
       <v-card width="400">
-        <v-card-title class="mb-1 pb-0"> Warning Experimental </v-card-title>
+        <v-card-title class="mb-1 pb-0">
+          <v-icon left color="warning"> {{ $globals.icons.alert }}</v-icon> Experimental
+        </v-card-title>
+        <v-divider class="mx-2"> </v-divider>
         <v-card-text>
           Mealie can use natural language processing to attempt to parse and create units, and foods for your Recipe
           ingredients. This is experimental and may not work as expected. If you choose to not use the parsed results
@@ -29,10 +32,32 @@
     </v-menu>
     <BaseDialog ref="domParsedDataDialog" width="100%">
       <v-card-text>
-        <div v-for="(ing, index) in parsedData.ingredient" :key="index">
-          <div class="ml-10 text-body-1" :class="index > 0 ? 'mt-4' : null">{{ ingredients[index].note }}</div>
-          <RecipeIngredientEditor :value="ing" />
-        </div>
+        <v-expansion-panels v-model="panels" multiple>
+          <v-expansion-panel v-for="(ing, index) in parsedData.ingredient" :key="index">
+            <v-expansion-panel-header class="my-0 py-0">
+              <div class="text-body-1">
+                <span>
+                  <v-icon v-if="errors[index].foodError" color="warning">
+                    {{ $globals.icons.close }}
+                  </v-icon>
+                  <v-icon v-else color="success">
+                    {{ $globals.icons.check }}
+                  </v-icon>
+                </span>
+                {{ ingredients[index].note }}
+              </div>
+            </v-expansion-panel-header>
+            <v-expansion-panel-content class="pb-0 mb-0">
+              <RecipeIngredientEditor v-model="parsedData.ingredient[index]" />
+              <v-card-actions>
+                <v-spacer></v-spacer>
+                <BaseButton v-if="errors[index].foodError" color="warning" small @click="createFood(ing.food, index)">
+                  {{ errors[index].foodErrorMessage }}
+                </BaseButton>
+              </v-card-actions>
+            </v-expansion-panel-content>
+          </v-expansion-panel>
+        </v-expansion-panels>
       </v-card-text>
     </BaseDialog>
   </div>
@@ -42,7 +67,18 @@
 import { defineComponent, ref } from "@nuxtjs/composition-api";
 import RecipeIngredientEditor from "./RecipeIngredientEditor.vue";
 import { useApiSingleton } from "~/composables/use-api";
-import { RecipeIngredient } from "~/types/api-types/recipe";
+import { RecipeIngredient, RecipeIngredientUnit } from "~/types/api-types/recipe";
+import { useFoods } from "~/composables/use-recipe-foods";
+import { useUnits } from "~/composables/use-recipe-units";
+import { Food } from "~/api/class-interfaces/recipe-foods";
+
+interface Error {
+  ingredientIndex: number;
+  unitError: Boolean;
+  unitErrorMessage: string;
+  foodError: Boolean;
+  foodErrorMessage: string;
+}
 
 export default defineComponent({
   components: {
@@ -60,8 +96,36 @@ export default defineComponent({
 
     const parsedData = ref<any>([]);
 
+    const { foods, workingFoodData, actions } = useFoods();
+    const { units } = useUnits();
+
     const domParsedDataDialog = ref(null);
 
+    const panels = ref<number[]>([]);
+    const errors = ref<Error[]>([]);
+
+    function checkForUnit(unit: RecipeIngredientUnit) {
+      if (units.value && unit?.name) {
+        return units.value.some((u) => u.name === unit.name);
+      }
+      return false;
+    }
+
+    function checkForFood(food: Food) {
+      if (foods.value && food?.name) {
+        return foods.value.some((f) => f.name === food.name);
+      }
+      return false;
+    }
+
+    async function createFood(food: Food, index: number) {
+      workingFoodData.name = food.name;
+
+      parsedData.value[index] = await actions.createOne();
+
+      errors.value[index].foodError = false;
+    }
+
     async function parseIngredients() {
       // @ts-ignore -> No idea what it's talking about
       const ingredientNotes = ingredients.map((ing: RecipeIngredient) => ing.note);
@@ -73,12 +137,38 @@ export default defineComponent({
         domParsedDataDialog.value.open();
         console.log(data);
         parsedData.value = data;
-      }
 
-      console.log("ingredientNotes", ingredientNotes);
+        // @ts-ignore
+        errors.value = data.ingredient.map((ing, index: number) => {
+          const unitError = !checkForUnit(ing.unit);
+          const foodError = !checkForFood(ing.food);
+
+          let unitErrorMessage = "";
+          let foodErrorMessage = "";
+
+          if (unitError || foodError) {
+            if (unitError) {
+              unitErrorMessage = `Create missing unit '${ing.unit.name || "No unit"}'`;
+            }
+
+            if (foodError) {
+              panels.value.push(index);
+              foodErrorMessage = `Create missing food '${ing.food.name || "No food"}'?`;
+            }
+          }
+
+          return {
+            ingredientIndex: index,
+            unitError,
+            unitErrorMessage,
+            foodError,
+            foodErrorMessage,
+          };
+        });
+      }
     }
 
-    return { api, parseIngredients, parsedData, domParsedDataDialog };
+    return { api, parseIngredients, parsedData, domParsedDataDialog, panels, errors, createFood };
   },
 });
 </script>
diff --git a/frontend/composables/use-recipe-foods.ts b/frontend/composables/use-recipe-foods.ts
index dde81c11d3db..1d0c7ce136dc 100644
--- a/frontend/composables/use-recipe-foods.ts
+++ b/frontend/composables/use-recipe-foods.ts
@@ -48,6 +48,7 @@ export const useFoods = function () {
       const { data } = await api.foods.createOne(workingFoodData);
       if (data && foodStore?.value) {
         foodStore.value.push(data);
+        return data;
       } else {
         this.refreshAll();
       }
diff --git a/frontend/nuxt.config.js b/frontend/nuxt.config.js
index 2143fae2775d..4c6bcdee8521 100644
--- a/frontend/nuxt.config.js
+++ b/frontend/nuxt.config.js
@@ -250,7 +250,7 @@ export default {
           secondary: "#973542",
           success: "#43A047",
           info: "#1976d2",
-          warning: "#FF4081",
+          warning: "#FF6D00",
           error: "#EF5350",
         },
         light: {
@@ -259,7 +259,7 @@ export default {
           secondary: "#973542",
           success: "#43A047",
           info: "#1976d2",
-          warning: "#FF4081",
+          warning: "#FF6D00",
           error: "#EF5350",
         },
       },