diff --git a/frontend/src/lib/components/AnnotationLayer.svelte b/frontend/src/lib/components/AnnotationLayer.svelte
index 316e649a..e4c911c2 100644
--- a/frontend/src/lib/components/AnnotationLayer.svelte
+++ b/frontend/src/lib/components/AnnotationLayer.svelte
@@ -100,6 +100,8 @@ function handlePointerUp(event: PointerEvent) {
 	drawRect = null;
 }
 
+let hoveredId = $state<string | null>(null);
+
 const containerStyle = $derived(
 	`position: absolute; top: 0; left: 0; width: 100%; height: 100%;${canAnnotate ? ' cursor: crosshair;' : ''}`
 );
@@ -120,14 +122,18 @@ const containerStyle = $derived(
 			tabindex="0"
 			onclick={() => onAnnotationClick?.(annotation.id)}
 			onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') onAnnotationClick?.(annotation.id); }}
+			onmouseenter={() => (hoveredId = annotation.id)}
+			onmouseleave={() => (hoveredId = null)}
 			style="
 				position: absolute;
 				left: {annotation.x * 100}%;
 				top: {annotation.y * 100}%;
 				width: {annotation.width * 100}%;
 				height: {annotation.height * 100}%;
-				background-color: {hexToRgba(annotation.color, 0.3)};
+				background-color: {hexToRgba(annotation.color, hoveredId === annotation.id ? 0.5 : 0.3)};
+				box-shadow: {hoveredId === annotation.id ? `inset 0 0 0 2px ${hexToRgba(annotation.color, 0.8)}` : 'none'};
 				pointer-events: auto;
+				transition: background-color 0.15s ease, box-shadow 0.15s ease;
 				{onAnnotationClick && !canAnnotate ? 'cursor: pointer;' : ''}
 			"
 		>