diff --git a/src/components/FlyoutMenu/FlyoutMenu.scss b/src/components/FlyoutMenu/FlyoutMenu.scss
deleted file mode 100644
index 2c1fff30..00000000
--- a/src/components/FlyoutMenu/FlyoutMenu.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-.flyout-menu {
-    &__list {
-        position: absolute;
-        top: 4.8rem;
-        right: 0;
-        min-width: 12.8rem;
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        z-index: 2;
-        border-radius: 0.4rem;
-        background: #fff;
-        box-shadow: 0 3.2rem 6.4rem 0 rgba(14, 14, 14, 0.14);
-        overflow-y: auto;
-        & > li {
-            width: 100%;
-            & > * {
-                padding: 1rem 1.6rem;
-                width: 100%;
-                display: inline-block;
-                & > * {
-                    color: #0e0e0e;
-                    font-weight: 400;
-                }
-                &:hover {
-                    cursor: pointer;
-                    background-color: #e6e9e9;
-                    & > * {
-                        text-decoration: none;
-                    }
-                }
-            }
-        }
-    }
-}
diff --git a/src/components/FlyoutMenu/FlyoutMenu.tsx b/src/components/FlyoutMenu/FlyoutMenu.tsx
deleted file mode 100644
index f0bfb1c8..00000000
--- a/src/components/FlyoutMenu/FlyoutMenu.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { HTMLAttributes, ReactNode, useRef, useState } from 'react';
-import { useOnClickOutside } from 'usehooks-ts';
-import FlyoutMenuList from './FlyoutMenuList';
-import FlyoutMenuToggle from './FlyoutMenuToggle';
-import './FlyoutMenu.scss';
-
-type TFlyoutMenuProps = HTMLAttributes<HTMLDivElement> & {
-    listItems?: ReactNode[];
-    renderIcon?: () => ReactNode;
-};
-
-const FlyoutMenu = ({ listItems, renderIcon, ...props }: TFlyoutMenuProps) => {
-    const [isOpen, setIsOpen] = useState(false);
-    const flyoutMenuRef = useRef<HTMLDivElement>(null);
-    useOnClickOutside(flyoutMenuRef, () => {
-        setIsOpen(false);
-    });
-    return (
-        <div ref={flyoutMenuRef} {...props}>
-            <FlyoutMenuToggle
-                onClick={() => {
-                    setIsOpen(!isOpen);
-                }}
-                renderIcon={renderIcon}
-            />
-            <FlyoutMenuList isOpen={isOpen} listItems={listItems} />
-        </div>
-    );
-};
-
-export default FlyoutMenu;
diff --git a/src/components/FlyoutMenu/FlyoutMenuList.tsx b/src/components/FlyoutMenu/FlyoutMenuList.tsx
deleted file mode 100644
index 0c47b57e..00000000
--- a/src/components/FlyoutMenu/FlyoutMenuList.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { isValidElement, ReactNode } from 'react';
-
-type TFlyoutListProps = {
-    isOpen?: boolean;
-    listItems?: ReactNode[];
-};
-
-const FlyoutList = ({ isOpen = false, listItems }: TFlyoutListProps) => {
-    return isOpen ? (
-        <ul className='flyout-menu__list'>
-            {listItems?.map(listItem => {
-                return <li key={isValidElement(listItem) ? listItem.key : listItem?.toString()}>{listItem}</li>;
-            })}
-        </ul>
-    ) : null;
-};
-
-export default FlyoutList;
diff --git a/src/components/FlyoutMenu/FlyoutMenuToggle.tsx b/src/components/FlyoutMenu/FlyoutMenuToggle.tsx
deleted file mode 100644
index 531be827..00000000
--- a/src/components/FlyoutMenu/FlyoutMenuToggle.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { HTMLAttributes, ReactNode } from 'react';
-
-type TFlyoutToggleProps = HTMLAttributes<HTMLDivElement> & {
-    renderIcon?: () => ReactNode;
-};
-
-const FlyoutToggle = ({ renderIcon, ...props }: TFlyoutToggleProps) => {
-    return (
-        <div {...props} data-testid='dt_flyout_toggle'>
-            {renderIcon?.()}
-        </div>
-    );
-};
-
-export default FlyoutToggle;
diff --git a/src/components/FlyoutMenu/__tests__/FlyoutList.spec.tsx b/src/components/FlyoutMenu/__tests__/FlyoutList.spec.tsx
deleted file mode 100644
index d38e7b02..00000000
--- a/src/components/FlyoutMenu/__tests__/FlyoutList.spec.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import FlyoutMenuList from '../FlyoutMenuList';
-
-jest.mock('react', () => ({
-    ...jest.requireActual('react'),
-    isValidElement: jest.fn().mockReturnValue((item: Record<string, string>) => !!item.key),
-}));
-
-describe('FlyoutMenuList', () => {
-    it('should render objects as items ', () => {
-        render(<FlyoutMenuList isOpen={true} listItems={[[<span key={0}>Item</span>]]} />);
-        expect(screen.getByText('Item')).toBeInTheDocument();
-    });
-    it('should not render anything if isopen is not provided', () => {
-        render(<FlyoutMenuList listItems={[[<span key={0}>Item</span>]]} />);
-        expect(screen.queryByText('Item')).not.toBeInTheDocument();
-    });
-});
diff --git a/src/components/FlyoutMenu/__tests__/FlyoutMenu.spec.tsx b/src/components/FlyoutMenu/__tests__/FlyoutMenu.spec.tsx
deleted file mode 100644
index b7ca467a..00000000
--- a/src/components/FlyoutMenu/__tests__/FlyoutMenu.spec.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import FlyoutMenu from '../FlyoutMenu';
-
-const flyoutItems = ['item1', 'item2', 'item3'];
-
-describe('FlyoutMenu', () => {
-    it('should render the flyout menu correctly', () => {
-        render(<FlyoutMenu listItems={flyoutItems} renderIcon={() => 'MockIcCashierVerticalEllipsis'} />);
-        expect(screen.getByText('MockIcCashierVerticalEllipsis')).toBeInTheDocument();
-    });
-    it('should display the menu items when the icon is clicked', async () => {
-        render(<FlyoutMenu listItems={flyoutItems} />);
-        await userEvent.click(screen.getByTestId('dt_flyout_toggle'));
-        flyoutItems.forEach(item => {
-            expect(screen.getByText(item)).toBeInTheDocument();
-        });
-    });
-    it('should hide the flyout menu list when the parent is clicked', async () => {
-        render(
-            <div data-testid='dt_flyout_parent'>
-                <FlyoutMenu listItems={flyoutItems} />
-            </div>
-        );
-        await userEvent.click(screen.getByTestId('dt_flyout_toggle'));
-        expect(screen.getByText(flyoutItems[0])).toBeInTheDocument();
-        await userEvent.click(screen.getByTestId('dt_flyout_parent'));
-        expect(screen.queryByText(flyoutItems[0])).not.toBeInTheDocument();
-    });
-});
diff --git a/src/components/FlyoutMenu/index.ts b/src/components/FlyoutMenu/index.ts
deleted file mode 100644
index 76059bfd..00000000
--- a/src/components/FlyoutMenu/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as FlyoutMenu } from './FlyoutMenu';
diff --git a/src/components/PaymentMethodCard/PaymentMethodCardBody/PaymentMethodCardBody.scss b/src/components/PaymentMethodCard/PaymentMethodCardBody/PaymentMethodCardBody.scss
index 1f1ad1ab..7f291f82 100644
--- a/src/components/PaymentMethodCard/PaymentMethodCardBody/PaymentMethodCardBody.scss
+++ b/src/components/PaymentMethodCard/PaymentMethodCardBody/PaymentMethodCardBody.scss
@@ -2,7 +2,6 @@
     &__body {
         display: flex;
         flex-direction: column;
-        margin-top: 0.8rem;
         vertical-align: baseline;
     }
 }
diff --git a/src/components/PaymentMethodCard/PaymentMethodCardBody/PaymentMethodCardBody.tsx b/src/components/PaymentMethodCard/PaymentMethodCardBody/PaymentMethodCardBody.tsx
index 014632b4..0e319c6b 100644
--- a/src/components/PaymentMethodCard/PaymentMethodCardBody/PaymentMethodCardBody.tsx
+++ b/src/components/PaymentMethodCard/PaymentMethodCardBody/PaymentMethodCardBody.tsx
@@ -16,11 +16,11 @@ const PaymentMethodCardBody = ({
     const isBankOrOther = modifiedDisplayName && ['BankTransfer', 'Other'].includes(modifiedDisplayName);
     return (
         <div className='payment-method-card__body'>
-            {isBankOrOther && !shouldShowPaymentMethodDisplayName ? null : <Text size='xs'>{displayName}</Text>}
-            <Text size='xs'>
+            {isBankOrOther && !shouldShowPaymentMethodDisplayName ? null : <Text>{displayName}</Text>}
+            <Text>
                 {(paymentMethod.fields?.bank_name as TBankName)?.value ?? (paymentMethod.fields?.name as TName)?.value}
             </Text>
-            <Text size='xs'>{(paymentMethod.fields?.account as TAccount)?.value}</Text>
+            <Text>{(paymentMethod.fields?.account as TAccount)?.value}</Text>
         </div>
     );
 };
diff --git a/src/components/PaymentMethodCard/PaymentMethodCardHeader/PaymentMethodCardHeader.scss b/src/components/PaymentMethodCard/PaymentMethodCardHeader/PaymentMethodCardHeader.scss
index 4832d32f..dc4ba77a 100644
--- a/src/components/PaymentMethodCard/PaymentMethodCardHeader/PaymentMethodCardHeader.scss
+++ b/src/components/PaymentMethodCard/PaymentMethodCardHeader/PaymentMethodCardHeader.scss
@@ -8,6 +8,26 @@
         justify-content: space-between;
         align-items: center;
         margin-bottom: 1.1rem;
+
+        .deriv-dropdown {
+            width: 3.2rem;
+
+            &__items {
+                width: 12.8rem;
+                border: 0;
+                padding: 0;
+            }
+
+            .deriv-input {
+                border: 0;
+                padding: 0;
+
+                &__field,
+                &__helper-message {
+                    display: none;
+                }
+            }
+        }
     }
     .derivs-button__variant--ghost {
         color: #0e0e0e;
diff --git a/src/components/PaymentMethodCard/PaymentMethodCardHeader/PaymentMethodCardHeader.tsx b/src/components/PaymentMethodCard/PaymentMethodCardHeader/PaymentMethodCardHeader.tsx
index 3791937a..324e3569 100644
--- a/src/components/PaymentMethodCard/PaymentMethodCardHeader/PaymentMethodCardHeader.tsx
+++ b/src/components/PaymentMethodCard/PaymentMethodCardHeader/PaymentMethodCardHeader.tsx
@@ -1,7 +1,6 @@
 import { THooks } from 'types';
-import { FlyoutMenu } from '@/components';
 import { LabelPairedEllipsisVerticalXlRegularIcon } from '@deriv/quill-icons';
-import { Button, Checkbox } from '@deriv-com/ui';
+import { Checkbox, Dropdown } from '@deriv-com/ui';
 import { ReactComponent as IcCashierBankTransfer } from '../../../public/ic-cashier-bank-transfer.svg';
 import { ReactComponent as IcCashierEwallet } from '../../../public/ic-cashier-ewallet.svg';
 import { ReactComponent as IcCashierOther } from '../../../public/ic-cashier-other.svg';
@@ -20,6 +19,18 @@ type TPaymentMethodCardHeaderProps = {
     type: THooks.AdvertiserPaymentMethods.Get[number]['type'];
 };
 
+// TODO: Remember to translate these
+const actions = [
+    {
+        text: 'Edit',
+        value: 'edit',
+    },
+    {
+        text: 'Delete',
+        value: 'delete',
+    },
+];
+
 const PaymentMethodCardHeader = ({
     isDisabled = false,
     isEditable = false,
@@ -38,16 +49,7 @@ const PaymentMethodCardHeader = ({
     } else if (type === 'ewallet') {
         Icon = IcCashierEwallet;
     }
-    // TODO: Remember to translate these
-    const flyoutMenuItems = [
-        <Button color='black' key={0} onClick={() => onEditPaymentMethod?.()} size='sm' textSize='xs' variant='ghost'>
-            Edit
-        </Button>,
 
-        <Button color='black' key={1} onClick={() => onDeletePaymentMethod?.()} size='sm' textSize='xs' variant='ghost'>
-            Delete
-        </Button>,
-    ];
     return (
         <div className='payment-method-card__header' data-testid='dt_payment_method_card_header'>
             <Icon
@@ -57,9 +59,18 @@ const PaymentMethodCardHeader = ({
                 width={medium || small ? 16 : 24}
             />
             {isEditable && (
-                <FlyoutMenu
-                    listItems={flyoutMenuItems}
-                    renderIcon={() => <LabelPairedEllipsisVerticalXlRegularIcon className='cursor-pointer' />}
+                <Dropdown
+                    className='payment-method-card__header-dropdown'
+                    dropdownIcon={<LabelPairedEllipsisVerticalXlRegularIcon />}
+                    list={actions}
+                    name='payment-method-actions'
+                    onSelect={value => {
+                        if (value === 'edit') {
+                            onEditPaymentMethod?.();
+                        } else if (value === 'delete') {
+                            onDeletePaymentMethod?.();
+                        }
+                    }}
                 />
             )}
             {isSelectable && (
diff --git a/src/components/index.ts b/src/components/index.ts
index 12a622d2..7406e03c 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -7,7 +7,6 @@ export * from './Clipboard';
 export * from './Dropdown';
 export * from './FileDropzone';
 export * from './FloatingRate';
-export * from './FlyoutMenu';
 export * from './FormProgress';
 export * from './FullPageMobileWrapper';
 export * from './Header';
diff --git a/src/pages/my-profile/screens/MyProfile/MyProfile.scss b/src/pages/my-profile/screens/MyProfile/MyProfile.scss
index 53fc76c0..297600ee 100644
--- a/src/pages/my-profile/screens/MyProfile/MyProfile.scss
+++ b/src/pages/my-profile/screens/MyProfile/MyProfile.scss
@@ -2,10 +2,10 @@
     display: flex;
     flex-direction: column;
     padding-top: 2.4rem;
+    overflow-y: auto;
+    height: calc(100vh - 12rem);
 
     @include mobile {
-        overflow-y: scroll;
-        height: calc(100vh - 12rem);
         padding: 0;
     }