diff --git a/dev/js/src/match/relations.js b/dev/js/src/match/relations.js
index 92be073..921c699 100644
--- a/dev/js/src/match/relations.js
+++ b/dev/js/src/match/relations.js
@@ -23,6 +23,7 @@
       this._arcs    = [];
       this._tokenElements = [];
       this._y = 0;
+      this._currentInFocus = undefined;
 
       // Some configurations
       this.maxArc      = 200; // maximum height of the bezier control point
@@ -271,7 +272,6 @@
         endPos = this._tokenPoint(this._tokenElements[arc.last]);
       };
 
-
       startPos -= this.offsetLeft;
       endPos -= this.offsetLeft;
 
@@ -333,16 +333,19 @@
       var middleY = (((startY + controlY) / 2) + controlY) / 2;
 
       // Create a boxed label
-      g = this._c("g");
-      g.setAttribute("class", "label");
-      this._labelsElement.appendChild(g);
+      var label = this._c("g");
+      label.setAttribute("class", "label");
+      this._labelsElement.appendChild(label);
+
+      // Set arc reference
+      label.arcRef = g;
 
       var that = this;
-      g.addEventListener('mouseenter', function () {
-        that._labelsElement.appendChild(this);
+      label.addEventListener('mouseenter', function () {
+        that.inFocus(this);
       });
 
-      var labelE = g.appendChild(this._c("text"));
+      var labelE = label.appendChild(this._c("text"));
       labelE.setAttribute("x", x + middle);
       labelE.setAttribute("y", middleY + 3);
       labelE.setAttribute("text-anchor", "middle");
@@ -354,7 +357,7 @@
       var textHeight = labelBox.height; // labelE.getComputedTextLength();
 
       // Add box with padding to left and right
-      var labelR = g.insertBefore(this._c("rect"), labelE);
+      var labelR = label.insertBefore(this._c("rect"), labelE);
       var boxWidth = textWidth + 2 * this.xPadding;
       labelR.setAttribute("x", x + middle - (boxWidth / 2));
       labelR.setAttribute("ry", 5);
@@ -408,6 +411,29 @@
       this._tokens.push(token);
       return this;
     },
+
+
+    // Move label and arc in focus
+    inFocus : function (element) {
+      var cif;
+
+      if (this._currentInFocus) {
+
+        // Already in focus
+        if (this._currentInFocus === element)
+          return;
+
+        cif = this._currentInFocus;
+        cif.classList.remove('infocus');
+        cif.arcRef.classList.remove('infocus');
+      };
+
+      cif = this._currentInFocus = element;
+      this._labelsElement.appendChild(cif);
+      this._arcsElement.appendChild(cif.arcRef);
+      cif.classList.add('infocus');
+      cif.arcRef.classList.add('infocus');
+    },
     
     /*
      * All arcs need to be sorted before shown,
diff --git a/dev/scss/main/tree.scss b/dev/scss/main/tree.scss
index 3629590..088690f 100644
--- a/dev/scss/main/tree.scss
+++ b/dev/scss/main/tree.scss
@@ -10,13 +10,17 @@
   fill: none;
 }
 
+g.arc.infocus > path.edge {
+  stroke: $dark-green;
+}
+
 marker#arr {
   overflow: visible;
   path {
-    fill-opacity:1;
-    stroke-width: 2; 
     stroke: $darkest-orange;
     fill: $darkest-orange;
+    fill-opacity:1;
+    stroke-width: 2; 
   }
 }
 
@@ -41,6 +45,11 @@
   }
 }
 
+g.label.infocus rect {
+  stroke: $dark-green;
+  fill: $lightest-green;
+}
+
 g.middle.mark {
   rect {
     fill: $darker-orange;