diff --git a/cookbook/migrations/0196_food_url.py b/cookbook/migrations/0196_food_url.py
new file mode 100644
index 00000000..aef8c595
--- /dev/null
+++ b/cookbook/migrations/0196_food_url.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.1.10 on 2023-07-22 06:45
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('cookbook', '0195_invitelink_internal_note_userspace_internal_note_and_more'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='food',
+            name='url',
+            field=models.CharField(blank=True, default='', max_length=1024, null=True),
+        ),
+    ]
diff --git a/cookbook/models.py b/cookbook/models.py
index 5a931024..f4369c70 100644
--- a/cookbook/models.py
+++ b/cookbook/models.py
@@ -579,6 +579,7 @@ class Food(ExportModelOperationsMixin('food'), TreeModel, PermissionModelMixin):
     name = models.CharField(max_length=128, validators=[MinLengthValidator(1)])
     plural_name = models.CharField(max_length=128, null=True, blank=True, default=None)
     recipe = models.ForeignKey('Recipe', null=True, blank=True, on_delete=models.SET_NULL)
+    url = models.CharField(max_length=1024, blank=True, null=True, default='')
     supermarket_category = models.ForeignKey(SupermarketCategory, null=True, blank=True, on_delete=models.SET_NULL)  # inherited field
     ignore_shopping = models.BooleanField(default=False)  # inherited field
     onhand_users = models.ManyToManyField(User, blank=True)
diff --git a/cookbook/serializer.py b/cookbook/serializer.py
index c867b2a6..28a348e1 100644
--- a/cookbook/serializer.py
+++ b/cookbook/serializer.py
@@ -684,7 +684,7 @@ class FoodSerializer(UniqueFieldsMixin, WritableNestedModelSerializer, ExtendedR
     class Meta:
         model = Food
         fields = (
-            'id', 'name', 'plural_name', 'description', 'shopping', 'recipe',
+            'id', 'name', 'plural_name', 'description', 'shopping', 'recipe', 'url',
             'properties', 'properties_food_amount', 'properties_food_unit',
             'food_onhand', 'supermarket_category',
             'image', 'parent', 'numchild', 'numrecipe', 'inherit_fields', 'full_name', 'ignore_shopping',
diff --git a/vue/src/components/FoodEditor.vue b/vue/src/components/FoodEditor.vue
index f1cf6f36..232ae4bc 100644
--- a/vue/src/components/FoodEditor.vue
+++ b/vue/src/components/FoodEditor.vue
@@ -170,6 +170,10 @@
                                 ></generic-multiselect>
                             </b-form-group>
 
+                            <b-form-group :label="$t('URL')" description="">
+                                <b-form-input v-model="food.url"></b-form-input>
+                            </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>
@@ -309,6 +313,7 @@ export default {
                 description: "",
                 shopping: false,
                 recipe: null,
+                url: '',
                 properties: [],
                 properties_food_amount: 100,
                 properties_food_unit: {name: 'g'},
diff --git a/vue/src/components/IngredientComponent.vue b/vue/src/components/IngredientComponent.vue
index 3fc431e0..eb26b87a 100644
--- a/vue/src/components/IngredientComponent.vue
+++ b/vue/src/components/IngredientComponent.vue
@@ -30,21 +30,13 @@
             </td>
             <td @click="done">
                 <template v-if="ingredient.food !== null">
-                    <a :href="resolveDjangoUrl('view_recipe', ingredient.food.recipe.id)" v-if="ingredient.food.recipe !== null" target="_blank" rel="noopener noreferrer">{{
-                        ingredient.food.name
-                    }}</a>
-                    <template v-if="ingredient.food.recipe === null">
-                        <template>
-                            <template v-if="ingredient.food.plural_name === '' || ingredient.food.plural_name === null">
-                                <span>{{ ingredient.food.name }}</span>
-                            </template>
-                            <template v-else>
-                                <span v-if="ingredient.always_use_plural_food">{{ ingredient.food.plural_name }}</span>
-                                <span v-else-if="ingredient.no_amount">{{ ingredient.food.name }}</span>
-                                <span v-else-if="ingredient.amount * this.ingredient_factor > 1">{{ ingredient.food.plural_name }}</span>
-                                <span v-else>{{ ingredient.food.name }}</span>
-                            </template>
-                        </template>
+                    <a :href="resolveDjangoUrl('view_recipe', ingredient.food.recipe.id)" v-if="ingredient.food.recipe !== null" target="_blank" rel="noopener noreferrer">
+                        {{ ingredientName(ingredient) }}
+                    </a>
+                    <a :href="ingredient.food.url" v-else-if="ingredient.food.url !== ''" target="_blank" rel="noopener noreferrer">
+                        {{ ingredientName(ingredient) }}</a>
+                    <template v-else>
+                        <span>{{ ingredientName(ingredient) }}</span>
                     </template>
                 </template>
             </td>
@@ -62,7 +54,7 @@
 </template>
 
 <script>
-import { calculateAmount, ResolveUrlMixin } from "@/utils/utils"
+import {calculateAmount, ResolveUrlMixin} from "@/utils/utils"
 
 import Vue from "vue"
 import VueSanitize from "vue-sanitize"
@@ -73,8 +65,8 @@ export default {
     name: "IngredientComponent",
     props: {
         ingredient: Object,
-        ingredient_factor: { type: Number, default: 1 },
-        detailed: { type: Boolean, default: true },
+        ingredient_factor: {type: Number, default: 1},
+        detailed: {type: Boolean, default: true},
     },
     mixins: [ResolveUrlMixin],
     data() {
@@ -83,7 +75,8 @@ export default {
         }
     },
     watch: {},
-    mounted() {},
+    mounted() {
+    },
     methods: {
         calculateAmount: function (x) {
             return this.$sanitize(calculateAmount(x, this.ingredient_factor))
@@ -92,6 +85,20 @@ export default {
         done: function () {
             this.$emit("checked-state-changed", this.ingredient)
         },
+        ingredientName: function (ingredient) {
+            if (ingredient.food.plural_name == null || ingredient.food.plural_name === '') {
+                return ingredient.food.name
+            }
+            if (ingredient.always_use_plural_food) {
+                return ingredient.food.plural_name
+            } else if (ingredient.no_amount) {
+                return ingredient.food.name
+            } else if (ingredient.amount * this.ingredient_factor > 1) {
+                return ingredient.food.plural_name
+            } else {
+                return ingredient.food.name
+            }
+        }
     },
 }
 </script>