diff --git a/apps/manacore/apps/web/src/lib/api/gifts.ts b/apps/manacore/apps/web/src/lib/api/gifts.ts
new file mode 100644
index 000000000..cfa6f8e06
--- /dev/null
+++ b/apps/manacore/apps/web/src/lib/api/gifts.ts
@@ -0,0 +1,171 @@
+/**
+ * Gifts Service for ManaCore Web App
+ * Handles gift code operations
+ */
+
+import { authStore } from '$lib/stores/auth.svelte';
+
+const MANA_AUTH_URL = 'http://localhost:3001'; // TODO: Use PUBLIC_MANA_CORE_AUTH_URL from env
+
+// Types
+export interface GiftCodeInfo {
+	code: string;
+	type: 'simple' | 'personalized' | 'split' | 'first_come' | 'riddle';
+	status: 'active' | 'depleted' | 'expired' | 'cancelled' | 'refunded';
+	creditsPerPortion: number;
+	totalPortions: number;
+	claimedPortions: number;
+	remainingPortions: number;
+	message?: string;
+	riddleQuestion?: string;
+	hasRiddle: boolean;
+	isPersonalized: boolean;
+	expiresAt?: string;
+	creatorName?: string;
+}
+
+export interface GiftRedeemResponse {
+	success: boolean;
+	credits?: number;
+	message?: string;
+	error?: string;
+	newBalance?: number;
+}
+
+export interface GiftListItem {
+	id: string;
+	code: string;
+	url: string;
+	type: string;
+	status: string;
+	totalCredits: number;
+	creditsPerPortion: number;
+	totalPortions: number;
+	claimedPortions: number;
+	message?: string;
+	expiresAt?: string;
+	createdAt: string;
+}
+
+export interface ReceivedGiftItem {
+	id: string;
+	code: string;
+	credits: number;
+	message?: string;
+	creatorName?: string;
+	redeemedAt: string;
+}
+
+export interface CreateGiftResponse {
+	id: string;
+	code: string;
+	url: string;
+	totalCredits: number;
+	creditsPerPortion: number;
+	totalPortions: number;
+	type: string;
+	expiresAt?: string;
+}
+
+export interface CreateGiftRequest {
+	credits: number;
+	type?: 'simple' | 'personalized' | 'split' | 'first_come' | 'riddle';
+	portions?: number;
+	targetEmail?: string;
+	targetMatrixId?: string;
+	riddleQuestion?: string;
+	riddleAnswer?: string;
+	message?: string;
+	expiresAt?: string;
+	sourceAppId?: string;
+}
+
+// Helper function for public requests (no auth required)
+async function fetchPublic<T>(endpoint: string): Promise<T> {
+	const response = await fetch(`${MANA_AUTH_URL}${endpoint}`, {
+		headers: {
+			'Content-Type': 'application/json',
+		},
+	});
+
+	if (!response.ok) {
+		const error = await response.json().catch(() => ({ message: 'Request failed' }));
+		throw new Error(error.message || `HTTP ${response.status}`);
+	}
+
+	return response.json();
+}
+
+// Helper function for authenticated requests
+async function fetchWithAuth<T>(endpoint: string, options: RequestInit = {}): Promise<T> {
+	const token = await authStore.getAccessToken();
+
+	const response = await fetch(`${MANA_AUTH_URL}${endpoint}`, {
+		...options,
+		headers: {
+			'Content-Type': 'application/json',
+			...(token ? { Authorization: `Bearer ${token}` } : {}),
+			...options.headers,
+		},
+	});
+
+	if (!response.ok) {
+		const error = await response.json().catch(() => ({ message: 'Request failed' }));
+		throw new Error(error.message || `HTTP ${response.status}`);
+	}
+
+	return response.json();
+}
+
+// Gifts Service
+export const giftsService = {
+	/**
+	 * Get gift code info (public - no auth required)
+	 */
+	async getGiftInfo(code: string): Promise<GiftCodeInfo> {
+		return fetchPublic<GiftCodeInfo>(`/api/v1/gifts/${code.toUpperCase()}`);
+	},
+
+	/**
+	 * Redeem a gift code
+	 */
+	async redeemGift(code: string, answer?: string): Promise<GiftRedeemResponse> {
+		return fetchWithAuth<GiftRedeemResponse>(`/api/v1/gifts/${code.toUpperCase()}/redeem`, {
+			method: 'POST',
+			body: JSON.stringify({ answer, sourceAppId: 'manacore-web' }),
+		});
+	},
+
+	/**
+	 * List gift codes created by the authenticated user
+	 */
+	async getCreatedGifts(): Promise<GiftListItem[]> {
+		return fetchWithAuth<GiftListItem[]>('/api/v1/gifts/me/created');
+	},
+
+	/**
+	 * List gifts received by the authenticated user
+	 */
+	async getReceivedGifts(): Promise<ReceivedGiftItem[]> {
+		return fetchWithAuth<ReceivedGiftItem[]>('/api/v1/gifts/me/received');
+	},
+
+	/**
+	 * Create a new gift code
+	 */
+	async createGift(request: CreateGiftRequest): Promise<CreateGiftResponse> {
+		return fetchWithAuth<CreateGiftResponse>('/api/v1/gifts', {
+			method: 'POST',
+			body: JSON.stringify({ ...request, sourceAppId: 'manacore-web' }),
+		});
+	},
+
+	/**
+	 * Cancel a gift code and get refund for unclaimed portions
+	 */
+	async cancelGift(id: string): Promise<{ refundedCredits: number }> {
+		return fetchWithAuth<{ refundedCredits: number }>(`/api/v1/gifts/${id}`, {
+			method: 'DELETE',
+		});
+	},
+};
diff --git a/apps/manacore/apps/web/src/routes/(app)/+layout.svelte b/apps/manacore/apps/web/src/routes/(app)/+layout.svelte
index b874620ac..db00801ba 100644
--- a/apps/manacore/apps/web/src/routes/(app)/+layout.svelte
+++ b/apps/manacore/apps/web/src/routes/(app)/+layout.svelte
@@ -86,6 +86,7 @@
 	let baseNavItems: PillNavItem[] = [
 		{ href: '/dashboard', label: 'Dashboard', icon: 'home' },
 		{ href: '/credits', label: 'Credits', icon: 'creditCard' },
+		{ href: '/gifts', label: 'Geschenke', icon: 'gift' },
 		{ href: '/api-keys', label: 'API Keys', icon: 'key' },
 		{ href: '/feedback', label: 'Feedback', icon: 'chat' },
 		{ href: '/profile', label: 'Profil', icon: 'user' },
diff --git a/apps/manacore/apps/web/src/routes/(app)/gifts/+page.svelte b/apps/manacore/apps/web/src/routes/(app)/gifts/+page.svelte
new file mode 100644
index 000000000..f92fa9427
--- /dev/null
+++ b/apps/manacore/apps/web/src/routes/(app)/gifts/+page.svelte
@@ -0,0 +1,731 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { page } from '$app/stores';
+	import { Card, PageHeader } from '@manacore/shared-ui';
+	import {
+		giftsService,
+		type GiftListItem,
+		type ReceivedGiftItem,
+		type CreateGiftRequest,
+	} from '$lib/api/gifts';
+	import { creditsService, type CreditBalance } from '$lib/api/credits';
+
+	let receivedGifts = $state<ReceivedGiftItem[]>([]);
+	let createdGifts = $state<GiftListItem[]>([]);
+	let balance = $state<CreditBalance | null>(null);
+	let loading = $state(true);
+	let error = $state<string | null>(null);
+	let activeTab = $state<'received' | 'created' | 'create'>('received');
+
+	// Create form state
+	let createCredits = $state(50);
+	let createType = $state<'simple' | 'split' | 'riddle'>('simple');
+	let createPortions = $state(1);
+	let createMessage = $state('');
+	let createRiddleQuestion = $state('');
+	let createRiddleAnswer = $state('');
+	let creating = $state(false);
+	let createError = $state<string | null>(null);
+	let createdGift = $state<{ code: string; url: string } | null>(null);
+
+	// Cancel state
+	let cancellingId = $state<string | null>(null);
+
+	// Toast notification
+	let toastMessage = $state<string | null>(null);
+	let toastType = $state<'success' | 'error'>('success');
+
+	// Handle tab from URL params
+	$effect(() => {
+		const tab = $page.url.searchParams.get('tab');
+		if (tab === 'created') activeTab = 'created';
+		else if (tab === 'create') activeTab = 'create';
+	});
+
+	onMount(async () => {
+		await loadData();
+	});
+
+	async function loadData() {
+		loading = true;
+		error = null;
+		try {
+			const [received, created, balanceData] = await Promise.all([
+				giftsService.getReceivedGifts(),
+				giftsService.getCreatedGifts(),
+				creditsService.getBalance(),
+			]);
+			receivedGifts = received;
+			createdGifts = created;
+			balance = balanceData;
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Fehler beim Laden der Daten';
+			console.error('Failed to load gifts data:', e);
+		} finally {
+			loading = false;
+		}
+	}
+
+	async function handleCreate() {
+		if (createCredits < 1) {
+			createError = 'Mindestens 1 Credit erforderlich';
+			return;
+		}
+
+		if (createType === 'riddle' && (!createRiddleQuestion.trim() || !createRiddleAnswer.trim())) {
+			createError = 'Frage und Antwort sind für Rätsel-Geschenke erforderlich';
+			return;
+		}
+
+		creating = true;
+		createError = null;
+		createdGift = null;
+
+		try {
+			const request: CreateGiftRequest = {
+				credits: createCredits,
+				type: createType === 'split' ? 'split' : createType,
+				portions: createType === 'split' ? createPortions : 1,
+				message: createMessage.trim() || undefined,
+				riddleQuestion: createType === 'riddle' ? createRiddleQuestion.trim() : undefined,
+				riddleAnswer: createType === 'riddle' ? createRiddleAnswer.trim() : undefined,
+			};
+
+			const result = await giftsService.createGift(request);
+			createdGift = { code: result.code, url: result.url };
+			showToast('Geschenk-Code erstellt!', 'success');
+
+			// Reset form
+			createCredits = 50;
+			createType = 'simple';
+			createPortions = 1;
+			createMessage = '';
+			createRiddleQuestion = '';
+			createRiddleAnswer = '';
+
+			// Reload data
+			await loadData();
+		} catch (e) {
+			createError = e instanceof Error ? e.message : 'Erstellen fehlgeschlagen';
+			showToast(createError, 'error');
+			console.error('Failed to create gift:', e);
+		} finally {
+			creating = false;
+		}
+	}
+
+	async function handleCancel(gift: GiftListItem) {
+		if (
+			!confirm(
+				`Möchtest du den Code ${gift.code} wirklich stornieren? Die nicht eingelösten Credits werden erstattet.`
+			)
+		) {
+			return;
+		}
+
+		cancellingId = gift.id;
+		try {
+			const result = await giftsService.cancelGift(gift.id);
+			showToast(`${result.refundedCredits} Credits erstattet`, 'success');
+			await loadData();
+		} catch (e) {
+			showToast(e instanceof Error ? e.message : 'Stornieren fehlgeschlagen', 'error');
+			console.error('Failed to cancel gift:', e);
+		} finally {
+			cancellingId = null;
+		}
+	}
+
+	function copyToClipboard(text: string) {
+		navigator.clipboard.writeText(text);
+		showToast('In Zwischenablage kopiert', 'success');
+	}
+
+	function showToast(message: string, type: 'success' | 'error') {
+		toastMessage = message;
+		toastType = type;
+		setTimeout(() => {
+			toastMessage = null;
+		}, 4000);
+	}
+
+	function formatCredits(amount: number): string {
+		return amount.toLocaleString('de-DE');
+	}
+
+	function formatDate(dateStr: string): string {
+		return new Date(dateStr).toLocaleDateString('de-DE', {
+			day: '2-digit',
+			month: '2-digit',
+			year: 'numeric',
+		});
+	}
+
+	function getStatusLabel(status: string): string {
+		switch (status) {
+			case 'active':
+				return 'Aktiv';
+			case 'depleted':
+				return 'Eingelöst';
+			case 'expired':
+				return 'Abgelaufen';
+			case 'cancelled':
+				return 'Storniert';
+			case 'refunded':
+				return 'Erstattet';
+			default:
+				return status;
+		}
+	}
+
+	function getStatusColor(status: string): string {
+		switch (status) {
+			case 'active':
+				return 'text-green-600 dark:text-green-400';
+			case 'depleted':
+				return 'text-blue-600 dark:text-blue-400';
+			case 'expired':
+			case 'cancelled':
+			case 'refunded':
+				return 'text-muted-foreground';
+			default:
+				return 'text-foreground';
+		}
+	}
+
+	function getTypeLabel(type: string): string {
+		switch (type) {
+			case 'simple':
+				return 'Einfach';
+			case 'split':
+				return 'Geteilt';
+			case 'riddle':
+				return 'Rätsel';
+			case 'personalized':
+				return 'Persönlich';
+			case 'first_come':
+				return 'Erste kommen';
+			default:
+				return type;
+		}
+	}
+</script>
+
+<div>
+	<PageHeader title="Geschenke" description="Verschenke Credits an Freunde" size="lg" />
+
+	{#if loading}
+		<div class="flex items-center justify-center py-12">
+			<div
+				class="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent"
+			></div>
+		</div>
+	{:else if error}
+		<Card>
+			<div class="text-center py-8">
+				<p class="text-red-500 mb-4">{error}</p>
+				<button
+					onclick={loadData}
+					class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90"
+				>
+					Erneut versuchen
+				</button>
+			</div>
+		</Card>
+	{:else}
+		<!-- Quick actions -->
+		<div class="mb-8 flex flex-wrap gap-4">
+			<a
+				href="/gifts/redeem"
+				class="flex items-center gap-2 rounded-lg bg-primary px-4 py-2 font-medium text-primary-foreground hover:bg-primary/90"
+			>
+				<span>🎁</span>
+				Code einlösen
+			</a>
+			<button
+				onclick={() => (activeTab = 'create')}
+				class="flex items-center gap-2 rounded-lg bg-surface px-4 py-2 font-medium text-foreground hover:bg-surface-hover border border-border"
+			>
+				<span>✨</span>
+				Geschenk erstellen
+			</button>
+		</div>
+
+		<!-- Tabs -->
+		<div class="flex gap-2 mb-6 border-b border-border">
+			<button
+				onclick={() => (activeTab = 'received')}
+				class="px-4 py-2 -mb-px transition-colors {activeTab === 'received'
+					? 'border-b-2 border-primary text-primary font-medium'
+					: 'text-muted-foreground hover:text-foreground'}"
+			>
+				Erhalten ({receivedGifts.length})
+			</button>
+			<button
+				onclick={() => (activeTab = 'created')}
+				class="px-4 py-2 -mb-px transition-colors {activeTab === 'created'
+					? 'border-b-2 border-primary text-primary font-medium'
+					: 'text-muted-foreground hover:text-foreground'}"
+			>
+				Erstellt ({createdGifts.length})
+			</button>
+			<button
+				onclick={() => (activeTab = 'create')}
+				class="px-4 py-2 -mb-px transition-colors {activeTab === 'create'
+					? 'border-b-2 border-primary text-primary font-medium'
+					: 'text-muted-foreground hover:text-foreground'}"
+			>
+				Erstellen
+			</button>
+		</div>
+
+		<!-- Tab Content -->
+		{#if activeTab === 'received'}
+			<Card>
+				<h3 class="text-lg font-semibold mb-4">Erhaltene Geschenke</h3>
+				{#if receivedGifts.length === 0}
+					<div class="text-center py-8">
+						<span class="text-4xl">🎁</span>
+						<p class="mt-2 text-muted-foreground">Du hast noch keine Geschenke erhalten</p>
+						<a
+							href="/gifts/redeem"
+							class="mt-4 inline-block rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90"
+						>
+							Code einlösen
+						</a>
+					</div>
+				{:else}
+					<div class="space-y-4">
+						{#each receivedGifts as gift}
+							<div
+								class="flex items-center justify-between p-4 rounded-lg border border-border hover:bg-surface transition-colors"
+							>
+								<div class="flex items-center gap-4">
+									<div
+										class="flex h-12 w-12 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/20"
+									>
+										<span class="text-2xl">🎁</span>
+									</div>
+									<div>
+										<p class="font-mono font-medium">{gift.code}</p>
+										{#if gift.creatorName}
+											<p class="text-sm text-muted-foreground">Von {gift.creatorName}</p>
+										{/if}
+										{#if gift.message}
+											<p class="text-sm italic text-muted-foreground mt-1">"{gift.message}"</p>
+										{/if}
+									</div>
+								</div>
+								<div class="text-right">
+									<p class="text-xl font-bold text-green-600 dark:text-green-400">
+										+{formatCredits(gift.credits)}
+									</p>
+									<p class="text-xs text-muted-foreground">{formatDate(gift.redeemedAt)}</p>
+								</div>
+							</div>
+						{/each}
+					</div>
+				{/if}
+			</Card>
+		{:else if activeTab === 'created'}
+			<Card>
+				<h3 class="text-lg font-semibold mb-4">Erstellte Geschenk-Codes</h3>
+				{#if createdGifts.length === 0}
+					<div class="text-center py-8">
+						<span class="text-4xl">✨</span>
+						<p class="mt-2 text-muted-foreground">Du hast noch keine Geschenke erstellt</p>
+						<button
+							onclick={() => (activeTab = 'create')}
+							class="mt-4 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90"
+						>
+							Geschenk erstellen
+						</button>
+					</div>
+				{:else}
+					<div class="space-y-4">
+						{#each createdGifts as gift}
+							<div class="p-4 rounded-lg border border-border hover:bg-surface transition-colors">
+								<div class="flex items-center justify-between mb-2">
+									<div class="flex items-center gap-3">
+										<span class="font-mono font-bold text-lg">{gift.code}</span>
+										<span
+											class="px-2 py-0.5 text-xs rounded-full bg-surface {getStatusColor(
+												gift.status
+											)}"
+										>
+											{getStatusLabel(gift.status)}
+										</span>
+										<span class="px-2 py-0.5 text-xs rounded-full bg-surface text-muted-foreground">
+											{getTypeLabel(gift.type)}
+										</span>
+									</div>
+									<div class="flex items-center gap-2">
+										<button
+											onclick={() => copyToClipboard(gift.url)}
+											class="p-2 rounded hover:bg-surface-hover text-muted-foreground hover:text-foreground"
+											title="Link kopieren"
+										>
+											<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+												<path
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													stroke-width="2"
+													d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"
+												></path>
+											</svg>
+										</button>
+										{#if gift.status === 'active'}
+											<button
+												onclick={() => handleCancel(gift)}
+												disabled={cancellingId === gift.id}
+												class="p-2 rounded hover:bg-red-100 dark:hover:bg-red-900/20 text-muted-foreground hover:text-red-600 disabled:opacity-50"
+												title="Stornieren"
+											>
+												{#if cancellingId === gift.id}
+													<svg class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
+														<circle
+															class="opacity-25"
+															cx="12"
+															cy="12"
+															r="10"
+															stroke="currentColor"
+															stroke-width="4"
+														></circle>
+														<path
+															class="opacity-75"
+															fill="currentColor"
+															d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+														></path>
+													</svg>
+												{:else}
+													<svg
+														class="h-4 w-4"
+														fill="none"
+														stroke="currentColor"
+														viewBox="0 0 24 24"
+													>
+														<path
+															stroke-linecap="round"
+															stroke-linejoin="round"
+															stroke-width="2"
+															d="M6 18L18 6M6 6l12 12"
+														></path>
+													</svg>
+												{/if}
+											</button>
+										{/if}
+									</div>
+								</div>
+								<div class="grid grid-cols-2 sm:grid-cols-4 gap-4 text-sm">
+									<div>
+										<p class="text-muted-foreground">Credits</p>
+										<p class="font-medium">{formatCredits(gift.totalCredits)}</p>
+									</div>
+									<div>
+										<p class="text-muted-foreground">Eingelöst</p>
+										<p class="font-medium">{gift.claimedPortions} / {gift.totalPortions}</p>
+									</div>
+									<div>
+										<p class="text-muted-foreground">Erstellt</p>
+										<p class="font-medium">{formatDate(gift.createdAt)}</p>
+									</div>
+									{#if gift.expiresAt}
+										<div>
+											<p class="text-muted-foreground">Gültig bis</p>
+											<p class="font-medium">{formatDate(gift.expiresAt)}</p>
+										</div>
+									{/if}
+								</div>
+								{#if gift.message}
+									<p class="mt-2 text-sm italic text-muted-foreground">"{gift.message}"</p>
+								{/if}
+							</div>
+						{/each}
+					</div>
+				{/if}
+			</Card>
+		{:else if activeTab === 'create'}
+			<div class="grid gap-6 lg:grid-cols-2">
+				<!-- Create form -->
+				<Card>
+					<h3 class="text-lg font-semibold mb-4">Neues Geschenk erstellen</h3>
+
+					{#if balance}
+						<div class="mb-6 rounded-lg bg-surface p-4 text-center">
+							<p class="text-sm text-muted-foreground">Verfügbare Credits</p>
+							<p class="text-2xl font-bold text-primary">
+								{formatCredits(balance.balance + balance.freeCreditsRemaining)}
+							</p>
+						</div>
+					{/if}
+
+					<div class="space-y-4">
+						<div>
+							<label for="credits" class="block text-sm font-medium text-foreground mb-2">
+								Credits
+							</label>
+							<input
+								id="credits"
+								type="number"
+								bind:value={createCredits}
+								min="1"
+								max="10000"
+								class="w-full rounded-lg border border-border bg-background px-4 py-2 text-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+								disabled={creating}
+							/>
+						</div>
+
+						<div>
+							<label for="type" class="block text-sm font-medium text-foreground mb-2"> Art </label>
+							<select
+								id="type"
+								bind:value={createType}
+								class="w-full rounded-lg border border-border bg-background px-4 py-2 text-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+								disabled={creating}
+							>
+								<option value="simple">Einfach (1 Person)</option>
+								<option value="split">Geteilt (mehrere Personen)</option>
+								<option value="riddle">Mit Rätsel</option>
+							</select>
+						</div>
+
+						{#if createType === 'split'}
+							<div>
+								<label for="portions" class="block text-sm font-medium text-foreground mb-2">
+									Anzahl Portionen
+								</label>
+								<input
+									id="portions"
+									type="number"
+									bind:value={createPortions}
+									min="2"
+									max="100"
+									class="w-full rounded-lg border border-border bg-background px-4 py-2 text-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+									disabled={creating}
+								/>
+								<p class="mt-1 text-sm text-muted-foreground">
+									Jede Person erhält {Math.floor(createCredits / createPortions)} Credits
+								</p>
+							</div>
+						{/if}
+
+						{#if createType === 'riddle'}
+							<div>
+								<label for="riddle-question" class="block text-sm font-medium text-foreground mb-2">
+									Rätsel-Frage
+								</label>
+								<input
+									id="riddle-question"
+									type="text"
+									bind:value={createRiddleQuestion}
+									placeholder="z.B. Was ist die Hauptstadt von Deutschland?"
+									maxlength="200"
+									class="w-full rounded-lg border border-border bg-background px-4 py-2 text-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+									disabled={creating}
+								/>
+							</div>
+							<div>
+								<label for="riddle-answer" class="block text-sm font-medium text-foreground mb-2">
+									Antwort
+								</label>
+								<input
+									id="riddle-answer"
+									type="text"
+									bind:value={createRiddleAnswer}
+									placeholder="z.B. Berlin"
+									maxlength="100"
+									class="w-full rounded-lg border border-border bg-background px-4 py-2 text-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+									disabled={creating}
+								/>
+							</div>
+						{/if}
+
+						<div>
+							<label for="message" class="block text-sm font-medium text-foreground mb-2">
+								Nachricht (optional)
+							</label>
+							<textarea
+								id="message"
+								bind:value={createMessage}
+								placeholder="z.B. Alles Gute zum Geburtstag!"
+								maxlength="500"
+								rows="3"
+								class="w-full rounded-lg border border-border bg-background px-4 py-2 text-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary resize-none"
+								disabled={creating}
+							></textarea>
+						</div>
+
+						{#if createError}
+							<div class="rounded-lg bg-red-50 dark:bg-red-900/20 p-4">
+								<p class="text-sm text-red-800 dark:text-red-200">{createError}</p>
+							</div>
+						{/if}
+
+						<button
+							onclick={handleCreate}
+							disabled={creating || createCredits < 1}
+							class="w-full rounded-lg bg-primary py-3 font-semibold text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50 flex items-center justify-center gap-2"
+						>
+							{#if creating}
+								<svg class="animate-spin h-5 w-5" fill="none" viewBox="0 0 24 24">
+									<circle
+										class="opacity-25"
+										cx="12"
+										cy="12"
+										r="10"
+										stroke="currentColor"
+										stroke-width="4"
+									></circle>
+									<path
+										class="opacity-75"
+										fill="currentColor"
+										d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+									></path>
+								</svg>
+								Wird erstellt...
+							{:else}
+								✨ Geschenk-Code erstellen
+							{/if}
+						</button>
+					</div>
+				</Card>
+
+				<!-- Created gift result -->
+				{#if createdGift}
+					<Card>
+						<div class="text-center">
+							<div
+								class="mx-auto mb-4 flex h-20 w-20 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/20"
+							>
+								<span class="text-4xl">🎁</span>
+							</div>
+							<h3 class="text-xl font-bold text-foreground">Geschenk erstellt!</h3>
+							<p class="mt-1 text-muted-foreground">Teile diesen Link mit dem Empfänger</p>
+
+							<div class="mt-6 rounded-lg bg-surface p-4">
+								<p class="font-mono text-2xl font-bold text-primary">{createdGift.code}</p>
+								<p class="mt-2 text-sm text-muted-foreground break-all">{createdGift.url}</p>
+							</div>
+
+							<div class="mt-4 flex justify-center gap-2">
+								<button
+									onclick={() => copyToClipboard(createdGift!.url)}
+									class="rounded-lg bg-primary px-4 py-2 font-medium text-primary-foreground hover:bg-primary/90"
+								>
+									Link kopieren
+								</button>
+								<button
+									onclick={() => copyToClipboard(createdGift!.code)}
+									class="rounded-lg bg-surface px-4 py-2 font-medium text-foreground hover:bg-surface-hover border border-border"
+								>
+									Code kopieren
+								</button>
+							</div>
+
+							<button
+								onclick={() => (createdGift = null)}
+								class="mt-6 text-sm text-primary hover:underline"
+							>
+								Weiteres Geschenk erstellen
+							</button>
+						</div>
+					</Card>
+				{:else}
+					<!-- Info card -->
+					<Card>
+						<h3 class="text-lg font-semibold mb-4">So funktioniert's</h3>
+						<div class="space-y-4">
+							<div class="flex gap-3">
+								<div
+									class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary font-bold"
+								>
+									1
+								</div>
+								<div>
+									<p class="font-medium">Credits wählen</p>
+									<p class="text-sm text-muted-foreground">
+										Bestimme, wie viele Credits du verschenken möchtest.
+									</p>
+								</div>
+							</div>
+							<div class="flex gap-3">
+								<div
+									class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary font-bold"
+								>
+									2
+								</div>
+								<div>
+									<p class="font-medium">Code erstellen</p>
+									<p class="text-sm text-muted-foreground">
+										Ein einzigartiger 6-stelliger Code wird generiert.
+									</p>
+								</div>
+							</div>
+							<div class="flex gap-3">
+								<div
+									class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary font-bold"
+								>
+									3
+								</div>
+								<div>
+									<p class="font-medium">Link teilen</p>
+									<p class="text-sm text-muted-foreground">
+										Sende den Link oder Code an den Empfänger.
+									</p>
+								</div>
+							</div>
+							<div class="flex gap-3">
+								<div
+									class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary font-bold"
+								>
+									4
+								</div>
+								<div>
+									<p class="font-medium">Einlösen</p>
+									<p class="text-sm text-muted-foreground">
+										Der Empfänger erhält die Credits auf sein Konto.
+									</p>
+								</div>
+							</div>
+						</div>
+
+						<div class="mt-6 rounded-lg bg-surface p-4">
+							<p class="text-sm text-muted-foreground">
+								<strong>Hinweis:</strong> Die Credits werden beim Erstellen von deinem Konto abgezogen.
+								Falls der Code nicht eingelöst wird, kannst du ihn stornieren und die Credits zurückerhalten.
+							</p>
+						</div>
+					</Card>
+				{/if}
+			</div>
+		{/if}
+	{/if}
+</div>
+
+<!-- Toast Notification -->
+{#if toastMessage}
+	<div
+		class="fixed bottom-4 right-4 z-50 px-4 py-3 rounded-lg shadow-lg animate-fade-in {toastType ===
+		'success'
+			? 'bg-green-600 text-white'
+			: 'bg-red-600 text-white'}"
+	>
+		{toastMessage}
+	</div>
+{/if}
+
+<style>
+	@keyframes fade-in {
+		from {
+			opacity: 0;
+			transform: translateY(10px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+	.animate-fade-in {
+		animation: fade-in 0.2s ease-out;
+	}
+</style>
diff --git a/apps/manacore/apps/web/src/routes/(app)/gifts/redeem/+page.svelte b/apps/manacore/apps/web/src/routes/(app)/gifts/redeem/+page.svelte
new file mode 100644
index 000000000..a2c2aa63e
--- /dev/null
+++ b/apps/manacore/apps/web/src/routes/(app)/gifts/redeem/+page.svelte
@@ -0,0 +1,179 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { Card, PageHeader } from '@manacore/shared-ui';
+	import { giftsService, type GiftCodeInfo } from '$lib/api/gifts';
+
+	let code = $state('');
+	let checking = $state(false);
+	let error = $state<string | null>(null);
+	let giftInfo = $state<GiftCodeInfo | null>(null);
+
+	function formatCode(value: string): string {
+		// Remove non-alphanumeric characters and convert to uppercase
+		return value.replace(/[^A-Za-z0-9]/g, '').toUpperCase();
+	}
+
+	function handleInput(event: Event) {
+		const input = event.target as HTMLInputElement;
+		code = formatCode(input.value);
+		// Clear previous results when typing
+		error = null;
+		giftInfo = null;
+	}
+
+	async function checkCode() {
+		if (!code.trim()) {
+			error = 'Bitte gib einen Code ein';
+			return;
+		}
+
+		checking = true;
+		error = null;
+		giftInfo = null;
+
+		try {
+			giftInfo = await giftsService.getGiftInfo(code);
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Code nicht gefunden';
+			console.error('Failed to check gift code:', e);
+		} finally {
+			checking = false;
+		}
+	}
+
+	function goToRedeem() {
+		goto(`/gifts/redeem/${code}`);
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Enter') {
+			if (giftInfo) {
+				goToRedeem();
+			} else {
+				checkCode();
+			}
+		}
+	}
+
+	function getStatusLabel(status: string): string {
+		switch (status) {
+			case 'active':
+				return 'Aktiv';
+			case 'depleted':
+				return 'Aufgebraucht';
+			case 'expired':
+				return 'Abgelaufen';
+			case 'cancelled':
+				return 'Storniert';
+			case 'refunded':
+				return 'Erstattet';
+			default:
+				return status;
+		}
+	}
+</script>
+
+<div>
+	<PageHeader
+		title="Geschenk-Code eingeben"
+		description="Gib deinen 6-stelligen Geschenk-Code ein"
+		size="lg"
+	/>
+
+	<div class="max-w-md mx-auto">
+		<Card>
+			<div class="text-center mb-6">
+				<div
+					class="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-primary/10"
+				>
+					<span class="text-3xl">🎁</span>
+				</div>
+				<p class="text-muted-foreground">
+					Geschenk-Codes bestehen aus 6 Zeichen und sind unter URLs wie
+					<span class="font-mono text-primary">mana.how/g/ABC123</span> zu finden.
+				</p>
+			</div>
+
+			<div class="mb-6">
+				<label for="gift-code" class="block text-sm font-medium text-foreground mb-2">
+					Geschenk-Code
+				</label>
+				<input
+					id="gift-code"
+					type="text"
+					value={code}
+					oninput={handleInput}
+					onkeydown={handleKeydown}
+					placeholder="z.B. MANA01"
+					maxlength="10"
+					class="w-full rounded-lg border border-border bg-background px-4 py-3 text-center text-2xl font-mono font-bold tracking-widest text-foreground placeholder:text-lg placeholder:font-normal placeholder:tracking-normal focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+					disabled={checking}
+				/>
+			</div>
+
+			{#if error}
+				<div class="mb-4 rounded-lg bg-red-50 dark:bg-red-900/20 p-4 text-center">
+					<p class="text-sm text-red-800 dark:text-red-200">{error}</p>
+				</div>
+			{/if}
+
+			{#if giftInfo}
+				<div
+					class="mb-6 rounded-lg border border-green-200 dark:border-green-800 bg-green-50 dark:bg-green-900/20 p-4"
+				>
+					<div class="flex items-center gap-2 mb-2">
+						<span class="text-xl">✓</span>
+						<p class="font-medium text-green-800 dark:text-green-200">Gültiger Code gefunden!</p>
+					</div>
+					<div class="text-sm text-green-700 dark:text-green-300 space-y-1">
+						<p>Credits: <span class="font-semibold">{giftInfo.creditsPerPortion}</span></p>
+						<p>Status: <span class="font-semibold">{getStatusLabel(giftInfo.status)}</span></p>
+						{#if giftInfo.creatorName}
+							<p>Von: <span class="font-semibold">{giftInfo.creatorName}</span></p>
+						{/if}
+					</div>
+				</div>
+			{/if}
+
+			{#if giftInfo && giftInfo.status === 'active'}
+				<button
+					onclick={goToRedeem}
+					class="w-full rounded-lg bg-primary py-3 font-semibold text-primary-foreground transition-colors hover:bg-primary/90"
+				>
+					Jetzt einlösen
+				</button>
+			{:else}
+				<button
+					onclick={checkCode}
+					disabled={checking || !code.trim()}
+					class="w-full rounded-lg bg-primary py-3 font-semibold text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50 flex items-center justify-center gap-2"
+				>
+					{#if checking}
+						<svg class="animate-spin h-5 w-5" fill="none" viewBox="0 0 24 24">
+							<circle
+								class="opacity-25"
+								cx="12"
+								cy="12"
+								r="10"
+								stroke="currentColor"
+								stroke-width="4"
+							></circle>
+							<path
+								class="opacity-75"
+								fill="currentColor"
+								d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+							></path>
+						</svg>
+						Code wird geprüft...
+					{:else}
+						Code prüfen
+					{/if}
+				</button>
+			{/if}
+		</Card>
+
+		<div class="mt-6 text-center">
+			<a href="/gifts" class="text-sm text-primary hover:underline"> ← Zurück zu Geschenke </a>
+		</div>
+	</div>
+</div>
diff --git a/apps/manacore/apps/web/src/routes/(app)/gifts/redeem/[code]/+page.svelte b/apps/manacore/apps/web/src/routes/(app)/gifts/redeem/[code]/+page.svelte
new file mode 100644
index 000000000..e577375cf
--- /dev/null
+++ b/apps/manacore/apps/web/src/routes/(app)/gifts/redeem/[code]/+page.svelte
@@ -0,0 +1,381 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { goto } from '$app/navigation';
+	import { page } from '$app/stores';
+	import { Card, PageHeader } from '@manacore/shared-ui';
+	import { giftsService, type GiftCodeInfo } from '$lib/api/gifts';
+
+	let code = $derived($page.params.code);
+	let giftInfo = $state<GiftCodeInfo | null>(null);
+	let loading = $state(true);
+	let redeeming = $state(false);
+	let success = $state(false);
+	let error = $state<string | null>(null);
+	let riddleAnswer = $state('');
+	let receivedCredits = $state(0);
+	let newBalance = $state(0);
+
+	// Toast notification
+	let toastMessage = $state<string | null>(null);
+	let toastType = $state<'success' | 'error'>('success');
+
+	onMount(async () => {
+		await loadGiftInfo();
+	});
+
+	async function loadGiftInfo() {
+		loading = true;
+		error = null;
+
+		try {
+			giftInfo = await giftsService.getGiftInfo(code);
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Geschenk-Code nicht gefunden';
+			console.error('Failed to load gift info:', e);
+		} finally {
+			loading = false;
+		}
+	}
+
+	async function handleRedeem() {
+		if (!giftInfo) return;
+		if (giftInfo.hasRiddle && !riddleAnswer.trim()) {
+			showToast('Bitte gib die Antwort auf das Rätsel ein', 'error');
+			return;
+		}
+
+		redeeming = true;
+		error = null;
+
+		try {
+			const result = await giftsService.redeemGift(
+				code,
+				giftInfo.hasRiddle ? riddleAnswer : undefined
+			);
+
+			if (result.success) {
+				success = true;
+				receivedCredits = result.credits || 0;
+				newBalance = result.newBalance || 0;
+				showToast(`${receivedCredits} Credits erhalten!`, 'success');
+			} else {
+				error = result.error || 'Einlösen fehlgeschlagen';
+				showToast(error, 'error');
+			}
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Einlösen fehlgeschlagen';
+			showToast(error, 'error');
+			console.error('Failed to redeem gift:', e);
+		} finally {
+			redeeming = false;
+		}
+	}
+
+	function showToast(message: string, type: 'success' | 'error') {
+		toastMessage = message;
+		toastType = type;
+		setTimeout(() => {
+			toastMessage = null;
+		}, 4000);
+	}
+
+	function formatDate(dateStr: string): string {
+		return new Date(dateStr).toLocaleDateString('de-DE', {
+			day: '2-digit',
+			month: '2-digit',
+			year: 'numeric',
+		});
+	}
+
+	function getStatusLabel(status: string): string {
+		switch (status) {
+			case 'active':
+				return 'Aktiv';
+			case 'depleted':
+				return 'Aufgebraucht';
+			case 'expired':
+				return 'Abgelaufen';
+			case 'cancelled':
+				return 'Storniert';
+			case 'refunded':
+				return 'Erstattet';
+			default:
+				return status;
+		}
+	}
+
+	function getTypeLabel(type: string): string {
+		switch (type) {
+			case 'simple':
+				return 'Geschenk';
+			case 'personalized':
+				return 'Persönliches Geschenk';
+			case 'split':
+				return 'Geteiltes Geschenk';
+			case 'first_come':
+				return 'Erste kommen';
+			case 'riddle':
+				return 'Rätsel-Geschenk';
+			default:
+				return type;
+		}
+	}
+</script>
+
+<div>
+	<PageHeader title="Geschenk einlösen" description="Löse deinen Geschenk-Code ein" size="lg" />
+
+	{#if loading}
+		<div class="flex items-center justify-center py-12">
+			<div
+				class="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent"
+			></div>
+		</div>
+	{:else if success}
+		<!-- Success state -->
+		<Card>
+			<div class="py-12 text-center">
+				<div
+					class="mx-auto mb-6 flex h-24 w-24 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/20 animate-bounce-once"
+				>
+					<span class="text-5xl">🎉</span>
+				</div>
+				<h2 class="text-2xl font-bold text-foreground">Geschenk eingelöst!</h2>
+				<p class="mt-2 text-5xl font-bold text-primary">+{receivedCredits}</p>
+				<p class="text-lg text-muted-foreground">Credits erhalten</p>
+				<p class="mt-4 text-muted-foreground">
+					Dein neuer Kontostand: <span class="font-semibold">{newBalance} Credits</span>
+				</p>
+				<div class="mt-8 flex justify-center gap-4">
+					<a
+						href="/credits"
+						class="rounded-lg bg-primary px-6 py-2 font-medium text-primary-foreground hover:bg-primary/90"
+					>
+						Zu meinen Credits
+					</a>
+					<a
+						href="/gifts"
+						class="rounded-lg bg-surface px-6 py-2 font-medium text-foreground hover:bg-surface-hover"
+					>
+						Geschenke ansehen
+					</a>
+				</div>
+			</div>
+		</Card>
+	{:else if error && !giftInfo}
+		<!-- Gift not found error -->
+		<Card>
+			<div class="py-8 text-center">
+				<div
+					class="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-100 dark:bg-red-900/20"
+				>
+					<span class="text-3xl">❌</span>
+				</div>
+				<p class="text-red-500 mb-4">{error}</p>
+				<a
+					href="/gifts/redeem"
+					class="inline-block rounded-lg bg-primary px-6 py-2 text-primary-foreground hover:bg-primary/90"
+				>
+					Anderen Code eingeben
+				</a>
+			</div>
+		</Card>
+	{:else if giftInfo}
+		<div class="grid gap-6 lg:grid-cols-2">
+			<!-- Gift info card -->
+			<Card>
+				<div class="text-center">
+					<div
+						class="mx-auto mb-4 flex h-20 w-20 items-center justify-center rounded-full bg-primary/10"
+					>
+						<span class="text-4xl">🎁</span>
+					</div>
+					<p class="font-mono text-lg font-bold text-primary">{giftInfo.code}</p>
+					{#if giftInfo.creatorName}
+						<p class="mt-1 text-sm text-muted-foreground">Von {giftInfo.creatorName}</p>
+					{/if}
+				</div>
+
+				<div class="mt-6 text-center">
+					<p class="text-sm text-muted-foreground">Du erhältst</p>
+					<p class="text-4xl font-bold text-primary">{giftInfo.creditsPerPortion}</p>
+					<p class="text-muted-foreground">Credits</p>
+				</div>
+
+				<div class="mt-6 space-y-3 rounded-lg bg-surface p-4">
+					<div class="flex justify-between text-sm">
+						<span class="text-muted-foreground">Art</span>
+						<span class="font-medium">{getTypeLabel(giftInfo.type)}</span>
+					</div>
+					<div class="flex justify-between text-sm">
+						<span class="text-muted-foreground">Status</span>
+						<span
+							class="font-medium {giftInfo.status === 'active'
+								? 'text-green-600 dark:text-green-400'
+								: 'text-amber-600 dark:text-amber-400'}"
+						>
+							{getStatusLabel(giftInfo.status)}
+						</span>
+					</div>
+					{#if giftInfo.totalPortions > 1}
+						<div class="flex justify-between text-sm">
+							<span class="text-muted-foreground">Verfügbar</span>
+							<span class="font-medium"
+								>{giftInfo.remainingPortions} / {giftInfo.totalPortions}</span
+							>
+						</div>
+					{/if}
+					{#if giftInfo.expiresAt}
+						<div class="flex justify-between text-sm">
+							<span class="text-muted-foreground">Gültig bis</span>
+							<span class="font-medium">{formatDate(giftInfo.expiresAt)}</span>
+						</div>
+					{/if}
+				</div>
+
+				{#if giftInfo.message}
+					<div class="mt-6 rounded-lg border border-border p-4">
+						<p class="text-sm text-muted-foreground mb-1">Nachricht:</p>
+						<p class="italic text-foreground">"{giftInfo.message}"</p>
+					</div>
+				{/if}
+			</Card>
+
+			<!-- Redemption card -->
+			<Card>
+				<h3 class="text-lg font-semibold mb-4">Einlösen</h3>
+
+				{#if giftInfo.status !== 'active'}
+					<div class="rounded-lg bg-amber-50 dark:bg-amber-900/20 p-4 text-center">
+						<p class="font-medium text-amber-800 dark:text-amber-200">
+							{#if giftInfo.status === 'depleted'}
+								Dieses Geschenk wurde bereits vollständig eingelöst
+							{:else if giftInfo.status === 'expired'}
+								Dieses Geschenk ist abgelaufen
+							{:else}
+								Dieses Geschenk kann nicht eingelöst werden
+							{/if}
+						</p>
+					</div>
+				{:else}
+					{#if giftInfo.isPersonalized}
+						<div class="mb-4 rounded-lg bg-blue-50 dark:bg-blue-900/20 p-4">
+							<div class="flex items-center gap-2">
+								<span class="text-xl">👤</span>
+								<p class="text-sm text-blue-800 dark:text-blue-200">
+									Dieses Geschenk ist für eine bestimmte Person. Nur der vorgesehene Empfänger kann
+									es einlösen.
+								</p>
+							</div>
+						</div>
+					{/if}
+
+					{#if giftInfo.hasRiddle}
+						<div class="mb-4 rounded-lg bg-purple-50 dark:bg-purple-900/20 p-4">
+							<div class="flex items-start gap-2">
+								<span class="text-xl">🧩</span>
+								<div>
+									<p class="font-medium text-purple-800 dark:text-purple-200 mb-2">Rätsel:</p>
+									<p class="text-purple-900 dark:text-purple-100">{giftInfo.riddleQuestion}</p>
+								</div>
+							</div>
+						</div>
+
+						<div class="mb-6">
+							<label for="riddle-answer" class="block text-sm font-medium text-foreground mb-2">
+								Deine Antwort
+							</label>
+							<input
+								id="riddle-answer"
+								type="text"
+								bind:value={riddleAnswer}
+								placeholder="Antwort eingeben..."
+								class="w-full rounded-lg border border-border bg-background px-4 py-2 text-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+								disabled={redeeming}
+							/>
+						</div>
+					{/if}
+
+					{#if error}
+						<div class="mb-4 rounded-lg bg-red-50 dark:bg-red-900/20 p-4">
+							<p class="text-sm text-red-800 dark:text-red-200">{error}</p>
+						</div>
+					{/if}
+
+					<button
+						onclick={handleRedeem}
+						disabled={redeeming || (giftInfo.hasRiddle && !riddleAnswer.trim())}
+						class="w-full rounded-lg bg-primary py-3 font-semibold text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50 flex items-center justify-center gap-2"
+					>
+						{#if redeeming}
+							<svg class="animate-spin h-5 w-5" fill="none" viewBox="0 0 24 24">
+								<circle
+									class="opacity-25"
+									cx="12"
+									cy="12"
+									r="10"
+									stroke="currentColor"
+									stroke-width="4"
+								></circle>
+								<path
+									class="opacity-75"
+									fill="currentColor"
+									d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+								></path>
+							</svg>
+							Wird eingelöst...
+						{:else}
+							🎁 Geschenk einlösen
+						{/if}
+					</button>
+				{/if}
+
+				<div class="mt-6 text-center">
+					<a href="/gifts/redeem" class="text-sm text-primary hover:underline">
+						Anderen Code eingeben
+					</a>
+				</div>
+			</Card>
+		</div>
+	{/if}
+</div>
+
+<!-- Toast Notification -->
+{#if toastMessage}
+	<div
+		class="fixed bottom-4 right-4 z-50 px-4 py-3 rounded-lg shadow-lg animate-fade-in {toastType ===
+		'success'
+			? 'bg-green-600 text-white'
+			: 'bg-red-600 text-white'}"
+	>
+		{toastMessage}
+	</div>
+{/if}
+
+<style>
+	@keyframes fade-in {
+		from {
+			opacity: 0;
+			transform: translateY(10px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+	.animate-fade-in {
+		animation: fade-in 0.2s ease-out;
+	}
+	@keyframes bounce-once {
+		0%,
+		100% {
+			transform: translateY(0);
+		}
+		50% {
+			transform: translateY(-20px);
+		}
+	}
+	.animate-bounce-once {
+		animation: bounce-once 0.6s ease-out;
+	}
+</style>
diff --git a/apps/manacore/apps/web/src/routes/g/[code]/+page.svelte b/apps/manacore/apps/web/src/routes/g/[code]/+page.svelte
new file mode 100644
index 000000000..41cd465bc
--- /dev/null
+++ b/apps/manacore/apps/web/src/routes/g/[code]/+page.svelte
@@ -0,0 +1,228 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { goto } from '$app/navigation';
+	import { page } from '$app/stores';
+	import { giftsService, type GiftCodeInfo } from '$lib/api/gifts';
+
+	let code = $derived($page.params.code);
+	let giftInfo = $state<GiftCodeInfo | null>(null);
+	let loading = $state(true);
+	let error = $state<string | null>(null);
+
+	onMount(async () => {
+		await loadGiftInfo();
+	});
+
+	async function loadGiftInfo() {
+		loading = true;
+		error = null;
+
+		try {
+			giftInfo = await giftsService.getGiftInfo(code);
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Geschenk-Code nicht gefunden';
+			console.error('Failed to load gift info:', e);
+		} finally {
+			loading = false;
+		}
+	}
+
+	function handleRedeem() {
+		// Redirect to the redemption page (within the authenticated area)
+		goto(`/gifts/redeem/${code}`);
+	}
+
+	function formatDate(dateStr: string): string {
+		return new Date(dateStr).toLocaleDateString('de-DE', {
+			day: '2-digit',
+			month: '2-digit',
+			year: 'numeric',
+		});
+	}
+
+	function getStatusLabel(status: string): string {
+		switch (status) {
+			case 'active':
+				return 'Aktiv';
+			case 'depleted':
+				return 'Aufgebraucht';
+			case 'expired':
+				return 'Abgelaufen';
+			case 'cancelled':
+				return 'Storniert';
+			case 'refunded':
+				return 'Erstattet';
+			default:
+				return status;
+		}
+	}
+
+	function getTypeLabel(type: string): string {
+		switch (type) {
+			case 'simple':
+				return 'Geschenk';
+			case 'personalized':
+				return 'Persönliches Geschenk';
+			case 'split':
+				return 'Geteiltes Geschenk';
+			case 'first_come':
+				return 'Erste kommen';
+			case 'riddle':
+				return 'Rätsel-Geschenk';
+			default:
+				return type;
+		}
+	}
+</script>
+
+<svelte:head>
+	<title>Geschenk-Code {code} | ManaCore</title>
+</svelte:head>
+
+<div class="min-h-screen bg-gradient-to-br from-primary/5 via-background to-primary/10">
+	<div class="flex min-h-screen items-center justify-center p-4">
+		<div class="w-full max-w-md">
+			{#if loading}
+				<div class="rounded-2xl bg-card p-8 shadow-xl">
+					<div class="flex flex-col items-center justify-center py-8">
+						<div
+							class="h-12 w-12 animate-spin rounded-full border-4 border-primary border-t-transparent"
+						></div>
+						<p class="mt-4 text-muted-foreground">Geschenk wird geladen...</p>
+					</div>
+				</div>
+			{:else if error}
+				<div class="rounded-2xl bg-card p-8 shadow-xl">
+					<div class="text-center">
+						<div
+							class="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-100 dark:bg-red-900/20"
+						>
+							<span class="text-3xl">❌</span>
+						</div>
+						<h1 class="text-xl font-bold text-foreground">Geschenk nicht gefunden</h1>
+						<p class="mt-2 text-muted-foreground">{error}</p>
+						<a
+							href="/gifts/redeem"
+							class="mt-6 inline-block rounded-lg bg-primary px-6 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90"
+						>
+							Code manuell eingeben
+						</a>
+					</div>
+				</div>
+			{:else if giftInfo}
+				<div class="rounded-2xl bg-card overflow-hidden shadow-xl">
+					<!-- Header with gift icon -->
+					<div class="bg-gradient-to-r from-primary to-primary/80 px-8 py-6 text-center text-white">
+						<div
+							class="mx-auto mb-3 flex h-16 w-16 items-center justify-center rounded-full bg-white/20 backdrop-blur"
+						>
+							<span class="text-4xl">🎁</span>
+						</div>
+						<h1 class="text-2xl font-bold">Du hast ein Geschenk!</h1>
+						{#if giftInfo.creatorName}
+							<p class="mt-1 text-sm text-white/80">Von {giftInfo.creatorName}</p>
+						{/if}
+					</div>
+
+					<!-- Gift details -->
+					<div class="p-8">
+						{#if giftInfo.status !== 'active'}
+							<div class="mb-6 rounded-lg bg-amber-50 dark:bg-amber-900/20 p-4 text-center">
+								<p class="font-medium text-amber-800 dark:text-amber-200">
+									{#if giftInfo.status === 'depleted'}
+										Dieses Geschenk wurde bereits vollständig eingelöst
+									{:else if giftInfo.status === 'expired'}
+										Dieses Geschenk ist abgelaufen
+									{:else}
+										Status: {getStatusLabel(giftInfo.status)}
+									{/if}
+								</p>
+							</div>
+						{/if}
+
+						<!-- Credits amount -->
+						<div class="mb-6 text-center">
+							<p class="text-sm text-muted-foreground">Du erhältst</p>
+							<p class="text-5xl font-bold text-primary">{giftInfo.creditsPerPortion}</p>
+							<p class="text-lg text-muted-foreground">Credits</p>
+						</div>
+
+						<!-- Gift info -->
+						<div class="mb-6 space-y-3 rounded-lg bg-surface p-4">
+							<div class="flex justify-between text-sm">
+								<span class="text-muted-foreground">Art</span>
+								<span class="font-medium">{getTypeLabel(giftInfo.type)}</span>
+							</div>
+							{#if giftInfo.totalPortions > 1}
+								<div class="flex justify-between text-sm">
+									<span class="text-muted-foreground">Verfügbar</span>
+									<span class="font-medium"
+										>{giftInfo.remainingPortions} / {giftInfo.totalPortions}</span
+									>
+								</div>
+							{/if}
+							{#if giftInfo.expiresAt}
+								<div class="flex justify-between text-sm">
+									<span class="text-muted-foreground">Gültig bis</span>
+									<span class="font-medium">{formatDate(giftInfo.expiresAt)}</span>
+								</div>
+							{/if}
+						</div>
+
+						<!-- Message -->
+						{#if giftInfo.message}
+							<div class="mb-6 rounded-lg border border-border p-4">
+								<p class="text-sm text-muted-foreground mb-1">Nachricht:</p>
+								<p class="italic text-foreground">"{giftInfo.message}"</p>
+							</div>
+						{/if}
+
+						<!-- Riddle hint -->
+						{#if giftInfo.hasRiddle}
+							<div class="mb-6 rounded-lg bg-purple-50 dark:bg-purple-900/20 p-4 text-center">
+								<span class="text-2xl">🧩</span>
+								<p class="mt-1 text-sm text-purple-800 dark:text-purple-200">
+									Dieses Geschenk enthält ein Rätsel
+								</p>
+							</div>
+						{/if}
+
+						<!-- Personalized hint -->
+						{#if giftInfo.isPersonalized && giftInfo.status === 'active'}
+							<div class="mb-6 rounded-lg bg-blue-50 dark:bg-blue-900/20 p-4 text-center">
+								<span class="text-2xl">👤</span>
+								<p class="mt-1 text-sm text-blue-800 dark:text-blue-200">
+									Dieses Geschenk ist für eine bestimmte Person
+								</p>
+							</div>
+						{/if}
+
+						<!-- Redeem button -->
+						{#if giftInfo.status === 'active'}
+							<button
+								onclick={handleRedeem}
+								class="w-full rounded-lg bg-primary py-3 text-lg font-semibold text-primary-foreground transition-colors hover:bg-primary/90"
+							>
+								Jetzt einlösen
+							</button>
+						{:else}
+							<a
+								href="/gifts/redeem"
+								class="block w-full rounded-lg bg-surface py-3 text-center text-lg font-semibold text-foreground transition-colors hover:bg-surface-hover"
+							>
+								Anderen Code eingeben
+							</a>
+						{/if}
+					</div>
+				</div>
+
+				<!-- Code display -->
+				<div class="mt-4 text-center">
+					<p class="text-sm text-muted-foreground">
+						Code: <span class="font-mono font-bold">{giftInfo.code}</span>
+					</p>
+				</div>
+			{/if}
+		</div>
+	</div>
+</div>
diff --git a/packages/shared-ui/src/navigation/PillNavigation.svelte b/packages/shared-ui/src/navigation/PillNavigation.svelte
index d3be41770..25701f30b 100644
--- a/packages/shared-ui/src/navigation/PillNavigation.svelte
+++ b/packages/shared-ui/src/navigation/PillNavigation.svelte
@@ -59,6 +59,7 @@
 		Robot,
 		Key,
 		Shield,
+		Gift,
 	} from '@manacore/shared-icons';
 
 	// Map icon names to Phosphor components
@@ -113,6 +114,7 @@
 		robot: Robot,
 		key: Key,
 		shield: Shield,
+		gift: Gift,
 	};
 
 	// Convert app items to dropdown items (will be computed as derived)