diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenButton.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenButton.tsx
index eaa43c8007..d679d1be6b 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenButton.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenButton.tsx
@@ -15,9 +15,12 @@ import {
 import { useNetworks } from '../../hooks/useNetworks'
 import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
 import { Transition } from '../common/Transition'
+import { SafeImage } from '../common/SafeImage'
+import { useTokensFromLists, useTokensFromUser } from './TokenSearchUtils'
 
 export type TokenButtonOptions = {
   symbol?: string
+  logoSrc?: string | null
   disabled?: boolean
 }
 
@@ -34,6 +37,9 @@ export function TokenButton({
   const [networks] = useNetworks()
   const { childChainProvider } = useNetworksRelationship(networks)
 
+  const tokensFromLists = useTokensFromLists()
+  const tokensFromUser = useTokensFromUser()
+
   const nativeCurrency = useNativeCurrency({ provider: childChainProvider })
 
   const tokenSymbol = useMemo(() => {
@@ -51,6 +57,27 @@ export function TokenButton({
     })
   }, [selectedToken, networks.sourceChain.id, nativeCurrency.symbol, options])
 
+  const tokenLogoSrc = useMemo(() => {
+    if (typeof options?.logoSrc !== 'undefined') {
+      return options.logoSrc || nativeCurrency.logoUrl
+    }
+
+    if (selectedToken) {
+      return (
+        tokensFromLists[selectedToken.address]?.logoURI ??
+        tokensFromUser[selectedToken.address]?.logoURI
+      )
+    }
+
+    return nativeCurrency.logoUrl
+  }, [
+    nativeCurrency.logoUrl,
+    options,
+    selectedToken,
+    tokensFromLists,
+    tokensFromUser
+  ])
+
   return (
     <>
       <Popover className="relative">
@@ -63,18 +90,11 @@ export function TokenButton({
               disabled={disabled}
             >
               <div className="flex items-center gap-2">
-                {/* Commenting it out until we update the token image source files to be of better quality */}
-                {/* {tokenLogo && ( 
-                 // SafeImage is used for token logo, we don't know at buildtime
-                where those images will be loaded from // It would throw error
-                if it's loaded from external domains // eslint-disable-next-line
-                @next/next/no-img-element 
-                 <img
-                    src={tokenLogo}
-                    alt="Token logo"
-                    className="h-5 w-5 sm:h-7 sm:w-7"
-                  />
-                )} */}
+                <SafeImage
+                  src={tokenLogoSrc}
+                  alt={`${selectedToken?.symbol ?? nativeCurrency.symbol} logo`}
+                  className="h-5 w-5 shrink-0"
+                />
                 <span className="text-xl font-light">{tokenSymbol}</span>
                 {!disabled && (
                   <ChevronDownIcon
diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenInfo.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenInfo.tsx
index 624317d359..39d98c7f62 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenInfo.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenInfo.tsx
@@ -1,4 +1,5 @@
 import { useMemo } from 'react'
+import { twMerge } from 'tailwind-merge'
 
 import { ERC20BridgeToken } from '../../hooks/arbTokenBridge.types'
 import { ExternalLink } from '../common/ExternalLink'
@@ -16,9 +17,14 @@ import {
 } from '../../util/TokenUtils'
 import { SafeImage } from '../common/SafeImage'
 
-export function TokenLogoFallback() {
+export function TokenLogoFallback({ className }: { className?: string }) {
   return (
-    <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full border border-white/30 bg-gray-dark text-sm font-medium">
+    <div
+      className={twMerge(
+        'flex h-6 w-6 shrink-0 items-center justify-center rounded-full border border-white/30 bg-gray-dark text-sm font-medium',
+        className
+      )}
+    >
       ?
     </div>
   )
diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain.tsx
index 463768f240..26017b9b19 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain.tsx
@@ -3,7 +3,6 @@ import { ArrowsUpDownIcon, ArrowDownIcon } from '@heroicons/react/24/outline'
 import { twMerge } from 'tailwind-merge'
 import { utils } from 'ethers'
 import { Chain, useAccount } from 'wagmi'
-import { useMedia } from 'react-use'
 
 import { useAppState } from '../../state'
 import { getExplorerUrl } from '../../util/networks'
@@ -138,7 +137,6 @@ function CustomAddressBanner({
 export function NetworkContainer({
   network,
   customAddress,
-  bgLogoHeight = 58,
   children
 }: {
   network: Chain
@@ -147,13 +145,7 @@ export function NetworkContainer({
   children: React.ReactNode
 }) {
   const { address } = useAccount()
-  const {
-    color,
-    network: { logo: networkLogo }
-  } = getBridgeUiConfigForChain(network.id)
-  const isSmallScreen = useMedia('(max-width: 639px)')
-
-  const backgroundImage = `url(${networkLogo})`
+  const { color } = getBridgeUiConfigForChain(network.id)
 
   const walletAddressLowercased = address?.toLowerCase()
 
@@ -182,13 +174,7 @@ export function NetworkContainer({
           showCustomAddressBanner && 'rounded-t-none'
         )}
       >
-        <div
-          className="absolute left-0 top-0 h-full w-full bg-[-2px_0] bg-no-repeat bg-origin-content p-3 opacity-50"
-          style={{
-            backgroundImage,
-            backgroundSize: `auto ${bgLogoHeight + (isSmallScreen ? -12 : 0)}px`
-          }}
-        />
+        <div className="absolute left-0 top-0 h-full w-full bg-[-2px_0] bg-no-repeat bg-origin-content p-3 opacity-50" />
         <div className="relative space-y-3.5 bg-contain bg-no-repeat p-3 sm:flex-row">
           {children}
         </div>
@@ -197,26 +183,6 @@ export function NetworkContainer({
   )
 }
 
-export function BalancesContainer({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="flex flex-col flex-nowrap items-end break-all text-sm tracking-[.25px] text-white sm:text-lg">
-      {children}
-    </div>
-  )
-}
-
-export function NetworkListboxPlusBalancesContainer({
-  children
-}: {
-  children: React.ReactNode
-}) {
-  return (
-    <div className="flex flex-row flex-wrap items-center justify-between gap-1 gap-y-2.5 whitespace-nowrap">
-      {children}
-    </div>
-  )
-}
-
 export function TransferPanelMain() {
   const [networks] = useNetworks()
   const { childChainProvider, isTeleportMode } =
diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx
index 87cf770bef..a1fa8c26ca 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx
@@ -1,16 +1,11 @@
+import { useMemo } from 'react'
 import { constants } from 'ethers'
+import Image from 'next/image'
 
 import { useNetworks } from '../../../hooks/useNetworks'
-import {
-  BalancesContainer,
-  NetworkContainer,
-  NetworkListboxPlusBalancesContainer
-} from '../TransferPanelMain'
-import { TokenBalance } from './TokenBalance'
+import { NetworkContainer } from '../TransferPanelMain'
 import { useNetworksRelationship } from '../../../hooks/useNetworksRelationship'
-import { NetworkType } from './utils'
 import { useAppState } from '../../../state'
-import { sanitizeTokenSymbol } from '../../../util/TokenUtils'
 import { useBalances } from '../../../hooks/useBalances'
 import { CommonAddress } from '../../../util/CommonAddressUtils'
 import { isNetwork } from '../../../util/networks'
@@ -24,139 +19,185 @@ import {
 } from '../../common/NetworkSelectionContainer'
 import { useNativeCurrencyBalances } from './useNativeCurrencyBalances'
 import { useIsBatchTransferSupported } from '../../../hooks/TransferPanel/useIsBatchTransferSupported'
-import { ether } from '../../../constants'
+import { getBridgeUiConfigForChain } from '../../../util/bridgeUiConfig'
+import { SafeImage } from '../../common/SafeImage'
+import { useTokensFromLists, useTokensFromUser } from '../TokenSearchUtils'
 import { formatAmount } from '../../../util/NumberUtils'
 import { Loader } from '../../common/atoms/Loader'
 import { useAmount2InputVisibility } from './SourceNetworkBox'
-import { useIsCctpTransfer } from '../hooks/useIsCctpTransfer'
 import { useArbQueryParams } from '../../../hooks/useArbQueryParams'
+import { useIsCctpTransfer } from '../hooks/useIsCctpTransfer'
 
-function NativeCurrencyDestinationBalance({ prefix }: { prefix?: string }) {
-  const nativeCurrencyBalances = useNativeCurrencyBalances()
+function BalanceRow({
+  parentErc20Address,
+  balance,
+  symbolOverride
+}: {
+  parentErc20Address?: string
+  balance: string | undefined
+  symbolOverride?: string
+}) {
   const [networks] = useNetworks()
-  const nativeCurrency = useNativeCurrency({
-    provider: networks.destinationChainProvider
-  })
-  const { isDepositMode } = useNetworksRelationship(networks)
-
-  if (nativeCurrency.isCustom) {
-    return (
-      <TokenBalance
-        forToken={nativeCurrency}
-        balance={nativeCurrencyBalances.destinationBalance}
-        on={isDepositMode ? NetworkType.childChain : NetworkType.parentChain}
-        prefix={prefix}
-      />
-    )
-  }
-  if (!nativeCurrencyBalances.destinationBalance) {
-    return (
-      <p className="flex items-center gap-1">
-        <span className="font-light">{prefix}</span>
-        <Loader color="white" size="small" />
-      </p>
-    )
-  }
+  const { childChainProvider, isDepositMode } =
+    useNetworksRelationship(networks)
+  const nativeCurrency = useNativeCurrency({ provider: childChainProvider })
+
+  const tokensFromLists = useTokensFromLists()
+  const tokensFromUser = useTokensFromUser()
+
+  const tokenLogoSrc = useMemo(() => {
+    if (parentErc20Address) {
+      return (
+        tokensFromLists[parentErc20Address]?.logoURI ??
+        tokensFromUser[parentErc20Address]?.logoURI
+      )
+    }
+
+    return nativeCurrency.logoUrl
+  }, [
+    nativeCurrency.logoUrl,
+    parentErc20Address,
+    tokensFromLists,
+    tokensFromUser
+  ])
+
+  const symbol = useMemo(() => {
+    if (symbolOverride) {
+      return symbolOverride
+    }
+
+    if (parentErc20Address) {
+      return (
+        tokensFromLists[parentErc20Address]?.symbol ??
+        tokensFromUser[parentErc20Address]?.symbol
+      )
+    }
+
+    return nativeCurrency.symbol
+  }, [
+    symbolOverride,
+    nativeCurrency.symbol,
+    parentErc20Address,
+    tokensFromLists,
+    tokensFromUser
+  ])
 
   return (
-    <p>
-      <span className="font-light">{prefix}</span>
-      <span
-        aria-label={`ETH balance amount on ${
-          isDepositMode ? NetworkType.childChain : NetworkType.parentChain
-        }`}
-      >
-        {formatAmount(nativeCurrencyBalances.destinationBalance, {
-          symbol: ether.symbol
-        })}
-      </span>
-    </p>
+    <div className="flex justify-between py-3 text-sm">
+      <div className="flex items-center space-x-1.5">
+        <SafeImage
+          src={tokenLogoSrc}
+          alt={`${symbol} logo`}
+          className="h-4 w-4 shrink-0"
+        />
+        <span>{symbol}</span>
+      </div>
+      <div>
+        <span>Balance: </span>
+        <span
+          aria-label={`${symbol} balance amount on ${
+            isDepositMode ? 'childChain' : 'parentChain'
+          }`}
+        >
+          {balance ? (
+            balance
+          ) : (
+            <Loader wrapperClass="ml-2" size="small" color="white" />
+          )}
+        </span>
+      </div>
+    </div>
   )
 }
 
-function DestinationNetworkBalance() {
+function BalancesContainer() {
   const {
     app: { selectedToken }
   } = useAppState()
   const [networks] = useNetworks()
   const { childChain, childChainProvider, isDepositMode } =
     useNetworksRelationship(networks)
+  const nativeCurrency = useNativeCurrency({ provider: childChainProvider })
   const { isArbitrumOne } = isNetwork(childChain.id)
+  const isCctpTransfer = useIsCctpTransfer()
+
+  const isBatchTransferSupported = useIsBatchTransferSupported()
+  const { isAmount2InputVisible } = useAmount2InputVisibility()
 
   const { erc20ChildBalances } = useBalances()
   const nativeCurrencyBalances = useNativeCurrencyBalances()
   const selectedTokenBalances = useSelectedTokenBalances()
 
-  const nativeCurrency = useNativeCurrency({ provider: childChainProvider })
+  const selectedTokenDestinationBalance = isDepositMode
+    ? selectedTokenBalances.childBalance
+    : selectedTokenBalances.parentBalance
 
-  const isCctpTransfer = useIsCctpTransfer()
+  const selectedTokenOrNativeCurrencyBalance = selectedToken
+    ? selectedTokenDestinationBalance
+    : nativeCurrencyBalances.destinationBalance
 
-  if (selectedToken) {
-    return (
-      <>
-        <TokenBalance
-          balance={
-            isDepositMode
-              ? selectedTokenBalances.childBalance
-              : selectedTokenBalances.parentBalance
+  return (
+    <div
+      className="rounded px-3 text-white [&>*+*]:border-t [&>*+*]:border-gray-600"
+      style={{ backgroundColor: '#00000050' }}
+    >
+      {isCctpTransfer && isDepositMode && (
+        <BalanceRow
+          parentErc20Address={
+            isArbitrumOne
+              ? CommonAddress.Ethereum.USDC
+              : CommonAddress.ArbitrumOne.USDC
           }
-          on={isDepositMode ? NetworkType.childChain : NetworkType.parentChain}
-          forToken={selectedToken}
-          tokenSymbolOverride={
-            // we need to send the proper, sanitized token-name to the component
-            selectedToken?.symbol
-              ? sanitizeTokenSymbol(selectedToken?.symbol, {
-                  chainId: networks.destinationChain.id,
-                  erc20L1Address: selectedToken?.address
+          balance={formatAmount(
+            (isArbitrumOne
+              ? erc20ChildBalances?.[CommonAddress.ArbitrumOne.USDC]
+              : erc20ChildBalances?.[CommonAddress.ArbitrumSepolia.USDC]) ??
+              constants.Zero,
+            {
+              decimals: selectedToken?.decimals
+            }
+          )}
+          symbolOverride="USDC"
+        />
+      )}
+      <BalanceRow
+        parentErc20Address={selectedToken?.address}
+        balance={
+          selectedTokenOrNativeCurrencyBalance
+            ? formatAmount(selectedTokenOrNativeCurrencyBalance, {
+                decimals: selectedToken
+                  ? selectedToken.decimals
+                  : nativeCurrency.decimals
+              })
+            : undefined
+        }
+        symbolOverride={isCctpTransfer ? 'USDC.e' : undefined}
+      />
+      {isBatchTransferSupported && isAmount2InputVisible && (
+        <BalanceRow
+          balance={
+            nativeCurrencyBalances.destinationBalance
+              ? formatAmount(nativeCurrencyBalances.destinationBalance, {
+                  decimals: nativeCurrency.decimals
                 })
               : undefined
           }
-          prefix="Balance: "
         />
-        {/* In deposit mode, when user selected USDC on mainnet,
-        the UI shows the Arb One balance of both USDC.e and native USDC */}
-        {isCctpTransfer && isDepositMode && (
-          <TokenBalance
-            balance={
-              (isArbitrumOne
-                ? erc20ChildBalances?.[CommonAddress.ArbitrumOne.USDC]
-                : erc20ChildBalances?.[CommonAddress.ArbitrumSepolia.USDC]) ??
-              constants.Zero
-            }
-            on={NetworkType.childChain}
-            forToken={
-              selectedToken ? { ...selectedToken, symbol: 'USDC' } : null
-            }
-            tokenSymbolOverride="USDC"
-          />
-        )}
-      </>
-    )
-  }
-
-  if (nativeCurrency.isCustom) {
-    return (
-      <TokenBalance
-        on={isDepositMode ? NetworkType.childChain : NetworkType.parentChain}
-        balance={nativeCurrencyBalances.destinationBalance}
-        forToken={nativeCurrency}
-        prefix="Balance: "
-      />
-    )
-  }
-
-  return <NativeCurrencyDestinationBalance prefix="Balance: " />
+      )}
+    </div>
+  )
 }
 
 export function DestinationNetworkBox() {
   const [networks] = useNetworks()
   const [{ destinationAddress }] = useArbQueryParams()
-  const isBatchTransferSupported = useIsBatchTransferSupported()
   const [
     destinationNetworkSelectionDialogProps,
     openDestinationNetworkSelectionDialog
   ] = useDialog()
-  const { isAmount2InputVisible } = useAmount2InputVisibility()
+  const {
+    network: { logo: networkLogo }
+  } = getBridgeUiConfigForChain(networks.destinationChain.id)
 
   return (
     <>
@@ -164,18 +205,21 @@ export function DestinationNetworkBox() {
         network={networks.destinationChain}
         customAddress={destinationAddress}
       >
-        <NetworkListboxPlusBalancesContainer>
+        <div className="flex justify-between">
           <NetworkButton
             type="destination"
             onClick={openDestinationNetworkSelectionDialog}
           />
-          <BalancesContainer>
-            <DestinationNetworkBalance />
-            {isBatchTransferSupported && isAmount2InputVisible && (
-              <NativeCurrencyDestinationBalance />
-            )}
-          </BalancesContainer>
-        </NetworkListboxPlusBalancesContainer>
+          <div className="relative h-[44px] w-[44px]">
+            <Image
+              src={networkLogo}
+              alt={`${networks.destinationChain.name} logo`}
+              layout={'fill'}
+              objectFit={'contain'}
+            />
+          </div>
+        </div>
+        <BalancesContainer />
         <EstimatedGas chainType="destination" />
       </NetworkContainer>
       <NetworkSelectionContainer
diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/SourceNetworkBox.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/SourceNetworkBox.tsx
index 1aa10e3502..c411850a87 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/SourceNetworkBox.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/SourceNetworkBox.tsx
@@ -1,5 +1,6 @@
 import { ChangeEventHandler, useCallback, useEffect, useMemo } from 'react'
 import { utils } from 'ethers'
+import Image from 'next/image'
 import { PlusCircleIcon } from '@heroicons/react/24/outline'
 import { create } from 'zustand'
 
@@ -31,6 +32,7 @@ import { useTransferReadiness } from '../useTransferReadiness'
 import { useIsBatchTransferSupported } from '../../../hooks/TransferPanel/useIsBatchTransferSupported'
 import { Button } from '../../common/Button'
 import { useSelectedTokenDecimals } from '../../../hooks/TransferPanel/useSelectedTokenDecimals'
+import { getBridgeUiConfigForChain } from '../../../util/bridgeUiConfig'
 import { useNativeCurrencyBalances } from './useNativeCurrencyBalances'
 import { useIsCctpTransfer } from '../hooks/useIsCctpTransfer'
 import { useSourceChainNativeCurrencyDecimals } from '../../../hooks/useSourceChainNativeCurrencyDecimals'
@@ -98,6 +100,10 @@ export function SourceNetworkBox() {
 
   const isCctpTransfer = useIsCctpTransfer()
 
+  const {
+    network: { logo: networkLogo }
+  } = getBridgeUiConfigForChain(networks.sourceChain.id)
+
   const isMaxAmount = amount === AmountQueryParamEnum.MAX
   const isMaxAmount2 = amount2 === AmountQueryParamEnum.MAX
 
@@ -146,6 +152,7 @@ export function SourceNetworkBox() {
   const tokenButtonOptionsAmount2 = useMemo(
     () => ({
       symbol: nativeCurrency.symbol,
+      logoSrc: null,
       disabled: true,
       balance: nativeCurrencyBalances.sourceBalance
         ? Number(
@@ -165,11 +172,21 @@ export function SourceNetworkBox() {
 
   return (
     <>
-      <NetworkContainer bgLogoHeight={138} network={networks.sourceChain}>
-        <NetworkButton
-          type="source"
-          onClick={openSourceNetworkSelectionDialog}
-        />
+      <NetworkContainer network={networks.sourceChain}>
+        <div className="flex justify-between">
+          <NetworkButton
+            type="source"
+            onClick={openSourceNetworkSelectionDialog}
+          />
+          <div className="relative h-[44px] w-[44px]">
+            <Image
+              src={networkLogo}
+              alt={`${networks.sourceChain.name} logo`}
+              layout={'fill'}
+              objectFit={'contain'}
+            />
+          </div>
+        </div>
 
         <div className="flex flex-col gap-1">
           <TransferPanelMainInput
diff --git a/packages/arb-token-bridge-ui/src/components/common/SafeImage.tsx b/packages/arb-token-bridge-ui/src/components/common/SafeImage.tsx
index 1499a30500..486da33450 100644
--- a/packages/arb-token-bridge-ui/src/components/common/SafeImage.tsx
+++ b/packages/arb-token-bridge-ui/src/components/common/SafeImage.tsx
@@ -11,6 +11,7 @@ export function SafeImage(props: SafeImageProps) {
   const [validImageSrc, setValidImageSrc] = useState<false | string>(false)
 
   useEffect(() => {
+    let mounted = true
     const image = new Image()
 
     if (typeof src === 'undefined') {
@@ -18,13 +19,17 @@ export function SafeImage(props: SafeImageProps) {
     } else {
       const sanitizedImageSrc = sanitizeImageSrc(src)
 
-      image.onerror = () => setValidImageSrc(false)
-      image.onload = () => setValidImageSrc(sanitizedImageSrc)
+      image.onerror = () => {
+        if (mounted) setValidImageSrc(false)
+      }
+      image.onload = () => {
+        if (mounted) setValidImageSrc(sanitizedImageSrc)
+      }
       image.src = sanitizedImageSrc
     }
 
-    return function cleanup() {
-      // Abort previous loading
+    return () => {
+      mounted = false
       image.src = ''
     }
   }, [src])