diff --git a/chatto/src/main/javascript/package.json b/chatto/src/main/javascript/package.json
index c6827d8..65a5d62 100644
--- a/chatto/src/main/javascript/package.json
+++ b/chatto/src/main/javascript/package.json
@@ -14,6 +14,7 @@
         "handlebars": "^4.5.3",
         "loglevel": "^1.6.6",
         "markdown-it": "^10.0.0",
+        "moment": "^2.24.0",
         "promise-worker": "^2.0.1",
         "sjcl": "^1.0.8",
         "sprintf-js": "^1.1.2"
diff --git a/chatto/src/main/javascript/ts/src/main.ts b/chatto/src/main/javascript/ts/src/main.ts
index d280466..0e99e12 100644
--- a/chatto/src/main/javascript/ts/src/main.ts
+++ b/chatto/src/main/javascript/ts/src/main.ts
@@ -18,6 +18,7 @@ import { ChatViewDeps } from "./view/ChatViewDeps";
 import { UserView } from "./view/UserView";
 import { UserViewDeps } from "./view/UserViewDeps";
 import { ActiveUserViewModel } from "./viewmodel/ActiveUserViewModel";
+import moment = require("moment");
 
 log.setLevel("TRACE");
 
@@ -77,6 +78,12 @@ userController.getActiveUsers();
 Handlebars.registerHelper('avatar', function () {
     return '<div class="img_cont_msg"> <img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img_msg"> </div>';
 });
+Handlebars.registerHelper('fromNow', function (date: string) {
+    return moment(date).fromNow();
+})
+Handlebars.registerHelper('msgDateFormat', function(date: string) {
+    return moment(date).calendar(moment.now(), {lastWeek: "DD/MM/YY hh:mm:a", sameElse: "DD/MM/YY hh:mm:a"})
+})
 
 
 
diff --git a/chatto/src/main/javascript/ts/src/view/ChatView.ts b/chatto/src/main/javascript/ts/src/view/ChatView.ts
index 7c8db66..d1cbb09 100644
--- a/chatto/src/main/javascript/ts/src/view/ChatView.ts
+++ b/chatto/src/main/javascript/ts/src/view/ChatView.ts
@@ -51,7 +51,7 @@ export class ChatView implements Observer<ChatMessageViewModel> {
             } break;
             case "new": {
                 const rev: ChatMessageViewModel[] = Object.create(cd.data)
-                rev.reverse();
+                // rev.reverse();
                 let arr: string[] = [];
                 rev.forEach((vm: ChatMessageViewModel) => {
                     const vmTemp: ChatMessageViewModel = { ...vm };
@@ -67,7 +67,7 @@ export class ChatView implements Observer<ChatMessageViewModel> {
                     else {
                         rendered = DOMPurify.sanitize(this._messageReceiveTemplate(vmTemp));
                     }
-                    $(this._messageContainer).prepend(rendered);
+                    $(this._messageContainer).append(rendered);
                 });
                 $(this._messageContainer).stop().animate({
                     scrollTop: $(this._messageContainer)[0].scrollHeight
@@ -148,27 +148,24 @@ export class ChatView implements Observer<ChatMessageViewModel> {
             return;
         }
 
-        // @ts-ignore
         const messageContent = chatInput.value;
-        const context = {
-            fromUser: JsonAPI.principleName, toUser: "",
-            message: this._markdownService.render(messageContent),
-            messageTime: new Date().toLocaleString()
+        const msgTime = new Date();
+        const context: ChatMessageViewModel = {
+            fromUser: JsonAPI.principleName || "error", 
+            toUser: "",
+            message: messageContent,
+            messageTime: msgTime
         };
-        // @ts-ignore
-        const msgContainer: string = this._messageSendTemplate(context);
-        $(this._messageContainer).append(DOMPurify.sanitize(msgContainer));
-        // scrollChatAreaAnimated(2400);
-        // let messageCipher = sjcl.encrypt(passphraseInput.value, messageContent, { mode: "gcm", ts: 128, adata: "", iter: iterations });
+
+        this.update({data: new Array(context), op: "new"})
+
         let messageCipher: MessageCipherDTO = this._encryptionService.encrypt(passphraseInput.value, messageContent)
-        // let messageCipherJson = JSON.parse(messageCipher);
         let chatMessageDTO = {
-            "fromUser": JsonAPI.principleName,
+            "fromUser": JsonAPI.principleName || "",
             "toUser": contactName,
             "messageCipher": messageCipher,
-            // "messageTime": null
+            messageTime: msgTime
         }
-        // @ts-ignore
         this._sendMessageAJAX(chatMessageDTO);
     }
 
diff --git a/chatto/src/main/javascript/yarn.lock b/chatto/src/main/javascript/yarn.lock
index 94804e6..c65bd9f 100644
--- a/chatto/src/main/javascript/yarn.lock
+++ b/chatto/src/main/javascript/yarn.lock
@@ -1962,7 +1962,7 @@ module-deps@^6.0.0:
     through2 "^2.0.0"
     xtend "^4.0.0"
 
-moment@^2.10.2:
+moment@^2.10.2, moment@^2.24.0:
   version "2.24.0"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
   integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
diff --git a/chatto/src/main/resources/templates/chat.html b/chatto/src/main/resources/templates/chat.html
index 490d27f..054b907 100644
--- a/chatto/src/main/resources/templates/chat.html
+++ b/chatto/src/main/resources/templates/chat.html
@@ -229,7 +229,7 @@
                     </div>
                     <div class="msg msg_container">
                         {{{message}}}
-                        <span class="msg_time">{{messageTime}}</span>
+                        <span class="msg_time">{{msgDateFormat messageTime}}</span>
                     </div>
                 </div>
     </template>
@@ -238,7 +238,7 @@
         <div class="d-flex justify-content-end mb-4">
                 <div class="msg msg_container_send">
                         {{{message}}}
-                    <span class="msg_time_send">{{messageTime}}</span>
+                    <span class="msg_time_send">{{msgDateFormat messageTime}}</span>
                 </div>
                 <!-- <div class="img_cont_msg">
                     <img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg"
@@ -274,7 +274,7 @@
                         </div>
                         <div class="user_info">
                             <span class="to-user-span">{{userName}}</span>
-                            <p>Last active {{lastActive}}</p>
+                            <p>Last active {{fromNow lastActive}}</p>
                         </div>
                         <div class="d-flex flex-column ml-auto">
                             <div class="text-right">Dec 25</div>