diff --git a/app/assets/javascripts/discourse/widgets/user-notifications-large.js.es6 b/app/assets/javascripts/discourse/widgets/user-notifications-large.js.es6
index 677c3fa2bda..c0797bbbec6 100644
--- a/app/assets/javascripts/discourse/widgets/user-notifications-large.js.es6
+++ b/app/assets/javascripts/discourse/widgets/user-notifications-large.js.es6
@@ -12,8 +12,16 @@ createWidget("large-notification-item", {
   },
 
   html(attrs) {
+    const notificationName =
+      this.site.notificationLookup[attrs.notification_type];
+
+    const widgetNames = [
+      `${notificationName.replace(/_/g, '-')}-notification-item`,
+      "default-notification-item"
+    ];
+
     return [
-      this.attach("default-notification-item", attrs),
+      this.attach(widgetNames, attrs),
       h("span.time", dateNode(attrs.created_at))
     ];
   }
diff --git a/app/assets/javascripts/discourse/widgets/user-notifications.js.es6 b/app/assets/javascripts/discourse/widgets/user-notifications.js.es6
index 19a8c3de5be..ce110081dab 100644
--- a/app/assets/javascripts/discourse/widgets/user-notifications.js.es6
+++ b/app/assets/javascripts/discourse/widgets/user-notifications.js.es6
@@ -88,9 +88,19 @@ export default createWidget("user-notifications", {
     if (state.loading) {
       result.push(h("div.spinner-container", h("div.spinner")));
     } else if (state.notifications.length) {
-      const notificationItems = state.notifications.map(n =>
-        this.attach("default-notification-item", n)
-      );
+      const notificationItems =
+        state.notifications.map(attrs => {
+
+          const notificationName =
+            this.site.notificationLookup[attrs.notification_type];
+
+          const widgetNames = [
+            `${notificationName.replace(/_/g, '-')}-notification-item`,
+            "default-notification-item"
+          ];
+
+          return this.attach(widgetNames, attrs);
+        });
 
       result.push(h("hr"));