diff --git a/src/api/index.js b/src/api/index.js
index a7c22ea..d138085 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -43,6 +43,7 @@ export default {
   ORDER_DATE_PROFIT: "/order/date-profit",
 
   // notification
-  NOTIFICATION_LIST: "/notification/history"
-
+  NOTIFICATION_LIST: "/notification/history",
+  NOTIFICATION_UNREAD: "/notification/un-read",
+  NOTIFICATION_READ: "/notification/read",
 };
diff --git a/src/components/mine/Mine.vue b/src/components/mine/Mine.vue
index 4101fa1..7c0fe55 100644
--- a/src/components/mine/Mine.vue
+++ b/src/components/mine/Mine.vue
@@ -19,6 +19,7 @@ const { userInfo, isLogin } = storeToRefs(userStore);
 const loadingMoney = ref(false);
 const loadingScore = ref(false);
 const showVipTable = ref(false);
+const countNotify = ref(0);
 
 const withdrawLink = computed(() => {
   return userInfo?.value?.isSetBank ? "/withdraw" : "/Setbank";
@@ -53,6 +54,18 @@ const loadScore = () => {
       }, 500);
     });
 };
+
+const getUnreadNotifications = () => {
+  handleRequest(axios.get(API.NOTIFICATION_UNREAD))
+    .then((res) => {
+      if(res.success) {
+        countNotify.value = res.data;
+      }
+    })
+};
+
+getUnreadNotifications();
+
 </script>
 <template>
   <div class="mine page">
@@ -221,6 +234,9 @@ const loadScore = () => {
               />
             </div>
             <span class="menu-item-label">Thông báo</span>
+            <van-tag :show="countNotify" size="large" type="danger" style="font-size: 14px; padding: 5px;" round>
+              {{ countNotify }}
+            </van-tag>
           </router-link>
           <div
             class="menu-item"
diff --git a/src/components/mine/Noitice.vue b/src/components/mine/Noitice.vue
index b8a1df3..ac15fc2 100644
--- a/src/components/mine/Noitice.vue
+++ b/src/components/mine/Noitice.vue
@@ -47,6 +47,15 @@ const getData = async () => {
   return [];
 };
 
+const read = async (idx) => {
+  const id = list.value[idx]?._id;
+  if (!id) return;
+  const res = await handleRequest(axios.get(API.NOTIFICATION_READ + "/" + id));
+  if (res.success) {
+    list.value[idx].read = 1;
+  }
+};
+
 onRefresh();
 </script>
 
@@ -84,10 +93,27 @@ onRefresh();
           finished-text=""
           @load="onLoad"
         >
-          <div v-for="item in list" :key="item" class="listItem">
+          <div v-for="(item, index) in list" :key="index" class="listItem">
             <div class="listTitle">{{ item.title }}</div>
             <div class="listContent html">
               <p v-html="item.content"></p>
+              <div style="text-align: right" v-if="!item.read">
+                <van-tag
+                  :show="countNotify"
+                  round
+                  size="large"
+                  type="warning"
+                  style="
+                    font-size: 14px;
+                    padding: 5px;
+                    margin: 8px 0;
+                    cursor: pointer;
+                  "
+                  @click="read(index)"
+                >
+                  Đánh dấu đã đọc
+                </van-tag>
+              </div>
             </div>
             <div class="listTime">
               <div class="listTimeText">