diff --git a/cookbook/models.py b/cookbook/models.py
index 278324bc..6fc3fb30 100644
--- a/cookbook/models.py
+++ b/cookbook/models.py
@@ -618,9 +618,7 @@ class NutritionInformation(models.Model, PermissionModelMixin):
     )
     proteins = models.DecimalField(default=0, decimal_places=16, max_digits=32)
     calories = models.DecimalField(default=0, decimal_places=16, max_digits=32)
-    source = models.CharField(
-        max_length=512, default="", null=True, blank=True
-    )
+    source = models.CharField( max_length=512, default="", null=True, blank=True)
 
     space = models.ForeignKey(Space, on_delete=models.CASCADE)
     objects = ScopedManager(space='space')
@@ -629,6 +627,15 @@ class NutritionInformation(models.Model, PermissionModelMixin):
         return f'Nutrition {self.pk}'
 
 
+# class NutritionType(models.Model, PermissionModelMixin):
+#     name = models.CharField(max_length=128)
+#     icon = models.CharField(max_length=16, blank=True, null=True)
+#     description = models.CharField(max_length=512, blank=True, null=True)
+#
+#     space = models.ForeignKey(Space, on_delete=models.CASCADE)
+#     objects = ScopedManager(space='space')
+
+
 class Recipe(ExportModelOperationsMixin('recipe'), models.Model, PermissionModelMixin):
     name = models.CharField(max_length=128)
     description = models.CharField(max_length=512, blank=True, null=True)
diff --git a/vue/src/apps/RecipeEditView/RecipeEditView.vue b/vue/src/apps/RecipeEditView/RecipeEditView.vue
index 9b8f081d..d8bf65a6 100644
--- a/vue/src/apps/RecipeEditView/RecipeEditView.vue
+++ b/vue/src/apps/RecipeEditView/RecipeEditView.vue
@@ -8,7 +8,7 @@
             <div class="row">
                 <div class="col-md-12">
                     <label for="id_name"> {{ $t("Name") }}</label>
-                    <input class="form-control" id="id_name" v-model="recipe.name" />
+                    <input class="form-control" id="id_name" v-model="recipe.name"/>
                 </div>
             </div>
             <div class="row pt-2">
@@ -16,13 +16,15 @@
                     <label for="id_description">
                         {{ $t("Description") }}
                     </label>
-                    <textarea id="id_description" class="form-control" v-model="recipe.description" maxlength="512"></textarea>
+                    <textarea id="id_description" class="form-control" v-model="recipe.description"
+                              maxlength="512"></textarea>
                 </div>
             </div>
 
             <div class="row pt-2">
                 <div class="col-md-6" style="max-height: 50vh; min-height: 30vh">
-                    <input id="id_file_upload" ref="file_upload" type="file" hidden @change="uploadImage($event.target.files[0])" />
+                    <input id="id_file_upload" ref="file_upload" type="file" hidden
+                           @change="uploadImage($event.target.files[0])"/>
 
                     <div
                         class="h-100 w-100 border border-primary rounded"
@@ -31,26 +33,31 @@
                         @dragover.prevent
                         @click="$refs.file_upload.click()"
                     >
-                        <i class="far fa-image fa-10x text-primary" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)" v-if="!recipe.image"></i>
+                        <i class="far fa-image fa-10x text-primary"
+                           style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)"
+                           v-if="!recipe.image"></i>
 
-                        <img :src="recipe.image" id="id_image" class="img img-fluid img-responsive" style="object-fit: cover; height: 100%" v-if="recipe.image" />
+                        <img :src="recipe.image" id="id_image" class="img img-fluid img-responsive"
+                             style="object-fit: cover; height: 100%" v-if="recipe.image"/>
                     </div>
-                    <button style="bottom: 10px; left: 30px; position: absolute" class="btn btn-danger" @click="deleteImage" v-if="recipe.image">{{ $t("Delete") }}</button>
+                    <button style="bottom: 10px; left: 30px; position: absolute" class="btn btn-danger"
+                            @click="deleteImage" v-if="recipe.image">{{ $t("Delete") }}
+                    </button>
                 </div>
 
                 <div class="col-md-6 mt-1">
                     <label for="id_name"> {{ $t("Preparation") }} {{ $t("Time") }} ({{ $t("min") }})</label>
-                    <input class="form-control" id="id_prep_time" v-model="recipe.working_time" type="number" />
-                    <br />
+                    <input class="form-control" id="id_prep_time" v-model="recipe.working_time" type="number"/>
+                    <br/>
                     <label for="id_name"> {{ $t("Waiting") }} {{ $t("Time") }} ({{ $t("min") }})</label>
-                    <input class="form-control" id="id_wait_time" v-model="recipe.waiting_time" type="number" />
-                    <br />
+                    <input class="form-control" id="id_wait_time" v-model="recipe.waiting_time" type="number"/>
+                    <br/>
                     <label for="id_name"> {{ $t("Servings") }}</label>
-                    <input class="form-control" id="id_servings" v-model="recipe.servings" type="number" />
-                    <br />
+                    <input class="form-control" id="id_servings" v-model="recipe.servings" type="number"/>
+                    <br/>
                     <label for="id_name"> {{ $t("Servings") }} {{ $t("Text") }}</label>
-                    <input class="form-control" id="id_servings_text" v-model="recipe.servings_text" maxlength="32" />
-                    <br />
+                    <input class="form-control" id="id_servings_text" v-model="recipe.servings_text" maxlength="32"/>
+                    <br/>
                     <label for="id_name"> {{ $t("Keywords") }}</label>
                     <multiselect
                         v-model="recipe.keywords"
@@ -113,22 +120,26 @@
                             <b-collapse id="id_nutrition_collapse" class="mt-2" v-model="nutrition_visible">
                                 <div class="card-body" v-if="recipe.nutrition !== null">
                                     <b-alert show>
-                                        There is currently only very basic support for tracking nutritional information. A
-                                        <a href="https://github.com/vabene1111/recipes/issues/896" target="_blank" rel="noreferrer nofollow">big update</a> is planned to improve on this in many different areas.
+                                        There is currently only very basic support for tracking nutritional information.
+                                        A
+                                        <a href="https://github.com/vabene1111/recipes/issues/896" target="_blank"
+                                           rel="noreferrer nofollow">big update</a> is planned to improve on this in
+                                        many different areas.
                                     </b-alert>
 
                                     <label for="id_name"> {{ $t(energy()) }}</label>
 
-                                    <input class="form-control" id="id_calories" v-model="recipe.nutrition.calories" />
+                                    <input class="form-control" id="id_calories" v-model="recipe.nutrition.calories"/>
 
                                     <label for="id_name"> {{ $t("Carbohydrates") }}</label>
-                                    <input class="form-control" id="id_carbohydrates" v-model="recipe.nutrition.carbohydrates" />
+                                    <input class="form-control" id="id_carbohydrates"
+                                           v-model="recipe.nutrition.carbohydrates"/>
 
                                     <label for="id_name"> {{ $t("Fats") }}</label>
-                                    <input class="form-control" id="id_fats" v-model="recipe.nutrition.fats" />
+                                    <input class="form-control" id="id_fats" v-model="recipe.nutrition.fats"/>
 
                                     <label for="id_name"> {{ $t("Proteins") }}</label>
-                                    <input class="form-control" id="id_proteins" v-model="recipe.nutrition.proteins" />
+                                    <input class="form-control" id="id_proteins" v-model="recipe.nutrition.proteins"/>
                                 </div>
                             </b-collapse>
                         </div>
@@ -136,201 +147,224 @@
                 </div>
             </template>
 
-            <draggable :list="recipe.steps" group="steps" :empty-insert-threshold="10" handle=".handle" @sort="sortSteps()">
-                <div v-for="(step, step_index) in recipe.steps" style="margin-top: 1vh" class="card" v-bind:key="step_index">
-                    <div class="card-body" :id="`id_card_step_${step_index}`">
-                        <div class="row">
-                            <div class="col-11">
-                                <h4 class="handle" :id="'id_step_' + step_index">
-                                    <i class="fas fa-paragraph" v-if="step.type === 'TEXT'"></i>
-                                    <i class="fas fa-clock" v-if="step.type === 'TIME'"></i>
-                                    <template v-if="step.name !== ''">{{ step.name }}</template>
-                                    <template v-else>{{ $t("Step") }} {{ step_index + 1 }}</template>
-                                </h4>
-                            </div>
-                            <div class="col-1" style="text-align: right">
-                                <a class="btn shadow-none btn-lg" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                                    <i class="fas fa-ellipsis-v text-muted"></i>
-                                </a>
+            <draggable :list="recipe.steps" group="steps" :empty-insert-threshold="10" handle=".handle"
+                       @sort="sortSteps()">
+                <div v-for="(step, step_index) in recipe.steps" v-bind:key="step_index">
+                    <div class="card mt-2 mb-2">
+                        <div class="card-body" :id="`id_card_step_${step_index}`">
+                            <div class="row">
+                                <div class="col-11">
+                                    <h4 class="handle" :id="'id_step_' + step_index">
+                                        <i class="fas fa-paragraph" v-if="step.type === 'TEXT'"></i>
+                                        <i class="fas fa-clock" v-if="step.type === 'TIME'"></i>
+                                        <template v-if="step.name !== ''">{{ step.name }}</template>
+                                        <template v-else>{{ $t("Step") }} {{ step_index + 1 }}</template>
+                                    </h4>
+                                </div>
+                                <div class="col-1" style="text-align: right">
+                                    <a class="btn shadow-none btn-lg" href="#" role="button" id="dropdownMenuLink"
+                                       data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                        <i class="fas fa-ellipsis-v text-muted"></i>
+                                    </a>
 
-                                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
-                                    <button class="dropdown-item" @click="removeStep(step)"><i class="fa fa-trash fa-fw"></i> {{ $t("Delete") }}</button>
+                                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
+                                        <button class="dropdown-item" @click="removeStep(step)"><i
+                                            class="fa fa-trash fa-fw"></i> {{ $t("Delete") }}
+                                        </button>
 
-                                    <button type="button" class="dropdown-item" v-if="!step.show_as_header" @click="step.show_as_header = true">
-                                        <i class="fas fa-eye fa-fw"></i> {{ $t("Show_as_header") }}
-                                    </button>
+                                        <button type="button" class="dropdown-item" v-if="!step.show_as_header"
+                                                @click="step.show_as_header = true">
+                                            <i class="fas fa-eye fa-fw"></i> {{ $t("Show_as_header") }}
+                                        </button>
 
-                                    <button type="button" class="dropdown-item" v-if="step.show_as_header" @click="step.show_as_header = false">
-                                        <i class="fas fa-eye-slash fa-fw"></i> {{ $t("Hide_as_header") }}
-                                    </button>
+                                        <button type="button" class="dropdown-item" v-if="step.show_as_header"
+                                                @click="step.show_as_header = false">
+                                            <i class="fas fa-eye-slash fa-fw"></i> {{ $t("Hide_as_header") }}
+                                        </button>
 
-                                    <button class="dropdown-item" @click="moveStep(step, step_index - 1)" v-if="step_index > 0"><i class="fa fa-arrow-up fa-fw"></i> {{ $t("Move_Up") }}</button>
-                                    <button class="dropdown-item" @click="moveStep(step, step_index + 1)" v-if="step_index !== recipe.steps.length - 1">
-                                        <i class="fa fa-arrow-down fa-fw"></i> {{ $t("Move_Down") }}
-                                    </button>
+                                        <button class="dropdown-item" @click="moveStep(step, step_index - 1)"
+                                                v-if="step_index > 0"><i class="fa fa-arrow-up fa-fw"></i>
+                                            {{ $t("Move_Up") }}
+                                        </button>
+                                        <button class="dropdown-item" @click="moveStep(step, step_index + 1)"
+                                                v-if="step_index !== recipe.steps.length - 1">
+                                            <i class="fa fa-arrow-down fa-fw"></i> {{ $t("Move_Down") }}
+                                        </button>
+                                    </div>
                                 </div>
                             </div>
-                        </div>
 
-                        <div class="row">
-                            <div class="col-md-8">
-                                <label :for="'id_step_' + step.id + 'name'">{{ $t("Step_Name") }}</label>
-                                <input class="form-control" v-model="step.name" :id="'id_step_' + step.id + 'name'" />
-                            </div>
-                            <div class="col-md-4">
-                                <label for="id_type"> {{ $t("Step_Type") }}</label>
-                                <select class="form-control" id="id_type" v-model="step.type">
-                                    <option value="TEXT">{{ $t("Text") }}</option>
-                                    <option value="TIME">{{ $t("Time") }}</option>
-                                    <option value="FILE">{{ $t("File") }}</option>
-                                    <option value="RECIPE">{{ $t("Recipe") }}</option>
-                                </select>
-                            </div>
-                        </div>
-
-                        <div class="row" style="margin-top: 12px">
-                            <div class="col-md-3">
-                                <label :for="'id_step_' + step.id + '_time'">{{ $t("step_time_minutes") }}</label>
-                                <input class="form-control" v-model="step.time" :id="'id_step_' + step.id + '_time'" />
+                            <div class="row">
+                                <div class="col-md-8">
+                                    <label :for="'id_step_' + step.id + 'name'">{{ $t("Step_Name") }}</label>
+                                    <input class="form-control" v-model="step.name"
+                                           :id="'id_step_' + step.id + 'name'"/>
+                                </div>
+                                <div class="col-md-4">
+                                    <label for="id_type"> {{ $t("Step_Type") }}</label>
+                                    <select class="form-control" id="id_type" v-model="step.type">
+                                        <option value="TEXT">{{ $t("Text") }}</option>
+                                        <option value="TIME">{{ $t("Time") }}</option>
+                                        <option value="FILE">{{ $t("File") }}</option>
+                                        <option value="RECIPE">{{ $t("Recipe") }}</option>
+                                    </select>
+                                </div>
                             </div>
 
-                            <div class="col-md-9" v-if="step.type === 'FILE'">
-                                <label :for="'id_step_' + step.id + '_file'">{{ $t("File") }}</label>
-                                <multiselect
-                                    ref="file"
-                                    v-model="step.file"
-                                    :options="files"
-                                    :close-on-select="true"
-                                    :clear-on-select="true"
-                                    :allow-empty="true"
-                                    :preserve-search="true"
-                                    placeholder="Select File"
-                                    select-label="Select"
-                                    :id="'id_step_' + step.id + '_file'"
-                                    label="name"
-                                    track-by="name"
-                                    :multiple="false"
-                                    :loading="files_loading"
-                                    @search-change="searchFiles"
-                                >
-                                </multiselect>
-                            </div>
-
-                            <div class="col-md-9" v-if="step.type === 'RECIPE'">
-                                <label :for="'id_step_' + step.id + '_recipe'">{{ $t("Recipe") }}</label>
-                                <multiselect
-                                    ref="step_recipe"
-                                    v-model="step.step_recipe"
-                                    :options="recipes.map((recipe) => recipe.id)"
-                                    :close-on-select="true"
-                                    :clear-on-select="true"
-                                    :allow-empty="true"
-                                    :preserve-search="true"
-                                    :internal-search="false"
-                                    :limit="options_limit"
-                                    placeholder="Select Recipe"
-                                    select-label="Select"
-                                    :id="'id_step_' + step.id + '_recipe'"
-                                    :custom-label="(opt) => recipes.find((x) => x.id === opt).name"
-                                    :multiple="false"
-                                    :loading="recipes_loading"
-                                    @search-change="searchRecipes"
-                                >
-                                </multiselect>
-                            </div>
-                        </div>
-
-                        <template v-if="step.type === 'TEXT'">
                             <div class="row" style="margin-top: 12px">
-                                <div class="col-md-12">
-                                    <div class="jumbotron" style="padding: 16px">
-                                        <div class="row">
-                                            <div class="col-md-12">
-                                                <h4>{{ $t("Ingredients") }}</h4>
+                                <div class="col-md-3">
+                                    <label :for="'id_step_' + step.id + '_time'">{{ $t("step_time_minutes") }}</label>
+                                    <input class="form-control" v-model="step.time"
+                                           :id="'id_step_' + step.id + '_time'"/>
+                                </div>
+
+                                <div class="col-md-9" v-if="step.type === 'FILE'">
+                                    <label :for="'id_step_' + step.id + '_file'">{{ $t("File") }}</label>
+                                    <multiselect
+                                        ref="file"
+                                        v-model="step.file"
+                                        :options="files"
+                                        :close-on-select="true"
+                                        :clear-on-select="true"
+                                        :allow-empty="true"
+                                        :preserve-search="true"
+                                        placeholder="Select File"
+                                        select-label="Select"
+                                        :id="'id_step_' + step.id + '_file'"
+                                        label="name"
+                                        track-by="name"
+                                        :multiple="false"
+                                        :loading="files_loading"
+                                        @search-change="searchFiles"
+                                    >
+                                    </multiselect>
+                                </div>
+
+                                <div class="col-md-9" v-if="step.type === 'RECIPE'">
+                                    <label :for="'id_step_' + step.id + '_recipe'">{{ $t("Recipe") }}</label>
+                                    <multiselect
+                                        ref="step_recipe"
+                                        v-model="step.step_recipe"
+                                        :options="recipes.map((recipe) => recipe.id)"
+                                        :close-on-select="true"
+                                        :clear-on-select="true"
+                                        :allow-empty="true"
+                                        :preserve-search="true"
+                                        :internal-search="false"
+                                        :limit="options_limit"
+                                        placeholder="Select Recipe"
+                                        select-label="Select"
+                                        :id="'id_step_' + step.id + '_recipe'"
+                                        :custom-label="(opt) => recipes.find((x) => x.id === opt).name"
+                                        :multiple="false"
+                                        :loading="recipes_loading"
+                                        @search-change="searchRecipes"
+                                    >
+                                    </multiselect>
+                                </div>
+                            </div>
+
+                            <template v-if="step.type === 'TEXT'">
+                                <div class="row" style="margin-top: 12px">
+                                    <div class="col-md-12">
+                                        <div class="jumbotron" style="padding: 16px">
+                                            <div class="row">
+                                                <div class="col-md-12">
+                                                    <h4>{{ $t("Ingredients") }}</h4>
+                                                </div>
                                             </div>
-                                        </div>
-                                        <div class="row">
-                                            <div class="col-md-12" style="margin-top: 8px">
-                                                <draggable :list="step.ingredients" group="ingredients" :empty-insert-threshold="10" handle=".handle" @sort="sortIngredients(step)">
-                                                    <div v-for="(ingredient, index) in step.ingredients" :key="ingredient.id">
-                                                        <hr class="d-md-none" />
-                                                        <div class="d-flex">
-                                                            <div class="flex-grow-0 handle align-self-start">
-                                                                <button type="button" class="btn btn-lg shadow-none"><i class="fas fa-arrows-alt-v"></i></button>
-                                                            </div>
-
-                                                            <div class="flex-fill row" style="margin-left: 4px; margin-right: 4px">
-                                                                <div class="col-lg-2 col-md-6 small-padding" v-if="!ingredient.is_header">
-                                                                    <input
-                                                                        class="form-control"
-                                                                        v-model="ingredient.amount"
-                                                                        type="number"
-                                                                        step="any"
-                                                                        v-if="!ingredient.no_amount"
-                                                                        :id="`amount_${step_index}_${index}`"
-                                                                    />
+                                            <div class="row">
+                                                <div class="col-md-12" style="margin-top: 8px">
+                                                    <draggable :list="step.ingredients" group="ingredients"
+                                                               :empty-insert-threshold="10" handle=".handle"
+                                                               @sort="sortIngredients(step)">
+                                                        <div v-for="(ingredient, index) in step.ingredients"
+                                                             :key="ingredient.id">
+                                                            <hr class="d-md-none"/>
+                                                            <div class="d-flex">
+                                                                <div class="flex-grow-0 handle align-self-start">
+                                                                    <button type="button"
+                                                                            class="btn btn-lg shadow-none"><i
+                                                                        class="fas fa-arrows-alt-v"></i></button>
                                                                 </div>
 
-                                                                <div class="col-lg-2 col-md-6 small-padding" v-if="!ingredient.is_header">
-                                                                    <!-- search set to false to allow API to drive results & order -->
-                                                                    <multiselect
-                                                                        v-if="!ingredient.no_amount"
-                                                                        ref="unit"
-                                                                        v-model="ingredient.unit"
-                                                                        :options="units"
-                                                                        :close-on-select="true"
-                                                                        :clear-on-select="true"
-                                                                        :allow-empty="true"
-                                                                        :preserve-search="true"
-                                                                        :internal-search="false"
-                                                                        :limit="options_limit"
-                                                                        placeholder="Select Unit"
-                                                                        tag-placeholder="Create"
-                                                                        select-label="Select"
-                                                                        :taggable="true"
-                                                                        @tag="addUnitType"
-                                                                        :id="`unit_${step_index}_${index}`"
-                                                                        label="name"
-                                                                        track-by="name"
-                                                                        :multiple="false"
-                                                                        :loading="units_loading"
-                                                                        @search-change="searchUnits"
-                                                                    >
-                                                                    </multiselect>
-                                                                </div>
-                                                                <div class="col-lg-4 col-md-6 small-padding" v-if="!ingredient.is_header">
-                                                                    <!-- search set to false to allow API to drive results & order -->
-                                                                    <multiselect
-                                                                        ref="food"
-                                                                        v-model="ingredient.food"
-                                                                        :options="foods"
-                                                                        :close-on-select="true"
-                                                                        :clear-on-select="true"
-                                                                        :allow-empty="true"
-                                                                        :preserve-search="true"
-                                                                        :internal-search="false"
-                                                                        :limit="options_limit"
-                                                                        placeholder="Select Food"
-                                                                        tag-placeholder="Create"
-                                                                        select-label="Select"
-                                                                        :taggable="true"
-                                                                        @tag="addFoodType"
-                                                                        :id="`ingredient_${step_index}_${index}`"
-                                                                        label="name"
-                                                                        track-by="name"
-                                                                        :multiple="false"
-                                                                        :loading="foods_loading"
-                                                                        @search-change="searchFoods"
-                                                                    >
-                                                                    </multiselect>
-                                                                </div>
-                                                                <div class="small-padding" v-bind:class="{ 'col-lg-4 col-md-6': !ingredient.is_header, 'col-lg-12 col-md-12': ingredient.is_header }">
-                                                                    <input
-                                                                        class="form-control"
-                                                                        maxlength="256"
-                                                                        v-model="ingredient.note"
-                                                                        v-bind:placeholder="$t('Note')"
-                                                                        v-on:keydown.tab="
+                                                                <div class="flex-fill row"
+                                                                     style="margin-left: 4px; margin-right: 4px">
+                                                                    <div class="col-lg-2 col-md-6 small-padding"
+                                                                         v-if="!ingredient.is_header">
+                                                                        <input
+                                                                            class="form-control"
+                                                                            v-model="ingredient.amount"
+                                                                            type="number"
+                                                                            step="any"
+                                                                            v-if="!ingredient.no_amount"
+                                                                            :id="`amount_${step_index}_${index}`"
+                                                                        />
+                                                                    </div>
+
+                                                                    <div class="col-lg-2 col-md-6 small-padding"
+                                                                         v-if="!ingredient.is_header">
+                                                                        <!-- search set to false to allow API to drive results & order -->
+                                                                        <multiselect
+                                                                            v-if="!ingredient.no_amount"
+                                                                            ref="unit"
+                                                                            v-model="ingredient.unit"
+                                                                            :options="units"
+                                                                            :close-on-select="true"
+                                                                            :clear-on-select="true"
+                                                                            :allow-empty="true"
+                                                                            :preserve-search="true"
+                                                                            :internal-search="false"
+                                                                            :limit="options_limit"
+                                                                            placeholder="Select Unit"
+                                                                            tag-placeholder="Create"
+                                                                            select-label="Select"
+                                                                            :taggable="true"
+                                                                            @tag="addUnitType"
+                                                                            :id="`unit_${step_index}_${index}`"
+                                                                            label="name"
+                                                                            track-by="name"
+                                                                            :multiple="false"
+                                                                            :loading="units_loading"
+                                                                            @search-change="searchUnits"
+                                                                        >
+                                                                        </multiselect>
+                                                                    </div>
+                                                                    <div class="col-lg-4 col-md-6 small-padding"
+                                                                         v-if="!ingredient.is_header">
+                                                                        <!-- search set to false to allow API to drive results & order -->
+                                                                        <multiselect
+                                                                            ref="food"
+                                                                            v-model="ingredient.food"
+                                                                            :options="foods"
+                                                                            :close-on-select="true"
+                                                                            :clear-on-select="true"
+                                                                            :allow-empty="true"
+                                                                            :preserve-search="true"
+                                                                            :internal-search="false"
+                                                                            :limit="options_limit"
+                                                                            placeholder="Select Food"
+                                                                            tag-placeholder="Create"
+                                                                            select-label="Select"
+                                                                            :taggable="true"
+                                                                            @tag="addFoodType"
+                                                                            :id="`ingredient_${step_index}_${index}`"
+                                                                            label="name"
+                                                                            track-by="name"
+                                                                            :multiple="false"
+                                                                            :loading="foods_loading"
+                                                                            @search-change="searchFoods"
+                                                                        >
+                                                                        </multiselect>
+                                                                    </div>
+                                                                    <div class="small-padding"
+                                                                         v-bind:class="{ 'col-lg-4 col-md-6': !ingredient.is_header, 'col-lg-12 col-md-12': ingredient.is_header }">
+                                                                        <input
+                                                                            class="form-control"
+                                                                            maxlength="256"
+                                                                            v-model="ingredient.note"
+                                                                            v-bind:placeholder="$t('Note')"
+                                                                            v-on:keydown.tab="
                                                                             (event) => {
                                                                                 if (step.ingredients.indexOf(ingredient) === step.ingredients.length - 1) {
                                                                                     event.preventDefault()
@@ -338,87 +372,122 @@
                                                                                 }
                                                                             }
                                                                         "
-                                                                    />
+                                                                        />
+                                                                    </div>
                                                                 </div>
-                                                            </div>
 
-                                                            <div class="flex-grow-0 small-padding">
-                                                                <a class="btn shadow-none btn-lg" href="#" role="button" id="dropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                                                                    <i class="fas fa-ellipsis-v text-muted"></i>
-                                                                </a>
+                                                                <div class="flex-grow-0 small-padding">
+                                                                    <a class="btn shadow-none btn-lg" href="#"
+                                                                       role="button" id="dropdownMenuLink2"
+                                                                       data-toggle="dropdown" aria-haspopup="true"
+                                                                       aria-expanded="false">
+                                                                        <i class="fas fa-ellipsis-v text-muted"></i>
+                                                                    </a>
 
-                                                                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink2">
-                                                                    <button type="button" class="dropdown-item" @click="removeIngredient(step, ingredient)">
-                                                                        <i class="fa fa-trash fa-fw"></i> {{ $t("Delete") }}
-                                                                    </button>
+                                                                    <div class="dropdown-menu dropdown-menu-right"
+                                                                         aria-labelledby="dropdownMenuLink2">
+                                                                        <button type="button" class="dropdown-item"
+                                                                                @click="removeIngredient(step, ingredient)">
+                                                                            <i class="fa fa-trash fa-fw"></i>
+                                                                            {{ $t("Delete") }}
+                                                                        </button>
 
-                                                                    <button type="button" class="dropdown-item" v-if="!ingredient.is_header" @click="ingredient.is_header = true">
-                                                                        <i class="fas fa-heading fa-fw"></i> {{ $t("Make_header") }}
-                                                                    </button>
+                                                                        <button type="button" class="dropdown-item"
+                                                                                v-if="!ingredient.is_header"
+                                                                                @click="ingredient.is_header = true">
+                                                                            <i class="fas fa-heading fa-fw"></i>
+                                                                            {{ $t("Make_header") }}
+                                                                        </button>
 
-                                                                    <button type="button" class="dropdown-item" v-if="ingredient.is_header" @click="ingredient.is_header = false">
-                                                                        <i class="fas fa-leaf fa-fw"></i> {{ $t("Make_Ingredient") }}
-                                                                    </button>
+                                                                        <button type="button" class="dropdown-item"
+                                                                                v-if="ingredient.is_header"
+                                                                                @click="ingredient.is_header = false">
+                                                                            <i class="fas fa-leaf fa-fw"></i>
+                                                                            {{ $t("Make_Ingredient") }}
+                                                                        </button>
 
-                                                                    <button type="button" class="dropdown-item" v-if="!ingredient.no_amount" @click="ingredient.no_amount = true">
-                                                                        <i class="fas fa-balance-scale-right fa-fw"></i> {{ $t("Disable_Amount") }}
-                                                                    </button>
+                                                                        <button type="button" class="dropdown-item"
+                                                                                v-if="!ingredient.no_amount"
+                                                                                @click="ingredient.no_amount = true">
+                                                                            <i class="fas fa-balance-scale-right fa-fw"></i>
+                                                                            {{ $t("Disable_Amount") }}
+                                                                        </button>
 
-                                                                    <button type="button" class="dropdown-item" v-if="ingredient.no_amount" @click="ingredient.no_amount = false">
-                                                                        <i class="fas fa-balance-scale-right fa-fw"></i> {{ $t("Enable_Amount") }}
-                                                                    </button>
-                                                                    <button type="button" class="dropdown-item" @click="copyTemplateReference(index, ingredient)">
-                                                                        <i class="fas fa-code"></i> {{ $t("Copy_template_reference") }}
-                                                                    </button>
+                                                                        <button type="button" class="dropdown-item"
+                                                                                v-if="ingredient.no_amount"
+                                                                                @click="ingredient.no_amount = false">
+                                                                            <i class="fas fa-balance-scale-right fa-fw"></i>
+                                                                            {{ $t("Enable_Amount") }}
+                                                                        </button>
+                                                                        <button type="button" class="dropdown-item"
+                                                                                @click="copyTemplateReference(index, ingredient)">
+                                                                            <i class="fas fa-code"></i>
+                                                                            {{ $t("Copy_template_reference") }}
+                                                                        </button>
+                                                                    </div>
                                                                 </div>
                                                             </div>
                                                         </div>
-                                                    </div>
-                                                </draggable>
+                                                    </draggable>
+                                                </div>
                                             </div>
-                                        </div>
-                                        <div class="row">
-                                            <div class="col-md-2 offset-md-5" style="text-align: center; margin-top: 8px">
-                                                <button class="btn btn-success btn-block" @click="addIngredient(step)"><i class="fa fa-plus"></i></button>
+                                            <div class="row">
+                                                <div class="col-md-2 offset-md-5"
+                                                     style="text-align: center; margin-top: 8px">
+                                                    <button class="btn btn-success btn-block"
+                                                            @click="addIngredient(step)"><i class="fa fa-plus"></i>
+                                                    </button>
+                                                </div>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
-                            </div>
-                        </template>
+                            </template>
 
-                        <div class="row">
-                            <div class="col-md-12">
-                                <label :for="'id_instruction_' + step.id">{{ $t("Instructions") }}</label>
-                                <v-md-editor
-                                    v-model="step.instruction"
-                                    height="30vh"
-                                    left-toolbar="undo redo | h bold italic strikethrough quote | ul ol table hr | link image code"
-                                    right-toolbar="preview sync-scroll fullscreen"
-                                    :id="'id_instruction_' + step.id"
-                                    mode="edit"
-                                ></v-md-editor>
+                            <div class="row">
+                                <div class="col-md-12">
+                                    <label :for="'id_instruction_' + step.id">{{ $t("Instructions") }}</label>
+                                    <v-md-editor
+                                        v-model="step.instruction"
+                                        height="30vh"
+                                        left-toolbar="undo redo | h bold italic strikethrough quote | ul ol table hr | link image code"
+                                        right-toolbar="preview sync-scroll fullscreen"
+                                        :id="'id_instruction_' + step.id"
+                                        mode="edit"
+                                    ></v-md-editor>
 
-                                <!-- TODO markdown DOCS link and markdown editor -->
+                                    <!-- TODO markdown DOCS link and markdown editor -->
+                                </div>
                             </div>
                         </div>
                     </div>
+
+                    <div class="row">
+                        <div class="col col-md-12 text-center">
+                            <b-button-group>
+                                <button type="button" @click="addStep(step_index)" class="btn btn-success shadow-none">
+                                    {{ $t("Add_Step") }}
+                                </button>
+
+                                <button type="button" v-b-modal:id_modal_sort class="btn btn-warning shadow-none "><i
+                                    class="fas fa-sort-amount-down-alt fa-lg"></i></button>
+                            </b-button-group>
+                        </div>
+                    </div>
+
                 </div>
+
             </draggable>
 
-            <div class="row pt-2">
-                <div class="col-md-12 text-center">
-                    <button type="button" @click="addStep()" class="btn btn-success shadow-none">{{ $t("Add_Step") }}</button>
-                </div>
-            </div>
+            <br/>
+            <br/>
+            <br/>
 
-            <br />
-            <br />
-            <br />
-
-            <div class="row fixed-bottom p-2 b-2 border-top text-center" style="background: white" v-if="recipe !== undefined">
+            <div class="row fixed-bottom p-2 b-2 border-top text-center" style="background: white"
+                 v-if="recipe !== undefined">
                 <div class="col-md-3 col-6">
-                    <a :href="resolveDjangoUrl('delete_recipe', recipe.id)" class="btn btn-block btn-danger shadow-none">{{ $t("Delete") }}</a>
+                    <a :href="resolveDjangoUrl('delete_recipe', recipe.id)"
+                       class="btn btn-block btn-danger shadow-none">{{ $t("Delete") }}</a>
                 </div>
                 <div class="col-md-3 col-6">
                     <a :href="resolveDjangoUrl('view_recipe', recipe.id)">
@@ -426,28 +495,54 @@
                     </a>
                 </div>
                 <div class="col-md-3 col-6">
-                    <button type="button" @click="updateRecipe(false)" v-b-tooltip.hover :title="`${$t('Key_Ctrl')} + S`" class="btn btn-sm btn-block btn-info shadow-none">{{ $t("Save") }}</button>
+                    <button type="button" @click="updateRecipe(false)" v-b-tooltip.hover
+                            :title="`${$t('Key_Ctrl')} + S`" class="btn btn-sm btn-block btn-info shadow-none">
+                        {{ $t("Save") }}
+                    </button>
                 </div>
                 <div class="col-md-3 col-6">
-                    <button type="button" @click="updateRecipe(true)" v-b-tooltip.hover :title="`${$t('Key_Ctrl')} + ${$t('Key_Shift')} + S`" class="btn btn-sm btn-block btn-success shadow-none">
+                    <button type="button" @click="updateRecipe(true)" v-b-tooltip.hover
+                            :title="`${$t('Key_Ctrl')} + ${$t('Key_Shift')} + S`"
+                            class="btn btn-sm btn-block btn-success shadow-none">
                         {{ $t("Save_and_View") }}
                     </button>
                 </div>
             </div>
+
+
+            <b-modal id="id_modal_sort" v-bind:title="$t('Sort')" ok-only>
+                <draggable :list="recipe.steps" group="step_sorter" :empty-insert-threshold="10" handle=".handle"
+                           @sort="sortSteps()" class="list-group" tag="ul">
+                    <li class="list-group-item" v-for="(step, step_index) in recipe.steps" v-bind:key="step_index">
+                        <button type="button" class="btn btn-lg shadow-none handle"><i class="fas fa-arrows-alt-v"></i>
+                        </button>
+                        <template v-if="step.name !== ''">{{ step.name }}</template>
+                        <template v-else>{{ $t("Step") }} {{ step_index + 1 }}</template>
+                    </li>
+                </draggable>
+            </b-modal>
         </div>
     </div>
 </template>
 
+
 <script>
 import Vue from "vue"
-import { BootstrapVue } from "bootstrap-vue"
+import {BootstrapVue} from "bootstrap-vue"
 
 import "bootstrap-vue/dist/bootstrap-vue.css"
 
 import draggable from "vuedraggable"
-import { ApiMixin, resolveDjangoUrl, ResolveUrlMixin, StandardToasts, convertEnergyToCalories, energyHeading } from "@/utils/utils"
+import {
+    ApiMixin,
+    resolveDjangoUrl,
+    ResolveUrlMixin,
+    StandardToasts,
+    convertEnergyToCalories,
+    energyHeading
+} from "@/utils/utils"
 import Multiselect from "vue-multiselect"
-import { ApiApiFactory } from "@/utils/openapi/api"
+import {ApiApiFactory} from "@/utils/openapi/api"
 import LoadingSpinner from "@/components/LoadingSpinner"
 
 import VueMarkdownEditor from "@kangc/v-md-editor"
@@ -471,7 +566,7 @@ Vue.use(BootstrapVue)
 export default {
     name: "RecipeEditView",
     mixins: [ResolveUrlMixin, ApiMixin],
-    components: { Multiselect, LoadingSpinner, draggable },
+    components: {Multiselect, LoadingSpinner, draggable},
     data() {
         return {
             recipe_id: window.RECIPE_ID,
@@ -638,9 +733,15 @@ export default {
                     })
             }
         },
-        addStep: function () {
+        addStep: function (step_index) {
             //TODO see if default can be generated from options request
-            this.recipe.steps.push({ instruction: "", ingredients: [], type: "TEXT", show_as_header: true })
+            let empty_step = {instruction: "", ingredients: [], type: "TEXT", show_as_header: true}
+            if (step_index !== undefined) {
+                console.log('adding at index', step_index)
+                this.recipe.steps.splice(step_index + 1, 0, empty_step)
+            } else {
+                this.recipe.steps.push(empty_step)
+            }
         },
         sortSteps: function () {
             this.recipe.steps.forEach(function (element, index) {
@@ -669,12 +770,12 @@ export default {
             this.$nextTick(() => document.getElementById(`amount_${this.recipe.steps.indexOf(step)}_${step.ingredients.length - 1}`).focus())
         },
         removeIngredient: function (step, ingredient) {
-            if (confirm(this.$t("confirm_delete", { object: this.$t("Ingredient") }))) {
+            if (confirm(this.$t("confirm_delete", {object: this.$t("Ingredient")}))) {
                 step.ingredients = step.ingredients.filter((item) => item !== ingredient)
             }
         },
         removeStep: function (step) {
-            if (confirm(this.$t("confirm_delete", { object: this.$t("Step") }))) {
+            if (confirm(this.$t("confirm_delete", {object: this.$t("Step")}))) {
                 this.recipe.steps = this.recipe.steps.filter((item) => item !== step)
             }
         },
@@ -687,7 +788,7 @@ export default {
             let [tmp, step, id] = index.split("_")
 
             let new_food = this.recipe.steps[step].ingredients[id]
-            new_food.food = { name: tag }
+            new_food.food = {name: tag}
             this.foods.push(new_food.food)
             this.recipe.steps[step].ingredients[id] = new_food
         },
@@ -695,12 +796,12 @@ export default {
             let [tmp, step, id] = index.split("_")
 
             let new_unit = this.recipe.steps[step].ingredients[id]
-            new_unit.unit = { name: tag }
+            new_unit.unit = {name: tag}
             this.units.push(new_unit.unit)
             this.recipe.steps[step].ingredients[id] = new_unit
         },
         addKeyword: function (tag) {
-            let new_keyword = { label: tag, name: tag }
+            let new_keyword = {label: tag, name: tag}
             this.recipe.keywords.push(new_keyword)
         },
         searchKeywords: function (query) {
@@ -723,7 +824,7 @@ export default {
 
             this.files_loading = true
             apiFactory
-                .listUserFiles({ query: { query: query } })
+                .listUserFiles({query: {query: query}})
                 .then((response) => {
                     this.files = response.data
                     this.files_loading = false
@@ -735,7 +836,7 @@ export default {
         },
         searchRecipes: function (query) {
             this.recipes_loading = true
-            this.genericAPI(this.Models.RECIPE, this.Actions.LIST, { query: query })
+            this.genericAPI(this.Models.RECIPE, this.Actions.LIST, {query: query})
                 .then((result) => {
                     this.recipes = result.data.results
                     this.recipes_loading = false
@@ -795,7 +896,7 @@ export default {
                 })
         },
         scrollToStep: function (step_index) {
-            document.getElementById("id_step_" + step_index).scrollIntoView({ behavior: "smooth" })
+            document.getElementById("id_step_" + step_index).scrollIntoView({behavior: "smooth"})
         },
         addNutrition: function () {
             this.recipe.nutrition = {}