diff --git a/src/css/styles.css b/src/css/styles.css
index 3b90943..72bce21 100644
--- a/src/css/styles.css
+++ b/src/css/styles.css
@@ -20,6 +20,7 @@ body {
 form label {
     display: block;
     padding: 0.5em 1em;
+    flex-shrink: 0;
 }
 
 a:link, a:hover, a:visited, a:active {
@@ -291,7 +292,6 @@ button.add-timer {
     border-bottom: 1px solid #BDBDBD;
     width: 100%;
     background-color: #fff;
-    box-shadow: 0 0 3px 0 #BDBDBD;
     display: flex;
     justify-content: space-between;
 }
@@ -330,10 +330,22 @@ button.add-timer {
     max-height: calc(100vh - 60px);
 }
 
+.input-wrapper {
+    display: flex;
+    flex-direction: column;
+}
+
+.duration-wrapper {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
+
 @media all and (min-width: 1024px) {
     .new-timer {
         max-width: 800px;
-        max-height: 600px;
+        max-height: 500px;
         box-shadow: 0px 0px 3px #bdbdbd;
         border-radius: 10px;
     }
@@ -341,6 +353,19 @@ button.add-timer {
     #timer-setup {
         max-height: 540px;
     }
+
+    .input-wrapper {
+        flex-direction: row;
+    }
+
+    form label {
+        flex-basis: 7em;
+        align-self: center;
+    }
+
+    .duration-wrapper {
+        justify-content: start;
+    }
 }
 
 #timer-setup input, #timer-setup textarea, #timer-setup select {
@@ -350,27 +375,22 @@ button.add-timer {
 	width: 100%;
 	padding: 10px 20px;
 	font-size: 1.25em;
-        font-family: Open Sans, sans-serif;
-        box-sizing: border-box;
-        display: block;
+    font-family: Open Sans, sans-serif;
+    box-sizing: border-box;
+    display: block;
 }
 
-.select-wrapper {
-    display: table;
-    width: 100%;
+#timer-setup input.duration {
+    text-align: center;
+    flex: 0;
+    flex-basis: 20%;
+    padding-left: 0;
+    padding-right: 0;
 }
 
-.select-wrapper span {
-    width: 2%;
-    font-weight: bold;
+.repeat-entry {
     text-align: center;
 }
-.select-wrapper select, .select-wrapper span {
-    display: table-cell;
-}
-
-.min {text-align: left;}
-.sec {text-align: right;}
 
 #back {float: left;}
 #next {float: right;}
diff --git a/src/index.html b/src/index.html
index 15e623e..f5c8278 100644
--- a/src/index.html
+++ b/src/index.html
@@ -88,41 +88,66 @@
             </div>
             <div class="input-wrapper">
                 <label for="warmUp">Warm-up:</label>
-                <input class="duration" type="text" name="warmUp" onmouseup="handleDurationCaret(event)"
-                    oninput="maskDuration(event)" onkeyup="handleDurationCaret(event)" regex="\d{2}h \d{2}m \d{2}s"
-                    value="00h 00m 00s" />
+                <div class="duration-wrapper">
+                    <input class="duration" type="number" name="warmUpHours" placeholder="00" />
+                    <span class="duration-amount">h</span>
+                    <input class="duration" type="number" name="warmUpMins" placeholder="00" />
+                    <span class="duration-amount">m</span>
+                    <input class="duration" type="number" name="warmUpSecs" placeholder="00" />
+                    <span class="duration-amount">s</span>
+                </div>
             </div>
             <div class="input-wrapper">
                 <label for="low">Low-intensity:</label>
-                <input class="duration" type="text" name="low" onmouseup="handleDurationCaret(event)"
-                    oninput="maskDuration(event)" onkeyup="handleDurationCaret(event)" regex="\d{2}h \d{2}m \d{2}s"
-                    value="00h 00m 00s" />
+                <div class="duration-wrapper">
+                    <input class="duration" type="number" name="lowHours" placeholder="00" />
+                    <span class="duration-amount">h</span>
+                    <input class="duration" type="number" name="lowMins" placeholder="00" />
+                    <span class="duration-amount">m</span>
+                    <input class="duration" type="number" name="lowSecs" placeholder="00" />
+                    <span class="duration-amount">s</span>
+                </div>
             </div>
             <div class="input-wrapper">
                 <label for="high">High-intensity:</label>
-                <input class="duration" type="text" name="high" onmouseup="handleDurationCaret(event)"
-                    oninput="maskDuration(event)" onkeyup="handleDurationCaret(event)" regex="\d{2}h \d{2}m \d{2}s"
-                    value="00h 00m 00s" />
+                <div class="duration-wrapper">
+                    <input class="duration" type="number" name="highHours" placeholder="00" />
+                    <span class="duration-amount">h</span>
+                    <input class="duration" type="number" name="highMins" placeholder="00" />
+                    <span class="duration-amount">m</span>
+                    <input class="duration" type="number" name="highSecs" placeholder="00" />
+                    <span class="duration-amount">s</span>
+                </div>
             </div>
             <div class="input-wrapper">
                 <label for="rest">Rest:</label>
-                <input class="duration" type="text" name="rest" onmouseup="handleDurationCaret(event)"
-                    oninput="maskDuration(event)" onkeyup="handleDurationCaret(event)" regex="\d{2}h \d{2}m \d{2}s"
-                    value="00h 00m 00s" />
+                <div class="duration-wrapper">
+                    <input class="duration" type="number" name="restHours" placeholder="00" />
+                    <span class="duration-amount">h</span>
+                    <input class="duration" type="number" name="restMins" placeholder="00" />
+                    <span class="duration-amount">m</span>
+                    <input class="duration" type="number" name="restSecs" placeholder="00" />
+                    <span class="duration-amount">s</span>
+                </div>
             </div>
             <div class="input-wrapper">
                 <label for="cool">Cooldown:</label>
-                <input class="duration" type="text" name="cool" onmouseup="handleDurationCaret(event)"
-                    oninput="maskDuration(event)" onkeyup="handleDurationCaret(event)" regex="\d{2}h \d{2}m \d{2}s"
-                    value="00h 00m 00s" />
+                <div class="duration-wrapper">
+                    <input class="duration" type="number" name="coolHours" placeholder="00" />
+                    <span class="duration-amount">h</span>
+                    <input class="duration" type="number" name="coolMins" placeholder="00" />
+                    <span class="duration-amount">m</span>
+                    <input class="duration" type="number" name="coolSecs" placeholder="00" />
+                    <span class="duration-amount">s</span>
+                </div>
             </div>
             <div class="input-wrapper">
                 <label for="sets">Sets:</label>
-                <input type="number" name="sets" value="1">
+                <input type="number" class="repeat-entry" name="sets" value="1">
             </div>
             <div class="input-wrapper">
                 <label for="rounds">Rounds:</label>
-                <input type="number" name="rounds" value="1">
+                <input type="number" class="repeat-entry" name="rounds" value="1">
             </div>
         </form>
     </div>