diff --git a/packages/shared-ui/src/navigation/ManaLogoIcon.svelte b/packages/shared-ui/src/navigation/ManaLogoIcon.svelte
new file mode 100644
index 000000000..925f5d7b8
--- /dev/null
+++ b/packages/shared-ui/src/navigation/ManaLogoIcon.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	interface Props {
+		size?: number;
+		class?: string;
+	}
+
+	let { size = 24, class: className = '' }: Props = $props();
+</script>
+
+<svg
+	class={className}
+	viewBox="0 0 24 24"
+	fill="currentColor"
+	width={size}
+	height={size}
+	aria-hidden="true"
+>
+	<path
+		d="M12.3047 1C12.3392 1.04573 19.608 10.6706 19.6084 14.6953C19.6084 18.7293 16.3386 21.9998 12.3047 22C8.27061 22 5 18.7294 5 14.6953C5.00041 10.661 12.3047 1 12.3047 1ZM12.3047 7.3916C12.2811 7.42276 8.65234 12.2288 8.65234 14.2393C8.65241 16.2562 10.2877 17.8916 12.3047 17.8916C14.3217 17.8916 15.957 16.2562 15.957 14.2393C15.957 12.2301 12.3331 7.42917 12.3047 7.3916Z"
+	/>
+</svg>
diff --git a/packages/shared-ui/src/navigation/Pill.svelte b/packages/shared-ui/src/navigation/Pill.svelte
index 4455be31b..e26d4d2ca 100644
--- a/packages/shared-ui/src/navigation/Pill.svelte
+++ b/packages/shared-ui/src/navigation/Pill.svelte
@@ -11,6 +11,8 @@
 		label?: string;
 		/** Hide label (label is still used for aria-label/title). */
 		iconOnly?: boolean;
+		/** Height preset. 'sm' = 36px (PillNav), 'md' = 44px (bar pills). */
+		size?: 'sm' | 'md';
 		/** Active/selected state */
 		active?: boolean;
 		/** Primary accent (e.g. "Erstellen") */
@@ -38,6 +40,7 @@
 		href,
 		label,
 		iconOnly = false,
+		size = 'md',
 		active = false,
 		primary = false,
 		danger = false,
@@ -51,6 +54,7 @@
 	}: Props = $props();
 
 	const IconComp = $derived(icon ? phosphorIcons[icon] : null);
+	const iconPx = $derived(size === 'sm' ? 18 : 20);
 	const ariaLabel = $derived(iconOnly ? label : undefined);
 	const effectiveTitle = $derived(title ?? (iconOnly ? label : undefined));
 </script>
@@ -58,7 +62,7 @@
 {#snippet body()}
 	{#if leading}{@render leading()}{/if}
 	{#if IconComp}
-		<IconComp size={20} weight="bold" class="pill-icon" />
+		<IconComp size={iconPx} weight="bold" class="pill-icon" />
 	{/if}
 	{#if label && !iconOnly}
 		<span class="pill-label">{label}</span>
@@ -69,7 +73,15 @@
 {#if href}
 	<a
 		{href}
-		class={['pill', active && 'active', primary && 'primary', danger && 'danger', className]
+		class={[
+			'pill',
+			`pill-${size}`,
+			iconOnly && 'icon-only',
+			active && 'active',
+			primary && 'primary',
+			danger && 'danger',
+			className,
+		]
 			.filter(Boolean)
 			.join(' ')}
 		aria-label={ariaLabel}
@@ -82,7 +94,15 @@
 {:else}
 	<button
 		type="button"
-		class={['pill', active && 'active', primary && 'primary', danger && 'danger', className]
+		class={[
+			'pill',
+			`pill-${size}`,
+			iconOnly && 'icon-only',
+			active && 'active',
+			primary && 'primary',
+			danger && 'danger',
+			className,
+		]
 			.filter(Boolean)
 			.join(' ')}
 		aria-label={ariaLabel}
@@ -101,7 +121,6 @@
 		align-items: center;
 		gap: 0.375rem;
 		padding: 0 0.875rem;
-		height: 44px;
 		border-radius: 9999px;
 		font-size: 0.875rem;
 		font-weight: 500;
@@ -118,6 +137,20 @@
 			0 2px 6px hsl(0 0% 0% / 0.04);
 	}
 
+	.pill-md {
+		height: 44px;
+	}
+
+	.pill-sm {
+		height: 36px;
+	}
+
+	/* Icon-only pill: wider than tall so it reads as a pill, not a chip. */
+	.pill.icon-only {
+		gap: 0;
+		padding: 0 1.125rem;
+	}
+
 	.pill:hover:not(:disabled) {
 		background: hsl(var(--color-surface-hover, var(--color-card)));
 		border-color: hsl(var(--color-border-strong, var(--color-border)));
diff --git a/packages/shared-ui/src/navigation/PillNavigation.svelte b/packages/shared-ui/src/navigation/PillNavigation.svelte
index 642164fc4..23678294c 100644
--- a/packages/shared-ui/src/navigation/PillNavigation.svelte
+++ b/packages/shared-ui/src/navigation/PillNavigation.svelte
@@ -14,6 +14,8 @@
 	import PillDropdown from './PillDropdown.svelte';
 	import PillTabGroup from './PillTabGroup.svelte';
 	import PillTagSelector from './PillTagSelector.svelte';
+	import Pill from './Pill.svelte';
+	import ManaLogoIcon from './ManaLogoIcon.svelte';
 	import AppDrawer from './AppDrawer.svelte';
 	import UserMenuPanel from './UserMenuPanel.svelte';
 	import GlobalSpotlight from './GlobalSpotlight.svelte';
@@ -659,77 +661,38 @@
 						direction={dropdownDirection}
 					/>
 				{:else if isNavItem(element)}
-					<a href={element.href} class="pill glass-pill" class:active={isActive(element.href)}>
-						{#if element.icon}
-							{#if phosphorIcons[element.icon]}
-								{@const IconComponent = phosphorIcons[element.icon]}
-								<IconComponent size={18} weight="bold" class="pill-icon" />
-							{/if}
-						{/if}
-						<span class="pill-label">{element.label}</span>
-					</a>
+					<Pill
+						size="sm"
+						href={element.href}
+						icon={element.icon}
+						label={element.label}
+						active={isActive(element.href)}
+					/>
 				{/if}
 			{/each}
 
 			<!-- Navigation Items -->
 			{#each items as item}
-				{#if item.onClick}
-					<button
-						onclick={item.onClick}
-						oncontextmenu={item.onContextMenu}
-						class="pill glass-pill"
-						class:active={item.active}
-						class:icon-only={item.iconOnly}
-						aria-label={item.iconOnly ? item.label : undefined}
-						title={item.iconOnly ? item.label : undefined}
-					>
-						{#if item.icon}
-							{#if item.icon === 'mana'}
-								<svg class="pill-icon" viewBox="0 0 24 24" fill="currentColor">
-									<path
-										d="M12.3047 1C12.3392 1.04573 19.608 10.6706 19.6084 14.6953C19.6084 18.7293 16.3386 21.9998 12.3047 22C8.27061 22 5 18.7294 5 14.6953C5.00041 10.661 12.3047 1 12.3047 1ZM12.3047 7.3916C12.2811 7.42276 8.65234 12.2288 8.65234 14.2393C8.65241 16.2562 10.2877 17.8916 12.3047 17.8916C14.3217 17.8916 15.957 16.2562 15.957 14.2393C15.957 12.2301 12.3331 7.42917 12.3047 7.3916Z"
-									/>
-								</svg>
-							{:else if item.iconSvg}
-								{@html item.iconSvg}
-							{:else if phosphorIcons[item.icon]}
-								{@const IconComponent = phosphorIcons[item.icon]}
-								<IconComponent size={18} weight="bold" class="pill-icon" />
-							{/if}
+				{@const standardIcon =
+					item.icon && item.icon !== 'mana' && !item.iconSvg ? item.icon : undefined}
+				<Pill
+					size="sm"
+					href={item.onClick ? undefined : item.href}
+					onclick={item.onClick}
+					oncontextmenu={item.onContextMenu}
+					icon={standardIcon}
+					label={item.label}
+					iconOnly={item.iconOnly}
+					active={item.onClick ? item.active : isActive(item.href)}
+				>
+					{#snippet leading()}
+						{#if item.icon === 'mana'}
+							<ManaLogoIcon size={18} class="pill-icon" />
+						{:else if item.iconSvg}
+							{@html item.iconSvg}
 						{/if}
-						{#if !item.iconOnly}
-							<span class="pill-label">{item.label}</span>
-						{/if}
-					</button>
-				{:else}
-					<a
-						href={item.href}
-						oncontextmenu={item.onContextMenu}
-						class="pill glass-pill"
-						class:active={isActive(item.href)}
-						class:icon-only={item.iconOnly}
-						aria-label={item.iconOnly ? item.label : undefined}
-						title={item.iconOnly ? item.label : undefined}
-					>
-						{#if item.icon}
-							{#if item.icon === 'mana'}
-								<svg class="pill-icon" viewBox="0 0 24 24" fill="currentColor">
-									<path
-										d="M12.3047 1C12.3392 1.04573 19.608 10.6706 19.6084 14.6953C19.6084 18.7293 16.3386 21.9998 12.3047 22C8.27061 22 5 18.7294 5 14.6953C5.00041 10.661 12.3047 1 12.3047 1ZM12.3047 7.3916C12.2811 7.42276 8.65234 12.2288 8.65234 14.2393C8.65241 16.2562 10.2877 17.8916 12.3047 17.8916C14.3217 17.8916 15.957 16.2562 15.957 14.2393C15.957 12.2301 12.3331 7.42917 12.3047 7.3916Z"
-									/>
-								</svg>
-							{:else if item.iconSvg}
-								{@html item.iconSvg}
-							{:else if phosphorIcons[item.icon]}
-								{@const IconComponent = phosphorIcons[item.icon]}
-								<IconComponent size={18} weight="bold" class="pill-icon" />
-							{/if}
-						{/if}
-						{#if !item.iconOnly}
-							<span class="pill-label">{item.label}</span>
-						{/if}
-					</a>
-				{/if}
+					{/snippet}
+				</Pill>
 			{/each}
 
 			<!-- Additional Elements (Tab Groups, Dividers, Tag Selectors) -->
@@ -757,15 +720,13 @@
 						direction={dropdownDirection}
 					/>
 				{:else if isNavItem(element)}
-					<a href={element.href} class="pill glass-pill" class:active={isActive(element.href)}>
-						{#if element.icon}
-							{#if phosphorIcons[element.icon]}
-								{@const IconComponent = phosphorIcons[element.icon]}
-								<IconComponent size={18} weight="bold" class="pill-icon" />
-							{/if}
-						{/if}
-						<span class="pill-label">{element.label}</span>
-					</a>
+					<Pill
+						size="sm"
+						href={element.href}
+						icon={element.icon}
+						label={element.label}
+						active={isActive(element.href)}
+					/>
 				{/if}
 			{/each}
 
@@ -944,11 +905,6 @@
 			min-height: 44px;
 			justify-content: center;
 		}
-
-		.pill-icon {
-			width: 1.5rem;
-			height: 1.5rem;
-		}
 	}
 
 	/* Base pill styles */
@@ -1037,12 +993,6 @@
 		border-color: rgba(220, 38, 38, 0.3);
 	}
 
-	.pill-icon {
-		width: 1.25rem;
-		height: 1.25rem;
-		flex-shrink: 0;
-	}
-
 	.pill-label {
 		display: inline;
 	}
diff --git a/packages/shared-ui/src/navigation/index.ts b/packages/shared-ui/src/navigation/index.ts
index 968f7f56f..a3231b7cb 100644
--- a/packages/shared-ui/src/navigation/index.ts
+++ b/packages/shared-ui/src/navigation/index.ts
@@ -3,6 +3,7 @@ export { default as Navbar } from './Navbar.svelte';
 export { default as Sidebar } from './Sidebar.svelte';
 export { default as SidebarSection } from './SidebarSection.svelte';
 export { default as Pill } from './Pill.svelte';
+export { default as ManaLogoIcon } from './ManaLogoIcon.svelte';
 export { default as PillNavigation } from './PillNavigation.svelte';
 export { default as PillDropdown } from './PillDropdown.svelte';
 export { default as PillDropdownBar } from './PillDropdownBar.svelte';