diff --git a/packages/appstore/src/constants/wallet-mocked-response.ts b/packages/appstore/src/constants/wallet-mocked-response.ts
new file mode 100644
index 000000000000..85eecfb6ba87
--- /dev/null
+++ b/packages/appstore/src/constants/wallet-mocked-response.ts
@@ -0,0 +1,58 @@
+// TODO: Remove this file once we have the real API response
+const wallets = [
+    {
+        name: 'USD Wallet',
+        currency: 'usd',
+        icon: 'IcCurrencyUsd',
+        balance: '10,0000',
+        icon_type: 'fiat',
+        state: 'default',
+        jurisdiction_title: 'svg',
+    },
+    {
+        name: 'USD Wallet',
+        currency: 'usd',
+        icon: 'IcCurrencyUsd',
+        balance: '10,0000',
+        icon_type: 'fiat',
+        state: 'default',
+        jurisdiction_title: 'svg',
+    },
+    // {
+    //     name: 'MT5 Derived Demo',
+    //     currency: 'usd',
+    //     icon: 'IcRebrandingMt5Logo',
+    //     wallet_icon: 'IcWalletDerivDemoLight',
+    //     balance: '879',
+    //     icon_type: 'app',
+    //     app: 'mt5',
+    //     linked_wallet: 'deriv demo',
+    //     state: 'default',
+    //     jurisdiction_title: 'svg',
+    //     is_demo: true,
+    // },
+    // {
+    //     name: 'MT5 Derived Demo',
+    //     currency: 'usd',
+    //     icon: 'IcRebrandingMt5Logo',
+    //     wallet_icon: null,
+    //     balance: '879',
+    //     icon_type: 'app',
+    //     app: 'mt5',
+    //     linked_wallet: null,
+    //     state: 'default',
+    //     jurisdiction_title: 'svg',
+    //     is_demo: true,
+    // },
+    {
+        name: 'Bitcoin Wallet',
+        currency: 'BTC',
+        icon: 'IcCashierBitcoinLight',
+        balance: '0.003546',
+        icon_type: 'crypto',
+        state: 'default',
+        jurisdiction_title: 'svg',
+    },
+];
+
+export default wallets;
diff --git a/packages/components/src/components/wallet-card/wallet-card.scss b/packages/components/src/components/wallet-card/wallet-card.scss
index f4a9e117c119..c94294097eba 100644
--- a/packages/components/src/components/wallet-card/wallet-card.scss
+++ b/packages/components/src/components/wallet-card/wallet-card.scss
@@ -1,17 +1,80 @@
 .wallet-card {
+    $parent: &;
+
     position: relative;
-    border-radius: $BORDER_RADIUS_2;
-    overflow: hidden;
+    border-radius: $BORDER_RADIUS;
+
+    &__container {
+        border-radius: inherit;
+        width: 100%;
+        height: 100%;
+
+        &:after {
+            background: var(--wallets-card-active-gradient-background);
+            border-radius: inherit;
+            content: '';
+            height: 100%;
+            left: 0;
+            opacity: 0;
+            position: absolute;
+            top: 0;
+            width: 100%;
+        }
+
+        &:hover {
+            &:after {
+                opacity: 1;
+            }
+        }
+    }
+
+    &__content {
+        position: relative;
+        z-index: 1;
+        height: 100%;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: center;
+        padding: 1.6rem;
+    }
+
+    &--active {
+        border: 2px solid var(--text-red);
+
+        #{$parent}__container {
+            &:after {
+                opacity: 1;
+            }
+        }
+    }
 
     &--small {
         width: 6.4rem;
         height: 4rem;
-        overflow: visible;
+
+        #{$parent}__container {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        #{$parent}__active-icon {
+            position: absolute;
+            top: 0;
+            left: 100%;
+            transform: translate(-1.2rem, -0.4rem);
+            width: unset;
+            height: unset;
+            z-index: 1;
+        }
     }
 
     &--medium {
         width: 20rem;
         height: 12rem;
+
         @include mobile {
             width: 16rem;
             height: 9.6rem;
@@ -21,6 +84,7 @@
     &--large {
         width: 24rem;
         height: 14.4rem;
+
         @include mobile {
             width: 21.6rem;
             height: 12.8rem;
@@ -29,43 +93,14 @@
 
     &__active-icon {
         position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-
-        &--small {
-            top: 0;
-            left: 100%;
-            transform: translate(-1.2rem, -0.4rem);
-        }
-    }
-
-    &__content {
-        position: absolute;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: space-between;
         width: 100%;
         height: 100%;
-        padding: 1.6rem;
-        box-sizing: border-box;
-        border-radius: $BORDER_RADIUS_2;
-
-        &--active {
-            border: 2px solid var(--text-red);
-            background: var(--wallets-card-active-gradient-background);
-        }
-
-        &--default:hover {
-            background: var(--wallets-card-active-gradient-background);
-        }
-
-        &--medium {
-            @include mobile {
-                padding: 0.8rem;
-            }
-        }
+        top: 0;
+        left: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: 1;
     }
 
     &__shine {
@@ -113,15 +148,6 @@
     &__wallet-button {
         background: $color-white;
 
-        &-icon {
-            align-self: center;
-            margin-right: 0.8rem;
-        }
-
-        &-text {
-            color: $color-black-1;
-        }
-
         &--added {
             opacity: 0.32;
         }
@@ -134,29 +160,4 @@
     &--faded {
         opacity: 0.72;
     }
-
-    &__small-container {
-        width: 6.4rem;
-        height: 4rem;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        &-overlay {
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            z-index: 1;
-            border-radius: $BORDER_RADIUS;
-
-            &--active {
-                outline: 2px solid var(--text-red);
-                background: var(--wallets-card-active-gradient-background);
-            }
-
-            &--default:hover {
-                background: var(--wallets-card-active-gradient-background);
-            }
-        }
-    }
 }
diff --git a/packages/components/src/components/wallet-card/wallet-card.tsx b/packages/components/src/components/wallet-card/wallet-card.tsx
index d1a752de6ddd..f02912fcd5af 100644
--- a/packages/components/src/components/wallet-card/wallet-card.tsx
+++ b/packages/components/src/components/wallet-card/wallet-card.tsx
@@ -1,103 +1,108 @@
 import React from 'react';
-import classNames from 'classnames';
 import { localize } from '@deriv/translations';
 import Badge from '../badge';
 import Button from '../button';
 import Icon from '../icon';
 import Text from '../text';
-import { GradientBackground } from '../gradient-background';
+import { isMobile } from '@deriv/shared';
 import { WalletIcon } from '../wallet-icon';
 import './wallet-card.scss';
 
 type TWalletCardProps = {
-    balance?: string;
-    currency?: string;
-    icon: JSX.Element;
-    badge_text: string;
+    // TODO: This type should be updated when the response is ready
+    wallet: any;
     size?: 'small' | 'medium' | 'large';
-    wallet_name?: string;
-    wallet_state?: 'active' | 'add' | 'added' | 'default' | 'disabled' | 'faded';
+    state?: 'active' | 'add' | 'added' | 'default' | 'disabled' | 'faded';
 };
 
 const WalletCard: React.FC<React.PropsWithChildren<TWalletCardProps>> = ({
-    balance,
-    currency,
-    icon,
-    badge_text,
-    size,
-    wallet_name,
-    wallet_state = 'default',
-}) => (
-    <div
-        className={classNames('wallet-card', {
-            [`wallet-card--${size}`]: size,
-            [`wallet-card--${wallet_state}`]: wallet_state,
-        })}
-    >
-        {size === 'small' ? (
-            <div className='wallet-card__small-container'>
-                <div
-                    className={`wallet-card__small-container-overlay wallet-card__small-container-overlay--${
-                        wallet_state === 'add' || wallet_state === 'added' ? 'default' : wallet_state
-                    }`}
-                />
-                <WalletIcon icon={icon} primaryColor='#F44336' secondaryColor='#283991' />
-            </div>
-        ) : (
-            <GradientBackground color='var(--general-main-2)' primary='#F44336' secondary='#283991' tertiary='#F44336'>
-                <div
-                    className={classNames('wallet-card__content', {
-                        [`wallet-card__content--${size}`]: size,
-                        [`wallet-card__content--${wallet_state}`]: wallet_state,
-                    })}
-                >
-                    <div className='wallet-card__shine' />
-                    <div className='wallet-card__top-wrapper'>
-                        {icon}
-                        <Badge custom_color='var(--text-prominent' label={badge_text} type='bordered' />
-                    </div>
-                    <div className='wallet-card__bottom-wrapper'>
-                        {wallet_state !== 'add' && wallet_state !== 'added' ? (
-                            <React.Fragment>
-                                <Text className='wallet-card__bottom-wrapper-wallet-name' color='prominent'>
-                                    {wallet_name} {localize('Wallet')}
-                                </Text>
-                                <Text className='wallet-card__bottom-wrapper-balance' color='prominent' weight='bold'>
-                                    {balance} {currency}
-                                </Text>
-                            </React.Fragment>
-                        ) : (
-                            <Button
-                                className={classNames('wallet-card__wallet-button', {
-                                    [`wallet-card__wallet-button--${wallet_state}`]: wallet_state,
-                                })}
-                                classNameSpan='wallet-card__wallet-button-text'
-                                icon={
-                                    <Icon
-                                        className='wallet-card__wallet-button-icon'
-                                        custom_color='$color-black-1'
-                                        icon={wallet_state === 'added' ? 'IcCheckmarkBold' : 'IcAddBold'}
-                                        size={12}
-                                    />
-                                }
-                                text={wallet_state === 'added' ? ' Added' : 'Add'}
+    wallet,
+    size = 'medium',
+    state = 'default',
+}) => {
+    const IconComponent = () => {
+        let icon_size = wallet.icon_type === 'app' ? 'medium' : 'large';
+        if (size === 'small') icon_size = 'medium';
+        if (size === 'medium') icon_size = isMobile() && wallet.icon_type === 'crypto' ? 'medium' : 'large';
+
+        return (
+            <React.Fragment>
+                {wallet.icon_type !== 'app' && (
+                    <WalletIcon
+                        type={wallet.icon_type}
+                        icon={wallet.icon}
+                        size={icon_size}
+                        currency={wallet.currency}
+                    />
+                )}
+                {/* TODO: Update this after app-icon created */}
+                {wallet.icon_type === 'app' && <div />}
+            </React.Fragment>
+        );
+    };
+
+    return (
+        <div className={`wallet-card wallet-card--${size} wallet-card--${state}`}>
+            <div className={`wallet-card__container wallet-card__${wallet.currency}-bg`}>
+                {size === 'small' && <IconComponent />}
+                {size !== 'small' && (
+                    <div className='wallet-card__content'>
+                        <div className='wallet-card__shine' />
+
+                        <div className='wallet-card__top-wrapper'>
+                            <IconComponent />
+                            <Badge
+                                custom_color='var(--text-prominent)'
+                                label={wallet.jurisdiction_title}
+                                type='bordered'
                             />
-                        )}
+                        </div>
+
+                        <div className='wallet-card__bottom-wrapper'>
+                            {state !== 'add' && state !== 'added' ? (
+                                <React.Fragment>
+                                    <Text className='wallet-card__bottom-wrapper-wallet-name' color='prominent'>
+                                        {wallet.name} {localize('Wallet')}
+                                    </Text>
+                                    <Text
+                                        className='wallet-card__bottom-wrapper-balance'
+                                        color='prominent'
+                                        weight='bold'
+                                    >
+                                        {wallet.balance} {wallet.currency}
+                                    </Text>
+                                </React.Fragment>
+                            ) : (
+                                <Button
+                                    className={`wallet-card__wallet-button wallet-card__wallet-button--${state}`}
+                                    classNameSpan='wallet-card__wallet-button-text'
+                                    icon={
+                                        <Icon
+                                            className='wallet-card__wallet-button-icon'
+                                            custom_color='$color-black-1'
+                                            icon={state === 'added' ? 'IcCheckmarkBold' : 'IcAddBold'}
+                                            size={12}
+                                        />
+                                    }
+                                    text={state === 'added' ? localize('Added') : localize('Add')}
+                                    is_disabled={state === 'added'}
+                                />
+                            )}
+                        </div>
                     </div>
+                )}
+            </div>
+            {state === 'active' && (
+                <div className='wallet-card__active-icon'>
+                    <Icon
+                        color='brand'
+                        data_testid='ic-checkmark-circle'
+                        icon='IcCheckmarkCircle'
+                        size={size === 'small' ? 16 : 32}
+                    />
                 </div>
-            </GradientBackground>
-        )}
-        {wallet_state === 'active' && (
-            <Icon
-                className={classNames('wallet-card__active-icon', {
-                    [`wallet-card__active-icon--small`]: size === 'small',
-                })}
-                color='brand'
-                data_testid='ic-checkmark-circle'
-                icon='IcCheckmarkCircle'
-                size={size === 'small' ? 16 : 32}
-            />
-        )}
-    </div>
-);
+            )}
+        </div>
+    );
+};
 export default WalletCard;
diff --git a/packages/components/src/components/wallet-icon/wallet-icon.scss b/packages/components/src/components/wallet-icon/wallet-icon.scss
index d4e2202e9719..3be14723e81c 100644
--- a/packages/components/src/components/wallet-icon/wallet-icon.scss
+++ b/packages/components/src/components/wallet-icon/wallet-icon.scss
@@ -6,12 +6,6 @@
     border-radius: $BORDER_RADIUS;
     overflow: hidden;
 
-    &__background {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-    }
-
     &--small {
         width: 4rem;
         height: 2.4rem;
diff --git a/packages/components/src/components/wallet-icon/wallet-icon.tsx b/packages/components/src/components/wallet-icon/wallet-icon.tsx
index 433047d23860..d05986a1d402 100644
--- a/packages/components/src/components/wallet-icon/wallet-icon.tsx
+++ b/packages/components/src/components/wallet-icon/wallet-icon.tsx
@@ -1,34 +1,77 @@
-import React, { CSSProperties } from 'react';
-import { GradientBackgroundTwoPoint } from '../gradient-background-two-point';
+import React from 'react';
+import classNames from 'classnames';
+import Icon from '../icon';
 import './wallet-icon.scss';
 
-type TWalletIcon = {
-    icon: JSX.Element;
-    primaryColor: CSSProperties['backgroundColor'];
-    secondaryColor: CSSProperties['backgroundColor'];
-    size?: 'small' | 'medium' | 'large';
+type TWalletIconProps = {
+    currency: string;
+    has_bg?: boolean;
+    icon: string;
+    size: string;
+    type: 'fiat' | 'crypto';
 };
 
-const getBlurRadius = (size: string) => {
-    if (size === 'small') return 16;
-    if (size === 'medium') return 24;
-
-    return 48;
+const sizes: any = {
+    fiat: {
+        xsmall: 12,
+        small: 16,
+        medium: 24,
+        large: 32,
+        xlarge: 48,
+    },
+    crypto: {
+        xxsmall: {
+            width: 26,
+            height: 16,
+        },
+        xsmall: {
+            width: 32,
+            height: 20,
+        },
+        small: {
+            width: 40,
+            height: 24,
+        },
+        medium: {
+            width: 48,
+            height: 30,
+        },
+        large: {
+            width: 64,
+            height: 40,
+        },
+        xlarge: {
+            width: 80,
+            height: 48,
+        },
+        xxlarge: {
+            width: 96,
+            height: 60,
+        },
+    },
 };
 
-const WalletIcon = ({ icon, primaryColor, secondaryColor, size = 'medium' }: TWalletIcon) => {
+const WalletIcon = ({ currency, has_bg = false, icon, size = 'medium', type }: TWalletIconProps) => {
+    /**
+     * The sizes of icons vary when utilizing the wallet-icon with a background, such as a card.
+     */
+    let icon_size = size;
+    if (has_bg) {
+        if (size === 'small' && type === 'crypto') icon_size = 'xxsmall';
+        if (size === 'medium' && type === 'crypto') icon_size = 'small';
+        if (size === 'large') icon_size = 'xlarge';
+    }
+
+    if (!icon || !currency) {
+        return null;
+    }
+
     return (
-        <div className={`wallet-icon wallet-icon--${size}`}>
-            <div className='wallet-icon__background'>
-                <GradientBackgroundTwoPoint
-                    blurRadius={getBlurRadius(size)}
-                    backgroundColor='var(--general-main-2)'
-                    primaryColor={primaryColor}
-                    secondaryColor={secondaryColor}
-                >
-                    {icon}
-                </GradientBackgroundTwoPoint>
-            </div>
+        <div className={classNames('wallet-icon', { [`wallet-icon--${size} wallet-card__${currency}-bg`]: !!has_bg })}>
+            {type === 'fiat' && <Icon icon={icon} size={sizes[type][icon_size]} />}
+            {type === 'crypto' && (
+                <Icon icon={icon} width={sizes[type][icon_size].width} height={sizes[type][icon_size].height} />
+            )}
         </div>
     );
 };