diff --git a/apps/calendar/apps/web/src/lib/components/calendar/CalendarToolbar.svelte b/apps/calendar/apps/web/src/lib/components/calendar/CalendarToolbar.svelte
new file mode 100644
index 000000000..658bfd49f
--- /dev/null
+++ b/apps/calendar/apps/web/src/lib/components/calendar/CalendarToolbar.svelte
@@ -0,0 +1,125 @@
+<script lang="ts">
+	import { viewStore } from '$lib/stores/view.svelte';
+	import { settingsStore } from '$lib/stores/settings.svelte';
+	import type { CalendarViewType } from '@calendar/shared';
+	import {
+		PillToolbar,
+		PillToolbarButton,
+		PillToolbarDivider,
+		PillTimeRangeSelector,
+		PillViewSwitcher,
+	} from '@manacore/shared-ui';
+
+	// View type labels
+	const viewLabels: Record<CalendarViewType, string> = {
+		day: 'Tag',
+		'5day': '5 Tage',
+		week: 'Woche',
+		'10day': '10 Tage',
+		'14day': '14 Tage',
+		month: 'Monat',
+		year: 'Jahr',
+		agenda: 'Agenda',
+	};
+
+	// Views to show in selector
+	const visibleViews: CalendarViewType[] = [
+		'day',
+		'5day',
+		'week',
+		'10day',
+		'14day',
+		'month',
+		'year',
+	];
+
+	// Convert to ViewOptions for PillViewSwitcher
+	const viewOptions = visibleViews.map((type) => ({
+		id: type,
+		label: viewLabels[type],
+		title: viewLabels[type],
+	}));
+
+	// Hours change handlers
+	function handleStartHourChange(hour: number) {
+		settingsStore.set('dayStartHour', hour);
+	}
+
+	function handleEndHourChange(hour: number) {
+		settingsStore.set('dayEndHour', hour);
+	}
+
+	function handleViewChange(type: string) {
+		viewStore.setViewType(type as CalendarViewType);
+	}
+</script>
+
+<PillToolbar position="bottom" bottomOffset="70px">
+	<!-- Today button -->
+	<PillToolbarButton onclick={() => viewStore.goToToday()} title="Zum heutigen Tag springen">
+		Heute
+	</PillToolbarButton>
+
+	<PillToolbarDivider />
+
+	<!-- Navigation -->
+	<PillToolbarButton onclick={() => viewStore.goToPrevious()} title="Zurück" iconOnly>
+		<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+		</svg>
+	</PillToolbarButton>
+	<PillToolbarButton onclick={() => viewStore.goToNext()} title="Weiter" iconOnly>
+		<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+		</svg>
+	</PillToolbarButton>
+
+	<PillToolbarDivider />
+
+	<!-- Weekdays filter -->
+	<PillToolbarButton
+		onclick={() => settingsStore.set('showOnlyWeekdays', !settingsStore.showOnlyWeekdays)}
+		active={settingsStore.showOnlyWeekdays}
+		title="Nur Wochentage anzeigen (Mo-Fr)"
+	>
+		Mo-Fr
+	</PillToolbarButton>
+
+	<!-- Hours filter -->
+	<PillToolbarButton
+		onclick={() => settingsStore.set('filterHoursEnabled', !settingsStore.filterHoursEnabled)}
+		active={settingsStore.filterHoursEnabled}
+		title="Stundenfilter ein/aus"
+		iconOnly
+	>
+		<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+			/>
+		</svg>
+	</PillToolbarButton>
+
+	<!-- Time range selector -->
+	<PillTimeRangeSelector
+		startHour={settingsStore.dayStartHour}
+		endHour={settingsStore.dayEndHour}
+		onStartHourChange={handleStartHourChange}
+		onEndHourChange={handleEndHourChange}
+		direction="up"
+		embedded={true}
+	/>
+
+	<PillToolbarDivider />
+
+	<!-- View selector -->
+	<PillViewSwitcher
+		options={viewOptions}
+		value={viewStore.viewType}
+		onChange={handleViewChange}
+		primaryColor="#3b82f6"
+		embedded={true}
+	/>
+</PillToolbar>
diff --git a/apps/calendar/apps/web/src/lib/components/calendar/DateStrip.svelte b/apps/calendar/apps/web/src/lib/components/calendar/DateStrip.svelte
new file mode 100644
index 000000000..f357b7a8d
--- /dev/null
+++ b/apps/calendar/apps/web/src/lib/components/calendar/DateStrip.svelte
@@ -0,0 +1,438 @@
+<script lang="ts">
+	import { viewStore } from '$lib/stores/view.svelte';
+	import {
+		format,
+		isToday,
+		isSameDay,
+		addDays,
+		subDays,
+		startOfDay,
+		isWithinInterval,
+	} from 'date-fns';
+	import { de } from 'date-fns/locale';
+	import { onMount, tick } from 'svelte';
+
+	// Reactive view range - needed to trigger re-renders
+	let viewRange = $derived(viewStore.viewRange);
+	let currentDate = $derived(viewStore.currentDate);
+
+	// Check if a day is within the current view range
+	function isInViewRange(day: Date): boolean {
+		return isWithinInterval(day, { start: viewRange.start, end: viewRange.end });
+	}
+
+	// Check if day is the first in the view range
+	function isFirstInRange(day: Date): boolean {
+		return isSameDay(day, viewRange.start);
+	}
+
+	// Check if day is the last in the view range
+	function isLastInRange(day: Date): boolean {
+		return isSameDay(day, viewRange.end);
+	}
+
+	// How many days to load in each direction
+	const DAYS_BUFFER = 60;
+	const LOAD_THRESHOLD = 20; // Load more when within this many days of edge
+
+	// Generate initial days centered around current date
+	let startDate = $state(subDays(startOfDay(new Date()), DAYS_BUFFER));
+	let endDate = $state(addDays(startOfDay(new Date()), DAYS_BUFFER));
+
+	// Track if today is visible in the scroll view
+	let isTodayVisible = $state(true);
+
+	// Generate array of days
+	let days = $derived.by(() => {
+		const result: Date[] = [];
+		let current = startDate;
+		while (current <= endDate) {
+			result.push(current);
+			current = addDays(current, 1);
+		}
+		return result;
+	});
+
+	// Scroll container ref
+	let scrollContainer: HTMLDivElement;
+	let isLoadingMore = false;
+
+	// Scroll to selected date when it changes
+	$effect(() => {
+		if (scrollContainer && currentDate) {
+			scrollToDate(currentDate);
+		}
+	});
+
+	async function scrollToDate(date: Date) {
+		await tick();
+
+		// First ensure the date is in our range
+		const targetDate = startOfDay(date);
+		if (targetDate < startDate) {
+			startDate = subDays(targetDate, DAYS_BUFFER);
+			await tick();
+		} else if (targetDate > endDate) {
+			endDate = addDays(targetDate, DAYS_BUFFER);
+			await tick();
+		}
+
+		const dayElement = scrollContainer?.querySelector(
+			`[data-date="${format(date, 'yyyy-MM-dd')}"]`
+		);
+		if (dayElement) {
+			dayElement.scrollIntoView({
+				behavior: 'smooth',
+				inline: 'center',
+				block: 'nearest',
+			});
+		}
+	}
+
+	function handleDayClick(day: Date) {
+		viewStore.setDate(day);
+	}
+
+	function goToToday() {
+		const today = new Date();
+		viewStore.setDate(today);
+	}
+
+	async function loadMoreDays(direction: 'past' | 'future') {
+		if (isLoadingMore) return;
+		isLoadingMore = true;
+
+		if (direction === 'past') {
+			// Save scroll position relative to a reference element
+			const firstVisibleDay = scrollContainer?.querySelector('.day-item');
+			const scrollLeftBefore = scrollContainer?.scrollLeft || 0;
+
+			startDate = subDays(startDate, DAYS_BUFFER);
+			await tick();
+
+			// Restore scroll position
+			if (firstVisibleDay && scrollContainer) {
+				const newScrollLeft = scrollLeftBefore + DAYS_BUFFER * 54; // 54px is approximate day width (52px + gap)
+				scrollContainer.scrollLeft = newScrollLeft;
+			}
+		} else {
+			endDate = addDays(endDate, DAYS_BUFFER);
+		}
+
+		isLoadingMore = false;
+	}
+
+	function checkTodayVisibility() {
+		if (!scrollContainer) return;
+
+		const todayElement = scrollContainer.querySelector('.day-item.today');
+		if (!todayElement) {
+			isTodayVisible = false;
+			return;
+		}
+
+		const containerRect = scrollContainer.getBoundingClientRect();
+		const todayRect = todayElement.getBoundingClientRect();
+
+		// Check if today element is within the visible scroll area
+		isTodayVisible =
+			todayRect.left >= containerRect.left - 20 && todayRect.right <= containerRect.right + 20;
+	}
+
+	function handleScroll() {
+		if (!scrollContainer || isLoadingMore) return;
+
+		// Check if today is visible
+		checkTodayVisibility();
+
+		const { scrollLeft, scrollWidth, clientWidth } = scrollContainer;
+		const scrollRight = scrollWidth - scrollLeft - clientWidth;
+
+		// Calculate approximate day index from scroll position
+		const dayWidth = 54; // approximate (52px + gap)
+		const visibleDayIndex = Math.floor(scrollLeft / dayWidth);
+		const totalDays = days.length;
+
+		// Load more past days
+		if (visibleDayIndex < LOAD_THRESHOLD) {
+			loadMoreDays('past');
+		}
+
+		// Load more future days
+		if (totalDays - visibleDayIndex - Math.floor(clientWidth / dayWidth) < LOAD_THRESHOLD) {
+			loadMoreDays('future');
+		}
+	}
+
+	// Get month label for a date (shown at month boundaries)
+	function getMonthLabel(day: Date, index: number): string | null {
+		// Show month label on first day of month or first day in view
+		if (day.getDate() === 1 || index === 0) {
+			if (day.getMonth() === 0 && day.getDate() === 1) {
+				// Show year for January 1st
+				return format(day, 'MMM yyyy', { locale: de });
+			}
+			return format(day, 'MMM', { locale: de });
+		}
+		return null;
+	}
+
+	onMount(() => {
+		// Initial scroll to current date
+		scrollToDate(viewStore.currentDate);
+	});
+</script>
+
+<div class="date-strip-wrapper">
+	<!-- Floating Today button (only visible when today is scrolled out of view) -->
+	{#if !isTodayVisible}
+		<button class="today-btn-floating" onclick={goToToday} title="Zum heutigen Tag"> Heute </button>
+	{/if}
+
+	<div class="date-strip-container">
+		<!-- Scrollable days container -->
+		<div class="days-scroll" bind:this={scrollContainer} onscroll={handleScroll}>
+			{#each days as day, index}
+				{@const monthLabel = getMonthLabel(day, index)}
+				{@const dayIsToday = isToday(day)}
+				{@const dayIsSelected = isSameDay(day, currentDate)}
+				{@const dayIsWeekend = day.getDay() === 0 || day.getDay() === 6}
+				{@const dayIsFirstOfMonth = day.getDate() === 1}
+				{@const dayInRange = isWithinInterval(day, { start: viewRange.start, end: viewRange.end })}
+				{@const dayIsRangeStart = isSameDay(day, viewRange.start)}
+				{@const dayIsRangeEnd = isSameDay(day, viewRange.end)}
+				{#if monthLabel}
+					<div class="month-marker">
+						<span class="month-label">{monthLabel}</span>
+					</div>
+				{/if}
+				<button
+					class="day-item"
+					class:today={dayIsToday}
+					class:selected={dayIsSelected}
+					class:weekend={dayIsWeekend}
+					class:first-of-month={dayIsFirstOfMonth}
+					class:in-range={dayInRange}
+					class:range-start={dayIsRangeStart}
+					class:range-end={dayIsRangeEnd}
+					data-date={format(day, 'yyyy-MM-dd')}
+					onclick={() => handleDayClick(day)}
+				>
+					<span class="day-weekday">{format(day, 'EE', { locale: de })}</span>
+					<span class="day-number">{format(day, 'd')}</span>
+				</button>
+			{/each}
+		</div>
+	</div>
+</div>
+
+<style>
+	.date-strip-wrapper {
+		position: fixed;
+		bottom: calc(130px + env(safe-area-inset-bottom, 0px));
+		left: 0;
+		right: 0;
+		z-index: 998;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		pointer-events: none;
+	}
+
+	.today-btn-floating {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0.5rem 1rem;
+		background: var(--color-primary);
+		border: none;
+		border-radius: 9999px;
+		cursor: pointer;
+		color: var(--color-primary-foreground);
+		font-size: 0.8125rem;
+		font-weight: 600;
+		white-space: nowrap;
+		transition: all 0.2s ease;
+		pointer-events: auto;
+		margin-bottom: 0.5rem;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+		animation: fade-in 0.2s ease;
+	}
+
+	.today-btn-floating:hover {
+		background: color-mix(in srgb, var(--color-primary) 90%, transparent);
+		transform: scale(1.05);
+	}
+
+	@keyframes fade-in {
+		from {
+			opacity: 0;
+			transform: translateY(10px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	.date-strip-container {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.5rem 1rem;
+		background: transparent;
+		width: 100%;
+		pointer-events: auto;
+	}
+
+	.days-scroll {
+		display: flex;
+		align-items: center;
+		gap: 0.125rem;
+		overflow-x: auto;
+		scrollbar-width: none;
+		-ms-overflow-style: none;
+		scroll-behavior: auto;
+		flex: 1;
+		padding: 0.25rem 0;
+	}
+
+	.days-scroll::-webkit-scrollbar {
+		display: none;
+	}
+
+	.month-marker {
+		display: flex;
+		align-items: center;
+		padding: 0 0.5rem;
+		flex-shrink: 0;
+	}
+
+	.month-label {
+		font-size: 0.6875rem;
+		font-weight: 700;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		color: var(--color-primary);
+		white-space: nowrap;
+		padding: 0.25rem 0.5rem;
+		background: color-mix(in srgb, var(--color-primary) 10%, transparent);
+		border-radius: 4px;
+	}
+
+	.day-item {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		min-width: 52px;
+		height: 58px;
+		padding: 0.375rem;
+		background: transparent;
+		border: none;
+		border-radius: 10px;
+		cursor: pointer;
+		color: var(--color-foreground);
+		transition: all 0.15s ease;
+		flex-shrink: 0;
+	}
+
+	.day-item:hover {
+		background: var(--color-muted);
+		opacity: 0.7;
+	}
+
+	.day-item.weekend {
+		color: var(--color-muted-foreground);
+	}
+
+	/* Today - always highlighted with primary color */
+	.day-item.today {
+		background: var(--color-primary) !important;
+		color: var(--color-primary-foreground) !important;
+		border-radius: 10px !important;
+		font-weight: 700;
+	}
+
+	.day-item.today:hover {
+		opacity: 0.9;
+	}
+
+	.day-item.selected:not(.today) {
+		background: var(--color-muted);
+		color: var(--color-primary);
+		font-weight: 600;
+	}
+
+	/* View range highlighting */
+	.day-item.in-range:not(.today) {
+		background: var(--color-muted);
+		border-radius: 0;
+	}
+
+	.day-item.in-range.range-start:not(.today) {
+		border-radius: 10px 0 0 10px;
+	}
+
+	.day-item.in-range.range-end:not(.today) {
+		border-radius: 0 10px 10px 0;
+	}
+
+	.day-item.in-range.range-start.range-end:not(.today) {
+		border-radius: 10px;
+	}
+
+	.day-item.in-range:not(.today):not(.selected):hover {
+		background: var(--color-border);
+	}
+
+	.day-item.first-of-month:not(.today):not(.selected):not(.in-range) {
+		border-left: 2px solid var(--color-border);
+		border-radius: 0 8px 8px 0;
+		margin-left: 0.25rem;
+	}
+
+	.day-weekday {
+		font-size: 0.75rem;
+		font-weight: 500;
+		text-transform: uppercase;
+		letter-spacing: 0.025em;
+		opacity: 0.7;
+	}
+
+	.day-number {
+		font-size: 1.125rem;
+		font-weight: 600;
+		line-height: 1;
+	}
+
+	/* Responsive */
+	@media (max-width: 640px) {
+		.date-strip-container {
+			padding: 0.5rem 0.5rem;
+		}
+
+		.today-btn-floating {
+			padding: 0.375rem 0.75rem;
+			font-size: 0.75rem;
+		}
+
+		.day-item {
+			min-width: 44px;
+			height: 52px;
+		}
+
+		.day-number {
+			font-size: 1rem;
+		}
+
+		.day-weekday {
+			font-size: 0.6875rem;
+		}
+
+		.month-label {
+			font-size: 0.625rem;
+			padding: 0.125rem 0.375rem;
+		}
+	}
+</style>
diff --git a/apps/calendar/apps/web/src/routes/(app)/+layout.svelte b/apps/calendar/apps/web/src/routes/(app)/+layout.svelte
index d321c5b31..9f4f39923 100644
--- a/apps/calendar/apps/web/src/routes/(app)/+layout.svelte
+++ b/apps/calendar/apps/web/src/routes/(app)/+layout.svelte
@@ -3,11 +3,11 @@
 	import { page } from '$app/stores';
 	import { onMount } from 'svelte';
 	import { locale } from 'svelte-i18n';
-	import { PillNavigation, CommandBar } from '@manacore/shared-ui';
+	import { PillNavigation, QuickInputBar } from '@manacore/shared-ui';
 	import type {
 		PillNavItem,
 		PillDropdownItem,
-		CommandBarItem,
+		QuickInputItem,
 		QuickAction,
 		CreatePreview,
 	} from '@manacore/shared-ui';
@@ -41,31 +41,28 @@
 		resolveEventIds,
 		formatParsedEventPreview,
 	} from '$lib/utils/event-parser';
+	import CalendarToolbar from '$lib/components/calendar/CalendarToolbar.svelte';
+	import DateStrip from '$lib/components/calendar/DateStrip.svelte';
 
 	// App switcher items
 	const appItems = getPillAppItems('calendar');
 
 	let { children } = $props();
 
-	// CommandBar state
-	let commandBarOpen = $state(false);
-
-	// CommandBar quick actions (no search for calendar yet)
-	const commandBarQuickActions: QuickAction[] = [
-		{ id: 'new', label: 'Neuen Termin erstellen', icon: 'plus', href: '/event/new', shortcut: 'N' },
+	// QuickInputBar quick actions
+	const quickActions: QuickAction[] = [
 		{
 			id: 'today',
-			label: 'Zu Heute springen',
+			label: 'Heute',
 			icon: 'calendar',
 			onclick: () => viewStore.goToToday(),
 		},
-		{ id: 'agenda', label: 'Agenda anzeigen', icon: 'list', href: '/agenda' },
-		{ id: 'tasks', label: 'Aufgaben anzeigen', icon: 'check-square', href: '/tasks' },
+		{ id: 'agenda', label: 'Agenda', icon: 'list', href: '/agenda' },
 		{ id: 'settings', label: 'Einstellungen', icon: 'settings', href: '/settings' },
 	];
 
-	// CommandBar search - search events
-	async function handleCommandBarSearch(query: string): Promise<CommandBarItem[]> {
+	// QuickInputBar search - search events
+	async function handleSearch(query: string): Promise<QuickInputItem[]> {
 		if (!query.trim()) return [];
 
 		const result = await searchEvents(query);
@@ -78,24 +75,24 @@
 		}));
 	}
 
-	function handleCommandBarSelect(item: CommandBarItem) {
+	function handleSelect(item: QuickInputItem) {
 		goto(`/event/${item.id}`);
 	}
 
-	// CommandBar Quick-Create handlers
-	function handleCommandBarParseCreate(query: string): CreatePreview | null {
+	// QuickInputBar Quick-Create handlers
+	function handleParseCreate(query: string): CreatePreview | null {
 		if (!query.trim()) return null;
 
 		const parsed = parseEventInput(query);
 		if (!parsed.title) return null;
 
 		return {
-			title: parsed.title,
+			title: `"${parsed.title}" erstellen`,
 			subtitle: formatParsedEventPreview(parsed),
 		};
 	}
 
-	async function handleCommandBarCreate(query: string): Promise<void> {
+	async function handleCreate(query: string): Promise<void> {
 		const parsed = parseEventInput(query);
 		if (!parsed.title) return;
 
@@ -137,6 +134,9 @@
 	// Use theme store's isDark directly
 	let isDark = $derived(theme.isDark);
 
+	// Show toolbar only on calendar main page
+	let showCalendarToolbar = $derived($page.url.pathname === '/');
+
 	// Get pinned themes from user settings (extended themes only)
 	let pinnedThemes = $derived<ThemeVariant[]>(
 		(userSettings.theme?.pinnedThemes || []).filter((t): t is ThemeVariant =>
@@ -204,13 +204,6 @@
 	function handleKeydown(event: KeyboardEvent) {
 		const target = event.target as HTMLElement;
 
-		// Cmd/Ctrl+K to open command bar (works even in inputs)
-		if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
-			event.preventDefault();
-			commandBarOpen = true;
-			return;
-		}
-
 		if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
 			return;
 		}
@@ -307,7 +300,7 @@
 		onModeChange={handleModeChange}
 		{isCollapsed}
 		onCollapsedChange={handleCollapsedChange}
-		desktopPosition={userSettings.nav.desktopPosition}
+		desktopPosition="bottom"
 		showThemeToggle={true}
 		showThemeVariants={true}
 		{themeVariantItems}
@@ -330,10 +323,21 @@
 		allAppsHref="/apps"
 	/>
 
+	<!-- Date strip (only on main calendar page) -->
+	{#if showCalendarToolbar}
+		<DateStrip />
+	{/if}
+
+	<!-- Calendar toolbar (only on main calendar page) -->
+	{#if showCalendarToolbar}
+		<CalendarToolbar />
+	{/if}
+
 	<main
 		class="main-content bg-background"
 		class:sidebar-mode={isSidebarMode && !isCollapsed}
 		class:floating-mode={!isSidebarMode && !isCollapsed}
+		class:has-toolbar={showCalendarToolbar}
 	>
 		<div
 			class="content-wrapper"
@@ -343,20 +347,20 @@
 		</div>
 	</main>
 
-	<!-- Global Command Bar (Cmd/K) -->
-	<CommandBar
-		bind:open={commandBarOpen}
-		onClose={() => (commandBarOpen = false)}
-		onSearch={handleCommandBarSearch}
-		onSelect={handleCommandBarSelect}
-		quickActions={commandBarQuickActions}
-		placeholder="Termin suchen oder erstellen..."
+	<!-- Global Quick Input Bar -->
+	<QuickInputBar
+		onSearch={handleSearch}
+		onSelect={handleSelect}
+		{quickActions}
+		placeholder="Neuer Termin oder suchen..."
 		emptyText="Keine Termine gefunden"
 		searchingText="Suche..."
-		onCreate={handleCommandBarCreate}
-		onParseCreate={handleCommandBarParseCreate}
-		createText="Als Termin erstellen"
-		createShortcut="⌘↵"
+		onCreate={handleCreate}
+		onParseCreate={handleParseCreate}
+		createText="Erstellen"
+		appIcon="calendar"
+		primaryColor="#3b82f6"
+		autoFocus={false}
 	/>
 </div>
 
@@ -371,12 +375,37 @@
 		transition: all 300ms ease;
 		position: relative;
 		z-index: 0;
+		/* Space for QuickInputBar at bottom */
+		padding-bottom: calc(80px + env(safe-area-inset-bottom));
 	}
 
 	.main-content.floating-mode {
 		padding-top: 70px;
 	}
 
+	/* Extra padding when DateStrip + Toolbar are at bottom */
+	.main-content.floating-mode.has-toolbar {
+		padding-top: 0;
+		padding-bottom: calc(
+			280px + env(safe-area-inset-bottom)
+		); /* DateStrip + Toolbar + PillNav + QuickInputBar */
+	}
+
+	@media (max-width: 768px) {
+		/* On mobile, toolbars are at bottom, extra padding at bottom instead */
+		.main-content {
+			padding-bottom: calc(150px + env(safe-area-inset-bottom)); /* PillNav + QuickInputBar */
+		}
+		.main-content.has-toolbar {
+			padding-bottom: calc(
+				250px + env(safe-area-inset-bottom)
+			); /* DateStrip + Toolbar + BottomNav + QuickInputBar */
+		}
+		.main-content.floating-mode.has-toolbar {
+			padding-top: 70px;
+		}
+	}
+
 	.main-content.sidebar-mode {
 		padding-left: 180px;
 	}
diff --git a/apps/contacts/apps/web/src/lib/components/ContactsToolbar.svelte b/apps/contacts/apps/web/src/lib/components/ContactsToolbar.svelte
new file mode 100644
index 000000000..2e30f283e
--- /dev/null
+++ b/apps/contacts/apps/web/src/lib/components/ContactsToolbar.svelte
@@ -0,0 +1,274 @@
+<script lang="ts">
+	import { _ } from 'svelte-i18n';
+	import { goto } from '$app/navigation';
+	import { contactsStore } from '$lib/stores/contacts.svelte';
+	import { viewModeStore, type ViewMode } from '$lib/stores/view-mode.svelte';
+	import {
+		PillToolbar,
+		PillToolbarButton,
+		PillToolbarDivider,
+		PillViewSwitcher,
+	} from '@manacore/shared-ui';
+	import FilterBar, {
+		type ContactFilter,
+		type BirthdayFilter,
+	} from '$lib/components/FilterBar.svelte';
+	import type { Contact } from '$lib/api/contacts';
+
+	export type SortField = 'firstName' | 'lastName';
+
+	interface Props {
+		contacts: Contact[];
+		sortField: SortField;
+		onSortFieldChange: (field: SortField) => void;
+		contactFilter: ContactFilter;
+		onContactFilterChange: (filter: ContactFilter) => void;
+		birthdayFilter: BirthdayFilter;
+		onBirthdayFilterChange: (filter: BirthdayFilter) => void;
+		selectedTagId: string | null;
+		onTagChange: (tagId: string | null) => void;
+		selectedCompany: string | null;
+		onCompanyChange: (company: string | null) => void;
+		/** Selection mode state */
+		selectionMode: boolean;
+		/** Toggle selection mode callback */
+		onToggleSelectionMode: () => void;
+	}
+
+	let {
+		contacts,
+		sortField,
+		onSortFieldChange,
+		contactFilter,
+		onContactFilterChange,
+		birthdayFilter,
+		onBirthdayFilterChange,
+		selectedTagId,
+		onTagChange,
+		selectedCompany,
+		onCompanyChange,
+		selectionMode,
+		onToggleSelectionMode,
+	}: Props = $props();
+
+	// Count favorites for quick filter button
+	let favoritesCount = $derived(contactsStore.contacts.filter((c) => c.isFavorite).length);
+	let showFavorites = $derived(contactFilter === 'favorites');
+
+	// Sort options
+	const sortOptions = [
+		{ id: 'firstName', label: $_('sort.firstName'), title: $_('sort.firstName') },
+		{ id: 'lastName', label: $_('sort.lastName'), title: $_('sort.lastName') },
+	];
+
+	// View mode options
+	const viewOptions = [
+		{ id: 'list', label: '', title: $_('views.list'), icon: 'list' },
+		{ id: 'grid', label: '', title: $_('views.grid'), icon: 'grid' },
+		{ id: 'alphabet', label: '', title: $_('views.alphabet'), icon: 'alphabet' },
+	];
+
+	function toggleFavorites() {
+		if (contactFilter === 'favorites') {
+			onContactFilterChange('all');
+		} else {
+			onContactFilterChange('favorites');
+		}
+	}
+
+	function handleSortChange(value: string) {
+		onSortFieldChange(value as SortField);
+	}
+
+	function handleViewModeChange(value: string) {
+		viewModeStore.setMode(value as ViewMode);
+	}
+</script>
+
+<PillToolbar topOffset="70px">
+	<!-- New Contact Button -->
+	<PillToolbarButton onclick={() => goto('/contacts/new')} title={$_('contacts.new')}>
+		<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+		</svg>
+		<span class="btn-label">{$_('contacts.new')}</span>
+	</PillToolbarButton>
+
+	<PillToolbarDivider />
+
+	<!-- Selection Mode Toggle -->
+	<PillToolbarButton
+		onclick={onToggleSelectionMode}
+		active={selectionMode}
+		title={selectionMode ? 'Auswahl beenden' : 'Mehrere auswählen'}
+	>
+		<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"
+			/>
+		</svg>
+	</PillToolbarButton>
+
+	<PillToolbarDivider />
+
+	<!-- Favorites Toggle -->
+	<PillToolbarButton
+		onclick={toggleFavorites}
+		active={showFavorites}
+		title={$_('filters.contact.favorites')}
+	>
+		<svg fill={showFavorites ? 'currentColor' : 'none'} stroke="currentColor" viewBox="0 0 24 24">
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
+			/>
+		</svg>
+		{#if favoritesCount > 0}
+			<span class="count">{favoritesCount}</span>
+		{/if}
+	</PillToolbarButton>
+
+	<PillToolbarDivider />
+
+	<!-- Filter Dropdown -->
+	<FilterBar
+		{contacts}
+		{selectedTagId}
+		{onTagChange}
+		{contactFilter}
+		{onContactFilterChange}
+		{birthdayFilter}
+		{onBirthdayFilterChange}
+		{selectedCompany}
+		{onCompanyChange}
+		embedded={true}
+	/>
+
+	<PillToolbarDivider />
+
+	<!-- Sort Toggle -->
+	<PillViewSwitcher
+		options={sortOptions}
+		value={sortField}
+		onChange={handleSortChange}
+		primaryColor="#6366f1"
+		embedded={true}
+	/>
+
+	<PillToolbarDivider />
+
+	<!-- View Mode -->
+	<div class="view-mode-buttons">
+		<button
+			type="button"
+			class="view-btn"
+			class:active={viewModeStore.mode === 'list'}
+			onclick={() => viewModeStore.setMode('list')}
+			title={$_('views.list')}
+		>
+			<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M4 6h16M4 12h16M4 18h16"
+				/>
+			</svg>
+		</button>
+		<button
+			type="button"
+			class="view-btn"
+			class:active={viewModeStore.mode === 'grid'}
+			onclick={() => viewModeStore.setMode('grid')}
+			title={$_('views.grid')}
+		>
+			<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M4 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM14 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1V5zM4 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1v-4zM14 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z"
+				/>
+			</svg>
+		</button>
+		<button
+			type="button"
+			class="view-btn"
+			class:active={viewModeStore.mode === 'alphabet'}
+			onclick={() => viewModeStore.setMode('alphabet')}
+			title={$_('views.alphabet')}
+		>
+			<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12"
+				/>
+			</svg>
+		</button>
+	</div>
+</PillToolbar>
+
+<style>
+	.btn-label {
+		display: none;
+	}
+
+	@media (min-width: 640px) {
+		.btn-label {
+			display: inline;
+		}
+	}
+
+	.count {
+		font-size: 0.75rem;
+		font-weight: 600;
+	}
+
+	.view-mode-buttons {
+		display: flex;
+		align-items: center;
+		gap: 0.125rem;
+	}
+
+	.view-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0.5rem;
+		background: transparent;
+		border: none;
+		border-radius: 9999px;
+		cursor: pointer;
+		color: #374151;
+		transition: all 0.15s ease;
+	}
+
+	:global(.dark) .view-btn {
+		color: #f3f4f6;
+	}
+
+	.view-btn:hover {
+		background: rgba(0, 0, 0, 0.05);
+	}
+
+	:global(.dark) .view-btn:hover {
+		background: rgba(255, 255, 255, 0.1);
+	}
+
+	.view-btn.active {
+		background: color-mix(in srgb, #6366f1 15%, transparent 85%);
+		color: #6366f1;
+	}
+
+	.view-btn :global(svg) {
+		width: 1rem;
+		height: 1rem;
+	}
+</style>
diff --git a/apps/contacts/apps/web/src/routes/(app)/+layout.svelte b/apps/contacts/apps/web/src/routes/(app)/+layout.svelte
index 0a8871350..df28a0743 100644
--- a/apps/contacts/apps/web/src/routes/(app)/+layout.svelte
+++ b/apps/contacts/apps/web/src/routes/(app)/+layout.svelte
@@ -3,11 +3,11 @@
 	import { page } from '$app/stores';
 	import { onMount } from 'svelte';
 	import { locale } from 'svelte-i18n';
-	import { PillNavigation, CommandBar } from '@manacore/shared-ui';
+	import { PillNavigation, QuickInputBar } from '@manacore/shared-ui';
 	import type {
 		PillNavItem,
 		PillDropdownItem,
-		CommandBarItem,
+		QuickInputItem,
 		QuickAction,
 		CreatePreview,
 	} from '@manacore/shared-ui';
@@ -39,9 +39,6 @@
 		formatParsedContactPreview,
 	} from '$lib/utils/contact-parser';
 
-	// Search modal state
-	let searchModalOpen = $state(false);
-
 	// Tags state for Quick-Create
 	let availableTags = $state<{ id: string; name: string }[]>([]);
 
@@ -130,13 +127,6 @@
 	function handleKeydown(event: KeyboardEvent) {
 		const target = event.target as HTMLElement;
 
-		// Cmd/Ctrl+K to open search (works even in inputs)
-		if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
-			event.preventDefault();
-			searchModalOpen = true;
-			return;
-		}
-
 		if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
 			return;
 		}
@@ -188,8 +178,8 @@
 		goto('/', { replaceState: false });
 	}
 
-	// CommandBar search function
-	async function handleCommandBarSearch(query: string): Promise<CommandBarItem[]> {
+	// QuickInputBar search function
+	async function handleSearch(query: string): Promise<QuickInputItem[]> {
 		const response = await contactsApi.list({ search: query, limit: 10 });
 		return (response.contacts || []).map((contact: any) => ({
 			id: contact.id,
@@ -204,25 +194,25 @@
 		}));
 	}
 
-	// CommandBar item selection
-	function handleCommandBarSelect(item: CommandBarItem) {
+	// QuickInputBar item selection
+	function handleSelect(item: QuickInputItem) {
 		goto(`/contacts/${item.id}`);
 	}
 
-	// CommandBar Quick-Create handlers
-	function handleCommandBarParseCreate(query: string): CreatePreview | null {
+	// QuickInputBar Quick-Create handlers
+	function handleParseCreate(query: string): CreatePreview | null {
 		if (!query.trim()) return null;
 
 		const parsed = parseContactInput(query);
 		if (!parsed.displayName) return null;
 
 		return {
-			title: parsed.displayName,
+			title: `"${parsed.displayName}" erstellen`,
 			subtitle: formatParsedContactPreview(parsed),
 		};
 	}
 
-	async function handleCommandBarCreate(query: string): Promise<void> {
+	async function handleCreate(query: string): Promise<void> {
 		const parsed = parseContactInput(query);
 		if (!parsed.displayName) return;
 
@@ -250,18 +240,11 @@
 		}
 	}
 
-	// CommandBar quick actions
-	const commandBarQuickActions: QuickAction[] = [
-		{
-			id: 'new',
-			label: 'Neuen Kontakt erstellen',
-			icon: 'plus',
-			href: '/contacts/new',
-			shortcut: 'N',
-		},
-		{ id: 'favorites', label: 'Favoriten anzeigen', icon: 'heart', href: '/favorites' },
-		{ id: 'tags', label: 'Tags verwalten', icon: 'tag', href: '/tags' },
-		{ id: 'import', label: 'Kontakte importieren', icon: 'upload', href: '/data?tab=import' },
+	// QuickInputBar quick actions
+	const quickActions: QuickAction[] = [
+		{ id: 'favorites', label: 'Favoriten', icon: 'heart', href: '/favorites' },
+		{ id: 'tags', label: 'Tags', icon: 'tag', href: '/tags' },
+		{ id: 'settings', label: 'Einstellungen', icon: 'settings', href: '/settings' },
 	];
 
 	onMount(async () => {
@@ -360,20 +343,20 @@
 		<ContactDetailModal contactId={modalContactId} onClose={handleCloseContactModal} />
 	{/if}
 
-	<!-- Global Search Modal (Cmd/K) -->
-	<CommandBar
-		bind:open={searchModalOpen}
-		onClose={() => (searchModalOpen = false)}
-		onSearch={handleCommandBarSearch}
-		onSelect={handleCommandBarSelect}
-		quickActions={commandBarQuickActions}
-		placeholder="Kontakt suchen oder erstellen..."
+	<!-- Global Quick Input Bar -->
+	<QuickInputBar
+		onSearch={handleSearch}
+		onSelect={handleSelect}
+		{quickActions}
+		placeholder="Neuer Kontakt oder suchen..."
 		emptyText="Keine Kontakte gefunden"
 		searchingText="Suche..."
-		onCreate={handleCommandBarCreate}
-		onParseCreate={handleCommandBarParseCreate}
-		createText="Als Kontakt erstellen"
-		createShortcut="⌘↵"
+		onCreate={handleCreate}
+		onParseCreate={handleParseCreate}
+		createText="Erstellen"
+		appIcon="contacts"
+		primaryColor="#3b82f6"
+		autoFocus={false}
 	/>
 </div>
 
diff --git a/apps/todo/apps/web/src/lib/components/TodoToolbar.svelte b/apps/todo/apps/web/src/lib/components/TodoToolbar.svelte
new file mode 100644
index 000000000..01dce8b12
--- /dev/null
+++ b/apps/todo/apps/web/src/lib/components/TodoToolbar.svelte
@@ -0,0 +1,848 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import type { TaskPriority } from '@todo/shared';
+	import { PRIORITY_OPTIONS } from '@todo/shared';
+	import { tasksStore } from '$lib/stores/tasks.svelte';
+	import { projectsStore } from '$lib/stores/projects.svelte';
+	import { labelsStore } from '$lib/stores/labels.svelte';
+	import { viewStore, type SortBy } from '$lib/stores/view.svelte';
+	import { format, addDays } from 'date-fns';
+	import { de } from 'date-fns/locale';
+	import {
+		PillToolbar,
+		PillToolbarButton,
+		PillToolbarDivider,
+		PillViewSwitcher,
+	} from '@manacore/shared-ui';
+
+	interface Props {
+		/** Current sort field */
+		sortBy?: SortBy;
+		/** Sort change callback */
+		onSortChange?: (sortBy: SortBy) => void;
+		/** Show completed tasks toggle */
+		showCompleted?: boolean;
+		/** Toggle show completed callback */
+		onToggleShowCompleted?: () => void;
+	}
+
+	let {
+		sortBy = viewStore.sortBy,
+		onSortChange = (s: SortBy) => viewStore.setSort(s, viewStore.sortOrder),
+		showCompleted = viewStore.showCompleted,
+		onToggleShowCompleted = () => viewStore.toggleShowCompleted(),
+	}: Props = $props();
+
+	// Quick add task state
+	let inputValue = $state('');
+	let isCreating = $state(false);
+	let showQuickAddOptions = $state(false);
+	let selectedDate = $state<Date>(new Date());
+	let selectedPriority = $state<TaskPriority>('medium');
+	let selectedProjectId = $state<string | undefined>(undefined);
+
+	// Dropdown states
+	let showDatePicker = $state(false);
+	let showPriorityPicker = $state(false);
+	let showProjectPicker = $state(false);
+
+	// Filter dropdown states
+	let showFilterDropdown = $state(false);
+	let selectedPriorityFilters = $state<TaskPriority[]>([]);
+	let selectedProjectFilter = $state<string | null>(null);
+	let selectedLabelFilters = $state<string[]>([]);
+
+	// Quick date options
+	const dateOptions = [
+		{ label: 'Heute', date: new Date() },
+		{ label: 'Morgen', date: addDays(new Date(), 1) },
+		{ label: 'In 3 Tagen', date: addDays(new Date(), 3) },
+		{ label: 'Nächste Woche', date: addDays(new Date(), 7) },
+	];
+
+	const priorities: { value: TaskPriority; label: string; color: string }[] = [
+		{ value: 'urgent', label: 'Dringend', color: '#ef4444' },
+		{ value: 'high', label: 'Hoch', color: '#f97316' },
+		{ value: 'medium', label: 'Normal', color: '#eab308' },
+		{ value: 'low', label: 'Niedrig', color: '#3b82f6' },
+	];
+
+	// Sort options
+	const sortOptions = [
+		{ id: 'dueDate', label: 'Datum', title: 'Nach Fälligkeitsdatum sortieren' },
+		{ id: 'priority', label: 'Priorität', title: 'Nach Priorität sortieren' },
+		{ id: 'title', label: 'Name', title: 'Alphabetisch sortieren' },
+	];
+
+	// Derived values
+	let currentPriority = $derived(PRIORITY_OPTIONS.find((p) => p.value === selectedPriority)!);
+	let selectedProject = $derived(
+		selectedProjectId ? projectsStore.getById(selectedProjectId) : undefined
+	);
+	let dateLabel = $derived(() => {
+		const today = new Date();
+		if (selectedDate.toDateString() === today.toDateString()) return 'Heute';
+		if (selectedDate.toDateString() === addDays(today, 1).toDateString()) return 'Morgen';
+		return format(selectedDate, 'dd. MMM', { locale: de });
+	});
+
+	// Count active filters
+	let activeFilterCount = $derived(
+		selectedPriorityFilters.length + (selectedProjectFilter ? 1 : 0) + selectedLabelFilters.length
+	);
+
+	function handleSortChange(value: string) {
+		onSortChange(value as SortBy);
+	}
+
+	function closeAllDropdowns() {
+		showDatePicker = false;
+		showPriorityPicker = false;
+		showProjectPicker = false;
+		showFilterDropdown = false;
+	}
+
+	async function handleSubmit(event?: Event) {
+		event?.preventDefault();
+
+		const title = inputValue.trim();
+		if (!title || isCreating) return;
+
+		isCreating = true;
+
+		try {
+			await tasksStore.createTask({
+				title,
+				projectId: selectedProjectId,
+				dueDate: selectedDate.toISOString(),
+				priority: selectedPriority,
+			});
+
+			// Reset form
+			inputValue = '';
+			selectedDate = new Date();
+			selectedPriority = 'medium';
+			selectedProjectId = undefined;
+			showQuickAddOptions = false;
+		} catch (error) {
+			console.error('Failed to create task:', error);
+		} finally {
+			isCreating = false;
+		}
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Enter' && inputValue.trim()) {
+			handleSubmit();
+		} else if (event.key === 'Escape') {
+			inputValue = '';
+			showQuickAddOptions = false;
+			closeAllDropdowns();
+		}
+	}
+
+	function handleInputFocus() {
+		showQuickAddOptions = true;
+	}
+
+	function selectDate(date: Date) {
+		selectedDate = date;
+		showDatePicker = false;
+	}
+
+	function selectPriority(priority: TaskPriority) {
+		selectedPriority = priority;
+		showPriorityPicker = false;
+	}
+
+	function selectProject(projectId: string | undefined) {
+		selectedProjectId = projectId;
+		showProjectPicker = false;
+	}
+
+	function togglePriorityFilter(priority: TaskPriority) {
+		if (selectedPriorityFilters.includes(priority)) {
+			selectedPriorityFilters = selectedPriorityFilters.filter((p) => p !== priority);
+		} else {
+			selectedPriorityFilters = [...selectedPriorityFilters, priority];
+		}
+	}
+
+	function clearAllFilters() {
+		selectedPriorityFilters = [];
+		selectedProjectFilter = null;
+		selectedLabelFilters = [];
+	}
+</script>
+
+<svelte:window onclick={closeAllDropdowns} />
+
+<PillToolbar topOffset="70px">
+	<!-- Quick Add Input -->
+	<div class="quick-add-section" onclick={(e) => e.stopPropagation()}>
+		<div class="quick-add-input-wrapper">
+			<svg class="input-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+			</svg>
+			<input
+				type="text"
+				bind:value={inputValue}
+				onkeydown={handleKeydown}
+				onfocus={handleInputFocus}
+				placeholder="Neue Aufgabe..."
+				class="quick-add-input"
+				disabled={isCreating}
+			/>
+		</div>
+
+		<!-- Quick add options (visible when focused or has input) -->
+		{#if showQuickAddOptions || inputValue.trim()}
+			<div class="quick-add-options">
+				<!-- Date picker -->
+				<div class="option-wrapper">
+					<button
+						type="button"
+						class="option-btn"
+						class:active={showDatePicker}
+						onclick={(e) => {
+							e.stopPropagation();
+							showDatePicker = !showDatePicker;
+							showPriorityPicker = false;
+							showProjectPicker = false;
+						}}
+						title="Fälligkeitsdatum"
+					>
+						<svg class="option-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+							/>
+						</svg>
+						<span class="option-label">{dateLabel()}</span>
+					</button>
+
+					{#if showDatePicker}
+						<div class="dropdown" onclick={(e) => e.stopPropagation()}>
+							{#each dateOptions as option}
+								<button
+									type="button"
+									class="dropdown-item"
+									class:selected={selectedDate.toDateString() === option.date.toDateString()}
+									onclick={() => selectDate(option.date)}
+								>
+									{option.label}
+								</button>
+							{/each}
+						</div>
+					{/if}
+				</div>
+
+				<!-- Priority picker -->
+				<div class="option-wrapper">
+					<button
+						type="button"
+						class="option-btn"
+						class:active={showPriorityPicker}
+						onclick={(e) => {
+							e.stopPropagation();
+							showPriorityPicker = !showPriorityPicker;
+							showDatePicker = false;
+							showProjectPicker = false;
+						}}
+						title="Priorität"
+					>
+						<svg class="option-icon" fill="none" viewBox="0 0 24 24" stroke={currentPriority.color}>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9"
+							/>
+						</svg>
+					</button>
+
+					{#if showPriorityPicker}
+						<div class="dropdown" onclick={(e) => e.stopPropagation()}>
+							{#each PRIORITY_OPTIONS as priority}
+								<button
+									type="button"
+									class="dropdown-item"
+									class:selected={selectedPriority === priority.value}
+									onclick={() => selectPriority(priority.value)}
+								>
+									<span class="priority-dot" style="background-color: {priority.color}"></span>
+									{priority.label}
+								</button>
+							{/each}
+						</div>
+					{/if}
+				</div>
+
+				<!-- Project picker -->
+				<div class="option-wrapper">
+					<button
+						type="button"
+						class="option-btn"
+						class:active={showProjectPicker}
+						onclick={(e) => {
+							e.stopPropagation();
+							showProjectPicker = !showProjectPicker;
+							showDatePicker = false;
+							showPriorityPicker = false;
+						}}
+						title="Projekt"
+					>
+						<svg
+							class="option-icon"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke={selectedProject?.color || 'currentColor'}
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
+							/>
+						</svg>
+					</button>
+
+					{#if showProjectPicker}
+						<div class="dropdown" onclick={(e) => e.stopPropagation()}>
+							<button
+								type="button"
+								class="dropdown-item"
+								class:selected={!selectedProjectId}
+								onclick={() => selectProject(undefined)}
+							>
+								<span class="project-dot" style="background-color: #6b7280"></span>
+								Kein Projekt
+							</button>
+							{#each projectsStore.activeProjects as project}
+								<button
+									type="button"
+									class="dropdown-item"
+									class:selected={selectedProjectId === project.id}
+									onclick={() => selectProject(project.id)}
+								>
+									<span class="project-dot" style="background-color: {project.color}"></span>
+									{project.name}
+								</button>
+							{/each}
+						</div>
+					{/if}
+				</div>
+
+				<!-- Submit button -->
+				<button
+					type="button"
+					class="submit-btn"
+					disabled={isCreating || !inputValue.trim()}
+					onclick={() => handleSubmit()}
+				>
+					{#if isCreating}
+						<div class="spinner"></div>
+					{:else}
+						<svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M13 7l5 5m0 0l-5 5m5-5H6"
+							/>
+						</svg>
+					{/if}
+				</button>
+			</div>
+		{/if}
+	</div>
+
+	<PillToolbarDivider />
+
+	<!-- Kanban View Button -->
+	<PillToolbarButton onclick={() => goto('/kanban')} title="Kanban-Ansicht">
+		<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2"
+			/>
+		</svg>
+	</PillToolbarButton>
+
+	<PillToolbarDivider />
+
+	<!-- Filter Button -->
+	<div class="filter-dropdown-container" onclick={(e) => e.stopPropagation()}>
+		<PillToolbarButton
+			onclick={() => {
+				showFilterDropdown = !showFilterDropdown;
+				closeAllDropdowns();
+			}}
+			active={activeFilterCount > 0}
+			title="Filter"
+		>
+			<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
+				/>
+			</svg>
+			{#if activeFilterCount > 0}
+				<span class="filter-count">{activeFilterCount}</span>
+			{/if}
+		</PillToolbarButton>
+
+		{#if showFilterDropdown}
+			<div class="filter-dropdown" onclick={(e) => e.stopPropagation()}>
+				<div class="filter-section">
+					<div class="filter-section-header">Priorität</div>
+					<div class="filter-chips">
+						{#each priorities as priority}
+							<button
+								type="button"
+								class="filter-chip"
+								class:selected={selectedPriorityFilters.includes(priority.value)}
+								onclick={() => togglePriorityFilter(priority.value)}
+							>
+								<span class="chip-dot" style="background-color: {priority.color}"></span>
+								{priority.label}
+							</button>
+						{/each}
+					</div>
+				</div>
+
+				<div class="filter-section">
+					<div class="filter-section-header">Projekt</div>
+					<select
+						class="filter-select"
+						value={selectedProjectFilter || ''}
+						onchange={(e) => (selectedProjectFilter = e.currentTarget.value || null)}
+					>
+						<option value="">Alle Projekte</option>
+						{#each projectsStore.activeProjects as project}
+							<option value={project.id}>{project.name}</option>
+						{/each}
+					</select>
+				</div>
+
+				{#if activeFilterCount > 0}
+					<button type="button" class="clear-filters-btn" onclick={clearAllFilters}>
+						Filter zurücksetzen
+					</button>
+				{/if}
+			</div>
+		{/if}
+	</div>
+
+	<PillToolbarDivider />
+
+	<!-- Sort Toggle -->
+	<PillViewSwitcher
+		options={sortOptions}
+		value={sortBy}
+		onChange={handleSortChange}
+		primaryColor="#8b5cf6"
+		embedded={true}
+	/>
+
+	<PillToolbarDivider />
+
+	<!-- Show Completed Toggle -->
+	<PillToolbarButton
+		onclick={onToggleShowCompleted}
+		active={showCompleted}
+		title={showCompleted ? 'Erledigte ausblenden' : 'Erledigte anzeigen'}
+	>
+		<svg fill={showCompleted ? 'currentColor' : 'none'} stroke="currentColor" viewBox="0 0 24 24">
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+			/>
+		</svg>
+	</PillToolbarButton>
+</PillToolbar>
+
+<style>
+	/* Quick Add Section */
+	.quick-add-section {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		flex: 1;
+		min-width: 0;
+		max-width: 400px;
+	}
+
+	.quick-add-input-wrapper {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+		flex: 1;
+		min-width: 0;
+	}
+
+	.input-icon {
+		width: 1rem;
+		height: 1rem;
+		color: #9ca3af;
+		flex-shrink: 0;
+	}
+
+	.quick-add-input {
+		flex: 1;
+		min-width: 0;
+		background: transparent;
+		border: none;
+		outline: none;
+		font-size: 0.875rem;
+		color: #374151;
+	}
+
+	:global(.dark) .quick-add-input {
+		color: #f3f4f6;
+	}
+
+	.quick-add-input::placeholder {
+		color: #9ca3af;
+	}
+
+	.quick-add-input:disabled {
+		opacity: 0.5;
+	}
+
+	/* Quick add options */
+	.quick-add-options {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+		flex-shrink: 0;
+	}
+
+	.option-wrapper {
+		position: relative;
+	}
+
+	.option-btn {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+		padding: 0.25rem 0.375rem;
+		border: none;
+		background: transparent;
+		color: #6b7280;
+		cursor: pointer;
+		border-radius: 9999px;
+		transition: all 0.15s;
+		font-size: 0.75rem;
+	}
+
+	:global(.dark) .option-btn {
+		color: #9ca3af;
+	}
+
+	.option-btn:hover,
+	.option-btn.active {
+		background: rgba(0, 0, 0, 0.05);
+		color: #374151;
+	}
+
+	:global(.dark) .option-btn:hover,
+	:global(.dark) .option-btn.active {
+		background: rgba(255, 255, 255, 0.1);
+		color: #f3f4f6;
+	}
+
+	.option-icon {
+		width: 0.875rem;
+		height: 0.875rem;
+		flex-shrink: 0;
+	}
+
+	.option-label {
+		display: none;
+	}
+
+	@media (min-width: 768px) {
+		.option-label {
+			display: inline;
+		}
+	}
+
+	/* Submit button */
+	.submit-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 1.5rem;
+		height: 1.5rem;
+		border: none;
+		background: #8b5cf6;
+		color: white;
+		cursor: pointer;
+		border-radius: 9999px;
+		transition: all 0.15s;
+		flex-shrink: 0;
+	}
+
+	.submit-btn:hover:not(:disabled) {
+		background: #7c3aed;
+		transform: scale(1.05);
+	}
+
+	.submit-btn:disabled {
+		background: #d1d5db;
+		cursor: not-allowed;
+	}
+
+	:global(.dark) .submit-btn:disabled {
+		background: #4b5563;
+	}
+
+	.submit-btn svg {
+		width: 0.875rem;
+		height: 0.875rem;
+	}
+
+	.spinner {
+		width: 0.75rem;
+		height: 0.75rem;
+		border: 2px solid white;
+		border-right-color: transparent;
+		border-radius: 50%;
+		animation: spin 0.8s linear infinite;
+	}
+
+	@keyframes spin {
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	/* Dropdowns */
+	.dropdown {
+		position: absolute;
+		top: calc(100% + 0.5rem);
+		left: 50%;
+		transform: translateX(-50%);
+		min-width: 140px;
+		padding: 0.375rem;
+		border-radius: 0.75rem;
+		background: rgba(255, 255, 255, 0.95);
+		backdrop-filter: blur(12px);
+		-webkit-backdrop-filter: blur(12px);
+		border: 1px solid rgba(0, 0, 0, 0.1);
+		box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
+		z-index: 50;
+	}
+
+	:global(.dark) .dropdown {
+		background: rgba(40, 40, 40, 0.95);
+		border-color: rgba(255, 255, 255, 0.15);
+	}
+
+	.dropdown-item {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		width: 100%;
+		padding: 0.5rem 0.75rem;
+		border: none;
+		background: transparent;
+		color: #374151;
+		cursor: pointer;
+		border-radius: 0.5rem;
+		font-size: 0.8125rem;
+		text-align: left;
+		transition: background 0.15s;
+	}
+
+	:global(.dark) .dropdown-item {
+		color: #f3f4f6;
+	}
+
+	.dropdown-item:hover {
+		background: rgba(0, 0, 0, 0.05);
+	}
+
+	:global(.dark) .dropdown-item:hover {
+		background: rgba(255, 255, 255, 0.1);
+	}
+
+	.dropdown-item.selected {
+		background: rgba(139, 92, 246, 0.1);
+		color: #8b5cf6;
+	}
+
+	.priority-dot,
+	.project-dot {
+		width: 0.5rem;
+		height: 0.5rem;
+		border-radius: 9999px;
+		flex-shrink: 0;
+	}
+
+	/* Filter dropdown container */
+	.filter-dropdown-container {
+		position: relative;
+		display: flex;
+		align-items: center;
+	}
+
+	.filter-count {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		min-width: 1rem;
+		height: 1rem;
+		padding: 0 0.25rem;
+		font-size: 0.625rem;
+		font-weight: 600;
+		color: white;
+		background: #8b5cf6;
+		border-radius: 9999px;
+	}
+
+	.filter-dropdown {
+		position: absolute;
+		top: calc(100% + 0.5rem);
+		left: 50%;
+		transform: translateX(-50%);
+		min-width: 260px;
+		padding: 0.75rem;
+		background: rgba(255, 255, 255, 0.95);
+		backdrop-filter: blur(12px);
+		-webkit-backdrop-filter: blur(12px);
+		border: 1px solid rgba(0, 0, 0, 0.1);
+		border-radius: 0.75rem;
+		box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
+		z-index: 50;
+	}
+
+	:global(.dark) .filter-dropdown {
+		background: rgba(30, 30, 30, 0.95);
+		border-color: rgba(255, 255, 255, 0.1);
+	}
+
+	.filter-section {
+		margin-bottom: 0.75rem;
+	}
+
+	.filter-section:last-of-type {
+		margin-bottom: 0;
+	}
+
+	.filter-section-header {
+		font-size: 0.6875rem;
+		font-weight: 600;
+		color: #6b7280;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		margin-bottom: 0.5rem;
+	}
+
+	:global(.dark) .filter-section-header {
+		color: #9ca3af;
+	}
+
+	.filter-chips {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.375rem;
+	}
+
+	.filter-chip {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding: 0.375rem 0.625rem;
+		font-size: 0.75rem;
+		font-weight: 500;
+		color: #374151;
+		background: rgba(0, 0, 0, 0.05);
+		border: 1px solid transparent;
+		border-radius: 9999px;
+		cursor: pointer;
+		transition: all 0.15s;
+	}
+
+	:global(.dark) .filter-chip {
+		color: #f3f4f6;
+		background: rgba(255, 255, 255, 0.1);
+	}
+
+	.filter-chip:hover {
+		background: rgba(0, 0, 0, 0.1);
+	}
+
+	:global(.dark) .filter-chip:hover {
+		background: rgba(255, 255, 255, 0.15);
+	}
+
+	.filter-chip.selected {
+		background: rgba(139, 92, 246, 0.15);
+		border-color: rgba(139, 92, 246, 0.3);
+		color: #8b5cf6;
+	}
+
+	.chip-dot {
+		width: 0.5rem;
+		height: 0.5rem;
+		border-radius: 9999px;
+	}
+
+	.filter-select {
+		width: 100%;
+		padding: 0.5rem 0.75rem;
+		font-size: 0.8125rem;
+		color: #374151;
+		background: rgba(0, 0, 0, 0.05);
+		border: 1px solid rgba(0, 0, 0, 0.1);
+		border-radius: 0.5rem;
+		cursor: pointer;
+		transition: border-color 0.15s;
+	}
+
+	:global(.dark) .filter-select {
+		color: #f3f4f6;
+		background: rgba(255, 255, 255, 0.1);
+		border-color: rgba(255, 255, 255, 0.1);
+	}
+
+	.filter-select:hover {
+		border-color: rgba(139, 92, 246, 0.5);
+	}
+
+	.filter-select:focus {
+		outline: none;
+		border-color: #8b5cf6;
+	}
+
+	.clear-filters-btn {
+		width: 100%;
+		margin-top: 0.75rem;
+		padding: 0.5rem;
+		font-size: 0.8125rem;
+		font-weight: 500;
+		color: #6b7280;
+		background: transparent;
+		border: none;
+		cursor: pointer;
+		transition: color 0.15s;
+	}
+
+	.clear-filters-btn:hover {
+		color: #374151;
+	}
+
+	:global(.dark) .clear-filters-btn:hover {
+		color: #f3f4f6;
+	}
+</style>
diff --git a/apps/todo/apps/web/src/routes/(app)/+layout.svelte b/apps/todo/apps/web/src/routes/(app)/+layout.svelte
index 8b909f30a..dad2bb8c9 100644
--- a/apps/todo/apps/web/src/routes/(app)/+layout.svelte
+++ b/apps/todo/apps/web/src/routes/(app)/+layout.svelte
@@ -3,11 +3,11 @@
 	import { page } from '$app/stores';
 	import { onMount } from 'svelte';
 	import { locale } from 'svelte-i18n';
-	import { PillNavigation, CommandBar } from '@manacore/shared-ui';
+	import { PillNavigation, QuickInputBar } from '@manacore/shared-ui';
 	import type {
 		PillNavItem,
 		PillDropdownItem,
-		CommandBarItem,
+		QuickInputItem,
 		QuickAction,
 		CreatePreview,
 	} from '@manacore/shared-ui';
@@ -38,19 +38,15 @@
 
 	let { children } = $props();
 
-	// CommandBar state
-	let commandBarOpen = $state(false);
-
-	// CommandBar quick actions
-	const commandBarQuickActions: QuickAction[] = [
-		{ id: 'new', label: 'Neue Aufgabe erstellen', icon: 'plus', href: '/task/new', shortcut: 'N' },
-		{ id: 'kanban', label: 'Kanban-Board', icon: 'list', href: '/kanban' },
-		{ id: 'stats', label: 'Statistiken', icon: 'chart', href: '/statistics' },
+	// QuickInputBar quick actions
+	const quickActions: QuickAction[] = [
+		{ id: 'kanban', label: 'Kanban', icon: 'kanban', href: '/kanban' },
+		{ id: 'stats', label: 'Statistik', icon: 'chart', href: '/statistics' },
 		{ id: 'settings', label: 'Einstellungen', icon: 'settings', href: '/settings' },
 	];
 
-	// CommandBar search - search tasks
-	async function handleCommandBarSearch(query: string): Promise<CommandBarItem[]> {
+	// QuickInputBar search - search tasks
+	async function handleSearch(query: string): Promise<QuickInputItem[]> {
 		if (!query.trim()) return [];
 
 		try {
@@ -69,25 +65,25 @@
 		}
 	}
 
-	function handleCommandBarSelect(item: CommandBarItem) {
+	function handleSelect(item: QuickInputItem) {
 		goto(`/task/${item.id}`);
 	}
 
-	// CommandBar create - parse input and show preview
-	function handleCommandBarParseCreate(query: string): CreatePreview | null {
+	// QuickInputBar create - parse input and show preview
+	function handleParseCreate(query: string): CreatePreview | null {
 		if (!query.trim()) return null;
 
 		const parsed = parseTaskInput(query);
 		const preview = formatParsedTaskPreview(parsed);
 
 		return {
-			title: `"${parsed.title}" als Aufgabe erstellen`,
+			title: `"${parsed.title}" erstellen`,
 			subtitle: preview || 'Neue Aufgabe',
 		};
 	}
 
-	// CommandBar create - actually create the task
-	async function handleCommandBarCreate(query: string): Promise<void> {
+	// QuickInputBar create - actually create the task
+	async function handleCreate(query: string): Promise<void> {
 		if (!query.trim()) return;
 
 		const parsed = parseTaskInput(query);
@@ -192,13 +188,6 @@
 	function handleKeydown(event: KeyboardEvent) {
 		const target = event.target as HTMLElement;
 
-		// Cmd/Ctrl+K to open command bar (works even in inputs)
-		if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
-			event.preventDefault();
-			commandBarOpen = true;
-			return;
-		}
-
 		if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
 			return;
 		}
@@ -366,20 +355,20 @@
 		</div>
 	</main>
 
-	<!-- Global Command Bar (Cmd/K) -->
-	<CommandBar
-		bind:open={commandBarOpen}
-		onClose={() => (commandBarOpen = false)}
-		onSearch={handleCommandBarSearch}
-		onSelect={handleCommandBarSelect}
-		quickActions={commandBarQuickActions}
-		placeholder="Aufgabe suchen oder erstellen..."
+	<!-- Global Quick Input Bar -->
+	<QuickInputBar
+		onSearch={handleSearch}
+		onSelect={handleSelect}
+		{quickActions}
+		placeholder="Neue Aufgabe oder suchen..."
 		emptyText="Keine Aufgaben gefunden"
 		searchingText="Suche..."
-		onCreate={handleCommandBarCreate}
-		onParseCreate={handleCommandBarParseCreate}
-		createText="Als Aufgabe erstellen"
-		createShortcut="⌘↵"
+		onCreate={handleCreate}
+		onParseCreate={handleParseCreate}
+		createText="Erstellen"
+		appIcon="todo"
+		primaryColor="#8b5cf6"
+		autoFocus={true}
 	/>
 </div>
 
@@ -394,6 +383,8 @@
 		transition: all 300ms ease;
 		position: relative;
 		z-index: 0;
+		/* Space for QuickInputBar at bottom */
+		padding-bottom: calc(80px + env(safe-area-inset-bottom));
 	}
 
 	.main-content.floating-mode {
@@ -438,4 +429,11 @@
 			padding-right: 0;
 		}
 	}
+
+	/* Mobile: More space for QuickInputBar + PillNav */
+	@media (max-width: 768px) {
+		.main-content {
+			padding-bottom: calc(150px + env(safe-area-inset-bottom));
+		}
+	}
 </style>
diff --git a/packages/shared-ui/src/index.ts b/packages/shared-ui/src/index.ts
index d8c032f24..71c8b18a4 100644
--- a/packages/shared-ui/src/index.ts
+++ b/packages/shared-ui/src/index.ts
@@ -79,6 +79,12 @@ export {
 	SidebarSection,
 	PillNavigation,
 	PillDropdown,
+	PillTabGroup,
+	PillTimeRangeSelector,
+	PillViewSwitcher,
+	PillToolbar,
+	PillToolbarButton,
+	PillToolbarDivider,
 } from './navigation';
 export type {
 	NavItem,
@@ -90,6 +96,7 @@ export type {
 	PillDropdownItem,
 	PillNavElement,
 	PillNavigationProps,
+	PillTabOption,
 } from './navigation';
 
 // Settings
@@ -107,9 +114,13 @@ export {
 	GlobalSettingsSection,
 } from './settings';
 
-// Command Bar
+// Command Bar (deprecated - use QuickInputBar)
 export { CommandBar } from './command-bar';
-export type { CommandBarItem, QuickAction, CreatePreview } from './command-bar';
+export type { CommandBarItem } from './command-bar';
+
+// Quick Input Bar
+export { QuickInputBar } from './quick-input';
+export type { QuickInputItem, QuickAction, CreatePreview } from './quick-input';
 
 // Pages
 export { default as AppsPage } from './pages/AppsPage.svelte';
diff --git a/packages/shared-ui/src/navigation/PillTimeRangeSelector.svelte b/packages/shared-ui/src/navigation/PillTimeRangeSelector.svelte
new file mode 100644
index 000000000..806977d1f
--- /dev/null
+++ b/packages/shared-ui/src/navigation/PillTimeRangeSelector.svelte
@@ -0,0 +1,471 @@
+<script lang="ts">
+	interface Props {
+		/** Start hour (0-23) */
+		startHour: number;
+		/** End hour (1-24) */
+		endHour: number;
+		/** Called when start hour changes */
+		onStartHourChange: (hour: number) => void;
+		/** Called when end hour changes */
+		onEndHourChange: (hour: number) => void;
+		/** Dropdown direction */
+		direction?: 'up' | 'down';
+		/** Label format - 'range' shows "8-18h", 'icon' shows clock icon only */
+		labelFormat?: 'range' | 'icon';
+		/** Embedded mode - no background/border, for use inside a parent bar */
+		embedded?: boolean;
+	}
+
+	let {
+		startHour,
+		endHour,
+		onStartHourChange,
+		onEndHourChange,
+		direction = 'down',
+		labelFormat = 'range',
+		embedded = false,
+	}: Props = $props();
+
+	let isOpen = $state(false);
+	let triggerButton: HTMLButtonElement;
+	let dropdownPosition = $state({ top: 0, left: 0 });
+
+	function toggle() {
+		if (triggerButton) {
+			const rect = triggerButton.getBoundingClientRect();
+			if (direction === 'down') {
+				dropdownPosition = {
+					top: rect.bottom + 8,
+					left: rect.left,
+				};
+			} else {
+				dropdownPosition = {
+					top: rect.top - 8,
+					left: rect.left,
+				};
+			}
+		}
+		isOpen = !isOpen;
+	}
+
+	function close() {
+		isOpen = false;
+	}
+
+	function handleStartChange(hour: number) {
+		if (hour < endHour) {
+			onStartHourChange(hour);
+		}
+	}
+
+	function handleEndChange(hour: number) {
+		if (hour > startHour) {
+			onEndHourChange(hour);
+		}
+	}
+
+	function formatHour(hour: number): string {
+		return `${hour.toString().padStart(2, '0')}:00`;
+	}
+
+	let label = $derived(labelFormat === 'range' ? `${startHour}-${endHour}h` : '');
+
+	// Generate hour options
+	const startHours = Array.from({ length: 24 }, (_, i) => i);
+	const endHours = Array.from({ length: 24 }, (_, i) => i + 1);
+</script>
+
+<div class="pill-time-selector">
+	<button
+		bind:this={triggerButton}
+		onclick={toggle}
+		class="trigger-button"
+		class:pill={!embedded}
+		class:glass-pill={!embedded}
+		class:embedded-btn={embedded}
+		title="Zeitbereich auswählen"
+	>
+		<svg class="pill-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+			/>
+		</svg>
+		{#if label}
+			<span class="pill-label">{label}</span>
+		{/if}
+		<svg
+			class="chevron-icon"
+			class:rotated={isOpen}
+			fill="none"
+			stroke="currentColor"
+			viewBox="0 0 24 24"
+		>
+			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+		</svg>
+	</button>
+
+	{#if isOpen}
+		<button
+			class="backdrop"
+			onclick={close}
+			onkeydown={(e) => e.key === 'Escape' && close()}
+			aria-label="Close"
+		></button>
+
+		<div
+			class="dropdown glass-dropdown"
+			class:dropdown-up={direction === 'up'}
+			style="top: {dropdownPosition.top}px; left: {dropdownPosition.left}px;"
+		>
+			<div class="dropdown-header">Zeitbereich</div>
+
+			<div class="time-selectors">
+				<div class="time-column">
+					<label class="column-label">Von</label>
+					<div class="hour-list">
+						{#each startHours as hour}
+							<button
+								class="hour-option"
+								class:active={startHour === hour}
+								class:disabled={hour >= endHour}
+								onclick={() => handleStartChange(hour)}
+								disabled={hour >= endHour}
+							>
+								{formatHour(hour)}
+							</button>
+						{/each}
+					</div>
+				</div>
+
+				<div class="time-divider"></div>
+
+				<div class="time-column">
+					<label class="column-label">Bis</label>
+					<div class="hour-list">
+						{#each endHours as hour}
+							<button
+								class="hour-option"
+								class:active={endHour === hour}
+								class:disabled={hour <= startHour}
+								onclick={() => handleEndChange(hour)}
+								disabled={hour <= startHour}
+							>
+								{formatHour(hour)}
+							</button>
+						{/each}
+					</div>
+				</div>
+			</div>
+
+			<div class="dropdown-footer">
+				<span class="current-range">{formatHour(startHour)} - {formatHour(endHour)}</span>
+			</div>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.pill-time-selector {
+		position: relative;
+	}
+
+	.trigger-button {
+		position: relative;
+		z-index: 10;
+	}
+
+	.pill {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding: 0.5rem 0.75rem;
+		border-radius: 9999px;
+		font-size: 0.875rem;
+		font-weight: 500;
+		white-space: nowrap;
+		border: none;
+		cursor: pointer;
+		transition: all 0.2s;
+	}
+
+	.glass-pill {
+		background: rgba(255, 255, 255, 0.85);
+		backdrop-filter: blur(12px);
+		-webkit-backdrop-filter: blur(12px);
+		border: 1px solid rgba(0, 0, 0, 0.1);
+		box-shadow:
+			0 4px 6px -1px rgba(0, 0, 0, 0.1),
+			0 2px 4px -1px rgba(0, 0, 0, 0.06);
+		color: #374151;
+	}
+
+	:global(.dark) .glass-pill {
+		background: rgba(255, 255, 255, 0.12);
+		border: 1px solid rgba(255, 255, 255, 0.15);
+		color: #f3f4f6;
+	}
+
+	.glass-pill:hover {
+		background: rgba(255, 255, 255, 0.95);
+		border-color: rgba(0, 0, 0, 0.15);
+		transform: translateY(-1px);
+		box-shadow:
+			0 10px 15px -3px rgba(0, 0, 0, 0.1),
+			0 4px 6px -2px rgba(0, 0, 0, 0.05);
+	}
+
+	:global(.dark) .glass-pill:hover {
+		background: rgba(255, 255, 255, 0.2);
+		border-color: rgba(255, 255, 255, 0.25);
+	}
+
+	.pill-icon {
+		width: 1rem;
+		height: 1rem;
+		flex-shrink: 0;
+	}
+
+	.pill-label {
+		font-size: 0.8125rem;
+	}
+
+	/* Embedded mode - no background/border */
+	.embedded-btn {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding: 0.5rem 0.75rem;
+		border-radius: 9999px;
+		font-size: 0.875rem;
+		font-weight: 500;
+		white-space: nowrap;
+		border: none;
+		cursor: pointer;
+		transition: all 0.15s ease;
+		background: transparent;
+		color: #374151;
+	}
+
+	:global(.dark) .embedded-btn {
+		color: #f3f4f6;
+	}
+
+	.embedded-btn:hover {
+		background: rgba(0, 0, 0, 0.05);
+	}
+
+	:global(.dark) .embedded-btn:hover {
+		background: rgba(255, 255, 255, 0.1);
+	}
+
+	.chevron-icon {
+		width: 0.75rem;
+		height: 0.75rem;
+		transition: transform 0.2s;
+		margin-left: 0.125rem;
+	}
+
+	.chevron-icon.rotated {
+		transform: rotate(180deg);
+	}
+
+	.backdrop {
+		position: fixed;
+		inset: 0;
+		z-index: 9998;
+		background: transparent;
+		border: none;
+		cursor: default;
+	}
+
+	.dropdown {
+		position: fixed;
+		z-index: 9999;
+		min-width: 280px;
+		border-radius: 1rem;
+		overflow: hidden;
+		animation: dropdownIn 0.15s ease-out;
+	}
+
+	.dropdown-up {
+		transform: translateY(-100%);
+	}
+
+	@keyframes dropdownIn {
+		from {
+			opacity: 0;
+			transform: translateY(10px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	.dropdown-up {
+		animation-name: dropdownInUp;
+	}
+
+	@keyframes dropdownInUp {
+		from {
+			opacity: 0;
+			transform: translateY(-100%) translateY(-10px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(-100%);
+		}
+	}
+
+	.glass-dropdown {
+		background: rgba(255, 255, 255, 0.95);
+		backdrop-filter: blur(16px);
+		-webkit-backdrop-filter: blur(16px);
+		border: 1px solid rgba(0, 0, 0, 0.1);
+		box-shadow:
+			0 20px 25px -5px rgba(0, 0, 0, 0.1),
+			0 10px 10px -5px rgba(0, 0, 0, 0.04);
+	}
+
+	:global(.dark) .glass-dropdown {
+		background: rgba(30, 30, 30, 0.95);
+		border: 1px solid rgba(255, 255, 255, 0.15);
+	}
+
+	.dropdown-header {
+		padding: 0.75rem 1rem;
+		font-size: 0.75rem;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		color: #6b7280;
+		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+	}
+
+	:global(.dark) .dropdown-header {
+		color: #9ca3af;
+		border-bottom-color: rgba(255, 255, 255, 0.1);
+	}
+
+	.time-selectors {
+		display: flex;
+		padding: 0.5rem;
+		gap: 0.5rem;
+	}
+
+	.time-column {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		gap: 0.375rem;
+	}
+
+	.column-label {
+		font-size: 0.6875rem;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		color: #6b7280;
+		padding: 0 0.5rem;
+	}
+
+	:global(.dark) .column-label {
+		color: #9ca3af;
+	}
+
+	.hour-list {
+		display: flex;
+		flex-direction: column;
+		gap: 0.125rem;
+		max-height: 200px;
+		overflow-y: auto;
+		scrollbar-width: thin;
+		scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+	}
+
+	.hour-list::-webkit-scrollbar {
+		width: 4px;
+	}
+
+	.hour-list::-webkit-scrollbar-track {
+		background: transparent;
+	}
+
+	.hour-list::-webkit-scrollbar-thumb {
+		background: rgba(0, 0, 0, 0.2);
+		border-radius: 2px;
+	}
+
+	:global(.dark) .hour-list::-webkit-scrollbar-thumb {
+		background: rgba(255, 255, 255, 0.2);
+	}
+
+	.hour-option {
+		padding: 0.375rem 0.75rem;
+		border: none;
+		background: transparent;
+		border-radius: 0.5rem;
+		font-size: 0.8125rem;
+		font-weight: 500;
+		color: #374151;
+		cursor: pointer;
+		transition: all 0.15s;
+		text-align: left;
+	}
+
+	:global(.dark) .hour-option {
+		color: #e5e7eb;
+	}
+
+	.hour-option:hover:not(.disabled) {
+		background: rgba(0, 0, 0, 0.05);
+	}
+
+	:global(.dark) .hour-option:hover:not(.disabled) {
+		background: rgba(255, 255, 255, 0.1);
+	}
+
+	.hour-option.active {
+		background: color-mix(in srgb, var(--color-primary-500, #3b82f6) 20%, white 80%);
+		color: var(--color-primary-500, #3b82f6);
+	}
+
+	:global(.dark) .hour-option.active {
+		background: color-mix(in srgb, var(--color-primary-500, #3b82f6) 30%, transparent 70%);
+		color: var(--color-primary-500, #3b82f6);
+	}
+
+	.hour-option.disabled {
+		opacity: 0.35;
+		cursor: not-allowed;
+	}
+
+	.time-divider {
+		width: 1px;
+		background: rgba(0, 0, 0, 0.1);
+		margin: 0.5rem 0;
+	}
+
+	:global(.dark) .time-divider {
+		background: rgba(255, 255, 255, 0.1);
+	}
+
+	.dropdown-footer {
+		padding: 0.5rem 1rem;
+		border-top: 1px solid rgba(0, 0, 0, 0.1);
+		text-align: center;
+	}
+
+	:global(.dark) .dropdown-footer {
+		border-top-color: rgba(255, 255, 255, 0.1);
+	}
+
+	.current-range {
+		font-size: 0.8125rem;
+		font-weight: 600;
+		color: var(--color-primary-500, #3b82f6);
+	}
+</style>
diff --git a/packages/shared-ui/src/navigation/PillToolbar.svelte b/packages/shared-ui/src/navigation/PillToolbar.svelte
new file mode 100644
index 000000000..f702e3d18
--- /dev/null
+++ b/packages/shared-ui/src/navigation/PillToolbar.svelte
@@ -0,0 +1,94 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		/** Position of toolbar: 'top' or 'bottom' (default: 'top') */
+		position?: 'top' | 'bottom';
+		/** Top offset on desktop when position='top' (default: '70px' - below PillNav) */
+		topOffset?: string;
+		/** Bottom offset on desktop when position='bottom' (default: '70px' - above PillNav) */
+		bottomOffset?: string;
+		/** Bottom offset on mobile (default: '70px' - above PillNav) */
+		mobileBottomOffset?: string;
+		/** Content to render inside the toolbar */
+		children: Snippet;
+	}
+
+	let {
+		position = 'top',
+		topOffset = '70px',
+		bottomOffset = '70px',
+		mobileBottomOffset = '70px',
+		children,
+	}: Props = $props();
+</script>
+
+<div
+	class="pill-toolbar"
+	class:position-bottom={position === 'bottom'}
+	style="--toolbar-top-offset: {topOffset}; --toolbar-bottom-offset: {bottomOffset}; --toolbar-mobile-bottom-offset: {mobileBottomOffset};"
+>
+	<div class="toolbar-bar glass-pill">
+		{@render children()}
+	</div>
+</div>
+
+<style>
+	.pill-toolbar {
+		position: fixed;
+		top: var(--toolbar-top-offset, 70px);
+		left: 0;
+		right: 0;
+		z-index: 999;
+		padding: 0.375rem 1rem;
+		pointer-events: none;
+		display: flex;
+		justify-content: center;
+	}
+
+	/* Bottom position */
+	.pill-toolbar.position-bottom {
+		top: auto;
+		bottom: var(--toolbar-bottom-offset, 70px);
+	}
+
+	/* Mobile: always position above bottom nav */
+	@media (max-width: 768px) {
+		.pill-toolbar {
+			top: auto;
+			bottom: calc(var(--toolbar-mobile-bottom-offset, 70px) + env(safe-area-inset-bottom, 0px));
+		}
+	}
+
+	/* Single unified bar */
+	.toolbar-bar {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+		padding: 0.25rem;
+		pointer-events: auto;
+		max-width: 100%;
+		overflow-x: auto;
+		scrollbar-width: none;
+	}
+
+	.toolbar-bar::-webkit-scrollbar {
+		display: none;
+	}
+
+	.glass-pill {
+		background: rgba(255, 255, 255, 0.85);
+		backdrop-filter: blur(12px);
+		-webkit-backdrop-filter: blur(12px);
+		border: 1px solid rgba(0, 0, 0, 0.1);
+		box-shadow:
+			0 4px 6px -1px rgba(0, 0, 0, 0.1),
+			0 2px 4px -1px rgba(0, 0, 0, 0.06);
+		border-radius: 9999px;
+	}
+
+	:global(.dark) .glass-pill {
+		background: rgba(255, 255, 255, 0.12);
+		border: 1px solid rgba(255, 255, 255, 0.15);
+	}
+</style>
diff --git a/packages/shared-ui/src/navigation/PillToolbarButton.svelte b/packages/shared-ui/src/navigation/PillToolbarButton.svelte
new file mode 100644
index 000000000..6af067a8f
--- /dev/null
+++ b/packages/shared-ui/src/navigation/PillToolbarButton.svelte
@@ -0,0 +1,91 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		/** Click handler */
+		onclick: () => void;
+		/** Whether the button is in active state */
+		active?: boolean;
+		/** Tooltip title */
+		title?: string;
+		/** Whether to render as icon-only (smaller padding) */
+		iconOnly?: boolean;
+		/** Disabled state */
+		disabled?: boolean;
+		/** Button content (icon and/or text) */
+		children: Snippet;
+	}
+
+	let {
+		onclick,
+		active = false,
+		title,
+		iconOnly = false,
+		disabled = false,
+		children,
+	}: Props = $props();
+</script>
+
+<button
+	type="button"
+	class="toolbar-btn"
+	class:active
+	class:icon-only={iconOnly}
+	{title}
+	{disabled}
+	{onclick}
+>
+	{@render children()}
+</button>
+
+<style>
+	.toolbar-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.375rem;
+		padding: 0.5rem 0.75rem;
+		background: transparent;
+		border: none;
+		border-radius: 9999px;
+		cursor: pointer;
+		color: #374151;
+		font-size: 0.875rem;
+		font-weight: 500;
+		white-space: nowrap;
+		transition: all 0.15s ease;
+	}
+
+	:global(.dark) .toolbar-btn {
+		color: #f3f4f6;
+	}
+
+	.toolbar-btn:hover:not(:disabled) {
+		background: rgba(0, 0, 0, 0.05);
+	}
+
+	:global(.dark) .toolbar-btn:hover:not(:disabled) {
+		background: rgba(255, 255, 255, 0.1);
+	}
+
+	.toolbar-btn.active {
+		background: color-mix(in srgb, #3b82f6 15%, transparent 85%);
+		color: #3b82f6;
+	}
+
+	.toolbar-btn.icon-only {
+		padding: 0.5rem;
+	}
+
+	.toolbar-btn:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	/* Icon styling */
+	.toolbar-btn :global(svg) {
+		width: 1rem;
+		height: 1rem;
+		flex-shrink: 0;
+	}
+</style>
diff --git a/packages/shared-ui/src/navigation/PillToolbarDivider.svelte b/packages/shared-ui/src/navigation/PillToolbarDivider.svelte
new file mode 100644
index 000000000..0eaf28f9f
--- /dev/null
+++ b/packages/shared-ui/src/navigation/PillToolbarDivider.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	// No props needed - simple divider component
+</script>
+
+<div class="toolbar-divider"></div>
+
+<style>
+	.toolbar-divider {
+		width: 1px;
+		height: 1.25rem;
+		background: rgba(0, 0, 0, 0.1);
+		flex-shrink: 0;
+	}
+
+	:global(.dark) .toolbar-divider {
+		background: rgba(255, 255, 255, 0.15);
+	}
+</style>
diff --git a/packages/shared-ui/src/navigation/PillViewSwitcher.svelte b/packages/shared-ui/src/navigation/PillViewSwitcher.svelte
new file mode 100644
index 000000000..d462852b2
--- /dev/null
+++ b/packages/shared-ui/src/navigation/PillViewSwitcher.svelte
@@ -0,0 +1,223 @@
+<script lang="ts">
+	import { tick } from 'svelte';
+
+	export interface ViewOption {
+		/** Unique identifier */
+		id: string;
+		/** Display label */
+		label: string;
+		/** Optional icon name */
+		icon?: string;
+		/** Optional tooltip */
+		title?: string;
+		/** Whether this option is disabled */
+		disabled?: boolean;
+	}
+
+	interface Props {
+		/** Available view options */
+		options: ViewOption[];
+		/** Currently selected view id */
+		value: string;
+		/** Called when view changes */
+		onChange: (id: string) => void;
+		/** Primary color for active state */
+		primaryColor?: string;
+		/** Embedded mode - no background/border, for use inside a parent bar */
+		embedded?: boolean;
+	}
+
+	let { options, value, onChange, primaryColor = '#3b82f6', embedded = false }: Props = $props();
+
+	let containerRef = $state<HTMLDivElement | null>(null);
+	let indicatorStyle = $state('');
+
+	// Update indicator position when value changes
+	$effect(() => {
+		if (containerRef && value) {
+			tick().then(updateIndicator);
+		}
+	});
+
+	function updateIndicator() {
+		if (!containerRef) return;
+
+		const activeButton = containerRef.querySelector(`[data-id="${value}"]`) as HTMLButtonElement;
+		if (activeButton) {
+			const containerRect = containerRef.getBoundingClientRect();
+			const buttonRect = activeButton.getBoundingClientRect();
+
+			const left = buttonRect.left - containerRect.left;
+			const width = buttonRect.width;
+
+			indicatorStyle = `left: ${left}px; width: ${width}px;`;
+		}
+	}
+
+	function handleClick(optionId: string, disabled?: boolean) {
+		if (!disabled) {
+			onChange(optionId);
+		}
+	}
+
+	// Icon SVG paths
+	const icons: Record<string, string> = {
+		day: 'M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z',
+		week: 'M4 6h16M4 10h16M4 14h16M4 18h16',
+		month:
+			'M4 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM14 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1V5zM4 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1v-4zM14 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z',
+		year: 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2',
+		agenda:
+			'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01',
+		list: 'M4 6h16M4 10h16M4 14h16M4 18h16',
+		grid: 'M4 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM14 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1V5zM4 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1v-4zM14 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z',
+		calendar:
+			'M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z',
+	};
+
+	function getIconPath(name: string): string {
+		return icons[name] || '';
+	}
+</script>
+
+<div
+	class="pill-view-switcher"
+	class:glass-pill={!embedded}
+	class:embedded-switcher={embedded}
+	style="--switcher-primary-color: {primaryColor}"
+	bind:this={containerRef}
+>
+	<!-- Sliding indicator -->
+	<div class="sliding-indicator" style={indicatorStyle}></div>
+
+	<!-- Options -->
+	{#each options as option}
+		<button
+			data-id={option.id}
+			onclick={() => handleClick(option.id, option.disabled)}
+			class="switcher-btn"
+			class:active={value === option.id}
+			class:disabled={option.disabled}
+			title={option.title || option.label}
+			disabled={option.disabled}
+		>
+			{#if option.icon && getIconPath(option.icon)}
+				<svg class="switcher-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d={getIconPath(option.icon)}
+					/>
+				</svg>
+			{/if}
+			<span class="switcher-label">{option.label}</span>
+		</button>
+	{/each}
+</div>
+
+<style>
+	.pill-view-switcher {
+		position: relative;
+		display: inline-flex;
+		align-items: center;
+		padding: 0.1875rem;
+		border-radius: 9999px;
+		gap: 0.125rem;
+	}
+
+	.glass-pill {
+		background: rgba(255, 255, 255, 0.85);
+		backdrop-filter: blur(12px);
+		-webkit-backdrop-filter: blur(12px);
+		border: 1px solid rgba(0, 0, 0, 0.1);
+		box-shadow:
+			0 4px 6px -1px rgba(0, 0, 0, 0.1),
+			0 2px 4px -1px rgba(0, 0, 0, 0.06);
+	}
+
+	:global(.dark) .glass-pill {
+		background: rgba(255, 255, 255, 0.12);
+		border: 1px solid rgba(255, 255, 255, 0.15);
+	}
+
+	/* Embedded mode - no background/border */
+	.embedded-switcher {
+		background: transparent;
+		border: none;
+		box-shadow: none;
+		padding: 0;
+		gap: 0;
+	}
+
+	/* Sliding indicator */
+	.sliding-indicator {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		border-radius: 9999px;
+		background: color-mix(in srgb, var(--switcher-primary-color) 15%, white 85%);
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+		transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+		z-index: 0;
+	}
+
+	:global(.dark) .sliding-indicator {
+		background: color-mix(in srgb, var(--switcher-primary-color) 25%, transparent 75%);
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+	}
+
+	.switcher-btn {
+		position: relative;
+		z-index: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.25rem;
+		padding: 0.5rem 0.875rem;
+		background: transparent;
+		border: none;
+		border-radius: 9999px;
+		cursor: pointer;
+		color: #6b7280;
+		font-size: 0.875rem;
+		font-weight: 500;
+		white-space: nowrap;
+		transition: color 0.15s ease;
+	}
+
+	:global(.dark) .switcher-btn {
+		color: #9ca3af;
+	}
+
+	.switcher-btn:hover:not(.disabled) {
+		color: #374151;
+	}
+
+	:global(.dark) .switcher-btn:hover:not(.disabled) {
+		color: #e5e7eb;
+	}
+
+	.switcher-btn.active {
+		color: var(--switcher-primary-color);
+	}
+
+	:global(.dark) .switcher-btn.active {
+		color: var(--switcher-primary-color);
+	}
+
+	.switcher-btn.disabled {
+		opacity: 0.4;
+		cursor: not-allowed;
+	}
+
+	.switcher-icon {
+		width: 1rem;
+		height: 1rem;
+		flex-shrink: 0;
+	}
+
+	.switcher-label {
+		line-height: 1;
+	}
+</style>
diff --git a/packages/shared-ui/src/navigation/index.ts b/packages/shared-ui/src/navigation/index.ts
index 6695e0176..500d8fe2f 100644
--- a/packages/shared-ui/src/navigation/index.ts
+++ b/packages/shared-ui/src/navigation/index.ts
@@ -5,6 +5,11 @@ export { default as SidebarSection } from './SidebarSection.svelte';
 export { default as PillNavigation } from './PillNavigation.svelte';
 export { default as PillDropdown } from './PillDropdown.svelte';
 export { default as PillTabGroup } from './PillTabGroup.svelte';
+export { default as PillTimeRangeSelector } from './PillTimeRangeSelector.svelte';
+export { default as PillViewSwitcher } from './PillViewSwitcher.svelte';
+export { default as PillToolbar } from './PillToolbar.svelte';
+export { default as PillToolbarButton } from './PillToolbarButton.svelte';
+export { default as PillToolbarDivider } from './PillToolbarDivider.svelte';
 export type {
 	NavItem,
 	NavbarProps,
diff --git a/packages/shared-ui/src/quick-input/QuickInputBar.svelte b/packages/shared-ui/src/quick-input/QuickInputBar.svelte
new file mode 100644
index 000000000..06c37a1fe
--- /dev/null
+++ b/packages/shared-ui/src/quick-input/QuickInputBar.svelte
@@ -0,0 +1,944 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { onMount } from 'svelte';
+	import { slide } from 'svelte/transition';
+	import type { QuickInputItem, QuickAction, CreatePreview } from './types';
+
+	// Syntax highlighting patterns for command keywords
+	interface HighlightPattern {
+		pattern: RegExp;
+		className: string;
+	}
+
+	const HIGHLIGHT_PATTERNS: HighlightPattern[] = [
+		// Priority keywords (Todo) - with specific colors per level
+		{ pattern: /(!{3,}|!?dringend)\b/gi, className: 'hl-priority-urgent' },
+		{ pattern: /(!{2}|!?wichtig)\b/gi, className: 'hl-priority-high' },
+		{ pattern: /!?normal\b/gi, className: 'hl-priority-medium' },
+		{ pattern: /!?sp[aä]ter\b/gi, className: 'hl-priority-low' },
+		// Tags
+		{ pattern: /#\w+/g, className: 'hl-tag' },
+		// Projects/Calendars/Companies (@reference)
+		{ pattern: /@\w+/g, className: 'hl-reference' },
+		// Date keywords
+		{
+			pattern:
+				/\b(heute|morgen|übermorgen|montag|dienstag|mittwoch|donnerstag|freitag|samstag|sonntag|nächsten?\s+\w+|in\s+\d+\s+tagen?)\b/gi,
+			className: 'hl-date',
+		},
+		// Time patterns
+		{ pattern: /\b(\d{1,2}:\d{2}|um\s+\d{1,2}(\s*uhr)?|\d{1,2}\s*uhr)\b/gi, className: 'hl-time' },
+	];
+
+	function highlightText(text: string): string {
+		if (!text) return '';
+
+		let result = text;
+		// Escape HTML first
+		result = result.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+
+		// Apply highlights (process in order, avoiding double-highlighting)
+		for (const { pattern, className } of HIGHLIGHT_PATTERNS) {
+			result = result.replace(pattern, (match) => `<span class="${className}">${match}</span>`);
+		}
+
+		return result;
+	}
+
+	interface Props {
+		onSearch: (query: string) => Promise<QuickInputItem[]>;
+		onSelect: (item: QuickInputItem) => void;
+		onParseCreate?: (query: string) => CreatePreview | null;
+		onCreate?: (query: string) => Promise<void>;
+		quickActions?: QuickAction[];
+		placeholder?: string;
+		emptyText?: string;
+		searchingText?: string;
+		createText?: string;
+		appIcon?: string;
+		primaryColor?: string;
+		autoFocus?: boolean;
+	}
+
+	let {
+		onSearch,
+		onSelect,
+		onParseCreate,
+		onCreate,
+		quickActions = [],
+		placeholder = 'Suchen oder erstellen...',
+		emptyText = 'Keine Ergebnisse gefunden',
+		searchingText = 'Suche...',
+		createText = 'Erstellen',
+		appIcon = 'search',
+		primaryColor = '#8b5cf6',
+		autoFocus = true,
+	}: Props = $props();
+
+	let searchQuery = $state('');
+	let results = $state<QuickInputItem[]>([]);
+	let loading = $state(false);
+	let creating = $state(false);
+	let selectedIndex = $state(0);
+	let showPanel = $state(false);
+	let isFocused = $state(false);
+	let searchTimeout: ReturnType<typeof setTimeout>;
+	let inputElement = $state<HTMLInputElement | null>(null);
+
+	// Computed create preview
+	let createPreview = $derived(
+		searchQuery.trim() && onParseCreate ? onParseCreate(searchQuery) : null
+	);
+
+	// Highlighted text for overlay
+	let highlightedQuery = $derived(highlightText(searchQuery));
+
+	// Check if create option is selected (it's always first when available)
+	let isCreateSelected = $derived(selectedIndex === 0 && createPreview !== null);
+
+	// Show panel when focused or has results
+	$effect(() => {
+		showPanel =
+			isFocused && (searchQuery.trim().length > 0 || quickActions.length > 0 || results.length > 0);
+	});
+
+	// Auto-focus on mount
+	onMount(() => {
+		if (autoFocus) {
+			setTimeout(() => inputElement?.focus(), 100);
+		}
+	});
+
+	async function handleSearch() {
+		clearTimeout(searchTimeout);
+
+		if (!searchQuery.trim()) {
+			results = [];
+			loading = false;
+			return;
+		}
+
+		loading = true;
+
+		searchTimeout = setTimeout(async () => {
+			try {
+				results = await onSearch(searchQuery);
+				selectedIndex = 0;
+			} catch (e) {
+				console.error('Search error:', e);
+				results = [];
+			} finally {
+				loading = false;
+			}
+		}, 150);
+	}
+
+	async function handleCreate() {
+		if (!onCreate || !searchQuery.trim() || creating) return;
+
+		creating = true;
+		try {
+			await onCreate(searchQuery);
+			searchQuery = '';
+			results = [];
+			selectedIndex = 0;
+			// Keep focus for rapid entry
+			inputElement?.focus();
+		} catch (error) {
+			console.error('Create error:', error);
+		} finally {
+			creating = false;
+		}
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape') {
+			event.preventDefault();
+			searchQuery = '';
+			results = [];
+			inputElement?.blur();
+			return;
+		}
+
+		// Cmd/Ctrl+Enter to create directly
+		if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
+			event.preventDefault();
+			if (onCreate && searchQuery.trim()) {
+				handleCreate();
+			}
+			return;
+		}
+
+		if (event.key === 'ArrowDown') {
+			event.preventDefault();
+			// Calculate max index including create option
+			const hasCreate = createPreview !== null;
+			const maxIndex = searchQuery.trim()
+				? (hasCreate ? 1 : 0) + results.length - 1
+				: quickActions.length - 1;
+			selectedIndex = Math.min(selectedIndex + 1, Math.max(0, maxIndex));
+			return;
+		}
+
+		if (event.key === 'ArrowUp') {
+			event.preventDefault();
+			selectedIndex = Math.max(selectedIndex - 1, 0);
+			return;
+		}
+
+		if (event.key === 'Enter') {
+			event.preventDefault();
+			if (searchQuery.trim()) {
+				// If create option is selected
+				if (isCreateSelected && onCreate) {
+					handleCreate();
+				} else if (results.length > 0) {
+					// Adjust index for results (subtract 1 if create option exists)
+					const resultIndex = createPreview !== null ? selectedIndex - 1 : selectedIndex;
+					if (resultIndex >= 0 && resultIndex < results.length) {
+						selectItem(results[resultIndex]);
+					}
+				}
+			} else if (!searchQuery.trim() && quickActions.length > 0) {
+				const action = quickActions[selectedIndex];
+				if (action.href) {
+					goto(action.href);
+					inputElement?.blur();
+				} else if (action.onclick) {
+					action.onclick();
+					inputElement?.blur();
+				}
+			}
+			return;
+		}
+	}
+
+	function selectItem(item: QuickInputItem) {
+		onSelect(item);
+		searchQuery = '';
+		results = [];
+		inputElement?.blur();
+	}
+
+	function getInitials(item: QuickInputItem): string {
+		const parts = item.title.split(' ');
+		if (parts.length >= 2) {
+			return (parts[0][0] + parts[1][0]).toUpperCase();
+		}
+		return item.title.substring(0, 2).toUpperCase();
+	}
+
+	function handleQuickAction(action: QuickAction) {
+		if (action.href) {
+			goto(action.href);
+		} else if (action.onclick) {
+			action.onclick();
+		}
+		inputElement?.blur();
+	}
+
+	function handleFocus() {
+		isFocused = true;
+	}
+
+	function handleBlur(event: FocusEvent) {
+		// Check if the new focus target is within our component
+		const relatedTarget = event.relatedTarget as HTMLElement | null;
+		const container = (event.currentTarget as HTMLElement)?.closest('.quick-input-bar');
+		if (container && relatedTarget && container.contains(relatedTarget)) {
+			return; // Don't close if clicking within the component
+		}
+
+		// Delay blur to allow click events to fire
+		setTimeout(() => {
+			isFocused = false;
+		}, 150);
+	}
+</script>
+
+<div class="quick-input-bar" style="--primary-color: {primaryColor}">
+	<!-- Results Panel (above input) -->
+	{#if showPanel}
+		<div class="results-panel" transition:slide={{ duration: 150 }}>
+			{#if !searchQuery.trim() && quickActions.length > 0}
+				<!-- Quick Actions when no search -->
+				<div class="quick-actions-grid">
+					{#each quickActions as action, index (action.id)}
+						<button
+							type="button"
+							class="quick-action"
+							class:selected={index === selectedIndex}
+							onclick={() => handleQuickAction(action)}
+							onmouseenter={() => (selectedIndex = index)}
+						>
+							<div class="quick-action-icon">
+								<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+									{#if action.icon === 'plus'}
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M12 4v16m8-8H4"
+										/>
+									{:else if action.icon === 'columns' || action.icon === 'kanban'}
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2"
+										/>
+									{:else if action.icon === 'chart' || action.icon === 'stats'}
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
+										/>
+									{:else if action.icon === 'settings'}
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
+										/>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+										/>
+									{:else if action.icon === 'calendar'}
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+										/>
+									{:else if action.icon === 'clock'}
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+										/>
+									{:else if action.icon === 'users'}
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
+										/>
+									{:else if action.icon === 'list'}
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M4 6h16M4 10h16M4 14h16M4 18h16"
+										/>
+									{:else if action.icon === 'check'}
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+										/>
+									{:else if action.icon === 'heart'}
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
+										/>
+									{:else if action.icon === 'tag'}
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"
+										/>
+									{:else}
+										<!-- Default search icon -->
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+										/>
+									{/if}
+								</svg>
+							</div>
+							<span class="quick-action-label">{action.label}</span>
+							{#if action.shortcut}
+								<kbd>{action.shortcut}</kbd>
+							{/if}
+						</button>
+					{/each}
+				</div>
+			{:else if searchQuery.trim()}
+				<!-- Create option (always first when available) -->
+				{#if createPreview && onCreate}
+					<button
+						type="button"
+						class="result-item create-option"
+						class:selected={selectedIndex === 0}
+						onclick={handleCreate}
+						onmouseenter={() => (selectedIndex = 0)}
+						disabled={creating}
+					>
+						<div class="result-avatar create-avatar">
+							{#if creating}
+								<div class="loading-spinner-small"></div>
+							{:else}
+								<svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M12 4v16m8-8H4"
+									/>
+								</svg>
+							{/if}
+						</div>
+						<div class="result-info">
+							<div class="result-name">{createPreview.title}</div>
+							{#if createPreview.subtitle}
+								<div class="result-subtitle">{createPreview.subtitle}</div>
+							{/if}
+						</div>
+						<kbd class="create-shortcut">↵</kbd>
+					</button>
+				{/if}
+
+				{#if loading}
+					<div class="loading-state">
+						<div class="loading-spinner"></div>
+						<span>{searchingText}</span>
+					</div>
+				{:else if results.length === 0 && !createPreview}
+					<div class="empty-state">
+						<span>{emptyText}</span>
+					</div>
+				{:else if results.length > 0}
+					<div class="results-divider">
+						<span>Suchergebnisse</span>
+					</div>
+					{#each results as item, index (item.id)}
+						{@const adjustedIndex = createPreview ? index + 1 : index}
+						<button
+							type="button"
+							class="result-item"
+							class:selected={adjustedIndex === selectedIndex}
+							onclick={() => selectItem(item)}
+							onmouseenter={() => (selectedIndex = adjustedIndex)}
+						>
+							<div class="result-avatar">
+								{#if item.imageUrl}
+									<img src={item.imageUrl} alt={item.title} />
+								{:else}
+									{getInitials(item)}
+								{/if}
+							</div>
+							<div class="result-info">
+								<div class="result-name">{item.title}</div>
+								{#if item.subtitle}
+									<div class="result-subtitle">{item.subtitle}</div>
+								{/if}
+							</div>
+							{#if item.isFavorite}
+								<svg class="favorite-icon" fill="currentColor" viewBox="0 0 24 24">
+									<path
+										d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
+									/>
+								</svg>
+							{/if}
+						</button>
+					{/each}
+				{/if}
+			{/if}
+		</div>
+	{/if}
+
+	<!-- Input Bar (always visible) -->
+	<div class="input-container">
+		<div class="app-icon">
+			<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+				{#if appIcon === 'check-square' || appIcon === 'todo'}
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"
+					/>
+				{:else if appIcon === 'calendar'}
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+					/>
+				{:else if appIcon === 'users' || appIcon === 'contacts'}
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
+					/>
+				{:else}
+					<!-- Default search icon -->
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+					/>
+				{/if}
+			</svg>
+		</div>
+
+		<div class="input-wrapper">
+			<!-- Highlight backdrop (shows colored keywords) -->
+			<div class="input-highlight-backdrop" aria-hidden="true">
+				{@html highlightedQuery}&nbsp;
+			</div>
+			<!-- Actual input (transparent text, visible caret) -->
+			<input
+				bind:this={inputElement}
+				type="text"
+				{placeholder}
+				bind:value={searchQuery}
+				oninput={handleSearch}
+				onkeydown={handleKeydown}
+				onfocus={handleFocus}
+				onblur={handleBlur}
+				class="input-field"
+			/>
+		</div>
+
+		{#if searchQuery.trim() && onCreate}
+			<button
+				type="button"
+				class="submit-btn"
+				onclick={handleCreate}
+				disabled={creating}
+				title={createText}
+			>
+				{#if creating}
+					<div class="loading-spinner-small"></div>
+				{:else}
+					<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M14 5l7 7m0 0l-7 7m7-7H3"
+						/>
+					</svg>
+				{/if}
+			</button>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.quick-input-bar {
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		z-index: 90;
+		padding: 0.75rem 1rem;
+		padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
+		pointer-events: none;
+	}
+
+	.input-container,
+	.results-panel,
+	.submit-btn,
+	.result-item,
+	.quick-action {
+		pointer-events: auto;
+	}
+
+	.input-container {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		padding: 0.75rem 1rem;
+		background: hsl(var(--color-surface) / 0.85);
+		backdrop-filter: blur(16px);
+		-webkit-backdrop-filter: blur(16px);
+		border: 1px solid hsl(var(--color-border) / 0.5);
+		border-radius: 9999px;
+		max-width: 600px;
+		margin: 0 auto;
+		box-shadow:
+			0 4px 20px hsl(var(--color-background) / 0.3),
+			0 0 0 1px hsl(var(--color-border) / 0.2);
+		transition: all 0.2s ease;
+	}
+
+	.input-container:focus-within {
+		border-color: var(--primary-color);
+		box-shadow:
+			0 4px 20px hsl(var(--color-background) / 0.3),
+			0 0 0 2px color-mix(in srgb, var(--primary-color) 30%, transparent);
+	}
+
+	.app-icon {
+		width: 1.25rem;
+		height: 1.25rem;
+		color: hsl(var(--color-muted-foreground));
+		flex-shrink: 0;
+	}
+
+	.app-icon svg {
+		width: 100%;
+		height: 100%;
+	}
+
+	.input-wrapper {
+		position: relative;
+		flex: 1;
+		min-width: 0;
+	}
+
+	.input-highlight-backdrop {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		font-size: 1rem;
+		font-family: inherit;
+		white-space: pre;
+		pointer-events: none;
+		color: hsl(var(--color-foreground));
+		overflow: hidden;
+		line-height: 1.5;
+	}
+
+	.input-field {
+		position: relative;
+		width: 100%;
+		border: none;
+		background: transparent;
+		font-size: 1rem;
+		font-family: inherit;
+		color: transparent;
+		caret-color: hsl(var(--color-foreground));
+		outline: none;
+		z-index: 1;
+		line-height: 1.5;
+	}
+
+	.input-field::placeholder {
+		color: hsl(var(--color-muted-foreground));
+	}
+
+	/* Syntax highlighting colors */
+	.input-highlight-backdrop :global(.hl-priority-urgent) {
+		color: #ef4444;
+		font-weight: 600;
+	}
+
+	.input-highlight-backdrop :global(.hl-priority-high) {
+		color: #f97316;
+		font-weight: 600;
+	}
+
+	.input-highlight-backdrop :global(.hl-priority-medium) {
+		color: #eab308;
+		font-weight: 600;
+	}
+
+	.input-highlight-backdrop :global(.hl-priority-low) {
+		color: #22c55e;
+		font-weight: 600;
+	}
+
+	.input-highlight-backdrop :global(.hl-tag) {
+		color: var(--primary-color);
+		font-weight: 500;
+	}
+
+	.input-highlight-backdrop :global(.hl-reference) {
+		color: hsl(var(--color-success, 142 71% 45%));
+		font-weight: 500;
+	}
+
+	.input-highlight-backdrop :global(.hl-date) {
+		color: hsl(262 83% 58%);
+		font-weight: 500;
+	}
+
+	.input-highlight-backdrop :global(.hl-time) {
+		color: hsl(262 83% 58%);
+		font-weight: 500;
+	}
+
+	.submit-btn {
+		width: 2rem;
+		height: 2rem;
+		border-radius: 9999px;
+		background: var(--primary-color);
+		color: white;
+		border: none;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		transition: all 0.15s ease;
+	}
+
+	.submit-btn:hover {
+		transform: scale(1.05);
+		filter: brightness(1.1);
+	}
+
+	.submit-btn:disabled {
+		opacity: 0.7;
+		cursor: not-allowed;
+		transform: none;
+	}
+
+	.submit-btn svg {
+		width: 1rem;
+		height: 1rem;
+	}
+
+	/* Results Panel */
+	.results-panel {
+		position: absolute;
+		bottom: 100%;
+		left: 1rem;
+		right: 1rem;
+		max-width: 600px;
+		margin: 0 auto 0.5rem;
+		max-height: 320px;
+		overflow-y: auto;
+		background: hsl(var(--color-surface) / 0.95);
+		backdrop-filter: blur(16px);
+		-webkit-backdrop-filter: blur(16px);
+		border-radius: 1rem;
+		border: 1px solid hsl(var(--color-border));
+		box-shadow:
+			0 -4px 20px hsl(var(--color-background) / 0.3),
+			0 0 0 1px hsl(var(--color-border) / 0.2);
+	}
+
+	/* Quick Actions Grid */
+	.quick-actions-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+		gap: 0.5rem;
+		padding: 0.75rem;
+	}
+
+	.quick-action {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 1rem 0.75rem;
+		border-radius: 0.75rem;
+		color: hsl(var(--color-foreground));
+		background: transparent;
+		border: 1px solid transparent;
+		cursor: pointer;
+		text-align: center;
+		transition: all 0.15s ease;
+	}
+
+	.quick-action:hover,
+	.quick-action.selected {
+		background: hsl(var(--color-surface-hover));
+		border-color: hsl(var(--color-border));
+	}
+
+	.quick-action-icon {
+		width: 2rem;
+		height: 2rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 0.5rem;
+		background: color-mix(in srgb, var(--primary-color) 15%, transparent);
+		color: var(--primary-color);
+	}
+
+	.quick-action-icon svg {
+		width: 1.25rem;
+		height: 1.25rem;
+	}
+
+	.quick-action-label {
+		font-size: 0.8125rem;
+		font-weight: 500;
+	}
+
+	.quick-action kbd {
+		padding: 0.125rem 0.375rem;
+		font-size: 0.6875rem;
+		font-family: inherit;
+		background: hsl(var(--color-surface));
+		border: 1px solid hsl(var(--color-border));
+		border-radius: 4px;
+		color: hsl(var(--color-muted-foreground));
+	}
+
+	/* Result Items */
+	.result-item {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		width: 100%;
+		padding: 0.75rem 1rem;
+		background: transparent;
+		border: none;
+		cursor: pointer;
+		text-align: left;
+		transition: background 0.1s ease;
+		color: hsl(var(--color-foreground));
+	}
+
+	.result-item:hover,
+	.result-item.selected {
+		background: hsl(var(--color-surface-hover));
+	}
+
+	.result-item.create-option {
+		border-bottom: 1px solid hsl(var(--color-border));
+	}
+
+	.result-item.create-option:hover,
+	.result-item.create-option.selected {
+		background: hsl(var(--color-success) / 0.1);
+	}
+
+	.result-avatar {
+		width: 36px;
+		height: 36px;
+		min-width: 36px;
+		border-radius: 9999px;
+		background: var(--primary-color);
+		color: white;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-weight: 600;
+		font-size: 0.8125rem;
+	}
+
+	.result-avatar img {
+		width: 100%;
+		height: 100%;
+		border-radius: 9999px;
+		object-fit: cover;
+	}
+
+	.result-avatar.create-avatar {
+		background: hsl(var(--color-success));
+	}
+
+	.result-avatar.create-avatar svg {
+		width: 1.25rem;
+		height: 1.25rem;
+	}
+
+	.result-info {
+		flex: 1;
+		min-width: 0;
+	}
+
+	.result-name {
+		font-weight: 500;
+		color: hsl(var(--color-foreground));
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.result-subtitle {
+		font-size: 0.8125rem;
+		color: hsl(var(--color-muted-foreground));
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.favorite-icon {
+		width: 1rem;
+		height: 1rem;
+		color: hsl(var(--color-error, 0 84% 60%));
+		flex-shrink: 0;
+	}
+
+	.create-shortcut {
+		padding: 0.25rem 0.5rem;
+		font-size: 0.6875rem;
+		font-family: inherit;
+		background: hsl(var(--color-surface));
+		border: 1px solid hsl(var(--color-border));
+		border-radius: 4px;
+		color: hsl(var(--color-muted-foreground));
+		flex-shrink: 0;
+	}
+
+	.results-divider {
+		padding: 0.5rem 1rem 0.25rem;
+		font-size: 0.6875rem;
+		font-weight: 500;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		color: hsl(var(--color-muted-foreground));
+	}
+
+	/* Loading & Empty States */
+	.loading-state,
+	.empty-state {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.75rem;
+		padding: 2rem;
+		color: hsl(var(--color-muted-foreground));
+		font-size: 0.875rem;
+	}
+
+	.loading-spinner {
+		width: 1.25rem;
+		height: 1.25rem;
+		border: 2px solid hsl(var(--color-border));
+		border-top-color: var(--primary-color);
+		border-radius: 50%;
+		animation: spin 0.8s linear infinite;
+	}
+
+	.loading-spinner-small {
+		width: 1rem;
+		height: 1rem;
+		border: 2px solid hsl(var(--color-border));
+		border-top-color: currentColor;
+		border-radius: 50%;
+		animation: spin 0.8s linear infinite;
+	}
+
+	@keyframes spin {
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	/* Mobile: Above PillNav */
+	@media (max-width: 768px) {
+		.quick-input-bar {
+			bottom: 70px;
+			padding-bottom: 0.75rem;
+		}
+
+		.quick-actions-grid {
+			grid-template-columns: repeat(2, 1fr);
+		}
+	}
+</style>
diff --git a/packages/shared-ui/src/quick-input/index.ts b/packages/shared-ui/src/quick-input/index.ts
new file mode 100644
index 000000000..10c8b448a
--- /dev/null
+++ b/packages/shared-ui/src/quick-input/index.ts
@@ -0,0 +1,2 @@
+export { default as QuickInputBar } from './QuickInputBar.svelte';
+export type { QuickInputItem, QuickAction, CreatePreview } from './types';
diff --git a/packages/shared-ui/src/quick-input/types.ts b/packages/shared-ui/src/quick-input/types.ts
new file mode 100644
index 000000000..642a7959d
--- /dev/null
+++ b/packages/shared-ui/src/quick-input/types.ts
@@ -0,0 +1,22 @@
+export interface QuickInputItem {
+	id: string;
+	title: string;
+	subtitle?: string;
+	icon?: string;
+	imageUrl?: string;
+	isFavorite?: boolean;
+}
+
+export interface QuickAction {
+	id: string;
+	label: string;
+	href?: string;
+	icon: string;
+	shortcut?: string;
+	onclick?: () => void;
+}
+
+export interface CreatePreview {
+	title: string;
+	subtitle: string;
+}