diff --git a/frontend/src/components/Recipe/RecipeTimeCard.vue b/frontend/src/components/Recipe/RecipeTimeCard.vue
index 64596fae3..06943b9ea 100644
--- a/frontend/src/components/Recipe/RecipeTimeCard.vue
+++ b/frontend/src/components/Recipe/RecipeTimeCard.vue
@@ -1,50 +1,58 @@
 <template>
   <v-card
     color="accent"
-    class="custom-transparent"
+    class="custom-transparent d-flex justify-start align-center text-center "
     tile
     :width="`${timeCardWidth}`"
+    v-if="totalTime || prepTime || performTime"
   >
-    <v-card-text
-      class="text-caption white--text"
-      v-if="totalTime || prepTime || performTime"
+    <v-card flat color="rgb(255, 0, 0, 0.0)">
+      <v-icon large color="white" class="mx-2"> mdi-clock-outline </v-icon>
+    </v-card>
+
+    <v-divider vertical color="white" class="py-1" v-if="totalTime">
+    </v-divider>
+    <v-card flat color="rgb(255, 0, 0, 0.0)" class=" my-2 " v-if="totalTime">
+      <v-card-text class="white--text">
+        <div>
+          <strong> {{ $t("recipe.total-time") }} </strong>
+        </div>
+        <div>{{ totalTime }}</div>
+      </v-card-text>
+    </v-card>
+
+    <v-divider vertical color="white" class="py-1" v-if="prepTime"> </v-divider>
+
+    <v-card
+      flat
+      color="rgb(255, 0, 0, 0.0)"
+      class="white--text my-2 "
+      v-if="prepTime"
     >
-      <v-row align="center" dense>
-        <v-col :cols="iconColumn">
-          <v-icon large color="white"> mdi-clock-outline </v-icon>
-        </v-col>
-        <v-divider
-          vertical
-          color="white"
-          class="my-1"
-          v-if="totalTime"
-        ></v-divider>
-        <v-col v-if="totalTime">
-          <div><strong> {{ $t("recipe.total-time") }} </strong></div>
-          <div>{{ totalTime }}</div>
-        </v-col>
-        <v-divider
-          vertical
-          color="white"
-          class="my-1"
-          v-if="prepTime"
-        ></v-divider>
-        <v-col v-if="prepTime">
-          <div><strong> {{ $t("recipe.prep-time") }} </strong></div>
-          <div>{{ prepTime }}</div>
-        </v-col>
-        <v-divider
-          vertical
-          color="white"
-          class="my-1"
-          v-if="performTime"
-        ></v-divider>
-        <v-col v-if="performTime">
-          <div><strong> {{ $t("recipe.perform-time") }} </strong></div>
-          <div>{{ performTime }}</div>
-        </v-col>
-      </v-row>
-    </v-card-text>
+      <v-card-text class="white--text">
+        <div>
+          <strong> {{ $t("recipe.prep-time") }} </strong>
+        </div>
+        <div>{{ prepTime }}</div>
+      </v-card-text>
+    </v-card>
+
+    <v-divider vertical color="white" class="my-1" v-if="performTime">
+    </v-divider>
+
+    <v-card
+      flat
+      color="rgb(255, 0, 0, 0.0)"
+      class="white--text py-2 "
+      v-if="performTime"
+    >
+      <v-card-text class="white--text">
+        <div>
+          <strong> {{ $t("recipe.perform-time") }} </strong>
+        </div>
+        <div>{{ performTime }}</div>
+      </v-card-text>
+    </v-card>
   </v-card>
 </template>
 
@@ -59,7 +67,7 @@ export default {
     timeLength() {
       let times = [];
       let timeArray = [this.totalTime, this.prepTime, this.performTime];
-      timeArray.forEach((element) => {
+      timeArray.forEach(element => {
         if (element) {
           times.push(element);
         }
@@ -83,10 +91,10 @@ export default {
     },
     timeCardWidth() {
       let timeArray = [this.totalTime, this.prepTime, this.performTime];
-      let width = 120;
-      timeArray.forEach((element) => {
+      let width = 80;
+      timeArray.forEach(element => {
         if (element) {
-          width += 70;
+          width += 95;
         }
       });