diff --git a/vue3/src/components/display/HorizontalMealPlanWindow.vue b/vue3/src/components/display/HorizontalMealPlanWindow.vue
index d9df99191..4761a989e 100644
--- a/vue3/src/components/display/HorizontalMealPlanWindow.vue
+++ b/vue3/src/components/display/HorizontalMealPlanWindow.vue
@@ -46,7 +46,7 @@
                                             <v-icon icon="$menu"></v-icon>
                                             <v-menu activator="parent">
                                                 <v-list>
-                                                    <v-list-item prepend-icon="$edit">
+                                                    <v-list-item prepend-icon="$edit" link>
                                                         {{$t('Edit')}}
                                                         <model-edit-dialog model="MealPlan" :item="p"></model-edit-dialog>
                                                     </v-list-item>
diff --git a/vue3/src/components/display/RecipeView.vue b/vue3/src/components/display/RecipeView.vue
index f4f84c425..599841fc6 100644
--- a/vue3/src/components/display/RecipeView.vue
+++ b/vue3/src/components/display/RecipeView.vue
@@ -68,7 +68,7 @@
             </v-card>
 
             <v-card class="mt-1" v-for="(step, index) in recipe.steps" :key="step.id">
-                <step v-model="recipe.steps[index]" :step-number="index+1" :ingredientFactor="ingredientFactor"></step>
+                <step-view v-model="recipe.steps[index]" :step-number="index+1" :ingredientFactor="ingredientFactor"></step-view>
             </v-card>
         </template>
 
@@ -82,13 +82,13 @@ import {computed, onBeforeUnmount, onMounted, ref, watch} from 'vue'
 import {Recipe} from "@/openapi"
 import NumberScalerDialog from "@/components/inputs/NumberScalerDialog.vue"
 import StepsOverview from "@/components/display/StepsOverview.vue";
-import Step from "@/components/display/Step.vue";
 import RecipeActivity from "@/components/display/RecipeActivity.vue";
 import RecipeContextMenu from "@/components/inputs/RecipeContextMenu.vue";
 import KeywordsComponent from "@/components/display/KeywordsBar.vue";
 import RecipeImage from "@/components/display/RecipeImage.vue";
 import ExternalRecipeViewer from "@/components/display/ExternalRecipeViewer.vue";
 import {useWakeLock} from "@vueuse/core";
+import StepView from "@/components/display/StepView.vue";
 
 const {request, release} = useWakeLock()
 
diff --git a/vue3/src/components/display/Step.vue b/vue3/src/components/display/StepView.vue
similarity index 62%
rename from vue3/src/components/display/Step.vue
rename to vue3/src/components/display/StepView.vue
index a3ed92a28..9d86dd90d 100644
--- a/vue3/src/components/display/Step.vue
+++ b/vue3/src/components/display/StepView.vue
@@ -2,7 +2,11 @@
     <v-card>
         <v-card-title>
             <v-row>
-                <v-col><span v-if="step.name">{{ step.name }}</span><span v-else>{{ $t('Step') }} {{ props.stepNumber }}</span></v-col>
+                <v-col>
+                    <span v-if="step.name">{{ step.name }}</span>
+                    <span v-else-if="step.stepRecipe"><v-icon icon="$recipes"></v-icon> {{ step.stepRecipeData.name }}</span>
+                    <span v-else>{{ $t('Step') }} {{ props.stepNumber }}</span>
+                </v-col>
                 <v-col class="text-right">
                     <v-btn-group density="compact" variant="tonal">
                         <v-btn size="small" color="info" v-if="step.time != undefined && step.time > 0" @click="timerRunning = true"><i
@@ -17,17 +21,30 @@
         </v-card-title>
         <template v-if="!stepChecked">
             <timer :seconds="step.time != undefined ? step.time*60 : 0" @stop="timerRunning = false" v-if="timerRunning"></timer>
-            <v-card-text>
+            <v-card-text v-if="step.ingredients.length > 0 || step.instruction != ''">
                 <v-row>
                     <v-col cols="12" md="6" v-if="step.ingredients.length > 0">
                         <ingredients-table v-model="step.ingredients" :ingredient-factor="ingredientFactor"></ingredients-table>
                     </v-col>
                     <v-col cols="12" md="6">
-                        <instructions :instructions_html="step.instructionsMarkdown" :ingredient_factor="ingredientFactor"></instructions>
+                        <instructions :instructions_html="step.instructionsMarkdown" :ingredient_factor="ingredientFactor" v-if="step.instructionsMarkdown != undefined"></instructions>
+                        <!-- sub recipes dont have a correct schema, thus they use different variable naming -->
+                        <instructions :instructions_html="step.instructions_markdown" :ingredient_factor="ingredientFactor" v-else></instructions>
                     </v-col>
                 </v-row>
             </v-card-text>
 
+            <template v-if="step.stepRecipe">
+                <v-card-text>
+                    <v-card class="mt-1" v-for="(subRecipeStep, subRecipeStepIndex) in step.stepRecipeData.steps" :key="subRecipeStep.id">
+                        <step-view v-model="step.stepRecipeData.steps[subRecipeStepIndex]" :step-number="subRecipeStepIndex+1" :ingredientFactor="ingredientFactor"></step-view>
+                    </v-card>
+                </v-card-text>
+            </template>
+            <template v-if="step.file">
+                <v-img :src="step.file.preview" v-if="step.file.preview"></v-img>
+                <a :href="step.file.fileDownload" v-else>{{ $t('Download') }}</a>
+            </template>
         </template>
 
     </v-card>
diff --git a/vue3/src/components/inputs/StepEditor.vue b/vue3/src/components/inputs/StepEditor.vue
index fc30b27b5..f5ba24f59 100644
--- a/vue3/src/components/inputs/StepEditor.vue
+++ b/vue3/src/components/inputs/StepEditor.vue
@@ -40,7 +40,7 @@
                     <v-number-input :label="$t('Time')" v-model="step.time" :min="0" :step="5" control-variant="split"></v-number-input>
                 </v-col>
                 <v-col cols="12" md="6" v-if="showRecipe || step.stepRecipe != null">
-                    <model-select model="Recipe" v-model="step.stepRecipe" append-to-body></model-select>
+                    <model-select model="Recipe" v-model="step.stepRecipe" :object="false" append-to-body></model-select>
                 </v-col>
                 <v-col cols="12" md="6" v-if="showFile || step.file != null">
                     <model-select model="UserFile" v-model="step.file" append-to-body></model-select>
diff --git a/vue3/src/components/model_editors/ModelEditorBase.vue b/vue3/src/components/model_editors/ModelEditorBase.vue
index f85a5158d..9f65cc82d 100644
--- a/vue3/src/components/model_editors/ModelEditorBase.vue
+++ b/vue3/src/components/model_editors/ModelEditorBase.vue
@@ -4,7 +4,7 @@
             :title="$t(modelClass.model.localizationKey) + ((isChanged) ? '*' : '')"
             :sub-title="objectName"
             :icon="modelClass.model.icon"
-            @close="emit('close');"
+            @close="closeDialog()"
             :hide-close="!dialog"
         ></v-closable-card-title>
 
@@ -26,11 +26,12 @@
         <v-card>
             <v-closable-card-title v-model="leaveConfirmDialog" :title="$t('Confirm')"></v-closable-card-title>
             <v-card-text>
-                {{$t('WarnPageLeave')}}
+                {{ $t('WarnPageLeave') }}
             </v-card-text>
             <v-card-actions>
                 <v-btn @click="leaveConfirmDialog = false; leaveGoTo = null">{{ $t('Cancel') }}</v-btn>
-                <v-btn :to="leaveGoTo" color="warning">{{ $t('Confirm') }}</v-btn>
+                <v-btn :to="leaveGoTo" color="warning" v-if="!dialog">{{ $t('Confirm') }}</v-btn>
+                <v-btn @click="emit('close')" color="warning" v-if="dialog">{{ $t('Confirm') }}</v-btn>
             </v-card-actions>
         </v-card>
 
@@ -59,6 +60,9 @@ const props = defineProps({
 const leaveConfirmDialog = ref(false)
 const leaveGoTo = ref<RouteLocationNormalized | null>(null)
 
+/**
+ * before navigating to another page check for unsaved changes, if so display confirmation dialog
+ */
 onBeforeRouteLeave((to, from) => {
     if (props.isChanged && !leaveConfirmDialog.value) {
         leaveConfirmDialog.value = true
@@ -68,6 +72,18 @@ onBeforeRouteLeave((to, from) => {
     return true
 })
 
+/**
+ * if object was changed open leave confirm dialog, if not emit close for parent to close dialog
+ * does not trigger when user clicks outside of dialog
+ */
+function closeDialog() {
+    if (props.isChanged && !leaveConfirmDialog.value) {
+        leaveConfirmDialog.value = true
+    } else {
+        emit('close');
+    }
+}
+
 </script>