diff --git a/ui/components/app/set-approval-for-all-warning/index.scss b/ui/components/app/set-approval-for-all-warning/index.scss
index 4ff02eb4ae66..2fb96ffb750b 100644
--- a/ui/components/app/set-approval-for-all-warning/index.scss
+++ b/ui/components/app/set-approval-for-all-warning/index.scss
@@ -13,10 +13,6 @@
&__account {
border-bottom: 1px solid var(--color-border-muted);
}
-
- &__bold {
- color: var(--color-text-default);
- }
}
&__footer {
diff --git a/ui/components/app/set-approval-for-all-warning/set-approval-for-all-warning.js b/ui/components/app/set-approval-for-all-warning/set-approval-for-all-warning.js
index f5dfe26ee97d..c311eaeb2f0f 100644
--- a/ui/components/app/set-approval-for-all-warning/set-approval-for-all-warning.js
+++ b/ui/components/app/set-approval-for-all-warning/set-approval-for-all-warning.js
@@ -4,19 +4,22 @@ import { useI18nContext } from '../../../hooks/useI18nContext';
import Popover from '../../ui/popover';
import Box from '../../ui/box';
-import Button from '../../ui/button';
-import Typography from '../../ui/typography';
+
import {
DISPLAY,
FLEX_DIRECTION,
- FONT_WEIGHT,
JustifyContent,
- TextColor,
- TypographyVariant,
+ TextVariant,
} from '../../../helpers/constants/design-system';
import Identicon from '../../ui/identicon';
import { shortenAddress } from '../../../helpers/utils/util';
-import { Icon, IconName } from '../../component-library';
+import {
+ Icon,
+ IconName,
+ Text,
+ Button,
+ BUTTON_VARIANT,
+} from '../../component-library';
const SetApproveForAllWarning = ({
collectionName,
@@ -35,17 +38,19 @@ const SetApproveForAllWarning = ({
flexDirection={FLEX_DIRECTION.COLUMN}
justifyContent={JustifyContent.SPACE_BETWEEN}
className="set-approval-for-all-warning__footer"
+ gap={4}
>