diff --git a/apps/sleeplog/interface.html b/apps/sleeplog/interface.html
index 8496ada0a..d59515275 100644
--- a/apps/sleeplog/interface.html
+++ b/apps/sleeplog/interface.html
@@ -4,46 +4,74 @@
     <link rel="stylesheet" href="../../css/spectre-icons.min.css">
   </head>
   <body>
-    
     <div id="table"></div>
-
+    <div id="view"></div>
     <script src="../../core/lib/interface.js"></script>
     <script>
 var domTable = document.getElementById("table");
+var domView = document.getElementById("view");
 
-function viewLog(logData, title) {
+function viewLog(logData, filename) {
+  domView.innerHTML = "";
   var html = `
+    <div class="container">
+      <h4><b>Viewing data of:</b> ` + filename + `</h4>
+    </div>
+    <table class="table table-striped table-hover">
       <thead>
         <tr>
           <th>Date</th>
+          <th>Time</th>
+          <th>Duration</th>
           <th>Status</th>
+          <th>Sleep</th>
         </tr>
       </thead>
       <tbody>`;
-  logData.forEach(entry => html += `
-        <tr>
-          <td>` +
-            new Date(entry[0] * 6E5).toLocaleString(undefined) + `
+  logData.forEach((entry, index, log) => {
+    var duration = ((log[index + 1] || [Math.floor(Date.now() / 6E5)])[0] - entry[0]) * 10;
+    html += `
+        <tr style="text-align: center">
+          <td style="text-align: right">` +
+            new Date(entry[0] * 6E5).toLocaleDateString(undefined) + `
           </td>
           <td>` +
-            "unknown    ,non consec.,consecutive".split(",")[entry[2]] + " " +
-            "unknown,not worn,awake,light sleep,deep sleep".split(",")[entry[1]] + `
+            new Date(entry[0] * 6E5).toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'}) + `
           </td>
-        </tr>`);
-  html = `
-      </tbody>`;
-  document.getElementById("view").innerHTML = html;
+          <td style="text-align: right"><div class="container"` + 
+            (duration >= 60 ? ` style="background-color: hsl(192, 50%, ` +
+              (duration > 480 ? 50 : 100 - Math.floor(duration / 60) * 50 / 8) +
+              `%)">` : `>`) +
+            duration + ` min
+          </td>
+          <td><div class="container" style="background-color: ` +
+            ["orange", "lightcoral", "lightgreen", "lightcyan", "lightskyblue"][entry[1]] + `">` +
+            ["unknown", "not worn", "awake", "light sleep", "deep sleep"][entry[1]] + `
+          </div></td>
+          <td><div class="container" style="background-color: ` +
+            ["orange", "lightgreen", "lightskyblue"][entry[2]] + `">` +
+            ["unknown", "non consecutive", "consecutive"][entry[2]] + `
+          </div></td>
+        </tr>`
+    });
+  html += `
+      </tbody>
+    </table>`;
+  domView.innerHTML = html;
 }
 
-function saveCSV(logData, title) {
-  var timeFormat = document.getElementById("timeFormat").selectedIndex;
+function saveCSV(logData, date0, date1) {
+  var csvTime = document.getElementById("csvTime").selectedIndex;
+  var filename = "sleeplog_" +
+    new Date(date0).toISOString().substr(0, 10) + "_" +
+    new Date(date1).toISOString().substr(5, 5);
   logData = logData.map(entry => {
     entry[0] *= 6E5;
-    if (timeFormat === 1) entry[0] /= 1E3;
-    if (timeFormat === 2) entry[0] = entry[0] / 864E5 + 25569;
+    if (csvTime === 1) entry[0] /= 1E3;
+    if (csvTime === 2) entry[0] = entry[0] / 864E5 + 25569;
     return entry.join(",");
   }).join("\n");
-  Util.saveCSV(title, "time,sleep,consecutive\n" + logData);
+  Util.saveCSV(filename, "time,sleep,consecutive\n" + logData);
 }
 
 function readLog(date, callback) {
@@ -54,24 +82,34 @@ function readLog(date, callback) {
   });
 }
 
-function getFnList() {
+function deleteFile(filename, callback) {
+  if (window.confirm("Do you really want to remove " + filename)) {
+    Util.showModal("Deleting...");
+    if (filename.endsWith(" (StorageFile)")) {
+      Util.eraseStorageFile(filename, () => {
+        Util.hideModal();
+        callback();
+      });
+    } else {
+      Util.eraseStorage(filename, () => {
+        Util.hideModal();
+        callback();
+      });
+    }
+  }
+}
+
+function viewFiles() {
   Util.showModal("Loading...");
   domTable.innerHTML = "";
   Puck.eval(`require("Storage").list(/^sleeplog_\\d\\d\\d\\d\\.log$/)`, files => {
-    // add this fortnight
+    // add active log
     files.push("" + Math.floor(Date.now() / 12096E5 - 0.25));
-    files = files.map(file => {
-      var ret = {
-        bName: file,
-        date: (parseInt(file.match(/\d{4}/)[0]) + 0.25) * 12096E5,
-      };
-      var thisDates = [new Date(ret.date), new Date(ret.date + 12096E5)];
-      ret.dName = thisDates[0].toISOString().substr(0, 10) + "_" + thisDates[1].toISOString().substr(5, 5);
-      ret.dateA = thisDates[0].toLocaleDateString(undefined);
-      ret.dateB = thisDates[1].toLocaleDateString(undefined);
-      return ret;
-    });
-    files = files.sort((a, b) => a.fortnigt - b.fortnigt);
+    files = files.map(file => { return {
+      filename: file.length === 4 ? "sleeplog.log (StorageFile)" : file,
+      date: (parseInt(file.match(/\d{4}/)[0]) + 0.25) * 12096E5
+    }});
+    files = files.sort((a, b) => a.date - b.date);
     var html = `
     <table class="table table-striped table-hover">
       <thead>
@@ -83,17 +121,21 @@ function getFnList() {
         </tr>
       </thead>
       <tbody>`;
-    files.forEach(file => {
-      html += `
+    files.forEach(file => { html += `
         <tr>
-          <td>${file.bName.endsWith(".log") ? file.bName : "active log"}</td>
-          <td>${file.dateA}</td>
-          <td>${file.dateB}</td>
+          <td>${file.filename}</td>
+          <td>${new Date(file.date).toLocaleDateString(undefined)}</td>
+          <td>${new Date(file.date + 12096E5).toLocaleDateString(undefined)}</td>
           <td>
-            <button class="btn" task="view" date="${file.date}" dName="${file.dName}"><i class="icon icon-menu"></i></button>
-            <button class="btn btn-primary" task="csv" date="${file.date}" dName="${file.dName}">CSV</button>`;
-      if (file.bName.endsWith(".log")) html += `
-            <button class="btn" task="del" bName="${file.bName}"><i class="icon icon-delete"></i></button>`;
+            <button class="btn btn-sm tooltip" data-tooltip="view data" task="view" filename="${file.filename}" date="${file.date}">
+              <i class="icon icon-caret"></i>
+            </button>
+            <button class="btn btn-sm tooltip btn-primary" data-tooltip="save csv-file" task="csv" filename="${file.filename}" date="${file.date}">
+              <i class="icon icon-download"></i>
+            </button>
+            <button class="btn btn-sm tooltip btn-error" data-tooltip="delete file" task="del" filename="${file.filename}" date="${file.date}">
+              <i class="icon icon-delete"></i>
+            </button>`;
       html += `
           </td>
         </tr>`;
@@ -101,15 +143,22 @@ function getFnList() {
     html += `
       </tbody>
     </table>
-    <p>csv time format:
-      <select id="timeFormat">
-        <option>JavaScript (msec since 1970)</option>
-        <option>UNIX (sec since 1970)</option>
-        <option>Office (days since 1900)</option>
-      </select>
-    </p>
-    <table id="view">
-    </table>`;
+    <div class="container">
+      <form class="form-horizontal">
+        <div class="form-group">
+          <div class="col-3 col-sm-12">
+            <label class="form-label"><b>csv time format</b></label>
+          </div>
+          <div class="col-9 col-sm-12">
+            <select class="form-select" id="csvTime">
+              <option>JavaScript (milliseconds since 1970)</option>
+              <option>UNIX (seconds since 1970)</option>
+              <option>Office (days since 1900)</option>
+            </select>
+          </div>
+        </div>
+      </form>
+    </div>`;
     domTable.innerHTML = html;
     Util.hideModal();
     var buttons = domTable.querySelectorAll("button");
@@ -117,34 +166,20 @@ function getFnList() {
       buttons[i].addEventListener("click", event => {
         var button = event.currentTarget;
         var task = button.getAttribute("task");
-        if (!task) return;
-        if (task=="view") {
-          var date = button.getAttribute("date");
-          var dName = button.getAttribute("dName");
-          if (!date || !dName) return;
-          readLog(date, logData => viewLog(logData, dName));
-        } else if (task=="csv") {
-          var date = button.getAttribute("date");
-          var dName = button.getAttribute("dName");
-          if (!date || !dName) return;
-          readLog(date, logData => saveCSV(logData, dName));
-        } else if (task=="delete") {
-          var bName = button.getAttribute("bName");
-          if (!bName) return;
-          Util.showModal("Deleting...");
-          Util.eraseStorage(bName, () => {
-            Util.hideModal();
-            getTrackList();
-          });
-        }
+        var filename = button.getAttribute("filename");
+        var date = button.getAttribute("date") - 0;
+        if (!task || !filename || !date) return;
+        if (task === "view") readLog(date, logData => viewLog(logData, filename));
+        else if (task === "csv") readLog(date, logData => saveCSV(logData, date, date + 12096E5));
+        else if (task === "del") deleteFile(filename, () => viewFiles());
       });
     }
   });
 }
 
 function onInit() {
-  getFnList();
+  viewFiles();
 }
     </script>
   </body>
-</html>
+</html>
\ No newline at end of file
