diff --git a/app/assets/stylesheets/events.css b/app/assets/stylesheets/events.css
index 067ef0c52..c18bbb530 100644
--- a/app/assets/stylesheets/events.css
+++ b/app/assets/stylesheets/events.css
@@ -60,3 +60,7 @@
   padding-block: var(--grid-lines);
   z-index: 1;
 }
+
+.event--related {
+  box-shadow: 0 0 0.3em 0.3em var(--bubble-color) !important;
+}
diff --git a/app/javascript/controllers/related_element_controller.js b/app/javascript/controllers/related_element_controller.js
new file mode 100644
index 000000000..662ad258f
--- /dev/null
+++ b/app/javascript/controllers/related_element_controller.js
@@ -0,0 +1,29 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static classes = ["highlight"]
+  
+  highlight(event) {
+    const targetElement = event.target.closest('[data-related-element-target]')
+    if (!targetElement) return
+    
+    const targetValue = targetElement.dataset.relatedElementTarget
+    const relatedElements = this.element.querySelectorAll(`[data-related-element-target="${targetValue}"]`)
+    
+    relatedElements.forEach(element => {
+      element.classList.add(this.highlightClass)
+    })
+  }
+
+  unhighlight(event) {
+    const targetElement = event.target.closest('[data-related-element-target]')
+    if (!targetElement) return
+    
+    const targetValue = targetElement.dataset.relatedElementTarget
+    const relatedElements = this.element.querySelectorAll(`[data-related-element-target="${targetValue}"]`)
+    
+    relatedElements.forEach(element => {
+      element.classList.remove(this.highlightClass)
+    })
+  }
+}
diff --git a/app/views/events/_day.html.erb b/app/views/events/_day.html.erb
index dab5c0737..fa3e8e180 100644
--- a/app/views/events/_day.html.erb
+++ b/app/views/events/_day.html.erb
@@ -1,4 +1,6 @@
-<div class="events--day">
+<div class="events--day" data-controller="related-element" 
+     data-related-element-highlight-class="event--related"
+     data-action="mouseover->related-element#highlight mouseout->related-element#unhighlight">
   <% if events.any? %>
     <h2 class="txt-x-large margin-block-end"><%= event_day_title(activity_day) %></h2>
 
diff --git a/app/views/events/_event.html.erb b/app/views/events/_event.html.erb
index f18b91c6a..83dd7874c 100644
--- a/app/views/events/_event.html.erb
+++ b/app/views/events/_event.html.erb
@@ -3,7 +3,7 @@
 <%= link_to bucket_bubble_path(bubble.bucket, bubble),
       class: "event panel shadow center center-block flex-inline align-center justify-start gap position-relative",
       style: "--bubble-color: #{ bubble.color }; #{ bubble_rotation(bubble) }",
-      data: { controller: "animation", animation_play_class: "bubble--wobble", animation_play_on_load_value: "true", action: "mouseover->animation#play" } do %>
+      data: { controller: "animation", related_element_target: "bubble_id_#{bubble.id}", animation_play_class: "bubble--wobble", animation_play_on_load_value: "true", action: "mouseover->animation#play" } do %>
   <div class="bubble__shape flex-item-no-shrink txt-large"></div>
   <div class="flex flex-column min-width txt-small txt-tight-lines align-start txt-align-start">
     <strong><%= bubble.title %></strong>