diff --git a/ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.js b/ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.js
index a972ae455655..c3e1a3f73bf0 100644
--- a/ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.js
+++ b/ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.js
@@ -2,8 +2,12 @@ import React, { useCallback, useContext, useEffect, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { ethErrors, serializeError } from 'eth-rpc-errors';
-import ActionableMessage from '../../components/ui/actionable-message/actionable-message';
-import Button from '../../components/ui/button';
+import {
+  BannerAlert,
+  Button,
+  ButtonLinkSize,
+  ButtonVariant,
+} from '../../components/component-library';
 import Identicon from '../../components/ui/identicon';
 import TokenBalance from '../../components/ui/token-balance';
 import { PageContainerFooter } from '../../components/ui/page-container';
@@ -27,6 +31,7 @@ import {
   TokenStandard,
 } from '../../../shared/constants/transaction';
 import { getSuggestedTokens } from '../../selectors';
+import { Severity } from '../../helpers/constants/design-system';
 
 function getTokenName(name, symbol) {
   return name === undefined ? symbol : `${name} (${symbol})`;
@@ -80,40 +85,34 @@ const ConfirmAddSuggestedToken = () => {
   const tokens = useSelector(getTokens);
   const trackEvent = useContext(MetaMetricsContext);
 
-  const knownTokenActionableMessage = useMemo(() => {
+  const knownTokenBannerAlert = useMemo(() => {
     return (
       hasDuplicateAddress(suggestedTokens, tokens) && (
-        <ActionableMessage
-          message={t('knownTokenWarning', [
+        <BannerAlert severity={Severity.Warning} marginTop={4}>
+          {t('knownTokenWarning', [
             <Button
-              type="link"
+              variant={ButtonVariant.Link}
               key="confirm-add-suggested-token-duplicate-warning"
               className="confirm-add-suggested-token__link"
-              rel="noopener noreferrer"
-              target="_blank"
+              externalLink
+              size={ButtonLinkSize.Inherit}
               href={ZENDESK_URLS.TOKEN_SAFETY_PRACTICES}
             >
               {t('learnScamRisk')}
             </Button>,
           ])}
-          type="warning"
-          withRightButton
-          useIcon
-          iconFillColor="#f8c000"
-        />
+        </BannerAlert>
       )
     );
   }, [suggestedTokens, tokens, t]);
 
-  const reusedTokenNameActionableMessage = useMemo(() => {
+  const reusedTokenNameBannerAlert = useMemo(() => {
     return (
       hasDuplicateSymbolAndDiffAddress(suggestedTokens, tokens) && (
-        <ActionableMessage
-          message={t('reusedTokenNameWarning')}
-          type="warning"
-          withRightButton
-          useIcon
-          iconFillColor="#f8c000"
+        <BannerAlert
+          marginTop={4}
+          severity={Severity.Warning}
+          description={t('reusedTokenNameWarning')}
         />
       )
     );
@@ -174,8 +173,8 @@ const ConfirmAddSuggestedToken = () => {
         <div className="page-container__subtitle">
           {t('likeToImportTokens')}
         </div>
-        {knownTokenActionableMessage}
-        {reusedTokenNameActionableMessage}
+        {knownTokenBannerAlert}
+        {reusedTokenNameBannerAlert}
       </div>
       <div className="page-container__content">
         <div className="confirm-add-suggested-token">
diff --git a/ui/pages/confirm-add-suggested-token/index.scss b/ui/pages/confirm-add-suggested-token/index.scss
index de04ed6bf165..9bc95a41eaaf 100644
--- a/ui/pages/confirm-add-suggested-token/index.scss
+++ b/ui/pages/confirm-add-suggested-token/index.scss
@@ -1,14 +1,6 @@
 .confirm-add-suggested-token {
   padding: 16px;
 
-  &__link {
-    @include H7;
-
-    display: inline;
-    color: var(--color-primary-default);
-    padding-left: 0;
-  }
-
   &__header {
     @include H7;