diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/highlightNodesAndEdges.test.ts b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/highlightNodesAndEdges.test.ts
index c20f0f26..0aa37926 100644
--- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/highlightNodesAndEdges.test.ts
+++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/highlightNodesAndEdges.test.ts
@@ -134,6 +134,33 @@ describe(highlightNodesAndEdges, () => {
         }),
       ])
     })
+    it('When the users is active, and the comments is hovered, then the users and comments and related tables are highlighted', () => {
+      const { nodes: updatedNodes } = highlightNodesAndEdges(nodes, edges, {
+        activeTableName: 'users',
+        hoverTableName: 'comments',
+      })
+
+      expect(updatedNodes).toEqual([
+        aTableNode('users', {
+          data: aTableData('users', { isActiveHighlighted: true }),
+        }),
+        aTableNode('posts', {
+          data: aTableData('posts', {
+            isHighlighted: true,
+            highlightedHandles: ['posts-user_id'],
+          }),
+        }),
+        aTableNode('comments', {
+          data: aTableData('comments', { isHighlighted: true }),
+        }),
+        aTableNode('comment_users', {
+          data: aTableData('comment_users', {
+            isHighlighted: true,
+            highlightedHandles: ['comment_users-user_id'],
+          }),
+        }),
+      ])
+    })
   })
 
   describe('edges', () => {
@@ -204,5 +231,32 @@ describe(highlightNodesAndEdges, () => {
         ),
       ])
     })
+    it('When the users is active, and the comments is hovered, then the users and comments and related edges are highlighted', () => {
+      const { edges: updatedEdges } = highlightNodesAndEdges(nodes, edges, {
+        activeTableName: 'users',
+        hoverTableName: 'comments',
+      })
+
+      expect(updatedEdges).toEqual([
+        anEdge('users', 'posts', 'users-id', 'posts-user_id', {
+          animated: true,
+          data: { isHighlighted: true },
+        }),
+        anEdge('users', 'comment_users', 'users-id', 'comment_users-user_id', {
+          animated: true,
+          data: { isHighlighted: true },
+        }),
+        anEdge(
+          'comments',
+          'comment_users',
+          'comments-id',
+          'comment_users-comment_id',
+          {
+            animated: true,
+            data: { isHighlighted: true },
+          },
+        ),
+      ])
+    })
   })
 })
diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/highlightNodesAndEdges.ts b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/highlightNodesAndEdges.ts
index b3ee4e18..09916e7b 100644
--- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/highlightNodesAndEdges.ts
+++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/highlightNodesAndEdges.ts
@@ -158,7 +158,10 @@ export const highlightNodesAndEdges = (
   })
 
   const updatedEdges = edges.map((edge) => {
-    if (isRelatedEdgeToTarget(activeTableName ?? hoverTableName, edge)) {
+    if (
+      isRelatedEdgeToTarget(activeTableName, edge) ||
+      isRelatedEdgeToTarget(hoverTableName, edge)
+    ) {
       return highlightEdge(edge)
     }