diff --git a/src/ConnectedTokenProvider.tsx b/src/ConnectedTokenProvider.tsx
index 761b5f9fed..68fe6862f6 100644
--- a/src/ConnectedTokenProvider.tsx
+++ b/src/ConnectedTokenProvider.tsx
@@ -112,6 +112,17 @@ const connectThemeOverrides = (palette: Theme['palette']) => ({
         },
       },
     },
+    MuiButton: {
+      styleOverrides: {
+        // MUI sizes icon slot children off the button size (medium 20px, large 22px),
+        // which beats the Icon's own size prop. Our chevrons are always 24px.
+        endIcon: {
+          '& > *:nth-of-type(1)': {
+            fontSize: '24px',
+          },
+        },
+      },
+    },
     MuiChip: {
       styleOverrides: {
         label: {
diff --git a/src/components/InstitutionTile.js b/src/components/InstitutionTile.js
index 63aaef1d01..789c467c76 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 {
@@ -34,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 && (
-          <ChevronRight color={tokens.TextColor.Default} height={16} width={16} />
-        )
-      }
+      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 93a617384c..0c1cf3a870 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={24} />}
           subTitle={__('Get help connecting your account')}
           title={__('Request support')}
         />
diff --git a/src/styles/spacing.css b/src/styles/spacing.css
index a8a464b8a5..05ef0c2059 100644
--- a/src/styles/spacing.css
+++ b/src/styles/spacing.css
@@ -2,6 +2,7 @@
   --mui-spacing: 8px;
   --spacing-point-25: calc(var(--mui-spacing) * 0.25);
   --spacing-point-5: calc(var(--mui-spacing) * 0.5);
+  --spacing-point-75: calc(var(--mui-spacing) * 0.75);
   --spacing-1: calc(var(--mui-spacing) * 1);
   --spacing-1-point-25: calc(var(--mui-spacing) * 1.25);
   --spacing-1-point-5: calc(var(--mui-spacing) * 1.5);
diff --git a/src/views/disclosure/DataRequested.js b/src/views/disclosure/DataRequested.js
index 4b9efc464d..8b99a80ed4 100644
--- a/src/views/disclosure/DataRequested.js
+++ b/src/views/disclosure/DataRequested.js
@@ -2,10 +2,8 @@ import React, { Fragment } from 'react'
 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 { Link } from '@mui/material'
+import { Icon, Text } from '@mxenabled/mxui'
+import { Link, Stack } from '@mui/material'
 
 import { selectConnectConfig } from 'src/redux/reducers/configSlice'
 
@@ -21,6 +19,7 @@ import { DataCluster } from 'src/components/DataCluster'
 import { getDelay } from 'src/utilities/getDelay'
 
 import { VIEWS } from 'src/views/disclosure/Interstitial'
+import styles from 'src/views/disclosure/DataRequested.module.css'
 
 export const DataRequested = (props) => {
   useAnalyticsPath(...PageviewInfo.CONNECT_DISCLOSURE_DATA_REQUESTED)
@@ -31,8 +30,6 @@ export const DataRequested = (props) => {
     aggIdentityDataCluster,
   } = getDataClusters()
   const connectConfig = useSelector(selectConnectConfig)
-  const tokens = useTokens()
-  const styles = getStyles(tokens)
   const getNextDelay = getDelay()
   const appName = useSelector((state) => state.profiles.client.oauth_app_name || null)
 
@@ -64,12 +61,11 @@ export const DataRequested = (props) => {
   return (
     <Fragment>
       <SlideDown delay={getNextDelay()}>
-        <div style={styles.container}>
+        <Stack className={styles.container} spacing={0.5}>
           <Text
             bold={true}
             component="h2"
             data-test="data-requested-title"
-            style={styles.title}
             truncate={false}
             variant="H2"
           >
@@ -78,7 +74,6 @@ export const DataRequested = (props) => {
           <Text
             component="p"
             data-test="data-requested-subtitle"
-            style={styles.paragraph}
             truncate={false}
             variant="ParagraphSmall"
           >
@@ -87,41 +82,23 @@ export const DataRequested = (props) => {
               appName ? appName : __('Your app'),
             )}
           </Text>
-        </div>
+        </Stack>
         {dataClusterElement}
         <Link
+          className={styles.link}
           data-test="data-available-button"
           onClick={() => {
             props.setCurrentView(VIEWS.AVAILABLE_DATA)
           }}
-          style={styles.link}
         >
           {__('Other available data')}
-          <ChevronRight style={styles.chevron} />
+          <Icon name="chevron_right" size={16} />
         </Link>
       </SlideDown>
     </Fragment>
   )
 }
 
-const getStyles = (tokens) => {
-  return {
-    title: {
-      marginBottom: tokens.Spacing.Tiny,
-    },
-    paragraph: {
-      marginBottom: tokens.Spacing.XSmall,
-    },
-    container: {
-      marginBottom: tokens.Spacing.Large,
-    },
-    link: {
-      fontWeight: tokens.FontWeight.Semibold,
-      fontSize: tokens.FontSize.Small,
-    },
-  }
-}
-
 DataRequested.propTypes = {
   setCurrentView: PropTypes.func.isRequired,
 }
diff --git a/src/views/disclosure/DataRequested.module.css b/src/views/disclosure/DataRequested.module.css
new file mode 100644
index 0000000000..038ee100c6
--- /dev/null
+++ b/src/views/disclosure/DataRequested.module.css
@@ -0,0 +1,9 @@
+.container:global(.MuiStack-root) {
+  margin-bottom: var(--spacing-4);
+}
+
+.link:global(.MuiLink-root) {
+  font-size: 13px;
+  font-weight: 600;
+  gap: var(--spacing-point-5);
+}
diff --git a/src/views/disclosure/Interstitial.js b/src/views/disclosure/Interstitial.js
index 10b16f2770..99c1c3993f 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'
@@ -23,6 +22,7 @@ import { PrivacyPolicy } from 'src/views/disclosure/PrivacyPolicy'
 import { DataRequested } from 'src/views/disclosure/DataRequested'
 import { DataAvailable } from 'src/views/disclosure/DataAvailable'
 import { getSelectedInstitution } from 'src/redux/selectors/Connect'
+import styles from 'src/views/disclosure/Interstitial.module.css'
 
 export const VIEWS = {
   AVAILABLE_DATA: 'available_data',
@@ -35,7 +35,6 @@ export const DisclosureInterstitial = React.forwardRef((props, interstitialNavRe
   const { handleGoBack, scrollToTop } = props
   useAnalyticsPath(...PageviewInfo.CONNECT_DISCLOSURE)
   const tokens = useTokens()
-  const styles = getStyles(tokens)
   const getNextDelay = getDelay()
   const institution = useSelector(getSelectedInstitution)
   const appName = useSelector((state) => state.profiles.client.oauth_app_name || null)
@@ -79,7 +78,7 @@ export const DisclosureInterstitial = React.forwardRef((props, interstitialNavRe
   return (
     <Fragment>
       <SlideDown delay={getNextDelay()}>
-        <div style={styles.logoHeader}>
+        <div className={styles.logoHeader}>
           <ConnectLogoHeader
             institutionGuid={institution.guid}
             institutionLogo={institution.logo_url}
@@ -87,11 +86,11 @@ export const DisclosureInterstitial = React.forwardRef((props, interstitialNavRe
         </div>
       </SlideDown>
       <SlideDown delay={getNextDelay()}>
-        <div style={styles.flexGroup}>
+        <Stack>
           <Text
+            className={styles.title}
             component="h2"
             data-test="interstitial-header"
-            style={styles.title}
             truncate={false}
             variant="H2"
           >
@@ -99,23 +98,23 @@ export const DisclosureInterstitial = React.forwardRef((props, interstitialNavRe
               ? __('%1 trusts MX to connect your %2 account', appName, institution.name)
               : __('This app trusts MX to connect your account')}
           </Text>
-        </div>
-        <div style={styles.iconGroup}>
-          <LinkIcon color={tokens.TextColor.Default} size={20} style={styles.icon} />
+        </Stack>
+        <Stack direction="row">
+          <LinkIcon className={styles.icon} color={tokens.TextColor.Default} size={20} />
           <Text
             bold={true}
+            className={styles.subTitle}
             data-test="connect-in-seconds"
-            style={styles.subTitle}
             truncate={false}
             variant="Body"
           >
             {__('Connect in seconds')}
           </Text>
-        </div>
+        </Stack>
         <Text
+          className={styles.paragraph}
           component="p"
           data-test="connect-in-seconds-body"
-          style={styles.paragraph}
           truncate={false}
           variant={'Paragraph'}
         >
@@ -129,22 +128,22 @@ export const DisclosureInterstitial = React.forwardRef((props, interstitialNavRe
               )}
         </Text>
 
-        <div style={styles.iconGroup}>
-          <Lock color={tokens.TextColor.Default} size={20} style={styles.icon} />
+        <Stack direction="row">
+          <Lock className={styles.icon} color={tokens.TextColor.Default} size={20} />
           <Text
             bold={true}
+            className={styles.subTitle}
             data-test="private-secure"
-            style={styles.subTitle}
             truncate={false}
             variant="Body"
           >
             {__('Private and secure')}
           </Text>
-        </div>
+        </Stack>
         <Text
+          className={styles.paragraph}
           component="p"
           data-test="private-secure-body"
-          style={styles.paragraph}
           truncate={false}
           variant={'Paragraph'}
         >
@@ -153,32 +152,33 @@ export const DisclosureInterstitial = React.forwardRef((props, interstitialNavRe
           )}
         </Text>
 
-        <div style={styles.iconGroup}>
-          <InfoOutline color={tokens.TextColor.Default} size={20} style={styles.icon} />
+        <Stack direction="row">
+          <InfoOutline className={styles.icon} color={tokens.TextColor.Default} size={20} />
           <Text
             bold={true}
+            className={styles.subTitle}
             data-test="learn-more"
-            style={styles.subTitle}
             truncate={false}
             variant="Body"
           >
             {__('Learn more')}
           </Text>
-        </div>
+        </Stack>
       </SlideDown>
       <Stack direction={'column'}>
         <Link
+          className={styles.link}
           data-test="data-requested-button"
           onClick={() => {
             setCurrentView(VIEWS.DATA_REQUESTED)
           }}
-          style={styles.link}
           variant="ParagraphSmall"
         >
           {__('Data requested')}
-          <ChevronRight style={styles.chevron} />
+          <Icon name="chevron_right" size={16} />
         </Link>
         <Link
+          className={styles.link}
           data-test="privacy-policy-button"
           onClick={() => {
             if (showExternalLinkPopup) {
@@ -193,63 +193,17 @@ export const DisclosureInterstitial = React.forwardRef((props, interstitialNavRe
               goToUrlLink(privacyUrl, true)
             }
           }}
-          style={styles.link}
           variant="ParagraphSmall"
         >
           {_p('connect/disclosure/policy/link', 'MX Privacy Policy')}
 
-          <ChevronRight style={styles.chevron} />
+          <Icon name="chevron_right" size={16} />
         </Link>
       </Stack>
     </Fragment>
   )
 })
 
-const getStyles = (tokens) => {
-  return {
-    logoHeader: {
-      marginTop: tokens.Spacing.Medium,
-      marginBottom: tokens.Spacing.Small,
-    },
-    flexGroup: {
-      display: 'flex',
-      flexDirection: 'column',
-    },
-    title: {
-      marginTop: tokens.Spacing.Large,
-      marginBottom: tokens.Spacing.Large,
-      textAlign: 'center',
-    },
-    iconGroup: {
-      display: 'flex',
-    },
-    icon: {
-      display: 'block',
-      left: '0%',
-      right: ' 0%',
-      top: '0%',
-      bottom: '-0.01%',
-    },
-    subTitle: {
-      marginLeft: tokens.Spacing.Small,
-      marginBottom: tokens.Spacing.Tiny,
-    },
-    paragraph: {
-      flexDirection: 'column',
-      marginLeft: `36px`,
-      marginBottom: tokens.Spacing.Medium,
-    },
-    link: {
-      fontWeight: tokens.FontWeight.Semibold,
-      fontSize: tokens.FontSize.Small,
-      marginLeft: '32px',
-      marginTop: tokens.Spacing.Medium,
-      width: 'fit-content',
-    },
-    chevron: { marginLeft: '13.02px' },
-  }
-}
-
 DisclosureInterstitial.propTypes = {
   handleGoBack: PropTypes.func.isRequired,
   scrollToTop: PropTypes.func.isRequired,
diff --git a/src/views/disclosure/Interstitial.module.css b/src/views/disclosure/Interstitial.module.css
new file mode 100644
index 0000000000..64105d0e2c
--- /dev/null
+++ b/src/views/disclosure/Interstitial.module.css
@@ -0,0 +1,33 @@
+.logoHeader {
+  margin-bottom: var(--spacing-1-point-5);
+  margin-top: var(--spacing-2);
+}
+
+.title:global(.MuiTypography-root) {
+  margin-bottom: var(--spacing-3);
+  margin-top: var(--spacing-3);
+  text-align: center;
+}
+
+.icon {
+  display: block;
+}
+
+.subTitle:global(.MuiTypography-root) {
+  margin-bottom: var(--spacing-point-5);
+  margin-left: var(--spacing-1-point-5);
+}
+
+.paragraph:global(.MuiTypography-root) {
+  margin-bottom: var(--spacing-2);
+  margin-left: var(--spacing-4-point-5);
+}
+
+.link:global(.MuiLink-root) {
+  font-size: 13px;
+  font-weight: 600;
+  gap: var(--spacing-point-5);
+  margin-left: var(--spacing-4);
+  margin-top: var(--spacing-2);
+  width: fit-content;
+}
diff --git a/src/views/disclosure/PoweredByMX.js b/src/views/disclosure/PoweredByMX.js
index 8ada4a6413..cf8f395164 100644
--- a/src/views/disclosure/PoweredByMX.js
+++ b/src/views/disclosure/PoweredByMX.js
@@ -1,27 +1,24 @@
 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'
 import PoweredByMXText from 'src/views/disclosure/PoweredByMXText'
+import styles from 'src/views/disclosure/PoweredByMX.module.css'
 
 const PoweredByMX = ({ onClick }) => {
-  const tokens = useTokens()
-  const styles = getStyles(tokens)
-
   return (
     <Button
+      className={styles.button}
       color="secondary"
       data-test="powered-by-mx-button"
       fullWidth={true}
       onClick={onClick}
-      style={styles.button}
       variant="text"
     >
       <PoweredByMXText />
-      <ChevronRight style={styles.chevron} />
+      <Icon name="chevron_right" size={24} />
     </Button>
   )
 }
@@ -30,14 +27,4 @@ PoweredByMX.propTypes = {
   onClick: PropTypes.func,
 }
 
-const getStyles = () => {
-  return {
-    button: {
-      display: 'flex',
-      flexDirection: 'row',
-    },
-    chevron: { marginLeft: 4 },
-  }
-}
-
 export default PoweredByMX
diff --git a/src/views/disclosure/PoweredByMX.module.css b/src/views/disclosure/PoweredByMX.module.css
new file mode 100644
index 0000000000..30b3644e61
--- /dev/null
+++ b/src/views/disclosure/PoweredByMX.module.css
@@ -0,0 +1,3 @@
+.button:global(.MuiButton-root) {
+  gap: var(--spacing-point-75);
+}
diff --git a/src/views/loginError/ImpededMemberError.js b/src/views/loginError/ImpededMemberError.js
index bd273b56d4..188390fcf3 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 color="primary" name="chevron_right" size={24} />
           </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 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 b9ef6728da..2eb0b5fb9b 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={24} />}
             title={AccountTypeNames[account_type]()}
           />
         ))}
diff --git a/src/views/microdeposits/AccountInfo.js b/src/views/microdeposits/AccountInfo.js
index a4b7551dc4..f8aa64f3d5 100644
--- a/src/views/microdeposits/AccountInfo.js
+++ b/src/views/microdeposits/AccountInfo.js
@@ -2,9 +2,7 @@ import React, { useState, useRef } from 'react'
 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, Stack } from '@mui/material'
 
@@ -59,7 +57,6 @@ export const AccountInfo = (props) => {
     schema,
     initialForm,
   )
-  const tokens = useTokens()
   const getNextDelay = getDelay()
 
   function handleContinue() {
@@ -181,7 +178,7 @@ export const AccountInfo = (props) => {
 
         <SlideDown delay={getNextDelay()}>
           <ActionableUtilityRow
-            icon={<ChevronRight color={tokens.TextColor.ButtonLinkTertiary} size={16} />}
+            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 30ae9909a0..fc4de0c039 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,7 @@ export const RoutingNumber = (props) => {
 
         <SlideDown delay={getNextDelay()}>
           <ActionableUtilityRow
-            icon={<ChevronRight color={tokens.TextColor.ButtonLinkTertiary} size={16} />}
+            icon={<Icon color="action" name="chevron_right" size={24} />}
             onClick={() => setShowFindDetails(true)}
             text={__('Help finding your routing number')}
           />