diff --git a/html/force-big.css b/html/force-big.css
index 7bd02d9..69aaa64 100644
--- a/html/force-big.css
+++ b/html/force-big.css
@@ -18,6 +18,11 @@
   stroke-width: 5px;
 }
 
+.link.vpn line {
+  stroke-dasharray: 2.5px 10px;
+  stroke-linecap: round;
+}
+
 .node ellipse {
   fill: #fff;
   stroke: #48f;
diff --git a/html/force-light.css b/html/force-light.css
index e161d61..a822ca9 100644
--- a/html/force-light.css
+++ b/html/force-light.css
@@ -18,6 +18,11 @@
   stroke-width: 1.5px;
 }
 
+.link.vpn line {
+  stroke-dasharray: 0.75px 4px;
+  stroke-linecap: round;
+}
+
 .link:hover line {
   stroke-width: 5px;
 }
diff --git a/html/force.js b/html/force.js
index 39bb550..b97c59d 100644
--- a/html/force.js
+++ b/html/force.js
@@ -323,7 +323,9 @@ function update() {
                 })
 
   var linkEnter = link.enter().append("g")
-                      .attr("class", "link")
+                      .attr("class", function(d) {
+                        return "link " + d.type
+                      })
                       .on("mouseover", function(d) {
                         d.source.fixed |= 2
                         d.target.fixed |= 2
@@ -343,9 +345,14 @@ function update() {
       .style("stroke", function(d) {
         return linkcolor(d.quality)
       })
+
   link.selectAll("title")
       .text( function (d) {
-        return d.quality
+        var s = d.quality
+        if (d.type)
+          s += " (" + d.type + ")"
+
+        return s
       })
 
   link.exit().remove()