diff --git a/app/api/docs/SwaggerUIWrapper.tsx b/app/api/docs/SwaggerUIWrapper.tsx
index e01affa..8b5c289 100644
--- a/app/api/docs/SwaggerUIWrapper.tsx
+++ b/app/api/docs/SwaggerUIWrapper.tsx
@@ -113,7 +113,7 @@ export default function SwaggerUIWrapper({ specUrl }: SwaggerUIWrapperProps) {
                 RemitWise API Documentation
               </h2>
               <p className="text-gray-300 text-base sm:text-lg leading-relaxed mb-6">
-                Complete reference for integrating with RemitWise's remittance and financial planning services. 
+                Complete reference for integrating with RemitWise&apos;s remittance and financial planning services. 
                 Build secure, scalable applications with our comprehensive API.
               </p>
               <div className="flex flex-wrap gap-4">
diff --git a/app/bills/page.tsx b/app/bills/page.tsx
index 755e577..583ae67 100644
--- a/app/bills/page.tsx
+++ b/app/bills/page.tsx
@@ -129,6 +129,57 @@ export default function Bills() {
 		}
 	}, [toast]);
 
+	const [bills, setBills] = useState<Bill[]>([]);
+	const [stats, setStats] = useState<any>(null);
+	const [isLoading, setIsLoading] = useState(true);
+	const [error, setError] = useState<Error | null>(null);
+
+	const fetchBillsData = async () => {
+		setIsLoading(true);
+		setError(null);
+		try {
+			const [billsRes, statsRes] = await Promise.all([
+				apiClient.get('/api/bills'),
+				apiClient.get('/api/bills/total-unpaid')
+			]);
+			
+			if (!billsRes || !statsRes) throw new Error("Session expired");
+			if (!billsRes.ok || !statsRes.ok) throw new Error("Failed to load bills data");
+			
+			const billsJson = await billsRes.json();
+			const statsJson = await statsRes.json();
+			
+			const fetchedBills: Bill[] = billsJson.data?.bills || [];
+			const fetchedStats = statsJson.data;
+
+			setBills(fetchedBills);
+
+			const paidBills = fetchedBills.filter((b: Bill) => b.status === 'paid');
+			const paidAmount = paidBills.reduce((acc: number, b: Bill) => acc + b.amount, 0);
+			const overdueCount = fetchedBills.filter((b: Bill) => b.status === 'overdue' || b.status === 'urgent').length;
+
+			setStats({
+				totalUnpaid: {
+					amount: fetchedStats?.totalUnpaid?.toLocaleString() || '0',
+					pendingCount: fetchedStats?.count || 0
+				},
+				overdueCount,
+				paidThisMonth: {
+					amount: paidAmount.toLocaleString(),
+					paymentCount: paidBills.length
+				}
+			});
+		} catch (err) {
+			setError(err instanceof Error ? err : new Error("Unknown error"));
+		} finally {
+			setIsLoading(false);
+		}
+	};
+
+	useEffect(() => {
+		fetchBillsData();
+	}, []);
+
 	function handleAddBill() {
 		formSectionRef.current?.scrollIntoView({
 			behavior: "smooth",
@@ -147,17 +198,34 @@ export default function Bills() {
 			/>
 
 			<main className='mx-auto max-w-7xl px-4 py-6 sm:px-6 sm:py-8 lg:px-8'>
-				<section className='mb-8'>
-					<BillPaymentsStatsCards />
-				</section>
+				{error ? (
+					<div className="mb-8">
+						<WidgetErrorState 
+							title="Failed to load bills" 
+							message={error.message} 
+							onRetry={fetchBillsData} 
+						/>
+					</div>
+				) : isLoading ? (
+					<div className="mb-8 space-y-8">
+						<SkeletonList rows={3} variant="cards" />
+						<SkeletonList rows={3} variant="table" />
+					</div>
+				) : (
+					<>
+						<section className='mb-8'>
+							<BillPaymentsStatsCards stats={stats} />
+						</section>
 
-				<div className='mb-8'>
-					<UnpaidBillsSection />
-				</div>
+						<div className='mb-8'>
+							<UnpaidBillsSection bills={bills} />
+						</div>
 
-				<div className='mb-8'>
-					<RecentPaymentsSection />
-				</div>
+						<div className='mb-8'>
+							<RecentPaymentsSection bills={bills} />
+						</div>
+					</>
+				)}
 
 				<div className='grid gap-8 xl:grid-cols-[minmax(0,1.1fr)_360px] xl:items-start'>
 					<div
diff --git a/components/Bills/BillsCard.tsx b/components/Bills/BillsCard.tsx
index 4f11cba..8437ece 100644
--- a/components/Bills/BillsCard.tsx
+++ b/components/Bills/BillsCard.tsx
@@ -63,7 +63,7 @@ const STATUS_STYLES: Record<
 // ─── Status badge ─────────────────────────────────────────────────────────────
 
 function StatusBadge({ status }: { status: Bill["status"] }) {
-  const s = STATUS_STYLES[status];
+  const s = getStatusStyles(status)!;
   const label: Record<Bill["status"], string> = {
     overdue: "Overdue",
     urgent: "Due Soon",
@@ -79,7 +79,7 @@ function StatusBadge({ status }: { status: Bill["status"] }) {
 
   return (
     <span
-      className={`inline-flex items-center gap-1 rounded-[10px] border px-2 py-0.5 text-xs font-semibold ${s.badgeBg} ${s.badgeBorder} ${s.badgeText}`}
+      className={`inline-flex items-center gap-1 rounded-[10px] border px-2 py-0.5 text-xs font-semibold ${s.dueBg} ${s.border} text-white`}
       aria-label={`Status: ${label[status]}`}
     >
       <Icon className="h-3 w-3" aria-hidden="true" />
@@ -88,7 +88,7 @@ function StatusBadge({ status }: { status: Bill["status"] }) {
   );
 }
 
-// ─── Recurring chain badge ────────────────────────────────────────────────────
+// ─── Exported Component ─────────────────────────────────────────────────────────
 
 function RecurringBadge({
   recurrenceLabel,
diff --git a/components/Bills/RecentPaymentsSection.tsx b/components/Bills/RecentPaymentsSection.tsx
index 1135cc8..f84e3f3 100644
--- a/components/Bills/RecentPaymentsSection.tsx
+++ b/components/Bills/RecentPaymentsSection.tsx
@@ -1,11 +1,13 @@
 "use client";
 
 import { BillCards } from "@/components/Bills/BillsCard";
-import { mockPaidBills } from "@/lib/mockdata/bills";
 import { useDensity } from "@/lib/context/DensityContext";
+import { Bill } from '@/lib/contracts/bill-payments';
+import { WidgetEmptyState } from '@/components/ui/WidgetStates';
 
-export default function RecentPaymentsSection() {
+export default function RecentPaymentsSection({ bills }: { bills: Bill[] }) {
   const { density } = useDensity();
+  const paidBills = bills.filter((bill) => bill.status === 'paid');
 
   return (
     <section
@@ -19,18 +21,22 @@ export default function RecentPaymentsSection() {
         </p>
       </div>
 
-      <div
-        role="list"
-        className={
-          density === "compact"
-            ? "flex flex-col gap-2"
-            : "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3"
-        }
-      >
-        {mockPaidBills.map((bill) => (
-          <BillCards key={bill.id} bill={bill} density={density} />
-        ))}
-      </div>
+      {paidBills.length > 0 ? (
+        <div
+          role="list"
+          className={
+            density === "compact"
+              ? "flex flex-col gap-2"
+              : "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3"
+          }
+        >
+          {paidBills.map((bill) => (
+            <BillCards key={bill.id} bill={bill} density={density} />
+          ))}
+        </div>
+      ) : (
+        <WidgetEmptyState title="No recent payments" message="Paid bills will appear here once processed." />
+      )}
     </section>
   );
 }
diff --git a/components/Bills/UnpaidBillsSection.tsx b/components/Bills/UnpaidBillsSection.tsx
index c8a3575..4ba7e45 100644
--- a/components/Bills/UnpaidBillsSection.tsx
+++ b/components/Bills/UnpaidBillsSection.tsx
@@ -1,13 +1,14 @@
 import React from 'react';
 import { BillCards } from './BillsCard';
-import { mockBills } from '@/lib/mockdata/bills';
 import { useDensity } from '@/lib/context/DensityContext';
+import { Bill } from '@/lib/contracts/bill-payments';
+import { WidgetEmptyState } from '@/components/ui/WidgetStates';
 
 export function UnpaidBillsSection() {
     const { density } = useDensity();
     const unpaidStatuses: Bill['status'][] = ['overdue', 'urgent', 'upcoming'];
 
-    const unpaidBills = mockBills.filter((bill) =>
+    const unpaidBills = bills.filter((bill) =>
         unpaidStatuses.includes(bill.status)
     );
     const recurringUnpaidCount = unpaidBills.filter((bill) => bill.isRecurring).length;
diff --git a/components/ui/WidgetStates.tsx b/components/ui/WidgetStates.tsx
new file mode 100644
index 0000000..50c1d54
--- /dev/null
+++ b/components/ui/WidgetStates.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { AlertCircle, AlertTriangle, RefreshCcw } from 'lucide-react';
+
+export function WidgetEmptyState({ title, message }: { title: string; message?: string }) {
+  return (
+    <div className="flex flex-col items-center justify-center p-8 text-center bg-[#010101] rounded-2xl border border-white/5">
+      <AlertCircle className="w-8 h-8 text-gray-500 mb-3" />
+      <h3 className="text-white font-medium">{title}</h3>
+      {message && <p className="text-gray-400 text-sm mt-1">{message}</p>}
+    </div>
+  );
+}
+
+export function WidgetErrorState({ title, message, onRetry }: { title: string; message?: string; onRetry?: () => void }) {
+  return (
+    <div className="flex flex-col items-center justify-center p-8 text-center bg-[#010101] rounded-2xl border border-white/5">
+      <AlertTriangle className="w-8 h-8 text-red-500 mb-3" />
+      <h3 className="text-white font-medium">{title}</h3>
+      {message && <p className="text-gray-400 text-sm mt-1">{message}</p>}
+      {onRetry && (
+        <button onClick={onRetry} className="mt-4 flex items-center gap-2 text-sm text-red-400 hover:text-red-300 transition-colors">
+          <RefreshCcw className="w-4 h-4" /> Try again
+        </button>
+      )}
+    </div>
+  );
+}