diff --git a/ui/components/app/confirm-page-container/confirm-page-container-header/__snapshots__/confirm-page-container-header.component.test.js.snap b/ui/components/app/confirm-page-container/confirm-page-container-header/__snapshots__/confirm-page-container-header.component.test.js.snap
index 6bcd678b78c5..fbf0e3123ca7 100644
--- a/ui/components/app/confirm-page-container/confirm-page-container-header/__snapshots__/confirm-page-container-header.component.test.js.snap
+++ b/ui/components/app/confirm-page-container/confirm-page-container-header/__snapshots__/confirm-page-container-header.component.test.js.snap
@@ -25,26 +25,22 @@ exports[`Confirm Detail Row Component should match snapshot 1`] = `
         </span>
       </div>
       <div
-        class="network-display chip chip--with-left-icon chip--border-color-border-muted chip--background-color-undefined chip--max-content"
-        data-testid="network-display"
+        class="mm-box mm-picker-network mm-box--padding-right-4 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-border-muted box--border-style-solid box--border-width-1"
       >
         <div
-          class="chip__left-icon"
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
         >
-          <div
-            class="color-indicator color-indicator--filled color-indicator--color-icon-muted color-indicator--size-lg"
-            data-testid="color-icon-icon-muted"
-          >
-            <i
-              class="color-indicator__icon fa fa-question"
-            />
-          </div>
+          P
         </div>
         <span
-          class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography chip__label typography--h7 typography--weight-normal typography--style-normal typography--color-text-alternative"
+          class="mm-box mm-text mm-text--body-sm mm-text--ellipsis mm-box--color-text-default"
         >
           Private network
         </span>
+        <span
+          class="mm-box mm-picker-network__arrow-down-icon mm-icon mm-icon--size-xs mm-box--margin-left-auto mm-box--display-none mm-box--color-icon-default"
+          style="mask-image: url('./images/icons/arrow-down.svg');"
+        />
       </div>
     </div>
   </div>
diff --git a/ui/components/app/confirm-page-container/confirm-page-container-header/confirm-page-container-header.component.js b/ui/components/app/confirm-page-container/confirm-page-container-header/confirm-page-container-header.component.js
index 7defa58d10c7..4cda34e4b3a9 100644
--- a/ui/components/app/confirm-page-container/confirm-page-container-header/confirm-page-container-header.component.js
+++ b/ui/components/app/confirm-page-container/confirm-page-container-header/confirm-page-container-header.component.js
@@ -1,16 +1,28 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
 import {
   ENVIRONMENT_TYPE_POPUP,
   ENVIRONMENT_TYPE_NOTIFICATION,
 } from '../../../../../shared/constants/app';
 import { getEnvironmentType } from '../../../../../app/scripts/lib/util';
-import NetworkDisplay from '../../network-display';
 import Identicon from '../../../ui/identicon';
 import { shortenAddress } from '../../../../helpers/utils/util';
 import AccountMismatchWarning from '../../../ui/account-mismatch-warning/account-mismatch-warning.component';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
-import { Icon, IconName } from '../../../component-library';
+import { Icon, IconName, PickerNetwork } from '../../../component-library';
+import {
+  BackgroundColor,
+  BorderColor,
+  Display,
+} from '../../../../helpers/constants/design-system';
+import {
+  getCurrentNetwork,
+  getTestNetworkBackgroundColor,
+} from '../../../../selectors';
+import { getProviderConfig } from '../../../../ducks/metamask/metamask';
+import { NETWORK_TYPES } from '../../../../../shared/constants/network';
+import { getNetworkLabelKey } from '../../../../helpers/utils/i18n-helper';
 
 export default function ConfirmPageContainerHeader({
   onEdit,
@@ -21,6 +33,10 @@ export default function ConfirmPageContainerHeader({
 }) {
   const t = useI18nContext();
   const windowType = getEnvironmentType();
+  const { nickname, type: networkType } = useSelector(getProviderConfig);
+  const currentNetwork = useSelector(getCurrentNetwork);
+  const testNetworkBackgroundColor = useSelector(getTestNetworkBackgroundColor);
+
   const isFullScreen =
     windowType !== ENVIRONMENT_TYPE_NOTIFICATION &&
     windowType !== ENVIRONMENT_TYPE_POPUP;
@@ -64,7 +80,23 @@ export default function ConfirmPageContainerHeader({
             </span>
           </div>
         )}
-        {isFullScreen ? null : <NetworkDisplay />}
+        {isFullScreen ? null : (
+          <PickerNetwork
+            as="div"
+            src={currentNetwork?.rpcPrefs?.imageUrl}
+            label={
+              networkType === NETWORK_TYPES.RPC
+                ? nickname ?? t('privateNetwork')
+                : t(getNetworkLabelKey(networkType))
+            }
+            backgroundColor={BackgroundColor.transparent}
+            borderColor={BorderColor.borderMuted}
+            iconProps={{ display: Display.None }}
+            avatarNetworkProps={{
+              backgroundColor: testNetworkBackgroundColor,
+            }}
+          />
+        )}
       </div>
       {children}
     </div>