diff --git a/gui/ngXosViews/serviceTopology/src/css/serviceTopology.css b/gui/ngXosViews/serviceTopology/src/css/serviceTopology.css
index 220d2ab..2afcf08 100644
--- a/gui/ngXosViews/serviceTopology/src/css/serviceTopology.css
+++ b/gui/ngXosViews/serviceTopology/src/css/serviceTopology.css
@@ -14,6 +14,11 @@
     stroke-width: 3px;
 }
 
+.node.subscriber circle,
+.node.internet circle {
+    stroke: #ffdb07;
+}
+
 .node rect.slice-detail{
     fill: #fff;
     stroke: steelblue;
diff --git a/gui/ngXosViews/serviceTopology/src/js/d3.js b/gui/ngXosViews/serviceTopology/src/js/d3.js
index d87ecda..52127a4 100644
--- a/gui/ngXosViews/serviceTopology/src/js/d3.js
+++ b/gui/ngXosViews/serviceTopology/src/js/d3.js
@@ -5,5 +5,10 @@
     .factory('d3', function($window){
       return $window.d3;
     })
+  .service('TreeLayout', function(){
+    this.updateTree = (source) => {
+
+    }
+  });
 
 }());
\ No newline at end of file
diff --git a/gui/ngXosViews/serviceTopology/src/js/services.js b/gui/ngXosViews/serviceTopology/src/js/services.js
index d6d2fa8..e7c6e3f 100644
--- a/gui/ngXosViews/serviceTopology/src/js/services.js
+++ b/gui/ngXosViews/serviceTopology/src/js/services.js
@@ -19,6 +19,20 @@
   })
   .service('ServiceRelation', function($q, _, lodash, Services, Tenant){
 
+    // count the mas depth of an object
+    const depthOf = (obj) => {
+      var depth = 0;
+      if (obj.children) {
+        obj.children.forEach(function (d) {
+          var tmpDepth = depthOf(d);
+          if (tmpDepth > depth) {
+            depth = tmpDepth
+          }
+        })
+      }
+      return 1 + depth
+    };
+
     // find all the relation defined for a given root
     const findLevelRelation = (tenants, rootId) => {
       return lodash.filter(tenants, service => {
@@ -41,6 +55,7 @@
       const tree = {
         name: rootService.humanReadableName,
         parent: parentName,
+        type: 'service',
         service: rootService,
         children: []
       };
@@ -62,6 +77,15 @@
         tree.children.push(buildLevel(tenants, unlinkedServices, service, rootService.humanReadableName));
       });
 
+      // if it is the last element append internet
+      if(tree.children.length === 0){
+        tree.children.push({
+          name: 'Internet',
+          type: 'internet',
+          children: []
+        });
+      }
+
       return tree;
     };
 
@@ -78,6 +102,7 @@
       return {
         name: subscriber.name,
         parent: null,
+        type: 'subscriber',
         children: [serviceTree]
       };
 
@@ -101,13 +126,15 @@
       });
 
       return deferred.promise;
-    }
+    };
 
+    // export APIs
     this.get = get;
     this.buildLevel = buildLevel;
     this.buildServiceTree = buildServiceTree;
     this.findLevelRelation = findLevelRelation;
     this.findLevelServices = findLevelServices;
+    this.depthOf = depthOf;
   });
 
 }());
\ No newline at end of file
diff --git a/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js b/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js
index dab5c3f..008eaa3 100644
--- a/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js
+++ b/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js
@@ -14,20 +14,6 @@
         this.instances = [];
         this.slices = [];
 
-        // count the mas depth of an object
-        const depthOf = (obj) => {
-          var depth = 0;
-          if (obj.children) {
-            obj.children.forEach(function (d) {
-              var tmpDepth = depthOf(d);
-              if (tmpDepth > depth) {
-                depth = tmpDepth
-              }
-            })
-          }
-          return 1 + depth
-        };
-
         const width = $window.innerWidth - serviceTopologyConfig.widthMargin;
         const height = $window.innerHeight - serviceTopologyConfig.heightMargin;
 
@@ -42,7 +28,7 @@
           .style('width', `${$window.innerWidth}px`)
           .style('height', `${$window.innerHeight}px`)
           .append('g')
-          .attr("transform", "translate(" + serviceTopologyConfig.widthMargin+ "," + serviceTopologyConfig.heightMargin + ")");;
+          .attr('transform', 'translate(' + serviceTopologyConfig.widthMargin+ '','' + serviceTopologyConfig.heightMargin + '')'');;
 
         //const resizeCanvas = () => {
         //  var targetSize = svg.node().getBoundingClientRect();
@@ -92,7 +78,9 @@
 
           // Enter any new nodes at the parent's previous position.
           var nodeEnter = node.enter().append('g')
-            .attr('class', 'node')
+            .attr({
+              class: d => `node ${d.type}`
+            })
             .attr('transform', function(d) {
               // this is the starting position
               return 'translate(' + source.y0 + ',' + source.x0 + ')';
@@ -109,7 +97,6 @@
               if((d.children || d._children) && d.parent || d._parent){
                 return 'rotate(30)';
               }
-              return;
             })
             .attr('dy', '.35em')
             .attr('text-anchor', function(d) { return d.children || d._children ? 'end' : 'start'; })
@@ -198,7 +185,7 @@
           selectedNode
             .transition()
             .duration(duration)
-            .attr('r', 30);
+            .attr('r', 15);
 
           if(!d.service){
             return;
@@ -214,6 +201,7 @@
             _this.slices = slices;
 
             if(slices.length > 0){
+              // TODO slice can be more than 1 create a for loop
               const parentNode = d3.select(this.parentNode);
 
               parentNode
@@ -229,6 +217,7 @@
                 .transition()
                 .duration(duration)
                 .style('opacity', 1);
+                // TODO attach a click listener to draw instances and networks
 
               parentNode
                 .append('text')
@@ -248,13 +237,17 @@
                 .transition()
                 .duration(duration)
                 .style('opacity', 1);
-              }
+            }
           })
         };
 
         Subscribers.query().$promise
         .then((subscribers) => {
           this.subscribers = subscribers;
+          if(subscribers.length === 1){
+            this.selectedSubscriber = subscribers[0];
+            this.getServiceChain(this.selectedSubscriber);
+          }
         });
 
         this.getInstances = (slice) => {
diff --git a/gui/ngXosViews/serviceTopology/src/templates/topology_canvas.tpl.html b/gui/ngXosViews/serviceTopology/src/templates/topology_canvas.tpl.html
index e05ee17..5336ddc 100644
--- a/gui/ngXosViews/serviceTopology/src/templates/topology_canvas.tpl.html
+++ b/gui/ngXosViews/serviceTopology/src/templates/topology_canvas.tpl.html
@@ -1,4 +1,6 @@
-<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>
+<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)">
+    <option value="">Select a subscriber...</option>
+</select>
 <div class="service-details">
     <div class="service-slices animate" ng-hide="vm.slices.length == 0">
         <div class="panel panel-info">