diff --git a/src/components/messaging/Message.tsx b/src/components/messaging/Message.tsx
index 73912e0b..7fd2046a 100644
--- a/src/components/messaging/Message.tsx
+++ b/src/components/messaging/Message.tsx
@@ -26,8 +26,20 @@ function Message({ message, header }: Props) {
 		...ContextMenus.Message(app, message, app.account),
 	]);
 
+	const guild = message.guild_id ? app.guilds.get(message.guild_id) : undefined;
+	const isEveryoneMentioned = "mention_everyone" in message && message.mention_everyone;
+	const isUserMentioned = "mentions" in message && message.mentions.some((mention) => mention.id === app.account!.id);
+	const isRoleMentioned =
+		guild &&
+		"mention_roles" in message &&
+		message.mention_roles.some((role) => guild.members.me?.roles.some((role) => role.id === role.id));
+
 	return (
-		<MessageBase header={header} onContextMenu={(e) => contextMenu.open2(e, contextMenuItems)}>
+		<MessageBase
+			header={header}
+			onContextMenu={(e) => contextMenu.open2(e, contextMenuItems)}
+			mention={isEveryoneMentioned || isUserMentioned || isRoleMentioned}
+		>
 			<MessageInfo>
 				{header ? (
 					<Avatar key={message.author.id} user={message.author} size={40} />
diff --git a/src/stores/objects/Message.ts b/src/stores/objects/Message.ts
index ad0eca3a..cf733ded 100644
--- a/src/stores/objects/Message.ts
+++ b/src/stores/objects/Message.ts
@@ -213,7 +213,7 @@ export default class Message extends MessageBase {
 		this.tts = data.tts;
 		this.mention_everyone = data.mention_everyone;
 		this.mentions = data.mentions; // TODO: user object?
-		this.mention_roles = data.mention_roles;
+		this.mention_roles = (data.mention_roles as unknown as { id: Snowflake }[]).map((x) => x.id); // FIXME: oh god, who did this in the server smh
 		this.mention_channels = data.mention_channels;
 		this.attachments = data.attachments;
 		this.embeds = data.embeds;