diff --git a/cookbook/admin.py b/cookbook/admin.py
index 625b2a6bc..5c32c168e 100644
--- a/cookbook/admin.py
+++ b/cookbook/admin.py
@@ -177,8 +177,8 @@ admin.site.register(Keyword, KeywordAdmin)
 
 
 class StepAdmin(admin.ModelAdmin):
-    list_display = ('name', 'type', 'order')
-    search_fields = ('name', 'type')
+    list_display = ('name', 'order',)
+    search_fields = ('name',)
 
 
 admin.site.register(Step, StepAdmin)
diff --git a/cookbook/migrations/0165_remove_step_type.py b/cookbook/migrations/0165_remove_step_type.py
new file mode 100644
index 000000000..3eca515fc
--- /dev/null
+++ b/cookbook/migrations/0165_remove_step_type.py
@@ -0,0 +1,17 @@
+# Generated by Django 3.2.11 on 2022-01-18 19:19
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('cookbook', '0164_space_show_facet_count'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='step',
+            name='type',
+        ),
+    ]
diff --git a/cookbook/models.py b/cookbook/models.py
index 6fc3fb30b..df6ec226f 100644
--- a/cookbook/models.py
+++ b/cookbook/models.py
@@ -576,17 +576,7 @@ class Ingredient(ExportModelOperationsMixin('ingredient'), models.Model, Permiss
 
 
 class Step(ExportModelOperationsMixin('step'), models.Model, PermissionModelMixin):
-    TEXT = 'TEXT'
-    TIME = 'TIME'
-    FILE = 'FILE'
-    RECIPE = 'RECIPE'
-
     name = models.CharField(max_length=128, default='', blank=True)
-    type = models.CharField(
-        choices=((TEXT, _('Text')), (TIME, _('Time')), (FILE, _('File')), (RECIPE, _('Recipe')),),
-        default=TEXT,
-        max_length=16
-    )
     instruction = models.TextField(blank=True)
     ingredients = models.ManyToManyField(Ingredient, blank=True)
     time = models.IntegerField(default=0, blank=True)
diff --git a/cookbook/serializer.py b/cookbook/serializer.py
index 3584138c2..ad6015e70 100644
--- a/cookbook/serializer.py
+++ b/cookbook/serializer.py
@@ -481,7 +481,7 @@ class StepSerializer(WritableNestedModelSerializer, ExtendedRecipeMixin):
     class Meta:
         model = Step
         fields = (
-            'id', 'name', 'type', 'instruction', 'ingredients', 'ingredients_markdown',
+            'id', 'name', 'instruction', 'ingredients', 'ingredients_markdown',
             'ingredients_vue', 'time', 'order', 'show_as_header', 'file', 'step_recipe', 'step_recipe_data', 'numrecipe'
         )
 
diff --git a/vue/src/apps/RecipeEditView/RecipeEditView.vue b/vue/src/apps/RecipeEditView/RecipeEditView.vue
index d8bf65a6c..f2fe4b21b 100644
--- a/vue/src/apps/RecipeEditView/RecipeEditView.vue
+++ b/vue/src/apps/RecipeEditView/RecipeEditView.vue
@@ -1,10 +1,12 @@
 <template>
     <div>
-        <h3>{{ $t("Edit_Recipe") }}</h3>
+        <h3><i class="fas fa-edit"></i> <span v-if="recipe !== undefined">{{ recipe.name }}</span></h3>
 
         <loading-spinner :size="25" v-if="!recipe"></loading-spinner>
 
         <div v-if="recipe !== undefined">
+
+            <!-- Title and description -->
             <div class="row">
                 <div class="col-md-12">
                     <label for="id_name"> {{ $t("Name") }}</label>
@@ -21,6 +23,7 @@
                 </div>
             </div>
 
+            <!-- Image and misc properties -->
             <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
@@ -83,80 +86,81 @@
                 </div>
             </div>
 
-            <template v-if="recipe !== undefined">
-                <div class="row pt-2">
-                    <div class="col-md-12">
-                        <div class="card border-grey">
-                            <div class="card-header" style="display: table">
-                                <div class="row">
-                                    <div class="col-md-9 d-table">
-                                        <h5 class="d-table-cell align-middle">{{ $t("Nutrition") }}</h5>
-                                    </div>
-                                    <div class="col-md-3">
-                                        <button
-                                            type="button"
-                                            @click="addNutrition()"
-                                            v-if="recipe.nutrition === null"
-                                            v-b-tooltip.hover
-                                            v-bind:title="$t('Add_nutrition_recipe')"
-                                            class="btn btn-sm btn-success shadow-none float-right"
-                                        >
-                                            <i class="fas fa-plus-circle"></i>
-                                        </button>
-                                        <button
-                                            type="button"
-                                            @click="removeNutrition()"
-                                            v-if="recipe.nutrition !== null"
-                                            v-b-tooltip.hover
-                                            v-bind:title="$t('Remove_nutrition_recipe')"
-                                            class="btn btn-sm btn-danger shadow-none float-right"
-                                        >
-                                            <i class="fas fa-trash-alt"></i>
-                                        </button>
-                                    </div>
+            <!-- Nutrition -->
+            <div class="row pt-2">
+                <div class="col-md-12">
+                    <div class="card border-grey">
+                        <div class="card-header" style="display: table">
+                            <div class="row">
+                                <div class="col-md-9 d-table">
+                                    <h5 class="d-table-cell align-middle">{{ $t("Nutrition") }}</h5>
+                                </div>
+                                <div class="col-md-3">
+                                    <button
+                                        type="button"
+                                        @click="addNutrition()"
+                                        v-if="recipe.nutrition === null"
+                                        v-b-tooltip.hover
+                                        v-bind:title="$t('Add_nutrition_recipe')"
+                                        class="btn btn-sm btn-success shadow-none float-right"
+                                    >
+                                        <i class="fas fa-plus-circle"></i>
+                                    </button>
+                                    <button
+                                        type="button"
+                                        @click="removeNutrition()"
+                                        v-if="recipe.nutrition !== null"
+                                        v-b-tooltip.hover
+                                        v-bind:title="$t('Remove_nutrition_recipe')"
+                                        class="btn btn-sm btn-danger shadow-none float-right"
+                                    >
+                                        <i class="fas fa-trash-alt"></i>
+                                    </button>
                                 </div>
                             </div>
-
-                            <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.
-                                    </b-alert>
-
-                                    <label for="id_name"> {{ $t(energy()) }}</label>
-
-                                    <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"/>
-
-                                    <label for="id_name"> {{ $t("Fats") }}</label>
-                                    <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"/>
-                                </div>
-                            </b-collapse>
                         </div>
+
+                        <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.
+                                </b-alert>
+
+                                <label for="id_name"> {{ $t(energy()) }}</label>
+
+                                <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"/>
+
+                                <label for="id_name"> {{ $t("Fats") }}</label>
+                                <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"/>
+                            </div>
+                        </b-collapse>
                     </div>
                 </div>
-            </template>
+            </div>
 
+            <!-- Steps -->
             <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}`">
+
+                            <!-- step card header -->
                             <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>
+                                        <i class="fas fa-paragraph"></i>
                                         <template v-if="step.name !== ''">{{ step.name }}</template>
                                         <template v-else>{{ $t("Step") }} {{ step_index + 1 }}</template>
                                     </h4>
@@ -194,31 +198,55 @@
                                 </div>
                             </div>
 
+                            <!-- step name input -->
                             <div class="row">
-                                <div class="col-md-8">
+                                <div class="col-md-12">
                                     <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>
+
+                            <!-- step data visibility controller -->
+                            <div class="row pt-2">
+                                <div class="col col-md-12">
+                                    <b-button pill variant="primary" size="sm" class="ml-1"
+                                              @click="step.time_visible = true" v-if="!step.time_visible">
+                                        <i class="fas fa-plus-circle"></i> {{ $t("Time") }}
+                                    </b-button>
+
+                                    <b-button pill variant="primary" size="sm" class="ml-1"
+                                              @click="step.ingredients_visible = true" v-if="!step.ingredients_visible">
+                                        <i class="fas fa-plus-circle"></i> {{ $t("Ingredients") }}
+                                    </b-button>
+
+                                    <b-button pill variant="primary" size="sm" class="ml-1"
+                                              @click="step.instruction_visible = true" v-if="!step.instruction_visible">
+                                        <i class="fas fa-plus-circle"></i> {{ $t("Instructions") }}
+                                    </b-button>
+
+                                    <b-button pill variant="primary" size="sm" class="ml-1"
+                                              @click="step.step_recipe_visible = true" v-if="!step.step_recipe_visible">
+                                        <i class="fas fa-plus-circle"></i> {{ $t("Recipe") }}
+                                    </b-button>
+
+                                    <b-button pill variant="primary" size="sm" class="ml-1"
+                                              @click="step.file_visible = true" v-if="!step.file_visible">
+                                        <i class="fas fa-plus-circle"></i> {{ $t("File") }}
+                                    </b-button>
                                 </div>
                             </div>
 
-                            <div class="row" style="margin-top: 12px">
-                                <div class="col-md-3">
+                            <div class="row pt-2" v-if="step.time_visible">
+                                <div class="col-md-12">
                                     <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>
 
-                                <div class="col-md-9" v-if="step.type === 'FILE'">
+                            <div class="row pt-2" v-if="step.file_visible">
+                                <div class="col-md-12">
                                     <label :for="'id_step_' + step.id + '_file'">{{ $t("File") }}</label>
                                     <multiselect
                                         ref="file"
@@ -238,9 +266,15 @@
                                         @search-change="searchFiles"
                                     >
                                     </multiselect>
-                                </div>
 
-                                <div class="col-md-9" v-if="step.type === 'RECIPE'">
+                                    <button>
+                                        +
+                                    </button>
+                                </div>
+                            </div>
+
+                            <div class="row pt-2" v-if="step.step_recipe_visible">
+                                <div class="col-md-12">
                                     <label :for="'id_step_' + step.id + '_recipe'">{{ $t("Recipe") }}</label>
                                     <multiselect
                                         ref="step_recipe"
@@ -264,107 +298,106 @@
                                 </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 class="row pt-2" v-if="step.ingredients_visible">
+                                <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 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="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>
 
-                                                                <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="
+                                                                <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()
@@ -372,79 +405,79 @@
                                                                                 }
                                                                             }
                                                                         "
-                                                                        />
-                                                                    </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>
-                                                                    </div>
+                                                                    <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>
-                                                    </draggable>
-                                                </div>
+                                                    </div>
+                                                </draggable>
                                             </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>
+                                        </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>
                                         </div>
                                     </div>
                                 </div>
-                            </template>
+                            </div>
 
-                            <div class="row">
+
+                            <div class="row pt-2" v-if="step.instruction_visible">
                                 <div class="col-md-12">
                                     <label :for="'id_instruction_' + step.id">{{ $t("Instructions") }}</label>
                                     <v-md-editor
@@ -483,6 +516,7 @@
             <br/>
             <br/>
 
+            <!-- bottom buttons save/close/view -->
             <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">
@@ -509,7 +543,7 @@
                 </div>
             </div>
 
-
+            <!-- modal for sorting steps -->
             <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">
@@ -521,6 +555,8 @@
                     </li>
                 </draggable>
             </b-modal>
+
+            
         </div>
     </div>
 </template>
@@ -646,19 +682,26 @@ export default {
         loadRecipe: function () {
             let apiFactory = new ApiApiFactory()
 
-            apiFactory
-                .retrieveRecipe(this.recipe_id)
-                .then((response) => {
-                    this.recipe = response.data
-                    this.loading = false
+            apiFactory.retrieveRecipe(this.recipe_id).then((response) => {
+                this.recipe = response.data
+                this.loading = false
 
-                    //TODO workaround function until view is properly refactored, loads name of selected sub recipe so the input can find its label
-                    this.recipe.steps.forEach((s) => {
-                        if (s.step_recipe != null) {
-                            this.recipes.push(s.step_recipe_data)
-                        }
-                    })
+                // set default visibility style for each component of the step
+                this.recipe.steps.forEach((s) => {
+                    this.$set(s, 'time_visible', (s.time !== 0))
+                    this.$set(s, 'ingredients_visible', (s.ingredients.length > 0))
+                    this.$set(s, 'instruction_visible', (s.instruction !== ''))
+                    this.$set(s, 'step_recipe_visible', (s.step_recipe !== null))
+                    this.$set(s, 'file_visible', (s.file !== null))
                 })
+
+                //TODO workaround function until view is properly refactored, loads name of selected sub recipe so the input can find its label
+                this.recipe.steps.forEach((s) => {
+                    if (s.step_recipe != null) {
+                        this.recipes.push(s.step_recipe_data)
+                    }
+                })
+            })
                 .catch((err) => {
                     this.loading = false
                     console.log(err)
@@ -735,7 +778,16 @@ export default {
         },
         addStep: function (step_index) {
             //TODO see if default can be generated from options request
-            let empty_step = {instruction: "", ingredients: [], type: "TEXT", show_as_header: true}
+            let empty_step = {
+                instruction: "",
+                ingredients: [],
+                show_as_header: true,
+                time_visible: false,
+                ingredients_visible: true,
+                instruction_visible: true,
+                step_recipe_visible: false,
+                file_visible: false
+            }
             if (step_index !== undefined) {
                 console.log('adding at index', step_index)
                 this.recipe.steps.splice(step_index + 1, 0, empty_step)
diff --git a/vue/src/components/StepComponent.vue b/vue/src/components/StepComponent.vue
index d02873de3..adc1d9300 100644
--- a/vue/src/components/StepComponent.vue
+++ b/vue/src/components/StepComponent.vue
@@ -1,126 +1,119 @@
 <template>
     <div>
-        <hr />
-
-        <template v-if="step.type === 'TEXT' || step.type === 'RECIPE'">
-            <div class="row" v-if="recipe.steps.length > 1">
-                <div class="col col-md-8">
-                    <h5 class="text-primary">
-                        <template v-if="step.name">{{ step.name }}</template>
-                        <template v-else>{{ $t("Step") }} {{ index + 1 }}</template>
-                        <small style="margin-left: 4px" class="text-muted" v-if="step.time !== 0"><i class="fas fa-user-clock"></i> {{ step.time }} {{ $t("min") }} </small>
-                        <small v-if="start_time !== ''" class="d-print-none">
-                            <b-link :id="`id_reactive_popover_${step.id}`" @click="openPopover" href="#">
-                                {{ moment(start_time).add(step.time_offset, "minutes").format("HH:mm") }}
-                            </b-link>
-                        </small>
-                    </h5>
-                </div>
-                <div class="col col-md-4" style="text-align: right">
-                    <b-button
-                        @click="details_visible = !details_visible"
-                        style="border: none; background: none"
-                        class="shadow-none d-print-none"
-                        :class="{ 'text-primary': details_visible, 'text-success': !details_visible }"
-                    >
-                        <i class="far fa-check-circle"></i>
-                    </b-button>
-                </div>
+        <hr/>
+        <!-- Step header (only shown if more than one step -->
+        <div class="row mb-1" v-if="recipe.steps.length > 1">
+            <div class="col col-md-8">
+                <h5 class="text-primary">
+                    <template v-if="step.name">{{ step.name }}</template>
+                    <template v-else>{{ $t("Step") }} {{ index + 1 }}</template>
+                    <small style="margin-left: 4px" class="text-muted" v-if="step.time !== 0"><i
+                        class="fas fa-user-clock"></i> {{ step.time }} {{ $t("min") }} </small>
+                    <small v-if="start_time !== ''" class="d-print-none">
+                        <b-link :id="`id_reactive_popover_${step.id}`" @click="openPopover" href="#">
+                            {{ moment(start_time).add(step.time_offset, "minutes").format("HH:mm") }}
+                        </b-link>
+                    </small>
+                </h5>
             </div>
-        </template>
+            <div class="col col-md-4 text-right">
+                <b-button
+                    @click="details_visible = !details_visible"
+                    style="border: none; background: none"
+                    class="shadow-none d-print-none"
+                    :class="{ 'text-primary': details_visible, 'text-success': !details_visible }"
+                >
+                    <i class="far fa-check-circle"></i>
+                </b-button>
+            </div>
+        </div>
 
-        <template v-if="step.type === 'TEXT'">
-            <b-collapse id="collapse-1" v-model="details_visible">
-                <div class="row">
-                    <div class="col col-md-4" >
-                        <table class="table table-sm" v-if="step.ingredients.length > 0 && (recipe.steps.length > 1 || force_ingredients)">
-                            <ingredients-card :steps="[step]" :ingredient_factor="ingredient_factor" @checked-state-changed="$emit('checked-state-changed', $event)" />
-                        </table>
-                    </div>
-                    <div class="col" :class="{ 'col-md-8': recipe.steps.length > 1, 'col-md-12': recipe.steps.length <= 1 }">
-                        <compile-component :code="step.ingredients_markdown" :ingredient_factor="ingredient_factor"></compile-component>
-                    </div>
-                </div>
-            </b-collapse>
-        </template>
+        <b-collapse id="collapse-1" v-model="details_visible">
 
-        <template v-if="step.type === 'TIME' || step.type === 'FILE'">
             <div class="row">
-                <div class="col-md-8 offset-md-2" style="text-align: center">
-                    <h4 class="text-primary">
-                        <template v-if="step.name">{{ step.name }}</template>
-                        <template v-else>{{ $t("Step") }} {{ index + 1 }}</template>
-                    </h4>
-                    <span style="margin-left: 4px" class="text-muted" v-if="step.time !== 0"><i class="fa fa-stopwatch"></i> {{ step.time }} {{ $t("min") }}</span>
-                    <b-link class="d-print-none" :id="`id_reactive_popover_${step.id}`" @click="openPopover" href="#" v-if="start_time !== ''">
-                        {{ moment(start_time).add(step.time_offset, "minutes").format("HH:mm") }}
-                    </b-link>
+                <!-- ingredients table -->
+                <div class="col col-md-4">
+                    <table class="table table-sm"
+                           v-if="step.ingredients.length > 0 && (recipe.steps.length > 1 || force_ingredients)">
+                        <ingredients-card :steps="[step]" :ingredient_factor="ingredient_factor"
+                                          @checked-state-changed="$emit('checked-state-changed', $event)"/>
+                    </table>
                 </div>
 
-                <div class="col-md-2" style="text-align: right">
-                    <b-button
-                        @click="details_visible = !details_visible"
-                        style="border: none; background: none"
-                        class="shadow-none d-print-none"
-                        :class="{ 'text-primary': details_visible, 'text-success': !details_visible }"
-                    >
-                        <i class="far fa-check-circle"></i>
-                    </b-button>
+                <div class="col"
+                     :class="{ 'col-md-8': recipe.steps.length > 1, 'col-md-12': recipe.steps.length <= 1 }">
+                    <!-- step text -->
+                    <div class="row">
+                        <div class="col col-md-12">
+                            <compile-component :code="step.ingredients_markdown"
+                                               :ingredient_factor="ingredient_factor"></compile-component>
+                        </div>
+                    </div>
+
+                    <!-- File (preview if image, download else) -->
+                    <div class="row" v-if="step.file !== null">
+                        <div class="col col-md-12">
+                            <template>
+                                <div
+                                    v-if="step.file.file.includes('.png') || recipe.file_path.includes('.jpg') || recipe.file_path.includes('.jpeg') || recipe.file_path.includes('.gif')">
+                                    <b-img :src="step.file.file" fluid-grow></b-img>
+                                </div>
+                                <div v-else>
+                                    <a :href="step.file.file" target="_blank"
+                                       rel="noreferrer nofollow">{{ $t("Download") }}
+                                        {{ $t("File") }}</a>
+                                </div>
+                            </template>
+                        </div>
+                    </div>
                 </div>
+
             </div>
 
-            <b-collapse id="collapse-1" v-model="details_visible">
-                <div class="row" v-if="step.instruction !== ''">
-                    <div class="col col-md-12" style="text-align: center">
-                        <compile-component :code="step.ingredients_markdown" :ingredient_factor="ingredient_factor"></compile-component>
+            <!-- Sub recipe (always full width own row) -->
+            <div class="row">
+                <div class="col col-md-12">
+                    <div class="card" v-if="step.step_recipe_data !== null">
+                        <b-collapse id="collapse-1" v-model="details_visible">
+                            <div class="card-body">
+                                <h2 class="card-title">
+                                    <a :href="resolveDjangoUrl('view_recipe', step.step_recipe_data.id)">{{
+                                            step.step_recipe_data.name
+                                        }}</a>
+                                </h2>
+                                <div v-for="(sub_step, index) in step.step_recipe_data.steps"
+                                     v-bind:key="`substep_${sub_step.id}`">
+                                    <step-component
+                                        :recipe="step.step_recipe_data"
+                                        :step="sub_step"
+                                        :ingredient_factor="ingredient_factor"
+                                        :index="index"
+                                        :start_time="start_time"
+                                        :force_ingredients="true"
+                                    ></step-component>
+                                </div>
+                            </div>
+                        </b-collapse>
                     </div>
                 </div>
-            </b-collapse>
-        </template>
-
-        <div class="row" style="text-align: center">
-            <div class="col col-md-12">
-                <template v-if="step.file !== null">
-                    <div v-if="step.file.file.includes('.png') || recipe.file_path.includes('.jpg') || recipe.file_path.includes('.jpeg') || recipe.file_path.includes('.gif')">
-                        <img :src="step.file.file" style="max-width: 50vw; max-height: 50vh" />
-                    </div>
-                    <div v-else>
-                        <a :href="step.file.file" target="_blank" rel="noreferrer nofollow">{{ $t("Download") }} {{ $t("File") }}</a>
-                    </div>
-                </template>
             </div>
-        </div>
-
-        <div class="card" v-if="step.type === 'RECIPE' && step.step_recipe_data !== null">
-            <b-collapse id="collapse-1" v-model="details_visible">
-                <div class="card-body">
-                    <h2 class="card-title">
-                        <a :href="resolveDjangoUrl('view_recipe', step.step_recipe_data.id)">{{ step.step_recipe_data.name }}</a>
-                    </h2>
-                    <div v-for="(sub_step, index) in step.step_recipe_data.steps" v-bind:key="`substep_${sub_step.id}`">
-                        <step-component
-                            :recipe="step.step_recipe_data"
-                            :step="sub_step"
-                            :ingredient_factor="ingredient_factor"
-                            :index="index"
-                            :start_time="start_time"
-                            :force_ingredients="true"
-                        ></step-component>
-                    </div>
-                </div>
-            </b-collapse>
-        </div>
+        </b-collapse>
 
+        <!-- Time popover (not rendered) -->
         <div v-if="start_time !== ''">
-            <b-popover :target="`id_reactive_popover_${step.id}`" triggers="click" placement="bottom" :ref="`id_reactive_popover_${step.id}`" :title="$t('Step start time')">
+            <b-popover :target="`id_reactive_popover_${step.id}`" triggers="click" placement="bottom"
+                       :ref="`id_reactive_popover_${step.id}`" :title="$t('Step start time')">
                 <div>
                     <b-form-group label="Time" label-for="popover-input-1" label-cols="3" class="mb-1">
-                        <b-form-input type="datetime-local" id="popover-input-1" v-model.datetime-local="set_time_input" size="sm"></b-form-input>
+                        <b-form-input type="datetime-local" id="popover-input-1" v-model.datetime-local="set_time_input"
+                                      size="sm"></b-form-input>
                     </b-form-group>
                 </div>
                 <div class="row" style="margin-top: 1vh">
                     <div class="col-12" style="text-align: right">
-                        <b-button @click="closePopover" size="sm" variant="secondary" style="margin-right: 8px">{{ $t("Cancel") }}</b-button>
+                        <b-button @click="closePopover" size="sm" variant="secondary" style="margin-right: 8px">
+                            {{ $t("Cancel") }}
+                        </b-button>
                         <b-button @click="updateTime" size="sm" variant="primary">{{ $t("Ok") }}</b-button>
                     </div>
                 </div>
@@ -130,22 +123,22 @@
 </template>
 
 <script>
-import { calculateAmount } from "@/utils/utils"
+import {calculateAmount} from "@/utils/utils"
 
-import { GettextMixin } from "@/utils/utils"
+import {GettextMixin} from "@/utils/utils"
 
 import CompileComponent from "@/components/CompileComponent"
 import IngredientsCard from "@/components/IngredientsCard"
 import Vue from "vue"
 import moment from "moment"
-import { ResolveUrlMixin } from "@/utils/utils"
+import {ResolveUrlMixin} from "@/utils/utils"
 
 Vue.prototype.moment = moment
 
 export default {
     name: "StepComponent",
     mixins: [GettextMixin, ResolveUrlMixin],
-    components: { CompileComponent, IngredientsCard },
+    components: {CompileComponent, IngredientsCard},
     props: {
         step: Object,
         ingredient_factor: Number,