From b1ebd03f20064e8796bfe380f0b20f9d78f848bb Mon Sep 17 00:00:00 2001
From: Jameson <jameson.brown@mx.com>
Date: Tue, 26 May 2026 11:12:38 -0600
Subject: [PATCH 1/4] feat: implement ReturnUserExperience component and
 integrate with Redux state

---
 src/ReturnUserExperience/returnUserExperience.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ReturnUserExperience/returnUserExperience.module.css b/src/ReturnUserExperience/returnUserExperience.module.css
index 0c86e5169f..fc76276baf 100644
--- a/src/ReturnUserExperience/returnUserExperience.module.css
+++ b/src/ReturnUserExperience/returnUserExperience.module.css
@@ -73,4 +73,4 @@
   padding-top: 16px;
   padding-right: 16px;
   padding-left: 16px;
-}
\ No newline at end of file
+}

From 75226cd33e28aaaef9ffb7af154954915c6421cf Mon Sep 17 00:00:00 2001
From: Jameson <jameson.brown@mx.com>
Date: Tue, 26 May 2026 11:28:49 -0600
Subject: [PATCH 2/4] feat: add RuxPhoneNumber component for phone number input
 in ReturnUserExperience

---
 src/ReturnUserExperience/ReturnUserExperience.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/ReturnUserExperience/ReturnUserExperience.tsx b/src/ReturnUserExperience/ReturnUserExperience.tsx
index a32b922231..4f56ffd347 100644
--- a/src/ReturnUserExperience/ReturnUserExperience.tsx
+++ b/src/ReturnUserExperience/ReturnUserExperience.tsx
@@ -57,6 +57,13 @@ export const ReturnUserExperience = React.forwardRef(() => {
           userEnteredPhone={userEnteredPhone}
         />
       )}
+
+      {view === RUXViews.PHONE_NUMBER && (
+        <RuxPhoneNumber
+          setUserEnteredPhone={setUserEnteredPhone}
+          userEnteredPhone={userEnteredPhone}
+        />
+      )}
     </div>
   )
 })

From c4923bbb97037c268b169c68db1852fa353a4904 Mon Sep 17 00:00:00 2001
From: Jameson <jameson.brown@mx.com>
Date: Tue, 26 May 2026 11:33:17 -0600
Subject: [PATCH 3/4] feat: add RuxPhoneNumber component for phone number input
 in ReturnUserExperience

---
 .../ReturnUserExperience.tsx                  |  5 +++++
 src/ReturnUserExperience/RuxOtp.tsx           | 22 +++++++++++++++++++
 2 files changed, 27 insertions(+)
 create mode 100644 src/ReturnUserExperience/RuxOtp.tsx

diff --git a/src/ReturnUserExperience/ReturnUserExperience.tsx b/src/ReturnUserExperience/ReturnUserExperience.tsx
index 4f56ffd347..c735d52eda 100644
--- a/src/ReturnUserExperience/ReturnUserExperience.tsx
+++ b/src/ReturnUserExperience/ReturnUserExperience.tsx
@@ -4,6 +4,7 @@ import { useSelector } from 'react-redux'
 import styles from './returnUserExperience.module.css'
 import RuxInfo from 'src/ReturnUserExperience/RuxInfo'
 import { RuxPhoneNumber } from 'src/ReturnUserExperience/RuxPhoneNumber'
+import RuxOtp from 'src/ReturnUserExperience/RuxOtp'
 
 import { Stack } from '@mui/material'
 import { Icon } from '@mxenabled/mxui'
@@ -64,6 +65,10 @@ export const ReturnUserExperience = React.forwardRef(() => {
           userEnteredPhone={userEnteredPhone}
         />
       )}
+
+      {view === RUXViews.OTP && <RuxOtp />}
+
+      {view === RUXViews.LIST && <div>{__('List of connections goes here.')}</div>}
     </div>
   )
 })
diff --git a/src/ReturnUserExperience/RuxOtp.tsx b/src/ReturnUserExperience/RuxOtp.tsx
new file mode 100644
index 0000000000..391858583c
--- /dev/null
+++ b/src/ReturnUserExperience/RuxOtp.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import Stack from '@mui/material/Stack'
+import { Text } from '@mxenabled/mxui'
+import Button from '@mui/material/Button'
+
+import { __ } from 'src/utilities/Intl'
+import styles from './returnUserExperience.module.css'
+
+export const RuxPhoneNumber = () => {
+  return (
+    <>
+      {/* OTP Style Input */}
+      OTP Style Input
+      <Stack className={styles.buttonContainer} spacing="8px">
+        <Button>{__('Get code')}</Button>
+        <Text variant="subtitle2">Resend code in (10 seconds)</Text>
+      </Stack>
+    </>
+  )
+}
+
+export default RuxPhoneNumber

From 63df5704a6a26ce4c3fe46588c725bc1f599997d Mon Sep 17 00:00:00 2001
From: Jameson <jameson.brown@mx.com>
Date: Tue, 26 May 2026 11:39:37 -0600
Subject: [PATCH 4/4] feat: add RuxList component to display institution
 selection in ReturnUserExperience

---
 .../ReturnUserExperience.tsx                  |  5 +--
 src/ReturnUserExperience/RuxList.tsx          | 33 +++++++++++++++++++
 2 files changed, 36 insertions(+), 2 deletions(-)
 create mode 100644 src/ReturnUserExperience/RuxList.tsx

diff --git a/src/ReturnUserExperience/ReturnUserExperience.tsx b/src/ReturnUserExperience/ReturnUserExperience.tsx
index c735d52eda..2f8ef467d4 100644
--- a/src/ReturnUserExperience/ReturnUserExperience.tsx
+++ b/src/ReturnUserExperience/ReturnUserExperience.tsx
@@ -3,8 +3,9 @@ import { useSelector } from 'react-redux'
 
 import styles from './returnUserExperience.module.css'
 import RuxInfo from 'src/ReturnUserExperience/RuxInfo'
-import { RuxPhoneNumber } from 'src/ReturnUserExperience/RuxPhoneNumber'
+import RuxPhoneNumber from 'src/ReturnUserExperience/RuxPhoneNumber'
 import RuxOtp from 'src/ReturnUserExperience/RuxOtp'
+import RuxList from 'src/ReturnUserExperience/RuxList'
 
 import { Stack } from '@mui/material'
 import { Icon } from '@mxenabled/mxui'
@@ -68,7 +69,7 @@ export const ReturnUserExperience = React.forwardRef(() => {
 
       {view === RUXViews.OTP && <RuxOtp />}
 
-      {view === RUXViews.LIST && <div>{__('List of connections goes here.')}</div>}
+      {view === RUXViews.LIST && <RuxList />}
     </div>
   )
 })
diff --git a/src/ReturnUserExperience/RuxList.tsx b/src/ReturnUserExperience/RuxList.tsx
new file mode 100644
index 0000000000..fc20ccb25e
--- /dev/null
+++ b/src/ReturnUserExperience/RuxList.tsx
@@ -0,0 +1,33 @@
+import React from 'react'
+import Stack from '@mui/material/Stack'
+import { Text } from '@mxenabled/mxui'
+import { Icon } from '@mxenabled/mxui'
+import Button from '@mui/material/Button'
+
+import { __ } from 'src/utilities/Intl'
+import styles from './returnUserExperience.module.css'
+
+export const RuxList = () => {
+  return (
+    <>
+      <Text variant="h2">{__('Select your institution')}</Text>
+      <Text variant="subtitle1">
+        {__('Choose a previously connected institution or add a new one.')}
+      </Text>
+
+      {/* Connections list goes here */}
+      <p>Connections list goes here</p>
+
+      <Stack className={styles.buttonContainer} spacing="8px">
+        <Button variant="outlined">
+          <Icon name="plus" /> {__('Connect new institution')}
+        </Button>
+        <Text variant="subtitle2">
+          {__('Disconnect accounts from MX anytime by contacting support.')}
+        </Text>
+      </Stack>
+    </>
+  )
+}
+
+export default RuxList