diff --git a/apps/hrmaccevents/custom.html b/apps/hrmaccevents/custom.html
index 02276eb64..b7b9d53a8 100644
--- a/apps/hrmaccevents/custom.html
+++ b/apps/hrmaccevents/custom.html
@@ -1,18 +1,42 @@
 <html>
  <head>
   <title>Bangle.js Accelerometer streaming</title>
+  <link rel="stylesheet" href="../../css/spectre.min.css">
  </head>
  <body>
 <script src="https://www.puck-js.com/puck.js"></script>
-<p></div><input type="checkbox" id="chkLocal">Store on Bangle (file named log.csv, download with IDE)</input></p>
 <p>
-  <button id="btnConnect">Start</button>
-  <button id="btnStop">Stop</button>
-  <button id="btnReset">Reset</button>
-  <button id="btnSave">Save CSV</button>
+<div class="form-group">
+  <label class="form-switch">
+    <input type="checkbox" id="chkLocal">
+    <i class="form-icon"></i> Store on bangle (file named log.csv)
+  </label>
+</div>
+</p>
+<p>
+  <button id="btnConnect" class="btn btn-primary">Start</button>
+  <button id="btnStop" class="btn btn-secondary">Stop</button>
+  <button id="btnReset" class="btn btn-secondary">Reset</button>
+  <button id="btnSave" class="btn btn-primary">Save CSV</button>
+  <button id="btnDownload" class="btn btn-primary">Download CSV</button>
 </p>
 <p id="result"></p>
 <script>
+
+function saveCSV(filename, csvData) {
+  let a = document.createElement("a"),
+    file = new Blob([csvData], {type: "Comma-separated value file"});
+  let url = URL.createObjectURL(file);
+  a.href = url;
+  a.download = filename+".csv";
+  document.body.appendChild(a);
+  a.click();
+  setTimeout(function() {
+    document.body.removeChild(a);
+    window.URL.revokeObjectURL(url);
+  }, 0);
+}
+  
 function createCode(){
   //modes: 1 BT, 2 File
   return "var method=" + (document.getElementById("chkLocal").checked ? 2 : 1) + ";\n" + String.raw`
@@ -164,7 +188,6 @@ function createCode(){
 var connection;
 var lineCount=-1;
 
-
 function stop (){
   connection.reconnect((c)=>{
     c.write("load();\n");
@@ -173,32 +196,74 @@ function stop (){
   });
 }
 
-document.getElementById("chkLocal").addEventListener("click", function() {
+function updateButtons(){
   document.getElementById("btnSave").disabled = document.getElementById("chkLocal").checked;
+  document.getElementById("btnDownload").disabled = !document.getElementById("chkLocal").checked;
   document.getElementById("btnReset").disabled = document.getElementById("chkLocal").checked;
   document.getElementById("btnStop").disabled = document.getElementById("chkLocal").checked;
+}
+
+updateButtons();
+
+document.getElementById("chkLocal").addEventListener("click", function() {
+  reset();
+  updateButtons();
+});
+
+window.addEventListener("message", function(event) {
+  let msg = event.data;
+   if (msg.type=="readstoragefilersp") {
+    saveCSV("log.csv", msg.data);
+  }
+}, false);
+
+document.getElementById("btnDownload").addEventListener("click", function() {
+  if (connection) {
+    stop();
+  }
+  console.log("Loading data from BangleJs...");
+  try {
+    window.postMessage({type:"readstoragefile",data:"log.csv",id:0});
+  } catch(ex) {
+      console.log("(Warning) Could not load apikey from BangleJs.");
+      console.log(ex);
+  }
 });
 
 document.getElementById("btnSave").addEventListener("click", function() {
-  var h = document.createElement('a');
-  h.href = 'data:text/csv;charset=utf-8,' + encodeURI(localStorage.getItem("data"));    
-  h.target = '_blank';
-  h.download = "DATA.csv";
-  h.click();
+  saveCSV("log.csv", localStorage.getItem("data"));
 });
+
+function reset(){
+  document.getElementById("result").innerText="";
+}
+
 document.getElementById("btnReset").addEventListener("click", function() {
   if (connection) {
     stop();
   }
-  document.getElementById("result").innerText="";
   lineCount=-1;
   localStorage.removeItem("data");
+  reset();
 });
+
 document.getElementById("btnStop").addEventListener("click", function() {
   if (connection) {
     stop();
   }
 });
+
+function connect(connectionHandler){
+  Puck.connect(function(c) {
+    if (!c) {
+      console.log("Couldn't connect!\n");
+      return;
+    }
+    connection = c;
+    connectionHandler(c);
+  });
+}
+
 document.getElementById("btnConnect").addEventListener("click", function() {
   localStorage.setItem("data", "");
   lineCount=-1;
@@ -206,12 +271,7 @@ document.getElementById("btnConnect").addEventListener("click", function() {
     stop();
     document.getElementById("result").innerText="0";
   }
-  Puck.connect(function(c) {
-    if (!c) {
-      console.log("Couldn't connect!\n");
-      return;
-    }
-    connection = c;
+  connect(function(connection) {
     var buf = "";
     connection.on("data", function(d) {
       buf += d;
diff --git a/apps/hrmaccevents/metadata.json b/apps/hrmaccevents/metadata.json
index ba9140866..298b12a6b 100644
--- a/apps/hrmaccevents/metadata.json
+++ b/apps/hrmaccevents/metadata.json
@@ -9,7 +9,7 @@
   "tags": "debug",
   "supports": ["BANGLEJS","BANGLEJS2"],
   "custom": "custom.html",
-  "customConnect": false,
+  "customConnect": true,
   "readme": "README.md",
   "storage": [ ]
 }
