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 15b9118..5af613d 100644
--- a/xos-apps/auto-scale/gui/src/js/autoscaling.service.js
+++ b/xos-apps/auto-scale/gui/src/js/autoscaling.service.js
@@ -32,12 +32,15 @@
   };
 
   this.getAutoscalingData = () => {
-    // pollinginterval = $interval(() => {
-      // $http.get('/autoscaledata')
-      $http.get('../mocks/mock.json')
+    $http.get('/autoscaledata')
+    .success((res) => {
+      $rootScope.$emit('autoscaling.update', this.formatData(res));
+    });
+    pollinginterval = $interval(() => {
+      $http.get('/autoscaledata')
       .success((res) => {
         $rootScope.$emit('autoscaling.update', this.formatData(res));
       });
-    // }, pollingFrequency * 1000)
+    }, pollingFrequency * 1000)
   };
 });
\ No newline at end of file
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 f35508a..109e743 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
@@ -15,7 +15,6 @@
       /**
       * Group resources by service and slice
       */
-     
       this.printData = (data) => {
         this.services = lodash.groupBy(data, 'service');
         lodash.forEach(Object.keys(this.services), (service) => {
@@ -33,8 +32,87 @@
             
           })
         });
-        console.log(this.services);
+        // arbitrary set the first service in the list as the selected one
+        this.selectedService = this.services[Object.keys(this.services)[0]];
       };
     }
   };
+})
+.directive('serviceDetail', function(lodash){
+  return {
+    restrict: 'E',
+    scope: {
+      service: '=service'
+    },
+    bindToController: true,
+    controllerAs: 'vm',
+    templateUrl: 'templates/service-detail.tpl.html',
+    controller: function($scope) {
+
+    }
+  };
+})
+.directive('sliceDetail', function(lodash){
+  return {
+    restrict: 'E',
+    scope: {
+      instances: '=instances'
+    },
+    bindToController: true,
+    controllerAs: 'vm',
+    templateUrl: 'templates/slice-detail.tpl.html',
+    controller: function($scope) {
+
+      this.chart = {};
+
+      /**
+      * Goes trough the array and format date to be used as labels
+      *
+      * @param Array data
+      * @returns Array a list of labels
+      */
+
+      this.getLabels = (data) => {
+        return data.reduce((list, item) => {
+          let date = new Date(item.timestamp);
+          list.push(`${date.getHours()}:${(date.getMinutes()<10?'0':'') + date.getMinutes()}:${date.getSeconds()}`);
+          return list;
+        }, []);
+      };
+
+      /**
+      * Convert an object of array,
+      * in an array of arrays of values
+      */
+      this.getData = (data, instanceNames) => {
+        return lodash.map(instanceNames, (item) => {
+          return lodash.reduce(data[item], (list, sample) => {
+            // console.log(data[item], sample);
+            list.push(sample.counter_volume);
+            return list;
+          }, []);
+        });
+      };
+
+      this.drawChart = (data) => {
+
+        const instanceNames = Object.keys(data);
+
+        this.chart.labels = this.getLabels(data[instanceNames[0]]);
+        this.chart.series = instanceNames;
+        this.chart.data = this.getData(data, instanceNames);
+
+        console.log(this.getData(data, instanceNames));
+      }
+
+      $scope.$watch(() => this.instances, (val) => {this.drawChart(val)})
+
+    }
+  };
 });
+
+//  TODO
+//  [x] repeat service name in a menu
+//  [x] create a directive that receive a service
+//  [ ] print a chart for every slice
+//  [ ] print a line in the chart for every instance
\ No newline at end of file
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 63b1a8a..e5b964c 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
@@ -5,7 +5,14 @@
 </div>
 
 <div class="row">
-  <div class="col-xs-12">
-    <pre>{{vm.services | json}}</pre>
+  <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>
+    </ul>
+  </div>
+  <div class="col-sm-9">
+    <service-detail service="vm.selectedService"></service-detail>
   </div>
 </div>
\ No newline at end of file
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
new file mode 100644
index 0000000..6bd5406
--- /dev/null
+++ b/xos-apps/auto-scale/gui/src/templates/service-detail.tpl.html
@@ -0,0 +1,9 @@
+<!-- <pre>{{vm.service | json}}</pre> -->
+<div class="panel panel-default" ng-repeat="(slice, instances) in vm.service">
+  <div class="panel-heading">
+    <h3 class="panel-title">{{slice}}</h3>
+  </div>
+  <div class="panel-body">
+    <slice-detail instances="instances"></slice-detail>
+  </div>
+</div>
\ No newline at end of file
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
new file mode 100644
index 0000000..d950afe
--- /dev/null
+++ b/xos-apps/auto-scale/gui/src/templates/slice-detail.tpl.html
@@ -0,0 +1,3 @@
+<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">
+</canvas>
\ No newline at end of file