diff --git a/core/components/atoms/selectionCard/SelectionCard.tsx b/core/components/atoms/selectionCard/SelectionCard.tsx
index 3228cb3e99..a1fb7b469a 100644
--- a/core/components/atoms/selectionCard/SelectionCard.tsx
+++ b/core/components/atoms/selectionCard/SelectionCard.tsx
@@ -42,19 +42,23 @@ export const SelectionCard = (props: SelectionCardProps) => {
   const classes = classNames(
     {
       ['Selection-card']: true,
-      ['Selection-card--selected']: selected,
-      ['Selection-card--disabled']: disabled && !selected,
+      ['Selection-card--default']: !disabled,
+      ['Selection-card--selected']: selected && !disabled,
+      ['Selection-card--disabled']: disabled,
+      ['Selection-card--default-disabled']: disabled && !selected,
       ['Selection-card--selected-disabled']: disabled && selected,
     },
     className
   );
 
   const onClickHandler = (event: ClickEventType) => {
-    onClick && onClick(event, id, cardValue);
+    if (!disabled && onClick) {
+      onClick(event, id, cardValue);
+    }
   };
 
   const onKeyDownHandler = (event: React.KeyboardEvent) => {
-    if (event.key === 'Enter') {
+    if (event.key === 'Enter' && !disabled) {
       onClickHandler(event);
     }
   };
@@ -63,7 +67,7 @@ export const SelectionCard = (props: SelectionCardProps) => {
     <div
       role="checkbox"
       aria-checked={selected}
-      tabIndex={0}
+      tabIndex={disabled ? -1 : 0}
       onKeyDown={onKeyDownHandler}
       onClick={(event) => onClickHandler(event)}
       className={classes}
diff --git a/core/components/atoms/selectionCard/__stories__/index.story.jsx b/core/components/atoms/selectionCard/__stories__/index.story.jsx
index 85e1ef0f8a..45632e5f7d 100644
--- a/core/components/atoms/selectionCard/__stories__/index.story.jsx
+++ b/core/components/atoms/selectionCard/__stories__/index.story.jsx
@@ -39,7 +39,7 @@ export const all = () => {
             <SelectionCard
               id={id}
               cardValue={cardItem}
-              className="pl-5 py-6 pr-6 d-flex mr-6"
+              className="p-6 d-flex mr-6"
               onClick={onClickHandler}
               selected={isCardSelected(id)}
             >
@@ -47,7 +47,9 @@ export const all = () => {
               <div className="ml-5">
                 <Text weight="strong">{title}</Text>
                 <br />
-                <Text appearance="subtle">{description}</Text>
+                <Text className="pt-2" appearance="subtle">
+                  {description}
+                </Text>
               </div>
             </SelectionCard>
           </Column>
@@ -93,7 +95,7 @@ const customCode = `() => {
             <SelectionCard
               id={id}
               cardValue={cardItem}
-              className="pl-5 py-6 pr-6 d-flex mr-6"
+              className="p-6 d-flex mr-6"
               onClick={onClickHandler}
               selected={isCardSelected(id)}
             >
@@ -101,7 +103,7 @@ const customCode = `() => {
               <div className="ml-5">
                 <Text weight="strong">{title}</Text>
                 <br />
-                <Text appearance="subtle">{description}</Text>
+                <Text className="pt-2" appearance="subtle">{description}</Text>
               </div>
             </SelectionCard>
           </Column>
diff --git a/core/components/atoms/selectionCard/__stories__/layout.story.jsx b/core/components/atoms/selectionCard/__stories__/layout.story.jsx
index 9accce6791..020c9b6ce2 100644
--- a/core/components/atoms/selectionCard/__stories__/layout.story.jsx
+++ b/core/components/atoms/selectionCard/__stories__/layout.story.jsx
@@ -6,12 +6,14 @@ export const layout = () => {
   return (
     <div>
       <Text weight="strong">Left Content Alignment:</Text>
-      <SelectionCard name="item1" className="pl-5 py-6 pr-6 w-25 d-flex mb-8 mt-6" selected={true}>
+      <SelectionCard name="item1" className="p-6 w-25 d-flex mb-8 mt-6" selected={true}>
         <Icon size={24} name="adjust" />
         <div className="ml-5">
           <Text weight="strong">Manual drop on SFTP disk</Text>
           <br />
-          <Text appearance="subtle">Give access to a separate SFTP disk image</Text>
+          <Text className="pt-2" appearance="subtle">
+            Give access to a separate SFTP disk image
+          </Text>
         </div>
       </SelectionCard>
 
diff --git a/core/components/atoms/selectionCard/__stories__/multiSelect.story.jsx b/core/components/atoms/selectionCard/__stories__/multiSelect.story.jsx
index c56e45327d..dd6c9a82bc 100644
--- a/core/components/atoms/selectionCard/__stories__/multiSelect.story.jsx
+++ b/core/components/atoms/selectionCard/__stories__/multiSelect.story.jsx
@@ -51,7 +51,7 @@ export const multiSelect = () => {
             <SelectionCard
               id={id}
               cardValue={cardItem}
-              className="pl-5 py-6 pr-6 d-flex mr-6"
+              className="p-6 d-flex mr-6"
               onClick={onClickHandler}
               selected={isCardSelected(id)}
             >
@@ -59,7 +59,9 @@ export const multiSelect = () => {
               <div className="ml-5">
                 <Text weight="strong">{title}</Text>
                 <br />
-                <Text appearance="subtle">{description}</Text>
+                <Text className="pt-2" appearance="subtle">
+                  {description}
+                </Text>
               </div>
             </SelectionCard>
           </Column>
@@ -117,7 +119,7 @@ const customCode = `() => {
             <SelectionCard
               id={id}
               cardValue={cardItem}
-              className="pl-5 py-6 pr-6 d-flex mr-6"
+              className="p-6 d-flex mr-6"
               onClick={onClickHandler}
               selected={isCardSelected(id)}
             >
@@ -125,7 +127,7 @@ const customCode = `() => {
               <div className="ml-5">
                 <Text weight="strong">{title}</Text>
                 <br />
-                <Text appearance="subtle">{description}</Text>
+                <Text className="pt-2" appearance="subtle">{description}</Text>
               </div>
             </SelectionCard>
           </Column>
diff --git a/core/components/atoms/selectionCard/__stories__/singleSelect.story.jsx b/core/components/atoms/selectionCard/__stories__/singleSelect.story.jsx
index 37c9e45f1e..336194ee93 100644
--- a/core/components/atoms/selectionCard/__stories__/singleSelect.story.jsx
+++ b/core/components/atoms/selectionCard/__stories__/singleSelect.story.jsx
@@ -51,7 +51,7 @@ export const singleSelect = () => {
             <SelectionCard
               id={id}
               cardValue={cardItem}
-              className="pl-5 py-6 pr-6 d-flex mr-6"
+              className="p-6 d-flex mr-6"
               onClick={onClickHandler}
               selected={isCardSelected(id)}
             >
@@ -59,7 +59,9 @@ export const singleSelect = () => {
               <div className="ml-5">
                 <Text weight="strong">{title}</Text>
                 <br />
-                <Text appearance="subtle">{description}</Text>
+                <Text className="pt-2" appearance="subtle">
+                  {description}
+                </Text>
               </div>
             </SelectionCard>
           </Column>
@@ -117,7 +119,7 @@ const customCode = `() => {
             <SelectionCard
               id={id}
               cardValue={cardItem}
-              className="pl-5 py-6 pr-6 d-flex mr-6"
+              className="p-6 d-flex mr-6"
               onClick={onClickHandler}
               selected={isCardSelected(id)}
             >
@@ -125,7 +127,7 @@ const customCode = `() => {
               <div className="ml-5">
                 <Text weight="strong">{title}</Text>
                 <br />
-                <Text appearance="subtle">{description}</Text>
+                <Text className="pt-2" appearance="subtle">{description}</Text>
               </div>
             </SelectionCard>
           </Column>
diff --git a/core/components/atoms/selectionCard/__stories__/state.story.jsx b/core/components/atoms/selectionCard/__stories__/state.story.jsx
new file mode 100644
index 0000000000..3c8d9a2d87
--- /dev/null
+++ b/core/components/atoms/selectionCard/__stories__/state.story.jsx
@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { SelectionCard, Row, Column, Icon, Text } from '@/index';
+
+// CSF format story
+
+export const state = () => {
+  const cardConfigs = [
+    { label: 'Default:', props: {} },
+    { label: 'Disabled:', props: { disabled: true } },
+    { label: 'Selected:', props: { selected: true } },
+    { label: 'Selected and disabled:', props: { disabled: true, selected: true } },
+  ];
+
+  return (
+    <Row>
+      {cardConfigs.map((config, index) => (
+        <Column key={index} size={6}>
+          <Text weight="strong">{config.label}</Text>
+          <SelectionCard className="p-6 d-flex mt-6 mb-8 mr-6" {...config.props}>
+            <Icon size={20} name="adjust" />
+            <div className="ml-5">
+              <Text weight="strong">Manual drop on SFTP disk</Text>
+              <br />
+              <Text className="pt-2" appearance="subtle">
+                Give access to a separate SFTP disk image
+              </Text>
+            </div>
+          </SelectionCard>
+        </Column>
+      ))}
+    </Row>
+  );
+};
+
+const customCode = `() => {
+  const cardConfigs = [
+    { label: 'Default:', props: {} },
+    { label: 'Disabled:', props: { disabled: true } },
+    { label: 'Selected:', props: { selected: true } },
+    { label: 'Selected and disabled:', props: { disabled: true, selected: true } },
+  ];
+
+  return (
+    <Row>
+      {cardConfigs.map((config, index) => (
+        <Column key={index} size={6}>
+          <Text weight="strong">{config.label}</Text>
+          <SelectionCard className="p-6 d-flex mt-6 mb-8 mr-6" {...config.props}>
+            <Icon size={20} name="adjust" />
+            <div className="ml-5">
+              <Text weight="strong">Manual drop on SFTP disk</Text>
+              <br />
+              <Text className="pt-2" appearance="subtle">
+                Give access to a separate SFTP disk image
+              </Text>
+            </div>
+          </SelectionCard>
+        </Column>
+      ))}
+    </Row>
+  );
+}`;
+
+export default {
+  title: 'Components/Interactive Card/Selection Card/State',
+  component: SelectionCard,
+  parameters: {
+    docs: {
+      docPage: {
+        title: 'SelectionCard',
+        propDescription: `Note: All the valid properties of HTML DIV elements are acceptable as a prop`,
+        customCode,
+      },
+    },
+  },
+};
diff --git a/core/components/atoms/selectionCard/__tests__/SelectionCard.test.tsx b/core/components/atoms/selectionCard/__tests__/SelectionCard.test.tsx
index ef1b341292..68d3735b97 100644
--- a/core/components/atoms/selectionCard/__tests__/SelectionCard.test.tsx
+++ b/core/components/atoms/selectionCard/__tests__/SelectionCard.test.tsx
@@ -31,6 +31,16 @@ const SingleSelect = () => {
       >
         Single Selection Item 2
       </SelectionCard>
+
+      <SelectionCard
+        id="item3"
+        data-test="Selection-card-3"
+        disabled={true}
+        onClick={() => updateCardSelection('item3')}
+        selected={isCardSelected('item3')}
+      >
+        Single Selection Item 3
+      </SelectionCard>
     </div>
   );
 };
@@ -49,6 +59,7 @@ const MultiSelect = () => {
       >
         Multi Selection
       </SelectionCard>
+
       <SelectionCard
         id="item2"
         cardValue={{ title: 'Item 2' }}
@@ -58,6 +69,16 @@ const MultiSelect = () => {
       >
         Multi Selection
       </SelectionCard>
+
+      <SelectionCard
+        id="item3"
+        data-test="Selection-card-3"
+        disabled={true}
+        onClick={() => updateCardSelection('item3')}
+        selected={isCardSelected('item3')}
+      >
+        Single Selection Item 3
+      </SelectionCard>
     </div>
   );
 };
@@ -88,6 +109,7 @@ describe('selection card component tests', () => {
     const element = getByTestId('DesignSystem-SelectionCard');
     expect(element).toBeInTheDocument();
     expect(element).toHaveClass('Selection-card');
+    expect(element).toHaveClass('Selection-card--default');
     expect(element).toHaveTextContent(StringValue);
   });
 });
@@ -120,6 +142,7 @@ describe('selection card disabled item component tests', () => {
     );
     const element = getByTestId('DesignSystem-SelectionCard');
     expect(element).toHaveClass('Selection-card--disabled');
+    expect(element).toHaveClass('Selection-card--default-disabled');
   });
 
   it('check for disabled class for selected item', () => {
@@ -129,8 +152,20 @@ describe('selection card disabled item component tests', () => {
       </SelectionCard>
     );
     const element = getByTestId('DesignSystem-SelectionCard');
+    expect(element).toHaveClass('Selection-card--disabled');
     expect(element).toHaveClass('Selection-card--selected-disabled');
   });
+
+  it('check for onClick event for disabled item', () => {
+    const { getByTestId } = render(
+      <SelectionCard id={name} onClick={FunctionValue} disabled={true} selected={true}>
+        {StringValue}
+      </SelectionCard>
+    );
+    const element = getByTestId('DesignSystem-SelectionCard');
+    fireEvent.click(element);
+    expect(FunctionValue).not.toHaveBeenCalled();
+  });
 });
 
 describe('selection card component classes', () => {
@@ -181,6 +216,12 @@ describe('selection card component hooks test', () => {
 
     fireEvent.click(element2);
     expect(element2).not.toHaveClass('Selection-card--selected');
+    const element3 = getByTestId('Selection-card-3');
+    fireEvent.click(element2);
+
+    fireEvent.click(element3);
+    expect(element3).not.toHaveClass('Selection-card--selected');
+    expect(element2).toHaveClass('Selection-card--selected');
   });
 
   it('test for multi select hook', () => {
@@ -195,5 +236,11 @@ describe('selection card component hooks test', () => {
 
     fireEvent.click(element1);
     expect(element1).not.toHaveClass('Selection-card--selected');
+
+    const element3 = getByTestId('Selection-card-3');
+    fireEvent.click(element3);
+    expect(element3).not.toHaveClass('Selection-card--selected');
+
+    expect(element2).toHaveClass('Selection-card--selected');
   });
 });
diff --git a/core/components/atoms/selectionCard/__tests__/__snapshots__/SelectionCard.test.tsx.snap b/core/components/atoms/selectionCard/__tests__/__snapshots__/SelectionCard.test.tsx.snap
index 65117bda4d..81a51035b4 100644
--- a/core/components/atoms/selectionCard/__tests__/__snapshots__/SelectionCard.test.tsx.snap
+++ b/core/components/atoms/selectionCard/__tests__/__snapshots__/SelectionCard.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`selection card item component snapshot
 <body>
   <div>
     <div
-      class="Selection-card"
+      class="Selection-card Selection-card--default"
       data-test="DesignSystem-SelectionCard"
       role="checkbox"
       tabindex="0"
@@ -29,7 +29,7 @@ exports[`selection card item component snapshot
   <div>
     <div
       aria-checked="false"
-      class="Selection-card"
+      class="Selection-card Selection-card--default"
       data-test="DesignSystem-SelectionCard"
       role="checkbox"
       tabindex="0"
@@ -52,7 +52,7 @@ exports[`selection card item component snapshot
   <div>
     <div
       aria-checked="true"
-      class="Selection-card Selection-card--selected"
+      class="Selection-card Selection-card--default Selection-card--selected"
       data-test="DesignSystem-SelectionCard"
       role="checkbox"
       tabindex="0"
@@ -74,10 +74,10 @@ exports[`selection card item component snapshot
 <body>
   <div>
     <div
-      class="Selection-card Selection-card--disabled"
+      class="Selection-card Selection-card--disabled Selection-card--default-disabled"
       data-test="DesignSystem-SelectionCard"
       role="checkbox"
-      tabindex="0"
+      tabindex="-1"
     >
       <div
         class="Selection-card-overlay"
@@ -97,10 +97,10 @@ exports[`selection card item component snapshot
   <div>
     <div
       aria-checked="false"
-      class="Selection-card Selection-card--disabled"
+      class="Selection-card Selection-card--disabled Selection-card--default-disabled"
       data-test="DesignSystem-SelectionCard"
       role="checkbox"
-      tabindex="0"
+      tabindex="-1"
     >
       <div
         class="Selection-card-overlay"
@@ -120,10 +120,10 @@ exports[`selection card item component snapshot
   <div>
     <div
       aria-checked="true"
-      class="Selection-card Selection-card--selected Selection-card--selected-disabled"
+      class="Selection-card Selection-card--disabled Selection-card--selected-disabled"
       data-test="DesignSystem-SelectionCard"
       role="checkbox"
-      tabindex="0"
+      tabindex="-1"
     >
       <div
         class="Selection-card-overlay"
@@ -142,7 +142,7 @@ exports[`selection card item component snapshot
 <body>
   <div>
     <div
-      class="Selection-card"
+      class="Selection-card Selection-card--default"
       data-test="DesignSystem-SelectionCard"
       role="checkbox"
       tabindex="0"
@@ -165,7 +165,7 @@ exports[`selection card item component snapshot
   <div>
     <div
       aria-checked="false"
-      class="Selection-card"
+      class="Selection-card Selection-card--default"
       data-test="DesignSystem-SelectionCard"
       role="checkbox"
       tabindex="0"
@@ -188,7 +188,7 @@ exports[`selection card item component snapshot
   <div>
     <div
       aria-checked="true"
-      class="Selection-card Selection-card--selected"
+      class="Selection-card Selection-card--default Selection-card--selected"
       data-test="DesignSystem-SelectionCard"
       role="checkbox"
       tabindex="0"
diff --git a/css/src/components/selectionCard.css b/css/src/components/selectionCard.css
index 185a42d452..29315c4d5e 100644
--- a/css/src/components/selectionCard.css
+++ b/css/src/components/selectionCard.css
@@ -1,29 +1,36 @@
 .Selection-card {
-  cursor: pointer;
   border-radius: var(--spacing-m);
   position: relative;
-  box-shadow: inset 0 0 0 var(--spacing-xs) var(--secondary-dark);
   transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 
-.Selection-card:hover {
+.Selection-card--default {
+  cursor: pointer;
+  box-shadow: inset 0 0 0 var(--spacing-xs) var(--secondary-dark);
+}
+
+.Selection-card--default:hover {
   box-shadow: inset 0 0 0 var(--spacing-s) var(--inverse-lightest);
   transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 
-.Selection-card:focus,
-.Selection-card:focus-visible {
+.Selection-card--default:focus,
+.Selection-card--default:focus-visible {
   outline: none;
-  box-shadow: var(--shadow-spread) var(--secondary-shadow), inset 0 0 0 var(--spacing-xs) var(--secondary-light);
+  box-shadow: var(--shadow-spread) var(--secondary-shadow), inset 0 0 0 var(--spacing-xs) var(--secondary-dark);
 }
 
-.Selection-card:active {
+.Selection-card--default:active {
   box-shadow: inset 0 0 0 var(--spacing-s) var(--primary);
   transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 
 .Selection-card--disabled {
-  pointer-events: none;
+  cursor: not-allowed;
+  outline: none;
+}
+
+.Selection-card--default-disabled {
   box-shadow: inset 0 0 0 var(--spacing-xs) var(--secondary-lighter);
 }
 
@@ -48,7 +55,6 @@
 }
 
 .Selection-card--selected-disabled {
-  pointer-events: none;
   box-shadow: inset 0 0 0 var(--spacing-xs) var(--primary-lighter);
 }
 
@@ -65,12 +71,12 @@
   border-radius: var(--spacing-m);
 }
 
-.Selection-card:active .Selection-card-overlay {
+.Selection-card--default:active .Selection-card-overlay {
   background-color: var(--primary);
   opacity: var(--opacity-3);
 }
 
-.Selection-card--disabled .Selection-card-overlay {
+.Selection-card--default-disabled .Selection-card-overlay {
   background-color: var(--secondary-lightest);
   opacity: var(--opacity-10);
 }