diff --git a/server/static/hover.js b/server/static/hover.js
new file mode 100644
index 0000000..f5773c6
--- /dev/null
+++ b/server/static/hover.js
@@ -0,0 +1,10 @@
+var connections = document.querySelectorAll('.connection');
+
+connections.forEach((connection) => {
+  connection.addEventListener('mouseover', function(event) {
+    event.target.style.stroke = 'red';
+  });
+  connection.addEventListener('mouseout', function(event) {
+    event.target.style.stroke = 'black';
+  });
+});
diff --git a/server/static/style.css b/server/static/style.css
index 1db2b67..ba5e78d 100644
--- a/server/static/style.css
+++ b/server/static/style.css
@@ -14,6 +14,10 @@ body {
   cursor: move;
 }
 
+.red-stroke {
+  stroke: red;
+}
+
 .svg-scrim {
   pointer-events: none;
   z-index: 5;
diff --git a/server/templates/index.html.tmpl b/server/templates/index.html.tmpl
index cd4627c..f56c707 100644
--- a/server/templates/index.html.tmpl
+++ b/server/templates/index.html.tmpl
@@ -32,5 +32,6 @@
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/utils/Draggable.min.js"></script>
     <script type="text/javascript" src="static/main.js"></script>
+    <script type="text/javascript" src="static/hover.js"></script>
   </body>
 </html>