diff --git a/src/lib/api/index.ts b/src/lib/api/index.ts
index 9b621900..de30d4db 100644
--- a/src/lib/api/index.ts
+++ b/src/lib/api/index.ts
@@ -56,6 +56,7 @@ export {
   publicGetOnlineDevicesStatistics,
   publicGetPublicShare,
   sessionsDeleteSession,
+  sessionsGetSelfSession,
   sessionsListSessions,
   shareLinksAddShocker,
   shareLinksCreatePublicShare,
diff --git a/src/lib/components/Table/DataTableTemplate.svelte b/src/lib/components/Table/DataTableTemplate.svelte
index 246fb8eb..a49324ec 100644
--- a/src/lib/components/Table/DataTableTemplate.svelte
+++ b/src/lib/components/Table/DataTableTemplate.svelte
@@ -84,7 +84,7 @@
   });
 </script>
 
-<div class={cn('overflow-y-auto rounded-md border', className)}>
+<div class={cn('overflow-x-auto rounded-md border', className)}>
   <Table.Root>
     <Table.Header>
       {#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
diff --git a/src/routes/(app)/home/+page.svelte b/src/routes/(app)/home/+page.svelte
index 40b55940..b09ba415 100644
--- a/src/routes/(app)/home/+page.svelte
+++ b/src/routes/(app)/home/+page.svelte
@@ -33,7 +33,7 @@
     </div>
 
     <!-- Stats cards -->
-    <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
+    <div class="grid grid-cols-2 gap-4 sm:grid-cols-3">
       <Card.Root>
         <Card.Header class="flex flex-row items-center justify-between pb-2">
           <Card.Title class="text-sm font-medium">Shockers</Card.Title>
@@ -83,7 +83,7 @@
     <!-- Quick links -->
     <div>
       <h2 class="mb-3 text-lg font-semibold">Quick Links</h2>
-      <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4">
+      <div class="grid grid-cols-2 gap-3 lg:grid-cols-4">
         <Button
           variant="outline"
           class="h-auto justify-start gap-3 p-4"
diff --git a/src/routes/(app)/hubs/[hubId=guid]/update/+page.svelte b/src/routes/(app)/hubs/[hubId=guid]/update/+page.svelte
index e73adf34..4db82fcc 100644
--- a/src/routes/(app)/hubs/[hubId=guid]/update/+page.svelte
+++ b/src/routes/(app)/hubs/[hubId=guid]/update/+page.svelte
@@ -356,38 +356,40 @@
             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)}
+          <div class="overflow-x-auto">
+            <Table.Root class="w-full">
+              <Table.Header>
                 <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.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>
-              {/each}
-            </Table.Body>
-          </Table.Root>
+              </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>
+          </div>
         {/if}
       </Card.Content>
     </Card.Root>
diff --git a/src/routes/(app)/profile/+page.svelte b/src/routes/(app)/profile/+page.svelte
index 755a6415..815c82cd 100644
--- a/src/routes/(app)/profile/+page.svelte
+++ b/src/routes/(app)/profile/+page.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <Container>
-  <h1 class="text-3xl font-bold">Profile</h1>
+  <h1 class="hidden text-3xl font-bold sm:block">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"
   >
diff --git a/src/routes/(app)/settings/api-tokens/+page.svelte b/src/routes/(app)/settings/api-tokens/+page.svelte
index 9f2f9027..fbe1179c 100644
--- a/src/routes/(app)/settings/api-tokens/+page.svelte
+++ b/src/routes/(app)/settings/api-tokens/+page.svelte
@@ -6,7 +6,7 @@
   import RotateCcw from '@lucide/svelte/icons/rotate-ccw';
   import type { SortingState } from '@tanstack/table-core';
   import type { ColumnDef } from '@tanstack/table-core';
-  import { Container } from '@openshock/svelte-core/components/index.js';
+  import { Container, PageHeader } from '@openshock/svelte-core/components/index.js';
   import {
     CreateActionsColumnDef,
     CreateColumnDef,
@@ -17,7 +17,6 @@
   } from '$lib/components/Table/ColumnUtils';
   import DataTable from '$lib/components/Table/DataTableTemplate.svelte';
   import { Button } from '@openshock/svelte-core/components/ui/button/index.js';
-  import * as Card from '@openshock/svelte-core/components/ui/card/index.js';
   import { handleApiError } from '$lib/errorhandling/apiErrorHandling';
   import { onMount } from 'svelte';
   import { toast } from 'svelte-sonner';
@@ -73,23 +72,18 @@
 </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>
-  <Card.Content class="flex w-full flex-col space-y-4">
-    <DataTable data={tokens} {columns} {sorting} />
-  </Card.Content>
+  <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 onclick={refresh}>
+      <RotateCcw />
+      Refresh
+    </Button>
+  </PageHeader>
+  <DataTable data={tokens} {columns} {sorting} />
 </Container>
diff --git a/src/routes/(app)/settings/api-tokens/new/+page.svelte b/src/routes/(app)/settings/api-tokens/new/+page.svelte
index fb337217..308c8f54 100644
--- a/src/routes/(app)/settings/api-tokens/new/+page.svelte
+++ b/src/routes/(app)/settings/api-tokens/new/+page.svelte
@@ -195,7 +195,7 @@
 </script>
 
 <Container class="items-center-safe justify-center-safe overflow-y-auto">
-  <Card.Root class="w-lg max-w-2xl shrink-0">
+  <Card.Root class="w-full max-w-2xl shrink-0">
     {#if parseError}
       <Card.Header>
         <Card.Title class="text-2xl">API Token Request</Card.Title>
diff --git a/src/routes/(app)/settings/connections/+page.svelte b/src/routes/(app)/settings/connections/+page.svelte
index a3e43d73..15af740b 100644
--- a/src/routes/(app)/settings/connections/+page.svelte
+++ b/src/routes/(app)/settings/connections/+page.svelte
@@ -7,10 +7,8 @@
   import { page } from '$app/state';
   import type { OAuthConnectionResponse } from '$lib/api';
   import { GetOAuthAuthorizeUrl } from '$lib/api/next/oauth';
-  import { Container } from '@openshock/svelte-core/components/index.js';
+  import { Container, PageHeader, EmptyState } from '@openshock/svelte-core/components/index.js';
   import { Button } from '@openshock/svelte-core/components/ui/button/index.js';
-  import * as Card from '@openshock/svelte-core/components/ui/card/index.js';
-  import { EmptyState } from '@openshock/svelte-core/components/index.js';
   import * as Dropdown from '@openshock/svelte-core/components/ui/dropdown-menu/index.js';
   import * as Separator from '@openshock/svelte-core/components/ui/separator/index.js';
   import { handleApiError } from '$lib/errorhandling/apiErrorHandling';
@@ -97,22 +95,17 @@
 </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={loading} aria-busy={loading}>
-          <RotateCcw class="mr-2 size-4" />
-          {loading ? '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>
-
-  <Card.Content class="flex w-full flex-1 flex-col space-y-6">
+  <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={loading} aria-busy={loading}>
+      <RotateCcw class="size-4" />
+      {loading ? 'Refreshing…' : 'Refresh'}
+    </Button>
+  </PageHeader>
+
+  <div class="w-full space-y-6">
     <!-- Quick actions -->
     <div class="flex flex-wrap gap-2">
       <Dropdown.Root>
@@ -194,7 +187,7 @@
         {/each}
       </div>
     {/if}
-  </Card.Content>
+  </div>
 </Container>
 
 <!-- Confirm dialog lives once at root -->
diff --git a/src/routes/(app)/settings/sessions/+page.svelte b/src/routes/(app)/settings/sessions/+page.svelte
index 962f40b3..eb9e3262 100644
--- a/src/routes/(app)/settings/sessions/+page.svelte
+++ b/src/routes/(app)/settings/sessions/+page.svelte
@@ -1,72 +1,50 @@
 <script lang="ts">
-  import { sessionsListSessions } from '$lib/api';
+  import { sessionsListSessions, sessionsGetSelfSession } from '$lib/api';
   import type { LoginSessionResponse } from '$lib/api';
-  import RotateCcw from '@lucide/svelte/icons/rotate-ccw';
-  import type { ColumnDef, SortingState } from '@tanstack/table-core';
-  import { Container } from '@openshock/svelte-core/components/index.js';
-  import {
-    CreateActionsColumnDef,
-    CreateColumnDef,
-    CreateSortableColumnDef,
-    RenderCell,
-    TimeSinceRelativeOrNeverRenderer,
-    TimeSinceRelativeRenderer,
-    UserAgentRenderer,
-  } from '$lib/components/Table/ColumnUtils';
-  import DataTable from '$lib/components/Table/DataTableTemplate.svelte';
-  import { Button } from '@openshock/svelte-core/components/ui/button/index.js';
-  import * as Card from '@openshock/svelte-core/components/ui/card/index.js';
+  import { Container, PageHeader } from '@openshock/svelte-core/components/index.js';
   import { handleApiError } from '$lib/errorhandling/apiErrorHandling';
   import { onMount } from 'svelte';
-  import { toast } from 'svelte-sonner';
   import { registerBreadcrumbs } from '$lib/state/breadcrumbs-state.svelte';
-  import DataTableActions from './data-table-actions.svelte';
+  import SessionCard from './session-card.svelte';
 
   registerBreadcrumbs(() => [
     { label: 'Settings', href: '/settings/account' },
     { label: 'Sessions' },
   ]);
 
-  let data = $state<LoginSessionResponse[]>([]);
-  let sorting = $state<SortingState>([]);
+  let sessions = $state<LoginSessionResponse[]>([]);
+  let currentSessionId = $state<string | null>(null);
 
   function onRevoked(sessionId: string) {
-    const idx = data.findIndex((session) => session.id === sessionId);
-    if (idx === -1) return;
-
-    data.splice(idx, 1);
+    const idx = sessions.findIndex((s) => s.id === sessionId);
+    if (idx !== -1) sessions.splice(idx, 1);
   }
 
-  const columns: ColumnDef<LoginSessionResponse>[] = [
-    CreateColumnDef('ip', 'Ip', RenderCell),
-    CreateSortableColumnDef('userAgent', 'User Agent', UserAgentRenderer),
-    CreateSortableColumnDef('created', 'Created', TimeSinceRelativeRenderer),
-    CreateSortableColumnDef('expires', 'Expires', TimeSinceRelativeRenderer),
-    CreateSortableColumnDef('lastUsed', 'Last seen', TimeSinceRelativeOrNeverRenderer),
-    CreateActionsColumnDef(DataTableActions, (session) => ({ session, onRevoked })),
-  ];
+  // Sort so current session is always first
+  const sortedSessions = $derived(
+    [...sessions].sort((a, b) => {
+      if (a.id === currentSessionId) return -1;
+      if (b.id === currentSessionId) return 1;
+      return 0;
+    })
+  );
 
   async function fetchSessions() {
     try {
-      data = await sessionsListSessions();
+      [sessions, { id: currentSessionId }] = await Promise.all([
+        sessionsListSessions(),
+        sessionsGetSelfSession(),
+      ]);
     } catch (error) {
       await handleApiError(error);
     }
   }
 
-  async function onRefreshClicked() {
-    await fetchSessions();
-    toast.success('Sessions refreshed successfully');
-  }
-
   onMount(() => {
     fetchSessions();
 
-    // Update timestamps every 5 seconds
     const interval = setInterval(() => {
-      if (data) {
-        data = Object.assign([], data);
-      }
+      if (sessions.length) sessions = [...sessions];
     }, 5000);
 
     return () => clearInterval(interval);
@@ -74,20 +52,14 @@
 </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}>
-        <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>
-  <Card.Content class="w-full">
-    <DataTable {data} {columns} {sorting} />
-  </Card.Content>
+  <PageHeader
+    title="Sessions"
+    subtitle="This is a list of all active sessions of your account. Revoke any sessions you do not recognize."
+  />
+
+  <div class="flex w-full flex-col gap-3">
+    {#each sortedSessions as session (session.id)}
+      <SessionCard {session} isCurrent={session.id === currentSessionId} {onRevoked} />
+    {/each}
+  </div>
 </Container>
diff --git a/src/routes/(app)/settings/sessions/data-table-actions.svelte b/src/routes/(app)/settings/sessions/data-table-actions.svelte
deleted file mode 100644
index 646bd8a7..00000000
--- a/src/routes/(app)/settings/sessions/data-table-actions.svelte
+++ /dev/null
@@ -1,39 +0,0 @@
-<script lang="ts">
-  import type { LoginSessionResponse } from '$lib/api';
-  import { TableActionMenu } from '@openshock/svelte-core/components/index.js';
-  import * as DropdownMenu from '@openshock/svelte-core/components/ui/dropdown-menu/index.js';
-  import { copyToClipboard } from '@openshock/svelte-core/utils/clipboard.svelte.js';
-  import { Ban, Copy } from '@lucide/svelte';
-  import SessionRevokeDialog from './dialog-session-revoke.svelte';
-
-  interface Props {
-    session: LoginSessionResponse;
-    onRevoked: (sessionId: string) => void;
-  }
-
-  let { session, onRevoked }: Props = $props();
-
-  let revokeDialogOpen = $state<boolean>(false);
-
-  const copyId = () => copyToClipboard(session.id, 'ID copied to clipboard');
-</script>
-
-<SessionRevokeDialog bind:open={revokeDialogOpen} {session} {onRevoked} />
-
-<TableActionMenu>
-  <DropdownMenu.Label>Session</DropdownMenu.Label>
-  <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>
diff --git a/src/routes/(app)/settings/sessions/session-card.svelte b/src/routes/(app)/settings/sessions/session-card.svelte
new file mode 100644
index 00000000..dce0cd4c
--- /dev/null
+++ b/src/routes/(app)/settings/sessions/session-card.svelte
@@ -0,0 +1,109 @@
+<script lang="ts">
+  import type { LoginSessionResponse } from '$lib/api';
+  import { Badge } from '@openshock/svelte-core/components/ui/badge/index.js';
+  import { Button } from '@openshock/svelte-core/components/ui/button/index.js';
+  import { formatElapsed, durationBetween } from '@openshock/svelte-core/utils/index.js';
+  import { getReadableUserAgentName } from '$lib/utils/userAgent';
+  import { UAParser } from 'ua-parser-js';
+  import Monitor from '@lucide/svelte/icons/monitor';
+  import Smartphone from '@lucide/svelte/icons/smartphone';
+  import Tablet from '@lucide/svelte/icons/tablet';
+  import Cpu from '@lucide/svelte/icons/cpu';
+  import Tv from '@lucide/svelte/icons/tv';
+  import Gamepad2 from '@lucide/svelte/icons/gamepad-2';
+  import X from '@lucide/svelte/icons/x';
+  import SessionRevokeDialog from './dialog-session-revoke.svelte';
+
+  interface Props {
+    session: LoginSessionResponse;
+    isCurrent: boolean;
+    onRevoked: (sessionId: string) => void;
+  }
+
+  let { session, isCurrent, onRevoked }: Props = $props();
+
+  let revokeDialogOpen = $state(false);
+
+  const deviceIconMap: Record<string, typeof Monitor> = {
+    mobile: Smartphone,
+    tablet: Tablet,
+    embedded: Cpu,
+    smarttv: Tv,
+    console: Gamepad2,
+  };
+
+  const DeviceIcon = $derived.by(() => {
+    const ua = new UAParser(session.userAgent);
+    const type = ua.getDevice().type ?? 'desktop';
+    return deviceIconMap[type] ?? Monitor;
+  });
+
+  const readableName = $derived(
+    getReadableUserAgentName(session.userAgent) ?? session.userAgent ?? 'Unknown device'
+  );
+
+  const now = $derived(Temporal.Now.instant());
+
+  // Past events: durationBetween(now, pastInstant) → negative → "X ago"
+  const lastSeenText = $derived(
+    session.lastUsed ? formatElapsed(durationBetween(now, session.lastUsed)) : 'Never'
+  );
+  const createdText = $derived(formatElapsed(durationBetween(now, session.created)));
+  // Future event: durationBetween(now, futureInstant) → positive → "in X"
+  const expiresText = $derived(formatElapsed(durationBetween(now, session.expires)));
+</script>
+
+<SessionRevokeDialog bind:open={revokeDialogOpen} {session} {onRevoked} />
+
+<div
+  class="flex flex-col gap-3 rounded-lg border p-4 transition-colors {isCurrent
+    ? 'border-green-600/50 bg-green-950/20'
+    : 'hover:bg-muted/30'}"
+>
+  <!-- Header row: icon + name + badge + revoke -->
+  <div class="flex items-start gap-3">
+    <div
+      class="mt-0.5 shrink-0 rounded-md p-1.5 {isCurrent
+        ? 'bg-green-900/40 text-green-400'
+        : 'bg-muted text-muted-foreground'}"
+    >
+      <DeviceIcon class="size-5" />
+    </div>
+
+    <div class="min-w-0 flex-1">
+      <div class="flex items-center gap-2 overflow-hidden">
+        <span class="min-w-0 truncate font-semibold leading-tight">{readableName}</span>
+        {#if isCurrent}
+          <Badge variant="outline" class="shrink-0 border-green-600 text-xs text-green-400">
+            This device
+          </Badge>
+        {/if}
+      </div>
+      <div class="text-muted-foreground mt-0.5 font-mono text-xs">{session.ip}</div>
+    </div>
+
+    {#if !isCurrent}
+      <Button
+        variant="ghost"
+        size="icon"
+        class="text-muted-foreground hover:text-destructive hover:bg-destructive/10 shrink-0"
+        onclick={() => (revokeDialogOpen = true)}
+        title="Revoke session"
+      >
+        <X class="size-4" />
+      </Button>
+    {/if}
+  </div>
+
+  <!-- Timestamps -->
+  <div class="text-muted-foreground flex flex-col gap-0.5 pl-10 text-sm">
+    {#if !isCurrent}
+      <span>Last seen {lastSeenText}</span>
+    {/if}
+    <span>
+      Created {createdText}
+      {#if !isCurrent}
+        · Expires {expiresText}{/if}
+    </span>
+  </div>
+</div>
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 9c6d3b30..086fb119 100644
--- a/src/routes/(app)/shares/public/[shareId=guid]/edit/+page.svelte
+++ b/src/routes/(app)/shares/public/[shareId=guid]/edit/+page.svelte
@@ -109,19 +109,35 @@
 <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 class="flex flex-col gap-3">
+    <div class="flex items-start justify-between gap-2">
+      <div class="flex flex-col">
+        <h1 class="hidden text-2xl font-bold sm:block">
+          Public Share: {publicShareData?.name ?? 'Loading...'}
+        </h1>
+        <p class="text-muted-foreground text-sm">Editing — changes apply when you save.</p>
+      </div>
+      {#if publicShareData}
+        <Tooltip.Root>
+          <Tooltip.Trigger>
+            <span
+              class="flex flex-row items-center gap-2 rounded-md px-2 py-1 outline-1 outline-gray-500"
+            >
+              <Avatar.Root class="h-7 w-7">
+                <Avatar.Image src={publicShareData.author.image} alt="User Avatar" />
+                <Avatar.Fallback>{publicShareData.author.name.charAt(0)}</Avatar.Fallback>
+              </Avatar.Root>
+              <p class="hidden text-sm sm:block">{publicShareData.author.name}</p>
+            </span>
+          </Tooltip.Trigger>
+          <Tooltip.Content><p>Shared by {publicShareData.author.name}</p></Tooltip.Content>
+        </Tooltip.Root>
+      {/if}
     </div>
 
-    <div class="flex items-center">
-      <CopyInput value={shareUrl.href} displayValue={shareUrl.host + shareUrl.pathname} />
-    </div>
+    <CopyInput value={shareUrl.href} displayValue={shareUrl.host + shareUrl.pathname} />
 
-    <div class="flex items-center justify-end gap-2">
+    <div class="flex flex-wrap gap-2">
       <Button variant="outline" href={publicUrl}>
         <ExternalLink />
         View
@@ -138,27 +154,6 @@
         <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>
 
diff --git a/src/routes/(app)/shares/user/incoming/+page.svelte b/src/routes/(app)/shares/user/incoming/+page.svelte
index 69d8d2b2..16ef6252 100644
--- a/src/routes/(app)/shares/user/incoming/+page.svelte
+++ b/src/routes/(app)/shares/user/incoming/+page.svelte
@@ -41,7 +41,7 @@
       description="No one has shared a shocker with you yet."
     />
   {:else}
-    <div class="mb-6 overflow-y-auto rounded-md border">
+    <div class="mb-6 overflow-x-auto rounded-md border">
       <Table.Root>
         <Table.Body>
           {#each userSharesState.shares.incoming as incomingShare, i (incomingShare.id)}
diff --git a/src/routes/(app)/shares/user/invites/+page.svelte b/src/routes/(app)/shares/user/invites/+page.svelte
index 7960fdd4..09d955c9 100644
--- a/src/routes/(app)/shares/user/invites/+page.svelte
+++ b/src/routes/(app)/shares/user/invites/+page.svelte
@@ -44,7 +44,7 @@
         class="mb-6"
       />
     {:else}
-      <div class="mb-6 overflow-y-auto rounded-md border">
+      <div class="mb-6 overflow-x-auto rounded-md border">
         <Table.Root>
           <Table.Body>
             {#each userSharesState.outgoingInvites as invite (invite.id)}
@@ -65,7 +65,7 @@
         class="mb-6"
       />
     {:else}
-      <div class="mb-6 overflow-y-auto rounded-md border">
+      <div class="mb-6 overflow-x-auto rounded-md border">
         <Table.Root>
           <Table.Body>
             {#each userSharesState.incomingInvites as invite (invite.id)}
diff --git a/src/routes/(app)/shares/user/outgoing/+page.svelte b/src/routes/(app)/shares/user/outgoing/+page.svelte
index 1cbf69f6..c9cfc9de 100644
--- a/src/routes/(app)/shares/user/outgoing/+page.svelte
+++ b/src/routes/(app)/shares/user/outgoing/+page.svelte
@@ -40,7 +40,7 @@
       description="You haven't shared any shockers with other users yet."
     />
   {:else}
-    <div class="mb-6 overflow-y-auto rounded-md border">
+    <div class="mb-6 overflow-x-auto rounded-md border">
       <Table.Root>
         <Table.Body>
           {#each userSharesState.shares.outgoing as userShare, i (userShare.id)}
diff --git a/src/routes/(app)/shockers/own/+page.svelte b/src/routes/(app)/shockers/own/+page.svelte
index a9aecea5..2674b6b0 100644
--- a/src/routes/(app)/shockers/own/+page.svelte
+++ b/src/routes/(app)/shockers/own/+page.svelte
@@ -193,7 +193,7 @@
     </div>
   {:else}
     <div class="flex w-full flex-wrap items-center justify-between gap-2">
-      <h1 class="text-2xl font-bold">Shockers</h1>
+      <h1 class="hidden text-2xl font-bold sm:block">Shockers</h1>
       <div class="flex flex-wrap items-center gap-1">
         <Button
           variant="secondary"
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index a1c282cb..4b779ae4 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -60,7 +60,7 @@
 
   <SidebarProvider open={isOpen} onOpenChange={(v) => (sidebarOpen = v)}>
     <Sidebar />
-    <div class="flex h-screen w-screen flex-1 flex-col overflow-hidden">
+    <div class="flex h-screen w-full flex-1 flex-col overflow-hidden">
       {#if PUBLIC_DEVELOPMENT_BANNER === 'true'}
         <div class="top-0 left-0 z-1 flex-none bg-[orangered] text-center text-white">
           <p>
@@ -70,7 +70,7 @@
         </div>
       {/if}
       <Header />
-      <main class="min-h-0 flex-1 overflow-x-hidden">
+      <main class="min-h-0 flex-1 overflow-x-hidden overflow-y-auto">
         {@render children?.()}
       </main>
       <Footer />
diff --git a/src/routes/Header.svelte b/src/routes/Header.svelte
index dbc5fc61..f22de801 100644
--- a/src/routes/Header.svelte
+++ b/src/routes/Header.svelte
@@ -2,6 +2,7 @@
   /* eslint-disable svelte/no-navigation-without-resolve -- uses prefixBase for dynamic navigation and external URLs */
 
   import PanelLeft from '@lucide/svelte/icons/panel-left';
+  import ChevronLeft from '@lucide/svelte/icons/chevron-left';
   import { goto } from '$app/navigation';
   import type { Pathname } from '$app/types';
   import { PUBLIC_DISCORD_INVITE_URL, PUBLIC_GITHUB_PROJECT_URL } from '$env/static/public';
@@ -19,8 +20,20 @@
   import { resolve } from '$app/paths';
   import { LogIn, UserPlus } from '@lucide/svelte';
   import { Spinner } from '@openshock/svelte-core/components/ui/spinner/index.js';
+  import { breadcrumbs } from '$lib/state/breadcrumbs-state.svelte';
+  import { page } from '$app/state';
 
   let sidebar = useSidebar();
+
+  let crumbs = $derived(breadcrumbs.state);
+  let currentLabel = $derived(crumbs[crumbs.length - 1]?.label ?? '');
+  let parentCandidate = $derived(crumbs.length >= 2 ? crumbs[crumbs.length - 2] : null);
+  // Only show back button when parent href differs from current URL (otherwise it's a no-op)
+  let parent = $derived(
+    parentCandidate?.href && prefixBase(parentCandidate.href) !== page.url.pathname
+      ? parentCandidate
+      : null
+  );
 </script>
 
 {#snippet dropdownItem(name: string, url: Pathname)}
@@ -30,8 +43,72 @@
   </DropdownMenu.Item>
 {/snippet}
 
+{#snippet userMenu()}
+  {#if userState.loading}
+    <Spinner class="size-8 text-gray-600 dark:text-gray-300" />
+  {: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"
+      >
+        <img
+          class="inline-block h-8 rounded-full"
+          src={userState.self.avatar}
+          alt="{userState.self.name}'s avatar"
+        />
+        <p class="hidden lg:inline-block">{userState.self.name}</p>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content>
+        <DropdownMenu.Group>
+          {@render dropdownItem('Profile', '/profile')}
+          {@render dropdownItem('Settings', '/settings/account')}
+          {@render dropdownItem('Logout', '/logout')}
+        </DropdownMenu.Group>
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  {:else}
+    <Button variant="outline" href={resolve('/login')}>Login <LogIn /></Button>
+    <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" />
+      </a>
+      <a href={PUBLIC_DISCORD_INVITE_URL} class="p-2" title="Community Discord">
+        <DiscordLogo class="size-6 fill-black dark:fill-white" />
+      </a>
+    </div>
+  {/if}
+{/snippet}
+
 <header class="flex h-12 shrink-0 items-center gap-2 border-b">
-  <div class="flex w-full items-center gap-2 px-3">
+  <!-- Mobile layout: back/menu | centered title | avatar -->
+  <div class="flex w-full items-center px-3 sm:hidden">
+    {#if parent?.href}
+      <a
+        href={prefixBase(parent.href)}
+        class="text-muted-foreground hover:text-foreground flex size-8 shrink-0 items-center justify-center"
+        title="Back to {parent.label}"
+      >
+        <ChevronLeft size={24} />
+      </a>
+    {:else}
+      <Button
+        variant="ghost"
+        class="size-8 shrink-0"
+        title="Toggle Sidebar"
+        onclick={() => sidebar.toggle()}
+      >
+        <PanelLeft size={24} class="m-0 text-gray-600 dark:text-gray-300" />
+      </Button>
+    {/if}
+
+    <span class="flex-1 truncate text-center text-sm font-semibold">{currentLabel}</span>
+
+    {@render userMenu()}
+  </div>
+
+  <!-- Desktop layout: sidebar toggle | separator | breadcrumb | lightswitch | avatar -->
+  <div class="hidden w-full items-center gap-2 px-3 sm:flex">
     <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" />
     </Button>
@@ -44,43 +121,8 @@
       )}
     >
       <div class="flex-1"></div>
-
       <LightSwitch />
-
-      {#if userState.loading}
-        <Spinner class="size-8 text-gray-600 dark:text-gray-300" />
-      {: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"
-          >
-            <img
-              class="inline-block h-8 rounded-full"
-              src={userState.self.avatar}
-              alt="{userState.self.name}'s avatar"
-            />
-            <p class="hidden lg:inline-block">{userState.self.name}</p>
-          </DropdownMenu.Trigger>
-          <DropdownMenu.Content>
-            <DropdownMenu.Group>
-              {@render dropdownItem('Profile', '/profile')}
-              {@render dropdownItem('Settings', '/settings/account')}
-              {@render dropdownItem('Logout', '/logout')}
-            </DropdownMenu.Group>
-          </DropdownMenu.Content>
-        </DropdownMenu.Root>
-      {:else}
-        <Button variant="outline" href={resolve('/login')}>Login <LogIn /></Button>
-        <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" />
-          </a>
-          <a href={PUBLIC_DISCORD_INVITE_URL} class="p-2" title="Community Discord">
-            <DiscordLogo class="size-6 fill-black dark:fill-white" />
-          </a>
-        </div>
-      {/if}
+      {@render userMenu()}
     </div>
   </div>
 </header>