diff --git a/app/assets/javascripts/discourse/widgets/post.js.es6 b/app/assets/javascripts/discourse/widgets/post.js.es6
index 956dafd3583..da63b16d971 100644
--- a/app/assets/javascripts/discourse/widgets/post.js.es6
+++ b/app/assets/javascripts/discourse/widgets/post.js.es6
@@ -431,15 +431,25 @@ createWidget("post-contents", {
 createWidget("post-notice", {
   tagName: "div.post-notice",
 
+  buildClasses(attrs) {
+    if (attrs.postNoticeType === "first") {
+      return ["new-user"];
+    } else if (attrs.postNoticeType === "returning") {
+      return ["returning-user"];
+    }
+    return [];
+  },
+
   html(attrs) {
+    const user = this.siteSettings.prioritize_username_in_ux || !attrs.name ? attrs.username : attrs.name;
     let text, icon;
     if (attrs.postNoticeType === "first") {
       icon = "hands-helping";
-      text = I18n.t("post.notice.first", { user: attrs.username });
+      text = I18n.t("post.notice.first", { user });
     } else if (attrs.postNoticeType === "returning") {
       icon = "far-smile";
       text = I18n.t("post.notice.return", {
-        user: attrs.username,
+        user,
         time: relativeAge(attrs.postNoticeTime, {
           format: "tiny",
           addAgo: true
diff --git a/test/javascripts/widgets/post-test.js.es6 b/test/javascripts/widgets/post-test.js.es6
index 5dc1b8ad50d..6c0c7faad46 100644
--- a/test/javascripts/widgets/post-test.js.es6
+++ b/test/javascripts/widgets/post-test.js.es6
@@ -853,21 +853,43 @@ widgetTest("pm map", {
   }
 });
 
-widgetTest("post notice", {
+widgetTest("post notice - with username", {
   template: '{{mount-widget widget="post" args=args}}',
   beforeEach() {
+    this.siteSettings.prioritize_username_in_ux = true;
     this.set("args", {
       postNoticeType: "returning",
       postNoticeTime: new Date("2010-01-01 12:00:00 UTC"),
-      username: "codinghorror"
+      username: "codinghorror",
+      name: "Jeff"
     });
   },
   test(assert) {
     assert.equal(
-      find(".post-notice")
+      find(".post-notice.returning-user")
         .text()
         .trim(),
       I18n.t("post.notice.return", { user: "codinghorror", time: "Jan '10" })
     );
   }
 });
+
+widgetTest("post notice - with name", {
+  template: '{{mount-widget widget="post" args=args}}',
+  beforeEach() {
+    this.siteSettings.prioritize_username_in_ux = false;
+    this.set("args", {
+      postNoticeType: "first",
+      username: "codinghorror",
+      name: "Jeff"
+    });
+  },
+  test(assert) {
+    assert.equal(
+      find(".post-notice.new-user")
+        .text()
+        .trim(),
+      I18n.t("post.notice.first", { user: "Jeff", time: "Jan '10" })
+    );
+  }
+});