diff --git a/README.md b/README.md
index 55d3e39..5ff7ec9 100644
--- a/README.md
+++ b/README.md
@@ -7,6 +7,7 @@ Technologies:
 * HTML5 and CSS
 * JavaScript 
 * React.js
+* Bootstrap (reactstrap)
 
 ## Demo
 Try tomadoro: https://tomadoro.herokuapp.com/
diff --git a/public/favicon.ico b/public/favicon.ico
index 90ab899..7868626 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/index.html b/public/index.html
index 3040266..4411bfd 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,11 +3,11 @@
   <head>
     <meta charset="utf-8" />
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="theme-color" content="#ffffff">
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
-    <meta name="theme-color" content="#000000" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
diff --git a/screenshot.png b/screenshot.png
index 2861280..9faeedc 100644
Binary files a/screenshot.png and b/screenshot.png differ
diff --git a/src/App.css b/src/App.css
index e970317..1c28c52 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,10 +1,17 @@
+@import url('https://fonts.googleapis.com/css?family=Fredoka+One');
+
 body {
-  background-color: #db4f4a;
+  background-color: #f04d3b; /* e74c3c */
   user-select: none;
+  font-family: 'Fredoka One', cursive;
+  color: white;
+  margin: 0;
+  padding: 0;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 .title {
-  font-size: 60px;
   font-weight: bold;
 }
 
@@ -14,17 +21,17 @@ body {
 }
 
 .App-header {
-  background-color: #c34944;
+  background-color: #c94233; /*c0392b*/
   display: flex;
-  min-height: 10vh;
+  min-height: 5vh;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  font-size: calc(40px + 2vmin);
-  color: white;
-  text-shadow: 0 0 1px #ce2e2e, 0 0 10px rgb(193, 194, 190);
-  margin-bottom: 25px;
-  box-shadow: 0 0 2px #cf4242, 0 0 8px #2B2D1F;
+  font-size: calc(25px + 2vmin);
+  color: white;  
+  text-shadow: 0 0 1px #2b0f0f, 0 0 2px rgb(193, 194, 190);
+  margin-bottom: 20px;
+  box-shadow: 0 0 2px #cf4242, 0 0 6px #2B2D1F;
 
 }
 
@@ -37,6 +44,7 @@ a:hover {
 }
 
 .footer {
+  font-family: Arial, Helvetica, sans-serif;
   margin-top: 15px;
   color: #ffffff;
   text-shadow: 0 0 2px #cf4242, 0 0 3px rgb(193, 194, 190);
diff --git a/src/App.js b/src/App.js
index 30cc11b..f0f1326 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import Timer from './components/Timer';
-import ButtonBox from './components/ButtonBox';
 import './App.css';
 
 class App extends Component {
@@ -8,7 +7,7 @@ class App extends Component {
     return (
       <div className="App">
         <div
-          className="App-header title"
+          className="App-header"
         >
           tomadoro
         </div>
diff --git a/src/components/Box.css b/src/components/Box.css
new file mode 100644
index 0000000..47d9bc1
--- /dev/null
+++ b/src/components/Box.css
@@ -0,0 +1,26 @@
+.button {
+    font-size: 16px;
+    font-weight: lighter;
+    height: 50px;
+    border-radius: 40px;
+    width: 100%;
+    margin: 5px 0px 5px 0px;
+    transition: all .2s ease-in-out;
+    box-shadow:0 0 1px #111110, 0 0 10px rgb(193, 194, 190);
+}
+
+.box {
+    padding: 10px;
+    background-color: white;
+    border-radius: 10px;
+    box-shadow:0 0 1px #111010, 0 0 10px rgb(193, 194, 190);
+}
+
+.button:hover { 
+    transform: scale(1.01); 
+}
+
+.button:focus { 
+    transform: scale(1.01); 
+    box-shadow:0 0 5px #111010, 0 0 10px rgb(193, 194, 190);
+}
\ No newline at end of file
diff --git a/src/components/ButtonBox.js b/src/components/Box.js
similarity index 80%
rename from src/components/ButtonBox.js
rename to src/components/Box.js
index af2d53f..7b1a889 100644
--- a/src/components/ButtonBox.js
+++ b/src/components/Box.js
@@ -1,18 +1,19 @@
 import React, { Component } from 'react';
 import { Button, Row, Col } from 'reactstrap';
-import './ButtonBox.css';
+import './Box.css';
 
-class ButtonBox extends Component {
+class Box extends Component {
 
   constructor(props) {
     super(props);
+    this.state = {};
   }
 
   render() {
     return (
-      <div className="button-box">
+      <div className="box">
         <Row>
-          <Col>
+          <Col xs="12">
             <Button
               className="button"
               block
@@ -25,13 +26,10 @@ class ButtonBox extends Component {
             </Button>
           </Col>
         </Row>
-        <Row
-          className="top-margin"
-        >
-          <Col>
+        <Row>
+          <Col xs="6" md="6">
             <Button
               className="button"
-              block
               color="danger"
               size="lg"
               onClick={this.props.stopTimer}
@@ -40,11 +38,9 @@ class ButtonBox extends Component {
               STOP
              </Button>
           </Col>
-
-          <Col>
+          <Col xs="6" md="6">
               <Button
                 className="button"
-                block
                 color="secondary"
                 size="lg"
                 onClick={this.props.resetTimer}
@@ -59,4 +55,4 @@ class ButtonBox extends Component {
       }
     }
     
-    export default ButtonBox;
\ No newline at end of file
+    export default Box;
\ No newline at end of file
diff --git a/src/components/ButtonBox.css b/src/components/ButtonBox.css
deleted file mode 100644
index 776d054..0000000
--- a/src/components/ButtonBox.css
+++ /dev/null
@@ -1,19 +0,0 @@
-.button {
-    font-size: 20px;
-    font-weight: bold;
-    height: 60px;
-    border-radius: 25px;
-    box-shadow:  0 0 1px #161616, 0 0 10px rgb(133, 133, 133);
-}
-
-.button-box {
-    background-color: rgba(255, 255, 255, 1.0);
-    padding: 20px;
-    margin-top: 5px;
-    border-radius: 25px;
-    box-shadow:0 0 1px #111010, 0 0 10px rgb(193, 194, 190);
-}
-
-.top-margin {
-    margin-top: 18px;
-}
\ No newline at end of file
diff --git a/src/components/LogoSpin.css b/src/components/Logo.css
similarity index 66%
rename from src/components/LogoSpin.css
rename to src/components/Logo.css
index 1029942..04c578d 100644
--- a/src/components/LogoSpin.css
+++ b/src/components/Logo.css
@@ -1,16 +1,17 @@
 .App-logo {
-    height: 25vmin;
-    filter: drop-shadow(0 0 0.50rem #f8ff9c);
+    height: 130px;
+    filter: drop-shadow(0 0 0.30rem #f8ff9c);
     align-items: center;
     justify-content: center;
     text-align: center;
+    transition: all .3s ease-in-out;
 }
 
+.App-logo:hover { transform: scale(1.2); }
+
 .App-logo-rotation {
     animation: App-logo-spin infinite 5s linear;
   }
-
-
   
 @keyframes App-logo-spin {
     from {
diff --git a/src/components/LogoSpin.js b/src/components/Logo.js
similarity index 74%
rename from src/components/LogoSpin.js
rename to src/components/Logo.js
index b65aead..d8b3162 100644
--- a/src/components/LogoSpin.js
+++ b/src/components/Logo.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
-import logo from '../logo.svg';
-import './LogoSpin.css';
+import logoSVG from '../logo.svg';
+import './Logo.css';
 
-class LogoSpin extends Component {
+class Logo extends Component {
   constructor(props) {
     super(props);
     this.defaultClassName = 'App-logo-rotation';
@@ -12,7 +12,7 @@ class LogoSpin extends Component {
     return (
       <img
         className={`App-logo ${this.props.isStarted ? this.defaultClassName: ''}`}
-        src={logo}
+        src={logoSVG}
         alt="Tomato"
         title="Click on the tomato to change modes"
         onClick={this.props.switchMode}
@@ -22,4 +22,4 @@ class LogoSpin extends Component {
 
 }
 
-export default LogoSpin;
\ No newline at end of file
+export default Logo;
\ No newline at end of file
diff --git a/src/components/Timer.css b/src/components/Timer.css
index 06bef27..727b9e3 100644
--- a/src/components/Timer.css
+++ b/src/components/Timer.css
@@ -1,24 +1,6 @@
 .timer {
-    font-size: 120px; 
-    font-weight: 600;
-    text-shadow: 0 0 1px #ce2e2e, 0 0 8px rgb(193, 194, 190);
+    font-size: 100px; 
+    font-weight: normal;
+    text-shadow: 0 0 1px #4b4b4b, 0 0 5px rgb(193, 194, 190);
     color: white;
-}
-
-.buttons {
-    font-size: 20px;
-    font-weight: bold;
-    height: 60px;
-    border-radius: 25px;
-    box-shadow:  0 0 1px #161616, 0 0 10px rgb(133, 133, 133);
-}
-
-
-.button-box {
-    background-color: rgba(255, 255, 255, 1.0);
-    padding: 20px;
-    margin-top: 5px;
-    border-radius: 25px;
-    box-shadow:0 0 1px #111010, 0 0 10px rgb(193, 194, 190);
-}
-
+}
\ No newline at end of file
diff --git a/src/components/Timer.js b/src/components/Timer.js
index b0e1c5e..78534ea 100644
--- a/src/components/Timer.js
+++ b/src/components/Timer.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import { Container, Row, Col } from 'reactstrap';
 import Notification from './Notification';
-import ButtonBox from './ButtonBox';
-import LogoSpin from './LogoSpin';
+import Box from './Box';
+import Logo from './Logo';
 import './Timer.css';
 
 class Timer extends Component {
@@ -119,13 +119,12 @@ class Timer extends Component {
         <Container>
           <Row>
             <Col>
-              <LogoSpin
+              <Logo
                 isStarted={this.state.started}
                 switchMode={this.switchMode}
               />
             </Col>
           </Row>
-
           <Row>
             <Col>
               <p
@@ -135,10 +134,9 @@ class Timer extends Component {
               </p>
             </Col>
           </Row>
-
           <Row>
-            <Col>
-              <ButtonBox
+            <Col md={{ size: 6, offset: 3 }}>
+              <Box
                 startTimer={this.startTimer}
                 stopTimer={this.stopTimer}
                 isStarted={this.state.started}
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index cee5f34..0000000
--- a/src/index.css
+++ /dev/null
@@ -1,14 +0,0 @@
-body {
-  margin: 0;
-  padding: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
-}
diff --git a/src/index.js b/src/index.js
index aac3a39..5d9961d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
diff --git a/src/logo.svg b/src/logo.svg
index b0f3efc..dd49f5f 100644
--- a/src/logo.svg
+++ b/src/logo.svg
@@ -1 +1,72 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" enable-background="new 0 0 64 64"><path d="M62,31.6C62.8,47,48.9,60,32.1,60S0.4,46.2,2.1,30.9C4.5,9.4,20.4,8,32.1,8C39.2,8,60.2,1.8,62,31.6z" fill="#ef4d3c"/><path d="m11 27c6.2-9.6 16.8-6.8 19.6-10.4 0 6.9 5 3.5 7.5 6.6 3.2 4 4.4 11.1 8.2 12.5-3.7-7.9 2.3-7.6-6.1-18.2 4.5 2.8 6.8 0 12.9 2.5-5.3-8.4-13.6-6-13.6-6s5.2-4.8 9.6-2.3c-4.6-6.8-17.9 1.8-17.9 1.8s-5.5-9.4-17.3.5c6.9-2.8 14.5 0 14.5 0s-12.5-3.1-17.4 13" fill="#8cc63e"/><g fill="#64892f"><path d="M11,27c0,0,7.3-13.5,19.9-12.3C19.8,9.6,11,20.4,11,27z"/><path d="m13.9 14c0 0 9.2-6.9 17.3 0-2.4-8.4-14.7-4.5-17.3 0"/><path d="m33.2 14.9c12.2 5.6 8.1 12 13.1 21-3.4-7.5 5-21-13.1-21"/><path d="m28.4 14c0 0 2.8-4.2 3.8-9.4.1-.7 3.1-.6 3 .1-1 6.7 1.7 10.4 1.7 10.4s-2.1.7-4.7.7c-2.6.1-3.8-1.8-3.8-1.8"/></g><ellipse cx="33.7" cy="4.6" rx="1.5" ry=".6" fill="#8cc63e"/></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="32"
+   height="32"
+   version="1"
+   id="svg3860"
+   sodipodi:docname="logo4.svg"
+   inkscape:version="0.92.4 (unknown)">
+  <metadata
+     id="metadata3866">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs3864" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="992"
+     id="namedview3862"
+     showgrid="false"
+     inkscape:zoom="29.5"
+     inkscape:cx="16"
+     inkscape:cy="10.576271"
+     inkscape:window-x="0"
+     inkscape:window-y="41"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg3860" />
+  <circle
+     fill="#e74c3c"
+     cx="16"
+     cy="16.95"
+     r="14"
+     id="circle3850" />
+  <path
+     fill-rule="evenodd"
+     opacity=".2"
+     d="m13.256 2.0009c-0.09394 0.00385-0.18954 0.019853-0.28418 0.049257-0.50472 0.15683-0.78473 0.63217-0.62781 1.0657l0.39381 1.0881c-5.7081 0.5335-8.738 6.373-8.738 6.373s1.9099 0.3483 6.5164-2.119c1.2799-0.68554 2.0178-1.4224 2.4389-2.0892-0.08704 0.68781-0.07428 1.5696 0.12891 2.6943 0.511 2.8249 2.643 4.9369 2.643 4.9369s2.5807-4.1555-0.18663-8.2285c4.082 2.6885 10.46 1.5201 10.46 1.5201s-2.8573-2.6286-5.8908-3.2838c-2.2636-0.48891-4.3475-0.16954-5.431 0.078611-0.000637-0.080285-0.01444-0.16151-0.04331-0.24121l-0.469-1.2956c-0.128-0.3522-0.503-0.5653-0.91-0.5487z"
+     id="path3852" />
+  <path
+     fill="#a6ef4d"
+     fill-rule="evenodd"
+     d="m13.256 1.0009c-0.09394 0.00385-0.18954 0.019853-0.28418 0.049257-0.50472 0.15683-0.78473 0.63217-0.62781 1.0657l0.39381 1.0881c-5.7081 0.5335-8.738 6.3734-8.738 6.3734s1.9099 0.3483 6.5164-2.119c1.2799-0.68554 2.0178-1.4224 2.4389-2.0892-0.08704 0.68781-0.07428 1.5696 0.12891 2.6943 0.511 2.8245 2.643 4.9365 2.643 4.9365s2.5807-4.1555-0.18663-8.2285c4.082 2.6885 10.46 1.5201 10.46 1.5201s-2.8573-2.6286-5.8908-3.2838c-2.2636-0.48891-4.3475-0.16954-5.431 0.078611-0.000637-0.080285-0.01444-0.16151-0.04331-0.24121l-0.469-1.2956c-0.128-0.3522-0.503-0.56529-0.91-0.5487z"
+     id="path3854" />
+  <path
+     fill="#fff"
+     fill-rule="evenodd"
+     opacity=".1"
+     d="m13.256 1c-0.09394 0.00385-0.19052 0.021377-0.28516 0.050781-0.50472 0.15683-0.78388 0.63093-0.62695 1.0645l0.11328 0.31055c0.11682-0.16601 0.28726-0.30465 0.51367-0.375 0.094-0.0294 0.191-0.047 0.285-0.0508 0.407-0.0166 0.783 0.1966 0.91 0.5488l0.46875 1.2969c0.02887 0.079702 0.04233 0.15995 0.04297 0.24023 1.0835-0.24815 3.168-0.56704 5.4316-0.078125 1.935 0.41794 3.7109 1.5964 4.8066 2.4258 0.674-0.0681 1.084-0.1426 1.084-0.1426s-2.8571-2.628-5.8906-3.2832c-2.2636-0.48891-4.3482-0.17002-5.4316 0.078125-0.000637-0.080285-0.0141-0.16053-0.04297-0.24023l-0.46875-1.2969c-0.127-0.3522-0.503-0.56539-0.91-0.5488zm-0.861 2.2559c-5.4817 0.7328-8.395 6.3222-8.395 6.3222s0.21657 0.026413 0.62305-0.00391c1.1505-1.6912 3.8959-4.9766 8.1152-5.3711l-0.34375-0.94727zm3.1465 2.5156c0.836 1.2321 1.179 2.4697 1.257 3.5996 0.061-0.9607-0.048-2.0381-0.492-3.1523-0.263-0.1358-0.518-0.2843-0.766-0.4473zm-2.5859 0.59766c-0.01247 0.019738-0.03189 0.040689-0.04492 0.060547 0.0025 0.099971 0.0093 0.20483 0.01563 0.31055 0.0086-0.12658 0.01469-0.25567 0.0293-0.37109z"
+     id="path3858" />
+</svg>
