diff --git a/chatto/src/main/resources/static/js/chat.js b/chatto/src/main/resources/static/js/chat.js
index d6cdaec..e1f3d9e 100644
--- a/chatto/src/main/resources/static/js/chat.js
+++ b/chatto/src/main/resources/static/js/chat.js
@@ -66,11 +66,20 @@ for (let i = 0; i < userBoxes.length; i++) {
         }
         let words = this.innerText.split("\n");
         // console.log(words);
-        document.getElementById('user-name-span').innerText = 'Chat with ' + words[1];
+        // let children = this.children;
+        // let userName = children[0].innerText;
+        let userName = this.querySelectorAll('span')[1].innerText;
+        document.getElementById('user-name-span').innerText = userName;
+        populateMessages(userName);
         this.className += " active";
     })
 }
 
+function populateMessages(userName)
+{
+    console.log(userName);
+}
+
 // var lastMessageTimeStamp;
 
 // console.log(authToken);
diff --git a/chatto/src/main/resources/templates/chat.html b/chatto/src/main/resources/templates/chat.html
index a6cb09e..3d1c176 100644
--- a/chatto/src/main/resources/templates/chat.html
+++ b/chatto/src/main/resources/templates/chat.html
@@ -82,7 +82,12 @@
                                             <span th:text="${userName}">Khalid</span>
                                             <p th:text="${userName} + ' is online'">Kalid is online</p>
                                         </div>
+                                        <div class="d-flex flex-column ml-auto">
+                                            <div class="text-right">Dec 25</div>
+                                            <div style="color: rgba(255,255,255,0.7);">Hello how are you</div>
+                                        </div>
                                     </div>
+
                                 </li>
                             </th:block>
                         </ui>