diff --git a/ui/index.html b/ui/index.html
index 682537281f..04af0ed3e0 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -195,7 +195,7 @@
               </h4>
               <ul class="list-inline">
                 {{#each node in service.Nodes }}
-                <li>{{#link-to 'nodes.show' node class='subtle'}}{{node}}{{/link-to}}</li>
+                <li>{{node}}</li>
                 {{/each}}
               </ul>
           {{/link-to}}
@@ -219,21 +219,19 @@
   </script>
 
   <script type="text/x-handlebars" id="service">
-      <h2 class="no-margin">{{ model.1.ServiceName }}</h2>
+      <h2 class="no-margin">{{ model.0.Service.Service }}</h2>
       <hr>
-      <h5>Tags</h5>
-      <p>Pending...</p>
 
       <h5>Nodes</h5>
 
       {{#each node in model }}
 
-        {{#link-to 'nodes.show' node.Node tagName="div" href=false class="panel panel-link" }}
+        {{#link-to 'nodes.show' node.Node.Node tagName="div" href=false class="panel panel-link" }}
           <div {{ bind-attr class=":panel-bar node.hasFailingChecks:bg-orange:bg-green" }}></div>
           <div class="panel-heading">
             <h3 class="panel-title">
-              {{#link-to 'nodes.show' node.Node class='subtle'}}{{node.Node}}{{/link-to}}
-              <small>{{node.Address}}</small>
+              {{node.Node.Node}}
+              <small>{{node.Node.Address}}</small>
               <span class="panel-note">{{node.checkMessage}}</span>
             </h3>
           </div>
@@ -259,10 +257,10 @@
 
       {{#each node in nodes}}
         <div class="row">
-          {{#link-to 'nodes.show' node.Name tagName="div" href=false class="list-group-item list-link" }}
+          {{#link-to 'nodes.show' node.Node tagName="div" href=false class="list-group-item list-link" }}
             <div {{bind-attr class="node.hasFailingChecks:bg-orange:bg-green :list-bar"}}></div>
             <h4 class="list-group-item-heading">
-              {{#link-to 'nodes.show' node.Name class='subtle'}}{{node.Name}}{{/link-to}}
+              {{node.Node}}
               <small>{{node.Address}}</small>
               <div class="heading-helper">
                 <a class="subtle" href="#">{{node.checkMessage}}</a>
@@ -270,7 +268,7 @@
             </h4>
             <ul class="list-inline">
               {{#each service in node.Services }}
-              <li>{{#link-to 'services.show' service class='subtle'}}{{service}}{{/link-to}}</li>
+                <li>{{service.Service}}</li>
               {{/each}}
             </ul>
           </div>
@@ -294,7 +292,7 @@
   </script>
 
   <script type="text/x-handlebars" id="node">
-      <h2 class="no-margin">{{ model.Node.Node }} <small> {{ model.Node.Address }}</small></h2>
+      <h2 class="no-margin">{{ model.Node }} <small> {{ model.Address }}</small></h2>
       <hr>
 
       <h5>Checks</h5>
diff --git a/ui/javascripts/app/controllers.js b/ui/javascripts/app/controllers.js
index 156321ffe1..44d933d9a4 100644
--- a/ui/javascripts/app/controllers.js
+++ b/ui/javascripts/app/controllers.js
@@ -16,7 +16,7 @@ App.DcController = Ember.Controller.extend({
   isDropdownVisible: false,
 
   checks: function() {
-    var services = this.get('services');
+    var services = this.get('nodes');
     var checks = Ember.A()
 
     // loop over all of the services we have,
diff --git a/ui/javascripts/app/models.js b/ui/javascripts/app/models.js
index fd7c1522e5..5e85216774 100644
--- a/ui/javascripts/app/models.js
+++ b/ui/javascripts/app/models.js
@@ -6,14 +6,22 @@ App.Service = Ember.Object.extend({
   // The number of failing checks within the service.
   //
   failingChecks: function() {
-    return this.get('Checks').filterBy('Status', 'critical').get('length');
+    if (this.get('ChecksCritical') != undefined) {
+      return (this.get('ChecksCritical') + this.get('ChecksWarning'))
+    } else {
+      return this.get('Checks').filterBy('Status', 'critical').get('length');
+    }
   }.property('Checks'),
 
   //
   // The number of passing checks within the service.
   //
   passingChecks: function() {
-    return this.get('Checks').filterBy('Status', 'passing').get('length');
+    if (this.get('ChecksPassing') != undefined) {
+      return this.get('ChecksPassing')
+    } else {
+      return this.get('Checks').filterBy('Status', 'passing').get('length');
+    }
   }.property('Checks'),
 
   //
diff --git a/ui/javascripts/app/router.js b/ui/javascripts/app/router.js
index 0a9fa72647..b3c437b893 100644
--- a/ui/javascripts/app/router.js
+++ b/ui/javascripts/app/router.js
@@ -1,8 +1,10 @@
 window.App = Ember.Application.create({
   rootElement: "#app",
-  LOG_TRANSITIONS: true
+  LOG_TRANSITIONS: true,
+  baseUrl: 'http://localhost:8500'
 });
 
+
 App.Router.map(function() {
 
   this.resource("dc", {path: "/:dc"}, function() {
diff --git a/ui/javascripts/app/routes.js b/ui/javascripts/app/routes.js
index b6bc105c46..2c5ed47b32 100644
--- a/ui/javascripts/app/routes.js
+++ b/ui/javascripts/app/routes.js
@@ -24,18 +24,19 @@ App.BaseRoute = Ember.Route.extend({
 // and loop of transitions.
 //
 App.IndexRoute = Ember.Route.extend({
-  model: function() {
-    return window.fixtures.dcs;
+  model: function(params) {
+    return Ember.$.getJSON('/v1/catalog/datacenters').then(function(data) {
+      return data
+    });
   },
 
   setupController: function(controller, model) {
     controller.set('content', model);
-    controller.set('dcs', window.fixtures.dcs);
+    controller.set('dcs', model);
   },
 
   afterModel: function(dcs, transition) {
     if (dcs.get('length') === 1) {
-      this.get('controllers.application').setDc(dcs[0])
       this.transitionTo('services', dcs[0]);
     }
   }
@@ -49,15 +50,32 @@ App.DcRoute = App.BaseRoute.extend({
   // by it's identifier passed via the route
   //
   model: function(params) {
-    return params.dc;
+    var object = Ember.Object.create();
+    object.set('dc', params.dc)
+
+    var nodesPromise =  Ember.$.getJSON('/v1/internal/ui/nodes').then(function(data) {
+      objs = [];
+
+      data.map(function(obj){
+        objs.push(App.Node.create(obj));
+      });
+
+      object.set('nodes', objs);
+      return object;
+    });
+
+    var datacentersPromise = Ember.$.getJSON('/v1/catalog/datacenters').then(function(data) {
+      object.set('dcs', data);
+      return object;
+    });
+
+    return nodesPromise.then(datacentersPromise);
   },
 
   setupController: function(controller, model) {
-    controller.set('content', model);
-
-    controller.set('services', [App.Service.create(window.fixtures.services[0]), App.Service.create(window.fixtures.services[1])]);
-
-    controller.set('dcs', window.fixtures.dcs);
+    controller.set('content', model.get('dc'));
+    controller.set('nodes', model.get('nodes'));
+    controller.set('dcs', model.get('dcs'));
   }
 });
 
@@ -115,6 +133,15 @@ App.KvEditRoute = App.BaseRoute.extend({
 // Display all the services, allow to drill down into the specific services.
 //
 App.ServicesRoute = App.BaseRoute.extend({
+  model: function(params) {
+    return Ember.$.getJSON('/v1/internal/ui/services').then(function(data) {
+      objs = [];
+      data.map(function(obj){
+       objs.push(App.Service.create(obj));
+      });
+      return objs
+    });
+  },
   //
   // Set the services as the routes default model to be called in
   // the template as {{model}}
@@ -125,7 +152,7 @@ App.ServicesRoute = App.BaseRoute.extend({
     // 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])]);
+    controller.set('services', model);
   }
 });
 
@@ -140,8 +167,17 @@ App.ServicesShowRoute = App.BaseRoute.extend({
   // by it's identifier passed via the route
   //
   model: function(params) {
-    return [App.Node.create(window.fixtures.services_full[params.name][0]), App.Node.create(window.fixtures.services_full[params.name][1])];
-  }
+    return Ember.$.getJSON('/v1/health/service/' + params.name).then(function(data) {
+      objs = [];
+
+      data.map(function(obj){
+       objs.push(App.Node.create(obj));
+      });
+
+      console.log(objs)
+      return objs;
+    });
+  },
 });
 
 
@@ -157,7 +193,9 @@ App.NodesShowRoute = App.BaseRoute.extend({
   // by it's identifier passed via the route
   //
   model: function(params) {
-    return App.Node.create(window.fixtures.nodes_full[params.name]);
+    return Ember.$.getJSON('/v1/internal/ui/node/' + params.name).then(function(data) {
+      return App.Node.create(data)
+    });
   },
 
   setupController: function(controller, model) {
@@ -167,7 +205,15 @@ App.NodesShowRoute = App.BaseRoute.extend({
       // list of nodes on the left. Hence setting the attribute
       // {{nodes}} on the controller.
       //
-      controller.set('nodes', [App.Node.create(window.fixtures.nodes[0]), App.Node.create(window.fixtures.nodes[1])]);
+      Ember.$.getJSON('/v1/internal/ui/nodes').then(function(data) {
+        objs = [];
+
+        data.map(function(obj){
+         objs.push(App.Node.create(obj));
+        });
+
+        controller.set('nodes', objs);
+      });
   }
 });
 
@@ -175,6 +221,16 @@ App.NodesShowRoute = App.BaseRoute.extend({
 // Display all the nodes, allow to drill down into the specific nodes.
 //
 App.NodesRoute = App.BaseRoute.extend({
+
+  model: function(params) {
+    return Ember.$.getJSON('/v1/internal/ui/nodes').then(function(data) {
+      objs = [];
+      data.map(function(obj){
+       objs.push(App.Node.create(obj));
+      });
+      return objs
+    });
+  },
   //
   // Set the node as the routes default model to be called in
   // the template as {{model}}. This is the "expanded" view.
@@ -185,6 +241,6 @@ App.NodesRoute = App.BaseRoute.extend({
       // list of nodes on the left. Hence setting the attribute
       // {{nodes}} on the controller.
       //
-      controller.set('nodes', [App.Node.create(window.fixtures.nodes[0]), App.Node.create(window.fixtures.nodes[1])]);
+      controller.set('nodes', model);
   }
 });
diff --git a/ui/styles/_nav.scss b/ui/styles/_nav.scss
index cd87a88384..57c5b0e08c 100644
--- a/ui/styles/_nav.scss
+++ b/ui/styles/_nav.scss
@@ -1,7 +1,7 @@
 
 .top-brand {
     margin-top: 20px;
-    background: transparent url('/static/consul-logo.png') 0 no-repeat;
+    background: transparent url('consul-logo.png') 0 no-repeat;
     background-size: 30px 30px;
     width: 30px;
     height: 30px;