diff --git a/ui/pages/swaps/slippage-buttons/slippage-buttons.js b/ui/pages/swaps/slippage-buttons/slippage-buttons.js
index 3040227e3..59a1c2386 100644
--- a/ui/pages/swaps/slippage-buttons/slippage-buttons.js
+++ b/ui/pages/swaps/slippage-buttons/slippage-buttons.js
@@ -7,15 +7,15 @@ import Button from '../../../components/ui/button';
 import InfoTooltip from '../../../components/ui/info-tooltip';
 import ToggleButton from '../../../components/ui/toggle-button';
 import Box from '../../../components/ui/box';
-import Typography from '../../../components/ui/typography';
 import {
-  TypographyVariant,
-  FONT_WEIGHT,
+  TextVariant,
+  FontWeight,
   AlignItems,
   DISPLAY,
 } from '../../../helpers/constants/design-system';
 import { getTranslatedStxErrorMessage } from '../swaps.util';
 import { Slippage } from '../../../../shared/constants/swaps';
+import { Text } from '../../../components/component-library';
 
 export default function SlippageButtons({
   onSelect,
@@ -207,13 +207,14 @@ export default function SlippageButtons({
                   alignItems={AlignItems.center}
                   paddingRight={3}
                 >
-                  <Typography
-                    variant={TypographyVariant.H6}
+                  <Text
+                    variant={TextVariant.bodySm}
+                    as="h6"
                     boxProps={{ paddingRight: 2 }}
-                    fontWeight={FONT_WEIGHT.BOLD}
+                    fontWeight={FontWeight.Bold}
                   >
                     {t('smartTransaction')}
-                  </Typography>
+                  </Text>
                   {currentSmartTransactionsError ? (
                     <InfoTooltip
                       position="top"