diff --git a/views/ngXosViews/diagnostic/src/js/logicTopology.js b/views/ngXosViews/diagnostic/src/js/logicTopology.js
index b12bfb5..edd64ea 100644
--- a/views/ngXosViews/diagnostic/src/js/logicTopology.js
+++ b/views/ngXosViews/diagnostic/src/js/logicTopology.js
@@ -57,14 +57,37 @@
         handleSvg($element[0]);
         LogicTopologyHelper.setupTree(svg);
 
-        this.openSubscriberModal = () => {
-          this.subscriberModal = true;
+        this.selectSubscriberModal = () => {
+          this.openSelectSubscriberModal = true;
+          $scope.$apply();
+        };
+
+        this.subscriberStatusModal = () => {
+          this.openSubscriberStatusModal = true;
           $scope.$apply();
         };
 
         // listen for subscriber modal event
         $rootScope.$on('subscriber.modal.open', () => {
-          this.openSubscriberModal();
+
+          if(ChartData.currentSubscriber){
+            this.subscriberStatusModal();
+          }
+          else{
+            this.selectSubscriberModal();
+          }
+        });
+
+        // listen for subscriber modal event
+        $rootScope.$on('subscriber.modal.open', () => {
+
+          if(ChartData.currentSubscriber){
+            this.currentSubscriber = ChartData.currentSubscriber;
+            this.subscriberStatusModal();
+          }
+          else{
+            this.selectSubscriberModal();
+          }
         });
 
       }
diff --git a/views/ngXosViews/diagnostic/src/js/serviceTopology.js b/views/ngXosViews/diagnostic/src/js/serviceTopology.js
index 2755620..925e7c0 100644
--- a/views/ngXosViews/diagnostic/src/js/serviceTopology.js
+++ b/views/ngXosViews/diagnostic/src/js/serviceTopology.js
@@ -34,6 +34,7 @@
           // clean
           d3.select($element[0]).select('svg').remove();
 
+
           const width = el.clientWidth - (serviceTopologyConfig.widthMargin * 2);
           const height = el.clientHeight - (serviceTopologyConfig.heightMargin * 2);
 
@@ -53,7 +54,7 @@
           root.y0 = width / 2;
 
           // ServiceTopologyHelper.drawLegend(svg);
-          ServiceTopologyHelper.updateTree(treeContainer, treeLayout, root);
+          ServiceTopologyHelper.updateTree(treeContainer, treeLayout, root, el);
         };
         
         $scope.$watch(() => this.serviceChain, (chain) => {
diff --git a/views/ngXosViews/diagnostic/src/js/serviceTopologyHelper.js b/views/ngXosViews/diagnostic/src/js/serviceTopologyHelper.js
index 28794c2..3759017 100644
--- a/views/ngXosViews/diagnostic/src/js/serviceTopologyHelper.js
+++ b/views/ngXosViews/diagnostic/src/js/serviceTopologyHelper.js
@@ -4,12 +4,16 @@
   angular.module('xos.diagnostic')
   .service('ServiceTopologyHelper', function($rootScope, $window, $log, lodash, ServiceRelation, serviceTopologyConfig, d3){
 
-    var _svg, _layout, _source;
+    var _svg, _layout, _source, _el;
 
     var i = 0;
 
     // given a canvas, a layout and a data source, draw a tree layout
-    const updateTree = (svg, layout, source) => {
+    const updateTree = (svg, layout, source, el = _el) => {
+
+      if(el){
+        _el = el;
+      }
 
       //cache data
       _svg = svg;
@@ -28,7 +32,7 @@
       // Normalize for fixed-depth.
       nodes.forEach(function(d) {
         // position the child node horizontally
-        const step = (($window.innerWidth - (serviceTopologyConfig.widthMargin * 2)) / maxDepth);
+        const step = ((_el.clientWidth - (serviceTopologyConfig.widthMargin * 2)) / maxDepth);
         d.y = d.depth * step;
       });
 
@@ -50,7 +54,11 @@
       const serviceNodes = nodeEnter.filter('.service');
 
       subscriberNodes.append('rect')
-        .attr(serviceTopologyConfig.square);
+        .attr(serviceTopologyConfig.square)
+        // add event listener to subscriber
+        .on('click', () => {
+          $rootScope.$emit('subscriber.modal.open');
+        });
 
       internetNodes.append('rect')
         .attr(serviceTopologyConfig.square);
diff --git a/views/ngXosViews/diagnostic/src/js/subscriber-modal.js b/views/ngXosViews/diagnostic/src/js/subscriber-modal.js
index 0620277..a8b93f5 100644
--- a/views/ngXosViews/diagnostic/src/js/subscriber-modal.js
+++ b/views/ngXosViews/diagnostic/src/js/subscriber-modal.js
@@ -1,7 +1,7 @@
 (function () {
   'use strict';
   angular.module('xos.diagnostic')
-  .directive('subscriberModal', function(){
+  .directive('selectSubscriberModal', function(){
     return {
       scope: {
         subscribers: '=',
@@ -9,7 +9,7 @@
       },
       bindToController: true,
       restrict: 'E',
-      templateUrl: 'templates/subscriber-modal.tpl.html',
+      templateUrl: 'templates/select-subscriber-modal.tpl.html',
       controllerAs: 'vm',
       controller: function($rootScope){
 
@@ -23,5 +23,35 @@
         };
       }
     };
+  })
+  .directive('subscriberStatusModal', function(){
+    return {
+      scope: {
+        open: '=',
+        subscriber: '='
+      },
+      bindToController: true,
+      restrict: 'E',
+      templateUrl: 'templates/subscriber-status-modal.tpl.html',
+      controllerAs: 'vm',
+      controller: function($log, $scope){
+
+        // mock until api
+        $scope.$watch(() => this.subscriber, (subscriber) => {
+          if(subscriber){
+            subscriber.status = 'enabled';
+          }
+        });
+
+        this.close = () => {
+          this.open = false;
+        };
+
+        this.setStatus = (status) => {
+          this.subscriber.status = status;
+          $log.info(`Set subscriber status to: ${status}`);
+        };
+      }
+    };
   });
 })();
diff --git a/views/ngXosViews/diagnostic/src/templates/diagnostic.tpl.html b/views/ngXosViews/diagnostic/src/templates/diagnostic.tpl.html
index 172b9f7..25e1338 100644
--- a/views/ngXosViews/diagnostic/src/templates/diagnostic.tpl.html
+++ b/views/ngXosViews/diagnostic/src/templates/diagnostic.tpl.html
@@ -1,28 +1,20 @@
 <div class="container-fluid">
-  <div ng-hide="vm.error && vm.loader">
+  <div ng-hide="vm.error && vm.loader" style="height: 900px">
     <div class="onethird-height">
       <service-topology service-chain="vm.serviceChain"></service-topology>
     </div>
     <div class="twothird-height">
-      <!-- <div class="panel panel-primary subscriber-select">
-        <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">
-            <option value="">Select a subscriber...</option>
-          </select>
-        </div>
-      </div> -->
       <logic-topology ng-if="vm.subscribers" subscribers="vm.subscribers" selected="vm.selectedSubscriber"></logic-topology>
     </div>
   </div>
-  <div class="row" ng-show="vm.error">
+  <div class="row" ng-if="vm.error">
     <div class="col-xs-12">
       <div class="alert alert-danger">
         {{vm.error}}
       </div>
     </div>
   </div>
-  <div class="row" ng-show="vm.loader">
+  <div class="row" ng-if="vm.loader">
     <div class="col-xs-12">
       <div class="loader">Loading</div>
     </div>
diff --git a/views/ngXosViews/diagnostic/src/templates/logicTopology.tpl.html b/views/ngXosViews/diagnostic/src/templates/logicTopology.tpl.html
index 0cff927..8c81015 100644
--- a/views/ngXosViews/diagnostic/src/templates/logicTopology.tpl.html
+++ b/views/ngXosViews/diagnostic/src/templates/logicTopology.tpl.html
@@ -1,4 +1,5 @@
-<subscriber-modal open="vm.subscriberModal" subscribers="vm.subscribers"></subscriber-modal>
+<select-subscriber-modal open="vm.openSelectSubscriberModal" subscribers="vm.subscribers"></select-subscriber-modal>
+<subscriber-status-modal open="vm.openSubscriberStatusModal" subscriber="vm.currentSubscriber"></subscriber-status-modal>
 <div class="instances-stats animate" ng-hide="vm.hideInstanceStats">
   <div class="row">
     <div class="col-sm-3 col-sm-offset-8">
diff --git a/views/ngXosViews/diagnostic/src/templates/subscriber-modal.tpl.html b/views/ngXosViews/diagnostic/src/templates/select-subscriber-modal.tpl.html
similarity index 100%
rename from views/ngXosViews/diagnostic/src/templates/subscriber-modal.tpl.html
rename to views/ngXosViews/diagnostic/src/templates/select-subscriber-modal.tpl.html
diff --git a/views/ngXosViews/diagnostic/src/templates/subscriber-status-modal.tpl.html b/views/ngXosViews/diagnostic/src/templates/subscriber-status-modal.tpl.html
new file mode 100644
index 0000000..6ae28db
--- /dev/null
+++ b/views/ngXosViews/diagnostic/src/templates/subscriber-status-modal.tpl.html
@@ -0,0 +1,43 @@
+<div class="modal fade" ng-class="{in: vm.open}" tabindex="-1" role="dialog">
+  <div class="modal-dialog modal-sm">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button ng-click="vm.close()"  type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+        <h4 class="modal-title">Change subscriber status:</h4>
+      </div>
+      <div class="modal-body">
+        <div class="row">
+          <div class="col-xs-6">
+            <a ng-click="vm.setStatus('enabled')" 
+              class="btn btn-block"
+              ng-class="{'btn-primary': vm.subscriber.status === 'enabled' ,'btn-default': vm.subscriber.status !== 'enabled'}"
+              >Enabled</a>
+          </div>
+          <div class="col-xs-6">
+            <a ng-click="vm.setStatus('suspended')" 
+              class="btn btn-block"
+              ng-class="{'btn-primary': vm.subscriber.status === 'suspended' ,'btn-default': vm.subscriber.status !== 'suspended'}"
+              >Suspended</a>
+          </div>
+        </div>
+        <div class="row" style="margin-top: 20px">
+          <div class="col-xs-6">
+            <a ng-click="vm.setStatus('delinquent')" 
+              class="btn btn-block"
+              ng-class="{'btn-primary': vm.subscriber.status === 'delinquent' ,'btn-default': vm.subscriber.status !== 'delinquent'}"
+              >Delinquent <br> payment</a>
+          </div>
+          <div class="col-xs-6">
+            <a ng-click="vm.setStatus('copyright')" 
+              class="btn btn-block"
+              ng-class="{'btn-primary': vm.subscriber.status === 'copyright' ,'btn-default': vm.subscriber.status !== 'copyright'}"
+              >Copyright <br> violation</a>
+          </div>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button ng-click="vm.close()" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+      </div>
+    </div><!-- /.modal-content -->
+  </div><!-- /.modal-dialog -->
+</div><!-- /.modal -->
\ No newline at end of file