diff --git a/ui/pages/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.stories.js b/ui/pages/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.stories.js
new file mode 100644
index 000000000..7f4c85e63
--- /dev/null
+++ b/ui/pages/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.stories.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { number, boolean } from '@storybook/addon-knobs';
+import GasFeeDisplay from './gas-fee-display.component';
+
+export default {
+  title: 'GasFeeDisplay',
+};
+
+export const GasFeeDisplayComponent = () => {
+  const gasTotal = number('Gas Total', 10000000000);
+  return (
+    <GasFeeDisplay
+      gasTotal={gasTotal}
+      gasLoadingError={boolean('Gas Loading Error', false)}
+      onReset={action('OnReset')}
+    />
+  );
+};