diff --git a/ui/pages/send/send-content/send-gas-row/README.mdx b/ui/pages/send/send-content/send-gas-row/README.mdx
new file mode 100644
index 000000000..405198c38
--- /dev/null
+++ b/ui/pages/send/send-content/send-gas-row/README.mdx
@@ -0,0 +1,12 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+import SendGasRow from '.';
+
+# SendGasRow
+
+<Canvas>
+  <Story id="ui-pages-send-send-content-send-gas-row-send-gas-row-stories-js--default-story" />
+</Canvas>
+
+## Component API
+
+<ArgsTable of={SendGasRow} />
diff --git a/ui/pages/send/send-content/send-gas-row/send-gas-row.stories.js b/ui/pages/send/send-content/send-gas-row/send-gas-row.stories.js
index 1bced02b6..27281ae66 100644
--- a/ui/pages/send/send-content/send-gas-row/send-gas-row.stories.js
+++ b/ui/pages/send/send-content/send-gas-row/send-gas-row.stories.js
@@ -2,13 +2,12 @@
 
 import React, { useEffect, useState } from 'react';
 import { Provider } from 'react-redux';
-import { boolean } from '@storybook/addon-knobs';
 import testData from '../../../../../.storybook/test-data';
-
+import { GAS_INPUT_MODES } from '../../../../ducks/send';
+import { updateMetamaskState } from '../../../../store/actions';
 import configureStore from '../../../../store/store';
 import { calcGasTotal } from '../../send.utils';
-import { updateMetamaskState } from '../../../../store/actions';
-import { GAS_INPUT_MODES } from '../../../../ducks/send';
+import README from './README.mdx';
 import SendGasRow from './send-gas-row.component';
 
 const store = configureStore(testData);
@@ -17,16 +16,26 @@ export default {
   title: 'Pages/Send/SendContent/SendGasRow',
   id: __filename,
   decorators: [(story) => <Provider store={store}>{story()}</Provider>],
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
+  argTypes: {
+    insufficientBalance: {
+      name: 'Is Insufficient Balance',
+      control: { type: 'boolean' },
+      defaultValue: false,
+    },
+  },
 };
 
-export const DefaultStory = () => {
+export const DefaultStory = (args) => {
   const state = store.getState();
   const { metamask } = state;
   const { send } = metamask;
   const [sendState, setSendState] = useState(send);
 
-  const insufficientBalance = boolean('Is Insufficient Balance', false);
-
   useEffect(() => {
     const newState = Object.assign(metamask, {
       send: sendState,
@@ -65,7 +74,7 @@ export const DefaultStory = () => {
   return (
     <div style={{ width: 500 }}>
       <SendGasRow
-        insufficientBalance={insufficientBalance}
+        {...args}
         updateGasPrice={updateGasPrice}
         updateGasLimit={updateGasLimit}
         gasPrice={send.gasPrice}
@@ -76,4 +85,4 @@ export const DefaultStory = () => {
   );
 };
 
-DefaultStory.storyName = 'Default';
+DefaultStory.storyName = 'SendGasRow';