diff --git a/ui/pages/confirmations/components/gas-timing/gas-timing.component.js b/ui/pages/confirmations/components/gas-timing/gas-timing.component.js
index 51522e025add..5c8e054647c3 100644
--- a/ui/pages/confirmations/components/gas-timing/gas-timing.component.js
+++ b/ui/pages/confirmations/components/gas-timing/gas-timing.component.js
@@ -5,7 +5,6 @@ import React, { useContext, useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { GasEstimateTypes } from '../../../../../shared/constants/gas';
 import { Box, Text } from '../../../../components/component-library';
-import Typography from '../../../../components/ui/typography/typography';
 import { useGasFeeContext } from '../../../../contexts/gasFee';
 import { I18nContext } from '../../../../contexts/i18n';
 import {
@@ -19,7 +18,6 @@ import {
   FontWeight,
   TextColor,
   TextVariant,
-  TypographyVariant,
 } from '../../../../helpers/constants/design-system';
 import {
   GAS_FORM_ERRORS,
@@ -114,13 +112,14 @@ export default function GasTiming({
     gasWarnings?.maxFee === GAS_FORM_ERRORS.MAX_FEE_TOO_LOW
   ) {
     return (
-      <Typography
-        variant={TypographyVariant.H7}
+      <Text
+        variant={TextVariant.bodySm}
         fontWeight={FontWeight.Bold}
+        color={TextColor.textAlternative}
         className={classNames('gas-timing', 'gas-timing--negative')}
       >
         {t('editGasTooLow')}
-      </Typography>
+      </Text>
     );
   }
 
diff --git a/ui/pages/confirmations/components/gas-timing/gas-timing.stories.tsx b/ui/pages/confirmations/components/gas-timing/gas-timing.stories.tsx
index 35d1ad1cb1f4..a92636157948 100644
--- a/ui/pages/confirmations/components/gas-timing/gas-timing.stories.tsx
+++ b/ui/pages/confirmations/components/gas-timing/gas-timing.stories.tsx
@@ -4,6 +4,7 @@ import { Provider } from 'react-redux';
 import configureStore from '../../../../store/store';
 import GasTiming from './gas-timing.component';
 import mockState from '../../../../../test/data/mock-state.json';
+import { GAS_FORM_ERRORS } from '../../../../helpers/constants/gas';
 
 const storeMock = configureStore({
   metamask: {
@@ -33,8 +34,8 @@ const meta: Meta<typeof GasTiming> = {
     },
   },
   args: {
-    maxFeePerGas: 0,
-    maxPriorityFeePerGas: 0,
+    maxFeePerGas: '0',
+    maxPriorityFeePerGas: '0',
     gasWarnings: {},
   },
 };
@@ -45,3 +46,16 @@ type Story = StoryObj<typeof GasTiming>;
 export const DefaultStory: Story = {};
 
 DefaultStory.storyName = 'Default';
+
+export const GasTooLowStory: Story = {
+  args: {
+    maxFeePerGas: '1', // Simulate low gas fee
+    maxPriorityFeePerGas: '1', // Simulate low priority fee
+    gasWarnings: {
+      maxPriorityFee: GAS_FORM_ERRORS.MAX_PRIORITY_FEE_TOO_LOW,
+      maxFee: GAS_FORM_ERRORS.MAX_FEE_TOO_LOW,
+    },
+  },
+};
+
+GasTooLowStory.storyName = 'GasTooLow';
diff --git a/ui/pages/confirmations/components/gas-timing/index.scss b/ui/pages/confirmations/components/gas-timing/index.scss
deleted file mode 100644
index a869df6716f6..000000000000
--- a/ui/pages/confirmations/components/gas-timing/index.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.typography.gas-timing {
-  color: var(--color-text-alternative);
-
-  .info-tooltip {
-    display: inline-block;
-    margin-inline-start: 4px;
-
-    path {
-      fill: var(--color-error-default);
-    }
-  }
-}
diff --git a/ui/pages/confirmations/components/index.scss b/ui/pages/confirmations/components/index.scss
index 4e200a82d0e3..275dcfa3b032 100644
--- a/ui/pages/confirmations/components/index.scss
+++ b/ui/pages/confirmations/components/index.scss
@@ -26,7 +26,6 @@
 @import 'edit-gas-fee-popover/edit-gas-tooltip/index';
 @import 'edit-gas-popover/index';
 @import 'gas-details-item/index';
-@import 'gas-timing/index';
 @import 'multilayer-fee-message/index';
 @import 'review-spending-cap/index';
 @import 'set-approval-for-all-warning/index';