diff --git a/views/ngXosViews/diagnostic/src/js/logicTopology.js b/views/ngXosViews/diagnostic/src/js/logicTopology.js
index 0a9215e..b689b89 100644
--- a/views/ngXosViews/diagnostic/src/js/logicTopology.js
+++ b/views/ngXosViews/diagnostic/src/js/logicTopology.js
@@ -18,7 +18,7 @@
 
         $scope.$watch(() => this.subscribers, (subscribers) => {
           if(subscribers){
-            LogicTopologyHelper.handleSubscribers(svg, subscribers);
+            LogicTopologyHelper.addSubscribers(svg, angular.copy(subscribers));
           }
         });
 
@@ -37,6 +37,7 @@
         }
 
         handleSvg($element[0]);
+        LogicTopologyHelper.drawTree(svg);
       }
     };
   });
diff --git a/views/ngXosViews/diagnostic/src/js/logicTopologyHelper.js b/views/ngXosViews/diagnostic/src/js/logicTopologyHelper.js
index a15b017..56d1f56 100644
--- a/views/ngXosViews/diagnostic/src/js/logicTopologyHelper.js
+++ b/views/ngXosViews/diagnostic/src/js/logicTopologyHelper.js
@@ -100,6 +100,153 @@
         createSubscriber(container, subscriber, hStep, vStep * (i + 1));
       })
     }
+
+    var diagonal, nodes, links, i = 0, svgWidth, svgHeight, layout;
+
+    const baseData = {
+      name: 'Router',
+      type: 'router',
+      children: [
+        {
+          name: 'WAN',
+          type: 'network',
+          children: [
+            {
+              name: 'Rack',
+              type: 'rack',
+              children: [
+                {
+                  name: 'LAN',
+                  type: 'network',
+                  children: [] //subscribers goes here
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    };
+
+    const computeLayout = (data) => {
+      let nodes = layout.nodes(data);
+
+      // Normalize for fixed-depth.
+      nodes.forEach(function(d) {
+        // position the child node horizontally
+        const step = ((svgWidth - (serviceTopologyConfig.widthMargin * 2)) / 7);
+        d.y = (6 - d.depth) * step;
+      });
+
+      let links = layout.links(nodes);
+      console.log(nodes.length, links.length);
+      return [nodes, links];
+    };
+
+    const drawNodes = (svg, nodes) => {
+      // Update the nodes…
+      var node = svg.selectAll('g.node')
+      .data(nodes, d => {return d.id || (d.id = `tree-${i++}`)});
+
+      // Enter any new nodes at the parent's previous position.
+      var nodeEnter = node.enter().append('g')
+      .attr({
+        class: d => `node ${d.type}`,
+        transform: `translate(${svgWidth / 2}, ${svgHeight / 2})`
+      });
+
+      nodeEnter.append('circle')
+        .attr('r', 10)
+        .style('fill', d => d._children ? 'lightsteelblue' : '#fff');
+
+      nodeEnter.append('text')
+        .attr({
+          x: d => d.children ? serviceTopologyConfig.circle.selectedRadius + 3 : -serviceTopologyConfig.circle.selectedRadius - 3,
+          dy: '.35em',
+          transform: d => {
+            if (d.children && d.parent){
+              if(d.parent.x < d.x){
+                return 'rotate(-30)';
+              }
+              return 'rotate(30)';
+            }
+          },
+          'text-anchor': d => d.children ? 'start' : 'end'
+        })
+        .text(d => d.name);
+
+      // Transition nodes to their new position.
+      var nodeUpdate = node.transition()
+        .duration(serviceTopologyConfig.duration)
+        .attr({
+          'transform': d => `translate(${d.y},${d.x})`
+        });
+
+      // TODO handle node remove
+    };
+
+    const drawLinks = (svg, links) => {
+
+      diagonal = d3.svg.diagonal()
+      .projection(d => [d.y, d.x]);
+
+      // Update the links…
+      var link = svg.selectAll('path.link')
+        .data(links, d => {
+          return d.target.id
+        });
+
+      // Enter any new links at the parent's previous position.
+      link.enter().insert('path', 'g')
+        .attr('class', d => `link ${d.target.type}`)
+        .attr('d', function(d) {
+          var o = {x: svgHeight / 2, y: svgWidth / 2};
+          return diagonal({source: o, target: o});
+        });
+
+      // Transition links to their new position.
+      link.transition()
+        .duration(serviceTopologyConfig.duration)
+        .attr('d', diagonal);
+    };
+
+    this.drawTree = (svg) => {
+      
+
+      svgWidth = svg.node().getBoundingClientRect().width;
+      svgHeight = svg.node().getBoundingClientRect().height;
+
+      const width = svgWidth - (serviceTopologyConfig.widthMargin * 2);
+      const height = svgHeight - (serviceTopologyConfig.heightMargin * 2);
+
+      layout = d3.layout.tree()
+      .size([height, width]);
+
+      // Compute the new tree layout.
+      [nodes, links] = computeLayout(baseData);
+
+      drawNodes(svg, nodes);
+      drawLinks(svg, links);
+      
+    };
+
+    this.addSubscribers = (svg, subscribers) => {
+
+      console.log(subscribers);
+
+      subscribers.map((subscriber) => {
+        subscriber.children = subscriber.devices;
+      });
+
+      // add subscriber to data tree
+      baseData.children[0].children[0].children[0].children = subscribers;
+
+      console.log(baseData);
+
+      [nodes, links] = computeLayout(baseData);
+
+      drawNodes(svg, nodes);
+      drawLinks(svg, links);
+    }
   });
 
 }());
\ No newline at end of file
diff --git a/views/ngXosViews/diagnostic/src/js/rest_services.js b/views/ngXosViews/diagnostic/src/js/rest_services.js
index beeb4fe..be523da 100644
--- a/views/ngXosViews/diagnostic/src/js/rest_services.js
+++ b/views/ngXosViews/diagnostic/src/js/rest_services.js
@@ -41,8 +41,6 @@
                 return subscriber;
               });
 
-              // faking to have 2 subscriber
-              res.data.push(res.data[0]);
               deferred.resolve(res.data);
             })
 
diff --git a/views/ngXosViews/diagnostic/src/js/serviceTopology.js b/views/ngXosViews/diagnostic/src/js/serviceTopology.js
index 820b3a9..0587cb0 100644
--- a/views/ngXosViews/diagnostic/src/js/serviceTopology.js
+++ b/views/ngXosViews/diagnostic/src/js/serviceTopology.js
@@ -47,7 +47,7 @@
           root.x0 = height / 2;
           root.y0 = width / 2;
 
-          ServiceTopologyHelper.drawLegend(svg);
+          // ServiceTopologyHelper.drawLegend(svg);
           ServiceTopologyHelper.updateTree(treeContainer, treeLayout, root);
         };