diff --git a/cookbook/templates/url_import.html b/cookbook/templates/url_import.html
index 145857d42..e9fdf40be 100644
--- a/cookbook/templates/url_import.html
+++ b/cookbook/templates/url_import.html
@@ -44,7 +44,7 @@
                     <input type="radio" name="auto" id="manual" autocomplete="off"> Manual
                     </label>
                 </div>
-                <div class="input-group mb-3">
+                <div class="input-group my-2">
                 <input class="form-control" v-model="remote_url" placeholder="{% trans 'Enter website URL' %}">
                 <div class="input-group-append">
                     <button @click="loadRecipe()" class="btn btn-primary shadow-none" type="button"
@@ -57,25 +57,36 @@
             <!-- Import from Recipe Application -->
             <div class=" tab-pane fade show" id="nav-app" role="tabpanel">
                 <div class="btn-group btn-group-toggle" data-toggle="buttons">
-                    <label class="btn btn-outline-info btn-sm active" @click="recipe_app='tandoor'">
+                    <label class="btn btn-outline-info btn-sm active" @click="recipe_app='DEFAULT'">
                     <input type="radio" name="auto" id="auto" autocomplete="off" checked> Tandoor
                     </label>
-                    <label class="btn btn-outline-info btn-sm" @click="recipe_app='paprika'">
+                    <label class="btn btn-outline-info btn-sm" @click="recipe_app='PAPRIKA'">
                     <input type="radio" name="auto" id="manual" autocomplete="off"> Paprika
                     </label>
-                    <label class="btn btn-outline-info btn-sm" @click="recipe_app='nextcloud'">
+                    <label class="btn btn-outline-info btn-sm" @click="recipe_app='NEXTCLOUD'">
                     <input type="radio" name="auto" id="manual" autocomplete="off"> Nextcloud Cookbook
                     </label>
-                    <label class="btn btn-outline-info btn-sm" @click="recipe_app='mealie'">
+                    <label class="btn btn-outline-info btn-sm" @click="recipe_app='MEALIE'">
                     <input type="radio" name="auto" id="manual" autocomplete="off"> Mealie
                     </label>
-                    <label class="btn btn-outline-info btn-sm" @click="recipe_app='chowdown'">
+                    <label class="btn btn-outline-info btn-sm" @click="recipe_app='CHOWDOWN'">
                     <input type="radio" name="auto" id="manual" autocomplete="off"> Chowdown
                     </label>
-                    <label class="btn btn-outline-info btn-sm" @click="recipe_app='safron'">
+                    <label class="btn btn-outline-info btn-sm" @click="recipe_app='SAFRON'">
                     <input type="radio" name="auto" id="manual" autocomplete="off"> Safron
                     </label>
                 </div>
+                <b-form-file
+                    class="my-2"
+                    accept=".zip"
+                    multiple
+                    v-model="recipe_files"
+                    placeholder="{% trans 'Select recipe files to import or drop them here...' %}"
+                    drop-placeholder="Drop recipe files here...">
+                </b-form-file>
+                <button @click="importAppRecipe()" class="btn btn-primary shadow-none" type="button"
+                            id="id_btn_app"><i class="fas fa-file-archive"></i> {% trans 'Import' %} 
+                </button>
             </div>
 
             <!-- Import JSON or HTML -->
@@ -89,13 +100,12 @@
                     <input type="radio" name="auto" id="manual" autocomplete="off"> Manual
                     </label>
                 </div>
-                <div class="input-group input-group-lg">
+                <div class="input-group my-2">
                     <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>
-                <br>
-                <button @click="loadSource()" class="btn btn-primary shadow-none" type="button"
-                            id="id_btn_json"><i class="fas fa-code"></i> {% trans 'Import' %} 
+                <button @click="importAppRecipe()" class="btn btn-primary shadow-none" type="button"
+                            id="id_btn_app"><i class="fas fa-code"></i> {% trans 'Import' %} 
                 </button>
             </div>
         </div>
@@ -542,7 +552,8 @@
                 recipe_json: undefined,
                 recipe_tree: undefined,
                 automatic: true,
-                recipe_app: 'tandoor'
+                recipe_app: 'DEFAULT',
+                recipe_files: []
             },
             directives: {
                 tabindex: {
@@ -669,7 +680,6 @@
                 },
                 importAppRecipe: function() {
                     this.error = undefined
-                    this.preview = false
                     this.loading = true
                     let formData = new FormData();
                     let files = []