diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index be00b93f..11bb48e7 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -19,6 +19,7 @@ import { initLang, initTheme, Lang, setLang } from 'src/utils/ui';
 import { baseUrl } from 'stores/utils';
 import { useNotification } from 'src/stores/notification';
 import moment from 'moment';
+import { computed } from 'vue';
 
 const useMyBranch = useMyBranchStore();
 const { fetchListMyBranch } = useMyBranch;
@@ -47,7 +48,9 @@ const leftDrawerOpen = ref<boolean>(false);
 const leftDrawerMini = ref(false);
 
 const filterUnread = ref(false);
-const unread = ref<number>(1);
+const unread = computed<number>(
+  () => notificationData.value.filter((v) => !v.read).length || 0,
+);
 // const filterRole = ref<string[]>();
 const userImage = ref<string>();
 const userGender = ref('');
@@ -316,9 +319,9 @@ onMounted(async () => {
                       clickable
                       class="q-py-sm"
                       v-ripple
-                      v-for="(item, i) in !filterUnread
+                      v-for="(item, i) in filterUnread
                         ? notificationData.filter((v) => !v.read)
-                        : notificationData.filter((v) => v.read)"
+                        : notificationData"
                       @click="notificationStore.getNotification(item.id)"
                       :key="i"
                     >