diff --git a/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/new.js b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/new.js
index 9e076cd1d..923eb7ac3 100644
--- a/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/new.js
+++ b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/new.js
@@ -1,4 +1,16 @@
 import Route from '@ember/routing/route';
 
 export default class ScopesScopeProjectsProjectHostCatalogsNewRoute extends Route {
+
+  // =methods
+
+  /**
+   * Creates a new unsaved host catalog belonging to the current project scope.
+   * @return {HostCatalogModel}
+   */
+  model() {
+    const scopeID = this.modelFor('scopes.scope.projects.project').id;
+    return this.store.createRecord('host-catalog', { scopeID });
+  }
+
 }
diff --git a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/new.hbs b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/new.hbs
index e2147cab0..0d969f874 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/new.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/new.hbs
@@ -1 +1,21 @@
-{{outlet}}
\ No newline at end of file
+{{title (t 'titles.new')}}
+
+<Rose::Layout::Page as |page|>
+
+  <page.breadcrumbs>
+    <BreadCrumbs />
+  </page.breadcrumbs>
+
+  <page.header>
+    <h2>{{t "titles.new"}}</h2>
+  </page.header>
+
+  <page.body>
+    <Form::HostCatalog
+      @model={{@model}}
+      @submit={{route-action "save" @model}}
+      @cancel={{route-action "cancel" @model}}
+    />
+  </page.body>
+
+</Rose::Layout::Page>