diff --git a/.vscode/settings.json b/.vscode/settings.json
index 1f477646f5..dbabbebadf 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,6 @@
 {
-  "editor.defaultFormatter": "esbenp.prettier-vscode"
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[vue]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
 }
\ No newline at end of file
diff --git a/components/tailored/messaging/message/Message.html b/components/tailored/messaging/message/Message.html
index bf9d902397..8838012417 100644
--- a/components/tailored/messaging/message/Message.html
+++ b/components/tailored/messaging/message/Message.html
@@ -27,18 +27,10 @@
       :setReplyChatbarContent="setReplyChatbarContent"
       :emojiReaction="emojiReaction"
       :editMessage="editMessage"
-      :messageOwner="this.$props.message.from"
-    />
-    <VueMarkdown
-      v-if="!messageEdit && message.type === 'text'"
-      :source="message.payload"
-      class="markdown"
-    />
-    <UiImage
-      v-else-if="message.type === 'image'"
-      :source="message.payload.url"
-      alt=""
+      :message="message"
     />
+    <VueMarkdown v-if="!messageEdit && message.type === 'text'" :source="message.payload" class="markdown" />
+    <UiImage v-else-if="message.type === 'image'" :source="message.payload.url" alt="" />
     <!-- Only for video types we can't embed directly without doing something sketchy, like sending it to a server somewhere to extract the HTML5 video-->
     <UiEmbedsEmbeddedLinkContent
       v-if="message.type === 'text'"
diff --git a/components/tailored/messaging/message/actions/Actions.html b/components/tailored/messaging/message/actions/Actions.html
index 1f4c0fd010..3230843456 100644
--- a/components/tailored/messaging/message/actions/Actions.html
+++ b/components/tailored/messaging/message/actions/Actions.html
@@ -1,4 +1,5 @@
 <div class="message-actions">
+  <div class="reply-text">{{$dayjs(message.at).from()}}</div>
   <div
     class="reply-command has-tooltip has-tooltip-primary"
     :data-tooltip="$t('global.glyphs')"
@@ -26,7 +27,7 @@
   <div
     class="reply-command has-tooltip has-tooltip-primary"
     :data-tooltip="$t('global.edit')"
-    v-if="messageOwner === accounts.details.textilePubkey"
+    v-if="message.from === accounts.details.textilePubkey"
     @click="editMessage"
   >
     <edit-icon size="1x" :class="'control-icon'" />
@@ -37,4 +38,4 @@
   >
     <more-vertical-icon size="1x" :class="'control-icon'" />
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/components/tailored/messaging/message/actions/Actions.less b/components/tailored/messaging/message/actions/Actions.less
index ca78d46475..ed100384b0 100644
--- a/components/tailored/messaging/message/actions/Actions.less
+++ b/components/tailored/messaging/message/actions/Actions.less
@@ -10,6 +10,12 @@
   display: flex;
   box-sizing: border-box;
   height: 36px;
+  font-size: 14px;
+  align-items: center;
+  padding: 0 0.25rem;
+  .reply-text {
+    padding: 0 0.25rem;
+  }
   .reply-command {
     width: 35px;
     // height: 35px;
@@ -32,4 +38,4 @@
       color: @text;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/components/tailored/messaging/message/actions/Actions.vue b/components/tailored/messaging/message/actions/Actions.vue
index c396806782..6130cd4b2a 100644
--- a/components/tailored/messaging/message/actions/Actions.vue
+++ b/components/tailored/messaging/message/actions/Actions.vue
@@ -37,9 +37,15 @@ export default Vue.extend({
       type: Function,
       default: () => () => {},
     },
-    messageOwner: {
-      type: String,
-      required: true,
+    message: {
+      type: Object as PropType<UIMessage>,
+      default: {
+        id: '0',
+        at: 1620515543000,
+        type: 'text',
+        from: 'group',
+        payload: 'Invalid Message',
+      },
     },
   },
   computed: {