diff --git a/css/icons.css b/css/icons.css
index 68cc2cb1a96..5fc3bb26fbd 100644
--- a/css/icons.css
+++ b/css/icons.css
@@ -71,10 +71,12 @@
  * .app-Talk rules above.
  * "forced-white" needs to be included in the class name as the Avatar does
  * not accept several classes. */
+.mention-bubble__icon.icon-group-forced-white,
 .tribute-container .icon-group-forced-white {
 	background-image: url(../img/icon-contacts-white.svg);
 }
 
+.mention-bubble__icon.icon-user-forced-white,
 .tribute-container .icon-user-forced-white {
 	background-image: url(../img/icon-user-white.svg)
 }
diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index 4fa1835f89e..3e1dfe6dd0e 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -519,7 +519,7 @@ export default {
 			Object.keys(this.messageParameters).forEach(function(p) {
 				const type = this.messageParameters[p].type
 				const mimetype = this.messageParameters[p].mimetype
-				if (type === 'user' || type === 'call' || type === 'guest' || type === 'group') {
+				if (type === 'user' || type === 'call' || type === 'guest' || type === 'user-group' || type === 'group') {
 					richParameters[p] = {
 						component: Mention,
 						props: this.messageParameters[p],
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Mention.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Mention.vue
index 4bffda11c12..b394cc17f9c 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Mention.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Mention.vue
@@ -23,7 +23,7 @@
 	<div class="mention">
 		<NcUserBubble v-if="isMentionToAll"
 			:display-name="name"
-			:avatar-image="'icon-group-forced-white'"
+			:avatar-image="avatarUrl"
 			:primary="true" />
 		<NcUserBubble v-else-if="isGroupMention"
 			:display-name="name"
@@ -41,6 +41,8 @@
 
 <script>
 
+import { generateOcsUrl } from '@nextcloud/router'
+
 import NcUserBubble from '@nextcloud/vue/dist/Components/NcUserBubble.js'
 
 export default {
@@ -70,7 +72,7 @@ export default {
 			return this.type === 'call'
 		},
 		isGroupMention() {
-			return this.type === 'group'
+			return this.type === 'user-group' || this.type === 'group'
 		},
 		isMentionToGuest() {
 			return this.type === 'guest'
@@ -88,6 +90,15 @@ export default {
 			return this.$store.getters.getActorType() === 'users'
 				&& this.id === this.$store.getters.getUserId()
 		},
+		isDarkTheme() {
+			return window.getComputedStyle(document.body)
+				.getPropertyValue('--background-invert-if-dark') === 'invert(100%)'
+		},
+		avatarUrl() {
+			return generateOcsUrl('apps/spreed/api/v1/room/{token}/avatar' + (this.darkTheme ? '/dark' : ''), {
+				token: this.id,
+			})
+		},
 	},
 }
 </script>