diff --git a/src/components/trust/trust-account-panel.tsx b/src/components/trust/trust-account-panel.tsx
new file mode 100644
index 0000000..a46df08
--- /dev/null
+++ b/src/components/trust/trust-account-panel.tsx
@@ -0,0 +1,421 @@
+import { useEffect, useState, useCallback } from "react";
+import { Link } from "@tanstack/react-router";
+import { supabase } from "@/integrations/supabase/client";
+import { useAuth } from "@/lib/auth";
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Wallet, Plus, ArrowDownToLine, ArrowUpFromLine, Trash2, Loader2 } from "lucide-react";
+import { formatCurrency, formatDate } from "@/lib/format";
+import { toast } from "sonner";
+
+interface Entry {
+  id: string;
+  entry_date: string;
+  entry_type: "deposit" | "withdrawal";
+  amount: number;
+  note: string | null;
+  source_invoice_id: string | null;
+  applied_invoice_id: string | null;
+  created_by: string | null;
+}
+
+export function TrustAccountPanel({ clientId }: { clientId: string }) {
+  const { user, isAdmin } = useAuth();
+  const [entries, setEntries] = useState<Entry[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [adjustOpen, setAdjustOpen] = useState<null | "deposit" | "withdrawal">(null);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    const { data } = await supabase
+      .from("trust_ledger_entries")
+      .select("*")
+      .eq("client_id", clientId)
+      .order("entry_date", { ascending: false })
+      .order("created_at", { ascending: false });
+    setEntries((data ?? []) as Entry[]);
+    setLoading(false);
+  }, [clientId]);
+
+  useEffect(() => {
+    load();
+    const ch = supabase
+      .channel(`trust-${clientId}`)
+      .on(
+        "postgres_changes",
+        { event: "*", schema: "public", table: "trust_ledger_entries", filter: `client_id=eq.${clientId}` },
+        () => load(),
+      )
+      .subscribe();
+    return () => {
+      supabase.removeChannel(ch);
+    };
+  }, [clientId, load]);
+
+  const balance = entries.reduce(
+    (sum, e) => sum + (e.entry_type === "deposit" ? Number(e.amount) : -Number(e.amount)),
+    0,
+  );
+
+  const removeEntry = async (id: string) => {
+    if (!confirm("Remove this trust ledger entry? This will not reverse the related invoice payment.")) return;
+    const { error } = await supabase.from("trust_ledger_entries").delete().eq("id", id);
+    if (error) return toast.error(error.message);
+    toast.success("Entry removed");
+    load();
+  };
+
+  return (
+    <Card className="border-border/60">
+      <CardContent className="p-5 space-y-4">
+        <div className="flex items-start justify-between gap-3">
+          <div className="flex items-center gap-2">
+            <Wallet className="h-4 w-4 text-muted-foreground" />
+            <h3 className="font-serif text-lg">Trust account</h3>
+          </div>
+          <div className="flex gap-1.5">
+            <Button size="sm" variant="outline" onClick={() => setAdjustOpen("deposit")}>
+              <Plus className="h-3.5 w-3.5 mr-1" /> Deposit
+            </Button>
+            <Button size="sm" variant="outline" onClick={() => setAdjustOpen("withdrawal")}>
+              <ArrowUpFromLine className="h-3.5 w-3.5 mr-1" /> Withdraw
+            </Button>
+          </div>
+        </div>
+
+        <div className="rounded-md bg-muted/40 p-4 flex items-baseline justify-between">
+          <span className="text-xs uppercase tracking-wider text-muted-foreground">Available balance</span>
+          <span
+            className={`font-serif text-2xl tabular-nums ${balance < 0 ? "text-destructive" : ""}`}
+          >
+            {formatCurrency(balance)}
+          </span>
+        </div>
+
+        <div>
+          <div className="text-xs uppercase tracking-wider text-muted-foreground mb-2">Ledger</div>
+          {loading ? (
+            <p className="text-sm text-muted-foreground">Loading…</p>
+          ) : entries.length === 0 ? (
+            <p className="text-sm text-muted-foreground italic">
+              No activity yet. Mark an invoice as a retainer and record payment to fund this account.
+            </p>
+          ) : (
+            <div className="divide-y">
+              {entries.map((e) => {
+                const isDeposit = e.entry_type === "deposit";
+                const link = isDeposit ? e.source_invoice_id : e.applied_invoice_id;
+                const canDelete = isAdmin || e.created_by === user?.id;
+                return (
+                  <div key={e.id} className="flex items-start justify-between gap-3 py-2.5 text-sm">
+                    <div className="flex items-start gap-2 min-w-0">
+                      <div
+                        className={`mt-0.5 h-6 w-6 rounded-full flex items-center justify-center ${
+                          isDeposit ? "bg-emerald-500/15 text-emerald-700 dark:text-emerald-400" : "bg-orange-500/15 text-orange-700 dark:text-orange-400"
+                        }`}
+                      >
+                        {isDeposit ? (
+                          <ArrowDownToLine className="h-3 w-3" />
+                        ) : (
+                          <ArrowUpFromLine className="h-3 w-3" />
+                        )}
+                      </div>
+                      <div className="min-w-0">
+                        <div className="font-medium">
+                          {isDeposit ? "Deposit" : "Withdrawal"}
+                          {e.note ? <span className="text-muted-foreground font-normal"> · {e.note}</span> : null}
+                        </div>
+                        <div className="text-[11px] text-muted-foreground">
+                          {formatDate(e.entry_date)}
+                          {link && (
+                            <>
+                              {" · "}
+                              <Link
+                                to="/invoices/$invoiceId"
+                                params={{ invoiceId: link }}
+                                className="hover:text-primary underline-offset-2 hover:underline"
+                              >
+                                {isDeposit ? "from invoice" : "to invoice"}
+                              </Link>
+                            </>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-1 shrink-0">
+                      <span
+                        className={`tabular-nums font-medium ${isDeposit ? "text-emerald-700 dark:text-emerald-400" : "text-orange-700 dark:text-orange-400"}`}
+                      >
+                        {isDeposit ? "+" : "−"}
+                        {formatCurrency(e.amount)}
+                      </span>
+                      {canDelete && (
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="h-6 w-6 text-muted-foreground hover:text-destructive"
+                          onClick={() => removeEntry(e.id)}
+                        >
+                          <Trash2 className="h-3 w-3" />
+                        </Button>
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      </CardContent>
+
+      <ManualAdjustDialog
+        open={!!adjustOpen}
+        type={adjustOpen ?? "deposit"}
+        onOpenChange={(v) => !v && setAdjustOpen(null)}
+        clientId={clientId}
+        userId={user?.id ?? null}
+        balance={balance}
+        onSaved={load}
+      />
+    </Card>
+  );
+}
+
+function ManualAdjustDialog({
+  open,
+  type,
+  onOpenChange,
+  clientId,
+  userId,
+  balance,
+  onSaved,
+}: {
+  open: boolean;
+  type: "deposit" | "withdrawal";
+  onOpenChange: (b: boolean) => void;
+  clientId: string;
+  userId: string | null;
+  balance: number;
+  onSaved: () => void;
+}) {
+  const [amount, setAmount] = useState("");
+  const [date, setDate] = useState(new Date().toISOString().slice(0, 10));
+  const [note, setNote] = useState("");
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    if (open) {
+      setAmount("");
+      setDate(new Date().toISOString().slice(0, 10));
+      setNote("");
+    }
+  }, [open]);
+
+  const save = async () => {
+    const amt = Number(amount);
+    if (!amt || amt <= 0) return toast.error("Enter a valid amount");
+    if (type === "withdrawal" && amt > balance) {
+      if (!confirm(`This will overdraw the trust by ${formatCurrency(amt - balance)}. Continue?`)) return;
+    }
+    setSaving(true);
+    const { error } = await supabase.from("trust_ledger_entries").insert({
+      client_id: clientId,
+      entry_date: date,
+      entry_type: type,
+      amount: amt,
+      note: note || (type === "deposit" ? "Manual deposit" : "Manual withdrawal"),
+      created_by: userId,
+    });
+    setSaving(false);
+    if (error) return toast.error(error.message);
+    toast.success(type === "deposit" ? "Deposit recorded" : "Withdrawal recorded");
+    onOpenChange(false);
+    onSaved();
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{type === "deposit" ? "Record trust deposit" : "Record trust withdrawal"}</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-3">
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <Label>Amount</Label>
+              <Input type="number" step="0.01" value={amount} onChange={(e) => setAmount(e.target.value)} />
+            </div>
+            <div>
+              <Label>Date</Label>
+              <Input type="date" value={date} onChange={(e) => setDate(e.target.value)} />
+            </div>
+          </div>
+          <div>
+            <Label>Note</Label>
+            <Textarea rows={2} value={note} onChange={(e) => setNote(e.target.value)} placeholder="Optional memo" />
+          </div>
+          {type === "withdrawal" && (
+            <p className="text-xs text-muted-foreground">
+              Available balance: <span className="tabular-nums">{formatCurrency(balance)}</span>
+            </p>
+          )}
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>Cancel</Button>
+          <Button onClick={save} disabled={saving}>
+            {saving && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}Save
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+/** Dialog used on an invoice detail page to apply trust funds toward its balance. */
+export function ApplyTrustDialog({
+  open,
+  onOpenChange,
+  clientId,
+  invoiceId,
+  invoiceNumber,
+  balanceDue,
+  userId,
+  onApplied,
+}: {
+  open: boolean;
+  onOpenChange: (b: boolean) => void;
+  clientId: string;
+  invoiceId: string;
+  invoiceNumber: string;
+  balanceDue: number;
+  userId: string | null;
+  onApplied: () => void;
+}) {
+  const [trustBalance, setTrustBalance] = useState<number | null>(null);
+  const [amount, setAmount] = useState("");
+  const [date, setDate] = useState(new Date().toISOString().slice(0, 10));
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    if (!open) return;
+    (async () => {
+      const { data } = await supabase
+        .from("trust_ledger_entries")
+        .select("entry_type, amount")
+        .eq("client_id", clientId);
+      const bal = (data ?? []).reduce(
+        (s: number, e: any) => s + (e.entry_type === "deposit" ? Number(e.amount) : -Number(e.amount)),
+        0,
+      );
+      setTrustBalance(bal);
+      const suggest = Math.min(bal, balanceDue);
+      setAmount(suggest > 0 ? suggest.toFixed(2) : "");
+      setDate(new Date().toISOString().slice(0, 10));
+    })();
+  }, [open, clientId, balanceDue]);
+
+  const apply = async () => {
+    const amt = Number(amount);
+    if (!amt || amt <= 0) return toast.error("Enter a valid amount");
+    if (amt > balanceDue) return toast.error("Amount exceeds invoice balance due");
+    if (trustBalance != null && amt > trustBalance) {
+      if (!confirm(`This will overdraw the trust by ${formatCurrency(amt - trustBalance)}. Continue?`)) return;
+    }
+    setSaving(true);
+    // 1) Record the invoice payment (the existing trigger keeps invoice totals in sync).
+    const { data: pay, error: payErr } = await supabase
+      .from("invoice_payments")
+      .insert({
+        invoice_id: invoiceId,
+        amount: amt,
+        paid_on: date,
+        method: "trust",
+        reference: `Trust transfer · ${invoiceNumber}`,
+        created_by: userId,
+      })
+      .select("id")
+      .single();
+    if (payErr || !pay) {
+      setSaving(false);
+      return toast.error(payErr?.message ?? "Could not record payment");
+    }
+    // 2) Add the matching trust ledger withdrawal pointing at this invoice.
+    const { error: ledErr } = await supabase.from("trust_ledger_entries").insert({
+      client_id: clientId,
+      entry_date: date,
+      entry_type: "withdrawal",
+      amount: amt,
+      note: `Applied to ${invoiceNumber}`,
+      applied_invoice_id: invoiceId,
+      applied_payment_id: pay.id,
+      created_by: userId,
+    });
+    setSaving(false);
+    if (ledErr) return toast.error(ledErr.message);
+    toast.success("Trust funds applied");
+    onOpenChange(false);
+    onApplied();
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Apply trust funds</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-3">
+          <div className="rounded-md bg-muted/40 p-3 text-sm space-y-1">
+            <div className="flex justify-between">
+              <span className="text-muted-foreground">Trust balance</span>
+              <span className="tabular-nums font-medium">
+                {trustBalance == null ? "…" : formatCurrency(trustBalance)}
+              </span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-muted-foreground">Invoice balance due</span>
+              <span className="tabular-nums font-medium">{formatCurrency(balanceDue)}</span>
+            </div>
+          </div>
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <Label>Amount to apply</Label>
+              <Input type="number" step="0.01" value={amount} onChange={(e) => setAmount(e.target.value)} />
+            </div>
+            <div>
+              <Label>Date</Label>
+              <Input type="date" value={date} onChange={(e) => setDate(e.target.value)} />
+            </div>
+          </div>
+          {trustBalance != null && Number(amount) > trustBalance && (
+            <p className="text-xs text-destructive">
+              This will overdraw the trust by {formatCurrency(Number(amount) - trustBalance)}.
+            </p>
+          )}
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>Cancel</Button>
+          <Button onClick={apply} disabled={saving || !amount}>
+            {saving && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}Apply funds
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}