diff --git a/src/__tests__/InvoiceExportButton.test.tsx b/src/__tests__/InvoiceExportButton.test.tsx
new file mode 100644
index 0000000..2c86ebf
--- /dev/null
+++ b/src/__tests__/InvoiceExportButton.test.tsx
@@ -0,0 +1,115 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { vi, describe, test, expect, beforeEach } from 'vitest';
+import InvoiceExportButton from '@/components/InvoiceExportButton';
+import type { Invoice } from '@stellar-split/sdk';
+
+const mockInvoice: Invoice = {
+  id: 'test-invoice-123',
+  creator: 'GBBD47UZQ5DSJYNF4H46ZCT5GX6MCLJJWHCCTV4GMSD5SJWATLVL547Z',
+  status: 'PENDING',
+  token: 'USDC',
+  recipients: [
+    { address: 'GTEST1', amount: BigInt(1000000) },
+    { address: 'GTEST2', amount: BigInt(2000000) },
+  ],
+  payments: [],
+  funded: BigInt(0),
+  deadline: 0,
+};
+
+// Mock the toast hook
+vi.mock('@/hooks/useToast', () => ({
+  useToast: () => ({
+    addToast: vi.fn(),
+  }),
+}));
+
+describe('InvoiceExportButton', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  test('renders export button with initial text', () => {
+    render(<InvoiceExportButton invoice={mockInvoice} total={BigInt(3000000)} />);
+
+    expect(screen.getByRole('button')).toHaveTextContent('↓ Export PDF');
+  });
+
+  test('button is not disabled initially', () => {
+    render(<InvoiceExportButton invoice={mockInvoice} total={BigInt(3000000)} />);
+
+    const button = screen.getByRole('button');
+    expect(button).not.toBeDisabled();
+  });
+
+  test('applies correct styling to button', () => {
+    render(<InvoiceExportButton invoice={mockInvoice} total={BigInt(3000000)} />);
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveClass('px-3', 'py-1.5', 'rounded-lg', 'bg-gray-700');
+  });
+
+  test('button has focus-visible ring on focus', () => {
+    render(<InvoiceExportButton invoice={mockInvoice} total={BigInt(3000000)} />);
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveClass('focus-visible:ring-2', 'focus-visible:ring-indigo-500');
+  });
+
+  test('maintains disabled state opacity styling', () => {
+    render(<InvoiceExportButton invoice={mockInvoice} total={BigInt(3000000)} />);
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveClass('disabled:opacity-50');
+  });
+
+  test('button renders with proper button type', () => {
+    render(<InvoiceExportButton invoice={mockInvoice} total={BigInt(3000000)} />);
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveAttribute('type', 'button');
+  });
+
+  test('button contains spinner icon', () => {
+    render(<InvoiceExportButton invoice={mockInvoice} total={BigInt(3000000)} />);
+
+    const svg = screen.getByRole('button').querySelector('svg');
+    expect(svg).toBeInTheDocument();
+  });
+
+  test('has aria-hidden attribute on spinner icon', () => {
+    render(<InvoiceExportButton invoice={mockInvoice} total={BigInt(3000000)} />);
+
+    const svg = screen.getByRole('button').querySelector('svg');
+    expect(svg).toHaveAttribute('aria-hidden', 'true');
+  });
+
+  test('renders with flex layout for content', () => {
+    render(<InvoiceExportButton invoice={mockInvoice} total={BigInt(3000000)} />);
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveClass('flex', 'items-center', 'gap-2');
+  });
+
+  test('applies hover styling classes', () => {
+    render(<InvoiceExportButton invoice={mockInvoice} total={BigInt(3000000)} />);
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveClass('hover:bg-gray-600');
+  });
+
+  test('applies text styling for small font', () => {
+    render(<InvoiceExportButton invoice={mockInvoice} total={BigInt(3000000)} />);
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveClass('text-sm', 'font-semibold');
+  });
+
+  test('applies transition-colors for smooth state changes', () => {
+    render(<InvoiceExportButton invoice={mockInvoice} total={BigInt(3000000)} />);
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveClass('transition-colors');
+  });
+});
diff --git a/src/__tests__/InvoiceListSentinel.test.tsx b/src/__tests__/InvoiceListSentinel.test.tsx
new file mode 100644
index 0000000..6509705
--- /dev/null
+++ b/src/__tests__/InvoiceListSentinel.test.tsx
@@ -0,0 +1,141 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { vi, describe, test, expect, beforeEach, afterEach } from 'vitest';
+import InvoiceListSentinel from '@/components/InvoiceListSentinel';
+
+describe('InvoiceListSentinel', () => {
+  let mockObserverDisconnect: ReturnType<typeof vi.fn>;
+  let mockObserverObserve: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    mockObserverDisconnect = vi.fn();
+    mockObserverObserve = vi.fn();
+
+    global.IntersectionObserver = vi.fn((callback) => ({
+      observe: mockObserverObserve,
+      disconnect: mockObserverDisconnect,
+      unobserve: vi.fn(),
+    })) as any;
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  test('calls observer.disconnect() on unmount', () => {
+    const { unmount } = render(
+      <InvoiceListSentinel onVisible={vi.fn()} loading={false} allLoaded={false} />
+    );
+
+    unmount();
+
+    expect(mockObserverDisconnect).toHaveBeenCalledTimes(1);
+  });
+
+  test('observes the sentinel element on mount', () => {
+    render(<InvoiceListSentinel onVisible={vi.fn()} loading={false} allLoaded={false} />);
+
+    expect(mockObserverObserve).toHaveBeenCalledTimes(1);
+  });
+
+  test('displays loading spinner when loading is true', () => {
+    render(<InvoiceListSentinel onVisible={vi.fn()} loading={true} allLoaded={false} />);
+
+    expect(screen.getByText('Loading more invoices…')).toBeInTheDocument();
+  });
+
+  test('displays all loaded message when allLoaded is true', () => {
+    render(<InvoiceListSentinel onVisible={vi.fn()} loading={false} allLoaded={true} />);
+
+    expect(screen.getByText('All invoices loaded')).toBeInTheDocument();
+  });
+
+  test('does not display loading spinner or all loaded message when loading is false and allLoaded is false', () => {
+    render(<InvoiceListSentinel onVisible={vi.fn()} loading={false} allLoaded={false} />);
+
+    expect(screen.queryByText('Loading more invoices…')).not.toBeInTheDocument();
+    expect(screen.queryByText('All invoices loaded')).not.toBeInTheDocument();
+  });
+
+  test('calls onVisible when sentinel enters viewport', () => {
+    const onVisible = vi.fn();
+    const mockCallback = vi.fn();
+
+    global.IntersectionObserver = vi.fn((callback) => {
+      // Simulate intersection
+      callback([{ isIntersecting: true } as IntersectionObserverEntry]);
+      return {
+        observe: vi.fn(),
+        disconnect: vi.fn(),
+        unobserve: vi.fn(),
+      };
+    }) as any;
+
+    render(<InvoiceListSentinel onVisible={onVisible} loading={false} allLoaded={false} />);
+
+    expect(onVisible).toHaveBeenCalled();
+  });
+
+  test('does not call onVisible when sentinel is not intersecting', () => {
+    const onVisible = vi.fn();
+
+    global.IntersectionObserver = vi.fn((callback) => {
+      // Simulate no intersection
+      callback([{ isIntersecting: false } as IntersectionObserverEntry]);
+      return {
+        observe: vi.fn(),
+        disconnect: vi.fn(),
+        unobserve: vi.fn(),
+      };
+    }) as any;
+
+    render(<InvoiceListSentinel onVisible={onVisible} loading={false} allLoaded={false} />);
+
+    expect(onVisible).not.toHaveBeenCalled();
+  });
+
+  test('uses default rootMargin of 300px when not specified', () => {
+    const IntersectionObserverSpy = vi.fn((callback) => ({
+      observe: vi.fn(),
+      disconnect: vi.fn(),
+      unobserve: vi.fn(),
+    }));
+
+    global.IntersectionObserver = IntersectionObserverSpy as any;
+
+    render(<InvoiceListSentinel onVisible={vi.fn()} loading={false} allLoaded={false} />);
+
+    expect(IntersectionObserverSpy).toHaveBeenCalledWith(
+      expect.any(Function),
+      expect.objectContaining({ rootMargin: '300px' })
+    );
+  });
+
+  test('uses custom rootMargin when specified', () => {
+    const IntersectionObserverSpy = vi.fn((callback) => ({
+      observe: vi.fn(),
+      disconnect: vi.fn(),
+      unobserve: vi.fn(),
+    }));
+
+    global.IntersectionObserver = IntersectionObserverSpy as any;
+
+    render(
+      <InvoiceListSentinel onVisible={vi.fn()} loading={false} allLoaded={false} rootMargin="500px" />
+    );
+
+    expect(IntersectionObserverSpy).toHaveBeenCalledWith(
+      expect.any(Function),
+      expect.objectContaining({ rootMargin: '500px' })
+    );
+  });
+
+  test('has aria-live attribute for accessibility', () => {
+    const { container } = render(
+      <InvoiceListSentinel onVisible={vi.fn()} loading={true} allLoaded={false} />
+    );
+
+    const sentinel = container.querySelector('[aria-live="polite"]');
+    expect(sentinel).toBeInTheDocument();
+  });
+});
diff --git a/src/__tests__/InvoiceTimeline.test.tsx b/src/__tests__/InvoiceTimeline.test.tsx
new file mode 100644
index 0000000..8bfb247
--- /dev/null
+++ b/src/__tests__/InvoiceTimeline.test.tsx
@@ -0,0 +1,381 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { vi, describe, test, expect, beforeEach } from 'vitest';
+import InvoiceTimeline, { type InvoiceEvent } from '@/components/InvoiceTimeline';
+
+// Mock RelativeTime component
+vi.mock('@/components/ui/RelativeTime', () => ({
+  default: ({ iso, className }: any) => <span className={className}>{iso}</span>,
+}));
+
+// Mock WalletAddress component
+vi.mock('@/components/WalletAddress', () => ({
+  default: ({ address }: any) => <span>{address}</span>,
+}));
+
+const mockEvents: InvoiceEvent[] = [
+  {
+    type: 'Created',
+    description: 'Invoice created',
+    timestamp: Math.floor(Date.now() / 1000),
+  },
+  {
+    type: 'PaymentReceived',
+    description: 'Payment received from payer',
+    actor: 'GTEST_PAYER',
+    timestamp: Math.floor(Date.now() / 1000) - 3600,
+  },
+  {
+    type: 'Funded',
+    description: 'Invoice fully funded',
+    txHash: 'abc123def456789',
+    timestamp: Math.floor(Date.now() / 1000) - 7200,
+  },
+];
+
+describe('InvoiceTimeline', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  test('displays loading state initially', () => {
+    vi.doMock('@/lib/stellar', () => ({
+      splitClient: {
+        getInvoiceEvents: vi.fn(() => new Promise(() => {})), // Never resolves
+      },
+    }));
+
+    render(<InvoiceTimeline invoiceId="test-invoice" />);
+
+    // Should show loading skeleton
+    expect(screen.getByText(/Loading/i, { exact: false })).toBeInTheDocument();
+  });
+
+  test('displays "No events yet" message when events are empty', async () => {
+    vi.doMock('@/lib/stellar', () => ({
+      splitClient: {
+        getInvoiceEvents: vi.fn().mockResolvedValue({ events: [] }),
+      },
+    }));
+
+    render(<InvoiceTimeline invoiceId="test-invoice" />);
+
+    await waitFor(() => {
+      expect(screen.getByText('No events yet.')).toBeInTheDocument();
+    });
+  });
+
+  test('renders timeline events correctly', async () => {
+    vi.doMock('@/lib/stellar', () => ({
+      splitClient: {
+        getInvoiceEvents: vi.fn().mockResolvedValue({ events: mockEvents }),
+      },
+    }));
+
+    render(<InvoiceTimeline invoiceId="test-invoice" />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/Created/i)).toBeInTheDocument();
+      expect(screen.getByText(/Payment Received/i)).toBeInTheDocument();
+      expect(screen.getByText(/Funded/i)).toBeInTheDocument();
+    });
+  });
+
+  test('displays event descriptions', async () => {
+    vi.doMock('@/lib/stellar', () => ({
+      splitClient: {
+        getInvoiceEvents: vi.fn().mockResolvedValue({ events: mockEvents }),
+      },
+    }));
+
+    render(<InvoiceTimeline invoiceId="test-invoice" />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Invoice created')).toBeInTheDocument();
+      expect(screen.getByText('Payment received from payer')).toBeInTheDocument();
+      expect(screen.getByText('Invoice fully funded')).toBeInTheDocument();
+    });
+  });
+
+  test('expands and collapses details when event has actor or txHash', async () => {
+    const user = userEvent.setup();
+
+    vi.doMock('@/lib/stellar', () => ({
+      splitClient: {
+        getInvoiceEvents: vi.fn().mockResolvedValue({ events: mockEvents }),
+      },
+    }));
+
+    render(<InvoiceTimeline invoiceId="test-invoice" />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/Payment Received/i)).toBeInTheDocument();
+    });
+
+    // Find and click the expand button for the PaymentReceived event
+    const buttons = screen.getAllByRole('button');
+    const expandButton = buttons.find(btn => btn.textContent?.includes('Payment Received'));
+
+    expect(expandButton).toBeInTheDocument();
+
+    // Click to expand
+    await user.click(expandButton!);
+
+    // Actor details should be visible
+    await waitFor(() => {
+      expect(screen.getByText('GTEST_PAYER')).toBeInTheDocument();
+    });
+  });
+
+  test('does not show expand button for events without actor or txHash', async () => {
+    const eventsNoDetails: InvoiceEvent[] = [
+      {
+        type: 'Created',
+        description: 'Invoice created',
+        timestamp: Math.floor(Date.now() / 1000),
+      },
+    ];
+
+    vi.doMock('@/lib/stellar', () => ({
+      splitClient: {
+        getInvoiceEvents: vi.fn().mockResolvedValue({ events: eventsNoDetails }),
+      },
+    }));
+
+    render(<InvoiceTimeline invoiceId="test-invoice" />);
+
+    await waitFor(() => {
+      const button = screen.getByRole('button', { name: /Created/i });
+      expect(button).toBeDisabled();
+    });
+  });
+
+  test('displays actor information when expanded', async () => {
+    const user = userEvent.setup();
+
+    vi.doMock('@/lib/stellar', () => ({
+      splitClient: {
+        getInvoiceEvents: vi.fn().mockResolvedValue({ events: mockEvents }),
+      },
+    }));
+
+    render(<InvoiceTimeline invoiceId="test-invoice" />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/Payment Received/i)).toBeInTheDocument();
+    });
+
+    const buttons = screen.getAllByRole('button');
+    const expandButton = buttons.find(btn => btn.textContent?.includes('Payment Received'));
+
+    await user.click(expandButton!);
+
+    await waitFor(() => {
+      expect(screen.getByText('GTEST_PAYER')).toBeInTheDocument();
+    });
+  });
+
+  test('displays transaction hash link when available', async () => {
+    const user = userEvent.setup();
+
+    vi.doMock('@/lib/stellar', () => ({
+      splitClient: {
+        getInvoiceEvents: vi.fn().mockResolvedValue({ events: mockEvents }),
+      },
+    }));
+
+    render(<InvoiceTimeline invoiceId="test-invoice" />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/Funded/i)).toBeInTheDocument();
+    });
+
+    const buttons = screen.getAllByRole('button');
+    const expandButton = buttons.find(btn => btn.textContent?.includes('Funded'));
+
+    await user.click(expandButton!);
+
+    await waitFor(() => {
+      const link = screen.getByRole('link');
+      expect(link).toHaveAttribute('href', expect.stringContaining('abc123'));
+      expect(link).toHaveAttribute('target', '_blank');
+    });
+  });
+
+  test('shows chevron icon that rotates when expanded', async () => {
+    const user = userEvent.setup();
+
+    vi.doMock('@/lib/stellar', () => ({
+      splitClient: {
+        getInvoiceEvents: vi.fn().mockResolvedValue({ events: mockEvents }),
+      },
+    }));
+
+    const { container } = render(<InvoiceTimeline invoiceId="test-invoice" />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/Payment Received/i)).toBeInTheDocument();
+    });
+
+    const buttons = screen.getAllByRole('button');
+    const expandButton = buttons.find(btn => btn.textContent?.includes('Payment Received'));
+
+    // Initially collapsed (0deg)
+    let chevron = expandButton?.querySelector('span');
+    expect(chevron?.style.transform).toMatch(/rotate\(0deg\)/);
+
+    // Click to expand
+    await user.click(expandButton!);
+
+    // Now it should be rotated
+    await waitFor(() => {
+      chevron = expandButton?.querySelector('span');
+      expect(chevron?.style.transform).toMatch(/rotate\(180deg\)/);
+    });
+  });
+
+  test('animates expand/collapse with max-height transition', async () => {
+    const user = userEvent.setup();
+
+    vi.doMock('@/lib/stellar', () => ({
+      splitClient: {
+        getInvoiceEvents: vi.fn().mockResolvedValue({ events: mockEvents }),
+      },
+    }));
+
+    const { container } = render(<InvoiceTimeline invoiceId="test-invoice" />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/Payment Received/i)).toBeInTheDocument();
+    });
+
+    const details = container.querySelector('.timeline-entry-details');
+    expect(details).toHaveStyle('transition: max-height 300ms cubic-bezier(0.4, 0, 0.2, 1)');
+  });
+
+  test('includes inline styles for animation that respect prefers-reduced-motion', async () => {
+    vi.doMock('@/lib/stellar', () => ({
+      splitClient: {
+        getInvoiceEvents: vi.fn().mockResolvedValue({ events: mockEvents }),
+      },
+    }));
+
+    const { container } = render(<InvoiceTimeline invoiceId="test-invoice" />);
+
+    await waitFor(() => {
+      const style = container.querySelector('style');
+      expect(style?.textContent).toContain('prefers-reduced-motion');
+    });
+  });
+
+  test('displays event type with proper formatting', async () => {
+    vi.doMock('@/lib/stellar', () => ({
+      splitClient: {
+        getInvoiceEvents: vi.fn().mockResolvedValue({
+          events: [
+            {
+              type: 'DisputeRaised',
+              description: 'Dispute was raised',
+              timestamp: Math.floor(Date.now() / 1000),
+            },
+          ],
+        }),
+      },
+    }));
+
+    render(<InvoiceTimeline invoiceId="test-invoice" />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/Dispute Raised/i)).toBeInTheDocument();
+    });
+  });
+
+  test('displays event icons', async () => {
+    vi.doMock('@/lib/stellar', () => ({
+      splitClient: {
+        getInvoiceEvents: vi.fn().mockResolvedValue({
+          events: [
+            {
+              type: 'Funded',
+              description: 'Fully funded',
+              timestamp: Math.floor(Date.now() / 1000),
+            },
+          ],
+        }),
+      },
+    }));
+
+    render(<InvoiceTimeline invoiceId="test-invoice" />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/✅/)).toBeInTheDocument(); // Funded icon
+    });
+  });
+
+  test('shows "Load older events" button when nextCursor is available', async () => {
+    vi.doMock('@/lib/stellar', () => ({
+      splitClient: {
+        getInvoiceEvents: vi
+          .fn()
+          .mockResolvedValue({ events: mockEvents, nextCursor: 'cursor123' }),
+      },
+    }));
+
+    render(<InvoiceTimeline invoiceId="test-invoice" />);
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /Load older events/i })).toBeInTheDocument();
+    });
+  });
+
+  test('does not show "Load older events" button when there are no more pages', async () => {
+    vi.doMock('@/lib/stellar', () => ({
+      splitClient: {
+        getInvoiceEvents: vi.fn().mockResolvedValue({ events: mockEvents }),
+      },
+    }));
+
+    render(<InvoiceTimeline invoiceId="test-invoice" />);
+
+    await waitFor(() => {
+      expect(
+        screen.queryByRole('button', { name: /Load older events/i })
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  test('loads older events when "Load older events" button is clicked', async () => {
+    const user = userEvent.setup();
+
+    vi.doMock('@/lib/stellar', () => ({
+      splitClient: {
+        getInvoiceEvents: vi
+          .fn()
+          .mockResolvedValueOnce({ events: mockEvents, nextCursor: 'cursor123' })
+          .mockResolvedValueOnce({
+            events: [
+              {
+                type: 'Archived',
+                description: 'Invoice archived',
+                timestamp: Math.floor(Date.now() / 1000) - 86400,
+              },
+            ],
+          }),
+      },
+    }));
+
+    render(<InvoiceTimeline invoiceId="test-invoice" />);
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /Load older events/i })).toBeInTheDocument();
+    });
+
+    const loadButton = screen.getByRole('button', { name: /Load older events/i });
+    await user.click(loadButton);
+
+    await waitFor(() => {
+      expect(screen.getByText('Invoice archived')).toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/__tests__/LineItemRow.test.tsx b/src/__tests__/LineItemRow.test.tsx
new file mode 100644
index 0000000..892a05e
--- /dev/null
+++ b/src/__tests__/LineItemRow.test.tsx
@@ -0,0 +1,292 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { vi, describe, test, expect } from 'vitest';
+import LineItemRow from '@/components/LineItemRow';
+
+// Mock AmountDisplay to avoid complex dependencies
+vi.mock('@/components/invoice/AmountDisplay', () => ({
+  default: ({ amount, inline }: any) => <span>{amount.toString()}</span>,
+}));
+
+describe('LineItemRow', () => {
+  const testAddress = 'GBBD47UZQ5DSJYNF4H46ZCT5GX6MCLJJWHCCTV4GMSD5SJWATLVL547Z';
+  const testAmount = BigInt(1000000);
+
+  test('renders payment line item with correct data', () => {
+    render(
+      <table>
+        <tbody>
+          <LineItemRow type="payment" address={testAddress} amount={testAmount} />
+        </tbody>
+      </table>
+    );
+
+    expect(screen.getByTitle(testAddress)).toBeInTheDocument();
+    expect(screen.getByText(testAmount.toString())).toBeInTheDocument();
+  });
+
+  test('renders recipient line item with correct data', () => {
+    render(
+      <table>
+        <tbody>
+          <LineItemRow type="recipient" address={testAddress} amount={testAmount} />
+        </tbody>
+      </table>
+    );
+
+    expect(screen.getByTitle(testAddress)).toBeInTheDocument();
+    expect(screen.getByText(testAmount.toString())).toBeInTheDocument();
+  });
+
+  test('truncates address correctly', () => {
+    render(
+      <table>
+        <tbody>
+          <LineItemRow type="payment" address={testAddress} amount={testAmount} />
+        </tbody>
+      </table>
+    );
+
+    const addressElement = screen.getByTitle(testAddress);
+    expect(addressElement).toBeInTheDocument();
+    // The element should have max-w-[200px] truncate class
+    expect(addressElement).toHaveClass('truncate', 'max-w-[200px]');
+  });
+
+  test('displays edit button when onEdit handler is provided', () => {
+    const onEdit = vi.fn();
+
+    render(
+      <table>
+        <tbody>
+          <LineItemRow type="payment" address={testAddress} amount={testAmount} onEdit={onEdit} />
+        </tbody>
+      </table>
+    );
+
+    expect(screen.getByRole('button', { name: /Edit payment/i })).toBeInTheDocument();
+  });
+
+  test('displays delete button when onDelete handler is provided', () => {
+    const onDelete = vi.fn();
+
+    render(
+      <table>
+        <tbody>
+          <LineItemRow
+            type="payment"
+            address={testAddress}
+            amount={testAmount}
+            onDelete={onDelete}
+          />
+        </tbody>
+      </table>
+    );
+
+    expect(screen.getByRole('button', { name: /Delete payment/i })).toBeInTheDocument();
+  });
+
+  test('does not display action buttons when no handlers are provided', () => {
+    render(
+      <table>
+        <tbody>
+          <LineItemRow type="payment" address={testAddress} amount={testAmount} />
+        </tbody>
+      </table>
+    );
+
+    expect(screen.queryByText('Edit')).not.toBeInTheDocument();
+    expect(screen.queryByText('Delete')).not.toBeInTheDocument();
+  });
+
+  test('calls onEdit with correct arguments when edit button is clicked', async () => {
+    const user = userEvent.setup();
+    const onEdit = vi.fn();
+
+    render(
+      <table>
+        <tbody>
+          <LineItemRow type="payment" address={testAddress} amount={testAmount} onEdit={onEdit} />
+        </tbody>
+      </table>
+    );
+
+    const editButton = screen.getByRole('button', { name: /Edit payment/i });
+    await user.click(editButton);
+
+    expect(onEdit).toHaveBeenCalledWith(testAddress, testAmount);
+  });
+
+  test('calls onDelete with correct arguments when delete button is clicked', async () => {
+    const user = userEvent.setup();
+    const onDelete = vi.fn();
+
+    render(
+      <table>
+        <tbody>
+          <LineItemRow
+            type="payment"
+            address={testAddress}
+            amount={testAmount}
+            onDelete={onDelete}
+          />
+        </tbody>
+      </table>
+    );
+
+    const deleteButton = screen.getByRole('button', { name: /Delete payment/i });
+    await user.click(deleteButton);
+
+    expect(onDelete).toHaveBeenCalledWith(testAddress);
+  });
+
+  test('applies dragging opacity when isDragging is true', () => {
+    const { container } = render(
+      <table>
+        <tbody>
+          <LineItemRow type="payment" address={testAddress} amount={testAmount} isDragging={true} />
+        </tbody>
+      </table>
+    );
+
+    const row = container.querySelector('tr');
+    expect(row).toHaveClass('opacity-50');
+  });
+
+  test('does not apply dragging opacity when isDragging is false', () => {
+    const { container } = render(
+      <table>
+        <tbody>
+          <LineItemRow type="payment" address={testAddress} amount={testAmount} isDragging={false} />
+        </tbody>
+      </table>
+    );
+
+    const row = container.querySelector('tr');
+    expect(row).not.toHaveClass('opacity-50');
+  });
+
+  test('applies cursor-move class when dragging is enabled', () => {
+    const { container } = render(
+      <table>
+        <tbody>
+          <LineItemRow
+            type="payment"
+            address={testAddress}
+            amount={testAmount}
+            onDragStart={vi.fn()}
+          />
+        </tbody>
+      </table>
+    );
+
+    const row = container.querySelector('tr');
+    expect(row).toHaveClass('cursor-move');
+  });
+
+  test('makes row draggable when drag handlers are provided', () => {
+    const { container } = render(
+      <table>
+        <tbody>
+          <LineItemRow
+            type="payment"
+            address={testAddress}
+            amount={testAmount}
+            onDragStart={vi.fn()}
+          />
+        </tbody>
+      </table>
+    );
+
+    const row = container.querySelector('tr');
+    expect(row).toHaveAttribute('draggable', 'true');
+  });
+
+  test('is not draggable when no drag handlers are provided', () => {
+    const { container } = render(
+      <table>
+        <tbody>
+          <LineItemRow type="payment" address={testAddress} amount={testAmount} />
+        </tbody>
+      </table>
+    );
+
+    const row = container.querySelector('tr');
+    expect(row).toHaveAttribute('draggable', 'false');
+  });
+
+  test('calls onDragStart when drag starts', async () => {
+    const onDragStart = vi.fn();
+
+    const { container } = render(
+      <table>
+        <tbody>
+          <LineItemRow
+            type="payment"
+            address={testAddress}
+            amount={testAmount}
+            onDragStart={onDragStart}
+          />
+        </tbody>
+      </table>
+    );
+
+    const row = container.querySelector('tr') as HTMLElement;
+    const dragEvent = new DragEvent('dragstart', { bubbles: true });
+    row.dispatchEvent(dragEvent);
+
+    expect(onDragStart).toHaveBeenCalled();
+  });
+
+  test('applies correct styling to address cell', () => {
+    const { container } = render(
+      <table>
+        <tbody>
+          <LineItemRow type="payment" address={testAddress} amount={testAmount} />
+        </tbody>
+      </table>
+    );
+
+    const addressCell = container.querySelector('td');
+    expect(addressCell).toHaveClass('font-mono', 'text-gray-300', 'truncate');
+  });
+
+  test('applies correct styling to amount cell', () => {
+    const { container } = render(
+      <table>
+        <tbody>
+          <LineItemRow type="payment" address={testAddress} amount={testAmount} />
+        </tbody>
+      </table>
+    );
+
+    const cells = container.querySelectorAll('td');
+    const amountCell = cells[1];
+    expect(amountCell).toHaveClass('text-right', 'text-indigo-300');
+  });
+
+  test('renders different aria-labels for payment and recipient types', () => {
+    const onEdit = vi.fn();
+
+    const { rerender } = render(
+      <table>
+        <tbody>
+          <LineItemRow type="payment" address={testAddress} amount={testAmount} onEdit={onEdit} />
+        </tbody>
+      </table>
+    );
+
+    expect(screen.getByRole('button', { name: /Edit payment/i })).toBeInTheDocument();
+
+    rerender(
+      <table>
+        <tbody>
+          <LineItemRow type="recipient" address={testAddress} amount={testAmount} onEdit={onEdit} />
+        </tbody>
+      </table>
+    );
+
+    expect(screen.getByRole('button', { name: /Edit recipient/i })).toBeInTheDocument();
+  });
+});
diff --git a/src/app/invoice/[id]/page.tsx b/src/app/invoice/[id]/page.tsx
index 501ed5d..1bd8312 100644
--- a/src/app/invoice/[id]/page.tsx
+++ b/src/app/invoice/[id]/page.tsx
@@ -90,6 +90,7 @@ import { useInvoiceRole } from "@/hooks/useInvoiceRole";
 import CursorOverlay from "@/components/CursorOverlay";
 import ReconnectionBanner from "@/components/ReconnectionBanner";
 import SplitSummaryCard from "@/components/invoice/SplitSummaryCard";
+import LineItemRow from "@/components/LineItemRow";
 
 const RecipientPieChart = dynamic(() => import("@/components/RecipientPieChart"), { ssr: false });
 const InvoiceQR = dynamic(() => import("@/components/InvoiceQR"), { ssr: false });
@@ -763,14 +764,12 @@ export default function InvoiceDetailPage({ params }: Props) {
               </thead>
               <tbody className="divide-y divide-gray-700/50">
                 {invoice.payments.map((p, i) => (
-                  <tr key={i} className="hover:bg-gray-700/30 transition-colors">
-                    <td className="px-4 py-2 font-mono text-gray-300 truncate max-w-[200px]" title={p.payer}>
-                      {truncateAddress(p.payer)}
-                    </td>
-                    <td className="px-4 py-2 text-right text-indigo-300 font-medium">
-                      <AmountDisplay amount={p.amount} inline />
-                    </td>
-                  </tr>
+                  <LineItemRow
+                    key={i}
+                    type="payment"
+                    address={p.payer}
+                    amount={p.amount}
+                  />
                 ))}
               </tbody>
             </table>
diff --git a/src/components/InvoiceExportButton.tsx b/src/components/InvoiceExportButton.tsx
index f267746..f90d4c0 100644
--- a/src/components/InvoiceExportButton.tsx
+++ b/src/components/InvoiceExportButton.tsx
@@ -4,6 +4,7 @@ import { useCallback, useState } from 'react';
 import type { Invoice } from '@stellar-split/sdk';
 import { formatAmount } from '@stellar-split/sdk';
 import { DEFAULT_ACCENT_COLOR, type BrandSettings } from '@/lib/brandSettings';
+import { useToast } from '@/hooks/useToast';
 
 interface Props {
   invoice: Invoice;
@@ -40,16 +41,13 @@ async function fetchLogoDataUrl(url: string): Promise<string | null> {
 
 export default function InvoiceExportButton({ invoice, total, branding }: Props) {
   const [loading, setLoading] = useState(false);
+  const { addToast } = useToast();
 
   const handleExport = useCallback(async () => {
     setLoading(true);
     try {
-      // Lazy-load @react-pdf/renderer so it doesn't bloat the initial bundle
       const { pdf, Document, Page, Text, View, StyleSheet, Image } = await import('@react-pdf/renderer');
 
-      // Resolve branding: prefer the prop handed down from the invoice page,
-      // but fall back to fetching the creator's settings so exports triggered
-      // elsewhere stay branded.
       let brand = branding ?? null;
       if (!brand) {
         try {
@@ -185,19 +183,54 @@ export default function InvoiceExportButton({ invoice, total, branding }: Props)
       a.download = `invoice-${invoice.id}.pdf`;
       a.click();
       URL.revokeObjectURL(url);
+    } catch (error) {
+      addToast({
+        type: 'error',
+        message: 'Failed to export invoice. Please try again.',
+      });
+      console.error('Export error:', error);
     } finally {
       setLoading(false);
     }
-  }, [invoice, total, branding]);
+  }, [invoice, total, branding, addToast]);
 
   return (
     <button
       type="button"
       onClick={handleExport}
       disabled={loading}
-      className="px-3 py-1.5 rounded-lg bg-gray-700 hover:bg-gray-600 text-sm font-semibold transition-colors disabled:opacity-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500"
+      className="px-3 py-1.5 rounded-lg bg-gray-700 hover:bg-gray-600 text-sm font-semibold transition-colors disabled:opacity-50 disabled:hover:bg-gray-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 flex items-center gap-2"
     >
-      {loading ? 'Generating…' : '↓ Export PDF'}
+      {loading ? (
+        <>
+          <svg
+            className="animate-spin h-4 w-4"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            aria-hidden="true"
+          >
+            <circle
+              className="opacity-25"
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              strokeWidth="4"
+            />
+            <path
+              className="opacity-75"
+              fill="currentColor"
+              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+            />
+          </svg>
+          Generating…
+        </>
+      ) : (
+        <>
+          ↓ Export PDF
+        </>
+      )}
     </button>
   );
 }
diff --git a/src/components/InvoiceListSentinel.tsx b/src/components/InvoiceListSentinel.tsx
index 28449a5..737df2e 100644
--- a/src/components/InvoiceListSentinel.tsx
+++ b/src/components/InvoiceListSentinel.tsx
@@ -45,7 +45,10 @@ export default function InvoiceListSentinel({
     );
 
     observer.observe(el);
-    return () => observer.disconnect();
+
+    return () => {
+      observer.disconnect();
+    };
   }, [onVisible, rootMargin]);
 
   return (
diff --git a/src/components/InvoiceTimeline.tsx b/src/components/InvoiceTimeline.tsx
index c37246e..c2abd7c 100644
--- a/src/components/InvoiceTimeline.tsx
+++ b/src/components/InvoiceTimeline.tsx
@@ -25,6 +25,26 @@ interface Props {
   invoiceId: string;
 }
 
+const timelineStyles = `
+  @media (prefers-reduced-motion: no-preference) {
+    .timeline-entry-details {
+      overflow: hidden;
+      transition: max-height 300ms cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .timeline-entry-details[data-expanded="false"] {
+      max-height: 0;
+    }
+    .timeline-entry-details[data-expanded="true"] {
+      max-height: 500px;
+    }
+  }
+  @media (prefers-reduced-motion) {
+    .timeline-entry-details {
+      overflow: visible;
+    }
+  }
+`;
+
 const STELLAR_EXPERT_BASE =
   process.env.NEXT_PUBLIC_STELLAR_NETWORK === 'mainnet'
     ? 'https://stellar.expert/explorer/public/tx'
@@ -63,6 +83,7 @@ export default function InvoiceTimeline({ invoiceId }: Props) {
   const [loading, setLoading] = useState(true);
   const [nextCursor, setNextCursor] = useState<string | undefined>();
   const [loadingMore, setLoadingMore] = useState(false);
+  const [expandedEntries, setExpandedEntries] = useState<Set<number>>(new Set());
 
   const load = useCallback(async () => {
     setLoading(true);
@@ -83,6 +104,18 @@ export default function InvoiceTimeline({ invoiceId }: Props) {
     setLoadingMore(false);
   };
 
+  const toggleExpanded = (index: number) => {
+    setExpandedEntries((prev) => {
+      const next = new Set(prev);
+      if (next.has(index)) {
+        next.delete(index);
+      } else {
+        next.add(index);
+      }
+      return next;
+    });
+  };
+
   if (loading) {
     return (
       <div className="space-y-4 animate-pulse">
@@ -108,54 +141,84 @@ export default function InvoiceTimeline({ invoiceId }: Props) {
   }
 
   return (
-    <div>
-      <ol className="relative border-l border-gray-700 ml-2 space-y-6">
-        {events.map((evt, i) => {
-          const meta = EVENT_META[evt.type] ?? EVENT_META.Created;
-          return (
-            <li key={i} className="pl-6 relative">
-              {/* dot */}
-              <span
-                className={`absolute -left-[5px] top-1.5 w-2.5 h-2.5 rounded-full border-2 border-gray-900 ${meta.dot}`}
-                aria-hidden="true"
-              />
-              <div className="flex flex-wrap items-start gap-x-2 gap-y-0.5">
-                <span className={`font-medium text-sm ${meta.color}`}>
-                  {meta.icon} {evt.type.replace(/([A-Z])/g, ' $1').trim()}
-                </span>
-                <RelativeTime iso={new Date(evt.timestamp * 1000).toISOString()} className="text-xs text-gray-500 cursor-default" />
-              </div>
-              <p className="text-xs text-gray-400 mt-0.5">{evt.description}</p>
-              {evt.actor && (
-                <div className="mt-0.5">
-                  <WalletAddress address={evt.actor} truncate showCopy />
+    <>
+      <style>{timelineStyles}</style>
+      <div>
+        <ol className="relative border-l border-gray-700 ml-2 space-y-6">
+          {events.map((evt, i) => {
+            const meta = EVENT_META[evt.type] ?? EVENT_META.Created;
+            const isExpanded = expandedEntries.has(i);
+            const hasDetails = evt.actor || evt.txHash;
+
+            return (
+              <li key={i} className="pl-6 relative">
+                {/* dot */}
+                <span
+                  className={`absolute -left-[5px] top-1.5 w-2.5 h-2.5 rounded-full border-2 border-gray-900 ${meta.dot}`}
+                  aria-hidden="true"
+                />
+                <div className="flex flex-wrap items-start justify-between gap-x-2 gap-y-0.5">
+                  <div className="flex-1">
+                    <button
+                      onClick={() => hasDetails && toggleExpanded(i)}
+                      className={`${hasDetails ? 'cursor-pointer hover:opacity-70' : ''} text-left font-medium text-sm ${meta.color} transition-opacity`}
+                      disabled={!hasDetails}
+                    >
+                      {meta.icon} {evt.type.replace(/([A-Z])/g, ' $1').trim()}
+                      {hasDetails && (
+                        <span className="ml-1 inline-block transform transition-transform" style={{ transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)' }}>
+                          ▼
+                        </span>
+                      )}
+                    </button>
+                  </div>
+                  <RelativeTime iso={new Date(evt.timestamp * 1000).toISOString()} className="text-xs text-gray-500 cursor-default" />
                 </div>
-              )}
-              {evt.txHash && (
-                <a
-                  href={`${STELLAR_EXPERT_BASE}/${evt.txHash}`}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-xs text-indigo-400 hover:underline mt-0.5 inline-block font-mono"
+                <p className="text-xs text-gray-400 mt-0.5">{evt.description}</p>
+
+                <div
+                  className="timeline-entry-details"
+                  data-expanded={isExpanded}
+                  style={{
+                    overflow: 'hidden',
+                    maxHeight: isExpanded ? '500px' : '0',
+                    transition: 'max-height 300ms cubic-bezier(0.4, 0, 0.2, 1)',
+                  }}
                 >
-                  {evt.txHash.slice(0, 8)}…{evt.txHash.slice(-6)} ↗
-                </a>
-              )}
-            </li>
-          );
-        })}
-      </ol>
-
-      {nextCursor && (
-        <button
-          type="button"
-          onClick={loadOlder}
-          disabled={loadingMore}
-          className="mt-6 w-full py-2 text-sm text-gray-400 hover:text-gray-200 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors disabled:opacity-50"
-        >
-          {loadingMore ? 'Loading…' : 'Load older events'}
-        </button>
-      )}
-    </div>
+                  <div className="mt-0.5 space-y-0.5">
+                    {evt.actor && (
+                      <div>
+                        <WalletAddress address={evt.actor} truncate showCopy />
+                      </div>
+                    )}
+                    {evt.txHash && (
+                      <a
+                        href={`${STELLAR_EXPERT_BASE}/${evt.txHash}`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-xs text-indigo-400 hover:underline inline-block font-mono"
+                      >
+                        {evt.txHash.slice(0, 8)}…{evt.txHash.slice(-6)} ↗
+                      </a>
+                    )}
+                  </div>
+                </div>
+              </li>
+            );
+          })}
+        </ol>
+
+        {nextCursor && (
+          <button
+            type="button"
+            onClick={loadOlder}
+            disabled={loadingMore}
+            className="mt-6 w-full py-2 text-sm text-gray-400 hover:text-gray-200 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors disabled:opacity-50"
+          >
+            {loadingMore ? 'Loading…' : 'Load older events'}
+          </button>
+        )}
+      </div>
+    </>
   );
 }
diff --git a/src/components/LineItemRow.tsx b/src/components/LineItemRow.tsx
new file mode 100644
index 0000000..50b3548
--- /dev/null
+++ b/src/components/LineItemRow.tsx
@@ -0,0 +1,79 @@
+'use client';
+
+import React from 'react';
+import type { Invoice } from '@stellar-split/sdk';
+import { truncateAddress } from '@stellar-split/sdk';
+import AmountDisplay from '@/components/invoice/AmountDisplay';
+
+export interface LineItemRowProps {
+  type: 'payment' | 'recipient';
+  address: string;
+  amount: bigint;
+  onEdit?: (address: string, amount: bigint) => void;
+  onDelete?: (address: string) => void;
+  isDragging?: boolean;
+  onDragStart?: (e: React.DragEvent<HTMLTableRowElement>) => void;
+  onDragOver?: (e: React.DragEvent<HTMLTableRowElement>) => void;
+  onDrop?: (e: React.DragEvent<HTMLTableRowElement>) => void;
+  onDragEnd?: (e: React.DragEvent<HTMLTableRowElement>) => void;
+}
+
+export default function LineItemRow({
+  type,
+  address,
+  amount,
+  onEdit,
+  onDelete,
+  isDragging = false,
+  onDragStart,
+  onDragOver,
+  onDrop,
+  onDragEnd,
+}: LineItemRowProps) {
+  return (
+    <tr
+      className={`${isDragging ? 'opacity-50' : ''} hover:bg-gray-700/30 transition-colors ${
+        onDragStart ? 'cursor-move' : ''
+      }`}
+      draggable={!!onDragStart}
+      onDragStart={onDragStart}
+      onDragOver={onDragOver}
+      onDrop={onDrop}
+      onDragEnd={onDragEnd}
+    >
+      <td
+        className="px-4 py-2 font-mono text-gray-300 truncate max-w-[200px]"
+        title={address}
+      >
+        {truncateAddress(address)}
+      </td>
+      <td className="px-4 py-2 text-right text-indigo-300 font-medium">
+        <AmountDisplay amount={amount} inline />
+      </td>
+      {(onEdit || onDelete) && (
+        <td className="px-4 py-2 text-right">
+          <div className="flex gap-2 justify-end">
+            {onEdit && (
+              <button
+                onClick={() => onEdit(address, amount)}
+                className="text-xs text-indigo-400 hover:text-indigo-300"
+                aria-label={`Edit ${type} ${truncateAddress(address)}`}
+              >
+                Edit
+              </button>
+            )}
+            {onDelete && (
+              <button
+                onClick={() => onDelete(address)}
+                className="text-xs text-red-400 hover:text-red-300"
+                aria-label={`Delete ${type} ${truncateAddress(address)}`}
+              >
+                Delete
+              </button>
+            )}
+          </div>
+        </td>
+      )}
+    </tr>
+  );
+}