diff --git a/cookbook/helper/recipe_url_import.py b/cookbook/helper/recipe_url_import.py
index 3a39b403f..307e5f603 100644
--- a/cookbook/helper/recipe_url_import.py
+++ b/cookbook/helper/recipe_url_import.py
@@ -33,7 +33,7 @@ def get_from_scraper(scrape, request):
     except Exception:
         description = ''
 
-    recipe_json['description'] = parse_description(description)
+    recipe_json['description'] = parse_description(description)[:512]
     recipe_json['internal'] = True
 
     try:
diff --git a/vue/src/apps/ImportView/ImportView.vue b/vue/src/apps/ImportView/ImportView.vue
index c0d7b8d65..83e6bc321 100644
--- a/vue/src/apps/ImportView/ImportView.vue
+++ b/vue/src/apps/ImportView/ImportView.vue
@@ -11,70 +11,127 @@
                 <div class="col col-md-12">
                     <b-tabs content-class="mt-3">
                         <b-tab v-bind:title="$t('Website')" active>
-                            <h6>Website</h6>
 
-                            <b-input-group>
-                                <b-input v-model="website_url" placeholder="Website URL"
-                                         @paste="loadRecipe()"></b-input>
-                                <b-input-group-append>
-                                    <b-button variant="primary" @click="loadRecipe()"><i class="fas fa-search"></i>
-                                    </b-button>
-                                </b-input-group-append>
-                            </b-input-group>
+                            <b-card no-body>
+                                <b-card-header header-tag="header" class="p-1" role="tab">
+                                    <b-button block v-b-toggle.id_accordion_url variant="info">Website</b-button>
+                                </b-card-header>
+                                <b-collapse id="id_accordion_url" visible accordion="url_import_accordion" role="tabpanel">
+                                    <b-card-body>
+                                        <b-input-group>
+                                            <b-input v-model="website_url" placeholder="Website URL"
+                                                     @paste="loadRecipe()"></b-input>
+                                            <b-input-group-append>
+                                                <b-button variant="primary" @click="loadRecipe()"><i
+                                                    class="fas fa-search"></i>
+                                                </b-button>
+                                            </b-input-group-append>
+                                        </b-input-group>
 
-                            <a href="#" @click="clearRecentImports()">Clear recent imports</a>
-                            <ul>
-                                <li v-for="x in recent_urls" v-bind:key="x">
-                                    <a href="#" @click="website_url=x; loadRecipe()">{{ x }}</a>
-                                </li>
-                            </ul>
+                                        <a href="#" @click="clearRecentImports()">Clear recent imports</a>
+                                        <ul>
+                                            <li v-for="x in recent_urls" v-bind:key="x">
+                                                <a href="#" @click="website_url=x; loadRecipe()">{{ x }}</a>
+                                            </li>
+                                        </ul>
+                                    </b-card-body>
+                                </b-collapse>
+                            </b-card>
 
-                            <h6>Options</h6>
-                            <!-- preview column -->
-                            <div class="row">
-                                <div class="col col-md-12" v-if="recipe_json !== undefined">
-                                    Images
+                            <b-card no-body>
+                                <b-card-header header-tag="header" class="p-1" role="tab">
+                                    <b-button block v-b-toggle.id_accordion_add_options variant="info">Additional Options</b-button>
+                                </b-card-header>
+                                <b-collapse id="id_accordion_add_options" accordion="url_import_accordion" role="tabpanel">
+                                    <b-card-body v-if="recipe_json !== undefined"> <!-- TODO disable/show message if not imported yet -->
 
-                                    <div class="row">
-                                        <div class="col col-md-12 text-center">
-                                            <b-img rounded fluid :src="recipe_json.image"
-                                                   style="max-height: 30vh"></b-img>
+                                        <div class="row">
+                                            <div class="col col-md-12 text-center">
+                                                <b-img rounded fluid :src="recipe_json.image"
+                                                       style="max-height: 30vh"></b-img>
+                                            </div>
                                         </div>
-                                    </div>
 
-                                    <div class="row mt-1">
-                                        <div class="col col-md-12 text-center">
-                                            <small class="text-muted">Click the image you want to import for this
-                                                recipe</small> <!-- TODO localize -->
+                                        <div class="row mt-1">
+                                            <div class="col col-md-12 text-center">
+                                                <small class="text-muted">Click the image you want to import for this
+                                                    recipe</small> <!-- TODO localize -->
+                                            </div>
+                                            <div class="col col-md-12 text-center">
+                                                <b-img v-for="i in recipe_images" rounded thumbnail fluid :src="i"
+                                                       style="max-height: 10vh" v-bind:key="i"
+                                                       @click="recipe_json.image = i"></b-img>
+                                            </div>
                                         </div>
-                                        <div class="col col-md-12 text-center">
-                                            <b-img v-for="i in recipe_images" rounded thumbnail fluid :src="i"
-                                                   style="max-height: 10vh" v-bind:key="i"
-                                                   @click="recipe_json.image = i"></b-img>
+
+                                        <div class="row mt-2">
+                                            <div class="col col-6">
+                                                <b-card title="Used Keywords">
+
+                                                    <b-list-group>
+                                                        <draggable :list="recipe_json.keywords" group="keywords"
+                                                                   :empty-insert-threshold="10">
+                                                            <b-list-group-item v-for="k in recipe_json.keywords"
+                                                                               v-bind:key="k.name">{{
+                                                                    k.label
+                                                                }}
+                                                            </b-list-group-item>
+                                                        </draggable>
+
+                                                    </b-list-group>
+                                                </b-card>
+                                            </div>
+                                            <div class="col col-6">
+                                                <b-card title="Unused Keywords">
+                                                    <b-list-group>
+                                                        <draggable :list="recipe_json.unused_keywords" group="keywords"
+                                                                   :empty-insert-threshold="10">
+                                                            <b-list-group-item v-for="k in recipe_json.unused_keywords"
+                                                                               v-bind:key="k.name">{{
+                                                                    k.label
+                                                                }}
+                                                            </b-list-group-item>
+                                                        </draggable>
+                                                    </b-list-group>
+                                                </b-card>
+                                            </div>
                                         </div>
-                                    </div>
 
+                                        Steps
+                                        <div class="row">
+                                            <div class="col col-md-12">
+                                                <b-button @click="splitSteps('\n')">Split</b-button>
+                                                <b-list-group>
+                                                    <b-list-group-item v-for="s in recipe_json.steps"
+                                                                       v-bind:key="s.instruction"><span
+                                                        style="white-space: pre-wrap">{{ s.instruction }}</span>
+                                                    </b-list-group-item>
+                                                </b-list-group>
+                                            </div>
 
-                                    Keywords
-                                    <ul>
-                                        <li v-for="k in recipe_json.keywords" v-bind:key="k.name">{{ k.label }}</li>
-                                    </ul>
-                                    unused
-                                    <ul>
-                                        <li v-for="k in recipe_json.unused_keywords" v-bind:key="k.name">{{
-                                                k.label
-                                            }}
-                                        </li>
-                                    </ul>
-                                    Steps
-                                    <ul>
-                                        <li v-for="s in recipe_json.steps" v-bind:key="s">{{ s }}</li>
-                                    </ul>
-                                </div>
-                            </div>
+                                        </div>
+
+                                    </b-card-body>
+                                </b-collapse>
+                            </b-card>
+
+                            <b-card no-body>
+                                <b-card-header header-tag="header" class="p-1" role="tab">
+                                    <b-button block v-b-toggle.id_accordion_import variant="info">Import</b-button>
+                                </b-card-header>
+                                <b-collapse id="id_accordion_import" visible accordion="url_import_accordion" role="tabpanel">
+                                    <b-card-body>
+
+                                        <b-button-group>
+                                            <b-button @click="importRecipe()">Import & View</b-button>
+                                            <b-button @click="importRecipe()">Import & Edit</b-button>
+                                            <b-button @click="importRecipe()">Import & start new import</b-button>
+                                        </b-button-group>
+
+                                    </b-card-body>
+                                </b-collapse>
+                            </b-card>
 
-                            <h6>Import</h6>
-                            <b-button @click="importRecipe()">Import</b-button>
 
                         </b-tab>
                         <b-tab v-bind:title="$t('App')">
@@ -109,6 +166,7 @@ import 'bootstrap-vue/dist/bootstrap-vue.css'
 import {resolveDjangoUrl, ResolveUrlMixin, StandardToasts, ToastMixin} from "@/utils/utils";
 import axios from "axios";
 import {ApiApiFactory} from "@/utils/openapi/api";
+import draggable from "vuedraggable";
 
 Vue.use(BootstrapVue)
 
@@ -118,7 +176,9 @@ export default {
         ResolveUrlMixin,
         ToastMixin,
     ],
-    components: {},
+    components: {
+        draggable
+    },
     data() {
         return {
             LS_IMPORT_RECENT: 'import_recent_urls', //TODO use central helper to manage all local storage keys (and maybe even access)
@@ -146,9 +206,9 @@ export default {
          */
         importRecipe: function () {
             let apiFactory = new ApiApiFactory()
-            apiFactory.createRecipe(this.recipe_json).then(response => {
+            apiFactory.createRecipe(this.recipe_json).then(response => { // save recipe
                 let recipe = response.data
-                apiFactory.imageRecipe(response.data.id, undefined, this.recipe_json.image).then(response => {
+                apiFactory.imageRecipe(response.data.id, undefined, this.recipe_json.image).then(response => { // save recipe image
                     StandardToasts.makeStandardToast(StandardToasts.SUCCESS_CREATE)
                     window.location = resolveDjangoUrl('edit_recipe', recipe.id)
                 }).catch(e => {
@@ -209,6 +269,25 @@ export default {
                 StandardToasts.makeStandardToast(StandardToasts.FAIL_FETCH, err.response.data.msg)
             })
         },
+        /**
+         * Splits the steps of a given recipe at the split character (e.g. \n or \n\n)
+         * @param split_character: character to split steps at
+         */
+        splitSteps: function (split_character) {
+            let steps = []
+            this.recipe_json.steps.forEach(step => {
+                step.instruction.split(split_character).forEach(part => {
+                    steps.push({'instruction': part, 'ingredients': []})
+                })
+            })
+            this.recipe_json.steps.forEach(step => {
+                if (step.ingredients.length > 0) {
+                    console.log('found ingredients', step.ingredients)
+                    steps[0].ingredients = steps[0].ingredients.concat(step.ingredients)
+                }
+            })
+            this.recipe_json.steps = steps
+        },
         /**
          * Clear list of recently imported recipe urls
          */