diff --git a/public/timeout.wav b/public/timeout.wav
new file mode 100644
index 0000000..a1f4627
Binary files /dev/null and b/public/timeout.wav differ
diff --git a/src/App.vue b/src/App.vue
index 2aa16cb..83c815c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,8 +1,8 @@
 <template>
   <div id="app">
     <p class="error" v-if="wakeLockAvailable == false">Wake lock not available</p>
-    <Settings v-if="time == 0" v-on:set-time="setTime"/>
-    <Timer v-if="time != 0" v-bind:time="time"/>
+    <Settings v-if="time == 0" v-on:set-time="setTime" v-on:set-playsound="setPlaySound"/>
+    <Timer v-if="time != 0" v-bind:time="time" v-bind:playsound="playsound"/>
   </div>
 </template>
 
@@ -19,6 +19,7 @@ export default {
   data: function() {
     return {
       time: 0,
+      playsound: false,
       wakeLockAvailable: this.hasWakeLock()
     }
   },
@@ -26,6 +27,9 @@ export default {
     setTime(number) {
       this.time = number;
     },
+    setPlaySound(state) {
+      this.playsound = state;
+    },
     hasWakeLock() {
       if ('wakeLock' in navigator) {
         return true;
@@ -41,6 +45,8 @@ export default {
 <style lang="scss">
 
 html, body {
+  background-image: url("~@/img/background.png");
+  background-size: cover;
   height: 100%;
   margin: 0;
 }
@@ -49,7 +55,7 @@ html, body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
-  color: #2c3e50;
+  color: $white;
   height: 100%;
 }
 
diff --git a/src/components/Settings.vue b/src/components/Settings.vue
index ee3fff1..eb2423f 100644
--- a/src/components/Settings.vue
+++ b/src/components/Settings.vue
@@ -9,6 +9,13 @@
       <span class="time-choice" v-bind:class="{ selected: time == 75 }" v-on:click="setTime(75)">75</span>
       <span class="time-choice" v-bind:class="{ selected: time == 90 }" v-on:click="setTime(90)">90</span>
     </div>
+    <div class="playsound">
+      <p>Geluid afspelen?</p>
+      <label class="switch">
+        <input type="checkbox" class="playSound" v-model="playsound">
+        <span class="slider round"></span>
+      </label>
+    </div>
     <button class="start-game" v-on:click="startGame()">Start het spel!</button>
   </div>
 </template>
@@ -19,13 +26,19 @@ export default {
   data: function() {
     return {
       time: 0,
+      playsound: false,
     }
   },
   methods: {
     setTime(time) {
       this.time = time
     },
+    setPlaySound() {
+      let state = document.querySelector(".playSound").checked;
+      this.playsound = state;
+    },
     startGame() {
+      this.$emit('set-playsound', this.playsound);
       this.$emit('set-time', this.time);
     }
   }
@@ -33,6 +46,7 @@ export default {
 </script>
 
 <style lang="scss">
+  p { margin-top: 0; margin-bottom: 1em; padding-top: 1em;}
   .time-choice {
     font-size: 48px;
     display: inline-block;
@@ -44,11 +58,13 @@ export default {
 
   .start-game {
     appearance: none;
-    border: 1px solid #2c3e50;
+    border: 1px solid $white;
     border-radius: 3px;
     font-size: 3rem;
     background: none;
     padding: 2rem;
+    color: $white;
+    margin: 1rem;
   }
 
 
diff --git a/src/components/Timer.vue b/src/components/Timer.vue
index 927a890..0a1bec2 100644
--- a/src/components/Timer.vue
+++ b/src/components/Timer.vue
@@ -26,6 +26,7 @@ export default {
   name: "Timer",
   props: {
     time: Number,
+    playsound: Boolean,
   },
   data: function() {
     return {
@@ -41,6 +42,11 @@ export default {
       this.countDown--;
       if(this.countDown == 0) {
         this.warning = true
+
+        if(this.playsound) {
+          var audio = new Audio('timeout.wav');
+          audio.play();
+        }
         clearInterval(Interval);
       }
 
@@ -70,8 +76,15 @@ export default {
   justify-content: space-between;
 
   .timeleft {
-    font-size: 5rem;
-    margin: 40px;
+    font-size: 60px;
+    padding: 23px 20px 84px 20px;
+    margin: 10px 0;
+    color: $black;
+    background-image: url("~@/img/tile-back.svg");
+    background-size: cover;
+    text-align: center;
+    width: 80px;
+    height: 60px;
   }
 
   .timeout {
@@ -84,7 +97,7 @@ export default {
 
   .timerBtn {
     appearance: none;
-    border: 1px solid #2c3e50;
+    border: 1px solid $white;
     border-radius: 3px;
     font-size: 3rem;
     background: none;
@@ -94,7 +107,7 @@ export default {
       display: inline-block;
       height: 2rem;
       width: 2rem;
-      background-color: #2c3e50;
+      background-color: $white;
     }
   }
 
diff --git a/src/img/background.png b/src/img/background.png
new file mode 100644
index 0000000..6a5ab7c
Binary files /dev/null and b/src/img/background.png differ
diff --git a/src/img/tile-back.svg b/src/img/tile-back.svg
new file mode 100644
index 0000000..b69913a
--- /dev/null
+++ b/src/img/tile-back.svg
@@ -0,0 +1,74 @@
+<?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"
+   id="Layer_1"
+   data-name="Layer 1"
+   viewBox="0 0 113 157"
+   version="1.1"
+   sodipodi:docname="tile-back.svg"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)">
+  <metadata
+     id="metadata3803">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <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="995"
+     id="namedview3801"
+     showgrid="false"
+     inkscape:zoom="5.1592357"
+     inkscape:cx="18.122222"
+     inkscape:cy="78.5"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Layer_1" />
+  <defs
+     id="defs3788">
+    <style
+       id="style3786">.cls-1{fill:#f9e3d1;}.cls-2,.cls-4{fill:#edd8c7;}.cls-3{font-size:60px;font-family:HelveticaNeue-Bold, Helvetica Neue;}.cls-3,.cls-4{font-weight:700;}.cls-4{font-size:18px;font-family:TimesNewRomanPS-BoldMT, Times New Roman;}</style>
+  </defs>
+  <title
+     id="title3790">1</title>
+  <rect
+     class="cls-1"
+     x="-0.25999999"
+     width="113"
+     height="157"
+     rx="15.31"
+     id="rect3792"
+     y="0"
+     style="display:inline;fill:#f9e3d1" />
+  <circle
+     class="cls-2"
+     cx="56.24"
+     cy="55.5"
+     r="36.5"
+     id="circle3794" />
+  <path
+     style="font-weight:700;font-size:18px;font-family:TimesNewRomanPS-BoldMT, 'Times New Roman';fill:#edd8c7"
+     d="m 16.82668,129.72781 c 0,1.3711 0,2.74219 0,4.11328 1.313165,-0.26057 2.264608,1.16659 0.456708,0.87891 -1.543838,0 -3.087675,0 -4.631513,0 -0.303441,-1.29428 2.151202,-0.25935 1.397461,-1.93392 0,-2.99403 0,-5.98806 0,-8.9821 -1.31478,0.26894 -2.263686,-1.15682 -0.456708,-0.87011 2.919647,0.19118 6.146385,-0.59631 8.764295,1.01376 2.546286,1.91649 -0.316005,5.09209 -1.081871,5.96182 1.028162,1.28242 1.865369,2.86617 3.010624,3.96383 1.698348,-0.0592 1.109911,1.31743 -0.305131,0.84672 -0.998888,-0.17956 -2.473987,0.5246 -2.891266,-0.73429 -0.934538,-1.4193 -1.869077,-2.8386 -2.803615,-4.2579 -0.486328,0 -0.972656,0 -1.458984,0 z m 3.770507,-3.48047 c 0.824443,-2.18619 -3.671589,-3.36535 -3.770507,-1.64333 0,1.38567 0,2.77134 0,4.15701 1.765604,0.10472 4.102495,-0.0248 3.770507,-2.51368 z m 10.828125,7.75196 c -1.893731,1.63241 -5.753567,1.12797 -5.097656,-2.02165 0,-1.57612 0,-3.15224 0,-4.72835 -1.827771,-0.39192 -0.115815,-1.13222 0.93218,-0.79102 1.373913,-0.31045 1.935614,0.1913 1.607859,1.58252 0.11669,1.75348 -0.282327,3.60583 0.307617,5.27295 2.115408,1.49976 2.526105,-0.77131 2.232422,-2.34743 0,-1.23901 0,-2.47802 0,-3.71702 -1.764701,-0.43843 0.02432,-1.11654 1.002492,-0.79102 1.489357,-0.39072 1.768754,0.42851 1.537547,1.75835 0,1.90412 0,3.80824 0,5.71235 1.81242,0.40323 0.08066,1.12859 -0.949757,0.79102 -0.717049,-0.13742 -1.707093,0.45216 -1.572704,-0.7207 z m 7.628907,-6.82032 c 1.627533,-1.40385 4.001503,-0.7628 5.214111,-0.11947 2.113275,-1.75036 5.624906,-0.54811 4.831787,2.49279 0,1.4589 0,2.91779 0,4.37668 1.827771,0.39192 0.115815,1.13222 -0.932179,0.79102 -0.681091,-0.14176 -2.921777,0.44085 -2.177071,-0.62838 1.16605,-0.19696 0.305785,-1.92236 0.569211,-2.80016 0.02356,-1.55273 0.360209,-4.71793 -2.186279,-3.63237 -0.619987,0.85602 -0.124368,2.58065 -0.283447,3.8274 0.21539,0.93108 -0.610278,2.67082 0.826171,2.65343 0.125815,1.19835 -1.840111,0.30496 -2.637527,0.58008 -1.322685,0.3313 -1.978396,-0.46672 -0.728684,-0.96685 -0.114763,-1.95858 0.273305,-4.00747 -0.290039,-5.88862 -2.075272,-1.47327 -2.477652,0.84928 -2.188476,2.39138 0,1.22436 0,2.44872 0,3.67307 1.764702,0.43843 -0.02431,1.11654 -1.002492,0.79102 -0.680328,-0.13897 -2.923269,0.43539 -2.176,-0.62446 1.250922,-0.13266 0.380623,-1.90417 0.638453,-2.80408 0,-1.34739 0,-2.69478 0,-4.04216 -1.81242,-0.40323 -0.08066,-1.12859 0.949758,-0.79102 0.717048,0.13743 1.707092,-0.45216 1.572703,0.7207 z m 14.99414,0 c 1.627533,-1.40385 4.001504,-0.7628 5.214112,-0.11947 2.113275,-1.75036 5.624906,-0.54811 4.831787,2.49279 0,1.4589 0,2.91779 0,4.37668 1.827771,0.39192 0.115815,1.13222 -0.93218,0.79102 -0.68109,-0.14176 -2.921777,0.44085 -2.177071,-0.62838 1.16605,-0.19696 0.305785,-1.92236 0.569212,-2.80016 0.02356,-1.55273 0.360209,-4.71793 -2.18628,-3.63237 -0.619987,0.85602 -0.124367,2.58065 -0.283447,3.8274 0.215391,0.93108 -0.610277,2.67082 0.826172,2.65343 0.125814,1.19835 -1.840111,0.30496 -2.637527,0.58008 -1.322685,0.3313 -1.978396,-0.46672 -0.728684,-0.96685 -0.114763,-1.95858 0.273305,-4.00747 -0.290039,-5.88862 -2.075273,-1.47327 -2.477652,0.84928 -2.188476,2.39138 0,1.22436 -1e-6,2.44872 0,3.67307 1.764701,0.43843 -0.02432,1.11654 -1.002493,0.79102 -0.680328,-0.13897 -2.923268,0.43539 -2.175999,-0.62446 1.250921,-0.13266 0.380623,-1.90417 0.638452,-2.80408 0,-1.34739 0,-2.69478 0,-4.04216 -1.812419,-0.40323 -0.08066,-1.12859 0.949758,-0.79102 0.717049,0.13743 1.707093,-0.45216 1.572703,0.7207 z m 15.011719,6.75 c 1.770466,0.19703 0.475479,1.20447 -0.677243,0.79102 -0.833192,-0.2624 -2.770732,0.57954 -2.75928,-0.52751 1.351557,0.0426 0.794756,-1.42624 0.896484,-2.37353 0,-1.52322 0,-3.04644 0,-4.56966 -1.842855,-0.3808 -0.151039,-1.13565 0.914602,-0.79102 1.372878,-0.30356 1.958395,0.18024 1.625437,1.58252 0,1.96273 0,3.92546 0,5.88818 z m -2.62793,-10.35351 c 1.51955,-4.21713 4.476799,2.85776 0.395508,0.9668 l -0.296631,-0.43946 z m 7.628907,7.18066 c 1.075195,-1.17187 2.15039,-2.34375 3.225586,-3.51562 -1.76138,-0.19871 -0.415613,-1.19416 0.70361,-0.78223 1.189533,-0.41219 2.390617,0.65739 0.614749,0.77344 -0.463096,0.8051 -2.030325,1.49461 -1.784727,2.3739 0.96721,1.42309 1.728175,3.11793 2.823914,4.37167 1.614221,0.64695 -0.570693,0.94224 -1.364975,0.74271 -0.762699,0.11623 -3.039619,0.0623 -1.555071,-0.79102 -0.550782,-0.96386 -1.101563,-1.92773 -1.652344,-2.8916 -1.287487,0.38242 -1.028098,1.5731 -1.010742,2.63731 1.067409,0.53836 0.966051,1.35133 -0.589299,1.04531 -0.821162,-0.26566 -2.75841,0.58476 -2.732967,-0.52751 1.292874,-0.0591 0.622438,-1.62224 0.782227,-2.54936 0,-2.87379 0,-5.74758 0,-8.62137 -1.842855,-0.3808 -0.151039,-1.13565 0.914601,-0.79102 1.372879,-0.30356 1.958396,0.18024 1.625438,1.58252 0,2.31429 0,4.62858 0,6.94287 z m 12.375,3.24317 c -1.893732,1.63241 -5.753568,1.12797 -5.097657,-2.02165 0,-1.57612 0,-3.15224 0,-4.72835 -1.827771,-0.39192 -0.115814,-1.13222 0.93218,-0.79102 1.373913,-0.31045 1.935614,0.1913 1.607859,1.58252 0.116691,1.75348 -0.282327,3.60583 0.307618,5.27295 2.115408,1.49976 2.526104,-0.77131 2.232422,-2.34743 0,-1.23901 0,-2.47802 0,-3.71702 -1.764702,-0.43843 0.02432,-1.11654 1.002492,-0.79102 1.489357,-0.39072 1.768753,0.42851 1.537547,1.75835 0,1.90412 0,3.80824 0,5.71235 1.812419,0.40323 0.08066,1.12859 -0.949758,0.79102 -0.717049,-0.13742 -1.707093,0.45216 -1.572703,-0.7207 z m 10.520507,-3.64746 c 1.260433,-2.53793 -3.448282,-4.66882 -3.09375,-1.60803 0,1.69617 0,3.39233 0,5.08849 2.500454,0.97523 3.272626,-1.47209 3.09375,-3.48046 z m -5.633789,-7.34766 c -1.845483,-0.36984 -0.142824,-1.11455 0.914602,-0.77344 1.372878,-0.30356 1.958396,0.18024 1.625437,1.58252 0.178653,1.54381 -0.81469,4.06994 1.582032,2.47583 3.649285,-0.86537 4.960526,3.6884 3.671493,6.36974 -1.296813,3.12897 -5.231195,2.2274 -7.793564,1.63929 0,-3.76464 0,-7.52929 0,-11.29394 z"
+     id="text3798"
+     inkscape:connector-curvature="0" />
+</svg>
diff --git a/src/scss/form-elements.scss b/src/scss/form-elements.scss
new file mode 100644
index 0000000..81f2f64
--- /dev/null
+++ b/src/scss/form-elements.scss
@@ -0,0 +1,63 @@
+
+/* The switch - the box around the slider */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: $light-gray;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .slider {
+  background-color: $red;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px $red;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
\ No newline at end of file
diff --git a/src/scss/includes.scss b/src/scss/includes.scss
new file mode 100644
index 0000000..4ae740a
--- /dev/null
+++ b/src/scss/includes.scss
@@ -0,0 +1,3 @@
+@import "~@/scss/vars.scss";
+@import "~@/scss/form-elements.scss";
+@import "~@/scss/fonts.scss";
\ No newline at end of file
diff --git a/src/scss/vars.scss b/src/scss/vars.scss
index ba61eff..fad871b 100644
--- a/src/scss/vars.scss
+++ b/src/scss/vars.scss
@@ -1,3 +1,6 @@
 $light-red: #ff8888;
 $dark-red: #880000;
-$red: #ff0000;
\ No newline at end of file
+$red: #ff0000;
+$white: #f9e3d1;
+$black: #121212;
+$light-gray: #ababab;
\ No newline at end of file
diff --git a/vue.config.js b/vue.config.js
index 64f8786..3750e78 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -9,7 +9,7 @@ module.exports = {
             // `scss` syntax requires an semicolon at the end of a statement, while `sass` syntax requires none
             // in that case, we can target the `scss` syntax separately using the `scss` option
             scss: {
-                additionalData: `@import "~@/scss/fonts.scss";@import "~@/scss/vars.scss";`
+                additionalData: `@import "~@/scss/includes.scss";`
             },
         }
     }