diff --git a/xos-apps/auto-scale/gui/src/css/style.css b/xos-apps/auto-scale/gui/src/css/style.css
index 5074c4b..a560800 100644
--- a/xos-apps/auto-scale/gui/src/css/style.css
+++ b/xos-apps/auto-scale/gui/src/css/style.css
@@ -1,3 +1,74 @@
 body {
   padding-top: 50px;
+}
+
+.list-group-item.active > a {
+  color: white;
+}
+
+/* ANIMATION */
+.animate-repeat{
+  /*background: red;*/
+}
+
+.animate-repeat.ng-move,
+.animate-repeat.ng-enter,
+.animate-repeat.ng-leave {
+  transition:all linear 0.5s;
+}
+
+/* Element Exit */
+.animate-repeat.ng-leave.ng-leave-active,
+.animate-repeat.ng-move,
+.animate-repeat.ng-enter {
+  /*opacity:0;*/
+  animation:0.5s bounceOutRight ease;
+}
+
+/* Element Enter */
+.animate-repeat.ng-leave,
+.animate-repeat.ng-move.ng-move-active,
+.animate-repeat.ng-enter.ng-enter-active {
+  /*opacity:1;*/
+  animation:0.5s bounceInRight ease;
+}
+
+@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 bounceOutRight {
+  20% {
+    opacity: 1;
+    transform: translate3d(-20px, 0, 0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(2000px, 0, 0);
+  }
 }
\ No newline at end of file
diff --git a/xos-apps/auto-scale/gui/src/js/autoscaling.service.js b/xos-apps/auto-scale/gui/src/js/autoscaling.service.js
index 5af613d..cd52aaf 100644
--- a/xos-apps/auto-scale/gui/src/js/autoscaling.service.js
+++ b/xos-apps/auto-scale/gui/src/js/autoscaling.service.js
@@ -33,6 +33,7 @@
 
   this.getAutoscalingData = () => {
     $http.get('/autoscaledata')
+    // $http.get('../mocks/mock.json')
     .success((res) => {
       $rootScope.$emit('autoscaling.update', this.formatData(res));
     });
diff --git a/xos-apps/auto-scale/gui/src/js/autoscaling_details.directive.js b/xos-apps/auto-scale/gui/src/js/autoscaling_details.directive.js
index 109e743..4441006 100644
--- a/xos-apps/auto-scale/gui/src/js/autoscaling_details.directive.js
+++ b/xos-apps/auto-scale/gui/src/js/autoscaling_details.directive.js
@@ -7,7 +7,14 @@
     controllerAs: 'vm',
     templateUrl: 'templates/service-container.tpl.html',
     controller: function($rootScope) {
+
+      // set to true when a service is manually selected
+      this.manualSelect = false;
+
+      // start polling
       Autoscaling.getAutoscalingData();
+
+      // list to polling events
       $rootScope.$on('autoscaling.update', (evt, data) => {
         this.printData(data);
       });
@@ -33,7 +40,23 @@
           })
         });
         // arbitrary set the first service in the list as the selected one
-        this.selectedService = this.services[Object.keys(this.services)[0]];
+        if(!this.manualSelect){
+          this.serviceName = Object.keys(this.services)[0];
+          this.selectedService = this.services[Object.keys(this.services)[0]];
+        }
+        else{
+          this.selectedService = this.services[this.serviceName]
+        }
+      };
+
+      /**
+      * Change the current selected service
+      */
+     
+      this.selectService = (serviceName) => {
+        this.serviceName = serviceName;
+        this.selectedService = this.services[serviceName];
+        this.manualSelect = true;
       };
     }
   };
@@ -61,9 +84,13 @@
     bindToController: true,
     controllerAs: 'vm',
     templateUrl: 'templates/slice-detail.tpl.html',
-    controller: function($scope) {
+    controller: function($scope, $timeout) {
 
-      this.chart = {};
+      this.chart = {
+        options: {
+          animation: true
+        }
+      };
 
       /**
       * Goes trough the array and format date to be used as labels
@@ -102,10 +129,13 @@
         this.chart.series = instanceNames;
         this.chart.data = this.getData(data, instanceNames);
 
-        console.log(this.getData(data, instanceNames));
+        // console.log(this.getData(data, instanceNames));
       }
 
-      $scope.$watch(() => this.instances, (val) => {this.drawChart(val)})
+      $scope.$watch(() => this.instances, (val) => {
+        $timeout(()=>{this.chart.options.animation = false}, 1000);
+        this.drawChart(val)
+      });
 
     }
   };
diff --git a/xos-apps/auto-scale/gui/src/templates/service-container.tpl.html b/xos-apps/auto-scale/gui/src/templates/service-container.tpl.html
index e5b964c..84e4446 100644
--- a/xos-apps/auto-scale/gui/src/templates/service-container.tpl.html
+++ b/xos-apps/auto-scale/gui/src/templates/service-container.tpl.html
@@ -7,8 +7,8 @@
 <div class="row">
   <div class="col-sm-3">
     <ul class="list-group">
-      <li class="list-group-item" ng-repeat="(service, slices) in vm.services">
-        <a href="">{{service}}</a>
+      <li class="list-group-item" ng-class="{active: vm.serviceName == service}" ng-repeat="(service, slices) in vm.services">
+        <a href="" ng-click="vm.selectService(service)">{{service}}</a>
       </li>
     </ul>
   </div>
diff --git a/xos-apps/auto-scale/gui/src/templates/service-detail.tpl.html b/xos-apps/auto-scale/gui/src/templates/service-detail.tpl.html
index 6bd5406..f0e3636 100644
--- a/xos-apps/auto-scale/gui/src/templates/service-detail.tpl.html
+++ b/xos-apps/auto-scale/gui/src/templates/service-detail.tpl.html
@@ -1,5 +1,4 @@
-<!-- <pre>{{vm.service | json}}</pre> -->
-<div class="panel panel-default" ng-repeat="(slice, instances) in vm.service">
+<div class="animate-repeat panel panel-default" ng-repeat="(slice, instances) in vm.service">
   <div class="panel-heading">
     <h3 class="panel-title">{{slice}}</h3>
   </div>
diff --git a/xos-apps/auto-scale/gui/src/templates/slice-detail.tpl.html b/xos-apps/auto-scale/gui/src/templates/slice-detail.tpl.html
index d950afe..6e63d5b 100644
--- a/xos-apps/auto-scale/gui/src/templates/slice-detail.tpl.html
+++ b/xos-apps/auto-scale/gui/src/templates/slice-detail.tpl.html
@@ -1,3 +1,4 @@
 <canvas id="line" class="chart chart-line" chart-data="vm.chart.data"
-  chart-labels="vm.chart.labels" chart-legend="true" chart-series="vm.chart.series">
+  chart-labels="vm.chart.labels" chart-legend="true" chart-series="vm.chart.series" 
+  chart-options="vm.chart.options">
 </canvas>
\ No newline at end of file