diff --git a/vue/src/apps/RecipeView/RecipeView.vue b/vue/src/apps/RecipeView/RecipeView.vue
index 4968f0b40..16b22e5d7 100644
--- a/vue/src/apps/RecipeView/RecipeView.vue
+++ b/vue/src/apps/RecipeView/RecipeView.vue
@@ -38,7 +38,7 @@
                         </div>
                         <div class="my-auto mr-1">
                             <span class="text-primary"><b>{{ $t("Preparation") }}</b></span><br/>
-                            {{ recipe.working_time }} {{ $t("min") }}
+                            {{ working_time }}
                         </div>
                     </div>
                 </div>
@@ -50,7 +50,7 @@
                         </div>
                         <div class="my-auto mr-1">
                             <span class="text-primary"><b>{{ $t("Waiting") }}</b></span><br/>
-                            {{ recipe.waiting_time }} {{ $t("min") }}
+                            {{ waiting_time }}
                         </div>
                     </div>
                 </div>
@@ -160,7 +160,7 @@ import "bootstrap-vue/dist/bootstrap-vue.css"
 import {apiLoadRecipe} from "@/utils/api"
 
 import RecipeContextMenu from "@/components/RecipeContextMenu"
-import {ResolveUrlMixin, ToastMixin} from "@/utils/utils"
+import {ResolveUrlMixin, ToastMixin, calculateHourMinuteSplit} from "@/utils/utils"
 
 import PdfViewer from "@/components/PdfViewer"
 import ImageViewer from "@/components/ImageViewer"
@@ -206,6 +206,10 @@ export default {
         ingredient_count() {
             return this.recipe?.steps.map((x) => x.ingredients).flat().length
         },
+        working_time: function() {
+            return calculateHourMinuteSplit(this.recipe.working_time)},
+        waiting_time: function() {
+            return calculateHourMinuteSplit(this.recipe.waiting_time)},
     },
     data() {
         return {
diff --git a/vue/src/components/RecipeCard.vue b/vue/src/components/RecipeCard.vue
index 80cbcdb25..13a68a366 100755
--- a/vue/src/components/RecipeCard.vue
+++ b/vue/src/components/RecipeCard.vue
@@ -8,8 +8,8 @@
                 </a>
             </div>
             <div class="card-img-overlay w-50 d-flex flex-column justify-content-left float-left text-left pt-2" v-if="recipe.working_time !== 0 || recipe.waiting_time !== 0">
-                <b-badge pill variant="light" class="mt-1 font-weight-normal" v-if="recipe.working_time !== 0"><i class="fa fa-clock"></i> {{ recipe.working_time }} {{ $t("min") }} </b-badge>
-                <b-badge pill variant="secondary" class="mt-1 font-weight-normal" v-if="recipe.waiting_time !== 0"><i class="fa fa-pause"></i> {{ recipe.waiting_time }} {{ $t("min") }} </b-badge>
+                <b-badge pill variant="light" class="mt-1 font-weight-normal" v-if="recipe.working_time !== 0"><i class="fa fa-clock"></i> {{ working_time }} </b-badge>
+                <b-badge pill variant="secondary" class="mt-1 font-weight-normal" v-if="recipe.waiting_time !== 0"><i class="fa fa-pause"></i> {{ waiting_time }} </b-badge>
             </div>
         </a>
 
@@ -59,7 +59,7 @@
 <script>
 import RecipeContextMenu from "@/components/RecipeContextMenu"
 import KeywordsComponent from "@/components/KeywordsComponent"
-import { resolveDjangoUrl, ResolveUrlMixin } from "@/utils/utils"
+import { resolveDjangoUrl, ResolveUrlMixin, calculateHourMinuteSplit } from "@/utils/utils"
 import RecipeRating from "@/components/RecipeRating"
 import moment from "moment/moment"
 import Vue from "vue"
@@ -99,6 +99,10 @@ export default {
                 return this.recipe.image
             }
         },
+        working_time: function() {
+            return calculateHourMinuteSplit(this.recipe.working_time)},
+        waiting_time: function() {
+            return calculateHourMinuteSplit(this.recipe.waiting_time)},
     },
     methods: {
 
diff --git a/vue/src/utils/utils.js b/vue/src/utils/utils.js
index 5db456e93..83e463303 100644
--- a/vue/src/utils/utils.js
+++ b/vue/src/utils/utils.js
@@ -305,6 +305,22 @@ export function roundDecimals(num) {
     return +(Math.round(num + `e+${decimals}`) + `e-${decimals}`)
 }
 
+export function calculateHourMinuteSplit(amount) {
+    if (amount >= 60) {
+        let hours = Math.floor(amount / 60)
+        let minutes = amount - hours * 60
+        let output_text = hours + " h"
+
+        if (minutes > 0){
+            output_text += " " + minutes + " min"
+        }
+
+        return output_text
+    } else {
+        return amount + " min"
+    }
+}
+
 const KILOJOULES_PER_CALORIE = 4.18
 
 export function calculateEnergy(amount, factor) {