diff --git a/html/force-big.css b/html/force-big.css
index 47bef13..ad4d0d8 100644
--- a/html/force-big.css
+++ b/html/force-big.css
@@ -24,6 +24,10 @@
   stroke-width: 2px;
 }
 
+.link line.unidirectional {
+  stroke-width: 2px;
+}
+
 .node ellipse {
   fill: #fff;
   stroke: #48f;
diff --git a/html/force-light.css b/html/force-light.css
index d2e25f9..af03287 100644
--- a/html/force-light.css
+++ b/html/force-light.css
@@ -15,12 +15,17 @@
 .link line {
   stroke: #777;
   stroke-opacity: 1;
-  stroke-width: 1.5px;
+  stroke-width: 2.5px;
+}
+
+.link line.unidirectional {
+  stroke-width: 0.8px;
 }
 
 .link.vpn line {
   stroke-dasharray: 0.75px 4px;
   stroke-linecap: round;
+  stroke-width: 1.5px;
 }
 
 .link:hover line {
diff --git a/html/force.js b/html/force.js
index 5f94e8e..05e77d5 100644
--- a/html/force.js
+++ b/html/force.js
@@ -415,6 +415,9 @@ function update() {
       .style("stroke", function(d) {
         return linkcolor(Math.max.apply(null, d.quality.split(",")))
       })
+      .attr("class", function(d) {
+        return d.quality.split(",").length==1?"unidirectional":"bidirectional"
+      })
 
   link.selectAll("title")
       .text( function (d) {