diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index edee3b05..be00b93f 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -18,6 +18,7 @@ import { useNavigator } from 'src/stores/navigator';
 import { initLang, initTheme, Lang, setLang } from 'src/utils/ui';
 import { baseUrl } from 'stores/utils';
 import { useNotification } from 'src/stores/notification';
+import moment from 'moment';
 
 const useMyBranch = useMyBranchStore();
 const { fetchListMyBranch } = useMyBranch;
@@ -28,13 +29,6 @@ interface NotificationButton {
   active: boolean;
 }
 
-interface Notification {
-  id: string;
-  title: string;
-  content: string;
-  read: boolean;
-}
-
 const $q = useQuasar();
 const loaderStore = useLoader();
 const navigatorStore = useNavigator();
@@ -82,20 +76,6 @@ const notiMenu = ref<NotificationButton[]>([
     active: false,
   },
 ]);
-const notification = ref<Notification[]>([
-  {
-    id: '1',
-    title: 'Unread',
-    content: 'Unread',
-    read: false,
-  },
-  {
-    id: '3',
-    title: 'Read',
-    content: 'Already read',
-    read: true,
-  },
-]);
 
 function setActive(button: NotificationButton) {
   notiMenu.value = notiMenu.value.map((current) => ({
@@ -290,7 +270,7 @@ onMounted(async () => {
 
           <div class="row q-gutter-x-md items-center" style="margin-left: auto">
             <!-- notification -->
-            <!-- <q-btn
+            <q-btn
               round
               dense
               flat
@@ -329,7 +309,7 @@ onMounted(async () => {
                     @click="setActive(btn)"
                   />
                 </div>
-                <q-infinite-scroll :offset="250">
+                <div style="max-height: 30vh; overflow-y: auto">
                   <div class="caption cursor-pointer">
                     <q-item
                       dense
@@ -337,8 +317,9 @@ onMounted(async () => {
                       class="q-py-sm"
                       v-ripple
                       v-for="(item, i) in !filterUnread
-                        ? notificationData
-                        : notificationData"
+                        ? notificationData.filter((v) => !v.read)
+                        : notificationData.filter((v) => v.read)"
+                      @click="notificationStore.getNotification(item.id)"
                       :key="i"
                     >
                       <q-avatar
@@ -372,17 +353,9 @@ onMounted(async () => {
                       </q-tooltip>
                     </q-item>
                   </div>
-                  <template v-slot:loading>
-                    <div
-                      class="text-center q-my-md"
-                      v-if="noti && noti?.result.length < noti?.total"
-                    >
-                      <q-spinner-dots color="primary" size="40px" />
-                    </div>
-                  </template>
-                </q-infinite-scroll>
+                </div>
               </q-menu>
-            </q-btn> -->
+            </q-btn>
 
             <!-- เปลี่นนภาษา -->
             <q-btn
diff --git a/src/stores/notification/index.ts b/src/stores/notification/index.ts
index a1b2593c..4f3d4cfe 100644
--- a/src/stores/notification/index.ts
+++ b/src/stores/notification/index.ts
@@ -5,10 +5,11 @@ import { PaginationResult } from 'src/types';
 import { createDataRefBase } from '../utils';
 
 export type Notification = {
+  id: string;
   title: string;
   detail: string;
-  receiverId?: string;
-  groupId?: string[];
+  read?: boolean;
+  createdAt: string;
 };
 
 export const useNotification = defineStore('noti-store', () => {