From f1dca5244060921986180d5788e21e12610c9596 Mon Sep 17 00:00:00 2001
From: Clement Mwimo <clement.mwimo@mx.com>
Date: Tue, 28 Jul 2026 23:35:30 -0600
Subject: [PATCH 1/5] migrated ChevronRight kyper component

---
 src/components/InstitutionTile.js            |  5 ++---
 src/components/support/SupportMenu.js        |  5 ++---
 src/views/disclosure/DataRequested.js        |  5 ++---
 src/views/disclosure/Interstitial.js         |  8 +++-----
 src/views/disclosure/PoweredByMX.js          |  5 ++---
 src/views/loginError/ImpededMemberError.js   |  7 +++----
 src/views/manualAccount/ManualAccountMenu.js |  5 ++---
 src/views/microdeposits/AccountInfo.js       | 11 ++++++++---
 src/views/microdeposits/RoutingNumber.js     | 11 ++++++++---
 9 files changed, 32 insertions(+), 30 deletions(-)

diff --git a/src/components/InstitutionTile.js b/src/components/InstitutionTile.js
index 63aaef1d01..b09d2ec965 100644
--- a/src/components/InstitutionTile.js
+++ b/src/components/InstitutionTile.js
@@ -6,8 +6,7 @@ import { __ } from 'src/utilities/Intl'
 import { useTokens } from '@kyper/tokenprovider'
 
 import { Button, Chip } from '@mui/material'
-import { ChevronRight } from '@kyper/icon/ChevronRight'
-import { InstitutionLogo } from '@mxenabled/mxui'
+import { Icon, InstitutionLogo } from '@mxenabled/mxui'
 
 import { formatUrl } from 'src/utilities/FormatUrl'
 import {
@@ -36,7 +35,7 @@ export const InstitutionTile = (props) => {
       data-test={`${institution.name.replace(/\s+/g, '-')}-row`}
       endIcon={
         !institution.is_disabled_by_client && (
-          <ChevronRight color={tokens.TextColor.Default} height={16} width={16} />
+          <Icon name="chevron_right" size={16} sx={{ color: tokens.TextColor.Default }} />
         )
       }
       fullWidth={true}
diff --git a/src/components/support/SupportMenu.js b/src/components/support/SupportMenu.js
index 93a617384c..0a36436697 100644
--- a/src/components/support/SupportMenu.js
+++ b/src/components/support/SupportMenu.js
@@ -3,8 +3,7 @@ import PropTypes from 'prop-types'
 
 import { useTokens } from '@kyper/tokenprovider'
 import { UtilityRow } from '@kyper/utilityrow'
-import { ChevronRight } from '@kyper/icon/ChevronRight'
-import { Text } from '@mxenabled/mxui'
+import { Icon, Text } from '@mxenabled/mxui'
 
 import { __ } from 'src/utilities/Intl'
 
@@ -32,7 +31,7 @@ export const SupportMenu = React.forwardRef((props, menuRef) => {
         <UtilityRow
           borderType="inset-left"
           onClick={selectGeneralSupport}
-          rightChildren={<ChevronRight />}
+          rightChildren={<Icon name="chevron_right" size={16} />}
           subTitle={__('Get help connecting your account')}
           title={__('Request support')}
         />
diff --git a/src/views/disclosure/DataRequested.js b/src/views/disclosure/DataRequested.js
index 4b9efc464d..8152b0835e 100644
--- a/src/views/disclosure/DataRequested.js
+++ b/src/views/disclosure/DataRequested.js
@@ -3,8 +3,7 @@ import { useSelector } from 'react-redux'
 import PropTypes from 'prop-types'
 
 import { useTokens } from '@kyper/tokenprovider'
-import { Text } from '@mxenabled/mxui'
-import { ChevronRight } from '@kyper/icon/ChevronRight'
+import { Icon, Text } from '@mxenabled/mxui'
 import { Link } from '@mui/material'
 
 import { selectConnectConfig } from 'src/redux/reducers/configSlice'
@@ -97,7 +96,7 @@ export const DataRequested = (props) => {
           style={styles.link}
         >
           {__('Other available data')}
-          <ChevronRight style={styles.chevron} />
+          <Icon name="chevron_right" size={16} />
         </Link>
       </SlideDown>
     </Fragment>
diff --git a/src/views/disclosure/Interstitial.js b/src/views/disclosure/Interstitial.js
index 10b16f2770..7e05c9439c 100644
--- a/src/views/disclosure/Interstitial.js
+++ b/src/views/disclosure/Interstitial.js
@@ -3,11 +3,10 @@ import { useSelector } from 'react-redux'
 import PropTypes from 'prop-types'
 
 import { useTokens } from '@kyper/tokenprovider'
-import { Text } from '@mxenabled/mxui'
+import { Icon, Text } from '@mxenabled/mxui'
 import { Link as LinkIcon } from '@kyper/icon/Link'
 import { Lock } from '@kyper/icon/Lock'
 import { InfoOutline } from '@kyper/icon/InfoOutline'
-import { ChevronRight } from '@kyper/icon/ChevronRight'
 import { Link, Stack } from '@mui/material'
 
 import { PageviewInfo } from 'src/const/Analytics'
@@ -176,7 +175,7 @@ export const DisclosureInterstitial = React.forwardRef((props, interstitialNavRe
           variant="ParagraphSmall"
         >
           {__('Data requested')}
-          <ChevronRight style={styles.chevron} />
+          <Icon name="chevron_right" size={16} sx={{ marginLeft: '13.02px' }} />
         </Link>
         <Link
           data-test="privacy-policy-button"
@@ -198,7 +197,7 @@ export const DisclosureInterstitial = React.forwardRef((props, interstitialNavRe
         >
           {_p('connect/disclosure/policy/link', 'MX Privacy Policy')}
 
-          <ChevronRight style={styles.chevron} />
+          <Icon name="chevron_right" size={16} sx={{ marginLeft: '13.02px' }} />
         </Link>
       </Stack>
     </Fragment>
@@ -246,7 +245,6 @@ const getStyles = (tokens) => {
       marginTop: tokens.Spacing.Medium,
       width: 'fit-content',
     },
-    chevron: { marginLeft: '13.02px' },
   }
 }
 
diff --git a/src/views/disclosure/PoweredByMX.js b/src/views/disclosure/PoweredByMX.js
index 8ada4a6413..358d2f7727 100644
--- a/src/views/disclosure/PoweredByMX.js
+++ b/src/views/disclosure/PoweredByMX.js
@@ -1,7 +1,7 @@
 import React from 'react'
 
 import { useTokens } from '@kyper/tokenprovider'
-import { ChevronRight } from '@kyper/icon/ChevronRight'
+import { Icon } from '@mxenabled/mxui'
 import PropTypes from 'prop-types'
 
 import { Button } from '@mui/material'
@@ -21,7 +21,7 @@ const PoweredByMX = ({ onClick }) => {
       variant="text"
     >
       <PoweredByMXText />
-      <ChevronRight style={styles.chevron} />
+      <Icon name="chevron_right" size={16} sx={{ marginLeft: 4 }} />
     </Button>
   )
 }
@@ -36,7 +36,6 @@ const getStyles = () => {
       display: 'flex',
       flexDirection: 'row',
     },
-    chevron: { marginLeft: 4 },
   }
 }
 
diff --git a/src/views/loginError/ImpededMemberError.js b/src/views/loginError/ImpededMemberError.js
index bd273b56d4..953e5aaf89 100644
--- a/src/views/loginError/ImpededMemberError.js
+++ b/src/views/loginError/ImpededMemberError.js
@@ -7,8 +7,7 @@ import { getInstitutionLoginUrl } from 'src/utilities/Institution'
 import { goToUrlLink } from 'src/utilities/global'
 
 import { useTokens } from '@kyper/tokenprovider'
-import { Text } from '@mxenabled/mxui'
-import { ChevronRight } from '@kyper/icon/ChevronRight'
+import { Icon, Text } from '@mxenabled/mxui'
 import { Link } from '@mui/material'
 
 export const ImpededMemberError = ({
@@ -52,7 +51,7 @@ export const ImpededMemberError = ({
             >
               {__('Visit website')}
             </Link>
-            <ChevronRight color={tokens.Color.Primary300} />
+            <Icon name="chevron_right" size={16} sx={{ color: tokens.Color.Primary300 }} />
           </div>
         </div>
       </div>
@@ -66,7 +65,7 @@ export const ImpededMemberError = ({
           </Text>
           <div style={styles.actionArea}>
             <Link onClick={onRefreshClick}>{__('Try again')}</Link>
-            <ChevronRight color={tokens.Color.Primary300} />
+            <Icon name="chevron_right" size={16} sx={{ color: tokens.Color.Primary300 }} />
           </div>
         </div>
       </div>
diff --git a/src/views/manualAccount/ManualAccountMenu.js b/src/views/manualAccount/ManualAccountMenu.js
index b9ef6728da..dc19345bac 100644
--- a/src/views/manualAccount/ManualAccountMenu.js
+++ b/src/views/manualAccount/ManualAccountMenu.js
@@ -3,9 +3,8 @@ import PropTypes from 'prop-types'
 import { __ } from 'src/utilities/Intl'
 
 import { useTokens } from '@kyper/tokenprovider'
-import { Text } from '@mxenabled/mxui'
+import { Icon, Text } from '@mxenabled/mxui'
 import { UtilityRow } from '@kyper/utilityrow'
-import { ChevronRight } from '@kyper/icon/ChevronRight'
 import { Check } from '@kyper/icon/Check'
 import { PiggyBankOutline } from '@kyper/icon/PiggyBankOutline'
 import { Document } from '@kyper/icon/Document'
@@ -107,7 +106,7 @@ export const ManualAccountMenu = React.forwardRef((props, ref) => {
             onClick={() =>
               fadeOut(ref.current, 'up', 300).then(props.handleAccountTypeSelect(account_type))
             }
-            rightChildren={<ChevronRight />}
+            rightChildren={<Icon name="chevron_right" size={16} />}
             title={AccountTypeNames[account_type]()}
           />
         ))}
diff --git a/src/views/microdeposits/AccountInfo.js b/src/views/microdeposits/AccountInfo.js
index cd6899376c..3bf744899c 100644
--- a/src/views/microdeposits/AccountInfo.js
+++ b/src/views/microdeposits/AccountInfo.js
@@ -3,8 +3,7 @@ import PropTypes from 'prop-types'
 import _isEmpty from 'lodash/isEmpty'
 
 import { useTokens } from '@kyper/tokenprovider'
-import { Text } from '@mxenabled/mxui'
-import { ChevronRight } from '@kyper/icon/ChevronRight'
+import { Icon, Text } from '@mxenabled/mxui'
 import { TextField, SelectionBox } from 'src/privacy/input'
 import { Button, RadioGroup, FormControl, FormLabel } from '@mui/material'
 
@@ -192,7 +191,13 @@ export const AccountInfo = (props) => {
 
         <SlideDown delay={getNextDelay()}>
           <ActionableUtilityRow
-            icon={<ChevronRight color={tokens.TextColor.ButtonLinkTertiary} size={16} />}
+            icon={
+              <Icon
+                name="chevron_right"
+                size={16}
+                sx={{ color: tokens.TextColor.ButtonLinkTertiary }}
+              />
+            }
             onClick={() => setShowFindDetails(true)}
             text={__('Help finding your account number')}
           />
diff --git a/src/views/microdeposits/RoutingNumber.js b/src/views/microdeposits/RoutingNumber.js
index 30ae9909a0..d3165957c8 100644
--- a/src/views/microdeposits/RoutingNumber.js
+++ b/src/views/microdeposits/RoutingNumber.js
@@ -5,8 +5,7 @@ import { defer } from 'rxjs'
 import _isEmpty from 'lodash/isEmpty'
 
 import { useTokens } from '@kyper/tokenprovider'
-import { Text } from '@mxenabled/mxui'
-import { ChevronRight } from '@kyper/icon/ChevronRight'
+import { Icon, Text } from '@mxenabled/mxui'
 import { TextField } from 'src/privacy/input'
 import { Button } from '@mui/material'
 
@@ -224,7 +223,13 @@ export const RoutingNumber = (props) => {
 
         <SlideDown delay={getNextDelay()}>
           <ActionableUtilityRow
-            icon={<ChevronRight color={tokens.TextColor.ButtonLinkTertiary} size={16} />}
+            icon={
+              <Icon
+                name="chevron_right"
+                size={16}
+                sx={{ color: tokens.TextColor.ButtonLinkTertiary }}
+              />
+            }
             onClick={() => setShowFindDetails(true)}
             text={__('Help finding your routing number')}
           />

From 21a7405d903a5930362328adf20715a30db0c0f5 Mon Sep 17 00:00:00 2001
From: Clement Mwimo <clement.mwimo@mx.com>
Date: Wed, 29 Jul 2026 13:59:45 -0600
Subject: [PATCH 2/5] chore: trigger CI


From 5aacf82c5146cf14729d95d4906391e3829cb749 Mon Sep 17 00:00:00 2001
From: Clement Mwimo <clement.mwimo@mx.com>
Date: Mon, 3 Aug 2026 00:44:44 -0600
Subject: [PATCH 3/5] addressed comments

---
 src/components/InstitutionTile.js            | 6 +-----
 src/components/support/SupportMenu.js        | 2 +-
 src/views/disclosure/DataRequested.js        | 2 +-
 src/views/disclosure/Interstitial.js         | 4 ++--
 src/views/disclosure/PoweredByMX.js          | 2 +-
 src/views/loginError/ImpededMemberError.js   | 4 ++--
 src/views/manualAccount/ManualAccountMenu.js | 2 +-
 src/views/microdeposits/AccountInfo.js       | 8 +-------
 src/views/microdeposits/RoutingNumber.js     | 8 +-------
 9 files changed, 11 insertions(+), 27 deletions(-)

diff --git a/src/components/InstitutionTile.js b/src/components/InstitutionTile.js
index b09d2ec965..789c467c76 100644
--- a/src/components/InstitutionTile.js
+++ b/src/components/InstitutionTile.js
@@ -33,11 +33,7 @@ export const InstitutionTile = (props) => {
       aria-label={__('Add account with %1', institution.name)}
       className={'institutionButton '}
       data-test={`${institution.name.replace(/\s+/g, '-')}-row`}
-      endIcon={
-        !institution.is_disabled_by_client && (
-          <Icon name="chevron_right" size={16} sx={{ color: tokens.TextColor.Default }} />
-        )
-      }
+      endIcon={!institution.is_disabled_by_client && <Icon name="chevron_right" size={24} />}
       fullWidth={true}
       onClick={selectInstitution}
       startIcon={
diff --git a/src/components/support/SupportMenu.js b/src/components/support/SupportMenu.js
index 0a36436697..0c1cf3a870 100644
--- a/src/components/support/SupportMenu.js
+++ b/src/components/support/SupportMenu.js
@@ -31,7 +31,7 @@ export const SupportMenu = React.forwardRef((props, menuRef) => {
         <UtilityRow
           borderType="inset-left"
           onClick={selectGeneralSupport}
-          rightChildren={<Icon name="chevron_right" size={16} />}
+          rightChildren={<Icon name="chevron_right" size={24} />}
           subTitle={__('Get help connecting your account')}
           title={__('Request support')}
         />
diff --git a/src/views/disclosure/DataRequested.js b/src/views/disclosure/DataRequested.js
index 8152b0835e..0f496da395 100644
--- a/src/views/disclosure/DataRequested.js
+++ b/src/views/disclosure/DataRequested.js
@@ -96,7 +96,7 @@ export const DataRequested = (props) => {
           style={styles.link}
         >
           {__('Other available data')}
-          <Icon name="chevron_right" size={16} />
+          <Icon name="chevron_right" size={24} />
         </Link>
       </SlideDown>
     </Fragment>
diff --git a/src/views/disclosure/Interstitial.js b/src/views/disclosure/Interstitial.js
index 7e05c9439c..4f8ce111ac 100644
--- a/src/views/disclosure/Interstitial.js
+++ b/src/views/disclosure/Interstitial.js
@@ -175,7 +175,7 @@ export const DisclosureInterstitial = React.forwardRef((props, interstitialNavRe
           variant="ParagraphSmall"
         >
           {__('Data requested')}
-          <Icon name="chevron_right" size={16} sx={{ marginLeft: '13.02px' }} />
+          <Icon name="chevron_right" size={24} sx={{ marginLeft: '13.02px' }} />
         </Link>
         <Link
           data-test="privacy-policy-button"
@@ -197,7 +197,7 @@ export const DisclosureInterstitial = React.forwardRef((props, interstitialNavRe
         >
           {_p('connect/disclosure/policy/link', 'MX Privacy Policy')}
 
-          <Icon name="chevron_right" size={16} sx={{ marginLeft: '13.02px' }} />
+          <Icon name="chevron_right" size={24} sx={{ marginLeft: '13.02px' }} />
         </Link>
       </Stack>
     </Fragment>
diff --git a/src/views/disclosure/PoweredByMX.js b/src/views/disclosure/PoweredByMX.js
index 358d2f7727..c098962eca 100644
--- a/src/views/disclosure/PoweredByMX.js
+++ b/src/views/disclosure/PoweredByMX.js
@@ -21,7 +21,7 @@ const PoweredByMX = ({ onClick }) => {
       variant="text"
     >
       <PoweredByMXText />
-      <Icon name="chevron_right" size={16} sx={{ marginLeft: 4 }} />
+      <Icon name="chevron_right" size={24} sx={{ marginLeft: 0.5 }} />
     </Button>
   )
 }
diff --git a/src/views/loginError/ImpededMemberError.js b/src/views/loginError/ImpededMemberError.js
index 953e5aaf89..188390fcf3 100644
--- a/src/views/loginError/ImpededMemberError.js
+++ b/src/views/loginError/ImpededMemberError.js
@@ -51,7 +51,7 @@ export const ImpededMemberError = ({
             >
               {__('Visit website')}
             </Link>
-            <Icon name="chevron_right" size={16} sx={{ color: tokens.Color.Primary300 }} />
+            <Icon color="primary" name="chevron_right" size={24} />
           </div>
         </div>
       </div>
@@ -65,7 +65,7 @@ export const ImpededMemberError = ({
           </Text>
           <div style={styles.actionArea}>
             <Link onClick={onRefreshClick}>{__('Try again')}</Link>
-            <Icon name="chevron_right" size={16} sx={{ color: tokens.Color.Primary300 }} />
+            <Icon color="primary" name="chevron_right" size={24} />
           </div>
         </div>
       </div>
diff --git a/src/views/manualAccount/ManualAccountMenu.js b/src/views/manualAccount/ManualAccountMenu.js
index dc19345bac..2eb0b5fb9b 100644
--- a/src/views/manualAccount/ManualAccountMenu.js
+++ b/src/views/manualAccount/ManualAccountMenu.js
@@ -106,7 +106,7 @@ export const ManualAccountMenu = React.forwardRef((props, ref) => {
             onClick={() =>
               fadeOut(ref.current, 'up', 300).then(props.handleAccountTypeSelect(account_type))
             }
-            rightChildren={<Icon name="chevron_right" size={16} />}
+            rightChildren={<Icon name="chevron_right" size={24} />}
             title={AccountTypeNames[account_type]()}
           />
         ))}
diff --git a/src/views/microdeposits/AccountInfo.js b/src/views/microdeposits/AccountInfo.js
index 70c6ccca81..5250f46a7e 100644
--- a/src/views/microdeposits/AccountInfo.js
+++ b/src/views/microdeposits/AccountInfo.js
@@ -191,13 +191,7 @@ export const AccountInfo = (props) => {
 
         <SlideDown delay={getNextDelay()}>
           <ActionableUtilityRow
-            icon={
-              <Icon
-                name="chevron_right"
-                size={16}
-                sx={{ color: tokens.TextColor.ButtonLinkTertiary }}
-              />
-            }
+            icon={<Icon color="action" name="chevron_right" size={24} />}
             onClick={() => setShowFindDetails(true)}
             text={__('Help finding your account number')}
           />
diff --git a/src/views/microdeposits/RoutingNumber.js b/src/views/microdeposits/RoutingNumber.js
index d3165957c8..fc4de0c039 100644
--- a/src/views/microdeposits/RoutingNumber.js
+++ b/src/views/microdeposits/RoutingNumber.js
@@ -223,13 +223,7 @@ export const RoutingNumber = (props) => {
 
         <SlideDown delay={getNextDelay()}>
           <ActionableUtilityRow
-            icon={
-              <Icon
-                name="chevron_right"
-                size={16}
-                sx={{ color: tokens.TextColor.ButtonLinkTertiary }}
-              />
-            }
+            icon={<Icon color="action" name="chevron_right" size={24} />}
             onClick={() => setShowFindDetails(true)}
             text={__('Help finding your routing number')}
           />

From 01db118435badc830afadf07ed7a43eb212dc9db Mon Sep 17 00:00:00 2001
From: Clement Mwimo <clement.mwimo@mx.com>
Date: Mon, 3 Aug 2026 10:58:44 -0600
Subject: [PATCH 4/5] addressed comments

---
 README.md                                    | 2 +-
 src/components/InstitutionTile.js            | 2 +-
 src/components/support/SupportMenu.js        | 2 +-
 src/views/disclosure/DataRequested.js        | 2 +-
 src/views/disclosure/Interstitial.js         | 4 ++--
 src/views/disclosure/PoweredByMX.js          | 2 +-
 src/views/loginError/ImpededMemberError.js   | 4 ++--
 src/views/manualAccount/ManualAccountMenu.js | 2 +-
 src/views/microdeposits/AccountInfo.js       | 2 +-
 src/views/microdeposits/RoutingNumber.js     | 2 +-
 10 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index 132aa1ff78..4d1fe2a525 100644
--- a/README.md
+++ b/README.md
@@ -46,7 +46,7 @@ const App = () => {
 | `onShowConnectSuccessSurvey`   | [`AnalyticContextType`](./typings/connectProps.d.ts#L100)  | The connect widget provides a way to let your analytics provider know that the connect success survey was shown. [More details](./docs/ANALYTICS.md#onShowConnectSuccessSurvey)  |
 | `onSubmitConnectSuccessSurvey` | [`AnalyticContextType`](./typings/connectProps.d.ts#L101)  | The connect widget provides a way to submit connect success survey responses using your own analytics provider. [More details](./docs/ANALYTICS.md#onSubmitConnectSuccessSurvey) |                                               |
 | `profiles`                     | [`ProfilesTypes`](./typings/connectProps.d.ts)             | The connect widget uses the profiles to set the initial state of the widget. [More details](./docs/PROFILES.md)                                                                  | See more details                              |
-| `userFeatures`                 | [`UserFeaturesType`](./typings/connectProps.d.ts)          | The connect widget uses user features to determine the behavior of the widget. [More details](./docs/USER_FEATURES.md)                                                           | See more details 
+| `userFeatures`                 | [`UserFeaturesType`](./typings/connectProps.d.ts)          | The connect widget uses user features to determine the behavior of the widget. [More details](./docs/USER_FEATURES.md)                                                           | See more details                              |
 | `webSocketConnection`          | `object`                                                   | An object containing `isConnected()` function and `webSocketMessages$` observable for real-time updates.                                                                         | `null`                                        |
 | `experimentalFeatures`         | `object`                                                   | An object to enable or disable experimental features like `useWebSockets: true`.                                                                                                 | `null`                                        |
 
diff --git a/src/components/InstitutionTile.js b/src/components/InstitutionTile.js
index 789c467c76..4d04694e47 100644
--- a/src/components/InstitutionTile.js
+++ b/src/components/InstitutionTile.js
@@ -33,7 +33,7 @@ export const InstitutionTile = (props) => {
       aria-label={__('Add account with %1', institution.name)}
       className={'institutionButton '}
       data-test={`${institution.name.replace(/\s+/g, '-')}-row`}
-      endIcon={!institution.is_disabled_by_client && <Icon name="chevron_right" size={24} />}
+      endIcon={!institution.is_disabled_by_client && <Icon name="chevron_forward" size={24} />}
       fullWidth={true}
       onClick={selectInstitution}
       startIcon={
diff --git a/src/components/support/SupportMenu.js b/src/components/support/SupportMenu.js
index 0c1cf3a870..4f6d067464 100644
--- a/src/components/support/SupportMenu.js
+++ b/src/components/support/SupportMenu.js
@@ -31,7 +31,7 @@ export const SupportMenu = React.forwardRef((props, menuRef) => {
         <UtilityRow
           borderType="inset-left"
           onClick={selectGeneralSupport}
-          rightChildren={<Icon name="chevron_right" size={24} />}
+          rightChildren={<Icon name="chevron_forward" size={24} />}
           subTitle={__('Get help connecting your account')}
           title={__('Request support')}
         />
diff --git a/src/views/disclosure/DataRequested.js b/src/views/disclosure/DataRequested.js
index 0f496da395..ff1d3510fc 100644
--- a/src/views/disclosure/DataRequested.js
+++ b/src/views/disclosure/DataRequested.js
@@ -96,7 +96,7 @@ export const DataRequested = (props) => {
           style={styles.link}
         >
           {__('Other available data')}
-          <Icon name="chevron_right" size={24} />
+          <Icon name="chevron_forward" size={16} sx={{ ml: 0.5 }} />
         </Link>
       </SlideDown>
     </Fragment>
diff --git a/src/views/disclosure/Interstitial.js b/src/views/disclosure/Interstitial.js
index 4f8ce111ac..3896e9e55c 100644
--- a/src/views/disclosure/Interstitial.js
+++ b/src/views/disclosure/Interstitial.js
@@ -175,7 +175,7 @@ export const DisclosureInterstitial = React.forwardRef((props, interstitialNavRe
           variant="ParagraphSmall"
         >
           {__('Data requested')}
-          <Icon name="chevron_right" size={24} sx={{ marginLeft: '13.02px' }} />
+          <Icon name="chevron_forward" size={16} sx={{ marginLeft: 0.5 }} />
         </Link>
         <Link
           data-test="privacy-policy-button"
@@ -197,7 +197,7 @@ export const DisclosureInterstitial = React.forwardRef((props, interstitialNavRe
         >
           {_p('connect/disclosure/policy/link', 'MX Privacy Policy')}
 
-          <Icon name="chevron_right" size={24} sx={{ marginLeft: '13.02px' }} />
+          <Icon name="chevron_forward" size={16} sx={{ marginLeft: 0.5 }} />
         </Link>
       </Stack>
     </Fragment>
diff --git a/src/views/disclosure/PoweredByMX.js b/src/views/disclosure/PoweredByMX.js
index c098962eca..470457268c 100644
--- a/src/views/disclosure/PoweredByMX.js
+++ b/src/views/disclosure/PoweredByMX.js
@@ -21,7 +21,7 @@ const PoweredByMX = ({ onClick }) => {
       variant="text"
     >
       <PoweredByMXText />
-      <Icon name="chevron_right" size={24} sx={{ marginLeft: 0.5 }} />
+      <Icon name="chevron_forward" size={24} sx={{ marginLeft: '6px' }} />
     </Button>
   )
 }
diff --git a/src/views/loginError/ImpededMemberError.js b/src/views/loginError/ImpededMemberError.js
index 188390fcf3..426ca336d6 100644
--- a/src/views/loginError/ImpededMemberError.js
+++ b/src/views/loginError/ImpededMemberError.js
@@ -51,7 +51,7 @@ export const ImpededMemberError = ({
             >
               {__('Visit website')}
             </Link>
-            <Icon color="primary" name="chevron_right" size={24} />
+            <Icon color="primary" name="chevron_forward" size={24} />
           </div>
         </div>
       </div>
@@ -65,7 +65,7 @@ export const ImpededMemberError = ({
           </Text>
           <div style={styles.actionArea}>
             <Link onClick={onRefreshClick}>{__('Try again')}</Link>
-            <Icon color="primary" name="chevron_right" size={24} />
+            <Icon color="primary" name="chevron_forward" size={24} />
           </div>
         </div>
       </div>
diff --git a/src/views/manualAccount/ManualAccountMenu.js b/src/views/manualAccount/ManualAccountMenu.js
index 2eb0b5fb9b..9c80d36134 100644
--- a/src/views/manualAccount/ManualAccountMenu.js
+++ b/src/views/manualAccount/ManualAccountMenu.js
@@ -106,7 +106,7 @@ export const ManualAccountMenu = React.forwardRef((props, ref) => {
             onClick={() =>
               fadeOut(ref.current, 'up', 300).then(props.handleAccountTypeSelect(account_type))
             }
-            rightChildren={<Icon name="chevron_right" size={24} />}
+            rightChildren={<Icon name="chevron_forward" size={24} />}
             title={AccountTypeNames[account_type]()}
           />
         ))}
diff --git a/src/views/microdeposits/AccountInfo.js b/src/views/microdeposits/AccountInfo.js
index 5250f46a7e..3328b4c463 100644
--- a/src/views/microdeposits/AccountInfo.js
+++ b/src/views/microdeposits/AccountInfo.js
@@ -191,7 +191,7 @@ export const AccountInfo = (props) => {
 
         <SlideDown delay={getNextDelay()}>
           <ActionableUtilityRow
-            icon={<Icon color="action" name="chevron_right" size={24} />}
+            icon={<Icon color="action" name="chevron_forward" size={24} />}
             onClick={() => setShowFindDetails(true)}
             text={__('Help finding your account number')}
           />
diff --git a/src/views/microdeposits/RoutingNumber.js b/src/views/microdeposits/RoutingNumber.js
index fc4de0c039..b34c7b4846 100644
--- a/src/views/microdeposits/RoutingNumber.js
+++ b/src/views/microdeposits/RoutingNumber.js
@@ -223,7 +223,7 @@ export const RoutingNumber = (props) => {
 
         <SlideDown delay={getNextDelay()}>
           <ActionableUtilityRow
-            icon={<Icon color="action" name="chevron_right" size={24} />}
+            icon={<Icon color="action" name="chevron_forward" size={24} />}
             onClick={() => setShowFindDetails(true)}
             text={__('Help finding your routing number')}
           />

From f2eb7fc6ad790267b317adab72269f1073e0ef78 Mon Sep 17 00:00:00 2001
From: Clement Mwimo <clement.mwimo@mx.com>
Date: Mon, 3 Aug 2026 11:07:20 -0600
Subject: [PATCH 5/5] restore Readme

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 4d1fe2a525..132aa1ff78 100644
--- a/README.md
+++ b/README.md
@@ -46,7 +46,7 @@ const App = () => {
 | `onShowConnectSuccessSurvey`   | [`AnalyticContextType`](./typings/connectProps.d.ts#L100)  | The connect widget provides a way to let your analytics provider know that the connect success survey was shown. [More details](./docs/ANALYTICS.md#onShowConnectSuccessSurvey)  |
 | `onSubmitConnectSuccessSurvey` | [`AnalyticContextType`](./typings/connectProps.d.ts#L101)  | The connect widget provides a way to submit connect success survey responses using your own analytics provider. [More details](./docs/ANALYTICS.md#onSubmitConnectSuccessSurvey) |                                               |
 | `profiles`                     | [`ProfilesTypes`](./typings/connectProps.d.ts)             | The connect widget uses the profiles to set the initial state of the widget. [More details](./docs/PROFILES.md)                                                                  | See more details                              |
-| `userFeatures`                 | [`UserFeaturesType`](./typings/connectProps.d.ts)          | The connect widget uses user features to determine the behavior of the widget. [More details](./docs/USER_FEATURES.md)                                                           | See more details                              |
+| `userFeatures`                 | [`UserFeaturesType`](./typings/connectProps.d.ts)          | The connect widget uses user features to determine the behavior of the widget. [More details](./docs/USER_FEATURES.md)                                                           | See more details 
 | `webSocketConnection`          | `object`                                                   | An object containing `isConnected()` function and `webSocketMessages$` observable for real-time updates.                                                                         | `null`                                        |
 | `experimentalFeatures`         | `object`                                                   | An object to enable or disable experimental features like `useWebSockets: true`.                                                                                                 | `null`                                        |