diff --git a/dev/demo/relationsdemo.js b/dev/demo/relationsdemo.js
index 12d536c..81581aa 100644
--- a/dev/demo/relationsdemo.js
+++ b/dev/demo/relationsdemo.js
@@ -82,12 +82,12 @@
   ;
 
   rel
-    .addRel({ start: 0, end: 1, label: "a"})
-    .addRel({ start: 0, end: 1, label: "b" })
+    .addRel({ start: 0, end: 1, label: "a", direction: "uni"})
+    .addRel({ start: 0, end: 1, label: "b", direction: "uni" })
     .addRel({ start: 1, end: 2, label: "c", direction: "bi"   })
-    .addRel({ start: 0, end: 2, label: "d" })
-    .addRel({ start: [2,4], end: 5, label: "e", direction: "uni"  })
-    .addRel({ start: [5,6], end: 7, label: "g" })
+    .addRel({ start: 0, end: 2, label: "dreizehn", direction: "uni" })
+    .addRel({ start: [2,4], end: 5, label: "e", direction: "uni" })
+    .addRel({ start: [5,6], end: 7, label: "g", direction: "uni" })
     .addRel({ start: 4, end: [6,8], label: "f", direction: "bi" })
   ;
 
diff --git a/dev/js/src/match/relations.js b/dev/js/src/match/relations.js
index a201b9f..dfe2241 100644
--- a/dev/js/src/match/relations.js
+++ b/dev/js/src/match/relations.js
@@ -13,11 +13,13 @@
 
       // Some configurations
       obj.maxArc = 200; // maximum height of the bezier control point
-      obj.overlapDiff = 20;
+      obj.overlapDiff = 40;
       obj.arcDiff = 15;
-      obj.anchorDiff = 6;
+      obj.anchorDiff = 8;
       obj.anchorStart = 15;
       obj.tokenSep = 30;
+      obj.xPadding = 10;
+      obj.yPadding = 5;
       return obj;
     },
     
@@ -56,6 +58,7 @@
       var y = this._y + (anchor.overlaps * this.anchorDiff) - this.anchorStart;
 
       var l = this._c('path');
+      this._arcsElement.appendChild(l);
       l.setAttribute("d", "M " + startPos + "," + y + " L " + endPos + "," + y);
       l.setAttribute("class", "anchor");
       anchor.element = l;
@@ -90,8 +93,12 @@
       endPos -= this.offsetLeft;
 
       var g = this._c("g");
+      g.setAttribute("class", "arc");
       var p = g.appendChild(this._c("path"));
       p.setAttribute('class', 'edge');
+      
+      // Attach the new arc before drawing, so computed values are available
+      this._arcsElement.appendChild(g);
 
       // Create arc
       var middle = Math.abs(endPos - startPos) / 2;
@@ -140,19 +147,26 @@
         labelE.setAttribute("x", x + middle);
         labelE.setAttribute("y", middleY + 3);
         labelE.setAttribute("text-anchor", "middle");
-        labelE.appendChild(document.createTextNode(arc.label));
+        var textNode = document.createTextNode(arc.label);
+        labelE.appendChild(textNode);
 
-        /*
-        var textWidth = labelE.getComputedTextLength();
+        var labelBox = labelE.getBBox();
+        var textWidth = labelBox.width; // labelE.getComputedTextLength();
+        var textHeight = labelBox.height; // labelE.getComputedTextLength();
 
-        var labelR = g.appendChild(this._c("rect"));
-        labelR.setAttribute("x", x + middle);
-        labelR.setAttribute("y", middleY + 3);
-        labelR.setAttribute("width", textWidth +30);
-        labelR.setAttribute("height", 20);
-        */
+        // Add padding to left and right
+
+        // var labelR = g.appendChild(this._c("rect"));
+        var labelR = g.insertBefore(this._c("rect"), labelE);
+        var boxWidth = textWidth + 2 * this.xPadding;
+        labelR.setAttribute("x", x + middle - (boxWidth / 2));
+        labelR.setAttribute("ry", 5);
+        labelR.setAttribute("y", labelBox.y - this.yPadding);
+        labelR.setAttribute("width", boxWidth);
+        labelR.setAttribute("height", textHeight + 2*this.yPadding);
       };
-      return g;
+
+      // return g;
     },
 
     element : function () {
@@ -322,6 +336,8 @@
       this.offsetLeft = globalBoundingBox.left;
 
       var arcs = g.appendChild(this._c("g"));
+      this._arcsElement = arcs;
+
       arcs.classList.add("arcs");
 
       // Sort arcs if not sorted yet
@@ -333,13 +349,13 @@
 
       // Draw all anchors
       for (i in this._sortedAnchors) {
-        arcs.appendChild(this._drawAnchor(this._sortedAnchors[i]));
+        this._drawAnchor(this._sortedAnchors[i]);
       };
 
 
       // draw all arcs
       for (i in this._sortedArcs) {
-        arcs.appendChild(this._drawArc(this._sortedArcs[i]));
+        this._drawArc(this._sortedArcs[i]);
       };
 
       var width = text.getBoundingClientRect().width;
diff --git a/dev/scss/main/tree.scss b/dev/scss/main/tree.scss
index aec5bd4..8ecaf20 100644
--- a/dev/scss/main/tree.scss
+++ b/dev/scss/main/tree.scss
@@ -22,6 +22,8 @@
 
 path.anchor {
   stroke: $darkest-orange;
+  stroke-width: 3;
+  stroke-linecap: round;
   z-index: 20;
 }
 
@@ -31,10 +33,12 @@
   stroke-width: 2px;
 }
 
-g.middle rect {
-  stroke: $darker-orange;
-  stroke-width: 2px;
-  fill: $middle-orange;
+g.middle, g.arc {
+  rect {
+    stroke: $darker-orange;
+    stroke-width: 2px;
+    fill: $middle-orange;
+  }
 }
 
 g.middle.mark {
@@ -68,5 +72,6 @@
   > tspan {
     font-size: 10pt;
     overflow: visible;
+    z-index: 30;
   }
 }