diff --git a/ui/components/app/edit-gas-fee-popover/network-statistics/network-statistics.js b/ui/components/app/edit-gas-fee-popover/network-statistics/network-statistics.js
index 43baa0606..6a14f655b 100644
--- a/ui/components/app/edit-gas-fee-popover/network-statistics/network-statistics.js
+++ b/ui/components/app/edit-gas-fee-popover/network-statistics/network-statistics.js
@@ -1,14 +1,14 @@
 import React, { useContext } from 'react';
 import {
-  FONT_WEIGHT,
+  FontWeight,
   TextColor,
-  TypographyVariant,
+  TextVariant,
 } from '../../../../helpers/constants/design-system';
 import { isNullish } from '../../../../helpers/utils/util';
 import { formatGasFeeOrFeeRange } from '../../../../helpers/utils/gas';
 import { I18nContext } from '../../../../contexts/i18n';
 import { useGasFeeContext } from '../../../../contexts/gasFee';
-import Typography from '../../../ui/typography/typography';
+import { Text } from '../../../component-library';
 import { BaseFeeTooltip, PriorityFeeTooltip } from './tooltips';
 import StatusSlider from './status-slider';
 
@@ -29,15 +29,16 @@ const NetworkStatistics = () => {
 
   return (
     <div className="network-statistics">
-      <Typography
+      <Text
         color={TextColor.textAlternative}
-        fontWeight={FONT_WEIGHT.BOLD}
+        fontWeight={FontWeight.Bold}
         marginTop={3}
         marginBottom={3}
-        variant={TypographyVariant.H8}
+        variant={TextVariant.bodyXs}
+        as="h6"
       >
         {t('networkStatus')}
-      </Typography>
+      </Text>
       <div className="network-statistics__info">
         {isNullish(formattedLatestBaseFee) ? null : (
           <div