diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller.js b/qortal-ui-plugins/plugins/core/components/ChatScroller.js
index 62c8d290..9a707a5e 100644
--- a/qortal-ui-plugins/plugins/core/components/ChatScroller.js
+++ b/qortal-ui-plugins/plugins/core/components/ChatScroller.js
@@ -49,7 +49,7 @@ class ChatScroller extends LitElement {
     render() {
         console.log({messages: this.messages})
 
-        let testMessages = this.messages.reduce((messageArray, message)=> {
+        let formattedMessages = this.messages.reduce((messageArray, message)=> {
             const lastGroupedMessage = messageArray[messageArray.length - 1]
             let timestamp
             let sender
@@ -72,11 +72,55 @@ class ChatScroller extends LitElement {
             return messageArray
         }, [])
 
-        console.log({testMessages})
+        console.log({formattedMessages})
         return html`
             <ul id="viewElement" class="chat-list clearfix">
                 <div id="upObserver"></div>
-                ${repeat(
+                ${formattedMessages.map((formattedMessage)=> {
+
+return  repeat(
+                            formattedMessage.messages,
+                    (message) => message.reference,
+                    (message, indexMessage) => html`
+                    <message-template 
+                    .emojiPicker=${this.emojiPicker} 
+                    .escapeHTML=${this.escapeHTML} 
+                    .messageObj=${message} 
+                    .hideMessages=${this.hideMessages}
+                    .setRepliedToMessageObj=${this.setRepliedToMessageObj}
+                    .setEditedMessageObj=${this.setEditedMessageObj}
+                    .focusChatEditor=${this.focusChatEditor}
+                    .sendMessage=${this.sendMessage}
+                    ?isfirstmessage=${indexMessage === 0}
+                    ?isSingleMessageInGroup=${formattedMessage.messages.length > 1}
+                    >
+                    </message-template>`
+                )
+                })}
+                <!-- ${repeat(
+                    testMessages,
+                    (testMessage)=> testMessage.signature,
+                    (testMessage)=> {
+                      return  repeat(
+                            testMessage.messages,
+                    (message) => message.reference,
+                    (message, indexMessage) => html`
+                    <message-template 
+                    .emojiPicker=${this.emojiPicker} 
+                    .escapeHTML=${this.escapeHTML} 
+                    .messageObj=${message} 
+                    .hideMessages=${this.hideMessages}
+                    .setRepliedToMessageObj=${this.setRepliedToMessageObj}
+                    .setEditedMessageObj=${this.setEditedMessageObj}
+                    .focusChatEditor=${this.focusChatEditor}
+                    .sendMessage=${this.sendMessage}
+                    ?isfirstmessage=${indexMessage === 0}
+                    >
+                    </message-template>`
+                )
+                    }
+                )} -->
+                <!-- ${repeat(
                     this.messages,
                     (message) => message.reference,
                     (message) => html`
@@ -91,7 +135,7 @@ class ChatScroller extends LitElement {
                     .sendMessage=${this.sendMessage}
                     >
                     </message-template>`
-                )}
+                )} -->
                 <div id='downObserver'></div>
                 <div class='last-message-ref'>
                     <vaadin-icon icon='vaadin:arrow-circle-down' slot='icon' @click=${() => {
@@ -191,7 +235,9 @@ class MessageTemplate extends LitElement {
             focusChatEditor: { type: Function },
             sendMessage: { type: Function },
             openDialogImage: {type: Function},
-            isImageLoaded: {type: Boolean}
+            isImageLoaded: {type: Boolean},
+            isFirstMessage: {type: Boolean},
+            isSingleMessageInGroup: {type: Boolean}
         }
     }
 
@@ -205,6 +251,8 @@ class MessageTemplate extends LitElement {
         this.imageFetches = 0
         this.openDialogImage = false
         this.isImageLoaded = false
+        this.isFirstMessage = false
+        this.isSingleMessageInGroup = false
     }
 
     static styles = [chatStyles]
@@ -238,7 +286,7 @@ class MessageTemplate extends LitElement {
 
     
     render() {
-      
+        console.log('isFirst', this.isFirstMessage)
         const hidemsg = this.hideMessages
         let message = ""
         let reactions = []
@@ -339,6 +387,8 @@ class MessageTemplate extends LitElement {
               
             }
         }
+
+        
         return hideit ? html`<li class="clearfix"></li>` : html`
             <li class="clearfix message-parent">
                 <div class="message-data ${this.messageObj.sender === this.myAddress ? "" : ""}">