diff --git a/apps/mana/apps/web/src/lib/modules/cards/ListView.svelte b/apps/mana/apps/web/src/lib/modules/cards/ListView.svelte
index 33549ba30..a5c5cb3e0 100644
--- a/apps/mana/apps/web/src/lib/modules/cards/ListView.svelte
+++ b/apps/mana/apps/web/src/lib/modules/cards/ListView.svelte
@@ -3,41 +3,28 @@
   Deck list with card counts and study info.
 -->
 <script lang="ts">
-	import { liveQuery } from 'dexie';
+	import { useLiveQueryWithDefault } from '@mana/local-store/svelte';
 	import { db } from '$lib/data/database';
+	import { BaseListView } from '@mana/shared-ui';
 	import type { LocalDeck, LocalCard } from './types';
 	import type { ViewProps } from '$lib/app-registry';
 
-	let { navigate, goBack, params }: ViewProps = $props();
+	let { navigate }: ViewProps = $props();
 
-	let decks = $state<LocalDeck[]>([]);
-	let cards = $state<LocalCard[]>([]);
+	const decksQuery = useLiveQueryWithDefault(async () => {
+		const all = await db.table<LocalDeck>('decks').toArray();
+		return all.filter((d) => !d.deletedAt);
+	}, [] as LocalDeck[]);
 
-	$effect(() => {
-		const sub = liveQuery(async () => {
-			return db
-				.table<LocalDeck>('decks')
-				.toArray()
-				.then((all) => all.filter((d) => !d.deletedAt));
-		}).subscribe((val) => {
-			decks = val ?? [];
-		});
-		return () => sub.unsubscribe();
-	});
+	const cardsQuery = useLiveQueryWithDefault(async () => {
+		const all = await db.table<LocalCard>('cards').toArray();
+		return all.filter((c) => !c.deletedAt);
+	}, [] as LocalCard[]);
 
-	$effect(() => {
-		const sub = liveQuery(async () => {
-			return db
-				.table<LocalCard>('cards')
-				.toArray()
-				.then((all) => all.filter((c) => !c.deletedAt));
-		}).subscribe((val) => {
-			cards = val ?? [];
-		});
-		return () => sub.unsubscribe();
-	});
+	const decks = $derived(decksQuery.value);
+	const cards = $derived(cardsQuery.value);
 
-	const dueForReview = $derived(() => {
+	const dueForReview = $derived.by(() => {
 		const now = new Date().toISOString();
 		return cards.filter((c) => c.nextReview && c.nextReview <= now).length;
 	});
@@ -47,36 +34,30 @@
 	}
 </script>
 
-<div class="flex h-full flex-col gap-3 p-3 sm:p-4">
-	<div class="flex items-center justify-between">
-		<p class="text-xs text-white/40">{decks.length} Decks</p>
-		<p class="text-xs text-amber-400/70">{dueForReview()} fällig</p>
-	</div>
+<BaseListView items={decks} getKey={(d) => d.id} emptyTitle="Keine Decks">
+	{#snippet header()}
+		<span class="flex-1">{decks.length} Decks</span>
+		<span class="text-amber-400/70">{dueForReview} fällig</span>
+	{/snippet}
 
-	<div class="flex-1 overflow-auto">
-		{#each decks as deck (deck.id)}
-			<button
-				onclick={() =>
-					navigate('detail', {
-						deckId: deck.id,
-						_siblingIds: decks.map((d) => d.id),
-						_siblingKey: 'deckId',
-					})}
-				class="mb-2 w-full rounded-md border border-white/10 px-3 py-2.5 text-left transition-colors hover:bg-white/5 min-h-[44px]"
-			>
-				<div class="flex items-center gap-2">
-					<div class="h-3 w-3 rounded" style="background: {deck.color}"></div>
-					<p class="flex-1 truncate text-sm font-medium text-white/80">{deck.name}</p>
-					<span class="text-xs text-white/40">{cardsInDeck(deck.id)}</span>
-				</div>
-				{#if deck.description}
-					<p class="mt-1 truncate text-xs text-white/40">{deck.description}</p>
-				{/if}
-			</button>
-		{/each}
-
-		{#if decks.length === 0}
-			<p class="py-8 text-center text-sm text-white/30">Keine Decks</p>
-		{/if}
-	</div>
-</div>
+	{#snippet item(deck)}
+		<button
+			onclick={() =>
+				navigate('detail', {
+					deckId: deck.id,
+					_siblingIds: decks.map((d) => d.id),
+					_siblingKey: 'deckId',
+				})}
+			class="mb-2 w-full rounded-md border border-white/10 px-3 py-2.5 text-left transition-colors hover:bg-white/5 min-h-[44px]"
+		>
+			<div class="flex items-center gap-2">
+				<div class="h-3 w-3 rounded" style="background: {deck.color}"></div>
+				<p class="flex-1 truncate text-sm font-medium text-white/80">{deck.name}</p>
+				<span class="text-xs text-white/40">{cardsInDeck(deck.id)}</span>
+			</div>
+			{#if deck.description}
+				<p class="mt-1 truncate text-xs text-white/40">{deck.description}</p>
+			{/if}
+		</button>
+	{/snippet}
+</BaseListView>
diff --git a/apps/mana/apps/web/src/lib/modules/cards/components/DeckCard.svelte b/apps/mana/apps/web/src/lib/modules/cards/components/DeckCard.svelte
index 2c7f6c875..1bbf8c538 100644
--- a/apps/mana/apps/web/src/lib/modules/cards/components/DeckCard.svelte
+++ b/apps/mana/apps/web/src/lib/modules/cards/components/DeckCard.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { Card } from '@mana/shared-ui';
 	import type { Deck } from '../types';
 
 	interface Props {
@@ -17,10 +18,7 @@
 	}
 </script>
 
-<button
-	class="w-full rounded-xl border border-border bg-card p-4 text-left transition-all hover:border-primary/50 hover:shadow-lg"
-	{onclick}
->
+<Card variant="outlined" interactive {onclick} fullWidth class="text-left">
 	<div class="space-y-3">
 		<!-- Color strip -->
 		<div class="h-1 w-12 rounded-full" style="background: {deck.color}"></div>
@@ -43,11 +41,11 @@
 				<span>{deck.cardCount || 0} Karten</span>
 				{#if deck.isPublic}
 					<span class="rounded-full bg-primary/10 px-2 py-0.5 text-xs text-primary">
-						Offentlich
+						Öffentlich
 					</span>
 				{/if}
 			</div>
 			<span>{formatDate(deck.updatedAt)}</span>
 		</div>
 	</div>
-</button>
+</Card>
diff --git a/apps/mana/apps/web/src/lib/modules/chat/ListView.svelte b/apps/mana/apps/web/src/lib/modules/chat/ListView.svelte
index 20c4d532a..747a409b5 100644
--- a/apps/mana/apps/web/src/lib/modules/chat/ListView.svelte
+++ b/apps/mana/apps/web/src/lib/modules/chat/ListView.svelte
@@ -3,40 +3,31 @@
   Recent conversations list.
 -->
 <script lang="ts">
-	import { liveQuery } from 'dexie';
+	import { useLiveQueryWithDefault } from '@mana/local-store/svelte';
 	import { db } from '$lib/data/database';
+	import { BaseListView } from '@mana/shared-ui';
 	import type { LocalConversation, LocalMessage } from './types';
 
-	let conversations = $state<LocalConversation[]>([]);
-	let lastMessages = $state<Map<string, LocalMessage>>(new Map());
+	const conversationsQuery = useLiveQueryWithDefault(async () => {
+		const convs = await db.table<LocalConversation>('conversations').toArray();
+		return convs.filter((c) => !c.deletedAt && !c.isArchived);
+	}, [] as LocalConversation[]);
 
-	$effect(() => {
-		const sub = liveQuery(async () => {
-			const convs = await db.table<LocalConversation>('conversations').toArray();
-			return convs.filter((c) => !c.deletedAt && !c.isArchived);
-		}).subscribe((val) => {
-			conversations = val ?? [];
-		});
-		return () => sub.unsubscribe();
-	});
-
-	$effect(() => {
-		const sub = liveQuery(async () => {
-			const msgs = await db.table<LocalMessage>('messages').toArray();
-			const map = new Map<string, LocalMessage>();
-			for (const msg of msgs) {
-				if (msg.deletedAt) continue;
-				const existing = map.get(msg.conversationId);
-				if (!existing || (msg.createdAt ?? '') > (existing.createdAt ?? '')) {
-					map.set(msg.conversationId, msg);
-				}
+	const lastMessagesQuery = useLiveQueryWithDefault(async () => {
+		const msgs = await db.table<LocalMessage>('messages').toArray();
+		const map = new Map<string, LocalMessage>();
+		for (const msg of msgs) {
+			if (msg.deletedAt) continue;
+			const existing = map.get(msg.conversationId);
+			if (!existing || (msg.createdAt ?? '') > (existing.createdAt ?? '')) {
+				map.set(msg.conversationId, msg);
 			}
-			return map;
-		}).subscribe((val) => {
-			lastMessages = val ?? new Map();
-		});
-		return () => sub.unsubscribe();
-	});
+		}
+		return map;
+	}, new Map<string, LocalMessage>());
+
+	const conversations = $derived(conversationsQuery.value);
+	const lastMessages = $derived(lastMessagesQuery.value);
 
 	const sorted = $derived(
 		[...conversations].sort((a, b) => (b.updatedAt ?? '').localeCompare(a.updatedAt ?? ''))
@@ -47,31 +38,27 @@
 	}
 </script>
 
-<div class="flex h-full flex-col gap-3 p-3 sm:p-4">
-	<p class="text-xs text-white/40">{conversations.length} Unterhaltungen</p>
+<BaseListView items={sorted} getKey={(c) => c.id} emptyTitle="Keine Unterhaltungen">
+	{#snippet header()}
+		<span>{conversations.length} Unterhaltungen</span>
+	{/snippet}
 
-	<div class="flex-1 overflow-auto">
-		{#each sorted as conv (conv.id)}
-			{@const lastMsg = lastMessages.get(conv.id)}
-			<div class="mb-1 min-h-[44px] rounded-md px-3 py-3 transition-colors hover:bg-white/5">
-				<div class="flex items-center justify-between">
-					<p class="truncate text-sm font-medium text-white/80">
-						{conv.title || 'Neue Unterhaltung'}
-					</p>
-					{#if conv.isPinned}
-						<span class="text-[10px] text-white/30">&#128204;</span>
-					{/if}
-				</div>
-				{#if lastMsg}
-					<p class="mt-0.5 truncate text-xs text-white/40">
-						{lastMsg.sender === 'user' ? 'Du: ' : ''}{truncate(lastMsg.messageText)}
-					</p>
+	{#snippet item(conv)}
+		{@const lastMsg = lastMessages.get(conv.id)}
+		<div class="mb-1 min-h-[44px] rounded-md px-3 py-3 transition-colors hover:bg-white/5">
+			<div class="flex items-center justify-between">
+				<p class="truncate text-sm font-medium text-white/80">
+					{conv.title || 'Neue Unterhaltung'}
+				</p>
+				{#if conv.isPinned}
+					<span class="text-[10px] text-white/30">&#128204;</span>
 				{/if}
 			</div>
-		{/each}
-
-		{#if sorted.length === 0}
-			<p class="py-8 text-center text-sm text-white/30">Keine Unterhaltungen</p>
-		{/if}
-	</div>
-</div>
+			{#if lastMsg}
+				<p class="mt-0.5 truncate text-xs text-white/40">
+					{lastMsg.sender === 'user' ? 'Du: ' : ''}{truncate(lastMsg.messageText)}
+				</p>
+			{/if}
+		</div>
+	{/snippet}
+</BaseListView>
diff --git a/apps/mana/apps/web/src/lib/modules/citycorners/ListView.svelte b/apps/mana/apps/web/src/lib/modules/citycorners/ListView.svelte
index c4a43f9af..49786e870 100644
--- a/apps/mana/apps/web/src/lib/modules/citycorners/ListView.svelte
+++ b/apps/mana/apps/web/src/lib/modules/citycorners/ListView.svelte
@@ -3,40 +3,27 @@
   Locations list grouped by category with favorites.
 -->
 <script lang="ts">
-	import { liveQuery } from 'dexie';
+	import { useLiveQueryWithDefault } from '@mana/local-store/svelte';
 	import { db } from '$lib/data/database';
+	import { BaseListView } from '@mana/shared-ui';
 	import type { LocalLocation, LocalFavorite } from './types';
 	import { CATEGORY_COLORS } from './types';
 	import type { ViewProps } from '$lib/app-registry';
 
-	let { navigate, goBack, params }: ViewProps = $props();
+	let { navigate }: ViewProps = $props();
 
-	let locations = $state<LocalLocation[]>([]);
-	let favorites = $state<LocalFavorite[]>([]);
+	const locationsQuery = useLiveQueryWithDefault(async () => {
+		const all = await db.table<LocalLocation>('ccLocations').toArray();
+		return all.filter((l) => !l.deletedAt);
+	}, [] as LocalLocation[]);
 
-	$effect(() => {
-		const sub = liveQuery(async () => {
-			return db
-				.table<LocalLocation>('ccLocations')
-				.toArray()
-				.then((all) => all.filter((l) => !l.deletedAt));
-		}).subscribe((val) => {
-			locations = val ?? [];
-		});
-		return () => sub.unsubscribe();
-	});
+	const favoritesQuery = useLiveQueryWithDefault(async () => {
+		const all = await db.table<LocalFavorite>('ccFavorites').toArray();
+		return all.filter((f) => !f.deletedAt);
+	}, [] as LocalFavorite[]);
 
-	$effect(() => {
-		const sub = liveQuery(async () => {
-			return db
-				.table<LocalFavorite>('ccFavorites')
-				.toArray()
-				.then((all) => all.filter((f) => !f.deletedAt));
-		}).subscribe((val) => {
-			favorites = val ?? [];
-		});
-		return () => sub.unsubscribe();
-	});
+	const locations = $derived(locationsQuery.value);
+	const favorites = $derived(favoritesQuery.value);
 
 	const favoriteIds = $derived(new Set(favorites.map((f) => f.locationId)));
 
@@ -55,43 +42,37 @@
 	};
 </script>
 
-<div class="flex h-full flex-col gap-3 p-3 sm:p-4">
-	<div class="flex gap-3 text-xs text-white/40">
+<BaseListView items={locations} getKey={(l) => l.id} emptyTitle="Keine Orte">
+	{#snippet header()}
 		<span>{locations.length} Orte</span>
 		<span>{favorites.length} Favoriten</span>
-	</div>
+	{/snippet}
 
-	<div class="flex-1 overflow-auto">
-		{#each locations as location (location.id)}
-			<button
-				onclick={() =>
-					navigate('detail', {
-						locationId: location.id,
-						_siblingIds: locations.map((l) => l.id),
-						_siblingKey: 'locationId',
-					})}
-				class="flex w-full min-h-[44px] items-start gap-2 rounded-md px-2 py-2 transition-colors hover:bg-white/5 cursor-pointer text-left"
-			>
-				<div
-					class="mt-0.5 h-2.5 w-2.5 shrink-0 rounded-full"
-					style="background: {CATEGORY_COLORS[location.category] ?? '#666'}"
-				></div>
-				<div class="min-w-0 flex-1">
-					<div class="flex items-center gap-1">
-						<p class="truncate text-sm text-white/80">{location.name}</p>
-						{#if favoriteIds.has(location.id)}
-							<span class="text-xs text-yellow-400">&#9733;</span>
-						{/if}
-					</div>
-					<p class="text-xs text-white/40">
-						{categoryLabels[location.category] ?? location.category}
-					</p>
+	{#snippet item(location)}
+		<button
+			onclick={() =>
+				navigate('detail', {
+					locationId: location.id,
+					_siblingIds: locations.map((l) => l.id),
+					_siblingKey: 'locationId',
+				})}
+			class="flex w-full min-h-[44px] items-start gap-2 rounded-md px-2 py-2 transition-colors hover:bg-white/5 cursor-pointer text-left"
+		>
+			<div
+				class="mt-0.5 h-2.5 w-2.5 shrink-0 rounded-full"
+				style="background: {CATEGORY_COLORS[location.category] ?? '#666'}"
+			></div>
+			<div class="min-w-0 flex-1">
+				<div class="flex items-center gap-1">
+					<p class="truncate text-sm text-white/80">{location.name}</p>
+					{#if favoriteIds.has(location.id)}
+						<span class="text-xs text-yellow-400">&#9733;</span>
+					{/if}
 				</div>
-			</button>
-		{/each}
-
-		{#if locations.length === 0}
-			<p class="py-8 text-center text-sm text-white/30">Keine Orte</p>
-		{/if}
-	</div>
-</div>
+				<p class="text-xs text-white/40">
+					{categoryLabels[location.category] ?? location.category}
+				</p>
+			</div>
+		</button>
+	{/snippet}
+</BaseListView>
diff --git a/apps/mana/apps/web/src/lib/modules/context/ListView.svelte b/apps/mana/apps/web/src/lib/modules/context/ListView.svelte
index a9ba4ab25..f88acb959 100644
--- a/apps/mana/apps/web/src/lib/modules/context/ListView.svelte
+++ b/apps/mana/apps/web/src/lib/modules/context/ListView.svelte
@@ -3,36 +3,27 @@
   Spaces and recent documents.
 -->
 <script lang="ts">
-	import { liveQuery } from 'dexie';
+	import { useLiveQueryWithDefault } from '@mana/local-store/svelte';
 	import { db } from '$lib/data/database';
 	import { decryptRecords } from '$lib/data/crypto';
+	import { BaseListView } from '@mana/shared-ui';
 	import type { LocalContextSpace, LocalDocument } from './types';
 
-	let spaces = $state<LocalContextSpace[]>([]);
-	let documents = $state<LocalDocument[]>([]);
+	const spacesQuery = useLiveQueryWithDefault(async () => {
+		const all = await db.table<LocalContextSpace>('contextSpaces').toArray();
+		return all.filter((s) => !s.deletedAt);
+	}, [] as LocalContextSpace[]);
 
-	$effect(() => {
-		const sub = liveQuery(async () => {
-			return db
-				.table<LocalContextSpace>('contextSpaces')
-				.toArray()
-				.then((all) => all.filter((s) => !s.deletedAt));
-		}).subscribe((val) => {
-			spaces = val ?? [];
-		});
-		return () => sub.unsubscribe();
-	});
+	const documentsQuery = useLiveQueryWithDefault(async () => {
+		const all = await db.table<LocalDocument>('documents').toArray();
+		const visible = all.filter((d) => !d.deletedAt);
+		return decryptRecords('documents', visible);
+	}, [] as LocalDocument[]);
 
-	$effect(() => {
-		const sub = liveQuery(async () => {
-			const all = await db.table<LocalDocument>('documents').toArray();
-			const visible = all.filter((d) => !d.deletedAt);
-			return decryptRecords('documents', visible);
-		}).subscribe((val) => {
-			documents = val ?? [];
-		});
-		return () => sub.unsubscribe();
-	});
+	const spaces = $derived(spacesQuery.value);
+	const documents = $derived(documentsQuery.value);
+
+	const pinnedSpaces = $derived(spaces.filter((s) => s.pinned));
 
 	const recentDocs = $derived(
 		[...documents].sort((a, b) => (b.updatedAt ?? '').localeCompare(a.updatedAt ?? '')).slice(0, 15)
@@ -45,17 +36,16 @@
 	};
 </script>
 
-<div class="flex h-full flex-col gap-3 p-3 sm:p-4">
-	<div class="flex gap-3 text-xs text-white/40">
+<BaseListView items={recentDocs} getKey={(d) => d.id} emptyTitle="Keine Dokumente">
+	{#snippet header()}
 		<span>{spaces.length} Spaces</span>
 		<span>{documents.length} Dokumente</span>
-	</div>
+	{/snippet}
 
-	<div class="flex-1 overflow-auto">
-		<!-- Pinned spaces -->
-		{#if spaces.filter((s) => s.pinned).length > 0}
+	{#snippet listHeader()}
+		{#if pinnedSpaces.length > 0}
 			<h3 class="mb-2 text-xs font-medium text-white/50">Angepinnte Spaces</h3>
-			{#each spaces.filter((s) => s.pinned) as space (space.id)}
+			{#each pinnedSpaces as space (space.id)}
 				<div class="mb-1 min-h-[44px] rounded-md px-3 py-2 transition-colors hover:bg-white/5">
 					<p class="text-sm font-medium text-white/80">{space.name}</p>
 					{#if space.description}
@@ -64,25 +54,20 @@
 				</div>
 			{/each}
 		{/if}
-
-		<!-- Recent documents -->
 		<h3 class="mb-2 mt-3 text-xs font-medium text-white/50">Zuletzt bearbeitet</h3>
-		{#each recentDocs as doc (doc.id)}
-			<div
-				class="flex min-h-[44px] items-center gap-2 rounded-md px-2 py-1.5 transition-colors hover:bg-white/5"
-			>
-				<span class="text-sm">{@html typeIcons[doc.type] ?? '&#128196;'}</span>
-				<div class="min-w-0 flex-1">
-					<p class="truncate text-sm text-white/70">{doc.title || 'Unbenannt'}</p>
-				</div>
-				{#if doc.pinned}
-					<span class="text-xs text-white/30">&#128204;</span>
-				{/if}
-			</div>
-		{/each}
+	{/snippet}
 
-		{#if recentDocs.length === 0}
-			<p class="py-8 text-center text-sm text-white/30">Keine Dokumente</p>
-		{/if}
-	</div>
-</div>
+	{#snippet item(doc)}
+		<div
+			class="flex min-h-[44px] items-center gap-2 rounded-md px-2 py-1.5 transition-colors hover:bg-white/5"
+		>
+			<span class="text-sm">{@html typeIcons[doc.type] ?? '&#128196;'}</span>
+			<div class="min-w-0 flex-1">
+				<p class="truncate text-sm text-white/70">{doc.title || 'Unbenannt'}</p>
+			</div>
+			{#if doc.pinned}
+				<span class="text-xs text-white/30">&#128204;</span>
+			{/if}
+		</div>
+	{/snippet}
+</BaseListView>
diff --git a/apps/mana/apps/web/src/lib/modules/inventar/ListView.svelte b/apps/mana/apps/web/src/lib/modules/inventar/ListView.svelte
index 8b9321ba8..5822d9024 100644
--- a/apps/mana/apps/web/src/lib/modules/inventar/ListView.svelte
+++ b/apps/mana/apps/web/src/lib/modules/inventar/ListView.svelte
@@ -3,84 +3,62 @@
   Collections and items overview.
 -->
 <script lang="ts">
-	import { liveQuery } from 'dexie';
+	import { useLiveQueryWithDefault } from '@mana/local-store/svelte';
 	import { db } from '$lib/data/database';
+	import { BaseListView } from '@mana/shared-ui';
 	import type { ViewProps } from '$lib/app-registry';
 	import type { LocalCollection, LocalItem } from './types';
 
-	let { navigate, goBack, params }: ViewProps = $props();
+	let { navigate }: ViewProps = $props();
 
-	let collections = $state<LocalCollection[]>([]);
-	let items = $state<LocalItem[]>([]);
+	const collectionsQuery = useLiveQueryWithDefault(async () => {
+		const all = await db.table<LocalCollection>('inventarCollections').orderBy('order').toArray();
+		return all.filter((c) => !c.deletedAt);
+	}, [] as LocalCollection[]);
 
-	$effect(() => {
-		const sub = liveQuery(async () => {
-			return db
-				.table<LocalCollection>('inventarCollections')
-				.orderBy('order')
-				.toArray()
-				.then((all) => all.filter((c) => !c.deletedAt));
-		}).subscribe((val) => {
-			collections = val ?? [];
-		});
-		return () => sub.unsubscribe();
-	});
+	const itemsQuery = useLiveQueryWithDefault(async () => {
+		const all = await db.table<LocalItem>('inventarItems').toArray();
+		return all.filter((i) => !i.deletedAt);
+	}, [] as LocalItem[]);
 
-	$effect(() => {
-		const sub = liveQuery(async () => {
-			return db
-				.table<LocalItem>('inventarItems')
-				.toArray()
-				.then((all) => all.filter((i) => !i.deletedAt));
-		}).subscribe((val) => {
-			items = val ?? [];
-		});
-		return () => sub.unsubscribe();
-	});
+	const collections = $derived(collectionsQuery.value);
+	const items = $derived(itemsQuery.value);
 
 	function itemsInCollection(collectionId: string): number {
 		return items.filter((i) => i.collectionId === collectionId).length;
 	}
 
-	const totalValue = $derived(() => {
-		return items.reduce((sum, i) => sum + (i.purchaseData?.price ?? 0), 0);
-	});
+	const totalValue = $derived(items.reduce((sum, i) => sum + (i.purchaseData?.price ?? 0), 0));
 </script>
 
-<div class="flex h-full flex-col gap-3 p-3 sm:p-4">
-	<div class="flex gap-3 text-xs text-white/40">
+<BaseListView items={collections} getKey={(c) => c.id} emptyTitle="Keine Sammlungen">
+	{#snippet header()}
 		<span>{items.length} Gegenstände</span>
-		{#if totalValue() > 0}
-			<span>~{totalValue().toFixed(0)} EUR</span>
+		{#if totalValue > 0}
+			<span>~{totalValue.toFixed(0)} EUR</span>
 		{/if}
-	</div>
+	{/snippet}
 
-	<div class="flex-1 overflow-auto">
-		{#each collections as collection (collection.id)}
-			<button
-				onclick={() =>
-					navigate('detail', {
-						collectionId: collection.id,
-						_siblingIds: collections.map((c) => c.id),
-						_siblingKey: 'collectionId',
-					})}
-				class="mb-2 w-full rounded-md border border-white/10 px-3 py-2.5 text-left transition-colors hover:bg-white/5 min-h-[44px]"
-			>
-				<div class="flex items-center gap-2">
-					{#if collection.icon}
-						<span class="text-sm">{collection.icon}</span>
-					{/if}
-					<p class="flex-1 truncate text-sm font-medium text-white/80">{collection.name}</p>
-					<span class="text-xs text-white/40">{itemsInCollection(collection.id)}</span>
-				</div>
-				{#if collection.description}
-					<p class="mt-1 truncate text-xs text-white/30">{collection.description}</p>
+	{#snippet item(collection)}
+		<button
+			onclick={() =>
+				navigate('detail', {
+					collectionId: collection.id,
+					_siblingIds: collections.map((c) => c.id),
+					_siblingKey: 'collectionId',
+				})}
+			class="mb-2 w-full rounded-md border border-white/10 px-3 py-2.5 text-left transition-colors hover:bg-white/5 min-h-[44px]"
+		>
+			<div class="flex items-center gap-2">
+				{#if collection.icon}
+					<span class="text-sm">{collection.icon}</span>
 				{/if}
-			</button>
-		{/each}
-
-		{#if collections.length === 0}
-			<p class="py-8 text-center text-sm text-white/30">Keine Sammlungen</p>
-		{/if}
-	</div>
-</div>
+				<p class="flex-1 truncate text-sm font-medium text-white/80">{collection.name}</p>
+				<span class="text-xs text-white/40">{itemsInCollection(collection.id)}</span>
+			</div>
+			{#if collection.description}
+				<p class="mt-1 truncate text-xs text-white/30">{collection.description}</p>
+			{/if}
+		</button>
+	{/snippet}
+</BaseListView>
diff --git a/apps/mana/apps/web/src/lib/modules/memoro/ListView.svelte b/apps/mana/apps/web/src/lib/modules/memoro/ListView.svelte
index 77e4007e1..608b34f9a 100644
--- a/apps/mana/apps/web/src/lib/modules/memoro/ListView.svelte
+++ b/apps/mana/apps/web/src/lib/modules/memoro/ListView.svelte
@@ -3,16 +3,28 @@
   Recent memos with transcription status.
 -->
 <script lang="ts">
-	import { liveQuery } from 'dexie';
+	import { useLiveQueryWithDefault } from '@mana/local-store/svelte';
 	import { db } from '$lib/data/database';
+	import { BaseListView } from '@mana/shared-ui';
 	import type { ViewProps } from '$lib/app-registry';
 	import type { LocalMemo } from './types';
 	import { memosStore } from './stores/memos.svelte';
 	import VoiceCaptureBar from '$lib/components/voice/VoiceCaptureBar.svelte';
 
-	let { navigate, goBack, params }: ViewProps = $props();
+	let { navigate }: ViewProps = $props();
 
-	let memos = $state<LocalMemo[]>([]);
+	const memosQuery = useLiveQueryWithDefault(async () => {
+		const all = await db.table<LocalMemo>('memos').toArray();
+		return all.filter((m) => !m.deletedAt && !m.isArchived);
+	}, [] as LocalMemo[]);
+
+	const memos = $derived(memosQuery.value);
+
+	const sorted = $derived(
+		[...memos].sort((a, b) => (b.createdAt ?? '').localeCompare(a.createdAt ?? ''))
+	);
+
+	const pinned = $derived(memos.filter((m) => m.isPinned));
 
 	async function handleVoiceComplete(blob: Blob, durationMs: number) {
 		const memo = await memosStore.createFromVoice(blob, durationMs, 'de');
@@ -24,24 +36,6 @@
 		});
 	}
 
-	$effect(() => {
-		const sub = liveQuery(async () => {
-			return db
-				.table<LocalMemo>('memos')
-				.toArray()
-				.then((all) => all.filter((m) => !m.deletedAt && !m.isArchived));
-		}).subscribe((val) => {
-			memos = val ?? [];
-		});
-		return () => sub.unsubscribe();
-	});
-
-	const sorted = $derived(
-		[...memos].sort((a, b) => (b.createdAt ?? '').localeCompare(a.createdAt ?? ''))
-	);
-
-	const pinned = $derived(memos.filter((m) => m.isPinned));
-
 	function formatDuration(ms: number | null): string {
 		if (!ms) return '--:--';
 		const sec = Math.round(ms / 1000);
@@ -58,59 +52,54 @@
 	};
 </script>
 
-<div class="flex h-full flex-col gap-3 p-3 sm:p-4">
-	<VoiceCaptureBar
-		idleLabel="Memo sprechen"
-		feature="memoro-voice-capture"
-		reason="Sprach-Memos werden verschlüsselt gespeichert. Dafür brauchst du ein Mana-Konto."
-		onComplete={handleVoiceComplete}
-	/>
+<BaseListView items={sorted} getKey={(m) => m.id} emptyTitle="Keine Memos">
+	{#snippet toolbar()}
+		<VoiceCaptureBar
+			idleLabel="Memo sprechen"
+			feature="memoro-voice-capture"
+			reason="Sprach-Memos werden verschlüsselt gespeichert. Dafür brauchst du ein Mana-Konto."
+			onComplete={handleVoiceComplete}
+		/>
+	{/snippet}
 
-	<div class="flex gap-3 text-xs text-white/40">
+	{#snippet header()}
 		<span>{memos.length} Memos</span>
 		<span>{pinned.length} angepinnt</span>
-	</div>
+	{/snippet}
 
-	<div class="flex-1 overflow-auto">
-		{#each sorted as memo (memo.id)}
-			<button
-				onclick={() =>
-					navigate('detail', {
-						memoId: memo.id,
-						_siblingIds: sorted.map((m) => m.id),
-						_siblingKey: 'memoId',
-					})}
-				class="mb-2 w-full rounded-md border border-white/10 px-3 py-2.5 text-left transition-colors hover:bg-white/5 min-h-[44px]"
-			>
-				<div class="flex items-start justify-between gap-2">
-					<div class="min-w-0 flex-1">
-						<div class="flex items-center gap-1">
-							{#if memo.isPinned}
-								<span class="text-xs text-white/30">&#128204;</span>
-							{/if}
-							<p class="truncate text-sm font-medium text-white/80">
-								{memo.title || 'Unbenanntes Memo'}
-							</p>
-						</div>
-						{#if memo.intro}
-							<p class="mt-0.5 truncate text-xs text-white/40">{memo.intro}</p>
+	{#snippet item(memo)}
+		<button
+			onclick={() =>
+				navigate('detail', {
+					memoId: memo.id,
+					_siblingIds: sorted.map((m) => m.id),
+					_siblingKey: 'memoId',
+				})}
+			class="mb-2 w-full rounded-md border border-white/10 px-3 py-2.5 text-left transition-colors hover:bg-white/5 min-h-[44px]"
+		>
+			<div class="flex items-start justify-between gap-2">
+				<div class="min-w-0 flex-1">
+					<div class="flex items-center gap-1">
+						{#if memo.isPinned}
+							<span class="text-xs text-white/30">&#128204;</span>
 						{/if}
+						<p class="truncate text-sm font-medium text-white/80">
+							{memo.title || 'Unbenanntes Memo'}
+						</p>
 					</div>
-					<span
-						class="shrink-0 rounded px-1.5 py-0.5 text-[10px] {statusColors[
-							memo.processingStatus
-						] ?? ''}"
-					>
-						{memo.processingStatus === 'completed'
-							? formatDuration(memo.audioDurationMs)
-							: memo.processingStatus}
-					</span>
+					{#if memo.intro}
+						<p class="mt-0.5 truncate text-xs text-white/40">{memo.intro}</p>
+					{/if}
 				</div>
-			</button>
-		{/each}
-
-		{#if sorted.length === 0}
-			<p class="py-8 text-center text-sm text-white/30">Keine Memos</p>
-		{/if}
-	</div>
-</div>
+				<span
+					class="shrink-0 rounded px-1.5 py-0.5 text-[10px] {statusColors[memo.processingStatus] ??
+						''}"
+				>
+					{memo.processingStatus === 'completed'
+						? formatDuration(memo.audioDurationMs)
+						: memo.processingStatus}
+				</span>
+			</div>
+		</button>
+	{/snippet}
+</BaseListView>
diff --git a/apps/mana/apps/web/src/lib/modules/moodlit/ListView.svelte b/apps/mana/apps/web/src/lib/modules/moodlit/ListView.svelte
index 85e865cb8..46db9c1e6 100644
--- a/apps/mana/apps/web/src/lib/modules/moodlit/ListView.svelte
+++ b/apps/mana/apps/web/src/lib/modules/moodlit/ListView.svelte
@@ -3,28 +3,22 @@
   Ambient mood selector with color preview.
 -->
 <script lang="ts">
-	import { liveQuery } from 'dexie';
+	import { useLiveQueryWithDefault } from '@mana/local-store/svelte';
 	import { db } from '$lib/data/database';
+	import { BaseListView } from '@mana/shared-ui';
 	import type { LocalMood } from './types';
 	import { moodsStore } from './stores/moods.svelte';
 	import { ContextMenu, type ContextMenuItem } from '@mana/shared-ui';
 	import { Trash, Power } from '@mana/shared-icons';
 
-	let moods = $state<LocalMood[]>([]);
+	const moodsQuery = useLiveQueryWithDefault(async () => {
+		const all = await db.table<LocalMood>('moods').toArray();
+		return all.filter((m) => !m.deletedAt);
+	}, [] as LocalMood[]);
+
+	const moods = $derived(moodsQuery.value);
+
 	let activeMoodId = $state<string | null>(null);
-
-	$effect(() => {
-		const sub = liveQuery(async () => {
-			return db
-				.table<LocalMood>('moods')
-				.toArray()
-				.then((all) => all.filter((m) => !m.deletedAt));
-		}).subscribe((val) => {
-			moods = val ?? [];
-		});
-		return () => sub.unsubscribe();
-	});
-
 	const activeMood = $derived(moods.find((m) => m.id === activeMoodId));
 
 	function gradientStyle(colors: string[]): string {
@@ -76,47 +70,46 @@
 	);
 </script>
 
-<div class="flex h-full flex-col gap-4 p-3 sm:p-4">
-	<!-- Active mood preview -->
-	{#if activeMood}
-		<div
-			class="flex h-24 items-center justify-center rounded-lg"
-			style={gradientStyle(activeMood.colors)}
-		>
-			<p class="text-sm font-medium text-white drop-shadow">{activeMood.name}</p>
-		</div>
-	{:else}
-		<div class="flex h-24 items-center justify-center rounded-lg bg-white/5">
-			<p class="text-sm text-white/30">Kein Mood aktiv</p>
-		</div>
-	{/if}
-
-	<!-- Mood grid -->
-	<div class="flex-1 overflow-auto">
-		<div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
-			{#each moods as mood (mood.id)}
-				<button
-					onclick={() => (activeMoodId = activeMoodId === mood.id ? null : mood.id)}
-					oncontextmenu={(e) => handleItemContextMenu(e, mood)}
-					class="group flex flex-col items-center gap-1.5 rounded-lg p-2 transition-colors hover:bg-white/5
-						{activeMoodId === mood.id ? 'ring-1 ring-white/30' : ''}"
-				>
-					<div class="h-10 w-10 rounded-full" style={gradientStyle(mood.colors)}></div>
-					<span class="text-[10px] text-white/50 group-hover:text-white/70">{mood.name}</span>
-				</button>
-			{/each}
-		</div>
-
-		{#if moods.length === 0}
-			<p class="py-8 text-center text-sm text-white/30">Keine Moods</p>
+<BaseListView
+	items={moods}
+	getKey={(m) => m.id}
+	emptyTitle="Keine Moods"
+	class="gap-4"
+	listClass="grid grid-cols-2 sm:grid-cols-3 gap-2 content-start"
+>
+	{#snippet toolbar()}
+		<!-- Active mood preview -->
+		{#if activeMood}
+			<div
+				class="flex h-24 items-center justify-center rounded-lg"
+				style={gradientStyle(activeMood.colors)}
+			>
+				<p class="text-sm font-medium text-white drop-shadow">{activeMood.name}</p>
+			</div>
+		{:else}
+			<div class="flex h-24 items-center justify-center rounded-lg bg-white/5">
+				<p class="text-sm text-white/30">Kein Mood aktiv</p>
+			</div>
 		{/if}
-	</div>
+	{/snippet}
 
-	<ContextMenu
-		visible={ctxMenu.visible}
-		x={ctxMenu.x}
-		y={ctxMenu.y}
-		items={ctxMenuItems}
-		onClose={() => (ctxMenu = { ...ctxMenu, visible: false, mood: null })}
-	/>
-</div>
+	{#snippet item(mood)}
+		<button
+			onclick={() => (activeMoodId = activeMoodId === mood.id ? null : mood.id)}
+			oncontextmenu={(e) => handleItemContextMenu(e, mood)}
+			class="group flex flex-col items-center gap-1.5 rounded-lg p-2 transition-colors hover:bg-white/5
+				{activeMoodId === mood.id ? 'ring-1 ring-white/30' : ''}"
+		>
+			<div class="h-10 w-10 rounded-full" style={gradientStyle(mood.colors)}></div>
+			<span class="text-[10px] text-white/50 group-hover:text-white/70">{mood.name}</span>
+		</button>
+	{/snippet}
+</BaseListView>
+
+<ContextMenu
+	visible={ctxMenu.visible}
+	x={ctxMenu.x}
+	y={ctxMenu.y}
+	items={ctxMenuItems}
+	onClose={() => (ctxMenu = { ...ctxMenu, visible: false, mood: null })}
+/>
diff --git a/apps/mana/apps/web/src/lib/modules/music/ListView.svelte b/apps/mana/apps/web/src/lib/modules/music/ListView.svelte
index cf44d5533..67b3e166f 100644
--- a/apps/mana/apps/web/src/lib/modules/music/ListView.svelte
+++ b/apps/mana/apps/web/src/lib/modules/music/ListView.svelte
@@ -3,39 +3,28 @@
   Song library with recent plays and playlists.
 -->
 <script lang="ts">
-	import { liveQuery } from 'dexie';
+	import { useLiveQueryWithDefault } from '@mana/local-store/svelte';
 	import { db } from '$lib/data/database';
 	import { decryptRecords } from '$lib/data/crypto';
+	import { BaseListView } from '@mana/shared-ui';
 	import type { LocalSong, LocalPlaylist } from './types';
 	import type { ViewProps } from '$lib/app-registry';
 
-	let { navigate, goBack, params }: ViewProps = $props();
+	let { navigate }: ViewProps = $props();
 
-	let songs = $state<LocalSong[]>([]);
-	let playlists = $state<LocalPlaylist[]>([]);
+	const songsQuery = useLiveQueryWithDefault(async () => {
+		const all = await db.table<LocalSong>('songs').toArray();
+		const visible = all.filter((s) => !s.deletedAt);
+		return decryptRecords('songs', visible);
+	}, [] as LocalSong[]);
 
-	$effect(() => {
-		const sub = liveQuery(async () => {
-			const all = await db.table<LocalSong>('songs').toArray();
-			const visible = all.filter((s) => !s.deletedAt);
-			return decryptRecords('songs', visible);
-		}).subscribe((val) => {
-			songs = val ?? [];
-		});
-		return () => sub.unsubscribe();
-	});
+	const playlistsQuery = useLiveQueryWithDefault(async () => {
+		const all = await db.table<LocalPlaylist>('playlists').toArray();
+		return all.filter((p) => !p.deletedAt);
+	}, [] as LocalPlaylist[]);
 
-	$effect(() => {
-		const sub = liveQuery(async () => {
-			return db
-				.table<LocalPlaylist>('playlists')
-				.toArray()
-				.then((all) => all.filter((p) => !p.deletedAt));
-		}).subscribe((val) => {
-			playlists = val ?? [];
-		});
-		return () => sub.unsubscribe();
-	});
+	const songs = $derived(songsQuery.value);
+	const playlists = $derived(playlistsQuery.value);
 
 	const recentlyPlayed = $derived(
 		[...songs]
@@ -54,40 +43,37 @@
 	}
 </script>
 
-<div class="flex h-full flex-col gap-3 p-3 sm:p-4">
-	<div class="flex gap-3 text-xs text-white/40">
+<BaseListView items={recentlyPlayed} getKey={(s) => s.id} emptyTitle="Noch nichts gehört">
+	{#snippet header()}
 		<span>{songs.length} Songs</span>
 		<span>{playlists.length} Playlists</span>
 		<span>{favorites.length} Favoriten</span>
-	</div>
+	{/snippet}
 
-	<div class="flex-1 overflow-auto">
+	{#snippet listHeader()}
 		<h3 class="mb-2 text-xs font-medium text-white/50">Zuletzt gehört</h3>
-		{#each recentlyPlayed as song (song.id)}
-			<button
-				onclick={() =>
-					navigate('detail', {
-						songId: song.id,
-						_siblingIds: recentlyPlayed.map((s) => s.id),
-						_siblingKey: 'songId',
-					})}
-				class="flex w-full min-h-[44px] items-center gap-3 rounded-md px-2 py-1.5 transition-colors hover:bg-white/5 cursor-pointer text-left"
-			>
-				<div
-					class="flex h-8 w-8 shrink-0 items-center justify-center rounded bg-white/10 text-xs text-white/30"
-				>
-					&#9835;
-				</div>
-				<div class="min-w-0 flex-1">
-					<p class="truncate text-sm text-white/80">{song.title}</p>
-					<p class="truncate text-xs text-white/40">{song.artist ?? 'Unbekannt'}</p>
-				</div>
-				<span class="text-xs text-white/30">{formatDuration(song.duration)}</span>
-			</button>
-		{/each}
+	{/snippet}
 
-		{#if recentlyPlayed.length === 0}
-			<p class="py-8 text-center text-sm text-white/30">Noch nichts gehört</p>
-		{/if}
-	</div>
-</div>
+	{#snippet item(song)}
+		<button
+			onclick={() =>
+				navigate('detail', {
+					songId: song.id,
+					_siblingIds: recentlyPlayed.map((s) => s.id),
+					_siblingKey: 'songId',
+				})}
+			class="flex w-full min-h-[44px] items-center gap-3 rounded-md px-2 py-1.5 transition-colors hover:bg-white/5 cursor-pointer text-left"
+		>
+			<div
+				class="flex h-8 w-8 shrink-0 items-center justify-center rounded bg-white/10 text-xs text-white/30"
+			>
+				&#9835;
+			</div>
+			<div class="min-w-0 flex-1">
+				<p class="truncate text-sm text-white/80">{song.title}</p>
+				<p class="truncate text-xs text-white/40">{song.artist ?? 'Unbekannt'}</p>
+			</div>
+			<span class="text-xs text-white/30">{formatDuration(song.duration)}</span>
+		</button>
+	{/snippet}
+</BaseListView>
diff --git a/apps/mana/apps/web/src/lib/modules/nutriphi/ListView.svelte b/apps/mana/apps/web/src/lib/modules/nutriphi/ListView.svelte
index 93f863c7e..89bbcaf20 100644
--- a/apps/mana/apps/web/src/lib/modules/nutriphi/ListView.svelte
+++ b/apps/mana/apps/web/src/lib/modules/nutriphi/ListView.svelte
@@ -3,39 +3,27 @@
   Today's nutrition progress with meal log.
 -->
 <script lang="ts">
-	import { liveQuery } from 'dexie';
+	import { useLiveQueryWithDefault } from '@mana/local-store/svelte';
 	import { db } from '$lib/data/database';
 	import { decryptRecords } from '$lib/data/crypto';
+	import { BaseListView } from '@mana/shared-ui';
 	import type { LocalMeal, LocalGoal } from './types';
 
-	let meals = $state<LocalMeal[]>([]);
-	let goals = $state<LocalGoal[]>([]);
+	const mealsQuery = useLiveQueryWithDefault(async () => {
+		const all = await db.table<LocalMeal>('meals').toArray();
+		const visible = all.filter((m) => !m.deletedAt);
+		return decryptRecords('meals', visible);
+	}, [] as LocalMeal[]);
+
+	const goalsQuery = useLiveQueryWithDefault(async () => {
+		const all = await db.table<LocalGoal>('nutriphiGoals').toArray();
+		return all.filter((g) => !g.deletedAt);
+	}, [] as LocalGoal[]);
+
+	const meals = $derived(mealsQuery.value);
+	const goals = $derived(goalsQuery.value);
 
 	const todayStr = new Date().toISOString().split('T')[0];
-
-	$effect(() => {
-		const sub = liveQuery(async () => {
-			const all = await db.table<LocalMeal>('meals').toArray();
-			const visible = all.filter((m) => !m.deletedAt);
-			return decryptRecords('meals', visible);
-		}).subscribe((val) => {
-			meals = val ?? [];
-		});
-		return () => sub.unsubscribe();
-	});
-
-	$effect(() => {
-		const sub = liveQuery(async () => {
-			return db
-				.table<LocalGoal>('nutriphiGoals')
-				.toArray()
-				.then((all) => all.filter((g) => !g.deletedAt));
-		}).subscribe((val) => {
-			goals = val ?? [];
-		});
-		return () => sub.unsubscribe();
-	});
-
 	const todayMeals = $derived(meals.filter((m) => m.date === todayStr));
 	const goal = $derived(goals[0]);
 
@@ -58,52 +46,45 @@
 	};
 </script>
 
-<div class="flex h-full flex-col gap-3 p-3 sm:p-4">
-	<!-- Calorie progress -->
-	<div class="text-center">
-		<p class="text-2xl font-light text-white/90">{Math.round(totalCalories)}</p>
-		<p class="text-xs text-white/40">
+<BaseListView items={todayMeals} getKey={(m) => m.id} emptyTitle="Noch keine Mahlzeiten heute">
+	{#snippet toolbar()}
+		<!-- Calorie progress -->
+		<div class="text-center">
+			<p class="text-2xl font-light text-white/90">{Math.round(totalCalories)}</p>
+			<p class="text-xs text-white/40">
+				{#if goal}
+					von {goal.dailyCalories} kcal
+				{:else}
+					kcal heute
+				{/if}
+			</p>
 			{#if goal}
-				von {goal.dailyCalories} kcal
-			{:else}
-				kcal heute
-			{/if}
-		</p>
-		{#if goal}
-			<div class="mx-auto mt-2 h-1.5 w-32 rounded-full bg-white/10">
-				<div
-					class="h-full rounded-full transition-all {calorieProgress >= 100
-						? 'bg-green-400'
-						: 'bg-blue-400'}"
-					style="width: {calorieProgress}%"
-				></div>
-			</div>
-		{/if}
-	</div>
-
-	<!-- Macros -->
-	<div class="flex justify-center gap-4 text-xs text-white/40">
-		<span>{Math.round(totalProtein)}g Protein</span>
-		<span>{todayMeals.length} Mahlzeiten</span>
-	</div>
-
-	<!-- Today's meals -->
-	<div class="flex-1 overflow-auto">
-		{#each todayMeals as meal (meal.id)}
-			<div class="mb-1 min-h-[44px] rounded-md px-3 py-2 transition-colors hover:bg-white/5">
-				<div class="flex items-center justify-between">
-					<span class="text-xs text-white/50">{mealTypeLabels[meal.mealType] ?? meal.mealType}</span
-					>
-					{#if meal.nutrition}
-						<span class="text-xs text-white/50">{Math.round(meal.nutrition.calories)} kcal</span>
-					{/if}
+				<div class="mx-auto mt-2 h-1.5 w-32 rounded-full bg-white/10">
+					<div
+						class="h-full rounded-full transition-all {calorieProgress >= 100
+							? 'bg-green-400'
+							: 'bg-blue-400'}"
+						style="width: {calorieProgress}%"
+					></div>
 				</div>
-				<p class="truncate text-sm text-white/70">{meal.description}</p>
-			</div>
-		{/each}
+			{/if}
+		</div>
+	{/snippet}
 
-		{#if todayMeals.length === 0}
-			<p class="py-8 text-center text-sm text-white/30">Noch keine Mahlzeiten heute</p>
-		{/if}
-	</div>
-</div>
+	{#snippet header()}
+		<span class="mx-auto">{Math.round(totalProtein)}g Protein · {todayMeals.length} Mahlzeiten</span
+		>
+	{/snippet}
+
+	{#snippet item(meal)}
+		<div class="mb-1 min-h-[44px] rounded-md px-3 py-2 transition-colors hover:bg-white/5">
+			<div class="flex items-center justify-between">
+				<span class="text-xs text-white/50">{mealTypeLabels[meal.mealType] ?? meal.mealType}</span>
+				{#if meal.nutrition}
+					<span class="text-xs text-white/50">{Math.round(meal.nutrition.calories)} kcal</span>
+				{/if}
+			</div>
+			<p class="truncate text-sm text-white/70">{meal.description}</p>
+		</div>
+	{/snippet}
+</BaseListView>
diff --git a/apps/mana/apps/web/src/lib/modules/picture/ListView.svelte b/apps/mana/apps/web/src/lib/modules/picture/ListView.svelte
index 3a1aec400..4282d3235 100644
--- a/apps/mana/apps/web/src/lib/modules/picture/ListView.svelte
+++ b/apps/mana/apps/web/src/lib/modules/picture/ListView.svelte
@@ -3,23 +3,19 @@
   Recent images grid with favorites.
 -->
 <script lang="ts">
-	import { liveQuery } from 'dexie';
+	import { useLiveQueryWithDefault } from '@mana/local-store/svelte';
 	import { db } from '$lib/data/database';
 	import { decryptRecords } from '$lib/data/crypto';
+	import { BaseListView } from '@mana/shared-ui';
 	import type { LocalImage } from './types';
 
-	let images = $state<LocalImage[]>([]);
+	const imagesQuery = useLiveQueryWithDefault(async () => {
+		const all = await db.table<LocalImage>('images').toArray();
+		const visible = all.filter((i) => !i.deletedAt && !i.isArchived);
+		return decryptRecords('images', visible);
+	}, [] as LocalImage[]);
 
-	$effect(() => {
-		const sub = liveQuery(async () => {
-			const all = await db.table<LocalImage>('images').toArray();
-			const visible = all.filter((i) => !i.deletedAt && !i.isArchived);
-			return decryptRecords('images', visible);
-		}).subscribe((val) => {
-			images = val ?? [];
-		});
-		return () => sub.unsubscribe();
-	});
+	const images = $derived(imagesQuery.value);
 
 	const sorted = $derived(
 		[...images].sort((a, b) => (b.createdAt ?? '').localeCompare(a.createdAt ?? '')).slice(0, 20)
@@ -28,37 +24,34 @@
 	const favoriteCount = $derived(images.filter((i) => i.isFavorite).length);
 </script>
 
-<div class="flex h-full flex-col gap-3 p-3 sm:p-4">
-	<div class="flex items-center justify-between">
-		<p class="text-xs text-white/40">{images.length} Bilder</p>
-		<p class="text-xs text-white/40">{favoriteCount} Favoriten</p>
-	</div>
+<BaseListView
+	items={sorted}
+	getKey={(i) => i.id}
+	emptyTitle="Keine Bilder"
+	listClass="grid grid-cols-2 sm:grid-cols-3 gap-1.5 content-start"
+>
+	{#snippet header()}
+		<span class="flex-1">{images.length} Bilder</span>
+		<span>{favoriteCount} Favoriten</span>
+	{/snippet}
 
-	<div class="flex-1 overflow-auto">
-		<div class="grid grid-cols-2 sm:grid-cols-3 gap-1.5">
-			{#each sorted as image (image.id)}
-				<div class="group relative aspect-square overflow-hidden rounded-md bg-white/5">
-					{#if image.publicUrl}
-						<img
-							src={image.publicUrl}
-							alt={image.prompt}
-							class="h-full w-full object-cover"
-							loading="lazy"
-						/>
-					{:else}
-						<div class="flex h-full items-center justify-center text-white/20 text-xs">
-							{image.format ?? 'img'}
-						</div>
-					{/if}
-					{#if image.isFavorite}
-						<span class="absolute right-1 top-1 text-xs text-yellow-400">&#9733;</span>
-					{/if}
+	{#snippet item(image)}
+		<div class="group relative aspect-square overflow-hidden rounded-md bg-white/5">
+			{#if image.publicUrl}
+				<img
+					src={image.publicUrl}
+					alt={image.prompt}
+					class="h-full w-full object-cover"
+					loading="lazy"
+				/>
+			{:else}
+				<div class="flex h-full items-center justify-center text-white/20 text-xs">
+					{image.format ?? 'img'}
 				</div>
-			{/each}
+			{/if}
+			{#if image.isFavorite}
+				<span class="absolute right-1 top-1 text-xs text-yellow-400">&#9733;</span>
+			{/if}
 		</div>
-
-		{#if sorted.length === 0}
-			<p class="py-8 text-center text-sm text-white/30">Keine Bilder</p>
-		{/if}
-	</div>
-</div>
+	{/snippet}
+</BaseListView>
diff --git a/apps/mana/apps/web/src/lib/modules/planta/ListView.svelte b/apps/mana/apps/web/src/lib/modules/planta/ListView.svelte
index 9ff3720bf..3b46bd53f 100644
--- a/apps/mana/apps/web/src/lib/modules/planta/ListView.svelte
+++ b/apps/mana/apps/web/src/lib/modules/planta/ListView.svelte
@@ -3,39 +3,26 @@
   Plant overview with watering schedule.
 -->
 <script lang="ts">
-	import { liveQuery } from 'dexie';
+	import { useLiveQueryWithDefault } from '@mana/local-store/svelte';
 	import { db } from '$lib/data/database';
+	import { BaseListView } from '@mana/shared-ui';
 	import type { ViewProps } from '$lib/app-registry';
 	import type { LocalPlant, LocalWateringSchedule } from './types';
 
-	let { navigate, goBack, params }: ViewProps = $props();
+	let { navigate }: ViewProps = $props();
 
-	let plants = $state<LocalPlant[]>([]);
-	let schedules = $state<LocalWateringSchedule[]>([]);
+	const plantsQuery = useLiveQueryWithDefault(async () => {
+		const all = await db.table<LocalPlant>('plants').toArray();
+		return all.filter((p) => !p.deletedAt && p.isActive);
+	}, [] as LocalPlant[]);
 
-	$effect(() => {
-		const sub = liveQuery(async () => {
-			return db
-				.table<LocalPlant>('plants')
-				.toArray()
-				.then((all) => all.filter((p) => !p.deletedAt && p.isActive));
-		}).subscribe((val) => {
-			plants = val ?? [];
-		});
-		return () => sub.unsubscribe();
-	});
+	const schedulesQuery = useLiveQueryWithDefault(async () => {
+		const all = await db.table<LocalWateringSchedule>('wateringSchedules').toArray();
+		return all.filter((s) => !s.deletedAt);
+	}, [] as LocalWateringSchedule[]);
 
-	$effect(() => {
-		const sub = liveQuery(async () => {
-			return db
-				.table<LocalWateringSchedule>('wateringSchedules')
-				.toArray()
-				.then((all) => all.filter((s) => !s.deletedAt));
-		}).subscribe((val) => {
-			schedules = val ?? [];
-		});
-		return () => sub.unsubscribe();
-	});
+	const plants = $derived(plantsQuery.value);
+	const schedules = $derived(schedulesQuery.value);
 
 	function getSchedule(plantId: string): LocalWateringSchedule | undefined {
 		return schedules.find((s) => s.plantId === plantId);
@@ -58,8 +45,8 @@
 	};
 </script>
 
-<div class="flex h-full flex-col gap-3 p-3 sm:p-4">
-	<div class="flex gap-3 text-xs text-white/40">
+<BaseListView items={plants} getKey={(p) => p.id} emptyTitle="Keine Pflanzen">
+	{#snippet header()}
 		<span>{plants.length} Pflanzen</span>
 		{#if dueForWatering.length > 0}
 			<span class="text-blue-400">{dueForWatering.length} giessen</span>
@@ -67,45 +54,39 @@
 		{#if needsAttention.length > 0}
 			<span class="text-amber-400">{needsAttention.length} brauchen Pflege</span>
 		{/if}
-	</div>
+	{/snippet}
 
-	<div class="flex-1 overflow-auto">
-		{#each plants as plant (plant.id)}
-			{@const schedule = getSchedule(plant.id)}
-			{@const waterDue = needsWater(schedule)}
-			<button
-				onclick={() =>
-					navigate('detail', {
-						plantId: plant.id,
-						_siblingIds: plants.map((p) => p.id),
-						_siblingKey: 'plantId',
-					})}
-				class="mb-2 w-full rounded-md border border-white/10 px-3 py-2.5 text-left transition-colors hover:bg-white/5 min-h-[44px]"
-			>
-				<div class="flex items-center gap-2">
-					<span class="text-sm"
-						>{@html healthIcons[plant.healthStatus ?? 'healthy'] ?? '&#127793;'}</span
-					>
-					<div class="min-w-0 flex-1">
-						<p class="truncate text-sm font-medium text-white/80">{plant.name}</p>
-						{#if plant.scientificName}
-							<p class="truncate text-xs italic text-white/30">{plant.scientificName}</p>
-						{/if}
-					</div>
-					{#if waterDue}
-						<span class="text-xs text-blue-400">&#128167;</span>
+	{#snippet item(plant)}
+		{@const schedule = getSchedule(plant.id)}
+		{@const waterDue = needsWater(schedule)}
+		<button
+			onclick={() =>
+				navigate('detail', {
+					plantId: plant.id,
+					_siblingIds: plants.map((p) => p.id),
+					_siblingKey: 'plantId',
+				})}
+			class="mb-2 w-full rounded-md border border-white/10 px-3 py-2.5 text-left transition-colors hover:bg-white/5 min-h-[44px]"
+		>
+			<div class="flex items-center gap-2">
+				<span class="text-sm">
+					{@html healthIcons[plant.healthStatus ?? 'healthy'] ?? '&#127793;'}
+				</span>
+				<div class="min-w-0 flex-1">
+					<p class="truncate text-sm font-medium text-white/80">{plant.name}</p>
+					{#if plant.scientificName}
+						<p class="truncate text-xs italic text-white/30">{plant.scientificName}</p>
 					{/if}
 				</div>
-				{#if schedule}
-					<p class="mt-1 text-xs text-white/30">
-						Alle {schedule.frequencyDays} Tage giessen
-					</p>
+				{#if waterDue}
+					<span class="text-xs text-blue-400">&#128167;</span>
 				{/if}
-			</button>
-		{/each}
-
-		{#if plants.length === 0}
-			<p class="py-8 text-center text-sm text-white/30">Keine Pflanzen</p>
-		{/if}
-	</div>
-</div>
+			</div>
+			{#if schedule}
+				<p class="mt-1 text-xs text-white/30">
+					Alle {schedule.frequencyDays} Tage giessen
+				</p>
+			{/if}
+		</button>
+	{/snippet}
+</BaseListView>
diff --git a/apps/mana/apps/web/src/lib/modules/presi/ListView.svelte b/apps/mana/apps/web/src/lib/modules/presi/ListView.svelte
index d4f801156..0668232d5 100644
--- a/apps/mana/apps/web/src/lib/modules/presi/ListView.svelte
+++ b/apps/mana/apps/web/src/lib/modules/presi/ListView.svelte
@@ -3,74 +3,57 @@
   Presentation decks list with slide count.
 -->
 <script lang="ts">
-	import { liveQuery } from 'dexie';
+	import { useLiveQueryWithDefault } from '@mana/local-store/svelte';
 	import { db } from '$lib/data/database';
+	import { BaseListView } from '@mana/shared-ui';
 	import type { LocalDeck, LocalSlide } from './types';
 	import type { ViewProps } from '$lib/app-registry';
 
-	let { navigate, goBack, params }: ViewProps = $props();
+	let { navigate }: ViewProps = $props();
 
-	let decks = $state<LocalDeck[]>([]);
-	let slides = $state<LocalSlide[]>([]);
+	const decksQuery = useLiveQueryWithDefault(async () => {
+		const all = await db.table<LocalDeck>('presiDecks').toArray();
+		return all.filter((d) => !d.deletedAt);
+	}, [] as LocalDeck[]);
 
-	$effect(() => {
-		const sub = liveQuery(async () => {
-			return db
-				.table<LocalDeck>('presiDecks')
-				.toArray()
-				.then((all) => all.filter((d) => !d.deletedAt));
-		}).subscribe((val) => {
-			decks = val ?? [];
-		});
-		return () => sub.unsubscribe();
-	});
+	const slidesQuery = useLiveQueryWithDefault(async () => {
+		const all = await db.table<LocalSlide>('slides').toArray();
+		return all.filter((s) => !s.deletedAt);
+	}, [] as LocalSlide[]);
 
-	$effect(() => {
-		const sub = liveQuery(async () => {
-			return db
-				.table<LocalSlide>('slides')
-				.toArray()
-				.then((all) => all.filter((s) => !s.deletedAt));
-		}).subscribe((val) => {
-			slides = val ?? [];
-		});
-		return () => sub.unsubscribe();
-	});
+	const decks = $derived(decksQuery.value);
+	const slides = $derived(slidesQuery.value);
 
 	function slideCount(deckId: string): number {
 		return slides.filter((s) => s.deckId === deckId).length;
 	}
 </script>
 
-<div class="flex h-full flex-col gap-3 p-3 sm:p-4">
-	<p class="text-xs text-white/40">{decks.length} Präsentationen</p>
+<BaseListView items={decks} getKey={(d) => d.id} emptyTitle="Keine Präsentationen">
+	{#snippet header()}
+		<span>{decks.length} Präsentationen</span>
+	{/snippet}
 
-	<div class="flex-1 overflow-auto">
-		{#each decks as deck (deck.id)}
-			<button
-				onclick={() =>
-					navigate('detail', {
-						deckId: deck.id,
-						_siblingIds: decks.map((d) => d.id),
-						_siblingKey: 'deckId',
-					})}
-				class="mb-2 w-full rounded-md border border-white/10 px-3 py-2.5 text-left transition-colors hover:bg-white/5 min-h-[44px]"
-			>
-				<p class="truncate text-sm font-medium text-white/80">{deck.title}</p>
-				<div class="mt-1 flex items-center gap-2 text-xs text-white/40">
-					<span>{slideCount(deck.id)} Folien</span>
-					{#if deck.isPublic}
-						<span class="rounded bg-white/10 px-1.5 py-0.5 text-[10px]">Öffentlich</span>
-					{/if}
-				</div>
-				{#if deck.description}
-					<p class="mt-1 truncate text-xs text-white/30">{deck.description}</p>
+	{#snippet item(deck)}
+		<button
+			onclick={() =>
+				navigate('detail', {
+					deckId: deck.id,
+					_siblingIds: decks.map((d) => d.id),
+					_siblingKey: 'deckId',
+				})}
+			class="mb-2 w-full rounded-md border border-white/10 px-3 py-2.5 text-left transition-colors hover:bg-white/5 min-h-[44px]"
+		>
+			<p class="truncate text-sm font-medium text-white/80">{deck.title}</p>
+			<div class="mt-1 flex items-center gap-2 text-xs text-white/40">
+				<span>{slideCount(deck.id)} Folien</span>
+				{#if deck.isPublic}
+					<span class="rounded bg-white/10 px-1.5 py-0.5 text-[10px]">Öffentlich</span>
 				{/if}
-			</button>
-		{/each}
-
-		{#if decks.length === 0}
-			<p class="py-8 text-center text-sm text-white/30">Keine Präsentationen</p>
-		{/if}
-	</div>
-</div>
+			</div>
+			{#if deck.description}
+				<p class="mt-1 truncate text-xs text-white/30">{deck.description}</p>
+			{/if}
+		</button>
+	{/snippet}
+</BaseListView>
diff --git a/apps/mana/apps/web/src/lib/modules/questions/ListView.svelte b/apps/mana/apps/web/src/lib/modules/questions/ListView.svelte
index 8a77c5cb2..22caf2127 100644
--- a/apps/mana/apps/web/src/lib/modules/questions/ListView.svelte
+++ b/apps/mana/apps/web/src/lib/modules/questions/ListView.svelte
@@ -3,39 +3,28 @@
   Research questions list with status badges.
 -->
 <script lang="ts">
-	import { liveQuery } from 'dexie';
+	import { useLiveQueryWithDefault } from '@mana/local-store/svelte';
 	import { db } from '$lib/data/database';
 	import { decryptRecords } from '$lib/data/crypto';
+	import { BaseListView } from '@mana/shared-ui';
 	import type { LocalQuestion, LocalCollection } from './types';
 	import type { ViewProps } from '$lib/app-registry';
 
-	let { navigate, goBack, params }: ViewProps = $props();
+	let { navigate }: ViewProps = $props();
 
-	let questions = $state<LocalQuestion[]>([]);
-	let collections = $state<LocalCollection[]>([]);
+	const questionsQuery = useLiveQueryWithDefault(async () => {
+		const all = await db.table<LocalQuestion>('questions').toArray();
+		const visible = all.filter((q) => !q.deletedAt);
+		return decryptRecords('questions', visible);
+	}, [] as LocalQuestion[]);
 
-	$effect(() => {
-		const sub = liveQuery(async () => {
-			const all = await db.table<LocalQuestion>('questions').toArray();
-			const visible = all.filter((q) => !q.deletedAt);
-			return decryptRecords('questions', visible);
-		}).subscribe((val) => {
-			questions = val ?? [];
-		});
-		return () => sub.unsubscribe();
-	});
+	const collectionsQuery = useLiveQueryWithDefault(async () => {
+		const all = await db.table<LocalCollection>('questionCollections').toArray();
+		return all.filter((c) => !c.deletedAt);
+	}, [] as LocalCollection[]);
 
-	$effect(() => {
-		const sub = liveQuery(async () => {
-			return db
-				.table<LocalCollection>('questionCollections')
-				.toArray()
-				.then((all) => all.filter((c) => !c.deletedAt));
-		}).subscribe((val) => {
-			collections = val ?? [];
-		});
-		return () => sub.unsubscribe();
-	});
+	const questions = $derived(questionsQuery.value);
+	const collections = $derived(collectionsQuery.value);
 
 	const statusColors: Record<string, string> = {
 		open: 'bg-blue-500/20 text-blue-300',
@@ -58,46 +47,40 @@
 	);
 </script>
 
-<div class="flex h-full flex-col gap-3 p-3 sm:p-4">
-	<div class="flex gap-3 text-xs text-white/40">
+<BaseListView items={sorted} getKey={(q) => q.id} emptyTitle="Keine offenen Fragen">
+	{#snippet header()}
 		<span>{questions.length} Fragen</span>
 		<span>{collections.length} Sammlungen</span>
-	</div>
+	{/snippet}
 
-	<div class="flex-1 overflow-auto">
-		{#each sorted as question (question.id)}
-			<button
-				onclick={() =>
-					navigate('detail', {
-						questionId: question.id,
-						_siblingIds: sorted.map((q) => q.id),
-						_siblingKey: 'questionId',
-					})}
-				class="mb-2 w-full text-left rounded-md border border-white/10 px-3 py-2.5 transition-colors hover:bg-white/5 cursor-pointer min-h-[44px]"
-			>
-				<div class="flex items-start justify-between gap-2">
-					<p class="text-sm font-medium text-white/80">{question.title}</p>
-					<span
-						class="shrink-0 rounded px-1.5 py-0.5 text-[10px] {statusColors[question.status] ?? ''}"
-					>
-						{statusLabels[question.status] ?? question.status}
-					</span>
+	{#snippet item(question)}
+		<button
+			onclick={() =>
+				navigate('detail', {
+					questionId: question.id,
+					_siblingIds: sorted.map((q) => q.id),
+					_siblingKey: 'questionId',
+				})}
+			class="mb-2 w-full text-left rounded-md border border-white/10 px-3 py-2.5 transition-colors hover:bg-white/5 cursor-pointer min-h-[44px]"
+		>
+			<div class="flex items-start justify-between gap-2">
+				<p class="text-sm font-medium text-white/80">{question.title}</p>
+				<span
+					class="shrink-0 rounded px-1.5 py-0.5 text-[10px] {statusColors[question.status] ?? ''}"
+				>
+					{statusLabels[question.status] ?? question.status}
+				</span>
+			</div>
+			{#if question.description}
+				<p class="mt-1 truncate text-xs text-white/30">{question.description}</p>
+			{/if}
+			{#if question.tags.length > 0}
+				<div class="mt-1 flex gap-1">
+					{#each question.tags.slice(0, 3) as tag}
+						<span class="rounded bg-white/5 px-1.5 py-0.5 text-[10px] text-white/40">{tag}</span>
+					{/each}
 				</div>
-				{#if question.description}
-					<p class="mt-1 truncate text-xs text-white/30">{question.description}</p>
-				{/if}
-				{#if question.tags.length > 0}
-					<div class="mt-1 flex gap-1">
-						{#each question.tags.slice(0, 3) as tag}
-							<span class="rounded bg-white/5 px-1.5 py-0.5 text-[10px] text-white/40">{tag}</span>
-						{/each}
-					</div>
-				{/if}
-			</button>
-		{/each}
-
-		{#if sorted.length === 0}
-			<p class="py-8 text-center text-sm text-white/30">Keine offenen Fragen</p>
-		{/if}
-	</div>
-</div>
+			{/if}
+		</button>
+	{/snippet}
+</BaseListView>
diff --git a/apps/mana/apps/web/src/lib/modules/skilltree/ListView.svelte b/apps/mana/apps/web/src/lib/modules/skilltree/ListView.svelte
index dbba7c137..d144d4b4b 100644
--- a/apps/mana/apps/web/src/lib/modules/skilltree/ListView.svelte
+++ b/apps/mana/apps/web/src/lib/modules/skilltree/ListView.svelte
@@ -3,88 +3,61 @@
   Skills overview with XP and levels.
 -->
 <script lang="ts">
-	import { liveQuery } from 'dexie';
+	import { useLiveQueryWithDefault } from '@mana/local-store/svelte';
 	import { db } from '$lib/data/database';
+	import { BaseListView } from '@mana/shared-ui';
 	import type { ViewProps } from '$lib/app-registry';
-	import type { LocalSkill, LocalActivity } from './types';
+	import type { LocalSkill } from './types';
 	import { LEVEL_NAMES, BRANCH_INFO, xpProgress, type SkillBranch } from './types';
 
-	let { navigate, goBack, params }: ViewProps = $props();
+	let { navigate }: ViewProps = $props();
 
-	let skills = $state<LocalSkill[]>([]);
-	let activities = $state<LocalActivity[]>([]);
+	const skillsQuery = useLiveQueryWithDefault(async () => {
+		const all = await db.table<LocalSkill>('skills').toArray();
+		return all.filter((s) => !s.deletedAt);
+	}, [] as LocalSkill[]);
 
-	$effect(() => {
-		const sub = liveQuery(async () => {
-			return db
-				.table<LocalSkill>('skills')
-				.toArray()
-				.then((all) => all.filter((s) => !s.deletedAt));
-		}).subscribe((val) => {
-			skills = val ?? [];
-		});
-		return () => sub.unsubscribe();
-	});
-
-	$effect(() => {
-		const sub = liveQuery(async () => {
-			return db
-				.table<LocalActivity>('activities')
-				.toArray()
-				.then((all) => all.filter((a) => !a.deletedAt));
-		}).subscribe((val) => {
-			activities = val ?? [];
-		});
-		return () => sub.unsubscribe();
-	});
+	const skills = $derived(skillsQuery.value);
 
 	const totalXp = $derived(skills.reduce((sum, s) => sum + s.totalXp, 0));
 	const highestLevel = $derived(Math.max(0, ...skills.map((s) => s.level)));
 </script>
 
-<div class="flex h-full flex-col gap-3 p-3 sm:p-4">
-	<!-- Stats -->
-	<div class="flex gap-3 text-xs text-white/40">
+<BaseListView items={skills} getKey={(s) => s.id} emptyTitle="Keine Skills angelegt">
+	{#snippet header()}
 		<span>{totalXp} XP</span>
 		<span>Level {highestLevel}</span>
 		<span>{skills.length} Skills</span>
-	</div>
+	{/snippet}
 
-	<!-- Skills list -->
-	<div class="flex-1 overflow-auto">
-		{#each skills as skill (skill.id)}
-			{@const branch = BRANCH_INFO[skill.branch as SkillBranch]}
-			{@const progress = xpProgress(skill.currentXp, skill.level)}
-			<button
-				onclick={() =>
-					navigate('detail', {
-						skillId: skill.id,
-						_siblingIds: skills.map((s) => s.id),
-						_siblingKey: 'skillId',
-					})}
-				class="mb-2 w-full rounded-md border border-white/10 px-3 py-2.5 text-left transition-colors hover:bg-white/5 min-h-[44px]"
-			>
-				<div class="flex items-center justify-between">
-					<div class="flex items-center gap-2">
-						<span class="text-sm">{skill.icon}</span>
-						<p class="text-sm font-medium text-white/80">{skill.name}</p>
-					</div>
-					<span class="text-xs text-white/50">Lv. {skill.level}</span>
+	{#snippet item(skill)}
+		{@const branch = BRANCH_INFO[skill.branch as SkillBranch]}
+		{@const progress = xpProgress(skill.currentXp, skill.level)}
+		<button
+			onclick={() =>
+				navigate('detail', {
+					skillId: skill.id,
+					_siblingIds: skills.map((s) => s.id),
+					_siblingKey: 'skillId',
+				})}
+			class="mb-2 w-full rounded-md border border-white/10 px-3 py-2.5 text-left transition-colors hover:bg-white/5 min-h-[44px]"
+		>
+			<div class="flex items-center justify-between">
+				<div class="flex items-center gap-2">
+					<span class="text-sm">{skill.icon}</span>
+					<p class="text-sm font-medium text-white/80">{skill.name}</p>
 				</div>
-				<div class="mt-1 flex items-center gap-2">
-					<div class="h-1 flex-1 rounded-full bg-white/10">
-						<div class="h-full rounded-full bg-white/30" style="width: {progress}%"></div>
-					</div>
-					<span class="text-[10px] text-white/30">{skill.currentXp} XP</span>
+				<span class="text-xs text-white/50">Lv. {skill.level}</span>
+			</div>
+			<div class="mt-1 flex items-center gap-2">
+				<div class="h-1 flex-1 rounded-full bg-white/10">
+					<div class="h-full rounded-full bg-white/30" style="width: {progress}%"></div>
 				</div>
-				<p class="mt-0.5 text-[10px] text-white/30">
-					{branch?.name ?? skill.branch} — {LEVEL_NAMES[skill.level] ?? 'Unbekannt'}
-				</p>
-			</button>
-		{/each}
-
-		{#if skills.length === 0}
-			<p class="py-8 text-center text-sm text-white/30">Keine Skills angelegt</p>
-		{/if}
-	</div>
-</div>
+				<span class="text-[10px] text-white/30">{skill.currentXp} XP</span>
+			</div>
+			<p class="mt-0.5 text-[10px] text-white/30">
+				{branch?.name ?? skill.branch} — {LEVEL_NAMES[skill.level] ?? 'Unbekannt'}
+			</p>
+		</button>
+	{/snippet}
+</BaseListView>
diff --git a/apps/mana/apps/web/src/lib/modules/storage/ListView.svelte b/apps/mana/apps/web/src/lib/modules/storage/ListView.svelte
index 1aa572dfa..0ba666df7 100644
--- a/apps/mana/apps/web/src/lib/modules/storage/ListView.svelte
+++ b/apps/mana/apps/web/src/lib/modules/storage/ListView.svelte
@@ -3,39 +3,30 @@
   File browser with recent files and folders.
 -->
 <script lang="ts">
-	import { liveQuery } from 'dexie';
+	import { useLiveQueryWithDefault } from '@mana/local-store/svelte';
 	import { db } from '$lib/data/database';
 	import { decryptRecords } from '$lib/data/crypto';
+	import { BaseListView } from '@mana/shared-ui';
 	import type { LocalFile, LocalFolder } from './types';
 	import type { ViewProps } from '$lib/app-registry';
 
-	let { navigate, goBack, params }: ViewProps = $props();
+	let { navigate }: ViewProps = $props();
 
-	let files = $state<LocalFile[]>([]);
-	let folders = $state<LocalFolder[]>([]);
+	const filesQuery = useLiveQueryWithDefault(async () => {
+		const all = await db.table<LocalFile>('files').toArray();
+		const visible = all.filter((f) => !f.deletedAt && !f.isDeleted);
+		return decryptRecords('files', visible);
+	}, [] as LocalFile[]);
 
-	$effect(() => {
-		const sub = liveQuery(async () => {
-			const all = await db.table<LocalFile>('files').toArray();
-			const visible = all.filter((f) => !f.deletedAt && !f.isDeleted);
-			return decryptRecords('files', visible);
-		}).subscribe((val) => {
-			files = val ?? [];
-		});
-		return () => sub.unsubscribe();
-	});
+	const foldersQuery = useLiveQueryWithDefault(async () => {
+		const all = await db.table<LocalFolder>('folders').toArray();
+		return all.filter((f) => !f.deletedAt && !f.isDeleted);
+	}, [] as LocalFolder[]);
 
-	$effect(() => {
-		const sub = liveQuery(async () => {
-			return db
-				.table<LocalFolder>('folders')
-				.toArray()
-				.then((all) => all.filter((f) => !f.deletedAt && !f.isDeleted));
-		}).subscribe((val) => {
-			folders = val ?? [];
-		});
-		return () => sub.unsubscribe();
-	});
+	const files = $derived(filesQuery.value);
+	const folders = $derived(foldersQuery.value);
+
+	const rootFolders = $derived(folders.filter((f) => !f.parentFolderId));
 
 	const recentFiles = $derived(
 		[...files].sort((a, b) => (b.updatedAt ?? '').localeCompare(a.updatedAt ?? '')).slice(0, 15)
@@ -56,17 +47,16 @@
 	}
 </script>
 
-<div class="flex h-full flex-col gap-3 p-3 sm:p-4">
-	<div class="flex gap-3 text-xs text-white/40">
+<BaseListView items={recentFiles} getKey={(f) => f.id} emptyTitle="Keine Dateien">
+	{#snippet header()}
 		<span>{folders.length} Ordner</span>
 		<span>{files.length} Dateien</span>
-	</div>
+	{/snippet}
 
-	<div class="flex-1 overflow-auto">
-		<!-- Root folders -->
-		{#if folders.filter((f) => !f.parentFolderId).length > 0}
+	{#snippet listHeader()}
+		{#if rootFolders.length > 0}
 			<h3 class="mb-2 text-xs font-medium text-white/50">Ordner</h3>
-			{#each folders.filter((f) => !f.parentFolderId) as folder (folder.id)}
+			{#each rootFolders as folder (folder.id)}
 				<div
 					class="flex min-h-[44px] items-center gap-2 rounded-md px-2 py-1.5 transition-colors hover:bg-white/5"
 				>
@@ -75,27 +65,22 @@
 				</div>
 			{/each}
 		{/if}
-
-		<!-- Recent files -->
 		<h3 class="mb-2 mt-3 text-xs font-medium text-white/50">Zuletzt</h3>
-		{#each recentFiles as file (file.id)}
-			<button
-				onclick={() =>
-					navigate('detail', {
-						fileId: file.id,
-						_siblingIds: recentFiles.map((f) => f.id),
-						_siblingKey: 'fileId',
-					})}
-				class="flex w-full min-h-[44px] items-center gap-2 rounded-md px-2 py-1.5 text-left transition-colors hover:bg-white/5"
-			>
-				<span class="text-sm">{@html fileIcon(file.mimeType)}</span>
-				<span class="min-w-0 flex-1 truncate text-sm text-white/70">{file.name}</span>
-				<span class="shrink-0 text-xs text-white/30">{formatSize(file.size)}</span>
-			</button>
-		{/each}
+	{/snippet}
 
-		{#if recentFiles.length === 0}
-			<p class="py-8 text-center text-sm text-white/30">Keine Dateien</p>
-		{/if}
-	</div>
-</div>
+	{#snippet item(file)}
+		<button
+			onclick={() =>
+				navigate('detail', {
+					fileId: file.id,
+					_siblingIds: recentFiles.map((f) => f.id),
+					_siblingKey: 'fileId',
+				})}
+			class="flex w-full min-h-[44px] items-center gap-2 rounded-md px-2 py-1.5 text-left transition-colors hover:bg-white/5"
+		>
+			<span class="text-sm">{@html fileIcon(file.mimeType)}</span>
+			<span class="min-w-0 flex-1 truncate text-sm text-white/70">{file.name}</span>
+			<span class="shrink-0 text-xs text-white/30">{formatSize(file.size)}</span>
+		</button>
+	{/snippet}
+</BaseListView>
diff --git a/apps/mana/apps/web/src/lib/modules/times/ListView.svelte b/apps/mana/apps/web/src/lib/modules/times/ListView.svelte
index fe12fc71c..64e1c54a0 100644
--- a/apps/mana/apps/web/src/lib/modules/times/ListView.svelte
+++ b/apps/mana/apps/web/src/lib/modules/times/ListView.svelte
@@ -3,18 +3,18 @@
   Inline timer with start/stop + today's time entries.
 -->
 <script lang="ts">
-	import { liveQuery } from 'dexie';
+	import { useLiveQueryWithDefault } from '@mana/local-store/svelte';
 	import { db } from '$lib/data/database';
 	import { timerStore } from '$lib/modules/times/stores/timer.svelte';
-	import { formatDuration } from '$lib/modules/times/queries';
+	import { formatDuration, toTimeEntry } from '$lib/modules/times/queries';
+	import { BaseListView } from '@mana/shared-ui';
 	import { Play, Stop } from '@mana/shared-icons';
 	import type { ViewProps } from '$lib/app-registry';
-	import type { LocalTimeEntry, LocalProject } from './types';
+	import type { LocalTimeEntry, LocalProject, TimeEntry } from './types';
+	import type { LocalTimeBlock } from '$lib/data/time-blocks/types';
 
-	let { navigate, goBack, params }: ViewProps = $props();
+	let { navigate }: ViewProps = $props();
 
-	let entries = $state<LocalTimeEntry[]>([]);
-	let projects = $state<LocalProject[]>([]);
 	let description = $state('');
 
 	const todayStr = new Date().toISOString().split('T')[0];
@@ -31,29 +31,25 @@
 		}
 	});
 
-	$effect(() => {
-		const sub = liveQuery(async () => {
-			return db
-				.table<LocalTimeEntry>('timeEntries')
-				.toArray()
-				.then((all) => all.filter((e) => !e.deletedAt));
-		}).subscribe((val) => {
-			entries = val ?? [];
-		});
-		return () => sub.unsubscribe();
-	});
+	const entriesQuery = useLiveQueryWithDefault(async () => {
+		const locals = await db.table<LocalTimeEntry>('timeEntries').toArray();
+		const active = locals.filter((e) => !e.deletedAt);
+		const blockIds = active.map((e) => e.timeBlockId).filter(Boolean);
+		const blocks =
+			blockIds.length > 0
+				? await db.table<LocalTimeBlock>('timeBlocks').where('id').anyOf(blockIds).toArray()
+				: [];
+		const blocksById = new Map(blocks.map((b) => [b.id, b]));
+		return active.map((e) => toTimeEntry(e, blocksById.get(e.timeBlockId)));
+	}, [] as TimeEntry[]);
 
-	$effect(() => {
-		const sub = liveQuery(async () => {
-			return db
-				.table<LocalProject>('timesProjects')
-				.toArray()
-				.then((all) => all.filter((p) => !p.deletedAt));
-		}).subscribe((val) => {
-			projects = val ?? [];
-		});
-		return () => sub.unsubscribe();
-	});
+	const projectsQuery = useLiveQueryWithDefault(async () => {
+		const all = await db.table<LocalProject>('timesProjects').toArray();
+		return all.filter((p) => !p.deletedAt);
+	}, [] as LocalProject[]);
+
+	const entries = $derived(entriesQuery.value);
+	const projects = $derived(projectsQuery.value);
 
 	const todayEntries = $derived(
 		entries
@@ -98,63 +94,59 @@
 	}
 </script>
 
-<div class="flex h-full flex-col gap-3 p-3 sm:p-4">
-	<!-- Inline Timer -->
-	<div class="flex items-center gap-2">
-		<button
-			onclick={handleStartStop}
-			class="flex h-7 w-7 shrink-0 items-center justify-center rounded-md transition-colors {timerStore.isRunning
-				? 'bg-red-500/80 text-white hover:bg-red-500'
-				: 'bg-white/10 text-white/50 hover:bg-green-500/80 hover:text-white'}"
-		>
-			{#if timerStore.isRunning}
-				<Stop size={14} weight="fill" />
-			{:else}
-				<Play size={14} weight="fill" />
-			{/if}
-		</button>
-		<input
-			type="text"
-			value={description}
-			oninput={(e) => handleDescriptionInput((e.target as HTMLInputElement).value)}
-			placeholder="Was trackst du?"
-			class="min-w-0 flex-1 rounded-md border border-white/10 bg-white/5 px-2.5 py-1.5 text-xs text-white/90 placeholder:text-white/30 focus:border-white/20 focus:outline-none"
-		/>
-		{#if timerStore.isRunning}
-			<div class="flex h-7 items-center gap-1.5 rounded-full bg-green-500/10 px-2.5">
-				<div class="h-1.5 w-1.5 animate-pulse rounded-full bg-green-400"></div>
-				<span class="font-mono text-xs text-green-400">
-					{formatDuration(timerStore.elapsedSeconds)}
-				</span>
-			</div>
-		{/if}
-	</div>
-
-	<!-- Today stats -->
-	<div class="flex items-center justify-between text-xs text-white/40">
-		<span>Heute: {todayEntries.length} Eintr{todayEntries.length === 1 ? 'ag' : 'age'}</span>
-		<span class="font-medium text-white/60">{fmtCompact(totalToday)}</span>
-	</div>
-
-	<!-- Entry list -->
-	<div class="flex-1 overflow-auto">
-		{#each todayEntries as entry (entry.id)}
+<BaseListView items={todayEntries} getKey={(e) => e.id} emptyTitle="Noch keine Zeiteinträge heute">
+	{#snippet toolbar()}
+		<!-- Inline Timer -->
+		<div class="flex items-center gap-2">
 			<button
-				onclick={() => navigate('detail', { entryId: entry.id })}
-				class="mb-1 w-full min-h-[44px] rounded-md px-3 py-2 text-left transition-colors hover:bg-white/5"
+				onclick={handleStartStop}
+				class="flex h-7 w-7 shrink-0 items-center justify-center rounded-md transition-colors {timerStore.isRunning
+					? 'bg-red-500/80 text-white hover:bg-red-500'
+					: 'bg-white/10 text-white/50 hover:bg-green-500/80 hover:text-white'}"
 			>
-				<div class="flex items-center justify-between">
-					<p class="truncate text-sm text-white/80">
-						{entry.description || 'Ohne Beschreibung'}
-					</p>
-					<span class="shrink-0 text-xs text-white/50">{fmtCompact(entry.duration)}</span>
-				</div>
-				<p class="text-xs text-white/30">{projectName(entry.projectId)}</p>
+				{#if timerStore.isRunning}
+					<Stop size={14} weight="fill" />
+				{:else}
+					<Play size={14} weight="fill" />
+				{/if}
 			</button>
-		{/each}
+			<input
+				type="text"
+				value={description}
+				oninput={(e) => handleDescriptionInput((e.target as HTMLInputElement).value)}
+				placeholder="Was trackst du?"
+				class="min-w-0 flex-1 rounded-md border border-white/10 bg-white/5 px-2.5 py-1.5 text-xs text-white/90 placeholder:text-white/30 focus:border-white/20 focus:outline-none"
+			/>
+			{#if timerStore.isRunning}
+				<div class="flex h-7 items-center gap-1.5 rounded-full bg-green-500/10 px-2.5">
+					<div class="h-1.5 w-1.5 animate-pulse rounded-full bg-green-400"></div>
+					<span class="font-mono text-xs text-green-400">
+						{formatDuration(timerStore.elapsedSeconds)}
+					</span>
+				</div>
+			{/if}
+		</div>
+	{/snippet}
 
-		{#if todayEntries.length === 0 && !timerStore.isRunning}
-			<p class="py-8 text-center text-sm text-white/30">Noch keine Zeiteintr&auml;ge heute</p>
-		{/if}
-	</div>
-</div>
+	{#snippet header()}
+		<span class="flex-1"
+			>Heute: {todayEntries.length} Eintr{todayEntries.length === 1 ? 'ag' : 'age'}</span
+		>
+		<span class="font-medium text-white/60">{fmtCompact(totalToday)}</span>
+	{/snippet}
+
+	{#snippet item(entry)}
+		<button
+			onclick={() => navigate('detail', { entryId: entry.id })}
+			class="mb-1 w-full min-h-[44px] rounded-md px-3 py-2 text-left transition-colors hover:bg-white/5"
+		>
+			<div class="flex items-center justify-between">
+				<p class="truncate text-sm text-white/80">
+					{entry.description || 'Ohne Beschreibung'}
+				</p>
+				<span class="shrink-0 text-xs text-white/50">{fmtCompact(entry.duration)}</span>
+			</div>
+			<p class="text-xs text-white/30">{projectName(entry.projectId)}</p>
+		</button>
+	{/snippet}
+</BaseListView>
diff --git a/apps/mana/apps/web/src/lib/modules/uload/ListView.svelte b/apps/mana/apps/web/src/lib/modules/uload/ListView.svelte
index 3aacdcf34..eb98d141e 100644
--- a/apps/mana/apps/web/src/lib/modules/uload/ListView.svelte
+++ b/apps/mana/apps/web/src/lib/modules/uload/ListView.svelte
@@ -3,39 +3,28 @@
   Short links list with click counts.
 -->
 <script lang="ts">
-	import { liveQuery } from 'dexie';
+	import { useLiveQueryWithDefault } from '@mana/local-store/svelte';
 	import { db } from '$lib/data/database';
 	import { decryptRecords } from '$lib/data/crypto';
+	import { BaseListView } from '@mana/shared-ui';
 	import type { LocalLink, LocalFolder } from './types';
 	import type { ViewProps } from '$lib/app-registry';
 
-	let { navigate, goBack, params }: ViewProps = $props();
+	let { navigate }: ViewProps = $props();
 
-	let links = $state<LocalLink[]>([]);
-	let folders = $state<LocalFolder[]>([]);
+	const linksQuery = useLiveQueryWithDefault(async () => {
+		const all = await db.table<LocalLink>('links').toArray();
+		const visible = all.filter((l) => !l.deletedAt && l.isActive);
+		return decryptRecords('links', visible);
+	}, [] as LocalLink[]);
 
-	$effect(() => {
-		const sub = liveQuery(async () => {
-			const all = await db.table<LocalLink>('links').toArray();
-			const visible = all.filter((l) => !l.deletedAt && l.isActive);
-			return decryptRecords('links', visible);
-		}).subscribe((val) => {
-			links = val ?? [];
-		});
-		return () => sub.unsubscribe();
-	});
+	const foldersQuery = useLiveQueryWithDefault(async () => {
+		const all = await db.table<LocalFolder>('uloadFolders').toArray();
+		return all.filter((f) => !f.deletedAt);
+	}, [] as LocalFolder[]);
 
-	$effect(() => {
-		const sub = liveQuery(async () => {
-			return db
-				.table<LocalFolder>('uloadFolders')
-				.toArray()
-				.then((all) => all.filter((f) => !f.deletedAt));
-		}).subscribe((val) => {
-			folders = val ?? [];
-		});
-		return () => sub.unsubscribe();
-	});
+	const links = $derived(linksQuery.value);
+	const folders = $derived(foldersQuery.value);
 
 	const totalClicks = $derived(links.reduce((sum, l) => sum + l.clickCount, 0));
 
@@ -52,39 +41,33 @@
 	}
 </script>
 
-<div class="flex h-full flex-col gap-3 p-3 sm:p-4">
-	<div class="flex gap-3 text-xs text-white/40">
+<BaseListView items={sorted} getKey={(l) => l.id} emptyTitle="Keine Links">
+	{#snippet header()}
 		<span>{links.length} Links</span>
 		<span>{totalClicks} Klicks</span>
 		<span>{folders.length} Ordner</span>
-	</div>
+	{/snippet}
 
-	<div class="flex-1 overflow-auto">
-		{#each sorted as link (link.id)}
-			<button
-				onclick={() =>
-					navigate('detail', {
-						linkId: link.id,
-						_siblingIds: sorted.map((l) => l.id),
-						_siblingKey: 'linkId',
-					})}
-				class="mb-1 w-full min-h-[44px] text-left rounded-md px-3 py-2 transition-colors hover:bg-white/5 cursor-pointer"
-			>
-				<div class="flex items-center justify-between">
-					<p class="truncate text-sm font-medium text-white/80">
-						{link.title || link.shortCode}
-					</p>
-					<span class="shrink-0 text-xs text-white/40">{link.clickCount}</span>
-				</div>
-				<p class="truncate text-xs text-white/30">{hostname(link.originalUrl)}</p>
-				{#if link.customCode}
-					<p class="text-xs text-blue-400/60">/{link.customCode}</p>
-				{/if}
-			</button>
-		{/each}
-
-		{#if sorted.length === 0}
-			<p class="py-8 text-center text-sm text-white/30">Keine Links</p>
-		{/if}
-	</div>
-</div>
+	{#snippet item(link)}
+		<button
+			onclick={() =>
+				navigate('detail', {
+					linkId: link.id,
+					_siblingIds: sorted.map((l) => l.id),
+					_siblingKey: 'linkId',
+				})}
+			class="mb-1 w-full min-h-[44px] text-left rounded-md px-3 py-2 transition-colors hover:bg-white/5 cursor-pointer"
+		>
+			<div class="flex items-center justify-between">
+				<p class="truncate text-sm font-medium text-white/80">
+					{link.title || link.shortCode}
+				</p>
+				<span class="shrink-0 text-xs text-white/40">{link.clickCount}</span>
+			</div>
+			<p class="truncate text-xs text-white/30">{hostname(link.originalUrl)}</p>
+			{#if link.customCode}
+				<p class="text-xs text-blue-400/60">/{link.customCode}</p>
+			{/if}
+		</button>
+	{/snippet}
+</BaseListView>
diff --git a/packages/shared-ui/src/index.ts b/packages/shared-ui/src/index.ts
index 0187ec2dd..e6624c60f 100644
--- a/packages/shared-ui/src/index.ts
+++ b/packages/shared-ui/src/index.ts
@@ -67,7 +67,7 @@ export { ModalFooter, DataCard, PageHeader, KeyboardShortcutsPanel } from './mol
 export { ConfirmationPopover } from './molecules';
 
 // Organisms
-export { Modal, ConfirmationModal, FormModal, AppSlider } from './organisms';
+export { Modal, ConfirmationModal, FormModal, AppSlider, BaseListView } from './organisms';
 export type { AppItem } from './organisms';
 
 // Network Graph
diff --git a/packages/shared-ui/src/organisms/BaseListView.svelte b/packages/shared-ui/src/organisms/BaseListView.svelte
new file mode 100644
index 000000000..19e27f3b1
--- /dev/null
+++ b/packages/shared-ui/src/organisms/BaseListView.svelte
@@ -0,0 +1,101 @@
+<script lang="ts" generics="T">
+	/**
+	 * BaseListView — shared scaffolding for module ListView components.
+	 *
+	 * Encodes the workbench convention every Mana module's ListView shares:
+	 *   wrapper padding → optional stats header → scrollable item region → empty state.
+	 *
+	 * Per-item rendering and data fetching stay with the consumer:
+	 *   - Pass `items` (already filtered & decrypted via queries.ts).
+	 *   - Provide an `item` snippet that renders one row.
+	 *   - Provide an optional `header` snippet for stat counts or filters.
+	 *
+	 * @example
+	 * ```svelte
+	 * <BaseListView items={sorted} getKey={(q) => q.id} emptyTitle="Keine Fragen">
+	 *   {#snippet header()}
+	 *     <span>{questions.length} Fragen</span>
+	 *   {/snippet}
+	 *   {#snippet item(question)}
+	 *     <button onclick={() => navigate('detail', { id: question.id })}>
+	 *       {question.title}
+	 *     </button>
+	 *   {/snippet}
+	 * </BaseListView>
+	 * ```
+	 */
+	import type { Snippet } from 'svelte';
+	import { EmptyState } from '../molecules';
+
+	interface Props<TItem> {
+		/** Items to render. Should already be filtered (deletedAt) and decrypted. */
+		items: TItem[];
+		/** Stable key extractor for the {#each} block. */
+		getKey: (item: TItem) => string | number;
+		/** Snippet that renders a single item row. */
+		item: Snippet<[TItem, number]>;
+		/** Optional header snippet (e.g. stat counts, filters). */
+		header?: Snippet;
+		/** Optional snippet rendered above the items but inside the scroll area. */
+		listHeader?: Snippet;
+		/** Optional snippet rendered at the very top, outside the scroll area (toolbar, voice bar, ...). */
+		toolbar?: Snippet;
+		/** Empty-state title. */
+		emptyTitle?: string;
+		/** Empty-state message. */
+		emptyMessage?: string;
+		/** Custom empty-state icon snippet. */
+		emptyIcon?: Snippet;
+		/** Override the entire empty area. */
+		empty?: Snippet;
+		/** Optional outer class override. */
+		class?: string;
+		/** Optional class for the inner scroll/list area. Use this to switch to grid, etc. */
+		listClass?: string;
+	}
+
+	let {
+		items,
+		getKey,
+		item,
+		header,
+		listHeader,
+		toolbar,
+		emptyTitle = 'Nichts hier',
+		emptyMessage,
+		emptyIcon,
+		empty,
+		class: className = '',
+		listClass = '',
+	}: Props<T> = $props();
+</script>
+
+<div class="flex h-full flex-col gap-3 p-3 sm:p-4 {className}">
+	{#if toolbar}
+		{@render toolbar()}
+	{/if}
+
+	{#if header}
+		<div class="flex gap-3 text-xs text-white/40">
+			{@render header()}
+		</div>
+	{/if}
+
+	<div class="flex-1 overflow-auto {listClass}">
+		{#if listHeader}
+			{@render listHeader()}
+		{/if}
+
+		{#each items as entry, i (getKey(entry))}
+			{@render item(entry, i)}
+		{/each}
+
+		{#if items.length === 0}
+			{#if empty}
+				{@render empty()}
+			{:else}
+				<EmptyState variant="compact" title={emptyTitle} message={emptyMessage} icon={emptyIcon} />
+			{/if}
+		{/if}
+	</div>
+</div>
diff --git a/packages/shared-ui/src/organisms/index.ts b/packages/shared-ui/src/organisms/index.ts
index f1fefa964..610da9bfd 100644
--- a/packages/shared-ui/src/organisms/index.ts
+++ b/packages/shared-ui/src/organisms/index.ts
@@ -2,6 +2,7 @@ export { default as Modal } from './Modal.svelte';
 export { default as ConfirmationModal } from './ConfirmationModal.svelte';
 export { default as FormModal } from './FormModal.svelte';
 export { default as AppSlider } from './AppSlider.svelte';
+export { default as BaseListView } from './BaseListView.svelte';
 export type { AppItem } from './AppSlider.types';
 
 // Network Graph