diff --git a/src/api/index.js b/src/api/index.js
index 8815ae8..a7c22ea 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -40,6 +40,9 @@ export default {
   // order
   ORDER_HISTORY: "order/history",
   ORDER: "/order",
-  ORDER_DATE_PROFIT: "/order/date-profit"
+  ORDER_DATE_PROFIT: "/order/date-profit",
+
+  // notification
+  NOTIFICATION_LIST: "/notification/history"
 
 };
diff --git a/src/components/mine/Noitice.vue b/src/components/mine/Noitice.vue
index 30696e3..4919dc5 100644
--- a/src/components/mine/Noitice.vue
+++ b/src/components/mine/Noitice.vue
@@ -1,9 +1,61 @@
+<script setup>
+import { reactive, ref } from "vue";
+import axios from "@/axios";
+import API from "@/api";
+import { handleRequest } from "@/helpers/request";
+import { formatNumber, formatDateTime } from "@/helpers/format";
+import { showToast } from "vant";
+
+const list = ref([]);
+const loading = ref(false);
+const finished = ref(false);
+const refreshing = ref(false);
+
+const params = reactive({
+  page: 1,
+  size: 10,
+});
+
+const onLoad = async () => {
+  const data = await getData();
+  loading.value = false;
+  if (data.length < params.size) {
+    finished.value = true;
+  }
+  if (refreshing.value) {
+    list.value = data;
+    refreshing.value = false;
+    return showToast("Làm mới thành công.");
+  }
+  list.value.unshift(...data);
+};
+
+const onRefresh = () => {
+  params.page = 1;
+  list.value = [];
+  finished.value = false;
+  loading.value = true;
+  onLoad();
+};
+
+const getData = async () => {
+  const res = await handleRequest(axios.get(API.NOTIFICATION_LIST, { params }));
+  if (res.success) {
+    params.page += 1;
+    return res.data.data;
+  }
+  return [];
+};
+
+onRefresh();
+</script>
+
 <template>
   <div class="container page">
     <div class="header">
       <div class="nav-bar van-nav-bar">
         <div class="van-nav-bar__content">
-          <div @click="$router.go(-1)" class="van-nav-bar__left">
+          <div @click="$router.push('/mine')" class="van-nav-bar__left">
             <i
               class="van-icon van-icon-arrow-left"
               style="color: rgb(255, 255, 255)"
@@ -14,25 +66,33 @@
       </div>
     </div>
     <div class="content">
-      <div class="van-pull-refresh">
-        <div class="van-pull-refresh__track" style="transition-duration: 0ms">
-          <div class="van-pull-refresh__head"></div>
-          <div class="listItem">
-            <div class="listTitle">Hoạt động trên không</div>
-            <div class="listContent html">
-              <p>
-                Chúng tôi là CANALIS CLUB - Một quán Bar lớn . Phục vụ tận nơi
-                tại 63 tỉnh thành trên toàn quốc . Chúng tôi có những người mẫu
-                cao cấp, tiếp viên hàng không, du học sinh.... Sẵn sàng phục vụ
-                quý khách hàng !<br />
-              </p>
-            </div>
+      <van-pull-refresh
+        v-model="refreshing"
+        @refresh="onRefresh"
+        pulling-text="Kéo lên để làm mới..."
+        loading-text="Đang tải..."
+        loosing-text="Phát hiện có thể làm mới được"
+        style="height: 100%; overflow: auto"
+      >
+        <van-empty description="Dữ liệu trống" v-if="!list.length" />
+        <van-list
+          v-else
+          v-model:loading="loading"
+          error-text="Lỗi"
+          loading-text="Đang tải..."
+          :finished="finished"
+          finished-text=""
+          @load="onLoad"
+        >
+          <div v-for="item in list" :key="item" class="listItem">
+            <div class="listTitle">{{ item.title }}</div>
+            <div class="listContent html" v-html="item.content"></div>
             <div class="listTime">
-              <div class="listTimeText">2023-07-05 23:06:33</div>
+              <div class="listTimeText">{{ formatDateTime(item.createdAt) }}</div>
             </div>
           </div>
-        </div>
-      </div>
+        </van-list>
+      </van-pull-refresh>
     </div>
   </div>
 </template>