diff --git a/cookbook/helper/recipe_html_import.py b/cookbook/helper/recipe_html_import.py
index 6df0ce1a7..3bcc51587 100644
--- a/cookbook/helper/recipe_html_import.py
+++ b/cookbook/helper/recipe_html_import.py
@@ -58,6 +58,7 @@ def get_recipe_from_source(text, url, space):
 
     recipe_json = {
                 'name': '',
+                'url': '',
                 'description': '',
                 'image': '',
                 'keywords': [],
diff --git a/cookbook/helper/recipe_url_import.py b/cookbook/helper/recipe_url_import.py
index 49fb7305d..6c0665f69 100644
--- a/cookbook/helper/recipe_url_import.py
+++ b/cookbook/helper/recipe_url_import.py
@@ -102,6 +102,7 @@ def get_from_scraper(scrape, space):
         recipe_json['recipeInstructions'] = ""
 
     if scrape.url:
+        recipe_json['url'] = scrape.url
         recipe_json['recipeInstructions'] += "\n\nImported from " + scrape.url
     return recipe_json
 
diff --git a/cookbook/templates/url_import.html b/cookbook/templates/url_import.html
index 066d85035..4f48c7234 100644
--- a/cookbook/templates/url_import.html
+++ b/cookbook/templates/url_import.html
@@ -22,20 +22,13 @@
 
 {% block content %}
     <div id="app">
-        <div class="row px-3" style="justify-content:space-between;">
-            <h2> {% trans 'Import' %}</h2>
-            <a class="btn btn-outline-info btn-sm" 
-                style="height:50%"
-                href="{% bookmarklet request %}" 
-                title="{% trans 'Drag me to your bookmarks to import recipes from anywhere' %}">
-            <img src="{% static 'assets/favicon-16x16.png' %}">{% trans 'Bookmark Me!' %} </a>
-        </div>
-        <nav class="nav nav-pills flex-sm-row" id="nav-tabs" style="margin-bottom:10px">
-            <a class="nav-link active" href="#nav-url" data-toggle="tab" role="tab" >URL</a>
-            <a class="nav-link" href="#nav-app" data-toggle="tab" role="tab" >App</a>
-            <a class="nav-link" href="#nav-source" data-toggle="tab" role="tab" >Source</a>
-            <a class="nav-link disabled" href="#nav-text" data-toggle="tab" role="tab" >Text</a>
-            <a class="nav-link disabled" href="#nav-file" data-toggle="tab" role="tab" >File</a>
+        <h2> {% trans 'Import' %} </h2>
+        <nav class="nav nav-pills flex-sm-row" style="margin-bottom:10px">
+            <a class="nav-link active" href="#nav-url" data-toggle="tab" role="tab" aria-controls="nav-url" aria-selected="true" @click="mode='url'">URL</a>
+            <a class="nav-link" href="#nav-app" data-toggle="tab" role="tab" aria-controls="nav-app" @click="mode='app'">App</a>
+            <a class="nav-link" href="#nav-source" data-toggle="tab" role="tab" aria-controls="nav-source" @click="mode='source'">Source</a>
+            <a class="nav-link disabled" href="#nav-text" data-toggle="tab" role="tab" aria-controls="nav-text" @click="mode='text'">Text</a>
+            <a class="nav-link disabled" href="#nav-file" data-toggle="tab" role="tab" aria-controls="nav-file" @click="mode='file'">File</a>
         </nav>
 
         
@@ -111,7 +104,7 @@
                     <textarea class="form-control input-group-append" v-model="source_data" rows=10 placeholder="{% trans 'Paste json or html source here to load recipe.' %}" style="font-size: 12px">
                     </textarea>
                 </div>
-                <button @click="loadSource()" class="btn btn-primary shadow-none" type="button"
+                <button @click="loadRecipe()" class="btn btn-primary shadow-none" type="button"
                             id="id_btn_app"><i class="fas fa-code"></i> {% trans 'Import' %} 
                 </button>
             </div>
@@ -177,7 +170,7 @@
                                 <b-collapse id="collapse-kw" visible class="mt-2">
                                     <div class="card-body drop-zone"   @drop="replacePreview('keywords', $event)" @dragover.prevent @dragenter.prevent>
                                         <div v-for="kw in recipe_json.keywords">
-                                            <div class="card-text">[[kw]] </div>
+                                            <div class="card-text">[[kw.text]] </div>
                                         </div>
                                     </div>
                                 </b-collapse>
@@ -273,7 +266,7 @@
                     </div>
                     <br/>
                     <!-- end of preview card -->
-                    <button @click="loadRecipeManual()" class="btn btn-primary shadow-none" type="button"
+                    <button @click="showRecipe()" class="btn btn-primary shadow-none" type="button"
                                 id="id_btn_json"><i class="fas fa-code"></i> {% trans 'Import' %} 
                     </button>
                 </div>
@@ -638,6 +631,7 @@
                 recipe_app: 'DEFAULT',
                 recipe_files: [],
                 images: [],
+                mode: 'url'
             },
             directives: {
                 tabindex: {
@@ -675,51 +669,20 @@
                     this.error = undefined
                     this.loading = true
                     this.preview = false
-                    if (this.automatic) {
-                        console.log('true')
-                    }
-                    this.$http.post("{% url 'api_recipe_from_url' %}", {'url': this.remote_url, 'auto':this.automatic}, {emulateJSON: true}).then((response) => {
+                    this.$http.post("{% url 'api_recipe_from_source' %}", {
+                                'url': this.remote_url, 
+                                'data': this.source_data, 
+                                'auto':this.automatic, 
+                                'mode':this.mode}, {emulateJSON: true}).then((response) => {
                         console.log(response.data)
+                        this.recipe_json = response.data['recipe_json'];
+                        this.recipe_tree = response.data['recipe_tree'];
+                        this.recipe_html = response.data['recipe_html'];
+                        this.images = response.data['images'];
                         if (this.automatic) {
-                            this.recipe_data = response.data;
-                        } else {
-                            this.recipe_json = response.data['recipe_json'];
-                            this.recipe_tree = response.data['recipe_tree'];
-                            this.recipe_html = response.data['recipe_html'];
-                            this.images = response.data['images'];
-                            this.preview = true
-                        }
-                        this.loading = false
-                    }).catch((err) => {
-                        this.error = err.data
-                        this.loading = false
-                        console.log(err)
-                        let msg = gettext('There was an error loading a resource!')
-                        if (err.bodyText.length < 300) {
-                            msg += err.bodyText
-                        } else {
-                            msg += ' ' + err.status + ' ' + err.statusText
-                        }
-                        this.makeToast(gettext('Error'), msg, 'danger')
-                    })
-                },
-                loadSource: function() {
-                    this.recipe_data = undefined
-                    this.recipe_json = undefined
-                    this.recipe_tree = undefined
-                    this.images = []
-                    this.error = undefined
-                    this.loading = true
-                    this.preview = false
-                    this.$http.post("{% url 'api_recipe_from_source' %}", {'data': this.source_data, 'url': this.remote_url, 'auto':this.automatic}, {emulateJSON: true}).then((response) => {
-                        console.log(response.data)
-                        if (this.automatic) {
-                            this.recipe_data = response.data['recipe_json'];
+                            this.recipe_data = this.recipe_json;
                             this.preview = false
                         } else {
-                            this.recipe_json = response.data['recipe_json'];
-                            this.recipe_tree = response.data['recipe_tree'];
-                            this.recipe_html = response.data['recipe_html'];
                             this.preview = true
                         }
                         this.loading = false
@@ -759,22 +722,9 @@
                         this.makeToast(gettext('Error'), gettext('There was an error deleting bookmarklet!') + err.bodyText, 'danger')
                     })
                 },
-                loadRecipeManual: function () {
-                    this.error = undefined
+                showRecipe: function() {
                     this.preview = false
-                    this.loading = true
-                    this.recipe_json['@type'] = "Recipe"
-                    this.$http.post("{% url 'api_recipe_from_source' %}", {'data': JSON.stringify(this.recipe_json), 'auto':'true'}, {emulateJSON: true}).then((response) => {
-                        console.log(response.data)
-                        this.recipe_data = response.data['recipe_json'];
-                        this.loading = false
-                        this.preview = false
-                    }).catch((err) => {
-                        this.error = err.data
-                        this.loading = false
-                        console.log(err)
-                        this.makeToast(gettext('Error'), gettext('There was an error loading a resource!') + err.bodyText, 'danger')
-                    })
+                    this.recipe_data = this.recipe_json
                 },
                 importRecipe: function () {
                     if (this.recipe_data.name.length > 128) {
@@ -950,7 +900,8 @@
                             this.recipe_json.image=v
                             break;
                         case 'keywords':
-                            this.recipe_json.keywords.push(v)
+                            let new_keyword = {'text': v, 'id': null}
+                            this.recipe_json.keywords.push(new_keyword)
                             break;
                         case 'servings':
                             this.recipe_json.servings=v
diff --git a/cookbook/urls.py b/cookbook/urls.py
index f9810aa06..f26ce8b4a 100644
--- a/cookbook/urls.py
+++ b/cookbook/urls.py
@@ -93,7 +93,6 @@ urlpatterns = [
     path('api/sync_all/', api.sync_all, name='api_sync'),
     path('api/log_cooking/<int:recipe_id>/', api.log_cooking, name='api_log_cooking'),
     path('api/plan-ical/<slug:from_date>/<slug:to_date>/', api.get_plan_ical, name='api_get_plan_ical'),
-    path('api/recipe-from-url/', api.recipe_from_url, name='api_recipe_from_url'),
     path('api/recipe-from-source/', api.recipe_from_source, name='api_recipe_from_source'),
     path('api/backup/', api.get_backup, name='api_backup'),
     path('api/ingredient-from-string/', api.ingredient_from_string, name='api_ingredient_from_string'),