diff --git a/erpnext/public/js/hub/components/notification_message.js b/erpnext/public/js/hub/components/notification_message.js
new file mode 100644
index 0000000..890c298
--- /dev/null
+++ b/erpnext/public/js/hub/components/notification_message.js
@@ -0,0 +1,20 @@
+const NotificationMessage = (message) => {
+    const $message = $(`<div class="subpage-message">
+        <p class="text-muted flex">
+            <span>
+                ${message}
+            </span>
+            <i class="octicon octicon-x text-extra-muted"></i>
+        </p>
+    </div>`);
+
+    $message.find('.octicon-x').on('click', () => {
+        $message.remove();
+    });
+
+    return $message;
+}
+
+export {
+    NotificationMessage
+}
diff --git a/erpnext/public/js/hub/pages/publish.js b/erpnext/public/js/hub/pages/publish.js
index 46e4545..8de7b38 100644
--- a/erpnext/public/js/hub/pages/publish.js
+++ b/erpnext/public/js/hub/pages/publish.js
@@ -212,23 +212,6 @@
 		//
 	}
 
-	show_message(message) {
-		const $message = $(`<div class="subpage-message">
-			<p class="text-muted flex">
-				<span>
-					${message}
-				</span>
-				<i class="octicon octicon-x text-extra-muted"></i>
-			</p>
-		</div>`);
-
-		$message.find('.octicon-x').on('click', () => {
-			$message.remove();
-		});
-
-		this.$wrapper.prepend($message);
-	}
-
 	make_publish_in_progress_state() {
 		this.$wrapper.empty();
 
diff --git a/erpnext/public/js/hub/pages/subpage.js b/erpnext/public/js/hub/pages/subpage.js
index 7c75b13..fd05838 100644
--- a/erpnext/public/js/hub/pages/subpage.js
+++ b/erpnext/public/js/hub/pages/subpage.js
@@ -1,3 +1,5 @@
+import { NotificationMessage } from '../components/notification_message';
+
 export default class SubPage {
 	constructor(parent, options) {
 		this.$parent = $(parent);
@@ -42,4 +44,8 @@
 	hide() {
 		this.$wrapper.hide();
 	}
+
+	show_message(message) {
+		this.$wrapper.prepend(NotificationMessage(message));
+	}
 }