diff --git a/ui/core/app/routes/scopes/scope/projects/project/targets/target/host-sets.js b/ui/core/app/routes/scopes/scope/projects/project/targets/target/host-sets.js
index 1c63e3aaf..0ccd3290b 100644
--- a/ui/core/app/routes/scopes/scope/projects/project/targets/target/host-sets.js
+++ b/ui/core/app/routes/scopes/scope/projects/project/targets/target/host-sets.js
@@ -5,22 +5,41 @@ export default class ScopesScopeProjectsProjectTargetsTargetHostSetsRoute extend
   // =methods
 
   /**
-   *
-   * Loads all host-sets under the current target and it's parent scope.
-   * @return {Promise{[HostSetModel]}}
+   * Loads all host-sets and associated host-catalogs under the current target
+   * and it's parent scope.
+   * @return {Promise{[HostSetModel, HostCatalogModel]}}
    */
-  async model() {
+  beforeModel() {
+    const hostSets = [], hostCatalogs = [];
     const target = this.modelFor('scopes.scope.projects.project.targets.target');
     const scopeID = this.modelFor('scopes.scope.projects.project').id;
 
-    const hostSets = target.host_sets.map((hostSet) =>
-      this.store.findRecord(
-        'host-set',
-        hostSet.host_set_id,
-        { adapterOptions : { scopeID, hostCatalogID: hostSet.host_catalog_id } }
-      )
-    );
+    target.host_sets.map((hostSet) => {
+      hostSets.push(
+        this.store.findRecord(
+          'host-set',
+          hostSet.host_set_id,
+          { adapterOptions : { scopeID, hostCatalogID: hostSet.host_catalog_id } }
+        )
+      );
 
-    return all(hostSets);
+      hostCatalogs.push(
+        this.store.findRecord(
+          'host-catalog',
+          hostSet.host_catalog_id,
+          { adapterOptions : { scopeID } }
+        )
+      );
+    });
+
+    return all(hostSets.concat(hostCatalogs));
+  }
+
+  /**
+   * Load current target and it's associated host-sets and host-catalogs
+   * @return {Promise{[TargetModel]}}
+   */
+  model() {
+    return this.modelFor('scopes.scope.projects.project.targets.target');
   }
 }
diff --git a/ui/core/app/templates/scopes/scope/projects/project/targets/target/host-sets.hbs b/ui/core/app/templates/scopes/scope/projects/project/targets/target/host-sets.hbs
index 8f04eb6e0..9983698ea 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/targets/target/host-sets.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/targets/target/host-sets.hbs
@@ -11,17 +11,17 @@
       </header.row>
     </table.header>
     <table.body as |body|>
-      {{#each @model as |hostSet|}}
+      {{#each @model.hostSets as |hostSet|}}
         <body.row as |row|>
           <row.headerCell>
-            {{hostSet.displayName}}
-            <p>{{hostSet.description}}</p>
+            {{hostSet.model.displayName}}
+            <p>{{hostSet.model.description}}</p>
           </row.headerCell>
           <row.cell>
-            <Rose::Badge @style="outline">{{hostSet.type}}</Rose::Badge>
+            <Rose::Badge @style="outline">{{hostSet.model.type}}</Rose::Badge>
           </row.cell>
           <row.cell>
-            <code>{{hostSet.id}}</code>
+            <code>{{hostSet.model.id}}</code>
           </row.cell>
         </body.row>
       {{/each}}