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