diff --git a/apps/manacore/apps/web/src/lib/components/workbench/AppPage.svelte b/apps/manacore/apps/web/src/lib/components/workbench/AppPage.svelte
new file mode 100644
index 000000000..9fdc5aaf7
--- /dev/null
+++ b/apps/manacore/apps/web/src/lib/components/workbench/AppPage.svelte
@@ -0,0 +1,357 @@
+<!--
+  AppPage — Paper-sheet wrapper for any app in the workbench carousel.
+  Lazy-loads the app's AppView component and renders it inside the page shell.
+-->
+<script lang="ts">
+	import {
+		X,
+		Minus,
+		DotsSixVertical,
+		CornersOut,
+		CornersIn,
+		ArrowLeft,
+		ArrowRight,
+		SpinnerGap,
+	} from '@manacore/shared-icons';
+	import { getAppEntry } from './app-registry';
+	import type { Component } from 'svelte';
+
+	interface Props {
+		appId: string;
+		pageWidth: string;
+		maximized?: boolean;
+		editMode?: boolean;
+		isFirst?: boolean;
+		isLast?: boolean;
+		onClose: () => void;
+		onMinimize?: () => void;
+		onMaximize?: () => void;
+		onMoveLeft?: () => void;
+		onMoveRight?: () => void;
+	}
+
+	let {
+		appId,
+		pageWidth,
+		maximized = false,
+		editMode = false,
+		isFirst = false,
+		isLast = false,
+		onClose,
+		onMinimize,
+		onMaximize,
+		onMoveLeft,
+		onMoveRight,
+	}: Props = $props();
+
+	let appEntry = $derived(getAppEntry(appId));
+	let appName = $derived(appEntry?.name ?? appId);
+	let appColor = $derived(appEntry?.color ?? '#6B7280');
+
+	// Lazy-load app component
+	let AppComponent = $state<Component | null>(null);
+	let loadError = $state(false);
+
+	$effect(() => {
+		AppComponent = null;
+		loadError = false;
+		if (appEntry) {
+			appEntry.load().then(
+				(mod) => (AppComponent = mod.default),
+				() => (loadError = true)
+			);
+		}
+	});
+</script>
+
+<div
+	class="app-page"
+	class:maximized
+	class:editing={editMode}
+	style="width: {maximized ? '100%' : pageWidth}"
+>
+	<div class="drag-handle-bar">
+		<span class="drag-handle"><DotsSixVertical size={14} /></span>
+	</div>
+
+	<!-- Edit controls -->
+	{#if editMode}
+		<div class="edit-controls">
+			<div class="move-btns">
+				{#if !isFirst && onMoveLeft}
+					<button class="edit-btn" onclick={onMoveLeft} title="Nach links">
+						<ArrowLeft size={14} />
+					</button>
+				{/if}
+				{#if !isLast && onMoveRight}
+					<button class="edit-btn" onclick={onMoveRight} title="Nach rechts">
+						<ArrowRight size={14} />
+					</button>
+				{/if}
+			</div>
+			<button class="edit-btn delete-btn" onclick={onClose} title="App entfernen">
+				<X size={14} />
+			</button>
+		</div>
+	{/if}
+
+	<!-- Header -->
+	<div class="page-header">
+		<div class="header-left">
+			<span class="app-dot" style="background-color: {appColor}"></span>
+			<span class="app-name">{appName}</span>
+		</div>
+		{#if !editMode}
+			<div class="header-actions">
+				{#if onMinimize}
+					<button class="header-btn" onclick={onMinimize} title="Minimieren">
+						<Minus size={14} />
+					</button>
+				{/if}
+				{#if onMaximize}
+					<button
+						class="header-btn"
+						onclick={onMaximize}
+						title={maximized ? 'Verkleinern' : 'Maximieren'}
+					>
+						{#if maximized}<CornersIn size={14} />{:else}<CornersOut size={14} />{/if}
+					</button>
+				{/if}
+				<button class="header-btn" onclick={onClose} title="Schließen">
+					<X size={14} />
+				</button>
+			</div>
+		{/if}
+	</div>
+
+	<!-- App content -->
+	<div class="page-body">
+		{#if loadError}
+			<div class="load-state">
+				<p>App konnte nicht geladen werden</p>
+			</div>
+		{:else if AppComponent}
+			<AppComponent />
+		{:else}
+			<div class="load-state">
+				<SpinnerGap size={24} class="spinner" />
+			</div>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.app-page {
+		flex: 0 0 auto;
+		min-height: 60vh;
+		background: #fffef5;
+		border-radius: 0.375rem;
+		box-shadow:
+			0 2px 8px rgba(0, 0, 0, 0.08),
+			0 0 0 1px rgba(0, 0, 0, 0.04);
+		display: flex;
+		flex-direction: column;
+		animation: fadeIn 0.25s ease-out;
+		overflow: hidden;
+	}
+	:global(.dark) .app-page {
+		background-color: #252220;
+		box-shadow:
+			0 2px 8px rgba(0, 0, 0, 0.25),
+			0 0 0 1px rgba(255, 255, 255, 0.06);
+	}
+	.app-page.editing {
+		box-shadow:
+			0 2px 12px rgba(139, 92, 246, 0.12),
+			0 0 0 2px rgba(139, 92, 246, 0.3);
+	}
+	:global(.dark) .app-page.editing {
+		box-shadow:
+			0 2px 12px rgba(139, 92, 246, 0.2),
+			0 0 0 2px rgba(139, 92, 246, 0.4);
+	}
+	.app-page.maximized {
+		position: fixed;
+		inset: 0;
+		z-index: 50;
+		width: 100% !important;
+		min-height: 100vh;
+		border-radius: 0;
+		box-shadow: none;
+		animation: fadeInScale 0.2s ease-out;
+	}
+	@keyframes fadeInScale {
+		from {
+			opacity: 0.8;
+			transform: scale(0.97);
+		}
+		to {
+			opacity: 1;
+			transform: scale(1);
+		}
+	}
+	@keyframes fadeIn {
+		from {
+			opacity: 0;
+			transform: translateX(20px);
+		}
+		to {
+			opacity: 1;
+			transform: translateX(0);
+		}
+	}
+
+	.drag-handle-bar {
+		display: flex;
+		justify-content: center;
+		padding: 0.25rem 0 0;
+	}
+	.drag-handle {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 32px;
+		height: 14px;
+		color: #d1d5db;
+		cursor: grab;
+		border-radius: 0.25rem;
+		transition: color 0.15s;
+	}
+	.drag-handle:hover {
+		color: #9ca3af;
+	}
+	.drag-handle:active {
+		cursor: grabbing;
+	}
+	:global(.dark) .drag-handle {
+		color: #3f3b38;
+	}
+	:global(.dark) .drag-handle:hover {
+		color: #6b7280;
+	}
+
+	/* Edit controls */
+	.edit-controls {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0.25rem 0.75rem;
+		border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+	}
+	:global(.dark) .edit-controls {
+		border-bottom-color: rgba(255, 255, 255, 0.08);
+	}
+	.move-btns {
+		display: flex;
+		gap: 0.25rem;
+	}
+	.edit-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 26px;
+		height: 26px;
+		border-radius: 0.25rem;
+		border: none;
+		background: transparent;
+		color: #9ca3af;
+		cursor: pointer;
+		transition: all 0.15s;
+	}
+	.edit-btn:hover {
+		background: rgba(0, 0, 0, 0.06);
+		color: #374151;
+	}
+	:global(.dark) .edit-btn:hover {
+		background: rgba(255, 255, 255, 0.1);
+		color: #e5e7eb;
+	}
+	.delete-btn:hover {
+		color: #ef4444;
+		background: rgba(239, 68, 68, 0.08);
+	}
+
+	/* Header */
+	.page-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0.5rem 1rem;
+	}
+	.header-left {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
+	.app-dot {
+		width: 0.625rem;
+		height: 0.625rem;
+		border-radius: 9999px;
+		flex-shrink: 0;
+	}
+	.app-name {
+		font-size: 0.875rem;
+		font-weight: 600;
+		color: #374151;
+	}
+	:global(.dark) .app-name {
+		color: #f3f4f6;
+	}
+
+	.header-actions {
+		display: flex;
+		align-items: center;
+		gap: 0.125rem;
+	}
+	.header-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 24px;
+		height: 24px;
+		border-radius: 0.25rem;
+		border: none;
+		background: transparent;
+		color: #9ca3af;
+		cursor: pointer;
+		transition: all 0.15s;
+	}
+	.header-btn:hover {
+		background: rgba(0, 0, 0, 0.06);
+		color: #374151;
+	}
+	:global(.dark) .header-btn:hover {
+		background: rgba(255, 255, 255, 0.1);
+		color: #f3f4f6;
+	}
+
+	/* Body */
+	.page-body {
+		flex: 1;
+		overflow-y: auto;
+		min-height: 200px;
+	}
+
+	.load-state {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 100%;
+		min-height: 200px;
+		color: #9ca3af;
+		font-size: 0.8125rem;
+	}
+
+	.load-state :global(.spinner) {
+		animation: spin 1s linear infinite;
+	}
+
+	@keyframes spin {
+		from {
+			transform: rotate(0deg);
+		}
+		to {
+			transform: rotate(360deg);
+		}
+	}
+</style>
diff --git a/apps/manacore/apps/web/src/lib/components/workbench/AppPagePicker.svelte b/apps/manacore/apps/web/src/lib/components/workbench/AppPagePicker.svelte
new file mode 100644
index 000000000..8cbbc9f0e
--- /dev/null
+++ b/apps/manacore/apps/web/src/lib/components/workbench/AppPagePicker.svelte
@@ -0,0 +1,167 @@
+<!--
+  AppPagePicker — Shows available apps to add as pages to the workbench.
+-->
+<script lang="ts">
+	import { X } from '@manacore/shared-icons';
+	import { APP_REGISTRY } from './app-registry';
+
+	interface Props {
+		onSelect: (appId: string) => void;
+		onClose: () => void;
+		activeAppIds?: string[];
+	}
+
+	let { onSelect, onClose, activeAppIds = [] }: Props = $props();
+
+	let availableApps = $derived(APP_REGISTRY.filter((app) => !activeAppIds.includes(app.id)));
+</script>
+
+<div class="app-picker">
+	<div class="picker-header">
+		<h3 class="picker-title">App hinzufügen</h3>
+		<button class="close-btn" onclick={onClose} title="Schließen"><X size={16} /></button>
+	</div>
+	<div class="picker-list">
+		{#each availableApps as app, i (app.id)}
+			{#if i > 0}<div class="divider"></div>{/if}
+			<button class="app-option" onclick={() => onSelect(app.id)}>
+				<div class="app-dot" style="background-color: {app.color}"></div>
+				<span class="app-name">{app.name}</span>
+			</button>
+		{/each}
+
+		{#if availableApps.length === 0}
+			<div class="empty-state"><p>Alle Apps sind bereits geöffnet</p></div>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.app-picker {
+		flex: 0 0 auto;
+		width: min(300px, 85vw);
+		min-height: 60vh;
+		max-height: 80vh;
+		background: #fffef5;
+		border-radius: 0.375rem;
+		box-shadow:
+			0 2px 8px rgba(0, 0, 0, 0.08),
+			0 0 0 1px rgba(0, 0, 0, 0.04);
+		display: flex;
+		flex-direction: column;
+		animation: slideIn 0.25s ease-out;
+	}
+	:global(.dark) .app-picker {
+		background-color: #252220;
+		box-shadow:
+			0 2px 8px rgba(0, 0, 0, 0.25),
+			0 0 0 1px rgba(255, 255, 255, 0.06);
+	}
+	@keyframes slideIn {
+		from {
+			opacity: 0;
+			transform: translateX(20px);
+		}
+		to {
+			opacity: 1;
+			transform: translateX(0);
+		}
+	}
+
+	.picker-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0.75rem 1rem;
+		flex-shrink: 0;
+	}
+	.picker-title {
+		font-size: 0.875rem;
+		font-weight: 600;
+		color: #374151;
+		margin: 0;
+	}
+	:global(.dark) .picker-title {
+		color: #f3f4f6;
+	}
+	.close-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 28px;
+		height: 28px;
+		border-radius: 0.375rem;
+		border: none;
+		background: transparent;
+		color: #9ca3af;
+		cursor: pointer;
+		transition: all 0.15s;
+	}
+	.close-btn:hover {
+		background: rgba(0, 0, 0, 0.06);
+		color: #374151;
+	}
+	:global(.dark) .close-btn:hover {
+		background: rgba(255, 255, 255, 0.1);
+		color: #f3f4f6;
+	}
+
+	.picker-list {
+		flex: 1;
+		overflow-y: auto;
+		padding: 0 0.5rem 0.75rem;
+	}
+	.divider {
+		height: 1px;
+		background: rgba(0, 0, 0, 0.06);
+		margin: 0 0.5rem;
+	}
+	:global(.dark) .divider {
+		background: rgba(255, 255, 255, 0.06);
+	}
+
+	.app-option {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		width: 100%;
+		padding: 0.625rem 0.5rem;
+		border: none;
+		background: transparent;
+		cursor: pointer;
+		border-radius: 0.375rem;
+		transition: background 0.15s;
+		text-align: left;
+	}
+	.app-option:hover {
+		background: rgba(0, 0, 0, 0.04);
+	}
+	:global(.dark) .app-option:hover {
+		background: rgba(255, 255, 255, 0.06);
+	}
+
+	.app-dot {
+		width: 10px;
+		height: 10px;
+		border-radius: 9999px;
+		flex-shrink: 0;
+	}
+
+	.app-name {
+		font-size: 0.875rem;
+		font-weight: 500;
+		color: #374151;
+	}
+	:global(.dark) .app-name {
+		color: #f3f4f6;
+	}
+
+	.empty-state {
+		padding: 2rem 1rem;
+		text-align: center;
+	}
+	.empty-state p {
+		font-size: 0.8125rem;
+		color: #9ca3af;
+	}
+</style>
diff --git a/apps/manacore/apps/web/src/lib/components/workbench/app-registry.ts b/apps/manacore/apps/web/src/lib/components/workbench/app-registry.ts
new file mode 100644
index 000000000..64bb418af
--- /dev/null
+++ b/apps/manacore/apps/web/src/lib/components/workbench/app-registry.ts
@@ -0,0 +1,159 @@
+/**
+ * App Component Registry — Maps app IDs to lazy-loaded AppView components.
+ *
+ * Each entry provides the dynamic import for embedding in the workbench carousel.
+ */
+
+import type { Component } from 'svelte';
+
+export interface AppEntry {
+	id: string;
+	name: string;
+	color: string;
+	load: () => Promise<{ default: Component }>;
+}
+
+export const APP_REGISTRY: AppEntry[] = [
+	{
+		id: 'todo',
+		name: 'Todo',
+		color: '#8B5CF6',
+		load: () => import('$lib/modules/todo/AppView.svelte'),
+	},
+	{
+		id: 'calendar',
+		name: 'Kalender',
+		color: '#3B82F6',
+		load: () => import('$lib/modules/calendar/AppView.svelte'),
+	},
+	{
+		id: 'contacts',
+		name: 'Kontakte',
+		color: '#22C55E',
+		load: () => import('$lib/modules/contacts/AppView.svelte'),
+	},
+	{
+		id: 'chat',
+		name: 'Chat',
+		color: '#6366F1',
+		load: () => import('$lib/modules/chat/AppView.svelte'),
+	},
+	{
+		id: 'times',
+		name: 'Times',
+		color: '#F59E0B',
+		load: () => import('$lib/modules/times/AppView.svelte'),
+	},
+	{
+		id: 'zitare',
+		name: 'Zitare',
+		color: '#EC4899',
+		load: () => import('$lib/modules/zitare/AppView.svelte'),
+	},
+	{
+		id: 'cards',
+		name: 'Cards',
+		color: '#EF4444',
+		load: () => import('$lib/modules/cards/AppView.svelte'),
+	},
+	{
+		id: 'picture',
+		name: 'Picture',
+		color: '#8B5CF6',
+		load: () => import('$lib/modules/picture/AppView.svelte'),
+	},
+	{
+		id: 'mukke',
+		name: 'Mukke',
+		color: '#F97316',
+		load: () => import('$lib/modules/mukke/AppView.svelte'),
+	},
+	{
+		id: 'photos',
+		name: 'Photos',
+		color: '#06B6D4',
+		load: () => import('$lib/modules/photos/AppView.svelte'),
+	},
+	{
+		id: 'storage',
+		name: 'Storage',
+		color: '#6B7280',
+		load: () => import('$lib/modules/storage/AppView.svelte'),
+	},
+	{
+		id: 'nutriphi',
+		name: 'Nutriphi',
+		color: '#22C55E',
+		load: () => import('$lib/modules/nutriphi/AppView.svelte'),
+	},
+	{
+		id: 'planta',
+		name: 'Planta',
+		color: '#16A34A',
+		load: () => import('$lib/modules/planta/AppView.svelte'),
+	},
+	{
+		id: 'presi',
+		name: 'Presi',
+		color: '#A855F7',
+		load: () => import('$lib/modules/presi/AppView.svelte'),
+	},
+	{
+		id: 'inventar',
+		name: 'Inventar',
+		color: '#78716C',
+		load: () => import('$lib/modules/inventar/AppView.svelte'),
+	},
+	{
+		id: 'memoro',
+		name: 'Memoro',
+		color: '#F59E0B',
+		load: () => import('$lib/modules/memoro/AppView.svelte'),
+	},
+	{
+		id: 'questions',
+		name: 'Questions',
+		color: '#2563EB',
+		load: () => import('$lib/modules/questions/AppView.svelte'),
+	},
+	{
+		id: 'skilltree',
+		name: 'SkillTree',
+		color: '#D946EF',
+		load: () => import('$lib/modules/skilltree/AppView.svelte'),
+	},
+	{
+		id: 'moodlit',
+		name: 'Moodlit',
+		color: '#F97316',
+		load: () => import('$lib/modules/moodlit/AppView.svelte'),
+	},
+	{
+		id: 'citycorners',
+		name: 'CityCorners',
+		color: '#14B8A6',
+		load: () => import('$lib/modules/citycorners/AppView.svelte'),
+	},
+	{
+		id: 'uload',
+		name: 'uLoad',
+		color: '#0EA5E9',
+		load: () => import('$lib/modules/uload/AppView.svelte'),
+	},
+	{
+		id: 'calc',
+		name: 'Calc',
+		color: '#6B7280',
+		load: () => import('$lib/modules/calc/AppView.svelte'),
+	},
+	{
+		id: 'playground',
+		name: 'Playground',
+		color: '#9CA3AF',
+		load: () => import('$lib/modules/playground/AppView.svelte'),
+	},
+];
+
+export function getAppEntry(appId: string): AppEntry | undefined {
+	return APP_REGISTRY.find((a) => a.id === appId);
+}
diff --git a/apps/manacore/apps/web/src/routes/(app)/home/+page.svelte b/apps/manacore/apps/web/src/routes/(app)/home/+page.svelte
index b541b0521..9ab7876e2 100644
--- a/apps/manacore/apps/web/src/routes/(app)/home/+page.svelte
+++ b/apps/manacore/apps/web/src/routes/(app)/home/+page.svelte
@@ -1,486 +1,624 @@
 <script lang="ts">
-	import { goto } from '$app/navigation';
-	import { locale } from 'svelte-i18n';
-	import {
-		APP_URLS,
-		APP_STATUS_LABELS,
-		getAccessibleManaApps,
-		type ManaApp,
-		type AppIconId,
-	} from '@manacore/shared-branding';
-	import { createAppNavigationStore } from '@manacore/shared-ui';
-	import { authStore } from '$lib/stores/auth.svelte';
-	import { ManaCoreEvents } from '@manacore/shared-utils/analytics';
-	import AppRow from '$lib/components/AppRow.svelte';
-	import ActivityFeed from '$lib/components/ActivityFeed.svelte';
+	import { Plus, PencilSimple, X, ArrowsOut } from '@manacore/shared-icons';
+	import AppPage from '$lib/components/workbench/AppPage.svelte';
+	import AppPagePicker from '$lib/components/workbench/AppPagePicker.svelte';
+	import { getAppEntry, APP_REGISTRY } from '$lib/components/workbench/app-registry';
+	import { createAppSettingsStore } from '@manacore/shared-stores';
 
-	const store = createAppNavigationStore();
+	// ── Persisted workbench state ───────────────────────────
+	type PageWidth = 'narrow' | 'medium' | 'wide' | 'full';
 
-	// External apps that are hosted on separate subdomains
-	const EXTERNAL_APPS = new Set<string>(['matrix', 'arcade']);
-
-	// Detect dev mode (only needed for external app URLs)
-	const isDev =
-		typeof window !== 'undefined' &&
-		(window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1');
-
-	// Current locale
-	let currentLocale = $derived(($locale as 'de' | 'en') || 'de');
-	let statusLabels = $derived(APP_STATUS_LABELS[currentLocale] || APP_STATUS_LABELS['de']);
-
-	// Filter apps by user's access tier
-	let userTier = $derived(authStore.user?.tier || 'public');
-	let activeApps = $derived(getAccessibleManaApps(userTier));
-
-	// Favorites resolved to ManaApp objects
-	let favoriteApps = $derived(
-		store.favorites
-			.map((id) => activeApps.find((a) => a.id === id))
-			.filter((a): a is ManaApp => !!a)
-	);
-
-	// Recently used resolved to ManaApp objects
-	let recentApps = $derived(
-		store.recentApps
-			.map((r) => activeApps.find((a) => a.id === r.id))
-			.filter((a): a is ManaApp => !!a)
-			.slice(0, 5)
-	);
-
-	// All apps sorted by usage frequency
-	let sortedApps = $derived(
-		[...activeApps].sort((a, b) => {
-			const countA = store.usageCounts[a.id] || 0;
-			const countB = store.usageCounts[b.id] || 0;
-			return countB - countA;
-		})
-	);
-
-	function getStatusColor(status: ManaApp['status']): string {
-		const colors = {
-			published: '#22c55e',
-			beta: '#eab308',
-			development: '#f97316',
-			planning: '#6b7280',
-		};
-		return colors[status];
+	interface WorkbenchSettings extends Record<string, unknown> {
+		openApps: { appId: string; minimized: boolean; maximized?: boolean }[];
+		pageWidth: PageWidth;
 	}
 
-	function getStatusBgColor(status: ManaApp['status']): string {
-		const colors = {
-			published: 'rgba(34, 197, 94, 0.1)',
-			beta: 'rgba(234, 179, 8, 0.1)',
-			development: 'rgba(249, 115, 22, 0.1)',
-			planning: 'rgba(107, 114, 128, 0.1)',
-		};
-		return colors[status];
+	const workbenchStore = createAppSettingsStore<WorkbenchSettings>('workbench-settings', {
+		openApps: [
+			{ appId: 'todo', minimized: false },
+			{ appId: 'calendar', minimized: false },
+			{ appId: 'contacts', minimized: false },
+		],
+		pageWidth: 'medium' as PageWidth,
+	});
+
+	// Local reactive state synced from persisted store
+	let openApps = $state<{ appId: string; minimized: boolean; maximized?: boolean }[]>([
+		{ appId: 'todo', minimized: false },
+		{ appId: 'calendar', minimized: false },
+		{ appId: 'contacts', minimized: false },
+	]);
+	let pageWidth = $state<PageWidth>('medium');
+
+	// Initialize from persisted settings
+	$effect(() => {
+		const s = workbenchStore.settings;
+		if (s.openApps?.length) openApps = [...s.openApps];
+		if (s.pageWidth) pageWidth = s.pageWidth;
+	});
+
+	// Persist changes (debounced via store)
+	function persistState() {
+		workbenchStore.update({
+			openApps: openApps.map((a) => ({
+				appId: a.appId,
+				minimized: a.minimized,
+				maximized: a.maximized,
+			})),
+			pageWidth,
+		});
 	}
 
-	function handleAppClick(app: ManaApp) {
-		store.recordAppVisit(app.id);
-		ManaCoreEvents.appOpened(app.id);
+	let expandedApps = $derived(openApps.filter((a) => !a.minimized));
 
-		if (EXTERNAL_APPS.has(app.id)) {
-			// External apps open in a new tab
-			const urls = APP_URLS[app.id];
-			if (urls) {
-				const url = isDev ? urls.dev : urls.prod;
-				window.open(url, '_blank', 'noopener,noreferrer');
-			}
+	// ── Edit mode ──────────────────────────────────────────
+	let editMode = $state(false);
+	let showPicker = $state(false);
+
+	// ── App CRUD ────────────────────────────────────────────
+	function handleAddApp(appId: string) {
+		if (!openApps.some((a) => a.appId === appId)) {
+			openApps = [...openApps, { appId, minimized: false }];
 		} else {
-			// Internal apps navigate within the unified app
-			goto(`/${app.id}`);
+			openApps = openApps.map((a) => (a.appId === appId ? { ...a, minimized: false } : a));
+		}
+		showPicker = false;
+		persistState();
+	}
+
+	function handleRemoveApp(appId: string) {
+		openApps = openApps.filter((a) => a.appId !== appId);
+		persistState();
+	}
+
+	function handleMinimizeApp(appId: string) {
+		openApps = openApps.map((a) => (a.appId === appId ? { ...a, minimized: true } : a));
+		persistState();
+	}
+
+	function handleRestoreApp(appId: string) {
+		openApps = openApps.map((a) => (a.appId === appId ? { ...a, minimized: false } : a));
+		persistState();
+	}
+
+	function handleMaximizeApp(appId: string) {
+		openApps = openApps.map((a) =>
+			a.appId === appId ? { ...a, maximized: !a.maximized, minimized: false } : a
+		);
+		persistState();
+	}
+
+	// ── Reorder ─────────────────────────────────────────────
+	function handleMoveLeft(appId: string) {
+		const idx = openApps.findIndex((a) => a.appId === appId);
+		if (idx <= 0) return;
+		const apps = [...openApps];
+		[apps[idx - 1], apps[idx]] = [apps[idx], apps[idx - 1]];
+		openApps = apps;
+		persistState();
+	}
+
+	function handleMoveRight(appId: string) {
+		const idx = openApps.findIndex((a) => a.appId === appId);
+		if (idx === -1 || idx >= openApps.length - 1) return;
+		const apps = [...openApps];
+		[apps[idx], apps[idx + 1]] = [apps[idx + 1], apps[idx]];
+		openApps = apps;
+		persistState();
+	}
+
+	// ── Drag reorder ────────────────────────────────────────
+	let dragAppId = $state<string | null>(null);
+
+	function handleDragStart(e: DragEvent, appId: string) {
+		dragAppId = appId;
+		if (e.dataTransfer) {
+			e.dataTransfer.effectAllowed = 'move';
+			e.dataTransfer.setData('text/plain', appId);
 		}
 	}
 
-	// Stats
-	let totalApps = $derived(activeApps.length);
-	let liveApps = $derived(
-		activeApps.filter((a) => a.status === 'published' || a.status === 'beta').length
+	function handleDragOver(e: DragEvent) {
+		if (!dragAppId) return;
+		e.preventDefault();
+		if (e.dataTransfer) e.dataTransfer.dropEffect = 'move';
+	}
+
+	function handleDrop(e: DragEvent, targetAppId: string) {
+		e.preventDefault();
+		if (!dragAppId || dragAppId === targetAppId) return;
+		const fromIdx = openApps.findIndex((a) => a.appId === dragAppId);
+		const toIdx = openApps.findIndex((a) => a.appId === targetAppId);
+		if (fromIdx === -1 || toIdx === -1) return;
+		const apps = [...openApps];
+		const [moved] = apps.splice(fromIdx, 1);
+		apps.splice(toIdx, 0, moved);
+		openApps = apps;
+		dragAppId = null;
+		persistState();
+	}
+
+	function handleDragEnd() {
+		dragAppId = null;
+	}
+
+	// ── Width pills ─────────────────────────────────────────
+	const WIDTH_OPTIONS: { id: PageWidth; label: string }[] = [
+		{ id: 'narrow', label: 'S' },
+		{ id: 'medium', label: 'M' },
+		{ id: 'wide', label: 'L' },
+		{ id: 'full', label: 'XL' },
+	];
+
+	const PAGE_WIDTH_MAP: Record<string, string> = {
+		narrow: 'min(360px, 85vw)',
+		medium: 'min(480px, 85vw)',
+		wide: 'min(640px, 90vw)',
+		full: 'min(840px, 95vw)',
+	};
+
+	let sheetWidthVar = $derived(PAGE_WIDTH_MAP[pageWidth] || PAGE_WIDTH_MAP.medium);
+	let sheetWidthValue = $derived(PAGE_WIDTH_MAP[pageWidth] || PAGE_WIDTH_MAP.medium);
+
+	function setPageWidth(w: PageWidth) {
+		pageWidth = w;
+		persistState();
+	}
+
+	// ── Minimized tabs ──────────────────────────────────────
+	let minimizedApps = $derived(
+		openApps
+			.filter((a) => a.minimized)
+			.map((a) => {
+				const entry = getAppEntry(a.appId);
+				return {
+					appId: a.appId,
+					name: entry?.name ?? a.appId,
+					color: entry?.color ?? '#6B7280',
+				};
+			})
 	);
 
-	// Greeting based on time
-	function getGreeting(): string {
-		const hour = new Date().getHours();
-		if (currentLocale === 'en') {
-			if (hour < 12) return 'Good morning';
-			if (hour < 18) return 'Good afternoon';
-			return 'Good evening';
-		}
-		if (hour < 12) return 'Guten Morgen';
-		if (hour < 18) return 'Guten Tag';
-		return 'Guten Abend';
-	}
+	let pickerEl = $state<HTMLDivElement | null>(null);
 
-	let greeting = $derived(getGreeting());
-	let userName = $derived(authStore.user?.email?.split('@')[0] || 'User');
+	$effect(() => {
+		if (showPicker && pickerEl) {
+			pickerEl.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });
+		}
+	});
 </script>
 
-<div class="home-page">
-	<!-- Hero Section -->
-	<div class="hero">
-		<div class="hero-content">
-			<h1 class="hero-title">
-				{greeting}, <span class="hero-name">{userName}</span>
-			</h1>
-			<p class="hero-subtitle">
-				{#if currentLocale === 'en'}
-					Your Mana ecosystem — {totalApps} apps, {liveApps} live
-				{:else}
-					Dein Mana-Ökosystem — {totalApps} Apps, {liveApps} live
-				{/if}
-			</p>
+<svelte:head>
+	<title>Home - ManaCore</title>
+</svelte:head>
+
+<div class="workbench">
+	<!-- Width pills (edit mode) -->
+	{#if editMode}
+		<div class="edit-toolbar">
+			<div class="width-pills">
+				{#each WIDTH_OPTIONS as opt (opt.id)}
+					<button
+						class="width-pill"
+						class:active={pageWidth === opt.id}
+						onclick={() => setPageWidth(opt.id)}
+					>
+						{opt.label}
+					</button>
+				{/each}
+			</div>
 		</div>
-		<div class="hero-stats">
-			<a href="/dashboard" class="stat-card">
-				<span class="stat-icon">📊</span>
-				<span class="stat-label">Dashboard</span>
-			</a>
-			<a href="/credits" class="stat-card">
-				<span class="stat-icon">💳</span>
-				<span class="stat-label">Credits</span>
-			</a>
-			<a href="/settings" class="stat-card">
-				<span class="stat-icon">⚙️</span>
-				<span class="stat-label">{currentLocale === 'en' ? 'Settings' : 'Einstellungen'}</span>
-			</a>
-		</div>
-	</div>
+	{/if}
 
-	<!-- Favorites -->
-	<AppRow
-		apps={favoriteApps}
-		title={currentLocale === 'en' ? 'Favorites' : 'Favoriten'}
-		showPin={true}
-		onAppClick={handleAppClick}
-		onTogglePin={(id) => store.toggleFavorite(id)}
-		pinnedIds={store.favorites}
-	/>
-
-	<!-- Recently Used -->
-	<AppRow
-		apps={recentApps}
-		title={currentLocale === 'en' ? 'Recently Used' : 'Zuletzt verwendet'}
-		onAppClick={handleAppClick}
-	/>
-
-	<!-- Activity Feed -->
-	<ActivityFeed locale={currentLocale} />
-
-	<!-- All Apps (sorted by usage) -->
-	<section class="category">
-		<h2 class="section-title">
-			{currentLocale === 'en' ? 'All Apps' : 'Alle Apps'}
-		</h2>
-
-		<div class="app-grid">
-			{#each sortedApps as app (app.id)}
-				<button
-					class="app-card"
-					style="--app-color: {app.color};"
-					onclick={() => handleAppClick(app)}
-				>
-					<div class="app-card-top">
-						<div class="app-icon-wrap">
-							{#if app.icon}
-								<img src={app.icon} alt={app.name} class="app-icon" />
-							{:else}
-								<div class="app-icon-fallback" style="color: {app.color};">
-									{app.name.charAt(0)}
-								</div>
-							{/if}
-						</div>
-						<div
-							class="status-badge"
-							style="color: {getStatusColor(app.status)}; background: {getStatusBgColor(
-								app.status
-							)};"
-						>
-							<span class="status-dot" style="background: {getStatusColor(app.status)};"></span>
-							{statusLabels[app.status]}
-						</div>
-					</div>
-
-					<h3 class="app-name">{app.name}</h3>
-					<p class="app-tagline">{app.description[currentLocale] || app.description.de}</p>
-
-					<div class="app-card-footer">
-						{#if app.comingSoon}
-							<span class="coming-soon-label">
-								{currentLocale === 'en' ? 'Coming Soon' : 'Demnächst'}
-							</span>
-						{:else}
-							<span class="open-label" style="color: {app.color};">
-								{currentLocale === 'en' ? 'Open' : 'Öffnen'} →
-							</span>
-						{/if}
-					</div>
-				</button>
-			{/each}
-		</div>
-	</section>
-
-	<!-- Legend -->
-	<div class="legend">
-		<span class="legend-title">{currentLocale === 'en' ? 'Status' : 'Status'}:</span>
-		{#each Object.entries(statusLabels) as [status, label]}
-			<span class="legend-item">
-				<span class="legend-dot" style="background: {getStatusColor(status as ManaApp['status'])};"
-				></span>
-				{label}
-			</span>
+	<!-- App carousel -->
+	<div class="fokus-track" style="--sheet-width: {sheetWidthVar}">
+		{#each expandedApps as app, idx (app.appId)}
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<div
+				class="page-drag-wrapper"
+				class:dragging={dragAppId === app.appId}
+				draggable={!editMode}
+				ondragstart={(e) => handleDragStart(e, app.appId)}
+				ondragover={handleDragOver}
+				ondrop={(e) => handleDrop(e, app.appId)}
+				ondragend={handleDragEnd}
+			>
+				<AppPage
+					appId={app.appId}
+					pageWidth={sheetWidthValue}
+					maximized={app.maximized}
+					{editMode}
+					isFirst={idx === 0}
+					isLast={idx === expandedApps.length - 1}
+					onClose={() => handleRemoveApp(app.appId)}
+					onMinimize={() => handleMinimizeApp(app.appId)}
+					onMaximize={() => handleMaximizeApp(app.appId)}
+					onMoveLeft={editMode ? () => handleMoveLeft(app.appId) : undefined}
+					onMoveRight={editMode ? () => handleMoveRight(app.appId) : undefined}
+				/>
+			</div>
 		{/each}
+
+		<!-- Picker / add button -->
+		{#if expandedApps.length === 0}
+			<div class="empty-wrapper">
+				{#if showPicker}
+					<AppPagePicker
+						onSelect={handleAddApp}
+						onClose={() => (showPicker = false)}
+						activeAppIds={openApps.map((a) => a.appId)}
+					/>
+				{:else}
+					<button class="add-card alone" onclick={() => (showPicker = true)}>
+						<Plus size={24} />
+						<span class="add-label">App hinzufügen</span>
+					</button>
+				{/if}
+			</div>
+		{:else if showPicker}
+			<div bind:this={pickerEl}>
+				<AppPagePicker
+					onSelect={handleAddApp}
+					onClose={() => (showPicker = false)}
+					activeAppIds={openApps.map((a) => a.appId)}
+				/>
+			</div>
+		{:else}
+			<button class="add-card" onclick={() => (showPicker = true)} title="App hinzufügen">
+				<Plus size={18} />
+			</button>
+		{/if}
 	</div>
+
+	<!-- Minimized tabs -->
+	{#if minimizedApps.length > 0}
+		<div class="minimized-tabs">
+			{#each minimizedApps as app (app.appId)}
+				<div class="minimized-tab">
+					<span class="tab-dot" style="background-color: {app.color}"></span>
+					<button class="tab-title" onclick={() => handleRestoreApp(app.appId)}>
+						{app.name}
+					</button>
+					<button
+						class="tab-maximize"
+						onclick={() => handleMaximizeApp(app.appId)}
+						title="Maximieren"
+					>
+						<ArrowsOut size={12} />
+					</button>
+					<button class="tab-close" onclick={() => handleRemoveApp(app.appId)} title="Schließen">
+						<X size={12} />
+					</button>
+				</div>
+			{/each}
+			<button class="tab-add" onclick={() => (showPicker = true)} title="App hinzufügen">
+				<Plus size={14} />
+			</button>
+		</div>
+	{/if}
+
+	<!-- Edit FAB -->
+	<button
+		class="edit-fab"
+		class:active={editMode}
+		onclick={() => {
+			editMode = !editMode;
+			if (!editMode) showPicker = false;
+		}}
+		title={editMode ? 'Bearbeitung beenden' : 'Workbench bearbeiten'}
+	>
+		{#if editMode}<X size={20} />{:else}<PencilSimple size={20} />{/if}
+	</button>
 </div>
 
 <style>
-	.home-page {
-		max-width: 100%;
-	}
-
-	/* Hero */
-	.hero {
+	.workbench {
+		min-height: calc(100vh - 140px);
 		display: flex;
 		flex-direction: column;
-		gap: 1.5rem;
-		margin-bottom: 2.5rem;
+		position: relative;
 	}
 
-	@media (min-width: 768px) {
-		.hero {
-			flex-direction: row;
-			align-items: center;
-			justify-content: space-between;
+	/* Edit toolbar */
+	.edit-toolbar {
+		display: flex;
+		justify-content: center;
+		padding: 0.75rem 1rem 0;
+		animation: fadeDown 0.2s ease-out;
+	}
+	@keyframes fadeDown {
+		from {
+			opacity: 0;
+			transform: translateY(-8px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
 		}
 	}
-
-	.hero-title {
-		font-size: 1.75rem;
-		font-weight: 700;
-		color: hsl(var(--foreground, 0 0% 9%));
-		margin: 0 0 0.25rem;
-	}
-
-	.hero-name {
-		background: linear-gradient(135deg, #6366f1, #8b5cf6);
-		-webkit-background-clip: text;
-		-webkit-text-fill-color: transparent;
-		background-clip: text;
-	}
-
-	.hero-subtitle {
-		font-size: 0.9375rem;
-		color: hsl(var(--muted-foreground, 0 0% 45%));
-		margin: 0;
-	}
-
-	.hero-stats {
+	.width-pills {
 		display: flex;
-		gap: 0.75rem;
-		flex-shrink: 0;
-	}
-
-	.stat-card {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
 		gap: 0.25rem;
-		padding: 0.75rem 1rem;
-		border-radius: 0.75rem;
-		border: 1px solid hsl(var(--border, 0 0% 90%));
-		background: hsl(var(--card, 0 0% 100%));
-		text-decoration: none;
-		color: hsl(var(--foreground, 0 0% 9%));
-		transition: all 0.15s ease;
-		min-width: 5rem;
-	}
-
-	.stat-card:hover {
-		border-color: hsl(var(--primary, 239 84% 67%));
-		transform: translateY(-2px);
-		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-	}
-
-	.stat-icon {
-		font-size: 1.25rem;
-	}
-
-	.stat-label {
-		font-size: 0.75rem;
-		font-weight: 500;
-		color: hsl(var(--muted-foreground, 0 0% 45%));
-	}
-
-	/* Sections */
-	.category {
-		margin-bottom: 2rem;
-	}
-
-	.section-title {
-		font-size: 0.8125rem;
-		font-weight: 600;
-		text-transform: uppercase;
-		letter-spacing: 0.04em;
-		color: hsl(var(--muted-foreground, 0 0% 45%));
-		margin: 0 0 0.625rem;
-	}
-
-	/* App Grid */
-	.app-grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-		gap: 0.75rem;
-	}
-
-	@media (min-width: 1024px) {
-		.app-grid {
-			grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-		}
-	}
-
-	/* App Card */
-	.app-card {
-		display: flex;
-		flex-direction: column;
-		align-items: flex-start;
-		padding: 1rem;
-		border-radius: 0.875rem;
-		border: 1px solid hsl(var(--border, 0 0% 90%));
-		background: hsl(var(--card, 0 0% 100%));
-		cursor: pointer;
-		transition: all 0.2s ease;
-		text-align: left;
-		width: 100%;
-	}
-
-	.app-card:hover {
-		transform: translateY(-3px);
-		box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.1);
-		border-color: color-mix(in srgb, var(--app-color) 40%, hsl(var(--border, 0 0% 90%)));
-	}
-
-	:global(.dark) .app-card:hover {
-		box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.3);
-	}
-
-	.app-card-top {
-		display: flex;
-		align-items: flex-start;
-		justify-content: space-between;
-		width: 100%;
-		margin-bottom: 0.75rem;
-	}
-
-	.app-icon-wrap {
-		width: 2.5rem;
-		height: 2.5rem;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.app-icon {
-		width: 100%;
-		height: 100%;
-		object-fit: contain;
-	}
-
-	.app-icon-fallback {
-		width: 2.5rem;
-		height: 2.5rem;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		font-size: 1.25rem;
-		font-weight: 700;
+		background: rgba(0, 0, 0, 0.04);
 		border-radius: 0.5rem;
+		padding: 0.125rem;
 	}
-
-	.status-badge {
-		display: inline-flex;
-		align-items: center;
-		gap: 0.25rem;
-		padding: 0.125rem 0.5rem;
-		border-radius: 1rem;
-		font-size: 0.6875rem;
-		font-weight: 500;
-		white-space: nowrap;
+	:global(.dark) .width-pills {
+		background: rgba(255, 255, 255, 0.06);
 	}
-
-	.status-dot {
-		width: 0.375rem;
-		height: 0.375rem;
-		border-radius: 50%;
-		flex-shrink: 0;
-	}
-
-	.app-name {
-		font-size: 0.9375rem;
+	.width-pill {
+		padding: 0.25rem 0.75rem;
+		border: none;
+		border-radius: 0.375rem;
+		background: transparent;
+		color: #6b7280;
+		font-size: 0.75rem;
 		font-weight: 600;
-		color: hsl(var(--foreground, 0 0% 9%));
-		margin: 0 0 0.25rem;
+		cursor: pointer;
+		transition: all 0.15s;
+	}
+	.width-pill:hover {
+		color: #374151;
+		background: rgba(0, 0, 0, 0.04);
+	}
+	.width-pill.active {
+		background: var(--color-primary, #8b5cf6);
+		color: white;
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+	}
+	:global(.dark) .width-pill {
+		color: #9ca3af;
+	}
+	:global(.dark) .width-pill:hover {
+		color: #e5e7eb;
+		background: rgba(255, 255, 255, 0.08);
+	}
+	:global(.dark) .width-pill.active {
+		background: var(--color-primary, #8b5cf6);
+		color: white;
 	}
 
-	.app-tagline {
-		font-size: 0.8125rem;
-		color: hsl(var(--muted-foreground, 0 0% 45%));
-		margin: 0;
-		line-height: 1.4;
+	/* Carousel */
+	.fokus-track {
+		display: flex;
+		gap: 1.5rem;
+		overflow-x: auto;
+		padding: 1rem calc(50% - var(--sheet-width) / 2);
+		scrollbar-width: none;
 		flex: 1;
 	}
-
-	.app-card-footer {
-		margin-top: 0.75rem;
+	.fokus-track::-webkit-scrollbar {
+		display: none;
 	}
 
-	.open-label {
-		font-size: 0.8125rem;
-		font-weight: 600;
+	.page-drag-wrapper {
+		flex: 0 0 auto;
 		transition: opacity 0.15s;
 	}
-
-	.app-card:hover .open-label {
-		opacity: 0.8;
+	.page-drag-wrapper.dragging {
+		opacity: 0.4;
 	}
 
-	.coming-soon-label {
-		font-size: 0.75rem;
-		font-weight: 500;
-		color: hsl(var(--muted-foreground, 0 0% 45%));
-		padding: 0.125rem 0.5rem;
-		border-radius: 0.25rem;
-		background: hsl(var(--muted, 0 0% 96%));
+	/* Add button */
+	.add-card {
+		flex: 0 0 auto;
+		width: 48px;
+		align-self: stretch;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: 0.75rem;
+		border: 2px dashed rgba(0, 0, 0, 0.08);
+		border-radius: 0.375rem;
+		background: transparent;
+		color: #9ca3af;
+		cursor: pointer;
+		transition: all 0.2s;
 	}
-
-	/* Legend */
-	.legend {
+	.empty-wrapper {
+		flex: 0 0 auto;
+		width: var(--sheet-width, min(480px, 85vw));
 		display: flex;
 		align-items: center;
-		gap: 1rem;
-		padding: 1rem 0;
-		border-top: 1px solid hsl(var(--border, 0 0% 90%));
-		margin-top: 1rem;
-		flex-wrap: wrap;
+		justify-content: center;
+		min-height: 60vh;
+	}
+	.add-card.alone {
+		width: 100%;
+		min-height: 60vh;
+		border-color: rgba(0, 0, 0, 0.12);
+	}
+	.add-card:hover {
+		border-color: var(--color-primary, #8b5cf6);
+		color: var(--color-primary, #8b5cf6);
+		background: color-mix(in srgb, var(--color-primary, #8b5cf6) 4%, transparent);
+	}
+	:global(.dark) .add-card {
+		border-color: rgba(255, 255, 255, 0.06);
+		color: #4b5563;
+	}
+	:global(.dark) .add-card.alone {
+		border-color: rgba(255, 255, 255, 0.1);
+		color: #6b7280;
+	}
+	:global(.dark) .add-card:hover {
+		border-color: var(--color-primary, #8b5cf6);
+		color: var(--color-primary, #8b5cf6);
+		background: color-mix(in srgb, var(--color-primary, #8b5cf6) 8%, transparent);
+	}
+	.add-label {
+		font-size: 0.875rem;
+		font-weight: 500;
 	}
 
-	.legend-title {
-		font-size: 0.75rem;
-		font-weight: 600;
-		color: hsl(var(--muted-foreground, 0 0% 45%));
+	/* Minimized tabs */
+	.minimized-tabs {
+		position: fixed;
+		bottom: 4.5rem;
+		left: 50%;
+		transform: translateX(-50%);
+		z-index: 45;
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+		padding: 0.375rem 0.5rem;
+		border-radius: 0.75rem;
+		background: #fffef5;
+		border: 1px solid rgba(0, 0, 0, 0.08);
+		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+		animation: slideUp 0.25s ease-out;
 	}
-
-	.legend-item {
-		display: inline-flex;
+	:global(.dark) .minimized-tabs {
+		background: #252220;
+		border-color: rgba(255, 255, 255, 0.08);
+		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+	}
+	@keyframes slideUp {
+		from {
+			opacity: 0;
+			transform: translateX(-50%) translateY(12px);
+		}
+		to {
+			opacity: 1;
+			transform: translateX(-50%) translateY(0);
+		}
+	}
+	.minimized-tab {
+		display: flex;
 		align-items: center;
 		gap: 0.375rem;
-		font-size: 0.75rem;
-		color: hsl(var(--muted-foreground, 0 0% 45%));
+		padding: 0.25rem 0.5rem;
+		border-radius: 0.375rem;
+		transition: background 0.15s;
 	}
-
-	.legend-dot {
-		width: 0.5rem;
-		height: 0.5rem;
-		border-radius: 50%;
+	.minimized-tab:hover {
+		background: rgba(0, 0, 0, 0.04);
+	}
+	:global(.dark) .minimized-tab:hover {
+		background: rgba(255, 255, 255, 0.06);
+	}
+	.tab-dot {
+		width: 8px;
+		height: 8px;
+		border-radius: 9999px;
 		flex-shrink: 0;
 	}
+	.tab-title {
+		border: none;
+		background: none;
+		color: #374151;
+		font-size: 0.8125rem;
+		font-weight: 500;
+		cursor: pointer;
+		max-width: 120px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		padding: 0;
+	}
+	.tab-title:hover {
+		color: var(--color-primary, #8b5cf6);
+	}
+	:global(.dark) .tab-title {
+		color: #e5e7eb;
+	}
+	:global(.dark) .tab-title:hover {
+		color: var(--color-primary, #8b5cf6);
+	}
+	.tab-maximize,
+	.tab-close {
+		border: none;
+		background: none;
+		color: #9ca3af;
+		cursor: pointer;
+		padding: 0.125rem;
+		border-radius: 0.25rem;
+		display: flex;
+		align-items: center;
+		opacity: 0;
+		transition: all 0.15s;
+	}
+	.minimized-tab:hover .tab-maximize,
+	.minimized-tab:hover .tab-close {
+		opacity: 1;
+	}
+	.tab-maximize:hover {
+		color: var(--color-primary, #8b5cf6);
+		background: rgba(139, 92, 246, 0.08);
+	}
+	.tab-close:hover {
+		color: #ef4444;
+		background: rgba(239, 68, 68, 0.08);
+	}
+	.tab-add {
+		border: none;
+		background: none;
+		color: #9ca3af;
+		cursor: pointer;
+		padding: 0.25rem;
+		border-radius: 0.25rem;
+		display: flex;
+		align-items: center;
+		transition: all 0.15s;
+		margin-left: 0.125rem;
+	}
+	.tab-add:hover {
+		color: var(--color-primary, #8b5cf6);
+		background: rgba(139, 92, 246, 0.08);
+	}
+
+	/* Edit FAB */
+	.edit-fab {
+		position: fixed;
+		bottom: 5.5rem;
+		right: 1.25rem;
+		width: 44px;
+		height: 44px;
+		border-radius: 9999px;
+		border: none;
+		background: #fffef5;
+		color: #6b7280;
+		box-shadow:
+			0 2px 8px rgba(0, 0, 0, 0.12),
+			0 0 0 1px rgba(0, 0, 0, 0.06);
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		transition: all 0.2s;
+		z-index: 40;
+	}
+	.edit-fab:hover {
+		color: var(--color-primary, #8b5cf6);
+		box-shadow:
+			0 4px 12px rgba(0, 0, 0, 0.15),
+			0 0 0 1px rgba(0, 0, 0, 0.08);
+		transform: scale(1.05);
+	}
+	.edit-fab.active {
+		background: var(--color-primary, #8b5cf6);
+		color: white;
+		box-shadow:
+			0 4px 12px rgba(139, 92, 246, 0.3),
+			0 0 0 1px rgba(139, 92, 246, 0.5);
+	}
+	.edit-fab.active:hover {
+		background: color-mix(in srgb, var(--color-primary, #8b5cf6) 85%, black);
+		color: white;
+	}
+	:global(.dark) .edit-fab {
+		background: #252220;
+		color: #9ca3af;
+		box-shadow:
+			0 2px 8px rgba(0, 0, 0, 0.3),
+			0 0 0 1px rgba(255, 255, 255, 0.08);
+	}
+	:global(.dark) .edit-fab:hover {
+		color: var(--color-primary, #8b5cf6);
+	}
+	:global(.dark) .edit-fab.active {
+		background: var(--color-primary, #8b5cf6);
+		color: white;
+	}
 </style>