diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index 0907b056..1323e86e 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -114,7 +114,7 @@ async function getDataNotification(index: number, type: string) {
     .get(config.API.msgNotificate + `?page=${index}&pageSize=${15}`)
     .then((res) => {
       const response = res.data.result.data;
-      totalInbox.value = res.data.result.total;
+      totalInbox.value = res.data.result.total || 0;
       let list: notiType[] = [];
       if (type === "DEL") {
         notiList.value = [];
@@ -405,6 +405,26 @@ onBeforeMount(async () => {
   }
 });
 
+function handleDeleteNotification() {
+  dialogRemove(
+    $q,
+    async () => {
+      try {
+        showLoader();
+        await http.delete(config.API.msgNotificate);
+        await getDataNotification(1, "DEL");
+        success($q, "ลบข้อมูลสำเร็จ");
+      } catch (error) {
+        messageError($q, error);
+      } finally {
+        hideLoader();
+      }
+    },
+    "ยืนยันการลบข้อมูล",
+    "ต้องการยืนยันการลบรายการแจ้งเตือนทั้งหมดใช่หรือไม่?",
+  );
+}
+
 /**
  * เมื่อเริ่มต้นโปรแกรมให้ฟัง event resize และ function myEventHandler
  * set function myEventHandler เพราะ state ยังไม่เซ็ท , state เซ็ทเมื่อ หน้าจอเริ่ม ขยับหน้าจอ
@@ -510,6 +530,17 @@ onUnmounted(() => {
               <div class="text-grey-5" style="font-size: 12px">
                 ทั้งหมด {{ totalInbox }} ข้อความ
               </div>
+              <q-btn
+                v-if="totalInbox !== 0"
+                flat
+                dense
+                round
+                color="red"
+                icon="delete"
+                @click.stop.prevent="handleDeleteNotification"
+              >
+                <q-tooltip>ลบการแจ้งเตือนทั้งหมด</q-tooltip>
+              </q-btn>
             </div>
 
             <q-infinite-scroll