diff --git a/packages/components/src/components/Banner/Banner.stories.tsx b/packages/components/src/components/Banner/Banner.stories.tsx
index 3349a7f91ef7..0ac84f57b025 100644
--- a/packages/components/src/components/Banner/Banner.stories.tsx
+++ b/packages/components/src/components/Banner/Banner.stories.tsx
@@ -41,6 +41,7 @@ export const Banner: StoryObj<BannerProps> = {
     args: {
         children: 'Insert text here.',
         filled: true,
+        isLoading: false,
         variant: 'warning',
         icon: undefined,
         rightContent: <BannerComponent.Button>Click</BannerComponent.Button>,
diff --git a/packages/components/src/components/Banner/Banner.tsx b/packages/components/src/components/Banner/Banner.tsx
index 5cf523ed6e77..ff54cef1d6d6 100755
--- a/packages/components/src/components/Banner/Banner.tsx
+++ b/packages/components/src/components/Banner/Banner.tsx
@@ -28,6 +28,7 @@ import { useMediaQuery } from '../../utils/useMediaQuery';
 import { useElevation } from '../ElevationContext/ElevationContext';
 import { Column, Row } from '../Flex/Flex';
 import { variables } from '../../config';
+import { Spinner } from '../loaders/Spinner/Spinner';
 
 export const allowedBannerFrameProps = ['margin'] as const satisfies FramePropsKeys[];
 type AllowedFrameProps = Pick<FrameProps, (typeof allowedBannerFrameProps)[number]>;
@@ -44,6 +45,7 @@ export type BannerProps = AllowedFrameProps & {
     'data-testid'?: string;
     spacingX?: SpacingX;
     color?: Color;
+    isLoading?: boolean;
 };
 
 type WrapperParams = TransientProps<AllowedFrameProps> & {
@@ -94,6 +96,7 @@ export const Banner = ({
     rightContent,
     spacingX = 'lg',
     'data-testid': dataTest,
+    isLoading = false,
     ...rest
 }: BannerProps) => {
     const theme = useTheme();
@@ -133,7 +136,8 @@ export const Banner = ({
             data-testid={dataTest}
             {...frameProps}
         >
-            {withIcon && (
+            {isLoading && <Spinner size={22} />}
+            {!isLoading && withIcon && (
                 <Icon
                     size={20}
                     name={icon === true ? mapVariantToIcon({ $variant: variant }) : icon}
diff --git a/packages/suite/src/components/suite/NotificationCard.tsx b/packages/suite/src/components/suite/NotificationCard.tsx
deleted file mode 100644
index 4a2afc688cd1..000000000000
--- a/packages/suite/src/components/suite/NotificationCard.tsx
+++ /dev/null
@@ -1,174 +0,0 @@
-import { ReactNode } from 'react';
-
-import styled, { DefaultTheme, useTheme } from 'styled-components';
-
-import {
-    Button,
-    Spinner,
-    variables,
-    ButtonProps,
-    useElevation,
-    ElevationUp,
-    IconName,
-    Icon,
-} from '@trezor/components';
-import { Elevation, borders, spacingsPx, typography } from '@trezor/theme';
-import { UIVariant } from '@trezor/components/src/config/types';
-
-import { TrezorLink } from './TrezorLink';
-
-// TODO: move to components
-
-type ButtonType = ButtonProps & { href?: string };
-
-export type NotificationCardVariant = Extract<UIVariant, 'info' | 'warning' | 'destructive'>;
-
-interface NotificationCardProps {
-    children: ReactNode;
-    variant: NotificationCardVariant;
-    isLoading?: boolean;
-    button?: ButtonType;
-    className?: string;
-    ['data-testid']?: string;
-    icon?: IconName;
-}
-
-const getIcon = (variant: NotificationCardVariant): IconName | null => {
-    switch (variant) {
-        case 'info':
-            return 'info';
-        case 'warning':
-            return 'warningTriangle';
-        case 'destructive':
-            return 'warningTriangle';
-        default:
-            return null;
-    }
-};
-const getButtonVariant = (variant: NotificationCardVariant) => {
-    switch (variant) {
-        case 'info':
-            return 'info';
-        case 'warning':
-            return 'warning';
-        case 'destructive':
-            return 'destructive';
-        default:
-            return 'tertiary';
-    }
-};
-
-const getMainColor = (variant: NotificationCardVariant, theme: DefaultTheme) => {
-    switch (variant) {
-        case 'info':
-            return theme.backgroundAlertBlueBold;
-        case 'warning':
-            return theme.backgroundAlertYellowBold;
-        case 'destructive':
-            return theme.backgroundAlertRedBold;
-        default:
-            return 'transparent';
-    }
-};
-const getBackgroundColor = ({
-    $elevation,
-    $variant,
-    theme,
-}: {
-    $elevation: Elevation;
-    $variant: NotificationCardVariant;
-    theme: DefaultTheme;
-}) => {
-    const elevationPart = $elevation === -1 ? 'Negative' : $elevation;
-
-    switch ($variant) {
-        case 'info':
-            return theme[`backgroundAlertBlueSubtleOnElevation${elevationPart}`];
-        case 'warning':
-            return theme[`backgroundAlertYellowSubtleOnElevation${elevationPart}`];
-        case 'destructive':
-            return theme[`backgroundAlertRedSubtleOnElevation${elevationPart}`];
-        default:
-            return 'transparent';
-    }
-};
-
-const Wrapper = styled.div<{ $elevation: Elevation; $variant: NotificationCardVariant }>`
-    display: flex;
-    border-radius: ${borders.radii.sm};
-    padding: ${spacingsPx.sm} ${spacingsPx.lg};
-    align-items: center;
-    background: ${getBackgroundColor};
-    margin-bottom: ${spacingsPx.xs};
-    gap: ${spacingsPx.md};
-`;
-
-const IconWrapper = styled.div`
-    @media screen and (max-width: ${variables.SCREEN_SIZE.SM}) {
-        display: none;
-    }
-`;
-
-const Body = styled.div`
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-    color: ${({ theme }) => theme.textDefault};
-    ${typography.hint}
-`;
-
-const CardButton = ({ href, ...props }: ButtonType) => {
-    if (href) {
-        return (
-            <TrezorLink variant="nostyle" href={href}>
-                <Button textWrap={false} {...props} />
-            </TrezorLink>
-        );
-    }
-
-    return <Button textWrap={false} {...props} />;
-};
-
-export const NotificationCard = ({
-    variant,
-    button: buttonProps,
-    children,
-    className,
-    isLoading,
-    icon,
-    ...props
-}: NotificationCardProps) => {
-    const theme = useTheme();
-    const { elevation } = useElevation();
-
-    const buttonVariant = getButtonVariant(variant);
-    const iconElement = icon ?? getIcon(variant);
-
-    return (
-        <Wrapper
-            $variant={variant}
-            className={className}
-            $elevation={elevation}
-            data-testid={props['data-testid']}
-        >
-            <ElevationUp>
-                <IconWrapper>
-                    {isLoading ? (
-                        <Spinner size={22} />
-                    ) : (
-                        iconElement && (
-                            <Icon
-                                name={iconElement}
-                                size={22}
-                                color={getMainColor(variant, theme)}
-                            />
-                        )
-                    )}
-                </IconWrapper>
-                <Body>{children}</Body>
-                {buttonProps && <CardButton size="tiny" variant={buttonVariant} {...buttonProps} />}
-            </ElevationUp>
-        </Wrapper>
-    );
-};
diff --git a/packages/suite/src/components/suite/index.tsx b/packages/suite/src/components/suite/index.tsx
index b3fdc3640697..be39f242e16d 100644
--- a/packages/suite/src/components/suite/index.tsx
+++ b/packages/suite/src/components/suite/index.tsx
@@ -3,7 +3,6 @@ import { DeviceConfirmImage } from './DeviceConfirmImage';
 import { CheckItem } from './CheckItem';
 import { PrerequisitesGuide } from './PrerequisitesGuide/PrerequisitesGuide';
 import { WelcomeLayout } from './layouts/WelcomeLayout/WelcomeLayout';
-import { NotificationCard } from './NotificationCard';
 import { WordInput } from './WordInput';
 import { WordInputAdvanced } from './WordInputAdvanced';
 import { Loading } from './Loading';
@@ -60,7 +59,6 @@ export {
     CheckItem,
     PrerequisitesGuide,
     WelcomeLayout,
-    NotificationCard,
     FiatValue,
     Translation,
     WordInput,
diff --git a/packages/suite/src/components/wallet/WalletLayout/AccountBanners/AccountImported.tsx b/packages/suite/src/components/wallet/WalletLayout/AccountBanners/AccountImported.tsx
index 8f1af1848c5b..4c113fb96758 100644
--- a/packages/suite/src/components/wallet/WalletLayout/AccountBanners/AccountImported.tsx
+++ b/packages/suite/src/components/wallet/WalletLayout/AccountBanners/AccountImported.tsx
@@ -1,4 +1,6 @@
-import { NotificationCard, Translation } from 'src/components/suite';
+import { Banner } from '@trezor/components';
+
+import { Translation } from 'src/components/suite';
 import type { Account } from 'src/types/wallet/index';
 
 type AccountImportedProps = {
@@ -7,7 +9,7 @@ type AccountImportedProps = {
 
 export const AccountImported = ({ account }: AccountImportedProps) =>
     account?.imported ? (
-        <NotificationCard variant="info">
+        <Banner variant="info">
             <Translation id="TR_ACCOUNT_IMPORTED_ANNOUNCEMENT" />
-        </NotificationCard>
+        </Banner>
     ) : null;
diff --git a/packages/suite/src/components/wallet/WalletLayout/AccountBanners/AccountOutOfSync.tsx b/packages/suite/src/components/wallet/WalletLayout/AccountBanners/AccountOutOfSync.tsx
index 0acb8ffc5fe9..5fe8f7a25f66 100644
--- a/packages/suite/src/components/wallet/WalletLayout/AccountBanners/AccountOutOfSync.tsx
+++ b/packages/suite/src/components/wallet/WalletLayout/AccountBanners/AccountOutOfSync.tsx
@@ -1,4 +1,6 @@
-import { NotificationCard, Translation } from 'src/components/suite';
+import { Banner } from '@trezor/components';
+
+import { Translation } from 'src/components/suite';
 import type { Account } from 'src/types/wallet/index';
 
 type AccountOutOfSyncProps = {
@@ -7,7 +9,7 @@ type AccountOutOfSyncProps = {
 
 export const AccountOutOfSync = ({ account }: AccountOutOfSyncProps) =>
     account?.backendType === 'coinjoin' && account.status === 'out-of-sync' ? (
-        <NotificationCard variant="warning">
+        <Banner variant="warning">
             <Translation id="TR_ACCOUNT_OUT_OF_SYNC" />
-        </NotificationCard>
+        </Banner>
     ) : null;
diff --git a/packages/suite/src/components/wallet/WalletLayout/AccountBanners/AuthConfirmFailed.tsx b/packages/suite/src/components/wallet/WalletLayout/AccountBanners/AuthConfirmFailed.tsx
index 5892e7d4ea17..84b30d1423b0 100644
--- a/packages/suite/src/components/wallet/WalletLayout/AccountBanners/AuthConfirmFailed.tsx
+++ b/packages/suite/src/components/wallet/WalletLayout/AccountBanners/AuthConfirmFailed.tsx
@@ -1,6 +1,7 @@
 import { authConfirm } from '@suite-common/wallet-core';
+import { Banner } from '@trezor/components';
 
-import { NotificationCard, Translation } from 'src/components/suite';
+import { Translation } from 'src/components/suite';
 import { useDevice, useDispatch } from 'src/hooks/suite';
 
 export const AuthConfirmFailed = () => {
@@ -12,17 +13,20 @@ export const AuthConfirmFailed = () => {
     const handleClick = () => dispatch(authConfirm());
 
     return (
-        <NotificationCard
+        <Banner
             variant="warning"
-            button={{
-                onClick: handleClick,
-                isLoading: isLocked(),
-                icon: 'refresh',
-                'data-testid': '@passphrase-mismatch/retry-button',
-                children: <Translation id="TR_AUTH_CONFIRM_FAILED_RETRY" />,
-            }}
+            rightContent={
+                <Banner.Button
+                    onClick={handleClick}
+                    isLoading={isLocked()}
+                    icon="refresh"
+                    data-testid="@passphrase-mismatch/retry-button"
+                >
+                    <Translation id="TR_AUTH_CONFIRM_FAILED_RETRY" />
+                </Banner.Button>
+            }
         >
             <Translation id="TR_AUTH_CONFIRM_FAILED_TITLE" />
-        </NotificationCard>
+        </Banner>
     );
 };
diff --git a/packages/suite/src/components/wallet/WalletLayout/AccountBanners/BackendDisconnected.tsx b/packages/suite/src/components/wallet/WalletLayout/AccountBanners/BackendDisconnected.tsx
index 5c77737124d5..006d880b71ec 100644
--- a/packages/suite/src/components/wallet/WalletLayout/AccountBanners/BackendDisconnected.tsx
+++ b/packages/suite/src/components/wallet/WalletLayout/AccountBanners/BackendDisconnected.tsx
@@ -1,7 +1,8 @@
 import { tryGetAccountIdentity, isTrezorConnectBackendType } from '@suite-common/wallet-utils';
 import type { NetworkSymbol } from '@suite-common/wallet-config';
+import { Banner } from '@trezor/components';
 
-import { NotificationCard, Translation } from 'src/components/suite';
+import { Translation } from 'src/components/suite';
 import { useSelector } from 'src/hooks/suite';
 import { useBackendReconnection } from 'src/hooks/settings/backends';
 
@@ -21,19 +22,19 @@ const DisconnectedNotification = ({
     );
 
     return (
-        <NotificationCard
+        <Banner
             variant="warning"
-            button={{
-                onClick: reconnect,
-                isLoading: isReconnecting,
-                children: <Translation id="TR_CONNECT" />,
-            }}
+            rightContent={
+                <Banner.Button onClick={reconnect} isLoading={isReconnecting}>
+                    <Translation id="TR_CONNECT" />
+                </Banner.Button>
+            }
         >
             <Translation id="TR_BACKEND_DISCONNECTED" />
             {countdownSeconds ? (
                 <Translation id="TR_BACKEND_RECONNECTING" values={{ time: countdownSeconds }} />
             ) : null}
-        </NotificationCard>
+        </Banner>
     );
 };
 
diff --git a/packages/suite/src/components/wallet/WalletLayout/AccountBanners/ContextMessage.tsx b/packages/suite/src/components/wallet/WalletLayout/AccountBanners/ContextMessage.tsx
index d8f439eed477..3193df434dbe 100644
--- a/packages/suite/src/components/wallet/WalletLayout/AccountBanners/ContextMessage.tsx
+++ b/packages/suite/src/components/wallet/WalletLayout/AccountBanners/ContextMessage.tsx
@@ -1,9 +1,6 @@
-import styled from 'styled-components';
-
-import { Link } from '@trezor/components';
+import { Banner } from '@trezor/components';
 import { selectContextMessageContent, Context } from '@suite-common/message-system';
 
-import { NotificationCard } from 'src/components/suite';
 import { useSelector } from 'src/hooks/suite';
 import { selectLanguage } from 'src/reducers/suite/suiteReducer';
 
@@ -11,30 +8,20 @@ type ContextMessageProps = {
     context: (typeof Context)[keyof typeof Context];
 };
 
-const StyledNotificationCard = styled(NotificationCard)`
-    margin-bottom: 0;
-`;
-
 export const ContextMessage = ({ context }: ContextMessageProps) => {
     const language = useSelector(selectLanguage);
     const message = useSelector(state => selectContextMessageContent(state, context, language));
 
     return message ? (
-        <StyledNotificationCard
-            button={
-                message.cta
-                    ? {
-                          children: (
-                              <Link variant="nostyle" href={message.cta.link}>
-                                  {message.cta.label}
-                              </Link>
-                          ),
-                      }
-                    : undefined
-            }
+        <Banner
             variant={message.variant === 'critical' ? 'destructive' : message.variant}
+            rightContent={
+                message.cta ? (
+                    <Banner.Button href={message.cta.link}>{message.cta.label}</Banner.Button>
+                ) : undefined
+            }
         >
             {message.content}
-        </StyledNotificationCard>
+        </Banner>
     ) : null;
 };
diff --git a/packages/suite/src/components/wallet/WalletLayout/AccountBanners/DeviceUnavailable.tsx b/packages/suite/src/components/wallet/WalletLayout/AccountBanners/DeviceUnavailable.tsx
index 9f9e8f82e901..f96ab940d263 100644
--- a/packages/suite/src/components/wallet/WalletLayout/AccountBanners/DeviceUnavailable.tsx
+++ b/packages/suite/src/components/wallet/WalletLayout/AccountBanners/DeviceUnavailable.tsx
@@ -1,6 +1,8 @@
+import { Banner } from '@trezor/components';
+
 import { useDevice, useDispatch } from 'src/hooks/suite';
 import { applySettings } from 'src/actions/settings/deviceSettingsActions';
-import { NotificationCard, Translation } from 'src/components/suite';
+import { Translation } from 'src/components/suite';
 
 export const DeviceUnavailable = () => {
     const dispatch = useDispatch();
@@ -11,15 +13,15 @@ export const DeviceUnavailable = () => {
     const handleButtonClick = () => dispatch(applySettings({ use_passphrase: true }));
 
     return (
-        <NotificationCard
+        <Banner
             variant="info"
-            button={{
-                children: <Translation id="TR_ACCOUNT_ENABLE_PASSPHRASE" />,
-                isLoading: isLocked(),
-                onClick: handleButtonClick,
-            }}
+            rightContent={
+                <Banner.Button onClick={handleButtonClick} isLoading={isLocked()}>
+                    <Translation id="TR_ACCOUNT_ENABLE_PASSPHRASE" />
+                </Banner.Button>
+            }
         >
             <Translation id="TR_ACCOUNT_PASSPHRASE_DISABLED" />
-        </NotificationCard>
+        </Banner>
     );
 };
diff --git a/packages/suite/src/components/wallet/WalletLayout/AccountBanners/TorDisconnected.tsx b/packages/suite/src/components/wallet/WalletLayout/AccountBanners/TorDisconnected.tsx
index d369d242cc4a..7c7380977e34 100644
--- a/packages/suite/src/components/wallet/WalletLayout/AccountBanners/TorDisconnected.tsx
+++ b/packages/suite/src/components/wallet/WalletLayout/AccountBanners/TorDisconnected.tsx
@@ -1,4 +1,6 @@
-import { NotificationCard, Translation } from 'src/components/suite';
+import { Banner } from '@trezor/components';
+
+import { Translation } from 'src/components/suite';
 import { useDispatch, useSelector } from 'src/hooks/suite';
 import { toggleTor } from 'src/actions/suite/suiteActions';
 import { selectTorState } from 'src/reducers/suite/suiteReducer';
@@ -14,17 +16,17 @@ export const TorDisconnected = () => {
     const handleButtonClick = () => dispatch(toggleTor(true));
 
     return (
-        <NotificationCard
+        <Banner
             variant="warning"
-            button={{
-                onClick: handleButtonClick,
-                isLoading: isTorLoading,
-                children: isTorLoading ? (
-                    <Translation id="TR_ENABLING_TOR" />
-                ) : (
-                    <Translation id="TR_TOR_ENABLE" />
-                ),
-            }}
+            rightContent={
+                <Banner.Button onClick={handleButtonClick} isLoading={isTorLoading}>
+                    {isTorLoading ? (
+                        <Translation id="TR_ENABLING_TOR" />
+                    ) : (
+                        <Translation id="TR_TOR_ENABLE" />
+                    )}
+                </Banner.Button>
+            }
         >
             <Translation
                 id="TR_TOR_REQUEST_ENABLE_FOR_COIN_JOIN_TITLE"
@@ -32,6 +34,6 @@ export const TorDisconnected = () => {
                     b: chunks => <b>{chunks}</b>,
                 }}
             />
-        </NotificationCard>
+        </Banner>
     );
 };
diff --git a/packages/suite/src/components/wallet/WalletLayout/AccountBanners/XRPReserve.tsx b/packages/suite/src/components/wallet/WalletLayout/AccountBanners/XRPReserve.tsx
index be8c888fee6a..3d4093ee973b 100644
--- a/packages/suite/src/components/wallet/WalletLayout/AccountBanners/XRPReserve.tsx
+++ b/packages/suite/src/components/wallet/WalletLayout/AccountBanners/XRPReserve.tsx
@@ -1,8 +1,9 @@
 import { BigNumber } from '@trezor/utils/src/bigNumber';
 import { formatNetworkAmount } from '@suite-common/wallet-utils';
 import { HELP_CENTER_XRP_URL } from '@trezor/urls';
+import { Banner } from '@trezor/components';
 
-import { NotificationCard, Translation } from 'src/components/suite';
+import { Translation } from 'src/components/suite';
 import type { Account } from 'src/types/wallet/index';
 
 interface XRPReserveProps {
@@ -15,12 +16,13 @@ export const XRPReserve = ({ account }: XRPReserveProps) => {
     const bigReserve = new BigNumber(account.misc.reserve);
 
     return bigBalance.isLessThan(bigReserve) ? (
-        <NotificationCard
+        <Banner
             variant="warning"
-            button={{
-                children: <Translation id="TR_LEARN_MORE" />,
-                href: HELP_CENTER_XRP_URL,
-            }}
+            rightContent={
+                <Banner.Button href={HELP_CENTER_XRP_URL}>
+                    <Translation id="TR_LEARN_MORE" />
+                </Banner.Button>
+            }
         >
             <Translation
                 id="TR_XRP_RESERVE_INFO"
@@ -28,6 +30,6 @@ export const XRPReserve = ({ account }: XRPReserveProps) => {
                     minBalance: formatNetworkAmount(account.misc.reserve, 'xrp'),
                 }}
             />
-        </NotificationCard>
+        </Banner>
     ) : null;
 };
diff --git a/packages/suite/src/views/suite/SwitchDevice/DeviceItem/DeviceWarning.tsx b/packages/suite/src/views/suite/SwitchDevice/DeviceItem/DeviceWarning.tsx
index 13b3e338793a..4f5cf768ea2d 100644
--- a/packages/suite/src/views/suite/SwitchDevice/DeviceItem/DeviceWarning.tsx
+++ b/packages/suite/src/views/suite/SwitchDevice/DeviceItem/DeviceWarning.tsx
@@ -1,6 +1,7 @@
 import * as deviceUtils from '@suite-common/suite-utils';
+import { Banner } from '@trezor/components';
 
-import { NotificationCard, Translation } from 'src/components/suite';
+import { Translation } from 'src/components/suite';
 import { TrezorDevice } from 'src/types/suite';
 import { useDevice } from 'src/hooks/suite';
 
@@ -22,17 +23,20 @@ export const DeviceWarning = ({
     return (
         <>
             {needsAttention && (
-                <NotificationCard
+                <Banner
                     variant="warning"
-                    button={{
-                        children: <Translation id="TR_SOLVE_ISSUE" />,
-                        onClick: onSolveIssueClick,
-                        'data-testid': `@switch-device/solve-issue-button`,
-                        isDisabled: isLocked,
-                    }}
+                    rightContent={
+                        <Banner.Button
+                            onClick={onSolveIssueClick}
+                            data-testid="@switch-device/solve-issue-button"
+                            isDisabled={isLocked}
+                        >
+                            <Translation id="TR_SOLVE_ISSUE" />
+                        </Banner.Button>
+                    }
                 >
                     {deviceStatusMessage && <Translation id={deviceStatusMessage} />}
-                </NotificationCard>
+                </Banner>
             )}
         </>
     );