diff --git a/frappe/public/css/chat.css b/frappe/public/css/chat.css
index 7360656d23..ed80bf0977 100644
--- a/frappe/public/css/chat.css
+++ b/frappe/public/css/chat.css
@@ -448,3 +448,16 @@ a.no-decoration:active {
 .chat-list .chat-list-item .chat-bubble .chat-bubble-meta > .chat-bubble-check i {
   font-size: 12px;
 }
+.chat-list-notification {
+  text-align: center;
+}
+.chat-list-notification-content {
+  color: white;
+  background-color: #8D99A6;
+  display: inline-block;
+  /* padding: 5px; */
+  border-radius: 20px;
+  opacity: 0.5;
+  font-size: 10px;
+  padding: 5px;
+}
diff --git a/frappe/public/js/frappe/chat.js b/frappe/public/js/frappe/chat.js
index 7e45db5cff..db74bf2e74 100644
--- a/frappe/public/js/frappe/chat.js
+++ b/frappe/public/js/frappe/chat.js
@@ -139,16 +139,16 @@ frappe.datetime.datetime = class
  * @example
  * const datetime = new frappe.datetime.now()
  */
-frappe.datetime.now  = () => new frappe.datetime.datetime()
+frappe.datetime.now   = () => new frappe.datetime.datetime()
 
-frappe.datetime.diff = (a, b, type) =>
+frappe.datetime.equal = (a, b, type) =>
 {
     a = a.moment
     b = b.moment
 
-    diff = a.diff(b, type)
+    const equal = a.isSame(b, type)
 
-    return diff
+    return equal
 }
 
 /**
@@ -2261,32 +2261,21 @@ class extends Component
 
     render ( )
     {
-        const { props }    = this
-        const { messages } = props
+        var messages = [ ]
+        for (var i   = 0 ; i < this.props.messages.length ; ++i)
+        {
+            var   message   = this.props.messages[i]
+            const me        = message.user === frappe.session.user
+
+            if ( i === 0 || !frappe.datetime.equal(message.creation, this.props.messages[i - 1].creation, 'day') )
+                messages.push({ type: "Notification", content: message.creation.format('MMMM DD') })
+
+            messages.push(message)
+        }
         
         return !frappe._.is_empty(messages) ? (
             h("div",{class:"chat-list list-group"},
-                messages.map((m, i) =>
-                {
-                    const me        = m.user === frappe.session.user;
-                    let   groupable = false;
-
-                    if ( i !== 0 && i !== messages.length )
-                        groupable   = !me && m.room_type === "Group" && m.user === messages[i - 1].user
-
-                    if ( i === 0 || frappe.datetime.diff(m.creation, messages[i - 1].creation))
-                    {
-                        return (
-                            h(frappe.chat.component.ChatList.Item,
-                            {
-                                   type: "Notification",
-                                content: ""
-                            })
-                        )
-                    }
-                    
-                    return h(frappe.chat.component.ChatList.Item, {...m, type: type, groupable: groupable})
-                })
+                messages.map(m => h(frappe.chat.component.ChatList.Item, {...m}))
             )
         ) : null
     }
@@ -2316,8 +2305,12 @@ class extends Component
 
         return (
             h("div",{class: "chat-list-item list-group-item"},
-                me.type === "Notification" ?
-                    h("div","","")
+                props.type === "Notification" ?
+                    h("div",{class:"chat-list-notification"},
+                        h("div",{class:"chat-list-notification-content"},
+                            props.content
+                        )
+                    )
                     :    
                     h("div",{class:`${me ? "text-right" : ""}`},
                         !me && !props.groupable && !me ?
diff --git a/frappe/public/less/chat.less b/frappe/public/less/chat.less
index 0a74a35d85..140f9301e1 100644
--- a/frappe/public/less/chat.less
+++ b/frappe/public/less/chat.less
@@ -371,4 +371,22 @@
             }
         }
     }
+}
+
+.chat-list-notification
+{
+    text-align: center;
+}
+
+.chat-list-notification-content
+{
+    color: white;
+    background-color: #8D99A6;
+    display: inline-block;
+    /* padding: 5px; */
+    border-radius: 20px;
+    opacity: 0.5;
+    font-size: 10px;
+    padding: 5px;
+    // background-color: white;
 }
\ No newline at end of file