diff --git a/src/components/Accordion/Accordion.styles.ts b/src/components/Accordion/Accordion.styles.ts
index cf3b9bb88..da6e4454b 100644
--- a/src/components/Accordion/Accordion.styles.ts
+++ b/src/components/Accordion/Accordion.styles.ts
@@ -63,6 +63,8 @@ export const DivStyled = styled.div`
         ${resetCSS}
         ${fonts.text}
         margin: 0 6px;
+        min-width: 100px;
+        text-align: right;
     }
 
     svg {
diff --git a/src/components/CreditCard/CreditCard.stories.tsx b/src/components/CreditCard/CreditCard.stories.tsx
new file mode 100644
index 000000000..72670b94d
--- /dev/null
+++ b/src/components/CreditCard/CreditCard.stories.tsx
@@ -0,0 +1,38 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import CreditCard from './CreditCard';
+import React from 'react';
+
+export default {
+    title: 'UI/CreditCard',
+    component: CreditCard,
+} as ComponentMeta<typeof CreditCard>;
+
+const Template: ComponentStory<typeof CreditCard> = (args) => {
+    return <CreditCard {...args} />;
+};
+
+export const Mastercard = Template.bind({});
+Mastercard.args = {
+    id: 'marty-mc-fly-cc-id',
+    isExpired: false,
+    name: 'Marty McFly',
+    type: 'visa',
+    lastDigits: '1177',
+    expiresAt: {
+        month: '04',
+        year: '22',
+    },
+};
+
+export const MastercardExpired = Template.bind({});
+MastercardExpired.args = {
+    id: 'marty-mc-fly-cc-id',
+    isExpired: true,
+    name: 'Marty McFly',
+    type: 'mastercard',
+    lastDigits: '1177',
+    expiresAt: {
+        month: '11',
+        year: '21',
+    },
+};
diff --git a/src/components/CreditCard/CreditCard.styles.ts b/src/components/CreditCard/CreditCard.styles.ts
new file mode 100644
index 000000000..49fa812a9
--- /dev/null
+++ b/src/components/CreditCard/CreditCard.styles.ts
@@ -0,0 +1,125 @@
+import styled, { css } from 'styled-components';
+import resetCSS from '../../styles/reset';
+import fonts from '../../styles/fonts';
+import colors, { colorPercentage } from '../../styles/colors';
+import { CreditCardProps } from './types';
+
+type TStyleProps = Pick<CreditCardProps, 'isExpired' | 'pressed'>;
+
+export const DivStyledCreditCard = styled.div<TStyleProps>`
+    ${resetCSS};
+    ${fonts.text};
+    background: linear-gradient(
+            113.54deg,
+            rgba(60, 87, 140, 0.5) 14.91%,
+            rgba(70, 86, 169, 0.5) 43.21%,
+            rgba(125, 150, 217, 0.345) 44.27%,
+            rgba(129, 161, 225, 0.185) 55.76%
+        ),
+        linear-gradient(151.07deg, #141659 33.25%, #4152a7 98.24%);
+    border: 2px solid ${colorPercentage(colors.white, 40)};
+    border-radius: 16px;
+    display: grid;
+    gap: 20%;
+    padding: 16px;
+    height: 154px;
+    width: 277px;
+
+    label {
+        height: 10px;
+    }
+
+    ${(p) => (p.isExpired ? expiredStyles : p.pressed ? pressedStyles : '')}
+
+    @keyframes hoverEffect {
+        from {
+            background: linear-gradient(
+                    113.54deg,
+                    rgba(60, 87, 140, 0.5) 18.91%,
+                    rgba(70, 86, 169, 0.5) 44.21%,
+                    rgba(125, 150, 217, 0.345) 48.27%,
+                    rgba(129, 161, 225, 0.185) 55.76%
+                ),
+                linear-gradient(151.07deg, #141659 33.25%, #4152a7 98.24%);
+        }
+        from {
+            background: linear-gradient(
+                    113.54deg,
+                    rgba(60, 87, 140, 0.5) 19.91%,
+                    rgba(70, 86, 169, 0.5) 45.21%,
+                    rgba(125, 150, 217, 0.345) 49.27%,
+                    rgba(129, 161, 225, 0.185) 55.76%
+                ),
+                linear-gradient(151.07deg, #141659 33.25%, #4152a7 98.24%);
+        }
+        to {
+            background: linear-gradient(
+                    113.54deg,
+                    rgba(60, 87, 140, 0.5) 20.91%,
+                    rgba(70, 86, 169, 0.5) 46.21%,
+                    rgba(125, 150, 217, 0.345) 50.27%,
+                    rgba(129, 161, 225, 0.185) 55.76%
+                ),
+                linear-gradient(151.07deg, #141659 33.25%, #4152a7 98.24%);
+        }
+    }
+
+    :hover {
+        animation-name: hoverEffect;
+        animation-duration: 40ms;
+        background: linear-gradient(
+                113.54deg,
+                rgba(60, 87, 140, 0.5) 16.91%,
+                rgba(70, 86, 169, 0.5) 45.21%,
+                rgba(125, 150, 217, 0.345) 52.27%,
+                rgba(129, 161, 225, 0.185) 55.76%
+            ),
+            linear-gradient(151.07deg, #141659 33.25%, #4152a7 98.24%);
+        cursor: pointer;
+    }
+`;
+
+export const DivStyledFlex = styled.div`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+`;
+
+export const DivStyledFlexText = styled.div`
+    color: white;
+    display: flex;
+    gap: 15px;
+`;
+
+export const DivStyledRemove = styled.div`
+    display: grid;
+    place-items: center;
+
+    :hover {
+        cursor: pointer;
+    }
+`;
+
+export const PStyledDigits = styled.p`
+    ${fonts.semiBold};
+    color: ${colors.white};
+    font-size: 18px;
+    line-height: 24px;
+    margin: 0;
+`;
+
+export const PStyledText = styled.p`
+    ${fonts.semiBold}
+    color: ${colors.white};
+    font-size: 12px;
+    line-height: 16px;
+    margin: 0;
+`;
+
+const expiredStyles = css`
+    border-color: ${colors.red};
+`;
+
+const pressedStyles = css`
+    border-color: ${colors.green};
+`;
diff --git a/src/components/CreditCard/CreditCard.tsx b/src/components/CreditCard/CreditCard.tsx
new file mode 100644
index 000000000..a2dc0b7c0
--- /dev/null
+++ b/src/components/CreditCard/CreditCard.tsx
@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import { Radios } from '../Radios';
+import { Icon } from '../Icon';
+import { Logo } from '../Logo';
+import { iconTypes } from '../Icon/collection';
+import colors from '../../styles/colors';
+import { CreditCardProps } from './types';
+import {
+    DivStyledCreditCard,
+    DivStyledFlex,
+    DivStyledFlexText,
+    DivStyledRemove,
+    PStyledDigits,
+    PStyledText,
+} from './CreditCard.styles';
+
+const CreditCard: React.FC<CreditCardProps> = ({
+    expiresAt,
+    id,
+    isExpired,
+    lastDigits,
+    name,
+    onRemove,
+    type,
+}: CreditCardProps) => {
+    const [pressed, setPressed] = useState<boolean>(false);
+
+    return (
+        <DivStyledCreditCard
+            isExpired={isExpired}
+            onClick={() => setPressed(!pressed)}
+            pressed={pressed}
+        >
+            <DivStyledFlex>
+                <Radios
+                    checked={pressed}
+                    id={id || 'radio-credit-card'}
+                    items={['']}
+                    onChange={() => setPressed(!pressed)}
+                />
+                <DivStyledRemove onClick={onRemove}></DivStyledRemove>
+            </DivStyledFlex>
+            <PStyledDigits>{`•••• ${lastDigits}`}</PStyledDigits>
+            <DivStyledFlex>
+                <DivStyledFlexText>
+                    <PStyledText>{name}</PStyledText>
+                    <PStyledText>{`${expiresAt.month} / ${expiresAt.year}`}</PStyledText>
+                </DivStyledFlexText>
+                <Logo size="small" theme={type} />
+            </DivStyledFlex>
+        </DivStyledCreditCard>
+    );
+};
+
+export default CreditCard;
diff --git a/src/components/CreditCard/index.tsx b/src/components/CreditCard/index.tsx
new file mode 100644
index 000000000..70b3e6350
--- /dev/null
+++ b/src/components/CreditCard/index.tsx
@@ -0,0 +1,2 @@
+export { default as CreditCard } from './CreditCard';
+export { CreditCardProps } from './types';
diff --git a/src/components/CreditCard/types.ts b/src/components/CreditCard/types.ts
new file mode 100644
index 000000000..3f015d8c1
--- /dev/null
+++ b/src/components/CreditCard/types.ts
@@ -0,0 +1,50 @@
+export interface CreditCardProps {
+    /**
+     * set the id of credit-card
+     */
+    id?: string;
+
+    /**
+     * set date of expiration MM/YY
+     */
+    expiresAt: {
+        /**
+         * 01 -> Jan, 02 -> Feb, ..., 12 -> Dec
+         */
+        month: string;
+        /**
+         * 22 -> 2022 , 23 -> 2023 ..., 40 -> 2040
+         */
+        year: string;
+    };
+
+    /**
+     * set if credit-card is expired
+     */
+    isExpired: boolean;
+
+    /**
+     * last 4 digits of credit-card-number
+     */
+    lastDigits: string | number;
+
+    /**
+     * set full-name of credit-card holder
+     */
+    name: string;
+
+    /**
+     * run function when remove icon is clicked
+     */
+    onRemove?: () => void;
+
+    /**
+     * set pressed
+     */
+    pressed?: boolean;
+
+    /**
+     * set type
+     */
+    type: 'mastercard' | 'visa';
+}
diff --git a/src/components/Icon/collection.tsx b/src/components/Icon/collection.tsx
index 72c898220..c8cb9690b 100644
--- a/src/components/Icon/collection.tsx
+++ b/src/components/Icon/collection.tsx
@@ -156,7 +156,6 @@ export enum iconTypes {
 
 const collection = {
     arrowCircleDownIcon,
-    mailIcon,
     arrowCircleLeftIcon,
     arrowCircleRightIcon,
     bellIcon,
@@ -200,6 +199,7 @@ const collection = {
     lockClosedIcon,
     lockOpenIcon,
     logOutIcon,
+    mailIcon,
     maximizeIcon,
     messageCircleIcon,
     minimizeIcon,
diff --git a/src/components/Icon/icons/mastercard.tsx b/src/components/Icon/icons/mastercard.tsx
new file mode 100644
index 000000000..d88813b4f
--- /dev/null
+++ b/src/components/Icon/icons/mastercard.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+
+const mastercardIcon = (
+    fill: string,
+    size: number,
+    style?: React.CSSProperties,
+) => {
+    return (
+        <svg
+            aria-hidden="true"
+            data-testid="test-icon"
+            fill={fill}
+            height={size}
+            viewBox="0 0 36 32"
+            width={size}
+            xmlns="http://www.w3.org/2000/svg"
+            style={style}
+        >
+            <title>mastercard icon</title>
+            <path
+                d="M21.607 7.61462H12.3606V24.3869H21.607V7.61462Z"
+                fill="#FF5F00"
+            />
+            <path
+                d="M12.9553 16.0003C12.9538 14.385 13.3164 12.7905 14.0157 11.3376C14.7149 9.88471 15.7325 8.61142 16.9913 7.61415C15.4325 6.37731 13.5603 5.60813 11.5888 5.39454C9.61729 5.18095 7.62604 5.53155 5.84263 6.40629C4.05921 7.28103 2.55559 8.64462 1.50362 10.3412C0.451656 12.0377 -0.106201 13.9988 -0.106201 16.0003C-0.106201 18.0017 0.451656 19.9628 1.50362 21.6594C2.55559 23.3559 4.05921 24.7195 5.84263 25.5942C7.62604 26.469 9.61729 26.8196 11.5888 26.606C13.5603 26.3924 15.4325 25.6232 16.9913 24.3864C15.7325 23.3891 14.715 22.1158 14.0157 20.6629C13.3165 19.21 12.9538 17.6156 12.9553 16.0003Z"
+                fill="#EB001B"
+            />
+            <path
+                d="M34.0814 16.0003C34.0815 18.0017 33.5237 19.9628 32.4718 21.6593C31.4199 23.3559 29.9163 24.7195 28.1329 25.5942C26.3495 26.469 24.3583 26.8196 22.3868 26.606C20.4154 26.3924 18.5432 25.6232 16.9844 24.3864C18.2421 23.3881 19.2589 22.1146 19.958 20.6619C20.6572 19.2093 21.0204 17.6153 21.0204 16.0003C21.0204 14.3852 20.6572 12.7913 19.958 11.3386C19.2589 9.88592 18.2421 8.61243 16.9844 7.61415C18.5432 6.3773 20.4154 5.60812 22.3868 5.39454C24.3583 5.18095 26.3495 5.53157 28.1329 6.40632C29.9163 7.28107 31.4199 8.64465 32.4718 10.3412C33.5237 12.0378 34.0815 13.9988 34.0814 16.0003Z"
+                fill="#F79E1B"
+            />
+            <path
+                d="M33.0867 22.6121V22.2688H33.2238V22.1988H32.8745V22.2688H33.0117V22.6121H33.0867ZM33.7649 22.6121V22.1981H33.6578L33.5347 22.4829L33.4115 22.1981H33.3043V22.6121H33.3799V22.2998L33.4954 22.5691H33.5738L33.6893 22.2992V22.6121H33.7649Z"
+                fill="#F79E1B"
+            />
+        </svg>
+    );
+};
+
+export default mastercardIcon;
diff --git a/src/components/Icon/icons/visa.tsx b/src/components/Icon/icons/visa.tsx
new file mode 100644
index 000000000..69876cb1e
--- /dev/null
+++ b/src/components/Icon/icons/visa.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+
+const visaIcon = (fill: string, size: number, style?: React.CSSProperties) => {
+    return (
+        <svg
+            aria-hidden="true"
+            data-testid="test-icon"
+            fill="none"
+            height={size}
+            viewBox="0 0 46 24"
+            width={size}
+            xmlns="http://www.w3.org/2000/svg"
+            style={style}
+        >
+            <title>visa icon</title>
+            <path
+                d="M23.2729 12.8118C23.2473 14.9083 25.0769 16.0784 26.4552 16.7739C27.8713 17.4877 28.3469 17.9454 28.3415 18.5835C28.3307 19.5604 27.2119 19.9915 26.1646 20.0083C24.3377 20.0377 23.2756 19.4974 22.4311 19.0888L21.773 22.2784C22.6203 22.6828 24.1891 23.0355 25.816 23.0509C29.6347 23.0509 32.1332 21.0985 32.1467 18.0713C32.1616 14.2295 27.0159 14.0168 27.0511 12.2996C27.0632 11.7789 27.5429 11.2233 28.5942 11.082C29.1145 11.0106 30.5509 10.956 32.1791 11.7328L32.8183 8.64675C31.9427 8.31646 30.8171 8.00016 29.4158 8.00016C25.8214 8.00016 23.2932 9.97912 23.2729 12.8118ZM38.9598 8.26607C38.2626 8.26607 37.6748 8.68734 37.4126 9.33393L31.9575 22.8242H35.7735L36.5329 20.6507H41.1962L41.6367 22.8242H45L42.065 8.26607H38.9598ZM39.4936 12.1988L40.5949 17.6654H37.5788L39.4936 12.1988ZM18.6462 8.26607L15.6382 22.8242H19.2745L22.2811 8.26607H18.6462ZM13.2668 8.26607L9.48186 18.1749L7.95087 9.7496C7.77115 8.8091 7.06174 8.26607 6.27395 8.26607H0.0864813L0 8.68874C1.27019 8.97425 2.71335 9.4347 3.58762 9.92734C4.12273 10.2282 4.27542 10.4914 4.45108 11.2065L7.35091 22.8242H11.1939L17.0855 8.26607H13.2668Z"
+                fill={fill}
+            />
+        </svg>
+    );
+};
+
+export default visaIcon;
diff --git a/src/components/Illustrations/index.tsx b/src/components/Illustrations/index.tsx
index 5c696244b..0378c1186 100644
--- a/src/components/Illustrations/index.tsx
+++ b/src/components/Illustrations/index.tsx
@@ -1,2 +1,2 @@
-export { default as Illustration } from "./Illustration";
-export { IllustrationProps } from "./types";
\ No newline at end of file
+export { default as Illustration } from './Illustration';
+export type { IllustrationProps } from './types';
diff --git a/src/components/Illustrations/types.ts b/src/components/Illustrations/types.ts
index f400a3a60..2f0872daa 100644
--- a/src/components/Illustrations/types.ts
+++ b/src/components/Illustrations/types.ts
@@ -21,8 +21,8 @@ export const logoState = [
     'marketplace',
 ] as const;
 export type Logo = typeof logoState[number];
-
 export type Size = number | string;
+
 export interface IllustrationProps {
     id?: string;
 
diff --git a/src/components/Radios/Radios.stories.tsx b/src/components/Radios/Radios.stories.tsx
index 813245133..e4b2b0d3c 100644
--- a/src/components/Radios/Radios.stories.tsx
+++ b/src/components/Radios/Radios.stories.tsx
@@ -37,3 +37,20 @@ RadiosWithLongText.args = {
     ],
     title: 'What is your favorite bitCoin quote of 2021?',
 };
+
+export const RadiosSetDefault = Template.bind({});
+RadiosSetDefault.args = {
+    id: 'radios',
+    items: ['Charmander', 'Squirtle', 'Bulbasaur', 'Pikachu'],
+    title: "Who's that Pokemon?",
+    checked: true,
+};
+
+export const RadiosSetParticular = Template.bind({});
+RadiosSetParticular.args = {
+    id: 'radios',
+    items: ['Charmander', 'Squirtle', 'Bulbasaur', 'Pikachu'],
+    title: "Who's that Pokemon?",
+    checked: true,
+    setWhichIsChecked: 2,
+};
diff --git a/src/components/Radios/Radios.test.tsx b/src/components/Radios/Radios.test.tsx
index 637b988b3..72434e07f 100644
--- a/src/components/Radios/Radios.test.tsx
+++ b/src/components/Radios/Radios.test.tsx
@@ -294,3 +294,5 @@ describe('Radios - RadiosWithLongText', () => {
         expect(testEvent).toHaveBeenCalledWith(input);
     });
 });
+
+// TODO @bill add tests for SetDefault and SetParticular
diff --git a/src/components/Radios/Radios.tsx b/src/components/Radios/Radios.tsx
index ee6d205c7..321fd3549 100644
--- a/src/components/Radios/Radios.tsx
+++ b/src/components/Radios/Radios.tsx
@@ -20,11 +20,13 @@ const RadioButtonStyled = styled.input`
 `;
 
 const Radios: React.FC<RadiosProps> = ({
+    checked,
     id,
     items,
     onChange,
-    validation,
+    setWhichIsChecked = 0,
     title,
+    validation,
 }) => {
     const formattedID = id.replace(/\s/g, '-');
 
@@ -37,6 +39,7 @@ const Radios: React.FC<RadiosProps> = ({
             {items.map((value, i) => (
                 <Fragment key={`${formattedID}_${i}`}>
                     <RadioButtonStyled
+                        checked={i === setWhichIsChecked && checked}
                         data-testid={`test-input-${i}`}
                         id={`${formattedID}_${i}`}
                         name={`${formattedID}_group`}
diff --git a/src/components/Radios/types.tsx b/src/components/Radios/types.tsx
index 6dc0b12e5..291cc92c0 100644
--- a/src/components/Radios/types.tsx
+++ b/src/components/Radios/types.tsx
@@ -23,6 +23,16 @@ export interface RadiosProps {
      */
     onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
 
+    /**
+     * you can have a radio checked by default, it always checks the first (position 0) unless you pass a valid array position to setWhichIsChecked
+     */
+    checked?: boolean;
+
+    /**
+     * if checked is set to true but you don't want to check the first radio, you can pass an array position number here. Note this should not be greater or less than the array.length
+     */
+    setWhichIsChecked?: number;
+
     /**
      * You can validate your radios
      */
diff --git a/src/styles/fonts.ts b/src/styles/fonts.ts
index 60c5604a6..03c829989 100644
--- a/src/styles/fonts.ts
+++ b/src/styles/fonts.ts
@@ -9,7 +9,7 @@ const heading = css`
     font-size: 36px;
     font-style: normal;
     font-weight: 600;
-    letter-spacing: 0px;
+    letter-spacing: 0;
 `;
 
 const h1 = css`
@@ -40,7 +40,7 @@ const h5 = css`
 `;
 
 const ibm = css`
-    font-family: IBM Plex Mono;
+    font-family: IBM Plex Mono, sans-serif;
     font-size: 16px;
     font-style: normal;
 `;
@@ -53,7 +53,7 @@ const text = css`
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
-    letter-spacing: 0em;
+    letter-spacing: 0;
     line-height: 24px;
 `;
 
@@ -72,12 +72,12 @@ const textBold700 = css`
 const textSmall = css`
     font-size: 14px;
     font-weight: 400;
-    letter-spacing: 0px;
+    letter-spacing: 0;
     line-height: 24px;
 `;
 
 const semiBold = css`
-    ${text}
+    ${text};
     font-weight: 600;
 `;