diff --git a/src/components/Messages/MessageViewItem.vue b/src/components/Messages/MessageViewItem.vue
index d1cba9b..403881d 100644
--- a/src/components/Messages/MessageViewItem.vue
+++ b/src/components/Messages/MessageViewItem.vue
@@ -62,6 +62,8 @@ const props = defineProps({
   },
 });
 
+const emits = defineEmits(["tag-click"]);
+
 const showVoting = computed(
   () => getActiveChannel.value && getActiveChannel.value.votingAllowed
 );
@@ -91,23 +93,15 @@ function getDownVoteClass(item) {
   return className;
 }
 
+// emit to update message in messagespage
 function addToMessage(pseudonym) {
-  let textArea = document.getElementById("messageTextArea");
-  let existingText = textArea.value.trim();
-  if (pseudonym.indexOf(" ") > -1) pseudonym = '"' + pseudonym + '"';
-  if (existingText.indexOf(pseudonym) > -1) return;
-  if (existingText != "") existingText += " ";
-  textArea.value = existingText + "@" + pseudonym + " ";
-  textArea.focus();
+  emits("tag-click", pseudonym, true);
 }
 
 function getMessageClass(item) {
   return item.downVotes.length > 2 ? "text-gray-400" : "text-black";
 }
 
-const threadLink = computed(
-  () => "/threads/" + this.$route.params.channel + "/" + this.item.name
-);
 /**
  * Build html tag for tagged pseudonym
  */
diff --git a/src/components/Messages/MessagesView.vue b/src/components/Messages/MessagesView.vue
index cf891cd..a22605c 100644
--- a/src/components/Messages/MessagesView.vue
+++ b/src/components/Messages/MessagesView.vue
@@ -8,24 +8,25 @@
         >No messages. Start a conversation.</span
       >
       <template v-for="item in items" :key="item.id">
-        <MessageViewItem :item="item" />
+        <MessageViewItem :item="item" v-bind="$attrs" />
       </template>
     </div>
   </div>
 </template>
 
 <script>
+export default {
+  inheritAttrs: false,
+};
+</script>
+
+<script setup>
 import MessageViewItem from "./MessageViewItem.vue";
 
-export default {
-  components: {
-    MessageViewItem,
-  },
-  props: {
-    items: {
-      type: Array,
-      required: true,
-    },
+defineProps({
+  items: {
+    type: Array,
+    required: true,
   },
-};
+});
 </script>
diff --git a/src/views/MessagesPage.vue b/src/views/MessagesPage.vue
index 74bb6ef..fbd0283 100644
--- a/src/views/MessagesPage.vue
+++ b/src/views/MessagesPage.vue
@@ -7,6 +7,7 @@
       }
     "
     :items="updatedMsgs"
+    @tag-click="tagClick"
   />
   <TagList
     :items="filteredTags"
@@ -157,10 +158,14 @@ watchEffect(() => {
 /**
  * Update tag on message to follow a taggable pattern
  */
-function tagClick(value) {
+function tagClick(value, isClickedDirect = false) {
   let pseudonym = `"${value}" `;
-  // Replace last occurrence of word starting with @
-  message.value = message.value.replace(/(\w*)(?=[^@]*)$/, pseudonym);
+  if (!isClickedDirect) {
+    // Replace last occurrence of word starting with @
+    message.value = message.value.replace(/(\w*)(?=[^@]*)$/, pseudonym);
+  } else {
+    message.value = message.value.replace(/$/, `@${pseudonym}`);
+  }
   messageTextArea.value.focus();
 }
 
@@ -188,6 +193,12 @@ function messageHandler(data) {
    */
   if (data.thread.id === route.params.threadId) {
     addMessage(data);
+  }
+
+  /**
+   * Scroll to bottom if the message belongs to current user
+   */
+  if (data.owner === getId.value) {
     scrollToBottom();
   }