diff --git a/src/components/views/messages/SenderProfile.tsx b/src/components/views/messages/SenderProfile.tsx
index df75de34ba..872dc132b9 100644
--- a/src/components/views/messages/SenderProfile.tsx
+++ b/src/components/views/messages/SenderProfile.tsx
@@ -118,18 +118,6 @@ export default class SenderProfile extends React.Component<IProps, IState> {
             return null; // emote message must include the name so don't duplicate it
         }
 
-        let flair;
-        if (this.props.enableFlair) {
-            const displayedGroups = this._getDisplayedGroups(
-                this.state.userGroups, this.state.relatedGroups,
-            );
-
-            flair = <Flair key='flair'
-                userId={mxEvent.getSender()}
-                groups={displayedGroups}
-            />;
-        }
-
         const displayNameElement = (
             <span className={`mx_SenderProfile_displayName ${colorClass}`}>
                 { displayName }
@@ -145,6 +133,18 @@ export default class SenderProfile extends React.Component<IProps, IState> {
             );
         }
 
+        let flair;
+        if (this.props.enableFlair) {
+            const displayedGroups = this._getDisplayedGroups(
+                this.state.userGroups, this.state.relatedGroups,
+            );
+
+            flair = <Flair key='flair'
+                userId={mxEvent.getSender()}
+                groups={displayedGroups}
+            />;
+        }
+
         return (
             <div className="mx_SenderProfile mx_SenderProfile_hover" dir="auto" onClick={this.props.onClick}>
                 { displayNameElement }