diff --git a/web-admin/src/features/admin/billing/selectors.ts b/web-admin/src/features/admin/billing/selectors.ts
new file mode 100644
index 00000000000..34effd26dca
--- /dev/null
+++ b/web-admin/src/features/admin/billing/selectors.ts
@@ -0,0 +1,41 @@
+// web-admin/src/features/admin/billing/selectors.ts
+import {
+  adminServiceGetPaymentsPortalURL,
+  createAdminServiceSudoExtendTrial,
+  createAdminServiceSudoTriggerBillingRepair,
+  createAdminServiceSudoDeleteOrganizationBillingIssue,
+  createAdminServiceSudoUpdateOrganizationBillingCustomer,
+  createAdminServiceListOrganizationBillingIssues,
+} from "@rilldata/web-admin/client";
+
+export async function getBillingSetupURL(org: string): Promise<string> {
+  const resp = await adminServiceGetPaymentsPortalURL(org, {
+    setup: true,
+    superuserForceAccess: true,
+  });
+  return resp.url ?? "";
+}
+
+export function createExtendTrialMutation() {
+  return createAdminServiceSudoExtendTrial();
+}
+
+export function createBillingRepairMutation() {
+  return createAdminServiceSudoTriggerBillingRepair();
+}
+
+export function createDeleteBillingIssueMutation() {
+  return createAdminServiceSudoDeleteOrganizationBillingIssue();
+}
+
+export function createSetBillingCustomerMutation() {
+  return createAdminServiceSudoUpdateOrganizationBillingCustomer();
+}
+
+export function getBillingIssues(org: string) {
+  return createAdminServiceListOrganizationBillingIssues(
+    org,
+    { superuserForceAccess: true },
+    { query: { enabled: org.length > 0 } },
+  );
+}
diff --git a/web-admin/src/features/admin/layout/AdminPageHeader.svelte b/web-admin/src/features/admin/layout/AdminPageHeader.svelte
new file mode 100644
index 00000000000..da7eb7bfdce
--- /dev/null
+++ b/web-admin/src/features/admin/layout/AdminPageHeader.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+  export let title: string;
+  export let description: string = "";
+</script>
+
+<div class="mb-6">
+  <h1 class="text-xl font-semibold text-slate-900">
+    {title}
+  </h1>
+  {#if description}
+    <p class="text-sm text-slate-500 mt-1">
+      {description}
+    </p>
+  {/if}
+</div>
diff --git a/web-admin/src/features/admin/layout/AdminSidebar.svelte b/web-admin/src/features/admin/layout/AdminSidebar.svelte
new file mode 100644
index 00000000000..2de43af91ee
--- /dev/null
+++ b/web-admin/src/features/admin/layout/AdminSidebar.svelte
@@ -0,0 +1,68 @@
+<!-- web-admin/src/features/admin/layout/AdminSidebar.svelte -->
+<script lang="ts">
+  import { page } from "$app/stores";
+
+  const navGroups = [
+    {
+      heading: "People",
+      items: [
+        { label: "Users", href: "/-/admin" },
+        { label: "Superusers", href: "/-/admin/superusers" },
+      ],
+    },
+    {
+      heading: "Billing & Plans",
+      items: [
+        { label: "Billing", href: "/-/admin/billing" },
+        { label: "Quotas", href: "/-/admin/quotas" },
+      ],
+    },
+    {
+      heading: "Resources",
+      items: [
+        { label: "Organizations", href: "/-/admin/organizations" },
+        { label: "Projects", href: "/-/admin/projects" },
+      ],
+    },
+  ];
+
+  function isActive(href: string, pathname: string): boolean {
+    if (href === "/-/admin") return pathname === "/-/admin";
+    return pathname.startsWith(href);
+  }
+</script>
+
+<nav
+  class="w-56 flex-shrink-0 border-r border-slate-200 bg-slate-50 flex flex-col h-full"
+>
+  <div class="px-4 py-4 border-b border-slate-200">
+    <span class="text-sm font-semibold text-slate-900">
+      Admin Console
+    </span>
+  </div>
+
+  <div class="flex-1 overflow-y-auto py-3 px-3">
+    {#each navGroups as group}
+      <div class="mb-4">
+        <span
+          class="text-[11px] font-semibold uppercase tracking-wider text-slate-400 px-2 mb-1 block"
+        >
+          {group.heading}
+        </span>
+        {#each group.items as item}
+          <a
+            href={item.href}
+            class="block px-2 py-1.5 text-sm rounded-md transition-colors {isActive(
+              item.href,
+              $page.url.pathname,
+            )
+              ? 'bg-slate-100 text-slate-900 font-medium'
+              : 'text-slate-600 hover:bg-slate-100'}"
+          >
+            {item.label}
+          </a>
+        {/each}
+      </div>
+    {/each}
+  </div>
+</nav>
diff --git a/web-admin/src/features/admin/organizations/selectors.ts b/web-admin/src/features/admin/organizations/selectors.ts
new file mode 100644
index 00000000000..0e0d25046f9
--- /dev/null
+++ b/web-admin/src/features/admin/organizations/selectors.ts
@@ -0,0 +1,39 @@
+// web-admin/src/features/admin/organizations/selectors.ts
+import {
+  createAdminServiceGetOrganization,
+  createAdminServiceListOrganizationMemberUsers,
+  createAdminServiceListProjectsForOrganization,
+  createAdminServiceSearchProjectNames,
+} from "@rilldata/web-admin/client";
+
+export function getOrganization(org: string) {
+  return createAdminServiceGetOrganization(
+    org,
+    { superuserForceAccess: true },
+    { query: { enabled: org.length > 0 } },
+  );
+}
+
+export function getOrgMembers(org: string) {
+  return createAdminServiceListOrganizationMemberUsers(
+    org,
+    { superuserForceAccess: true },
+    { query: { enabled: org.length > 0 } },
+  );
+}
+
+export function getOrgProjects(org: string) {
+  return createAdminServiceListProjectsForOrganization(
+    org,
+    {},
+    { query: { enabled: org.length > 0 } },
+  );
+}
+
+// Search for org names by searching project paths (org/project) and extracting unique org names
+export function searchOrgNames(query: string) {
+  return createAdminServiceSearchProjectNames(
+    { namePattern: `%${query}%/%`, pageSize: 100 },
+    { query: { enabled: query.length >= 3 } },
+  );
+}
diff --git a/web-admin/src/features/admin/projects/selectors.ts b/web-admin/src/features/admin/projects/selectors.ts
new file mode 100644
index 00000000000..b1c2595ab1c
--- /dev/null
+++ b/web-admin/src/features/admin/projects/selectors.ts
@@ -0,0 +1,31 @@
+// web-admin/src/features/admin/projects/selectors.ts
+import {
+  createAdminServiceSearchProjectNames,
+  createAdminServiceGetProject,
+  createAdminServiceUpdateProject,
+  createAdminServiceRedeployProject,
+  createAdminServiceHibernateProject,
+} from "@rilldata/web-admin/client";
+
+export function searchProjects(namePattern: string) {
+  return createAdminServiceSearchProjectNames(
+    { namePattern: `%${namePattern}%`, pageSize: 50 },
+    { query: { enabled: namePattern.length >= 3 } },
+  );
+}
+
+export function getProject(org: string, project: string) {
+  return createAdminServiceGetProject(org, project);
+}
+
+export function createUpdateProjectMutation() {
+  return createAdminServiceUpdateProject();
+}
+
+export function createRedeployProjectMutation() {
+  return createAdminServiceRedeployProject();
+}
+
+export function createHibernateProjectMutation() {
+  return createAdminServiceHibernateProject();
+}
diff --git a/web-admin/src/features/admin/quotas/selectors.ts b/web-admin/src/features/admin/quotas/selectors.ts
new file mode 100644
index 00000000000..86220b40870
--- /dev/null
+++ b/web-admin/src/features/admin/quotas/selectors.ts
@@ -0,0 +1,17 @@
+// web-admin/src/features/admin/quotas/selectors.ts
+import {
+  createAdminServiceGetOrganization,
+  createAdminServiceSudoUpdateOrganizationQuotas,
+} from "@rilldata/web-admin/client";
+
+export function getOrgForQuotas(org: string) {
+  return createAdminServiceGetOrganization(
+    org,
+    { superuserForceAccess: true },
+    { query: { enabled: org.length > 0 } },
+  );
+}
+
+export function createUpdateOrgQuotasMutation() {
+  return createAdminServiceSudoUpdateOrganizationQuotas();
+}
diff --git a/web-admin/src/features/admin/shared/ConfirmDialog.svelte b/web-admin/src/features/admin/shared/ConfirmDialog.svelte
new file mode 100644
index 00000000000..50a8b869dbd
--- /dev/null
+++ b/web-admin/src/features/admin/shared/ConfirmDialog.svelte
@@ -0,0 +1,71 @@
+<!-- web-admin/src/features/admin/shared/ConfirmDialog.svelte -->
+<script lang="ts">
+  export let open = false;
+  export let title: string;
+  export let description: string = "";
+  export let confirmLabel: string = "Confirm";
+  export let cancelLabel: string = "Cancel";
+  export let destructive: boolean = false;
+
+  let loading = false;
+
+  async function handleConfirm() {
+    loading = true;
+    try {
+      await onConfirm();
+      open = false;
+    } catch {
+      // Error handling is the caller's responsibility (via notifyError in onConfirm).
+      // Keep dialog open so the user can retry or cancel.
+    } finally {
+      loading = false;
+    }
+  }
+
+  function handleCancel() {
+    open = false;
+  }
+
+  export let onConfirm: () => void | Promise<void>;
+</script>
+
+{#if open}
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <div
+    class="fixed inset-0 bg-black/50 flex items-center justify-center z-50"
+    on:click={handleCancel}
+  >
+    <div
+      class="bg-slate-50 rounded-lg p-6 max-w-md w-full mx-4 shadow-xl"
+      on:click|stopPropagation
+    >
+      <h2 class="text-lg font-semibold text-slate-900">
+        {title}
+      </h2>
+      {#if description}
+        <p class="text-sm text-slate-500 mt-2">
+          {description}
+        </p>
+      {/if}
+      <div class="flex justify-end gap-3 mt-6">
+        <button
+          class="px-4 py-2 text-sm rounded-md border border-slate-300 text-slate-700 hover:bg-slate-50 disabled:opacity-50 disabled:cursor-not-allowed"
+          on:click={handleCancel}
+          disabled={loading}
+        >
+          {cancelLabel}
+        </button>
+        <button
+          class="px-4 py-2 text-sm rounded-md text-white disabled:opacity-50 disabled:cursor-not-allowed {destructive
+            ? 'bg-red-600 hover:bg-red-700'
+            : 'bg-blue-600 hover:bg-blue-700'}"
+          on:click={handleConfirm}
+          disabled={loading}
+        >
+          {#if loading}Working...{:else}{confirmLabel}{/if}
+        </button>
+      </div>
+    </div>
+  </div>
+{/if}
diff --git a/web-admin/src/features/admin/shared/OrgSearchInput.svelte b/web-admin/src/features/admin/shared/OrgSearchInput.svelte
new file mode 100644
index 00000000000..3c55936d734
--- /dev/null
+++ b/web-admin/src/features/admin/shared/OrgSearchInput.svelte
@@ -0,0 +1,92 @@
+<!-- Org name input with search dropdown powered by project name search -->
+<script lang="ts">
+  import { createEventDispatcher } from "svelte";
+  import { searchOrgNames } from "@rilldata/web-admin/features/admin/organizations/selectors";
+
+  export let value = "";
+  export let placeholder = "Organization name";
+
+  const dispatch = createEventDispatcher<{ select: string }>();
+
+  let showDropdown = false;
+  let justSelected = false;
+
+  $: orgSearchQuery = searchOrgNames(value);
+  $: orgNames = extractUniqueOrgs($orgSearchQuery.data?.names ?? []);
+
+  function extractUniqueOrgs(projectPaths: string[]): string[] {
+    const orgs = new Set<string>();
+    for (const path of projectPaths) {
+      const org = path.split("/")[0];
+      if (org) orgs.add(org);
+    }
+    return [...orgs].sort();
+  }
+
+  function selectOrg(org: string) {
+    value = org;
+    showDropdown = false;
+    justSelected = true;
+    dispatch("select", org);
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === "Enter") {
+      showDropdown = false;
+      justSelected = true;
+      dispatch("select", value);
+    }
+  }
+
+  function handleInput() {
+    justSelected = false;
+    if (value.length >= 3) {
+      showDropdown = true;
+    } else {
+      showDropdown = false;
+    }
+  }
+
+  function handleBlur() {
+    // Delay to allow mousedown on dropdown items to fire first
+    setTimeout(() => {
+      showDropdown = false;
+    }, 150);
+  }
+
+  // When new results arrive, show dropdown only if user is actively typing
+  $: if (orgNames.length > 0 && value.length >= 3 && !justSelected) {
+    showDropdown = true;
+  }
+</script>
+
+<div class="relative">
+  <input
+    type="text"
+    class="w-full px-3 py-2 text-sm rounded-md border border-slate-300 bg-slate-50 text-slate-900 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+    {placeholder}
+    bind:value
+    on:keydown={handleKeydown}
+    on:input={handleInput}
+    on:blur={handleBlur}
+  />
+  {#if $orgSearchQuery.isFetching && value.length >= 3}
+    <div
+      class="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 border-2 border-slate-300 border-t-blue-600 rounded-full animate-spin"
+    />
+  {/if}
+  {#if showDropdown && orgNames.length > 0}
+    <div
+      class="absolute z-10 w-full mt-1 bg-slate-50 border border-slate-200 rounded-md shadow-lg max-h-48 overflow-y-auto"
+    >
+      {#each orgNames as org}
+        <button
+          class="w-full text-left px-3 py-2 text-sm text-slate-700 hover:bg-slate-100 cursor-pointer"
+          on:mousedown|preventDefault={() => selectOrg(org)}
+        >
+          {org}
+        </button>
+      {/each}
+    </div>
+  {/if}
+</div>
diff --git a/web-admin/src/features/admin/shared/SearchInput.svelte b/web-admin/src/features/admin/shared/SearchInput.svelte
new file mode 100644
index 00000000000..518f542158e
--- /dev/null
+++ b/web-admin/src/features/admin/shared/SearchInput.svelte
@@ -0,0 +1,37 @@
+<!-- web-admin/src/features/admin/shared/SearchInput.svelte -->
+<script lang="ts">
+  import { createEventDispatcher } from "svelte";
+
+  export let placeholder: string = "Search...";
+  export let value: string = "";
+  export let debounceMs: number = 300;
+
+  const dispatch = createEventDispatcher<{ search: string }>();
+
+  let timeout: ReturnType<typeof setTimeout>;
+
+  function handleInput(e: Event) {
+    const target = e.target as HTMLInputElement;
+    value = target.value;
+    clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      dispatch("search", value);
+    }, debounceMs);
+  }
+
+  function handleSubmit() {
+    clearTimeout(timeout);
+    dispatch("search", value);
+  }
+</script>
+
+<div class="relative">
+  <input
+    type="text"
+    class="w-full px-3 py-2 text-sm rounded-md border border-slate-300 bg-slate-50 text-slate-900 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+    {placeholder}
+    {value}
+    on:input={handleInput}
+    on:keydown={(e) => e.key === "Enter" && handleSubmit()}
+  />
+</div>
diff --git a/web-admin/src/features/admin/shared/UserSearchInput.svelte b/web-admin/src/features/admin/shared/UserSearchInput.svelte
new file mode 100644
index 00000000000..2ad5c147cd7
--- /dev/null
+++ b/web-admin/src/features/admin/shared/UserSearchInput.svelte
@@ -0,0 +1,81 @@
+<!-- User email input with search dropdown powered by user search -->
+<script lang="ts">
+  import { createEventDispatcher } from "svelte";
+  import { searchUsers } from "@rilldata/web-admin/features/admin/users/selectors";
+
+  export let value = "";
+  export let placeholder = "Search by email...";
+
+  const dispatch = createEventDispatcher<{ select: string }>();
+
+  let showDropdown = false;
+  let justSelected = false;
+
+  $: usersQuery = searchUsers(value);
+  $: emails = ($usersQuery.data?.users ?? []).map((u) => u.email ?? "").filter(Boolean);
+
+  function selectUser(email: string) {
+    value = email;
+    showDropdown = false;
+    justSelected = true;
+    dispatch("select", email);
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === "Enter") {
+      showDropdown = false;
+      justSelected = true;
+      dispatch("select", value);
+    }
+  }
+
+  function handleInput() {
+    justSelected = false;
+    if (value.length >= 3) {
+      showDropdown = true;
+    } else {
+      showDropdown = false;
+    }
+  }
+
+  function handleBlur() {
+    setTimeout(() => {
+      showDropdown = false;
+    }, 150);
+  }
+
+  $: if (emails.length > 0 && value.length >= 3 && !justSelected) {
+    showDropdown = true;
+  }
+</script>
+
+<div class="relative">
+  <input
+    type="text"
+    class="w-full px-3 py-2 text-sm rounded-md border border-slate-300 bg-slate-50 text-slate-900 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+    {placeholder}
+    bind:value
+    on:keydown={handleKeydown}
+    on:input={handleInput}
+    on:blur={handleBlur}
+  />
+  {#if $usersQuery.isFetching && value.length >= 3}
+    <div
+      class="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 border-2 border-slate-300 border-t-blue-600 rounded-full animate-spin"
+    />
+  {/if}
+  {#if showDropdown && emails.length > 0}
+    <div
+      class="absolute z-10 w-full mt-1 bg-slate-50 border border-slate-200 rounded-md shadow-lg max-h-48 overflow-y-auto"
+    >
+      {#each emails as email}
+        <button
+          class="w-full text-left px-3 py-2 text-sm text-slate-700 hover:bg-slate-100 cursor-pointer"
+          on:mousedown|preventDefault={() => selectUser(email)}
+        >
+          {email}
+        </button>
+      {/each}
+    </div>
+  {/if}
+</div>
diff --git a/web-admin/src/features/admin/shared/notify.ts b/web-admin/src/features/admin/shared/notify.ts
new file mode 100644
index 00000000000..515ed09b97b
--- /dev/null
+++ b/web-admin/src/features/admin/shared/notify.ts
@@ -0,0 +1,9 @@
+import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus";
+
+export function notifySuccess(message: string) {
+  eventBus.emit("notification", { type: "success", message });
+}
+
+export function notifyError(message: string) {
+  eventBus.emit("notification", { type: "error", message });
+}
diff --git a/web-admin/src/features/admin/users/RepresentingBanner.svelte b/web-admin/src/features/admin/users/RepresentingBanner.svelte
new file mode 100644
index 00000000000..a834fdd734c
--- /dev/null
+++ b/web-admin/src/features/admin/users/RepresentingBanner.svelte
@@ -0,0 +1,50 @@
+<!-- Shows a persistent banner when browsing as another user (assumed state) -->
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { browser } from "$app/environment";
+  import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus";
+  import { STORAGE_KEY } from "@rilldata/web-admin/features/admin/users/assume-state";
+  import { ADMIN_URL } from "@rilldata/web-admin/client/http-client";
+
+  const BANNER_ID = "representing-user";
+
+  function appendPath(path: string, suffix: string) {
+    return `${path.replace(/\/$/, "")}/${suffix}`;
+  }
+
+  function unassume() {
+    if (browser) sessionStorage.removeItem(STORAGE_KEY);
+    eventBus.emit("remove-banner", BANNER_ID);
+    // Redirect to login; the auth provider session is the real superuser,
+    // so it auto-completes and issues a fresh superuser token.
+    const u = new URL(ADMIN_URL);
+    u.pathname = appendPath(u.pathname, "auth/login");
+    u.searchParams.set("redirect", window.location.origin);
+    window.location.href = u.toString();
+  }
+
+  function showBanner(email: string) {
+    eventBus.emit("add-banner", {
+      id: BANNER_ID,
+      priority: 0,
+      message: {
+        type: "warning",
+        message: `Browsing as <strong>${email}</strong>`,
+        includesHtml: true,
+        iconType: "alert",
+        cta: {
+          text: "Unassume",
+          type: "button",
+          onClick: unassume,
+        },
+      },
+    });
+  }
+
+  onMount(() => {
+    const stored = sessionStorage.getItem(STORAGE_KEY);
+    if (stored) {
+      showBanner(stored);
+    }
+  });
+</script>
diff --git a/web-admin/src/features/admin/users/assume-state.ts b/web-admin/src/features/admin/users/assume-state.ts
new file mode 100644
index 00000000000..a770d05bc1a
--- /dev/null
+++ b/web-admin/src/features/admin/users/assume-state.ts
@@ -0,0 +1,53 @@
+// Manages assume/unassume user state for the admin console.
+// Uses sessionStorage to track the assumed user across navigations,
+// and server-side auth endpoints for cookie management.
+import { writable } from "svelte/store";
+import { browser } from "$app/environment";
+import { ADMIN_URL } from "@rilldata/web-admin/client/http-client";
+
+export const STORAGE_KEY = "rill-representing-user";
+
+function appendPath(path: string, suffix: string) {
+  return `${path.replace(/\/$/, "")}/${suffix}`;
+}
+
+// Store tracks the currently assumed user email
+const initial = browser ? sessionStorage.getItem(STORAGE_KEY) ?? "" : "";
+const { subscribe, set } = writable(initial);
+
+export const assumedUser = {
+  subscribe,
+
+  /**
+   * Navigates to Rill Cloud as the given user in the current tab.
+   * Stores the email in sessionStorage so the banner knows who we're browsing as.
+   */
+  assume(email: string, ttlMinutes = 60) {
+    set(email);
+    if (browser) sessionStorage.setItem(STORAGE_KEY, email);
+
+    const u = new URL(ADMIN_URL);
+    u.pathname = appendPath(u.pathname, "auth/assume-open");
+    u.searchParams.set("representing_user", email);
+    u.searchParams.set("ttl_minutes", String(ttlMinutes));
+    window.location.href = u.toString();
+  },
+
+  /**
+   * Reverts to the original superuser session.
+   * Redirects to /auth/login which re-authenticates through the auth provider.
+   * Since the superuser's auth provider session is still active, this auto-completes
+   * and issues a fresh superuser cookie, effectively "unassuming".
+   */
+  unassume() {
+    set("");
+    if (browser) sessionStorage.removeItem(STORAGE_KEY);
+
+    // Redirect to login; the auth provider (Auth0) session is the real superuser,
+    // so it auto-completes and issues a fresh superuser token.
+    const u = new URL(ADMIN_URL);
+    u.pathname = appendPath(u.pathname, "auth/login");
+    u.searchParams.set("redirect", window.location.origin);
+    window.location.href = u.toString();
+  },
+};
diff --git a/web-admin/src/features/admin/users/selectors.ts b/web-admin/src/features/admin/users/selectors.ts
new file mode 100644
index 00000000000..e72ea26636d
--- /dev/null
+++ b/web-admin/src/features/admin/users/selectors.ts
@@ -0,0 +1,16 @@
+// web-admin/src/features/admin/users/selectors.ts
+import {
+  createAdminServiceSearchUsers,
+  createAdminServiceDeleteUser,
+} from "@rilldata/web-admin/client";
+
+export function searchUsers(emailPattern: string) {
+  return createAdminServiceSearchUsers(
+    { emailPattern: `%${emailPattern}%` },
+    { query: { enabled: emailPattern.length >= 3 } },
+  );
+}
+
+export function createDeleteUserMutation() {
+  return createAdminServiceDeleteUser();
+}
diff --git a/web-admin/src/features/authentication/AvatarButton.svelte b/web-admin/src/features/authentication/AvatarButton.svelte
index 95dc0bb5d04..5fe56042474 100644
--- a/web-admin/src/features/authentication/AvatarButton.svelte
+++ b/web-admin/src/features/authentication/AvatarButton.svelte
@@ -22,12 +22,22 @@
     type UserLike,
   } from "@rilldata/web-common/features/help/initPylonChat";
   import { posthogIdentify } from "@rilldata/web-common/lib/analytics/posthog";
-  import { createAdminServiceGetCurrentUser } from "../../client";
+  import {
+    createAdminServiceGetCurrentUser,
+    createAdminServiceListSuperusers,
+  } from "../../client";
   import ProjectAccessControls from "../projects/ProjectAccessControls.svelte";
   import ViewAsUserPopover from "../view-as-user/ViewAsUserPopover.svelte";
   import ThemeToggle from "@rilldata/web-common/features/themes/ThemeToggle.svelte";
 
   const user = createAdminServiceGetCurrentUser();
+  const superusers = createAdminServiceListSuperusers();
+  $: isSuperuser =
+    $superusers.isSuccess &&
+    !!$user.data?.user?.email &&
+    ($superusers.data?.users ?? []).some(
+      (su) => su.email === $user.data?.user?.email,
+    );
 
   let imgContainer: HTMLElement;
   let primaryMenuOpen = false;
@@ -126,6 +136,11 @@
       {/if}
     {/if}
 
+    {#if isSuperuser}
+      <DropdownMenu.Item href="/-/admin">Admin Console</DropdownMenu.Item>
+      <DropdownMenu.Separator />
+    {/if}
+
     <ThemeToggle />
     <DropdownMenu.Separator />
 
diff --git a/web-admin/src/routes/+layout.svelte b/web-admin/src/routes/+layout.svelte
index 76ba904d827..63c863532ad 100644
--- a/web-admin/src/routes/+layout.svelte
+++ b/web-admin/src/routes/+layout.svelte
@@ -5,6 +5,7 @@
   import { createUserFacingError } from "@rilldata/web-admin/components/errors/user-facing-errors";
   import { dynamicHeight } from "@rilldata/web-common/layout/layout-settings.ts";
   import BillingBannerManager from "@rilldata/web-admin/features/billing/banner/BillingBannerManager.svelte";
+  import RepresentingBanner from "@rilldata/web-admin/features/admin/users/RepresentingBanner.svelte";
   import {
     isBillingUpgradePage,
     isProjectInvitePage,
@@ -144,6 +145,7 @@
     use:pageContentSizeHandler
   >
     <BannerCenter />
+    <RepresentingBanner />
     {#if !hideBillingManager}
       <BillingBannerManager {organization} {organizationPermissions} />
     {/if}
diff --git a/web-admin/src/routes/-/admin/+layout.svelte b/web-admin/src/routes/-/admin/+layout.svelte
new file mode 100644
index 00000000000..5636b2c3a6c
--- /dev/null
+++ b/web-admin/src/routes/-/admin/+layout.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+  import AdminSidebar from "@rilldata/web-admin/features/admin/layout/AdminSidebar.svelte";
+</script>
+
+<svelte:head>
+  <title>Admin Console | Rill</title>
+</svelte:head>
+
+<div class="flex h-screen overflow-hidden bg-slate-50">
+  <AdminSidebar />
+  <div class="flex-1 overflow-y-auto p-8 bg-slate-50">
+    <slot />
+  </div>
+</div>
diff --git a/web-admin/src/routes/-/admin/+layout.ts b/web-admin/src/routes/-/admin/+layout.ts
new file mode 100644
index 00000000000..7dd63351c0b
--- /dev/null
+++ b/web-admin/src/routes/-/admin/+layout.ts
@@ -0,0 +1,64 @@
+// web-admin/src/routes/-/admin/+layout.ts
+import {
+  adminServiceGetCurrentUser,
+  adminServiceListSuperusers,
+  getAdminServiceGetCurrentUserQueryKey,
+  getAdminServiceListSuperusersQueryKey,
+  type V1GetCurrentUserResponse,
+  type V1ListSuperusersResponse,
+} from "@rilldata/web-admin/client";
+import { redirectToLogin } from "@rilldata/web-admin/client/redirect-utils";
+import { queryClient } from "@rilldata/web-common/lib/svelte-query/globalQueryClient";
+import { redirect } from "@sveltejs/kit";
+import { isAxiosError } from "axios";
+
+export const load = async () => {
+  // Get current user
+  let currentUserEmail: string | undefined;
+  try {
+    const userResp = await queryClient.fetchQuery<V1GetCurrentUserResponse>({
+      queryKey: getAdminServiceGetCurrentUserQueryKey(),
+      queryFn: () => adminServiceGetCurrentUser(),
+      staleTime: 5 * 60 * 1000,
+    });
+    currentUserEmail = userResp.user?.email;
+  } catch (e) {
+    if (isAxiosError(e) && e.response?.status === 401) {
+      // redirectToLogin() throws a SvelteKit redirect internally.
+      // It's safe to call here; the redirect propagates out of the catch block.
+      redirectToLogin();
+    }
+    throw redirect(307, "/");
+  }
+
+  if (!currentUserEmail) {
+    throw redirect(307, "/");
+  }
+
+  // Check if current user is a superuser
+  try {
+    const superusersResp =
+      await queryClient.fetchQuery<V1ListSuperusersResponse>({
+        queryKey: getAdminServiceListSuperusersQueryKey(),
+        queryFn: () => adminServiceListSuperusers(),
+        staleTime: 5 * 60 * 1000,
+      });
+
+    const isSuperuser = superusersResp.users?.some(
+      (u) => u.email === currentUserEmail,
+    );
+
+    if (!isSuperuser) {
+      throw redirect(307, "/");
+    }
+  } catch (e) {
+    // ListSuperusers itself will 403 if not a superuser
+    if (isAxiosError(e) && e.response?.status === 403) {
+      throw redirect(307, "/");
+    }
+    // Re-throw SvelteKit redirects
+    throw e;
+  }
+
+  return { currentUserEmail };
+};
diff --git a/web-admin/src/routes/-/admin/+page.svelte b/web-admin/src/routes/-/admin/+page.svelte
new file mode 100644
index 00000000000..056c969bad2
--- /dev/null
+++ b/web-admin/src/routes/-/admin/+page.svelte
@@ -0,0 +1,207 @@
+<script lang="ts">
+  import AdminPageHeader from "@rilldata/web-admin/features/admin/layout/AdminPageHeader.svelte";
+  import SearchInput from "@rilldata/web-admin/features/admin/shared/SearchInput.svelte";
+  import ConfirmDialog from "@rilldata/web-admin/features/admin/shared/ConfirmDialog.svelte";
+  import {
+    notifySuccess,
+    notifyError,
+  } from "@rilldata/web-admin/features/admin/shared/notify";
+  import {
+    searchUsers,
+    createDeleteUserMutation,
+  } from "@rilldata/web-admin/features/admin/users/selectors";
+  import { assumedUser } from "@rilldata/web-admin/features/admin/users/assume-state";
+  import { useQueryClient } from "@tanstack/svelte-query";
+
+  let searchQuery = "";
+  let confirmOpen = false;
+  let confirmTitle = "";
+  let confirmDescription = "";
+  let confirmDestructive = false;
+  let confirmAction: () => Promise<void> = async () => {};
+  let actionInProgress = "";
+
+  const queryClient = useQueryClient();
+  const deleteUser = createDeleteUserMutation();
+
+  $: usersQuery = searchUsers(searchQuery);
+
+  function handleSearch(e: CustomEvent<string>) {
+    searchQuery = e.detail;
+  }
+
+  function handleAssume(email: string) {
+    confirmTitle = "Open as User";
+    confirmDescription = `You will start browsing Rill Cloud as ${email}. The session will expire after 60 minutes. Use the banner to unassume when done.`;
+    confirmDestructive = false;
+    confirmAction = async () => {
+      // assume() navigates away via window.location.href, so no code after it runs
+      assumedUser.assume(email);
+    };
+    confirmOpen = true;
+  }
+
+  function handleUnassume() {
+    assumedUser.unassume();
+  }
+
+  function handleDelete(email: string) {
+    confirmTitle = "Delete User";
+    confirmDescription = `This will permanently delete the user ${email}. This action cannot be undone.`;
+    confirmDestructive = true;
+    confirmAction = async () => {
+      actionInProgress = `delete:${email}`;
+      try {
+        await $deleteUser.mutateAsync({
+          email,
+        });
+        notifySuccess(`User ${email} deleted`);
+        await queryClient.invalidateQueries({
+          predicate: (q) => q.queryKey[0] === "/v1/users/search",
+        });
+      } catch (err) {
+        notifyError(`Failed to delete user: ${err}`);
+      } finally {
+        actionInProgress = "";
+      }
+    };
+    confirmOpen = true;
+  }
+</script>
+
+<AdminPageHeader
+  title="Users"
+  description="Search for users by email across all organizations."
+/>
+
+{#if $assumedUser}
+  <div
+    class="flex items-center gap-3 mb-4 px-4 py-2 rounded-md bg-amber-50 border border-amber-200 text-amber-800 text-sm"
+  >
+    <span>Currently assumed as <strong>{$assumedUser}</strong></span>
+    <button
+      class="text-xs px-3 py-1 rounded border border-amber-400 bg-slate-50 text-amber-700 hover:bg-amber-50"
+      on:click={handleUnassume}
+    >
+      Unassume
+    </button>
+  </div>
+{/if}
+
+<div class="mb-4 max-w-md">
+  <SearchInput
+    placeholder="Search by email (min 3 characters)..."
+    on:search={handleSearch}
+  />
+</div>
+
+{#if $usersQuery.isFetching && searchQuery.length >= 3}
+  <div class="flex items-center gap-2 py-4">
+    <div
+      class="w-4 h-4 border-2 border-slate-300 border-t-blue-600 rounded-full animate-spin"
+    />
+    <span class="text-sm text-slate-500">Searching users...</span>
+  </div>
+{:else if $usersQuery.data?.users?.length}
+  <p class="text-xs text-slate-500 mb-2">
+    {$usersQuery.data.users.length} result{$usersQuery.data.users.length === 1
+      ? ""
+      : "s"}
+  </p>
+  <div class="rounded-lg border border-slate-200 overflow-hidden">
+    <table class="w-full border-collapse">
+      <thead>
+        <tr>
+          <th
+            class="text-left text-xs font-medium text-slate-500 uppercase tracking-wider px-4 py-2 border-b border-slate-200"
+          >
+            Email
+          </th>
+          <th
+            class="text-left text-xs font-medium text-slate-500 uppercase tracking-wider px-4 py-2 border-b border-slate-200"
+          >
+            Display Name
+          </th>
+          <th
+            class="text-left text-xs font-medium text-slate-500 uppercase tracking-wider px-4 py-2 border-b border-slate-200"
+          >
+            Created
+          </th>
+          <th
+            class="text-left text-xs font-medium text-slate-500 uppercase tracking-wider px-4 py-2 border-b border-slate-200"
+          >
+            Actions
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        {#each $usersQuery.data.users as user}
+          {@const isAssumed = $assumedUser === user.email}
+          <tr class="group">
+            <td
+              class="px-4 py-3 text-sm text-slate-700 border-b border-slate-100 group-hover:bg-slate-50 font-mono text-xs"
+            >
+              {user.email}
+            </td>
+            <td
+              class="px-4 py-3 text-sm text-slate-700 border-b border-slate-100 group-hover:bg-slate-50"
+            >
+              {user.displayName ?? "-"}
+            </td>
+            <td
+              class="px-4 py-3 text-sm text-slate-700 border-b border-slate-100 group-hover:bg-slate-50 text-xs text-slate-500"
+            >
+              {user.createdOn
+                ? new Date(user.createdOn).toLocaleDateString()
+                : "-"}
+            </td>
+            <td
+              class="px-4 py-3 text-sm text-slate-700 border-b border-slate-100 group-hover:bg-slate-50"
+            >
+              <div class="flex gap-2">
+                {#if isAssumed}
+                  <button
+                    class="text-xs px-2 py-1 rounded border border-amber-400 bg-amber-50 text-amber-700 hover:bg-amber-100"
+                    on:click={handleUnassume}
+                  >
+                    Unassume
+                  </button>
+                {:else}
+                  <button
+                    class="text-xs px-2 py-1 rounded border border-slate-300 text-slate-600 hover:bg-slate-100"
+                    on:click={() => handleAssume(user.email ?? "")}
+                  >
+                    Open as User
+                  </button>
+                {/if}
+                <button
+                  class="text-xs px-2 py-1 rounded border border-red-300 text-red-600 hover:bg-red-50 disabled:opacity-50 disabled:cursor-not-allowed"
+                  disabled={actionInProgress === `delete:${user.email}`}
+                  on:click={() => handleDelete(user.email ?? "")}
+                >
+                  {actionInProgress === `delete:${user.email}`
+                    ? "Deleting..."
+                    : "Delete"}
+                </button>
+              </div>
+            </td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  </div>
+{:else if searchQuery.length >= 3 && $usersQuery.isSuccess}
+  <p class="text-sm text-slate-500">No users found for "{searchQuery}"</p>
+{:else if searchQuery.length < 3}
+  <p class="text-sm text-slate-400">
+    Type at least 3 characters to search across all organizations.
+  </p>
+{/if}
+
+<ConfirmDialog
+  bind:open={confirmOpen}
+  title={confirmTitle}
+  description={confirmDescription}
+  destructive={confirmDestructive}
+  onConfirm={confirmAction}
+/>
diff --git a/web-admin/src/routes/-/admin/billing/+page.svelte b/web-admin/src/routes/-/admin/billing/+page.svelte
new file mode 100644
index 00000000000..3d5a3f4e619
--- /dev/null
+++ b/web-admin/src/routes/-/admin/billing/+page.svelte
@@ -0,0 +1,364 @@
+<script lang="ts">
+  import AdminPageHeader from "@rilldata/web-admin/features/admin/layout/AdminPageHeader.svelte";
+  import ConfirmDialog from "@rilldata/web-admin/features/admin/shared/ConfirmDialog.svelte";
+  import {
+    notifySuccess,
+    notifyError,
+  } from "@rilldata/web-admin/features/admin/shared/notify";
+  import OrgSearchInput from "@rilldata/web-admin/features/admin/shared/OrgSearchInput.svelte";
+  import type { V1BillingIssueType } from "@rilldata/web-admin/client";
+  import {
+    getBillingSetupURL,
+    createExtendTrialMutation,
+    createBillingRepairMutation,
+    createDeleteBillingIssueMutation,
+    createSetBillingCustomerMutation,
+    getBillingIssues,
+  } from "@rilldata/web-admin/features/admin/billing/selectors";
+  import { useQueryClient } from "@tanstack/svelte-query";
+
+  let confirmOpen = false;
+  let confirmTitle = "";
+  let confirmDescription = "";
+  let confirmAction: () => Promise<void> = async () => {};
+
+  // Billing Setup state
+  let setupOrg = "";
+  let setupLoading = false;
+  let setupUrl = "";
+
+  // Form state
+  let trialOrg = "";
+  let trialDays = 14;
+  let trialLoading = false;
+  let repairOrg = "";
+  let customerIdOrg = "";
+  let customerId = "";
+  let customerIdLoading = false;
+  let issuesOrg = "";
+
+  const queryClient = useQueryClient();
+  const extendTrial = createExtendTrialMutation();
+  const billingRepair = createBillingRepairMutation();
+  const deleteBillingIssue = createDeleteBillingIssueMutation();
+  const setCustomer = createSetBillingCustomerMutation();
+
+  $: billingIssuesQuery = getBillingIssues(issuesOrg);
+
+  async function handleBillingSetup() {
+    if (!setupOrg) return;
+    setupLoading = true;
+    setupUrl = "";
+    try {
+      const url = await getBillingSetupURL(setupOrg);
+      if (url) {
+        setupUrl = url;
+        notifySuccess( `Billing setup URL generated for ${setupOrg}`);
+      } else {
+        notifyError( "No URL returned; check the org name.");
+      }
+    } catch (err) {
+      notifyError( `Failed to generate billing setup URL: ${err}`);
+    } finally {
+      setupLoading = false;
+    }
+  }
+
+  async function handleExtendTrial() {
+    if (!trialOrg) return;
+    trialLoading = true;
+    try {
+      await $extendTrial.mutateAsync({
+        data: { org: trialOrg, days: trialDays },
+      });
+      notifySuccess(
+        `Trial extended by ${trialDays} days for ${trialOrg}`,
+      );
+      trialOrg = "";
+    } catch (err) {
+      notifyError( `Failed to extend trial: ${err}`);
+    } finally {
+      trialLoading = false;
+    }
+  }
+
+  async function handleBillingRepair() {
+    if (!repairOrg) return;
+    confirmTitle = "Trigger Billing Repair";
+    confirmDescription = `This will trigger a billing repair for organization "${repairOrg}". This recalculates billing state.`;
+    confirmAction = async () => {
+      try {
+        await $billingRepair.mutateAsync({ data: { org: repairOrg } });
+        notifySuccess( `Billing repair triggered for ${repairOrg}`);
+        repairOrg = "";
+      } catch (err) {
+        notifyError( `Failed to trigger billing repair: ${err}`);
+      }
+    };
+    confirmOpen = true;
+  }
+
+  async function handleSetCustomerId() {
+    if (!customerIdOrg || !customerId) return;
+    customerIdLoading = true;
+    try {
+      await $setCustomer.mutateAsync({
+        data: { org: customerIdOrg, billingCustomerId: customerId },
+      });
+      notifySuccess(
+        `Billing customer ID set for ${customerIdOrg}`,
+      );
+      customerIdOrg = "";
+      customerId = "";
+    } catch (err) {
+      notifyError( `Failed to set billing customer ID: ${err}`);
+    } finally {
+      customerIdLoading = false;
+    }
+  }
+
+  async function handleDeleteIssue(org: string, type: V1BillingIssueType) {
+    try {
+      await $deleteBillingIssue.mutateAsync({ org, type });
+      notifySuccess( `Billing issue "${type}" deleted for ${org}`);
+      await queryClient.invalidateQueries({
+        predicate: (q) =>
+          (q.queryKey[0] as string)?.includes("/v1/organizations") ||
+          (q.queryKey[0] as string)?.includes("/v1/superuser/billing"),
+      });
+    } catch (err) {
+      notifyError( `Failed to delete billing issue: ${err}`);
+    }
+  }
+</script>
+
+<AdminPageHeader
+  title="Billing"
+  description="Generate billing setup links, extend trials, repair billing state, and manage billing issues."
+/>
+
+<div class="flex flex-col gap-6 pb-12">
+  <!-- Billing Setup (Primary feature) -->
+  <section
+    class="p-5 rounded-lg border border-blue-200 bg-blue-50/50"
+  >
+    <h2 class="text-sm font-semibold text-slate-900 mb-1">
+      Billing Setup
+    </h2>
+    <p class="text-xs text-slate-500 mb-4">
+      Generate a Stripe checkout page link for an organization to enter their
+      billing information.
+    </p>
+    <div class="flex gap-3 items-center flex-wrap">
+      <div class="w-64">
+        <OrgSearchInput
+          bind:value={setupOrg}
+          placeholder="Search organization..."
+        />
+      </div>
+      <button
+        class="px-4 py-2 text-sm rounded-md bg-blue-600 text-white hover:bg-blue-700 whitespace-nowrap flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
+        on:click={handleBillingSetup}
+        disabled={setupLoading || !setupOrg}
+      >
+        {#if setupLoading}
+          <span
+            class="inline-block w-3 h-3 border-2 border-white/30 border-t-white rounded-full animate-spin"
+          />
+          Generating...
+        {:else}
+          Generate Setup Link
+        {/if}
+      </button>
+    </div>
+    {#if setupUrl}
+      <div class="mt-4 flex flex-col gap-1">
+        <span class="text-xs text-slate-500"
+          >Share this link with the customer:</span
+        >
+        <div
+          class="flex items-center gap-2 p-3 rounded-md bg-slate-50 border border-slate-200"
+        >
+          <a
+            href={setupUrl}
+            target="_blank"
+            rel="noreferrer"
+            class="flex-1 text-sm text-blue-600 break-all hover:underline"
+          >
+            {setupUrl}
+          </a>
+          <button
+            class="text-xs px-3 py-1 rounded border border-slate-300 text-slate-600 hover:bg-slate-100 whitespace-nowrap"
+            on:click={() => {
+              navigator.clipboard.writeText(setupUrl);
+              notifySuccess( "URL copied to clipboard");
+            }}
+          >
+            Copy
+          </button>
+        </div>
+      </div>
+    {/if}
+  </section>
+
+  <!-- Extend Trial -->
+  <section class="p-5 rounded-lg border border-slate-200">
+    <h2 class="text-sm font-semibold text-slate-900 mb-1">
+      Extend Trial
+    </h2>
+    <p class="text-xs text-slate-500 mb-4">
+      Add days to an organization's trial period.
+    </p>
+    <div class="flex gap-3 items-center flex-wrap">
+      <div class="w-64">
+        <OrgSearchInput
+          bind:value={trialOrg}
+          placeholder="Search organization..."
+        />
+      </div>
+      <input
+        type="number"
+        class="w-24 px-3 py-2 text-sm rounded-md border border-slate-300 bg-slate-50 text-slate-900 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+        min="1"
+        max="365"
+        bind:value={trialDays}
+      />
+      <button
+        class="px-4 py-2 text-sm rounded-md bg-blue-600 text-white hover:bg-blue-700 whitespace-nowrap flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
+        on:click={handleExtendTrial}
+        disabled={trialLoading || !trialOrg}
+      >
+        {#if trialLoading}
+          <span
+            class="inline-block w-3 h-3 border-2 border-white/30 border-t-white rounded-full animate-spin"
+          />
+          Extending...
+        {:else}
+          Extend Trial
+        {/if}
+      </button>
+    </div>
+  </section>
+
+  <!-- Set Billing Customer ID -->
+  <section class="p-5 rounded-lg border border-slate-200">
+    <h2 class="text-sm font-semibold text-slate-900 mb-1">
+      Set Billing Customer ID
+    </h2>
+    <p class="text-xs text-slate-500 mb-4">
+      Associate a Stripe customer ID with an organization.
+    </p>
+    <div class="flex gap-3 items-center flex-wrap">
+      <div class="w-64">
+        <OrgSearchInput
+          bind:value={customerIdOrg}
+          placeholder="Search organization..."
+        />
+      </div>
+      <input
+        type="text"
+        class="px-3 py-2 text-sm rounded-md border border-slate-300 bg-slate-50 text-slate-900 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+        placeholder="Stripe customer ID (cus_...)"
+        bind:value={customerId}
+      />
+      <button
+        class="px-4 py-2 text-sm rounded-md bg-blue-600 text-white hover:bg-blue-700 whitespace-nowrap flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
+        on:click={handleSetCustomerId}
+        disabled={customerIdLoading || !customerIdOrg || !customerId}
+      >
+        {#if customerIdLoading}
+          <span
+            class="inline-block w-3 h-3 border-2 border-white/30 border-t-white rounded-full animate-spin"
+          />
+          Setting...
+        {:else}
+          Set Customer ID
+        {/if}
+      </button>
+    </div>
+  </section>
+
+  <!-- Billing Repair -->
+  <section class="p-5 rounded-lg border border-slate-200">
+    <h2 class="text-sm font-semibold text-slate-900 mb-1">
+      Billing Repair
+    </h2>
+    <p class="text-xs text-slate-500 mb-4">
+      Trigger a billing state recalculation for an organization.
+    </p>
+    <div class="flex gap-3 items-center flex-wrap">
+      <div class="w-64">
+        <OrgSearchInput
+          bind:value={repairOrg}
+          placeholder="Search organization..."
+        />
+      </div>
+      <button
+        class="px-4 py-2 text-sm rounded-md bg-blue-600 text-white hover:bg-blue-700 whitespace-nowrap flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
+        on:click={handleBillingRepair}
+        disabled={!repairOrg}
+      >
+        Trigger Repair
+      </button>
+    </div>
+  </section>
+
+  <!-- Billing Issues -->
+  <section class="p-5 rounded-lg border border-slate-200">
+    <h2 class="text-sm font-semibold text-slate-900 mb-1">
+      Billing Issues
+    </h2>
+    <p class="text-xs text-slate-500 mb-4">
+      View and resolve billing issues for an organization.
+    </p>
+    <div class="flex gap-3 items-center flex-wrap mb-4">
+      <div class="w-64">
+        <OrgSearchInput
+          bind:value={issuesOrg}
+          placeholder="Search organization..."
+        />
+      </div>
+    </div>
+    {#if $billingIssuesQuery.isFetching}
+      <div class="flex items-center gap-2 py-2">
+        <div
+          class="w-4 h-4 border-2 border-slate-300 border-t-blue-600 rounded-full animate-spin"
+        />
+        <span class="text-sm text-slate-500">Loading issues...</span>
+      </div>
+    {:else if $billingIssuesQuery.data?.issues?.length}
+      <div class="flex flex-col gap-2">
+        {#each $billingIssuesQuery.data.issues as issue}
+          <div
+            class="flex items-center justify-between px-3 py-2 rounded bg-slate-50"
+          >
+            <div>
+              <span class="text-sm font-mono text-slate-700"
+                >{issue.type}</span
+              >
+              <span class="text-xs text-slate-500 ml-2"
+                >{issue.metadata ?? ""}</span
+              >
+            </div>
+            <button
+              class="text-xs px-2 py-1 rounded border border-red-300 text-red-600 hover:bg-red-50"
+              on:click={() =>
+                handleDeleteIssue(issuesOrg, issue.type ?? "BILLING_ISSUE_TYPE_UNSPECIFIED")}
+            >
+              Delete Issue
+            </button>
+          </div>
+        {/each}
+      </div>
+    {:else if issuesOrg && $billingIssuesQuery.isSuccess}
+      <p class="text-sm text-slate-500">No billing issues found.</p>
+    {/if}
+  </section>
+</div>
+
+<ConfirmDialog
+  bind:open={confirmOpen}
+  title={confirmTitle}
+  description={confirmDescription}
+  onConfirm={confirmAction}
+/>
diff --git a/web-admin/src/routes/-/admin/organizations/+page.svelte b/web-admin/src/routes/-/admin/organizations/+page.svelte
new file mode 100644
index 00000000000..b9bf7774153
--- /dev/null
+++ b/web-admin/src/routes/-/admin/organizations/+page.svelte
@@ -0,0 +1,385 @@
+<script lang="ts">
+  import AdminPageHeader from "@rilldata/web-admin/features/admin/layout/AdminPageHeader.svelte";
+  import ConfirmDialog from "@rilldata/web-admin/features/admin/shared/ConfirmDialog.svelte";
+  import {
+    notifySuccess,
+    notifyError,
+  } from "@rilldata/web-admin/features/admin/shared/notify";
+  import {
+    getOrganization,
+    getOrgMembers,
+    getOrgProjects,
+    searchOrgNames,
+  } from "@rilldata/web-admin/features/admin/organizations/selectors";
+  import {
+    createRedeployProjectMutation,
+    createHibernateProjectMutation,
+  } from "@rilldata/web-admin/features/admin/projects/selectors";
+
+  let searchInput = "";
+  let lookupOrg = "";
+  let showDropdown = false;
+  let justSelected = false;
+  let confirmOpen = false;
+  let confirmTitle = "";
+  let confirmDescription = "";
+  let confirmDestructive = false;
+  let confirmAction: () => Promise<void> = async () => {};
+  let actionInProgress = "";
+
+  const redeployProject = createRedeployProjectMutation();
+  const hibernateProject = createHibernateProjectMutation();
+
+  $: orgSearchQuery = searchOrgNames(searchInput);
+  $: orgNames = extractUniqueOrgs($orgSearchQuery.data?.names ?? []);
+
+  $: orgQuery = getOrganization(lookupOrg);
+  $: membersQuery = getOrgMembers(lookupOrg);
+  $: projectsQuery = getOrgProjects(lookupOrg);
+
+  function extractUniqueOrgs(projectPaths: string[]): string[] {
+    const orgs = new Set<string>();
+    for (const path of projectPaths) {
+      const org = path.split("/")[0];
+      if (org) orgs.add(org);
+    }
+    return [...orgs].sort();
+  }
+
+  function selectOrg(org: string) {
+    searchInput = org;
+    lookupOrg = org;
+    showDropdown = false;
+    justSelected = true;
+  }
+
+  function handleInputKeydown(e: KeyboardEvent) {
+    if (e.key === "Enter" && searchInput) {
+      lookupOrg = searchInput;
+      showDropdown = false;
+      justSelected = true;
+    }
+  }
+
+  function handleInput() {
+    justSelected = false;
+    if (searchInput.length >= 3) {
+      showDropdown = true;
+    } else {
+      showDropdown = false;
+    }
+  }
+
+  function handleBlur() {
+    setTimeout(() => {
+      showDropdown = false;
+    }, 150);
+  }
+
+  function handleHibernate(orgName: string, projectName: string) {
+    confirmTitle = "Hibernate Project";
+    confirmDescription = `This will hibernate the deployment for ${orgName}/${projectName}. The project data will be preserved but the deployment will be stopped.`;
+    confirmDestructive = false;
+    confirmAction = async () => {
+      actionInProgress = `hibernate:${projectName}`;
+      try {
+        await $hibernateProject.mutateAsync({ org: orgName, project: projectName });
+        notifySuccess(`Project ${orgName}/${projectName} hibernated`);
+      } catch (err) {
+        notifyError(`Failed: ${err}`);
+      } finally {
+        actionInProgress = "";
+      }
+    };
+    confirmOpen = true;
+  }
+
+  function handleRedeploy(orgName: string, projectName: string) {
+    confirmTitle = "Redeploy Project";
+    confirmDescription = `This will completely redeploy ${orgName}/${projectName}. This is a disruptive operation.`;
+    confirmDestructive = true;
+    confirmAction = async () => {
+      actionInProgress = `redeploy:${projectName}`;
+      try {
+        await $redeployProject.mutateAsync({ org: orgName, project: projectName });
+        notifySuccess(`Project ${orgName}/${projectName} redeployed`);
+      } catch (err) {
+        notifyError(`Failed: ${err}`);
+      } finally {
+        actionInProgress = "";
+      }
+    };
+    confirmOpen = true;
+  }
+
+  $: if (orgNames.length > 0 && searchInput.length >= 3 && !justSelected) {
+    showDropdown = true;
+  }
+</script>
+
+<AdminPageHeader
+  title="Organizations"
+  description="Search for any organization by name to view details, members, and projects."
+/>
+
+<div class="mb-6 max-w-lg">
+  <div class="relative">
+    <input
+      type="text"
+      class="w-full px-3 py-2 text-sm rounded-md border border-slate-300 bg-slate-50 text-slate-900 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
+      placeholder="Search organizations (min 3 characters)..."
+      bind:value={searchInput}
+      on:keydown={handleInputKeydown}
+      on:input={handleInput}
+      on:blur={handleBlur}
+    />
+    {#if $orgSearchQuery.isFetching && searchInput.length >= 3}
+      <div
+        class="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 border-2 border-slate-300 border-t-blue-600 rounded-full animate-spin"
+      />
+    {/if}
+    {#if showDropdown && orgNames.length > 0}
+      <div
+        class="absolute z-10 w-full mt-1 bg-slate-50 border border-slate-200 rounded-md shadow-lg max-h-48 overflow-y-auto"
+      >
+        {#each orgNames as org}
+          <button
+            class="w-full text-left px-3 py-2 text-sm text-slate-700 hover:bg-slate-100 cursor-pointer"
+            on:mousedown|preventDefault={() => selectOrg(org)}
+          >
+            {org}
+          </button>
+        {/each}
+      </div>
+    {:else if showDropdown && searchInput.length >= 3 && $orgSearchQuery.isSuccess && orgNames.length === 0}
+      <div
+        class="absolute z-10 w-full mt-1 bg-slate-50 border border-slate-200 rounded-md shadow-lg max-h-48 overflow-y-auto"
+      >
+        <div class="px-3 py-2 text-sm text-slate-400">No organizations found</div>
+      </div>
+    {/if}
+  </div>
+  <p class="text-xs text-slate-400 mt-1">
+    Type to search, then select or press Enter for exact match.
+  </p>
+</div>
+
+{#if $orgQuery.isFetching}
+  <div class="flex items-center gap-2 py-4">
+    <div
+      class="w-4 h-4 border-2 border-slate-300 border-t-blue-600 rounded-full animate-spin"
+    />
+    <span class="text-sm text-slate-500">Looking up organization...</span>
+  </div>
+{:else if $orgQuery.isError && lookupOrg}
+  <p class="text-sm text-red-600">
+    Organization "{lookupOrg}" not found or access denied.
+  </p>
+{:else if $orgQuery.data?.organization}
+  {@const org = $orgQuery.data.organization}
+  <div class="flex flex-col gap-4">
+    <section class="p-5 rounded-lg border border-slate-200">
+      <h2
+        class="text-sm font-semibold text-slate-900 mb-3"
+      >
+        Organization Details
+      </h2>
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-3">
+        <div class="flex flex-col">
+          <span
+            class="text-[11px] text-slate-500 uppercase tracking-wider"
+            >ID</span
+          >
+          <span
+            class="text-sm text-slate-900 font-mono text-xs"
+            >{org.id}</span
+          >
+        </div>
+        <div class="flex flex-col">
+          <span
+            class="text-[11px] text-slate-500 uppercase tracking-wider"
+            >Name</span
+          >
+          <span class="text-sm text-slate-900"
+            >{org.name}</span
+          >
+        </div>
+        <div class="flex flex-col">
+          <span
+            class="text-[11px] text-slate-500 uppercase tracking-wider"
+            >Description</span
+          >
+          <span class="text-sm text-slate-900"
+            >{org.description ?? "-"}</span
+          >
+        </div>
+        <div class="flex flex-col">
+          <span
+            class="text-[11px] text-slate-500 uppercase tracking-wider"
+            >Billing Plan</span
+          >
+          <span class="text-sm text-slate-900"
+            >{org.billingPlanDisplayName ?? "-"}</span
+          >
+        </div>
+        <div class="flex flex-col">
+          <span
+            class="text-[11px] text-slate-500 uppercase tracking-wider"
+            >Billing Customer ID</span
+          >
+          <span
+            class="text-sm text-slate-900 font-mono text-xs"
+            >{org.billingCustomerId ?? "-"}</span
+          >
+        </div>
+        <div class="flex flex-col">
+          <span
+            class="text-[11px] text-slate-500 uppercase tracking-wider"
+            >Custom Domain</span
+          >
+          <span class="text-sm text-slate-900"
+            >{org.customDomain ?? "None"}</span
+          >
+        </div>
+        <div class="flex flex-col">
+          <span
+            class="text-[11px] text-slate-500 uppercase tracking-wider"
+            >Created</span
+          >
+          <span class="text-sm text-slate-900">
+            {org.createdOn
+              ? new Date(org.createdOn).toLocaleDateString()
+              : "-"}
+          </span>
+        </div>
+        <div class="flex flex-col">
+          <span
+            class="text-[11px] text-slate-500 uppercase tracking-wider"
+            >Projects</span
+          >
+          <span class="text-sm text-slate-900">
+            {#if $projectsQuery.isFetching}
+              <span class="text-slate-400">Loading...</span>
+            {:else if $projectsQuery.data?.projects}
+              {$projectsQuery.data.projects.length}
+            {:else}
+              0
+            {/if}
+          </span>
+        </div>
+      </div>
+    </section>
+
+    <!-- Projects list -->
+    {#if $projectsQuery.data?.projects?.length}
+      <section
+        class="p-5 rounded-lg border border-slate-200"
+      >
+        <h2
+          class="text-sm font-semibold text-slate-900 mb-3"
+        >
+          Projects ({$projectsQuery.data.projects.length})
+        </h2>
+        <div class="flex flex-col gap-1">
+          {#each $projectsQuery.data.projects as project}
+            <div
+              class="flex items-center justify-between px-3 py-2 rounded bg-slate-50"
+            >
+              <a
+                href={`/${org.name}/${project.name}`}
+                target="_blank"
+                class="text-sm text-blue-600 hover:underline"
+              >
+                {project.name}
+              </a>
+              <div class="flex gap-2">
+                <button
+                  class="text-xs px-2 py-1 rounded border border-slate-300 text-slate-600 hover:bg-slate-100 disabled:opacity-50 disabled:cursor-not-allowed"
+                  disabled={actionInProgress ===
+                    `hibernate:${project.name}`}
+                  on:click={() =>
+                    handleHibernate(org.name ?? "", project.name ?? "")}
+                >
+                  {actionInProgress === `hibernate:${project.name}`
+                    ? "Hibernating..."
+                    : "Hibernate"}
+                </button>
+                <button
+                  class="text-xs px-2 py-1 rounded border border-red-300 text-red-600 hover:bg-red-50 disabled:opacity-50 disabled:cursor-not-allowed"
+                  disabled={actionInProgress ===
+                    `redeploy:${project.name}`}
+                  on:click={() =>
+                    handleRedeploy(org.name ?? "", project.name ?? "")}
+                >
+                  {actionInProgress === `redeploy:${project.name}`
+                    ? "Redeploying..."
+                    : "Redeploy"}
+                </button>
+              </div>
+            </div>
+          {/each}
+        </div>
+      </section>
+    {/if}
+
+    <!-- Members list -->
+    {#if $membersQuery.isFetching}
+      <div class="flex items-center gap-2 py-4">
+        <div
+          class="w-4 h-4 border-2 border-slate-300 border-t-blue-600 rounded-full animate-spin"
+        />
+        <span class="text-sm text-slate-500">Loading members...</span>
+      </div>
+    {:else if $membersQuery.data?.members?.length}
+      <section
+        class="p-5 rounded-lg border border-slate-200"
+      >
+        <h2
+          class="text-sm font-semibold text-slate-900 mb-3"
+        >
+          Members ({$membersQuery.data.members.length})
+        </h2>
+        <table class="w-full">
+          <thead>
+            <tr>
+              <th
+                class="text-left text-xs font-medium text-slate-500 uppercase tracking-wider px-4 py-2 border-b border-slate-200"
+              >
+                Email
+              </th>
+              <th
+                class="text-left text-xs font-medium text-slate-500 uppercase tracking-wider px-4 py-2 border-b border-slate-200"
+              >
+                Role
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {#each $membersQuery.data.members as member}
+              <tr>
+                <td
+                  class="px-4 py-2 text-sm text-slate-700 border-b border-slate-100 font-mono text-xs"
+                >
+                  {member.userEmail}
+                </td>
+                <td
+                  class="px-4 py-2 text-sm text-slate-700 border-b border-slate-100"
+                >
+                  {member.roleName}
+                </td>
+              </tr>
+            {/each}
+          </tbody>
+        </table>
+      </section>
+    {/if}
+  </div>
+{/if}
+
+<ConfirmDialog
+  bind:open={confirmOpen}
+  title={confirmTitle}
+  description={confirmDescription}
+  destructive={confirmDestructive}
+  onConfirm={confirmAction}
+/>
diff --git a/web-admin/src/routes/-/admin/projects/+page.svelte b/web-admin/src/routes/-/admin/projects/+page.svelte
new file mode 100644
index 00000000000..8a5858933f7
--- /dev/null
+++ b/web-admin/src/routes/-/admin/projects/+page.svelte
@@ -0,0 +1,163 @@
+<!-- web-admin/src/routes/-/admin/projects/+page.svelte -->
+<script lang="ts">
+  import AdminPageHeader from "@rilldata/web-admin/features/admin/layout/AdminPageHeader.svelte";
+  import ConfirmDialog from "@rilldata/web-admin/features/admin/shared/ConfirmDialog.svelte";
+  import {
+    notifySuccess,
+    notifyError,
+  } from "@rilldata/web-admin/features/admin/shared/notify";
+  import SearchInput from "@rilldata/web-admin/features/admin/shared/SearchInput.svelte";
+  import {
+    searchProjects,
+    createRedeployProjectMutation,
+    createHibernateProjectMutation,
+  } from "@rilldata/web-admin/features/admin/projects/selectors";
+
+  let searchQuery = "";
+  let confirmOpen = false;
+  let confirmTitle = "";
+  let confirmDescription = "";
+  let confirmDestructive = false;
+  let confirmAction: () => Promise<void> = async () => {};
+  let actionInProgress = "";
+
+  const redeployProject = createRedeployProjectMutation();
+  const hibernateProject = createHibernateProjectMutation();
+
+  $: projectsQuery = searchProjects(searchQuery);
+
+  function handleSearch(e: CustomEvent<string>) {
+    searchQuery = e.detail;
+  }
+
+  function handleHibernate(name: string) {
+    const [org, project] = name.split("/");
+    confirmTitle = "Hibernate Project";
+    confirmDescription = `This will hibernate the deployment for ${name}. The project data will be preserved but the deployment will be stopped.`;
+    confirmDestructive = false;
+    confirmAction = async () => {
+      actionInProgress = `hibernate:${name}`;
+      try {
+        await $hibernateProject.mutateAsync({ org, project });
+        notifySuccess( `Project ${name} hibernated`);
+      } catch (err) {
+        notifyError( `Failed: ${err}`);
+      } finally {
+        actionInProgress = "";
+      }
+    };
+    confirmOpen = true;
+  }
+
+  function handleRedeploy(name: string) {
+    const [org, project] = name.split("/");
+    confirmTitle = "Redeploy Project";
+    confirmDescription = `This will completely redeploy ${name}. This is a disruptive operation.`;
+    confirmDestructive = true;
+    confirmAction = async () => {
+      actionInProgress = `redeploy:${name}`;
+      try {
+        await $redeployProject.mutateAsync({ org, project });
+        notifySuccess( `Project ${name} redeployed`);
+      } catch (err) {
+        notifyError( `Failed: ${err}`);
+      } finally {
+        actionInProgress = "";
+      }
+    };
+    confirmOpen = true;
+  }
+</script>
+
+<AdminPageHeader
+  title="Projects"
+  description="Search projects across all organizations by name pattern."
+/>
+
+<div class="mb-4 max-w-md">
+  <SearchInput
+    placeholder="Search projects (e.g. org/project, min 3 chars)..."
+    on:search={handleSearch}
+  />
+</div>
+
+{#if $projectsQuery.isFetching && searchQuery.length >= 3}
+  <div class="flex items-center gap-2 py-4">
+    <div
+      class="w-4 h-4 border-2 border-slate-300 border-t-blue-600 rounded-full animate-spin"
+    />
+    <span class="text-sm text-slate-500">Searching projects...</span>
+  </div>
+{:else if $projectsQuery.data?.names?.length}
+  <p class="text-xs text-slate-500 mb-2">
+    {$projectsQuery.data.names.length} result{$projectsQuery.data.names.length === 1 ? "" : "s"}
+  </p>
+  <table class="w-full">
+    <thead>
+      <tr>
+        <th
+          class="text-left text-xs font-medium text-slate-500 uppercase tracking-wider px-4 py-2 border-b border-slate-200"
+        >
+          Project
+        </th>
+        <th
+          class="text-left text-xs font-medium text-slate-500 uppercase tracking-wider px-4 py-2 border-b border-slate-200"
+        >
+          Actions
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      {#each $projectsQuery.data.names as name}
+        <tr class="group">
+          <td
+            class="px-4 py-3 text-sm text-slate-700 border-b border-slate-100 group-hover:bg-slate-50 font-mono text-xs"
+          >
+            {name}
+          </td>
+          <td
+            class="px-4 py-3 text-sm text-slate-700 border-b border-slate-100 group-hover:bg-slate-50"
+          >
+            <div class="flex gap-2">
+              <a
+                href={`/${name}`}
+                target="_blank"
+                class="text-xs px-2 py-1 rounded border border-slate-300 text-slate-600 hover:bg-slate-100"
+              >
+                View
+              </a>
+              <button
+                class="text-xs px-2 py-1 rounded border border-slate-300 text-slate-600 hover:bg-slate-100 disabled:opacity-50 disabled:cursor-not-allowed"
+                disabled={actionInProgress === `hibernate:${name}`}
+                on:click={() => handleHibernate(name)}
+              >
+                {actionInProgress === `hibernate:${name}` ? "Hibernating..." : "Hibernate"}
+              </button>
+              <button
+                class="text-xs px-2 py-1 rounded border border-red-300 text-red-600 hover:bg-red-50 disabled:opacity-50 disabled:cursor-not-allowed"
+                disabled={actionInProgress === `redeploy:${name}`}
+                on:click={() => handleRedeploy(name)}
+              >
+                {actionInProgress === `redeploy:${name}` ? "Redeploying..." : "Redeploy"}
+              </button>
+            </div>
+          </td>
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+{:else if searchQuery.length >= 3 && $projectsQuery.isSuccess}
+  <p class="text-sm text-slate-500">No projects found for "{searchQuery}"</p>
+{:else if searchQuery.length < 3}
+  <p class="text-sm text-slate-400">
+    Type at least 3 characters to search across all organizations.
+  </p>
+{/if}
+
+<ConfirmDialog
+  bind:open={confirmOpen}
+  title={confirmTitle}
+  description={confirmDescription}
+  destructive={confirmDestructive}
+  onConfirm={confirmAction}
+/>
diff --git a/web-admin/src/routes/-/admin/quotas/+page.svelte b/web-admin/src/routes/-/admin/quotas/+page.svelte
new file mode 100644
index 00000000000..e72589ea66c
--- /dev/null
+++ b/web-admin/src/routes/-/admin/quotas/+page.svelte
@@ -0,0 +1,181 @@
+<!-- web-admin/src/routes/-/admin/quotas/+page.svelte -->
+<script lang="ts">
+  import AdminPageHeader from "@rilldata/web-admin/features/admin/layout/AdminPageHeader.svelte";
+  import OrgSearchInput from "@rilldata/web-admin/features/admin/shared/OrgSearchInput.svelte";
+  import {
+    notifySuccess,
+    notifyError,
+  } from "@rilldata/web-admin/features/admin/shared/notify";
+  import {
+    getOrgForQuotas,
+    createUpdateOrgQuotasMutation,
+  } from "@rilldata/web-admin/features/admin/quotas/selectors";
+  import { useQueryClient } from "@tanstack/svelte-query";
+
+  let orgValue = "";
+  let activeOrg = "";
+
+  const queryClient = useQueryClient();
+  const updateOrgQuotas = createUpdateOrgQuotasMutation();
+
+  // Quota fields for editing
+  let projects = "";
+  let deployments = "";
+  let slotsTotal = "";
+  let slotsPerDeployment = "";
+  let outstandingInvites = "";
+  let storageLimitBytes = "";
+
+  $: orgQuery = getOrgForQuotas(activeOrg);
+
+  function handleOrgSelect(e: CustomEvent<string>) {
+    activeOrg = e.detail;
+  }
+
+  // Populate fields when org data loads
+  $: if ($orgQuery.data?.organization?.quotas) {
+    const q = $orgQuery.data.organization.quotas;
+    projects = q.projects != null ? String(q.projects) : "";
+    deployments = q.deployments != null ? String(q.deployments) : "";
+    slotsTotal = q.slotsTotal != null ? String(q.slotsTotal) : "";
+    slotsPerDeployment = q.slotsPerDeployment != null ? String(q.slotsPerDeployment) : "";
+    outstandingInvites = q.outstandingInvites != null ? String(q.outstandingInvites) : "";
+    storageLimitBytes = q.storageLimitBytesPerDeployment ?? "";
+  }
+
+  async function handleSaveQuotas() {
+    try {
+      await $updateOrgQuotas.mutateAsync({
+        data: {
+          org: activeOrg,
+          projects: projects ? Number(projects) : undefined,
+          deployments: deployments ? Number(deployments) : undefined,
+          slotsTotal: slotsTotal ? Number(slotsTotal) : undefined,
+          slotsPerDeployment: slotsPerDeployment ? Number(slotsPerDeployment) : undefined,
+          outstandingInvites: outstandingInvites ? Number(outstandingInvites) : undefined,
+          storageLimitBytesPerDeployment: storageLimitBytes ? storageLimitBytes : undefined,
+        },
+      });
+      notifySuccess(`Quotas updated for org: ${activeOrg}`);
+      await queryClient.invalidateQueries({
+        predicate: (q) =>
+          (q.queryKey[0] as string)?.includes("/v1/superuser/quotas") ||
+          (q.queryKey[0] as string)?.includes("/v1/organizations"),
+      });
+    } catch (err) {
+      notifyError(`Failed to update quotas: ${err}`);
+    }
+  }
+</script>
+
+<AdminPageHeader
+  title="Quotas"
+  description="View and adjust resource quotas for organizations."
+/>
+
+<div class="flex flex-col gap-6">
+  <section class="p-5 rounded-lg border border-slate-200">
+    <div class="flex gap-3 items-center flex-wrap mb-4">
+      <div class="w-64">
+        <OrgSearchInput
+          bind:value={orgValue}
+          placeholder="Search organization..."
+          on:select={handleOrgSelect}
+        />
+      </div>
+    </div>
+
+    {#if activeOrg && $orgQuery.isFetching}
+      <div class="flex items-center gap-2 py-4">
+        <div
+          class="w-4 h-4 border-2 border-slate-300 border-t-blue-600 rounded-full animate-spin"
+        />
+        <span class="text-sm text-slate-500">Loading quotas...</span>
+      </div>
+    {:else if activeOrg && $orgQuery.data?.organization}
+      <div class="grid grid-cols-2 lg:grid-cols-3 gap-4">
+        <div class="flex flex-col gap-1">
+          <label
+            class="text-xs font-medium text-slate-500"
+            for="projects">Projects</label
+          >
+          <input
+            id="projects"
+            type="number"
+            class="px-3 py-2 text-sm rounded-md border border-slate-300 bg-slate-50 text-slate-900 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            bind:value={projects}
+          />
+        </div>
+        <div class="flex flex-col gap-1">
+          <label
+            class="text-xs font-medium text-slate-500"
+            for="deployments">Deployments</label
+          >
+          <input
+            id="deployments"
+            type="number"
+            class="px-3 py-2 text-sm rounded-md border border-slate-300 bg-slate-50 text-slate-900 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            bind:value={deployments}
+          />
+        </div>
+        <div class="flex flex-col gap-1">
+          <label
+            class="text-xs font-medium text-slate-500"
+            for="slotsTotal">Total Slots</label
+          >
+          <input
+            id="slotsTotal"
+            type="number"
+            class="px-3 py-2 text-sm rounded-md border border-slate-300 bg-slate-50 text-slate-900 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            bind:value={slotsTotal}
+          />
+        </div>
+        <div class="flex flex-col gap-1">
+          <label
+            class="text-xs font-medium text-slate-500"
+            for="slotsPerDeployment">Slots per Deployment</label
+          >
+          <input
+            id="slotsPerDeployment"
+            type="number"
+            class="px-3 py-2 text-sm rounded-md border border-slate-300 bg-slate-50 text-slate-900 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            bind:value={slotsPerDeployment}
+          />
+        </div>
+        <div class="flex flex-col gap-1">
+          <label
+            class="text-xs font-medium text-slate-500"
+            for="outstandingInvites">Outstanding Invites</label
+          >
+          <input
+            id="outstandingInvites"
+            type="number"
+            class="px-3 py-2 text-sm rounded-md border border-slate-300 bg-slate-50 text-slate-900 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            bind:value={outstandingInvites}
+          />
+        </div>
+        <div class="flex flex-col gap-1">
+          <label
+            class="text-xs font-medium text-slate-500"
+            for="storageLimitBytes">Storage Limit (bytes)</label
+          >
+          <input
+            id="storageLimitBytes"
+            type="text"
+            class="px-3 py-2 text-sm rounded-md border border-slate-300 bg-slate-50 text-slate-900 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            bind:value={storageLimitBytes}
+          />
+        </div>
+      </div>
+
+      <div class="mt-4">
+        <button
+          class="px-4 py-2 text-sm rounded-md bg-blue-600 text-white hover:bg-blue-700 whitespace-nowrap"
+          on:click={handleSaveQuotas}
+        >
+          Save Quotas
+        </button>
+      </div>
+    {/if}
+  </section>
+</div>
diff --git a/web-admin/src/routes/-/admin/superusers/+page.svelte b/web-admin/src/routes/-/admin/superusers/+page.svelte
new file mode 100644
index 00000000000..8847396ae8a
--- /dev/null
+++ b/web-admin/src/routes/-/admin/superusers/+page.svelte
@@ -0,0 +1,165 @@
+<!-- web-admin/src/routes/-/admin/superusers/+page.svelte -->
+<script lang="ts">
+  import {
+    createAdminServiceListSuperusers,
+    createAdminServiceSetSuperuser,
+  } from "@rilldata/web-admin/client";
+  import AdminPageHeader from "@rilldata/web-admin/features/admin/layout/AdminPageHeader.svelte";
+  import ConfirmDialog from "@rilldata/web-admin/features/admin/shared/ConfirmDialog.svelte";
+  import {
+    notifySuccess,
+    notifyError,
+  } from "@rilldata/web-admin/features/admin/shared/notify";
+  import { useQueryClient } from "@tanstack/svelte-query";
+
+  let newEmail = "";
+  let addLoading = false;
+  let confirmOpen = false;
+  let confirmTitle = "";
+  let confirmDescription = "";
+  let confirmDestructive = false;
+  let confirmAction: () => Promise<void> = async () => {};
+
+  const queryClient = useQueryClient();
+  const superusersQuery = createAdminServiceListSuperusers();
+  const setSuperuser = createAdminServiceSetSuperuser();
+
+  async function handleAdd() {
+    if (!newEmail) return;
+    addLoading = true;
+    try {
+      await $setSuperuser.mutateAsync({ data: { email: newEmail, superuser: true } });
+      notifySuccess( `${newEmail} added as superuser`);
+      newEmail = "";
+      await queryClient.invalidateQueries({
+        predicate: (q) =>
+          (q.queryKey[0] as string)?.includes("/v1/superuser"),
+      });
+    } catch (err) {
+      notifyError( `Failed: ${err}`);
+    } finally {
+      addLoading = false;
+    }
+  }
+
+  function handleRemove(email: string) {
+    confirmTitle = "Remove Superuser";
+    confirmDescription = `Remove superuser access for ${email}? They will lose access to this admin console.`;
+    confirmDestructive = true;
+    confirmAction = async () => {
+      try {
+        await $setSuperuser.mutateAsync({ data: { email, superuser: false } });
+        notifySuccess( `${email} removed as superuser`);
+        await queryClient.invalidateQueries({
+          predicate: (q) =>
+            (q.queryKey[0] as string)?.includes("/v1/superuser"),
+        });
+      } catch (err) {
+        notifyError( `Failed: ${err}`);
+      }
+    };
+    confirmOpen = true;
+  }
+</script>
+
+<AdminPageHeader
+  title="Superusers"
+  description="Manage who has superuser (super admin) access across all of Rill Cloud."
+/>
+
+<div class="p-5 rounded-lg border border-slate-200 mb-6">
+  <h2 class="text-sm font-semibold text-slate-900 mb-3">
+    Add Superuser
+  </h2>
+  <div class="flex gap-3 items-center flex-wrap">
+    <input
+      type="email"
+      class="px-3 py-2 text-sm rounded-md border border-slate-300 bg-slate-50 text-slate-900 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
+      placeholder="Email address"
+      bind:value={newEmail}
+      on:keydown={(e) => e.key === "Enter" && handleAdd()}
+    />
+    <button
+      class="px-4 py-2 text-sm rounded-md bg-blue-600 text-white hover:bg-blue-700 whitespace-nowrap flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
+      on:click={handleAdd}
+      disabled={addLoading || !newEmail}
+    >
+      {#if addLoading}
+        <span
+          class="inline-block w-3 h-3 border-2 border-white/30 border-t-white rounded-full animate-spin"
+        />
+        Adding...
+      {:else}
+        Add Superuser
+      {/if}
+    </button>
+  </div>
+</div>
+
+{#if $superusersQuery.isFetching}
+  <div class="flex items-center gap-2 py-4">
+    <div
+      class="w-4 h-4 border-2 border-slate-300 border-t-blue-600 rounded-full animate-spin"
+    />
+    <span class="text-sm text-slate-500">Loading superusers...</span>
+  </div>
+{:else if $superusersQuery.data?.users?.length}
+  <p class="text-xs text-slate-500 mb-2">
+    {$superusersQuery.data.users.length} superuser{$superusersQuery.data.users.length === 1 ? "" : "s"}
+  </p>
+  <table class="w-full">
+    <thead>
+      <tr>
+        <th
+          class="text-left text-xs font-medium text-slate-500 uppercase tracking-wider px-4 py-2 border-b border-slate-200"
+        >
+          Email
+        </th>
+        <th
+          class="text-left text-xs font-medium text-slate-500 uppercase tracking-wider px-4 py-2 border-b border-slate-200"
+        >
+          Display Name
+        </th>
+        <th
+          class="text-left text-xs font-medium text-slate-500 uppercase tracking-wider px-4 py-2 border-b border-slate-200"
+        >
+          Actions
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      {#each $superusersQuery.data.users as user}
+        <tr>
+          <td
+            class="px-4 py-3 text-sm text-slate-700 border-b border-slate-100 font-mono text-xs"
+          >
+            {user.email}
+          </td>
+          <td
+            class="px-4 py-3 text-sm text-slate-700 border-b border-slate-100"
+          >
+            {user.displayName ?? "-"}
+          </td>
+          <td
+            class="px-4 py-3 text-sm text-slate-700 border-b border-slate-100"
+          >
+            <button
+              class="text-xs px-2 py-1 rounded border border-red-300 text-red-600 hover:bg-red-50"
+              on:click={() => handleRemove(user.email ?? "")}
+            >
+              Remove
+            </button>
+          </td>
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+{/if}
+
+<ConfirmDialog
+  bind:open={confirmOpen}
+  title={confirmTitle}
+  description={confirmDescription}
+  destructive={confirmDestructive}
+  onConfirm={confirmAction}
+/>