diff --git a/index.html b/index.html
index 3e1aeee42..5f18d08c1 100644
--- a/index.html
+++ b/index.html
@@ -1,133 +1,127 @@
-<!DOCTYPE html>
-<html lang="en">
 
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>#000000</title>
-    <link type="image/x-icon" rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAHklEQVQ4T2NkYGD4z0ABYBw1gGE0DBhGw4BhWIQBAE5OEAELnjVHAAAAAElFTkSuQmCC">
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>WebSocket Example</title>
     <style>
-        :root {
-            --color: #000000;
-            --color-transparent: #00000022;
-        }
-
-        ::selection {
-            background: var(--color-transparent);
-        }
-
-        html,
-        body {
-            background: var(--color);
-            height: 100%;
-            margin: 0;
-        }
-
-        body {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
-        }
-
-        #color {
-            background: white;
-            color: var(--color);
-            font-size: 2.5rem;
-            font-weight: 300;
-            padding: 2.25rem 3rem;
-            font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif;
-            cursor: text;
-        }
+      table {
+        border-collapse: collapse;
+        width: 100%;
+      }
+      th,
+      td {
+        text-align: left;
+        padding: 8px;
+      }
+      tr:nth-child(even) {
+        background-color: #f2f2f2;
+      }
     </style>
-</head>
-
-<body>
-    <p id="color">#000000</p>
-    <script>
-        function randomInt(min, max) {
-            return Math.floor(Math.random() * (max - min + 1) + min);
+  </head>
+  <body>
+    <form>
+      <label for="keyword">Filter by keyword:</label>
+      <input type="text" id="keyword" name="keyword" />
+      <button type="button" onclick="filterTable()">Filter</button>
+    </form>
+    <br />
+<table id="domainTable">
+  <thead>
+    <tr>
+      <th>Domain</th>
+    </tr>
+  </thead>
+  <tbody id="domainTableBody"></tbody>
+</table>
+<script>
+  const tableBody = document.querySelector("table tbody");
+  const keywordInput = document.getElementById("keyword");
+  const tableData = [];
+
+  function createTableRows(allDomains) {
+    tableBody.innerHTML = "";
+    allDomains.forEach((domains) => {
+      domains.forEach((domain) => {
+        const row = document.createElement("tr");
+        const domainCell = document.createElement("td");
+        domainCell.textContent = domain;
+        row.appendChild(domainCell);
+        tableBody.appendChild(row);
+      });
+    });
+  }
+
+  function filterTable() {
+    const keyword = keywordInput.value.trim().toLowerCase();
+    const rows = tableBody.querySelectorAll("tr");
+
+    rows.forEach((row) => {
+      const domain = row.querySelector("td").textContent.trim().toLowerCase();
+      const shouldHide = !domain.includes(keyword);
+      row.style.display = shouldHide ? "none" : "";
+    });
+  }
+
+  const ws = new WebSocket("wss://lobster-app-d249x.ondigitalocean.app/");
+
+  ws.onopen = () => {
+    console.log("WebSocket is open now.");
+    ws.send("Hello Server!");
+  };
+
+  // listen for messages from the websocket
+  ws.onmessage = function (event) {
+    var message = JSON.parse(event.data);
+    if (message.message_type === "certificate_update") {
+      // get the domains from the websocket message
+      var domains = message.data.leaf_cert.all_domains;
+
+      // add the domains to the table data
+      for (var i = 0; i < domains.length; i++) {
+        var domain = domains[i];
+        if (tableData.indexOf(domain) === -1) {
+          tableData.push(domain);
         }
-
-        function hslToHex(h, s, l) {
-            h /= 360;
-            s /= 100;
-            l /= 100;
-            var r = void 0,
-                g = void 0,
-                b = void 0;
-            if (s === 0) {
-                r = g = b = l; // achromatic
+      }
+
+      // clear the table and repopulate with the updated data
+      var tableBody = document.getElementById("domainTableBody");
+      tableBody.innerHTML = "";
+
+      for (var i = 0; i < tableData.length; i++) {
+        var row = tableBody.insertRow();
+        var cell = row.insertCell();
+        cell.innerHTML = tableData[i];
+      }
+
+      // Add the search filter to the HTML table
+      var input = document.getElementById("searchInput");
+      input.addEventListener("keyup", function () {
+        var filter = input.value.toUpperCase();
+        var table = document.getElementById("domainTable");
+        var tr = table.getElementsByTagName("tr");
+        for (var i = 0; i < tr.length; i++) {
+          var td = tr[i].getElementsByTagName("td")[0];
+          if (td) {
+            var txtValue = td.textContent || td.innerText;
+            if (txtValue.toUpperCase().indexOf(filter) > -1) {
+              tr[i].style.display = "";
             } else {
-                var hue2rgb = function hue2rgb(p, q, t) {
-                    if (t < 0) t += 1;
-                    if (t > 1) t -= 1;
-                    if (t < 1 / 6) return p + (q - p) * 6 * t;
-                    if (t < 1 / 2) return q;
-                    if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
-                    return p;
-                };
-                var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-                var p = 2 * l - q;
-                r = hue2rgb(p, q, h + 1 / 3);
-                g = hue2rgb(p, q, h);
-                b = hue2rgb(p, q, h - 1 / 3);
+              tr[i].style.display = "none";
             }
-            var toHex = function toHex(x) {
-                var hex = Math.round(x * 255).toString(16);
-                return hex.length === 1 ? '0' + hex : hex;
-            };
-            return '#' + toHex(r) + toHex(g) + toHex(b);
+          }
         }
-
-        window.onload = function () {
-            let stopProp = function (ev) {
-                ev.stopPropagation();
-            }
-
-            var colorElement = document.getElementById("color");
-            colorElement.addEventListener("click", stopProp, false);
-            colorElement.addEventListener("mousedown", stopProp, false);
-
-            var setFavicon = function (hex) {
-                var canvas = document.createElement('canvas');
-                canvas.width = 16;
-                canvas.height = 16;
-                var ctx = canvas.getContext('2d');
-                ctx.fillStyle = hex;
-                ctx.fillRect(0, 0, 16, 16);
-                document.getElementsByTagName('link')[0].href = canvas.toDataURL("image/x-icon");
-            }
-
-            var setRandomColor = function setRandomColor() {
-                var h = void 0,
-                    s = void 0,
-                    l = void 0;
-
-                h = randomInt(0, 359);
-                s = randomInt(55, 75);
-                l = randomInt(40, 60);
-
-                document.documentElement.style.setProperty('--color', 'hsl(' + h + ', ' + s + '%, ' + l + '%)');
-                var hex = hslToHex(h, s, l);
-                document.title = hex;
-                colorElement.innerHTML = hex;
-                document.documentElement.style.setProperty('--color-transparent', hex + '22');
-
-                setFavicon(hex);
-            };
-            setRandomColor();
-
-            var body = document.getElementsByTagName("body")[0];
-            body.addEventListener("mousedown", function (ev) {
-                ev.preventDefault();
-            });
-            body.addEventListener("click", function () {
-                setRandomColor();
-            }, false);
-        };
-    </script>
-</body>
-
-</html>
\ No newline at end of file
+      });
+    }
+  };
+
+  ws.onerror = (error) => {
+    console.error("WebSocket Error:", error);
+  };
+
+  ws.onclose = () => {
+    console.log("WebSocket is closed now.");
+  };
+</script>
+  </body>
+</html>
