diff --git a/admin/src/components/ContributionMessages/slots/IsModerator.vue b/admin/src/components/ContributionMessages/slots/IsModerator.vue
index a930395e4..37db5402e 100644
--- a/admin/src/components/ContributionMessages/slots/IsModerator.vue
+++ b/admin/src/components/ContributionMessages/slots/IsModerator.vue
@@ -1,11 +1,7 @@
 <template>
   <div class="slot-is-moderator">
     <div class="text-right">
-      <b-avatar
-        square
-        :text="`${message.userFirstName[0]} ${message.userLastName[0]}`"
-        variant="warning"
-      ></b-avatar>
+      <b-avatar square :text="initialLetters" 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>
@@ -23,6 +19,11 @@ export default {
       },
     },
   },
+  computed: {
+    initialLetters() {
+      return `${this.message.userFirstName[0]} ${this.message.userLastName[0]}`
+    },
+  },
 }
 </script>
 <style>
diff --git a/admin/src/components/ContributionMessages/slots/IsNotModerator.vue b/admin/src/components/ContributionMessages/slots/IsNotModerator.vue
index 19f5ab3ff..8828fe5b0 100644
--- a/admin/src/components/ContributionMessages/slots/IsNotModerator.vue
+++ b/admin/src/components/ContributionMessages/slots/IsNotModerator.vue
@@ -1,10 +1,7 @@
 <template>
   <div class="slot-is-not-moderator">
     <div>
-      <b-avatar
-        :text="`${message.userFirstName[0]} ${message.userLastName[0]}`"
-        variant="info"
-      ></b-avatar>
+      <b-avatar :text="initialLetters" variant="info"></b-avatar>
       <span class="ml-2 mr-2 text-bold">
         {{ message.userFirstName }} {{ message.userLastName }}
       </span>
@@ -23,6 +20,11 @@ export default {
       },
     },
   },
+  computed: {
+    initialLetters() {
+      return `${this.message.userFirstName[0]} ${this.message.userLastName[0]}`
+    },
+  },
 }
 </script>
 <style>
diff --git a/frontend/src/components/ContributionMessages/slots/IsModerator.vue b/frontend/src/components/ContributionMessages/slots/IsModerator.vue
index a76c6f58c..2c7e20793 100644
--- a/frontend/src/components/ContributionMessages/slots/IsModerator.vue
+++ b/frontend/src/components/ContributionMessages/slots/IsModerator.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="slot-is-moderator">
-    <b-avatar square :text="moderatorName" variant="warning"></b-avatar>
+    <b-avatar square :text="initialLetters" 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>
@@ -18,7 +18,7 @@ export default {
     },
   },
   computed: {
-    moderatorName() {
+    initialLetters() {
       return `${this.message.userFirstName[0]} ${this.message.userLastName[0]}`
     },
   },
diff --git a/frontend/src/components/ContributionMessages/slots/IsNotModerator.vue b/frontend/src/components/ContributionMessages/slots/IsNotModerator.vue
index f4dc6cdca..0f67f8bfc 100644
--- a/frontend/src/components/ContributionMessages/slots/IsNotModerator.vue
+++ b/frontend/src/components/ContributionMessages/slots/IsNotModerator.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="slot-is-not-moderator">
     <div class="text-right">
-      <b-avatar :text="userName" variant="info"></b-avatar>
+      <b-avatar :text="initialLetters" variant="info"></b-avatar>
       <span class="ml-2 mr-2 text-bold">
         {{ message.userFirstName }} {{ message.userLastName }}
       </span>
@@ -21,7 +21,7 @@ export default {
     },
   },
   computed: {
-    userName() {
+    initialLetters() {
       return `${this.message.userFirstName[0]} ${this.message.userLastName[0]}`
     },
   },