diff --git a/views/ngXosViews/diagnostic/src/js/d3.js b/views/ngXosViews/diagnostic/src/js/d3.js
index 027f08d..d94a22e 100644
--- a/views/ngXosViews/diagnostic/src/js/d3.js
+++ b/views/ngXosViews/diagnostic/src/js/d3.js
@@ -2,260 +2,8 @@
   'use strict';
 
   angular.module('xos.serviceTopology')
-    .factory('d3', function($window){
-      return $window.d3;
-    })
-  .service('TreeLayout', function($window, $log, lodash, ServiceRelation, serviceTopologyConfig){
-
-    const drawLegend = (svg) => {
-      const legendContainer = svg.append('g')
-        .attr({
-          class: 'legend'
-        });
-
-      legendContainer.append('rect')
-      .attr({
-        transform: d => `translate(10, 80)`,
-        width: 100,
-        height: 100
-      });
-
-      // service
-      const service = legendContainer.append('g')
-      .attr({
-        class: 'node service'
-      });
-
-      service.append('circle')
-      .attr({
-        r: serviceTopologyConfig.circle.radius,
-        transform: d => `translate(30, 100)`
-      });
-
-      service.append('text')
-      .attr({
-        transform: d => `translate(45, 100)`,
-        dy: '.35em'
-      })
-      .text('Service')
-        .style('fill-opacity', 1);
-
-      // slice
-      const slice = legendContainer.append('g')
-        .attr({
-          class: 'node slice'
-        });
-
-      slice.append('rect')
-        .attr({
-          width: 20,
-          height: 20,
-          x: -10,
-          y: -10,
-          transform: d => `translate(30, 130)`
-        });
-
-      slice.append('text')
-        .attr({
-          transform: d => `translate(45, 130)`,
-          dy: '.35em'
-        })
-        .text('Slices')
-        .style('fill-opacity', 1);
-
-      // instance
-      const instance = legendContainer.append('g')
-        .attr({
-          class: 'node instance'
-        });
-
-      instance.append('rect')
-        .attr({
-          width: 20,
-          height: 20,
-          x: -10,
-          y: -10,
-          transform: d => `translate(30, 160)`
-        });
-
-      instance.append('text')
-        .attr({
-          transform: d => `translate(45, 160)`,
-          dy: '.35em'
-        })
-        .text('Instances')
-        .style('fill-opacity', 1);
-    };
-
-    var _svg, _layout, _source;
-
-    var i = 0;
-
-    // given a canvas, a layout and a data source, draw a tree layout
-    const updateTree = (svg, layout, source) => {
-
-      //cache data
-      _svg = svg;
-      _layout = layout;
-      _source = source;
-
-      const maxDepth = ServiceRelation.depthOf(source);
-
-      const diagonal = d3.svg.diagonal()
-        .projection(d => [d.y, d.x]);
-
-      // Compute the new tree layout.
-      var nodes = layout.nodes(source).reverse(),
-        links = layout.links(nodes);
-
-      // Normalize for fixed-depth.
-      nodes.forEach(function(d) {
-        // position the child node horizontally
-        const step = (($window.innerWidth - (serviceTopologyConfig.widthMargin * 2)) / maxDepth);
-        d.y = d.depth * step;
-      });
-
-      // Update the nodes…
-      var node = svg.selectAll('g.node')
-        .data(nodes, function(d) { return d.id || (d.id = ++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(${source.y0}, ${source.x0})`
-        });
-
-      const subscriberNodes = nodeEnter.filter('.subscriber');
-      const internetNodes = nodeEnter.filter('.internet');
-      const serviceNodes = nodeEnter.filter('.service');
-      const instanceNodes = nodeEnter.filter('.instance');
-      const sliceNodes = nodeEnter.filter('.slice');
-
-      subscriberNodes.append('rect')
-        .attr(serviceTopologyConfig.square);
-
-      internetNodes.append('rect')
-        .attr(serviceTopologyConfig.square);
-
-      serviceNodes.append('circle')
-        .attr('r', 1e-6)
-        .style('fill', d => d._children ? 'lightsteelblue' : '#fff')
-        .on('click', serviceClick);
-
-      sliceNodes.append('rect')
-        .attr({
-          width: 20,
-          height: 20,
-          x: -10,
-          y: -10
-        });
-
-      instanceNodes.append('rect')
-        .attr({
-          width: 20,
-          height: 20,
-          x: -10,
-          y: -10,
-          class: d => d.active ?'' : 'active'
-        });
-
-      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 ? 'end' : 'start'
-        })
-        .text(d => d.name)
-        .style('fill-opacity', 1e-6);
-
-      // Transition nodes to their new position.
-      var nodeUpdate = node.transition()
-        .duration(serviceTopologyConfig.duration)
-        .attr({
-          'transform': d => `translate(${d.y},${d.x})`
-        });
-
-      nodeUpdate.select('circle')
-        .attr('r', d => d.selected ? serviceTopologyConfig.circle.selectedRadius : serviceTopologyConfig.circle.radius)
-        .style('fill', d => d.selected ? 'lightsteelblue' : '#fff');
-
-      nodeUpdate.select('text')
-        .style('fill-opacity', 1);
-
-      // Transition exiting nodes to the parent's new position.
-      var nodeExit = node.exit().transition()
-        .duration(serviceTopologyConfig.duration)
-        .remove();
-
-      nodeExit.select('circle')
-        .attr('r', 1e-6);
-
-      nodeExit.select('text')
-        .style('fill-opacity', 1e-6);
-
-      // Update the links…
-      var link = svg.selectAll('path.link')
-        .data(links, function(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} ${d.target.active ? '' : 'active'}`)
-        .attr('d', function(d) {
-          var o = {x: source.x0, y: source.y0};
-          return diagonal({source: o, target: o});
-        });
-
-      // Transition links to their new position.
-      link.transition()
-        .duration(serviceTopologyConfig.duration)
-        .attr('d', diagonal);
-
-      // Transition exiting nodes to the parent's new position.
-      link.exit().transition()
-        .duration(serviceTopologyConfig.duration)
-        .attr('d', function(d) {
-          var o = {x: source.x, y: source.y};
-          return diagonal({source: o, target: o});
-        })
-        .remove();
-
-      // Stash the old positions for transition.
-      nodes.forEach(function(d) {
-        d.x0 = d.x;
-        d.y0 = d.y;
-      });
-    };
-
-    const serviceClick = function(d) {
-
-      $log.info('TODO emit an event to highlight VMs');
-
-      if(!d.service){
-        return;
-      }
-
-      // toggling selected status
-      d.selected = !d.selected;
-
-      var selectedNode = d3.select(this);
-
-      selectedNode
-        .transition()
-        .duration(serviceTopologyConfig.duration)
-        .attr('r', serviceTopologyConfig.circle.selectedRadius);
-    };
-
-    this.updateTree = updateTree;
-    this.drawLegend = drawLegend;
-  });
+  .factory('d3', function($window){
+    return $window.d3;
+  })
 
 }());
\ No newline at end of file
diff --git a/views/ngXosViews/diagnostic/src/js/diagnostic.js b/views/ngXosViews/diagnostic/src/js/diagnostic.js
index 0a02b04..938b2f6 100644
--- a/views/ngXosViews/diagnostic/src/js/diagnostic.js
+++ b/views/ngXosViews/diagnostic/src/js/diagnostic.js
@@ -10,7 +10,6 @@
       controller: function(Subscribers, ServiceRelation){
         Subscribers.queryWithDevices().$promise
         .then((subscribers) => {
-          console.log(subscribers);
           this.subscribers = subscribers;
           return ServiceRelation.get(subscribers[0]);
         })
diff --git a/views/ngXosViews/diagnostic/src/js/logicTopology.js b/views/ngXosViews/diagnostic/src/js/logicTopology.js
index c00b5b6..0a9215e 100644
--- a/views/ngXosViews/diagnostic/src/js/logicTopology.js
+++ b/views/ngXosViews/diagnostic/src/js/logicTopology.js
@@ -5,15 +5,38 @@
     return {
       restrict: 'E',
       scope: {
-        serviceChain: '='
+        subscribers: '=',
+        selected: '='
       },
       bindToController: true,
       controllerAs: 'vm',
       template: '',
-      controller: function($element, $log){
+      controller: function($element, $log, $scope, d3, LogicTopologyHelper){
         $log.info('Logic Plane');
 
-        
+        var svg;
+
+        $scope.$watch(() => this.subscribers, (subscribers) => {
+          if(subscribers){
+            LogicTopologyHelper.handleSubscribers(svg, subscribers);
+          }
+        });
+
+        $scope.$watch(() => this.selected, (selected) => {
+          if(selected){
+            $log.info(`Update logic layer for subscriber ${selected.humanReadableName}`);
+          }
+        });
+
+        const handleSvg = (el) => {
+
+          svg = d3.select(el)
+          .append('svg')
+          .style('width', `${el.clientWidth}px`)
+          .style('height', `${el.clientHeight}px`);
+        }
+
+        handleSvg($element[0]);
       }
     };
   });
diff --git a/views/ngXosViews/diagnostic/src/js/logicTopologyHelper.js b/views/ngXosViews/diagnostic/src/js/logicTopologyHelper.js
new file mode 100644
index 0000000..8aedda2
--- /dev/null
+++ b/views/ngXosViews/diagnostic/src/js/logicTopologyHelper.js
@@ -0,0 +1,105 @@
+(function () {
+  'use strict';
+
+  angular.module('xos.serviceTopology')
+  .service('LogicTopologyHelper', function($window, $log, lodash, serviceTopologyConfig){
+
+    var hStep, vStep;
+
+    const createDevice = (container, device, xPos, yPos, target) => {
+
+      const deviceGroup = container.append('g')
+      .attr({
+        class: 'device',
+        transform: `translate(${xPos}, ${yPos})`
+      });
+
+      const deviceEl = deviceGroup.append('circle')
+      .attr({
+        r: serviceTopologyConfig.circle.radius
+      });
+
+      deviceGroup.append('text')
+      .attr({
+        x: - serviceTopologyConfig.circle.radius - 3,
+        dy: '.35em',
+        'text-anchor': 'end'
+      })
+      .text(device.name)
+
+      const [deviceX, deviceY] = d3.transform(deviceEl.attr('transform')).translate;
+      const [deviceGroupX, deviceGroupY] = d3.transform(deviceGroup.attr('transform')).translate;
+      let [targetX, targetY] = d3.transform(target.attr('transform')).translate;
+
+      targetX = targetX - deviceGroupX;
+      targetY = targetY - deviceGroupY;
+
+      console.log('Device: ' + deviceX, deviceY);
+      console.log('Subscriber: ' + targetX, targetY);
+
+      var diagonal = d3.svg.diagonal()
+      .source({x: deviceX, y: deviceY})
+      .target({x: targetX, y: targetY})
+      .projection(d => {
+        return [d.x, d.y];
+      });
+
+      deviceGroup
+        .append('path')
+        .attr('class', 'device-link')
+        .attr('d', diagonal);
+    }
+
+    const createSubscriber = (container, subscriber, xPos, yPos) => {
+
+      const subscriberGroup = container.append('g')
+      .attr({
+        class: 'subscriber',
+        transform: `translate(${xPos * 2}, ${yPos})`
+      });
+
+      subscriberGroup.append('circle')
+      .attr({
+        r: serviceTopologyConfig.circle.radius
+      });
+
+      subscriberGroup.append('text')
+      .attr({
+        x: serviceTopologyConfig.circle.radius + 3,
+        dy: '.35em',
+        'text-anchor': 'start'
+      })
+      .text(subscriber.humanReadableName)
+
+      // TODO
+      // starting from the subscriber position, we should center
+      // the device goup based on his own height
+      // const deviceContainer = container.append('g')
+      // .attr({
+      //   class: 'devices-container',
+      //   transform: `translate(${xPos}, ${yPos -(vStep / 2)})`
+      // });
+
+      angular.forEach(subscriber.devices, (device, j) => {
+        createDevice(container, device, xPos, ((vStep / subscriber.devices.length) * j) + (yPos - vStep / 2), subscriberGroup);
+      });
+    }
+
+    this.handleSubscribers = (svg, subscribers) => {
+
+      // HACKY
+      hStep = angular.element(svg[0])[0].clientWidth / 7;
+      vStep = angular.element(svg[0])[0].clientHeight / (subscribers.length + 1);
+
+      const container = svg.append('g')
+      .attr({
+        class: 'subscribers-container'
+      });
+
+      lodash.forEach(subscribers, (subscriber, i) => {
+        createSubscriber(container, subscriber, hStep, vStep * (i + 1));
+      })
+    }
+  });
+
+}());
\ No newline at end of file
diff --git a/views/ngXosViews/diagnostic/src/js/services.js b/views/ngXosViews/diagnostic/src/js/rest_services.js
similarity index 96%
rename from views/ngXosViews/diagnostic/src/js/services.js
rename to views/ngXosViews/diagnostic/src/js/rest_services.js
index 669d028..beeb4fe 100644
--- a/views/ngXosViews/diagnostic/src/js/services.js
+++ b/views/ngXosViews/diagnostic/src/js/rest_services.js
@@ -21,21 +21,28 @@
         isArray: true,
         interceptor: {
           response: function(res){
+
+            /**
+            * For each subscriber retrieve devices and append them
+            */
+
             const deferred = $q.defer();
 
             let requests = [];
 
             angular.forEach(res.data, (subscriber) => {
-              requests.push(SubscriberDevice.query({id: subscriber.id}));
+              requests.push(SubscriberDevice.query({id: subscriber.id}).$promise);
             })
 
             $q.all(requests)
             .then((list) => {
-              console.log(list);
               res.data.map((subscriber, i) => {
                 subscriber.devices = list[i];
                 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 163ee34..820b3a9 100644
--- a/views/ngXosViews/diagnostic/src/js/serviceTopology.js
+++ b/views/ngXosViews/diagnostic/src/js/serviceTopology.js
@@ -11,13 +11,12 @@
       bindToController: true,
       controllerAs: 'vm',
       template: '',
-      controller: function($element, $window, $scope, d3, serviceTopologyConfig, ServiceRelation, Slice, Instances, Subscribers, TreeLayout){
+      controller: function($element, $window, $scope, d3, serviceTopologyConfig, ServiceRelation, Slice, Instances, Subscribers, ServiceTopologyHelper){
 
         const el = $element[0];
 
         d3.select(window)
         .on('resize', () => {
-          console.log('resize');
           draw(this.serviceChain);
         });
 
@@ -25,6 +24,8 @@
 
         const draw = (tree) => {
 
+          // TODO update instead clear and redraw
+
           // clean
           d3.select($element[0]).select('svg').remove();
 
@@ -46,8 +47,8 @@
           root.x0 = height / 2;
           root.y0 = width / 2;
 
-          TreeLayout.drawLegend(svg);
-          TreeLayout.updateTree(treeContainer, treeLayout, root);
+          ServiceTopologyHelper.drawLegend(svg);
+          ServiceTopologyHelper.updateTree(treeContainer, treeLayout, root);
         };
 
         this.getInstances = (slice) => {
diff --git a/views/ngXosViews/diagnostic/src/js/serviceTopologyHelper.js b/views/ngXosViews/diagnostic/src/js/serviceTopologyHelper.js
new file mode 100644
index 0000000..f3cb2d2
--- /dev/null
+++ b/views/ngXosViews/diagnostic/src/js/serviceTopologyHelper.js
@@ -0,0 +1,258 @@
+(function () {
+  'use strict';
+
+  angular.module('xos.serviceTopology')
+  .service('ServiceTopologyHelper', function($window, $log, lodash, ServiceRelation, serviceTopologyConfig){
+
+    const drawLegend = (svg) => {
+      const legendContainer = svg.append('g')
+        .attr({
+          class: 'legend'
+        });
+
+      legendContainer.append('rect')
+      .attr({
+        transform: d => `translate(10, 80)`,
+        width: 100,
+        height: 100
+      });
+
+      // service
+      const service = legendContainer.append('g')
+      .attr({
+        class: 'node service'
+      });
+
+      service.append('circle')
+      .attr({
+        r: serviceTopologyConfig.circle.radius,
+        transform: d => `translate(30, 100)`
+      });
+
+      service.append('text')
+      .attr({
+        transform: d => `translate(45, 100)`,
+        dy: '.35em'
+      })
+      .text('Service')
+        .style('fill-opacity', 1);
+
+      // slice
+      const slice = legendContainer.append('g')
+        .attr({
+          class: 'node slice'
+        });
+
+      slice.append('rect')
+        .attr({
+          width: 20,
+          height: 20,
+          x: -10,
+          y: -10,
+          transform: d => `translate(30, 130)`
+        });
+
+      slice.append('text')
+        .attr({
+          transform: d => `translate(45, 130)`,
+          dy: '.35em'
+        })
+        .text('Slices')
+        .style('fill-opacity', 1);
+
+      // instance
+      const instance = legendContainer.append('g')
+        .attr({
+          class: 'node instance'
+        });
+
+      instance.append('rect')
+        .attr({
+          width: 20,
+          height: 20,
+          x: -10,
+          y: -10,
+          transform: d => `translate(30, 160)`
+        });
+
+      instance.append('text')
+        .attr({
+          transform: d => `translate(45, 160)`,
+          dy: '.35em'
+        })
+        .text('Instances')
+        .style('fill-opacity', 1);
+    };
+
+    var _svg, _layout, _source;
+
+    var i = 0;
+
+    // given a canvas, a layout and a data source, draw a tree layout
+    const updateTree = (svg, layout, source) => {
+
+      //cache data
+      _svg = svg;
+      _layout = layout;
+      _source = source;
+
+      const maxDepth = ServiceRelation.depthOf(source);
+
+      const diagonal = d3.svg.diagonal()
+        .projection(d => [d.y, d.x]);
+
+      // Compute the new tree layout.
+      var nodes = layout.nodes(source).reverse(),
+        links = layout.links(nodes);
+
+      // Normalize for fixed-depth.
+      nodes.forEach(function(d) {
+        // position the child node horizontally
+        const step = (($window.innerWidth - (serviceTopologyConfig.widthMargin * 2)) / maxDepth);
+        d.y = d.depth * step;
+      });
+
+      // Update the nodes…
+      var node = svg.selectAll('g.node')
+        .data(nodes, function(d) { return d.id || (d.id = ++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(${source.y0}, ${source.x0})`
+        });
+
+      const subscriberNodes = nodeEnter.filter('.subscriber');
+      const internetNodes = nodeEnter.filter('.internet');
+      const serviceNodes = nodeEnter.filter('.service');
+      const instanceNodes = nodeEnter.filter('.instance');
+      const sliceNodes = nodeEnter.filter('.slice');
+
+      subscriberNodes.append('rect')
+        .attr(serviceTopologyConfig.square);
+
+      internetNodes.append('rect')
+        .attr(serviceTopologyConfig.square);
+
+      serviceNodes.append('circle')
+        .attr('r', 1e-6)
+        .style('fill', d => d._children ? 'lightsteelblue' : '#fff')
+        .on('click', serviceClick);
+
+      sliceNodes.append('rect')
+        .attr({
+          width: 20,
+          height: 20,
+          x: -10,
+          y: -10
+        });
+
+      instanceNodes.append('rect')
+        .attr({
+          width: 20,
+          height: 20,
+          x: -10,
+          y: -10,
+          class: d => d.active ?'' : 'active'
+        });
+
+      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 ? 'end' : 'start'
+        })
+        .text(d => d.name)
+        .style('fill-opacity', 1e-6);
+
+      // Transition nodes to their new position.
+      var nodeUpdate = node.transition()
+        .duration(serviceTopologyConfig.duration)
+        .attr({
+          'transform': d => `translate(${d.y},${d.x})`
+        });
+
+      nodeUpdate.select('circle')
+        .attr('r', d => d.selected ? serviceTopologyConfig.circle.selectedRadius : serviceTopologyConfig.circle.radius)
+        .style('fill', d => d.selected ? 'lightsteelblue' : '#fff');
+
+      nodeUpdate.select('text')
+        .style('fill-opacity', 1);
+
+      // Transition exiting nodes to the parent's new position.
+      var nodeExit = node.exit().transition()
+        .duration(serviceTopologyConfig.duration)
+        .remove();
+
+      nodeExit.select('circle')
+        .attr('r', 1e-6);
+
+      nodeExit.select('text')
+        .style('fill-opacity', 1e-6);
+
+      // Update the links…
+      var link = svg.selectAll('path.link')
+        .data(links, function(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} ${d.target.active ? '' : 'active'}`)
+        .attr('d', function(d) {
+          var o = {x: source.x0, y: source.y0};
+          return diagonal({source: o, target: o});
+        });
+
+      // Transition links to their new position.
+      link.transition()
+        .duration(serviceTopologyConfig.duration)
+        .attr('d', diagonal);
+
+      // Transition exiting nodes to the parent's new position.
+      link.exit().transition()
+        .duration(serviceTopologyConfig.duration)
+        .attr('d', function(d) {
+          var o = {x: source.x, y: source.y};
+          return diagonal({source: o, target: o});
+        })
+        .remove();
+
+      // Stash the old positions for transition.
+      nodes.forEach(function(d) {
+        d.x0 = d.x;
+        d.y0 = d.y;
+      });
+    };
+
+    const serviceClick = function(d) {
+
+      $log.info('TODO emit an event to highlight VMs');
+
+      if(!d.service){
+        return;
+      }
+
+      // toggling selected status
+      d.selected = !d.selected;
+
+      var selectedNode = d3.select(this);
+
+      selectedNode
+        .transition()
+        .duration(serviceTopologyConfig.duration)
+        .attr('r', serviceTopologyConfig.circle.selectedRadius);
+    };
+
+    this.updateTree = updateTree;
+    this.drawLegend = drawLegend;
+  });
+
+}());
\ No newline at end of file