diff --git a/apps/dashboard/src/app/(auth)/layout.tsx b/apps/dashboard/src/app/(auth)/layout.tsx
index 3cce9bb..b4e0602 100644
--- a/apps/dashboard/src/app/(auth)/layout.tsx
+++ b/apps/dashboard/src/app/(auth)/layout.tsx
@@ -1,7 +1,7 @@
 export default function AuthLayout({ children }: { children: React.ReactNode }) {
   return (
     <div className="relative min-h-screen overflow-hidden bg-background">
-      <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(16,185,129,0.12),transparent_36%),radial-gradient(circle_at_bottom_right,rgba(59,130,246,0.12),transparent_30%)]" />
+      <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,var(--status-success-bg),transparent_36%),radial-gradient(circle_at_bottom_right,var(--status-info-bg),transparent_30%)]" />
       <div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-primary/40 to-transparent" />
       <div className="relative">{children}</div>
     </div>
diff --git a/apps/dashboard/src/app/(dashboard)/layout.tsx b/apps/dashboard/src/app/(dashboard)/layout.tsx
index 6e42f32..2c5c12b 100644
--- a/apps/dashboard/src/app/(dashboard)/layout.tsx
+++ b/apps/dashboard/src/app/(dashboard)/layout.tsx
@@ -4,6 +4,7 @@ import { AppSidebar } from "@/components/app-sidebar";
 import { SiteHeader } from "@/components/site-header";
 import { SidebarInset, SidebarProvider, SidebarRail } from "@useroutr/ui";
 import { useAuth } from "@/providers/AuthProvider";
+import { useRefundEvents } from "@/hooks/useRefundEvents";
 
 export default function DashboardLayout({
   children,
@@ -12,6 +13,9 @@ export default function DashboardLayout({
 }) {
   const { merchant, isLoading } = useAuth();
 
+  // Subscribe to real-time refund events across all dashboard pages
+  useRefundEvents();
+
   if (isLoading) {
     return (
       <div className="flex min-h-screen items-center justify-center bg-background px-6">
diff --git a/apps/dashboard/src/app/(dashboard)/refunds/page.tsx b/apps/dashboard/src/app/(dashboard)/refunds/page.tsx
new file mode 100644
index 0000000..5dfadb1
--- /dev/null
+++ b/apps/dashboard/src/app/(dashboard)/refunds/page.tsx
@@ -0,0 +1,18 @@
+import { RefundHistoryTable } from "@/components/payments/RefundHistoryTable";
+
+export default function RefundsPage() {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="font-display text-xl font-semibold text-foreground">
+          Refunds
+        </h2>
+        <p className="mt-1 text-sm text-muted-foreground">
+          View and manage all refund transactions
+        </p>
+      </div>
+
+      <RefundHistoryTable />
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/globals.css b/apps/dashboard/src/app/globals.css
index 3c9d68b..4b2ff09 100644
--- a/apps/dashboard/src/app/globals.css
+++ b/apps/dashboard/src/app/globals.css
@@ -70,6 +70,37 @@
   --color-sidebar-primary: var(--sidebar-primary);
   --color-sidebar-foreground: var(--sidebar-foreground);
   --color-sidebar: var(--sidebar);
+
+  /* ── Dark mode page tokens ── */
+  --color-bg-page: var(--bg-page);
+  --color-bg-card: var(--bg-card);
+  --color-bg-sidebar: var(--bg-sidebar);
+  --color-text-primary: var(--text-primary);
+  --color-text-secondary: var(--text-secondary);
+  --color-border-color: var(--border-color);
+  --color-input-bg: var(--input-bg);
+  --color-input-border: var(--input-border);
+  --color-code-bg: var(--code-bg);
+
+  /* ── Chart theming tokens ── */
+  --color-chart-tick: var(--chart-tick);
+  --color-chart-grid: var(--chart-grid);
+  --color-chart-tooltip-bg: var(--chart-tooltip-bg);
+  --color-chart-tooltip-text: var(--chart-tooltip-text);
+
+  /* ── Status tokens ── */
+  --color-status-success-bg: var(--status-success-bg);
+  --color-status-success-text: var(--status-success-text);
+  --color-status-warning-bg: var(--status-warning-bg);
+  --color-status-warning-text: var(--status-warning-text);
+  --color-status-error-bg: var(--status-error-bg);
+  --color-status-error-text: var(--status-error-text);
+  --color-status-info-bg: var(--status-info-bg);
+  --color-status-info-text: var(--status-info-text);
+  --color-status-purple-bg: var(--status-purple-bg);
+  --color-status-purple-text: var(--status-purple-text);
+  --color-status-amber-bg: var(--status-amber-bg);
+  --color-status-amber-text: var(--status-amber-text);
 }
 
 @layer base {
@@ -90,6 +121,38 @@
 :root {
   --header-height: 3.5rem;
 
+  /* ── Dark mode specific tokens (dark-first) ── */
+  --bg-page: #0B1628;
+  --bg-card: #1A2332;
+  --bg-sidebar: #0F1D2E;
+  --text-primary: #F8F9FA;
+  --text-secondary: #6C757D;
+  --border-color: #2D3748;
+  --input-bg: #1A2332;
+  --input-border: #2D3748;
+  --code-bg: #0B1628;
+
+  /* ── Chart theming tokens ── */
+  --chart-tick: #F8F9FA;
+  --chart-grid: rgba(248, 249, 250, 0.08);
+  --chart-tooltip-bg: #1A2332;
+  --chart-tooltip-text: #F8F9FA;
+  --chart-tooltip-border: #2D3748;
+
+  /* ── Semantic status tokens ── */
+  --status-success-bg: rgba(34, 197, 94, 0.12);
+  --status-success-text: #4ade80;
+  --status-warning-bg: rgba(245, 158, 11, 0.12);
+  --status-warning-text: #fbbf24;
+  --status-error-bg: rgba(239, 68, 68, 0.12);
+  --status-error-text: #f87171;
+  --status-info-bg: rgba(59, 130, 246, 0.12);
+  --status-info-text: #60a5fa;
+  --status-purple-bg: rgba(168, 85, 247, 0.12);
+  --status-purple-text: #c084fc;
+  --status-amber-bg: rgba(245, 158, 11, 0.12);
+  --status-amber-text: #fbbf24;
+
   /* Sidebar uses Useroutr ink tiers for dark-first design */
   --sidebar: var(--ink2);
   --sidebar-foreground: var(--lead);
@@ -102,6 +165,35 @@
 }
 
 .light {
+  --bg-page: #FFFFFF;
+  --bg-card: #F8F9FA;
+  --bg-sidebar: #F3F4F6;
+  --text-primary: #1A202C;
+  --text-secondary: #6B7280;
+  --border-color: #E2E8F0;
+  --input-bg: #FFFFFF;
+  --input-border: #D1D5DB;
+  --code-bg: #F1F5F9;
+
+  --chart-tick: #1A202C;
+  --chart-grid: rgba(0, 0, 0, 0.08);
+  --chart-tooltip-bg: #FFFFFF;
+  --chart-tooltip-text: #1A202C;
+  --chart-tooltip-border: #E2E8F0;
+
+  --status-success-bg: rgba(34, 197, 94, 0.1);
+  --status-success-text: #16a34a;
+  --status-warning-bg: rgba(245, 158, 11, 0.1);
+  --status-warning-text: #d97706;
+  --status-error-bg: rgba(239, 68, 68, 0.1);
+  --status-error-text: #dc2626;
+  --status-info-bg: rgba(59, 130, 246, 0.1);
+  --status-info-text: #2563eb;
+  --status-purple-bg: rgba(168, 85, 247, 0.1);
+  --status-purple-text: #7c3aed;
+  --status-amber-bg: rgba(245, 158, 11, 0.1);
+  --status-amber-text: #d97706;
+
   --sidebar: oklch(0.975 0.003 265);
   --sidebar-foreground: oklch(0.15 0.01 265);
   --sidebar-primary: var(--blue);
@@ -113,14 +205,14 @@
 }
 
 .dark {
-  --sidebar: hsl(240 5.9% 10%);
-  --sidebar-foreground: hsl(240 4.8% 95.9%);
-  --sidebar-primary: hsl(224.3 76.3% 48%);
-  --sidebar-primary-foreground: hsl(0 0% 100%);
-  --sidebar-accent: hsl(240 3.7% 15.9%);
-  --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
-  --sidebar-border: hsl(240 3.7% 15.9%);
-  --sidebar-ring: hsl(217.2 91.2% 59.8%);
+  --sidebar: var(--bg-sidebar);
+  --sidebar-foreground: var(--text-primary);
+  --sidebar-primary: var(--blue);
+  --sidebar-primary-foreground: #FFFFFF;
+  --sidebar-accent: #1E293B;
+  --sidebar-accent-foreground: var(--text-primary);
+  --sidebar-border: var(--border-color);
+  --sidebar-ring: var(--blue2);
 }
 
 /* ── Modern card surface ── */
diff --git a/apps/dashboard/src/app/layout.tsx b/apps/dashboard/src/app/layout.tsx
index 11fb4c1..ba1fb9f 100644
--- a/apps/dashboard/src/app/layout.tsx
+++ b/apps/dashboard/src/app/layout.tsx
@@ -6,6 +6,7 @@ import { QueryProvider } from "@/providers/QueryProvider";
 import { AuthProvider } from "@/providers/AuthProvider";
 import "./globals.css";
 import { ToastProvider } from "@useroutr/ui";
+import { TooltipProvider } from "@/components/ui/tooltip";
 
 const inter = Inter({
   subsets: ["latin"],
@@ -34,12 +35,21 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en" suppressHydrationWarning>
+      <head>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `(function(){try{var p=localStorage.getItem("useroutr-theme");var t=p==="dark"?"dark":p==="light"?"light":window.matchMedia("(prefers-color-scheme:dark)").matches?"dark":"light";document.documentElement.classList.add(t)}catch(e){}})()`,
+          }}
+        />
+      </head>
       <body className={`${inter.variable} ${openSans.variable} antialiased`}>
         <ThemeProvider>
           <QueryProvider>
             <Suspense>
               <AuthProvider>
-                <ToastProvider>{children}</ToastProvider>
+                <TooltipProvider>
+                  <ToastProvider>{children}</ToastProvider>
+                </TooltipProvider>
               </AuthProvider>
             </Suspense>
           </QueryProvider>
diff --git a/apps/dashboard/src/components/analytics/AnalyticsDashboard.tsx b/apps/dashboard/src/components/analytics/AnalyticsDashboard.tsx
index b183228..f4d692f 100644
--- a/apps/dashboard/src/components/analytics/AnalyticsDashboard.tsx
+++ b/apps/dashboard/src/components/analytics/AnalyticsDashboard.tsx
@@ -111,9 +111,9 @@ const PERIOD_OPTIONS: Array<{ value: Period; label: string }> = [
 ];
 
 const PAYMENT_COLORS: Record<PaymentMethod, string> = {
-  card: "#3b82f6",
-  crypto: "#14b8a6",
-  bank: "#f59e0b",
+  card: "var(--blue)",
+  crypto: "var(--teal)",
+  bank: "var(--amber)",
 };
 
 const WEEKDAY_LABELS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
@@ -782,7 +782,7 @@ function RevenueChart({
                 x2={width}
                 y1={y}
                 y2={y}
-                stroke="rgba(148,163,184,0.22)"
+                stroke="var(--chart-grid)"
                 strokeDasharray="4 6"
               />
             );
@@ -806,7 +806,7 @@ function RevenueChart({
                   width={barWidth}
                   height={barHeight}
                   rx={8}
-                  fill={active ? "#1d4ed8" : "#3b82f6"}
+                  fill={active ? "var(--blue)" : "var(--blue2)"}
                   opacity={active ? 1 : 0.82}
                 />
                 <text
@@ -814,7 +814,7 @@ function RevenueChart({
                   y={height - 18}
                   textAnchor="middle"
                   fontSize="11"
-                  fill="rgba(100,116,139,1)"
+                  fill="var(--chart-tick)"
                 >
                   {point.label}
                 </text>
@@ -826,13 +826,13 @@ function RevenueChart({
                       width={106}
                       height={30}
                       rx={10}
-                      fill="rgba(15,23,42,0.95)"
+                      fill="var(--chart-tooltip-bg)"
                     />
                     <text
                       x={Math.max(18, x - 18)}
                       y={Math.max(28, y - 18)}
                       fontSize="11"
-                      fill="#ffffff"
+                      fill="var(--chart-tooltip-text)"
                     >
                       {formatCompactMoney(point.amount)}
                     </text>
@@ -880,7 +880,7 @@ function PaymentMethodCard({
               cy="70"
               r={radius}
               fill="none"
-              stroke="rgba(148,163,184,0.18)"
+              stroke="var(--chart-grid)"
               strokeWidth="20"
             />
             {segments.map((segment) => {
@@ -983,8 +983,8 @@ function ConversionCard({
         >
           <defs>
             <linearGradient id="conversion-fill-dashboard" x1="0" x2="0" y1="0" y2="1">
-              <stop offset="0%" stopColor="rgba(20,184,166,0.35)" />
-              <stop offset="100%" stopColor="rgba(20,184,166,0.02)" />
+              <stop offset="0%" stopColor="var(--teal)" stopOpacity={0.35} />
+              <stop offset="100%" stopColor="var(--teal)" stopOpacity={0.02} />
             </linearGradient>
           </defs>
           <path
@@ -994,7 +994,7 @@ function ConversionCard({
           <path
             d={path}
             fill="none"
-            stroke="#14b8a6"
+            stroke="var(--teal)"
             strokeWidth="3"
             strokeLinecap="round"
             strokeLinejoin="round"
@@ -1058,7 +1058,7 @@ function FailureHeatmap({
   const maxCount = Math.max(...byHour.map((cell) => cell.count), 1);
   const getColor = (count: number) => {
     const alpha = count / maxCount;
-    return `rgba(239,68,68,${0.1 + alpha * 0.75})`;
+    return `color-mix(in srgb, var(--red) ${Math.round((0.1 + alpha * 0.75) * 100)}%, transparent)`;
   };
 
   return (
diff --git a/apps/dashboard/src/components/app-sidebar.tsx b/apps/dashboard/src/components/app-sidebar.tsx
index 9059916..30b91bc 100644
--- a/apps/dashboard/src/components/app-sidebar.tsx
+++ b/apps/dashboard/src/components/app-sidebar.tsx
@@ -10,6 +10,7 @@ import {
   Settings,
   LifeBuoy,
   Send,
+  RotateCcw,
 } from "lucide-react";
 
 import { NavMain } from "@/components/nav-main";
@@ -28,6 +29,7 @@ import {
 const navMain = [
   { title: "Overview", url: "/", icon: Home },
   { title: "Payments", url: "/payments", icon: CreditCard },
+  { title: "Refunds", url: "/refunds", icon: RotateCcw },
   { title: "Payment Links", url: "/links", icon: Link2 },
   { title: "Invoices", url: "/invoices", icon: FileText },
   { title: "Payouts", url: "/payouts", icon: ArrowLeftRight },
diff --git a/apps/dashboard/src/components/invoices/InvoiceDetailSheet.tsx b/apps/dashboard/src/components/invoices/InvoiceDetailSheet.tsx
index 3d7e594..060eac1 100644
--- a/apps/dashboard/src/components/invoices/InvoiceDetailSheet.tsx
+++ b/apps/dashboard/src/components/invoices/InvoiceDetailSheet.tsx
@@ -1,4 +1,4 @@
-"use client";
+"use client";
 
 import { useState } from "react";
 import {
@@ -34,15 +34,15 @@ import { SendInvoiceModal } from "./SendInvoiceModal";
 import { InvoicePdfPreview } from "./InvoicePdfPreview";
 import type { Invoice, InvoiceStatus } from "@/hooks/useInvoices";
 
-// ── Status badge ───────────────────────────────────────────────────────────────
+// ── Status badge ───────────────────────────────────────────────────────────────
 
 const STATUS_CONFIG: Record<InvoiceStatus, { label: string; className: string }> = {
   DRAFT: { label: "Draft", className: "bg-muted text-muted-foreground" },
-  SENT: { label: "Sent", className: "bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300" },
-  VIEWED: { label: "Viewed", className: "bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-300" },
-  PARTIALLY_PAID: { label: "Partially Paid", className: "bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300" },
-  PAID: { label: "Paid", className: "bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300" },
-  OVERDUE: { label: "Overdue", className: "bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300" },
+  SENT: { label: "Sent", className: "bg-status-info-bg text-status-info-text" },
+  VIEWED: { label: "Viewed", className: "bg-status-purple-bg text-status-purple-text" },
+  PARTIALLY_PAID: { label: "Partially Paid", className: "bg-status-amber-bg text-status-amber-text" },
+  PAID: { label: "Paid", className: "bg-status-success-bg text-status-success-text" },
+  OVERDUE: { label: "Overdue", className: "bg-status-error-bg text-status-error-text" },
   CANCELLED: { label: "Cancelled", className: "bg-muted text-muted-foreground" },
 };
 
@@ -55,7 +55,7 @@ function StatusBadge({ status }: { status: InvoiceStatus }) {
   );
 }
 
-// ── Activity timeline ─────────────────────────────────────────────────────────
+// ── Activity timeline ─────────────────────────────────────────────────────────
 
 interface TimelineEvent {
   key: string;
@@ -239,7 +239,7 @@ function ActivityTimeline({ invoice }: { invoice: Invoice }) {
   );
 }
 
-// ── Props ──────────────────────────────────────────────────────────────────────
+// ── Props ──────────────────────────────────────────────────────────────────────
 
 interface InvoiceDetailSheetProps {
   invoice: Invoice | null;
@@ -254,7 +254,7 @@ interface InvoiceDetailSheetProps {
   isSendPending?: boolean;
 }
 
-// ── Helpers ────────────────────────────────────────────────────────────────────
+// ── Helpers ────────────────────────────────────────────────────────────────────
 
 function fmtCurrency(amount: string | number, currency: string) {
   const num = typeof amount === "string" ? parseFloat(amount) : amount;
@@ -263,7 +263,7 @@ function fmtCurrency(amount: string | number, currency: string) {
 }
 
 function fmtDate(iso?: string | null) {
-  if (!iso) return "—";
+  if (!iso) return "—";
   return new Date(iso).toLocaleDateString("en-US", {
     year: "numeric",
     month: "long",
@@ -271,7 +271,7 @@ function fmtDate(iso?: string | null) {
   });
 }
 
-// ── Component ──────────────────────────────────────────────────────────────────
+// ── Component ──────────────────────────────────────────────────────────────────
 
 export function InvoiceDetailSheet({
   invoice,
@@ -305,7 +305,7 @@ export function InvoiceDetailSheet({
     <>
       <Sheet open={open} onOpenChange={onOpenChange}>
         <SheetContent className="w-full sm:max-w-[520px] flex flex-col gap-0 p-0 overflow-hidden">
-          {/* ── Header ── */}
+          {/* ── Header ── */}
           <SheetHeader className="px-6 py-4 border-b border-border shrink-0">
             <div className="flex items-start justify-between gap-3 pr-6">
               <div className="space-y-1.5 min-w-0">
@@ -334,7 +334,7 @@ export function InvoiceDetailSheet({
             </div>
           </SheetHeader>
 
-          {/* ── Scrollable body ── */}
+          {/* ── Scrollable body ── */}
           <div className="flex-1 overflow-y-auto">
             <div className="px-6 py-5 space-y-6">
 
@@ -402,7 +402,7 @@ export function InvoiceDetailSheet({
                     </p>
                     <p
                       className={`text-sm font-medium ${
-                        invoice.status === "OVERDUE" ? "text-red-600" : "text-foreground"
+                        invoice.status === "OVERDUE" ? "text-status-error-text" : "text-foreground"
                       }`}
                     >
                       {fmtDate(invoice.dueDate)}
@@ -412,7 +412,7 @@ export function InvoiceDetailSheet({
                 {invoice.paidAt && (
                   <div className="space-y-1">
                     <p className="text-xs text-muted-foreground">Paid On</p>
-                    <p className="text-sm font-medium text-green-600">{fmtDate(invoice.paidAt)}</p>
+                    <p className="text-sm font-medium text-status-success-text">{fmtDate(invoice.paidAt)}</p>
                   </div>
                 )}
               </section>
@@ -464,8 +464,8 @@ export function InvoiceDetailSheet({
                 {discount > 0 && (
                   <div className="flex justify-between text-muted-foreground">
                     <span>Discount</span>
-                    <span className="tabular-nums text-green-600">
-                      −{fmtCurrency(discount, invoice.currency)}
+                    <span className="tabular-nums text-status-success-text">
+                      −{fmtCurrency(discount, invoice.currency)}
                     </span>
                   </div>
                 )}
@@ -476,7 +476,7 @@ export function InvoiceDetailSheet({
                 </div>
                 {amountPaid > 0 && (
                   <>
-                    <div className="flex justify-between text-green-600 text-xs">
+                    <div className="flex justify-between text-status-success-text text-xs">
                       <span>Amount Paid</span>
                       <span className="tabular-nums">{fmtCurrency(amountPaid, invoice.currency)}</span>
                     </div>
@@ -494,10 +494,10 @@ export function InvoiceDetailSheet({
                   <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                     Payment Details
                   </h3>
-                  <div className="rounded-lg border border-border bg-green-50/50 dark:bg-green-900/10 p-4 space-y-2 text-sm">
+                  <div className="rounded-lg border border-border bg-status-success-bg p-4 space-y-2 text-sm">
                     <div className="flex items-center gap-2">
-                      <CheckCircle2 className="h-4 w-4 text-green-600 shrink-0" />
-                      <span className="font-medium text-green-700 dark:text-green-400">
+                      <CheckCircle2 className="h-4 w-4 text-status-success-text shrink-0" />
+                      <span className="font-medium text-status-success-text">
                         {invoice.status === "PAID" ? "Fully paid" : "Partially paid"}
                       </span>
                     </div>
@@ -517,7 +517,7 @@ export function InvoiceDetailSheet({
                       {amountDue > 0 && (
                         <div className="space-y-0.5">
                           <p className="text-xs text-muted-foreground">Balance due</p>
-                          <p className="font-semibold text-amber-600">
+                          <p className="font-semibold text-status-amber-text">
                             {fmtCurrency(amountDue, invoice.currency)}
                           </p>
                         </div>
@@ -554,7 +554,7 @@ export function InvoiceDetailSheet({
             </div>
           </div>
 
-          {/* ── Footer actions ── */}
+          {/* ── Footer actions ── */}
           <div className="shrink-0 border-t border-border px-6 py-4 space-y-2">
             {/* Primary row: Edit + Send */}
             {isDraft && (
@@ -615,7 +615,7 @@ export function InvoiceDetailSheet({
         </SheetContent>
       </Sheet>
 
-      {/* ── Send modal (rendered outside sheet to avoid z-index nesting issues) ── */}
+      {/* ── Send modal (rendered outside sheet to avoid z-index nesting issues) ── */}
       <SendInvoiceModal
         invoice={invoice}
         open={sendModalOpen}
@@ -624,7 +624,7 @@ export function InvoiceDetailSheet({
         isSending={isSendPending}
       />
 
-      {/* ── PDF preview dialog ── */}
+      {/* ── PDF preview dialog ── */}
       <InvoicePdfPreview
         invoice={invoice}
         open={pdfPreviewOpen}
diff --git a/apps/dashboard/src/components/invoices/InvoiceDrawer.tsx b/apps/dashboard/src/components/invoices/InvoiceDrawer.tsx
index 494c5a7..b3d0aa1 100644
--- a/apps/dashboard/src/components/invoices/InvoiceDrawer.tsx
+++ b/apps/dashboard/src/components/invoices/InvoiceDrawer.tsx
@@ -1,4 +1,4 @@
-"use client";
+"use client";
 
 import { useState, useCallback } from "react";
 import { z } from "zod";
@@ -18,14 +18,14 @@ import {
 } from "@useroutr/ui";
 import type { CreateInvoiceInput, Invoice } from "@/hooks/useInvoices";
 
-// ── Validation schema ──────────────────────────────────────────────────────────
+// ── Validation schema ──────────────────────────────────────────────────────────
 
 const LineItemSchema = z.object({
   description: z.string().min(1, "Description is required"),
   qty: z.number({ invalid_type_error: "Must be a number" }).positive("Qty > 0"),
   unitPrice: z
     .number({ invalid_type_error: "Must be a number" })
-    .nonnegative("Price ≥ 0"),
+    .nonnegative("Price ≥ 0"),
 });
 
 const InvoiceSchema = z.object({
@@ -44,7 +44,7 @@ const InvoiceSchema = z.object({
 
 type FormErrors = Partial<Record<string, string>>;
 
-// ── Line item helpers ──────────────────────────────────────────────────────────
+// ── Line item helpers ──────────────────────────────────────────────────────────
 
 interface LineItemRow {
   id: string;
@@ -80,7 +80,7 @@ function computeTotals(
   return { subtotal, taxAmount, total };
 }
 
-// ── Props ──────────────────────────────────────────────────────────────────────
+// ── Props ──────────────────────────────────────────────────────────────────────
 
 interface InvoiceDrawerProps {
   open: boolean;
@@ -92,7 +92,7 @@ interface InvoiceDrawerProps {
   isLoading?: boolean;
 }
 
-// ── Component ──────────────────────────────────────────────────────────────────
+// ── Component ──────────────────────────────────────────────────────────────────
 
 export function InvoiceDrawer({
   open,
@@ -104,12 +104,12 @@ export function InvoiceDrawer({
 }: InvoiceDrawerProps) {
   const isEditing = !!invoice;
 
-  // ── Customer fields ──────────────────────────────────────────────────────────
+  // ── Customer fields ──────────────────────────────────────────────────────────
   const [customerEmail, setCustomerEmail] = useState(invoice?.customerEmail ?? "");
   const [customerName, setCustomerName] = useState(invoice?.customerName ?? "");
   const [invoiceNumber, setInvoiceNumber] = useState(invoice?.invoiceNumber ?? "");
 
-  // ── Line items ───────────────────────────────────────────────────────────────
+  // ── Line items ───────────────────────────────────────────────────────────────
   const [rows, setRows] = useState<LineItemRow[]>(() => {
     if (invoice?.lineItems?.length) {
       return invoice.lineItems.map((li) => ({
@@ -122,7 +122,7 @@ export function InvoiceDrawer({
     return [emptyRow()];
   });
 
-  // ── Pricing ──────────────────────────────────────────────────────────────────
+  // ── Pricing ──────────────────────────────────────────────────────────────────
   const [currency, setCurrency] = useState(invoice?.currency ?? "USD");
   const [taxRate, setTaxRate] = useState(
     invoice?.taxRate ? String(Number(invoice.taxRate) * 100) : "",
@@ -131,21 +131,21 @@ export function InvoiceDrawer({
     invoice?.discount ? String(Number(invoice.discount)) : "",
   );
 
-  // ── Meta ─────────────────────────────────────────────────────────────────────
+  // ── Meta ─────────────────────────────────────────────────────────────────────
   const [dueDate, setDueDate] = useState(
     invoice?.dueDate ? invoice.dueDate.split("T")[0] : "",
   );
   const [notes, setNotes] = useState(invoice?.notes ?? "");
 
-  // ── Errors ───────────────────────────────────────────────────────────────────
+  // ── Errors ───────────────────────────────────────────────────────────────────
   const [errors, setErrors] = useState<FormErrors>({});
 
-  // ── Computed totals ───────────────────────────────────────────────────────────
+  // ── Computed totals ───────────────────────────────────────────────────────────
   const taxRatePct = parseFloat(taxRate) || 0;
   const discountAmt = parseFloat(discount) || 0;
   const { subtotal, taxAmount, total } = computeTotals(rows, taxRatePct, discountAmt);
 
-  // ── Row handlers ──────────────────────────────────────────────────────────────
+  // ── Row handlers ──────────────────────────────────────────────────────────────
   const addRow = () => setRows((prev) => [...prev, emptyRow()]);
 
   const removeRow = useCallback((id: string) => {
@@ -166,7 +166,7 @@ export function InvoiceDrawer({
     [],
   );
 
-  // ── Validation ────────────────────────────────────────────────────────────────
+  // ── Validation ────────────────────────────────────────────────────────────────
   const validate = (): CreateInvoiceInput | null => {
     const lineItemsForValidation = rows.map(rowToItem);
 
@@ -259,7 +259,7 @@ export function InvoiceDrawer({
           </DialogDescription>
         </DialogHeader>
 
-        {/* ── Scrollable body ── */}
+        {/* ── Scrollable body ── */}
         <div className="flex-1 overflow-y-auto space-y-5 py-1 pr-1">
 
           {/* Client details */}
@@ -466,7 +466,7 @@ export function InvoiceDrawer({
               {discountAmt > 0 && (
                 <div className="flex justify-between text-muted-foreground">
                   <span>Discount</span>
-                  <span className="text-green-600">−{fmtCurrency(discountAmt)}</span>
+                  <span className="text-status-success-text">−{fmtCurrency(discountAmt)}</span>
                 </div>
               )}
               <Separator className="my-1" />
@@ -496,7 +496,7 @@ export function InvoiceDrawer({
               </Label>
               <textarea
                 id="inv-notes"
-                placeholder="Payment terms, thank you note, instructions…"
+                placeholder="Payment terms, thank you note, instructions…"
                 value={notes}
                 onChange={(e) => setNotes(e.target.value)}
                 rows={3}
@@ -506,7 +506,7 @@ export function InvoiceDrawer({
           </section>
         </div>
 
-        {/* ── Footer ── */}
+        {/* ── Footer ── */}
         <DialogFooter className="mt-4 gap-2 sm:gap-0">
           <Button
             type="button"
diff --git a/apps/dashboard/src/components/invoices/InvoicesTable.tsx b/apps/dashboard/src/components/invoices/InvoicesTable.tsx
index ae5b706..ad16032 100644
--- a/apps/dashboard/src/components/invoices/InvoicesTable.tsx
+++ b/apps/dashboard/src/components/invoices/InvoicesTable.tsx
@@ -1,4 +1,4 @@
-"use client";
+"use client";
 
 import { useState } from "react";
 import {
@@ -25,15 +25,15 @@ import {
 } from "@/components/ui/dropdown-menu";
 import type { Invoice, InvoiceStatus } from "@/hooks/useInvoices";
 
-// ── Status badge ───────────────────────────────────────────────────────────────
+// ── Status badge ───────────────────────────────────────────────────────────────
 
 const STATUS_CONFIG: Record<InvoiceStatus, { label: string; className: string }> = {
   DRAFT: { label: "Draft", className: "bg-muted text-muted-foreground" },
-  SENT: { label: "Sent", className: "bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300" },
-  VIEWED: { label: "Viewed", className: "bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-300" },
-  PARTIALLY_PAID: { label: "Partial", className: "bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300" },
-  PAID: { label: "Paid", className: "bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300" },
-  OVERDUE: { label: "Overdue", className: "bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300" },
+  SENT: { label: "Sent", className: "bg-status-info-bg text-status-info-text" },
+  VIEWED: { label: "Viewed", className: "bg-status-purple-bg text-status-purple-text" },
+  PARTIALLY_PAID: { label: "Partial", className: "bg-status-amber-bg text-status-amber-text" },
+  PAID: { label: "Paid", className: "bg-status-success-bg text-status-success-text" },
+  OVERDUE: { label: "Overdue", className: "bg-status-error-bg text-status-error-text" },
   CANCELLED: { label: "Cancelled", className: "bg-muted text-muted-foreground line-through" },
 };
 
@@ -46,7 +46,7 @@ function StatusBadge({ status }: { status: InvoiceStatus }) {
   );
 }
 
-// ── Sort indicator ─────────────────────────────────────────────────────────────
+// ── Sort indicator ─────────────────────────────────────────────────────────────
 
 function SortIcon({ col, sortBy, sortOrder }: { col: string; sortBy?: string; sortOrder?: "asc" | "desc" }) {
   if (sortBy !== col) return <ChevronsUpDown className="h-3 w-3 opacity-40" />;
@@ -55,7 +55,7 @@ function SortIcon({ col, sortBy, sortOrder }: { col: string; sortBy?: string; so
     : <ChevronDown className="h-3 w-3" />;
 }
 
-// ── Skeleton row ───────────────────────────────────────────────────────────────
+// ── Skeleton row ───────────────────────────────────────────────────────────────
 
 function SkeletonRow() {
   return (
@@ -68,7 +68,7 @@ function SkeletonRow() {
   );
 }
 
-// ── Empty state ────────────────────────────────────────────────────────────────
+// ── Empty state ────────────────────────────────────────────────────────────────
 
 function EmptyState({ onCreate }: { onCreate: () => void }) {
   return (
@@ -89,7 +89,7 @@ function EmptyState({ onCreate }: { onCreate: () => void }) {
   );
 }
 
-// ── Props ──────────────────────────────────────────────────────────────────────
+// ── Props ──────────────────────────────────────────────────────────────────────
 
 interface InvoicesTableProps {
   invoices: Invoice[];
@@ -107,7 +107,7 @@ interface InvoicesTableProps {
   onCreate: () => void;
 }
 
-// ── Sortable header cell ──────────────────────────────────────────────────────
+// ── Sortable header cell ──────────────────────────────────────────────────────
 
 function SortableHeader({
   label,
@@ -135,7 +135,7 @@ function SortableHeader({
   );
 }
 
-// ── Main component ────────────────────────────────────────────────────────────
+// ── Main component ────────────────────────────────────────────────────────────
 
 export function InvoicesTable({
   invoices,
@@ -162,7 +162,7 @@ export function InvoicesTable({
   };
 
   const fmtDate = (iso?: string) => {
-    if (!iso) return "—";
+    if (!iso) return "—";
     return new Date(iso).toLocaleDateString("en-US", {
       year: "numeric",
       month: "short",
@@ -245,12 +245,12 @@ export function InvoicesTable({
                     {fmtCurrency(inv.total, inv.currency)}
                   </span>
                   {parseFloat(inv.amountPaid ?? "0") > 0 && inv.status !== "PAID" && (
-                    <span className="text-xs text-green-600">
+                    <span className="text-xs text-status-success-text">
                       +{fmtCurrency(inv.amountPaid, inv.currency)} paid
                     </span>
                   )}
                   {inv.status === "PARTIALLY_PAID" && (
-                    <span className="text-xs text-amber-600">
+                    <span className="text-xs text-status-amber-text">
                       {fmtCurrency(String(amountDue), inv.currency)} due
                     </span>
                   )}
@@ -262,7 +262,7 @@ export function InvoicesTable({
                 {/* Due date */}
                 <span
                   className={`text-sm tabular-nums ${
-                    inv.status === "OVERDUE" ? "text-red-600 font-medium" : "text-muted-foreground"
+                    inv.status === "OVERDUE" ? "text-status-error-text font-medium" : "text-muted-foreground"
                   }`}
                 >
                   {fmtDate(inv.dueDate)}
diff --git a/apps/dashboard/src/components/layout/Topbar.tsx b/apps/dashboard/src/components/layout/Topbar.tsx
index d844289..7d813b2 100644
--- a/apps/dashboard/src/components/layout/Topbar.tsx
+++ b/apps/dashboard/src/components/layout/Topbar.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Bell, Moon, Search, Sun, LogOut, Settings, User } from "lucide-react";
+import { Bell, Moon, Monitor, Search, Sun, LogOut, Settings, User } from "lucide-react";
 import { useTheme } from "@/providers/ThemeProvider";
 import { useAuth } from "@/providers/AuthProvider";
 import {
@@ -17,7 +17,7 @@ interface TopbarProps {
 }
 
 export function Topbar({ title }: TopbarProps) {
-  const { theme, toggleTheme } = useTheme();
+  const { preference, toggleTheme } = useTheme();
   const { merchant, logout } = useAuth();
 
   const initials = merchant?.name
@@ -47,11 +47,21 @@ export function Topbar({ title }: TopbarProps) {
         <button
           onClick={toggleTheme}
           className="rounded-md p-2 text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
+          aria-label={`Theme: ${preference}`}
+          title={
+            preference === "light"
+              ? "Light mode — click for dark"
+              : preference === "dark"
+                ? "Dark mode — click for system"
+                : "System mode — click for light"
+          }
         >
-          {theme === "dark" ? (
+          {preference === "dark" ? (
+            <Moon className="size-5" />
+          ) : preference === "light" ? (
             <Sun className="size-5" />
           ) : (
-            <Moon className="size-5" />
+            <Monitor className="size-5" />
           )}
         </button>
 
diff --git a/apps/dashboard/src/components/links/LinkCreatedModal.tsx b/apps/dashboard/src/components/links/LinkCreatedModal.tsx
index bef92d9..fbf060d 100644
--- a/apps/dashboard/src/components/links/LinkCreatedModal.tsx
+++ b/apps/dashboard/src/components/links/LinkCreatedModal.tsx
@@ -105,7 +105,7 @@ export function LinkCreatedModal({
             {/* QR Code Preview */}
             <div className="space-y-2">
               <Label>QR Code</Label>
-              <div className="flex items-center justify-center rounded-lg border border-[var(--border)] bg-white p-4">
+              <div className="flex items-center justify-center rounded-lg border border-[var(--border)] bg-card p-4">
                 <QRCodeSVG
                   value={linkUrl}
                   size={150}
diff --git a/apps/dashboard/src/components/links/QRCodeModal.tsx b/apps/dashboard/src/components/links/QRCodeModal.tsx
index d028b60..e7d8e98 100644
--- a/apps/dashboard/src/components/links/QRCodeModal.tsx
+++ b/apps/dashboard/src/components/links/QRCodeModal.tsx
@@ -79,7 +79,7 @@ export function QRCodeModal({ open, onOpenChange, url, linkName }: QRCodeModalPr
         </DialogHeader>
 
         <div className="flex flex-col items-center justify-center py-4">
-          <div className="rounded-lg border border-[var(--border)] bg-white p-4 shadow-sm">
+          <div className="rounded-lg border border-[var(--border)] bg-card p-4 shadow-sm">
             <QRCodeSVG
               value={url}
               size={200}
diff --git a/apps/dashboard/src/components/overview/GreetingHeader.tsx b/apps/dashboard/src/components/overview/GreetingHeader.tsx
index 30a8e90..0a5b34a 100644
--- a/apps/dashboard/src/components/overview/GreetingHeader.tsx
+++ b/apps/dashboard/src/components/overview/GreetingHeader.tsx
@@ -1,4 +1,4 @@
-"use client";
+"use client";
 
 import { useMemo } from "react";
 import { motion } from "framer-motion";
@@ -29,14 +29,14 @@ export function GreetingHeader({
     >
       <div>
         <h1 className="text-2xl font-bold tracking-tight text-foreground">
-          {greeting}, {merchantName} 👋
+          {greeting}, {merchantName} 👋
         </h1>
         <p className="mt-1 text-sm text-muted-foreground">
           Here&apos;s what&apos;s happening with your business today.
         </p>
       </div>
       <div className="hidden items-center gap-2 rounded-full border bg-card px-3 py-1.5 text-xs font-medium text-muted-foreground sm:flex">
-        <Activity className="h-3 w-3 text-emerald-500" />
+        <Activity className="h-3 w-3 text-status-success-text" />
         Live
       </div>
     </motion.div>
diff --git a/apps/dashboard/src/components/overview/MetricCard.tsx b/apps/dashboard/src/components/overview/MetricCard.tsx
index f820716..ad4d813 100644
--- a/apps/dashboard/src/components/overview/MetricCard.tsx
+++ b/apps/dashboard/src/components/overview/MetricCard.tsx
@@ -96,8 +96,8 @@ export function MetricCard({
             <div
               className={`inline-flex w-fit items-center gap-1 rounded-full px-2 py-0.5 text-xs font-semibold ${
                 isPositive
-                  ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
-                  : "bg-red-500/10 text-red-600 dark:text-red-400"
+                  ? "bg-status-success-bg text-status-success-text"
+                  : "bg-status-error-bg text-status-error-text"
               }`}
             >
               {isPositive ? (
@@ -122,7 +122,7 @@ export function MetricCard({
                   <Line
                     type="monotone"
                     dataKey="v"
-                    stroke={isPositive ? "var(--success, #22c55e)" : "var(--destructive, #ef4444)"}
+                    stroke={isPositive ? "var(--success)" : "var(--destructive)"}
                     strokeWidth={2}
                     dot={false}
                     animationDuration={400}
diff --git a/apps/dashboard/src/components/payments/PaymentDetailDrawer.tsx b/apps/dashboard/src/components/payments/PaymentDetailDrawer.tsx
index 4137d5c..afb5dd9 100644
--- a/apps/dashboard/src/components/payments/PaymentDetailDrawer.tsx
+++ b/apps/dashboard/src/components/payments/PaymentDetailDrawer.tsx
@@ -1,10 +1,17 @@
 "use client";
 
-import { Drawer } from "@useroutr/ui";
+import { useState } from "react";
+import { Drawer, Button } from "@useroutr/ui";
+import { ArrowCounterClockwise } from "@phosphor-icons/react";
 import { type Payment } from "@/hooks/usePayments";
+import { usePaymentRefunds } from "@/hooks/useRefunds";
 import { StatusBadge } from "./StatusBadge";
+import { RefundStatusBadge, type RefundBadgeStatus } from "./RefundStatusBadge";
+import { RefundModal } from "./RefundModal";
+import { RefundTimeline } from "./RefundTimeline";
 import { formatCurrency, truncateAddress } from "@/lib/utils";
 import { PaymentTimeline } from "./PaymentTimeline";
+import { canRefund, getRefundEta, getPaymentMethodLabel } from "@/lib/refund";
 
 interface PaymentDetailDrawerProps {
   payment?: Payment;
@@ -17,102 +24,214 @@ export function PaymentDetailDrawer({
   open,
   onOpenChange,
 }: PaymentDetailDrawerProps) {
+  const [refundModalOpen, setRefundModalOpen] = useState(false);
+
+  // Fetch refunds for this payment when drawer is open
+  const { data: refunds } = usePaymentRefunds(payment?.id ?? "");
+
   if (!payment) return null;
 
   const amount = Number(payment.amount);
+  const showRefundButton = canRefund(payment.status, payment.completedAt, payment.refundedAt);
+
+  // Determine refund badge status
+  const refundBadgeStatus: RefundBadgeStatus | null =
+    payment.status === "REFUNDING"
+      ? "REFUNDING"
+      : payment.status === "REFUNDED"
+        ? "REFUNDED"
+        : refunds && refunds.length > 0 && payment.status === "COMPLETED"
+          ? "PARTIAL_REFUND"
+          : null;
 
   return (
-    <Drawer
-      open={open}
-      onOpenChange={onOpenChange}
-      title={`Payment ${payment.id.slice(0, 8)}...`}
-      description="Transaction details and timeline"
-    >
-      <div className="space-y-6">
-        {/* Summary */}
-        <div className="space-y-4 border-b border-border pb-6">
-          <div className="flex items-center justify-between">
-            <span className="text-sm text-muted-foreground">Amount</span>
-            <span className="font-semibold text-foreground">
-              {formatCurrency(amount, payment.currency)}
-            </span>
-          </div>
-          <div className="flex items-center justify-between">
-            <span className="text-sm text-muted-foreground">Status</span>
-            <StatusBadge status={payment.status} />
-          </div>
-          <div className="flex items-center justify-between">
-            <span className="text-sm text-muted-foreground">Created</span>
-            <span className="text-sm text-foreground">
-              {new Date(payment.createdAt).toLocaleDateString()} at{" "}
-              {new Date(payment.createdAt).toLocaleTimeString()}
-            </span>
-          </div>
-          {payment.completedAt && (
+    <>
+      <Drawer
+        open={open}
+        onOpenChange={onOpenChange}
+        title={`Payment ${payment.id.slice(0, 8)}...`}
+        description="Transaction details and timeline"
+      >
+        <div className="space-y-6">
+          {/* Summary */}
+          <div className="space-y-4 border-b border-border pb-6">
+            <div className="flex items-center justify-between">
+              <span className="text-sm text-muted-foreground">Amount</span>
+              <span className="font-semibold text-foreground">
+                {formatCurrency(amount, payment.currency)}
+              </span>
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-sm text-muted-foreground">Status</span>
+              <div className="flex items-center gap-2">
+                <StatusBadge status={payment.status} />
+                {refundBadgeStatus && (
+                  <RefundStatusBadge status={refundBadgeStatus} />
+                )}
+              </div>
+            </div>
             <div className="flex items-center justify-between">
-              <span className="text-sm text-muted-foreground">Completed</span>
+              <span className="text-sm text-muted-foreground">Created</span>
               <span className="text-sm text-foreground">
-                {new Date(payment.completedAt).toLocaleDateString()} at{" "}
-                {new Date(payment.completedAt).toLocaleTimeString()}
+                {new Date(payment.createdAt).toLocaleDateString()} at{" "}
+                {new Date(payment.createdAt).toLocaleTimeString()}
               </span>
             </div>
+            {payment.completedAt && (
+              <div className="flex items-center justify-between">
+                <span className="text-sm text-muted-foreground">Completed</span>
+                <span className="text-sm text-foreground">
+                  {new Date(payment.completedAt).toLocaleDateString()} at{" "}
+                  {new Date(payment.completedAt).toLocaleTimeString()}
+                </span>
+              </div>
+            )}
+            {payment.refundedAt && (
+              <div className="flex items-center justify-between">
+                <span className="text-sm text-muted-foreground">Refunded</span>
+                <span className="text-sm text-foreground">
+                  {new Date(payment.refundedAt).toLocaleDateString()} at{" "}
+                  {new Date(payment.refundedAt).toLocaleTimeString()}
+                </span>
+              </div>
+            )}
+          </div>
+
+          {/* Refund action */}
+          {showRefundButton && (
+            <div className="border-b border-border pb-6">
+              <Button
+                variant="destructive"
+                size="sm"
+                className="w-full"
+                onClick={() => setRefundModalOpen(true)}
+              >
+                <ArrowCounterClockwise size={16} weight="bold" />
+                Issue Refund
+              </Button>
+            </div>
           )}
-        </div>
 
-        {/* Route */}
-        <div className="space-y-3">
-          <h3 className="text-sm font-semibold text-foreground">Route</h3>
+          {/* Refund detail section (if refunds exist) */}
+          {refunds && refunds.length > 0 && (
+            <div className="space-y-3 border-b border-border pb-6">
+              <h3 className="text-sm font-semibold text-foreground">
+                Refund Details
+              </h3>
+              {refunds.map((refund) => (
+                <div
+                  key={refund.id}
+                  className="rounded-lg border border-border bg-(--secondary)/20 p-3 space-y-2"
+                >
+                  <div className="flex justify-between text-sm">
+                    <span className="text-muted-foreground">Amount</span>
+                    <span className="font-semibold text-foreground">
+                      {formatCurrency(refund.amount, payment.currency)}
+                    </span>
+                  </div>
+                  <div className="flex justify-between text-sm">
+                    <span className="text-muted-foreground">Status</span>
+                    <span className="text-foreground capitalize">
+                      {refund.status.toLowerCase()}
+                    </span>
+                  </div>
+                  <div className="flex justify-between text-sm">
+                    <span className="text-muted-foreground">Est. Delivery</span>
+                    <span className="text-foreground">
+                      {getRefundEta(payment.sourceChain)} ({getPaymentMethodLabel(payment.sourceChain)})
+                    </span>
+                  </div>
+                  {refund.notes && (
+                    <div className="flex justify-between text-sm">
+                      <span className="text-muted-foreground">Notes</span>
+                      <span className="max-w-45 text-right text-foreground">
+                        {refund.notes}
+                      </span>
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+
+          {/* Route */}
           <div className="space-y-3">
-            <div className="rounded-lg border border-border bg-(--secondary)/20 p-3">
-              <p className="text-xs font-medium text-muted-foreground">
-                Source
-              </p>
-              <p className="mt-1 text-sm font-semibold text-foreground">
-                {payment.sourceAsset} on {payment.sourceChain}
-              </p>
-              {payment.sourceAddress && (
-                <p className="mt-1 text-xs text-muted-foreground">
-                  {truncateAddress(payment.sourceAddress)}
+            <h3 className="text-sm font-semibold text-foreground">Route</h3>
+            <div className="space-y-3">
+              <div className="rounded-lg border border-border bg-(--secondary)/20 p-3">
+                <p className="text-xs font-medium text-muted-foreground">
+                  Source
                 </p>
-              )}
-              <p className="mt-1 text-sm text-foreground">
-                {Number(payment.sourceAmount).toFixed(6)}
-              </p>
-            </div>
+                <p className="mt-1 text-sm font-semibold text-foreground">
+                  {payment.sourceAsset} on {payment.sourceChain}
+                </p>
+                {payment.sourceAddress && (
+                  <p className="mt-1 text-xs text-muted-foreground">
+                    {truncateAddress(payment.sourceAddress)}
+                  </p>
+                )}
+                <p className="mt-1 text-sm text-foreground">
+                  {Number(payment.sourceAmount).toFixed(6)}
+                </p>
+              </div>
 
-            <div className="flex justify-center">
-              <div className="rounded-full bg-(--primary)/20 p-2">
-                <div className="text-xs font-semibold text-primary">
-                  ↓
+              <div className="flex justify-center">
+                <div className="rounded-full bg-(--primary)/20 p-2">
+                  <div className="text-xs font-semibold text-primary">
+                    ↓
+                  </div>
                 </div>
               </div>
-            </div>
 
-            <div className="rounded-lg border border-border bg-(--accent)/20 p-3">
-              <p className="text-xs font-medium text-muted-foreground">
-                Destination
-              </p>
-              <p className="mt-1 text-sm font-semibold text-foreground">
-                {payment.destAsset} on {payment.destChain}
-              </p>
-              <p className="mt-1 text-xs text-muted-foreground">
-                {truncateAddress(payment.destAddress)}
-              </p>
-              <p className="mt-1 text-sm text-foreground">
-                {Number(payment.destAmount).toFixed(6)}
-              </p>
+              <div className="rounded-lg border border-border bg-(--accent)/20 p-3">
+                <p className="text-xs font-medium text-muted-foreground">
+                  Destination
+                </p>
+                <p className="mt-1 text-sm font-semibold text-foreground">
+                  {payment.destAsset} on {payment.destChain}
+                </p>
+                <p className="mt-1 text-xs text-muted-foreground">
+                  {truncateAddress(payment.destAddress)}
+                </p>
+                <p className="mt-1 text-sm text-foreground">
+                  {Number(payment.destAmount).toFixed(6)}
+                </p>
+              </div>
             </div>
           </div>
-        </div>
 
-        {/* Timeline */}
-        <div>
-          <h3 className="mb-4 text-sm font-semibold text-foreground">
-            Timeline
-          </h3>
-          <PaymentTimeline payment={payment} />
+          {/* Timeline */}
+          <div>
+            <h3 className="mb-4 text-sm font-semibold text-foreground">
+              Timeline
+            </h3>
+            <PaymentTimeline payment={payment} />
+
+            {/* Refund timeline events */}
+            {refunds && refunds.length > 0 && (
+              <div className="mt-4 border-t border-border pt-4">
+                <h4 className="mb-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+                  Refund Activity
+                </h4>
+                <RefundTimeline
+                  refunds={refunds}
+                  currency={payment.currency}
+                  sourceChain={payment.sourceChain}
+                />
+              </div>
+            )}
+          </div>
         </div>
-      </div>
-    </Drawer>
+      </Drawer>
+
+      {/* Refund Modal */}
+      {showRefundButton && (
+        <RefundModal
+          payment={payment}
+          open={refundModalOpen}
+          onOpenChange={setRefundModalOpen}
+        />
+      )}
+    </>
   );
 }
\ No newline at end of file
diff --git a/apps/dashboard/src/components/payments/PaymentTimeline.tsx b/apps/dashboard/src/components/payments/PaymentTimeline.tsx
index 9339bf1..5ba8971 100644
--- a/apps/dashboard/src/components/payments/PaymentTimeline.tsx
+++ b/apps/dashboard/src/components/payments/PaymentTimeline.tsx
@@ -88,8 +88,7 @@ export function PaymentTimeline({ payment }: PaymentTimelineProps) {
         // Special case for failed/expired/refunded statuses
         if (
           payment.status === "FAILED" ||
-          payment.status === "EXPIRED" ||
-          payment.status === "REFUNDED"
+          payment.status === "EXPIRED"
         ) {
           return (
             <div key={step.status} className="flex gap-3">
@@ -103,15 +102,38 @@ export function PaymentTimeline({ payment }: PaymentTimelineProps) {
                   {step.label}
                 </p>
                 <p className="text-xs text-muted-foreground">
-                  {payment.status === "REFUNDED"
-                    ? "Payment refunded"
-                    : "Payment failed or expired"}
+                  Payment failed or expired
                 </p>
               </div>
             </div>
           );
         }
 
+        // Show completed flow for REFUNDED/REFUNDING (these went through COMPLETED first)
+        if (
+          payment.status === "REFUNDED" ||
+          payment.status === "REFUNDING"
+        ) {
+          return (
+            <div key={step.status} className="flex gap-3">
+              <div className="flex flex-col items-center">
+                <div className="rounded-full p-2 bg-(--primary)/20 text-primary">
+                  <CheckCircle size={16} weight="bold" />
+                </div>
+                {index < TIMELINE_STEPS.length - 1 && (
+                  <div className="my-1 h-8 w-0.5 bg-primary" />
+                )}
+              </div>
+              <div className="pt-1">
+                <p className="text-sm font-medium text-foreground">
+                  {step.label}
+                </p>
+                <p className="text-xs text-muted-foreground">Completed</p>
+              </div>
+            </div>
+          );
+        }
+
         return (
           <div key={step.status} className="flex gap-3">
             <div className="flex flex-col items-center">
diff --git a/apps/dashboard/src/components/payments/RefundHistoryTable.tsx b/apps/dashboard/src/components/payments/RefundHistoryTable.tsx
new file mode 100644
index 0000000..33cdcfc
--- /dev/null
+++ b/apps/dashboard/src/components/payments/RefundHistoryTable.tsx
@@ -0,0 +1,172 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import { useRefunds } from "@/hooks/useRefunds";
+import { DataTable, Pagination, Badge, type Column } from "@useroutr/ui";
+import { formatCurrency } from "@/lib/utils";
+import { REFUND_REASONS, type Refund, type RefundStatus } from "@/lib/refund";
+
+type RefundWithIndex = Refund & Record<string, unknown>;
+
+const STATUS_FILTER_OPTIONS = [
+  { value: "", label: "All" },
+  { value: "PENDING", label: "Pending" },
+  { value: "PROCESSING", label: "Processing" },
+  { value: "COMPLETED", label: "Completed" },
+  { value: "FAILED", label: "Failed" },
+];
+
+const BADGE_VARIANT: Record<RefundStatus, "pending" | "processing" | "completed" | "failed"> = {
+  PENDING: "pending",
+  PROCESSING: "processing",
+  COMPLETED: "completed",
+  FAILED: "failed",
+};
+
+const BADGE_LABEL: Record<RefundStatus, string> = {
+  PENDING: "Pending",
+  PROCESSING: "Processing",
+  COMPLETED: "Completed",
+  FAILED: "Failed",
+};
+
+export function RefundHistoryTable() {
+  const [page, setPage] = useState(1);
+  const [limit, setLimit] = useState(10);
+  const [statusFilter, setStatusFilter] = useState<string>("");
+  const [sortColumn, setSortColumn] = useState("createdAt");
+  const [sortDirection, setSortDirection] = useState<"asc" | "desc">("desc");
+
+  const { data, isLoading } = useRefunds({
+    page,
+    limit,
+    status: statusFilter || undefined,
+    sortBy: sortColumn,
+    sortOrder: sortDirection,
+  });
+
+  const refunds = data?.data ?? [];
+  const totalRefunds = data?.total ?? 0;
+  const totalPages = Math.ceil(totalRefunds / limit);
+
+  const handleSort = (column: string, direction: "asc" | "desc") => {
+    setSortColumn(column);
+    setSortDirection(direction);
+  };
+
+  const columns: Column<RefundWithIndex>[] = useMemo(
+    () => [
+      {
+        key: "paymentId",
+        header: "Payment ID",
+        sortable: false,
+        render: (refund) => (
+          <span className="font-mono text-xs">{refund.paymentId.slice(0, 8)}…</span>
+        ),
+      },
+      {
+        key: "amount",
+        header: "Refund Amount",
+        sortable: true,
+        render: (refund) => (
+          <span className="font-semibold">
+            {formatCurrency(refund.amount, "USD")}
+          </span>
+        ),
+      },
+      {
+        key: "reason",
+        header: "Reason",
+        sortable: false,
+        render: (refund) =>
+          REFUND_REASONS.find((r) => r.value === refund.reason)?.label ?? refund.reason,
+      },
+      {
+        key: "status",
+        header: "Status",
+        sortable: true,
+        render: (refund) => (
+          <Badge variant={BADGE_VARIANT[refund.status]}>
+            {BADGE_LABEL[refund.status]}
+          </Badge>
+        ),
+      },
+      {
+        key: "createdAt",
+        header: "Initiated",
+        sortable: true,
+        render: (refund) =>
+          new Date(refund.createdAt).toLocaleDateString("en-US", {
+            month: "short",
+            day: "numeric",
+            year: "numeric",
+            hour: "2-digit",
+            minute: "2-digit",
+          }),
+      },
+      {
+        key: "completedAt",
+        header: "Completed",
+        sortable: true,
+        render: (refund) =>
+          refund.completedAt
+            ? new Date(refund.completedAt).toLocaleDateString("en-US", {
+                month: "short",
+                day: "numeric",
+                year: "numeric",
+                hour: "2-digit",
+                minute: "2-digit",
+              })
+            : "—",
+      },
+    ],
+    [],
+  );
+
+  return (
+    <div className="space-y-4">
+      {/* Filter bar */}
+      <div className="flex items-center gap-2">
+        {STATUS_FILTER_OPTIONS.map((opt) => (
+          <button
+            key={opt.value}
+            onClick={() => {
+              setStatusFilter(opt.value);
+              setPage(1);
+            }}
+            className={`rounded-sm px-3 py-1.5 text-xs font-medium transition-colors ${
+              statusFilter === opt.value
+                ? "bg-primary text-primary-foreground"
+                : "bg-secondary text-muted-foreground hover:text-foreground"
+            }`}
+          >
+            {opt.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Table */}
+      <DataTable<RefundWithIndex>
+        columns={columns}
+        data={refunds as RefundWithIndex[]}
+        isLoading={isLoading}
+        loadingRows={limit}
+        emptyMessage="No refunds found"
+        sortColumn={sortColumn}
+        sortDirection={sortDirection}
+        onSort={handleSort}
+      />
+
+      {/* Pagination */}
+      <Pagination
+        page={page}
+        totalPages={totalPages}
+        totalItems={totalRefunds}
+        pageSize={limit}
+        onPageChange={setPage}
+        onPageSizeChange={setLimit}
+        pageSizeOptions={[10, 25, 50]}
+      />
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/components/payments/RefundModal.tsx b/apps/dashboard/src/components/payments/RefundModal.tsx
new file mode 100644
index 0000000..5423476
--- /dev/null
+++ b/apps/dashboard/src/components/payments/RefundModal.tsx
@@ -0,0 +1,329 @@
+"use client";
+
+import { useState, useCallback, useMemo } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+  Button,
+  Input,
+  Select,
+  Textarea,
+  useToast,
+} from "@useroutr/ui";
+import { Info, Warning, ArrowLeft } from "@phosphor-icons/react";
+import { type Payment } from "@/hooks/usePayments";
+import { useCreateRefund } from "@/hooks/useRefunds";
+import {
+  REFUND_REASONS,
+  getRefundEta,
+  getPaymentMethodLabel,
+  refundWindowDaysRemaining,
+} from "@/lib/refund";
+import { formatCurrency } from "@/lib/utils";
+
+type RefundType = "full" | "partial";
+type Step = "form" | "confirm";
+
+interface RefundModalProps {
+  payment: Payment;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+const REASON_OPTIONS = REFUND_REASONS.map((r) => ({
+  value: r.value,
+  label: r.label,
+}));
+
+const NOTES_MAX_LENGTH = 500;
+
+export function RefundModal({ payment, open, onOpenChange }: RefundModalProps) {
+  const { toast } = useToast();
+  const createRefund = useCreateRefund();
+
+  const fullAmount = Number(payment.amount);
+  const currency = payment.currency;
+
+  // ── Form state ───────────────────────────────────────────────────────────────
+  const [step, setStep] = useState<Step>("form");
+  const [refundType, setRefundType] = useState<RefundType>("full");
+  const [amountStr, setAmountStr] = useState(String(fullAmount));
+  const [reason, setReason] = useState("");
+  const [notes, setNotes] = useState("");
+
+  // ── Derived ──────────────────────────────────────────────────────────────────
+  const amount = Number(amountStr);
+  const daysRemaining = refundWindowDaysRemaining(payment.completedAt);
+  const methodLabel = getPaymentMethodLabel(payment.sourceChain);
+  const eta = getRefundEta(payment.sourceChain);
+
+  // ── Validation ───────────────────────────────────────────────────────────────
+  const amountError = useMemo(() => {
+    if (refundType === "full") return undefined;
+    if (!amountStr || isNaN(amount)) return "Enter a valid amount";
+    if (amount <= 0) return "Amount must be greater than zero";
+    if (amount > fullAmount)
+      return `Cannot exceed ${formatCurrency(fullAmount, currency)}`;
+    return undefined;
+  }, [refundType, amountStr, amount, fullAmount, currency]);
+
+  const canSubmit = reason !== "" && !amountError && amount > 0;
+
+  // ── Handlers ─────────────────────────────────────────────────────────────────
+  const reset = useCallback(() => {
+    setStep("form");
+    setRefundType("full");
+    setAmountStr(String(fullAmount));
+    setReason("");
+    setNotes("");
+  }, [fullAmount]);
+
+  const handleOpenChange = useCallback(
+    (next: boolean) => {
+      if (!next) reset();
+      onOpenChange(next);
+    },
+    [onOpenChange, reset],
+  );
+
+  const handleTypeToggle = (type: RefundType) => {
+    setRefundType(type);
+    if (type === "full") setAmountStr(String(fullAmount));
+  };
+
+  const handleConfirm = async () => {
+    try {
+      await createRefund.mutateAsync({
+        paymentId: payment.id,
+        amount: refundType === "full" ? fullAmount : amount,
+        reason,
+        notes: notes.trim() || undefined,
+      });
+      toast("Refund initiated successfully", "success");
+      handleOpenChange(false);
+    } catch (err) {
+      toast(
+        err instanceof Error ? err.message : "Failed to create refund",
+        "error",
+      );
+    }
+  };
+
+  // ── Render ───────────────────────────────────────────────────────────────────
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent className="max-w-md">
+        {step === "form" ? (
+          <>
+            <DialogHeader>
+              <DialogTitle>Refund Payment</DialogTitle>
+              <DialogDescription>
+                Issue a refund for payment{" "}
+                <span className="font-mono">{payment.id.slice(0, 8)}…</span>
+              </DialogDescription>
+            </DialogHeader>
+
+            <div className="space-y-5 py-2">
+              {/* Refund type toggle */}
+              <div className="space-y-1.5">
+                <label className="block text-sm font-medium text-foreground">
+                  Refund Type
+                </label>
+                <div className="flex rounded-md border border-border p-0.5">
+                  {(["full", "partial"] as const).map((type) => (
+                    <button
+                      key={type}
+                      type="button"
+                      onClick={() => handleTypeToggle(type)}
+                      className={`flex-1 rounded-sm px-4 py-2 text-sm font-medium transition-colors ${
+                        refundType === type
+                          ? "bg-primary text-primary-foreground"
+                          : "text-muted-foreground hover:text-foreground"
+                      }`}
+                    >
+                      {type === "full" ? "Full Refund" : "Partial Refund"}
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              {/* Amount */}
+              <Input
+                id="refund-amount"
+                label="Refund Amount"
+                type="number"
+                step="0.01"
+                min={0}
+                max={fullAmount}
+                value={amountStr}
+                onChange={(e) => setAmountStr(e.target.value)}
+                readOnly={refundType === "full"}
+                error={amountError}
+                helperText={
+                  refundType === "full"
+                    ? "Full amount will be refunded"
+                    : `Max ${formatCurrency(fullAmount, currency)}`
+                }
+              />
+
+              {/* Reason */}
+              <Select
+                label="Reason"
+                placeholder="Select a reason…"
+                options={REASON_OPTIONS}
+                value={reason}
+                onValueChange={setReason}
+                error={reason === "" ? undefined : undefined}
+              />
+
+              {/* Notes */}
+              <div className="space-y-1.5">
+                <Textarea
+                  id="refund-notes"
+                  label="Notes (optional)"
+                  placeholder="Additional context for this refund…"
+                  value={notes}
+                  onChange={(e) => {
+                    if (e.target.value.length <= NOTES_MAX_LENGTH)
+                      setNotes(e.target.value);
+                  }}
+                  rows={3}
+                />
+                <p className="text-right text-xs text-muted-foreground">
+                  {notes.length}/{NOTES_MAX_LENGTH}
+                </p>
+              </div>
+
+              {/* Refund rules */}
+              <div className="rounded-md border border-border bg-(--blue)/5 p-3">
+                <div className="mb-2 flex items-center gap-1.5 text-sm font-medium text-blue">
+                  <Info size={16} weight="bold" /> Refund Rules
+                </div>
+                <ul className="space-y-1 text-xs text-muted-foreground">
+                  <li>• Refunds allowed up to 180 days ({daysRemaining} days remaining)</li>
+                  <li>• Partial refunds are supported</li>
+                  <li>• Crypto network fees may be deducted</li>
+                  <li>
+                    • Estimated delivery:{" "}
+                    <span className="font-medium text-foreground">{eta}</span>{" "}
+                    ({methodLabel})
+                  </li>
+                </ul>
+              </div>
+            </div>
+
+            <DialogFooter>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => handleOpenChange(false)}
+              >
+                Cancel
+              </Button>
+              <Button
+                variant="primary"
+                size="sm"
+                disabled={!canSubmit}
+                onClick={() => setStep("confirm")}
+              >
+                Review Refund
+              </Button>
+            </DialogFooter>
+          </>
+        ) : (
+          <>
+            <DialogHeader>
+              <DialogTitle>Confirm Refund</DialogTitle>
+              <DialogDescription>
+                Please review the refund details before submitting.
+              </DialogDescription>
+            </DialogHeader>
+
+            <div className="space-y-4 py-2">
+              {/* Summary table */}
+              <div className="space-y-3 rounded-md border border-border p-4">
+                <div className="flex justify-between text-sm">
+                  <span className="text-muted-foreground">Payment</span>
+                  <span className="font-mono text-foreground">
+                    {payment.id.slice(0, 8)}…
+                  </span>
+                </div>
+                <div className="flex justify-between text-sm">
+                  <span className="text-muted-foreground">Refund Amount</span>
+                  <span className="font-semibold text-foreground">
+                    {formatCurrency(
+                      refundType === "full" ? fullAmount : amount,
+                      currency,
+                    )}
+                  </span>
+                </div>
+                <div className="flex justify-between text-sm">
+                  <span className="text-muted-foreground">Type</span>
+                  <span className="text-foreground">
+                    {refundType === "full" ? "Full Refund" : "Partial Refund"}
+                  </span>
+                </div>
+                <div className="flex justify-between text-sm">
+                  <span className="text-muted-foreground">Reason</span>
+                  <span className="text-foreground">
+                    {REFUND_REASONS.find((r) => r.value === reason)?.label}
+                  </span>
+                </div>
+                {notes.trim() && (
+                  <div className="flex justify-between text-sm">
+                    <span className="text-muted-foreground">Notes</span>
+                    <span className="max-w-50 text-right text-foreground">
+                      {notes.trim()}
+                    </span>
+                  </div>
+                )}
+                <div className="flex justify-between text-sm">
+                  <span className="text-muted-foreground">Est. Delivery</span>
+                  <span className="text-foreground">
+                    {eta} ({methodLabel})
+                  </span>
+                </div>
+              </div>
+
+              {/* Warning notice */}
+              <div className="rounded-md border border-(--amber)/30 bg-(--amber)/5 p-3">
+                <div className="mb-1.5 flex items-center gap-1.5 text-sm font-medium text-amber">
+                  <Warning size={16} weight="bold" /> Important
+                </div>
+                <p className="text-xs leading-relaxed text-muted-foreground">
+                  This refund will be processed immediately. The customer may receive
+                  funds within {eta} depending on payment method. Crypto network fees
+                  may be deducted and this action may not be reversible.
+                </p>
+              </div>
+            </div>
+
+            <DialogFooter>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setStep("form")}
+                disabled={createRefund.isPending}
+              >
+                <ArrowLeft size={14} />
+                Back
+              </Button>
+              <Button
+                variant="destructive"
+                size="sm"
+                loading={createRefund.isPending}
+                onClick={handleConfirm}
+              >
+                Confirm Refund
+              </Button>
+            </DialogFooter>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/dashboard/src/components/payments/RefundStatusBadge.tsx b/apps/dashboard/src/components/payments/RefundStatusBadge.tsx
new file mode 100644
index 0000000..d4244b7
--- /dev/null
+++ b/apps/dashboard/src/components/payments/RefundStatusBadge.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import { Badge } from "@useroutr/ui";
+
+export type RefundBadgeStatus = "REFUNDING" | "REFUNDED" | "PARTIAL_REFUND";
+
+const VARIANT_MAP: Record<RefundBadgeStatus, "pending" | "completed" | "processing"> = {
+  REFUNDING: "pending",
+  REFUNDED: "completed",
+  PARTIAL_REFUND: "processing",
+};
+
+const LABEL_MAP: Record<RefundBadgeStatus, string> = {
+  REFUNDING: "Refund Pending",
+  REFUNDED: "Refunded",
+  PARTIAL_REFUND: "Partial Refund",
+};
+
+interface RefundStatusBadgeProps {
+  status: RefundBadgeStatus;
+}
+
+export function RefundStatusBadge({ status }: RefundStatusBadgeProps) {
+  return <Badge variant={VARIANT_MAP[status]}>{LABEL_MAP[status]}</Badge>;
+}
diff --git a/apps/dashboard/src/components/payments/RefundTimeline.tsx b/apps/dashboard/src/components/payments/RefundTimeline.tsx
new file mode 100644
index 0000000..feee825
--- /dev/null
+++ b/apps/dashboard/src/components/payments/RefundTimeline.tsx
@@ -0,0 +1,157 @@
+"use client";
+
+import type { Refund } from "@/lib/refund";
+import { REFUND_REASONS, getRefundEta } from "@/lib/refund";
+import { formatCurrency } from "@/lib/utils";
+import {
+  ArrowCounterClockwise,
+  ArrowsClockwise,
+  CheckCircle,
+  XCircle,
+  Clock,
+} from "@phosphor-icons/react";
+
+interface RefundTimelineProps {
+  refunds: Refund[];
+  currency: string;
+  sourceChain: string;
+}
+
+const STATUS_ICON: Record<string, React.ReactNode> = {
+  PENDING: <Clock size={16} weight="bold" />,
+  PROCESSING: <ArrowsClockwise size={16} weight="bold" />,
+  COMPLETED: <CheckCircle size={16} weight="bold" />,
+  FAILED: <XCircle size={16} weight="bold" />,
+};
+
+const STATUS_COLOR: Record<string, string> = {
+  PENDING: "bg-[var(--amber)]/15 text-[var(--amber)]",
+  PROCESSING: "bg-[var(--blue)]/15 text-[var(--blue)]",
+  COMPLETED: "bg-[var(--green)]/15 text-[var(--green)]",
+  FAILED: "bg-[var(--red)]/15 text-[var(--red)]",
+};
+
+const STATUS_LINE_COLOR: Record<string, string> = {
+  PENDING: "bg-[var(--amber)]",
+  PROCESSING: "bg-[var(--blue)]",
+  COMPLETED: "bg-[var(--green)]",
+  FAILED: "bg-[var(--red)]",
+};
+
+function formatTimestamp(dateStr: string) {
+  const d = new Date(dateStr);
+  return `${d.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+  })} at ${d.toLocaleTimeString("en-US", {
+    hour: "2-digit",
+    minute: "2-digit",
+  })}`;
+}
+
+export function RefundTimeline({ refunds, currency, sourceChain }: RefundTimelineProps) {
+  if (!refunds.length) return null;
+
+  const eta = getRefundEta(sourceChain);
+
+  // Build timeline events from refunds
+  const events = refunds.flatMap((refund) => {
+    const items: Array<{
+      key: string;
+      icon: React.ReactNode;
+      color: string;
+      lineColor: string;
+      label: string;
+      detail: string;
+      timestamp: string;
+    }> = [];
+
+    // Initiated
+    items.push({
+      key: `${refund.id}-initiated`,
+      icon: <ArrowCounterClockwise size={16} weight="bold" />,
+      color: "bg-[var(--amber)]/15 text-[var(--amber)]",
+      lineColor: STATUS_LINE_COLOR[refund.status] ?? "bg-[var(--muted)]/30",
+      label: "Refund initiated",
+      detail: `${formatCurrency(refund.amount, currency)} — ${
+        REFUND_REASONS.find((r) => r.value === refund.reason)?.label ?? refund.reason
+      }${refund.notes ? ` · ${refund.notes}` : ""}`,
+      timestamp: formatTimestamp(refund.createdAt),
+    });
+
+    // Processing (implied if status >= PROCESSING)
+    if (
+      refund.status === "PROCESSING" ||
+      refund.status === "COMPLETED"
+    ) {
+      items.push({
+        key: `${refund.id}-processing`,
+        icon: <ArrowsClockwise size={16} weight="bold" />,
+        color: "bg-[var(--blue)]/15 text-[var(--blue)]",
+        lineColor:
+          refund.status === "COMPLETED"
+            ? "bg-[var(--green)]"
+            : "bg-[var(--muted)]/30",
+        label: "Refund processing",
+        detail: `Est. delivery: ${eta}`,
+        timestamp: formatTimestamp(refund.createdAt),
+      });
+    }
+
+    // Completed
+    if (refund.status === "COMPLETED" && refund.completedAt) {
+      items.push({
+        key: `${refund.id}-completed`,
+        icon: <CheckCircle size={16} weight="bold" />,
+        color: "bg-[var(--green)]/15 text-[var(--green)]",
+        lineColor: "bg-transparent",
+        label: "Refund completed",
+        detail: `${formatCurrency(refund.amount, currency)} refunded`,
+        timestamp: formatTimestamp(refund.completedAt),
+      });
+    }
+
+    // Failed
+    if (refund.status === "FAILED") {
+      items.push({
+        key: `${refund.id}-failed`,
+        icon: <XCircle size={16} weight="bold" />,
+        color: "bg-[var(--red)]/15 text-[var(--red)]",
+        lineColor: "bg-transparent",
+        label: "Refund failed",
+        detail: "The refund could not be processed",
+        timestamp: formatTimestamp(refund.createdAt),
+      });
+    }
+
+    return items;
+  });
+
+  return (
+    <div className="space-y-0">
+      {events.map((event, index) => (
+        <div key={event.key} className="flex gap-3">
+          <div className="flex flex-col items-center">
+            <div className={`rounded-full p-2 ${event.color}`}>
+              {event.icon}
+            </div>
+            {index < events.length - 1 && (
+              <div className={`my-1 h-8 w-0.5 ${event.lineColor}`} />
+            )}
+          </div>
+          <div className="pt-1 pb-4">
+            <p className="text-sm font-medium text-foreground">
+              {event.label}
+            </p>
+            <p className="text-xs text-muted-foreground">
+              {event.detail}
+            </p>
+            <p className="mt-0.5 text-xs text-muted-foreground">
+              {event.timestamp}
+            </p>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/components/payments/StatusBadge.tsx b/apps/dashboard/src/components/payments/StatusBadge.tsx
index 3ca64f3..1608133 100644
--- a/apps/dashboard/src/components/payments/StatusBadge.tsx
+++ b/apps/dashboard/src/components/payments/StatusBadge.tsx
@@ -14,8 +14,8 @@ const STATUS_VARIANTS: Record<PaymentStatus, "pending" | "processing" | "complet
   STELLAR_LOCKED: "processing",
   PROCESSING: "processing",
   COMPLETED: "completed",
-  REFUNDING: "processing",
-  REFUNDED: "cancelled",
+  REFUNDING: "pending",
+  REFUNDED: "completed",
   EXPIRED: "failed",
   FAILED: "failed",
 };
@@ -27,7 +27,7 @@ const STATUS_LABELS: Record<PaymentStatus, string> = {
   STELLAR_LOCKED: "Stellar Locked",
   PROCESSING: "Processing",
   COMPLETED: "Completed",
-  REFUNDING: "Refunding",
+  REFUNDING: "Refund Pending",
   REFUNDED: "Refunded",
   EXPIRED: "Expired",
   FAILED: "Failed",
diff --git a/apps/dashboard/src/components/site-header.tsx b/apps/dashboard/src/components/site-header.tsx
index 294634a..951d3a6 100644
--- a/apps/dashboard/src/components/site-header.tsx
+++ b/apps/dashboard/src/components/site-header.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { usePathname } from "next/navigation";
-import { Bell, Moon, SidebarIcon, Sun } from "lucide-react";
+import { Bell, Moon, Monitor, SidebarIcon, Sun } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
@@ -14,6 +14,11 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator,
 } from "@/components/ui/breadcrumb";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { useTheme } from "@/providers/ThemeProvider";
 
 const routeLabels: Record<string, string> = {
@@ -32,7 +37,7 @@ const routeLabels: Record<string, string> = {
 
 export function SiteHeader() {
   const { toggleSidebar } = useSidebar();
-  const { theme, toggleTheme } = useTheme();
+  const { preference, toggleTheme } = useTheme();
   const pathname = usePathname();
 
   const segments = pathname.split("/").filter(Boolean);
@@ -80,18 +85,32 @@ export function SiteHeader() {
           <Button variant="ghost" size="icon" className="h-8 w-8">
             <Bell className="size-4" />
           </Button>
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-8 w-8"
-            onClick={toggleTheme}
-          >
-            {theme === "dark" ? (
-              <Sun className="size-4" />
-            ) : (
-              <Moon className="size-4" />
-            )}
-          </Button>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8"
+                onClick={toggleTheme}
+                aria-label={`Theme: ${preference}`}
+              >
+                {preference === "dark" ? (
+                  <Moon className="size-4" />
+                ) : preference === "light" ? (
+                  <Sun className="size-4" />
+                ) : (
+                  <Monitor className="size-4" />
+                )}
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              {preference === "light"
+                ? "Light mode — click for dark"
+                : preference === "dark"
+                  ? "Dark mode — click for system"
+                  : "System mode — click for light"}
+            </TooltipContent>
+          </Tooltip>
         </div>
       </div>
     </header>
diff --git a/apps/dashboard/src/hooks/useRefundEvents.ts b/apps/dashboard/src/hooks/useRefundEvents.ts
new file mode 100644
index 0000000..88cfa95
--- /dev/null
+++ b/apps/dashboard/src/hooks/useRefundEvents.ts
@@ -0,0 +1,55 @@
+"use client";
+
+import { useEffect } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { useDashboardSocket } from "./useDashboardSocket";
+import { useToast } from "@useroutr/ui";
+
+interface RefundEventPayload {
+  refundId: string;
+  paymentId: string;
+  status: string;
+  amount: number;
+}
+
+/**
+ * Subscribe to refund.created and refund.completed WebSocket events.
+ * Automatically invalidates relevant queries and shows toast notifications.
+ */
+export function useRefundEvents() {
+  const { subscribe, connected } = useDashboardSocket();
+  const queryClient = useQueryClient();
+  const { toast } = useToast();
+
+  useEffect(() => {
+    if (!connected) return;
+
+    const unsubCreated = subscribe("refund:created", (raw: unknown) => {
+      const payload = raw as RefundEventPayload;
+
+      // Invalidate caches
+      queryClient.invalidateQueries({ queryKey: ["payments"] });
+      queryClient.invalidateQueries({ queryKey: ["payment", payload.paymentId] });
+      queryClient.invalidateQueries({ queryKey: ["payment-refunds", payload.paymentId] });
+      queryClient.invalidateQueries({ queryKey: ["refunds"] });
+
+      toast("Refund initiated", "info");
+    });
+
+    const unsubCompleted = subscribe("refund:completed", (raw: unknown) => {
+      const payload = raw as RefundEventPayload;
+
+      queryClient.invalidateQueries({ queryKey: ["payments"] });
+      queryClient.invalidateQueries({ queryKey: ["payment", payload.paymentId] });
+      queryClient.invalidateQueries({ queryKey: ["payment-refunds", payload.paymentId] });
+      queryClient.invalidateQueries({ queryKey: ["refunds"] });
+
+      toast("Refund completed successfully", "success");
+    });
+
+    return () => {
+      unsubCreated();
+      unsubCompleted();
+    };
+  }, [connected, subscribe, queryClient, toast]);
+}
diff --git a/apps/dashboard/src/hooks/useRefunds.ts b/apps/dashboard/src/hooks/useRefunds.ts
new file mode 100644
index 0000000..f2ff6a8
--- /dev/null
+++ b/apps/dashboard/src/hooks/useRefunds.ts
@@ -0,0 +1,34 @@
+"use client";
+
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { api } from "@/lib/api";
+import type { Refund, RefundPayload, RefundsResponse, RefundsParams } from "@/lib/refund";
+
+export function useRefunds(params: RefundsParams = {}) {
+  return useQuery<RefundsResponse>({
+    queryKey: ["refunds", params],
+    queryFn: () => api.get("/refunds", { params }),
+  });
+}
+
+export function usePaymentRefunds(paymentId: string) {
+  return useQuery<Refund[]>({
+    queryKey: ["payment-refunds", paymentId],
+    queryFn: () => api.get(`/payments/${paymentId}/refunds`),
+    enabled: !!paymentId,
+  });
+}
+
+export function useCreateRefund() {
+  const queryClient = useQueryClient();
+
+  return useMutation<Refund, Error, RefundPayload>({
+    mutationFn: (payload) => api.post<Refund>("/refunds", payload),
+    onSuccess: (data) => {
+      queryClient.invalidateQueries({ queryKey: ["payments"] });
+      queryClient.invalidateQueries({ queryKey: ["payment", data.paymentId] });
+      queryClient.invalidateQueries({ queryKey: ["payment-refunds", data.paymentId] });
+      queryClient.invalidateQueries({ queryKey: ["refunds"] });
+    },
+  });
+}
diff --git a/apps/dashboard/src/lib/refund.ts b/apps/dashboard/src/lib/refund.ts
new file mode 100644
index 0000000..d966e99
--- /dev/null
+++ b/apps/dashboard/src/lib/refund.ts
@@ -0,0 +1,128 @@
+// ── Refund helpers ─────────────────────────────────────────────────────────────
+
+export const REFUND_WINDOW_DAYS = 180;
+
+export const REFUND_REASONS = [
+  { value: "customer_request", label: "Customer Request" },
+  { value: "duplicate", label: "Duplicate Payment" },
+  { value: "fraudulent", label: "Fraudulent" },
+  { value: "other", label: "Other" },
+] as const;
+
+export type RefundReason = (typeof REFUND_REASONS)[number]["value"];
+
+export type RefundStatus = "PENDING" | "PROCESSING" | "COMPLETED" | "FAILED";
+
+export interface Refund {
+  id: string;
+  paymentId: string;
+  amount: number;
+  reason: RefundReason;
+  notes?: string;
+  status: RefundStatus;
+  createdAt: string;
+  completedAt?: string | null;
+}
+
+export interface RefundPayload {
+  paymentId: string;
+  amount: number;
+  reason: string;
+  notes?: string;
+}
+
+export interface RefundsResponse {
+  data: Refund[];
+  total: number;
+  page: number;
+  limit: number;
+}
+
+export interface RefundsParams extends Record<string, unknown> {
+  page?: number;
+  limit?: number;
+  status?: RefundStatus | string;
+  sortBy?: string;
+  sortOrder?: "asc" | "desc";
+}
+
+/**
+ * Check whether a completed payment is still within the refund window.
+ */
+export function isWithinRefundWindow(completedAt: string | null | undefined): boolean {
+  if (!completedAt) return false;
+  const completed = new Date(completedAt);
+  const now = new Date();
+  const diffMs = now.getTime() - completed.getTime();
+  const diffDays = diffMs / (1000 * 60 * 60 * 24);
+  return diffDays <= REFUND_WINDOW_DAYS;
+}
+
+/**
+ * Returns days remaining in the refund window, or 0 if expired.
+ */
+export function refundWindowDaysRemaining(completedAt: string | null | undefined): number {
+  if (!completedAt) return 0;
+  const completed = new Date(completedAt);
+  const now = new Date();
+  const diffDays = (now.getTime() - completed.getTime()) / (1000 * 60 * 60 * 24);
+  return Math.max(0, Math.ceil(REFUND_WINDOW_DAYS - diffDays));
+}
+
+/**
+ * Return an estimated delivery time string based on the payment method / chain.
+ */
+export function getRefundEta(paymentMethod: string): string {
+  const method = paymentMethod.toLowerCase();
+
+  if (method.includes("card") || method.includes("visa") || method.includes("mastercard")) {
+    return "5–10 business days";
+  }
+
+  if (method.includes("bank") || method.includes("ach") || method.includes("wire")) {
+    return "1–3 business days";
+  }
+
+  // Default to crypto for chain names (ethereum, stellar, starknet, etc.)
+  return "A few minutes";
+}
+
+/**
+ * Determine the payment method category from chain/asset info for ETA display.
+ */
+export function getPaymentMethodLabel(sourceChain: string): string {
+  const chain = sourceChain.toLowerCase();
+  if (chain.includes("card")) return "Card";
+  if (chain.includes("bank") || chain.includes("ach")) return "Bank";
+  return "Crypto";
+}
+
+/**
+ * Whether a payment can be refunded (eligible status + within window + not fully refunded).
+ */
+export function canRefund(
+  status: string,
+  completedAt: string | null | undefined,
+  refundedAt: string | null | undefined,
+): boolean {
+  if (status !== "COMPLETED") return false;
+  if (refundedAt) return false; // already fully refunded
+  return isWithinRefundWindow(completedAt);
+}
+
+/**
+ * Get the refund-related display status for a payment.
+ * Returns null if no refund state applies.
+ */
+export function getRefundDisplayStatus(
+  status: string,
+): { label: string; variant: "pending" | "completed" | "processing" } | null {
+  switch (status) {
+    case "REFUNDING":
+      return { label: "Refund Pending", variant: "pending" };
+    case "REFUNDED":
+      return { label: "Refunded", variant: "completed" };
+    default:
+      return null;
+  }
+}
diff --git a/apps/dashboard/src/providers/ThemeProvider.tsx b/apps/dashboard/src/providers/ThemeProvider.tsx
index c9a8990..82d3ceb 100644
--- a/apps/dashboard/src/providers/ThemeProvider.tsx
+++ b/apps/dashboard/src/providers/ThemeProvider.tsx
@@ -1,38 +1,84 @@
 "use client";
 
-import { createContext, useContext, useEffect, useState } from "react";
+import { createContext, useContext, useEffect, useState, useCallback } from "react";
 
-type Theme = "light" | "dark";
+type ThemePreference = "light" | "dark" | "system";
+type ResolvedTheme = "light" | "dark";
 
 interface ThemeContextValue {
-  theme: Theme;
+  /** The user's preference: light, dark, or system */
+  preference: ThemePreference;
+  /** The resolved theme applied to the DOM: light or dark */
+  theme: ResolvedTheme;
+  /** Cycle through light → dark → system */
   toggleTheme: () => void;
-  setTheme: (theme: Theme) => void;
+  /** Set an explicit preference */
+  setPreference: (preference: ThemePreference) => void;
 }
 
 const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);
 
+const STORAGE_KEY = "useroutr-theme";
+
+function resolveTheme(preference: ThemePreference): ResolvedTheme {
+  if (preference === "system") {
+    if (typeof window === "undefined") return "light";
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  }
+  return preference;
+}
+
+function applyThemeToDOM(theme: ResolvedTheme) {
+  const root = document.documentElement;
+  root.classList.remove("light", "dark");
+  root.classList.add(theme);
+}
+
 export function ThemeProvider({ children }: { children: React.ReactNode }) {
-  const [theme, setTheme] = useState<Theme>("light");
+  const [preference, setPreferenceState] = useState<ThemePreference>("system");
+  const [theme, setTheme] = useState<ResolvedTheme>("light");
 
+  // Initialize from localStorage or system preference
   useEffect(() => {
-    const stored = localStorage.getItem("useroutr-theme") as Theme | null;
-    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-    const initial = stored ?? (prefersDark ? "dark" : "light");
-    setTheme(initial);
+    const stored = localStorage.getItem(STORAGE_KEY) as ThemePreference | null;
+    const initial: ThemePreference = stored ?? "system";
+    setPreferenceState(initial);
+    const resolved = resolveTheme(initial);
+    setTheme(resolved);
+    applyThemeToDOM(resolved);
   }, []);
 
+  // Listen for system preference changes when in "system" mode
   useEffect(() => {
-    const root = document.documentElement;
-    root.classList.remove("light", "dark");
-    root.classList.add(theme);
-    localStorage.setItem("useroutr-theme", theme);
-  }, [theme]);
+    if (preference !== "system") return;
+
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const handler = (e: MediaQueryListEvent) => {
+      const resolved: ResolvedTheme = e.matches ? "dark" : "light";
+      setTheme(resolved);
+      applyThemeToDOM(resolved);
+    };
+
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, [preference]);
+
+  const setPreference = useCallback((pref: ThemePreference) => {
+    setPreferenceState(pref);
+    localStorage.setItem(STORAGE_KEY, pref);
+    const resolved = resolveTheme(pref);
+    setTheme(resolved);
+    applyThemeToDOM(resolved);
+  }, []);
 
-  const toggleTheme = () => setTheme((t) => (t === "light" ? "dark" : "light"));
+  const toggleTheme = useCallback(() => {
+    setPreference(
+      preference === "light" ? "dark" : preference === "dark" ? "system" : "light"
+    );
+  }, [preference, setPreference]);
 
   return (
-    <ThemeContext.Provider value={{ theme, toggleTheme, setTheme }}>
+    <ThemeContext.Provider value={{ preference, theme, toggleTheme, setPreference }}>
       {children}
     </ThemeContext.Provider>
   );
diff --git a/package.json b/package.json
index 16314b3..65907f4 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,6 @@
     "@nestjs/jwt": "^11.0.2",
     "@nestjs/passport": "^11.0.0",
     "@openzeppelin/contracts": "^5.6.1",
-    "lightningcss-darwin-arm64": "^1.32.0",
     "passport": "^0.7.0",
     "passport-jwt": "^4.0.1"
   },