diff --git a/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue b/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue
index 70ca24cc4..5eae5d7cd 100644
--- a/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue
+++ b/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue
@@ -1,21 +1,24 @@
 <template>
   <div class="contribution-messages-list-item">
     <div v-if="message.isModerator" class="text-right is-moderator">
-      <b-avatar square :text="initialLetters" variant="warning"></b-avatar>
+      <b-avatar square variant="warning"></b-avatar>
       <span class="ml-2 mr-2">{{ message.userFirstName }} {{ message.userLastName }}</span>
       <span class="ml-2">{{ $d(new Date(message.createdAt), 'short') }}</span>
       <small class="ml-4 text-success">{{ $t('moderator') }}</small>
-      <div class="mt-2">{{ message.message }}</div>
+      <div class="mt-2" v-html="linkify"></div>
     </div>
     <div v-else class="text-left is-not-moderator">
-      <b-avatar :text="initialLetters" variant="info"></b-avatar>
+      <b-avatar variant="info"></b-avatar>
       <span class="ml-2 mr-2">{{ message.userFirstName }} {{ message.userLastName }}</span>
       <span class="ml-2">{{ $d(new Date(message.createdAt), 'short') }}</span>
-      <div class="mt-2">{{ message.message }}</div>
+      <div class="mt-2" v-html="linkify"></div>
     </div>
   </div>
 </template>
 <script>
+const PATTERN =
+  /(https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*))/gi
+
 export default {
   name: 'ContributionMessagesListItem',
   props: {
@@ -24,26 +27,11 @@ export default {
       required: true,
     },
   },
-  data() {
-    return {
-      pattern:
-        // eslint-disable-next-line no-useless-escape
-        /(https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*))/gi,
-      messageObject: this.message,
-    }
-  },
-  methods: {
-    linkify(inputText) {
-      // console.log(inputText.match(this.pattern))
-      this.messageObject.message = inputText.replace(
-        this.pattern,
-        "<i><a href='$1' target='_blank'>$1</a></i>",
-      )
+  computed: {
+    linkify() {
+      return this.message.message.replace(PATTERN, "<i><a href='$1' target='_blank'>$1</a></i>")
     },
   },
-  created() {
-    this.linkify(this.messageObject.message)
-  },
 }
 </script>
 <style>
diff --git a/frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue b/frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue
index 9ef041ba3..e7b44125c 100644
--- a/frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue
+++ b/frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue
@@ -1,22 +1,24 @@
 <template>
   <div class="contribution-messages-list-item">
     <div v-if="isNotModerator" class="is-not-moderator text-right">
-      <b-avatar :text="initialLetters" variant="info"></b-avatar>
+      <b-avatar variant="info"></b-avatar>
       <span class="ml-2 mr-2">{{ message.userFirstName }} {{ message.userLastName }}</span>
       <span class="ml-2">{{ $d(new Date(message.createdAt), 'short') }}</span>
-      <div class="mt-2">{{ message.message }}</div>
+      <div class="mt-2" v-html="linkify"></div>
     </div>
     <div v-else class="is-moderator text-left">
-      <b-avatar square :text="initialLetters" variant="warning"></b-avatar>
+      <b-avatar square variant="warning"></b-avatar>
       <span class="ml-2 mr-2">{{ message.userFirstName }} {{ message.userLastName }}</span>
       <span class="ml-2">{{ $d(new Date(message.createdAt), 'short') }}</span>
       <small class="ml-4 text-success">{{ $t('community.moderator') }}</small>
-      <div class="mt-2">{{ message.message }}</div>
+      <div class="mt-2" v-html="linkify"></div>
     </div>
   </div>
 </template>
 
 <script>
+const PATTERN = /(https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*))/gi
+
 export default {
   name: 'ContributionMessagesListItem',
   props: {
@@ -27,9 +29,6 @@ export default {
   },
   data() {
     return {
-      // eslint-disable-next-line no-useless-escape
-      pattern: /(https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*))/gi,
-      messageObject: this.message,
       storeName: `${this.$store.state.firstName} ${this.$store.state.lastName}`,
       moderationName: `${this.message.userFirstName} ${this.message.userLastName}`,
     }
@@ -38,19 +37,10 @@ export default {
     isNotModerator() {
       return this.storeName === this.moderationName
     },
-  },
-  methods: {
-    linkify(inputText) {
-      // console.log(inputText.match(this.pattern))
-      this.messageObject.message = inputText.replace(
-        this.pattern,
-        "<i><a href='$1' target='_blank'>$1</a></i>",
-      )
+    linkify() {
+      return this.message.message.replace(PATTERN, "<i><a href='$1' target='_blank'>$1</a></i>")
     },
   },
-  created() {
-    this.linkify(this.messageObject.message)
-  },
 }
 </script>
 <style>