diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..2704c1e
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,60 @@
+<html>
+   <header>
+      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/dark.css">
+      <script>
+         function init() {
+            http("get", "/ledger.json", (body, status) => {
+               body = JSON.parse(body)
+               loadTransactions(body.Transactions)
+            }, null)
+         }
+         function loadTransactions(transactions) {
+            if (transactions.length < 1) {
+               return
+            }
+            var innerHTML = ""
+            var keys = []
+
+            innerHTML += "<tr>"
+            innerHTML += "<th>" + "idx" + "</th>"
+            for(const key in transactions[0]) {
+               innerHTML += "<th>" + key + "</th>"
+               keys.push(key)
+            }
+            innerHTML += "</tr>"
+
+            for(var i in transactions) {
+               const transaction = transactions[i]
+               innerHTML += "<tr>"
+               innerHTML += "<th>" + i + "</th>"
+               for(var key of keys) {
+                  innerHTML += "<td>" + transaction[key] + "</td>"
+               }
+               innerHTML += "</tr>"
+            }
+
+            document.getElementById("transactions").innerHTML = innerHTML
+         }
+         function http(method, remote, callback, body) {
+            var xmlhttp = new XMLHttpRequest();
+            xmlhttp.onreadystatechange = function() {
+               if (xmlhttp.readyState == XMLHttpRequest.DONE) {
+                  callback(xmlhttp.responseText, xmlhttp.status)
+               }
+            };
+            xmlhttp.open(method, remote, true);
+            if (typeof body == "undefined") {
+               body = null
+            }
+            xmlhttp.send(body);
+         }
+      </script>
+   </header>
+   <body onload="init()">
+      <h1>hi</h1>
+      <table id="transactions">
+      </table>
+   </body>
+   <footer>
+   </footer>
+</html>
diff --git a/public/ledger.json b/public/ledger.json
new file mode 120000
index 0000000..e9f90e0
--- /dev/null
+++ b/public/ledger.json
@@ -0,0 +1 @@
+../testdata/ledger.json
\ No newline at end of file
diff --git a/testdata/ledger.json b/testdata/ledger.json
new file mode 100644
index 0000000..d1db8a5
--- /dev/null
+++ b/testdata/ledger.json
@@ -0,0 +1,18 @@
+{
+   "Transactions": [
+      {
+         "Date": "2021-07-29",
+         "Description": "Qt needs pizza n kodiak",
+         "Payer": "Debts:Credit:ChaseAarpChaseVisa",
+         "Payee": "Withdrawal:Home:Grocery+Resturaunt:Target",
+         "Amount": 37.86
+      },
+      {
+         "Date": "2021-07-30",
+         "Description": "Testing detecting deposits via email alerts 5421705162",
+         "Payer": "AssetAccount:Cash:Uccu",
+         "Payee": "Debts:Credit:ChaseAarpChaseVisa",
+         "Amount": 100.00
+      }
+   ]
+}
