diff --git a/src/snek/static/message-list.js b/src/snek/static/message-list.js
index 9f11453..519ee9e 100644
--- a/src/snek/static/message-list.js
+++ b/src/snek/static/message-list.js
@@ -9,6 +9,13 @@ import {app} from "./app.js";
 
 const LONG_TIME = 1000 * 60 * 20
 
+export class ReplyEvent extends Event {
+    constructor(messageTextTarget) {
+        super('reply', { bubbles: true, composed: true });
+        this.messageTextTarget = messageTextTarget;
+    }
+}
+
 class MessageElement extends HTMLElement {
   // static observedAttributes = ['data-uid', 'data-color', 'data-channel_uid', 'data-user_nick', 'data-created_at', 'data-user_uid'];
 
@@ -51,6 +58,12 @@ class MessageElement extends HTMLElement {
       }
 
       this.timeDiv = this.querySelector('.time span');
+      this.replyDiv = this.querySelector('.time a');
+
+        this.replyDiv.addEventListener('click', (e) => {
+          e.preventDefault();
+          this.dispatchEvent(new ReplyEvent(this.messageDiv));
+        })
     }
 
     if (!this.siblingGenerated && this.nextElementSibling) {
diff --git a/src/snek/templates/web.html b/src/snek/templates/web.html
index b19c820..f2ff699 100644
--- a/src/snek/templates/web.html
+++ b/src/snek/templates/web.html
@@ -143,15 +143,9 @@ function replyMessage(message) {
     chatInputField.focus();
 }
 
-messagesContainer.addEventListener("click", (e) => {
-    if (e.target.tagName === "A" && e.target.getAttribute("href") === "#reply") {
-        e.preventDefault();
-        const messageElement = e.target.closest("chat-message");
-        if (messageElement) {
-            const messageText = messageElement.querySelector(".text").textContent.trim();
-            replyMessage(messageText);
-        }
-    }
+messagesContainer.addEventListener("reply", (e) => {
+    const messageText = e.messageTextTarget.textContent.trim();
+    replyMessage(messageText);
 })
 
 // --- Mention helpers ---