diff --git a/src/lib/api/notificationsApi.ts b/src/lib/api/notificationsApi.ts
new file mode 100644
index 0000000..6416220
--- /dev/null
+++ b/src/lib/api/notificationsApi.ts
@@ -0,0 +1,91 @@
+/**
+ * API service layer for notifications.
+ * Handles all HTTP communication with the backend.
+ */
+
+import type { Notification } from '$lib/types/notification';
+
+export type Fetcher = typeof fetch;
+
+export interface NotificationsApiDeps {
+	fetcher: Fetcher;
+}
+
+export interface NotificationsPaginatedResponse {
+	data: Notification[];
+	pagination: {
+		total: number;
+		hasMore: boolean;
+	};
+}
+
+export interface UnreadCountResponse {
+	count: number;
+}
+
+export function createNotificationsApi({ fetcher }: NotificationsApiDeps) {
+	const fetchUnreadCount = async (): Promise<UnreadCountResponse> => {
+		const res = await fetcher('/api/notifications/unread-count');
+
+		if (!res.ok) {
+			throw new Error('Failed to fetch unread count');
+		}
+
+		return (await res.json()) as UnreadCountResponse;
+	};
+
+	const fetchNotifications = async (
+		page: number,
+		limit: number = 10
+	): Promise<NotificationsPaginatedResponse> => {
+		const res = await fetcher(`/api/notifications?page=${page}&limit=${limit}`);
+
+		if (!res.ok) {
+			throw new Error('Failed to fetch notifications');
+		}
+
+		return (await res.json()) as NotificationsPaginatedResponse;
+	};
+
+	const markAsRead = async (notificationId: string): Promise<void> => {
+		const res = await fetcher(`/api/notifications/${notificationId}`, {
+			method: 'PATCH',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify({ read: true })
+		});
+
+		if (!res.ok) {
+			throw new Error('Failed to mark notification as read');
+		}
+	};
+
+	const markAllAsRead = async (): Promise<void> => {
+		const res = await fetcher('/api/notifications/mark-all-read', {
+			method: 'PATCH'
+		});
+
+		if (!res.ok) {
+			throw new Error('Failed to mark all notifications as read');
+		}
+	};
+
+	const dismiss = async (notificationId: string): Promise<void> => {
+		const res = await fetcher(`/api/notifications/${notificationId}`, {
+			method: 'DELETE'
+		});
+
+		if (!res.ok) {
+			throw new Error('Failed to dismiss notification');
+		}
+	};
+
+	return {
+		fetchUnreadCount,
+		fetchNotifications,
+		markAsRead,
+		markAllAsRead,
+		dismiss
+	};
+}
+
+export type NotificationsApi = ReturnType<typeof createNotificationsApi>;
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index 2c7a606..7e9565f 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -9,6 +9,7 @@
 	import { LogOutIcon, MenuIcon, XIcon } from '@lucide/svelte';
 	import { Avatar } from '@skeletonlabs/skeleton-svelte';
 	import { avatarUrl } from '$lib/stores/avatar';
+	import { notificationsPresenter } from '$lib/presenters/notifications';
 	import NotificationBell from './NotificationBell.svelte';
 
 	let {
@@ -70,6 +71,9 @@
 			sessionStorage.removeItem(STORAGE_KEYS.SETTINGS_CACHE);
 			sessionStorage.removeItem(STORAGE_KEYS.QUOTE_CACHE);
 
+			// Reset notifications presenter state
+			notificationsPresenter.reset();
+
 			await signOut();
 			location.href = routes.login;
 		} catch (e) {
diff --git a/src/lib/components/NotificationBell.svelte b/src/lib/components/NotificationBell.svelte
index 41d0b95..79ac5c8 100644
--- a/src/lib/components/NotificationBell.svelte
+++ b/src/lib/components/NotificationBell.svelte
@@ -2,19 +2,22 @@
 	import { onMount } from 'svelte';
 	import { Popover, Portal } from '@skeletonlabs/skeleton-svelte';
 	import { Bell, CheckCheck, Loader2 } from '@lucide/svelte';
-	import { notificationStore } from '$lib/stores/notifications.svelte';
+	import { notificationsPresenter } from '$lib/presenters/notifications';
 	import NotificationItem from './NotificationItem.svelte';
 
 	let isOpen = $state(false);
 	let isClosing = $state(false);
 
+	// Subscribe to presenter state
+	const presenterState = notificationsPresenter.state;
+
 	onMount(() => {
-		notificationStore.fetchUnreadCount();
+		notificationsPresenter.fetchUnreadCount();
 	});
 
 	async function handleOpen() {
-		if (!notificationStore.initialized) {
-			await notificationStore.fetchNotifications(true);
+		if (!$presenterState.initialized) {
+			await notificationsPresenter.fetchNotifications(true);
 		}
 	}
 
@@ -35,19 +38,19 @@
 	}
 
 	function handleMarkRead(id: string) {
-		notificationStore.markAsRead(id);
+		notificationsPresenter.markAsRead(id);
 	}
 
 	function handleDismiss(id: string) {
-		notificationStore.dismiss(id);
+		notificationsPresenter.dismiss(id);
 	}
 
 	function handleMarkAllRead() {
-		notificationStore.markAllAsRead();
+		notificationsPresenter.markAllAsRead();
 	}
 
 	function handleLoadMore() {
-		notificationStore.loadMore();
+		notificationsPresenter.loadMore();
 	}
 </script>
 
@@ -61,11 +64,11 @@
 		aria-label="Notifications"
 	>
 		<Bell class="size-5 text-surface-600 dark:text-surface-400" />
-		{#if notificationStore.unreadCount > 0}
+		{#if $presenterState.unreadCount > 0}
 			<span
 				class="absolute -top-0.5 -right-0.5 min-w-5 h-5 px-1.5 flex items-center justify-center text-xs font-bold text-white bg-red-500 rounded-full"
 			>
-				{notificationStore.unreadCount > 99 ? '99+' : notificationStore.unreadCount}
+				{$presenterState.unreadCount > 99 ? '99+' : $presenterState.unreadCount}
 			</span>
 		{/if}
 	</Popover.Trigger>
@@ -86,7 +89,7 @@
 					>
 						Notifications
 					</Popover.Title>
-					{#if notificationStore.unreadCount > 0}
+					{#if $presenterState.unreadCount > 0}
 						<button
 							type="button"
 							class="flex items-center gap-1.5 px-2 py-1 -mr-2 rounded-lg text-xs sm:text-xs text-primary-500 hover:text-primary-600 hover:bg-primary-50 dark:hover:text-primary-400 dark:hover:bg-primary-950/50 transition-colors"
@@ -100,11 +103,11 @@
 
 				<!-- Notification list -->
 				<div class="flex-1 overflow-y-auto">
-					{#if notificationStore.loading && notificationStore.notifications.length === 0}
+					{#if $presenterState.loading && $presenterState.notifications.length === 0}
 						<div class="flex items-center justify-center py-12">
 							<Loader2 class="size-6 text-surface-400 animate-spin" />
 						</div>
-					{:else if notificationStore.notifications.length === 0}
+					{:else if $presenterState.notifications.length === 0}
 						<div class="flex flex-col items-center justify-center py-12 px-4 text-center">
 							<Bell class="size-10 text-surface-300 dark:text-surface-600 mb-3" />
 							<Popover.Description class="text-sm text-surface-500 dark:text-surface-400">
@@ -116,7 +119,7 @@
 						</div>
 					{:else}
 						<div class="p-2 space-y-1">
-							{#each notificationStore.notifications as notification (notification.id)}
+							{#each $presenterState.notifications as notification (notification.id)}
 								<NotificationItem
 									{notification}
 									onMarkRead={handleMarkRead}
@@ -125,15 +128,15 @@
 							{/each}
 						</div>
 
-						{#if notificationStore.hasMore}
+						{#if $presenterState.hasMore}
 							<div class="px-3 pb-3">
 								<button
 									type="button"
 									class="w-full py-3 sm:py-2 text-sm font-medium text-primary-500 hover:text-primary-600 hover:bg-primary-50 dark:hover:text-primary-400 dark:hover:bg-primary-950/50 rounded-xl transition-colors disabled:opacity-50"
 									onclick={handleLoadMore}
-									disabled={notificationStore.loading}
+									disabled={$presenterState.loading}
 								>
-									{#if notificationStore.loading}
+									{#if $presenterState.loading}
 										<Loader2 class="size-4 animate-spin inline mr-1" />
 										Loading...
 									{:else}
diff --git a/src/lib/presenters/notifications.ts b/src/lib/presenters/notifications.ts
new file mode 100644
index 0000000..b935b31
--- /dev/null
+++ b/src/lib/presenters/notifications.ts
@@ -0,0 +1,5 @@
+import { createNotificationsPresenter } from './notificationsPresenter';
+
+export const notificationsPresenter = createNotificationsPresenter({
+	fetcher: fetch
+});
diff --git a/src/lib/presenters/notificationsPresenter.ts b/src/lib/presenters/notificationsPresenter.ts
new file mode 100644
index 0000000..0691a38
--- /dev/null
+++ b/src/lib/presenters/notificationsPresenter.ts
@@ -0,0 +1,197 @@
+/**
+ * Presenter layer for notifications.
+ * Manages state and coordinates API calls.
+ */
+
+import { writable } from 'svelte/store';
+import type { Notification } from '$lib/types/notification';
+import { createNotificationsApi } from '$lib/api/notificationsApi';
+import { savePendingNotifications, isIDBAvailable } from '$lib/notifications/idb';
+
+export type NotificationsState = {
+	notifications: Notification[];
+	unreadCount: number;
+	loading: boolean;
+	hasMore: boolean;
+	page: number;
+	initialized: boolean;
+	error: string | null;
+};
+
+type NotificationsPresenterDeps = {
+	fetcher: typeof fetch;
+};
+
+function parseNotificationDates(notification: Notification): Notification {
+	return {
+		...notification,
+		createdAt: new Date(notification.createdAt),
+		expiresAt: notification.expiresAt ? new Date(notification.expiresAt) : null
+	};
+}
+
+export function createNotificationsPresenter({ fetcher }: NotificationsPresenterDeps) {
+	const api = createNotificationsApi({ fetcher });
+
+	const state = writable<NotificationsState>({
+		notifications: [],
+		unreadCount: 0,
+		loading: false,
+		hasMore: false,
+		page: 1,
+		initialized: false,
+		error: null
+	});
+
+	const { subscribe, update } = state;
+
+	const getState = (): NotificationsState => {
+		let current: NotificationsState;
+		subscribe((v) => (current = v))();
+		// @ts-expect-error - assigned above
+		return current as NotificationsState;
+	};
+
+	const fetchUnreadCount = async () => {
+		try {
+			const data = await api.fetchUnreadCount();
+			update((s) => ({ ...s, unreadCount: data.count, error: null }));
+		} catch (error) {
+			console.error('Failed to fetch unread count:', error);
+			update((s) => ({ ...s, error: 'Failed to fetch unread count' }));
+		}
+	};
+
+	const fetchNotifications = async (reset = false) => {
+		const currentState = getState();
+		if (currentState.loading) return;
+
+		update((s) => ({ ...s, loading: true, error: null }));
+
+		try {
+			const pageToFetch = reset ? 1 : currentState.page;
+			const data = await api.fetchNotifications(pageToFetch);
+
+			const parsed = data.data.map(parseNotificationDates);
+
+			update((s) => {
+				const notifications = reset ? parsed : [...s.notifications, ...parsed];
+				return {
+					...s,
+					notifications,
+					hasMore: data.pagination.hasMore,
+					page: reset ? 1 : s.page,
+					initialized: true,
+					loading: false,
+					error: null
+				};
+			});
+
+			// Save unread notifications to IndexedDB for service worker access
+			if (isIDBAvailable()) {
+				const unread = parsed.filter((n) => !n.read);
+				if (unread.length > 0) {
+					savePendingNotifications(unread).catch(() => {
+						// Silently ignore IDB errors
+					});
+				}
+			}
+		} catch (error) {
+			console.error('Failed to fetch notifications:', error);
+			update((s) => ({ ...s, loading: false, error: 'Failed to fetch notifications' }));
+		}
+	};
+
+	const loadMore = async () => {
+		const currentState = getState();
+		if (currentState.hasMore && !currentState.loading) {
+			update((s) => ({ ...s, page: s.page + 1 }));
+			await fetchNotifications();
+		}
+	};
+
+	const markAsRead = async (notificationId: string) => {
+		try {
+			await api.markAsRead(notificationId);
+
+			update((s) => {
+				const notification = s.notifications.find((n) => n.id === notificationId);
+				const wasUnread = notification && !notification.read;
+
+				return {
+					...s,
+					unreadCount: wasUnread ? Math.max(0, s.unreadCount - 1) : s.unreadCount,
+					notifications: s.notifications.map((n) =>
+						n.id === notificationId ? { ...n, read: true } : n
+					),
+					error: null
+				};
+			});
+		} catch (error) {
+			console.error('Failed to mark notification as read:', error);
+			update((s) => ({ ...s, error: 'Failed to mark notification as read' }));
+		}
+	};
+
+	const markAllAsRead = async () => {
+		try {
+			await api.markAllAsRead();
+
+			update((s) => ({
+				...s,
+				notifications: s.notifications.map((n) => ({ ...n, read: true })),
+				unreadCount: 0,
+				error: null
+			}));
+		} catch (error) {
+			console.error('Failed to mark all as read:', error);
+			update((s) => ({ ...s, error: 'Failed to mark all notifications as read' }));
+		}
+	};
+
+	const dismiss = async (notificationId: string) => {
+		try {
+			await api.dismiss(notificationId);
+
+			update((s) => {
+				const notification = s.notifications.find((n) => n.id === notificationId);
+				const wasUnread = notification && !notification.read;
+
+				return {
+					...s,
+					unreadCount: wasUnread ? Math.max(0, s.unreadCount - 1) : s.unreadCount,
+					notifications: s.notifications.filter((n) => n.id !== notificationId),
+					error: null
+				};
+			});
+		} catch (error) {
+			console.error('Failed to dismiss notification:', error);
+			update((s) => ({ ...s, error: 'Failed to dismiss notification' }));
+		}
+	};
+
+	const reset = () => {
+		update(() => ({
+			notifications: [],
+			unreadCount: 0,
+			loading: false,
+			hasMore: false,
+			page: 1,
+			initialized: false,
+			error: null
+		}));
+	};
+
+	return {
+		state: { subscribe },
+		fetchUnreadCount,
+		fetchNotifications,
+		loadMore,
+		markAsRead,
+		markAllAsRead,
+		dismiss,
+		reset
+	};
+}
+
+export type NotificationsPresenter = ReturnType<typeof createNotificationsPresenter>;
diff --git a/src/lib/stores/notifications.svelte.ts b/src/lib/stores/notifications.svelte.ts
deleted file mode 100644
index 98c5966..0000000
--- a/src/lib/stores/notifications.svelte.ts
+++ /dev/null
@@ -1,143 +0,0 @@
-import type { Notification } from '$lib/types/notification';
-import { savePendingNotifications, isIDBAvailable } from '$lib/notifications/idb';
-
-class NotificationStore {
-	notifications = $state<Notification[]>([]);
-	unreadCount = $state(0);
-	loading = $state(false);
-	hasMore = $state(false);
-	page = $state(1);
-	initialized = $state(false);
-
-	async fetchUnreadCount() {
-		try {
-			const response = await fetch('/api/notifications/unread-count');
-			if (response.ok) {
-				const data = (await response.json()) as { count: number };
-				this.unreadCount = data.count;
-			}
-		} catch (error) {
-			console.error('Failed to fetch unread count:', error);
-		}
-	}
-
-	async fetchNotifications(reset = false) {
-		if (this.loading) return;
-
-		this.loading = true;
-		try {
-			const pageToFetch = reset ? 1 : this.page;
-			const response = await fetch(`/api/notifications?page=${pageToFetch}&limit=10`);
-
-			if (response.ok) {
-				const data = (await response.json()) as {
-					data: Notification[];
-					pagination: { total: number; hasMore: boolean };
-				};
-
-				// Parse dates from JSON
-				const parsed = data.data.map((n) => ({
-					...n,
-					createdAt: new Date(n.createdAt),
-					expiresAt: n.expiresAt ? new Date(n.expiresAt) : null
-				}));
-
-				if (reset) {
-					this.notifications = parsed;
-					this.page = 1;
-				} else {
-					this.notifications = [...this.notifications, ...parsed];
-				}
-				this.hasMore = data.pagination.hasMore;
-				this.initialized = true;
-
-				// Save unread notifications to IndexedDB for service worker access
-				if (isIDBAvailable()) {
-					const unread = parsed.filter((n) => !n.read);
-					if (unread.length > 0) {
-						savePendingNotifications(unread).catch(() => {
-							// Silently ignore IDB errors
-						});
-					}
-				}
-			}
-		} catch (error) {
-			console.error('Failed to fetch notifications:', error);
-		} finally {
-			this.loading = false;
-		}
-	}
-
-	async loadMore() {
-		if (this.hasMore && !this.loading) {
-			this.page += 1;
-			await this.fetchNotifications();
-		}
-	}
-
-	async markAsRead(notificationId: string) {
-		try {
-			const response = await fetch(`/api/notifications/${notificationId}`, {
-				method: 'PATCH',
-				headers: { 'Content-Type': 'application/json' },
-				body: JSON.stringify({ read: true })
-			});
-
-			if (response.ok) {
-				const notification = this.notifications.find((n) => n.id === notificationId);
-				if (notification && !notification.read) {
-					this.unreadCount = Math.max(0, this.unreadCount - 1);
-				}
-				this.notifications = this.notifications.map((n) =>
-					n.id === notificationId ? { ...n, read: true } : n
-				);
-			}
-		} catch (error) {
-			console.error('Failed to mark notification as read:', error);
-		}
-	}
-
-	async markAllAsRead() {
-		try {
-			const response = await fetch('/api/notifications/mark-all-read', {
-				method: 'PATCH'
-			});
-
-			if (response.ok) {
-				this.notifications = this.notifications.map((n) => ({ ...n, read: true }));
-				this.unreadCount = 0;
-			}
-		} catch (error) {
-			console.error('Failed to mark all as read:', error);
-		}
-	}
-
-	async dismiss(notificationId: string) {
-		try {
-			const response = await fetch(`/api/notifications/${notificationId}`, {
-				method: 'DELETE'
-			});
-
-			if (response.ok) {
-				const notification = this.notifications.find((n) => n.id === notificationId);
-				if (notification && !notification.read) {
-					this.unreadCount = Math.max(0, this.unreadCount - 1);
-				}
-				this.notifications = this.notifications.filter((n) => n.id !== notificationId);
-			}
-		} catch (error) {
-			console.error('Failed to dismiss notification:', error);
-		}
-	}
-
-	reset() {
-		this.notifications = [];
-		this.unreadCount = 0;
-		this.loading = false;
-		this.hasMore = false;
-		this.page = 1;
-		this.initialized = false;
-	}
-}
-
-export const notificationStore = new NotificationStore();