diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 168b895d..edee3b05 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -17,6 +17,7 @@ import { useConfigStore } from 'src/stores/config';
 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';
 
 const useMyBranch = useMyBranchStore();
 const { fetchListMyBranch } = useMyBranch;
@@ -37,8 +38,11 @@ interface Notification {
 const $q = useQuasar();
 const loaderStore = useLoader();
 const navigatorStore = useNavigator();
+const notificationStore = useNotification();
 const configStore = useConfigStore();
 
+const { data: notificationData } = storeToRefs(notificationStore);
+
 const { visible } = storeToRefs(loaderStore);
 const { t } = useI18n({ useScope: 'global' });
 const userStore = useUserStore();
@@ -129,6 +133,14 @@ onMounted(async () => {
 
   await configStore.getConfig();
 
+  {
+    const noti = await notificationStore.getNotificationList();
+
+    if (noti) {
+      notificationData.value = noti.result;
+    }
+  }
+
   await fetchListMyBranch(getUserId() ?? '');
   leftDrawerOpen.value = $q.screen.gt.xs ? true : false;
 
@@ -324,10 +336,10 @@ onMounted(async () => {
                       clickable
                       class="q-py-sm"
                       v-ripple
-                      v-for="item in !filterUnread
-                        ? notification
-                        : notification.filter((v) => !v.read)"
-                      :key="item.id"
+                      v-for="(item, i) in !filterUnread
+                        ? notificationData
+                        : notificationData"
+                      :key="i"
                     >
                       <q-avatar
                         color="positive"
@@ -343,7 +355,7 @@ onMounted(async () => {
                           {{ item.title }}
                         </span>
                         <span class="block ellipsis full-width text-stone">
-                          {{ item.content }}
+                          {{ item.detail }}
                         </span>
                       </div>
                       <span align="right" class="col text-caption text-stone">
@@ -356,7 +368,7 @@ onMounted(async () => {
                         :delay="1000"
                         :offset="[10, 10]"
                       >
-                        {{ item.content }}
+                        {{ item.detail }}
                       </q-tooltip>
                     </q-item>
                   </div>