diff --git a/addons/core/translations/resources/en-us.yaml b/addons/core/translations/resources/en-us.yaml
index 4ac6c4023..d7a3a1db3 100644
--- a/addons/core/translations/resources/en-us.yaml
+++ b/addons/core/translations/resources/en-us.yaml
@@ -78,6 +78,7 @@ host-catalog:
   title: Host Catalog
   title_plural: Host Catalogs
   description: A host catalog is a collection of hosts and host sets.
+  type: Type
   messages:
     welcome:
       title: Welcome to Host Catalogs
@@ -88,6 +89,14 @@ host-catalog:
     unknown: Unknown
     aws: AWS
     azure: Azure
+    dynamic: Dynamic
+  form:
+    provider-details: Provider Details 
+    types:
+      static: 
+        help: Provide a list of hosts and host sets with static addresses
+      dynamic: 
+        help: Automate discovery of target hosts and services on Azure or AWS
 host-set:
   title: Host Set
   title_plural: Host Sets
diff --git a/ui/admin/app/components/form/host-catalog/aws/index.hbs b/ui/admin/app/components/form/host-catalog/aws/index.hbs
new file mode 100644
index 000000000..208468752
--- /dev/null
+++ b/ui/admin/app/components/form/host-catalog/aws/index.hbs
@@ -0,0 +1,129 @@
+<Rose::Form
+  @onSubmit={{@submit}}
+  @cancel={{@cancel}}
+  @disabled={{@model.isSaving}}
+  as |form|
+>
+  <form.input
+    @name='name'
+    @type='name'
+    @value={{@model.name}}
+    @label={{t 'form.name.label'}}
+    @helperText={{t 'form.name.help'}}
+    @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.description.label'}}
+    @helperText={{t 'form.description.help'}}
+    @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.fieldset>
+    <:title>{{t 'form.type.label'}}</:title>
+    <:body>
+      <form.radioGroup
+        @name='aws-types'
+        @changed={{@toggleType}}
+        @selectedValue='dynamic'
+        as |radioGroup|
+      >
+        <radioGroup.card
+          @label={{t 'resources.host-catalog.types.static'}}
+          @value='static'
+          @helperText={{t 'resources.host-catalog.form.types.static.help'}}
+          @layout='wide'
+        />
+        <radioGroup.card
+          @label={{t 'resources.host-catalog.types.dynamic'}}
+          @value='dynamic'
+          @helperText={{t 'resources.host-catalog.form.types.dynamic.help'}}
+          @layout='wide'
+        />
+      </form.radioGroup>
+    </:body>
+  </form.fieldset>
+
+  {{#if @showDynamicPlugins}}
+    <form.fieldset>
+      <:title>{{t 'resources.host-catalog.form.provider-details'}}</:title>
+      <:body>
+        <form.radioGroup
+          @name='aws-plugins'
+          @selectedValue={{@model.compositeType}}
+          @changed={{route-action 'changeType'}}
+          as |radioGroup|
+        >
+          <radioGroup.card
+            @label='AWS'
+            @value='aws'
+            @helperText={{t 'resources.host-catalog.form.types.static.help'}}
+            @layout='tile'
+          />
+          <radioGroup.card
+            @label='Azure'
+            @value='azure'
+            @helperText={{t 'resources.host-catalog.form.types.dynamic.help'}}
+            @layout='tile'
+          />
+        </form.radioGroup>
+      </:body>
+    </form.fieldset>
+  {{/if}}
+
+  <form.input
+    @name='Region'
+    @type='region'
+    @value='region'
+    @label='Region'
+    readonly={{false}}
+  />
+
+  <form.input
+    @name='accesskey'
+    @type='accesskey'
+    @value='accesskey'
+    @label='Access key ID'
+    readonly={{false}}
+  />
+
+  <form.input
+    @name='secretaccesskey'
+    @type='secretaccesskey'
+    @value='secretaccesskey'
+    @label='Secret Access Key'
+    readonly={{false}}
+  />
+
+  {{#if (can 'save model' @model)}}
+    <form.actions
+      @disabled={{if @model.cannotSave @model.cannotSave}}
+      @enableEditText={{t 'actions.edit-form'}}
+      @submitText={{t 'actions.save'}}
+      @cancelText={{t 'actions.cancel'}}
+    />
+  {{/if}}
+</Rose::Form>
\ No newline at end of file
diff --git a/ui/admin/app/components/form/host-catalog/azure/index.hbs b/ui/admin/app/components/form/host-catalog/azure/index.hbs
new file mode 100644
index 000000000..208468752
--- /dev/null
+++ b/ui/admin/app/components/form/host-catalog/azure/index.hbs
@@ -0,0 +1,129 @@
+<Rose::Form
+  @onSubmit={{@submit}}
+  @cancel={{@cancel}}
+  @disabled={{@model.isSaving}}
+  as |form|
+>
+  <form.input
+    @name='name'
+    @type='name'
+    @value={{@model.name}}
+    @label={{t 'form.name.label'}}
+    @helperText={{t 'form.name.help'}}
+    @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.description.label'}}
+    @helperText={{t 'form.description.help'}}
+    @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.fieldset>
+    <:title>{{t 'form.type.label'}}</:title>
+    <:body>
+      <form.radioGroup
+        @name='aws-types'
+        @changed={{@toggleType}}
+        @selectedValue='dynamic'
+        as |radioGroup|
+      >
+        <radioGroup.card
+          @label={{t 'resources.host-catalog.types.static'}}
+          @value='static'
+          @helperText={{t 'resources.host-catalog.form.types.static.help'}}
+          @layout='wide'
+        />
+        <radioGroup.card
+          @label={{t 'resources.host-catalog.types.dynamic'}}
+          @value='dynamic'
+          @helperText={{t 'resources.host-catalog.form.types.dynamic.help'}}
+          @layout='wide'
+        />
+      </form.radioGroup>
+    </:body>
+  </form.fieldset>
+
+  {{#if @showDynamicPlugins}}
+    <form.fieldset>
+      <:title>{{t 'resources.host-catalog.form.provider-details'}}</:title>
+      <:body>
+        <form.radioGroup
+          @name='aws-plugins'
+          @selectedValue={{@model.compositeType}}
+          @changed={{route-action 'changeType'}}
+          as |radioGroup|
+        >
+          <radioGroup.card
+            @label='AWS'
+            @value='aws'
+            @helperText={{t 'resources.host-catalog.form.types.static.help'}}
+            @layout='tile'
+          />
+          <radioGroup.card
+            @label='Azure'
+            @value='azure'
+            @helperText={{t 'resources.host-catalog.form.types.dynamic.help'}}
+            @layout='tile'
+          />
+        </form.radioGroup>
+      </:body>
+    </form.fieldset>
+  {{/if}}
+
+  <form.input
+    @name='Region'
+    @type='region'
+    @value='region'
+    @label='Region'
+    readonly={{false}}
+  />
+
+  <form.input
+    @name='accesskey'
+    @type='accesskey'
+    @value='accesskey'
+    @label='Access key ID'
+    readonly={{false}}
+  />
+
+  <form.input
+    @name='secretaccesskey'
+    @type='secretaccesskey'
+    @value='secretaccesskey'
+    @label='Secret Access Key'
+    readonly={{false}}
+  />
+
+  {{#if (can 'save model' @model)}}
+    <form.actions
+      @disabled={{if @model.cannotSave @model.cannotSave}}
+      @enableEditText={{t 'actions.edit-form'}}
+      @submitText={{t 'actions.save'}}
+      @cancelText={{t 'actions.cancel'}}
+    />
+  {{/if}}
+</Rose::Form>
\ No newline at end of file
diff --git a/ui/admin/app/components/form/host-catalog/index.hbs b/ui/admin/app/components/form/host-catalog/index.hbs
index 2df4c07d9..d41b3749b 100644
--- a/ui/admin/app/components/form/host-catalog/index.hbs
+++ b/ui/admin/app/components/form/host-catalog/index.hbs
@@ -1,70 +1,24 @@
-<Rose::Form
-  @onSubmit={{@submit}}
-  @cancel={{@cancel}}
-  @disabled={{@model.isSaving}}
-  @error={{@model.errors.base}}
-  @showEditToggle={{if @model.isNew false true}}
-  as |form|
->
-
-  <form.input
-    @name='name'
-    @type='name'
-    @value={{@model.name}}
-    @label={{t 'form.name.label'}}
-    @helperText={{t 'form.name.help'}}
-    @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.description.label'}}
-    @helperText={{t 'form.description.help'}}
-    @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>
-
-  <p>Place Radio Button Group Here</p>
-
-  {{#if @model.isNew}}
-    {{#if @model.type}}
-      {{component
-        (concat 'form/host-catalog/' @model.type)
-        model=@model
-        submit=@submit
-        cancel=@cancel
-      }}
-    {{/if}}
+{{#if @model.isNew}}
+  <div>{{@model.type}} {{@model.compositeType}}</div>
+  {{#if @model.isStatic}}
+    {{component
+      (concat 'form/host-catalog/' @model.compositeType)
+      model=@model
+      submit=@submit
+      cancel=@cancel
+      toggleType=this.toggleType
+      showDynamicPlugins=this.showDynamicPlugins
+    }}
   {{/if}}
 
-  {{#if (can 'save model' @model)}}
-    <form.actions
-      @disabled={{if @model.cannotSave @model.cannotSave}}
-      @enableEditText={{t 'actions.edit-form'}}
-      @submitText={{t 'actions.save'}}
-      @cancelText={{t 'actions.cancel'}}
-    />
+  {{#if this.showDynamicPlugins}}
+    {{component
+      (concat 'form/host-catalog/' @model.compositeType)
+      model=@model
+      submit=@submit
+      cancel=@cancel
+      toggleType=this.toggleType
+      showDynamicPlugins=this.showDynamicPlugins
+    }}
   {{/if}}
-</Rose::Form>
\ No newline at end of file
+{{/if}}
\ No newline at end of file
diff --git a/ui/admin/app/components/form/host-catalog/index.js b/ui/admin/app/components/form/host-catalog/index.js
new file mode 100644
index 000000000..ed49133db
--- /dev/null
+++ b/ui/admin/app/components/form/host-catalog/index.js
@@ -0,0 +1,29 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+export default class FormHostCatalogIndexComponent extends Component {
+  // =properties
+  /**
+  /**
+   */
+  @tracked showDynamicPlugins = false;
+  // =actions
+
+  @action
+  toggleType(type) {
+    this.renderDynamicPlugins(type);
+  }
+  //show dynamic type radio cards -> aws and azure if the type is dynamic
+  //call route action to update the query and rerender the model if static is selected
+  renderDynamicPlugins(type) {
+    if (type === 'dynamic') {
+      this.showDynamicPlugins = true;
+    } else {
+      this.showDynamicPlugins = false;
+      //CHECK:how to call the action to update query param
+      this.args.model.type = 'static';
+      this.args.changeType();
+    }
+  }
+}
diff --git a/ui/admin/app/components/form/host-catalog/static/index.hbs b/ui/admin/app/components/form/host-catalog/static/index.hbs
index 6754ba2a0..960ed5e2b 100644
--- a/ui/admin/app/components/form/host-catalog/static/index.hbs
+++ b/ui/admin/app/components/form/host-catalog/static/index.hbs
@@ -1 +1,104 @@
-I'm a static host catalog form.
\ No newline at end of file
+<Rose::Form
+  @onSubmit={{@submit}}
+  @cancel={{@cancel}}
+  @disabled={{@model.isSaving}}
+  as |form|
+>
+  <form.input
+    @name='name'
+    @type='name'
+    @value={{@model.name}}
+    @label={{t 'form.name.label'}}
+    @helperText={{t 'form.name.help'}}
+    @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.description.label'}}
+    @helperText={{t 'form.description.help'}}
+    @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.fieldset>
+    <:title>{{t 'form.type.label'}}</:title>
+    <:body>
+      <form.radioGroup
+        @name='types'
+        @selectedValue={{@model.type}}
+        @changed={{@toggleType}}
+        as |radioGroup|
+      >
+        <radioGroup.card
+          @label={{t 'resources.host-catalog.types.static'}}
+          @value='static'
+          @helperText={{t 'resources.host-catalog.form.types.static.help'}}
+          @layout='wide'
+        />
+        <radioGroup.card
+          @label={{t 'resources.host-catalog.types.dynamic'}}
+          @value='dynamic'
+          @helperText={{t 'resources.host-catalog.form.types.dynamic.help'}}
+          @layout='wide'
+        />
+      </form.radioGroup>
+    </:body>
+  </form.fieldset>
+
+  {{#if @showDynamicPlugins}}
+    <form.fieldset>
+      <:title>{{t 'resources.host-catalog.form.provider-details'}}</:title>
+      <:body>
+        <form.radioGroup
+          @name='plugins'
+          @changed={{route-action 'changeType'}}
+          as |radioGroup|
+        >
+          <radioGroup.card
+            @label='AWS'
+            @value='aws'
+            @helperText={{t 'resources.host-catalog.form.types.static.help'}}
+            @layout='tile'
+          />
+          <radioGroup.card
+            @label='Azure'
+            @value='azure'
+            @helperText={{t 'resources.host-catalog.form.types.dynamic.help'}}
+            @layout='tile'
+          />
+        </form.radioGroup>
+      </:body>
+    </form.fieldset>
+  {{/if}}
+
+  {{#if (can 'save model' @model)}}
+    <form.actions
+      @disabled={{if @model.cannotSave @model.cannotSave}}
+      @enableEditText={{t 'actions.edit-form'}}
+      @submitText={{t 'actions.save'}}
+      @cancelText={{t 'actions.cancel'}}
+    />
+  {{/if}}
+</Rose::Form>
diff --git a/ui/admin/app/controllers/scopes/scope/host-catalogs/new.js b/ui/admin/app/controllers/scopes/scope/host-catalogs/new.js
new file mode 100644
index 000000000..3b0c5b729
--- /dev/null
+++ b/ui/admin/app/controllers/scopes/scope/host-catalogs/new.js
@@ -0,0 +1,23 @@
+import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class ScopesScopeHostCatalogsNewController extends Controller {
+  // =attributes
+
+  queryParams = ['type'];
+  @tracked showDynamicPlugins = false;
+
+  @action
+  async toggleType(type) {
+    this.renderDynamicPlugins(type);
+  }
+
+  renderDynamicPlugins(type) {
+    if (type !== 'static') {
+      this.showDynamicPlugins = true;
+    } else {
+      this.showDynamicPlugins = false;
+    }
+  }
+}
diff --git a/ui/admin/app/routes/scopes/scope/host-catalogs/new.js b/ui/admin/app/routes/scopes/scope/host-catalogs/new.js
index c95aea7b4..53a2fea97 100644
--- a/ui/admin/app/routes/scopes/scope/host-catalogs/new.js
+++ b/ui/admin/app/routes/scopes/scope/host-catalogs/new.js
@@ -1,12 +1,17 @@
 import Route from '@ember/routing/route';
 import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
 
 export default class ScopesScopeHostCatalogsNewRoute extends Route {
+  // =services
+
+  @service router;
   // =attributes
 
   queryParams = {
     type: {
       refreshModel: true,
+      replace: true,
     },
   };
 
@@ -18,20 +23,23 @@ export default class ScopesScopeHostCatalogsNewRoute extends Route {
    */
   model(params) {
     const scopeModel = this.modelFor('scopes.scope');
-    // FIXME Should default static type be specified when type is undefined?
-    params.type = 'static';
+    if (!params.type) params.type = 'static';
     return this.store.createRecord('host-catalog', {
-      type: params.type,
+      compositeType: params.type, //static or aws or azure
       scopeModel,
     });
   }
 
+  afterModel(model) {
+    this.router.replaceWith({ queryParams: { type: model.compositeType } });
+  }
+
   /**
    * Update type of host catalog
    * @param {string} type
    */
   @action
   async changeType(type) {
-    await this.router.replaceWith({ type });
+    await this.router.replaceWith({ queryParams: { type } });
   }
 }
diff --git a/ui/admin/tests/unit/controllers/scopes/scope/host-catalogs/new-test.js b/ui/admin/tests/unit/controllers/scopes/scope/host-catalogs/new-test.js
new file mode 100644
index 000000000..c872fa28a
--- /dev/null
+++ b/ui/admin/tests/unit/controllers/scopes/scope/host-catalogs/new-test.js
@@ -0,0 +1,14 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Controller | scopes/scope/host-catalogs/new', function (hooks) {
+  setupTest(hooks);
+
+  // TODO: Replace this with your real tests.
+  test('it exists', function (assert) {
+    let controller = this.owner.lookup(
+      'controller:scopes/scope/host-catalogs/new'
+    );
+    assert.ok(controller);
+  });
+});