diff --git a/style.css b/style.css
index 6ddb643..bcb511d 100644
--- a/style.css
+++ b/style.css
@@ -24,7 +24,11 @@ button {
   box-shadow: 2px 2px black;
 }
 
+.cyan {
+  background-color: cyan;
+  color: black;
+}
+
 button:hover{
     background: #356094;
 }
-
diff --git a/timers.js b/timers.js
index fd40910..c8b27e7 100644
--- a/timers.js
+++ b/timers.js
@@ -1,4 +1,49 @@
+$(document).ready(function(){
 
+  var seconds = 0;
+  var minutes = 0;
+  var timerID;
+  var pauseRemoveCyan = function() {$('#pause').removeClass('cyan');};
+  var startRemoveCyan = function() {$('#start').removeClass('cyan');};
 
+  function updateTime() {
+    seconds++;
 
+    // increment minutes
+    if(seconds > 59) {
+      minutes++;
+      seconds = 0;
+    }
+    //concatenate zero to single digit
+    if (seconds < 10) {
+      seconds = "0" + seconds;
+    }
 
+    //displays minutes & seconds
+    $('#timer').text(minutes + " : " + seconds);
+  }
+
+  //starts timer
+  $('#start').on('click', function(){
+    timerID = setInterval(updateTime, 1000);
+    $(this).addClass('cyan');
+    pauseRemoveCyan();
+  })
+
+  //pauses timer
+  $('#pause').on('click', function(){
+    clearInterval(timerID);
+    $(this).addClass('cyan');
+    startRemoveCyan();
+  })
+
+  //resets timer
+  $('#reset').on('click', function(){
+    clearInterval(timerID);
+    seconds = 0;
+    pauseRemoveCyan();
+    startRemoveCyan();
+    $('#timer').text("Stop Watch");
+  })
+
+})