diff --git a/app/assets/javascripts/discourse/components/about-page-users.js b/app/assets/javascripts/discourse/components/about-page-users.js
index fb9076cb303..92936610d21 100644
--- a/app/assets/javascripts/discourse/components/about-page-users.js
+++ b/app/assets/javascripts/discourse/components/about-page-users.js
@@ -4,22 +4,28 @@ import { formatUsername } from "discourse/lib/utilities";
 import { normalize } from "discourse/components/user-info";
 import { renderAvatar } from "discourse/helpers/user-avatar";
 import { computed } from "@ember/object";
+import { prioritizeNameInUx } from "discourse/lib/settings";
 
 export default Component.extend({
   usersTemplates: computed("users.[]", function() {
     return (this.users || []).map(user => {
-      let name = "";
-      if (user.name && normalize(user.username) !== normalize(user.name)) {
-        name = user.name;
+      let name = user.name;
+      let username = user.username;
+      let prioritizeName = prioritizeNameInUx(name, this.siteSettings);
+      let hideName = false;
+      if (normalize(username) === normalize(name)) {
+        hideName = true;
       }
 
       return {
-        username: user.username,
         name,
-        userPath: userPath(user.username),
+        username,
+        userPath: userPath(username),
         avatar: renderAvatar(user, { imageSize: "large" }),
         title: user.title || "",
-        formatedUsername: formatUsername(user.username)
+        formatedUsername: formatUsername(username),
+        prioritizeName,
+        hideName
       };
     });
   })
diff --git a/app/assets/javascripts/discourse/templates/components/about-page-users.hbs b/app/assets/javascripts/discourse/templates/components/about-page-users.hbs
index 4b7161ba185..f27899f0e78 100644
--- a/app/assets/javascripts/discourse/templates/components/about-page-users.hbs
+++ b/app/assets/javascripts/discourse/templates/components/about-page-users.hbs
@@ -11,10 +11,14 @@
       <div class="name-line">
         <span class="username">
           <a href={{userTemplate.userPath}} data-user-card={{userTemplate.username}}>
-            {{userTemplate.username}}
+            {{#if userTemplate.prioritizeName}}{{userTemplate.name}}{{else}}{{userTemplate.username}}{{/if}}
           </a>
         </span>
-        <span class="name">{{userTemplate.name}}</span>
+        <span class="name">
+          {{#unless userTemplate.hideName}}
+            {{#if userTemplate.prioritizeName}}{{userTemplate.username}}{{else}}{{userTemplate.name}}{{/if}}
+          {{/unless}}
+        </span>
       </div>
       <div class="title">{{userTemplate.title}}</div>
     </div>