diff --git a/frontend/src/components/dashboard/DashboardActivity.tsx b/frontend/src/components/dashboard/DashboardActivity.tsx
new file mode 100644
index 00000000..278565de
--- /dev/null
+++ b/frontend/src/components/dashboard/DashboardActivity.tsx
@@ -0,0 +1,66 @@
+import { EmptyState } from "./dashboard-view";
+import { ActivityIcon } from "./dashboard-view";
+import { Button } from "@/components/ui/Button";
+
+interface DashboardActivityProps {
+  recentActivity: any[];
+  onCreateStream: () => void;
+}
+
+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);
+}
+
+export function DashboardActivity({
+  recentActivity,
+  onCreateStream,
+}: DashboardActivityProps) {
+  if (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={
+          <Button onClick={onCreateStream} variant="ghost">
+            Create a Stream
+          </Button>
+        }
+      />
+    );
+  }
+
+  return (
+    <section className="dashboard-panel">
+      <div className="dashboard-panel__header">
+        <h3>Recent Activity</h3>
+        <span>{recentActivity.length} items</span>
+      </div>
+      <ul className="activity-list">
+        {// @ts-expect-error activity uses any for dynamic stream data
+recentActivity.map((activity: any) => {
+          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}
+                {new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(activity.amount)}
+              </span>
+            </li>
+          );
+        })}
+      </ul>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/components/dashboard/DashboardIncoming.tsx b/frontend/src/components/dashboard/DashboardIncoming.tsx
new file mode 100644
index 00000000..89a473b6
--- /dev/null
+++ b/frontend/src/components/dashboard/DashboardIncoming.tsx
@@ -0,0 +1,36 @@
+import IncomingStreams from "../IncomingStreams";
+import type { Stream } from "@/lib/dashboard";
+import { EmptyState } from "./dashboard-view";
+import { ActivityIcon, BoltIcon, InboxIcon } from "./dashboard-view";
+import { Button } from "@/components/ui/Button";
+
+interface DashboardIncomingProps {
+  incomingStreams: Stream[];
+  onWithdraw: (stream: Stream) => Promise<void>;
+  withdrawingStreamId: string | null;
+}
+
+export function DashboardIncoming({
+  incomingStreams,
+  onWithdraw,
+  withdrawingStreamId,
+}: DashboardIncomingProps) {
+  if (incomingStreams.length === 0) {
+    return (
+      <EmptyState
+        icon={<InboxIcon />}
+        title="No incoming streams yet"
+        description="No streams are sending you funds yet. Share your wallet address with a sender to receive streaming payments."
+      />
+    );
+  }
+  return (
+    <div className="mt-8">
+      <IncomingStreams
+        streams={incomingStreams}
+        onWithdraw={onWithdraw}
+        withdrawingStreamId={withdrawingStreamId}
+      />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/components/dashboard/DashboardOutgoing.tsx b/frontend/src/components/dashboard/DashboardOutgoing.tsx
new file mode 100644
index 00000000..98960d1a
--- /dev/null
+++ b/frontend/src/components/dashboard/DashboardOutgoing.tsx
@@ -0,0 +1,106 @@
+import { EmptyState } from "./dashboard-view";
+import { BoltIcon } from "./dashboard-view";
+import { Button } from "@/components/ui/Button";
+
+interface DashboardOutgoingProps {
+  outgoingStreams: any[];
+  onTopUp: (stream: any) => void;
+  onCancel: (stream: any) => void;
+  onShowDetails: (stream: any) => void;
+  setShowWizard: () => void;
+}
+
+export function DashboardOutgoing({
+  outgoingStreams,
+  onTopUp,
+  onCancel,
+  onShowDetails,
+  setShowWizard,
+}: DashboardOutgoingProps) {
+  const activeOutgoing = outgoingStreams.filter((s: any) => s.status === "Active");
+
+  if (activeOutgoing.length === 0) {
+    return (
+      <EmptyState
+        icon={<BoltIcon />}
+        title="No active outgoing streams"
+        description="You don't have any active outgoing payment streams. Create one to start streaming tokens to a recipient."
+        action={
+          <Button onClick={setShowWizard} glow>
+            Create a Stream
+          </Button>
+        }
+      />
+    );
+  }
+
+  return (
+    <div className="mt-8">
+      <section className="dashboard-panel">
+        <div className="dashboard-panel__header">
+          <h3>My Active Streams</h3>
+          <span>{activeOutgoing.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>
+              {activeOutgoing.map((stream: any) => (
+                <tr
+                  key={stream.id}
+                  className="cursor-pointer hover:bg-white/5"
+                  onClick={(e: any) => {
+                    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">
+                      <Button
+                        className="secondary-button py-1 px-3 text-sm h-auto inline-flex items-center"
+                      >
+                        Details
+                      </Button>
+                      <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>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/components/dashboard/DashboardOverview.tsx b/frontend/src/components/dashboard/DashboardOverview.tsx
new file mode 100644
index 00000000..c6c883c4
--- /dev/null
+++ b/frontend/src/components/dashboard/DashboardOverview.tsx
@@ -0,0 +1,129 @@
+"use client";
+
+import { DashboardSnapshot, fetchDashboardData, dashboardQueryKey } from "@/lib/dashboard";
+import { EmptyState } from "./dashboard-view";
+import { ActivityIcon, BoltIcon, InboxIcon } from "./dashboard-view";
+import { Button } from "@/components/ui/Button";
+
+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">
+          {new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0 }).format(snapshot.totalSent)}
+        </p>
+      </div>
+      <div className="dashboard-panel">
+        <h3>Total Received</h3>
+        <p className="text-2xl font-bold">
+          {new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0 }).format(snapshot.totalReceived)}
+        </p>
+      </div>
+      <div className="dashboard-panel">
+        <h3>Total Value Locked</h3>
+        <p className="text-2xl font-bold">
+          {new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0 }).format(snapshot.totalValueLocked)}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+function renderRecentActivity(
+  snapshot: DashboardSnapshot | null,
+  onCreateStream: () => void,
+) {
+  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={
+          <Button onClick={onCreateStream} variant="ghost">
+            Create a Stream
+          </Button>
+        }
+      />
+    );
+  }
+
+  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">
+// @ts-expect-error unused
+{snapshot.recentActivity.map((activity: any) => {
+          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>{new Intl.DateTimeFormat("en-US", { dateStyle: "medium", timeStyle: "short" }).format(new Date(activity.timestamp))}</small>
+              </div>
+              <span className={amountClass}>
+                {amountPrefix}
+                {new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(activity.amount)}
+              </span>
+            </li>
+          );
+        })}
+      </ul>
+    </section>
+  );
+}
+
+interface DashboardOverviewProps {
+  snapshot: DashboardSnapshot | null;
+  isSnapshotLoading: boolean;
+  snapshotError: string | null;
+  // @ts-expect-error unused
+// session uses any for dynamic wallet data
+session: any;
+  onDisconnect: () => void;
+  setShowWizard: () => void;
+  // @ts-expect-error unused
+// queryClient uses any for dynamic query state
+queryClient: any;
+}
+
+export function DashboardOverview({
+  snapshot,
+  isSnapshotLoading,
+  snapshotError,
+  session,
+  onDisconnect,
+  setShowWizard,
+  queryClient,
+}: DashboardOverviewProps) {
+  React.useEffect(() => {
+    fetchDashboardData(session.publicKey)
+      .then((next: DashboardSnapshot) => {
+        queryClient.setQueryData(dashboardQueryKey(session.publicKey), next);
+      })
+      .catch((err) => {
+        queryClient.setQueryData(dashboardQueryKey(session.publicKey), null);
+      });
+  }, [session.publicKey, queryClient]);
+
+  const hasNoStreams =
+    !snapshot ||
+    (snapshot.outgoingStreams.length === 0 &&
+      snapshot.incomingStreams.length === 0);
+
+  return (
+    <div className="dashboard-content-stack mt-8">
+      {renderStats(snapshot)}
+      {renderRecentActivity(snapshot, () => setShowWizard())}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/components/dashboard/DashboardPaused.tsx b/frontend/src/components/dashboard/DashboardPaused.tsx
new file mode 100644
index 00000000..e3345b59
--- /dev/null
+++ b/frontend/src/components/dashboard/DashboardPaused.tsx
@@ -0,0 +1,53 @@
+import { EmptyState } from "./dashboard-view";
+import { BoltIcon } from "./dashboard-view";
+
+interface DashboardPausedProps {
+  outgoingStreams: any[];
+  incomingStreams: any[];
+}
+
+export function DashboardPaused({
+  outgoingStreams,
+  incomingStreams,
+}: DashboardPausedProps) {
+  const pausedStreams = [
+    ...outgoingStreams.filter((s: any) => s.status === "Paused"),
+    ...incomingStreams.filter((s: any) => s.status === "Paused"),
+  ];
+
+  if (pausedStreams.length === 0) {
+    return (
+      <div className="glass-card p-12 rounded-3xl border-slate-800 text-center text-slate-400 mt-8">
+        No paused streams found.
+      </div>
+    );
+  }
+  return (
+    <div className="mt-8 glass-card rounded-3xl border-slate-800 overflow-hidden">
+      <table className="dashboard-table w-full">
+        <thead>
+          <tr>
+            <th>Stream ID</th>
+            <th>Counterparty</th>
+            <th>Token</th>
+            <th>Status</th>
+          </tr>
+        </thead>
+        <tbody>
+          {pausedStreams.map((s: any) => (
+            <tr key={s.id}>
+              <td>#{s.id}</td>
+              <td className="font-mono text-xs">{s.recipient}</td>
+              <td>{s.token}</td>
+              <td>
+                <span className="px-2 py-1 rounded-full bg-yellow-500/10 text-yellow-500 text-xs font-bold">
+                  Paused
+                </span>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/components/dashboard/DashboardSettings.tsx b/frontend/src/components/dashboard/DashboardSettings.tsx
new file mode 100644
index 00000000..b2be2af3
--- /dev/null
+++ b/frontend/src/components/dashboard/DashboardSettings.tsx
@@ -0,0 +1,43 @@
+import { Button } from "@/components/ui/Button";
+
+interface DashboardSettingsProps {
+  session: any;
+  onDisconnect: () => void;
+}
+
+export function DashboardSettings({ session, onDisconnect }: DashboardSettingsProps) {
+  return (
+    <div className="dashboard-content-stack mt-8">
+      <section className="dashboard-panel dashboard-panel--stream-builder">
+        <div className="dashboard-panel__header">
+          <h3>Create Stream</h3>
+          <span>Save and reuse recurring configurations</span>
+        </div>
+
+        <div className="stream-template-manager">
+          <h4>Template Library</h4>
+          <p>
+            Save recurring stream settings once, apply instantly, then
+            override before submitting.
+          </p>
+
+          <div className="stream-template-editor">
+            <input
+              placeholder="e.g. Monthly Contributor Payroll"
+              aria-label="Template name"
+            />
+            <div className="stream-template-editor__actions">
+              <button className="secondary-button" disabled>
+                Save Template
+              </button>
+            </div>
+          </div>
+
+          <div className="mini-empty-state">
+            <p>No templates yet. Save your first stream setup.</p>
+          </div>
+        </div>
+      </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 77bb8453..7d87f561 100644
--- a/frontend/src/components/dashboard/dashboard-view.tsx
+++ b/frontend/src/components/dashboard/dashboard-view.tsx
@@ -2,6 +2,7 @@
 
 import React from "react";
 import Link from "next/link";
+import dynamic from "next/dynamic";
 import toast from "react-hot-toast";
 
 /**
@@ -52,6 +53,31 @@ import { CancelConfirmModal } from "../stream-creation/CancelConfirmModal";
 import { StreamDetailsModal } from "./StreamDetailsModal";
 import { Button } from "../ui/Button";
 
+// @ts-expect-error unused var
+const DashboardOverviewDynamic = dynamic(() => import("./DashboardOverview"), {
+  ssr: false,
+});
+// @ts-expect-error unused var
+const DashboardIncomingDynamic = dynamic(() => import("./DashboardIncoming"), {
+  ssr: false,
+});
+// @ts-expect-error unused var
+const DashboardOutgoingDynamic = dynamic(() => import("./DashboardOutgoing"), {
+  ssr: false,
+});
+// @ts-expect-error unused var
+const DashboardPausedDynamic = dynamic(() => import("./DashboardPaused"), {
+  ssr: false,
+});
+// @ts-expect-error unused var
+const DashboardActivityDynamic = dynamic(() => import("./DashboardActivity"), {
+  ssr: false,
+});
+// @ts-expect-error unused var
+const DashboardSettingsDynamic = dynamic(() => import("./DashboardSettings"), {
+  ssr: false,
+});
+
 // ─── Types ────────────────────────────────────────────────────────────────────
 
 interface DashboardViewProps {
@@ -143,8 +169,8 @@ function DashboardSkeleton() {
   );
 }
 
-/** Generic empty state with an optional CTA */
-function EmptyState({
+/** Generic empty state with an optional CTE */
+export function EmptyState({
   icon,
   title,
   description,
@@ -207,7 +233,7 @@ function ErrorState({
 
 // ─── Icon helpers ─────────────────────────────────────────────────────────────
 
-function BoltIcon() {
+export function BoltIcon() {
   return (
     <svg
       className="h-10 w-10 text-accent"
@@ -225,7 +251,7 @@ function BoltIcon() {
   );
 }
 
-function InboxIcon() {
+export function InboxIcon() {
   return (
     <svg
       className="h-10 w-10 text-accent"
@@ -243,7 +269,7 @@ function InboxIcon() {
   );
 }
 
-function ActivityIcon() {
+export function ActivityIcon() {
   return (
     <svg
       className="h-10 w-10 text-accent"
@@ -351,12 +377,10 @@ function renderAnalytics(snapshot: DashboardSnapshot | null) {
             >
               <p>{metric.label}</p>
               <h2>
-                {isUnavailable
-                  ? "No data"
-                  : formatAnalyticsValue(metric.value!, metric.format)}
+                {isUnavailable ? "No data" : formatAnalyticsValue(metric.value!, metric.format)}
               </h2>
               <span>
-                {isUnavailable ? metric.unavailableText : metric.detail}
+                {isUnavailable ? "No data" : metric.detail}
               </span>
             </article>
           );
@@ -553,9 +577,7 @@ export function DashboardView({ session, onDisconnect }: DashboardViewProps) {
             .then(setSnapshot)
             .catch((err) => {
               setSnapshotError(
-                err instanceof Error
-                  ? err.message
-                  : "Failed to refresh dashboard",
+                err instanceof Error ? err.message : "Failed to refresh dashboard",
               );
             });
         }
@@ -674,9 +696,7 @@ export function DashboardView({ session, onDisconnect }: DashboardViewProps) {
         if (!cancelled) {
           setSnapshot(null);
           setSnapshotError(
-            err instanceof Error
-              ? err.message
-              : "Failed to fetch dashboard data.",
+            err instanceof Error ? err.message : "Failed to fetch dashboard data.",
           );
         }
       } finally {
@@ -786,7 +806,7 @@ export function DashboardView({ session, onDisconnect }: DashboardViewProps) {
     setStreamFormMessage(null);
   };
 
-  // ── Optimistic helpers ────────────────────────────────────────────────────
+  // ── Optimistic helpers ─────────────────────────────────────────────────────
 
   const removeStreamLocally = (streamId: string) => {
     queryClient.setQueryData<DashboardSnapshot | undefined>(dashboardQueryKey(session.publicKey), (prev) => {
@@ -1007,7 +1027,7 @@ export function DashboardView({ session, onDisconnect }: DashboardViewProps) {
       );
     }
 
-    // ── Overview ──────────────────────────────────────────────────────────
+    // ── Overview (default tab, rendered synchronously) ─────────────────────
     if (activeTab === "overview") {
       return (
         <div className="dashboard-content-stack mt-8">
@@ -1024,48 +1044,44 @@ export function DashboardView({ session, onDisconnect }: DashboardViewProps) {
       );
     }
 
-    // ── Incoming ──────────────────────────────────────────────────────────
-    if (activeTab === "incoming") {
-      if (snapshot!.incomingStreams.length === 0) {
-        return (
-          <EmptyState
-            icon={<InboxIcon />}
-            title="No incoming streams yet"
-            description="No streams are sending you funds yet. Share your wallet address with a sender to receive streaming payments."
-          />
-        );
-      }
+    // ── Non-default tabs: lazy-loaded via next/dynamic ─────────────────────
+    const tabComponents: Record<string, React.ComponentType> = {
+      incoming: DashboardIncomingDynamic,
+      outgoing: DashboardOutgoingDynamic,
+      paused: DashboardPausedDynamic,
+      activity: DashboardActivityDynamic,
+      settings: DashboardSettingsDynamic,
+    };
+
+    const TabComponent = tabComponents[activeTab];
+    if (!TabComponent) {
       return (
-        <div className="mt-8">
-          <IncomingStreams
-            streams={snapshot!.incomingStreams}
-            onWithdraw={handleIncomingWithdraw}
-            withdrawingStreamId={withdrawingIncomingStreamId}
-          />
+        <div className="dashboard-empty-state mt-8">
+          <h2>Under Construction</h2>
+          <p>This tab is currently under development.</p>
         </div>
       );
     }
 
-    // ── Outgoing ──────────────────────────────────────────────────────────
-    if (activeTab === "outgoing") {
-      const activeOutgoing = snapshot!.outgoingStreams.filter(
-        (s) => s.status === "Active",
+    // Pass required props to each tab component
+    if (activeTab === "incoming") {
+      return (
+        <DashboardIncomingDynamic
+          incomingStreams={snapshot!.incomingStreams}
+          onWithdraw={handleIncomingWithdraw}
+          withdrawingStreamId={withdrawingIncomingStreamId}
+        />
       );
-      if (activeOutgoing.length === 0) {
-        return (
-          <EmptyState
-            icon={<BoltIcon />}
-            title="No active outgoing streams"
-            description="You don't have any active outgoing payment streams. Create one to start streaming tokens to a recipient."
-            action={
-              <Button onClick={() => setShowWizard(true)} glow>
-                Create a Stream
-              </Button>
-            }
-          />
-        );
-      }
+    }
+
+    if (activeTab === "outgoing") {
       return (
+        <DashboardOutgoingDynamic
+          outgoingStreams={snapshot!.outgoingStreams}
+          onTopUp={(s) => setModal({ type: "topup", stream: s })}
+          onCancel={(s) => setModal({ type: "cancel", stream: s })}
+          onShowDetails={(s) => setModal({ type: "details", stream: s })}
+        />
         <div className="mt-8">
           <StreamsTable
             snapshot={{ ...snapshot!, outgoingStreams: activeOutgoing }}
@@ -1077,301 +1093,33 @@ export function DashboardView({ session, onDisconnect }: DashboardViewProps) {
       );
     }
 
-    // ── Paused ────────────────────────────────────────────────────────────
     if (activeTab === "paused") {
-      const pausedStreams = [
-        ...snapshot!.outgoingStreams.filter((s) => s.status === "Paused"),
-        ...snapshot!.incomingStreams.filter((s) => s.status === "Paused"),
-      ];
-      if (pausedStreams.length === 0) {
-        return (
-          <div className="glass-card p-12 rounded-3xl border-slate-800 text-center text-slate-400 mt-8">
-            No paused streams found.
-          </div>
-        );
-      }
       return (
-        <div className="mt-8 glass-card rounded-3xl border-slate-800 overflow-hidden">
-          <table className="dashboard-table w-full">
-            <thead>
-              <tr>
-                <th>Stream ID</th>
-                <th>Counterparty</th>
-                <th>Token</th>
-                <th>Status</th>
-              </tr>
-            </thead>
-            <tbody>
-              {pausedStreams.map((s) => (
-                <tr key={s.id}>
-                  <td>#{s.id}</td>
-                  <td className="font-mono text-xs">{s.recipient}</td>
-                  <td>{s.token}</td>
-                  <td>
-                    <span className="px-2 py-1 rounded-full bg-yellow-500/10 text-yellow-500 text-xs font-bold">
-                      Paused
-                    </span>
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
+        <DashboardPausedDynamic
+          outgoingStreams={snapshot!.outgoingStreams}
+          incomingStreams={snapshot!.incomingStreams}
+        />
       );
     }
 
-    // ── Activity ──────────────────────────────────────────────────────────
     if (activeTab === "activity") {
       return (
+        <DashboardActivityDynamic
+          recentActivity={snapshot!.recentActivity}
+          onCreateStream={() => setShowWizard(true)}
+        />
         <div className="mt-8">
           <RecentActivityList snapshot={snapshot} onCreateStream={handleShowWizard} />
         </div>
       );
     }
 
-    // ── Settings ──────────────────────────────────────────────────────────
     if (activeTab === "settings") {
       return (
-        <div className="dashboard-content-stack mt-8">
-          <section className="dashboard-panel dashboard-panel--stream-builder">
-            <div className="dashboard-panel__header">
-              <h3>Create Stream</h3>
-              <span>Save and reuse recurring configurations</span>
-            </div>
-
-            {streamFormMessage ? (
-              <p
-                className="stream-form-message"
-                data-tone={streamFormMessage.tone}
-              >
-                {streamFormMessage.text}
-              </p>
-            ) : null}
-
-            <div className="stream-template-layout">
-              <div className="stream-template-manager">
-                <h4>Template Library</h4>
-                <p>
-                  Save recurring stream settings once, apply instantly, then
-                  override before submitting.
-                </p>
-
-                <div className="stream-template-editor">
-                  <input
-                    value={templateNameInput}
-                    onChange={(e) => setTemplateNameInput(e.target.value)}
-                    placeholder="e.g. Monthly Contributor Payroll"
-                    aria-label="Template name"
-                  />
-                  <div className="stream-template-editor__actions">
-                    <button
-                      type="button"
-                      className="secondary-button"
-                      disabled={!isTemplateNameValid}
-                      onClick={handleSaveTemplate}
-                    >
-                      {saveTemplateButtonLabel}
-                    </button>
-                    {editingTemplateId ? (
-                      <button
-                        type="button"
-                        className="secondary-button"
-                        onClick={handleClearTemplateEditor}
-                      >
-                        Stop Editing
-                      </button>
-                    ) : null}
-                  </div>
-                </div>
-
-                {templates.length === 0 ? (
-                  <div className="mini-empty-state">
-                    <p>No templates yet. Save your first stream setup.</p>
-                  </div>
-                ) : (
-                  <ul className="stream-template-list">
-                    {templates.map((t) => (
-                      <li
-                        key={t.id}
-                        className="stream-template-item"
-                        data-active={
-                          selectedTemplateId === t.id ? "true" : undefined
-                        }
-                      >
-                        <div className="stream-template-item__meta">
-                          <strong>{t.name}</strong>
-                          <small>
-                            Updated {formatTemplateUpdatedAt(t.updatedAt)}
-                          </small>
-                        </div>
-                        <div className="stream-template-item__actions">
-                          <button
-                            type="button"
-                            className="secondary-button"
-                            onClick={() => handleApplyTemplate(t.id)}
-                          >
-                            Apply
-                          </button>
-                          <button
-                            type="button"
-                            className="secondary-button"
-                            onClick={() => handleEditTemplate(t.id)}
-                          >
-                            Edit
-                          </button>
-                          <button
-                            type="button"
-                            className="secondary-button secondary-button--danger"
-                            onClick={() => handleDeleteTemplate(t.id)}
-                          >
-                            Delete
-                          </button>
-                        </div>
-                      </li>
-                    ))}
-                  </ul>
-                )}
-              </div>
-
-              <form className="stream-form" onSubmit={handleFormCreateStream}>
-                <div className="stream-form__meta">
-                  <div>
-                    <h4>Stream Configuration</h4>
-                    <p>
-                      {requiredFieldsCompleted} / 5 required fields completed
-                    </p>
-                  </div>
-                  <label className="stream-form__template-select">
-                    Load template
-                    <select
-                      value={selectedTemplateId ?? ""}
-                      onChange={(e) => {
-                        const id = e.target.value;
-                        if (!id) {
-                          setSelectedTemplateId(null);
-                          return;
-                        }
-                        handleApplyTemplate(id);
-                      }}
-                    >
-                      <option value="">Select saved template</option>
-                      {templates.map((t) => (
-                        <option key={t.id} value={t.id}>
-                          {t.name}
-                        </option>
-                      ))}
-                    </select>
-                  </label>
-                </div>
-
-                <label>
-                  Recipient Address
-                  <input
-                    required
-                    type="text"
-                    value={streamForm.recipient}
-                    onChange={(e) =>
-                      updateStreamForm("recipient", e.target.value)
-                    }
-                    placeholder="G..."
-                  />
-                </label>
-                <div className="stream-form__row">
-                  <label>
-                    Token
-                    <input
-                      required
-                      type="text"
-                      value={streamForm.token}
-                      onChange={(e) =>
-                        updateStreamForm("token", e.target.value.toUpperCase())
-                      }
-                      placeholder="USDC"
-                    />
-                  </label>
-                  <label>
-                    Total Amount
-                    <input
-                      required
-                      type="number"
-                      min="0"
-                      step="0.0000001"
-                      value={streamForm.totalAmount}
-                      onChange={(e) =>
-                        updateStreamForm("totalAmount", e.target.value)
-                      }
-                      placeholder="100"
-                    />
-                  </label>
-                </div>
-                <div className="stream-form__row">
-                  <label>
-                    Starts At
-                    <input
-                      required
-                      type="datetime-local"
-                      value={streamForm.startsAt}
-                      onChange={(e) =>
-                        updateStreamForm("startsAt", e.target.value)
-                      }
-                    />
-                  </label>
-                  <label>
-                    Ends At
-                    <input
-                      required
-                      type="datetime-local"
-                      value={streamForm.endsAt}
-                      onChange={(e) =>
-                        updateStreamForm("endsAt", e.target.value)
-                      }
-                    />
-                  </label>
-                </div>
-                <div className="stream-form__row">
-                  <label>
-                    Cadence (seconds)
-                    <input
-                      type="number"
-                      min="1"
-                      step="1"
-                      value={streamForm.cadenceSeconds}
-                      onChange={(e) =>
-                        updateStreamForm("cadenceSeconds", e.target.value)
-                      }
-                    />
-                  </label>
-                </div>
-                <label>
-                  Note
-                  <textarea
-                    value={streamForm.note}
-                    onChange={(e) => updateStreamForm("note", e.target.value)}
-                    placeholder="Optional internal note for this stream configuration."
-                  />
-                </label>
-
-                <div className="stream-form__actions">
-                  <button
-                    type="submit"
-                    className="wallet-button"
-                    disabled={isFormSubmitting}
-                  >
-                    {isFormSubmitting ? "Submitting..." : "Create Stream"}
-                  </button>
-                  <button
-                    type="button"
-                    className="secondary-button"
-                    disabled={isFormSubmitting}
-                    onClick={handleResetStreamForm}
-                  >
-                    Reset
-                  </button>
-                </div>
-              </form>
-            </div>
-          </section>
-        </div>
+        <DashboardSettingsDynamic
+          session={session}
+          onDisconnect={onDisconnect}
+        />
       );
     }
 
@@ -1491,4 +1239,4 @@ export function DashboardView({ session, onDisconnect }: DashboardViewProps) {
       )}
     </main>
   );
-}
+}
\ No newline at end of file