diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 6b0324c..b93e64b 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -396,7 +396,7 @@
 			>
 				{#if !notificationViewModel?.supported || notificationViewModel?.permission === 'denied'}
 					<!-- Not supported / denied - bell with slash -->
-					<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+				<svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728L5.636 5.636m12.728 12.728L18.364 5.636M5.636 18.364l12.728-12.728"></path>
 					</svg>
 				{:else if notificationViewModel?.subscribed}
@@ -406,7 +406,7 @@
 					</svg>
 				{:else}
 					<!-- Disabled - bell icon (gray) -->
-					<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+				<svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-5-5-5 5h5v-8a1 1 0 011-1h8a1 1 0 011 1v1a1 1 0 01-1 1h-7v7z"></path>
 					</svg>
 				{/if}
@@ -419,9 +419,9 @@
 				class="flex items-center space-x-2"
 			>
 				<div class="w-2 h-2 rounded-full {
-					connectionStatus === 'connected' ? 'bg-green-400' : 
-					connectionStatus === 'connecting' ? 'bg-yellow-400' :
-					'bg-red-400'
+					connectionStatus === 'connected' ? 'bg-green-600' : 
+					connectionStatus === 'connecting' ? 'bg-yellow-600' :
+					'bg-red-600'
 				}"></div>
 			</div>
 		</div>