diff --git a/apps/webapp/app/components/navigation/SideMenu.tsx b/apps/webapp/app/components/navigation/SideMenu.tsx
index 968e18073b2..185c0a8a559 100644
--- a/apps/webapp/app/components/navigation/SideMenu.tsx
+++ b/apps/webapp/app/components/navigation/SideMenu.tsx
@@ -886,23 +886,6 @@ export function SideMenu({
     });
   }
 
-  if (user.admin || user.isImpersonating || featureFlags.hasWebhooksAccess) {
-    staticSections.push({
-      id: "webhooks",
-      title: "Webhooks",
-      items: [
-        {
-          id: "webhook-deliveries",
-          name: "Deliveries",
-          icon: WebhookIcon,
-          activeIconColor: "text-webhooks",
-          to: v3WebhooksPath(organization, project, environment),
-          dataAction: "webhook-deliveries",
-        },
-      ],
-    });
-  }
-
   staticSections.push({
     id: "deployments",
     title: "Deployments",
@@ -1204,6 +1187,19 @@ export function SideMenu({
                 isCollapsed={isCollapsed}
                 yieldActiveToFavorite
               />
+              {(user.admin || user.isImpersonating || featureFlags.hasWebhooksAccess) && (
+                <SideMenuItem
+                  name="Webhooks"
+                  icon={WebhookIcon}
+                  activeIconColor="text-webhooks"
+                  inactiveIconColor="text-text-dimmed"
+                  to={v3WebhooksPath(organization, project, environment)}
+                  data-action="webhooks"
+                  badge={<NewBadge />}
+                  isCollapsed={isCollapsed}
+                  yieldActiveToFavorite
+                />
+              )}
             </div>
 
             {orderedSectionIds.map((sectionId) => {
diff --git a/apps/webapp/app/components/navigation/favoritePages.tsx b/apps/webapp/app/components/navigation/favoritePages.tsx
index 4439aadedfd..c07ba2d6d5d 100644
--- a/apps/webapp/app/components/navigation/favoritePages.tsx
+++ b/apps/webapp/app/components/navigation/favoritePages.tsx
@@ -40,6 +40,7 @@ import { TasksIcon } from "~/assets/icons/TasksIcon";
 import { UsageIcon } from "~/assets/icons/UsageIcon";
 import { UserGroupIcon } from "~/assets/icons/UserGroupIcon";
 import { WaitpointTokenIcon } from "~/assets/icons/WaitpointTokenIcon";
+import { WebhookIcon } from "~/assets/icons/WebhookIcon";
 import { VercelLogo } from "~/components/integrations/VercelLogo";
 import { useOptionalUser } from "~/hooks/useUser";
 import { type FavoritePage } from "~/services/dashboardPreferences.server";
@@ -71,6 +72,7 @@ const FAVORITE_PAGE_ICONS: Record<
   "task-agent": { icon: CubeSparkleIcon, activeColor: "text-agents" },
   runs: { icon: RunsIcon, activeColor: "text-runs" },
   sessions: { icon: AIChatIcon, activeColor: "text-sessions" },
+  webhooks: { icon: WebhookIcon, activeColor: "text-webhooks" },
   prompts: { icon: AIPenIcon, activeColor: "text-aiPrompts" },
   models: { icon: Box3DIcon, activeColor: "text-models" },
   logs: { icon: LogsIcon, activeColor: "text-logs" },
@@ -213,6 +215,7 @@ const ENV_PAGE_META: Record<string, PageMeta> = {
   "": { icon: "tasks", name: "Tasks", singular: "Task" },
   runs: { icon: "runs", name: "Runs", singular: "Run" },
   sessions: { icon: "sessions", name: "Sessions", singular: "Session" },
+  webhooks: { icon: "webhooks", name: "Webhook deliveries" },
   prompts: { icon: "prompts", name: "Prompts", singular: "Prompt" },
   models: { icon: "models", name: "Models", singular: "Model" },
   logs: { icon: "logs", name: "Logs" },
diff --git a/apps/webapp/app/components/navigation/sideMenuTypes.ts b/apps/webapp/app/components/navigation/sideMenuTypes.ts
index 0aa3dd03985..508c4121175 100644
--- a/apps/webapp/app/components/navigation/sideMenuTypes.ts
+++ b/apps/webapp/app/components/navigation/sideMenuTypes.ts
@@ -9,7 +9,6 @@ export const SideMenuSectionIdSchema = z.enum([
   "deployments",
   "project-settings",
   "tasks",
-  "webhooks",
 ]);
 
 // Inferred type from the schema
diff --git a/apps/webapp/app/components/primitives/CopyableText.tsx b/apps/webapp/app/components/primitives/CopyableText.tsx
index 9634ad1ac01..bf5898390a3 100644
--- a/apps/webapp/app/components/primitives/CopyableText.tsx
+++ b/apps/webapp/app/components/primitives/CopyableText.tsx
@@ -12,6 +12,7 @@ export function CopyableText({
   asChild,
   variant,
   hideTooltip,
+  truncate,
 }: {
   value: string;
   copyValue?: string;
@@ -24,6 +25,12 @@ export function CopyableText({
    * fire Radix's global "one tooltip open at a time" close and dismiss the parent.
    */
   hideTooltip?: boolean;
+  /**
+   * Ellipsise the value rather than letting it overflow its column. For unbreakable strings
+   * (hashes, opaque ids) that offer no wrap opportunity. The copy button moves into a reserved
+   * right gutter so it stays visible instead of sitting outside the column.
+   */
+  truncate?: boolean;
 }) {
   const [isHovered, setIsHovered] = useState(false);
   const { copy, copied } = useCopy(copyValue ?? value);
@@ -51,15 +58,26 @@ export function CopyableText({
 
     return (
       <span
-        className={cn("group relative inline-flex h-6 items-center", className)}
+        className={cn(
+          "group relative inline-flex h-6 items-center",
+          truncate && "max-w-full pr-7",
+          className
+        )}
         onMouseLeave={() => setIsHovered(false)}
       >
-        <span onMouseEnter={() => setIsHovered(true)}>{value}</span>
+        <span
+          className={cn(truncate && "min-w-0 truncate")}
+          onMouseEnter={() => setIsHovered(true)}
+        >
+          {value}
+        </span>
         <span
           onClick={copy}
           onMouseDown={(e) => e.stopPropagation()}
           className={cn(
-            "absolute -right-6 top-0 z-10 size-6 font-sans",
+            "absolute top-0 z-10 size-6 font-sans",
+            // Truncated values reserve a right gutter, so the button sits inside it
+            truncate ? "right-0" : "-right-6",
             isHovered ? "flex" : "hidden"
           )}
         >
diff --git a/apps/webapp/app/components/run/RunTimeline.tsx b/apps/webapp/app/components/run/RunTimeline.tsx
index 1672a2b2f78..edc576980c6 100644
--- a/apps/webapp/app/components/run/RunTimeline.tsx
+++ b/apps/webapp/app/components/run/RunTimeline.tsx
@@ -483,6 +483,12 @@ export type RunTimelineLineProps = {
   state?: TimelineEventState;
   variant?: TimelineLineVariant;
   style?: TimelineStyle;
+  /**
+   * Round the top of a thick ("normal") line. Needed when the line itself starts the thick bar,
+   * as in the delivery timeline, where nothing above it supplies a `start-cap-thick`. The run
+   * timeline always precedes its thick line with that cap, so it leaves this off.
+   */
+  roundedTop?: boolean;
 };
 
 export function RunTimelineLine({
@@ -490,11 +496,12 @@ export function RunTimelineLine({
   state,
   variant = "normal",
   style = "normal",
+  roundedTop = false,
 }: RunTimelineLineProps) {
   return (
     <div className="grid h-6 grid-cols-[1.125rem_1fr] gap-1 text-xs">
       <div className="flex items-stretch justify-center">
-        <LineMarker state={state} variant={variant} style={style} />
+        <LineMarker state={state} variant={variant} style={style} roundedTop={roundedTop} />
       </div>
       <div className="flex items-center justify-between gap-3">
         <span className="text-text-dimmed">{title}</span>
@@ -507,10 +514,12 @@ function LineMarker({
   state,
   variant,
   style,
+  roundedTop = false,
 }: {
   state?: TimelineEventState;
   variant: TimelineLineVariant;
   style?: TimelineStyle;
+  roundedTop?: boolean;
 }) {
   let containerClass = "bg-text-dimmed";
   switch (state) {
@@ -532,7 +541,7 @@ function LineMarker({
   switch (variant) {
     case "normal":
       return (
-        <div className={cn("relative w-1.75", containerClass)}>
+        <div className={cn("relative w-1.75", roundedTop && "rounded-t-xs", containerClass)}>
           {state === "inprogress" && (
             <div
               className="absolute inset-0 h-full w-full animate-tile-scroll opacity-30"
diff --git a/apps/webapp/app/components/webhookDeliveries/v1/DeliveriesTable.tsx b/apps/webapp/app/components/webhookDeliveries/v1/DeliveriesTable.tsx
index 253864aef35..c22abe055e8 100644
--- a/apps/webapp/app/components/webhookDeliveries/v1/DeliveriesTable.tsx
+++ b/apps/webapp/app/components/webhookDeliveries/v1/DeliveriesTable.tsx
@@ -3,6 +3,7 @@ import { useLocation, useNavigation } from "@remix-run/react";
 import { AIChatIcon } from "~/assets/icons/AIChatIcon";
 import { RunsIcon } from "~/assets/icons/RunsIcon";
 import { WebhookIcon } from "~/assets/icons/WebhookIcon";
+import { Badge } from "~/components/primitives/Badge";
 import { DateTime } from "~/components/primitives/DateTime";
 import { MiddleTruncate } from "~/components/primitives/MiddleTruncate";
 import { Paragraph } from "~/components/primitives/Paragraph";
@@ -121,28 +122,26 @@ export function DeliveriesTable({
                   <TableCell to={webhookPath}>
                     {delivery.webhook ? (
                       <span className="flex items-center gap-x-1">
-                        <WebhookIcon className="size-4 text-webhooks" />
+                        <WebhookIcon className="size-4.5 min-w-4.5 text-webhooks" />
                         {delivery.webhook.slug}
                       </span>
                     ) : (
-                      <span className="text-text-dimmed">Unknown</span>
+                      <span className="text-text-dimmed group-hover/table-row:text-text-bright">
+                        Unknown
+                      </span>
                     )}
                   </TableCell>
                 )}
                 <TableCell to={deliveryPath}>
                   <span className="flex items-center gap-1.5">
                     <span className="font-mono text-xs">{delivery.friendlyId}</span>
-                    {delivery.isTest ? (
-                      <span className="rounded-sm bg-charcoal-700 px-1 py-0.5 text-xxs font-semibold uppercase tracking-wide text-text-dimmed">
-                        Test
-                      </span>
-                    ) : null}
+                    {delivery.isTest ? <Badge variant="extra-small">Test</Badge> : null}
                   </span>
                 </TableCell>
                 <TableCell to={deliveryPath}>
                   <DeliveryStatusBadge status={delivery.status} />
                 </TableCell>
-                <TableCell>
+                <TableCell to={deliveryPath}>
                   {delivery.externalDeliveryId ? (
                     <div className="w-[24ch]">
                       <MiddleTruncate
@@ -151,10 +150,13 @@ export function DeliveriesTable({
                       />
                     </div>
                   ) : (
-                    <span className="text-text-dimmed">None</span>
+                    <span className="text-text-dimmed group-hover/table-row:text-text-bright">
+                      None
+                    </span>
                   )}
                 </TableCell>
-                <TableCell to={sessionPath ?? runPath}>
+                {/* Falls back to the delivery so the whole row stays clickable when there is no target */}
+                <TableCell to={sessionPath ?? runPath ?? deliveryPath}>
                   {delivery.session ? (
                     <span className="flex items-center gap-x-1">
                       <AIChatIcon className="size-4 text-sessions" />
@@ -166,20 +168,24 @@ export function DeliveriesTable({
                       <span className="font-mono text-xs">{delivery.run.friendlyId}</span>
                     </span>
                   ) : (
-                    <span className="text-text-dimmed">None</span>
+                    <span className="text-text-dimmed group-hover/table-row:text-text-bright">
+                      None
+                    </span>
                   )}
                 </TableCell>
-                <TableCell>
+                <TableCell to={deliveryPath}>
                   <DateTime date={delivery.createdAt} />
                 </TableCell>
-                <TableCell>
+                <TableCell to={deliveryPath}>
                   {delivery.processedAt ? (
                     <DateTime date={delivery.processedAt} />
                   ) : (
-                    <span className="text-text-dimmed">None</span>
+                    <span className="text-text-dimmed group-hover/table-row:text-text-bright">
+                      None
+                    </span>
                   )}
                 </TableCell>
-                <TableCell>
+                <TableCell to={deliveryPath}>
                   {delivery.status === "FAILED" && delivery.errorMessage ? (
                     <SimpleTooltip
                       content={delivery.errorMessage}
@@ -190,7 +196,9 @@ export function DeliveriesTable({
                       }
                     />
                   ) : (
-                    <span className="text-text-dimmed">None</span>
+                    <span className="text-text-dimmed group-hover/table-row:text-text-bright">
+                      None
+                    </span>
                   )}
                 </TableCell>
                 <DeliveryActionsCell
diff --git a/apps/webapp/app/components/webhookDeliveries/v1/DeliveryTimeline.tsx b/apps/webapp/app/components/webhookDeliveries/v1/DeliveryTimeline.tsx
index 9f7e1a4cd9e..ae3386f82dd 100644
--- a/apps/webapp/app/components/webhookDeliveries/v1/DeliveryTimeline.tsx
+++ b/apps/webapp/app/components/webhookDeliveries/v1/DeliveryTimeline.tsx
@@ -30,6 +30,9 @@ export function DeliveryTimeline({ delivery, runPath, sessionPath }: DeliveryTim
               key={item.id}
               state={item.state}
               variant={item.variant}
+              // "Received" is a thin start-cap, so a thick line here begins the bar and has to
+              // round its own top. Thin ("light") lines, as in the FILTERED case, need nothing.
+              roundedTop={item.variant === "normal"}
               title={
                 <span className="flex items-center gap-1.5">
                   {item.to ? (
diff --git a/apps/webapp/app/components/webhookDeliveries/v1/WebhookDeliveryFilters.tsx b/apps/webapp/app/components/webhookDeliveries/v1/WebhookDeliveryFilters.tsx
index aa6d9edd9fd..fcd3fa67df8 100644
--- a/apps/webapp/app/components/webhookDeliveries/v1/WebhookDeliveryFilters.tsx
+++ b/apps/webapp/app/components/webhookDeliveries/v1/WebhookDeliveryFilters.tsx
@@ -155,20 +155,13 @@ function Menu(props: MenuProps) {
   }
 }
 
-function MainMenu({ searchValue, trigger, clearSearchValue, setFilterType }: MenuProps) {
-  const filtered = useMemo(() => {
-    return filterTypes.filter((item) =>
-      item.title.toLowerCase().includes(searchValue.toLowerCase())
-    );
-  }, [searchValue]);
-
+function MainMenu({ trigger, clearSearchValue, setFilterType }: MenuProps) {
   return (
     <SelectProvider virtualFocus={true}>
       {trigger}
       <SelectPopover>
-        <ComboBox placeholder={"Filter by..."} shortcut={moreFiltersShortcut} value={searchValue} />
         <SelectList>
-          {filtered.map((type, index) => (
+          {filterTypes.map((type, index) => (
             <SelectButtonItem
               key={type.name}
               onClick={() => {
@@ -190,12 +183,10 @@ function MainMenu({ searchValue, trigger, clearSearchValue, setFilterType }: Men
 function StatusDropdown({
   trigger,
   clearSearchValue,
-  searchValue,
   onClose,
 }: {
   trigger: ReactNode;
   clearSearchValue: () => void;
-  searchValue: string;
   onClose?: () => void;
 }) {
   const { values, replace } = useSearchParams();
@@ -205,12 +196,6 @@ function StatusDropdown({
     replace({ statuses: values, cursor: undefined, direction: undefined });
   };
 
-  const filtered = useMemo(() => {
-    return deliveryStatuses.filter((item) =>
-      item.title.toLowerCase().includes(searchValue.toLowerCase())
-    );
-  }, [searchValue]);
-
   return (
     <SelectProvider value={values("statuses")} setValue={handleChange} virtualFocus={true}>
       {trigger}
@@ -225,9 +210,8 @@ function StatusDropdown({
           return true;
         }}
       >
-        <ComboBox placeholder={"Filter by status..."} value={searchValue} />
         <SelectList>
-          {filtered.map((item, index) => (
+          {deliveryStatuses.map((item, index) => (
             <SelectItem
               key={item.value}
               value={item.value}
@@ -264,7 +248,7 @@ function PermanentStatusFilter() {
 
   return (
     <FilterMenuProvider>
-      {(search, setSearch) => (
+      {(_search, setSearch) => (
         <StatusDropdown
           trigger={
             <Ariakit.TooltipProvider timeout={200}>
@@ -309,7 +293,6 @@ function PermanentStatusFilter() {
               </Ariakit.Tooltip>
             </Ariakit.TooltipProvider>
           }
-          searchValue={search}
           clearSearchValue={() => setSearch("")}
         />
       )}
@@ -536,7 +519,7 @@ function PermanentTestFilter() {
               />
             ) : (
               <div className="flex h-6 items-center gap-1.5 rounded border border-charcoal-600 bg-secondary pl-1 pr-2 text-xs text-text-bright transition group-hover:border-charcoal-550 group-hover:bg-charcoal-600">
-                <BeakerIcon className="size-4 text-text-dimmed" />
+                <BeakerIcon className="size-4 text-text-bright" />
                 <span>Test</span>
               </div>
             )}
diff --git a/apps/webapp/app/presenters/v3/WebhookDeliveriesListPresenter.server.ts b/apps/webapp/app/presenters/v3/WebhookDeliveriesListPresenter.server.ts
index b2c22e244b2..efe5e146129 100644
--- a/apps/webapp/app/presenters/v3/WebhookDeliveriesListPresenter.server.ts
+++ b/apps/webapp/app/presenters/v3/WebhookDeliveriesListPresenter.server.ts
@@ -9,7 +9,7 @@ import {
   type WebhookDeliveryListItem,
 } from "./WebhookDetailPresenter.server";
 
-const DELIVERIES_PAGE_SIZE = 25;
+const DELIVERIES_PAGE_SIZE = 60;
 type Direction = "forward" | "backward";
 
 export type WebhookDeliveriesListResult = {
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.webhooks._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.webhooks._index/route.tsx
index c8eee2552c7..37ab62c52d7 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.webhooks._index/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.webhooks._index/route.tsx
@@ -149,31 +149,35 @@ export default function Page() {
   const { deliveries, pagination, possibleWebhooks, hasFilters } =
     useTypedLoaderData<typeof loader>();
 
+  const { visibleDeliveries, newDeliveriesButton } = useLiveDeliveries(deliveries);
+
   return (
     <>
       <NavBar>
-        <PageTitle title="Deliveries" />
+        <PageTitle title="Webhook deliveries" />
       </NavBar>
       <PageBody scrollable={false}>
         <div className="grid h-full max-h-full grid-rows-[auto_1fr] overflow-hidden">
           <div className="flex items-start justify-between gap-x-2 p-2">
             <WebhookDeliveryFilters possibleWebhooks={possibleWebhooks} defaultPeriod="7d" />
-            <ListPagination list={{ pagination }} />
+            {/* The new-deliveries button sits inline, immediately left of the pager */}
+            <div className="flex items-center gap-x-2">
+              {newDeliveriesButton}
+              <ListPagination list={{ pagination }} />
+            </div>
           </div>
-          <LiveDeliveriesTable deliveries={deliveries} hasFilters={hasFilters} />
+          {/* Sits directly in the 1fr row, like the runs, sessions and batches lists. No
+              stickyHeader: that switches Table's container to overflow-visible, which stops it
+              being the scroll container. The header is sticky either way (TableHeader always sets
+              sticky top-0), and the other webhook tables only pass it because an ancestor scrolls. */}
+          <DeliveriesTable deliveries={visibleDeliveries} showWebhook hasFilters={hasFilters} />
         </div>
       </PageBody>
     </>
   );
 }
 
-function LiveDeliveriesTable({
-  deliveries,
-  hasFilters,
-}: {
-  deliveries: WebhookDeliveryListItem[];
-  hasFilters: boolean;
-}) {
+function useLiveDeliveries(deliveries: WebhookDeliveryListItem[]) {
   const organization = useOrganization();
   const project = useProject();
   const environment = useEnvironment();
@@ -204,36 +208,22 @@ function LiveDeliveriesTable({
     revalidator.revalidate();
   };
 
-  return (
-    <div className="flex h-full flex-col overflow-hidden">
-      {showNewDeliveriesBanner ? (
-        <div className="flex shrink-0 justify-end px-2 py-1.5">
-          <span className="flex duration-150 animate-in fade-in-0">
-            <Button
-              variant="secondary/small"
-              className="text-text-bright"
-              onClick={onClickShowNewDeliveries}
-              LeadingIcon={<PulsingDot className="h-2 w-2" />}
-              tooltip="Refresh to see new deliveries"
-              aria-label="New deliveries received. Refresh to see them."
-            >
-              {newDeliveriesCount >= 100
-                ? "99+ new deliveries"
-                : `${newDeliveriesCount} new ${
-                    newDeliveriesCount === 1 ? "delivery" : "deliveries"
-                  }`}
-            </Button>
-          </span>
-        </div>
-      ) : null}
-      <div className="min-h-0 flex-1 overflow-hidden">
-        <DeliveriesTable
-          deliveries={visibleDeliveries}
-          showWebhook
-          stickyHeader
-          hasFilters={hasFilters}
-        />
-      </div>
-    </div>
-  );
+  const newDeliveriesButton = showNewDeliveriesBanner ? (
+    <span className="flex duration-150 animate-in fade-in-0">
+      <Button
+        variant="secondary/small"
+        className="text-text-bright"
+        onClick={onClickShowNewDeliveries}
+        LeadingIcon={<PulsingDot className="h-2 w-2" />}
+        tooltip="Refresh to see new deliveries"
+        aria-label="New deliveries received. Refresh to see them."
+      >
+        {newDeliveriesCount >= 100
+          ? "99+ new deliveries"
+          : `${newDeliveriesCount} new ${newDeliveriesCount === 1 ? "delivery" : "deliveries"}`}
+      </Button>
+    </span>
+  ) : null;
+
+  return { visibleDeliveries, newDeliveriesButton };
 }
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.webhooks.deliveries.$deliveryParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.webhooks.deliveries.$deliveryParam/route.tsx
index 303a54b5035..552cd5fdcd1 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.webhooks.deliveries.$deliveryParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.webhooks.deliveries.$deliveryParam/route.tsx
@@ -1,7 +1,7 @@
 import { BookOpenIcon } from "@heroicons/react/24/solid";
 import { type MetaFunction, useRevalidator } from "@remix-run/react";
 import { type LoaderFunctionArgs } from "@remix-run/server-runtime";
-import { useState } from "react";
+import { type ReactNode, useState } from "react";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { z } from "zod";
 import { AIChatIcon } from "~/assets/icons/AIChatIcon";
@@ -106,6 +106,17 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   return typedjson({ delivery, retentionDays: env.WEBHOOK_PARTITION_RETENTION_DAYS });
 };
 
+/** Centred placeholder for a tab whose content was never captured. */
+function EmptyTabMessage({ children }: { children: ReactNode }) {
+  return (
+    <div className="flex h-full items-center justify-center">
+      <Paragraph variant="base" className="text-center text-text-dimmed">
+        {children}
+      </Paragraph>
+    </div>
+  );
+}
+
 function formatDuration(createdAt: Date, processedAt: Date | null): string | null {
   if (!processedAt) return null;
   const ms = processedAt.getTime() - createdAt.getTime();
@@ -183,7 +194,6 @@ export default function Page() {
             <span className="flex items-center gap-2">
               <WebhookIcon className="size-4.5 text-webhooks" />
               <span className="font-mono">{delivery.friendlyId}</span>
-              <DeliveryStatusBadge status={delivery.status} />
             </span>
           }
         />
@@ -224,9 +234,9 @@ export default function Page() {
                   eventJson ? (
                     <CodeBlock code={eventJson} language="json" showLineNumbers maxLines={1000} />
                   ) : (
-                    <Paragraph variant="small" className="text-text-dimmed">
+                    <EmptyTabMessage>
                       No event payload was captured for this delivery.
-                    </Paragraph>
+                    </EmptyTabMessage>
                   )
                 ) : headersJson ? (
                   <CodeBlock
@@ -236,9 +246,9 @@ export default function Page() {
                     maxLines={200}
                   />
                 ) : (
-                  <Paragraph variant="small" className="text-text-dimmed">
+                  <EmptyTabMessage>
                     No request headers were captured for this delivery.
-                  </Paragraph>
+                  </EmptyTabMessage>
                 )}
               </div>
             </div>
@@ -262,7 +272,11 @@ export default function Page() {
                   <Property.Item>
                     <Property.Label>ID</Property.Label>
                     <Property.Value>
-                      <CopyableText value={delivery.friendlyId} className="font-mono text-xs" />
+                      <CopyableText
+                        value={delivery.friendlyId}
+                        className="font-mono text-sm"
+                        truncate
+                      />
                     </Property.Value>
                   </Property.Item>
                   <Property.Item>
@@ -305,7 +319,7 @@ export default function Page() {
                       <Property.Value>
                         <TextLink
                           to={sessionPath}
-                          className="inline-flex items-center gap-1 font-mono text-xs"
+                          className="inline-flex items-center gap-1 font-mono text-sm"
                         >
                           <AIChatIcon className="size-4 text-sessions" />
                           {delivery.session.friendlyId}
@@ -319,7 +333,7 @@ export default function Page() {
                       {delivery.run && runPath ? (
                         <TextLink
                           to={runPath}
-                          className="inline-flex items-center gap-1 font-mono text-xs"
+                          className="inline-flex items-center gap-1 font-mono text-sm"
                         >
                           <RunsIcon className="size-4 text-runs" />
                           {delivery.run.friendlyId}
@@ -335,7 +349,8 @@ export default function Page() {
                       {delivery.externalDeliveryId ? (
                         <CopyableText
                           value={delivery.externalDeliveryId}
-                          className="font-mono text-xs"
+                          className="font-mono text-sm"
+                          truncate
                         />
                       ) : (
                         <span className="text-text-dimmed">None</span>
@@ -348,7 +363,8 @@ export default function Page() {
                       {delivery.idempotencyKey ? (
                         <CopyableText
                           value={delivery.idempotencyKey}
-                          className="font-mono text-xs"
+                          className="font-mono text-sm"
+                          truncate
                         />
                       ) : (
                         <span className="text-text-dimmed">None</span>
@@ -359,7 +375,11 @@ export default function Page() {
                     <Property.Label>Raw body hash</Property.Label>
                     <Property.Value>
                       {delivery.rawBodyHash ? (
-                        <CopyableText value={delivery.rawBodyHash} className="font-mono text-xs" />
+                        <CopyableText
+                          value={delivery.rawBodyHash}
+                          className="font-mono text-sm"
+                          truncate
+                        />
                       ) : (
                         <span className="text-text-dimmed">None</span>
                       )}
diff --git a/apps/webapp/seed-webhook-deliveries.ts b/apps/webapp/seed-webhook-deliveries.ts
index 856e6c37f35..436a7eaa9a3 100644
--- a/apps/webapp/seed-webhook-deliveries.ts
+++ b/apps/webapp/seed-webhook-deliveries.ts
@@ -469,9 +469,13 @@ async function main() {
         [ep.spec.signatureHeader.toLowerCase()]:
           status === "FAILED" ? "tampered" : `sig_${nanoid()}`,
       };
+      // friendlyId must be the id plus the prefix, matching WebhookDeliveryId. The detail
+      // lookup strips "whd_" and queries Postgres by `id`, so minting the two independently
+      // makes every seeded delivery's detail page 404.
+      const deliveryId = nanoid();
       rows.push({
-        id: nanoid(),
-        friendlyId: `whd_${nanoid()}`,
+        id: deliveryId,
+        friendlyId: `whd_${deliveryId}`,
         endpointId: ep.id,
         source: ep.spec.source,
         status,