diff --git a/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooks.mock.ts b/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooks.mock.ts
index 1a10d55d27..55902f396a 100644
--- a/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooks.mock.ts
+++ b/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooks.mock.ts
@@ -1,4 +1,152 @@
-import type { PlatformWebhooksMockSeed, WebhookScope } from './PlatformWebhooks.types'
+import type {
+  PlatformWebhooksMockSeed,
+  WebhookDelivery,
+  WebhookScope,
+} from './PlatformWebhooks.types'
+
+const createDeliveries = (
+  endpointId: string,
+  prefix: string,
+  deliveries: Array<Pick<WebhookDelivery, 'eventType' | 'status' | 'responseCode' | 'attemptAt'>>
+): WebhookDelivery[] =>
+  deliveries.map((delivery, index) => ({
+    id: `${prefix}-${index + 1}`,
+    endpointId,
+    ...delivery,
+  }))
+
+const organizationPrimaryDeliveries = createDeliveries('org-endpoint-1', 'org-delivery', [
+  {
+    eventType: 'project.created',
+    status: 'success',
+    responseCode: 200,
+    attemptAt: '2026-02-27T08:04:00.000Z',
+  },
+  {
+    eventType: 'project.updated',
+    status: 'failure',
+    responseCode: 500,
+    attemptAt: '2026-02-27T07:56:00.000Z',
+  },
+  {
+    eventType: 'project.deleted',
+    status: 'pending',
+    attemptAt: '2026-02-27T07:45:00.000Z',
+  },
+  {
+    eventType: 'organization.member_invited',
+    status: 'success',
+    responseCode: 202,
+    attemptAt: '2026-02-27T07:37:00.000Z',
+  },
+  {
+    eventType: 'project.resumed',
+    status: 'success',
+    responseCode: 204,
+    attemptAt: '2026-02-27T07:18:00.000Z',
+  },
+  {
+    eventType: 'organization.member_removed',
+    status: 'failure',
+    responseCode: 400,
+    attemptAt: '2026-02-27T06:59:00.000Z',
+  },
+  {
+    eventType: 'organization.updated',
+    status: 'skipped',
+    attemptAt: '2026-02-27T06:40:00.000Z',
+  },
+  {
+    eventType: 'project.paused',
+    status: 'success',
+    responseCode: 200,
+    attemptAt: '2026-02-27T06:21:00.000Z',
+  },
+  {
+    eventType: 'project.created',
+    status: 'failure',
+    responseCode: 503,
+    attemptAt: '2026-02-27T06:03:00.000Z',
+  },
+  {
+    eventType: 'project.updated',
+    status: 'success',
+    responseCode: 200,
+    attemptAt: '2026-02-27T05:44:00.000Z',
+  },
+  {
+    eventType: 'project.deleted',
+    status: 'skipped',
+    attemptAt: '2026-02-27T05:25:00.000Z',
+  },
+  {
+    eventType: 'organization.member_invited',
+    status: 'success',
+    responseCode: 201,
+    attemptAt: '2026-02-27T05:07:00.000Z',
+  },
+])
+
+const organizationSecondaryDeliveries = createDeliveries(
+  'org-endpoint-2',
+  'org-secondary-delivery',
+  [
+    {
+      eventType: 'organization.updated',
+      status: 'skipped',
+      attemptAt: '2026-02-26T14:12:00.000Z',
+    },
+  ]
+)
+
+const projectDeliveries = createDeliveries('project-endpoint-1', 'project-delivery', [
+  {
+    eventType: 'project.updated',
+    status: 'success',
+    responseCode: 200,
+    attemptAt: '2026-02-27T09:01:00.000Z',
+  },
+  {
+    eventType: 'project.resource_exhausted',
+    status: 'failure',
+    responseCode: 429,
+    attemptAt: '2026-02-27T08:47:00.000Z',
+  },
+  {
+    eventType: 'project.paused',
+    status: 'success',
+    responseCode: 202,
+    attemptAt: '2026-02-26T21:10:00.000Z',
+  },
+  {
+    eventType: 'project.branch_created',
+    status: 'success',
+    responseCode: 200,
+    attemptAt: '2026-02-26T19:45:00.000Z',
+  },
+  {
+    eventType: 'project.resumed',
+    status: 'pending',
+    attemptAt: '2026-02-26T18:30:00.000Z',
+  },
+  {
+    eventType: 'project.branch_deleted',
+    status: 'success',
+    responseCode: 204,
+    attemptAt: '2026-02-26T17:04:00.000Z',
+  },
+  {
+    eventType: 'project.updated',
+    status: 'failure',
+    responseCode: 500,
+    attemptAt: '2026-02-26T15:59:00.000Z',
+  },
+  {
+    eventType: 'project.resource_exhausted',
+    status: 'skipped',
+    attemptAt: '2026-02-26T14:12:00.000Z',
+  },
+])
 
 export const PLATFORM_WEBHOOKS_MOCK_DATA: Record<WebhookScope, PlatformWebhooksMockSeed> = {
   organization: {
@@ -39,38 +187,7 @@ export const PLATFORM_WEBHOOKS_MOCK_DATA: Record<WebhookScope, PlatformWebhooksM
         createdAt: '2026-02-12T10:14:00.000Z',
       },
     ],
-    deliveries: [
-      {
-        id: 'org-delivery-1',
-        endpointId: 'org-endpoint-1',
-        eventType: 'project.created',
-        status: 'success',
-        responseCode: 200,
-        attemptAt: '2026-02-27T08:04:00.000Z',
-      },
-      {
-        id: 'org-delivery-2',
-        endpointId: 'org-endpoint-1',
-        eventType: 'project.updated',
-        status: 'failure',
-        responseCode: 500,
-        attemptAt: '2026-02-27T07:56:00.000Z',
-      },
-      {
-        id: 'org-delivery-3',
-        endpointId: 'org-endpoint-1',
-        eventType: 'project.deleted',
-        status: 'pending',
-        attemptAt: '2026-02-27T07:45:00.000Z',
-      },
-      {
-        id: 'org-delivery-4',
-        endpointId: 'org-endpoint-2',
-        eventType: 'organization.updated',
-        status: 'skipped',
-        attemptAt: '2026-02-26T14:12:00.000Z',
-      },
-    ],
+    deliveries: [...organizationPrimaryDeliveries, ...organizationSecondaryDeliveries],
   },
   project: {
     eventTypes: [
@@ -94,31 +211,6 @@ export const PLATFORM_WEBHOOKS_MOCK_DATA: Record<WebhookScope, PlatformWebhooksM
         createdAt: '2026-02-18T11:23:00.000Z',
       },
     ],
-    deliveries: [
-      {
-        id: 'project-delivery-1',
-        endpointId: 'project-endpoint-1',
-        eventType: 'project.updated',
-        status: 'success',
-        responseCode: 200,
-        attemptAt: '2026-02-27T09:01:00.000Z',
-      },
-      {
-        id: 'project-delivery-2',
-        endpointId: 'project-endpoint-1',
-        eventType: 'project.resource_exhausted',
-        status: 'failure',
-        responseCode: 429,
-        attemptAt: '2026-02-27T08:47:00.000Z',
-      },
-      {
-        id: 'project-delivery-3',
-        endpointId: 'project-endpoint-1',
-        eventType: 'project.paused',
-        status: 'success',
-        responseCode: 202,
-        attemptAt: '2026-02-26T21:10:00.000Z',
-      },
-    ],
+    deliveries: projectDeliveries,
   },
 }
diff --git a/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointDetails.test.tsx b/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointDetails.test.tsx
new file mode 100644
index 0000000000..0a3cd2818e
--- /dev/null
+++ b/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointDetails.test.tsx
@@ -0,0 +1,101 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import type { ComponentProps } from 'react'
+import { describe, expect, it, vi } from 'vitest'
+
+import { PLATFORM_WEBHOOKS_MOCK_DATA } from './PlatformWebhooks.mock'
+import { PlatformWebhooksEndpointDetails } from './PlatformWebhooksEndpointDetails'
+
+vi.mock('components/ui/DataTable/DataTableColumn/DataTableColumnStatusCode', () => ({
+  DataTableColumnStatusCode: ({ value }: { value: number }) => <span>{value}</span>,
+}))
+
+vi.mock('ui-patterns', async () => {
+  const actual = await vi.importActual<typeof import('ui-patterns')>('ui-patterns')
+
+  return {
+    ...actual,
+    TimestampInfo: ({ utcTimestamp, className }: { utcTimestamp: string; className?: string }) => (
+      <span className={className}>{utcTimestamp}</span>
+    ),
+  }
+})
+
+describe('PlatformWebhooksEndpointDetails', () => {
+  const selectedEndpoint = PLATFORM_WEBHOOKS_MOCK_DATA.organization.endpoints[0]
+  const allDeliveries = PLATFORM_WEBHOOKS_MOCK_DATA.organization.deliveries.filter(
+    (delivery) => delivery.endpointId === selectedEndpoint.id
+  )
+
+  const renderComponent = (
+    props?: Partial<ComponentProps<typeof PlatformWebhooksEndpointDetails>>
+  ) =>
+    render(
+      <PlatformWebhooksEndpointDetails
+        deliverySearch=""
+        filteredDeliveries={allDeliveries}
+        selectedEndpoint={selectedEndpoint}
+        onDeliverySearchChange={vi.fn()}
+        onOpenDelivery={vi.fn()}
+        {...props}
+      />
+    )
+
+  it('renders paginated deliveries with previous and next controls', async () => {
+    const user = userEvent.setup()
+
+    renderComponent()
+
+    expect(screen.getByText('Showing 1 to 5 of 12 deliveries')).toBeInTheDocument()
+    expect(screen.queryByText('organization.member_removed')).not.toBeInTheDocument()
+
+    await user.click(screen.getByLabelText('Next page'))
+
+    expect(screen.getByText('Showing 6 to 10 of 12 deliveries')).toBeInTheDocument()
+    expect(screen.getByText('organization.member_removed')).toBeInTheDocument()
+
+    await user.click(screen.getByLabelText('Previous page'))
+
+    expect(screen.getByText('Showing 1 to 5 of 12 deliveries')).toBeInTheDocument()
+    expect(screen.queryByText('organization.member_removed')).not.toBeInTheDocument()
+  })
+
+  it('sorts deliveries by event type from the header', async () => {
+    const user = userEvent.setup()
+
+    renderComponent()
+
+    await user.click(screen.getByRole('button', { name: 'Event type' }))
+
+    expect(screen.getAllByRole('row')[1]).toHaveTextContent('organization.member_invited')
+
+    await user.click(screen.getByRole('button', { name: 'Event type' }))
+
+    expect(screen.getAllByRole('row')[1]).toHaveTextContent('project.updated')
+  })
+
+  it('resets to the first page when the delivery search changes', async () => {
+    const user = userEvent.setup()
+    const projectDeliveries = allDeliveries.filter((delivery) =>
+      delivery.eventType.includes('project')
+    )
+    const { rerender } = renderComponent()
+
+    await user.click(screen.getByLabelText('Next page'))
+    expect(screen.getByText('Showing 6 to 10 of 12 deliveries')).toBeInTheDocument()
+
+    rerender(
+      <PlatformWebhooksEndpointDetails
+        deliverySearch="project"
+        filteredDeliveries={projectDeliveries}
+        selectedEndpoint={selectedEndpoint}
+        onDeliverySearchChange={vi.fn()}
+        onOpenDelivery={vi.fn()}
+      />
+    )
+
+    await waitFor(() => {
+      expect(screen.getByText('Showing 1 to 5 of 8 deliveries')).toBeInTheDocument()
+    })
+  })
+})
diff --git a/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointDetails.tsx b/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointDetails.tsx
index 6d84c04bce..902be3dd68 100644
--- a/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointDetails.tsx
+++ b/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointDetails.tsx
@@ -1,11 +1,25 @@
-import { Search } from 'lucide-react'
+import {
+  flexRender,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  type ColumnDef,
+  type PaginationState,
+  type SortingState,
+  useReactTable,
+} from '@tanstack/react-table'
+import { ChevronLeft, ChevronRight, Search } from 'lucide-react'
+import { useEffect, useState, type ReactNode } from 'react'
 
 import { getStatusLevel } from 'components/interfaces/UnifiedLogs/UnifiedLogs.utils'
+import { DataTableColumnHeader } from 'components/ui/DataTable/DataTableColumn/DataTableColumnHeader'
 import { DataTableColumnStatusCode } from 'components/ui/DataTable/DataTableColumn/DataTableColumnStatusCode'
 import {
   Badge,
+  Button,
   Card,
   CardContent,
+  CardFooter,
   Table,
   TableBody,
   TableCell,
@@ -20,7 +34,7 @@ import { statusBadgeVariant } from './PlatformWebhooksView.utils'
 
 interface DetailItemProps {
   label: string
-  children: React.ReactNode
+  children: ReactNode
   ddClassName?: string
 }
 
@@ -39,6 +53,47 @@ interface PlatformWebhooksEndpointDetailsProps {
   onOpenDelivery: (deliveryId: string) => void
 }
 
+const DELIVERIES_PAGE_SIZE = 5
+
+const DELIVERY_COLUMNS: ColumnDef<WebhookDelivery>[] = [
+  {
+    accessorKey: 'status',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Status" />,
+    cell: ({ row }) => (
+      <Badge variant={statusBadgeVariant[row.original.status]}>{row.original.status}</Badge>
+    ),
+  },
+  {
+    accessorKey: 'eventType',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Event type" />,
+    cell: ({ row }) => <code className="text-code-inline">{row.original.eventType}</code>,
+  },
+  {
+    accessorKey: 'responseCode',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Response" />,
+    sortingFn: (rowA, rowB, columnId) => {
+      const responseA = rowA.getValue<number | undefined>(columnId) ?? -1
+      const responseB = rowB.getValue<number | undefined>(columnId) ?? -1
+      return responseA - responseB
+    },
+    cell: ({ row }) =>
+      row.original.responseCode ? (
+        <DataTableColumnStatusCode
+          value={row.original.responseCode}
+          level={getStatusLevel(row.original.responseCode)}
+          className="text-xs"
+        />
+      ) : (
+        <span className="text-xs text-foreground-muted">–</span>
+      ),
+  },
+  {
+    accessorKey: 'attemptAt',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Attempted" />,
+    cell: ({ row }) => <TimestampInfo className="text-sm" utcTimestamp={row.original.attemptAt} />,
+  },
+]
+
 export const PlatformWebhooksEndpointDetails = ({
   deliverySearch,
   filteredDeliveries,
@@ -47,6 +102,36 @@ export const PlatformWebhooksEndpointDetails = ({
   onOpenDelivery,
 }: PlatformWebhooksEndpointDetailsProps) => {
   const hasCustomHeaders = selectedEndpoint.customHeaders.length > 0
+  const [sorting, setSorting] = useState<SortingState>([{ id: 'attemptAt', desc: true }])
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: DELIVERIES_PAGE_SIZE,
+  })
+
+  const table = useReactTable({
+    data: filteredDeliveries,
+    columns: DELIVERY_COLUMNS,
+    state: { pagination, sorting },
+    getRowId: (row) => row.id,
+    onPaginationChange: setPagination,
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+  })
+
+  const paginatedDeliveries = table.getRowModel().rows
+  const deliveryStartIndex =
+    table.getState().pagination.pageIndex * table.getState().pagination.pageSize
+  const deliveryRangeStart = filteredDeliveries.length === 0 ? 0 : deliveryStartIndex + 1
+  const deliveryRangeEnd = Math.min(
+    deliveryStartIndex + table.getState().pagination.pageSize,
+    filteredDeliveries.length
+  )
+
+  useEffect(() => {
+    setPagination((currentPagination) => ({ ...currentPagination, pageIndex: 0 }))
+  }, [deliverySearch, selectedEndpoint.id])
 
   return (
     <div className="space-y-16">
@@ -117,57 +202,78 @@ export const PlatformWebhooksEndpointDetails = ({
         <Card className="overflow-hidden">
           <Table>
             <TableHeader>
-              <TableRow>
-                <TableHead>Status</TableHead>
-                <TableHead>Event type</TableHead>
-                <TableHead>Response</TableHead>
-                <TableHead>Attempted</TableHead>
-              </TableRow>
+              {table.getHeaderGroups().map((headerGroup) => (
+                <TableRow key={headerGroup.id}>
+                  {headerGroup.headers.map((header) => (
+                    <TableHead key={header.id}>
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(header.column.columnDef.header, header.getContext())}
+                    </TableHead>
+                  ))}
+                </TableRow>
+              ))}
             </TableHeader>
             <TableBody>
-              {filteredDeliveries.length > 0 ? (
-                filteredDeliveries.map((delivery) => (
+              {paginatedDeliveries.length > 0 ? (
+                paginatedDeliveries.map((row) => (
                   <TableRow
-                    key={delivery.id}
+                    key={row.id}
                     className="cursor-pointer inset-focus"
-                    onClick={() => onOpenDelivery(delivery.id)}
+                    onClick={() => onOpenDelivery(row.original.id)}
                     onKeyDown={(event) => {
                       if (event.key === 'Enter' || event.key === ' ') {
                         event.preventDefault()
-                        onOpenDelivery(delivery.id)
+                        onOpenDelivery(row.original.id)
                       }
                     }}
                     tabIndex={0}
                   >
-                    <TableCell>
-                      <Badge variant={statusBadgeVariant[delivery.status]}>{delivery.status}</Badge>
-                    </TableCell>
-                    <TableCell>
-                      <code className="text-code-inline">{delivery.eventType}</code>
-                    </TableCell>
-                    <TableCell>
-                      {delivery.responseCode ? (
-                        <DataTableColumnStatusCode
-                          value={delivery.responseCode}
-                          level={getStatusLevel(delivery.responseCode)}
-                          className="text-xs"
-                        />
-                      ) : (
-                        <span className="text-xs text-foreground-muted">–</span>
-                      )}
-                    </TableCell>
-                    <TableCell>
-                      <TimestampInfo className="text-sm" utcTimestamp={delivery.attemptAt} />
-                    </TableCell>
+                    {row.getVisibleCells().map((cell) => (
+                      <TableCell key={cell.id}>
+                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                      </TableCell>
+                    ))}
                   </TableRow>
                 ))
               ) : (
-                <TableRow>
-                  <TableCell colSpan={4}>No deliveries found</TableCell>
+                <TableRow className="[&>td]:hover:bg-inherit">
+                  <TableCell colSpan={4}>
+                    <p className="text-sm text-foreground">No deliveries found</p>
+                    <p className="text-sm text-foreground-lighter">
+                      Try adjusting your search to see more webhook attempts.
+                    </p>
+                  </TableCell>
                 </TableRow>
               )}
             </TableBody>
           </Table>
+          {filteredDeliveries.length > 0 && (
+            <CardFooter className="border-t p-4 flex items-center justify-between">
+              <p className="text-foreground-muted text-sm">
+                Showing {deliveryRangeStart} to {deliveryRangeEnd} of {filteredDeliveries.length}{' '}
+                deliveries
+              </p>
+              <div className="flex items-center gap-x-2" aria-label="Pagination">
+                <Button
+                  icon={<ChevronLeft />}
+                  aria-label="Previous page"
+                  type="default"
+                  size="tiny"
+                  disabled={!table.getCanPreviousPage()}
+                  onClick={() => table.previousPage()}
+                />
+                <Button
+                  icon={<ChevronRight />}
+                  aria-label="Next page"
+                  type="default"
+                  size="tiny"
+                  disabled={!table.getCanNextPage()}
+                  onClick={() => table.nextPage()}
+                />
+              </div>
+            </CardFooter>
+          )}
         </Card>
       </div>
     </div>