diff --git a/gui/ngXosViews/serviceTopology/bower.json b/gui/ngXosViews/serviceTopology/bower.json
index 3d01c48..d942aad 100644
--- a/gui/ngXosViews/serviceTopology/bower.json
+++ b/gui/ngXosViews/serviceTopology/bower.json
@@ -26,6 +26,6 @@
     "angular-cookies": "~1.4.7",
     "angular-resource": "~1.4.7",
     "ng-lodash": "~0.3.0",
-    "bootstrap-css": "2.3.2"
+    "bootstrap-css": "~3.3.6"
   }
 }
diff --git a/gui/ngXosViews/serviceTopology/src/css/serviceTopology.css b/gui/ngXosViews/serviceTopology/src/css/serviceTopology.css
index 05b06ed..c233858 100644
--- a/gui/ngXosViews/serviceTopology/src/css/serviceTopology.css
+++ b/gui/ngXosViews/serviceTopology/src/css/serviceTopology.css
@@ -22,4 +22,11 @@
     fill: none;
     stroke: #ccc;
     stroke-width: 2px;
+}
+
+.service-details{
+    width: 200px;
+    position: absolute;
+    top: 20px;
+    right: 20px;
 }
\ No newline at end of file
diff --git a/gui/ngXosViews/serviceTopology/src/index.html b/gui/ngXosViews/serviceTopology/src/index.html
index c2a289e..1312a76 100644
--- a/gui/ngXosViews/serviceTopology/src/index.html
+++ b/gui/ngXosViews/serviceTopology/src/index.html
@@ -1,6 +1,6 @@
 <!-- browserSync -->
 <!-- bower:css -->
-<link rel="stylesheet" href="vendor/bootstrap-css/css/bootstrap.css" />
+<link rel="stylesheet" href="vendor/bootstrap-css/css/bootstrap.min.css" />
 <!-- endbower --><!-- endcss -->
 <!-- inject:css -->
 <link rel="stylesheet" href="/css/dev.css">
@@ -13,6 +13,7 @@
 
 <!-- bower:js -->
 <script src="vendor/d3/d3.js"></script>
+<script src="vendor/lodash/lodash.js"></script>
 <script src="vendor/jquery/dist/jquery.js"></script>
 <script src="vendor/angular/angular.js"></script>
 <script src="vendor/angular-mocks/angular-mocks.js"></script>
@@ -20,8 +21,7 @@
 <script src="vendor/angular-cookies/angular-cookies.js"></script>
 <script src="vendor/angular-resource/angular-resource.js"></script>
 <script src="vendor/ng-lodash/build/ng-lodash.js"></script>
-<script src="vendor/bootstrap-css/js/bootstrap.js"></script>
-<script src="vendor/lodash/lodash.js"></script>
+<script src="vendor/bootstrap-css/js/bootstrap.min.js"></script>
 <!-- endbower --><!-- endjs -->
 <!-- inject:js -->
 <script src="/xosHelpers/src/xosHelpers.module.js"></script>
diff --git a/gui/ngXosViews/serviceTopology/src/js/services.js b/gui/ngXosViews/serviceTopology/src/js/services.js
index 640182d..21ca9aa 100644
--- a/gui/ngXosViews/serviceTopology/src/js/services.js
+++ b/gui/ngXosViews/serviceTopology/src/js/services.js
@@ -8,6 +8,12 @@
   .service('Tenant', function($resource){
     return $resource('/xos/tenants');
   })
+  .service('Slice', function($resource){
+    return $resource('/xos/slices', {id: '@id'});
+  })
+  .service('Instances', function($resource){
+    return $resource('/xos/instances', {id: '@id'});
+  })
   .service('ServiceRelation', function($q, _, lodash, Services, Tenant){
 
     // find all the relation defined for a given root
diff --git a/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js b/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js
index 8206194..d0e86b3 100644
--- a/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js
+++ b/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js
@@ -9,7 +9,7 @@
       bindToController: true,
       controllerAs: 'vm',
       templateUrl: 'templates/topology_canvas.tpl.html',
-      controller: function($element, $window, d3, serviceTopologyConfig, ServiceRelation){
+      controller: function($element, $window, d3, serviceTopologyConfig, ServiceRelation, Slice, Instances){
 
         // count the mas depth of an object
         const depthOf = (obj) => {
@@ -25,38 +25,6 @@
           return 1 + depth
         };
 
-        ServiceRelation.get()
-          .then(res => {
-            //console.log(res);
-          });
-
-        const treeData = [
-          {
-            'name': 'Top Level',
-            'parent': 'null',
-            'children': [
-              {
-                'name': 'Level 2: A',
-                'parent': 'Top Level',
-                'children': [
-                  {
-                    'name': 'Son of A',
-                    'parent': 'Level 2: A'
-                  },
-                  {
-                    'name': 'Daughter of A',
-                    'parent': 'Level 2: A'
-                  }
-                ]
-              },
-              {
-                'name': 'Level 2: B',
-                'parent': 'Top Level'
-              }
-            ]
-          }
-        ];
-
         const width = $window.innerWidth - serviceTopologyConfig.widthMargin;
         const height = $window.innerHeight - serviceTopologyConfig.heightMargin;
 
@@ -128,8 +96,8 @@
             .attr('transform', function(d) {
               // this is the starting position
               return 'translate(' + source.y0 + ',' + source.x0 + ')';
-            });
-            //.on('click', click);
+            })
+            .on('click', click);
 
           nodeEnter.append('circle')
             .attr('r', 1e-6)
@@ -137,6 +105,12 @@
 
           nodeEnter.append('text')
             .attr('x', function(d) { return d.children || d._children ? -13 : 13; })
+            .attr('transform', function(d) {
+              if((d.children || d._children) && d.parent || d._parent){
+                return 'rotate(30)';
+              }
+              return;
+            })
             .attr('dy', '.35em')
             .attr('text-anchor', function(d) { return d.children || d._children ? 'end' : 'start'; })
             .text(function(d) { return d.name; })
@@ -201,12 +175,32 @@
           });
         }
 
+        const click = (d) => {
+          console.log(d);
+          this.selectedService = {
+            id: d.id,
+            name: d.name
+          };
+          Slice.query({service: d.id}).$promise
+          .then(slices => {
+            this.instances = null;
+            this.slices = slices;
+          })
+        };
+
         ServiceRelation.get()
         .then((tree) => {
           console.log(tree);
           draw(tree);
         });
-        //draw(treeData[0]);
+
+        this.getInstances = (slice) => {
+          Instances.query({slice: slice.id}).$promise
+          .then((instances) => {
+            this.selectedSlice = slice;
+            this.instances = instances;
+          })
+        };
       }
     }
   });
diff --git a/gui/ngXosViews/serviceTopology/src/templates/topology_canvas.tpl.html b/gui/ngXosViews/serviceTopology/src/templates/topology_canvas.tpl.html
index e69de29..7806733 100644
--- a/gui/ngXosViews/serviceTopology/src/templates/topology_canvas.tpl.html
+++ b/gui/ngXosViews/serviceTopology/src/templates/topology_canvas.tpl.html
@@ -0,0 +1,27 @@
+<div class="service-details">
+    <div ng-show="vm.slices.length > 0" class="service-slices">
+        <div class="panel panel-info">
+            <div class="panel-heading">
+                Slices for service:
+                <h3 class="panel-title">{{vm.selectedService.name}}</h3>
+            </div>
+            <ul class="list-group">
+                <li class="list-group-item" ng-repeat="slice in vm.slices" ng-click="vm.getInstances(slice)" ng-class="{active: slice.id === vm.selectedSlice.id}">
+                    {{slice.humanReadableName}}
+                </li>
+            </ul>
+        </div>
+    </div>
+    <div class="service-instances" ng-show="vm.instances.length > 0">
+        <div class="panel panel-warning">
+            <div class="panel-heading">
+                Instances:
+            </div>
+            <ul class="list-group">
+                <li class="list-group-item" ng-repeat="instance in vm.instances">
+                    {{instance.humanReadableName}}
+                </li>
+            </ul>
+        </div>
+    </div>
+</div>
\ No newline at end of file