diff --git a/ui/components/app/app-components.scss b/ui/components/app/app-components.scss
index 017e7deb6..c4dc26714 100644
--- a/ui/components/app/app-components.scss
+++ b/ui/components/app/app-components.scss
@@ -91,7 +91,6 @@
 @import 'detected-token/detected-token-aggregators/index';
 @import 'detected-token/detected-token-values/index';
 @import 'detected-token/detected-token-details/index';
-@import 'detected-token/detected-token-ignored-popover/index';
 @import 'detected-token/detected-token-selection-popover/index';
 @import 'network-account-balance-header/index';
 @import 'approve-content-card/index';
diff --git a/ui/components/app/detected-token/detected-token-ignored-popover/detected-token-ignored-popover.js b/ui/components/app/detected-token/detected-token-ignored-popover/detected-token-ignored-popover.js
index 708b078db..6e520dbb5 100644
--- a/ui/components/app/detected-token/detected-token-ignored-popover/detected-token-ignored-popover.js
+++ b/ui/components/app/detected-token/detected-token-ignored-popover/detected-token-ignored-popover.js
@@ -3,64 +3,78 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 
-import Popover from '../../../ui/popover';
-import Button from '../../../ui/button';
-import { TextVariant } from '../../../../helpers/constants/design-system';
-import { Text } from '../../../component-library';
+import {
+  Display,
+  JustifyContent,
+} from '../../../../helpers/constants/design-system';
+import {
+  Text,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  Button,
+  BUTTON_VARIANT,
+  Box,
+  BUTTON_SIZES,
+} from '../../../component-library';
 
 const DetectedTokenIgnoredPopover = ({
   partiallyIgnoreDetectedTokens,
   onCancelIgnore,
   handleClearTokensSelection,
+  isOpen,
 }) => {
   const t = useI18nContext();
-
-  const footer = (
-    <>
-      <Button
-        className="detected-token-ignored-popover__ignore-button"
-        type="secondary"
-        onClick={onCancelIgnore}
-      >
-        {t('cancel')}
-      </Button>
-      <Button
-        className="detected-token-ignored-popover__import-button"
-        type="primary"
-        onClick={handleClearTokensSelection}
-      >
-        {t('confirm')}
-      </Button>
-    </>
-  );
-
   return (
-    <Popover
-      title={
-        partiallyIgnoreDetectedTokens
-          ? t('importSelectedTokens')
-          : t('areYouSure')
-      }
+    <Modal
+      isOpen={isOpen}
       className={classNames('detected-token-ignored-popover', {
         'detected-token-ignored-popover--import': partiallyIgnoreDetectedTokens,
         'detected-token-ignored-popover--ignore':
           !partiallyIgnoreDetectedTokens,
       })}
-      footer={footer}
+      onClose={onCancelIgnore}
+      autoFocus={false}
     >
-      <Text
-        variant={TextVariant.bodySm}
-        as="h6"
-        marginTop={0}
-        marginRight={5}
-        marginBottom={7}
-        marginLeft={5}
-      >
-        {partiallyIgnoreDetectedTokens
-          ? t('importSelectedTokensDescription')
-          : t('ignoreTokenWarning')}
-      </Text>
-    </Popover>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader marginBottom={4}>
+          {partiallyIgnoreDetectedTokens
+            ? t('importSelectedTokens')
+            : t('areYouSure')}
+        </ModalHeader>
+        <Text marginBottom={4}>
+          {partiallyIgnoreDetectedTokens
+            ? t('importSelectedTokensDescription')
+            : t('ignoreTokenWarning')}
+        </Text>
+        <Box
+          display={Display.Flex}
+          justifyContent={JustifyContent.center}
+          gap={4}
+        >
+          <Button
+            className="detected-token-ignored-popover__ignore-button"
+            block
+            variant={BUTTON_VARIANT.SECONDARY}
+            onClick={onCancelIgnore}
+            size={BUTTON_SIZES.LG}
+          >
+            {t('cancel')}
+          </Button>
+          <Button
+            className="detected-token-ignored-popover__import-button"
+            block
+            variant={BUTTON_VARIANT.PRIMARY}
+            onClick={handleClearTokensSelection}
+            size={BUTTON_SIZES.LG}
+          >
+            {t('confirm')}
+          </Button>
+        </Box>
+      </ModalContent>
+    </Modal>
   );
 };
 
@@ -68,6 +82,7 @@ DetectedTokenIgnoredPopover.propTypes = {
   partiallyIgnoreDetectedTokens: PropTypes.bool.isRequired,
   onCancelIgnore: PropTypes.func.isRequired,
   handleClearTokensSelection: PropTypes.func.isRequired,
+  isOpen: PropTypes.bool.isRequired,
 };
 
 export default DetectedTokenIgnoredPopover;
diff --git a/ui/components/app/detected-token/detected-token-ignored-popover/detected-token-ignored-popover.stories.js b/ui/components/app/detected-token/detected-token-ignored-popover/detected-token-ignored-popover.stories.js
index 2bfc6b7db..b8cfd9be3 100644
--- a/ui/components/app/detected-token/detected-token-ignored-popover/detected-token-ignored-popover.stories.js
+++ b/ui/components/app/detected-token/detected-token-ignored-popover/detected-token-ignored-popover.stories.js
@@ -4,14 +4,23 @@ import DetectedTokenIgnoredPopover from './detected-token-ignored-popover';
 
 export default {
   title: 'Components/App/DetectedToken/DetectedTokenIgnoredPopover',
-
   argTypes: {
     onCancelIgnore: {
-      control: 'func',
+      action: 'onCancelIgnore',
     },
     handleClearTokensSelection: {
-      control: 'func',
+      action: 'handleClearTokensSelection',
     },
+    partiallyIgnoreDetectedTokens: {
+      control: 'boolean',
+    },
+    isOpen: {
+      control: 'boolean',
+    },
+  },
+  args: {
+    partiallyIgnoreDetectedTokens: false,
+    isOpen: true,
   },
 };
 
@@ -22,3 +31,9 @@ const Template = (args) => {
 export const DefaultStory = Template.bind({});
 
 DefaultStory.storyName = 'Default';
+
+export const PartiallyIgnoreDetectedTokens = Template.bind({});
+
+PartiallyIgnoreDetectedTokens.args = {
+  partiallyIgnoreDetectedTokens: true,
+};
diff --git a/ui/components/app/detected-token/detected-token-ignored-popover/index.scss b/ui/components/app/detected-token/detected-token-ignored-popover/index.scss
deleted file mode 100644
index 69fa05637..000000000
--- a/ui/components/app/detected-token/detected-token-ignored-popover/index.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-.detected-token-ignored-popover {
-  &__ignore-button {
-    margin-inline-end: 8px;
-  }
-
-  &__import-button {
-    margin-inline-start: 8px;
-  }
-
-  &--ignore {
-    .popover-header {
-      margin-inline-start: 85px;
-    }
-  }
-
-  &--import {
-    .popover-header {
-      margin-inline-start: 50px;
-    }
-  }
-}
diff --git a/ui/components/app/detected-token/detected-token.js b/ui/components/app/detected-token/detected-token.js
index af64ee00e..582befda8 100644
--- a/ui/components/app/detected-token/detected-token.js
+++ b/ui/components/app/detected-token/detected-token.js
@@ -161,6 +161,7 @@ const DetectedToken = ({ setShowDetectedTokens }) => {
     <>
       {showDetectedTokenIgnoredPopover && (
         <DetectedTokenIgnoredPopover
+          isOpen
           onCancelIgnore={onCancelIgnore}
           handleClearTokensSelection={handleClearTokensSelection}
           partiallyIgnoreDetectedTokens={partiallyIgnoreDetectedTokens}