diff --git a/ui/index.html b/ui/index.html
index ed73a38cbc..4965792fb5 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -22,33 +22,33 @@
 
   <script type="text/x-handlebars" data-template-name="dc">
     <div class="row">
-      <div class="col-md-12 col-sm-12 topbar">
+      <div class="col-md-12 col-sm-12 col-xs-12 topbar">
 
-        <div class="col-md-1 col-sm-2">
+        <div class="col-md-1 col-sm-2 col-xs-12">
           <a href="#"><div class="top-brand"></div></a>
         </div>
 
-        <div class="col-md-2 col-sm-3">
-         {{#link-to 'services' class='btn btn-default'}}Services{{/link-to}}
+        <div class="col-md-2 col-sm-3 col-xs-12">
+         {{#link-to 'services' class='btn btn-default col-xs-12'}}Services{{/link-to}}
         </div>
 
-        <div class="col-md-2 col-sm-3">
-          {{#link-to 'nodes' class='btn btn-default'}}Nodes{{/link-to}}
+        <div class="col-md-2 col-sm-3 col-xs-12">
+          {{#link-to 'nodes' class='btn btn-default col-xs-12'}}Nodes{{/link-to}}
         </div>
 
-        <div class="col-md-2 col-sm-3">
-          {{#link-to 'kv' class='btn btn-default'}}Key/Value{{/link-to}}
+        <div class="col-md-2 col-sm-3 col-xs-12">
+          {{#link-to 'kv' class='btn btn-default col-xs-12'}}Key/Value{{/link-to}}
         </div>
 
-        <div class="col-md-2 col-md-offset-1 col-sm-3 col-sm-offset-0">
-            {{#link-to 'services'}}<button {{bind-attr class=":btn hasFailingChecks:btn-warning:btn-success"}}>{{ checkMessage }}</button>{{/link-to}}
+        <div class="col-md-2 col-md-offset-1 col-sm-3 col-sm-offset-5 col-xs-6">
+            {{#link-to 'services'}}<button {{bind-attr class=":col-xs-12 :btn hasFailingChecks:btn-warning:btn-success"}}>{{ checkMessage }}</button>{{/link-to}}
         </div>
 
-        <div class="col-md-2 col-sm-3">
-          <button type="button" {{bind-attr class=":btn isDropDownVisible:btn-primary:btn-default"}} {{action "toggle"}}> {{model}} <span class="caret"></span> </button>
+        <div class="col-md-2 col-sm-3 col-xs-6">
+          <button type="button" {{bind-attr class=":col-xs-12 :btn isDropDownVisible:btn-primary:btn-default"}} {{action "toggle"}}> {{model}} <span class="caret"></span> </button>
 
           {{#if isDropdownVisible}}
-            <ul class="dropdown-menu" style="display:block;">
+            <ul class="dropdown-menu col-xs-12" style="display:block;">
               {{#each dc in dcs}}
                 <li {{action "toggle"}}>{{#link-to 'services' dc}}{{dc}}{{/link-to}}</li>
               {{/each}}
@@ -63,26 +63,27 @@
   </script>
 
   <script type="text/x-handlebars" id="services">
-    <div class="col-md-5">
+    <div {{ bind-attr class=":col-md-5 hasChild:hidden" }}>
 
       {{#each service in services}}
+
         <div class="row">
-          {{#link-to 'services.show' service.Name tagName="div" href=false class="list-group-item list-link" }}
-            <div {{bind-attr class="service.hasFailingChecks:bg-orange:bg-green :list-bar"}}></div>
-            <h4 class="list-group-item-heading">
-              {{#link-to 'services.show' service.Name class='subtle'}}{{service.Name}}{{/link-to}}
-              <small>{{service.Name}}</small>
-              <div class="heading-helper">
-                <a class="subtle" href="#">{{service.checkMessage}}</a>
-              </div>
-            </h4>
-            <ul class="list-inline">
-              {{#each node in service.Nodes }}
-              <li>{{#link-to 'nodes.show' node class='subtle'}}{{node}}{{/link-to}}</li>
-              {{/each}}
-            </ul>
-          </div>
-        {{/link-to}}
+            {{#link-to 'services.show' service.Name tagName="div" href=false class="list-group-item list-link" }}
+              <div {{bind-attr class="service.hasFailingChecks:bg-orange:bg-green :list-bar"}}></div>
+              <h4 class="list-group-item-heading">
+                {{#link-to 'services.show' service.Name class='subtle'}}{{service.Name}}{{/link-to}}
+                <small>{{service.Name}}</small>
+                <div class="heading-helper">
+                  <a class="subtle" href="#">{{service.checkMessage}}</a>
+                </div>
+              </h4>
+              <ul class="list-inline">
+                {{#each node in service.Nodes }}
+                <li>{{#link-to 'nodes.show' node class='subtle'}}{{node}}{{/link-to}}</li>
+                {{/each}}
+              </ul>
+          {{/link-to}}
+        </div>
 
       {{/each}}
 
@@ -127,6 +128,8 @@
         {{/link-to}}
 
       {{/each}}
+
+      {{#link-to "services" class="btn btn-default col-xs-12 visible-xs" }}All Services{{/link-to}}
   </script>
 
   <script type="text/x-handlebars" id="nodes">
@@ -210,6 +213,8 @@
         </div>
       {{/link-to}}
       {{/each}}
+
+      {{#link-to "nodes" class="btn btn-default col-xs-12 visible-xs" }}All Nodes{{/link-to}}
   </script>
 
   <script type="text/x-handlebars" id="index">
diff --git a/ui/javascripts/app/controllers.js b/ui/javascripts/app/controllers.js
index 379b83a21c..1cb348c7db 100644
--- a/ui/javascripts/app/controllers.js
+++ b/ui/javascripts/app/controllers.js
@@ -53,4 +53,20 @@ App.DcController = Ember.Controller.extend({
   }
 })
 
+//
+// path: /:dc/services
+//
+// The index is for choosing services.
+//
+App.ServicesController = Ember.ArrayController.extend({
+  needs: ['application']
+});
 
+//
+// path: /:dc/services/:name
+//
+// An individual service.
+//
+App.ServicesShowController = Ember.Controller.extend({
+  needs: ['services']
+});
diff --git a/ui/javascripts/app/routes.js b/ui/javascripts/app/routes.js
index 8fbf503019..46b0a919c7 100644
--- a/ui/javascripts/app/routes.js
+++ b/ui/javascripts/app/routes.js
@@ -4,16 +4,6 @@
 //
 //
 App.BaseRoute = Ember.Route.extend({
-  //
-  // When activating the base route, if we don't have a datacenter set,
-  // transition the user to the index route to choose a datacenter.
-  //
-  activate: function() {
-    var controller = this.controllerFor('application');
-    if (controller.getDc === null) {
-      this.transitionTo('index');
-    };
-  }
 });
 
 //
@@ -58,10 +48,6 @@ App.DcRoute = App.BaseRoute.extend({
     controller.set('services', [App.Service.create(window.fixtures.services[0]), App.Service.create(window.fixtures.services[1])]);
 
     controller.set('dcs', window.fixtures.dcs);
-  },
-
-  afterModel: function(dcs, transition) {
-    this.transitionTo('services');
   }
 });
 
@@ -77,12 +63,12 @@ App.ServicesRoute = App.BaseRoute.extend({
   // the template as {{model}}
   //
   setupController: function(controller, model) {
-      //
-      // Since we have 2 column layout, we need to also display the
-      // list of services on the left. Hence setting the attribute
-      // {{services}} on the controller.
-      //
-      controller.set('services', [App.Service.create(window.fixtures.services[0]), App.Service.create(window.fixtures.services[1])]);
+    //
+    // Since we have 2 column layout, we need to also display the
+    // list of services on the left. Hence setting the attribute
+    // {{services}} on the controller.
+    //
+    controller.set('services', [App.Service.create(window.fixtures.services[0]), App.Service.create(window.fixtures.services[1])]);
   }
 });
 
@@ -98,16 +84,6 @@ App.ServicesShowRoute = App.BaseRoute.extend({
   //
   model: function(params) {
     return [App.Node.create(window.fixtures.services_full[params.name][0]), App.Node.create(window.fixtures.services_full[params.name][1])];
-  },
-
-  setupController: function(controller, model) {
-      controller.set('content', model);
-      //
-      // Since we have 2 column layout, we need to also display the
-      // list of services on the left. Hence setting the attribute
-      // {{services}} on the controller.
-      //
-      controller.set('services', [App.Service.create(window.fixtures.services[0]), App.Service.create(window.fixtures.services[1])]);
   }
 });