diff --git a/package.json b/package.json
index dbd89565..d09b135c 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
 		"@sveltejs/kit": "^2.70.2",
 		"@sveltejs/vite-plugin-svelte": "^7.2.0",
 		"@tailwindcss/vite": "^4.3.3",
-		"@tanstack/table-core": "^8.21.3",
+		"@tanstack/svelte-table": "^9.0.0",
 		"@types/node": "^26.1.2",
 		"@types/semver": "^7.8.0",
 		"@types/w3c-web-serial": "^1.0.8",
diff --git a/packages/svelte-core b/packages/svelte-core
index f2581fb6..5b2a9643 160000
--- a/packages/svelte-core
+++ b/packages/svelte-core
@@ -1 +1 @@
-Subproject commit f2581fb6d79a81a46a7de20ffb8c3d22f3d00221
+Subproject commit 5b2a964327d17a2fae20523d61d792772e1eaa19
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c35ca8fa..500314a7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -99,9 +99,9 @@ importers:
       '@tailwindcss/vite':
         specifier: ^4.3.3
         version: 4.3.3(vite@8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0))
-      '@tanstack/table-core':
-        specifier: ^8.21.3
-        version: 8.21.3
+      '@tanstack/svelte-table':
+        specifier: ^9.0.0
+        version: 9.0.0(svelte@5.56.8(@typescript-eslint/types@8.66.0))
       '@types/node':
         specifier: ^26.1.2
         version: 26.1.2
@@ -1515,9 +1515,23 @@ packages:
     peerDependencies:
       vite: ^5.2.0 || ^6 || ^7 || ^8
 
-  '@tanstack/table-core@8.21.3':
-    resolution: {integrity: sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==}
-    engines: {node: '>=12'}
+  '@tanstack/store@0.11.0':
+    resolution: {integrity: sha512-WlzzCt3xi0G6pCAJu1U+2jiECwabETDpQDi3hfkFZvJii9AuZqEKbOiVarX1/bWhTNjU486yQtJCCasi/0q+Cw==}
+
+  '@tanstack/svelte-store@0.12.0':
+    resolution: {integrity: sha512-XhXlU3jIO/WxikfeVczRdsAvRWzsLBh8Ic6sC7nzfzvMbPut7ZSdCbE7/usfm0bMjVGMmZmyzZy2xRu73QYWAA==}
+    peerDependencies:
+      svelte: ^5.0.0
+
+  '@tanstack/svelte-table@9.0.0':
+    resolution: {integrity: sha512-hQBEup5JppVhYJZ1436b43MC7L2oL5wuSa/Yy5e1NS82WosLqHG7Bq/qhyk1sxw4BQHxTF0/9RzAIKRyBE0w9g==}
+    engines: {node: '>=20'}
+    peerDependencies:
+      svelte: ^5.0.0
+
+  '@tanstack/table-core@9.0.0':
+    resolution: {integrity: sha512-IyKCc4D7d/+I9euQntlVDQ7lnilmFRKpIROBeI5/866adFy+65xWvCFPz76NZ5j2lXe/RFDvFVV7bfETmwHEMA==}
+    engines: {node: '>=20'}
 
   '@types/chai@5.2.3':
     resolution: {integrity: sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==}
@@ -4721,7 +4735,22 @@ snapshots:
       tailwindcss: 4.3.3
       vite: 8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)
 
-  '@tanstack/table-core@8.21.3': {}
+  '@tanstack/store@0.11.0': {}
+
+  '@tanstack/svelte-store@0.12.0(svelte@5.56.8(@typescript-eslint/types@8.66.0))':
+    dependencies:
+      '@tanstack/store': 0.11.0
+      svelte: 5.56.8(@typescript-eslint/types@8.66.0)
+
+  '@tanstack/svelte-table@9.0.0(svelte@5.56.8(@typescript-eslint/types@8.66.0))':
+    dependencies:
+      '@tanstack/svelte-store': 0.12.0(svelte@5.56.8(@typescript-eslint/types@8.66.0))
+      '@tanstack/table-core': 9.0.0
+      svelte: 5.56.8(@typescript-eslint/types@8.66.0)
+
+  '@tanstack/table-core@9.0.0':
+    dependencies:
+      '@tanstack/store': 0.11.0
 
   '@types/chai@5.2.3':
     dependencies:
diff --git a/src/lib/components/Table/ColumnUtils.ts b/src/lib/components/Table/ColumnUtils.ts
index 65f22dbc..b8bd0f1c 100644
--- a/src/lib/components/Table/ColumnUtils.ts
+++ b/src/lib/components/Table/ColumnUtils.ts
@@ -1,56 +1,32 @@
 import { getReadableUserAgentName } from '$lib/utils';
-import { renderComponent } from '@openshock/svelte-core/components/ui/data-table/index.js';
+import { durationBetween, formatDuration } from '@openshock/svelte-core/utils/index.js';
 import {
-  durationBetween,
-  formatDuration,
-  formatDurationSeconds,
-  formatElapsed,
-} from '@openshock/svelte-core/utils/index.js';
-import {
-  sortingFns,
-  type BuiltInSortingFn,
+  renderComponent,
+  sortFn_alphanumeric,
   type ColumnDef,
+  type ExtractSortFnKeys,
   type Row,
-  type SortingFn,
-  type SortingFnOption,
+  type RowData,
+  type SortFnOption,
   type StringOrTemplateHeader,
-} from '@tanstack/table-core';
+  type TableFeatures,
+} from '@tanstack/svelte-table';
 import type { SemVer } from 'semver';
 import type { Component, ComponentProps } from 'svelte';
 import CellContent from './CellContent.svelte';
 import DataTableSortButton from './SortButton.svelte';
+import type { SortableTableFeatures } from './types';
 
 type CellContentProps = ComponentProps<typeof CellContent>;
 
-function CreateSortHeader<TData>(name: string): StringOrTemplateHeader<TData, unknown> {
-  return ({ column }) =>
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- generic Svelte components can't be parameterized in .ts files
-    renderComponent(DataTableSortButton as Component<any>, {
-      name,
-      column,
-    });
-}
-
-export function CreateColumnDef<TData extends object, TKey extends Extract<keyof TData, string>>(
-  accessorKey: TKey,
-  headerName: string,
-  renderer: (content: TData[TKey]) => CellContentProps
-): ColumnDef<TData> {
-  return {
-    accessorKey,
-    header: headerName,
-    cell: ({ row }) => renderComponent(CellContent, renderer(row.original[accessorKey])),
-  };
-}
-
 // TanStack's 'auto' sorting can't compare Temporal.Instant values (they aren't
 // primitives — basic comparison invokes Temporal's valueOf, which throws), so it
 // breaks sorting on every date/time column. This default adds Temporal.Instant
 // support while otherwise mirroring how 'auto' resolves: numbers compare
 // numerically (basic), everything else uses the alphanumeric/natural comparator.
-function temporalAwareSortingFn<TData>(
-  rowA: Row<TData>,
-  rowB: Row<TData>,
+function temporalAwareSortFn<TFeatures extends TableFeatures, TData extends RowData>(
+  rowA: Row<TFeatures, TData>,
+  rowB: Row<TFeatures, TData>,
   columnId: string
 ): number {
   const a: unknown = rowA.getValue(columnId);
@@ -71,47 +47,92 @@ function temporalAwareSortingFn<TData>(
     return a === b ? 0 : a > b ? 1 : -1;
   }
 
-  return sortingFns.alphanumeric(rowA, rowB, columnId);
+  return sortFn_alphanumeric(rowA, rowB, columnId);
 }
 
-export function CreateSortableColumnDef<
-  TData extends object,
-  TKey extends Extract<keyof TData, string>,
->(
-  accessorKey: TKey,
-  headerName: string,
-  renderer: (content: TData[TKey]) => CellContentProps,
-  sortFunct?: 'auto' | ((a: TData[TKey], b: TData[TKey]) => number) | BuiltInSortingFn
-): ColumnDef<TData> {
-  let sortingFn: SortingFnOption<TData>;
-  if (sortFunct) {
-    if (typeof sortFunct === 'string') {
-      sortingFn = sortFunct;
+/**
+ * Binds the column-def builders to one table's feature set and row type.
+ *
+ * v9 threads `TFeatures` through every column type, and TypeScript can't infer
+ * it from these builders' arguments (it only appears in their return types), so
+ * it's pinned once per table here. The individual builders still infer their
+ * accessor key and actions-component types per call, so call sites are
+ * unchanged from v8:
+ *
+ * ```ts
+ * const { CreateSortableColumnDef, CreateActionsColumnDef } =
+ *   CreateColumnDefs<typeof features, WebhookDto>();
+ * ```
+ */
+export function CreateColumnDefs<TFeatures extends SortableTableFeatures, TData extends RowData>() {
+  // v9 derives the feature-dependent half of `ColumnDef` through a mapped type
+  // keyed on `keyof TFeatures`, which TypeScript can't reduce while `TFeatures`
+  // is still a type parameter. Authoring each literal against the fully
+  // populated `TableFeatures` shape keeps it properly checked, and the widening
+  // to the caller's feature set happens once, here.
+  const asColumnDef = (def: ColumnDef<TableFeatures, TData>) =>
+    def as unknown as ColumnDef<TFeatures, TData>;
+
+  function CreateSortHeader(name: string): StringOrTemplateHeader<TableFeatures, TData> {
+    return ({ column }) =>
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any -- generic Svelte components can't be parameterized in .ts files
+      renderComponent(DataTableSortButton as Component<any>, {
+        name,
+        column,
+      });
+  }
+
+  function CreateColumnDef<TKey extends Extract<keyof TData, string>>(
+    accessorKey: TKey,
+    headerName: string,
+    renderer: (content: TData[TKey]) => CellContentProps
+  ): ColumnDef<TFeatures, TData> {
+    return asColumnDef({
+      accessorKey,
+      header: headerName,
+      cell: ({ row }) => renderComponent(CellContent, renderer(row.original[accessorKey])),
+    });
+  }
+
+  function CreateSortableColumnDef<TKey extends Extract<keyof TData, string>>(
+    accessorKey: TKey,
+    headerName: string,
+    renderer: (content: TData[TKey]) => CellContentProps,
+    sortFunct?: 'auto' | ((a: TData[TKey], b: TData[TKey]) => number) | ExtractSortFnKeys<TFeatures>
+  ): ColumnDef<TFeatures, TData> {
+    let sortFn: SortFnOption<TFeatures, TData>;
+    if (sortFunct) {
+      if (typeof sortFunct === 'string') {
+        sortFn = sortFunct;
+      } else {
+        sortFn = (row_a, row_b) =>
+          sortFunct(row_a.getValue(accessorKey), row_b.getValue(accessorKey));
+      }
     } else {
-      sortingFn = (row_a, row_b) =>
-        sortFunct(row_a.getValue(accessorKey), row_b.getValue(accessorKey));
+      sortFn = (rowA, rowB, columnId) => temporalAwareSortFn(rowA, rowB, columnId);
     }
-  } else {
-    sortingFn = temporalAwareSortingFn as SortingFn<TData>;
+
+    return asColumnDef({
+      accessorKey,
+      header: CreateSortHeader(headerName),
+      cell: ({ row }) => renderComponent(CellContent, renderer(row.original[accessorKey])),
+      // Registered sort-fn names come from the caller's `sortFns`, which the
+      // generic `TableFeatures` shape used for checking doesn't know about.
+      sortFn: sortFn as SortFnOption<TableFeatures, TData>,
+    });
   }
 
-  return {
-    accessorKey,
-    header: CreateSortHeader(headerName),
-    cell: ({ row }) => renderComponent(CellContent, renderer(row.original[accessorKey])),
-    sortingFn,
-  };
-}
+  function CreateActionsColumnDef<
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- matches renderComponent's own constraint
+    T extends Component<any>,
+  >(component: T, getProps: (row: TData) => ComponentProps<T>): ColumnDef<TFeatures, TData> {
+    return asColumnDef({
+      id: 'actions',
+      cell: ({ row }) => renderComponent(component, getProps(row.original)),
+    });
+  }
 
-export function CreateActionsColumnDef<
-  TData,
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- matches renderComponent's own constraint
-  T extends Component<any>,
->(component: T, getProps: (row: TData) => ComponentProps<T>): ColumnDef<TData> {
-  return {
-    id: 'actions',
-    cell: ({ row }) => renderComponent(component, getProps(row.original)),
-  };
+  return { CreateColumnDef, CreateSortableColumnDef, CreateActionsColumnDef };
 }
 
 // Pre-defined cell values
@@ -120,7 +141,6 @@ export const CellNotApplicable: CellContentProps = {
   bold: true,
   title: 'Not applicable',
 };
-export const CellOrangeNever: CellContentProps = { text: 'Never', bold: true, color: 'orange' };
 export const CellRedUnknown: CellContentProps = { text: 'Unknown', bold: true, color: 'red' };
 export const CellRedInvalid: CellContentProps = { text: 'Invalid', bold: true, color: 'red' };
 export const CellRedUnavailable: CellContentProps = {
@@ -172,13 +192,6 @@ export const RenderCellWithTooltip = (content: string, tooltip: string): CellCon
   title: tooltip,
 });
 
-export function LocaleDateRenderer(instant: Temporal.Instant): CellContentProps {
-  return RenderCellWithTooltip(
-    instant.toLocaleString(undefined, { dateStyle: 'short' }),
-    instant.toString()
-  );
-}
-
 export function LocaleDateTimeRenderer(instant: Temporal.Instant | null): CellContentProps {
   if (!instant) return RenderCell('Never');
   return RenderCellWithTooltip(instant.toLocaleString(), instant.toString());
@@ -191,26 +204,9 @@ export function TimeSinceDurationRenderer(instant: Temporal.Instant): CellConten
   );
 }
 
-export function TimeSinceRelativeRenderer(instant: Temporal.Instant): CellContentProps {
-  if (instant.epochMilliseconds <= 0) return CellOrangeNever;
-  return RenderCellWithTooltip(
-    formatElapsed(durationBetween(Temporal.Now.instant(), instant)),
-    instant.toString()
-  );
-}
-
-export const TimeSinceRelativeOrNeverRenderer = (
-  instant: Temporal.Instant | null | undefined
-): CellContentProps =>
-  instant instanceof Temporal.Instant ? TimeSinceRelativeRenderer(instant) : CellOrangeNever;
-
 export const NumberRenderer = (number: number | null): CellContentProps =>
   number ? RenderBoldCell(number.toString()) : CellNotApplicable;
 
-// Durations are stored/transmitted in milliseconds; display them in seconds with a unit.
-export const DurationRenderer = (durationMs: number | null): CellContentProps =>
-  durationMs ? RenderBoldCell(formatDurationSeconds(durationMs / 1000)) : CellNotApplicable;
-
 export const UserAgentRenderer = (userAgent: string | null): CellContentProps => {
   if (!userAgent) return CellRedUnknown;
 
diff --git a/src/lib/components/Table/DataTableTemplate.svelte b/src/lib/components/Table/DataTableTemplate.svelte
index d7988112..11ad11eb 100644
--- a/src/lib/components/Table/DataTableTemplate.svelte
+++ b/src/lib/components/Table/DataTableTemplate.svelte
@@ -1,24 +1,31 @@
-<script lang="ts" generics="TData, TValue">
+<script lang="ts" generics="TFeatures extends SortableTableFeatures, TData extends RowData">
   import {
+    FlexRender,
+    createTable,
     type ColumnDef,
-    type ColumnFiltersState,
-    type PaginationState,
+    type RowData,
     type SortingState,
-    getCoreRowModel,
-    getFilteredRowModel,
-    getPaginationRowModel,
-    getSortedRowModel,
-  } from '@tanstack/table-core';
-  import { FlexRender, createSvelteTable } from '@openshock/svelte-core/components/ui/data-table';
+    type TableFeatures,
+    type TableOptions,
+    type Updater,
+  } from '@tanstack/svelte-table';
   import * as Table from '@openshock/svelte-core/components/ui/table';
   import { cn } from '@openshock/svelte-core/utils/shadcn.js';
+  import type { SortableTableFeatures } from './types';
 
   interface Props {
     data: TData[];
-    columns: ColumnDef<TData, TValue>[];
+    columns: ColumnDef<TFeatures, TData>[];
+    /** The table's feature set, from its colocated `data-table-features.ts`. */
+    features: TFeatures;
+    /**
+     * Bind this only when the page needs to read the sort back — e.g. to build
+     * a server-side `$orderby`. Left unbound, the table owns its own sorting
+     * state, which is what v9 prefers.
+     */
     sorting?: SortingState;
-    filters?: ColumnFiltersState;
-    pagination?: PaginationState;
+    /** Set when the rows arrive already sorted (server-side ordering). */
+    manualSorting?: boolean;
     onRowClick?: (row: TData) => void;
     class?: string;
   }
@@ -26,59 +33,47 @@
   let {
     data,
     columns,
+    features,
     sorting = $bindable(),
-    filters = $bindable(),
-    pagination = $bindable(),
+    manualSorting = false,
     onRowClick,
     class: className,
   }: Props = $props();
 
-  const table = createSvelteTable({
+  // A `state` entry that resolves to undefined makes v9 fall back to
+  // `initialState` rather than to the table's own atom, so the sorting slice is
+  // only handed over when the parent actually owns it — an unbound `sorting`
+  // leaves the table managing its own.
+  const isControlled = sorting !== undefined;
+
+  // Checked against the fully-populated feature shape and widened once, for the
+  // same reason as `ColumnUtils`: `TableOptions` is feature-mapped, so it can't
+  // be satisfied structurally while `TFeatures` is still a type parameter.
+  // Only `data` needs a reactive getter — the feature set, columns and sorting
+  // mode are fixed for the lifetime of a given table.
+  /* svelte-ignore state_referenced_locally */
+  const options: TableOptions<TableFeatures, TData> = {
+    features,
     get data() {
       return data;
     },
-    /* svelte-ignore state_referenced_locally */
-    columns,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: sorting ? getSortedRowModel() : undefined,
-    getFilteredRowModel: filters ? getFilteredRowModel() : undefined,
-    getPaginationRowModel: pagination ? getPaginationRowModel() : undefined,
-    onSortingChange: (updater) => {
-      if (!sorting) return;
-      if (typeof updater === 'function') {
-        sorting = updater(sorting);
-      } else {
-        sorting = updater;
-      }
-    },
-    onColumnFiltersChange: (updater) => {
-      if (!filters) return;
-      if (typeof updater === 'function') {
-        filters = updater(filters);
-      } else {
-        filters = updater;
-      }
-    },
-    onPaginationChange: (updater) => {
-      if (!pagination) return;
-      if (typeof updater === 'function') {
-        pagination = updater(pagination);
-      } else {
-        pagination = updater;
-      }
-    },
-    state: {
-      get pagination() {
-        return pagination;
-      },
-      get sorting() {
-        return sorting;
-      },
-      get columnFilters() {
-        return filters;
-      },
-    },
-  });
+    columns: columns as unknown as ColumnDef<TableFeatures, TData>[],
+    manualSorting,
+    state: isControlled
+      ? {
+          get sorting() {
+            return sorting;
+          },
+        }
+      : undefined,
+    onSortingChange: isControlled
+      ? (updater: Updater<SortingState>) => {
+          sorting = typeof updater === 'function' ? updater(sorting ?? []) : updater;
+        }
+      : undefined,
+  };
+
+  const table = createTable(options as unknown as TableOptions<TFeatures, TData>);
 </script>
 
 <div class={cn('overflow-y-auto rounded-md border', className)}>
@@ -87,12 +82,9 @@
       {#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
         <Table.Row>
           {#each headerGroup.headers as header (header.id)}
-            <Table.Head>
+            <Table.Head colspan={header.colSpan}>
               {#if !header.isPlaceholder}
-                <FlexRender
-                  content={header.column.columnDef.header}
-                  context={header.getContext()}
-                />
+                <FlexRender {header} />
               {/if}
             </Table.Head>
           {/each}
@@ -101,13 +93,10 @@
     </Table.Header>
     <Table.Body>
       {#each table.getRowModel().rows as row (row.id)}
-        <Table.Row
-          data-state={row.getIsSelected() && 'selected'}
-          onclick={() => onRowClick?.(row.original)}
-        >
-          {#each row.getVisibleCells() as cell (cell.id)}
+        <Table.Row onclick={() => onRowClick?.(row.original)}>
+          {#each row.getAllCells() as cell (cell.id)}
             <Table.Cell>
-              <FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
+              <FlexRender {cell} />
             </Table.Cell>
           {/each}
         </Table.Row>
diff --git a/src/lib/components/Table/SortButton.svelte b/src/lib/components/Table/SortButton.svelte
index 37d2d0a9..f31cd75c 100644
--- a/src/lib/components/Table/SortButton.svelte
+++ b/src/lib/components/Table/SortButton.svelte
@@ -1,10 +1,13 @@
-<script lang="ts" generics="TData">
+<script lang="ts" generics="TFeatures extends SortableTableFeatures, TData extends RowData">
   import { ArrowDown, ArrowUp, ArrowUpDown } from '@lucide/svelte';
-  import type { Column } from '@tanstack/table-core';
+  import type { Column, Column_RowSorting, RowData } from '@tanstack/svelte-table';
+  import type { SortableTableFeatures } from './types';
 
   interface Props {
     name: string;
-    column: Column<TData, unknown>;
+    // The sorting half is spelled out because v9 only folds it into `Column`
+    // once `TFeatures` is a concrete feature set, which it isn't here.
+    column: Column<TFeatures, TData> & Column_RowSorting<TFeatures, TData>;
   }
 
   let { name, column }: Props = $props();
diff --git a/src/lib/components/Table/types.ts b/src/lib/components/Table/types.ts
new file mode 100644
index 00000000..3d96d791
--- /dev/null
+++ b/src/lib/components/Table/types.ts
@@ -0,0 +1,15 @@
+import type { TableFeatures, rowSortingFeature } from '@tanstack/svelte-table';
+
+/**
+ * A feature set that is guaranteed to have row sorting registered.
+ *
+ * Every table in the app has sortable headers, and `SortButton` /
+ * `DataTableTemplate` reach for sorting APIs (`column.toggleSorting`,
+ * `onSortingChange`) that v9 only adds to the column and options types when
+ * `rowSortingFeature` is present. Constraining on this instead of the bare
+ * `TableFeatures` states that requirement up front, so a table declared without
+ * sorting fails at its `<DataTable>` call site rather than at runtime.
+ */
+export type SortableTableFeatures = TableFeatures & {
+  rowSortingFeature: typeof rowSortingFeature;
+};
diff --git a/src/lib/utils/datetime.ts b/src/lib/utils/datetime.ts
new file mode 100644
index 00000000..31ac3a44
--- /dev/null
+++ b/src/lib/utils/datetime.ts
@@ -0,0 +1,18 @@
+import { durationBetween, formatElapsed } from '@openshock/svelte-core/utils/index.js';
+
+/**
+ * Relative label for an instant — "in 3 days", "2 hours ago".
+ *
+ * Returns `null` when the value is absent or is the epoch sentinel the API uses
+ * for "this has never happened", so callers can pick their own wording.
+ *
+ * Pass `now` from reactive state to keep the label ticking; the default reads
+ * the clock once and so is only correct at call time.
+ */
+export function formatRelativeInstant(
+  instant: Temporal.Instant | null | undefined,
+  now: Temporal.Instant = Temporal.Now.instant()
+): string | null {
+  if (!(instant instanceof Temporal.Instant) || instant.epochMilliseconds <= 0) return null;
+  return formatElapsed(durationBetween(now, instant));
+}
diff --git a/src/routes/(app)/admin/config/+page.svelte b/src/routes/(app)/admin/config/+page.svelte
index 0b923ff2..bee0f536 100644
--- a/src/routes/(app)/admin/config/+page.svelte
+++ b/src/routes/(app)/admin/config/+page.svelte
@@ -1,12 +1,9 @@
 <script lang="ts">
-  import type { SortingState } from '@tanstack/table-core';
-  import type { ColumnDef } from '@tanstack/table-core';
   import { adminConfigurationList } from '$lib/api';
   import type { ConfigurationItemDto } from '$lib/api';
   import { Container } from '@openshock/svelte-core/components';
   import {
-    CreateActionsColumnDef,
-    CreateSortableColumnDef,
+    CreateColumnDefs,
     LocaleDateTimeRenderer,
     RenderCell,
   } from '$lib/components/Table/ColumnUtils';
@@ -18,10 +15,16 @@
   import { onMount } from 'svelte';
   import DataTableActions from './data-table-actions.svelte';
   import WebhookAddDialog from './dialog-item-add.svelte';
+  import { features, type Features } from './data-table-features';
 
   registerBreadcrumbs(() => [{ label: 'Config' }]);
 
-  const columns: ColumnDef<ConfigurationItemDto>[] = [
+  const { CreateSortableColumnDef, CreateActionsColumnDef } = CreateColumnDefs<
+    Features,
+    ConfigurationItemDto
+  >();
+
+  const columns = [
     CreateSortableColumnDef('name', 'Name', RenderCell),
     CreateSortableColumnDef('description', 'Description', RenderCell),
     CreateSortableColumnDef('type', 'Type', RenderCell),
@@ -32,7 +35,6 @@
   ];
 
   let data = $state<ConfigurationItemDto[]>([]);
-  let sorting = $state<SortingState>([]);
 
   let addDialogOpen = $state<boolean>(false);
 
@@ -57,6 +59,6 @@
     </CardTitle>
   </CardHeader>
   <div class="grid w-full gap-6 p-6">
-    <DataTable {data} {columns} {sorting} />
+    <DataTable {data} {columns} {features} />
   </div>
 </Container>
diff --git a/src/routes/(app)/admin/config/data-table-features.ts b/src/routes/(app)/admin/config/data-table-features.ts
new file mode 100644
index 00000000..02024286
--- /dev/null
+++ b/src/routes/(app)/admin/config/data-table-features.ts
@@ -0,0 +1,16 @@
+import {
+  createSortedRowModel,
+  rowSortingFeature,
+  sortFns,
+  tableFeatures,
+} from '@tanstack/svelte-table';
+
+// The config list arrives in a single unpaged response, so sorting is done
+// client-side over the whole set.
+export const features = tableFeatures({
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  sortFns,
+});
+
+export type Features = typeof features;
diff --git a/src/routes/(app)/admin/mail/+page.svelte b/src/routes/(app)/admin/mail/+page.svelte
index b6072fc9..f7b3c4f2 100644
--- a/src/routes/(app)/admin/mail/+page.svelte
+++ b/src/routes/(app)/admin/mail/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts" module>
-  import type { ColumnDef } from '@tanstack/table-core';
   import {
     EmailStatus,
     type EmailOutboxMessageDto,
@@ -7,8 +6,7 @@
   } from '$lib/api';
   import {
     CellRedNone,
-    CreateActionsColumnDef,
-    CreateSortableColumnDef,
+    CreateColumnDefs,
     LocaleDateTimeRenderer,
     RenderBlueCell,
     RenderBoldCell,
@@ -20,6 +18,7 @@
   } from '$lib/components/Table/ColumnUtils';
   import DataTableActions from './data-table-actions.svelte';
   import { odataAnd, odataContains, odataEq } from '$lib/utils/odata';
+  import type { Features } from './data-table-features';
 
   function StatusRenderer(status: EmailStatusType) {
     switch (status) {
@@ -44,7 +43,7 @@
 </script>
 
 <script lang="ts">
-  import type { SortingState } from '@tanstack/table-core';
+  import type { SortingState } from '@tanstack/svelte-table';
   import {
     adminGetEmailOutbox,
     adminGetEmailOutboxStats,
@@ -62,10 +61,16 @@
   import { registerBreadcrumbs } from '$lib/state/breadcrumbs-state.svelte';
   import { useDebounce } from '@openshock/svelte-core/utils/debounce.js';
   import SendTestDialog from './dialog-send-test.svelte';
+  import { features } from './data-table-features';
 
   registerBreadcrumbs(() => [{ label: 'Mail' }]);
 
-  const columns: ColumnDef<EmailOutboxMessageDto>[] = [
+  const { CreateSortableColumnDef, CreateActionsColumnDef } = CreateColumnDefs<
+    Features,
+    EmailOutboxMessageDto
+  >();
+
+  const columns = [
     CreateSortableColumnDef('type', 'Type', RenderCell),
     CreateSortableColumnDef('recipient', 'Recipient', RenderCell),
     CreateSortableColumnDef('status', 'Status', StatusRenderer),
@@ -215,12 +220,7 @@
       {/each}
     </div>
 
-    <DataTable
-      {data}
-      {columns}
-      bind:sorting
-      pagination={{ pageIndex: page - 1, pageSize: perPage }}
-    />
+    <DataTable {data} {columns} {features} bind:sorting manualSorting />
     <PaginationFooter
       count={total}
       {perPage}
diff --git a/src/routes/(app)/admin/mail/data-table-features.ts b/src/routes/(app)/admin/mail/data-table-features.ts
new file mode 100644
index 00000000..f3df84ea
--- /dev/null
+++ b/src/routes/(app)/admin/mail/data-table-features.ts
@@ -0,0 +1,13 @@
+import { rowSortingFeature, sortFns, tableFeatures } from '@tanstack/svelte-table';
+
+// The outbox is paged and ordered by the API ($offset/$limit/$orderby), so this
+// table registers the sorting feature for its clickable headers but no
+// sortedRowModel: the current page renders in the order the server returned it.
+// The page pairs this with `manualSorting` and binds `sorting` to build
+// $orderby.
+export const features = tableFeatures({
+  rowSortingFeature,
+  sortFns,
+});
+
+export type Features = typeof features;
diff --git a/src/routes/(app)/admin/online-hubs/+page.svelte b/src/routes/(app)/admin/online-hubs/+page.svelte
index ac77cb3c..7732437b 100644
--- a/src/routes/(app)/admin/online-hubs/+page.svelte
+++ b/src/routes/(app)/admin/online-hubs/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
   import RotateCcw from '@lucide/svelte/icons/rotate-ccw';
-  import type { ColumnFiltersState, SortingState } from '@tanstack/table-core';
   import { adminGetOnlineDevices } from '$lib/api';
   import { Container } from '@openshock/svelte-core/components';
   import DataTable from '$lib/components/Table/DataTableTemplate.svelte';
@@ -11,12 +10,11 @@
   import { onMount } from 'svelte';
   import { registerBreadcrumbs } from '$lib/state/breadcrumbs-state.svelte';
   import { type OnlineHub, columns } from './columns';
+  import { features } from './data-table-features';
 
   registerBreadcrumbs(() => [{ label: 'Online Hubs' }]);
 
   let data = $state<OnlineHub[]>([]);
-  let sorting = $state<SortingState>([]);
-  let filters = $state<ColumnFiltersState>([]);
 
   function fetchOnlineHubs() {
     adminGetOnlineDevices()
@@ -41,6 +39,6 @@
     </Card.Title>
   </Card.Header>
   <Card.Content>
-    <DataTable {data} {columns} {sorting} {filters} />
+    <DataTable {data} {columns} {features} />
   </Card.Content>
 </Container>
diff --git a/src/routes/(app)/admin/online-hubs/columns.ts b/src/routes/(app)/admin/online-hubs/columns.ts
index 2c3ad0d9..4691d569 100644
--- a/src/routes/(app)/admin/online-hubs/columns.ts
+++ b/src/routes/(app)/admin/online-hubs/columns.ts
@@ -1,8 +1,6 @@
 import type { AdminOnlineDeviceResponse } from '$lib/api';
 import {
-  CreateActionsColumnDef,
-  CreateColumnDef,
-  CreateSortableColumnDef,
+  CreateColumnDefs,
   FirmwareVersionRenderer,
   NumberRenderer,
   RenderCell,
@@ -10,15 +8,20 @@ import {
   TimeSinceDurationRenderer,
   UserAgentRenderer,
 } from '$lib/components/Table/ColumnUtils';
-import type { ColumnDef } from '@tanstack/table-core';
 import { SemVer } from 'semver';
 import DataTableActions from './data-table-actions.svelte';
+import type { Features } from './data-table-features';
 
 export type OnlineHub = Omit<AdminOnlineDeviceResponse, 'firmwareVersion'> & {
   firmwareVersion: SemVer;
 };
 
-export const columns: ColumnDef<OnlineHub>[] = [
+const { CreateColumnDef, CreateSortableColumnDef, CreateActionsColumnDef } = CreateColumnDefs<
+  Features,
+  OnlineHub
+>();
+
+export const columns = [
   CreateSortableColumnDef('name', 'Name', RenderCell),
   CreateSortableColumnDef(
     'owner',
diff --git a/src/routes/(app)/admin/online-hubs/data-table-features.ts b/src/routes/(app)/admin/online-hubs/data-table-features.ts
new file mode 100644
index 00000000..0009411c
--- /dev/null
+++ b/src/routes/(app)/admin/online-hubs/data-table-features.ts
@@ -0,0 +1,16 @@
+import {
+  createSortedRowModel,
+  rowSortingFeature,
+  sortFns,
+  tableFeatures,
+} from '@tanstack/svelte-table';
+
+// Every online hub is returned in one response, so sorting is done client-side
+// over the whole set.
+export const features = tableFeatures({
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  sortFns,
+});
+
+export type Features = typeof features;
diff --git a/src/routes/(app)/admin/users/+page.svelte b/src/routes/(app)/admin/users/+page.svelte
index a112a63d..df50ef51 100644
--- a/src/routes/(app)/admin/users/+page.svelte
+++ b/src/routes/(app)/admin/users/+page.svelte
@@ -1,10 +1,8 @@
 <script lang="ts" module>
-  import type { ColumnDef } from '@tanstack/table-core';
   import { PasswordHashingAlgorithm, RoleType, adminGetUsers } from '$lib/api';
   import type { AdminUsersView, AdminUsersViewPaginated } from '$lib/api';
   import {
-    CreateActionsColumnDef,
-    CreateSortableColumnDef,
+    CreateColumnDefs,
     LocaleDateTimeRenderer,
     RenderBlueCell,
     RenderBoldCell,
@@ -14,6 +12,7 @@
   } from '$lib/components/Table/ColumnUtils';
   import DataTableActions from './data-table-actions.svelte';
   import { odataAnd, odataSearch } from '$lib/utils/odata';
+  import type { Features } from './data-table-features';
 
   const PasswordHashTypeRenderer = (passwordHashType: PasswordHashingAlgorithm) => {
     if (passwordHashType !== PasswordHashingAlgorithm.BCrypt)
@@ -26,7 +25,12 @@
     return isPrivileged ? RenderBlueCell(roles.toString()) : RenderBoldCell(roles.toString());
   };
 
-  const dataColumns: ColumnDef<AdminUsersView>[] = [
+  const { CreateSortableColumnDef, CreateActionsColumnDef } = CreateColumnDefs<
+    Features,
+    AdminUsersView
+  >();
+
+  const dataColumns = [
     CreateSortableColumnDef('name', 'Name', RenderCell),
     CreateSortableColumnDef('email', 'Email', RenderCell),
     CreateSortableColumnDef('passwordHashType', 'Password hash type', PasswordHashTypeRenderer),
@@ -41,7 +45,7 @@
 </script>
 
 <script lang="ts">
-  import type { SortingState } from '@tanstack/table-core';
+  import type { SortingState } from '@tanstack/svelte-table';
   import { Container } from '@openshock/svelte-core/components';
   import DataTable from '$lib/components/Table/DataTableTemplate.svelte';
   import PaginationFooter from '$lib/components/Table/PaginationFooter.svelte';
@@ -50,6 +54,7 @@
   import { handleApiError } from '$lib/errorhandling/apiErrorHandling';
   import { registerBreadcrumbs } from '$lib/state/breadcrumbs-state.svelte';
   import { useDebounce } from '@openshock/svelte-core/utils/debounce.js';
+  import { features } from './data-table-features';
 
   registerBreadcrumbs(() => [{ label: 'Users' }]);
 
@@ -58,7 +63,7 @@
   // Bumped to force a re-fetch after a mutation (e.g. user deletion).
   let refreshNonce = $state(0);
 
-  const columns: ColumnDef<AdminUsersView>[] = [
+  const columns = [
     ...dataColumns,
     CreateActionsColumnDef(DataTableActions, (user) => ({
       user,
@@ -132,12 +137,7 @@
     </CardTitle>
   </CardHeader>
   <div class="grid w-full gap-6 p-6">
-    <DataTable
-      {data}
-      {columns}
-      bind:sorting
-      pagination={{ pageIndex: page - 1, pageSize: perPage }}
-    />
+    <DataTable {data} {columns} {features} bind:sorting manualSorting />
     <PaginationFooter
       count={total}
       {perPage}
diff --git a/src/routes/(app)/admin/users/data-table-features.ts b/src/routes/(app)/admin/users/data-table-features.ts
new file mode 100644
index 00000000..d297e5fa
--- /dev/null
+++ b/src/routes/(app)/admin/users/data-table-features.ts
@@ -0,0 +1,13 @@
+import { rowSortingFeature, sortFns, tableFeatures } from '@tanstack/svelte-table';
+
+// Users are paged and ordered by the API ($offset/$limit/$orderby), so this
+// table registers the sorting feature for its clickable headers but no
+// sortedRowModel: the current page renders in the order the server returned it.
+// The page pairs this with `manualSorting` and binds `sorting` to build
+// $orderby.
+export const features = tableFeatures({
+  rowSortingFeature,
+  sortFns,
+});
+
+export type Features = typeof features;
diff --git a/src/routes/(app)/admin/webhooks/+page.svelte b/src/routes/(app)/admin/webhooks/+page.svelte
index b7f95d6a..897cd510 100644
--- a/src/routes/(app)/admin/webhooks/+page.svelte
+++ b/src/routes/(app)/admin/webhooks/+page.svelte
@@ -1,14 +1,11 @@
 <script lang="ts">
   import { RotateCcw } from '@lucide/svelte';
-  import type { SortingState } from '@tanstack/table-core';
-  import type { ColumnDef } from '@tanstack/table-core';
   import { adminListWebhooks } from '$lib/api';
   import type { WebhookDto } from '$lib/api';
   import { Container } from '@openshock/svelte-core/components';
   import { Spinner } from '@openshock/svelte-core/components/ui/spinner';
   import {
-    CreateActionsColumnDef,
-    CreateSortableColumnDef,
+    CreateColumnDefs,
     LocaleDateTimeRenderer,
     RenderCell,
   } from '$lib/components/Table/ColumnUtils';
@@ -19,10 +16,16 @@
   import DataTableActions from './data-table-actions.svelte';
   import { registerBreadcrumbs } from '$lib/state/breadcrumbs-state.svelte';
   import WebhookAddDialog from './dialog-webhook-add.svelte';
+  import { features, type Features } from './data-table-features';
 
   registerBreadcrumbs(() => [{ label: 'Webhooks' }]);
 
-  const columns: ColumnDef<WebhookDto>[] = [
+  const { CreateSortableColumnDef, CreateActionsColumnDef } = CreateColumnDefs<
+    Features,
+    WebhookDto
+  >();
+
+  const columns = [
     CreateSortableColumnDef('name', 'Name', RenderCell),
     CreateSortableColumnDef('url', 'Url', RenderCell),
     CreateSortableColumnDef('createdAt', 'Created at', LocaleDateTimeRenderer),
@@ -30,7 +33,6 @@
   ];
 
   let data = $derived(await adminListWebhooks());
-  let sorting = $state<SortingState>([]);
 
   let addDialogOpen = $state<boolean>(false);
 
@@ -58,7 +60,7 @@
   </CardHeader>
   <div class="grid w-full gap-6 p-6">
     <svelte:boundary onerror={(error: unknown) => handleApiError(error)}>
-      <DataTable {data} {columns} {sorting} />
+      <DataTable {data} {columns} {features} />
 
       {#snippet pending()}
         <div class="flex h-64 w-full items-center justify-center">
diff --git a/src/routes/(app)/admin/webhooks/data-table-features.ts b/src/routes/(app)/admin/webhooks/data-table-features.ts
new file mode 100644
index 00000000..9dd28649
--- /dev/null
+++ b/src/routes/(app)/admin/webhooks/data-table-features.ts
@@ -0,0 +1,16 @@
+import {
+  createSortedRowModel,
+  rowSortingFeature,
+  sortFns,
+  tableFeatures,
+} from '@tanstack/svelte-table';
+
+// The webhook list arrives in a single unpaged response, so sorting is done
+// client-side over the whole set.
+export const features = tableFeatures({
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  sortFns,
+});
+
+export type Features = typeof features;
diff --git a/src/routes/(app)/settings/api-tokens/+page.svelte b/src/routes/(app)/settings/api-tokens/+page.svelte
index 8f1a7b72..80f86124 100644
--- a/src/routes/(app)/settings/api-tokens/+page.svelte
+++ b/src/routes/(app)/settings/api-tokens/+page.svelte
@@ -2,27 +2,20 @@
   import { tokensListTokensV2 } from '$lib/api';
   import type { TokenResponseV2 } from '$lib/api';
   import { resolve } from '$app/paths';
+  import KeyRound from '@lucide/svelte/icons/key-round';
   import Plus from '@lucide/svelte/icons/plus';
   import RotateCcw from '@lucide/svelte/icons/rotate-ccw';
-  import type { SortingState } from '@tanstack/table-core';
-  import type { ColumnDef } from '@tanstack/table-core';
-  import { Container } from '@openshock/svelte-core/components';
+  import { Container, EmptyState } from '@openshock/svelte-core/components';
+  import { Badge } from '@openshock/svelte-core/components/ui/badge';
   import { Spinner } from '@openshock/svelte-core/components/ui/spinner';
-  import {
-    CreateActionsColumnDef,
-    CreateColumnDef,
-    CreateSortableColumnDef,
-    LocaleDateRenderer,
-    RenderCell,
-    TimeSinceRelativeOrNeverRenderer,
-  } from '$lib/components/Table/ColumnUtils';
-  import DataTable from '$lib/components/Table/DataTableTemplate.svelte';
   import { Button } from '@openshock/svelte-core/components/ui/button';
   import * as Card from '@openshock/svelte-core/components/ui/card';
   import { handleApiError } from '$lib/errorhandling/apiErrorHandling';
+  import { onMount } from 'svelte';
   import { toast } from 'svelte-sonner';
-  import DataTableActions from './data-table-actions.svelte';
+  import TokenActions from './token-actions.svelte';
   import { registerBreadcrumbs } from '$lib/state/breadcrumbs-state.svelte';
+  import { formatRelativeInstant } from '$lib/utils/datetime';
 
   registerBreadcrumbs(() => [
     { label: 'Settings', href: '/settings/account' },
@@ -30,7 +23,10 @@
   ]);
 
   let tokens = $derived(await tokensListTokensV2());
-  let sorting = $state<SortingState>([]);
+
+  // Re-read on a timer so the relative labels below stay current without
+  // refetching. Every label derives from this, so ticking it re-renders them.
+  let now = $state(Temporal.Now.instant());
 
   function onEdit(id: string, updater: (token: TokenResponseV2) => TokenResponseV2) {
     tokens = tokens.map((t) => (t.id === id ? updater(t) : t));
@@ -40,19 +36,6 @@
     tokens = tokens.filter((t) => t.id !== id);
   }
 
-  const columns: ColumnDef<TokenResponseV2>[] = [
-    CreateSortableColumnDef('name', 'Name', RenderCell),
-    CreateColumnDef('shockerControl', 'Status', (sc) =>
-      sc.paused
-        ? { text: 'Paused', bold: true, color: 'orange' }
-        : { text: 'Active', bold: true, color: 'green' }
-    ),
-    CreateSortableColumnDef('createdOn', 'Created at', LocaleDateRenderer),
-    CreateSortableColumnDef('validUntil', 'Expires at', TimeSinceRelativeOrNeverRenderer),
-    CreateSortableColumnDef('lastUsed', 'Last used', TimeSinceRelativeOrNeverRenderer),
-    CreateActionsColumnDef(DataTableActions, (token) => ({ token, onEdit, onDeleted })),
-  ];
-
   async function refresh() {
     try {
       tokens = await tokensListTokensV2();
@@ -61,6 +44,11 @@
       await handleApiError(error);
     }
   }
+
+  onMount(() => {
+    const interval = setInterval(() => (now = Temporal.Now.instant()), 5000);
+    return () => clearInterval(interval);
+  });
 </script>
 
 <Container>
@@ -82,7 +70,38 @@
   </Card.Header>
   <Card.Content class="flex w-full flex-col space-y-4">
     <svelte:boundary onerror={(error: unknown) => handleApiError(error)}>
-      <DataTable data={tokens} {columns} {sorting} />
+      {#if tokens.length === 0}
+        <EmptyState
+          icon={KeyRound}
+          title="No API tokens"
+          description="Generate a token to authenticate with the OpenShock API."
+        />
+      {:else}
+        <div class="divide-y rounded-md border">
+          {#each tokens as token (token.id)}
+            {@const lastUsed = formatRelativeInstant(token.lastUsed, now)}
+            {@const expires = formatRelativeInstant(token.validUntil, now)}
+            <div class="flex flex-wrap items-center gap-x-4 gap-y-1 px-4 py-3">
+              <div class="flex min-w-0 flex-1 items-center gap-2">
+                <span class="truncate font-medium">{token.name}</span>
+                <Badge variant={token.shockerControl.paused ? 'outline' : 'default'}>
+                  {token.shockerControl.paused ? 'Paused' : 'Active'}
+                </Badge>
+              </div>
+              <div
+                class="text-muted-foreground flex shrink-0 flex-wrap items-center gap-x-4 text-sm"
+              >
+                <span>
+                  Created {token.createdOn.toLocaleString(undefined, { dateStyle: 'short' })}
+                </span>
+                <span>{lastUsed ? `Last used ${lastUsed}` : 'Never used'}</span>
+                <span>{expires ? `Expires ${expires}` : 'Never expires'}</span>
+              </div>
+              <TokenActions {token} {onEdit} {onDeleted} />
+            </div>
+          {/each}
+        </div>
+      {/if}
 
       {#snippet pending()}
         <div class="flex h-64 w-full items-center justify-center">
diff --git a/src/routes/(app)/settings/api-tokens/data-table-actions.svelte b/src/routes/(app)/settings/api-tokens/token-actions.svelte
similarity index 100%
rename from src/routes/(app)/settings/api-tokens/data-table-actions.svelte
rename to src/routes/(app)/settings/api-tokens/token-actions.svelte
diff --git a/src/routes/(app)/settings/sessions/+page.svelte b/src/routes/(app)/settings/sessions/+page.svelte
index 11dbee8f..b76a2e5b 100644
--- a/src/routes/(app)/settings/sessions/+page.svelte
+++ b/src/routes/(app)/settings/sessions/+page.svelte
@@ -1,26 +1,18 @@
 <script lang="ts">
   import { sessionsListSessions } from '$lib/api';
   import type { LoginSessionResponse } from '$lib/api';
+  import MonitorSmartphone from '@lucide/svelte/icons/monitor-smartphone';
   import RotateCcw from '@lucide/svelte/icons/rotate-ccw';
-  import type { ColumnDef, SortingState } from '@tanstack/table-core';
-  import { Container } from '@openshock/svelte-core/components';
-  import {
-    CreateActionsColumnDef,
-    CreateColumnDef,
-    CreateSortableColumnDef,
-    RenderCell,
-    TimeSinceRelativeOrNeverRenderer,
-    TimeSinceRelativeRenderer,
-    UserAgentRenderer,
-  } from '$lib/components/Table/ColumnUtils';
-  import DataTable from '$lib/components/Table/DataTableTemplate.svelte';
+  import { Container, EmptyState } from '@openshock/svelte-core/components';
   import { Button } from '@openshock/svelte-core/components/ui/button';
   import * as Card from '@openshock/svelte-core/components/ui/card';
   import { handleApiError } from '$lib/errorhandling/apiErrorHandling';
   import { onMount } from 'svelte';
   import { toast } from 'svelte-sonner';
   import { registerBreadcrumbs } from '$lib/state/breadcrumbs-state.svelte';
-  import DataTableActions from './data-table-actions.svelte';
+  import { getReadableUserAgentName } from '$lib/utils';
+  import { formatRelativeInstant } from '$lib/utils/datetime';
+  import SessionActions from './session-actions.svelte';
 
   registerBreadcrumbs(() => [
     { label: 'Settings', href: '/settings/account' },
@@ -28,7 +20,10 @@
   ]);
 
   let data = $state<LoginSessionResponse[]>([]);
-  let sorting = $state<SortingState>([]);
+
+  // Re-read on a timer so the relative labels below stay current without
+  // refetching. Every label derives from this, so ticking it re-renders them.
+  let now = $state(Temporal.Now.instant());
 
   function onRevoked(sessionId: string) {
     const idx = data.findIndex((session) => session.id === sessionId);
@@ -37,14 +32,10 @@
     data.splice(idx, 1);
   }
 
-  const columns: ColumnDef<LoginSessionResponse>[] = [
-    CreateColumnDef('ip', 'Ip', RenderCell),
-    CreateSortableColumnDef('userAgent', 'User Agent', UserAgentRenderer),
-    CreateSortableColumnDef('created', 'Created', TimeSinceRelativeRenderer),
-    CreateSortableColumnDef('expires', 'Expires', TimeSinceRelativeRenderer),
-    CreateSortableColumnDef('lastUsed', 'Last seen', TimeSinceRelativeOrNeverRenderer),
-    CreateActionsColumnDef(DataTableActions, (session) => ({ session, onRevoked })),
-  ];
+  function deviceName(userAgent: string | null): string {
+    if (!userAgent) return 'Unknown device';
+    return getReadableUserAgentName(userAgent) ?? userAgent;
+  }
 
   async function fetchSessions() {
     try {
@@ -62,13 +53,7 @@
   onMount(() => {
     fetchSessions();
 
-    // Update timestamps every 5 seconds
-    const interval = setInterval(() => {
-      if (data) {
-        data = Object.assign([], data);
-      }
-    }, 5000);
-
+    const interval = setInterval(() => (now = Temporal.Now.instant()), 5000);
     return () => clearInterval(interval);
   });
 </script>
@@ -88,6 +73,34 @@
     </Card.Description>
   </Card.Header>
   <Card.Content class="w-full">
-    <DataTable {data} {columns} {sorting} />
+    {#if data.length === 0}
+      <EmptyState
+        icon={MonitorSmartphone}
+        title="No active sessions"
+        description="Sessions appear here once you sign in from a browser or app."
+      />
+    {:else}
+      <div class="divide-y rounded-md border">
+        {#each data as session (session.id)}
+          {@const lastSeen = formatRelativeInstant(session.lastUsed, now)}
+          {@const started = formatRelativeInstant(session.created, now)}
+          {@const expires = formatRelativeInstant(session.expires, now)}
+          <div class="flex flex-wrap items-center gap-x-4 gap-y-1 px-4 py-3">
+            <div class="flex min-w-0 flex-1 items-center gap-2">
+              <span class="truncate font-medium" title={session.userAgent ?? undefined}>
+                {deviceName(session.userAgent)}
+              </span>
+              <span class="text-muted-foreground shrink-0 text-sm">{session.ip}</span>
+            </div>
+            <div class="text-muted-foreground flex shrink-0 flex-wrap items-center gap-x-4 text-sm">
+              <span>{lastSeen ? `Last seen ${lastSeen}` : 'Never used'}</span>
+              <span>{started ? `Signed in ${started}` : 'Sign-in time unknown'}</span>
+              <span>{expires ? `Expires ${expires}` : 'Never expires'}</span>
+            </div>
+            <SessionActions {session} {onRevoked} />
+          </div>
+        {/each}
+      </div>
+    {/if}
   </Card.Content>
 </Container>
diff --git a/src/routes/(app)/settings/sessions/data-table-actions.svelte b/src/routes/(app)/settings/sessions/session-actions.svelte
similarity index 100%
rename from src/routes/(app)/settings/sessions/data-table-actions.svelte
rename to src/routes/(app)/settings/sessions/session-actions.svelte
diff --git a/src/routes/(app)/shockers/logs/+page.svelte b/src/routes/(app)/shockers/logs/+page.svelte
index 4c8de6d9..ca6473f2 100644
--- a/src/routes/(app)/shockers/logs/+page.svelte
+++ b/src/routes/(app)/shockers/logs/+page.svelte
@@ -1,23 +1,19 @@
 <script lang="ts">
   import { shockerGetAllShockerLogs } from '$lib/api';
-  import type { ColumnDef, SortingState } from '@tanstack/table-core';
   import type { LogEntryWithHub } from '$lib/api';
-  import { Container } from '@openshock/svelte-core/components';
+  import { Container, EmptyState } from '@openshock/svelte-core/components';
   import { handleApiError } from '$lib/errorhandling/apiErrorHandling';
   import { onMount } from 'svelte';
-  import {
-    CreateSortableColumnDef,
-    DurationRenderer,
-    LocaleDateTimeRenderer,
-    NumberRenderer,
-    RenderCell,
-  } from '$lib/components/Table/ColumnUtils';
-  import DataTable from '$lib/components/Table/DataTableTemplate.svelte';
   import PaginationFooter from '$lib/components/Table/PaginationFooter.svelte';
   import { Badge } from '@openshock/svelte-core/components/ui/badge';
   import { Button } from '@openshock/svelte-core/components/ui/button';
+  import * as Select from '@openshock/svelte-core/components/ui/select';
   import { PageHeader } from '@openshock/svelte-core/components';
+  import { formatDurationSeconds } from '@openshock/svelte-core/utils/index.js';
   import MultiSelectCombobox from '@openshock/svelte-core/components/multi-select-combobox/multi-select-combobox.svelte';
+  import ArrowDown from '@lucide/svelte/icons/arrow-down';
+  import ArrowUp from '@lucide/svelte/icons/arrow-up';
+  import ScrollText from '@lucide/svelte/icons/scroll-text';
   import { registerBreadcrumbs } from '$lib/state/breadcrumbs-state.svelte';
   import { addShockEventListener, removeShockEventListener } from '$lib/signalr/handlers/Log';
   import { ControlType } from '$lib/signalr/models/ControlType';
@@ -29,10 +25,25 @@
     { label: 'Shocker Logs' },
   ]);
 
-  const DEFAULT_SORT_ID = 'createdOn';
+  const SORT_FIELDS = [
+    { value: 'createdOn', label: 'Time' },
+    { value: 'hubName', label: 'Hub' },
+    { value: 'shockerName', label: 'Shocker' },
+    { value: 'type', label: 'Type' },
+    { value: 'controlledBy', label: 'By' },
+    { value: 'intensity', label: 'Intensity' },
+    { value: 'duration', label: 'Duration' },
+  ] as const;
+
+  type SortField = (typeof SORT_FIELDS)[number]['value'];
+
+  const DEFAULT_SORT_FIELD: SortField = 'createdOn';
 
   let logs = $state<LogEntryWithHub[]>([]);
-  let sorting = $state<SortingState>([{ id: DEFAULT_SORT_ID, desc: true }]);
+  let sortField = $state<SortField>(DEFAULT_SORT_FIELD);
+  let sortDesc = $state(true);
+
+  const sortLabel = $derived(SORT_FIELDS.find((f) => f.value === sortField)?.label ?? 'Time');
 
   let isFetching = $state(false);
   let requestedPage = $state(1);
@@ -43,25 +54,24 @@
   // recently issued request is allowed to apply its result.
   let fetchToken = 0;
 
-  // Row metrics — rows are single-line (whitespace-nowrap), so heights are
-  // stable and we can size pages off them without measuring each row.
-  const HEADER_HEIGHT = 40; // Table.Head (h-10)
-  const ROW_HEIGHT = 37; // td p-2 (16) + text-sm line (20) + border-b (1)
+  // Row metrics — entries are fixed-height (two truncated lines), so we can
+  // size pages off them without measuring each row.
+  const ROW_HEIGHT = 53; // py-2 (16) + text-sm line (20) + text-xs line (16) + divider (1)
   // The pagination footer and the gap above it share the measured area with the
-  // table, so subtract them when working out how many rows actually fit.
+  // list, so subtract them when working out how many rows actually fit.
   const FOOTER_ALLOWANCE = 64; // pagination footer (~40) + gap-6 (24)
   const MIN_PAGE_SIZE = 10;
   const DEFAULT_PAGE_SIZE = 25; // used before the viewport has been measured
 
-  // Height available to the table, measured from the DOM (see markup binding).
+  // Height available to the list, measured from the DOM (see markup binding).
   // The raw value updates continuously while resizing; we debounce it into
   // `settledViewportHeight` so pageSize (and the fetch it drives) only reacts
   // once the resize settles, instead of firing a request per pixel.
-  let tableViewportHeight = $state(0);
+  let listViewportHeight = $state(0);
   let settledViewportHeight = $state(0);
 
   $effect(() => {
-    const height = tableViewportHeight;
+    const height = listViewportHeight;
     if (settledViewportHeight === 0) {
       // Apply the first real measurement immediately so we don't sit on the
       // default page size for a debounce interval on initial load.
@@ -73,10 +83,10 @@
   });
 
   // Fit as many rows as the viewport allows (clamped to a sane minimum) so the
-  // table fills the screen and we request exactly the page size we can show.
+  // list fills the screen and we request exactly the page size we can show.
   const pageSize = $derived.by(() => {
     if (settledViewportHeight <= 0) return DEFAULT_PAGE_SIZE;
-    const usable = settledViewportHeight - HEADER_HEIGHT - FOOTER_ALLOWANCE;
+    const usable = settledViewportHeight - FOOTER_ALLOWANCE;
     const rows = Math.floor(usable / ROW_HEIGHT);
     return Math.max(MIN_PAGE_SIZE, rows);
   });
@@ -113,16 +123,18 @@
     }
   });
 
-  const sortQuery = $derived(sorting.length > 0 ? sorting[0] : undefined);
   // Live updates only make sense on page 1 with the default newest-first sort,
   // otherwise prepending breaks the user's chosen ordering / page slice.
-  const liveUpdatesActive = $derived(
-    page === 1 && (!sortQuery || (sortQuery.id === DEFAULT_SORT_ID && sortQuery.desc))
-  );
+  const liveUpdatesActive = $derived(page === 1 && sortField === DEFAULT_SORT_FIELD && sortDesc);
+
+  function controlledByName(entry: LogEntryWithHub): string {
+    return entry.controlledBy.customName ?? entry.controlledBy.name;
+  }
 
   $effect(() => {
     const requested = requestedPage;
-    const sort = sortQuery;
+    const field = sortField;
+    const desc = sortDesc;
     const size = pageSize;
     const shockerIds = selectedShockerIds;
 
@@ -132,8 +144,8 @@
       query: {
         page: requested,
         pageSize: size,
-        sort: sort?.id,
-        sortDir: sort ? (sort.desc ? 'Desc' : 'Asc') : undefined,
+        sort: field,
+        sortDir: desc ? 'Desc' : 'Asc',
         shockerIds: shockerIds.length > 0 ? shockerIds : undefined,
       },
     })
@@ -198,18 +210,6 @@
       removeShockEventListener(listenerId);
     };
   });
-
-  const columns: ColumnDef<LogEntryWithHub>[] = [
-    CreateSortableColumnDef('hubName', 'Hub', (h) => RenderCell(h)),
-    CreateSortableColumnDef('shockerName', 'Shocker', (s) => RenderCell(s)),
-    CreateSortableColumnDef('createdOn', 'Time', LocaleDateTimeRenderer, (a, b) =>
-      Temporal.Instant.compare(a, b)
-    ),
-    CreateSortableColumnDef('type', 'Type', (t) => RenderCell(String(t))),
-    CreateSortableColumnDef('controlledBy', 'By', (c) => RenderCell(c.customName ?? c.name)),
-    CreateSortableColumnDef('intensity', 'Intensity', NumberRenderer),
-    CreateSortableColumnDef('duration', 'Duration', DurationRenderer),
-  ];
 </script>
 
 <Container>
@@ -237,7 +237,7 @@
     </Badge>
   </PageHeader>
   <div class="flex min-h-0 w-full flex-1 flex-col gap-6">
-    <div class="flex items-end gap-2">
+    <div class="flex flex-wrap items-end gap-2">
       <div class="w-64">
         <MultiSelectCombobox
           bind:selected={selectedShockerIds}
@@ -251,9 +251,71 @@
       {#if selectedShockerIds.length > 0}
         <Button variant="ghost" size="sm" onclick={() => (selectedShockerIds = [])}>Clear</Button>
       {/if}
+      <div class="ml-auto flex items-end gap-2">
+        <Select.Root
+          type="single"
+          value={sortField}
+          onValueChange={(value) => (sortField = value as SortField)}
+        >
+          <Select.Trigger class="w-[150px]">Sort: {sortLabel}</Select.Trigger>
+          <Select.Content>
+            <Select.Group>
+              <Select.Label>Sort by</Select.Label>
+              {#each SORT_FIELDS as field (field.value)}
+                <Select.Item value={field.value} label={field.label}>{field.label}</Select.Item>
+              {/each}
+            </Select.Group>
+          </Select.Content>
+        </Select.Root>
+        <Button
+          variant="outline"
+          size="icon"
+          onclick={() => (sortDesc = !sortDesc)}
+          title="Sort {sortDesc ? 'descending' : 'ascending'}"
+        >
+          <span class="sr-only">Toggle sort direction</span>
+          {#if sortDesc}
+            <ArrowDown />
+          {:else}
+            <ArrowUp />
+          {/if}
+        </Button>
+      </div>
     </div>
-    <div class="flex min-h-0 flex-1 flex-col gap-6" bind:clientHeight={tableViewportHeight}>
-      <DataTable data={logs} {columns} bind:sorting class="min-h-0 flex-1" />
+    <div class="flex min-h-0 flex-1 flex-col gap-6" bind:clientHeight={listViewportHeight}>
+      {#if logs.length === 0}
+        <EmptyState
+          icon={ScrollText}
+          title="No shocker logs"
+          description={selectedShockerIds.length > 0
+            ? 'No entries for the selected shockers yet.'
+            : 'Control activity will show up here once a shocker is used.'}
+        />
+      {:else}
+        <div class="min-h-0 flex-1 divide-y overflow-y-auto rounded-md border">
+          {#each logs as entry (entry.id)}
+            <div class="flex items-center gap-3 px-3 py-2">
+              <Badge variant="secondary" class="shrink-0">{entry.type}</Badge>
+              <div class="min-w-0 flex-1">
+                <div class="truncate text-sm font-medium">{entry.shockerName}</div>
+                <div class="text-muted-foreground truncate text-xs">
+                  {entry.hubName} · by {controlledByName(entry)}
+                </div>
+              </div>
+              <div class="shrink-0 text-right">
+                <div class="text-sm">
+                  {entry.intensity ? entry.intensity : 'N/A'} · {entry.duration
+                    ? formatDurationSeconds(entry.duration / 1000)
+                    : 'N/A'}
+                </div>
+                <div class="text-muted-foreground text-xs" title={entry.createdOn.toString()}>
+                  {entry.createdOn.toLocaleString()}
+                </div>
+              </div>
+            </div>
+          {/each}
+        </div>
+      {/if}
       <PaginationFooter
         count={total}
         perPage={pageSize}