diff --git a/web-admin/src/features/alerts/CreateAlert.svelte b/web-admin/src/features/alerts/CreateAlert.svelte
index 300e914ad6ac..d38d89344fa9 100644
--- a/web-admin/src/features/alerts/CreateAlert.svelte
+++ b/web-admin/src/features/alerts/CreateAlert.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { goto } from "$app/navigation";
+  import { page } from "$app/stores";
   import { Button } from "@rilldata/web-common/components/button";
   import GuardedDialog from "@rilldata/web-common/components/dialog/GuardedDialog.svelte";
   import {
@@ -28,6 +30,24 @@
   $: hasTimeDimension = !!$metricsView?.data?.timeDimension;
 
   let open = false;
+
+  // Auto-open when arriving from the dashboards listing's "Create alert" item.
+  // Strip the query param afterwards so a refresh doesn't reopen the dialog.
+  $: if (
+    !open &&
+    $page.url.searchParams.get("action") === "create-alert" &&
+    hasTimeDimension &&
+    $dashboardStore &&
+    !$isCustomTimeRange
+  ) {
+    open = true;
+    const url = new URL($page.url);
+    url.searchParams.delete("action");
+    void goto(url.pathname + url.search, {
+      replaceState: true,
+      noScroll: true,
+    });
+  }
 </script>
 
 {#if hasTimeDimension && $dashboardStore}
diff --git a/web-admin/src/features/alerts/history/AlertHistoryTable.svelte b/web-admin/src/features/alerts/history/AlertHistoryTable.svelte
index b571d69f5777..735d197f3616 100644
--- a/web-admin/src/features/alerts/history/AlertHistoryTable.svelte
+++ b/web-admin/src/features/alerts/history/AlertHistoryTable.svelte
@@ -3,7 +3,7 @@
   import NoAlertRunsYet from "@rilldata/web-admin/features/alerts/history/NoAlertRunsYet.svelte";
   import { useAlert } from "@rilldata/web-admin/features/alerts/selectors";
   import ResourceList from "@rilldata/web-common/features/resources/ResourceList.svelte";
-  import type { V1AlertExecution } from "@rilldata/web-common/runtime-client/gen/index.schemas";
+  import { type V1AlertExecution } from "@rilldata/web-common/runtime-client";
   import { useRuntimeClient } from "@rilldata/web-common/runtime-client/v2";
   import type { ColumnDef } from "tanstack-table-8-svelte-5";
   import { renderComponent } from "tanstack-table-8-svelte-5";
@@ -14,10 +14,11 @@
 
   $: alertQuery = useAlert(runtimeClient, alert);
 
+  $: history = $alertQuery.data?.resource?.alert?.state?.executionHistory ?? [];
+
   /**
    * Table column definitions.
-   * - "composite": Renders all dashboard data in a single cell.
-   * - Others: Used for sorting and filtering but not displayed.
+   * - "composite": Renders all execution data in a single cell.
    */
   const columns: ColumnDef<V1AlertExecution>[] = [
     {
@@ -46,13 +47,13 @@
     </div>
   {:else if $alertQuery.isLoading}
     <div class="text-fg-secondary">Loading...</div>
-  {:else if !$alertQuery.data?.resource.alert.state.executionHistory.length}
+  {:else if !history.length}
     <NoAlertRunsYet />
   {:else}
     <ResourceList
       kind="alert"
       {columns}
-      data={$alertQuery.data?.resource.alert.state.executionHistory}
+      data={history}
       toolbar={false}
       fixedRowHeight={false}
     />
diff --git a/web-admin/src/features/alerts/listing/AlertActionsCell.svelte b/web-admin/src/features/alerts/listing/AlertActionsCell.svelte
new file mode 100644
index 000000000000..d11150a62f86
--- /dev/null
+++ b/web-admin/src/features/alerts/listing/AlertActionsCell.svelte
@@ -0,0 +1,94 @@
+<script lang="ts">
+  import { goto } from "$app/navigation";
+  import { createAdminServiceDeleteAlert } from "@rilldata/web-admin/client";
+  import IconButton from "@rilldata/web-common/components/button/IconButton.svelte";
+  import * as DropdownMenu from "@rilldata/web-common/components/dropdown-menu";
+  import ThreeDot from "@rilldata/web-common/components/icons/ThreeDot.svelte";
+  import DeleteConfirmDialog from "@rilldata/web-common/features/resources/DeleteConfirmDialog.svelte";
+  import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus";
+  import { getRuntimeServiceListResourcesQueryKey } from "@rilldata/web-common/runtime-client";
+  import { useRuntimeClient } from "@rilldata/web-common/runtime-client/v2";
+  import { useQueryClient } from "@tanstack/svelte-query";
+  import { Pencil, Trash2Icon } from "lucide-svelte";
+
+  export let organization: string;
+  export let project: string;
+  export let id: string;
+  export let title: string;
+  export let isCreatedByCode: boolean;
+
+  const runtimeClient = useRuntimeClient();
+  const queryClient = useQueryClient();
+  const deleteAlert = createAdminServiceDeleteAlert();
+
+  let isDropdownOpen = false;
+  let isDeleteConfirmOpen = false;
+
+  function handleEdit() {
+    void goto(`/${organization}/${project}/-/alerts/${id}`);
+  }
+
+  async function handleDelete() {
+    try {
+      await $deleteAlert.mutateAsync({
+        org: organization,
+        project,
+        name: id,
+      });
+      await queryClient.invalidateQueries({
+        queryKey: getRuntimeServiceListResourcesQueryKey(
+          runtimeClient.instanceId,
+        ),
+      });
+    } catch {
+      eventBus.emit("notification", {
+        message: "Failed to delete alert",
+        type: "error",
+      });
+    }
+  }
+</script>
+
+{#if !isCreatedByCode}
+  <div class="flex justify-end" data-no-row-click>
+    <DropdownMenu.Root bind:open={isDropdownOpen}>
+      <DropdownMenu.Trigger class="flex-none">
+        <IconButton
+          rounded
+          active={isDropdownOpen}
+          ariaLabel={`Actions for ${title}`}
+        >
+          <ThreeDot size="16px" />
+        </IconButton>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content side="bottom" align="start" class="min-w-[95px]">
+        <DropdownMenu.Item
+          class="font-normal flex items-center"
+          onclick={handleEdit}
+        >
+          <Pencil size="12px" />
+          <span class="ml-2">Edit</span>
+        </DropdownMenu.Item>
+        <DropdownMenu.Item
+          class="font-normal flex items-center"
+          type="destructive"
+          onclick={() => {
+            isDeleteConfirmOpen = true;
+          }}
+        >
+          <Trash2Icon size="12px" />
+          <span class="ml-2">Delete</span>
+        </DropdownMenu.Item>
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  </div>
+
+  <DeleteConfirmDialog
+    bind:open={isDeleteConfirmOpen}
+    title="Delete this alert?"
+    onDelete={handleDelete}
+  >
+    The alert "<strong>{title}</strong>" will be permanently deleted and will no
+    longer trigger notifications.
+  </DeleteConfirmDialog>
+{/if}
diff --git a/web-admin/src/features/alerts/listing/AlertOwnerBullet.svelte b/web-admin/src/features/alerts/listing/AlertOwnerBullet.svelte
deleted file mode 100644
index 5b35c1647e67..000000000000
--- a/web-admin/src/features/alerts/listing/AlertOwnerBullet.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script lang="ts">
-  import { useAlertOwnerName } from "../../alerts/selectors";
-
-  export let organization: string;
-  export let project: string;
-  export let ownerId: string;
-
-  const ownerName = useAlertOwnerName(organization, project, ownerId);
-</script>
-
-{#if $ownerName.isSuccess}
-  <span>
-    {$ownerName.data ? `Created by ${$ownerName.data}` : "Created through code"}
-  </span>
-{/if}
diff --git a/web-admin/src/features/alerts/listing/AlertOwnerCell.svelte b/web-admin/src/features/alerts/listing/AlertOwnerCell.svelte
new file mode 100644
index 000000000000..d811dc2f941e
--- /dev/null
+++ b/web-admin/src/features/alerts/listing/AlertOwnerCell.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+  import ProjectAccessControls from "../../projects/ProjectAccessControls.svelte";
+  import { useAlertOwnerName } from "../selectors";
+
+  export let organization: string;
+  export let project: string;
+  export let ownerId: string;
+
+  $: ownerName = useAlertOwnerName(organization, project, ownerId);
+</script>
+
+<ProjectAccessControls {organization} {project}>
+  <svelte:fragment slot="manage-project">
+    {#if $ownerName.isSuccess}
+      <span class="truncate">
+        {$ownerName.data ?? "Code-defined"}
+      </span>
+    {:else}
+      <span class="text-fg-tertiary">—</span>
+    {/if}
+  </svelte:fragment>
+</ProjectAccessControls>
diff --git a/web-admin/src/features/alerts/listing/AlertStatusCell.svelte b/web-admin/src/features/alerts/listing/AlertStatusCell.svelte
new file mode 100644
index 000000000000..e8f4809b998a
--- /dev/null
+++ b/web-admin/src/features/alerts/listing/AlertStatusCell.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+  import StatusTextCell from "@rilldata/web-common/features/resources/cells/StatusTextCell.svelte";
+  import {
+    V1AssertionStatus,
+    type V1Resource,
+  } from "@rilldata/web-common/runtime-client";
+
+  export let resource: V1Resource;
+
+  type Tone = "default" | "muted" | "success" | "destructive";
+
+  $: ({ label, tone } = describeStatus(resource));
+
+  function describeStatus(r: V1Resource): { label: string; tone: Tone } {
+    const last = r.alert?.state?.executionHistory?.[0];
+    if (!last) return { label: "Pending", tone: "muted" };
+
+    switch (last.result?.status) {
+      case V1AssertionStatus.ASSERTION_STATUS_FAIL:
+        return { label: "Triggered", tone: "destructive" };
+      case V1AssertionStatus.ASSERTION_STATUS_PASS:
+        return { label: "OK", tone: "success" };
+      case V1AssertionStatus.ASSERTION_STATUS_ERROR:
+        return { label: "Error", tone: "destructive" };
+      default:
+        return { label: "Pending", tone: "muted" };
+    }
+  }
+</script>
+
+<StatusTextCell {label} {tone} />
diff --git a/web-admin/src/features/alerts/listing/AlertsTable.svelte b/web-admin/src/features/alerts/listing/AlertsTable.svelte
index 034a1e66ca48..80ff6b20ffba 100644
--- a/web-admin/src/features/alerts/listing/AlertsTable.svelte
+++ b/web-admin/src/features/alerts/listing/AlertsTable.svelte
@@ -1,70 +1,184 @@
 <script lang="ts">
-  import ResourceList from "@rilldata/web-common/features/resources/ResourceList.svelte";
   import ResourceListEmptyState from "@rilldata/web-common/features/resources/ResourceListEmptyState.svelte";
+  import ResourceTable from "@rilldata/web-common/features/resources/ResourceTable.svelte";
+  import NameCell from "@rilldata/web-common/features/resources/cells/NameCell.svelte";
+  import RelativeTimeCell from "@rilldata/web-common/features/resources/cells/RelativeTimeCell.svelte";
   import AlertIcon from "@rilldata/web-common/components/icons/AlertIcon.svelte";
-  import type { V1Resource } from "@rilldata/web-common/runtime-client/gen/index.schemas";
+  import {
+    applyTableFilters,
+    TableToolbar,
+  } from "@rilldata/web-common/components/table-toolbar";
+  import type {
+    FilterGroup,
+    SortDirection,
+  } from "@rilldata/web-common/components/table-toolbar/types";
+  import {
+    V1AssertionStatus,
+    type V1Resource,
+  } from "@rilldata/web-common/runtime-client";
   import { renderComponent, type ColumnDef } from "tanstack-table-8-svelte-5";
-  import AlertsTableCompositeCell from "./AlertsTableCompositeCell.svelte";
+  import AlertActionsCell from "./AlertActionsCell.svelte";
+  import AlertOwnerCell from "./AlertOwnerCell.svelte";
+  import AlertStatusCell from "./AlertStatusCell.svelte";
 
   export let data: V1Resource[];
   export let organization: string;
   export let project: string;
 
-  /**
-   * Table column definitions.
-   * - "composite": Renders all dashboard data in a single cell.
-   * - Others: Used for sorting and filtering but not displayed.
-   *
-   * Note: TypeScript error prevents using `ColumnDef<DashboardResource, string>[]`.
-   * Relevant issues:
-   * - https://github.com/TanStack/table/issues/4241
-   * - https://github.com/TanStack/table/issues/4302
-   */
+  let searchText = "";
+  let selectedStatuses: string[] = [];
+  let sortDirection: SortDirection = "newest";
+
+  function getDisplayName(r: V1Resource): string {
+    return r.alert?.spec?.displayName || r.meta?.name?.name || "";
+  }
+
+  function getCreatedOn(r: V1Resource): string | undefined {
+    return r.meta?.createdOn;
+  }
+
+  function getStatus(r: V1Resource): "triggered" | "ok" | "error" | "none" {
+    const status = r.alert?.state?.executionHistory?.[0]?.result?.status;
+    if (status === V1AssertionStatus.ASSERTION_STATUS_FAIL) return "triggered";
+    if (status === V1AssertionStatus.ASSERTION_STATUS_PASS) return "ok";
+    if (status === V1AssertionStatus.ASSERTION_STATUS_ERROR) return "error";
+    return "none";
+  }
+
+  function matchesSearch(r: V1Resource, q: string): boolean {
+    if (!q) return true;
+    return getDisplayName(r).toLowerCase().includes(q.toLowerCase());
+  }
+
+  $: processedData = applyTableFilters({
+    data: data ?? [],
+    searchText,
+    matchesSearch,
+    filterPredicates: [
+      (r) =>
+        selectedStatuses.length === 0 ||
+        selectedStatuses.includes(getStatus(r)),
+    ],
+    sortDirection,
+    getSortKey: getCreatedOn,
+  });
+
+  $: filterGroups = [
+    {
+      label: "Status",
+      key: "status",
+      options: [
+        { value: "triggered", label: "Triggered" },
+        { value: "ok", label: "OK" },
+        { value: "error", label: "Error" },
+      ],
+      selected: selectedStatuses,
+      defaultValue: [],
+      multiSelect: true,
+    },
+  ] satisfies FilterGroup[];
+
+  function handleFilterChange(key: string, selected: string | string[]) {
+    if (key !== "status") return;
+    selectedStatuses = Array.isArray(selected) ? selected : [selected];
+  }
+
+  function clearFilters() {
+    selectedStatuses = [];
+    searchText = "";
+  }
+
+  function getRowHref(row: unknown): string {
+    const r = row as V1Resource;
+    return `alerts/${r.meta?.name?.name ?? ""}`;
+  }
+
   const columns: ColumnDef<V1Resource, string>[] = [
     {
-      id: "composite",
+      id: "name",
+      header: "Alert name",
+      accessorFn: (row) =>
+        row.alert?.spec?.displayName || row.meta?.name?.name || "",
       cell: (info) =>
-        renderComponent(AlertsTableCompositeCell, {
-          organization: organization,
-          project: project,
-          id: info.row.original.meta.name.name,
-          title:
-            info.row.original.alert.spec.displayName ||
-            info.row.original.meta.name.name,
-          lastTrigger:
-            info.row.original.alert.state.executionHistory[0]?.finishedOn ??
-            info.row.original.alert.state.executionHistory[0]?.startedOn,
-          ownerId:
-            info.row.original.alert.spec.annotations["admin_owner_user_id"],
-          lastTriggerErrorMessage:
-            info.row.original.alert.state.executionHistory[0]?.result
-              .errorMessage,
+        renderComponent(NameCell, { name: info.getValue() as string }),
+    },
+    {
+      id: "status",
+      header: "Status",
+      accessorFn: (row) => getStatus(row),
+      cell: (info) =>
+        renderComponent(AlertStatusCell, { resource: info.row.original }),
+      meta: { width: "120px" },
+    },
+    // TODO(#9283): add the Tags column once resource-level tags are exposed
+    // by the API. https://github.com/rilldata/rill/issues/9283
+    {
+      id: "lastTriggered",
+      header: "Last triggered",
+      accessorFn: (row) => {
+        const last = row.alert?.state?.executionHistory?.[0];
+        return last?.finishedOn ?? last?.startedOn ?? "";
+      },
+      cell: (info) =>
+        renderComponent(RelativeTimeCell, {
+          value: info.getValue() as string,
         }),
+      meta: { width: "140px" },
     },
     {
-      id: "name",
-      accessorFn: (row) => row.meta.name.name,
+      id: "owner",
+      header: "Owner",
+      cell: (info) =>
+        renderComponent(AlertOwnerCell, {
+          organization,
+          project,
+          ownerId:
+            info.row.original.alert?.spec?.annotations?.[
+              "admin_owner_user_id"
+            ] ?? "",
+        }),
+      enableSorting: false,
+      meta: { width: "180px" },
     },
     {
-      id: "lastRun",
-      accessorFn: (row) => row.alert.state.currentExecution?.executionTime,
+      id: "actions",
+      header: "",
+      cell: (info) =>
+        renderComponent(AlertActionsCell, {
+          organization,
+          project,
+          id: info.row.original.meta?.name?.name ?? "",
+          title:
+            info.row.original.alert?.spec?.displayName ||
+            info.row.original.meta?.name?.name ||
+            "",
+          isCreatedByCode:
+            !info.row.original.alert?.spec?.annotations?.[
+              "admin_owner_user_id"
+            ],
+        }),
+      enableSorting: false,
+      meta: { width: "56px", align: "right" },
     },
-    // {
-    //   id: "actions",
-    //   cell: ({ row }) =>
-    //     renderComponent(AlertsTableActionCell, {
-    //       title: row.original.name,
-    //     }),
-    // },
   ];
-
-  const columnVisibility = {
-    name: false,
-    lastRun: false,
-  };
 </script>
 
-<ResourceList {columns} {data} {columnVisibility} kind="alert">
+<ResourceTable
+  {columns}
+  data={processedData}
+  kind="alert"
+  isFiltered={searchText !== "" || selectedStatuses.length > 0}
+  {getRowHref}
+>
+  <TableToolbar
+    slot="toolbar"
+    bind:searchText
+    {filterGroups}
+    onFilterChange={handleFilterChange}
+    onClearAllFilters={clearFilters}
+    bind:sortDirection
+    disabled={(data?.length ?? 0) === 0}
+  />
   <ResourceListEmptyState
     slot="empty"
     icon={AlertIcon}
@@ -88,4 +202,4 @@
       >.
     </span>
   </ResourceListEmptyState>
-</ResourceList>
+</ResourceTable>
diff --git a/web-admin/src/features/alerts/listing/AlertsTableCompositeCell.svelte b/web-admin/src/features/alerts/listing/AlertsTableCompositeCell.svelte
deleted file mode 100644
index 55ae597b7e14..000000000000
--- a/web-admin/src/features/alerts/listing/AlertsTableCompositeCell.svelte
+++ /dev/null
@@ -1,53 +0,0 @@
-<script lang="ts">
-  import AlertIcon from "@rilldata/web-common/components/icons/AlertIcon.svelte";
-  import CancelCircleInverse from "@rilldata/web-common/components/icons/CancelCircleInverse.svelte";
-  import CheckCircleOutline from "@rilldata/web-common/components/icons/CheckCircleOutline.svelte";
-  import { timeAgo } from "@rilldata/web-common/lib/time/relative-time";
-  import ProjectAccessControls from "../../projects/ProjectAccessControls.svelte";
-  import AlertOwnerBullet from "./AlertOwnerBullet.svelte";
-
-  export let organization: string;
-  export let project: string;
-  export let id: string;
-  export let title: string;
-  export let lastTrigger: string | undefined;
-  export let ownerId: string;
-  export let lastTriggerErrorMessage: string | undefined;
-</script>
-
-<a
-  href={`alerts/${id}`}
-  class="flex flex-col gap-y-1 group px-4 py-2.5 w-full h-full"
->
-  <div class="flex gap-x-2 items-center min-h-[20px]">
-    <AlertIcon size="14px" />
-    <span
-      class="text-fg-primary text-sm font-semibold group-hover:text-accent-primary-action truncate"
-    >
-      {title}
-    </span>
-    {#if lastTrigger}
-      {#if lastTriggerErrorMessage}
-        <CancelCircleInverse className="text-red-500 shrink-0" />
-      {:else}
-        <CheckCircleOutline className="text-primary-500 shrink-0" />
-      {/if}
-    {/if}
-  </div>
-  <div
-    class="flex gap-x-1 text-fg-secondary text-xs font-normal min-h-[16px] overflow-hidden"
-  >
-    {#if !lastTrigger}
-      <span class="shrink-0">Hasn't been checked yet</span>
-    {:else}
-      <span class="shrink-0">Last checked {timeAgo(new Date(lastTrigger))}</span
-      >
-    {/if}
-    <ProjectAccessControls {organization} {project}>
-      <svelte:fragment slot="manage-project">
-        <span class="shrink-0">•</span>
-        <AlertOwnerBullet {organization} {project} {ownerId} />
-      </svelte:fragment>
-    </ProjectAccessControls>
-  </div>
-</a>
diff --git a/web-admin/src/features/alerts/metadata/AlertMetadata.svelte b/web-admin/src/features/alerts/metadata/AlertMetadata.svelte
index 2ea8d7101174..600eac4ad95e 100644
--- a/web-admin/src/features/alerts/metadata/AlertMetadata.svelte
+++ b/web-admin/src/features/alerts/metadata/AlertMetadata.svelte
@@ -21,6 +21,8 @@
   import { formatRefreshSchedule } from "@rilldata/web-admin/features/scheduled-reports/metadata/utils.ts";
   import { IconButton } from "@rilldata/web-common/components/button";
   import * as DropdownMenu from "@rilldata/web-common/components/dropdown-menu";
+  import DeleteConfirmDialog from "@rilldata/web-common/features/resources/DeleteConfirmDialog.svelte";
+  import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus";
   import CancelCircle from "@rilldata/web-common/components/icons/CancelCircle.svelte";
   import ThreeDot from "@rilldata/web-common/components/icons/ThreeDot.svelte";
   import Tooltip from "@rilldata/web-common/components/tooltip/Tooltip.svelte";
@@ -103,19 +105,27 @@
   const queryClient = useQueryClient();
   const deleteAlert = createAdminServiceDeleteAlert();
 
+  let isDeleteConfirmOpen = false;
+
   async function handleDeleteAlert() {
-    await $deleteAlert.mutateAsync({
-      org: organization,
-      project,
-      name: $alertQuery.data.resource.meta.name.name,
-    });
-    await queryClient.invalidateQueries({
-      queryKey: getRuntimeServiceListResourcesQueryKey(
-        runtimeClient.instanceId,
-      ),
-    });
-    // goto only after invalidate is complete
-    goto(`/${organization}/${project}/-/alerts`);
+    try {
+      await $deleteAlert.mutateAsync({
+        org: organization,
+        project,
+        name: $alertQuery.data.resource.meta.name.name,
+      });
+      await queryClient.invalidateQueries({
+        queryKey: getRuntimeServiceListResourcesQueryKey(
+          runtimeClient.instanceId,
+        ),
+      });
+      goto(`/${organization}/${project}/-/alerts`);
+    } catch {
+      eventBus.emit("notification", {
+        message: "Failed to delete alert",
+        type: "error",
+      });
+    }
   }
 </script>
 
@@ -151,7 +161,12 @@
               </IconButton>
             </DropdownMenu.Trigger>
             <DropdownMenu.Content align="start">
-              <DropdownMenu.Item onclick={handleDeleteAlert}>
+              <DropdownMenu.Item
+                type="destructive"
+                onclick={() => {
+                  isDeleteConfirmOpen = true;
+                }}
+              >
                 Delete Alert
               </DropdownMenu.Item>
             </DropdownMenu.Content>
@@ -245,3 +260,12 @@
     {/if}
   </div>
 {/if}
+
+<DeleteConfirmDialog
+  bind:open={isDeleteConfirmOpen}
+  title="Delete this alert?"
+  onDelete={handleDeleteAlert}
+>
+  The alert "<strong>{alertSpec?.displayName ?? ""}</strong>" will be
+  permanently deleted and will no longer trigger notifications.
+</DeleteConfirmDialog>
diff --git a/web-admin/src/features/dashboards/listing/DashboardsTable.svelte b/web-admin/src/features/dashboards/listing/DashboardsTable.svelte
index 53b0c877b4d6..28262d8db384 100644
--- a/web-admin/src/features/dashboards/listing/DashboardsTable.svelte
+++ b/web-admin/src/features/dashboards/listing/DashboardsTable.svelte
@@ -1,14 +1,7 @@
 <script lang="ts">
   import { page } from "$app/stores";
-  import ResourceError from "@rilldata/web-common/features/resources/ResourceError.svelte";
-  import ResourceList from "@rilldata/web-admin/features/resources/ResourceList.svelte";
-  import ResourceListEmptyState from "@rilldata/web-admin/features/resources/ResourceListEmptyState.svelte";
-  import ExploreIcon from "@rilldata/web-common/components/icons/ExploreIcon.svelte";
-  import DelayedSpinner from "@rilldata/web-common/features/entity-management/DelayedSpinner.svelte";
-  import type { V1Resource } from "@rilldata/web-common/runtime-client";
+  import DashboardsTable from "@rilldata/web-common/features/dashboards/listing/DashboardsTable.svelte";
   import { useRuntimeClient } from "@rilldata/web-common/runtime-client/v2";
-  import { renderComponent } from "tanstack-table-8-svelte-5";
-  import DashboardsTableCompositeCell from "./DashboardsTableCompositeCell.svelte";
   import { useDashboards, useIsInitialBuild } from "./selectors";
 
   export let isEmbedded = false;
@@ -21,147 +14,26 @@
   } = $page);
 
   $: dashboards = useDashboards(runtimeClient);
-  $: ({
-    data: dashboardsData,
-    isLoading,
-    isError,
-    isSuccess,
-    error,
-  } = $dashboards);
+  $: ({ data: dashboardsData, isLoading, isError, error } = $dashboards);
 
   $: initialBuild = useIsInitialBuild(runtimeClient);
   $: isBuilding = $initialBuild.data === true;
 
-  $: displayData = isPreview
-    ? (dashboardsData?.slice(0, previewLimit) ?? [])
-    : (dashboardsData ?? []);
-  $: hasMoreDashboards =
-    isPreview && dashboardsData && dashboardsData.length > previewLimit;
-
-  /**
-   * Table column definitions.
-   * - "composite": Renders all dashboard data in a single cell.
-   * - Others: Used for sorting and filtering but not displayed.
-   *
-   * Note: TypeScript error prevents using `ColumnDef<DashboardResource, string>[]`.
-   * Relevant issues:
-   * - https://github.com/TanStack/table/issues/4241
-   * - https://github.com/TanStack/table/issues/4302
-   */
-  const columns = [
-    {
-      id: "composite",
-      cell: ({ row }) => {
-        const resource = row.original as V1Resource;
-        const name = resource.meta.name.name;
-
-        // If not a Metrics Explorer, it's a Custom Dashboard.
-        const isMetricsExplorer = !!resource?.explore;
-        const title = isMetricsExplorer
-          ? resource.explore.spec.displayName
-          : resource.canvas.spec.displayName;
-        const description = isMetricsExplorer
-          ? resource.explore.spec.description
-          : "";
-        const refreshedOn = isMetricsExplorer
-          ? resource.explore?.state?.dataRefreshedOn
-          : resource.canvas?.state?.dataRefreshedOn;
-
-        return renderComponent(DashboardsTableCompositeCell, {
-          name,
-          title,
-          lastRefreshed: refreshedOn,
-          description,
-          error: resource.meta.reconcileError,
-          isMetricsExplorer,
-          isEmbedded,
-          organization,
-          project,
-        });
-      },
-    },
-    {
-      id: "title",
-      accessorFn: (row: V1Resource) => {
-        const isMetricsExplorer = !!row?.explore;
-        return isMetricsExplorer
-          ? row.explore.spec.displayName
-          : row.canvas.spec.displayName;
-      },
-    },
-    {
-      id: "name",
-      accessorFn: (row: V1Resource) => row.meta.name.name,
-    },
-    {
-      id: "lastRefreshed",
-      accessorFn: (row: V1Resource) => {
-        const isMetricsExplorer = !!row?.explore;
-        return isMetricsExplorer
-          ? row.explore?.state?.dataRefreshedOn
-          : row.canvas?.state?.dataRefreshedOn;
-      },
-    },
-    {
-      id: "description",
-      accessorFn: (row: V1Resource) => {
-        const isMetricsExplorer = !!row?.explore;
-        return isMetricsExplorer ? row.explore.spec.description : "";
-      },
-    },
-  ];
-
-  const columnVisibility = {
-    title: false,
-    name: false,
-    lastRefreshed: false,
-    description: false,
-  };
-
-  const initialSorting = [{ id: "name", desc: false }];
+  function getHref(name: string, isMetricsExplorer: boolean): string {
+    const slug = isMetricsExplorer ? "explore" : "canvas";
+    return isEmbedded
+      ? `/-/embed/${slug}/${name}`
+      : `/${organization}/${project}/${slug}/${name}`;
+  }
 </script>
 
-{#if isLoading || isBuilding}
-  <div class="m-auto mt-20">
-    <DelayedSpinner isLoading={true} size="24px" />
-  </div>
-{:else if isError}
-  <ResourceError kind="dashboard" {error} />
-{:else if isSuccess}
-  <div class="flex flex-col w-full gap-y-3">
-    <ResourceList
-      kind="dashboard"
-      data={displayData}
-      {columns}
-      {columnVisibility}
-      {initialSorting}
-      toolbar={!isPreview}
-    >
-      <ResourceListEmptyState
-        slot="empty"
-        icon={ExploreIcon}
-        message="You don't have any dashboards yet"
-      >
-        <span slot="action">
-          <a
-            href="https://docs.rilldata.com/developers/build/dashboards"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Create a dashboard</a
-          > to get started
-        </span>
-      </ResourceListEmptyState>
-    </ResourceList>
-    {#if hasMoreDashboards}
-      <div class="pl-4 py-1">
-        <a
-          href={`/${organization}/${project}/-/dashboards`}
-          class="text-sm font-medium text-primary-600 hover:text-primary-700 transition-colors inline-block"
-        >
-          See all dashboards →
-        </a>
-      </div>
-    {/if}
-  </div>
-{/if}
+<DashboardsTable
+  data={dashboardsData ?? []}
+  isLoading={isLoading || isBuilding}
+  {isError}
+  {error}
+  {isPreview}
+  {previewLimit}
+  {getHref}
+  seeAllHref={`/${organization}/${project}/-/dashboards`}
+/>
diff --git a/web-admin/src/features/dashboards/listing/DashboardsTableCompositeCell.svelte b/web-admin/src/features/dashboards/listing/DashboardsTableCompositeCell.svelte
deleted file mode 100644
index 41b378e308c3..000000000000
--- a/web-admin/src/features/dashboards/listing/DashboardsTableCompositeCell.svelte
+++ /dev/null
@@ -1,62 +0,0 @@
-<script lang="ts">
-  import Tag from "@rilldata/web-common/components/tag/Tag.svelte";
-  import Tooltip from "@rilldata/web-common/components/tooltip/Tooltip.svelte";
-  import TooltipContent from "@rilldata/web-common/components/tooltip/TooltipContent.svelte";
-  import ResourceTypeBadge from "@rilldata/web-common/features/entity-management/ResourceTypeBadge.svelte";
-  import { ResourceKind } from "@rilldata/web-common/features/entity-management/resource-selectors";
-  import { timeAgo } from "@rilldata/web-common/lib/time/relative-time";
-
-  export let name: string;
-  export let title: string;
-  export let lastRefreshed: string;
-  export let description: string;
-  export let error: string;
-  export let isMetricsExplorer: boolean;
-  export let isEmbedded: boolean;
-  export let organization: string;
-  export let project: string;
-
-  $: lastRefreshedDate = lastRefreshed ? new Date(lastRefreshed) : null;
-
-  $: dashboardSlug = isMetricsExplorer ? "explore" : "canvas";
-  $: href = isEmbedded
-    ? `/-/embed/${dashboardSlug}/${name}`
-    : `/${organization}/${project}/${dashboardSlug}/${name}`;
-
-  $: resourceKind = isMetricsExplorer
-    ? ResourceKind.Explore
-    : ResourceKind.Canvas;
-</script>
-
-<a class="flex flex-col gap-y-1 group px-4 py-2.5 w-full h-full" {href}>
-  <div class="flex gap-x-2 items-center min-h-[20px]">
-    <ResourceTypeBadge kind={resourceKind} />
-    <span
-      class="text-fg-secondary text-sm font-semibold group-hover:text-accent-primary-action truncate"
-    >
-      {title !== "" ? title : name}
-    </span>
-    {#if error !== ""}
-      <Tag color="red">Error</Tag>
-    {/if}
-  </div>
-  <div
-    class="flex gap-x-1 text-fg-tertiary text-xs font-normal min-h-[16px] overflow-hidden"
-  >
-    <span class="shrink-0">{name}</span>
-    {#if lastRefreshedDate}
-      <span class="shrink-0">•</span>
-      <Tooltip distance={8}>
-        <span class="shrink-0">Last refreshed {timeAgo(lastRefreshedDate)}</span
-        >
-        <TooltipContent slot="tooltip-content">
-          {lastRefreshedDate.toLocaleString()}
-        </TooltipContent>
-      </Tooltip>
-    {/if}
-    {#if description}
-      <span class="shrink-0">•</span>
-      <span class="truncate">{description}</span>
-    {/if}
-  </div>
-</a>
diff --git a/web-admin/src/features/dashboards/share/ShareDashboardPopover.svelte b/web-admin/src/features/dashboards/share/ShareDashboardPopover.svelte
index 520d5ccb97b8..8c9b2d3ce424 100644
--- a/web-admin/src/features/dashboards/share/ShareDashboardPopover.svelte
+++ b/web-admin/src/features/dashboards/share/ShareDashboardPopover.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { goto } from "$app/navigation";
+  import { page } from "$app/stores";
   import CreatePublicURLForm from "@rilldata/web-admin/features/public-urls/CreatePublicURLForm.svelte";
   import Button from "@rilldata/web-common/components/button/Button.svelte";
   import Check from "@rilldata/web-common/components/icons/Check.svelte";
@@ -24,6 +26,18 @@
   let isOpen = false;
   let copied = false;
 
+  // Auto-open when arriving from the dashboards listing's "Share" item.
+  // Strip the query param afterwards so a refresh doesn't reopen the popover.
+  $: if (!isOpen && $page.url.searchParams.get("action") === "share") {
+    isOpen = true;
+    const url = new URL($page.url);
+    url.searchParams.delete("action");
+    void goto(url.pathname + url.search, {
+      replaceState: true,
+      noScroll: true,
+    });
+  }
+
   function onCopy() {
     navigator.clipboard.writeText(window.location.href).catch(console.error);
     copied = true;
diff --git a/web-admin/src/features/organizations/user-management/OrgUsersFilters.svelte b/web-admin/src/features/organizations/user-management/OrgUsersFilters.svelte
deleted file mode 100644
index 214adbc9bcb8..000000000000
--- a/web-admin/src/features/organizations/user-management/OrgUsersFilters.svelte
+++ /dev/null
@@ -1,97 +0,0 @@
-<script lang="ts">
-  import * as DropdownMenu from "@rilldata/web-common/components/dropdown-menu";
-  import CaretUpIcon from "@rilldata/web-common/components/icons/CaretUpIcon.svelte";
-  import CaretDownIcon from "@rilldata/web-common/components/icons/CaretDownIcon.svelte";
-
-  export let filterSelection: "all" | "members" | "guests" | "pending" = "all";
-  export let showMembers = true;
-  export let roleFilter: "all" | "admin" | "editor" | "viewer" = "all";
-  export let showRoleFilter = true;
-
-  let isDropdownOpen = false;
-  let isRoleDropdownOpen = false;
-
-  const roleOptions = [
-    { value: "all" as const, label: "All Roles" },
-    { value: "admin" as const, label: "Admins" },
-    { value: "editor" as const, label: "Editors" },
-    { value: "viewer" as const, label: "Viewers" },
-  ];
-
-  $: roleFilterLabel =
-    roleOptions.find((opt) => opt.value === roleFilter)?.label ?? "All Roles";
-</script>
-
-<DropdownMenu.Root bind:open={isDropdownOpen}>
-  <DropdownMenu.Trigger
-    class="min-w-[140px] flex flex-row justify-between gap-1 items-center rounded-sm border bg-input px-2 py-1"
-  >
-    <span class="capitalize"
-      >{filterSelection === "all" ? "All users" : filterSelection}</span
-    >
-    {#if isDropdownOpen}
-      <CaretUpIcon size="12px" />
-    {:else}
-      <CaretDownIcon size="12px" />
-    {/if}
-  </DropdownMenu.Trigger>
-  <DropdownMenu.Content align="start" class="min-w-[140px]">
-    <DropdownMenu.CheckboxItem
-      class="font-normal flex items-center"
-      checked={filterSelection === "all"}
-      onclick={() => {
-        filterSelection = "all";
-      }}
-    >
-      <span>All</span>
-    </DropdownMenu.CheckboxItem>
-    {#if showMembers}
-      <DropdownMenu.CheckboxItem
-        class="font-normal flex items-center"
-        checked={filterSelection === "members"}
-        onclick={() => {
-          filterSelection = "members";
-        }}
-      >
-        <span>Members</span>
-      </DropdownMenu.CheckboxItem>
-    {/if}
-    <DropdownMenu.CheckboxItem
-      class="font-normal flex items-center"
-      checked={filterSelection === "pending"}
-      onclick={() => {
-        filterSelection = "pending";
-      }}
-    >
-      <span>Pending invites</span>
-    </DropdownMenu.CheckboxItem>
-  </DropdownMenu.Content>
-</DropdownMenu.Root>
-
-{#if showRoleFilter}
-  <DropdownMenu.Root bind:open={isRoleDropdownOpen}>
-    <DropdownMenu.Trigger
-      class="min-w-[120px] flex flex-row justify-between gap-1 items-center rounded-sm border bg-input px-2 py-1"
-    >
-      <span>{roleFilterLabel}</span>
-      {#if isRoleDropdownOpen}
-        <CaretUpIcon size="12px" />
-      {:else}
-        <CaretDownIcon size="12px" />
-      {/if}
-    </DropdownMenu.Trigger>
-    <DropdownMenu.Content align="start" class="min-w-[120px]">
-      {#each roleOptions as option}
-        <DropdownMenu.CheckboxItem
-          class="font-normal flex items-center"
-          checked={roleFilter === option.value}
-          onclick={() => {
-            roleFilter = option.value;
-          }}
-        >
-          <span>{option.label}</span>
-        </DropdownMenu.CheckboxItem>
-      {/each}
-    </DropdownMenu.Content>
-  </DropdownMenu.Root>
-{/if}
diff --git a/web-admin/src/features/projects/ProjectPage.svelte b/web-admin/src/features/projects/ProjectPage.svelte
index 7aea6e2c57ea..81d465ae97b3 100644
--- a/web-admin/src/features/projects/ProjectPage.svelte
+++ b/web-admin/src/features/projects/ProjectPage.svelte
@@ -11,8 +11,11 @@
   $: ({ isLoading, isError, isSuccess, error } = $query);
 </script>
 
-<ContentContainer title="{kind.charAt(0).toUpperCase() + kind.slice(1)}s">
-  <div class="flex flex-col items-center gap-y-4">
+<ContentContainer
+  maxWidth={1100}
+  title="{kind.charAt(0).toUpperCase() + kind.slice(1)}s"
+>
+  <div class="flex flex-col gap-y-4 w-full">
     {#if isLoading}
       <div class="m-auto mt-20">
         <DelayedSpinner isLoading size="24px" />
diff --git a/web-admin/src/features/projects/environment-variables/DeleteDialog.svelte b/web-admin/src/features/projects/environment-variables/DeleteDialog.svelte
index 7812e528b7b6..4ae0471ee0e8 100644
--- a/web-admin/src/features/projects/environment-variables/DeleteDialog.svelte
+++ b/web-admin/src/features/projects/environment-variables/DeleteDialog.svelte
@@ -4,16 +4,7 @@
     createAdminServiceUpdateProjectVariables,
     getAdminServiceGetProjectVariablesQueryKey,
   } from "@rilldata/web-admin/client";
-  import {
-    AlertDialog,
-    AlertDialogContent,
-    AlertDialogDescription,
-    AlertDialogFooter,
-    AlertDialogHeader,
-    AlertDialogTitle,
-    AlertDialogTrigger,
-  } from "@rilldata/web-common/components/alert-dialog/index.js";
-  import { Button } from "@rilldata/web-common/components/button/index.js";
+  import DeleteConfirmDialog from "@rilldata/web-common/features/resources/DeleteConfirmDialog.svelte";
   import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus";
   import { useQueryClient } from "@tanstack/svelte-query";
 
@@ -27,14 +18,14 @@
   const queryClient = useQueryClient();
   const updateProjectVariables = createAdminServiceUpdateProjectVariables();
 
-  async function onDelete(deletedName: string) {
+  async function handleDelete() {
     try {
       await $updateProjectVariables.mutateAsync({
         org: organization,
         project,
         data: {
           environment,
-          unsetVariables: [deletedName],
+          unsetVariables: [name],
         },
       });
 
@@ -59,50 +50,14 @@
       });
     }
   }
-
-  async function handleDelete() {
-    try {
-      onDelete(name);
-      open = false;
-    } catch (error) {
-      console.error("Failed to delete environment variable:", error);
-    }
-  }
 </script>
 
-<AlertDialog bind:open>
-  <AlertDialogTrigger>
-    {#snippet child({ props })}
-      <div {...props} class="hidden"></div>
-    {/snippet}
-  </AlertDialogTrigger>
-  <AlertDialogContent>
-    <AlertDialogHeader>
-      <AlertDialogTitle>Delete this environment variable?</AlertDialogTitle>
-      <AlertDialogDescription>
-        <div class="mt-1">
-          The environment variable <span class="source-code text-sm font-medium"
-            >{name}</span
-          > will no longer be available for this project.
-        </div>
-      </AlertDialogDescription>
-    </AlertDialogHeader>
-    <AlertDialogFooter>
-      <Button
-        type="tertiary"
-        onClick={() => {
-          open = false;
-        }}
-      >
-        Cancel
-      </Button>
-      <Button type="destructive" onClick={handleDelete}>Yes, delete</Button>
-    </AlertDialogFooter>
-  </AlertDialogContent>
-</AlertDialog>
-
-<style lang="postcss">
-  .source-code {
-    font-family: "Source Code Variable", monospace;
-  }
-</style>
+<DeleteConfirmDialog
+  bind:open
+  title="Delete this environment variable?"
+  onDelete={handleDelete}
+>
+  The environment variable <span class="font-mono text-sm font-medium"
+    >{name}</span
+  > will no longer be available for this project.
+</DeleteConfirmDialog>
diff --git a/web-admin/src/features/projects/status/logs/ProjectLogsPage.svelte b/web-admin/src/features/projects/status/logs/ProjectLogsPage.svelte
index 1c7ed4877d16..e8a3d3fdc520 100644
--- a/web-admin/src/features/projects/status/logs/ProjectLogsPage.svelte
+++ b/web-admin/src/features/projects/status/logs/ProjectLogsPage.svelte
@@ -10,10 +10,8 @@
     V1LogLevel,
     type V1WatchLogsResponse,
   } from "@rilldata/web-common/runtime-client";
-  import Search from "@rilldata/web-common/components/search/Search.svelte";
-  import * as DropdownMenu from "@rilldata/web-common/components/dropdown-menu";
-  import CaretDownIcon from "@rilldata/web-common/components/icons/CaretDownIcon.svelte";
-  import CaretUpIcon from "@rilldata/web-common/components/icons/CaretUpIcon.svelte";
+  import { TableToolbar } from "@rilldata/web-common/components/table-toolbar";
+  import type { FilterGroup } from "@rilldata/web-common/components/table-toolbar/types";
   import {
     createUrlFilterSync,
     parseArrayParam,
@@ -38,7 +36,6 @@
   let logsVersion = 0;
   let logsContainer: HTMLDivElement;
   let connectionError: string | null = null;
-  let filterDropdownOpen = false;
   let searchText = parseStringParam($page.url.searchParams.get("q"));
   let selectedLevels = parseArrayParam($page.url.searchParams.get("level"));
   let mounted = false;
@@ -103,19 +100,26 @@
     totalLogs = logStore.getAll().length;
   }
 
-  $: selectedLevelLabel = (() => {
-    if (selectedLevels.length === 0) return "All levels";
-    if (selectedLevels.length === 1) {
-      return (
-        filterableLevels.find((l) => l.value === selectedLevels[0])?.label ??
-        "1 level"
-      );
-    }
-    const first = filterableLevels.find(
-      (l) => l.value === selectedLevels[0],
-    )?.label;
-    return `${first}, +${selectedLevels.length - 1} other${selectedLevels.length > 2 ? "s" : ""}`;
-  })();
+  $: filterGroups = [
+    {
+      label: "Levels",
+      key: "level",
+      options: filterableLevels,
+      selected: selectedLevels,
+      defaultValue: [],
+      multiSelect: true,
+    },
+  ] satisfies FilterGroup[];
+
+  function handleFilterChange(key: string, selected: string | string[]) {
+    if (key !== "level") return;
+    selectedLevels = Array.isArray(selected) ? selected : [selected];
+  }
+
+  function clearFilters() {
+    selectedLevels = [];
+    searchText = "";
+  }
 
   let unsubs: (() => void)[] = [];
 
@@ -224,19 +228,6 @@
       return "";
     }
   }
-
-  function toggleLevel(level: string) {
-    if (selectedLevels.includes(level)) {
-      selectedLevels = selectedLevels.filter((l) => l !== level);
-    } else {
-      selectedLevels = [...selectedLevels, level];
-    }
-  }
-
-  function clearFilters() {
-    selectedLevels = [];
-    searchText = "";
-  }
 </script>
 
 <section class="flex flex-col gap-y-4 size-full">
@@ -263,55 +254,13 @@
     </div>
   </div>
 
-  <div class="flex flex-row items-center gap-x-4 min-h-9">
-    <div class="flex-1 min-w-0 min-h-9">
-      <Search
-        bind:value={searchText}
-        placeholder="Search"
-        large
-        autofocus={false}
-        showBorderOnFocus={false}
-        retainValueOnMount
-      />
-    </div>
-
-    <DropdownMenu.Root bind:open={filterDropdownOpen}>
-      <DropdownMenu.Trigger
-        class="min-w-fit min-h-9 flex flex-row gap-1 items-center rounded-sm border bg-input {filterDropdownOpen
-          ? 'bg-gray-200'
-          : 'hover:bg-surface-hover'} px-2 py-1"
-      >
-        <span class="text-fg-secondary font-medium">
-          {selectedLevelLabel}
-        </span>
-        {#if filterDropdownOpen}
-          <CaretUpIcon size="12px" />
-        {:else}
-          <CaretDownIcon size="12px" />
-        {/if}
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Content align="start" class="w-48">
-        {#each filterableLevels as level}
-          <DropdownMenu.CheckboxItem
-            closeOnSelect={false}
-            checked={selectedLevels.includes(level.value)}
-            onCheckedChange={() => toggleLevel(level.value)}
-          >
-            {level.label}
-          </DropdownMenu.CheckboxItem>
-        {/each}
-      </DropdownMenu.Content>
-    </DropdownMenu.Root>
-
-    {#if selectedLevels.length > 0 || searchText}
-      <button
-        class="shrink-0 text-sm text-primary-500 hover:text-primary-600 whitespace-nowrap"
-        onclick={clearFilters}
-      >
-        Clear
-      </button>
-    {/if}
-  </div>
+  <TableToolbar
+    bind:searchText
+    {filterGroups}
+    onFilterChange={handleFilterChange}
+    onClearAllFilters={clearFilters}
+    showSort={false}
+  />
 
   <div class="logs-container" bind:this={logsContainer}>
     {#if hasConnectionError}
diff --git a/web-admin/src/features/public-urls/PublicURLsActionsRow.svelte b/web-admin/src/features/public-urls/PublicURLsActionsRow.svelte
index 5a26d5d7ac73..1182f4071fb2 100644
--- a/web-admin/src/features/public-urls/PublicURLsActionsRow.svelte
+++ b/web-admin/src/features/public-urls/PublicURLsActionsRow.svelte
@@ -4,12 +4,16 @@
   import ThreeDot from "@rilldata/web-common/components/icons/ThreeDot.svelte";
   import { copyToClipboard } from "@rilldata/web-common/lib/actions/copy-to-clipboard";
   import { Trash2Icon, CopyIcon } from "lucide-svelte";
-  import DeletePublicURLConfirmDialog from "./DeletePublicURLConfirmDialog.svelte";
+  import DeleteConfirmDialog from "@rilldata/web-common/features/resources/DeleteConfirmDialog.svelte";
 
   export let id: string;
   export let url: string;
   export let onDelete: (deletedTokenId: string) => void;
 
+  async function handleDelete() {
+    onDelete(id);
+  }
+
   function handleCopy() {
     copyToClipboard(url, "Public URL copied to clipboard");
   }
@@ -47,4 +51,10 @@
   </DropdownMenu.Content>
 </DropdownMenu.Root>
 
-<DeletePublicURLConfirmDialog bind:open={isDeleteConfirmOpen} {id} {onDelete} />
+<DeleteConfirmDialog
+  bind:open={isDeleteConfirmOpen}
+  title="Delete this public URL?"
+  onDelete={handleDelete}
+>
+  Recipients of this URL will no longer be able to access it.
+</DeleteConfirmDialog>
diff --git a/web-admin/src/features/resources/ResourceList.svelte b/web-admin/src/features/resources/ResourceList.svelte
deleted file mode 100644
index 0bf3635154dd..000000000000
--- a/web-admin/src/features/resources/ResourceList.svelte
+++ /dev/null
@@ -1,158 +0,0 @@
-<script lang="ts">
-  import type {
-    ColumnDef,
-    SortingState,
-    TableOptions,
-  } from "tanstack-table-8-svelte-5";
-  import {
-    createSvelteTable,
-    flexRender,
-    getCoreRowModel,
-    getFilteredRowModel,
-    getSortedRowModel,
-  } from "tanstack-table-8-svelte-5";
-  import { setContext } from "svelte";
-  import { writable } from "svelte/store";
-  import ResourceListToolbar from "./ResourceListToolbar.svelte";
-
-  export let data: unknown[] = [];
-  export let columns: ColumnDef<unknown, unknown>[] = [];
-  export let columnVisibility: Record<string, boolean> = {};
-  export let kind: string;
-  export let toolbar: boolean = true;
-  export let fixedRowHeight: boolean = true;
-  export let initialSorting: SortingState = [];
-
-  let sorting: SortingState = initialSorting;
-  function setSorting(updater) {
-    if (updater instanceof Function) {
-      sorting = updater(sorting);
-    } else {
-      sorting = updater;
-    }
-    options.update((old) => ({
-      ...old,
-      state: {
-        ...old.state,
-        sorting,
-      },
-    }));
-  }
-
-  const options = writable<TableOptions<unknown>>({
-    data: data,
-    columns: columns,
-    globalFilterFn: "auto",
-    enableSorting: true,
-    enableFilters: true,
-    enableGlobalFilter: true,
-    state: {
-      sorting,
-      columnVisibility,
-    },
-    onSortingChange: setSorting,
-    getCoreRowModel: getCoreRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-  });
-
-  const table = createSvelteTable(options);
-
-  // Expose the table API to the children components via Context
-  setContext("table", table);
-
-  function rerender() {
-    options.update((options) => ({
-      ...options,
-      data: data,
-    }));
-  }
-
-  // Whenever the input data changes, rerender the table
-  $: data && rerender();
-
-  // Check if we're in a filtered state (search is active)
-  $: isFiltered = $table.getState().globalFilter?.length > 0;
-</script>
-
-<div class="flex flex-col gap-y-3 w-full">
-  {#if toolbar}
-    <slot name="toolbar">
-      <ResourceListToolbar />
-    </slot>
-  {/if}
-
-  <div class="w-full">
-    <slot name="header" />
-    <ul role="list" class="resource-list">
-      {#each $table.getRowModel().rows as row (row.id)}
-        <li class="resource-list-item" class:fixed-height={fixedRowHeight}>
-          {#each row.getVisibleCells() as cell (cell.id)}
-            <svelte:component
-              this={flexRender(cell.column.columnDef.cell, cell.getContext())}
-            />
-          {/each}
-        </li>
-      {:else}
-        <li class="resource-list-item-empty">
-          <div class="text-center py-16">
-            {#if isFiltered}
-              <!-- Filtered empty state: no results match search -->
-              <div class="flex flex-col gap-y-2 items-center text-sm">
-                <div class="text-fg-secondary font-semibold">
-                  No {kind}s match your search
-                </div>
-                <div class="text-fg-secondary">
-                  Try adjusting your search terms
-                </div>
-              </div>
-            {:else}
-              <!-- Custom empty state via slot, or fallback -->
-              <slot name="empty">
-                <div class="text-fg-secondary text-sm font-semibold">
-                  You don't have any {kind}s yet
-                </div>
-              </slot>
-            {/if}
-          </div>
-        </li>
-      {/each}
-    </ul>
-  </div>
-</div>
-
-<style lang="postcss">
-  .resource-list {
-    @apply list-none p-0 m-0 w-full;
-  }
-
-  .resource-list-item,
-  .resource-list-item-empty {
-    @apply block w-full border bg-surface-background;
-  }
-
-  .resource-list-item.fixed-height {
-    @apply h-[60px];
-  }
-
-  /* Remove top border on non-first items to avoid double borders */
-  .resource-list-item + .resource-list-item {
-    @apply border-t-0;
-  }
-
-  /* Rounded corners on first and last items */
-  .resource-list-item:first-child,
-  .resource-list-item-empty:first-child {
-    @apply rounded-t-lg;
-  }
-
-  .resource-list-item:last-child,
-  .resource-list-item-empty:last-child {
-    @apply rounded-b-lg;
-  }
-
-  /* Hover effect on list items */
-  .resource-list-item:hover {
-    @apply bg-surface-hover;
-  }
-</style>
diff --git a/web-admin/src/features/scheduled-reports/history/ReportHistoryTable.svelte b/web-admin/src/features/scheduled-reports/history/ReportHistoryTable.svelte
index f40936211e39..49457452cf6a 100644
--- a/web-admin/src/features/scheduled-reports/history/ReportHistoryTable.svelte
+++ b/web-admin/src/features/scheduled-reports/history/ReportHistoryTable.svelte
@@ -14,10 +14,12 @@
 
   $: reportQuery = useReport(runtimeClient, report);
 
+  $: history =
+    $reportQuery.data?.resource?.report?.state?.executionHistory ?? [];
+
   /**
    * Table column definitions.
-   * - "composite": Renders all dashboard data in a single cell.
-   * - Others: Used for sorting and filtering but not displayed.
+   * - "composite": Renders all execution data in a single cell.
    */
   const columns: ColumnDef<V1ReportExecution>[] = [
     {
@@ -45,13 +47,13 @@
     </div>
   {:else if $reportQuery.isLoading}
     <div class="text-fg-secondary">Loading...</div>
-  {:else if !$reportQuery.data?.resource.report.state.executionHistory.length}
+  {:else if !history.length}
     <NoRunsYet />
   {:else}
     <ResourceList
       kind="report"
       {columns}
-      data={$reportQuery.data?.resource.report.state.executionHistory}
+      data={history}
       toolbar={false}
       fixedRowHeight={false}
     />
diff --git a/web-admin/src/features/scheduled-reports/listing/ReportActionsCell.svelte b/web-admin/src/features/scheduled-reports/listing/ReportActionsCell.svelte
new file mode 100644
index 000000000000..37d0a1ae03c4
--- /dev/null
+++ b/web-admin/src/features/scheduled-reports/listing/ReportActionsCell.svelte
@@ -0,0 +1,130 @@
+<script lang="ts">
+  import { goto } from "$app/navigation";
+  import {
+    createAdminServiceDeleteReport,
+    createAdminServiceTriggerReport,
+  } from "@rilldata/web-admin/client";
+  import IconButton from "@rilldata/web-common/components/button/IconButton.svelte";
+  import * as DropdownMenu from "@rilldata/web-common/components/dropdown-menu";
+  import ThreeDot from "@rilldata/web-common/components/icons/ThreeDot.svelte";
+  import DeleteConfirmDialog from "@rilldata/web-common/features/resources/DeleteConfirmDialog.svelte";
+  import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus";
+  import { getRuntimeServiceListResourcesQueryKey } from "@rilldata/web-common/runtime-client";
+  import { useRuntimeClient } from "@rilldata/web-common/runtime-client/v2";
+  import { useQueryClient } from "@tanstack/svelte-query";
+  import { Pencil, PlayIcon, Trash2Icon } from "lucide-svelte";
+
+  export let organization: string;
+  export let project: string;
+  export let id: string;
+  export let title: string;
+  export let isCreatedByCode: boolean;
+
+  const runtimeClient = useRuntimeClient();
+  const queryClient = useQueryClient();
+  const deleteReport = createAdminServiceDeleteReport();
+  const triggerReport = createAdminServiceTriggerReport();
+
+  let isDropdownOpen = false;
+  let isDeleteConfirmOpen = false;
+
+  async function handleRun() {
+    try {
+      await $triggerReport.mutateAsync({
+        org: organization,
+        project,
+        name: id,
+        data: {},
+      });
+      eventBus.emit("notification", {
+        message: "Triggered an ad-hoc run of this report.",
+        type: "success",
+      });
+      await queryClient.invalidateQueries({
+        queryKey: getRuntimeServiceListResourcesQueryKey(
+          runtimeClient.instanceId,
+        ),
+      });
+    } catch {
+      eventBus.emit("notification", {
+        message: "Failed to trigger report",
+        type: "error",
+      });
+    }
+  }
+
+  function handleEdit() {
+    void goto(`/${organization}/${project}/-/reports/${id}`);
+  }
+
+  async function handleDelete() {
+    try {
+      await $deleteReport.mutateAsync({
+        org: organization,
+        project,
+        name: id,
+      });
+      await queryClient.invalidateQueries({
+        queryKey: getRuntimeServiceListResourcesQueryKey(
+          runtimeClient.instanceId,
+        ),
+      });
+    } catch {
+      eventBus.emit("notification", {
+        message: "Failed to delete report",
+        type: "error",
+      });
+    }
+  }
+</script>
+
+{#if !isCreatedByCode}
+  <div class="flex justify-end" data-no-row-click>
+    <DropdownMenu.Root bind:open={isDropdownOpen}>
+      <DropdownMenu.Trigger class="flex-none">
+        <IconButton
+          rounded
+          active={isDropdownOpen}
+          ariaLabel={`Actions for ${title}`}
+        >
+          <ThreeDot size="16px" />
+        </IconButton>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content side="bottom" align="start" class="min-w-[95px]">
+        <DropdownMenu.Item
+          class="font-normal flex items-center"
+          onclick={handleRun}
+        >
+          <PlayIcon size="12px" />
+          <span class="ml-2">Run</span>
+        </DropdownMenu.Item>
+        <DropdownMenu.Item
+          class="font-normal flex items-center"
+          onclick={handleEdit}
+        >
+          <Pencil size="12px" />
+          <span class="ml-2">Edit</span>
+        </DropdownMenu.Item>
+        <DropdownMenu.Item
+          class="font-normal flex items-center"
+          type="destructive"
+          onclick={() => {
+            isDeleteConfirmOpen = true;
+          }}
+        >
+          <Trash2Icon size="12px" />
+          <span class="ml-2">Delete</span>
+        </DropdownMenu.Item>
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  </div>
+
+  <DeleteConfirmDialog
+    bind:open={isDeleteConfirmOpen}
+    title="Delete this report?"
+    onDelete={handleDelete}
+  >
+    The report "<strong>{title}</strong>" will be permanently deleted and will
+    no longer send scheduled emails.
+  </DeleteConfirmDialog>
+{/if}
diff --git a/web-admin/src/features/scheduled-reports/listing/ReportFrequencyCell.svelte b/web-admin/src/features/scheduled-reports/listing/ReportFrequencyCell.svelte
new file mode 100644
index 000000000000..daf081589a33
--- /dev/null
+++ b/web-admin/src/features/scheduled-reports/listing/ReportFrequencyCell.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+  import Tooltip from "@rilldata/web-common/components/tooltip/Tooltip.svelte";
+  import TooltipContent from "@rilldata/web-common/components/tooltip/TooltipContent.svelte";
+
+  export let frequency: string;
+</script>
+
+{#if frequency}
+  <Tooltip distance={8}>
+    <span class="text-fg-primary truncate block">{frequency}</span>
+    <TooltipContent slot="tooltip-content">{frequency}</TooltipContent>
+  </Tooltip>
+{:else}
+  <span class="text-fg-tertiary">—</span>
+{/if}
diff --git a/web-admin/src/features/scheduled-reports/listing/ReportOwnerBullet.svelte b/web-admin/src/features/scheduled-reports/listing/ReportOwnerBullet.svelte
deleted file mode 100644
index 8b0d94d19fee..000000000000
--- a/web-admin/src/features/scheduled-reports/listing/ReportOwnerBullet.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script lang="ts">
-  import { useReportOwnerName } from "../selectors";
-
-  export let organization: string;
-  export let project: string;
-  export let ownerId: string;
-
-  const ownerName = useReportOwnerName(organization, project, ownerId);
-</script>
-
-{#if $ownerName.isSuccess}
-  <span>
-    {$ownerName.data ? `Created by ${$ownerName.data}` : "Created through code"}
-  </span>
-{/if}
diff --git a/web-admin/src/features/scheduled-reports/listing/ReportOwnerCell.svelte b/web-admin/src/features/scheduled-reports/listing/ReportOwnerCell.svelte
new file mode 100644
index 000000000000..d1c6c237a428
--- /dev/null
+++ b/web-admin/src/features/scheduled-reports/listing/ReportOwnerCell.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+  import ProjectAccessControls from "../../projects/ProjectAccessControls.svelte";
+  import { useReportOwnerName } from "../selectors";
+
+  export let organization: string;
+  export let project: string;
+  export let ownerId: string;
+
+  $: ownerName = useReportOwnerName(organization, project, ownerId);
+</script>
+
+<ProjectAccessControls {organization} {project}>
+  <svelte:fragment slot="manage-project">
+    {#if $ownerName.isSuccess}
+      <span class="truncate">
+        {$ownerName.data ?? "Code-defined"}
+      </span>
+    {:else}
+      <span class="text-fg-tertiary">—</span>
+    {/if}
+  </svelte:fragment>
+</ProjectAccessControls>
diff --git a/web-admin/src/features/scheduled-reports/listing/ReportStatusCell.svelte b/web-admin/src/features/scheduled-reports/listing/ReportStatusCell.svelte
new file mode 100644
index 000000000000..7d253d5700ac
--- /dev/null
+++ b/web-admin/src/features/scheduled-reports/listing/ReportStatusCell.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+  import StatusTextCell from "@rilldata/web-common/features/resources/cells/StatusTextCell.svelte";
+  import type { V1Resource } from "@rilldata/web-common/runtime-client";
+
+  export let resource: V1Resource;
+
+  type Tone = "default" | "muted" | "success" | "destructive";
+
+  $: ({ label, tone } = describeStatus(resource));
+
+  function describeStatus(r: V1Resource): { label: string; tone: Tone } {
+    const last = r.report?.state?.executionHistory?.[0];
+    if (!last) return { label: "Pending", tone: "muted" };
+    if (last.errorMessage) return { label: "Error", tone: "destructive" };
+    return { label: "OK", tone: "success" };
+  }
+</script>
+
+<StatusTextCell {label} {tone} />
diff --git a/web-admin/src/features/scheduled-reports/listing/ReportsTable.svelte b/web-admin/src/features/scheduled-reports/listing/ReportsTable.svelte
index b36870730788..cc31abeb832f 100644
--- a/web-admin/src/features/scheduled-reports/listing/ReportsTable.svelte
+++ b/web-admin/src/features/scheduled-reports/listing/ReportsTable.svelte
@@ -1,72 +1,201 @@
 <script lang="ts">
-  import ResourceList from "@rilldata/web-common/features/resources/ResourceList.svelte";
   import ResourceListEmptyState from "@rilldata/web-common/features/resources/ResourceListEmptyState.svelte";
+  import ResourceTable from "@rilldata/web-common/features/resources/ResourceTable.svelte";
+  import NameCell from "@rilldata/web-common/features/resources/cells/NameCell.svelte";
+  import RelativeTimeCell from "@rilldata/web-common/features/resources/cells/RelativeTimeCell.svelte";
   import ReportIcon from "@rilldata/web-common/components/icons/ReportIcon.svelte";
+  import {
+    applyTableFilters,
+    TableToolbar,
+  } from "@rilldata/web-common/components/table-toolbar";
+  import type {
+    FilterGroup,
+    SortDirection,
+  } from "@rilldata/web-common/components/table-toolbar/types";
   import type { V1Resource } from "@rilldata/web-common/runtime-client";
+  import cronstrue from "cronstrue";
   import { renderComponent, type ColumnDef } from "tanstack-table-8-svelte-5";
-  import ReportsTableCompositeCell from "./ReportsTableCompositeCell.svelte";
+  import ReportActionsCell from "./ReportActionsCell.svelte";
+  import ReportFrequencyCell from "./ReportFrequencyCell.svelte";
+  import ReportOwnerCell from "./ReportOwnerCell.svelte";
+  import ReportStatusCell from "./ReportStatusCell.svelte";
 
   export let data: V1Resource[];
   export let organization: string;
   export let project: string;
 
-  /**
-   * Table column definitions.
-   * - "composite": Renders all dashboard data in a single cell.
-   * - Others: Used for sorting and filtering but not displayed.
-   *
-   * Note: TypeScript error prevents using `ColumnDef<DashboardResource, string>[]`.
-   * Relevant issues:
-   * - https://github.com/TanStack/table/issues/4241
-   * - https://github.com/TanStack/table/issues/4302
-   */
+  let searchText = "";
+  let selectedResults: string[] = [];
+  let sortDirection: SortDirection = "newest";
+
+  function getDisplayName(r: V1Resource): string {
+    return r.report?.spec?.displayName || r.meta?.name?.name || "";
+  }
+
+  function getCreatedOn(r: V1Resource): string | undefined {
+    return r.meta?.createdOn;
+  }
+
+  function getLastRun(r: V1Resource): string {
+    const last = r.report?.state?.executionHistory?.[0];
+    return last?.finishedOn ?? last?.startedOn ?? last?.reportTime ?? "";
+  }
+
+  function getResult(r: V1Resource): "ok" | "error" {
+    return r.report?.state?.executionHistory?.[0]?.errorMessage
+      ? "error"
+      : "ok";
+  }
+
+  function matchesSearch(r: V1Resource, q: string): boolean {
+    if (!q) return true;
+    return getDisplayName(r).toLowerCase().includes(q.toLowerCase());
+  }
+
+  function getFrequency(r: V1Resource): string {
+    const cron = r.report?.spec?.refreshSchedule?.cron;
+    if (!cron) return "";
+    try {
+      return cronstrue.toString(cron);
+    } catch {
+      return cron;
+    }
+  }
+
+  $: processedData = applyTableFilters({
+    data: data ?? [],
+    searchText,
+    matchesSearch,
+    filterPredicates: [
+      (r) =>
+        selectedResults.length === 0 || selectedResults.includes(getResult(r)),
+    ],
+    sortDirection,
+    getSortKey: getCreatedOn,
+  });
+
+  $: filterGroups = [
+    {
+      label: "Last run",
+      key: "result",
+      options: [
+        { value: "ok", label: "OK" },
+        { value: "error", label: "Error" },
+      ],
+      selected: selectedResults,
+      defaultValue: [],
+      multiSelect: true,
+    },
+  ] satisfies FilterGroup[];
+
+  function handleFilterChange(key: string, selected: string | string[]) {
+    if (key !== "result") return;
+    selectedResults = Array.isArray(selected) ? selected : [selected];
+  }
+
+  function clearFilters() {
+    selectedResults = [];
+    searchText = "";
+  }
+
+  function getRowHref(row: unknown): string {
+    const r = row as V1Resource;
+    return `reports/${r.meta?.name?.name ?? ""}`;
+  }
+
   const columns: ColumnDef<V1Resource, string>[] = [
     {
-      id: "composite",
+      id: "name",
+      header: "Report name",
+      accessorFn: (row) =>
+        row.report?.spec?.displayName || row.meta?.name?.name || "",
+      cell: (info) =>
+        renderComponent(NameCell, { name: info.getValue() as string }),
+    },
+    {
+      id: "status",
+      header: "Status",
+      accessorFn: (row) => getResult(row),
       cell: (info) =>
-        renderComponent(ReportsTableCompositeCell, {
+        renderComponent(ReportStatusCell, { resource: info.row.original }),
+      meta: { width: "120px" },
+    },
+    {
+      id: "frequency",
+      header: "Frequency",
+      accessorFn: getFrequency,
+      cell: (info) =>
+        renderComponent(ReportFrequencyCell, {
+          frequency: info.getValue() as string,
+        }),
+      meta: { width: "180px" },
+    },
+    // TODO(#9283): add the Tags column once resource-level tags are exposed
+    // by the API. https://github.com/rilldata/rill/issues/9283
+    {
+      id: "lastRun",
+      header: "Last run",
+      accessorFn: getLastRun,
+      cell: (info) =>
+        renderComponent(RelativeTimeCell, {
+          value: info.getValue() as string,
+        }),
+      meta: { width: "140px" },
+    },
+    {
+      id: "owner",
+      header: "Owner",
+      cell: (info) =>
+        renderComponent(ReportOwnerCell, {
           organization,
           project,
-          id: info.row.original.meta.name.name,
-          title: info.row.original.report.spec.displayName,
-          lastRun:
-            info.row.original.report.state.executionHistory[0]?.reportTime,
-          timeZone: info.row.original.report.spec.refreshSchedule.timeZone,
-          frequency: info.row.original.report.spec.refreshSchedule.cron,
           ownerId:
-            info.row.original.report.spec.annotations["admin_owner_user_id"],
-          lastRunErrorMessage:
-            info.row.original.report.state.executionHistory[0]?.errorMessage,
+            info.row.original.report?.spec?.annotations?.[
+              "admin_owner_user_id"
+            ] ?? "",
         }),
+      enableSorting: false,
+      meta: { width: "180px" },
     },
     {
-      id: "name",
-      accessorFn: (row) => row.meta.name.name,
-    },
-    {
-      id: "lastRun",
-      accessorFn: (row) => row.report.state.currentExecution?.reportTime,
+      id: "actions",
+      header: "",
+      cell: (info) =>
+        renderComponent(ReportActionsCell, {
+          organization,
+          project,
+          id: info.row.original.meta?.name?.name ?? "",
+          title:
+            info.row.original.report?.spec?.displayName ||
+            info.row.original.meta?.name?.name ||
+            "",
+          isCreatedByCode:
+            !info.row.original.report?.spec?.annotations?.[
+              "admin_owner_user_id"
+            ],
+        }),
+      enableSorting: false,
+      meta: { width: "56px", align: "right" },
     },
-    // {
-    //   id: "nextRun",
-    //   accessorFn: (row) => row.nextRun,
-    // },
-    // {
-    //   id: "actions",
-    //   cell: ({ row }) =>
-    //     renderComponent(ReportsTableActionCell, {
-    //       title: row.original.name,
-    //     }),
-    // },
   ];
-
-  const columnVisibility = {
-    name: false,
-    lastRun: false,
-  };
 </script>
 
-<ResourceList {columns} {data} {columnVisibility} kind="report">
+<ResourceTable
+  {columns}
+  data={processedData}
+  kind="report"
+  isFiltered={searchText !== "" || selectedResults.length > 0}
+  {getRowHref}
+>
+  <TableToolbar
+    slot="toolbar"
+    bind:searchText
+    {filterGroups}
+    onFilterChange={handleFilterChange}
+    onClearAllFilters={clearFilters}
+    bind:sortDirection
+    disabled={(data?.length ?? 0) === 0}
+  />
   <ResourceListEmptyState
     slot="empty"
     icon={ReportIcon}
@@ -82,4 +211,4 @@
       > from any dashboard
     </span>
   </ResourceListEmptyState>
-</ResourceList>
+</ResourceTable>
diff --git a/web-admin/src/features/scheduled-reports/listing/ReportsTableCompositeCell.svelte b/web-admin/src/features/scheduled-reports/listing/ReportsTableCompositeCell.svelte
deleted file mode 100644
index e84b9a4dbcc8..000000000000
--- a/web-admin/src/features/scheduled-reports/listing/ReportsTableCompositeCell.svelte
+++ /dev/null
@@ -1,59 +0,0 @@
-<script lang="ts">
-  import CancelCircleInverse from "@rilldata/web-common/components/icons/CancelCircleInverse.svelte";
-  import CheckCircleOutline from "@rilldata/web-common/components/icons/CheckCircleOutline.svelte";
-  import ReportIcon from "@rilldata/web-common/components/icons/ReportIcon.svelte";
-  import cronstrue from "cronstrue";
-  import ProjectAccessControls from "../../projects/ProjectAccessControls.svelte";
-  import { formatRunDate } from "../tableUtils";
-  import ReportOwnerBullet from "./ReportOwnerBullet.svelte";
-
-  export let organization: string;
-  export let project: string;
-  export let id: string;
-  export let title: string;
-  export let lastRun: string | undefined;
-  export let timeZone: string;
-  export let frequency: string;
-  export let ownerId: string;
-  export let lastRunErrorMessage: string | undefined;
-
-  const humanReadableFrequency = cronstrue.toString(frequency);
-</script>
-
-<a
-  href={`reports/${id}`}
-  class="flex flex-col gap-y-1 group px-4 py-2.5 w-full h-full"
->
-  <div class="flex gap-x-2 items-center min-h-[20px]">
-    <ReportIcon size={"14px"} />
-    <span
-      class="text-fg-primary text-sm font-semibold group-hover:text-accent-primary-action truncate"
-    >
-      {title}
-    </span>
-    {#if lastRun}
-      {#if lastRunErrorMessage}
-        <CancelCircleInverse className="text-red-500 shrink-0" />
-      {:else}
-        <CheckCircleOutline className="text-primary-500 shrink-0" />
-      {/if}
-    {/if}
-  </div>
-  <div
-    class="flex gap-x-1 text-fg-secondary text-xs font-normal min-h-[16px] overflow-hidden"
-  >
-    {#if !lastRun}
-      <span class="shrink-0">Hasn't run yet</span>
-    {:else}
-      <span class="shrink-0">Last run {formatRunDate(lastRun, timeZone)}</span>
-    {/if}
-    <span class="shrink-0">•</span>
-    <span class="shrink-0 truncate">{humanReadableFrequency}</span>
-    <ProjectAccessControls {organization} {project}>
-      <svelte:fragment slot="manage-project">
-        <span class="shrink-0">•</span>
-        <ReportOwnerBullet {organization} {project} {ownerId} />
-      </svelte:fragment>
-    </ProjectAccessControls>
-  </div>
-</a>
diff --git a/web-admin/src/features/scheduled-reports/metadata/ReportMetadata.svelte b/web-admin/src/features/scheduled-reports/metadata/ReportMetadata.svelte
index 8218f680bc44..8cedbab391fc 100644
--- a/web-admin/src/features/scheduled-reports/metadata/ReportMetadata.svelte
+++ b/web-admin/src/features/scheduled-reports/metadata/ReportMetadata.svelte
@@ -5,6 +5,8 @@
   import { extractNotifier } from "@rilldata/web-admin/features/scheduled-reports/metadata/notifiers-utils";
   import IconButton from "@rilldata/web-common/components/button/IconButton.svelte";
   import * as DropdownMenu from "@rilldata/web-common/components/dropdown-menu";
+  import DeleteConfirmDialog from "@rilldata/web-common/features/resources/DeleteConfirmDialog.svelte";
+  import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus";
   import CancelCircle from "@rilldata/web-common/components/icons/CancelCircle.svelte";
   import ThreeDot from "@rilldata/web-common/components/icons/ThreeDot.svelte";
   import Tooltip from "@rilldata/web-common/components/tooltip/Tooltip.svelte";
@@ -96,22 +98,31 @@
   const deleteReport = createAdminServiceDeleteReport();
 
   let showEditReportDialog = false;
+  let isDeleteConfirmOpen = false;
+
   function handleEditReport() {
     showEditReportDialog = true;
   }
 
   async function handleDeleteReport() {
-    await $deleteReport.mutateAsync({
-      org: organization,
-      project,
-      name: $reportQuery.data.resource.meta.name.name,
-    });
-    queryClient.invalidateQueries({
-      queryKey: getRuntimeServiceListResourcesQueryKey(
-        runtimeClient.instanceId,
-      ),
-    });
-    goto(`/${organization}/${project}/-/reports`);
+    try {
+      await $deleteReport.mutateAsync({
+        org: organization,
+        project,
+        name: $reportQuery.data.resource.meta.name.name,
+      });
+      await queryClient.invalidateQueries({
+        queryKey: getRuntimeServiceListResourcesQueryKey(
+          runtimeClient.instanceId,
+        ),
+      });
+      goto(`/${organization}/${project}/-/reports`);
+    } catch {
+      eventBus.emit("notification", {
+        message: "Failed to delete report",
+        type: "error",
+      });
+    }
   }
 </script>
 
@@ -161,7 +172,12 @@
               >
                 Edit report
               </DropdownMenu.Item>
-              <DropdownMenu.Item onclick={handleDeleteReport}>
+              <DropdownMenu.Item
+                type="destructive"
+                onclick={() => {
+                  isDeleteConfirmOpen = true;
+                }}
+              >
                 Delete report
               </DropdownMenu.Item>
             </DropdownMenu.Content>
@@ -244,3 +260,12 @@
     }}
   />
 {/if}
+
+<DeleteConfirmDialog
+  bind:open={isDeleteConfirmOpen}
+  title="Delete this report?"
+  onDelete={handleDeleteReport}
+>
+  The report "<strong>{reportSpec?.displayName ?? ""}</strong>" will be
+  permanently deleted and will no longer send scheduled emails.
+</DeleteConfirmDialog>
diff --git a/web-admin/src/routes/[organization]/-/users/+page.svelte b/web-admin/src/routes/[organization]/-/users/+page.svelte
index f66c41b5a8de..4caa1c7b9638 100644
--- a/web-admin/src/routes/[organization]/-/users/+page.svelte
+++ b/web-admin/src/routes/[organization]/-/users/+page.svelte
@@ -7,7 +7,6 @@
   import AddUsersDialog from "@rilldata/web-admin/features/organizations/user-management/dialogs/AddUsersDialog.svelte";
   import ChangingBillingContactRoleDialog from "@rilldata/web-admin/features/organizations/user-management/dialogs/ChangingBillingContactRoleDialog.svelte";
   import EditUserGroupDialog from "@rilldata/web-admin/features/organizations/user-management/dialogs/EditUserGroupDialog.svelte";
-  import OrgUsersFilters from "@rilldata/web-admin/features/organizations/user-management/OrgUsersFilters.svelte";
   import OrgUsersTable from "@rilldata/web-admin/features/organizations/user-management/table/users/OrgUsersTable.svelte";
   import RemovingBillingContactDialog from "@rilldata/web-admin/features/organizations/user-management/dialogs/RemovingBillingContactDialog.svelte";
   import {
@@ -15,7 +14,8 @@
     getOrgUserMembers,
   } from "@rilldata/web-admin/features/organizations/user-management/selectors.ts";
   import Button from "@rilldata/web-common/components/button/Button.svelte";
-  import { Search } from "@rilldata/web-common/components/search";
+  import { TableToolbar } from "@rilldata/web-common/components/table-toolbar";
+  import type { FilterGroup } from "@rilldata/web-common/components/table-toolbar/types";
   import DelayedSpinner from "@rilldata/web-common/features/entity-management/DelayedSpinner.svelte";
   import { OrgUserRoles } from "@rilldata/web-common/features/users/roles.ts";
   import { Plus } from "lucide-svelte";
@@ -122,6 +122,46 @@
 
   const currentUser = createAdminServiceGetCurrentUser();
   $: billingContactUser = getOrganizationBillingContactUser(organization);
+
+  $: filterGroups = [
+    {
+      label: "User type",
+      key: "type",
+      options: [
+        { value: "all", label: "All" },
+        { value: "members", label: "Members" },
+        { value: "pending", label: "Pending" },
+      ],
+      selected: filterSelection,
+      defaultValue: "all",
+      multiSelect: false,
+    },
+    {
+      label: "Role",
+      key: "role",
+      options: [
+        { value: "all", label: "All Roles" },
+        { value: "admin", label: "Admins" },
+        { value: "editor", label: "Editors" },
+        { value: "viewer", label: "Viewers" },
+      ],
+      selected: roleFilter,
+      defaultValue: "all",
+      multiSelect: false,
+    },
+  ] satisfies FilterGroup[];
+
+  function handleFilterChange(key: string, selected: string | string[]) {
+    if (Array.isArray(selected)) return;
+    if (key === "type") filterSelection = selected as typeof filterSelection;
+    if (key === "role") roleFilter = selected as typeof roleFilter;
+  }
+
+  function clearFilters() {
+    filterSelection = "all";
+    roleFilter = "all";
+    searchText = "";
+  }
 </script>
 
 <div class="flex flex-col w-full">
@@ -138,24 +178,18 @@
     </div>
   {:else if $orgMemberUsersInfiniteQuery.isSuccess && $orgInvitesInfiniteQuery.isSuccess}
     <div class="flex flex-col">
-      <div class="flex flex-row gap-x-4">
-        <Search
-          placeholder="Search"
-          bind:value={searchText}
-          large
-          autofocus={false}
-          showBorderOnFocus={false}
-        />
-        <OrgUsersFilters bind:filterSelection bind:roleFilter />
-        <Button
-          type="primary"
-          large
-          onClick={() => (isAddUserDialogOpen = true)}
-        >
+      <TableToolbar
+        bind:searchText
+        {filterGroups}
+        onFilterChange={handleFilterChange}
+        onClearAllFilters={clearFilters}
+        showSort={false}
+      >
+        <Button type="primary" onClick={() => (isAddUserDialogOpen = true)}>
           <Plus size="16px" />
           <span>Add users</span>
         </Button>
-      </div>
+      </TableToolbar>
       <div class="mt-6">
         <OrgUsersTable
           {organization}
diff --git a/web-admin/src/routes/[organization]/-/users/groups/+page.svelte b/web-admin/src/routes/[organization]/-/users/groups/+page.svelte
index cee408d4876e..b88d7271ab76 100644
--- a/web-admin/src/routes/[organization]/-/users/groups/+page.svelte
+++ b/web-admin/src/routes/[organization]/-/users/groups/+page.svelte
@@ -8,7 +8,7 @@
   import EditUserGroupDialog from "@rilldata/web-admin/features/organizations/user-management/dialogs/EditUserGroupDialog.svelte";
   import OrgGroupsTable from "@rilldata/web-admin/features/organizations/user-management/table/groups/OrgGroupsTable.svelte";
   import Button from "@rilldata/web-common/components/button/Button.svelte";
-  import { Search } from "@rilldata/web-common/components/search";
+  import { TableToolbar } from "@rilldata/web-common/components/table-toolbar";
   import DelayedSpinner from "@rilldata/web-common/features/entity-management/DelayedSpinner.svelte";
   import { Plus } from "lucide-svelte";
 
@@ -75,23 +75,15 @@
     </div>
   {:else if $listOrganizationMemberUsergroups.isSuccess}
     <div class="flex flex-col">
-      <div class="flex flex-row gap-x-4">
-        <Search
-          placeholder="Search"
-          bind:value={searchText}
-          large
-          autofocus={false}
-          showBorderOnFocus={false}
-        />
+      <TableToolbar bind:searchText showSort={false}>
         <Button
           type="primary"
-          large
           onClick={() => (isCreateUserGroupDialogOpen = true)}
         >
           <Plus size="16px" />
           <span>Create group</span>
         </Button>
-      </div>
+      </TableToolbar>
       <div class="mt-6">
         <OrgGroupsTable
           data={filteredGroups}
diff --git a/web-admin/src/routes/[organization]/-/users/guests/+page.svelte b/web-admin/src/routes/[organization]/-/users/guests/+page.svelte
index 8f19c8f75c9f..6aae4bdade10 100644
--- a/web-admin/src/routes/[organization]/-/users/guests/+page.svelte
+++ b/web-admin/src/routes/[organization]/-/users/guests/+page.svelte
@@ -10,14 +10,14 @@
   import AddGuestsDialog from "@rilldata/web-admin/features/organizations/user-management/dialogs/AddGuestsDialog.svelte";
   import ConvertGuestToMemberDialog from "@rilldata/web-admin/features/organizations/user-management/dialogs/ConvertGuestToMemberDialog.svelte";
   import EditUserGroupDialog from "@rilldata/web-admin/features/organizations/user-management/dialogs/EditUserGroupDialog.svelte";
-  import OrgUsersFilters from "@rilldata/web-admin/features/organizations/user-management/OrgUsersFilters.svelte";
   import OrgUsersTable from "@rilldata/web-admin/features/organizations/user-management/table/users/OrgUsersTable.svelte";
   import {
     getOrgUserInvites,
     getOrgUserMembers,
   } from "@rilldata/web-admin/features/organizations/user-management/selectors.ts";
   import { Button } from "@rilldata/web-common/components/button";
-  import { Search } from "@rilldata/web-common/components/search";
+  import { TableToolbar } from "@rilldata/web-common/components/table-toolbar";
+  import type { FilterGroup } from "@rilldata/web-common/components/table-toolbar/types";
   import DelayedSpinner from "@rilldata/web-common/features/entity-management/DelayedSpinner.svelte";
   import { OrgUserRoles } from "@rilldata/web-common/features/users/roles.ts";
   import { Plus } from "lucide-svelte";
@@ -107,6 +107,30 @@
 
   const currentUser = createAdminServiceGetCurrentUser();
   $: billingContactUser = getOrganizationBillingContactUser(organization);
+
+  $: filterGroups = [
+    {
+      label: "User type",
+      key: "type",
+      options: [
+        { value: "all", label: "All" },
+        { value: "pending", label: "Pending" },
+      ],
+      selected: filterSelection,
+      defaultValue: "all",
+      multiSelect: false,
+    },
+  ] satisfies FilterGroup[];
+
+  function handleFilterChange(key: string, selected: string | string[]) {
+    if (key !== "type" || Array.isArray(selected)) return;
+    filterSelection = selected as typeof filterSelection;
+  }
+
+  function clearFilters() {
+    filterSelection = "all";
+    searchText = "";
+  }
 </script>
 
 <div class="flex flex-col w-full">
@@ -123,28 +147,18 @@
     </div>
   {:else if $orgMemberUsersInfiniteQuery.isSuccess && $orgInvitesInfiniteQuery.isSuccess}
     <div class="flex flex-col">
-      <div class="flex flex-row gap-x-4 h-9">
-        <Search
-          placeholder="Search"
-          bind:value={searchText}
-          large
-          autofocus={false}
-          showBorderOnFocus={false}
-        />
-        <OrgUsersFilters
-          bind:filterSelection
-          showMembers={false}
-          showRoleFilter={false}
-        />
-        <Button
-          type="primary"
-          large
-          onClick={() => (isAddGuestsDialogOpen = true)}
-        >
+      <TableToolbar
+        bind:searchText
+        {filterGroups}
+        onFilterChange={handleFilterChange}
+        onClearAllFilters={clearFilters}
+        showSort={false}
+      >
+        <Button type="primary" onClick={() => (isAddGuestsDialogOpen = true)}>
           <Plus size="16px" />
           <span>Add guest</span>
         </Button>
-      </div>
+      </TableToolbar>
       <div class="mt-6">
         <OrgUsersTable
           {organization}
diff --git a/web-admin/src/routes/[organization]/[project]/-/dashboards/+page.svelte b/web-admin/src/routes/[organization]/[project]/-/dashboards/+page.svelte
index 60dd2a3dc572..9cb7dbffb65a 100644
--- a/web-admin/src/routes/[organization]/[project]/-/dashboards/+page.svelte
+++ b/web-admin/src/routes/[organization]/[project]/-/dashboards/+page.svelte
@@ -12,8 +12,8 @@
   <title>{project} overview - Rill</title>
 </svelte:head>
 
-<ContentContainer maxWidth={800} title="Project dashboards">
-  <div class="flex flex-col items-center gap-y-4">
+<ContentContainer maxWidth={1100} title="Dashboards">
+  <div class="flex flex-col gap-y-4 w-full">
     <DashboardsTable />
   </div>
 </ContentContainer>
diff --git a/web-admin/tests/alerts.spec.ts b/web-admin/tests/alerts.spec.ts
index 3aab5e95a7c7..2f5f882eefcc 100644
--- a/web-admin/tests/alerts.spec.ts
+++ b/web-admin/tests/alerts.spec.ts
@@ -136,6 +136,11 @@ test.describe.serial("Alerts", () => {
 
       await adminPage.goto(link);
 
+      // Move the cursor away from the leaderboard so the row's hover-only
+      // "previous → current" inline preview doesn't render and the assertion
+      // can match the canonical row text.
+      await adminPage.mouse.move(0, 0);
+
       // Assert that the data is as expected
       await expect(
         adminPage
@@ -277,6 +282,7 @@ test.describe.serial("Alerts", () => {
       // Delete the alert
       await adminPage.getByLabel("Alert context menu").click();
       await adminPage.getByRole("menuitem", { name: "Delete Alert" }).click();
+      await adminPage.getByRole("button", { name: "Yes, delete" }).click();
 
       // Back to listing page without any alerts
       await expect(
@@ -381,20 +387,18 @@ test.describe.serial("Alerts", () => {
       );
     });
 
-    test("Should delete alert with schedule", async ({ adminPage }) => {
+    test("Should delete alert from the listing row menu", async ({
+      adminPage,
+    }) => {
       await adminPage.goto("/e2e/openrtb/-/alerts");
 
-      await adminPage
-        .getByRole("link", {
-          name: "Requests value alert",
-        })
-        .click();
+      // Open the row's actions menu and click Delete (covers the new listing-page action wired up in the row).
+      await adminPage.getByLabel("Actions for Requests value alert").click();
+      await adminPage.getByRole("menuitem", { name: "Delete" }).click();
+      await adminPage.getByRole("button", { name: "Yes, delete" }).click();
 
-      // Delete the alert
-      await adminPage.getByLabel("Alert context menu").click();
-      await adminPage.getByRole("menuitem", { name: "Delete Alert" }).click();
-
-      // Back to listing page without any alerts
+      // Stay on the listing page; no alerts remain.
+      await expect(adminPage).toHaveURL(/\/-\/alerts$/);
       await expect(
         adminPage.getByText("You don't have any alerts yet"),
       ).toBeVisible();
diff --git a/web-admin/tests/reports.spec.ts b/web-admin/tests/reports.spec.ts
index 22ee7181262d..2b3a3a88a959 100644
--- a/web-admin/tests/reports.spec.ts
+++ b/web-admin/tests/reports.spec.ts
@@ -116,18 +116,16 @@ test.describe.serial("Reports", () => {
     );
   });
 
-  test("Should run a report and receive an email", async ({ adminPage }) => {
-    // Open the report
+  test("Should run a report from the listing row menu and receive an email", async ({
+    adminPage,
+  }) => {
     await adminPage.goto("/e2e/openrtb/-/reports");
-    await adminPage
-      .getByRole("link", {
-        name: "Report for last 14 days",
-      })
-      .click();
 
-    // Store time before clicking run to ensure latest email is fetched.
+    // Trigger the run from the listing-row actions menu (the new wired-up action).
     const time = new Date();
-    await adminPage.getByRole("button", { name: "Run now" }).click();
+    await adminPage.getByLabel("Actions for Report for last 14 days").click();
+    await adminPage.getByRole("menuitem", { name: "Run" }).click();
+
     // Notification is shown
     await expect(adminPage.getByLabel("Notification")).toHaveText(
       "Triggered an ad-hoc run of this report.",
@@ -233,20 +231,18 @@ test.describe.serial("Reports", () => {
     );
   });
 
-  test("Should delete report", async ({ adminPage }) => {
+  test("Should delete report from the listing row menu", async ({
+    adminPage,
+  }) => {
     await adminPage.goto("/e2e/openrtb/-/reports");
 
-    await adminPage
-      .getByRole("link", {
-        name: "Report for last 14 days",
-      })
-      .click();
-
-    // Delete the report
-    await adminPage.getByLabel("Report context menu").click();
-    await adminPage.getByRole("menuitem", { name: "Delete Report" }).click();
+    // Open the row's actions menu and click Delete (covers the new listing-page action wired up in the row).
+    await adminPage.getByLabel("Actions for Report for last 14 days").click();
+    await adminPage.getByRole("menuitem", { name: "Delete" }).click();
+    await adminPage.getByRole("button", { name: "Yes, delete" }).click();
 
-    // Back to listing page without any reports
+    // Stay on the listing page; no reports remain.
+    await expect(adminPage).toHaveURL(/\/-\/reports$/);
     await expect(
       adminPage.getByText("You don't have any reports yet"),
     ).toBeVisible();
diff --git a/web-admin/tests/setup/setup.ts b/web-admin/tests/setup/setup.ts
index 2064ecb76a4f..31a3f10dfb77 100644
--- a/web-admin/tests/setup/setup.ts
+++ b/web-admin/tests/setup/setup.ts
@@ -239,7 +239,7 @@ setup.describe("global setup", () => {
 
     // Wait for the project to be ready
     await expect(adminPage.getByLabel("Container title")).toHaveText(
-      "Project dashboards",
+      "Dashboards",
     );
 
     // Check that the dashboards are listed
@@ -250,18 +250,16 @@ setup.describe("global setup", () => {
       adminPage.getByRole("link", { name: "Programmatic Ads Bids" }),
     ).toBeVisible();
 
-    // Wait for the first dashboard to be ready
+    // Wait for the first dashboard to be ready. In the column-based layout,
+    // each row is a link whose accessible name aggregates the cell text;
+    // the Status cell renders "Ready" once reconcile completes.
     await expect(
-      adminPage.getByRole("link", {
-        name: "Programmatic Ads Auction auction_explore",
-      }),
-    ).toContainText("Last refreshed", { timeout: 15_000 });
+      adminPage.getByRole("link", { name: "Programmatic Ads Auction" }).first(),
+    ).toContainText("Ready", { timeout: 15_000 });
 
     await expect(
-      adminPage.getByRole("link", {
-        name: "Programmatic Ads Bids bids_explore",
-      }),
-    ).toContainText("Last refreshed", { timeout: 15_000 });
+      adminPage.getByRole("link", { name: "Programmatic Ads Bids" }),
+    ).toContainText("Ready", { timeout: 15_000 });
   });
 
   setup("should deploy the AdBids project", async ({ adminPage }) => {
@@ -316,7 +314,7 @@ setup.describe("global setup", () => {
 
     // Wait for the project to be ready
     await expect(adminPage.getByLabel("Container title")).toHaveText(
-      "Project dashboards",
+      "Dashboards",
     );
 
     // Check that the dashboards are listed
diff --git a/web-common/src/components/table-toolbar/TableToolbar.svelte b/web-common/src/components/table-toolbar/TableToolbar.svelte
index d0c11c7926cd..8735c03f3701 100644
--- a/web-common/src/components/table-toolbar/TableToolbar.svelte
+++ b/web-common/src/components/table-toolbar/TableToolbar.svelte
@@ -10,6 +10,7 @@
   let {
     searchText = $bindable(""),
     searchDisabled = false,
+    showSearch = true,
     filterGroups = [],
     onFilterChange,
     onClearAllFilters,
@@ -17,10 +18,12 @@
     showSort = true,
     showViewToggle = false,
     viewMode = $bindable("list"),
+    disabled = false,
     children,
   }: {
     searchText?: string;
     searchDisabled?: boolean;
+    showSearch?: boolean;
     filterGroups?: FilterGroup[];
     onFilterChange?: (key: string, selected: string | string[]) => void;
     onClearAllFilters?: () => void;
@@ -28,6 +31,8 @@
     showSort?: boolean;
     showViewToggle?: boolean;
     viewMode?: ViewMode;
+    /** Disables search, filter, and sort. Useful when the underlying data is empty. */
+    disabled?: boolean;
     children?: Snippet;
   } = $props();
 </script>
@@ -35,14 +40,19 @@
 <section class="flex flex-col w-full">
   <div class="flex flex-row items-center justify-between h-9 gap-x-4">
     <div class="flex flex-row items-center">
-      <TableToolbarFilterDropdown {filterGroups} {onFilterChange} />
+      <TableToolbarFilterDropdown {filterGroups} {onFilterChange} {disabled} />
     </div>
 
     <div class="flex flex-row items-center gap-x-3">
-      <TableToolbarSearch bind:searchText disabled={searchDisabled} />
+      {#if showSearch}
+        <TableToolbarSearch
+          bind:searchText
+          disabled={searchDisabled || disabled}
+        />
+      {/if}
 
       {#if showSort}
-        <TableToolbarSort bind:sortDirection />
+        <TableToolbarSort bind:sortDirection {disabled} />
       {/if}
 
       {#if showViewToggle}
diff --git a/web-common/src/components/table-toolbar/TableToolbarFilterDropdown.svelte b/web-common/src/components/table-toolbar/TableToolbarFilterDropdown.svelte
index de3ab74b418b..1ff57fb209b9 100644
--- a/web-common/src/components/table-toolbar/TableToolbarFilterDropdown.svelte
+++ b/web-common/src/components/table-toolbar/TableToolbarFilterDropdown.svelte
@@ -6,9 +6,11 @@
   let {
     filterGroups = [],
     onFilterChange,
+    disabled = false,
   }: {
     filterGroups: FilterGroup[];
     onFilterChange?: (key: string, selected: string | string[]) => void;
+    disabled?: boolean;
   } = $props();
 
   function handleClick(group: FilterGroup, value: string) {
@@ -27,8 +29,9 @@
 {#if filterGroups.length > 0}
   <DropdownMenu.Root>
     <DropdownMenu.Trigger
-      class="flex flex-row items-center gap-x-1.5 h-9 px-2 text-sm font-medium text-fg-primary cursor-pointer"
+      class="flex flex-row items-center gap-x-1.5 h-9 px-2 text-sm font-medium text-fg-primary cursor-pointer disabled:cursor-not-allowed disabled:opacity-50"
       aria-label="Filter options"
+      {disabled}
     >
       <FilterOutlined size="14" />
       <span>Filter</span>
diff --git a/web-common/src/components/table-toolbar/TableToolbarSort.svelte b/web-common/src/components/table-toolbar/TableToolbarSort.svelte
index d02d1401663b..816f8648d613 100644
--- a/web-common/src/components/table-toolbar/TableToolbarSort.svelte
+++ b/web-common/src/components/table-toolbar/TableToolbarSort.svelte
@@ -4,8 +4,10 @@
 
   let {
     sortDirection = $bindable("newest"),
+    disabled = false,
   }: {
     sortDirection: SortDirection;
+    disabled?: boolean;
   } = $props();
 
   const sortLabel = $derived(sortDirection === "newest" ? "Newest" : "Oldest");
@@ -17,7 +19,8 @@
 
 <button
   type="button"
-  class="flex flex-row items-center gap-x-1.5 h-9 px-2 text-sm font-medium text-fg-primary hover:text-fg-secondary cursor-pointer"
+  class="flex flex-row items-center gap-x-1.5 h-9 px-2 text-sm font-medium text-fg-primary hover:text-fg-secondary cursor-pointer disabled:cursor-not-allowed disabled:opacity-50"
+  {disabled}
   onclick={toggleSortDirection}
   aria-label="Sort order: {sortLabel}"
 >
diff --git a/web-common/src/components/table-toolbar/filters.ts b/web-common/src/components/table-toolbar/filters.ts
new file mode 100644
index 000000000000..d7594c8222d0
--- /dev/null
+++ b/web-common/src/components/table-toolbar/filters.ts
@@ -0,0 +1,44 @@
+import type { SortDirection } from "./types";
+
+/**
+ * Apply search, filter, and sort to a table dataset. Each filter is expressed
+ * as a predicate so call sites can inline whatever per-dimension matching
+ * logic they need.
+ *
+ * Sort: rows where `getSortKey` returns undefined or an empty string sort to
+ * the bottom of the "newest" view (and to the top of "oldest").
+ */
+export function applyTableFilters<T>(opts: {
+  data: T[];
+  searchText?: string;
+  matchesSearch?: (row: T, query: string) => boolean;
+  filterPredicates?: ((row: T) => boolean)[];
+  sortDirection: SortDirection;
+  getSortKey: (row: T) => string | undefined;
+}): T[] {
+  const {
+    data,
+    searchText = "",
+    matchesSearch,
+    filterPredicates = [],
+    sortDirection,
+    getSortKey,
+  } = opts;
+  return data
+    .filter((row) => {
+      if (searchText && matchesSearch && !matchesSearch(row, searchText)) {
+        return false;
+      }
+      for (const predicate of filterPredicates) {
+        if (!predicate(row)) return false;
+      }
+      return true;
+    })
+    .slice()
+    .sort((a, b) => {
+      const aKey = getSortKey(a) ?? "";
+      const bKey = getSortKey(b) ?? "";
+      const cmp = aKey < bKey ? -1 : aKey > bKey ? 1 : 0;
+      return sortDirection === "newest" ? -cmp : cmp;
+    });
+}
diff --git a/web-common/src/components/table-toolbar/index.ts b/web-common/src/components/table-toolbar/index.ts
index cef6b1def0c5..aeeb009c3dab 100644
--- a/web-common/src/components/table-toolbar/index.ts
+++ b/web-common/src/components/table-toolbar/index.ts
@@ -1,4 +1,5 @@
 export { default as TableToolbar } from "./TableToolbar.svelte";
+export { applyTableFilters } from "./filters";
 export type {
   FilterGroup,
   FilterOption,
diff --git a/web-common/src/features/dashboards/listing/DashboardActionsCell.svelte b/web-common/src/features/dashboards/listing/DashboardActionsCell.svelte
new file mode 100644
index 000000000000..743d8fbb22b3
--- /dev/null
+++ b/web-common/src/features/dashboards/listing/DashboardActionsCell.svelte
@@ -0,0 +1,71 @@
+<script lang="ts">
+  import { goto } from "$app/navigation";
+  import IconButton from "@rilldata/web-common/components/button/IconButton.svelte";
+  import * as DropdownMenu from "@rilldata/web-common/components/dropdown-menu";
+  import ThreeDot from "@rilldata/web-common/components/icons/ThreeDot.svelte";
+  import { BellPlusIcon, MailPlus, Share2 } from "lucide-svelte";
+
+  export let dashboardHref: string;
+  export let title: string;
+  export let isMetricsExplorer: boolean;
+
+  let isDropdownOpen = false;
+
+  // The Create Alert / Create Report / Share dialogs live on the dashboard
+  // pages and depend on dashboard state managers. From the listing page we
+  // navigate to the dashboard with a query param so the page can auto-open
+  // the relevant dialog/popover.
+  function openCreateAlert() {
+    void goto(`${dashboardHref}?action=create-alert`);
+  }
+
+  // Reports start from an empty pivot so the user can shape the table data
+  // before scheduling. `view=pivot&rows=&cols=` clears any persisted pivot
+  // state, then `action=create-report` triggers the dialog on arrival.
+  function openCreateReport() {
+    void goto(`${dashboardHref}?view=pivot&rows=&cols=&action=create-report`);
+  }
+
+  function openShare() {
+    void goto(`${dashboardHref}?action=share`);
+  }
+</script>
+
+<div class="flex justify-end" data-no-row-click>
+  <DropdownMenu.Root bind:open={isDropdownOpen}>
+    <DropdownMenu.Trigger class="flex-none">
+      <IconButton
+        rounded
+        active={isDropdownOpen}
+        ariaLabel={`Actions for ${title}`}
+      >
+        <ThreeDot size="16px" />
+      </IconButton>
+    </DropdownMenu.Trigger>
+    <DropdownMenu.Content side="bottom" align="start" class="min-w-[160px]">
+      <DropdownMenu.Item
+        class="font-normal flex items-center"
+        onclick={openShare}
+      >
+        <Share2 size="12px" />
+        <span class="ml-2">Share</span>
+      </DropdownMenu.Item>
+      {#if isMetricsExplorer}
+        <DropdownMenu.Item
+          class="font-normal flex items-center"
+          onclick={openCreateAlert}
+        >
+          <BellPlusIcon size="12px" />
+          <span class="ml-2">Create alert</span>
+        </DropdownMenu.Item>
+        <DropdownMenu.Item
+          class="font-normal flex items-center"
+          onclick={openCreateReport}
+        >
+          <MailPlus size="12px" />
+          <span class="ml-2">Create report</span>
+        </DropdownMenu.Item>
+      {/if}
+    </DropdownMenu.Content>
+  </DropdownMenu.Root>
+</div>
diff --git a/web-common/src/features/dashboards/listing/DashboardStatusCell.svelte b/web-common/src/features/dashboards/listing/DashboardStatusCell.svelte
new file mode 100644
index 000000000000..1ba3660d88d6
--- /dev/null
+++ b/web-common/src/features/dashboards/listing/DashboardStatusCell.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+  import StatusTextCell from "@rilldata/web-common/features/resources/cells/StatusTextCell.svelte";
+  import {
+    V1ReconcileStatus,
+    type V1Resource,
+  } from "@rilldata/web-common/runtime-client";
+
+  export let resource: V1Resource;
+
+  $: ({ label, tone } = describeStatus(resource));
+
+  type Tone = "default" | "muted" | "success" | "destructive";
+
+  function describeStatus(r: V1Resource): { label: string; tone: Tone } {
+    if (r.meta?.reconcileError) return { label: "Error", tone: "destructive" };
+
+    switch (r.meta?.reconcileStatus) {
+      case V1ReconcileStatus.RECONCILE_STATUS_RUNNING:
+        return { label: "Reconciling", tone: "muted" };
+      case V1ReconcileStatus.RECONCILE_STATUS_PENDING:
+        return { label: "Building", tone: "muted" };
+      case V1ReconcileStatus.RECONCILE_STATUS_IDLE:
+        return { label: "Ready", tone: "success" };
+      default:
+        return { label: "—", tone: "muted" };
+    }
+  }
+</script>
+
+<StatusTextCell {label} {tone} />
diff --git a/web-common/src/features/dashboards/listing/DashboardTypeCell.svelte b/web-common/src/features/dashboards/listing/DashboardTypeCell.svelte
new file mode 100644
index 000000000000..2f3e9629b573
--- /dev/null
+++ b/web-common/src/features/dashboards/listing/DashboardTypeCell.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+  import ResourceTypeBadge from "@rilldata/web-common/features/entity-management/ResourceTypeBadge.svelte";
+  import { ResourceKind } from "@rilldata/web-common/features/entity-management/resource-selectors";
+  import type { V1Resource } from "@rilldata/web-common/runtime-client";
+
+  export let resource: V1Resource;
+
+  $: kind = resource.explore ? ResourceKind.Explore : ResourceKind.Canvas;
+</script>
+
+<ResourceTypeBadge {kind} />
diff --git a/web-common/src/features/dashboards/listing/DashboardsTable.svelte b/web-common/src/features/dashboards/listing/DashboardsTable.svelte
index b0edfebc6a86..2ab6ff26202a 100644
--- a/web-common/src/features/dashboards/listing/DashboardsTable.svelte
+++ b/web-common/src/features/dashboards/listing/DashboardsTable.svelte
@@ -1,12 +1,24 @@
 <script lang="ts">
   import ResourceError from "@rilldata/web-common/features/resources/ResourceError.svelte";
-  import ResourceList from "@rilldata/web-common/features/resources/ResourceList.svelte";
+  import ResourceTable from "@rilldata/web-common/features/resources/ResourceTable.svelte";
   import ResourceListEmptyState from "@rilldata/web-common/features/resources/ResourceListEmptyState.svelte";
+  import NameCell from "@rilldata/web-common/features/resources/cells/NameCell.svelte";
+  import RelativeTimeCell from "@rilldata/web-common/features/resources/cells/RelativeTimeCell.svelte";
   import ExploreIcon from "@rilldata/web-common/components/icons/ExploreIcon.svelte";
   import DelayedSpinner from "@rilldata/web-common/features/entity-management/DelayedSpinner.svelte";
+  import {
+    applyTableFilters,
+    TableToolbar,
+  } from "@rilldata/web-common/components/table-toolbar";
+  import type {
+    FilterGroup,
+    SortDirection,
+  } from "@rilldata/web-common/components/table-toolbar/types";
   import type { V1Resource } from "@rilldata/web-common/runtime-client";
-  import { renderComponent } from "tanstack-table-8-svelte-5";
-  import DashboardsTableCompositeCell from "./DashboardsTableCompositeCell.svelte";
+  import { renderComponent, type ColumnDef } from "tanstack-table-8-svelte-5";
+  import DashboardActionsCell from "./DashboardActionsCell.svelte";
+  import DashboardStatusCell from "./DashboardStatusCell.svelte";
+  import DashboardTypeCell from "./DashboardTypeCell.svelte";
 
   // --- Data props (caller provides query results) ---
   export let data: V1Resource[] = [];
@@ -23,89 +35,159 @@
   export let getHref: (name: string, isMetricsExplorer: boolean) => string;
   /** "See all" link target when in preview mode */
   export let seeAllHref = "";
-  /** Whether to show the search toolbar. Defaults to !isPreview. */
+  /** Whether to show the toolbar. Defaults to !isPreview. */
   export let toolbar: boolean | undefined = undefined;
 
   $: resolvedToolbar = toolbar ?? !isPreview;
 
+  let searchText = "";
+  let selectedTypes: string[] = [];
+  let sortDirection: SortDirection = "newest";
+
+  function getTitle(r: V1Resource): string {
+    return r.explore
+      ? (r.explore.spec?.displayName ?? r.meta?.name?.name ?? "")
+      : (r.canvas?.spec?.displayName ?? r.meta?.name?.name ?? "");
+  }
+
+  function getDescription(r: V1Resource): string {
+    return r.explore?.spec?.description ?? "";
+  }
+
+  function getCreatedOn(r: V1Resource): string | undefined {
+    return r.meta?.createdOn;
+  }
+
+  function matchesSearch(r: V1Resource, q: string): boolean {
+    if (!q) return true;
+    const needle = q.toLowerCase();
+    return (
+      getTitle(r).toLowerCase().includes(needle) ||
+      (r.meta?.name?.name ?? "").toLowerCase().includes(needle) ||
+      getDescription(r).toLowerCase().includes(needle)
+    );
+  }
+
+  function matchesType(r: V1Resource, types: string[]): boolean {
+    if (types.length === 0) return true;
+    if (types.includes("explore") && r.explore) return true;
+    if (types.includes("canvas") && r.canvas) return true;
+    return false;
+  }
+
+  $: processedData = applyTableFilters({
+    data: data ?? [],
+    searchText,
+    matchesSearch,
+    filterPredicates: [(r) => matchesType(r, selectedTypes)],
+    sortDirection,
+    getSortKey: getCreatedOn,
+  });
+
   $: displayData = isPreview
-    ? (data?.slice(0, previewLimit) ?? [])
-    : (data ?? []);
-  $: hasMoreDashboards = isPreview && data && data.length > previewLimit;
-
-  /**
-   * Table column definitions.
-   * - "composite": Renders all dashboard data in a single cell.
-   * - Others: Used for sorting and filtering but not displayed.
-   */
-  const columns = [
+    ? processedData.slice(0, previewLimit)
+    : processedData;
+  $: hasMoreDashboards = isPreview && (data?.length ?? 0) > previewLimit;
+
+  $: filterGroups = [
     {
-      id: "composite",
-      cell: ({ row }) => {
-        const resource = row.original as V1Resource;
-        const name = resource.meta?.name?.name ?? "";
-
-        const isMetricsExplorer = !!resource?.explore;
-        const title = isMetricsExplorer
-          ? (resource.explore?.spec?.displayName ?? "")
-          : (resource.canvas?.spec?.displayName ?? "");
-        const description = isMetricsExplorer
-          ? (resource.explore?.spec?.description ?? "")
-          : "";
-        const refreshedOn = isMetricsExplorer
-          ? resource.explore?.state?.dataRefreshedOn
-          : resource.canvas?.state?.dataRefreshedOn;
-
-        return renderComponent(DashboardsTableCompositeCell, {
-          name,
-          title,
-          lastRefreshed: refreshedOn ?? "",
-          description,
-          error: resource.meta?.reconcileError ?? "",
-          isMetricsExplorer,
-          href: getHref(name, isMetricsExplorer),
-        });
-      },
+      label: "Type",
+      key: "type",
+      options: [
+        { value: "explore", label: "Explore" },
+        { value: "canvas", label: "Canvas" },
+      ],
+      selected: selectedTypes,
+      defaultValue: [],
+      multiSelect: true,
     },
+  ] satisfies FilterGroup[];
+
+  function handleFilterChange(key: string, selected: string | string[]) {
+    if (key !== "type") return;
+    selectedTypes = Array.isArray(selected) ? selected : [selected];
+  }
+
+  function clearFilters() {
+    selectedTypes = [];
+    searchText = "";
+  }
+
+  $: getRowHref = (row: unknown) => {
+    const r = row as V1Resource;
+    const name = r.meta?.name?.name ?? "";
+    const isMetricsExplorer = !!r.explore;
+    return getHref(name, isMetricsExplorer);
+  };
+
+  const columns: ColumnDef<V1Resource, string>[] = [
     {
-      id: "title",
-      accessorFn: (row: V1Resource) => {
-        const isMetricsExplorer = !!row?.explore;
-        return isMetricsExplorer
-          ? (row.explore?.spec?.displayName ?? "")
-          : (row.canvas?.spec?.displayName ?? "");
-      },
+      id: "type",
+      header: "Type",
+      accessorFn: (row) => (row.explore ? "Explore" : "Canvas"),
+      cell: (info) =>
+        renderComponent(DashboardTypeCell, { resource: info.row.original }),
+      meta: { width: "85px" },
     },
     {
       id: "name",
-      accessorFn: (row: V1Resource) => row.meta?.name?.name ?? "",
+      header: "Dashboard name",
+      accessorFn: (row) =>
+        row.explore?.spec?.displayName ??
+        row.canvas?.spec?.displayName ??
+        row.meta?.name?.name ??
+        "",
+      cell: (info) =>
+        renderComponent(NameCell, { name: info.getValue() as string }),
     },
+    {
+      id: "status",
+      header: "Status",
+      accessorFn: (row) =>
+        row.meta?.reconcileError ? "Error" : (row.meta?.reconcileStatus ?? ""),
+      cell: (info) =>
+        renderComponent(DashboardStatusCell, { resource: info.row.original }),
+      meta: { width: "100px" },
+    },
+    // TODO(#9283): add the Tags column once resource-level tags are exposed
+    // by the API. https://github.com/rilldata/rill/issues/9283
     {
       id: "lastRefreshed",
-      accessorFn: (row: V1Resource) => {
-        const isMetricsExplorer = !!row?.explore;
-        return isMetricsExplorer
-          ? row.explore?.state?.dataRefreshedOn
-          : row.canvas?.state?.dataRefreshedOn;
-      },
+      header: "Last refreshed",
+      // Prefer `state.dataRefreshedOn` (when the underlying metrics data was
+      // last refreshed). It can be empty when the data refresh time is
+      // unknown (e.g. externally-managed tables), so fall back to
+      // `meta.stateUpdatedOn` (when the resource state was last updated).
+      accessorFn: (row) =>
+        row.explore?.state?.dataRefreshedOn ??
+        row.canvas?.state?.dataRefreshedOn ??
+        row.meta?.stateUpdatedOn ??
+        "",
+      cell: (info) =>
+        renderComponent(RelativeTimeCell, {
+          value: info.getValue() as string,
+        }),
+      meta: { width: "140px" },
     },
     {
-      id: "description",
-      accessorFn: (row: V1Resource) => {
-        const isMetricsExplorer = !!row?.explore;
-        return isMetricsExplorer ? (row.explore?.spec?.description ?? "") : "";
+      id: "actions",
+      header: "",
+      cell: (info) => {
+        const r = info.row.original;
+        const name = r.meta?.name?.name ?? "";
+        const isMetricsExplorer = !!r.explore;
+        const title =
+          r.explore?.spec?.displayName ?? r.canvas?.spec?.displayName ?? name;
+        return renderComponent(DashboardActionsCell, {
+          dashboardHref: getHref(name, isMetricsExplorer),
+          title,
+          isMetricsExplorer,
+        });
       },
+      enableSorting: false,
+      meta: { width: "48px", align: "right" },
     },
   ];
-
-  const columnVisibility = {
-    title: false,
-    name: false,
-    lastRefreshed: false,
-    description: false,
-  };
-
-  const initialSorting = [{ id: "name", desc: false }];
 </script>
 
 {#if isLoading}
@@ -116,14 +198,23 @@
   <ResourceError kind="dashboard" {error} />
 {:else}
   <div class="flex flex-col w-full gap-y-3">
-    <ResourceList
+    <ResourceTable
       kind="dashboard"
       data={displayData}
       {columns}
-      {columnVisibility}
-      {initialSorting}
       toolbar={resolvedToolbar}
+      isFiltered={searchText !== "" || selectedTypes.length > 0}
+      {getRowHref}
     >
+      <TableToolbar
+        slot="toolbar"
+        bind:searchText
+        {filterGroups}
+        onFilterChange={handleFilterChange}
+        onClearAllFilters={clearFilters}
+        bind:sortDirection
+        disabled={(data?.length ?? 0) === 0}
+      />
       <svelte:fragment slot="empty">
         <slot name="empty">
           <ResourceListEmptyState
@@ -142,7 +233,7 @@
           </ResourceListEmptyState>
         </slot>
       </svelte:fragment>
-    </ResourceList>
+    </ResourceTable>
     {#if hasMoreDashboards && seeAllHref}
       <div class="pl-4 py-1">
         <a
diff --git a/web-common/src/features/dashboards/listing/DashboardsTableCompositeCell.svelte b/web-common/src/features/dashboards/listing/DashboardsTableCompositeCell.svelte
deleted file mode 100644
index 0e0f291b77b1..000000000000
--- a/web-common/src/features/dashboards/listing/DashboardsTableCompositeCell.svelte
+++ /dev/null
@@ -1,55 +0,0 @@
-<script lang="ts">
-  import Tag from "@rilldata/web-common/components/tag/Tag.svelte";
-  import Tooltip from "@rilldata/web-common/components/tooltip/Tooltip.svelte";
-  import TooltipContent from "@rilldata/web-common/components/tooltip/TooltipContent.svelte";
-  import ResourceTypeBadge from "@rilldata/web-common/features/entity-management/ResourceTypeBadge.svelte";
-  import { ResourceKind } from "@rilldata/web-common/features/entity-management/resource-selectors";
-  import { timeAgo } from "@rilldata/web-common/lib/time/relative-time";
-
-  export let name: string;
-  export let title: string;
-  export let lastRefreshed: string;
-  export let description: string;
-  export let error: string;
-  export let isMetricsExplorer: boolean;
-  export let href: string;
-
-  $: lastRefreshedDate = lastRefreshed ? new Date(lastRefreshed) : null;
-
-  $: resourceKind = isMetricsExplorer
-    ? ResourceKind.Explore
-    : ResourceKind.Canvas;
-</script>
-
-<a class="flex flex-col gap-y-1 group px-4 py-2.5 w-full h-full" {href}>
-  <div class="flex gap-x-2 items-center min-h-[20px]">
-    <ResourceTypeBadge kind={resourceKind} />
-    <span
-      class="text-fg-secondary text-sm font-semibold group-hover:text-accent-primary-action truncate"
-    >
-      {title !== "" ? title : name}
-    </span>
-    {#if error !== ""}
-      <Tag color="red">Error</Tag>
-    {/if}
-  </div>
-  <div
-    class="flex gap-x-1 text-fg-tertiary text-xs font-normal min-h-[16px] overflow-hidden"
-  >
-    <span class="shrink-0">{name}</span>
-    {#if lastRefreshedDate}
-      <span class="shrink-0">•</span>
-      <Tooltip distance={8}>
-        <span class="shrink-0">Last refreshed {timeAgo(lastRefreshedDate)}</span
-        >
-        <TooltipContent slot="tooltip-content">
-          {lastRefreshedDate.toLocaleString()}
-        </TooltipContent>
-      </Tooltip>
-    {/if}
-    {#if description}
-      <span class="shrink-0">•</span>
-      <span class="truncate">{description}</span>
-    {/if}
-  </div>
-</a>
diff --git a/web-common/src/features/exports/ExportMenu.svelte b/web-common/src/features/exports/ExportMenu.svelte
index e3dcd52499e8..9a96555fbbeb 100644
--- a/web-common/src/features/exports/ExportMenu.svelte
+++ b/web-common/src/features/exports/ExportMenu.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { goto } from "$app/navigation";
+  import { page } from "$app/stores";
   import Button from "@rilldata/web-common/components/button/Button.svelte";
   import * as DropdownMenu from "@rilldata/web-common/components/dropdown-menu";
   import CaretDownIcon from "@rilldata/web-common/components/icons/CaretDownIcon.svelte";
@@ -30,6 +32,28 @@
   let showScheduledReportDialog = false;
   let open = false;
 
+  // Auto-open the scheduled-report dialog when arriving from the dashboards
+  // listing's "Create report" action. The dialog needs the dashboard query,
+  // so we compute it directly here rather than going through the export menu.
+  $: if (
+    !showScheduledReportDialog &&
+    includeScheduledReport &&
+    ScheduledReportDialog &&
+    exploreName &&
+    $page.url.searchParams.get("action") === "create-report"
+  ) {
+    scheduledReportQuery = getQuery(true);
+    if (scheduledReportQuery) {
+      showScheduledReportDialog = true;
+      const url = new URL($page.url);
+      url.searchParams.delete("action");
+      void goto(url.pathname + url.search, {
+        replaceState: true,
+        noScroll: true,
+      });
+    }
+  }
+
   let exportQuery: V1Query | undefined;
   let scheduledReportQuery: V1Query | undefined;
 
@@ -72,7 +96,7 @@
 
   // Only import the Scheduled Report dialog if in the Cloud context.
   // This ensures Rill Developer doesn't try and fail to import the admin-client.
-  let ScheduledReportDialog: typeof TScheduledReportDialog;
+  let ScheduledReportDialog: typeof TScheduledReportDialog | undefined;
   onMount(async () => {
     if (includeScheduledReport) {
       ({ default: ScheduledReportDialog } = await import(
diff --git a/web-admin/src/features/public-urls/DeletePublicURLConfirmDialog.svelte b/web-common/src/features/resources/DeleteConfirmDialog.svelte
similarity index 77%
rename from web-admin/src/features/public-urls/DeletePublicURLConfirmDialog.svelte
rename to web-common/src/features/resources/DeleteConfirmDialog.svelte
index 9deeeeb767fc..75fbe5086177 100644
--- a/web-admin/src/features/public-urls/DeletePublicURLConfirmDialog.svelte
+++ b/web-common/src/features/resources/DeleteConfirmDialog.svelte
@@ -11,15 +11,15 @@
   import { Button } from "@rilldata/web-common/components/button/index.js";
 
   export let open = false;
-  export let id: string;
-  export let onDelete: (id: string) => void;
+  export let title: string;
+  export let onDelete: () => Promise<void>;
 
   async function handleDelete() {
     try {
-      onDelete(id);
+      await onDelete();
       open = false;
     } catch (error) {
-      console.error("Failed to delete public URL:", error);
+      console.error("Delete failed:", error);
     }
   }
 </script>
@@ -32,10 +32,10 @@
   </AlertDialogTrigger>
   <AlertDialogContent>
     <AlertDialogHeader>
-      <AlertDialogTitle>Delete this public URL?</AlertDialogTitle>
+      <AlertDialogTitle>{title}</AlertDialogTitle>
       <AlertDialogDescription>
         <div class="mt-1">
-          Recipients of this URL will no longer be able to access it.
+          <slot />
         </div>
       </AlertDialogDescription>
     </AlertDialogHeader>
@@ -44,8 +44,10 @@
         type="tertiary"
         onClick={() => {
           open = false;
-        }}>Cancel</Button
+        }}
       >
+        Cancel
+      </Button>
       <Button type="destructive" onClick={handleDelete}>Yes, delete</Button>
     </AlertDialogFooter>
   </AlertDialogContent>
diff --git a/web-common/src/features/resources/ResourceList.svelte b/web-common/src/features/resources/ResourceList.svelte
index 52c1fd26bd65..1a1680b39f41 100644
--- a/web-common/src/features/resources/ResourceList.svelte
+++ b/web-common/src/features/resources/ResourceList.svelte
@@ -14,7 +14,6 @@
   } from "tanstack-table-8-svelte-5";
   import { setContext } from "svelte";
   import { writable } from "svelte/store";
-  import ResourceListToolbar from "./ResourceListToolbar.svelte";
 
   export let data: unknown[] = [];
   export let columns: ColumnDef<unknown, unknown>[] = [];
@@ -23,6 +22,13 @@
   export let toolbar: boolean = true;
   export let fixedRowHeight: boolean = true;
   export let initialSorting: SortingState = [];
+  /**
+   * Whether the caller has applied search/filters to `data` before passing it in.
+   * When true and `data` is empty, the "No {kind}s match your search" empty state
+   * is shown. When false (or undefined), falls back to the table's own globalFilter
+   * state for backwards compatibility.
+   */
+  export let isFiltered: boolean | undefined = undefined;
 
   let sorting: SortingState = initialSorting;
   function setSorting(updater: Updater<SortingState>) {
@@ -72,15 +78,16 @@
   // Whenever the input data changes, rerender the table
   $: data && rerender();
 
-  // Check if we're in a filtered state (search is active)
-  $: isFiltered = $table.getState().globalFilter?.length > 0;
+  // Check if we're in a filtered state. Prefer the caller-provided value (since
+  // most callers now pre-filter `data` externally); otherwise fall back to the
+  // table's own globalFilter state.
+  $: isFilteredEffective =
+    isFiltered ?? ($table.getState().globalFilter?.length ?? 0) > 0;
 </script>
 
 <div class="flex flex-col gap-y-3 w-full">
   {#if toolbar}
-    <slot name="toolbar">
-      <ResourceListToolbar />
-    </slot>
+    <slot name="toolbar" />
   {/if}
 
   <div class="w-full">
@@ -97,7 +104,7 @@
       {:else}
         <li class="resource-list-item-empty">
           <div class="text-center py-16">
-            {#if isFiltered}
+            {#if isFilteredEffective}
               <!-- Filtered empty state: no results match search -->
               <div class="flex flex-col gap-y-2 items-center text-sm">
                 <div class="text-fg-secondary font-semibold">
@@ -127,33 +134,19 @@
     @apply list-none p-0 m-0 w-full;
   }
 
-  .resource-list-item,
-  .resource-list-item-empty {
-    @apply block w-full border bg-surface-background;
-  }
-
-  .resource-list-item.fixed-height {
-    @apply h-[60px];
+  .resource-list-item {
+    @apply block w-full border-b border-x-0 border-t-0;
   }
 
-  /* Remove top border on non-first items to avoid double borders */
-  .resource-list-item + .resource-list-item {
-    @apply border-t-0;
+  .resource-list-item:first-child {
+    @apply border-t;
   }
 
-  /* Rounded corners on first and last items */
-  .resource-list-item:first-child,
-  .resource-list-item-empty:first-child {
-    @apply rounded-t-lg;
-  }
-
-  .resource-list-item:last-child,
-  .resource-list-item-empty:last-child {
-    @apply rounded-b-lg;
+  .resource-list-item-empty {
+    @apply block w-full;
   }
 
-  /* Hover effect on list items */
-  .resource-list-item:hover {
-    @apply bg-surface-hover;
+  .resource-list-item.fixed-height {
+    @apply h-[60px];
   }
 </style>
diff --git a/web-common/src/features/resources/ResourceListRow.svelte b/web-common/src/features/resources/ResourceListRow.svelte
new file mode 100644
index 000000000000..6d9ddee0ed1d
--- /dev/null
+++ b/web-common/src/features/resources/ResourceListRow.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+  import Tag from "@rilldata/web-common/components/tag/Tag.svelte";
+  import type { Component, Snippet } from "svelte";
+
+  let {
+    href,
+    title,
+    icon: Icon,
+    iconSize = "14px",
+    errorMessage = undefined,
+    tags,
+    subtitle,
+    actions,
+  }: {
+    href: string;
+    title: string;
+    icon?: Component<{ size: string }>;
+    iconSize?: string;
+    errorMessage?: string | undefined;
+    tags?: Snippet;
+    subtitle?: Snippet;
+    actions?: Snippet;
+  } = $props();
+
+  const GAP_PX = 8; // gap-x-2
+  const subtitlePadding = $derived(
+    Icon ? `${parseInt(iconSize) + GAP_PX}px` : "0",
+  );
+</script>
+
+<div class="flex items-center group w-full h-full">
+  <a {href} class="flex items-center min-w-0 flex-1 px-4 py-2.5 h-full">
+    <div class="flex flex-col gap-y-1 min-w-0 flex-1">
+      <div class="flex gap-x-2 items-center min-h-[20px]">
+        {#if tags}{@render tags()}{/if}
+        {#if Icon}
+          <Icon size={iconSize} />
+        {/if}
+        <span
+          class="text-fg-secondary text-sm font-semibold group-hover:text-accent-primary-action truncate"
+        >
+          {title}
+        </span>
+        {#if errorMessage}
+          <Tag color="red">Error</Tag>
+        {/if}
+      </div>
+      <div
+        class="flex gap-x-1 text-fg-tertiary text-xs font-normal min-h-[16px] overflow-hidden"
+        style:padding-left={subtitlePadding}
+      >
+        {#if subtitle}{@render subtitle()}{/if}
+      </div>
+    </div>
+  </a>
+  {#if actions}
+    <div class="shrink-0 pr-4">
+      {@render actions()}
+    </div>
+  {/if}
+</div>
diff --git a/web-common/src/features/resources/ResourceListToolbar.svelte b/web-common/src/features/resources/ResourceListToolbar.svelte
deleted file mode 100644
index bd4ebda983c4..000000000000
--- a/web-common/src/features/resources/ResourceListToolbar.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<script lang="ts">
-  import { beforeNavigate } from "$app/navigation";
-  import { Search } from "@rilldata/web-common/components/search";
-  import type { Table } from "tanstack-table-8-svelte-5";
-  import { getContext } from "svelte";
-  import type { Readable } from "svelte/store";
-
-  const table = getContext<Readable<Table<unknown>>>("table");
-
-  // Search
-  let filter = "";
-
-  function filterTable(filter: string) {
-    $table.setGlobalFilter(filter);
-  }
-
-  $: filterTable(filter);
-
-  beforeNavigate(() => (filter = "")); // resets filter when changing projects
-</script>
-
-<Search
-  placeholder="Search"
-  autofocus={false}
-  bind:value={filter}
-  rounded="lg"
-/>
diff --git a/web-common/src/features/resources/ResourceTable.svelte b/web-common/src/features/resources/ResourceTable.svelte
new file mode 100644
index 000000000000..576930da7133
--- /dev/null
+++ b/web-common/src/features/resources/ResourceTable.svelte
@@ -0,0 +1,227 @@
+<script lang="ts" module>
+  declare module "tanstack-table-8-svelte-5" {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    interface ColumnMeta<TData, TValue> {
+      width?: string;
+      align?: "left" | "right";
+      headerClass?: string;
+      cellClass?: string;
+    }
+  }
+</script>
+
+<script lang="ts">
+  import { goto } from "$app/navigation";
+  import ArrowDown from "@rilldata/web-common/components/icons/ArrowDown.svelte";
+  import type {
+    ColumnDef,
+    SortingState,
+    TableOptions,
+    Updater,
+  } from "tanstack-table-8-svelte-5";
+  import {
+    createSvelteTable,
+    flexRender,
+    getCoreRowModel,
+    getFilteredRowModel,
+    getSortedRowModel,
+  } from "tanstack-table-8-svelte-5";
+  import { setContext } from "svelte";
+  import { writable } from "svelte/store";
+
+  export let data: unknown[] = [];
+  // Loosely typed because tanstack-table's ColumnDef discriminated union does
+  // not narrow well across component boundaries; callers retain strong typing
+  // on their own column definitions.
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  export let columns: ColumnDef<any, any>[] = [];
+  export let columnVisibility: Record<string, boolean> = {};
+  export let kind: string;
+  export let toolbar: boolean = true;
+  export let initialSorting: SortingState = [];
+  /**
+   * Whether the caller has applied search/filters to `data` before passing it in.
+   * When true and `data` is empty, the "No {kind}s match your search" empty state
+   * is shown. Otherwise the regular empty slot is shown.
+   */
+  export let isFiltered: boolean | undefined = undefined;
+  /** If provided, each body row navigates to this href on click. */
+  export let getRowHref:
+    | ((row: unknown) => string | undefined | null)
+    | undefined = undefined;
+
+  let sorting: SortingState = initialSorting;
+  function setSorting(updater: Updater<SortingState>) {
+    if (updater instanceof Function) {
+      sorting = updater(sorting);
+    } else {
+      sorting = updater;
+    }
+    options.update((old) => ({
+      ...old,
+      state: { ...old.state, sorting },
+    }));
+  }
+
+  const options = writable<TableOptions<unknown>>({
+    data: data,
+    columns: columns as ColumnDef<unknown, unknown>[],
+    enableSorting: true,
+    enableFilters: true,
+    state: {
+      sorting,
+      columnVisibility,
+    },
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+  });
+
+  const table = createSvelteTable(options);
+  setContext("table", table);
+
+  $: options.update((old) => ({ ...old, data }));
+
+  $: rows = $table.getRowModel().rows;
+  $: headerGroups = $table.getHeaderGroups();
+  $: visibleColumns = $table.getVisibleLeafColumns();
+  $: isFilteredEffective =
+    isFiltered ?? ($table.getState().globalFilter?.length ?? 0) > 0;
+
+  function navigate(href: string | undefined | null) {
+    if (!href) return;
+    void goto(href);
+  }
+
+  function handleRowClick(e: MouseEvent, href: string | undefined | null) {
+    if (!href) return;
+    // Don't intercept clicks that originated inside an interactive element
+    // (e.g. the actions button). Those handle navigation/behavior themselves.
+    const target = e.target as HTMLElement;
+    if (target.closest('button, a, [role="menu"], [data-no-row-click]')) return;
+    navigate(href);
+  }
+
+  function handleRowKeydown(e: KeyboardEvent, href: string | undefined | null) {
+    if (!href) return;
+    if (e.key === "Enter") {
+      e.preventDefault();
+      navigate(href);
+    }
+  }
+</script>
+
+<div class="flex flex-col gap-y-3 w-full">
+  {#if toolbar}
+    <slot name="toolbar" />
+  {/if}
+
+  <table class="w-full table-fixed border-collapse">
+    <colgroup>
+      {#each visibleColumns as column (column.id)}
+        <col style:width={column.columnDef.meta?.width} />
+      {/each}
+    </colgroup>
+    <thead>
+      {#each headerGroups as group (group.id)}
+        <tr class="h-10 border-b border-border">
+          {#each group.headers as header (header.id)}
+            {@const canSort = header.column.getCanSort()}
+            {@const sortDir = header.column.getIsSorted()}
+            {@const alignRight =
+              header.column.columnDef.meta?.align === "right"}
+            <th
+              class="px-2 text-fg-muted text-sm font-medium align-middle truncate"
+              class:text-left={!alignRight}
+              class:text-right={alignRight}
+            >
+              {#if !header.isPlaceholder}
+                {#if canSort}
+                  <button
+                    type="button"
+                    class="inline-flex items-center gap-x-1 max-w-full truncate hover:text-fg-secondary transition-colors"
+                    class:text-fg-secondary={!!sortDir}
+                    on:click={header.column.getToggleSortingHandler()}
+                  >
+                    <span class="truncate">
+                      <svelte:component
+                        this={flexRender(
+                          header.column.columnDef.header,
+                          header.getContext(),
+                        )}
+                      />
+                    </span>
+                    {#if sortDir}
+                      <ArrowDown flip={sortDir === "asc"} size="12px" />
+                    {/if}
+                  </button>
+                {:else}
+                  <svelte:component
+                    this={flexRender(
+                      header.column.columnDef.header,
+                      header.getContext(),
+                    )}
+                  />
+                {/if}
+              {/if}
+            </th>
+          {/each}
+        </tr>
+      {/each}
+    </thead>
+    <tbody>
+      {#if rows.length}
+        {#each rows as row (row.id)}
+          {@const href = getRowHref?.(row.original)}
+          <tr
+            class="h-[52px] border-b border-border"
+            class:cursor-pointer={!!href}
+            class:hover:bg-surface-subtle={!!href}
+            role={href ? "link" : undefined}
+            tabindex={href ? 0 : undefined}
+            on:click={(e) => handleRowClick(e, href)}
+            on:keydown={(e) => handleRowKeydown(e, href)}
+          >
+            {#each row.getVisibleCells() as cell (cell.id)}
+              <td
+                class="px-2 text-sm text-fg-primary align-middle truncate"
+                class:text-right={cell.column.columnDef.meta?.align === "right"}
+              >
+                <svelte:component
+                  this={flexRender(
+                    cell.column.columnDef.cell,
+                    cell.getContext(),
+                  )}
+                />
+              </td>
+            {/each}
+          </tr>
+        {/each}
+      {:else}
+        <tr>
+          <td colspan={visibleColumns.length || 1}>
+            <div class="text-center py-16">
+              {#if isFilteredEffective}
+                <div class="flex flex-col gap-y-2 items-center text-sm">
+                  <div class="text-fg-secondary font-semibold">
+                    No {kind}s match your search
+                  </div>
+                  <div class="text-fg-secondary">
+                    Try adjusting your search terms
+                  </div>
+                </div>
+              {:else}
+                <slot name="empty">
+                  <div class="text-fg-secondary text-sm font-semibold">
+                    You don't have any {kind}s yet
+                  </div>
+                </slot>
+              {/if}
+            </div>
+          </td>
+        </tr>
+      {/if}
+    </tbody>
+  </table>
+</div>
diff --git a/web-common/src/features/resources/cells/NameCell.svelte b/web-common/src/features/resources/cells/NameCell.svelte
new file mode 100644
index 000000000000..ac5b8b710169
--- /dev/null
+++ b/web-common/src/features/resources/cells/NameCell.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+  export let name: string;
+</script>
+
+<span class="font-medium text-fg-primary truncate" title={name}>{name}</span>
diff --git a/web-common/src/features/resources/cells/RelativeTimeCell.svelte b/web-common/src/features/resources/cells/RelativeTimeCell.svelte
new file mode 100644
index 000000000000..b1da94f07f40
--- /dev/null
+++ b/web-common/src/features/resources/cells/RelativeTimeCell.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+  import Tooltip from "@rilldata/web-common/components/tooltip/Tooltip.svelte";
+  import TooltipContent from "@rilldata/web-common/components/tooltip/TooltipContent.svelte";
+  import { timeAgo } from "@rilldata/web-common/lib/time/relative-time";
+
+  export let value: string | undefined;
+  export let fallback: string = "—";
+
+  $: date = value ? new Date(value) : null;
+</script>
+
+{#if date}
+  <Tooltip distance={8}>
+    <span class="truncate">{timeAgo(date)}</span>
+    <TooltipContent slot="tooltip-content">
+      {date.toLocaleString()}
+    </TooltipContent>
+  </Tooltip>
+{:else}
+  <span class="text-fg-tertiary">{fallback}</span>
+{/if}
diff --git a/web-common/src/features/resources/cells/StatusTextCell.svelte b/web-common/src/features/resources/cells/StatusTextCell.svelte
new file mode 100644
index 000000000000..00f6ee597e27
--- /dev/null
+++ b/web-common/src/features/resources/cells/StatusTextCell.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+  type Tone = "default" | "muted" | "success" | "destructive";
+
+  export let label: string;
+  export let tone: Tone = "default";
+</script>
+
+<span
+  class="truncate"
+  class:text-fg-tertiary={tone === "muted"}
+  class:text-green-600={tone === "success"}
+  class:text-destructive={tone === "destructive"}
+>
+  {label}
+</span>