diff --git a/gui/ngXosViews/serviceTopology/src/css/serviceTopology.css b/gui/ngXosViews/serviceTopology/src/css/serviceTopology.css
index b241361..4bb0b99 100644
--- a/gui/ngXosViews/serviceTopology/src/css/serviceTopology.css
+++ b/gui/ngXosViews/serviceTopology/src/css/serviceTopology.css
@@ -4,6 +4,14 @@
     display: block;
 }
 
+service-canvas select.subscriber-select{
+    z-index: 1000;
+    position: absolute;
+    width: 200px;
+    top: 10px;
+    left: 10px;
+}
+
 service-canvas svg {
     position: absolute;
     top: 0;
@@ -48,6 +56,11 @@
     stroke-width: 2px;
 }
 
+.link.slice,
+.link.instance {
+    stroke: rgba(157, 4, 183, 0.29);
+}
+
 .service-details{
     width: 200px;
     position: absolute;
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);
         });
     };
 
diff --git a/gui/ngXosViews/serviceTopology/src/js/services.js b/gui/ngXosViews/serviceTopology/src/js/services.js
index 55eac9c..88a1b17 100644
--- a/gui/ngXosViews/serviceTopology/src/js/services.js
+++ b/gui/ngXosViews/serviceTopology/src/js/services.js
@@ -141,6 +141,10 @@
           return promises;
         }, []);
 
+        // TODO add networks
+        // decide how, they should be manually drawn
+        // as they connect more instances without parent dependencies
+
         return $q.all(promisesArr);
       })
       .then((instances) => {
diff --git a/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js b/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js
index b53d29f..600e301 100644
--- a/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js
+++ b/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js
@@ -11,6 +11,8 @@
       templateUrl: 'templates/topology_canvas.tpl.html',
       controller: function($element, $window, d3, serviceTopologyConfig, ServiceRelation, Slice, Instances, Subscribers, TreeLayout){
 
+        // TODO draw legend
+
         this.instances = [];
         this.slices = [];
 
diff --git a/gui/ngXosViews/serviceTopology/src/templates/topology_canvas.tpl.html b/gui/ngXosViews/serviceTopology/src/templates/topology_canvas.tpl.html
index 35857a3..4c992b1 100644
--- a/gui/ngXosViews/serviceTopology/src/templates/topology_canvas.tpl.html
+++ b/gui/ngXosViews/serviceTopology/src/templates/topology_canvas.tpl.html
@@ -1,4 +1,4 @@
-<select class="form-control" ng-options="s as s.name for s in vm.subscribers" ng-model="vm.selectedSubscriber" ng-change="vm.getServiceChain(vm.selectedSubscriber)">
+<select class="form-control subscriber-select" ng-options="s as s.name for s in vm.subscribers" ng-model="vm.selectedSubscriber" ng-change="vm.getServiceChain(vm.selectedSubscriber)">
     <option value="">Select a subscriber...</option>
 </select>
 <!--<div class="service-details">-->