diff --git a/vue/src/components/StepComponent.vue b/vue/src/components/StepComponent.vue
index fe1acf90a..453fec1dc 100644
--- a/vue/src/components/StepComponent.vue
+++ b/vue/src/components/StepComponent.vue
@@ -8,7 +8,7 @@
                     <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>
+                        class="fas fa-user-clock"></i> {{ step_time }}</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") }}
@@ -131,7 +131,7 @@ 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, calculateHourMinuteSplit} from "@/utils/utils"
 
 Vue.prototype.moment = moment
 
@@ -150,6 +150,10 @@ export default {
             default: false,
         },
     },
+    computed: {
+        step_time: function() {
+            return calculateHourMinuteSplit(this.step.time)},
+    },
     data() {
         return {
             details_visible: true,