diff --git a/packages/ui-default/components/message/index.page.ts b/packages/ui-default/components/message/index.page.ts
index 6914a140e..b73698002 100644
--- a/packages/ui-default/components/message/index.page.ts
+++ b/packages/ui-default/components/message/index.page.ts
@@ -8,7 +8,6 @@ import { i18n, tpl } from 'vj/utils';
 
 const onmessage = (msg) => {
   console.log('Received message', msg);
-  if (document.hidden) return false;
   if (msg.mdoc.flag & FLAG_ALERT) {
     // Is alert
     new InfoDialog({
@@ -21,6 +20,7 @@ const onmessage = (msg) => {
     }).open();
     return true;
   }
+  if (document.hidden) return false;
   // Is message
   new VjNotification({
     ...(msg.udoc._id === 1 && msg.mdoc.flag & 4)
diff --git a/packages/ui-default/components/notification/index.js b/packages/ui-default/components/notification/index.ts
similarity index 78%
rename from packages/ui-default/components/notification/index.js
rename to packages/ui-default/components/notification/index.ts
index 3709dbbaf..f1ad49f2b 100644
--- a/packages/ui-default/components/notification/index.js
+++ b/packages/ui-default/components/notification/index.ts
@@ -12,12 +12,28 @@ export const AppToaster = Toaster.create({
   className: 'recipe-toaster',
   position: Position.LEFT_BOTTOM,
   usePortal: true,
-}, ToasterContainer);
+} as any, ToasterContainer);
+
+interface NotificationOptions {
+  avatar?: string;
+  title?: string;
+  message: string;
+  type?: string;
+  duration?: number;
+  action?: any;
+}
 
 export default class Notification {
+  type: string;
+  action: any;
+  $dom: JQuery<HTMLElement>;
+  $n: JQuery<HTMLElement>;
+  duration: number;
+  autoHideTimer?: NodeJS.Timeout;
+
   constructor({
     avatar, title, message, type = '', duration = 3000, action,
-  }) {
+  }: NotificationOptions) {
     this.type = type;
     if (avatar) this.type += ' avatar';
     if (title) this.type += ' title';
@@ -49,19 +65,19 @@ export default class Notification {
     setTimeout(() => this.$n.remove(), 200);
   }
 
-  static success(message, duration) {
+  static success(message: string, duration?: number) {
     return AppToaster.show({ message, timeout: duration, intent: Intent.SUCCESS });
   }
 
-  static info(message, duration) {
+  static info(message: string, duration?: number) {
     return AppToaster.show({ message, timeout: duration, intent: Intent.PRIMARY });
   }
 
-  static warn(message, duration) {
+  static warn(message: string, duration?: number) {
     return AppToaster.show({ message, timeout: duration, intent: Intent.WARNING });
   }
 
-  static error(message, duration) {
+  static error(message: string, duration?: number) {
     return AppToaster.show({ message, timeout: duration, intent: Intent.DANGER });
   }
 }
diff --git a/packages/ui-default/templates/layout/basic.html b/packages/ui-default/templates/layout/basic.html
index 0f179e580..c9c022c37 100644
--- a/packages/ui-default/templates/layout/basic.html
+++ b/packages/ui-default/templates/layout/basic.html
@@ -7,7 +7,7 @@
   {% if UserContext %}{% include "partials/header_mobile.html" %}{% endif %}
   <div class="main">
     {% for item in ui.getNodes('Notification').concat(notification or []) %}{% if item.checker(handler) %}
-      <div class="row"><blockquote class="{{ item.args.type }}">{{ _(item.name).format(item.args.args or []) }}</blockquote></div>
+      <div class="row typo"><blockquote class="{{ item.args.type }}">{{ _(item.name).format(item.args.args or [])|nl2br|safe }}</blockquote></div>
     {% endif %}{% endfor %}
     {% block content %}{% endblock %}
   </div>