diff --git a/assets/javascripts/discourse/components/group-assignments-filter.js.es6 b/assets/javascripts/discourse/components/group-assignments-filter.js.es6
index e0188e1..565ffc7 100644
--- a/assets/javascripts/discourse/components/group-assignments-filter.js.es6
+++ b/assets/javascripts/discourse/components/group-assignments-filter.js.es6
@@ -1,5 +1,14 @@
+import discourseComputed from "discourse-common/utils/decorators";
 import Component from "@ember/component";
 
 export default Component.extend({
-  tagName: "li"
+  tagName: "li",
+
+  @discourseComputed("siteSettings.prioritize_username_in_ux", "filter.username", "filter.displayName")
+  displayName(prioritize_username_in_ux, username, displayName){
+    if(prioritize_username_in_ux){
+      return username;
+    }
+    return displayName;
+  }
 });
diff --git a/assets/javascripts/discourse/templates/components/group-assignments-filter.hbs b/assets/javascripts/discourse/templates/components/group-assignments-filter.hbs
index fb1e704..e052f57 100644
--- a/assets/javascripts/discourse/templates/components/group-assignments-filter.hbs
+++ b/assets/javascripts/discourse/templates/components/group-assignments-filter.hbs
@@ -1,6 +1,6 @@
 {{#if show-avatar}}
   {{#link-to "group.assignments.show" filter.username_lower}}
-    {{avatar filter avatarTemplatePath="avatar_template" usernamePath="username" imageSize="small"}} {{filter.username}}
+    {{avatar filter avatarTemplatePath="avatar_template" usernamePath="username" imageSize="small"}} {{displayName}}
   {{/link-to}}
 {{else}}
   {{#link-to "group.assignments.show" filter}}
diff --git a/assets/javascripts/discourse/templates/group/assignments.hbs b/assets/javascripts/discourse/templates/group/assignments.hbs
index 32c6c96..683ecda 100644
--- a/assets/javascripts/discourse/templates/group/assignments.hbs
+++ b/assets/javascripts/discourse/templates/group/assignments.hbs
@@ -1,13 +1,13 @@
 <section class="user-secondary-navigation">
-    {{#mobile-nav class="activity-nav" desktopClass="action-list activity-list nav-stacked" currentPath=router._router.currentPath}}
-      {{#load-more selector=".activity-nav li" action=(action "loadMore")}}
-        {{group-assignments-filter show-avatar=false filter="everyone" routeType=route_type}}
-        {{#each model.members as |member|}}
-          {{group-assignments-filter show-avatar=true filter=member routeType=route_type}}
-        {{/each}}
-        {{conditional-loading-spinner condition=loading}}
-      {{/load-more}}
-    {{/mobile-nav}}
+  {{#mobile-nav class="activity-nav" desktopClass="action-list activity-list nav-stacked" currentPath=router._router.currentPath}}
+    {{#load-more selector=".activity-nav li" action=(action "loadMore")}}
+      {{group-assignments-filter show-avatar=false filter="everyone" routeType=route_type}}
+      {{#each model.members as |member|}}
+        {{group-assignments-filter show-avatar=true filter=member routeType=route_type}}
+      {{/each}}
+      {{conditional-loading-spinner condition=loading}}
+    {{/load-more}}
+  {{/mobile-nav}}
 </section>
 <section class="user-content">
   {{outlet}}
diff --git a/test/javascripts/components/group-assignments-filter-test.js.es6 b/test/javascripts/components/group-assignments-filter-test.js.es6
new file mode 100644
index 0000000..426bbbb
--- /dev/null
+++ b/test/javascripts/components/group-assignments-filter-test.js.es6
@@ -0,0 +1,48 @@
+import componentTest from "helpers/component-test";
+
+moduleForComponent("group-assignments-filter", { integration: true });
+
+componentTest("display username", {
+  template: "{{group-assignments-filter show-avatar=true filter=filter}}",
+
+  beforeEach() {
+    this.siteSettings.prioritize_username_in_ux = true;
+    this.set("filter", {
+      id: 2,
+      username: "Ahmed",
+      displayName: "Ahmed Gagan",
+      name: "Ahmed Gagan",
+      avatar_template: "/letter_avatar_proxy/v4/letter/a/8c91f0/{size}.png",
+      title: "trust_level_0",
+      last_posted_at: "2020-06-22T10:15:54.532Z",
+      last_seen_at: "2020-07-07T11:55:59.437Z",
+      added_at: "2020-06-22T09:55:31.692Z",
+      timezone: "Asia/Calcutta"
+    });
+  },
+  async test(assert) {
+    assert.ok(find("li")[0].innerText.trim(), "Ahmed");
+  }
+});
+componentTest("display name", {
+  template: "{{group-assignments-filter show-avatar=true filter=filter}}",
+
+  beforeEach() {
+    this.siteSettings.prioritize_username_in_ux = true;
+    this.set("filter", {
+      id: 2,
+      username: "Ahmed",
+      displayName: "Ahmed Gagan",
+      name: "Ahmed Gagan",
+      avatar_template: "/letter_avatar_proxy/v4/letter/a/8c91f0/{size}.png",
+      title: "trust_level_0",
+      last_posted_at: "2020-06-22T10:15:54.532Z",
+      last_seen_at: "2020-07-07T11:55:59.437Z",
+      added_at: "2020-06-22T09:55:31.692Z",
+      timezone: "Asia/Calcutta"
+    });
+  },
+  async test(assert) {
+    assert.ok(find("li")[0].innerText.trim(), "Ahmed Gagan");
+  }
+});