diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/RelationshipEdge/RelationshipEdge.module.css b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/RelationshipEdge/RelationshipEdge.module.css
index 85bdd71d..48a6a52f 100644
--- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/RelationshipEdge/RelationshipEdge.module.css
+++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/RelationshipEdge/RelationshipEdge.module.css
@@ -1,6 +1,7 @@
 .edge {
-  stroke: var(--pane-border-hover);
-  stroke-dasharray: 2;
+  --xy-edge-stroke: var(--pane-border-hover);
+
+  stroke-width: 1px;
   transition: stroke 0.3s var(--default-timing-function);
 }
 
@@ -14,5 +15,5 @@ marker {
 }
 
 .hovered {
-  stroke: var(--node-layout);
+  --xy-edge-stroke: var(--node-layout);
 }
diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/RelationshipEdge/RelationshipEdge.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/RelationshipEdge/RelationshipEdge.tsx
index 671e00c2..90cb97fa 100644
--- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/RelationshipEdge/RelationshipEdge.tsx
+++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/RelationshipEdge/RelationshipEdge.tsx
@@ -1,10 +1,12 @@
 import { BaseEdge, type EdgeProps, getBezierPath } from '@xyflow/react'
-
 import clsx from 'clsx'
 import type { FC } from 'react'
 import styles from './RelationshipEdge.module.css'
 import type { RelationshipEdgeType } from './type'
 
+const PARTICLE_COUNT = 6
+const ANIMATE_DURATION = 3
+
 type Props = EdgeProps<RelationshipEdgeType>
 
 export const RelationshipEdge: FC<Props> = ({
@@ -47,6 +49,42 @@ export const RelationshipEdge: FC<Props> = ({
         }
         className={clsx(styles.edge, data?.isHighlighted && styles.hovered)}
       />
+      <defs>
+        <radialGradient
+          id="myGradient"
+          cx="50%"
+          cy="50%"
+          r="50%"
+          fx="50%"
+          fy="50%"
+        >
+          <stop offset="0%" stopColor="var(--node-layout)" stopOpacity="1" />
+          <stop
+            offset="100%"
+            stopColor="var(--node-layout)"
+            stopOpacity="0.4"
+          />
+        </radialGradient>
+      </defs>
+      {data?.isHighlighted &&
+        [...Array(PARTICLE_COUNT)].map((_, i) => (
+          <ellipse
+            key={`particle-${i}-${ANIMATE_DURATION}`}
+            rx="5"
+            ry="1.6"
+            fill="url(#myGradient)"
+          >
+            <animateMotion
+              begin={`${i * (ANIMATE_DURATION / PARTICLE_COUNT)}s`}
+              dur={`${ANIMATE_DURATION}s`}
+              repeatCount="indefinite"
+              rotate="auto"
+              path={edgePath}
+              calcMode="spline"
+              keySplines="0.42, 0, 0.58, 1.0"
+            />
+          </ellipse>
+        ))}
     </>
   )
 }
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 4ef36d53..30fa9a88 100644
--- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/highlightNodesAndEdges.ts
+++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/highlightNodesAndEdges.ts
@@ -66,7 +66,7 @@ const unhighlightNode = (node: TableNodeType): TableNodeType => ({
 
 const highlightEdge = (edge: Edge): Edge => ({
   ...edge,
-  animated: true,
+  animated: false,
   zIndex: zIndex.edgeHighlighted,
   data: { ...edge.data, isHighlighted: true },
 })