diff --git a/src/api/api.message.ts b/src/api/api.message.ts
index 21c6813..7bb1e17 100644
--- a/src/api/api.message.ts
+++ b/src/api/api.message.ts
@@ -3,5 +3,6 @@ const message = `${env.API_URI}/message`
 
 export default {
   msgNotificate: `${message}/my-notifications`,
+  msgNotificateTotal: `${message}/my-notifications/noread`,
   msgId: (id: string) => `${message}/my-notifications/${id}`,
 }
diff --git a/src/interface/index/Main.ts b/src/interface/index/Main.ts
index 0d7d259..140ad67 100644
--- a/src/interface/index/Main.ts
+++ b/src/interface/index/Main.ts
@@ -16,7 +16,8 @@ interface notiType {
   id: string
   sender: string
   body: string
-  timereceive: string | null
+  timereceive: Date
+  isOpen: boolean
 }
 
 interface LocationObject {
diff --git a/src/views/MianView.vue b/src/views/MianView.vue
index bf31e6d..37af2fd 100644
--- a/src/views/MianView.vue
+++ b/src/views/MianView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { useQuasar } from 'quasar'
 import keycloak from '@/plugins/keycloak'
@@ -9,7 +9,6 @@ import config from '@/app.config'
 // import Type
 import type { notiType } from '@/interface/index/Main'
 
-
 // import Stores
 import { useCounterMixin } from '@/stores/mixin'
 
@@ -28,52 +27,49 @@ const $q = useQuasar()
 const notiTrigger = ref<boolean>(false)
 const notiList = ref<notiType[]>([])
 const totalNotiList = ref<number>(0)
+const totalNoti = ref<number>(0)
+async function fetchTotolNotificate() {
+  await http
+    .get(config.API.msgNotificateTotal)
+    .then((res) => {
+      totalNoti.value = res.data.result
+    })
+    .catch((err) => {
+      messageError($q, err)
+    })
+}
+
 /** function เรียกข้อมุลแจ้งเตือน */
 async function fetchNotifications(index: number, type: string) {
-  showLoader()
   await http
     .get(config.API.msgNotificate + `?page=${index}&pageSize=${20}`)
     .then((res) => {
       const response = res.data.result.data
+      totalNotiList.value = res.data.result.total
       const list: notiType[] = []
       if (type === 'DEL') {
-        totalNotiList.value = res.data.result.total
-        if (notiList.value.length === 14) {
-          notiList.value = []
-          response.map((e: any) => {
-            list.push({
-              id: e.id,
-              sender:
-                e.createdFullName == '' || e.createdFullName == null
-                  ? 'เจ้าหน้าที่'[0]
-                  : e.createdFullName[0],
-              body: e.body ?? '',
-              timereceive: e.receiveDate ? date2Thai(e.receiveDate) : '-',
-            })
-          })
-          notiList.value.push(...list)
-        }
-      } else {
-        response.map((e: any) => {
-          list.push({
-            id: e.id,
-            sender:
-              e.createdFullName == '' || e.createdFullName == null
-                ? 'เจ้าหน้าที่'[0]
-                : e.createdFullName[0],
-            body: e.body ?? '',
-            timereceive: e.receiveDate ? date2Thai(e.receiveDate) : '-',
-          })
-        })
-        notiList.value.push(...list)
-        totalNotiList.value = res.data.result.total
+        notiList.value = []
       }
+      response.map((e: any) => {
+        list.push({
+          id: e.id,
+          sender:
+            e.createdFullName == '' || e.createdFullName == null
+              ? 'เจ้าหน้าที่'[0]
+              : e.createdFullName[0],
+          body: e.body ?? '',
+          timereceive: e.receiveDate,
+          isOpen: e.isOpen,
+        })
+      })
+      notiList.value.push(...list)
+      totalNotiList.value = res.data.result.total
     })
     .catch((err) => {
       messageError($q, err)
     })
     .finally(() => {
-      hideLoader()
+      // hideLoader()
     })
 }
 
@@ -87,13 +83,14 @@ async function onClickDelete(id: string, index: number) {
       .delete(config.API.msgId(id))
       .then(() => {
         notiList.value.splice(index, 1)
+        totalNotiList.value--
         success($q, 'ลบข้อมูลสำเร็จ')
       })
       .catch((e) => {
         messageError($q, e)
       })
       .finally(async () => {
-        fetchNotifications(1, 'DEL')
+        notiList.value.length === 14 && fetchNotifications(1, 'DEL')
         hideLoader()
       })
   })
@@ -112,26 +109,41 @@ function onClickLogout() {
   })
 }
 
+const thaiOptions: Intl.DateTimeFormatOptions = {
+  hour: '2-digit',
+  minute: '2-digit',
+}
+const page = ref<number>(0)
 function onLoad(index: any, done: any) {
-  if (notiList.value.length < totalNotiList.value) {
+  if (
+    notiList.value.length < totalNotiList.value ||
+    (notiList.value.length == 0 && totalNotiList.value === 0)
+  ) {
+    page.value++
     setTimeout(() => {
-      fetchNotifications(index + 1, 'NOMAL')
+      fetchNotifications(page.value, 'NOMAL')
       done()
-    }, 2000)
+    }, 1500)
   }
 }
 
-// class
-const getClass = (val: boolean) => {
-  return {
-    'bg-primary text-white col-12 row items-center q-px-md q-py-sm': val,
-    'bg-red-9 text-white col-12 row items-center q-px-md q-py-sm': !val,
+watch(
+  () => notiTrigger.value,
+  () => {
+    if (!notiTrigger.value) {
+      const updatedNotifications = notiList.value.map((item) => ({
+        ...item,
+        isOpen: true,
+      }))
+      notiList.value = updatedNotifications
+      fetchTotolNotificate()
+    }
   }
-}
+)
 
 const fullName = ref<string>('')
 onMounted(async () => {
-  await fetchNotifications(1, 'NOMAL')
+  fetchTotolNotificate()
   if (keycloak.tokenParsed != null) {
     fullName.value = keycloak.tokenParsed.name
   }
@@ -146,7 +158,7 @@ onMounted(async () => {
         :style="$q.screen.gt.xs ? 'padding: 1% 2%;' : 'padding: 1% 4%;'"
       >
         <div class="row items-center">
-          <q-avatar style="background: linear-gradient(#4CE2D3, #02A998);">
+          <q-avatar style="background: linear-gradient(#4ce2d3, #02a998)">
             <q-img
               src="@/assets/logo1.png"
               spinner-color="white"
@@ -173,32 +185,33 @@ onMounted(async () => {
           color="white"
           @click="router.push('/history')"
         />
-        <q-btn
-          round
-          dense
-          flat
-          size="13px"
-          class="q-mx-md"
-          :disable="totalNotiList == 0"
-        >
+        <q-btn round dense flat size="13px" class="q-mx-md">
           <q-icon name="notifications" size="24px" color="white" />
 
           <q-badge
             rounded
-            v-show="totalNotiList !== 0"
+            v-show="totalNoti !== 0"
             color="negative"
             text-color="white"
             floating
-            >{{ totalNotiList }}</q-badge
+            >{{ totalNoti }}</q-badge
+          >
+
+          <q-menu
+            v-model="notiTrigger"
+            anchor="bottom middle"
+            self="top middle"
+            class="q-mx-lg q-mt-xl"
+            style="height: 500px; width: 480px"
           >
-          <q-menu v-model="notiTrigger" 
-          anchor="bottom middle" self="top middle" class=" q-mx-lg q-mt-xl">
             <div class="q-px-md q-py-sm row col-12 items-center">
-              <div class="text-subtitle1 text-weight-medium">
-                การแจ้งเตือน
+              <div class="text-subtitle1 text-weight-medium">การแจ้งเตือน</div>
+              <q-space />
+              <div class="text-grey-5" style="font-size: 12px">
+                ทั้งหมด {{ totalNotiList }} ข้อความ
               </div>
             </div>
-            <q-infinite-scroll @load="onLoad" style="max-height: 500px; overflow: auto;">
+            <q-infinite-scroll @load="onLoad">
               <div
                 v-for="(item, index) in notiList"
                 :key="index"
@@ -213,20 +226,36 @@ onMounted(async () => {
                       text-color="white"
                     >
                       <span class="text-weight-medium text-uppercase">{{
-                        item.sender[0]
+                        item.body[0]
                       }}</span>
                     </q-avatar>
                   </q-item-section>
                   <q-item-section>
-                    <q-item-label caption class="text-black">{{
-                      item.body
-                    }}</q-item-label>
                     <q-item-label
+                      caption
+                      :class="
+                        item.isOpen
+                          ? 'text-grey-7'
+                          : 'text-black text-weight-medium'
+                      "
+                      >{{ item.body }}</q-item-label
+                    >
+                    <q-item-label caption class="text-weight-light">
+                      {{ date2Thai(item.timereceive) }}
+                      {{
+                        new Date(item.timereceive).toLocaleTimeString(
+                          'th-TH',
+                          thaiOptions
+                        )
+                      }}
+                      น. <q-space />
+                    </q-item-label>
+                    <!-- <q-item-label
                       caption
                       class="row items-center text-grey-7"
                       style="font-size: 12px"
                       >{{ item.timereceive }}</q-item-label
-                    >
+                    > -->
                   </q-item-section>
                   <div>
                     <q-btn
@@ -241,41 +270,54 @@ onMounted(async () => {
                 </q-item>
               </div>
 
-              <template v-slot:loading v-if="notiList.length < totalNotiList">
+              <template
+                v-slot:loading
+                v-if="
+                  notiList.length < totalNotiList ||
+                  (notiList.length === 0, totalNotiList === 0)
+                "
+              >
                 <div class="row justify-center q-my-md">
                   <q-spinner-dots color="primary" size="40px" />
                 </div>
               </template>
-              </q-infinite-scroll>
-            </q-menu>
-          </q-btn>
-          <q-btn round dense color="white" flat icon="account_circle" style="font-size: 16px">
-            <q-menu>
-              <div class="q-pa-md" style="max-width: 500px">
-                <q-list>
-                  <q-item>
-                    <q-item-section avatar>
-                      <q-icon color="primary" name="account_circle" />
-                    </q-item-section>
+            </q-infinite-scroll>
+          </q-menu>
+        </q-btn>
+        <q-btn
+          round
+          dense
+          color="white"
+          flat
+          icon="account_circle"
+          style="font-size: 16px"
+        >
+          <q-menu>
+            <div class="q-pa-md" style="max-width: 500px">
+              <q-list>
+                <q-item>
+                  <q-item-section avatar>
+                    <q-icon color="primary" name="account_circle" />
+                  </q-item-section>
 
-                    <q-item-section>{{ fullName }}</q-item-section>
-                  </q-item>
+                  <q-item-section>{{ fullName }}</q-item-section>
+                </q-item>
 
-                  <q-item class="text-center">
-                    <q-item-section>
-                      <q-item-label>
-                        <q-btn
-                          color="primary"
-                          label="ออกจากระบบ"
-                          push
-                          size="sm"
-                          @click="onClickLogout"
-                      /></q-item-label>
-                    </q-item-section>
-                  </q-item>
-                </q-list>
-              </div> </q-menu
-          ></q-btn>
+                <q-item class="text-center">
+                  <q-item-section>
+                    <q-item-label>
+                      <q-btn
+                        color="primary"
+                        label="ออกจากระบบ"
+                        push
+                        size="sm"
+                        @click="onClickLogout"
+                    /></q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </div> </q-menu
+        ></q-btn>
       </q-toolbar>
     </q-header>
     <div