diff --git a/src/lib/state/breadcrumbs-state.svelte.ts b/src/lib/state/breadcrumbs-state.svelte.ts
index a40241c0..40492c1e 100644
--- a/src/lib/state/breadcrumbs-state.svelte.ts
+++ b/src/lib/state/breadcrumbs-state.svelte.ts
@@ -1,25 +1,39 @@
 import type { Pathname } from '$app/types';
-import { onMount } from 'svelte';
+import { onDestroy } from 'svelte';
 
-export interface BreadCrumbEntry {
-  text: string;
+export interface BreadcrumbEntry {
+  label: string;
   href: Pathname | null;
 }
 
-let _state = $state<BreadCrumbEntry[]>([]);
+interface BreadcrumbSlot {
+  id: symbol;
+  entries: BreadcrumbEntry[];
+}
+
+const _slots = $state<BreadcrumbSlot[]>([]);
 
 export const breadcrumbs = {
-  get state() {
-    return _state;
+  get state(): BreadcrumbEntry[] {
+    return _slots.flatMap((s) => s.entries);
   },
-  push: (text: string, href: Pathname | null = null) => {
-    onMount(() => {
-      const entry = { text, href };
-      _state = [..._state, entry];
-      return () => {
-        _state = _state.filter((e) => e.text !== entry.text || e.href !== entry.href);
-      };
-    });
-  },
-  clear: () => (_state = []),
 };
+
+export function registerBreadcrumbs(
+  entriesFn: () => Array<{ label: string; href?: Pathname | null }>
+): void {
+  const id = Symbol();
+  _slots.push({ id, entries: [] });
+
+  $effect(() => {
+    const slot = _slots.find((s) => s.id === id);
+    if (slot) {
+      slot.entries = entriesFn().map((e) => ({ label: e.label, href: e.href ?? null }));
+    }
+  });
+
+  onDestroy(() => {
+    const idx = _slots.findIndex((s) => s.id === id);
+    if (idx !== -1) _slots.splice(idx, 1);
+  });
+}
diff --git a/src/routes/(app)/admin/+layout.svelte b/src/routes/(app)/admin/+layout.svelte
index 802a6fdc..67dbd242 100644
--- a/src/routes/(app)/admin/+layout.svelte
+++ b/src/routes/(app)/admin/+layout.svelte
@@ -7,9 +7,12 @@
 <script lang="ts">
   import { resolve } from '$app/paths';
   import { Button } from '$lib/components/ui/button';
+  import { registerBreadcrumbs } from '$lib/state/breadcrumbs-state.svelte';
   import { userState } from '$lib/state/user-state.svelte';
   import type { Snippet } from 'svelte';
 
+  registerBreadcrumbs(() => [{ label: 'Admin', href: '/admin/users' }]);
+
   interface Props {
     children?: Snippet;
   }
diff --git a/src/routes/(app)/admin/blacklists/+page.svelte b/src/routes/(app)/admin/blacklists/+page.svelte
index 8afcffa7..45fe5cf0 100644
--- a/src/routes/(app)/admin/blacklists/+page.svelte
+++ b/src/routes/(app)/admin/blacklists/+page.svelte
@@ -8,6 +8,7 @@
   } from '$lib/api/internal/v1';
   import TextInput from '$lib/components/input/TextInput.svelte';
   import { Button } from '$lib/components/ui/button';
+  import { registerBreadcrumbs } from '$lib/state/breadcrumbs-state.svelte';
   import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card';
   import { ScrollArea } from '$lib/components/ui/scroll-area';
   import * as Select from '$lib/components/ui/select';
@@ -16,6 +17,8 @@
   import type { ValidationResult } from '$lib/types/ValidationResult';
   import type { TimeoutHandle } from '$lib/types/WAPI';
 
+  registerBreadcrumbs(() => [{ label: 'Blacklists' }]);
+
   // --- state ---
   let usernameEntry = $state<string>('');
   let matchTypeEntry = $state<MatchTypeEnum>(MatchTypeEnum.Exact);
diff --git a/src/routes/(app)/admin/config/+page.svelte b/src/routes/(app)/admin/config/+page.svelte
index 3edbe503..405f4756 100644
--- a/src/routes/(app)/admin/config/+page.svelte
+++ b/src/routes/(app)/admin/config/+page.svelte
@@ -9,6 +9,7 @@
     LocaleDateTimeRenderer,
     RenderCell,
   } from '$lib/components/Table/ColumnUtils';
+  import { registerBreadcrumbs } from '$lib/state/breadcrumbs-state.svelte';
   import DataTable from '$lib/components/Table/DataTableTemplate.svelte';
   import { Button } from '$lib/components/ui/button';
   import { CardHeader, CardTitle } from '$lib/components/ui/card';
@@ -18,6 +19,8 @@
   import DataTableActions from './data-table-actions.svelte';
   import WebhookAddDialog from './dialog-item-add.svelte';
 
+  registerBreadcrumbs(() => [{ label: 'Config' }]);
+
   const columns: ColumnDef<ConfigurationItemDto>[] = [
     CreateSortableColumnDef('name', 'Name', RenderCell),
     CreateSortableColumnDef('description', 'Description', RenderCell),
diff --git a/src/routes/(app)/admin/online-hubs/+page.svelte b/src/routes/(app)/admin/online-hubs/+page.svelte
index 7237f579..fcf82bfb 100644
--- a/src/routes/(app)/admin/online-hubs/+page.svelte
+++ b/src/routes/(app)/admin/online-hubs/+page.svelte
@@ -8,8 +8,11 @@
   import { handleApiError } from '$lib/errorhandling/apiErrorHandling';
   import { SemVer } from 'semver';
   import { onMount } from 'svelte';
+  import { registerBreadcrumbs } from '$lib/state/breadcrumbs-state.svelte';
   import { type OnlineHub, columns } from './columns';
 
+  registerBreadcrumbs(() => [{ label: 'Online Hubs' }]);
+
   let data = $state<OnlineHub[]>([]);
   let sorting = $state<SortingState>([]);
   let filters = $state<ColumnFiltersState>([]);
diff --git a/src/routes/(app)/admin/users/+page.svelte b/src/routes/(app)/admin/users/+page.svelte
index 307b670d..2c7f63eb 100644
--- a/src/routes/(app)/admin/users/+page.svelte
+++ b/src/routes/(app)/admin/users/+page.svelte
@@ -12,8 +12,11 @@
     RenderRedCell,
   } from '$lib/components/Table/ColumnUtils';
   import { renderComponent } from '$lib/components/ui/data-table';
+  import { registerBreadcrumbs } from '$lib/state/breadcrumbs-state.svelte';
   import DataTableActions from './data-table-actions.svelte';
 
+  registerBreadcrumbs(() => [{ label: 'Users' }]);
+
   const PasswordHashTypeRenderer = (passwordHashType: PasswordHashingAlgorithm) => {
     if (passwordHashType !== PasswordHashingAlgorithm.BCrypt)
       return RenderOrangeCell(passwordHashType);
diff --git a/src/routes/(app)/admin/users/[userId]/+page.svelte b/src/routes/(app)/admin/users/[userId]/+page.svelte
index 36d55f25..9f2148a2 100644
--- a/src/routes/(app)/admin/users/[userId]/+page.svelte
+++ b/src/routes/(app)/admin/users/[userId]/+page.svelte
@@ -3,9 +3,15 @@
   import { adminApi } from '$lib/api';
   import type { AdminUsersView, AdminUsersViewPaginated } from '$lib/api/internal/v1';
   import { handleApiError } from '$lib/errorhandling/apiErrorHandling';
+  import { registerBreadcrumbs } from '$lib/state/breadcrumbs-state.svelte';
 
   let user = $state<AdminUsersView | null>(null);
 
+  registerBreadcrumbs(() => [
+    { label: 'Users', href: '/admin/users' },
+    { label: user?.name ?? 'Loading...' },
+  ]);
+
   function handleResponse(page: AdminUsersViewPaginated) {
     if (page.data.length === 0) {
       user = null;
diff --git a/src/routes/(app)/admin/webhooks/+page.svelte b/src/routes/(app)/admin/webhooks/+page.svelte
index 02683508..3ef115ec 100644
--- a/src/routes/(app)/admin/webhooks/+page.svelte
+++ b/src/routes/(app)/admin/webhooks/+page.svelte
@@ -17,8 +17,11 @@
   import { handleApiError } from '$lib/errorhandling/apiErrorHandling';
   import { onMount } from 'svelte';
   import DataTableActions from './data-table-actions.svelte';
+  import { registerBreadcrumbs } from '$lib/state/breadcrumbs-state.svelte';
   import WebhookAddDialog from './dialog-webhook-add.svelte';
 
+  registerBreadcrumbs(() => [{ label: 'Webhooks' }]);
+
   const columns: ColumnDef<WebhookDto>[] = [
     CreateSortableColumnDef('name', 'Name', RenderCell),
     CreateSortableColumnDef('url', 'Url', RenderCell),
diff --git a/src/routes/(app)/home/+page.svelte b/src/routes/(app)/home/+page.svelte
index d0b4f51f..18e60d82 100644
--- a/src/routes/(app)/home/+page.svelte
+++ b/src/routes/(app)/home/+page.svelte
@@ -4,12 +4,12 @@
   import Container from '$lib/components/Container.svelte';
   import * as Card from '$lib/components/ui/card';
   import { Button } from '$lib/components/ui/button';
-  import { breadcrumbs } from '$lib/state/breadcrumbs-state.svelte';
+  import { registerBreadcrumbs } from '$lib/state/breadcrumbs-state.svelte';
   import { userState } from '$lib/state/user-state.svelte';
   import { onlineHubs, ownHubs, refreshOwnHubs } from '$lib/state/hubs-state.svelte';
   import { onMount } from 'svelte';
 
-  breadcrumbs.push('Home', '/home');
+  registerBreadcrumbs(() => [{ label: 'Home', href: '/home' }]);
 
   let shockerCount = $derived(
     Array.from(ownHubs).reduce((sum, [, hub]) => sum + hub.shockers.length, 0)
diff --git a/src/routes/(app)/hubs/+page.svelte b/src/routes/(app)/hubs/+page.svelte
index b731c805..07053729 100644
--- a/src/routes/(app)/hubs/+page.svelte
+++ b/src/routes/(app)/hubs/+page.svelte
@@ -6,7 +6,7 @@
   import * as Card from '$lib/components/ui/card';
   import * as Table from '$lib/components/ui/table';
   import { IsMobile } from '$lib/hooks/is-mobile.svelte';
-  import { breadcrumbs } from '$lib/state/breadcrumbs-state.svelte';
+  import { registerBreadcrumbs } from '$lib/state/breadcrumbs-state.svelte';
   import { onlineHubs, ownHubs, refreshOwnHubs } from '$lib/state/hubs-state.svelte';
   import { onMount } from 'svelte';
   import type { Hub } from './columns';
@@ -57,7 +57,7 @@
     }
   }
 
-  breadcrumbs.push('Hubs', '/hubs');
+  registerBreadcrumbs(() => [{ label: 'Hubs', href: '/hubs' }]);
   onMount(refreshOwnHubs);
 </script>
 
diff --git a/src/routes/(app)/hubs/[hubId=guid]/update/+page.svelte b/src/routes/(app)/hubs/[hubId=guid]/update/+page.svelte
index 9ebff57a..505658d3 100644
--- a/src/routes/(app)/hubs/[hubId=guid]/update/+page.svelte
+++ b/src/routes/(app)/hubs/[hubId=guid]/update/+page.svelte
@@ -72,7 +72,7 @@
   import { handleApiError } from '$lib/errorhandling/apiErrorHandling';
   import { getConnection } from '$lib/signalr/user.svelte';
   import { serializeOtaInstallMessage } from '$lib/signalr/serializers/OtaInstall';
-  import { breadcrumbs } from '$lib/state/breadcrumbs-state.svelte';
+  import { registerBreadcrumbs } from '$lib/state/breadcrumbs-state.svelte';
   import {
     HubOnlineState,
     onlineHubs,
@@ -197,8 +197,7 @@
 
   $effect(() => fetchOtaLogs(page.params.hubId));
 
-  breadcrumbs.push('Hubs', '/hubs');
-  breadcrumbs.push('Update');
+  registerBreadcrumbs(() => [{ label: 'Hubs', href: '/hubs' }, { label: hubName ?? 'Update' }]);
 
   onMount(refreshOwnHubs);
 </script>
diff --git a/src/routes/(app)/profile/+page.svelte b/src/routes/(app)/profile/+page.svelte
index e69de29b..56e96ece 100644
--- a/src/routes/(app)/profile/+page.svelte
+++ b/src/routes/(app)/profile/+page.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { registerBreadcrumbs } from '$lib/state/breadcrumbs-state.svelte';
+
+  registerBreadcrumbs(() => [{ label: 'Profile' }]);
+</script>
+
+<main>
+  <h1>Profile</h1>
+  <p>Your profile page is coming soon.</p>
+</main>
diff --git a/src/routes/(app)/settings/account/+page.svelte b/src/routes/(app)/settings/account/+page.svelte
index dd7a9798..6aeb7b62 100644
--- a/src/routes/(app)/settings/account/+page.svelte
+++ b/src/routes/(app)/settings/account/+page.svelte
@@ -4,8 +4,14 @@
   import ChangeEmail from './ChangeEmail.svelte';
   import ChangePassword from './ChangePassword.svelte';
   import ChangeUsername from './ChangeUsername.svelte';
+  import { registerBreadcrumbs } from '$lib/state/breadcrumbs-state.svelte';
   import DangerZone from './DangerZone.svelte';
 
+  registerBreadcrumbs(() => [
+    { label: 'Settings', href: '/settings/account' },
+    { label: 'Account' },
+  ]);
+
   let account = $derived(userState.self);
 </script>
 
diff --git a/src/routes/(app)/settings/api-tokens/+page.svelte b/src/routes/(app)/settings/api-tokens/+page.svelte
index f4c93a54..753c6bf5 100644
--- a/src/routes/(app)/settings/api-tokens/+page.svelte
+++ b/src/routes/(app)/settings/api-tokens/+page.svelte
@@ -22,8 +22,13 @@
   import { toast } from 'svelte-sonner';
   import DataTableActions from './data-table-actions.svelte';
   import TokenCreateDialog from './dialog-token-create.svelte';
+  import { registerBreadcrumbs } from '$lib/state/breadcrumbs-state.svelte';
   import TokenCreatedDialog from './dialog-token-created.svelte';
 
+  registerBreadcrumbs(() => [
+    { label: 'Settings', href: '/settings/account' },
+    { label: 'API Tokens' },
+  ]);
   let data = $state<TokenResponse[]>([]);
   let sorting = $state<SortingState>([]);
 
diff --git a/src/routes/(app)/settings/api-tokens/new/+page.svelte b/src/routes/(app)/settings/api-tokens/new/+page.svelte
index 02d3fea4..df8ac148 100644
--- a/src/routes/(app)/settings/api-tokens/new/+page.svelte
+++ b/src/routes/(app)/settings/api-tokens/new/+page.svelte
@@ -10,6 +10,13 @@
   import type { QueryParamsType } from './queryParamsType';
   import { page } from '$app/state';
   import { browser } from '$app/environment';
+  import { registerBreadcrumbs } from '$lib/state/breadcrumbs-state.svelte';
+
+  registerBreadcrumbs(() => [
+    { label: 'Settings', href: '/settings/account' },
+    { label: 'API Tokens', href: '/settings/api-tokens' },
+    { label: 'New' },
+  ]);
 
   let windowQueryParams = $state<
     | QueryParamsType
diff --git a/src/routes/(app)/settings/connections/+page.svelte b/src/routes/(app)/settings/connections/+page.svelte
index 857fa92c..36ca6945 100644
--- a/src/routes/(app)/settings/connections/+page.svelte
+++ b/src/routes/(app)/settings/connections/+page.svelte
@@ -16,8 +16,14 @@
   import { onMount } from 'svelte';
   import { toast } from 'svelte-sonner';
   import DisconnectDialog from './dialog-oauth-disconnect.svelte';
+  import { registerBreadcrumbs } from '$lib/state/breadcrumbs-state.svelte';
   import { backendMetadata } from '$lib/state/backend-metadata-state.svelte';
 
+  registerBreadcrumbs(() => [
+    { label: 'Settings', href: '/settings/account' },
+    { label: 'Connections' },
+  ]);
+
   // ---------- state
   let loading = $state(false); // overall refresh button state
   let loadingProviders = $state(true);
diff --git a/src/routes/(app)/settings/sessions/+page.svelte b/src/routes/(app)/settings/sessions/+page.svelte
index 340da8a8..9a5b2ca6 100644
--- a/src/routes/(app)/settings/sessions/+page.svelte
+++ b/src/routes/(app)/settings/sessions/+page.svelte
@@ -19,8 +19,14 @@
   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';
 
+  registerBreadcrumbs(() => [
+    { label: 'Settings', href: '/settings/account' },
+    { label: 'Sessions' },
+  ]);
+
   let data = $state<LoginSessionResponse[]>([]);
   let sorting = $state<SortingState>([]);
 
diff --git a/src/routes/(app)/shares/public/+page.svelte b/src/routes/(app)/shares/public/+page.svelte
index 10b3755d..4c102983 100644
--- a/src/routes/(app)/shares/public/+page.svelte
+++ b/src/routes/(app)/shares/public/+page.svelte
@@ -21,8 +21,11 @@
   import { handleApiError } from '$lib/errorhandling/apiErrorHandling';
   import { onMount } from 'svelte';
   import DataTableActions from './data-table-actions.svelte';
+  import { registerBreadcrumbs } from '$lib/state/breadcrumbs-state.svelte';
   import CreatePublicShareDialog from './dialog-publicshare-create.svelte';
 
+  registerBreadcrumbs(() => [{ label: 'Public Shares' }]);
+
   const columns: ColumnDef<OwnPublicShareResponse>[] = [
     CreateSortableColumnDef('name', 'Name', RenderCell),
     CreateSortableColumnDef('createdOn', 'Created at', LocaleDateTimeRenderer),
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 92a7af5f..6f76925e 100644
--- a/src/routes/(app)/shares/public/[shareId=guid]/edit/+page.svelte
+++ b/src/routes/(app)/shares/public/[shareId=guid]/edit/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { Plus, Save } from '@lucide/svelte';
+  import { ExternalLink, Plus, Save } from '@lucide/svelte';
+  import { resolve } from '$app/paths';
   import { page } from '$app/state';
   import { publicShockerSharesApi } from '$lib/api';
   import type { PublicShareResponse } from '$lib/api/internal/v1';
@@ -12,6 +13,7 @@
   import { onMount } from 'svelte';
   import { toast } from 'svelte-sonner';
   import SharedDevice from './SharedDevice.svelte';
+  import { registerBreadcrumbs } from '$lib/state/breadcrumbs-state.svelte';
   import DialogAddShocker from './dialog-add-shocker.svelte';
 
   let publicShareRequest = $state<Promise<PublicShareResponse>>(getPublicShare());
@@ -21,6 +23,12 @@
   let isAddingShockers = $state(false);
 
   const shareId = $derived(page.params.shareId);
+  const publicUrl = $derived(resolve(`/shares/public/${shareId}`));
+
+  registerBreadcrumbs(() => [
+    { label: 'Public Shares', href: '/shares/public' },
+    { label: publicShareData?.name ?? 'Edit' },
+  ]);
 
   onMount(() => {
     refreshOwnHubs();
@@ -105,6 +113,10 @@
     <Card.Title class="flex items-center justify-between space-x-2 text-3xl">
       Edit Public Share: {publicShareData?.name ?? 'Loading...'}
       <div class="flex gap-2">
+        <Button variant="outline" href={publicUrl}>
+          <ExternalLink />
+          View
+        </Button>
         <Button onclick={() => (showAddShockerModal = true)} disabled={isAddingShockers}>
           <Plus />
           Add Shocker
diff --git a/src/routes/(app)/shares/user/+layout.svelte b/src/routes/(app)/shares/user/+layout.svelte
index e37f646b..2fb674b1 100644
--- a/src/routes/(app)/shares/user/+layout.svelte
+++ b/src/routes/(app)/shares/user/+layout.svelte
@@ -14,6 +14,9 @@
   import DialogShareCodeCreated from './dialog-share-code-created.svelte';
   import DialogShareCodeRedeem from './dialog-share-code-redeem.svelte';
   import { resolve } from '$app/paths';
+  import { registerBreadcrumbs } from '$lib/state/breadcrumbs-state.svelte';
+
+  registerBreadcrumbs(() => [{ label: 'User Shares', href: '/shares/user/outgoing' }]);
 
   let createDialogOpen = $state(false);
   let redeemDialogOpen = $state(false);
diff --git a/src/routes/(app)/shockers/[shockerId=guid]/edit/+page.svelte b/src/routes/(app)/shockers/[shockerId=guid]/edit/+page.svelte
index 03d33695..d365f181 100644
--- a/src/routes/(app)/shockers/[shockerId=guid]/edit/+page.svelte
+++ b/src/routes/(app)/shockers/[shockerId=guid]/edit/+page.svelte
@@ -14,15 +14,12 @@
   import * as Select from '$lib/components/ui/select';
   import PauseToggle from '$lib/components/utils/PauseToggle.svelte';
   import { handleApiError } from '$lib/errorhandling/apiErrorHandling';
+  import { registerBreadcrumbs } from '$lib/state/breadcrumbs-state.svelte';
   import { refreshOwnHubs } from '$lib/state/hubs-state.svelte';
-  import { breadcrumbs } from '$lib/state/breadcrumbs-state.svelte';
   import { ArrowLeft, LoaderCircle, Trash2 } from '@lucide/svelte';
   import { onMount } from 'svelte';
   import { toast } from 'svelte-sonner';
 
-  breadcrumbs.push('Shockers', '/shockers/own');
-  breadcrumbs.push('Edit', null);
-
   const modelOptions = [
     { value: ShockerModelType.CaiXianlin, label: 'CaiXianlin' },
     { value: ShockerModelType.PetTrainer, label: 'PetTrainer' },
@@ -36,6 +33,11 @@
   let model = $state<ShockerModelType>(ShockerModelType.CaiXianlin);
   let saving = $state(false);
 
+  registerBreadcrumbs(() => [
+    { label: 'Shockers', href: '/shockers/own' },
+    { label: shocker?.name ?? 'Edit Shocker' },
+  ]);
+
   let hasChanges = $derived(
     shocker !== null &&
       (name.trim() !== shocker.name || rfId !== shocker.rfId || model !== shocker.model)
diff --git a/src/routes/(app)/shockers/logs/+page.svelte b/src/routes/(app)/shockers/logs/+page.svelte
index f27525fe..9ac50334 100644
--- a/src/routes/(app)/shockers/logs/+page.svelte
+++ b/src/routes/(app)/shockers/logs/+page.svelte
@@ -10,6 +10,9 @@
   } from '$lib/components/Table/ColumnUtils';
   import DataTable from '$lib/components/Table/DataTableTemplate.svelte';
   import * as Card from '$lib/components/ui/card';
+  import { registerBreadcrumbs } from '$lib/state/breadcrumbs-state.svelte';
+
+  registerBreadcrumbs(() => [{ label: 'Shocker Logs' }]);
 
   let { data } = $props();
 
diff --git a/src/routes/(app)/shockers/logs/[shockerId=guid]/+page.svelte b/src/routes/(app)/shockers/logs/[shockerId=guid]/+page.svelte
index 9d209ebf..39e9c90a 100644
--- a/src/routes/(app)/shockers/logs/[shockerId=guid]/+page.svelte
+++ b/src/routes/(app)/shockers/logs/[shockerId=guid]/+page.svelte
@@ -10,6 +10,12 @@
   } from '$lib/components/Table/ColumnUtils';
   import DataTable from '$lib/components/Table/DataTableTemplate.svelte';
   import * as Card from '$lib/components/ui/card';
+  import { registerBreadcrumbs } from '$lib/state/breadcrumbs-state.svelte';
+
+  registerBreadcrumbs(() => [
+    { label: 'Shocker Logs', href: '/shockers/logs' },
+    { label: 'Details' },
+  ]);
 
   let { data } = $props();
 
diff --git a/src/routes/(app)/shockers/own/+page.svelte b/src/routes/(app)/shockers/own/+page.svelte
index 3ce27ee7..c4150f43 100644
--- a/src/routes/(app)/shockers/own/+page.svelte
+++ b/src/routes/(app)/shockers/own/+page.svelte
@@ -18,12 +18,12 @@
   import * as Popover from '$lib/components/ui/popover';
   import { ControlDurationDefault, ControlIntensityDefault } from '$lib/constants/ControlConstants';
   import { handleApiError } from '$lib/errorhandling/apiErrorHandling';
+  import { registerBreadcrumbs } from '$lib/state/breadcrumbs-state.svelte';
   import { ownHubs, refreshOwnHubs } from '$lib/state/hubs-state.svelte';
-  import { breadcrumbs } from '$lib/state/breadcrumbs-state.svelte';
   import { onMount } from 'svelte';
   import { toast } from 'svelte-sonner';
 
-  breadcrumbs.push('Shockers', '/shockers/own');
+  registerBreadcrumbs(() => [{ label: 'Shockers' }]);
 
   let shockers = $derived(Array.from(ownHubs).flatMap(([, hub]) => hub.shockers));
 
diff --git a/src/routes/(app)/shockers/shared/+page.svelte b/src/routes/(app)/shockers/shared/+page.svelte
index 0d818453..3a490504 100644
--- a/src/routes/(app)/shockers/shared/+page.svelte
+++ b/src/routes/(app)/shockers/shared/+page.svelte
@@ -4,9 +4,12 @@
   import SharedShockerControlModule from '$lib/components/ControlModules/SharedShockerControlModule.svelte';
   import * as Avatar from '$lib/components/ui/avatar';
   import { onlineHubs } from '$lib/state/hubs-state.svelte';
+  import { registerBreadcrumbs } from '$lib/state/breadcrumbs-state.svelte';
   import { sharedHubsState, refreshSharedHubs } from '$lib/state/shared-hubs-state.svelte';
   import { onMount } from 'svelte';
 
+  registerBreadcrumbs(() => [{ label: 'Shared Shockers' }]);
+
   onMount(refreshSharedHubs);
 
   const hasSharedShockers = $derived(sharedHubsState.value.length > 0);
diff --git a/src/routes/Breadcrumb.svelte b/src/routes/Breadcrumb.svelte
index 4298332a..5397d7c7 100644
--- a/src/routes/Breadcrumb.svelte
+++ b/src/routes/Breadcrumb.svelte
@@ -1,22 +1,21 @@
 <script lang="ts">
   import * as Breadcrumb from '$lib/components/ui/breadcrumb';
   import { breadcrumbs } from '$lib/state/breadcrumbs-state.svelte';
+  import { prefixBase } from '$lib/utils/url';
 </script>
 
 {#if breadcrumbs.state.length > 0}
-  <Breadcrumb.Root>
+  <Breadcrumb.Root class="shrink-0">
     <Breadcrumb.List>
-      {#each breadcrumbs.state as crumb, index (crumb.href)}
+      {#each breadcrumbs.state as crumb, i (crumb.href || crumb.label)}
+        {#if i > 0}
+          <Breadcrumb.Separator />
+        {/if}
         <Breadcrumb.Item>
-          {#if index < breadcrumbs.state.length - 1}
-            <Breadcrumb.Link href={crumb.href} class="text-gray-600 dark:text-gray-300">
-              {crumb.text}
-            </Breadcrumb.Link>
-            <Breadcrumb.Separator class="text-gray-600 dark:text-gray-300" />
+          {#if crumb.href && i < breadcrumbs.state.length - 1}
+            <Breadcrumb.Link href={prefixBase(crumb.href)}>{crumb.label}</Breadcrumb.Link>
           {:else}
-            <Breadcrumb.Page class="text-gray-900 dark:text-gray-100">
-              {crumb.text}
-            </Breadcrumb.Page>
+            <Breadcrumb.Page>{crumb.label}</Breadcrumb.Page>
           {/if}
         </Breadcrumb.Item>
       {/each}
diff --git a/src/routes/Header.svelte b/src/routes/Header.svelte
index efb10880..efa0b0ad 100644
--- a/src/routes/Header.svelte
+++ b/src/routes/Header.svelte
@@ -10,6 +10,7 @@
   import GithubIcon from '$lib/components/svg/GithubIcon.svelte';
   import { Button } from '$lib/components/ui/button';
   import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
+  import { Separator } from '$lib/components/ui/separator';
   import { useSidebar } from '$lib/components/ui/sidebar';
   import { userState } from '$lib/state/user-state.svelte';
   import { cn } from '$lib/utils';
@@ -28,54 +29,55 @@
   </DropdownMenu.Item>
 {/snippet}
 
-<header
-  class="border-border/40 bg-background/95 supports-backdrop-filter:bg-background/60 sticky top-0 z-50 flex h-12 w-full flex-none flex-row items-center border-b px-2 backdrop-blur-sm"
->
-  <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>
-  <Breadcrumb />
-  <div
-    class={cn(
-      'flex flex-1 flex-row items-center justify-between space-x-2 py-2',
-      userState.self !== null ? 'pr-2' : 'px-2'
-    )}
-  >
-    <div class="flex-1"></div>
+<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" />
+    </Button>
+    <Separator orientation="vertical" class="mr-2 data-[orientation=vertical]:h-4" />
+    <Breadcrumb />
+    <div
+      class={cn(
+        'flex flex-1 flex-row items-center justify-between space-x-2 py-2',
+        userState.self !== null ? 'pr-2' : 'px-2'
+      )}
+    >
+      <div class="flex-1"></div>
 
-    <LightSwitch />
+      <LightSwitch />
 
-    {#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}
+      {#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}
+    </div>
   </div>
 </header>
diff --git a/src/routes/shares/public/[shareId=guid]/+page.svelte b/src/routes/shares/public/[shareId=guid]/+page.svelte
index 9fcff814..51a12fff 100644
--- a/src/routes/shares/public/[shareId=guid]/+page.svelte
+++ b/src/routes/shares/public/[shareId=guid]/+page.svelte
@@ -8,6 +8,7 @@
   import * as Card from '$lib/components/ui/card/index.js';
   import Input from '$lib/components/ui/input/input.svelte';
   import { handleApiError } from '$lib/errorhandling/apiErrorHandling';
+  import { registerBreadcrumbs } from '$lib/state/breadcrumbs-state.svelte';
   import { userState } from '$lib/state/user-state.svelte';
   import { onMount } from 'svelte';
   import ControlView from './ControlView.svelte';
@@ -18,10 +19,16 @@
   );
 
   let details = $state<Promise<PublicShareResponse>>(getShareDetails());
+  let shareData = $state<PublicShareResponse | null>(null);
   let enterAsGuestClicked = $state(false);
   let guestName = $state<string | null>(null);
   let entered = $state(false);
 
+  registerBreadcrumbs(() => [
+    { label: 'Public Shares', href: '/shares/public' },
+    { label: shareData?.name ?? 'Public Share' },
+  ]);
+
   // Fetch share details
   async function getShareDetails(): Promise<PublicShareResponse> {
     const shareId = page.params.shareId;
@@ -30,7 +37,9 @@
     }
 
     try {
-      return (await publicShockerSharesApi.publicGetPublicShare(shareId)).data;
+      const response = (await publicShockerSharesApi.publicGetPublicShare(shareId)).data;
+      shareData = response;
+      return response;
     } catch (error) {
       handleApiError(error);
       throw error;
diff --git a/src/routes/shares/public/[shareId=guid]/ControlView.svelte b/src/routes/shares/public/[shareId=guid]/ControlView.svelte
index 77da0d15..afc77c75 100644
--- a/src/routes/shares/public/[shareId=guid]/ControlView.svelte
+++ b/src/routes/shares/public/[shareId=guid]/ControlView.svelte
@@ -60,7 +60,7 @@
     </div>
 
     <div class="flex items-center justify-end gap-4">
-      {#if userState.self}
+      {#if userState.self?.id === shareLinkRoot.author.id}
         <Button variant="outline" href={editUrl}><Pencil /> Edit</Button>
       {/if}