diff --git a/providers/dxcluster.py b/providers/dxcluster.py
index 37c56a9..d5dbd29 100644
--- a/providers/dxcluster.py
+++ b/providers/dxcluster.py
@@ -67,7 +67,7 @@ class DXCluster(Provider):
                     if match:
                         spot_time = datetime.strptime(match.group(5), "%H%MZ")
                         spot_datetime = datetime.combine(datetime.today(), spot_time.time()).replace(tzinfo=pytz.UTC)
-                        spot = Spot(source=self.name(),
+                        spot = Spot(source="DX Cluster",
                                     dx_call=match.group(3),
                                     de_call=match.group(1),
                                     freq=float(match.group(2)),
diff --git a/webassets/css/style.css b/webassets/css/style.css
new file mode 100644
index 0000000..0e6b2ce
--- /dev/null
+++ b/webassets/css/style.css
@@ -0,0 +1,18 @@
+div#table-container {
+    width: 80%;
+    margin: 0 auto;
+    overflow: scroll;
+}
+
+div#table-container table, div#table-container th, div#table-container td {
+    border: 1px solid;
+    border-collapse: collapse
+}
+
+div#table-container th, div#table-container td {
+  padding: 10px;
+}
+
+div#table-container th {
+  background-color: dodgerblue;
+}
\ No newline at end of file
diff --git a/webassets/index.html b/webassets/index.html
index 1b39c0f..2024fe1 100644
--- a/webassets/index.html
+++ b/webassets/index.html
@@ -1,16 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <title>Spot tool</title>
+    <title>Unnamed spot tool</title>
 
     <link rel="stylesheet" href="css/style.css" type="text/css">
 
     <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/jquery-ui@1.13.2/dist/jquery-ui.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>
 </head>
 <body>
+    <h1>Unnamed spot tool</h1>
+    <div id="filters">Some filters here</div>
     <div id="table-container"></div>
+
     <script src="js/code.js"></script>
 </body>
 </html>
diff --git a/webassets/js/code.js b/webassets/js/code.js
index 3682b52..dbbfe8c 100644
--- a/webassets/js/code.js
+++ b/webassets/js/code.js
@@ -1,13 +1,45 @@
+// TODO get all data into JS
+// TODO populate table more nicely
+// TODO track last received time and use API since call, merge and sort local data, refresh display
+// TODO filtering (applied locally)
+// TODO look and feel
+
 $.getJSON('/api/spots', function(jsonData) {
     let headers = Object.keys(jsonData[0]);
     let table = $('<table>').append('<thead><tr></tr></thead><tbody></tbody>');
-    headers.forEach(header => table.find('thead tr').append(`<th>${header}</th>`));
+    ["Time", "DX", "Frequency", "Mode", "Comment", "Source", "DE"].forEach(header => table.find('thead tr').append(`<th>${header}</th>`));
 
     jsonData.forEach(row => {
       let $tr = $('<tr>');
-      headers.forEach(header => $tr.append(`<td>${row[header]}</td>`));
+      $tr.append(`<td>${row["time"]}</td>`);
+      $tr.append(`<td>${row["dx_call"]}</td>`);
+      $tr.append(`<td>${row["freq"]}</td>`);
+      $tr.append(`<td>${row["mode"]}</td>`);
+      $tr.append('<td>').append(escapeHtml(`${row["comment"]}`)).append('</td>');
+      $tr.append(`<td>${row["source"]}</td>`);
+      $tr.append(`<td>${row["de_call"]}</td>`);
       table.find('tbody').append($tr);
     });
 
     $('#table-container').html(table);
-});
\ No newline at end of file
+});
+
+function escapeHtml(str) {
+  if (typeof str !== 'string') {
+    return '';
+  }
+
+  const escapeCharacter = (match) => {
+    switch (match) {
+      case '&': return '&amp;';
+      case '<': return '&lt;';
+      case '>': return '&gt;';
+      case '"': return '&quot;';
+      case '\'': return '&#039;';
+      case '`': return '&#096;';
+      default: return match;
+    }
+  };
+
+  return str.replace(/[&<>"'`]/g, escapeCharacter);
+}
\ No newline at end of file
