diff --git a/src/api/types.ts b/src/api/types.ts
index 76b1bec..ef56764 100644
--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -80,6 +80,10 @@ export type HoldingsData = Treaty.Data<typeof client.api.rwa.holdings.get>;
 
 export type HoldingItem = HoldingsData extends { data: Array<infer T> } ? T : HoldingsData extends Array<infer T> ? T : never;
 
+export type NotificationData = Treaty.Data<typeof client.api.notifications.get>["data"][number];
+
+export type NotificationBody = TreatyQuery<typeof client.api.notifications.get>;
+
 /**
  * 应用版本信息
  */
diff --git a/src/views/notify/detail.vue b/src/views/notify/detail.vue
index 96013d5..4e2f23d 100644
--- a/src/views/notify/detail.vue
+++ b/src/views/notify/detail.vue
@@ -1,24 +1,13 @@
 <script setup lang="ts">
-import IcBaselineNotificationsNone from "~icons/ic/baseline-notifications-none";
-import { mockClient } from "@/api";
+import { client, safeClient } from "@/api";
+import { NotificationTypeIcon } from "./enum";
 
 const props = defineProps<{ id: string }>();
-const router = useRouter();
 
-const { data: allNotifications } = await mockClient("notify.list");
+const { data } = await safeClient(client.api.notifications({ id: props.id }).get());
 
-const notification = computed(() => {
-  return allNotifications.value.find(item => String(item.id) === props.id);
-});
-
-watch(notification, (val) => {
-  if (!val && allNotifications.value.length > 0) {
-    router.replace("/layout/notify");
-  }
-}, { immediate: true });
-
-function handleBack() {
-  router.back();
+function getConfigByType(type: string) {
+  return NotificationTypeIcon[type];
 }
 </script>
 
@@ -31,34 +20,32 @@ function handleBack() {
       </ion-toolbar>
     </IonHeader>
     <IonContent :fullscreen="true" class="ion-padding">
-      <div v-if="notification" class="notification-detail">
+      <div v-if="data" class="notification-detail">
         <!-- 图标和标题 -->
-        <div class="flex items-start gap-4 mb-2">
+        <div class="flex items-start gap-4">
           <div class="bg-[#f1f1f1] dark:bg-[#2d2d2d] p-2.5 rounded-full shrink-0">
-            <IcBaselineNotificationsNone class="text-2xl text-[#71cc51]" />
+            <Icon :icon="getConfigByType(data.type).icon" class="text-2xl" :style="{ color: getConfigByType(data.type).color }" />
           </div>
           <div class="flex-1 min-w-0">
             <div class="text-xl font-semibold wrap-break-word">
-              {{ notification.title }}
+              {{ data.title }}
             </div>
             <ion-note class="text-xs">
-              {{ useDateFormat(notification.date, 'YYYY-MM-DD HH:mm:ss') }}
+              {{ useDateFormat(data.createdAt, 'YYYY-MM-DD HH:mm:ss') }}
             </ion-note>
           </div>
         </div>
 
-        <!-- 分割线 -->
         <ui-divider />
 
         <!-- 内容 -->
         <div class="notification-content">
           <p class="text-base leading-relaxed whitespace-pre-wrap wrap-break-word">
-            {{ notification.content }}
+            {{ data.content }}
           </p>
         </div>
       </div>
 
-      <!-- 加载状态 -->
       <div v-else class="flex items-center justify-center h-full">
         <ion-spinner name="crescent" />
       </div>
diff --git a/src/views/notify/enum.ts b/src/views/notify/enum.ts
new file mode 100644
index 0000000..2d244ed
--- /dev/null
+++ b/src/views/notify/enum.ts
@@ -0,0 +1,18 @@
+export const NotificationTypeIcon = {
+  system: {
+    icon: "solar:bell-bing-linear",
+    color: "#46a724",
+  },
+  security: {
+    icon: "solar:shield-check-linear",
+    color: "#f52323",
+  },
+  transaction: {
+    icon: "solar:transfer-horizontal-linear",
+    color: "#007aff",
+  },
+  activity: {
+    icon: "solar:calendar-mark-line-duotone",
+    color: "#ffa22d",
+  },
+} as const;
diff --git a/src/views/notify/index.vue b/src/views/notify/index.vue
index 1ca6922..7f4ebf7 100644
--- a/src/views/notify/index.vue
+++ b/src/views/notify/index.vue
@@ -1,43 +1,110 @@
 <script setup lang="ts">
+import type { InfiniteScrollCustomEvent, RefresherCustomEvent } from "@ionic/vue";
+import type { NotificationBody, NotificationData } from "@/api/types";
+import { toastController } from "@ionic/vue";
 import IcBaselineNotificationsNone from "~icons/ic/baseline-notifications-none";
 import IconParkOutlineClearFormat from "~icons/icon-park-outline/clear-format";
 import MaterialSymbolsAndroidContacts from "~icons/material-symbols/android-contacts";
-import { mockClient } from "@/api";
+import { client, mockClient, safeClient } from "@/api";
+import { NotificationTypeIcon } from "./enum";
 
 const router = useRouter();
-const { data } = mockClient("notify.list");
+const [query] = useResetRef<NotificationBody>({
+  limit: 20,
+  offset: 0,
+});
+const data = ref<NotificationData[]>([]);
+const isFinished = ref(false);
 
-function handleItemClick(id: number) {
-  router.push(`/notify/${id}`);
+async function fetchData() {
+  const { data: responseData } = await safeClient(() => client.api.notifications.get({
+    query: query.value,
+  }));
+  data.value.push(...(responseData.value?.data || []));
+  isFinished.value = (responseData.value?.data.length || 0) < query.value.limit!;
 }
+function resetRwaData() {
+  query.value.offset = 0;
+  data.value = [];
+  isFinished.value = false;
+}
+async function handleRefresh(event: RefresherCustomEvent) {
+  resetRwaData();
+  await fetchData();
+  setTimeout(() => {
+    event.target.complete();
+  }, 500);
+}
+async function handleInfinite(event: InfiniteScrollCustomEvent) {
+  if (isFinished.value) {
+    event.target.complete();
+    event.target.disabled = true;
+    return;
+  }
+  query.value.offset! += query.value.limit!;
+  await fetchData();
+  setTimeout(() => {
+    event.target.complete();
+  }, 500);
+}
+function handleItemClick(item: NotificationData) {
+  safeClient(client.api.notifications({ id: item.id }).read.post()).then(() => {
+    item.status = "read";
+  });
+  router.push(`/notify/${item.id}`);
+}
+async function handleAllRead() {
+  await safeClient(() => client.api.notifications["batch-read"].post({
+    ids: [],
+  }));
+  const toast = await toastController.create({
+    message: "所有通知已标记为已读",
+    duration: 2000,
+    position: "bottom",
+    color: "success",
+  });
+  await toast.present();
+  data.value.forEach((item) => {
+    item.status = "read";
+  });
+}
+function getConfigByType(type: string) {
+  return NotificationTypeIcon[type];
+}
+
+onBeforeMount(() => {
+  fetchData();
+});
 </script>
 
 <template>
   <IonPage>
     <IonHeader class="ion-no-border">
       <ion-toolbar class="ion-toolbar">
-        <ion-button slot="start" fill="clear">
+        <ion-button slot="end" fill="clear" @click="handleAllRead">
           <IconParkOutlineClearFormat slot="icon-only" />
         </ion-button>
-        <ion-button slot="end" fill="clear">
+        <!-- <ion-button slot="end" fill="clear">
           <MaterialSymbolsAndroidContacts slot="icon-only" />
-        </ion-button>
+        </ion-button> -->
         <ion-title>通知</ion-title>
       </ion-toolbar>
     </IonHeader>
     <IonContent :fullscreen="true">
-      <ion-searchbar placeholder="Search" />
+      <!-- <ion-searchbar placeholder="Search" /> -->
+      <ion-refresher slot="fixed" @ion-refresh="handleRefresh($event)">
+        <ion-refresher-content />
+      </ion-refresher>
 
       <ion-list lines="none">
         <ion-item
           v-for="item in data"
           :key="item.id"
           class="py-3"
-          button
-          @click="handleItemClick(item.id)"
+          @click="handleItemClick(item)"
         >
           <div slot="start" class="bg-[#f4f4f4] dark:bg-[#0a0a0a] p-2.5 rounded-full">
-            <IcBaselineNotificationsNone class="text-2xl text-[#46a724]" />
+            <Icon :icon="getConfigByType(item.type).icon" class="text-2xl" :style="{ color: getConfigByType(item.type).color }" />
           </div>
           <div class="pl-3 w-full">
             <div class="flex items-center justify-between mb-1">
@@ -45,10 +112,10 @@ function handleItemClick(id: number) {
                 <div class="text-md font-semibold">
                   {{ item.title }}
                 </div>
-                <div v-show="!item.read" class="h-2 w-2 bg-red-500 rounded-full" />
+                <div v-show="item.status === 'unread'" class="h-2 w-2 bg-red-500 rounded-full" />
               </div>
               <ion-note slot="end" class="text-xs">
-                {{ useDateFormat(item.date, 'MM/DD HH:mm') }}
+                {{ useDateFormat(item.createdAt, 'MM/DD HH:mm') }}
               </ion-note>
             </div>
             <div class="text-xs overflow-hidden text-ellipsis">
@@ -57,6 +124,12 @@ function handleItemClick(id: number) {
           </div>
         </ion-item>
       </ion-list>
+      <ion-infinite-scroll threshold="100px" @ion-infinite="handleInfinite">
+        <ion-infinite-scroll-content
+          loading-spinner="bubbles"
+          loading-text="加载中..."
+        />
+      </ion-infinite-scroll>
     </IonContent>
   </IonPage>
 </template>