diff --git a/views/ngXosViews/ceilometerDashboard/env/default.js b/views/ngXosViews/ceilometerDashboard/env/default.js
index 778faac..67006ec 100644
--- a/views/ngXosViews/ceilometerDashboard/env/default.js
+++ b/views/ngXosViews/ceilometerDashboard/env/default.js
@@ -7,7 +7,7 @@
 // (works only for local environment as both application are served on the same domain)
 
 module.exports = {
-  host: 'http://clnode015.clemson.cloudlab.us:9999/',
-  xoscsrftoken: 'gvAeNnr2DoQMorphFSxs4nXDSIDAT61Q',
-  xossessionid: 'qu69xzr4u5755w9hhuqa0djxacvi9k9i'
+  host: 'http://clnode067.clemson.cloudlab.us:9999/',
+  xoscsrftoken: 'prHoBeRKIHqQE53sKYo3EfzHAgaVIQ1z',
+  xossessionid: 'mp5xe6345ef4fgs6n0t5rfd0su33c12x'
 };
diff --git a/views/ngXosViews/ceilometerDashboard/spec/.eslintrc b/views/ngXosViews/ceilometerDashboard/spec/.eslintrc
index ad4bc2d..e456ddf 100644
--- a/views/ngXosViews/ceilometerDashboard/spec/.eslintrc
+++ b/views/ngXosViews/ceilometerDashboard/spec/.eslintrc
@@ -1,9 +1,13 @@
 {
     "globals" :{
         "describe": true,
+        "xdescribe": true,
         "beforeEach": true,
         "it": true,
         "inject": true,
         "expect": true
-    } 
+    },
+    "rules": {
+      "max-nested-callbacks": [0, 4]
+    }
 }
diff --git a/views/ngXosViews/ceilometerDashboard/spec/backend.mock.js b/views/ngXosViews/ceilometerDashboard/spec/backend.mock.js
index c7642bb..86ed3d8 100644
--- a/views/ngXosViews/ceilometerDashboard/spec/backend.mock.js
+++ b/views/ngXosViews/ceilometerDashboard/spec/backend.mock.js
@@ -2,46 +2,23 @@
 (function () {
 
   const meters = [
-    // service_1
-    //  - slice_1
-    //    - resource_1
-    // service_2
-    //  - slice_2
-    //    - resource_2
-    //    - resource_3
-    //  - slice_3
-    //    - resource_4
     {
-      service: 'service_1',
-      slice: 'slice_1',
-      resource_name: 'resource_1',
-      resource_id: 'resource_id_1',
-      name: 'instance_1',
-      unit: 'instance'
+      service: 'service-a',
+      slice: 'slice-a-1',
+      name: 'network.outgoing.packets.rate',
+      resource_name: 'resource-1'
     },
     {
-      service: 'service_2',
-      slice: 'slice_2',
-      resource_name: 'resource_2',
-      resource_id: 'resource_id_2',
-      name: 'instance_2',
-      unit: 'instance'
+      service: 'service-a',
+      slice: 'slice-a-1',
+      name: 'network.incoming.packets.rate',
+      resource_name: 'resource-1'
     },
     {
-      service: 'service_2',
-      slice: 'slice_2',
-      resource_name: 'resource_3',
-      resource_id: 'resource_id_3',
-      name: 'instance_2',
-      unit: 'instance'
-    },
-    {
-      service: 'service_2',
-      slice: 'slice_3',
-      resource_name: 'resource_4',
-      resource_id: 'resource_id_4',
-      name: 'instance_3',
-      unit: 'instance'
+      service: 'service-a',
+      slice: 'slice-a-1',
+      name: 'network.incoming.packets.rate',
+      resource_name: 'resource-2'
     }
   ];
 
@@ -90,9 +67,39 @@
     }
   ];
 
+  const mapping = [
+    {
+      service: 'service-a',
+      slice: [
+        {
+          project_id: 'id-a-1',
+          slice: 'slice-a-1'
+        },
+        {
+          project_id: 'id-a-2',
+          slice: 'slice-a-2'
+        }
+      ]
+    },
+    {
+      service: 'service-b',
+      slice: [
+        {
+          project_id: 'id-b-1',
+          slice: 'slice-b-1'
+        },
+        {
+          project_id: 'id-b-2',
+          slice: 'slice-b-2'
+        }
+      ]
+    }
+  ]
+
   angular.module('xos.ceilometerDashboard')
   .run(($httpBackend) => {
     $httpBackend.whenGET(/metersamples/).respond(samples);
+    $httpBackend.whenGET(/xos-slice-service-mapping/).respond(mapping);
     $httpBackend.whenGET(/meters/).respond(meters);
   });
 })();
diff --git a/views/ngXosViews/ceilometerDashboard/spec/ceilometer.test.js b/views/ngXosViews/ceilometerDashboard/spec/ceilometer.test.js
index c5bb850..bc8b2e2 100644
--- a/views/ngXosViews/ceilometerDashboard/spec/ceilometer.test.js
+++ b/views/ngXosViews/ceilometerDashboard/spec/ceilometer.test.js
@@ -21,7 +21,7 @@
       httpBackend.flush();
     }));
 
-    describe('when loading meters', () => {
+    xdescribe('when loading meters', () => {
       it('should group meters by services', () => {
         expect(Object.keys(vm.projects).length).toBe(2);
       });
@@ -34,6 +34,29 @@
         expect(Object.keys(vm.projects.service_2.slice_2).length).toBe(2);
       });
     });
+
+    describe('when loading service list', () => {
+      it('should append the list to the scope', () => {
+        expect(vm.services.length).toBe(2);
+        expect(vm.services[0].slice.length).toBe(2);
+        expect(vm.services[1].slice.length).toBe(2);
+      });
+    });
+
+    describe('when a slice is selected', () => {
+      it('should load corresponding meters', () => {
+        vm.loadSliceMeter(vm.services[0].slice[0]);
+
+        expect(vm.selectedSlice).toEqual('slice-a-1');
+        expect(vm.selectedTenant).toEqual('id-a-1');
+
+        httpBackend.flush();
+
+        expect(Object.keys(vm.selectedResources).length).toBe(2);
+        expect(vm.selectedResources['resource-1'].length).toBe(2);
+        expect(vm.selectedResources['resource-2'].length).toBe(1);
+      });
+    });
   });
 
   describe('the sample view', () => {
@@ -111,27 +134,4 @@
       });
     });
   });
-});
-
-describe('The orderObjectByKey filter', () => {
-  var $filter;
-
-  beforeEach(function () {
-    module('xos.ceilometerDashboard');
-
-    inject(function (_$filter_) {
-      $filter = _$filter_;
-    });
-  });
-
-  it('should order an object by the key value', function () {
-    // Arrange.
-    const list = {c: 3, b: 2, a: 1};
-
-    // call the filter function
-    const result = $filter('orderObjectByKey')(list);
-
-    // Assert.
-    expect(result).toEqual({a: 1, b: 2, c: 3});
-  });
 });
\ No newline at end of file
diff --git a/views/ngXosViews/ceilometerDashboard/src/js/main.js b/views/ngXosViews/ceilometerDashboard/src/js/main.js
index 01b9adc..aeb8243 100644
--- a/views/ngXosViews/ceilometerDashboard/src/js/main.js
+++ b/views/ngXosViews/ceilometerDashboard/src/js/main.js
@@ -33,10 +33,24 @@
 })
 .service('Ceilometer', function($http, $q, lodash){
 
-  this.getMeters = () => {
+  this.getMappings = () => {
     let deferred = $q.defer();
 
-    $http.get('/xoslib/meters/', {cache: true})
+    $http.get('/xoslib/xos-slice-service-mapping/')
+    .then((res) => {
+      deferred.resolve(res.data)
+    })
+    .catch((e) => {
+      deferred.reject(e);
+    });
+
+    return deferred.promise;
+  }
+
+  this.getMeters = (params) => {
+    let deferred = $q.defer();
+
+    $http.get('/xoslib/meters/', {cache: true, params: params})
     // $http.get('../meters_mock.json', {cache: true})
     .then((res) => {
       deferred.resolve(res.data)
@@ -91,6 +105,8 @@
     templateUrl: 'templates/ceilometer-dashboard.tpl.html',
     controller: function(Ceilometer){
 
+      this.showStats = false;
+
       // this open the accordion
       this.accordion = {
         open: {}
@@ -103,74 +119,71 @@
         if(Ceilometer.selectedService){
           this.accordion.open[Ceilometer.selectedService] = true;
           if(Ceilometer.selectedSlice){
+            this.loadSliceMeter(Ceilometer.selectedSlice, Ceilometer.selectedService);
             this.selectedSlice = Ceilometer.selectedSlice;
-            this.selectedResources = this.projects[Ceilometer.selectedService][Ceilometer.selectedSlice]
             if(Ceilometer.selectedResource){
               this.selectedResource = Ceilometer.selectedResource;
-              this.selectedMeters = this.selectedResources[Ceilometer.selectedResource];
             }
           }
         }
       }
 
-      this.loadMeters = () => {
+      /**
+      * Load the list of service and slices
+      */
+
+      this.loadMappings = () => {
         this.loader = true;
-
-        // TODO rename projects in meters
-        Ceilometer.getMeters()
-        .then(meters => {
-          //group project by service
-          this.projects = lodash.groupBy(meters, 'service');
-          lodash.forEach(Object.keys(this.projects), (project) => {
-            // inside each service group by slice
-            this.projects[project] = lodash.groupBy(this.projects[project], 'slice');
-            lodash.forEach(Object.keys(this.projects[project]), (slice) => {
-              // inside each service => slice group by resource
-              this.projects[project][slice] = lodash.groupBy(this.projects[project][slice], 'resource_name');
-            });
-          });
-
-          // open selected panels
+        Ceilometer.getMappings()
+        .then((services) => {
+          this.services = services;
           this.openPanels();
         })
         .catch(err => {
-          this.error = err.data.detail;
+          this.error = (err.data && err.data.detail) ? err.data.detail : 'An Error occurred. Please try again later.';
         })
         .finally(() => {
           this.loader = false;
         });
-      }
+      };
 
-      this.loadMeters();
+      this.loadMappings();
 
       /**
-      * Select Resources for a slice
-      *
-      * @param Array resources The list of selected resources
-      * @returns void
+      * Load the list of a single slice
       */
-      this.selectedResources = null;
-      this.selectResources = (resources, slice, service) => {
+     
+      this.loadSliceMeter = (slice, service_name) => {
 
-        //cleaning
-        this.selectedResources = null;
-        this.selectedResource = null;
-        this.selectedMeters = null;
+        Ceilometer.selectedSlice = null;
+        Ceilometer.selectedService = null;
+        Ceilometer.selectedResources = null;
 
-        // hold the resource list for the current slice
-        this.selectedResources = resources;
-        this.selectedSlice = slice;
-        this.selectedService = service;
+        // visualization info
+        this.loader = true;
+        this.selectedSlice = slice.slice;
+        this.selectedTenant = slice.project_id;
 
         // store the status
         Ceilometer.selectedSlice = slice;
-        Ceilometer.selectedService = service;
+        Ceilometer.selectedService = service_name;
 
-        // store tenant (slice id for ceilometer)
-        // it is passed to ceilometer-stats directive
-        console.log(resources);
-        this.selectedTenant = resources[Object.keys(resources)[0]][0].project_id;
-      }
+        Ceilometer.getMeters({tenant: slice.project_id})
+        .then((sliceMeters) => {
+          this.selectedResources = lodash.groupBy(sliceMeters, 'resource_name');
+
+          // hacky
+          if(Ceilometer.selectedResource){
+            this.selectedMeters = this.selectedResources[Ceilometer.selectedResource];
+          }
+        })
+        .catch(err => {
+          this.error = (err.data && err.data.detail) ? err.data.detail : 'An Error occurred. Please try again later.';
+        })
+        .finally(() => {
+          this.loader = false;
+        });
+      };
 
       /**
       * Select Meters for a resource
@@ -342,7 +355,6 @@
     controller: function($scope, Ceilometer) {
 
       this.getStats = (tenant) => {
-        console.log(this.tenant);
         this.loader = true;
         Ceilometer.getStats({tenant: tenant})
         .then(res => {
@@ -363,19 +375,4 @@
       });
     }
   }
-})
-.filter('orderObjectByKey', function(lodash) {
-  return function(items) {
-
-    if(!items){
-      return;
-    }
-
-    return lodash.reduce(Object.keys(items).reverse(), (list, key) => {
-      list[key] = items[key];
-      return list;
-    }, {});
-
-  };
-});
-;
\ No newline at end of file
+});
\ No newline at end of file
diff --git a/views/ngXosViews/ceilometerDashboard/src/templates/ceilometer-dashboard.tpl.html b/views/ngXosViews/ceilometerDashboard/src/templates/ceilometer-dashboard.tpl.html
index 6445781..23afc1a 100644
--- a/views/ngXosViews/ceilometerDashboard/src/templates/ceilometer-dashboard.tpl.html
+++ b/views/ngXosViews/ceilometerDashboard/src/templates/ceilometer-dashboard.tpl.html
@@ -4,12 +4,12 @@
   </div>
   <div class="col-xs-2 text-right">
     <a href="" class="btn btn-default" 
-      ng-show="vm.selectedResources && !vm.showStats"
+      ng-show="vm.selectedSlice && !vm.showStats"
       ng-click="vm.showStats = true">
       <i class="glyphicon glyphicon-transfer"></i>
     </a>
     <a href="" class="btn btn-default" 
-      ng-show="vm.selectedResources && vm.showStats"
+      ng-show="vm.selectedSlice && vm.showStats"
       ng-click="vm.showStats = false">
       <i class="glyphicon glyphicon-transfer"></i>
     </a>
@@ -28,22 +28,23 @@
         <h3>XOS Service: </h3>
         <uib-accordion close-others="true" template-url="templates/accordion.html">
           <uib-accordion-group
-            ng-repeat="(service, slices) in vm.projects | orderObjectByKey"
+            ng-repeat="service in vm.services | orderBy:'-service'"
             template-url="templates/accordion-group.html"
-            is-open="vm.accordion.open[service]"
-            heading="{{service}}">
+            is-open="vm.accordion.open[service.service]"
+            heading="{{service.service}}">
             <h4>Slices:</h4>
-            <a ng-repeat="(slice, resources) in slices" 
-              ng-class="{active: slice === vm.selectedSlice}"
-              ng-click="vm.selectResources(resources, slice, service)"
+            <a ng-repeat="slice in service.slices" 
+              ng-class="{active: slice.slice === vm.selectedSlice}"
+              ng-click="vm.loadSliceMeter(slice, service.service)"
               href="#" class="list-group-item" >
-              {{slice}} <i class="glyphicon glyphicon-chevron-right pull-right"></i>
+              {{slice.slice}} <i class="glyphicon glyphicon-chevron-right pull-right"></i>
             </a>
           </uib-accordion-group>
         </uib-accordion>
     </div>
     <section class="side-container col-sm-9">
       <div class="row">
+        <!-- STATS -->
         <article ng-hide="!vm.showStats" class="stats animate-slide-left">
           <div class="col-xs-12">
             <div class="list-group">
@@ -56,8 +57,9 @@
             </div>
           </div>
         </article>
+        <!-- METERS -->
         <article ng-hide="vm.showStats" class="meters animate-slide-left">
-          <div class="col-sm-4 animate-slide-left" ng-hide="!vm.selectedResources">
+          <div class="col-sm-4 animate-slide-left" ng-hide="!vm.selectedSlice">
             <div class="list-group">
               <div class="list-group-item">
                 <h3>Resources</h3>