diff --git a/heartbeat/export.py b/heartbeat/export.py
index 1275dcc..663bffd 100644
--- a/heartbeat/export.py
+++ b/heartbeat/export.py
@@ -22,12 +22,13 @@ class ExportHandler(tornado.web.RequestHandler):
             range = yamiIchiCodes[range]
             # range = 1d, 3d, 1w
             ranges = {
-                "1d": ("2018-11-04 10:00:00","2018-11-05 12:00:00"),
+                "24h": ("2018-11-04 10:00:00","2018-11-05 12:00:00"),
                 "3d": ("2018-11-04 10:00:00","2018-11-07 12:00:00"),
                 "1w": ("2018-11-04 10:00:00","2018-11-11 12:00:00")
             }
             q = "SELECT * FROM beats WHERE recordedAt > ? AND recordedAt < ? ORDER BY recordedAt ASC"
 
+        print(range, ranges)
         # TODO: userid + start time
         if range not in ranges:
             # Not found
diff --git a/heartbeat/frontend.py b/heartbeat/frontend.py
index b32f963..9ec44c3 100644
--- a/heartbeat/frontend.py
+++ b/heartbeat/frontend.py
@@ -2,7 +2,7 @@
 import os
 import tornado.web
 import tornado.template
-
+from .ranges import yamiIchiCodes
 
 viewdir = os.path.dirname(os.path.realpath(__file__)) + '/../views'
 loader = tornado.template.Loader(viewdir)
@@ -15,11 +15,27 @@ class FrontendHandler(tornado.web.RequestHandler):
         """
         self.conn = conn
 
-    def get(self):
-        # c = self.conn.cursor()
-        # c.execute("SELECT * FROM beats ORDER BY createdAt DESC LIMIT 20")
-        # beats = [row for row in c]
-        # print(beats)
-        # html = loader.load("sockets.html").generate(beats=beats)
-        html = loader.load("plot.html").generate()
-        self.write(html)
+    def get(self, page):
+        print("getting", page)
+
+        if page in yamiIchiCodes:
+            range = yamiIchiCodes[page]
+            ranges = {
+                "24h": ("2018-11-04 10:00:00","2018-11-05 12:00:00"),
+                "3d": ("2018-11-04 10:00:00","2018-11-07 12:00:00"),
+                "1w": ("2018-11-04 10:00:00","2018-11-11 12:00:00")
+            }
+            startDate = ranges[range][0]
+            endDate = ranges[range][1]
+            html = loader.load("redeem.html").generate(code=page, startDate=startDate, endDate=endDate)
+            self.write(html)
+        elif page == "yamiichi":
+            # c = self.conn.cursor()
+            # c.execute("SELECT * FROM beats ORDER BY createdAt DESC LIMIT 20")
+            # beats = [row for row in c]
+            # print(beats)
+            # html = loader.load("sockets.html").generate(beats=beats)
+            html = loader.load("plot.html").generate()
+            self.write(html)
+        else:
+            raise tornado.web.HTTPError(404)
diff --git a/heartbeat/server.py b/heartbeat/server.py
index 3adfc9f..e8fd78e 100644
--- a/heartbeat/server.py
+++ b/heartbeat/server.py
@@ -39,10 +39,10 @@ def start(args):
     # use "/" as the root, and the
     # WebSocketHandler as our handler
     application = tornado.web.Application([
-        (r"/", FrontendHandler, {"conn": conn}),
         (r"/ws", WebSocketHandler, {"conn": conn, "token": token}),
         (r"/(.*).csv", ExportHandler, {"conn": conn}),
         (r"/assets/(.*)", tornado.web.StaticFileHandler, {"path": "assets/"}),
+        (r"/(.*)", FrontendHandler, {"conn": conn}),
     ],debug=True)
 
     application.listen(8888)
diff --git a/views/redeem.html b/views/redeem.html
new file mode 100644
index 0000000..e218070
--- /dev/null
+++ b/views/redeem.html
@@ -0,0 +1,178 @@
+<!DOCTYPE html>
+ <meta charset="utf-8" />
+ <title>Quantified Other: Heart Edition</title>
+ <link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/d-din" type="text/css"/>
+ <style media="screen">
+   body{
+     font-family: 'DDINRegular', Helvetica, sans-serif;
+   }
+   #graph{
+     height: calc(100vh);
+     width:100vw;
+     position: absolute;
+     top:0;
+     left:0;
+     z-index: -1;
+   }
+   h1{
+     color: darkblue;
+   }
+  #downloads {
+    border: solid #000 1px;
+    padding: 10px;
+    position: absolute;
+    top: 160px;
+    right: 10px;
+    background: darkblue;
+    font-weight: bold;
+    width: 200px;
+    color: white;
+  }
+  #downloads a{
+    color: yellow;
+  }
+  #title {
+    background: darkblue;
+    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 #000;
+    text-shadow: 1px 1px #000, -1px -1px #000,1px -1px #000, -1px 1px #000;
+    margin-top:0;
+  }
+  #value {
+    padding-left: 6px;
+    font-size: 60px;
+    display: block;
+    float: right;
+    width: 50%;
+    text-align: right;
+  }
+  #downloads span {
+    font-weight: normal;
+    margin-left: 20px;
+  }
+
+  #projecttitle{
+    position: absolute;
+    top: 0px;
+    left: 10px;
+  }
+
+  #me{
+    font-style: italic;
+    position: absolute;
+    bottom: 10px;
+    right:10px;
+    font-size: 70%;
+  }
+
+  .gtitle{
+    transform: translateY(47px);
+  }
+
+ </style>
+ <script src="https://cdn.plot.ly/plotly-1.5.0.min.js"></script>
+ <script language="javascript" type="text/javascript">
+
+ var wsUri = window.location.toString().replace('http','ws') + "ws";
+ console.log(wsUri)
+
+ </script>
+
+<h1 id="projecttitle">Data Double Black Market - Redeem code {{ code }}</h1>
+<div id="me">A project by <a href="https://rubenvandeven.com">Ruben van de Ven</a></div>
+ <h2 id="title">live bpm: <span id='value'>...</span></h2>
+ <div id='downloads'>
+   <div class='description>'>Get as <a href="/{{ code }}.csv">csv</a></div>
+ </div>
+<div id="graph">
+
+</div>
+<script type="text/javascript">
+var valueEl = document.getElementById('value');
+var audio = new Audio('/assets/heartbeat.mp3');
+Plotly.d3.csv("/{{ code }}.csv", function(err, rows){
+  console.log(rows);
+   function unpack(rows, key) {
+     return rows.map(function(row) { return row[key]; });
+   }
+
+
+   var trace1 = {
+     type: "scatter",
+     mode: "lines",
+     name: 'BPM',
+     x: unpack(rows, 'timestamp'),
+     y: unpack(rows, 'bpm'),
+     line: {color: '#02028b'}//17BECF
+   }
+
+   var data = [trace1];
+
+   var layout = {
+     title: 'Redeem heartbeat: Ruben van de Ven',
+     xaxis: {
+
+       type: 'date',
+       range: [ new Date("{{ startDate }}").getTime(), new Date("{{ endDate }}").getTime() ],
+       autorange: false
+     }
+   };
+
+   var currentBpm = null;
+
+   Plotly.newPlot('graph', data, layout);
+
+   var wsUri = window.location.toString().replace('http','ws') + "ws";
+
+   var connectSocket = function() {
+     websocket = new WebSocket(wsUri);
+     websocket.onopen = function(evt) {
+       console.log("opened");
+     };
+     websocket.onclose = function(evt) {
+       console.log("closed", evt);
+       valueEl.innerHTML = '...';
+       setTimeout(connectSocket, 1000 * 10);
+     };
+     websocket.onmessage = function(evt) {
+       data = JSON.parse(evt.data);
+        var update = {
+          x: [[data['timestamp']]],
+          y: [[data['bpm']]]
+        }
+
+        console.log("update", update)
+        valueEl.innerHTML = data['bpm'];
+        currentBpm = data['bpm'];
+
+        Plotly.extendTraces('graph', update, [0])
+     };
+     websocket.onerror = function(evt) {
+
+     };
+   }
+   connectSocket();
+
+   let tick = function() {
+     var duration = 10000;
+     if(currentBpm != null) {
+       audio.play();
+       duration = 60000 / currentBpm;
+     }
+     setTimeout(tick, duration);
+   }
+   tick();
+
+});
+
+</script>
