diff --git a/vue3/src/components/display/IngredientsInline.vue b/vue3/src/components/display/IngredientsInline.vue
new file mode 100644
index 0000000000..30318d82ac
--- /dev/null
+++ b/vue3/src/components/display/IngredientsInline.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import {PropType, reactive} from 'vue'
+import {Step} from "@/openapi";
+
+const props = defineProps({
+  step: {
+    type: Object as PropType<Step>,
+    required: true
+  }
+})
+
+const checked = reactive(Array(props.step?.ingredients.length).fill(false))
+</script>
+
+<template>
+  <v-chip v-if="props.step?.ingredients.length" variant="text" color="">Ingredients</v-chip>
+  <v-chip
+      v-for="ingredient in props.step.ingredients" :key="ingredient.id" class="ma-1"
+      @click="checked[ingredient.id || 0] = !checked[ingredient.id || 0]"
+      :class="{ 'checked': checked[ingredient.id || 0] }"
+      :color="checked[ingredient.id || 0] ? 'grey' : 'primary'"
+      :variant="checked[ingredient.id || 0] ? 'tonal' : 'elevated'"
+  >
+    <b>
+      {{ `${ingredient.amount}` + (ingredient.unit ? ` ${ingredient.unit.name}` : '') + '&nbsp'}}
+    </b>
+    {{ ingredient.food?.name }}
+  </v-chip>
+</template>
+
+<style scoped>
+
+.checked {
+  text-decoration: line-through;
+}
+
+</style>
\ No newline at end of file
diff --git a/vue3/src/components/display/RecipeCard.vue b/vue3/src/components/display/RecipeCard.vue
index 30939e366b..7fc6f7abba 100644
--- a/vue3/src/components/display/RecipeCard.vue
+++ b/vue3/src/components/display/RecipeCard.vue
@@ -1,62 +1,71 @@
 <template>
-    <template v-if="!componentProps.loading">
-        <v-card :to="`/recipe/${componentProps.recipe.id}`" :style="{'height': componentProps.height}">
-            <v-tooltip
-                class="align-center justify-center"
-                location="top center" origin="overlap"
-                no-click-animation
-                :open-on-hover="componentProps.recipe.description != null && componentProps.recipe.description != ''"
-                contained
-            >
-                <template v-slot:activator="{ props }">
-                    <recipe-image
-                        height="70%"
-                        width="100%"
-                        :recipe="componentProps.recipe"
-                    >
-
-                    </recipe-image>
-
-                    <v-divider class="p-0" v-if="componentProps.recipe.image == null"></v-divider>
-
-                </template>
-                <div v-if="componentProps.recipe.description != null && componentProps.recipe.description != ''">
-                    {{ componentProps.recipe.description }}
-                </div>
-            </v-tooltip>
-            <v-card-item>
-                <div class="text-rows-2">
-                    <h3>{{ componentProps.recipe.name }}</h3>
+  <template v-if="!componentProps.loading">
+    <v-card :to="`/recipe/${componentProps.recipe.id}`" :style="{'height': componentProps.height}">
+      <v-tooltip
+          class="align-center justify-center"
+          location="top center" origin="overlap"
+          no-click-animation
+          :open-on-hover="componentProps.recipe.description != null && componentProps.recipe.description != ''"
+          contained
+      >
+        <template v-slot:activator="{ props }">
+          <recipe-image
+              height="100%"
+              width="100%"
+              :recipe="componentProps.recipe"
+              cover
+              class="align-end"
+          >
+            <template #overlay>
+              <v-card
+                  style="backdrop-filter: blur(2px); background: rgba(0, 0, 0, 0.5)"
+              >
+                <v-card-title class="text-white py-0">{{ componentProps.recipe.name }}
+                </v-card-title>
+
+                <div style="padding: 0 7px 7px 7px">
+                  <v-chip size="small" color="white" variant="flat" style="margin-right: 5px"
+                          v-for="badge in generateInfoBadges(componentProps.recipe, componentProps.info_badges)">
+                    {{ badge }}
+                  </v-chip>
+                  <span v-if="componentProps.show_keywords">
+                    <v-chip v-for="(keyword, index) in componentProps.recipe.keywords?.slice(0, 2)" :key="index"
+                          size="small" color="white" variant="outlined" style="margin-right: 5px">
+                    {{ keyword.label }}
+                  </v-chip>
+                  <v-chip v-if="(componentProps.recipe.keywords?.length || 0) > 2" size="small" color="white"
+                          variant="outlined" style="margin-right: 5px">
+                    {{ (componentProps.recipe.keywords?.length || 0) - 2 }} more
+                  </v-chip>
+                  </span>
                 </div>
-                <!-- TODO decide if context menu should be re-added (maybe make it a setting) -->
-                <!-- <recipe-context-menu class="float-end" :recipe="recipe"></recipe-context-menu>-->
-            </v-card-item>
-<!--            <v-card-text>-->
-<!--                <div class="text-rows-2">-->
-<!--                    <keywords-component variant="outlined" :keywords="componentProps.recipe.keywords">-->
-<!--                        <template #prepend>-->
-<!--                            <v-chip class="mb-1 me-1" size="x-small" prepend-icon="far fa-clock" label variant="outlined" v-if="componentProps.recipe.workingTime != undefined && componentProps.recipe.workingTime > 0">-->
-<!--                                {{ recipe.workingTime! + recipe.waitingTime! }}-->
-<!--                            </v-chip>-->
-<!--                        </template>-->
-<!--                    </keywords-component>-->
-<!--                </div>-->
-<!--            </v-card-text>-->
-
-        </v-card>
-    </template>
-    <template v-else>
-        <v-card :style="{'height': componentProps.height}">
-            <v-img src="../../assets/recipe_no_image.svg" cover height="60%"></v-img>
-            <v-card-title>
-                <v-skeleton-loader type="heading"></v-skeleton-loader>
-            </v-card-title>
-            <v-card-text>
-                <v-skeleton-loader type="subtitle"></v-skeleton-loader>
-            </v-card-text>
-        </v-card>
-
-    </template>
+
+              </v-card>
+            </template>
+          </recipe-image>
+
+          <v-divider class="p-0" v-if="componentProps.recipe.image == null"></v-divider>
+        </template>
+
+        <div v-if="componentProps.recipe.description != null && componentProps.recipe.description != ''">
+          {{ componentProps.recipe.description }}
+        </div>
+      </v-tooltip>
+
+    </v-card>
+  </template>
+  <template v-else>
+    <v-card :style="{'height': componentProps.height}">
+      <v-img src="../../assets/recipe_no_image.svg" cover height="60%"></v-img>
+      <v-card-title>
+        <v-skeleton-loader type="heading"></v-skeleton-loader>
+      </v-card-title>
+      <v-card-text>
+        <v-skeleton-loader type="subtitle"></v-skeleton-loader>
+      </v-card-text>
+    </v-card>
+
+  </template>
 
 </template>
 
@@ -69,32 +78,47 @@ import RecipeContextMenu from "@/components/inputs/RecipeContextMenu.vue";
 import RecipeImage from "@/components/display/RecipeImage.vue";
 
 const componentProps = defineProps({
-    recipe: {type: {} as PropType<Recipe | RecipeOverview>, required: true,},
-    loading: {type: Boolean, required: false},
-    show_keywords: {type: Boolean, required: false},
-    show_description: {type: Boolean, required: false},
-    height: {type: String, required: false, default: '25vh'},
+  recipe: {type: {} as PropType<Recipe | RecipeOverview>, required: true,},
+  loading: {type: Boolean, required: false},
+  show_keywords: {type: Boolean, required: false},
+  show_description: {type: Boolean, required: false},
+  height: {type: String, required: false, default: '25vh'},
+  info_badges: {type: Array as PropType<infoBadgeProperties[]>, required: false, default: () => ['serves', 'time']}
 })
 
+// Can add more..
+type infoBadgeProperties = 'serves' | 'time'
+
+const generateInfoBadges = (recipe: Recipe | RecipeOverview, properties: infoBadgeProperties[]) => {
+  const badges = {
+    'serves': `Serves ${recipe.servings}`,
+    'time': `Ready in ${(recipe.waitingTime || 0) + (recipe.workingTime || 0)} min`,
+  }
+
+  return properties.map((property) => {
+    return badges[property]
+  })
+}
+
 </script>
 
 <style scoped>
 
 .text-rows-1 {
-    overflow: hidden;
-    text-overflow: clip;
-    display: -webkit-box;
-    -webkit-line-clamp: 1;
-    line-clamp: 1;
-    -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: clip;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+  -webkit-box-orient: vertical;
 }
 
 .text-rows-2 {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    line-clamp: 2;
-    -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
 }
 </style>
\ No newline at end of file
diff --git a/vue3/src/components/display/RecipeView.vue b/vue3/src/components/display/RecipeView.vue
index 61450fcbce..9d95a5b0c6 100644
--- a/vue3/src/components/display/RecipeView.vue
+++ b/vue3/src/components/display/RecipeView.vue
@@ -1,100 +1,218 @@
 <template>
+  <template v-if="props.recipe.name != undefined">
+    <v-card class="mt-md-4 rounded-0">
+      <recipe-image
+          max-height="40vh"
+          :recipe="props.recipe"
+          class="align-end"
+          gradient="to bottom, rgba(0,0,0,0) 30%, rgba(0,0,0,1)"
+          cover
+      >
+        <template #overlay>
+          <div class="mx-3 my-3">
+          <span class="text-white ps-2">
+            {{ props.recipe.createdBy }} <br>
+          </span>
+            <b class="ps-2 text-h4 text-white" :class="{'text-truncate': !showFullRecipeName}"
+               @click="showFullRecipeName = !showFullRecipeName">{{ props.recipe.name }}</b>
+          </div>
+        </template>
+      </recipe-image>
+      <v-card>
+      </v-card>
+    </v-card>
+
+    <div class="content-grid">
+      <div> <!-- Main side -->
+          <StepsOverview :steps="props.recipe.steps"></StepsOverview>
+        <v-card class="mt-1" v-if="props.recipe.steps.length > 1">
+        </v-card>
 
-    <template v-if="props.recipe.name != undefined">
-
-        <v-card class="mt-md-4 rounded-0">
-            <recipe-image
-                max-height="25vh"
-                :recipe="props.recipe"
-            >
-                <template #overlay>
-                    <v-chip class="ms-2" color="primary" variant="flat" size="x-small">by {{ props.recipe.createdBy }}</v-chip>
-                    <KeywordsComponent variant="flat" class="ms-1 mb-2" :keywords="props.recipe.keywords"></KeywordsComponent>
-                </template>
-            </recipe-image>
-
-
-            <v-card>
-                <v-sheet class="d-flex align-center">
-                    <span class="ps-2 text-h5  flex-grow-1" :class="{'text-truncate': !showFullRecipeName}" @click="showFullRecipeName = !showFullRecipeName">{{ props.recipe.name }}</span>
-                    <recipe-context-menu :recipe="recipe"></recipe-context-menu>
-                </v-sheet>
-            </v-card>
+        <v-card class="mt-1" v-for="(step, index) in props.recipe.steps" :key="step.id" :ref="'step' + index">
+          <Step :step="step" :step-number="index+1" :ingredient_factor="ingredientFactor"></Step>
         </v-card>
 
-        <v-card class="mt-1">
-            <v-container>
-                <v-row class="text-center text-body-2">
-                    <v-col class="pt-1 pb-1">
-                        <i class="fas fa-cogs fa-fw mr-1"></i> {{ props.recipe.workingTime }} min<br/>
-                        <div class="text-grey">Working Time</div>
-                    </v-col>
-                    <v-col class="pt-1 pb-1">
-                        <div><i class="fas fa-hourglass-half fa-fw mr-1"></i> {{ props.recipe.waitingTime }} min</div>
-                        <div class="text-grey">Waiting Time</div>
-                    </v-col>
-                    <v-col class="pt-1 pb-1">
-                        <NumberScalerDialog :number="servings" @change="servings = $event.number" title="Servings">
-                            <template #activator>
-                                <div class="cursor-pointer">
-                                    <i class="fas fa-sort-numeric-up fa-fw mr-1"></i> {{ servings }} <br/>
-                                    <div class="text-grey"><span v-if="props.recipe?.servingsText">{{ props.recipe.servingsText }}</span><span v-else>Servings</span></div>
-                                </div>
-                            </template>
-                        </NumberScalerDialog>
-                    </v-col>
-                </v-row>
-            </v-container>
+        <recipe-activity :recipe="recipe"></recipe-activity>
+      </div>
+
+      <div class="recipe-sidebar"> <!-- Side bar -->
+        <v-card class="mt-1 mb-1">
+          <v-container>
+            <v-row class="text-center text-body-2">
+              <v-col class="pt-1 pb-1">
+                <b>
+                  <i class="fas fa-clock fa-fw mr-1"></i>
+                  {{ (props.recipe.waitingTime || 0) + (props.recipe.workingTime || 0) }} min<br/>
+                  <div class="text-grey">Total</div>
+                </b>
+              </v-col>
+              <v-col class="pt-1 pb-1">
+                <i class="fas fa-cogs fa-fw mr-1"></i> {{ props.recipe.workingTime }} min<br/>
+                <div class="text-grey">Work</div>
+              </v-col>
+              <v-col class="pt-1 pb-1">
+                <div><i class="fas fa-hourglass-half fa-fw mr-1"></i> {{ props.recipe.waitingTime }} min</div>
+                <div class="text-grey">Wait</div>
+              </v-col>
+            </v-row>
+            <v-row class="text-center text-body-2 pt-1 pb-1">
+              <v-col class="pt-1 pb-1">
+                <NumberScalerDialog :number="servings" @change="servings = $event.number" title="Servings">
+                  <template #activator>
+                    <div class="cursor-pointer">
+                      Serving <b>{{ servings }}
+                      </b><span v-if="props.recipe?.servingsText">{{
+                          props.recipe.servingsText
+                        }}</span> <span class="text-blue">Edit</span>
+                    </div>
+                  </template>
+                </NumberScalerDialog>
+              </v-col>
+            </v-row>
+          </v-container>
         </v-card>
 
-        <v-card class="mt-1" v-if="props.recipe.steps.length > 1">
-            <StepsOverview :steps="props.recipe.steps"></StepsOverview>
+        <v-card
+            v-if="recipe.sourceUrl"
+            :href="recipe.sourceUrl"
+            rel="noopener"
+            :subtitle="recipe.sourceUrl"
+            target="_blank"
+            title="Imported From"
+            color="blue lighten-2"
+            prepend-icon="fa:fas fa-arrow-up-right-from-square"
+        ></v-card>
+
+        <v-card class="mt-1 mb-1 px-3 py-3">
+          <KeywordsComponent variant="flat" size="default" class="ms-1 mb-2" color="primary"
+                             :keywords="props.recipe.keywords"></KeywordsComponent>
+          <p>
+            {{ props.recipe.description }}
+          </p>
+
         </v-card>
 
-        <v-card class="mt-1" v-for="(step, index) in props.recipe.steps" :key="step.id">
-            <Step :step="step" :step-number="index+1" :ingredient_factor="ingredientFactor"></Step>
+        <v-card v-if="recipe.properties?.length || 0 > 0" class="mt-1 mb-1">
+          <v-container>
+            <v-row>
+              <h4 style="margin: 5px">Properties</h4>
+            </v-row>
+            <v-row class="text-body-2">
+              <v-col class="pt-1 pb-1">
+                <v-list v-for="property in recipe.properties" :key="property.id" class="ma-1" color="primary">
+                  <b>{{ property.propertyType.name }}</b> {{ property.propertyAmount }} {{ property.propertyType.unit }}
+                </v-list>
+              </v-col>
+            </v-row>
+          </v-container>
         </v-card>
 
-        <recipe-activity :recipe="recipe"></recipe-activity>
-    </template>
+        <v-card v-if="recipe.sourceUrl">
+        </v-card>
+
+        <v-card class="mt-1" style="margin-bottom: 5px">
+          <v-container>
+            <v-row>
+              <h4 style="margin: 5px">Manage</h4>
+            </v-row>
+            <v-row class="text-center text-body-2">
+              <v-col class="pt-1 pb-1">
+                <v-btn @click="openRecipe()">
+                  <i class="fas fa-edit fa-fw mr-2"></i> Edit
+                </v-btn>
+                <v-btn @click="deleteRecipe()">
+                  <i class="fas fa-trash fa-fw mr-2"></i> Delete
+                </v-btn>
+              </v-col>
+            </v-row>
+          </v-container>
+        </v-card>
+      </div>
+    </div>
+  </template>
 </template>
 
 <script setup lang="ts">
-
-import {computed, defineComponent, PropType, ref, watch} from 'vue'
-import {ApiApi, Ingredient, Recipe} from "@/openapi"
-import KeywordsBar from "@/components/display/KeywordsBar.vue"
+import {computed, PropType, ref, watch, onMounted, onBeforeUnmount} from 'vue'
+import {Recipe} from "@/openapi"
 import NumberScalerDialog from "@/components/inputs/NumberScalerDialog.vue"
-import IngredientsTable from "@/components/display/IngredientsTable.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 {useRouter} from "vue-router";
+
+const router = useRouter()
 
 const props = defineProps({
-    recipe: {
-        type: Object as PropType<Recipe>,
-        required: true
-    }
+  recipe: {
+    type: Object as PropType<Recipe>,
+    required: true
+  }
 })
 
 const servings = ref(1)
 const showFullRecipeName = ref(false)
+const currentStep = ref(0)
 
 const ingredientFactor = computed(() => {
-    return servings.value / ((props.recipe.servings != undefined) ? props.recipe.servings : 1)
+  return servings.value / ((props.recipe.servings != undefined) ? props.recipe.servings : 1)
 })
 
 watch(() => props.recipe.servings, () => {
-    if (props.recipe.servings) {
-        servings.value = props.recipe.servings
+  if (props.recipe.servings) {
+    servings.value = props.recipe.servings
+  }
+})
+
+function openRecipe() {
+  router.push({name: 'edit_recipe', params: {recipe_id: props.recipe.id}})
+}
+
+const handleScroll = () => {
+  const steps = props.recipe.steps
+  for (let i = 0; i < steps.length; i++) {
+    const stepElement = document.getElementById('step' + i)
+    if (stepElement && stepElement.getBoundingClientRect().top < window.innerHeight / 2) {
+      currentStep.value = i
     }
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('scroll', handleScroll)
 })
 
+onBeforeUnmount(() => {
+  window.removeEventListener('scroll', handleScroll)
+})
 </script>
 
 <style scoped>
-
+.content-grid {
+  display: grid;
+  grid-template-columns: 70% 30%;
+}
+
+.recipe-sidebar {
+  margin: 0 10px 0 10px;
+}
+
+@media (max-width: 1280px) {
+  .content-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+  }
+
+  .recipe-sidebar {
+    order: -1; /* Display the sidebar first */
+    margin: 0;
+  }
+}
+
+.active-step {
+  font-weight: bold;
+  color: blue;
+}
 </style>
\ No newline at end of file
diff --git a/vue3/src/components/display/Step.vue b/vue3/src/components/display/Step.vue
index 206d05472d..402ead7654 100644
--- a/vue3/src/components/display/Step.vue
+++ b/vue3/src/components/display/Step.vue
@@ -1,27 +1,33 @@
 <template>
-    <v-card>
-        <v-card-title>
-            <v-row>
-                <v-col><span v-if="props.step.name">{{ props.step.name }}</span><span v-else>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="props.step.time != undefined && props.step.time > 0" @click="timerRunning = true"><i class="fas fa-stopwatch mr-1 fa-fw"></i> {{ props.step.time }}</v-btn>
-                        <v-btn size="small" color="success" v-if="hasDetails" @click="stepChecked = !stepChecked"><i class="fas fa-fw" :class="{'fa-check': !stepChecked, 'fa-times': stepChecked}"></i></v-btn>
-                    </v-btn-group>
-                </v-col>
-            </v-row>
-        </v-card-title>
-        <template v-if="!stepChecked">
-            <timer :seconds="props.step.time != undefined ? props.step.time*60 : 0" @stop="timerRunning = false" v-if="timerRunning"></timer>
-
-            <IngredientsTable :ingredients="props.step.ingredients"></IngredientsTable>
-
-            <v-card-text v-if="props.step.instructionsMarkdown.length > 0">
-                <instructions :instructions_html="props.step.instructionsMarkdown" :ingredient_factor="ingredient_factor"></instructions>
-            </v-card-text>
-        </template>
-
-    </v-card>
+  <v-card>
+    <v-card-title>
+      <v-row>
+        <v-col><span v-if="props.step.name">{{ props.step.name }}</span><span v-else>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="props.step.time != undefined && props.step.time > 0"
+                   @click="timerRunning = true"><i class="fas fa-stopwatch mr-1 fa-fw"></i> {{ props.step.time }}
+            </v-btn>
+            <v-btn size="small" color="success" v-if="hasDetails" @click="stepChecked = !stepChecked"><i
+                class="fas fa-fw" :class="{'fa-check': !stepChecked, 'fa-times': stepChecked}"></i></v-btn>
+          </v-btn-group>
+        </v-col>
+      </v-row>
+    </v-card-title>
+    <template v-if="!stepChecked">
+      <timer :seconds="props.step.time != undefined ? props.step.time*60 : 0" @stop="timerRunning = false"
+             v-if="timerRunning"></timer>
+
+      <IngredientsInline :step="props.step"></IngredientsInline>
+
+      <v-card-text v-if="props.step.instructionsMarkdown.length > 0">
+        <instructions :instructions_html="props.step.instructionsMarkdown"
+                      :ingredient_factor="ingredient_factor"></instructions>
+      </v-card-text>
+    </template>
+
+  </v-card>
 </template>
 
 <script setup lang="ts">
@@ -31,28 +37,29 @@ import {Step} from "@/openapi";
 
 import Instructions from "@/components/display/Instructions.vue";
 import Timer from "@/components/display/Timer.vue";
+import IngredientsInline from "@/components/display/IngredientsInline.vue";
 
 const props = defineProps({
-    step: {
-        type: {} as PropType<Step>,
-        required: true,
-    },
-    stepNumber: {
-        type: Number,
-        required: false,
-        default: 1
-    },
-    ingredient_factor: {
-        type: Number,
-        required: true,
-    },
+  step: {
+    type: {} as PropType<Step>,
+    required: true,
+  },
+  stepNumber: {
+    type: Number,
+    required: false,
+    default: 1
+  },
+  ingredient_factor: {
+    type: Number,
+    required: true,
+  },
 })
 
 const timerRunning = ref(false)
 const stepChecked = ref(false)
 
 const hasDetails = computed(() => {
-    return props.step.ingredients.length > 0 || (props.step.instruction != undefined && props.step.instruction.length > 0) || props.step.stepRecipeData != undefined || props.step.file != undefined
+  return props.step.ingredients.length > 0 || (props.step.instruction != undefined && props.step.instruction.length > 0) || props.step.stepRecipeData != undefined || props.step.file != undefined
 })
 
 </script>
diff --git a/vue3/src/components/display/StepsOverview.vue b/vue3/src/components/display/StepsOverview.vue
index 8565fdec68..48a142b4ef 100644
--- a/vue3/src/components/display/StepsOverview.vue
+++ b/vue3/src/components/display/StepsOverview.vue
@@ -1,12 +1,13 @@
 <template>
-    <v-expansion-panels>
-        <v-expansion-panel>
-            <v-expansion-panel-title><i class="far fa-list-alt fa-fw me-2"></i> Steps Overview</v-expansion-panel-title>
+<!--  You can write about anything for model-value & value here. This is so that the panel opens by defualt.-->
+    <v-expansion-panels model-value="sus">
+        <v-expansion-panel value="sus">
+            <v-expansion-panel-title><i class="far fa-list-alt fa-fw me-2"></i> Ingredients Overview</v-expansion-panel-title>
             <v-expansion-panel-text>
                 <v-container>
                     <v-row v-for="(s, i) in props.steps">
-                        <v-col class="pa-1">
-                            <b v-if="s.showAsHeader">{{ i + 1 }}. {{ s.name }} </b>
+                        <v-col class="pa-1" v-if="s.ingredients?.length">
+                            <b v-if="s.showAsHeader">Step {{ i + 1 }}</b> {{ s.name }}
                             <IngredientsTable :ingredients="s.ingredients"></IngredientsTable>
                         </v-col>
                     </v-row>