diff --git a/ui/components/app/cancel-speedup-popover/cancel-speedup-popover.stories.js b/ui/components/app/cancel-speedup-popover/cancel-speedup-popover.stories.js
new file mode 100644
index 000000000..4565ab297
--- /dev/null
+++ b/ui/components/app/cancel-speedup-popover/cancel-speedup-popover.stories.js
@@ -0,0 +1,77 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import BigNumber from 'bignumber.js';
+import configureStore from '../../../store/store';
+import { TransactionModalContext } from '../../../contexts/transaction-modal';
+import mockEstimates from '../../../../test/data/mock-estimates.json';
+import mockState from '../../../../test/data/mock-state.json';
+import {
+  EditGasModes,
+  GasEstimateTypes,
+} from '../../../../shared/constants/gas';
+import { decGWEIToHexWEI } from '../../../../shared/modules/conversion.utils';
+import { GasFeeContextProvider } from '../../../contexts/gasFee';
+import CancelSpeedupPopover from './cancel-speedup-popover';
+
+const store = configureStore({
+  metamask: {
+    ...mockState.metamask,
+    accounts: {
+      [mockState.metamask.selectedAddress]: {
+        address: mockState.metamask.selectedAddress,
+        balance: '0x1F4',
+      },
+    },
+    gasFeeEstimates: mockEstimates[GasEstimateTypes.feeMarket].gasFeeEstimates,
+  },
+});
+
+const MOCK_SUGGESTED_MEDIUM_MAXFEEPERGAS_DEC_GWEI =
+  mockEstimates[GasEstimateTypes.feeMarket].gasFeeEstimates.medium
+    .suggestedMaxFeePerGas;
+
+const MOCK_SUGGESTED_MEDIUM_MAXFEEPERGAS_BN_WEI = new BigNumber(
+  decGWEIToHexWEI(MOCK_SUGGESTED_MEDIUM_MAXFEEPERGAS_DEC_GWEI),
+  16,
+);
+
+const MOCK_SUGGESTED_MEDIUM_MAXFEEPERGAS_HEX_WEI =
+  MOCK_SUGGESTED_MEDIUM_MAXFEEPERGAS_BN_WEI.toString(16);
+
+export default {
+  title: 'Components/App/CancelSpeedupPopover',
+  component: CancelSpeedupPopover,
+
+  decorators: [
+    (story) => (
+      <Provider store={store}>
+        <GasFeeContextProvider
+          transaction={{
+            userFeeLevel: 'tenPercentIncreased',
+            txParams: {
+              gas: '0x5208',
+              maxFeePerGas: MOCK_SUGGESTED_MEDIUM_MAXFEEPERGAS_HEX_WEI,
+              maxPriorityFeePerGas: '0x59682f00',
+            },
+          }}
+          editGasMode={EditGasModes.cancel}
+        >
+          <TransactionModalContext.Provider
+            value={{
+              closeModal: () => undefined,
+              currentModal: 'cancelSpeedUpTransaction',
+            }}
+          >
+            {story()}
+          </TransactionModalContext.Provider>
+        </GasFeeContextProvider>
+      </Provider>
+    ),
+  ],
+};
+
+export const DefaultStory = (args) => {
+  return <CancelSpeedupPopover {...args} />;
+};
+
+DefaultStory.storyName = 'Default';