diff --git a/src/components/Timer.vue b/src/components/Timer.vue
index 3611e19..aa4ef7d 100644
--- a/src/components/Timer.vue
+++ b/src/components/Timer.vue
@@ -1,23 +1,67 @@
 <template>
   <div class="timer">
     <div class="end" v-on:click="resetTime()">X</div>
-    <p v-if="warning == false" v-bind:class="{ danger: danger == true }" class="timeleft reverse">{{ countDown.toString() }}</p>
-    <p v-if="(warning == true) || (typeof warning == 'undefined')" class="timeout reverse">
-      <img src="joker.png" alt="joker">
-      <img src="joker.png" alt="joker">
-      <img src="joker.png" alt="joker">
-      <img src="joker.png" alt="joker">
-      <img src="joker.png" alt="joker">
-    </p>
-    <button v-on:click="restartTimer" class="timerBtn"><span class="timerBtn-inner"></span></button>
-    <p v-if="warning == false"  v-bind:class="{ danger: danger == true }" class="timeleft">{{ countDown.toString() }}</p>
-    <p v-if="warning == true || (typeof warning == 'undefined')" class="timeout">
-      <img src="joker.png" alt="joker">
-      <img src="joker.png" alt="joker">
-      <img src="joker.png" alt="joker">
-      <img src="joker.png" alt="joker">
-      <img src="joker.png" alt="joker">
-    </p>
+    <div class="timer-container">
+      <div class="timer-column no-mobile">
+        <div class="timer-item">
+          &nbsp;
+        </div>
+        <div class="timer-item rotate-left">
+          <p v-if="warning == false" v-bind:class="{ danger: danger == true }" class="timeleft">{{ countDown.toString() }}</p>
+          <p v-if="(warning == true) || (typeof warning == 'undefined')" class="timeout">
+            <img src="joker.png" alt="joker">
+            <img src="joker.png" alt="joker">
+            <img src="joker.png" alt="joker">
+            <img src="joker.png" alt="joker">
+            <img src="joker.png" alt="joker">
+          </p>
+        </div>
+        <div class="timer-item">
+          &nbsp;
+        </div>
+      </div>
+      <div class="timer-column mobile">
+        <div class="timer-item reverse">
+          <p v-if="warning == false" v-bind:class="{ danger: danger == true }" class="timeleft">{{ countDown.toString() }}</p>
+          <p v-if="(warning == true) || (typeof warning == 'undefined')" class="timeout">
+            <img src="joker.png" alt="joker">
+            <img src="joker.png" alt="joker">
+            <img src="joker.png" alt="joker">
+            <img src="joker.png" alt="joker">
+            <img src="joker.png" alt="joker">
+          </p>
+        </div>
+        <button v-on:click="restartTimer" class="timerBtn"><span class="timerBtn-inner"></span></button>
+        <div class="timer-item">
+          <p v-if="warning == false"  v-bind:class="{ danger: danger == true }" class="timeleft">{{ countDown.toString() }}</p>
+          <p v-if="warning == true || (typeof warning == 'undefined')" class="timeout">
+            <img src="joker.png" alt="joker">
+            <img src="joker.png" alt="joker">
+            <img src="joker.png" alt="joker">
+            <img src="joker.png" alt="joker">
+            <img src="joker.png" alt="joker">
+          </p>
+        </div>
+      </div>
+      <div class="timer-column no-mobile">
+        <div class="timer-item">
+          &nbsp;
+        </div>
+        <div class="timer-item rotate-right">
+          <p v-if="warning == false" v-bind:class="{ danger: danger == true }" class="timeleft">{{ countDown.toString() }}</p>
+          <p v-if="(warning == true) || (typeof warning == 'undefined')" class="timeout">
+            <img src="joker.png" alt="joker">
+            <img src="joker.png" alt="joker">
+            <img src="joker.png" alt="joker">
+            <img src="joker.png" alt="joker">
+            <img src="joker.png" alt="joker">
+          </p>
+        </div>
+        <div class="timer-item">
+          &nbsp;
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -111,11 +155,42 @@ export default {
 
 .timer {
   height: 100%;
+}
+.timer-container {
   display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
+  height: 100%;
 
+  .timer-column {
+    height: 100%;
+    width: 100%;
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    &.mobile {
+      display: flex;
+    }
+    .timer-item {
+      &.reverse {
+        transform: rotate(180deg);
+      }
+      &.rotate-left {
+        transform: rotate(90deg);
+      }
+
+      &.rotate-right {
+        transform: rotate(-90deg);
+      }
+      &.empty {
+        height: 33%;
+      }
+    }
+    @media (min-width: 768px) {
+      &.no-mobile {
+        display: flex;
+      }
+    }
+  }
   .timeleft {
     font-size: 60px;
     padding: 23px 20px 84px 20px;
@@ -155,18 +230,13 @@ export default {
       background-color: $white;
     }
   }
-
-  .reverse {
-    transform: scale(-1, -1);
-  }
-
-  .end {
-    display: block;
-    position: absolute;
-    right: 1px;
-    top: 1px;
-    font-size: 32px;
-  }
+}
+.end {
+  display: block;
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  font-size: 32px;
 }
 
 </style>
\ No newline at end of file