diff --git a/cookbook/helper/recipe_url_import.py b/cookbook/helper/recipe_url_import.py
index 74000dafc..576573030 100644
--- a/cookbook/helper/recipe_url_import.py
+++ b/cookbook/helper/recipe_url_import.py
@@ -35,18 +35,30 @@ def find_recipe_json(ld_json, url):
 
         for x in ld_json['recipeIngredient']:
             ingredient_split = x.split()
+            ingredient = None
+            amount = 0
+            unit = ''
             if len(ingredient_split) > 2:
+                ingredient = " ".join(ingredient_split[2:])
+                unit = ingredient_split[1]
                 try:
-                    ingredients.append({'amount': float(ingredient_split[0].replace(',', '.')), 'unit': ingredient_split[1], 'ingredient': " ".join(ingredient_split[2:])})
+                    amount = float(ingredient_split[0].replace(',', '.'))
                 except ValueError:
-                    ingredients.append({'amount': 0, 'unit': '', 'ingredient': " ".join(ingredient_split)})
+                    amount = 0
+                    ingredient = " ".join(ingredient_split)
             if len(ingredient_split) == 2:
+                ingredient = " ".join(ingredient_split[1:])
+                unit = ''
                 try:
-                    ingredients.append({'amount': float(ingredient_split[0].replace(',', '.')), 'unit': '', 'ingredient': " ".join(ingredient_split[1:])})
+                    amount = float(ingredient_split[0].replace(',', '.'))
                 except ValueError:
-                    ingredients.append({'amount': 0, 'unit': '', 'ingredient': " ".join(ingredient_split)})
+                    amount = 0
+                    ingredient = " ".join(ingredient_split)
             if len(ingredient_split) == 1:
-                ingredients.append({'amount': 0, 'unit': '', 'ingredient': " ".join(ingredient_split)})
+                ingredient = " ".join(ingredient_split)
+
+            if ingredient:
+                ingredients.append({'amount': amount, 'unit': {'text': unit, 'id': 'null'}, 'ingredient': {'text': ingredient, 'id': 'null'}, 'original': x})
 
         ld_json['recipeIngredient'] = ingredients
     else:
diff --git a/cookbook/templates/url_import.html b/cookbook/templates/url_import.html
index 56ff68b1d..8468dbf8d 100644
--- a/cookbook/templates/url_import.html
+++ b/cookbook/templates/url_import.html
@@ -67,7 +67,7 @@
 
                 <div class="row">
                     <div class="col-md-12">
-                        <table class="table table-responsive-sm table-sm">
+                        <table class="table">
                             <thead>
                             <tr>
                                 <th>{% trans 'Amount' %}</th>
@@ -77,21 +77,60 @@
                             </tr>
                             </thead>
                             <tbody>
+                            <template v-for="(i, index) in recipe_data.recipeIngredient">
+
+                                <tr>
+                                    <td><input class="form-control" v-model="i.amount"></td>
+                                    <td>
+                                        <multiselect
+                                                v-model="i.unit"
+                                                :options="units"
+                                                :close-on-select="true"
+                                                :clear-on-select="true"
+                                                :hide-selected="true"
+                                                :preserve-search="true"
+                                                placeholder="{% trans 'Select one' %}"
+                                                tag-placeholder="{% trans 'Create new' %}"
+                                                label="text"
+                                                :taggable="true"
+                                                track-by="id"
+                                                :multiple="false">
+                                        </multiselect>
+
+                                    </td>
+                                    <td>
+                                        <multiselect
+                                                v-model="i.ingredient"
+                                                :options="ingredients"
+                                                :taggable="true"
+                                                @tag="addIngredientType"
+                                                placeholder="{% trans 'Select one' %}"
+                                                tag-placeholder="{% trans 'Create new' %}"
+                                                :close-on-select="true"
+                                                :clear-on-select="true"
+                                                :hide-selected="true"
+                                                :preserve-search="true"
+                                                label="text"
+                                                :id="index"
+                                                track-by="id"
+                                                :multiple="false">
+                                        </multiselect>
+
+                                    </td>
+                                    <td style="vertical-align: middle;text-align: center">
+                                        <button class="btn btn-outline-danger" type="button"
+                                                @click="deleteIngredient(i)"><i
+                                                class="fas fa-trash-alt"></i></button>
+                                    </td>
+                                </tr>
+                            </template>
 
-                            <tr v-for="i in recipe_data.recipeIngredient">
-                                <td><input class="form-control" v-model="i.amount"></td>
-                                <td><input class="form-control" v-model="i.unit"></td>
-                                <td><input class="form-control" v-model="i.ingredient"></td>
-                                <td style="vertical-align: middle;text-align: center">
-                                    <button class="btn btn-outline-danger" type="button" @click="deleteIngredient(i)"><i
-                                            class="fas fa-trash-alt"></i></button>
-                                </td>
-                            </tr>
                             </tbody>
                         </table>
                         <div style="text-align: center">
-                           <button class="btn btn-success" type="button" @click="addIngredient()"><i class="fas fa-plus"></i></button>
-                        <br/><br/>
+                            <button class="btn btn-success" type="button" @click="addIngredient()"><i
+                                    class="fas fa-plus"></i></button>
+                            <br/><br/>
                         </div>
 
                     </div>
@@ -113,7 +152,7 @@
                             :clear-on-select="true"
                             :hide-selected="true"
                             :preserve-search="true"
-                            placeholder="Pick some"
+                            placeholder="{% trans 'Select one' %}"
                             label="text"
                             track-by="id"
                             id="id_keywords"
@@ -189,15 +228,28 @@
             delimiters: ['[[', ']]'],
             el: '#app',
             data: {
-                remote_url: '',
+                value: [
+                    {name: 'Javascript', code: 'js'}
+                ],
+                options: [
+                    {name: 'Vue.js', code: 'vu'},
+                    {name: 'Javascript', code: 'js'},
+                    {name: 'Open Source', code: 'os'}
+                ],
+                remote_url: 'https://www.rezeptschachtel.de/schwarzwaelder_kirschtorte_rezept.html',
                 keywords: [],
+                units: [],
+                ingredients: [],
                 recipe_data: undefined,
                 error: undefined,
                 loading: false,
                 all_keywords: false,
             },
             mounted: function () {
+                this.loadRecipe();
                 this.getKeywords();
+                this.getUnits();
+                this.getIngredients();
             },
             methods: {
                 loadRecipe: function () {
@@ -213,6 +265,14 @@
                         console.log(err)
                     })
                 },
+                addTag(newTag) {
+                    const tag = {
+                        name: newTag,
+                        code: newTag.substring(0, 2) + Math.floor((Math.random() * 10000000))
+                    }
+                    this.options.push(tag)
+                    this.value.push(tag)
+                },
                 importRecipe: function () {
                     this.$set(this.recipe_data, 'all_keywords', this.all_keywords)
                     this.$http.post(`{% url 'data_import_url' %}`, this.recipe_data).then((response) => {
@@ -226,11 +286,18 @@
                 },
                 addIngredient: function (i) {
                     this.recipe_data.recipeIngredient.push({
-                        unit: '{{ request.user.userpreference.default_unit }}',
+                        unit: {id: 'null', text: '{{ request.user.userpreference.default_unit }}'},
                         amount: 0,
-                        ingredient: ''
+                        ingredient: {id: 'null', text: ''}
                     })
                 },
+                addIngredientType: function (tag, index) {
+                    let new_ingredient = this.recipe_data.recipeIngredient[index]
+                    new_ingredient.ingredient = {'id': 'null', 'text': tag}
+                    this.ingredients.push(new_ingredient.ingredient)
+                    this.recipe_data.recipeIngredient[index] = new_ingredient
+                },
+                //TODO only load when needed
                 getKeywords: function () {
                     this.$http.get("{% url 'dal_keyword' %}").then((response) => {
                         this.keywords = response.data.results;
@@ -238,6 +305,20 @@
                         console.log(err)
                     })
                 },
+                getUnits: function () {
+                    this.$http.get("{% url 'dal_unit' %}").then((response) => {
+                        this.units = response.data.results;
+                    }).catch((err) => {
+                        console.log(err)
+                    })
+                },
+                getIngredients: function () {
+                    this.$http.get("{% url 'dal_ingredient' %}").then((response) => {
+                        this.ingredients = response.data.results;
+                    }).catch((err) => {
+                        console.log(err)
+                    })
+                },
             }
         });
     </script>
diff --git a/cookbook/views/data.py b/cookbook/views/data.py
index 3a2f71dd2..5a078aae6 100644
--- a/cookbook/views/data.py
+++ b/cookbook/views/data.py
@@ -115,8 +115,8 @@ def import_url(request):
                 recipe.keywords.add(k)
 
         for ing in data['recipeIngredient']:
-            i, i_created = Ingredient.objects.get_or_create(name=ing['ingredient'])
-            u, u_created = Unit.objects.get_or_create(name=ing['unit'])
+            i, i_created = Ingredient.objects.get_or_create(name=ing['ingredient']['text'])
+            u, u_created = Unit.objects.get_or_create(name=ing['unit']['text'])
 
             if isinstance(ing['amount'], str):
                 try: