diff --git a/src/actions/resource.ts b/src/actions/resource.ts
index 097f46e..27df76e 100644
--- a/src/actions/resource.ts
+++ b/src/actions/resource.ts
@@ -1,6 +1,21 @@
 'use server'
 
 import {callByUser} from '@/actions/base'
+import {ResourcePss} from '@/lib/models'
+import {PageRecord} from '@/lib/api'
+
+async function listResourcePss(props: {
+  page: number
+  size: number
+  active?: boolean
+  type?: number
+  create_after?: number
+  create_before?: number
+  expire_after?: number
+  expire_before?: number
+}){
+  return await callByUser<PageRecord<ResourcePss>>('/api/resource/list/pss', props)
+}
 
 async function createResourceByBalance(props: {
   type: number
@@ -21,6 +36,7 @@ async function createResourceByWechat() {
 }
 
 export {
+  listResourcePss,
   createResourceByBalance,
   createResourceByAlipay,
   createResourceByWechat,
diff --git a/src/app/admin/layout.tsx b/src/app/admin/layout.tsx
index 03f34a8..39c1d83 100644
--- a/src/app/admin/layout.tsx
+++ b/src/app/admin/layout.tsx
@@ -59,7 +59,7 @@ export default async function DashboardLayout(props: DashboardLayoutProps) {
           <NavItem href={`/admin`} icon={`💰`} label={`我的账单`}/>
           <NavTitle label={`套餐管理`}/>
           <NavItem href={`/admin/purchase`} icon={`🛒`} label={`购买套餐`}/>
-          <NavItem href={`/admin`} icon={`📦`} label={`我的套餐`}/>
+          <NavItem href={`/admin/resources`} icon={`📦`} label={`我的套餐`}/>
           <NavTitle label={`IP 管理`}/>
           <NavItem href={`/admin/extract`} icon={`📤`} label={`IP提取`}/>
           <NavItem href={`/admin`} icon={`📜`} label={`IP提取记录`}/>
diff --git a/src/app/admin/resources/page.tsx b/src/app/admin/resources/page.tsx
index 675bbfc..310e9a8 100644
--- a/src/app/admin/resources/page.tsx
+++ b/src/app/admin/resources/page.tsx
@@ -1,11 +1,51 @@
-import {ReactNode} from 'react'
+'use client'
+import {ReactNode, useEffect, useState} from 'react'
+import {PageRecord} from '@/lib/api'
+import {ResourcePss} from '@/lib/models'
+import {useStatus} from '@/lib/states'
+import {listResourcePss} from '@/actions/resource'
 
-export type ResourcesPageProps = {
-}
+export type ResourcesPageProps = {}
 
-export default async function ResourcesPage(props: ResourcesPageProps) {
+export default function ResourcesPage(props: ResourcesPageProps) {
+
+  // region 数据
+
+  const [status, setStatus] = useStatus()
+  const [data, setData] = useState<PageRecord<ResourcePss>>({
+    page: 1,
+    size: 10,
+    total: 0,
+    list: [],
+  })
+
+  const refresh = async (page: number, size: number) => {
+    setStatus('load')
+    try {
+      const res = await listResourcePss({page, size})
+      setStatus('done')
+
+      if (res.success) {
+        setData(res.data)
+      }
+      else {
+        throw new Error('Failed to load resource pss')
+      }
+    }
+    catch (e) {
+      setStatus('fail')
+    }
+  }
+
+  useEffect(() => {
+    refresh(1, 10).then()
+  }, [])
+
+  // endregion
+
+  // render
   return (
-    <main>
+    <main className={`flex-auto bg-white rounded-tl-xl`}>
 
     </main>
   )
diff --git a/src/lib/models.ts b/src/lib/models.ts
index 64118ce..c229198 100644
--- a/src/lib/models.ts
+++ b/src/lib/models.ts
@@ -1,4 +1,4 @@
-type User = {
+export type User = {
   id: number
   admin_id: number
   phone: string
@@ -20,6 +20,16 @@ type User = {
   updated_at: Date
 }
 
-export type {
-  User,
+export type ResourcePss = {
+  id: number
+  type: number
+  live: number
+  expire: Date
+  quota: number
+  used: number
+  daily_limit: number
+  daily_used: number
+  daily_last: Date
+  created_at: Date
+  updated_at: Date
 }