diff --git a/src/app/payment/dashboard/PaymentDashboardContent.tsx b/src/app/payment/dashboard/PaymentDashboardContent.tsx
index 00dcf3b8..4031c891 100644
--- a/src/app/payment/dashboard/PaymentDashboardContent.tsx
+++ b/src/app/payment/dashboard/PaymentDashboardContent.tsx
@@ -2,6 +2,7 @@
 
 import React from 'react';
 import { PaymentHistory } from '@/components/payment/PaymentHistory';
+import { PaymentQueuePanel } from '@/components/payment/PaymentQueuePanel';
 import { featureFlags } from '@/config/payment';
 
 /**
@@ -43,6 +44,18 @@ export function PaymentDashboardContent() {
         </div>
       )}
 
+      {/* Offline payment queue management (#4). Shown when a provider is
+          configured — the queue itself works offline regardless, but the panel
+          is only meaningful where payments can actually be made. */}
+      {!noProvidersConfigured && (
+        <section aria-labelledby="payment-queue-heading">
+          <h2 id="payment-queue-heading" className="sr-only">
+            Offline payment queue
+          </h2>
+          <PaymentQueuePanel />
+        </section>
+      )}
+
       <section aria-labelledby="payment-history-heading">
         <h2 id="payment-history-heading" className="mb-4 text-2xl font-bold">
           Payment History
diff --git a/src/components/payment/PaymentQueuePanel/PaymentQueuePanel.accessibility.test.tsx b/src/components/payment/PaymentQueuePanel/PaymentQueuePanel.accessibility.test.tsx
new file mode 100644
index 00000000..01440850
--- /dev/null
+++ b/src/components/payment/PaymentQueuePanel/PaymentQueuePanel.accessibility.test.tsx
@@ -0,0 +1,56 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, waitFor } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import PaymentQueuePanel from './PaymentQueuePanel';
+import type { PaymentQueueItem } from '@/lib/offline-queue/types';
+
+expect.extend(toHaveNoViolations);
+
+const items: PaymentQueueItem[] = [
+  {
+    id: 1,
+    status: 'failed',
+    retries: 2,
+    createdAt: Date.now(),
+    type: 'payment_intent',
+    data: { amount: 1000 },
+    lastError: 'Network error',
+  } as PaymentQueueItem,
+];
+
+let queueData: PaymentQueueItem[] = [];
+
+vi.mock('@/lib/offline-queue/payment-adapter', () => ({
+  paymentQueue: {
+    getQueue: () => Promise.resolve(queueData),
+    retryFailed: () => Promise.resolve(0),
+    sync: () =>
+      Promise.resolve({ success: 0, failed: 0, skipped: 0, conflicted: 0 }),
+    clear: () => Promise.resolve(),
+  },
+}));
+
+vi.mock('@/hooks/useOfflineStatus', () => ({
+  useOfflineStatus: () => ({ isOffline: false }),
+}));
+
+describe('PaymentQueuePanel Accessibility', () => {
+  beforeEach(() => {
+    queueData = [];
+  });
+
+  it('has no violations in the empty state', async () => {
+    const { container } = render(<PaymentQueuePanel pollIntervalMs={999999} />);
+    await waitFor(() => expect(container.firstChild).toBeInTheDocument());
+    expect(await axe(container)).toHaveNoViolations();
+  });
+
+  it('has no violations with queued items', async () => {
+    queueData = items;
+    const { container, findByTestId } = render(
+      <PaymentQueuePanel pollIntervalMs={999999} />
+    );
+    await findByTestId('queue-items');
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
diff --git a/src/components/payment/PaymentQueuePanel/PaymentQueuePanel.stories.tsx b/src/components/payment/PaymentQueuePanel/PaymentQueuePanel.stories.tsx
new file mode 100644
index 00000000..f9e57bf5
--- /dev/null
+++ b/src/components/payment/PaymentQueuePanel/PaymentQueuePanel.stories.tsx
@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import PaymentQueuePanel from './PaymentQueuePanel';
+
+const meta: Meta<typeof PaymentQueuePanel> = {
+  title: 'Features/Payment/PaymentQueuePanel',
+  component: PaymentQueuePanel,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'User-facing management surface for the offline payment queue (#4) — status, queued items + retry counts, manual retry, and clear-queue. Reads the live `paymentQueue`; in Storybook (empty IndexedDB) it shows the empty state.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { pollIntervalMs: 999999 },
+};
diff --git a/src/components/payment/PaymentQueuePanel/PaymentQueuePanel.test.tsx b/src/components/payment/PaymentQueuePanel/PaymentQueuePanel.test.tsx
new file mode 100644
index 00000000..5173c84a
--- /dev/null
+++ b/src/components/payment/PaymentQueuePanel/PaymentQueuePanel.test.tsx
@@ -0,0 +1,126 @@
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import PaymentQueuePanel from './PaymentQueuePanel';
+import type { PaymentQueueItem } from '@/lib/offline-queue/types';
+
+const mockQueue = {
+  getQueue: vi.fn(),
+  retryFailed: vi.fn(),
+  sync: vi.fn(),
+  clear: vi.fn(),
+};
+let offline = false;
+
+vi.mock('@/lib/offline-queue/payment-adapter', () => ({
+  paymentQueue: {
+    getQueue: (...a: unknown[]) => mockQueue.getQueue(...a),
+    retryFailed: (...a: unknown[]) => mockQueue.retryFailed(...a),
+    sync: (...a: unknown[]) => mockQueue.sync(...a),
+    clear: (...a: unknown[]) => mockQueue.clear(...a),
+  },
+}));
+
+vi.mock('@/hooks/useOfflineStatus', () => ({
+  useOfflineStatus: () => ({ isOffline: offline }),
+}));
+
+function makeItem(over: Partial<PaymentQueueItem> = {}): PaymentQueueItem {
+  return {
+    id: 1,
+    status: 'pending',
+    retries: 0,
+    createdAt: Date.now(),
+    type: 'payment_intent',
+    data: { amount: 1000 },
+    ...over,
+  } as PaymentQueueItem;
+}
+
+describe('PaymentQueuePanel', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    offline = false;
+    mockQueue.getQueue.mockResolvedValue([]);
+    mockQueue.retryFailed.mockResolvedValue(0);
+    mockQueue.sync.mockResolvedValue({
+      success: 0,
+      failed: 0,
+      skipped: 0,
+      conflicted: 0,
+    });
+    mockQueue.clear.mockResolvedValue(undefined);
+  });
+
+  it('shows the empty state when the queue is empty', async () => {
+    render(<PaymentQueuePanel pollIntervalMs={999999} />);
+    await waitFor(() =>
+      expect(screen.getByTestId('queue-count')).toHaveTextContent(
+        /no queued payments/i
+      )
+    );
+    expect(screen.getByTestId('queue-retry')).toBeDisabled();
+    expect(screen.getByTestId('queue-clear')).toBeDisabled();
+  });
+
+  it('lists queued items with their retry counts', async () => {
+    mockQueue.getQueue.mockResolvedValue([
+      makeItem({ id: 1, retries: 2 }),
+      makeItem({ id: 2, status: 'failed', retries: 5, lastError: 'boom' }),
+    ]);
+    render(<PaymentQueuePanel pollIntervalMs={999999} />);
+    await waitFor(() =>
+      expect(screen.getByTestId('queue-items')).toBeInTheDocument()
+    );
+    expect(screen.getByTestId('queue-item-retries-1')).toHaveTextContent(
+      /attempt 2\/5/i
+    );
+    // At max retries → "Max retries"
+    expect(screen.getByTestId('queue-item-retries-2')).toHaveTextContent(
+      /max retries/i
+    );
+    expect(screen.getByText('boom')).toBeInTheDocument();
+    expect(screen.getByTestId('queue-count')).toHaveTextContent(/1 pending/i);
+    expect(screen.getByTestId('queue-count')).toHaveTextContent(/1 failed/i);
+  });
+
+  it('retry calls retryFailed then sync', async () => {
+    mockQueue.getQueue.mockResolvedValue([
+      makeItem({ status: 'failed', retries: 1 }),
+    ]);
+    render(<PaymentQueuePanel pollIntervalMs={999999} />);
+    await waitFor(() =>
+      expect(screen.getByTestId('queue-retry')).toBeEnabled()
+    );
+    fireEvent.click(screen.getByTestId('queue-retry'));
+    await waitFor(() => expect(mockQueue.retryFailed).toHaveBeenCalledTimes(1));
+    expect(mockQueue.sync).toHaveBeenCalledTimes(1);
+  });
+
+  it('disables Retry now when offline', async () => {
+    offline = true;
+    mockQueue.getQueue.mockResolvedValue([makeItem()]);
+    render(<PaymentQueuePanel pollIntervalMs={999999} />);
+    await waitFor(() =>
+      expect(screen.getByTestId('queue-conn-state')).toHaveTextContent(
+        /offline/i
+      )
+    );
+    expect(screen.getByTestId('queue-retry')).toBeDisabled();
+  });
+
+  it('clear requires confirmation before calling clear()', async () => {
+    mockQueue.getQueue.mockResolvedValue([makeItem()]);
+    render(<PaymentQueuePanel pollIntervalMs={999999} />);
+    await waitFor(() =>
+      expect(screen.getByTestId('queue-clear')).toBeEnabled()
+    );
+
+    fireEvent.click(screen.getByTestId('queue-clear'));
+    // Confirmation appears; clear NOT yet called.
+    expect(screen.getByTestId('queue-clear-confirm')).toBeInTheDocument();
+    expect(mockQueue.clear).not.toHaveBeenCalled();
+
+    fireEvent.click(screen.getByTestId('queue-clear-confirm-yes'));
+    await waitFor(() => expect(mockQueue.clear).toHaveBeenCalledTimes(1));
+  });
+});
diff --git a/src/components/payment/PaymentQueuePanel/PaymentQueuePanel.tsx b/src/components/payment/PaymentQueuePanel/PaymentQueuePanel.tsx
new file mode 100644
index 00000000..1c9a03e1
--- /dev/null
+++ b/src/components/payment/PaymentQueuePanel/PaymentQueuePanel.tsx
@@ -0,0 +1,248 @@
+/**
+ * PaymentQueuePanel
+ *
+ * User-facing management surface for the offline payment queue (#4). The queue
+ * backend (paymentQueue, IndexedDB via Dexie) was already shipped; this is the
+ * missing UI layer: live online/offline/syncing/queued status, the queued items
+ * with their retry counts, a manual "Retry now" affordance (paymentQueue
+ * retryFailed + sync), and a destructive "Clear queue" behind a confirmation.
+ *
+ * The queue API has no change emitter, so we poll getQueue() like
+ * OfflineRetryBanner does.
+ */
+
+'use client';
+
+import React, { useCallback, useEffect, useState } from 'react';
+import { useOfflineStatus } from '@/hooks/useOfflineStatus';
+import { paymentQueue } from '@/lib/offline-queue/payment-adapter';
+import { DEFAULT_QUEUE_CONFIG } from '@/lib/offline-queue/types';
+import type { PaymentQueueItem } from '@/lib/offline-queue/types';
+
+export interface PaymentQueuePanelProps {
+  /** Override the queue-poll interval (ms). */
+  pollIntervalMs?: number;
+  className?: string;
+  testId?: string;
+}
+
+const DEFAULT_POLL_MS = 5_000;
+const MAX_RETRIES = DEFAULT_QUEUE_CONFIG.maxRetries;
+
+type ConnState = 'online' | 'offline' | 'syncing';
+
+export const PaymentQueuePanel: React.FC<PaymentQueuePanelProps> = ({
+  pollIntervalMs = DEFAULT_POLL_MS,
+  className = '',
+  testId = 'payment-queue-panel',
+}) => {
+  const { isOffline } = useOfflineStatus();
+  const [items, setItems] = useState<PaymentQueueItem[]>([]);
+  const [syncing, setSyncing] = useState(false);
+  const [confirmingClear, setConfirmingClear] = useState(false);
+  const [actionError, setActionError] = useState<string | null>(null);
+
+  const refresh = useCallback(async () => {
+    try {
+      const queue = await paymentQueue.getQueue();
+      setItems(queue);
+    } catch {
+      // Non-critical; leave the last-known list.
+    }
+  }, []);
+
+  useEffect(() => {
+    refresh();
+    const id = window.setInterval(refresh, pollIntervalMs);
+    return () => window.clearInterval(id);
+  }, [refresh, pollIntervalMs]);
+
+  const handleRetry = useCallback(async () => {
+    setActionError(null);
+    setSyncing(true);
+    try {
+      // Reset failed items to pending, then drain the queue.
+      await paymentQueue.retryFailed();
+      await paymentQueue.sync();
+    } catch (err) {
+      setActionError(
+        err instanceof Error ? err.message : 'Failed to retry queued payments'
+      );
+    } finally {
+      setSyncing(false);
+      await refresh();
+    }
+  }, [refresh]);
+
+  const handleClear = useCallback(async () => {
+    setActionError(null);
+    try {
+      await paymentQueue.clear();
+    } catch (err) {
+      setActionError(
+        err instanceof Error ? err.message : 'Failed to clear the queue'
+      );
+    } finally {
+      setConfirmingClear(false);
+      await refresh();
+    }
+  }, [refresh]);
+
+  const pendingCount = items.filter(
+    (i) => i.status === 'pending' || i.status === 'processing'
+  ).length;
+  const failedCount = items.filter((i) => i.status === 'failed').length;
+
+  const connState: ConnState = isOffline
+    ? 'offline'
+    : syncing
+      ? 'syncing'
+      : 'online';
+
+  const statusBadge =
+    connState === 'offline' ? (
+      <span
+        className="badge badge-warning gap-1"
+        data-testid="queue-conn-state"
+      >
+        Offline
+      </span>
+    ) : connState === 'syncing' ? (
+      <span className="badge badge-info gap-1" data-testid="queue-conn-state">
+        <span className="loading loading-spinner loading-xs" />
+        Syncing
+      </span>
+    ) : (
+      <span
+        className="badge badge-success gap-1"
+        data-testid="queue-conn-state"
+      >
+        Online
+      </span>
+    );
+
+  return (
+    <div
+      className={`card bg-base-100 shadow-xl ${className}`}
+      data-testid={testId}
+    >
+      <div className="card-body">
+        <div className="flex flex-wrap items-center justify-between gap-2">
+          <h2 className="card-title">Offline Payment Queue</h2>
+          {statusBadge}
+        </div>
+
+        <p className="text-base-content/85 text-sm" data-testid="queue-count">
+          {items.length === 0
+            ? 'No queued payments.'
+            : `${pendingCount} pending` +
+              (failedCount > 0 ? `, ${failedCount} failed` : '') +
+              ` (${items.length} total)`}
+        </p>
+
+        {actionError && (
+          <div className="alert alert-error p-2 text-xs" role="alert">
+            <span>{actionError}</span>
+          </div>
+        )}
+
+        {items.length > 0 && (
+          <ul className="divide-base-300 divide-y" data-testid="queue-items">
+            {items.map((item) => {
+              const atMax = item.retries >= MAX_RETRIES;
+              return (
+                <li
+                  key={item.id}
+                  className="flex items-center justify-between gap-2 py-2 text-sm"
+                  data-testid={`queue-item-${item.id}`}
+                >
+                  <div className="min-w-0">
+                    <span className="font-semibold capitalize">
+                      {item.type.replace('_', ' ')}
+                    </span>
+                    {item.lastError && (
+                      <span className="text-error block truncate text-xs">
+                        {item.lastError}
+                      </span>
+                    )}
+                  </div>
+                  <div className="flex shrink-0 items-center gap-2">
+                    <span
+                      className={`badge badge-sm ${atMax ? 'badge-error' : 'badge-ghost'}`}
+                      data-testid={`queue-item-retries-${item.id}`}
+                    >
+                      {atMax
+                        ? 'Max retries'
+                        : `Attempt ${item.retries}/${MAX_RETRIES}`}
+                    </span>
+                  </div>
+                </li>
+              );
+            })}
+          </ul>
+        )}
+
+        <div className="card-actions mt-2 justify-end">
+          <button
+            type="button"
+            className="btn btn-primary btn-sm min-h-11"
+            onClick={handleRetry}
+            disabled={syncing || isOffline || items.length === 0}
+            data-testid="queue-retry"
+            aria-label="Retry queued payments now"
+          >
+            {syncing ? (
+              <>
+                <span className="loading loading-spinner loading-xs" />
+                Retrying…
+              </>
+            ) : (
+              'Retry now'
+            )}
+          </button>
+
+          {confirmingClear ? (
+            <div
+              className="flex items-center gap-2"
+              data-testid="queue-clear-confirm"
+            >
+              <span className="text-xs">Clear all queued payments?</span>
+              <button
+                type="button"
+                className="btn btn-error btn-sm min-h-11"
+                onClick={handleClear}
+                data-testid="queue-clear-confirm-yes"
+                aria-label="Confirm clear queue"
+              >
+                Yes, clear
+              </button>
+              <button
+                type="button"
+                className="btn btn-ghost btn-sm min-h-11"
+                onClick={() => setConfirmingClear(false)}
+                aria-label="Cancel clearing the queue"
+              >
+                Cancel
+              </button>
+            </div>
+          ) : (
+            <button
+              type="button"
+              className="btn btn-outline btn-error btn-sm min-h-11"
+              onClick={() => setConfirmingClear(true)}
+              disabled={items.length === 0}
+              data-testid="queue-clear"
+              aria-label="Clear queued payments"
+            >
+              Clear queue
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+PaymentQueuePanel.displayName = 'PaymentQueuePanel';
+
+export default PaymentQueuePanel;
diff --git a/src/components/payment/PaymentQueuePanel/index.tsx b/src/components/payment/PaymentQueuePanel/index.tsx
new file mode 100644
index 00000000..83d7dfef
--- /dev/null
+++ b/src/components/payment/PaymentQueuePanel/index.tsx
@@ -0,0 +1,2 @@
+export { default, PaymentQueuePanel } from './PaymentQueuePanel';
+export type { PaymentQueuePanelProps } from './PaymentQueuePanel';
diff --git a/tests/e2e/payment/05-offline-queue.spec.ts b/tests/e2e/payment/05-offline-queue.spec.ts
index 6816e6f5..17e9328e 100644
--- a/tests/e2e/payment/05-offline-queue.spec.ts
+++ b/tests/e2e/payment/05-offline-queue.spec.ts
@@ -62,9 +62,44 @@ test.describe('Offline Payment Queue', () => {
     });
   });
 
+  test('queue management UI renders on the payment dashboard (#4)', async ({
+    page,
+  }) => {
+    // The offline-queue management UI now exists (#4): PaymentQueuePanel on
+    // /payment/dashboard. With an empty queue the test user sees the empty
+    // state + disabled controls; this asserts the panel + its affordances are
+    // wired (no payment provider/creds needed — the queue is client-side).
+    await page.goto('/payment/dashboard', { waitUntil: 'networkidle' });
+    if (page.url().includes('/sign-in')) {
+      await page.waitForTimeout(3000);
+      await page.goto('/payment/dashboard', { waitUntil: 'networkidle' });
+    }
+    await dismissCookieBanner(page);
+
+    // The panel only renders when a provider is configured (the queue itself
+    // works regardless). When unconfigured, assert the page at least loads.
+    const panel = page.getByTestId('payment-queue-panel');
+    if (await panel.count()) {
+      await expect(panel).toBeVisible({ timeout: 30000 });
+      await expect(page.getByTestId('queue-count')).toBeVisible();
+      // Empty queue → retry + clear are present but disabled.
+      await expect(page.getByTestId('queue-retry')).toBeDisabled();
+      await expect(page.getByTestId('queue-clear')).toBeDisabled();
+    } else {
+      await expect(
+        page.getByRole('heading', { name: 'Payment Dashboard', level: 1 })
+      ).toBeVisible({ timeout: 30000 });
+    }
+  });
+
+  // The flows below drive a POPULATED queue (offline-enqueue, sync, retry,
+  // max-retry, overflow, clear). The UI now exists (PaymentQueuePanel on
+  // /payment/dashboard) — the remaining blocker is SEEDING the queue, which
+  // needs either a real payment attempt (provider creds) or a direct Dexie
+  // IndexedDB fixture. Un-skip once a queue-seed fixture lands. (Was
+  // "UI not yet implemented" — that part is done.)
   test.skip('should queue payment when offline', async ({ page, context }) => {
-    // Skip: Offline queue status not displayed in current UI
-    test.skip(true, 'Offline queue status UI not yet implemented');
+    test.skip(true, 'Needs a queue-seed fixture or provider creds to enqueue');
   });
 
   test.skip('should automatically sync queue when coming online', async ({
@@ -72,7 +107,7 @@ test.describe('Offline Payment Queue', () => {
     context,
   }) => {
     // Skip: Queue sync status not displayed in current UI
-    test.skip(true, 'Queue sync status UI not yet implemented');
+    test.skip(true, 'Needs a queue-seed fixture or provider creds to enqueue');
   });
 
   test.skip('should handle multiple queued payments', async ({
@@ -80,7 +115,7 @@ test.describe('Offline Payment Queue', () => {
     context,
   }) => {
     // Skip: Queue count not displayed in current UI
-    test.skip(true, 'Queue count display not yet implemented');
+    test.skip(true, 'Needs a queue-seed fixture to enqueue multiple items');
   });
 
   test.skip('should persist queue across page reloads', async ({
@@ -88,7 +123,10 @@ test.describe('Offline Payment Queue', () => {
     context,
   }) => {
     // Skip: Queue persistence status not displayed
-    test.skip(true, 'Queue persistence UI not yet implemented');
+    test.skip(
+      true,
+      'Needs a queue-seed fixture (Dexie) to populate before reload'
+    );
   });
 
   test.skip('should retry failed queue items with exponential backoff', async ({
@@ -96,7 +134,7 @@ test.describe('Offline Payment Queue', () => {
     context,
   }) => {
     // Skip: Retry status not displayed
-    test.skip(true, 'Retry status UI not yet implemented');
+    test.skip(true, 'Needs a seeded failed item to exercise backoff/retry UI');
   });
 
   test.skip('should remove queued items after max retry attempts', async ({
@@ -104,7 +142,10 @@ test.describe('Offline Payment Queue', () => {
     context,
   }) => {
     // Skip: Retry status not displayed
-    test.skip(true, 'Max retry UI not yet implemented');
+    test.skip(
+      true,
+      'Needs a seeded item at maxRetries to assert the Max-retries badge'
+    );
   });
 
   test.skip('should show queue status in payment history', async ({
@@ -112,7 +153,10 @@ test.describe('Offline Payment Queue', () => {
     context,
   }) => {
     // Skip: /payment/history route doesn't exist
-    test.skip(true, 'Payment history page not yet implemented');
+    test.skip(
+      true,
+      'Separate /payment/history surface; queue status lives on /payment/dashboard now'
+    );
   });
 
   test.skip('should handle queue overflow gracefully', async ({
@@ -120,11 +164,14 @@ test.describe('Offline Payment Queue', () => {
     context,
   }) => {
     // Skip: Queue overflow alert not implemented
-    test.skip(true, 'Queue overflow handling not yet implemented');
+    test.skip(true, 'Overflow/storage-warning handling not in scope for #4');
   });
 
   test.skip('should clear queue manually', async ({ page, context }) => {
     // Skip: Clear queue button not implemented
-    test.skip(true, 'Clear queue button not yet implemented');
+    test.skip(
+      true,
+      'Clear button EXISTS (PaymentQueuePanel); needs a queue-seed fixture to assert the clear flow end-to-end'
+    );
   });
 });