diff --git a/apps/api/src/dashboard/routes.test.ts b/apps/api/src/dashboard/routes.test.ts
new file mode 100644
index 00000000..31d4aa8c
--- /dev/null
+++ b/apps/api/src/dashboard/routes.test.ts
@@ -0,0 +1,445 @@
+import assert from "node:assert/strict";
+import type { AddressInfo } from "node:net";
+import path from "node:path";
+import type { Server } from "node:http";
+import { after, afterEach, before, describe, mock, test } from "node:test";
+import { fileURLToPath } from "node:url";
+import { PGlite } from "@electric-sql/pglite";
+import { drizzle } from "drizzle-orm/pglite";
+import { migrate } from "drizzle-orm/pglite/migrator";
+import express, {
+    type NextFunction,
+    type Request,
+    type Response,
+} from "express";
+import {
+    createAccount,
+    createApiKey,
+    createMediaRecord,
+    getMediaRecord,
+    getSignature,
+    setDb,
+    type AccountUser,
+    type ApiKeyRecord,
+    type AppDb,
+} from "@/db";
+import * as schema from "../db/schema/index.js";
+import type { MedialitAuth } from "../auth/better-auth";
+import mediaService from "../media/service";
+import { mediaKind } from "../media/kind";
+import { createDashboardRouter } from "./routes";
+
+const PUBLIC_API_URL = "https://api.example.test";
+
+/* Sessions come from a test header instead of a cookie. */
+const fakeAuth = {
+    auth: {
+        api: {
+            getSession: async ({ headers }: { headers: Headers }) => {
+                const userId = headers.get("x-test-user");
+                return userId ? { user: { id: userId } } : null;
+            },
+        },
+    },
+    publicApiUrl: PUBLIC_API_URL,
+} as unknown as MedialitAuth;
+
+let server: Server;
+let baseUrl: string;
+let owner: AccountUser;
+let stranger: AccountUser;
+let ownerApp: ApiKeyRecord;
+let strangerApp: ApiKeyRecord;
+
+/* Covers every kind, including the mixed-case types the old SQL missed. */
+const ownerFiles = [
+    { mediaId: "img-png", mimeType: "image/png", size: 100 },
+    { mediaId: "img-upper", mimeType: "IMAGE/JPEG", size: 200 },
+    { mediaId: "vid-mp4", mimeType: "video/mp4", size: 1000 },
+    { mediaId: "pdf-lower", mimeType: "application/pdf", size: 300 },
+    { mediaId: "pdf-upper", mimeType: "application/PDF", size: 400 },
+    { mediaId: "audio-mp3", mimeType: "audio/mpeg", size: 50 },
+    { mediaId: "text-plain", mimeType: "text/plain", size: 5 },
+];
+
+async function addMedia(
+    user: AccountUser,
+    app: ApiKeyRecord,
+    file: { mediaId: string; mimeType: string; size: number },
+    options: { temp?: boolean; access?: "public" | "private" } = {},
+) {
+    await createMediaRecord({
+        fileName: `${file.mediaId}.bin`,
+        mediaId: file.mediaId,
+        userId: user.id,
+        apikey: app.key,
+        originalFileName: `${file.mediaId}.bin`,
+        mimeType: file.mimeType,
+        size: file.size,
+        thumbnailGenerated: false,
+        accessControl: options.access ?? "public",
+        temp: options.temp ?? false,
+    });
+}
+
+function call(
+    method: string,
+    route: string,
+    options: { user?: AccountUser | null; body?: unknown } = {},
+) {
+    const user = options.user === undefined ? owner : options.user;
+    const headers: Record<string, string> = {};
+    if (user) headers["x-test-user"] = user.id;
+    if (options.body !== undefined)
+        headers["content-type"] = "application/json";
+    return fetch(`${baseUrl}${route}`, {
+        method,
+        headers,
+        body:
+            options.body === undefined
+                ? undefined
+                : JSON.stringify(options.body),
+    });
+}
+
+async function json(
+    method: string,
+    route: string,
+    options: { user?: AccountUser | null; body?: unknown } = {},
+) {
+    const response = await call(method, route, options);
+    return { status: response.status, body: await response.json() };
+}
+
+before(async () => {
+    const client = new PGlite();
+    const db = drizzle(client, { schema });
+    await migrate(db, {
+        migrationsFolder: path.resolve(
+            path.dirname(fileURLToPath(import.meta.url)),
+            "../../drizzle",
+        ),
+    });
+    setDb(db as unknown as AppDb);
+
+    owner = await createAccount({ email: "owner@example.com" });
+    stranger = await createAccount({ email: "stranger@example.com" });
+    ownerApp = await createApiKey({ userId: owner.id, name: "Photos" });
+    strangerApp = await createApiKey({ userId: stranger.id, name: "Theirs" });
+
+    for (const file of ownerFiles) await addMedia(owner, ownerApp, file);
+    // Temporary uploads never count.
+    await addMedia(
+        owner,
+        ownerApp,
+        { mediaId: "temp-png", mimeType: "image/png", size: 9999 },
+        { temp: true },
+    );
+    await addMedia(stranger, strangerApp, {
+        mediaId: "stranger-png",
+        mimeType: "image/png",
+        size: 700,
+    });
+
+    const app = express();
+    app.use(express.json());
+    app.use(createDashboardRouter(fakeAuth));
+    app.use(
+        (error: Error, _req: Request, res: Response, _next: NextFunction) => {
+            res.status(500).json({ error: error.message });
+        },
+    );
+    server = app.listen(0);
+    await new Promise<void>((resolve) => server.once("listening", resolve));
+    baseUrl = `http://127.0.0.1:${(server.address() as AddressInfo).port}`;
+});
+
+after(async () => {
+    await new Promise<void>((resolve) => server.close(() => resolve()));
+});
+
+afterEach(() => {
+    mock.restoreAll();
+});
+
+describe("dashboard routes: session and ownership", () => {
+    test("rejects requests without a session", async () => {
+        for (const route of [
+            "/api/account",
+            "/api/apps",
+            "/api/apps/overview",
+            `/api/apps/${ownerApp.keyId}/media`,
+        ]) {
+            const response = await call("GET", route, { user: null });
+            assert.equal(response.status, 401, route);
+        }
+        const signature = await call(
+            "POST",
+            `/api/apps/${ownerApp.keyId}/media/signature`,
+            { user: null, body: {} },
+        );
+        assert.equal(signature.status, 401);
+    });
+
+    test("hides another user's app", async () => {
+        const keyId = strangerApp.keyId;
+        const attempts: Array<[string, string, unknown?]> = [
+            ["GET", `/api/apps/${keyId}`],
+            ["GET", `/api/apps/${keyId}/summary`],
+            ["GET", `/api/apps/${keyId}/media`],
+            ["GET", `/api/apps/${keyId}/media/count`],
+            ["GET", `/api/apps/${keyId}/media/stranger-png`],
+            ["POST", `/api/apps/${keyId}/media/signature`, {}],
+            ["POST", `/api/apps/${keyId}/media/stranger-png/seal`, {}],
+            [
+                "POST",
+                `/api/apps/${keyId}/media/delete`,
+                { mediaIds: ["stranger-png"] },
+            ],
+        ];
+        for (const [method, route, body] of attempts) {
+            const response = await json(method, route, { body });
+            assert.equal(response.status, 404, `${method} ${route}`);
+            assert.equal(response.body.error, "Apikey not found");
+        }
+        assert.notEqual(
+            await getMediaRecord({
+                userId: stranger.id,
+                apikey: strangerApp.key,
+                mediaId: "stranger-png",
+            }),
+            null,
+        );
+    });
+});
+
+describe("dashboard routes: summaries", () => {
+    test("counts each kind once, whatever the type's case", async () => {
+        const { status, body } = await json(
+            "GET",
+            `/api/apps/${ownerApp.keyId}/summary`,
+        );
+        assert.equal(status, 200);
+        assert.equal(body.count, 7);
+        assert.equal(body.images, 2);
+        assert.equal(body.videos, 1);
+        assert.equal(body.pdfs, 2);
+        assert.equal(body.others, 2);
+        assert.equal(body.imageStorage, 300);
+        assert.equal(body.videoStorage, 1000);
+        assert.equal(body.pdfStorage, 700);
+        assert.equal(body.otherStorage, 55);
+        assert.equal(
+            body.imageStorage +
+                body.videoStorage +
+                body.pdfStorage +
+                body.otherStorage,
+            body.storage,
+        );
+        assert.equal(body.share, 100);
+    });
+
+    test("overview totals match the per-app summaries", async () => {
+        const { status, body } = await json("GET", "/api/apps/overview");
+        assert.equal(status, 200);
+        assert.equal(body.appCount, 2); // Photos and the default app
+        const photos = body.apps.find(
+            (app: { keyId: string }) => app.keyId === ownerApp.keyId,
+        );
+        const summary = await json(
+            "GET",
+            `/api/apps/${ownerApp.keyId}/summary`,
+        );
+        assert.deepEqual(photos, summary.body);
+        assert.equal(body.totalOthers, 2);
+        assert.equal(body.largestApp.keyId, ownerApp.keyId);
+    });
+});
+
+describe("dashboard routes: media list", () => {
+    test("tags each file with the kind the filters use", async () => {
+        const { status, body } = await json(
+            "GET",
+            `/api/apps/${ownerApp.keyId}/media?limit=100`,
+        );
+        assert.equal(status, 200);
+        assert.equal(body.length, 7);
+        for (const item of body) {
+            assert.equal(item.kind, mediaKind(item.mimeType), item.mediaId);
+        }
+
+        for (const kind of ["image", "video", "pdf", "other"]) {
+            const list = await json(
+                "GET",
+                `/api/apps/${ownerApp.keyId}/media?limit=100&kind=${kind}`,
+            );
+            const count = await json(
+                "GET",
+                `/api/apps/${ownerApp.keyId}/media/count?kind=${kind}`,
+            );
+            assert.ok(
+                list.body.every((item: { kind: string }) => item.kind === kind),
+                kind,
+            );
+            assert.equal(count.body.count, list.body.length, kind);
+        }
+    });
+
+    test("rejects a bad page or page size", async () => {
+        for (const query of [
+            "page=-1",
+            "page=0",
+            "page=1.5",
+            "page=abc",
+            "limit=0",
+            "limit=101",
+            "limit=-5",
+        ]) {
+            const response = await call(
+                "GET",
+                `/api/apps/${ownerApp.keyId}/media?${query}`,
+            );
+            assert.equal(response.status, 400, query);
+        }
+        const largest = await json(
+            "GET",
+            `/api/apps/${ownerApp.keyId}/media?page=2&limit=3&sort=largest`,
+        );
+        assert.equal(largest.status, 200);
+        assert.deepEqual(
+            largest.body.map((item: { mediaId: string }) => item.mediaId),
+            ["img-upper", "img-png", "audio-mp3"],
+        );
+    });
+
+    test("returns one file with its kind", async () => {
+        const { status, body } = await json(
+            "GET",
+            `/api/apps/${ownerApp.keyId}/media/pdf-upper`,
+        );
+        assert.equal(status, 200);
+        assert.equal(body.kind, "pdf");
+        assert.ok(body.file);
+    });
+});
+
+describe("dashboard routes: uploads", () => {
+    test("issues a signature bound to the app, with the upload endpoint", async () => {
+        const { status, body } = await json(
+            "POST",
+            `/api/apps/${ownerApp.keyId}/media/signature`,
+            { body: { group: "avatars" } },
+        );
+        assert.equal(status, 200);
+        assert.equal(body.endpoint, PUBLIC_API_URL);
+        const stored = await getSignature(body.signature);
+        assert.equal(stored?.apikey, ownerApp.key);
+        assert.equal(stored?.userId, owner.id);
+        assert.equal(stored?.group, "avatars");
+    });
+
+    test("rejects a signature with a bad group", async () => {
+        const response = await call(
+            "POST",
+            `/api/apps/${ownerApp.keyId}/media/signature`,
+            { body: { group: 42 } },
+        );
+        assert.equal(response.status, 400);
+    });
+
+    test("seals through the media service and maps its errors", async () => {
+        const missing = await json(
+            "POST",
+            `/api/apps/${ownerApp.keyId}/media/no-such-media/seal`,
+            { body: {} },
+        );
+        assert.equal(missing.status, 404);
+        assert.equal(missing.body.error, "Media not found");
+
+        const seal = mock.method(mediaService, "sealMedia", async () => ({
+            mediaId: "temp-png",
+            originalFileName: "temp-png.bin",
+            mimeType: "image/png",
+            size: 9999,
+            access: "public",
+            file: "https://files.example.test/temp-png",
+            thumbnail: "",
+        }));
+        const sealed = await json(
+            "POST",
+            `/api/apps/${ownerApp.keyId}/media/temp-png/seal`,
+            { body: {} },
+        );
+        assert.equal(sealed.status, 200);
+        assert.equal(sealed.body.kind, "image");
+        assert.deepEqual(seal.mock.calls[0].arguments[0], {
+            userId: owner.id,
+            apikey: ownerApp.key,
+            mediaId: "temp-png",
+        });
+    });
+});
+
+describe("dashboard routes: bulk delete", () => {
+    test("validates the id list", async () => {
+        for (const mediaIds of [
+            [],
+            [""],
+            [42],
+            "img-png",
+            Array.from({ length: 101 }, (_, index) => `id-${index}`),
+        ]) {
+            const response = await call(
+                "POST",
+                `/api/apps/${ownerApp.keyId}/media/delete`,
+                { body: { mediaIds } },
+            );
+            assert.equal(response.status, 400, JSON.stringify(mediaIds));
+        }
+    });
+
+    test("deletes what it finds and counts the rest as failed", async () => {
+        const removed: string[] = [];
+        mock.method(
+            mediaService,
+            "removeStoredFiles",
+            async (media: { mediaId: string }) => {
+                if (media.mediaId === "audio-mp3") {
+                    throw new Error("storage unavailable");
+                }
+                removed.push(media.mediaId);
+            },
+        );
+
+        const { status, body } = await json(
+            "POST",
+            `/api/apps/${ownerApp.keyId}/media/delete`,
+            {
+                body: {
+                    mediaIds: [
+                        "text-plain",
+                        "text-plain", // duplicates count once
+                        "audio-mp3", // storage fails
+                        "stranger-png", // another user's file
+                        "no-such-media",
+                    ],
+                },
+            },
+        );
+        assert.equal(status, 200);
+        assert.deepEqual(body, { deleted: 1, failed: 3 });
+        assert.deepEqual(removed, ["text-plain"]);
+
+        const lookup = (userId: string, apikey: string, mediaId: string) =>
+            getMediaRecord({ userId, apikey, mediaId });
+        assert.equal(await lookup(owner.id, ownerApp.key, "text-plain"), null);
+        assert.notEqual(
+            await lookup(owner.id, ownerApp.key, "audio-mp3"),
+            null,
+        );
+        assert.notEqual(
+            await lookup(stranger.id, strangerApp.key, "stranger-png"),
+            null,
+        );
+    });
+});
diff --git a/apps/api/src/dashboard/routes.ts b/apps/api/src/dashboard/routes.ts
index 90a45898..9ea56f82 100644
--- a/apps/api/src/dashboard/routes.ts
+++ b/apps/api/src/dashboard/routes.ts
@@ -5,14 +5,18 @@ import {
     type Response,
 } from "express";
 import { fromNodeHeaders } from "better-auth/node";
+import rateLimit from "express-rate-limit";
 import {
     createApiKey,
     findUserById,
     getApiKeyByKeyId,
     listApiKeys,
+    listApiKeyMediaSummaries,
     renameApiKey,
+    setDefaultApiKey,
     softDeleteApiKey,
     type AccountUser,
+    type ApiKeyMediaSummary,
     type ApiKeyRecord,
 } from "@/db";
 import type { MedialitAuth } from "../auth/better-auth";
@@ -23,7 +27,12 @@ import {
 } from "../billing/entitlements";
 import { deploymentMode } from "../billing/catalog";
 import mediaService from "../media/service";
+import { sealErrorStatus } from "../media/handlers";
+import { mediaKind, parseMediaKind } from "../media/kind";
 import { getMediaCount, getTotalSpace } from "../media/queries";
+import { validatePresigningOptions } from "../signature/handlers";
+import { generateSignature } from "../signature/service";
+import logger from "../services/log";
 
 function publicApp(row: ApiKeyRecord, includeSecret: boolean) {
     return {
@@ -34,29 +43,14 @@ function publicApp(row: ApiKeyRecord, includeSecret: boolean) {
     };
 }
 
-async function sessionUser(
-    auth: MedialitAuth,
-    req: Request,
-    res: Response,
-): Promise<AccountUser | null> {
-    const session = await auth.auth.api.getSession({
-        headers: fromNodeHeaders(req.headers),
-    });
-    if (!session?.user?.id) {
-        res.status(401).json({ error: "Unauthenticated" });
-        return null;
-    }
-    const user = await findUserById(session.user.id);
-    if (!user) {
-        res.status(401).json({ error: "Unauthenticated" });
-        return null;
-    }
-    return user;
+/* Set by the session middleware below for every /api/account and /api/apps
+   request, so handlers never resolve the session again. */
+function currentUser(res: Response): AccountUser {
+    return res.locals.user as AccountUser;
 }
 
-async function ownedApp(auth: MedialitAuth, req: Request, res: Response) {
-    const user = await sessionUser(auth, req, res);
-    if (!user) return null;
+async function ownedApp(req: Request, res: Response) {
+    const user = currentUser(res);
     const key = await getApiKeyByKeyId(user.id, String(req.params.keyId));
     if (!key) {
         res.status(404).json({ error: "Apikey not found" });
@@ -75,8 +69,149 @@ function catchAsync(
     };
 }
 
+const MAX_BULK_DELETE = 100;
+const MAX_PAGE_SIZE = 100;
+const DEFAULT_PAGE_SIZE = 10;
+const MAX_SEARCH_LENGTH = 200;
+
+/* Reads a whole number from a query value. A missing value gives the
+   fallback; anything else that isn't a whole number gives null. */
+function queryInteger(value: unknown, fallback: number): number | null {
+    if (value === undefined || value === "") return fallback;
+    if (typeof value !== "string" || !/^\d+$/.test(value)) return null;
+    return Number(value);
+}
+
+function querySearch(value: unknown): string | undefined {
+    if (typeof value !== "string") return undefined;
+    const search = value.trim().slice(0, MAX_SEARCH_LENGTH);
+    return search || undefined;
+}
+
+const MEDIA_SORTS = ["newest", "oldest", "name", "largest"] as const;
+type MediaSort = (typeof MEDIA_SORTS)[number];
+
+function parseMediaSort(value: unknown): MediaSort | undefined {
+    return MEDIA_SORTS.find((sort) => sort === value);
+}
+
+function withKind<T extends { mimeType?: string }>(media: T) {
+    return { ...media, kind: mediaKind(media.mimeType ?? "") };
+}
+
+type AppSummary = {
+    keyId: string;
+    name: string;
+    default: boolean;
+    count: number;
+    storage: number;
+    images: number;
+    videos: number;
+    pdfs: number;
+    others: number;
+    imageStorage: number;
+    videoStorage: number;
+    pdfStorage: number;
+    otherStorage: number;
+    lastUpload: Date | null;
+    /** Percent of the account's storage, one decimal place. */
+    share: number;
+};
+
+function summarizeApp(
+    key: ApiKeyRecord,
+    summary: ApiKeyMediaSummary | undefined,
+) {
+    return {
+        keyId: key.keyId,
+        name: key.name,
+        default: key.default,
+        count: summary?.count ?? 0,
+        storage: summary?.storage ?? 0,
+        images: summary?.images ?? 0,
+        videos: summary?.videos ?? 0,
+        pdfs: summary?.pdfs ?? 0,
+        others: summary?.others ?? 0,
+        imageStorage: summary?.imageStorage ?? 0,
+        videoStorage: summary?.videoStorage ?? 0,
+        pdfStorage: summary?.pdfStorage ?? 0,
+        otherStorage: summary?.otherStorage ?? 0,
+        lastUpload: summary?.lastUpload ?? null,
+    };
+}
+
+/* Per-app usage for every app the user has, newest upload first, with each
+   app's share of the account's storage. */
+async function loadAppSummaries(userId: string) {
+    const [keys, summaries] = await Promise.all([
+        listApiKeys(userId),
+        listApiKeyMediaSummaries(userId),
+    ]);
+    const summaryByKey = new Map(
+        summaries.map((summary) => [summary.apikey, summary]),
+    );
+    const apps = keys.map((key) =>
+        summarizeApp(key, summaryByKey.get(key.key)),
+    );
+    const totalStorage = apps.reduce((total, app) => total + app.storage, 0);
+    const storageShare = (storage: number) => {
+        if (!totalStorage) return 0;
+        return Number(((storage / totalStorage) * 100).toFixed(1));
+    };
+
+    apps.sort((left, right) => {
+        const leftUpload = left.lastUpload?.getTime() ?? 0;
+        const rightUpload = right.lastUpload?.getTime() ?? 0;
+        return rightUpload - leftUpload;
+    });
+
+    return apps.map(
+        (app): AppSummary => ({ ...app, share: storageShare(app.storage) }),
+    );
+}
+
+/* Dashboard budget per signed-in user. A person clicking through the UI makes
+   far fewer calls than an integration, so this is separate from the API-key
+   limit. Keyed by user, not IP, so users behind one NAT don't share a bucket. */
+const dashboardLimiter = rateLimit({
+    windowMs: 60_000,
+    max: 300,
+    standardHeaders: true,
+    legacyHeaders: false,
+    keyGenerator: (_req, res) => `user:${currentUser(res).id}`,
+    message: {
+        error: "too_many_requests",
+        error_description: "Too many requests.",
+    },
+});
+
 export function createDashboardRouter(auth: MedialitAuth) {
     const router = Router();
+
+    /* Resolve the session once, before the limiter so it can key on the
+       user. Handlers read the user from res.locals. */
+    router.use(
+        ["/api/account", "/api/apps"],
+        async (req: Request, res: Response, next: NextFunction) => {
+            try {
+                const session = await auth.auth.api.getSession({
+                    headers: fromNodeHeaders(req.headers),
+                });
+                const user = session?.user?.id
+                    ? await findUserById(session.user.id)
+                    : null;
+                if (!user) {
+                    res.status(401).json({ error: "Unauthenticated" });
+                    return;
+                }
+                res.locals.user = user;
+                next();
+            } catch (error) {
+                next(error);
+            }
+        },
+        dashboardLimiter,
+    );
     for (const method of ["get", "post", "patch", "delete"] as const) {
         const original = router[method].bind(router);
         (router as any)[method] = (
@@ -85,9 +220,8 @@ export function createDashboardRouter(auth: MedialitAuth) {
         ) => original(path, catchAsync(handler));
     }
 
-    router.get("/api/account", async (req, res) => {
-        const user = await sessionUser(auth, req, res);
-        if (!user) return;
+    router.get("/api/account", async (_req, res) => {
+        const user = currentUser(res);
         const account = await resolveAccountBilling(user);
         res.json({
             id: user.id,
@@ -101,23 +235,62 @@ export function createDashboardRouter(auth: MedialitAuth) {
         });
     });
 
-    router.get("/api/apps", async (req, res) => {
-        const user = await sessionUser(auth, req, res);
-        if (!user) return;
-        const rows = await listApiKeys(user.id);
+    router.get("/api/apps", async (_req, res) => {
+        const rows = await listApiKeys(currentUser(res).id);
         res.json(rows.map((row) => publicApp(row, false)));
     });
 
+    // Session-only dashboard data; the public OpenAPI spec covers customer API routes.
+    router.get("/api/apps/overview", async (_req, res) => {
+        const apps = await loadAppSummaries(currentUser(res).id);
+        const totals = apps.reduce(
+            (result, app) => ({
+                files: result.files + app.count,
+                storage: result.storage + app.storage,
+                images: result.images + app.images,
+                videos: result.videos + app.videos,
+                pdfs: result.pdfs + app.pdfs,
+                others: result.others + app.others,
+            }),
+            { files: 0, storage: 0, images: 0, videos: 0, pdfs: 0, others: 0 },
+        );
+        const largest = apps.reduce<AppSummary | null>(
+            (current, app) =>
+                !current || app.storage > current.storage ? app : current,
+            null,
+        );
+
+        res.json({
+            apps,
+            appCount: apps.length,
+            totalFiles: totals.files,
+            totalStorage: totals.storage,
+            totalImages: totals.images,
+            totalVideos: totals.videos,
+            totalPdfs: totals.pdfs,
+            totalOthers: totals.others,
+            largestApp: largest
+                ? {
+                      keyId: largest.keyId,
+                      name: largest.name,
+                      storage: largest.storage,
+                      share: largest.share,
+                  }
+                : null,
+        });
+    });
+
     router.post("/api/apps", async (req, res) => {
-        const user = await sessionUser(auth, req, res);
-        if (!user) return;
         const name = String(req.body?.name || "").trim();
         if (!name) {
             res.status(400).json({ error: "Name is required" });
             return;
         }
         try {
-            const created = await createApiKey({ userId: user.id, name });
+            const created = await createApiKey({
+                userId: currentUser(res).id,
+                name,
+            });
             res.status(201).json({
                 key: created.key,
                 keyId: created.keyId,
@@ -128,18 +301,32 @@ export function createDashboardRouter(auth: MedialitAuth) {
         }
     });
 
+    router.get("/api/apps/:keyId/summary", async (req, res) => {
+        const owned = await ownedApp(req, res);
+        if (!owned) return;
+        const apps = await loadAppSummaries(owned.user.id);
+        const app = apps.find((summary) => summary.keyId === owned.key.keyId);
+        if (!app) {
+            res.status(404).json({ error: "Apikey not found" });
+            return;
+        }
+        res.json(app);
+    });
+
     router.get("/api/apps/:keyId/media/count", async (req, res) => {
-        const owned = await ownedApp(auth, req, res);
+        const owned = await ownedApp(req, res);
         if (!owned) return;
         const count = await getMediaCount({
             userId: owned.user.id,
             apikey: owned.key.key,
+            search: querySearch(req.query.search),
+            kind: parseMediaKind(req.query.kind),
         });
         res.json({ count });
     });
 
     router.get("/api/apps/:keyId/stats", async (req, res) => {
-        const owned = await ownedApp(auth, req, res);
+        const owned = await ownedApp(req, res);
         if (!owned) return;
         const storage = await getTotalSpace({
             userId: owned.user.id,
@@ -151,8 +338,43 @@ export function createDashboardRouter(auth: MedialitAuth) {
         });
     });
 
+    /* A signature for one browser (or app) upload to this app. The client
+       uploads straight to `endpoint` with it, then seals the result below. */
+    router.post("/api/apps/:keyId/media/signature", async (req, res) => {
+        const owned = await ownedApp(req, res);
+        if (!owned) return;
+        const { error } = validatePresigningOptions(req.body);
+        if (error) {
+            res.status(400).json({ error: error.message });
+            return;
+        }
+        const signature = await generateSignature({
+            userId: owned.user.id,
+            apikey: owned.key.key,
+            group: req.body?.group,
+        });
+        res.json({ signature, endpoint: auth.publicApiUrl });
+    });
+
+    router.post("/api/apps/:keyId/media/:mediaId/seal", async (req, res) => {
+        const owned = await ownedApp(req, res);
+        if (!owned) return;
+        try {
+            const media = await mediaService.sealMedia({
+                userId: owned.user.id,
+                apikey: owned.key.key,
+                mediaId: String(req.params.mediaId),
+            });
+            res.json(withKind(media));
+        } catch (err: any) {
+            const status = sealErrorStatus(err);
+            if (status === 500) logger.error({ err }, err.message);
+            res.status(status).json({ error: err.message });
+        }
+    });
+
     router.get("/api/apps/:keyId/media/:mediaId", async (req, res) => {
-        const owned = await ownedApp(auth, req, res);
+        const owned = await ownedApp(req, res);
         if (!owned) return;
         const media = await mediaService.getMediaDetails({
             userId: owned.user.id,
@@ -163,31 +385,80 @@ export function createDashboardRouter(auth: MedialitAuth) {
             res.status(404).json({ error: "Not found" });
             return;
         }
-        res.json(media);
+        res.json(withKind(media));
+    });
+
+    router.delete("/api/apps/:keyId/media/:mediaId", async (req, res) => {
+        const owned = await ownedApp(req, res);
+        if (!owned) return;
+        await mediaService.deleteMedia({
+            userId: owned.user.id,
+            apikey: owned.key.key,
+            mediaId: String(req.params.mediaId),
+        });
+        res.json({ message: "success" });
+    });
+
+    router.post("/api/apps/:keyId/media/delete", async (req, res) => {
+        const owned = await ownedApp(req, res);
+        if (!owned) return;
+        const mediaIds = req.body?.mediaIds;
+        if (
+            !Array.isArray(mediaIds) ||
+            mediaIds.length === 0 ||
+            mediaIds.length > MAX_BULK_DELETE ||
+            !mediaIds.every((id) => typeof id === "string" && id.length > 0)
+        ) {
+            res.status(400).json({
+                error: `mediaIds must be between 1 and ${MAX_BULK_DELETE} ids`,
+            });
+            return;
+        }
+        const result = await mediaService.deleteMediaMany({
+            userId: owned.user.id,
+            apikey: owned.key.key,
+            mediaIds,
+        });
+        res.json(result);
     });
 
     router.get("/api/apps/:keyId/media", async (req, res) => {
-        const owned = await ownedApp(auth, req, res);
+        const owned = await ownedApp(req, res);
         if (!owned) return;
-        const page = Number(req.query.page || 1);
-        const limit = Number(req.query.limit || 10);
+        const page = queryInteger(req.query.page, 1);
+        if (page === null || page < 1) {
+            res.status(400).json({
+                error: "page must be a whole number from 1",
+            });
+            return;
+        }
+        const limit = queryInteger(req.query.limit, DEFAULT_PAGE_SIZE);
+        if (limit === null || limit < 1 || limit > MAX_PAGE_SIZE) {
+            res.status(400).json({
+                error: `limit must be a whole number from 1 to ${MAX_PAGE_SIZE}`,
+            });
+            return;
+        }
         const result = await mediaService.getPage({
             userId: owned.user.id,
             apikey: owned.key.key,
-            page: Number.isFinite(page) ? page : 1,
-            recordsPerPage: Number.isFinite(limit) ? limit : 10,
+            page,
+            recordsPerPage: limit,
+            search: querySearch(req.query.search),
+            kind: parseMediaKind(req.query.kind),
+            sort: parseMediaSort(req.query.sort),
         });
-        res.json(result);
+        res.json(result.map(withKind));
     });
 
     router.get("/api/apps/:keyId", async (req, res) => {
-        const owned = await ownedApp(auth, req, res);
+        const owned = await ownedApp(req, res);
         if (!owned) return;
         res.json(publicApp(owned.key, true));
     });
 
     router.patch("/api/apps/:keyId", async (req, res) => {
-        const owned = await ownedApp(auth, req, res);
+        const owned = await ownedApp(req, res);
         if (!owned) return;
         const name = String(req.body?.name || "").trim();
         if (!name) {
@@ -206,8 +477,19 @@ export function createDashboardRouter(auth: MedialitAuth) {
         }
     });
 
+    router.patch("/api/apps/:keyId/default", async (req, res) => {
+        const owned = await ownedApp(req, res);
+        if (!owned) return;
+        try {
+            await setDefaultApiKey(owned.user.id, owned.key.keyId);
+            res.json({ success: true });
+        } catch (error: any) {
+            res.status(400).json({ error: error.message });
+        }
+    });
+
     router.delete("/api/apps/:keyId", async (req, res) => {
-        const owned = await ownedApp(auth, req, res);
+        const owned = await ownedApp(req, res);
         if (!owned) return;
         try {
             await softDeleteApiKey(owned.user.id, owned.key.keyId);
diff --git a/apps/api/src/db/repository.ts b/apps/api/src/db/repository.ts
index 782810b3..5039558e 100644
--- a/apps/api/src/db/repository.ts
+++ b/apps/api/src/db/repository.ts
@@ -1,6 +1,17 @@
 import { randomUUID } from "node:crypto";
 import { getUniqueId } from "@medialit/utils";
-import { and, asc, desc, eq, like, lt, sql } from "drizzle-orm";
+import {
+    and,
+    asc,
+    desc,
+    eq,
+    ilike,
+    inArray,
+    like,
+    lt,
+    sql,
+    type SQL,
+} from "drizzle-orm";
 import { getDb } from "./client.js";
 import {
     apiKeys,
@@ -65,6 +76,21 @@ export type MediaRecord = {
     updatedAt: Date;
 };
 
+export type ApiKeyMediaSummary = {
+    apikey: string;
+    count: number;
+    storage: number;
+    images: number;
+    videos: number;
+    pdfs: number;
+    others: number;
+    imageStorage: number;
+    videoStorage: number;
+    pdfStorage: number;
+    otherStorage: number;
+    lastUpload: Date | null;
+};
+
 export type MediaSettingsRecord = {
     userId: string;
     apikey: string;
@@ -383,6 +409,44 @@ export async function renameApiKey(input: {
         .where(and(...filters));
 }
 
+export async function setDefaultApiKey(
+    userId: string,
+    keyId: string,
+): Promise<void> {
+    const db = getDb();
+    await db.transaction(async (tx) => {
+        const [target] = await tx
+            .select({ id: apiKeys.id, isDefault: apiKeys.isDefault })
+            .from(apiKeys)
+            .where(
+                and(
+                    eq(apiKeys.userId, userId),
+                    eq(apiKeys.keyId, keyId),
+                    eq(apiKeys.deleted, false),
+                ),
+            )
+            .limit(1);
+        if (!target) throw new Error("Apikey not found");
+        if (target.isDefault) return;
+
+        const timestamp = now();
+        await tx
+            .update(apiKeys)
+            .set({ isDefault: false, updatedAt: timestamp })
+            .where(
+                and(
+                    eq(apiKeys.userId, userId),
+                    eq(apiKeys.isDefault, true),
+                    eq(apiKeys.deleted, false),
+                ),
+            );
+        await tx
+            .update(apiKeys)
+            .set({ isDefault: true, updatedAt: timestamp })
+            .where(eq(apiKeys.id, target.id));
+    });
+}
+
 export async function softDeleteApiKey(
     userId: string,
     keyId: string,
@@ -441,6 +505,24 @@ function escapeLike(value: string): string {
     return value.replace(/[\\%_]/g, (char) => `\\${char}`);
 }
 
+export type MediaKindFilter = "image" | "video" | "pdf" | "other";
+
+/* SQL twin of mediaKind() in media/kind.ts; keep the two in step. The kinds
+   never overlap: image and video go by type prefix, pdf is any other type
+   that names pdf, and other is everything left. */
+function mediaKindCondition(kind: MediaKindFilter): SQL {
+    const mimeType = sql`lower(${media.mimeType})`;
+    const isImage = sql`${mimeType} like 'image/%'`;
+    const isVideo = sql`${mimeType} like 'video/%'`;
+    const namesPdf = sql`${mimeType} like '%pdf%'`;
+    if (kind === "image") return sql`(${isImage})`;
+    if (kind === "video") return sql`(${isVideo})`;
+    if (kind === "pdf") {
+        return sql`(not (${isImage}) and not (${isVideo}) and ${namesPdf})`;
+    }
+    return sql`(not (${isImage}) and not (${isVideo}) and not (${namesPdf}))`;
+}
+
 export async function createMediaRecord(
     input: Omit<MediaRecord, "id" | "_id" | "createdAt" | "updatedAt"> & {
         id?: string;
@@ -498,6 +580,8 @@ export async function countMedia(input: {
     apikey: string;
     access?: "public" | "private";
     group?: string;
+    search?: string;
+    kind?: MediaKindFilter;
 }): Promise<number> {
     const db = getDb();
     const filters = [
@@ -509,6 +593,15 @@ export async function countMedia(input: {
     if (input.group && input.group.trim()) {
         filters.push(like(media.group, `${escapeLike(input.group.trim())}%`));
     }
+    if (input.search?.trim()) {
+        filters.push(
+            ilike(
+                media.originalFileName,
+                `%${escapeLike(input.search.trim())}%`,
+            ),
+        );
+    }
+    if (input.kind) filters.push(mediaKindCondition(input.kind));
     const [row] = await db
         .select({ count: sql<number>`count(*)::int` })
         .from(media)
@@ -523,6 +616,9 @@ export async function listMedia(input: {
     group?: string;
     page?: number;
     recordsPerPage?: number;
+    search?: string;
+    kind?: MediaKindFilter;
+    sort?: "newest" | "oldest" | "name" | "largest";
 }): Promise<MediaRecord[]> {
     const db = getDb();
     const limit = input.recordsPerPage || 10;
@@ -536,11 +632,28 @@ export async function listMedia(input: {
     if (input.group && input.group.trim()) {
         filters.push(like(media.group, `${escapeLike(input.group.trim())}%`));
     }
+    if (input.search?.trim()) {
+        filters.push(
+            ilike(
+                media.originalFileName,
+                `%${escapeLike(input.search.trim())}%`,
+            ),
+        );
+    }
+    if (input.kind) filters.push(mediaKindCondition(input.kind));
+    const orderBy =
+        input.sort === "oldest"
+            ? asc(media.createdAt)
+            : input.sort === "name"
+              ? asc(media.originalFileName)
+              : input.sort === "largest"
+                ? desc(media.size)
+                : desc(media.createdAt);
     const rows = await db
         .select()
         .from(media)
         .where(and(...filters))
-        .orderBy(desc(media.createdAt), desc(media.mediaId))
+        .orderBy(orderBy, desc(media.mediaId))
         .limit(limit)
         .offset(offset);
     return rows.map(mapMedia);
@@ -560,6 +673,72 @@ export async function totalMediaSize(input: {
     return Number(row?.total ?? 0);
 }
 
+export async function listApiKeyMediaSummaries(
+    userId: string,
+    apikey?: string,
+): Promise<ApiKeyMediaSummary[]> {
+    const db = getDb();
+    const filters = [eq(media.userId, userId), eq(media.temp, false)];
+    if (apikey) filters.push(eq(media.apikey, apikey));
+    const countOf = (kind: MediaKindFilter) =>
+        sql<number>`count(*) filter (where ${mediaKindCondition(kind)})::int`;
+    const storageOf = (kind: MediaKindFilter) =>
+        sql<number>`coalesce(sum(${media.size}) filter (where ${mediaKindCondition(kind)}), 0)::float8`;
+    const rows = await db
+        .select({
+            apikey: media.apikey,
+            count: sql<number>`count(*)::int`,
+            storage: sql<number>`coalesce(sum(${media.size}), 0)::float8`,
+            images: countOf("image"),
+            videos: countOf("video"),
+            pdfs: countOf("pdf"),
+            others: countOf("other"),
+            imageStorage: storageOf("image"),
+            videoStorage: storageOf("video"),
+            pdfStorage: storageOf("pdf"),
+            otherStorage: storageOf("other"),
+            lastUpload: sql<Date | null>`max(${media.createdAt})`,
+        })
+        .from(media)
+        .where(and(...filters))
+        .groupBy(media.apikey);
+
+    return rows.map((row) => ({
+        ...row,
+        count: Number(row.count),
+        storage: Number(row.storage),
+        images: Number(row.images),
+        videos: Number(row.videos),
+        pdfs: Number(row.pdfs),
+        others: Number(row.others),
+        imageStorage: Number(row.imageStorage),
+        videoStorage: Number(row.videoStorage),
+        pdfStorage: Number(row.pdfStorage),
+        otherStorage: Number(row.otherStorage),
+        lastUpload: row.lastUpload ? new Date(row.lastUpload) : null,
+    }));
+}
+
+export async function listMediaRecordsByIds(input: {
+    userId: string;
+    apikey: string;
+    mediaIds: string[];
+}): Promise<MediaRecord[]> {
+    if (input.mediaIds.length === 0) return [];
+    const db = getDb();
+    const rows = await db
+        .select()
+        .from(media)
+        .where(
+            and(
+                eq(media.userId, input.userId),
+                eq(media.apikey, input.apikey),
+                inArray(media.mediaId, input.mediaIds),
+            ),
+        );
+    return rows.map(mapMedia);
+}
+
 export async function deleteMediaRecord(
     userId: string,
     mediaId: string,
diff --git a/apps/api/src/media/GetPageProps.ts b/apps/api/src/media/GetPageProps.ts
index 2e7c5dd3..d294ab5c 100644
--- a/apps/api/src/media/GetPageProps.ts
+++ b/apps/api/src/media/GetPageProps.ts
@@ -7,4 +7,7 @@ export default interface GetPageProps {
     access?: AccessControl;
     group?: string;
     recordsPerPage?: number;
+    search?: string;
+    kind?: "image" | "video" | "pdf" | "other";
+    sort?: "newest" | "oldest" | "name" | "largest";
 }
diff --git a/apps/api/src/media/handlers.ts b/apps/api/src/media/handlers.ts
index dd9d33c7..e5105f6a 100644
--- a/apps/api/src/media/handlers.ts
+++ b/apps/api/src/media/handlers.ts
@@ -153,6 +153,14 @@ export async function deleteMedia(req: any, res: any) {
     }
 }
 
+/* HTTP status for an error from mediaService.sealMedia. Shared by the
+   API-key route and the dashboard's session route. */
+export function sealErrorStatus(err: { message?: string }): number {
+    if (err.message === "Media not found") return 404;
+    if (err.message === "Media is already sealed") return 409;
+    return 500;
+}
+
 export async function sealMedia(req: any, res: any) {
     const { mediaId } = req.params;
 
@@ -165,12 +173,7 @@ export async function sealMedia(req: any, res: any) {
 
         return res.status(200).json(media);
     } catch (err: any) {
-        const statusCode =
-            err.message === "Media not found"
-                ? 404
-                : err.message === "Media is already sealed"
-                  ? 409
-                  : 500;
+        const statusCode = sealErrorStatus(err);
         if (statusCode === 500) {
             logger.error({ err }, err.message);
         }
diff --git a/apps/api/src/media/kind.ts b/apps/api/src/media/kind.ts
new file mode 100644
index 00000000..61da0473
--- /dev/null
+++ b/apps/api/src/media/kind.ts
@@ -0,0 +1,16 @@
+export const MEDIA_KINDS = ["image", "video", "pdf", "other"] as const;
+export type MediaKind = (typeof MEDIA_KINDS)[number];
+
+/* The one rule for what kind a file is. mediaKindCondition() in
+   db/repository.ts is its SQL twin; keep the two in step. */
+export function mediaKind(mimeType: string): MediaKind {
+    const type = mimeType.toLowerCase();
+    if (type.startsWith("image/")) return "image";
+    if (type.startsWith("video/")) return "video";
+    if (type.includes("pdf")) return "pdf";
+    return "other";
+}
+
+export function parseMediaKind(value: unknown): MediaKind | undefined {
+    return MEDIA_KINDS.find((kind) => kind === value);
+}
diff --git a/apps/api/src/media/queries.ts b/apps/api/src/media/queries.ts
index d6b5f387..0334da44 100644
--- a/apps/api/src/media/queries.ts
+++ b/apps/api/src/media/queries.ts
@@ -19,13 +19,17 @@ export function buildMediaCountQuery({
     apikey,
     access,
     group,
+    search,
+    kind,
 }: {
     userId: string;
     apikey: string;
     access?: AccessControl;
     group?: string;
+    search?: string;
+    kind?: GetPageProps["kind"];
 }) {
-    return { userId: String(userId), apikey, access, group };
+    return { userId: String(userId), apikey, access, group, search, kind };
 }
 
 function escapeRegex(value: string): string {
@@ -52,11 +56,15 @@ export async function getMediaCount({
     apikey,
     access,
     group,
+    search,
+    kind,
 }: {
     userId: string;
     apikey: string;
     access?: AccessControl;
     group?: string;
+    search?: string;
+    kind?: GetPageProps["kind"];
 }): Promise<number> {
     return countMedia({
         userId: String(userId),
@@ -68,6 +76,8 @@ export async function getMediaCount({
                   ? "public"
                   : undefined,
         group,
+        search,
+        kind,
     });
 }
 
@@ -88,7 +98,10 @@ export async function getPaginatedMedia({
     page,
     group,
     recordsPerPage,
-}: GetPageProps): Promise<MediaWithUserId[]> {
+    search,
+    kind,
+    sort,
+}: GetPageProps): Promise<Array<MediaWithUserId & { createdAt: Date }>> {
     return listMedia({
         userId: String(userId),
         apikey,
@@ -100,6 +113,9 @@ export async function getPaginatedMedia({
         group,
         page,
         recordsPerPage: recordsPerPage || numberOfRecordsPerPage,
+        search,
+        kind,
+        sort,
     });
 }
 
diff --git a/apps/api/src/media/schemas.ts b/apps/api/src/media/schemas.ts
index bd91acbc..57d81df1 100644
--- a/apps/api/src/media/schemas.ts
+++ b/apps/api/src/media/schemas.ts
@@ -35,6 +35,7 @@ export interface MediaListItemResponse {
     thumbnail: string;
     caption?: string;
     group?: string;
+    createdAt: Date;
 }
 
 export const mediaResponseSchema = Joi.object<MediaResponse>({
@@ -58,6 +59,7 @@ export const mediaListItemResponseSchema = Joi.object<MediaListItemResponse>({
     thumbnail: Joi.string().uri().optional().allow(""),
     caption: Joi.string().optional().allow(""),
     group: Joi.string().optional(),
+    createdAt: Joi.date().iso().required(),
 });
 
 export const mediaCountResponseSchema = Joi.object({
diff --git a/apps/api/src/media/service.ts b/apps/api/src/media/service.ts
index 339eac3c..526a386f 100644
--- a/apps/api/src/media/service.ts
+++ b/apps/api/src/media/service.ts
@@ -38,7 +38,7 @@ import {
     getPaginatedMedia,
     createMedia,
 } from "./queries";
-import { sealMediaRecord } from "@/db";
+import { listMediaRecordsByIds, sealMediaRecord } from "@/db";
 import * as presignedUrlService from "../signature/service";
 import getTags from "./utils/get-tags";
 import { getPublicFileUrl, getThumbnailUrl } from "./utils/get-public-urls";
@@ -198,6 +198,7 @@ type MappedMedia = Partial<
 > & {
     access: AccessControl;
     thumbnail: string;
+    createdAt: Date;
 };
 
 async function getPage({
@@ -207,6 +208,9 @@ async function getPage({
     page,
     group,
     recordsPerPage,
+    search,
+    kind,
+    sort,
 }: GetPageProps): Promise<MappedMedia[]> {
     const result = await getPaginatedMedia({
         userId,
@@ -215,6 +219,9 @@ async function getPage({
         page,
         group,
         recordsPerPage,
+        search,
+        kind,
+        sort,
     });
     const mappedResult = result.map(
         (media): MappedMedia => ({
@@ -229,6 +236,7 @@ async function getPage({
             thumbnail: media.thumbnailGenerated ? getThumbnailUrl(media) : "",
             caption: media.caption,
             group: media.group,
+            createdAt: media.createdAt,
         }),
     );
 
@@ -330,18 +338,8 @@ async function getPrivateFileUrl(media: MediaWithUserId, thumb?: boolean) {
         : await generateSignedUrl(key, bucket);
 }
 
-async function deleteMedia({
-    userId,
-    apikey,
-    mediaId,
-}: {
-    userId: string;
-    apikey: string;
-    mediaId: string;
-}): Promise<void> {
-    const media = await getMedia({ userId, apikey, mediaId });
-    if (!media) return;
-
+/* Removes a media item's main file and thumbnail from storage. */
+async function removeStoredFiles(media: MediaWithUserId): Promise<void> {
     // Determine which bucket the main file is in
     const mainBucket =
         media.temp || media.accessControl === Constants.AccessControl.PRIVATE
@@ -355,7 +353,7 @@ async function deleteMedia({
 
     const fileExtension = path.extname(media.fileName).replace(".", "");
     const key = generateKey({
-        mediaId,
+        mediaId: media.mediaId,
         path: mainPath,
         filename: `main.${fileExtension}`,
     });
@@ -368,16 +366,73 @@ async function deleteMedia({
             ? Constants.PathKey.PRIVATE
             : Constants.PathKey.PUBLIC;
         const thumbKey = generateKey({
-            mediaId,
+            mediaId: media.mediaId,
             path: thumbPath,
             filename: "thumb.webp",
         });
         await deleteObject({ Key: thumbKey, Bucket: thumbBucket });
     }
+}
+
+async function deleteMedia({
+    userId,
+    apikey,
+    mediaId,
+}: {
+    userId: string;
+    apikey: string;
+    mediaId: string;
+}): Promise<void> {
+    const media = await getMedia({ userId, apikey, mediaId });
+    if (!media) return;
 
+    await mediaService.removeStoredFiles(media);
     await deleteMediaQuery(userId, mediaId);
 }
 
+const DELETE_CONCURRENCY = 10;
+
+/* Deletes several media items of one app. Looks them all up in one query;
+   an id that doesn't exist, or whose files can't be removed, counts as
+   failed. */
+async function deleteMediaMany({
+    userId,
+    apikey,
+    mediaIds,
+}: {
+    userId: string;
+    apikey: string;
+    mediaIds: string[];
+}): Promise<{ deleted: number; failed: number }> {
+    const uniqueIds = Array.from(new Set(mediaIds));
+    const found = await listMediaRecordsByIds({
+        userId,
+        apikey,
+        mediaIds: uniqueIds,
+    });
+
+    let deleted = 0;
+    for (let start = 0; start < found.length; start += DELETE_CONCURRENCY) {
+        const results = await Promise.allSettled(
+            found
+                .slice(start, start + DELETE_CONCURRENCY)
+                .map(async (media) => {
+                    await mediaService.removeStoredFiles(media);
+                    await deleteMediaQuery(userId, media.mediaId);
+                }),
+        );
+        for (const result of results) {
+            if (result.status === "fulfilled") {
+                deleted++;
+            } else {
+                logger.error({ err: result.reason }, "Failed to delete media");
+            }
+        }
+    }
+
+    return { deleted, failed: uniqueIds.length - deleted };
+}
+
 async function sealMedia({
     userId,
     apikey,
@@ -490,11 +545,15 @@ async function sealMedia({
     return await getMediaResponse(updatedMedia);
 }
 
-export default {
+const mediaService = {
     upload,
     getPage,
     getMediaCount: getMediaCountWithFilter,
     getMediaDetails,
     deleteMedia,
+    deleteMediaMany,
+    removeStoredFiles,
     sealMedia,
 };
+
+export default mediaService;
diff --git a/apps/api/src/signature/handlers.ts b/apps/api/src/signature/handlers.ts
index 527e91e8..00f7fcb8 100644
--- a/apps/api/src/signature/handlers.ts
+++ b/apps/api/src/signature/handlers.ts
@@ -3,12 +3,15 @@ import Joi from "joi";
 import logger from "../services/log";
 import * as preSignedUrlService from "./service";
 
-function validatePresigningOptions(req: Request): Joi.ValidationResult {
+/* Checks the options a signature can carry. Shared by the API-key route
+   and the dashboard's session route. */
+export function validatePresigningOptions(
+    body: Request["body"],
+): Joi.ValidationResult {
     const uploadSchema = Joi.object({
         group: Joi.string().optional(),
     });
-    const { group } = req.body;
-    return uploadSchema.validate({ group });
+    return uploadSchema.validate({ group: body?.group });
 }
 
 export async function getSignature(
@@ -16,7 +19,7 @@ export async function getSignature(
     res: any,
     next: (...args: any[]) => void,
 ) {
-    const { error } = validatePresigningOptions(req);
+    const { error } = validatePresigningOptions(req.body);
     if (error) {
         return res.status(400).json({ error: error.message });
     }
diff --git a/apps/api/src/swagger_output.json b/apps/api/src/swagger_output.json
index e641056f..bee22a91 100644
--- a/apps/api/src/swagger_output.json
+++ b/apps/api/src/swagger_output.json
@@ -123,6 +123,9 @@
               }
             }
           },
+          "403": {
+            "description": "Forbidden"
+          },
           "500": {
             "description": "Internal Server Error",
             "content": {
@@ -203,6 +206,9 @@
               }
             }
           },
+          "403": {
+            "description": "Forbidden"
+          },
           "500": {
             "description": "Internal Server Error",
             "content": {
@@ -272,6 +278,9 @@
               }
             }
           },
+          "403": {
+            "description": "Forbidden"
+          },
           "500": {
             "description": "Internal Server Error",
             "content": {
@@ -470,6 +479,9 @@
               }
             }
           },
+          "403": {
+            "description": "Forbidden"
+          },
           "500": {
             "description": "Internal Server Error",
             "content": {
@@ -540,6 +552,9 @@
               }
             }
           },
+          "403": {
+            "description": "Forbidden"
+          },
           "500": {
             "description": "Internal Server Error",
             "content": {
@@ -621,6 +636,9 @@
               }
             }
           },
+          "403": {
+            "description": "Forbidden"
+          },
           "404": {
             "description": "Media not found",
             "content": {
@@ -706,6 +724,9 @@
               }
             }
           },
+          "403": {
+            "description": "Forbidden"
+          },
           "500": {
             "description": "Internal Server Error",
             "content": {
@@ -797,6 +818,9 @@
               }
             }
           },
+          "403": {
+            "description": "Forbidden"
+          },
           "404": {
             "description": "Media not found",
             "content": {
@@ -897,6 +921,9 @@
               }
             }
           },
+          "403": {
+            "description": "Forbidden"
+          },
           "500": {
             "description": "Internal Server Error",
             "content": {
@@ -1019,6 +1046,10 @@
           },
           "group": {
             "type": "string"
+          },
+          "createdAt": {
+            "type": "string",
+            "format": "date-time"
           }
         },
         "required": [
@@ -1026,7 +1057,8 @@
           "originalFileName",
           "mimeType",
           "size",
-          "access"
+          "access",
+          "createdAt"
         ],
         "additionalProperties": false
       },
diff --git a/apps/web/AGENTS.md b/apps/web/AGENTS.md
new file mode 100644
index 00000000..e186738a
--- /dev/null
+++ b/apps/web/AGENTS.md
@@ -0,0 +1,30 @@
+# Web App Development Guide
+
+## Development Tips
+
+- Do not implement login related UI or API routes (which contains authorization related business logic) in the web app. All auth related stuff is controlled by the apps/api microservice
+- Use Bun 1.4.1 and run package-specific commands with `bun --filter @medialit/web <command>`.
+- Keep the web app a thin client; all product behavior and authorization belong to the API.
+- Use `@codelitdev/design-system` for shared visual components and styles.
+- Run local dependencies from the repository root with `docker compose -f docker-compose.local.yml up`. Run the API and web app on the host, and do not run this compose file alongside `docker-compose.yml`.
+- Use the API and Postgres for product data; do not add another store for the same records.
+- Start the web app with `bun --filter @medialit/web dev`.
+- Always use Tailwind for styling. Use custom CSS only when it is technically challenging to achieve the same result with Tailwind.
+
+## PR Review
+
+- Verify the web app adds no login UI, authorization business logic, or auth-related API routes.
+- Verify product behavior is implemented by the API and the web app consumes the API's responses and actions.
+- Review loading, empty, and error states, along with accessible labels and responsive layouts.
+- Check that shared UI follows `@codelitdev/design-system` patterns.
+- Run the relevant web checks, such as `bun --filter @medialit/web lint` and `bun --filter @medialit/web build`.
+
+<!-- BEGIN:nextjs-agent-rules -->
+
+# This is NOT the Next.js you know
+
+This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` (resolved from this file's directory; in monorepos the `next` package may not be visible from the repo root) before writing any code. Heed deprecation notices.
+
+This block is written and re-added by `next dev` — verify at `node_modules/next/dist/server/lib/generate-agent-files.js`. Removing it from a diff only re-creates the uncommitted change; committing it with your work keeps the tree clean.
+
+<!-- END:nextjs-agent-rules -->
diff --git a/apps/web/CLAUDE.md b/apps/web/CLAUDE.md
new file mode 100644
index 00000000..43c994c2
--- /dev/null
+++ b/apps/web/CLAUDE.md
@@ -0,0 +1 @@
+@AGENTS.md
diff --git a/apps/web/Dockerfile b/apps/web/Dockerfile
index f7909293..b0511640 100644
--- a/apps/web/Dockerfile
+++ b/apps/web/Dockerfile
@@ -4,6 +4,7 @@ WORKDIR /app
 COPY package.json bun.lock ./
 COPY apps/web/package.json ./apps/web/package.json
 COPY packages/models/package.json ./packages/models/package.json
+COPY packages/uploader/package.json ./packages/uploader/package.json
 
 RUN bun install --frozen-lockfile --filter @medialit/web
 
@@ -12,9 +13,12 @@ FROM deps AS builder
 COPY tsconfig.json ./
 COPY apps/web ./apps/web
 COPY packages/models ./packages/models
+COPY packages/uploader ./packages/uploader
 
 ENV NEXT_TELEMETRY_DISABLED=1
 
+# The uploader resolves to its built dist, which is not checked in.
+RUN bun --filter @medialit/uploader build
 RUN bun --filter @medialit/web build
 
 FROM node:22-alpine AS runner
diff --git a/apps/web/app/account/billing/action.ts b/apps/web/app/account/billing/action.ts
index ebf8a40e..51d01c94 100644
--- a/apps/web/app/account/billing/action.ts
+++ b/apps/web/app/account/billing/action.ts
@@ -1,6 +1,5 @@
 "use server";
 
-import { auth } from "@/auth";
 import { serverApi } from "@/lib/server-api";
 
 type BillingIntent = "checkout" | "portal" | "cancel" | "resume";
@@ -25,10 +24,6 @@ async function postBilling(
     body: Record<string, unknown> = {},
 ): Promise<BillingResult> {
     try {
-        const session = await auth();
-        if (!session?.user) {
-            throw new Error("Unauthorized");
-        }
         const tokenResponse = await serverApi(
             "/api/account/billing/action-token",
             { method: "POST", body: JSON.stringify({ intent }) },
diff --git a/apps/web/app/account/billing/billing-button.tsx b/apps/web/app/account/billing/billing-button.tsx
index 96f34030..a2e12426 100644
--- a/apps/web/app/account/billing/billing-button.tsx
+++ b/apps/web/app/account/billing/billing-button.tsx
@@ -2,8 +2,8 @@
 
 import { useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
-import { useToast } from "@/components/ui/use-toast";
 import { openBillingPortal, startProCheckout } from "./action";
+import { toast } from "sonner";
 
 /** Starts a provider checkout or opens the provider's billing portal. */
 export default function BillingButton({
@@ -17,7 +17,6 @@ export default function BillingButton({
     className?: string;
     children: React.ReactNode;
 }) {
-    const { toast } = useToast();
     const [pending, setPending] = useState(false);
 
     // Pressing back from the provider's page can restore this page from the
@@ -50,8 +49,7 @@ export default function BillingButton({
                 }
                 setPending(false);
                 if (!result.success) {
-                    toast({
-                        title: "Uh oh!",
+                    toast.error("Uh oh!", {
                         description: result.error || "Billing request failed",
                     });
                 }
diff --git a/apps/web/app/account/billing/cancel-subscription-button.tsx b/apps/web/app/account/billing/cancel-subscription-button.tsx
index d792b833..99b49928 100644
--- a/apps/web/app/account/billing/cancel-subscription-button.tsx
+++ b/apps/web/app/account/billing/cancel-subscription-button.tsx
@@ -4,8 +4,8 @@ import { Button } from "@/components/ui/button";
 import { useFormStatus } from "react-dom";
 import { cancelSubscription } from "./action";
 import { useEffect, useState, useActionState } from "react";
-import { useToast } from "@/components/ui/use-toast";
 import { useRouter } from "next/navigation";
+import { toast } from "sonner";
 import {
     Dialog,
     DialogContent,
@@ -25,15 +25,13 @@ export default function CancelSubscriptionButton({
     const [formState, formAction] = useActionState(cancelSubscription, {
         success: false,
     } as Awaited<ReturnType<typeof cancelSubscription>>);
-    const { toast } = useToast();
     const router = useRouter();
     const [open, setOpen] = useState(false);
 
     useEffect(() => {
         if (formState.success) {
             setOpen(false);
-            toast({
-                title: "We are sorry to see you go",
+            toast.success("We are sorry to see you go", {
                 description:
                     "Your subscription is cancelled. Pro stays active until the end of the paid period.",
             });
@@ -44,8 +42,7 @@ export default function CancelSubscriptionButton({
             return;
         }
         if (formState.error) {
-            toast({
-                title: "Uh oh!",
+            toast.error("Uh oh!", {
                 description: formState.error,
             });
         }
@@ -54,7 +51,7 @@ export default function CancelSubscriptionButton({
     return (
         <Dialog open={open} onOpenChange={setOpen}>
             <DialogTrigger asChild>
-                <Button className={`bg-red-600 hover:bg-red-700 ${className}`}>
+                <Button variant="destructive" className={className}>
                     Cancel subscription
                 </Button>
             </DialogTrigger>
@@ -84,12 +81,7 @@ export default function CancelSubscriptionButton({
 function Submit({ children }: { children: React.ReactNode }) {
     const status = useFormStatus();
     return (
-        <Button
-            className="bg-red-500 hover:bg-red-700 text-white"
-            type="submit"
-            variant="secondary"
-            disabled={status.pending}
-        >
+        <Button type="submit" variant="destructive" disabled={status.pending}>
             {children}
         </Button>
     );
diff --git a/apps/web/app/account/billing/layout.tsx b/apps/web/app/account/billing/layout.tsx
index 58f86d8f..53b686d1 100644
--- a/apps/web/app/account/billing/layout.tsx
+++ b/apps/web/app/account/billing/layout.tsx
@@ -1,36 +1,24 @@
-import React from "react";
-import {
-    Breadcrumb,
-    BreadcrumbItem,
-    BreadcrumbLink,
-    BreadcrumbList,
-} from "@/components/ui/breadcrumb";
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 import { redirect } from "next/navigation";
 import { auth } from "@/auth";
 
-const SchoolDetailsLayout = async ({ children }: { children: ReactNode }) => {
+export default async function BillingLayout({
+    children,
+}: {
+    children: ReactNode;
+}) {
     const session = await auth();
-
-    if (!session) {
-        return redirect("/login?from=/account/billing");
-    }
+    if (!session) redirect("/login?next=/account/billing");
 
     return (
         <>
-            <main className="mx-auto max-w-[1024px] min-h-screen">
-                <Breadcrumb className="mb-2">
-                    <BreadcrumbList>
-                        <BreadcrumbItem>
-                            <BreadcrumbLink href="/">All apps</BreadcrumbLink>
-                        </BreadcrumbItem>
-                    </BreadcrumbList>
-                </Breadcrumb>
-                <h1 className="text-2xl font-bold mb-8">Billing</h1>
-                {children}
-            </main>
+            <div className="workspace-page-heading">
+                <div>
+                    <h1>Billing</h1>
+                    <p>Manage your plan and payment settings.</p>
+                </div>
+            </div>
+            {children}
         </>
     );
-};
-
-export default SchoolDetailsLayout as any;
+}
diff --git a/apps/web/app/account/billing/page.tsx b/apps/web/app/account/billing/page.tsx
index 1c189bbb..f26f4f1d 100644
--- a/apps/web/app/account/billing/page.tsx
+++ b/apps/web/app/account/billing/page.tsx
@@ -1,12 +1,5 @@
 import { getSubscriber } from "@/app/actions";
 import { redirect } from "next/navigation";
-import {
-    Card,
-    CardContent,
-    CardDescription,
-    CardHeader,
-    CardTitle,
-} from "@/components/ui/card";
 import PricingPlans, { type BillingPlans } from "./pricing-plans";
 import { serverApi } from "@/lib/server-api";
 
@@ -17,26 +10,24 @@ const Billing = async () => {
     }
     if (user.plan === "oss") {
         return (
-            <section id="pricing" className="mb-2">
-                <p className="text-muted-foreground mb-4">
-                    This installation is unlocked. Storage and upload size are
-                    not limited by a plan.
-                </p>
-                <Card className="border-primary">
-                    <CardHeader>
-                        <CardTitle className="text-2xl font-bold">
-                            OSS
-                        </CardTitle>
-                        <CardDescription>
-                            Full access, with no checkout.
-                        </CardDescription>
-                    </CardHeader>
-                    <CardContent>
-                        <p className="text-sm text-slate-700">
-                            Unlimited storage and file size.
-                        </p>
-                    </CardContent>
-                </Card>
+            <section className="settings-card billing-oss-card">
+                <div>
+                    <span className="cl-badge cl-badge--success">
+                        <span className="cl-badge__dot" />
+                        Active
+                    </span>
+                    <h2>Open source plan</h2>
+                    <p className="settings-subtle">
+                        This installation is unlocked. Storage and upload size
+                        are not limited by a plan.
+                    </p>
+                </div>
+                <div className="billing-oss-details">
+                    <span>Storage</span>
+                    <strong>Unlimited</strong>
+                    <span>Maximum upload size</span>
+                    <strong>Unlimited</strong>
+                </div>
             </section>
         );
     }
@@ -47,11 +38,6 @@ const Billing = async () => {
     const billing: BillingPlans = await response.json();
     return (
         <section id="pricing" className="mb-2">
-            <p className="text-muted-foreground mb-4">
-                Leave all your upload woes to us! We take care of your file
-                uploads so that you focus on your users.
-            </p>
-
             <PricingPlans user={user} billing={billing} />
         </section>
     );
diff --git a/apps/web/app/account/billing/pricing-plans.tsx b/apps/web/app/account/billing/pricing-plans.tsx
index 81aa571a..455808c2 100644
--- a/apps/web/app/account/billing/pricing-plans.tsx
+++ b/apps/web/app/account/billing/pricing-plans.tsx
@@ -140,7 +140,7 @@ function PricingPane({
                     {features.map((feature) => (
                         <div
                             key={feature}
-                            className="flex items-center gap-2 text-slate-700 text-sm"
+                            className="flex items-center gap-2 text-foreground text-sm"
                         >
                             <CheckIcon className="h-4 w-4 text-primary" />
                             <p>{feature}</p>
@@ -152,7 +152,8 @@ function PricingPane({
                 {name === "Basic" && current && (
                     <Button
                         disabled
-                        className="w-full bg-white hover:bg-white text-muted-foreground border border-muted-foreground justify-center"
+                        variant="secondary"
+                        className="w-full justify-center"
                     >
                         Current plan
                     </Button>
diff --git a/apps/web/app/account/billing/resume-subscription-button.tsx b/apps/web/app/account/billing/resume-subscription-button.tsx
index 6ae3d6b1..168cca6e 100644
--- a/apps/web/app/account/billing/resume-subscription-button.tsx
+++ b/apps/web/app/account/billing/resume-subscription-button.tsx
@@ -3,9 +3,9 @@
 import { Button } from "@/components/ui/button";
 import { useFormStatus } from "react-dom";
 import { resumeSubscription } from "./action";
-import { useToast } from "@/components/ui/use-toast";
 import { useEffect, useActionState } from "react";
 import { useRouter } from "next/navigation";
+import { toast } from "sonner";
 
 export default function ResumeSubscriptionButton({
     paidThroughAt,
@@ -18,7 +18,6 @@ export default function ResumeSubscriptionButton({
     const [formState, formAction] = useActionState(resumeSubscription, {
         success: false,
     } as Awaited<ReturnType<typeof resumeSubscription>>);
-    const { toast } = useToast();
     const router = useRouter();
 
     useEffect(() => {
@@ -27,8 +26,7 @@ export default function ResumeSubscriptionButton({
                 window.location.href = formState.url;
                 return;
             }
-            toast({
-                title: "Welcome back!",
+            toast.success("Welcome back!", {
                 description: "Your subscription has been resumed",
             });
             router.refresh();
@@ -38,8 +36,7 @@ export default function ResumeSubscriptionButton({
             return;
         }
         if (formState.error) {
-            toast({
-                title: "Uh oh!",
+            toast.error("Uh oh!", {
                 description: formState.error,
             });
         }
diff --git a/apps/web/app/account/page.tsx b/apps/web/app/account/page.tsx
new file mode 100644
index 00000000..014939e9
--- /dev/null
+++ b/apps/web/app/account/page.tsx
@@ -0,0 +1,106 @@
+import Link from "next/link";
+import { redirect } from "next/navigation";
+import { ArrowUpRight, CreditCard, UserRound } from "lucide-react";
+import { auth } from "@/auth";
+import { getSubscriber, getUser } from "@/app/actions";
+
+export default async function AccountPage() {
+    const [session, account, user] = await Promise.all([
+        auth(),
+        getSubscriber(),
+        getUser(),
+    ]);
+    if (!session) redirect("/login?next=/account");
+    if (!account) redirect("/login?next=/account");
+
+    const planName =
+        account.plan === "oss"
+            ? "Open source"
+            : account.plan === "pro"
+              ? "Pro"
+              : "Basic";
+    const subscriptionStatus = account.subscription?.status;
+
+    return (
+        <>
+            <div className="workspace-page-heading">
+                <div>
+                    <h1>Account settings</h1>
+                    <p>
+                        Profile and subscription details for your MediaLit
+                        account.
+                    </p>
+                </div>
+            </div>
+
+            <div className="account-overview">
+                <section className="settings-card">
+                    <div className="settings-card-title">
+                        <span className="settings-card-icon">
+                            <UserRound aria-hidden="true" />
+                        </span>
+                        <div>
+                            <h2>Profile</h2>
+                            <p className="settings-subtle">
+                                Account information used to sign in.
+                            </p>
+                        </div>
+                    </div>
+                    <div className="account-profile-details">
+                        <span>Name</span>
+                        <strong>{user?.name || "—"}</strong>
+                        <span>Email</span>
+                        <strong>{account.email}</strong>
+                    </div>
+                </section>
+
+                <section className="settings-card">
+                    <div className="settings-card-title">
+                        <span className="settings-card-icon">
+                            <CreditCard aria-hidden="true" />
+                        </span>
+                        <div>
+                            <h2>Plan</h2>
+                            <p className="settings-subtle">
+                                Your plan sets storage and upload limits.
+                            </p>
+                        </div>
+                    </div>
+                    <div className="account-plan-row">
+                        <div>
+                            <span className="cl-badge cl-badge--default">
+                                {planName}
+                            </span>
+                            {subscriptionStatus ? (
+                                <span
+                                    className={`cl-badge cl-badge--${subscriptionStatus === "past_due" ? "warning" : subscriptionStatus === "cancelling" ? "neutral" : "success"}`}
+                                >
+                                    {subscriptionStatus === "past_due"
+                                        ? "Payment overdue"
+                                        : subscriptionStatus === "cancelling"
+                                          ? "Cancelling"
+                                          : "Active"}
+                                </span>
+                            ) : null}
+                        </div>
+                        <Link
+                            className="workspace-button secondary"
+                            href="/account/billing"
+                        >
+                            Manage billing <ArrowUpRight aria-hidden="true" />
+                        </Link>
+                    </div>
+                    {account.subscription?.paidThroughAt ? (
+                        <p className="settings-subtle account-paid-through">
+                            Access continues through{" "}
+                            {new Date(
+                                account.subscription.paidThroughAt,
+                            ).toLocaleDateString()}
+                            .
+                        </p>
+                    ) : null}
+                </section>
+            </div>
+        </>
+    );
+}
diff --git a/apps/web/app/actions.ts b/apps/web/app/actions.ts
index 97e72031..efc5a475 100644
--- a/apps/web/app/actions.ts
+++ b/apps/web/app/actions.ts
@@ -14,6 +14,8 @@ export async function getUser(): Promise<Session["user"] | null> {
     return session?.user ?? null;
 }
 
+/* Server actions below leave the session check to the API: it answers 401
+   without one, so checking here first would only add a round trip. */
 export async function getSubscriber(): Promise<
     | (Pick<User, "id" | "active" | "userId" | "email"> & {
           plan: "oss" | "basic" | "pro";
@@ -27,28 +29,72 @@ export async function getSubscriber(): Promise<
       })
     | null
 > {
-    const session = await auth();
-    if (!session?.user) return null;
     const response = await serverApi("/api/account");
     if (!response.ok) return null;
     return response.json();
 }
 
 export async function getApiKeys() {
-    const session = await auth();
-    if (!session?.user) return;
     const response = await serverApi("/api/apps");
     if (!response.ok) return;
     return response.json();
 }
 
+export type AppSummary = {
+    keyId: string;
+    name: string;
+    default: boolean;
+    count: number;
+    storage: number;
+    images: number;
+    videos: number;
+    pdfs: number;
+    others: number;
+    imageStorage: number;
+    videoStorage: number;
+    pdfStorage: number;
+    otherStorage: number;
+    lastUpload: string | null;
+    /** Percent of the account's storage. */
+    share: number;
+};
+
+export type AppsDashboardData = {
+    apps: AppSummary[];
+    appCount: number;
+    totalFiles: number;
+    totalStorage: number;
+    totalImages: number;
+    totalVideos: number;
+    totalPdfs: number;
+    totalOthers: number;
+    largestApp: {
+        keyId: string;
+        name: string;
+        storage: number;
+        share: number;
+    } | null;
+};
+
+export async function getAppsDashboard(): Promise<AppsDashboardData | null> {
+    const response = await serverApi("/api/apps/overview");
+    if (!response.ok) return null;
+    return response.json();
+}
+
+export async function getAppSummary(keyId: string): Promise<AppSummary> {
+    const response = await serverApi(
+        `/api/apps/${encodeURIComponent(keyId)}/summary`,
+    );
+    if (!response.ok) {
+        throw new Error(await errorMessage(response));
+    }
+    return response.json();
+}
+
 export async function getApikeyUsingKeyId(
     keyId: string,
 ): Promise<Pick<Apikey, "name" | "key" | "keyId" | "default"> | null> {
-    const session = await auth();
-    if (!session?.user) {
-        throw new Error("Unauthenticated");
-    }
     const response = await serverApi(`/api/apps/${encodeURIComponent(keyId)}`);
     if (response.status === 404) return null;
     if (!response.ok) {
@@ -60,7 +106,7 @@ export async function getApikeyUsingKeyId(
 export async function createNewApiKey(
     prevState: Record<string, unknown>,
     formData: FormData,
-): Promise<{ success: boolean; error?: string }> {
+): Promise<{ success: boolean; error?: string; keyId?: string }> {
     const name = formData.get("apiKey") as string;
     try {
         const response = await serverApi("/api/apps", {
@@ -70,7 +116,8 @@ export async function createNewApiKey(
         if (!response.ok) {
             return { success: false, error: await errorMessage(response) };
         }
-        return { success: true };
+        const data = await response.json();
+        return { success: true, keyId: data.keyId };
     } catch (err: any) {
         return { success: false, error: err.message };
     }
diff --git a/apps/web/app/app/[keyid]/connect/connect-guide.tsx b/apps/web/app/app/[keyid]/connect/connect-guide.tsx
new file mode 100644
index 00000000..5b40476c
--- /dev/null
+++ b/apps/web/app/app/[keyid]/connect/connect-guide.tsx
@@ -0,0 +1,186 @@
+"use client";
+
+import { useState } from "react";
+import { Check, ChevronDown, Copy, ExternalLink } from "lucide-react";
+
+export default function ConnectGuide({
+    appName,
+    apiEndpoint,
+    includeCliEndpoint,
+    serverUrl,
+}: {
+    appName: string;
+    apiEndpoint: string;
+    includeCliEndpoint: boolean;
+    serverUrl: string;
+}) {
+    const [copied, setCopied] = useState<string | null>(null);
+    const [copyError, setCopyError] = useState<string | null>(null);
+
+    async function copyText(text: string, key: string) {
+        try {
+            await navigator.clipboard.writeText(text);
+            setCopied(key);
+            setCopyError(null);
+            window.setTimeout(() => setCopied(null), 1800);
+        } catch {
+            setCopyError(key);
+        }
+    }
+
+    const cliCommands = [
+        {
+            name: "Install the CLI",
+            key: "cli-install",
+            command: "npm install -g @medialit/cli",
+        },
+        {
+            name: "Log in and choose this app",
+            key: "cli-login",
+            command: `medialit login${includeCliEndpoint ? ` --endpoint "${apiEndpoint}"` : ""}`,
+        },
+        {
+            name: "Upload a file",
+            key: "cli-upload",
+            command: "medialit upload ./photo.jpg --public",
+        },
+    ];
+
+    function mcpUrlRow(id: string, copyKey: string) {
+        return (
+            <>
+                <label className="connect-url-label" htmlFor={id}>
+                    MCP server URL
+                </label>
+                <div className="connect-url-row">
+                    <input id={id} value={serverUrl} readOnly />
+                    <button
+                        type="button"
+                        className="workspace-button secondary"
+                        onClick={() => copyText(serverUrl, copyKey)}
+                    >
+                        {copied === copyKey ? (
+                            <Check aria-hidden="true" />
+                        ) : (
+                            <Copy aria-hidden="true" />
+                        )}
+                        {copied === copyKey ? "Copied" : "Copy URL"}
+                    </button>
+                </div>
+                {copyError === copyKey ? (
+                    <p className="inline-error" role="alert">
+                        Could not copy the server URL. Select and copy it
+                        instead.
+                    </p>
+                ) : null}
+            </>
+        );
+    }
+
+    return (
+        <div className="connect-panel">
+            <details className="connect-method-card" open>
+                <summary>
+                    <h2>MCP</h2>
+                    <ChevronDown aria-hidden="true" />
+                </summary>
+                <div className="connect-method-content">
+                    <p>
+                        Add MediaLit as an MCP server so your AI assistant can
+                        find files, upload new ones, copy their URLs, and change
+                        who can see them in {appName}. No API key needed.
+                    </p>
+                    {mcpUrlRow("mcp-server-url", "mcp-url")}
+                    <ol className="connect-steps">
+                        <li>
+                            Open your AI client’s MCP settings and add a remote
+                            server.
+                        </li>
+                        <li>
+                            Choose an HTTP or Streamable HTTP connection, then
+                            paste the MCP server URL above.
+                        </li>
+                        <li>
+                            Connect and sign in to MediaLit, then select{" "}
+                            {appName} when prompted.
+                        </li>
+                    </ol>
+                    <div className="connect-asks">
+                        <h3>Things to ask once it’s connected</h3>
+                        <ul className="connect-examples">
+                            <li>
+                                “Upload ./assets/hero.png to {appName} and give
+                                me its URL.”
+                            </li>
+                            <li>
+                                “Which videos in {appName} are larger than 2
+                                MB?”
+                            </li>
+                            <li>“Make every PDF in {appName} private.”</li>
+                        </ul>
+                    </div>
+                </div>
+            </details>
+
+            <details className="connect-method-card">
+                <summary>
+                    <h2>CLI</h2>
+                    <ChevronDown aria-hidden="true" />
+                </summary>
+                <div className="connect-method-content">
+                    <p>
+                        Install MediaLit’s CLI, sign in in your browser and
+                        select this app, then upload files from your terminal.
+                    </p>
+                    <div className="connect-cli-commands">
+                        {cliCommands.map(({ name, key, command }) => (
+                            <div className="connect-cli-command" key={key}>
+                                <div className="connect-cli-command-heading">
+                                    <strong>{name}</strong>
+                                    <button
+                                        type="button"
+                                        className="workspace-button secondary"
+                                        onClick={() => copyText(command, key)}
+                                        aria-label={`Copy ${name} command`}
+                                    >
+                                        {copied === key ? (
+                                            <Check aria-hidden="true" />
+                                        ) : (
+                                            <Copy aria-hidden="true" />
+                                        )}
+                                        {copied === key ? "Copied" : "Copy"}
+                                    </button>
+                                </div>
+                                <code>{command}</code>
+                            </div>
+                        ))}
+                    </div>
+                    {copyError?.startsWith("cli-") ? (
+                        <p className="inline-error" role="alert">
+                            Could not copy the command. Select and copy it
+                            instead.
+                        </p>
+                    ) : null}
+                </div>
+            </details>
+
+            <section className="connect-docs-card">
+                <div>
+                    <strong>SDK and REST API</strong>
+                    <p>
+                        Use this app’s API key to upload and serve files from
+                        your own product.
+                    </p>
+                </div>
+                <a
+                    className="workspace-button secondary"
+                    href="https://docs.medialit.cloud/quick-start"
+                    target="_blank"
+                    rel="noreferrer"
+                >
+                    Read the docs <ExternalLink aria-hidden="true" />
+                </a>
+            </section>
+        </div>
+    );
+}
diff --git a/apps/web/app/app/[keyid]/connect/page.tsx b/apps/web/app/app/[keyid]/connect/page.tsx
new file mode 100644
index 00000000..78136a2f
--- /dev/null
+++ b/apps/web/app/app/[keyid]/connect/page.tsx
@@ -0,0 +1,39 @@
+import { redirect } from "next/navigation";
+import { headers } from "next/headers";
+import { auth } from "@/auth";
+import { getApikeyUsingKeyId } from "@/app/actions";
+import { cliNeedsEndpoint, getPublicApiBase } from "@/lib/api-base";
+import ConnectGuide from "./connect-guide";
+
+export default async function ConnectPage(props: {
+    params: Promise<{ keyid: string }>;
+}) {
+    const [{ keyid }, session] = await Promise.all([props.params, auth()]);
+    if (!session) redirect("/login");
+
+    const app = await getApikeyUsingKeyId(keyid);
+    if (!app) redirect("/");
+
+    const apiBase = getPublicApiBase(await headers());
+    const includeCliEndpoint = cliNeedsEndpoint(apiBase);
+
+    return (
+        <>
+            <div className="workspace-page-heading">
+                <div>
+                    <h1>Connect</h1>
+                    <p>
+                        Work with {app.name || "this app"} from an AI assistant
+                        or your own code.
+                    </p>
+                </div>
+            </div>
+            <ConnectGuide
+                appName={app.name || "this app"}
+                apiEndpoint={apiBase}
+                includeCliEndpoint={includeCliEndpoint}
+                serverUrl={`${apiBase}/mcp`}
+            />
+        </>
+    );
+}
diff --git a/apps/web/app/app/[keyid]/files/actions.ts b/apps/web/app/app/[keyid]/files/actions.ts
index 34cac726..518fe0a7 100644
--- a/apps/web/app/app/[keyid]/files/actions.ts
+++ b/apps/web/app/app/[keyid]/files/actions.ts
@@ -1,19 +1,34 @@
 "use server";
 
-import { auth } from "@/auth";
 import { serverApi } from "@/lib/server-api";
-import { Media } from "@medialit/models";
+import type { MediaListItem } from "@/lib/media";
+
+export type MediaFilters = {
+    search?: string;
+    kind?: "image" | "video" | "pdf" | "other";
+    sort?: "newest" | "oldest" | "name" | "largest";
+};
+
+function filtersQuery(filters: MediaFilters = {}) {
+    const query = new URLSearchParams();
+    if (filters.search?.trim()) query.set("search", filters.search.trim());
+    if (filters.kind) query.set("kind", filters.kind);
+    if (filters.sort && filters.sort !== "newest")
+        query.set("sort", filters.sort);
+    return query;
+}
 
 export async function getMediaFiles(
     keyid: string,
     page: number,
-): Promise<Media[]> {
-    const session = await auth();
-    if (!session?.user) {
-        throw new Error("Unauthenticated");
-    }
+    limit = 16,
+    filters: MediaFilters = {},
+): Promise<MediaListItem[]> {
+    const query = filtersQuery(filters);
+    query.set("page", String(page || 1));
+    query.set("limit", String(limit));
     const response = await serverApi(
-        `/api/apps/${encodeURIComponent(keyid)}/media?page=${page || 1}&limit=10`,
+        `/api/apps/${encodeURIComponent(keyid)}/media?${query.toString()}`,
     );
     if (!response.ok) {
         const data = await response.json().catch(() => ({}));
@@ -22,13 +37,11 @@ export async function getMediaFiles(
     return response.json();
 }
 
-export async function getCount(keyid: string) {
-    const session = await auth();
-    if (!session?.user) {
-        throw new Error("Unauthenticated");
-    }
+export async function getCount(keyid: string, filters: MediaFilters = {}) {
+    const query = filtersQuery(filters);
+    const suffix = query.size ? `?${query.toString()}` : "";
     const response = await serverApi(
-        `/api/apps/${encodeURIComponent(keyid)}/media/count`,
+        `/api/apps/${encodeURIComponent(keyid)}/media/count${suffix}`,
     );
     if (!response.ok) {
         const data = await response.json().catch(() => ({}));
diff --git a/apps/web/app/app/[keyid]/files/empty-files.tsx b/apps/web/app/app/[keyid]/files/empty-files.tsx
new file mode 100644
index 00000000..c6ddbb8e
--- /dev/null
+++ b/apps/web/app/app/[keyid]/files/empty-files.tsx
@@ -0,0 +1,334 @@
+"use client";
+
+import { useRef, useState, type DragEvent } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { Check, Copy, LoaderCircle, Upload } from "lucide-react";
+import { toast } from "sonner";
+import {
+    uploadFilesToApp,
+    uploadLabel,
+    type UploadStatus,
+} from "./upload-files";
+
+type ToolTab = "mcp" | "cli" | "sdk";
+
+const toolTabs: { key: ToolTab; label: string }[] = [
+    { key: "mcp", label: "AI assistant (MCP)" },
+    { key: "cli", label: "CLI" },
+    { key: "sdk", label: "SDK and API" },
+];
+
+const panelClass = (active: boolean) =>
+    `[grid-area:1/1] ${active ? "" : "invisible"}`;
+
+const stepClass = "grid list-none grid-cols-[26px_minmax(0,1fr)] gap-3";
+const stepNumberClass =
+    "grid h-[26px] w-[26px] place-items-center rounded-full bg-muted text-[13px] font-semibold text-muted-foreground";
+
+export default function EmptyFiles({
+    keyid,
+    appName,
+    serverUrl,
+    apiEndpoint,
+    includeCliEndpoint,
+}: {
+    keyid: string;
+    appName: string;
+    serverUrl: string;
+    apiEndpoint: string;
+    includeCliEndpoint: boolean;
+}) {
+    const inputRef = useRef<HTMLInputElement>(null);
+    const router = useRouter();
+    const [dragging, setDragging] = useState(false);
+    const [busy, setBusy] = useState(false);
+    const [status, setStatus] = useState<UploadStatus | null>(null);
+    const [error, setError] = useState("");
+    const [tab, setTab] = useState<ToolTab>("mcp");
+    const [copied, setCopied] = useState<string | null>(null);
+
+    async function upload(files: File[]) {
+        if (!files.length) return;
+
+        setBusy(true);
+        setError("");
+        setStatus(null);
+        const result = await uploadFilesToApp(keyid, files, setStatus);
+        setStatus(null);
+        if (result.error) setError(result.error);
+        setBusy(false);
+        if (result.uploaded) {
+            toast.success(
+                result.uploaded === 1
+                    ? "File uploaded"
+                    : `${result.uploaded} files uploaded`,
+            );
+            router.refresh();
+        }
+    }
+
+    function handleDrop(event: DragEvent<HTMLDivElement>) {
+        event.preventDefault();
+        setDragging(false);
+        if (busy) return;
+        upload(Array.from(event.dataTransfer.files));
+    }
+
+    async function copyText(text: string, key: string) {
+        try {
+            await navigator.clipboard.writeText(text);
+            setCopied(key);
+            window.setTimeout(() => setCopied(null), 1800);
+        } catch {
+            setError("Could not copy. Select the text and copy it instead.");
+        }
+    }
+
+    const cliCommands = [
+        { key: "cli-install", command: "npm install -g @medialit/cli" },
+        {
+            key: "cli-login",
+            command: `medialit login${includeCliEndpoint ? ` --endpoint "${apiEndpoint}"` : ""}`,
+        },
+        {
+            key: "cli-upload",
+            command: "medialit upload ./assets/hero.png --public",
+        },
+    ];
+
+    const assistantPrompt = `Upload ./assets/hero.png to ${appName} and give me its URL.`;
+
+    function copyBox(text: string, copyKey: string) {
+        return (
+            <div className="flex min-w-0 items-center justify-between gap-2 rounded-[10px] bg-muted py-2 pl-3 pr-2">
+                <code className="min-w-0 overflow-x-auto whitespace-nowrap font-mono text-[13px] leading-5">
+                    {text}
+                </code>
+                <button
+                    type="button"
+                    className="workspace-button secondary shrink-0"
+                    onClick={() => copyText(text, copyKey)}
+                    aria-label={`Copy ${text}`}
+                >
+                    {copied === copyKey ? (
+                        <Check aria-hidden="true" />
+                    ) : (
+                        <Copy aria-hidden="true" />
+                    )}
+                    {copied === copyKey ? "Copied" : "Copy"}
+                </button>
+            </div>
+        );
+    }
+
+    return (
+        <div className="grid items-stretch gap-5 min-[860px]:grid-cols-2">
+            <div
+                className={`flex min-h-[420px] flex-col items-center justify-center gap-1.5 rounded-[14px] border border-dashed p-9 text-center transition-colors ${
+                    dragging
+                        ? "border-primary bg-[color-mix(in_oklch,var(--primary),transparent_92%)]"
+                        : "border-border bg-[color-mix(in_oklch,var(--card),transparent_35%)]"
+                }`}
+                onDragOver={(event) => {
+                    event.preventDefault();
+                    setDragging(true);
+                }}
+                onDragLeave={() => setDragging(false)}
+                onDrop={handleDrop}
+            >
+                <input
+                    ref={inputRef}
+                    type="file"
+                    multiple
+                    className="sr-only"
+                    aria-label="Choose files to upload"
+                    onChange={(event) => {
+                        const files = Array.from(event.target.files ?? []);
+                        event.target.value = "";
+                        upload(files);
+                    }}
+                />
+                <div className="mb-3.5 grid h-[70px] w-[70px] place-items-center rounded-2xl bg-[color-mix(in_oklch,var(--primary),transparent_88%)] text-muted-foreground [&_svg]:h-[26px] [&_svg]:w-[26px]">
+                    {busy ? (
+                        <LoaderCircle
+                            className="animate-spin"
+                            aria-hidden="true"
+                        />
+                    ) : (
+                        <Upload aria-hidden="true" />
+                    )}
+                </div>
+                <h2
+                    className="m-0 text-[17px] font-semibold"
+                    aria-live="polite"
+                >
+                    {busy
+                        ? uploadLabel(status)
+                        : `Drop files to upload to ${appName}`}
+                </h2>
+                <p className="m-0 text-muted-foreground">
+                    or{" "}
+                    <button
+                        type="button"
+                        className="cursor-pointer bg-transparent p-0 font-[inherit] text-primary underline disabled:cursor-not-allowed disabled:opacity-60"
+                        disabled={busy}
+                        onClick={() => inputRef.current?.click()}
+                    >
+                        browse your computer
+                    </button>
+                </p>
+                <span className="text-[13px] text-muted-foreground">
+                    Images, videos, PDFs and other files
+                </span>
+                {error ? (
+                    <span className="inline-error" role="alert">
+                        {error}
+                    </span>
+                ) : null}
+            </div>
+
+            <section
+                className="flex flex-col gap-4 rounded-[14px] border border-border bg-card p-[22px]"
+                aria-label="Upload from your tools"
+            >
+                <div className="flex flex-wrap items-center justify-between gap-3">
+                    <h2 className="m-0 text-base font-semibold">
+                        Or upload from your tools
+                    </h2>
+                    <Link
+                        href={`/app/${encodeURIComponent(keyid)}/connect`}
+                        className="text-sm text-primary no-underline"
+                    >
+                        All options in Connect →
+                    </Link>
+                </div>
+
+                <div
+                    className="inline-flex flex-wrap gap-1 self-start rounded-[10px] bg-muted p-1"
+                    role="tablist"
+                >
+                    {toolTabs.map(({ key, label }) => (
+                        <button
+                            key={key}
+                            type="button"
+                            role="tab"
+                            aria-selected={tab === key}
+                            onClick={() => setTab(key)}
+                            className={`min-h-8 cursor-pointer rounded-[7px] px-3 font-[inherit] text-sm ${
+                                tab === key
+                                    ? "bg-background text-foreground shadow-sm"
+                                    : "bg-transparent text-muted-foreground"
+                            }`}
+                        >
+                            {label}
+                        </button>
+                    ))}
+                </div>
+
+                <div className="grid">
+                    <div
+                        className={panelClass(tab === "mcp")}
+                        aria-hidden={tab !== "mcp"}
+                    >
+                        <ol className="m-0 grid gap-3.5 p-0">
+                            <li className={stepClass}>
+                                <span className={stepNumberClass}>1</span>
+                                <div>
+                                    <p className="mb-2 leading-normal">
+                                        Add a remote MCP server in your AI
+                                        client and paste this URL.
+                                    </p>
+                                    {copyBox(serverUrl, "mcp-url")}
+                                </div>
+                            </li>
+                            <li className={stepClass}>
+                                <span className={stepNumberClass}>2</span>
+                                <div>
+                                    <p className="mb-2 leading-normal">
+                                        Sign in to MediaLit and choose{" "}
+                                        <strong>{appName}</strong> when asked.
+                                    </p>
+                                </div>
+                            </li>
+                            <li className={stepClass}>
+                                <span className={stepNumberClass}>3</span>
+                                <div>
+                                    <p className="mb-2 leading-normal">
+                                        Ask your assistant to upload something:
+                                    </p>
+                                    {copyBox(assistantPrompt, "mcp-prompt")}
+                                </div>
+                            </li>
+                        </ol>
+                    </div>
+
+                    <div
+                        className={panelClass(tab === "cli")}
+                        aria-hidden={tab !== "cli"}
+                    >
+                        <ol className="m-0 grid gap-3.5 p-0">
+                            <li className={stepClass}>
+                                <span className={stepNumberClass}>1</span>
+                                <div>
+                                    <p className="mb-2 leading-normal">
+                                        Install the MediaLit CLI.
+                                    </p>
+                                    {copyBox(
+                                        cliCommands[0].command,
+                                        cliCommands[0].key,
+                                    )}
+                                </div>
+                            </li>
+                            <li className={stepClass}>
+                                <span className={stepNumberClass}>2</span>
+                                <div>
+                                    <p className="mb-2 leading-normal">
+                                        Log in in your browser and choose{" "}
+                                        <strong>{appName}</strong>.
+                                    </p>
+                                    {copyBox(
+                                        cliCommands[1].command,
+                                        cliCommands[1].key,
+                                    )}
+                                </div>
+                            </li>
+                            <li className={stepClass}>
+                                <span className={stepNumberClass}>3</span>
+                                <div>
+                                    <p className="mb-2 leading-normal">
+                                        Upload a file from your terminal.
+                                    </p>
+                                    {copyBox(
+                                        cliCommands[2].command,
+                                        cliCommands[2].key,
+                                    )}
+                                </div>
+                            </li>
+                        </ol>
+                    </div>
+
+                    <div
+                        className={panelClass(tab === "sdk")}
+                        aria-hidden={tab !== "sdk"}
+                    >
+                        <div>
+                            <p className="mb-3 leading-normal text-muted-foreground">
+                                Use {appName}’s API key to upload and serve
+                                files from your own product.
+                            </p>
+                            <a
+                                className="workspace-button secondary"
+                                href="https://docs.medialit.cloud/quick-start"
+                                target="_blank"
+                                rel="noreferrer"
+                            >
+                                Read the docs
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+    );
+}
diff --git a/apps/web/app/app/[keyid]/files/file-preview/file-interactivity.tsx b/apps/web/app/app/[keyid]/files/file-preview/file-interactivity.tsx
index 8b7c217b..c60e475d 100644
--- a/apps/web/app/app/[keyid]/files/file-preview/file-interactivity.tsx
+++ b/apps/web/app/app/[keyid]/files/file-preview/file-interactivity.tsx
@@ -1,93 +1,85 @@
 "use client";
 
+import { toast } from "sonner";
+import { Copy } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { useToast } from "@/components/ui/use-toast";
-import { Media } from "@medialit/models";
-import { useState } from "react";
 
 export default function FileInteractivity({
     media,
-    keyid,
+    fileUrl,
+    loadError,
 }: {
-    media: Media & {
-        access: "public" | "private";
-    };
-    keyid: string;
+    media: { access: "public" | "private" };
+    fileUrl: string;
+    loadError: boolean;
 }) {
-    const { toast } = useToast();
-    const [fileDirectLink, setFileDirectLink] = useState();
-    const [loading, setLoading] = useState(false);
-
-    const directLink = async () => {
-        setLoading(true);
-        try {
-            const response = await fetch(`/app/${keyid}/files/get-media`, {
-                method: "POST",
-                headers: {
-                    "Content-Type": "application/json",
-                },
-                body: JSON.stringify({
-                    mediaId: media.mediaId,
-                    keyId: keyid,
-                }),
-            });
+    const isPublic = media.access !== "private";
 
-            if (!response.ok) {
-                throw new Error(
-                    `Some error occured while fetching direct link`,
-                );
-            }
-            const data = await response.json();
-
-            if (data?.media?.file) {
-                setFileDirectLink(data.media.file);
-                navigator.clipboard.writeText(data.media.file);
-                toast({
-                    description: "Direct link has been copied to the clipboard",
-                });
-            }
-        } catch (e) {
-            toast({
-                description: "Error in fetching direct link",
-            });
-        } finally {
-            setLoading(false);
-        }
+    const copyUrl = () => {
+        navigator.clipboard.writeText(fileUrl);
+        toast.success("Success", {
+            description: isPublic
+                ? "Link has been copied to the clipboard"
+                : "Temporary link has been copied to the clipboard",
+        });
     };
 
     return (
-        <div className="flex flex-col gap-2">
-            <div>
-                <Label htmlFor="apikey" className="mb-2">
-                    Media ID
-                </Label>
-                <div className="flex gap-2">
-                    <Input value={media.mediaId} name="mediaId" disabled />
-                    <Button
-                        onClick={() => {
-                            navigator.clipboard.writeText(media.mediaId);
-                            toast({
-                                description:
-                                    "Media id has been copied to the clipboard",
-                            });
-                        }}
-                    >
-                        Copy
-                    </Button>
+        <div className="file-actions">
+            {isPublic ? (
+                <div className="file-url-field">
+                    <Label htmlFor="file-url">File URL</Label>
+                    <div className="file-url-row">
+                        <input
+                            id="file-url"
+                            className="file-url-input"
+                            readOnly
+                            value={
+                                fileUrl ||
+                                (loadError ? "Could not load the file URL" : "")
+                            }
+                            placeholder="Loading…"
+                        />
+                        <Button
+                            variant="outline"
+                            size="icon"
+                            onClick={copyUrl}
+                            disabled={!fileUrl}
+                            aria-label="Copy file URL"
+                        >
+                            <Copy aria-hidden="true" />
+                        </Button>
+                    </div>
                 </div>
-            </div>
-            <div>
-                <Label htmlFor="apikey" className="mb-2">
-                    Direct Link
-                </Label>
-                <div className="flex gap-2">
-                    <Input value={fileDirectLink} name="file" disabled />
-                    <Button onClick={directLink} disabled={loading}>
-                        {loading ? "Fetching..." : "Get direct link"}
-                    </Button>
+            ) : null}
+
+            <div className="file-access-row">
+                <div>
+                    <p className="file-access-title">
+                        {isPublic ? "Public" : "Private"}
+                    </p>
+                    <p>
+                        {isPublic
+                            ? "Anyone with the URL can view this file. Access is set at upload and can’t be changed."
+                            : "Only signed links that expire can open this file. Access is set at upload and can’t be changed."}
+                    </p>
                 </div>
+                <span className={`file-badge${isPublic ? " is-public" : ""}`}>
+                    {isPublic ? "Public" : "Private"}
+                </span>
+            </div>
+
+            <div className="file-dialog-buttons">
+                <Button variant="outline" onClick={copyUrl} disabled={!fileUrl}>
+                    <Copy aria-hidden="true" />
+                    {isPublic ? "Copy direct link" : "Copy temporary link"}
+                </Button>
+                {isPublic ? null : (
+                    <p className="w-full text-xs text-muted-foreground">
+                        This link stops working after a short time.
+                    </p>
+                )}
             </div>
         </div>
     );
diff --git a/apps/web/app/app/[keyid]/files/file-preview/index.tsx b/apps/web/app/app/[keyid]/files/file-preview/index.tsx
index 8610e8c6..6dabf01b 100644
--- a/apps/web/app/app/[keyid]/files/file-preview/index.tsx
+++ b/apps/web/app/app/[keyid]/files/file-preview/index.tsx
@@ -1,179 +1,357 @@
-import { Media } from "@medialit/models";
+"use client";
+
+import type { ReactNode } from "react";
 import Image from "next/image";
+import { Checkbox } from "@codelitdev/design-system";
+import {
+    FileArchive,
+    FileAudio,
+    FileCode2,
+    FileImage,
+    FileText,
+    FileVideo,
+    File as FileIcon,
+    Globe,
+    LockKeyhole,
+} from "lucide-react";
+import { Loader } from "@codelitdev/design-system";
+import type { MediaListItem } from "@/lib/media";
+import { formatFileSize, formatRelativeUpload } from "@/lib/media-format";
 import {
     Dialog,
     DialogContent,
-    DialogHeader,
     DialogTitle,
     DialogTrigger,
-    DialogClose,
 } from "@/components/ui/dialog";
-import { Label } from "@/components/ui/label";
-import { Input } from "@/components/ui/input";
-import { Switch } from "@/components/ui/switch";
-import { Card, CardContent, CardFooter } from "@/components/ui/card";
-import { Separator } from "@/components/ui/separator";
 import FileInteractivity from "./file-interactivity";
-import {
-    FileText,
-    FileImage,
-    FileVideo,
-    FileAudio,
-    FileCode,
-    FileArchive,
-    File,
-} from "lucide-react";
+import { useFileUrl } from "./use-file-url";
 
-const FileTypeIcon = ({ mimeType }: { mimeType: string }) => {
-    const [type] = mimeType.split("/");
-    const iconSize = 48;
+/* The API decides each file's kind; these are just its labels. */
+const kindLabels: Record<MediaListItem["kind"], string> = {
+    image: "Image",
+    video: "Video",
+    pdf: "PDF",
+    other: "File",
+};
 
-    switch (type) {
-        case "image":
-            return <FileImage size={iconSize} className="text-blue-500" />;
-        case "video":
-            return <FileVideo size={iconSize} className="text-purple-500" />;
-        case "audio":
-            return <FileAudio size={iconSize} className="text-green-500" />;
-        case "text":
-            return <FileText size={iconSize} className="text-gray-500" />;
-        case "application":
-            if (mimeType.includes("pdf")) {
-                return <FileText size={iconSize} className="text-red-500" />;
-            } else if (
-                mimeType.includes("zip") ||
-                mimeType.includes("rar") ||
-                mimeType.includes("tar")
-            ) {
-                return (
-                    <FileArchive size={iconSize} className="text-orange-500" />
-                );
-            } else if (
-                mimeType.includes("json") ||
-                mimeType.includes("javascript") ||
-                mimeType.includes("xml")
-            ) {
-                return <FileCode size={iconSize} className="text-yellow-500" />;
-            }
-            return <File size={iconSize} className="text-gray-500" />;
-        default:
-            return <File size={iconSize} className="text-gray-500" />;
+export function FileTypeIcon({ mimeType }: { mimeType: string }) {
+    if (mimeType.startsWith("image/")) return <FileImage aria-hidden="true" />;
+    if (mimeType.startsWith("video/")) return <FileVideo aria-hidden="true" />;
+    if (mimeType.startsWith("audio/")) return <FileAudio aria-hidden="true" />;
+    if (mimeType === "application/pdf") return <FileText aria-hidden="true" />;
+    if (/zip|rar|tar|gzip/.test(mimeType))
+        return <FileArchive aria-hidden="true" />;
+    if (/json|javascript|xml|text/.test(mimeType))
+        return <FileCode2 aria-hidden="true" />;
+    return <FileIcon aria-hidden="true" />;
+}
+
+/* Shows the real file once its URL has loaded. Until then, or for types we
+   cannot render inline, it falls back to the thumbnail or a type icon. */
+function FilePreviewMedia({
+    media,
+    fileUrl,
+    loadError,
+}: {
+    media: MediaListItem;
+    fileUrl: string;
+    loadError: boolean;
+}) {
+    if (!fileUrl && !loadError) {
+        return (
+            <span className="file-dialog-loading" role="status">
+                <Loader product="medialit" size={96} />
+                <span className="visually-hidden">Loading preview</span>
+            </span>
+        );
     }
-};
 
-export default function FilePreview({
+    if (fileUrl) {
+        if (media.mimeType.startsWith("image/")) {
+            return (
+                <Image
+                    src={fileUrl}
+                    alt={media.originalFileName}
+                    fill
+                    className="object-contain"
+                    unoptimized
+                />
+            );
+        }
+        if (media.mimeType.startsWith("video/")) {
+            return (
+                <video
+                    className="file-dialog-media"
+                    src={fileUrl}
+                    controls
+                    preload="metadata"
+                />
+            );
+        }
+        if (media.mimeType.startsWith("audio/")) {
+            return (
+                <div className="file-dialog-audio">
+                    <FileAudio aria-hidden="true" />
+                    <audio src={fileUrl} controls preload="metadata" />
+                </div>
+            );
+        }
+        if (media.mimeType === "application/pdf") {
+            return (
+                <iframe
+                    className="file-dialog-media"
+                    src={fileUrl}
+                    title={`Preview of ${media.originalFileName}`}
+                />
+            );
+        }
+    }
+
+    if (media.thumbnail) {
+        return (
+            <Image
+                src={media.thumbnail}
+                alt={media.originalFileName}
+                fill
+                className="object-contain"
+                unoptimized
+            />
+        );
+    }
+    return (
+        <span className="file-type-icon">
+            <FileTypeIcon mimeType={media.mimeType} />
+        </span>
+    );
+}
+
+/* Dialog body. Mounted only while the dialog is open, so the file URL is
+   fetched each time the details are opened. */
+function FileDetailsContent({
     media,
     keyid,
 }: {
-    media: Media & {
-        thumbnail: string;
-        access: "public" | "private";
-    };
+    media: MediaListItem;
     keyid: string;
 }) {
+    const { url, error } = useFileUrl(keyid, media.mediaId);
+    const kind = kindLabels[media.kind];
+    const fileLabel =
+        media.originalFileName.split(".").at(-1)?.toUpperCase() || kind;
+    const isPublic = media.access !== "private";
+
     return (
-        <Dialog>
-            <DialogTrigger asChild>
-                <Card className="cursor-pointer hover:shadow-lg transition-shadow">
-                    <CardContent className="p-0">
-                        <div className="relative h-[148px] w-full flex items-center justify-center bg-muted">
-                            {media.thumbnail ? (
-                                <Image
-                                    src={media.thumbnail}
-                                    alt="Media"
-                                    priority={true}
-                                    quality={100}
-                                    fill
-                                    className="object-cover rounded-t-lg"
-                                />
-                            ) : (
-                                <FileTypeIcon mimeType={media.mimeType} />
-                            )}
-                        </div>
-                    </CardContent>
-                    <CardFooter className="p-2 flex flex-col items-start">
-                        <div className="text-sm truncate w-full">
-                            {media.originalFileName}
-                        </div>
-                        <div className="text-muted-foreground text-sm">
-                            {media.mimeType.split("/")[0]}
-                        </div>
-                    </CardFooter>
-                </Card>
-            </DialogTrigger>
-            <DialogContent className="sm:max-w-[600px] gap-0 p-0">
-                <div className="relative h-[200px] w-full flex items-center justify-center bg-muted">
-                    {media.thumbnail ? (
-                        <Image
-                            alt="File preview"
-                            src={media.thumbnail}
-                            fill
-                            className="object-cover rounded-t-lg"
-                            priority
-                        />
-                    ) : (
-                        <FileTypeIcon mimeType={media.mimeType} />
-                    )}
-                </div>
-                <div className="p-6">
-                    <DialogHeader>
-                        <DialogTitle className="text-xl">
-                            File details
-                        </DialogTitle>
-                    </DialogHeader>
-                    <div className="mt-6 space-y-4">
-                        <div className="grid grid-cols-2 gap-4">
-                            <div>
-                                <Label className="text-muted-foreground">
-                                    File name
-                                </Label>
-                                <div className="font-medium mt-1">
-                                    {media.originalFileName}
-                                </div>
-                            </div>
-                            <div>
-                                <Label className="text-muted-foreground">
-                                    Group
-                                </Label>
-                                <div className="font-medium mt-1">
-                                    {media.group}
-                                </div>
-                            </div>
-                        </div>
-                        <Separator />
-                        <div className="grid grid-cols-2 gap-4">
-                            <div>
-                                <Label className="text-muted-foreground">
-                                    Size
-                                </Label>
-                                <div className="font-medium mt-1">
-                                    {(media.size / 1024 / 1024).toFixed(2)} MB
-                                </div>
-                            </div>
-                            <div>
-                                <Label className="text-muted-foreground">
-                                    Mime type
-                                </Label>
-                                <div className="font-medium mt-1">
-                                    {media.mimeType}
-                                </div>
-                            </div>
-                        </div>
-                        <div className="flex items-center justify-between">
-                            <Label className="text-muted-foreground">
-                                Public access
-                            </Label>
-                            <Switch
-                                checked={media.access !== "private"}
-                                disabled={true}
-                                name="public"
-                            />
-                        </div>
-                        <Separator />
-                        <FileInteractivity media={media} keyid={keyid} />
+        <>
+            <DialogTitle className="file-dialog-title">
+                File details
+            </DialogTitle>
+            <div className="file-dialog-preview">
+                <FilePreviewMedia
+                    media={media}
+                    fileUrl={url}
+                    loadError={error}
+                />
+                <span className="file-preview-caption">{fileLabel}</span>
+            </div>
+            <div className="file-dialog-body">
+                <div>
+                    <h3 className="file-dialog-name">
+                        {media.originalFileName}
+                    </h3>
+                    <div className="file-dialog-badges">
+                        <span className="file-badge">{kind}</span>
+                        <span
+                            className={`file-badge${isPublic ? " is-public" : ""}`}
+                        >
+                            {isPublic ? "Public" : "Private"}
+                        </span>
                     </div>
                 </div>
+                <dl className="file-dialog-facts">
+                    <div>
+                        <dt>Size</dt>
+                        <dd className="mono">
+                            {formatFileSize(media.size)} (
+                            {media.size.toLocaleString()} bytes)
+                        </dd>
+                    </div>
+                    <div>
+                        <dt>MIME type</dt>
+                        <dd className="mono">{media.mimeType}</dd>
+                    </div>
+                    <div>
+                        <dt>Uploaded</dt>
+                        <dd>{formatRelativeUpload(media.createdAt)}</dd>
+                    </div>
+                    <div>
+                        <dt>File ID</dt>
+                        <dd className="mono">{media.mediaId}</dd>
+                    </div>
+                </dl>
+                <FileInteractivity
+                    media={media}
+                    fileUrl={url}
+                    loadError={error}
+                />
+            </div>
+        </>
+    );
+}
+
+/* The details dialog shared by grid cards and table rows. */
+function FileDetailsDialog({
+    media,
+    keyid,
+    children,
+}: {
+    media: MediaListItem;
+    keyid: string;
+    children: ReactNode;
+}) {
+    return (
+        <Dialog>
+            <DialogTrigger asChild>{children}</DialogTrigger>
+            <DialogContent className="file-dialog sm:max-w-[960px] max-w-[calc(100vw-24px)] gap-0 overflow-hidden p-0">
+                <FileDetailsContent media={media} keyid={keyid} />
             </DialogContent>
         </Dialog>
     );
 }
+
+export default function FilePreview({
+    media,
+    keyid,
+    layout = "grid",
+    selected,
+    onSelectionChange,
+}: {
+    media: MediaListItem;
+    keyid: string;
+    layout?: "grid" | "list";
+    selected: boolean;
+    onSelectionChange: () => void;
+}) {
+    const kind = kindLabels[media.kind];
+    const fileLabel =
+        media.originalFileName.split(".").at(-1)?.toUpperCase() || kind;
+    const preview = media.thumbnail ? (
+        <Image
+            src={media.thumbnail}
+            alt={media.originalFileName}
+            fill
+            sizes={
+                layout === "list" ? "62px" : "(max-width: 760px) 50vw, 240px"
+            }
+            className="object-cover"
+            unoptimized
+        />
+    ) : (
+        <span className="file-type-icon" data-kind={kind.toLowerCase()}>
+            <FileTypeIcon mimeType={media.mimeType} />
+        </span>
+    );
+
+    return (
+        <div className={`file-card-shell${selected ? " is-selected" : ""}`}>
+            <FileDetailsDialog media={media} keyid={keyid}>
+                <button
+                    type="button"
+                    className="file-card"
+                    aria-label={`${media.originalFileName}, ${kind}, ${formatFileSize(media.size)}`}
+                >
+                    <span className="file-preview-area">
+                        {preview}
+                        <span className="file-preview-caption">
+                            {fileLabel}
+                        </span>
+                        {media.access === "private" ? (
+                            <span
+                                className="file-card-private"
+                                aria-label="Private"
+                                title="Private"
+                            >
+                                <LockKeyhole aria-hidden="true" />
+                            </span>
+                        ) : null}
+                    </span>
+                    <span className="file-card-copy">
+                        <strong>{media.originalFileName}</strong>
+                        <span>
+                            {kind} · {formatFileSize(media.size)} ·{" "}
+                            {formatRelativeUpload(media.createdAt)}
+                        </span>
+                    </span>
+                </button>
+            </FileDetailsDialog>
+            <div className="file-select-control">
+                <Checkbox
+                    checked={selected}
+                    label={
+                        <span className="visually-hidden">
+                            Select {media.originalFileName}
+                        </span>
+                    }
+                    onChange={onSelectionChange}
+                />
+            </div>
+        </div>
+    );
+}
+
+/* One row of the table view, matching the design's columns. */
+export function FileTableRow({
+    media,
+    keyid,
+    selected,
+    onSelectionChange,
+}: {
+    media: MediaListItem;
+    keyid: string;
+    selected: boolean;
+    onSelectionChange: () => void;
+}) {
+    const kind = kindLabels[media.kind];
+    const isPublic = media.access !== "private";
+
+    return (
+        <tr className={selected ? "is-selected" : undefined}>
+            <td className="file-table-check">
+                <Checkbox
+                    checked={selected}
+                    label={
+                        <span className="visually-hidden">
+                            Select {media.originalFileName}
+                        </span>
+                    }
+                    onChange={onSelectionChange}
+                />
+            </td>
+            <td>
+                <FileDetailsDialog media={media} keyid={keyid}>
+                    <button type="button" className="file-table-name">
+                        <span
+                            className="file-table-tile"
+                            data-kind={kind.toLowerCase()}
+                        >
+                            <FileTypeIcon mimeType={media.mimeType} />
+                        </span>
+                        <span className="ell">{media.originalFileName}</span>
+                    </button>
+                </FileDetailsDialog>
+            </td>
+            <td className="muted">{kind}</td>
+            <td className="file-table-size">{formatFileSize(media.size)}</td>
+            <td className="muted">{formatRelativeUpload(media.createdAt)}</td>
+            <td>
+                <span className="file-table-access">
+                    {isPublic ? (
+                        <Globe aria-hidden="true" />
+                    ) : (
+                        <LockKeyhole aria-hidden="true" />
+                    )}
+                    {isPublic ? "Public" : "Private"}
+                </span>
+            </td>
+        </tr>
+    );
+}
diff --git a/apps/web/app/app/[keyid]/files/file-preview/use-file-url.ts b/apps/web/app/app/[keyid]/files/file-preview/use-file-url.ts
new file mode 100644
index 00000000..88e6a662
--- /dev/null
+++ b/apps/web/app/app/[keyid]/files/file-preview/use-file-url.ts
@@ -0,0 +1,31 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+/* Fetches the playable/downloadable URL for a media item. Private files get a
+   signed URL from the API, so this runs when the details dialog opens. */
+export function useFileUrl(keyid: string, mediaId: string) {
+    const [state, setState] = useState({ url: "", error: false });
+
+    useEffect(() => {
+        let active = true;
+        setState({ url: "", error: false });
+        fetch(
+            `/api/apps/${encodeURIComponent(keyid)}/media/${encodeURIComponent(mediaId)}`,
+        )
+            .then(async (response) => {
+                if (!response.ok) throw new Error("Failed to load file");
+                const media = await response.json();
+                if (!media?.file) throw new Error("No file URL");
+                if (active) setState({ url: media.file, error: false });
+            })
+            .catch(() => {
+                if (active) setState({ url: "", error: true });
+            });
+        return () => {
+            active = false;
+        };
+    }, [keyid, mediaId]);
+
+    return state;
+}
diff --git a/apps/web/app/app/[keyid]/files/get-media/route.ts b/apps/web/app/app/[keyid]/files/get-media/route.ts
deleted file mode 100644
index cadfe282..00000000
--- a/apps/web/app/app/[keyid]/files/get-media/route.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { cookies } from "next/headers";
-import { apiBase } from "@/lib/server-api";
-
-export const dynamic = "force-dynamic";
-
-export async function POST(request: Request) {
-    const { mediaId, keyId } = await request.json();
-    if (!mediaId || !keyId) {
-        return Response.json({}, { status: 400 });
-    }
-
-    const cookieStore = await cookies();
-    const response = await fetch(
-        `${apiBase()}/api/apps/${encodeURIComponent(keyId)}/media/${encodeURIComponent(mediaId)}`,
-        {
-            headers: { cookie: cookieStore.toString() },
-            cache: "no-store",
-        },
-    );
-    if (!response.ok) {
-        return Response.json({}, { status: response.status });
-    }
-    const media = await response.json();
-    return Response.json({ media });
-}
diff --git a/apps/web/app/app/[keyid]/files/loading.tsx b/apps/web/app/app/[keyid]/files/loading.tsx
index 88861e00..7617b025 100644
--- a/apps/web/app/app/[keyid]/files/loading.tsx
+++ b/apps/web/app/app/[keyid]/files/loading.tsx
@@ -1,7 +1,10 @@
-import React from "react";
+import { Loader } from "@codelitdev/design-system";
 
-const Loading = () => {
-    return <div>Loading...</div>;
-};
-
-export default Loading;
+export default function Loading() {
+    return (
+        <div className="loading-state" role="status">
+            <Loader product="medialit" size={64} />
+            <span className="visually-hidden">Loading</span>
+        </div>
+    );
+}
diff --git a/apps/web/app/app/[keyid]/files/media-library.tsx b/apps/web/app/app/[keyid]/files/media-library.tsx
new file mode 100644
index 00000000..f389e0d6
--- /dev/null
+++ b/apps/web/app/app/[keyid]/files/media-library.tsx
@@ -0,0 +1,435 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { usePathname, useRouter } from "next/navigation";
+import {
+    ArrowUpDown,
+    Check,
+    ChevronDown,
+    Grid2X2,
+    List,
+    Search,
+    Trash2,
+} from "lucide-react";
+import type { MediaListItem } from "@/lib/media";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from "@/components/ui/dialog";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuLabel,
+    DropdownMenuRadioGroup,
+    DropdownMenuRadioItem,
+    DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Checkbox } from "@codelitdev/design-system";
+import FilePreview, { FileTableRow } from "./file-preview";
+
+type FileKind = "all" | "image" | "video" | "pdf" | "other";
+type SortMode = "newest" | "oldest" | "name" | "largest";
+
+const sortLabels: Record<SortMode, string> = {
+    newest: "Newest first",
+    oldest: "Oldest first",
+    name: "Name A–Z",
+    largest: "Largest first",
+};
+
+const kindLabels: Record<FileKind, string> = {
+    all: "All",
+    image: "Images",
+    video: "Videos",
+    pdf: "PDFs",
+    other: "Other",
+};
+
+export default function MediaLibrary({
+    medias,
+    keyid,
+    totalCount,
+    globalCounts,
+    initialSearch,
+    initialKind,
+    initialSort,
+}: {
+    medias: MediaListItem[];
+    keyid: string;
+    totalCount: number;
+    globalCounts: Record<Exclude<FileKind, "all">, number>;
+    initialSearch: string;
+    initialKind: FileKind;
+    initialSort: SortMode;
+}) {
+    const pathname = usePathname();
+    const router = useRouter();
+    const [query, setQuery] = useState(initialSearch);
+    const [kind, setKind] = useState<FileKind>(initialKind);
+    const [sort, setSort] = useState<SortMode>(initialSort);
+    const [layout, setLayout] = useState<"grid" | "list">("grid");
+    const [confirmDeleteOpen, setConfirmDeleteOpen] = useState(false);
+    const [deleting, setDeleting] = useState(false);
+    const mediaSelectionKey = medias.map((media) => media.mediaId).join(":");
+    const [selection, setSelection] = useState<{
+        key: string;
+        ids: Set<string>;
+    }>(() => ({ key: mediaSelectionKey, ids: new Set() }));
+    const selectedIds =
+        selection.key === mediaSelectionKey ? selection.ids : new Set<string>();
+
+    useEffect(() => setQuery(initialSearch), [initialSearch]);
+    useEffect(() => setKind(initialKind), [initialKind]);
+    useEffect(() => setSort(initialSort), [initialSort]);
+
+    const navigateWithFilters = useCallback(
+        (next: { search: string; kind: FileKind; sort: SortMode }) => {
+            const params = new URLSearchParams();
+            if (next.search.trim()) params.set("q", next.search.trim());
+            if (next.kind !== "all") params.set("kind", next.kind);
+            if (next.sort !== "newest") params.set("sort", next.sort);
+            const queryString = params.toString();
+            router.replace(
+                queryString ? `${pathname}?${queryString}` : pathname,
+                {
+                    scroll: false,
+                },
+            );
+        },
+        [pathname, router],
+    );
+
+    useEffect(() => {
+        if (query === initialSearch) return;
+        const timeout = window.setTimeout(() => {
+            navigateWithFilters({ search: query, kind, sort });
+        }, 300);
+        return () => window.clearTimeout(timeout);
+    }, [initialSearch, kind, navigateWithFilters, query, sort]);
+
+    const counts: Record<FileKind, number> = {
+        all: totalCount,
+        ...globalCounts,
+    };
+    const filters = Object.keys(kindLabels) as FileKind[];
+    const selectedCount = selectedIds.size;
+
+    const filtered = medias;
+
+    const allSelected =
+        filtered.length > 0 &&
+        filtered.every((media) => selectedIds.has(media.mediaId));
+
+    function toggleAll() {
+        setSelection({
+            key: mediaSelectionKey,
+            ids: allSelected
+                ? new Set()
+                : new Set(filtered.map((media) => media.mediaId)),
+        });
+    }
+
+    async function deleteSelected() {
+        setDeleting(true);
+        try {
+            const response = await fetch(
+                `/api/apps/${encodeURIComponent(keyid)}/media/delete`,
+                {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({ mediaIds: Array.from(selectedIds) }),
+                },
+            );
+            const data = await response.json().catch(() => ({}));
+            if (!response.ok) {
+                throw new Error(
+                    data.error || "Could not delete the selected files",
+                );
+            }
+
+            if (data.failed) {
+                toast.error("Some files could not be deleted", {
+                    description: `${data.deleted} deleted, ${data.failed} failed`,
+                });
+            } else {
+                toast.success("Deleted", {
+                    description: `${data.deleted} ${data.deleted === 1 ? "file" : "files"} deleted`,
+                });
+            }
+            setSelection({ key: mediaSelectionKey, ids: new Set() });
+            setConfirmDeleteOpen(false);
+            router.refresh();
+        } catch (deleteError) {
+            toast.error("Uh oh!", {
+                description:
+                    deleteError instanceof Error
+                        ? deleteError.message
+                        : "Could not delete the selected files",
+            });
+        } finally {
+            setDeleting(false);
+        }
+    }
+
+    function toggleSelected(mediaId: string) {
+        setSelection((current) => {
+            const next = new Set(
+                current.key === mediaSelectionKey ? current.ids : [],
+            );
+            if (next.has(mediaId)) next.delete(mediaId);
+            else next.add(mediaId);
+            return { key: mediaSelectionKey, ids: next };
+        });
+    }
+
+    return (
+        <>
+            <div className="file-toolbar">
+                <div className="file-toolbar-main">
+                    <label className="file-search">
+                        <Search aria-hidden="true" />
+                        <input
+                            type="search"
+                            aria-label="Search files by name"
+                            placeholder="Search files by name"
+                            value={query}
+                            onChange={(event) => setQuery(event.target.value)}
+                        />
+                    </label>
+                    <div
+                        className="filter-group"
+                        role="group"
+                        aria-label="Filter by file type"
+                    >
+                        {filters.map((filter) => (
+                            <button
+                                type="button"
+                                key={filter}
+                                className={`filter-chip${kind === filter ? " is-active" : ""}`}
+                                aria-pressed={kind === filter}
+                                onClick={() => {
+                                    setKind(filter);
+                                    navigateWithFilters({
+                                        search: query,
+                                        kind: filter,
+                                        sort,
+                                    });
+                                }}
+                            >
+                                {kindLabels[filter]}
+                                <span>{counts[filter]}</span>
+                            </button>
+                        ))}
+                    </div>
+                </div>
+                <div className="file-toolbar-actions">
+                    <label className="visually-hidden" htmlFor="file-sort">
+                        Sort files
+                    </label>
+                    <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                            <button
+                                id="file-sort"
+                                type="button"
+                                className="file-sort"
+                                aria-label={`Sort files: ${sortLabels[sort]}`}
+                            >
+                                <ArrowUpDown aria-hidden="true" />
+                                <span>{sortLabels[sort]}</span>
+                                <ChevronDown aria-hidden="true" />
+                            </button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent
+                            align="start"
+                            className="file-sort-menu"
+                        >
+                            <DropdownMenuLabel>Sort by</DropdownMenuLabel>
+                            <DropdownMenuRadioGroup
+                                value={sort}
+                                onValueChange={(value) => {
+                                    const nextSort = value as SortMode;
+                                    setSort(nextSort);
+                                    navigateWithFilters({
+                                        search: query,
+                                        kind,
+                                        sort: nextSort,
+                                    });
+                                }}
+                            >
+                                {(Object.keys(sortLabels) as SortMode[]).map(
+                                    (option) => (
+                                        <DropdownMenuRadioItem
+                                            key={option}
+                                            value={option}
+                                            className="file-sort-item"
+                                        >
+                                            {sortLabels[option]}
+                                            {sort === option ? (
+                                                <Check
+                                                    aria-hidden="true"
+                                                    className="file-sort-check"
+                                                />
+                                            ) : null}
+                                        </DropdownMenuRadioItem>
+                                    ),
+                                )}
+                            </DropdownMenuRadioGroup>
+                        </DropdownMenuContent>
+                    </DropdownMenu>
+                    <div
+                        className="view-group"
+                        role="group"
+                        aria-label="File layout"
+                    >
+                        <button
+                            type="button"
+                            className={`view-chip${layout === "grid" ? " is-active" : ""}`}
+                            aria-label="Grid view"
+                            aria-pressed={layout === "grid"}
+                            onClick={() => setLayout("grid")}
+                        >
+                            <Grid2X2 aria-hidden="true" />
+                        </button>
+                        <button
+                            type="button"
+                            className={`view-chip${layout === "list" ? " is-active" : ""}`}
+                            aria-label="List view"
+                            aria-pressed={layout === "list"}
+                            onClick={() => setLayout("list")}
+                        >
+                            <List aria-hidden="true" />
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            {selectedCount ? (
+                <div className="file-bulk-bar" role="status">
+                    <strong>{selectedCount} selected</strong>
+                    <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() =>
+                            setSelection({
+                                key: mediaSelectionKey,
+                                ids: new Set(),
+                            })
+                        }
+                    >
+                        Clear
+                    </Button>
+                    <div className="file-bulk-actions">
+                        <Button
+                            variant="destructive"
+                            onClick={() => setConfirmDeleteOpen(true)}
+                        >
+                            <Trash2 aria-hidden="true" />
+                            Delete
+                        </Button>
+                    </div>
+                </div>
+            ) : null}
+
+            <Dialog
+                open={confirmDeleteOpen}
+                onOpenChange={(open) => {
+                    if (!deleting) setConfirmDeleteOpen(open);
+                }}
+            >
+                <DialogContent className="sm:max-w-[420px]">
+                    <DialogHeader>
+                        <DialogTitle>
+                            Delete {selectedCount}{" "}
+                            {selectedCount === 1 ? "file" : "files"}?
+                        </DialogTitle>
+                        <DialogDescription>
+                            This permanently removes the selected files from
+                            storage. This can’t be undone.
+                        </DialogDescription>
+                    </DialogHeader>
+                    <DialogFooter>
+                        <Button
+                            variant="outline"
+                            onClick={() => setConfirmDeleteOpen(false)}
+                            disabled={deleting}
+                        >
+                            Cancel
+                        </Button>
+                        <Button
+                            variant="destructive"
+                            onClick={deleteSelected}
+                            disabled={deleting}
+                        >
+                            {deleting ? "Deleting…" : "Delete"}
+                        </Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+
+            {filtered.length && layout === "list" ? (
+                <div className="file-table-box">
+                    <table className="file-table">
+                        <thead>
+                            <tr>
+                                <th className="file-table-check">
+                                    <Checkbox
+                                        checked={allSelected}
+                                        label={
+                                            <span className="visually-hidden">
+                                                Select all files
+                                            </span>
+                                        }
+                                        onChange={toggleAll}
+                                    />
+                                </th>
+                                <th>Name</th>
+                                <th>Type</th>
+                                <th>Size</th>
+                                <th>Uploaded</th>
+                                <th>Access</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {filtered.map((media) => (
+                                <FileTableRow
+                                    key={media.mediaId}
+                                    media={media}
+                                    keyid={keyid}
+                                    selected={selectedIds.has(media.mediaId)}
+                                    onSelectionChange={() =>
+                                        toggleSelected(media.mediaId)
+                                    }
+                                />
+                            ))}
+                        </tbody>
+                    </table>
+                </div>
+            ) : filtered.length ? (
+                <div className="file-grid">
+                    {filtered.map((media) => (
+                        <FilePreview
+                            key={media.mediaId}
+                            media={media}
+                            keyid={keyid}
+                            layout={layout}
+                            selected={selectedIds.has(media.mediaId)}
+                            onSelectionChange={() =>
+                                toggleSelected(media.mediaId)
+                            }
+                        />
+                    ))}
+                </div>
+            ) : (
+                <div className="file-empty-filter" role="status">
+                    No files match this search and filter.
+                </div>
+            )}
+        </>
+    );
+}
diff --git a/apps/web/app/app/[keyid]/files/page.tsx b/apps/web/app/app/[keyid]/files/page.tsx
index 6f460a94..108f91e4 100644
--- a/apps/web/app/app/[keyid]/files/page.tsx
+++ b/apps/web/app/app/[keyid]/files/page.tsx
@@ -1,161 +1,170 @@
+import Link from "next/link";
 import { redirect } from "next/navigation";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+import { headers } from "next/headers";
 import { auth } from "@/auth";
-import { getMediaFiles, getCount } from "./actions";
-import type { Media } from "@medialit/models";
-import FilePreview from "./file-preview";
-import {
-    Pagination,
-    PaginationContent,
-    PaginationItem,
-    PaginationLink,
-    PaginationNext,
-    PaginationPrevious,
-} from "@/components/ui/pagination";
-import {
-    DoubleArrowLeftIcon,
-    DoubleArrowRightIcon,
-} from "@radix-ui/react-icons";
-import { FileText, Youtube } from "lucide-react";
+import { getCount, getMediaFiles } from "./actions";
+import { getAppSummary, type AppSummary } from "@/app/actions";
+import { cliNeedsEndpoint, getPublicApiBase } from "@/lib/api-base";
+import { formatAppStorage, formatLastUpload } from "@/lib/media-format";
+import type { MediaListItem } from "@/lib/media";
+import MediaLibrary from "./media-library";
+import UploadButton from "./upload-button";
+import EmptyFiles from "./empty-files";
+
+const filesPerPage = 16;
 
 export default async function Media(props: {
     params: Promise<{ keyid: string }>;
-    searchParams: Promise<{ page: string }>;
+    searchParams: Promise<{
+        page?: string;
+        q?: string;
+        kind?: string;
+        sort?: string;
+    }>;
 }) {
-    const searchParams = await props.searchParams;
-    const params = await props.params;
-    const session = await auth();
-    if (!session) {
-        redirect("/login");
-    }
+    const [{ keyid }, searchParams, session] = await Promise.all([
+        props.params,
+        props.searchParams,
+        auth(),
+    ]);
+    if (!session) redirect("/login");
+
+    const requestedPage = Number.parseInt(searchParams.page ?? "1", 10);
+    const safeRequestedPage =
+        Number.isFinite(requestedPage) && requestedPage > 0 ? requestedPage : 1;
+    const search = (searchParams.q ?? "").trim().slice(0, 200);
+    const kind = ["image", "video", "pdf", "other"].includes(
+        searchParams.kind ?? "",
+    )
+        ? (searchParams.kind as "image" | "video" | "pdf" | "other")
+        : undefined;
+    const sort = ["newest", "oldest", "name", "largest"].includes(
+        searchParams.sort ?? "",
+    )
+        ? (searchParams.sort as "newest" | "oldest" | "name" | "largest")
+        : "newest";
+    const filters = { search, kind, sort };
 
-    const keyid = params.keyid;
-    const page = searchParams.page || "1";
-    let medias: Media[] = [];
-    const mediasPerPage = 10;
-    let totalPages = 0;
-    let totalMediaCount;
+    let totalCount: number;
+    let appSummary: AppSummary;
     try {
-        totalMediaCount = await getCount(keyid);
-        medias = await getMediaFiles(keyid, +page);
-        totalPages = medias
-            ? Math.ceil(totalMediaCount / Number(mediasPerPage))
-            : 0;
+        [appSummary, totalCount] = await Promise.all([
+            getAppSummary(keyid),
+            getCount(keyid, filters),
+        ]);
+    } catch (error) {
+        const message =
+            error instanceof Error ? error.message : "Could not load files";
+        return (
+            <div className="inline-error" role="alert">
+                {message}
+            </div>
+        );
+    }
 
-        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-        totalPages === 0 ? (totalPages = 1) : totalPages;
-    } catch (error: any) {
-        return <div>Something went wrong: {error.message}</div>;
+    const totalPages = Math.max(1, Math.ceil(totalCount / filesPerPage));
+    const page = Math.min(safeRequestedPage, totalPages);
+    let medias: MediaListItem[];
+    try {
+        medias = await getMediaFiles(keyid, page, filesPerPage, filters);
+    } catch (error) {
+        const message =
+            error instanceof Error ? error.message : "Could not load files";
+        return (
+            <div className="inline-error" role="alert">
+                {message}
+            </div>
+        );
     }
 
+    const apiBase = getPublicApiBase(await headers());
+    const includeCliEndpoint = cliNeedsEndpoint(apiBase);
+
+    const firstResult = totalCount ? (page - 1) * filesPerPage + 1 : 0;
+    const lastResult = Math.min(page * filesPerPage, totalCount);
+    const pageHref = (nextPage: number) => {
+        const params = new URLSearchParams();
+        if (search) params.set("q", search);
+        if (kind) params.set("kind", kind);
+        if (sort !== "newest") params.set("sort", sort);
+        params.set("page", String(nextPage));
+        return `/app/${keyid}/files?${params.toString()}`;
+    };
+
     return (
         <>
-            {medias.length === 0 ? (
-                <div className="flex flex-col items-center justify-center h-[60vh] gap-4">
-                    <FileText className="h-12 w-12 text-muted-foreground" />
-                    <h3 className="text-lg font-semibold">
-                        Upload your first file
-                    </h3>
-                    <div className="flex gap-2">
-                        <a
-                            href="https://www.youtube.com/watch?v=QrYn82zK4es"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2"
-                        >
-                            <Youtube className="w-4 h-4 mr-2" />
-                            Watch tutorial
-                        </a>
-                        <a
-                            href="https://medialit.cloud/blog/getting-started/MRAoM_zAiywn_d4Lnqm0A"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2"
-                        >
-                            Open Docs
-                        </a>
+            <div className="workspace-page-heading">
+                <div>
+                    <div className="files-title-row">
+                        <h1>Files</h1>
+                        {appSummary.default ? (
+                            <span className="cl-badge cl-badge--default">
+                                Default app
+                            </span>
+                        ) : null}
                     </div>
+                    <p>
+                        {appSummary.count === 0
+                            ? "No files yet"
+                            : `${appSummary.count} ${appSummary.count === 1 ? "file" : "files"} · ${formatAppStorage(appSummary.storage)} · ${formatLastUpload(appSummary.lastUpload)}`}
+                    </p>
                 </div>
+                <UploadButton keyid={keyid} />
+            </div>
+
+            {appSummary.count === 0 ? (
+                <EmptyFiles
+                    keyid={keyid}
+                    appName={appSummary.name || "this app"}
+                    serverUrl={`${apiBase}/mcp`}
+                    apiEndpoint={apiBase}
+                    includeCliEndpoint={includeCliEndpoint}
+                />
             ) : (
                 <>
-                    <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 items-start mb-8">
-                        {medias.map((media: any, index: number) => (
-                            <FilePreview
-                                key={media.mediaId}
-                                media={media}
-                                keyid={keyid}
-                            />
-                        ))}
-                    </div>
-                    <Pagination>
-                        <PaginationContent>
-                            <PaginationItem>
-                                <PaginationLink
-                                    href={`/app/${keyid}/files?page=${1}`}
-                                    className={`
-                         ${
-                             parseInt(page) === 1
-                                 ? "pointer-events-none text-slate-400"
-                                 : ""
-                         }
-                     `}
-                                >
-                                    <DoubleArrowLeftIcon className="h-4 w-4" />
-                                </PaginationLink>
-                            </PaginationItem>
-                            <PaginationItem
-                                className={`
-                                    ${
-                                        parseInt(page) === 1
-                                            ? "pointer-events-none text-slate-400"
-                                            : ""
-                                    }
-                                `}
+                    <MediaLibrary
+                        medias={medias}
+                        keyid={keyid}
+                        totalCount={appSummary.count}
+                        globalCounts={{
+                            image: appSummary.images,
+                            video: appSummary.videos,
+                            pdf: appSummary.pdfs,
+                            other: appSummary.others,
+                        }}
+                        initialSearch={search}
+                        initialKind={kind ?? "all"}
+                        initialSort={sort}
+                    />
+                    <div className="file-pagination">
+                        <span>
+                            {totalCount
+                                ? `Showing ${firstResult}–${lastResult} of ${totalCount} files`
+                                : "No files match this search and filter"}
+                        </span>
+                        <div className="file-pagination-actions">
+                            <Link
+                                className="pager-button"
+                                href={pageHref(Math.max(1, page - 1))}
+                                aria-disabled={page <= 1}
                             >
-                                <PaginationPrevious
-                                    href={
-                                        parseInt(page) === 1
-                                            ? `/app/${keyid}/files?page=${Number(page)}`
-                                            : `/app/${keyid}/files?page=${
-                                                  Number(page) - 1
-                                              }`
-                                    }
-                                />
-                            </PaginationItem>
-                            <PaginationItem className="text-sm">
-                                <span className="font-bold">{page}</span> of{" "}
-                                {totalPages} ({totalMediaCount} Files)
-                            </PaginationItem>
-                            <PaginationItem
-                                className={`
-                                    ${
-                                        parseInt(page) === totalPages
-                                            ? "pointer-events-none text-slate-400"
-                                            : ""
-                                    }
-                                `}
+                                <ArrowLeft aria-hidden="true" />
+                                Previous
+                            </Link>
+                            <span className="pager-button" aria-current="page">
+                                {page} / {totalPages}
+                            </span>
+                            <Link
+                                className="pager-button"
+                                href={pageHref(Math.min(totalPages, page + 1))}
+                                aria-disabled={page >= totalPages}
                             >
-                                <PaginationNext
-                                    href={`/app/${keyid}/files?page=${
-                                        Number(page) + 1
-                                    }`}
-                                />
-                            </PaginationItem>
-                            <PaginationItem>
-                                <PaginationLink
-                                    href={`/app/${keyid}/files?page=${totalPages}`}
-                                    className={`
-                        ${
-                            parseInt(page) === totalPages
-                                ? "pointer-events-none text-slate-400"
-                                : ""
-                        }
-                    `}
-                                >
-                                    <DoubleArrowRightIcon className="h-4 w-4" />
-                                </PaginationLink>
-                            </PaginationItem>
-                        </PaginationContent>
-                    </Pagination>
+                                Next
+                                <ArrowRight aria-hidden="true" />
+                            </Link>
+                        </div>
+                    </div>
                 </>
             )}
         </>
diff --git a/apps/web/app/app/[keyid]/files/upload-button.tsx b/apps/web/app/app/[keyid]/files/upload-button.tsx
new file mode 100644
index 00000000..d3c3a86d
--- /dev/null
+++ b/apps/web/app/app/[keyid]/files/upload-button.tsx
@@ -0,0 +1,71 @@
+"use client";
+
+import { useRef, useState, type ChangeEvent } from "react";
+import { useRouter } from "next/navigation";
+import { LoaderCircle, Upload } from "lucide-react";
+import { toast } from "sonner";
+import {
+    uploadFilesToApp,
+    uploadLabel,
+    type UploadStatus,
+} from "./upload-files";
+
+export default function UploadButton({ keyid }: { keyid: string }) {
+    const inputRef = useRef<HTMLInputElement>(null);
+    const router = useRouter();
+    const [busy, setBusy] = useState(false);
+    const [status, setStatus] = useState<UploadStatus | null>(null);
+    const [error, setError] = useState("");
+
+    async function uploadFiles(event: ChangeEvent<HTMLInputElement>) {
+        const files = Array.from(event.target.files ?? []);
+        event.target.value = "";
+        if (!files.length) return;
+
+        setBusy(true);
+        setError("");
+        setStatus(null);
+        const { uploaded, error: uploadError } = await uploadFilesToApp(
+            keyid,
+            files,
+            setStatus,
+        );
+        setStatus(null);
+        if (uploadError) setError(uploadError);
+
+        setBusy(false);
+        if (uploaded) {
+            toast.success(
+                uploaded === 1 ? "File uploaded" : `${uploaded} files uploaded`,
+            );
+            router.refresh();
+        }
+    }
+
+    return (
+        <div className="upload-control">
+            <input
+                ref={inputRef}
+                type="file"
+                multiple
+                className="visually-hidden"
+                aria-label="Choose files to upload"
+                onChange={uploadFiles}
+            />
+            <button
+                type="button"
+                className="workspace-button"
+                disabled={busy}
+                onClick={() => inputRef.current?.click()}
+            >
+                {busy ? <LoaderCircle className="animate-spin" /> : <Upload />}
+                {busy ? uploadLabel(status) : "Upload"}
+            </button>
+            {error ? (
+                <span className="inline-error" role="alert">
+                    {error}
+                </span>
+            ) : null}
+        </div>
+    );
+}
diff --git a/apps/web/app/app/[keyid]/files/upload-files.ts b/apps/web/app/app/[keyid]/files/upload-files.ts
new file mode 100644
index 00000000..182e2863
--- /dev/null
+++ b/apps/web/app/app/[keyid]/files/upload-files.ts
@@ -0,0 +1,66 @@
+import { uploadFile, type UploadProgress } from "@medialit/uploader";
+
+export type UploadStatus = {
+    /** 1-based position of the file being uploaded. */
+    index: number;
+    total: number;
+    progress: UploadProgress | null;
+};
+
+/* "Uploading 2 of 3 · 42%" while an upload runs. */
+export function uploadLabel(status: UploadStatus | null) {
+    if (!status?.progress) return "Uploading…";
+    const percent = Math.round(status.progress.percentage);
+    return status.total > 1
+        ? `Uploading ${status.index} of ${status.total} · ${percent}%`
+        : `Uploading · ${percent}%`;
+}
+
+/* Uploads each file with MediaLit's resumable (tus) uploader, then seals it.
+   Sealing makes the upload permanent; until then it stays temporary. The API
+   signs and seals for the signed-in user, so the app's key never leaves it. */
+export async function uploadFilesToApp(
+    keyid: string,
+    files: File[],
+    onStatus?: (status: UploadStatus) => void,
+) {
+    const appPath = `/api/apps/${encodeURIComponent(keyid)}/media`;
+    let uploaded = 0;
+
+    for (let position = 0; position < files.length; position++) {
+        const file = files[position];
+        try {
+            const media = await uploadFile(file, {
+                signatureEndpoint: `${appPath}/signature`,
+                onProgress: (progress) =>
+                    onStatus?.({
+                        index: position + 1,
+                        total: files.length,
+                        progress,
+                    }),
+            });
+
+            const response = await fetch(
+                `${appPath}/${encodeURIComponent(media.mediaId)}/seal`,
+                { method: "POST" },
+            );
+            const data = await response.json().catch(() => ({}));
+            if (!response.ok) {
+                throw new Error(
+                    data.error || `Could not finish uploading ${file.name}`,
+                );
+            }
+            uploaded += 1;
+        } catch (uploadError) {
+            return {
+                uploaded,
+                error:
+                    uploadError instanceof Error
+                        ? uploadError.message
+                        : `Could not upload ${file.name}`,
+            };
+        }
+    }
+
+    return { uploaded, error: "" };
+}
diff --git a/apps/web/app/app/[keyid]/layout.tsx b/apps/web/app/app/[keyid]/layout.tsx
index fbb30ff6..41f0d52b 100644
--- a/apps/web/app/app/[keyid]/layout.tsx
+++ b/apps/web/app/app/[keyid]/layout.tsx
@@ -1,76 +1,14 @@
 import React from "react";
-import Link from "next/link";
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { getApikeyUsingKeyId } from "@/app/actions";
 import { redirect } from "next/navigation";
-import {
-    Breadcrumb,
-    BreadcrumbItem,
-    BreadcrumbLink,
-    BreadcrumbList,
-    BreadcrumbPage,
-    BreadcrumbSeparator,
-} from "@/components/ui/breadcrumb";
+import { getApikeyUsingKeyId } from "@/app/actions";
 
-export default async function FilesLayout(props: {
+export default async function AppLayout(props: {
     params: Promise<{ keyid: string }>;
     children: React.ReactNode;
 }) {
-    const params = await props.params;
-
-    const { children } = props;
-
-    const keyid = params.keyid;
+    const { keyid } = await props.params;
     const apikey = await getApikeyUsingKeyId(keyid);
+    if (!apikey) redirect("/");
 
-    if (!apikey) {
-        redirect("/");
-    }
-
-    return (
-        <>
-            <main className="mx-auto max-w-[1024px] min-h-screen">
-                <Breadcrumb className="mb-2">
-                    <BreadcrumbList>
-                        <BreadcrumbItem>
-                            <BreadcrumbLink href="/">All apps</BreadcrumbLink>
-                        </BreadcrumbItem>
-                        {/* <BreadcrumbSeparator />
-                        <BreadcrumbItem>
-                            <BreadcrumbPage className="text-muted-foreground">
-                                {apikey?.name || "Untitled"}
-                            </BreadcrumbPage>
-                        </BreadcrumbItem> */}
-                    </BreadcrumbList>
-                </Breadcrumb>
-                <h1 className="text-2xl font-bold mb-8">
-                    {apikey?.name || "Untitled"}
-                </h1>
-                <Tabs
-                    defaultValue={`/app/${keyid}/files`}
-                    className="w-full mb-8"
-                >
-                    <TabsList className="grid w-full grid-cols-2">
-                        <Link href={`/app/${keyid}/files`}>
-                            <TabsTrigger
-                                value={`/app/${keyid}/files`}
-                                className="w-full"
-                            >
-                                Files
-                            </TabsTrigger>
-                        </Link>
-                        <Link href={`/app/${keyid}/settings`}>
-                            <TabsTrigger
-                                value={`/app/${keyid}/settings`}
-                                className="w-full"
-                            >
-                                Settings
-                            </TabsTrigger>
-                        </Link>
-                    </TabsList>
-                </Tabs>
-                <div className="">{children}</div>
-            </main>
-        </>
-    );
+    return <>{props.children}</>;
 }
diff --git a/apps/web/app/app/[keyid]/settings/actions.tsx b/apps/web/app/app/[keyid]/settings/actions.tsx
index b20b6825..78f53123 100644
--- a/apps/web/app/app/[keyid]/settings/actions.tsx
+++ b/apps/web/app/app/[keyid]/settings/actions.tsx
@@ -1,6 +1,5 @@
 "use server";
 
-import { auth } from "@/auth";
 import { serverApi } from "@/lib/server-api";
 type MediaStats = { storage: number; maxStorage: number };
 
@@ -18,10 +17,6 @@ export async function updateAppName(
     }
 
     try {
-        const session = await auth();
-        if (!session?.user) {
-            throw new Error("Unauthenticated");
-        }
         const response = await serverApi(
             `/api/apps/${encodeURIComponent(keyId)}`,
             {
@@ -39,13 +34,34 @@ export async function updateAppName(
     }
 }
 
+export async function makeDefaultApp(
+    previousState: Record<string, unknown>,
+    formData: FormData,
+) {
+    const keyId = formData.get("keyId") as string;
+    if (!keyId) return { success: false, error: "Bad request" };
+
+    try {
+        const response = await serverApi(
+            `/api/apps/${encodeURIComponent(keyId)}/default`,
+            { method: "PATCH" },
+        );
+        if (!response.ok) {
+            const data = await response.json().catch(() => ({}));
+            throw new Error(data.error || "Request failed");
+        }
+        return { success: true };
+    } catch (error) {
+        return {
+            success: false,
+            error: error instanceof Error ? error.message : "Request failed",
+        };
+    }
+}
+
 export async function getTotalSpaceByApikey(
     keyid: string,
 ): Promise<MediaStats> {
-    const session = await auth();
-    if (!session?.user) {
-        throw new Error("Unauthenticated");
-    }
     const response = await serverApi(
         `/api/apps/${encodeURIComponent(keyid)}/stats`,
     );
diff --git a/apps/web/app/app/[keyid]/settings/api-key-control.tsx b/apps/web/app/app/[keyid]/settings/api-key-control.tsx
new file mode 100644
index 00000000..827cc22e
--- /dev/null
+++ b/apps/web/app/app/[keyid]/settings/api-key-control.tsx
@@ -0,0 +1,64 @@
+"use client";
+
+import { useState } from "react";
+import { Check, Copy, Eye, EyeOff } from "lucide-react";
+
+export default function ApiKeyControl({ apiKey }: { apiKey: string }) {
+    const [visible, setVisible] = useState(false);
+    const [copied, setCopied] = useState(false);
+    const [error, setError] = useState("");
+
+    async function copyKey() {
+        try {
+            await navigator.clipboard.writeText(apiKey);
+            setCopied(true);
+            setError("");
+            window.setTimeout(() => setCopied(false), 1800);
+        } catch {
+            setError("Could not copy the API key. Select and copy it instead.");
+        }
+    }
+
+    return (
+        <>
+            <div className="settings-control-row">
+                <input
+                    className="settings-input settings-mono-input"
+                    value={apiKey}
+                    type={visible ? "text" : "password"}
+                    readOnly
+                    aria-label="API key"
+                />
+                <button
+                    type="button"
+                    className="icon-control settings-icon-control"
+                    aria-label={visible ? "Hide API key" : "Show API key"}
+                    onClick={() => setVisible((current) => !current)}
+                >
+                    {visible ? (
+                        <EyeOff aria-hidden="true" />
+                    ) : (
+                        <Eye aria-hidden="true" />
+                    )}
+                </button>
+                <button
+                    type="button"
+                    className="workspace-button secondary"
+                    onClick={copyKey}
+                >
+                    {copied ? (
+                        <Check aria-hidden="true" />
+                    ) : (
+                        <Copy aria-hidden="true" />
+                    )}
+                    {copied ? "Copied" : "Copy"}
+                </button>
+            </div>
+            {error ? (
+                <p className="inline-error" role="alert">
+                    {error}
+                </p>
+            ) : null}
+        </>
+    );
+}
diff --git a/apps/web/app/app/[keyid]/settings/copy-apikey-button.tsx b/apps/web/app/app/[keyid]/settings/copy-apikey-button.tsx
index 07548ffd..fec0092a 100644
--- a/apps/web/app/app/[keyid]/settings/copy-apikey-button.tsx
+++ b/apps/web/app/app/[keyid]/settings/copy-apikey-button.tsx
@@ -1,20 +1,17 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
-import { useToast } from "@/components/ui/use-toast";
 import { Copy } from "lucide-react";
+import { toast } from "sonner";
 
 export default function CopyApikeyButton({ apikey }: { apikey: string }) {
-    const { toast } = useToast();
-
     return (
         <Button
             variant="outline"
             size="icon"
             onClick={() => {
                 navigator.clipboard.writeText(apikey);
-                toast({
-                    title: "Success",
+                toast.success("Success", {
                     description: "Apikey has been copied to the clipboard",
                 });
             }}
diff --git a/apps/web/app/app/[keyid]/settings/default-app-control.tsx b/apps/web/app/app/[keyid]/settings/default-app-control.tsx
new file mode 100644
index 00000000..168861b7
--- /dev/null
+++ b/apps/web/app/app/[keyid]/settings/default-app-control.tsx
@@ -0,0 +1,59 @@
+"use client";
+
+import { useActionState, useEffect } from "react";
+import { useFormStatus } from "react-dom";
+import { useRouter } from "next/navigation";
+import { Check } from "lucide-react";
+import { makeDefaultApp } from "./actions";
+
+type DefaultAppState = { success: boolean; error?: string };
+
+export default function DefaultAppControl({
+    keyId,
+    isDefault,
+}: {
+    keyId: string;
+    isDefault: boolean;
+}) {
+    const [state, action] = useActionState(makeDefaultApp, {
+        success: false,
+    } as DefaultAppState);
+    const router = useRouter();
+
+    useEffect(() => {
+        if (state.success) router.refresh();
+    }, [router, state]);
+
+    return (
+        <div className="settings-default-control">
+            <form action={action}>
+                <input name="keyId" value={keyId} type="hidden" readOnly />
+                <SubmitButton isDefault={isDefault} />
+            </form>
+            {state.error ? (
+                <p className="inline-error" role="alert">
+                    {state.error}
+                </p>
+            ) : null}
+        </div>
+    );
+}
+
+function SubmitButton({ isDefault }: { isDefault: boolean }) {
+    const status = useFormStatus();
+    return (
+        <button
+            className={`workspace-button${isDefault ? " secondary" : ""}`}
+            type="submit"
+            disabled={status.pending || isDefault}
+            aria-pressed={isDefault}
+        >
+            {isDefault ? <Check aria-hidden="true" /> : null}
+            {status.pending
+                ? "Saving…"
+                : isDefault
+                  ? "Default app"
+                  : "Make default"}
+        </button>
+    );
+}
diff --git a/apps/web/app/app/[keyid]/settings/delete-app-button.tsx b/apps/web/app/app/[keyid]/settings/delete-app-button.tsx
index 483684b8..55602f3e 100644
--- a/apps/web/app/app/[keyid]/settings/delete-app-button.tsx
+++ b/apps/web/app/app/[keyid]/settings/delete-app-button.tsx
@@ -1,9 +1,8 @@
 "use client";
 
-import { useState, useEffect } from "react";
-// import { useFormState, useFormStatus } from "react-dom";
-import { redirect, useRouter } from "next/navigation";
-import { Button } from "@/components/ui/button";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { deleteApiKeyOfUser } from "@/app/actions";
 import {
     Dialog,
     DialogContent,
@@ -12,172 +11,73 @@ import {
     DialogHeader,
     DialogTitle,
     DialogTrigger,
-    DialogClose,
 } from "@/components/ui/dialog";
-import { useToast } from "@/components/ui/use-toast";
-import { ToastAction } from "@/components/ui/toast";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { deleteApiKeyOfUser, editApiKeyforUser } from "@/app/actions";
-import { Apikey } from "@medialit/models";
 
 export default function DeleteAppButton({
-    apikey,
+    appName,
+    keyId,
 }: {
-    apikey: Pick<Apikey, "name" | "keyId" | "key">;
+    appName: string;
+    keyId: string;
 }) {
-    // const [editApiKeyFormState, editApiKeyFormAction] = useFormState(
-    //     editApiKeyforUser,
-    //     { success: false }
-    // );
-
-    const { toast } = useToast();
     const router = useRouter();
-
-    // const [editApiKey, setEditApiKey] = useState(decodedName);
-    const [deleteSuccess, setDeleteSuccess] = useState(false);
     const [open, setOpen] = useState(false);
+    const [pending, setPending] = useState(false);
+    const [error, setError] = useState("");
 
-    useEffect(() => {
-        if (deleteSuccess) {
-            setOpen(false);
-            router.push("/");
-            toast({
-                title: "Deleted",
-                description: `"${apikey.name}" has been deleted`,
-            });
+    async function deleteApp() {
+        setPending(true);
+        setError("");
+        const result = await deleteApiKeyOfUser(keyId);
+        setPending(false);
+        if (!result.success) {
+            setError(result.error || "Could not delete this app.");
+            return;
         }
-    }, [deleteSuccess]);
-
-    // useEffect(() => {
-    //     if (editApiKeyFormState.success) {
-    //         setOpen(false);
-    //         router.refresh();
-    //         toast({
-    //             title: "Updated",
-    //             description: `"${editApiKey}" has been Updated`,
-    //             action: (
-    //                 <ToastAction
-    //                     altText="Go to app"
-    //                     onClick={() => {
-    //                         router.push(`/app/${editApiKey}/files`);
-    //                     }}
-    //                 >
-    //                     Go to app
-    //                 </ToastAction>
-    //             ),
-    //         });
-    //     }
-    // }, [editApiKeyFormState.success]);
+        setOpen(false);
+        router.push("/");
+        router.refresh();
+    }
 
     return (
-        <div className="">
-            <Dialog>
-                <DialogTrigger asChild>
-                    <Button className="bg-red-600">Delete app</Button>
-                </DialogTrigger>
-                <DialogContent className="sm:max-w-[425px]">
-                    <DialogHeader>
-                        <DialogTitle>Delete app</DialogTitle>
-                    </DialogHeader>
-                    Are you sure, you want to delete &quot;{apikey.name}
-                    &quot;?
-                    <DialogFooter>
-                        <DialogClose asChild>
-                            <Button>Cancel</Button>
-                        </DialogClose>
-                        <DialogClose asChild>
-                            <Button
-                                onClick={() => {
-                                    deleteApiKeyOfUser(apikey.keyId);
-                                    setDeleteSuccess(true);
-                                }}
-                            >
-                                Delete
-                            </Button>
-                        </DialogClose>
-                    </DialogFooter>
-                </DialogContent>
-            </Dialog>
-
-            {/* <Dialog open={open} onOpenChange={setOpen}>
-                    <DialogTrigger asChild>
-                        <Button className="!w-20 h-8 m-4">Edit app</Button>
-                    </DialogTrigger>
-                    <DialogContent className="sm:max-w-[425px]">
-                        <DialogHeader>
-                            <DialogTitle>Edit app</DialogTitle>
-                        </DialogHeader>
-
-                        <form action={editApiKeyFormAction}>
-                            <div className="grid gap-4 py-4">
-                                {editApiKeyFormState.error && (
-                                    <p className="text-red-500">
-                                        {editApiKeyFormState.error}
-                                    </p>
-                                )}
-                                <div className="grid grid-cols-4 items-center gap-4">
-                                    <Label
-                                        htmlFor="name"
-                                        className="text-right"
-                                    >
-                                        Name
-                                    </Label>
-                                    <Input
-                                        className="col-span-3"
-                                        id="editApiKey"
-                                        type="editApiKey"
-                                        name="newName"
-                                        value={editApiKey}
-                                        placeholder="Enter name"
-                                        required
-                                        onChange={(e) =>
-                                            setEditApiKey(e.target.value)
-                                        }
-                                    />
-                                    <Input
-                                        className="col-span-3"
-                                        id="name"
-                                        type="hidden"
-                                        name="name"
-                                        value={decodedName}
-                                        placeholder="Enter name"
-                                        required
-                                        readOnly
-                                    />
-                                </div>
-                            </div>
-                            <DialogFooter>
-                                <DialogClose asChild>
-                                    <Button className="!w-20 h-8">
-                                        Cancel
-                                    </Button>
-                                </DialogClose>
-                                <DialogClose asChild>
-                                    <Submit className="!w-20 h-8">
-                                        Update
-                                    </Submit>
-                                </DialogClose>
-                            </DialogFooter>
-                        </form>
-                    </DialogContent>
-                </Dialog> */}
-        </div>
+        <Dialog open={open} onOpenChange={setOpen}>
+            <DialogTrigger asChild>
+                <button type="button" className="workspace-button danger">
+                    Delete app
+                </button>
+            </DialogTrigger>
+            <DialogContent className="sm:max-w-[440px]">
+                <DialogHeader>
+                    <DialogTitle>Delete {appName}?</DialogTitle>
+                    <DialogDescription>
+                        This removes the app and its files and revokes its API
+                        key. This can’t be undone.
+                    </DialogDescription>
+                </DialogHeader>
+                {error ? (
+                    <p className="inline-error" role="alert">
+                        {error}
+                    </p>
+                ) : null}
+                <DialogFooter>
+                    <button
+                        type="button"
+                        className="workspace-button secondary"
+                        disabled={pending}
+                        onClick={() => setOpen(false)}
+                    >
+                        Cancel
+                    </button>
+                    <button
+                        type="button"
+                        className="workspace-button danger"
+                        disabled={pending}
+                        onClick={deleteApp}
+                    >
+                        {pending ? "Deleting…" : "Delete app"}
+                    </button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
     );
 }
-
-// function Submit({
-//     children,
-//     className = "",
-// }: {
-//     children: React.ReactNode;
-//     className?: string;
-// }) {
-//     const status = useFormStatus();
-
-//     return (
-//         <Button type="submit" disabled={status.pending} className={className}>
-//             {children}
-//         </Button>
-//     );
-// }
diff --git a/apps/web/app/app/[keyid]/settings/loading.tsx b/apps/web/app/app/[keyid]/settings/loading.tsx
index a633f28c..7617b025 100644
--- a/apps/web/app/app/[keyid]/settings/loading.tsx
+++ b/apps/web/app/app/[keyid]/settings/loading.tsx
@@ -1,51 +1,10 @@
-import { Card, CardContent } from "@/components/ui/card";
-import { Skeleton } from "@/components/ui/skeleton";
+import { Loader } from "@codelitdev/design-system";
 
-const Loading = () => {
+export default function Loading() {
     return (
-        <>
-            <Card>
-                <CardContent className="pt-6">
-                    <div className="flex flex-col gap-2">
-                        <div className="flex justify-between items-center">
-                            <Skeleton className="h-4 w-16" />
-                            <Skeleton className="h-4 w-20" />
-                        </div>
-                        <Skeleton className="h-2 w-full" />
-                    </div>
-                </CardContent>
-            </Card>
-            <Card className="my-4">
-                <CardContent className="pt-6">
-                    <div className="flex flex-col gap-4">
-                        <div>
-                            <Skeleton className="h-4 w-16 mb-2" />
-                            <div className="flex gap-2">
-                                <Skeleton className="h-10 flex-1" />
-                                <Skeleton className="h-10 w-10" />
-                            </div>
-                        </div>
-                        <div className="flex flex-col gap-2">
-                            <Skeleton className="h-4 w-16" />
-                            <Skeleton className="h-10 w-full" />
-                        </div>
-                    </div>
-                </CardContent>
-            </Card>
-            <Card className="border-destructive">
-                <CardContent className="pt-6">
-                    <div className="flex flex-col gap-4">
-                        <div className="flex items-center gap-2">
-                            <Skeleton className="h-5 w-5" />
-                            <Skeleton className="h-5 w-24" />
-                        </div>
-                        <Skeleton className="h-4 w-full" />
-                        <Skeleton className="h-10 w-24" />
-                    </div>
-                </CardContent>
-            </Card>
-        </>
+        <div className="loading-state" role="status">
+            <Loader product="medialit" size={64} />
+            <span className="visually-hidden">Loading</span>
+        </div>
     );
-};
-
-export default Loading;
+}
diff --git a/apps/web/app/app/[keyid]/settings/page.tsx b/apps/web/app/app/[keyid]/settings/page.tsx
index c8af2045..6468d243 100644
--- a/apps/web/app/app/[keyid]/settings/page.tsx
+++ b/apps/web/app/app/[keyid]/settings/page.tsx
@@ -1,97 +1,157 @@
-import { auth } from "@/auth";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
 import { redirect } from "next/navigation";
-import CopyApikeyButton from "./copy-apikey-button";
-import UpdateSettingsForm from "./update-settings-form";
-import { getApikeyUsingKeyId } from "@/app/actions";
+import { AlertTriangle, Database, KeyRound, Settings2 } from "lucide-react";
+import { auth } from "@/auth";
+import { getApikeyUsingKeyId, getAppSummary } from "@/app/actions";
+import { formatAppStorage } from "@/lib/media-format";
+import ApiKeyControl from "./api-key-control";
 import DeleteAppButton from "./delete-app-button";
-import { getTotalSpaceByApikey } from "./actions";
-import { Card, CardContent } from "@/components/ui/card";
-import { AlertTriangle } from "lucide-react";
+import UpdateSettingsForm from "./update-settings-form";
+import DefaultAppControl from "./default-app-control";
 
 export default async function Settings(props: {
     params: Promise<{ keyid: string }>;
-    searchParams: Promise<{ page: string }>;
 }) {
-    const params = await props.params;
-    const session = await auth();
-    if (!session) {
-        redirect("/login");
-    }
+    const [{ keyid }, session] = await Promise.all([props.params, auth()]);
+    if (!session) redirect("/login");
 
-    const keyid = params.keyid;
-    const apikey = await getApikeyUsingKeyId(keyid);
+    const [apikey, appSummary] = await Promise.all([
+        getApikeyUsingKeyId(keyid),
+        getAppSummary(keyid).catch(() => null),
+    ]);
+    if (!apikey) redirect("/");
 
-    if (!apikey) {
-        return null;
+    if (!appSummary) {
+        return (
+            <div className="inline-error" role="alert">
+                Could not load app storage details.
+            </div>
+        );
     }
 
-    const { storage, maxStorage } = await getTotalSpaceByApikey(keyid);
-
     return (
         <>
-            <Card>
-                <CardContent className="pt-6">
-                    <div className="flex flex-col gap-2">
-                        <div className="flex justify-between items-center">
-                            <Label htmlFor="name" className="mb-2">
-                                Storage
-                            </Label>
-                            <p className="font-semibold">
-                                {(storage / 1024 / 1024).toFixed(2)} MB
+            <div className="workspace-page-heading">
+                <div>
+                    <h1>App settings</h1>
+                    <p>
+                        Storage, API key, and options for{" "}
+                        {apikey.name || "this app"}.
+                    </p>
+                </div>
+            </div>
+
+            <div className="settings-stack">
+                <section className="settings-card">
+                    <div className="settings-card-title">
+                        <span className="settings-card-icon">
+                            <Database aria-hidden="true" />
+                        </span>
+                        <div>
+                            <h2>Storage</h2>
+                            <p className="settings-subtle">
+                                File storage used by this app.
                             </p>
                         </div>
-                        <div className="w-full h-2 bg-gray-200 rounded-full overflow-hidden">
-                            <div
-                                className="h-full bg-blue-500 rounded-full transition-all duration-300"
-                                style={{
-                                    width: `${Math.min((storage / maxStorage) * 100, 100)}%`,
-                                }}
-                            />
+                    </div>
+                    <div className="storage-value-row">
+                        <strong>{formatAppStorage(appSummary.storage)}</strong>
+                        <span>
+                            {appSummary.count}{" "}
+                            {appSummary.count === 1 ? "file" : "files"} ·{" "}
+                            {appSummary.share}% of all your storage
+                        </span>
+                    </div>
+                    <div className="storage-breakdown-list">
+                        {[
+                            ["Images", appSummary.imageStorage],
+                            ["Videos", appSummary.videoStorage],
+                            ["PDFs", appSummary.pdfStorage],
+                            ["Other", appSummary.otherStorage],
+                        ].map(([label, size]) => (
+                            <div className="storage-breakdown-row" key={label}>
+                                <span>{label}</span>
+                                <strong>
+                                    {formatAppStorage(Number(size))}
+                                </strong>
+                            </div>
+                        ))}
+                    </div>
+                </section>
+
+                <section className="settings-card">
+                    <div className="settings-card-title">
+                        <span className="settings-card-icon">
+                            <KeyRound aria-hidden="true" />
+                        </span>
+                        <div>
+                            <h2>API key</h2>
+                            <p className="settings-subtle">
+                                Use this key with the MediaLit SDK or REST API.
+                                Keep it out of client-side code.
+                            </p>
                         </div>
                     </div>
-                </CardContent>
-            </Card>
-            <Card className="my-4">
-                <CardContent className="pt-6">
-                    <div className="flex flex-col gap-4">
+                    <div className="settings-field">
+                        <label>API key</label>
+                        <ApiKeyControl apiKey={apikey.key} />
+                    </div>
+                </section>
+
+                <section className="settings-card">
+                    <div className="settings-card-title">
+                        <span className="settings-card-icon">
+                            <Settings2 aria-hidden="true" />
+                        </span>
                         <div>
-                            <Label htmlFor="apikey" className="mb-2">
-                                Apikey
-                            </Label>
-                            <div className="flex gap-2">
-                                <Input
-                                    id="apikey"
-                                    value={apikey.key}
-                                    type="password"
-                                    disabled
-                                />
-                                <CopyApikeyButton apikey={apikey.key} />
-                            </div>
+                            <h2>General</h2>
+                            <p className="settings-subtle">
+                                Choose a name that helps you identify this media
+                                library.
+                            </p>
+                        </div>
+                    </div>
+                    <UpdateSettingsForm
+                        keyId={apikey.keyId}
+                        name={apikey.name || ""}
+                    />
+                    <div className="settings-default-row">
+                        <div>
+                            <strong>Default app</strong>
+                            <p className="settings-subtle">
+                                Uploads from the dashboard and SDK calls without
+                                an app go here.
+                            </p>
                         </div>
-                        <UpdateSettingsForm
+                        <DefaultAppControl
                             keyId={apikey.keyId}
-                            name={apikey.name}
+                            isDefault={apikey.default}
                         />
                     </div>
-                </CardContent>
-            </Card>
-            <Card className="border-destructive">
-                <CardContent className="pt-6">
-                    <div className="flex flex-col gap-4">
-                        <div className="flex items-center gap-2 text-destructive">
-                            <AlertTriangle className="h-5 w-5" />
-                            <h3 className="font-semibold">Danger Zone</h3>
+                </section>
+
+                <section className="settings-card settings-card-danger">
+                    <div className="settings-card-title">
+                        <span className="settings-card-icon danger">
+                            <AlertTriangle aria-hidden="true" />
+                        </span>
+                        <div>
+                            <h2>Danger zone</h2>
+                            <p className="settings-subtle">
+                                Deleting this app removes its {appSummary.count}{" "}
+                                {appSummary.count === 1 ? "file" : "files"} and
+                                revokes its API key.
+                            </p>
                         </div>
-                        <p className="text-sm text-muted-foreground">
-                            Once you delete an app, there is no going back.
-                            Please be certain.
-                        </p>
-                        <DeleteAppButton apikey={apikey} />
                     </div>
-                </CardContent>
-            </Card>
+                    <div className="settings-danger-action">
+                        <p>This action cannot be undone.</p>
+                        <DeleteAppButton
+                            appName={apikey.name || "this app"}
+                            keyId={apikey.keyId}
+                        />
+                    </div>
+                </section>
+            </div>
         </>
     );
 }
diff --git a/apps/web/app/app/[keyid]/settings/update-settings-form.tsx b/apps/web/app/app/[keyid]/settings/update-settings-form.tsx
index 51d7eb28..e258417b 100644
--- a/apps/web/app/app/[keyid]/settings/update-settings-form.tsx
+++ b/apps/web/app/app/[keyid]/settings/update-settings-form.tsx
@@ -1,13 +1,11 @@
 "use client";
 
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
+import { useActionState, useEffect, useState } from "react";
 import { useFormStatus } from "react-dom";
-import { updateAppName } from "./actions";
-import { useEffect, useState, useActionState } from "react";
 import { useRouter } from "next/navigation";
-import { useToast } from "@/components/ui/use-toast";
+import { updateAppName } from "./actions";
+
+type UpdateState = { success: boolean; error?: string };
 
 export default function UpdateSettingsForm({
     keyId,
@@ -18,54 +16,52 @@ export default function UpdateSettingsForm({
 }) {
     const [state, updateNameAction] = useActionState(updateAppName, {
         success: false,
-    });
+    } as UpdateState);
     const [newName, setNewName] = useState(name);
     const router = useRouter();
-    const { toast } = useToast();
 
     useEffect(() => {
-        function refresh() {
-            router.refresh();
-        }
-
-        if (state.success) {
-            refresh();
-        }
-
-        if (state.error) {
-            toast({
-                title: "Error",
-                description:
-                    "There was a problem saving your changes. Please try again.",
-                variant: "destructive",
-            });
-        }
-    }, [state]);
+        if (state.success) router.refresh();
+    }, [router, state]);
 
     return (
-        <div>
-            <Label htmlFor="newName" className="mb-2">
-                App name
-            </Label>
-            <form action={updateNameAction} className="flex gap-2">
-                <Input
+        <div className="settings-field">
+            <label htmlFor="new-app-name">App name</label>
+            <form action={updateNameAction} className="settings-control-row">
+                <input
+                    id="new-app-name"
+                    className="settings-input"
                     name="newName"
                     value={newName}
-                    onChange={(e) => setNewName(e.target.value)}
+                    onChange={(event) => setNewName(event.target.value)}
+                    required
                 />
-                <Input name="keyId" value={keyId} type="hidden" />
-                <Submit>Save</Submit>
+                <input name="keyId" value={keyId} type="hidden" readOnly />
+                <SubmitButton />
             </form>
+            {state.error ? (
+                <p className="inline-error" role="alert">
+                    {String(state.error)}
+                </p>
+            ) : null}
+            {state.success ? (
+                <p className="inline-feedback" role="status">
+                    App name saved.
+                </p>
+            ) : null}
         </div>
     );
 }
 
-function Submit({ children }: { children: React.ReactNode }) {
+function SubmitButton() {
     const status = useFormStatus();
-
     return (
-        <Button type="submit" disabled={status.pending}>
-            {children}
-        </Button>
+        <button
+            className="workspace-button"
+            type="submit"
+            disabled={status.pending}
+        >
+            {status.pending ? "Saving…" : "Save"}
+        </button>
     );
 }
diff --git a/apps/web/app/apps-dashboard.tsx b/apps/web/app/apps-dashboard.tsx
new file mode 100644
index 00000000..8a05447d
--- /dev/null
+++ b/apps/web/app/apps-dashboard.tsx
@@ -0,0 +1,135 @@
+"use client";
+
+import Link from "next/link";
+import { useMemo, useState } from "react";
+import { Files, Folder, HardDrive, Search } from "lucide-react";
+import NewApp from "@/components/new-app-button";
+import type { AppsDashboardData } from "@/app/actions";
+import { formatAppStorage, formatLastUpload } from "@/lib/media-format";
+
+export default function AppsDashboard({ data }: { data: AppsDashboardData }) {
+    const [query, setQuery] = useState("");
+    const filteredApps = useMemo(() => {
+        const normalizedQuery = query.trim().toLowerCase();
+        if (!normalizedQuery) return data.apps;
+        return data.apps.filter((app) =>
+            app.name.toLowerCase().includes(normalizedQuery),
+        );
+    }, [data.apps, query]);
+
+    return (
+        <>
+            <div className="workspace-page-heading apps-dashboard-heading">
+                <div>
+                    <h1>All apps</h1>
+                    <p>
+                        {data.appCount} {data.appCount === 1 ? "app" : "apps"} ·{" "}
+                        {data.totalFiles}{" "}
+                        {data.totalFiles === 1 ? "file" : "files"} ·{" "}
+                        {formatAppStorage(data.totalStorage)} stored
+                    </p>
+                </div>
+                <div className="apps-dashboard-actions">
+                    <label className="apps-search">
+                        <Search aria-hidden="true" />
+                        <span className="visually-hidden">Search apps</span>
+                        <input
+                            type="search"
+                            aria-label="Search apps"
+                            placeholder="Search apps"
+                            value={query}
+                            onChange={(event) => setQuery(event.target.value)}
+                        />
+                    </label>
+                    <NewApp compact />
+                </div>
+            </div>
+
+            <section className="apps-stats-grid" aria-label="Storage overview">
+                <article className="apps-stat-card">
+                    <div className="apps-stat-label">
+                        <span>Storage used</span>
+                        <HardDrive aria-hidden="true" />
+                    </div>
+                    <strong>{formatAppStorage(data.totalStorage)}</strong>
+                    <p>
+                        Across {data.appCount}{" "}
+                        {data.appCount === 1 ? "app" : "apps"}
+                    </p>
+                </article>
+                <article className="apps-stat-card">
+                    <div className="apps-stat-label">
+                        <span>Files</span>
+                        <Files aria-hidden="true" />
+                    </div>
+                    <strong>{data.totalFiles}</strong>
+                    <p>
+                        {data.totalImages} images · {data.totalVideos} videos ·{" "}
+                        {data.totalPdfs} PDFs
+                    </p>
+                </article>
+                <article className="apps-stat-card">
+                    <div className="apps-stat-label">
+                        <span>Largest app</span>
+                        <Folder aria-hidden="true" />
+                    </div>
+                    <strong className="apps-largest-name">
+                        {data.largestApp?.name ?? "—"}
+                    </strong>
+                    <p>
+                        {data.largestApp
+                            ? `${formatAppStorage(data.largestApp.storage)} · ${data.largestApp.share}% of storage`
+                            : "No apps yet"}
+                    </p>
+                </article>
+            </section>
+
+            <div className="apps-list-heading">
+                <h2>Apps</h2>
+                <span>Sorted by last upload</span>
+            </div>
+            <section className="apps-overview-grid" aria-label="Apps">
+                {filteredApps.map((app) => (
+                    <Link
+                        key={app.keyId}
+                        href={`/app/${app.keyId}/files`}
+                        className="app-overview-card"
+                    >
+                        <span className="app-overview-top">
+                            <span className="app-overview-icon">
+                                <Folder aria-hidden="true" />
+                            </span>
+                            {app.default ? (
+                                <span className="cl-badge cl-badge--default">
+                                    Default
+                                </span>
+                            ) : null}
+                        </span>
+                        <strong className="app-overview-name">
+                            {app.name || "Untitled app"}
+                        </strong>
+                        <span className="app-overview-detail">
+                            {app.count} {app.count === 1 ? "file" : "files"} ·{" "}
+                            {formatAppStorage(app.storage)}
+                        </span>
+                        <span className="app-overview-meter" aria-hidden="true">
+                            <span style={{ width: `${app.share}%` }} />
+                        </span>
+                        <span className="app-overview-meta">
+                            <span>{formatLastUpload(app.lastUpload)}</span>
+                            <span>{app.share}% of storage</span>
+                        </span>
+                    </Link>
+                ))}
+                {filteredApps.length === 0 ? (
+                    <p className="apps-no-results" role="status">
+                        {data.apps.length
+                            ? "No apps match that search."
+                            : "No apps yet. Create your first app to get started."}
+                    </p>
+                ) : null}
+                <NewApp className="app-overview-new-card" />
+            </section>
+        </>
+    );
+}
diff --git a/apps/web/app/docs/page.tsx b/apps/web/app/docs/page.tsx
index d269ef71..01ca59e6 100644
--- a/apps/web/app/docs/page.tsx
+++ b/apps/web/app/docs/page.tsx
@@ -1,11 +1,25 @@
-import React from "react";
+import { ArrowUpRight, BookOpenText } from "lucide-react";
 
-const Docs = () => {
+export default function Docs() {
     return (
-        <>
-            <div> Docs page</div>
-        </>
+        <section className="docs-landing-card">
+            <span className="settings-card-icon">
+                <BookOpenText aria-hidden="true" />
+            </span>
+            <p className="docs-eyebrow">MediaLit documentation</p>
+            <h1>Build with your media library</h1>
+            <p className="docs-description">
+                Learn how to upload files, serve media, and connect MediaLit to
+                your product.
+            </p>
+            <a
+                className="workspace-button"
+                href="https://docs.medialit.cloud/quick-start"
+                target="_blank"
+                rel="noreferrer"
+            >
+                Browse the docs <ArrowUpRight aria-hidden="true" />
+            </a>
+        </section>
     );
-};
-
-export default Docs;
+}
diff --git a/apps/web/app/favicon.ico b/apps/web/app/favicon.ico
deleted file mode 100644
index 718d6fea..00000000
Binary files a/apps/web/app/favicon.ico and /dev/null differ
diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
index 27e12ec6..e52735e9 100644
--- a/apps/web/app/globals.css
+++ b/apps/web/app/globals.css
@@ -1,76 +1,2766 @@
+@import "@codelitdev/design-system/styles.css";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-@layer base {
-    :root {
-        --background: 0 0% 100%;
-        --foreground: 222.2 84% 4.9%;
+:root {
+    color-scheme: light;
+}
+
+html,
+body {
+    min-height: 100%;
+}
+
+.dialog-overlay-warm {
+    background: var(--scrim);
+}
 
-        --card: 0 0% 100%;
-        --card-foreground: 222.2 84% 4.9%;
+body {
+    margin: 0;
+    background: var(--background);
+    color: var(--foreground);
+    font-family: var(--font-sans);
+    font-size: 14px;
+}
 
-        --popover: 0 0% 100%;
-        --popover-foreground: 222.2 84% 4.9%;
+button,
+input,
+select,
+textarea {
+    font: inherit;
+}
 
-        --primary: 222.2 47.4% 11.2%;
-        --primary-foreground: 210 40% 98%;
+.toaster [data-sonner-toast][data-styled="true"] {
+    background: var(--popover);
+    border-color: var(--border);
+    border-radius: var(--radius);
+    box-shadow: var(--shadow-popover);
+    color: var(--popover-foreground);
+    font-family: var(--font-sans);
+}
 
-        --secondary: 210 40% 96.1%;
-        --secondary-foreground: 222.2 47.4% 11.2%;
+.toaster [data-sonner-toast][data-styled="true"] [data-description] {
+    color: var(--foreground);
+    opacity: 1;
+}
 
-        --muted: 210 40% 96.1%;
-        --muted-foreground: 215.4 16.3% 46.9%;
+.toaster [data-sonner-toast][data-styled="true"] [data-button] {
+    box-sizing: border-box;
+    height: 36px;
+    min-height: 36px;
+    padding: 0 13px;
+    border: 1px solid transparent;
+    border-radius: 8px;
+    background: var(--primary);
+    color: var(--primary-foreground);
+    font: 650 12px / 1 var(--font-sans);
+    transition:
+        background 150ms ease,
+        border-color 150ms ease,
+        color 150ms ease;
+}
 
-        --accent: 210 40% 96.1%;
-        --accent-foreground: 222.2 47.4% 11.2%;
+.toaster [data-sonner-toast][data-styled="true"] [data-button]:hover {
+    background: var(--primary-hover);
+    opacity: 1;
+}
 
-        --destructive: 0 84.2% 60.2%;
-        --destructive-foreground: 210 40% 98%;
+.toaster [data-sonner-toast][data-styled="true"] [data-button]:focus-visible {
+    box-shadow: var(--shadow-focus);
+}
 
-        --border: 214.3 31.8% 91.4%;
-        --input: 214.3 31.8% 91.4%;
-        --ring: 222.2 84% 4.9%;
+.toaster [data-sonner-toast][data-styled="true"] [data-cancel] {
+    border-color: var(--border);
+    background: var(--secondary);
+    color: var(--secondary-foreground);
+}
 
-        --radius: 0.5rem;
-    }
+a {
+    color: inherit;
+    text-decoration: none;
+}
+
+.workspace-shell {
+    display: flex;
+    min-height: 100vh;
+    background: var(--background);
+}
+
+.workspace-sidebar-group {
+    position: relative;
+    display: flex;
+    flex: 0 0 auto;
+    height: 100vh;
+}
+
+.workspace-sidebar-gap {
+    flex: 0 0 264px;
+    width: 264px;
+    height: 100%;
+    transition:
+        width 200ms linear,
+        flex-basis 200ms linear;
+}
+
+.workspace-sidebar-group[data-collapsible="icon"] .workspace-sidebar-gap {
+    flex-basis: 48px;
+    width: 48px;
+}
+
+.workspace-sidebar {
+    position: fixed;
+    inset: 0 auto 0 0;
+    display: flex;
+    flex: 0 0 auto;
+    flex-direction: column;
+    width: 264px;
+    height: 100vh;
+    padding: 12px;
+    border-right: 1px solid var(--border);
+    background: var(--card);
+    transition:
+        width 200ms linear,
+        padding 200ms linear;
+    z-index: 30;
+}
+
+.workspace-sidebar.is-collapsed {
+    width: 48px;
+    padding: 12px 4px;
+}
+
+.workspace-sidebar-header {
+    display: flex;
+    flex: none;
+    flex-direction: column;
+    min-width: 0;
+}
+
+.workspace-app-switcher {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+}
+
+.workspace-sidebar-content {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-height: 0;
+}
+
+.workspace-beta {
+    border: 1px solid var(--border);
+    border-radius: 5px;
+    padding: 2px 5px;
+    color: var(--muted-foreground);
+    font-size: 10px;
+    font-weight: 600;
+    letter-spacing: 0;
+}
+
+.workspace-app-switcher {
+    width: 100%;
+    gap: 8px;
+    padding: 8px;
+    border: 0;
+    border-radius: 8px;
+    background: transparent;
+    color: var(--foreground);
+    text-align: left;
+    cursor: pointer;
+}
+
+.workspace-app-switcher:hover,
+.workspace-app-switcher.is-open,
+.workspace-rail-link:hover {
+    background: var(--muted);
+}
+
+.workspace-app-avatar,
+.workspace-user-avatar,
+.app-card-mark {
+    display: grid;
+    flex: none;
+    place-items: center;
+    width: 34px;
+    height: 34px;
+    border-radius: 9px;
+    background: var(--primary-soft);
+    color: var(--primary);
+    font-weight: 700;
+}
+
+.workspace-app-copy,
+.workspace-user-copy {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-width: 0;
+    gap: 3px;
+}
+
+.workspace-app-copy {
+    gap: 0;
+    line-height: 1.25;
+}
+
+.workspace-app-avatar {
+    width: 36px;
+    height: 36px;
+    border-radius: 8px;
+}
+
+.workspace-app-copy strong,
+.workspace-user-copy strong {
+    overflow: hidden;
+    font-weight: 500;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.workspace-app-copy strong {
+    font-size: 14px;
+}
+
+.workspace-user-copy strong {
+    font-size: 14px;
+}
+
+.workspace-app-copy span,
+.workspace-user-copy span {
+    overflow: hidden;
+    color: var(--muted-foreground);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.workspace-app-copy span {
+    font-size: 12px;
+}
+
+.workspace-user-copy span {
+    font-size: 11px;
+}
+
+.workspace-nav {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    margin-top: 18px;
+}
+
+.workspace-rail-link {
+    display: flex;
+    align-items: center;
+    min-height: 40px;
+    gap: 11px;
+    padding: 0 10px;
+    border: 0;
+    border-radius: 9px;
+    background: transparent;
+    color: var(--muted-foreground);
+    font-size: 13px;
+    font-weight: 550;
+    text-align: left;
+    cursor: pointer;
+}
+
+.workspace-rail-link svg {
+    flex: none;
+    width: 17px;
+    height: 17px;
+}
+
+.workspace-rail-link.is-active {
+    background: var(--primary-soft);
+    color: var(--primary);
+    font-weight: 650;
+}
+
+.workspace-rail-link .rail-count {
+    margin-left: auto;
+    color: var(--muted-foreground);
+    font-size: 11px;
+    font-weight: 500;
+}
+
+.workspace-sidebar-spacer {
+    flex: 1;
+}
+
+.workspace-sidebar-bottom {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    padding-top: 10px;
+}
+
+.workspace-user {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    gap: 9px;
+    padding: 8px;
+}
+
+.workspace-user-menu {
+    position: relative;
+    min-width: 0;
+}
+
+.workspace-user-menu-trigger {
+    width: 100%;
+    border: 0;
+    border-radius: 8px;
+    background: transparent;
+    color: var(--foreground);
+    text-align: left;
+    cursor: pointer;
+}
+
+.workspace-user-menu-trigger:hover,
+.workspace-user-menu-trigger.is-open {
+    background: var(--muted);
+}
+
+.workspace-user-chevron {
+    flex: none;
+    width: 15px;
+    height: 15px;
+    margin-left: auto;
+    color: var(--muted-foreground);
+}
+
+.workspace-user-avatar {
+    width: 32px;
+    height: 32px;
+    border-radius: 8px;
+    background: var(--muted);
+    color: var(--foreground);
+    font-size: 12px;
+}
+
+.workspace-sidebar.is-collapsed .workspace-app-copy,
+.workspace-sidebar.is-collapsed .workspace-app-switcher > svg,
+.workspace-sidebar.is-collapsed .workspace-rail-link > span,
+.workspace-sidebar.is-collapsed .workspace-user-copy,
+.workspace-sidebar.is-collapsed .workspace-user-chevron {
+    display: none;
+}
+
+.workspace-sidebar.is-collapsed .workspace-app-switcher,
+.workspace-sidebar.is-collapsed .workspace-rail-link {
+    justify-content: center;
+    padding-right: 0;
+    padding-left: 0;
+}
+
+.workspace-sidebar.is-collapsed .workspace-app-switcher {
+    padding-top: 0;
+    padding-bottom: 0;
+}
+
+.workspace-sidebar.is-collapsed .workspace-user {
+    justify-content: center;
+    padding: 0;
+}
+
+.workspace-main {
+    flex: 1;
+    min-width: 0;
+}
+
+.workspace-topbar {
+    position: sticky;
+    top: 0;
+    z-index: 20;
+    display: flex;
+    align-items: center;
+    height: 56px;
+    gap: 8px;
+    padding: 0 16px;
+    border-bottom: 1px solid var(--border);
+    background: var(--background);
+}
+
+.workspace-topbar-divider {
+    flex: none;
+    height: 16px;
+    margin-right: 8px;
+    border-left: 1px solid var(--border);
+}
+
+.icon-control {
+    display: inline-grid;
+    flex: none;
+    place-items: center;
+    width: 36px;
+    height: 36px;
+    padding: 0;
+    border: 1px solid transparent;
+    border-radius: 8px;
+    background: transparent;
+    color: var(--muted-foreground);
+    cursor: pointer;
+}
+
+.icon-control:hover {
+    background: var(--muted);
+    color: var(--foreground);
+}
+
+.icon-control svg {
+    width: 16px;
+    height: 16px;
+}
+
+.workspace-sidebar-trigger {
+    width: 32px;
+    height: 32px;
+    margin-left: -4px;
+}
+
+.workspace-sidebar-trigger svg {
+    width: 16px;
+    height: 16px;
+}
+
+.workspace-breadcrumb {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    gap: 8px;
+    color: var(--muted-foreground);
+    font-size: 13px;
+}
+
+.workspace-breadcrumb-current-app {
+    display: inline-block;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.workspace-breadcrumb strong {
+    overflow: hidden;
+    color: var(--foreground);
+    font-weight: 600;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.account-menu {
+    width: 256px;
+    max-width: calc(100vw - 24px);
+    padding: 4px;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    background: var(--popover);
+    box-shadow: var(--shadow-popover);
+}
+
+.account-menu-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 8px;
+    font-weight: 400;
+}
+
+.account-menu-avatar {
+    display: grid;
+    flex: none;
+    place-items: center;
+    width: 32px;
+    height: 32px;
+    border-radius: 8px;
+    background: var(--muted);
+    color: var(--foreground);
+    font-size: 12px;
+    font-weight: 600;
+}
+
+.account-menu-copy {
+    display: grid;
+    flex: 1;
+    min-width: 0;
+    line-height: 1.25;
+}
+
+.account-menu-copy strong {
+    overflow: hidden;
+    font-size: 14px;
+    font-weight: 500;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.account-menu-copy > span {
+    overflow: hidden;
+    color: var(--muted-foreground);
+    font-size: 12px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
 
-    .dark {
-        --background: 222.2 84% 4.9%;
-        --foreground: 210 40% 98%;
+.account-menu-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+    min-height: 32px;
+    padding: 6px 8px;
+    border-radius: 6px;
+    color: var(--foreground);
+    font-size: 14px;
+    text-align: left;
+    cursor: pointer;
+    outline: none;
+}
+
+.account-menu-item svg {
+    flex: none;
+    width: 16px;
+    height: 16px;
+    color: var(--muted-foreground);
+}
+
+.account-menu-item:hover,
+.account-menu-item[data-highlighted] {
+    background: var(--muted);
+    color: var(--foreground);
+}
+
+.account-menu-separator {
+    height: 1px;
+    margin: 4px -7px;
+    background: var(--border);
+}
+
+.account-menu svg {
+    color: var(--muted-foreground);
+}
+
+.workspace-content {
+    width: 100%;
+    max-width: none;
+    min-width: 0;
+    padding: 32px 40px 60px;
+}
+
+.workspace-page-heading {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 20px;
+    margin-bottom: 26px;
+}
+
+.workspace-page-heading h1 {
+    margin: 0;
+    font: var(--text-h1);
+    letter-spacing: var(--tracking-tight);
+}
+
+.workspace-page-heading p {
+    margin: 7px 0 0;
+    color: var(--muted-foreground);
+    font-size: 13px;
+}
+
+.files-title-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
 
-        --card: 222.2 84% 4.9%;
-        --card-foreground: 210 40% 98%;
+.files-title-row .cl-badge {
+    flex: none;
+    font-size: 10px;
+    padding: 4px 9px;
+}
 
-        --popover: 222.2 84% 4.9%;
-        --popover-foreground: 210 40% 98%;
+.workspace-section-title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    margin: 30px 0 13px;
+}
 
-        --primary: 210 40% 98%;
-        --primary-foreground: 222.2 47.4% 11.2%;
+.workspace-section-title h2 {
+    margin: 0;
+    font-size: 15px;
+    font-weight: 650;
+}
 
-        --secondary: 217.2 32.6% 17.5%;
-        --secondary-foreground: 210 40% 98%;
+.workspace-section-title p {
+    margin: 4px 0 0;
+    color: var(--muted-foreground);
+    font-size: 12px;
+}
 
-        --muted: 217.2 32.6% 17.5%;
-        --muted-foreground: 215 20.2% 65.1%;
+.workspace-mobile-sidebar-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 41;
+    background: rgb(0 0 0 / 10%);
+    -webkit-backdrop-filter: blur(2px);
+    backdrop-filter: blur(2px);
+}
 
-        --accent: 217.2 32.6% 17.5%;
-        --accent-foreground: 210 40% 98%;
+@keyframes workspace-sidebar-enter {
+    from {
+        opacity: 0;
+        transform: translateX(-2.5rem);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
 
-        --destructive: 0 62.8% 30.6%;
-        --destructive-foreground: 210 40% 98%;
+@keyframes workspace-sidebar-exit {
+    from {
+        opacity: 1;
+        transform: translateX(0);
+    }
+    to {
+        opacity: 0;
+        transform: translateX(-2.5rem);
+    }
+}
 
-        --border: 217.2 32.6% 17.5%;
-        --input: 217.2 32.6% 17.5%;
-        --ring: 212.7 26.8% 83.9%;
+@keyframes workspace-sidebar-overlay-enter {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
     }
 }
 
-@layer base {
-    * {
-        @apply border-border;
+@keyframes workspace-sidebar-overlay-exit {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
     }
-    body {
-        @apply bg-background text-foreground;
+}
+
+.workspace-mobile-sidebar-overlay[data-state="open"] {
+    animation: workspace-sidebar-overlay-enter 100ms ease-in-out both;
+}
+
+.workspace-mobile-sidebar-overlay[data-state="closed"] {
+    animation: workspace-sidebar-overlay-exit 100ms ease-in-out both;
+}
+
+.workspace-sidebar[data-state="open"] {
+    animation: workspace-sidebar-enter 200ms ease-in-out both;
+}
+
+.workspace-sidebar[data-state="closed"] {
+    animation: workspace-sidebar-exit 200ms ease-in-out both;
+}
+
+.new-app-plus {
+    display: inline-grid;
+    place-items: center;
+    width: 16px;
+    height: 16px;
+    border: 1px solid currentColor;
+    border-radius: 5px;
+    font-size: 15px;
+    line-height: 1;
+}
+
+.public-shell {
+    min-height: 100vh;
+}
+
+.public-topbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 64px;
+    padding: 0 max(24px, calc((100vw - 1120px) / 2));
+    border-bottom: 1px solid var(--border);
+    background: var(--card);
+}
+
+.public-brand {
+    display: flex;
+    align-items: center;
+    gap: 9px;
+    font-size: 16px;
+    font-weight: 700;
+}
+
+.public-brand img {
+    width: 30px;
+    height: 30px;
+}
+
+.public-links {
+    display: flex;
+    align-items: center;
+    gap: 22px;
+    color: var(--muted-foreground);
+    font-size: 13px;
+}
+
+.public-links a:hover {
+    color: var(--foreground);
+}
+
+.public-content {
+    width: min(100%, 1040px);
+    margin: 0 auto;
+    padding: 44px 24px 72px;
+}
+
+.public-content h1 {
+    font: var(--text-h1);
+}
+
+.legal-document {
+    max-width: 760px;
+    margin: 0 auto;
+    color: var(--foreground);
+    font-size: 14px;
+    line-height: 1.75;
+}
+
+.legal-document h1 {
+    margin: 0;
+    font: var(--text-h1);
+    letter-spacing: var(--tracking-tight);
+}
+
+.legal-document h2 {
+    margin: 11px 0 -14px;
+    font-size: 18px;
+    font-weight: 650;
+}
+
+.legal-document p,
+.legal-document ul {
+    margin: 0;
+    color: var(--muted-foreground);
+}
+
+.legal-document ul {
+    padding-left: 22px;
+}
+
+.legal-document a {
+    color: var(--primary);
+    text-decoration: underline;
+    text-underline-offset: 3px;
+}
+
+.docs-landing-card {
+    max-width: 680px;
+    padding: 34px;
+    margin: 32px auto;
+    border: 1px solid var(--border);
+    border-radius: 16px;
+    background: var(--card);
+    box-shadow: var(--shadow-card);
+}
+
+.docs-landing-card .settings-card-icon {
+    width: 42px;
+    height: 42px;
+    color: var(--primary);
+    background: var(--primary-soft);
+}
+
+.docs-landing-card .settings-card-icon svg {
+    width: 20px;
+    height: 20px;
+}
+
+.docs-eyebrow {
+    margin: 22px 0 8px;
+    color: var(--primary);
+    font: var(--text-eyebrow);
+    text-transform: uppercase;
+}
+
+.docs-landing-card h1 {
+    margin: 0;
+    font: var(--text-display);
+    letter-spacing: var(--tracking-tight);
+}
+
+.docs-description {
+    max-width: 460px;
+    margin: 10px 0 21px;
+    color: var(--muted-foreground);
+    font-size: 14px;
+    line-height: 1.6;
+}
+
+.app-grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 14px;
+}
+
+.app-card {
+    display: flex;
+    align-items: center;
+    min-height: 116px;
+    gap: 13px;
+    padding: 17px;
+    border: 1px solid var(--border);
+    border-radius: 13px;
+    background: var(--card);
+    box-shadow: var(--shadow-card);
+    transition:
+        border-color 150ms ease,
+        transform 150ms ease;
+}
+
+.app-card:hover {
+    transform: translateY(-2px);
+    border-color: var(--primary);
+}
+
+.app-card-mark {
+    width: 42px;
+    height: 42px;
+    border-radius: 11px;
+}
+
+.app-card-copy {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-width: 0;
+    gap: 7px;
+}
+
+.app-card-copy strong {
+    overflow: hidden;
+    font-size: 14px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.app-card-copy span {
+    color: var(--muted-foreground);
+    font-size: 12px;
+}
+
+.app-card-badges {
+    display: flex;
+    gap: 6px;
+}
+
+.apps-dashboard-heading {
+    align-items: flex-start;
+}
+
+.apps-dashboard-actions {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.apps-search {
+    display: flex;
+    align-items: center;
+    width: min(280px, 32vw);
+    height: 36px;
+    gap: 8px;
+    padding: 0 10px;
+    border: 1px solid var(--input);
+    border-radius: 9px;
+    background: var(--card);
+    color: var(--muted-foreground);
+}
+
+.apps-search:focus-within {
+    border-color: var(--ring);
+    box-shadow: var(--shadow-focus);
+}
+
+.apps-search svg {
+    flex: none;
+    width: 16px;
+    height: 16px;
+}
+
+.apps-search input {
+    width: 100%;
+    min-width: 0;
+    border: 0;
+    outline: 0;
+    background: transparent;
+    color: var(--foreground);
+    font-size: 12px;
+}
+
+.apps-search input::placeholder {
+    color: var(--muted-foreground);
+}
+
+.apps-stats-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 16px;
+    margin: 4px 0 2px;
+}
+
+.apps-stat-card {
+    min-width: 0;
+    padding: 20px 24px;
+    border: 1px solid var(--border);
+    border-radius: 16px;
+    background: var(--card);
+    box-shadow: var(--shadow-card);
+}
+
+.apps-stat-label {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    color: var(--foreground);
+    font-size: 14px;
+    font-weight: 500;
+}
+
+.apps-stat-label svg {
+    flex: none;
+    width: 17px;
+    height: 17px;
+    color: var(--muted-foreground);
+}
+
+.apps-stat-card > strong {
+    display: block;
+    overflow: hidden;
+    margin-top: 8px;
+    font-size: 28px;
+    font-weight: 600;
+    line-height: 1.15;
+    letter-spacing: -0.02em;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.apps-stat-card > p {
+    overflow: hidden;
+    margin: 8px 0 0;
+    color: var(--muted-foreground);
+    font-size: 12px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.apps-list-heading {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    margin: 27px 0 23px;
+}
+
+.apps-list-heading h2 {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 650;
+}
+
+.apps-list-heading > span {
+    color: var(--muted-foreground);
+    font-size: 11px;
+}
+
+.apps-overview-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+    gap: 16px;
+}
+
+.app-overview-card {
+    display: flex;
+    min-width: 0;
+    flex-direction: column;
+    gap: 10px;
+    padding: 20px;
+    border: 1px solid var(--border);
+    border-radius: 16px;
+    background: var(--card);
+    box-shadow: var(--shadow-card);
+    transition:
+        border-color 150ms ease,
+        transform 150ms ease;
+}
+
+.app-overview-card:hover {
+    transform: translateY(-2px);
+    border-color: var(--primary);
+}
+
+.app-overview-top {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    min-height: 40px;
+}
+
+.app-overview-icon {
+    display: grid;
+    flex: none;
+    place-items: center;
+    width: 40px;
+    height: 40px;
+    border-radius: 11px;
+    background: var(--primary-soft);
+    color: var(--primary);
+}
+
+.app-overview-icon svg {
+    width: 18px;
+    height: 18px;
+}
+
+.app-overview-name {
+    overflow: hidden;
+    margin-top: 0;
+    font-size: 16px;
+    font-weight: 600;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.app-overview-detail {
+    margin-top: 7px;
+    color: var(--muted-foreground);
+    font-size: 11px;
+}
+
+.app-overview-meter {
+    display: block;
+    overflow: hidden;
+    height: 6px;
+    margin-top: 12px;
+    border-radius: 999px;
+    background: var(--muted);
+}
+
+.app-overview-meter > span {
+    display: block;
+    height: 100%;
+    border-radius: inherit;
+    background: var(--primary);
+}
+
+.app-overview-meta {
+    display: flex;
+    justify-content: space-between;
+    gap: 8px;
+    margin-top: 11px;
+    color: var(--muted-foreground);
+    font-size: 10px;
+}
+
+.app-overview-meta span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.app-overview-new-card {
+    display: flex !important;
+    height: auto !important;
+    min-height: 194px;
+    flex-direction: column;
+    align-items: center !important;
+    justify-content: center !important;
+    gap: 12px;
+    padding: 20px !important;
+    border: 1px dashed var(--border) !important;
+    background: transparent !important;
+    color: var(--muted-foreground) !important;
+    box-shadow: none !important;
+    font-size: 13px;
+}
+
+.app-overview-new-card:hover {
+    border-color: var(--primary) !important;
+    background: var(--card) !important;
+    color: var(--foreground) !important;
+}
+
+.app-overview-new-card .new-app-plus {
+    display: grid;
+    place-items: center;
+    width: 38px;
+    height: 38px;
+    border-radius: 50%;
+    background: var(--primary-soft);
+    color: var(--primary);
+    font-size: 23px;
+    font-weight: 400;
+}
+
+.apps-no-results {
+    grid-column: 1 / -1;
+    margin: 0;
+    padding: 18px 2px;
+    color: var(--muted-foreground);
+    font-size: 13px;
+}
+
+.empty-state {
+    display: grid;
+    min-height: 300px;
+    place-items: center;
+    padding: 36px;
+    border: 1px dashed var(--border);
+    border-radius: 14px;
+    background: color-mix(in oklch, var(--card), transparent 35%);
+    text-align: center;
+}
+
+.empty-state-icon {
+    width: 38px;
+    height: 38px;
+    margin: 0 auto 12px;
+    color: var(--primary);
+}
+
+.empty-state h2 {
+    margin: 0 0 6px;
+    font-size: 16px;
+}
+
+.empty-state p {
+    max-width: 360px;
+    margin: 0 auto 16px;
+    color: var(--muted-foreground);
+    line-height: 1.5;
+}
+
+.file-toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 11px;
+    margin-bottom: 24px;
+}
+
+.file-toolbar-main,
+.file-toolbar-actions {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 9px;
+}
+
+/* Desktop: search, filters, sort and layout toggle share one row, as in the
+   design. Narrow screens still wrap. */
+@media (min-width: 900px) {
+    .file-toolbar {
+        flex-wrap: nowrap;
+    }
+
+    .file-toolbar-main {
+        flex: 1 1 auto;
+        flex-wrap: nowrap;
+        min-width: 0;
+    }
+
+    .file-toolbar-actions {
+        flex: none;
+        flex-wrap: nowrap;
+    }
+
+    .file-toolbar .file-search {
+        flex: 0 1 280px;
+        width: auto;
+        min-width: 180px;
+    }
+
+    .file-toolbar .filter-group {
+        flex: none;
+    }
+}
+
+.file-search {
+    position: relative;
+    width: min(280px, 100%);
+}
+
+.file-search > svg {
+    position: absolute;
+    top: 50%;
+    left: 11px;
+    width: 15px;
+    height: 15px;
+    color: var(--muted-foreground);
+    transform: translateY(-50%);
+    pointer-events: none;
+}
+
+.file-search input {
+    width: 100%;
+    height: 36px;
+    padding: 0 12px 0 34px;
+    border: 1px solid var(--input);
+    border-radius: 8px;
+    outline: 0;
+    background: var(--card);
+    color: var(--foreground);
+    font-size: 13px;
+}
+
+.file-search input:focus {
+    border-color: var(--ring);
+    box-shadow: 0 0 0 3px var(--primary-soft);
+}
+
+.filter-group,
+.view-group {
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+    padding: 3px;
+    border: 1px solid var(--border);
+    border-radius: 9px;
+    background: var(--muted);
+}
+
+.filter-chip,
+.view-chip {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    height: 28px;
+    padding: 0 10px;
+    border: 0;
+    border-radius: 6px;
+    background: transparent;
+    color: var(--muted-foreground);
+    font-size: 12px;
+    white-space: nowrap;
+    cursor: pointer;
+}
+
+.filter-chip:hover,
+.view-chip:hover {
+    color: var(--foreground);
+}
+
+.filter-chip.is-active,
+.view-chip.is-active {
+    background: var(--card);
+    color: var(--foreground);
+    box-shadow: var(--shadow-card);
+}
+
+.filter-chip span {
+    color: var(--muted-foreground);
+    font-size: 10px;
+}
+
+.view-chip {
+    width: 31px;
+    padding: 0;
+}
+
+.view-chip svg {
+    width: 15px;
+    height: 15px;
+}
+
+.file-sort {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    height: 36px;
+    min-width: 170px;
+    padding: 0 12px;
+    border: 1px solid var(--input);
+    border-radius: 8px;
+    background: var(--card);
+    color: var(--foreground);
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+}
+
+.file-sort:hover,
+.file-sort[data-state="open"] {
+    border-color: var(--primary);
+}
+
+.file-sort:focus-visible {
+    outline: none;
+    box-shadow: var(--shadow-focus);
+}
+
+.file-sort > svg:first-child {
+    flex: none;
+    width: 16px;
+    height: 16px;
+    color: var(--muted-foreground);
+}
+
+.file-sort > span {
+    flex: 1;
+    min-width: 0;
+    text-align: left;
+}
+
+.file-sort > svg:last-child {
+    flex: none;
+    width: 16px;
+    height: 16px;
+    color: var(--muted-foreground);
+}
+
+.file-sort-menu {
+    min-width: 200px;
+}
+
+.file-sort-menu [role="menuitemradio"].file-sort-item {
+    justify-content: space-between;
+    padding: 8px 10px;
+    font-size: 14px;
+}
+
+.file-sort-menu [role="menuitemradio"].file-sort-item > span:first-child {
+    display: none;
+}
+
+.file-sort-check {
+    width: 16px;
+    height: 16px;
+    color: var(--foreground);
+}
+
+.file-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+    gap: 16px;
+}
+
+.file-card-shell {
+    position: relative;
+    min-width: 0;
+}
+
+.file-card {
+    display: block;
+    width: 100%;
+    min-width: 0;
+    overflow: hidden;
+    padding: 0;
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    background: var(--card);
+    color: var(--foreground);
+    text-align: left;
+    cursor: pointer;
+    transition:
+        box-shadow 150ms ease,
+        border-color 150ms ease,
+        transform 150ms ease;
+}
+
+.file-card:hover {
+    transform: translateY(-2px);
+    border-color: color-mix(in oklch, var(--primary), var(--border) 45%);
+    box-shadow: var(--shadow-raised);
+}
+
+.file-card-shell.is-selected .file-card {
+    border-color: var(--primary);
+    box-shadow: 0 0 0 2px var(--primary-soft);
+}
+
+.file-select-control {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    z-index: 3;
+    display: grid;
+    width: 28px;
+    height: 28px;
+    place-items: center;
+    border-radius: 8px;
+    background: var(--card);
+    box-shadow: var(--shadow-card);
+}
+
+.file-select-control .cl-check {
+    display: grid;
+    width: 100%;
+    height: 100%;
+    place-items: center;
+    gap: 0;
+}
+
+.file-select-control .cl-check__box {
+    margin: 0;
+}
+
+/* Keep the accessible label, but take it out of layout so the box centers. */
+.file-select-control .cl-check__label {
+    position: absolute;
+}
+
+.file-preview-area {
+    position: relative;
+    display: grid;
+    aspect-ratio: 4 / 3;
+    place-items: center;
+    overflow: hidden;
+    background: var(--muted);
+}
+
+.file-preview-area img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+/* File details dialog: preview beside details on desktop, stacked with a
+   scrolling body on mobile. */
+.file-dialog {
+    display: grid;
+    grid-template-areas:
+        "title"
+        "preview"
+        "body";
+    grid-template-rows: auto 300px minmax(0, 1fr);
+    max-height: calc(100dvh - 24px);
+}
+
+@media (min-width: 760px) {
+    .file-dialog {
+        grid-template-columns: minmax(0, 1fr) 476px;
+        grid-template-areas:
+            "preview title"
+            "preview body";
+        grid-template-rows: auto minmax(0, 1fr);
+        height: min(760px, calc(100dvh - 48px));
+        max-height: none;
+    }
+}
+
+.file-dialog-title {
+    grid-area: title;
+    display: flex;
+    align-items: center;
+    min-height: 64px;
+    margin: 0;
+    padding: 0 56px 0 20px;
+    border-bottom: 1px solid var(--border);
+    font-size: 16px;
+    font-weight: 600;
+}
+
+.file-dialog-preview {
+    position: relative;
+    grid-area: preview;
+    display: grid;
+    min-height: 0;
+    place-items: center;
+    overflow: hidden;
+    background: var(--primary-soft);
+}
+
+.file-dialog-media {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    border: 0;
+    background: var(--card);
+    object-fit: contain;
+}
+
+.file-dialog-loading {
+    display: grid;
+    place-items: center;
+    color: var(--primary);
+}
+
+.file-dialog-audio {
+    display: grid;
+    justify-items: center;
+    gap: 16px;
+    width: min(360px, calc(100% - 32px));
+    color: var(--primary);
+}
+
+.file-dialog-audio svg {
+    width: 56px;
+    height: 56px;
+}
+
+.file-dialog-preview .file-type-icon {
+    width: 72px;
+    height: 72px;
+    color: var(--primary);
+}
+
+.file-dialog-preview .file-preview-caption {
+    left: 12px;
+    bottom: 12px;
+}
+
+.file-dialog-body {
+    grid-area: body;
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+    min-height: 0;
+    overflow-y: auto;
+    padding: 20px 24px 24px;
+}
+
+.file-dialog-name {
+    margin: 0;
+    overflow-wrap: anywhere;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 1.35;
+}
+
+.file-dialog-badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-top: 8px;
+}
+
+.file-badge {
+    padding: 4px 10px;
+    border-radius: 999px;
+    background: var(--muted);
+    color: var(--muted-foreground);
+    font-size: 12px;
+    font-weight: 500;
+}
+
+.file-badge.is-public {
+    background: var(--success-soft);
+    color: var(--success);
+}
+
+.file-dialog-facts {
+    display: grid;
+    gap: 12px;
+    margin: 0;
+}
+
+.file-dialog-facts > div {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 16px;
+}
+
+.file-dialog-facts dt {
+    flex: none;
+    color: var(--muted-foreground);
+    font-size: 14px;
+}
+
+.file-dialog-facts dd {
+    min-width: 0;
+    margin: 0;
+    overflow-wrap: anywhere;
+    color: var(--foreground);
+    font-size: 14px;
+    text-align: right;
+}
+
+.file-dialog-facts dd.mono {
+    font-family: var(--font-mono);
+    font-size: 13px;
+}
+
+.file-actions {
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+    margin-top: auto;
+}
+
+.file-url-field > label,
+.file-access-row label {
+    display: block;
+    margin: 0 0 6px;
+    font-size: 14px;
+    font-weight: 500;
+}
+
+.file-url-row {
+    display: flex;
+    gap: 8px;
+}
+
+.file-url-input {
+    flex: 1;
+    min-width: 0;
+    height: 36px;
+    padding: 0 10px;
+    border: 1px solid var(--input);
+    border-radius: 8px;
+    background: var(--card);
+    color: var(--foreground);
+    font-family: var(--font-mono);
+    font-size: 12px;
+    text-overflow: ellipsis;
+}
+
+.file-access-row {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 16px;
+    padding: 18px 0;
+    border-top: 1px solid var(--border);
+    border-bottom: 1px solid var(--border);
+}
+
+.file-access-title {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 500;
+}
+
+.file-access-row p {
+    margin: 6px 0 0;
+    color: var(--muted-foreground);
+    font-size: 14px;
+    line-height: 1.5;
+}
+
+.file-access-row .file-badge {
+    flex: none;
+}
+
+.file-dialog-buttons {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+}
+
+.file-empty-actions {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.upload-control {
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 10px;
+}
+
+.upload-control .inline-feedback,
+.upload-control .inline-error {
+    margin: 0;
+}
+
+.file-type-icon {
+    display: grid;
+    place-items: center;
+    width: 48px;
+    height: 48px;
+    border-radius: 14px;
+    background: var(--card);
+    color: var(--primary);
+}
+
+.file-type-icon svg {
+    width: 25px;
+    height: 25px;
+}
+
+.file-preview-caption {
+    position: absolute;
+    left: 10px;
+    bottom: 10px;
+    padding: 5px 7px;
+    border-radius: 6px;
+    background: var(--card);
+    color: var(--foreground);
+    font-family: var(--font-mono);
+    font-size: 11px;
+    font-weight: 500;
+    box-shadow: var(--shadow-card);
+}
+
+.file-card-private {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    display: grid;
+    width: 26px;
+    height: 26px;
+    place-items: center;
+    padding: 0;
+    border: 1px solid color-mix(in oklch, var(--border), transparent 15%);
+    border-radius: 8px;
+    background: color-mix(in oklch, var(--card), transparent 8%);
+    color: var(--foreground);
+    font-size: 10px;
+    font-weight: 600;
+}
+
+.file-card-private svg {
+    width: 14px;
+    height: 14px;
+}
+
+.file-card-copy {
+    display: block;
+    padding: 12px 14px 14px;
+}
+
+.file-card-copy strong {
+    display: block;
+    overflow: hidden;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 1.35;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.file-card-copy span {
+    display: block;
+    overflow: hidden;
+    margin-top: 2px;
+    color: var(--muted-foreground);
+    font-size: 12px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.file-table-box {
+    overflow-x: auto;
+    border: 1px solid var(--border);
+    border-radius: 16px;
+    background: var(--card);
+}
+
+.file-table {
+    width: 100%;
+    min-width: 720px;
+    border-collapse: collapse;
+    font-size: 14px;
+}
+
+.file-table th {
+    padding: 12px 14px;
+    border-bottom: 1px solid var(--border);
+    color: var(--muted-foreground);
+    font-size: 12px;
+    font-weight: 600;
+    text-align: left;
+    white-space: nowrap;
+}
+
+.file-table td {
+    padding: 10px 14px;
+    border-bottom: 1px solid var(--border);
+    vertical-align: middle;
+    white-space: nowrap;
+}
+
+.file-table tbody tr:last-child td {
+    border-bottom: 0;
+}
+
+.file-table tbody tr:hover td {
+    background: var(--muted);
+}
+
+.file-table tbody tr.is-selected td {
+    background: var(--primary-soft);
+}
+
+.file-table td.muted {
+    color: var(--muted-foreground);
+}
+
+.file-table .file-table-check {
+    width: 52px;
+    padding: 0;
+    text-align: center;
+}
+
+.file-table .file-table-check .cl-check {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    min-height: 40px;
+}
+
+.file-table .file-table-check .cl-check__box {
+    margin: 0;
+}
+
+.file-table .file-table-check .cl-check__label {
+    position: absolute;
+}
+
+.file-table-name {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    max-width: 340px;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: var(--foreground);
+    font-weight: 500;
+    text-align: left;
+    cursor: pointer;
+}
+
+.file-table-name .ell {
+    min-width: 0;
+}
+
+.file-table-tile {
+    display: grid;
+    flex: none;
+    width: 36px;
+    height: 36px;
+    place-items: center;
+    border-radius: 8px;
+    background: var(--primary-soft);
+    color: var(--primary);
+}
+
+.file-table-tile[data-kind="video"] {
+    background: var(--neutral-800);
+    color: oklch(0.93 0.008 80);
+}
+
+.file-table-tile[data-kind="pdf"] {
+    background: var(--destructive-soft);
+    color: var(--destructive);
+}
+
+.file-table-tile[data-kind="file"] {
+    background: var(--muted);
+    color: var(--muted-foreground);
+}
+
+.file-table-tile svg {
+    width: 16px;
+    height: 16px;
+}
+
+.file-table-size {
+    font-family: var(--font-mono);
+    font-size: 13px;
+}
+
+.file-table-access {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    color: var(--muted-foreground);
+}
+
+.file-table-access svg {
+    width: 14px;
+    height: 14px;
+}
+
+.file-empty-filter {
+    display: grid;
+    min-height: 190px;
+    place-items: center;
+    border: 1px dashed var(--border);
+    border-radius: 12px;
+    color: var(--muted-foreground);
+    text-align: center;
+}
+
+.file-bulk-bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 16px;
+    padding: 10px 12px 10px 16px;
+    border-radius: 10px;
+    background: var(--primary-soft);
+    font-size: 14px;
+}
+
+.file-bulk-bar > strong {
+    font-weight: 600;
+}
+
+.file-bulk-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-left: auto;
+}
+
+.file-pagination {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    margin-top: 18px;
+    color: var(--muted-foreground);
+    font-size: 12px;
+}
+
+.file-pagination-actions {
+    display: flex;
+    gap: 7px;
+}
+
+.pager-button {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    height: 32px;
+    padding: 0 10px;
+    border: 1px solid var(--border);
+    border-radius: 7px;
+    background: var(--card);
+    color: var(--foreground);
+    font-size: 12px;
+}
+
+.pager-button svg {
+    width: 14px;
+    height: 14px;
+}
+
+.pager-button[aria-disabled="true"] {
+    pointer-events: none;
+    opacity: 0.45;
+}
+
+.settings-stack {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+}
+
+.settings-card {
+    padding: 21px 23px;
+    border: 1px solid var(--border);
+    border-radius: 13px;
+    background: var(--card);
+    box-shadow: var(--shadow-card);
+}
+
+.settings-card h2 {
+    margin: 0;
+    font-size: 15px;
+    font-weight: 650;
+}
+
+.settings-card-title {
+    display: flex;
+    align-items: flex-start;
+    gap: 11px;
+}
+
+.settings-card-title h2 {
+    margin: 1px 0 0;
+}
+
+.settings-card-title .settings-subtle {
+    margin: 4px 0 0;
+}
+
+.settings-card-icon {
+    display: grid;
+    flex: none;
+    place-items: center;
+    width: 33px;
+    height: 33px;
+    border-radius: 9px;
+    background: var(--muted);
+    color: var(--muted-foreground);
+}
+
+.settings-card-icon svg {
+    width: 16px;
+    height: 16px;
+}
+
+.settings-card-icon.danger {
+    background: var(--destructive-soft);
+    color: var(--destructive);
+}
+
+.settings-mono-input {
+    font-family: var(--font-mono);
+    font-size: 12px;
+}
+
+.settings-icon-control {
+    border: 1px solid var(--border);
+    background: var(--card);
+}
+
+.settings-danger-action {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 18px;
+    margin-top: 16px;
+    padding-top: 15px;
+    border-top: 1px solid var(--border);
+}
+
+.settings-danger-action p {
+    margin: 0;
+    color: var(--muted-foreground);
+    font-size: 12px;
+}
+
+.billing-oss-card {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 24px;
+}
+
+.billing-oss-card h2 {
+    margin: 14px 0 4px;
+    font-size: 18px;
+}
+
+.billing-oss-details {
+    display: grid;
+    min-width: 220px;
+    grid-template-columns: 1fr auto;
+    gap: 10px 20px;
+    padding: 13px 15px;
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    background: var(--background);
+    font-size: 12px;
+}
+
+.billing-oss-details span {
+    color: var(--muted-foreground);
+}
+
+.account-overview {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 14px;
+}
+
+.account-profile-details {
+    display: grid;
+    grid-template-columns: minmax(70px, 0.4fr) 1fr;
+    gap: 13px 17px;
+    margin-top: 22px;
+    font-size: 12px;
+}
+
+.account-profile-details span {
+    color: var(--muted-foreground);
+}
+
+.account-profile-details strong {
+    overflow-wrap: anywhere;
+    font-weight: 600;
+}
+
+.account-plan-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    margin-top: 22px;
+}
+
+.account-plan-row > div {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+}
+
+.account-paid-through {
+    margin-top: 12px;
+}
+
+.settings-card > p {
+    margin: 6px 0 18px;
+    color: var(--muted-foreground);
+    font-size: 12px;
+    line-height: 1.55;
+}
+
+.storage-value-row {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 12px;
+    margin: 16px 0 9px;
+}
+
+.storage-value-row strong {
+    font-size: 18px;
+    font-weight: 650;
+}
+
+.storage-value-row span,
+.storage-hint {
+    color: var(--muted-foreground);
+    font-size: 12px;
+}
+
+.storage-breakdown-list {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 11px 24px;
+    margin-top: 18px;
+}
+
+.storage-breakdown-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 14px;
+    color: var(--muted-foreground);
+    font-size: 12px;
+}
+
+.storage-breakdown-row strong {
+    color: var(--foreground);
+    font-weight: 600;
+}
+
+.settings-default-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 18px;
+    margin-top: 18px;
+    padding-top: 16px;
+    border-top: 1px solid var(--border);
+}
+
+.settings-default-row > div:first-child > strong {
+    font-size: 12px;
+    font-weight: 650;
+}
+
+.settings-default-row .settings-subtle {
+    max-width: 460px;
+    margin-top: 4px;
+}
+
+.settings-default-control {
+    flex: none;
+}
+
+.settings-default-control form {
+    margin: 0;
+}
+
+.settings-default-control .workspace-button svg {
+    flex: none;
+    width: 16px;
+    height: 16px;
+}
+
+.settings-field {
+    display: flex;
+    flex-direction: column;
+    gap: 7px;
+    margin-top: 15px;
+}
+
+.settings-field label {
+    font-size: 12px;
+    font-weight: 600;
+}
+
+.settings-control-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.settings-input {
+    width: 100%;
+    min-width: 0;
+    height: 37px;
+    padding: 0 11px;
+    border: 1px solid var(--input);
+    border-radius: 8px;
+    outline: 0;
+    background: var(--card);
+    color: var(--foreground);
+    font-size: 13px;
+}
+
+.settings-input:focus {
+    border-color: var(--ring);
+    box-shadow: 0 0 0 3px var(--primary-soft);
+}
+
+.settings-input[readonly],
+.settings-input:disabled {
+    background: var(--muted);
+}
+
+.settings-subtle {
+    margin: 7px 0 0;
+    color: var(--muted-foreground);
+    font-size: 11px;
+    line-height: 1.5;
+}
+
+.settings-card-danger {
+    border-color: color-mix(in oklch, var(--destructive), var(--border) 65%);
+}
+
+.connect-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+    width: 100%;
+}
+
+.connect-method-card {
+    border: 1px solid var(--border);
+    border-radius: 14px;
+    background: var(--card);
+    box-shadow: var(--shadow-card);
+}
+
+.connect-method-card {
+    overflow: hidden;
+}
+
+.connect-method-card > summary {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    padding: 19px 23px;
+    cursor: pointer;
+    list-style: none;
+}
+
+.connect-method-card > summary::-webkit-details-marker {
+    display: none;
+}
+
+.connect-method-card > summary:focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: -3px;
+}
+
+.connect-method-card > summary h2 {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 600;
+}
+
+.connect-method-card > summary svg {
+    flex: none;
+    width: 17px;
+    height: 17px;
+    color: var(--muted-foreground);
+    transition: transform 150ms ease;
+}
+
+.connect-method-card[open] > summary {
+    padding-bottom: 12px;
+}
+
+.connect-method-card[open] > summary svg {
+    transform: rotate(180deg);
+}
+
+.connect-method-content {
+    padding: 0 23px 23px;
+}
+
+.connect-method-content > p {
+    margin: 0 0 16px;
+    color: var(--muted-foreground);
+    font-size: 13px;
+    line-height: 1.6;
+}
+
+.connect-url-label {
+    display: block;
+    margin-bottom: 7px;
+    font-size: 12px;
+    font-weight: 600;
+}
+
+.connect-url-row {
+    display: flex;
+    gap: 8px;
+}
+
+.connect-url-row input {
+    flex: 1;
+    min-width: 0;
+    height: 38px;
+    padding: 0 11px;
+    border: 1px solid var(--input);
+    border-radius: 8px;
+    background: var(--muted);
+    color: var(--foreground);
+    font-family: var(--font-mono);
+    font-size: 12px;
+}
+
+.connect-cli-commands {
+    display: flex;
+    flex-direction: column;
+    gap: 9px;
+}
+
+.connect-cli-command {
+    min-width: 0;
+    padding: 11px 12px;
+    border: 1px solid var(--border);
+    border-radius: 9px;
+    background: var(--background);
+}
+
+.connect-cli-command-heading {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    margin-bottom: 8px;
+}
+
+.connect-cli-command-heading strong {
+    font-size: 12px;
+}
+
+.connect-cli-command code {
+    display: block;
+    overflow-x: auto;
+    padding: 9px 10px;
+    border-radius: 6px;
+    background: var(--muted);
+    color: var(--foreground);
+    font-family: var(--font-mono);
+    font-size: 11px;
+    line-height: 1.5;
+    white-space: pre;
+}
+
+.connect-steps {
+    margin: 0;
+    padding-left: 19px;
+    color: var(--muted-foreground);
+    font-size: 13px;
+    line-height: 1.8;
+}
+
+.connect-method-content .connect-steps {
+    margin-top: 16px;
+}
+
+.connect-examples {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin: 0;
+    padding-left: 20px;
+    color: var(--muted-foreground);
+    font-size: 14px;
+}
+
+.connect-asks {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding-top: 16px;
+    margin-top: 16px;
+    border-top: 1px solid var(--border);
+}
+
+.connect-asks h3 {
+    margin: 0;
+    color: var(--foreground);
+    font-size: 13px;
+    font-weight: 600;
+    line-height: 1.3;
+}
+
+.connect-docs-card {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    padding: 17px 20px;
+    margin-top: 0;
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    background: var(--card);
+}
+
+.connect-docs-card strong {
+    font-size: 13px;
+}
+
+.connect-docs-card p {
+    margin: 5px 0 0;
+    color: var(--muted-foreground);
+    font-size: 12px;
+}
+
+.workspace-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 36px;
+    gap: 8px;
+    padding: 0 14px;
+    border: 1px solid transparent;
+    border-radius: 8px;
+    background: var(--primary);
+    color: var(--primary-foreground);
+    font-size: 14px;
+    font-weight: 500;
+    white-space: nowrap;
+    cursor: pointer;
+    transition:
+        background 150ms ease,
+        border-color 150ms ease,
+        color 150ms ease;
+}
+
+.workspace-button:hover:not(:disabled) {
+    background: var(--primary-hover);
+}
+
+.workspace-button:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+}
+
+.workspace-button svg {
+    flex: none;
+    width: 16px;
+    height: 16px;
+}
+
+.workspace-button.secondary {
+    border-color: var(--border);
+    background: var(--card);
+    color: var(--foreground);
+}
+
+.workspace-button.secondary:hover:not(:disabled) {
+    background: var(--muted);
+}
+
+.workspace-button.ghost {
+    background: transparent;
+    color: var(--muted-foreground);
+}
+
+.workspace-button.ghost:hover:not(:disabled) {
+    background: var(--muted);
+    color: var(--foreground);
+}
+
+.workspace-button.danger {
+    background: var(--destructive);
+    color: var(--destructive-foreground);
+}
+
+.inline-feedback {
+    margin-top: 10px;
+    color: var(--success);
+    font-size: 12px;
+}
+
+.loading-state {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 240px;
+    gap: 11px;
+    color: var(--muted-foreground);
+    font-size: 13px;
+}
+
+.loading-state .cl-loader {
+    color: var(--primary);
+}
+
+.inline-error {
+    margin-top: 10px;
+    color: var(--destructive);
+    font-size: 12px;
+}
+
+.visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+
+@media (max-width: 1000px) {
+    .file-grid {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    .app-grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .apps-stats-grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .apps-stat-card:last-child {
+        grid-column: 1 / -1;
+    }
+
+    .apps-overview-grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+}
+
+@media (max-width: 760px) {
+    .workspace-sidebar,
+    .workspace-sidebar.is-collapsed {
+        position: fixed;
+        inset: 0 auto 0 0;
+        width: 264px;
+        height: 100dvh;
+        z-index: 42;
+        padding: 12px;
+        box-shadow: var(--shadow-popover);
+        transform: translateX(-2.5rem);
+    }
+
+    .workspace-sidebar.is-mobile-open {
+        transform: translateX(0);
+    }
+
+    .workspace-sidebar.is-collapsed .workspace-app-copy,
+    .workspace-sidebar.is-collapsed .workspace-app-switcher > svg,
+    .workspace-sidebar.is-collapsed .workspace-rail-link > span,
+    .workspace-sidebar.is-collapsed .workspace-user-copy,
+    .workspace-sidebar.is-collapsed .workspace-user-chevron {
+        display: initial;
+    }
+
+    .workspace-sidebar.is-collapsed .workspace-app-switcher,
+    .workspace-sidebar.is-collapsed .workspace-rail-link,
+    .workspace-sidebar.is-collapsed .workspace-user {
+        justify-content: initial;
+        padding-right: 10px;
+        padding-left: 10px;
+    }
+
+    .workspace-topbar {
+        height: 54px;
+        padding: 0 16px;
+    }
+
+    .workspace-content {
+        padding: 24px 16px 48px;
+    }
+
+    .apps-dashboard-heading {
+        align-items: flex-start;
+    }
+
+    .workspace-page-heading {
+        align-items: flex-start;
+        margin-bottom: 20px;
+    }
+
+    .file-grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .file-toolbar-main,
+    .file-toolbar-actions {
+        width: 100%;
+    }
+
+    .file-search {
+        flex: 1;
+        min-width: 180px;
+    }
+
+    .file-toolbar-main .filter-group {
+        width: 100%;
+        overflow-x: auto;
+    }
+
+    .filter-chip {
+        flex: 1;
+    }
+
+    .settings-card {
+        padding: 18px;
+    }
+
+    .account-overview {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .workspace-sidebar,
+    .workspace-sidebar-gap,
+    .workspace-mobile-sidebar-overlay {
+        transition-duration: 0.01ms;
+        animation-duration: 0.01ms;
+    }
+}
+
+@media (max-width: 640px) {
+    .apps-dashboard-heading {
+        flex-direction: column;
+    }
+
+    .apps-dashboard-actions {
+        width: 100%;
+    }
+
+    .apps-search {
+        flex: 1;
+        width: auto;
+    }
+}
+
+@media (max-width: 520px) {
+    .public-topbar {
+        padding: 0 16px;
+    }
+
+    .public-links {
+        gap: 12px;
+        font-size: 12px;
+    }
+
+    .public-links a[href="/terms"],
+    .public-links a[href="/privacy"] {
+        display: none;
+    }
+
+    .app-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .workspace-page-heading h1 {
+        font-size: 24px;
+    }
+
+    .workspace-page-heading {
+        gap: 12px;
+    }
+
+    .apps-stats-grid,
+    .apps-overview-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .apps-stat-card:last-child {
+        grid-column: auto;
+    }
+
+    .apps-list-heading {
+        margin-top: 22px;
+    }
+
+    .file-grid {
+        gap: 9px;
+    }
+
+    .file-card-copy {
+        padding: 9px;
+    }
+
+    .file-pagination {
+        align-items: flex-start;
+        flex-direction: column;
+    }
+
+    .connect-method-card > summary {
+        padding: 17px 18px;
+    }
+
+    .connect-method-card[open] > summary {
+        padding-bottom: 11px;
+    }
+
+    .connect-method-content {
+        padding: 0 18px 18px;
+    }
+
+    .billing-oss-card,
+    .settings-danger-action,
+    .settings-default-row,
+    .account-plan-row {
+        align-items: flex-start;
+        flex-direction: column;
+    }
+
+    .billing-oss-details {
+        width: 100%;
+    }
+
+    .storage-breakdown-list {
+        grid-template-columns: 1fr;
+    }
+
+    .docs-landing-card {
+        padding: 23px;
+        margin: 12px auto;
+    }
+
+    .connect-url-row {
+        align-items: stretch;
+        flex-direction: column;
     }
 }
diff --git a/apps/web/app/icon.svg b/apps/web/app/icon.svg
new file mode 100644
index 00000000..abdaf738
--- /dev/null
+++ b/apps/web/app/icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><title>MediaLit logo</title><g fill="oklch(0.62 0.16 300 / 0.15)" stroke="oklch(0.62 0.16 300)" stroke-width="2.6" stroke-linejoin="round"><path d="M32,24 C28.8,19 28.8,13.5 32,10 C35.2,13.5 35.2,19 32,24 Z"></path><path d="M32,24 C28.8,19 28.8,13.5 32,10 C35.2,13.5 35.2,19 32,24 Z" transform="rotate(90 32 32)"></path><path d="M32,24 C28.8,19 28.8,13.5 32,10 C35.2,13.5 35.2,19 32,24 Z" transform="rotate(180 32 32)"></path><path d="M32,24 C28.8,19 28.8,13.5 32,10 C35.2,13.5 35.2,19 32,24 Z" transform="rotate(270 32 32)"></path></g></svg>
\ No newline at end of file
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index 53c306bc..0b81b2e3 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -1,15 +1,24 @@
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
+import { Hanken_Grotesk, Spline_Sans_Mono } from "next/font/google";
 import "./globals.css";
-import { NavBar } from "../components/nav-bar";
-import { Toaster } from "@/components/ui/toaster";
+import DashboardShell from "@/components/dashboard-shell";
+import { Toaster } from "@/components/ui/sonner";
 import Scripts from "./scripts";
+import { auth } from "@/auth";
+import { getApiKeys, getAppsDashboard } from "./actions";
 
-const inter = Inter({ subsets: ["latin"] });
+const hankenGrotesk = Hanken_Grotesk({
+    subsets: ["latin"],
+    variable: "--font-sans",
+});
+const splineSansMono = Spline_Sans_Mono({
+    subsets: ["latin"],
+    variable: "--font-mono",
+});
 
 export const metadata: Metadata = {
-    title: "Medialit",
-    description: "",
+    title: "MediaLit",
+    description: "Manage and serve your app’s media from one place.",
 };
 
 export default async function RootLayout({
@@ -17,16 +26,25 @@ export default async function RootLayout({
 }: {
     children: React.ReactNode;
 }) {
+    const session = await auth();
+    const dashboard = session ? await getAppsDashboard() : null;
+    const apps = dashboard?.apps ?? (session ? await getApiKeys() : []);
+
     return (
-        <html lang="en">
+        <html
+            lang="en"
+            data-product="medialit"
+            className={`${hankenGrotesk.variable} ${splineSansMono.variable}`}
+        >
             <head></head>
-            <body className={inter.className}>
-                <NavBar />
-                <main className="mx-auto max-w-[1024px] min-h-screen">
-                    <div className="px-2 py-8 ">{children}</div>
-                </main>
+            <body>
+                <DashboardShell
+                    apps={Array.isArray(apps) ? apps : []}
+                    user={session?.user ?? null}
+                >
+                    {children}
+                </DashboardShell>
                 <Toaster />
-                {/* <Footer /> */}
                 <Scripts />
             </body>
         </html>
diff --git a/apps/web/app/loading.tsx b/apps/web/app/loading.tsx
index 88861e00..7617b025 100644
--- a/apps/web/app/loading.tsx
+++ b/apps/web/app/loading.tsx
@@ -1,7 +1,10 @@
-import React from "react";
+import { Loader } from "@codelitdev/design-system";
 
-const Loading = () => {
-    return <div>Loading...</div>;
-};
-
-export default Loading;
+export default function Loading() {
+    return (
+        <div className="loading-state" role="status">
+            <Loader product="medialit" size={64} />
+            <span className="visually-hidden">Loading</span>
+        </div>
+    );
+}
diff --git a/apps/web/app/login/page.tsx b/apps/web/app/login/page.tsx
deleted file mode 100644
index 16d323e4..00000000
--- a/apps/web/app/login/page.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-"use client";
-
-import { FormEvent, useEffect, useState } from "react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { safeNextPath } from "@/lib/safe-next-path";
-
-export default function LoginPage() {
-    const [email, setEmail] = useState("");
-    const [otp, setOtp] = useState("");
-    const [sent, setSent] = useState(false);
-    const [error, setError] = useState<string | null>(null);
-    const [pending, setPending] = useState(false);
-    const [reauth, setReauth] = useState(false);
-    useEffect(() => {
-        setReauth(
-            new URLSearchParams(window.location.search).get("reauth") === "1",
-        );
-    }, []);
-
-    async function sendCode(event: FormEvent<HTMLFormElement>) {
-        event.preventDefault();
-        setError(null);
-        setPending(true);
-        const response = await fetch(
-            "/api/auth/email-otp/send-verification-otp",
-            {
-                method: "POST",
-                headers: { "content-type": "application/json" },
-                body: JSON.stringify({ email, type: "sign-in" }),
-            },
-        );
-        setPending(false);
-        if (!response.ok) {
-            setError("Unable to send a sign-in code.");
-            return;
-        }
-        setSent(true);
-    }
-
-    async function verifyCode(event: FormEvent<HTMLFormElement>) {
-        event.preventDefault();
-        setError(null);
-        setPending(true);
-        const response = await fetch("/api/auth/sign-in/email-otp", {
-            method: "POST",
-            headers: { "content-type": "application/json" },
-            body: JSON.stringify({
-                email,
-                otp,
-                name: email.split("@")[0],
-            }),
-        });
-        setPending(false);
-        if (!response.ok) {
-            setError("That code is invalid or expired.");
-            return;
-        }
-        window.location.assign(
-            safeNextPath(
-                new URLSearchParams(window.location.search).get("next"),
-                window.location.origin,
-            ),
-        );
-    }
-
-    return (
-        <Card className="max-w-md mx-auto">
-            <CardHeader>
-                <CardTitle>Sign in</CardTitle>
-                {reauth && (
-                    <p className="text-sm text-muted-foreground">
-                        For your security, sign in again to change your billing.
-                    </p>
-                )}
-            </CardHeader>
-            <CardContent>
-                {!sent ? (
-                    <form onSubmit={sendCode} className="flex flex-col gap-4">
-                        <div className="flex flex-col gap-2">
-                            <Label htmlFor="email">Email</Label>
-                            <Input
-                                id="email"
-                                type="email"
-                                autoComplete="email"
-                                value={email}
-                                onChange={(event) =>
-                                    setEmail(event.target.value)
-                                }
-                                required
-                            />
-                        </div>
-                        <Button type="submit" disabled={pending}>
-                            Send sign-in code
-                        </Button>
-                    </form>
-                ) : (
-                    <form onSubmit={verifyCode} className="flex flex-col gap-4">
-                        <p>Enter the code sent to {email}.</p>
-                        <p className="text-sm text-muted-foreground">
-                            In local development, the API prints the code to the
-                            console.
-                        </p>
-                        <div className="flex flex-col gap-2">
-                            <Label htmlFor="otp">Sign-in code</Label>
-                            <Input
-                                id="otp"
-                                inputMode="numeric"
-                                autoComplete="one-time-code"
-                                value={otp}
-                                onChange={(event) => setOtp(event.target.value)}
-                                required
-                            />
-                        </div>
-                        <Button type="submit" disabled={pending}>
-                            Sign in
-                        </Button>
-                    </form>
-                )}
-                {error ? (
-                    <p className="text-red-500 mt-4" role="alert">
-                        {error}
-                    </p>
-                ) : null}
-            </CardContent>
-        </Card>
-    );
-}
diff --git a/apps/web/app/login/route.ts b/apps/web/app/login/route.ts
new file mode 100644
index 00000000..befda7f8
--- /dev/null
+++ b/apps/web/app/login/route.ts
@@ -0,0 +1,28 @@
+import { NextResponse, type NextRequest } from "next/server";
+import { safeNextPath } from "@/lib/safe-next-path";
+
+function apiBase() {
+    return (
+        process.env.PUBLIC_API_URL ||
+        process.env.API_SERVER ||
+        "http://127.0.0.1:8000"
+    ).replace(/\/$/, "");
+}
+
+export function GET(request: NextRequest) {
+    const webOrigin = (
+        process.env.WEB_ORIGIN || request.nextUrl.origin
+    ).replace(/\/$/, "");
+    const nextPath = safeNextPath(
+        request.nextUrl.searchParams.get("next"),
+        webOrigin,
+    );
+    const returnTo = new URL(nextPath, webOrigin);
+    const loginUrl = new URL("/login", apiBase());
+
+    // The API owns the sign-in page and the OTP flow. Its hosted login page
+    // validates this return URL against WEB_ORIGIN before redirecting back.
+    loginUrl.searchParams.set("redirect", returnTo.toString());
+
+    return NextResponse.redirect(loginUrl);
+}
diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
index a6fd0f83..466b8aa7 100644
--- a/apps/web/app/page.tsx
+++ b/apps/web/app/page.tsx
@@ -1,86 +1,20 @@
 import { auth } from "@/auth";
-import { getApiKeys } from "./actions";
+import { getAppsDashboard } from "./actions";
+import AppsDashboard from "./apps-dashboard";
 import { redirect } from "next/navigation";
-import Link from "next/link";
-import NewApp from "@/components/new-app-button";
-import { FolderPlus } from "lucide-react";
-import { Card, CardContent } from "@/components/ui/card";
-import { Label } from "@/components/ui/label";
-import { Badge } from "@/components/ui/badge";
-import { getTotalSpaceByApikey } from "./app/[keyid]/settings/actions";
 
 export default async function Home() {
     const session = await auth();
+    if (!session) redirect("/login");
 
-    if (!session) {
-        redirect("/login");
+    const dashboard = await getAppsDashboard();
+    if (!dashboard) {
+        return (
+            <div className="inline-error" role="alert">
+                Could not load the app overview. Refresh to try again.
+            </div>
+        );
     }
-    const apiKeys: any = await getApiKeys();
 
-    return (
-        <>
-            {/* <Card>
-            <CardContent className="pt-6">
-                <div className="flex flex-col gap-2">
-                    <div className="flex justify-between items-center">
-                        <Label htmlFor="name" className="mb-2">
-                            Storage
-                        </Label>
-                        <p className="font-semibold">
-                            {(storage / 1024 / 1024).toFixed(2)} MB
-                        </p>
-                    </div>
-                    <div className="w-full h-2 bg-gray-200 rounded-full overflow-hidden">
-                        <div 
-                            className="h-full bg-blue-500 rounded-full transition-all duration-300"
-                            style={{ width: `${Math.min((storage / maxStorage) * 100, 100)}%` }}
-                        />
-                    </div>
-                </div>
-            </CardContent>
-        </Card> */}
-            <div className="flex justify-between mb-8">
-                <div className="text-primary text-xl font-bold">Your apps</div>
-                <NewApp />
-            </div>
-            <div className="">
-                {apiKeys?.length > 0 ? (
-                    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
-                        {apiKeys.map((apikey: any) => (
-                            <Link
-                                href={`/app/${apikey.keyId}/files`}
-                                key={apikey.keyId}
-                            >
-                                <Card className="h-[151px] hover:bg-accent transition-colors relative">
-                                    <CardContent className="flex items-center justify-center h-full p-6">
-                                        <span className="text-lg font-medium">
-                                            {apikey.name || "Untitled"}
-                                        </span>
-                                        {apikey.default && (
-                                            <Badge
-                                                className="absolute top-3 right-3"
-                                                variant="secondary"
-                                            >
-                                                Default
-                                            </Badge>
-                                        )}
-                                    </CardContent>
-                                </Card>
-                            </Link>
-                        ))}
-                    </div>
-                ) : (
-                    <div className="flex flex-col items-center justify-center h-[400px] gap-4">
-                        <FolderPlus className="w-16 h-16 text-muted-foreground" />
-                        <p className="text-muted-foreground text-lg">
-                            No apps yet
-                        </p>
-                        <p className="text-muted-foreground text-sm">
-                            Create your first app to start uploading files
-                        </p>
-                    </div>
-                )}
-            </div>
-        </>
-    );
+    return <AppsDashboard data={dashboard} />;
 }
diff --git a/apps/web/app/privacy/page.tsx b/apps/web/app/privacy/page.tsx
index f83ff070..77fbe0d6 100644
--- a/apps/web/app/privacy/page.tsx
+++ b/apps/web/app/privacy/page.tsx
@@ -1,6 +1,6 @@
 export default function Privacy() {
     return (
-        <div className="flex flex-col gap-8">
+        <div className="legal-document flex flex-col gap-8">
             <h1 className="text-xl font-bold">Privacy Policy</h1>
             <p>
                 This document explains what personal data we collect and how it
diff --git a/apps/web/app/terms/page.tsx b/apps/web/app/terms/page.tsx
index 9e09ee6b..7b3b5dfc 100644
--- a/apps/web/app/terms/page.tsx
+++ b/apps/web/app/terms/page.tsx
@@ -1,6 +1,6 @@
 export default function Terms() {
     return (
-        <div className="flex flex-col gap-8">
+        <div className="legal-document flex flex-col gap-8">
             <h1 className="text-2xl font-bold">Terms and Conditions</h1>
             <p>Welcome to WebLit!</p>
             <p>
diff --git a/apps/web/components/dashboard-shell.tsx b/apps/web/components/dashboard-shell.tsx
new file mode 100644
index 00000000..a6fc6cd8
--- /dev/null
+++ b/apps/web/components/dashboard-shell.tsx
@@ -0,0 +1,542 @@
+"use client";
+
+import Link from "next/link";
+import Image from "next/image";
+import { usePathname, useRouter } from "next/navigation";
+import {
+    Check,
+    ChevronRight,
+    ChevronsUpDown,
+    CircleHelp,
+    CreditCard,
+    FolderOpen,
+    LayoutGrid,
+    LogOut,
+    Plus,
+    Search,
+    Settings2,
+    TerminalSquare,
+    UserRound,
+} from "lucide-react";
+import { useMemo, useState, type ReactNode } from "react";
+import NewApp from "@/components/new-app-button";
+import { logOut } from "@/components/nav-bar/action";
+import { formatAppStorage } from "@/lib/media-format";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuGroup,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import {
+    Sidebar,
+    SidebarContent,
+    SidebarFooter,
+    SidebarHeader,
+    SidebarInset,
+    SidebarProvider,
+    SidebarTrigger,
+} from "@/components/ui/sidebar";
+import medialitLogo from "@codelitdev/design-system/assets/logo-medialit.svg";
+
+type DashboardApp = {
+    keyId: string;
+    name: string;
+    default?: boolean;
+    count?: number;
+    storage?: number;
+};
+
+type DashboardUser = {
+    name?: string | null;
+    email?: string | null;
+} | null;
+
+const docsUrl = "https://docs.medialit.cloud/quick-start";
+
+export default function DashboardShell({
+    children,
+    apps,
+    user,
+}: {
+    children: ReactNode;
+    apps: DashboardApp[];
+    user: DashboardUser;
+}) {
+    const pathname = usePathname();
+    const router = useRouter();
+    const [collapsed, setCollapsed] = useState(false);
+    const [mobileOpen, setMobileOpen] = useState(false);
+    const [switcherOpen, setSwitcherOpen] = useState(false);
+    const [newAppOpen, setNewAppOpen] = useState(false);
+    const [appSearch, setAppSearch] = useState("");
+    const [accountOpen, setAccountOpen] = useState(false);
+
+    const isPublicRoute = ["/login", "/terms", "/privacy", "/docs"].some(
+        (path) => pathname === path || pathname.startsWith(`${path}/`),
+    );
+    const dashboardMode = Boolean(user) && !isPublicRoute;
+    const appKey = pathname.match(/^\/app\/([^/]+)/)?.[1];
+    const activeApp =
+        apps.find((app) => app.keyId === appKey) ??
+        apps.find((app) => app.default) ??
+        apps[0];
+    const section = pathname.includes("/connect")
+        ? "Connect"
+        : pathname.includes("/settings")
+          ? "App settings"
+          : pathname.startsWith("/account")
+            ? "Account settings"
+            : pathname.startsWith("/app/")
+              ? "Files"
+              : "All apps";
+
+    const filteredApps = useMemo(() => {
+        const query = appSearch.trim().toLowerCase();
+        if (!query) return apps;
+        return apps.filter((app) => app.name.toLowerCase().includes(query));
+    }, [appSearch, apps]);
+
+    const navItems = [
+        {
+            label: "Files",
+            href: activeApp ? `/app/${activeApp.keyId}/files` : "/",
+            icon: FolderOpen,
+            active: pathname.startsWith("/app/") && section === "Files",
+        },
+        {
+            label: "Connect",
+            href: activeApp ? `/app/${activeApp.keyId}/connect` : "/",
+            icon: TerminalSquare,
+            active: pathname.includes("/connect"),
+        },
+        {
+            label: "App settings",
+            href: activeApp ? `/app/${activeApp.keyId}/settings` : "/",
+            icon: Settings2,
+            active:
+                pathname.includes("/settings") &&
+                !pathname.startsWith("/account"),
+        },
+    ];
+
+    if (!dashboardMode) {
+        return (
+            <div className="public-shell">
+                <header className="public-topbar">
+                    <Link href="/" className="public-brand">
+                        <Image
+                            src={medialitLogo}
+                            alt=""
+                            width={30}
+                            height={30}
+                        />
+                        <span>MediaLit</span>
+                        <span className="workspace-beta">Beta</span>
+                    </Link>
+                    <nav className="public-links" aria-label="Main navigation">
+                        <a href={docsUrl} target="_blank" rel="noreferrer">
+                            Docs
+                        </a>
+                        <Link href="/terms">Terms</Link>
+                        <Link href="/privacy">Privacy</Link>
+                        {user ? (
+                            <Link href="/" className="workspace-button">
+                                Dashboard
+                            </Link>
+                        ) : (
+                            <Link href="/login" className="workspace-button">
+                                Sign in
+                            </Link>
+                        )}
+                    </nav>
+                </header>
+                <main className="public-content">{children}</main>
+            </div>
+        );
+    }
+
+    return (
+        <SidebarProvider
+            className="workspace-shell"
+            open={!collapsed}
+            onOpenChange={(open) => setCollapsed(!open)}
+            openMobile={mobileOpen}
+            onOpenMobileChange={setMobileOpen}
+        >
+            <>
+                <Sidebar id="workspace-sidebar" className="workspace-sidebar">
+                    <SidebarHeader className="workspace-sidebar-header">
+                        <PopoverPrimitive.Root
+                            open={switcherOpen}
+                            onOpenChange={(open) => {
+                                setSwitcherOpen(open);
+                                if (open) setAccountOpen(false);
+                            }}
+                        >
+                            <PopoverPrimitive.Trigger asChild>
+                                <button
+                                    type="button"
+                                    className={`workspace-app-switcher${switcherOpen ? " is-open" : ""}`}
+                                    aria-label={`Switch app, current: ${activeApp?.name ?? "No apps"}`}
+                                >
+                                    <span className="workspace-app-avatar">
+                                        <Image
+                                            src={medialitLogo}
+                                            alt=""
+                                            width={28}
+                                            height={28}
+                                        />
+                                    </span>
+                                    <span className="workspace-app-copy">
+                                        <strong>
+                                            {activeApp?.name ?? "Create an app"}
+                                        </strong>
+                                        <span>
+                                            {activeApp?.count !== undefined
+                                                ? `${activeApp.count} files · ${formatAppStorage(activeApp.storage ?? 0)}`
+                                                : activeApp?.default
+                                                  ? "Default app"
+                                                  : "Media library"}
+                                        </span>
+                                    </span>
+                                    <ChevronsUpDown
+                                        size={15}
+                                        aria-hidden="true"
+                                    />
+                                </button>
+                            </PopoverPrimitive.Trigger>
+                            <PopoverPrimitive.Portal>
+                                <PopoverPrimitive.Content
+                                    side={mobileOpen ? "bottom" : "right"}
+                                    align="start"
+                                    sideOffset={4}
+                                    collisionPadding={12}
+                                    aria-labelledby="workspace-switcher-title"
+                                    aria-describedby="workspace-switcher-description"
+                                    className="z-50 flex max-h-[min(calc(100dvh_-_24px),var(--radix-popover-content-available-height,calc(100dvh_-_24px)))] w-72 max-w-[calc(100vw_-_24px)] origin-[var(--radix-popover-content-transform-origin)] flex-col overflow-hidden rounded-[var(--radius)] border bg-popover p-1 text-popover-foreground shadow-[var(--shadow-popover)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=right]:slide-in-from-left-2 data-[side=left]:slide-in-from-right-2 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 motion-reduce:animate-none"
+                                >
+                                    <h2
+                                        id="workspace-switcher-title"
+                                        className="px-2.5 py-1.5 text-xs font-semibold text-muted-foreground"
+                                    >
+                                        Apps
+                                    </h2>
+                                    <p
+                                        id="workspace-switcher-description"
+                                        className="visually-hidden"
+                                    >
+                                        Choose an app to open its files, or go
+                                        to all apps.
+                                    </p>
+                                    {apps.length > 7 ? (
+                                        <label className="mx-1 mb-1 flex h-8 shrink-0 items-center gap-2 rounded-[var(--radius-sm)] border border-input px-2.5 text-muted-foreground focus-within:ring-1 focus-within:ring-ring">
+                                            <Search
+                                                className="size-4 shrink-0"
+                                                aria-hidden="true"
+                                            />
+                                            <input
+                                                aria-label="Find an app"
+                                                placeholder="Find an app"
+                                                className="w-full border-0 bg-transparent text-sm text-foreground outline-none placeholder:text-muted-foreground"
+                                                value={appSearch}
+                                                onChange={(event) =>
+                                                    setAppSearch(
+                                                        event.target.value,
+                                                    )
+                                                }
+                                            />
+                                        </label>
+                                    ) : null}
+                                    <div className="flex min-h-0 flex-col overflow-y-auto">
+                                        {filteredApps.map((app) => {
+                                            const isCurrent =
+                                                activeApp?.keyId === app.keyId;
+                                            return (
+                                                <button
+                                                    type="button"
+                                                    key={app.keyId}
+                                                    aria-current={
+                                                        isCurrent
+                                                            ? "true"
+                                                            : undefined
+                                                    }
+                                                    className="flex w-full items-center gap-2 rounded-[var(--radius-sm)] px-2.5 py-1.5 text-left text-sm outline-none hover:bg-muted focus-visible:bg-muted shrink-0"
+                                                    onClick={() => {
+                                                        setSwitcherOpen(false);
+                                                        setMobileOpen(false);
+                                                        router.push(
+                                                            `/app/${app.keyId}/files`,
+                                                        );
+                                                    }}
+                                                >
+                                                    <span className="grid size-8 shrink-0 place-items-center rounded-md bg-[color-mix(in_oklch,var(--primary),transparent_88%)] text-xs font-semibold text-primary">
+                                                        {app.name[0]?.toUpperCase() ??
+                                                            "M"}
+                                                    </span>
+                                                    <span className="flex min-w-0 flex-1 flex-col">
+                                                        <span className="flex min-w-0 items-center gap-2">
+                                                            <span className="truncate font-medium">
+                                                                {app.name ||
+                                                                    "Untitled"}
+                                                            </span>
+                                                            {app.default ? (
+                                                                <span className="cl-badge cl-badge--default shrink-0">
+                                                                    Default
+                                                                </span>
+                                                            ) : null}
+                                                        </span>
+                                                        <span className="text-xs text-muted-foreground">
+                                                            {`${app.count ?? 0} ${app.count === 1 ? "file" : "files"} · ${formatAppStorage(app.storage ?? 0)}`}
+                                                        </span>
+                                                    </span>
+                                                    {isCurrent ? (
+                                                        <Check
+                                                            className="ml-auto size-4 shrink-0"
+                                                            aria-hidden="true"
+                                                        />
+                                                    ) : null}
+                                                </button>
+                                            );
+                                        })}
+                                        {filteredApps.length === 0 ? (
+                                            <p className="px-2.5 py-1.5 text-sm text-muted-foreground">
+                                                No apps match that search.
+                                            </p>
+                                        ) : null}
+                                    </div>
+                                    <div className="-mx-1 my-1 h-px shrink-0 bg-border" />
+                                    <button
+                                        type="button"
+                                        className="flex w-full items-center gap-2 rounded-[var(--radius-sm)] px-2.5 py-1.5 text-left text-sm outline-none hover:bg-muted focus-visible:bg-muted shrink-0"
+                                        onClick={() => {
+                                            setSwitcherOpen(false);
+                                            setMobileOpen(false);
+                                            setNewAppOpen(true);
+                                        }}
+                                    >
+                                        <span className="grid size-8 shrink-0 place-items-center rounded-md border text-muted-foreground">
+                                            <Plus
+                                                className="size-4"
+                                                aria-hidden="true"
+                                            />
+                                        </span>
+                                        <span className="font-medium">
+                                            New app
+                                        </span>
+                                    </button>
+                                    <Link
+                                        href="/"
+                                        className="flex w-full items-center gap-2 rounded-[var(--radius-sm)] px-2.5 py-1.5 text-left text-sm outline-none hover:bg-muted focus-visible:bg-muted shrink-0"
+                                        onClick={() => setSwitcherOpen(false)}
+                                    >
+                                        <span className="grid size-8 shrink-0 place-items-center rounded-md border text-muted-foreground">
+                                            <LayoutGrid
+                                                className="size-4"
+                                                aria-hidden="true"
+                                            />
+                                        </span>
+                                        <span className="flex flex-col">
+                                            <span className="font-medium">
+                                                All apps
+                                            </span>
+                                            <span className="text-xs text-muted-foreground">
+                                                Compare storage across apps
+                                            </span>
+                                        </span>
+                                    </Link>
+                                </PopoverPrimitive.Content>
+                            </PopoverPrimitive.Portal>
+                        </PopoverPrimitive.Root>
+                    </SidebarHeader>
+
+                    <SidebarContent className="workspace-sidebar-content">
+                        <nav
+                            className="workspace-nav"
+                            aria-label="App navigation"
+                        >
+                            {navItems.map(
+                                ({ label, href, icon: Icon, active }) => (
+                                    <Link
+                                        key={label}
+                                        href={href}
+                                        className={`workspace-rail-link${active ? " is-active" : ""}`}
+                                        aria-current={
+                                            active ? "page" : undefined
+                                        }
+                                        aria-label={
+                                            collapsed ? label : undefined
+                                        }
+                                        title={collapsed ? label : undefined}
+                                        onClick={() => setMobileOpen(false)}
+                                    >
+                                        <Icon aria-hidden="true" />
+                                        <span>{label}</span>
+                                        {label === "Files" &&
+                                        activeApp?.count !== undefined ? (
+                                            <span className="rail-count">
+                                                {activeApp.count}
+                                            </span>
+                                        ) : null}
+                                    </Link>
+                                ),
+                            )}
+                        </nav>
+
+                        <div className="workspace-sidebar-spacer" />
+                    </SidebarContent>
+
+                    <SidebarFooter className="workspace-sidebar-bottom">
+                        <a
+                            href={docsUrl}
+                            target="_blank"
+                            rel="noreferrer"
+                            className="workspace-rail-link"
+                            aria-label={collapsed ? "Help" : undefined}
+                            title={collapsed ? "Help" : undefined}
+                        >
+                            <CircleHelp aria-hidden="true" />
+                            <span>Help</span>
+                        </a>
+                        <div className="workspace-user-menu">
+                            <form
+                                id="account-signout-form"
+                                action={logOut}
+                                hidden
+                            />
+                            <DropdownMenu
+                                open={accountOpen}
+                                onOpenChange={(open) => {
+                                    setAccountOpen(open);
+                                    if (open) setSwitcherOpen(false);
+                                }}
+                            >
+                                <DropdownMenuTrigger asChild>
+                                    <button
+                                        type="button"
+                                        className={`workspace-user workspace-user-menu-trigger${accountOpen ? " is-open" : ""}`}
+                                        aria-label={`Open account menu for ${user?.name || user?.email || "your account"}`}
+                                    >
+                                        <span className="workspace-user-avatar">
+                                            {(user?.name ||
+                                                user?.email ||
+                                                "M")[0].toUpperCase()}
+                                        </span>
+                                        <span className="workspace-user-copy">
+                                            <strong>
+                                                {user?.name || "Your account"}
+                                            </strong>
+                                            <span>{user?.email}</span>
+                                        </span>
+                                        <ChevronsUpDown
+                                            className="workspace-user-chevron"
+                                            aria-hidden="true"
+                                        />
+                                    </button>
+                                </DropdownMenuTrigger>
+                                <DropdownMenuContent
+                                    className="account-menu"
+                                    side={mobileOpen ? "top" : "right"}
+                                    align="end"
+                                    sideOffset={4}
+                                >
+                                    <DropdownMenuLabel className="account-menu-header">
+                                        <span className="account-menu-avatar">
+                                            {(user?.name ||
+                                                user?.email ||
+                                                "M")[0].toUpperCase()}
+                                        </span>
+                                        <span className="account-menu-copy">
+                                            <strong>
+                                                {user?.name || "Your account"}
+                                            </strong>
+                                            <span>{user?.email}</span>
+                                        </span>
+                                    </DropdownMenuLabel>
+                                    <DropdownMenuSeparator className="account-menu-separator" />
+                                    <DropdownMenuGroup>
+                                        <DropdownMenuItem asChild>
+                                            <Link
+                                                href="/account"
+                                                className="account-menu-item"
+                                            >
+                                                <UserRound aria-hidden="true" />
+                                                Account settings
+                                            </Link>
+                                        </DropdownMenuItem>
+                                        <DropdownMenuItem asChild>
+                                            <Link
+                                                href="/account/billing"
+                                                className="account-menu-item"
+                                            >
+                                                <CreditCard aria-hidden="true" />
+                                                Billing and plan
+                                            </Link>
+                                        </DropdownMenuItem>
+                                    </DropdownMenuGroup>
+                                    <DropdownMenuSeparator className="account-menu-separator" />
+                                    <DropdownMenuItem
+                                        className="account-menu-item"
+                                        onSelect={() =>
+                                            (
+                                                document.getElementById(
+                                                    "account-signout-form",
+                                                ) as HTMLFormElement | null
+                                            )?.requestSubmit()
+                                        }
+                                    >
+                                        <LogOut aria-hidden="true" />
+                                        Sign out
+                                    </DropdownMenuItem>
+                                </DropdownMenuContent>
+                            </DropdownMenu>
+                        </div>
+                    </SidebarFooter>
+                </Sidebar>
+
+                <NewApp
+                    showTrigger={false}
+                    open={newAppOpen}
+                    onOpenChange={setNewAppOpen}
+                />
+
+                <SidebarInset className="workspace-main">
+                    <header className="workspace-topbar">
+                        <SidebarTrigger className="icon-control workspace-sidebar-trigger" />
+                        <span
+                            className="workspace-topbar-divider"
+                            aria-hidden="true"
+                        />
+                        <nav
+                            className="workspace-breadcrumb"
+                            aria-label="Breadcrumb"
+                        >
+                            {section === "All apps" ||
+                            section === "Account settings" ? (
+                                <strong aria-current="page">{section}</strong>
+                            ) : (
+                                <>
+                                    <span className="workspace-breadcrumb-current-app">
+                                        {activeApp?.name ?? "Your app"}
+                                    </span>
+                                    <ChevronRight
+                                        size={14}
+                                        aria-hidden="true"
+                                    />
+                                    <strong aria-current="page">
+                                        {section}
+                                    </strong>
+                                </>
+                            )}
+                        </nav>
+                    </header>
+                    <main className="workspace-content">{children}</main>
+                </SidebarInset>
+            </>
+        </SidebarProvider>
+    );
+}
diff --git a/apps/web/components/new-app-button.tsx b/apps/web/components/new-app-button.tsx
index 4dcd573b..3c2b8356 100644
--- a/apps/web/components/new-app-button.tsx
+++ b/apps/web/components/new-app-button.tsx
@@ -1,9 +1,15 @@
 "use client";
 
-import React, { useEffect, useActionState } from "react";
+import React, {
+    useActionState,
+    useCallback,
+    useEffect,
+    useRef,
+    useState,
+    type MouseEventHandler,
+} from "react";
 import { useFormStatus } from "react-dom";
-import { useState } from "react";
-import { redirect, useRouter } from "next/navigation";
+import { useRouter } from "next/navigation";
 
 import {
     Dialog,
@@ -16,50 +22,75 @@ import {
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { useToast } from "@/components/ui/use-toast";
-import { ToastAction } from "@/components/ui/toast";
 import { Button } from "@/components/ui/button";
 import { createNewApiKey } from "@/app/actions";
+import { Plus } from "lucide-react";
+import { toast } from "sonner";
 
-export default function NewApp() {
-    const [open, setOpen] = useState(false);
+type CreateAppState = {
+    success: boolean;
+    error?: string;
+    keyId?: string;
+};
+
+export default function NewApp({
+    compact = false,
+    className = "",
+    showTrigger = true,
+    open,
+    onOpenChange,
+}: {
+    compact?: boolean;
+    className?: string;
+    showTrigger?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}) {
+    const [internalOpen, setInternalOpen] = useState(false);
+    const dialogOpen = open ?? internalOpen;
+    const handleOpenChange = useCallback(
+        (nextOpen: boolean) => {
+            setInternalOpen(nextOpen);
+            onOpenChange?.(nextOpen);
+        },
+        [onOpenChange],
+    );
     const [apiKeyFormState, createApiKeyFormAction] = useActionState(
         createNewApiKey,
-        { success: false },
+        { success: false } as CreateAppState,
     );
+    const handledSuccessState = useRef<CreateAppState | null>(null);
 
-    const [apiKey, setApiKey] = useState("");
+    const [appName, setAppName] = useState("");
     const router = useRouter();
-    const { toast } = useToast();
 
     useEffect(() => {
-        if (apiKeyFormState.success) {
-            setOpen(false);
-            router.refresh();
-            toast({
-                title: `Success`,
-                description: `App ${apiKey} is ready to go`,
-                action: (
-                    <ToastAction
-                        altText="Go to app"
-                        onClick={() => {
-                            router.push(
-                                `/app/${encodeURIComponent(apiKey)}/files`,
-                            );
-                        }}
-                    >
-                        Go to app
-                    </ToastAction>
-                ),
-            });
+        if (
+            !apiKeyFormState.success ||
+            handledSuccessState.current === apiKeyFormState
+        ) {
+            return;
+        }
+
+        handledSuccessState.current = apiKeyFormState;
+        const keyId = apiKeyFormState.keyId;
+        handleOpenChange(false);
+        if (keyId) {
+            router.push(`/app/${encodeURIComponent(keyId)}/files`);
         }
-    }, [apiKeyFormState.success]);
+        router.refresh();
+        toast.success("Success", {
+            description: `App ${appName} is ready to go`,
+        });
+    }, [apiKeyFormState, appName, handleOpenChange, router]);
 
     return (
-        <Dialog open={open} onOpenChange={setOpen}>
-            <DialogTrigger asChild>
-                <Button className="!w-20 h-8">New app</Button>
-            </DialogTrigger>
+        <Dialog open={dialogOpen} onOpenChange={handleOpenChange}>
+            {showTrigger ? (
+                <DialogTrigger asChild>
+                    <NewAppTrigger compact={compact} className={className} />
+                </DialogTrigger>
+            ) : null}
             <DialogContent className="sm:max-w-[425px]">
                 <DialogHeader>
                     <DialogTitle>Create new app</DialogTitle>
@@ -72,17 +103,17 @@ export default function NewApp() {
                             </p>
                         )}
                         <div className="grid grid-cols-4 items-center gap-4">
-                            <Label htmlFor="name" className="text-right">
+                            <Label htmlFor="apiKey" className="text-right">
                                 Name
                             </Label>
                             <Input
                                 className="col-span-3"
                                 id="apiKey"
                                 name="apiKey"
-                                type="apiKey"
+                                type="text"
                                 placeholder="Enter name"
                                 required
-                                onChange={(e) => setApiKey(e.target.value)}
+                                onChange={(e) => setAppName(e.target.value)}
                             />
                         </div>
                     </div>
@@ -95,6 +126,31 @@ export default function NewApp() {
     );
 }
 
+export function NewAppTrigger({
+    compact = false,
+    className = "",
+    onClick,
+}: {
+    compact?: boolean;
+    className?: string;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+}) {
+    return (
+        <Button
+            type="button"
+            onClick={onClick}
+            className={`workspace-button !h-9 ${compact ? "" : "!w-full !justify-start"} ${className}`}
+        >
+            {!compact ? (
+                <span className="new-app-plus">+</span>
+            ) : (
+                <Plus size={15} />
+            )}
+            New app
+        </Button>
+    );
+}
+
 function Submit({
     children,
     className = "",
diff --git a/apps/web/components/ui/button.tsx b/apps/web/components/ui/button.tsx
index 0053c7e4..e3a099ca 100644
--- a/apps/web/components/ui/button.tsx
+++ b/apps/web/components/ui/button.tsx
@@ -5,26 +5,26 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-    "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[8px] text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0",
     {
         variants: {
             variant: {
                 default:
-                    "bg-primary text-primary-foreground hover:bg-primary/90",
+                    "bg-primary text-primary-foreground hover:brightness-95",
                 destructive:
-                    "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+                    "bg-destructive text-destructive-foreground hover:brightness-95",
                 outline:
-                    "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+                    "border border-border bg-card text-foreground hover:bg-muted",
                 secondary:
-                    "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-                ghost: "hover:bg-accent hover:text-accent-foreground",
+                    "bg-secondary text-secondary-foreground hover:brightness-95",
+                ghost: "hover:bg-muted hover:text-foreground",
                 link: "text-primary underline-offset-4 hover:underline",
             },
             size: {
-                default: "h-10 px-4 py-2",
-                sm: "h-9 rounded-md px-3",
-                lg: "h-11 rounded-md px-8",
-                icon: "h-10 w-10",
+                default: "h-9 px-3.5",
+                sm: "h-8 px-3",
+                lg: "h-10 px-5",
+                icon: "h-9 w-9",
             },
         },
         defaultVariants: {
diff --git a/apps/web/components/ui/dialog.tsx b/apps/web/components/ui/dialog.tsx
index 47bd7e3d..8e4cbafe 100644
--- a/apps/web/components/ui/dialog.tsx
+++ b/apps/web/components/ui/dialog.tsx
@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
     <DialogPrimitive.Overlay
         ref={ref}
         className={cn(
-            "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+            "dialog-overlay-warm fixed inset-0 z-50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
             className,
         )}
         {...props}
@@ -38,7 +38,7 @@ const DialogContent = React.forwardRef<
         <DialogPrimitive.Content
             ref={ref}
             className={cn(
-                "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+                "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-popover duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-2xl",
                 className,
             )}
             {...props}
diff --git a/apps/web/components/ui/sidebar.tsx b/apps/web/components/ui/sidebar.tsx
new file mode 100644
index 00000000..03a852a8
--- /dev/null
+++ b/apps/web/components/ui/sidebar.tsx
@@ -0,0 +1,237 @@
+"use client";
+
+import {
+    createContext,
+    useContext,
+    useEffect,
+    useState,
+    type ButtonHTMLAttributes,
+    type HTMLAttributes,
+    type ReactNode,
+} from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { PanelLeftIcon } from "lucide-react";
+
+type SidebarContextValue = {
+    state: "expanded" | "collapsed";
+    isMobile: boolean;
+    openMobile: boolean;
+    setOpenMobile: (open: boolean) => void;
+    toggleSidebar: () => void;
+};
+
+const SidebarContext = createContext<SidebarContextValue | null>(null);
+
+function useSidebar() {
+    const context = useContext(SidebarContext);
+    if (!context) {
+        throw new Error(
+            "Sidebar components must be rendered inside SidebarProvider.",
+        );
+    }
+    return context;
+}
+
+function joinClasses(...classes: Array<string | undefined>) {
+    return classes.filter(Boolean).join(" ");
+}
+
+export function SidebarProvider({
+    children,
+    className,
+    open: controlledOpen,
+    onOpenChange,
+    openMobile: controlledOpenMobile,
+    onOpenMobileChange,
+}: {
+    children: ReactNode;
+    className?: string;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    openMobile?: boolean;
+    onOpenMobileChange?: (open: boolean) => void;
+}) {
+    const [internalOpen, setInternalOpen] = useState(true);
+    const [internalOpenMobile, setInternalOpenMobile] = useState(false);
+    const [isMobile, setIsMobile] = useState(false);
+    const open = controlledOpen ?? internalOpen;
+    const openMobile = controlledOpenMobile ?? internalOpenMobile;
+
+    useEffect(() => {
+        const mediaQuery = window.matchMedia("(max-width: 760px)");
+        const updateIsMobile = () => setIsMobile(mediaQuery.matches);
+        updateIsMobile();
+        mediaQuery.addEventListener("change", updateIsMobile);
+        return () => mediaQuery.removeEventListener("change", updateIsMobile);
+    }, []);
+
+    function setOpen(update: (current: boolean) => boolean) {
+        const nextValue = update(open);
+        if (controlledOpen === undefined) setInternalOpen(nextValue);
+        onOpenChange?.(nextValue);
+    }
+
+    function setOpenMobile(value: boolean) {
+        if (controlledOpenMobile === undefined) setInternalOpenMobile(value);
+        onOpenMobileChange?.(value);
+    }
+
+    function toggleSidebar() {
+        if (isMobile) {
+            setOpenMobile(!openMobile);
+        } else {
+            setOpen((value) => !value);
+        }
+    }
+
+    return (
+        <SidebarContext.Provider
+            value={{
+                state: open ? "expanded" : "collapsed",
+                isMobile,
+                openMobile,
+                setOpenMobile,
+                toggleSidebar,
+            }}
+        >
+            <div
+                data-slot="sidebar-provider"
+                data-state={open ? "expanded" : "collapsed"}
+                className={className}
+            >
+                {children}
+            </div>
+        </SidebarContext.Provider>
+    );
+}
+
+export function Sidebar({
+    children,
+    className,
+    ...props
+}: HTMLAttributes<HTMLElement>) {
+    const { state, isMobile, openMobile, setOpenMobile } = useSidebar();
+    const sidebar = (
+        <aside
+            data-slot="sidebar"
+            className={joinClasses(
+                className,
+                state === "collapsed" ? "is-collapsed" : undefined,
+                openMobile ? "is-mobile-open" : undefined,
+            )}
+            aria-label="Primary navigation"
+            {...props}
+        >
+            {isMobile ? (
+                <>
+                    <DialogPrimitive.Title className="visually-hidden">
+                        Primary navigation
+                    </DialogPrimitive.Title>
+                    <DialogPrimitive.Description className="visually-hidden">
+                        Navigate between your MediaLit apps and settings.
+                    </DialogPrimitive.Description>
+                </>
+            ) : null}
+            {children}
+        </aside>
+    );
+
+    if (isMobile) {
+        return (
+            <DialogPrimitive.Root
+                open={openMobile}
+                onOpenChange={setOpenMobile}
+            >
+                <DialogPrimitive.Portal>
+                    <DialogPrimitive.Overlay className="workspace-mobile-sidebar-overlay" />
+                    <DialogPrimitive.Content
+                        asChild
+                        aria-label="Primary navigation"
+                    >
+                        {sidebar}
+                    </DialogPrimitive.Content>
+                </DialogPrimitive.Portal>
+            </DialogPrimitive.Root>
+        );
+    }
+
+    return (
+        <div
+            data-slot="sidebar-wrapper"
+            data-state={state}
+            data-collapsible={state === "collapsed" ? "icon" : ""}
+            data-variant="sidebar"
+            data-side="left"
+            className="workspace-sidebar-group"
+        >
+            <div
+                data-slot="sidebar-gap"
+                className="workspace-sidebar-gap"
+                aria-hidden="true"
+            />
+            {sidebar}
+        </div>
+    );
+}
+
+export function SidebarInset({
+    className,
+    ...props
+}: HTMLAttributes<HTMLDivElement>) {
+    return <div data-slot="sidebar-inset" className={className} {...props} />;
+}
+
+export function SidebarHeader({
+    className,
+    ...props
+}: HTMLAttributes<HTMLDivElement>) {
+    return <div data-slot="sidebar-header" className={className} {...props} />;
+}
+
+export function SidebarContent({
+    className,
+    ...props
+}: HTMLAttributes<HTMLDivElement>) {
+    return <div data-slot="sidebar-content" className={className} {...props} />;
+}
+
+export function SidebarFooter({
+    className,
+    ...props
+}: HTMLAttributes<HTMLDivElement>) {
+    return <div data-slot="sidebar-footer" className={className} {...props} />;
+}
+
+export function SidebarTrigger({
+    className,
+    children,
+    "aria-label": ariaLabel,
+    ...props
+}: ButtonHTMLAttributes<HTMLButtonElement>) {
+    const { state, isMobile, openMobile, toggleSidebar } = useSidebar();
+    let defaultLabel: string;
+    if (isMobile) {
+        defaultLabel = openMobile ? "Close navigation" : "Open navigation";
+    } else {
+        defaultLabel =
+            state === "expanded" ? "Collapse navigation" : "Expand navigation";
+    }
+
+    return (
+        <button
+            type="button"
+            data-slot="sidebar-trigger"
+            data-state={state}
+            className={className}
+            aria-label={ariaLabel ?? defaultLabel}
+            aria-controls={
+                !isMobile || openMobile ? "workspace-sidebar" : undefined
+            }
+            aria-expanded={isMobile ? openMobile : state === "expanded"}
+            onClick={toggleSidebar}
+            {...props}
+        >
+            {children ?? <PanelLeftIcon aria-hidden="true" />}
+        </button>
+    );
+}
diff --git a/apps/web/components/ui/skeleton.tsx b/apps/web/components/ui/skeleton.tsx
deleted file mode 100644
index c5c1274c..00000000
--- a/apps/web/components/ui/skeleton.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { cn } from "@/lib/utils";
-
-function Skeleton({
-    className,
-    ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
-    return (
-        <div
-            className={cn("animate-pulse rounded-md bg-muted", className)}
-            {...props}
-        />
-    );
-}
-
-export { Skeleton };
diff --git a/apps/web/components/ui/sonner.tsx b/apps/web/components/ui/sonner.tsx
index d8dc1cc2..3e2c1123 100644
--- a/apps/web/components/ui/sonner.tsx
+++ b/apps/web/components/ui/sonner.tsx
@@ -1,9 +1,14 @@
 "use client";
 
 import { useTheme } from "next-themes";
-import { Toaster as Sonner } from "sonner";
-
-type ToasterProps = React.ComponentProps<typeof Sonner>;
+import {
+    CircleCheckIcon,
+    InfoIcon,
+    Loader2Icon,
+    OctagonXIcon,
+    TriangleAlertIcon,
+} from "lucide-react";
+import { Toaster as Sonner, type ToasterProps } from "sonner";
 
 const Toaster = ({ ...props }: ToasterProps) => {
     const { theme = "system" } = useTheme();
@@ -12,16 +17,46 @@ const Toaster = ({ ...props }: ToasterProps) => {
         <Sonner
             theme={theme as ToasterProps["theme"]}
             className="toaster group"
-            toastOptions={{
-                classNames: {
-                    toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-                    description: "group-[.toast]:text-muted-foreground",
-                    actionButton:
-                        "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
-                    cancelButton:
-                        "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
-                },
+            icons={{
+                success: (
+                    <CircleCheckIcon
+                        className="size-4"
+                        style={{ color: "var(--success)" }}
+                    />
+                ),
+                info: (
+                    <InfoIcon
+                        className="size-4"
+                        style={{ color: "var(--primary)" }}
+                    />
+                ),
+                warning: (
+                    <TriangleAlertIcon
+                        className="size-4"
+                        style={{ color: "var(--warning)" }}
+                    />
+                ),
+                error: (
+                    <OctagonXIcon
+                        className="size-4"
+                        style={{ color: "var(--destructive)" }}
+                    />
+                ),
+                loading: (
+                    <Loader2Icon
+                        className="size-4 animate-spin"
+                        style={{ color: "var(--muted-foreground)" }}
+                    />
+                ),
             }}
+            style={
+                {
+                    "--normal-bg": "var(--popover)",
+                    "--normal-text": "var(--popover-foreground)",
+                    "--normal-border": "var(--border)",
+                    "--border-radius": "var(--radius)",
+                } as React.CSSProperties
+            }
             {...props}
         />
     );
diff --git a/apps/web/components/ui/toast.tsx b/apps/web/components/ui/toast.tsx
deleted file mode 100644
index 513163f0..00000000
--- a/apps/web/components/ui/toast.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-import * as React from "react";
-import * as ToastPrimitives from "@radix-ui/react-toast";
-import { cva, type VariantProps } from "class-variance-authority";
-import { X } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-const ToastProvider = ToastPrimitives.Provider;
-
-const ToastViewport = React.forwardRef<
-    React.ElementRef<typeof ToastPrimitives.Viewport>,
-    React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
->(({ className, ...props }, ref) => (
-    <ToastPrimitives.Viewport
-        ref={ref}
-        className={cn(
-            "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
-            className,
-        )}
-        {...props}
-    />
-));
-ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
-
-const toastVariants = cva(
-    "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
-    {
-        variants: {
-            variant: {
-                default: "border bg-background text-foreground",
-                destructive:
-                    "destructive group border-destructive bg-destructive text-destructive-foreground",
-                success:
-                    // "success group border-success bg-success text-success-foreground",
-                    "focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800",
-            },
-        },
-        defaultVariants: {
-            variant: "default",
-        },
-    },
-);
-
-const Toast = React.forwardRef<
-    React.ElementRef<typeof ToastPrimitives.Root>,
-    React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
-        VariantProps<typeof toastVariants>
->(({ className, variant, ...props }, ref) => {
-    return (
-        <ToastPrimitives.Root
-            ref={ref}
-            className={cn(toastVariants({ variant }), className)}
-            {...props}
-        />
-    );
-});
-Toast.displayName = ToastPrimitives.Root.displayName;
-
-const ToastAction = React.forwardRef<
-    React.ElementRef<typeof ToastPrimitives.Action>,
-    React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
->(({ className, ...props }, ref) => (
-    <ToastPrimitives.Action
-        ref={ref}
-        className={cn(
-            "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
-            className,
-        )}
-        {...props}
-    />
-));
-ToastAction.displayName = ToastPrimitives.Action.displayName;
-
-const ToastClose = React.forwardRef<
-    React.ElementRef<typeof ToastPrimitives.Close>,
-    React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
->(({ className, ...props }, ref) => (
-    <ToastPrimitives.Close
-        ref={ref}
-        className={cn(
-            "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
-            className,
-        )}
-        toast-close=""
-        {...props}
-    >
-        <X className="h-4 w-4" />
-    </ToastPrimitives.Close>
-));
-ToastClose.displayName = ToastPrimitives.Close.displayName;
-
-const ToastTitle = React.forwardRef<
-    React.ElementRef<typeof ToastPrimitives.Title>,
-    React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
->(({ className, ...props }, ref) => (
-    <ToastPrimitives.Title
-        ref={ref}
-        className={cn("text-sm font-semibold", className)}
-        {...props}
-    />
-));
-ToastTitle.displayName = ToastPrimitives.Title.displayName;
-
-const ToastDescription = React.forwardRef<
-    React.ElementRef<typeof ToastPrimitives.Description>,
-    React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
->(({ className, ...props }, ref) => (
-    <ToastPrimitives.Description
-        ref={ref}
-        className={cn("text-sm opacity-90", className)}
-        {...props}
-    />
-));
-ToastDescription.displayName = ToastPrimitives.Description.displayName;
-
-type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
-
-type ToastActionElement = React.ReactElement<typeof ToastAction>;
-
-export {
-    type ToastProps,
-    type ToastActionElement,
-    ToastProvider,
-    ToastViewport,
-    Toast,
-    ToastTitle,
-    ToastDescription,
-    ToastClose,
-    ToastAction,
-};
diff --git a/apps/web/components/ui/toaster.tsx b/apps/web/components/ui/toaster.tsx
deleted file mode 100644
index 3391595e..00000000
--- a/apps/web/components/ui/toaster.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-"use client";
-
-import {
-    Toast,
-    ToastClose,
-    ToastDescription,
-    ToastProvider,
-    ToastTitle,
-    ToastViewport,
-} from "@/components/ui/toast";
-import { useToast } from "@/components/ui/use-toast";
-
-export function Toaster() {
-    const { toasts } = useToast();
-
-    return (
-        <ToastProvider>
-            {toasts.map(function ({
-                id,
-                title,
-                description,
-                action,
-                ...props
-            }) {
-                return (
-                    <Toast key={id} {...props}>
-                        <div className="grid gap-1">
-                            {title && <ToastTitle>{title}</ToastTitle>}
-                            {description && (
-                                <ToastDescription>
-                                    {description}
-                                </ToastDescription>
-                            )}
-                        </div>
-                        {action}
-                        <ToastClose />
-                    </Toast>
-                );
-            })}
-            <ToastViewport />
-        </ToastProvider>
-    );
-}
diff --git a/apps/web/components/ui/use-toast.ts b/apps/web/components/ui/use-toast.ts
deleted file mode 100644
index d1166e57..00000000
--- a/apps/web/components/ui/use-toast.ts
+++ /dev/null
@@ -1,190 +0,0 @@
-// Inspired by react-hot-toast library
-import * as React from "react";
-
-import type { ToastActionElement, ToastProps } from "@/components/ui/toast";
-
-const TOAST_LIMIT = 1;
-const TOAST_REMOVE_DELAY = 1000000;
-
-type ToasterToast = ToastProps & {
-    id: string;
-    title?: React.ReactNode;
-    description?: React.ReactNode;
-    action?: ToastActionElement;
-};
-
-const actionTypes = {
-    ADD_TOAST: "ADD_TOAST",
-    UPDATE_TOAST: "UPDATE_TOAST",
-    DISMISS_TOAST: "DISMISS_TOAST",
-    REMOVE_TOAST: "REMOVE_TOAST",
-} as const;
-
-let count = 0;
-
-function genId() {
-    count = (count + 1) % Number.MAX_SAFE_INTEGER;
-    return count.toString();
-}
-
-type ActionType = typeof actionTypes;
-
-type Action =
-    | {
-          type: ActionType["ADD_TOAST"];
-          toast: ToasterToast;
-      }
-    | {
-          type: ActionType["UPDATE_TOAST"];
-          toast: Partial<ToasterToast>;
-      }
-    | {
-          type: ActionType["DISMISS_TOAST"];
-          toastId?: ToasterToast["id"];
-      }
-    | {
-          type: ActionType["REMOVE_TOAST"];
-          toastId?: ToasterToast["id"];
-      };
-
-interface State {
-    toasts: ToasterToast[];
-}
-
-const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
-
-const addToRemoveQueue = (toastId: string) => {
-    if (toastTimeouts.has(toastId)) {
-        return;
-    }
-
-    const timeout = setTimeout(() => {
-        toastTimeouts.delete(toastId);
-        dispatch({
-            type: "REMOVE_TOAST",
-            toastId: toastId,
-        });
-    }, TOAST_REMOVE_DELAY);
-
-    toastTimeouts.set(toastId, timeout);
-};
-
-export const reducer = (state: State, action: Action): State => {
-    switch (action.type) {
-        case "ADD_TOAST":
-            return {
-                ...state,
-                toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
-            };
-
-        case "UPDATE_TOAST":
-            return {
-                ...state,
-                toasts: state.toasts.map((t) =>
-                    t.id === action.toast.id ? { ...t, ...action.toast } : t,
-                ),
-            };
-
-        case "DISMISS_TOAST": {
-            const { toastId } = action;
-
-            // ! Side effects ! - This could be extracted into a dismissToast() action,
-            // but I'll keep it here for simplicity
-            if (toastId) {
-                addToRemoveQueue(toastId);
-            } else {
-                state.toasts.forEach((toast) => {
-                    addToRemoveQueue(toast.id);
-                });
-            }
-
-            return {
-                ...state,
-                toasts: state.toasts.map((t) =>
-                    t.id === toastId || toastId === undefined
-                        ? {
-                              ...t,
-                              open: false,
-                          }
-                        : t,
-                ),
-            };
-        }
-        case "REMOVE_TOAST":
-            if (action.toastId === undefined) {
-                return {
-                    ...state,
-                    toasts: [],
-                };
-            }
-            return {
-                ...state,
-                toasts: state.toasts.filter((t) => t.id !== action.toastId),
-            };
-    }
-};
-
-const listeners: Array<(state: State) => void> = [];
-
-let memoryState: State = { toasts: [] };
-
-function dispatch(action: Action) {
-    memoryState = reducer(memoryState, action);
-    listeners.forEach((listener) => {
-        listener(memoryState);
-    });
-}
-
-type Toast = Omit<ToasterToast, "id">;
-
-function toast({ ...props }: Toast) {
-    const id = genId();
-
-    const update = (props: ToasterToast) =>
-        dispatch({
-            type: "UPDATE_TOAST",
-            toast: { ...props, id },
-        });
-    const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
-
-    dispatch({
-        type: "ADD_TOAST",
-        toast: {
-            ...props,
-            id,
-            open: true,
-            onOpenChange: (open) => {
-                if (!open) dismiss();
-            },
-        },
-    });
-
-    return {
-        id: id,
-        dismiss,
-        update,
-    };
-}
-
-function useToast() {
-    const [state, setState] = React.useState<State>(memoryState);
-
-    React.useEffect(() => {
-        listeners.push(setState);
-        return () => {
-            const index = listeners.indexOf(setState);
-            if (index > -1) {
-                listeners.splice(index, 1);
-            }
-        };
-    }, [state]);
-
-    return {
-        ...state,
-        toast,
-        dismiss: (toastId?: string) =>
-            dispatch({ type: "DISMISS_TOAST", toastId }),
-    };
-}
-
-export { useToast, toast };
diff --git a/apps/web/design-system-tailwind.d.ts b/apps/web/design-system-tailwind.d.ts
new file mode 100644
index 00000000..58406dd4
--- /dev/null
+++ b/apps/web/design-system-tailwind.d.ts
@@ -0,0 +1,6 @@
+declare module "@codelitdev/design-system/tailwind-preset" {
+    import type { Config } from "tailwindcss";
+
+    const preset: Partial<Config>;
+    export default preset;
+}
diff --git a/apps/web/lib/api-base.ts b/apps/web/lib/api-base.ts
new file mode 100644
index 00000000..09edd21c
--- /dev/null
+++ b/apps/web/lib/api-base.ts
@@ -0,0 +1,77 @@
+export function parseHttpUrl(value: string | undefined) {
+    if (!value) return null;
+
+    try {
+        const url = new URL(value);
+        return url.protocol === "http:" || url.protocol === "https:"
+            ? url
+            : null;
+    } catch {
+        return null;
+    }
+}
+
+export function isLoopback(hostname: string) {
+    const normalized = hostname
+        .toLowerCase()
+        .replace(/^\[|\]$/g, "")
+        .replace(/\.$/, "");
+    return (
+        normalized === "localhost" ||
+        normalized.endsWith(".localhost") ||
+        normalized === "localtest.me" ||
+        normalized.endsWith(".localtest.me") ||
+        normalized.endsWith(".test") ||
+        normalized === "::1" ||
+        normalized === "::" ||
+        normalized === "0.0.0.0" ||
+        /^127(?:\.\d{1,3}){3}$/.test(normalized)
+    );
+}
+
+export function getPublicApiBase(requestHeaders: Headers) {
+    const configuredPublicUrl = parseHttpUrl(
+        process.env.PUBLIC_API_URL?.trim(),
+    );
+    if (configuredPublicUrl && !isLoopback(configuredPublicUrl.hostname)) {
+        return configuredPublicUrl.toString().replace(/\/$/, "");
+    }
+
+    const apiServerUrl = parseHttpUrl(process.env.API_SERVER?.trim());
+    const apiPort = configuredPublicUrl?.port || apiServerUrl?.port || "8000";
+    const requestHost = (
+        requestHeaders.get("x-forwarded-host") ||
+        requestHeaders.get("host") ||
+        ""
+    )
+        .split(",")[0]
+        .trim();
+    const forwardedProtocol = requestHeaders
+        .get("x-forwarded-proto")
+        ?.split(",")[0]
+        .trim();
+    const protocol = forwardedProtocol === "https" ? "https" : "http";
+
+    if (requestHost) {
+        try {
+            const incomingUrl = new URL(`${protocol}://${requestHost}`);
+            if (!isLoopback(incomingUrl.hostname)) {
+                return `${protocol}://${incomingUrl.hostname}:${apiPort}`;
+            }
+        } catch {
+            // Ignore invalid forwarded host values and fall back to configured addresses.
+        }
+    }
+
+    const fallbackUrl =
+        apiServerUrl || configuredPublicUrl || new URL("http://127.0.0.1:8000");
+    return fallbackUrl.toString().replace(/\/$/, "");
+}
+
+/* Where the MediaLit CLI points when no --endpoint is given. */
+const CLI_DEFAULT_ENDPOINT = "https://api.medialit.cloud";
+
+/* The CLI needs --endpoint for any API other than its default. */
+export function cliNeedsEndpoint(apiBase: string) {
+    return apiBase.replace(/\/$/, "") !== CLI_DEFAULT_ENDPOINT;
+}
diff --git a/apps/web/lib/media-format.ts b/apps/web/lib/media-format.ts
new file mode 100644
index 00000000..780442e9
--- /dev/null
+++ b/apps/web/lib/media-format.ts
@@ -0,0 +1,51 @@
+export function formatFileSize(size: number) {
+    if (size < 1024) return `${size} B`;
+    if (size < 1024 * 1024) return `${(size / 1024).toFixed(0)} KB`;
+    if (size < 1024 * 1024 * 1024)
+        return `${(size / 1024 / 1024).toFixed(2)} MB`;
+    return `${(size / 1024 / 1024 / 1024).toFixed(2)} GB`;
+}
+
+export function formatAppStorage(size: number) {
+    if (size === 0) return "0 KB";
+    const megabytes = size / (1024 * 1024);
+    if (megabytes >= 100) return `${megabytes.toFixed(1)} MB`;
+    if (megabytes >= 1) return `${megabytes.toFixed(2)} MB`;
+    return formatFileSize(size);
+}
+
+export function formatRelativeUpload(value: string | Date | null) {
+    if (!value) return "No uploads yet";
+    const uploadedAt = new Date(value);
+    const now = new Date();
+    const elapsed = Math.max(0, now.getTime() - uploadedAt.getTime());
+    const minutes = Math.floor(elapsed / 60_000);
+    if (minutes < 1) return "Just now";
+    if (minutes < 60) return `${minutes} min ago`;
+    const hours = Math.floor(minutes / 60);
+    const today = new Date(now);
+    const uploadDay = new Date(uploadedAt);
+    today.setHours(0, 0, 0, 0);
+    uploadDay.setHours(0, 0, 0, 0);
+    const days = Math.floor(
+        (today.getTime() - uploadDay.getTime()) / 86_400_000,
+    );
+    if (days === 1) return "Yesterday";
+    if (hours < 24) return `${hours} h ago`;
+    if (days < 7) return `${days} days ago`;
+    return uploadedAt.toLocaleDateString(undefined, {
+        month: "short",
+        day: "numeric",
+        year:
+            uploadedAt.getFullYear() === now.getFullYear()
+                ? undefined
+                : "numeric",
+    });
+}
+
+/* "Last upload 5 min ago", or "No uploads yet" when there's none. */
+export function formatLastUpload(value: string | Date | null) {
+    return value
+        ? `Last upload ${formatRelativeUpload(value)}`
+        : "No uploads yet";
+}
diff --git a/apps/web/lib/media.ts b/apps/web/lib/media.ts
new file mode 100644
index 00000000..ad8db005
--- /dev/null
+++ b/apps/web/lib/media.ts
@@ -0,0 +1,13 @@
+export type MediaListItem = {
+    mediaId: string;
+    originalFileName: string;
+    mimeType: string;
+    /** Set by the API; the same kinds the Files filters use. */
+    kind: "image" | "video" | "pdf" | "other";
+    size: number;
+    access: "public" | "private";
+    thumbnail: string;
+    createdAt: string;
+    caption?: string;
+    group?: string;
+};
diff --git a/apps/web/lib/server-api.ts b/apps/web/lib/server-api.ts
index 04228083..39fe7d96 100644
--- a/apps/web/lib/server-api.ts
+++ b/apps/web/lib/server-api.ts
@@ -12,7 +12,9 @@ export async function serverApi(path: string, init?: RequestInit) {
     const cookieStore = await cookies();
     const headers = new Headers(init?.headers);
     headers.set("cookie", cookieStore.toString());
-    if (init?.body && !headers.has("content-type")) {
+    const isFormData =
+        typeof FormData !== "undefined" && init?.body instanceof FormData;
+    if (init?.body && !isFormData && !headers.has("content-type")) {
         headers.set("content-type", "application/json");
     }
     return fetch(`${apiBase()}${path}`, {
diff --git a/apps/web/next.config.js b/apps/web/next.config.js
index 0a0c639a..eefcc0a6 100644
--- a/apps/web/next.config.js
+++ b/apps/web/next.config.js
@@ -1,7 +1,16 @@
 /** @type {import('next').NextConfig} */
+const allowedDevOrigins = process.env.WEB_ORIGIN
+    ? [new URL(process.env.WEB_ORIGIN).hostname, "*.taile2f1.ts.net"]
+    : ["*.taile2f1.ts.net"];
+
 const nextConfig = {
     output: "standalone",
-    transpilePackages: ["@medialit/models", "@codelitdev/observability"],
+    allowedDevOrigins,
+    transpilePackages: [
+        "@medialit/models",
+        "@codelitdev/observability",
+        "@codelitdev/design-system",
+    ],
     images: {
         // Thumbnails come from whatever storage the deployment uses, so the
         // browser loads them directly instead of through Next's optimizer.
diff --git a/apps/web/package.json b/apps/web/package.json
index 47788e9a..8bc63a23 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -9,8 +9,10 @@
     "lint": "eslint ."
   },
   "dependencies": {
+    "@codelitdev/design-system": "0.4.1",
     "@codelitdev/observability": "0.4.1",
     "@medialit/models": "workspace:*",
+    "@medialit/uploader": "workspace:*",
     "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
@@ -23,7 +25,6 @@
     "@radix-ui/react-slot": "^1.2.0",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.1.8",
-    "@radix-ui/react-toast": "^1.1.5",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "lucide-react": "^0.487.0",
@@ -33,7 +34,7 @@
     "react": "19.2.8",
     "react-dom": "19.2.8",
     "react-icons": "^4.11.0",
-    "sonner": "^1.3.1",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^2.2.0",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.22.4"
diff --git a/apps/web/proxy.ts b/apps/web/proxy.ts
index d6c772ee..8b04e201 100644
--- a/apps/web/proxy.ts
+++ b/apps/web/proxy.ts
@@ -90,7 +90,10 @@ export async function proxy(request: NextRequest) {
 
     if (check !== "valid") {
         const url = request.nextUrl.clone();
+        const nextPath = `${url.pathname}${url.search}`;
         url.pathname = "/login";
+        url.search = "";
+        url.searchParams.set("next", nextPath);
         const response = NextResponse.redirect(url);
         if (check === "invalid" && hasSessionCookie(request)) {
             clearSessionCookies(request, response);
diff --git a/apps/web/tailwind.config.ts b/apps/web/tailwind.config.ts
index a23faa5f..83e6c625 100644
--- a/apps/web/tailwind.config.ts
+++ b/apps/web/tailwind.config.ts
@@ -1,6 +1,8 @@
 import type { Config } from "tailwindcss";
+import codelitPreset from "@codelitdev/design-system/tailwind-preset";
 
 const config = {
+    presets: [codelitPreset],
     darkMode: ["class"],
     content: [
         "./pages/**/*.{ts,tsx}",
@@ -8,7 +10,6 @@ const config = {
         "./app/**/*.{ts,tsx}",
         "./src/**/*.{ts,tsx}",
     ],
-    prefix: "",
     theme: {
         container: {
             center: true,
@@ -18,46 +19,6 @@ const config = {
             },
         },
         extend: {
-            colors: {
-                border: "hsl(var(--border))",
-                input: "hsl(var(--input))",
-                ring: "hsl(var(--ring))",
-                background: "hsl(var(--background))",
-                foreground: "hsl(var(--foreground))",
-                primary: {
-                    DEFAULT: "hsl(var(--primary))",
-                    foreground: "hsl(var(--primary-foreground))",
-                },
-                secondary: {
-                    DEFAULT: "hsl(var(--secondary))",
-                    foreground: "hsl(var(--secondary-foreground))",
-                },
-                destructive: {
-                    DEFAULT: "hsl(var(--destructive))",
-                    foreground: "hsl(var(--destructive-foreground))",
-                },
-                muted: {
-                    DEFAULT: "hsl(var(--muted))",
-                    foreground: "hsl(var(--muted-foreground))",
-                },
-                accent: {
-                    DEFAULT: "hsl(var(--accent))",
-                    foreground: "hsl(var(--accent-foreground))",
-                },
-                popover: {
-                    DEFAULT: "hsl(var(--popover))",
-                    foreground: "hsl(var(--popover-foreground))",
-                },
-                card: {
-                    DEFAULT: "hsl(var(--card))",
-                    foreground: "hsl(var(--card-foreground))",
-                },
-            },
-            borderRadius: {
-                lg: "var(--radius)",
-                md: "calc(var(--radius) - 2px)",
-                sm: "calc(var(--radius) - 4px)",
-            },
             keyframes: {
                 "accordion-down": {
                     from: { height: "0" },
diff --git a/bun.lock b/bun.lock
index 843acc68..a437d9f1 100644
--- a/bun.lock
+++ b/bun.lock
@@ -106,8 +106,10 @@
       "name": "@medialit/web",
       "version": "0.1.2",
       "dependencies": {
+        "@codelitdev/design-system": "0.4.1",
         "@codelitdev/observability": "0.4.1",
         "@medialit/models": "workspace:*",
+        "@medialit/uploader": "workspace:*",
         "@radix-ui/colors": "^3.0.0",
         "@radix-ui/react-avatar": "^1.0.4",
         "@radix-ui/react-dialog": "^1.0.5",
@@ -120,7 +122,6 @@
         "@radix-ui/react-slot": "^1.2.0",
         "@radix-ui/react-switch": "^1.0.3",
         "@radix-ui/react-tabs": "^1.1.8",
-        "@radix-ui/react-toast": "^1.1.5",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.0",
         "lucide-react": "^0.487.0",
@@ -130,7 +131,7 @@
         "react": "19.2.8",
         "react-dom": "19.2.8",
         "react-icons": "^4.11.0",
-        "sonner": "^1.3.1",
+        "sonner": "^2.0.7",
         "tailwind-merge": "^2.2.0",
         "tailwindcss-animate": "^1.0.7",
         "zod": "^3.22.4",
@@ -912,7 +913,7 @@
 
     "@radix-ui/react-collapsible": ["@radix-ui/react-collapsible@1.1.12", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA=="],
 
-    "@radix-ui/react-collection": ["@radix-ui/react-collection@1.1.2", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-context": "1.1.1", "@radix-ui/react-primitive": "2.0.2", "@radix-ui/react-slot": "1.1.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-9z54IEKRxIa9VityapoEYMuByaG42iSy1ZXlY2KcuLSEtq8x4987/N6m15ppoMffgZX72gER2uHe1D9Y6Unlcw=="],
+    "@radix-ui/react-collection": ["@radix-ui/react-collection@1.1.7", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw=="],
 
     "@radix-ui/react-compose-refs": ["@radix-ui/react-compose-refs@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg=="],
 
@@ -966,8 +967,6 @@
 
     "@radix-ui/react-tabs": ["@radix-ui/react-tabs@1.1.13", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-roving-focus": "1.1.11", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A=="],
 
-    "@radix-ui/react-toast": ["@radix-ui/react-toast@1.2.6", "", { "dependencies": { "@radix-ui/primitive": "1.1.1", "@radix-ui/react-collection": "1.1.2", "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-context": "1.1.1", "@radix-ui/react-dismissable-layer": "1.1.5", "@radix-ui/react-portal": "1.1.4", "@radix-ui/react-presence": "1.1.2", "@radix-ui/react-primitive": "2.0.2", "@radix-ui/react-use-callback-ref": "1.1.0", "@radix-ui/react-use-controllable-state": "1.1.0", "@radix-ui/react-use-layout-effect": "1.1.0", "@radix-ui/react-visually-hidden": "1.1.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-gN4dpuIVKEgpLn1z5FhzT9mYRUitbfZq9XqN/7kkBMUgFTzTG8x/KszWJugJXHcwxckY8xcKDZPz7kG3o6DsUA=="],
-
     "@radix-ui/react-use-callback-ref": ["@radix-ui/react-use-callback-ref@1.1.0", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw=="],
 
     "@radix-ui/react-use-controllable-state": ["@radix-ui/react-use-controllable-state@1.2.2", "", { "dependencies": { "@radix-ui/react-use-effect-event": "0.0.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg=="],
@@ -984,7 +983,7 @@
 
     "@radix-ui/react-use-size": ["@radix-ui/react-use-size@1.1.0", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw=="],
 
-    "@radix-ui/react-visually-hidden": ["@radix-ui/react-visually-hidden@1.1.2", "", { "dependencies": { "@radix-ui/react-primitive": "2.0.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-1SzA4ns2M1aRlvxErqhLHsBHoS5eI5UUcI2awAMgGUp4LoaoWOKYmvqDY2s/tltuPkh3Yk77YF/r3IRj+Amx4Q=="],
+    "@radix-ui/react-visually-hidden": ["@radix-ui/react-visually-hidden@1.2.3", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug=="],
 
     "@radix-ui/rect": ["@radix-ui/rect@1.1.1", "", {}, "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw=="],
 
@@ -2940,7 +2939,7 @@
 
     "sonic-boom": ["sonic-boom@4.2.0", "", { "dependencies": { "atomic-sleep": "1.0.0" } }, "sha512-INb7TM37/mAcsGmc9hyyI6+QR3rR1zVRu36B0NeGXKnOOLiZOfER5SA+N7X7k3yUYRzLWafduTDvJAfDswwEww=="],
 
-    "sonner": ["sonner@1.7.4", "", { "peerDependencies": { "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc", "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc" } }, "sha512-DIS8z4PfJRbIyfVFDVnK9rO3eYDtse4Omcm6bt0oEr5/jtLgysmjuBl1frJ9E/EQZrFmKx2A8m/s5s9CRXIzhw=="],
+    "sonner": ["sonner@2.0.8", "", { "peerDependencies": { "@types/react": "^18.0.0 || ^19.0.0", "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc", "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-UM/ByIoFra8yzV75n1o0Puu0bw5U/9UNnDacrJNspekBewIfsQ3D6ez1nvlWpt7aTsO6rujQtifBpycwIivqlg=="],
 
     "source-map": ["source-map@0.8.0-beta.0", "", { "dependencies": { "whatwg-url": "7.1.0" } }, "sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA=="],
 
@@ -3380,8 +3379,6 @@
 
     "@napi-rs/wasm-runtime/@emnapi/runtime": ["@emnapi/runtime@1.7.1", "", { "dependencies": { "tslib": "2.8.1" } }, "sha512-PVtJr5CmLwYAU9PZDMITZoR5iAOShYREoR45EyyLrbntV50mdePTgUn4AmOw90Ifcj+x2kRjdzr1HP3RrNiHGA=="],
 
-    "@radix-ui/react-accordion/@radix-ui/react-collection": ["@radix-ui/react-collection@1.1.7", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw=="],
-
     "@radix-ui/react-accordion/@radix-ui/react-context": ["@radix-ui/react-context@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA=="],
 
     "@radix-ui/react-accordion/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
@@ -3394,9 +3391,11 @@
 
     "@radix-ui/react-collapsible/@radix-ui/react-use-layout-effect": ["@radix-ui/react-use-layout-effect@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ=="],
 
-    "@radix-ui/react-collection/@radix-ui/react-compose-refs": ["@radix-ui/react-compose-refs@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw=="],
+    "@radix-ui/react-collection/@radix-ui/react-context": ["@radix-ui/react-context@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA=="],
 
-    "@radix-ui/react-collection/@radix-ui/react-slot": ["@radix-ui/react-slot@1.1.2", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ=="],
+    "@radix-ui/react-collection/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+
+    "@radix-ui/react-collection/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
 
     "@radix-ui/react-dialog/@radix-ui/react-context": ["@radix-ui/react-context@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA=="],
 
@@ -3424,6 +3423,8 @@
 
     "@radix-ui/react-menu/@radix-ui/primitive": ["@radix-ui/primitive@1.1.1", "", {}, "sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA=="],
 
+    "@radix-ui/react-menu/@radix-ui/react-collection": ["@radix-ui/react-collection@1.1.2", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-context": "1.1.1", "@radix-ui/react-primitive": "2.0.2", "@radix-ui/react-slot": "1.1.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-9z54IEKRxIa9VityapoEYMuByaG42iSy1ZXlY2KcuLSEtq8x4987/N6m15ppoMffgZX72gER2uHe1D9Y6Unlcw=="],
+
     "@radix-ui/react-menu/@radix-ui/react-compose-refs": ["@radix-ui/react-compose-refs@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw=="],
 
     "@radix-ui/react-menu/@radix-ui/react-direction": ["@radix-ui/react-direction@1.1.0", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg=="],
@@ -3448,8 +3449,6 @@
 
     "@radix-ui/react-menu/react-remove-scroll": ["react-remove-scroll@2.6.3", "", { "dependencies": { "react-remove-scroll-bar": "2.3.8", "react-style-singleton": "2.2.3", "tslib": "2.8.1", "use-callback-ref": "1.3.3", "use-sidecar": "1.1.3" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-pnAi91oOk8g8ABQKGF5/M9qxmmOPxaAnopyTHYfqYEwJhyFrbbBtHuSgtKEoH0jpcxx5o3hXqH1mNd9/Oi+8iQ=="],
 
-    "@radix-ui/react-navigation-menu/@radix-ui/react-collection": ["@radix-ui/react-collection@1.1.7", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw=="],
-
     "@radix-ui/react-navigation-menu/@radix-ui/react-context": ["@radix-ui/react-context@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA=="],
 
     "@radix-ui/react-navigation-menu/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
@@ -3460,8 +3459,6 @@
 
     "@radix-ui/react-navigation-menu/@radix-ui/react-use-previous": ["@radix-ui/react-use-previous@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ=="],
 
-    "@radix-ui/react-navigation-menu/@radix-ui/react-visually-hidden": ["@radix-ui/react-visually-hidden@1.2.3", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug=="],
-
     "@radix-ui/react-popover/@radix-ui/react-context": ["@radix-ui/react-context@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA=="],
 
     "@radix-ui/react-popover/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
@@ -3490,8 +3487,6 @@
 
     "@radix-ui/react-progress/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.0", "", { "dependencies": { "@radix-ui/react-slot": "1.2.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-/J/FhLdK0zVcILOwt5g+dH4KnkonCtkVJsa2G6JmvbbtZfBEI1gMsO3QMjseL4F/SwfAMt1Vc/0XKYKq+xJ1sw=="],
 
-    "@radix-ui/react-roving-focus/@radix-ui/react-collection": ["@radix-ui/react-collection@1.1.7", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw=="],
-
     "@radix-ui/react-roving-focus/@radix-ui/react-context": ["@radix-ui/react-context@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA=="],
 
     "@radix-ui/react-roving-focus/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
@@ -3506,8 +3501,6 @@
 
     "@radix-ui/react-scroll-area/@radix-ui/react-use-layout-effect": ["@radix-ui/react-use-layout-effect@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ=="],
 
-    "@radix-ui/react-select/@radix-ui/react-collection": ["@radix-ui/react-collection@1.1.7", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw=="],
-
     "@radix-ui/react-select/@radix-ui/react-context": ["@radix-ui/react-context@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA=="],
 
     "@radix-ui/react-select/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
@@ -3520,8 +3513,6 @@
 
     "@radix-ui/react-select/@radix-ui/react-use-previous": ["@radix-ui/react-use-previous@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ=="],
 
-    "@radix-ui/react-select/@radix-ui/react-visually-hidden": ["@radix-ui/react-visually-hidden@1.2.3", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug=="],
-
     "@radix-ui/react-select/react-remove-scroll": ["react-remove-scroll@2.6.3", "", { "dependencies": { "react-remove-scroll-bar": "2.3.8", "react-style-singleton": "2.2.3", "tslib": "2.8.1", "use-callback-ref": "1.3.3", "use-sidecar": "1.1.3" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-pnAi91oOk8g8ABQKGF5/M9qxmmOPxaAnopyTHYfqYEwJhyFrbbBtHuSgtKEoH0jpcxx5o3hXqH1mNd9/Oi+8iQ=="],
 
     "@radix-ui/react-switch/@radix-ui/primitive": ["@radix-ui/primitive@1.1.1", "", {}, "sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA=="],
@@ -3534,24 +3525,14 @@
 
     "@radix-ui/react-tabs/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
 
-    "@radix-ui/react-toast/@radix-ui/primitive": ["@radix-ui/primitive@1.1.1", "", {}, "sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA=="],
-
-    "@radix-ui/react-toast/@radix-ui/react-compose-refs": ["@radix-ui/react-compose-refs@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw=="],
-
-    "@radix-ui/react-toast/@radix-ui/react-dismissable-layer": ["@radix-ui/react-dismissable-layer@1.1.5", "", { "dependencies": { "@radix-ui/primitive": "1.1.1", "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-primitive": "2.0.2", "@radix-ui/react-use-callback-ref": "1.1.0", "@radix-ui/react-use-escape-keydown": "1.1.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-E4TywXY6UsXNRhFrECa5HAvE5/4BFcGyfTyK36gP+pAW1ed7UTK4vKwdr53gAJYwqbfCWC6ATvJa3J3R/9+Qrg=="],
-
-    "@radix-ui/react-toast/@radix-ui/react-portal": ["@radix-ui/react-portal@1.1.4", "", { "dependencies": { "@radix-ui/react-primitive": "2.0.2", "@radix-ui/react-use-layout-effect": "1.1.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-sn2O9k1rPFYVyKd5LAJfo96JlSGVFpa1fS6UuBJfrZadudiw5tAmru+n1x7aMRQ84qDM71Zh1+SzK5QwU0tJfA=="],
-
-    "@radix-ui/react-toast/@radix-ui/react-presence": ["@radix-ui/react-presence@1.1.2", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-use-layout-effect": "1.1.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-18TFr80t5EVgL9x1SwF/YGtfG+l0BS0PRAlCWBDoBEiDQjeKgnNZRVJp/oVBl24sr3Gbfwc/Qpj4OcWTQMsAEg=="],
-
-    "@radix-ui/react-toast/@radix-ui/react-use-controllable-state": ["@radix-ui/react-use-controllable-state@1.1.0", "", { "dependencies": { "@radix-ui/react-use-callback-ref": "1.1.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw=="],
-
     "@radix-ui/react-use-controllable-state/@radix-ui/react-use-layout-effect": ["@radix-ui/react-use-layout-effect@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ=="],
 
     "@radix-ui/react-use-effect-event/@radix-ui/react-use-layout-effect": ["@radix-ui/react-use-layout-effect@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ=="],
 
     "@radix-ui/react-use-escape-keydown/@radix-ui/react-use-callback-ref": ["@radix-ui/react-use-callback-ref@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg=="],
 
+    "@radix-ui/react-visually-hidden/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+
     "@scalar/openapi-types/zod": ["zod@4.3.6", "", {}, "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg=="],
 
     "@tailwindcss/node/jiti": ["jiti@2.4.2", "", { "bin": { "jiti": "lib/jiti-cli.mjs" } }, "sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A=="],
@@ -4142,8 +4123,6 @@
 
     "@modelcontextprotocol/sdk/express/type-is": ["type-is@2.1.0", "", { "dependencies": { "content-type": "2.0.0", "media-typer": "1.1.0", "mime-types": "3.0.2" } }, "sha512-faYHw0anBbc/kWF3zFTEnxSFOAGUX9GFbOBthvDdLsIlEoWOFOtS0zgCiQYwIskL9iGXZL3kAXD8OoZ4GmMATA=="],
 
-    "@radix-ui/react-accordion/@radix-ui/react-collection/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
-
     "@radix-ui/react-accordion/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
 
     "@radix-ui/react-arrow/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
@@ -4164,8 +4143,6 @@
 
     "@radix-ui/react-menu/@radix-ui/react-roving-focus/@radix-ui/react-use-controllable-state": ["@radix-ui/react-use-controllable-state@1.1.0", "", { "dependencies": { "@radix-ui/react-use-callback-ref": "1.1.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw=="],
 
-    "@radix-ui/react-navigation-menu/@radix-ui/react-collection/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
-
     "@radix-ui/react-navigation-menu/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
 
     "@radix-ui/react-popper/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
@@ -4176,15 +4153,13 @@
 
     "@radix-ui/react-progress/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.0", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-ujc+V6r0HNDviYqIK3rW4ffgYiZ8g5DEHrGJVk4x7kTlLXRDILnKX9vAUYeIsLOoDpDJ0ujpqMkjH4w2ofuo6w=="],
 
-    "@radix-ui/react-roving-focus/@radix-ui/react-collection/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
-
     "@radix-ui/react-roving-focus/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
 
     "@radix-ui/react-scroll-area/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
 
     "@radix-ui/react-tabs/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
 
-    "@radix-ui/react-toast/@radix-ui/react-dismissable-layer/@radix-ui/react-use-escape-keydown": ["@radix-ui/react-use-escape-keydown@1.1.0", "", { "dependencies": { "@radix-ui/react-use-callback-ref": "1.1.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw=="],
+    "@radix-ui/react-visually-hidden/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
 
     "@types/babel__core/@babel/types/@babel/helper-string-parser": ["@babel/helper-string-parser@7.25.9", "", {}, "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA=="],