diff --git a/src/features/schedule/components/ScheduleFilter.scss b/src/features/schedule/components/ScheduleFilter.scss
index cace433e..aee74dc4 100644
--- a/src/features/schedule/components/ScheduleFilter.scss
+++ b/src/features/schedule/components/ScheduleFilter.scss
@@ -55,7 +55,7 @@
     color: colors.$blue;
     border-radius: vars.$border-radius;
 
-    &:hover { background: rgba(46, 87, 255, 0.06); }
+    &:hover { background: colors.$blue-extra-light; }
 
     .svg--change-city {
       width: 24px;
diff --git a/src/ui/flights/FlightCard.scss b/src/ui/flights/FlightCard.scss
index a45a4230..3ae07e4c 100644
--- a/src/ui/flights/FlightCard.scss
+++ b/src/ui/flights/FlightCard.scss
@@ -18,11 +18,15 @@
     border-left: 3px solid colors.$blue;
   }
 
+  // Angular highlights clickable flight rows with $blue-extra-light
+  // (#f3f9ff) on hover — the same tint used for the `frame` background
+  // of the left-column accordion. Use the brand token here rather than
+  // a one-off translucent blue.
   &--clickable .flight-card__row {
     cursor: pointer;
 
     &:hover {
-      background-color: rgba(46, 87, 255, 0.04);
+      background-color: colors.$blue-extra-light;
     }
 
     &:focus-visible {
@@ -226,6 +230,9 @@
     padding-top: vars.$space-s;
   }
 
+  // Mirrors Angular `share-button.component.scss`: transparent bg,
+  // hover fills with $blue-icon (#e3f0fd), matching the share action
+  // buttons across the Angular site.
   &__share-btn {
     display: inline-flex;
     align-items: center;
@@ -245,7 +252,7 @@
     }
 
     &:hover {
-      background-color: rgba(46, 87, 255, 0.08);
+      background-color: colors.$blue-icon;
     }
   }
 
@@ -261,7 +268,7 @@
     text-decoration: none;
     transition: background-color 150ms ease;
 
-    &:hover { background: rgba(46, 87, 255, 0.06); }
+    &:hover { background: colors.$blue-extra-light; }
   }
 
   &__buy-btn {
diff --git a/src/ui/layout/SearchHistory.scss b/src/ui/layout/SearchHistory.scss
index 528fb73a..128af6a9 100644
--- a/src/ui/layout/SearchHistory.scss
+++ b/src/ui/layout/SearchHistory.scss
@@ -80,8 +80,10 @@
   border-top: 1px solid colors.$border;
   transition: background-color 150ms ease;
 
+  // Angular highlights search-history rows with $blue-extra-light
+  // (#f3f9ff) on hover — same tint as the frame background.
   &:hover {
-    background-color: rgba(46, 87, 255, 0.04);
+    background-color: colors.$blue-extra-light;
   }
 
   &:hover .search-history-item__icon {