diff --git a/gui/ngXosViews/serviceTopology/src/js/d3.js b/gui/ngXosViews/serviceTopology/src/js/d3.js
index 9452e5f..00684ee 100644
--- a/gui/ngXosViews/serviceTopology/src/js/d3.js
+++ b/gui/ngXosViews/serviceTopology/src/js/d3.js
@@ -31,10 +31,12 @@
       // Normalize for fixed-depth.
       nodes.forEach(function(d) {
         // position the child node horizontally
-        d.y = d.depth * (($window.innerWidth - (serviceTopologyConfig.widthMargin * 2)) / maxDepth);
-        console.log(d.id);
-        if(d.type == 'slice'){
-          console.info('slice found!', d);
+        const step = (($window.innerWidth - (serviceTopologyConfig.widthMargin * 2)) / maxDepth);
+        d.y = d.depth * step;
+        if(d.type === 'slice' || d.type === 'instance'){
+          d.y = d.depth * step - (step / 2);
+          //d.x = d.parent.x + (step / 2);
+          //console.log(d.parent);
         }
       });
 
@@ -49,6 +51,7 @@
           transform: d => `translate(${source.y0},${source.x0})` // this is the starting position
         });
 
+      // TODO append different shapes base on type
       nodeEnter.append('circle')
         .attr('r', 1e-6)
         .style('fill', d => d._children ? 'lightsteelblue' : '#fff')
@@ -98,7 +101,7 @@
 
       // Enter any new links at the parent's previous position.
       link.enter().insert('path', 'g')
-        .attr('class', 'link')
+        .attr('class', d => `link ${d.target.type}`)
         .attr('d', function(d) {
           var o = {x: source.x0, y: source.y0};
           return diagonal({source: o, target: o});
@@ -127,9 +130,8 @@
 
     const serviceClick = function(d) {
 
-      // empty panel
-      //_this.slices = [];
-      //_this.instances = [];
+      // toggling selected status
+      d.selected = !d.selected;
 
       // reset all the nodes to default radius
       var nodes = d3.selectAll('circle')
@@ -154,61 +156,18 @@
         return;
       }
 
-      //_this.selectedService = {
-      //  id: d.id,
-      //  name: d.name
-      //};
-
       ServiceRelation.getServiceInterfaces(d.service.id)
         .then(interfaceTree => {
 
           const isDetailed = lodash.find(d.children, {type: 'slice'});
           if(isDetailed){
-            d.selected = false;
             lodash.remove(d.children, {type: 'slice'});
           }
           else {
-            d.selected = true;
-
             d.children = d.children.concat(interfaceTree);
           }
 
           updateTree(_svg, _layout, _source);
-            // draw a rect with slice names
-            //const parentNode = d3.select(this.parentNode);
-            //parentNode
-            //  .append('rect')
-            //  .style('opacity', 0)
-            //  .attr({
-            //    width: 150,
-            //    height: 50,
-            //    y: 35,
-            //    x: -75,
-            //    class: 'slice-detail'
-            //  })
-            //  .transition()
-            //  .duration(serviceTopologyConfig.duration)
-            //  .style('opacity', 1);
-            // TODO attach a click listener to draw instances and networks
-
-            //parentNode
-            //  .append('text')
-            //  .style('opacity', 0)
-            //  .attr({
-            //    y: 65,
-            //    x: -60,
-            //    class: 'slice-name'
-            //  })
-            //  .text(() => {
-            //    if(slices[0]){
-            //      return slices[0].humanReadableName;
-            //    }
-            //
-            //    return '';
-            //  })
-            //  .transition()
-            //  .duration(serviceTopologyConfig.duration)
-            //  .style('opacity', 1);
         });
     };