diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js
index d572a6cb..52a09501 100644
--- a/qortal-ui-plugins/plugins/core/components/ChatPage.js
+++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js
@@ -46,7 +46,7 @@ class ChatPage extends LitElement {
             hideNewMesssageBar: { attribute: false },
             chatEditorPlaceholder: { type: String },
             messagesRendered: { type: Array },
-            repliedToSignature: { type: String },
+            repliedToMessageObj: { type: Object },
         }
     }
 
@@ -64,12 +64,11 @@ class ChatPage extends LitElement {
 
         .chat-text-area .typing-area {
             display: flex;
-            flex-direction: row;
+            flex-direction: column;
             position: absolute;
             bottom: 0;
             width: 98%;
             box-sizing: border-box;
-            padding: 5px;
             margin-bottom: 8px;
             border: 1px solid var(--black);
             border-radius: 10px;
@@ -91,10 +90,67 @@ class ChatPage extends LitElement {
             border: none;
         }
 
+        .repliedTo-container {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px 20px 8px 10px;
+        }
+        
+        .repliedTo-subcontainer {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            gap: 15px;
+        }
+
+        .repliedTo-message {
+            display: flex;
+            flex-direction: column;
+            gap: 5px;
+        }
+
+
+        .senderName {
+            margin: 0;
+            color: var(--mdc-theme-primary);
+            font-weight: bold;
+        }
+
+        .original-message {
+            margin: 0;
+        }
+
+        .reply-icon {
+            width: 20px;
+            color: var(--mdc-theme-primary);
+        }
+
+        .close-icon {
+            color: #676b71;
+            width: 25px;
+            transition: all 0.1s ease-in-out;
+        }
+
+        .close-icon:hover {
+            cursor: pointer;
+            color: #494c50;
+        }
+        
+        .chat-text-area .typing-area .chatbar {
+            width: auto;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: auto;
+            padding: 5px;
+        }
+
         .chat-text-area .typing-area .emoji-button {
             width: 45px;
             height: 40px;
-            padding: 5px;
+            padding-top: 4px;
             border: none;
             outline: none;
             background: transparent;
@@ -136,20 +192,38 @@ class ChatPage extends LitElement {
         this.isPasteMenuOpen = false
         this.chatEditorPlaceholder = this.renderPlaceholder()
         this.messagesRendered = []
-        this.repliedToSignature = ''
+        this.repliedToMessageObj = null
     }
-
+    
     render() {
-
         return html`
             ${this.isLoadingMessages ? html`<h1>${translate("chatpage.cchange22")}</h1>` : this.renderChatScroller(this._initialMessages)}
             <div class="chat-text-area">
-                <div class="typing-area">
-                    <textarea style="color: var(--black);" tabindex='1' ?autofocus=${true} ?disabled=${this.isLoading || this.isLoadingMessages} id="messageBox" rows="1"></textarea>
-                    <iframe class="chat-editor" id="_chatEditorDOM" tabindex="-1"></iframe>
-                    <button class="emoji-button" ?disabled=${this.isLoading || this.isLoadingMessages}>
-                        ${this.isLoading === false ? html`<img class="emoji" draggable="false" alt="😀" src="/emoji/svg/1f600.svg">` : html`<paper-spinner-lite active></paper-spinner-lite>`}
-                    </button>
+                    <div class="typing-area">
+                        ${this.repliedToMessageObj && html`
+                            <div class="repliedTo-container">
+                                <div class="repliedTo-subcontainer">
+                                    <vaadin-icon class="reply-icon" icon="vaadin:reply" slot="icon"></vaadin-icon>
+                                    <div class="repliedTo-message">
+                                        <p class="senderName">${this.repliedToMessageObj.senderName ? this.repliedToMessageObj.senderName : this.repliedToMessageObj.sender}</p>
+                                        <p class="original-message">${this.repliedToMessageObj.decodedMessage}</p>
+                                    </div>
+                                </div>
+                                <vaadin-icon
+                                 class="close-icon"
+                                 icon="vaadin:close-big"
+                                 slot="icon"
+                                 @click=${() => this.closeRepliedToContainer()}
+                                 ></vaadin-icon>
+                            </div>
+                        `}
+                    <div class="chatbar">
+                        <textarea style="color: var(--black);" tabindex='1' ?autofocus=${true} ?disabled=${this.isLoading || this.isLoadingMessages} id="messageBox" rows="1"></textarea>
+                        <iframe class="chat-editor" id="_chatEditorDOM" tabindex="-1"></iframe>
+                        <button class="emoji-button" ?disabled=${this.isLoading || this.isLoadingMessages}>
+                            ${this.isLoading === false ? html`<img class="emoji" draggable="false" alt="😀" src="/emoji/svg/1f600.svg">` : html`<paper-spinner-lite active></paper-spinner-lite>`}
+                        </button>
+                    </div>
                 </div>
             </div>
         `
@@ -291,8 +365,8 @@ class ChatPage extends LitElement {
         .emojiPicker=${this.emojiPicker} 
         .escapeHTML=${escape} 
         .getOldMessage=${this.getOldMessage}
-        .setRepliedToSignature=${this.setRepliedToSignature}
-        .repliedToSignature=${this.repliedToSignature}
+        .setRepliedToMessageObj=${(val) => this.setRepliedToMessageObj(val)}
+        .focusChatEditor=${() => this.focusChatEditor()}
         >
         </chat-scroller>`
     }
@@ -397,10 +471,22 @@ class ChatPage extends LitElement {
 
         }
     }
+        
+    async setRepliedToMessageObj(messageObj) {
+        console.log(messageObj, "Replied To Message Object Here")
+        this.repliedToMessageObj = {...messageObj};
+        this.requestUpdate();
+        await this.updateComplete;
+        console.log(this.repliedToMessageObj);
+    }
 
-    setRepliedToSignature(messageSignature) {
-        console.log(messageSignature, "Replied To Message Signature Here")
-        this.repliedToSignature = messageSignature;
+    closeRepliedToContainer() {
+        this.repliedToMessageObj = null;
+        this.requestUpdate();
+    }
+ 
+    focusChatEditor() {
+       this.chatEditor.focus();
     }
 
     /**
@@ -454,10 +540,6 @@ class ChatPage extends LitElement {
   async  renderNewMessage(newMessage) {
 
         const viewElement = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById('viewElement');
-        const downObserver = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById('downObserver');
-        const li = document.createElement('li');
-        li.innerHTML = this.chatMessageTemplate(newMessage);
-        li.id = newMessage.signature;
 
         if (newMessage.sender === this.selectedAddress.address) {
 
@@ -683,11 +765,11 @@ class ChatPage extends LitElement {
             this.chatEditor.enable();
             let err1string = get("chatpage.cchange24");
             parentEpml.request('showSnackBar', `${err1string}`);
-        } else if(this.repliedToSignature) {
+        } else if (this.repliedToMessageObj) {
             const messageObject = {
                 messageText,
                 images: [''],
-                repliedTo: this.repliedToSignature,
+                repliedTo: this.repliedToMessageObj.signature,
                 version: 1
             }
             const stringifyMessageObject = JSON.stringify(messageObject)
diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js
index 898144a8..1be44de6 100644
--- a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js
+++ b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js
@@ -17,6 +17,10 @@ export const chatStyles = css`
 		--mdc-theme-secondary: var(--mdc-theme-primary);
 	}
 
+	* :focus-visible {
+		outline: none;
+	}
+
 	*::-webkit-scrollbar-track {
 		background: var(--scrollbarBG);
 	}
@@ -110,6 +114,8 @@ export const chatStyles = css`
 
 	.original-message {
     position: relative;
+		display: flex;
+		flex-direction: column;
     color: black;
     line-height: 19px;
     overflow-wrap: break-word;
@@ -120,8 +126,6 @@ export const chatStyles = css`
     background-color: rgba(209, 209, 209, 0.79);
     padding: 8px 5px 8px 25px;
 		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
 	}
 
 	.original-message:before {
@@ -131,7 +135,18 @@ export const chatStyles = css`
     left: 10px;
     height: 75%;
     width: 2.6px;
-    background-color: rgb(14, 190, 240);
+    background-color: var(--mdc-theme-primary);
+	}
+
+	.original-message-sender {
+		margin: 0 0 5px 0;
+		color: var(--mdc-theme-primary);
+	}
+
+	.replied-message {
+		margin: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
 	}
 
 	.message {
@@ -166,7 +181,7 @@ export const chatStyles = css`
 		display: none;
 		position: absolute;
 		top: -38px;
-		right: 20px;
+		right: 25px;
 	}
 
 	.emoji {
@@ -229,6 +244,10 @@ export const chatStyles = css`
 		position: relative;
 	}
 
+	.container:focus-visible {
+		outline: none;
+	}
+
 	.menu-icon {
 		width: 100%;
 		padding: 5px;
@@ -238,6 +257,7 @@ export const chatStyles = css`
 	}
 
 	.menu-icon:hover {
+		border-radius: 5px;
 		background-color: #dad9d9;
 		transition: all 0.1s ease-in-out;
 		cursor: pointer;
@@ -249,11 +269,12 @@ export const chatStyles = css`
 
 	.tooltip:before {
 		content: attr(data-text); 
+		display: none; 
 		position: absolute;
 		top: -47px;
 		left: 50%;
 		transform: translateX(-50%);
-		width: 90px;
+		width: auto;
 		padding: 10px;
 		border-radius: 10px;
 		background:#fff;
@@ -262,7 +283,8 @@ export const chatStyles = css`
 		box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
 		font-size: 12px;
 		z-index: 5;
-		display: none; 
+		white-space: nowrap;
+  	overflow: hidden;
 	}
 
 	.tooltip:hover:before {
@@ -285,7 +307,7 @@ export const chatStyles = css`
 	}
 
 	.block-user-container {
-		display: block;
+		display: none;
 		position: absolute;
 		left: -5px;
 	}
diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller.js b/qortal-ui-plugins/plugins/core/components/ChatScroller.js
index f8a05c56..b8b52c9f 100644
--- a/qortal-ui-plugins/plugins/core/components/ChatScroller.js
+++ b/qortal-ui-plugins/plugins/core/components/ChatScroller.js
@@ -25,8 +25,8 @@ class ChatScroller extends LitElement {
             initialMessages: { type: Array }, // First set of messages to load.. 15 messages max ( props )
             messages: { type: Array },
             hideMessages: { type: Array },
-            setRepliedToSignature: {type: Function},
-            repliedToSignature: {type: String},
+            setRepliedToMessageObj: { type: Function },
+            focusChatEditor: { type: Function }
         }
     }
 
@@ -55,8 +55,8 @@ class ChatScroller extends LitElement {
                     .escapeHTML=${this.escapeHTML} 
                     .messageObj=${message} 
                     .hideMessages=${this.hideMessages}
-                    .setRepliedToSignature=${this.setRepliedToSignature}
-                    .repliedToSignature=${this.repliedToSignature}
+                    .setRepliedToMessageObj=${this.setRepliedToMessageObj}
+                    .focusChatEditor=${this.focusChatEditor}
                     >
                     </message-template>`
                 )}
@@ -149,8 +149,8 @@ class MessageTemplate extends LitElement {
             openDialogPrivateMessage: {type: Boolean},
             openDialogBlockUser: {type: Boolean},
             showBlockAddressIcon: { type: Boolean },
-            setRepliedToSignature: {type: Function},
-            repliedToSignature: {type: String},
+            setRepliedToMessageObj: { type: Function },
+            focusChatEditor: { type: Function },
         }
     }
 
@@ -193,7 +193,6 @@ class MessageTemplate extends LitElement {
     }
 
     render() {
-        console.log(this.messageObj, "here244")
         const hidemsg = this.hideMessages
         let message = ""
         let repliedToData = null
@@ -252,7 +251,8 @@ class MessageTemplate extends LitElement {
                     <div 
                         class="original-message" 
                         style=${this.messageObj.sender === this.myAddress && "background-color: rgb(179 179 179 / 79%)"}>
-                        ${repliedToData.decodedMessage}
+                        <p class="original-message-sender">${repliedToData.sendName ?? repliedToData.sender}</p>
+                        <p class="replied-message">${repliedToData.decodedMessage}</p>
                     </div>
                     `}
                 <div id="messageContent" class="message">
@@ -267,9 +267,9 @@ class MessageTemplate extends LitElement {
                         .showBlockUserModal=${() => this.showBlockUserModal()}
                         .showBlockIconFunc=${(props) => this.showBlockIconFunc(props)}
                         .showBlockAddressIcon=${this.showBlockAddressIcon}
-                        .originalMessageSignature=${this.messageObj.signature}
-                        .setRepliedToSignature=${this.setRepliedToSignature}
-                        .repliedToSignature=${this.repliedToSignature}
+                        .originalMessage=${this.messageObj}
+                        .setRepliedToMessageObj=${this.setRepliedToMessageObj}
+                        .focusChatEditor=${this.focusChatEditor}
                         @blur=${() => this.showBlockIconFunc(false)}
                     > 
                     </chat-menu>
@@ -300,9 +300,9 @@ class ChatMenu extends LitElement {
             toblockaddress: { type: String, attribute: true },
             showBlockIconFunc: {type: Function},
             showBlockAddressIcon: {type: Boolean},
-            originalMessageSignature: {type: String},
-            setRepliedToSignature: {type: Function},
-            repliedToSignature: {type: String},
+            originalMessage: {type: Object},
+            setRepliedToMessageObj: { type: Function },
+            focusChatEditor: {type: Function},
         }
     }
 
@@ -337,7 +337,13 @@ class ChatMenu extends LitElement {
                 <div class="menu-icon tooltip" data-text="${translate("blockpage.bcchange8")}" @click="${() => this.copyToClipboard(this.toblockaddress)}">
                     <vaadin-icon icon="vaadin:copy" slot="icon"></vaadin-icon>
                 </div>
-                <div class="menu-icon tooltip" data-text="${translate("blockpage.bcchange11")}" @click="${() => this.setRepliedToSignature(this.originalMessageSignature)}">
+                <div 
+                    class="menu-icon tooltip" 
+                    data-text="${translate("blockpage.bcchange11")}" 
+                    @click="${() => {
+                        this.setRepliedToMessageObj(this.originalMessage);
+                        this.focusChatEditor();
+                        }}">
                     <vaadin-icon icon="vaadin:reply" slot="icon"></vaadin-icon>
                 </div>
                 <div class="menu-icon tooltip" data-text="${translate("blockpage.bcchange10")}" @click="${() => this.showBlockIconFunc(true)}">