diff --git a/app/app/vhosts/index/template.hbs b/app/app/vhosts/index/template.hbs
index a9c33752..5f1dfb87 100644
--- a/app/app/vhosts/index/template.hbs
+++ b/app/app/vhosts/index/template.hbs
@@ -1,9 +1,11 @@
 {{#each model as |vhost|}}
-  <div class="panel panel-default panel-subdued">
+  <div class="panel panel-default panel-subdued vhost">
     <div class="panel-heading">
       <div class="row">
         <div class="col-xs-6">
-          {{vhost.virtualDomain}}
+          <span class="virtual-domain">
+            {{vhost.virtualDomain}}
+          </span>
         </div>
         <div class="col-xs-6">
           <div class='pull-right'>
@@ -22,7 +24,9 @@
             <li class="resource-metadata-item">
               <h5 class="resource-metadata-title">Hostname</h5>
               <h3 class="resource-metadata-value">
-                {{vhost.externalHost}}
+                <span class="external-host">
+                  {{vhost.externalHost}}
+                </span>
               </h3>
             </li>
           </ul>
diff --git a/app/app/vhosts/new/template.hbs b/app/app/vhosts/new/template.hbs
index 91ee2dcd..f9df3d0d 100644
--- a/app/app/vhosts/new/template.hbs
+++ b/app/app/vhosts/new/template.hbs
@@ -19,6 +19,7 @@
             <label>Service</label>
             {{view "select" content=services
                             selection=vhostService
+                            name="service"
                             optionLabelPath="content.handle"}}
           </div>
 
diff --git a/app/app/vhosts/route.js b/app/app/vhosts/route.js
index 9d8d87b6..252ddb66 100644
--- a/app/app/vhosts/route.js
+++ b/app/app/vhosts/route.js
@@ -3,22 +3,7 @@ import Ember from "ember";
 export default Ember.Route.extend({
   model: function(){
     var app = this.modelFor('app');
-    var vhosts = [];
 
-    // TODO should be an easier way to get app.vhosts
-    // API should respond to /apps/:id/vhosts with a scope array of vhosts
-    return app.get('services').then(function(services){
-      var vhostPromises = services.map(function(service){
-        return service.get('vhosts');
-      });
-
-      return Ember.RSVP.all(vhostPromises).then(function(vhostsArray){
-        vhostsArray.forEach(function(vhostArray){
-          vhosts.pushObjects(vhostArray.get('content'));
-        });
-      });
-    }).then(function(){
-      return vhosts;
-    });
+    return app.get('vhosts');
   }
 });
diff --git a/app/models/app.js b/app/models/app.js
index 6741e606..f8d77fa5 100644
--- a/app/models/app.js
+++ b/app/models/app.js
@@ -13,6 +13,7 @@ export default DS.Model.extend({
   stack: DS.belongsTo('stack', {async: true}),
   services: DS.hasMany('service', {async:true}),
   operations: DS.hasMany('operation', {async:true}),
+  vhosts: DS.hasMany('vhost', {async:true}),
 
   isDeprovisioned: Ember.computed.equal('status', STATUSES.DEPROVISIONED)
 });
diff --git a/tests/acceptance/service-new-vhost-test.js b/tests/acceptance/app-vhost-new-test.js
similarity index 51%
rename from tests/acceptance/service-new-vhost-test.js
rename to tests/acceptance/app-vhost-new-test.js
index 01537f26..51b62cfd 100644
--- a/tests/acceptance/service-new-vhost-test.js
+++ b/tests/acceptance/app-vhost-new-test.js
@@ -4,7 +4,15 @@ import { stubRequest } from '../helpers/fake-server';
 
 var App;
 
-module('Acceptance: App New Vhost', {
+var appId = '1';
+var appUrl = '/apps/' + appId;
+var appVhostsUrl = '/apps/' + appId + '/vhosts';
+var appVhostsApiUrl = '/apps/' + appId + '/vhosts';
+var appVhostsNewUrl = '/apps/' + appId + '/vhosts/new';
+
+var formInputNames = ['service', 'virtual-domain', 'certificate', 'private-key'];
+
+module('Acceptance: App Vhost New', {
   setup: function() {
     App = startApp();
     stubStacks();
@@ -14,52 +22,36 @@ module('Acceptance: App New Vhost', {
   }
 });
 
-test('visit /apps/:id/vhosts/new requires authentication', function(){
-  expectRequiresAuthentication('/apps/1/vhosts/new');
+test('visit ' + appVhostsNewUrl + ' requires authentication', function(){
+  expectRequiresAuthentication(appVhostsNewUrl);
 });
 
-test('visit /apps/:id/vhosts/new', function(){
+test('visit ' + appVhostsNewUrl + ' shows creation form', function(){
   var appId = 1;
 
   stubApp({
     id: appId,
+    _embedded: { services: [] },
     _links: {
-      services: { href: '/apps/' + appId + '/services' }
+      vhosts: { href: appVhostsApiUrl }
     }
   });
 
-  stubRequest('get', '/apps/' + appId + '/services', function(){
+  stubRequest('get', appVhostsApiUrl, function(){
     return this.success({
-      _embedded: {
-        services: [{
-          id: 1,
-          _links: {
-            vhosts: { href: '/services/1/vhosts' }
-          }
-        }]
-      }
+      _embedded: { vhosts: [] }
     });
   });
 
-  stubRequest('get', '/services/1/vhosts', function(){
-    return this.success({
-      _embedded: {
-        vhosts: [{
-          id: 1
-        }]
-      }
-    });
-  });
-
-  signInAndVisit('/apps/' + appId + '/vhosts/new');
+  signInAndVisit(appVhostsNewUrl);
 
   andThen(function(){
     var header = find('.panel-heading:contains(Create a new VHost)');
     ok(header.length, 'has header');
 
-    ['Service', 'Virtual Domain', 'Certificate', 'Private Key'].forEach(function(name){
-      ok( find('.form-group:contains(' + name + ')').length,
-          'has input for ' + name);
+    formInputNames.forEach(function(name){
+      ok( find('.form-group *[name~="' + name + '"]').length,
+          'has input with name ' + name);
     });
 
     ok( find('button:contains(Save VHost)').length,
@@ -72,40 +64,30 @@ test('visit /apps/:id/vhosts/new', function(){
 
 test('visit /services/:id/vhosts/new and create vhost', function(){
   var appId = 1;
+  var serviceId = 'the-service-id';
 
   stubApp({
     id: appId,
+    _embedded: {
+      services: [{ // Must have at least 1 service so that there is a service selected in the dropdown
+        id: serviceId,
+        handle: 'the-hubot-service'
+      }]
+    },
     _links: {
-      services: { href: '/apps/' + appId + '/services' }
+      vhosts: { href: appVhostsApiUrl }
     }
   });
 
-  stubRequest('get', '/apps/' + appId + '/services', function(){
-    return this.success({
-      _embedded: {
-        services: [{
-          id: 1,
-          _links: {
-            vhosts: { href: '/services/1/vhosts' }
-          }
-        }]
-      }
-    });
-  });
-
-  stubRequest('get', '/services/1/vhosts', function(){
+  stubRequest('get', appVhostsApiUrl, function(){
     return this.success({
-      _embedded: {
-        vhosts: [{
-          id: 1
-        }]
-      }
+      _embedded: { vhosts: [] }
     });
   });
 
   signInAndVisit('/apps/' + appId + '/vhosts/new');
 
-  stubRequest('post', '/services/1/vhosts', function(request){
+  stubRequest('post', '/services/' + serviceId + '/vhosts', function(request){
     var json = this.json(request);
     equal(json.virtual_domain, 'my.domain.com');
     equal(json.certificate, 'my long cert');
diff --git a/tests/acceptance/apps-vhosts-test.js b/tests/acceptance/apps-vhosts-test.js
new file mode 100644
index 00000000..9991a7ee
--- /dev/null
+++ b/tests/acceptance/apps-vhosts-test.js
@@ -0,0 +1,94 @@
+import Ember from 'ember';
+import startApp from '../helpers/start-app';
+import { stubRequest } from '../helpers/fake-server';
+
+var App;
+
+var appId = '1';
+var appUrl = '/apps/' + appId;
+var appVhostsUrl = '/apps/' + appId + '/vhosts';
+var appVhostsApiUrl = '/apps/' + appId + '/vhosts';
+var appVhostsNewUrl = '/apps/' + appId + '/vhosts/new';
+
+module('Acceptance: App Vhosts', {
+  setup: function() {
+    App = startApp();
+  },
+  teardown: function() {
+    Ember.run(App, 'destroy');
+  }
+});
+
+test(appVhostsUrl + ' requires authentication', function(){
+  expectRequiresAuthentication(appVhostsUrl);
+});
+
+test('app show page includes link to vhosts url', function(){
+  stubApp({
+    id: appId
+  });
+
+  signInAndVisit(appUrl);
+
+  andThen(function(){
+    ok(find('a[href~="' + appVhostsUrl + '"]').length,
+       'has link to ' + appVhostsUrl);
+  });
+});
+
+test('visit ' + appVhostsUrl + ' has link to ' + appVhostsNewUrl, function(){
+  stubApp({
+    id: appId
+  });
+
+  signInAndVisit(appVhostsUrl);
+
+  andThen(function(){
+    ok(find('a[href~="' + appVhostsNewUrl + '"]').length,
+       'has link to ' + appVhostsNewUrl);
+  });
+});
+
+test('visit ' + appVhostsUrl + ' lists vhosts', function(){
+  var vhosts = [{
+    id: 1,
+    virtual_domain: 'www.health1.io',
+    external_host: 'www.host1.com'
+  },{
+    id: 2,
+    virtual_domain: 'www.health2.io',
+    external_host: 'www.host2.com'
+  }];
+
+  stubApp({
+    id: appId,
+    _embedded: {
+      services: []
+    },
+    _links: {
+      vhosts: { href: appVhostsApiUrl }
+    }
+  });
+
+  stubRequest('get', appVhostsApiUrl, function(){
+    return this.success({
+      _embedded: {
+        vhosts: vhosts
+      }
+    });
+  });
+
+  signInAndVisit(appVhostsUrl);
+
+  andThen(function(){
+    equal( find('.vhost').length, vhosts.length);
+
+    vhosts.forEach(function(vhost){
+      ok( find('.vhost .virtual-domain:contains(' + vhost.virtual_domain + ')').length,
+          'has virtual domain ' + vhost.virtual_domain );
+
+      ok( find('.vhost .external-host:contains(' + vhost.external_host + ')').length,
+          'has external host ' + vhost.external_host );
+    });
+  });
+});
diff --git a/tests/unit/models/database-test.js b/tests/unit/models/database-test.js
index 7f01ef7d..a889809a 100644
--- a/tests/unit/models/database-test.js
+++ b/tests/unit/models/database-test.js
@@ -16,6 +16,7 @@ moduleForModel('database', 'Database', {
     'model:permission',
     'model:role',
     'model:organization',
+    'model:vhost',
 
     'adapter:database',
     'serializer:application'
diff --git a/tests/unit/models/stack-test.js b/tests/unit/models/stack-test.js
index 061656a4..c7b37b9f 100644
--- a/tests/unit/models/stack-test.js
+++ b/tests/unit/models/stack-test.js
@@ -15,6 +15,7 @@ moduleForModel('stack', 'Stack', {
     'model:permission',
     'model:role',
     'model:organization',
+    'model:vhost',
 
     'adapter:application',
     'serializer:application'
diff --git a/tests/unit/utils/can-test.js b/tests/unit/utils/can-test.js
index 250923f9..0dcbd3d2 100644
--- a/tests/unit/utils/can-test.js
+++ b/tests/unit/utils/can-test.js
@@ -21,6 +21,8 @@ moduleForModel('user', 'Utils - #can', {
     'model:stack',
     'model:permission',
     'model:organization',
+    'model:vhost',
+
     'adapter:application',
     'serializer:application'
   ],