diff --git a/assets/heartbeat.mp3 b/assets/heartbeat.mp3
new file mode 100644
index 0000000..c0a344a
Binary files /dev/null and b/assets/heartbeat.mp3 differ
diff --git a/heartbeat/server.py b/heartbeat/server.py
index 1eebdfa..967512a 100644
--- a/heartbeat/server.py
+++ b/heartbeat/server.py
@@ -41,6 +41,7 @@ def start(args):
         (r"/", FrontendHandler, {"conn": conn}),
         (r"/ws", WebSocketHandler, {"conn": conn, "token": token}),
         (r"/(.*).csv", ExportHandler, {"conn": conn}),
+        (r"/assets/(.*)", tornado.web.StaticFileHandler, {"path": "assets/"}),
     ],debug=True)
 
     application.listen(8888)
diff --git a/views/plot.html b/views/plot.html
index b55776a..f5994bf 100644
--- a/views/plot.html
+++ b/views/plot.html
@@ -1,13 +1,57 @@
 <!DOCTYPE html>
  <meta charset="utf-8" />
- <title>WebSocket Test</title>
+ <title>Quantified Other: Heart Edition</title>
  <style media="screen">
    body{
      font-family: Helvetica, sans-serif;
    }
    #graph{
-     height: calc(100vh - 5em);
+     height: calc(100vh);
+     width:100vw;
+     position: absolute;
+     top:0;
+     left:0;
+     z-index: -1;
    }
+
+  #downloads {
+    border: solid #ccc 1px;
+    padding: 10px;
+    position: absolute;
+    top: 180px;
+    right: 10px;
+    background: aliceblue;
+    font-weight: bold;
+    width: 200px;
+  }
+  #title {
+    background: aliceblue;
+    width: 200px;
+    height: 130px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: white;
+    font-size: 20pt;
+    padding: 10px;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    border: solid 1px #ccc;
+    text-shadow: 1px 1px #ccc, -1px -1px #ccc,1px -1px #ccc, -1px 1px #ccc;
+  }
+  #value {
+    padding-left: 6px;
+    font-size: 60px;
+    display: block;
+    float: right;
+    width: 50%;
+  }
+  #downloads span {
+    font-weight: normal;
+    margin-left: 20px;
+  }
+
  </style>
  <script src="https://cdn.plot.ly/plotly-1.5.0.min.js"></script>
  <script language="javascript" type="text/javascript">
@@ -17,19 +61,19 @@
 
  </script>
 
- <h2 id="title">current bpm: <span id='value'>...</span></h2>
+ <h2 id="title">live bpm: <span id='value'>...</span></h2>
  <div id='downloads'>
-   Claim data
-   <span>Last hour <a href='/1h.csv'>as CSV</a>.</span>
-   <span>Last day <a href='/24h.csv'>as CSV</a>.</span>
-   <span>Last week <a href='/week.csv'>as CSV</a>.</span>
+   Data
+   <span><a href='/1h.csv'>Last hour</a></span>
+   <span><a href='/24h.csv'>Last day</a></span>
+   <span><a href='/week.csv'>Last week</a></span>
  </div>
 <div id="graph">
 
 </div>
 <script type="text/javascript">
 var valueEl = document.getElementById('value');
-
+var audio = new Audio('/assets/heartbeat.mp3');
 Plotly.d3.csv("/1h.csv", function(err, rows){
   console.log(rows);
    function unpack(rows, key) {
@@ -52,6 +96,8 @@ Plotly.d3.csv("/1h.csv", function(err, rows){
      title: 'Last hour',
    };
 
+   var currentBpm = null;
+
    Plotly.newPlot('graph', data, layout);
 
    var wsUri = window.location.toString().replace('http','ws') + "ws";
@@ -75,6 +121,7 @@ Plotly.d3.csv("/1h.csv", function(err, rows){
 
         console.log("update", update)
         valueEl.innerHTML = data['bpm'];
+        currentBpm = data['bpm'];
 
         Plotly.extendTraces('graph', update, [0])
      };
@@ -83,6 +130,16 @@ Plotly.d3.csv("/1h.csv", function(err, rows){
      };
    }
    connectSocket();
+
+   let tick = function() {
+     var duration = 10000;
+     if(currentBpm != null) {
+       audio.play();
+       duration = 60000 / currentBpm;
+     }
+     setTimeout(tick, duration);
+   }
+
 });
 
 </script>
