diff --git a/packages/components/src/components/NewModal/NewModal.tsx b/packages/components/src/components/NewModal/NewModal.tsx
index f2636cee1ed..75886bba64f 100644
--- a/packages/components/src/components/NewModal/NewModal.tsx
+++ b/packages/components/src/components/NewModal/NewModal.tsx
@@ -28,7 +28,7 @@ import {
     withFrameProps,
 } from '../../utils/frameProps';
 import { TransientProps } from '../../utils/transientProps';
-import { NewModalIcon } from './NewModalIcon';
+import { NewModalIcon, type NewModalIconColors } from './NewModalIcon';
 
 export const allowedNewModalFrameProps = ['height'] as const satisfies FramePropsKeys[];
 type AllowedFrameProps = Pick<FrameProps, (typeof allowedNewModalFrameProps)[number]>;
@@ -247,4 +247,4 @@ NewModal.ModalBase = NewModalBase;
 NewModal.Icon = NewModalIcon;
 
 export { NewModal, NEW_MODAL_CONTENT_ID };
-export type { NewModalProps, NewModalSize };
+export type { NewModalProps, NewModalSize, NewModalIconColors };
diff --git a/packages/suite-desktop-ui/src/support/DesktopUpdater/EarlyAccessDisable.tsx b/packages/suite-desktop-ui/src/support/DesktopUpdater/EarlyAccessDisable.tsx
index 3b28a1dafa8..9e790d72b43 100644
--- a/packages/suite-desktop-ui/src/support/DesktopUpdater/EarlyAccessDisable.tsx
+++ b/packages/suite-desktop-ui/src/support/DesktopUpdater/EarlyAccessDisable.tsx
@@ -1,33 +1,15 @@
 import { useCallback, useState } from 'react';
 
-import styled from 'styled-components';
+import { useTheme } from 'styled-components';
 
 import { SUITE_URL } from '@trezor/urls';
 import { analytics, EventType } from '@trezor/suite-analytics';
 import { desktopApi } from '@trezor/suite-desktop-api';
-import { Button, Image } from '@trezor/components';
+import { Button, Column, NewModal, Paragraph } from '@trezor/components';
+import { spacings } from '@trezor/theme';
+import { NewModalIconColors } from '@trezor/components';
 
-import { Translation, Modal, TrezorLink } from 'src/components/suite';
-import { DialogModal } from 'src/components/suite/modals/Modal/DialogRenderer';
-
-import { ImageWrapper, Description, Title } from './styles';
-
-export const Link = styled(TrezorLink)`
-    width: 100%;
-`;
-
-const StyledModal = styled(Modal)`
-    ${Modal.BottomBar} {
-        > * {
-            flex: 1;
-        }
-    }
-`;
-
-// eslint-disable-next-line local-rules/no-override-ds-component
-const LinkButton = styled(Button)`
-    width: 100%;
-`;
+import { Translation, TrezorLink } from 'src/components/suite';
 
 interface EarlyAccessDisableProps {
     hideWindow: () => void;
@@ -36,6 +18,8 @@ interface EarlyAccessDisableProps {
 export const EarlyAccessDisable = ({ hideWindow }: EarlyAccessDisableProps) => {
     const [enabled, setEnabled] = useState(true);
 
+    const theme = useTheme();
+
     const allowPrerelease = useCallback(() => {
         analytics.report({
             type: EventType.SettingsGeneralEarlyAccess,
@@ -47,9 +31,19 @@ export const EarlyAccessDisable = ({ hideWindow }: EarlyAccessDisableProps) => {
         setEnabled(false);
     }, []);
 
+    const purpleModalColorBranding: NewModalIconColors = {
+        foreground: theme.iconAlertPurple,
+        background: theme.backgroundAlertPurpleSubtleOnElevationNegative,
+    };
+
+    const eapIconComponent = <NewModal.Icon iconName="eap" iconColor={purpleModalColorBranding} />;
+
     return enabled ? (
-        <StyledModal
-            bottomBarComponents={
+        <NewModal
+            iconComponent={eapIconComponent}
+            onCancel={hideWindow}
+            heading={<Translation id="TR_EARLY_ACCESS" />}
+            bottomContent={
                 <>
                     <Button onClick={allowPrerelease}>
                         <Translation id="TR_EARLY_ACCESS_DISABLE" />
@@ -60,33 +54,41 @@ export const EarlyAccessDisable = ({ hideWindow }: EarlyAccessDisableProps) => {
                 </>
             }
         >
-            <ImageWrapper>
-                <Image width={60} height={60} image="EARLY_ACCESS_DISABLE" />
-            </ImageWrapper>
-            <Title>
-                <Translation id="TR_EARLY_ACCESS_DISABLE_CONFIRM_TITLE" />
-            </Title>
-            <Description>
-                <Translation id="TR_EARLY_ACCESS_DISABLE_CONFIRM_DESCRIPTION" />
-            </Description>
-        </StyledModal>
+            <Column gap={spacings.xs} alignItems="start">
+                <Paragraph typographyStyle="highlight">
+                    <Translation id="TR_EARLY_ACCESS_DISABLE_CONFIRM_TITLE" />
+                </Paragraph>
+                <Paragraph variant="tertiary">
+                    <Translation id="TR_EARLY_ACCESS_DISABLE_CONFIRM_DESCRIPTION" />
+                </Paragraph>
+            </Column>
+        </NewModal>
     ) : (
-        <DialogModal
-            icon="check"
-            bodyHeading={<Translation id="TR_EARLY_ACCESS_LEFT_TITLE" />}
-            body={<Translation id="TR_EARLY_ACCESS_LEFT_DESCRIPTION" />}
-            bottomBarComponents={
+        <NewModal
+            iconComponent={eapIconComponent}
+            onCancel={hideWindow}
+            heading={<Translation id="TR_EARLY_ACCESS" />}
+            bottomContent={
                 <>
-                    <Link variant="nostyle" href={SUITE_URL}>
-                        <LinkButton icon="arrowUpRight" iconAlignment="right">
+                    <TrezorLink variant="nostyle" href={SUITE_URL}>
+                        <Button icon="arrowUpRight" iconAlignment="right" variant="primary">
                             <Translation id="TR_EARLY_ACCESS_REINSTALL" />
-                        </LinkButton>
-                    </Link>
+                        </Button>
+                    </TrezorLink>
                     <Button onClick={hideWindow} variant="tertiary">
                         <Translation id="TR_EARLY_ACCESS_SKIP_REINSTALL" />
                     </Button>
                 </>
             }
-        />
+        >
+            <Column gap={spacings.xs} alignItems="start">
+                <Paragraph typographyStyle="highlight">
+                    <Translation id="TR_EARLY_ACCESS_LEFT_TITLE" />
+                </Paragraph>
+                <Paragraph variant="tertiary">
+                    <Translation id="TR_EARLY_ACCESS_LEFT_DESCRIPTION" />
+                </Paragraph>
+            </Column>
+        </NewModal>
     );
 };
diff --git a/packages/suite-desktop-ui/src/support/DesktopUpdater/EarlyAccessEnable.tsx b/packages/suite-desktop-ui/src/support/DesktopUpdater/EarlyAccessEnable.tsx
index 84afcef66ee..6fb08b3fe90 100644
--- a/packages/suite-desktop-ui/src/support/DesktopUpdater/EarlyAccessEnable.tsx
+++ b/packages/suite-desktop-ui/src/support/DesktopUpdater/EarlyAccessEnable.tsx
@@ -1,33 +1,21 @@
 import { useCallback, useState } from 'react';
 
-import styled from 'styled-components';
+import { useTheme } from 'styled-components';
 
 import { analytics, EventType } from '@trezor/suite-analytics';
 import { desktopApi } from '@trezor/suite-desktop-api';
-import { Button, Paragraph, Tooltip, Image } from '@trezor/components';
+import {
+    Button,
+    Paragraph,
+    Tooltip,
+    NewModal,
+    Card,
+    Column,
+    NewModalIconColors,
+} from '@trezor/components';
+import { spacings } from '@trezor/theme';
 
-import { CheckItem, Translation, Modal } from 'src/components/suite';
-import { DialogModal } from 'src/components/suite/modals/Modal/DialogRenderer';
-
-import { Description, Divider } from './styles';
-
-const DescriptionWrapper = styled.div`
-    display: flex;
-`;
-
-const DescriptionTextWrapper = styled.div`
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: space-around;
-    margin-left: 20px;
-    text-align: left;
-`;
-
-// Checkbox has 80% max-width by default but it's nicer full width here.
-const Checkbox = styled(CheckItem)`
-    max-width: 100%;
-`;
+import { CheckItem, Translation } from 'src/components/suite';
 
 interface EarlyAccessEnableProps {
     hideWindow: () => void;
@@ -37,6 +25,8 @@ export const EarlyAccessEnable = ({ hideWindow }: EarlyAccessEnableProps) => {
     const [understood, setUnderstood] = useState(false);
     const [enabled, setEnabled] = useState(false);
 
+    const theme = useTheme();
+
     const allowPrerelease = useCallback(() => {
         analytics.report({
             type: EventType.SettingsGeneralEarlyAccess,
@@ -50,12 +40,19 @@ export const EarlyAccessEnable = ({ hideWindow }: EarlyAccessEnableProps) => {
 
     const checkForUpdates = useCallback(() => desktopApi.checkForUpdates(true), []);
 
+    const purpleModalColorBranding: NewModalIconColors = {
+        foreground: theme.iconAlertPurple,
+        background: theme.backgroundAlertPurpleSubtleOnElevationNegative,
+    };
+
+    const eapIconComponent = <NewModal.Icon iconName="eap" iconColor={purpleModalColorBranding} />;
+
     return enabled ? (
-        <DialogModal
-            icon="check"
-            bodyHeading={<Translation id="TR_EARLY_ACCESS_JOINED_TITLE" />}
-            body={<Translation id="TR_EARLY_ACCESS_JOINED_DESCRIPTION" />}
-            bottomBarComponents={
+        <NewModal
+            iconComponent={eapIconComponent}
+            heading={<Translation id="TR_EARLY_ACCESS_JOINED_TITLE" />}
+            onCancel={hideWindow}
+            bottomContent={
                 <>
                     <Button onClick={checkForUpdates}>
                         <Translation id="TR_EARLY_ACCESS_CHECK_UPDATE" />
@@ -69,13 +66,15 @@ export const EarlyAccessEnable = ({ hideWindow }: EarlyAccessEnableProps) => {
                     </Button>
                 </>
             }
-        />
+        >
+            <Translation id="TR_EARLY_ACCESS_JOINED_DESCRIPTION" />
+        </NewModal>
     ) : (
-        <Modal
+        <NewModal
+            iconComponent={eapIconComponent}
             heading={<Translation id="TR_EARLY_ACCESS" />}
-            isCancelable
             onCancel={hideWindow}
-            bottomBarComponents={
+            bottomContent={
                 <Tooltip
                     maxWidth={285}
                     content={
@@ -83,6 +82,7 @@ export const EarlyAccessEnable = ({ hideWindow }: EarlyAccessEnableProps) => {
                     }
                 >
                     <Button
+                        variant="primary"
                         onClick={allowPrerelease}
                         isDisabled={!understood}
                         data-testid="@settings/early-access-confirm-button"
@@ -92,29 +92,24 @@ export const EarlyAccessEnable = ({ hideWindow }: EarlyAccessEnableProps) => {
                 </Tooltip>
             }
         >
-            <DescriptionWrapper>
-                <Image width={60} height={60} image="EARLY_ACCESS" />
-                <DescriptionTextWrapper>
-                    <Paragraph typographyStyle="highlight">
-                        <Translation id="TR_EARLY_ACCESS_ENABLE_CONFIRM_TITLE" />
-                    </Paragraph>
-                    <Description>
-                        <Translation id="TR_EARLY_ACCESS_ENABLE_CONFIRM_DESCRIPTION" />
-                    </Description>
-                </DescriptionTextWrapper>
-            </DescriptionWrapper>
-            <Divider />
-            <Checkbox
-                data-testid="@settings/early-access-confirm-check"
-                title={
-                    <Paragraph typographyStyle="highlight">
-                        <Translation id="TR_EARLY_ACCESS_ENABLE_CONFIRM_CHECK" />
-                    </Paragraph>
-                }
-                description=""
-                isChecked={understood}
-                onClick={() => setUnderstood(!understood)}
-            />
-        </Modal>
+            <Column gap={spacings.xs} alignItems="start">
+                <Paragraph typographyStyle="highlight">
+                    <Translation id="TR_EARLY_ACCESS_ENABLE_CONFIRM_TITLE" />
+                </Paragraph>
+                <Paragraph variant="tertiary">
+                    <Translation id="TR_EARLY_ACCESS_ENABLE_CONFIRM_DESCRIPTION" />
+                </Paragraph>
+
+                <Card>
+                    <CheckItem
+                        data-testid="@settings/early-access-confirm-check"
+                        title={<Translation id="TR_EARLY_ACCESS_ENABLE_CONFIRM_CHECK" />}
+                        description=""
+                        isChecked={understood}
+                        onClick={() => setUnderstood(!understood)}
+                    />
+                </Card>
+            </Column>
+        </NewModal>
     );
 };