diff --git a/ui/core/app/router.js b/ui/core/app/router.js
index 1cd721ad3..76af92941 100644
--- a/ui/core/app/router.js
+++ b/ui/core/app/router.js
@@ -13,6 +13,7 @@ Router.map(function () {
         this.route('project', { path: ':project_id' }, function() {
           this.route('host-catalogs', function() {
             this.route('host-catalog', { path: ':host_catalog_id' }, function() {});
+            this.route('new');
           });
         });
         this.route('new');
diff --git a/ui/core/app/routes/orgs/org/projects/project/host-catalogs/new.js b/ui/core/app/routes/orgs/org/projects/project/host-catalogs/new.js
new file mode 100644
index 000000000..a2f4e2bc6
--- /dev/null
+++ b/ui/core/app/routes/orgs/org/projects/project/host-catalogs/new.js
@@ -0,0 +1,50 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+
+export default class OrgsOrgProjectsProjectHostCatalogsNewRoute extends Route {
+  // =services
+
+  @service notify;
+
+  // =methods
+
+  /**
+   * Returns a new unsaved host catalog.
+   * @return {Promise{HostCatalogModel}}
+   */
+  model() {
+    return this.store.createRecord('hostCatalog');
+  }
+
+  // =actions
+
+  /**
+   * Rollback changes on host catalog (which destroys unsaved instances)
+   * and redirects to host catalogs index.
+   * @param {HostCatalogModel} hostCatalog
+   */
+  @action
+  cancel(hostCatalog) {
+    hostCatalog.rollbackAttributes();
+    this.transitionTo('orgs.org.projects.project.host-catalogs');
+  }
+
+  /**
+   * Handle save host catalog.
+   * @param {HostCatalogModel} hostCatalog
+   * @param {Event} e
+   */
+  @action
+  async save(hostCatalog) {
+    try {
+      await hostCatalog.save();
+      this.transitionTo('orgs.org.projects.project.host-catalogs.host-catalog', hostCatalog);
+      // TODO: replace with translated strings
+      this.notify.success('Host catalog created.');
+    } catch (error) {
+      // TODO: replace with translated strings
+      this.notify.error(error.message, { closeAfter: null });
+    }
+  }
+}
diff --git a/ui/core/app/templates/orgs/org/projects/project/host-catalogs/index.hbs b/ui/core/app/templates/orgs/org/projects/project/host-catalogs/index.hbs
index c75beadae..490cb5b65 100644
--- a/ui/core/app/templates/orgs/org/projects/project/host-catalogs/index.hbs
+++ b/ui/core/app/templates/orgs/org/projects/project/host-catalogs/index.hbs
@@ -1,18 +1,30 @@
-<div class="projects-overview">
+<Rose::Layout::Page as |page|>
 
-  <h2>{{t "resources.host-catalogs"}}</h2>
+  <page.header>
+    <h2>{{t "resources.host-catalogs"}}</h2>
+  </page.header>
 
-  <ul>
-    {{#each @model as |hostCatalog|}}
-      <li>
-        <LinkTo
-          @route="orgs.org.projects.project.host-catalogs.host-catalog"
-          @model={{hostCatalog}}
-        >
-          {{hostCatalog.name}}
-        </LinkTo>
-      </li>
-    {{/each}}
-  </ul>
+  <page.actions>
+    <LinkTo
+      @route="orgs.org.projects.project.host-catalogs.new"
+    >
+      {{t 'titles.new'}}
+    </LinkTo>
+  </page.actions>
 
-</div>
+  <page.body>
+    <ul>
+      {{#each @model as |hostCatalog|}}
+        <li>
+          <LinkTo
+            @route="orgs.org.projects.project.host-catalogs.host-catalog"
+            @model={{hostCatalog}}
+          >
+            {{hostCatalog.name}}
+          </LinkTo>
+        </li>
+      {{/each}}
+    </ul>
+  </page.body>
+
+</Rose::Layout::Page>
diff --git a/ui/core/app/templates/orgs/org/projects/project/host-catalogs/new.hbs b/ui/core/app/templates/orgs/org/projects/project/host-catalogs/new.hbs
new file mode 100644
index 000000000..2f5cdf96a
--- /dev/null
+++ b/ui/core/app/templates/orgs/org/projects/project/host-catalogs/new.hbs
@@ -0,0 +1,14 @@
+<Rose::Layout::Page as |page|>
+
+  <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>
diff --git a/ui/core/tests/integration/components/form/host-catalog-test.js b/ui/core/tests/integration/components/form/host-catalog-test.js
index b48cd5859..0e3b51865 100644
--- a/ui/core/tests/integration/components/form/host-catalog-test.js
+++ b/ui/core/tests/integration/components/form/host-catalog-test.js
@@ -1,13 +1,23 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-//import { render } from '@ember/test-helpers';
-//import { hbs } from 'ember-cli-htmlbars';
+import { render, find } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
 
 module('Integration | Component | form/host-catalog', function(hooks) {
   setupRenderingTest(hooks);
 
   test('it renders', async function(assert) {
-    assert.expect(0);
-    // TODO
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+    this.submit = () => {};
+    this.cancel = () => {};
+
+    await render(hbs`
+      <Form::HostCatalog
+        @submit={{this.submit}}
+        @cancel={{this.cancel}}
+      />`);
+
+    assert.ok(find('form'));
   });
 });
diff --git a/ui/core/tests/unit/routes/orgs/org/projects/project/host-catalogs/new-test.js b/ui/core/tests/unit/routes/orgs/org/projects/project/host-catalogs/new-test.js
new file mode 100644
index 000000000..2529656b7
--- /dev/null
+++ b/ui/core/tests/unit/routes/orgs/org/projects/project/host-catalogs/new-test.js
@@ -0,0 +1,11 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Route | orgs/org/projects/project/host-catalogs/new', function(hooks) {
+  setupTest(hooks);
+
+  test('it exists', function(assert) {
+    let route = this.owner.lookup('route:orgs/org/projects/project/host-catalogs/new');
+    assert.ok(route);
+  });
+});