diff --git a/views/ngXosViews/developer/src/css/main.css b/views/ngXosViews/developer/src/css/main.css
index e69de29..7b15d7c 100644
--- a/views/ngXosViews/developer/src/css/main.css
+++ b/views/ngXosViews/developer/src/css/main.css
@@ -0,0 +1,18 @@
+#xosDeveloper .pie-legend li {
+  display: inline-block;
+  white-space: nowrap;
+  position: relative;
+  margin-bottom: 4px;
+  border-radius: 5px;
+  padding: 2px 8px 2px 28px;
+  font-size: smaller;
+  cursor: default; }
+
+#xosDeveloper .pie-legend-icon {
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 20px;
+  height: 20px;
+  border-radius: 5px; }
diff --git a/views/ngXosViews/developer/src/sass/main.scss b/views/ngXosViews/developer/src/sass/main.scss
index 702208f..043a334 100644
--- a/views/ngXosViews/developer/src/sass/main.scss
+++ b/views/ngXosViews/developer/src/sass/main.scss
@@ -1,5 +1,25 @@
 @import '../../../../style/sass/lib/_variables.scss';
 
 #xosDeveloper {
-  
+
+  .pie-legend li {
+      display: inline-block;
+    white-space: nowrap;
+    position: relative;
+    margin-bottom: 4px;
+    border-radius: 5px;
+    padding: 2px 8px 2px 28px;
+    font-size: smaller;
+    cursor: default;
+  }
+
+  .pie-legend-icon {
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 20px;
+    height: 20px;
+    border-radius: 5px;
+  }
 }
\ No newline at end of file
diff --git a/xos/core/xoslib/dashboards/xosDeveloper.html b/xos/core/xoslib/dashboards/xosDeveloper.html
index 9227acd..ee7a28b 100644
--- a/xos/core/xoslib/dashboards/xosDeveloper.html
+++ b/xos/core/xoslib/dashboards/xosDeveloper.html
@@ -1,32 +1,18 @@
-<script src="{{ STATIC_URL }}/js/vendor/underscore-min.js"></script>
-<script src="{{ STATIC_URL }}/js/vendor/backbone.js"></script>
-<script src="{{ STATIC_URL }}/js/vendor/backbone.wreqr.js"></script>
-<script src="{{ STATIC_URL }}/js/vendor/backbone.babysitter.js"></script>
-<script src="{{ STATIC_URL }}/js/vendor/backbone.marionette.js"></script>
+<!-- browserSync -->
+<!-- bower:css -->
+<!-- endbower -->
+<!-- endcss -->
+<!-- inject:css -->
+<link rel="stylesheet" href="/static/css/xosDeveloper.css">
+<!-- endinject -->
 
-<script src="{{ STATIC_URL }}/js/xoslib/xos-defaults.js"></script>
-<script src="{{ STATIC_URL }}/js/xoslib/xos-backbone.js"></script>
-<script src="{{ STATIC_URL }}/js/xosDeveloper.js"></script>
-
-<link rel="stylesheet" type="text/css" href="{% static 'css/xosDeveloper.css' %}" media="all">
-
-<div id="developerView">
+<div ng-app="xos.developer" id="xosDeveloper" class="container-fluid">
+  <div ui-view></div>
 </div>
 
-<script type="text/template" id="developer-slicetable-template">
-  <thead>
-    <tr class="developer-header">
-      <th>Slice <span class="sort" id="sort-asc-name">&#9650;</span><span class="sort" id="sort-desc-name">&#9660;</span></th>
-      <th>Privilege<span class="sort" id="sort-asc-sliceInfo.roles">&#9650;</span><span class="sort" id="sort-desc-sliceInfo.roles">&#9660;</span></th>
-      <th>Number of Instances<span class="sort" id="sort-asc-sliceInfo.instanceCount">&#9650;</span><span class="sort" id="sort-desc-sliceInfo.instanceCount">&#9660;</span></th>
-      <th>Number of Sites<span class="sort" id="sort-asc-sliceInfo.siteCount">&#9650;</span><span class="sort" id="sort-desc-sliceInfo.siteCount">&#9660;</span></th>
-    </tr>
-  </thead>
-  <tbody>
-  </tbody>
-</script>
-
-<script type="text/template" id="developer-slicedetail-template">
-  <td><a href="http://{{request.get_host}}/admin/core/slice/<%= id %>/"><%= name %></a></td><td><%= sliceInfo.roles[0] %></td><td><%= sliceInfo.instanceCount %></td><td><%= sliceInfo.siteCount %></td>
-</script>
-
+<!-- bower:js -->
+<!-- endbower -->
+<!-- endjs -->
+<!-- inject:js -->
+<script src="/static/js/xosDeveloper.js"></script>
+<!-- endinject -->
\ No newline at end of file
diff --git a/xos/core/xoslib/static/css/xosDeveloper.css b/xos/core/xoslib/static/css/xosDeveloper.css
index 1bce877..459bc8a 100644
--- a/xos/core/xoslib/static/css/xosDeveloper.css
+++ b/xos/core/xoslib/static/css/xosDeveloper.css
@@ -1 +1,19 @@
-#developerView .sort { cursor: pointer; }
+#xosDeveloper .pie-legend li {
+      display: inline-block;
+    white-space: nowrap;
+    position: relative;
+    margin-bottom: 4px;
+    border-radius: 5px;
+    padding: 2px 8px 2px 28px;
+    font-size: smaller;
+    cursor: default;
+}
+
+#xosDeveloper .pie-legend-icon {
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 20px;
+  height: 20px;
+  border-radius: 5px; }
diff --git a/xos/core/xoslib/static/js/xosDeveloper.js b/xos/core/xoslib/static/js/xosDeveloper.js
index c1af537..784dd95 100644
--- a/xos/core/xoslib/static/js/xosDeveloper.js
+++ b/xos/core/xoslib/static/js/xosDeveloper.js
@@ -1,64 +1 @@
-/* eslint-disable guard-for-in, no-undef, space-before-blocks*/
-/* This is an example that uses xoslib + marionette to display the developer
-   view.
-
-   For an example that uses xoslib + datatables, see xosDeveloper_datatables.js
-*/
-
-DeveloperApp = new Marionette.Application();
-
-DeveloperApp.addRegions({
-  mainRegion: '#developerView'
-});
-
-DeveloperApp.SliceDetailView = Marionette.ItemView.extend({
-  template: '#developer-slicedetail-template',
-  tagName: 'tr',
-  className: 'developer_slicedetail'
-});
-
-DeveloperApp.SliceListView = Marionette.CompositeView.extend({
-  tagName: 'table',
-  className: 'table table-bordered table-striped',
-  template: '#developer-slicetable-template',
-  childView: DeveloperApp.SliceDetailView,
-  childViewContainer: 'tbody',
-
-  events: {'click .sort': 'changeSort'},
-
-  initialize: function() {
-    this.listenTo(this.collection, 'change', this._renderChildren);
-  },
-
-  changeSort: function(e) {
-    parts = $(e.currentTarget).attr('id').split('-');
-    order = parts[1];
-    fieldName = parts[2];
-    this.collection.sortVar = fieldName;
-    this.collection.sortOrder = order;
-    this.collection.sort();
-  },
-
-  attachHtml: function(compositeView, childView, index) {
-    // The REST API will let admin users see everything. For the developer
-    // view we still want to hide slices we are not members of.
-    if(childView.model.get('sliceInfo').roles.length === 0) {
-      return;
-    }
-    DeveloperApp.SliceListView.__super__.attachHtml(compositeView, childView, index);
-  },
-});
-
-DeveloperApp.on('start', function() {
-  var developerSliceListView = new DeveloperApp.SliceListView({
-    collection: xos.slicesPlus
-  });
-
-  DeveloperApp.mainRegion.show(developerSliceListView);
-  xos.slicesPlus.startPolling();
-});
-
-$(document).ready(function() {
-  DeveloperApp.start();
-});
-
+"use strict";angular.module("xos.developer",["ngResource","ngCookies","ui.router","xos.helpers"]).config(["$stateProvider",function(e){e.state("developer",{url:"/",template:"<developer-dashboard></developer-dashboard>"})}]).config(["$httpProvider",function(e){e.interceptors.push("NoHyperlinks")}]).directive("developerDashboard",function(){return{restrict:"E",scope:{},bindToController:!0,controllerAs:"vm",templateUrl:"templates/developer-dashboard.tpl.html",controller:["$timeout","SlicesPlus","_",function(e,t,n){var r=this;this.instancePerSliceConfig={resource:"Instances",groupBy:"slice",legend:!0,labelFormatter:function(e){return e.map(function(e){return n.find(r.slices,{id:parseInt(e)}).name})}},this.instancePerSiteConfig={data:[],groupBy:"site",legend:!0},this.networkPerSliceConfig={data:[],groupBy:"name",legend:!0},this.tableConfig={columns:[{label:"Name",prop:"name"},{label:"Privileges",prop:"current_user_roles",type:"array"},{label:"Number of Instances (active / total)",type:"custom",formatter:function(e){return e.instance_total_ready+" / "+e.instance_total}},{label:"Total Instances per Sites",type:"object",prop:"instance_distribution"},{label:"Active Instances per Sites",type:"object",prop:"instance_distribution_ready"},{label:"Networks",type:"custom",formatter:function(e){return e.networks.length}}]},t.query().$promise.then(function(t){var s=n.reduce(t,function(e,t){if(t.networks.length>1)for(var n=0;n<t.networks.length;n++)e.push({id:t.id,name:t.name,network:t.networks[n]});else 1===t.networks.length&&e.push({id:t.id,name:t.name,network:t.networks[0]});return e},[]),i=n.reduce(t,function(e,t){return n.forEach(Object.keys(t.instance_distribution),function(n){for(var r=0;r<t.instance_distribution[n];r++)e.push({site:n,instance:r})}),e},[]);r.sites=Object.keys(n.groupBy(i,"site")),e(function(){r.instancePerSiteConfig.data=i,r.networkPerSliceConfig.data=s},0),r.slices=t})["catch"](function(e){throw new Error(e)})}]}}),angular.module("xos.developer").run(["$templateCache",function(e){e.put("templates/developer-dashboard.tpl.html",'<div class="row">\n  <div ng-class="{\'col-sm-4\': vm.sites.length > 1, \'col-sm-6\': vm.sites.length <= 1}" class="text-center">\n    <h3>Instances per Slice</h3>\n    <xos-smart-pie ng-if="vm.slices" config="vm.instancePerSliceConfig"></xos-smart-pie>\n  </div>\n  <div ng-if="vm.sites.length > 1" class="col-sm-4 text-center">\n    <h3>Instances per Site</h3>\n    <xos-smart-pie ng-if="vm.instancePerSiteConfig.data.length > 0" config="vm.instancePerSiteConfig"></xos-smart-pie>\n  </div>\n  <div ng-class="{\'col-sm-4\': vm.sites.length > 1, \'col-sm-6\': vm.sites.length <= 1}" class="text-center">\n    <h3>Network per Slice</h3>\n    <xos-smart-pie ng-if="vm.networkPerSliceConfig.data.length > 0" config="vm.networkPerSliceConfig"></xos-smart-pie>\n  </div>\n</div>\n\n<xos-table config="vm.tableConfig" data="vm.slices"></xos-table>')}]),angular.module("xos.developer").run(["$location",function(e){e.path("/")}]);
\ No newline at end of file