From 2b9b6ec3bc8fdb3638a0af3423806ef2596323f5 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/5] 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 0197cd7336..0e462743a7 100644
--- a/src/ReturnUserExperience/returnUserExperience.module.css
+++ b/src/ReturnUserExperience/returnUserExperience.module.css
@@ -73,4 +73,4 @@
   padding-top: 16px;
   margin-right: -8px;
   margin-left: -8px;
-}
\ No newline at end of file
+}

From 92adfccf580abd25412667ba4d744d7b953b931f 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/5] 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 ae23b12137..a93d7e3082 100644
--- a/src/ReturnUserExperience/ReturnUserExperience.tsx
+++ b/src/ReturnUserExperience/ReturnUserExperience.tsx
@@ -71,6 +71,13 @@ export const ReturnUserExperience = React.forwardRef(() => {
           userEnteredPhone={userEnteredPhone}
         />
       )}
+
+      {view === RUXViews.PHONE_NUMBER && (
+        <RuxPhoneNumber
+          setUserEnteredPhone={setUserEnteredPhone}
+          userEnteredPhone={userEnteredPhone}
+        />
+      )}
     </div>
   )
 })

From 8496b5e10cade313b8ff09f56f01092022972845 Mon Sep 17 00:00:00 2001
From: Jameson <jameson.brown@mx.com>
Date: Tue, 26 May 2026 11:28:49 -0600
Subject: [PATCH 3/5] 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 a93d7e3082..dee4b9648b 100644
--- a/src/ReturnUserExperience/ReturnUserExperience.tsx
+++ b/src/ReturnUserExperience/ReturnUserExperience.tsx
@@ -78,6 +78,13 @@ export const ReturnUserExperience = React.forwardRef(() => {
           userEnteredPhone={userEnteredPhone}
         />
       )}
+
+      {view === RUXViews.PHONE_NUMBER && (
+        <RuxPhoneNumber
+          setUserEnteredPhone={setUserEnteredPhone}
+          userEnteredPhone={userEnteredPhone}
+        />
+      )}
     </div>
   )
 })

From 8dddddbcae3e04ee8eef826da70127d3e04aac41 Mon Sep 17 00:00:00 2001
From: Jameson <jameson.brown@mx.com>
Date: Tue, 26 May 2026 11:33:17 -0600
Subject: [PATCH 4/5] 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 dee4b9648b..86d4721e57 100644
--- a/src/ReturnUserExperience/ReturnUserExperience.tsx
+++ b/src/ReturnUserExperience/ReturnUserExperience.tsx
@@ -4,6 +4,7 @@ import { useDispatch, 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'
@@ -85,6 +86,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 1487bf36b4bb3be1db4e83a8cc3dcf8e2e144481 Mon Sep 17 00:00:00 2001
From: Jameson <jameson.brown@mx.com>
Date: Tue, 26 May 2026 11:39:37 -0600
Subject: [PATCH 5/5] 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 86d4721e57..56b8ebfcff 100644
--- a/src/ReturnUserExperience/ReturnUserExperience.tsx
+++ b/src/ReturnUserExperience/ReturnUserExperience.tsx
@@ -3,8 +3,9 @@ import { useDispatch, 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'
@@ -89,7 +90,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