diff --git a/server/model/monitor.js b/server/model/monitor.js
index 062f3406..f92e43e7 100644
--- a/server/model/monitor.js
+++ b/server/model/monitor.js
@@ -8,7 +8,7 @@ const axios = require("axios");
 const {tcping, ping} = require("../util-server");
 const {R} = require("redbean-node");
 const {BeanModel} = require("redbean-node/dist/bean-model");
-
+const {Notification} = require("../notification")
 
 /**
  * status:
@@ -17,7 +17,18 @@ const {BeanModel} = require("redbean-node/dist/bean-model");
  */
 class Monitor extends BeanModel {
 
-    toJSON() {
+    async toJSON() {
+
+        let notificationIDList = {};
+
+        let list = await R.find("monitor_notification", " monitor_id = ? ", [
+            this.id
+        ])
+
+        for (let bean of list) {
+            notificationIDList[bean.notification_id] = true;
+        }
+
         return {
             id: this.id,
             name: this.name,
@@ -29,6 +40,7 @@ class Monitor extends BeanModel {
             type: this.type,
             interval: this.interval,
             keyword: this.keyword,
+            notificationIDList
         };
     }
 
@@ -96,6 +108,28 @@ class Monitor extends BeanModel {
             // Mark as important if status changed
             if (! previousBeat || previousBeat.status !== bean.status) {
                 bean.important = true;
+
+                let notificationList = await R.getAll(`SELECT notification.* FROM notification, monitor_notification WHERE monitor_id = ? `, [
+                    this.id
+                ])
+
+                let promiseList = [];
+
+                let text;
+                if (bean.status === 1) {
+                    text = "✅ Up"
+                } else {
+                    text = "🔴 Down"
+                }
+
+                let msg = `[${this.name}] [${text}] ${bean.msg}`;
+
+                for(let notification of notificationList) {
+                    promiseList.push(Notification.send(JSON.parse(notification.config), msg));
+                }
+
+                await Promise.all(promiseList);
+
             } else {
                 bean.important = false;
             }
diff --git a/server/server.js b/server/server.js
index bf30ec81..27a4951d 100644
--- a/server/server.js
+++ b/server/server.js
@@ -111,12 +111,17 @@ let monitorList = {};
         socket.on("add", async (monitor, callback) => {
             try {
                 checkLogin(socket)
-
                 let bean = R.dispense("monitor")
+
+                let notificationIDList = monitor.notificationIDList;
+                delete monitor.notificationIDList;
+
                 bean.import(monitor)
                 bean.user_id = socket.userID
                 await R.store(bean)
 
+                await updateMonitorNotification(bean.id, notificationIDList)
+
                 await startMonitor(socket.userID, bean.id);
                 await sendMonitorList(socket);
 
@@ -154,6 +159,8 @@ let monitorList = {};
 
                 await R.store(bean)
 
+                await updateMonitorNotification(bean.id, monitor.notificationIDList)
+
                 if (bean.active) {
                     await restartMonitor(socket.userID, bean.id)
                 }
@@ -188,7 +195,7 @@ let monitorList = {};
 
                 callback({
                     ok: true,
-                    monitor: bean.toJSON(),
+                    monitor: await bean.toJSON(),
                 });
 
             } catch (e) {
@@ -391,6 +398,21 @@ let monitorList = {};
 
 })();
 
+async function updateMonitorNotification(monitorID, notificationIDList) {
+    R.exec("DELETE FROM monitor_notification WHERE monitor_id = ? ", [
+        monitorID
+    ])
+
+    for (let notificationID in notificationIDList) {
+        if (notificationIDList[notificationID]) {
+            let relation = R.dispense("monitor_notification");
+            relation.monitor_id = monitorID;
+            relation.notification_id = notificationID;
+            await R.store(relation)
+        }
+    }
+}
+
 async function checkOwner(userID, monitorID) {
     let row = await R.getRow("SELECT id FROM monitor WHERE id = ? AND user_id = ? ", [
         monitorID,
@@ -445,7 +467,7 @@ async function getMonitorJSONList(userID) {
     ])
 
     for (let monitor of monitorList) {
-        result[monitor.id] = monitor.toJSON();
+        result[monitor.id] = await monitor.toJSON();
     }
 
     return result;
diff --git a/src/components/NotificationDialog.vue b/src/components/NotificationDialog.vue
index 1078195c..2dc58eb3 100644
--- a/src/components/NotificationDialog.vue
+++ b/src/components/NotificationDialog.vue
@@ -41,7 +41,11 @@
                                 </div>
 
                                 <div class="form-text">
+                                    Support Direct Chat / Group / Channel's Chat ID
+
+                                    <p style="margin-top: 8px;">
                                     You can get your chat id by sending message to the bot and go to this url to view the chat_id:
+                                    </p>
 
                                     <p style="margin-top: 8px;">
 
@@ -59,7 +63,7 @@
 
                     </div>
                     <div class="modal-footer">
-                        <button type="button" class="btn btn-danger" @click="deleteNotification" :disabled="processing" v-if="id">Delete</button>
+                        <button type="button" class="btn btn-danger" @click="deleteConfirm" :disabled="processing" v-if="id">Delete</button>
                         <button type="button" class="btn btn-warning" @click="test" :disabled="processing">Test</button>
                         <button type="submit" class="btn btn-primary" :disabled="processing">Save</button>
                     </div>
@@ -68,6 +72,8 @@
         </div>
 
     </form>
+
+    <Confirm ref="confirmDelete" @yes="deleteNotification" btn-style="btn-danger">Are you sure want to delete this notification for all monitors?</Confirm>
 </template>
 
 <script>
@@ -75,9 +81,11 @@ import { Modal } from 'bootstrap'
 import { ucfirst } from "../../server/util";
 import axios from "axios";
 import { useToast } from 'vue-toastification'
+import Confirm from "./Confirm.vue";
 const toast = useToast()
 
 export default {
+    components: {Confirm},
     props: {
 
     },
@@ -104,6 +112,11 @@ export default {
     },
     methods: {
 
+        deleteConfirm() {
+            this.modal.hide();
+            this.$refs.confirmDelete.show()
+        },
+
         show(notificationID) {
             if (notificationID) {
                 this.id = notificationID;
@@ -166,7 +179,15 @@ export default {
 
                 if (res.data.result.length >= 1) {
                     let update = res.data.result[res.data.result.length - 1]
-                    this.notification.telegramChatID = update.message.chat.id;
+
+                    if (update.channel_post) {
+                        this.notification.telegramChatID = update.channel_post.chat.id;
+                    } else if (update.message) {
+                        this.notification.telegramChatID = update.message.chat.id;
+                    } else {
+                        throw new Error("Chat ID is not found, please send a message to this bot first")
+                    }
+
                 } else {
                     throw new Error("Chat ID is not found, please send a message to this bot first")
                 }
diff --git a/src/pages/EditMonitor.vue b/src/pages/EditMonitor.vue
index 5537af2d..1128ef5a 100644
--- a/src/pages/EditMonitor.vue
+++ b/src/pages/EditMonitor.vue
@@ -58,8 +58,12 @@
                 <p v-if="$root.notificationList.length === 0">Not available, please setup.</p>
 
                 <div class="form-check form-switch mb-3" v-for="notification in $root.notificationList">
-                    <input class="form-check-input" type="checkbox" :id=" 'notification' + notification.id">
-                    <label class="form-check-label" :for=" 'notification' + notification.id">{{ notification.name }} <a href="#" @click="$refs.notificationDialog.show(notification.id)">Edit</a></label>
+                    <input class="form-check-input" type="checkbox" :id=" 'notification' + notification.id" v-model="monitor.notificationIDList[notification.id]">
+
+                    <label class="form-check-label" :for=" 'notification' + notification.id">
+                        {{ notification.name }}
+                        <a href="#" @click="$refs.notificationDialog.show(notification.id)">Edit</a>
+                    </label>
                 </div>
 
                 <button class="btn btn-primary me-2" @click="$refs.notificationDialog.show()" type="button">Setup Notification</button>
@@ -86,7 +90,9 @@ export default {
     data() {
         return {
             processing: false,
-            monitor: { }
+            monitor: {
+                notificationIDList: {},
+            },
         }
     },
     computed: {
@@ -109,6 +115,7 @@ export default {
                     name: "",
                     url: "https://",
                     interval: 60,
+                    notificationIDList: {},
                 }
             } else if (this.isEdit) {
                 this.$root.getSocket().emit("getMonitor", this.$route.params.id, (res) => {
diff --git a/src/pages/Settings.vue b/src/pages/Settings.vue
index c52dffab..0ca613d2 100644
--- a/src/pages/Settings.vue
+++ b/src/pages/Settings.vue
@@ -52,20 +52,30 @@
 
             <div class="col-md-6">
                 <h2>Notifications</h2>
-                <p>Empty</p>
-                <button class="btn btn-primary" type="submit">Add Notification</button>
+                <p v-if="$root.notificationList.length === 0">Not available, please setup.</p>
+
+                <ul>
+                    <li  v-for="notification in $root.notificationList">
+                        {{ notification.name }}
+                        <a href="#" @click="$refs.notificationDialog.show(notification.id)">Edit</a>
+                    </li>
+                </ul>
+
+                <button class="btn btn-primary me-2" @click="$refs.notificationDialog.show()" type="button">Setup Notification</button>
             </div>
 
+
         </div>
     </div>
 
-
+    <NotificationDialog ref="notificationDialog" />
 </template>
 
 <script>
 import dayjs from "dayjs";
 import utc  from 'dayjs/plugin/utc'
 import timezone  from 'dayjs/plugin/timezone'
+import NotificationDialog from "../components/NotificationDialog.vue";
 dayjs.extend(utc)
 dayjs.extend(timezone)
 import {timezoneList} from "../util-frontend";
@@ -74,7 +84,7 @@ const toast = useToast()
 
 export default {
     components: {
-
+        NotificationDialog
     },
     data() {
         return {