diff --git a/views/ngXosViews/diagnostic/src/index.html b/views/ngXosViews/diagnostic/src/index.html
index f7282b9..2c0e84d 100644
--- a/views/ngXosViews/diagnostic/src/index.html
+++ b/views/ngXosViews/diagnostic/src/index.html
@@ -35,6 +35,7 @@
 <script src="/.tmp/main.js"></script>
 <script src="/.tmp/services.js"></script>
 <script src="/.tmp/serviceTopology.js"></script>
+<script src="/.tmp/logicTopology.js"></script>
 <script src="/.tmp/diagnostic.js"></script>
 <script src="/.tmp/d3.js"></script>
 <script src="/.tmp/config.js"></script>
diff --git a/views/ngXosViews/diagnostic/src/js/diagnostic.js b/views/ngXosViews/diagnostic/src/js/diagnostic.js
index 7f433f6..0a02b04 100644
--- a/views/ngXosViews/diagnostic/src/js/diagnostic.js
+++ b/views/ngXosViews/diagnostic/src/js/diagnostic.js
@@ -8,11 +8,11 @@
       templateUrl: 'templates/diagnostic.tpl.html',
       controllerAs: 'vm',
       controller: function(Subscribers, ServiceRelation){
-        Subscribers.query().$promise
+        Subscribers.queryWithDevices().$promise
         .then((subscribers) => {
+          console.log(subscribers);
           this.subscribers = subscribers;
-          this.selectedSubscriber = subscribers[0];
-          return ServiceRelation.get(this.selectedSubscriber);
+          return ServiceRelation.get(subscribers[0]);
         })
         .then((serviceChain) => {
           this.serviceChain = serviceChain;
diff --git a/views/ngXosViews/diagnostic/src/js/logicTopology.js b/views/ngXosViews/diagnostic/src/js/logicTopology.js
new file mode 100644
index 0000000..c00b5b6
--- /dev/null
+++ b/views/ngXosViews/diagnostic/src/js/logicTopology.js
@@ -0,0 +1,20 @@
+(function () {
+  'use strict';
+  angular.module('xos.serviceTopology')
+  .directive('logicTopology', function(){
+    return {
+      restrict: 'E',
+      scope: {
+        serviceChain: '='
+      },
+      bindToController: true,
+      controllerAs: 'vm',
+      template: '',
+      controller: function($element, $log){
+        $log.info('Logic Plane');
+
+        
+      }
+    };
+  });
+})();
diff --git a/views/ngXosViews/diagnostic/src/js/serviceTopology.js b/views/ngXosViews/diagnostic/src/js/serviceTopology.js
index d30122c..163ee34 100644
--- a/views/ngXosViews/diagnostic/src/js/serviceTopology.js
+++ b/views/ngXosViews/diagnostic/src/js/serviceTopology.js
@@ -15,35 +15,41 @@
 
         const el = $element[0];
 
-        this.instances = [];
-        this.slices = [];
+        d3.select(window)
+        .on('resize', () => {
+          console.log('resize');
+          draw(this.serviceChain);
+        });
 
-        const width = el.clientWidth - (serviceTopologyConfig.widthMargin * 2);
-        const height = el.clientHeight - (serviceTopologyConfig.heightMargin * 2);
-
-        const treeLayout = d3.layout.tree()
-          .size([height, width]);
-
-        const svg = d3.select($element[0])
-          .append('svg')
-          .style('width', `${el.clientWidth}px`)
-          .style('height', `${el.clientHeight}px`)
-
-        const treeContainer = svg.append('g')
-          .attr('transform', `translate(${serviceTopologyConfig.widthMargin * 4},${serviceTopologyConfig.heightMargin})`);
-
-        var root;
+        var root, svg;
 
         const draw = (tree) => {
+
+          // clean
+          d3.select($element[0]).select('svg').remove();
+
+          const width = el.clientWidth - (serviceTopologyConfig.widthMargin * 2);
+          const height = el.clientHeight - (serviceTopologyConfig.heightMargin * 2);
+
+          const treeLayout = d3.layout.tree()
+            .size([height, width]);
+
+          svg = d3.select($element[0])
+            .append('svg')
+            .style('width', `${el.clientWidth}px`)
+            .style('height', `${el.clientHeight}px`)
+
+          const treeContainer = svg.append('g')
+            .attr('transform', `translate(${serviceTopologyConfig.widthMargin * 4},${serviceTopologyConfig.heightMargin})`);
+
           root = tree;
           root.x0 = height / 2;
           root.y0 = width / 2;
 
+          TreeLayout.drawLegend(svg);
           TreeLayout.updateTree(treeContainer, treeLayout, root);
         };
 
-        TreeLayout.drawLegend(svg);
-
         this.getInstances = (slice) => {
           Instances.query({slice: slice.id}).$promise
           .then((instances) => {
diff --git a/views/ngXosViews/diagnostic/src/js/services.js b/views/ngXosViews/diagnostic/src/js/services.js
index 60a20d2..669d028 100644
--- a/views/ngXosViews/diagnostic/src/js/services.js
+++ b/views/ngXosViews/diagnostic/src/js/services.js
@@ -14,8 +14,39 @@
   .service('Instances', function($resource){
     return $resource('/xos/instances', {id: '@id'});
   })
-  .service('Subscribers', function($resource){
-    return $resource('/xos/subscribers', {id: '@id'});
+  .service('Subscribers', function($resource, $q, SubscriberDevice){
+    return $resource('/xos/subscribers', {id: '@id'}, {
+      queryWithDevices: {
+        method: 'GET',
+        isArray: true,
+        interceptor: {
+          response: function(res){
+            const deferred = $q.defer();
+
+            let requests = [];
+
+            angular.forEach(res.data, (subscriber) => {
+              requests.push(SubscriberDevice.query({id: subscriber.id}));
+            })
+
+            $q.all(requests)
+            .then((list) => {
+              console.log(list);
+              res.data.map((subscriber, i) => {
+                subscriber.devices = list[i];
+                return subscriber;
+              });
+              deferred.resolve(res.data);
+            })
+
+            return deferred.promise;
+          }
+        }
+      }
+    });
+  })
+  .service('SubscriberDevice', function($resource){
+    return $resource('/xoslib/rs/subscriber/:id/users/', {id: '@id'});
   })
   .service('ServiceRelation', function($q, lodash, Services, Tenant, Slice, Instances){
 
diff --git a/views/ngXosViews/diagnostic/src/templates/diagnostic.tpl.html b/views/ngXosViews/diagnostic/src/templates/diagnostic.tpl.html
index a8b2d3a..6a13d57 100644
--- a/views/ngXosViews/diagnostic/src/templates/diagnostic.tpl.html
+++ b/views/ngXosViews/diagnostic/src/templates/diagnostic.tpl.html
@@ -1,3 +1,18 @@
-<div class="half-height">
-  <service-topology service-chain="vm.serviceChain"></service-topology>  
-</div>
+<div class="container-fluid">
+  <div class="half-height">
+    <service-topology service-chain="vm.serviceChain"></service-topology>
+  </div>
+  <div class="half-height">
+    <div class="row col-sm-3">
+      <div class="panel panel-default">
+        <div class="panel-heading">Select a subscriber:</div>
+        <div class="panel-body">
+          <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>
+      </div>
+      <logic-topology></logic-topology>
+    </div>
+  </div>
+</div>
\ No newline at end of file