diff --git a/ui/core/app/components/form/host-set/index.hbs b/ui/core/app/components/form/host-set/index.hbs
new file mode 100644
index 000000000..45adc26d0
--- /dev/null
+++ b/ui/core/app/components/form/host-set/index.hbs
@@ -0,0 +1,49 @@
+<Rose::Form
+  @onSubmit={{@submit}}
+  @cancel={{@cancel}}
+  @disabled={{@model.isSaving}}
+  @error={{@model.errors.base}}
+  as |form|
+>
+
+  <form.input
+    @name="name"
+    @type="name"
+    @value={{@model.name}}
+    @label={{t "form.label.name"}}
+    @error={{@model.errors.name}}
+    readonly={{false}}
+  as |field|>
+    {{#if @model.errors.name}}
+      <field.errors as |errors|>
+        {{#each @model.errors.name as |error|}}
+          <errors.message>{{error.message}}</errors.message>
+        {{/each}}
+      </field.errors>
+    {{/if}}
+  </form.input>
+
+  <form.textarea
+    @name="description"
+    @type="description"
+    @value={{@model.description}}
+    @label={{t "form.label.description"}}
+    @error={{@model.errors.description}}
+    disabled={{@model.isSaving}}
+    readonly={{false}}
+  as |field|>
+    {{#if @model.errors.description}}
+      <field.errors as |errors|>
+        {{#each @model.errors.description as |error|}}
+          <errors.message>{{error.message}}</errors.message>
+        {{/each}}
+      </field.errors>
+    {{/if}}
+  </form.textarea>
+
+  <form.actions
+    @disabled={{if @model.cannotSave @model.cannotSave}}
+    @submitText={{t "actions.save"}}
+    @cancelText={{t "actions.cancel"}} />
+
+</Rose::Form>
diff --git a/ui/core/app/router.js b/ui/core/app/router.js
index 91a8aceca..0c6640345 100644
--- a/ui/core/app/router.js
+++ b/ui/core/app/router.js
@@ -32,7 +32,9 @@ Router.map(function () {
           this.route('host-catalogs', function() {
             this.route('new');
             this.route('host-catalog', { path: ':host_catalog_id' }, function() {
-              this.route('host-sets');
+              this.route('host-sets', function() {
+                this.route('host-set', { path: ':host_set_id' }, function() {});
+              });
             });
           });
         });
diff --git a/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets.js b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets.js
index c4440322e..ae4b9d2a5 100644
--- a/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets.js
+++ b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets.js
@@ -1,6 +1,15 @@
 import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
 
 export default class ScopesScopeProjectsProjectHostCatalogsHostCatalogHostSetsRoute extends Route {
+  // =services
+
+  @service intl;
+  @service notify;
+
+  // =methods
+
   /**
    * Loads all host-sets under the current scope and host catalog.
    * @return {Promise{[HostSetModel]}}
@@ -10,4 +19,51 @@ export default class ScopesScopeProjectsProjectHostCatalogsHostCatalogHostSetsRo
     const hostCatalogID = this.modelFor('scopes.scope.projects.project.host-catalogs.host-catalog').id;
     return this.store.findAll('host-set', { adapterOptions: { scopeID, hostCatalogID } });
   }
+
+
+  // =actions
+
+  /**
+   * Rollback changes on a host set.
+   * @param {HostSetModel} hostSet
+   */
+  @action
+  cancel(hostSet) {
+    hostSet.rollbackAttributes();
+  }
+
+  /**
+   * Handle save of a host set.
+   * @param {HostSetModel} hostSet
+   * @param {Event} e
+   */
+  @action
+  async save(hostSet) {
+    try {
+      await hostSet.save();
+      this.refresh();
+      this.notify.success(this.intl.t('notify.save-success'));
+      this.transitionTo('scopes.scope.projects.project.host-catalogs.host-catalog.host-sets.host-set', hostSet);
+    } catch (error) {
+      // TODO: replace with translated strings
+      this.notify.error(error.message, { closeAfter: null });
+    }
+  }
+
+  /**
+   * Delete host set in current scope and redirect to index.
+   * @param {HostSetModel} hostSet
+   */
+  @action
+  async delete(hostSet) {
+    try {
+      await hostSet.destroyRecord();
+      this.refresh();
+      this.notify.success(this.intl.t('notify.delete-success'));
+      this.transitionTo('scopes.scope.projects.project.host-catalogs.host-catalog.host-sets');
+    } catch (error) {
+      // TODO: replace with translated strings
+      this.notify.error(error.message, { closeAfter: null });
+    }
+  }
 }
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
new file mode 100644
index 000000000..75f1f1fed
--- /dev/null
+++ b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set.js
@@ -0,0 +1,19 @@
+import Route from '@ember/routing/route';
+
+export default class ScopesScopeProjectsProjectHostCatalogsHostCatalogHostSetsHostSetRoute extends Route {
+  // =methods
+
+  /**
+   * Load a host set in current scope and host-catalog.
+   * @param {object} params
+   * @param {string} params.host_set_id
+   * @return {HostSetModel}
+   */
+  async model({ host_set_id }) {
+    const { id: scopeID } = this.modelFor('scopes.scope.projects.project');
+    const hostCatalogID = this.modelFor('scopes.scope.projects.project.host-catalogs.host-catalog').id;
+    return this.store.findRecord('host-set', host_set_id, {
+      adapterOptions: { scopeID, hostCatalogID }
+    });
+  }
+}
diff --git a/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set/index.js b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set/index.js
new file mode 100644
index 000000000..261452404
--- /dev/null
+++ b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set/index.js
@@ -0,0 +1,4 @@
+import Route from '@ember/routing/route';
+
+export default class ScopesScopeProjectsProjectHostCatalogsHostCatalogHostSetsHostSetIndexRoute extends Route {
+}
diff --git a/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/index.js b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/index.js
new file mode 100644
index 000000000..dd0a311d8
--- /dev/null
+++ b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/index.js
@@ -0,0 +1,4 @@
+import Route from '@ember/routing/route';
+
+export default class ScopesScopeProjectsProjectHostCatalogsHostCatalogHostSetsIndexRoute extends Route {
+}
diff --git a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets.hbs b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets.hbs
index 300abe57b..49966461b 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets.hbs
@@ -1,25 +1,3 @@
-<Rose::Table as |table|>
-  <table.header as |header|>
-    <header.row as |row|>
-      <row.cell>{{t "form.label.name"}}</row.cell>
-      <row.cell>{{t "form.label.type"}}</row.cell>
-      <row.cell>{{t "form.label.id"}}</row.cell>
-    </header.row>
-  </table.header>
-  <table.body as |body|>
-    {{#each @model as |hostSet|}}
-      <body.row as |row|>
-        <row.cell>
-          {{hostSet.displayName}}
-          <p>{{hostSet.description}}</p>
-        </row.cell>
-        <row.cell>
-          <Rose::Badge @style="outline">{{hostSet.type}}</Rose::Badge>
-        </row.cell>
-        <row.cell>
-          <code>{{hostSet.id}}</code>
-        </row.cell>
-      </body.row>
-    {{/each}}
-  </table.body>
-</Rose::Table>
\ No newline at end of file
+{{title (t "resources.host-sets")}}
+
+{{outlet}}
\ 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.hbs b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set.hbs
new file mode 100644
index 000000000..e2147cab0
--- /dev/null
+++ b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set.hbs
@@ -0,0 +1 @@
+{{outlet}}
\ 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
new file mode 100644
index 000000000..64646aa20
--- /dev/null
+++ b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set/index.hbs
@@ -0,0 +1,23 @@
+<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>
diff --git a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/index.hbs b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/index.hbs
new file mode 100644
index 000000000..d2cb5be5d
--- /dev/null
+++ b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/index.hbs
@@ -0,0 +1,30 @@
+<Rose::Table as |table|>
+  <table.header as |header|>
+    <header.row as |row|>
+      <row.cell>{{t "form.label.name"}}</row.cell>
+      <row.cell>{{t "form.label.type"}}</row.cell>
+      <row.cell>{{t "form.label.id"}}</row.cell>
+    </header.row>
+  </table.header>
+  <table.body as |body|>
+    {{#each @model as |hostSet|}}
+      <body.row as |row|>
+        <row.cell>
+          <LinkTo
+            @route="scopes.scope.projects.project.host-catalogs.host-catalog.host-sets.host-set"
+            @model={{hostSet}}
+          >
+            {{hostSet.displayName}}
+          </LinkTo>
+          <p>{{hostSet.description}}</p>
+        </row.cell>
+        <row.cell>
+          <Rose::Badge @style="outline">{{hostSet.type}}</Rose::Badge>
+        </row.cell>
+        <row.cell>
+          <code>{{hostSet.id}}</code>
+        </row.cell>
+      </body.row>
+    {{/each}}
+  </table.body>
+</Rose::Table>
\ No newline at end of file
diff --git a/ui/core/tests/integration/components/form/host-set-test.js b/ui/core/tests/integration/components/form/host-set-test.js
new file mode 100644
index 000000000..17fb6f818
--- /dev/null
+++ b/ui/core/tests/integration/components/form/host-set-test.js
@@ -0,0 +1,24 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | form/host-set', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    // 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::HostSet
+        @submit={{this.submit}}
+        @cancel={{this.cancel}}
+      />`);
+
+    assert.ok(find('form'));
+  });
+  });
+});
diff --git a/ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set-test.js b/ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set-test.js
new file mode 100644
index 000000000..320e03551
--- /dev/null
+++ b/ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set-test.js
@@ -0,0 +1,11 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Route | scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set', function(hooks) {
+  setupTest(hooks);
+
+  test('it exists', function(assert) {
+    let route = this.owner.lookup('route:scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set');
+    assert.ok(route);
+  });
+});
diff --git a/ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set/index-test.js b/ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set/index-test.js
new file mode 100644
index 000000000..5f0b9420b
--- /dev/null
+++ b/ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set/index-test.js
@@ -0,0 +1,11 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Route | scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set/index', function(hooks) {
+  setupTest(hooks);
+
+  test('it exists', function(assert) {
+    let route = this.owner.lookup('route:scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set/index');
+    assert.ok(route);
+  });
+});
diff --git a/ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/index-test.js b/ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/index-test.js
new file mode 100644
index 000000000..88f8a3f8b
--- /dev/null
+++ b/ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/index-test.js
@@ -0,0 +1,11 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Route | scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/index', function(hooks) {
+  setupTest(hooks);
+
+  test('it exists', function(assert) {
+    let route = this.owner.lookup('route:scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/index');
+    assert.ok(route);
+  });
+});
diff --git a/ui/core/translations/en-us.yaml b/ui/core/translations/en-us.yaml
index 2f2e4df01..0af92ef28 100644
--- a/ui/core/translations/en-us.yaml
+++ b/ui/core/translations/en-us.yaml
@@ -33,6 +33,7 @@ resources:
   host-catalogs: Host Catalogs
   auth-method: Auth Method
   auth-methods: Auth Methods
+  host-set: Host Set
   host-sets: Host Sets
 titles:
   iam: IAM