diff --git a/frontend/src/pages/agent/cards/components/data-table.vue b/frontend/src/pages/agent/cards/components/data-table.vue
index bc9d4a4..205c14d 100644
--- a/frontend/src/pages/agent/cards/components/data-table.vue
+++ b/frontend/src/pages/agent/cards/components/data-table.vue
@@ -17,6 +17,7 @@ import DataTableToolbar from '@/pages/agent/cards/components/data-table-toolbar.
 
 const props = defineProps<Omit<DataTableProps<Card>, 'columns'> & {
   searchFilter?: string
+  serverPagination?: DataTableProps<Card>['serverPagination']
 }>()
 
 const emit = defineEmits<{
@@ -37,6 +38,7 @@ const table = generateVueTable<Card>({
   get data() { return props.data },
   get loading() { return props.loading },
   columns: columns.value,
+  serverPagination: props.serverPagination,
 })
 
 const columnLabels: Record<string, string> = {
@@ -55,7 +57,7 @@ defineExpose({
 </script>
 
 <template>
-  <DataTable :columns="columns" :data :loading :table @refresh="emit('refresh')">
+  <DataTable :columns="columns" :data :loading :table :server-pagination @refresh="emit('refresh')">
     <template #toolbar>
       <div class="space-y-3">
         <div class="flex items-center justify-end">
diff --git a/frontend/src/pages/agent/cards/index.vue b/frontend/src/pages/agent/cards/index.vue
index 00990be..77acae3 100644
--- a/frontend/src/pages/agent/cards/index.vue
+++ b/frontend/src/pages/agent/cards/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Key, Loader2, Plus } from 'lucide-vue-next'
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 
@@ -16,6 +16,8 @@ const router = useRouter()
 const loading = ref(true)
 const cards = ref<Card[]>([])
 const total = ref(0)
+const currentPage = ref(1)
+const pageSize = ref(20)
 const tableRef = ref()
 const searchFilter = ref('')
 
@@ -37,10 +39,29 @@ const usedCount = computed(() => cards.value.filter(card => card.status === 'use
 const expiredCount = computed(() => cards.value.filter(card => card.status === 'expired').length)
 const disabledCount = computed(() => cards.value.filter(card => card.status === 'disabled').length)
 
+const serverPagination = computed(() => ({
+  page: currentPage.value,
+  pageSize: pageSize.value,
+  total: total.value,
+  onPageChange: (page: number) => {
+    currentPage.value = page
+    fetchCards()
+  },
+  onPageSizeChange: (size: number) => {
+    pageSize.value = size
+    currentPage.value = 1
+    fetchCards()
+  },
+}))
+
 async function fetchCards() {
   loading.value = true
   try {
-    const data = await api.get<any>('/agent/cards')
+    const params = new URLSearchParams()
+    params.append('page', String(currentPage.value))
+    params.append('page_size', String(pageSize.value))
+
+    const data = await api.get<any>(`/agent/cards?${params.toString()}`)
     if (Array.isArray(data)) {
       cards.value = data
       total.value = data.length
@@ -176,6 +197,7 @@ onMounted(() => {
             ref="tableRef"
             :loading
             :data="filteredCards"
+            :server-pagination="serverPagination"
             :search-filter="searchFilter"
             @refresh="fetchCards"
             @batch-export="handleBatchExport(tableRef?.table?.getSelectedRowModel().rows.map((r: any) => r.original.id) || [])"