diff --git a/.storybook/2.DOCUMENTATION.stories.mdx b/.storybook/2.DOCUMENTATION.stories.mdx
index da30c959e..17fb97396 100644
--- a/.storybook/2.DOCUMENTATION.stories.mdx
+++ b/.storybook/2.DOCUMENTATION.stories.mdx
@@ -50,7 +50,7 @@ import React from 'react';
 
 import BuyIcon from '../icon/overview-buy-icon.component';
 
-// The mdx file to document component API and usage
+// The mdx file to document props and usage
 import README from './README.mdx';
 import Button from '.';
 
@@ -149,7 +149,7 @@ Now the storybook components are complete, the `README.mdx` documentation should
 
 import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 
-<!-- import the component to use for the ArgsTable under ## Component API  -->
+<!-- import the component to use for the ArgsTable under ## Props  -->
 
 import Button from '.';
 
@@ -167,9 +167,9 @@ Buttons communicate actions that users can take.
   <Story id="ui-components-ui-button-button-stories-js--default-story" />
 </Canvas>
 
-## Component API
+## Props
 
-<!-- Display the component API using the ArgsTable. Use JSDoc style comments in the PropTypes of your component to add descriptions for props. See button.component.js Button.propTypes for an example of jsDoc style comments
+<!-- Display the Props using the ArgsTable. Use JSDoc style comments in the PropTypes of your component to add descriptions for props. See button.component.js Button.propTypes for an example of jsDoc style comments
 -->
 
 <ArgsTable of={Button} />
diff --git a/ui/components/app/account-list-item/README.mdx b/ui/components/app/account-list-item/README.mdx
index a0eb00386..6c2db73a2 100644
--- a/ui/components/app/account-list-item/README.mdx
+++ b/ui/components/app/account-list-item/README.mdx
@@ -9,6 +9,6 @@ Account List Item is referred for each account item on the Account List's compon
   <Story id="ui-components-app-account-list-item-account-list-item-stories-js--default-story" />
 </Canvas>
 
-## Component API
+## Props
 
 <ArgsTable of={AccountListItem} />
diff --git a/ui/components/app/flask/snap-settings-card/README.mdx b/ui/components/app/flask/snap-settings-card/README.mdx
index 8f958a645..df18a90e8 100644
--- a/ui/components/app/flask/snap-settings-card/README.mdx
+++ b/ui/components/app/flask/snap-settings-card/README.mdx
@@ -10,7 +10,7 @@ A card component that displays information and the status of a snap. The `SnapSe
   <Story id="ui-components-app-flask-snap-settings-card-snap-settings-card-stories-js--default-story" />
 </Canvas>
 
-## Component API
+## Props
 
 <ArgsTable of={SnapSettingsCard} />
 
diff --git a/ui/components/app/metamask-translation/README.mdx b/ui/components/app/metamask-translation/README.mdx
index df4807426..98cee86e4 100644
--- a/ui/components/app/metamask-translation/README.mdx
+++ b/ui/components/app/metamask-translation/README.mdx
@@ -23,7 +23,7 @@ trees to contain.
   <Story id="ui-components-app-metamask-translation-metamask-translation-stories-js--default-story" />
 </Canvas>
 
-## Component API
+## Props
 
 <!--
 ArgsTable doesn't work with SectionShape
diff --git a/ui/components/app/signature-request-original/README.mdx b/ui/components/app/signature-request-original/README.mdx
index 6c07ccd38..1d37d24e8 100644
--- a/ui/components/app/signature-request-original/README.mdx
+++ b/ui/components/app/signature-request-original/README.mdx
@@ -10,6 +10,6 @@ dApp requesting a signature from the user. This component appears for eth_signTy
   <Story id="ui-components-app-signature-request-signature-request-original-stories-js--default-story" />
 </Canvas>
 
-## Component API
+## Props
 
 <ArgsTable of={SignatureRequestOriginal} />
diff --git a/ui/components/app/signature-request/README.mdx b/ui/components/app/signature-request/README.mdx
index 0df4dd77e..ed6d6de49 100644
--- a/ui/components/app/signature-request/README.mdx
+++ b/ui/components/app/signature-request/README.mdx
@@ -10,6 +10,6 @@ dApp requesting a signature from the user.
   <Story id="ui-components-app-signature-request-signature-request-stories-js--default-story" />
 </Canvas>
 
-## Component API
+## Props
 
 <ArgsTable of={SignatureRequest} />
diff --git a/ui/components/app/transaction-detail-item/README.mdx b/ui/components/app/transaction-detail-item/README.mdx
index 56bbee1cc..a18f686cf 100644
--- a/ui/components/app/transaction-detail-item/README.mdx
+++ b/ui/components/app/transaction-detail-item/README.mdx
@@ -10,6 +10,6 @@ Transaction detail that includes estimated gas fees. Intended to be used as an a
   <Story id="ui-components-app-transaction-detail-item-transaction-detail-item-stories-js--default-story" />
 </Canvas>
 
-## Component API
+## Props
 
 <ArgsTable of={TransactionDetailItem} />
diff --git a/ui/components/app/transaction-detail/README.mdx b/ui/components/app/transaction-detail/README.mdx
index 3a1959b14..55ad2de10 100644
--- a/ui/components/app/transaction-detail/README.mdx
+++ b/ui/components/app/transaction-detail/README.mdx
@@ -10,7 +10,7 @@ Show transaction detail including estimated gas fee and total fee.
   <Story id="ui-components-app-transaction-detail-transaction-detail-stories-js--default-story" />
 </Canvas>
 
-## Component API
+## Props
 
 <ArgsTable of={TransactionDetail} />
 
diff --git a/ui/components/ui/actionable-message/README.mdx b/ui/components/ui/actionable-message/README.mdx
index c01e3b749..7b3d267ea 100644
--- a/ui/components/ui/actionable-message/README.mdx
+++ b/ui/components/ui/actionable-message/README.mdx
@@ -10,7 +10,7 @@ Popup component that give the user information. Actionable Message component can
   <Story id="ui-components-ui-actionable-message-actionable-message-stories-js--default-story" />
 </Canvas>
 
-## Component API
+## Props
 
 <ArgsTable of={ActionableMessage} />
 
diff --git a/ui/components/ui/alert/README.mdx b/ui/components/ui/alert/README.mdx
index 71981e080..e310c9730 100644
--- a/ui/components/ui/alert/README.mdx
+++ b/ui/components/ui/alert/README.mdx
@@ -10,6 +10,6 @@ Alert element used to notify the user about some information or warning.
   <Story id="ui-components-ui-alert-alert-stories-js--default-alert" />
 </Canvas>
 
-## Component API
+## Props
 
 <ArgsTable of={Alert} />
\ No newline at end of file
diff --git a/ui/components/ui/box/README.mdx b/ui/components/ui/box/README.mdx
index 5a20734a7..1f82a5d22 100644
--- a/ui/components/ui/box/README.mdx
+++ b/ui/components/ui/box/README.mdx
@@ -12,7 +12,7 @@ Box is a utility component that can be used for layout or as a base for other UI
   <Story id="ui-components-ui-box-box-stories-js--default-story" />
 </Canvas>
 
-## Component API
+## Props
 
 | Name            | Description                                                                                                                                                                                                                                                                             | Default            |
 | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
diff --git a/ui/components/ui/breadcrumbs/README.mdx b/ui/components/ui/breadcrumbs/README.mdx
index 4c33afd09..d05ae9a88 100644
--- a/ui/components/ui/breadcrumbs/README.mdx
+++ b/ui/components/ui/breadcrumbs/README.mdx
@@ -11,6 +11,6 @@ Breadcrumbs element is used to represent the current index out of total.
   <Story id="ui-components-ui-breadcrumbs-breadcrumbs-stories-js--default-breadcrumbs" />
 </Canvas>
 
-## Component API
+## Props
 
 <ArgsTable of={Breadcrumbs} />
\ No newline at end of file
diff --git a/ui/components/ui/button-group/README.mdx b/ui/components/ui/button-group/README.mdx
index c075f5607..d77b98467 100644
--- a/ui/components/ui/button-group/README.mdx
+++ b/ui/components/ui/button-group/README.mdx
@@ -10,7 +10,7 @@ Button Group is a wrapper for buttons to align them horizontally
   <Story id="ui-components-ui-button-group-button-group-stories-js--default-story" />
 </Canvas>
 
-## Component API
+## Props
 
 <ArgsTable of={ButtonGroup} />
 
diff --git a/ui/components/ui/button/README.mdx b/ui/components/ui/button/README.mdx
index e51d304f5..cae7c8572 100644
--- a/ui/components/ui/button/README.mdx
+++ b/ui/components/ui/button/README.mdx
@@ -10,7 +10,7 @@ Buttons communicate actions that users can take.
   <Story id="ui-components-ui-button-button-stories-js--default-story" />
 </Canvas>
 
-## Component API
+## Props
 
 <ArgsTable of={Button} />
 
diff --git a/ui/components/ui/card/README.mdx b/ui/components/ui/card/README.mdx
index ddbe0eba2..e0067662d 100644
--- a/ui/components/ui/card/README.mdx
+++ b/ui/components/ui/card/README.mdx
@@ -10,7 +10,7 @@ Cards are used to group related content or actions together.
   <Story id="ui-components-ui-card-card-stories-js--default-story" />
 </Canvas>
 
-## Component API
+## Props
 
 The `Card` component extends the `Box` component. See the `Box` component for an extended list of props.
 
diff --git a/ui/components/ui/check-box/README.mdx b/ui/components/ui/check-box/README.mdx
index b667c2f11..e1f4af51d 100644
--- a/ui/components/ui/check-box/README.mdx
+++ b/ui/components/ui/check-box/README.mdx
@@ -10,6 +10,6 @@ A small interactive box that can be toggled by the user to indicate an affirmati
   <Story id="ui-components-ui-check-box-check-box-stories-js--default-story" />
 </Canvas>
 
-## Component API
+## Props
 
 <ArgsTable of={CheckBox} />
diff --git a/ui/components/ui/chip/README.mdx b/ui/components/ui/chip/README.mdx
index a873620d6..dbdde1cd0 100644
--- a/ui/components/ui/chip/README.mdx
+++ b/ui/components/ui/chip/README.mdx
@@ -10,6 +10,6 @@ Chips are compact elements that represent an input, status, or action.
   <Story id="ui-components-ui-chip-chip-stories-js--default-story" />
 </Canvas>
 
-## Component API
+## Props
 
 <ArgsTable of={Chip} />
diff --git a/ui/components/ui/confusable/README.mdx b/ui/components/ui/confusable/README.mdx
index 126753ec2..ee960c8d9 100644
--- a/ui/components/ui/confusable/README.mdx
+++ b/ui/components/ui/confusable/README.mdx
@@ -10,7 +10,7 @@ Confusable allows to filter out any characters that look very similar to English
   <Story id="ui-components-ui-confusable-confusable-stories-js--default-confusable" />
 </Canvas>
 
-## Component API
+## Props
 
 | Name  | Description | Default |
 | ----- | ----------- | ------- |
diff --git a/ui/components/ui/dialog/README.mdx b/ui/components/ui/dialog/README.mdx
index 6b21aa840..26cff06b8 100644
--- a/ui/components/ui/dialog/README.mdx
+++ b/ui/components/ui/dialog/README.mdx
@@ -10,6 +10,6 @@ Dialog element is to create popup dialogs
   <Story id="ui-components-ui-dialog-dialog-stories-js--default-dialog" />
 </Canvas>
 
-## Component API
+## Props
 
 <ArgsTable of={Dialog} />
diff --git a/ui/components/ui/dropdown/README.mdx b/ui/components/ui/dropdown/README.mdx
index f31aca84f..d2bbe062e 100644
--- a/ui/components/ui/dropdown/README.mdx
+++ b/ui/components/ui/dropdown/README.mdx
@@ -10,7 +10,7 @@ A toggleable menu that allows the user to choose one value from a predefined lis
   <Story id="ui-components-ui-dropdown-dropdown-stories-js--default-story" />
 </Canvas>
 
-## Component API
+## Props
 
 <ArgsTable of={Dropdown} />
 
diff --git a/ui/components/ui/error-message/README.mdx b/ui/components/ui/error-message/README.mdx
index c59f25dd4..bf9d8b348 100644
--- a/ui/components/ui/error-message/README.mdx
+++ b/ui/components/ui/error-message/README.mdx
@@ -10,6 +10,6 @@ This component highlights error messages
   <Story id="ui-components-ui-error-message-error-message-stories-js--default-story" />
 </Canvas>
 
-## Component API
+## Props
 
 <ArgsTable of={ErrorMessage} />
diff --git a/ui/components/ui/export-text-container/README.mdx b/ui/components/ui/export-text-container/README.mdx
index bd57310b0..beb573a53 100644
--- a/ui/components/ui/export-text-container/README.mdx
+++ b/ui/components/ui/export-text-container/README.mdx
@@ -10,6 +10,6 @@ The ExportTextContainer component enables to copy the input text or save it as a
   <Story id="ui-components-ui-export-text-container-export-text-stories-js--default-export-text-container" />
 </Canvas>
 
-## Component API
+## Props
 
 <ArgsTable of={ExportTextContainer} />
diff --git a/ui/components/ui/form-field/README.mdx b/ui/components/ui/form-field/README.mdx
index 2b610b36a..5881cef40 100644
--- a/ui/components/ui/form-field/README.mdx
+++ b/ui/components/ui/form-field/README.mdx
@@ -10,7 +10,7 @@ Various data fields available for forms and pages.
   <Story id="ui-components-ui-form-field-form-field-stories-js--default-story" />
 </Canvas>
 
-## Component API
+## Props
 
 <ArgsTable of={FormField} />
 
diff --git a/ui/components/ui/hex-to-decimal/README.mdx b/ui/components/ui/hex-to-decimal/README.mdx
index 7f3748f66..c4c317241 100644
--- a/ui/components/ui/hex-to-decimal/README.mdx
+++ b/ui/components/ui/hex-to-decimal/README.mdx
@@ -10,6 +10,6 @@ The HexToDecimal component renders hex as a decimal
   <Story id="ui-components-ui-hex-to-decimal-hex-to-decimal-stories-js--default-hex-to-decimal" />
 </Canvas>
 
-## Component API
+## Props
 
 <ArgsTable of={HexToDecimal} />
diff --git a/ui/components/ui/icon-with-fallback/README.mdx b/ui/components/ui/icon-with-fallback/README.mdx
index 10ce346a1..cec2e17f2 100644
--- a/ui/components/ui/icon-with-fallback/README.mdx
+++ b/ui/components/ui/icon-with-fallback/README.mdx
@@ -10,7 +10,7 @@ Icon component that takes an image src and uses `onError` to fallback to the fir
   <Story id="ui-components-ui-icon-with-fallback-icon-with-fallback-stories-js--default-story" />
 </Canvas>
 
-## Component API
+## Props
 
 <ArgsTable of={IconWithFallback} />
 
diff --git a/ui/components/ui/icon/README.mdx b/ui/components/ui/icon/README.mdx
index 89a15b004..67705ae39 100644
--- a/ui/components/ui/icon/README.mdx
+++ b/ui/components/ui/icon/README.mdx
@@ -22,7 +22,7 @@ A range of SVG icon components
 
 > 💡 A lot of the our icons have different props and are not consistent we will need to work on fixing this.
 
-## Component API
+## Props
 
 <ArgsTable of={IconCaretLeft} />
 
diff --git a/ui/components/ui/identicon/README.mdx b/ui/components/ui/identicon/README.mdx
index 8f36cc26b..03547d6d9 100644
--- a/ui/components/ui/identicon/README.mdx
+++ b/ui/components/ui/identicon/README.mdx
@@ -10,7 +10,7 @@ An identifier component that can be supplied an image or randomly generates one
   <Story id="ui-components-ui-identicon-identicon-stories-js--default-story" />
 </Canvas>
 
-## Component API
+## Props
 
 <ArgsTable of={Identicon} />
 
diff --git a/ui/components/ui/info-tooltip/README.mdx b/ui/components/ui/info-tooltip/README.mdx
index 06f49f746..da06b9bdd 100644
--- a/ui/components/ui/info-tooltip/README.mdx
+++ b/ui/components/ui/info-tooltip/README.mdx
@@ -10,7 +10,7 @@ Text labels that appear when the user hovers over
   <Story id="ui-components-ui-info-tooltip-info-tooltip-stories-js--default-story" />
 </Canvas>
 
-## Component API
+## Props
 
 <ArgsTable of={InfoTooltip} />
 
diff --git a/ui/components/ui/logo/README.mdx b/ui/components/ui/logo/README.mdx
index 83468d14e..a07e34430 100644
--- a/ui/components/ui/logo/README.mdx
+++ b/ui/components/ui/logo/README.mdx
@@ -10,6 +10,6 @@ Logo components that are theme compatible
   <Story id="ui-components-ui-logo-logo-stories-js--default-story" />
 </Canvas>
 
-## Component API
+## Props
 
 <ArgsTable of={LogoWyre} />
diff --git a/ui/components/ui/radio-group/README.mdx b/ui/components/ui/radio-group/README.mdx
index d9d1b447a..fa13330c8 100644
--- a/ui/components/ui/radio-group/README.mdx
+++ b/ui/components/ui/radio-group/README.mdx
@@ -10,6 +10,6 @@ A multiple-exclusion scope for a set of radio buttons.
   <Story id="ui-components-ui-radio-group-radio-group-stories-js--default-story" />
 </Canvas>
 
-## Component API
+## Props
 
 <ArgsTable of={RadioGroup} />
diff --git a/ui/components/ui/site-icon/README.mdx b/ui/components/ui/site-icon/README.mdx
index 6ef847958..724bcc9de 100644
--- a/ui/components/ui/site-icon/README.mdx
+++ b/ui/components/ui/site-icon/README.mdx
@@ -10,7 +10,7 @@ SiteIcon uses the `IconBorder` and `IconWithFallback` components to create an ic
   <Story id="ui-components-ui-site-icon-site-icon-stories-js--default-story" />
 </Canvas>
 
-## Component API
+## Props
 
 <ArgsTable of={SiteIcon} />
 
diff --git a/ui/components/ui/text-field/README.mdx b/ui/components/ui/text-field/README.mdx
index 64de9308a..d9ec4a34d 100644
--- a/ui/components/ui/text-field/README.mdx
+++ b/ui/components/ui/text-field/README.mdx
@@ -10,7 +10,7 @@ Text fields allow users to enter text into a UI.
   <Story id="ui-components-ui-text-field-text-field-stories-js--default-story" />
 </Canvas>
 
-## Component API
+## Props
 
 <ArgsTable of={TextField} />
 
diff --git a/ui/components/ui/textarea/README.mdx b/ui/components/ui/textarea/README.mdx
index 6872c596c..febe24a6e 100644
--- a/ui/components/ui/textarea/README.mdx
+++ b/ui/components/ui/textarea/README.mdx
@@ -10,6 +10,6 @@ TextArea allows users to enter text into the UI
   <Story id="ui-components-ui-textarea-textarea-stories-js--default-story" />
 </Canvas>
 
-## Component API
+## Props
 
 <ArgsTable of={TextArea} />
diff --git a/ui/components/ui/toggle-button/README.mdx b/ui/components/ui/toggle-button/README.mdx
index 460f78ffb..acb7692e2 100644
--- a/ui/components/ui/toggle-button/README.mdx
+++ b/ui/components/ui/toggle-button/README.mdx
@@ -10,6 +10,6 @@ Button that toggles state on or off. Wraps <a href="https://gdowens.github.io/re
   <Story id="ui-components-ui-toggle-button-toggle-button-stories-js--default-story" />
 </Canvas>
 
-## Component API
+## Props
 
 <ArgsTable of={ToggleButton} />
diff --git a/ui/components/ui/typography/README.mdx b/ui/components/ui/typography/README.mdx
index c9e0dee7e..86af7631a 100644
--- a/ui/components/ui/typography/README.mdx
+++ b/ui/components/ui/typography/README.mdx
@@ -10,7 +10,7 @@ Good typography improves readability, legibility and hierarchy of information.
   <Story id="ui-components-ui-typography-typography-stories-js--default-story" />
 </Canvas>
 
-## Component API
+## Props
 
 <ArgsTable of={Typography} />
 
diff --git a/ui/components/ui/update-nickname-popover/README.mdx b/ui/components/ui/update-nickname-popover/README.mdx
index 28074738c..a0fce0fa1 100644
--- a/ui/components/ui/update-nickname-popover/README.mdx
+++ b/ui/components/ui/update-nickname-popover/README.mdx
@@ -9,6 +9,6 @@ Popover to update nickname of an address
   <Story id="ui-components-ui-update-nickname-popover-update-nickname-popover-stories-js--default-story" />
 </Canvas>
 
-## Component API
+## Props
 
 <ArgsTable of={UpdateNicknamePopover} />
diff --git a/ui/pages/import-token/README.mdx b/ui/pages/import-token/README.mdx
index 83daea8ff..f45306335 100644
--- a/ui/pages/import-token/README.mdx
+++ b/ui/pages/import-token/README.mdx
@@ -26,6 +26,6 @@ An example input that works, to enable the `Add Custom Token` button is `0xAAAAA
 ### Personal address error
 To show the personal address detected error, input the address <PersonalAddress/> in the `Token Contract Address` field.
 
-## Component API
+## Props
 
 <ArgsTable of={ImportToken} />
diff --git a/ui/pages/send/send-content/send-gas-row/README.mdx b/ui/pages/send/send-content/send-gas-row/README.mdx
index 405198c38..4a1e7b7f3 100644
--- a/ui/pages/send/send-content/send-gas-row/README.mdx
+++ b/ui/pages/send/send-content/send-gas-row/README.mdx
@@ -7,6 +7,6 @@ import SendGasRow from '.';
   <Story id="ui-pages-send-send-content-send-gas-row-send-gas-row-stories-js--default-story" />
 </Canvas>
 
-## Component API
+## Props
 
 <ArgsTable of={SendGasRow} />
diff --git a/ui/pages/swaps/countdown-timer/README.mdx b/ui/pages/swaps/countdown-timer/README.mdx
index b0904c880..f574216b7 100644
--- a/ui/pages/swaps/countdown-timer/README.mdx
+++ b/ui/pages/swaps/countdown-timer/README.mdx
@@ -10,7 +10,7 @@ A CountdownTimer displays a timer that ticks down, communicating to the user the
   <Story id="ui-pages-swaps-countdown-timer-countdown-timer-stories-js--default-story" />
 </Canvas>
 
-## Component API
+## Props
 
 <ArgsTable of={CountdownTimer} />
 
diff --git a/ui/pages/swaps/dropdown-input-pair/README.mdx b/ui/pages/swaps/dropdown-input-pair/README.mdx
index 79e394607..8f0bad97f 100644
--- a/ui/pages/swaps/dropdown-input-pair/README.mdx
+++ b/ui/pages/swaps/dropdown-input-pair/README.mdx
@@ -10,6 +10,6 @@ Dropdown to choose cryptocurrency with amount input field.
   <Story id="ui-pages-swaps-dropdown-input-pair-dropdown-input-pair-stories-js--default-story" />
 </Canvas>
 
-## Component API
+## Props
 
 <ArgsTable of={DropdownInputPair} />
diff --git a/ui/pages/swaps/main-quote-summary/README.mdx b/ui/pages/swaps/main-quote-summary/README.mdx
index 75a8f89ba..32e301c30 100644
--- a/ui/pages/swaps/main-quote-summary/README.mdx
+++ b/ui/pages/swaps/main-quote-summary/README.mdx
@@ -9,6 +9,6 @@ MainQuoteSummary displays the quote of a swap.
   <Story id="ui-pages-swaps-main-quote-summary-main-quote-summary-stories-js--default-story" />
 </Canvas>
 
-## Component API
+## Props
 
 <ArgsTable of={MainQuoteSummary} />
\ No newline at end of file
diff --git a/ui/pages/unlock-page/README.mdx b/ui/pages/unlock-page/README.mdx
index bcd2e1360..cbe501192 100644
--- a/ui/pages/unlock-page/README.mdx
+++ b/ui/pages/unlock-page/README.mdx
@@ -10,7 +10,7 @@ Portal page for user to auth the access of their account
   <Story id="ui-pages-unlock-page-unlock-page-stories-js--default-story" />
 </Canvas>
 
-## Component API
+## Props
 
 <!--
 ArgsTable doesn't work with SectionShape