diff --git a/gui/ngXosViews/serviceTopology/src/css/serviceTopology.css b/gui/ngXosViews/serviceTopology/src/css/serviceTopology.css
index c233858..bc952f6 100644
--- a/gui/ngXosViews/serviceTopology/src/css/serviceTopology.css
+++ b/gui/ngXosViews/serviceTopology/src/css/serviceTopology.css
@@ -29,4 +29,73 @@
     position: absolute;
     top: 20px;
     right: 20px;
+}
+
+/* when showing the thing */
+
+.animate.ng-hide-remove {
+    animation:0.5s bounceInRight ease;
+}
+
+/* when hiding the picture */
+.animate.ng-hide-add {
+    animation:0.5s bounceOutRight ease;
+}
+
+/* ANIMATIONS */
+
+@keyframes bounceInRight {
+    from, 60%, 75%, 90%, to {
+        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    }
+
+    from {
+        opacity: 0;
+        transform: translate3d(3000px, 0, 0);
+    }
+
+    60% {
+        opacity: 1;
+        transform: translate3d(-25px, 0, 0);
+    }
+
+    75% {
+        transform: translate3d(10px, 0, 0);
+    }
+
+    90% {
+        transform: translate3d(-5px, 0, 0);
+    }
+
+    to {
+        transform: none;
+    }
+}
+
+@keyframes bounceInLeft {
+    from, 60%, 75%, 90%, to {
+        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    }
+
+    0% {
+        opacity: 0;
+        transform: translate3d(-3000px, 0, 0);
+    }
+
+    60% {
+        opacity: 1;
+        transform: translate3d(25px, 0, 0);
+    }
+
+    75% {
+        transform: translate3d(-10px, 0, 0);
+    }
+
+    90% {
+        transform: translate3d(5px, 0, 0);
+    }
+
+    to {
+        transform: none;
+    }
 }
\ No newline at end of file
diff --git a/gui/ngXosViews/serviceTopology/src/index.html b/gui/ngXosViews/serviceTopology/src/index.html
index 1312a76..d2f95db 100644
--- a/gui/ngXosViews/serviceTopology/src/index.html
+++ b/gui/ngXosViews/serviceTopology/src/index.html
@@ -14,8 +14,9 @@
 <!-- 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-animate/angular-animate.js"></script>
+<script src="vendor/jquery/dist/jquery.js"></script>
 <script src="vendor/angular-mocks/angular-mocks.js"></script>
 <script src="vendor/angular-ui-router/release/angular-ui-router.js"></script>
 <script src="vendor/angular-cookies/angular-cookies.js"></script>
diff --git a/gui/ngXosViews/serviceTopology/src/js/main.js b/gui/ngXosViews/serviceTopology/src/js/main.js
index 3a46d61..5fe1896 100644
--- a/gui/ngXosViews/serviceTopology/src/js/main.js
+++ b/gui/ngXosViews/serviceTopology/src/js/main.js
@@ -4,6 +4,7 @@
   'ngResource',
   'ngCookies',
   'ngLodash',
+  'ngAnimate',
   'ui.router',
   'xos.helpers'
 ])
@@ -19,4 +20,4 @@
 })
 .factory('_', function($window){
   return window._;
-});
\ No newline at end of file
+});
diff --git a/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js b/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js
index d0e86b3..b7d1be8 100644
--- a/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js
+++ b/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js
@@ -79,9 +79,7 @@
 
           // Normalize for fixed-depth.
           nodes.forEach(function(d) {
-            console.log(d);
-            // 180 should be based on window.width and max node depth
-
+            // position the child node horizontally
             d.y = d.depth * (($window.innerWidth - (serviceTopologyConfig.widthMargin * 2)) / maxDepth);
             console.log(d.x);
           });
@@ -96,12 +94,12 @@
             .attr('transform', function(d) {
               // this is the starting position
               return 'translate(' + source.y0 + ',' + source.x0 + ')';
-            })
-            .on('click', click);
+            });
 
           nodeEnter.append('circle')
             .attr('r', 1e-6)
-            .style('fill', function(d) { return d._children ? 'lightsteelblue' : '#fff'; });
+            .style('fill', function(d) { return d._children ? 'lightsteelblue' : '#fff'; })
+            .on('click', click);
 
           nodeEnter.append('text')
             .attr('x', function(d) { return d.children || d._children ? -13 : 13; })
@@ -175,16 +173,22 @@
           });
         }
 
-        const click = (d) => {
-          console.log(d);
-          this.selectedService = {
+        this.instances = [];
+        this.slices = [];
+
+        var _this = this;
+        const click = function(d) {
+
+          d3.select(this).attr('r', 30);
+
+          _this.selectedService = {
             id: d.id,
             name: d.name
           };
           Slice.query({service: d.id}).$promise
           .then(slices => {
-            this.instances = null;
-            this.slices = slices;
+            _this.instances = [];
+            _this.slices = slices;
           })
         };
 
diff --git a/gui/ngXosViews/serviceTopology/src/templates/topology_canvas.tpl.html b/gui/ngXosViews/serviceTopology/src/templates/topology_canvas.tpl.html
index 7806733..afe76eb 100644
--- a/gui/ngXosViews/serviceTopology/src/templates/topology_canvas.tpl.html
+++ b/gui/ngXosViews/serviceTopology/src/templates/topology_canvas.tpl.html
@@ -1,5 +1,5 @@
 <div class="service-details">
-    <div ng-show="vm.slices.length > 0" class="service-slices">
+    <div class="service-slices animate" ng-hide="vm.slices.length == 0">
         <div class="panel panel-info">
             <div class="panel-heading">
                 Slices for service:
@@ -12,7 +12,7 @@
             </ul>
         </div>
     </div>
-    <div class="service-instances" ng-show="vm.instances.length > 0">
+    <div class="service-instances animate" ng-hide="vm.instances.length == 0">
         <div class="panel panel-warning">
             <div class="panel-heading">
                 Instances: