diff --git a/xos/core/xoslib/ngXosViews/ceilometerDashboard/.eslintrc b/xos/core/xoslib/ngXosViews/ceilometerDashboard/.eslintrc
index c852748..f495e79 100644
--- a/xos/core/xoslib/ngXosViews/ceilometerDashboard/.eslintrc
+++ b/xos/core/xoslib/ngXosViews/ceilometerDashboard/.eslintrc
@@ -29,6 +29,7 @@
         "no-trailing-spaces": [1, { skipBlankLines: true }],
         "no-unused-vars": [1, {"vars": "all", "args": "after-used"}],
         "new-cap": 0,
+        "no-undef": 2,
 
         //"angular/ng_module_name": [2, '/^xos\.*[a-z]*$/'],
         //"angular/ng_controller_name": [2, '/^[a-z].*Ctrl$/'],
diff --git a/xos/core/xoslib/ngXosViews/ceilometerDashboard/bower.json b/xos/core/xoslib/ngXosViews/ceilometerDashboard/bower.json
index c11ad13..37fe0aa 100644
--- a/xos/core/xoslib/ngXosViews/ceilometerDashboard/bower.json
+++ b/xos/core/xoslib/ngXosViews/ceilometerDashboard/bower.json
@@ -16,7 +16,8 @@
   ],
   "dependencies": {
     "angular-chart.js": "~0.8.7",
-    "angular-animate": "~1.4.8"
+    "angular-animate": "~1.4.8",
+    "ui.bootstrap": "~0.14.3"
   },
   "devDependencies": {
     "jquery": "~2.1.4",
diff --git a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/css/ceilometerDashboard.css b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/css/ceilometerDashboard.css
index e6fb7a8..8d1d96b 100644
--- a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/css/ceilometerDashboard.css
+++ b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/css/ceilometerDashboard.css
@@ -23,6 +23,24 @@
     color: #fff;
   }
 
+  .service-list {
+    margin-top: -10px;
+  }
+
+  .service-list h3 {
+    margin-top: 0px;
+    margin-bottom: 0px;
+  }
+
+  .service-list a {
+    text-decoration: none;
+    color: #333;
+  }
+
+  .animate-slide-left {
+    margin-top: 25px;
+  }
+
   /* LOADER */
   .loader {
     font-size: 10px;
@@ -120,7 +138,6 @@
   }
 
   /* COLUMS ANIMATION */
-
   /* when showing the thing */
   .animate .animate-slide-left.ng-hide-remove { 
     animation:0.5s bounceInRight ease; 
@@ -189,6 +206,17 @@
     }
   }
 
+  @keyframes slideInUp {
+    from {
+      transform: translate3d(0, 100%, 0);
+      visibility: visible;
+    }
+
+    to {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
   @keyframes bounceOutRight {
     20% {
       opacity: 1;
@@ -213,4 +241,15 @@
     }
   }
 
+  @keyframes slideOutDown {
+    from {
+      transform: translate3d(0, 0, 0);
+    }
+
+    to {
+      visibility: hidden;
+      transform: translate3d(0, 100%, 0);
+    }
+  }
+
 /*}
\ No newline at end of file
diff --git a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/index.html b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/index.html
index de89045..9ac27cd 100644
--- a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/index.html
+++ b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/index.html
@@ -27,6 +27,8 @@
 <script src="vendor/ng-lodash/build/ng-lodash.js"></script>
 <script src="vendor/bootstrap-css/js/bootstrap.min.js"></script>
 <!-- endbower --><!-- endjs -->
+<script src="vendor/ui.bootstrap/src/collapse/collapse.js"></script>
+<script src="vendor/ui.bootstrap/src/accordion/accordion.js"></script>
 <!-- inject:js -->
 <script src="/xosHelpers/src/xosHelpers.module.js"></script>
 <script src="/xosHelpers/src/services/noHyperlinks.interceptor.js"></script>
diff --git a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/js/main.js b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/js/main.js
index ba433e1..7d6bff0 100644
--- a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/js/main.js
+++ b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/js/main.js
@@ -7,7 +7,8 @@
   'ui.router',
   'xos.helpers',
   'ngAnimate',
-  'chart.js'
+  'chart.js',
+  'ui.bootstrap.accordion'
 ])
 .config(($stateProvider, $urlRouterProvider) => {
   $stateProvider
@@ -21,12 +22,6 @@
   })
   .state('split', {
     url: '/split',
-    controller: () => {
-      console.log('split', Split);
-      Split(['#one', '#two', '#three'], {
-        
-      });
-    },
     templateUrl: 'templates/split.html'
   });
   $urlRouterProvider.otherwise('/');
@@ -122,7 +117,7 @@
         this.selectedResources = null;
         this.selectedResource = null;
         this.selectedMeters = null;
-        
+
         this.selectedService = service;
       };
 
diff --git a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/templates/accordion-group.html b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/templates/accordion-group.html
new file mode 100644
index 0000000..069141d
--- /dev/null
+++ b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/templates/accordion-group.html
@@ -0,0 +1,10 @@
+<div class="panel {{panelClass || 'panel-default'}}">
+  <div class="panel-heading" ng-keypress="toggleOpen($event)">
+    <h3>
+      <a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading"><span ng-class="{'text-muted': isDisabled}">{{heading}}</span></a>
+    </h3>
+  </div>
+  <div class="panel-collapse collapse" uib-collapse="!isOpen">
+	  <div class="panel-body" ng-transclude></div>
+  </div>
+</div>
diff --git a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/templates/accordion.html b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/templates/accordion.html
new file mode 100644
index 0000000..ba428f3
--- /dev/null
+++ b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/templates/accordion.html
@@ -0,0 +1 @@
+<div class="panel-group" ng-transclude></div>
\ No newline at end of file
diff --git a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/templates/ceilometer-dashboard.tpl.html b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/templates/ceilometer-dashboard.tpl.html
index ac3f233..784601e 100644
--- a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/templates/ceilometer-dashboard.tpl.html
+++ b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/templates/ceilometer-dashboard.tpl.html
@@ -12,26 +12,27 @@
 
 <section ng-hide="vm.loader" ng-class="{animate: !vm.loader}">
   <div class="row">
-    <div class="col-sm-4">
-      <div class="list-group">
-        <div ng-repeat="(service, slices) in vm.projects">
-          <div class="list-group-item">
-            <h2 ng-click="vm.selectService(service)">{{service}}</h2>
-          </div>
-          <a ng-hide="vm.selectedService !== service" 
-            ng-repeat="(slice, resources) in slices" 
-            ng-class="{active: slice === vm.selectedSlice}"
-            ng-click="vm.selectResources(resources, slice)"
-            href="#" class="list-group-item" >
-            {{slice}} <i class="glyphicon glyphicon-chevron-right pull-right"></i>
-          </a>
-        </div>
-      </div>
+    <div class="col-sm-3 service-list">
+        <h3>XOS Service: </h3>
+        <uib-accordion close-others="true" template-url="templates/accordion.html">
+          <uib-accordion-group
+            ng-repeat="(service, slices) in vm.projects"
+            template-url="templates/accordion-group.html"
+            heading="{{service}}">
+            <h4>Slices:</h4>
+            <a ng-repeat="(slice, resources) in slices" 
+              ng-class="{active: slice === vm.selectedSlice}"
+              ng-click="vm.selectResources(resources, slice)"
+              href="#" class="list-group-item" >
+              {{slice}} <i class="glyphicon glyphicon-chevron-right pull-right"></i>
+            </a>
+          </uib-accordion-group>
+        </uib-accordion>
     </div>
-    <div class="col-sm-4 animate-slide-left" ng-hide="!vm.selectedResources">
+    <div class="col-sm-3 animate-slide-left" ng-hide="!vm.selectedResources">
       <div class="list-group">
         <div class="list-group-item">
-          <h2>Resources</h2>
+          <h3>Resources</h3>
         </div>
         <a href="#" 
           ng-click="vm.selectMeters(meters, resource)" 
@@ -42,29 +43,29 @@
         </a>
       </div>
     </div>
-    <div class="col-sm-4 animate-slide-left" ng-hide="!vm.selectedMeters">
+    <div class="col-sm-6 animate-slide-left" ng-hide="!vm.selectedMeters">
       <div class="list-group">
         <div class="list-group-item">
-          <h2>Meters</h2>
+          <h3>Meters</h3>
         </div>
         <div class="list-group-item">
           <div class="row">
-            <div class="col-xs-4">
+            <div class="col-xs-6">
               <label>Name:</label>
             </div>
-            <div class="col-xs-4">
+            <div class="col-xs-3">
               <label>Unit:</label>
             </div>
-            <div class="col-xs-4"></div>
+            <div class="col-xs-3"></div>
           </div>
           <div class="row" ng-click="vm.selectMeters(meters)" ng-repeat="meter in vm.selectedMeters" style="margin-bottom: 10px;">
-            <div class="col-xs-4">
+            <div class="col-xs-6">
               {{meter.name}}
             </div>
-            <div class="col-xs-4">
+            <div class="col-xs-3">
               {{meter.unit}}
             </div>
-            <div class="col-xs-4">
+            <div class="col-xs-3">
               <a ui-sref="samples({name: meter.name, tenant: meter.resource_id})" class="btn btn-primary">
                 <i class="glyphicon glyphicon-search"></i>
               </a>