diff --git a/addons/rose/addon/components/rose/form/radio/card/index.js b/addons/rose/addon/components/rose/form/radio/card/index.js
index c05cf1a5b..f4aaab3bb 100644
--- a/addons/rose/addon/components/rose/form/radio/card/index.js
+++ b/addons/rose/addon/components/rose/form/radio/card/index.js
@@ -1,7 +1,25 @@
 import RoseFormRadioRadioComponent from '../radio';
+import { deprecate } from '@ember/debug';
 
 export default class RoseFormRadioCardComponent extends RoseFormRadioRadioComponent {
   // =attributes
   layout = this.args.layout;
   className = `rose-form-radio-card ${this.layout}`;
+
+  constructor() {
+    super(...arguments);
+    deprecate(
+      `Rose Form/Radio/Card component is deprecated, use HDS Form/RadioCard instead. For more info, refer to `,
+      false,
+      {
+        id: 'rose.form.radio.card',
+        until: '4.8.0',
+        for: 'rose',
+        since: {
+          enabled: '3.28.8',
+        },
+        url: 'https://boundary-ui-storybook.vercel.app/?path=/docs/rose-form-radio-radio-card--card',
+      }
+    );
+  }
 }
diff --git a/addons/rose/addon/components/rose/form/radio/card/index.stories.mdx b/addons/rose/addon/components/rose/form/radio/card/index.stories.mdx
index 6c5e3c2d6..5cd8de8ab 100644
--- a/addons/rose/addon/components/rose/form/radio/card/index.stories.mdx
+++ b/addons/rose/addon/components/rose/form/radio/card/index.stories.mdx
@@ -1,25 +1,55 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs';
 import { hbs } from 'ember-cli-htmlbars';
 
-<Meta
-  title="Rose/Form/Radio/Radio/Card"
-  component="Form/Radio/Radio/Card"
-  args={{
-    label: 'Azure',
-    error: false,
-    value: 'value and selectedValue must match to select radiofield',
-    selectedValue: 'value and selectedValue must match to select radiofield',
-    helperText: 'Record financial transactions using',
-    disabled: false,
-  }}
-  argTypes={{
-    Layout: {
-      control: 'inline-radio',
-      options: ['wide', 'tile'],
-      name: 'layout',
-    },
-  }}
-/>
+<Meta title="Rose/Form/Radio/Card" component="RadioCard" />
+
+# HDS::Form::RadioCard (Recommended)
+
+> **_NOTE:_** Replaces the deprecated Rose/Form/Radio/Card.
+
+Refer to the [HDS Form::RadioCard
+documentation](https://design-system-components-hashicorp.vercel.app/components/form/radio-card)
+for a complete overview
+
+```handlebars
+<Hds::Form::RadioCard @checked={{true}} as |R|>
+  <R.Label>HDS Radio Card</R.Label>
+  <R.Badge @text='6 clusters left' />
+  <R.Description>Quick peering with quick links will provide the fastest way to
+    connect to your providers’ network.</R.Description>
+</Hds::Form::RadioCard>
+```
+
+export const HDSTemplate = (args) => ({
+  template: hbs`
+      <Hds::Form::RadioCard @checked={{true}} @layout='fixed' @maxWidth='300px' @alignment='center' as |R|>
+       <R.Label>{{label}}</R.Label>
+       <R.Badge @text={{badge}} />
+       <R.Description>{{description}}</R.Description>
+      </Hds::Form::RadioCard>
+      `,
+  context: args,
+});
+
+<Preview>
+  <Story
+    name="HDS Card"
+    height="10rem"
+    args={{
+      label: 'Quick peering with Quick Links',
+      badge: '6 clusters left',
+      description: 'Record financial transactions using',
+    }}
+  >
+    {HDSTemplate.bind({})}
+  </Story>
+</Preview>
+
+# Rose/Form/Radio/Card (Deprecated)
+
+Rose/Form/Radio/Card has been deprecated in favor of [HDS::Form::RadioCard](https://design-system-components-hashicorp.vercel.app/components/form/radio-card)
+
+### <Rose::Form::Radio::Card> usage:
 
 # Form Radiofield in a wide format
 
@@ -68,10 +98,22 @@ export const Template = (args) => ({
 
 <Preview>
   <Story
-    name="Card"
+    name="Rose Card"
     height="10rem"
     args={{
-      Layout: 'wide',
+      label: 'Azure',
+      error: false,
+      value: 'value and selectedValue must match to select radiofield',
+      selectedValue: 'value and selectedValue must match to select radiofield',
+      helperText: 'Record financial transactions using',
+      disabled: false,
+    }}
+    argTypes={{
+      Layout: {
+        control: 'inline-radio',
+        options: ['wide', 'tile'],
+        name: 'layout',
+      },
     }}
   >
     {Template.bind({})}
diff --git a/addons/rose/addon/components/rose/form/radio/group/index.stories.mdx b/addons/rose/addon/components/rose/form/radio/group/index.stories.mdx
index 60137a9b1..a698fedda 100644
--- a/addons/rose/addon/components/rose/form/radio/group/index.stories.mdx
+++ b/addons/rose/addon/components/rose/form/radio/group/index.stories.mdx
@@ -75,6 +75,78 @@ export const Template = (args) => ({
   </Story>
 </Preview>
 
+# HDS::Form::RadioCard::Group (Recommended)
+
+> **_NOTE:_** Replaces the deprecated Rose/Form/Radio/Group/Card.
+
+```handlebars
+<Hds::Form::RadioCard::Group
+  @name='radio-card-basic-example'
+  @alignment='center'
+  as |G|
+>
+  <G.Legend>Create connection</G.Legend>
+  <G.RadioCard @checked={{true}} {{on 'change' this.onChange}} as |R|>
+    <R.Icon @name='aws-color' />
+    <R.Label>Quick peering with Quick Links</R.Label>
+    <R.Badge @text='2-5 min' />
+    <R.Description>Quick peering with quick links will provide the fastest way
+      to connect to your providers’ network.</R.Description>
+  </G.RadioCard>
+  <G.RadioCard {{on 'change' this.onChange}} as |R|>
+    <R.Icon @name='aws-color' />
+    <R.Label>Manual peering using AWS CLI</R.Label>
+    <R.Badge @text='5-10 min' />
+    <R.Description>Provide you AWS CLI template to apply connection settings.</R.Description>
+  </G.RadioCard>
+  <G.RadioCard {{on 'change' this.onChange}} as |R|>
+    <R.Icon @name='hcp' />
+    <R.Label>Manual peering using HCP and AWS web console</R.Label>
+    <R.Badge @text='30-60 min' />
+    <R.Description>Manually follow UI instructions to complete configuring a
+      connection at provider side.</R.Description>
+  </G.RadioCard>
+</Hds::Form::RadioCard::Group>
+```
+
+export const HDSTemplate = (args) => ({
+  template: hbs`
+    <Hds::Form::RadioCard::Group @name="radio-card-basic-example" @alignment="center" as |G|>
+      <G.Legend>Create connection</G.Legend>
+      <G.RadioCard @maxWidth="20%" @checked={{true}} {{on "change" this.onChange}} as |R|>
+        <R.Label>{{firstlabel}}</R.Label>
+        <R.Badge @text={{firstbadge}} />
+        <R.Description>{{firstdescription}}</R.Description>
+      </G.RadioCard>
+      <G.RadioCard @maxWidth="20%" {{on "change" this.onChange}} as |R|>
+        <R.Label>{{secondlabel}}</R.Label>
+        <R.Badge @text={{secondbadge}} />
+        <R.Description>{{seconddescription}}</R.Description>
+      </G.RadioCard>
+    </Hds::Form::RadioCard::Group>`,
+  context: args,
+});
+
+<Preview>
+  <Story
+    name="HDS Card"
+    height="10rem"
+    args={{
+      firstlabel: 'Quick peering with Quick Links',
+      firstbadge: '6 clusters left',
+      firstdescription: 'Record financial transactions using',
+      secondlabel: 'Manual peering using AWS CLI',
+      secondbadge: '60 clusters left',
+      seconddescription:
+        'Manually follow UI instructions to complete configuring a connection at provider side.',
+    }}
+  >
+    {HDSTemplate.bind({})}
+  </Story>
+</Preview>
+
+# Rose::Form::Radio::Group::Card (Deprecated)
+
 ```handlebars
 <Rose::Form::Radio::Group
   @disabled={{false}}
@@ -105,100 +177,50 @@ export const Template = (args) => ({
 </Rose::Form::Radio::Group>
 ```
 
-```handlebars
-<Rose::Form::Radio::Group
-  @disabled={{false}}
-  @name={{name}}
-  @selectedValue='disagree'
-  @changed={{fn}}
-  @inline={{false}}
-  as |radioGroup|
->
-  <radioGroup.Card @label='Agree' @value='agree' @layout='wide' />
-  <radioGroup.Card @label='disagree' @value='disagree' @layout='wide' />
-</Rose::Form::Radio::Group>
-```
-
-export const CardTemplate = (args) => ({
+export const RoseTemplate = (args) => ({
   template: hbs`
       <Rose::Form::Radio::Group
-      @disabled={{disabled}}
-      @name={{name}}
-      @selectedValue={{selectedValue}}
-      @changed={{changed}}
-      as |radioGroup|
-    >
-      <radioGroup.card
-        @label={{firstFieldLabel}}
-        @value={{firstFieldValue}}
-        @icon={{firstFieldIcon}}
-        @layout={{Layout}}
-      />
-      <radioGroup.card
-        @label={{secondFieldLabel}}
-        @value={{secondFieldValue}}
-        @icon={{secondFieldIcon}}
-        @layout={{Layout}}
-      />
-      <radioGroup.card
-        @label={{thirdFieldLabel}}
-        @value={{thirdFieldValue}}
-        @icon={{thirdFieldIcon}}
-        @layout={{Layout}}
-      />
-    </Rose::Form::Radio::Group>`,
+        @disabled={{disabled}}
+        @name={{name}}
+        @selectedValue={{selectedValue}}
+        @changed={{changed}}
+        as |radioGroup|
+      >
+        <radioGroup.card
+          @label={{firstFieldLabel}}
+          @value={{firstFieldValue}}
+          @icon={{firstFieldIcon}}
+        />
+        <radioGroup.card @label={{secondFieldLabel}} @value={{secondFieldValue}} />
+      </Rose::Form::Radio::Group>`,
   context: args,
 });
 
 <Preview>
   <Story
-    name="Card"
+    name="Rose Basic"
     height="10rem"
     args={{
-      Layout: 'tile',
       name: 'mustagree',
       disabled: false,
       selectedValue: 'disagree',
       firstFieldLabel: 'Agree',
       firstFieldValue: 'agree',
-      secondFieldLabel: 'Maybe',
-      secondFieldValue: 'maybe',
-      thirdFieldLabel: 'Disagree',
-      thirdFieldValue: 'disagree',
-      firstFieldIcon: '',
-      secondFieldIcon: '',
-      thirdFieldIcon: '',
+      secondFieldLabel: 'Disagree',
+      secondFieldValue: 'disagree',
+      firstFieldIcon: 'flight-icons/svg/org-16',
     }}
     argTypes={{
-      Layout: {
-        control: 'inline-radio',
-        options: ['wide', 'tile'],
-        name: 'layout',
-      },
       firstFieldIcon: {
-        control: {
-          type: 'inline-radio',
-          labels: { '': 'none' },
-        },
-        options: ['', 'flight-icons/svg/azure-color-16'],
-      },
-      secondFieldIcon: {
-        control: {
-          type: 'inline-radio',
-          labels: { '': 'none' },
-        },
-        options: ['', 'flight-icons/svg/azure-color-16'],
-      },
-      thirdFieldIcon: {
-        control: {
-          type: 'inline-radio',
-          labels: { '': 'none' },
-        },
-        options: ['', 'flight-icons/svg/azure-color-16'],
+        control: 'select',
+        options: [
+          'flight-icons/svg/org-16',
+          'flight-icons/svg/clipboard-copy-16',
+        ],
       },
       changed: { action: 'changed' },
     }}
   >
-    {CardTemplate.bind({})}
+    {RoseTemplate.bind({})}
   </Story>
 </Preview>