diff --git a/gui/ngXosViews/serviceTopology/src/css/serviceTopology.css b/gui/ngXosViews/serviceTopology/src/css/serviceTopology.css
index bc952f6..220d2ab 100644
--- a/gui/ngXosViews/serviceTopology/src/css/serviceTopology.css
+++ b/gui/ngXosViews/serviceTopology/src/css/serviceTopology.css
@@ -14,6 +14,12 @@
     stroke-width: 3px;
 }
 
+.node rect.slice-detail{
+    fill: #fff;
+    stroke: steelblue;
+    stroke-width: 3px;
+}
+
 .node text {
     font: 12px sans-serif;
 }
diff --git a/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js b/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js
index b7d1be8..f7a70e5 100644
--- a/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js
+++ b/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js
@@ -11,6 +11,9 @@
       templateUrl: 'templates/topology_canvas.tpl.html',
       controller: function($element, $window, d3, serviceTopologyConfig, ServiceRelation, Slice, Instances){
 
+        this.instances = [];
+        this.slices = [];
+
         // count the mas depth of an object
         const depthOf = (obj) => {
           var depth = 0;
@@ -173,28 +176,82 @@
           });
         }
 
-        this.instances = [];
-        this.slices = [];
-
         var _this = this;
         const click = function(d) {
 
-          d3.select(this).attr('r', 30);
+          // empty panel
+          _this.slices = [];
+          _this.instances = [];
+
+          var nodes = d3.selectAll('circle')
+            .transition()
+            .duration(duration)
+            .attr('r', 10);
+
+          d3.selectAll('rect.slice-detail')
+            .remove();
+
+          d3.selectAll('text.slice-name')
+            .remove();
+
+          var selectedNode = d3.select(this);
+
+          selectedNode
+            .transition()
+            .duration(duration)
+            .attr('r', 30);
 
           _this.selectedService = {
             id: d.id,
             name: d.name
           };
+
           Slice.query({service: d.id}).$promise
           .then(slices => {
-            _this.instances = [];
             _this.slices = slices;
+
+            if(slices.length > 0){
+              const parentNode = d3.select(this.parentNode);
+
+              parentNode
+                .append('rect')
+                .style('opacity', 0)
+                .attr({
+                  width: 150,
+                  height: 50,
+                  y: 35,
+                  x: -75,
+                  class: 'slice-detail'
+                })
+                .transition()
+                .duration(duration)
+                .style('opacity', 1);
+
+              parentNode
+                .append('text')
+                .style('opacity', 0)
+                .attr({
+                  y: 65,
+                  x: -60,
+                  class: 'slice-name'
+                })
+                .text(() => {
+                  if(slices[0]){
+                    console.log(slices[0].humanReadableName);
+                    return slices[0].humanReadableName;
+                  }
+
+                  return '';
+                })
+                .transition()
+                .duration(duration)
+                .style('opacity', 1);
+              }
           })
         };
 
         ServiceRelation.get()
         .then((tree) => {
-          console.log(tree);
           draw(tree);
         });