diff --git a/media_manager/notification/dependencies.py b/media_manager/notification/dependencies.py
index 6bc269d..743ed20 100644
--- a/media_manager/notification/dependencies.py
+++ b/media_manager/notification/dependencies.py
@@ -19,7 +19,7 @@ notification_repository_dep = Annotated[
 
 
 def get_notification_service(
-    notification_repository: notification_repository_dep
+    notification_repository: notification_repository_dep,
 ) -> NotificationService:
     return NotificationService(notification_repository)
 
diff --git a/media_manager/notification/repository.py b/media_manager/notification/repository.py
index 0790997..f1c8f76 100644
--- a/media_manager/notification/repository.py
+++ b/media_manager/notification/repository.py
@@ -32,9 +32,9 @@ class NotificationRepository:
         try:
             stmt = (
                 select(Notification)
-                .where(Notification.read == False)
+                .where(Notification.read == False)  # noqa: E712
                 .order_by(Notification.timestamp.desc())
-            )  # noqa: E712
+            )
             results = self.db.execute(stmt).scalars().all()
             log.info(f"Successfully retrieved {len(results)} unread notifications.")
             return [
diff --git a/web/src/lib/components/app-sidebar.svelte b/web/src/lib/components/app-sidebar.svelte
index 371a25f..a1664ce 100644
--- a/web/src/lib/components/app-sidebar.svelte
+++ b/web/src/lib/components/app-sidebar.svelte
@@ -1,5 +1,5 @@
 <script lang="ts" module>
-	import { Clapperboard, Home, Info, LifeBuoy, Send, Settings, TvIcon, Bell } from 'lucide-svelte';
+	import { Bell, Clapperboard, Home, Info, LifeBuoy, Settings, TvIcon } from 'lucide-svelte';
 	import { PUBLIC_VERSION } from '$env/static/public';
 
 	const data = {
diff --git a/web/src/routes/dashboard/notifications/+page.svelte b/web/src/routes/dashboard/notifications/+page.svelte
index 339fb23..28c6058 100644
--- a/web/src/routes/dashboard/notifications/+page.svelte
+++ b/web/src/routes/dashboard/notifications/+page.svelte
@@ -1,10 +1,7 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { page } from '$app/stores';
-	import { goto } from '$app/navigation';
 	import { env } from '$env/dynamic/public';
-	import type { Notification } from '$lib/types';
-
+	import { Button } from '$lib/components/ui/button/index.js';
 	const apiUrl = env.PUBLIC_API_URL;
 
 	interface NotificationResponse {
@@ -46,7 +43,7 @@
 
 			if (allResponse.ok) {
 				const allNotifications: NotificationResponse[] = await allResponse.json();
-				readNotifications = allNotifications.filter(n => n.read);
+				readNotifications = allNotifications.filter((n) => n.read);
 			}
 		} catch (error) {
 			console.error('Failed to fetch notifications:', error);
@@ -67,11 +64,11 @@
 
 			if (response.ok) {
 				// Move from unread to read
-				const notification = unreadNotifications.find(n => n.id === notificationId);
+				const notification = unreadNotifications.find((n) => n.id === notificationId);
 				if (notification) {
 					notification.read = true;
 					readNotifications = [notification, ...readNotifications];
-					unreadNotifications = unreadNotifications.filter(n => n.id !== notificationId);
+					unreadNotifications = unreadNotifications.filter((n) => n.id !== notificationId);
 				}
 			}
 		} catch (error) {
@@ -91,11 +88,11 @@
 
 			if (response.ok) {
 				// Move from read to unread
-				const notification = readNotifications.find(n => n.id === notificationId);
+				const notification = readNotifications.find((n) => n.id === notificationId);
 				if (notification) {
 					notification.read = false;
 					unreadNotifications = [notification, ...unreadNotifications];
-					readNotifications = readNotifications.filter(n => n.id !== notificationId);
+					readNotifications = readNotifications.filter((n) => n.id !== notificationId);
 				}
 			}
 		} catch (error) {
@@ -115,8 +112,8 @@
 
 			if (response.ok) {
 				// Remove from both lists
-				unreadNotifications = unreadNotifications.filter(n => n.id !== notificationId);
-				readNotifications = readNotifications.filter(n => n.id !== notificationId);
+				unreadNotifications = unreadNotifications.filter((n) => n.id !== notificationId);
+				readNotifications = readNotifications.filter((n) => n.id !== notificationId);
 			}
 		} catch (error) {
 			console.error('Failed to delete notification:', error);
@@ -128,7 +125,7 @@
 
 		try {
 			markingAllAsRead = true;
-			const promises = unreadNotifications.map(notification =>
+			const promises = unreadNotifications.map((notification) =>
 				fetch(`${apiUrl}/notification/${notification.id}/read`, {
 					method: 'PATCH',
 					headers: {
@@ -141,7 +138,10 @@
 			await Promise.all(promises);
 
 			// Move all unread to read
-			readNotifications = [...unreadNotifications.map(n => ({ ...n, read: true })), ...readNotifications];
+			readNotifications = [
+				...unreadNotifications.map((n) => ({ ...n, read: true })),
+				...readNotifications
+			];
 			unreadNotifications = [];
 		} catch (error) {
 			console.error('Failed to mark all notifications as read:', error);
@@ -172,7 +172,11 @@
 		if (lowerMessage.includes('downloaded') || lowerMessage.includes('successfully')) {
 			return '✅';
 		}
-		if (lowerMessage.includes('error') || lowerMessage.includes('failed') || lowerMessage.includes('failure')) {
+		if (
+			lowerMessage.includes('error') ||
+			lowerMessage.includes('failed') ||
+			lowerMessage.includes('failure')
+		) {
 			return '❌';
 		}
 		if (lowerMessage.includes('missing') || lowerMessage.includes('not found')) {
@@ -202,16 +206,16 @@
 </svelte:head>
 
 <div class="container mx-auto px-4 py-8">
-	<div class="flex justify-between items-center mb-6">
+	<div class="mb-6 flex items-center justify-between">
 		<h1 class="text-3xl font-bold text-gray-900 dark:text-white">Notifications</h1>
 		{#if unreadNotifications.length > 0}
 			<button
 				on:click={markAllAsRead}
 				disabled={markingAllAsRead}
-				class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
+				class="flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50"
 			>
 				{#if markingAllAsRead}
-					<div class="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
+					<div class="h-4 w-4 animate-spin rounded-full border-b-2 border-white"></div>
 				{/if}
 				Mark All as Read
 			</button>
@@ -219,64 +223,76 @@
 	</div>
 
 	{#if loading}
-		<div class="flex justify-center items-center py-12">
-			<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
+		<div class="flex items-center justify-center py-12">
+			<div class="h-8 w-8 animate-spin rounded-full border-b-2 border-blue-600"></div>
 		</div>
 	{:else}
 		<!-- Unread Notifications -->
 		<div class="mb-8">
-			<div class="flex items-center gap-2 mb-4">
-				<h2 class="text-xl font-semibold text-gray-900 dark:text-white">
-					Unread Notifications
-				</h2>
+			<div class="mb-4 flex items-center gap-2">
+				<h2 class="text-xl font-semibold text-gray-900 dark:text-white">Unread Notifications</h2>
 				{#if unreadNotifications.length > 0}
-					<span class="bg-red-500 text-white text-xs px-2 py-1 rounded-full">
+					<span class="rounded-full bg-red-500 px-2 py-1 text-xs text-white">
 						{unreadNotifications.length}
 					</span>
 				{/if}
 			</div>
 
 			{#if unreadNotifications.length === 0}
-				<div class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-6 text-center">
-					<div class="text-green-600 dark:text-green-400 text-4xl mb-2">✨</div>
-					<p class="text-green-800 dark:text-green-200 font-medium">All caught up!</p>
-					<p class="text-green-600 dark:text-green-400 text-sm">No unread notifications</p>
+				<div
+					class="rounded-lg border border-green-200 bg-green-50 p-6 text-center dark:border-green-800 dark:bg-green-900/20"
+				>
+					<div class="mb-2 text-4xl text-green-600 dark:text-green-400">✨</div>
+					<p class="font-medium text-green-800 dark:text-green-200">All caught up!</p>
+					<p class="text-sm text-green-600 dark:text-green-400">No unread notifications</p>
 				</div>
 			{:else}
 				<div class="space-y-3">
 					{#each unreadNotifications as notification (notification.id)}
-						<div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4 shadow-sm">
+						<div
+							class="rounded-lg border border-blue-200 bg-blue-50 p-4 shadow-sm dark:border-blue-800 dark:bg-blue-900/20"
+						>
 							<div class="flex items-start justify-between gap-4">
-								<div class="flex items-start gap-3 flex-1">
+								<div class="flex flex-1 items-start gap-3">
 									<span class="text-2xl">{getNotificationIcon(notification.message)}</span>
 									<div class="flex-1">
-										<p class="text-gray-900 dark:text-white font-medium">
+										<p class="font-medium text-gray-900 dark:text-white">
 											{notification.message}
 										</p>
-										<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
+										<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
 											{formatTimestamp(notification.timestamp)}
 										</p>
 									</div>
 								</div>
 								<div class="flex items-center gap-2">
-									<button
-										on:click={() => markAsRead(notification.id)}
-										class="p-2 text-blue-600 hover:bg-blue-100 dark:hover:bg-blue-800 rounded-lg transition-colors"
+									<Button
+										onclick={() => markAsRead(notification.id)}
+										class="rounded-lg p-2 text-blue-600 transition-colors hover:bg-blue-100 dark:hover:bg-blue-800"
 										title="Mark as read"
 									>
-										<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-											<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+										<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M5 13l4 4L19 7"
+											></path>
 										</svg>
-									</button>
-									<button
-										on:click={() => deleteNotification(notification.id)}
-										class="p-2 text-red-600 hover:bg-red-100 dark:hover:bg-red-800 rounded-lg transition-colors"
+									</Button>
+									<Button
+										onclick={() => deleteNotification(notification.id)}
+										class="rounded-lg p-2 text-red-600 transition-colors hover:bg-red-100 dark:hover:bg-red-800"
 										title="Delete notification"
 									>
-										<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-											<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
+										<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+											></path>
 										</svg>
-									</button>
+									</Button>
 								</div>
 							</div>
 						</div>
@@ -288,16 +304,17 @@
 		<!-- Read Notifications Toggle -->
 		<div class="mb-4">
 			<button
-				on:click={() => showRead = !showRead}
-				class="flex items-center gap-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"
+				on:click={() => (showRead = !showRead)}
+				class="flex items-center gap-2 text-gray-600 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
 			>
 				<svg
-					class="w-4 h-4 transition-transform {showRead ? 'rotate-90' : ''}"
+					class="h-4 w-4 transition-transform {showRead ? 'rotate-90' : ''}"
 					fill="none"
 					stroke="currentColor"
 					viewBox="0 0 24 24"
 				>
-					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"
+					></path>
 				</svg>
 				<span>Read Notifications ({readNotifications.length})</span>
 			</button>
@@ -307,44 +324,60 @@
 		{#if showRead}
 			<div>
 				{#if readNotifications.length === 0}
-					<div class="bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6 text-center">
+					<div
+						class="rounded-lg border border-gray-200 bg-gray-50 p-6 text-center dark:border-gray-700 dark:bg-gray-800"
+					>
 						<p class="text-gray-500 dark:text-gray-400">No read notifications</p>
 					</div>
 				{:else}
 					<div class="space-y-3">
 						{#each readNotifications as notification (notification.id)}
-							<div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4 shadow-sm opacity-75">
+							<div
+								class="rounded-lg border border-gray-200 bg-white p-4 opacity-75 shadow-sm dark:border-gray-700 dark:bg-gray-800"
+							>
 								<div class="flex items-start justify-between gap-4">
-									<div class="flex items-start gap-3 flex-1">
-										<span class="text-2xl opacity-50">{getNotificationIcon(notification.message)}</span>
+									<div class="flex flex-1 items-start gap-3">
+										<span class="text-2xl opacity-50"
+											>{getNotificationIcon(notification.message)}</span
+										>
 										<div class="flex-1">
 											<p class="text-gray-700 dark:text-gray-300">
 												{notification.message}
 											</p>
-											<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
+											<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
 												{formatTimestamp(notification.timestamp)}
 											</p>
 										</div>
 									</div>
 									<div class="flex items-center gap-2">
-										<button
-											on:click={() => markAsUnread(notification.id)}
-											class="p-2 text-blue-600 hover:bg-blue-100 dark:hover:bg-blue-800 rounded-lg transition-colors"
+										<Button
+											onclick={() => markAsUnread(notification.id)}
+											class="rounded-lg p-2 text-blue-600 transition-colors hover:bg-blue-100 dark:hover:bg-blue-800"
 											title="Mark as unread"
 										>
-											<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-												<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 7.89a2 2 0 002.83 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
+											<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+												<path
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													stroke-width="2"
+													d="M3 8l7.89 7.89a2 2 0 002.83 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+												></path>
 											</svg>
-										</button>
-										<button
-											on:click={() => deleteNotification(notification.id)}
-											class="p-2 text-red-600 hover:bg-red-100 dark:hover:bg-red-800 rounded-lg transition-colors"
+										</Button>
+										<Button
+											onclick={() => deleteNotification(notification.id)}
+											class="rounded-lg p-2 text-red-600 transition-colors hover:bg-red-100 dark:hover:bg-red-800"
 											title="Delete notification"
 										>
-											<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-												<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
+											<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+												<path
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													stroke-width="2"
+													d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+												></path>
 											</svg>
-										</button>
+										</Button>
 									</div>
 								</div>
 							</div>