diff --git a/apps/chat/apps/web/src/routes/(protected)/+layout.svelte b/apps/chat/apps/web/src/routes/(protected)/+layout.svelte
index b334af65b..2a6ce0a97 100644
--- a/apps/chat/apps/web/src/routes/(protected)/+layout.svelte
+++ b/apps/chat/apps/web/src/routes/(protected)/+layout.svelte
@@ -187,6 +187,7 @@
 			{appItems}
 			{userEmail}
 			settingsHref="/settings"
+			manaHref="/mana"
 		/>
 
 		<!-- Main Content with dynamic padding based on nav mode -->
diff --git a/apps/chat/apps/web/src/routes/(protected)/mana/+page.svelte b/apps/chat/apps/web/src/routes/(protected)/mana/+page.svelte
new file mode 100644
index 000000000..140114823
--- /dev/null
+++ b/apps/chat/apps/web/src/routes/(protected)/mana/+page.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { SubscriptionPage } from '@manacore/shared-subscription-ui';
+
+	function handleSubscribe(planId: string) {
+		console.log('Subscribe to plan:', planId);
+		alert(`Abo "${planId}" ausgewählt. Bezahlsystem wird noch integriert.`);
+	}
+
+	function handleBuyPackage(packageId: string) {
+		console.log('Buy package:', packageId);
+		alert(`Paket "${packageId}" ausgewählt. Bezahlsystem wird noch integriert.`);
+	}
+</script>
+
+<svelte:head>
+	<title>Mana - ManaChat</title>
+</svelte:head>
+
+<div class="min-h-screen p-4 md:p-8" style="background-color: hsl(var(--color-background));">
+	<div class="mx-auto max-w-6xl">
+		<SubscriptionPage
+			appName="ManaChat"
+			onSubscribe={handleSubscribe}
+			onBuyPackage={handleBuyPackage}
+			currentPlanId="free"
+			pageTitle="Wähle dein Abo"
+			subscriptionsTitle="Abonnements"
+			packagesTitle="Einmal-Pakete"
+			yearlyDiscount="2 Monate gratis"
+		/>
+	</div>
+</div>
diff --git a/apps/manacore/apps/web/src/routes/(app)/+layout.svelte b/apps/manacore/apps/web/src/routes/(app)/+layout.svelte
index a8cbdc0b9..2ff2f3883 100644
--- a/apps/manacore/apps/web/src/routes/(app)/+layout.svelte
+++ b/apps/manacore/apps/web/src/routes/(app)/+layout.svelte
@@ -25,7 +25,7 @@
 		{ href: '/dashboard', label: 'Dashboard', icon: 'home' },
 		{ href: '/organizations', label: 'Organizations', icon: 'building' },
 		{ href: '/teams', label: 'Teams', icon: 'users' },
-		{ href: '/subscription', label: 'Subscription', icon: 'creditCard' },
+		{ href: '/mana', label: 'Mana', icon: 'mana' },
 		{ href: '/settings', label: 'Settings', icon: 'settings' },
 	];
 
diff --git a/apps/manacore/apps/web/src/routes/(app)/subscription/+page.svelte b/apps/manacore/apps/web/src/routes/(app)/mana/+page.svelte
similarity index 100%
rename from apps/manacore/apps/web/src/routes/(app)/subscription/+page.svelte
rename to apps/manacore/apps/web/src/routes/(app)/mana/+page.svelte
diff --git a/apps/manadeck/apps/web/src/routes/(app)/+layout.svelte b/apps/manadeck/apps/web/src/routes/(app)/+layout.svelte
index 0ceb9c349..5c4c8563d 100644
--- a/apps/manadeck/apps/web/src/routes/(app)/+layout.svelte
+++ b/apps/manadeck/apps/web/src/routes/(app)/+layout.svelte
@@ -25,7 +25,7 @@
 		{ href: '/decks', label: 'Decks', icon: 'archive' },
 		{ href: '/explore', label: 'Explore', icon: 'search' },
 		{ href: '/progress', label: 'Progress', icon: 'chart' },
-		{ href: '/subscription', label: 'Mana', icon: 'mana' },
+		{ href: '/mana', label: 'Mana', icon: 'mana' },
 		{ href: '/profile', label: 'Profile', icon: 'user' },
 	];
 
diff --git a/apps/manadeck/apps/web/src/routes/(app)/subscription/+page.svelte b/apps/manadeck/apps/web/src/routes/(app)/mana/+page.svelte
similarity index 100%
rename from apps/manadeck/apps/web/src/routes/(app)/subscription/+page.svelte
rename to apps/manadeck/apps/web/src/routes/(app)/mana/+page.svelte
diff --git a/apps/picture/apps/web/src/lib/components/layout/Sidebar.svelte b/apps/picture/apps/web/src/lib/components/layout/Sidebar.svelte
index 56461c72c..cd879f670 100644
--- a/apps/picture/apps/web/src/lib/components/layout/Sidebar.svelte
+++ b/apps/picture/apps/web/src/lib/components/layout/Sidebar.svelte
@@ -28,7 +28,6 @@
 		CloudArrowUp,
 		Tag,
 		Archive,
-		CurrencyCircleDollar,
 		Question,
 		CaretLeft,
 		CaretDown,
@@ -58,7 +57,7 @@
 		| 'upload'
 		| 'tags'
 		| 'archive'
-		| 'subscription';
+		| 'mana';
 
 	function handleSearchInput(e: Event) {
 		const target = e.target as HTMLInputElement;
@@ -130,7 +129,7 @@
 		{ path: '/app/upload', label: 'Upload', iconName: 'upload' },
 		{ path: '/app/tags', label: 'Tags', iconName: 'tags' },
 		{ path: '/app/archive', label: 'Archiv', iconName: 'archive' },
-		{ path: '/app/subscription', label: 'Abonnement', iconName: 'subscription' },
+		{ path: '/app/mana', label: 'Mana', iconName: 'mana' },
 	];
 </script>
 
@@ -192,8 +191,10 @@
 						<Tag size={20} />
 					{:else if item.iconName === 'archive'}
 						<Archive size={20} />
-					{:else if item.iconName === 'subscription'}
-						<CurrencyCircleDollar size={20} />
+					{:else if item.iconName === 'mana'}
+						<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+							<path d="M12.3 1c.03.05 7.3 9.67 7.3 13.7 0 4.03-3.27 7.3-7.3 7.3S5 18.73 5 14.7C5 10.66 12.3 1 12.3 1zm0 6.4c-.02.03-3.65 4.83-3.65 6.84 0 2.02 1.64 3.65 3.65 3.65s3.65-1.64 3.65-3.65c0-2.01-3.62-6.81-3.65-6.84z" />
+						</svg>
 					{/if}
 				</span>
 				<span>{item.label}</span>
@@ -486,8 +487,10 @@
 								<Tag size={20} />
 							{:else if item.iconName === 'archive'}
 								<Archive size={20} />
-							{:else if item.iconName === 'subscription'}
-								<CurrencyCircleDollar size={20} />
+							{:else if item.iconName === 'mana'}
+								<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+									<path d="M12.3 1c.03.05 7.3 9.67 7.3 13.7 0 4.03-3.27 7.3-7.3 7.3S5 18.73 5 14.7C5 10.66 12.3 1 12.3 1zm0 6.4c-.02.03-3.65 4.83-3.65 6.84 0 2.02 1.64 3.65 3.65 3.65s3.65-1.64 3.65-3.65c0-2.01-3.62-6.81-3.65-6.84z" />
+								</svg>
 							{/if}
 						</span>
 						{item.label}
@@ -542,8 +545,10 @@
 					<Tag size={24} />
 				{:else if item.iconName === 'archive'}
 					<Archive size={24} />
-				{:else if item.iconName === 'subscription'}
-					<CurrencyCircleDollar size={24} />
+				{:else if item.iconName === 'mana'}
+					<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+						<path d="M12.3 1c.03.05 7.3 9.67 7.3 13.7 0 4.03-3.27 7.3-7.3 7.3S5 18.73 5 14.7C5 10.66 12.3 1 12.3 1zm0 6.4c-.02.03-3.65 4.83-3.65 6.84 0 2.02 1.64 3.65 3.65 3.65s3.65-1.64 3.65-3.65c0-2.01-3.62-6.81-3.65-6.84z" />
+					</svg>
 				{/if}
 				<span class="text-xs font-medium">{item.label}</span>
 			</a>
diff --git a/apps/picture/apps/web/src/routes/app/+layout.svelte b/apps/picture/apps/web/src/routes/app/+layout.svelte
index 25244a152..cc5a7b165 100644
--- a/apps/picture/apps/web/src/routes/app/+layout.svelte
+++ b/apps/picture/apps/web/src/routes/app/+layout.svelte
@@ -62,7 +62,7 @@
 		{ href: '/app/upload', label: 'Upload', icon: 'upload' },
 		{ href: '/app/tags', label: 'Tags', icon: 'tag' },
 		{ href: '/app/archive', label: 'Archiv', icon: 'archive' },
-		{ href: '/app/subscription', label: 'Abo', icon: 'creditCard' },
+		{ href: '/app/mana', label: 'Mana', icon: 'mana' },
 	];
 
 	// View mode options for tab group
diff --git a/apps/picture/apps/web/src/routes/app/subscription/+page.svelte b/apps/picture/apps/web/src/routes/app/mana/+page.svelte
similarity index 96%
rename from apps/picture/apps/web/src/routes/app/subscription/+page.svelte
rename to apps/picture/apps/web/src/routes/app/mana/+page.svelte
index b9fa53030..c47bf3433 100644
--- a/apps/picture/apps/web/src/routes/app/subscription/+page.svelte
+++ b/apps/picture/apps/web/src/routes/app/mana/+page.svelte
@@ -14,7 +14,7 @@
 </script>
 
 <svelte:head>
-	<title>Abonnement - Picture</title>
+	<title>Mana - Picture</title>
 </svelte:head>
 
 <div class="min-h-screen p-4 md:p-8" style="background-color: hsl(var(--color-background));">
diff --git a/packages/shared-ui/src/navigation/PillDropdown.svelte b/packages/shared-ui/src/navigation/PillDropdown.svelte
index 9924503f0..12900a308 100644
--- a/packages/shared-ui/src/navigation/PillDropdown.svelte
+++ b/packages/shared-ui/src/navigation/PillDropdown.svelte
@@ -81,6 +81,8 @@
 			'M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1',
 		// App icons
 		grid: 'M4 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM14 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1V5zM4 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1v-4zM14 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z',
+		// Mana icon (water drop)
+		mana: 'M12.3 1c.03.05 7.3 9.67 7.3 13.7 0 4.03-3.27 7.3-7.3 7.3S5 18.73 5 14.7C5 10.66 12.3 1 12.3 1zm0 6.4c-.02.03-3.65 4.83-3.65 6.84 0 2.02 1.64 3.65 3.65 3.65s3.65-1.64 3.65-3.65c0-2.01-3.62-6.81-3.65-6.84z',
 	};
 
 	function getIcon(iconName: string) {
@@ -142,6 +144,10 @@
 				>
 					{#if item.imageUrl}
 						<img src={item.imageUrl} alt="" class="pill-image-icon" />
+					{:else if item.icon === 'mana'}
+						<svg class="pill-icon" viewBox="0 0 24 24" fill="currentColor">
+							<path d={getIcon('mana')} />
+						</svg>
 					{:else if item.icon}
 						<svg class="pill-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 							<path
diff --git a/packages/shared-ui/src/navigation/PillNavigation.svelte b/packages/shared-ui/src/navigation/PillNavigation.svelte
index d42812828..ce5162117 100644
--- a/packages/shared-ui/src/navigation/PillNavigation.svelte
+++ b/packages/shared-ui/src/navigation/PillNavigation.svelte
@@ -82,6 +82,8 @@
 		userEmail?: string;
 		/** Settings page href */
 		settingsHref?: string;
+		/** Mana/subscription page href */
+		manaHref?: string;
 	}
 
 	let {
@@ -113,6 +115,7 @@
 		showAppSwitcher = false,
 		userEmail,
 		settingsHref = '/settings',
+		manaHref,
 	}: Props = $props();
 
 	// Type guards for elements
@@ -449,6 +452,19 @@
 			{#if userEmail}
 				<PillDropdown
 					items={[
+						...(manaHref
+							? [
+									{
+										id: 'mana',
+										label: 'Mana',
+										icon: 'mana',
+										onClick: () => {
+											window.location.href = manaHref;
+										},
+										active: currentPath === manaHref,
+									},
+								]
+							: []),
 						{
 							id: 'settings',
 							label: 'Einstellungen',