From 646d6d90aed4d740f7584ea725e144f289a65523 Mon Sep 17 00:00:00 2001
From: Clement Mwimo <clement.mwimo@mx.com>
Date: Wed, 11 Feb 2026 15:00:36 -0700
Subject: [PATCH 1/7] feat: adds a new demo connect guard screen

---
 src/components/RenderConnectStep.js           |  5 ++
 src/const/Connect.js                          |  1 +
 src/hooks/useSelectInstitution.tsx            |  2 +
 src/redux/reducers/Connect.js                 |  3 +
 .../demoConnectGuard/DemoConnectGuard.tsx     | 90 +++++++++++++++++++
 5 files changed, 101 insertions(+)
 create mode 100644 src/views/demoConnectGuard/DemoConnectGuard.tsx

diff --git a/src/components/RenderConnectStep.js b/src/components/RenderConnectStep.js
index 6e12918c19..6f3dc631b3 100644
--- a/src/components/RenderConnectStep.js
+++ b/src/components/RenderConnectStep.js
@@ -34,6 +34,7 @@ import { Microdeposits } from 'src/views/microdeposits/Microdeposits'
 import VerifyExistingMember from 'src/views/verification/VerifyExistingMember'
 import { VerifyError } from 'src/views/verification/VerifyError'
 import { ManualAccountConnect } from 'src/views/manualAccount/ManualAccountConnect'
+import { DemoConnectGuard } from 'src/views/demoConnectGuard/DemoConnectGuard'
 import AdditionalProductStep, {
   ADDITIONAL_PRODUCT_OPTIONS,
 } from 'src/views/additionalProduct/AdditionalProductStep'
@@ -110,6 +111,10 @@ const RenderConnectStep = (props) => {
       throw new Error('invalid product offer')
 
     connectStepView = <AdditionalProductStep ref={props.navigationRef} />
+  } else if (step === STEPS.DEMO_CONNECT_GUARD) {
+    connectStepView = (
+      <DemoConnectGuard institution={selectedInstitution} ref={props.navigationRef} />
+    )
   } else if (step === STEPS.ADD_MANUAL_ACCOUNT) {
     connectStepView = (
       <ManualAccountConnect
diff --git a/src/const/Connect.js b/src/const/Connect.js
index 0dd4b07485..dc73c577e9 100644
--- a/src/const/Connect.js
+++ b/src/const/Connect.js
@@ -11,6 +11,7 @@ export const STEPS = {
   CONNECTING: 'connecting',
   CONSENT: 'consent',
   DELETE_MEMBER_SUCCESS: 'deleteMemberSuccess',
+  DEMO_CONNECT_GUARD: 'demoConnectGuard',
   DISCLOSURE: 'disclosure',
   ENTER_CREDENTIALS: 'enterCreds',
   EXISTING_MEMBER: 'existingMember',
diff --git a/src/hooks/useSelectInstitution.tsx b/src/hooks/useSelectInstitution.tsx
index 65f6726993..5e6aaaa37b 100644
--- a/src/hooks/useSelectInstitution.tsx
+++ b/src/hooks/useSelectInstitution.tsx
@@ -18,6 +18,7 @@ const useSelectInstitution = () => {
   const dispatch = useDispatch()
   const consentIsEnabled = useSelector((state: RootState) => isConsentEnabled(state))
   const connectConfig = useSelector(selectConnectConfig)
+  const user = useSelector((state: RootState) => state.profiles.user)
 
   const handleSelectInstitution = useCallback(
     (institution: InstitutionResponseType) => {
@@ -42,6 +43,7 @@ const useSelectInstitution = () => {
               institutionStatus,
               consentIsEnabled: consentIsEnabled || false,
               additionalProductOption: connectConfig?.additional_product_option || null,
+              user,
             },
           })
         }),
diff --git a/src/redux/reducers/Connect.js b/src/redux/reducers/Connect.js
index 0bc93e513a..a0765b5c90 100644
--- a/src/redux/reducers/Connect.js
+++ b/src/redux/reducers/Connect.js
@@ -278,6 +278,7 @@ const selectInstitutionSuccess = (state, action) => {
   // 2. Additional product - if the client is offering a product AND the institution has support for the product
   // 3. Consent - if the Client has enabled consent
   // 4. Institution disabled - if the institution is disabled by the client
+  // 5. Demo connect guard - if the user is a demo user but the institution is not a demo institution
   let nextStep = STEPS.ENTER_CREDENTIALS
 
   const canOfferVerification =
@@ -292,6 +293,8 @@ const selectInstitutionSuccess = (state, action) => {
       action.payload.institutionStatus === InstitutionStatus.UNAVAILABLE)
   ) {
     nextStep = STEPS.INSTITUTION_STATUS_DETAILS
+  } else if (action.payload.user?.is_demo && !action.payload.institution?.is_demo) {
+    nextStep = STEPS.DEMO_CONNECT_GUARD
   } else if (canOfferVerification || canOfferAggregation) {
     nextStep = STEPS.ADDITIONAL_PRODUCT
   } else if (action.payload.consentIsEnabled) {
diff --git a/src/views/demoConnectGuard/DemoConnectGuard.tsx b/src/views/demoConnectGuard/DemoConnectGuard.tsx
new file mode 100644
index 0000000000..7ff4c8a09d
--- /dev/null
+++ b/src/views/demoConnectGuard/DemoConnectGuard.tsx
@@ -0,0 +1,90 @@
+import React, { useRef } from 'react'
+import { useSelector } from 'react-redux'
+import { Button } from '@mui/material'
+import { P, H2 } from '@mxenabled/mxui'
+import { Icon } from '@mxenabled/mxui'
+
+import { __ } from 'src/utilities/Intl'
+import { InstitutionLogo } from '@mxenabled/mxui'
+import { SlideDown } from 'src/components/SlideDown'
+import { getSelectedInstitution } from 'src/redux/selectors/Connect'
+
+interface DemoConnectGuardProps {
+  onReturnToSearch: () => void
+}
+
+export const DemoConnectGuard: React.FC<DemoConnectGuardProps> = ({ onReturnToSearch }) => {
+  const institution = useSelector(getSelectedInstitution)
+  const containerRef = useRef(null)
+  const styles = getStyles()
+
+  return (
+    <div ref={containerRef} style={styles.container}>
+      <SlideDown>
+        <div style={styles.logoContainer}>
+          <InstitutionLogo
+            alt={__('Logo for %1', institution.name)}
+            aria-hidden={true}
+            institutionGuid={institution.guid}
+            logoUrl={institution.logo_url}
+            size={64}
+          />
+          <Icon color="error" fill={true} name="error" size={32} sx={styles.icon} />
+        </div>
+        <H2 sx={styles.title} truncate={false}>
+          {__('Demo mode active')}
+        </H2>
+        <P sx={styles.body} truncate={false}>
+          {__(
+            'Live institutions are not available in the demo environment. Please select MX Bank to test the connection process.',
+          )}
+        </P>
+        <Button
+          data-test="done-button"
+          fullWidth={true}
+          onClick={onReturnToSearch}
+          variant="contained"
+        >
+          {__('Return to institution selection')}
+        </Button>
+      </SlideDown>
+    </div>
+  )
+}
+
+const getStyles = () => ({
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    textAlign: 'center',
+    paddingTop: 20,
+  } as React.CSSProperties,
+  logoContainer: {
+    position: 'relative',
+    display: 'inline-block',
+  } as React.CSSProperties,
+  icon: {
+    position: 'absolute',
+    top: '-16px',
+    right: '-16px',
+    background: 'white',
+    borderRadius: '50%',
+  },
+  title: {
+    marginBottom: '4px',
+    marginTop: '32px',
+    fontSize: '23px',
+    fontWeight: 700,
+    lineHeight: '32px',
+    textAlign: 'center',
+  },
+  body: {
+    textAlign: 'center',
+    marginBottom: '32px',
+    fontSize: '15px',
+    fontWeight: 400,
+    lineHeight: '24px',
+  } as React.CSSProperties,
+})

From 7146fd9ae54c28976c013fa0b0c116032869fc0e Mon Sep 17 00:00:00 2001
From: Clement Mwimo <clement.mwimo@mx.com>
Date: Wed, 11 Feb 2026 15:31:58 -0700
Subject: [PATCH 2/7] added a new action type

---
 src/components/RenderConnectStep.js           |  4 +---
 src/redux/actions/Connect.js                  |  1 +
 src/redux/reducers/Connect.js                 |  1 +
 .../demoConnectGuard/DemoConnectGuard.tsx     | 20 ++++++++++++-------
 4 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/components/RenderConnectStep.js b/src/components/RenderConnectStep.js
index 6f3dc631b3..b615703f09 100644
--- a/src/components/RenderConnectStep.js
+++ b/src/components/RenderConnectStep.js
@@ -112,9 +112,7 @@ const RenderConnectStep = (props) => {
 
     connectStepView = <AdditionalProductStep ref={props.navigationRef} />
   } else if (step === STEPS.DEMO_CONNECT_GUARD) {
-    connectStepView = (
-      <DemoConnectGuard institution={selectedInstitution} ref={props.navigationRef} />
-    )
+    connectStepView = <DemoConnectGuard />
   } else if (step === STEPS.ADD_MANUAL_ACCOUNT) {
     connectStepView = (
       <ManualAccountConnect
diff --git a/src/redux/actions/Connect.js b/src/redux/actions/Connect.js
index e9841104ab..e772d1aae8 100644
--- a/src/redux/actions/Connect.js
+++ b/src/redux/actions/Connect.js
@@ -50,6 +50,7 @@ export const ActionTypes = {
   LOGIN_ERROR_START_OVER: 'connect/login_error_start_over',
   CONNECT_GO_BACK: 'connect/go_back',
   REJECT_ADDITIONAL_PRODUCT: 'connect/reject_additional_product',
+  DEMO_CONNECT_GUARD_RETURN_TO_SEARCH: 'connect/demo_connect_guard_return_to_search',
 }
 
 export const loadConnect = (config = {}) => ({ type: ActionTypes.LOAD_CONNECT, payload: config })
diff --git a/src/redux/reducers/Connect.js b/src/redux/reducers/Connect.js
index a0765b5c90..e3e1b1b823 100644
--- a/src/redux/reducers/Connect.js
+++ b/src/redux/reducers/Connect.js
@@ -736,6 +736,7 @@ export const connect = createReducer(defaultState, {
   [ActionTypes.ADD_MANUAL_ACCOUNT_SUCCESS]: addManualAccount,
   [ActionTypes.LOGIN_ERROR_START_OVER]: loginErrorStartOver,
   [ActionTypes.CONNECT_GO_BACK]: connectGoBack,
+  [ActionTypes.DEMO_CONNECT_GUARD_RETURN_TO_SEARCH]: goBackSearchOrVerify,
 
   // Addtional product offer / step up reducers
   // These are here to manage changing the location/step of the widget
diff --git a/src/views/demoConnectGuard/DemoConnectGuard.tsx b/src/views/demoConnectGuard/DemoConnectGuard.tsx
index 7ff4c8a09d..c2760c7090 100644
--- a/src/views/demoConnectGuard/DemoConnectGuard.tsx
+++ b/src/views/demoConnectGuard/DemoConnectGuard.tsx
@@ -1,5 +1,5 @@
 import React, { useRef } from 'react'
-import { useSelector } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import { Button } from '@mui/material'
 import { P, H2 } from '@mxenabled/mxui'
 import { Icon } from '@mxenabled/mxui'
@@ -8,16 +8,17 @@ import { __ } from 'src/utilities/Intl'
 import { InstitutionLogo } from '@mxenabled/mxui'
 import { SlideDown } from 'src/components/SlideDown'
 import { getSelectedInstitution } from 'src/redux/selectors/Connect'
+import * as connectActions from 'src/redux/actions/Connect'
+import { selectInitialConfig } from 'src/redux/reducers/configSlice'
 
-interface DemoConnectGuardProps {
-  onReturnToSearch: () => void
-}
-
-export const DemoConnectGuard: React.FC<DemoConnectGuardProps> = ({ onReturnToSearch }) => {
+export const DemoConnectGuard: React.FC = () => {
   const institution = useSelector(getSelectedInstitution)
+  const initialConfig = useSelector(selectInitialConfig)
   const containerRef = useRef(null)
   const styles = getStyles()
 
+  const dispatch = useDispatch()
+
   return (
     <div ref={containerRef} style={styles.container}>
       <SlideDown>
@@ -42,7 +43,12 @@ export const DemoConnectGuard: React.FC<DemoConnectGuardProps> = ({ onReturnToSe
         <Button
           data-test="done-button"
           fullWidth={true}
-          onClick={onReturnToSearch}
+          onClick={() => {
+            dispatch({
+              type: connectActions.ActionTypes.DEMO_CONNECT_GUARD_RETURN_TO_SEARCH,
+              payload: initialConfig,
+            })
+          }}
           variant="contained"
         >
           {__('Return to institution selection')}

From 7abd9322189123140193c6d74168888608cdaac1 Mon Sep 17 00:00:00 2001
From: Clement Mwimo <clement.mwimo@mx.com>
Date: Thu, 12 Feb 2026 12:12:57 -0700
Subject: [PATCH 3/7] added tests

---
 .../DemoConnectGuard-test.tsx                 | 69 +++++++++++++++++++
 .../demoConnectGuard/DemoConnectGuard.tsx     |  2 +-
 2 files changed, 70 insertions(+), 1 deletion(-)
 create mode 100644 src/views/demoConnectGuard/DemoConnectGuard-test.tsx

diff --git a/src/views/demoConnectGuard/DemoConnectGuard-test.tsx b/src/views/demoConnectGuard/DemoConnectGuard-test.tsx
new file mode 100644
index 0000000000..471d807e13
--- /dev/null
+++ b/src/views/demoConnectGuard/DemoConnectGuard-test.tsx
@@ -0,0 +1,69 @@
+import React from 'react'
+import { useDispatch } from 'react-redux'
+import { render, screen } from 'src/utilities/testingLibrary'
+import { DemoConnectGuard } from './DemoConnectGuard'
+import { initialState } from 'src/services/mockedData'
+import * as connectActions from 'src/redux/actions/Connect'
+
+// Mock useDispatch
+vitest.mock('react-redux', async () => {
+  const actual = await vitest.importActual('react-redux')
+  return { ...actual, useDispatch: vitest.fn() }
+})
+const mockDispatch = vitest.fn()
+const mockedUseDispatch = vitest.mocked(useDispatch)
+
+describe('DemoConnectGuard', () => {
+  const mockInstitution = {
+    guid: 'INS-test-123',
+    name: 'Test Bank',
+    logo_url: 'https://example.com/logo.png',
+    code: 'TEST',
+    url: 'https://testbank.com',
+  }
+
+  const mockInitialState = {
+    ...initialState,
+    connect: {
+      ...initialState.connect,
+      selectedInstitution: mockInstitution,
+    },
+  }
+
+  beforeEach(() => {
+    mockDispatch.mockClear()
+    mockedUseDispatch.mockReturnValue(mockDispatch)
+  })
+
+  it('renders all component elements correctly', () => {
+    const { container } = render(<DemoConnectGuard />, { preloadedState: mockInitialState })
+
+    expect(screen.getByText('Demo mode active')).toBeInTheDocument()
+    expect(
+      screen.getByText(
+        'Live institutions are not available in the demo environment. Please select MX Bank to test the connection process.',
+      ),
+    ).toBeInTheDocument()
+
+    const logo = screen.getByAltText('Logo for Test Bank')
+    expect(logo).toBeInTheDocument()
+
+    const errorIcon = container.querySelector('svg.MuiSvgIcon-colorError')
+    expect(errorIcon).toBeInTheDocument()
+
+    const button = screen.getByRole('button', { name: /return to institution selection/i })
+    expect(button).toBeInTheDocument()
+  })
+
+  it('dispatches the correct action when return button is clicked', async () => {
+    const { user } = render(<DemoConnectGuard />, { preloadedState: mockInitialState })
+
+    const returnButton = screen.getByTestId('return-to-search-button')
+    await user.click(returnButton)
+
+    expect(mockDispatch).toHaveBeenCalledWith({
+      type: connectActions.ActionTypes.DEMO_CONNECT_GUARD_RETURN_TO_SEARCH,
+      payload: {},
+    })
+  })
+})
diff --git a/src/views/demoConnectGuard/DemoConnectGuard.tsx b/src/views/demoConnectGuard/DemoConnectGuard.tsx
index c2760c7090..4c79d2e658 100644
--- a/src/views/demoConnectGuard/DemoConnectGuard.tsx
+++ b/src/views/demoConnectGuard/DemoConnectGuard.tsx
@@ -41,7 +41,7 @@ export const DemoConnectGuard: React.FC = () => {
           )}
         </P>
         <Button
-          data-test="done-button"
+          data-test="return-to-search-button"
           fullWidth={true}
           onClick={() => {
             dispatch({

From b5a87f24f345ebce17fcce2c922fe37f548d24d7 Mon Sep 17 00:00:00 2001
From: Clement Mwimo <clement.mwimo@mx.com>
Date: Thu, 12 Feb 2026 14:00:09 -0700
Subject: [PATCH 4/7] removed unused ref

---
 src/views/demoConnectGuard/DemoConnectGuard.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/views/demoConnectGuard/DemoConnectGuard.tsx b/src/views/demoConnectGuard/DemoConnectGuard.tsx
index 4c79d2e658..6ddfc36e0d 100644
--- a/src/views/demoConnectGuard/DemoConnectGuard.tsx
+++ b/src/views/demoConnectGuard/DemoConnectGuard.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react'
+import React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { Button } from '@mui/material'
 import { P, H2 } from '@mxenabled/mxui'
@@ -14,13 +14,12 @@ import { selectInitialConfig } from 'src/redux/reducers/configSlice'
 export const DemoConnectGuard: React.FC = () => {
   const institution = useSelector(getSelectedInstitution)
   const initialConfig = useSelector(selectInitialConfig)
-  const containerRef = useRef(null)
   const styles = getStyles()
 
   const dispatch = useDispatch()
 
   return (
-    <div ref={containerRef} style={styles.container}>
+    <div style={styles.container}>
       <SlideDown>
         <div style={styles.logoContainer}>
           <InstitutionLogo

From 6be4205d4612eec2bdf4aebf810eabcbd367f4e3 Mon Sep 17 00:00:00 2001
From: Clement Mwimo <clement.mwimo@mx.com>
Date: Thu, 12 Feb 2026 14:44:06 -0700
Subject: [PATCH 5/7] added translations

---
 src/const/language/es.json                      |  2 ++
 src/const/language/es.po                        | 12 ++++++++++++
 src/const/language/frCa.json                    |  2 ++
 src/const/language/frCa.po                      | 12 ++++++++++++
 src/views/demoConnectGuard/DemoConnectGuard.tsx | 10 ++++++----
 5 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/src/const/language/es.json b/src/const/language/es.json
index a3ff3087f4..550d0a5b76 100644
--- a/src/const/language/es.json
+++ b/src/const/language/es.json
@@ -421,6 +421,8 @@
   "Profile information": "Información del perfil",
   "Account numbers": "Números de cuenta",
   "To complete your connection, please %1share%2 the following after signing in:": "Para completar su conexión, por favor, %1comparta%2 lo siguiente después de iniciar sesión:",
+  "Demo mode active": "Modo de demostración activo",
+  "Live institutions are not available in the demo environment. Please select *MX Bank* to test the connection process.": "Las instituciones en vivo no están disponibles en el entorno de demostración. Seleccione *MX Bank* para probar el proceso de conexión.",
   "connect/disclosure/button\u0004Continue": "Continuar",
   "connect/disclosure/policy/text\u0004By clicking Continue, you agree to the ": "Al hacer clic en Continuar, tu aceptas la ",
   "connect/disclosure/policy/link\u0004MX Privacy Policy.": "Política de privacidad de Money Experience.",
diff --git a/src/const/language/es.po b/src/const/language/es.po
index 11247d9da6..b713fb6bf8 100644
--- a/src/const/language/es.po
+++ b/src/const/language/es.po
@@ -1986,6 +1986,7 @@ msgstr "No, solo añadir gestión financiera"
 msgid "DISABLED"
 msgstr "DESACTIVADO"
 
+#: src/views/demoConnectGuard/DemoConnectGuard.tsx
 #: src/views/institutionStatusDetails/InstitutionStatusDetails.tsx
 msgid "Logo for %1"
 msgstr "Logotipo de %1"
@@ -2010,6 +2011,7 @@ msgstr "¡Éxito!"
 msgid "No accounts found"
 msgstr "No se encontraron cuentas"
 
+#: src/views/demoConnectGuard/DemoConnectGuard.tsx
 #: src/views/actionableError/useActionableErrorMap.tsx
 msgid "Return to institution selection"
 msgstr "Volver a la selección de instituciones"
@@ -2104,3 +2106,13 @@ msgid ""
 msgstr ""
 "Para completar su conexión, por favor, %1comparta%2 lo siguiente después de "
 "iniciar sesión:"
+
+#: src/views/demoConnectGuard/DemoConnectGuard.tsx
+msgid "Demo mode active"
+msgstr "Modo de demostración activo"
+
+#: src/views/demoConnectGuard/DemoConnectGuard.tsx
+msgid ""
+"Live institutions are not available in the demo environment. Please select "
+"*MX Bank* to test the connection process."
+msgstr "Las instituciones en vivo no están disponibles en el entorno de demostración. Seleccione *MX Bank* para probar el proceso de conexión."
diff --git a/src/const/language/frCa.json b/src/const/language/frCa.json
index 81f997538e..b9ee931572 100644
--- a/src/const/language/frCa.json
+++ b/src/const/language/frCa.json
@@ -422,6 +422,8 @@
   "Profile information": "Informations de profil",
   "Account numbers": "Numéros de compte",
   "To complete your connection, please %1share%2 the following after signing in:": "Pour finaliser votre connexion, veuillez %1partager%2 les informations suivantes après vous être connecté :",
+  "Demo mode active": "Mode démo actif",
+  "Live institutions are not available in the demo environment. Please select *MX Bank* to test the connection process.": "Les établissements réels ne sont pas disponibles dans l'environnement de démonstration. Veuillez sélectionner *MX Bank* pour tester la procédure de connexion.",
   "connect/disclosure/policy/text\u0004By clicking Continue, you agree to the ": "En cliquant sur Continuer, vous acceptez la ",
   "connect/disclosure/policy/link\u0004MX Privacy Policy.": "Politique de confidentialité de MX.",
   "connect/disclosure/policy/link\u0004MX Privacy Policy": "Politique de confidentialité de MX.",
diff --git a/src/const/language/frCa.po b/src/const/language/frCa.po
index 02a7af67e1..f2408b2d7e 100644
--- a/src/const/language/frCa.po
+++ b/src/const/language/frCa.po
@@ -2063,6 +2063,7 @@ msgstr "Non, ajoutez uniquement la gestion financière"
 msgid "DISABLED"
 msgstr "DÉSACTIVÉ"
 
+#: src/views/demoConnectGuard/DemoConnectGuard.tsx
 #: src/views/institutionStatusDetails/InstitutionStatusDetails.tsx
 msgid "Logo for %1"
 msgstr "Logo pour %1"
@@ -2088,6 +2089,7 @@ msgstr "Succès!"
 msgid "No accounts found"
 msgstr "Aucun compte trouvé"
 
+#: src/views/demoConnectGuard/DemoConnectGuard.tsx
 #: src/views/actionableError/useActionableErrorMap.tsx
 msgid "Return to institution selection"
 msgstr "Retour à la sélection des établissements"
@@ -2182,3 +2184,13 @@ msgid ""
 msgstr ""
 "Pour finaliser votre connexion, veuillez %1partager%2 les informations "
 "suivantes après vous être connecté :"
+
+#: src/views/demoConnectGuard/DemoConnectGuard.tsx
+msgid "Demo mode active"
+msgstr "Mode démo actif"
+
+#: src/views/demoConnectGuard/DemoConnectGuard.tsx
+msgid ""
+"Live institutions are not available in the demo environment. Please select "
+"*MX Bank* to test the connection process."
+msgstr "Les établissements réels ne sont pas disponibles dans l'environnement de démonstration. Veuillez sélectionner *MX Bank* pour tester la procédure de connexion."
diff --git a/src/views/demoConnectGuard/DemoConnectGuard.tsx b/src/views/demoConnectGuard/DemoConnectGuard.tsx
index 6ddfc36e0d..26229c619b 100644
--- a/src/views/demoConnectGuard/DemoConnectGuard.tsx
+++ b/src/views/demoConnectGuard/DemoConnectGuard.tsx
@@ -4,7 +4,7 @@ import { Button } from '@mui/material'
 import { P, H2 } from '@mxenabled/mxui'
 import { Icon } from '@mxenabled/mxui'
 
-import { __ } from 'src/utilities/Intl'
+import { __, B } from 'src/utilities/Intl'
 import { InstitutionLogo } from '@mxenabled/mxui'
 import { SlideDown } from 'src/components/SlideDown'
 import { getSelectedInstitution } from 'src/redux/selectors/Connect'
@@ -35,9 +35,11 @@ export const DemoConnectGuard: React.FC = () => {
           {__('Demo mode active')}
         </H2>
         <P sx={styles.body} truncate={false}>
-          {__(
-            'Live institutions are not available in the demo environment. Please select MX Bank to test the connection process.',
-          )}
+          <B>
+            {__(
+              'Live institutions are not available in the demo environment. Please select *MX Bank* to test the connection process.',
+            )}
+          </B>
         </P>
         <Button
           data-test="return-to-search-button"

From ae13301187638da21a13f0bebb2df54335cc863d Mon Sep 17 00:00:00 2001
From: Clement Mwimo <clement.mwimo@mx.com>
Date: Thu, 12 Feb 2026 14:46:38 -0700
Subject: [PATCH 6/7] added more test coverage

---
 .../__tests__/RenderConnectStep-test.jsx      | 78 +++++++++++++++++++
 src/redux/reducers/__tests__/Connect-test.js  | 13 ++++
 .../DemoConnectGuard-test.tsx                 |  2 +-
 .../demoConnectGuard/DemoConnectGuard.tsx     |  1 -
 4 files changed, 92 insertions(+), 2 deletions(-)
 create mode 100644 src/components/__tests__/RenderConnectStep-test.jsx

diff --git a/src/components/__tests__/RenderConnectStep-test.jsx b/src/components/__tests__/RenderConnectStep-test.jsx
new file mode 100644
index 0000000000..8663207f94
--- /dev/null
+++ b/src/components/__tests__/RenderConnectStep-test.jsx
@@ -0,0 +1,78 @@
+import React from 'react'
+import { render, screen } from 'src/utilities/testingLibrary'
+import RenderConnectStep from 'src/components/RenderConnectStep'
+import { STEPS } from 'src/const/Connect'
+
+describe('RenderConnectStep', () => {
+  const defaultProps = {
+    availableAccountTypes: [],
+    handleConsentGoBack: vi.fn(),
+    handleCredentialsGoBack: vi.fn(),
+    navigationRef: React.createRef(),
+    onManualAccountAdded: vi.fn(),
+    onUpsertMember: vi.fn(),
+    setConnectLocalState: vi.fn(),
+  }
+
+  const mockInstitution = {
+    guid: 'INS-123',
+    name: 'Test Bank',
+    logo_url: 'https://example.com/logo.png',
+    code: 'TEST',
+    url: 'https://testbank.com',
+  }
+
+  const createInitialState = (step) => ({
+    browser: {
+      height: 768,
+      width: 1024,
+      size: 'large',
+    },
+    connect: {
+      location: [{ step }],
+      selectedInstitution: mockInstitution,
+      updateCredentials: false,
+      error: null,
+    },
+    config: {
+      mode: 'aggregation',
+      initialConfig: {},
+    },
+    profiles: {
+      client: { has_atrium_api: false },
+      clientProfile: {
+        uses_oauth: false,
+        account_verification_is_enabled: true,
+        is_microdeposits_enabled: true,
+      },
+      widgetProfile: {
+        enable_support_requests: true,
+        show_microdeposits_in_connect: false,
+        display_delete_option_in_connect: true,
+      },
+    },
+  })
+
+  it('should render DemoConnectGuard when step is DEMO_CONNECT_GUARD', () => {
+    const initialState = createInitialState(STEPS.DEMO_CONNECT_GUARD)
+
+    const { container } = render(<RenderConnectStep {...defaultProps} />, {
+      preloadedState: initialState,
+    })
+
+    expect(screen.getByText('Demo mode active')).toBeInTheDocument()
+    expect(
+      screen.getByText('Live institutions are not available in the demo environment'),
+    ).toBeInTheDocument()
+
+    const logo = screen.getByAltText('Logo for Test Bank')
+    expect(logo).toBeInTheDocument()
+    expect(logo).toHaveAttribute('src', mockInstitution.logo_url)
+
+    const errorIcon = container.querySelector('svg.MuiSvgIcon-colorError')
+    expect(errorIcon).toBeInTheDocument()
+
+    const button = screen.getByRole('button', { name: /return to institution selection/i })
+    expect(button).toBeInTheDocument()
+  })
+})
diff --git a/src/redux/reducers/__tests__/Connect-test.js b/src/redux/reducers/__tests__/Connect-test.js
index 578f50ec13..84b30b3472 100644
--- a/src/redux/reducers/__tests__/Connect-test.js
+++ b/src/redux/reducers/__tests__/Connect-test.js
@@ -640,6 +640,19 @@ describe('Connect redux store', () => {
         STEPS.INSTITUTION_STATUS_DETAILS,
       )
     })
+
+    it('should set the step to DEMO_CONNECT_GUARD when the user is a demo user but the institution is not a demo institution', () => {
+      const institution = { guid: 'INST-1', is_demo: false, credentials }
+      const user = { guid: 'USR-1', is_demo: true }
+      const afterState = reducer(defaultState, {
+        type: ActionTypes.SELECT_INSTITUTION_SUCCESS,
+        payload: { institution, user },
+      })
+
+      expect(afterState.location[afterState.location.length - 1].step).toEqual(
+        STEPS.DEMO_CONNECT_GUARD,
+      )
+    })
   })
 
   describe('LOAD_CONNECT', () => {
diff --git a/src/views/demoConnectGuard/DemoConnectGuard-test.tsx b/src/views/demoConnectGuard/DemoConnectGuard-test.tsx
index 471d807e13..05655ea9ec 100644
--- a/src/views/demoConnectGuard/DemoConnectGuard-test.tsx
+++ b/src/views/demoConnectGuard/DemoConnectGuard-test.tsx
@@ -58,7 +58,7 @@ describe('DemoConnectGuard', () => {
   it('dispatches the correct action when return button is clicked', async () => {
     const { user } = render(<DemoConnectGuard />, { preloadedState: mockInitialState })
 
-    const returnButton = screen.getByTestId('return-to-search-button')
+    const returnButton = screen.getByRole('button', { name: /return to institution selection/i })
     await user.click(returnButton)
 
     expect(mockDispatch).toHaveBeenCalledWith({
diff --git a/src/views/demoConnectGuard/DemoConnectGuard.tsx b/src/views/demoConnectGuard/DemoConnectGuard.tsx
index 26229c619b..bdd1a2a6ef 100644
--- a/src/views/demoConnectGuard/DemoConnectGuard.tsx
+++ b/src/views/demoConnectGuard/DemoConnectGuard.tsx
@@ -42,7 +42,6 @@ export const DemoConnectGuard: React.FC = () => {
           </B>
         </P>
         <Button
-          data-test="return-to-search-button"
           fullWidth={true}
           onClick={() => {
             dispatch({

From 12251c217a51aef3a1fdb774c89efd83ce6a4a75 Mon Sep 17 00:00:00 2001
From: Clement Mwimo <clement.mwimo@mx.com>
Date: Thu, 12 Feb 2026 15:12:36 -0700
Subject: [PATCH 7/7] fix failing tests

---
 src/components/__tests__/RenderConnectStep-test.jsx  | 3 ++-
 src/views/demoConnectGuard/DemoConnectGuard-test.tsx | 5 ++---
 src/views/demoConnectGuard/DemoConnectGuard.tsx      | 6 ++++--
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/__tests__/RenderConnectStep-test.jsx b/src/components/__tests__/RenderConnectStep-test.jsx
index 8663207f94..85f1573bf8 100644
--- a/src/components/__tests__/RenderConnectStep-test.jsx
+++ b/src/components/__tests__/RenderConnectStep-test.jsx
@@ -62,8 +62,9 @@ describe('RenderConnectStep', () => {
 
     expect(screen.getByText('Demo mode active')).toBeInTheDocument()
     expect(
-      screen.getByText('Live institutions are not available in the demo environment'),
+      screen.getByText(/Live institutions are not available in the demo environment/i),
     ).toBeInTheDocument()
+    expect(screen.getByText('MX Bank')).toBeInTheDocument()
 
     const logo = screen.getByAltText('Logo for Test Bank')
     expect(logo).toBeInTheDocument()
diff --git a/src/views/demoConnectGuard/DemoConnectGuard-test.tsx b/src/views/demoConnectGuard/DemoConnectGuard-test.tsx
index 05655ea9ec..5e62dc86f1 100644
--- a/src/views/demoConnectGuard/DemoConnectGuard-test.tsx
+++ b/src/views/demoConnectGuard/DemoConnectGuard-test.tsx
@@ -40,10 +40,9 @@ describe('DemoConnectGuard', () => {
 
     expect(screen.getByText('Demo mode active')).toBeInTheDocument()
     expect(
-      screen.getByText(
-        'Live institutions are not available in the demo environment. Please select MX Bank to test the connection process.',
-      ),
+      screen.getByText(/Live institutions are not available in the demo environment/i),
     ).toBeInTheDocument()
+    expect(screen.getByText('MX Bank')).toBeInTheDocument()
 
     const logo = screen.getByAltText('Logo for Test Bank')
     expect(logo).toBeInTheDocument()
diff --git a/src/views/demoConnectGuard/DemoConnectGuard.tsx b/src/views/demoConnectGuard/DemoConnectGuard.tsx
index bdd1a2a6ef..831e1335e3 100644
--- a/src/views/demoConnectGuard/DemoConnectGuard.tsx
+++ b/src/views/demoConnectGuard/DemoConnectGuard.tsx
@@ -90,7 +90,9 @@ const getStyles = () => ({
     textAlign: 'center',
     marginBottom: '32px',
     fontSize: '15px',
-    fontWeight: 400,
     lineHeight: '24px',
-  } as React.CSSProperties,
+    '& strong': {
+      fontWeight: 700,
+    },
+  },
 })