diff --git a/website/client/components/chat/chatCard.vue b/website/client/components/chat/chatCard.vue
index 3776ac2237..dd5a7cb2a1 100644
--- a/website/client/components/chat/chatCard.vue
+++ b/website/client/components/chat/chatCard.vue
@@ -14,23 +14,24 @@ div
       p.time(v-b-tooltip="", :title="msg.timestamp | date") {{msg.timestamp | timeAgo}}
       .text(v-markdown='msg.text')
       hr
-      .action(@click='like()', v-if='!inbox && msg.likes', :class='{active: msg.likes[user._id]}')
-        .svg-icon(v-html="icons.like")
-        span(v-if='!msg.likes[user._id]') {{ $t('like') }}
-        span(v-if='msg.likes[user._id]') {{ $t('liked') }}
-      span.action(v-if='!inbox', @click='copyAsTodo(msg)')
-        .svg-icon(v-html="icons.copy")
-        | {{$t('copyAsTodo')}}
-      span.action(v-if='!inbox && user.flags.communityGuidelinesAccepted && msg.uuid !== "system"', @click='report(msg)')
-        .svg-icon(v-html="icons.report")
-        | {{$t('report')}}
-        // @TODO make flagging/reporting work in the inbox. NOTE: it must work even if the communityGuidelines are not accepted and it MUST work for messages that you have SENT as well as received. -- Alys
-      span.action(v-if='msg.uuid === user._id || inbox || user.contributor.admin', @click='remove()')
-        .svg-icon(v-html="icons.delete")
-        | {{$t('delete')}}
-      span.action.float-right.liked(v-if='likeCount > 0')
-        .svg-icon(v-html="icons.liked")
-        | + {{ likeCount }}
+      div(v-if='msg.id')
+        .action(@click='like()', v-if='!inbox && msg.likes', :class='{active: msg.likes[user._id]}')
+          .svg-icon(v-html="icons.like")
+          span(v-if='!msg.likes[user._id]') {{ $t('like') }}
+          span(v-if='msg.likes[user._id]') {{ $t('liked') }}
+        span.action(v-if='!inbox', @click='copyAsTodo(msg)')
+          .svg-icon(v-html="icons.copy")
+          | {{$t('copyAsTodo')}}
+        span.action(v-if='!inbox && user.flags.communityGuidelinesAccepted && msg.uuid !== "system"', @click='report(msg)')
+          .svg-icon(v-html="icons.report")
+          | {{$t('report')}}
+          // @TODO make flagging/reporting work in the inbox. NOTE: it must work even if the communityGuidelines are not accepted and it MUST work for messages that you have SENT as well as received. -- Alys
+        span.action(v-if='msg.uuid === user._id || inbox || user.contributor.admin', @click='remove()')
+          .svg-icon(v-html="icons.delete")
+          | {{$t('delete')}}
+        span.action.float-right.liked(v-if='likeCount > 0')
+          .svg-icon(v-html="icons.liked")
+          | + {{ likeCount }}
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/client/components/userMenu/inbox.vue b/website/client/components/userMenu/inbox.vue
index 91889f8453..59866b51f8 100644
--- a/website/client/components/userMenu/inbox.vue
+++ b/website/client/components/userMenu/inbox.vue
@@ -7,11 +7,7 @@
             .col-2
               .svg-icon.envelope(v-html="icons.messageIcon")
             .col-6
-              h2.text-center(v-once) {{$t('messages')}}
-            // @TODO: Implement this after we fix username bug
-            // .col-2.offset-1
-            //  button.btn.btn-secondary(@click='toggleClick()') +
-        .col-4.offset-4
+              h2.text-center(v-once) {{ $t('messages') }}
           .svg-icon.close(v-html="icons.svgClose", @click='close()')
           toggle-switch.float-right(
             :label="optTextSet.switchDescription",
@@ -19,9 +15,6 @@
             :hoverText="optTextSet.popoverText",
             @change="toggleOpt()"
           )
-        // .col-8.to-form(v-if='displayCreate')
-        //   strong To:
-        // b-form-input
     .row
       .col-4.sidebar
         .search-section
@@ -48,9 +41,6 @@
         .pm-disabled-caption.text-center(v-if="user.inbox.optOut && selectedConversation.key")
           h4 {{$t('PMDisabledCaptionTitle')}}
           p {{$t('PMDisabledCaptionText')}}
-
-        // @TODO: Implement new message header here when we fix the above
-
         .new-message-row(v-if='selectedConversation.key && !user.flags.chatRevoked')
           textarea(
             v-model='newMessage',
@@ -211,6 +201,7 @@ import moment from 'moment';
 import filter from 'lodash/filter';
 import sortBy from 'lodash/sortBy';
 import groupBy from 'lodash/groupBy';
+import findIndex from 'lodash/findIndex';
 import { mapState } from 'client/libs/store';
 import styleHelper from 'client/mixins/styleHelper';
 import toggleSwitch from 'client/components/ui/toggleSwitch';
@@ -386,15 +377,10 @@ export default {
     sendPrivateMessage () {
       if (!this.newMessage) return;
 
-      let convoFound = this.conversations.find((conversation) => {
+      const convoFound = this.conversations.find((conversation) => {
         return conversation.key === this.selectedConversation.key;
       });
 
-      this.$store.dispatch('members:sendPrivateMessage', {
-        toUserId: this.selectedConversation.key,
-        message: this.newMessage,
-      });
-
       convoFound.messages.push({
         text: this.newMessage,
         timestamp: new Date(),
@@ -408,13 +394,22 @@ export default {
       convoFound.lastMessageText = this.newMessage;
       convoFound.date = new Date();
 
-      this.newMessage = '';
-
       Vue.nextTick(() => {
         if (!this.$refs.chatscroll) return;
         let chatscroll = this.$refs.chatscroll.$el;
         chatscroll.scrollTop = chatscroll.scrollHeight;
       });
+
+      this.$store.dispatch('members:sendPrivateMessage', {
+        toUserId: this.selectedConversation.key,
+        message: this.newMessage,
+      }).then(response => {
+        const newMessage = response.data.data.message;
+        const messageIndex = findIndex(convoFound.messages, msg => !msg.id);
+        convoFound.messages.splice(convoFound.messages.length - 1, messageIndex, newMessage);
+      });
+
+      this.newMessage = '';
     },
     close () {
       this.$root.$emit('bv::hide::modal', 'inbox-modal');
diff --git a/website/server/controllers/api-v3/members.js b/website/server/controllers/api-v3/members.js
index 421e2cf4bb..d0c8f2e8bb 100644
--- a/website/server/controllers/api-v3/members.js
+++ b/website/server/controllers/api-v3/members.js
@@ -478,25 +478,25 @@ api.sendPrivateMessage = {
     req.checkBody('message', res.t('messageRequired')).notEmpty();
     req.checkBody('toUserId', res.t('toUserIDRequired')).notEmpty().isUUID();
 
-    let validationErrors = req.validationErrors();
+    const validationErrors = req.validationErrors();
     if (validationErrors) throw validationErrors;
 
-    let sender = res.locals.user;
-    let message = req.body.message;
-    let receiver = await User.findById(req.body.toUserId).exec();
+    const sender = res.locals.user;
+    const message = req.body.message;
+    const receiver = await User.findById(req.body.toUserId).exec();
     if (!receiver) throw new NotFound(res.t('userNotFound'));
 
-    let objections = sender.getObjectionsToInteraction('send-private-message', receiver);
-
+    const objections = sender.getObjectionsToInteraction('send-private-message', receiver);
     if (objections.length > 0 && !sender.isAdmin()) throw new NotAuthorized(res.t(objections[0]));
 
-    await sender.sendMessage(receiver, { receiverMsg: message });
+    const newMessage = await sender.sendMessage(receiver, { receiverMsg: message });
 
     if (receiver.preferences.emailNotifications.newPM !== false) {
       sendTxnEmail(receiver, 'new-pm', [
         {name: 'SENDER', content: getUserInfo(sender, ['name']).name},
       ]);
     }
+
     if (receiver.preferences.pushNotifications.newPM !== false) {
       sendPushNotification(
         receiver,
@@ -510,7 +510,7 @@ api.sendPrivateMessage = {
       );
     }
 
-    res.respond(200, {});
+    res.respond(200, { message: newMessage });
   },
 };
 
diff --git a/website/server/models/user/methods.js b/website/server/models/user/methods.js
index 078ae60cab..fe5beb8ed9 100644
--- a/website/server/models/user/methods.js
+++ b/website/server/models/user/methods.js
@@ -106,7 +106,8 @@ schema.methods.sendMessage = async function sendMessage (userToReceiveMessage, o
   // whether to save users after sending the message, defaults to true
   let saveUsers = options.save === false ? false : true;
 
-  common.refPush(userToReceiveMessage.inbox.messages, chatDefaults(options.receiverMsg, sender));
+  const newMessage = chatDefaults(options.receiverMsg, sender);
+  common.refPush(userToReceiveMessage.inbox.messages, newMessage);
   userToReceiveMessage.inbox.newMessages++;
   userToReceiveMessage._v++;
   userToReceiveMessage.markModified('inbox.messages');
@@ -139,6 +140,8 @@ schema.methods.sendMessage = async function sendMessage (userToReceiveMessage, o
   if (saveUsers) {
     await Promise.all([userToReceiveMessage.save(), sender.save()]);
   }
+
+  return newMessage;
 };
 
 /**