diff --git a/client/components/BillModal.jsx b/client/components/BillModal.jsx
index 5cba163..54d9c64 100644
--- a/client/components/BillModal.jsx
+++ b/client/components/BillModal.jsx
@@ -1,5 +1,5 @@
 import { useActionState, useEffect, useState } from 'react';
-import { Copy, Layers, Link2, Link2Off, Loader2, Pencil, Plus, RefreshCw, Trash2 } from 'lucide-react';
+import { Copy, Layers, Link2, Link2Off, Loader2, RefreshCw } from 'lucide-react';
 import { formatCentsUSD, validateNonNegativeMoney } from '@/lib/money';
 import { toast } from 'sonner';
 import { Button } from '@/components/ui/button';
@@ -21,6 +21,7 @@ import { cn, fmt, fmtDate, todayStr } from '@/lib/utils';
 import BillMerchantRules from '@/components/BillMerchantRules';
 import DebtDetailsSection from '@/components/bill-modal/DebtDetailsSection';
 import AutopayTrustIndicator from '@/components/bill-modal/AutopayTrustIndicator';
+import PaymentHistoryList from '@/components/bill-modal/PaymentHistoryList';
 import {
   BILLING_SCHEDULE_OPTIONS,
   billingCycleForSchedule,
@@ -76,36 +77,6 @@ function transactionTitle(tx) {
   return tx?.payee || tx?.description || tx?.memo || 'Transaction';
 }
 
-function isTransactionLinkedPayment(payment) {
-  return payment?.payment_source === 'transaction_match' || payment?.transaction_id != null;
-}
-
-function isHistoryOnlyPayment(payment) {
-  return !!payment?.accounting_excluded;
-}
-
-function paymentSourceLabel(source) {
-  const labels = {
-    manual: 'Manual',
-    file_import: 'File import',
-    provider_sync: 'Sync',
-    transaction_match: 'Transaction',
-    auto_match: 'SimpleFIN',
-  };
-  return labels[source] || source || 'Manual';
-}
-
-function paymentSourceTone(source) {
-  const tones = {
-    manual: 'border-emerald-500/25 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400',
-    file_import: 'border-sky-500/25 bg-sky-500/10 text-sky-600 dark:text-sky-400',
-    provider_sync: 'border-violet-500/25 bg-violet-500/10 text-violet-600 dark:text-violet-400',
-    transaction_match: 'border-primary/25 bg-primary/10 text-primary',
-    auto_match: 'border-violet-500/25 bg-violet-500/10 text-violet-600 dark:text-violet-400',
-  };
-  return tones[source] || tones.manual;
-}
-
 function isDebtCat(categories, catId) {
   if (!catId || catId === CAT_NONE) return false;
   const cat = categories.find(c => String(c.id) === catId);
@@ -968,86 +939,14 @@ export default function BillModal({ bill, initialBill, categories, onClose, onSa
 
         {!isNew && (
           <div className="mt-4 border-t border-border/50 pt-4">
-            <div className="mb-3 flex items-center justify-between gap-3">
-              <div>
-                <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Payment history</p>
-                <p className="text-[11px] text-muted-foreground/75">{payments.length} recorded</p>
-              </div>
-              <Button type="button" size="sm" variant="outline" disabled={paymentBusy} onClick={startAddPayment} className="h-8 gap-2 text-xs">
-                <Plus className="h-3.5 w-3.5" />
-                Add Payment
-              </Button>
-            </div>
-
-            {paymentsLoading ? (
-              <div className="rounded-lg border border-border/60 bg-muted/20 px-3 py-8 text-center text-sm text-muted-foreground">
-                Loading payment history...
-              </div>
-            ) : payments.length === 0 ? (
-              <div className="flex flex-col items-center gap-1.5 rounded-lg bg-muted/20 px-3 py-8 text-center">
-                <p className="text-sm font-medium text-muted-foreground">No payments yet</p>
-                <p className="text-xs text-muted-foreground/60">Use the form below to record the first payment.</p>
-              </div>
-            ) : (
-              <div className="max-h-52 space-y-2 overflow-y-auto pr-1">
-                {payments.map(payment => {
-                  const linkedPayment = isTransactionLinkedPayment(payment);
-                  const historyOnly = isHistoryOnlyPayment(payment);
-                  return (
-                    <div key={payment.id} className={cn(
-                      'flex items-start justify-between gap-3 rounded-lg border px-3 py-2.5',
-                      historyOnly
-                        ? 'border-amber-500/25 bg-amber-500/[0.06] opacity-85'
-                        : 'border-border/60 bg-background/35'
-                    )}>
-                      <div className="min-w-0">
-                        <div className="flex flex-wrap items-center gap-2">
-                          <p className={cn('font-mono text-sm font-semibold', historyOnly ? 'text-muted-foreground line-through decoration-amber-500/70' : 'text-foreground')}>{fmt(payment.amount)}</p>
-                          <span className={cn(
-                            'rounded-md border px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide',
-                            paymentSourceTone(payment.payment_source),
-                          )}>
-                            {paymentSourceLabel(payment.payment_source)}
-                          </span>
-                          {historyOnly && (
-                            <span className="rounded-md border border-amber-500/30 bg-amber-500/10 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-amber-600 dark:text-amber-300">
-                              History only
-                            </span>
-                          )}
-                        </div>
-                        <p className="mt-0.5 truncate text-xs text-muted-foreground">
-                          {fmtDate(payment.paid_date)} · {payment.method || (payment.payment_source === 'transaction_match' ? 'Synced' : 'manual')}
-                        </p>
-                        {payment.notes && (
-                          <p className="mt-0.5 truncate text-xs text-muted-foreground/80">{payment.notes}</p>
-                        )}
-                      </div>
-                      <div className="flex shrink-0 gap-1">
-                        {historyOnly ? (
-                          <span className="inline-flex h-8 items-center rounded-md border border-amber-500/25 bg-amber-500/10 px-2 text-[11px] font-medium text-amber-600 dark:text-amber-300">
-                            Overridden
-                          </span>
-                        ) : linkedPayment ? (
-                          <span className="inline-flex h-8 items-center gap-1.5 rounded-md border border-primary/20 bg-primary/5 px-2 text-[11px] font-medium text-primary">
-                            <Link2 className="h-3.5 w-3.5" />
-                            Matched
-                          </span>
-                        ) : (
-                          <>
-                            <Button type="button" size="icon" variant="ghost" disabled={paymentBusy} onClick={() => startEditPayment(payment)} className="h-8 w-8" aria-label="Edit payment">
-                              <Pencil className="h-3.5 w-3.5" />
-                            </Button>
-                            <Button type="button" size="icon" variant="ghost" disabled={paymentBusy} onClick={() => setDeletePaymentTarget(payment)} className="h-8 w-8 text-destructive hover:bg-destructive/10 hover:text-destructive" aria-label="Remove payment">
-                              <Trash2 className="h-3.5 w-3.5" />
-                            </Button>
-                          </>
-                        )}
-                      </div>
-                    </div>
-                  );
-                })}
-              </div>
-            )}
+            <PaymentHistoryList
+              payments={payments}
+              paymentsLoading={paymentsLoading}
+              paymentBusy={paymentBusy}
+              onAdd={startAddPayment}
+              onEdit={startEditPayment}
+              onDelete={setDeletePaymentTarget}
+            />
 
             {/* Bank Matching Rules */}
             {!isNew && (
diff --git a/client/components/bill-modal/PaymentHistoryList.jsx b/client/components/bill-modal/PaymentHistoryList.jsx
new file mode 100644
index 0000000..52a3a6a
--- /dev/null
+++ b/client/components/bill-modal/PaymentHistoryList.jsx
@@ -0,0 +1,131 @@
+import { Plus, Link2, Pencil, Trash2 } from 'lucide-react';
+import { cn, fmt, fmtDate } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+
+function isTransactionLinkedPayment(payment) {
+  return payment?.payment_source === 'transaction_match' || payment?.transaction_id != null;
+}
+
+function isHistoryOnlyPayment(payment) {
+  return !!payment?.accounting_excluded;
+}
+
+function paymentSourceLabel(source) {
+  const labels = {
+    manual: 'Manual',
+    file_import: 'File import',
+    provider_sync: 'Sync',
+    transaction_match: 'Transaction',
+    auto_match: 'SimpleFIN',
+  };
+  return labels[source] || source || 'Manual';
+}
+
+function paymentSourceTone(source) {
+  const tones = {
+    manual: 'border-emerald-500/25 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400',
+    file_import: 'border-sky-500/25 bg-sky-500/10 text-sky-600 dark:text-sky-400',
+    provider_sync: 'border-violet-500/25 bg-violet-500/10 text-violet-600 dark:text-violet-400',
+    transaction_match: 'border-primary/25 bg-primary/10 text-primary',
+    auto_match: 'border-violet-500/25 bg-violet-500/10 text-violet-600 dark:text-violet-400',
+  };
+  return tones[source] || tones.manual;
+}
+
+// Payment-history list for a bill (edit mode): each recorded payment with its
+// source badge, plus edit/remove actions for manual payments (matched and
+// history-only rows are read-only). Presentational — the parent owns the
+// payment state and the add/edit/delete handlers.
+export default function PaymentHistoryList({
+  payments,
+  paymentsLoading,
+  paymentBusy,
+  onAdd,
+  onEdit,
+  onDelete,
+}) {
+  return (
+    <>
+      <div className="mb-3 flex items-center justify-between gap-3">
+        <div>
+          <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Payment history</p>
+          <p className="text-[11px] text-muted-foreground/75">{payments.length} recorded</p>
+        </div>
+        <Button type="button" size="sm" variant="outline" disabled={paymentBusy} onClick={onAdd} className="h-8 gap-2 text-xs">
+          <Plus className="h-3.5 w-3.5" />
+          Add Payment
+        </Button>
+      </div>
+
+      {paymentsLoading ? (
+        <div className="rounded-lg border border-border/60 bg-muted/20 px-3 py-8 text-center text-sm text-muted-foreground">
+          Loading payment history...
+        </div>
+      ) : payments.length === 0 ? (
+        <div className="flex flex-col items-center gap-1.5 rounded-lg bg-muted/20 px-3 py-8 text-center">
+          <p className="text-sm font-medium text-muted-foreground">No payments yet</p>
+          <p className="text-xs text-muted-foreground/60">Use the form below to record the first payment.</p>
+        </div>
+      ) : (
+        <div className="max-h-52 space-y-2 overflow-y-auto pr-1">
+          {payments.map(payment => {
+            const linkedPayment = isTransactionLinkedPayment(payment);
+            const historyOnly = isHistoryOnlyPayment(payment);
+            return (
+              <div key={payment.id} className={cn(
+                'flex items-start justify-between gap-3 rounded-lg border px-3 py-2.5',
+                historyOnly
+                  ? 'border-amber-500/25 bg-amber-500/[0.06] opacity-85'
+                  : 'border-border/60 bg-background/35'
+              )}>
+                <div className="min-w-0">
+                  <div className="flex flex-wrap items-center gap-2">
+                    <p className={cn('font-mono text-sm font-semibold', historyOnly ? 'text-muted-foreground line-through decoration-amber-500/70' : 'text-foreground')}>{fmt(payment.amount)}</p>
+                    <span className={cn(
+                      'rounded-md border px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide',
+                      paymentSourceTone(payment.payment_source),
+                    )}>
+                      {paymentSourceLabel(payment.payment_source)}
+                    </span>
+                    {historyOnly && (
+                      <span className="rounded-md border border-amber-500/30 bg-amber-500/10 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-amber-600 dark:text-amber-300">
+                        History only
+                      </span>
+                    )}
+                  </div>
+                  <p className="mt-0.5 truncate text-xs text-muted-foreground">
+                    {fmtDate(payment.paid_date)} · {payment.method || (payment.payment_source === 'transaction_match' ? 'Synced' : 'manual')}
+                  </p>
+                  {payment.notes && (
+                    <p className="mt-0.5 truncate text-xs text-muted-foreground/80">{payment.notes}</p>
+                  )}
+                </div>
+                <div className="flex shrink-0 gap-1">
+                  {historyOnly ? (
+                    <span className="inline-flex h-8 items-center rounded-md border border-amber-500/25 bg-amber-500/10 px-2 text-[11px] font-medium text-amber-600 dark:text-amber-300">
+                      Overridden
+                    </span>
+                  ) : linkedPayment ? (
+                    <span className="inline-flex h-8 items-center gap-1.5 rounded-md border border-primary/20 bg-primary/5 px-2 text-[11px] font-medium text-primary">
+                      <Link2 className="h-3.5 w-3.5" />
+                      Matched
+                    </span>
+                  ) : (
+                    <>
+                      <Button type="button" size="icon" variant="ghost" disabled={paymentBusy} onClick={() => onEdit(payment)} className="h-8 w-8" aria-label="Edit payment">
+                        <Pencil className="h-3.5 w-3.5" />
+                      </Button>
+                      <Button type="button" size="icon" variant="ghost" disabled={paymentBusy} onClick={() => onDelete(payment)} className="h-8 w-8 text-destructive hover:bg-destructive/10 hover:text-destructive" aria-label="Remove payment">
+                        <Trash2 className="h-3.5 w-3.5" />
+                      </Button>
+                    </>
+                  )}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </>
+  );
+}