diff --git a/ui/components/app/custom-spending-cap/custom-spending-cap-tooltip.js b/ui/components/app/custom-spending-cap/custom-spending-cap-tooltip.js
index ad5033a97..1c68eb297 100644
--- a/ui/components/app/custom-spending-cap/custom-spending-cap-tooltip.js
+++ b/ui/components/app/custom-spending-cap/custom-spending-cap-tooltip.js
@@ -1,14 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Box from '../../ui/box';
-import Typography from '../../ui/typography';
 import Tooltip from '../../ui/tooltip';
 import {
   TextColor,
   DISPLAY,
-  TypographyVariant,
+  TextVariant,
 } from '../../../helpers/constants/design-system';
-import { Icon, IconName, IconSize } from '../../component-library';
+
+import { Icon, IconName, IconSize, Text } from '../../component-library';
 
 export const CustomSpendingCapTooltip = ({
   tooltipContentText,
@@ -19,14 +19,15 @@ export const CustomSpendingCapTooltip = ({
       interactive
       position="top"
       html={
-        <Typography
-          variant={TypographyVariant.H7}
+        <Text
+          variant={TextVariant.bodySm}
+          as="h6"
           margin={3}
           color={TextColor.textAlternative}
           className="form-field__heading-title__tooltip"
         >
           {tooltipContentText}
-        </Typography>
+        </Text>
       }
     >
       {tooltipIcon ? (