From 47fe542273587cefdc3deefa60351849d5483c1a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Albert=20Oliv=C3=A9?= <albertolivecorbella@gmail.com>
Date: Thu, 13 Jul 2023 18:27:49 +0200
Subject: [PATCH] [MMI] Review interactive replacement token flow (#19974)

* Sending showCustodyConfirmLink as a prop and fixing other issues

* Upgraded MMI extension monrepo and trying to fix the issue

* prevents deeplink from closing

* Fixed styles of Custody view and changed the place of it

* Fixed CI issues

* fixing eslint issues

* Update LavaMoat policies

* fixing tests

* Fixed test

* updated snapshots

* Improving IRT flow

* Fixing everything

* Finish fixing all issues

* Fixed institutional entity done page styles

* Fixing boxes

* Fixed issue with checkbox

* Fixed tests and styles

* Removed duplicated lodash

* updated snapshot

* Fixing tests

* Removed unused test

* Fixed snapshot

* Fixed snapshot

---------

Co-authored-by: Antonio Regadas <antonio.regadas@consensys.net>
Co-authored-by: MetaMask Bot <metamaskbot@users.noreply.github.com>
---
 app/scripts/metamask-controller.js            |   4 +
 .../confirm-remove-jwt-modal.test.js.snap     | 136 ++++----
 .../__snapshots__/custody-labels.test.js.snap |   2 +-
 .../custody-labels/custody-labels.js          |   8 +-
 .../institutional/custody-labels/index.scss   |   2 +-
 .../interactive-replacement-token-modal.js    | 172 +++++-----
 ...nteractive-replacement-token-modal.test.js |  19 --
 ...eractive-replacement-token-notification.js |  44 ++-
 ...ive-replacement-token-notification.test.js |  14 +-
 .../confirm-add-custodian-token.js            |  12 +-
 .../__snapshots__/account-list.test.js.snap   | 310 +++++++++---------
 .../connect-custody/account-list.js           | 111 +++----
 ui/pages/institutional/custody/custody.js     |  81 +++--
 ui/pages/institutional/custody/index.scss     |  10 -
 .../institutional-entity-done-page.js         |  47 +--
 ...active-replacement-token-page.test.js.snap |  80 ++---
 .../interactive-replacement-token-page.js     | 234 +++++++------
 ...interactive-replacement-token-page.test.js |   4 -
 ui/pages/pages.scss                           |   1 -
 .../institutional/institution-background.ts   |  34 +-
 20 files changed, 651 insertions(+), 674 deletions(-)
 delete mode 100644 ui/pages/institutional/custody/index.scss

diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js
index 17b8d98dd..eaeb27816 100644
--- a/app/scripts/metamask-controller.js
+++ b/app/scripts/metamask-controller.js
@@ -2499,6 +2499,10 @@ export default class MetamaskController extends EventEmitter {
         this.institutionalFeaturesController.removeAddTokenConnectRequest.bind(
           this.institutionalFeaturesController,
         ),
+      showInteractiveReplacementTokenBanner:
+        appStateController.showInteractiveReplacementTokenBanner.bind(
+          appStateController,
+        ),
       ///: END:ONLY_INCLUDE_IN
 
       ///: BEGIN:ONLY_INCLUDE_IN(snaps)
diff --git a/ui/components/institutional/confirm-remove-jwt-modal/__snapshots__/confirm-remove-jwt-modal.test.js.snap b/ui/components/institutional/confirm-remove-jwt-modal/__snapshots__/confirm-remove-jwt-modal.test.js.snap
index 2c33d3bea..ccca0a8eb 100644
--- a/ui/components/institutional/confirm-remove-jwt-modal/__snapshots__/confirm-remove-jwt-modal.test.js.snap
+++ b/ui/components/institutional/confirm-remove-jwt-modal/__snapshots__/confirm-remove-jwt-modal.test.js.snap
@@ -44,83 +44,87 @@ exports[`Confirm Remove JWT should render correctly 1`] = `
         class="box confirm-action-jwt__accounts-list box--flex-direction-row"
       >
         <div
-          class="box box--padding-top-4 box--padding-right-7 box--padding-bottom-7 box--padding-left-7 box--flex-direction-row"
+          class="mm-box page-container"
         >
           <div
-            class="box custody-account-list box--display-flex box--flex-direction-column box--width-full"
-            data-testid="custody-account-list"
+            class="mm-box page-container__content mm-box--padding-4"
           >
             <div
-              class="box custody-account-list__item box--display-flex box--flex-direction-row"
+              class="mm-box custody-account-list mm-box--display-flex mm-box--flex-direction-column mm-box--width-full"
+              data-testid="custody-account-list"
             >
               <div
-                class="box box--display-flex box--flex-direction-row box--align-items-flex-start"
-                data-testid="custody-account-list-item-radio-button"
-              />
-              <div
-                class="box box--margin-left-2 box--display-flex box--flex-direction-column box--width-full"
+                class="mm-box custody-account-list__item mm-box--display-flex"
               >
-                <label
-                  class="box mm-text mm-label mm-label--html-for custody-account-list__item__title mm-text--body-md mm-text--font-weight-medium box--margin-top-2 box--margin-left-2 box--display-flex box--flex-direction-row box--align-items-center box--color-text-default"
-                  for="address-0"
-                >
-                  <span
-                    class="box mm-text custody-account-list__item__name mm-text--inherit box--padding-right-1 box--flex-direction-row box--color-text-default"
-                  >
-                    Test name account
-                  </span>
-                </label>
-                <label
-                  class="box mm-text mm-label mm-label--html-for mm-text--body-md mm-text--font-weight-medium box--margin-top-2 box--margin-right-3 box--margin-left-2 box--display-flex box--flex-direction-row box--align-items-center box--color-text-default"
-                  for="address-0"
-                >
-                  <span
-                    class="box mm-text custody-account-list__item mm-text--body-md box--display-flex box--flex-direction-row box--color-text-default"
-                  >
-                    <a
-                      class="box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
-                      href="https://etherscan.io/address/0xaD6D458402F60fD3Bd25163575031ACDce07538D"
-                      rel="noopener noreferrer"
-                      target="_blank"
-                    >
-                      <span
-                        class="box mm-text mm-text--inherit box--flex-direction-row box--color-primary-default"
-                      >
-                        0xaD6...538D
-                        <span
-                          class="box mm-icon mm-icon--size-md box--margin-left-1 box--display-inline-block box--flex-direction-row box--color-primary-default"
-                          style="mask-image: url('./images/icons/undefined.svg');"
-                        />
-                      </span>
-                    </a>
-                    <div>
-                      <div
-                        aria-describedby="tippy-tooltip-1"
-                        class=""
-                        data-original-title="Copy to clipboard"
-                        data-tooltipped=""
-                        style="display: inline; background-color: transparent;"
-                        tabindex="0"
-                      >
-                        <button
-                          class="custody-account-list__item__clipboard"
-                        >
-                          <span
-                            class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-icon-muted"
-                            style="mask-image: url('./images/icons/undefined.svg');"
-                          />
-                        </button>
-                      </div>
-                    </div>
-                  </span>
-                </label>
                 <div
-                  class="box box--display-flex box--flex-direction-row box--justify-content-space-between"
+                  class="mm-box mm-box--display-flex mm-box--align-items-flex-start"
+                  data-testid="custody-account-list-item-radio-button"
+                />
+                <div
+                  class="mm-box mm-box--margin-left-2 mm-box--display-flex mm-box--flex-direction-column mm-box--width-full"
                 >
                   <label
-                    class="box mm-text mm-label mm-label--html-for mm-text--body-md mm-text--font-weight-medium box--display-flex box--flex-direction-row box--align-items-center box--color-text-default"
+                    class="box mm-text mm-label mm-label--html-for custody-account-list__item__title mm-text--body-md mm-text--font-weight-medium box--margin-top-2 box--margin-left-2 box--display-flex box--flex-direction-row box--align-items-center box--color-text-default"
                     for="address-0"
-                  />
+                  >
+                    <span
+                      class="box mm-text custody-account-list__item__name mm-text--inherit box--padding-right-1 box--flex-direction-row box--color-text-default"
+                    >
+                      Test name account
+                    </span>
+                  </label>
+                  <label
+                    class="box mm-text mm-label mm-label--html-for mm-text--body-md mm-text--font-weight-medium box--margin-top-2 box--margin-right-3 box--margin-left-2 box--display-flex box--flex-direction-row box--align-items-center box--color-text-default"
+                    for="address-0"
+                  >
+                    <span
+                      class="box mm-text custody-account-list__item mm-text--body-md box--display-flex box--flex-direction-row box--color-text-default"
+                    >
+                      <a
+                        class="box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
+                        href="https://etherscan.io/address/0xaD6D458402F60fD3Bd25163575031ACDce07538D"
+                        rel="noopener noreferrer"
+                        target="_blank"
+                      >
+                        <span
+                          class="box mm-text mm-text--inherit box--flex-direction-row box--color-primary-default"
+                        >
+                          0xaD6...538D
+                          <span
+                            class="box mm-icon mm-icon--size-md box--margin-left-1 box--display-inline-block box--flex-direction-row box--color-primary-default"
+                            style="mask-image: url('./images/icons/undefined.svg');"
+                          />
+                        </span>
+                      </a>
+                      <div>
+                        <div
+                          aria-describedby="tippy-tooltip-1"
+                          class=""
+                          data-original-title="Copy to clipboard"
+                          data-tooltipped=""
+                          style="display: inline; background-color: transparent;"
+                          tabindex="0"
+                        >
+                          <button
+                            class="custody-account-list__item__clipboard"
+                          >
+                            <span
+                              class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-icon-muted"
+                              style="mask-image: url('./images/icons/undefined.svg');"
+                            />
+                          </button>
+                        </div>
+                      </div>
+                    </span>
+                  </label>
+                  <div
+                    class="mm-box mm-box--display-flex mm-box--justify-content-space-between"
+                  >
+                    <label
+                      class="box mm-text mm-label mm-label--html-for mm-text--body-md mm-text--font-weight-medium box--display-flex box--flex-direction-row box--align-items-center box--color-text-default"
+                      for="address-0"
+                    />
+                  </div>
                 </div>
               </div>
             </div>
diff --git a/ui/components/institutional/custody-labels/__snapshots__/custody-labels.test.js.snap b/ui/components/institutional/custody-labels/__snapshots__/custody-labels.test.js.snap
index d79ae3d87..aea647170 100644
--- a/ui/components/institutional/custody-labels/__snapshots__/custody-labels.test.js.snap
+++ b/ui/components/institutional/custody-labels/__snapshots__/custody-labels.test.js.snap
@@ -7,7 +7,7 @@ exports[`CustodyLabels Component should render correctly 1`] = `
     for="address-index"
   >
     <p
-      class="box mm-text custody-label mm-text--h9 mm-text--font-weight-normal mm-text--text-transform-uppercase box--margin-top-1 box--margin-right-1 box--margin-bottom-2 box--padding-top-1 box--padding-right-2 box--padding-bottom-1 box--padding-left-2 box--flex-direction-row box--color-text-muted box--background-color-background-alternative box--rounded-sm"
+      class="box mm-text custody-label mm-text--body-xs mm-text--font-weight-normal mm-text--text-transform-capitalize box--margin-top-1 box--margin-right-1 box--margin-bottom-2 box--padding-top-1 box--padding-right-2 box--padding-bottom-1 box--padding-left-2 box--flex-direction-row box--color-text-default box--background-color-background-alternative box--rounded-sm"
     >
       value
     </p>
diff --git a/ui/components/institutional/custody-labels/custody-labels.js b/ui/components/institutional/custody-labels/custody-labels.js
index 3f9d8700e..b095e5f3e 100644
--- a/ui/components/institutional/custody-labels/custody-labels.js
+++ b/ui/components/institutional/custody-labels/custody-labels.js
@@ -7,7 +7,7 @@ import {
   TextColor,
   FontWeight,
   BorderRadius,
-  TypographyVariant,
+  TextVariant,
 } from '../../../helpers/constants/design-system';
 
 const CustodyLabels = (props) => {
@@ -25,7 +25,7 @@ const CustodyLabels = (props) => {
       {filteredLabels.map((item) => (
         <Text
           key={item.key}
-          textTransform={TextTransform.Uppercase}
+          textTransform={TextTransform.Capitalize}
           className="custody-label"
           style={background ? { background } : {}}
           marginTop={1}
@@ -36,10 +36,10 @@ const CustodyLabels = (props) => {
           paddingLeft={2}
           paddingRight={2}
           backgroundColor={BackgroundColor.backgroundAlternative}
-          color={TextColor.textMuted}
+          color={TextColor.textDefault}
           fontWeight={FontWeight.Normal}
           borderRadius={BorderRadius.SM}
-          variant={TypographyVariant.H9}
+          variant={TextVariant.bodyXs}
         >
           {item.value}
         </Text>
diff --git a/ui/components/institutional/custody-labels/index.scss b/ui/components/institutional/custody-labels/index.scss
index 99695902a..8b93f0218 100644
--- a/ui/components/institutional/custody-labels/index.scss
+++ b/ui/components/institutional/custody-labels/index.scss
@@ -2,7 +2,7 @@
   z-index: 1;
   letter-spacing: 0.5px;
   white-space: nowrap;
-  max-width: 80px;
+  max-width: 150px;
   text-overflow: ellipsis;
   overflow: hidden;
   display: block;
diff --git a/ui/components/institutional/interactive-replacement-token-modal/interactive-replacement-token-modal.js b/ui/components/institutional/interactive-replacement-token-modal/interactive-replacement-token-modal.js
index d5cb84547..232f4817f 100644
--- a/ui/components/institutional/interactive-replacement-token-modal/interactive-replacement-token-modal.js
+++ b/ui/components/institutional/interactive-replacement-token-modal/interactive-replacement-token-modal.js
@@ -1,19 +1,26 @@
 import React, { useContext } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import Modal from '../../app/modal';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
 import { hideModal } from '../../../store/actions';
 import { getSelectedAddress } from '../../../selectors/selectors';
 import { toChecksumHexAddress } from '../../../../shared/modules/hexstring-utils';
-import { Text } from '../../component-library';
-import Box from '../../ui/box';
 import {
-  BLOCK_SIZES,
+  Box,
+  Button,
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+} from '../../component-library';
+
+import {
+  BlockSize,
   BackgroundColor,
-  DISPLAY,
-  FLEX_WRAP,
-  FLEX_DIRECTION,
+  Display,
+  FlexWrap,
+  FlexDirection,
   BorderRadius,
   FontWeight,
   TextAlign,
@@ -42,77 +49,6 @@ const InteractiveReplacementTokenModal = () => {
   const custodian =
     custodians.find((item) => item.name === custodianName) || {};
 
-  const renderCustodyInfo = () => {
-    let img;
-
-    if (custodian.iconUrl) {
-      img = (
-        <Box
-          display={DISPLAY.FLEX}
-          flexDirection={FLEX_DIRECTION.COLUMN}
-          alignItems={AlignItems.center}
-          paddingTop={5}
-        >
-          <Box display={DISPLAY.BLOCK} textAlign={TextAlign.Center}>
-            <img
-              src={custodian.iconUrl}
-              width={45}
-              alt={custodian.displayName}
-            />
-          </Box>
-        </Box>
-      );
-    } else {
-      img = (
-        <Box display={DISPLAY.BLOCK} textAlign={TextAlign.Center}>
-          <Text>{custodian.displayName}</Text>
-        </Box>
-      );
-    }
-
-    return (
-      <>
-        {img}
-        <Text
-          as="h4"
-          paddingTop={4}
-          textAlign={TextAlign.Center}
-          fontWeight={FontWeight.Bold}
-        >
-          {t('custodyRefreshTokenModalTitle')}
-        </Text>
-        <Text
-          as="p"
-          paddingTop={4}
-          paddingBottom={6}
-          textAlign={TextAlign.Left}
-        >
-          {t('custodyRefreshTokenModalDescription', [custodian.displayName])}
-        </Text>
-        <Text as="p" fontWeight={FontWeight.Medium}>
-          {t('custodyRefreshTokenModalSubtitle')}
-        </Text>
-        <Text
-          as="p"
-          paddingTop={4}
-          paddingBottom={6}
-          textAlign={TextAlign.Left}
-        >
-          {t('custodyRefreshTokenModalDescription1')}
-        </Text>
-        <Text
-          as="p"
-          marginTop={4}
-          paddingTop={4}
-          paddingBottom={6}
-          textAlign={TextAlign.Left}
-        >
-          {t('custodyRefreshTokenModalDescription2')}
-        </Text>
-      </>
-    );
-  };
-
   const handleSubmit = () => {
     global.platform.openTab({
       url,
@@ -129,24 +65,68 @@ const InteractiveReplacementTokenModal = () => {
   };
 
   return (
-    <Modal
-      onCancel={handleClose}
-      onClose={handleClose}
-      onSubmit={handleSubmit}
-      submitText={custodian.displayName || 'Custodian'}
-      cancelText={t('cancel')}
-    >
-      <Box
-        width={BLOCK_SIZES.FULL}
-        backgroundColor={BackgroundColor.backgroundDefault}
-        display={DISPLAY.FLEX}
-        flexWrap={FLEX_WRAP.WRAP}
-        flexDirection={FLEX_DIRECTION.COLUMN}
-        borderRadius={BorderRadius.SM}
-        data-testid="interactive-replacement-token-modal"
-      >
-        {renderCustodyInfo(custodian)}
-      </Box>
+    <Modal isOpen onClose={handleClose}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader onClose={handleClose}>
+          {t('custodyRefreshTokenModalTitle')}
+        </ModalHeader>
+        {custodian.iconUrl ? (
+          <Box
+            display={Display.Flex}
+            flexDirection={FlexDirection.Column}
+            alignItems={AlignItems.center}
+            paddingTop={5}
+          >
+            <Box display={Display.Block} textAlign={TextAlign.Center}>
+              <img
+                src={custodian.iconUrl}
+                width={45}
+                alt={custodian.displayName}
+              />
+            </Box>
+          </Box>
+        ) : (
+          <Box display={Display.Block} textAlign={TextAlign.Center}>
+            <Text>{custodian.displayName}</Text>
+          </Box>
+        )}
+        <Box
+          width={BlockSize.Full}
+          backgroundColor={BackgroundColor.backgroundDefault}
+          display={Display.Flex}
+          flexWrap={FlexWrap.Wrap}
+          flexDirection={FlexDirection.Column}
+          borderRadius={BorderRadius.SM}
+          data-testid="interactive-replacement-token-modal"
+        >
+          <Text
+            as="p"
+            paddingTop={4}
+            paddingBottom={6}
+            textAlign={TextAlign.Left}
+          >
+            {t('custodyRefreshTokenModalDescription', [custodian.displayName])}
+          </Text>
+          <Text as="p" fontWeight={FontWeight.Medium}>
+            {t('custodyRefreshTokenModalSubtitle')}
+          </Text>
+          <Text
+            as="p"
+            paddingTop={4}
+            paddingBottom={6}
+            textAlign={TextAlign.Left}
+          >
+            {t('custodyRefreshTokenModalDescription1')}
+          </Text>
+          <Text as="p" paddingBottom={6} textAlign={TextAlign.Left}>
+            {t('custodyRefreshTokenModalDescription2')}
+          </Text>
+          <Button onClick={handleSubmit}>
+            {custodian.displayName || 'Custodian'}
+          </Button>
+        </Box>
+      </ModalContent>
     </Modal>
   );
 };
diff --git a/ui/components/institutional/interactive-replacement-token-modal/interactive-replacement-token-modal.test.js b/ui/components/institutional/interactive-replacement-token-modal/interactive-replacement-token-modal.test.js
index c6a1f8545..a1ea9359e 100644
--- a/ui/components/institutional/interactive-replacement-token-modal/interactive-replacement-token-modal.test.js
+++ b/ui/components/institutional/interactive-replacement-token-modal/interactive-replacement-token-modal.test.js
@@ -1,7 +1,5 @@
 import React from 'react';
-import sinon from 'sinon';
 import configureMockStore from 'redux-mock-store';
-import { fireEvent, waitFor } from '@testing-library/react';
 import { renderWithProvider } from '../../../../test/lib/render-helpers';
 import testData from '../../../../.storybook/test-data';
 import InteractiveReplacementTokenModal from '.';
@@ -71,21 +69,4 @@ describe('Interactive Replacement Token Modal', function () {
     expect(getByTestId('interactive-replacement-token-modal')).toBeVisible();
     expect(getByText('Your custodian session has expired')).toBeInTheDocument();
   });
-
-  it('opens new tab on Open Codefi Compliance click', async () => {
-    global.platform = { openTab: sinon.spy() };
-
-    const { container } = renderWithProvider(
-      <InteractiveReplacementTokenModal />,
-      store,
-    );
-
-    const button = container.getElementsByClassName('btn-primary')[0];
-
-    fireEvent.click(button);
-
-    await waitFor(() => {
-      expect(global.platform.openTab.calledOnce).toStrictEqual(true);
-    });
-  });
 });
diff --git a/ui/components/institutional/interactive-replacement-token-notification/interactive-replacement-token-notification.js b/ui/components/institutional/interactive-replacement-token-notification/interactive-replacement-token-notification.js
index 5f1aa1c56..813a55662 100644
--- a/ui/components/institutional/interactive-replacement-token-notification/interactive-replacement-token-notification.js
+++ b/ui/components/institutional/interactive-replacement-token-notification/interactive-replacement-token-notification.js
@@ -6,13 +6,14 @@ import { getInteractiveReplacementToken } from '../../../selectors/institutional
 import { getIsUnlocked } from '../../../ducks/metamask/metamask';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { mmiActionsFactory } from '../../../store/institutional/institution-background';
+import { showInteractiveReplacementTokenModal } from '../../../store/institutional/institution-actions';
 import { sha256 } from '../../../../shared/modules/hash.utils';
 import {
   Size,
   IconColor,
   AlignItems,
-  DISPLAY,
-  BLOCK_SIZES,
+  Display,
+  BlockSize,
   JustifyContent,
   TextColor,
   TextVariant,
@@ -24,10 +25,9 @@ import {
   IconSize,
   ButtonLink,
   Text,
+  Box,
 } from '../../component-library';
 
-import Box from '../../ui/box';
-
 const InteractiveReplacementTokenNotification = ({ isVisible }) => {
   const t = useI18nContext();
   const dispatch = useDispatch();
@@ -48,10 +48,7 @@ const InteractiveReplacementTokenNotification = ({ isVisible }) => {
         interactiveReplacementToken &&
         Boolean(Object.keys(interactiveReplacementToken).length);
 
-      if (!/^Custody/u.test(keyring.type)) {
-        setShowNotification(false);
-        return;
-      } else if (!hasInteractiveReplacementToken) {
+      if (!/^Custody/u.test(keyring.type) || !hasInteractiveReplacementToken) {
         setShowNotification(false);
         return;
       }
@@ -98,34 +95,35 @@ const InteractiveReplacementTokenNotification = ({ isVisible }) => {
 
   return showNotification ? (
     <Box
-      width={BLOCK_SIZES.FULL}
-      display={DISPLAY.FLEX}
+      width={BlockSize.Full}
+      display={Display.Flex}
       justifyContent={JustifyContent.center}
       alignItems={AlignItems.center}
       padding={[1, 2]}
       backgroundColor={BackgroundColor.backgroundAlternative}
-      marginBottom={1}
       className="interactive-replacement-token-notification"
       data-testid="interactive-replacement-token-notification"
     >
       <Icon
         name={IconName.Danger}
         color={IconColor.errorDefault}
-        size={IconSize.Xl}
+        size={IconSize.Md}
       />
-      <Text variant={TextVariant.bodyXs} gap={2} color={TextColor.errorDefault}>
+      <Text variant={TextVariant.bodySm} gap={2} color={TextColor.errorDefault}>
         {t('custodySessionExpired')}
       </Text>
-      <ButtonLink
-        data-testid="show-modal"
-        size={Size.auto}
-        marginLeft={1}
-        onClick={() => {
-          dispatch(mmiActions.showInteractiveReplacementTokenModal());
-        }}
-      >
-        {t('learnMore')}
-      </ButtonLink>
+      <Text variant={TextVariant.bodySm}>
+        <ButtonLink
+          data-testid="show-modal"
+          size={Size.inherit}
+          marginLeft={1}
+          onClick={() => {
+            dispatch(showInteractiveReplacementTokenModal());
+          }}
+        >
+          {t('learnMoreUpperCase')}
+        </ButtonLink>
+      </Text>
     </Box>
   ) : null;
 };
diff --git a/ui/components/institutional/interactive-replacement-token-notification/interactive-replacement-token-notification.test.js b/ui/components/institutional/interactive-replacement-token-notification/interactive-replacement-token-notification.test.js
index 817600e2d..2d9a06f3d 100644
--- a/ui/components/institutional/interactive-replacement-token-notification/interactive-replacement-token-notification.test.js
+++ b/ui/components/institutional/interactive-replacement-token-notification/interactive-replacement-token-notification.test.js
@@ -10,10 +10,6 @@ import InteractiveReplacementTokenNotification from './interactive-replacement-t
 
 jest.mock('../../../../shared/modules/hash.utils');
 
-const mockedShowInteractiveReplacementTokenModal = jest
-  .fn()
-  .mockReturnValue({ type: 'TYPE' });
-
 const mockedGetCustodianToken = jest
   .fn()
   .mockReturnValue({ type: 'Custody', payload: 'token' });
@@ -32,11 +28,15 @@ jest.mock('../../../store/institutional/institution-background', () => ({
   mmiActionsFactory: () => ({
     getCustodianToken: mockedGetCustodianToken,
     getAllCustodianAccountsWithToken: mockedGetAllCustodianAccountsWithToken,
-    showInteractiveReplacementTokenModal:
-      mockedShowInteractiveReplacementTokenModal,
   }),
 }));
 
+jest.mock('../../../store/institutional/institution-actions', () => ({
+  showInteractiveReplacementTokenModal: jest
+    .fn()
+    .mockReturnValue({ type: 'TYPE' }),
+}));
+
 describe('Interactive Replacement Token Notification', () => {
   const selectedAddress = '0xca8f1F0245530118D0cf14a06b01Daf8f76Cf281';
 
@@ -112,8 +112,6 @@ describe('Interactive Replacement Token Notification', () => {
     await act(async () => {
       fireEvent.click(screen.getByTestId('show-modal'));
     });
-
-    expect(mockedShowInteractiveReplacementTokenModal).toHaveBeenCalled();
   });
 
   it('should render and call showNotification when component starts', async () => {
diff --git a/ui/pages/institutional/confirm-add-custodian-token/confirm-add-custodian-token.js b/ui/pages/institutional/confirm-add-custodian-token/confirm-add-custodian-token.js
index 07575238c..61a572f74 100644
--- a/ui/pages/institutional/confirm-add-custodian-token/confirm-add-custodian-token.js
+++ b/ui/pages/institutional/confirm-add-custodian-token/confirm-add-custodian-token.js
@@ -1,7 +1,7 @@
-import React, { useContext, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import { isEqual } from 'lodash';
 import { useHistory } from 'react-router-dom';
-import isEqual from 'lodash/isEqual';
 import PulseLoader from '../../../components/ui/pulse-loader';
 import { CUSTODY_ACCOUNT_ROUTE } from '../../../helpers/constants/routes';
 import {
@@ -47,8 +47,14 @@ const ConfirmAddCustodianToken = () => {
 
   const connectRequest = connectRequests ? connectRequests[0] : undefined;
 
+  useEffect(() => {
+    if (!connectRequest) {
+      history.push(mostRecentOverviewPage);
+      setIsLoading(false);
+    }
+  }, [connectRequest, history, mostRecentOverviewPage]);
+
   if (!connectRequest) {
-    history.push(mostRecentOverviewPage);
     return null;
   }
 
diff --git a/ui/pages/institutional/connect-custody/__snapshots__/account-list.test.js.snap b/ui/pages/institutional/connect-custody/__snapshots__/account-list.test.js.snap
index ef1ca080f..1eb623034 100644
--- a/ui/pages/institutional/connect-custody/__snapshots__/account-list.test.js.snap
+++ b/ui/pages/institutional/connect-custody/__snapshots__/account-list.test.js.snap
@@ -3,186 +3,188 @@
 exports[`CustodyAccountList renders accounts 1`] = `
 <div>
   <div
-    class="box box--padding-top-4 box--padding-right-7 box--padding-bottom-7 box--padding-left-7 box--flex-direction-row"
+    class="mm-box page-container"
   >
     <div
-      class="box custody-account-list box--display-flex box--flex-direction-column box--width-full"
-      data-testid="custody-account-list"
+      class="mm-box page-container__content mm-box--padding-4"
     >
       <div
-        class="box custody-account-list__item box--display-flex box--flex-direction-row"
+        class="mm-box custody-account-list mm-box--display-flex mm-box--flex-direction-column mm-box--width-full"
+        data-testid="custody-account-list"
       >
         <div
-          class="box box--display-flex box--flex-direction-row box--align-items-flex-start"
-          data-testid="custody-account-list-item-radio-button"
+          class="mm-box custody-account-list__item mm-box--display-flex"
         >
-          <input
-            id="address-0"
-            name="selectedAccount"
-            type="checkbox"
-            value="0x1234567890123456789012345678901234567890"
-          />
-        </div>
-        <div
-          class="box box--margin-left-2 box--display-flex box--flex-direction-column box--width-full"
-        >
-          <label
-            class="box mm-text mm-label mm-label--html-for custody-account-list__item__title mm-text--body-md mm-text--font-weight-medium box--margin-top-2 box--margin-left-2 box--display-flex box--flex-direction-row box--align-items-center box--color-text-default"
-            for="address-0"
+          <div
+            class="mm-box mm-box--display-flex mm-box--align-items-flex-start"
+            data-testid="custody-account-list-item-radio-button"
           >
-            <span
-              class="box mm-text custody-account-list__item__name mm-text--inherit box--padding-right-1 box--flex-direction-row box--color-text-default"
-            >
-              Test Account 1
-            </span>
-          </label>
-          <label
-            class="box mm-text mm-label mm-label--html-for mm-text--body-md mm-text--font-weight-medium box--margin-top-2 box--margin-right-3 box--margin-left-2 box--display-flex box--flex-direction-row box--align-items-center box--color-text-default"
-            for="address-0"
+            <input
+              id="address-0"
+              name="selectedAccount"
+              type="checkbox"
+            />
+          </div>
+          <div
+            class="mm-box mm-box--margin-left-2 mm-box--display-flex mm-box--flex-direction-column mm-box--width-full"
           >
-            <span
-              class="box mm-text custody-account-list__item mm-text--body-md box--display-flex box--flex-direction-row box--color-text-default"
+            <label
+              class="box mm-text mm-label mm-label--html-for custody-account-list__item__title mm-text--body-md mm-text--font-weight-medium box--margin-top-2 box--margin-left-2 box--display-flex box--flex-direction-row box--align-items-center box--color-text-default"
+              for="address-0"
             >
-              <a
-                class="box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
-                href="https://etherscan.io/address/0x1234567890123456789012345678901234567890"
-                rel="noopener noreferrer"
-                target="_blank"
+              <span
+                class="box mm-text custody-account-list__item__name mm-text--inherit box--padding-right-1 box--flex-direction-row box--color-text-default"
               >
-                <span
-                  class="box mm-text mm-text--inherit box--flex-direction-row box--color-primary-default"
+                Test Account 1
+              </span>
+            </label>
+            <label
+              class="box mm-text mm-label mm-label--html-for mm-text--body-md mm-text--font-weight-medium box--margin-top-2 box--margin-right-3 box--margin-left-2 box--display-flex box--flex-direction-row box--align-items-center box--color-text-default"
+              for="address-0"
+            >
+              <span
+                class="box mm-text custody-account-list__item mm-text--body-md box--display-flex box--flex-direction-row box--color-text-default"
+              >
+                <a
+                  class="box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
+                  href="https://etherscan.io/address/0x1234567890123456789012345678901234567890"
+                  rel="noopener noreferrer"
+                  target="_blank"
                 >
-                  0x123...7890
                   <span
-                    class="box mm-icon mm-icon--size-md box--margin-left-1 box--display-inline-block box--flex-direction-row box--color-primary-default"
-                    style="mask-image: url('./images/icons/undefined.svg');"
-                  />
-                </span>
-              </a>
-              <div>
-                <div
-                  aria-describedby="tippy-tooltip-1"
-                  class=""
-                  data-original-title="[copyToClipboard]"
-                  data-tooltipped=""
-                  style="display: inline; background-color: transparent;"
-                  tabindex="0"
-                >
-                  <button
-                    class="custody-account-list__item__clipboard"
+                    class="box mm-text mm-text--inherit box--flex-direction-row box--color-primary-default"
                   >
+                    0x123...7890
                     <span
-                      class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-icon-muted"
+                      class="box mm-icon mm-icon--size-md box--margin-left-1 box--display-inline-block box--flex-direction-row box--color-primary-default"
                       style="mask-image: url('./images/icons/undefined.svg');"
                     />
-                  </button>
-                </div>
-              </div>
-            </span>
-          </label>
-          <div
-            class="box box--display-flex box--flex-direction-row box--justify-content-space-between"
-          />
-        </div>
-      </div>
-      <div
-        class="box custody-account-list__item box--display-flex box--flex-direction-row"
-      >
-        <div
-          class="box box--display-flex box--flex-direction-row box--align-items-flex-start"
-          data-testid="custody-account-list-item-radio-button"
-        >
-          <input
-            id="address-1"
-            name="selectedAccount"
-            type="checkbox"
-            value="0x0987654321098765432109876543210987654321"
-          />
-        </div>
-        <div
-          class="box box--margin-left-2 box--display-flex box--flex-direction-column box--width-full"
-        >
-          <label
-            class="box mm-text mm-label mm-label--html-for custody-account-list__item__title mm-text--body-md mm-text--font-weight-medium box--margin-top-2 box--margin-left-2 box--display-flex box--flex-direction-row box--align-items-center box--color-text-default"
-            for="address-1"
-          >
-            <span
-              class="box mm-text custody-account-list__item__name mm-text--inherit box--padding-right-1 box--flex-direction-row box--color-text-default"
-            >
-              Test Account 2
-            </span>
-          </label>
-          <label
-            class="box mm-text mm-label mm-label--html-for mm-text--body-md mm-text--font-weight-medium box--margin-top-2 box--margin-right-3 box--margin-left-2 box--display-flex box--flex-direction-row box--align-items-center box--color-text-default"
-            for="address-1"
-          >
-            <span
-              class="box mm-text custody-account-list__item mm-text--body-md box--display-flex box--flex-direction-row box--color-text-default"
-            >
-              <a
-                class="box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
-                href="https://etherscan.io/address/0x0987654321098765432109876543210987654321"
-                rel="noopener noreferrer"
-                target="_blank"
-              >
-                <span
-                  class="box mm-text mm-text--inherit box--flex-direction-row box--color-primary-default"
-                >
-                  0x098...4321
-                  <span
-                    class="box mm-icon mm-icon--size-md box--margin-left-1 box--display-inline-block box--flex-direction-row box--color-primary-default"
-                    style="mask-image: url('./images/icons/undefined.svg');"
-                  />
-                </span>
-              </a>
-              <div>
-                <div
-                  aria-describedby="tippy-tooltip-2"
-                  class=""
-                  data-original-title="[copyToClipboard]"
-                  data-tooltipped=""
-                  style="display: inline; background-color: transparent;"
-                  tabindex="0"
-                >
-                  <button
-                    class="custody-account-list__item__clipboard"
+                  </span>
+                </a>
+                <div>
+                  <div
+                    aria-describedby="tippy-tooltip-1"
+                    class=""
+                    data-original-title="[copyToClipboard]"
+                    data-tooltipped=""
+                    style="display: inline; background-color: transparent;"
+                    tabindex="0"
                   >
+                    <button
+                      class="custody-account-list__item__clipboard"
+                    >
+                      <span
+                        class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-icon-muted"
+                        style="mask-image: url('./images/icons/undefined.svg');"
+                      />
+                    </button>
+                  </div>
+                </div>
+              </span>
+            </label>
+            <div
+              class="mm-box mm-box--display-flex mm-box--justify-content-space-between"
+            />
+          </div>
+        </div>
+        <div
+          class="mm-box custody-account-list__item mm-box--display-flex"
+        >
+          <div
+            class="mm-box mm-box--display-flex mm-box--align-items-flex-start"
+            data-testid="custody-account-list-item-radio-button"
+          >
+            <input
+              id="address-1"
+              name="selectedAccount"
+              type="checkbox"
+            />
+          </div>
+          <div
+            class="mm-box mm-box--margin-left-2 mm-box--display-flex mm-box--flex-direction-column mm-box--width-full"
+          >
+            <label
+              class="box mm-text mm-label mm-label--html-for custody-account-list__item__title mm-text--body-md mm-text--font-weight-medium box--margin-top-2 box--margin-left-2 box--display-flex box--flex-direction-row box--align-items-center box--color-text-default"
+              for="address-1"
+            >
+              <span
+                class="box mm-text custody-account-list__item__name mm-text--inherit box--padding-right-1 box--flex-direction-row box--color-text-default"
+              >
+                Test Account 2
+              </span>
+            </label>
+            <label
+              class="box mm-text mm-label mm-label--html-for mm-text--body-md mm-text--font-weight-medium box--margin-top-2 box--margin-right-3 box--margin-left-2 box--display-flex box--flex-direction-row box--align-items-center box--color-text-default"
+              for="address-1"
+            >
+              <span
+                class="box mm-text custody-account-list__item mm-text--body-md box--display-flex box--flex-direction-row box--color-text-default"
+              >
+                <a
+                  class="box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
+                  href="https://etherscan.io/address/0x0987654321098765432109876543210987654321"
+                  rel="noopener noreferrer"
+                  target="_blank"
+                >
+                  <span
+                    class="box mm-text mm-text--inherit box--flex-direction-row box--color-primary-default"
+                  >
+                    0x098...4321
                     <span
-                      class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-icon-muted"
+                      class="box mm-icon mm-icon--size-md box--margin-left-1 box--display-inline-block box--flex-direction-row box--color-primary-default"
                       style="mask-image: url('./images/icons/undefined.svg');"
                     />
-                  </button>
+                  </span>
+                </a>
+                <div>
+                  <div
+                    aria-describedby="tippy-tooltip-2"
+                    class=""
+                    data-original-title="[copyToClipboard]"
+                    data-tooltipped=""
+                    style="display: inline; background-color: transparent;"
+                    tabindex="0"
+                  >
+                    <button
+                      class="custody-account-list__item__clipboard"
+                    >
+                      <span
+                        class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-icon-muted"
+                        style="mask-image: url('./images/icons/undefined.svg');"
+                      />
+                    </button>
+                  </div>
                 </div>
-              </div>
-            </span>
-          </label>
-          <div
-            class="box box--display-flex box--flex-direction-row box--justify-content-space-between"
-          />
+              </span>
+            </label>
+            <div
+              class="mm-box mm-box--display-flex mm-box--justify-content-space-between"
+            />
+          </div>
         </div>
       </div>
     </div>
-  </div>
-  <div
-    class="box custody-account-list__buttons box--padding-top-5 box--padding-right-7 box--padding-bottom-7 box--padding-left-7 box--display-flex box--flex-direction-row box--justify-content-space-between box--width-full"
-  >
-    <button
-      class="button btn--rounded btn-default btn--large custody-account-list__button"
-      data-testid="custody-account-cancel-button"
-      role="button"
-      tabindex="0"
+    <footer
+      class="mm-box page-container__footer mm-box--padding-4"
     >
-      [cancel]
-    </button>
-    <button
-      class="button btn--rounded btn-primary btn--large custody-account-list__button"
-      data-testid="custody-account-connect-button"
-      disabled=""
-      role="button"
-      tabindex="0"
-    >
-      [connect]
-    </button>
+      <div
+        class="mm-box mm-box--display-flex mm-box--gap-4"
+      >
+        <button
+          class="box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block custody-account-list__button mm-button-secondary mm-text--body-md-medium box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent box--rounded-pill box--border-color-primary-default box--border-style-solid box--border-width-1"
+          data-testid="custody-account-cancel-button"
+        >
+          [cancel]
+        </button>
+        <button
+          class="box mm-text mm-button-base mm-button-base--size-lg mm-button-base--disabled mm-button-base--block custody-account-list__button mm-button-primary mm-button-primary--disabled mm-text--body-md-medium box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-inverse box--background-color-primary-default box--rounded-pill"
+          data-testid="custody-account-connect-button"
+          disabled=""
+        >
+          [connect]
+        </button>
+      </div>
+    </footer>
   </div>
 </div>
 `;
diff --git a/ui/pages/institutional/connect-custody/account-list.js b/ui/pages/institutional/connect-custody/account-list.js
index ca7de18b4..0cf1a85fe 100644
--- a/ui/pages/institutional/connect-custody/account-list.js
+++ b/ui/pages/institutional/connect-custody/account-list.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Button from '../../../components/ui/button';
 import CustodyLabels from '../../../components/institutional/custody-labels';
 import { SWAPS_CHAINID_DEFAULT_BLOCK_EXPLORER_URL_MAP } from '../../../../shared/constants/swaps';
 import { CHAIN_IDS } from '../../../../shared/constants/network';
@@ -9,19 +8,24 @@ import Tooltip from '../../../components/ui/tooltip';
 import {
   TextVariant,
   JustifyContent,
-  BLOCK_SIZES,
-  DISPLAY,
+  BlockSize,
+  Display,
   IconColor,
+  FlexDirection,
+  AlignItems,
 } from '../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../hooks/useI18nContext';
-import Box from '../../../components/ui/box';
 import {
+  Box,
+  Button,
   Text,
   Label,
   Icon,
   IconName,
   IconSize,
   ButtonLink,
+  BUTTON_VARIANT,
+  BUTTON_SIZES,
 } from '../../../components/component-library';
 import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
 
@@ -34,7 +38,7 @@ export default function CustodyAccountList({
   rawList,
   accounts,
   onAccountChange,
-  selectedAccounts = {},
+  selectedAccounts,
   onCancel,
   onAddAccounts,
   custody,
@@ -42,27 +46,28 @@ export default function CustodyAccountList({
   const t = useI18nContext();
   const [copied, handleCopy] = useCopyToClipboard();
   const tooltipText = copied ? t('copiedExclamation') : t('copyToClipboard');
-  const disabled = Object.keys(selectedAccounts).length === 0;
+  const disabled =
+    !selectedAccounts || Object.keys(selectedAccounts).length === 0;
 
   return (
-    <>
-      <Box paddingTop={4} paddingRight={7} paddingBottom={7} paddingLeft={7}>
+    <Box className="page-container">
+      <Box padding={4} className="page-container__content">
         <Box
-          display={DISPLAY.FLEX}
-          flexDirection={['column']}
-          width={BLOCK_SIZES.FULL}
+          display={Display.Flex}
+          flexDirection={FlexDirection.Column}
+          width={BlockSize.Full}
           className="custody-account-list"
           data-testid="custody-account-list"
         >
           {accounts.map((account, idx) => (
             <Box
-              display={DISPLAY.FLEX}
+              display={Display.Flex}
               className="custody-account-list__item"
               key={account.address}
             >
               <Box
-                display={DISPLAY.FLEX}
-                alignItems={['flex-start']}
+                display={Display.Flex}
+                alignItems={AlignItems.flexStart}
                 data-testid="custody-account-list-item-radio-button"
               >
                 {!rawList && (
@@ -70,30 +75,27 @@ export default function CustodyAccountList({
                     type="checkbox"
                     name="selectedAccount"
                     id={`address-${idx}`}
-                    value={account.address}
-                    onChange={(e) =>
+                    onChange={() =>
                       onAccountChange({
                         name: account.name,
-                        address: e.target.value,
+                        address: account.address,
                         custodianDetails: account.custodianDetails,
                         labels: account.labels,
                         chainId: account.chainId,
                       })
                     }
-                    checked={
-                      selectedAccounts && selectedAccounts[account.address]
-                    }
+                    checked={selectedAccounts[account.address] || false}
                   />
                 )}
               </Box>
               <Box
-                display={DISPLAY.FLEX}
-                flexDirection={['column']}
+                display={Display.Flex}
+                flexDirection={FlexDirection.Column}
                 marginLeft={2}
-                width={BLOCK_SIZES.FULL}
+                width={BlockSize.Full}
               >
                 <Label
-                  display={DISPLAY.FLEX}
+                  display={Display.Flex}
                   marginTop={2}
                   marginLeft={2}
                   htmlFor={`address-${idx}`}
@@ -110,7 +112,7 @@ export default function CustodyAccountList({
                   </Text>
                 </Label>
                 <Label
-                  display={DISPLAY.FLEX}
+                  display={Display.Flex}
                   size={TextVariant.bodySm}
                   marginTop={2}
                   marginLeft={2}
@@ -120,7 +122,7 @@ export default function CustodyAccountList({
                   <Text
                     as="span"
                     variant={TextVariant.bodyMd}
-                    display={DISPLAY.FLEX}
+                    display={Display.Flex}
                     className="custody-account-list__item"
                   >
                     <ButtonLink
@@ -155,7 +157,7 @@ export default function CustodyAccountList({
                   </Text>
                 </Label>
                 <Box
-                  display={DISPLAY.FLEX}
+                  display={Display.Flex}
                   justifyContent={JustifyContent.spaceBetween}
                 >
                   {account.labels && (
@@ -172,38 +174,33 @@ export default function CustodyAccountList({
         </Box>
       </Box>
       {!rawList && (
-        <Box
-          display={DISPLAY.FLEX}
-          width={BLOCK_SIZES.FULL}
-          justifyContent={JustifyContent.spaceBetween}
-          paddingTop={5}
-          paddingRight={7}
-          paddingBottom={7}
-          paddingLeft={7}
-          className="custody-account-list__buttons"
-        >
-          <Button
-            data-testid="custody-account-cancel-button"
-            type="default"
-            large
-            className="custody-account-list__button"
-            onClick={onCancel}
-          >
-            {t('cancel')}
-          </Button>
-          <Button
-            data-testid="custody-account-connect-button"
-            type="primary"
-            large
-            className="custody-account-list__button"
-            disabled={disabled}
-            onClick={() => onAddAccounts(custody)}
-          >
-            {t('connect')}
-          </Button>
+        <Box as="footer" className="page-container__footer" padding={4}>
+          <Box display={Display.Flex} gap={4}>
+            <Button
+              data-testid="custody-account-cancel-button"
+              block
+              variant={BUTTON_VARIANT.SECONDARY}
+              size={BUTTON_SIZES.LG}
+              className="custody-account-list__button"
+              onClick={onCancel}
+            >
+              {t('cancel')}
+            </Button>
+            <Button
+              data-testid="custody-account-connect-button"
+              block
+              variant={BUTTON_VARIANT.PRIMARY}
+              size={BUTTON_SIZES.LG}
+              className="custody-account-list__button"
+              disabled={disabled}
+              onClick={() => onAddAccounts(custody)}
+            >
+              {t('connect')}
+            </Button>
+          </Box>
         </Box>
       )}
-    </>
+    </Box>
   );
 }
 
diff --git a/ui/pages/institutional/custody/custody.js b/ui/pages/institutional/custody/custody.js
index 3444ba010..56eda94e7 100644
--- a/ui/pages/institutional/custody/custody.js
+++ b/ui/pages/institutional/custody/custody.js
@@ -485,13 +485,9 @@ const CustodyPage = () => {
       )}
       {accounts && accounts.length > 0 && (
         <>
-          <Box
-            borderColor={BorderColor.borderDefault}
-            padding={[5, 7, 2]}
-            width={BlockSize.Full}
-          >
+          <Box padding={[5, 7, 2]} width={BlockSize.Full}>
             <Text as="h4">{t('selectAnAccount')}</Text>
-            <Text marginTop={2} marginBottom={5}>
+            <Text marginTop={2} marginBottom={2}>
               {t('selectAnAccountHelp')}
             </Text>
           </Box>
@@ -518,22 +514,26 @@ const CustodyPage = () => {
             custody={selectedCustodianName}
             accounts={accounts}
             onAccountChange={(account) => {
-              if (selectedAccounts[account.address]) {
-                delete selectedAccounts[account.address];
-              } else {
-                selectedAccounts[account.address] = {
-                  name: account.name,
-                  custodianDetails: account.custodianDetails,
-                  labels: account.labels,
-                  token: currentJwt,
-                  apiUrl,
-                  chainId: account.chainId,
-                  custodyType: selectedCustodianType,
-                  custodyName: selectedCustodianName,
-                };
-              }
+              setSelectedAccounts((prevSelectedAccounts) => {
+                const updatedSelectedAccounts = { ...prevSelectedAccounts };
 
-              setSelectedAccounts(selectedAccounts);
+                if (updatedSelectedAccounts[account.address]) {
+                  delete updatedSelectedAccounts[account.address];
+                } else {
+                  updatedSelectedAccounts[account.address] = {
+                    name: account.name,
+                    custodianDetails: account.custodianDetails,
+                    labels: account.labels,
+                    token: currentJwt,
+                    apiUrl,
+                    chainId: account.chainId,
+                    custodyType: selectedCustodianType,
+                    custodyName: selectedCustodianName,
+                  };
+                }
+
+                return updatedSelectedAccounts;
+              });
             }}
             selectedAccounts={selectedAccounts}
             onAddAccounts={async () => {
@@ -599,28 +599,25 @@ const CustodyPage = () => {
         </>
       )}
       {accounts && accounts.length === 0 && (
-        <Box
-          data-testid="custody-accounts-empty"
-          padding={[6, 7, 2]}
-          className="custody-accounts-empty"
-        >
-          <Text
-            marginBottom={2}
-            fontWeight={FontWeight.Bold}
-            color={TextColor.textDefault}
-            variant={TextVariant.bodyLgMedium}
-          >
-            {t('allCustodianAccountsConnectedTitle')}
-          </Text>
-          <Text variant={TextVariant.bodyMd}>
-            {t('allCustodianAccountsConnectedSubtitle')}
-          </Text>
-
+        <>
           <Box
-            padding={[5, 7]}
-            width={BlockSize.Full}
-            className="custody-accounts-empty__footer"
+            data-testid="custody-accounts-empty"
+            padding={[6, 7, 2]}
+            className="page-container__content"
           >
+            <Text
+              marginBottom={2}
+              fontWeight={FontWeight.Bold}
+              color={TextColor.textDefault}
+              variant={TextVariant.bodyLgMedium}
+            >
+              {t('allCustodianAccountsConnectedTitle')}
+            </Text>
+            <Text variant={TextVariant.bodyMd}>
+              {t('allCustodianAccountsConnectedSubtitle')}
+            </Text>
+          </Box>
+          <Box as="footer" className="page-container__footer" padding={4}>
             <Button
               block
               size={BUTTON_SIZES.LG}
@@ -630,7 +627,7 @@ const CustodyPage = () => {
               {t('close')}
             </Button>
           </Box>
-        </Box>
+        </>
       )}
     </Box>
   );
diff --git a/ui/pages/institutional/custody/index.scss b/ui/pages/institutional/custody/index.scss
deleted file mode 100644
index 0eeeb15af..000000000
--- a/ui/pages/institutional/custody/index.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.custody-accounts-empty {
-  min-height: 300px;
-
-  &__footer {
-    border-top: 1px solid var(--color-border-muted);
-    position: absolute;
-    bottom: 0;
-    left: 0;
-  }
-}
diff --git a/ui/pages/institutional/institutional-entity-done-page/institutional-entity-done-page.js b/ui/pages/institutional/institutional-entity-done-page/institutional-entity-done-page.js
index 164724acf..495b15d88 100644
--- a/ui/pages/institutional/institutional-entity-done-page/institutional-entity-done-page.js
+++ b/ui/pages/institutional/institutional-entity-done-page/institutional-entity-done-page.js
@@ -1,16 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
-import Button from '../../../components/ui/button';
 import { getMostRecentOverviewPage } from '../../../ducks/history/history';
 import { useI18nContext } from '../../../hooks/useI18nContext';
-import { Text } from '../../../components/component-library';
+import {
+  Text,
+  Box,
+  Button,
+  BUTTON_VARIANT,
+} from '../../../components/component-library';
 import {
   TextColor,
-  BorderRadius,
   TypographyVariant,
+  Display,
+  FlexDirection,
+  AlignItems,
+  TextAlign,
 } from '../../../helpers/constants/design-system';
-import Box from '../../../components/ui/box';
 
 export default function InstitutionalEntityDonePage(props) {
   const mostRecentOverviewPage = useSelector(getMostRecentOverviewPage);
@@ -19,7 +25,7 @@ export default function InstitutionalEntityDonePage(props) {
   const { state } = location;
 
   return (
-    <Box borderRadius={BorderRadius.none}>
+    <Box className="page-container">
       <Box className="page-container__content">
         <Box
           paddingBottom={6}
@@ -28,15 +34,17 @@ export default function InstitutionalEntityDonePage(props) {
           className="institutional-entity-done__form"
         >
           <Box
-            display={['flex']}
-            flexDirection={['column']}
-            alignItems={['center']}
+            display={Display.Flex}
+            flexDirection={FlexDirection.Column}
+            alignItems={AlignItems.center}
           >
-            <img
-              className="institutional-entity-done__img"
-              src={state.imgSrc}
-              alt="Entity image"
-            />
+            {state.imgSrc && (
+              <img
+                className="institutional-entity-done__img"
+                src={state.imgSrc}
+                alt="Entity image"
+              />
+            )}
             <Text
               as="h4"
               marginTop={4}
@@ -51,23 +59,24 @@ export default function InstitutionalEntityDonePage(props) {
               marginTop={2}
               marginBottom={5}
               variant={TypographyVariant.headingSm}
+              textAlign={TextAlign.Center}
             >
               {state.description}
             </Text>
           </Box>
         </Box>
       </Box>
-      <Box className="page-container__footer">
-        <footer>
+      <Box as="footer" className="page-container__footer" padding={4}>
+        <Box display={Display.Flex} gap={4}>
           <Button
-            type="primary"
-            large
+            block
+            variant={BUTTON_VARIANT.PRIMARY}
             data-testid="click-most-recent-overview-page"
             onClick={() => history.push(mostRecentOverviewPage)}
           >
-            <Text>{t('close')}</Text>
+            {t('close')}
           </Button>
-        </footer>
+        </Box>
       </Box>
     </Box>
   );
diff --git a/ui/pages/institutional/interactive-replacement-token-page/__snapshots__/interactive-replacement-token-page.test.js.snap b/ui/pages/institutional/interactive-replacement-token-page/__snapshots__/interactive-replacement-token-page.test.js.snap
index 9d57ea9b9..000687750 100644
--- a/ui/pages/institutional/interactive-replacement-token-page/__snapshots__/interactive-replacement-token-page.test.js.snap
+++ b/ui/pages/institutional/interactive-replacement-token-page/__snapshots__/interactive-replacement-token-page.test.js.snap
@@ -3,57 +3,55 @@
 exports[`Interactive Replacement Token Page should reject if there are errors 1`] = `
 <div>
   <div
-    class="box page-container box--flex-direction-row"
+    class="mm-box page-container"
     data-testid="interactive-replacement-token"
   >
     <div
-      class="box page-container__header false box--flex-direction-row"
+      class="mm-box page-container__header false"
     >
       <div
-        class="box page-container__title box--flex-direction-row"
+        class="mm-box page-container__title"
       >
         Replace custodian token
          
         
       </div>
       <div
-        class="box page-container__subtitle box--flex-direction-row"
+        class="mm-box page-container__subtitle"
       >
         This is will replace the custodian token for the following address:
       </div>
     </div>
     <div
-      class="box page-container__content box--flex-direction-row"
+      class="mm-box page-container__content"
     >
       <div
-        class="box interactive-replacement-token-page box--margin-right-7 box--margin-left-7 box--display-flex box--flex-direction-row box--color-text-alternative"
+        class="mm-box interactive-replacement-token-page mm-box--margin-right-7 mm-box--margin-left-7 mm-box--display-flex mm-box--color-text-alternative"
         overflowwrap="break-word"
       >
         <div
-          class="box box--display-flex box--flex-direction-column box--width-full"
+          class="mm-box mm-box--display-flex mm-box--flex-direction-column mm-box--width-full"
           data-testid="interactive-replacement-token-page"
         />
       </div>
     </div>
-    <div
-      class="box page-container__footer box--flex-direction-row"
+    <footer
+      class="mm-box page-container__footer mm-box--padding-4"
     >
-      <footer>
+      <div
+        class="pulse-loader"
+      >
         <div
-          class="pulse-loader"
-        >
-          <div
-            class="pulse-loader__loading-dot-one"
-          />
-          <div
-            class="pulse-loader__loading-dot-two"
-          />
-          <div
-            class="pulse-loader__loading-dot-three"
-          />
-        </div>
-      </footer>
-    </div>
+          class="pulse-loader__loading-dot-one"
+        />
+        <div
+          class="pulse-loader__loading-dot-two"
+        />
+        <div
+          class="pulse-loader__loading-dot-three"
+        />
+      </div>
+    </footer>
   </div>
 </div>
 `;
@@ -61,14 +59,14 @@ exports[`Interactive Replacement Token Page should reject if there are errors 1`
 exports[`Interactive Replacement Token Page should reject if there are errors 2`] = `
 <div>
   <div
-    class="box page-container box--flex-direction-row"
+    class="mm-box page-container"
     data-testid="interactive-replacement-token"
   >
     <div
-      class="box page-container__header error box--flex-direction-row"
+      class="mm-box page-container__header error"
     >
       <div
-        class="box page-container__title box--flex-direction-row"
+        class="mm-box page-container__title"
       >
         Replace custodian token
          
@@ -76,10 +74,10 @@ exports[`Interactive Replacement Token Page should reject if there are errors 2`
       </div>
     </div>
     <div
-      class="box page-container__content box--flex-direction-row"
+      class="mm-box page-container__content"
     >
       <div
-        class="box interactive-replacement-token-page box--margin-right-7 box--margin-left-7 box--display-flex box--flex-direction-row box--color-text-alternative"
+        class="mm-box interactive-replacement-token-page mm-box--margin-right-7 mm-box--margin-left-7 mm-box--display-flex mm-box--color-text-alternative"
         overflowwrap="break-word"
       >
         <p
@@ -88,32 +86,26 @@ exports[`Interactive Replacement Token Page should reject if there are errors 2`
         >
           Please go to displayName and click the 'Connect to MMI' button within their user interface to connect your accounts to MMI again.
         </p>
-        <div
-          class="box box--display-flex box--flex-direction-column box--width-full"
-          data-testid="interactive-replacement-token-page"
-        />
       </div>
     </div>
-    <div
-      class="box page-container__footer box--flex-direction-row"
+    <footer
+      class="mm-box page-container__footer mm-box--padding-4"
     >
-      <footer>
+      <div
+        class="mm-box mm-box--display-flex mm-box--gap-4"
+      >
         <button
-          class="button btn--rounded btn-default btn--large page-container__footer-button"
-          role="button"
-          tabindex="0"
+          class="box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block mm-button-secondary mm-text--body-md-medium box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent box--rounded-pill box--border-color-primary-default box--border-style-solid box--border-width-1"
         >
           Reject
         </button>
         <button
-          class="button btn--rounded btn-primary btn--large page-container__footer-button"
-          role="button"
-          tabindex="0"
+          class="box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block mm-button-primary mm-text--body-md-medium box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-inverse box--background-color-primary-default box--rounded-pill"
         >
           displayName
         </button>
-      </footer>
-    </div>
+      </div>
+    </footer>
   </div>
 </div>
 `;
diff --git a/ui/pages/institutional/interactive-replacement-token-page/interactive-replacement-token-page.js b/ui/pages/institutional/interactive-replacement-token-page/interactive-replacement-token-page.js
index 751168841..f3d83e988 100644
--- a/ui/pages/institutional/interactive-replacement-token-page/interactive-replacement-token-page.js
+++ b/ui/pages/institutional/interactive-replacement-token-page/interactive-replacement-token-page.js
@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 import { toChecksumHexAddress } from '../../../../shared/modules/hexstring-utils';
 import { getMostRecentOverviewPage } from '../../../ducks/history/history';
 import { getMetaMaskAccounts } from '../../../selectors';
-import Button from '../../../components/ui/button';
 import CustodyLabels from '../../../components/institutional/custody-labels/custody-labels';
 import PulseLoader from '../../../components/ui/pulse-loader';
 import { INSTITUTIONAL_FEATURES_DONE_ROUTE } from '../../../helpers/constants/routes';
@@ -17,7 +16,6 @@ import {
   mmiActionsFactory,
   showInteractiveReplacementTokenBanner,
 } from '../../../store/institutional/institution-background';
-import Box from '../../../components/ui/box';
 import {
   Text,
   Label,
@@ -25,14 +23,18 @@ import {
   ButtonLink,
   IconName,
   IconSize,
+  Box,
+  Button,
+  BUTTON_VARIANT,
+  BUTTON_SIZES,
 } from '../../../components/component-library';
 import {
-  OVERFLOW_WRAP,
+  OverflowWrap,
   TextColor,
   JustifyContent,
-  BLOCK_SIZES,
-  DISPLAY,
-  FLEX_DIRECTION,
+  BlockSize,
+  Display,
+  FlexDirection,
   IconColor,
 } from '../../../helpers/constants/design-system';
 import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
@@ -46,7 +48,9 @@ export default function InteractiveReplacementTokenPage({ history }) {
   const dispatch = useDispatch();
   const isMountedRef = useRef(false);
   const mmiActions = mmiActionsFactory();
-  const { address } = useSelector((state) => state.metamask.modal.props);
+  const address = useSelector(
+    (state) => state.appState.modal.modalState.props?.address,
+  );
   const {
     selectedAddress,
     custodyAccountDetails,
@@ -83,9 +87,12 @@ export default function InteractiveReplacementTokenPage({ history }) {
   }, []);
 
   useEffect(() => {
+    let isMounted = true;
+
     const getTokenAccounts = async () => {
       if (!connectRequest) {
         history.push(mostRecentOverviewPage);
+        setIsLoading(false);
         return;
       }
 
@@ -111,23 +118,37 @@ export default function InteractiveReplacementTokenPage({ history }) {
             metaMaskAccounts[account.address.toLowerCase()]?.balance || 0,
         }));
 
-        if (isMountedRef.current) {
+        if (isMounted) {
           setTokenAccounts(mappedAccounts);
           setIsLoading(false);
         }
       } catch (e) {
         setError(true);
         setIsLoading(false);
+      } finally {
+        if (isMounted) {
+          setIsLoading(false);
+        }
       }
     };
 
     getTokenAccounts();
+
+    return () => {
+      isMounted = false;
+    };
     // We just want to get the accounts in the render of the component
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  useEffect(() => {
+    if (!connectRequest) {
+      history.push(mostRecentOverviewPage);
+      setIsLoading(false);
+    }
+  }, [connectRequest, history, mostRecentOverviewPage]);
+
   if (!connectRequest) {
-    history.push(mostRecentOverviewPage);
     return null;
   }
 
@@ -142,8 +163,8 @@ export default function InteractiveReplacementTokenPage({ history }) {
   };
 
   const handleReject = () => {
+    setIsLoading(true);
     onRemoveAddTokenConnectRequest(connectRequest);
-    history.push(mostRecentOverviewPage);
   };
 
   const handleApprove = async () => {
@@ -208,10 +229,10 @@ export default function InteractiveReplacementTokenPage({ history }) {
       </Box>
       <Box className="page-container__content">
         <Box
-          display={DISPLAY.FLEX}
+          display={Display.Flex}
           marginRight={7}
           marginLeft={7}
-          overflowWrap={OVERFLOW_WRAP.BREAK_WORD}
+          overflowwrap={OverflowWrap.BreakWord}
           color={TextColor.textAlternative}
           className="interactive-replacement-token-page"
         >
@@ -221,123 +242,122 @@ export default function InteractiveReplacementTokenPage({ history }) {
                 custodian.displayName || 'Custodian',
               ])}
             </Text>
-          ) : null}
-          <Box
-            display={DISPLAY.FLEX}
-            flexDirection={FLEX_DIRECTION.COLUMN}
-            width={BLOCK_SIZES.FULL}
-            data-testid="interactive-replacement-token-page"
-          >
-            {tokenAccounts.map((account, idx) => {
-              return (
-                <Box
-                  display={DISPLAY.FLEX}
-                  className="interactive-replacement-token-page__item"
-                  key={account.address}
-                >
+          ) : (
+            <Box
+              display={Display.Flex}
+              flexDirection={FlexDirection.Column}
+              width={BlockSize.Full}
+              data-testid="interactive-replacement-token-page"
+            >
+              {tokenAccounts.map((account, idx) => {
+                return (
                   <Box
-                    display={DISPLAY.FLEX}
-                    flexDirection={FLEX_DIRECTION.COLUMN}
-                    width={BLOCK_SIZES.FULL}
+                    display={Display.Flex}
+                    className="interactive-replacement-token-page__item"
+                    key={account.address}
                   >
-                    <Label
-                      marginTop={3}
-                      marginRight={2}
-                      htmlFor={`address-${idx}`}
-                    >
-                      <Text as="span" data-testid="account-name">
-                        {account.name}
-                      </Text>
-                    </Label>
-                    <Label
-                      marginTop={1}
-                      marginRight={2}
-                      htmlFor={`address-${idx}`}
-                    >
-                      <Text
-                        as="span"
-                        display={DISPLAY.FLEX}
-                        className="interactive-replacement-token-page__item__address"
-                      >
-                        <ButtonLink
-                          href={getButtonLinkHref(account)}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                        >
-                          {shortenAddress(account.address)}
-                          <Icon
-                            name={IconName.Export}
-                            size={IconSize.Sm}
-                            color={IconColor.primaryDefault}
-                            marginLeft={1}
-                          />
-                        </ButtonLink>
-                        <Tooltip
-                          position="bottom"
-                          title={
-                            copied
-                              ? t('copiedExclamation')
-                              : t('copyToClipboard')
-                          }
-                        >
-                          <button
-                            className="interactive-replacement-token-page__item-clipboard"
-                            onClick={() => handleCopy(account.address)}
-                          >
-                            <Icon
-                              name={IconName.Copy}
-                              size={IconSize.Xs}
-                              color={IconColor.iconMuted}
-                            />
-                          </button>
-                        </Tooltip>
-                      </Text>
-                    </Label>
                     <Box
-                      display={DISPLAY.FLEX}
-                      justifyContent={JustifyContent.spaceBetween}
+                      display={Display.Flex}
+                      flexDirection={FlexDirection.Column}
+                      width={BlockSize.Full}
                     >
-                      {account.labels && (
-                        <CustodyLabels
-                          labels={account.labels}
-                          index={idx.toString()}
-                          hideNetwork
-                        />
-                      )}
+                      <Label
+                        marginTop={3}
+                        marginRight={2}
+                        htmlFor={`address-${idx}`}
+                      >
+                        <Text as="span" data-testid="account-name">
+                          {account.name}
+                        </Text>
+                      </Label>
+                      <Label
+                        marginTop={1}
+                        marginRight={2}
+                        htmlFor={`address-${idx}`}
+                      >
+                        <Text
+                          as="span"
+                          display={Display.Flex}
+                          className="interactive-replacement-token-page__item__address"
+                        >
+                          <ButtonLink
+                            href={getButtonLinkHref(account)}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                          >
+                            {shortenAddress(account.address)}
+                            <Icon
+                              name={IconName.Export}
+                              size={IconSize.Sm}
+                              color={IconColor.primaryDefault}
+                              marginLeft={1}
+                            />
+                          </ButtonLink>
+                          <Tooltip
+                            position="bottom"
+                            title={
+                              copied
+                                ? t('copiedExclamation')
+                                : t('copyToClipboard')
+                            }
+                          >
+                            <button
+                              className="interactive-replacement-token-page__item-clipboard"
+                              onClick={() => handleCopy(account.address)}
+                            >
+                              <Icon
+                                name={IconName.Copy}
+                                size={IconSize.Sm}
+                                color={IconColor.iconMuted}
+                              />
+                            </button>
+                          </Tooltip>
+                        </Text>
+                      </Label>
+                      <Box
+                        display={Display.Flex}
+                        justifyContent={JustifyContent.spaceBetween}
+                      >
+                        {account.labels && (
+                          <CustodyLabels
+                            labels={account.labels}
+                            index={idx.toString()}
+                            hideNetwork
+                          />
+                        )}
+                      </Box>
                     </Box>
                   </Box>
-                </Box>
-              );
-            })}
-          </Box>
+                );
+              })}
+            </Box>
+          )}
         </Box>
       </Box>
-      <Box className="page-container__footer">
+      <Box as="footer" className="page-container__footer" padding={4}>
         {isLoading ? (
-          <footer>
-            <PulseLoader />
-          </footer>
+          <PulseLoader />
         ) : (
-          <footer>
+          <Box display={Display.Flex} gap={4}>
             <Button
-              type="default"
-              large
-              className="page-container__footer-button"
+              block
+              variant={BUTTON_VARIANT.SECONDARY}
+              size={BUTTON_SIZES.LG}
               onClick={handleReject}
             >
               {t('reject')}
             </Button>
             <Button
-              type="primary"
-              large
-              className="page-container__footer-button"
+              block
+              variant={BUTTON_VARIANT.PRIMARY}
+              size={BUTTON_SIZES.LG}
               onClick={handleApprove}
             >
               {error
                 ? custodian.displayName || 'Custodian'
                 : t('approveButtonText')}
             </Button>
-          </footer>
+          </Box>
         )}
       </Box>
     </Box>
diff --git a/ui/pages/institutional/interactive-replacement-token-page/interactive-replacement-token-page.test.js b/ui/pages/institutional/interactive-replacement-token-page/interactive-replacement-token-page.test.js
index d462f4a7a..187acf4f9 100644
--- a/ui/pages/institutional/interactive-replacement-token-page/interactive-replacement-token-page.test.js
+++ b/ui/pages/institutional/interactive-replacement-token-page/interactive-replacement-token-page.test.js
@@ -166,8 +166,6 @@ describe('Interactive Replacement Token Page', function () {
   });
 
   it('should call onRemoveAddTokenConnectRequest and navigate to mostRecentOverviewPage when handleReject is called', () => {
-    const mostRecentOverviewPage = '/mostRecentOverviewPage';
-
     const { getByText } = render();
 
     fireEvent.click(getByText('Reject'));
@@ -178,8 +176,6 @@ describe('Interactive Replacement Token Page', function () {
       apiUrl: connectRequests[0].apiUrl,
       token: connectRequests[0].token,
     });
-    expect(props.history.push).toHaveBeenCalled();
-    expect(props.history.push).toHaveBeenCalledWith(mostRecentOverviewPage);
   });
 
   it('should call onRemoveAddTokenConnectRequest, setCustodianNewRefreshToken, and dispatch showInteractiveReplacementTokenBanner when handleApprove is called', async () => {
diff --git a/ui/pages/pages.scss b/ui/pages/pages.scss
index f9795cb28..313f1f538 100644
--- a/ui/pages/pages.scss
+++ b/ui/pages/pages.scss
@@ -15,7 +15,6 @@
 @import 'connected-sites/index';
 @import 'create-account/connect-hardware/index';
 @import "institutional/connect-custody/index";
-@import "institutional/custody/index";
 @import "institutional/institutional-entity-done-page/index";
 @import "institutional/compliance-feature-page/index";
 @import "institutional/confirm-add-custodian-token/index";
diff --git a/ui/store/institutional/institution-background.ts b/ui/store/institutional/institution-background.ts
index 4b8f43d1c..626f43844 100644
--- a/ui/store/institutional/institution-background.ts
+++ b/ui/store/institutional/institution-background.ts
@@ -20,12 +20,14 @@ export function showInteractiveReplacementTokenBanner({
 }: {
   url: string;
   oldRefreshToken: string;
-}): ThunkAction<void, MetaMaskReduxState, unknown, AnyAction> {
+}) {
   return async (dispatch: MetaMaskReduxDispatch) => {
     try {
       await submitRequestToBackground('showInteractiveReplacementTokenBanner', [
-        url,
-        oldRefreshToken,
+        {
+          url,
+          oldRefreshToken,
+        },
       ]);
     } catch (err: any) {
       if (err) {
@@ -237,19 +239,21 @@ export function mmiActionsFactory() {
         custodyType,
         token,
       ]),
-    setCustodianNewRefreshToken: (
-      address: string,
-      oldAuthDetails: string,
-      oldApiUrl: string,
-      newAuthDetails: string,
-      newApiUrl: string,
-    ) =>
+    setCustodianNewRefreshToken: ({
+      address,
+      oldAuthDetails,
+      oldApiUrl,
+      newAuthDetails,
+      newApiUrl,
+    }: {
+      address: string;
+      oldAuthDetails: string;
+      oldApiUrl: string;
+      newAuthDetails: string;
+      newApiUrl: string;
+    }) =>
       createAsyncAction('setCustodianNewRefreshToken', [
-        address,
-        oldAuthDetails,
-        oldApiUrl,
-        newAuthDetails,
-        newApiUrl,
+        { address, oldAuthDetails, oldApiUrl, newAuthDetails, newApiUrl },
       ]),
   };
 }