diff --git a/src/pages/client/MyInvoices.jsx b/src/pages/client/MyInvoices.jsx
index cf2b515..34d7e22 100644
--- a/src/pages/client/MyInvoices.jsx
+++ b/src/pages/client/MyInvoices.jsx
@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react';
 import Layout from '../../components/Layout';
+import LoadingButton from '../../components/LoadingButton';
 import { supabase } from '../../lib/supabase';
 import { generateInvoicePDF } from '../../lib/invoice';
 
@@ -8,6 +9,7 @@ const statusColor = { draft: 'not_started', sent: 'in_progress', paid: 'client_a
 export default function MyInvoices() {
   const [invoices, setInvoices] = useState([]);
   const [loading, setLoading] = useState(true);
+  const [generatingInvoiceId, setGeneratingInvoiceId] = useState('');
 
   useEffect(() => {
     async function load() {
@@ -22,12 +24,15 @@ export default function MyInvoices() {
   }, []);
 
   const handleDownload = async (invoice) => {
-    await generateInvoicePDF(invoice, invoice.company, invoice.items || []);
+    if (generatingInvoiceId) return;
+    setGeneratingInvoiceId(invoice.id);
+    try {
+      await generateInvoicePDF(invoice, invoice.company, invoice.items || []);
+    } finally {
+      setGeneratingInvoiceId('');
+    }
   };
 
-  const outstanding = invoices.filter(i => i.status === 'sent').reduce((s, i) => s + Number(i.total), 0);
-  const paid = invoices.filter(i => i.status === 'paid').reduce((s, i) => s + Number(i.total), 0);
-
   return (
     <Layout>
       <div className="page-header">
@@ -37,17 +42,6 @@ export default function MyInvoices() {
         </div>
       </div>
 
-      <div className="stats-grid" style={{ marginBottom: 24 }}>
-        <div className="stat-card">
-          <div className="stat-value" style={{ fontSize: 22 }}>${outstanding.toFixed(2)}</div>
-          <div className="stat-label">Outstanding</div>
-        </div>
-        <div className="stat-card">
-          <div className="stat-value" style={{ fontSize: 22 }}>${paid.toFixed(2)}</div>
-          <div className="stat-label">Paid</div>
-        </div>
-      </div>
-
       {loading ? (
         <p style={{ color: 'var(--text-muted)' }}>Loading...</p>
       ) : invoices.length === 0 ? (
@@ -56,35 +50,28 @@ export default function MyInvoices() {
           <p>Your invoices will appear here once they are sent.</p>
         </div>
       ) : (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
           {invoices.map(inv => {
             const isOverdue = inv.status !== 'paid' && new Date(inv.due_date) < new Date();
             return (
-              <div key={inv.id} className="request-card">
-                <div className="request-card-header">
-                  <div>
-                    <div className="request-card-title">{inv.invoice_number}</div>
-                    <div className="request-card-meta">
-                      Issued {new Date(inv.invoice_date).toLocaleDateString()} · Due{' '}
-                      <span style={{ color: isOverdue ? 'var(--danger)' : 'inherit' }}>
-                        {new Date(inv.due_date).toLocaleDateString()}
-                      </span>
-                      {isOverdue && ' · Overdue'}
-                    </div>
-                  </div>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-                    <span className={`badge badge-${statusColor[inv.status]}`} style={{ textTransform: 'capitalize' }}>{inv.status}</span>
-                    <div style={{ fontSize: 18, fontWeight: 700, color: 'var(--accent)' }}>${Number(inv.total).toFixed(2)}</div>
+              <div key={inv.id} className="interactive-surface" style={{ border: '1px solid var(--border)', borderRadius: 8, background: 'var(--card-bg)', padding: '14px 18px', display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
+                <div style={{ flex: 1, minWidth: 0 }}>
+                  <div style={{ fontWeight: 600, fontSize: 14, color: 'var(--text-primary)', marginBottom: 4 }}>{inv.invoice_number}</div>
+                  <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>
+                    Issued {new Date(inv.invoice_date).toLocaleDateString()} · Due{' '}
+                    <span style={{ color: isOverdue ? 'var(--danger)' : 'inherit' }}>
+                      {new Date(inv.due_date).toLocaleDateString()}
+                    </span>
+                    {isOverdue && ' · Overdue'}
+                    {inv.items?.length > 0 && ` · ${inv.items.length} item${inv.items.length !== 1 ? 's' : ''}`}
                   </div>
                 </div>
-                {inv.items && inv.items.length > 0 && (
-                  <div style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: 10 }}>
-                    {inv.items.map(i => i.description).join(' · ')}
-                  </div>
-                )}
-                <button className="btn btn-outline btn-sm" onClick={() => handleDownload(inv)}>
-                  Download PDF
-                </button>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexShrink: 0 }}>
+                  <span className={`badge badge-${statusColor[inv.status]}`} style={{ textTransform: 'capitalize' }}>{inv.status}</span>
+                  <LoadingButton className="btn btn-outline btn-sm" loading={generatingInvoiceId === inv.id} disabled={Boolean(generatingInvoiceId)} loadingText="Generating..." onClick={() => handleDownload(inv)}>
+                    Download PDF
+                  </LoadingButton>
+                </div>
               </div>
             );
           })}