diff --git a/packages/svelte-core b/packages/svelte-core
index 0057593f..5ce7c254 160000
--- a/packages/svelte-core
+++ b/packages/svelte-core
@@ -1 +1 @@
-Subproject commit 0057593f7cd49edf0583c3e77523cd0f7d9fdeb7
+Subproject commit 5ce7c2548fac7ff99875e62c0aea4a7e414977cc
diff --git a/src/lib/components/ControlModules/PublicShareClassicControlModule.svelte b/src/lib/components/ControlModules/PublicShareClassicControlModule.svelte
index 9fd26a17..75009a9a 100644
--- a/src/lib/components/ControlModules/PublicShareClassicControlModule.svelte
+++ b/src/lib/components/ControlModules/PublicShareClassicControlModule.svelte
@@ -62,7 +62,7 @@
 </script>
 
 <div
-  class="border-surface-400-500-token flex flex-col items-center justify-center gap-2 overflow-hidden rounded-md border p-2"
+  class="flex flex-col items-center justify-center gap-2 overflow-hidden rounded-md border p-2"
   class:opacity-50={isPaused}
 >
   <!-- Title -->
diff --git a/src/lib/components/ControlModules/SharedShockerControlModule.svelte b/src/lib/components/ControlModules/SharedShockerControlModule.svelte
index e83abdd8..4cad9b3a 100644
--- a/src/lib/components/ControlModules/SharedShockerControlModule.svelte
+++ b/src/lib/components/ControlModules/SharedShockerControlModule.svelte
@@ -64,7 +64,7 @@
 </script>
 
 <div
-  class="border-surface-400-500-token flex flex-col items-center justify-center gap-2 overflow-hidden rounded-md border p-2"
+  class="flex flex-col items-center justify-center gap-2 overflow-hidden rounded-md border p-2"
   class:opacity-50={isPaused}
 >
   <!-- Title -->
diff --git a/src/lib/components/ControlModules/ShockerCard.svelte b/src/lib/components/ControlModules/ShockerCard.svelte
index 9f464f38..6cea0443 100644
--- a/src/lib/components/ControlModules/ShockerCard.svelte
+++ b/src/lib/components/ControlModules/ShockerCard.svelte
@@ -34,12 +34,7 @@
   }: Props = $props();
 </script>
 
-<div
-  class={cn(
-    'border-surface-400-500-token bg-card flex w-80 flex-col overflow-hidden rounded-md border',
-    className
-  )}
->
+<div class={cn('bg-card flex w-80 flex-col overflow-hidden rounded-md border', className)}>
   <!-- Header -->
   <div class="border-border/60 flex items-center gap-2 border-b px-3 py-2">
     <div class="flex min-w-0 flex-1 flex-col">
@@ -47,7 +42,7 @@
       {#if showHubBadge && hubName}
         <div class="text-muted-foreground flex items-center gap-1.5 text-[11px]">
           <span
-            class="size-1.5 shrink-0 rounded-full {hubOnline ? 'bg-green-400' : 'bg-red-500'}"
+            class="size-1.5 shrink-0 rounded-full {hubOnline ? 'bg-success' : 'bg-destructive'}"
             title={hubOnline ? 'Online' : 'Offline'}
           ></span>
           <span class="truncate" title={hubName}>{hubName}</span>
diff --git a/src/lib/components/ControlModules/SimpleControlHeader.svelte b/src/lib/components/ControlModules/SimpleControlHeader.svelte
index 67f2d645..909ab217 100644
--- a/src/lib/components/ControlModules/SimpleControlHeader.svelte
+++ b/src/lib/components/ControlModules/SimpleControlHeader.svelte
@@ -17,9 +17,7 @@
   }: Props = $props();
 </script>
 
-<div
-  class="border-surface-400-500-token flex flex-row items-center justify-center gap-16 rounded-md border px-8 py-2"
->
+<div class="flex flex-row items-center justify-center gap-16 rounded-md border px-8 py-2">
   <!-- Sliders -->
   <div class="grid flex-1 grid-cols-[24px_auto_40px] items-center gap-1 text-center">
     <Zap />
diff --git a/src/lib/components/ControlModules/dialogs/dialog-shocker-add.svelte b/src/lib/components/ControlModules/dialogs/dialog-shocker-add.svelte
index 9bef5f72..e748dc3a 100644
--- a/src/lib/components/ControlModules/dialogs/dialog-shocker-add.svelte
+++ b/src/lib/components/ControlModules/dialogs/dialog-shocker-add.svelte
@@ -56,7 +56,7 @@
 </script>
 
 <Dialog.Header>
-  <Dialog.Title>Add Shocker</Dialog.Title>
+  <Dialog.Title>Add shocker</Dialog.Title>
   <Dialog.Description>Register a new shocker to one of your hubs.</Dialog.Description>
 </Dialog.Header>
 <div class="flex flex-col gap-4 py-2">
diff --git a/src/lib/components/ControlModules/impl/CircleSlider.svelte b/src/lib/components/ControlModules/impl/CircleSlider.svelte
index 0db98170..98b4e615 100644
--- a/src/lib/components/ControlModules/impl/CircleSlider.svelte
+++ b/src/lib/components/ControlModules/impl/CircleSlider.svelte
@@ -150,7 +150,7 @@
     <!-- background arc -->
     <path
       d={calcSvgPathData(angleEnd)}
-      class="cursor-pointer fill-none stroke-neutral-200 stroke-20 dark:stroke-neutral-800"
+      class="stroke-muted-foreground/20 cursor-pointer fill-none stroke-20"
       stroke-linecap="round"
       aria-hidden="true"
       onpointerdown={startTracking}
@@ -177,7 +177,7 @@
       aria-valuenow={value}
       aria-valuemax={max}
       aria-labelledby={labelId}
-      class="cursor-move fill-white stroke-neutral-400 drop-shadow-md outline-none focus:ring-2 focus:ring-blue-500/60 dark:fill-neutral-900 dark:stroke-neutral-700"
+      class="fill-background stroke-muted-foreground/50 focus-visible:stroke-ring cursor-move drop-shadow-md outline-none focus-visible:stroke-3"
     />
   </svg>
 
@@ -191,14 +191,14 @@
     {max}
     {step}
     aria-label="Value"
-    class="hide-spinners absolute top-1/2 left-1/2 w-10 -translate-1/2 border-none bg-transparent text-center text-xl font-bold text-gray-900 focus:outline-none dark:text-gray-100"
+    class="hide-spinners text-foreground absolute top-1/2 left-1/2 w-10 -translate-1/2 border-none bg-transparent text-center text-xl font-bold focus:outline-none"
   />
 
   <!-- gauge label -->
   <label
     id={labelId}
     for={inputId}
-    class="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/10 text-center text-neutral-600 dark:text-neutral-300"
+    class="text-muted-foreground absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/10 text-center"
   >
     {name}
   </label>
diff --git a/src/lib/components/ControlModules/impl/ShockerMenu.svelte b/src/lib/components/ControlModules/impl/ShockerMenu.svelte
index 174b3e60..1f8c7a54 100644
--- a/src/lib/components/ControlModules/impl/ShockerMenu.svelte
+++ b/src/lib/components/ControlModules/impl/ShockerMenu.svelte
@@ -78,7 +78,7 @@
         Copy ID
       </DropdownMenu.Item>
       <DropdownMenu.Separator />
-      <DropdownMenu.Item class="cursor-pointer text-red-500" onclick={deleteShocker}>
+      <DropdownMenu.Item class="text-destructive cursor-pointer" onclick={deleteShocker}>
         <Trash2 class="size-4" />
         Delete
       </DropdownMenu.Item>
diff --git a/src/lib/components/FirmwareChannelSelector.svelte b/src/lib/components/FirmwareChannelSelector.svelte
index 36ae751b..3ae62efb 100644
--- a/src/lib/components/FirmwareChannelSelector.svelte
+++ b/src/lib/components/FirmwareChannelSelector.svelte
@@ -62,16 +62,16 @@
 
   <div class="flex flex-row items-center justify-start gap-2 pl-2">
     {#if channel === 'stable'}
-      <CircleCheckBig color="#22c55e" />
-      <p class="text-green-500">This is the recommended channel.</p>
+      <CircleCheckBig class="text-success" />
+      <p class="text-success">This is the recommended channel.</p>
       <!--
     {:else if channel === 'beta'}
-      <TriangleAlert color="#eab308" />
-      <p class="text-yellow-500">This channel might contain bugs.</p>
+      <TriangleAlert class="text-warning" />
+      <p class="text-warning">This channel might contain bugs.</p>
     -->
     {:else}
-      <TriangleAlert color="#ef4444" />
-      <p class="font-bold text-red-500" role="alert">
+      <TriangleAlert class="text-destructive" />
+      <p class="text-destructive font-bold" role="alert">
         DO NOT USE THIS UNLESS YOU KNOW WHAT YOU ARE DOING
       </p>
     {/if}
diff --git a/src/lib/components/Table/RowActions.svelte b/src/lib/components/Table/RowActions.svelte
new file mode 100644
index 00000000..0289f979
--- /dev/null
+++ b/src/lib/components/Table/RowActions.svelte
@@ -0,0 +1,56 @@
+<script lang="ts" module>
+  import type { Component } from 'svelte';
+
+  export interface RowAction {
+    label: string;
+    /** Lucide icon component. Rendered at size-4 to match the rest of the menu. */
+    icon?: Component;
+    onclick?: () => void;
+    disabled?: boolean;
+    /** Tints the item with the destructive token. */
+    destructive?: boolean;
+    /** Draws a separator above this item. */
+    separatorBefore?: boolean;
+  }
+</script>
+
+<script lang="ts">
+  import { TableActionMenu } from '@openshock/svelte-core/components';
+  import * as DropdownMenu from '@openshock/svelte-core/components/ui/dropdown-menu';
+
+  interface Props {
+    /** Group heading, e.g. "Hub". Omit for an unlabelled menu. */
+    label?: string;
+    actions: RowAction[];
+  }
+
+  let { label, actions }: Props = $props();
+</script>
+
+<TableActionMenu>
+  {#if label}
+    <DropdownMenu.Label>{label}</DropdownMenu.Label>
+  {/if}
+  <DropdownMenu.Group>
+    {#each actions as action (action.label)}
+      {#if action.separatorBefore}
+        <DropdownMenu.Separator />
+      {/if}
+      <DropdownMenu.Item
+        class={action.disabled
+          ? undefined
+          : action.destructive
+            ? 'text-destructive cursor-pointer'
+            : 'cursor-pointer'}
+        disabled={action.disabled}
+        onclick={action.onclick}
+      >
+        {#if action.icon}
+          {@const Icon = action.icon}
+          <Icon class="size-4" />
+        {/if}
+        {action.label}
+      </DropdownMenu.Item>
+    {/each}
+  </DropdownMenu.Group>
+</TableActionMenu>
diff --git a/src/lib/components/Turnstile.svelte b/src/lib/components/Turnstile.svelte
index d0c1d9fa..f3cfd7e9 100644
--- a/src/lib/components/Turnstile.svelte
+++ b/src/lib/components/Turnstile.svelte
@@ -91,9 +91,7 @@
 >
   {#if !mounted}
     <!-- Turnstile placeholder -->
-    <div
-      class="flex h-full items-center justify-center gap-3 border border-[#e0e0e0] bg-[#fafafa] p-3 select-none dark:border-[#666] dark:bg-[#222]"
-    >
+    <div class="bg-muted flex h-full items-center justify-center gap-3 border p-3 select-none">
       {#if dev || disabled}
         <Bug />
         <span> Turnstile disabled </span>
@@ -102,7 +100,7 @@
         <span> Loading... </span>
       {/if}
       <a
-        class="mb-auto ml-auto h-7 w-auto text-[#666] dark:text-[#999]"
+        class="text-muted-foreground mb-auto ml-auto h-7 w-auto"
         href="https://www.cloudflare.com/products/turnstile/?utm_source=turnstile&utm_campaign=widget"
         target="_blank"
         rel="noopener noreferrer"
diff --git a/src/lib/components/shares/permission-tooltip.svelte b/src/lib/components/shares/permission-tooltip.svelte
index 68ba1274..15418cd8 100644
--- a/src/lib/components/shares/permission-tooltip.svelte
+++ b/src/lib/components/shares/permission-tooltip.svelte
@@ -14,7 +14,12 @@
 
   function permClass(enabled: boolean): ClassValue {
     let base = 'p-1 rounded-lg ';
-    return base + (enabled ? 'bg-green-500' : 'bg-red-500');
+    return (
+      base +
+      (enabled
+        ? 'bg-success text-success-foreground'
+        : 'bg-destructive text-destructive-foreground')
+    );
   }
 
   let pausedReason = $derived(pauseState ? getPauseReason(pauseState) : null);
@@ -31,25 +36,25 @@
       class={permClass(shockerShare.permissions.shock)}
       title={shockerShare.permissions.shock ? 'Shock enabled' : 'Shock disabled'}
     >
-      <Zap color="white" />
+      <Zap />
     </span>
     <span
       class={permClass(shockerShare.permissions.vibrate)}
       title={shockerShare.permissions.vibrate ? 'Vibrate enabled' : 'Vibrate disabled'}
     >
-      <Waves color="white" />
+      <Waves />
     </span>
     <span
       class={permClass(shockerShare.permissions.sound)}
       title={shockerShare.permissions.sound ? 'Sound enabled' : 'Sound disabled'}
     >
-      <Volume2 color="white" />
+      <Volume2 />
     </span>
     <span
       class={permClass(shockerShare.permissions.live!)}
       title={shockerShare.permissions.live ? 'Live enabled' : 'Live disabled'}
     >
-      <ChartNoAxesGantt color="white" />
+      <ChartNoAxesGantt />
     </span>
   </div>
   <div class="flex justify-center gap-2">
diff --git a/src/lib/components/shares/user-selector.svelte b/src/lib/components/shares/user-selector.svelte
index cb0326cb..5e4c4f2d 100644
--- a/src/lib/components/shares/user-selector.svelte
+++ b/src/lib/components/shares/user-selector.svelte
@@ -14,8 +14,7 @@
   let userInput = $state('');
   let { fetchedUser = $bindable(null) }: Props = $props();
 
-  function check(event: Event) {
-    event.preventDefault();
+  function check() {
     usersGetByName({ path: { username: userInput } })
       .then((user) => {
         fetchedUser = user;
@@ -32,21 +31,34 @@
   }
 
   let inputModified = $derived(fetchedUser?.name !== userInput);
+
+  // Not a <form>: this sits inside the share dialog's form, and nested forms are invalid HTML.
+  // Enter runs the lookup while the name is unconfirmed, and otherwise falls through to the outer form.
+  function onKeydown(event: KeyboardEvent) {
+    if (event.key !== 'Enter' || !inputModified) return;
+    event.preventDefault();
+    check();
+  }
 </script>
 
-<form class="flex items-center gap-2" onsubmit={check}>
-  <Avatar.Root class={(fetchedUser ? 'border-3 border-green-500' : '') + ' h-15 w-15'}>
+<div class="flex items-center gap-2">
+  <Avatar.Root class={(fetchedUser ? 'border-success border-3' : '') + ' h-15 w-15'}>
     <Avatar.Image
       src={fetchedUser?.image}
       alt={fetchedUser ? `${fetchedUser.name}'s avatar` : 'User avatar'}
     />
     <Avatar.Fallback>?</Avatar.Fallback>
   </Avatar.Root>
-  <Input bind:value={userInput} placeholder="Enter user name" aria-label="Username to search" />
+  <Input
+    bind:value={userInput}
+    onkeydown={onKeydown}
+    placeholder="Enter user name"
+    aria-label="Username to search"
+  />
   <Button
     onclick={check}
     disabled={!inputModified}
-    type="submit"
+    type="button"
     title={inputModified ? 'Search user' : 'User found'}
   >
     {#if inputModified}
@@ -55,4 +67,4 @@
       <Check />
     {/if}
   </Button>
-</form>
+</div>
diff --git a/src/lib/components/svg/LiveControlIcon.svelte b/src/lib/components/svg/LiveControlIcon.svelte
index db23fa3e..6fba73c9 100644
--- a/src/lib/components/svg/LiveControlIcon.svelte
+++ b/src/lib/components/svg/LiveControlIcon.svelte
@@ -11,7 +11,7 @@
 
 <svg
   role="img"
-  class={cn('fill-black dark:fill-white', className)}
+  class={cn('fill-current', className)}
   width={size}
   height={size}
   viewBox="0 0 50 50"
diff --git a/src/lib/state/hubs-state.svelte.ts b/src/lib/state/hubs-state.svelte.ts
index 74764d66..7363cd6b 100644
--- a/src/lib/state/hubs-state.svelte.ts
+++ b/src/lib/state/hubs-state.svelte.ts
@@ -43,6 +43,12 @@ export function notifyHubPaired(hubId: string) {
   hubPairedSignals.set(hubId, (hubPairedSignals.get(hubId) ?? 0) + 1);
 }
 
+// Whether ownHubs reflects the server yet, so an empty map can be told apart from "not fetched".
+export const ownHubsStatus = $state<{ loaded: boolean; failed: boolean }>({
+  loaded: false,
+  failed: false,
+});
+
 export async function refreshOwnHubs() {
   try {
     const { data } = await shockerListShockers();
@@ -52,7 +58,10 @@ export async function refreshOwnHubs() {
     for (const d of data) {
       ownHubs.set(d.id, d);
     }
+    ownHubsStatus.loaded = true;
+    ownHubsStatus.failed = false;
   } catch (error) {
+    ownHubsStatus.failed = true;
     handleApiError(error);
   }
 }
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 8bab4d42..d03c3de7 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -21,7 +21,7 @@
 
 {#if authState.status !== AuthStatus.Authenticated}
   <Container>
-    <Spinner class="size-20 text-gray-600 dark:text-gray-300" />
+    <Spinner class="text-muted-foreground size-20" />
   </Container>
 {:else}
   {@render children()}
diff --git a/src/routes/(app)/admin/automation-tokens/+page.svelte b/src/routes/(app)/admin/automation-tokens/+page.svelte
index a0babaef..1a875961 100644
--- a/src/routes/(app)/admin/automation-tokens/+page.svelte
+++ b/src/routes/(app)/admin/automation-tokens/+page.svelte
@@ -1,10 +1,14 @@
 <script lang="ts">
   import { adminListAutomationTokens } from '#lib/api/index.js';
   import { Bot, Plus, RotateCcw } from '@lucide/svelte';
-  import { Container, EmptyState, PageHeader } from '@openshock/svelte-core/components';
+  import {
+    Container,
+    EmptyState,
+    PageHeader,
+    PageLoading,
+  } from '@openshock/svelte-core/components';
   import DataTable from '#lib/components/Table/DataTableTemplate.svelte';
   import { Button } from '@openshock/svelte-core/components/ui/button';
-  import { Spinner } from '@openshock/svelte-core/components/ui/spinner';
   import { handleApiError } from '#lib/errorhandling/apiErrorHandling.js';
   import { registerBreadcrumbs } from '#lib/state/breadcrumbs-state.svelte.js';
   import { onMount } from 'svelte';
@@ -55,9 +59,7 @@
 
   <div class="flex min-h-0 w-full min-w-0 flex-1 flex-col gap-6">
     {#if !hasLoaded}
-      <div class="flex h-64 w-full items-center justify-center">
-        <Spinner class="size-8 text-gray-600 dark:text-gray-300" />
-      </div>
+      <PageLoading />
     {:else if data.length === 0}
       <EmptyState
         icon={Bot}
diff --git a/src/routes/(app)/admin/automation-tokens/data-table-actions.svelte b/src/routes/(app)/admin/automation-tokens/data-table-actions.svelte
index f87055cf..09a29aef 100644
--- a/src/routes/(app)/admin/automation-tokens/data-table-actions.svelte
+++ b/src/routes/(app)/admin/automation-tokens/data-table-actions.svelte
@@ -44,7 +44,7 @@
     </DropdownMenu.Item>
     <DropdownMenu.Separator />
     <DropdownMenu.Item
-      class="cursor-pointer text-red-500"
+      class="text-destructive cursor-pointer"
       onclick={() => (deleteDialogOpen = true)}
     >
       <Trash2 class="size-4" />
diff --git a/src/routes/(app)/admin/automation-tokens/dialog-secret-reveal.svelte b/src/routes/(app)/admin/automation-tokens/dialog-secret-reveal.svelte
index b1ebf8a6..46f1a017 100644
--- a/src/routes/(app)/admin/automation-tokens/dialog-secret-reveal.svelte
+++ b/src/routes/(app)/admin/automation-tokens/dialog-secret-reveal.svelte
@@ -31,7 +31,7 @@
   >
     <Dialog.Header>
       <Dialog.Title class="flex items-center gap-2">
-        <CircleCheck class="size-5 text-green-500" />
+        <CircleCheck class="text-success size-5" />
         {title}
       </Dialog.Title>
       <Dialog.Description>
@@ -49,7 +49,7 @@
     {/if}
 
     <p class="text-muted-foreground flex items-start gap-2 text-sm">
-      <TriangleAlert class="size-4 shrink-0 text-orange-500" />
+      <TriangleAlert class="text-warning size-4 shrink-0" />
       <span>
         This secret lets its holder bypass the protections granted to the token. Store it somewhere
         only the automation can read.
diff --git a/src/routes/(app)/admin/automation-tokens/dialog-token-create.svelte b/src/routes/(app)/admin/automation-tokens/dialog-token-create.svelte
index de6d6d87..4e67446c 100644
--- a/src/routes/(app)/admin/automation-tokens/dialog-token-create.svelte
+++ b/src/routes/(app)/admin/automation-tokens/dialog-token-create.svelte
@@ -115,6 +115,9 @@
       bind:valid={autoCleanupValid}
     />
 
-    <Button onclick={createToken} disabled={!valid}>Create</Button>
+    <Dialog.Footer>
+      <Button variant="outline" onclick={() => (open = false)}>Cancel</Button>
+      <Button onclick={createToken} disabled={!valid}>Create</Button>
+    </Dialog.Footer>
   </Dialog.Content>
 </Dialog.Root>
diff --git a/src/routes/(app)/admin/automation-tokens/dialog-token-delete.svelte b/src/routes/(app)/admin/automation-tokens/dialog-token-delete.svelte
index eff76683..f87a4743 100644
--- a/src/routes/(app)/admin/automation-tokens/dialog-token-delete.svelte
+++ b/src/routes/(app)/admin/automation-tokens/dialog-token-delete.svelte
@@ -13,14 +13,14 @@
 
   let { open = $bindable<boolean>(), token, onDeleted }: Props = $props();
 
-  function onDeleteClicked() {
-    adminDeleteAutomationToken({ path: { id: token.id } })
-      .then(() => {
-        onDeleted();
-        toast.success('Deleted automation token');
-      })
-      .catch(handleApiError)
-      .finally(() => (open = false));
+  async function onDeleteClicked() {
+    try {
+      await adminDeleteAutomationToken({ path: { id: token.id } });
+      toast.success('Deleted automation token');
+      onDeleted();
+    } catch (error) {
+      await handleApiError(error);
+    }
   }
 </script>
 
diff --git a/src/routes/(app)/admin/automation-tokens/dialog-token-edit.svelte b/src/routes/(app)/admin/automation-tokens/dialog-token-edit.svelte
index 1273c5fe..a301c284 100644
--- a/src/routes/(app)/admin/automation-tokens/dialog-token-edit.svelte
+++ b/src/routes/(app)/admin/automation-tokens/dialog-token-edit.svelte
@@ -121,6 +121,9 @@
       bind:valid={autoCleanupValid}
     />
 
-    <Button onclick={applyChanges} disabled={!valid}>Apply</Button>
+    <Dialog.Footer>
+      <Button variant="outline" onclick={() => (open = false)}>Cancel</Button>
+      <Button onclick={applyChanges} disabled={!valid}>Apply</Button>
+    </Dialog.Footer>
   </Dialog.Content>
 </Dialog.Root>
diff --git a/src/routes/(app)/admin/automation-tokens/dialog-token-rotate.svelte b/src/routes/(app)/admin/automation-tokens/dialog-token-rotate.svelte
index 5884edf6..22d546f8 100644
--- a/src/routes/(app)/admin/automation-tokens/dialog-token-rotate.svelte
+++ b/src/routes/(app)/admin/automation-tokens/dialog-token-rotate.svelte
@@ -50,6 +50,9 @@
         using it will be rejected until it is given the new one.
       </Dialog.Description>
     </Dialog.Header>
-    <Button variant="destructive" onclick={rotate} disabled={isSubmitting}>Rotate</Button>
+    <Dialog.Footer>
+      <Button variant="outline" onclick={() => (open = false)}>Cancel</Button>
+      <Button variant="destructive" onclick={rotate} disabled={isSubmitting}>Rotate</Button>
+    </Dialog.Footer>
   </Dialog.Content>
 </Dialog.Root>
diff --git a/src/routes/(app)/admin/blacklists/+page.svelte b/src/routes/(app)/admin/blacklists/+page.svelte
index 0b7925fc..5af1172a 100644
--- a/src/routes/(app)/admin/blacklists/+page.svelte
+++ b/src/routes/(app)/admin/blacklists/+page.svelte
@@ -10,7 +10,7 @@
   } from '#lib/api/index.js';
   import type { EmailProviderBlacklistDto, UserNameBlacklistDto } from '#lib/api/index.js';
   import { Trash2 } from '@lucide/svelte';
-  import { Container } from '@openshock/svelte-core/components';
+  import { Container, PageHeader } from '@openshock/svelte-core/components';
   import { TextInput } from '@openshock/svelte-core/components/input';
   import { Button } from '@openshock/svelte-core/components/ui/button';
   import { registerBreadcrumbs } from '#lib/state/breadcrumbs-state.svelte.js';
@@ -174,94 +174,100 @@
   });
 </script>
 
-<Container class="grid grid-cols-1 gap-6 md:grid-cols-2">
-  <!-- Username Blacklist -->
-  <Card>
-    <CardHeader>
-      <CardTitle>Username Blacklist</CardTitle>
-      <TextInput autocomplete="off" placeholder="e.g. baduser123" bind:value={usernameEntry}>
-        {#snippet after()}
-          <Select.Root type="single" name="matchType" bind:value={matchTypeEntry}>
-            <Select.Trigger class="w-[150px]">{triggerLabel}</Select.Trigger>
-            <Select.Content>
-              <Select.Group>
-                <Select.Label>Match Type</Select.Label>
-                {#each matchTypes as m (m.value)}
-                  <Select.Item value={m.value} label={m.label}>{m.label}</Select.Item>
-                {/each}
-              </Select.Group>
-            </Select.Content>
-          </Select.Root>
+<Container>
+  <PageHeader
+    title="Blacklists"
+    subtitle="Usernames and email providers blocked from registering."
+  />
+  <div class="grid w-full grid-cols-1 gap-6 md:grid-cols-2">
+    <!-- Username Blacklist -->
+    <Card>
+      <CardHeader>
+        <CardTitle>Username Blacklist</CardTitle>
+        <TextInput autocomplete="off" placeholder="e.g. baduser123" bind:value={usernameEntry}>
+          {#snippet after()}
+            <Select.Root type="single" name="matchType" bind:value={matchTypeEntry}>
+              <Select.Trigger class="w-[150px]">{triggerLabel}</Select.Trigger>
+              <Select.Content>
+                <Select.Group>
+                  <Select.Label>Match Type</Select.Label>
+                  {#each matchTypes as m (m.value)}
+                    <Select.Item value={m.value} label={m.label}>{m.label}</Select.Item>
+                  {/each}
+                </Select.Group>
+              </Select.Content>
+            </Select.Root>
 
-          <Button onclick={addUsernameEntry} disabled={isLoadingUsernames}>Add</Button>
-        {/snippet}
-      </TextInput>
-    </CardHeader>
-    <CardContent class="overflow-clip">
-      <ScrollArea>
-        <div class="space-y-2">
-          {#each limit(usernameBlacklist, 10) as item (item.id)}
-            <div class="flex items-center justify-between text-sm">
-              <div class="flex items-center space-x-2">
-                <span>{item.value}</span>
-                <span class="rounded bg-gray-800 px-2 py-0.5 text-xs">{item.matchType}</span>
+            <Button onclick={addUsernameEntry} disabled={isLoadingUsernames}>Add</Button>
+          {/snippet}
+        </TextInput>
+      </CardHeader>
+      <CardContent class="overflow-clip">
+        <ScrollArea>
+          <div class="space-y-2">
+            {#each limit(usernameBlacklist, 10) as item (item.id)}
+              <div class="flex items-center justify-between text-sm">
+                <div class="flex items-center space-x-2">
+                  <span>{item.value}</span>
+                  <span class="bg-muted rounded px-2 py-0.5 text-xs">{item.matchType}</span>
+                </div>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onclick={() => removeUsername(item.id)}
+                  disabled={isLoadingUsernames}
+                  title="Remove {item.value}"
+                >
+                  <Trash2 size="16" class="text-destructive" />
+                </Button>
               </div>
-              <Button
-                variant="ghost"
-                size="sm"
-                onclick={() => removeUsername(item.id)}
-                disabled={isLoadingUsernames}
-                title="Remove {item.value}"
-              >
-                <Trash2 size="16" class="text-red-500" />
-              </Button>
-            </div>
-            <Separator />
-          {/each}
-        </div>
-      </ScrollArea>
-    </CardContent>
-  </Card>
+              <Separator />
+            {/each}
+          </div>
+        </ScrollArea>
+      </CardContent>
+    </Card>
 
-  <!-- Email-Provider Blacklist -->
-  <Card>
-    <CardHeader>
-      <CardTitle>Email-Provider Blacklist</CardTitle>
-      <TextInput
-        type="url"
-        autocomplete="off"
-        placeholder="e.g. gmail.com"
-        bind:value={emailEntry}
-        validationResult={emailEntryValid}
-      >
-        {#snippet after()}
-          <Button onclick={addEmailEntry} disabled={isLoadingEmails}>Add</Button>
-          <Button onclick={addEmailsBatch} disabled={isLoadingEmails}
-            >Batch Upload From Clipboard</Button
-          >
-        {/snippet}
-      </TextInput>
-    </CardHeader>
-    <CardContent class="overflow-clip">
-      <ScrollArea>
-        <div class="space-y-2">
-          {#each limit(emailBlacklist, 10) as item (item.id)}
-            <div class="flex items-center justify-between text-sm">
-              <span>{item.domain}</span>
-              <Button
-                variant="ghost"
-                size="sm"
-                onclick={() => removeEmail(item.id)}
-                disabled={isLoadingEmails}
-                title="Remove {item.domain}"
-              >
-                <Trash2 size="16" class="text-red-500" />
-              </Button>
-            </div>
-            <Separator />
-          {/each}
-        </div>
-      </ScrollArea>
-    </CardContent>
-  </Card>
+    <!-- Email-Provider Blacklist -->
+    <Card>
+      <CardHeader>
+        <CardTitle>Email-Provider Blacklist</CardTitle>
+        <TextInput
+          type="url"
+          autocomplete="off"
+          placeholder="e.g. gmail.com"
+          bind:value={emailEntry}
+          validationResult={emailEntryValid}
+        >
+          {#snippet after()}
+            <Button onclick={addEmailEntry} disabled={isLoadingEmails}>Add</Button>
+            <Button onclick={addEmailsBatch} disabled={isLoadingEmails}
+              >Batch Upload From Clipboard</Button
+            >
+          {/snippet}
+        </TextInput>
+      </CardHeader>
+      <CardContent class="overflow-clip">
+        <ScrollArea>
+          <div class="space-y-2">
+            {#each limit(emailBlacklist, 10) as item (item.id)}
+              <div class="flex items-center justify-between text-sm">
+                <span>{item.domain}</span>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onclick={() => removeEmail(item.id)}
+                  disabled={isLoadingEmails}
+                  title="Remove {item.domain}"
+                >
+                  <Trash2 size="16" class="text-destructive" />
+                </Button>
+              </div>
+              <Separator />
+            {/each}
+          </div>
+        </ScrollArea>
+      </CardContent>
+    </Card>
+  </div>
 </Container>
diff --git a/src/routes/(app)/admin/config/+page.svelte b/src/routes/(app)/admin/config/+page.svelte
index 886b3cd1..68d3d9e6 100644
--- a/src/routes/(app)/admin/config/+page.svelte
+++ b/src/routes/(app)/admin/config/+page.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
+  import { Plus } from '@lucide/svelte';
   import { adminConfigurationList } from '#lib/api/index.js';
   import type { ConfigurationItemDto } from '#lib/api/index.js';
-  import { Container } from '@openshock/svelte-core/components';
+  import { Container, PageHeader } from '@openshock/svelte-core/components';
   import {
     CreateColumnDefs,
     LocaleDateTimeRenderer,
@@ -10,7 +11,6 @@
   import { registerBreadcrumbs } from '#lib/state/breadcrumbs-state.svelte.js';
   import DataTable from '#lib/components/Table/DataTableTemplate.svelte';
   import { Button } from '@openshock/svelte-core/components/ui/button';
-  import { CardHeader, CardTitle } from '@openshock/svelte-core/components/ui/card';
   import { handleApiError } from '#lib/errorhandling/apiErrorHandling.js';
   import { onMount } from 'svelte';
   import DataTableActions from './data-table-actions.svelte';
@@ -52,13 +52,10 @@
 <WebhookAddDialog bind:open={addDialogOpen} onAdded={fetchWebhooks} />
 
 <Container>
-  <CardHeader class="w-full">
-    <CardTitle class="flex items-center justify-between space-x-2 text-3xl">
-      Configuration
-      <Button onclick={() => (addDialogOpen = true)}>Add new</Button>
-    </CardTitle>
-  </CardHeader>
-  <div class="flex min-h-0 w-full flex-1 flex-col gap-6 py-6">
+  <PageHeader title="Configuration" subtitle="Runtime configuration values for this instance.">
+    <Button onclick={() => (addDialogOpen = true)}><Plus />Add Value</Button>
+  </PageHeader>
+  <div class="flex min-h-0 w-full min-w-0 flex-1 flex-col gap-6">
     <DataTable {data} {columns} {features} mobileColumns={['name', 'value']} />
   </div>
 </Container>
diff --git a/src/routes/(app)/admin/config/data-table-actions.svelte b/src/routes/(app)/admin/config/data-table-actions.svelte
index 19a9c914..ba5bf972 100644
--- a/src/routes/(app)/admin/config/data-table-actions.svelte
+++ b/src/routes/(app)/admin/config/data-table-actions.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
+  import RowActions from '#lib/components/Table/RowActions.svelte';
+  import { Pencil, Trash2 } from '@lucide/svelte';
   import type { ConfigurationItemDto } from '#lib/api/index.js';
-  import { TableActionMenu } from '@openshock/svelte-core/components';
-  import * as DropdownMenu from '@openshock/svelte-core/components/ui/dropdown-menu';
   import ItemDeleteDialog from './dialog-item-delete.svelte';
   import ItemEditDialog from './dialog-item-edit.svelte';
 
@@ -19,7 +19,16 @@
 <ItemEditDialog bind:open={editDialogOpen} {item} onEdited={onChange} />
 <ItemDeleteDialog bind:open={deleteDialogOpen} {item} onDeleted={onChange} />
 
-<TableActionMenu>
-  <DropdownMenu.Item onclick={() => (editDialogOpen = true)}>Edit</DropdownMenu.Item>
-  <DropdownMenu.Item onclick={() => (deleteDialogOpen = true)}>Delete</DropdownMenu.Item>
-</TableActionMenu>
+<RowActions
+  label="Item"
+  actions={[
+    { label: 'Edit', icon: Pencil, onclick: () => (editDialogOpen = true) },
+    {
+      label: 'Delete',
+      icon: Trash2,
+      onclick: () => (deleteDialogOpen = true),
+      destructive: true,
+      separatorBefore: true,
+    },
+  ]}
+/>
diff --git a/src/routes/(app)/admin/config/dialog-item-add.svelte b/src/routes/(app)/admin/config/dialog-item-add.svelte
index 40d4235d..41837d58 100644
--- a/src/routes/(app)/admin/config/dialog-item-add.svelte
+++ b/src/routes/(app)/admin/config/dialog-item-add.svelte
@@ -52,15 +52,21 @@
 
   let valid = $derived(name.length > 0 && value.length > 0 && nameValidationResult.valid);
 
-  function onSubmit() {
-    adminConfigurationAdd({ body: { name, description, type: valueType, value } })
-      .then(() => {
-        onAdded();
-        toast.success('Created configuration item');
-        open = false;
-      })
-      .catch(handleApiError)
-      .finally(() => (open = false));
+  let submitting = $state(false);
+
+  async function onSubmit() {
+    if (submitting) return;
+    submitting = true;
+    try {
+      await adminConfigurationAdd({ body: { name, description, type: valueType, value } });
+      onAdded();
+      toast.success('Created configuration item');
+      open = false;
+    } catch (error) {
+      await handleApiError(error);
+    } finally {
+      submitting = false;
+    }
   }
 </script>
 
@@ -86,6 +92,9 @@
       </Select.Content>
     </Select.Root>
     <TextInput label="Value" bind:value />
-    <Button onclick={onSubmit} disabled={!valid}>Create</Button>
+    <Dialog.Footer>
+      <Button variant="outline" onclick={() => (open = false)}>Cancel</Button>
+      <Button onclick={onSubmit} disabled={submitting || !valid}>Create</Button>
+    </Dialog.Footer>
   </Dialog.Content>
 </Dialog.Root>
diff --git a/src/routes/(app)/admin/config/dialog-item-delete.svelte b/src/routes/(app)/admin/config/dialog-item-delete.svelte
index 7b7ffc8b..c112c1cf 100644
--- a/src/routes/(app)/admin/config/dialog-item-delete.svelte
+++ b/src/routes/(app)/admin/config/dialog-item-delete.svelte
@@ -13,14 +13,14 @@
 
   let { open = $bindable<boolean>(), item, onDeleted }: Props = $props();
 
-  function onSubmit() {
-    adminConfigurationDelete({ path: { name: item.name } })
-      .then(() => {
-        onDeleted();
-        toast.success('Removed item');
-      })
-      .catch(handleApiError)
-      .finally(() => (open = false));
+  async function onSubmit() {
+    try {
+      await adminConfigurationDelete({ path: { name: item.name } });
+      toast.success('Removed item');
+      onDeleted();
+    } catch (error) {
+      await handleApiError(error);
+    }
   }
 </script>
 
diff --git a/src/routes/(app)/admin/config/dialog-item-edit.svelte b/src/routes/(app)/admin/config/dialog-item-edit.svelte
index 3ceb0ee6..31242778 100644
--- a/src/routes/(app)/admin/config/dialog-item-edit.svelte
+++ b/src/routes/(app)/admin/config/dialog-item-edit.svelte
@@ -21,29 +21,37 @@
   let value = $state(item.value);
 
   let valid = $derived(value.length > 0);
+  let submitting = $state(false);
 
-  function onSubmit() {
-    adminConfigurationUpdate({ body: { name: item.name, description, value } })
-      .then(() => {
-        onEdited();
-        toast.success('Created configuration item');
-        open = false;
-      })
-      .catch(handleApiError)
-      .finally(() => (open = false));
+  async function onSubmit() {
+    if (submitting) return;
+    submitting = true;
+    try {
+      await adminConfigurationUpdate({ body: { name: item.name, description, value } });
+      onEdited();
+      toast.success('Updated configuration item');
+      open = false;
+    } catch (error) {
+      await handleApiError(error);
+    } finally {
+      submitting = false;
+    }
   }
 </script>
 
 <Dialog.Root bind:open={() => open, (o) => (open = o)}>
   <Dialog.Content>
     <Dialog.Header>
-      <Dialog.Title>Add configuration item</Dialog.Title>
+      <Dialog.Title>Edit configuration item</Dialog.Title>
       <Dialog.Description>
         <strong>BE CAREFUL. This will alter the server's behaviour!</strong>
       </Dialog.Description>
     </Dialog.Header>
     <TextInput label="Description" bind:value={description} />
     <TextInput label="Value" bind:value />
-    <Button onclick={onSubmit} disabled={!valid}>Create</Button>
+    <Dialog.Footer>
+      <Button variant="outline" onclick={() => (open = false)}>Cancel</Button>
+      <Button onclick={onSubmit} disabled={submitting || !valid}>Save</Button>
+    </Dialog.Footer>
   </Dialog.Content>
 </Dialog.Root>
diff --git a/src/routes/(app)/admin/mail/+page.svelte b/src/routes/(app)/admin/mail/+page.svelte
index 2c23b38f..e17fbabb 100644
--- a/src/routes/(app)/admin/mail/+page.svelte
+++ b/src/routes/(app)/admin/mail/+page.svelte
@@ -33,10 +33,10 @@
 
   // Fixed presentation data — built once per module rather than per instance.
   const statusTiles: { status: EmailStatusType; label: string; color: string }[] = [
-    { status: EmailStatus.Pending, label: 'Pending', color: 'text-orange-500' },
-    { status: EmailStatus.Sending, label: 'Sending', color: 'text-blue-500' },
-    { status: EmailStatus.Sent, label: 'Sent', color: 'text-green-500' },
-    { status: EmailStatus.Failed, label: 'Failed', color: 'text-red-500' },
+    { status: EmailStatus.Pending, label: 'Pending', color: 'text-warning' },
+    { status: EmailStatus.Sending, label: 'Sending', color: 'text-info' },
+    { status: EmailStatus.Sent, label: 'Sent', color: 'text-success' },
+    { status: EmailStatus.Failed, label: 'Failed', color: 'text-destructive' },
     { status: EmailStatus.Skipped, label: 'Skipped', color: 'text-muted-foreground' },
   ];
 </script>
@@ -57,11 +57,10 @@
     type EmailOutboxStatsDto,
     type EmailOutboxMessageDto,
   } from '#lib/api/index.js';
-  import { Container } from '@openshock/svelte-core/components';
+  import { Container, PageHeader } from '@openshock/svelte-core/components';
   import DataTable from '#lib/components/Table/DataTableTemplate.svelte';
   import PaginationFooter from '#lib/components/Table/PaginationFooter.svelte';
   import { Button } from '@openshock/svelte-core/components/ui/button';
-  import { CardHeader, CardTitle } from '@openshock/svelte-core/components/ui/card';
   import { Input } from '@openshock/svelte-core/components/ui/input';
   import { RotateCcw, Send } from '@lucide/svelte';
   import { handleApiError } from '#lib/errorhandling/apiErrorHandling.js';
@@ -185,24 +184,19 @@
 <SendTestDialog bind:open={sendDialogOpen} onSent={refresh} />
 
 <Container>
-  <CardHeader class="w-full">
-    <CardTitle class="flex flex-wrap items-center justify-between gap-2 text-3xl">
-      Mail queue
-      <div class="flex items-center gap-2">
-        <Input placeholder="Filter recipients..." bind:value={recipientSearch} class="max-w-xs" />
-        <Button onclick={() => (sendDialogOpen = true)}>
-          <Send class="size-4" />
-          <span>Send test</span>
-        </Button>
-        <Button variant="outline" onclick={refresh}>
-          <RotateCcw class="size-4" />
-          <span>Refresh</span>
-        </Button>
-      </div>
-    </CardTitle>
-  </CardHeader>
-
-  <div class="flex min-h-0 w-full flex-1 flex-col gap-6 py-6">
+  <PageHeader title="Mail Queue" subtitle="Outgoing mail queued or sent by this instance.">
+    <Input placeholder="Filter recipients..." bind:value={recipientSearch} class="w-full sm:w-48" />
+    <Button onclick={() => (sendDialogOpen = true)}>
+      <Send class="size-4" />
+      Send test
+    </Button>
+    <Button variant="outline" onclick={refresh}>
+      <RotateCcw class="size-4" />
+      Refresh
+    </Button>
+  </PageHeader>
+
+  <div class="flex min-h-0 w-full min-w-0 flex-1 flex-col gap-6">
     <div class="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5">
       {#each statusTiles as tile (tile.status)}
         <button
diff --git a/src/routes/(app)/admin/mail/data-table-actions.svelte b/src/routes/(app)/admin/mail/data-table-actions.svelte
index ba8dce86..0281f3c2 100644
--- a/src/routes/(app)/admin/mail/data-table-actions.svelte
+++ b/src/routes/(app)/admin/mail/data-table-actions.svelte
@@ -1,12 +1,11 @@
 <script lang="ts">
+  import RowActions from '#lib/components/Table/RowActions.svelte';
   import {
     EmailStatus,
     adminCancelEmailOutbox,
     adminRequeueEmailOutbox,
     type EmailOutboxMessageDto,
   } from '#lib/api/index.js';
-  import { TableActionMenu } from '@openshock/svelte-core/components';
-  import * as DropdownMenu from '@openshock/svelte-core/components/ui/dropdown-menu';
   import { copyToClipboard } from '@openshock/svelte-core/utils';
   import { Ban, Copy, Eye, RotateCcw, Trash2 } from '@lucide/svelte';
   import { handleApiError } from '#lib/errorhandling/apiErrorHandling.js';
@@ -56,41 +55,19 @@
 <MessageDetailsDialog bind:open={detailsDialogOpen} {message} />
 <MessageDeleteDialog bind:open={deleteDialogOpen} {message} onDeleted={onChanged} />
 
-<TableActionMenu>
-  <DropdownMenu.Label>Message</DropdownMenu.Label>
-  <DropdownMenu.Group>
-    <DropdownMenu.Item class="cursor-pointer" onclick={() => (detailsDialogOpen = true)}>
-      <Eye class="size-4" />
-      View details
-    </DropdownMenu.Item>
-    <DropdownMenu.Item
-      class={canRequeue ? 'cursor-pointer' : undefined}
-      disabled={!canRequeue}
-      onclick={requeue}
-    >
-      <RotateCcw class="size-4" />
-      Requeue
-    </DropdownMenu.Item>
-    <DropdownMenu.Item
-      class={canCancel ? 'cursor-pointer' : undefined}
-      disabled={!canCancel}
-      onclick={cancel}
-    >
-      <Ban class="size-4" />
-      Cancel
-    </DropdownMenu.Item>
-    <DropdownMenu.Separator />
-    <DropdownMenu.Item class="cursor-pointer" onclick={copyId}>
-      <Copy class="size-4" />
-      Copy ID
-    </DropdownMenu.Item>
-    <DropdownMenu.Separator />
-    <DropdownMenu.Item
-      class="cursor-pointer text-red-500"
-      onclick={() => (deleteDialogOpen = true)}
-    >
-      <Trash2 class="size-4" />
-      Delete
-    </DropdownMenu.Item>
-  </DropdownMenu.Group>
-</TableActionMenu>
+<RowActions
+  label="Message"
+  actions={[
+    { label: 'View details', icon: Eye, onclick: () => (detailsDialogOpen = true) },
+    { label: 'Requeue', icon: RotateCcw, onclick: requeue, disabled: !canRequeue },
+    { label: 'Cancel', icon: Ban, onclick: cancel, disabled: !canCancel },
+    { label: 'Copy ID', icon: Copy, onclick: copyId, separatorBefore: true },
+    {
+      label: 'Delete',
+      icon: Trash2,
+      onclick: () => (deleteDialogOpen = true),
+      destructive: true,
+      separatorBefore: true,
+    },
+  ]}
+/>
diff --git a/src/routes/(app)/admin/mail/dialog-message-delete.svelte b/src/routes/(app)/admin/mail/dialog-message-delete.svelte
index 304d0b44..5b37f203 100644
--- a/src/routes/(app)/admin/mail/dialog-message-delete.svelte
+++ b/src/routes/(app)/admin/mail/dialog-message-delete.svelte
@@ -12,14 +12,14 @@
 
   let { open = $bindable<boolean>(), message, onDeleted }: Props = $props();
 
-  function onDeleteClicked() {
-    adminDeleteEmailOutbox({ path: { id: message.id } })
-      .then(() => {
-        toast.success('Deleted message');
-        onDeleted?.();
-      })
-      .catch(handleApiError)
-      .finally(() => (open = false));
+  async function onDeleteClicked() {
+    try {
+      await adminDeleteEmailOutbox({ path: { id: message.id } });
+      toast.success('Deleted message');
+      onDeleted?.();
+    } catch (error) {
+      await handleApiError(error);
+    }
   }
 </script>
 
diff --git a/src/routes/(app)/admin/mail/dialog-message-details.svelte b/src/routes/(app)/admin/mail/dialog-message-details.svelte
index 895d876d..c1de1459 100644
--- a/src/routes/(app)/admin/mail/dialog-message-details.svelte
+++ b/src/routes/(app)/admin/mail/dialog-message-details.svelte
@@ -30,7 +30,7 @@
 </script>
 
 <Dialog.Root bind:open={() => open, (o) => (open = o)}>
-  <Dialog.Content class="max-h-[85vh] overflow-y-auto sm:max-w-2xl">
+  <Dialog.Content class="max-h-[85dvh] overflow-y-auto sm:max-w-2xl">
     <Dialog.Header>
       <Dialog.Title>Message details</Dialog.Title>
       <Dialog.Description>Outbox message {message.id}</Dialog.Description>
diff --git a/src/routes/(app)/admin/mail/dialog-send-test.svelte b/src/routes/(app)/admin/mail/dialog-send-test.svelte
index 1197bee6..ca456806 100644
--- a/src/routes/(app)/admin/mail/dialog-send-test.svelte
+++ b/src/routes/(app)/admin/mail/dialog-send-test.svelte
@@ -92,6 +92,9 @@
       />
     </div>
 
-    <Button onclick={onSubmit} disabled={!valid || submitting}>Send</Button>
+    <Dialog.Footer>
+      <Button variant="outline" onclick={() => (open = false)}>Cancel</Button>
+      <Button onclick={onSubmit} disabled={!valid || submitting}>Send</Button>
+    </Dialog.Footer>
   </Dialog.Content>
 </Dialog.Root>
diff --git a/src/routes/(app)/admin/online-gateways/+page.svelte b/src/routes/(app)/admin/online-gateways/+page.svelte
index 663b464e..3a396119 100644
--- a/src/routes/(app)/admin/online-gateways/+page.svelte
+++ b/src/routes/(app)/admin/online-gateways/+page.svelte
@@ -1,11 +1,10 @@
 <script lang="ts">
   import { RotateCcw } from '@lucide/svelte';
   import { adminGetOnlineGateways } from '#lib/api/index.js';
-  import { Container, PageHeader } from '@openshock/svelte-core/components';
+  import { Container, PageHeader, PageLoading } from '@openshock/svelte-core/components';
   import DataTable from '#lib/components/Table/DataTableTemplate.svelte';
   import { Button } from '@openshock/svelte-core/components/ui/button';
   import { Input } from '@openshock/svelte-core/components/ui/input';
-  import { Spinner } from '@openshock/svelte-core/components/ui/spinner';
   import { handleApiError } from '#lib/errorhandling/apiErrorHandling.js';
   import { registerBreadcrumbs } from '#lib/state/breadcrumbs-state.svelte.js';
   import { countryName } from '#lib/utils/index.js';
@@ -64,7 +63,7 @@
         label: 'Highest load',
         value: maxLoad === null ? '—' : `${maxLoad}%`,
         detail: `Alerts at ≥ ${HIGH_LOAD_PERCENT}%`,
-        color: maxLoad !== null && maxLoad >= HIGH_LOAD_PERCENT ? 'text-red-500' : '',
+        color: maxLoad !== null && maxLoad >= HIGH_LOAD_PERCENT ? 'text-destructive' : '',
       },
     ];
   });
@@ -112,9 +111,7 @@
         class="w-full"
       />
     {:else}
-      <div class="flex h-64 w-full items-center justify-center">
-        <Spinner class="size-8 text-gray-600 dark:text-gray-300" />
-      </div>
+      <PageLoading />
     {/if}
   </div>
 </Container>
diff --git a/src/routes/(app)/admin/online-gateways/data-table-actions.svelte b/src/routes/(app)/admin/online-gateways/data-table-actions.svelte
index b0228d7d..11f39ace 100644
--- a/src/routes/(app)/admin/online-gateways/data-table-actions.svelte
+++ b/src/routes/(app)/admin/online-gateways/data-table-actions.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-  import { TableActionMenu } from '@openshock/svelte-core/components';
-  import * as DropdownMenu from '@openshock/svelte-core/components/ui/dropdown-menu';
+  import RowActions from '#lib/components/Table/RowActions.svelte';
   import { copyToClipboard } from '@openshock/svelte-core/utils';
   import { Copy } from '@lucide/svelte';
   import type { OnlineGateway } from './columns';
@@ -17,24 +16,16 @@
     gateway.coordinates && copyToClipboard(gateway.coordinates, 'Coordinates copied to clipboard');
 </script>
 
-<TableActionMenu>
-  <DropdownMenu.Label>Gateway</DropdownMenu.Label>
-  <DropdownMenu.Group>
-    <DropdownMenu.Item class="cursor-pointer" onclick={copyId}>
-      <Copy class="size-4" />
-      Copy Gateway
-    </DropdownMenu.Item>
-    <DropdownMenu.Item class="cursor-pointer" onclick={copyEndpoint}>
-      <Copy class="size-4" />
-      Copy Endpoint
-    </DropdownMenu.Item>
-    <DropdownMenu.Item
-      class={gateway.coordinates ? 'cursor-pointer' : undefined}
-      disabled={!gateway.coordinates}
-      onclick={copyCoordinates}
-    >
-      <Copy class="size-4" />
-      Copy Coordinates
-    </DropdownMenu.Item>
-  </DropdownMenu.Group>
-</TableActionMenu>
+<RowActions
+  label="Gateway"
+  actions={[
+    { label: 'Copy Gateway', icon: Copy, onclick: copyId },
+    { label: 'Copy Endpoint', icon: Copy, onclick: copyEndpoint },
+    {
+      label: 'Copy Coordinates',
+      icon: Copy,
+      onclick: copyCoordinates,
+      disabled: !gateway.coordinates,
+    },
+  ]}
+/>
diff --git a/src/routes/(app)/admin/online-hubs/+page.svelte b/src/routes/(app)/admin/online-hubs/+page.svelte
index feb6efeb..4f1cbf15 100644
--- a/src/routes/(app)/admin/online-hubs/+page.svelte
+++ b/src/routes/(app)/admin/online-hubs/+page.svelte
@@ -68,11 +68,10 @@
   import { ChartBar, ChevronDown, RotateCcw, X } from '@lucide/svelte';
   import { cn } from '@openshock/svelte-core/utils';
   import { adminGetOnlineDevices } from '#lib/api/index.js';
-  import { Container, PageHeader } from '@openshock/svelte-core/components';
+  import { Container, PageHeader, PageLoading } from '@openshock/svelte-core/components';
   import DataTable from '#lib/components/Table/DataTableTemplate.svelte';
   import { Button } from '@openshock/svelte-core/components/ui/button';
   import { Input } from '@openshock/svelte-core/components/ui/input';
-  import { Spinner } from '@openshock/svelte-core/components/ui/spinner';
   import { handleApiError } from '#lib/errorhandling/apiErrorHandling.js';
   import { SemVer } from 'semver';
   import { onMount } from 'svelte';
@@ -181,13 +180,13 @@
       {
         label: 'Median latency',
         value: medianLatency === null ? '—' : `${medianLatency} ms`,
-        color: medianLatency !== null && medianLatency >= HIGH_LATENCY_MS ? 'text-orange-500' : '',
+        color: medianLatency !== null && medianLatency >= HIGH_LATENCY_MS ? 'text-warning' : '',
       },
       {
         label: 'Weak signal',
         value: weakSignal.toString(),
         detail: `RSSI ≤ ${WEAK_RSSI_DBM} dBm`,
-        color: weakSignal > 0 ? 'text-red-500' : '',
+        color: weakSignal > 0 ? 'text-destructive' : '',
       },
     ];
   });
@@ -299,9 +298,7 @@
         class="min-h-80 w-full"
       />
     {:else}
-      <div class="flex h-64 w-full items-center justify-center">
-        <Spinner class="size-8 text-gray-600 dark:text-gray-300" />
-      </div>
+      <PageLoading />
     {/if}
   </div>
 </Container>
diff --git a/src/routes/(app)/admin/users/+page.svelte b/src/routes/(app)/admin/users/+page.svelte
index c00dfd5d..f57c61cb 100644
--- a/src/routes/(app)/admin/users/+page.svelte
+++ b/src/routes/(app)/admin/users/+page.svelte
@@ -51,10 +51,9 @@
   import { odataAnd, odataSearch } from '#lib/utils/odata.js';
   import { adminGetUsers, type PaginatedOfAdminUsersView } from '#lib/api/index.js';
   import type { SortingState } from '@tanstack/svelte-table';
-  import { Container } from '@openshock/svelte-core/components';
+  import { Container, PageHeader } from '@openshock/svelte-core/components';
   import DataTable from '#lib/components/Table/DataTableTemplate.svelte';
   import PaginationFooter from '#lib/components/Table/PaginationFooter.svelte';
-  import { CardHeader, CardTitle } from '@openshock/svelte-core/components/ui/card';
   import { Input } from '@openshock/svelte-core/components/ui/input';
   import { handleApiError } from '#lib/errorhandling/apiErrorHandling.js';
   import { registerBreadcrumbs } from '#lib/state/breadcrumbs-state.svelte.js';
@@ -132,18 +131,13 @@
 </script>
 
 <Container>
-  <CardHeader class="w-full">
-    <CardTitle class="flex items-center justify-between space-x-2 text-3xl">
-      Users
-      <div class="flex items-center justify-end space-x-2">
-        <Input placeholder="Filter names..." bind:value={nameSearch} class="max-w-sm" />
-        <Input placeholder="Filter emails..." bind:value={emailSearch} class="max-w-sm" />
-      </div>
-    </CardTitle>
-  </CardHeader>
+  <PageHeader title="Users" subtitle="Every account registered on this instance.">
+    <Input placeholder="Filter names..." bind:value={nameSearch} class="w-full sm:w-48" />
+    <Input placeholder="Filter emails..." bind:value={emailSearch} class="w-full sm:w-48" />
+  </PageHeader>
   <!-- The table owns the leftover viewport height and scrolls inside it, so the
        header and the pagination footer stay put while the rows move. -->
-  <div class="flex min-h-0 w-full flex-1 flex-col gap-6 py-6">
+  <div class="flex min-h-0 w-full min-w-0 flex-1 flex-col gap-6">
     <DataTable
       {data}
       {columns}
diff --git a/src/routes/(app)/admin/users/[userId=guid]/+page.svelte b/src/routes/(app)/admin/users/[userId=guid]/+page.svelte
index 23fdefe8..5db283d9 100644
--- a/src/routes/(app)/admin/users/[userId=guid]/+page.svelte
+++ b/src/routes/(app)/admin/users/[userId=guid]/+page.svelte
@@ -249,9 +249,9 @@
       {:else if user.activationRequest}
         {@const request = user.activationRequest}
         <div
-          class="flex flex-wrap items-start gap-3 rounded-lg border border-orange-500/40 bg-orange-500/5 p-4"
+          class="border-warning/40 bg-warning/5 flex flex-wrap items-start gap-3 rounded-lg border p-4"
         >
-          <TriangleAlert class="size-5 shrink-0 text-orange-500" />
+          <TriangleAlert class="text-warning size-5 shrink-0" />
           <div class="flex min-w-0 flex-col gap-1 text-sm">
             <span class="font-medium">Awaiting activation</span>
             <span class="text-muted-foreground">
diff --git a/src/routes/(app)/admin/users/[userId=guid]/dialog-api-token-delete.svelte b/src/routes/(app)/admin/users/[userId=guid]/dialog-api-token-delete.svelte
index 44d31d4b..242dba99 100644
--- a/src/routes/(app)/admin/users/[userId=guid]/dialog-api-token-delete.svelte
+++ b/src/routes/(app)/admin/users/[userId=guid]/dialog-api-token-delete.svelte
@@ -12,14 +12,14 @@
 
   let { open = $bindable<boolean>(), token, onDeleted }: Props = $props();
 
-  function onDeleteClicked() {
-    adminDeleteApiToken({ path: { tokenId: token.id } })
-      .then(() => {
-        onDeleted();
-        toast.success('Deleted API token');
-      })
-      .catch(handleApiError)
-      .finally(() => (open = false));
+  async function onDeleteClicked() {
+    try {
+      await adminDeleteApiToken({ path: { tokenId: token.id } });
+      toast.success('Deleted API token');
+      onDeleted();
+    } catch (error) {
+      await handleApiError(error);
+    }
   }
 </script>
 
diff --git a/src/routes/(app)/admin/users/[userId=guid]/dialog-set-email.svelte b/src/routes/(app)/admin/users/[userId=guid]/dialog-set-email.svelte
index d0526604..2e44baed 100644
--- a/src/routes/(app)/admin/users/[userId=guid]/dialog-set-email.svelte
+++ b/src/routes/(app)/admin/users/[userId=guid]/dialog-set-email.svelte
@@ -50,6 +50,9 @@
       bind:value={email}
       bind:valid={emailValid}
     />
-    <Button onclick={setEmail} disabled={!valid}>Change email</Button>
+    <Dialog.Footer>
+      <Button variant="outline" onclick={() => (open = false)}>Cancel</Button>
+      <Button onclick={setEmail} disabled={!valid}>Change email</Button>
+    </Dialog.Footer>
   </Dialog.Content>
 </Dialog.Root>
diff --git a/src/routes/(app)/admin/users/[userId=guid]/dialog-set-name.svelte b/src/routes/(app)/admin/users/[userId=guid]/dialog-set-name.svelte
index 4c783e07..2b5e45e7 100644
--- a/src/routes/(app)/admin/users/[userId=guid]/dialog-set-name.svelte
+++ b/src/routes/(app)/admin/users/[userId=guid]/dialog-set-name.svelte
@@ -50,6 +50,9 @@
       bind:value={name}
       bind:valid={nameValid}
     />
-    <Button onclick={setName} disabled={!valid}>Change username</Button>
+    <Dialog.Footer>
+      <Button variant="outline" onclick={() => (open = false)}>Cancel</Button>
+      <Button onclick={setName} disabled={!valid}>Change username</Button>
+    </Dialog.Footer>
   </Dialog.Content>
 </Dialog.Root>
diff --git a/src/routes/(app)/admin/users/[userId=guid]/dialog-set-password.svelte b/src/routes/(app)/admin/users/[userId=guid]/dialog-set-password.svelte
index 2339f5d3..0a494dbd 100644
--- a/src/routes/(app)/admin/users/[userId=guid]/dialog-set-password.svelte
+++ b/src/routes/(app)/admin/users/[userId=guid]/dialog-set-password.svelte
@@ -53,6 +53,9 @@
       showStrengthMeter
       onPwnedCheckError={handleApiError}
     />
-    <Button onclick={setPassword} disabled={!valid}>Set password</Button>
+    <Dialog.Footer>
+      <Button variant="outline" onclick={() => (open = false)}>Cancel</Button>
+      <Button onclick={setPassword} disabled={!valid}>Set password</Button>
+    </Dialog.Footer>
   </Dialog.Content>
 </Dialog.Root>
diff --git a/src/routes/(app)/admin/users/[userId=guid]/user-api-tokens.svelte b/src/routes/(app)/admin/users/[userId=guid]/user-api-tokens.svelte
index 900c1871..5f8ec6ee 100644
--- a/src/routes/(app)/admin/users/[userId=guid]/user-api-tokens.svelte
+++ b/src/routes/(app)/admin/users/[userId=guid]/user-api-tokens.svelte
@@ -87,7 +87,7 @@
             <Button
               variant="ghost"
               size="icon"
-              class="text-red-500"
+              class="text-destructive"
               title="Delete token"
               onclick={() => (tokenToDelete = token)}
             >
diff --git a/src/routes/(app)/admin/users/data-table-actions.svelte b/src/routes/(app)/admin/users/data-table-actions.svelte
index abad4e22..6e868890 100644
--- a/src/routes/(app)/admin/users/data-table-actions.svelte
+++ b/src/routes/(app)/admin/users/data-table-actions.svelte
@@ -61,7 +61,7 @@
     <DropdownMenu.Item
       onclick={() => (deleteDialogOpen = true)}
       disabled={isPrivileged}
-      class={isPrivileged ? undefined : 'cursor-pointer text-red-500'}
+      class={isPrivileged ? undefined : 'text-destructive cursor-pointer'}
     >
       <Trash2 class="size-4" />
       Delete
diff --git a/src/routes/(app)/admin/users/dialog-user-delete.svelte b/src/routes/(app)/admin/users/dialog-user-delete.svelte
index 6b249ea8..757df470 100644
--- a/src/routes/(app)/admin/users/dialog-user-delete.svelte
+++ b/src/routes/(app)/admin/users/dialog-user-delete.svelte
@@ -13,14 +13,14 @@
 
   let { open = $bindable<boolean>(), user, onDeleted }: Props = $props();
 
-  function onDeleteClicked() {
-    adminDeleteUser({ path: { userId: user.id } })
-      .then(() => {
-        toast.success(`Deleted user ${user.name}`);
-        onDeleted?.();
-      })
-      .catch(handleApiError)
-      .finally(() => (open = false));
+  async function onDeleteClicked() {
+    try {
+      await adminDeleteUser({ path: { userId: user.id } });
+      toast.success(`Deleted user ${user.name}`);
+      onDeleted?.();
+    } catch (error) {
+      await handleApiError(error);
+    }
   }
 </script>
 
diff --git a/src/routes/(app)/admin/users/dialog-user-edit.svelte b/src/routes/(app)/admin/users/dialog-user-edit.svelte
index eb365dac..d8ad145e 100644
--- a/src/routes/(app)/admin/users/dialog-user-edit.svelte
+++ b/src/routes/(app)/admin/users/dialog-user-edit.svelte
@@ -22,16 +22,25 @@
   let emailValid = $state(true);
   let emailSet = $derived(email.length > 0 && email != user.email);
 
-  function sendit() {
-    adminModifyUser({
-      path: { userId: user.id },
-      body: {
-        name: usernameSet ? username : null,
-        email: emailSet ? email : null,
-      },
-    })
-      .then(() => (open = false))
-      .catch(handleApiError);
+  let submitting = $state(false);
+
+  async function sendit() {
+    if (submitting) return;
+    submitting = true;
+    try {
+      await adminModifyUser({
+        path: { userId: user.id },
+        body: {
+          name: usernameSet ? username : null,
+          email: emailSet ? email : null,
+        },
+      });
+      open = false;
+    } catch (error) {
+      await handleApiError(error);
+    } finally {
+      submitting = false;
+    }
   }
 </script>
 
@@ -49,19 +58,23 @@
     <EmailInput label="Email" placeholder={user.email} bind:value={email} bind:valid={emailValid} />
     <div>
       <h2>Roles</h2>
-      <div class="border-surface-500 flex flex-col space-y-4 rounded-md border p-4">
+      <div class="flex flex-col space-y-4 rounded-md border p-4">
         {#each [RoleType.Support, RoleType.Staff, RoleType.Admin, RoleType.System] as role (role)}
           <span><Checkbox checked={user.roles.includes(role)} /> {role}</span>
         {/each}
       </div>
     </div>
-    <Button
-      onclick={sendit}
-      disabled={(usernameSet && !usernameValid) ||
-        (emailSet && !emailValid) ||
-        (!usernameSet && !emailSet)}
-    >
-      Apply
-    </Button>
+    <Dialog.Footer>
+      <Button variant="outline" onclick={() => (open = false)}>Cancel</Button>
+      <Button
+        onclick={sendit}
+        disabled={submitting ||
+          (usernameSet && !usernameValid) ||
+          (emailSet && !emailValid) ||
+          (!usernameSet && !emailSet)}
+      >
+        Apply
+      </Button>
+    </Dialog.Footer>
   </Dialog.Content>
 </Dialog.Root>
diff --git a/src/routes/(app)/admin/webhooks/+page.svelte b/src/routes/(app)/admin/webhooks/+page.svelte
index 4f6c0a6a..ab75ae43 100644
--- a/src/routes/(app)/admin/webhooks/+page.svelte
+++ b/src/routes/(app)/admin/webhooks/+page.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
-  import { RotateCcw } from '@lucide/svelte';
+  import { Plus, RotateCcw } from '@lucide/svelte';
   import { adminListWebhooks } from '#lib/api/index.js';
   import type { WebhookDto } from '#lib/api/index.js';
-  import { Container } from '@openshock/svelte-core/components';
-  import { Spinner } from '@openshock/svelte-core/components/ui/spinner';
+  import { Container, PageError, PageHeader, PageLoading } from '@openshock/svelte-core/components';
   import {
     CreateColumnDefs,
     LocaleDateTimeRenderer,
@@ -11,7 +10,6 @@
   } from '#lib/components/Table/ColumnUtils.js';
   import DataTable from '#lib/components/Table/DataTableTemplate.svelte';
   import { Button } from '@openshock/svelte-core/components/ui/button';
-  import { CardHeader, CardTitle } from '@openshock/svelte-core/components/ui/card';
   import { handleApiError } from '#lib/errorhandling/apiErrorHandling.js';
   import DataTableActions from './data-table-actions.svelte';
   import { registerBreadcrumbs } from '#lib/state/breadcrumbs-state.svelte.js';
@@ -48,31 +46,23 @@
 <WebhookAddDialog bind:open={addDialogOpen} onAdded={refresh} />
 
 <Container>
-  <CardHeader class="w-full">
-    <CardTitle class="flex items-center justify-between space-x-2 text-3xl">
-      Webhooks
-      <Button onclick={() => (addDialogOpen = true)}>Add new</Button>
-      <Button class="text-xl" onclick={refresh}>
-        <RotateCcw />
-        <span> Refresh </span>
-      </Button>
-    </CardTitle>
-  </CardHeader>
-  <div class="flex min-h-0 w-full flex-1 flex-col gap-6 py-6">
+  <PageHeader title="Webhooks" subtitle="Outgoing webhooks this instance will call.">
+    <Button onclick={() => (addDialogOpen = true)}><Plus />Add Webhook</Button>
+    <Button variant="outline" onclick={refresh}>
+      <RotateCcw />
+      Refresh
+    </Button>
+  </PageHeader>
+  <div class="flex min-h-0 w-full min-w-0 flex-1 flex-col gap-6">
     <svelte:boundary onerror={(error: unknown) => handleApiError(error)}>
       <DataTable {data} {columns} {features} mobileColumns={['name']} />
 
       {#snippet pending()}
-        <div class="flex h-64 w-full items-center justify-center">
-          <Spinner class="size-8 text-gray-600 dark:text-gray-300" />
-        </div>
+        <PageLoading />
       {/snippet}
 
       {#snippet failed(_error: unknown, reset: () => void)}
-        <div class="flex w-full flex-col items-center gap-3 py-12">
-          <p class="text-destructive text-sm">Failed to load webhooks.</p>
-          <Button variant="outline" onclick={reset}>Try again</Button>
-        </div>
+        <PageError message="Failed to load webhooks." onRetry={reset} />
       {/snippet}
     </svelte:boundary>
   </div>
diff --git a/src/routes/(app)/admin/webhooks/data-table-actions.svelte b/src/routes/(app)/admin/webhooks/data-table-actions.svelte
index a16ac221..23e82597 100644
--- a/src/routes/(app)/admin/webhooks/data-table-actions.svelte
+++ b/src/routes/(app)/admin/webhooks/data-table-actions.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
+  import RowActions from '#lib/components/Table/RowActions.svelte';
   import type { WebhookDto } from '#lib/api/index.js';
-  import { TableActionMenu } from '@openshock/svelte-core/components';
-  import * as DropdownMenu from '@openshock/svelte-core/components/ui/dropdown-menu';
   import { copyToClipboard } from '@openshock/svelte-core/utils';
   import { Copy, Pencil, Trash2 } from '@lucide/svelte';
   import WebhookDeleteDialog from './dialog-webhook-delete.svelte';
@@ -19,25 +18,17 @@
 
 <WebhookDeleteDialog bind:open={deleteDialogOpen} {webhook} />
 
-<TableActionMenu>
-  <DropdownMenu.Label>Webhook</DropdownMenu.Label>
-  <DropdownMenu.Group>
-    <DropdownMenu.Item class="cursor-pointer">
-      <Pencil class="size-4" />
-      Edit
-    </DropdownMenu.Item>
-    <DropdownMenu.Separator />
-    <DropdownMenu.Item class="cursor-pointer" onclick={copyId}>
-      <Copy class="size-4" />
-      Copy ID
-    </DropdownMenu.Item>
-    <DropdownMenu.Separator />
-    <DropdownMenu.Item
-      class="cursor-pointer text-red-500"
-      onclick={() => (deleteDialogOpen = true)}
-    >
-      <Trash2 class="size-4" />
-      Delete
-    </DropdownMenu.Item>
-  </DropdownMenu.Group>
-</TableActionMenu>
+<RowActions
+  label="Webhook"
+  actions={[
+    { label: 'Edit', icon: Pencil, disabled: true },
+    { label: 'Copy ID', icon: Copy, onclick: copyId, separatorBefore: true },
+    {
+      label: 'Delete',
+      icon: Trash2,
+      onclick: () => (deleteDialogOpen = true),
+      destructive: true,
+      separatorBefore: true,
+    },
+  ]}
+/>
diff --git a/src/routes/(app)/admin/webhooks/dialog-webhook-add.svelte b/src/routes/(app)/admin/webhooks/dialog-webhook-add.svelte
index 3acbcf1c..846a9152 100644
--- a/src/routes/(app)/admin/webhooks/dialog-webhook-add.svelte
+++ b/src/routes/(app)/admin/webhooks/dialog-webhook-add.svelte
@@ -47,15 +47,21 @@
 
   let valid = $derived(name.length > 0 && url.length > 0 && urlValidationResult.valid);
 
-  function createWebhook() {
-    adminAddWebhook({ body: { name, url } })
-      .then(() => {
-        onAdded();
-        toast.success('Created webhook');
-        open = false;
-      })
-      .catch(handleApiError)
-      .finally(() => (open = false));
+  let submitting = $state(false);
+
+  async function createWebhook() {
+    if (submitting) return;
+    submitting = true;
+    try {
+      await adminAddWebhook({ body: { name, url } });
+      onAdded();
+      toast.success('Created webhook');
+      open = false;
+    } catch (error) {
+      await handleApiError(error);
+    } finally {
+      submitting = false;
+    }
   }
 </script>
 
@@ -69,6 +75,9 @@
     </Dialog.Header>
     <TextInput label="Name" bind:value={name} />
     <TextInput type="url" label="Url" bind:value={url} validationResult={urlValidationResult} />
-    <Button onclick={createWebhook} disabled={!valid}>Create</Button>
+    <Dialog.Footer>
+      <Button variant="outline" onclick={() => (open = false)}>Cancel</Button>
+      <Button onclick={createWebhook} disabled={submitting || !valid}>Create</Button>
+    </Dialog.Footer>
   </Dialog.Content>
 </Dialog.Root>
diff --git a/src/routes/(app)/admin/webhooks/dialog-webhook-delete.svelte b/src/routes/(app)/admin/webhooks/dialog-webhook-delete.svelte
index 7360b7a1..2e5cef42 100644
--- a/src/routes/(app)/admin/webhooks/dialog-webhook-delete.svelte
+++ b/src/routes/(app)/admin/webhooks/dialog-webhook-delete.svelte
@@ -12,13 +12,13 @@
 
   let { open = $bindable<boolean>(), webhook }: Props = $props();
 
-  function onDeleteClicked() {
-    adminRemoveWebhook({ path: { id: webhook.id } })
-      .then(() => {
-        toast.success('Removed webhook');
-      })
-      .catch(handleApiError)
-      .finally(() => (open = false));
+  async function onDeleteClicked() {
+    try {
+      await adminRemoveWebhook({ path: { id: webhook.id } });
+      toast.success('Removed webhook');
+    } catch (error) {
+      await handleApiError(error);
+    }
   }
 </script>
 
diff --git a/src/routes/(app)/hangfire/+page.svelte b/src/routes/(app)/hangfire/+page.svelte
index 6a2727a3..073ea01e 100644
--- a/src/routes/(app)/hangfire/+page.svelte
+++ b/src/routes/(app)/hangfire/+page.svelte
@@ -1,13 +1,16 @@
 <script lang="ts">
-  import { Container } from '@openshock/svelte-core/components';
+  import { Container, EmptyState, PageHeader } from '@openshock/svelte-core/components';
+  import { Clock } from '@lucide/svelte';
   import { registerBreadcrumbs } from '#lib/state/breadcrumbs-state.svelte.js';
 
   registerBreadcrumbs(() => [{ label: 'Hangfire' }]);
 </script>
 
 <Container>
-  <h1 class="text-center text-8xl font-bold">
-    This is not supposed to be visible in prod<br />
-    Hangfire is supposed to be here
-  </h1>
+  <PageHeader title="Hangfire" subtitle="Background job dashboard for this instance." />
+  <EmptyState
+    icon={Clock}
+    title="Dashboard not embedded"
+    description="The Hangfire dashboard is served by the backend rather than from this page."
+  />
 </Container>
diff --git a/src/routes/(app)/home/+page.svelte b/src/routes/(app)/home/+page.svelte
index 21feb1f3..0a776713 100644
--- a/src/routes/(app)/home/+page.svelte
+++ b/src/routes/(app)/home/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Link, Router, Share2, Zap } from '@lucide/svelte';
   import { resolve } from '$app/paths';
-  import { Container } from '@openshock/svelte-core/components';
+  import { Container, PageHeader } from '@openshock/svelte-core/components';
   import * as Card from '@openshock/svelte-core/components/ui/card';
   import { Button } from '@openshock/svelte-core/components/ui/button';
   import { registerBreadcrumbs } from '#lib/state/breadcrumbs-state.svelte.js';
@@ -25,12 +25,11 @@
 
 <Container>
   <div class="flex w-full flex-col gap-6">
-    <div>
-      <h1 class="text-3xl font-bold">
-        Welcome back{userState.self ? `, ${userState.self.name}` : ''}
-      </h1>
-      <p class="text-muted-foreground mt-1">Here's an overview of your OpenShock setup.</p>
-    </div>
+    <PageHeader
+      title="Welcome back{userState.self ? `, ${userState.self.name}` : ''}"
+      subtitle="Here's an overview of your OpenShock setup."
+      class="mb-0"
+    />
 
     <!-- Stats cards -->
     <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
@@ -60,8 +59,8 @@
           <Card.Title class="text-sm font-medium">Hub Status</Card.Title>
           <div
             class={onlineHubCount > 0
-              ? 'size-2 rounded-full bg-green-500'
-              : 'size-2 rounded-full bg-red-500'}
+              ? 'bg-success size-2 rounded-full'
+              : 'bg-destructive size-2 rounded-full'}
           ></div>
         </Card.Header>
         <Card.Content>
@@ -100,7 +99,7 @@
           <Router class="size-5" />
           <div class="text-left">
             <div class="font-medium">Hubs</div>
-            <div class="text-muted-foreground text-xs">Manage your devices</div>
+            <div class="text-muted-foreground text-xs">Manage your hubs</div>
           </div>
         </Button>
         <Button
@@ -150,7 +149,7 @@
           <Card.Title>Add Your First Shocker</Card.Title>
           <Card.Description>
             You have {hubCount} hub{hubCount > 1 ? 's' : ''} set up. Add a shocker to start controlling
-            your devices.
+            it.
           </Card.Description>
         </Card.Header>
 
diff --git a/src/routes/(app)/hubs/+page.svelte b/src/routes/(app)/hubs/+page.svelte
index 3786dce1..1c3fc6ab 100644
--- a/src/routes/(app)/hubs/+page.svelte
+++ b/src/routes/(app)/hubs/+page.svelte
@@ -6,7 +6,12 @@
   import * as Table from '@openshock/svelte-core/components/ui/table';
   import { IsMobile } from '@openshock/svelte-core/hooks';
   import { registerBreadcrumbs } from '#lib/state/breadcrumbs-state.svelte.js';
-  import { onlineHubs, ownHubs, refreshOwnHubs } from '#lib/state/hubs-state.svelte.js';
+  import {
+    onlineHubs,
+    ownHubs,
+    ownHubsStatus,
+    refreshOwnHubs,
+  } from '#lib/state/hubs-state.svelte.js';
   import { onMount } from 'svelte';
   import type { Hub } from './columns';
   import DataTableActions from './data-table-actions.svelte';
@@ -15,7 +20,13 @@
 
   import * as Dialog from '@openshock/svelte-core/components/ui/dialog';
   import { TextInput } from '@openshock/svelte-core/components/input';
-  import { PageHeader, Container } from '@openshock/svelte-core/components';
+  import {
+    PageHeader,
+    Container,
+    EmptyState,
+    PageError,
+    PageLoading,
+  } from '@openshock/svelte-core/components';
 
   const isMobile = new IsMobile();
 
@@ -67,7 +78,7 @@
   props: DialogRenderProps<{ name: string }, { name: string } | undefined>
 )}
   <Dialog.Header>
-    <Dialog.Title>Create Hub</Dialog.Title>
+    <Dialog.Title>Create hub</Dialog.Title>
   </Dialog.Header>
   <TextInput label="Hub Name" placeholder="My Hub" bind:value={props.data.name} />
   <Button
@@ -79,18 +90,30 @@
 {/snippet}
 
 <Container class="w-full">
-  <PageHeader title="Hubs" subtitle="This is a list of all hubs you own">
+  <PageHeader title="Hubs" subtitle="Every hub registered to your account.">
     <Button onclick={openCreateHubDialog}>
       <Plus />
       Add Hub
     </Button>
-    <Button onclick={refreshOwnHubs}>
+    <Button variant="outline" onclick={refreshOwnHubs}>
       <RotateCcw />
       Refresh
     </Button>
   </PageHeader>
 
-  {#if isMobile.current}
+  {#if !ownHubsStatus.loaded && ownHubsStatus.failed}
+    <PageError message="Failed to load hubs." onRetry={refreshOwnHubs} />
+  {:else if !ownHubsStatus.loaded}
+    <PageLoading />
+  {:else if data.length === 0}
+    <EmptyState
+      icon={Router}
+      title="No hubs yet"
+      description="A hub is the device that relays commands to your shockers. Add one to get started."
+    >
+      <Button size="lg" onclick={openCreateHubDialog}><Plus />Add Hub</Button>
+    </EmptyState>
+  {:else if isMobile.current}
     <div class="grid w-full gap-6">
       {#each data as hub (hub.id)}
         <div class="flex items-center justify-between gap-4">
@@ -101,7 +124,7 @@
               {#if hub.is_online && hub.firmware_version}
                 <span>{hub.firmware_version}</span>
               {:else}
-                <span class="text-red-500">Offline</span>
+                <span class="text-destructive">Offline</span>
               {/if}
             </div>
           </div>
@@ -126,9 +149,9 @@
             <Table.Cell>{hub.name}</Table.Cell>
             <Table.Cell>
               {#if hub.is_online}
-                <span class="text-green-500">Online</span>
+                <span class="text-success">Online</span>
               {:else}
-                <span class="text-red-500">Offline</span>
+                <span class="text-destructive">Offline</span>
               {/if}
             </Table.Cell>
             <Table.Cell>{hub.firmware_version ?? '—'}</Table.Cell>
@@ -139,10 +162,6 @@
               <DataTableActions {hub} />
             </Table.Cell>
           </Table.Row>
-        {:else}
-          <Table.Row>
-            <Table.Cell colspan={5} class="h-24 text-center">No hubs found.</Table.Cell>
-          </Table.Row>
         {/each}
       </Table.Body>
     </Table.Root>
diff --git a/src/routes/(app)/hubs/[hubId=guid]/update/+page.svelte b/src/routes/(app)/hubs/[hubId=guid]/update/+page.svelte
index b6eeec61..0e9e7bc6 100644
--- a/src/routes/(app)/hubs/[hubId=guid]/update/+page.svelte
+++ b/src/routes/(app)/hubs/[hubId=guid]/update/+page.svelte
@@ -78,7 +78,7 @@
   import { cn, NumberToHexPadded } from '@openshock/svelte-core/utils';
   import { onMount } from 'svelte';
   import type { FirmwareChannel } from '#lib/api/firmwareCDN.js';
-  import { PageHeader } from '@openshock/svelte-core/components';
+  import { Container, PageHeader, PageLoading } from '@openshock/svelte-core/components';
 
   let hubLoaded = $state(false);
   let otaLogs = $state<OtaItem[]>([]);
@@ -204,11 +204,11 @@
 <Dialog.Root bind:open={() => confirmOpen, (o) => (confirmOpen = o)}>
   <Dialog.Content>
     <Dialog.Header>
-      <Dialog.Title>Confirm Firmware Update</Dialog.Title>
+      <Dialog.Title>Confirm firmware update</Dialog.Title>
       <Dialog.Description>
         Update <strong>{hubName}</strong> to version <strong>{version}</strong>?
         {#if channel !== 'stable'}
-          <p class="mt-2 text-yellow-500">
+          <p class="text-warning mt-2">
             This version may not be from the stable channel and could contain bugs.
           </p>
         {/if}
@@ -224,175 +224,180 @@
   </Dialog.Content>
 </Dialog.Root>
 
-<PageHeader title="Update {hubName}" subtitle="Manage firmware updates for this hub" />
-<div class="flex w-full flex-col gap-6">
-  {#if hub}
-    <!-- Status -->
-    <Card.Root>
-      <Card.Header>
-        <Card.Title class="text-base">Hub Status</Card.Title>
-      </Card.Header>
-      <Card.Content>
-        <div class="flex flex-wrap items-center gap-3">
-          {#if hub.isOnline}
-            <Badge variant="default" class="bg-green-600">Online</Badge>
-          {:else}
-            <Badge variant="destructive">Offline</Badge>
-          {/if}
-          {#if hub.firmwareVersion}
-            <span class="text-muted-foreground text-sm">
-              Firmware: <span class="font-mono">{hub.firmwareVersion}</span>
-            </span>
-          {/if}
-        </div>
-      </Card.Content>
-    </Card.Root>
-
-    <!-- OTA Result -->
-    {#if hub.otaResult}
-      <div
-        class={cn(
-          'flex items-start gap-3 rounded-lg border p-4',
-          hub.otaResult.success
-            ? 'border-green-500/50 bg-green-500/10'
-            : 'border-red-500/50 bg-red-500/10'
-        )}
-      >
-        {#if hub.otaResult.success}
-          <CircleCheck class="mt-0.5 size-5 shrink-0 text-green-500" />
-          <div class="flex flex-col gap-2">
-            <p class="font-medium text-green-500">{hub.otaResult.message}</p>
-            <div class="flex gap-2">
-              <Button variant="outline" size="sm" href="/hubs">Back to Hubs</Button>
-              <Button variant="outline" size="sm" onclick={resetResult}>Flash Again</Button>
-            </div>
-          </div>
-        {:else if hub.otaResult.message.includes('rolled back')}
-          <TriangleAlert class="mt-0.5 size-5 shrink-0 text-yellow-500" />
-          <div class="flex flex-col gap-2">
-            <p class="font-medium text-yellow-500">{hub.otaResult.message}</p>
-            <Button variant="outline" size="sm" onclick={resetResult}>Try Again</Button>
-          </div>
-        {:else}
-          <CircleX class="mt-0.5 size-5 shrink-0 text-red-500" />
-          <div class="flex flex-col gap-2">
-            <p class="font-medium text-red-500">{hub.otaResult.message}</p>
-            <Button variant="outline" size="sm" onclick={resetResult}>Try Again</Button>
-          </div>
-        {/if}
-      </div>
-    {/if}
-
-    <!-- Firmware Selector + Update Button -->
-    {#if !isUpdating && !hub.otaResult}
+<Container>
+  <PageHeader title="Update {hubName}" subtitle="Manage firmware updates for this hub." />
+  <div class="flex min-h-0 w-full min-w-0 flex-1 flex-col gap-6">
+    {#if hub}
+      <!-- Status -->
       <Card.Root>
         <Card.Header>
-          <Card.Title class="text-base">Firmware Update</Card.Title>
-          <Card.Description>Select a firmware channel and version to install.</Card.Description>
+          <Card.Title class="text-base">Hub Status</Card.Title>
         </Card.Header>
-        <Card.Content class="flex flex-col gap-4">
-          <FirmwareChannelSelector bind:channel bind:version disabled={!hub.isOnline} />
-
-          <Button
-            class="w-fit cursor-pointer"
-            onclick={() => (confirmOpen = true)}
-            disabled={getConnection() === null || hub === null || version === null || !hub.isOnline}
-          >
-            <CloudDownload class="size-4" />
-            Update to {version ?? '...'}
-          </Button>
-
-          {#if !hub.isOnline}
-            <p class="text-muted-foreground text-sm">Hub must be online to start an update.</p>
-          {/if}
+        <Card.Content>
+          <div class="flex flex-wrap items-center gap-3">
+            {#if hub.isOnline}
+              <Badge variant="default" class="bg-success">Online</Badge>
+            {:else}
+              <Badge variant="destructive">Offline</Badge>
+            {/if}
+            {#if hub.firmwareVersion}
+              <span class="text-muted-foreground text-sm">
+                Firmware: <span class="font-mono">{hub.firmwareVersion}</span>
+              </span>
+            {/if}
+          </div>
         </Card.Content>
       </Card.Root>
-    {/if}
 
-    <!-- Progress -->
-    {#if isUpdating}
+      <!-- OTA Result -->
+      {#if hub.otaResult}
+        <div
+          class={cn(
+            'flex items-start gap-3 rounded-lg border p-4',
+            hub.otaResult.success
+              ? 'border-success/50 bg-success/10'
+              : 'border-destructive/50 bg-destructive/10'
+          )}
+        >
+          {#if hub.otaResult.success}
+            <CircleCheck class="text-success mt-0.5 size-5 shrink-0" />
+            <div class="flex flex-col gap-2">
+              <p class="text-success font-medium">{hub.otaResult.message}</p>
+              <div class="flex gap-2">
+                <Button variant="outline" size="sm" href="/hubs">Back to Hubs</Button>
+                <Button variant="outline" size="sm" onclick={resetResult}>Flash Again</Button>
+              </div>
+            </div>
+          {:else if hub.otaResult.message.includes('rolled back')}
+            <TriangleAlert class="text-warning mt-0.5 size-5 shrink-0" />
+            <div class="flex flex-col gap-2">
+              <p class="text-warning font-medium">{hub.otaResult.message}</p>
+              <Button variant="outline" size="sm" onclick={resetResult}>Try Again</Button>
+            </div>
+          {:else}
+            <CircleX class="text-destructive mt-0.5 size-5 shrink-0" />
+            <div class="flex flex-col gap-2">
+              <p class="text-destructive font-medium">{hub.otaResult.message}</p>
+              <Button variant="outline" size="sm" onclick={resetResult}>Try Again</Button>
+            </div>
+          {/if}
+        </div>
+      {/if}
+
+      <!-- Firmware Selector + Update Button -->
+      {#if !isUpdating && !hub.otaResult}
+        <Card.Root>
+          <Card.Header>
+            <Card.Title class="text-base">Firmware Update</Card.Title>
+            <Card.Description>Select a firmware channel and version to install.</Card.Description>
+          </Card.Header>
+          <Card.Content class="flex flex-col gap-4">
+            <FirmwareChannelSelector bind:channel bind:version disabled={!hub.isOnline} />
+
+            <Button
+              class="w-fit cursor-pointer"
+              onclick={() => (confirmOpen = true)}
+              disabled={getConnection() === null ||
+                hub === null ||
+                version === null ||
+                !hub.isOnline}
+            >
+              <CloudDownload class="size-4" />
+              Update to {version ?? '...'}
+            </Button>
+
+            {#if !hub.isOnline}
+              <p class="text-muted-foreground text-sm">Hub must be online to start an update.</p>
+            {/if}
+          </Card.Content>
+        </Card.Root>
+      {/if}
+
+      <!-- Progress -->
+      {#if isUpdating}
+        <Card.Root>
+          <Card.Header>
+            <Card.Title class="text-base">
+              Updating to {hub.otaInstall?.version}...
+            </Card.Title>
+          </Card.Header>
+          <Card.Content class="flex flex-col gap-4">
+            <div class="flex flex-col gap-3">
+              <div class="grid grid-cols-[5rem_1fr] items-center gap-2">
+                <span class="text-muted-foreground text-sm font-medium">Total</span>
+                <Progress value={totalProgress} />
+              </div>
+              <div class="grid grid-cols-[5rem_1fr] items-center gap-2">
+                <span class="text-muted-foreground text-sm font-medium">Task</span>
+                <Progress value={taskProgress} />
+              </div>
+            </div>
+            <p class="text-muted-foreground text-sm">{currentTaskLabel}</p>
+          </Card.Content>
+        </Card.Root>
+      {/if}
+
+      <!-- Logs -->
       <Card.Root>
         <Card.Header>
-          <Card.Title class="text-base">
-            Updating to {hub.otaInstall?.version}...
+          <Card.Title class="flex items-center justify-between text-base">
+            Update History
+            <Button
+              variant="outline"
+              size="sm"
+              onclick={() => fetchOtaLogs(page.params.hubId)}
+              disabled={isLoading}
+            >
+              <RotateCcw class={cn('size-4', isLoading && 'animate-spin')} />
+              Refresh
+            </Button>
           </Card.Title>
         </Card.Header>
-        <Card.Content class="flex flex-col gap-4">
-          <div class="flex flex-col gap-3">
-            <div class="grid grid-cols-[5rem_1fr] items-center gap-2">
-              <span class="text-muted-foreground text-sm font-medium">Total</span>
-              <Progress value={totalProgress} />
-            </div>
-            <div class="grid grid-cols-[5rem_1fr] items-center gap-2">
-              <span class="text-muted-foreground text-sm font-medium">Task</span>
-              <Progress value={taskProgress} />
-            </div>
-          </div>
-          <p class="text-muted-foreground text-sm">{currentTaskLabel}</p>
+        <Card.Content>
+          {#if otaLogs.length === 0}
+            <p class="text-muted-foreground py-4 text-center text-sm">
+              No update history found for this hub.
+            </p>
+          {:else}
+            <Table.Root class="w-full">
+              <Table.Header>
+                <Table.Row>
+                  <Table.Head>ID</Table.Head>
+                  <Table.Head>Started</Table.Head>
+                  <Table.Head>Status</Table.Head>
+                  <Table.Head>Version</Table.Head>
+                  <Table.Head>Message</Table.Head>
+                </Table.Row>
+              </Table.Header>
+              <Table.Body>
+                {#each otaLogs as otaLog (otaLog.id)}
+                  <Table.Row>
+                    <Table.Cell class="text-muted-foreground font-mono text-xs">
+                      {NumberToHexPadded(otaLog.id, 8)}
+                    </Table.Cell>
+                    <Table.Cell class="text-sm" title={otaLog.startedAt.toLocaleString()}>
+                      {formatRelativeTime(otaLog.startedAt)}
+                    </Table.Cell>
+                    <Table.Cell>
+                      <Badge variant={getStatusBadgeVariant(otaLog.status)}>
+                        {otaLog.status}
+                      </Badge>
+                    </Table.Cell>
+                    <Table.Cell class="font-mono text-sm">{otaLog.version}</Table.Cell>
+                    <Table.Cell class="text-muted-foreground max-w-xs truncate text-sm">
+                      {otaLog.message ?? '-'}
+                    </Table.Cell>
+                  </Table.Row>
+                {/each}
+              </Table.Body>
+            </Table.Root>
+          {/if}
         </Card.Content>
       </Card.Root>
+    {:else if isLoading}
+      <PageLoading label="Loading hub information..." />
+    {:else}
+      <p class="text-muted-foreground">Hub not found.</p>
     {/if}
-
-    <!-- Logs -->
-    <Card.Root>
-      <Card.Header>
-        <Card.Title class="flex items-center justify-between text-base">
-          Update History
-          <Button
-            variant="outline"
-            size="sm"
-            onclick={() => fetchOtaLogs(page.params.hubId)}
-            disabled={isLoading}
-          >
-            <RotateCcw class={cn('size-4', isLoading && 'animate-spin')} />
-            Refresh
-          </Button>
-        </Card.Title>
-      </Card.Header>
-      <Card.Content>
-        {#if otaLogs.length === 0}
-          <p class="text-muted-foreground py-4 text-center text-sm">
-            No update history found for this hub.
-          </p>
-        {:else}
-          <Table.Root class="w-full">
-            <Table.Header>
-              <Table.Row>
-                <Table.Head>ID</Table.Head>
-                <Table.Head>Started</Table.Head>
-                <Table.Head>Status</Table.Head>
-                <Table.Head>Version</Table.Head>
-                <Table.Head>Message</Table.Head>
-              </Table.Row>
-            </Table.Header>
-            <Table.Body>
-              {#each otaLogs as otaLog (otaLog.id)}
-                <Table.Row>
-                  <Table.Cell class="text-muted-foreground font-mono text-xs">
-                    {NumberToHexPadded(otaLog.id, 8)}
-                  </Table.Cell>
-                  <Table.Cell class="text-sm" title={otaLog.startedAt.toLocaleString()}>
-                    {formatRelativeTime(otaLog.startedAt)}
-                  </Table.Cell>
-                  <Table.Cell>
-                    <Badge variant={getStatusBadgeVariant(otaLog.status)}>
-                      {otaLog.status}
-                    </Badge>
-                  </Table.Cell>
-                  <Table.Cell class="font-mono text-sm">{otaLog.version}</Table.Cell>
-                  <Table.Cell class="text-muted-foreground max-w-xs truncate text-sm">
-                    {otaLog.message ?? '-'}
-                  </Table.Cell>
-                </Table.Row>
-              {/each}
-            </Table.Body>
-          </Table.Root>
-        {/if}
-      </Card.Content>
-    </Card.Root>
-  {:else if isLoading}
-    <p class="text-muted-foreground">Loading hub information...</p>
-  {:else}
-    <p class="text-muted-foreground">Hub not found.</p>
-  {/if}
-</div>
+  </div>
+</Container>
diff --git a/src/routes/(app)/hubs/data-table-actions.svelte b/src/routes/(app)/hubs/data-table-actions.svelte
index 17f8d322..ab3f58dc 100644
--- a/src/routes/(app)/hubs/data-table-actions.svelte
+++ b/src/routes/(app)/hubs/data-table-actions.svelte
@@ -35,6 +35,8 @@
   } from '@lucide/svelte';
   import type { Hub } from './columns';
   import { resolve } from '$app/paths';
+  import { HubConnectionState, type HubConnection } from '@microsoft/signalr';
+  import { toast } from 'svelte-sonner';
 
   interface Props {
     hub: Hub;
@@ -44,6 +46,48 @@
 
   const copyId = () => copyToClipboard(hub.id, 'ID copied to clipboard');
 
+  async function sendHubCommand(send: (connection: HubConnection) => Promise<void>) {
+    const connection = getConnection();
+    if (connection?.state !== HubConnectionState.Connected) {
+      toast.error('Not connected to the server', { description: 'Try again in a moment.' });
+      return;
+    }
+    try {
+      await send(connection);
+    } catch (error) {
+      await handleApiError(error);
+    }
+  }
+
+  async function confirmHubCommand(
+    title: string,
+    desc: string,
+    confirmButtonText: string,
+    send: (connection: HubConnection) => Promise<void>
+  ) {
+    const result = await dialog.confirm({ title, desc, confirmButtonText });
+    if (!result.confirmed) return;
+    await sendHubCommand(send);
+  }
+
+  const rebootHub = () =>
+    confirmHubCommand(
+      `Reboot ${hub.name}?`,
+      'The hub will disconnect and restart. Any shockers paired to it stop responding until it comes back online.',
+      'Reboot',
+      (connection) => serializeRebootMessage(connection, hub.id)
+    );
+
+  const setCaptivePortal = (enabled: boolean) =>
+    confirmHubCommand(
+      enabled ? `Enable Wi-Fi hotspot on ${hub.name}?` : `Disable Wi-Fi hotspot on ${hub.name}?`,
+      enabled
+        ? 'The hub broadcasts its own setup network. It stays reachable on your Wi-Fi, but the hotspot is open to anyone in range until you turn it off.'
+        : 'The setup hotspot shuts down. If the hub is not already on your Wi-Fi you will need physical access to set it up again.',
+      enabled ? 'Enable' : 'Disable',
+      (connection) => serializeCaptivePortalMessage(connection, hub.id, enabled)
+    );
+
   async function editHub(name: string, close: () => void) {
     try {
       await devicesEditDevice({ path: { deviceId: hub.id }, body: { name } });
@@ -173,7 +217,7 @@
   </Dialog.Header>
   {#if !props.data.loading}
     {#if consumed}
-      <div class="flex items-center gap-2 text-green-500">
+      <div class="text-success flex items-center gap-2">
         <CircleCheck class="size-5" />
         <span class="text-sm font-medium">Pairing complete</span>
       </div>
@@ -234,24 +278,15 @@
       ><RefreshCw class="size-4" />Update</DropdownMenu.Item
     >
 
-    <DropdownMenu.Item
-      class="cursor-pointer"
-      onclick={() => serializeRebootMessage(getConnection(), hub.id)}
-    >
+    <DropdownMenu.Item class="cursor-pointer" onclick={rebootHub}>
       <RotateCcw class="size-4" />
       Reboot
     </DropdownMenu.Item>
-    <DropdownMenu.Item
-      class="cursor-pointer"
-      onclick={() => serializeCaptivePortalMessage(getConnection(), hub.id, true)}
-    >
+    <DropdownMenu.Item class="cursor-pointer" onclick={() => setCaptivePortal(true)}>
       <Wifi class="size-4" />
       Enable Wi-Fi hotspot
     </DropdownMenu.Item>
-    <DropdownMenu.Item
-      class="cursor-pointer"
-      onclick={() => serializeCaptivePortalMessage(getConnection(), hub.id, false)}
-    >
+    <DropdownMenu.Item class="cursor-pointer" onclick={() => setCaptivePortal(false)}>
       <WifiOff class="size-4" />
       Disable Wi-Fi hotspot
     </DropdownMenu.Item>
@@ -274,13 +309,14 @@
     </DropdownMenu.Item>
     <DropdownMenu.Separator />
     <DropdownMenu.Item
-      class="cursor-pointer text-red-500"
-      onclick={() => serializeEmergencyStopMessage(getConnection(), hub.id)}
+      class="text-destructive cursor-pointer"
+      onclick={() =>
+        sendHubCommand((connection) => serializeEmergencyStopMessage(connection, hub.id))}
     >
       <OctagonX class="size-4" />
       Emergency Stop
     </DropdownMenu.Item>
-    <DropdownMenu.Item class="cursor-pointer text-red-500" onclick={openDeleteDialog}>
+    <DropdownMenu.Item class="text-destructive cursor-pointer" onclick={openDeleteDialog}>
       <Trash2 class="size-4" />
       Delete
     </DropdownMenu.Item>
diff --git a/src/routes/(app)/profile/+page.svelte b/src/routes/(app)/profile/+page.svelte
index 57a1486d..5b4303d4 100644
--- a/src/routes/(app)/profile/+page.svelte
+++ b/src/routes/(app)/profile/+page.svelte
@@ -1,15 +1,16 @@
 <script lang="ts">
-  import { Container } from '@openshock/svelte-core/components';
+  import { Container, EmptyState, PageHeader } from '@openshock/svelte-core/components';
+  import { UserCircle } from '@lucide/svelte';
   import { registerBreadcrumbs } from '#lib/state/breadcrumbs-state.svelte.js';
 
   registerBreadcrumbs(() => [{ label: 'Profile' }]);
 </script>
 
 <Container>
-  <h1 class="text-3xl font-bold">Profile</h1>
-  <div
-    class="border-border bg-card flex w-full flex-col items-center justify-center gap-3 rounded-lg border border-dashed py-20"
-  >
-    <p class="text-muted-foreground text-sm">Your profile page is coming soon.</p>
-  </div>
+  <PageHeader title="Profile" />
+  <EmptyState
+    icon={UserCircle}
+    title="Profile is coming soon"
+    description="Your public profile is not available yet. Account details live under Settings."
+  />
 </Container>
diff --git a/src/routes/(app)/settings/account/+page.svelte b/src/routes/(app)/settings/account/+page.svelte
index 52643884..7055f52a 100644
--- a/src/routes/(app)/settings/account/+page.svelte
+++ b/src/routes/(app)/settings/account/+page.svelte
@@ -4,7 +4,7 @@
   import Mail from '@lucide/svelte/icons/mail';
   import User from '@lucide/svelte/icons/user';
   import { PUBLIC_SIGNOZ_LOGS_ENABLED } from '$app/env/public';
-  import { Container } from '@openshock/svelte-core/components';
+  import { Container, PageHeader, PageLoading } from '@openshock/svelte-core/components';
   import { Button } from '@openshock/svelte-core/components/ui/button';
   import { ToggleGroup, ToggleGroupItem } from '@openshock/svelte-core/components/ui/toggle-group';
   import {
@@ -64,11 +64,10 @@
 
 {#if account}
   <Container>
+    <PageHeader title="Account Settings" subtitle="Your sign-in details and account actions." />
     <div
       class="bg-card border-border flex w-full flex-col items-start gap-y-6 rounded-lg border p-6"
     >
-      <h1 class="text-xl font-bold">Account Settings</h1>
-
       <div class="flex w-full items-center gap-2">
         <div class="grow">
           <div class="flex items-center gap-2 font-medium">
@@ -78,7 +77,9 @@
           <div class="text-muted-foreground">{account.name}</div>
         </div>
 
-        <Button type="button" onclick={() => (usernameDialogOpen = true)}>Change Username</Button>
+        <Button type="button" variant="outline" onclick={() => (usernameDialogOpen = true)}>
+          Change Username
+        </Button>
       </div>
 
       <div class="flex w-full items-center gap-2">
@@ -91,6 +92,7 @@
         </div>
         <Button
           type="button"
+          variant="outline"
           disabled={isOAuthOnly}
           title={isOAuthOnly ? 'Not available for OAuth-only accounts' : undefined}
           onclick={() => (emailDialogOpen = true)}>Change Email</Button
@@ -111,6 +113,7 @@
         </div>
         <Button
           type="button"
+          variant="outline"
           disabled={isOAuthOnly}
           title={isOAuthOnly ? 'Not available for OAuth-only accounts' : undefined}
           onclick={() => (passwordDialogOpen = true)}>Change Password</Button
@@ -155,5 +158,5 @@
     </div>
   </Container>
 {:else}
-  Loading...
+  <PageLoading />
 {/if}
diff --git a/src/routes/(app)/settings/account/DangerZone.svelte b/src/routes/(app)/settings/account/DangerZone.svelte
index 27e7cc3a..e1907123 100644
--- a/src/routes/(app)/settings/account/DangerZone.svelte
+++ b/src/routes/(app)/settings/account/DangerZone.svelte
@@ -25,7 +25,7 @@
 <Dialog.Root bind:open={() => deactivateDialogOpen, (o) => (deactivateDialogOpen = o)}>
   <Dialog.Content>
     <Dialog.Header>
-      <Dialog.Title>Deactivate Account</Dialog.Title>
+      <Dialog.Title>Deactivate account</Dialog.Title>
       <Dialog.Description>Are you sure you want to deactivate your account?</Dialog.Description>
     </Dialog.Header>
     <Button variant="destructive" class="w-full" onclick={deactivateAccount}>
@@ -35,9 +35,9 @@
 </Dialog.Root>
 
 <div
-  class="flex w-full flex-col items-start gap-y-4 rounded-lg border border-red-600/60 bg-red-950/10 p-4"
+  class="border-destructive/60 bg-destructive/10 flex w-full flex-col items-start gap-y-4 rounded-lg border p-4"
 >
-  <h2 class="text-base font-semibold text-red-500">Danger Zone</h2>
+  <h2 class="text-destructive text-base font-semibold">Danger Zone</h2>
   <Button variant="destructive" class="w-full" onclick={() => (deactivateDialogOpen = true)}>
     Deactivate Account
   </Button>
diff --git a/src/routes/(app)/settings/account/dialog-email-change.svelte b/src/routes/(app)/settings/account/dialog-email-change.svelte
index 1562ca7c..832fea2f 100644
--- a/src/routes/(app)/settings/account/dialog-email-change.svelte
+++ b/src/routes/(app)/settings/account/dialog-email-change.svelte
@@ -54,7 +54,7 @@
 <Dialog.Root bind:open>
   <Dialog.Content>
     <Dialog.Header>
-      <Dialog.Title>Change Email</Dialog.Title>
+      <Dialog.Title>Change email</Dialog.Title>
       <Dialog.Description>
         Enter your new email address and confirm with your current password.
       </Dialog.Description>
@@ -76,12 +76,18 @@
         bind:value={currentPassword}
         Icon={KeyRound}
       />
-      <Button
-        type="submit"
-        disabled={!emailValid || email === account.email || currentPassword.length === 0 || loading}
-      >
-        Change Email
-      </Button>
+      <Dialog.Footer>
+        <Button type="button" variant="outline" onclick={() => (open = false)}>Cancel</Button>
+        <Button
+          type="submit"
+          disabled={!emailValid ||
+            email === account.email ||
+            currentPassword.length === 0 ||
+            loading}
+        >
+          Change Email
+        </Button>
+      </Dialog.Footer>
     </form>
   </Dialog.Content>
 </Dialog.Root>
diff --git a/src/routes/(app)/settings/account/dialog-password-change.svelte b/src/routes/(app)/settings/account/dialog-password-change.svelte
index a14571d2..d4355f80 100644
--- a/src/routes/(app)/settings/account/dialog-password-change.svelte
+++ b/src/routes/(app)/settings/account/dialog-password-change.svelte
@@ -61,7 +61,7 @@
 <Dialog.Root bind:open>
   <Dialog.Content>
     <Dialog.Header>
-      <Dialog.Title>Change Password</Dialog.Title>
+      <Dialog.Title>Change password</Dialog.Title>
       <Dialog.Description>Enter your current password and choose a new one.</Dialog.Description>
     </Dialog.Header>
 
@@ -94,7 +94,10 @@
         validate={passwordConfirmValid}
       />
 
-      <Button type="submit" disabled={!canSubmitPassword}>Change Password</Button>
+      <Dialog.Footer>
+        <Button type="button" variant="outline" onclick={() => (open = false)}>Cancel</Button>
+        <Button type="submit" disabled={!canSubmitPassword}>Change Password</Button>
+      </Dialog.Footer>
     </form>
   </Dialog.Content>
 </Dialog.Root>
diff --git a/src/routes/(app)/settings/account/dialog-username-change.svelte b/src/routes/(app)/settings/account/dialog-username-change.svelte
index 3e4d8d9c..8f4a54fe 100644
--- a/src/routes/(app)/settings/account/dialog-username-change.svelte
+++ b/src/routes/(app)/settings/account/dialog-username-change.svelte
@@ -58,7 +58,7 @@
 <Dialog.Root bind:open>
   <Dialog.Content>
     <Dialog.Header>
-      <Dialog.Title>Change Username</Dialog.Title>
+      <Dialog.Title>Change username</Dialog.Title>
       <Dialog.Description>Enter a new username.</Dialog.Description>
     </Dialog.Header>
 
@@ -71,9 +71,12 @@
         bind:valid={usernameValid}
         Icon={User}
       />
-      <Button type="submit" disabled={!usernameValid || username === account.name || loading}>
-        Change Username
-      </Button>
+      <Dialog.Footer>
+        <Button type="button" variant="outline" onclick={() => (open = false)}>Cancel</Button>
+        <Button type="submit" disabled={!usernameValid || username === account.name || loading}>
+          Change Username
+        </Button>
+      </Dialog.Footer>
     </form>
   </Dialog.Content>
 </Dialog.Root>
diff --git a/src/routes/(app)/settings/api-tokens/+page.svelte b/src/routes/(app)/settings/api-tokens/+page.svelte
index 8ceb6113..b5940642 100644
--- a/src/routes/(app)/settings/api-tokens/+page.svelte
+++ b/src/routes/(app)/settings/api-tokens/+page.svelte
@@ -5,8 +5,13 @@
   import KeyRound from '@lucide/svelte/icons/key-round';
   import Plus from '@lucide/svelte/icons/plus';
   import RotateCcw from '@lucide/svelte/icons/rotate-ccw';
-  import { Container, EmptyState } from '@openshock/svelte-core/components';
-  import { Spinner } from '@openshock/svelte-core/components/ui/spinner';
+  import {
+    Container,
+    EmptyState,
+    PageError,
+    PageHeader,
+    PageLoading,
+  } 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.js';
@@ -44,16 +49,13 @@
 </script>
 
 <Container>
-  <Card.Header class="w-full">
-    <Card.Title class="flex items-center justify-between space-x-2 text-3xl">
-      API Tokens
-      <div>
-        <Button href={resolve('settings/api-tokens/new')}><Plus />Generate Token</Button>
-        <Button onclick={refresh}><RotateCcw />Refresh</Button>
-      </div>
-    </Card.Title>
-    <Card.Description>API Tokens are used to authenticate with the OpenShock API</Card.Description>
-  </Card.Header>
+  <PageHeader
+    title="API Tokens"
+    subtitle="API Tokens are used to authenticate with the OpenShock API."
+  >
+    <Button href={resolve('settings/api-tokens/new')}><Plus />Generate Token</Button>
+    <Button variant="outline" onclick={refresh}><RotateCcw />Refresh</Button>
+  </PageHeader>
   <Card.Content class="flex w-full flex-col space-y-4">
     <svelte:boundary onerror={(error: unknown) => handleApiError(error)}>
       {#if tokens.length === 0}
@@ -88,16 +90,11 @@
       {/if}
 
       {#snippet pending()}
-        <div class="flex h-64 w-full items-center justify-center">
-          <Spinner class="size-8 text-gray-600 dark:text-gray-300" />
-        </div>
+        <PageLoading />
       {/snippet}
 
       {#snippet failed(_error: unknown, reset: () => void)}
-        <div class="flex w-full flex-col items-center gap-3 py-12">
-          <p class="text-destructive text-sm">Failed to load API tokens.</p>
-          <Button variant="outline" onclick={reset}>Try again</Button>
-        </div>
+        <PageError message="Failed to load API tokens." onRetry={reset} />
       {/snippet}
     </svelte:boundary>
   </Card.Content>
diff --git a/src/routes/(app)/settings/api-tokens/dialog-token-edit.svelte b/src/routes/(app)/settings/api-tokens/dialog-token-edit.svelte
index 84771b49..ab870e5e 100644
--- a/src/routes/(app)/settings/api-tokens/dialog-token-edit.svelte
+++ b/src/routes/(app)/settings/api-tokens/dialog-token-edit.svelte
@@ -16,7 +16,7 @@
     token: TokenResponseV2;
   }
 
-  let { token, resolve }: Props = $props();
+  let { token, resolve, close }: Props = $props();
 
   // svelte-ignore state_referenced_locally
   let name = $state(token.name);
@@ -28,7 +28,8 @@
   );
   let submitting = $state(false);
 
-  async function saveChanges() {
+  async function saveChanges(event: SubmitEvent) {
+    event.preventDefault();
     submitting = true;
     try {
       await tokensEditTokenV2({
@@ -78,52 +79,57 @@
   let nameValidationResult = $derived(nameValidation(name));
 </script>
 
-<div class="max-h-[80vh] space-y-4 overflow-y-auto pr-1">
-  <Dialog.Header>
-    <Dialog.Title>Edit API Token</Dialog.Title>
-    <Dialog.Description></Dialog.Description>
-  </Dialog.Header>
-  <form class="modal-form border-surface-500 rounded-container-token space-y-4">
-    <TextInput
-      label="Token Name"
-      placeholder="Token name..."
-      bind:value={name}
-      validationResult={nameValidationResult}
-    />
+<div class="flex max-h-[85dvh] flex-col gap-4">
+  <div class="min-h-0 space-y-4 overflow-y-auto pr-1">
+    <Dialog.Header>
+      <Dialog.Title>Edit API token</Dialog.Title>
+      <Dialog.Description></Dialog.Description>
+    </Dialog.Header>
+    <form class="space-y-4" id="edit-api-token" onsubmit={saveChanges}>
+      <TextInput
+        label="Token Name"
+        placeholder="Token name..."
+        bind:value={name}
+        validationResult={nameValidationResult}
+      />
 
-    <div class="mt-4">
-      <h2>Permissions</h2>
-      <div class="border-surface-500 mt-3 flex flex-col space-y-4 rounded-md border p-4">
-        {#each permissionCategories as permission (permission.name)}
-          <span class="capitalize">{permission.name}</span>
-          {#each permission.perms as perm (perm.key)}
-            <label class="mt-0! ml-4">
-              <input
-                type="checkbox"
-                class="checkbox capitalize"
-                value={perm.key}
-                bind:group={permissions}
-              />
-              {perm.name}
-            </label>
+      <div class="mt-4">
+        <h2>Permissions</h2>
+        <div class="mt-3 flex flex-col space-y-4 rounded-md border p-4">
+          {#each permissionCategories as permission (permission.name)}
+            <span class="capitalize">{permission.name}</span>
+            {#each permission.perms as perm (perm.key)}
+              <label class="mt-0! ml-4">
+                <input
+                  type="checkbox"
+                  class="checkbox capitalize"
+                  value={perm.key}
+                  bind:group={permissions}
+                />
+                {perm.name}
+              </label>
+            {/each}
           {/each}
-        {/each}
+        </div>
       </div>
-    </div>
 
-    <div class="mt-4">
-      <h2>Shocker Control</h2>
-      <div class="mt-3">
-        <ShockerControlSettingsEditor bind:settings={shockerControl} />
+      <div class="mt-4">
+        <h2>Shocker Control</h2>
+        <div class="mt-3">
+          <ShockerControlSettingsEditor bind:settings={shockerControl} />
+        </div>
       </div>
-    </div>
-  </form>
+    </form>
+  </div>
 
-  <Button
-    variant="default"
-    onclick={saveChanges}
-    disabled={submitting || !nameValidationResult.valid}
-  >
-    Save Changes
-  </Button>
+  <Dialog.Footer>
+    <Button variant="outline" onclick={close} disabled={submitting}>Cancel</Button>
+    <Button
+      type="submit"
+      form="edit-api-token"
+      disabled={submitting || !nameValidationResult.valid}
+    >
+      Save Changes
+    </Button>
+  </Dialog.Footer>
 </div>
diff --git a/src/routes/(app)/settings/api-tokens/new/+page.svelte b/src/routes/(app)/settings/api-tokens/new/+page.svelte
index f22def0f..84514670 100644
--- a/src/routes/(app)/settings/api-tokens/new/+page.svelte
+++ b/src/routes/(app)/settings/api-tokens/new/+page.svelte
@@ -197,16 +197,16 @@
   <Card.Root class="w-lg max-w-2xl shrink-0">
     {#if parseError}
       <Card.Header>
-        <Card.Title class="text-2xl">API Token Request</Card.Title>
+        <Card.Title class="text-2xl"><h1>API Token Request</h1></Card.Title>
       </Card.Header>
       <Card.Content>
-        <span class="text-red-500">{parseError}</span>
+        <span class="text-destructive">{parseError}</span>
       </Card.Content>
     {:else if tokenSecret && isExternal}
       <Card.Header>
         <Card.Title class="flex items-center gap-2 text-2xl">
-          <CircleCheck class="text-green-500" />
-          Access granted
+          <CircleCheck class="text-success" />
+          <h1>Access granted</h1>
         </Card.Title>
         <Card.Description>
           The token has been created and shared with the application. Redirecting you back to<br />
@@ -225,8 +225,8 @@
     {:else if tokenSecret}
       <Card.Header>
         <Card.Title class="flex items-center gap-2 text-2xl">
-          <CircleCheck class="text-green-500" />
-          API Token Generated
+          <CircleCheck class="text-success" />
+          <h1>API Token Generated</h1>
         </Card.Title>
         <Card.Description>
           Please copy your API Token now, you will not be able to view it again later!
@@ -246,7 +246,7 @@
     {:else}
       <Card.Header>
         <Card.Title class="text-2xl">
-          {isExternal ? 'API Token Request' : 'New API Token'}
+          <h1>{isExternal ? 'API Token Request' : 'New API Token'}</h1>
         </Card.Title>
         <Card.Description>
           {#if isExternal}
@@ -276,7 +276,7 @@
 
         <div>
           <h2>Permissions</h2>
-          <div class="border-surface-500 mt-3 flex flex-col space-y-4 rounded-md border p-4">
+          <div class="mt-3 flex flex-col space-y-4 rounded-md border p-4">
             {#each permissionCategories as permission (permission.name)}
               <span>{capitalizeFirstLetter(permission.name)}</span>
               {#each permission.perms as perm (perm.key)}
diff --git a/src/routes/(app)/settings/api-tokens/shocker-control-settings.svelte b/src/routes/(app)/settings/api-tokens/shocker-control-settings.svelte
index 2f5efd39..712feb06 100644
--- a/src/routes/(app)/settings/api-tokens/shocker-control-settings.svelte
+++ b/src/routes/(app)/settings/api-tokens/shocker-control-settings.svelte
@@ -57,7 +57,7 @@
   {/each}
 {/snippet}
 
-<div class="border-surface-500 flex flex-col gap-5 rounded-md border p-4">
+<div class="flex flex-col gap-5 rounded-md border p-4">
   <div class="flex items-center justify-between gap-2">
     <div class="flex flex-col">
       <Label class="text-sm font-medium">Paused</Label>
diff --git a/src/routes/(app)/settings/api-tokens/token-actions.svelte b/src/routes/(app)/settings/api-tokens/token-actions.svelte
index daaed58a..4bd9cf52 100644
--- a/src/routes/(app)/settings/api-tokens/token-actions.svelte
+++ b/src/routes/(app)/settings/api-tokens/token-actions.svelte
@@ -105,7 +105,7 @@
         Copy ID
       </DropdownMenu.Item>
       <DropdownMenu.Separator />
-      <DropdownMenu.Item class="cursor-pointer text-red-500" onclick={openDeleteDialog}>
+      <DropdownMenu.Item class="text-destructive cursor-pointer" onclick={openDeleteDialog}>
         <Trash2 class="size-4" />
         Delete
       </DropdownMenu.Item>
diff --git a/src/routes/(app)/settings/connections/+page.svelte b/src/routes/(app)/settings/connections/+page.svelte
index 1834496e..7e16545e 100644
--- a/src/routes/(app)/settings/connections/+page.svelte
+++ b/src/routes/(app)/settings/connections/+page.svelte
@@ -6,7 +6,7 @@
   import Unlink from '@lucide/svelte/icons/unlink';
   import { page } from '$app/state';
   import { GetOAuthAuthorizeUrl } from '#lib/api/next/oauth.js';
-  import { Container, EmptyState } from '@openshock/svelte-core/components';
+  import { Container, EmptyState, PageError, PageHeader } 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 * as Dropdown from '@openshock/svelte-core/components/ui/dropdown-menu';
@@ -83,20 +83,15 @@
 </script>
 
 <Container>
-  <Card.Header class="w-full">
-    <Card.Title class="flex items-center justify-between text-3xl">
-      OAuth Connections
-      <div class="flex items-center gap-2">
-        <Button variant="ghost" onclick={refresh} disabled={refreshing} aria-busy={refreshing}>
-          <RotateCcw class="mr-2 size-4" />
-          {refreshing ? 'Refreshing…' : 'Refresh'}
-        </Button>
-      </div>
-    </Card.Title>
-    <Card.Description>
-      Link or unlink third-party accounts to sign in faster and keep your profile in sync.
-    </Card.Description>
-  </Card.Header>
+  <PageHeader
+    title="OAuth Connections"
+    subtitle="Link or unlink third-party accounts to sign in faster and keep your profile in sync."
+  >
+    <Button variant="outline" onclick={refresh} disabled={refreshing} aria-busy={refreshing}>
+      <RotateCcw class="size-4" />
+      {refreshing ? 'Refreshing…' : 'Refresh'}
+    </Button>
+  </PageHeader>
 
   <Card.Content class="flex w-full flex-1 flex-col space-y-6">
     <svelte:boundary onerror={(error: unknown) => handleApiError(error)}>
@@ -152,7 +147,7 @@
                   <Button
                     variant="ghost"
                     onclick={() => confirmDisconnect(p)}
-                    class="text-red-600 hover:text-red-700"
+                    class="text-destructive hover:text-destructive"
                   >
                     <Unlink class="mr-2 size-4" />
                     Unlink
@@ -168,18 +163,15 @@
         <div class="grid gap-3 md:grid-cols-2">
           {#each Array(4)}
             <div class="animate-pulse rounded-xl border p-4">
-              <div class="mb-2 h-5 w-40 rounded bg-black/10"></div>
-              <div class="h-4 w-64 rounded bg-black/5"></div>
+              <div class="bg-muted-foreground/15 mb-2 h-5 w-40 rounded"></div>
+              <div class="bg-muted-foreground/10 h-4 w-64 rounded"></div>
             </div>
           {/each}
         </div>
       {/snippet}
 
       {#snippet failed(_error: unknown, reset: () => void)}
-        <div class="flex w-full flex-col items-center gap-3 py-12">
-          <p class="text-destructive text-sm">Failed to load OAuth connections.</p>
-          <Button variant="outline" onclick={reset}>Try again</Button>
-        </div>
+        <PageError message="Failed to load OAuth connections." onRetry={reset} />
       {/snippet}
     </svelte:boundary>
   </Card.Content>
diff --git a/src/routes/(app)/settings/connections/dialog-oauth-disconnect.svelte b/src/routes/(app)/settings/connections/dialog-oauth-disconnect.svelte
index e8ec6036..3baf2f54 100644
--- a/src/routes/(app)/settings/connections/dialog-oauth-disconnect.svelte
+++ b/src/routes/(app)/settings/connections/dialog-oauth-disconnect.svelte
@@ -39,11 +39,11 @@
       </Dialog.Description>
     </Dialog.Header>
 
-    <div class="flex justify-end gap-2">
-      <Button variant="secondary" onclick={() => (open = false)} disabled={busy}>Cancel</Button>
+    <Dialog.Footer>
+      <Button variant="outline" onclick={() => (open = false)} disabled={busy}>Cancel</Button>
       <Button variant="destructive" onclick={doUnlink} disabled={busy} aria-busy={busy}>
         Unlink
       </Button>
-    </div>
+    </Dialog.Footer>
   </Dialog.Content>
 </Dialog.Root>
diff --git a/src/routes/(app)/settings/sessions/+page.svelte b/src/routes/(app)/settings/sessions/+page.svelte
index cb89c6b6..fcc54e89 100644
--- a/src/routes/(app)/settings/sessions/+page.svelte
+++ b/src/routes/(app)/settings/sessions/+page.svelte
@@ -3,10 +3,15 @@
   import type { LoginSessionResponse } from '#lib/api/index.js';
   import MonitorSmartphone from '@lucide/svelte/icons/monitor-smartphone';
   import RotateCcw from '@lucide/svelte/icons/rotate-ccw';
-  import { Container, EmptyState } from '@openshock/svelte-core/components';
+  import {
+    Container,
+    EmptyState,
+    PageError,
+    PageHeader,
+    PageLoading,
+  } 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 { Spinner } from '@openshock/svelte-core/components/ui/spinner';
   import { handleApiError } from '#lib/errorhandling/apiErrorHandling.js';
   import { onMount } from 'svelte';
   import { toast } from 'svelte-sonner';
@@ -66,29 +71,20 @@
 </script>
 
 <Container>
-  <Card.Header class="w-full">
-    <Card.Title class="flex items-center justify-between space-x-2 text-3xl">
-      Sessions
-      <Button class="text-xl" onclick={onRefreshClicked} disabled={loading}>
-        <RotateCcw />
-        <span> Refresh </span>
-      </Button>
-    </Card.Title>
-    <Card.Description>
-      This is a list of all active sessions of your account. Revoke any sessions you do not
-      recognize.
-    </Card.Description>
-  </Card.Header>
+  <PageHeader
+    title="Sessions"
+    subtitle="Every active session on your account. Revoke any you do not recognize."
+  >
+    <Button variant="outline" onclick={onRefreshClicked} disabled={loading}>
+      <RotateCcw />
+      Refresh
+    </Button>
+  </PageHeader>
   <Card.Content class="w-full">
     {#if loading && data.length === 0}
-      <div class="flex h-64 w-full items-center justify-center">
-        <Spinner class="size-8 text-gray-600 dark:text-gray-300" />
-      </div>
+      <PageLoading />
     {:else if failed && data.length === 0}
-      <div class="flex w-full flex-col items-center gap-3 py-12">
-        <p class="text-destructive text-sm">Failed to load sessions.</p>
-        <Button variant="outline" onclick={fetchSessions} disabled={loading}>Try again</Button>
-      </div>
+      <PageError message="Failed to load sessions." onRetry={fetchSessions} />
     {:else if data.length === 0}
       <EmptyState
         icon={MonitorSmartphone}
diff --git a/src/routes/(app)/settings/sessions/dialog-session-revoke.svelte b/src/routes/(app)/settings/sessions/dialog-session-revoke.svelte
index 59725150..7cd85d0f 100644
--- a/src/routes/(app)/settings/sessions/dialog-session-revoke.svelte
+++ b/src/routes/(app)/settings/sessions/dialog-session-revoke.svelte
@@ -14,16 +14,14 @@
 
   let { open = $bindable(), session, onRevoked }: Props = $props();
 
-  function handleDeleted() {
-    onRevoked(session.id);
-    toast.success('Session revoked successfully');
-    open = false;
-  }
-
-  function revokeSession() {
-    sessionsDeleteSession({ path: { sessionId: session.id } })
-      .then(handleDeleted)
-      .catch(handleApiError);
+  async function revokeSession() {
+    try {
+      await sessionsDeleteSession({ path: { sessionId: session.id } });
+      toast.success('Session revoked successfully');
+      onRevoked(session.id);
+    } catch (error) {
+      await handleApiError(error);
+    }
   }
 
   let readableUserAgent = $derived(
diff --git a/src/routes/(app)/settings/sessions/session-actions.svelte b/src/routes/(app)/settings/sessions/session-actions.svelte
index e9fb67ba..f9c2d85c 100644
--- a/src/routes/(app)/settings/sessions/session-actions.svelte
+++ b/src/routes/(app)/settings/sessions/session-actions.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
+  import RowActions from '#lib/components/Table/RowActions.svelte';
   import type { LoginSessionResponse } from '#lib/api/index.js';
-  import { TableActionMenu } from '@openshock/svelte-core/components';
-  import * as DropdownMenu from '@openshock/svelte-core/components/ui/dropdown-menu';
   import { copyToClipboard } from '@openshock/svelte-core/utils';
   import { Ban, Copy } from '@lucide/svelte';
   import SessionRevokeDialog from './dialog-session-revoke.svelte';
@@ -20,19 +19,15 @@
 
 <SessionRevokeDialog bind:open={revokeDialogOpen} {session} {onRevoked} />
 
-<TableActionMenu>
-  <DropdownMenu.Group>
-    <DropdownMenu.Item class="cursor-pointer" onclick={copyId}>
-      <Copy class="size-4" />
-      Copy ID
-    </DropdownMenu.Item>
-    <DropdownMenu.Separator />
-    <DropdownMenu.Item
-      class="cursor-pointer text-red-500"
-      onclick={() => (revokeDialogOpen = true)}
-    >
-      <Ban class="size-4" />
-      Revoke
-    </DropdownMenu.Item>
-  </DropdownMenu.Group>
-</TableActionMenu>
+<RowActions
+  actions={[
+    { label: 'Copy ID', icon: Copy, onclick: copyId },
+    {
+      label: 'Revoke',
+      icon: Ban,
+      onclick: () => (revokeDialogOpen = true),
+      destructive: true,
+      separatorBefore: true,
+    },
+  ]}
+/>
diff --git a/src/routes/(app)/shares/public/+page.svelte b/src/routes/(app)/shares/public/+page.svelte
index 728949a2..01c49d1c 100644
--- a/src/routes/(app)/shares/public/+page.svelte
+++ b/src/routes/(app)/shares/public/+page.svelte
@@ -2,8 +2,8 @@
   // Static class lookup — one copy per module, not one per instance.
   const expiryToneClasses = {
     neutral: 'text-muted-foreground ring-border',
-    warning: 'text-amber-600 dark:text-amber-400 ring-amber-500/30',
-    danger: 'text-red-600 dark:text-red-400 ring-red-500/30',
+    warning: 'text-warning ring-warning/30',
+    danger: 'text-destructive ring-destructive/30',
   } as const;
 </script>
 
@@ -18,8 +18,13 @@
   import { resolve } from '$app/paths';
   import { shareLinksList } from '#lib/api/index.js';
   import type { OwnPublicShareResponse } from '#lib/api/index.js';
-  import { Container, CopyInput, EmptyState, PageHeader } from '@openshock/svelte-core/components';
-  import { Spinner } from '@openshock/svelte-core/components/ui/spinner';
+  import {
+    Container,
+    CopyInput,
+    EmptyState,
+    PageHeader,
+    PageLoading,
+  } from '@openshock/svelte-core/components';
   import { Button } from '@openshock/svelte-core/components/ui/button';
   import { handleApiError } from '#lib/errorhandling/apiErrorHandling.js';
   import { getSiteShortURL } from '#lib/utils/url.js';
@@ -87,9 +92,7 @@
   </PageHeader>
 
   {#if loading && data.length === 0}
-    <div class="flex h-64 w-full items-center justify-center">
-      <Spinner class="size-8 text-gray-600 dark:text-gray-300" />
-    </div>
+    <PageLoading />
   {:else if sortedShares.length === 0}
     <EmptyState
       icon={Link2}
diff --git a/src/routes/(app)/shares/public/[shareId=guid]/edit/+page.svelte b/src/routes/(app)/shares/public/[shareId=guid]/edit/+page.svelte
index fc523a53..71df819b 100644
--- a/src/routes/(app)/shares/public/[shareId=guid]/edit/+page.svelte
+++ b/src/routes/(app)/shares/public/[shareId=guid]/edit/+page.svelte
@@ -5,10 +5,10 @@
     shareLinksEditShocker,
   } from '#lib/api/index.js';
   import type { PublicShareResponse } from '#lib/api/index.js';
-  import { ExternalLink, Plus, Save } from '@lucide/svelte';
+  import { ExternalLink, Plus, Save, Zap } from '@lucide/svelte';
   import { resolve } from '$app/paths';
   import { page } from '$app/state';
-  import { CopyInput } from '@openshock/svelte-core/components';
+  import { Container, CopyInput, EmptyState, PageHeader } from '@openshock/svelte-core/components';
   import { Spinner } from '@openshock/svelte-core/components/ui/spinner';
   import { Button } from '@openshock/svelte-core/components/ui/button';
   import * as Avatar from '@openshock/svelte-core/components/ui/avatar';
@@ -112,78 +112,77 @@
 
 <DialogAddShocker bind:open={showAddShockerModal} {onAddedShockers} />
 
-<div class="m-5 flex h-full w-full flex-col gap-10">
-  <div class="grid grid-cols-3 grid-rows-1 items-center gap-4">
-    <div class="flex w-full flex-col">
-      <h1 class="text-2xl font-bold">
-        Public Share: {publicShareData?.name ?? 'Loading...'}
-      </h1>
-      <p class="text-muted-foreground text-sm">Editing — changes apply when you save.</p>
-    </div>
-
-    <div class="flex items-center">
-      <CopyInput value={shareUrl.href} displayValue={shareUrl.host + shareUrl.pathname} />
-    </div>
-
-    <div class="flex items-center justify-end gap-2">
-      <Button variant="outline" href={publicUrl}>
-        <ExternalLink />
-        View
-      </Button>
-      <Button
-        variant="outline"
-        onclick={() => (showAddShockerModal = true)}
-        disabled={isAddingShockers}><Plus />Add Shocker</Button
-      >
-
-      <Button onclick={saveChanges} disabled={isSaving}
-        ><Save />{isSaving ? 'Saving...' : 'Save'}</Button
-      >
-
-      {#if publicShareData}
-        <Tooltip.Root>
-          <Tooltip.Trigger>
-            <span
-              class="ml-2 flex flex-row items-center rounded-md px-3 py-1.5 outline-1 outline-gray-500"
-            >
-              <Avatar.Root class="h-8 w-8">
-                <Avatar.Image src={publicShareData.author.image} alt="User Avatar" />
-                <Avatar.Fallback>
-                  {publicShareData.author.name.charAt(0)}
-                </Avatar.Fallback>
-              </Avatar.Root>
-              <p class="ml-3 text-sm">{publicShareData.author.name}</p>
-            </span>
-          </Tooltip.Trigger>
-          <Tooltip.Content>
-            <p>Shared by</p>
-          </Tooltip.Content>
-        </Tooltip.Root>
-      {/if}
-    </div>
-  </div>
+<Container>
+  <PageHeader
+    title="Public Share: {publicShareData?.name ?? 'Loading...'}"
+    subtitle="Editing — changes apply when you save."
+  >
+    <Button variant="outline" href={publicUrl}>
+      <ExternalLink />
+      View
+    </Button>
+    <Button
+      variant="outline"
+      onclick={() => (showAddShockerModal = true)}
+      disabled={isAddingShockers}><Plus />Add Shocker</Button
+    >
+
+    <Button onclick={saveChanges} disabled={isSaving}
+      ><Save />{isSaving ? 'Saving...' : 'Save'}</Button
+    >
+
+    {#if publicShareData}
+      <Tooltip.Root>
+        <Tooltip.Trigger>
+          <span
+            class="outline-muted-foreground/50 ml-2 flex flex-row items-center rounded-md px-3 py-1.5 outline-1"
+          >
+            <Avatar.Root class="h-8 w-8">
+              <Avatar.Image src={publicShareData.author.image} alt="User Avatar" />
+              <Avatar.Fallback>
+                {publicShareData.author.name.charAt(0)}
+              </Avatar.Fallback>
+            </Avatar.Root>
+            <p class="ml-3 text-sm">{publicShareData.author.name}</p>
+          </span>
+        </Tooltip.Trigger>
+        <Tooltip.Content>
+          <p>Shared by</p>
+        </Tooltip.Content>
+      </Tooltip.Root>
+    {/if}
+  </PageHeader>
+
+  <div class="flex min-h-0 w-full min-w-0 flex-1 flex-col gap-6">
+    <CopyInput value={shareUrl.href} displayValue={shareUrl.host + shareUrl.pathname} />
 
-  {#await publicShareRequest}
-    <div class="flex h-full w-full items-center justify-center">
-      <Spinner class="size-8 text-gray-600 dark:text-gray-300" />
-    </div>
-  {:then}
-    {#if publicShareData?.devices?.length && shareId}
-      <div class="flex flex-col gap-8">
-        {#each publicShareData.devices as device, i (device.id)}
-          <SharedDevice {shareId} bind:device={publicShareData.devices[i]} {onShockerRemoved} />
-        {/each}
+    {#await publicShareRequest}
+      <div class="flex h-full w-full items-center justify-center">
+        <Spinner class="text-muted-foreground size-8" />
       </div>
-    {:else}
-      <div class="text-muted-foreground flex h-32 flex-col items-center justify-center">
-        <p>No shockers added to this share yet.</p>
-        <p class="text-sm">Click "Add Shocker" to get started.</p>
+    {:then}
+      {#if publicShareData?.devices?.length && shareId}
+        <div class="flex flex-col gap-8">
+          {#each publicShareData.devices as device, i (device.id)}
+            <SharedDevice {shareId} bind:device={publicShareData.devices[i]} {onShockerRemoved} />
+          {/each}
+        </div>
+      {:else}
+        <EmptyState
+          icon={Zap}
+          title="No shockers in this share"
+          description="Add a shocker and anyone with the link will be able to control it."
+        >
+          <Button onclick={() => (showAddShockerModal = true)} disabled={isAddingShockers}>
+            <Plus />Add Shocker
+          </Button>
+        </EmptyState>
+      {/if}
+    {:catch error}
+      <div class="flex h-full w-full flex-col items-center justify-center">
+        <p>Error fetching public share details</p>
+        <pre>{error.message}</pre>
       </div>
-    {/if}
-  {:catch error}
-    <div class="flex h-full flex-col items-center justify-center">
-      <p>Error fetching public share details</p>
-      <pre>{error.message}</pre>
-    </div>
-  {/await}
-</div>
+    {/await}
+  </div>
+</Container>
diff --git a/src/routes/(app)/shares/public/[shareId=guid]/edit/SharedShocker.svelte b/src/routes/(app)/shares/public/[shareId=guid]/edit/SharedShocker.svelte
index b7320f9b..ebb7081f 100644
--- a/src/routes/(app)/shares/public/[shareId=guid]/edit/SharedShocker.svelte
+++ b/src/routes/(app)/shares/public/[shareId=guid]/edit/SharedShocker.svelte
@@ -77,9 +77,7 @@
   };
 </script>
 
-<div
-  class="border-surface-400-500-token bg-card flex w-80 flex-col overflow-hidden rounded-md border"
->
+<div class="bg-card flex w-80 flex-col overflow-hidden rounded-md border">
   <!-- Header — mirrors ShockerCard -->
   <div class="border-border/60 flex items-center gap-2 border-b px-3 py-2">
     <div class="flex min-w-0 flex-1 flex-col">
@@ -88,7 +86,7 @@
       </h2>
       {#if isPausedByPublicShare}
         <span class="text-muted-foreground flex items-center gap-1.5 text-[11px]">
-          <span class="size-1.5 shrink-0 rounded-full bg-amber-400"></span>
+          <span class="bg-warning size-1.5 shrink-0 rounded-full"></span>
           Paused for this share
         </span>
       {/if}
diff --git a/src/routes/(app)/shares/public/[shareId=guid]/edit/dialog-add-shocker.svelte b/src/routes/(app)/shares/public/[shareId=guid]/edit/dialog-add-shocker.svelte
index 5ef5c3cd..f8cfda1f 100644
--- a/src/routes/(app)/shares/public/[shareId=guid]/edit/dialog-add-shocker.svelte
+++ b/src/routes/(app)/shares/public/[shareId=guid]/edit/dialog-add-shocker.svelte
@@ -32,13 +32,13 @@
     open = o;
   }
 
-  function onFormSubmit() {
+  function onFormSubmit(event: SubmitEvent) {
+    event.preventDefault();
     const selectedShockers = shockerIds.map((id) => ({
       id,
       name: availableShockers.find((shocker) => shocker.value === id)?.label || '',
     }));
-    shockerIds = [];
-    open = false;
+    onOpenChange(false);
     onAddedShockers(selectedShockers);
   }
 </script>
@@ -46,13 +46,13 @@
 <Dialog.Root bind:open={() => open, onOpenChange}>
   <Dialog.Content>
     <Dialog.Header>
-      <Dialog.Title>Add Shockers</Dialog.Title>
-      <Dialog.Description
-        >Add Shockers to a Public Share, you can set the limits once added.</Dialog.Description
-      >
+      <Dialog.Title>Add shockers</Dialog.Title>
+      <Dialog.Description>
+        Add shockers to this public share. You can set their limits once they are added.
+      </Dialog.Description>
     </Dialog.Header>
 
-    <form class="modal-form border-surface-500 rounded-container-token min-w-0 space-y-4">
+    <form class="min-w-0 space-y-4" id="add-shockers" onsubmit={onFormSubmit}>
       <MultiSelectCombobox
         bind:selected={shockerIds}
         options={availableShockers}
@@ -61,9 +61,17 @@
         noMatchText="Not matching shockers"
       ></MultiSelectCombobox>
     </form>
-    <Button onclick={onFormSubmit} disabled={!shockerIds.length} class="flex items-center">
-      <Plus />
-      Add Shockers
-    </Button>
+    <Dialog.Footer>
+      <Button variant="outline" onclick={() => onOpenChange(false)}>Cancel</Button>
+      <Button
+        type="submit"
+        form="add-shockers"
+        disabled={!shockerIds.length}
+        class="flex items-center"
+      >
+        <Plus />
+        Add Shockers
+      </Button>
+    </Dialog.Footer>
   </Dialog.Content>
 </Dialog.Root>
diff --git a/src/routes/(app)/shares/public/data-table-actions.svelte b/src/routes/(app)/shares/public/data-table-actions.svelte
index 17ba506a..389fe83e 100644
--- a/src/routes/(app)/shares/public/data-table-actions.svelte
+++ b/src/routes/(app)/shares/public/data-table-actions.svelte
@@ -45,7 +45,7 @@
       </DropdownMenu.Item>
       <DropdownMenu.Separator />
       <DropdownMenu.Item
-        class="cursor-pointer text-red-500"
+        class="text-destructive cursor-pointer"
         onclick={() => (deleteDialogOpen = true)}><Trash2 class="size-4" />Delete</DropdownMenu.Item
       >
     </DropdownMenu.Group>
diff --git a/src/routes/(app)/shares/public/dialog-publicshare-create.svelte b/src/routes/(app)/shares/public/dialog-publicshare-create.svelte
index 60667ac5..95ada755 100644
--- a/src/routes/(app)/shares/public/dialog-publicshare-create.svelte
+++ b/src/routes/(app)/shares/public/dialog-publicshare-create.svelte
@@ -4,6 +4,7 @@
   import { TextInput } from '@openshock/svelte-core/components/input';
   import { Button } from '@openshock/svelte-core/components/ui/button';
   import * as Dialog from '@openshock/svelte-core/components/ui/dialog';
+  import { handleApiError } from '#lib/errorhandling/apiErrorHandling.js';
   import { toast } from 'svelte-sonner';
 
   interface Props {
@@ -17,28 +18,37 @@
   let expireOption = $state('never');
   let expireInstant = $state<Temporal.Instant | null>(null);
 
-  function createShareLink() {
-    shareLinksCreatePublicShare({
-      body: { name, expiresOn: expireInstant ?? undefined },
-    })
-      .then(() => {
-        onCreated();
-        toast.success('Created new publicshare');
-      })
-      .finally(() => {
-        open = false;
+  let submitting = $state(false);
+
+  async function createShareLink() {
+    if (submitting) return;
+    submitting = true;
+    try {
+      await shareLinksCreatePublicShare({
+        body: { name, expiresOn: expireInstant ?? undefined },
       });
+      onCreated();
+      toast.success('Created new public share');
+      open = false;
+    } catch (error) {
+      await handleApiError(error);
+    } finally {
+      submitting = false;
+    }
   }
 </script>
 
 <Dialog.Root bind:open={() => open, (o) => (open = o)}>
   <Dialog.Content>
     <Dialog.Header>
-      <Dialog.Title>Create Public Share</Dialog.Title>
+      <Dialog.Title>Create public share</Dialog.Title>
     </Dialog.Header>
     <TextInput label="Name" bind:value={name} />
     <ExpirationPicker bind:option={expireOption} bind:instant={expireInstant} />
 
-    <Button onclick={createShareLink}>Create</Button>
+    <Dialog.Footer>
+      <Button variant="outline" onclick={() => (open = false)}>Cancel</Button>
+      <Button onclick={createShareLink} disabled={submitting}>Create</Button>
+    </Dialog.Footer>
   </Dialog.Content>
 </Dialog.Root>
diff --git a/src/routes/(app)/shares/public/dialog-publicshare-delete.svelte b/src/routes/(app)/shares/public/dialog-publicshare-delete.svelte
index 38d71fa5..6ca1edaa 100644
--- a/src/routes/(app)/shares/public/dialog-publicshare-delete.svelte
+++ b/src/routes/(app)/shares/public/dialog-publicshare-delete.svelte
@@ -13,16 +13,14 @@
 
   let { open = $bindable<boolean>(), publicShare, onDeleted }: Props = $props();
 
-  function deleteShareLink() {
-    shareLinksDeletePublicShare({ path: { publicShareId: publicShare.id } })
-      .then(() => {
-        onDeleted();
-        toast.success('Deleted publicShare successfully');
-      })
-      .catch(handleApiError)
-      .finally(() => {
-        open = false;
-      });
+  async function deleteShareLink() {
+    try {
+      await shareLinksDeletePublicShare({ path: { publicShareId: publicShare.id } });
+      toast.success('Deleted public share');
+      onDeleted();
+    } catch (error) {
+      await handleApiError(error);
+    }
   }
 </script>
 
diff --git a/src/routes/(app)/shares/user/+layout.svelte b/src/routes/(app)/shares/user/+layout.svelte
index 45096f35..ce54670f 100644
--- a/src/routes/(app)/shares/user/+layout.svelte
+++ b/src/routes/(app)/shares/user/+layout.svelte
@@ -79,14 +79,14 @@
 <DialogShareCodeRedeem bind:open={redeemDialogOpen} bind:userInput={redeemUserInput} />
 
 <Container class="flex flex-col">
-  <PageHeader title="User Shares" subtitle="Direct permanent shares with users">
+  <PageHeader title="User Shares" subtitle="Direct permanent shares with other users.">
     <Button
+      variant="outline"
       onclick={() => (redeemDialogOpen = true)}
-      class="self-end"
       data-tour="user-shares-redeem"><Barcode />Redeem Code</Button
     >
 
-    <Button onclick={() => (createDialogOpen = true)} class="self-end" data-tour="user-shares-new"
+    <Button onclick={() => (createDialogOpen = true)} data-tour="user-shares-new"
       ><Plus />New Share</Button
     >
   </PageHeader>
diff --git a/src/routes/(app)/shares/user/dialog-share-code-create.svelte b/src/routes/(app)/shares/user/dialog-share-code-create.svelte
index f2dedd88..97ef579f 100644
--- a/src/routes/(app)/shares/user/dialog-share-code-create.svelte
+++ b/src/routes/(app)/shares/user/dialog-share-code-create.svelte
@@ -52,6 +52,7 @@
   let shockerIds = $state<string[]>([]);
   let restrictions = $state<ShockerPermLimitPairButNotNull>(getDefaultRestrictions());
   let fetchedUser = $state<BasicUserInfo | null>(null);
+  let submitting = $state(false);
 
   function getDefaultRestrictions(): ShockerPermLimitPairButNotNull {
     return {
@@ -86,7 +87,10 @@
     open = o;
   }
 
-  async function onFormSubmit() {
+  async function onFormSubmit(event: SubmitEvent) {
+    event.preventDefault();
+    if (submitting || shockerIds.length === 0) return;
+    submitting = true;
     try {
       const createdCode = await userSharesCreateShareInvite({
         body: {
@@ -104,10 +108,11 @@
       } else {
         onCreatedCode(createdCode);
       }
-      open = false;
+      onOpenChange(false);
     } catch (error) {
       await handleApiError(error);
     } finally {
+      submitting = false;
       refreshOutgoingInvites();
     }
   }
@@ -116,11 +121,11 @@
 <Dialog.Root bind:open={() => open, onOpenChange}>
   <Dialog.Content>
     <Dialog.Header>
-      <Dialog.Title>New Share Code</Dialog.Title>
+      <Dialog.Title>New share code</Dialog.Title>
       <Dialog.Description>Create a Share Code or Invite</Dialog.Description>
     </Dialog.Header>
 
-    <form class="modal-form border-surface-500 rounded-container-token min-w-0 space-y-4">
+    <form class="min-w-0 space-y-4" id="create-share-code" onsubmit={onFormSubmit}>
       <UserSelector bind:fetchedUser />
 
       <MultiSelectCombobox
@@ -136,14 +141,22 @@
         bind:limits={restrictions.limits}
       />
     </form>
-    <Button onclick={onFormSubmit} class="flex items-center">
-      {#if fetchedUser}
-        <User />
-        Send Share Invite
-      {:else}
-        <Barcode />
-        Create Share Code
-      {/if}
-    </Button>
+    <Dialog.Footer>
+      <Button variant="outline" onclick={() => onOpenChange(false)}>Cancel</Button>
+      <Button
+        type="submit"
+        form="create-share-code"
+        class="flex items-center"
+        disabled={submitting || shockerIds.length === 0}
+      >
+        {#if fetchedUser}
+          <User />
+          Send Share Invite
+        {:else}
+          <Barcode />
+          Create Share Code
+        {/if}
+      </Button>
+    </Dialog.Footer>
   </Dialog.Content>
 </Dialog.Root>
diff --git a/src/routes/(app)/shares/user/dialog-share-code-created.svelte b/src/routes/(app)/shares/user/dialog-share-code-created.svelte
index 2827ab8f..7ab51995 100644
--- a/src/routes/(app)/shares/user/dialog-share-code-created.svelte
+++ b/src/routes/(app)/shares/user/dialog-share-code-created.svelte
@@ -22,7 +22,7 @@
 <Dialog.Root bind:open={() => code !== null, onOpenChanged}>
   <Dialog.Content>
     <Dialog.Header>
-      <Dialog.Title>Share Code Generated</Dialog.Title>
+      <Dialog.Title>Share code generated</Dialog.Title>
       <Dialog.Description>Please copy share code or code link!</Dialog.Description>
     </Dialog.Header>
     <div class="flex flex-col items-center space-y-4">
diff --git a/src/routes/(app)/shares/user/dialog-share-code-redeem.svelte b/src/routes/(app)/shares/user/dialog-share-code-redeem.svelte
index c96c0a48..ef7a9f9d 100644
--- a/src/routes/(app)/shares/user/dialog-share-code-redeem.svelte
+++ b/src/routes/(app)/shares/user/dialog-share-code-redeem.svelte
@@ -20,24 +20,35 @@
   }
 
   let { open = $bindable(), userInput = $bindable() }: Props = $props();
-  let redeemPromise = $state<Promise<V2UserSharesListItem> | null>(null);
+  let redeeming = $state(false);
+  let result = $state<V2UserSharesListItem | null>(null);
+  // Bumped on close so a request that finishes after dismissal cannot write into the next opening.
+  let generation = 0;
 
   function onOpenChange(o: boolean) {
     if (!o) {
+      generation++;
       userInput = '';
-      redeemPromise = null;
+      result = null;
+      redeeming = false;
     }
     open = o;
   }
 
-  async function onFormSubmit() {
+  async function onFormSubmit(event: SubmitEvent) {
+    event.preventDefault();
+    const inviteId = userInput.trim();
+    if (redeeming || !inviteId) return;
+    redeeming = true;
+    const current = generation;
     try {
-      redeemPromise = userSharesRedeemInvite({ path: { inviteId: userInput } });
-      await redeemPromise;
+      const redeemed = await userSharesRedeemInvite({ path: { inviteId } });
+      if (current === generation) result = redeemed;
       await refreshUserShares();
     } catch (error) {
       await handleApiError(error);
     } finally {
+      if (current === generation) redeeming = false;
       refreshOutgoingInvites();
     }
   }
@@ -46,64 +57,58 @@
 <Dialog.Root bind:open={() => open, onOpenChange}>
   <Dialog.Content>
     <Dialog.Header>
-      <Dialog.Title>Redeem Share Code</Dialog.Title>
+      <Dialog.Title>Redeem share code</Dialog.Title>
       <Dialog.Description>Enter the share code to redeem</Dialog.Description>
     </Dialog.Header>
 
-    <form class="modal-form border-surface-500 rounded-container-token min-w-0 space-y-4">
+    <form class="min-w-0 space-y-4" onsubmit={onFormSubmit}>
       <Input
         bind:value={userInput}
-        disabled={redeemPromise !== null}
+        disabled={redeeming || result !== null}
         placeholder="Enter share code"
       />
 
-      {#if redeemPromise}
-        {#await redeemPromise}
-          <p>Redeeming...</p>
-        {:then result}
-          <div class="flex flex-col gap-2">
-            <p class="text-green-500">Redeemed successfully!</p>
+      {#if result}
+        <div class="flex flex-col gap-2">
+          <p class="text-success">Redeemed successfully!</p>
 
-            <span class="flex items-center gap-2">
-              <Avatar.Root class="h-15 w-15">
-                <Avatar.Image src={result.image} alt="User Avatar" />
-                <Avatar.Fallback>{result.name.charAt(0)}</Avatar.Fallback>
-              </Avatar.Root>
-              <p class="ml-4">{result.name}</p>
-            </span>
+          <span class="flex items-center gap-2">
+            <Avatar.Root class="h-15 w-15">
+              <Avatar.Image src={result.image} alt="User Avatar" />
+              <Avatar.Fallback>{result.name.charAt(0)}</Avatar.Fallback>
+            </Avatar.Root>
+            <p class="ml-4">{result.name}</p>
+          </span>
 
-            <span
-              class="bg-sidebar flex h-[26px] items-center rounded-2xl px-1.5 py-0.5 ring-1 ring-slate-800"
-            >
-              <Zap size="15" />
-              <p class="ml-2 inline-block sm:hidden">{result.shares.length}</p>
-              <div class="hidden sm:inline-block">
-                {#each result.shares as share (share.id)}
-                  <Tooltip.Root>
-                    <Tooltip.Trigger class="flex items-center">
-                      <Badge class="ml-2" variant={share.paused ? 'destructive' : 'default'}
-                        >{share.name}</Badge
-                      >
-                    </Tooltip.Trigger>
-                    <Tooltip.Content>
-                      <p>Shared shockers</p>
-                    </Tooltip.Content>
-                  </Tooltip.Root>
-                {/each}
-              </div>
-            </span>
-          </div>
-        {:catch error}
-          <p class="text-red-500">Error redeeming code: {error.message}</p>
-        {/await}
+          <span
+            class="bg-sidebar ring-border flex h-[26px] items-center rounded-2xl px-1.5 py-0.5 ring-1"
+          >
+            <Zap size="15" />
+            <p class="ml-2 inline-block sm:hidden">{result.shares.length}</p>
+            <div class="hidden sm:inline-block">
+              {#each result.shares as share (share.id)}
+                <Tooltip.Root>
+                  <Tooltip.Trigger class="flex items-center">
+                    <Badge class="ml-2" variant={share.paused ? 'destructive' : 'default'}
+                      >{share.name}</Badge
+                    >
+                  </Tooltip.Trigger>
+                  <Tooltip.Content>
+                    <p>Shared shockers</p>
+                  </Tooltip.Content>
+                </Tooltip.Root>
+              {/each}
+            </div>
+          </span>
+        </div>
       {:else}
         <Button
-          onclick={onFormSubmit}
+          type="submit"
           class="flex w-full items-center"
-          disabled={redeemPromise !== null}
+          disabled={redeeming || !userInput.trim()}
         >
           <Barcode />
-          Redeem
+          {redeeming ? 'Redeeming...' : 'Redeem'}
         </Button>
       {/if}
     </form>
diff --git a/src/routes/(app)/shares/user/incoming/+page.svelte b/src/routes/(app)/shares/user/incoming/+page.svelte
index a8c001db..95dbc501 100644
--- a/src/routes/(app)/shares/user/incoming/+page.svelte
+++ b/src/routes/(app)/shares/user/incoming/+page.svelte
@@ -31,7 +31,7 @@
 
 {#await refreshPromise}
   <div class="flex h-full w-full items-center justify-center">
-    <Spinner class="size-8 text-gray-600 dark:text-gray-300" />
+    <Spinner class="text-muted-foreground size-8" />
   </div>
 {:then}
   {#if userSharesState.shares.incoming.length === 0}
@@ -52,5 +52,5 @@
     </div>
   {/if}
 {:catch error}
-  <div class="text-red-500">Failed to load outgoing invites: {error.message}</div>
+  <div class="text-destructive">Failed to load incoming shares: {error.message}</div>
 {/await}
diff --git a/src/routes/(app)/shares/user/incoming/incoming-share-item.svelte b/src/routes/(app)/shares/user/incoming/incoming-share-item.svelte
index c29251fd..eeeee12c 100644
--- a/src/routes/(app)/shares/user/incoming/incoming-share-item.svelte
+++ b/src/routes/(app)/shares/user/incoming/incoming-share-item.svelte
@@ -55,9 +55,7 @@
     <p class="ml-4">{share.name}</p>
   </Table.Cell>
   <Table.Cell>
-    <span
-      class="bg-sidebar flex w-max items-center rounded-2xl px-1.5 py-0.5 ring-1 ring-slate-800"
-    >
+    <span class="bg-sidebar ring-border flex w-max items-center rounded-2xl px-1.5 py-0.5 ring-1">
       <Zap size="15" />
       <p class="ml-2 inline-block sm:hidden">{share.shares.length}</p>
       <div class="hidden sm:inline-block">
diff --git a/src/routes/(app)/shares/user/incoming/manage-share.svelte b/src/routes/(app)/shares/user/incoming/manage-share.svelte
index 5c68dbd1..c9330118 100644
--- a/src/routes/(app)/shares/user/incoming/manage-share.svelte
+++ b/src/routes/(app)/shares/user/incoming/manage-share.svelte
@@ -58,7 +58,7 @@
 
 <Drawer.Root bind:open={editDrawer} direction="right">
   <Drawer.Content>
-    <div class="mx-auto flex max-h-[100vh] w-full flex-col">
+    <div class="mx-auto flex max-h-dvh w-full flex-col">
       <Drawer.Header class="shrink-0">
         <Drawer.Description>Manage Shares from</Drawer.Description>
         <Drawer.Title class="mt-1 flex items-center gap-2">
diff --git a/src/routes/(app)/shares/user/invites/+page.svelte b/src/routes/(app)/shares/user/invites/+page.svelte
index d2014306..79cce0de 100644
--- a/src/routes/(app)/shares/user/invites/+page.svelte
+++ b/src/routes/(app)/shares/user/invites/+page.svelte
@@ -24,7 +24,7 @@
 
 {#await invitesPromise}
   <div class="flex h-full w-full items-center justify-center">
-    <Spinner class="size-8 text-gray-600 dark:text-gray-300" />
+    <Spinner class="text-muted-foreground size-8" />
   </div>
 {:then}
   {#if bothEmpty}
@@ -77,5 +77,5 @@
     {/if}
   {/if}
 {:catch error}
-  <div class="text-red-500">Failed to load invites: {error.message}</div>
+  <div class="text-destructive">Failed to load invites: {error.message}</div>
 {/await}
diff --git a/src/routes/(app)/shares/user/invites/incoming-invite-item.svelte b/src/routes/(app)/shares/user/invites/incoming-invite-item.svelte
index fa11171b..77bb43fd 100644
--- a/src/routes/(app)/shares/user/invites/incoming-invite-item.svelte
+++ b/src/routes/(app)/shares/user/invites/incoming-invite-item.svelte
@@ -68,9 +68,7 @@
     <p class="ml-4">{shareInvite.owner.name}</p>
   </Table.Cell>
   <Table.Cell class="flex-auto">
-    <span
-      class="bg-sidebar flex w-max items-center rounded-2xl px-1.5 py-0.5 ring-1 ring-slate-800"
-    >
+    <span class="bg-sidebar ring-border flex w-max items-center rounded-2xl px-1.5 py-0.5 ring-1">
       <Zap size="15" />
       <p class="ml-2 inline-block sm:hidden">{shareInvite.shockers.length}</p>
       <div class="hidden sm:inline-block">
diff --git a/src/routes/(app)/shares/user/invites/outgoing-invite-item.svelte b/src/routes/(app)/shares/user/invites/outgoing-invite-item.svelte
index 217913b9..6e9ee242 100644
--- a/src/routes/(app)/shares/user/invites/outgoing-invite-item.svelte
+++ b/src/routes/(app)/shares/user/invites/outgoing-invite-item.svelte
@@ -81,9 +81,7 @@
     {/if}
   </Table.Cell>
   <Table.Cell class="flex-auto">
-    <span
-      class="bg-sidebar flex w-max items-center rounded-2xl px-1.5 py-0.5 ring-1 ring-slate-800"
-    >
+    <span class="bg-sidebar ring-border flex w-max items-center rounded-2xl px-1.5 py-0.5 ring-1">
       <Zap size="15" />
       <p class="ml-2 inline-block sm:hidden">{shareInvite.shockers.length}</p>
       <div class="hidden sm:inline-block">
diff --git a/src/routes/(app)/shares/user/outgoing/+page.svelte b/src/routes/(app)/shares/user/outgoing/+page.svelte
index 46897839..a2d68fe1 100644
--- a/src/routes/(app)/shares/user/outgoing/+page.svelte
+++ b/src/routes/(app)/shares/user/outgoing/+page.svelte
@@ -30,7 +30,7 @@
 
 {#await refreshPromise}
   <div class="flex h-full w-full items-center justify-center">
-    <Spinner class="size-8 text-gray-600 dark:text-gray-300" />
+    <Spinner class="text-muted-foreground size-8" />
   </div>
 {:then}
   {#if userSharesState.shares.outgoing.length === 0}
@@ -51,5 +51,5 @@
     </div>
   {/if}
 {:catch error}
-  <div class="text-red-500">Failed to load shares: {error.message}</div>
+  <div class="text-destructive">Failed to load shares: {error.message}</div>
 {/await}
diff --git a/src/routes/(app)/shares/user/outgoing/edit-share.svelte b/src/routes/(app)/shares/user/outgoing/edit-share.svelte
index 215e9642..68d2b08d 100644
--- a/src/routes/(app)/shares/user/outgoing/edit-share.svelte
+++ b/src/routes/(app)/shares/user/outgoing/edit-share.svelte
@@ -192,7 +192,7 @@
 
 <Drawer.Root bind:open={editDrawer} direction="right">
   <Drawer.Content>
-    <div class="mx-auto flex h-full max-h-screen w-full flex-col">
+    <div class="mx-auto flex h-full max-h-dvh w-full flex-col">
       <Drawer.Header class="shrink-0 border-b">
         <Drawer.Description class="text-muted-foreground text-xs">
           Editing shares for
diff --git a/src/routes/(app)/shares/user/outgoing/user-share-item.svelte b/src/routes/(app)/shares/user/outgoing/user-share-item.svelte
index 86a46831..998e0668 100644
--- a/src/routes/(app)/shares/user/outgoing/user-share-item.svelte
+++ b/src/routes/(app)/shares/user/outgoing/user-share-item.svelte
@@ -29,9 +29,7 @@
     <p class="ml-4">{userShare.name}</p>
   </Table.Cell>
   <Table.Cell>
-    <span
-      class="bg-sidebar flex w-max items-center rounded-2xl px-1.5 py-0.5 ring-1 ring-slate-800"
-    >
+    <span class="bg-sidebar ring-border flex w-max items-center rounded-2xl px-1.5 py-0.5 ring-1">
       <Zap size="15" />
       <p class="ml-2 inline-block sm:hidden">{userShare.shares.length}</p>
       <div class="hidden sm:inline-block">
diff --git a/src/routes/(app)/shockers/[shockerId=guid]/edit/+page.svelte b/src/routes/(app)/shockers/[shockerId=guid]/edit/+page.svelte
index 2fb733f9..300471ef 100644
--- a/src/routes/(app)/shockers/[shockerId=guid]/edit/+page.svelte
+++ b/src/routes/(app)/shockers/[shockerId=guid]/edit/+page.svelte
@@ -9,7 +9,7 @@
   import { goto } from '$app/navigation';
   import { resolve } from '$app/paths';
   import { page } from '$app/state';
-  import { Container } from '@openshock/svelte-core/components';
+  import { Container, PageError, PageHeader, PageLoading } from '@openshock/svelte-core/components';
   import { dialog } from '@openshock/svelte-core/components/dialog-manager';
   import { RfIdMax, RfIdMin, isValidRfId } from '#lib/constants/ShockerConstants.js';
   import { TextInput } from '@openshock/svelte-core/components/input';
@@ -105,28 +105,19 @@
 </script>
 
 <Container>
+  <PageHeader title="Edit Shocker" subtitle="Change this shocker's details or remove it.">
+    <Button variant="outline" href={resolve('shockers/own')}>
+      <ArrowLeft />
+      Back to Shockers
+    </Button>
+  </PageHeader>
+
   {#if loadError}
-    <div class="flex flex-col items-center gap-4 py-12">
-      <p class="text-muted-foreground">Failed to load shocker.</p>
-      <Button variant="outline" href={resolve('shockers/own')}
-        ><ArrowLeft class="size-4" />Back to Shockers</Button
-      >
-    </div>
+    <PageError message="Failed to load shocker." />
   {:else if !shocker}
-    <div class="flex items-center gap-3 p-12">
-      <Spinner class="size-5" />
-      <span class="text-muted-foreground">Loading shocker...</span>
-    </div>
+    <PageLoading label="Loading shocker..." />
   {:else}
     <div class="mx-auto flex w-full max-w-lg flex-col gap-6 py-4">
-      <div class="flex items-center gap-3">
-        <Button variant="ghost" size="icon" href={resolve('shockers/own')} aria-label="Back"
-          ><ArrowLeft class="size-4" /></Button
-        >
-
-        <h1 class="text-2xl font-bold">Edit Shocker</h1>
-      </div>
-
       <Card.Root>
         <Card.Header>
           <Card.Title>Shocker Details</Card.Title>
diff --git a/src/routes/(app)/shockers/logs/+page.svelte b/src/routes/(app)/shockers/logs/+page.svelte
index 148d644c..7a8e8761 100644
--- a/src/routes/(app)/shockers/logs/+page.svelte
+++ b/src/routes/(app)/shockers/logs/+page.svelte
@@ -215,7 +215,7 @@
 </script>
 
 <Container>
-  <PageHeader title="Shocker Logs" subtitle="These are the logs for all shockers.">
+  <PageHeader title="Shocker Logs" subtitle="Every control command sent to your shockers.">
     <Badge
       variant={liveUpdatesActive ? 'default' : 'secondary'}
       class="gap-1.5"
@@ -226,19 +226,19 @@
       <span class="relative flex size-2">
         {#if liveUpdatesActive}
           <span
-            class="absolute inline-flex size-full animate-ping rounded-full bg-green-400 opacity-75"
+            class="bg-success absolute inline-flex size-full animate-ping rounded-full opacity-75"
           ></span>
         {/if}
         <span
           class="relative inline-flex size-2 rounded-full {liveUpdatesActive
-            ? 'bg-green-500'
+            ? 'bg-success'
             : 'bg-muted-foreground'}"
         ></span>
       </span>
       {liveUpdatesActive ? 'Live' : 'Paused'}
     </Badge>
   </PageHeader>
-  <div class="flex min-h-0 w-full flex-1 flex-col gap-6">
+  <div class="flex min-h-0 w-full min-w-0 flex-1 flex-col gap-6">
     <div class="flex items-end gap-2">
       <div class="w-64">
         <MultiSelectCombobox
diff --git a/src/routes/(app)/shockers/own/+page.svelte b/src/routes/(app)/shockers/own/+page.svelte
index 47a6bbdd..400936fe 100644
--- a/src/routes/(app)/shockers/own/+page.svelte
+++ b/src/routes/(app)/shockers/own/+page.svelte
@@ -4,7 +4,7 @@
   import type { NewShocker } from '#lib/api/index.js';
   import { Layers, LogsIcon, Plus, RotateCcw, Settings, Zap } from '@lucide/svelte';
   import { resolve } from '$app/paths';
-  import { Container, EmptyState } from '@openshock/svelte-core/components';
+  import { Container, EmptyState, PageHeader } from '@openshock/svelte-core/components';
   import { Spinner } from '@openshock/svelte-core/components/ui/spinner';
   import ClassicControlModule from '#lib/components/ControlModules/ClassicControlModule.svelte';
   import DialogShockerAdd, {
@@ -193,8 +193,7 @@
       <span class="text-muted-foreground">Loading shockers...</span>
     </div>
   {:else}
-    <div class="flex w-full flex-wrap items-center justify-between gap-2">
-      <h1 class="text-2xl font-bold">Shockers</h1>
+    <PageHeader title="Shockers" subtitle="Every shocker paired to your hubs.">
       <div class="flex flex-wrap items-center gap-1">
         <Button
           variant="secondary"
@@ -289,9 +288,7 @@
           ><LogsIcon class="size-4" /></Button
         >
       </div>
-    </div>
-
-    <hr class="border-border" />
+    </PageHeader>
 
     {#if shockers.length === 0}
       <EmptyState
@@ -323,7 +320,7 @@
             <div class="flex w-full flex-col gap-3">
               <div class="flex items-center gap-2">
                 <span
-                  class="size-2.5 rounded-full {online ? 'bg-green-400' : 'bg-red-500'}"
+                  class="size-2.5 rounded-full {online ? 'bg-success' : 'bg-destructive'}"
                   title={online ? 'Online' : 'Offline'}
                 ></span>
                 <span class="text-lg font-semibold">{hub.name}</span>
diff --git a/src/routes/(app)/shockers/shared/+page.svelte b/src/routes/(app)/shockers/shared/+page.svelte
index be187a06..64350f57 100644
--- a/src/routes/(app)/shockers/shared/+page.svelte
+++ b/src/routes/(app)/shockers/shared/+page.svelte
@@ -1,6 +1,11 @@
 <script lang="ts">
   import { Copy, Ellipsis, User } from '@lucide/svelte';
-  import { Container, EmptyState, PageHeader } from '@openshock/svelte-core/components';
+  import {
+    Container,
+    EmptyState,
+    PageHeader,
+    PageLoading,
+  } from '@openshock/svelte-core/components';
   import ClassicControlModule from '#lib/components/ControlModules/ClassicControlModule.svelte';
   import LiveButton from '#lib/components/ControlModules/LiveButton.svelte';
   import LiveControlModule from '#lib/components/ControlModules/LiveControlModule.svelte';
@@ -59,9 +64,9 @@
 
 <Container>
   {#if sharedHubsState.value == null}
-    <p>Loading...</p>
+    <PageLoading />
   {:else}
-    <PageHeader title="Shared Shockers" subtitle="Manage shared shockers with other users" />
+    <PageHeader title="Shared Shockers" subtitle="Shockers other users have shared with you." />
 
     {#if !hasSharedShockers}
       <EmptyState
diff --git a/src/routes/(auth)/activate/+page.svelte b/src/routes/(auth)/activate/+page.svelte
index c4911614..03ee67ba 100644
--- a/src/routes/(auth)/activate/+page.svelte
+++ b/src/routes/(auth)/activate/+page.svelte
@@ -34,7 +34,7 @@
 
 <Card.Root>
   <Card.Header class="text-center">
-    <Card.Title class="text-xl">Activate Account</Card.Title>
+    <Card.Title class="text-xl"><h1>Activate Account</h1></Card.Title>
     <Card.Description>
       {#if status === 'activating'}
         Activating your account...
diff --git a/src/routes/(auth)/forgot-password/+page.svelte b/src/routes/(auth)/forgot-password/+page.svelte
index fcdc52ce..296dff85 100644
--- a/src/routes/(auth)/forgot-password/+page.svelte
+++ b/src/routes/(auth)/forgot-password/+page.svelte
@@ -42,7 +42,7 @@
 
 <Card.Root>
   <Card.Header class="text-center">
-    <Card.Title class="text-xl">Forgot Password</Card.Title>
+    <Card.Title class="text-xl"><h1>Forgot Password</h1></Card.Title>
     <Card.Description>Enter your email to reset your password</Card.Description>
   </Card.Header>
   <Card.Content>
diff --git a/src/routes/(auth)/login/+page.svelte b/src/routes/(auth)/login/+page.svelte
index cf2779da..15c3b335 100644
--- a/src/routes/(auth)/login/+page.svelte
+++ b/src/routes/(auth)/login/+page.svelte
@@ -84,7 +84,7 @@
 
 <Card.Root>
   <Card.Header class="text-center">
-    <Card.Title class="text-xl">Welcome back</Card.Title>
+    <Card.Title class="text-xl"><h1>Welcome back</h1></Card.Title>
     <Card.Description>
       {#if backendMetadata.state === null}
         Loading available login methods
diff --git a/src/routes/(auth)/oauth/[provider]/create/+page.svelte b/src/routes/(auth)/oauth/[provider]/create/+page.svelte
index b453c995..7705e318 100644
--- a/src/routes/(auth)/oauth/[provider]/create/+page.svelte
+++ b/src/routes/(auth)/oauth/[provider]/create/+page.svelte
@@ -82,7 +82,7 @@
 <Card.Root>
   <Card.Header class="text-center">
     <Card.Title class="text-xl">
-      Sign Up With <span class="capitalize">{page.params.provider}</span>
+      <h1>Sign Up With <span class="capitalize">{page.params.provider}</span></h1>
     </Card.Title>
     <Card.Description>Complete your account details</Card.Description>
   </Card.Header>
diff --git a/src/routes/(auth)/oauth/error/+page.svelte b/src/routes/(auth)/oauth/error/+page.svelte
index dcc44a1e..1a1f4e4d 100644
--- a/src/routes/(auth)/oauth/error/+page.svelte
+++ b/src/routes/(auth)/oauth/error/+page.svelte
@@ -23,7 +23,7 @@
 {#if errorCode}
   <Card.Root>
     <Card.Header class="text-center">
-      <Card.Title class="text-xl">Authentication Error</Card.Title>
+      <Card.Title class="text-xl"><h1>Authentication Error</h1></Card.Title>
     </Card.Header>
     <Card.Content>
       <p class="text-destructive text-center" role="alert">{getOAuthErrorMessage(errorCode)}</p>
diff --git a/src/routes/(auth)/reset-password/[passwordResetId=guid]/[secret]/+page.svelte b/src/routes/(auth)/reset-password/[passwordResetId=guid]/[secret]/+page.svelte
index 9bddb13b..4c4eb76e 100644
--- a/src/routes/(auth)/reset-password/[passwordResetId=guid]/[secret]/+page.svelte
+++ b/src/routes/(auth)/reset-password/[passwordResetId=guid]/[secret]/+page.svelte
@@ -69,7 +69,7 @@
 
 <Card.Root>
   <Card.Header class="text-center">
-    <Card.Title class="text-xl">Reset Password</Card.Title>
+    <Card.Title class="text-xl"><h1>Reset Password</h1></Card.Title>
     <Card.Description>
       {#if checking}
         Verifying reset link...
diff --git a/src/routes/(auth)/signup/+page.svelte b/src/routes/(auth)/signup/+page.svelte
index 994b1acb..f5aaf3d6 100644
--- a/src/routes/(auth)/signup/+page.svelte
+++ b/src/routes/(auth)/signup/+page.svelte
@@ -108,7 +108,7 @@
 
 <Card.Root>
   <Card.Header class="text-center">
-    <Card.Title class="text-xl">Create your account</Card.Title>
+    <Card.Title class="text-xl"><h1>Create your account</h1></Card.Title>
     <Card.Description>
       {#if backendMetadata.state === null}
         Loading available sign-up methods
diff --git a/src/routes/(auth)/verify-email/+page.svelte b/src/routes/(auth)/verify-email/+page.svelte
index 127d09a2..485bc5c2 100644
--- a/src/routes/(auth)/verify-email/+page.svelte
+++ b/src/routes/(auth)/verify-email/+page.svelte
@@ -34,7 +34,7 @@
 
 <Card.Root>
   <Card.Header class="text-center">
-    <Card.Title class="text-xl">Verify Email</Card.Title>
+    <Card.Title class="text-xl"><h1>Verify Email</h1></Card.Title>
     <Card.Description>
       {#if status === 'verifying'}
         Verifying your email address...
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 15e631bf..e7eb1c65 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -60,7 +60,9 @@
 
   <SidebarProvider open={isOpen} onOpenChange={(v) => (sidebarOpen = v)}>
     <Sidebar />
-    <div class="flex h-screen w-screen flex-1 flex-col overflow-hidden">
+    <!-- `h-svh` matches the sidebar wrapper; `100vh` left the page scrollable by the height of a phone's URL bar.
+         `w-full` because `100vw` counts the scrollbar. -->
+    <div class="flex h-svh w-full flex-1 flex-col overflow-hidden">
       {#if PUBLIC_DEVELOPMENT_BANNER}
         <div class="top-0 left-0 z-1 flex-none bg-[orangered] text-center text-white">
           <p>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index a7678ff3..2c5a26b5 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -21,12 +21,15 @@
 >
   <DotGrid bind:this={grid} />
 
-  <img class="h-10 sm:h-16 md:h-22" src={asset('logo.svg')} alt="OpenShock Logo" />
+  <h1>
+    <img class="h-10 sm:h-16 md:h-22" src={asset('logo.svg')} alt="OpenShock" />
+  </h1>
 
   <p class="relative text-lg opacity-75 md:text-2xl">
     The go-to platform for safe, reliable, real low-latency remote shocking.<br />
     {#if data.ok}
-      <span class="font-semibold">{data.deviceCount}</span> people online right now.
+      <span class="font-semibold">{data.deviceCount}</span>
+      {data.deviceCount === 1 ? 'hub' : 'hubs'} online right now.
     {/if}
   </p>
   <div class="relative flex space-x-4 pt-8 text-sm opacity-75">
diff --git a/src/routes/Footer.svelte b/src/routes/Footer.svelte
index 5cbf7687..a5152bc2 100644
--- a/src/routes/Footer.svelte
+++ b/src/routes/Footer.svelte
@@ -13,7 +13,7 @@
 >
   <div>
     Made with
-    <span style="color: #e25555;">♥</span>
+    <span class="text-[#e25555]">♥</span>
     by the
     <a target="_blank" rel="noopener" href={PUBLIC_GITHUB_PROJECT_URL}>OpenShock Team</a>
   </div>
@@ -29,9 +29,9 @@
             aria-label="Server connection status"
           >
             {#if getConnectionState() === HubConnectionState.Connected}
-              <Wifi class="h-4 w-4 text-green-800" />
+              <Wifi class="text-success h-4 w-4" />
             {:else}
-              <WifiOff class="h-4 w-4 text-red-800" />
+              <WifiOff class="text-destructive h-4 w-4" />
             {/if}
           </Button>
         {/snippet}
@@ -44,10 +44,10 @@
               <td>
                 <p class="flex items-center justify-end gap-2">
                   {#if getConnectionState() === HubConnectionState.Connected}
-                    <Wifi class="h-4 w-4 text-green-800" />
+                    <Wifi class="text-success h-4 w-4" />
                     {getConnectionState()}
                   {:else}
-                    <WifiOff class="h-4 w-4 text-red-800" />
+                    <WifiOff class="text-destructive h-4 w-4" />
                     {getConnectionState()}
                   {/if}
                 </p></td
diff --git a/src/routes/Header.svelte b/src/routes/Header.svelte
index 157f5ada..49d130a9 100644
--- a/src/routes/Header.svelte
+++ b/src/routes/Header.svelte
@@ -30,7 +30,7 @@
 <header class="flex h-12 shrink-0 items-center gap-2 border-b">
   <div class="flex w-full items-center gap-2 px-3">
     <Button variant="ghost" class="size-8" title="Toggle Sidebar" onclick={() => sidebar.toggle()}>
-      <PanelLeft size={24} class="m-0 text-gray-600 dark:text-gray-300" />
+      <PanelLeft size={24} class="text-muted-foreground m-0" />
     </Button>
     <Separator orientation="vertical" class="mr-2 data-vertical:h-4 data-vertical:self-center" />
     <Breadcrumb />
@@ -45,11 +45,11 @@
       <LightSwitch />
 
       {#if userState.loading}
-        <Spinner class="size-8 text-gray-600 dark:text-gray-300" />
+        <Spinner class="text-muted-foreground size-8" />
       {:else if userState.self}
         <DropdownMenu.Root>
           <DropdownMenu.Trigger
-            class="cursor-pointer text-gray-600 select-none hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-200"
+            class="text-muted-foreground hover:text-foreground cursor-pointer select-none"
           >
             <img
               class="inline-block h-8 rounded-full"
@@ -71,10 +71,10 @@
         <Button variant="outline" href={resolve('signup')}>Sign Up <UserPlus /></Button>
         <div class="hidden sm:flex sm:flex-row">
           <a href={PUBLIC_GITHUB_PROJECT_URL} class="p-2" title="Project GitHub">
-            <GithubIcon class="size-6 fill-black dark:fill-white" />
+            <GithubIcon class="fill-foreground size-6" />
           </a>
           <a href={PUBLIC_DISCORD_INVITE_URL} class="p-2" title="Community Discord">
-            <DiscordLogo class="size-6 fill-black dark:fill-white" />
+            <DiscordLogo class="fill-foreground size-6" />
           </a>
         </div>
       {/if}
diff --git a/src/routes/report/api-tokens/+page.svelte b/src/routes/report/api-tokens/+page.svelte
index 6635885d..79cda6c2 100644
--- a/src/routes/report/api-tokens/+page.svelte
+++ b/src/routes/report/api-tokens/+page.svelte
@@ -56,29 +56,33 @@
 
 <Container class="max-w-3xl space-y-6">
   <Card.Header>
-    <Card.Title class="flex items-center justify-between text-3xl font-semibold">
-      Report Leaked API Tokens
+    <Card.Title class="flex items-center justify-between gap-2 text-3xl font-semibold">
+      <h1>Report Leaked API Tokens</h1>
       <Button onclick={pasteFromClipboard} size="sm" variant="outline">Paste from clipboard</Button>
     </Card.Title>
   </Card.Header>
 
   <Card.Content class="space-y-5">
     <!-- Warning Message -->
-    <div class="flex items-start gap-3 rounded-md border-l-4 border-red-500 bg-red-50 p-4">
-      <OctagonAlert class="text-red-600" />
-      <p class="text-sm leading-snug text-red-800">
+    <div
+      class="border-destructive bg-destructive/10 flex items-start gap-3 rounded-md border-l-4 p-4"
+    >
+      <OctagonAlert class="text-destructive" />
+      <p class="text-foreground text-sm leading-snug">
         <strong>This form is only for reporting accidentally leaked API tokens.</strong><br />
         <u>Intentional abuse will result in bans or severe endpoint restrictions.</u>
       </p>
     </div>
 
     <!-- Token Preview -->
-    <span class="mb-2 block text-sm font-medium text-gray-700">Detected Tokens</span>
-    <ScrollArea class="h-48 rounded-md border bg-gray-50 p-3">
+    <span class="text-muted-foreground mb-2 block text-sm font-medium">Detected Tokens</span>
+    <ScrollArea class="bg-muted h-48 rounded-md border p-3">
       {#each secrets as secret (secret)}
         <p
           class="mb-1 rounded px-2 py-1 font-mono text-sm break-all
-                {isValid(secret) ? 'bg-green-200 text-gray-800' : 'bg-red-200 text-red-700'}"
+                {isValid(secret)
+            ? 'bg-success/15 border-success border-l-2'
+            : 'bg-destructive/15 border-destructive border-l-2'}"
         >
           {secret}
         </p>
@@ -86,7 +90,7 @@
     </ScrollArea>
     {#if !isAllValid}
       <div
-        class="mt-2 flex items-start gap-2 rounded-md border border-red-200 bg-red-50 p-3 text-sm text-red-700"
+        class="border-destructive/40 bg-destructive/10 text-foreground mt-2 flex items-start gap-2 rounded-md border p-3 text-sm"
       >
         <span> One or more tokens appear to be invalid. Please check for formatting issues. </span>
       </div>
diff --git a/src/routes/shares/public/[shareId=guid]/+page.svelte b/src/routes/shares/public/[shareId=guid]/+page.svelte
index 0010f233..c54a41b6 100644
--- a/src/routes/shares/public/[shareId=guid]/+page.svelte
+++ b/src/routes/shares/public/[shareId=guid]/+page.svelte
@@ -62,9 +62,9 @@
     <ControlView {shareLinkRoot} {guestName} />
   {:else}
     <div class="flex h-full w-full items-center justify-center">
-      <Card.Root class="w-[400px]">
+      <Card.Root class="w-full max-w-sm">
         <Card.Header class="text-center">
-          <Card.Title class="text-xl">Public Share Link</Card.Title>
+          <Card.Title class="text-xl"><h1>Public Share Link</h1></Card.Title>
           <Card.Description>Enter as a guest or login with your OpenShock account</Card.Description>
         </Card.Header>
         <Card.Content class="flex flex-col gap-2">
@@ -94,5 +94,5 @@
     </div>
   {/if}
 {:catch error}
-  <p style="color: red">{error.message}</p>
+  <p class="text-destructive">{error.message}</p>
 {/await}
diff --git a/src/routes/shares/public/[shareId=guid]/ControlView.svelte b/src/routes/shares/public/[shareId=guid]/ControlView.svelte
index 18928808..e3a9cb81 100644
--- a/src/routes/shares/public/[shareId=guid]/ControlView.svelte
+++ b/src/routes/shares/public/[shareId=guid]/ControlView.svelte
@@ -95,8 +95,8 @@
       <h1 class="text-2xl font-bold">Public Share: {shareLinkRoot.name}</h1>
       <p
         class={shareLinkSignalr.getState() === HubConnectionState.Connected
-          ? 'text-green-500'
-          : 'text-red-500'}
+          ? 'text-success'
+          : 'text-destructive'}
       >
         {shareLinkSignalr.getState()}
       </p>
@@ -114,7 +114,7 @@
       <Tooltip.Root>
         <Tooltip.Trigger>
           <span
-            class="mr-10 flex flex-row items-center rounded-md px-4 py-2 outline-1 outline-gray-500"
+            class="outline-muted-foreground/50 mr-10 flex flex-row items-center rounded-md px-4 py-2 outline-1"
           >
             <Avatar.Root class="h-10 w-10">
               <Avatar.Image src={shareLinkRoot.author.image} alt="User Avatar" />
diff --git a/src/routes/terminal/+page.svelte b/src/routes/terminal/+page.svelte
index d5b3a610..2feecdb4 100644
--- a/src/routes/terminal/+page.svelte
+++ b/src/routes/terminal/+page.svelte
@@ -204,8 +204,8 @@
   <div class="min-h-0 flex-1 overflow-y-auto">
     <Container>
       <Card.Header class="w-full">
-        <Card.Title class="flex items-center justify-between space-x-2 text-3xl">
-          Serial Terminal
+        <Card.Title class="flex items-center justify-between gap-2 text-3xl">
+          <h1>Serial Terminal</h1>
           {#if serial}
             <Button variant="outline" onclick={() => (showHelpDialog = true)}>
               <MessageCircleQuestionMark />
@@ -278,7 +278,7 @@
                       <button
                         class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-sm font-semibold transition-colors
                         {isCompleted
-                          ? 'bg-green-500 text-white'
+                          ? 'bg-success text-success-foreground'
                           : isCurrent
                             ? 'bg-primary text-primary-foreground'
                             : 'border-muted-foreground/30 text-muted-foreground/50 border-2'}"
@@ -296,7 +296,7 @@
                       {#if !isLast}
                         <div
                           class="w-0.5 flex-1 {isCompleted
-                            ? 'bg-green-500/40'
+                            ? 'bg-success/40'
                             : 'bg-muted-foreground/20'}"
                           style="min-height: 1.5rem;"
                         ></div>
@@ -355,7 +355,7 @@
                               disabled={isFlashing}
                             />
 
-                            <div class="items-top flex space-x-2">
+                            <div class="flex items-start gap-2">
                               <Checkbox id="erase-before-flash" bind:checked={eraseBeforeFlash} />
                               <div class="grid gap-1.5 leading-none">
                                 <Label
diff --git a/src/routes/terminal/DeviceConfigurator.svelte b/src/routes/terminal/DeviceConfigurator.svelte
index da5bc6c1..239ff245 100644
--- a/src/routes/terminal/DeviceConfigurator.svelte
+++ b/src/routes/terminal/DeviceConfigurator.svelte
@@ -257,11 +257,6 @@
     if (stripped.length === 0 || stripped.length % 4 !== 0) return false;
     return /^[A-Za-z0-9+/]+={0,2}$/.test(stripped);
   }
-
-  function handleFactoryReset() {
-    confirmFactoryResetOpen = false;
-    send('factoryreset');
-  }
 </script>
 
 <div class="flex flex-col gap-4">
@@ -689,7 +684,7 @@
   bind:open={confirmFactoryResetOpen}
   title="Factory reset device?"
   actionLabel="Wipe config"
-  onConfirm={handleFactoryReset}
+  onConfirm={() => send('factoryreset')}
 >
   {#snippet description()}
     This will erase all configuration on the device; WiFi networks, backend credentials, pins, and
diff --git a/src/routes/terminal/FirmwareFlasher.svelte b/src/routes/terminal/FirmwareFlasher.svelte
index b250591a..5650ee16 100644
--- a/src/routes/terminal/FirmwareFlasher.svelte
+++ b/src/routes/terminal/FirmwareFlasher.svelte
@@ -106,8 +106,8 @@
   <div class="flex flex-col items-start justify-start gap-2 p-2">
     {#if error}
       <div class="flex flex-row items-center justify-start gap-2">
-        <TriangleAlert color="#ef4444" />
-        <p class="text-red-500">Error: {error}</p>
+        <TriangleAlert class="text-destructive" />
+        <p class="text-destructive">Error: {error}</p>
       </div>
     {:else}
       <span>
diff --git a/src/routes/terminal/HelpDialog.svelte b/src/routes/terminal/HelpDialog.svelte
index f67a4134..5ef321df 100644
--- a/src/routes/terminal/HelpDialog.svelte
+++ b/src/routes/terminal/HelpDialog.svelte
@@ -31,7 +31,7 @@
 
 <Dialog.Root bind:open={() => open, onOpenChange}>
   <Dialog.Content
-    class="flex h-[90vh] max-h-[90vh] w-[95vw] max-w-[95vw] flex-col gap-4 sm:w-[90vw] sm:max-w-4xl lg:max-w-5xl xl:max-w-6xl"
+    class="flex h-[90dvh] w-[95vw] max-w-[95vw] flex-col gap-4 sm:w-[90vw] sm:max-w-4xl lg:max-w-5xl xl:max-w-6xl"
   >
     <Dialog.Header>
       <Dialog.Title>
@@ -128,7 +128,7 @@
       <li>any error messages or relevant terminal output</li>
     </ul>
     <Button href={PUBLIC_DISCORD_INVITE_URL} target="_blank" rel="noopener" class="w-fit">
-      <DiscordLogo class="fill-white dark:fill-black" />
+      <DiscordLogo class="fill-current" />
       Join our Discord server
     </Button>
   </div>
diff --git a/src/routes/terminal/RiskAcknowledgementModal.svelte b/src/routes/terminal/RiskAcknowledgementModal.svelte
index 8192a71b..68b3ca96 100644
--- a/src/routes/terminal/RiskAcknowledgementModal.svelte
+++ b/src/routes/terminal/RiskAcknowledgementModal.svelte
@@ -18,15 +18,15 @@
       <Dialog.Title>⚠️ UNSTABLE FIRMWARE</Dialog.Title>
       <Dialog.Description class="space-y-3">
         <p>
-          You are about to flash <strong class="text-red-500">experimental firmware</strong>
-          that is <strong class="text-red-500">known to be unstable</strong>.
+          You are about to flash <strong class="text-destructive">experimental firmware</strong>
+          that is <strong class="text-destructive">known to be unstable</strong>.
         </p>
 
         <p>
           This may permanently brick your device, require manual recovery, or render it unusable.
         </p>
 
-        <p class="font-semibold text-red-500">
+        <p class="text-destructive font-semibold">
           We will NOT provide support for issues caused by this firmware.
         </p>
       </Dialog.Description>
diff --git a/src/routes/terminal/SerialPortSelector.svelte b/src/routes/terminal/SerialPortSelector.svelte
index 458987a2..b72f7a12 100644
--- a/src/routes/terminal/SerialPortSelector.svelte
+++ b/src/routes/terminal/SerialPortSelector.svelte
@@ -79,14 +79,14 @@
   {#if port !== null || (errorMessage !== null && errorMessage.name !== 'NotFoundError')}
     <div class="p-2">
       {#if port !== null}
-        <p class="text-green-500">
+        <p class="text-success">
           Device connected: <span class="font-bold">{GetHardwareID(port)}</span>
         </p>
       {/if}
       {#if errorMessage !== null && errorMessage.name !== 'NotFoundError'}
         <div class="flex flex-row items-center justify-start gap-2">
-          <TriangleAlert color="#eab308" />
-          <p class="text-yellow-500">Error: {errorMessage.message}</p>
+          <TriangleAlert class="text-warning" />
+          <p class="text-warning">Error: {errorMessage.message}</p>
         </div>
       {/if}
     </div>
diff --git a/src/routes/terminal/SerialTerminal.svelte b/src/routes/terminal/SerialTerminal.svelte
index d1825bd5..ffdf1753 100644
--- a/src/routes/terminal/SerialTerminal.svelte
+++ b/src/routes/terminal/SerialTerminal.svelte
@@ -257,7 +257,7 @@
 
   <!-- Output area -->
   <div
-    class="flex-1 overflow-y-auto bg-black/5 p-2 font-mono text-xs dark:bg-black/30"
+    class="bg-muted dark:bg-background flex-1 overflow-y-auto p-2 font-mono text-xs"
     bind:this={scrollContainer}
     onscroll={handleScroll}
     role="log"