diff --git a/index.html b/index.html
index 60d254a..9145215 100644
--- a/index.html
+++ b/index.html
@@ -1,4 +1,3 @@
-<!-- index.html — Chatter Custom Channel -->
 <!DOCTYPE html>
 <html>
 <head>
@@ -7,28 +6,24 @@
     body { font-family: sans-serif; padding: 20px; background: #0d0d12; color: #f0f0f5; margin: 0; }
     h2   { color: #d64d7f; }
     #feed { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
-    .msg  { background: #1a1a25; padding: 8px 12px; border-radius: 6px; font-size: 14px; }
+    .msg  { background: #1a1a25; padding: 8px 12px; border-radius: 6px; font-size: 14px; border-left: 3px solid #d64d7f; }
     .msg strong { color: #d64d7f; margin-right: 6px; }
   </style>
 </head>
-<body>
+<body data-chatter-auto-append="false">
   <h2>🔴 Live Feed</h2>
-  <p>User: <span id="who"></span></p>
-  <div id="feed"></div>
+  <div id="feed" ></div>
   <script>
-    // Wait for Chatter to inject globals (slight delay after iframe loads)
-    setTimeout(function() {
-      var feed = document.getElementById('feed');
-      document.getElementById('who').textContent = chickenUser || '(unknown)';
+    var feed = document.getElementById("feed");
 
-      // Listen to live public messages via the shared socket
-      chickenAPI.on('message', function(data) {
-        var el = document.createElement('div');
-        el.className = 'msg';
-        el.innerHTML = '<strong>' + data.username + '</strong>' + data.text;
-        feed.prepend(el);
-        if (feed.children.length > 50) feed.lastChild.remove();
-      });
-    }, 600);
+    // Listen for real-time messages via the chatter:message event
+    window.addEventListener("chatter:message", function(event) {
+      var data = event.detail;
+      var el = document.createElement("div");
+      el.className = "msg";
+      el.innerHTML = "" + data.username + "" + data.text;
+      feed.prepend(el);
+      if (feed.children.length > 50) feed.lastChild.remove();
+    });
   </script>
 </body></html>
\ No newline at end of file
