diff --git a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-defaults/advanced-gas-fee-defaults.js b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-defaults/advanced-gas-fee-defaults.js
index 0890f679b..c4a57667d 100644
--- a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-defaults/advanced-gas-fee-defaults.js
+++ b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-defaults/advanced-gas-fee-defaults.js
@@ -4,20 +4,19 @@ import { useSelector, useDispatch } from 'react-redux';
 import { useTransactionEventFragment } from '../../../../hooks/useTransactionEventFragment';
 import { EditGasModes } from '../../../../../shared/constants/gas';
 import Box from '../../../ui/box';
-import Typography from '../../../ui/typography';
 import CheckBox from '../../../ui/check-box';
 import {
   DISPLAY,
   FLEX_DIRECTION,
   TextColor,
-  TypographyVariant,
+  TextVariant,
 } from '../../../../helpers/constants/design-system';
 import { getAdvancedGasFeeValues } from '../../../../selectors';
 import { setAdvancedGasFee } from '../../../../store/actions';
 import { useGasFeeContext } from '../../../../contexts/gasFee';
-
 import { useAdvancedGasFeePopoverContext } from '../context';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
+import { Text } from '../../../component-library';
 
 const AdvancedGasFeeDefaults = () => {
   const t = useI18nContext();
@@ -87,8 +86,9 @@ const AdvancedGasFeeDefaults = () => {
           onClick={handleUpdateDefaultSettings}
           disabled={gasErrors.maxFeePerGas || gasErrors.maxPriorityFeePerGas}
         />
-        <Typography
-          variant={TypographyVariant.H7}
+        <Text
+          variant={TextVariant.bodySm}
+          as="h6"
           color={TextColor.textAlternative}
           margin={0}
         >
@@ -97,7 +97,7 @@ const AdvancedGasFeeDefaults = () => {
             : t('advancedGasFeeDefaultOptIn', [
                 <strong key="default-value-change">{t('newValues')}</strong>,
               ])}
-        </Typography>
+        </Text>
       </label>
     </Box>
   );
diff --git a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-gas-limit/advanced-gas-fee-gas-limit.js b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-gas-limit/advanced-gas-fee-gas-limit.js
index e26720b01..9c8af1bb7 100644
--- a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-gas-limit/advanced-gas-fee-gas-limit.js
+++ b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-gas-limit/advanced-gas-fee-gas-limit.js
@@ -2,14 +2,14 @@ import React, { useEffect, useState } from 'react';
 
 import { useGasFeeContext } from '../../../../contexts/gasFee';
 import { bnGreaterThan, bnLessThan } from '../../../../helpers/utils/util';
-import { TypographyVariant } from '../../../../helpers/constants/design-system';
+import { TextVariant } from '../../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import { MAX_GAS_LIMIT_DEC } from '../../../../pages/send/send.constants';
 import Button from '../../../ui/button';
 import FormField from '../../../ui/form-field';
-import Typography from '../../../ui/typography';
 
 import { useAdvancedGasFeePopoverContext } from '../context';
+import { Text } from '../../../component-library';
 
 const validateGasLimit = (gasLimit, minimumGasLimitDec) => {
   return bnLessThan(gasLimit, minimumGasLimitDec) ||
@@ -58,9 +58,10 @@ const AdvancedGasFeeGasLimit = () => {
   }
 
   return (
-    <Typography
-      tag={TypographyVariant.paragraph}
-      variant={TypographyVariant.H7}
+    <Text
+      tag={TextVariant.bodyMd}
+      variant={TextVariant.bodySm}
+      as="h6"
       className="advanced-gas-fee-gas-limit"
       marginTop={4}
       marginLeft={2}
@@ -76,7 +77,7 @@ const AdvancedGasFeeGasLimit = () => {
       >
         {t('edit')}
       </Button>
-    </Typography>
+    </Text>
   );
 };