diff --git a/src/components/shared/StatusBadge.tsx b/src/components/shared/StatusBadge.tsx
index 8f7b893..28f162a 100644
--- a/src/components/shared/StatusBadge.tsx
+++ b/src/components/shared/StatusBadge.tsx
@@ -2,10 +2,14 @@ import { cn } from '@/lib/utils'
 
 const statusStyles: Record<string, string> = {
   Completed: 'bg-green-100 text-green-700',
+  COMPLETED: 'bg-green-100 text-green-700',
   'Partially Authorized': 'bg-orange-100 text-orange-700',
   Rejected: 'bg-red-100 text-red-700',
   Pending: 'bg-yellow-100 text-yellow-700',
+  IN_PROGRESS: 'bg-blue-100 text-blue-700',
   Failed: 'bg-red-100 text-red-700',
+  FAILED: 'bg-red-100 text-red-700',
+  Unknown: 'bg-gray-100 text-gray-600',
   // Voucher statuses
   Active: 'bg-green-100 text-green-700',
   Inactive: 'bg-gray-100 text-gray-600',
@@ -20,9 +24,17 @@ export default function StatusBadge({
   status,
   label,
 }: {
-  status: string
+  status: string | null | undefined
   label?: string
 }) {
+  if (!status) {
+    return (
+      <span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium bg-gray-100 text-gray-600">
+        -
+      </span>
+    )
+  }
+
   return (
     <span
       className={cn(
diff --git a/src/lib/api/paymentHub.ts b/src/lib/api/paymentHub.ts
index 651d847..27787d5 100644
--- a/src/lib/api/paymentHub.ts
+++ b/src/lib/api/paymentHub.ts
@@ -1,10 +1,8 @@
 import apiClient from './client'
 
 export const fetchMainBatches = async () => {
-  console.log('Fetching batches...')
   const response = await apiClient.get('/batches')
-  console.log('Batches response:', response.data)
-  return response.data
+  return { data: response.data.data }
 }
 
 export const fetchTransfers = async () => {
@@ -13,3 +11,8 @@ export const fetchTransfers = async () => {
   })
   return response.data
 }
+
+export const fetchSubBatches = async (batchId: string) => {
+  const response = await apiClient.get(`/batches/${batchId}/subBatches`)
+  return response.data
+}
diff --git a/src/main.tsx b/src/main.tsx
index 3cad75a..bace96c 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -9,6 +9,7 @@ import SplashScreen from '@/pages/SplashScreen'
 import LoginPage from '@/pages/LoginPage'
 import Dashboard from '@/pages/Dashboard'
 import PaymentHub from '@/pages/PaymentHub'
+import BatchDetail from '@/pages/BatchDetail'
 import Vouchers from '@/pages/Vouchers'
 import AccountMapper from '@/pages/AccountMapper'
 import G2PConfig from '@/pages/G2PConfig'
@@ -47,6 +48,7 @@ const router = createBrowserRouter([
         children: [
           { index: true, element: <Dashboard /> },
           { path: 'payment-hub', element: <PaymentHub /> },
+          { path: 'payment-hub/batch/:batchId', element: <BatchDetail /> },
           { path: 'vouchers', element: <Vouchers /> },
           { path: 'account-mapper', element: <AccountMapper /> },
           { path: 'g2p-config', element: <G2PConfig /> },
diff --git a/src/modules/payment-hub/BatchDetail.tsx b/src/modules/payment-hub/BatchDetail.tsx
new file mode 100644
index 0000000..7ec3303
--- /dev/null
+++ b/src/modules/payment-hub/BatchDetail.tsx
@@ -0,0 +1,176 @@
+import { Link, useNavigate, useParams } from 'react-router-dom'
+import { useQuery } from '@tanstack/react-query'
+import { ArrowLeft } from 'lucide-react'
+import { fetchMainBatches, fetchSubBatches } from '@/lib/api/paymentHub'
+import { mainBatches as mockBatches } from './mocks/mainBatches.mock'
+import { subBatches as mockSubBatches } from './mocks/subBatches.mock'
+import StatusBadge from '@/components/shared/StatusBadge'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import {
+  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
+} from '@/components/ui/table'
+import { Button } from '@/components/ui/button'
+
+const SKELETON_ROWS = 5
+
+const formatAmount = (amount: number | null) => {
+  if (!amount) return '0'
+  return Math.abs(amount / 100).toLocaleString()
+}
+
+const formatDate = (ts: number | null) => (ts ? new Date(ts).toLocaleString() : '-')
+
+const formatField = (value: string | null | undefined) =>
+  !value || value === 'null' ? '-' : value
+
+function InfoRow({ label, value }: { label: string; value: React.ReactNode }) {
+  return (
+    <div className="flex items-center justify-between py-2 border-b border-gray-50 last:border-0">
+      <span className="text-sm text-muted-foreground">{label}</span>
+      <span className="text-sm font-medium text-gray-800">{value}</span>
+    </div>
+  )
+}
+
+function StatCard({ label, value }: { label: string; value: React.ReactNode }) {
+  return (
+    <Card>
+      <CardContent className="pt-5 pb-5">
+        <p className="text-xs text-gray-500 font-medium mb-1">{label}</p>
+        <span className="text-3xl font-bold text-gray-800">{value}</span>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default function BatchDetail() {
+  const { batchId } = useParams()
+  const navigate = useNavigate()
+
+  const { data: batchData, isError: isBatchesError } = useQuery({
+    queryKey: ['mainBatches'],
+    queryFn: fetchMainBatches,
+  })
+
+  const batches = isBatchesError ? mockBatches : (batchData?.data ?? [])
+  const batch = batches.find((b) => b.batchId === batchId)
+
+  const { data: subBatchData, isLoading: isSubBatchesLoading, isError: isSubBatchesError } = useQuery({
+    queryKey: ['subBatches', batchId],
+    queryFn: () => fetchSubBatches(batchId!),
+    enabled: !!batchId,
+  })
+
+  const subBatches = isSubBatchesError
+    ? mockSubBatches.filter((sb) => sb.batchId === batchId)
+    : (subBatchData?.content ?? [])
+
+  return (
+    <div className="space-y-6">
+      {/* Breadcrumb */}
+      <nav className="flex items-center gap-1.5 text-sm text-muted-foreground">
+        <Link to="/" className="hover:text-foreground transition-colors">
+          Dashboard
+        </Link>
+        <span>/</span>
+        <Link to="/payment-hub" className="hover:text-foreground transition-colors">
+          Payment Hub
+        </Link>
+        <span>/</span>
+        <span className="text-foreground font-medium">Batch Detail</span>
+      </nav>
+
+      {/* Header */}
+      <div className="flex items-center gap-3">
+        <Button variant="outline" size="icon-sm" onClick={() => navigate('/payment-hub')}>
+          <ArrowLeft size={16} />
+        </Button>
+        <h1 className="text-2xl font-semibold tracking-tight">{batchId}</h1>
+        <StatusBadge status={batch?.status ?? null} />
+      </div>
+
+      {/* Info cards */}
+      <div className="grid grid-cols-4 gap-4">
+        <StatCard label="Total Transactions" value={batch?.totalTransactions ?? 0} />
+        <StatCard label="Completed" value={batch?.completed ?? 0} />
+        <StatCard label="Failed" value={batch?.failed ?? 0} />
+        <StatCard label="Total Amount" value={formatAmount(batch?.totalAmount ?? null)} />
+      </div>
+
+      {/* Batch info + Sub batches */}
+      <div className="flex gap-4 items-start">
+        {/* Batch Info */}
+        <Card className="flex-1 min-w-0">
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-semibold text-gray-700">Batch Info</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <InfoRow label="Batch ID" value={formatField(batch?.batchId)} />
+            <InfoRow label="Payer FSP" value={formatField(batch?.payerFsp)} />
+            <InfoRow label="Started At" value={formatDate(batch?.startedAt ?? null)} />
+            <InfoRow label="Completed At" value={formatDate(batch?.completedAt ?? null)} />
+            <InfoRow label="Correlation ID" value={formatField(batch?.correlationId)} />
+            <InfoRow label="Registering Institution ID" value={formatField(batch?.registeringInstitutionId)} />
+          </CardContent>
+        </Card>
+
+        {/* Sub Batches */}
+        <Card className="flex-2 min-w-0">
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-semibold text-gray-700">Sub Batches</CardTitle>
+          </CardHeader>
+          <CardContent className="p-0">
+            {isSubBatchesError && (
+              <div className="px-6 pb-3 text-xs text-orange-700">
+                Could not reach the API — showing cached data.
+              </div>
+            )}
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Sub Batch ID</TableHead>
+                  <TableHead className="text-right">Transactions</TableHead>
+                  <TableHead className="text-right">Completed</TableHead>
+                  <TableHead className="text-right">Failed</TableHead>
+                  <TableHead className="text-right">Amount</TableHead>
+                  <TableHead>Status</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {isSubBatchesLoading
+                  ? Array.from({ length: SKELETON_ROWS }).map((_, i) => (
+                      <TableRow key={i}>
+                        {Array.from({ length: 6 }).map((__, j) => (
+                          <TableCell key={j}>
+                            <div className="h-4 rounded bg-gray-100 animate-pulse w-full" />
+                          </TableCell>
+                        ))}
+                      </TableRow>
+                    ))
+                  : subBatches.length > 0
+                    ? subBatches.map((sb) => (
+                        <TableRow key={sb.id}>
+                          <TableCell className="font-medium">{sb.subBatchId ?? '-'}</TableCell>
+                          <TableCell className="text-right">{sb.totalTransactions}</TableCell>
+                          <TableCell className="text-right">{sb.completed}</TableCell>
+                          <TableCell className="text-right">{sb.failed}</TableCell>
+                          <TableCell className="text-right">{formatAmount(sb.totalAmount)}</TableCell>
+                          <TableCell><StatusBadge status={sb.status} /></TableCell>
+                        </TableRow>
+                      ))
+                    : (
+                        <TableRow>
+                          <TableCell colSpan={6} className="text-center text-muted-foreground py-8">
+                            No sub batches found.
+                          </TableCell>
+                        </TableRow>
+                      )
+                }
+              </TableBody>
+            </Table>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}
diff --git a/src/modules/payment-hub/MainBatchesTab.tsx b/src/modules/payment-hub/MainBatchesTab.tsx
index 8f2ed78..7616f6b 100644
--- a/src/modules/payment-hub/MainBatchesTab.tsx
+++ b/src/modules/payment-hub/MainBatchesTab.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
 import { useQuery } from '@tanstack/react-query'
 import { fetchMainBatches } from '@/lib/api/paymentHub'
 import { mainBatches as mockBatches } from './mocks/mainBatches.mock'
@@ -15,10 +16,23 @@ import { ChevronLeft, ChevronRight, Download, FileText, AlertCircle } from 'luci
 import { exportCsv, csvDate } from '@/lib/exportCsv'
 import { exportPdf } from '@/lib/exportPdf'
 
-const STATUSES: MainBatch['status'][] = ['Completed', 'Partially Authorized', 'Rejected']
+const STATUSES = [
+  { label: 'Completed', value: 'COMPLETED' },
+  { label: 'Partially Authorized', value: 'IN_PROGRESS' },
+  { label: 'Rejected', value: 'FAILED' },
+]
 const SKELETON_ROWS = 5
 
+const formatAmount = (amount: number | null) => {
+  if (!amount) return '0'
+  return Math.abs(amount / 100).toLocaleString()
+}
+
+const formatInstitutionId = (id: string | null) =>
+  !id || id === 'null' ? '-' : id
+
 export default function MainBatchesTab() {
+  const navigate = useNavigate()
   const [statusFilter, setStatusFilter] = useState<string>('all')
   const [page, setPage] = useState(1)
   const [perPage, setPerPage] = useState(10)
@@ -28,8 +42,8 @@ export default function MainBatchesTab() {
     queryFn: fetchMainBatches,
   })
 
-  // Fall back to mock data when API returns empty or errors
-  const rows: MainBatch[] = (apiData?.data?.length ? apiData.data : mockBatches)
+  // Fall back to mock data only when the API call fails
+  const rows: MainBatch[] = isError ? mockBatches : (apiData?.data ?? [])
   const totalCount: number = apiData?.totalBatches ?? rows.length
 
   const filtered = rows.filter(
@@ -38,7 +52,16 @@ export default function MainBatchesTab() {
   const totalPages = Math.max(1, Math.ceil(filtered.length / perPage))
   const paginated = filtered.slice((page - 1) * perPage, page * perPage)
 
-  const exportRows = filtered as unknown as Record<string, unknown>[]
+  const exportRows: Record<string, unknown>[] = filtered.map((b) => ({
+    'Batch Reference': b.batchId,
+    'Start Time': b.startedAt ? new Date(b.startedAt).toLocaleString() : '-',
+    'Completed Time': b.completedAt ? new Date(b.completedAt).toLocaleString() : '-',
+    'Institution ID': formatInstitutionId(b.registeringInstitutionId),
+    Instructions: b.totalTransactions,
+    Amount: formatAmount(b.totalAmount),
+    'Payer FSP': b.payerFsp ?? '-',
+    Status: b.status ?? 'Unknown',
+  }))
 
   return (
     <div className="space-y-4">
@@ -57,15 +80,15 @@ export default function MainBatchesTab() {
           </button>
           {STATUSES.map((s) => (
             <button
-              key={s}
-              onClick={() => { setStatusFilter(s); setPage(1) }}
+              key={s.value}
+              onClick={() => { setStatusFilter(s.value); setPage(1) }}
               className={`rounded-full px-3 py-1 text-xs font-medium border transition-colors ${
-                statusFilter === s
+                statusFilter === s.value
                   ? 'bg-[#1565C0] text-white border-[#1565C0]'
                   : 'bg-white text-gray-600 border-gray-300 hover:bg-gray-50'
               }`}
             >
-              {s}
+              {s.label}
             </button>
           ))}
         </div>
@@ -80,8 +103,8 @@ export default function MainBatchesTab() {
             variant="outline" size="sm" className="gap-1.5 text-xs"
             onClick={() => exportPdf(
               'Main Batches',
-              ['Batch Reference', 'Start Time', 'Completed Time', 'Institution ID', 'Source Ministry', 'Instructions', 'Amount', 'Payer FSP', 'Status'],
-              filtered.map((b) => [b.batchReferenceNumber, b.startTime, b.completedTime, b.registeringInstitutionId, b.sourceMinistry, b.numberOfInstructions, b.amount.toLocaleString(), b.payerFSP, b.status]),
+              ['Batch Reference', 'Start Time', 'Completed Time', 'Institution ID', 'Instructions', 'Amount', 'Payer FSP', 'Status'],
+              filtered.map((b) => [b.batchId, b.startedAt ? new Date(b.startedAt).toLocaleString() : '-', b.completedAt ? new Date(b.completedAt).toLocaleString() : '-', formatInstitutionId(b.registeringInstitutionId), b.totalTransactions, formatAmount(b.totalAmount), b.payerFsp ?? '-', b.status ?? 'Unknown']),
               `main-batches-${csvDate()}.pdf`,
             )}
           >
@@ -107,7 +130,6 @@ export default function MainBatchesTab() {
               <TableHead>Start Time</TableHead>
               <TableHead>Completed Time</TableHead>
               <TableHead>Institution ID</TableHead>
-              <TableHead>Source Ministry</TableHead>
               <TableHead className="text-right">Instructions</TableHead>
               <TableHead className="text-right">Amount</TableHead>
               <TableHead>Payer FSP</TableHead>
@@ -118,7 +140,7 @@ export default function MainBatchesTab() {
             {isLoading
               ? Array.from({ length: SKELETON_ROWS }).map((_, i) => (
                   <TableRow key={i}>
-                    {Array.from({ length: 9 }).map((__, j) => (
+                    {Array.from({ length: 8 }).map((__, j) => (
                       <TableCell key={j}>
                         <div className="h-4 rounded bg-gray-100 animate-pulse w-full" />
                       </TableCell>
@@ -127,21 +149,24 @@ export default function MainBatchesTab() {
                 ))
               : paginated.length > 0
                 ? paginated.map((batch) => (
-                    <TableRow key={batch.batchReferenceNumber}>
-                      <TableCell className="font-medium">{batch.batchReferenceNumber}</TableCell>
-                      <TableCell>{batch.startTime}</TableCell>
-                      <TableCell>{batch.completedTime}</TableCell>
-                      <TableCell>{batch.registeringInstitutionId}</TableCell>
-                      <TableCell>{batch.sourceMinistry}</TableCell>
-                      <TableCell className="text-right">{batch.numberOfInstructions}</TableCell>
-                      <TableCell className="text-right">{batch.amount.toLocaleString()}</TableCell>
-                      <TableCell>{batch.payerFSP}</TableCell>
+                    <TableRow
+                      key={batch.batchId}
+                      className="cursor-pointer"
+                      onClick={() => navigate(`/payment-hub/batch/${batch.batchId}`)}
+                    >
+                      <TableCell className="font-medium">{batch.batchId}</TableCell>
+                      <TableCell>{batch.startedAt ? new Date(batch.startedAt).toLocaleString() : '-'}</TableCell>
+                      <TableCell>{batch.completedAt ? new Date(batch.completedAt).toLocaleString() : '-'}</TableCell>
+                      <TableCell>{formatInstitutionId(batch.registeringInstitutionId)}</TableCell>
+                      <TableCell className="text-right">{batch.totalTransactions}</TableCell>
+                      <TableCell className="text-right">{formatAmount(batch.totalAmount)}</TableCell>
+                      <TableCell>{batch.payerFsp ?? '-'}</TableCell>
                       <TableCell><StatusBadge status={batch.status} /></TableCell>
                     </TableRow>
                   ))
                 : (
                     <TableRow>
-                      <TableCell colSpan={9} className="text-center text-muted-foreground py-8">
+                      <TableCell colSpan={8} className="text-center text-muted-foreground py-8">
                         No records found.
                       </TableCell>
                     </TableRow>
diff --git a/src/modules/payment-hub/SubBatchesTab.tsx b/src/modules/payment-hub/SubBatchesTab.tsx
index 8843594..80f63be 100644
--- a/src/modules/payment-hub/SubBatchesTab.tsx
+++ b/src/modules/payment-hub/SubBatchesTab.tsx
@@ -1,6 +1,9 @@
-import { useState } from 'react'
-import { subBatches } from './mocks/subBatches.mock'
-import type { MainBatch } from './types'
+import { useEffect, useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { fetchMainBatches, fetchSubBatches } from '@/lib/api/paymentHub'
+import { mainBatches as mockBatches } from './mocks/mainBatches.mock'
+import { subBatches as mockSubBatches } from './mocks/subBatches.mock'
+import type { MainBatch, SubBatch } from './types'
 import StatusBadge from '@/components/shared/StatusBadge'
 import {
   Table,
@@ -18,69 +21,84 @@ import {
   SelectValue,
 } from '@/components/ui/select'
 import { Button } from '@/components/ui/button'
-import { ChevronLeft, ChevronRight, Download, FileText } from 'lucide-react'
+import { ChevronLeft, ChevronRight, Download, FileText, AlertCircle } from 'lucide-react'
 import { exportCsv, csvDate } from '@/lib/exportCsv'
 import { exportPdf } from '@/lib/exportPdf'
 
-const statuses: MainBatch['status'][] = [
-  'Completed',
-  'Partially Authorized',
-  'Rejected',
-]
+const SKELETON_ROWS = 5
+
+const formatAmount = (amount: number | null) => {
+  if (!amount) return '0'
+  return Math.abs(amount / 100).toLocaleString()
+}
 
 export default function SubBatchesTab() {
-  const [statusFilter, setStatusFilter] = useState<string>('all')
   const [page, setPage] = useState(1)
   const [perPage, setPerPage] = useState(10)
 
-  const filtered = subBatches.filter(
-    (b) => statusFilter === 'all' || b.status === statusFilter
-  )
+  const { data: mainBatchesData, isError: isBatchesError } = useQuery({
+    queryKey: ['mainBatches'],
+    queryFn: fetchMainBatches,
+  })
+
+  const batchOptions: MainBatch[] = isBatchesError ? mockBatches : (mainBatchesData?.data ?? [])
+  const [batchId, setBatchId] = useState<string>('')
+
+  useEffect(() => {
+    if (!batchId && batchOptions.length > 0) {
+      setBatchId(batchOptions[0].batchId)
+    }
+  }, [batchId, batchOptions])
+
+  const { data: apiData, isLoading, isError } = useQuery({
+    queryKey: ['subBatches', batchId],
+    queryFn: () => fetchSubBatches(batchId),
+    enabled: !!batchId,
+  })
+
+  const rows: SubBatch[] = isError
+    ? mockSubBatches.filter((sb) => sb.batchId === batchId)
+    : (apiData?.content ?? [])
+  const totalCount: number = apiData?.totalElements ?? rows.length
 
-  const totalPages = Math.max(1, Math.ceil(filtered.length / perPage))
-  const paginated = filtered.slice((page - 1) * perPage, page * perPage)
+  const totalPages = Math.max(1, Math.ceil(rows.length / perPage))
+  const paginated = rows.slice((page - 1) * perPage, page * perPage)
+
+  const exportRows: Record<string, unknown>[] = rows.map((b) => ({
+    'Sub Batch ID': b.subBatchId ?? '-',
+    'Start Time': b.startedAt ? new Date(b.startedAt).toLocaleString() : '-',
+    'Completed Time': b.completedAt ? new Date(b.completedAt).toLocaleString() : '-',
+    'Total Transactions': b.totalTransactions,
+    Completed: b.completed,
+    Failed: b.failed,
+    Amount: formatAmount(b.totalAmount),
+    Status: b.status ?? 'Unknown',
+  }))
 
   return (
     <div className="space-y-4">
-      {/* Filters + Export */}
+      {/* Batch selector + Export */}
       <div className="flex items-center justify-between gap-2 flex-wrap">
-      <div className="flex items-center gap-2 flex-wrap">
-        <button
-          onClick={() => {
-            setStatusFilter('all')
-            setPage(1)
-          }}
-          className={`rounded-full px-3 py-1 text-xs font-medium border transition-colors ${
-            statusFilter === 'all'
-              ? 'bg-[#1565C0] text-white border-[#1565C0]'
-              : 'bg-white text-gray-600 border-gray-300 hover:bg-gray-50'
-          }`}
-        >
-          All
-        </button>
-        {statuses.map((s) => (
-          <button
-            key={s}
-            onClick={() => {
-              setStatusFilter(s)
-              setPage(1)
-            }}
-            className={`rounded-full px-3 py-1 text-xs font-medium border transition-colors ${
-              statusFilter === s
-                ? 'bg-[#1565C0] text-white border-[#1565C0]'
-                : 'bg-white text-gray-600 border-gray-300 hover:bg-gray-50'
-            }`}
+        <div className="flex items-center gap-2 flex-wrap">
+          <span className="text-sm text-muted-foreground">Batch</span>
+          <Select
+            value={batchId}
+            onValueChange={(v) => { setBatchId(v); setPage(1) }}
           >
-            {s}
-          </button>
-        ))}
-      </div>
+            <SelectTrigger className="w-56"><SelectValue placeholder="Select a batch" /></SelectTrigger>
+            <SelectContent>
+              {batchOptions.map((b) => (
+                <SelectItem key={b.batchId} value={b.batchId}>{b.batchId}</SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
         <div className="flex items-center gap-2">
           <Button
             variant="outline"
             size="sm"
             className="gap-1.5 text-xs"
-            onClick={() => exportCsv(subBatches as unknown as Record<string, unknown>[], `sub-batches-${csvDate()}.csv`)}
+            onClick={() => exportCsv(exportRows, `sub-batches-${csvDate()}.csv`)}
           >
             <Download size={13} />
             Export CSV
@@ -91,8 +109,8 @@ export default function SubBatchesTab() {
             className="gap-1.5 text-xs"
             onClick={() => exportPdf(
               'Sub Batches',
-              ['Batch Reference', 'Start Time', 'Completed Time', 'Institution ID', 'Source Ministry', 'Instructions', 'Amount', 'Payer FSP', 'Status'],
-              subBatches.map((b) => [b.batchReferenceNumber, b.startTime, b.completedTime, b.registeringInstitutionId, b.sourceMinistry, b.numberOfInstructions, b.amount.toLocaleString(), b.payerFSP, b.status]),
+              ['Sub Batch ID', 'Start Time', 'Completed Time', 'Total Transactions', 'Completed', 'Failed', 'Amount', 'Status'],
+              rows.map((b) => [b.subBatchId ?? '-', b.startedAt ? new Date(b.startedAt).toLocaleString() : '-', b.completedAt ? new Date(b.completedAt).toLocaleString() : '-', b.totalTransactions, b.completed, b.failed, formatAmount(b.totalAmount), b.status ?? 'Unknown']),
               `sub-batches-${csvDate()}.pdf`,
             )}
           >
@@ -102,51 +120,61 @@ export default function SubBatchesTab() {
         </div>
       </div>
 
+      {/* Error banner */}
+      {isError && (
+        <div className="flex items-center gap-2 rounded-lg border border-orange-200 bg-orange-50 px-4 py-2.5 text-sm text-orange-700">
+          <AlertCircle size={15} className="shrink-0" />
+          Could not reach the API — showing cached data.
+        </div>
+      )}
+
       {/* Table */}
       <div className="rounded-lg border bg-white">
         <Table>
           <TableHeader>
             <TableRow>
-              <TableHead>Batch Reference</TableHead>
+              <TableHead>Sub Batch ID</TableHead>
               <TableHead>Start Time</TableHead>
               <TableHead>Completed Time</TableHead>
-              <TableHead>Institution ID</TableHead>
-              <TableHead>Source Ministry</TableHead>
-              <TableHead className="text-right">Instructions</TableHead>
+              <TableHead className="text-right">Total Transactions</TableHead>
+              <TableHead className="text-right">Completed</TableHead>
+              <TableHead className="text-right">Failed</TableHead>
               <TableHead className="text-right">Amount</TableHead>
-              <TableHead>Payer FSP</TableHead>
               <TableHead>Status</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
-            {paginated.map((batch) => (
-              <TableRow key={batch.batchReferenceNumber}>
-                <TableCell className="font-medium">
-                  {batch.batchReferenceNumber}
-                </TableCell>
-                <TableCell>{batch.startTime}</TableCell>
-                <TableCell>{batch.completedTime}</TableCell>
-                <TableCell>{batch.registeringInstitutionId}</TableCell>
-                <TableCell>{batch.sourceMinistry}</TableCell>
-                <TableCell className="text-right">
-                  {batch.numberOfInstructions}
-                </TableCell>
-                <TableCell className="text-right">
-                  {batch.amount.toLocaleString()}
-                </TableCell>
-                <TableCell>{batch.payerFSP}</TableCell>
-                <TableCell>
-                  <StatusBadge status={batch.status} />
-                </TableCell>
-              </TableRow>
-            ))}
-            {paginated.length === 0 && (
-              <TableRow>
-                <TableCell colSpan={9} className="text-center text-muted-foreground py-8">
-                  No records found.
-                </TableCell>
-              </TableRow>
-            )}
+            {isLoading
+              ? Array.from({ length: SKELETON_ROWS }).map((_, i) => (
+                  <TableRow key={i}>
+                    {Array.from({ length: 8 }).map((__, j) => (
+                      <TableCell key={j}>
+                        <div className="h-4 rounded bg-gray-100 animate-pulse w-full" />
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                ))
+              : paginated.length > 0
+                ? paginated.map((batch) => (
+                    <TableRow key={batch.id}>
+                      <TableCell className="font-medium">{batch.subBatchId ?? '-'}</TableCell>
+                      <TableCell>{batch.startedAt ? new Date(batch.startedAt).toLocaleString() : '-'}</TableCell>
+                      <TableCell>{batch.completedAt ? new Date(batch.completedAt).toLocaleString() : '-'}</TableCell>
+                      <TableCell className="text-right">{batch.totalTransactions}</TableCell>
+                      <TableCell className="text-right">{batch.completed}</TableCell>
+                      <TableCell className="text-right">{batch.failed}</TableCell>
+                      <TableCell className="text-right">{formatAmount(batch.totalAmount)}</TableCell>
+                      <TableCell><StatusBadge status={batch.status} /></TableCell>
+                    </TableRow>
+                  ))
+                : (
+                    <TableRow>
+                      <TableCell colSpan={8} className="text-center text-muted-foreground py-8">
+                        No records found.
+                      </TableCell>
+                    </TableRow>
+                  )
+            }
           </TableBody>
         </Table>
 
@@ -173,8 +201,10 @@ export default function SubBatchesTab() {
           </div>
           <div className="flex items-center gap-2 text-sm text-muted-foreground">
             <span>
-              {(page - 1) * perPage + 1}–
-              {Math.min(page * perPage, filtered.length)} of {filtered.length}
+              {rows.length === 0
+                ? '0–0 of 0'
+                : `${(page - 1) * perPage + 1}–${Math.min(page * perPage, rows.length)} of ${totalCount}`
+              }
             </span>
             <Button
               variant="outline"
diff --git a/src/modules/payment-hub/TransfersTab.tsx b/src/modules/payment-hub/TransfersTab.tsx
index c333d9f..d8f0a1c 100644
--- a/src/modules/payment-hub/TransfersTab.tsx
+++ b/src/modules/payment-hub/TransfersTab.tsx
@@ -15,9 +15,18 @@ import { ChevronLeft, ChevronRight, Download, FileText, AlertCircle } from 'luci
 import { exportCsv, csvDate } from '@/lib/exportCsv'
 import { exportPdf } from '@/lib/exportPdf'
 
-const STATUSES: Transfer['status'][] = ['Completed', 'Partially Authorized', 'Pending', 'Rejected']
+const STATUSES = ['COMPLETED', 'IN_PROGRESS', 'FAILED']
 const SKELETON_ROWS = 5
 
+const formatAmount = (amount: string | null) => {
+  const n = amount ? Number(amount) : 0
+  if (!n) return '0'
+  return Math.abs(n / 100).toLocaleString()
+}
+
+const formatField = (value: string | null) =>
+  !value || value === 'null' ? '-' : value
+
 export default function TransfersTab() {
   const [statusFilter, setStatusFilter] = useState<string>('all')
   const [payerFilter, setPayerFilter] = useState<string>('all')
@@ -29,20 +38,28 @@ export default function TransfersTab() {
     queryFn: fetchTransfers,
   })
 
-  const rows: Transfer[] = (apiData?.content?.length ? apiData.content : mockTransfers)
+  const rows: Transfer[] = isError ? mockTransfers : (apiData?.content ?? [])
   const totalCount: number = apiData?.totalElements ?? rows.length
 
-  const payers = [...new Set(rows.map((t) => t.payerFSP))]
+  const payers = [...new Set(rows.map((t) => t.payerDfspId).filter((p): p is string => !!p && p !== 'null'))]
 
   const filtered = rows.filter((t) => {
     if (statusFilter !== 'all' && t.status !== statusFilter) return false
-    if (payerFilter !== 'all' && t.payerFSP !== payerFilter) return false
+    if (payerFilter !== 'all' && t.payerDfspId !== payerFilter) return false
     return true
   })
   const totalPages = Math.max(1, Math.ceil(filtered.length / perPage))
   const paginated = filtered.slice((page - 1) * perPage, page * perPage)
 
-  const exportRows = filtered as unknown as Record<string, unknown>[]
+  const exportRows: Record<string, unknown>[] = filtered.map((t) => ({
+    'Transaction ID': t.transactionId,
+    'Start Time': t.startedAt ? new Date(t.startedAt).toLocaleString() : '-',
+    'Completed Time': t.completedAt ? new Date(t.completedAt).toLocaleString() : '-',
+    'Batch ID': formatField(t.batchId),
+    Amount: formatAmount(t.amount),
+    'Payer FSP': formatField(t.payerDfspId),
+    Status: t.status ?? 'Unknown',
+  }))
 
   return (
     <div className="space-y-4">
@@ -93,8 +110,8 @@ export default function TransfersTab() {
             variant="outline" size="sm" className="gap-1.5 text-xs"
             onClick={() => exportPdf(
               'Transfers',
-              ['Transaction ID', 'Start Time', 'Completed Time', 'Source Ministry', 'Bulk Amount', 'Payer FSP', 'Status'],
-              filtered.map((t) => [t.transactionId, t.startTime, t.completedTime || '—', t.sourceMinistry, t.bulkAmount.toLocaleString(), t.payerFSP, t.status]),
+              ['Transaction ID', 'Start Time', 'Completed Time', 'Batch ID', 'Amount', 'Payer FSP', 'Status'],
+              filtered.map((t) => [t.transactionId, t.startedAt ? new Date(t.startedAt).toLocaleString() : '-', t.completedAt ? new Date(t.completedAt).toLocaleString() : '-', formatField(t.batchId), formatAmount(t.amount), formatField(t.payerDfspId), t.status ?? 'Unknown']),
               `transfers-${csvDate()}.pdf`,
             )}
           >
@@ -119,8 +136,8 @@ export default function TransfersTab() {
               <TableHead>Transaction ID</TableHead>
               <TableHead>Start Time</TableHead>
               <TableHead>Completed Time</TableHead>
-              <TableHead>Source Ministry</TableHead>
-              <TableHead className="text-right">Bulk Amount</TableHead>
+              <TableHead>Batch ID</TableHead>
+              <TableHead className="text-right">Amount</TableHead>
               <TableHead>Payer FSP</TableHead>
               <TableHead>Status</TableHead>
             </TableRow>
@@ -138,13 +155,13 @@ export default function TransfersTab() {
                 ))
               : paginated.length > 0
                 ? paginated.map((transfer) => (
-                    <TableRow key={transfer.transactionId}>
+                    <TableRow key={transfer.id}>
                       <TableCell className="font-medium">{transfer.transactionId}</TableCell>
-                      <TableCell>{transfer.startTime}</TableCell>
-                      <TableCell>{transfer.completedTime || '—'}</TableCell>
-                      <TableCell>{transfer.sourceMinistry}</TableCell>
-                      <TableCell className="text-right">{transfer.bulkAmount.toLocaleString()}</TableCell>
-                      <TableCell>{transfer.payerFSP}</TableCell>
+                      <TableCell>{transfer.startedAt ? new Date(transfer.startedAt).toLocaleString() : '-'}</TableCell>
+                      <TableCell>{transfer.completedAt ? new Date(transfer.completedAt).toLocaleString() : '-'}</TableCell>
+                      <TableCell>{formatField(transfer.batchId)}</TableCell>
+                      <TableCell className="text-right">{formatAmount(transfer.amount)}</TableCell>
+                      <TableCell>{formatField(transfer.payerDfspId)}</TableCell>
                       <TableCell><StatusBadge status={transfer.status} /></TableCell>
                     </TableRow>
                   ))
diff --git a/src/modules/payment-hub/mocks/mainBatches.mock.ts b/src/modules/payment-hub/mocks/mainBatches.mock.ts
index 856329f..c78c5e8 100644
--- a/src/modules/payment-hub/mocks/mainBatches.mock.ts
+++ b/src/modules/payment-hub/mocks/mainBatches.mock.ts
@@ -2,113 +2,163 @@ import type { MainBatch } from '../types'
 
 export const mainBatches: MainBatch[] = [
   {
-    batchReferenceNumber: 'BATCH-001-2026',
-    startTime: '2026-06-01 08:30:00',
-    completedTime: '2026-06-01 09:15:00',
+    id: 1,
+    batchId: 'BATCH-001-2026',
+    totalTransactions: 150,
+    ongoing: 0,
+    failed: 0,
+    completed: 150,
+    totalAmount: 2500000,
+    completedAmount: 2500000,
+    payerFsp: 'GreenBank',
+    status: 'COMPLETED',
+    startedAt: new Date('2026-06-01T08:30:00').getTime(),
+    completedAt: new Date('2026-06-01T09:15:00').getTime(),
     registeringInstitutionId: 'INST-101',
-    sourceMinistry: 'Ministry of Finance',
-    numberOfInstructions: 150,
-    amount: 2500000,
-    payerFSP: 'GreenBank',
-    status: 'Completed',
+    correlationId: 'CORR-001',
   },
   {
-    batchReferenceNumber: 'BATCH-002-2026',
-    startTime: '2026-06-02 10:00:00',
-    completedTime: '2026-06-02 11:45:00',
+    id: 2,
+    batchId: 'BATCH-002-2026',
+    totalTransactions: 85,
+    ongoing: 10,
+    failed: 5,
+    completed: 70,
+    totalAmount: 1200000,
+    completedAmount: 980000,
+    payerFsp: 'BlueBank',
+    status: 'IN_PROGRESS',
+    startedAt: new Date('2026-06-02T10:00:00').getTime(),
+    completedAt: new Date('2026-06-02T11:45:00').getTime(),
     registeringInstitutionId: 'INST-102',
-    sourceMinistry: 'Ministry of Health',
-    numberOfInstructions: 85,
-    amount: 1200000,
-    payerFSP: 'BlueBank',
-    status: 'Partially Authorized',
+    correlationId: 'CORR-002',
   },
   {
-    batchReferenceNumber: 'BATCH-003-2026',
-    startTime: '2026-06-03 07:15:00',
-    completedTime: '2026-06-03 07:45:00',
+    id: 3,
+    batchId: 'BATCH-003-2026',
+    totalTransactions: 200,
+    ongoing: 0,
+    failed: 0,
+    completed: 200,
+    totalAmount: 3400000,
+    completedAmount: 3400000,
+    payerFsp: 'RedBank',
+    status: 'COMPLETED',
+    startedAt: new Date('2026-06-03T07:15:00').getTime(),
+    completedAt: new Date('2026-06-03T07:45:00').getTime(),
     registeringInstitutionId: 'INST-103',
-    sourceMinistry: 'Ministry of Education',
-    numberOfInstructions: 200,
-    amount: 3400000,
-    payerFSP: 'RedBank',
-    status: 'Completed',
+    correlationId: 'CORR-003',
   },
   {
-    batchReferenceNumber: 'BATCH-004-2026',
-    startTime: '2026-06-04 14:00:00',
-    completedTime: '2026-06-04 14:30:00',
+    id: 4,
+    batchId: 'BATCH-004-2026',
+    totalTransactions: 45,
+    ongoing: 0,
+    failed: 45,
+    completed: 0,
+    totalAmount: 780000,
+    completedAmount: 0,
+    payerFsp: 'GreenBank',
+    status: 'FAILED',
+    startedAt: new Date('2026-06-04T14:00:00').getTime(),
+    completedAt: new Date('2026-06-04T14:30:00').getTime(),
     registeringInstitutionId: 'INST-104',
-    sourceMinistry: 'Ministry of Agriculture',
-    numberOfInstructions: 45,
-    amount: 780000,
-    payerFSP: 'GreenBank',
-    status: 'Rejected',
+    correlationId: 'CORR-004',
   },
   {
-    batchReferenceNumber: 'BATCH-005-2026',
-    startTime: '2026-06-05 09:30:00',
-    completedTime: '2026-06-05 10:00:00',
+    id: 5,
+    batchId: 'BATCH-005-2026',
+    totalTransactions: 320,
+    ongoing: 0,
+    failed: 0,
+    completed: 320,
+    totalAmount: 5600000,
+    completedAmount: 5600000,
+    payerFsp: 'BlueBank',
+    status: 'COMPLETED',
+    startedAt: new Date('2026-06-05T09:30:00').getTime(),
+    completedAt: new Date('2026-06-05T10:00:00').getTime(),
     registeringInstitutionId: 'INST-105',
-    sourceMinistry: 'Ministry of Finance',
-    numberOfInstructions: 320,
-    amount: 5600000,
-    payerFSP: 'BlueBank',
-    status: 'Completed',
+    correlationId: 'CORR-005',
   },
   {
-    batchReferenceNumber: 'BATCH-006-2026',
-    startTime: '2026-06-06 11:00:00',
-    completedTime: '2026-06-06 12:30:00',
+    id: 6,
+    batchId: 'BATCH-006-2026',
+    totalTransactions: 110,
+    ongoing: 15,
+    failed: 5,
+    completed: 90,
+    totalAmount: 1900000,
+    completedAmount: 1550000,
+    payerFsp: 'RedBank',
+    status: 'IN_PROGRESS',
+    startedAt: new Date('2026-06-06T11:00:00').getTime(),
+    completedAt: new Date('2026-06-06T12:30:00').getTime(),
     registeringInstitutionId: 'INST-106',
-    sourceMinistry: 'Ministry of Transport',
-    numberOfInstructions: 110,
-    amount: 1900000,
-    payerFSP: 'RedBank',
-    status: 'Partially Authorized',
+    correlationId: 'CORR-006',
   },
   {
-    batchReferenceNumber: 'BATCH-007-2026',
-    startTime: '2026-06-07 08:00:00',
-    completedTime: '2026-06-07 08:45:00',
+    id: 7,
+    batchId: 'BATCH-007-2026',
+    totalTransactions: 75,
+    ongoing: 0,
+    failed: 0,
+    completed: 75,
+    totalAmount: 980000,
+    completedAmount: 980000,
+    payerFsp: 'GreenBank',
+    status: 'COMPLETED',
+    startedAt: new Date('2026-06-07T08:00:00').getTime(),
+    completedAt: new Date('2026-06-07T08:45:00').getTime(),
     registeringInstitutionId: 'INST-107',
-    sourceMinistry: 'Ministry of Health',
-    numberOfInstructions: 75,
-    amount: 980000,
-    payerFSP: 'GreenBank',
-    status: 'Completed',
+    correlationId: 'CORR-007',
   },
   {
-    batchReferenceNumber: 'BATCH-008-2026',
-    startTime: '2026-06-08 13:15:00',
-    completedTime: '2026-06-08 14:00:00',
+    id: 8,
+    batchId: 'BATCH-008-2026',
+    totalTransactions: 260,
+    ongoing: 0,
+    failed: 260,
+    completed: 0,
+    totalAmount: 4200000,
+    completedAmount: 0,
+    payerFsp: 'BlueBank',
+    status: 'FAILED',
+    startedAt: new Date('2026-06-08T13:15:00').getTime(),
+    completedAt: new Date('2026-06-08T14:00:00').getTime(),
     registeringInstitutionId: 'INST-108',
-    sourceMinistry: 'Ministry of Education',
-    numberOfInstructions: 260,
-    amount: 4200000,
-    payerFSP: 'BlueBank',
-    status: 'Rejected',
+    correlationId: 'CORR-008',
   },
   {
-    batchReferenceNumber: 'BATCH-009-2026',
-    startTime: '2026-06-09 07:45:00',
-    completedTime: '2026-06-09 08:30:00',
+    id: 9,
+    batchId: 'BATCH-009-2026',
+    totalTransactions: 190,
+    ongoing: 0,
+    failed: 0,
+    completed: 190,
+    totalAmount: 3100000,
+    completedAmount: 3100000,
+    payerFsp: 'RedBank',
+    status: 'COMPLETED',
+    startedAt: new Date('2026-06-09T07:45:00').getTime(),
+    completedAt: new Date('2026-06-09T08:30:00').getTime(),
     registeringInstitutionId: 'INST-109',
-    sourceMinistry: 'Ministry of Finance',
-    numberOfInstructions: 190,
-    amount: 3100000,
-    payerFSP: 'RedBank',
-    status: 'Completed',
+    correlationId: 'CORR-009',
   },
   {
-    batchReferenceNumber: 'BATCH-010-2026',
-    startTime: '2026-06-10 10:30:00',
-    completedTime: '2026-06-10 11:15:00',
+    id: 10,
+    batchId: 'BATCH-010-2026',
+    totalTransactions: 130,
+    ongoing: 20,
+    failed: 0,
+    completed: 110,
+    totalAmount: 2100000,
+    completedAmount: 1800000,
+    payerFsp: 'GreenBank',
+    status: 'IN_PROGRESS',
+    startedAt: new Date('2026-06-10T10:30:00').getTime(),
+    completedAt: new Date('2026-06-10T11:15:00').getTime(),
     registeringInstitutionId: 'INST-110',
-    sourceMinistry: 'Ministry of Agriculture',
-    numberOfInstructions: 130,
-    amount: 2100000,
-    payerFSP: 'GreenBank',
-    status: 'Partially Authorized',
+    correlationId: 'CORR-010',
   },
 ]
diff --git a/src/modules/payment-hub/mocks/subBatches.mock.ts b/src/modules/payment-hub/mocks/subBatches.mock.ts
index 818c116..40f60db 100644
--- a/src/modules/payment-hub/mocks/subBatches.mock.ts
+++ b/src/modules/payment-hub/mocks/subBatches.mock.ts
@@ -1,114 +1,144 @@
-import type { MainBatch } from '../types'
+import type { SubBatch } from '../types'
 
-export const subBatches: MainBatch[] = [
+export const subBatches: SubBatch[] = [
   {
-    batchReferenceNumber: 'SUB-001-A',
-    startTime: '2026-06-01 08:35:00',
-    completedTime: '2026-06-01 08:50:00',
-    registeringInstitutionId: 'INST-101',
-    sourceMinistry: 'Ministry of Finance',
-    numberOfInstructions: 50,
-    amount: 850000,
-    payerFSP: 'GreenBank',
-    status: 'Completed',
+    id: 101,
+    batchId: 'BATCH-001-2026',
+    subBatchId: 'SUB-001-A',
+    totalTransactions: 50,
+    completed: 50,
+    failed: 0,
+    ongoing: 0,
+    totalAmount: 85000000,
+    status: 'COMPLETED',
+    payerFsp: 'GreenBank',
+    startedAt: new Date('2026-06-01T08:35:00').getTime(),
+    completedAt: new Date('2026-06-01T08:50:00').getTime(),
   },
   {
-    batchReferenceNumber: 'SUB-001-B',
-    startTime: '2026-06-01 08:50:00',
-    completedTime: '2026-06-01 09:05:00',
-    registeringInstitutionId: 'INST-101',
-    sourceMinistry: 'Ministry of Finance',
-    numberOfInstructions: 50,
-    amount: 830000,
-    payerFSP: 'GreenBank',
-    status: 'Completed',
+    id: 102,
+    batchId: 'BATCH-001-2026',
+    subBatchId: 'SUB-001-B',
+    totalTransactions: 50,
+    completed: 50,
+    failed: 0,
+    ongoing: 0,
+    totalAmount: 83000000,
+    status: 'COMPLETED',
+    payerFsp: 'GreenBank',
+    startedAt: new Date('2026-06-01T08:50:00').getTime(),
+    completedAt: new Date('2026-06-01T09:05:00').getTime(),
   },
   {
-    batchReferenceNumber: 'SUB-002-A',
-    startTime: '2026-06-02 10:05:00',
-    completedTime: '2026-06-02 10:40:00',
-    registeringInstitutionId: 'INST-102',
-    sourceMinistry: 'Ministry of Health',
-    numberOfInstructions: 40,
-    amount: 560000,
-    payerFSP: 'BlueBank',
-    status: 'Partially Authorized',
+    id: 103,
+    batchId: 'BATCH-002-2026',
+    subBatchId: 'SUB-002-A',
+    totalTransactions: 40,
+    completed: 30,
+    failed: 0,
+    ongoing: 10,
+    totalAmount: 56000000,
+    status: 'IN_PROGRESS',
+    payerFsp: 'BlueBank',
+    startedAt: new Date('2026-06-02T10:05:00').getTime(),
+    completedAt: null,
   },
   {
-    batchReferenceNumber: 'SUB-003-A',
-    startTime: '2026-06-03 07:20:00',
-    completedTime: '2026-06-03 07:35:00',
-    registeringInstitutionId: 'INST-103',
-    sourceMinistry: 'Ministry of Education',
-    numberOfInstructions: 100,
-    amount: 1700000,
-    payerFSP: 'RedBank',
-    status: 'Completed',
+    id: 104,
+    batchId: 'BATCH-003-2026',
+    subBatchId: 'SUB-003-A',
+    totalTransactions: 100,
+    completed: 100,
+    failed: 0,
+    ongoing: 0,
+    totalAmount: 170000000,
+    status: 'COMPLETED',
+    payerFsp: 'RedBank',
+    startedAt: new Date('2026-06-03T07:20:00').getTime(),
+    completedAt: new Date('2026-06-03T07:35:00').getTime(),
   },
   {
-    batchReferenceNumber: 'SUB-003-B',
-    startTime: '2026-06-03 07:35:00',
-    completedTime: '2026-06-03 07:45:00',
-    registeringInstitutionId: 'INST-103',
-    sourceMinistry: 'Ministry of Education',
-    numberOfInstructions: 100,
-    amount: 1700000,
-    payerFSP: 'RedBank',
-    status: 'Rejected',
+    id: 105,
+    batchId: 'BATCH-003-2026',
+    subBatchId: 'SUB-003-B',
+    totalTransactions: 100,
+    completed: 0,
+    failed: 100,
+    ongoing: 0,
+    totalAmount: 170000000,
+    status: 'FAILED',
+    payerFsp: 'RedBank',
+    startedAt: new Date('2026-06-03T07:35:00').getTime(),
+    completedAt: new Date('2026-06-03T07:45:00').getTime(),
   },
   {
-    batchReferenceNumber: 'SUB-004-A',
-    startTime: '2026-06-04 14:05:00',
-    completedTime: '2026-06-04 14:20:00',
-    registeringInstitutionId: 'INST-104',
-    sourceMinistry: 'Ministry of Agriculture',
-    numberOfInstructions: 25,
-    amount: 390000,
-    payerFSP: 'GreenBank',
-    status: 'Rejected',
+    id: 106,
+    batchId: 'BATCH-004-2026',
+    subBatchId: 'SUB-004-A',
+    totalTransactions: 25,
+    completed: 0,
+    failed: 25,
+    ongoing: 0,
+    totalAmount: 39000000,
+    status: 'FAILED',
+    payerFsp: 'GreenBank',
+    startedAt: new Date('2026-06-04T14:05:00').getTime(),
+    completedAt: new Date('2026-06-04T14:20:00').getTime(),
   },
   {
-    batchReferenceNumber: 'SUB-005-A',
-    startTime: '2026-06-05 09:35:00',
-    completedTime: '2026-06-05 09:50:00',
-    registeringInstitutionId: 'INST-105',
-    sourceMinistry: 'Ministry of Finance',
-    numberOfInstructions: 160,
-    amount: 2800000,
-    payerFSP: 'BlueBank',
-    status: 'Completed',
+    id: 107,
+    batchId: 'BATCH-005-2026',
+    subBatchId: 'SUB-005-A',
+    totalTransactions: 160,
+    completed: 160,
+    failed: 0,
+    ongoing: 0,
+    totalAmount: 280000000,
+    status: 'COMPLETED',
+    payerFsp: 'BlueBank',
+    startedAt: new Date('2026-06-05T09:35:00').getTime(),
+    completedAt: new Date('2026-06-05T09:50:00').getTime(),
   },
   {
-    batchReferenceNumber: 'SUB-005-B',
-    startTime: '2026-06-05 09:50:00',
-    completedTime: '2026-06-05 10:00:00',
-    registeringInstitutionId: 'INST-105',
-    sourceMinistry: 'Ministry of Finance',
-    numberOfInstructions: 160,
-    amount: 2800000,
-    payerFSP: 'BlueBank',
-    status: 'Completed',
+    id: 108,
+    batchId: 'BATCH-005-2026',
+    subBatchId: 'SUB-005-B',
+    totalTransactions: 160,
+    completed: 160,
+    failed: 0,
+    ongoing: 0,
+    totalAmount: 280000000,
+    status: 'COMPLETED',
+    payerFsp: 'BlueBank',
+    startedAt: new Date('2026-06-05T09:50:00').getTime(),
+    completedAt: new Date('2026-06-05T10:00:00').getTime(),
   },
   {
-    batchReferenceNumber: 'SUB-006-A',
-    startTime: '2026-06-06 11:10:00',
-    completedTime: '2026-06-06 11:50:00',
-    registeringInstitutionId: 'INST-106',
-    sourceMinistry: 'Ministry of Transport',
-    numberOfInstructions: 55,
-    amount: 950000,
-    payerFSP: 'RedBank',
-    status: 'Partially Authorized',
+    id: 109,
+    batchId: 'BATCH-006-2026',
+    subBatchId: 'SUB-006-A',
+    totalTransactions: 55,
+    completed: 45,
+    failed: 5,
+    ongoing: 5,
+    totalAmount: 95000000,
+    status: 'IN_PROGRESS',
+    payerFsp: 'RedBank',
+    startedAt: new Date('2026-06-06T11:10:00').getTime(),
+    completedAt: null,
   },
   {
-    batchReferenceNumber: 'SUB-007-A',
-    startTime: '2026-06-07 08:05:00',
-    completedTime: '2026-06-07 08:30:00',
-    registeringInstitutionId: 'INST-107',
-    sourceMinistry: 'Ministry of Health',
-    numberOfInstructions: 75,
-    amount: 980000,
-    payerFSP: 'GreenBank',
-    status: 'Completed',
+    id: 110,
+    batchId: 'BATCH-007-2026',
+    subBatchId: 'SUB-007-A',
+    totalTransactions: 75,
+    completed: 75,
+    failed: 0,
+    ongoing: 0,
+    totalAmount: 98000000,
+    status: 'COMPLETED',
+    payerFsp: 'GreenBank',
+    startedAt: new Date('2026-06-07T08:05:00').getTime(),
+    completedAt: new Date('2026-06-07T08:30:00').getTime(),
   },
 ]
diff --git a/src/modules/payment-hub/mocks/transfers.mock.ts b/src/modules/payment-hub/mocks/transfers.mock.ts
index 7033dc6..0deb41b 100644
--- a/src/modules/payment-hub/mocks/transfers.mock.ts
+++ b/src/modules/payment-hub/mocks/transfers.mock.ts
@@ -2,48 +2,103 @@ import type { Transfer } from '../types'
 
 export const transfers: Transfer[] = [
   {
-    transactionId: 'TXN-90001-2026',
-    startTime: '2026-06-01 08:32:00',
-    completedTime: '2026-06-01 08:33:15',
-    sourceMinistry: 'Ministry of Finance',
-    bulkAmount: 45000,
-    payerFSP: 'GreenBank',
-    status: 'Completed',
+    id: 1,
+    transactionId: 'ab09d690-7e34-4b3d-b07c-f5a59c020676',
+    startedAt: new Date('2026-06-01T08:32:00').getTime(),
+    completedAt: new Date('2026-06-01T08:33:15').getTime(),
+    status: 'COMPLETED',
+    statusDetail: null,
+    payeeDfspId: 'greenbank',
+    payeePartyId: '0424942603',
+    payeePartyIdType: 'MSISDN',
+    payerDfspId: 'greenbank',
+    payerPartyId: '0413356886',
+    payerPartyIdType: 'MSISDN',
+    amount: '4500000',
+    currency: 'USD',
+    direction: 'OUTGOING',
+    errorInformation: null,
+    batchId: 'afc40755-abba-4409-a860-26a172b237ee',
+    clientCorrelationId: 'b6e03b00-3796-4825-a67f-46f704e33d58',
   },
   {
-    transactionId: 'TXN-90002-2026',
-    startTime: '2026-06-02 10:10:00',
-    completedTime: '2026-06-02 10:12:30',
-    sourceMinistry: 'Ministry of Health',
-    bulkAmount: 32000,
-    payerFSP: 'BlueBank',
-    status: 'Partially Authorized',
+    id: 2,
+    transactionId: '25b5fadc-cbd6-4986-b0a8-a1e9f399c783',
+    startedAt: new Date('2026-06-02T10:10:00').getTime(),
+    completedAt: new Date('2026-06-02T10:12:30').getTime(),
+    status: 'IN_PROGRESS',
+    statusDetail: null,
+    payeeDfspId: 'bluebank',
+    payeePartyId: '0495822412',
+    payeePartyIdType: 'MSISDN',
+    payerDfspId: 'bluebank',
+    payerPartyId: '0413356886',
+    payerPartyIdType: 'MSISDN',
+    amount: '3200000',
+    currency: 'USD',
+    direction: 'OUTGOING',
+    errorInformation: null,
+    batchId: 'acd958de-7ca6-4998-888d-a6bf76fbe7d8',
+    clientCorrelationId: 'fd86c0e9-2d83-48fe-b403-358179987882',
   },
   {
-    transactionId: 'TXN-90003-2026',
-    startTime: '2026-06-03 07:20:00',
-    completedTime: '',
-    sourceMinistry: 'Ministry of Education',
-    bulkAmount: 67500,
-    payerFSP: 'RedBank',
-    status: 'Pending',
+    id: 3,
+    transactionId: '11ac3a8d-7c91-4fed-8b99-062249da63b4',
+    startedAt: new Date('2026-06-03T07:20:00').getTime(),
+    completedAt: null,
+    status: 'IN_PROGRESS',
+    statusDetail: null,
+    payeeDfspId: 'redbank',
+    payeePartyId: '0495822412',
+    payeePartyIdType: 'MSISDN',
+    payerDfspId: 'redbank',
+    payerPartyId: '0413356886',
+    payerPartyIdType: 'MSISDN',
+    amount: '6750000',
+    currency: 'USD',
+    direction: 'OUTGOING',
+    errorInformation: null,
+    batchId: '456bb520-248c-418b-abf2-e38ac9d1a21a',
+    clientCorrelationId: '5a1a9cfc-ef68-4f13-9528-29ac27f0984f',
   },
   {
-    transactionId: 'TXN-90004-2026',
-    startTime: '2026-06-04 14:05:00',
-    completedTime: '2026-06-04 14:06:00',
-    sourceMinistry: 'Ministry of Agriculture',
-    bulkAmount: 18200,
-    payerFSP: 'GreenBank',
-    status: 'Rejected',
+    id: 4,
+    transactionId: '17cefe5d-bda0-4af6-896b-ea2a26852510',
+    startedAt: new Date('2026-06-04T14:05:00').getTime(),
+    completedAt: new Date('2026-06-04T14:06:00').getTime(),
+    status: 'FAILED',
+    statusDetail: 'Insufficient funds',
+    payeeDfspId: 'greenbank',
+    payeePartyId: '0424942603',
+    payeePartyIdType: 'MSISDN',
+    payerDfspId: 'greenbank',
+    payerPartyId: '0413356886',
+    payerPartyIdType: 'MSISDN',
+    amount: '1820000',
+    currency: 'USD',
+    direction: 'OUTGOING',
+    errorInformation: 'Payer account balance insufficient',
+    batchId: 'null',
+    clientCorrelationId: '4ce51588-8b25-49fe-85b4-fea6f6c060ec',
   },
   {
-    transactionId: 'TXN-90005-2026',
-    startTime: '2026-06-05 09:40:00',
-    completedTime: '2026-06-05 09:41:45',
-    sourceMinistry: 'Ministry of Finance',
-    bulkAmount: 93000,
-    payerFSP: 'BlueBank',
-    status: 'Completed',
+    id: 5,
+    transactionId: 'ffee00bc-0d19-4790-b213-9658e48f8fe5',
+    startedAt: new Date('2026-06-05T09:40:00').getTime(),
+    completedAt: new Date('2026-06-05T09:41:45').getTime(),
+    status: 'COMPLETED',
+    statusDetail: null,
+    payeeDfspId: 'bluebank',
+    payeePartyId: '0424942603',
+    payeePartyIdType: 'MSISDN',
+    payerDfspId: 'bluebank',
+    payerPartyId: '0413356886',
+    payerPartyIdType: 'MSISDN',
+    amount: '9300000',
+    currency: 'USD',
+    direction: 'OUTGOING',
+    errorInformation: null,
+    batchId: 'acd958de-7ca6-4998-888d-a6bf76fbe7d8',
+    clientCorrelationId: 'b6e03b00-3796-4825-a67f-46f704e33d58',
   },
 ]
diff --git a/src/modules/payment-hub/types.ts b/src/modules/payment-hub/types.ts
index 98e5b72..1d9f30f 100644
--- a/src/modules/payment-hub/types.ts
+++ b/src/modules/payment-hub/types.ts
@@ -1,21 +1,52 @@
 export interface MainBatch {
-  batchReferenceNumber: string
-  startTime: string
-  completedTime: string
-  registeringInstitutionId: string
-  sourceMinistry: string
-  numberOfInstructions: number
-  amount: number
-  payerFSP: string
-  status: 'Completed' | 'Partially Authorized' | 'Rejected'
+  id: number
+  batchId: string
+  totalTransactions: number
+  ongoing: number
+  failed: number
+  completed: number
+  totalAmount: number | null
+  completedAmount: number | null
+  payerFsp: string
+  status: string | null
+  startedAt: number | null
+  completedAt: number | null
+  registeringInstitutionId: string | null
+  correlationId: string
+}
+
+export interface SubBatch {
+  id: number
+  batchId: string
+  subBatchId: string | null
+  totalTransactions: number
+  completed: number
+  failed: number
+  ongoing: number
+  totalAmount: number | null
+  status: string | null
+  payerFsp: string | null
+  startedAt: number | null
+  completedAt: number | null
 }
 
 export interface Transfer {
+  id: number
   transactionId: string
-  startTime: string
-  completedTime: string
-  sourceMinistry: string
-  bulkAmount: number
-  payerFSP: string
-  status: 'Completed' | 'Partially Authorized' | 'Pending' | 'Rejected'
+  startedAt: number | null
+  completedAt: number | null
+  status: string | null
+  statusDetail: string | null
+  payeeDfspId: string | null
+  payeePartyId: string | null
+  payeePartyIdType: string | null
+  payerDfspId: string | null
+  payerPartyId: string | null
+  payerPartyIdType: string | null
+  amount: string | null
+  currency: string | null
+  direction: string | null
+  errorInformation: string | null
+  batchId: string | null
+  clientCorrelationId: string | null
 }
diff --git a/src/modules/reporting/Reporting.tsx b/src/modules/reporting/Reporting.tsx
index 2f1fdb4..5437eea 100644
--- a/src/modules/reporting/Reporting.tsx
+++ b/src/modules/reporting/Reporting.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
 import {
   LineChart, Line,
   BarChart, Bar,
@@ -15,24 +16,12 @@ import {
   Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
 } from '@/components/ui/select'
 import StatusBadge from '@/components/shared/StatusBadge'
+import { fetchMainBatches, fetchTransfers } from '@/lib/api/paymentHub'
+import { mainBatches as mockBatches } from '@/modules/payment-hub/mocks/mainBatches.mock'
+import { transfers as mockTransfers } from '@/modules/payment-hub/mocks/transfers.mock'
+import type { MainBatch } from '@/modules/payment-hub/types'
 
-// ── Mock data ──────────────────────────────────────────────────────────────
-
-const volumeData = [
-  { date: 'Jul 17', completed: 142, failed: 18 },
-  { date: 'Jul 18', completed: 189, failed: 24 },
-  { date: 'Jul 19', completed: 97,  failed: 31 },
-  { date: 'Jul 20', completed: 213, failed: 15 },
-  { date: 'Jul 21', completed: 176, failed: 22 },
-  { date: 'Jul 22', completed: 234, failed: 29 },
-  { date: 'Jul 23', completed: 196, failed: 20 },
-]
-
-const pieData = [
-  { name: 'Completed',            value: 62, color: '#22c55e' },
-  { name: 'Partially Authorized', value: 28, color: '#f97316' },
-  { name: 'Rejected',             value: 10, color: '#ef4444' },
-]
+// ── Mock data (fallback for charts with no real endpoint yet) ──────────────
 
 const ministryData = [
   { ministry: 'Finance',    amount: 560 },
@@ -51,29 +40,70 @@ const dfspData = [
   { dfsp: 'SBI',       rate: 11.5 },
 ]
 
-const failedBatches = [
-  { ref: 'BATCH-004-2026', ministry: 'Ministry of Agriculture', amount: '$780K',  reason: 'Insufficient funds',       status: 'Rejected' },
-  { ref: 'BATCH-008-2026', ministry: 'Ministry of Education',   amount: '$4.2M',  reason: 'Invalid account numbers',  status: 'Rejected' },
-  { ref: 'BATCH-011-2026', ministry: 'Ministry of Transport',   amount: '$1.1M',  reason: 'Compliance check failed',  status: 'Rejected' },
-  { ref: 'BATCH-015-2026', ministry: 'Ministry of Health',      amount: '$650K',  reason: 'Duplicate batch detected', status: 'Rejected' },
-  { ref: 'BATCH-019-2026', ministry: 'Ministry of Finance',     amount: '$2.3M',  reason: 'Timeout — payer FSP',      status: 'Rejected' },
-]
-
 const TENANTS = ['greenbank', 'bluebank', 'redbank']
 
+const STATUS_COLORS: Record<string, string> = {
+  COMPLETED: '#22c55e',
+  IN_PROGRESS: '#f97316',
+  FAILED: '#ef4444',
+}
+
+const formatAmount = (amount: number | null) => {
+  if (!amount) return '0'
+  return Math.abs(amount / 100).toLocaleString()
+}
+
+function buildStatusBreakdown(batches: MainBatch[]) {
+  const total = batches.length
+  if (total === 0) return []
+  const counts: Record<string, number> = { COMPLETED: 0, IN_PROGRESS: 0, FAILED: 0 }
+  for (const b of batches) {
+    if (b.status && b.status in counts) counts[b.status] += 1
+  }
+  return Object.entries(counts)
+    .filter(([, count]) => count > 0)
+    .map(([status, count]) => ({
+      name: status,
+      value: Number(((count / total) * 100).toFixed(1)),
+      color: STATUS_COLORS[status],
+    }))
+}
+
+function buildVolumeData(transfers: { startedAt: number | null }[]) {
+  const counts = new Map<string, number>()
+  for (const t of transfers) {
+    if (!t.startedAt) continue
+    const key = new Date(t.startedAt).toISOString().slice(0, 10)
+    counts.set(key, (counts.get(key) ?? 0) + 1)
+  }
+  return [...counts.entries()]
+    .sort(([a], [b]) => a.localeCompare(b))
+    .slice(-7)
+    .map(([date, count]) => ({
+      date: new Date(date).toLocaleDateString(undefined, { month: 'short', day: 'numeric' }),
+      count,
+    }))
+}
+
 // ── KPI Card ───────────────────────────────────────────────────────────────
 
-function KpiCard({ label, value, trend }: { label: string; value: string; trend: 'up' | 'down' }) {
+function KpiCard({ label, value, trend, isLoading }: { label: string; value: string; trend: 'up' | 'down'; isLoading?: boolean }) {
   const isUp = trend === 'up'
   return (
     <Card>
       <CardContent className="pt-5 pb-5">
         <p className="text-xs text-gray-500 font-medium mb-1">{label}</p>
         <div className="flex items-end gap-1.5">
-          <span className="text-3xl font-bold text-gray-800">{value}</span>
-          {isUp
-            ? <TrendingUp size={15} className="text-emerald-500 mb-1.5" />
-            : <TrendingDown size={15} className="text-red-500 mb-1.5" />}
+          {isLoading ? (
+            <div className="h-8 w-20 rounded bg-gray-100 animate-pulse" />
+          ) : (
+            <>
+              <span className="text-3xl font-bold text-gray-800">{value}</span>
+              {isUp
+                ? <TrendingUp size={15} className="text-emerald-500 mb-1.5" />
+                : <TrendingDown size={15} className="text-red-500 mb-1.5" />}
+            </>
+          )}
         </div>
       </CardContent>
     </Card>
@@ -87,6 +117,31 @@ export default function Reporting() {
   const [toDate, setToDate]     = useState('2026-07-23')
   const [tenant, setTenant]     = useState('all')
 
+  const { data: batchData, isLoading: isBatchesLoading, isError: isBatchesError } = useQuery({
+    queryKey: ['mainBatches'],
+    queryFn: fetchMainBatches,
+  })
+
+  const { data: transferData, isError: isTransfersError } = useQuery({
+    queryKey: ['transfers'],
+    queryFn: fetchTransfers,
+  })
+
+  const batches: MainBatch[] = isBatchesError ? mockBatches : (batchData?.data ?? [])
+  const transfers = isTransfersError ? mockTransfers : (transferData?.content ?? [])
+
+  const totalBatches = batches.length
+  const totalTransactions = batches.reduce((sum, b) => sum + b.totalTransactions, 0)
+  const totalAmount = formatAmount(batches.reduce((sum, b) => sum + (b.totalAmount ?? 0), 0))
+  const completedBatches = batches.filter((b) => b.status === 'COMPLETED').length
+  const failedBatchCount = batches.filter((b) => b.status === 'FAILED').length
+  const successRate = totalBatches > 0 ? ((completedBatches / totalBatches) * 100).toFixed(1) : '0.0'
+  const failureRate = totalBatches > 0 ? ((failedBatchCount / totalBatches) * 100).toFixed(1) : '0.0'
+
+  const pieData = buildStatusBreakdown(batches)
+  const volumeData = buildVolumeData(transfers)
+  const failedBatches = batches.filter((b) => b.status === 'FAILED')
+
   return (
     <div className="space-y-6">
       <h1 className="text-2xl font-semibold text-gray-800">Reporting Dashboard</h1>
@@ -124,10 +179,10 @@ export default function Reporting() {
 
       {/* Row 1 — KPIs */}
       <div className="grid grid-cols-4 gap-4">
-        <KpiCard label="Total Transactions"    value="1,247"  trend="up" />
-        <KpiCard label="Total Amount Disbursed" value="$4.2M" trend="up" />
-        <KpiCard label="Success Rate"          value="87.3%"  trend="up" />
-        <KpiCard label="Failure Rate"          value="12.7%"  trend="down" />
+        <KpiCard label="Total Transactions" value={totalTransactions.toLocaleString()} trend="up" isLoading={isBatchesLoading} />
+        <KpiCard label="Total Amount Disbursed" value={`$${totalAmount}`} trend="up" isLoading={isBatchesLoading} />
+        <KpiCard label="Success Rate" value={`${successRate}%`} trend="up" isLoading={isBatchesLoading} />
+        <KpiCard label="Failure Rate" value={`${failureRate}%`} trend="down" isLoading={isBatchesLoading} />
       </div>
 
       {/* Row 2 — Line + Pie */}
@@ -145,8 +200,7 @@ export default function Reporting() {
                 <YAxis tick={{ fontSize: 11 }} />
                 <Tooltip />
                 <Legend iconSize={10} wrapperStyle={{ fontSize: 11 }} />
-                <Line type="monotone" dataKey="completed" stroke="#22c55e" strokeWidth={2} dot={false} name="Completed" />
-                <Line type="monotone" dataKey="failed"    stroke="#ef4444" strokeWidth={2} dot={false} name="Failed" />
+                <Line type="monotone" dataKey="count" stroke="#1565C0" strokeWidth={2} dot={false} name="Transfers" />
               </LineChart>
             </ResponsiveContainer>
           </CardContent>
@@ -240,22 +294,29 @@ export default function Reporting() {
             <thead>
               <tr className="border-t border-gray-100">
                 <th className="text-left px-6 py-2.5 text-xs font-medium text-gray-500 uppercase tracking-wide">Batch Reference</th>
-                <th className="text-left px-6 py-2.5 text-xs font-medium text-gray-500 uppercase tracking-wide">Ministry</th>
+                <th className="text-left px-6 py-2.5 text-xs font-medium text-gray-500 uppercase tracking-wide">Start Time</th>
                 <th className="text-right px-6 py-2.5 text-xs font-medium text-gray-500 uppercase tracking-wide">Amount</th>
-                <th className="text-left px-6 py-2.5 text-xs font-medium text-gray-500 uppercase tracking-wide">Failure Reason</th>
                 <th className="text-left px-6 py-2.5 text-xs font-medium text-gray-500 uppercase tracking-wide">Status</th>
               </tr>
             </thead>
             <tbody>
-              {failedBatches.map((b) => (
-                <tr key={b.ref} className="border-t border-gray-50 hover:bg-gray-50 transition-colors">
-                  <td className="px-6 py-3 font-mono text-xs text-gray-700">{b.ref}</td>
-                  <td className="px-6 py-3 text-gray-600">{b.ministry}</td>
-                  <td className="px-6 py-3 text-right font-medium text-gray-700">{b.amount}</td>
-                  <td className="px-6 py-3 text-gray-500 text-xs">{b.reason}</td>
-                  <td className="px-6 py-3"><StatusBadge status={b.status} /></td>
-                </tr>
-              ))}
+              {failedBatches.length > 0
+                ? failedBatches.map((b) => (
+                    <tr key={b.batchId} className="border-t border-gray-50 hover:bg-gray-50 transition-colors">
+                      <td className="px-6 py-3 font-mono text-xs text-gray-700">{b.batchId}</td>
+                      <td className="px-6 py-3 text-gray-600">{b.startedAt ? new Date(b.startedAt).toLocaleString() : '-'}</td>
+                      <td className="px-6 py-3 text-right font-medium text-gray-700">{formatAmount(b.totalAmount)}</td>
+                      <td className="px-6 py-3"><StatusBadge status={b.status} /></td>
+                    </tr>
+                  ))
+                : (
+                    <tr>
+                      <td colSpan={4} className="text-center text-muted-foreground py-8">
+                        No failed batches.
+                      </td>
+                    </tr>
+                  )
+              }
             </tbody>
           </table>
         </CardContent>
diff --git a/src/pages/BatchDetail.tsx b/src/pages/BatchDetail.tsx
new file mode 100644
index 0000000..1375707
--- /dev/null
+++ b/src/pages/BatchDetail.tsx
@@ -0,0 +1 @@
+export { default } from '@/modules/payment-hub/BatchDetail'
diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
index b36c5be..6aaee33 100644
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -1,14 +1,14 @@
 import { Link, useNavigate } from 'react-router-dom'
+import { useQuery } from '@tanstack/react-query'
 import { TrendingUp, Landmark, Ticket, Users, SlidersHorizontal, UserPlus } from 'lucide-react'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import StatusBadge from '@/components/shared/StatusBadge'
-import { mainBatches } from '@/modules/payment-hub/mocks/mainBatches.mock'
+import { fetchMainBatches } from '@/lib/api/paymentHub'
+import { mainBatches as mockBatches } from '@/modules/payment-hub/mocks/mainBatches.mock'
 import { vouchers } from '@/modules/vouchers/mocks/vouchers.mock'
 import { g2pConfigs } from '@/modules/g2p-config/mocks/g2pConfigs.mock'
-import { mockUsers } from '@/modules/rbac/mocks/users.mock'
 
 const activeG2P = g2pConfigs.filter((c) => c.status === 'Active').length
-const recentBatches = mainBatches.slice(0, 5)
 const recentVouchers = vouchers.slice(0, 5)
 
 function formatAmount(n: number) {
@@ -20,6 +20,21 @@ function formatAmount(n: number) {
 export default function Dashboard() {
   const navigate = useNavigate()
 
+  const { data: batchData, isLoading: isBatchesLoading, isError: isBatchesError } = useQuery({
+    queryKey: ['mainBatches'],
+    queryFn: fetchMainBatches,
+  })
+
+  const batches = isBatchesError ? mockBatches : (batchData?.data ?? [])
+  const recentBatches = batches.slice(0, 5)
+
+  const totalBatches = batches.length
+  const totalTransactions = batches.reduce((sum, b) => sum + b.totalTransactions, 0)
+  const totalAmount = Math.abs(
+    batches.reduce((sum, b) => sum + (b.totalAmount ?? 0), 0) / 100
+  ).toLocaleString()
+  const completedBatches = batches.filter((b) => b.status === 'COMPLETED').length
+
   return (
     <div className="space-y-6">
       <h1 className="text-2xl font-semibold text-gray-800">Dashboard</h1>
@@ -28,35 +43,39 @@ export default function Dashboard() {
       <div className="grid grid-cols-4 gap-4">
         <StatCard
           label="Total Batches"
-          value={mainBatches.length}
+          value={totalBatches}
           subtitle="Payment Hub"
           icon={<Landmark size={20} className="text-white" />}
           iconBg="bg-[#1565C0]"
           trend="up"
+          isLoading={isBatchesLoading}
         />
         <StatCard
-          label="Total Vouchers"
-          value={vouchers.length}
-          subtitle="Voucher Management"
+          label="Total Transactions"
+          value={totalTransactions}
+          subtitle="Payment Hub"
           icon={<Ticket size={20} className="text-white" />}
           iconBg="bg-emerald-500"
           trend="up"
+          isLoading={isBatchesLoading}
         />
         <StatCard
-          label="Total Beneficiaries"
-          value={mockUsers.length}
-          subtitle="Account Mapper"
+          label="Total Amount Disbursed"
+          value={`$${totalAmount}`}
+          subtitle="Payment Hub"
           icon={<Users size={20} className="text-white" />}
           iconBg="bg-orange-500"
           trend="up"
+          isLoading={isBatchesLoading}
         />
         <StatCard
-          label="Active G2P Configs"
-          value={activeG2P}
-          subtitle="G2P Payment Config"
+          label="Completed Batches"
+          value={completedBatches}
+          subtitle="Payment Hub"
           icon={<SlidersHorizontal size={20} className="text-white" />}
           iconBg="bg-purple-500"
           dot
+          isLoading={isBatchesLoading}
         />
       </div>
 
@@ -77,22 +96,34 @@ export default function Dashboard() {
               <thead>
                 <tr className="border-t border-gray-100">
                   <th className="text-left px-6 py-2.5 text-xs font-medium text-gray-500 uppercase tracking-wide">Batch Reference</th>
-                  <th className="text-left px-6 py-2.5 text-xs font-medium text-gray-500 uppercase tracking-wide">Source Ministry</th>
+                  <th className="text-left px-6 py-2.5 text-xs font-medium text-gray-500 uppercase tracking-wide">Start Time</th>
+                  <th className="text-left px-6 py-2.5 text-xs font-medium text-gray-500 uppercase tracking-wide">Completed Time</th>
                   <th className="text-right px-6 py-2.5 text-xs font-medium text-gray-500 uppercase tracking-wide">Amount</th>
                   <th className="text-left px-6 py-2.5 text-xs font-medium text-gray-500 uppercase tracking-wide">Status</th>
                 </tr>
               </thead>
               <tbody>
-                {recentBatches.map((b) => (
-                  <tr key={b.batchReferenceNumber} className="border-t border-gray-50 hover:bg-gray-50 transition-colors">
-                    <td className="px-6 py-3 font-mono text-xs text-gray-700">{b.batchReferenceNumber}</td>
-                    <td className="px-6 py-3 text-gray-600">{b.sourceMinistry}</td>
-                    <td className="px-6 py-3 text-right text-gray-700 font-medium">{formatAmount(b.amount)}</td>
-                    <td className="px-6 py-3">
-                      <StatusBadge status={b.status} />
-                    </td>
-                  </tr>
-                ))}
+                {isBatchesLoading
+                  ? Array.from({ length: 5 }).map((_, i) => (
+                      <tr key={i} className="border-t border-gray-50">
+                        {Array.from({ length: 5 }).map((__, j) => (
+                          <td key={j} className="px-6 py-3">
+                            <div className="h-4 rounded bg-gray-100 animate-pulse w-full" />
+                          </td>
+                        ))}
+                      </tr>
+                    ))
+                  : recentBatches.map((b) => (
+                      <tr key={b.batchId} className="border-t border-gray-50 hover:bg-gray-50 transition-colors">
+                        <td className="px-6 py-3 font-mono text-xs text-gray-700">{b.batchId}</td>
+                        <td className="px-6 py-3 text-gray-600">{b.startedAt ? new Date(b.startedAt).toLocaleString() : '-'}</td>
+                        <td className="px-6 py-3 text-gray-600">{b.completedAt ? new Date(b.completedAt).toLocaleString() : '-'}</td>
+                        <td className="px-6 py-3 text-right text-gray-700 font-medium">{formatAmount(b.totalAmount ?? 0)}</td>
+                        <td className="px-6 py-3">
+                          <StatusBadge status={b.status ?? 'Unknown'} />
+                        </td>
+                      </tr>
+                    ))}
               </tbody>
             </table>
           </CardContent>
@@ -110,22 +141,38 @@ export default function Dashboard() {
           </CardHeader>
           <CardContent className="p-0">
             <ul>
-              {recentVouchers.map((v, i) => (
-                <li
-                  key={v.serialNumber}
-                  className={[
-                    'flex items-center justify-between px-6 py-3 gap-3',
-                    i !== 0 ? 'border-t border-gray-50' : '',
-                    'hover:bg-gray-50 transition-colors',
-                  ].join(' ')}
-                >
-                  <div className="min-w-0">
-                    <p className="font-mono text-xs text-gray-700 truncate">{v.serialNumber}</p>
-                    <p className="text-xs text-gray-400 truncate mt-0.5">{v.governmentEntity}</p>
-                  </div>
-                  <StatusBadge status={v.status} />
-                </li>
-              ))}
+              {isBatchesLoading
+                ? Array.from({ length: 5 }).map((_, i) => (
+                    <li
+                      key={i}
+                      className={[
+                        'flex items-center justify-between px-6 py-3 gap-3',
+                        i !== 0 ? 'border-t border-gray-50' : '',
+                      ].join(' ')}
+                    >
+                      <div className="min-w-0 space-y-1.5">
+                        <div className="h-3.5 bg-gray-200 rounded animate-pulse w-28" />
+                        <div className="h-3 bg-gray-200 rounded animate-pulse w-20" />
+                      </div>
+                      <div className="h-5 bg-gray-200 rounded-full animate-pulse w-16" />
+                    </li>
+                  ))
+                : recentVouchers.map((v, i) => (
+                    <li
+                      key={v.serialNumber}
+                      className={[
+                        'flex items-center justify-between px-6 py-3 gap-3',
+                        i !== 0 ? 'border-t border-gray-50' : '',
+                        'hover:bg-gray-50 transition-colors',
+                      ].join(' ')}
+                    >
+                      <div className="min-w-0">
+                        <p className="font-mono text-xs text-gray-700 truncate">{v.serialNumber}</p>
+                        <p className="text-xs text-gray-400 truncate mt-0.5">{v.governmentEntity}</p>
+                      </div>
+                      <StatusBadge status={v.status} />
+                    </li>
+                  ))}
             </ul>
           </CardContent>
         </Card>
@@ -175,14 +222,16 @@ function StatCard({
   iconBg,
   trend,
   dot,
+  isLoading,
 }: {
   label: string
-  value: number
+  value: number | string
   subtitle: string
   icon: React.ReactNode
   iconBg: string
   trend?: 'up'
   dot?: boolean
+  isLoading?: boolean
 }) {
   return (
     <Card>
@@ -191,11 +240,15 @@ function StatCard({
           <div>
             <p className="text-xs text-gray-500 font-medium mb-1">{label}</p>
             <div className="flex items-end gap-1.5">
-              <span className="text-3xl font-bold text-gray-800">{value}</span>
-              {trend === 'up' && (
+              {isLoading ? (
+                <div className="h-8 w-16 rounded bg-gray-100 animate-pulse" />
+              ) : (
+                <span className="text-3xl font-bold text-gray-800">{value}</span>
+              )}
+              {!isLoading && trend === 'up' && (
                 <TrendingUp size={15} className="text-emerald-500 mb-1.5" />
               )}
-              {dot && (
+              {!isLoading && dot && (
                 <span className="w-2 h-2 rounded-full bg-emerald-500 mb-2.5 inline-block" />
               )}
             </div>