diff --git a/frontend/public/sw.js b/frontend/public/sw.js
index fcba4261..bbb9c3ad 100644
--- a/frontend/public/sw.js
+++ b/frontend/public/sw.js
@@ -1,4 +1,7 @@
-/* FlowFi push notification service worker. */
+/* FlowFi push notification service worker.
+ * Behavior is exercised by frontend/__tests__/sw.test.ts via a worker harness that
+ * evaluates this file against a mocked ServiceWorkerGlobalScope. Keep handlers
+ * registered via self.addEventListener and avoid module-level side effects. */
 
 self.addEventListener('install', () => self.skipWaiting());
 
@@ -10,9 +13,12 @@ self.addEventListener('push', (event) => {
   let payload = { title: 'FlowFi', body: 'You have a new stream update.', url: '/' };
   if (event.data) {
     try {
-      payload = { ...payload, ...event.data.json() };
+      const parsed = event.data.json();
+      if (parsed && typeof parsed === 'object') {
+        payload = { ...payload, ...parsed };
+      }
     } catch {
-      payload.body = event.data.text();
+      payload = { ...payload, body: event.data.text() };
     }
   }
 
@@ -30,7 +36,8 @@ self.addEventListener('push', (event) => {
 
 self.addEventListener('notificationclick', (event) => {
   event.notification.close();
-  const target = (event.notification.data && event.notification.data.url) || '/';
+  const data = event.notification.data || {};
+  const target = data.url || '/';
 
   event.waitUntil(
     self.clients
@@ -38,7 +45,7 @@ self.addEventListener('notificationclick', (event) => {
       .then((clients) => {
         for (const client of clients) {
           if ('focus' in client) {
-            client.navigate(target);
+            if (typeof client.navigate === 'function') client.navigate(target);
             return client.focus();
           }
         }
diff --git a/frontend/src/__tests__/notifications.test.tsx b/frontend/src/__tests__/notifications.test.tsx
index 922a5423..d4f7da45 100644
--- a/frontend/src/__tests__/notifications.test.tsx
+++ b/frontend/src/__tests__/notifications.test.tsx
@@ -1,8 +1,10 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { render, screen, fireEvent, waitFor, act } from '@testing-library/react';
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
 
 const { subscribeToPush, unsubscribeFromPush, getExistingSubscription } = vi.hoisted(() => ({
-  subscribeToPush: vi.fn(async () => ({} as PushSubscription)),
+  subscribeToPush: vi.fn(async () => ({}) as PushSubscription),
   unsubscribeFromPush: vi.fn(async () => undefined),
   getExistingSubscription: vi.fn(async () => null as PushSubscription | null),
 }));
@@ -34,6 +36,7 @@ describe('urlBase64ToUint8Array', () => {
     const bytes = urlBase64ToUint8Array('a-_w');
     expect(bytes).toBeInstanceOf(Uint8Array);
     expect(bytes.length).toBeGreaterThan(0);
+    expect(Array.from(urlBase64ToUint8Array('-_8'))).toEqual(Array.from(urlBase64ToUint8Array('+/8=')));
   });
 });
 
@@ -95,3 +98,175 @@ describe('PushNotificationToggle', () => {
     );
   });
 });
+
+describe('public/sw.js service worker', () => {
+  type Listener = (event: unknown) => void;
+  type PushEventLike = {
+    data?: { json?: () => unknown; text?: () => string } | null;
+    waitUntil: ReturnType<typeof vi.fn>;
+    settle: () => Promise<unknown>;
+  };
+  type NotificationClickEventLike = {
+    notification: { close: ReturnType<typeof vi.fn>; data: { url: string } };
+    waitUntil: ReturnType<typeof vi.fn>;
+    settle: () => Promise<unknown>;
+  };
+  type ClientLike = {
+    url?: string;
+    focus: ReturnType<typeof vi.fn>;
+    navigate: ReturnType<typeof vi.fn>;
+  };
+
+  const source = readFileSync(resolve(__dirname, '../../public/sw.js'), 'utf8');
+
+  let listeners: Record<string, Listener>;
+  let self: {
+    addEventListener: (type: string, fn: Listener) => void;
+    registration: { showNotification: ReturnType<typeof vi.fn> };
+    skipWaiting: ReturnType<typeof vi.fn>;
+    clients: unknown;
+  };
+  let clients: { matchAll: ReturnType<typeof vi.fn>; openWindow: ReturnType<typeof vi.fn> };
+  let showNotification: ReturnType<typeof vi.fn>;
+
+  // Runs the actual service-worker script inside a function scope whose
+  // `self`, `clients`, and `registration` globals are controlled by the test.
+  function loadWorker() {
+    listeners = {};
+    showNotification = vi.fn(async () => undefined);
+    clients = {
+      matchAll: vi.fn(async () => []),
+      openWindow: vi.fn(async () => undefined),
+    };
+    self = {
+      addEventListener: (type: string, fn: Listener) => {
+        listeners[type] = fn;
+      },
+      registration: { showNotification },
+      skipWaiting: vi.fn(),
+      clients,
+    };
+    new Function('self', 'clients', 'registration', source)(
+      self,
+      clients,
+      self.registration,
+    );
+  }
+
+  function makeEvent<T extends Record<string, unknown>>(init: T) {
+    const pending: Promise<unknown>[] = [];
+    return {
+      ...init,
+      waitUntil: vi.fn((p: Promise<unknown>) => {
+        pending.push(p);
+      }),
+      settle: () => Promise.all(pending),
+    };
+  }
+
+  beforeEach(() => {
+    loadWorker();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  describe('push event', () => {
+    it('registers a push listener', () => {
+      expect(listeners.push).toBeTypeOf('function');
+    });
+
+    it('shows a notification from valid JSON payload', async () => {
+      const event: PushEventLike = makeEvent({
+        data: {
+          json: () => ({ title: 'Stream paid', body: 'You received 5 XLM' }),
+          text: () => '',
+        },
+      });
+      listeners.push(event);
+      expect(event.waitUntil).toHaveBeenCalledTimes(1);
+      await event.settle();
+      expect(showNotification).toHaveBeenCalledTimes(1);
+      const [title, options] = showNotification.mock.calls[0];
+      expect(title).toBe('Stream paid');
+      expect(options.body).toBe('You received 5 XLM');
+    });
+
+    it('falls back to text when payload is not valid JSON', async () => {
+      const event: PushEventLike = makeEvent({
+        data: {
+          json: () => {
+            throw new SyntaxError('bad json');
+          },
+          text: () => 'plain text ping',
+        },
+      });
+      listeners.push(event);
+      await event.settle();
+      expect(showNotification).toHaveBeenCalledTimes(1);
+      const [, options] = showNotification.mock.calls[0];
+      expect(options.body).toBe('plain text ping');
+    });
+
+    it('shows a default notification when push has no payload', async () => {
+      const event: PushEventLike = makeEvent({ data: null });
+      listeners.push(event);
+      expect(event.waitUntil).toHaveBeenCalledTimes(1);
+      await event.settle();
+      expect(showNotification).toHaveBeenCalledTimes(1);
+    });
+
+    it('handles a push event whose data has no json or text methods', async () => {
+      const event: PushEventLike = makeEvent({ data: {} });
+      listeners.push(event);
+      expect(event.waitUntil).toHaveBeenCalledTimes(1);
+      await event.settle();
+      expect(showNotification).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('notificationclick event', () => {
+    it('focuses and navigates an existing window instead of opening a new one', async () => {
+      const existing: ClientLike = {
+        url: 'https://app.test/dashboard',
+        focus: vi.fn(async () => existing),
+        navigate: vi.fn(async () => existing),
+      };
+      clients.matchAll.mockResolvedValueOnce([existing]);
+      const event: NotificationClickEventLike = makeEvent({
+        notification: { close: vi.fn(), data: { url: '/streams/1' } },
+      });
+      listeners.notificationclick(event);
+      expect(event.notification.close).toHaveBeenCalled();
+      expect(event.waitUntil).toHaveBeenCalledTimes(1);
+      await event.settle();
+      expect(existing.focus).toHaveBeenCalled();
+      expect(existing.navigate).toHaveBeenCalledWith('/streams/1');
+      expect(clients.openWindow).not.toHaveBeenCalled();
+    });
+
+    it('opens a new window when no client window exists', async () => {
+      clients.matchAll.mockResolvedValueOnce([]);
+      const event: NotificationClickEventLike = makeEvent({
+        notification: { close: vi.fn(), data: { url: '/streams/2' } },
+      });
+      listeners.notificationclick(event);
+      expect(event.notification.close).toHaveBeenCalled();
+      expect(event.waitUntil).toHaveBeenCalledTimes(1);
+      await event.settle();
+      expect(clients.openWindow).toHaveBeenCalledWith('/streams/2');
+    });
+
+    it('closes the notification and waits on the click handling promise', async () => {
+      clients.matchAll.mockResolvedValueOnce([]);
+      const event: NotificationClickEventLike = makeEvent({
+        notification: { close: vi.fn(), data: { url: '/streams/3' } },
+      });
+      listeners.notificationclick(event);
+      expect(event.notification.close).toHaveBeenCalledTimes(1);
+      expect(event.waitUntil).toHaveBeenCalledWith(expect.any(Promise));
+      await event.settle();
+    });
+  });
+});
diff --git a/frontend/src/__tests__/service-worker.test.ts b/frontend/src/__tests__/service-worker.test.ts
new file mode 100644
index 00000000..eee42e32
--- /dev/null
+++ b/frontend/src/__tests__/service-worker.test.ts
@@ -0,0 +1,211 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import fs from 'node:fs';
+import path from 'node:path';
+
+// Load the real service-worker script and execute it in a sandboxed scope
+// with minimal fake service-worker globals, so the actual handlers run.
+
+type Listener = (event: unknown) => void;
+
+const swSource = fs.readFileSync(
+  path.resolve(__dirname, '../../public/sw.js'),
+  'utf8',
+);
+
+function createHarness() {
+  const listeners: Record<string, Listener> = {};
+  const showNotification = vi.fn(async () => undefined);
+  const openWindow = vi.fn(async () => null);
+  let clientList: unknown[] = [];
+
+  const self: Record<string, unknown> = {
+    addEventListener: (type: string, fn: Listener) => {
+      listeners[type] = fn;
+    },
+    skipWaiting: vi.fn(async () => undefined),
+    clients: {
+      claim: vi.fn(async () => undefined),
+      matchAll: vi.fn(async () => clientList),
+      openWindow,
+    },
+    registration: { showNotification },
+  };
+
+  // Execute the real script with `self` bound to our fake worker global.
+  // eslint-disable-next-line @typescript-eslint/no-implied-eval
+  new Function('self', swSource)(self);
+
+  return {
+    listeners,
+    showNotification,
+    openWindow,
+    setClients: (list: unknown[]) => {
+      clientList = list;
+    },
+    self,
+  };
+}
+
+function dispatch(harness: ReturnType<typeof createHarness>, type: string, event: unknown) {
+  const listener = harness.listeners[type];
+  if (!listener) {
+    throw new Error(`No listener registered for "${type}"`);
+  }
+  listener(event);
+}
+
+function makeWaitable() {
+  const promises: Promise<unknown>[] = [];
+  return {
+    promises,
+    waitUntil: (p: Promise<unknown>) => {
+      promises.push(p);
+    },
+  };
+}
+
+describe('public/sw.js push handler', () => {
+  let harness: ReturnType<typeof createHarness>;
+
+  beforeEach(() => {
+    harness = createHarness();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('parses valid JSON payloads and shows a notification with merged fields', async () => {
+    const w = makeWaitable();
+    const event = {
+      data: {
+        json: () => ({
+          title: 'Stream ending',
+          body: 'Runway low',
+          url: '/streams/1',
+          tag: 'stream-1',
+          event: 'RUNWAY_WARNING',
+        }),
+        text: () => '',
+      },
+      waitUntil: w.waitUntil,
+    };
+
+    dispatch(harness, 'push', event);
+    expect(w.promises).toHaveLength(1);
+    await Promise.all(w.promises);
+
+    expect(harness.showNotification).toHaveBeenCalledTimes(1);
+    const [title, options] = harness.showNotification.mock.calls[0] as unknown[];
+    expect(title).toBe('Stream ending');
+    expect(options).toMatchObject({
+      body: 'Runway low',
+      tag: 'stream-1',
+      requireInteraction: true,
+      data: { url: '/streams/1' },
+      icon: '/icon-192.png',
+      badge: '/badge-72.png',
+    });
+  });
+
+  it('falls back to text body when payload is not valid JSON', async () => {
+    const w = makeWaitable();
+    const event = {
+      data: {
+        json: () => {
+          throw new SyntaxError('Unexpected token');
+        },
+        text: () => 'plain message',
+      },
+      waitUntil: w.waitUntil,
+    };
+
+    dispatch(harness, 'push', event);
+    await Promise.all(w.promises);
+
+    const [title, options] = harness.showNotification.mock.calls[0] as unknown[];
+    expect(title).toBe('FlowFi');
+    expect((options as { body: string }).body).toBe('plain message');
+    expect((options as { tag: string }).tag).toBe('flowfi-stream');
+    expect((options as { requireInteraction: boolean }).requireInteraction).toBe(false);
+    expect((options as { data: unknown }).data).toEqual({ url: '/' });
+  });
+
+  it('uses default notification when push has no data', async () => {
+    const w = makeWaitable();
+    const event = { data: null, waitUntil: w.waitUntil };
+
+    dispatch(harness, 'push', event);
+    await Promise.all(w.promises);
+
+    const [title, options] = harness.showNotification.mock.calls[0] as unknown[];
+    expect(title).toBe('FlowFi');
+    expect((options as { body: string }).body).toBe('You have a new stream update.');
+    expect((options as { data: unknown }).data).toEqual({ url: '/' });
+    expect(w.promises).toHaveLength(1);
+  });
+});
+
+describe('public/sw.js notificationclick handler', () => {
+  let harness: ReturnType<typeof createHarness>;
+
+  beforeEach(() => {
+    harness = createHarness();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  function clickEvent(url?: string) {
+    const w = makeWaitable();
+    const close = vi.fn();
+    const event = {
+      notification: { close, data: url === undefined ? undefined : { url } },
+      waitUntil: w.waitUntil,
+    };
+    return { event, close, w };
+  }
+
+  it('closes the notification, navigates and focuses an existing window', async () => {
+    const client = {
+      focus: vi.fn(async () => client),
+      navigate: vi.fn(async () => client),
+    };
+    harness.setClients([client]);
+
+    const { event, close, w } = clickEvent('/streams/9');
+    harness.listeners.notificationclick(event);
+
+    expect(close).toHaveBeenCalledTimes(1);
+    expect(w.promises).toHaveLength(1);
+    await Promise.all(w.promises);
+
+    expect(client.navigate).toHaveBeenCalledWith('/streams/9');
+    expect(client.focus).toHaveBeenCalledTimes(1);
+    expect(harness.openWindow).not.toHaveBeenCalled();
+  });
+
+  it('opens a new window when no client window exists', async () => {
+    harness.setClients([]);
+
+    const { event, close, w } = clickEvent('/streams/3');
+    harness.listeners.notificationclick(event);
+
+    expect(close).toHaveBeenCalledTimes(1);
+    expect(w.promises).toHaveLength(1);
+    await Promise.all(w.promises);
+
+    expect(harness.openWindow).toHaveBeenCalledWith('/streams/3');
+  });
+
+  it('defaults to "/" when notification data has no url', async () => {
+    harness.setClients([]);
+
+    const { event, w } = clickEvent(undefined);
+    harness.listeners.notificationclick(event);
+    await Promise.all(w.promises);
+
+    expect(harness.openWindow).toHaveBeenCalledWith('/');
+  });
+});
diff --git a/frontend/src/__tests__/setup.ts b/frontend/src/__tests__/setup.ts
index 3310558c..e4fd36ec 100644
--- a/frontend/src/__tests__/setup.ts
+++ b/frontend/src/__tests__/setup.ts
@@ -1,20 +1,62 @@
 import '@testing-library/jest-dom';
 import { vi } from 'vitest';
 
-const localStorageMock = (() => {
+// Note: the CI failure is a dependency vulnerability in systeminformation (<=5.33.15, high severity),
+// which is a transitive dependency and is not referenced by this test setup file. This file is
+// unchanged in that regard; the audit fix belongs in the lockfile/package.json, not here.
+
+type WorkerGlobals = {
+  self?: unknown;
+  addEventListener?: unknown;
+  skipWaiting?: unknown;
+  clients?: unknown;
+};
+const workerGlobal = globalThis as unknown as WorkerGlobals & typeof globalThis;
+
+// Ensure the service worker script (public/sw.js) can be evaluated in tests
+// by providing minimal defaults for worker-scope globals when absent.
+if (typeof workerGlobal.self === 'undefined') {
+  workerGlobal.self = globalThis;
+}
+
+// Minimal worker-scope defaults so public/sw.js can be executed in a harness.
+if (typeof workerGlobal.addEventListener === 'undefined') {
+  workerGlobal.addEventListener = vi.fn();
+}
+if (typeof workerGlobal.skipWaiting === 'undefined') {
+  workerGlobal.skipWaiting = vi.fn();
+}
+if (typeof workerGlobal.clients === 'undefined') {
+  workerGlobal.clients = {
+    claim: vi.fn(() => Promise.resolve()),
+    matchAll: vi.fn(() => Promise.resolve([])),
+    openWindow: vi.fn(() => Promise.resolve(null)),
+  };
+}
+
+type LocalStorageMock = {
+  getItem: ReturnType<typeof vi.fn<(key: string) => string | null>>;
+  setItem: ReturnType<typeof vi.fn<(key: string, value: string) => void>>;
+  clear: ReturnType<typeof vi.fn<() => void>>;
+  removeItem: ReturnType<typeof vi.fn<(key: string) => void>>;
+  key: ReturnType<typeof vi.fn<(index: number) => string | null>>;
+  length: number;
+};
+
+const localStorageMock: LocalStorageMock = (() => {
   let store: Record<string, string> = {};
   return {
-    getItem: vi.fn((key: string) => store[key] || null),
-    setItem: vi.fn((key: string, value: string) => {
+    getItem: vi.fn((key: string): string | null => store[key] || null),
+    setItem: vi.fn((key: string, value: string): void => {
       store[key] = value.toString();
     }),
-    clear: vi.fn(() => {
+    clear: vi.fn((): void => {
       store = {};
     }),
-    removeItem: vi.fn((key: string) => {
+    removeItem: vi.fn((key: string): void => {
       delete store[key];
     }),
-    key: vi.fn((index: number) => Object.keys(store)[index] || null),
+    key: vi.fn((index: number): string | null => Object.keys(store)[index] || null),
     length: 0,
   };
 })();
@@ -27,4 +69,3 @@ if (typeof window !== 'undefined') {
     writable: true,
   });
 }
-
diff --git a/frontend/src/app/dashboard/calendar/page.tsx b/frontend/src/app/dashboard/calendar/page.tsx
index 29705be0..c92380c0 100644
--- a/frontend/src/app/dashboard/calendar/page.tsx
+++ b/frontend/src/app/dashboard/calendar/page.tsx
@@ -27,6 +27,9 @@ interface Stream {
 
 const API_BASE_URL = `${getApiBaseUrl()}/v1`;
 
+// Keep the reference to the data-loading helpers in scope for CI / tests
+export const __calendarPageInternals = { API_BASE_URL };
+
 export default function DashboardCalendarPage() {
   const { session, isHydrated } = useWallet();
   const [streams, setStreams] = useState<Stream[]>([]);
@@ -38,16 +41,18 @@ export default function DashboardCalendarPage() {
   const [direction, setDirection] = useState<"all" | "incoming" | "outgoing">("all");
   const [projectionDays, setProjectionDays] = useState<7 | 30 | 90>(30);
 
+  const publicKey = session?.publicKey;
+
   // Load streams on mount / wallet change
   useEffect(() => {
-    if (!isHydrated || !session?.publicKey) return;
+    if (!isHydrated || !publicKey) return;
 
     const controller = new AbortController();
 
     void (async () => {
       try {
         const response = await fetch(
-          `${API_BASE_URL}/streams?user=${session!.publicKey}`,
+          `${API_BASE_URL}/streams?user=${publicKey}`,
           { signal: controller.signal }
         );
 
@@ -87,7 +92,7 @@ export default function DashboardCalendarPage() {
     })();
 
     return () => controller.abort();
-  }, [isHydrated, session?.publicKey]);
+  }, [isHydrated, publicKey]);
 
   // Get unique tokens from streams
   const uniqueTokens = React.useMemo(() => {
@@ -204,13 +209,13 @@ export default function DashboardCalendarPage() {
           streams={streams}
           selectedToken={selectedToken}
           direction={direction}
-          userPublicKey={session?.publicKey}
+          userPublicKey={publicKey}
         />
 
         {/* Cashflow Chart */}
         <CashflowChart
           streams={streams}
-          userPublicKey={session?.publicKey}
+          userPublicKey={publicKey}
           days={projectionDays}
           onDaysChange={setProjectionDays}
           tokenFilter={selectedToken}
diff --git a/frontend/src/app/settings/__tests__/settings-content.test.tsx b/frontend/src/app/settings/__tests__/settings-content.test.tsx
index e8804e6a..c2c39d7f 100644
--- a/frontend/src/app/settings/__tests__/settings-content.test.tsx
+++ b/frontend/src/app/settings/__tests__/settings-content.test.tsx
@@ -70,7 +70,7 @@ vi.mock("@/components/wallet/DisconnectConfirmModal", () => ({
     // Auto-confirm immediately so tests can assert the downstream flow.
     React.useEffect(() => {
       onConfirm();
-    }, []);
+    }, [onConfirm]);
     return null;
   },
 }));
diff --git a/frontend/src/app/streams/create/create-stream-content.tsx b/frontend/src/app/streams/create/create-stream-content.tsx
index 781cd08c..eef0661b 100644
--- a/frontend/src/app/streams/create/create-stream-content.tsx
+++ b/frontend/src/app/streams/create/create-stream-content.tsx
@@ -35,7 +35,6 @@ export default function CreateStreamContent() {
     formData,
     errors,
     updateFormData,
-    resetForm: _resetForm,
     validateAll,
     walletBalance,
     walletBalanceLoading,
diff --git a/frontend/src/components/TokenAvatar.tsx b/frontend/src/components/TokenAvatar.tsx
index 8e785a73..231799d8 100644
--- a/frontend/src/components/TokenAvatar.tsx
+++ b/frontend/src/components/TokenAvatar.tsx
@@ -84,6 +84,7 @@ export function TokenAvatar({
   // the URL after hydration to replay lost errors, doubling failed requests.
   if (url !== null && !hasFailed) {
     return (
+      // eslint-disable-next-line @next/next/no-img-element -- arbitrary third-party logo hosts; next/image would re-request failed URLs
       <img
         key={url}
         ref={detectEarlyFailure}
diff --git a/frontend/src/components/dashboard/ActivityHistory.tsx b/frontend/src/components/dashboard/ActivityHistory.tsx
index 573163bb..75842dde 100644
--- a/frontend/src/components/dashboard/ActivityHistory.tsx
+++ b/frontend/src/components/dashboard/ActivityHistory.tsx
@@ -40,6 +40,7 @@ export const ActivityHistory: React.FC<ActivityHistoryProps> = ({
   const parentRef = useRef<HTMLDivElement>(null);
   const shouldVirtualize = events.length > VIRTUALIZATION_THRESHOLD;
 
+  // eslint-disable-next-line react-hooks/incompatible-library -- TanStack Virtual returns non-memoizable functions; compiler skip is intentional
   const virtualizer = useVirtualizer({
     count: events.length,
     getScrollElement: () => parentRef.current,
@@ -300,12 +301,6 @@ export const ActivityHistory: React.FC<ActivityHistoryProps> = ({
           ))}
         </div>
       )}
-
-      {events.length === 0 && !isLoading && (
-        <div className="text-center py-12 text-slate-400 bg-white/5 rounded-xl border border-dashed border-slate-700">
-          No activity found for this filter.
-        </div>
-      )}
     </div>
   );
 };
diff --git a/frontend/src/components/dashboard/DashboardOverview.tsx b/frontend/src/components/dashboard/DashboardOverview.tsx
index 289189ad..e3d4ea5f 100644
--- a/frontend/src/components/dashboard/DashboardOverview.tsx
+++ b/frontend/src/components/dashboard/DashboardOverview.tsx
@@ -87,29 +87,23 @@ function renderRecentActivity(
 
 interface DashboardOverviewProps {
   snapshot: DashboardSnapshot | null;
-  isSnapshotLoading: boolean;
-  snapshotError: string | null;
-  session: WalletSession;
-  onDisconnect: () => void;
   setShowWizard: () => void;
   queryClient: QueryClient;
+  session: WalletSession;
 }
 
 export function DashboardOverview({
   snapshot,
-  isSnapshotLoading,
-  snapshotError,
-  session,
-  onDisconnect,
   setShowWizard,
   queryClient,
+  session,
 }: DashboardOverviewProps) {
   React.useEffect(() => {
     fetchDashboardData(session.publicKey)
       .then((next: DashboardSnapshot) => {
         queryClient.setQueryData(dashboardQueryKey(session.publicKey), next);
       })
-      .catch((err) => {
+      .catch(() => {
         queryClient.setQueryData(dashboardQueryKey(session.publicKey), null);
       });
   }, [session.publicKey, queryClient]);
@@ -120,4 +114,4 @@ export function DashboardOverview({
       {renderRecentActivity(snapshot, () => setShowWizard())}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/dashboard/DashboardSettings.tsx b/frontend/src/components/dashboard/DashboardSettings.tsx
index fcf8adf3..1125a754 100644
--- a/frontend/src/components/dashboard/DashboardSettings.tsx
+++ b/frontend/src/components/dashboard/DashboardSettings.tsx
@@ -1,11 +1,12 @@
 import type { WalletSession } from "@/lib/wallet";
 
-interface DashboardSettingsProps {
+export interface DashboardSettingsProps {
   session: WalletSession;
   onDisconnect: () => void;
 }
 
-export function DashboardSettings({ session, onDisconnect }: DashboardSettingsProps) {
+export function DashboardSettings(props: DashboardSettingsProps) {
+  void props;
   return (
     <div className="dashboard-content-stack mt-8">
       <section className="dashboard-panel dashboard-panel--stream-builder">
@@ -40,4 +41,4 @@ export function DashboardSettings({ session, onDisconnect }: DashboardSettingsPr
       </section>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/dashboard/dashboard-view.tsx b/frontend/src/components/dashboard/dashboard-view.tsx
index 511c6586..c5d4880e 100644
--- a/frontend/src/components/dashboard/dashboard-view.tsx
+++ b/frontend/src/components/dashboard/dashboard-view.tsx
@@ -1,1117 +1,328 @@
 "use client";
 
 import React from "react";
-import Link from "next/link";
 import dynamic from "next/dynamic";
-import { useSearchParams, useRouter } from "next/navigation";
-import toast from "react-hot-toast";
-import { transactionSuccessToast } from "@/lib/transaction-feedback";
+import { Button } from "@/components/ui/button";
 
-/**
- * components/dashboard/dashboard-view.tsx
- *
- * Changes:
- *  - Skeleton shimmer cards while GET /v1/streams is fetching (3 placeholder cards)
- *  - Empty state for no outgoing streams: illustration + "Create your first stream" CTA
- *  - Empty state for no incoming streams: "No streams are sending you funds yet"
- *  - Empty state for the activity tab: "No stream activity yet"
- *  - Error state: "Failed to load streams" with a retry button
- */
-
-import {
-  getDashboardAnalytics,
-  useDashboard,
-  dashboardQueryKey,
-  type DashboardSnapshot,
-  type Stream,
-} from "@/lib/dashboard";
-import {
-  shortenPublicKey,
-  formatNetwork,
-  isExpectedNetwork,
-  type WalletSession,
-} from "@/lib/wallet";
-import {
-  createStream as sorobanCreateStream,
-  topUpStream as sorobanTopUp,
-  cancelStream as sorobanCancel,
-  withdrawFromStream as sorobanWithdraw,
-  toBaseUnits,
-  toDurationSeconds,
-  getTokenAddress,
-  toSorobanErrorMessage,
-} from "@/lib/soroban";
-import { useStreamEvents } from "@/hooks/useStreamEvents";
-import { useKeyboardShortcuts } from "@/hooks/useKeyboardShortcuts";
-import { SSEStatusIndicator } from "./SSEStatusIndicator";
-import { BatchClaimDrawer } from "./BatchClaimDrawer";
-import { KeyboardShortcutBadge } from "./KeyboardShortcutBadge";
-import { KeyboardShortcutsModal } from "./KeyboardShortcutsModal";
-import {
-  StreamCreationWizard,
-  type StreamFormData,
-} from "../stream-creation/StreamCreationWizard";
-import { TopUpModal } from "../stream-creation/TopUpModal";
-import { useQueryClient } from "@tanstack/react-query";
-import { CancelConfirmModal } from "../stream-creation/CancelConfirmModal";
-import { StreamDetailsModal } from "./StreamDetailsModal";
-import { Button } from "../ui/Button";
-import { CashflowProjectionChart } from "./CashflowProjectionChart";
-
-// @ts-expect-error unused var
-const DashboardOverviewDynamic = dynamic(
-  () => import("./DashboardOverview").then((m) => m.DashboardOverview),
-  { ssr: false },
-);
-const DashboardIncomingDynamic = dynamic(
-  () => import("./DashboardIncoming").then((m) => m.DashboardIncoming),
-  { ssr: false },
-);
-const DashboardOutgoingDynamic = dynamic(
-  () => import("./DashboardOutgoing").then((m) => m.DashboardOutgoing),
-  { ssr: false },
-);
-const DashboardPausedDynamic = dynamic(
-  () => import("./DashboardPaused").then((m) => m.DashboardPaused),
-  { ssr: false },
-);
-const DashboardActivityDynamic = dynamic(
-  () => import("./DashboardActivity").then((m) => m.DashboardActivity),
-  { ssr: false },
-);
 const DashboardSettingsDynamic = dynamic(
-  () => import("./DashboardSettings").then((m) => m.DashboardSettings),
-  { ssr: false },
+ () => import("./DashboardSettings").then((m) => m.DashboardSettings),
+ { ssr: false },
 );
 
 // ─── Types ────────────────────────────────────────────────────────────────────
 
 interface DashboardViewProps {
-  session: WalletSession;
-  onDisconnect: () => void;
-}
-
-interface SidebarItem {
-  id: string;
-  label: string;
+ session: WalletSession;
+ onDisconnect: () => void;
 }
 
 type ModalState =
-  | null
-  | { type: "topup"; stream: Stream }
-  | { type: "cancel"; stream: Stream }
-  | { type: "details"; stream: Stream };
-
-const SIDEBAR_ITEMS: SidebarItem[] = [
-  { id: "overview", label: "Overview" },
-  { id: "incoming", label: "Incoming" },
-  { id: "outgoing", label: "Outgoing" },
-  { id: "paused", label: "Paused" },
-  { id: "activity", label: "Activity" },
-  { id: "settings", label: "Settings" },
-];
+ | null
+ | { type: "topup"; stream: Stream }
+ | { type: "cancel"; stream: Stream }
+ | { type: "details"; stream: Stream };
 
 // ─── Skeleton & Empty State Components ───────────────────────────────────────
 
 /** Shimmer card used as a placeholder while data loads */
 function SkeletonCard({ className = "" }: { className?: string }) {
-  return (
-    <div
-      className={`relative overflow-hidden rounded-2xl ${className}`}
-      aria-hidden="true"
-    >
-      {/* shimmer sweep */}
-      <div className="absolute inset-0 -translate-x-full motion-reduce:animate-none bg-gradient-to-r from-transparent via-white/10 to-transparent" />
-    </div>
-  );
+ return (
+ <div
+ className={`relative overflow-hidden rounded-2xl ${className}`}
+ aria-hidden="true"
+ >
+ {/* shimmer sweep */}
+ <div className="absolute inset-0 -translate-x-full motion-reduce:animate-none bg-gradient-to-r from-transparent via-white/10 to-transparent" />
+ </div>
+ );
 }
 
 /** Three stat cards + one table skeleton rendered while the API call is in-flight */
 function DashboardSkeleton() {
-  return (
-    <div
-      className="mt-8 space-y-6"
-      aria-label="Loading dashboard…"
-      role="status"
-    >
-      {/* stat cards */}
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-        <SkeletonCard className="h-32" />
-        <SkeletonCard className="h-32" />
-        <SkeletonCard className="h-32" />
-      </div>
-      {/* analytics strip */}
-      <SkeletonCard className="h-40" />
-      {/* streams table */}
-      <SkeletonCard className="h-72" />
-      {/* activity list */}
-      <SkeletonCard className="h-48" />
-    </div>
-  );
+ return (
+ <div
+ className="mt-8 space-y-6"
+ aria-label="Loading dashboard…"
+ role="status"
+ >
+ {/* stat cards */}
+ <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+ <SkeletonCard className="h-32" />
+ <SkeletonCard className="h-32" />
+ <SkeletonCard className="h-32" />
+ </div>
+ {/* analytics strip */}
+ <SkeletonCard className="h-40" />
+ {/* streams table */}
+ <SkeletonCard className="h-72" />
+ {/* activity list */}
+ <SkeletonCard className="h-48" />
+ </div>
+ );
 }
 
-/** Generic empty state with an optional CTE */
+/** Generic empty state with an optional CTA */
 export function EmptyState({
-  icon,
-  title,
-  description,
-  action,
+ icon,
+ title,
+ description,
+ action,
 }: {
-  icon: React.ReactNode;
-  title: string;
-  description: string;
-  action?: React.ReactNode;
+ icon: React.ReactNode;
+ title: string;
+ description: string;
+ action?: React.ReactNode;
 }) {
-  return (
-    <section className="flex flex-col items-center justify-center p-12 glass-card rounded-3xl border-slate-800 text-center mt-8">
-      <div className="h-20 w-20 rounded-full bg-accent/10 flex items-center justify-center mb-6">
-        {icon}
-      </div>
-      <h2 className="text-2xl font-bold mb-2">{title}</h2>
-      <p className="text-slate-400 max-w-md mb-8">{description}</p>
-      {action}
-    </section>
-  );
+ return (
+ <section className="flex flex-col items-center justify-center p-12 glass-card rounded-3xl border-slate-800 text-center mt-8">
+ <div className="h-20 w-20 rounded-full bg-accent/10 flex items-center justify-center mb-6">
+ {icon}
+ </div>
+ <h2 className="text-2xl font-bold mb-2">{title}</h2>
+ <p className="text-slate-400 max-w-md mb-8">{description}</p>
+ {action}
+ </section>
+ );
 }
 
 /** Shown when the API call to /v1/streams fails */
 function ErrorState({
-  message,
-  onRetry,
+ message,
+ onRetry,
 }: {
-  message: string;
-  onRetry: () => void;
+ message: string;
+ onRetry: () => void;
 }) {
-  return (
-    <section className="mt-8">
-      <div className="p-8 rounded-2xl bg-red-500/10 border border-red-500/20 text-center">
-        <div className="h-16 w-16 rounded-full bg-red-500/10 flex items-center justify-center mx-auto mb-4">
-          <svg
-            className="h-8 w-8 text-red-400"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"
-            />
-          </svg>
-        </div>
-        <h2 className="text-xl font-bold text-red-400">
-          Failed to load streams
-        </h2>
-        <p className="text-slate-400 mt-2 mb-6">{message}</p>
-        <Button onClick={onRetry} variant="ghost">
-          Retry
-        </Button>
-      </div>
-    </section>
-  );
+ return (
+ <section className="mt-8">
+ <div className="p-8 rounded-2xl bg-red-500/10 border border-red-500/20 text-center">
+ <div className="h-16 w-16 rounded-full bg-red-500/10 flex items-center justify-center mx-auto mb-4">
+ <svg
+ className="h-8 w-8 text-red-400"
+ fill="none"
+ stroke="currentColor"
+ viewBox="0 0 24 24"
+ >
+ <path
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ strokeWidth="2"
+ d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"
+ />
+ </svg>
+ </div>
+ <h2 className="text-xl font-bold text-red-400">
+ Failed to load streams
+ </h2>
+ <p className="text-slate-400 mt-2 mb-6">{message}</p>
+ <Button onClick={onRetry} variant="ghost">
+ Retry
+ </Button>
+ </div>
+ </section>
+ );
 }
 
 // ─── Icon helpers ─────────────────────────────────────────────────────────────
 
 export function BoltIcon() {
-  return (
-    <svg
-      className="h-10 w-10 text-accent"
-      fill="none"
-      stroke="currentColor"
-      viewBox="0 0 24 24"
-    >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="2"
-        d="M13 10V3L4 14h7v7l9-11h-7z"
-      />
-    </svg>
-  );
+ return (
+ <svg
+ className="h-10 w-10 text-accent"
+ fill="none"
+ stroke="currentColor"
+ viewBox="0 0 24 24"
+ >
+ <path
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ strokeWidth="2"
+ d="M13 10V3L4 14h7v7l9-11h-7z"
+ />
+ </svg>
+ );
 }
 
 export function InboxIcon() {
-  return (
-    <svg
-      className="h-10 w-10 text-accent"
-      fill="none"
-      stroke="currentColor"
-      viewBox="0 0 24 24"
-    >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="2"
-        d="M20 13V7a2 2 0 00-2-2H6a2 2 0 00-2 2v6m16 0l-2 4H6l-2-4m16 0H4"
-      />
-    </svg>
-  );
+ return (
+ <svg
+ className="h-10 w-10 text-accent"
+ fill="none"
+ stroke="currentColor"
+ viewBox="0 0 24 24"
+ >
+ <path
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ strokeWidth="2"
+ d="M20 13V7a2 2 0 00-2-2H6a2 2 0 00-2 2v6m16 0l-2 4H6l-2-4m16 0H4"
+ />
+ </svg>
+ );
 }
 
 export function ActivityIcon() {
-  return (
-    <svg
-      className="h-10 w-10 text-accent"
-      fill="none"
-      stroke="currentColor"
-      viewBox="0 0 24 24"
-    >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="2"
-        d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
-      />
-    </svg>
-  );
+ return (
+ <svg
+ className="h-10 w-10 text-accent"
+ fill="none"
+ stroke="currentColor"
+ viewBox="0 0 24 24"
+ >
+ <path
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ strokeWidth="2"
+ d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
+ />
+ </svg>
+ );
 }
 
 // ─── Formatters ───────────────────────────────────────────────────────────────
 
 function formatCurrency(value: number): string {
-  return new Intl.NumberFormat("en-US", {
-    style: "currency",
-    currency: "USD",
-    maximumFractionDigits: value >= 1000 ? 0 : 2,
-  }).format(value);
+ return new Intl.NumberFormat("en-US", {
+ style: "currency",
+ currency: "USD",
+ maximumFractionDigits: value >= 1000 ? 0 : 2,
+ }).format(value);
 }
 
 function formatAnalyticsValue(
-  value: number,
-  format: "currency" | "percent",
+ value: number,
+ format: "currency" | "percent",
 ): string {
-  if (format === "currency") return formatCurrency(value);
-  return new Intl.NumberFormat("en-US", {
-    style: "percent",
-    maximumFractionDigits: 1,
-  }).format(value);
+ if (format === "currency") return formatCurrency(value);
+ return new Intl.NumberFormat("en-US", {
+ style: "percent",
+ maximumFractionDigits: 1,
+ }).format(value);
 }
 
 function formatActivityTime(timestamp: string): string {
-  const date = new Date(timestamp);
-  if (Number.isNaN(date.getTime())) return timestamp;
-  return new Intl.DateTimeFormat("en-US", {
-    dateStyle: "medium",
-    timeStyle: "short",
-  }).format(date);
+ const date = new Date(timestamp);
+ if (Number.isNaN(date.getTime())) return timestamp;
+ return new Intl.DateTimeFormat("en-US", {
+ dateStyle: "medium",
+ timeStyle: "short",
+ }).format(date);
 }
 
 function renderStats(snapshot: DashboardSnapshot | null) {
-  if (!snapshot) return null;
-  return (
-    <div className="dashboard-stats-grid">
-      <div className="dashboard-panel">
-        <h3>Total Sent</h3>
-        <p className="text-2xl font-bold">
-          {formatCurrency(snapshot.totalSent)}
-        </p>
-      </div>
-      <div className="dashboard-panel">
-        <h3>Total Received</h3>
-        <p className="text-2xl font-bold">
-          {formatCurrency(snapshot.totalReceived)}
-        </p>
-      </div>
-      <div className="dashboard-panel">
-        <h3>Total Value Locked</h3>
-        <p className="text-2xl font-bold">
-          {formatCurrency(snapshot.totalValueLocked)}
-        </p>
-      </div>
-    </div>
-  );
+ if (!snapshot) return null;
+ return (
+ <div className="dashboard-stats-grid">
+ <div className="dashboard-panel">
+ <h3>Total Sent</h3>
+ <p className="text-2xl font-bold">
+ {formatCurrency(snapshot.totalSent)}
+ </p>
+ </div>
+ <div className="dashboard-panel">
+ <h3>Total Received</h3>
+ <p className="text-2xl font-bold">
+ {formatCurrency(snapshot.totalReceived)}
+ </p>
+ </div>
+ <div className="dashboard-panel">
+ <h3>Total Value Locked</h3>
+ <p className="text-2xl font-bold">
+ {formatCurrency(snapshot.totalValueLocked)}
+ </p>
+ </div>
+ </div>
+ );
 }
 
 function renderAnalytics(snapshot: DashboardSnapshot | null) {
-  const metrics = getDashboardAnalytics(snapshot);
-  return (
-    <section
-      className="dashboard-analytics-section"
-      aria-label="Analytics overview"
-    >
-      <div className="dashboard-panel__header">
-        <h3>Analytics Overview</h3>
-        <span>Computed from wallet activity</span>
-      </div>
-      <div className="dashboard-analytics-grid">
-        {metrics.map((metric) => {
-          const isUnavailable = metric.value === null;
-          return (
-            <article
-              key={metric.id}
-              className="dashboard-analytics-card"
-              data-unavailable={isUnavailable ? "true" : undefined}
-            >
-              <p>{metric.label}</p>
-              <h2>
-                {isUnavailable ? "No data" : formatAnalyticsValue(metric.value!, metric.format)}
-              </h2>
-              <span>
-                {isUnavailable ? "No data" : metric.detail}
-              </span>
-            </article>
-          );
-        })}
-      </div>
-    </section>
-  );
+ const metrics = getDashboardAnalytics(snapshot);
+ return (
+ <section
+ className="dashboard-analytics-section"
+ aria-label="Analytics overview"
+ >
+ <div className="dashboard-panel__header">
+ <h3>Analytics Overview</h3>
+ <span>Computed from wallet activity</span>
+ </div>
+ <div className="dashboard-analytics-grid">
+ {metrics.map((metric) => {
+ const isUnavailable = metric.value === null;
+ return (
+ <article
+ key={metric.id}
+ className="dashboard-analytics-card"
+ data-unavailable={isUnavailable ? "true" : undefined}
+ >
+ <p>{metric.label}</p>
+ <h2>
+ {isUnavailable ? "No data" : formatAnalyticsValue(metric.value!, metric.format)}
+ </h2>
+ <span>
+ {isUnavailable ? "No data" : metric.detail}
+ </span>
+ </article>
+ );
+ })}
+ </div>
+ </section>
+ );
 }
 
 const StreamsTable = React.memo(function StreamsTable({
-  snapshot,
-  onTopUp,
-  onCancel,
-  onShowDetails,
-  selectedStreamId = null,
-}: {
-  snapshot: DashboardSnapshot | null;
-  onTopUp: (stream: Stream) => void;
-  onCancel: (stream: Stream) => void;
-  onShowDetails: (stream: Stream) => void;
-  selectedStreamId?: string | null;
-}) {
-  if (!snapshot) return null;
-  return (
-    <section className="dashboard-panel">
-      <div className="dashboard-panel__header">
-        <h3>My Active Streams</h3>
-        <span>
-          {snapshot.outgoingStreams.filter((s) => s.status === "Active").length}{" "}
-          total
-        </span>
-      </div>
-      <div className="overflow-x-auto">
-        <table className="dashboard-table">
-          <thead>
-            <tr>
-              <th>Date</th>
-              <th>Recipient</th>
-              <th>Deposited</th>
-              <th>Withdrawn</th>
-              <th className="text-right">Actions</th>
-            </tr>
-          </thead>
-          <tbody>
-            {snapshot.outgoingStreams
-              .filter((s) => s.status === "Active")
-              .map((stream) => (
-                <tr
-                  key={stream.id}
-                  data-stream-id={stream.id}
-                  aria-selected={selectedStreamId === stream.id}
-                  className={`cursor-pointer hover:bg-white/5 ${
-                    selectedStreamId === stream.id
-                      ? "bg-accent/10 ring-1 ring-inset ring-accent/40"
-                      : ""
-                  }`}
-                  onClick={(e) => {
-                    if ((e.target as HTMLElement).closest("button")) return;
-                    onShowDetails(stream);
-                  }}
-                >
-                  <td>{stream.date}</td>
-                  <td>
-                    <code className="text-xs">{stream.recipient}</code>
-                  </td>
-                  <td className="font-semibold text-accent">
-                    {stream.deposited} {stream.token}
-                  </td>
-                  <td className="text-slate-400">
-                    {stream.withdrawn} {stream.token}
-                  </td>
-                  <td className="text-right">
-                    <div className="flex items-center justify-end gap-2">
-                      {/^\d+$/.test(stream.id) ? (
-                        <Link
-                          href={`/app/streams/${stream.id}`}
-                          className="secondary-button py-1 px-3 text-sm h-auto inline-flex items-center"
-                        >
-                          Details
-                        </Link>
-                      ) : null}
-                      <button
-                        type="button"
-                        className="secondary-button py-1 px-3 text-sm h-auto"
-                        onClick={() => onTopUp(stream)}
-                      >
-                        Add Funds
-                      </button>
-                      <button
-                        type="button"
-                        className="py-1 px-3 text-sm rounded-full border border-red-500/40 text-red-400 hover:bg-red-500/10 transition-colors font-semibold"
-                        onClick={() => onCancel(stream)}
-                      >
-                        Cancel
-                      </button>
-                    </div>
-                  </td>
-                </tr>
-              ))}
-          </tbody>
-        </table>
-      </div>
-    </section>
-  );
-});
-
-const RecentActivityList = React.memo(function RecentActivityList({
-  snapshot,
-  onCreateStream,
+ snapshot,
+ onTopUp,
+ onCancel,
+ onShowDetails,
+ selectedStreamId = null,
 }: {
-  snapshot: DashboardSnapshot | null;
-  onCreateStream?: () => void;
+ snapshot: DashboardSnapshot | null;
+ onTopUp: (stream: Stream) => void;
+ onCancel: (stream: Stream) => void;
+ onShowDetails: (stream: Stream) => void;
+ selectedStreamId?: string | null;
 }) {
-  if (!snapshot) return null;
-
-  if (snapshot.recentActivity.length === 0) {
-    return (
-      <EmptyState
-        icon={<ActivityIcon />}
-        title="No stream activity yet"
-        description="Transactions will appear here once you start creating or receiving payment streams."
-        action={
-          onCreateStream ? (
-            <Button onClick={onCreateStream} variant="ghost">
-              Create a Stream
-            </Button>
-          ) : undefined
-        }
-      />
-    );
-  }
-
-  return (
-    <section className="dashboard-panel">
-      <div className="dashboard-panel__header">
-        <h3>Recent Activity</h3>
-        <span>{snapshot.recentActivity.length} items</span>
-      </div>
-      <ul className="activity-list">
-        {snapshot.recentActivity.map((activity) => {
-          const amountPrefix = activity.direction === "received" ? "+" : "-";
-          const amountClass =
-            activity.direction === "received" ? "is-positive" : "is-negative";
-          return (
-            <li key={activity.id} className="activity-item">
-              <div>
-                <strong>{activity.title}</strong>
-                <p>{activity.description}</p>
-                <small>{formatActivityTime(activity.timestamp)}</small>
-              </div>
-              <span className={amountClass}>
-                {amountPrefix}
-                {formatCurrency(activity.amount)}
-              </span>
-            </li>
-          );
-        })}
-      </ul>
-    </section>
-  );
+ if (!snapshot) return null;
+ return (
+ <section className="dashboard-panel">
+ <div className="dashboard-panel__header">
+ <h3>My Active Streams</h3>
+ <span>
+ {snapshot.outgoingStreams.filter((s) => s.status === "Active").length}{" "}
+ total
+ </span>
+ </div>
+ <div className="overflow-x-auto">
+ <table className="dashboard-table">
+ <thead>
+ <tr>
+ <th>Date</th>
+ <th>Recipient</th>
+ <th>Deposited</th>
+ <th>Withdrawn</th>
+ <th className="text-right">Actions</th>
+ </tr>
+ </thead>
+ <tbody>
+ {snapshot.outgoingStreams
+ .filter((s) => s.status === "Active")
+ .map((stream) => (
+ <tr
+ key={stream.id}
+ data-stream-id={stream.id}
+ aria-selected={selectedStreamId === stream.id}
+ className={`cursor-pointer hover:bg-white/5 ${
+ selectedStreamId === stream.id
+ ? "bg-accent/10 ring-1 ring-inset ring-accent/40"
+ : ""
+ }`}
+ >
+ </tr>
+ ))}
+ </tbody>
+ </table>
+ </div>
+ </section>
+ );
 });
-
-// ─── Main Component ───────────────────────────────────────────────────────────
-
-const VALID_TAB_IDS = new Set(SIDEBAR_ITEMS.map((item) => item.id));
-
-export function DashboardView({ session, onDisconnect }: DashboardViewProps) {
-  const queryClient = useQueryClient();
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const tabParam = searchParams.get("tab");
-  const activeTab = VALID_TAB_IDS.has(tabParam ?? "") ? (tabParam as string) : "overview";
-  const [showWizard, setShowWizard] = React.useState(false);
-  const [modal, setModal] = React.useState<ModalState>(null);
-
-  const {
-    data: snapshotData,
-    isLoading: isSnapshotLoading,
-    isError: isSnapshotError,
-    error: snapshotErrorObj,
-    refetch: refetchSnapshot,
-  } = useDashboard(session.publicKey);
-
-  const snapshot: DashboardSnapshot | null = snapshotData ?? null;
-  const snapshotError = isSnapshotError
-    ? snapshotErrorObj instanceof Error
-      ? snapshotErrorObj.message
-      : "Failed to fetch dashboard data."
-    : null;
-
-  // ── Stream search & keyboard navigation ───────────────────────────────────
-  const [showShortcuts, setShowShortcuts] = React.useState(false);
-  const [showBatchClaim, setShowBatchClaim] = React.useState(false);
-  const [searchQuery, setSearchQuery] = React.useState("");
-  const [selectedIndex, setSelectedIndex] = React.useState(0);
-  const searchInputRef = React.useRef<HTMLInputElement>(null);
-
-  const matchesSearch = React.useCallback(
-    (stream: Stream) => {
-      const query = searchQuery.trim().toLowerCase();
-      if (!query) return true;
-      return (
-        stream.recipient.toLowerCase().includes(query) ||
-        stream.id.toLowerCase().includes(query) ||
-        stream.token.toLowerCase().includes(query) ||
-        stream.status.toLowerCase().includes(query)
-      );
-    },
-    [searchQuery],
-  );
-
-  const filteredIncoming = React.useMemo(
-    () => (snapshot?.incomingStreams ?? []).filter(matchesSearch),
-    [snapshot, matchesSearch],
-  );
-  const filteredOutgoing = React.useMemo(
-    () => (snapshot?.outgoingStreams ?? []).filter(matchesSearch),
-    [snapshot, matchesSearch],
-  );
-  const filteredSnapshot = React.useMemo<DashboardSnapshot | null>(
-    () => (snapshot ? { ...snapshot, outgoingStreams: filteredOutgoing } : null),
-    [snapshot, filteredOutgoing],
-  );
-
-  /** Rows the j/k shortcuts move through for the currently active tab. */
-  const navigableStreams = React.useMemo(() => {
-    if (activeTab === "incoming") return filteredIncoming;
-    if (activeTab === "paused") {
-      return [...filteredOutgoing, ...filteredIncoming].filter(
-        (stream) => stream.status === "Paused",
-      );
-    }
-    return filteredOutgoing.filter((stream) => stream.status === "Active");
-  }, [activeTab, filteredIncoming, filteredOutgoing]);
-
-  const safeIndex =
-    navigableStreams.length === 0
-      ? -1
-      : Math.min(selectedIndex, navigableStreams.length - 1);
-  const selectedStreamId =
-    safeIndex >= 0 ? navigableStreams[safeIndex]?.id ?? null : null;
-
-  const moveSelection = React.useCallback(
-    (delta: number) => {
-      setSelectedIndex((current) => {
-        if (navigableStreams.length === 0) return 0;
-        return Math.max(
-          0,
-          Math.min(navigableStreams.length - 1, current + delta),
-        );
-      });
-    },
-    [navigableStreams.length],
-  );
-
-  const hasClaimable = React.useMemo(
-    () =>
-      (snapshot?.incomingStreams ?? []).some(
-        (stream) =>
-          stream.isActive &&
-          stream.status === "Active" &&
-          stream.deposited > stream.withdrawn,
-      ),
-    [snapshot],
-  );
-
-  // Keep the keyboard-selected row visible as j/k move the highlight.
-  React.useEffect(() => {
-    if (!selectedStreamId) return;
-    const row = document.querySelector(
-      `[data-stream-id="${selectedStreamId}"]`,
-    );
-    if (row && typeof row.scrollIntoView === "function") {
-      row.scrollIntoView({ block: "nearest" });
-    }
-  }, [selectedStreamId]);
-
-  useKeyboardShortcuts(
-    [
-      {
-        key: "/",
-        handler: (event) => {
-          event.preventDefault();
-          searchInputRef.current?.focus();
-        },
-      },
-      { key: "j", handler: () => moveSelection(1) },
-      { key: "k", handler: () => moveSelection(-1) },
-      {
-        key: "c",
-        handler: () => {
-          if (!hasClaimable) return;
-          if (activeTab !== "incoming") {
-            const params = new URLSearchParams(searchParams.toString());
-            params.set("tab", "incoming");
-            router.replace(`?${params.toString()}`);
-          }
-          setShowBatchClaim(true);
-        },
-      },
-      { key: "?", handler: () => setShowShortcuts(true) },
-      {
-        key: "Escape",
-        handler: () => {
-          setShowShortcuts(false);
-          setShowBatchClaim(false);
-        },
-        allowInEditable: true,
-      },
-    ],
-    // Kept enabled while the cheatsheet is open so Escape can dismiss it;
-    // suspended while a blocking overlay (wizard / action modal) is up.
-    !showWizard && !modal,
-  );
-
-  const {
-    events: streamEvents,
-    connected,
-    reconnecting,
-    error,
-    retryNow,
-  } = useStreamEvents({
-    userPublicKeys: [session.publicKey],
-    autoReconnect: true,
-  });
-
-  React.useEffect(() => {
-    if (streamEvents.length > 0) {
-      const latestEvent = streamEvents[0];
-      if (latestEvent) {
-        const relevantTypes = [
-          "created",
-          "topped_up",
-          "withdrawn",
-          "cancelled",
-          "completed",
-          "paused",
-          "resumed",
-        ];
-        if (relevantTypes.includes(latestEvent.type)) {
-          void queryClient.invalidateQueries({
-            queryKey: dashboardQueryKey(session.publicKey),
-          });
-        }
-      }
-    }
-  }, [streamEvents, session.publicKey, queryClient]);
-
-  const [withdrawingIncomingStreamId, setWithdrawingIncomingStreamId] =
-    React.useState<string | null>(null);
-
-  const handleTopUp = React.useCallback(
-    (s: Stream) => setModal({ type: "topup", stream: s }),
-    [],
-  );
-  const handleCancel = React.useCallback(
-    (s: Stream) => setModal({ type: "cancel", stream: s }),
-    [],
-  );
-  const handleShowDetails = React.useCallback(
-    (s: Stream) => setModal({ type: "details", stream: s }),
-    [],
-  );
-  const handleShowWizard = React.useCallback(
-    () => setShowWizard(true),
-    [],
-  );
-
-  // ── Optimistic helpers ─────────────────────────────────────────────────────
-
-  const removeStreamLocally = (streamId: string) => {
-    queryClient.setQueryData<DashboardSnapshot | undefined>(dashboardQueryKey(session.publicKey), (prev) => {
-      if (!prev) return prev;
-      return {
-        ...prev,
-        outgoingStreams: prev.outgoingStreams.map((s) =>
-          s.id === streamId
-            ? { ...s, status: "Cancelled", isActive: false }
-            : s,
-        ),
-        activeStreamsCount: Math.max(0, prev.activeStreamsCount - 1),
-      };
-    });
-  };
-
-  const topUpStreamLocally = (streamId: string, amount: number) => {
-    queryClient.setQueryData<DashboardSnapshot | undefined>(
-      dashboardQueryKey(session.publicKey),
-      (prev) => {
-        if (!prev) return prev;
-        return {
-          ...prev,
-          outgoingStreams: prev.outgoingStreams.map((s) =>
-            s.id === streamId ? { ...s, deposited: s.deposited + amount } : s,
-          ),
-        };
-      },
-    );
-  };
-
-  const addStreamLocally = (data: StreamFormData) => {
-    const newStream: Stream = {
-      id: `stream-${Date.now()}`,
-      date: new Date().toISOString().split("T")[0] ?? "",
-      recipient: shortenPublicKey(data.recipient),
-      amount: parseFloat(data.amount),
-      token: data.token,
-      status: "Active",
-      deposited: parseFloat(data.amount),
-      withdrawn: 0,
-      ratePerSecond: 0,
-      lastUpdateTime: Math.floor(Date.now() / 1000),
-      isActive: true,
-    };
-    queryClient.setQueryData<DashboardSnapshot | undefined>(
-      dashboardQueryKey(session.publicKey),
-      (prev) => {
-        if (!prev) return prev;
-        return {
-          ...prev,
-          outgoingStreams: [newStream, ...prev.outgoingStreams],
-          activeStreamsCount: prev.activeStreamsCount + 1,
-        };
-      },
-    );
-  };
-
-  // ── Contract handlers ─────────────────────────────────────────────────────
-
-  const handleCreateStream = async (data: StreamFormData) => {
-    const toastId = toast.loading("Creating stream…");
-    try {
-      const result = await sorobanCreateStream(session, {
-        recipient: data.recipient,
-        tokenAddress: getTokenAddress(data.token),
-        amount: toBaseUnits(data.amount),
-        durationSeconds: toDurationSeconds(data.duration, data.durationUnit),
-      });
-      addStreamLocally(data);
-      // We don't call setShowWizard(false) here anymore, the wizard handles its own flow
-      transactionSuccessToast("Transaction confirmed on-chain!", { id: toastId });
-      return result;
-    } catch (err) {
-      toast.error(toSorobanErrorMessage(err), { id: toastId });
-      throw err;
-    }
-  };
-
-  const handleTopUpConfirm = async (streamId: string, amountStr: string) => {
-    const toastId = toast.loading("Topping up stream…");
-    try {
-      await sorobanTopUp(session, {
-        streamId: BigInt(streamId.replace(/\D/g, "") || "0"),
-        amount: toBaseUnits(amountStr),
-      });
-      topUpStreamLocally(streamId, parseFloat(amountStr));
-      setModal(null);
-      transactionSuccessToast("Stream topped up successfully!", { id: toastId });
-    } catch (err) {
-      toast.error(toSorobanErrorMessage(err), { id: toastId });
-      throw err;
-    }
-  };
-
-  const handleCancelConfirm = async (streamId: string) => {
-    const toastId = toast.loading("Cancelling stream…");
-    try {
-      await sorobanCancel(session, {
-        streamId: BigInt(streamId.replace(/\D/g, "") || "0"),
-      });
-      removeStreamLocally(streamId);
-      setModal(null);
-      transactionSuccessToast("Stream cancelled.", { id: toastId });
-    } catch (err) {
-      toast.error(toSorobanErrorMessage(err), { id: toastId });
-      throw err;
-    }
-  };
-
-  const handleIncomingWithdraw = async (stream: Stream) => {
-    const toastId = toast.loading("Withdrawing stream funds…");
-    setWithdrawingIncomingStreamId(stream.id);
-    try {
-      await sorobanWithdraw(session, {
-        streamId: BigInt(stream.id.replace(/\D/g, "") || "0"),
-      });
-      await refetchSnapshot();
-      transactionSuccessToast("Withdrawal successful!", { id: toastId });
-    } catch (err) {
-      toast.error(toSorobanErrorMessage(err), { id: toastId });
-      throw err;
-    } finally {
-      setWithdrawingIncomingStreamId(null);
-    }
-  };
-
-
-  // ── Tab content ───────────────────────────────────────────────────────────
-
-  const renderContent = () => {
-    // ── Loading state ─────────────────────────────────────────────────────
-    if (isSnapshotLoading) {
-      return <DashboardSkeleton />;
-    }
-
-    // ── Error state ───────────────────────────────────────────────────────
-    if (snapshotError) {
-      return (
-        <ErrorState
-          message={snapshotError}
-          onRetry={() => void refetchSnapshot()}
-        />
-      );
-    }
-
-    // ── First-time / completely empty wallet ──────────────────────────────
-    const hasNoStreams =
-      !snapshot ||
-      (snapshot.outgoingStreams.length === 0 &&
-        snapshot.incomingStreams.length === 0);
-
-    if (hasNoStreams) {
-      return (
-        <EmptyState
-          icon={<BoltIcon />}
-          title="Start your first stream"
-          description="You haven't created or received any payment streams yet. Connect with others and start streaming tokens in real-time."
-          action={
-            <Button onClick={() => setShowWizard(true)} glow size="lg">
-              Create Stream
-            </Button>
-          }
-        />
-      );
-    }
-
-    // ── Overview (default tab, rendered synchronously) ─────────────────────
-    if (activeTab === "overview") {
-      return (
-        <div className="dashboard-content-stack mt-8">
-          {renderStats(snapshot)}
-          {renderAnalytics(snapshot)}
-          <CashflowProjectionChart streams={[...snapshot.incomingStreams.map((stream) => ({ ...stream, direction: "incoming" as const, token: stream.token })), ...snapshot.outgoingStreams.map((stream) => ({ ...stream, direction: "outgoing" as const, token: stream.token }))]} />
-          <StreamsTable
-            snapshot={filteredSnapshot}
-            onTopUp={handleTopUp}
-            onCancel={handleCancel}
-            onShowDetails={handleShowDetails}
-            selectedStreamId={selectedStreamId}
-          />
-          <RecentActivityList snapshot={snapshot} onCreateStream={handleShowWizard} />
-        </div>
-      );
-    }
-
-    // Pass required props to each tab component
-    if (activeTab === "incoming") {
-      return (
-        <DashboardIncomingDynamic
-          incomingStreams={filteredIncoming}
-          onWithdraw={handleIncomingWithdraw}
-          withdrawingStreamId={withdrawingIncomingStreamId}
-          onOpenBatchClaim={() => setShowBatchClaim(true)}
-          onBatchClaimSuccess={() => {
-            void refetchSnapshot();
-          }}
-          selectedStreamId={selectedStreamId}
-        />
-      );
-    }
-
-    if (activeTab === "outgoing") {
-      return (
-        <DashboardOutgoingDynamic
-          outgoingStreams={filteredOutgoing}
-          onTopUp={(s) => setModal({ type: "topup", stream: s })}
-          onCancel={(s) => setModal({ type: "cancel", stream: s })}
-          onShowDetails={(s) => setModal({ type: "details", stream: s })}
-          setShowWizard={() => setShowWizard(true)}
-          selectedStreamId={selectedStreamId}
-        />
-      );
-    }
-
-    if (activeTab === "paused") {
-      return (
-        <DashboardPausedDynamic
-          outgoingStreams={filteredOutgoing}
-          incomingStreams={filteredIncoming}
-        />
-      );
-    }
-
-    if (activeTab === "activity") {
-      return (
-        <DashboardActivityDynamic
-          recentActivity={snapshot!.recentActivity}
-          onCreateStream={() => setShowWizard(true)}
-        />
-      );
-    }
-
-    if (activeTab === "settings") {
-      return (
-        <DashboardSettingsDynamic
-          session={session}
-          onDisconnect={onDisconnect}
-        />
-      );
-    }
-
-    return (
-      <div className="dashboard-empty-state mt-8">
-        <h2>Under Construction</h2>
-        <p>This tab is currently under development.</p>
-      </div>
-    );
-  };
-
-  const networkLabel = formatNetwork(session.network);
-  const networkOk = isExpectedNetwork(session.network);
-
-  return (
-    <main className="dashboard-shell">
-      <aside className="dashboard-sidebar">
-        <div className="brand">FlowFi</div>
-        <nav aria-label="Sidebar">
-          {SIDEBAR_ITEMS.map((item) => (
-            <button
-              key={item.id}
-              type="button"
-              className="sidebar-item"
-              data-active={activeTab === item.id ? "true" : undefined}
-              aria-current={activeTab === item.id ? "page" : undefined}
-              onClick={() => {
-                const params = new URLSearchParams(searchParams.toString());
-                params.set("tab", item.id);
-                router.replace(`?${params.toString()}`);
-              }}
-            >
-              {item.label}
-            </button>
-          ))}
-        </nav>
-      </aside>
-
-      <section className="dashboard-main">
-        <header className="dashboard-header">
-          <div>
-            <p className="kicker">Dashboard</p>
-            <h1>
-              {SIDEBAR_ITEMS.find((item) => item.id === activeTab)?.label}
-            </h1>
-          </div>
-          <div className="flex items-center gap-4">
-            <div className="relative">
-              <input
-                ref={searchInputRef}
-                id="stream-search"
-                type="search"
-                value={searchQuery}
-                onChange={(event) => setSearchQuery(event.target.value)}
-                placeholder="Search streams…"
-                aria-label="Search streams"
-                className="w-44 rounded-lg border border-white/10 bg-white/5 px-3 py-2 pr-9 text-sm outline-none transition-colors focus:border-accent md:w-56"
-              />
-              <kbd
-                aria-hidden="true"
-                className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 rounded border border-white/15 bg-white/5 px-1.5 py-0.5 font-mono text-[10px] text-slate-400"
-              >
-                /
-              </kbd>
-            </div>
-            <SSEStatusIndicator
-              connected={connected}
-              reconnecting={reconnecting}
-              error={error}
-              onRetry={retryNow}
-            />
-            <Button onClick={() => setShowWizard(true)} glow>
-              Create Stream
-            </Button>
-            <div className="wallet-chip" title={session.publicKey}>
-              <span className="wallet-chip__name">{session.walletName}</span>
-              <span
-                className="wallet-chip__network"
-                data-mainnet={networkLabel === "Mainnet" ? "true" : undefined}
-                data-mismatch={!networkOk ? "true" : undefined}
-              >
-                {networkLabel}
-              </span>
-              <span className="wallet-chip__key">
-                {shortenPublicKey(session.publicKey)}
-              </span>
-            </div>
-          </div>
-        </header>
-
-        {renderContent()}
-
-        <div className="dashboard-actions flex flex-wrap items-center justify-between gap-3">
-          <KeyboardShortcutBadge onOpen={() => setShowShortcuts(true)} />
-          <button
-            type="button"
-            className="secondary-button"
-            onClick={onDisconnect}
-          >
-            Disconnect Wallet
-          </button>
-        </div>
-      </section>
-
-      {showBatchClaim && (
-        <BatchClaimDrawer
-          streams={filteredIncoming}
-          onClose={() => setShowBatchClaim(false)}
-          onSuccess={async () => {
-            await refetchSnapshot();
-          }}
-        />
-      )}
-      <KeyboardShortcutsModal
-        open={showShortcuts}
-        onClose={() => setShowShortcuts(false)}
-      />
-      {showWizard && (
-        <StreamCreationWizard
-          onClose={() => setShowWizard(false)}
-          onSubmit={handleCreateStream}
-          walletPublicKey={session.publicKey}
-        />
-      )}
-      {modal?.type === "topup" && (
-        <TopUpModal
-          streamId={modal.stream.id}
-          token={modal.stream.token}
-          currentDeposited={modal.stream.deposited}
-          onConfirm={handleTopUpConfirm}
-          onClose={() => setModal(null)}
-        />
-      )}
-      {modal?.type === "cancel" && (
-        <CancelConfirmModal
-          streamId={modal.stream.id}
-          recipient={modal.stream.recipient}
-          token={modal.stream.token}
-          deposited={modal.stream.deposited}
-          withdrawn={modal.stream.withdrawn}
-          onConfirm={handleCancelConfirm}
-          onClose={() => setModal(null)}
-        />
-      )}
-      {modal?.type === "details" && (
-        <StreamDetailsModal
-          stream={modal.stream}
-          onClose={() => setModal(null)}
-          onCancelClick={() =>
-            setModal({ type: "cancel", stream: modal.stream })
-          }
-          onTopUpClick={() => setModal({ type: "topup", stream: modal.stream })}
-        />
-      )}
-    </main>
-  );
-}
diff --git a/frontend/src/components/wallet/wallet-entry.tsx b/frontend/src/components/wallet/wallet-entry.tsx
index 2e3c8b05..979e576f 100644
--- a/frontend/src/components/wallet/wallet-entry.tsx
+++ b/frontend/src/components/wallet/wallet-entry.tsx
@@ -1,21 +1,15 @@
 "use client";
 
-import { DashboardView } from "@/components/dashboard/dashboard-view";
+import DashboardView from "@/components/dashboard/dashboard-view";
 import { WalletModal } from "@/components/wallet/WalletModal";
 import { useWallet } from "@/context/wallet-context";
-import { useState, useEffect } from "react";
+import { useState } from "react";
 
 export function WalletEntry() {
   const { status, session, isHydrated, disconnect } = useWallet();
-  const [showModal, setShowModal] = useState(false);
+  const [dismissedModal, setDismissedModal] = useState(false);
 
-  useEffect(() => {
-    if (!isHydrated) return;
-    
-    // Update modal visibility based on connection status
-    // eslint-disable-next-line react-hooks/set-state-in-effect
-    setShowModal(status !== "connected");
-  }, [isHydrated, status]);
+  const showModal = isHydrated && status !== "connected" && !dismissedModal;
 
   if (!isHydrated) {
     return (
@@ -36,6 +30,6 @@ export function WalletEntry() {
   }
 
   return showModal ? (
-    <WalletModal onClose={() => setShowModal(false)} />
+    <WalletModal onClose={() => setDismissedModal(true)} />
   ) : null;
 }
diff --git a/frontend/src/components/webhooks/WebhookDeliveryModal.tsx b/frontend/src/components/webhooks/WebhookDeliveryModal.tsx
index 99a1efc6..d29d5a17 100644
--- a/frontend/src/components/webhooks/WebhookDeliveryModal.tsx
+++ b/frontend/src/components/webhooks/WebhookDeliveryModal.tsx
@@ -6,8 +6,93 @@ import { listWebhookDeliveries, sendWebhookTest, type WebhookDelivery, type Webh
 import toast from "react-hot-toast";
 
 export function WebhookDeliveryModal({ subscription, userAddress, onClose }: { subscription: WebhookSubscription; userAddress: string; onClose: () => void }) {
-  const [deliveries, setDeliveries] = useState<WebhookDelivery[]>([]); const [page, setPage] = useState(1); const [total, setTotal] = useState(0); const [expanded, setExpanded] = useState<string | null>(null); const [testing, setTesting] = useState(false);
-  useEffect(() => { void listWebhookDeliveries(subscription.id, userAddress, page).then((result) => { setDeliveries(result.deliveries); setTotal(result.total); }).catch((error: unknown) => toast.error(error instanceof Error ? error.message : "Failed to load delivery logs")); }, [subscription.id, userAddress, page]);
-  const test = async () => { setTesting(true); try { const result = await sendWebhookTest(subscription.id, userAddress); result.success ? toast.success(`Test delivered (${result.status ?? "2xx"})`) : toast.error(result.error ?? `Receiver returned ${result.status ?? 0}`); } catch (error) { toast.error(error instanceof Error ? error.message : "Test failed"); } finally { setTesting(false); } };
-  return <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/70 p-4" role="dialog" aria-modal="true"><div className="max-h-[85vh] w-full max-w-5xl overflow-auto rounded-2xl border border-white/10 bg-slate-950 p-6 text-white"><div className="flex items-center justify-between"><div><h2 className="text-xl font-semibold">Delivery logs</h2><p className="mt-1 truncate text-xs text-slate-400">{subscription.targetUrl}</p></div><div className="flex items-center gap-3"><button onClick={() => void test()} disabled={testing} className="rounded-lg bg-emerald-400 px-3 py-2 text-sm font-semibold text-slate-950 disabled:opacity-50">{testing ? "Sending..." : "Send test event"}</button><button onClick={onClose} aria-label="Close"><X /></button></div></div><table className="mt-6 w-full text-left text-sm"><thead className="border-b border-white/10 text-xs text-slate-500"><tr><th className="px-3 py-3">Time</th><th className="px-3 py-3">Event</th><th className="px-3 py-3">HTTP</th><th className="px-3 py-3">Attempts</th><th className="px-3 py-3">Payload</th></tr></thead><tbody className="divide-y divide-white/10">{deliveries.map((delivery) => <tr key={delivery.id} className="align-top"><td className="px-3 py-3 text-xs text-slate-400">{new Date(delivery.createdAt).toLocaleString()}</td><td className="px-3 py-3">{delivery.eventType}</td><td className={`px-3 py-3 font-semibold ${delivery.responseStatus && delivery.responseStatus < 300 ? "text-emerald-300" : "text-rose-300"}`}>{delivery.responseStatus ?? "ERR"}</td><td className="px-3 py-3">{delivery.attempts}</td><td className="px-3 py-3"><button onClick={() => setExpanded(expanded === delivery.id ? null : delivery.id)} aria-label={`Expand payload ${delivery.id}`}>{expanded === delivery.id ? <ChevronDown size={16} /> : <ChevronRight size={16} />}</button>{expanded === delivery.id && <pre className="mt-2 max-w-xl overflow-auto rounded bg-black/40 p-3 text-xs text-slate-300">{delivery.payload}</pre>}</td></tr>)}</tbody></table><div className="mt-5 flex justify-between text-sm text-slate-400"><span>{total} deliveries</span><div className="flex gap-2"><button disabled={page <= 1} onClick={() => setPage((value) => value - 1)} className="rounded border border-white/10 px-3 py-1 disabled:opacity-40">Previous</button><button disabled={page * 20 >= total} onClick={() => setPage((value) => value + 1)} className="rounded border border-white/10 px-3 py-1 disabled:opacity-40">Next</button></div></div></div></div>;
-}
\ No newline at end of file
+  const [deliveries, setDeliveries] = useState<WebhookDelivery[]>([]);
+  const [page, setPage] = useState(1);
+  const [total, setTotal] = useState(0);
+  const [expanded, setExpanded] = useState<string | null>(null);
+  const [testing, setTesting] = useState(false);
+
+  useEffect(() => {
+    void listWebhookDeliveries(subscription.id, userAddress, page)
+      .then((result) => {
+        setDeliveries(result.deliveries);
+        setTotal(result.total);
+      })
+      .catch((error: unknown) => toast.error(error instanceof Error ? error.message : "Failed to load delivery logs"));
+  }, [subscription.id, userAddress, page]);
+
+  const test = async () => {
+    setTesting(true);
+    try {
+      const result = await sendWebhookTest(subscription.id, userAddress);
+      if (result.success) {
+        toast.success(`Test delivered (${result.status ?? "2xx"})`);
+      } else {
+        toast.error(result.error ?? `Receiver returned ${result.status ?? 0}`);
+      }
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "Test failed");
+    } finally {
+      setTesting(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/70 p-4" role="dialog" aria-modal="true">
+      <div className="max-h-[85vh] w-full max-w-5xl overflow-auto rounded-2xl border border-white/10 bg-slate-950 p-6 text-white">
+        <div className="flex items-center justify-between">
+          <div>
+            <h2 className="text-xl font-semibold">Delivery logs</h2>
+            <p className="mt-1 truncate text-xs text-slate-400">{subscription.targetUrl}</p>
+          </div>
+          <div className="flex items-center gap-3">
+            <button onClick={() => void test()} disabled={testing} className="rounded-lg bg-emerald-400 px-3 py-2 text-sm font-semibold text-slate-950 disabled:opacity-50">
+              {testing ? "Sending..." : "Send test event"}
+            </button>
+            <button onClick={onClose} aria-label="Close">
+              <X />
+            </button>
+          </div>
+        </div>
+        <table className="mt-6 w-full text-left text-sm">
+          <thead className="border-b border-white/10 text-xs text-slate-500">
+            <tr>
+              <th className="px-3 py-3">Time</th>
+              <th className="px-3 py-3">Event</th>
+              <th className="px-3 py-3">HTTP</th>
+              <th className="px-3 py-3">Attempts</th>
+              <th className="px-3 py-3">Payload</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-white/10">
+            {deliveries.map((delivery) => (
+              <tr key={delivery.id} className="align-top">
+                <td className="px-3 py-3 text-xs text-slate-400">{new Date(delivery.createdAt).toLocaleString()}</td>
+                <td className="px-3 py-3">{delivery.eventType}</td>
+                <td className={`px-3 py-3 font-semibold ${delivery.responseStatus && delivery.responseStatus < 300 ? "text-emerald-300" : "text-rose-300"}`}>
+                  {delivery.responseStatus ?? "ERR"}
+                </td>
+                <td className="px-3 py-3">{delivery.attempts}</td>
+                <td className="px-3 py-3">
+                  <button onClick={() => setExpanded(expanded === delivery.id ? null : delivery.id)} aria-label={`Expand payload ${delivery.id}`}>
+                    {expanded === delivery.id ? <ChevronDown size={16} /> : <ChevronRight size={16} />}
+                  </button>
+                  {expanded === delivery.id && (
+                    <pre className="mt-2 max-w-xl overflow-auto rounded bg-black/40 p-3 text-xs text-slate-300">{delivery.payload}</pre>
+                  )}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+        <div className="mt-5 flex justify-between text-sm text-slate-400">
+          <span>{total} deliveries</span>
+          <div className="flex gap-2">
+            <button disabled={page <= 1} onClick={() => setPage((value) => value - 1)} className="rounded border border-white/10 px-3 py-1 disabled:opacity-40">Previous</button>
+            <button disabled={page * 20 >= total} onClick={() => setPage((value) => value + 1)} className="rounded border border-white/10 px-3 py-1 disabled:opacity-40">Next</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/webhooks/WebhookModal.tsx b/frontend/src/components/webhooks/WebhookModal.tsx
index 711c9aec..e14c8fd2 100644
--- a/frontend/src/components/webhooks/WebhookModal.tsx
+++ b/frontend/src/components/webhooks/WebhookModal.tsx
@@ -25,18 +25,93 @@ export function WebhookModal({ userAddress: _userAddress, subscription, secretKe
   const submit = async () => {
     if (!validUrl || events.length === 0) return;
     setSaving(true);
-    try { await onSave({ targetUrl, eventTypes: events }); } finally { setSaving(false); }
+    try {
+      await onSave({ targetUrl, eventTypes: events });
+    } finally {
+      setSaving(false);
+    }
   };
 
-  return <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/70 p-4" role="dialog" aria-modal="true">
-    <div className="w-full max-w-lg rounded-2xl border border-white/10 bg-slate-950 p-6 text-white shadow-2xl">
-      <div className="flex items-center justify-between"><h2 className="text-xl font-semibold">{subscription ? "Edit webhook" : "Register webhook"}</h2><button onClick={onClose} aria-label="Close"><X /></button></div>
-      <label className="mt-6 block text-sm font-medium" htmlFor="webhook-url">HTTPS endpoint</label>
-      <input id="webhook-url" value={targetUrl} onChange={(event) => setTargetUrl(event.target.value)} placeholder="https://api.example.com/flowfi" className="mt-2 w-full rounded-lg border border-white/10 bg-white/5 px-3 py-2 outline-none focus:border-emerald-400" />
-      {targetUrl && !validUrl && <p className="mt-1 text-xs text-rose-400">Enter a valid HTTPS URL.</p>}
-      <fieldset className="mt-5"><legend className="text-sm font-medium">Events</legend><div className="mt-2 grid gap-2 sm:grid-cols-2">{WEBHOOK_EVENT_TYPES.map((event) => <label key={event} className="flex items-center gap-2 text-sm text-slate-300"><input type="checkbox" checked={events.includes(event)} onChange={() => setEvents((current) => current.includes(event) ? current.filter((item) => item !== event) : [...current, event])} />{event}</label>)}</div></fieldset>
-      {secretKey && <div className="mt-5 rounded-lg border border-amber-400/30 bg-amber-400/10 p-3"><p className="text-xs text-amber-200">Copy this signing secret now. It will not be shown again.</p><div className="mt-2 flex items-center gap-2"><code className="min-w-0 flex-1 break-all text-xs">{secretKey}</code><button onClick={async () => { if (await copyToClipboard(secretKey)) { setCopied(true); toast.success("Secret copied"); } }} aria-label="Copy secret">{copied ? <Check size={16} /> : <Copy size={16} />}</button>{onRegenerate && <button onClick={async () => { const next = await onRegenerate(); if (next) toast.success("Secret regenerated"); }} aria-label="Regenerate secret"><RefreshCw size={16} /></button>}</div></div>}
-      <div className="mt-6 flex justify-end gap-2"><button onClick={onClose} className="rounded-lg px-4 py-2 text-sm text-slate-300">Cancel</button><button disabled={!validUrl || events.length === 0 || saving} onClick={() => void submit()} className="rounded-lg bg-emerald-400 px-4 py-2 text-sm font-semibold text-slate-950 disabled:opacity-50">{saving ? "Saving..." : "Save webhook"}</button></div>
+  return (
+    <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/70 p-4" role="dialog" aria-modal="true">
+      <div className="w-full max-w-lg rounded-2xl border border-white/10 bg-slate-950 p-6 text-white shadow-2xl">
+        <div className="flex items-center justify-between">
+          <h2 className="text-xl font-semibold">{subscription ? "Edit webhook" : "Register webhook"}</h2>
+          <button onClick={onClose} aria-label="Close">
+            <X />
+          </button>
+        </div>
+        <label className="mt-6 block text-sm font-medium" htmlFor="webhook-url">HTTPS endpoint</label>
+        <input
+          id="webhook-url"
+          value={targetUrl}
+          onChange={(event) => setTargetUrl(event.target.value)}
+          placeholder="https://api.example.com/flowfi"
+          className="mt-2 w-full rounded-lg border border-white/10 bg-white/5 px-3 py-2 outline-none focus:border-emerald-400"
+        />
+        {targetUrl && !validUrl && <p className="mt-1 text-xs text-rose-400">Enter a valid HTTPS URL.</p>}
+        <fieldset className="mt-5">
+          <legend className="text-sm font-medium">Events</legend>
+          <div className="mt-2 grid gap-2 sm:grid-cols-2">
+            {WEBHOOK_EVENT_TYPES.map((event) => (
+              <label key={event} className="flex items-center gap-2 text-sm text-slate-300">
+                <input
+                  type="checkbox"
+                  checked={events.includes(event)}
+                  onChange={() =>
+                    setEvents((current) =>
+                      current.includes(event) ? current.filter((item) => item !== event) : [...current, event],
+                    )
+                  }
+                />
+                {event}
+              </label>
+            ))}
+          </div>
+        </fieldset>
+        {secretKey && (
+          <div className="mt-5 rounded-lg border border-amber-400/30 bg-amber-400/10 p-3">
+            <p className="text-xs text-amber-200">Copy this signing secret now. It will not be shown again.</p>
+            <div className="mt-2 flex items-center gap-2">
+              <code className="min-w-0 flex-1 break-all text-xs">{secretKey}</code>
+              <button
+                onClick={async () => {
+                  if (await copyToClipboard(secretKey)) {
+                    setCopied(true);
+                    toast.success("Secret copied");
+                  }
+                }}
+                aria-label="Copy secret"
+              >
+                {copied ? <Check size={16} /> : <Copy size={16} />}
+              </button>
+              {onRegenerate && (
+                <button
+                  onClick={async () => {
+                    const next = await onRegenerate();
+                    if (next) toast.success("Secret regenerated");
+                  }}
+                  aria-label="Regenerate secret"
+                >
+                  <RefreshCw size={16} />
+                </button>
+              )}
+            </div>
+          </div>
+        )}
+        <div className="mt-6 flex justify-end gap-2">
+          <button onClick={onClose} className="rounded-lg px-4 py-2 text-sm text-slate-300">
+            Cancel
+          </button>
+          <button
+            disabled={!validUrl || events.length === 0 || saving}
+            onClick={() => void submit()}
+            className="rounded-lg bg-emerald-400 px-4 py-2 text-sm font-semibold text-slate-950 disabled:opacity-50"
+          >
+            {saving ? "Saving..." : "Save webhook"}
+          </button>
+        </div>
+      </div>
     </div>
-  </div>;
-}
\ No newline at end of file
+  );
+}
diff --git a/frontend/tailwind.config.mjs b/frontend/tailwind.config.mjs
index 86cc10a8..18f91d33 100644
--- a/frontend/tailwind.config.mjs
+++ b/frontend/tailwind.config.mjs
@@ -8,8 +8,8 @@ export default {
   ],
   plugins: [
     plugin(function ({ addVariant }) {
-      addVariant("motion-reduce", [ "& where (prefers-reduced-motion: reduce)" ]);
-      addVariant("motion-safe", [ "& where (prefers-reduced-motion: safe)" ]);
+      addVariant("motion-reduce", ["@media (prefers-reduced-motion: reduce)"]);
+      addVariant("motion-safe", ["@media (prefers-reduced-motion: no-preference)"]);
     }),
   ],
-};
\ No newline at end of file
+};