diff --git a/packages/e2e/tests/cards/availableBrands/component/availableBrands.disabled.clientScripts.js b/packages/e2e/tests/cards/availableBrands/component/availableBrands.disabled.clientScripts.js
deleted file mode 100644
index 5dabc8d2de..0000000000
--- a/packages/e2e/tests/cards/availableBrands/component/availableBrands.disabled.clientScripts.js
+++ /dev/null
@@ -1,4 +0,0 @@
-window.cardConfig = {
-    brands: ['visa', 'mc', 'amex', 'discover', 'cup', 'maestro', 'bijcard', 'diners', 'jcb', 'synchrony_cbcc'],
-    showBrandsUnderCardNumber: false
-};
diff --git a/packages/e2e/tests/cards/availableBrands/component/availableBrands.test.js b/packages/e2e/tests/cards/availableBrands/component/availableBrands.test.js
index 86f379c135..e70f2cc754 100644
--- a/packages/e2e/tests/cards/availableBrands/component/availableBrands.test.js
+++ b/packages/e2e/tests/cards/availableBrands/component/availableBrands.test.js
@@ -8,24 +8,17 @@ fixture`Cards - Available brands on Card Component`.page(CARDS_URL).beforeEach(a
     cardComponent = new CardComponent('.card-field');
 });
 
-test('#1 Available brands dont show underneath Card Number field if property `showBrandsUnderCardNumber` is set to false', async t => {
-    // Wait for field to appear in DOM
-    await cardComponent.numHolder();
-    const brandsInsidePaymentMethod = Selector('.adyen-checkout__card__brands');
-    await t.expect(brandsInsidePaymentMethod.find('img').count).eql(0);
-}).clientScripts('./availableBrands.disabled.clientScripts.js');
-
 /**
  * NOTE: this test ALWAYS fails if other test files are run i.e. only if this fixture is run in isolation does this test pass
  * So it is a false negative from TestCafe.
  */
-test('#2 Available brands show underneath Card Number field by default', async t => {
+test('#1 Available brands show underneath Card Number field by default', async t => {
     await cardComponent.numHolder();
     const brandsInsidePaymentMethod = Selector('.adyen-checkout__card__brands');
     await t.expect(brandsInsidePaymentMethod.find('img').count).eql(10);
 }).clientScripts('./availableBrands.clientScripts.js');
 
-test('#3 Available brands show underneath Card Number field but with excluded brands missing', async t => {
+test('#2 Available brands show underneath Card Number field but with excluded brands missing', async t => {
     await cardComponent.numHolder();
     const brandsInsidePaymentMethod = Selector('.adyen-checkout__card__brands');
     await t.expect(brandsInsidePaymentMethod.find('img').count).eql(7);
diff --git a/packages/lib/src/components/Card/Card.tsx b/packages/lib/src/components/Card/Card.tsx
index cc374e410e..cf8064da37 100644
--- a/packages/lib/src/components/Card/Card.tsx
+++ b/packages/lib/src/components/Card/Card.tsx
@@ -36,7 +36,6 @@ export class CardElement extends UIElement<CardConfiguration> {
 
     protected static defaultProps = {
         onBinLookup: () => {},
-        showBrandsUnderCardNumber: true,
         showFormInstruction: true,
         _disableClickToPay: false
     };
@@ -134,8 +133,7 @@ export class CardElement extends UIElement<CardConfiguration> {
     }
 
     public onBrand = event => {
-        this.eventEmitter.emit('brand', { ...event, brand: event.brand === 'card' ? null : event.brand });
-        if (this.props.onBrand) this.props.onBrand(event);
+        this.props.onBrand?.(event);
     };
 
     processBinLookupResponse(binLookupResponse: BinLookupResponse, isReset = false) {
diff --git a/packages/lib/src/components/Card/components/CardInput/CardInput.test.tsx b/packages/lib/src/components/Card/components/CardInput/CardInput.test.tsx
index 3fb6a24d5d..874524d11b 100644
--- a/packages/lib/src/components/Card/components/CardInput/CardInput.test.tsx
+++ b/packages/lib/src/components/Card/components/CardInput/CardInput.test.tsx
@@ -27,8 +27,7 @@ const cardInputRequiredProps = {
     clientKey: 'xxxx',
     loadingContext: 'test',
     resources: global.resources,
-    brandsIcons: [],
-    showBrandsUnderCardNumber: true
+    brandsIcons: []
 };
 
 const getWrapper = ui => {
@@ -54,22 +53,7 @@ describe('CardInput', () => {
 });
 
 describe('CardInput - Brands beneath Card Number field', () => {
-    test('should not render brands if property `showBrandsUnderCardNumber` is set to false', () => {
-        const wrapper = getWrapper(<CardInput {...cardInputRequiredProps} showBrandsUnderCardNumber={false} />);
-        expect(wrapper.find('span.adyen-checkout__card__brands').exists()).toBeFalsy();
-    });
-
-    test('should render brands if property `showBrandsUnderCardNumber` is set', () => {
-        const brandsIcons = [
-            { name: 'visa', icon: 'visa.png' },
-            { name: 'mc', icon: 'mc.png' }
-        ];
-        const wrapper = getWrapper(<CardInput {...cardInputRequiredProps} showBrandsUnderCardNumber brandsIcons={brandsIcons} />);
-        expect(wrapper.find('.adyen-checkout__card__brands__brand-wrapper')).toHaveLength(2);
-        expect(wrapper.find('.adyen-checkout__card__brands__brand-wrapper--disabled')).toHaveLength(0);
-    });
-
-    test('should render brands if property `showBrandsUnderCardNumber` is not set', () => {
+    test('should render brands under Card number field', () => {
         const brandsIcons = [
             { name: 'visa', icon: 'visa.png' },
             { name: 'mc', icon: 'mc.png' }
diff --git a/packages/lib/src/components/Card/components/CardInput/components/CardFields.tsx b/packages/lib/src/components/Card/components/CardInput/components/CardFields.tsx
index ec418b5a0c..c80a6648ea 100644
--- a/packages/lib/src/components/Card/components/CardInput/components/CardFields.tsx
+++ b/packages/lib/src/components/Card/components/CardInput/components/CardFields.tsx
@@ -28,7 +28,6 @@ export default function CardFields({
     expiryDatePolicy,
     onFocusField,
     showBrandIcon,
-    showBrandsUnderCardNumber,
     valid,
     showContextualElement
 }: CardFieldsProps) {
@@ -62,7 +61,7 @@ export default function CardFields({
                 dualBrandingSelected={dualBrandingSelected}
             />
 
-            {showBrandsUnderCardNumber && <AvailableBrands activeBrand={brand} brands={allowedBrands} />}
+            <AvailableBrands activeBrand={brand} brands={allowedBrands} />
 
             <div
                 className={classNames('adyen-checkout__card__exp-cvc adyen-checkout__field-wrapper', {
diff --git a/packages/lib/src/components/Card/components/CardInput/components/CardFieldsWrapper.tsx b/packages/lib/src/components/Card/components/CardInput/components/CardFieldsWrapper.tsx
index ac8fcb80f7..5cf21cda6f 100644
--- a/packages/lib/src/components/Card/components/CardInput/components/CardFieldsWrapper.tsx
+++ b/packages/lib/src/components/Card/components/CardInput/components/CardFieldsWrapper.tsx
@@ -61,7 +61,6 @@ export const CardFieldsWrapper = ({
     positionHolderNameOnTop,
     // For CardFields > CardNumber
     showBrandIcon,
-    showBrandsUnderCardNumber,
     showContextualElement,
     //
     iOSFocusedField,
@@ -86,7 +85,6 @@ export const CardFieldsWrapper = ({
 
             <CardFields
                 showBrandIcon={showBrandIcon}
-                showBrandsUnderCardNumber={showBrandsUnderCardNumber}
                 showContextualElement={showContextualElement}
                 brand={sfpState.brand}
                 brandsIcons={brandsIcons}
diff --git a/packages/lib/src/components/Card/components/CardInput/components/types.ts b/packages/lib/src/components/Card/components/CardInput/components/types.ts
index 9462a5b270..9e22d53a52 100644
--- a/packages/lib/src/components/Card/components/CardInput/components/types.ts
+++ b/packages/lib/src/components/Card/components/CardInput/components/types.ts
@@ -22,7 +22,6 @@ export interface CardFieldsProps {
     expiryDatePolicy?: DatePolicyType;
     onFocusField?: any;
     showBrandIcon?: boolean;
-    showBrandsUnderCardNumber: boolean;
     valid?: any;
     showContextualElement?: boolean;
 }
diff --git a/packages/lib/src/components/Card/components/CardInput/defaultProps.ts b/packages/lib/src/components/Card/components/CardInput/defaultProps.ts
index ab40c0dab0..3ebaf9fb0d 100644
--- a/packages/lib/src/components/Card/components/CardInput/defaultProps.ts
+++ b/packages/lib/src/components/Card/components/CardInput/defaultProps.ts
@@ -12,7 +12,6 @@ export default {
     enableStoreDetails: false,
     hasCVC: true,
     showBrandIcon: true,
-    showBrandsUnderCardNumber: true,
     positionHolderNameOnTop: false,
     billingAddressRequired: false,
     billingAddressMode: AddressModeOptions.full,
diff --git a/packages/lib/src/components/Card/components/CardInput/types.ts b/packages/lib/src/components/Card/components/CardInput/types.ts
index 4fd459364f..0a1c8722e8 100644
--- a/packages/lib/src/components/Card/components/CardInput/types.ts
+++ b/packages/lib/src/components/Card/components/CardInput/types.ts
@@ -119,7 +119,6 @@ export interface CardInputProps {
     positionHolderNameOnTop?: boolean;
     resources: Resources;
     setComponentRef?: (ref) => void;
-    showBrandsUnderCardNumber: boolean;
     showBrandIcon?: boolean;
     showFormInstruction?: boolean;
     showInstallmentAmounts?: boolean;
diff --git a/packages/lib/src/components/Card/components/CardInput/utils.ts b/packages/lib/src/components/Card/components/CardInput/utils.ts
index ff7172f8dc..f639f9cdc5 100644
--- a/packages/lib/src/components/Card/components/CardInput/utils.ts
+++ b/packages/lib/src/components/Card/components/CardInput/utils.ts
@@ -125,7 +125,6 @@ export const extractPropsForCardFields = (props: CardInputProps) => {
         positionHolderNameOnTop: props.positionHolderNameOnTop,
         // Extract props for CardFields > CardNumber
         showBrandIcon: props.showBrandIcon,
-        showBrandsUnderCardNumber: props.showBrandsUnderCardNumber,
         showContextualElement: props.showContextualElement,
         // Extract props for StoredCardFields
         lastFour: props.lastFour,
diff --git a/packages/lib/src/components/Card/types.ts b/packages/lib/src/components/Card/types.ts
index 89aeff4824..a9d0d63523 100644
--- a/packages/lib/src/components/Card/types.ts
+++ b/packages/lib/src/components/Card/types.ts
@@ -56,12 +56,6 @@ export interface CardConfiguration extends UIElementProps {
     /** List of brands accepted by the component */
     brands?: string[];
 
-    /**
-     * Show/hide available card brands under the Card number field
-     * @defaultValue `false`
-     */
-    showBrandsUnderCardNumber?: boolean;
-
     /**
      * Position holder name above card number field (instead of having it after the security code field)
      * @defaultValue `false`
diff --git a/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodBrands/CompactView.test.tsx b/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodBrands/CompactView.test.tsx
deleted file mode 100644
index 5fd32cfc4e..0000000000
--- a/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodBrands/CompactView.test.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { h } from 'preact';
-import { mount } from 'enzyme';
-import CompactView from './CompactView';
-import PaymentMethodIcon from '../PaymentMethodIcon';
-
-const brands = [
-    { name: 'visa', icon: 'visa.png' },
-    { name: 'mc', icon: 'mc.png' },
-    { name: 'amex', icon: 'amex.png' },
-    { name: 'discovery', icon: 'discovery.png' },
-    { name: 'vpay', icon: 'vpay.png' },
-    { name: 'maestro', icon: 'maestro.png' }
-];
-
-describe('CompactView', () => {
-    test('should render the 4 brands', () => {
-        const wrapper = mount(<CompactView allowedBrands={brands.slice(0, 4)} isPaymentMethodSelected={false} />);
-        expect(wrapper.find(PaymentMethodIcon)).toHaveLength(4);
-    });
-
-    test('should render the 3 brands and +2 label', () => {
-        const wrapper = mount(<CompactView allowedBrands={brands.slice(0, 5)} isPaymentMethodSelected={false} />);
-        expect(wrapper.find(PaymentMethodIcon)).toHaveLength(3);
-        expect(wrapper.find('.adyen-checkout__payment-method__brand-number').text()).toBe('+2');
-    });
-
-    test('should render 3 brands and +3 label', () => {
-        const wrapper = mount(<CompactView allowedBrands={brands} isPaymentMethodSelected={false} />);
-        expect(wrapper.find(PaymentMethodIcon)).toHaveLength(3);
-        expect(wrapper.find('.adyen-checkout__payment-method__brand-number').text()).toBe('+3');
-    });
-    test('should not render if payment method is selected', () => {
-        const wrapper = mount(<CompactView allowedBrands={brands} isPaymentMethodSelected />);
-        expect(wrapper.find('.adyen-checkout__payment-method__brand-number').length).toBe(0);
-    });
-});
diff --git a/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodBrands/CompactView.tsx b/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodBrands/CompactView.tsx
deleted file mode 100644
index 3661bad1c8..0000000000
--- a/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodBrands/CompactView.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { h } from 'preact';
-import PaymentMethodIcon from '../PaymentMethodIcon';
-import { BrandConfiguration } from '../../../../Card/types';
-import { getFullBrandName } from '../../../../Card/components/CardInput/utils';
-
-interface CompactViewProps {
-    allowedBrands: Array<BrandConfiguration>; // A set of brands filtered to exclude those that can never appear in the UI
-    isPaymentMethodSelected: boolean;
-}
-
-const prepareVisibleBrands = (allowedBrands: Array<BrandConfiguration>) => {
-    const visibleBrands = allowedBrands.length <= 4 ? allowedBrands : allowedBrands.slice(0, 3);
-    return {
-        visibleBrands,
-        leftBrandsAmount: allowedBrands.length - visibleBrands.length
-    };
-};
-
-const CompactView = ({ allowedBrands, isPaymentMethodSelected }: CompactViewProps) => {
-    if (isPaymentMethodSelected) {
-        return null;
-    }
-
-    const { visibleBrands, leftBrandsAmount } = prepareVisibleBrands(allowedBrands);
-    return (
-        <span className="adyen-checkout__payment-method__brands">
-            {visibleBrands.map(brand => (
-                <PaymentMethodIcon key={brand.name} altDescription={getFullBrandName(brand.name)} type={brand.name} src={brand.icon} />
-            ))}
-            {leftBrandsAmount !== 0 && <span className="adyen-checkout__payment-method__brand-number">+{leftBrandsAmount}</span>}
-        </span>
-    );
-};
-
-export default CompactView;
diff --git a/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodBrands/PaymentMethodBrands.test.tsx b/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodBrands/PaymentMethodBrands.test.tsx
index 6318d964eb..9c1a57d677 100644
--- a/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodBrands/PaymentMethodBrands.test.tsx
+++ b/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodBrands/PaymentMethodBrands.test.tsx
@@ -1,31 +1,47 @@
 import { h } from 'preact';
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/preact';
 import PaymentMethodBrands from './PaymentMethodBrands';
-import CompactView from './CompactView';
-import PaymentMethodIcon from '../PaymentMethodIcon';
-
-const brands = [
-    { name: 'visa', icon: 'visa.png' },
-    { name: 'mc', icon: 'mc.png' },
-    { name: 'amex', icon: 'amex.png' },
-    { name: 'discovery', icon: 'discovery.png' },
-    { name: 'vpay', icon: 'vpay.png' },
-    { name: 'maestro', icon: 'maestro.png' }
-];
 
 describe('PaymentMethodBrands', () => {
-    test('should render compact view if prop is set', () => {
-        const wrapper = mount(<PaymentMethodBrands brands={brands} isPaymentMethodSelected={false} isCompactView />);
-        expect(wrapper.find(CompactView)).toHaveLength(1);
+    test('should not render anything if payment method is selected', () => {
+        const brands = [{ name: 'visa', icon: 'visa.png' }];
+        const { container } = render(<PaymentMethodBrands brands={brands} isPaymentMethodSelected={true} />);
+
+        expect(container).toBeEmptyDOMElement();
     });
 
-    test('should render compact view if prop is not', () => {
-        const wrapper = mount(<PaymentMethodBrands brands={brands} isPaymentMethodSelected />);
-        expect(wrapper.find(CompactView)).toHaveLength(1);
+    test('should render three brands', () => {
+        const brands = [
+            { name: 'visa', icon: 'visa.png' },
+            { name: 'mc', icon: 'mc.png' },
+            { name: 'amex', icon: 'amex.png' }
+        ];
+
+        render(<PaymentMethodBrands brands={brands} isPaymentMethodSelected={false} />);
+
+        screen.getByAltText('VISA');
+        screen.getByAltText('MasterCard');
+        screen.getByAltText('American Express');
+
+        expect(screen.queryByText(/\+/)).toBeNull();
     });
 
-    test('should not render compact view if prop is set to false', () => {
-        const wrapper = mount(<PaymentMethodBrands brands={brands} isPaymentMethodSelected isCompactView={false} />);
-        expect(wrapper.find(PaymentMethodIcon)).toHaveLength(6);
+    test('should render three brands AND number of left over brands', () => {
+        const brands = [
+            { name: 'visa', icon: 'visa.png' },
+            { name: 'mc', icon: 'mc.png' },
+            { name: 'amex', icon: 'amex.png' },
+            { name: 'discovery', icon: 'discovery.png' },
+            { name: 'vpay', icon: 'vpay.png' },
+            { name: 'maestro', icon: 'maestro.png' }
+        ];
+
+        render(<PaymentMethodBrands brands={brands} isPaymentMethodSelected={false} />);
+
+        screen.getByAltText('VISA');
+        screen.getByAltText('MasterCard');
+        screen.getByAltText('American Express');
+
+        screen.getByText('+3');
     });
 });
diff --git a/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodBrands/PaymentMethodBrands.tsx b/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodBrands/PaymentMethodBrands.tsx
index bde7244a87..6bf1454144 100644
--- a/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodBrands/PaymentMethodBrands.tsx
+++ b/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodBrands/PaymentMethodBrands.tsx
@@ -1,41 +1,36 @@
 import { h } from 'preact';
-import PaymentMethodIcon from '../PaymentMethodIcon';
 import { BrandConfiguration } from '../../../../Card/types';
-import CompactView from './CompactView';
+import PaymentMethodIcon from '../PaymentMethodIcon';
 import { getFullBrandName } from '../../../../Card/components/CardInput/utils';
 
+const prepareVisibleBrands = (allowedBrands: Array<BrandConfiguration>) => {
+    const visibleBrands = allowedBrands.length <= 4 ? allowedBrands : allowedBrands.slice(0, 3);
+    return {
+        visibleBrands,
+        leftBrandsAmount: allowedBrands.length - visibleBrands.length
+    };
+};
+
 interface PaymentMethodBrandsProps {
     brands: Array<BrandConfiguration>;
-    excludedUIBrands?: Array<string>; // A list of brands that can never appear in the UI
+    excludedUIBrands?: Array<string>;
     isPaymentMethodSelected: boolean;
-    activeBrand?: string;
-    isCompactView?: boolean;
 }
 
-const PaymentMethodBrands = ({
-    activeBrand,
-    brands,
-    excludedUIBrands = [],
-    isPaymentMethodSelected,
-    isCompactView = true
-}: PaymentMethodBrandsProps) => {
-    // A set of brands filtered to exclude those that can never appear in the UI
+const PaymentMethodBrands = ({ brands, excludedUIBrands = [], isPaymentMethodSelected }: PaymentMethodBrandsProps) => {
+    if (isPaymentMethodSelected) {
+        return null;
+    }
+
     const allowedBrands = brands.filter(brand => !excludedUIBrands?.includes(brand.name));
+    const { visibleBrands, leftBrandsAmount } = prepareVisibleBrands(allowedBrands);
 
-    if (isCompactView) {
-        return <CompactView allowedBrands={allowedBrands} isPaymentMethodSelected={isPaymentMethodSelected} />;
-    }
     return (
         <span className="adyen-checkout__payment-method__brands">
-            {allowedBrands.map(brand => (
-                <PaymentMethodIcon
-                    key={brand.name}
-                    altDescription={getFullBrandName(brand.name)}
-                    type={brand.name}
-                    src={brand.icon}
-                    disabled={activeBrand && activeBrand !== brand.name}
-                />
+            {visibleBrands.map(brand => (
+                <PaymentMethodIcon key={brand.name} altDescription={getFullBrandName(brand.name)} type={brand.name} src={brand.icon} />
             ))}
+            {leftBrandsAmount !== 0 && <span className="adyen-checkout__payment-method__brand-number">+{leftBrandsAmount}</span>}
         </span>
     );
 };
diff --git a/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodItem.test.tsx b/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodItem.test.tsx
index 1b0baaf53d..cc92b288d9 100644
--- a/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodItem.test.tsx
+++ b/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodItem.test.tsx
@@ -9,7 +9,6 @@ const paymentMethod = {
     props: {
         type: 'mytype'
     },
-    eventEmitter: { on: jest.fn(), off: jest.fn() },
     render: jest.fn()
 };
 
diff --git a/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodItem.tsx b/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodItem.tsx
index 0efb4cab46..2846e1c575 100644
--- a/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodItem.tsx
+++ b/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodItem.tsx
@@ -33,22 +33,9 @@ class PaymentMethodItem extends Component<PaymentMethodItemProps> {
     };
 
     public state = {
-        showDisableStoredPaymentMethodConfirmation: false,
-        activeBrand: null
+        showDisableStoredPaymentMethodConfirmation: false
     };
 
-    componentDidMount() {
-        this.props.paymentMethod.eventEmitter.on('brand', e => {
-            this.setState({ activeBrand: e.brand });
-        });
-    }
-
-    componentWillUnmount() {
-        this.props.paymentMethod.eventEmitter.off('brand', e => {
-            this.setState({ activeBrand: e.brand });
-        });
-    }
-
     public toggleDisableConfirmation = () => {
         this.setState({ showDisableStoredPaymentMethodConfirmation: !this.state.showDisableStoredPaymentMethodConfirmation });
     };
@@ -63,7 +50,7 @@ class PaymentMethodItem extends Component<PaymentMethodItemProps> {
         onSelect(paymentMethod);
     };
 
-    render({ paymentMethod, isSelected, isDisablingPaymentMethod, isLoaded, isLoading, standalone }, { activeBrand }) {
+    render({ paymentMethod, isSelected, isDisablingPaymentMethod, isLoaded, isLoading, standalone }) {
         const { i18n } = useCoreContext();
 
         if (!paymentMethod) {
@@ -136,11 +123,9 @@ class PaymentMethodItem extends Component<PaymentMethodItemProps> {
 
                     {showBrands && (
                         <PaymentMethodBrands
-                            activeBrand={activeBrand}
                             brands={paymentMethod.brands}
                             excludedUIBrands={BRAND_ICON_UI_EXCLUSION_LIST}
                             isPaymentMethodSelected={isSelected}
-                            isCompactView={paymentMethod.props.showBrandsUnderCardNumber}
                         />
                     )}
                 </div>
diff --git a/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodList.test.tsx b/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodList.test.tsx
index a7d9ba7f53..9e66f94abb 100644
--- a/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodList.test.tsx
+++ b/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodList.test.tsx
@@ -3,7 +3,6 @@ import PaymentMethodList from './PaymentMethodList';
 import { render, screen, within } from '@testing-library/preact';
 import { mock } from 'jest-mock-extended';
 import UIElement from '../../../internal/UIElement/UIElement';
-import EventEmitter from '../../../EventEmitter';
 import userEvent from '@testing-library/user-event';
 import Giftcard from '../../../Giftcard';
 import { Order, OrderStatus } from '../../../../types';
@@ -18,7 +17,6 @@ function createInstantPaymentMethods() {
             },
             _id: 'scheme-123456',
             displayName: 'Google Pay',
-            eventEmitter: mock<EventEmitter>(),
             render: () => <button data-testid="instant-googlepay">Pay with Google Pay</button>
         }),
         mock<UIElement>({
@@ -28,7 +26,6 @@ function createInstantPaymentMethods() {
             },
             _id: 'scheme-123456',
             displayName: 'Apple Pay',
-            eventEmitter: mock<EventEmitter>(),
             render: () => <button data-testid="instant-applepay">Pay with Apple Pay</button>
         })
     ];
@@ -42,8 +39,7 @@ function createPaymentMethodsMock() {
                 type: 'scheme'
             },
             _id: 'scheme-123456',
-            displayName: 'Card',
-            eventEmitter: mock<EventEmitter>()
+            displayName: 'Card'
         }),
         mock<UIElement>({
             props: {
@@ -51,8 +47,7 @@ function createPaymentMethodsMock() {
                 type: 'wechat'
             },
             _id: 'google-pay-123456',
-            displayName: 'WeChat',
-            eventEmitter: mock<EventEmitter>()
+            displayName: 'WeChat'
         }),
         mock<UIElement>({
             props: {
@@ -60,8 +55,7 @@ function createPaymentMethodsMock() {
                 type: 'pix'
             },
             _id: 'apple-pay-123456',
-            displayName: 'Pix',
-            eventEmitter: mock<EventEmitter>()
+            displayName: 'Pix'
         })
     ];
 }
diff --git a/packages/lib/src/components/EventEmitter.test.ts b/packages/lib/src/components/EventEmitter.test.ts
deleted file mode 100644
index 01212cbb54..0000000000
--- a/packages/lib/src/components/EventEmitter.test.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import EventEmitter from './EventEmitter';
-
-describe('EventEmitter', () => {
-    test('add/remove events', () => {
-        const myObject = new EventEmitter();
-        const eventFunction = jest.fn();
-
-        myObject.on('test', eventFunction);
-        expect(myObject.events['test'].length).toBe(1);
-
-        myObject.off('test', eventFunction);
-        expect(myObject.events['test'].length).toBe(0);
-    });
-
-    test('calls events on emit', () => {
-        const myObject = new EventEmitter();
-        const eventFunction = jest.fn();
-
-        myObject.on('test', eventFunction);
-        expect(myObject.events['test'].length).toBe(1);
-
-        myObject.emit('test', {});
-        expect(eventFunction.mock.calls.length).toBe(1);
-    });
-});
diff --git a/packages/lib/src/components/EventEmitter.ts b/packages/lib/src/components/EventEmitter.ts
deleted file mode 100644
index 6783aab256..0000000000
--- a/packages/lib/src/components/EventEmitter.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-class EventEmitter {
-    public events = {};
-
-    public on = (eventName: string, fn: Function): void => {
-        this.events[eventName] = this.events[eventName] || [];
-        this.events[eventName].push(fn);
-    };
-
-    public off = (eventName: string, fn: Function): void => {
-        if (this.events[eventName]) {
-            this.events[eventName] = this.events[eventName].reduce((acc, cur) => {
-                if (cur !== fn) acc.push(cur);
-                return acc;
-            }, []);
-        }
-    };
-
-    public emit = (eventName: string, data: any): void => {
-        if (this.events[eventName]) {
-            this.events[eventName].forEach(fn => {
-                fn(data);
-            });
-        }
-    };
-}
-
-export default EventEmitter;
diff --git a/packages/lib/src/components/internal/BaseElement/BaseElement.ts b/packages/lib/src/components/internal/BaseElement/BaseElement.ts
index 677bf82dbc..5bc03bf696 100644
--- a/packages/lib/src/components/internal/BaseElement/BaseElement.ts
+++ b/packages/lib/src/components/internal/BaseElement/BaseElement.ts
@@ -1,6 +1,5 @@
 import { ComponentChild, render } from 'preact';
 import getProp from '../../../utils/getProp';
-import EventEmitter from '../../EventEmitter';
 import uuid from '../../../utils/uuid';
 import AdyenCheckoutError from '../../../core/Errors/AdyenCheckoutError';
 import { ICore } from '../../../core/types';
@@ -13,7 +12,6 @@ class BaseElement<P extends BaseElementProps> implements IBaseElement {
     public props: P;
     public state: any = {};
     public _component;
-    public eventEmitter = new EventEmitter();
 
     protected _node: HTMLElement = null;
     protected readonly core: ICore;
diff --git a/yarn.lock b/yarn.lock
index a4a5b8e9bb..cf6da97917 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2506,14 +2506,7 @@
     "@types/node" "*"
     jest-mock "^29.7.0"
 
-"@jest/expect-utils@^29.6.3":
-  version "29.6.3"
-  resolved "https://registry.yarnpkg.com/@jest/expect-utils/-/expect-utils-29.6.3.tgz#5ef1a9689fdaa348da837c8be8d1219f56940ea3"
-  integrity sha512-nvOEW4YoqRKD9HBJ9OJ6przvIvP9qilp5nAn1462P5ZlL/MM9SgPEZFyjTGPfs7QkocdUsJa6KjHhyRn4ueItA==
-  dependencies:
-    jest-get-type "^29.6.3"
-
-"@jest/expect-utils@^29.7.0":
+"@jest/expect-utils@^29.5.0", "@jest/expect-utils@^29.7.0":
   version "29.7.0"
   resolved "https://registry.yarnpkg.com/@jest/expect-utils/-/expect-utils-29.7.0.tgz#023efe5d26a8a70f21677d0a1afc0f0a44e3a1c6"
   integrity sha512-GlsNBWiFQFCVi9QVSx7f5AgMeLxe9YCCs5PuP2O2LdjDAA8Jh9eX7lA1Jq/xdXw3Wb3hyvlFNfZIfcRetSzYcA==
@@ -9969,16 +9962,6 @@ jest-config@^29.7.0:
     slash "^3.0.0"
     strip-json-comments "^3.1.1"
 
-jest-diff@^29.6.3:
-  version "29.6.3"
-  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-29.6.3.tgz#365c6b037ea8e67d2f2af68bc018fc18d44311f0"
-  integrity sha512-3sw+AdWnwH9sSNohMRKA7JiYUJSRr/WS6+sEFfBuhxU5V5GlEVKfvUn8JuMHE0wqKowemR1C2aHy8VtXbaV8dQ==
-  dependencies:
-    chalk "^4.0.0"
-    diff-sequences "^29.6.3"
-    jest-get-type "^29.6.3"
-    pretty-format "^29.6.3"
-
 jest-diff@^29.7.0:
   version "29.7.0"
   resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-29.7.0.tgz#017934a66ebb7ecf6f205e84699be10afd70458a"
@@ -10033,7 +10016,7 @@ jest-environment-node@^29.7.0:
     jest-mock "^29.7.0"
     jest-util "^29.7.0"
 
-jest-get-type@^29.6.3:
+jest-get-type@^29.4.3, jest-get-type@^29.6.3:
   version "29.6.3"
   resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-29.6.3.tgz#36f499fdcea197c1045a127319c0481723908fd1"
   integrity sha512-zrteXnqYxfQh7l5FHyL38jL39di8H8rHoecLH3JNxH3BwOrBsNeabdap5e0I23lD4HHI8W5VFBZqG4Eaq5LNcw==
@@ -10084,17 +10067,7 @@ jest-leak-detector@^29.7.0:
     jest-get-type "^29.6.3"
     pretty-format "^29.7.0"
 
-jest-matcher-utils@^29.6.3:
-  version "29.6.3"
-  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-29.6.3.tgz#a7574092b635d96a38fa0a22d015fb596b9c2efc"
-  integrity sha512-6ZrMYINZdwduSt5Xu18/n49O1IgXdjsfG7NEZaQws9k69eTKWKcVbJBw/MZsjOZe2sSyJFmuzh8042XWwl54Zg==
-  dependencies:
-    chalk "^4.0.0"
-    jest-diff "^29.6.3"
-    jest-get-type "^29.6.3"
-    pretty-format "^29.6.3"
-
-jest-matcher-utils@^29.7.0:
+jest-matcher-utils@^29.5.0, jest-matcher-utils@^29.7.0:
   version "29.7.0"
   resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-29.7.0.tgz#ae8fec79ff249fd592ce80e3ee474e83a6c44f12"
   integrity sha512-sBkD+Xi9DtcChsI3L3u0+N0opgPYnCRPtGcQYrgXmR+hmt/fYfWAL0xRXYU8eWOdfuLgBe0YCW3AFtnRLagq/g==
@@ -10104,22 +10077,7 @@ jest-matcher-utils@^29.7.0:
     jest-get-type "^29.6.3"
     pretty-format "^29.7.0"
 
-jest-message-util@^29.6.3:
-  version "29.6.3"
-  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-29.6.3.tgz#bce16050d86801b165f20cfde34dc01d3cf85fbf"
-  integrity sha512-FtzaEEHzjDpQp51HX4UMkPZjy46ati4T5pEMyM6Ik48ztu4T9LQplZ6OsimHx7EuM9dfEh5HJa6D3trEftu3dA==
-  dependencies:
-    "@babel/code-frame" "^7.12.13"
-    "@jest/types" "^29.6.3"
-    "@types/stack-utils" "^2.0.0"
-    chalk "^4.0.0"
-    graceful-fs "^4.2.9"
-    micromatch "^4.0.4"
-    pretty-format "^29.6.3"
-    slash "^3.0.0"
-    stack-utils "^2.0.3"
-
-jest-message-util@^29.7.0:
+jest-message-util@^29.5.0, jest-message-util@^29.7.0:
   version "29.7.0"
   resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-29.7.0.tgz#8bc392e204e95dfe7564abbe72a404e28e51f7f3"
   integrity sha512-GBEV4GRADeP+qtB2+6u61stea8mGcOT4mCtrYISZwfu9/ISHFJ/5zOMXYbpBE9RsS5+Gb63DW4FgmnKJ79Kf6w==
@@ -10264,7 +10222,7 @@ jest-snapshot@^29.7.0:
     pretty-format "^29.7.0"
     semver "^7.5.3"
 
-jest-util@^29.0.0, jest-util@^29.7.0:
+jest-util@^29.0.0, jest-util@^29.5.0, jest-util@^29.7.0:
   version "29.7.0"
   resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-29.7.0.tgz#23c2b62bfb22be82b44de98055802ff3710fc0bc"
   integrity sha512-z6EbKajIpqGKU56y5KBUgy1dt1ihhQJgWzUlZHArA/+X2ad7Cb5iF+AK1EWVL/Bo7Rz9uurpqw6SiBCefUbCGA==
@@ -10288,18 +10246,6 @@ jest-util@^29.6.0:
     graceful-fs "^4.2.9"
     picomatch "^2.2.3"
 
-jest-util@^29.6.3:
-  version "29.6.3"
-  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-29.6.3.tgz#e15c3eac8716440d1ed076f09bc63ace1aebca63"
-  integrity sha512-QUjna/xSy4B32fzcKTSz1w7YYzgiHrjjJjevdRf61HYk998R5vVMMNmrHESYZVDS5DSWs+1srPLPKxXPkeSDOA==
-  dependencies:
-    "@jest/types" "^29.6.3"
-    "@types/node" "*"
-    chalk "^4.0.0"
-    ci-info "^3.2.0"
-    graceful-fs "^4.2.9"
-    picomatch "^2.2.3"
-
 jest-validate@^29.7.0:
   version "29.7.0"
   resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-29.7.0.tgz#7bf705511c64da591d46b15fce41400d52147d9c"
@@ -12517,7 +12463,7 @@ pretty-format@^27.0.2:
     ansi-styles "^5.0.0"
     react-is "^17.0.1"
 
-pretty-format@^29.0.0, pretty-format@^29.6.3:
+pretty-format@^29.0.0:
   version "29.6.3"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-29.6.3.tgz#d432bb4f1ca6f9463410c3fb25a0ba88e594ace7"
   integrity sha512-ZsBgjVhFAj5KeK+nHfF1305/By3lechHQSMWCTl8iHSbfOm2TN5nHEtFc/+W7fAyUeCs2n5iow72gld4gW0xDw==