diff --git a/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog.js b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog.js
index d25608633..00d0b148d 100644
--- a/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog.js
+++ b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog.js
@@ -17,4 +17,25 @@ export default class ScopesScopeProjectsProjectHostCatalogsHostCatalogRoute exte
     });
   }
 
+    /**
+   * Renders the host-catalog specific templates for header and navigation page sections.
+   * @override
+   * @param {object} controller
+   * @param {object} model
+   */
+  renderTemplate(controller, model) {
+    this.render('scopes/scope/projects/project/host-catalogs/host-catalog');
+
+    this.render('scopes/scope/projects/project/host-catalogs/host-catalog/-header', {
+      into: 'scopes/scope/projects/project/host-catalogs/host-catalog',
+      outlet: 'header',
+      model: model
+    });
+
+    this.render('scopes/scope/projects/project/host-catalogs/host-catalog/-navigation', {
+      into: 'scopes/scope/projects/project/host-catalogs/host-catalog',
+      outlet: 'navigation',
+      model: model
+    });
+  }
 }
diff --git a/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set.js b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set.js
index 75f1f1fed..4025a17bd 100644
--- a/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set.js
+++ b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set.js
@@ -16,4 +16,28 @@ export default class ScopesScopeProjectsProjectHostCatalogsHostCatalogHostSetsHo
       adapterOptions: { scopeID, hostCatalogID }
     });
   }
+
+  /**
+   * Renders the host-set specific templates for header and navigation page sections.
+   * @override
+   * @param {object} controller
+   * @param {object} model
+   */
+  renderTemplate(controller, model) {
+    this.render('scopes/scope/projects/project/host-catalogs/host-catalog/host-sets');
+
+    this.render('scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/-header', {
+      into: 'scopes/scope/projects/project/host-catalogs/host-catalog',
+      outlet: 'header',
+      model: model
+    });
+
+    this.render('scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/-navigation', {
+      into: 'scopes/scope/projects/project/host-catalogs/host-catalog',
+      outlet: 'navigation',
+      model: model
+    });
+
+    super.renderTemplate(...arguments);
+  }
 }
diff --git a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog.hbs b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog.hbs
index 529b61a34..e9bdb8c81 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog.hbs
@@ -5,18 +5,15 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>{{t "resources.host-catalog"}}</h2>
+    {{outlet "header"}}
   </page.header>
 
+  <page.actions>
+    {{outlet "actions"}}
+  </page.actions>
+
   <page.navigation>
-    <Rose::Nav::Tabs as |nav|>
-      <nav.link @route='scopes.scope.projects.project.host-catalogs.host-catalog.index'>
-        {{t 'titles.details'}}
-      </nav.link>
-      <nav.link @route='scopes.scope.projects.project.host-catalogs.host-catalog.host-sets'>
-        {{t 'titles.host-sets'}}
-      </nav.link>
-    </Rose::Nav::Tabs>
+    {{outlet "navigation"}}
   </page.navigation>
 
   <page.body>
diff --git a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/-header.hbs b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/-header.hbs
new file mode 100644
index 000000000..82af78ffe
--- /dev/null
+++ b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/-header.hbs
@@ -0,0 +1 @@
+<h2>{{t "resources.host-catalog"}}</h2>
diff --git a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/-navigation.hbs b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/-navigation.hbs
new file mode 100644
index 000000000..030326509
--- /dev/null
+++ b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/-navigation.hbs
@@ -0,0 +1,8 @@
+<Rose::Nav::Tabs as |nav|>
+  <nav.link @route='scopes.scope.projects.project.host-catalogs.host-catalog.index'>
+    {{t 'titles.details'}}
+  </nav.link>
+  <nav.link @route='scopes.scope.projects.project.host-catalogs.host-catalog.host-sets'>
+    {{t 'titles.host-sets'}}
+  </nav.link>
+</Rose::Nav::Tabs>
diff --git a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/-header.hbs b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/-header.hbs
new file mode 100644
index 000000000..ae86a8707
--- /dev/null
+++ b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/-header.hbs
@@ -0,0 +1 @@
+<h2>{{t "resources.host-set"}}</h2>
\ No newline at end of file
diff --git a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/-navigation.hbs b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/-navigation.hbs
new file mode 100644
index 000000000..62f603a0b
--- /dev/null
+++ b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/-navigation.hbs
@@ -0,0 +1,5 @@
+<Rose::Nav::Tabs as |nav|>
+  <nav.link @route='scopes.scope.projects.project.host-catalogs.host-catalog.host-sets.host-set.index'>
+    {{t 'titles.details'}}
+  </nav.link>
+</Rose::Nav::Tabs>
\ No newline at end of file
diff --git a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set/index.hbs b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set/index.hbs
index 64646aa20..4ea8678d7 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set/index.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set/index.hbs
@@ -1,23 +1,13 @@
-<Rose::Layout::Page as |page|>
-
-  <page.header>
-    <h2>{{t "resources.host-set"}}</h2>
-  </page.header>
-
-  <page.body>
-    <Form::HostSet
-      @model={{@model}}
-      @submit={{route-action "save" @model}}
-      @cancel={{route-action "cancel" @model}}
-    />
-    <Rose::Separator />
-    <Rose::Button
-      @style="warning"
-      @disabled={{@model.canSave}}
-      {{on "click" (route-action "delete" @model)}}
-    >
-      {{t 'actions.delete'}}
-    </Rose::Button>
-  </page.body>
-
-</Rose::Layout::Page>
+<Form::HostSet
+  @model={{@model}}
+  @submit={{route-action "save" @model}}
+  @cancel={{route-action "cancel" @model}}
+/>
+<Rose::Separator />
+<Rose::Button
+  @style="warning"
+  @disabled={{@model.canSave}}
+  {{on "click" (route-action "delete" @model)}}
+>
+  {{t 'actions.delete'}}
+</Rose::Button>
diff --git a/ui/core/tests/integration/components/form/host-set-test.js b/ui/core/tests/integration/components/form/host-set-test.js
index 17fb6f818..9797376cc 100644
--- a/ui/core/tests/integration/components/form/host-set-test.js
+++ b/ui/core/tests/integration/components/form/host-set-test.js
@@ -20,5 +20,4 @@ module('Integration | Component | form/host-set', function(hooks) {
 
     assert.ok(find('form'));
   });
-  });
 });