diff --git a/css/graph.css b/css/graph.css
index 37a4b7b..32e99c1 100644
--- a/css/graph.css
+++ b/css/graph.css
@@ -20,10 +20,10 @@ svg {
   fill: rgb(200, 200, 100) !important;
 }
 
-.path .arrow-body {
+.edge.highlighted .arrow-body {
   stroke-width: 5px;
 }
-.path .arrow-head {
+.edge.highlighted .arrow-head {
   stroke: none !important;
   fill: none !important;
 }
@@ -66,6 +66,6 @@ svg {
   stroke: gray;
 }
 
-.path .selected {
+.edge.highlighted .selected {
   stroke-width: 10px;
 }
diff --git a/js/index.js b/js/index.js
index 0fd2195..3d8283a 100644
--- a/js/index.js
+++ b/js/index.js
@@ -83,7 +83,7 @@ function reset() {
       const path = lastPath[i];
       path.forEach((ele) => {
         const domEle = document.getElementById(ele.id());
-        domEle.classList.remove("path");
+        domEle.classList.remove("highlighted");
         const arrowBodyEle = document.getElementById(ele.id() + "ArrowBody");
         if (arrowBodyEle) {
           arrowBodyEle.classList.remove("path" + i);
@@ -129,7 +129,7 @@ function showPaths(validPaths, keep) {
       const path = lastPath[i];
       path.forEach((ele) => {
         const domEle = document.getElementById(ele.id());
-        domEle.classList.remove("path");
+        domEle.classList.remove("highlighted");
         const arrowBodyEle = document.getElementById(ele.id() + "ArrowBody");
         if (arrowBodyEle) {
           arrowBodyEle.classList.remove("path" + i);
@@ -152,7 +152,7 @@ function showPaths(validPaths, keep) {
       const pathCount = (pathCounts.get(id) ?? -1) + 1;
       pathCounts.set(id, pathCount);
 
-      domEle.classList.add("path");
+      domEle.classList.add("highlighted");
       let arrowBodyEle = document.getElementById(id + "ArrowBody");
       if (!arrowBodyEle) console.warn("cannot find arrow body of " + id);
       let eventEle = arrowBodyEle;