diff --git a/ui/core/app/controllers/scopes/scope/projects/project/targets/target/add-host-sets.js b/ui/core/app/controllers/scopes/scope/projects/project/targets/target/add-host-sets.js
new file mode 100644
index 000000000..81698e45f
--- /dev/null
+++ b/ui/core/app/controllers/scopes/scope/projects/project/targets/target/add-host-sets.js
@@ -0,0 +1,19 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+
+export default class ScopesScopeProjectsProjectTargetsTargetAddHostSetsController extends Controller {
+
+  // =services
+
+  @service intl;
+
+  // =attributes
+
+  /**
+   * @type {string}
+   */
+  get breadCrumb() {
+    return this.intl.t('actions.add-host-sets');
+  }
+
+}
diff --git a/ui/core/app/routes/scopes/scope/projects/project/targets/target.js b/ui/core/app/routes/scopes/scope/projects/project/targets/target.js
index 8b5cf77ab..c1d1093f8 100644
--- a/ui/core/app/routes/scopes/scope/projects/project/targets/target.js
+++ b/ui/core/app/routes/scopes/scope/projects/project/targets/target.js
@@ -15,4 +15,28 @@ export default class ScopesScopeProjectsProjectTargetsTargetRoute extends Route
     return this.store.findRecord('target', target_id, { adapterOptions: { scopeID } });
   }
 
+  /**
+   * Renders the target-specific templates for header, navigation,
+   * and actions page sections.
+   * @override
+   */
+  renderTemplate() {
+    super.renderTemplate(...arguments);
+
+    this.render('scopes/scope/projects/project/targets/target/-header', {
+      into: 'scopes/scope/projects/project/targets/target',
+      outlet: 'header',
+    });
+
+    this.render('scopes/scope/projects/project/targets/target/-navigation', {
+      into: 'scopes/scope/projects/project/targets/target',
+      outlet: 'navigation',
+    });
+
+    this.render('scopes/scope/projects/project/targets/target/-actions', {
+      into: 'scopes/scope/projects/project/targets/target',
+      outlet: 'actions',
+    });
+  }
+
 }
diff --git a/ui/core/app/routes/scopes/scope/projects/project/targets/target/add-host-sets.js b/ui/core/app/routes/scopes/scope/projects/project/targets/target/add-host-sets.js
index f88851fcc..f58b7ebb7 100644
--- a/ui/core/app/routes/scopes/scope/projects/project/targets/target/add-host-sets.js
+++ b/ui/core/app/routes/scopes/scope/projects/project/targets/target/add-host-sets.js
@@ -42,6 +42,29 @@ export default class ScopesScopeProjectsProjectTargetsTargetAddHostSetsRoute ext
     };
   }
 
+  /**
+   * Renders the add-host-sets-specific header template.
+   * @override
+   */
+  renderTemplate() {
+    super.renderTemplate(...arguments);
+
+    this.render('scopes/scope/projects/project/targets/target/add-host-sets/-header', {
+      into: 'scopes/scope/projects/project/targets/target',
+      outlet: 'header',
+    });
+
+    this.render('-empty', {
+      into: 'scopes/scope/projects/project/targets/target',
+      outlet: 'navigation',
+    });
+
+    this.render('-empty', {
+      into: 'scopes/scope/projects/project/targets/target',
+      outlet: 'actions',
+    });
+  }
+
   // =actions
 
   @action
diff --git a/ui/core/app/templates/scopes/scope/projects/project/targets/target.hbs b/ui/core/app/templates/scopes/scope/projects/project/targets/target.hbs
index a04f2ea32..2a878ff51 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/targets/target.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/targets/target.hbs
@@ -7,33 +7,15 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>{{t "resources.target"}}</h2>
+    {{outlet "header"}}
   </page.header>
 
   <page.navigation>
-    <Rose::Nav::Tabs as |nav|>
-      <nav.link @route='scopes.scope.projects.project.targets.target.index'>
-        {{t 'titles.details'}}
-      </nav.link>
-      <nav.link @route='scopes.scope.projects.project.targets.target.host-sets'>
-        {{t 'titles.host-sets'}}
-      </nav.link>
-    </Rose::Nav::Tabs>
+    {{outlet "navigation"}}
   </page.navigation>
 
   <page.actions>
-    <Rose::Dropdown @text="{{t 'form.label.manage'}}" @dropdownRight={{true}} as |dropdown|>
-      <dropdown.link @route="scopes.scope.projects.project.targets.target.add-host-sets">
-        {{t 'actions.add-host-sets'}}
-      </dropdown.link>
-      <dropdown.button
-        @style="danger"
-        @disabled={{@model.canSave}}
-        {{on "click" (route-action "delete" @model)}}
-      >
-        {{t 'actions.delete-target'}}
-      </dropdown.button>
-    </Rose::Dropdown>
+    {{outlet "actions"}}
   </page.actions>
 
   <page.body>
diff --git a/ui/core/app/templates/scopes/scope/projects/project/targets/target/-actions.hbs b/ui/core/app/templates/scopes/scope/projects/project/targets/target/-actions.hbs
new file mode 100644
index 000000000..a4c8ed5fa
--- /dev/null
+++ b/ui/core/app/templates/scopes/scope/projects/project/targets/target/-actions.hbs
@@ -0,0 +1,12 @@
+<Rose::Dropdown @text="{{t 'form.label.manage'}}" @dropdownRight={{true}} as |dropdown|>
+  <dropdown.link @route="scopes.scope.projects.project.targets.target.add-host-sets">
+    {{t 'actions.add-host-sets'}}
+  </dropdown.link>
+  <dropdown.button
+    @style="danger"
+    @disabled={{@model.canSave}}
+    {{on "click" (route-action "delete" @model)}}
+  >
+    {{t 'actions.delete-target'}}
+  </dropdown.button>
+</Rose::Dropdown>
diff --git a/ui/core/app/templates/scopes/scope/projects/project/targets/target/-header.hbs b/ui/core/app/templates/scopes/scope/projects/project/targets/target/-header.hbs
new file mode 100644
index 000000000..721607f47
--- /dev/null
+++ b/ui/core/app/templates/scopes/scope/projects/project/targets/target/-header.hbs
@@ -0,0 +1 @@
+<h2>{{t "resources.target"}}</h2>
diff --git a/ui/core/app/templates/scopes/scope/projects/project/targets/target/-navigation.hbs b/ui/core/app/templates/scopes/scope/projects/project/targets/target/-navigation.hbs
new file mode 100644
index 000000000..b486f4ca8
--- /dev/null
+++ b/ui/core/app/templates/scopes/scope/projects/project/targets/target/-navigation.hbs
@@ -0,0 +1,8 @@
+<Rose::Nav::Tabs as |nav|>
+  <nav.link @route='scopes.scope.projects.project.targets.target.index'>
+    {{t 'titles.details'}}
+  </nav.link>
+  <nav.link @route='scopes.scope.projects.project.targets.target.host-sets'>
+    {{t 'titles.host-sets'}}
+  </nav.link>
+</Rose::Nav::Tabs>
diff --git a/ui/core/app/templates/scopes/scope/projects/project/targets/target/add-host-sets/-header.hbs b/ui/core/app/templates/scopes/scope/projects/project/targets/target/add-host-sets/-header.hbs
new file mode 100644
index 000000000..f29bc39c7
--- /dev/null
+++ b/ui/core/app/templates/scopes/scope/projects/project/targets/target/add-host-sets/-header.hbs
@@ -0,0 +1 @@
+<h2>{{t "actions.add-host-sets"}}</h2>
diff --git a/ui/core/tests/unit/controllers/scopes/scope/projects/project/targets/target/add-host-sets-test.js b/ui/core/tests/unit/controllers/scopes/scope/projects/project/targets/target/add-host-sets-test.js
new file mode 100644
index 000000000..5d58f8870
--- /dev/null
+++ b/ui/core/tests/unit/controllers/scopes/scope/projects/project/targets/target/add-host-sets-test.js
@@ -0,0 +1,12 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Controller | scopes/scope/projects/project/targets/target/add-host-sets', function(hooks) {
+  setupTest(hooks);
+
+  // Replace this with your real tests.
+  test('it exists', function(assert) {
+    let controller = this.owner.lookup('controller:scopes/scope/projects/project/targets/target/add-host-sets');
+    assert.ok(controller);
+  });
+});