diff --git a/src/snek/static/base.css b/src/snek/static/base.css
index a5c68b7..e1f43e0 100644
--- a/src/snek/static/base.css
+++ b/src/snek/static/base.css
@@ -306,7 +306,7 @@ input[type="text"], .chat-input textarea {
   }
 }
 
-.message:has(+ .message.switch-user), .message:last-child {
+.message:has(+ .message.switch-user), .message:has(+ .message.long-time), .message:last-child {
   .time {
     display: block;
     opacity: 1;
diff --git a/src/snek/templates/web.html b/src/snek/templates/web.html
index 94d0ac5..0ae5b98 100644
--- a/src/snek/templates/web.html
+++ b/src/snek/templates/web.html
@@ -174,12 +174,27 @@
         const messagesContainer = document.querySelector(".chat-messages");
         updateTimes();
         let previousUser = null;
+        let previousDate = null;
         document.querySelectorAll(".message").forEach((message) => {
             if (previousUser !== message.dataset.user_uid) {
                 message.classList.add("switch-user");
                 previousUser = message.dataset.user_uid;
+                previousDate = new Date(message.dataset.created_at);
             } else {
                 message.classList.remove("switch-user");
+
+                if (!previousDate) {
+                    previousDate = new Date(message.dataset.created_at);
+                } else {
+                    const currentDate = new Date(message.dataset.created_at);
+
+                    if (currentDate.getTime() - previousDate.getTime() > 1000 * 60 * 20) {
+                        message.classList.add("long-time");
+                    } else {
+                        message.classList.remove("long-time");
+                    }
+                    previousDate = currentDate;
+                }
             }
         });
         lastMessage = messagesContainer.querySelector(".message:last-child");