diff --git a/app.css b/app.css
new file mode 100644
index 0000000..e3fb8c0
--- /dev/null
+++ b/app.css
@@ -0,0 +1,53 @@
+html, body {
+    height: 100%;
+}
+
+body {
+    font-size: 10vw;
+    font-family: Arial;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+body.running {
+    background: lightgreen;
+}
+
+main {
+    width:75%;
+}
+
+button {
+    font-size:0.5em;
+    padding:1em;
+    border-radius: 0.5em;
+    color:white;
+}
+
+h1 {
+    text-align: center;
+}
+
+.btn-primary {
+    background: blue;
+}
+
+.btn-primary:disabled {
+    background: lightblue;
+}
+
+.btn-secondary {
+    background: grey;
+}
+
+.btn-secondary:disabled {
+    background: darkgrey;
+}
+
+.btn-danger {
+    background: red;
+}
+.btn-danger:disabled {
+    background: lightpink;
+}
diff --git a/app.js b/app.js
index 2959c1d..f024de9 100644
--- a/app.js
+++ b/app.js
@@ -1,9 +1,7 @@
 /* TODOs
-- no hours, just mins/secs
 - enable reset on load if there is saved time from before
-- style
-- green background for when timer is running
 - display previous entries
+- display how many 5/10min blocks have passed
 - set alarm for after certain times have passed
 - pause when not playing with audio api
 - deploy
@@ -21,7 +19,6 @@ if(previousSessionAccumulatedSeconds){
     savedPreviousSeconds = previousSessionAccumulatedSeconds
 }
 
-
 const padDigits = (value) => {
     if(value < 10){
         return '0'+value;
@@ -31,10 +28,9 @@ const padDigits = (value) => {
 }
 
 const formatSeconds = (total) => {
-    const hours = Math.floor(total/60/60);
-    const minutes = Math.floor( (total - (hours*60*60)) / 60 );
-    const seconds = total - minutes*60 - hours * 60 * 60;
-    return `${padDigits(hours)}:${padDigits(minutes)}:${padDigits(seconds)}`;
+    const minutes = Math.floor( total / 60 );
+    const seconds = total - minutes*60;
+    return `${minutes}:${padDigits(seconds)}`;
 }
 
 const getAccumulatedSeconds = (newerTime, olderTime) => {
@@ -55,6 +51,7 @@ document.querySelector('h1').innerHTML = formatSeconds(savedPreviousSeconds);
 document.querySelector('.btn-primary').addEventListener('click', (event) => {
     startTime = Date.now();
     running = true;
+    document.querySelector('body').classList.add('running');
     document.querySelector('.btn-primary').disabled=true;
     document.querySelector('.btn-secondary').disabled=false;
     document.querySelector('.btn-danger').disabled=true;
@@ -64,6 +61,7 @@ document.querySelector('.btn-primary').addEventListener('click', (event) => {
 document.querySelector('.btn-secondary').addEventListener('click', (event) => {
     updateSavedPreviousSeconds();
     running = false;
+    document.querySelector('body').classList.remove('running');
     document.querySelector('.btn-primary').disabled=false;
     document.querySelector('.btn-secondary').disabled=true;
     document.querySelector('.btn-danger').disabled=false;
@@ -76,10 +74,10 @@ document.querySelector('.btn-danger').addEventListener('click', (event) => {
     document.querySelector('.btn-danger').disabled=true;
 })
 
-window.onbeforeunload = function(){
-    if(running){
-        updateSavedPreviousSeconds();
-    }
-    window.localStorage.setItem('savedPreviousSeconds', savedPreviousSeconds);
-    return 'Good bye';
-}
+// window.onbeforeunload = function(){
+//     if(running){
+//         updateSavedPreviousSeconds();
+//     }
+//     window.localStorage.setItem('savedPreviousSeconds', savedPreviousSeconds);
+//     return 'Good bye';
+// }
diff --git a/index.html b/index.html
index eb29df3..3125159 100644
--- a/index.html
+++ b/index.html
@@ -5,15 +5,14 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
-        <!-- Bootstrap CSS -->
-        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
         <title>Practice Timer</title>
+        <link rel="stylesheet" href="app.css">
     </head>
     <body>
-        <main class="container-fluid">
-            <button type="button" class="btn btn-primary">Start</button>
-            <button type="button" disabled class="btn btn-secondary">Stop</button>
-            <button type="button" disabled class="btn btn-danger">Reset</button>
+        <main>
+            <button type="button" class="btn-primary">Start</button>
+            <button type="button" disabled class="btn-secondary">Stop</button>
+            <button type="button" disabled class="btn-danger">Reset</button>
             <h1></h1>
         </main>
         <script src="app.js" charset="utf-8"></script>