diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index ecaedb3201d0..5f6a977c1cf4 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -870,6 +870,9 @@
   "bridgeDontSend": {
     "message": "Bridge, don't send"
   },
+  "bridgeSelectNetwork": {
+    "message": "Select network"
+  },
   "browserNotSupported": {
     "message": "Your browser is not supported..."
   },
diff --git a/test/e2e/tests/multichain/asset-picker-send.spec.ts b/test/e2e/tests/multichain/asset-picker-send.spec.ts
index 5accb14c6074..a071bec9426d 100644
--- a/test/e2e/tests/multichain/asset-picker-send.spec.ts
+++ b/test/e2e/tests/multichain/asset-picker-send.spec.ts
@@ -71,7 +71,7 @@ describe('AssetPickerSendFlow @no-mmi', function () {
           )
         ).getText();
 
-        assert.equal(tokenListValue, '25 ETH');
+        assert.equal(tokenListValue, '$250,000.00');
 
         const tokenListSecondaryValue = await (
           await driver.findElement(
@@ -79,7 +79,7 @@ describe('AssetPickerSendFlow @no-mmi', function () {
           )
         ).getText();
 
-        assert.equal(tokenListSecondaryValue, '$250,000.00');
+        assert.equal(tokenListSecondaryValue, '25 ETH');
 
         // Search for CHZ
         const searchInputField = await driver.waitForSelector(
diff --git a/ui/components/multichain/asset-picker-amount/asset-picker-modal/Asset.test.tsx b/ui/components/multichain/asset-picker-amount/asset-picker-modal/Asset.test.tsx
index f35bc8196724..0b641101c5dd 100644
--- a/ui/components/multichain/asset-picker-amount/asset-picker-modal/Asset.test.tsx
+++ b/ui/components/multichain/asset-picker-amount/asset-picker-modal/Asset.test.tsx
@@ -77,10 +77,11 @@ describe('Asset', () => {
       expect.objectContaining({
         tokenSymbol: 'WETH',
         tokenImage: 'token-icon-url',
-        primary: '10',
-        secondary: '$10.10',
+        primary: '$10.10',
+        secondary: '10 WETH',
         title: 'Token',
         tooltipText: 'tooltip',
+        isPrimaryTokenSymbolHidden: true,
       }),
       {},
     );
diff --git a/ui/components/multichain/asset-picker-amount/asset-picker-modal/Asset.tsx b/ui/components/multichain/asset-picker-amount/asset-picker-modal/Asset.tsx
index 83229689f055..f384ef8fd96f 100644
--- a/ui/components/multichain/asset-picker-amount/asset-picker-modal/Asset.tsx
+++ b/ui/components/multichain/asset-picker-amount/asset-picker-modal/Asset.tsx
@@ -40,18 +40,22 @@ export default function Asset({
     {},
     true,
   );
+  const formattedAmount = decimalTokenAmount
+    ? `${formatAmount(
+        locale,
+        new BigNumber(decimalTokenAmount || '0', 10),
+      )} ${symbol}`
+    : undefined;
 
   return (
     <TokenListItem
       tokenSymbol={symbol}
       tokenImage={tokenImage}
-      primary={formatAmount(
-        locale,
-        new BigNumber(decimalTokenAmount || '0', 10),
-      )}
-      secondary={formattedFiat}
+      secondary={formattedAmount}
+      primary={formattedFiat}
       title={title}
       tooltipText={tooltipText}
+      isPrimaryTokenSymbolHidden
     />
   );
 }
diff --git a/ui/components/multichain/asset-picker-amount/asset-picker-modal/AssetList.tsx b/ui/components/multichain/asset-picker-amount/asset-picker-modal/AssetList.tsx
index 9061592cf37c..fa071740b51d 100644
--- a/ui/components/multichain/asset-picker-amount/asset-picker-modal/AssetList.tsx
+++ b/ui/components/multichain/asset-picker-amount/asset-picker-modal/AssetList.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import classnames from 'classnames';
-import { getSelectedAccountCachedBalance } from '../../../../selectors';
+import {
+  getCurrentCurrency,
+  getSelectedAccountCachedBalance,
+} from '../../../../selectors';
 import { getNativeCurrency } from '../../../../ducks/metamask/metamask';
-import { useUserPreferencedCurrency } from '../../../../hooks/useUserPreferencedCurrency';
-import { PRIMARY, SECONDARY } from '../../../../helpers/constants/common';
 import { useCurrencyDisplay } from '../../../../hooks/useCurrencyDisplay';
 import { AssetType } from '../../../../../shared/constants/transaction';
 import { Box } from '../../../component-library';
@@ -43,28 +44,16 @@ export default function AssetList({
 
   const nativeCurrency = useSelector(getNativeCurrency);
   const balanceValue = useSelector(getSelectedAccountCachedBalance);
+  const currentCurrency = useSelector(getCurrentCurrency);
 
-  const {
-    currency: primaryCurrency,
-    numberOfDecimals: primaryNumberOfDecimals,
-  } = useUserPreferencedCurrency(PRIMARY, { ethNumberOfDecimals: 4 });
-
-  const {
-    currency: secondaryCurrency,
-    numberOfDecimals: secondaryNumberOfDecimals,
-  } = useUserPreferencedCurrency(SECONDARY, { ethNumberOfDecimals: 4 });
-
-  const [, primaryCurrencyProperties] = useCurrencyDisplay(balanceValue, {
-    numberOfDecimals: primaryNumberOfDecimals,
-    currency: primaryCurrency,
+  const [primaryCurrencyValue] = useCurrencyDisplay(balanceValue, {
+    currency: currentCurrency,
+    hideLabel: true,
   });
 
-  const [secondaryCurrencyDisplay, secondaryCurrencyProperties] =
-    useCurrencyDisplay(balanceValue, {
-      numberOfDecimals: secondaryNumberOfDecimals,
-      currency: secondaryCurrency,
-      hideLabel: true,
-    });
+  const [secondaryCurrencyValue] = useCurrencyDisplay(balanceValue, {
+    currency: nativeCurrency,
+  });
 
   return (
     <Box className="tokens-main-view-modal">
@@ -72,6 +61,7 @@ export default function AssetList({
         const tokenAddress = token.address?.toLowerCase();
         const isSelected = tokenAddress === selectedToken?.toLowerCase();
         const isDisabled = isTokenDisabled?.(token) ?? false;
+
         return (
           <Box
             padding={0}
@@ -112,15 +102,13 @@ export default function AssetList({
               <Box marginInlineStart={2}>
                 {token.type === AssetType.native ? (
                   <TokenListItem
-                    title={nativeCurrency}
-                    primary={
-                      primaryCurrencyProperties.value ??
-                      secondaryCurrencyProperties.value
-                    }
-                    tokenSymbol={primaryCurrency}
-                    secondary={secondaryCurrencyDisplay}
+                    title={token.symbol}
+                    primary={primaryCurrencyValue}
+                    tokenSymbol={token.symbol}
+                    secondary={secondaryCurrencyValue}
                     tokenImage={token.image}
-                    isOriginalTokenSymbol
+                    isOriginalTokenSymbol={token.symbol === nativeCurrency}
+                    isPrimaryTokenSymbolHidden
                   />
                 ) : (
                   <AssetComponent
diff --git a/ui/components/multichain/asset-picker-amount/asset-picker-modal/__snapshots__/asset-picker-modal-network.test.tsx.snap b/ui/components/multichain/asset-picker-amount/asset-picker-modal/__snapshots__/asset-picker-modal-network.test.tsx.snap
new file mode 100644
index 000000000000..c51245502300
--- /dev/null
+++ b/ui/components/multichain/asset-picker-amount/asset-picker-modal/__snapshots__/asset-picker-modal-network.test.tsx.snap
@@ -0,0 +1,392 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AssetPickerModalNetwork renders modal with no network list by default 1`] = `
+<body>
+  <div
+    id="popover-content"
+  />
+  <div />
+  <div
+    class="mm-modal multichain-asset-picker__network-modal"
+  >
+    <div
+      aria-hidden="true"
+      class="mm-box mm-modal-overlay mm-box--width-full mm-box--height-full mm-box--background-color-overlay-default"
+    />
+    <div
+      data-focus-guard="true"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+      tabindex="0"
+    />
+    <div
+      data-focus-lock-disabled="false"
+    >
+      <div
+        class="mm-box mm-modal-content mm-box--padding-top-4 mm-box--sm:padding-top-8 mm-box--md:padding-top-12 mm-box--padding-right-4 mm-box--padding-bottom-4 mm-box--sm:padding-bottom-8 mm-box--md:padding-bottom-12 mm-box--padding-left-4 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-flex-start mm-box--width-screen mm-box--height-screen"
+      >
+        <section
+          aria-modal="true"
+          class="mm-box mm-modal-content__dialog mm-modal-content__dialog--size-sm mm-box--padding-0 mm-box--padding-top-4 mm-box--padding-bottom-4 mm-box--display-flex mm-box--flex-direction-column mm-box--width-full mm-box--background-color-background-default mm-box--rounded-lg"
+          role="dialog"
+        >
+          <header
+            class="mm-box mm-header-base mm-modal-header mm-box--padding-right-4 mm-box--padding-bottom-4 mm-box--padding-left-4 mm-box--display-flex mm-box--justify-content-space-between"
+          >
+            <div
+              class="mm-box"
+              style="min-width: 0px;"
+            >
+              <button
+                aria-label="Back"
+                class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
+              >
+                <span
+                  class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
+                  style="mask-image: url('./images/icons/arrow-left.svg');"
+                />
+              </button>
+            </div>
+            <div
+              class="mm-box mm-box--width-full"
+            >
+              <h4
+                class="mm-box mm-text mm-text--heading-sm mm-text--text-align-center mm-box--color-text-default"
+              >
+                Select network
+              </h4>
+            </div>
+            <div
+              class="mm-box mm-box--display-flex mm-box--justify-content-flex-end"
+              style="min-width: 0px;"
+            >
+              <button
+                aria-label="Close"
+                class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
+              >
+                <span
+                  class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
+                  style="mask-image: url('./images/icons/close.svg');"
+                />
+              </button>
+            </div>
+          </header>
+          <div
+            class="mm-box multichain-asset-picker__network-list"
+          >
+            <div
+              class="mm-box mm-box--display-flex mm-box--flex-direction-column mm-box--height-full"
+              style="grid-column-start: 1; grid-column-end: 3;"
+            />
+          </div>
+        </section>
+      </div>
+    </div>
+    <div
+      data-focus-guard="true"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+      tabindex="0"
+    />
+  </div>
+</body>
+`;
+
+exports[`AssetPickerModalNetwork should not show selected network when network prop is not passed in 1`] = `
+<body>
+  <div
+    id="popover-content"
+  />
+  <div />
+  <div
+    class="mm-modal multichain-asset-picker__network-modal"
+  >
+    <div
+      aria-hidden="true"
+      class="mm-box mm-modal-overlay mm-box--width-full mm-box--height-full mm-box--background-color-overlay-default"
+    />
+    <div
+      data-focus-guard="true"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+      tabindex="0"
+    />
+    <div
+      data-focus-lock-disabled="false"
+    >
+      <div
+        class="mm-box mm-modal-content mm-box--padding-top-4 mm-box--sm:padding-top-8 mm-box--md:padding-top-12 mm-box--padding-right-4 mm-box--padding-bottom-4 mm-box--sm:padding-bottom-8 mm-box--md:padding-bottom-12 mm-box--padding-left-4 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-flex-start mm-box--width-screen mm-box--height-screen"
+      >
+        <section
+          aria-modal="true"
+          class="mm-box mm-modal-content__dialog mm-modal-content__dialog--size-sm mm-box--padding-0 mm-box--padding-top-4 mm-box--padding-bottom-4 mm-box--display-flex mm-box--flex-direction-column mm-box--width-full mm-box--background-color-background-default mm-box--rounded-lg"
+          role="dialog"
+        >
+          <header
+            class="mm-box mm-header-base mm-modal-header mm-box--padding-right-4 mm-box--padding-bottom-4 mm-box--padding-left-4 mm-box--display-flex mm-box--justify-content-space-between"
+          >
+            <div
+              class="mm-box"
+              style="min-width: 0px;"
+            >
+              <button
+                aria-label="Back"
+                class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
+              >
+                <span
+                  class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
+                  style="mask-image: url('./images/icons/arrow-left.svg');"
+                />
+              </button>
+            </div>
+            <div
+              class="mm-box mm-box--width-full"
+            >
+              <h4
+                class="mm-box mm-text mm-text--heading-sm mm-text--text-align-center mm-box--color-text-default"
+              >
+                Select network
+              </h4>
+            </div>
+            <div
+              class="mm-box mm-box--display-flex mm-box--justify-content-flex-end"
+              style="min-width: 0px;"
+            >
+              <button
+                aria-label="Close"
+                class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
+              >
+                <span
+                  class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
+                  style="mask-image: url('./images/icons/close.svg');"
+                />
+              </button>
+            </div>
+          </header>
+          <div
+            class="mm-box multichain-asset-picker__network-list"
+          >
+            <div
+              class="mm-box mm-box--display-flex mm-box--flex-direction-column mm-box--height-full"
+              style="grid-column-start: 1; grid-column-end: 3;"
+            >
+              <div
+                class="mm-box multichain-network-list-item mm-box--padding-top-4 mm-box--padding-right-4 mm-box--padding-bottom-4 mm-box--padding-left-4 mm-box--display-flex mm-box--gap-4 mm-box--justify-content-space-between mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
+              >
+                <div
+                  class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-network mm-text--body-sm 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-background-default box--border-style-solid box--border-width-1"
+                >
+                  <img
+                    alt="Network name 3 logo"
+                    class="mm-avatar-network__network-image"
+                    src="./images/eth_logo.svg"
+                  />
+                </div>
+                <div
+                  class="mm-box mm-box--display-flex mm-box--flex-direction-column mm-box--justify-content-flex-start mm-box--align-items-flex-start mm-box--width-full"
+                  style="overflow: hidden;"
+                >
+                  <div
+                    class="mm-box mm-box--display-flex mm-box--align-items-center mm-box--width-full"
+                    data-testid="Network name 3"
+                  >
+                    <p
+                      class="mm-box mm-text mm-text--body-md mm-text--ellipsis mm-box--color-text-default mm-box--background-color-transparent"
+                      tabindex="0"
+                    >
+                      Network name 3
+                    </p>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="mm-box multichain-network-list-item mm-box--padding-top-4 mm-box--padding-right-4 mm-box--padding-bottom-4 mm-box--padding-left-4 mm-box--display-flex mm-box--gap-4 mm-box--justify-content-space-between mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
+              >
+                <div
+                  class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-network mm-text--body-sm 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-background-default box--border-style-solid box--border-width-1"
+                >
+                  <img
+                    alt="Network name 4 logo"
+                    class="mm-avatar-network__network-image"
+                    src="./images/optimism.svg"
+                  />
+                </div>
+                <div
+                  class="mm-box mm-box--display-flex mm-box--flex-direction-column mm-box--justify-content-flex-start mm-box--align-items-flex-start mm-box--width-full"
+                  style="overflow: hidden;"
+                >
+                  <div
+                    class="mm-box mm-box--display-flex mm-box--align-items-center mm-box--width-full"
+                    data-testid="Network name 4"
+                  >
+                    <p
+                      class="mm-box mm-text mm-text--body-md mm-text--ellipsis mm-box--color-text-default mm-box--background-color-transparent"
+                      tabindex="0"
+                    >
+                      Network name 4
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+    </div>
+    <div
+      data-focus-guard="true"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+      tabindex="0"
+    />
+  </div>
+</body>
+`;
+
+exports[`AssetPickerModalNetwork should use passed in network as default when network prop is passed in 1`] = `
+<body>
+  <div
+    id="popover-content"
+  />
+  <div />
+  <div
+    class="mm-modal multichain-asset-picker__network-modal"
+  >
+    <div
+      aria-hidden="true"
+      class="mm-box mm-modal-overlay mm-box--width-full mm-box--height-full mm-box--background-color-overlay-default"
+    />
+    <div
+      data-focus-guard="true"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+      tabindex="0"
+    />
+    <div
+      data-focus-lock-disabled="false"
+    >
+      <div
+        class="mm-box mm-modal-content mm-box--padding-top-4 mm-box--sm:padding-top-8 mm-box--md:padding-top-12 mm-box--padding-right-4 mm-box--padding-bottom-4 mm-box--sm:padding-bottom-8 mm-box--md:padding-bottom-12 mm-box--padding-left-4 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-flex-start mm-box--width-screen mm-box--height-screen"
+      >
+        <section
+          aria-modal="true"
+          class="mm-box mm-modal-content__dialog mm-modal-content__dialog--size-sm mm-box--padding-0 mm-box--padding-top-4 mm-box--padding-bottom-4 mm-box--display-flex mm-box--flex-direction-column mm-box--width-full mm-box--background-color-background-default mm-box--rounded-lg"
+          role="dialog"
+        >
+          <header
+            class="mm-box mm-header-base mm-modal-header mm-box--padding-right-4 mm-box--padding-bottom-4 mm-box--padding-left-4 mm-box--display-flex mm-box--justify-content-space-between"
+          >
+            <div
+              class="mm-box"
+              style="min-width: 0px;"
+            >
+              <button
+                aria-label="Back"
+                class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
+              >
+                <span
+                  class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
+                  style="mask-image: url('./images/icons/arrow-left.svg');"
+                />
+              </button>
+            </div>
+            <div
+              class="mm-box mm-box--width-full"
+            >
+              <h4
+                class="mm-box mm-text mm-text--heading-sm mm-text--text-align-center mm-box--color-text-default"
+              >
+                Select network
+              </h4>
+            </div>
+            <div
+              class="mm-box mm-box--display-flex mm-box--justify-content-flex-end"
+              style="min-width: 0px;"
+            >
+              <button
+                aria-label="Close"
+                class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
+              >
+                <span
+                  class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
+                  style="mask-image: url('./images/icons/close.svg');"
+                />
+              </button>
+            </div>
+          </header>
+          <div
+            class="mm-box multichain-asset-picker__network-list"
+          >
+            <div
+              class="mm-box mm-box--display-flex mm-box--flex-direction-column mm-box--height-full"
+              style="grid-column-start: 1; grid-column-end: 3;"
+            >
+              <div
+                class="mm-box multichain-network-list-item multichain-network-list-item--selected mm-box--padding-top-4 mm-box--padding-right-4 mm-box--padding-bottom-4 mm-box--padding-left-4 mm-box--display-flex mm-box--gap-4 mm-box--justify-content-space-between mm-box--align-items-center mm-box--width-full mm-box--background-color-primary-muted"
+              >
+                <div
+                  class="mm-box multichain-network-list-item__selected-indicator mm-box--background-color-primary-default mm-box--rounded-pill"
+                />
+                <div
+                  class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-network mm-text--body-sm 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-background-default box--border-style-solid box--border-width-1"
+                >
+                  <img
+                    alt="Network name 3 logo"
+                    class="mm-avatar-network__network-image"
+                    src="./images/eth_logo.svg"
+                  />
+                </div>
+                <div
+                  class="mm-box mm-box--display-flex mm-box--flex-direction-column mm-box--justify-content-flex-start mm-box--align-items-flex-start mm-box--width-full"
+                  style="overflow: hidden;"
+                >
+                  <div
+                    class="mm-box mm-box--display-flex mm-box--align-items-center mm-box--width-full"
+                    data-testid="Network name 3"
+                  >
+                    <p
+                      class="mm-box mm-text mm-text--body-md mm-text--ellipsis mm-box--color-text-default mm-box--background-color-transparent"
+                      tabindex="0"
+                    >
+                      Network name 3
+                    </p>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="mm-box multichain-network-list-item mm-box--padding-top-4 mm-box--padding-right-4 mm-box--padding-bottom-4 mm-box--padding-left-4 mm-box--display-flex mm-box--gap-4 mm-box--justify-content-space-between mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
+              >
+                <div
+                  class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-network mm-text--body-sm 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-background-default box--border-style-solid box--border-width-1"
+                >
+                  <img
+                    alt="Network name 4 logo"
+                    class="mm-avatar-network__network-image"
+                    src="./images/optimism.svg"
+                  />
+                </div>
+                <div
+                  class="mm-box mm-box--display-flex mm-box--flex-direction-column mm-box--justify-content-flex-start mm-box--align-items-flex-start mm-box--width-full"
+                  style="overflow: hidden;"
+                >
+                  <div
+                    class="mm-box mm-box--display-flex mm-box--align-items-center mm-box--width-full"
+                    data-testid="Network name 4"
+                  >
+                    <p
+                      class="mm-box mm-text mm-text--body-md mm-text--ellipsis mm-box--color-text-default mm-box--background-color-transparent"
+                      tabindex="0"
+                    >
+                      Network name 4
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+    </div>
+    <div
+      data-focus-guard="true"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+      tabindex="0"
+    />
+  </div>
+</body>
+`;
diff --git a/ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal-network.test.tsx b/ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal-network.test.tsx
new file mode 100644
index 000000000000..3fc1e8cf7952
--- /dev/null
+++ b/ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal-network.test.tsx
@@ -0,0 +1,132 @@
+import React from 'react';
+import configureStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import { screen, fireEvent } from '@testing-library/react';
+import { RpcEndpointType } from '@metamask/network-controller';
+import { renderWithProvider } from '../../../../../test/lib/render-helpers';
+import mockState from '../../../../../test/data/mock-send-state.json';
+import { AssetPickerModalNetwork } from './asset-picker-modal-network';
+
+const mockOnClose = jest.fn();
+const mockOnNetworkChange = jest.fn();
+const mockOnBack = jest.fn();
+
+describe('AssetPickerModalNetwork', () => {
+  const mockStore = configureStore([thunk]);
+  const store = mockStore(mockState);
+
+  const defaultProps = {
+    isOpen: true,
+    onClose: mockOnClose,
+    onBack: mockOnBack,
+    network: undefined,
+    networks: [],
+    onNetworkChange: mockOnNetworkChange,
+  };
+
+  const networkProps = {
+    network: {
+      chainId: '0x1',
+      nativeCurrency: 'ETH',
+      defaultBlockExplorerUrlIndex: 0,
+      blockExplorerUrls: ['https://explorerurl'],
+      defaultRpcEndpointIndex: 0,
+      rpcEndpoints: [
+        {
+          networkClientId: 'test1',
+          url: 'https://rpcurl',
+          type: RpcEndpointType.Custom,
+        },
+      ],
+      name: 'network',
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } as any,
+    networks: [
+      {
+        chainId: '0x1',
+        nativeCurrency: 'ETH',
+        defaultBlockExplorerUrlIndex: 0,
+        blockExplorerUrls: ['https://explorerurl'],
+        defaultRpcEndpointIndex: 0,
+        rpcEndpoints: [
+          {
+            networkClientId: 'test1',
+            url: 'https://rpcurl',
+            type: RpcEndpointType.Custom,
+          },
+        ],
+        name: 'Network name 3',
+      },
+      {
+        chainId: '0xa',
+        nativeCurrency: 'ETH',
+        defaultBlockExplorerUrlIndex: 0,
+        blockExplorerUrls: ['https://explorerurl'],
+        defaultRpcEndpointIndex: 0,
+        rpcEndpoints: [
+          {
+            networkClientId: 'test2',
+            url: 'https://rpcurl',
+            type: RpcEndpointType.Custom,
+          },
+        ],
+        name: 'Network name 4',
+      },
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ] as any,
+  };
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders modal with no network list by default', () => {
+    const { baseElement } = renderWithProvider(
+      <AssetPickerModalNetwork {...defaultProps} />,
+      store,
+    );
+
+    expect(baseElement).toMatchSnapshot();
+  });
+
+  it('should not show selected network when network prop is not passed in', () => {
+    const { baseElement } = renderWithProvider(
+      <AssetPickerModalNetwork
+        {...defaultProps}
+        networks={networkProps.networks}
+      />,
+      store,
+    );
+    expect(baseElement).toMatchSnapshot();
+  });
+
+  it('should use passed in network as default when network prop is passed in', () => {
+    const { baseElement } = renderWithProvider(
+      <AssetPickerModalNetwork {...defaultProps} {...networkProps} />,
+      store,
+    );
+
+    expect(baseElement).toMatchSnapshot();
+  });
+
+  it('should call onClose and onBack when header buttons are clicked', () => {
+    renderWithProvider(<AssetPickerModalNetwork {...defaultProps} />, store);
+
+    fireEvent.click(screen.getByLabelText('Close'));
+    expect(mockOnClose).toHaveBeenCalledTimes(1);
+
+    fireEvent.click(screen.getByLabelText('Back'));
+    expect(mockOnBack).toHaveBeenCalledTimes(1);
+  });
+
+  it('should call onBack and onClickHandler when network is selected', () => {
+    renderWithProvider(
+      <AssetPickerModalNetwork {...defaultProps} {...networkProps} />,
+      store,
+    );
+
+    fireEvent.click(screen.getByText('Network name 3'));
+    expect(mockOnBack).toHaveBeenCalledTimes(1);
+    expect(mockOnNetworkChange).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal-network.tsx b/ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal-network.tsx
new file mode 100644
index 000000000000..d674fbef528e
--- /dev/null
+++ b/ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal-network.tsx
@@ -0,0 +1,111 @@
+import React from 'react';
+
+import { useSelector } from 'react-redux';
+import { NetworkConfiguration } from '@metamask/network-controller';
+import {
+  Display,
+  FlexDirection,
+  BlockSize,
+} from '../../../../helpers/constants/design-system';
+import {
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  Modal,
+  Box,
+} from '../../../component-library';
+import { CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP } from '../../../../../shared/constants/network';
+///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
+import { useI18nContext } from '../../../../hooks/useI18nContext';
+///: END:ONLY_INCLUDE_IF
+import { NetworkListItem } from '../../network-list-item';
+import { getNetworkConfigurationsByChainId } from '../../../../selectors';
+import { getProviderConfig } from '../../../../ducks/metamask/metamask';
+
+/**
+ * AssetPickerModalNetwork component displays a modal for selecting a network in the asset picker.
+ *
+ * @param props
+ * @param props.isOpen - Determines whether the modal is open or not.
+ * @param props.network - The currently selected network, not necessarily the active wallet network.
+ * @param props.networks - The list of selectable networks.
+ * @param props.onNetworkChange - The callback function to handle network change.
+ * @param props.onClose - The callback function to handle modal close.
+ * @param props.onBack - The callback function to handle going back in the modal.
+ * @returns A modal with a list of selectable networks.
+ */
+export const AssetPickerModalNetwork = ({
+  isOpen,
+  onClose,
+  onBack,
+  network,
+  networks,
+  onNetworkChange,
+}: {
+  isOpen: boolean;
+  network?: NetworkConfiguration;
+  networks?: NetworkConfiguration[];
+  onNetworkChange: (network: NetworkConfiguration) => void;
+  onClose: () => void;
+  onBack: () => void;
+}) => {
+  ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
+  const t = useI18nContext();
+  ///: END:ONLY_INCLUDE_IF
+
+  const currentNetwork = useSelector(getProviderConfig);
+  const allNetworks = useSelector(getNetworkConfigurationsByChainId);
+
+  const selectedNetwork =
+    network ?? (currentNetwork?.chainId && allNetworks[currentNetwork.chainId]);
+
+  const networksList: NetworkConfiguration[] =
+    networks ?? Object.values(allNetworks) ?? [];
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      className="multichain-asset-picker__network-modal"
+    >
+      <ModalOverlay />
+      <ModalContent modalDialogProps={{ padding: 0 }}>
+        <ModalHeader onBack={onBack} onClose={onClose}>
+          {t('bridgeSelectNetwork')}
+        </ModalHeader>
+        <Box className="multichain-asset-picker__network-list">
+          <Box
+            style={{
+              gridColumnStart: 1,
+              gridColumnEnd: 3,
+            }}
+            display={Display.Flex}
+            flexDirection={FlexDirection.Column}
+            height={BlockSize.Full}
+          >
+            {networksList.map((networkConfig) => {
+              const { name, chainId } = networkConfig;
+              return (
+                <NetworkListItem
+                  key={chainId}
+                  name={name}
+                  selected={selectedNetwork?.chainId === chainId}
+                  onClick={() => {
+                    onNetworkChange(networkConfig);
+                    onBack();
+                  }}
+                  iconSrc={
+                    CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP[
+                      chainId as keyof typeof CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP
+                    ]
+                  }
+                  focus={false}
+                />
+              );
+            })}
+          </Box>
+        </Box>
+      </ModalContent>
+    </Modal>
+  );
+};
diff --git a/ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal.test.tsx b/ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal.test.tsx
index 15cc339775c9..566783abed11 100644
--- a/ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal.test.tsx
+++ b/ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal.test.tsx
@@ -4,6 +4,7 @@ import configureStore from 'redux-mock-store';
 import { useSelector } from 'react-redux';
 import thunk from 'redux-thunk';
 import sinon from 'sinon';
+import { RpcEndpointType } from '@metamask/network-controller';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import { useNftsCollections } from '../../../../hooks/useNftsCollections';
 import { useTokenTracker } from '../../../../hooks/useTokenTracker';
@@ -69,6 +70,7 @@ describe('AssetPickerModal', () => {
 
   const defaultProps = {
     header: 'sendSelectReceiveAsset',
+    onNetworkPickerClick: jest.fn(),
     isOpen: true,
     onClose: onCloseMock,
     asset: {
@@ -291,4 +293,67 @@ describe('AssetPickerModal', () => {
       }),
     ).toBe(true);
   });
+
+  it('should render network picker when onNetworkPickerClick prop is defined', () => {
+    const { getByText, getAllByRole } = renderWithProvider(
+      <AssetPickerModal
+        {...defaultProps}
+        header="selectNetworkHeader"
+        network={{
+          nativeCurrency: 'ETH',
+          chainId: '0x1',
+          defaultBlockExplorerUrlIndex: 0,
+          blockExplorerUrls: ['https://explorerurl'],
+          defaultRpcEndpointIndex: 0,
+          rpcEndpoints: [
+            {
+              networkClientId: 'test1',
+              url: 'https://rpcurl',
+              type: RpcEndpointType.Custom,
+            },
+          ],
+          name: 'Network name',
+        }}
+      />,
+      store,
+    );
+
+    const modalTitle = getByText('selectNetworkHeader');
+    expect(modalTitle).toBeInTheDocument();
+
+    expect(getAllByRole('img')).toHaveLength(2);
+    const modalContent = getByText('Network name');
+    expect(modalContent).toBeInTheDocument();
+  });
+
+  it('should not render network picker when onNetworkPickerClick prop is not defined', () => {
+    const { getByText, getAllByRole } = renderWithProvider(
+      <AssetPickerModal
+        {...defaultProps}
+        onNetworkPickerClick={undefined}
+        header="selectNetworkHeader"
+        network={{
+          nativeCurrency: 'ETH',
+          chainId: '0x1',
+          defaultBlockExplorerUrlIndex: 0,
+          blockExplorerUrls: ['https://explorerurl'],
+          defaultRpcEndpointIndex: 0,
+          rpcEndpoints: [
+            {
+              networkClientId: 'test1',
+              url: 'https://rpcurl',
+              type: RpcEndpointType.Custom,
+            },
+          ],
+          name: 'Network name',
+        }}
+      />,
+      store,
+    );
+
+    const modalTitle = getByText('selectNetworkHeader');
+    expect(modalTitle).toBeInTheDocument();
+
+    expect(getAllByRole('img')).toHaveLength(1);
+  });
 });
diff --git a/ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal.tsx b/ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal.tsx
index 0d9e01627878..d9a1a3a08588 100644
--- a/ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal.tsx
+++ b/ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal.tsx
@@ -17,6 +17,7 @@ import {
   AvatarTokenSize,
   AvatarToken,
   Text,
+  PickerNetwork,
 } from '../../../component-library';
 import {
   BorderRadius,
@@ -47,9 +48,9 @@ import {
 import { useTokenTracker } from '../../../../hooks/useTokenTracker';
 import { getTopAssets } from '../../../../ducks/swaps/swaps';
 import { getRenderableTokenData } from '../../../../hooks/useTokensToSearch';
-import { useEqualityCheck } from '../../../../hooks/useEqualityCheck';
 import { getSwapsBlockedTokens } from '../../../../ducks/send';
 import { isEqualCaseInsensitive } from '../../../../../shared/modules/string-utils';
+import { CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP } from '../../../../../shared/constants/network';
 import {
   ERC20Asset,
   NativeAsset,
@@ -61,6 +62,7 @@ import { AssetPickerModalTabs, TabName } from './asset-picker-modal-tabs';
 import { AssetPickerModalNftTab } from './asset-picker-modal-nft-tab';
 import AssetList from './AssetList';
 import { Search } from './asset-picker-modal-search';
+import { AssetPickerModalNetwork } from './asset-picker-modal-network';
 
 type AssetPickerModalProps = {
   header: JSX.Element | string | null;
@@ -74,10 +76,21 @@ type AssetPickerModalProps = {
    * Sending asset for UI treatments; only for dest component
    */
   sendingAsset?: { image: string; symbol: string } | undefined;
+  onNetworkPickerClick?: () => void;
+  /**
+   * Generator function that returns a list of tokens filtered by a predicate and sorted
+   * by a custom order.
+   */
+  customTokenListGenerator?: (
+    filterPredicate: (symbol: string, address?: string) => boolean,
+  ) => Generator<
+    AssetWithDisplayData<NativeAsset> | AssetWithDisplayData<ERC20Asset>
+  >;
 } & Pick<
   React.ComponentProps<typeof AssetPickerModalTabs>,
   'visibleTabs' | 'defaultActiveTabKey'
->;
+> &
+  Pick<React.ComponentProps<typeof AssetPickerModalNetwork>, 'network'>;
 
 const MAX_UNOWNED_TOKENS_RENDERED = 30;
 
@@ -88,6 +101,9 @@ export function AssetPickerModal({
   asset,
   onAssetChange,
   sendingAsset,
+  network,
+  onNetworkPickerClick,
+  customTokenListGenerator,
   ...tabProps
 }: AssetPickerModalProps) {
   const t = useI18nContext();
@@ -132,13 +148,6 @@ export function AssetPickerModal({
   const tokenList = useSelector(getTokenList) as TokenListMap;
   const topTokens = useSelector(getTopAssets, isEqual);
 
-  const usersTokens = uniqBy<TokenWithBalance>(
-    [...tokensWithBalances, ...tokens],
-    'address',
-  );
-
-  const memoizedUsersTokens: TokenWithBalance[] = useEqualityCheck(usersTokens);
-
   const getIsDisabled = useCallback(
     ({
       address,
@@ -157,40 +166,49 @@ export function AssetPickerModal({
     [sendingAsset?.symbol, memoizedSwapsBlockedTokens],
   );
 
-  const filteredTokenList = useMemo(() => {
-    const nativeToken: AssetWithDisplayData<NativeAsset> = {
-      address: null,
-      symbol: nativeCurrency,
-      decimals: 18,
-      image: nativeCurrencyImage,
-      balance: balanceValue,
-      string: undefined,
-      type: AssetType.native,
-    };
-
-    const filteredTokens: AssetWithDisplayData<ERC20Asset | NativeAsset>[] = [];
-    // undefined would be the native token address
-    const filteredTokensAddresses = new Set<string | undefined>();
-
-    function* tokenGenerator(): Generator<
+  const memoizedUsersTokens: TokenWithBalance[] = useMemo(() => {
+    return uniqBy<TokenWithBalance>(
+      [...tokensWithBalances, ...tokens],
+      'address',
+    );
+  }, [tokensWithBalances, tokens]);
+
+  const tokenListGenerator = useCallback(
+    function* (
+      shouldAddToken: (symbol: string, address?: null | string) => boolean,
+    ): Generator<
       | AssetWithDisplayData<NativeAsset>
       | ((Token | TokenListToken) & {
           balance?: string;
           string?: string;
         })
     > {
-      yield nativeToken;
+      const nativeToken: AssetWithDisplayData<NativeAsset> = {
+        address: null,
+        symbol: nativeCurrency,
+        decimals: 18,
+        image: nativeCurrencyImage,
+        balance: balanceValue,
+        string: undefined,
+        type: AssetType.native,
+      };
+
+      if (shouldAddToken(nativeToken.symbol, nativeToken.address)) {
+        yield nativeToken;
+      }
 
       const blockedTokens = [];
 
       for (const token of memoizedUsersTokens) {
-        yield token;
+        if (shouldAddToken(token.symbol, token.address)) {
+          yield token;
+        }
       }
 
       // topTokens should already be sorted by popularity
       for (const address of Object.keys(topTokens)) {
         const token = tokenList?.[address];
-        if (token) {
+        if (token && shouldAddToken(token.symbol, token.address)) {
           if (getIsDisabled(token)) {
             blockedTokens.push(token);
             continue;
@@ -201,37 +219,68 @@ export function AssetPickerModal({
       }
 
       for (const token of Object.values(tokenList)) {
-        yield token;
+        if (shouldAddToken(token.symbol, token.address)) {
+          yield token;
+        }
       }
 
       for (const token of blockedTokens) {
         yield token;
       }
-    }
+    },
+    [
+      nativeCurrency,
+      nativeCurrencyImage,
+      balanceValue,
+      memoizedUsersTokens,
+      topTokens,
+      tokenList,
+      getIsDisabled,
+    ],
+  );
 
-    for (const token of tokenGenerator()) {
-      if (
-        token.symbol?.toLowerCase().includes(searchQuery.toLowerCase()) &&
-        !filteredTokensAddresses.has(token.address?.toLowerCase())
-      ) {
-        filteredTokensAddresses.add(token.address?.toLowerCase());
-        filteredTokens.push(
-          getRenderableTokenData(
-            token.address
-              ? ({
-                  ...token,
-                  ...tokenList[token.address.toLowerCase()],
-                  type: AssetType.token,
-                } as AssetWithDisplayData<ERC20Asset>)
-              : token,
-            tokenConversionRates,
-            conversionRate,
-            currentCurrency,
-            chainId,
-            tokenList,
-          ),
-        );
-      }
+  const filteredTokenList = useMemo(() => {
+    const filteredTokens: (
+      | AssetWithDisplayData<ERC20Asset>
+      | AssetWithDisplayData<NativeAsset>
+    )[] = [];
+    // undefined would be the native token address
+    const filteredTokensAddresses = new Set<string | undefined>();
+
+    // Default filter predicate for whether a token should be included in displayed list
+    const shouldAddToken = (symbol: string, address?: string | null) => {
+      const trimmedSearchQuery = searchQuery.trim();
+      return (
+        (!trimmedSearchQuery ||
+          symbol?.toLowerCase().includes(trimmedSearchQuery.toLowerCase())) &&
+        !filteredTokensAddresses.has(address?.toLowerCase())
+      );
+    };
+
+    // If filteredTokensGenerator is passed in, use it to generate the filtered tokens
+    // Otherwise use the default tokenGenerator
+    for (const token of (customTokenListGenerator ?? tokenListGenerator)(
+      shouldAddToken,
+    )) {
+      filteredTokensAddresses.add(token.address?.toLowerCase());
+      filteredTokens.push(
+        customTokenListGenerator
+          ? token
+          : getRenderableTokenData(
+              token.address
+                ? ({
+                    ...token,
+                    ...tokenList[token.address.toLowerCase()],
+                    type: AssetType.token,
+                  } as AssetWithDisplayData<ERC20Asset>)
+                : token,
+              tokenConversionRates,
+              conversionRate,
+              currentCurrency,
+              chainId,
+              tokenList,
+            ),
+      );
 
       if (filteredTokens.length > MAX_UNOWNED_TOKENS_RENDERED) {
         break;
@@ -240,22 +289,13 @@ export function AssetPickerModal({
 
     return filteredTokens;
   }, [
-    memoizedUsersTokens,
-    topTokens,
-    searchQuery,
-    nativeCurrency,
-    nativeCurrencyImage,
-    balanceValue,
-    memoizedUsersTokens,
-    topTokens,
-    tokenList,
-    getIsDisabled,
     searchQuery,
     tokenConversionRates,
     conversionRate,
     currentCurrency,
     chainId,
-    tokenList,
+    tokenListGenerator,
+    customTokenListGenerator,
   ]);
 
   return (
@@ -289,6 +329,21 @@ export function AssetPickerModal({
             </Text>
           </Box>
         )}
+        {onNetworkPickerClick && (
+          <Box className="network-picker">
+            <PickerNetwork
+              label={network?.name ?? 'Select network'}
+              src={
+                network?.chainId &&
+                CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP[
+                  network.chainId as keyof typeof CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP
+                ]
+              }
+              onClick={onNetworkPickerClick}
+              data-testid="multichain-asset-picker__network"
+            />
+          </Box>
+        )}
         <Box className="modal-tab__wrapper">
           <AssetPickerModalTabs {...tabProps}>
             <React.Fragment key={TabName.TOKENS}>
diff --git a/ui/components/multichain/asset-picker-amount/asset-picker-modal/index.scss b/ui/components/multichain/asset-picker-amount/asset-picker-modal/index.scss
index bf231003a671..be1e27dc1416 100644
--- a/ui/components/multichain/asset-picker-amount/asset-picker-modal/index.scss
+++ b/ui/components/multichain/asset-picker-amount/asset-picker-modal/index.scss
@@ -1,5 +1,13 @@
 @use "design-system";
 
+.multichain-asset-picker__network-modal {
+  overflow-y: auto;
+
+  .mm-modal-content__dialog {
+    overflow-y: scroll;
+  }
+}
+
 .asset-picker-modal {
   $self: &;
 
@@ -56,6 +64,17 @@
     max-height: 100%;
   }
 
+  .network-picker {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-top: 4px;
+
+    button: {
+      background: var(--color-background-alternative);
+    }
+  }
+
   .modal-tab {
     &__main-view {
       max-height: 100%;
diff --git a/ui/components/multichain/asset-picker-amount/asset-picker/__snapshots__/asset-picker.test.tsx.snap b/ui/components/multichain/asset-picker-amount/asset-picker/__snapshots__/asset-picker.test.tsx.snap
index d2748ce758bf..42c7b204d708 100644
--- a/ui/components/multichain/asset-picker-amount/asset-picker/__snapshots__/asset-picker.test.tsx.snap
+++ b/ui/components/multichain/asset-picker-amount/asset-picker/__snapshots__/asset-picker.test.tsx.snap
@@ -131,3 +131,75 @@ exports[`AssetPicker render if disabled 1`] = `
   </button>
 </div>
 `;
+
+exports[`AssetPicker should render network picker when networks prop is defined 1`] = `
+<DocumentFragment>
+  <button
+    class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-base--disabled asset-picker mm-text--body-md-medium mm-box--padding-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--color-text-default mm-box--background-color-transparent mm-box--rounded-pill"
+    data-testid="asset-picker-button"
+    disabled=""
+    title="[swapTokenNotAvailable]"
+  >
+    <span
+      class="mm-box mm-text mm-text--inherit mm-box--color-text-default"
+    >
+      <div
+        class="mm-box mm-box--display-flex mm-box--gap-3 mm-box--align-items-center"
+      >
+        <div
+          class="mm-box mm-box--display-flex"
+        >
+          <div
+            class="mm-box mm-badge-wrapper mm-box--display-inline-block"
+          >
+            <div
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-text--body-sm 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"
+            >
+              <img
+                alt="NATIVE TICKER logo"
+                class="mm-avatar-token__token-image"
+                src="./images/eth_logo.svg"
+              />
+            </div>
+            <div
+              class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right"
+            >
+              <div
+                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-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-border-muted box--border-style-solid box--border-width-1"
+              >
+                <img
+                  alt="network logo"
+                  class="mm-avatar-network__network-image"
+                  src="./images/eth_logo.svg"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="mm-box"
+        >
+          <div
+            aria-describedby="tippy-tooltip-4"
+            class=""
+            data-original-title="NATIVE TICKER"
+            data-tooltipped=""
+            style="display: inline;"
+            tabindex="0"
+          >
+            <p
+              class="mm-box mm-text asset-picker__symbol mm-text--body-md mm-box--color-text-default"
+            >
+              NATIVE...
+            </p>
+          </div>
+        </div>
+      </div>
+    </span>
+    <span
+      class="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-start-0 mm-box--display-none mm-box--color-icon-default"
+      style="mask-image: url('./images/icons/arrow-down.svg');"
+    />
+  </button>
+</DocumentFragment>
+`;
diff --git a/ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.stories.tsx b/ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.stories.tsx
index 753ee2644f5a..0572e2d237c2 100644
--- a/ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.stories.tsx
+++ b/ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.stories.tsx
@@ -5,8 +5,14 @@ import mockState from '../../../../../test/data/mock-state.json';
 import { AssetType } from '../../../../../shared/constants/transaction';
 import { AssetPicker } from './asset-picker';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
-import { CHAIN_ID_TOKEN_IMAGE_MAP } from '../../../../../shared/constants/network';
+import { TabName } from '../asset-picker-modal/asset-picker-modal-tabs';
+import {
+  CHAIN_ID_TOKEN_IMAGE_MAP,
+  CHAIN_IDS,
+} from '../../../../../shared/constants/network';
 import { ERC20Asset } from '../asset-picker-modal/types';
+import { mockNetworkState } from '../../../../../test/stub/networks';
+import { RpcEndpointType } from '@metamask/network-controller';
 
 const storybook = {
   title: 'Components/Multichain/AssetPicker',
@@ -61,7 +67,7 @@ export const SendDestStory = () => {
         type: AssetType.native,
       }}
       sendingAsset={{
-        image: 'token image',
+        image: CHAIN_ID_TOKEN_IMAGE_MAP['0x1'],
         symbol: 'ETH',
       }}
     />
@@ -72,12 +78,11 @@ function store() {
   const defaultMockState = { ...mockState };
   defaultMockState.metamask = {
     ...defaultMockState.metamask,
-    providerConfig: {
-      ...defaultMockState.metamask.providerConfig,
-      chainId: '0x1',
-      ticker: 'ETH',
-      nickname: 'Ethereum Mainnet',
-    },
+    ...(mockNetworkState(
+      { chainId: CHAIN_IDS.MAINNET },
+      { chainId: CHAIN_IDS.LINEA_MAINNET },
+      { chainId: CHAIN_IDS.GOERLI },
+    ) as any),
   };
   return configureStore(defaultMockState);
 }
@@ -88,4 +93,74 @@ SendDestStory.decorators = [
 
 SendDestStory.storyName = 'With Sending Asset';
 
+export const NetworksStory = ({ isOpen }: { isOpen: boolean }) => {
+  const t = useI18nContext();
+  return (
+    <AssetPicker
+      header={'Bridge from'}
+      onAssetChange={() => ({})}
+      {...props}
+      asset={{
+        symbol: 'ETH',
+        image: CHAIN_ID_TOKEN_IMAGE_MAP['0x1'],
+        type: AssetType.native,
+      }}
+      networkProps={{
+        network: {
+          chainId: '0x1',
+          name: 'Mainnet',
+          blockExplorerUrls: [],
+          defaultRpcEndpointIndex: 0,
+          rpcEndpoints: [
+            {
+              networkClientId: 'test1',
+              url: 'https://mainnet.infura.io/v3/',
+              type: RpcEndpointType.Custom,
+            },
+          ],
+          nativeCurrency: 'ETH',
+        },
+        networks: [
+          {
+            chainId: '0x1',
+            name: 'Mainnet',
+            blockExplorerUrls: [],
+            defaultRpcEndpointIndex: 0,
+            rpcEndpoints: [
+              {
+                networkClientId: 'test1',
+                url: 'https://mainnet.infura.io/v3/',
+                type: RpcEndpointType.Custom,
+              },
+            ],
+            nativeCurrency: 'ETH',
+          },
+          {
+            chainId: '0x10',
+            name: 'Optimism',
+            blockExplorerUrls: [],
+            defaultRpcEndpointIndex: 0,
+            rpcEndpoints: [
+              {
+                networkClientId: 'test2',
+                url: 'https://optimism.infura.io/v3/',
+                type: RpcEndpointType.Custom,
+              },
+            ],
+            nativeCurrency: 'ETH',
+          },
+        ],
+        onNetworkChange: () => ({}),
+      }}
+      visibleTabs={[TabName.TOKENS]}
+    />
+  );
+};
+
+NetworksStory.decorators = [
+  (story) => <Provider store={store()}>{story()}</Provider>,
+];
+
+NetworksStory.storyName = 'With Network Picker';
+
 export default storybook;
diff --git a/ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.test.tsx b/ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.test.tsx
index 262016ce4e69..5481a2b0c5de 100644
--- a/ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.test.tsx
+++ b/ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.test.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { Provider } from 'react-redux';
 import { Hex } from '@metamask/utils';
+import { RpcEndpointType } from '@metamask/network-controller';
 import { AssetType } from '../../../../../shared/constants/transaction';
 import mockSendState from '../../../../../test/data/mock-send-state.json';
 import configureStore from '../../../../store/store';
@@ -113,6 +114,10 @@ describe('AssetPicker', () => {
     const img = getByAltText('Ethereum Mainnet logo');
     expect(img).toBeInTheDocument();
     expect(img).toHaveAttribute('src', './images/eth_logo.svg');
+    expect(getByAltText('NATIVE logo')).toHaveAttribute(
+      'src',
+      CHAIN_ID_TOKEN_IMAGE_MAP['0x1'],
+    );
   });
 
   it('native: renders overflowing symbol and image', () => {
@@ -136,6 +141,10 @@ describe('AssetPicker', () => {
     const img = getByAltText('Ethereum Mainnet logo');
     expect(img).toBeInTheDocument();
     expect(img).toHaveAttribute('src', './images/eth_logo.svg');
+    expect(getByAltText('NATIVE TICKER logo')).toHaveAttribute(
+      'src',
+      CHAIN_ID_TOKEN_IMAGE_MAP['0x1'],
+    );
   });
 
   it('token: renders symbol and image', () => {
@@ -160,6 +169,10 @@ describe('AssetPicker', () => {
     const img = getByAltText('symbol logo');
     expect(img).toBeInTheDocument();
     expect(img).toHaveAttribute('src', 'token icon url');
+    expect(getByAltText('symbol logo')).toHaveAttribute(
+      'src',
+      'token icon url',
+    );
   });
 
   it('token: renders symbol and image overflowing', () => {
@@ -172,11 +185,7 @@ describe('AssetPicker', () => {
     const mockAssetChange = jest.fn();
 
     const { getByText, getByAltText } = render(
-      <Provider
-        store={store("SHOULDN'T MATTER", {
-          'token address': { iconUrl: 'token icon url' },
-        })}
-      >
+      <Provider store={store("SHOULDN'T MATTER")}>
         <AssetPicker
           header={'testHeader'}
           asset={asset}
@@ -188,6 +197,10 @@ describe('AssetPicker', () => {
     const img = getByAltText('symbol overflow logo');
     expect(img).toBeInTheDocument();
     expect(img).toHaveAttribute('src', 'token icon url');
+    expect(getByAltText('symbol overflow logo')).toHaveAttribute(
+      'src',
+      'token icon url',
+    );
   });
 
   it('token: renders symbol and image falls back', () => {
@@ -284,4 +297,77 @@ describe('AssetPicker', () => {
 
     expect(container).toMatchSnapshot();
   });
+
+  it('should render network picker when networks prop is defined', () => {
+    const asset = {
+      type: AssetType.native,
+      image: CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP['0x1'],
+      symbol: NATIVE_TICKER,
+    } as NativeAsset;
+
+    const mockAssetChange = jest.fn();
+
+    const { asFragment } = render(
+      <Provider store={store(NATIVE_TICKER)}>
+        <AssetPicker
+          header={'testHeader'}
+          asset={asset}
+          onAssetChange={() => mockAssetChange()}
+          isDisabled
+          networkProps={{
+            network: {
+              chainId: '0x1',
+              nativeCurrency: 'ETH',
+              defaultBlockExplorerUrlIndex: 0,
+              blockExplorerUrls: ['https://explorerurl'],
+              defaultRpcEndpointIndex: 0,
+              rpcEndpoints: [
+                {
+                  networkClientId: 'test1',
+                  url: 'https://rpcurl',
+                  type: RpcEndpointType.Custom,
+                },
+              ],
+              name: 'network',
+            },
+            networks: [
+              {
+                chainId: '0x1',
+                nativeCurrency: 'ETH',
+                defaultBlockExplorerUrlIndex: 0,
+                blockExplorerUrls: ['https://explorerurl'],
+                defaultRpcEndpointIndex: 0,
+                rpcEndpoints: [
+                  {
+                    networkClientId: 'test1',
+                    url: 'https://rpcurl',
+                    type: RpcEndpointType.Custom,
+                  },
+                ],
+                name: 'Network name 3',
+              },
+              {
+                chainId: '0xa',
+                nativeCurrency: 'ETH',
+                defaultBlockExplorerUrlIndex: 0,
+                blockExplorerUrls: ['https://explorerurl'],
+                defaultRpcEndpointIndex: 0,
+                rpcEndpoints: [
+                  {
+                    networkClientId: 'test2',
+                    url: 'https://rpcurl',
+                    type: RpcEndpointType.Custom,
+                  },
+                ],
+                name: 'Network name 4',
+              },
+            ],
+            onNetworkChange: jest.fn(),
+          }}
+        />
+      </Provider>,
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });
diff --git a/ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.tsx b/ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.tsx
index 3b1526e4af62..e2965687fed5 100644
--- a/ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.tsx
+++ b/ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.tsx
@@ -26,7 +26,7 @@ import { AssetType } from '../../../../../shared/constants/transaction';
 import { AssetPickerModal } from '../asset-picker-modal/asset-picker-modal';
 import {
   getCurrentNetwork,
-  getTestNetworkBackgroundColor,
+  getNetworkConfigurationsByChainId,
 } from '../../../../selectors';
 import Tooltip from '../../../ui/tooltip';
 import { LARGE_SYMBOL_LENGTH } from '../constants';
@@ -41,6 +41,12 @@ import {
   NFT,
 } from '../asset-picker-modal/types';
 import { TabName } from '../asset-picker-modal/asset-picker-modal-tabs';
+import { AssetPickerModalNetwork } from '../asset-picker-modal/asset-picker-modal-network';
+import {
+  CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP,
+  GOERLI_DISPLAY_NAME,
+  SEPOLIA_DISPLAY_NAME,
+} from '../../../../../shared/constants/network';
 
 const ELLIPSIFY_LENGTH = 13; // 6 (start) + 4 (end) + 3 (...)
 
@@ -60,9 +66,13 @@ export type AssetPickerProps = {
   ) => void;
   onClick?: () => void;
   isDisabled?: boolean;
+  networkProps?: Pick<
+    React.ComponentProps<typeof AssetPickerModalNetwork>,
+    'network' | 'networks' | 'onNetworkChange'
+  >;
 } & Pick<
   React.ComponentProps<typeof AssetPickerModal>,
-  'visibleTabs' | 'header' | 'sendingAsset'
+  'visibleTabs' | 'header' | 'sendingAsset' | 'customTokenListGenerator'
 >;
 
 // A component that lets the user pick from a list of assets.
@@ -70,10 +80,12 @@ export function AssetPicker({
   header,
   asset,
   onAssetChange,
+  networkProps,
   sendingAsset,
   onClick,
   isDisabled = false,
   visibleTabs,
+  customTokenListGenerator,
 }: AssetPickerProps) {
   ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
   const t = useI18nContext();
@@ -95,7 +107,10 @@ export function AssetPicker({
 
   // Badge details
   const currentNetwork = useSelector(getCurrentNetwork);
-  const testNetworkBackgroundColor = useSelector(getTestNetworkBackgroundColor);
+  const allNetworks = useSelector(getNetworkConfigurationsByChainId);
+  const selectedNetwork =
+    networkProps?.network ??
+    (currentNetwork?.chainId && allNetworks[currentNetwork.chainId]);
 
   const handleAssetPickerTitle = (): string | undefined => {
     ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
@@ -107,8 +122,23 @@ export function AssetPicker({
     return undefined;
   };
 
+  const [isSelectingNetwork, setIsSelectingNetwork] = useState(false);
+
   return (
     <>
+      {networkProps && (
+        <AssetPickerModalNetwork
+          isOpen={isSelectingNetwork}
+          onClose={() => {
+            setIsSelectingNetwork(false);
+          }}
+          onBack={() => {
+            setIsSelectingNetwork(false);
+            setShowAssetPickerModal(true);
+          }}
+          {...networkProps}
+        />
+      )}
       {/* This is the Modal that ask to choose token to send */}
       <AssetPickerModal
         visibleTabs={visibleTabs}
@@ -125,9 +155,19 @@ export function AssetPicker({
           setShowAssetPickerModal(false);
         }}
         sendingAsset={sendingAsset}
+        network={networkProps?.network ? networkProps.network : undefined}
+        onNetworkPickerClick={
+          networkProps
+            ? () => {
+                setShowAssetPickerModal(false);
+                setIsSelectingNetwork(true);
+              }
+            : undefined
+        }
         defaultActiveTabKey={
           asset?.type === AssetType.NFT ? TabName.NFTS : TabName.TOKENS
         }
+        customTokenListGenerator={customTokenListGenerator}
       />
 
       <ButtonBase
@@ -143,7 +183,11 @@ export function AssetPicker({
         justifyContent={isNFT ? JustifyContent.spaceBetween : undefined}
         backgroundColor={BackgroundColor.transparent}
         onClick={() => {
-          setShowAssetPickerModal(true);
+          if (networkProps && !networkProps.network) {
+            setIsSelectingNetwork(true);
+          } else {
+            setShowAssetPickerModal(true);
+          }
           onClick?.();
         }}
         endIconName={IconName.ArrowDown}
@@ -154,59 +198,81 @@ export function AssetPicker({
         }}
         title={handleAssetPickerTitle()}
       >
-        <Box display={Display.Flex} alignItems={AlignItems.center} gap={3}>
-          <Box display={Display.Flex}>
-            <BadgeWrapper
-              badge={
-                <AvatarNetwork
-                  size={AvatarNetworkSize.Xs}
-                  name={currentNetwork?.nickname ?? ''}
-                  src={currentNetwork?.rpcPrefs?.imageUrl}
-                  backgroundColor={testNetworkBackgroundColor}
-                  borderColor={
-                    primaryTokenImage
-                      ? BorderColor.borderMuted
-                      : BorderColor.borderDefault
-                  }
+        {asset ? (
+          <Box display={Display.Flex} alignItems={AlignItems.center} gap={3}>
+            <Box display={Display.Flex}>
+              <BadgeWrapper
+                badge={
+                  <AvatarNetwork
+                    size={AvatarNetworkSize.Xs}
+                    name={selectedNetwork?.name ?? ''}
+                    src={
+                      selectedNetwork?.chainId &&
+                      CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP[
+                        selectedNetwork.chainId as keyof typeof CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP
+                      ]
+                    }
+                    backgroundColor={
+                      Object.entries({
+                        [GOERLI_DISPLAY_NAME]: BackgroundColor.goerli,
+                        [SEPOLIA_DISPLAY_NAME]: BackgroundColor.sepolia,
+                      }).find(([tickerSubstring]) =>
+                        selectedNetwork?.nativeCurrency?.includes(
+                          tickerSubstring,
+                        ),
+                      )?.[1]
+                    }
+                    borderColor={
+                      primaryTokenImage
+                        ? BorderColor.borderMuted
+                        : BorderColor.borderDefault
+                    }
+                  />
+                }
+              >
+                <AvatarToken
+                  borderRadius={isNFT ? BorderRadius.LG : BorderRadius.full}
+                  src={primaryTokenImage ?? undefined}
+                  size={AvatarTokenSize.Md}
+                  name={symbol}
+                  {...(isNFT && {
+                    backgroundColor: BackgroundColor.transparent,
+                  })}
                 />
-              }
-            >
-              <AvatarToken
-                borderRadius={isNFT ? BorderRadius.LG : BorderRadius.full}
-                src={primaryTokenImage ?? undefined}
-                size={AvatarTokenSize.Md}
-                name={symbol}
-                {...(isNFT && { backgroundColor: BackgroundColor.transparent })}
-              />
-            </BadgeWrapper>
-          </Box>
+              </BadgeWrapper>
+            </Box>
 
-          <Tooltip
-            disabled={!isSymbolLong}
-            title={symbol}
-            position="bottom"
-            wrapperClassName="mm-box"
-          >
-            <Text
-              className="asset-picker__symbol"
-              variant={TextVariant.bodyMd}
-              color={TextColor.textDefault}
+            <Tooltip
+              disabled={!isSymbolLong}
+              title={symbol}
+              position="bottom"
+              wrapperClassName="mm-box"
             >
-              {formattedSymbol}
-            </Text>
-            {isNFT && asset?.tokenId && (
               <Text
-                variant={TextVariant.bodySm}
-                color={TextColor.textAlternative}
+                className="asset-picker__symbol"
+                variant={TextVariant.bodyMd}
+                color={TextColor.textDefault}
               >
-                #
-                {String(asset.tokenId).length < ELLIPSIFY_LENGTH
-                  ? asset.tokenId
-                  : ellipsify(String(asset.tokenId), 6, 4)}
+                {formattedSymbol}
               </Text>
-            )}
-          </Tooltip>
-        </Box>
+              {isNFT && asset?.tokenId && (
+                <Text
+                  variant={TextVariant.bodySm}
+                  color={TextColor.textAlternative}
+                >
+                  #
+                  {String(asset.tokenId).length < ELLIPSIFY_LENGTH
+                    ? asset.tokenId
+                    : ellipsify(String(asset.tokenId), 6, 4)}
+                </Text>
+              )}
+            </Tooltip>
+          </Box>
+        ) : (
+          <Text className="asset-picker__fallback" variant={TextVariant.bodyMd}>
+            {t('swapSelectToken')}
+          </Text>
+        )}
       </ButtonBase>
     </>
   );
diff --git a/ui/components/multichain/asset-picker-amount/asset-picker/index.scss b/ui/components/multichain/asset-picker-amount/asset-picker/index.scss
index d30ce8c016d7..6cfaf877efbd 100644
--- a/ui/components/multichain/asset-picker-amount/asset-picker/index.scss
+++ b/ui/components/multichain/asset-picker-amount/asset-picker/index.scss
@@ -25,4 +25,9 @@
     opacity: 1;
     cursor: not-allowed;
   }
+
+  &__fallback {
+    text-wrap: nowrap;
+    padding-left: 8px;
+  }
 }
diff --git a/ui/components/multichain/token-list-item/token-list-item.tsx b/ui/components/multichain/token-list-item/token-list-item.tsx
index a5d6cf385e36..0c3c46114541 100644
--- a/ui/components/multichain/token-list-item/token-list-item.tsx
+++ b/ui/components/multichain/token-list-item/token-list-item.tsx
@@ -81,6 +81,7 @@ type TokenListItemProps = {
   isStakeable?: boolean;
   address?: string | null;
   showPercentage?: boolean;
+  isPrimaryTokenSymbolHidden?: boolean;
 };
 
 export const TokenListItem = ({
@@ -93,6 +94,7 @@ export const TokenListItem = ({
   title,
   tooltipText,
   isOriginalTokenSymbol,
+  isPrimaryTokenSymbolHidden = false,
   isNativeCurrency = false,
   isStakeable = false,
   address = null,
@@ -379,7 +381,10 @@ export const TokenListItem = ({
                   variant={TextVariant.bodyMd}
                   textAlign={TextAlign.End}
                 >
-                  {primary} {isNativeCurrency ? '' : tokenSymbol}
+                  {primary}{' '}
+                  {isNativeCurrency || isPrimaryTokenSymbolHidden
+                    ? ''
+                    : tokenSymbol}
                 </Text>
               </Box>
             ) : (
@@ -405,7 +410,10 @@ export const TokenListItem = ({
                   variant={TextVariant.bodySmMedium}
                   textAlign={TextAlign.End}
                 >
-                  {primary} {isNativeCurrency ? '' : tokenSymbol}
+                  {primary}{' '}
+                  {isNativeCurrency || isPrimaryTokenSymbolHidden
+                    ? ''
+                    : tokenSymbol}
                 </Text>
               </Box>
             )}