diff --git a/views/ngXosViews/diagnostic/src/js/diagnostic.js b/views/ngXosViews/diagnostic/src/js/diagnostic.js
index 63ab420..c9787ba 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){
+      controller: function(Subscribers, ServiceRelation, $rootScope){
         this.loader = true;
         this.error = false;
         Subscribers.query().$promise
@@ -25,6 +25,13 @@
         .finally(() => {
           this.loader = false;
         });
+
+        $rootScope.$on('subscriber.selected', (evt, subscriber) => {
+          ServiceRelation.getBySubscriber(subscriber)
+          .then((serviceChain) => {
+            this.serviceChain = serviceChain;
+          });
+        });
       }
     }
   });
diff --git a/views/ngXosViews/diagnostic/src/js/logicTopology.js b/views/ngXosViews/diagnostic/src/js/logicTopology.js
index da2fef6..a3501dd 100644
--- a/views/ngXosViews/diagnostic/src/js/logicTopology.js
+++ b/views/ngXosViews/diagnostic/src/js/logicTopology.js
@@ -92,6 +92,17 @@
         handleSvg($element[0]);
         LogicTopologyHelper.setupTree(svg);
 
+        this.openSubscriberModal = () => {
+          this.subscriberModal = true;
+          $scope.$apply();
+        };
+
+
+        // listen for subscriber modal event
+        $rootScope.$on('subscriber.modal.open', () => {
+          this.openSubscriberModal();
+        });
+
       }
     };
   });
diff --git a/views/ngXosViews/diagnostic/src/js/logicTopologyHelper.js b/views/ngXosViews/diagnostic/src/js/logicTopologyHelper.js
index 3be26c5..f860d9e 100644
--- a/views/ngXosViews/diagnostic/src/js/logicTopologyHelper.js
+++ b/views/ngXosViews/diagnostic/src/js/logicTopologyHelper.js
@@ -2,7 +2,7 @@
   'use strict';
 
   angular.module('xos.serviceTopology')
-  .service('LogicTopologyHelper', function($window, $log, lodash, serviceTopologyConfig, NodeDrawer){
+  .service('LogicTopologyHelper', function($window, $log, $rootScope, lodash, serviceTopologyConfig, NodeDrawer){
 
     var diagonal, nodes, links, i = 0, svgWidth, svgHeight, layout;
 
@@ -118,6 +118,12 @@
       NodeDrawer.addPhisical(node.filter('.subscriber'));
       NodeDrawer.addDevice(node.filter('.device'));
 
+      // add event listener to subscriber
+      node.filter('.subscriber')
+      .on('click', () => {
+        $rootScope.$emit('subscriber.modal.open');
+      });
+
       //update nodes
       // TODO if data change, only update them
       // NodeDrawer.updateRack(node.filter('.rack'));
diff --git a/views/ngXosViews/diagnostic/src/js/subscriber-modal.js b/views/ngXosViews/diagnostic/src/js/subscriber-modal.js
new file mode 100644
index 0000000..f805c1a
--- /dev/null
+++ b/views/ngXosViews/diagnostic/src/js/subscriber-modal.js
@@ -0,0 +1,27 @@
+(function () {
+  'use strict';
+  angular.module('xos.serviceTopology')
+  .directive('subscriberModal', function(){
+    return {
+      scope: {
+        subscribers: '=',
+        open: '='
+      },
+      bindToController: true,
+      restrict: 'E',
+      templateUrl: 'templates/subscriber-modal.tpl.html',
+      controllerAs: 'vm',
+      controller: function($rootScope){
+
+        this.close = () => {
+          this.open = false;
+        };
+
+        this.select = (subscriber) => {
+          $rootScope.$emit('subscriber.selected', subscriber);
+          this.close();
+        };
+      }
+    };
+  });
+})();