diff --git a/app/components/at_mention/__snapshots__/at_mention.test.js.snap b/app/components/at_mention/__snapshots__/at_mention.test.js.snap
index 47405ba7c..7613e1e18 100644
--- a/app/components/at_mention/__snapshots__/at_mention.test.js.snap
+++ b/app/components/at_mention/__snapshots__/at_mention.test.js.snap
@@ -37,7 +37,6 @@ exports[`AtMention should match snapshot, with highlight 1`] = `
   >
     @John.Smith
   </Text>
-  
 </Text>
 `;
 
@@ -61,6 +60,5 @@ exports[`AtMention should match snapshot, without highlight 1`] = `
   >
     @Victor.Welch
   </Text>
-  
 </Text>
 `;
diff --git a/app/components/at_mention/at_mention.js b/app/components/at_mention/at_mention.js
index 76c661e11..667597bd5 100644
--- a/app/components/at_mention/at_mention.js
+++ b/app/components/at_mention/at_mention.js
@@ -146,6 +146,7 @@ export default class AtMention extends React.PureComponent {
         let highlighted;
         let mention;
         let suffix;
+        let suffixElement;
 
         if (user?.username) {
             suffix = this.props.mentionName.substring(user.username.length);
@@ -159,7 +160,7 @@ export default class AtMention extends React.PureComponent {
                 mention = group.name;
                 suffix = this.props.mentionName.substring(group.name.length);
             } else {
-                const pattern = new RegExp(/(all|channel|here)\.?/, 'i');
+                const pattern = new RegExp(/\b(all|channel|here)(?:\.\B|_\b|\b)/, 'i');
                 const mentionMatch = pattern.exec(mentionName);
 
                 if (mentionMatch) {
@@ -180,6 +181,15 @@ export default class AtMention extends React.PureComponent {
             onPress = isSearchResult ? onPostPress : this.goToUserProfile;
         }
 
+        if (suffix) {
+            const suffixStyle = {...styleText, color: this.props.theme.centerChannelColor};
+            suffixElement = (
+                <Text style={suffixStyle}>
+                    {suffix}
+                </Text>
+            );
+        }
+
         return (
             <Text
                 style={styleText}
@@ -189,7 +199,7 @@ export default class AtMention extends React.PureComponent {
                 <Text style={[highlighted ? null : mentionStyle, {backgroundColor}]}>
                     {'@' + mention}
                 </Text>
-                {suffix}
+                {suffixElement}
             </Text>
         );
     }