diff --git a/apps/todo/apps/web/src/lib/components/TagStrip.svelte b/apps/todo/apps/web/src/lib/components/TagStrip.svelte
index 7485a02e2..0829dff00 100644
--- a/apps/todo/apps/web/src/lib/components/TagStrip.svelte
+++ b/apps/todo/apps/web/src/lib/components/TagStrip.svelte
@@ -1,37 +1,31 @@
 <script lang="ts">
 	import { getContext } from 'svelte';
 	import type { Tag } from '@manacore/shared-tags';
-	import { viewStore } from '$lib/stores/view.svelte';
 	import { goto } from '$app/navigation';
 	import { DotsThree, Plus, X } from '@manacore/shared-icons';
 	import TagStripModal from './TagStripModal.svelte';
 	import { t } from 'svelte-i18n';
 
 	const tagsCtx: { readonly value: Tag[] } = getContext('tags');
-
-	interface Props {
-		/** Whether the filter strip below is visible (affects vertical position) */
-		filterStripVisible?: boolean;
-	}
-
-	let { filterStripVisible = false }: Props = $props();
+	const activeTagFilter: { readonly ids: string[]; set(ids: string[]): void } =
+		getContext('activeTagFilter');
 
 	let showModal = $state(false);
 
 	function handleTagClick(tagId: string) {
-		const current = viewStore.filterLabelIds;
+		const current = activeTagFilter.ids;
 		if (current.includes(tagId)) {
-			viewStore.setFilterLabelIds(current.filter((id) => id !== tagId));
+			activeTagFilter.set(current.filter((id) => id !== tagId));
 		} else {
-			viewStore.setFilterLabelIds([...current, tagId]);
+			activeTagFilter.set([...current, tagId]);
 		}
 	}
 
 	function isTagSelected(tagId: string): boolean {
-		return viewStore.filterLabelIds.includes(tagId);
+		return activeTagFilter.ids.includes(tagId);
 	}
 
-	const hasSelectedTags = $derived(viewStore.filterLabelIds.length > 0);
+	const hasSelectedTags = $derived(activeTagFilter.ids.length > 0);
 
 	function handleOpenModal() {
 		showModal = true;
@@ -48,13 +42,13 @@
 	const hasTags = $derived(tagsCtx.value.length > 0);
 </script>
 
-<div class="tag-strip-wrapper" class:above-filter-strip={filterStripVisible}>
+<div class="tag-strip-wrapper">
 	<div class="tag-strip-container">
 		<!-- Clear Filter Button (always rendered to prevent layout shift) -->
 		<button
 			class="clear-filter-pill glass-tag"
 			class:hidden={!hasSelectedTags}
-			onclick={() => viewStore.setFilterLabelIds([])}
+			onclick={() => activeTagFilter.set([])}
 			title={$t('filters.clearFilter')}
 			disabled={!hasSelectedTags}
 		>
@@ -117,11 +111,6 @@
 		transition: bottom 0.2s ease;
 	}
 
-	/* When filter strip is also visible, stack above it */
-	.tag-strip-wrapper.above-filter-strip {
-		bottom: calc(110px + env(safe-area-inset-bottom, 0px));
-	}
-
 	.tag-strip-container {
 		display: flex;
 		align-items: center;
diff --git a/apps/todo/apps/web/src/lib/components/TaskFilters.svelte b/apps/todo/apps/web/src/lib/components/TaskFilters.svelte
deleted file mode 100644
index 2ef8ba549..000000000
--- a/apps/todo/apps/web/src/lib/components/TaskFilters.svelte
+++ /dev/null
@@ -1,630 +0,0 @@
-<script lang="ts">
-	import { goto } from '$app/navigation';
-	import type { TaskPriority } from '@todo/shared';
-	import { getContext } from 'svelte';
-	import type { Tag } from '@manacore/shared-tags';
-
-	const tagsCtx: { readonly value: Tag[] } = getContext('tags');
-	import type { SortBy, SortOrder } from '$lib/stores/view.svelte';
-	import { CaretDown, Check, CheckCircle, MagnifyingGlass, X } from '@manacore/shared-icons';
-	import { t } from 'svelte-i18n';
-
-	interface Props {
-		// Layout
-		variant: 'strip' | 'bar';
-
-		// Filter state (owned by parent)
-		selectedPriorities: TaskPriority[];
-		selectedLabelIds: string[];
-		searchQuery: string;
-
-		// Callbacks
-		onPrioritiesChange: (priorities: TaskPriority[]) => void;
-		onLabelsChange: (labelIds: string[]) => void;
-		onSearchChange: (query: string) => void;
-		onClearFilters: () => void;
-
-		// Sort (strip variant)
-		sortBy?: SortBy;
-		sortOrder?: SortOrder;
-		onSortChange?: (sortBy: SortBy) => void;
-
-		// Feature toggles
-		showSort?: boolean;
-		showSearch?: boolean;
-		showLabels?: boolean;
-		showCompleted?: boolean;
-		showTags?: boolean;
-
-		// Completed toggle
-		isCompletedVisible?: boolean;
-		onToggleCompleted?: () => void;
-	}
-
-	let {
-		variant,
-		selectedPriorities,
-		selectedLabelIds,
-		searchQuery,
-		onPrioritiesChange,
-		onLabelsChange,
-		onSearchChange,
-		onClearFilters,
-		sortBy,
-		sortOrder,
-		onSortChange,
-		showSort = false,
-		showSearch = false,
-		showLabels = false,
-		showCompleted = false,
-		showTags = false,
-		isCompletedVisible = false,
-		onToggleCompleted,
-	}: Props = $props();
-
-	let priorities = $derived([
-		{
-			value: 'urgent' as TaskPriority,
-			label: $t('priority.urgent'),
-			color: '#ef4444',
-			bgColor: 'bg-red-500',
-		},
-		{
-			value: 'high' as TaskPriority,
-			label: $t('priority.high'),
-			color: '#f97316',
-			bgColor: 'bg-orange-500',
-		},
-		{
-			value: 'medium' as TaskPriority,
-			label: $t('priority.medium'),
-			color: '#eab308',
-			bgColor: 'bg-yellow-500',
-		},
-		{
-			value: 'low' as TaskPriority,
-			label: $t('priority.low'),
-			color: '#3b82f6',
-			bgColor: 'bg-blue-500',
-		},
-	]);
-
-	let sortOptions = $derived([
-		{ id: 'dueDate' as SortBy, label: $t('filters.date') },
-		{ id: 'priority' as SortBy, label: $t('filters.priorityShort') },
-		{ id: 'title' as SortBy, label: $t('filters.name') },
-	]);
-
-	// Dropdown states
-	let showLabelsDropdown = $state(false);
-
-	let hasActiveFilters = $derived(
-		selectedPriorities.length > 0 || selectedLabelIds.length > 0 || searchQuery.trim() !== ''
-	);
-
-	function togglePriority(priority: TaskPriority) {
-		if (selectedPriorities.includes(priority)) {
-			onPrioritiesChange(selectedPriorities.filter((p) => p !== priority));
-		} else {
-			onPrioritiesChange([...selectedPriorities, priority]);
-		}
-	}
-
-	function toggleLabel(labelId: string) {
-		if (selectedLabelIds.includes(labelId)) {
-			onLabelsChange(selectedLabelIds.filter((id) => id !== labelId));
-		} else {
-			onLabelsChange([...selectedLabelIds, labelId]);
-		}
-	}
-</script>
-
-{#if variant === 'strip'}
-	<!-- ==================== STRIP VARIANT ==================== -->
-	<div class="filter-strip-wrapper">
-		<div class="filter-strip-container">
-			<!-- Clear Filter Button -->
-			<button
-				class="clear-filter-pill glass-pill"
-				class:hidden={!hasActiveFilters}
-				onclick={onClearFilters}
-				title={$t('filters.clearFilter')}
-				disabled={!hasActiveFilters}
-			>
-				<X size={16} weight="bold" />
-				<span class="pill-label">Filter</span>
-			</button>
-
-			<!-- Tag Chips -->
-			{#if showTags}
-				<button
-					class="label-pill glass-pill"
-					onclick={() => goto('/tags')}
-					title={$t('filters.manageTags')}
-				>
-					<span class="pill-label label-text">Tags:</span>
-				</button>
-				{#if tagsCtx.value.length > 0}
-					{#each tagsCtx.value as tag (tag.id)}
-						<button
-							class="tag-chip glass-pill"
-							class:selected={selectedLabelIds.includes(tag.id)}
-							onclick={() => toggleLabel(tag.id)}
-							title={tag.name}
-							style="--tag-color: {tag.color || '#6b7280'}"
-						>
-							<span class="tag-dot"></span>
-							<span class="pill-label">{tag.name}</span>
-						</button>
-					{/each}
-				{/if}
-				<span class="strip-divider"></span>
-			{/if}
-
-			<!-- Filter Label -->
-			<span class="label-pill glass-pill" role="presentation">
-				<span class="pill-label label-text">Filter:</span>
-			</span>
-
-			<!-- Priority Filter Pills -->
-			{#each priorities as priority (priority.value)}
-				<button
-					class="priority-pill glass-pill"
-					class:selected={selectedPriorities.includes(priority.value)}
-					onclick={() => togglePriority(priority.value)}
-					title={priority.label}
-					style="--priority-color: {priority.color}"
-				>
-					<span class="priority-dot"></span>
-					<span class="pill-label">{priority.label}</span>
-				</button>
-			{/each}
-
-			<!-- Sort Pills -->
-			{#if showSort && onSortChange}
-				<span class="strip-divider"></span>
-				{#each sortOptions as option (option.id)}
-					<button
-						class="sort-pill glass-pill"
-						class:active={sortBy === option.id}
-						onclick={() => onSortChange(option.id)}
-						title={$t('tags.sortBy', { values: { field: option.label } })}
-					>
-						<span class="pill-label">{option.label}</span>
-					</button>
-				{/each}
-			{/if}
-
-			<!-- Show Completed Toggle -->
-			{#if showCompleted && onToggleCompleted}
-				<button
-					class="glass-pill"
-					class:active={isCompletedVisible}
-					onclick={onToggleCompleted}
-					title={isCompletedVisible ? $t('filters.hideCompleted') : $t('filters.showCompleted')}
-				>
-					<CheckCircle size={20} class="pill-icon" />
-					<span class="pill-label">{$t('nav.completed')}</span>
-				</button>
-			{/if}
-		</div>
-	</div>
-{:else}
-	<!-- ==================== BAR VARIANT ==================== -->
-	<div class="kanban-filters glass-pill-bar rounded-2xl p-4">
-		<div class="flex flex-col gap-4">
-			<!-- Row 1: Search and Clear -->
-			{#if showSearch}
-				<div class="flex items-center gap-4">
-					<div class="relative flex-1 max-w-xs">
-						<MagnifyingGlass
-							size={16}
-							class="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
-						/>
-						<input
-							type="text"
-							value={searchQuery}
-							oninput={(e) => onSearchChange(e.currentTarget.value)}
-							placeholder={$t('filters.searchTasks')}
-							class="w-full pl-10 pr-8 py-2 text-sm bg-background border border-border rounded-lg outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary placeholder:text-muted-foreground transition-all"
-						/>
-						{#if searchQuery}
-							<button
-								class="absolute right-2 top-1/2 -translate-y-1/2 p-1 text-muted-foreground hover:text-foreground rounded-full hover:bg-muted transition-colors"
-								onclick={() => onSearchChange('')}
-							>
-								<X size={16} />
-							</button>
-						{/if}
-					</div>
-
-					{#if hasActiveFilters}
-						<button
-							class="ml-auto px-3 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-muted rounded-lg transition-colors flex items-center gap-2"
-							onclick={onClearFilters}
-						>
-							<X size={16} />
-							{$t('filters.resetFilters')}
-						</button>
-					{/if}
-				</div>
-			{/if}
-
-			<!-- Row 2: Filter Pills -->
-			<div class="flex flex-wrap items-center gap-3">
-				<!-- Priority filters -->
-				<div class="filter-group flex items-center gap-2">
-					<span class="text-xs font-medium text-muted-foreground uppercase tracking-wide"
-						>{$t('task.priority')}</span
-					>
-					<div class="flex items-center gap-1">
-						{#each priorities as priority}
-							<button
-								class="filter-pill px-3 py-1.5 text-xs font-medium rounded-full transition-all border {selectedPriorities.includes(
-									priority.value
-								)
-									? `${priority.bgColor} text-white border-transparent shadow-sm`
-									: 'bg-background border-border text-foreground hover:border-primary/50 hover:bg-muted/50'}"
-								onclick={() => togglePriority(priority.value)}
-							>
-								{priority.label}
-							</button>
-						{/each}
-					</div>
-				</div>
-
-				<!-- Labels filter -->
-				{#if showLabels}
-					<div class="h-6 w-px bg-border hidden sm:block"></div>
-
-					<div class="filter-group flex items-center gap-2 relative">
-						<span class="text-xs font-medium text-muted-foreground uppercase tracking-wide"
-							>Tags</span
-						>
-						<button
-							class="flex items-center gap-2 px-3 py-1.5 text-sm bg-background border border-border rounded-lg hover:border-primary/50 hover:bg-muted/50 transition-all"
-							onclick={() => (showLabelsDropdown = !showLabelsDropdown)}
-						>
-							{#if selectedLabelIds.length > 0}
-								<div class="flex items-center gap-1">
-									{#each selectedLabelIds.slice(0, 3) as labelId}
-										{@const label = tagsCtx.value.find((l) => l.id === labelId)}
-										{#if label}
-											<div
-												class="w-3 h-3 rounded-full ring-2 ring-background"
-												style="background-color: {label.color}"
-											></div>
-										{/if}
-									{/each}
-									{#if selectedLabelIds.length > 3}
-										<span class="text-xs text-muted-foreground">+{selectedLabelIds.length - 3}</span
-										>
-									{/if}
-								</div>
-							{:else}
-								<span class="text-muted-foreground">{$t('filters.select')}</span>
-							{/if}
-							<CaretDown
-								size={16}
-								class="text-muted-foreground transition-transform {showLabelsDropdown
-									? 'rotate-180'
-									: ''}"
-							/>
-						</button>
-
-						{#if showLabelsDropdown}
-							<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
-							<div class="fixed inset-0 z-40" onclick={() => (showLabelsDropdown = false)}></div>
-							<div
-								class="absolute top-full left-0 mt-2 z-50 min-w-[220px] bg-popover border border-border rounded-xl shadow-lg p-2 animate-in fade-in slide-in-from-top-2 duration-150"
-							>
-								{#if tagsCtx.value.length === 0}
-									<p class="text-sm text-muted-foreground p-3 text-center">
-										{$t('filters.noTagsAvailable')}
-									</p>
-								{:else}
-									<div class="max-h-[200px] overflow-y-auto">
-										{#each tagsCtx.value as label}
-											<button
-												class="w-full flex items-center gap-3 px-3 py-2 text-sm rounded-lg hover:bg-muted/50 transition-colors"
-												onclick={() => toggleLabel(label.id)}
-											>
-												<div
-													class="w-4 h-4 rounded-full flex-shrink-0 ring-2 ring-offset-2 ring-offset-popover transition-all {selectedLabelIds.includes(
-														label.id
-													)
-														? 'ring-primary'
-														: 'ring-transparent'}"
-													style="background-color: {label.color}"
-												></div>
-												<span class="flex-1 text-left truncate">{label.name}</span>
-												{#if selectedLabelIds.includes(label.id)}
-													<Check size={16} class="text-primary" />
-												{/if}
-											</button>
-										{/each}
-									</div>
-								{/if}
-							</div>
-						{/if}
-					</div>
-				{/if}
-			</div>
-		</div>
-	</div>
-{/if}
-
-<style>
-	/* ==================== STRIP VARIANT STYLES ==================== */
-	.filter-strip-wrapper {
-		position: fixed;
-		bottom: calc(70px + env(safe-area-inset-bottom, 0px));
-		left: 0;
-		right: 0;
-		z-index: 49;
-		display: flex;
-		flex-direction: column;
-		align-items: stretch;
-		pointer-events: none;
-		transition: bottom 0.2s ease;
-	}
-
-	.filter-strip-container {
-		display: flex;
-		align-items: center;
-		gap: 0.75rem;
-		background: transparent;
-		pointer-events: auto;
-		width: fit-content;
-		max-width: 100%;
-		margin-left: auto;
-		margin-right: auto;
-		padding: 0.5rem 2rem;
-		overflow-x: auto;
-		scrollbar-width: none;
-		-ms-overflow-style: none;
-	}
-
-	.filter-strip-container::-webkit-scrollbar {
-		display: none;
-	}
-
-	/* Glass pill styling */
-	.glass-pill {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-		padding: 0.5rem 1rem;
-		border-radius: 9999px;
-		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);
-		cursor: pointer;
-		flex-shrink: 0;
-		transition: all 0.15s ease;
-	}
-
-	:global(.dark) .glass-pill {
-		background: rgba(255, 255, 255, 0.12);
-		border: 1px solid rgba(255, 255, 255, 0.15);
-	}
-
-	.glass-pill:hover {
-		transform: scale(1.05);
-		background: rgba(255, 255, 255, 0.95);
-		border-color: rgba(0, 0, 0, 0.15);
-		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);
-	}
-
-	.glass-pill:active {
-		transform: scale(0.98);
-	}
-
-	.glass-pill.active {
-		background: rgba(139, 92, 246, 0.15);
-		border-color: rgba(139, 92, 246, 0.3);
-		color: #8b5cf6;
-	}
-
-	:global(.dark) .glass-pill.active {
-		background: rgba(139, 92, 246, 0.25);
-		border-color: rgba(139, 92, 246, 0.4);
-	}
-
-	.pill-icon {
-		width: 18px;
-		height: 18px;
-		flex-shrink: 0;
-	}
-
-	.pill-label {
-		font-size: 0.9375rem;
-		font-weight: 500;
-		color: #374151;
-		white-space: nowrap;
-	}
-
-	:global(.dark) .pill-label {
-		color: #f3f4f6;
-	}
-
-	.glass-pill.active .pill-label {
-		color: #8b5cf6;
-	}
-
-	/* Label pill (section header) */
-	.label-pill {
-		padding: 0.5rem 0.75rem;
-		cursor: pointer;
-	}
-
-	.label-pill .label-text {
-		font-size: 0.8125rem;
-		font-weight: 600;
-		text-transform: uppercase;
-		letter-spacing: 0.03em;
-		color: #6b7280;
-	}
-
-	:global(.dark) .label-pill .label-text {
-		color: #9ca3af;
-	}
-
-	.label-pill:hover .label-text {
-		color: #8b5cf6;
-	}
-
-	/* Tag chips */
-	.tag-chip .tag-dot {
-		width: 10px;
-		height: 10px;
-		border-radius: 50%;
-		background-color: var(--tag-color);
-		flex-shrink: 0;
-	}
-
-	.tag-chip.selected {
-		background: var(--tag-color) !important;
-		border-color: var(--tag-color) !important;
-	}
-
-	.tag-chip.selected .tag-dot {
-		background-color: white;
-	}
-
-	.tag-chip.selected .pill-label {
-		color: white;
-	}
-
-	.strip-divider {
-		width: 1px;
-		height: 24px;
-		background: rgba(0, 0, 0, 0.1);
-		flex-shrink: 0;
-	}
-
-	:global(.dark) .strip-divider {
-		background: rgba(255, 255, 255, 0.15);
-	}
-
-	/* Priority pills */
-	.priority-pill.selected {
-		background: var(--priority-color) !important;
-		border-color: var(--priority-color) !important;
-	}
-
-	.priority-pill.selected .priority-dot {
-		background-color: white;
-	}
-
-	.priority-pill.selected .pill-label {
-		color: white;
-	}
-
-	.priority-dot {
-		width: 10px;
-		height: 10px;
-		border-radius: 50%;
-		background-color: var(--priority-color);
-		flex-shrink: 0;
-	}
-
-	/* Clear filter pill */
-	.clear-filter-pill {
-		color: #ef4444;
-		background: rgba(239, 68, 68, 0.1) !important;
-		border-color: rgba(239, 68, 68, 0.3) !important;
-	}
-
-	.clear-filter-pill .pill-label {
-		color: #ef4444;
-		font-weight: 600;
-	}
-
-	:global(.dark) .clear-filter-pill {
-		color: #f87171;
-		background: rgba(239, 68, 68, 0.15) !important;
-		border-color: rgba(239, 68, 68, 0.3) !important;
-	}
-
-	:global(.dark) .clear-filter-pill .pill-label {
-		color: #f87171;
-	}
-
-	.clear-filter-pill:hover:not(.hidden) {
-		background: rgba(239, 68, 68, 0.2) !important;
-		border-color: rgba(239, 68, 68, 0.5) !important;
-	}
-
-	.clear-filter-pill.hidden {
-		visibility: hidden;
-		pointer-events: none;
-	}
-
-	/* Responsive strip */
-	@media (max-width: 640px) {
-		.filter-strip-wrapper {
-			left: 0;
-			right: 0;
-		}
-
-		.filter-strip-container {
-			padding: 0.5rem 1rem;
-		}
-
-		.pill-label {
-			font-size: 0.875rem;
-		}
-	}
-
-	/* ==================== BAR VARIANT STYLES ==================== */
-	.glass-pill-bar {
-		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-bar {
-		background: rgba(255, 255, 255, 0.12);
-		border: 1px solid rgba(255, 255, 255, 0.15);
-	}
-
-	/* Animation utilities */
-	.animate-in {
-		animation: animateIn 0.15s ease-out;
-	}
-
-	.fade-in {
-		--tw-enter-opacity: 0;
-	}
-
-	.slide-in-from-top-2 {
-		--tw-enter-translate-y: -0.5rem;
-	}
-
-	@keyframes animateIn {
-		from {
-			opacity: var(--tw-enter-opacity, 1);
-			transform: translateY(var(--tw-enter-translate-y, 0));
-		}
-		to {
-			opacity: 1;
-			transform: translateY(0);
-		}
-	}
-</style>
diff --git a/apps/todo/apps/web/src/lib/components/board-views/BoardViewRenderer.svelte b/apps/todo/apps/web/src/lib/components/board-views/BoardViewRenderer.svelte
index 820f4b9a0..5132687d4 100644
--- a/apps/todo/apps/web/src/lib/components/board-views/BoardViewRenderer.svelte
+++ b/apps/todo/apps/web/src/lib/components/board-views/BoardViewRenderer.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getContext, type Snippet } from 'svelte';
+	import { getContext, hasContext, type Snippet } from 'svelte';
 	import type { Task } from '@todo/shared';
 	import type { LocalBoardView } from '$lib/data/local-store';
 	import { groupTasksByView, getDropActionUpdate } from '$lib/data/view-grouping';
@@ -37,8 +37,19 @@
 	// Get tasks from context (set by layout)
 	const tasksCtx: { readonly value: Task[] } = getContext('tasks');
 
-	// Group tasks by the current view configuration
-	let columns = $derived(groupTasksByView(view, tasksCtx.value));
+	// Active tag filter (set by TagStrip via layout context)
+	const activeTagFilter: { readonly ids: string[] } | null = hasContext('activeTagFilter')
+		? getContext('activeTagFilter')
+		: null;
+
+	// Filter tasks by selected tags, then group by view configuration
+	let filteredTasks = $derived.by(() => {
+		const tagIds = activeTagFilter?.ids ?? [];
+		if (tagIds.length === 0) return tasksCtx.value;
+		return tasksCtx.value.filter((t) => t.labels?.some((l) => tagIds.includes(l.id)));
+	});
+
+	let columns = $derived(groupTasksByView(view, filteredTasks));
 
 	// ─── Task Callbacks ──────────────────────────────────────
 
diff --git a/apps/todo/apps/web/src/lib/stores/view.svelte.ts b/apps/todo/apps/web/src/lib/stores/view.svelte.ts
index 58b5cafbe..ff579005d 100644
--- a/apps/todo/apps/web/src/lib/stores/view.svelte.ts
+++ b/apps/todo/apps/web/src/lib/stores/view.svelte.ts
@@ -2,7 +2,6 @@
  * View Store - Manages current view state using Svelte 5 runes
  */
 
-import type { TaskPriority } from '@todo/shared';
 import { TodoEvents } from '@manacore/shared-utils/analytics';
 
 export type ViewType = 'inbox' | 'today' | 'upcoming' | 'label' | 'completed' | 'search';
@@ -17,11 +16,6 @@ let sortBy = $state<SortBy>('order');
 let sortOrder = $state<SortOrder>('asc');
 let showCompleted = $state(false);
 
-// Filter state (used by TaskFilters strip in list view)
-let filterPriorities = $state<TaskPriority[]>([]);
-let filterLabelIds = $state<string[]>([]);
-let filterSearchQuery = $state('');
-
 export const viewStore = {
 	// Getters
 	get currentView() {
@@ -42,15 +36,6 @@ export const viewStore = {
 	get showCompleted() {
 		return showCompleted;
 	},
-	get filterPriorities() {
-		return filterPriorities;
-	},
-	get filterLabelIds() {
-		return filterLabelIds;
-	},
-	get filterSearchQuery() {
-		return filterSearchQuery;
-	},
 
 	/**
 	 * Set current view to inbox
@@ -141,39 +126,6 @@ export const viewStore = {
 		showCompleted = !showCompleted;
 	},
 
-	/**
-	 * Set filter priorities
-	 */
-	setFilterPriorities(priorities: TaskPriority[]) {
-		filterPriorities = priorities;
-		if (priorities.length > 0) TodoEvents.filterUsed('priority');
-	},
-
-	/**
-	 * Set filter label IDs
-	 */
-	setFilterLabelIds(ids: string[]) {
-		filterLabelIds = ids;
-		if (ids.length > 0) TodoEvents.filterUsed('label');
-	},
-
-	/**
-	 * Set filter search query
-	 */
-	setFilterSearchQuery(query: string) {
-		filterSearchQuery = query;
-		if (query.trim()) TodoEvents.filterUsed('search');
-	},
-
-	/**
-	 * Clear all filters
-	 */
-	clearFilters() {
-		filterPriorities = [];
-		filterLabelIds = [];
-		filterSearchQuery = '';
-	},
-
 	/**
 	 * Reset to default state
 	 */
@@ -184,8 +136,5 @@ export const viewStore = {
 		sortBy = 'order';
 		sortOrder = 'asc';
 		showCompleted = false;
-		filterPriorities = [];
-		filterLabelIds = [];
-		filterSearchQuery = '';
 	},
 };
diff --git a/apps/todo/apps/web/src/lib/stores/view.test.ts b/apps/todo/apps/web/src/lib/stores/view.test.ts
index 051820ec9..f635532c6 100644
--- a/apps/todo/apps/web/src/lib/stores/view.test.ts
+++ b/apps/todo/apps/web/src/lib/stores/view.test.ts
@@ -1,93 +1,45 @@
 import { describe, it, expect, beforeEach } from 'vitest';
 import { viewStore } from './view.svelte';
 
-describe('viewStore filter methods', () => {
+describe('viewStore', () => {
 	beforeEach(() => {
 		viewStore.reset();
 	});
 
-	// Filter state defaults
-	describe('initial state', () => {
-		it('has empty filter priorities', () => {
-			expect(viewStore.filterPriorities).toEqual([]);
-		});
-
-		it('has empty filter labels', () => {
-			expect(viewStore.filterLabelIds).toEqual([]);
-		});
-
-		it('has empty filter search query', () => {
-			expect(viewStore.filterSearchQuery).toBe('');
-		});
-	});
-
-	// Setters
-	describe('setFilterPriorities', () => {
-		it('sets priorities', () => {
-			viewStore.setFilterPriorities(['high', 'urgent']);
-			expect(viewStore.filterPriorities).toEqual(['high', 'urgent']);
-		});
-
-		it('can set to empty array', () => {
-			viewStore.setFilterPriorities(['high']);
-			viewStore.setFilterPriorities([]);
-			expect(viewStore.filterPriorities).toEqual([]);
-		});
-	});
-
-	describe('setFilterLabelIds', () => {
-		it('sets label IDs', () => {
-			viewStore.setFilterLabelIds(['label-1', 'label-2']);
-			expect(viewStore.filterLabelIds).toEqual(['label-1', 'label-2']);
-		});
-	});
-
-	describe('setFilterSearchQuery', () => {
-		it('sets search query', () => {
-			viewStore.setFilterSearchQuery('hello');
-			expect(viewStore.filterSearchQuery).toBe('hello');
-		});
-	});
-
-	// clearFilters
-	describe('clearFilters', () => {
-		it('resets all filter state', () => {
-			viewStore.setFilterPriorities(['urgent']);
-			viewStore.setFilterLabelIds(['label-1']);
-			viewStore.setFilterSearchQuery('test');
-
-			viewStore.clearFilters();
-
-			expect(viewStore.filterPriorities).toEqual([]);
-			expect(viewStore.filterLabelIds).toEqual([]);
-			expect(viewStore.filterSearchQuery).toBe('');
-		});
-
-		it('does not affect non-filter state', () => {
-			viewStore.setSort('priority', 'desc');
-			viewStore.toggleShowCompleted();
-			viewStore.setFilterPriorities(['high']);
-
-			viewStore.clearFilters();
-
-			expect(viewStore.sortBy).toBe('priority');
-			expect(viewStore.sortOrder).toBe('desc');
-			expect(viewStore.showCompleted).toBe(true);
-		});
-	});
-
-	// reset
 	describe('reset', () => {
-		it('resets filter state along with everything else', () => {
-			viewStore.setFilterPriorities(['urgent']);
+		it('resets all state to defaults', () => {
 			viewStore.setSort('title', 'desc');
+			viewStore.toggleShowCompleted();
 
 			viewStore.reset();
 
-			expect(viewStore.filterPriorities).toEqual([]);
 			expect(viewStore.sortBy).toBe('order');
 			expect(viewStore.sortOrder).toBe('asc');
+			expect(viewStore.showCompleted).toBe(false);
 			expect(viewStore.currentView).toBe('inbox');
 		});
 	});
+
+	describe('sort', () => {
+		it('sets sort options', () => {
+			viewStore.setSort('priority', 'desc');
+			expect(viewStore.sortBy).toBe('priority');
+			expect(viewStore.sortOrder).toBe('desc');
+		});
+
+		it('toggles sort order', () => {
+			viewStore.toggleSortOrder();
+			expect(viewStore.sortOrder).toBe('desc');
+			viewStore.toggleSortOrder();
+			expect(viewStore.sortOrder).toBe('asc');
+		});
+	});
+
+	describe('showCompleted', () => {
+		it('toggles show completed', () => {
+			expect(viewStore.showCompleted).toBe(false);
+			viewStore.toggleShowCompleted();
+			expect(viewStore.showCompleted).toBe(true);
+		});
+	});
 });
diff --git a/apps/todo/apps/web/src/lib/utils/task-filters.test.ts b/apps/todo/apps/web/src/lib/utils/task-filters.test.ts
deleted file mode 100644
index c683c9e36..000000000
--- a/apps/todo/apps/web/src/lib/utils/task-filters.test.ts
+++ /dev/null
@@ -1,188 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import type { Task, Label } from '@todo/shared';
-import { applyTaskFilters, type TaskFilterCriteria } from './task-filters';
-
-const now = new Date().toISOString();
-
-function makeLabel(overrides: Partial<Label>): Label {
-	return {
-		id: 'l',
-		userId: 'user-1',
-		name: 'Label',
-		color: '#000',
-		createdAt: now,
-		updatedAt: now,
-		...overrides,
-	};
-}
-
-// Helper to create a minimal task for testing
-function makeTask(overrides: Partial<Task> = {}): Task {
-	return {
-		id: 'task-1',
-		userId: 'user-1',
-		title: 'Test Task',
-		priority: 'medium',
-		status: 'pending',
-		isCompleted: false,
-		order: 0,
-		createdAt: new Date().toISOString(),
-		updatedAt: new Date().toISOString(),
-		...overrides,
-	};
-}
-
-const emptyFilters: TaskFilterCriteria = {
-	priorities: [],
-	labelIds: [],
-	searchQuery: '',
-};
-
-describe('applyTaskFilters', () => {
-	const tasks: Task[] = [
-		makeTask({ id: '1', title: 'Buy groceries', priority: 'low' }),
-		makeTask({
-			id: '2',
-			title: 'Urgent meeting',
-			priority: 'urgent',
-			labels: [makeLabel({ id: 'label-1', name: 'Work', color: '#f00' })],
-		}),
-		makeTask({
-			id: '3',
-			title: 'Write report',
-			priority: 'high',
-			description: 'Quarterly financial report',
-			labels: [
-				makeLabel({ id: 'label-1', name: 'Work', color: '#f00' }),
-				makeLabel({ id: 'label-2', name: 'Important', color: '#0f0' }),
-			],
-		}),
-		makeTask({ id: '4', title: 'Relax', priority: 'low' }),
-	];
-
-	it('returns all tasks when no filters are active', () => {
-		const result = applyTaskFilters(tasks, emptyFilters);
-		expect(result).toHaveLength(4);
-	});
-
-	it('returns empty array for empty input', () => {
-		const result = applyTaskFilters([], emptyFilters);
-		expect(result).toEqual([]);
-	});
-
-	// Priority filtering
-	describe('priority filter', () => {
-		it('filters by single priority', () => {
-			const result = applyTaskFilters(tasks, { ...emptyFilters, priorities: ['urgent'] });
-			expect(result).toHaveLength(1);
-			expect(result[0].id).toBe('2');
-		});
-
-		it('filters by multiple priorities', () => {
-			const result = applyTaskFilters(tasks, {
-				...emptyFilters,
-				priorities: ['low', 'high'],
-			});
-			expect(result).toHaveLength(3);
-			expect(result.map((t) => t.id).sort()).toEqual(['1', '3', '4']);
-		});
-
-		it('returns nothing when priority matches no tasks', () => {
-			const result = applyTaskFilters(tasks, { ...emptyFilters, priorities: ['medium'] });
-			expect(result).toHaveLength(0);
-		});
-	});
-
-	// Label filtering
-	describe('label filter', () => {
-		it('filters by single label', () => {
-			const result = applyTaskFilters(tasks, { ...emptyFilters, labelIds: ['label-1'] });
-			expect(result).toHaveLength(2);
-			expect(result.map((t) => t.id).sort()).toEqual(['2', '3']);
-		});
-
-		it('filters by label that only one task has', () => {
-			const result = applyTaskFilters(tasks, { ...emptyFilters, labelIds: ['label-2'] });
-			expect(result).toHaveLength(1);
-			expect(result[0].id).toBe('3');
-		});
-
-		it('matches tasks having any of the filter labels (OR logic)', () => {
-			const result = applyTaskFilters(tasks, {
-				...emptyFilters,
-				labelIds: ['label-1', 'label-2'],
-			});
-			expect(result).toHaveLength(2);
-		});
-
-		it('excludes tasks with no labels', () => {
-			const result = applyTaskFilters(tasks, { ...emptyFilters, labelIds: ['label-1'] });
-			expect(result.find((t) => t.id === '1')).toBeUndefined();
-			expect(result.find((t) => t.id === '4')).toBeUndefined();
-		});
-	});
-
-	// Search query filtering
-	describe('search query filter', () => {
-		it('filters by title match (case insensitive)', () => {
-			const result = applyTaskFilters(tasks, { ...emptyFilters, searchQuery: 'urgent' });
-			expect(result).toHaveLength(1);
-			expect(result[0].id).toBe('2');
-		});
-
-		it('filters by description match', () => {
-			const result = applyTaskFilters(tasks, { ...emptyFilters, searchQuery: 'quarterly' });
-			expect(result).toHaveLength(1);
-			expect(result[0].id).toBe('3');
-		});
-
-		it('is case insensitive', () => {
-			const result = applyTaskFilters(tasks, { ...emptyFilters, searchQuery: 'BUY' });
-			expect(result).toHaveLength(1);
-			expect(result[0].id).toBe('1');
-		});
-
-		it('ignores whitespace-only query', () => {
-			const result = applyTaskFilters(tasks, { ...emptyFilters, searchQuery: '   ' });
-			expect(result).toHaveLength(4);
-		});
-
-		it('matches partial strings', () => {
-			const result = applyTaskFilters(tasks, { ...emptyFilters, searchQuery: 'rep' });
-			expect(result).toHaveLength(1);
-			expect(result[0].id).toBe('3');
-		});
-	});
-
-	// Combined filters
-	describe('combined filters', () => {
-		it('applies priority + label filter together', () => {
-			const result = applyTaskFilters(tasks, {
-				...emptyFilters,
-				priorities: ['high', 'urgent'],
-				labelIds: ['label-1'],
-			});
-			expect(result).toHaveLength(2);
-			expect(result.map((t) => t.id).sort()).toEqual(['2', '3']);
-		});
-
-		it('applies all filters together', () => {
-			const result = applyTaskFilters(tasks, {
-				priorities: ['high'],
-				labelIds: ['label-1'],
-				searchQuery: 'report',
-			});
-			expect(result).toHaveLength(1);
-			expect(result[0].id).toBe('3');
-		});
-
-		it('returns empty when combined filters contradict', () => {
-			const result = applyTaskFilters(tasks, {
-				priorities: ['low'],
-				labelIds: ['label-1'], // tasks 1,4 are low but have no label-1
-				searchQuery: '',
-			});
-			expect(result).toHaveLength(0);
-		});
-	});
-});
diff --git a/apps/todo/apps/web/src/lib/utils/task-filters.ts b/apps/todo/apps/web/src/lib/utils/task-filters.ts
deleted file mode 100644
index 5422a7359..000000000
--- a/apps/todo/apps/web/src/lib/utils/task-filters.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import type { Task, TaskPriority } from '@todo/shared';
-
-export interface TaskFilterCriteria {
-	priorities: TaskPriority[];
-	labelIds: string[];
-	searchQuery: string;
-}
-
-/**
- * Apply filter criteria to a list of tasks.
- * Pure function — no store dependency — easy to test.
- */
-export function applyTaskFilters(tasks: Task[], filters: TaskFilterCriteria): Task[] {
-	let filtered = tasks;
-
-	if (filters.priorities.length > 0) {
-		filtered = filtered.filter((t) => filters.priorities.includes(t.priority));
-	}
-
-	if (filters.labelIds.length > 0) {
-		filtered = filtered.filter((t) => t.labels?.some((l) => filters.labelIds.includes(l.id)));
-	}
-
-	if (filters.searchQuery.trim()) {
-		const q = filters.searchQuery.toLowerCase();
-		filtered = filtered.filter(
-			(t) => t.title.toLowerCase().includes(q) || t.description?.toLowerCase().includes(q)
-		);
-	}
-
-	return filtered;
-}
diff --git a/apps/todo/apps/web/src/routes/(app)/+layout.svelte b/apps/todo/apps/web/src/routes/(app)/+layout.svelte
index 5fc0da510..0c462d381 100644
--- a/apps/todo/apps/web/src/routes/(app)/+layout.svelte
+++ b/apps/todo/apps/web/src/routes/(app)/+layout.svelte
@@ -28,9 +28,7 @@
 	} from '@manacore/shared-stores';
 	import { linkLocalStore, linkMutations } from '@manacore/shared-links';
 	import { theme } from '$lib/stores/theme';
-	import TaskFilters from '$lib/components/TaskFilters.svelte';
-	import { viewStore, type SortBy } from '$lib/stores/view.svelte';
-	import type { TaskPriority } from '@todo/shared';
+	import TagStrip from '$lib/components/TagStrip.svelte';
 	import {
 		THEME_DEFINITIONS,
 		DEFAULT_THEME_VARIANTS,
@@ -67,9 +65,21 @@
 	// Use first board view as the single active view
 	let activeView = $derived(boardViews.value[0] ?? null);
 
+	// ─── Active Tag Filter (shared between TagStrip + BoardViewRenderer) ───
+	let activeTagFilterIds = $state<string[]>([]);
+	const activeTagFilter = {
+		get ids() {
+			return activeTagFilterIds;
+		},
+		set(ids: string[]) {
+			activeTagFilterIds = ids;
+		},
+	};
+
 	// Provide data to child components via Svelte context
 	setContext('tasks', allTasks);
 	setContext('tags', allTags);
+	setContext('activeTagFilter', activeTagFilter);
 	setContext('activeView', {
 		get value() {
 			return activeView;
@@ -224,21 +234,21 @@
 	// User email for user dropdown — empty string for guests so PillNav shows login button
 	let userEmail = $derived(authStore.isAuthenticated ? authStore.user?.email || 'Menü' : '');
 
-	// Toggle FilterStrip visibility
-	function handleFilterToggle() {
+	// Toggle TagStrip visibility
+	function handleTagStripToggle() {
 		todoSettings.toggleFilterStrip();
 	}
 
 	// Keep navRoutes for keyboard shortcuts (Ctrl+1-3)
 	const viewRoutes: Record<string, string> = { fokus: '/' };
 
-	// Filter, Tags, and Layout stay as standalone pills (toggle behavior, not navigation)
+	// Tags and Layout stay as standalone pills (toggle behavior, not navigation)
 	let baseNavItems = $derived<PillNavItem[]>([
 		{
 			href: '/',
-			label: 'Filter',
-			icon: 'filter',
-			onClick: handleFilterToggle,
+			label: 'Tags',
+			icon: 'tag',
+			onClick: handleTagStripToggle,
 			active: isFilterStripVisible,
 		},
 		...($page.url.pathname === '/' || $page.url.pathname === ''
@@ -460,25 +470,9 @@
 						{spotlightActions}
 					/>
 
-					<!-- Unified filter strip (tags + priorities + sort, toggled via Filter pill) -->
+					<!-- Tag strip (toggled via Tags pill) -->
 					{#if isFilterStripVisible}
-						<TaskFilters
-							variant="strip"
-							selectedPriorities={viewStore.filterPriorities}
-							selectedLabelIds={viewStore.filterLabelIds}
-							searchQuery={viewStore.filterSearchQuery}
-							onPrioritiesChange={(p: TaskPriority[]) => viewStore.setFilterPriorities(p)}
-							onLabelsChange={(ids: string[]) => viewStore.setFilterLabelIds(ids)}
-							onSearchChange={(q: string) => viewStore.setFilterSearchQuery(q)}
-							onClearFilters={() => viewStore.clearFilters()}
-							sortBy={viewStore.sortBy}
-							onSortChange={(s: SortBy) => viewStore.setSort(s, viewStore.sortOrder)}
-							showSort={true}
-							showCompleted={true}
-							showTags={true}
-							isCompletedVisible={viewStore.showCompleted}
-							onToggleCompleted={() => viewStore.toggleShowCompleted()}
-						/>
+						<TagStrip />
 					{/if}
 				{/if}