diff --git a/ui/components/app/signature-request/README.mdx b/ui/components/app/signature-request/README.mdx
new file mode 100644
index 000000000..0df4dd77e
--- /dev/null
+++ b/ui/components/app/signature-request/README.mdx
@@ -0,0 +1,15 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+
+import SignatureRequest from '.';
+
+# Signature Request
+
+dApp requesting a signature from the user.
+
+<Canvas>
+  <Story id="ui-components-app-signature-request-signature-request-stories-js--default-story" />
+</Canvas>
+
+## Component API
+
+<ArgsTable of={SignatureRequest} />
diff --git a/ui/components/app/signature-request/signature-request.component.js b/ui/components/app/signature-request/signature-request.component.js
index 44c0f38bd..45d944fa1 100644
--- a/ui/components/app/signature-request/signature-request.component.js
+++ b/ui/components/app/signature-request/signature-request.component.js
@@ -8,15 +8,33 @@ import Message from './signature-request-message';
 
 export default class SignatureRequest extends PureComponent {
   static propTypes = {
+    /**
+     * The display content of transaction data
+     */
     txData: PropTypes.object.isRequired,
+    /**
+     * The display content of sender account
+     */
     fromAccount: PropTypes.shape({
       address: PropTypes.string.isRequired,
       balance: PropTypes.string,
       name: PropTypes.string,
     }).isRequired,
+    /**
+     * Check if the wallet is ledget wallet or not
+     */
     isLedgerWallet: PropTypes.bool,
+    /**
+     * Handler for cancel button
+     */
     cancel: PropTypes.func.isRequired,
+    /**
+     * Handler for sign button
+     */
     sign: PropTypes.func.isRequired,
+    /**
+     * Whether the hardware wallet requires a connection disables the sign button if true.
+     */
     hardwareWalletRequiresConnection: PropTypes.bool.isRequired,
   };
 
diff --git a/ui/components/app/signature-request/signature-request.stories.js b/ui/components/app/signature-request/signature-request.stories.js
index 4ccb3ba01..a1c53a69b 100644
--- a/ui/components/app/signature-request/signature-request.stories.js
+++ b/ui/components/app/signature-request/signature-request.stories.js
@@ -1,40 +1,60 @@
 import React from 'react';
 import testData from '../../../../.storybook/test-data';
+import README from './README.mdx';
 import SignatureRequest from './signature-request.component';
 
 const primaryIdentity = Object.values(testData.metamask.identities)[0];
 
-const containerStyle = {
-  width: '357px',
-};
-
 export default {
   title: 'Components/App/SignatureRequest',
   id: __filename,
+  component: SignatureRequest,
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
+  argTypes: {
+    txData: { control: 'object' },
+    fromAccount: {
+      table: {
+        address: { control: 'text' },
+        balance: { control: 'text' },
+        name: { control: 'text' },
+      },
+    },
+    isLedgerWallet: { control: 'boolean' },
+    clearConfirmTransaction: { action: 'Clean Confirm' },
+    cancel: { action: 'Cancel' },
+    sign: { action: 'Sign' },
+    hardwareWalletRequiresConnection: {
+      action: 'hardwareWalletRequiresConnection',
+    },
+  },
 };
 
-export const DefaultStory = () => {
-  return (
-    <div style={containerStyle}>
-      <SignatureRequest
-        txData={{
-          msgParams: {
-            data: JSON.stringify({
-              domain: {
-                name: 'happydapp.website',
-              },
-              message: {
-                string: 'haay wuurl',
-                number: 42,
-              },
-            }),
-            origin: 'https://happydapp.website/governance?futarchy=true',
-          },
-        }}
-        fromAccount={primaryIdentity}
-      />
-    </div>
-  );
+export const DefaultStory = (args) => {
+  return <SignatureRequest {...args} />;
+};
+
+DefaultStory.storyName = 'Default';
+
+DefaultStory.args = {
+  txData: {
+    msgParams: {
+      data: JSON.stringify({
+        domain: {
+          name: 'happydapp.website',
+        },
+        message: {
+          string: 'haay wuurl',
+          number: 42,
+        },
+      }),
+      origin: 'https://happydapp.website/governance?futarchy=true',
+    },
+  },
+  fromAccount: primaryIdentity,
 };
 
 DefaultStory.storyName = 'Default';