diff --git a/views/ngXosViews/diagnostic/src/index.html b/views/ngXosViews/diagnostic/src/index.html
index 34deef6..5678816 100644
--- a/views/ngXosViews/diagnostic/src/index.html
+++ b/views/ngXosViews/diagnostic/src/index.html
@@ -33,7 +33,6 @@
 <script src="/api/ng-xos.js"></script>
 <script src="/api/ng-hpcapi.js"></script>
 <script src="/.tmp/main.js"></script>
-<script src="/.tmp/subscriber_service.js"></script>
 <script src="/.tmp/subscriber-modal.js"></script>
 <script src="/.tmp/serviceTopologyHelper.js"></script>
 <script src="/.tmp/serviceTopology.js"></script>
@@ -45,4 +44,5 @@
 <script src="/.tmp/diagnostic.js"></script>
 <script src="/.tmp/d3.js"></script>
 <script src="/.tmp/config.js"></script>
+<script src="/.tmp/chart_data_service.js"></script>
 <!-- endinject -->
diff --git a/views/ngXosViews/diagnostic/src/js/chart_data_service.js b/views/ngXosViews/diagnostic/src/js/chart_data_service.js
new file mode 100644
index 0000000..4c53a03
--- /dev/null
+++ b/views/ngXosViews/diagnostic/src/js/chart_data_service.js
@@ -0,0 +1,157 @@
+(function () {
+  'use strict';
+
+  angular.module('xos.serviceTopology')
+  .service('ChartData', function($rootScope, $q, lodash, Tenant, Node, serviceTopologyConfig, Ceilometer) {
+    this.currentSubscriber = null;
+    this.currentServiceChain = null;
+
+    this.logicTopologyData = {
+      name: 'Router',
+      type: 'router',
+      children: [
+        {
+          name: 'WAN',
+          type: 'network',
+          children: [
+            {
+              name: 'Rack',
+              type: 'rack',
+              computeNodes: [],
+              children: [
+                {
+                  name: 'LAN',
+                  type: 'network',
+                  children: [{
+                    name: 'Subscriber',
+                    type: 'subscriber'
+                  }] //subscribers goes here
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    };
+
+    this.getLogicTree = () => {
+      const deferred = $q.defer();
+
+      Node.queryWithInstances().$promise
+        .then((computeNodes) => {
+          this.logicTopologyData.children[0].children[0].computeNodes = computeNodes;
+          // LogicTopologyHelper.updateTree(svg);
+          deferred.resolve(this.logicTopologyData);
+        });
+
+      return deferred.promise;
+    };
+
+    /**
+    * Add Subscriber tag to LAN Network
+    */
+    this.addSubscriberTag = (tags) => {
+      this.logicTopologyData.children[0].children[0].children[0].subscriberTag = {
+        cTag: tags.c_tag,
+        sTag: tags.s_tag
+      }
+    };
+
+    /**
+    * Add Subscribers to the tree
+    */
+    this.addSubscriber = (subscriber) => {
+      subscriber.children = subscriber.devices;
+
+      // add subscriber to data tree
+      this.logicTopologyData.children[0].children[0].children[0].children = [subscriber];
+      return this.logicTopologyData;
+    };
+
+    this.getSubscriberTag = () => {
+
+      this.addSubscriberTag(JSON.parse(this.currentServiceChain.children[0].tenant.service_specific_attribute));
+
+    };
+
+    this.getSubscriberIP = () => {
+      const ip = this.currentServiceChain.children[0].children[0].tenant.wan_container_ip;
+      this.logicTopologyData.children[0].subscriberIP = ip;
+    };
+
+    this.selectSubscriber = (subscriber) => {
+
+      // append the device with to config settings
+      serviceTopologyConfig.elWidths.push(160);
+
+      this.addSubscriber(angular.copy(subscriber));
+
+      this.getSubscriberTag();
+      this.getSubscriberIP();
+
+    };
+
+    this.highlightInstances = (instances) => {
+
+      const computeNodes = this.logicTopologyData.children[0].children[0].computeNodes;
+
+      // unselect all
+      computeNodes.map((node) => {
+        node.instances.map((instance) => {
+          instance.selected = false
+          return instance;
+        });
+      });
+
+      lodash.forEach(instances, (instance) => {
+        computeNodes.map((node) => {
+          node.instances.map((d3instance) => {
+            if(d3instance.id === instance.id){
+              d3instance.selected = true;
+            }
+            return d3instance;
+          });
+        });
+      });
+
+    }
+
+    this.getInstanceStatus = (service) => {
+      const deferred = $q.defer();
+
+      // NOTE consider if subscriber is selected or not,
+      // if not select instances
+      // else select containers (and follow subscriber chain to find the correct instance)
+
+      let p;
+
+      if(this.currentSubscriber){
+        let instances = [JSON.parse(service.tenant.service_specific_attribute).instance_id];
+        p = Ceilometer.getInstancesStats(instances);
+      }
+      else {
+        let param = {
+          'service_vsg': {kind: 'vCPE'},
+          'service_vbng': {kind: 'vBNG'},
+          'service_volt': {kind: 'vOLT'}
+        };
+
+        p = Tenant.queryVsgInstances(param[service.name]).$promise
+        .then((instances) => {
+
+          return Ceilometer.getInstancesStats(instances);
+        });
+      }
+
+      p.then((instances) => {
+        this.highlightInstances(instances);
+        deferred.resolve(instances);
+      })
+      .catch((e) => {
+        deferred.reject(e);
+      });
+
+      return deferred.promise;
+    };
+  })
+})();
diff --git a/views/ngXosViews/diagnostic/src/js/diagnostic.js b/views/ngXosViews/diagnostic/src/js/diagnostic.js
index d65194c..f3c133a 100644
--- a/views/ngXosViews/diagnostic/src/js/diagnostic.js
+++ b/views/ngXosViews/diagnostic/src/js/diagnostic.js
@@ -7,7 +7,7 @@
       restrict: 'E',
       templateUrl: 'templates/diagnostic.tpl.html',
       controllerAs: 'vm',
-      controller: function(Subscribers, ServiceRelation, $rootScope){
+      controller: function(ChartData, Subscribers, ServiceRelation, $rootScope){
         this.loader = true;
         this.error = false;
         Subscribers.query().$promise
@@ -30,10 +30,12 @@
           ServiceRelation.getBySubscriber(subscriber)
           .then((serviceChain) => {
             this.serviceChain = serviceChain;
+            ChartData.currentServiceChain = serviceChain;
             return Subscribers.getWithDevices({id: subscriber.id}).$promise;
           })
           .then((subscriber) => {
             this.selectedSubscriber = subscriber;
+            ChartData.currentSubscriber = subscriber;
           });
         });
       }
diff --git a/views/ngXosViews/diagnostic/src/js/logicTopology.js b/views/ngXosViews/diagnostic/src/js/logicTopology.js
index 5ca0b30..8e7e741 100644
--- a/views/ngXosViews/diagnostic/src/js/logicTopology.js
+++ b/views/ngXosViews/diagnostic/src/js/logicTopology.js
@@ -11,7 +11,7 @@
       bindToController: true,
       controllerAs: 'vm',
       templateUrl: 'templates/logicTopology.tpl.html',
-      controller: function($element, $log, $scope, $rootScope, $timeout, d3, LogicTopologyHelper, Node, Tenant, Ceilometer, serviceTopologyConfig){
+      controller: function($element, $log, $scope, $rootScope, $timeout, d3, LogicTopologyHelper, Node, Tenant, Ceilometer, serviceTopologyConfig, ChartData){
         $log.info('Logic Plane');
 
         var svg;
@@ -26,32 +26,15 @@
           .style('height', `${el.clientHeight}px`);
         }
 
-        $scope.$watch(() => this.subscribers, (subscribers) => {
-          if(subscribers){
-
-            Node.queryWithInstances().$promise
-            .then((computeNodes) => {
-              LogicTopologyHelper.addComputeNodes(computeNodes);
-              LogicTopologyHelper.updateTree(svg);
-            });
-            
-          }
+        ChartData.getLogicTree()
+        .then((tree) => {
+          LogicTopologyHelper.updateTree(svg);
         });
 
         $scope.$watch(() => this.selected, (selected) => {
           if(selected){
-            $log.info(`Update logic layer for subscriber ${selected.humanReadableName}`);
-            
-            // append the device with to config settings
-            serviceTopologyConfig.elWidths.push(160);
-
-            LogicTopologyHelper.addSubscriber(angular.copy(selected));
-
-            Tenant.getSubscriberTag({subscriber_root: selected.id}).$promise
-            .then((tags) => {
-              LogicTopologyHelper.addSubscriberTag(tags);
-              LogicTopologyHelper.updateTree(svg);
-            })
+            ChartData.selectSubscriber(selected);
+            LogicTopologyHelper.updateTree(svg);
           }
         });
 
@@ -59,30 +42,14 @@
           this.hideInstanceStats = true;
           $timeout(() => {
             this.selectedInstances = [];
-            LogicTopologyHelper.getInstanceStatus([]);
+            ChartData.highlightInstances([]);
             LogicTopologyHelper.updateTree(svg);
           }, 500);
         });
 
         $rootScope.$on('instance.detail', (evt, service) => {
-
-          // NOTE consider if subscriber is selected or not,
-          // if not select instances
-          // else select containers (and follow subscriber chain to find the correct instance)
-
-          let param = {
-            'service_vsg': {kind: 'vCPE'},
-            'service_vbng': {kind: 'vBNG'},
-            'service_volt': {kind: 'vOLT'}
-          };
-
-          Tenant.queryVsgInstances(param[service.name]).$promise
+          ChartData.getInstanceStatus(service)
           .then((instances) => {
-
-            return Ceilometer.getInstancesStats(instances);
-          })
-          .then((instances) => {
-            console.log(instances);
             this.hideInstanceStats = false;
             // HACK if array is empty wait for animation
             if(instances.length === 0){
@@ -94,13 +61,8 @@
             else{
               this.selectedInstances = instances;
             }
-            
-            LogicTopologyHelper.getInstanceStatus(instances);
             LogicTopologyHelper.updateTree(svg);
           })
-          .catch((e) => {
-            throw new Error(e);
-          });
         })
 
         handleSvg($element[0]);
diff --git a/views/ngXosViews/diagnostic/src/js/logicTopologyHelper.js b/views/ngXosViews/diagnostic/src/js/logicTopologyHelper.js
index f17b103..b0184ef 100644
--- a/views/ngXosViews/diagnostic/src/js/logicTopologyHelper.js
+++ b/views/ngXosViews/diagnostic/src/js/logicTopologyHelper.js
@@ -2,37 +2,11 @@
   'use strict';
 
   angular.module('xos.serviceTopology')
-  .service('LogicTopologyHelper', function($window, $log, $rootScope, lodash, serviceTopologyConfig, NodeDrawer){
+  .service('LogicTopologyHelper', function($window, $log, $rootScope, lodash, serviceTopologyConfig, NodeDrawer, ChartData){
 
     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',
-              computeNodes: [],
-              children: [
-                {
-                  name: 'LAN',
-                  type: 'network',
-                  children: [{
-                    name: 'Subscriber',
-                    type: 'subscriber'
-                  }] //subscribers goes here
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    };
+    const baseData = ChartData.logicTopologyData;
 
     /**
      * Calculate the horizontal position for each element.
@@ -198,62 +172,6 @@
       drawLinks(svg, links);
     }
 
-    /**
-    * Add Subscribers to the tree
-    */
-    this.addSubscriber = (subscriber) => {
-
-
-      subscriber.children = subscriber.devices;
-
-      // add subscriber to data tree
-      baseData.children[0].children[0].children[0].children = [subscriber];
-      return baseData;
-    };
-
-    /**
-    * Add Subscriber tag to LAN Network
-    */
-   
-    this.addSubscriberTag = (tags) => {
-      baseData.children[0].children[0].children[0].subscriberTag = {
-        cTag: tags.c_tag,
-        sTag: tags.s_tag
-      }
-    };
-
-    /**
-    * Add compute nodes to the rack element
-    */
-   
-    this.addComputeNodes = (computeNodes) => {
-      baseData.children[0].children[0].computeNodes = computeNodes;
-    };
-
-    this.getInstanceStatus = (instances) => {
-
-      const computeNodes = baseData.children[0].children[0].computeNodes;
-
-      // unselect all
-      computeNodes.map((node) => {
-        node.instances.map((instance) => {
-          instance.selected = false
-          return instance;
-        });
-      });
-
-      lodash.forEach(instances, (instance) => {
-        computeNodes.map((node) => {
-          node.instances.map((d3instance) => {
-            if(d3instance.id === instance.id){
-              d3instance.selected = true;
-            }
-            return d3instance;
-          });
-        });
-      });
-
-    }
   });
 
 }());
\ No newline at end of file
diff --git a/views/ngXosViews/diagnostic/src/js/nodeDrawer.js b/views/ngXosViews/diagnostic/src/js/nodeDrawer.js
index 94ff406..7c76e61 100644
--- a/views/ngXosViews/diagnostic/src/js/nodeDrawer.js
+++ b/views/ngXosViews/diagnostic/src/js/nodeDrawer.js
@@ -45,6 +45,15 @@
           })
           .text(() => `S-Tag: ${n.subscriberTag.sTag}`);
         }
+
+        if(n.name === 'WAN' && angular.isDefined(n.subscriberIP)){
+          currentNode.append('text')
+          .attr({
+            'text-anchor': 'middle',
+            y: 40
+          })
+          .text(() => `Public IP: ${n.subscriberIP}`);
+        }
       });
     }
 
diff --git a/views/ngXosViews/diagnostic/src/js/rest_services.js b/views/ngXosViews/diagnostic/src/js/rest_services.js
index 877b485..522a126 100644
--- a/views/ngXosViews/diagnostic/src/js/rest_services.js
+++ b/views/ngXosViews/diagnostic/src/js/rest_services.js
@@ -192,7 +192,6 @@
               devices.map(d => d.type = 'device');
               res.data.devices = devices;
               res.data.type = 'subscriber';
-              console.log(res.data);
               d.resolve(res.data);
             })
             .catch(err => {
@@ -257,7 +256,7 @@
       return levelServices;
     };
 
-    const buildLevel = (tenants, services, rootService, parentName = null) => {
+    const buildLevel = (tenants, services, rootService, rootTenant, parentName = null) => {
 
       // build an array of unlinked services
       // these are the services that should still placed in the tree
@@ -279,11 +278,13 @@
         parent: parentName,
         type: 'service',
         service: rootService,
+        tenant: rootTenant,
         children: []
       };
 
       lodash.forEach(levelServices, (service) => {
-        tree.children.push(buildLevel(tenants, unlinkedServices, service, rootService.humanReadableName));
+        let tenant = lodash.find(tenants, {subscriber_tenant: rootTenant.id, provider_service: service.id});
+        tree.children.push(buildLevel(tenants, unlinkedServices, service, tenant, rootService.humanReadableName));
       });
 
       // if it is the last element append internet
@@ -303,10 +304,10 @@
       // find the root service
       // it is the one attached to subsriber_root
       // as now we have only one root so this can work
-      const rootServiceId = lodash.find(tenants, {subscriber_root: subscriber.id}).provider_service;
-      const rootService = lodash.find(services, {id: rootServiceId});
+      const rootTenant = lodash.find(tenants, {subscriber_root: subscriber.id});
+      const rootService = lodash.find(services, {id: rootTenant.provider_service});
 
-      const serviceTree = buildLevel(tenants, services, rootService);
+      const serviceTree = buildLevel(tenants, services, rootService, rootTenant);
 
       return {
         name: subscriber.name,
diff --git a/views/ngXosViews/diagnostic/src/js/serviceTopologyHelper.js b/views/ngXosViews/diagnostic/src/js/serviceTopologyHelper.js
index 47fc5eb..7ca925b 100644
--- a/views/ngXosViews/diagnostic/src/js/serviceTopologyHelper.js
+++ b/views/ngXosViews/diagnostic/src/js/serviceTopologyHelper.js
@@ -226,7 +226,7 @@
         return updateTree(_svg, _layout, _source);
       }
       
-      $rootScope.$emit('instance.detail', {name: d.name});
+      $rootScope.$emit('instance.detail', {name: d.name, service: d.service, tenant: d.tenant});
 
       // unselect all
       _svg.selectAll('circle')