diff --git a/next.config.js b/next.config.js
index 75f5d98..a01df76 100644
--- a/next.config.js
+++ b/next.config.js
@@ -18,6 +18,24 @@ const nextConfig = {
   },
   async headers() {
     return [
+      {
+        // Applied to every route; the more specific /embed/:id rule below
+        // overrides X-Frame-Options for that one path.
+        source: "/:path*",
+        headers: [
+          { key: "X-Frame-Options", value: "DENY" },
+          { key: "X-Content-Type-Options", value: "nosniff" },
+          { key: "Referrer-Policy", value: "strict-origin-when-cross-origin" },
+          {
+            key: "Strict-Transport-Security",
+            value: "max-age=63072000; includeSubDomains; preload",
+          },
+          {
+            key: "Permissions-Policy",
+            value: "camera=(), microphone=(), geolocation=(), payment=(self)",
+          },
+        ],
+      },
       {
         source: "/sw.js",
         headers: [
diff --git a/src/app/api/folders/[id]/route.ts b/src/app/api/folders/[id]/route.ts
new file mode 100644
index 0000000..46113c8
--- /dev/null
+++ b/src/app/api/folders/[id]/route.ts
@@ -0,0 +1,62 @@
+import { NextRequest, NextResponse } from "next/server";
+import { FolderNameSchema, deleteFolder, getFolder, renameFolder } from "@/lib/folders";
+
+/** PATCH /api/folders/:id — rename a folder. */
+export async function PATCH(
+  request: NextRequest,
+  { params }: { params: { id: string } }
+) {
+  try {
+    if (!getFolder(params.id)) {
+      return NextResponse.json({ error: "Folder not found" }, { status: 404 });
+    }
+
+    const rawBody = await request.json();
+    const parsed = FolderNameSchema.safeParse(rawBody);
+
+    if (!parsed.success) {
+      return NextResponse.json(
+        {
+          error: "Invalid folder payload — expected { name: string }",
+          details: parsed.error.issues,
+        },
+        { status: 422 }
+      );
+    }
+
+    const folder = renameFolder(params.id, parsed.data.name);
+    return NextResponse.json({ folder }, { status: 200 });
+  } catch (error) {
+    console.error("Folder rename error:", error);
+    return NextResponse.json(
+      {
+        error: "Failed to rename folder",
+        details: error instanceof Error ? error.message : String(error),
+      },
+      { status: 500 }
+    );
+  }
+}
+
+/** DELETE /api/folders/:id — delete a folder and clear its membership. */
+export async function DELETE(
+  _request: NextRequest,
+  { params }: { params: { id: string } }
+) {
+  try {
+    const removed = deleteFolder(params.id);
+    if (!removed) {
+      return NextResponse.json({ error: "Folder not found" }, { status: 404 });
+    }
+    return NextResponse.json({ success: true }, { status: 200 });
+  } catch (error) {
+    console.error("Folder delete error:", error);
+    return NextResponse.json(
+      {
+        error: "Failed to delete folder",
+        details: error instanceof Error ? error.message : String(error),
+      },
+      { status: 500 }
+    );
+  }
+}
diff --git a/src/app/api/folders/route.ts b/src/app/api/folders/route.ts
new file mode 100644
index 0000000..0af393e
--- /dev/null
+++ b/src/app/api/folders/route.ts
@@ -0,0 +1,66 @@
+import { NextRequest, NextResponse } from "next/server";
+import {
+  FolderNameSchema,
+  MAX_FOLDERS,
+  createFolder,
+  getMembershipMap,
+  listFolders,
+} from "@/lib/folders";
+
+/**
+ * GET /api/folders — every folder, plus the invoiceId → folderIds membership map.
+ *
+ * One request serves both the sidebar (the folder list) and list filtering
+ * (the membership map), so the folders page doesn't fan out a request per invoice.
+ */
+export async function GET(_request: NextRequest) {
+  try {
+    return NextResponse.json(
+      { folders: listFolders(), byInvoice: getMembershipMap() },
+      { status: 200 }
+    );
+  } catch (error) {
+    console.error("Folder list error:", error);
+    return NextResponse.json(
+      {
+        error: "Failed to list folders",
+        details: error instanceof Error ? error.message : String(error),
+      },
+      { status: 500 }
+    );
+  }
+}
+
+/** POST /api/folders — create a new named folder. */
+export async function POST(request: NextRequest) {
+  try {
+    if (listFolders().length >= MAX_FOLDERS) {
+      return NextResponse.json({ error: `Cannot exceed ${MAX_FOLDERS} folders` }, { status: 422 });
+    }
+
+    const rawBody = await request.json();
+    const parsed = FolderNameSchema.safeParse(rawBody);
+
+    if (!parsed.success) {
+      return NextResponse.json(
+        {
+          error: "Invalid folder payload — expected { name: string }",
+          details: parsed.error.issues,
+        },
+        { status: 422 }
+      );
+    }
+
+    const folder = createFolder(parsed.data.name);
+    return NextResponse.json({ folder }, { status: 201 });
+  } catch (error) {
+    console.error("Folder create error:", error);
+    return NextResponse.json(
+      {
+        error: "Failed to create folder",
+        details: error instanceof Error ? error.message : String(error),
+      },
+      { status: 500 }
+    );
+  }
+}
diff --git a/src/app/api/invoices/[id]/folders/route.ts b/src/app/api/invoices/[id]/folders/route.ts
new file mode 100644
index 0000000..0dff979
--- /dev/null
+++ b/src/app/api/invoices/[id]/folders/route.ts
@@ -0,0 +1,66 @@
+import { NextRequest, NextResponse } from "next/server";
+import { FolderMembershipSchema, getFoldersForInvoice, setFoldersForInvoice } from "@/lib/folders";
+
+/** GET /api/invoices/:id/folders — folder ids this invoice currently belongs to. */
+export async function GET(
+  _request: NextRequest,
+  { params }: { params: { id: string } }
+) {
+  try {
+    return NextResponse.json(
+      { invoiceId: params.id, folderIds: getFoldersForInvoice(params.id) },
+      { status: 200 }
+    );
+  } catch (error) {
+    console.error("Invoice folder fetch error:", error);
+    return NextResponse.json(
+      {
+        error: "Failed to fetch invoice folders",
+        details: error instanceof Error ? error.message : String(error),
+      },
+      { status: 500 }
+    );
+  }
+}
+
+/**
+ * PATCH /api/invoices/:id/folders — replace the invoice's folder membership.
+ *
+ * The client sends the full desired list (both adds and removes go through
+ * here), matching `PATCH /api/invoices/:id/tags`.
+ */
+export async function PATCH(
+  request: NextRequest,
+  { params }: { params: { id: string } }
+) {
+  try {
+    const rawBody = await request.json();
+    const parsed = FolderMembershipSchema.safeParse(rawBody);
+
+    if (!parsed.success) {
+      return NextResponse.json(
+        {
+          error: "Invalid payload — expected { folderIds: string[] }",
+          details: parsed.error.issues,
+        },
+        { status: 422 }
+      );
+    }
+
+    const folderIds = setFoldersForInvoice(params.id, parsed.data.folderIds);
+
+    return NextResponse.json(
+      { success: true, invoiceId: params.id, folderIds },
+      { status: 200 }
+    );
+  } catch (error) {
+    console.error("Invoice folder save error:", error);
+    return NextResponse.json(
+      {
+        error: "Failed to save invoice folders",
+        details: error instanceof Error ? error.message : String(error),
+      },
+      { status: 500 }
+    );
+  }
+}
diff --git a/src/app/api/invoices/route.ts b/src/app/api/invoices/route.ts
index c8959b4..de4f193 100644
--- a/src/app/api/invoices/route.ts
+++ b/src/app/api/invoices/route.ts
@@ -1,7 +1,5 @@
 import { NextRequest, NextResponse } from "next/server";
-import { splitClient } from "@/lib/stellar";
-
-const PAGE_SIZE = 20;
+import { fetchInvoicesForAddress } from "@/lib/stellar/horizonServer";
 
 /**
  * GET /api/invoices?cursor=<id>&limit=20&publicKey=<address>&q=<query>
@@ -19,9 +17,9 @@ const PAGE_SIZE = 20;
 export async function GET(request: NextRequest) {
   const { searchParams } = request.nextUrl;
   const publicKey = searchParams.get("publicKey");
-  const cursorParam = searchParams.get("cursor");
+  const cursor = searchParams.get("cursor");
   const limitParam = searchParams.get("limit");
-  const q = searchParams.get("q")?.trim().toLowerCase() || "";
+  const q = searchParams.get("q") ?? undefined;
 
   if (!publicKey) {
     return NextResponse.json(
@@ -30,66 +28,12 @@ export async function GET(request: NextRequest) {
     );
   }
 
-  const limit = Math.min(
-    Math.max(1, parseInt(limitParam ?? String(PAGE_SIZE), 10) || PAGE_SIZE),
-    50,
-  );
-
-  // Determine starting invoice id (cursor is the last id we already returned)
-  const startId = cursorParam ? parseInt(cursorParam, 10) + 1 : 1;
-
-  const results = [];
-  let lastCheckedId = startId - 1;
-
-  for (let id = startId; results.length < limit; id++) {
-    // Safety cap — don't scan more than limit*10 ids in a single request
-    if (id > startId + limit * 10) break;
-
-    lastCheckedId = id;
-
-    try {
-      const inv = await splitClient.getInvoice(String(id));
-      const mine =
-        inv.creator === publicKey ||
-        inv.recipients.some((r) => r.address === publicKey);
-
-      if (mine) {
-        if (q) {
-          const memo = (inv as any).memo as string | undefined;
-          const matchesQuery =
-            (inv.title || "").toLowerCase().startsWith(q) ||
-            (memo || "").toLowerCase().startsWith(q);
-          if (matchesQuery) {
-            results.push(inv);
-          }
-        } else {
-          results.push(inv);
-        }
-      }
-    } catch {
-      // splitClient throws when invoice id does not exist — treat as end of list
-      return NextResponse.json(
-        { invoices: results, nextCursor: null },
-        {
-          headers: {
-            "Cache-Control": "private, no-store",
-          },
-        },
-      );
-    }
-  }
-
-  // If we filled the page we don't know yet whether there are more — return the
-  // id of the last invoice we fetched so the client can continue from there.
-  const nextCursor =
-    results.length === limit ? String(results[results.length - 1].id) : null;
+  const limit = limitParam ? parseInt(limitParam, 10) : undefined;
+  const result = await fetchInvoicesForAddress(publicKey, { cursor, limit, q });
 
-  return NextResponse.json(
-    { invoices: results, nextCursor },
-    {
-      headers: {
-        "Cache-Control": "private, no-store",
-      },
+  return NextResponse.json(result, {
+    headers: {
+      "Cache-Control": "private, no-store",
     },
-  );
+  });
 }
diff --git a/src/app/dashboard/folders/page.tsx b/src/app/dashboard/folders/page.tsx
new file mode 100644
index 0000000..f78d02c
--- /dev/null
+++ b/src/app/dashboard/folders/page.tsx
@@ -0,0 +1,200 @@
+"use client";
+
+import { Suspense, useCallback, useMemo, useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import Link from "next/link";
+import { FolderPlus } from "lucide-react";
+import { useWalletContext } from "@/contexts/WalletContext";
+import { useInfiniteInvoices } from "@/hooks/useInfiniteInvoices";
+import { useInvoiceSelection } from "@/hooks/useInvoiceSelection";
+import { useFolders } from "@/hooks/useFolders";
+import { useFoldersStore } from "@/lib/stores/foldersStore";
+import FolderSidebar from "@/components/folders/FolderSidebar";
+import AssignFolderMenu from "@/components/folders/AssignFolderMenu";
+import InvoiceCard from "@/components/InvoiceCard";
+import InvoiceListSentinel from "@/components/InvoiceListSentinel";
+import { InvoiceListSkeleton } from "@/components/Skeleton";
+
+export default function FoldersPage() {
+  return (
+    <Suspense fallback={<InvoiceListSkeleton />}>
+      <FoldersPageInner />
+    </Suspense>
+  );
+}
+
+function FoldersPageInner() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const selectedFolderId = searchParams.get("folderId");
+
+  const { address } = useWalletContext();
+  const { invoices, isLoading, hasMore, loadMore, isFetchingMore } = useInfiniteInvoices(address);
+
+  const {
+    folders,
+    foldersByInvoice,
+    createFolder,
+    renameFolder,
+    deleteFolder,
+    assignFolders,
+  } = useFolders();
+
+  const { sidebarCollapsed, toggleSidebarCollapsed } = useFoldersStore();
+
+  const { selectedIds, isSelecting, toggleSelecting, toggleInvoice, deselectAll, isSelected, selectedCount } =
+    useInvoiceSelection();
+
+  const [bulkMenuOpen, setBulkMenuOpen] = useState(false);
+  const [cardMenuInvoiceId, setCardMenuInvoiceId] = useState<string | null>(null);
+
+  const selectFolder = useCallback(
+    (folderId: string | null) => {
+      const sp = new URLSearchParams(searchParams.toString());
+      if (folderId) sp.set("folderId", folderId);
+      else sp.delete("folderId");
+      router.replace(`?${sp.toString()}`, { scroll: false });
+    },
+    [router, searchParams]
+  );
+
+  const visibleInvoices = useMemo(() => {
+    if (!selectedFolderId) return invoices;
+    return invoices.filter((inv) => (foldersByInvoice[inv.id] ?? []).includes(selectedFolderId));
+  }, [invoices, selectedFolderId, foldersByInvoice]);
+
+  const counts = useMemo(() => {
+    const out: Record<string, number> = {};
+    for (const folder of folders) out[folder.id] = 0;
+    for (const inv of invoices) {
+      for (const folderId of foldersByInvoice[inv.id] ?? []) {
+        out[folderId] = (out[folderId] ?? 0) + 1;
+      }
+    }
+    out.all = invoices.length;
+    return out;
+  }, [invoices, folders, foldersByInvoice]);
+
+  if (!address) {
+    return (
+      <main className="max-w-5xl mx-auto w-full px-4 sm:px-6 py-16">
+        <p className="text-gray-400">Connect your wallet to view your invoice folders.</p>
+      </main>
+    );
+  }
+
+  return (
+    <main className="max-w-6xl mx-auto w-full px-4 sm:px-6 py-8 flex flex-col sm:flex-row gap-6 overflow-x-hidden">
+      <FolderSidebar
+        folders={folders}
+        selectedFolderId={selectedFolderId}
+        onSelect={selectFolder}
+        onCreate={createFolder}
+        onRename={renameFolder}
+        onDelete={deleteFolder}
+        counts={counts}
+        collapsed={sidebarCollapsed}
+        onToggleCollapsed={toggleSidebarCollapsed}
+      />
+
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center justify-between gap-3 mb-4">
+          <h1 className="text-xl font-bold">
+            {selectedFolderId
+              ? folders.find((f) => f.id === selectedFolderId)?.name ?? "Folder"
+              : "All Invoices"}
+          </h1>
+          <button
+            onClick={toggleSelecting}
+            className="text-sm text-indigo-400 hover:text-indigo-300 transition-colors"
+          >
+            {isSelecting ? "Cancel" : "Select"}
+          </button>
+        </div>
+
+        {isSelecting && selectedCount > 0 && (
+          <div className="relative mb-4 flex items-center gap-3 bg-gray-900 rounded-xl px-4 py-3">
+            <span className="text-sm text-gray-300">{selectedCount} selected</span>
+            <button
+              onClick={() => setBulkMenuOpen((v) => !v)}
+              className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-gray-800 hover:bg-gray-700 text-sm text-gray-200 transition-colors"
+            >
+              <FolderPlus size={14} /> Add to folder
+            </button>
+            <button
+              onClick={deselectAll}
+              className="ml-auto text-xs text-gray-500 hover:text-gray-300"
+            >
+              Clear
+            </button>
+            {bulkMenuOpen && (
+              <AssignFolderMenu
+                invoiceIds={Array.from(selectedIds)}
+                folders={folders}
+                foldersByInvoice={foldersByInvoice}
+                assignFolders={assignFolders}
+                createFolder={createFolder}
+                onClose={() => setBulkMenuOpen(false)}
+              />
+            )}
+          </div>
+        )}
+
+        {isLoading ? (
+          <InvoiceListSkeleton />
+        ) : visibleInvoices.length === 0 ? (
+          <p className="text-gray-500 text-sm py-8 text-center">
+            {selectedFolderId ? "No invoices in this folder yet." : "No invoices yet."}
+          </p>
+        ) : (
+          <div className="flex flex-col gap-3">
+            {visibleInvoices.map((invoice) => (
+              <div key={invoice.id} className="relative">
+                <div className="flex items-start gap-2">
+                  {isSelecting && (
+                    <input
+                      type="checkbox"
+                      checked={isSelected(invoice.id)}
+                      onChange={() => toggleInvoice(invoice.id)}
+                      className="mt-5 shrink-0"
+                      aria-label={`Select invoice ${invoice.id}`}
+                    />
+                  )}
+                  <div className="flex-1 min-w-0">
+                    <Link href={`/invoice/${invoice.id}`} className="block">
+                      <InvoiceCard invoice={invoice} />
+                    </Link>
+                  </div>
+                  <button
+                    onClick={() => setCardMenuInvoiceId((id) => (id === invoice.id ? null : invoice.id))}
+                    className="mt-3 p-1.5 rounded-lg text-gray-500 hover:text-gray-200 hover:bg-gray-800 transition-colors"
+                    aria-label={`Manage folders for invoice ${invoice.id}`}
+                  >
+                    <FolderPlus size={16} />
+                  </button>
+                </div>
+                {cardMenuInvoiceId === invoice.id && (
+                  <div className="absolute right-0 top-full">
+                    <AssignFolderMenu
+                      invoiceIds={[invoice.id]}
+                      folders={folders}
+                      foldersByInvoice={foldersByInvoice}
+                      assignFolders={assignFolders}
+                      createFolder={createFolder}
+                      onClose={() => setCardMenuInvoiceId(null)}
+                    />
+                  </div>
+                )}
+              </div>
+            ))}
+            <InvoiceListSentinel
+              onVisible={loadMore}
+              loading={isFetchingMore}
+              allLoaded={!hasMore}
+            />
+          </div>
+        )}
+      </div>
+    </main>
+  );
+}
diff --git a/src/app/dashboard/invoices/loading.tsx b/src/app/dashboard/invoices/loading.tsx
new file mode 100644
index 0000000..1fdb117
--- /dev/null
+++ b/src/app/dashboard/invoices/loading.tsx
@@ -0,0 +1,17 @@
+import { InvoiceListSkeleton } from "@/components/Skeleton";
+
+/**
+ * Stream-level skeleton for /dashboard/invoices, shown while the RSC shell
+ * (page.tsx) is being server-rendered — before the page's own <Suspense>
+ * fallback for the invoice table even mounts.
+ */
+export default function InvoicesLoading() {
+  return (
+    <main className="max-w-3xl mx-auto w-full px-4 sm:px-6 py-16 overflow-x-hidden">
+      <div className="h-8 w-40 bg-gray-200 dark:bg-gray-700 rounded animate-pulse mb-4" />
+      <div className="h-10 w-full bg-gray-100 dark:bg-gray-800 rounded-lg animate-pulse mb-3" />
+      <div className="h-8 w-2/3 bg-gray-100 dark:bg-gray-800 rounded-lg animate-pulse mb-4" />
+      <InvoiceListSkeleton />
+    </main>
+  );
+}
diff --git a/src/app/dashboard/invoices/page.tsx b/src/app/dashboard/invoices/page.tsx
new file mode 100644
index 0000000..f65731b
--- /dev/null
+++ b/src/app/dashboard/invoices/page.tsx
@@ -0,0 +1,70 @@
+import { Suspense } from "react";
+import type { Metadata } from "next";
+import InvoiceListControls from "@/components/invoices/InvoiceListControls";
+import InvoiceTable from "@/components/invoices/InvoiceTable";
+import { InvoiceListSkeleton } from "@/components/Skeleton";
+import { fetchInvoicesForAddress } from "@/lib/stellar/horizonServer";
+import { sortInvoices, type DashboardSortId } from "@/lib/dashboardFilters";
+import { matchesQuery, matchesStatuses, type InvoiceStatusFilter } from "@/lib/invoices/listFilters";
+
+export const metadata: Metadata = {
+  robots: { index: false, follow: false },
+  title: "Your Invoices — StellarSplit",
+};
+
+interface InvoicesPageProps {
+  searchParams: {
+    address?: string;
+    q?: string;
+    status?: string;
+    sort?: string;
+  };
+}
+
+/**
+ * Invoice list page — a Server Component that fetches data directly via the
+ * Horizon-backed `splitClient`, no client-side fetch waterfall. The shell
+ * (heading + controls) renders immediately; the invoice list itself streams
+ * in once the on-chain scan resolves, via the Suspense boundary below.
+ *
+ * The wallet address lives in the URL (?address=…) rather than a server
+ * session — Freighter connection state is inherently client-only, so
+ * InvoiceListControls syncs the connected address into the URL on mount,
+ * which re-triggers this server fetch with the right owner.
+ */
+export default async function InvoicesPage({ searchParams }: InvoicesPageProps) {
+  return (
+    <main className="max-w-3xl mx-auto w-full px-4 sm:px-6 py-16 overflow-x-hidden">
+      <h1 className="text-2xl font-bold mb-4">Your Invoices</h1>
+      <Suspense fallback={<div className="h-24 mb-4" />}>
+        <InvoiceListControls />
+      </Suspense>
+      <Suspense fallback={<InvoiceListSkeleton />}>
+        <InvoiceResults searchParams={searchParams} />
+      </Suspense>
+    </main>
+  );
+}
+
+async function InvoiceResults({ searchParams }: InvoicesPageProps): Promise<JSX.Element> {
+  const address = searchParams.address;
+  const q = searchParams.q ?? "";
+  const sort = (searchParams.sort ?? "newest") as DashboardSortId;
+  const statuses = (searchParams.status ?? "").split(",").filter(Boolean) as InvoiceStatusFilter[];
+
+  if (!address) {
+    return (
+      <p className="text-gray-400 text-sm py-8 text-center">
+        Connect your wallet to view your invoices.
+      </p>
+    );
+  }
+
+  const { invoices } = await fetchInvoicesForAddress(address, { limit: 50 });
+  const filtered = invoices.filter(
+    (invoice) => matchesQuery(invoice, q) && matchesStatuses(invoice, statuses)
+  );
+  const sorted = sortInvoices(filtered, sort);
+
+  return <InvoiceTable invoices={sorted} emptyMessage="No invoices match your filters." />;
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 35c48d3..7b537a0 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -21,6 +21,7 @@ import LanguageSwitcher from "@/components/LanguageSwitcher";
 import { UserPreferencesProvider } from "@/context/UserPreferencesContext";
 import { FiatRateProvider } from "@/hooks/useFiatRate";
 import { ShortcutRegistryProvider } from "@/context/ShortcutRegistry";
+import { getNonce } from "@/lib/csp";
 
 const themeBootstrap = `
 (function () {
@@ -105,12 +106,14 @@ export default function RootLayout({
 }: {
   children: React.ReactNode;
 }) {
+  const nonce = getNonce();
+
   return (
     // dir="ltr" is set here as scaffold; I18nProvider will update it client-side when RTL locales (ar/he) are added
     <html lang="en" dir="ltr" suppressHydrationWarning>
       <head>
-        <script dangerouslySetInnerHTML={{ __html: themeBootstrap }} />
-        <script dangerouslySetInnerHTML={{ __html: accessibilityBootstrap }} />
+        <script nonce={nonce} dangerouslySetInnerHTML={{ __html: themeBootstrap }} />
+        <script nonce={nonce} dangerouslySetInnerHTML={{ __html: accessibilityBootstrap }} />
       </head>
       <body suppressHydrationWarning className="min-h-screen bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-100 antialiased overflow-x-hidden">
         <QueryProvider>
@@ -180,7 +183,7 @@ export default function RootLayout({
             </AccessibilityProvider>
           </ThemeProvider>
         </QueryProvider>
-        <Script id="register-sw" strategy="afterInteractive">
+        <Script id="register-sw" strategy="afterInteractive" nonce={nonce}>
           {`if ("serviceWorker" in navigator) {
             window.addEventListener("load", function () {
               navigator.serviceWorker.register("/sw.js");
diff --git a/src/app/settings/sync/page.tsx b/src/app/settings/sync/page.tsx
index abe6640..ff1f3c4 100644
--- a/src/app/settings/sync/page.tsx
+++ b/src/app/settings/sync/page.tsx
@@ -8,6 +8,8 @@ import {
   downloadBlob,
   type StateBlob,
 } from "@/lib/stateSync";
+import { clearInvoiceCache } from "@/lib/db/invoiceCache";
+import { useToast } from "@/contexts/ToastContext";
 
 type Status = { type: "idle" } | { type: "loading" } | { type: "success"; message: string } | { type: "error"; message: string };
 
@@ -15,7 +17,9 @@ export default function StateSyncPage() {
   const [walletAddress, setWalletAddress] = useState<string | null>(null);
   const [exportStatus, setExportStatus] = useState<Status>({ type: "idle" });
   const [importStatus, setImportStatus] = useState<Status>({ type: "idle" });
+  const [clearingCache, setClearingCache] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
+  const toast = useToast();
 
   useEffect(() => {
     getFreighterPublicKey().then(setWalletAddress).catch(() => null);
@@ -53,6 +57,18 @@ export default function StateSyncPage() {
     }
   };
 
+  const handleClearCache = async () => {
+    setClearingCache(true);
+    try {
+      await clearInvoiceCache();
+      toast.success("Invoice cache cleared.");
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : "Failed to clear cache.");
+    } finally {
+      setClearingCache(false);
+    }
+  };
+
   return (
     <main className="max-w-2xl mx-auto w-full px-4 sm:px-6 py-8">
       <h1 className="text-3xl font-bold mb-2">State Sync</h1>
@@ -124,6 +140,23 @@ export default function StateSyncPage() {
           <p role="alert" className="mt-3 text-red-400 text-sm">{importStatus.message}</p>
         )}
       </section>
+
+      {/* Cache */}
+      <section aria-labelledby="cache-heading" className="bg-gray-900 rounded-xl p-5 mt-6">
+        <h2 id="cache-heading" className="text-lg font-semibold mb-1">Invoice Cache</h2>
+        <p className="text-sm text-gray-400 mb-4">
+          Your invoice list is cached in IndexedDB for faster loading. Clearing it forces the
+          next load to fetch fresh data from the network — no page reload required.
+        </p>
+        <button
+          type="button"
+          onClick={handleClearCache}
+          disabled={clearingCache}
+          className="min-h-11 px-5 py-2 rounded-lg bg-gray-800 hover:bg-gray-700 font-semibold text-sm transition-colors disabled:opacity-50"
+        >
+          {clearingCache ? "Clearing…" : "Clear Cache"}
+        </button>
+      </section>
     </main>
   );
 }
diff --git a/src/components/folders/AssignFolderMenu.tsx b/src/components/folders/AssignFolderMenu.tsx
new file mode 100644
index 0000000..5adfdd5
--- /dev/null
+++ b/src/components/folders/AssignFolderMenu.tsx
@@ -0,0 +1,158 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { Check, Folder as FolderIcon, Minus, Plus } from "lucide-react";
+import type { Folder } from "@/lib/folders";
+
+interface Props {
+  /** One invoice id for a per-card menu, or several for a bulk toolbar action. */
+  invoiceIds: string[];
+  folders: Folder[];
+  foldersByInvoice: Record<string, string[]>;
+  assignFolders: (invoiceId: string, folderIds: string[]) => Promise<string[]>;
+  createFolder: (name: string) => Promise<Folder>;
+  onClose: () => void;
+}
+
+type MembershipState = "all" | "some" | "none";
+
+function membershipFor(folderId: string, invoiceIds: string[], byInvoice: Record<string, string[]>): MembershipState {
+  const withFolder = invoiceIds.filter((id) => (byInvoice[id] ?? []).includes(folderId));
+  if (withFolder.length === 0) return "none";
+  if (withFolder.length === invoiceIds.length) return "all";
+  return "some";
+}
+
+/**
+ * AssignFolderMenu — popover for assigning one or many invoices to folders.
+ * Used both from a per-invoice-card button and the multi-select bulk toolbar.
+ */
+export default function AssignFolderMenu({
+  invoiceIds,
+  folders,
+  foldersByInvoice,
+  assignFolders,
+  createFolder,
+  onClose,
+}: Props) {
+  const [newName, setNewName] = useState("");
+  const [busy, setBusy] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        onClose();
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [onClose]);
+
+  const toggleFolder = async (folderId: string, state: MembershipState) => {
+    setBusy(true);
+    try {
+      const addingEverywhere = state !== "all";
+      await Promise.all(
+        invoiceIds.map((invoiceId) => {
+          const current = foldersByInvoice[invoiceId] ?? [];
+          const next = addingEverywhere
+            ? Array.from(new Set([...current, folderId]))
+            : current.filter((id) => id !== folderId);
+          return assignFolders(invoiceId, next);
+        })
+      );
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const handleCreateAndAssign = async () => {
+    const name = newName.trim();
+    if (!name) return;
+    setBusy(true);
+    try {
+      const folder = await createFolder(name);
+      await Promise.all(
+        invoiceIds.map((invoiceId) => {
+          const current = foldersByInvoice[invoiceId] ?? [];
+          return assignFolders(invoiceId, [...current, folder.id]);
+        })
+      );
+      setNewName("");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      role="menu"
+      aria-label="Assign to folder"
+      className="absolute z-50 mt-2 w-64 bg-gray-900 border border-gray-700 rounded-xl shadow-lg p-2"
+    >
+      <div className="text-xs font-semibold uppercase tracking-wide text-gray-500 px-2 py-1">
+        Add to folder
+      </div>
+
+      <ul className="max-h-56 overflow-y-auto space-y-0.5">
+        {folders.length === 0 && (
+          <li className="px-2 py-1.5 text-sm text-gray-500">No folders yet.</li>
+        )}
+        {folders.map((folder) => {
+          const state = membershipFor(folder.id, invoiceIds, foldersByInvoice);
+          return (
+            <li key={folder.id}>
+              <button
+                role="menuitemcheckbox"
+                aria-checked={state === "all"}
+                disabled={busy}
+                onClick={() => toggleFolder(folder.id, state)}
+                className="w-full flex items-center gap-2 px-2 py-1.5 rounded-lg text-sm text-left text-gray-200 hover:bg-gray-800 disabled:opacity-50"
+              >
+                <span
+                  className={`flex items-center justify-center h-4 w-4 rounded border shrink-0 ${
+                    state === "none" ? "border-gray-600" : "border-indigo-500 bg-indigo-600/30"
+                  }`}
+                >
+                  {state === "all" && <Check size={11} className="text-indigo-300" />}
+                  {state === "some" && <Minus size={11} className="text-indigo-300" />}
+                </span>
+                <FolderIcon size={13} className="text-gray-500 shrink-0" />
+                <span className="truncate">{folder.name}</span>
+              </button>
+            </li>
+          );
+        })}
+      </ul>
+
+      <div className="flex items-center gap-1 mt-2 pt-2 border-t border-gray-800">
+        <input
+          value={newName}
+          onChange={(e) => setNewName(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") handleCreateAndAssign();
+          }}
+          placeholder="New folder…"
+          className="flex-1 min-w-0 px-2 py-1.5 rounded-lg text-sm bg-gray-800 border border-gray-700 text-gray-100 outline-none focus:border-indigo-500"
+        />
+        <button
+          onClick={handleCreateAndAssign}
+          disabled={busy || !newName.trim()}
+          aria-label="Create and assign folder"
+          className="p-1.5 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white disabled:opacity-50"
+        >
+          <Plus size={14} />
+        </button>
+      </div>
+
+      <button
+        onClick={onClose}
+        className="w-full mt-2 px-2 py-1.5 rounded-lg text-xs text-gray-500 hover:text-gray-300 hover:bg-gray-800 transition-colors"
+      >
+        Done
+      </button>
+    </div>
+  );
+}
diff --git a/src/components/folders/FolderSidebar.tsx b/src/components/folders/FolderSidebar.tsx
new file mode 100644
index 0000000..4f96d10
--- /dev/null
+++ b/src/components/folders/FolderSidebar.tsx
@@ -0,0 +1,228 @@
+"use client";
+
+import { useState } from "react";
+import { ChevronDown, ChevronRight, Folder as FolderIcon, Pencil, Plus, Trash2, X } from "lucide-react";
+import type { Folder } from "@/lib/folders";
+
+interface Props {
+  folders: Folder[];
+  /** null selects "All Invoices". */
+  selectedFolderId: string | null;
+  onSelect: (folderId: string | null) => void;
+  onCreate: (name: string) => Promise<unknown>;
+  onRename: (id: string, name: string) => Promise<unknown>;
+  onDelete: (id: string) => Promise<unknown>;
+  /** invoiceId → folder ids, used to show a per-folder invoice count. */
+  counts?: Record<string, number>;
+  collapsed?: boolean;
+  onToggleCollapsed?: () => void;
+}
+
+/**
+ * FolderSidebar — "All Invoices" root plus the list of user-created folders.
+ * Supports inline create, rename and delete.
+ */
+export default function FolderSidebar({
+  folders,
+  selectedFolderId,
+  onSelect,
+  onCreate,
+  onRename,
+  onDelete,
+  counts = {},
+  collapsed = false,
+  onToggleCollapsed,
+}: Props) {
+  const [creating, setCreating] = useState(false);
+  const [newName, setNewName] = useState("");
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editingName, setEditingName] = useState("");
+  const [busy, setBusy] = useState(false);
+
+  const totalCount = Object.values(counts).reduce((s, c) => s + c, 0);
+
+  const submitCreate = async () => {
+    const name = newName.trim();
+    if (!name) {
+      setCreating(false);
+      setNewName("");
+      return;
+    }
+    setBusy(true);
+    try {
+      await onCreate(name);
+      setNewName("");
+      setCreating(false);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const submitRename = async (id: string) => {
+    const name = editingName.trim();
+    setEditingId(null);
+    if (!name) return;
+    setBusy(true);
+    try {
+      await onRename(id, name);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    if (!window.confirm("Delete this folder? Invoices in it will not be deleted.")) return;
+    setBusy(true);
+    try {
+      await onDelete(id);
+      if (selectedFolderId === id) onSelect(null);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  if (collapsed) {
+    return (
+      <button
+        onClick={onToggleCollapsed}
+        aria-label="Expand folder sidebar"
+        className="p-2 rounded-lg bg-gray-900 hover:bg-gray-800 text-gray-400 hover:text-gray-200 transition-colors"
+      >
+        <ChevronRight size={16} />
+      </button>
+    );
+  }
+
+  return (
+    <nav aria-label="Folders" className="w-full sm:w-56 shrink-0 bg-gray-900 rounded-xl p-3">
+      <div className="flex items-center justify-between mb-2 px-1">
+        <span className="text-xs font-semibold uppercase tracking-wide text-gray-500">
+          Folders
+        </span>
+        {onToggleCollapsed && (
+          <button
+            onClick={onToggleCollapsed}
+            aria-label="Collapse folder sidebar"
+            className="p-1 rounded text-gray-500 hover:text-gray-300"
+          >
+            <ChevronDown size={14} />
+          </button>
+        )}
+      </div>
+
+      <ul className="space-y-0.5">
+        <li>
+          <button
+            onClick={() => onSelect(null)}
+            className={`w-full flex items-center justify-between gap-2 px-2 py-1.5 rounded-lg text-sm text-left transition-colors ${
+              selectedFolderId === null
+                ? "bg-indigo-600/20 text-indigo-300"
+                : "text-gray-300 hover:bg-gray-800"
+            }`}
+          >
+            <span>All Invoices</span>
+            <span className="text-xs text-gray-500">{totalCount}</span>
+          </button>
+        </li>
+
+        {folders.map((folder) => (
+          <li key={folder.id} className="group">
+            {editingId === folder.id ? (
+              <input
+                autoFocus
+                value={editingName}
+                onChange={(e) => setEditingName(e.target.value)}
+                onBlur={() => submitRename(folder.id)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") submitRename(folder.id);
+                  if (e.key === "Escape") setEditingId(null);
+                }}
+                className="w-full px-2 py-1.5 rounded-lg text-sm bg-gray-800 border border-indigo-500 text-gray-100 outline-none"
+              />
+            ) : (
+              <div
+                className={`flex items-center gap-1 px-1 py-0.5 rounded-lg transition-colors ${
+                  selectedFolderId === folder.id ? "bg-indigo-600/20" : "hover:bg-gray-800"
+                }`}
+              >
+                <button
+                  onClick={() => onSelect(folder.id)}
+                  className={`flex-1 min-w-0 flex items-center gap-1.5 px-1 py-1 text-sm text-left truncate ${
+                    selectedFolderId === folder.id ? "text-indigo-300" : "text-gray-300"
+                  }`}
+                >
+                  <FolderIcon size={14} className="shrink-0" />
+                  <span className="truncate">{folder.name}</span>
+                </button>
+                <span className="text-xs text-gray-500 shrink-0">{counts[folder.id] ?? 0}</span>
+                <button
+                  onClick={() => {
+                    setEditingId(folder.id);
+                    setEditingName(folder.name);
+                  }}
+                  aria-label={`Rename ${folder.name}`}
+                  disabled={busy}
+                  className="p-1 rounded text-gray-500 hover:text-gray-200 opacity-0 group-hover:opacity-100 transition-opacity"
+                >
+                  <Pencil size={12} />
+                </button>
+                <button
+                  onClick={() => handleDelete(folder.id)}
+                  aria-label={`Delete ${folder.name}`}
+                  disabled={busy}
+                  className="p-1 rounded text-gray-500 hover:text-red-400 opacity-0 group-hover:opacity-100 transition-opacity"
+                >
+                  <Trash2 size={12} />
+                </button>
+              </div>
+            )}
+          </li>
+        ))}
+      </ul>
+
+      {creating ? (
+        <div className="flex items-center gap-1 mt-2">
+          <input
+            autoFocus
+            value={newName}
+            onChange={(e) => setNewName(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") submitCreate();
+              if (e.key === "Escape") {
+                setCreating(false);
+                setNewName("");
+              }
+            }}
+            placeholder="Folder name"
+            className="flex-1 min-w-0 px-2 py-1.5 rounded-lg text-sm bg-gray-800 border border-indigo-500 text-gray-100 outline-none"
+          />
+          <button
+            onClick={submitCreate}
+            disabled={busy}
+            aria-label="Confirm new folder"
+            className="p-1.5 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white disabled:opacity-50"
+          >
+            <Plus size={14} />
+          </button>
+          <button
+            onClick={() => {
+              setCreating(false);
+              setNewName("");
+            }}
+            aria-label="Cancel new folder"
+            className="p-1.5 rounded-lg text-gray-400 hover:text-gray-200"
+          >
+            <X size={14} />
+          </button>
+        </div>
+      ) : (
+        <button
+          onClick={() => setCreating(true)}
+          className="w-full mt-2 flex items-center gap-1.5 px-2 py-1.5 rounded-lg text-sm text-gray-400 hover:text-gray-200 hover:bg-gray-800 transition-colors"
+        >
+          <Plus size={14} /> New Folder
+        </button>
+      )}
+    </nav>
+  );
+}
diff --git a/src/components/invoices/InvoiceListControls.tsx b/src/components/invoices/InvoiceListControls.tsx
new file mode 100644
index 0000000..08e7dd1
--- /dev/null
+++ b/src/components/invoices/InvoiceListControls.tsx
@@ -0,0 +1,114 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Search } from "lucide-react";
+import { useDebounce } from "@/hooks/useDebounce";
+import { useWalletContext } from "@/contexts/WalletContext";
+import {
+  SORT_OPTIONS,
+  INVOICE_STATUS_FILTERS,
+  type DashboardSortId,
+  type InvoiceStatusFilter,
+} from "@/lib/dashboardFilters";
+
+/**
+ * InvoiceListControls — search, status filter chips and sort, extracted as a
+ * Client Component so the invoice list page itself can stay a Server
+ * Component. Every change is pushed to the URL via router.replace; the
+ * server re-reads the updated searchParams and streams a fresh
+ * <InvoiceTable> into the existing Suspense boundary, so this component's
+ * own state (the search input's focus, etc.) survives the round trip.
+ */
+export default function InvoiceListControls() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const { address } = useWalletContext();
+
+  const [search, setSearch] = useState(searchParams.get("q") ?? "");
+  const debouncedSearch = useDebounce(search, 300);
+
+  const activeStatuses = (searchParams.get("status") ?? "")
+    .split(",")
+    .filter(Boolean) as InvoiceStatusFilter[];
+  const sort = (searchParams.get("sort") ?? "newest") as DashboardSortId;
+
+  const pushParams = (updates: Record<string, string>) => {
+    const sp = new URLSearchParams(searchParams.toString());
+    for (const [key, value] of Object.entries(updates)) {
+      if (value) sp.set(key, value);
+      else sp.delete(key);
+    }
+    // Keep the connected wallet address in the URL so the server component
+    // can fetch without a client-only session.
+    if (address) sp.set("address", address);
+    router.replace(`?${sp.toString()}`, { scroll: false });
+  };
+
+  // Sync the connected wallet address into the URL once known, so the
+  // server fetch has something to key off before any filter is touched.
+  useEffect(() => {
+    if (address && searchParams.get("address") !== address) {
+      pushParams({});
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [address]);
+
+  useEffect(() => {
+    if (debouncedSearch !== (searchParams.get("q") ?? "")) {
+      pushParams({ q: debouncedSearch });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [debouncedSearch]);
+
+  const toggleStatus = (status: InvoiceStatusFilter) => {
+    const next = activeStatuses.includes(status)
+      ? activeStatuses.filter((s) => s !== status)
+      : [...activeStatuses, status];
+    pushParams({ status: next.join(",") });
+  };
+
+  return (
+    <div className="flex flex-col gap-3 mb-4">
+      <div className="relative">
+        <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500" />
+        <input
+          type="search"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder="Search invoices by title or memo…"
+          className="w-full pl-9 pr-3 py-2 rounded-lg bg-gray-900 border border-gray-800 text-sm text-gray-100 placeholder:text-gray-500 outline-none focus:border-indigo-500"
+        />
+      </div>
+
+      <div className="flex flex-wrap items-center gap-2">
+        {INVOICE_STATUS_FILTERS.map((status) => (
+          <button
+            key={status}
+            onClick={() => toggleStatus(status)}
+            className={`px-3 py-1 rounded-full text-xs font-medium border transition-colors ${
+              activeStatuses.includes(status)
+                ? "bg-indigo-600/20 border-indigo-500 text-indigo-300"
+                : "border-gray-700 text-gray-400 hover:text-gray-200"
+            }`}
+          >
+            {status}
+          </button>
+        ))}
+
+        <select
+          value={sort}
+          onChange={(e) => pushParams({ sort: e.target.value })}
+          className="ml-auto px-3 py-1.5 rounded-lg text-xs bg-gray-900 border border-gray-800 text-gray-300 outline-none"
+          aria-label="Sort invoices"
+        >
+          {SORT_OPTIONS.map((opt) => (
+            <option key={opt.id} value={opt.id}>
+              {opt.label}
+            </option>
+          ))}
+        </select>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/invoices/InvoiceTable.tsx b/src/components/invoices/InvoiceTable.tsx
new file mode 100644
index 0000000..68b6d8f
--- /dev/null
+++ b/src/components/invoices/InvoiceTable.tsx
@@ -0,0 +1,30 @@
+import Link from "next/link";
+import type { Invoice } from "@stellar-split/sdk";
+import InvoiceCard from "@/components/InvoiceCard";
+
+interface Props {
+  invoices: Invoice[];
+  emptyMessage?: string;
+}
+
+/**
+ * InvoiceTable — server-rendered invoice list. Deliberately has no
+ * "use client": it receives already-filtered/sorted data as a prop and only
+ * renders markup, so it can stream from the server as part of the RSC
+ * invoice list page without shipping any extra client JS.
+ */
+export default function InvoiceTable({ invoices, emptyMessage = "No invoices found." }: Props) {
+  if (invoices.length === 0) {
+    return <p className="text-gray-500 text-sm py-8 text-center">{emptyMessage}</p>;
+  }
+
+  return (
+    <div className="flex flex-col gap-3">
+      {invoices.map((invoice) => (
+        <Link key={invoice.id} href={`/invoice/${invoice.id}`} className="block">
+          <InvoiceCard invoice={invoice} />
+        </Link>
+      ))}
+    </div>
+  );
+}
diff --git a/src/hooks/useFolders.ts b/src/hooks/useFolders.ts
new file mode 100644
index 0000000..4b8df9c
--- /dev/null
+++ b/src/hooks/useFolders.ts
@@ -0,0 +1,197 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import type { Folder } from "@/lib/folders";
+
+interface FolderListResponse {
+  folders: Folder[];
+  byInvoice: Record<string, string[]>;
+}
+
+/**
+ * Module-level cache shared by every consumer, mirroring useInvoiceTags — the
+ * folder list is read by the sidebar and the invoice list filter at once.
+ */
+let cache: FolderListResponse | null = null;
+let inflight: Promise<FolderListResponse> | null = null;
+const subscribers = new Set<(data: FolderListResponse) => void>();
+
+function publish(data: FolderListResponse) {
+  cache = data;
+  subscribers.forEach((fn) => fn(data));
+}
+
+async function fetchFolderList(force = false): Promise<FolderListResponse> {
+  if (!force && cache) return cache;
+  if (!force && inflight) return inflight;
+
+  inflight = fetch("/api/folders")
+    .then((res) => {
+      if (!res.ok) throw new Error(`Failed to load folders (${res.status})`);
+      return res.json();
+    })
+    .then((data: Partial<FolderListResponse>) => {
+      const normalized: FolderListResponse = {
+        folders: Array.isArray(data.folders) ? data.folders : [],
+        byInvoice: data.byInvoice ?? {},
+      };
+      publish(normalized);
+      return normalized;
+    })
+    .finally(() => {
+      inflight = null;
+    });
+
+  return inflight;
+}
+
+/** Test seam — drops the shared cache between tests. */
+export function __resetFolderCache(): void {
+  cache = null;
+  inflight = null;
+}
+
+export interface UseFoldersResult {
+  folders: Folder[];
+  /** invoiceId → folder ids, for filtering a list without per-invoice requests. */
+  foldersByInvoice: Record<string, string[]>;
+  loading: boolean;
+  error: string | null;
+  refresh: () => Promise<void>;
+  createFolder: (name: string) => Promise<Folder>;
+  renameFolder: (id: string, name: string) => Promise<void>;
+  deleteFolder: (id: string) => Promise<void>;
+  /** Replace one invoice's folder membership; updates the UI optimistically. */
+  assignFolders: (invoiceId: string, folderIds: string[]) => Promise<string[]>;
+}
+
+/**
+ * useFolders — fetches and caches the folder list + membership map, and
+ * writes changes back through the /api/folders endpoints.
+ */
+export function useFolders(): UseFoldersResult {
+  const [data, setData] = useState<FolderListResponse>(
+    () => cache ?? { folders: [], byInvoice: {} }
+  );
+  const [loading, setLoading] = useState(!cache);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let active = true;
+    const onPublish = (next: FolderListResponse) => {
+      if (active) setData(next);
+    };
+    subscribers.add(onPublish);
+
+    fetchFolderList()
+      .then(() => active && setError(null))
+      .catch((err) => active && setError(err instanceof Error ? err.message : String(err)))
+      .finally(() => active && setLoading(false));
+
+    return () => {
+      active = false;
+      subscribers.delete(onPublish);
+    };
+  }, []);
+
+  const refresh = useCallback(async () => {
+    setLoading(true);
+    try {
+      await fetchFolderList(true);
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const createFolder = useCallback(async (name: string) => {
+    const res = await fetch("/api/folders", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ name }),
+    });
+    if (!res.ok) throw new Error(`Failed to create folder (${res.status})`);
+    const body = (await res.json()) as { folder: Folder };
+    const previous = cache ?? { folders: [], byInvoice: {} };
+    publish({ ...previous, folders: [...previous.folders, body.folder] });
+    return body.folder;
+  }, []);
+
+  const renameFolderFn = useCallback(async (id: string, name: string) => {
+    const previous = cache ?? { folders: [], byInvoice: {} };
+    publish({
+      ...previous,
+      folders: previous.folders.map((f) => (f.id === id ? { ...f, name } : f)),
+    });
+
+    const res = await fetch(`/api/folders/${id}`, {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ name }),
+    });
+    if (!res.ok) {
+      publish(previous);
+      throw new Error(`Failed to rename folder (${res.status})`);
+    }
+  }, []);
+
+  const deleteFolderFn = useCallback(async (id: string) => {
+    const previous = cache ?? { folders: [], byInvoice: {} };
+    const nextByInvoice = { ...previous.byInvoice };
+    for (const invoiceId of Object.keys(nextByInvoice)) {
+      nextByInvoice[invoiceId] = nextByInvoice[invoiceId].filter((f) => f !== id);
+    }
+    publish({
+      folders: previous.folders.filter((f) => f.id !== id),
+      byInvoice: nextByInvoice,
+    });
+
+    const res = await fetch(`/api/folders/${id}`, { method: "DELETE" });
+    if (!res.ok) {
+      publish(previous);
+      throw new Error(`Failed to delete folder (${res.status})`);
+    }
+  }, []);
+
+  const assignFolders = useCallback(async (invoiceId: string, folderIds: string[]) => {
+    const previous = cache ?? { folders: [], byInvoice: {} };
+
+    const optimisticByInvoice = { ...previous.byInvoice, [invoiceId]: folderIds };
+    publish({ ...previous, byInvoice: optimisticByInvoice });
+
+    try {
+      const res = await fetch(`/api/invoices/${invoiceId}/folders`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ folderIds }),
+      });
+      if (!res.ok) throw new Error(`Failed to save folders (${res.status})`);
+
+      const body = (await res.json()) as { folderIds?: string[] };
+      const saved = body.folderIds ?? folderIds;
+
+      const confirmedByInvoice = { ...previous.byInvoice, [invoiceId]: saved };
+      publish({ ...previous, byInvoice: confirmedByInvoice });
+      return saved;
+    } catch (err) {
+      publish(previous);
+      throw err;
+    }
+  }, []);
+
+  return {
+    folders: data.folders,
+    foldersByInvoice: data.byInvoice,
+    loading,
+    error,
+    refresh,
+    createFolder,
+    renameFolder: renameFolderFn,
+    deleteFolder: deleteFolderFn,
+    assignFolders,
+  };
+}
+
+export default useFolders;
diff --git a/src/hooks/useInvoices.ts b/src/hooks/useInvoices.ts
new file mode 100644
index 0000000..e78d3ac
--- /dev/null
+++ b/src/hooks/useInvoices.ts
@@ -0,0 +1,99 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import type { Invoice } from "@stellar-split/sdk";
+import {
+  clearInvoiceCache,
+  getCachedInvoices,
+  putCachedInvoices,
+  QuotaExceededCacheError,
+} from "@/lib/db/invoiceCache";
+import { useToast } from "@/contexts/ToastContext";
+
+export interface UseInvoicesResult {
+  invoices: Invoice[];
+  /** True until either the cache or the network has produced a first result. */
+  loading: boolean;
+  /** True while the network request is in flight, even after cached data painted. */
+  refreshing: boolean;
+  error: string | null;
+  /** Wipes the IndexedDB cache; the next render still shows in-memory invoices. */
+  clearCache: () => Promise<void>;
+}
+
+/**
+ * useInvoices — cache-then-network invoice list for a wallet address.
+ *
+ * On mount, cached invoices (if any) render immediately from IndexedDB while
+ * the API request is in flight. When the API responds it becomes the
+ * rendered list and is written back to the cache for the next cold load.
+ */
+export function useInvoices(publicKey: string | null | undefined): UseInvoicesResult {
+  const [invoices, setInvoices] = useState<Invoice[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const toast = useToast();
+
+  useEffect(() => {
+    let active = true;
+
+    if (!publicKey) {
+      setInvoices([]);
+      setLoading(false);
+      setRefreshing(false);
+      return;
+    }
+
+    setLoading(true);
+    setRefreshing(true);
+
+    getCachedInvoices(publicKey).then((cached) => {
+      if (!active) return;
+      if (cached.length > 0) {
+        setInvoices(cached);
+        setLoading(false);
+      }
+    });
+
+    fetch(`/api/invoices?publicKey=${encodeURIComponent(publicKey)}`)
+      .then((res) => {
+        if (!res.ok) throw new Error(`Failed to fetch invoices (${res.status})`);
+        return res.json() as Promise<{ invoices: Invoice[] }>;
+      })
+      .then(async (data) => {
+        if (!active) return;
+        setInvoices(data.invoices);
+        setError(null);
+        try {
+          await putCachedInvoices(publicKey, data.invoices);
+        } catch (err) {
+          if (err instanceof QuotaExceededCacheError) {
+            toast.info("Storage is full — invoice caching is disabled for this session.");
+          }
+        }
+      })
+      .catch((err) => {
+        if (active) setError(err instanceof Error ? err.message : String(err));
+      })
+      .finally(() => {
+        if (active) {
+          setLoading(false);
+          setRefreshing(false);
+        }
+      });
+
+    return () => {
+      active = false;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [publicKey]);
+
+  const clearCache = useCallback(async () => {
+    await clearInvoiceCache();
+  }, []);
+
+  return { invoices, loading, refreshing, error, clearCache };
+}
+
+export default useInvoices;
diff --git a/src/lib/csp.ts b/src/lib/csp.ts
new file mode 100644
index 0000000..4a1cc83
--- /dev/null
+++ b/src/lib/csp.ts
@@ -0,0 +1,40 @@
+/**
+ * Content-Security-Policy — built per-request in middleware so `script-src`
+ * and `style-src` can carry a fresh nonce every time (defeats injected
+ * <script> tags that don't know the nonce, without resorting to 'unsafe-inline').
+ */
+import { headers } from "next/headers";
+
+export const CSP_NONCE_HEADER = "x-nonce";
+
+export interface BuildCSPOptions {
+  /**
+   * The embed route (`/embed/:id`) is designed to be framed by third-party
+   * sites — it sets X-Frame-Options: ALLOWALL in next.config.js — so its CSP
+   * must not send frame-ancestors 'none', which would override that in
+   * browsers that honour CSP over the legacy header.
+   */
+  allowFraming?: boolean;
+}
+
+export function buildCSP(nonce: string, { allowFraming = false }: BuildCSPOptions = {}): string {
+  const directives = [
+    `default-src 'self'`,
+    `script-src 'self' 'nonce-${nonce}' 'strict-dynamic'`,
+    `style-src 'self' 'nonce-${nonce}' 'unsafe-inline'`,
+    `img-src 'self' data: blob: https://www.gravatar.com`,
+    `font-src 'self' data:`,
+    `connect-src 'self' https://*.stellar.org https://horizon-testnet.stellar.org https://horizon.stellar.org https://soroban-testnet.stellar.org`,
+    `object-src 'none'`,
+    `base-uri 'self'`,
+    `form-action 'self'`,
+    allowFraming ? `frame-ancestors *` : `frame-ancestors 'none'`,
+    `upgrade-insecure-requests`,
+  ];
+  return directives.join("; ");
+}
+
+/** Reads the per-request nonce set by middleware. Server Components only. */
+export function getNonce(): string | undefined {
+  return headers().get(CSP_NONCE_HEADER) ?? undefined;
+}
diff --git a/src/lib/db/invoiceCache.ts b/src/lib/db/invoiceCache.ts
new file mode 100644
index 0000000..e44494c
--- /dev/null
+++ b/src/lib/db/invoiceCache.ts
@@ -0,0 +1,121 @@
+/**
+ * IndexedDB-backed cache for the invoice list, replacing the old
+ * localStorage-based approach: async (no main-thread jank on large lists),
+ * not capped at ~5 MB, and queryable by index instead of a linear scan.
+ *
+ * Invoices are on-chain and have no `updatedAt` field, so "newer" is decided
+ * by content, not a timestamp: every successful network fetch simply
+ * overwrites the cached row for that id (the network is always the source
+ * of truth — the cache only exists to paint something before it responds).
+ */
+import { openDB, type IDBPDatabase } from "idb";
+import type { Invoice } from "@stellar-split/sdk";
+import { DB_NAME, DB_VERSION, INVOICES_STORE, type CachedInvoice, type InvoiceCacheDBSchema } from "./schema";
+
+let dbPromise: Promise<IDBPDatabase<InvoiceCacheDBSchema>> | null = null;
+
+function getDB(): Promise<IDBPDatabase<InvoiceCacheDBSchema>> {
+  if (!dbPromise) {
+    dbPromise = openDB<InvoiceCacheDBSchema>(DB_NAME, DB_VERSION, {
+      upgrade(db) {
+        if (!db.objectStoreNames.contains(INVOICES_STORE)) {
+          const store = db.createObjectStore(INVOICES_STORE, { keyPath: "id" });
+          store.createIndex("by-status", "status");
+          store.createIndex("by-owner", "ownerAddress");
+        }
+      },
+    });
+  }
+  return dbPromise;
+}
+
+export class QuotaExceededCacheError extends Error {
+  constructor(cause: unknown) {
+    super("IndexedDB quota exceeded while caching invoices");
+    this.name = "QuotaExceededCacheError";
+    this.cause = cause;
+  }
+}
+
+function isQuotaExceeded(err: unknown): boolean {
+  return (
+    err instanceof DOMException &&
+    (err.name === "QuotaExceededError" || err.code === 22)
+  );
+}
+
+/** Cached invoices for one owner address, most recently cached first. */
+export async function getCachedInvoices(ownerAddress: string): Promise<Invoice[]> {
+  try {
+    const db = await getDB();
+    const all = await db.getAllFromIndex(INVOICES_STORE, "by-owner", ownerAddress);
+    return all.sort((a, b) => b.cachedAt - a.cachedAt).map((row) => row.invoice);
+  } catch {
+    // Cache read failures (private browsing, disabled storage) degrade to
+    // "no cache" rather than blocking the page.
+    return [];
+  }
+}
+
+/**
+ * Writes a page of invoices to the cache. Throws QuotaExceededCacheError on
+ * quota errors so the caller can fall back to network-only and surface a
+ * non-blocking warning, instead of losing the fetch entirely.
+ */
+export async function putCachedInvoices(ownerAddress: string, invoices: Invoice[]): Promise<void> {
+  if (invoices.length === 0) return;
+  try {
+    const db = await getDB();
+    const tx = db.transaction(INVOICES_STORE, "readwrite");
+    const now = Date.now();
+    await Promise.all([
+      ...invoices.map((invoice) => {
+        const row: CachedInvoice = {
+          id: invoice.id,
+          ownerAddress,
+          status: invoice.status,
+          cachedAt: now,
+          invoice,
+        };
+        return tx.store.put(row);
+      }),
+      tx.done,
+    ]);
+  } catch (err) {
+    if (isQuotaExceeded(err)) {
+      throw new QuotaExceededCacheError(err);
+    }
+    // Any other cache write failure is non-fatal — the API response still renders.
+  }
+}
+
+/** All invoices in the cache matching a given status, across all owners. */
+export async function getCachedInvoicesByStatus(status: string): Promise<Invoice[]> {
+  try {
+    const db = await getDB();
+    const all = await db.getAllFromIndex(INVOICES_STORE, "by-status", status);
+    return all.map((row) => row.invoice);
+  } catch {
+    return [];
+  }
+}
+
+/** Wipes every stored invoice without requiring a hard page reload. */
+export async function clearInvoiceCache(): Promise<void> {
+  if (dbPromise) {
+    const db = await dbPromise;
+    db.close();
+  }
+  dbPromise = null;
+  await new Promise<void>((resolve, reject) => {
+    const req = indexedDB.deleteDatabase(DB_NAME);
+    req.onsuccess = () => resolve();
+    req.onerror = () => reject(req.error);
+    req.onblocked = () => resolve();
+  });
+}
+
+/** Test seam — drops the open DB handle so tests get a fresh connection. */
+export function __resetInvoiceCacheForTests(): void {
+  dbPromise = null;
+}
diff --git a/src/lib/db/schema.ts b/src/lib/db/schema.ts
new file mode 100644
index 0000000..d7a913f
--- /dev/null
+++ b/src/lib/db/schema.ts
@@ -0,0 +1,31 @@
+/**
+ * Schema for the client-side invoice cache — object store names, key paths
+ * and index definitions, kept separate from invoiceCache.ts so the shape of
+ * the store is easy to find without wading through cache logic.
+ */
+import type { DBSchema } from "idb";
+import type { Invoice } from "@stellar-split/sdk";
+
+export const DB_NAME = "stellarsplit-invoice-cache";
+export const DB_VERSION = 1;
+export const INVOICES_STORE = "invoices";
+
+/** A cached invoice, tagged with the owner it was fetched for and when it landed in the cache. */
+export interface CachedInvoice {
+  id: string;
+  ownerAddress: string;
+  status: Invoice["status"] | string;
+  cachedAt: number;
+  invoice: Invoice;
+}
+
+export interface InvoiceCacheDBSchema extends DBSchema {
+  [INVOICES_STORE]: {
+    key: string;
+    value: CachedInvoice;
+    indexes: {
+      "by-status": string;
+      "by-owner": string;
+    };
+  };
+}
diff --git a/src/lib/folders.ts b/src/lib/folders.ts
new file mode 100644
index 0000000..ad0685d
--- /dev/null
+++ b/src/lib/folders.ts
@@ -0,0 +1,112 @@
+/**
+ * folders — named invoice groups (collections).
+ *
+ * Invoices are on-chain and have no room for user metadata, so folders and
+ * their membership are kept off-chain keyed by folder/invoice id — the same
+ * approach `invoiceTags.ts` uses for tags.
+ */
+import { z } from "zod";
+
+export const MAX_FOLDER_NAME_LENGTH = 60;
+export const MAX_FOLDERS = 200;
+
+export interface Folder {
+  id: string;
+  name: string;
+  createdAt: number;
+}
+
+export function normalizeFolderName(raw: string): string {
+  return raw.trim().replace(/\s+/g, " ").slice(0, MAX_FOLDER_NAME_LENGTH);
+}
+
+export const FolderNameSchema = z.object({
+  name: z.string().min(1, "Name is required").max(MAX_FOLDER_NAME_LENGTH, "Name is too long"),
+});
+
+export const FolderMembershipSchema = z.object({
+  folderIds: z.array(z.string()).max(MAX_FOLDERS),
+});
+
+export type FolderNamePayload = z.infer<typeof FolderNameSchema>;
+export type FolderMembershipPayload = z.infer<typeof FolderMembershipSchema>;
+
+// ── Storage ────────────────────────────────────────────────────────────────
+// In-memory for now, matching the existing tag/splitMeta stores. Swapping
+// this for a database only requires reimplementing the functions below.
+
+const foldersById = new Map<string, Folder>();
+/** invoiceId → set of folder ids it belongs to. */
+const membership = new Map<string, Set<string>>();
+let nextId = 1;
+
+export function listFolders(): Folder[] {
+  return Array.from(foldersById.values()).sort((a, b) => a.createdAt - b.createdAt);
+}
+
+export function getFolder(id: string): Folder | undefined {
+  return foldersById.get(id);
+}
+
+export function createFolder(name: string): Folder {
+  const normalized = normalizeFolderName(name);
+  const folder: Folder = { id: String(nextId++), name: normalized, createdAt: Date.now() };
+  foldersById.set(folder.id, folder);
+  return folder;
+}
+
+export function renameFolder(id: string, name: string): Folder | undefined {
+  const folder = foldersById.get(id);
+  if (!folder) return undefined;
+  folder.name = normalizeFolderName(name);
+  return folder;
+}
+
+export function deleteFolder(id: string): boolean {
+  if (!foldersById.delete(id)) return false;
+  for (const ids of Array.from(membership.values())) {
+    ids.delete(id);
+  }
+  return true;
+}
+
+/** Every folder id a given invoice belongs to. */
+export function getFoldersForInvoice(invoiceId: string): string[] {
+  return Array.from(membership.get(invoiceId) ?? []);
+}
+
+/** Replace the full set of folders an invoice belongs to. */
+export function setFoldersForInvoice(invoiceId: string, folderIds: readonly string[]): string[] {
+  const valid = folderIds.filter((id) => foldersById.has(id));
+  if (valid.length === 0) {
+    membership.delete(invoiceId);
+  } else {
+    membership.set(invoiceId, new Set(valid));
+  }
+  return valid;
+}
+
+/** Map of invoiceId → folder ids, for filtering an invoice list in one round trip. */
+export function getMembershipMap(): Record<string, string[]> {
+  const out: Record<string, string[]> = {};
+  for (const [invoiceId, ids] of Array.from(membership.entries())) {
+    out[invoiceId] = Array.from(ids);
+  }
+  return out;
+}
+
+/** Every invoice id currently assigned to a folder. */
+export function getInvoiceIdsInFolder(folderId: string): string[] {
+  const out: string[] = [];
+  for (const [invoiceId, ids] of Array.from(membership.entries())) {
+    if (ids.has(folderId)) out.push(invoiceId);
+  }
+  return out;
+}
+
+/** Test seam — clears all stored folders and membership. */
+export function __resetFolderStore(): void {
+  foldersById.clear();
+  membership.clear();
+  nextId = 1;
+}
diff --git a/src/lib/invoices/listFilters.ts b/src/lib/invoices/listFilters.ts
new file mode 100644
index 0000000..44634a0
--- /dev/null
+++ b/src/lib/invoices/listFilters.ts
@@ -0,0 +1,46 @@
+/**
+ * Status/search filtering for the RSC invoice list page.
+ *
+ * Deliberately self-contained rather than importing from
+ * `@/lib/dashboardFilters` — several of its status/search helpers reference
+ * a `DashboardInvoice` type that isn't defined anywhere in that module, so
+ * importing them would carry a pre-existing type error into this page.
+ */
+import type { Invoice } from "@stellar-split/sdk";
+import { INVOICE_STATUS_FILTERS, type InvoiceStatusFilter } from "@/lib/dashboardFilters";
+
+export { INVOICE_STATUS_FILTERS };
+export type { InvoiceStatusFilter };
+
+export function getDisplayStatus(
+  invoice: Invoice,
+  now = Math.floor(Date.now() / 1000)
+): InvoiceStatusFilter | "Refunded" {
+  if (invoice.status === "Released") return "Released";
+  if (invoice.status === "Refunded") return "Refunded";
+
+  const total = invoice.recipients.reduce((sum, r) => sum + r.amount, 0n);
+
+  if (invoice.deadline > 0 && invoice.deadline < now) return "Expired";
+  if (total > 0n && invoice.funded >= total) return "Funded";
+  if (invoice.funded > 0n) return "Partial";
+  return "Pending";
+}
+
+export function matchesStatuses(
+  invoice: Invoice,
+  selected: InvoiceStatusFilter[],
+  now = Math.floor(Date.now() / 1000)
+): boolean {
+  if (selected.length === 0) return true;
+  return selected.includes(getDisplayStatus(invoice, now) as InvoiceStatusFilter);
+}
+
+export function matchesQuery(invoice: Invoice, query: string): boolean {
+  const trimmed = query.trim();
+  if (!trimmed) return true;
+
+  const memo = (invoice as { memo?: string }).memo;
+  const haystack = `${invoice.title ?? ""} ${memo ?? ""}`.toLowerCase();
+  return haystack.includes(trimmed.toLowerCase());
+}
diff --git a/src/lib/stellar/horizonServer.ts b/src/lib/stellar/horizonServer.ts
new file mode 100644
index 0000000..64249bb
--- /dev/null
+++ b/src/lib/stellar/horizonServer.ts
@@ -0,0 +1,65 @@
+/**
+ * Server-only invoice fetching, shared by the RSC invoice list page and
+ * `/api/invoices`. Runs the same scan/filter logic either as a direct
+ * function call from a Server Component (no HTTP round trip) or from the
+ * route handler (for the client-side infinite-scroll dashboard).
+ */
+import { splitClient } from "@/lib/stellar";
+import type { Invoice } from "@stellar-split/sdk";
+
+const DEFAULT_PAGE_SIZE = 20;
+const MAX_PAGE_SIZE = 50;
+
+export interface FetchInvoicesOptions {
+  cursor?: string | null;
+  limit?: number;
+  /** Case-insensitive prefix match against title/memo. */
+  q?: string;
+}
+
+export interface FetchInvoicesResult {
+  invoices: Invoice[];
+  nextCursor: string | null;
+}
+
+/**
+ * Scans invoice ids starting after `cursor`, returning up to `limit`
+ * invoices owned by (created by or a recipient of) `publicKey`.
+ */
+export async function fetchInvoicesForAddress(
+  publicKey: string,
+  { cursor, limit: limitParam, q: qParam }: FetchInvoicesOptions = {}
+): Promise<FetchInvoicesResult> {
+  const limit = Math.min(Math.max(1, limitParam ?? DEFAULT_PAGE_SIZE), MAX_PAGE_SIZE);
+  const q = (qParam ?? "").trim().toLowerCase();
+  const startId = cursor ? parseInt(cursor, 10) + 1 : 1;
+
+  const results: Invoice[] = [];
+
+  for (let id = startId; results.length < limit; id++) {
+    if (id > startId + limit * 10) break;
+
+    try {
+      const inv = await splitClient.getInvoice(String(id));
+      const mine =
+        inv.creator === publicKey || inv.recipients.some((r) => r.address === publicKey);
+
+      if (mine) {
+        if (q) {
+          const memo = (inv as { memo?: string }).memo;
+          const matchesQuery =
+            (inv.title || "").toLowerCase().startsWith(q) || (memo || "").toLowerCase().startsWith(q);
+          if (matchesQuery) results.push(inv);
+        } else {
+          results.push(inv);
+        }
+      }
+    } catch {
+      // splitClient throws when the invoice id does not exist — end of list.
+      return { invoices: results, nextCursor: null };
+    }
+  }
+
+  const nextCursor = results.length === limit ? String(results[results.length - 1].id) : null;
+  return { invoices: results, nextCursor };
+}
diff --git a/src/lib/stores/foldersStore.ts b/src/lib/stores/foldersStore.ts
new file mode 100644
index 0000000..a490978
--- /dev/null
+++ b/src/lib/stores/foldersStore.ts
@@ -0,0 +1,32 @@
+import { create } from "zustand";
+import { devtools, persist } from "zustand/middleware";
+
+interface FoldersUIState {
+  /** Collapsed/expanded state of the folder sidebar, persisted across reloads. */
+  sidebarCollapsed: boolean;
+}
+
+interface FoldersUIActions {
+  toggleSidebarCollapsed: () => void;
+}
+
+export const useFoldersStore = create<FoldersUIState & FoldersUIActions>()(
+  devtools(
+    persist(
+      (set) => ({
+        sidebarCollapsed: false,
+        toggleSidebarCollapsed: () =>
+          set(
+            (s) => ({ sidebarCollapsed: !s.sidebarCollapsed }),
+            false,
+            "folders/toggleSidebarCollapsed"
+          ),
+      }),
+      { name: "stellarsplit_folders_ui" }
+    ),
+    {
+      name: "FoldersStore",
+      enabled: process.env.NODE_ENV === "development",
+    }
+  )
+);
diff --git a/src/middleware.ts b/src/middleware.ts
new file mode 100644
index 0000000..04e0082
--- /dev/null
+++ b/src/middleware.ts
@@ -0,0 +1,38 @@
+import { NextRequest, NextResponse } from "next/server";
+import { buildCSP, CSP_NONCE_HEADER } from "@/lib/csp";
+
+/**
+ * Generates a fresh CSP nonce per request and forwards it two ways:
+ *  - as a request header, so Server Components can read it via next/headers
+ *    and stamp it onto any inline <script>/<style> tags they render
+ *  - as the Content-Security-Policy response header itself
+ *
+ * See https://nextjs.org/docs/app/building-your-application/configuring/content-security-policy
+ */
+export function middleware(request: NextRequest) {
+  const nonce = Buffer.from(crypto.randomUUID()).toString("base64");
+  const isEmbed = request.nextUrl.pathname.startsWith("/embed/");
+  const csp = buildCSP(nonce, { allowFraming: isEmbed });
+
+  const requestHeaders = new Headers(request.headers);
+  requestHeaders.set(CSP_NONCE_HEADER, nonce);
+  requestHeaders.set("Content-Security-Policy", csp);
+
+  const response = NextResponse.next({
+    request: { headers: requestHeaders },
+  });
+  response.headers.set("Content-Security-Policy", csp);
+
+  return response;
+}
+
+export const config = {
+  matcher: [
+    /*
+     * Skip static assets and image optimization files — they carry no
+     * inline scripts and re-running CSP generation for every asset request
+     * is pure overhead.
+     */
+    "/((?!_next/static|_next/image|favicon.ico|icons/|manifest.json|sw.js).*)",
+  ],
+};