diff --git a/addons/api/addon/models/target.js b/addons/api/addon/models/target.js
index fd5c43358..08db9715c 100644
--- a/addons/api/addon/models/target.js
+++ b/addons/api/addon/models/target.js
@@ -2,6 +2,8 @@ import GeneratedTargetModel from '../generated/models/target';
 import { attr } from '@ember-data/model';
 import { inject as service } from '@ember/service';
 
+export const types = ['tcp', 'ssh'];
+
 export default class TargetModel extends GeneratedTargetModel {
   // =services
 
diff --git a/ui/admin/app/components/form/credential-store/static/index.hbs b/ui/admin/app/components/form/credential-store/static/index.hbs
index 0dbb997dc..2d44e3dd5 100644
--- a/ui/admin/app/components/form/credential-store/static/index.hbs
+++ b/ui/admin/app/components/form/credential-store/static/index.hbs
@@ -49,7 +49,7 @@
 
       <Hds::Form::RadioCard::Group @alignment='center' as |G|>
         <G.Legend>{{t 'form.type.label'}}</G.Legend>
-        {{#each-in this.mapResourceTypewithIcon as |credentialStoreType icon|}}
+        {{#each-in this.mapResourceTypeWithIcon as |credentialStoreType icon|}}
           <G.RadioCard
             @name={{credentialStoreType}}
             @value={{credentialStoreType}}
diff --git a/ui/admin/app/components/form/credential-store/static/index.js b/ui/admin/app/components/form/credential-store/static/index.js
index f21285b31..108a14c0c 100644
--- a/ui/admin/app/components/form/credential-store/static/index.js
+++ b/ui/admin/app/components/form/credential-store/static/index.js
@@ -10,7 +10,7 @@ export default class FormStaticCredentialStoreIndexComponent extends Component {
    * maps resource type with icon
    * @type {object}
    */
-  get mapResourceTypewithIcon() {
+  get mapResourceTypeWithIcon() {
     return types.reduce((obj, type, i) => ({ ...obj, [type]: icons[i] }), {});
   }
 }
diff --git a/ui/admin/app/components/form/credential-store/vault/index.hbs b/ui/admin/app/components/form/credential-store/vault/index.hbs
index fcc1196be..ed6e1f16c 100644
--- a/ui/admin/app/components/form/credential-store/vault/index.hbs
+++ b/ui/admin/app/components/form/credential-store/vault/index.hbs
@@ -49,7 +49,7 @@
     {{#if @model.isNew}}
       <Hds::Form::RadioCard::Group @alignment='center' as |G|>
         <G.Legend>{{t 'form.type.label'}}</G.Legend>
-        {{#each-in this.mapResourceTypewithIcon as |credentialStoreType icon|}}
+        {{#each-in this.mapResourceTypeWithIcon as |credentialStoreType icon|}}
           <G.RadioCard
             @name={{credentialStoreType}}
             @value={{credentialStoreType}}
diff --git a/ui/admin/app/components/form/credential-store/vault/index.js b/ui/admin/app/components/form/credential-store/vault/index.js
index 086e153e2..3fc601c85 100644
--- a/ui/admin/app/components/form/credential-store/vault/index.js
+++ b/ui/admin/app/components/form/credential-store/vault/index.js
@@ -10,7 +10,7 @@ export default class FormVaultCredentialStoreIndexComponent extends Component {
    * maps resource type with icon
    * @type {object}
    */
-  get mapResourceTypewithIcon() {
+  get mapResourceTypeWithIcon() {
     return types.reduce((obj, type, i) => ({ ...obj, [type]: icons[i] }), {});
   }
 }
diff --git a/ui/admin/app/components/form/credential/ssh_private_key/index.hbs b/ui/admin/app/components/form/credential/ssh_private_key/index.hbs
index 3e06da207..c87c33efa 100644
--- a/ui/admin/app/components/form/credential/ssh_private_key/index.hbs
+++ b/ui/admin/app/components/form/credential/ssh_private_key/index.hbs
@@ -44,30 +44,27 @@
     {{/if}}
   </form.textarea>
   {{#if @model.isNew}}
-    <form.fieldset>
-      <:title>{{t 'form.type.label'}}</:title>
-      <:body>
-        <form.radioGroup
-          @name='types'
-          @selectedValue={{@model.type}}
-          @changed={{@changeType}}
-          as |radioGroup|
+    <Hds::Form::RadioCard::Group @name='types' as |G|>
+      <G.Legend>{{t 'form.type.label'}}</G.Legend>
+      {{#each this.credentialTypes as |credentialType|}}
+        <G.RadioCard
+          @name={{credentialType}}
+          @value={{credentialType}}
+          @maxWidth='20rem'
+          @checked={{eq credentialType @model.type}}
+          {{on 'input' (fn @changeType credentialType)}}
+          as |R|
         >
-          <radioGroup.card
-            @label={{t 'resources.credential.types.username_password'}}
-            @helperText={{t 'resources.credential.help.username_password'}}
-            @value='username_password'
-            @layout='wide'
-          />
-          <radioGroup.card
-            @label={{t 'resources.credential.types.ssh_private_key'}}
-            @helperText={{t 'resources.credential.help.ssh_private_key'}}
-            @value='ssh_private_key'
-            @layout='wide'
-          />
-        </form.radioGroup>
-      </:body>
-    </form.fieldset>
+          <R.Label>{{t
+              (concat 'resources.credential.types.' credentialType)
+            }}</R.Label>
+          <R.Description>{{t
+              (concat 'resources.credential.help.' credentialType)
+            }}</R.Description>
+        </G.RadioCard>
+
+      {{/each}}
+    </Hds::Form::RadioCard::Group>
   {{else}}
     <InfoField
       @value={{t (concat 'resources.credential.help.' @model.type)}}
diff --git a/ui/admin/app/components/form/credential/ssh_private_key/index.js b/ui/admin/app/components/form/credential/ssh_private_key/index.js
new file mode 100644
index 000000000..c2c5d5bcb
--- /dev/null
+++ b/ui/admin/app/components/form/credential/ssh_private_key/index.js
@@ -0,0 +1,10 @@
+import Component from '@glimmer/component';
+import { types } from 'api/models/credential';
+
+export default class FormSSHPrivateKeyCredentialComponent extends Component {
+  // =attributes
+  /**
+   * @type {Array}
+   */
+  credentialTypes = types;
+}
diff --git a/ui/admin/app/components/form/credential/username_password/index.hbs b/ui/admin/app/components/form/credential/username_password/index.hbs
index 48ae29a71..731f4deb9 100644
--- a/ui/admin/app/components/form/credential/username_password/index.hbs
+++ b/ui/admin/app/components/form/credential/username_password/index.hbs
@@ -44,30 +44,27 @@
     {{/if}}
   </form.textarea>
   {{#if @model.isNew}}
-    <form.fieldset>
-      <:title>{{t 'form.type.label'}}</:title>
-      <:body>
-        <form.radioGroup
-          @name='types'
-          @selectedValue={{@model.type}}
-          @changed={{@changeType}}
-          as |radioGroup|
+    <Hds::Form::RadioCard::Group @name='types' as |G|>
+      <G.Legend>{{t 'form.type.label'}}</G.Legend>
+      {{#each this.credentialTypes as |credentialType|}}
+        <G.RadioCard
+          @name={{credentialType}}
+          @value={{credentialType}}
+          @maxWidth='20rem'
+          @checked={{eq credentialType @model.type}}
+          {{on 'input' (fn @changeType credentialType)}}
+          as |R|
         >
-          <radioGroup.card
-            @label={{t 'resources.credential.types.username_password'}}
-            @helperText={{t 'resources.credential.help.username_password'}}
-            @value='username_password'
-            @layout='wide'
-          />
-          <radioGroup.card
-            @label={{t 'resources.credential.types.ssh_private_key'}}
-            @helperText={{t 'resources.credential.help.ssh_private_key'}}
-            @value='ssh_private_key'
-            @layout='wide'
-          />
-        </form.radioGroup>
-      </:body>
-    </form.fieldset>
+          <R.Label>{{t
+              (concat 'resources.credential.types.' credentialType)
+            }}</R.Label>
+          <R.Description>{{t
+              (concat 'resources.credential.help.' credentialType)
+            }}</R.Description>
+        </G.RadioCard>
+
+      {{/each}}
+    </Hds::Form::RadioCard::Group>
   {{else}}
     <InfoField
       @value={{t (concat 'resources.credential.help.' @model.type)}}
diff --git a/ui/admin/app/components/form/credential/username_password/index.js b/ui/admin/app/components/form/credential/username_password/index.js
new file mode 100644
index 000000000..67d493c10
--- /dev/null
+++ b/ui/admin/app/components/form/credential/username_password/index.js
@@ -0,0 +1,10 @@
+import Component from '@glimmer/component';
+import { types } from 'api/models/credential';
+
+export default class FormUserNamePasswordCredentialComponent extends Component {
+  // =attributes
+  /**
+   * @type {Array}
+   */
+  credentialTypes = types;
+}
diff --git a/ui/admin/app/components/form/target/details/index.hbs b/ui/admin/app/components/form/target/details/index.hbs
index 94b6f189c..5c4ed8237 100644
--- a/ui/admin/app/components/form/target/details/index.hbs
+++ b/ui/admin/app/components/form/target/details/index.hbs
@@ -41,50 +41,38 @@
     {{/if}}
   </form.textarea>
 
-  <form.fieldset>
-    <:title>{{t 'form.type.label'}}</:title>
-    <:body>
-      {{#if @model.isNew}}
-        <form.radioGroup
-          @name='types'
-          @selectedValue={{@model.type}}
-          @changed={{@changeType}}
-          as |radioGroup|
+  {{#if (and @model.isNew (feature-flag 'ssh-target'))}}
+    <Hds::Form::RadioCard::Group @name='types' @alignment='center' as |G|>
+      <G.Legend>{{t 'form.type.label'}}</G.Legend>
+      {{#each-in this.mapResourceTypeWithIcon as |targetType icon|}}
+        <G.RadioCard
+          @name={{targetType}}
+          @value={{targetType}}
+          @maxWidth='20rem'
+          @checked={{eq targetType @model.type}}
+          {{on 'input' (fn @changeType targetType)}}
+          as |R|
         >
-          <radioGroup.card
-            @label={{t 'resources.target.types.tcp'}}
-            @helperText={{t 'resources.target.help.tcp'}}
-            @value='tcp'
-            @layout='wide'
-          />
-          {{#if (feature-flag 'ssh-target')}}
-            <radioGroup.card
-              @label={{t 'resources.target.types.ssh'}}
-              @helperText={{t 'resources.target.help.ssh'}}
-              @value='ssh'
-              @layout='wide'
-            />
-          {{/if}}
-        </form.radioGroup>
-      {{else}}
-        <form.radioGroup
-          @name='types'
-          @selectedValue={{@model.type}}
-          as |radioGroup|
-        >
-          <radioGroup.card
-            @label={{t (concat 'resources.target.types.' @model.type)}}
-            @helperText={{t (concat 'resources.target.help.' @model.type)}}
-            @value={{@model.type}}
-            @layout='wide'
-            readonly={{true}}
-            @disabled={{true}}
-          />
+          <R.Label>{{t (concat 'resources.target.types.' targetType)}}</R.Label>
+          <R.Description>{{t
+              (concat 'resources.target.help.' targetType)
+            }}</R.Description>
+          <R.Icon @name={{icon}} />
+        </G.RadioCard>
+      {{/each-in}}
+    </Hds::Form::RadioCard::Group>
 
-        </form.radioGroup>
-      {{/if}}
-    </:body>
-  </form.fieldset>
+  {{else}}
+    <InfoField
+      @value={{t (concat 'resources.target.help.' @model.type)}}
+      @icon={{this.icon}}
+      as |F|
+    >
+      <F.Label>{{t 'form.type.label'}}</F.Label>
+      <F.HelperText>{{t (concat 'resources.target.types.' @model.type)}}
+      </F.HelperText>
+    </InfoField>
+  {{/if}}
 
   <form.input
     @name='session_max_seconds'
diff --git a/ui/admin/app/components/form/target/details/index.js b/ui/admin/app/components/form/target/details/index.js
new file mode 100644
index 000000000..d37de8a08
--- /dev/null
+++ b/ui/admin/app/components/form/target/details/index.js
@@ -0,0 +1,29 @@
+import Component from '@glimmer/component';
+import { types } from 'api/models/target';
+
+//Note: this is a temporary solution till we have resource type helper in place
+const icons = ['network', 'terminal'];
+
+export default class FormTargetComponent extends Component {
+  // =properties
+  /**
+   * maps resource type with icon
+   * @type {object}
+   */
+  get mapResourceTypeWithIcon() {
+    return types.reduce((obj, type, i) => ({ ...obj, [type]: icons[i] }), {});
+  }
+
+  /**
+   * returns icons based on the model type
+   * unlike other resources, this is needed as we use generic details component for both tcp and ssh
+   * @type {string}
+   */
+  get icon() {
+    if (this.args.model.type === 'tcp') {
+      return icons[0];
+    } else {
+      return icons[1];
+    }
+  }
+}
diff --git a/ui/admin/tests/acceptance/targets/create-test.js b/ui/admin/tests/acceptance/targets/create-test.js
index 58df58ecd..856d33fd2 100644
--- a/ui/admin/tests/acceptance/targets/create-test.js
+++ b/ui/admin/tests/acceptance/targets/create-test.js
@@ -80,7 +80,7 @@ module('Acceptance | targets | create', function (hooks) {
   test('defaults to a new TCP target when no query param provided', async function (assert) {
     assert.expect(1);
     await visit(urls.newTarget);
-    assert.strictEqual(find('input[name=types]:checked').value, 'tcp');
+    assert.strictEqual(find('input[name=tcp]:checked').value, 'tcp');
   });
 
   test('can create new targets of type TCP', async function (assert) {
@@ -176,8 +176,8 @@ module('Acceptance | targets | create', function (hooks) {
         'create'
       )
     );
-    assert.dom('.rose-form-radio-card').exists({ count: 1 });
-    assert.dom('.rose-form-radio-card label').includesText('TCP');
+    assert.dom('.info-field').exists({ count: 1 });
+    assert.dom('.hds-form-helper-text').includesText('TCP');
   });
 
   test('can cancel create new TCP target', async function (assert) {