diff --git a/frontend/components/Domain/Recipe/RecipeIngredientParserMenu.vue b/frontend/components/Domain/Recipe/RecipeIngredientParserMenu.vue
index 22d554093479..4456249275ff 100644
--- a/frontend/components/Domain/Recipe/RecipeIngredientParserMenu.vue
+++ b/frontend/components/Domain/Recipe/RecipeIngredientParserMenu.vue
@@ -1,89 +1,40 @@
 <template>
-  <div>
-    <v-menu offset-y offset-overflow left top nudge-top="6" :close-on-content-click="false">
-      <template #activator="{ on, attrs }">
-        <v-btn color="accent" dark v-bind="attrs" v-on="on">
-          <v-icon left>
-            {{ $globals.icons.foods }}
-          </v-icon>
-          Parse
-        </v-btn>
-      </template>
-      <v-card width="400">
-        <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
-          you can click the close button at the top of the page and your changes will not be saved.
-        </v-card-text>
-        <v-card-actions>
-          <v-spacer></v-spacer>
-          <BaseButton small color="accent" :to="`${slug}/ingredient-parser`">
-            <template #icon>
-              {{ $globals.icons.check }}
-            </template>
-            {{ $t("general.confirm") }}
-          </BaseButton>
-        </v-card-actions>
-      </v-card>
-    </v-menu>
-    <BaseDialog ref="domParsedDataDialog" width="100%">
+  <v-menu offset-y offset-overflow left top nudge-top="6" :close-on-content-click="false">
+    <template #activator="{ on, attrs }">
+      <v-btn color="accent" dark v-bind="attrs" v-on="on">
+        <v-icon left>
+          {{ $globals.icons.foods }}
+        </v-icon>
+        Parse
+      </v-btn>
+    </template>
+    <v-card width="400">
+      <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>
-        <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>
+        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 you
+        can click the close button at the top of the page and your changes will not be saved.
       </v-card-text>
-    </BaseDialog>
-  </div>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <BaseButton small color="accent" :to="`${slug}/ingredient-parser`">
+          <template #icon>
+            {{ $globals.icons.check }}
+          </template>
+          {{ $t("general.confirm") }}
+        </BaseButton>
+      </v-card-actions>
+    </v-card>
+  </v-menu>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from "@nuxtjs/composition-api";
-import RecipeIngredientEditor from "./RecipeIngredientEditor.vue";
-import { useApiSingleton } from "~/composables/use-api";
-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;
-}
+import { defineComponent } from "@nuxtjs/composition-api";
 
 export default defineComponent({
-  components: {
-    RecipeIngredientEditor,
-  },
   props: {
     ingredients: {
       type: Array,
@@ -94,85 +45,8 @@ export default defineComponent({
       required: true,
     },
   },
-  setup(props) {
-    const ingredients = props.ingredients;
-    const api = useApiSingleton();
-
-    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);
-
-      const { data } = await api.recipes.parseIngredients(ingredientNotes);
-
-      if (data) {
-        // @ts-ignore
-        domParsedDataDialog.value.open();
-        console.log(data);
-        parsedData.value = data;
-
-        // @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, panels, errors, createFood };
+  setup() {
+    return {};
   },
 });
 </script>