diff --git a/docs/confirmation-refactoring/confirmation-backend-architecture/README.md b/docs/confirmation-refactoring/confirmation-backend-architecture/README.md
index 453482cbf..a3f30eb88 100644
--- a/docs/confirmation-refactoring/confirmation-backend-architecture/README.md
+++ b/docs/confirmation-refactoring/confirmation-backend-architecture/README.md
@@ -18,7 +18,7 @@ Current confirmation implementation in the background consists of following piec
 ## Areas of Code Cleanup:
 
 1. Migrating to `@metamask/transaction-controller`. `TransactionController` in extension repo should eventually get replaced by core repo [TransactionController](https://github.com/MetaMask/core/tree/main/packages/transaction-controller). This controller is maintained by core team and also used in Metamask Mobile App.
-2. Migrating to `@metamask/message-manager`. Message Managers in extension repo should be deprecated in favour of core repo [MessageManagers](https://github.com/MetaMask/core/tree/main/packages/message-manager).
+2. Migrating to `@metamask/message-manager`. Message Managers in extension repo should be deprecated in favor of core repo [MessageManagers](https://github.com/MetaMask/core/tree/main/packages/message-manager).
 3. Cleanup Code in `MetamaskController`. [Metamaskcontroller](https://github.com/MetaMask/metamask-extension/blob/develop/app/scripts/metamask-controller.js) is where `TransactionController` and different `MessageManagers` are initialized. It is responsible for injecting required dependencies. Also, it is responsible for handling incoming DAPP requests and invoking appropriate methods in these background classes. Over the period of time lot of code that should have been part of `TransactionController` and `MessageManagers` has ended up in `MetamaskController`. We need to cleanup this code and move to the appropriate classes.
    - Code [here](https://github.com/MetaMask/metamask-extension/blob/bc19856d5d9ad1831e1722c84fe6161bed7a0a5a/app/scripts/metamask-controller.js#L3097) to check if `eth_sign` is enabled in preferences and perform other validation on the incoming request should be part of [MessageManager](https://github.com/MetaMask/metamask-extension/blob/develop/app/scripts/lib/message-manager.js)
    - Method to sign messages [signMessage](https://github.com/MetaMask/metamask-extension/blob/bc19856d5d9ad1831e1722c84fe6161bed7a0a5a/app/scripts/metamask-controller.js#L3158), [signPersonalMessage](https://github.com/MetaMask/metamask-extension/blob/bc19856d5d9ad1831e1722c84fe6161bed7a0a5a/app/scripts/metamask-controller.js#L3217), [signTypedMessage](https://github.com/MetaMask/metamask-extension/blob/bc19856d5d9ad1831e1722c84fe6161bed7a0a5a/app/scripts/metamask-controller.js#L3470) can be simplified by injecting `KeyringController` into `MessageManagers`.
diff --git a/ui/components/component-library/text/text.types.ts b/ui/components/component-library/text/text.types.ts
index 56f9d9533..295c4de2c 100644
--- a/ui/components/component-library/text/text.types.ts
+++ b/ui/components/component-library/text/text.types.ts
@@ -24,7 +24,7 @@ export enum TextDirection {
 export const InvisibleCharacter = '\u200B';
 
 /**
- * @deprecated ValidTag enum is deprecated in favour of a union of strings.
+ * @deprecated ValidTag enum is deprecated in favor of a union of strings.
  * To change the root html element tag of the Text component, use the `as` prop and string value.
  * e.g. `<Text as="h1">Hello World</Text>`
  *
diff --git a/ui/components/ui/actionable-message/actionable-message.js b/ui/components/ui/actionable-message/actionable-message.js
index cb87c946e..381a5391e 100644
--- a/ui/components/ui/actionable-message/actionable-message.js
+++ b/ui/components/ui/actionable-message/actionable-message.js
@@ -17,29 +17,15 @@ export const typeHash = {
 };
 
 /**
- * @deprecated `<ActionableMessage />` has been deprecated in favour of the `<BannerAlert />`
+ * @deprecated `<ActionableMessage />` has been deprecated in favor of the `<BannerAlert />`
  * component in ./ui/components/component-library/banner-alert/banner-alert.js.
- * See storybook documentation for Text here:
+ * See storybook documentation for BannerAlert here:
  * {@see {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-banneralert--default-story#banneralert}}
  *
- * Help to replace `ActionableMessage` with `BannerAlert` by submitting a PR
- * @param options
- * @param options.message
- * @param options.primaryAction
- * @param options.primaryActionV2
- * @param options.secondaryAction
- * @param options.className
- * @param options.infoTooltipText
- * @param options.withRightButton
- * @param options.type
- * @param options.useIcon
- * @param options.icon
- * @param options.iconFillColor
- * @param options.roundedButtons
- * @param options.dataTestId
- * @param options.autoHideTime
- * @param options.onAutoHide
+ * Help to replace `ActionableMessage` with `BannerAlert` by submitting a PR against
+ * {@link https://github.com/MetaMask/metamask-extension/issues/19528}
  */
+
 export default function ActionableMessage({
   message = '',
   primaryAction = null,
diff --git a/ui/components/ui/box/README.mdx b/ui/components/ui/box/README.mdx
index 3ea006a32..a70ac7e29 100644
--- a/ui/components/ui/box/README.mdx
+++ b/ui/components/ui/box/README.mdx
@@ -1,15 +1,30 @@
 import { Story, Canvas } from '@storybook/addon-docs';
 
-import ActionableMessage from '../actionable-message';
+import { Severity } from '../../../helpers/constants/design-system';
+
+import { BannerAlert } from '../../component-library/banner-alert';
+
+<BannerAlert
+  severity={Severity.Warning}
+  title="Deprecated"
+  description="The JS version of <Box/> has been deprecated in favor of the TS version from component-library"
+  actionButtonLabel="See details"
+  actionButtonProps={{
+    href: 'https://github.com/MetaMask/metamask-extension/issues/19526',
+  }}
+  marginBottom={4}
+/>
+
+<br />
 
 import Box from '.';
 
-# Box
+# Box (deprecated)
 
 Box is a utility component that can be used for layout or as a base for other UI components.
 
 <Canvas>
-  <Story id="components-ui-box--default-story" />
+  <Story id="components-ui-box-deprecated--default-story" />
 </Canvas>
 
 ## Props
@@ -62,7 +77,7 @@ The margin props `margin`, `marginTop`, `marginRight`, `marginBottom`, `marginLe
 Accepted props are: `0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto` or array of these values
 
 <Canvas>
-  <Story id="components-ui-box--margin" />
+  <Story id="components-ui-box-deprecated--margin" />
 </Canvas>
 
 ```jsx
@@ -93,7 +108,7 @@ The padding props work very similarly to margin. The padding props `padding`, `p
 Accepted props are: `0, 1, 2, 4, 6, 8, 9, 10, 12` or array of these values
 
 <Canvas>
-  <Story id="components-ui-box--padding" />
+  <Story id="components-ui-box-deprecated--padding" />
 </Canvas>
 
 ```jsx
@@ -147,7 +162,7 @@ import Box from '../ui/box';
 The `color` prop can be used to set the color of the content in Box component. The `color` prop accepts [responsive props](#responsive-props) in the form of array props. Defaults to `Color.textDefault`.
 
 <Canvas>
-  <Story id="components-ui-box--color-story" />
+  <Story id="components-ui-box-deprecated--color-story" />
 </Canvas>
 
 Example of importing `TextColor` object with `Box` component
@@ -164,7 +179,7 @@ import Box from '../ui/box';
 Use the `backgroundColor` prop along with the `Color` or `BackgroundColor` object from `ui/helpers/constants/design-system.js` to change background color. The `backgroundColor` prop accepts [responsive props](#responsive-props) in the form of array props.
 
 <Canvas>
-  <Story id="components-ui-box--background-color-story" />
+  <Story id="components-ui-box-deprecated--background-color-story" />
 </Canvas>
 
 Example of importing `BackgroundColor` object with `Box` component
@@ -188,7 +203,7 @@ import Box from '../ui/box';
 Use the `borderColor` prop along with the `Color` or `BorderColor` object from `ui/helpers/constants/design-system.js` to change border color. The `borderColor` prop accepts [responsive props](#responsive-props) in the form of array props.
 
 <Canvas>
-  <Story id="components-ui-box--border-color-story" />
+  <Story id="components-ui-box-deprecated--border-color-story" />
 </Canvas>
 
 Example of importing `BorderColor` object with `Box` component
@@ -216,7 +231,7 @@ import Box from '../ui/box';
 Use the `borderRadius` prop along with the `BorderRadius` object from `ui/helpers/constants/design-system.js` to change border radius. The `borderRadius` prop accepts [responsive props](#responsive-props) in the form of array props.
 
 <Canvas>
-  <Story id="components-ui-box--border-radius-story" />
+  <Story id="components-ui-box-deprecated--border-radius-story" />
 </Canvas>
 
 Example of importing `BorderRadius` object with `Box` component
@@ -257,7 +272,7 @@ The box component provides a responsive props api in the form of array props. Ar
 ```
 
 <Canvas>
-  <Story id="components-ui-box--responsive-props" />
+  <Story id="components-ui-box-deprecated--responsive-props" />
 </Canvas>
 
 ```jsx
@@ -303,7 +318,7 @@ import Box from '../ui/box';
 The polymorphic `as` prop allows you to change the root HTML element of the Box component. Defaults to `'div'`
 
 <Canvas>
-  <Story id="components-ui-box--as" />
+  <Story id="components-ui-box-deprecated--as" />
 </Canvas>
 
 ```jsx
@@ -330,7 +345,7 @@ Example: [BlockSize.Half, BlockSize.ThreeFourths, BlockSize.OneFifth, BlockSize.
 - BlockSize.ThreeSixths is the width for `large screen size (1280px)` and up
 
 <Canvas>
-  <Story id="components-ui-box--width" />
+  <Story id="components-ui-box-deprecated--width" />
 </Canvas>
 
 ```jsx
diff --git a/ui/components/ui/box/box.d.ts b/ui/components/ui/box/box.d.ts
index 623d4a5af..763127fd8 100644
--- a/ui/components/ui/box/box.d.ts
+++ b/ui/components/ui/box/box.d.ts
@@ -179,6 +179,13 @@ export type BackgroundColorArray = [
   BackgroundColor?,
 ];
 
+/**
+ * @deprecated BoxProps have been deprecated in favor of the component-library Box types.
+ * This component should be migrated to use the component-library Box.
+ * import { Box } from '../../component-library';
+ *
+ * Help to migrate this component by submitting a PR
+ */
 export interface BoxProps extends React.HTMLAttributes<HTMLElement> {
   /**
    * The content of the Box component.
@@ -391,6 +398,13 @@ export interface BoxProps extends React.HTMLAttributes<HTMLElement> {
    */
   ref?: React.Ref<HTMLElement>;
 }
-
+/**
+ * @deprecated The JS version of `<Box />` has been deprecated in favor of the TS version in `ui/components/component-library/`.
+ * The component API should be the same, just update the import statement to:
+ * import { Box } from '../../component-library';
+ *
+ * Help to replace the JS `Box` with the TS `Box` by submitting a PR against
+ * {@link https://github.com/MetaMask/metamask-extension/issues/19526}
+ */
 declare const Box: React.FC<BoxProps>;
 export default Box;
diff --git a/ui/components/ui/box/box.js b/ui/components/ui/box/box.js
index 64873611a..869413663 100644
--- a/ui/components/ui/box/box.js
+++ b/ui/components/ui/box/box.js
@@ -187,6 +187,15 @@ const generateClassNames = memoize(
   (type, value) => [type, value],
 );
 
+/**
+ * @deprecated The JS version of the <Box /> component has been deprecated in favor of the new TS version from the component-library.
+ * Please update your code to use the new <Box> component instead
+ * import { Box } from '../../component-library';
+ * The component API is the same so you should only have to update the import statement but you can find documentation for the new Box component in the MetaMask Storybook:
+ * {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-box--docs}
+ * If you would like to help with the replacement of the old Button component, please submit a pull request against this GitHub issue:
+ * {@link https://github.com/MetaMask/metamask-extension/issues/19526}
+ */
 const Box = React.forwardRef(function Box(
   {
     padding,
diff --git a/ui/components/ui/box/box.stories.tsx b/ui/components/ui/box/box.stories.tsx
index 9709d596d..1491ae6e2 100644
--- a/ui/components/ui/box/box.stories.tsx
+++ b/ui/components/ui/box/box.stories.tsx
@@ -41,7 +41,7 @@ const sizeControlOptions = [
 const marginSizeControlOptions = [...sizeControlOptions, 'auto'];
 
 export default {
-  title: 'Components/UI/Box',
+  title: 'Components/UI/Box (deprecated)',
   component: Box,
   parameters: {
     docs: {
diff --git a/ui/components/ui/icon-border/icon-border.stories.js b/ui/components/ui/icon-border/icon-border.stories.js
index daae7e092..7e048eabb 100644
--- a/ui/components/ui/icon-border/icon-border.stories.js
+++ b/ui/components/ui/icon-border/icon-border.stories.js
@@ -30,7 +30,7 @@ export const DefaultStory = (args) => (
     <BannerAlert
       severity={Severity.Warning}
       title="Deprecated"
-      description="<IconBorder/> has been deprecated in favour of the <AvatarBase /> component"
+      description="<IconBorder/> has been deprecated in favor of the <AvatarBase /> component"
       marginBottom={4}
     />
     <IconBorder {...args} />
diff --git a/ui/components/ui/icon/approve-icon.component.js b/ui/components/ui/icon/approve-icon.component.js
index 8c7844874..48be72ba8 100644
--- a/ui/components/ui/icon/approve-icon.component.js
+++ b/ui/components/ui/icon/approve-icon.component.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 /**
- * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * @deprecated This has been deprecated in favor of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
  * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
  */
 
diff --git a/ui/components/ui/icon/icon-eye-slash.js b/ui/components/ui/icon/icon-eye-slash.js
index 2c40c69a0..12002aedd 100644
--- a/ui/components/ui/icon/icon-eye-slash.js
+++ b/ui/components/ui/icon/icon-eye-slash.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 /**
- * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * @deprecated This has been deprecated in favor of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
  * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
  */
 
diff --git a/ui/components/ui/icon/icon-eye.js b/ui/components/ui/icon/icon-eye.js
index 2ddf1bca2..e9efcb760 100644
--- a/ui/components/ui/icon/icon-eye.js
+++ b/ui/components/ui/icon/icon-eye.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 /**
- * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * @deprecated This has been deprecated in favor of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
  * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
  */
 
diff --git a/ui/components/ui/icon/icon-token-search.js b/ui/components/ui/icon/icon-token-search.js
index 26f25c604..9b49762f1 100644
--- a/ui/components/ui/icon/icon-token-search.js
+++ b/ui/components/ui/icon/icon-token-search.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 /**
- * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * @deprecated This has been deprecated in favor of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
  * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
  */
 
diff --git a/ui/components/ui/icon/info-icon-inverted.component.js b/ui/components/ui/icon/info-icon-inverted.component.js
index 3d9811be8..fad6e3a08 100644
--- a/ui/components/ui/icon/info-icon-inverted.component.js
+++ b/ui/components/ui/icon/info-icon-inverted.component.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { SEVERITIES } from '../../../helpers/constants/design-system';
 
 /**
- * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * @deprecated This has been deprecated in favor of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
  * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
  */
 
diff --git a/ui/components/ui/icon/info-icon.component.js b/ui/components/ui/icon/info-icon.component.js
index b1c0b7012..5a42e7dc8 100644
--- a/ui/components/ui/icon/info-icon.component.js
+++ b/ui/components/ui/icon/info-icon.component.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { SEVERITIES } from '../../../helpers/constants/design-system';
 
 /**
- * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * @deprecated This has been deprecated in favor of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
  * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
  */
 
diff --git a/ui/components/ui/icon/interaction-icon.component.js b/ui/components/ui/icon/interaction-icon.component.js
index 693f6701f..2d064ed9d 100644
--- a/ui/components/ui/icon/interaction-icon.component.js
+++ b/ui/components/ui/icon/interaction-icon.component.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 /**
- * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * @deprecated This has been deprecated in favor of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
  * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
  */
 
diff --git a/ui/components/ui/icon/overview-buy-icon.component.js b/ui/components/ui/icon/overview-buy-icon.component.js
index ec6bb289d..b5c6adc19 100644
--- a/ui/components/ui/icon/overview-buy-icon.component.js
+++ b/ui/components/ui/icon/overview-buy-icon.component.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 /**
- * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * @deprecated This has been deprecated in favor of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
  * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
  */
 
diff --git a/ui/components/ui/icon/receive-icon.component.js b/ui/components/ui/icon/receive-icon.component.js
index 5e9a23a49..77f65ff44 100644
--- a/ui/components/ui/icon/receive-icon.component.js
+++ b/ui/components/ui/icon/receive-icon.component.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 /**
- * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * @deprecated This has been deprecated in favor of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
  * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
  */
 
diff --git a/ui/components/ui/icon/search-icon.js b/ui/components/ui/icon/search-icon.js
index 65ac9321a..87724225d 100644
--- a/ui/components/ui/icon/search-icon.js
+++ b/ui/components/ui/icon/search-icon.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 /**
- * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * @deprecated This has been deprecated in favor of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
  * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
  */
 
diff --git a/ui/components/ui/icon/send-icon.component.js b/ui/components/ui/icon/send-icon.component.js
index 49b301c3d..400561b62 100644
--- a/ui/components/ui/icon/send-icon.component.js
+++ b/ui/components/ui/icon/send-icon.component.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 /**
- * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * @deprecated This has been deprecated in favor of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
  * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
  */
 
diff --git a/ui/components/ui/icon/sign-icon.component.js b/ui/components/ui/icon/sign-icon.component.js
index f1ab82d2a..e93af1f31 100644
--- a/ui/components/ui/icon/sign-icon.component.js
+++ b/ui/components/ui/icon/sign-icon.component.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 /**
- * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * @deprecated This has been deprecated in favor of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
  * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
  */
 
diff --git a/ui/components/ui/icon/sun-check-icon.component.js b/ui/components/ui/icon/sun-check-icon.component.js
index d58d68c2f..5e9f97665 100644
--- a/ui/components/ui/icon/sun-check-icon.component.js
+++ b/ui/components/ui/icon/sun-check-icon.component.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 /**
- * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * @deprecated This has been deprecated in favor of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
  * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
  */
 
diff --git a/ui/components/ui/icon/swap-icon-for-list.component.js b/ui/components/ui/icon/swap-icon-for-list.component.js
index a1fb6cee3..88139c072 100644
--- a/ui/components/ui/icon/swap-icon-for-list.component.js
+++ b/ui/components/ui/icon/swap-icon-for-list.component.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 /**
- * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * @deprecated This has been deprecated in favor of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
  * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
  */
 
diff --git a/ui/components/ui/typography/README.mdx b/ui/components/ui/typography/README.mdx
index 19876c19e..e70747515 100644
--- a/ui/components/ui/typography/README.mdx
+++ b/ui/components/ui/typography/README.mdx
@@ -8,7 +8,7 @@ import { BannerAlert } from '../../component-library/banner-alert';
 <BannerAlert
   severity={SEVERITIES.WARNING}
   title="Deprecated"
-  description="<Typography/> has been deprecated in favour of the <Text /> component"
+  description="<Typography/> has been deprecated in favor of the <Text /> component"
   actionButtonLabel="See details"
   actionButtonProps={{
     href: 'https://github.com/MetaMask/metamask-extension/issues/17670',
diff --git a/ui/components/ui/typography/typography.js b/ui/components/ui/typography/typography.js
index 411e1b694..f62bbac9c 100644
--- a/ui/components/ui/typography/typography.js
+++ b/ui/components/ui/typography/typography.js
@@ -57,7 +57,7 @@ export const ValidTags = [
 ];
 
 /**
- * @deprecated `<Typography />` has been deprecated in favour of the `<Text />` component in ./ui/components/component-library/text/text.js
+ * @deprecated `<Typography />` has been deprecated in favor of the `<Text />` component in ./ui/components/component-library/text/text.js
  *
  * See storybook documentation for Text here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--default-story#text
  *
diff --git a/ui/components/ui/typography/typography.scss b/ui/components/ui/typography/typography.scss
index edc05f6bd..fe2cb38ba 100644
--- a/ui/components/ui/typography/typography.scss
+++ b/ui/components/ui/typography/typography.scss
@@ -1,5 +1,5 @@
 /**
- * @deprecated `<Typography />` has been deprecated in favour of the `<Text />` component in ./ui/components/component-library/text/text.js
+ * @deprecated `<Typography />` has been deprecated in favor of the `<Text />` component in ./ui/components/component-library/text/text.js
  *
  * See storybook documentation for Text here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--default-story#text
  *
diff --git a/ui/components/ui/typography/typography.stories.js b/ui/components/ui/typography/typography.stories.js
index cb2234c38..2b75ec2e8 100644
--- a/ui/components/ui/typography/typography.stories.js
+++ b/ui/components/ui/typography/typography.stories.js
@@ -111,7 +111,7 @@ export const DefaultStory = (args) => (
     <BannerAlert
       severity={SEVERITIES.WARNING}
       title="Deprecated"
-      description="<Typography/> has been deprecated in favour of the <Text /> component"
+      description="<Typography/> has been deprecated in favor of the <Text /> component"
       actionButtonLabel="See details"
       actionButtonProps={{
         href: 'https://github.com/MetaMask/metamask-extension/issues/17670',
@@ -137,7 +137,7 @@ export const Variant = (args) => (
     <BannerAlert
       severity={SEVERITIES.WARNING}
       title="Deprecated"
-      description="<Typography/> has been deprecated in favour of the <Text /> component"
+      description="<Typography/> has been deprecated in favor of the <Text /> component"
       actionButtonLabel="See details"
       actionButtonProps={{
         href: 'https://github.com/MetaMask/metamask-extension/issues/17670',
@@ -164,7 +164,7 @@ export const Color = (args) => {
       <BannerAlert
         severity={SEVERITIES.WARNING}
         title="Deprecated"
-        description="<Typography/> has been deprecated in favour of the <Text /> component"
+        description="<Typography/> has been deprecated in favor of the <Text /> component"
         actionButtonLabel="See details"
         actionButtonProps={{
           href: 'https://github.com/MetaMask/metamask-extension/issues/17670',
@@ -226,7 +226,7 @@ export const FontWeight = (args) => (
     <BannerAlert
       severity={SEVERITIES.WARNING}
       title="Deprecated"
-      description="<Typography/> has been deprecated in favour of the <Text /> component"
+      description="<Typography/> has been deprecated in favor of the <Text /> component"
       actionButtonLabel="See details"
       actionButtonProps={{
         href: 'https://github.com/MetaMask/metamask-extension/issues/17670',
@@ -250,7 +250,7 @@ export const FontStyle = (args) => (
     <BannerAlert
       severity={SEVERITIES.WARNING}
       title="Deprecated"
-      description="<Typography/> has been deprecated in favour of the <Text /> component"
+      description="<Typography/> has been deprecated in favor of the <Text /> component"
       actionButtonLabel="See details"
       actionButtonProps={{
         href: 'https://github.com/MetaMask/metamask-extension/issues/17670',
@@ -274,7 +274,7 @@ export const Align = (args) => (
     <BannerAlert
       severity={SEVERITIES.WARNING}
       title="Deprecated"
-      description="<Typography/> has been deprecated in favour of the <Text /> component"
+      description="<Typography/> has been deprecated in favor of the <Text /> component"
       actionButtonLabel="See details"
       actionButtonProps={{
         href: 'https://github.com/MetaMask/metamask-extension/issues/17670',
@@ -298,7 +298,7 @@ export const OverflowWrap = (args) => (
     <BannerAlert
       severity={SEVERITIES.WARNING}
       title="Deprecated"
-      description="<Typography/> has been deprecated in favour of the <Text /> component"
+      description="<Typography/> has been deprecated in favor of the <Text /> component"
       actionButtonLabel="See details"
       actionButtonProps={{
         href: 'https://github.com/MetaMask/metamask-extension/issues/17670',
@@ -326,7 +326,7 @@ export const As = (args) => (
     <BannerAlert
       severity={SEVERITIES.WARNING}
       title="Deprecated"
-      description="<Typography/> has been deprecated in favour of the <Text /> component"
+      description="<Typography/> has been deprecated in favor of the <Text /> component"
       actionButtonLabel="See details"
       actionButtonProps={{
         href: 'https://github.com/MetaMask/metamask-extension/issues/17670',
@@ -359,7 +359,7 @@ export const Margin = (args) => (
     <BannerAlert
       severity={SEVERITIES.WARNING}
       title="Deprecated"
-      description="<Typography/> has been deprecated in favour of the <Text /> component"
+      description="<Typography/> has been deprecated in favor of the <Text /> component"
       actionButtonLabel="See details"
       actionButtonProps={{
         href: 'https://github.com/MetaMask/metamask-extension/issues/17670',
@@ -380,7 +380,7 @@ export const BoxPropsStory = (args) => (
     <BannerAlert
       severity={SEVERITIES.WARNING}
       title="Deprecated"
-      description="<Typography/> has been deprecated in favour of the <Text /> component"
+      description="<Typography/> has been deprecated in favor of the <Text /> component"
       actionButtonLabel="See details"
       actionButtonProps={{
         href: 'https://github.com/MetaMask/metamask-extension/issues/17670',
diff --git a/ui/helpers/constants/design-system.ts b/ui/helpers/constants/design-system.ts
index 2b73cdb26..4f58aca27 100644
--- a/ui/helpers/constants/design-system.ts
+++ b/ui/helpers/constants/design-system.ts
@@ -243,7 +243,7 @@ export enum FlexDirection {
 }
 
 /**
- * @deprecated `FLEX_DIRECTION` const has been deprecated in favour of the `FlexDirection` enum which can still be imported from `ui/helpers/constants/design-system.ts`
+ * @deprecated `FLEX_DIRECTION` const has been deprecated in favor of the `FlexDirection` enum which can still be imported from `ui/helpers/constants/design-system.ts`
  *
  * Help to replace `FLEX_DIRECTION` with `FlexDirection` by submitting PRs against https://github.com/MetaMask/metamask-extension/issues/18714
  */
@@ -262,7 +262,7 @@ export enum FlexWrap {
 }
 
 /**
- * @deprecated `FLEX_WRAP` const has been deprecated in favour of the `FlexWrap` enum which can still be imported from `ui/helpers/constants/design-system.ts`
+ * @deprecated `FLEX_WRAP` const has been deprecated in favor of the `FlexWrap` enum which can still be imported from `ui/helpers/constants/design-system.ts`
  *
  * Help to replace `FLEX_WRAP` with `FlexWrap` by submitting PRs against https://github.com/MetaMask/metamask-extension/issues/18714
  */
@@ -286,7 +286,7 @@ export enum Display {
 }
 
 /**
- * @deprecated `DISPLAY` const has been deprecated in favour of the `Display` enum which can still be imported from `ui/helpers/constants/design-system.ts`
+ * @deprecated `DISPLAY` const has been deprecated in favor of the `Display` enum which can still be imported from `ui/helpers/constants/design-system.ts`
  *
  * Help to replace `DISPLAY` with `Display` by submitting PRs against https://github.com/MetaMask/metamask-extension/issues/18714
  */
@@ -304,7 +304,7 @@ export const DISPLAY = {
 };
 
 /**
- * @deprecated `FRACTIONS` const has been deprecated in favour of the `BlockSize` enum which can still be imported from `ui/helpers/constants/design-system.ts`
+ * @deprecated `FRACTIONS` const has been deprecated in favor of the `BlockSize` enum which can still be imported from `ui/helpers/constants/design-system.ts`
  *
  * Help to replace `FRACTIONS` with `BlockSize` by submitting PRs against https://github.com/MetaMask/metamask-extension/issues/18714
  */
@@ -372,7 +372,7 @@ export enum BlockSize {
 }
 
 /**
- * @deprecated `BLOCK_SIZES` const has been deprecated in favour of the `BlockSize` enum which can still be imported from `ui/helpers/constants/design-system.ts`
+ * @deprecated `BLOCK_SIZES` const has been deprecated in favor of the `BlockSize` enum which can still be imported from `ui/helpers/constants/design-system.ts`
  *
  * Help to replace `BLOCK_SIZES` with `BlockSize` by submitting PRs against https://github.com/MetaMask/metamask-extension/issues/18714
  */
@@ -395,7 +395,7 @@ export enum TextAlign {
 }
 
 /**
- * @deprecated `TEXT_ALIGN` const has been deprecated in favour of the `TextAlign` enum which can still be imported from `ui/helpers/constants/design-system.ts`
+ * @deprecated `TEXT_ALIGN` const has been deprecated in favor of the `TextAlign` enum which can still be imported from `ui/helpers/constants/design-system.ts`
  *
  * Help to replace `TEXT_ALIGN` with `TextAlign` by submitting PRs against https://github.com/MetaMask/metamask-extension/issues/18714
  */
@@ -418,7 +418,7 @@ export enum TextTransform {
 }
 
 /**
- * @deprecated `TEXT_TRANSFORM` const has been deprecated in favour of the `TextTransform` enum which can still be imported from `ui/helpers/constants/design-system.ts`
+ * @deprecated `TEXT_TRANSFORM` const has been deprecated in favor of the `TextTransform` enum which can still be imported from `ui/helpers/constants/design-system.ts`
  *
  * Help to replace `TEXT_TRANSFORM` with `TextTransform` by submitting PRs against https://github.com/MetaMask/metamask-extension/issues/18714
  */
@@ -435,7 +435,7 @@ export enum FontWeight {
 }
 
 /**
- * @deprecated `FONT_WEIGHT` const has been deprecated in favour of the `FontWeight` enum which can still be imported from `ui/helpers/constants/design-system.ts`
+ * @deprecated `FONT_WEIGHT` const has been deprecated in favor of the `FontWeight` enum which can still be imported from `ui/helpers/constants/design-system.ts`
  *
  * Help to replace `FONT_WEIGHT` with `FontWeight` by submitting PRs against https://github.com/MetaMask/metamask-extension/issues/18714
  */
@@ -452,7 +452,7 @@ export enum OverflowWrap {
 }
 
 /**
- * @deprecated `OVERFLOW_WRAP` const has been deprecated in favour of the `OverflowWrap` enum which can still be imported from `ui/helpers/constants/design-system.ts`
+ * @deprecated `OVERFLOW_WRAP` const has been deprecated in favor of the `OverflowWrap` enum which can still be imported from `ui/helpers/constants/design-system.ts`
  *
  * Help to replace `OVERFLOW_WRAP` with `OverflowWrap` by submitting PRs against https://github.com/MetaMask/metamask-extension/issues/18714
  */
@@ -468,7 +468,7 @@ export enum FontStyle {
 }
 
 /**
- * @deprecated `FONT_STYLE` const has been deprecated in favour of the `FontStyle` enum which can still be imported from `ui/helpers/constants/design-system.ts`
+ * @deprecated `FONT_STYLE` const has been deprecated in favor of the `FontStyle` enum which can still be imported from `ui/helpers/constants/design-system.ts`
  *
  * Help to replace `FONT_STYLE` with `FontStyle` by submitting PRs against https://github.com/MetaMask/metamask-extension/issues/18714
  */
@@ -485,7 +485,7 @@ export enum Severity {
 }
 
 /**
- * @deprecated `SEVERITIES` const has been deprecated in favour of the `Severity` enum which can still be imported from `ui/helpers/constants/design-system.ts`
+ * @deprecated `SEVERITIES` const has been deprecated in favor of the `Severity` enum which can still be imported from `ui/helpers/constants/design-system.ts`
  *
  * Help to replace `SEVERITIES` with `FontStyle` by submitting PRs against https://github.com/MetaMask/metamask-extension/issues/18714
  */
diff --git a/ui/hooks/gasFeeInput/useGasFeeInputs.js b/ui/hooks/gasFeeInput/useGasFeeInputs.js
index 275ebac99..99f9db778 100644
--- a/ui/hooks/gasFeeInput/useGasFeeInputs.js
+++ b/ui/hooks/gasFeeInput/useGasFeeInputs.js
@@ -163,7 +163,7 @@ export function useGasFeeInputs(
 
   /**
    * In EIP-1559 V2 designs change to gas estimate is always updated to transaction
-   * Thus callback setEstimateToUse can be deprecate in favour of this useEffect
+   * Thus callback setEstimateToUse can be deprecate in favor of this useEffect
    * so that transaction is source of truth whenever possible.
    */
   useEffect(() => {