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 c090e311a3..eaa43c8007 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenButton.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenButton.tsx
@@ -57,7 +57,7 @@ export function TokenButton({
         {({ open }) => (
           <>
             <Popover.Button
-              className="arb-hover h-full w-max rounded-bl rounded-tl px-3 py-3 text-white"
+              className="arb-hover h-full w-max rounded-bl rounded-tl px-3 pb-1 pt-2 text-white"
               aria-label="Select Token"
               onClick={onPopoverButtonClick}
               disabled={disabled}
@@ -75,9 +75,7 @@ export function TokenButton({
                     className="h-5 w-5 sm:h-7 sm:w-7"
                   />
                 )} */}
-                <span className="text-xl font-light sm:text-3xl">
-                  {tokenSymbol}
-                </span>
+                <span className="text-xl font-light">{tokenSymbol}</span>
                 {!disabled && (
                   <ChevronDownIcon
                     className={twMerge(
@@ -92,7 +90,7 @@ export function TokenButton({
             <Transition
               // we don't unmount on leave here because otherwise transition won't work with virtualized lists
               options={{ unmountOnLeave: false }}
-              className="fixed left-0 top-0 z-20 sm:absolute sm:top-[76px] sm:max-w-[466px]"
+              className="fixed right-0 top-0 z-20 sm:absolute sm:top-[76px] sm:max-w-[466px]"
               afterLeave={onPopoverClose}
             >
               <Popover.Panel
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 8438f49b35..4df5ac0201 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
@@ -29,25 +29,103 @@ import {
   NetworkSelectionContainer
 } from '../../common/NetworkSelectionContainer'
 
-export function DestinationNetworkBox({
+function DestinationNetworkBalance({
   customFeeTokenBalances,
   showUsdcSpecificInfo
 }: {
   customFeeTokenBalances: Balances
   showUsdcSpecificInfo: boolean
 }) {
-  const { address: walletAddress } = useAccount()
+  const {
+    app: { selectedToken }
+  } = useAppState()
   const [networks] = useNetworks()
   const { childChain, childChainProvider, isDepositMode } =
     useNetworksRelationship(networks)
   const { isArbitrumOne } = isNetwork(childChain.id)
-  const {
-    app: { selectedToken }
-  } = useAppState()
+
   const { ethParentBalance, ethChildBalance, erc20ChildBalances } =
     useBalances()
   const selectedTokenBalances = useSelectedTokenBalances()
+
   const nativeCurrency = useNativeCurrency({ provider: childChainProvider })
+
+  if (selectedToken) {
+    return (
+      <>
+        <TokenBalance
+          balance={
+            isDepositMode
+              ? selectedTokenBalances.childBalance
+              : selectedTokenBalances.parentBalance
+          }
+          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
+                })
+              : 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 */}
+        {showUsdcSpecificInfo && 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={
+          isDepositMode
+            ? customFeeTokenBalances.childBalance
+            : customFeeTokenBalances.parentBalance
+        }
+        forToken={nativeCurrency}
+        prefix="Balance: "
+      />
+    )
+  }
+
+  return (
+    <ETHBalance
+      balance={isDepositMode ? ethChildBalance : ethParentBalance}
+      on={isDepositMode ? NetworkType.childChain : NetworkType.parentChain}
+      prefix="Balance: "
+    />
+  )
+}
+
+export function DestinationNetworkBox({
+  customFeeTokenBalances,
+  showUsdcSpecificInfo
+}: {
+  customFeeTokenBalances: Balances
+  showUsdcSpecificInfo: boolean
+}) {
+  const { address: walletAddress } = useAccount()
+  const [networks] = useNetworks()
   const { destinationAddress } = useDestinationAddressStore()
   const destinationAddressOrWalletAddress = destinationAddress || walletAddress
   const [
@@ -58,7 +136,6 @@ export function DestinationNetworkBox({
   return (
     <>
       <NetworkContainer
-        bgLogoHeight={58}
         network={networks.destinationChain}
         customAddress={destinationAddress}
       >
@@ -70,87 +147,10 @@ export function DestinationNetworkBox({
           <BalancesContainer>
             {destinationAddressOrWalletAddress &&
               utils.isAddress(destinationAddressOrWalletAddress) && (
-                <>
-                  <TokenBalance
-                    balance={
-                      isDepositMode
-                        ? selectedTokenBalances.childBalance
-                        : selectedTokenBalances.parentBalance
-                    }
-                    on={
-                      isDepositMode
-                        ? NetworkType.childChain
-                        : NetworkType.parentChain
-                    }
-                    forToken={selectedToken}
-                    prefix={selectedToken ? 'Balance: ' : ''}
-                    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
-                          })
-                        : undefined
-                    }
-                  />
-                  {/* In deposit mode, when user selected USDC on mainnet,
-              the UI shows the Arb One balance of both USDC.e and native USDC */}
-                  {isDepositMode && showUsdcSpecificInfo && (
-                    <TokenBalance
-                      balance={
-                        (isArbitrumOne
-                          ? erc20ChildBalances?.[CommonAddress.ArbitrumOne.USDC]
-                          : erc20ChildBalances?.[
-                              CommonAddress.ArbitrumSepolia.USDC
-                            ]) ?? constants.Zero
-                      }
-                      on={NetworkType.childChain}
-                      forToken={
-                        selectedToken
-                          ? { ...selectedToken, symbol: 'USDC' }
-                          : null
-                      }
-                      tokenSymbolOverride="USDC"
-                    />
-                  )}
-                  {nativeCurrency.isCustom ? (
-                    <>
-                      <TokenBalance
-                        on={
-                          isDepositMode
-                            ? NetworkType.childChain
-                            : NetworkType.parentChain
-                        }
-                        balance={
-                          isDepositMode
-                            ? customFeeTokenBalances.childBalance
-                            : customFeeTokenBalances.parentBalance
-                        }
-                        forToken={nativeCurrency}
-                        prefix={selectedToken ? '' : 'Balance: '}
-                      />
-                      {!isDepositMode && (
-                        <ETHBalance
-                          balance={ethParentBalance}
-                          on={NetworkType.parentChain}
-                        />
-                      )}
-                    </>
-                  ) : (
-                    <ETHBalance
-                      balance={
-                        isDepositMode ? ethChildBalance : ethParentBalance
-                      }
-                      prefix={selectedToken ? '' : 'Balance: '}
-                      on={
-                        isDepositMode
-                          ? NetworkType.childChain
-                          : NetworkType.parentChain
-                      }
-                    />
-                  )}
-                </>
+                <DestinationNetworkBalance
+                  customFeeTokenBalances={customFeeTokenBalances}
+                  showUsdcSpecificInfo={showUsdcSpecificInfo}
+                />
               )}
           </BalancesContainer>
         </NetworkListboxPlusBalancesContainer>
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 cf0ba5a22a..b41ba30d1c 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,27 +1,17 @@
 import { ChangeEventHandler, useCallback, useEffect, useMemo } from 'react'
+import { utils } from 'ethers'
 
 import { getNetworkName } from '../../../util/networks'
 import {
   NetworkButton,
   NetworkSelectionContainer
 } from '../../common/NetworkSelectionContainer'
-import {
-  BalancesContainer,
-  ETHBalance,
-  NetworkContainer,
-  NetworkListboxPlusBalancesContainer
-} from '../TransferPanelMain'
-import { TokenBalance } from './TokenBalance'
-import { NetworkType } from './utils'
+import { NetworkContainer } from '../TransferPanelMain'
 import { useAppState } from '../../../state'
 import { useNetworks } from '../../../hooks/useNetworks'
 import { useNativeCurrency } from '../../../hooks/useNativeCurrency'
 import { useNetworksRelationship } from '../../../hooks/useNetworksRelationship'
-import {
-  Balances,
-  useSelectedTokenBalances
-} from '../../../hooks/TransferPanel/useSelectedTokenBalances'
-import { useBalances } from '../../../hooks/useBalances'
+import { Balances } from '../../../hooks/TransferPanel/useSelectedTokenBalances'
 import {
   ETH_BALANCE_ARTICLE_LINK,
   USDC_LEARN_MORE_LINK
@@ -39,6 +29,7 @@ import { useDialog } from '../../common/Dialog'
 import { useTransferReadiness } from '../useTransferReadiness'
 import { useIsBatchTransferSupported } from '../../../hooks/TransferPanel/useIsBatchTransferSupported'
 import { useSelectedTokenDecimals } from '../../../hooks/TransferPanel/useSelectedTokenDecimals'
+import { useBalanceOnSourceChain } from '../../../hooks/useBalanceOnSourceChain'
 
 export function SourceNetworkBox({
   customFeeTokenBalances,
@@ -53,8 +44,6 @@ export function SourceNetworkBox({
   const {
     app: { selectedToken }
   } = useAppState()
-  const { ethParentBalance, ethChildBalance } = useBalances()
-  const selectedTokenBalances = useSelectedTokenBalances()
   const nativeCurrency = useNativeCurrency({ provider: childChainProvider })
   const [{ amount, amount2 }] = useArbQueryParams()
   const { setAmount, setAmount2 } = useSetInputAmount()
@@ -66,6 +55,7 @@ export function SourceNetworkBox({
   const isBatchTransferSupported = useIsBatchTransferSupported()
   const decimals = useSelectedTokenDecimals()
   const { errorMessages } = useTransferReadiness()
+  const ethBalanceSourceChain = useBalanceOnSourceChain(null)
 
   const isMaxAmount = amount === AmountQueryParamEnum.MAX
   const isMaxAmount2 = amount2 === AmountQueryParamEnum.MAX
@@ -109,69 +99,21 @@ export function SourceNetworkBox({
   const tokenButtonOptionsAmount2 = useMemo(
     () => ({
       symbol: nativeCurrency.symbol,
-      disabled: true
+      disabled: true,
+      balance: ethBalanceSourceChain
+        ? Number(utils.formatEther(ethBalanceSourceChain))
+        : undefined
     }),
-    [nativeCurrency.symbol]
+    [ethBalanceSourceChain, nativeCurrency.symbol]
   )
 
   return (
     <>
       <NetworkContainer bgLogoHeight={138} network={networks.sourceChain}>
-        <NetworkListboxPlusBalancesContainer>
-          <NetworkButton
-            type="source"
-            onClick={openSourceNetworkSelectionDialog}
-          />
-          <BalancesContainer>
-            <TokenBalance
-              on={
-                isDepositMode ? NetworkType.parentChain : NetworkType.childChain
-              }
-              balance={
-                isDepositMode
-                  ? selectedTokenBalances.parentBalance
-                  : selectedTokenBalances.childBalance
-              }
-              forToken={selectedToken}
-              prefix={selectedToken ? 'Balance: ' : ''}
-            />
-            {nativeCurrency.isCustom ? (
-              <>
-                <TokenBalance
-                  on={
-                    isDepositMode
-                      ? NetworkType.parentChain
-                      : NetworkType.childChain
-                  }
-                  balance={
-                    isDepositMode
-                      ? customFeeTokenBalances.parentBalance
-                      : customFeeTokenBalances.childBalance
-                  }
-                  forToken={nativeCurrency}
-                  prefix={selectedToken ? '' : 'Balance: '}
-                />
-                {/* Only show ETH balance on parent chain */}
-                {isDepositMode && (
-                  <ETHBalance
-                    balance={ethParentBalance}
-                    on={NetworkType.parentChain}
-                  />
-                )}
-              </>
-            ) : (
-              <ETHBalance
-                balance={isDepositMode ? ethParentBalance : ethChildBalance}
-                prefix={selectedToken ? '' : 'Balance: '}
-                on={
-                  isDepositMode
-                    ? NetworkType.parentChain
-                    : NetworkType.childChain
-                }
-              />
-            )}
-          </BalancesContainer>
-        </NetworkListboxPlusBalancesContainer>
+        <NetworkButton
+          type="source"
+          onClick={openSourceNetworkSelectionDialog}
+        />
 
         <div className="flex flex-col gap-1">
           <TransferPanelMainInput
@@ -182,6 +124,7 @@ export function SourceNetworkBox({
             maxAmount={maxAmount}
             isMaxAmount={isMaxAmount}
             decimals={decimals}
+            customFeeTokenBalances={customFeeTokenBalances}
           />
 
           {isBatchTransferSupported && (
@@ -190,10 +133,11 @@ export function SourceNetworkBox({
               errorMessage={errorMessages?.inputAmount2}
               value={amount2}
               onChange={handleAmount2Change}
-              tokenButtonOptions={tokenButtonOptionsAmount2}
+              options={tokenButtonOptionsAmount2}
               maxAmount={maxAmount2}
               isMaxAmount={isMaxAmount2}
               decimals={nativeCurrency.decimals}
+              customFeeTokenBalances={customFeeTokenBalances}
             />
           )}
 
diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMainInput.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMainInput.tsx
index ad3efc5e98..c10a404096 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMainInput.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMainInput.tsx
@@ -10,29 +10,44 @@ import { useMemo } from 'react'
 import { TokenButton, TokenButtonOptions } from './TokenButton'
 import { useNetworks } from '../../hooks/useNetworks'
 import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
-import { useSelectedTokenBalances } from '../../hooks/TransferPanel/useSelectedTokenBalances'
+import {
+  Balances,
+  useSelectedTokenBalances
+} from '../../hooks/TransferPanel/useSelectedTokenBalances'
 import { useAppState } from '../../state'
 import { useBalances } from '../../hooks/useBalances'
 import { TransferReadinessRichErrorMessage } from './useTransferReadinessUtils'
 import { ExternalLink } from '../common/ExternalLink'
 import { useTransferDisabledDialogStore } from './TransferDisabledDialog'
+import { formatAmount } from '../../util/NumberUtils'
+import { useNativeCurrency } from '../../hooks/useNativeCurrency'
+import { Loader } from '../common/atoms/Loader'
 import { sanitizeAmountQueryParam } from '../../hooks/useArbQueryParams'
 import { truncateExtraDecimals } from '../../util/NumberUtils'
 
-function MaxButton(props: React.ButtonHTMLAttributes<HTMLButtonElement>) {
-  const { className = '', ...rest } = props
-
+function MaxButton({
+  customFeeTokenBalances,
+  className = '',
+  ...rest
+}: React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  customFeeTokenBalances: Balances
+}) {
   const {
     app: { selectedToken }
   } = useAppState()
   const [networks] = useNetworks()
-  const { isDepositMode } = useNetworksRelationship(networks)
+  const { isDepositMode, childChainProvider } =
+    useNetworksRelationship(networks)
 
   const { ethParentBalance, ethChildBalance } = useBalances()
   const selectedTokenBalances = useSelectedTokenBalances()
+  const nativeCurrency = useNativeCurrency({ provider: childChainProvider })
 
   const maxButtonVisible = useMemo(() => {
     const ethBalance = isDepositMode ? ethParentBalance : ethChildBalance
+    const customFeeTokenBalance = isDepositMode
+      ? customFeeTokenBalances.parentBalance
+      : customFeeTokenBalances.childBalance
     const tokenBalance = isDepositMode
       ? selectedTokenBalances.parentBalance
       : selectedTokenBalances.childBalance
@@ -45,17 +60,23 @@ function MaxButton(props: React.ButtonHTMLAttributes<HTMLButtonElement>) {
       return !tokenBalance.isZero()
     }
 
+    if (nativeCurrency.isCustom) {
+      return customFeeTokenBalance && !customFeeTokenBalance.isZero()
+    }
+
     if (!ethBalance) {
       return false
     }
 
     return !ethBalance.isZero()
   }, [
+    isDepositMode,
     ethParentBalance,
     ethChildBalance,
+    customFeeTokenBalances,
     selectedTokenBalances,
     selectedToken,
-    isDepositMode
+    nativeCurrency.isCustom
   ])
 
   if (!maxButtonVisible) {
@@ -66,7 +87,7 @@ function MaxButton(props: React.ButtonHTMLAttributes<HTMLButtonElement>) {
     <button
       type="button"
       className={twMerge(
-        'arb-hover px-2 py-2 text-sm font-light text-gray-6 sm:px-4',
+        'rounded bg-white/30 px-1 py-0.5 text-right text-xs font-medium leading-none text-white opacity-80 transition-opacity hover:opacity-60',
         className
       )}
       {...rest}
@@ -76,14 +97,80 @@ function MaxButton(props: React.ButtonHTMLAttributes<HTMLButtonElement>) {
   )
 }
 
+function SourceChainTokenBalance({
+  customFeeTokenBalances,
+  balanceOverride
+}: {
+  customFeeTokenBalances: Balances
+  balanceOverride?: AmountInputOptions['balance']
+}) {
+  const {
+    app: { selectedToken }
+  } = useAppState()
+  const [networks] = useNetworks()
+  const { isDepositMode, childChainProvider } =
+    useNetworksRelationship(networks)
+
+  const { ethParentBalance, ethChildBalance } = useBalances()
+  const selectedTokenBalances = useSelectedTokenBalances()
+
+  const nativeCurrency = useNativeCurrency({ provider: childChainProvider })
+
+  const tokenBalance = isDepositMode
+    ? selectedTokenBalances.parentBalance
+    : selectedTokenBalances.childBalance
+
+  const ethBalance = isDepositMode ? ethParentBalance : ethChildBalance
+  const customFeeTokenBalance = isDepositMode
+    ? customFeeTokenBalances.parentBalance
+    : customFeeTokenBalances.childBalance
+
+  const nativeCurrencyBalance = nativeCurrency.isCustom
+    ? customFeeTokenBalance
+    : ethBalance
+
+  const balance =
+    balanceOverride ?? (selectedToken ? tokenBalance : nativeCurrencyBalance)
+
+  const formattedBalance = balance
+    ? formatAmount(balance, {
+        decimals: selectedToken?.decimals ?? nativeCurrency.decimals
+      })
+    : null
+
+  if (formattedBalance) {
+    return (
+      <>
+        <span className="text-sm font-light text-white">Balance: </span>
+        <span
+          className="whitespace-nowrap text-sm text-white"
+          aria-label={`${
+            selectedToken?.symbol ?? nativeCurrency.symbol
+          } balance amount on ${isDepositMode ? 'parentChain' : 'childChain'}`}
+        >
+          {formattedBalance}
+        </span>
+      </>
+    )
+  }
+
+  return (
+    <>
+      <span className="text-sm font-light text-white">Balance: </span>
+      <Loader wrapperClass="ml-1" color="white" size={12} />
+    </>
+  )
+}
+
 const TransferPanelInputField = React.memo(
   (props: React.InputHTMLAttributes<HTMLInputElement>) => {
     return (
       <input
         type="text"
         inputMode="decimal"
-        placeholder="Enter amount"
-        className="h-full w-full bg-transparent px-3 text-xl font-light placeholder:text-gray-dark sm:text-3xl"
+        placeholder="0"
+        aria-label="Amount input"
+        className="h-full w-full bg-transparent px-3 text-xl font-light text-white placeholder:text-gray-300 sm:text-3xl"
         {...props}
       />
     )
@@ -141,12 +228,17 @@ function ErrorMessage({
   }
 }
 
+type AmountInputOptions = TokenButtonOptions & {
+  balance?: number | undefined
+}
+
 export type TransferPanelMainInputProps =
   React.InputHTMLAttributes<HTMLInputElement> & {
     errorMessage?: string | TransferReadinessRichErrorMessage | undefined
     maxButtonOnClick: React.ButtonHTMLAttributes<HTMLButtonElement>['onClick']
     value: string
-    tokenButtonOptions?: TokenButtonOptions
+    options?: AmountInputOptions
+    customFeeTokenBalances: Balances
     maxAmount: string | undefined
     isMaxAmount: boolean
     decimals: number
@@ -156,12 +248,13 @@ export const TransferPanelMainInput = React.memo(
   ({
     errorMessage,
     maxButtonOnClick,
-    tokenButtonOptions,
     onChange,
     maxAmount,
     value,
     isMaxAmount,
     decimals,
+    options,
+    customFeeTokenBalances,
     ...rest
   }: TransferPanelMainInputProps) => {
     const [localValue, setLocalValue] = useState(value)
@@ -203,19 +296,10 @@ export const TransferPanelMainInput = React.memo(
 
     return (
       <>
-        <div
-          className={twMerge(
-            'flex flex-row rounded border bg-black/40 shadow-2',
-            errorMessage
-              ? 'border-brick text-brick'
-              : 'border-white/30 text-white'
-          )}
-        >
-          <TokenButton options={tokenButtonOptions} />
+        <div className={twMerge('flex flex-row rounded bg-black/40 shadow-2')}>
           <div
             className={twMerge(
-              'flex grow flex-row items-center justify-center border-l',
-              errorMessage ? 'border-brick' : 'border-white/30'
+              'flex grow flex-row items-center justify-center'
             )}
           >
             <TransferPanelInputField
@@ -223,7 +307,19 @@ export const TransferPanelMainInput = React.memo(
               value={localValue}
               onChange={handleInputChange}
             />
-            <MaxButton onClick={handleMaxButtonClick} />
+            <div className="flex flex-col items-end">
+              <TokenButton options={options} />
+              <div className="flex items-center space-x-1 px-3 pb-2 pt-1">
+                <SourceChainTokenBalance
+                  customFeeTokenBalances={customFeeTokenBalances}
+                  balanceOverride={options?.balance}
+                />
+                <MaxButton
+                  onClick={handleMaxButtonClick}
+                  customFeeTokenBalances={customFeeTokenBalances}
+                />
+              </div>
+            </div>
           </div>
         </div>
 
diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/useTransferReadiness.ts b/packages/arb-token-bridge-ui/src/components/TransferPanel/useTransferReadiness.ts
index 34899b953b..46dc6768c7 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/useTransferReadiness.ts
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/useTransferReadiness.ts
@@ -31,6 +31,7 @@ import { isTeleportEnabledToken } from '../../util/TokenTeleportEnabledUtils'
 import { isNetwork } from '../../util/networks'
 import { useBalances } from '../../hooks/useBalances'
 import { useArbQueryParams } from '../../hooks/useArbQueryParams'
+import { formatAmount } from '../../util/NumberUtils'
 
 // Add chains IDs that are currently down or disabled
 // It will block transfers and display an info box in the transfer panel
@@ -413,7 +414,9 @@ export function useTransferReadiness(): UseTransferReadinessResult {
                 errorMessages: {
                   inputAmount1: getInsufficientFundsForGasFeesErrorMessage({
                     asset: ether.symbol,
-                    chain: networks.sourceChain.name
+                    chain: networks.sourceChain.name,
+                    balance: formatAmount(ethBalanceFloat),
+                    requiredBalance: formatAmount(estimatedL1GasFees)
                   })
                 }
               })
@@ -425,7 +428,9 @@ export function useTransferReadiness(): UseTransferReadinessResult {
                 errorMessages: {
                   inputAmount1: getInsufficientFundsForGasFeesErrorMessage({
                     asset: nativeCurrency.symbol,
-                    chain: networks.sourceChain.name
+                    chain: networks.sourceChain.name,
+                    balance: formatAmount(customFeeTokenL1BalanceFloat),
+                    requiredBalance: formatAmount(estimatedL2GasFees)
                   })
                 }
               })
@@ -447,7 +452,11 @@ export function useTransferReadiness(): UseTransferReadinessResult {
                 inputAmount1: notEnoughEthForGasFees
                   ? getInsufficientFundsForGasFeesErrorMessage({
                       asset: ether.symbol,
-                      chain: networks.sourceChain.name
+                      chain: networks.sourceChain.name,
+                      balance: formatAmount(ethBalanceFloat),
+                      requiredBalance: formatAmount(
+                        estimatedL1GasFees + estimatedL2GasFees
+                      )
                     })
                   : undefined,
                 inputAmount2:
@@ -472,7 +481,11 @@ export function useTransferReadiness(): UseTransferReadinessResult {
               errorMessages: {
                 inputAmount1: getInsufficientFundsForGasFeesErrorMessage({
                   asset: ether.symbol,
-                  chain: networks.sourceChain.name
+                  chain: networks.sourceChain.name,
+                  balance: formatAmount(ethBalanceFloat),
+                  requiredBalance: formatAmount(
+                    estimatedL1GasFees + estimatedL2GasFees
+                  )
                 })
               }
             })
@@ -490,7 +503,9 @@ export function useTransferReadiness(): UseTransferReadinessResult {
             errorMessages: {
               inputAmount1: getInsufficientFundsForGasFeesErrorMessage({
                 asset: nativeCurrency.symbol,
-                chain: networks.sourceChain.name
+                chain: networks.sourceChain.name,
+                balance: formatAmount(ethBalanceFloat),
+                requiredBalance: formatAmount(total)
               })
             }
           })
diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/useTransferReadinessUtils.ts b/packages/arb-token-bridge-ui/src/components/TransferPanel/useTransferReadinessUtils.ts
index 53085925ee..f274106133 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/useTransferReadinessUtils.ts
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/useTransferReadinessUtils.ts
@@ -4,11 +4,17 @@ export enum TransferReadinessRichErrorMessage {
   TOKEN_TRANSFER_DISABLED
 }
 
-export type GetInsufficientFundsErrorMessageParams = {
+type GetInsufficientFundsErrorMessageParams = {
   asset: string
   chain: string
 }
 
+type GetInsufficientFundsForGasFeesErrorMessageParams =
+  GetInsufficientFundsErrorMessageParams & {
+    balance: string
+    requiredBalance: string
+  }
+
 export function getInsufficientFundsErrorMessage({
   asset,
   chain
@@ -18,9 +24,21 @@ export function getInsufficientFundsErrorMessage({
 
 export function getInsufficientFundsForGasFeesErrorMessage({
   asset,
-  chain
-}: GetInsufficientFundsErrorMessageParams) {
-  return `Insufficient ${asset} to pay for gas fees. Please add more funds to ${chain}.`
+  chain,
+  balance,
+  requiredBalance
+}: GetInsufficientFundsForGasFeesErrorMessageParams) {
+  const errorMessage = `Please add more ${asset} on ${chain} to pay for gas fees.`
+
+  if (balance === requiredBalance) {
+    // An edge case where formatAmount returns the same value. In this case we don't want to show balances because in the UI it's the same as requiredBalance.
+    return errorMessage
+  }
+
+  return (
+    errorMessage +
+    ` You currently have ${balance} ${asset}, but the transaction requires ${requiredBalance} ${asset}.`
+  )
 }
 
 export function getSmartContractWalletNativeCurrencyTransfersNotSupportedErrorMessage({
diff --git a/packages/arb-token-bridge-ui/src/components/common/atoms/Loader.tsx b/packages/arb-token-bridge-ui/src/components/common/atoms/Loader.tsx
index acccdb2cdc..6d82603aab 100644
--- a/packages/arb-token-bridge-ui/src/components/common/atoms/Loader.tsx
+++ b/packages/arb-token-bridge-ui/src/components/common/atoms/Loader.tsx
@@ -2,10 +2,16 @@ import { TailSpin } from 'react-loader-spinner'
 import { BaseProps } from 'react-loader-spinner/dist/type'
 
 export type LoaderProps = BaseProps & {
-  size: 'small' | 'medium' | 'large'
+  size: 'small' | 'medium' | 'large' | number
 }
 
-const getSizeByLoaderProps = (loaderSize: LoaderProps['size'] | undefined) => {
+const getSizeByLoaderProps = (
+  loaderSize: LoaderProps['size'] | number | undefined
+) => {
+  if (typeof loaderSize === 'number') {
+    return loaderSize
+  }
+
   switch (loaderSize) {
     case 'small':
       return 16
diff --git a/packages/arb-token-bridge-ui/tests/e2e/cypress.d.ts b/packages/arb-token-bridge-ui/tests/e2e/cypress.d.ts
index 1e1761833c..f9596e541e 100644
--- a/packages/arb-token-bridge-ui/tests/e2e/cypress.d.ts
+++ b/packages/arb-token-bridge-ui/tests/e2e/cypress.d.ts
@@ -11,6 +11,7 @@ import {
   searchAndSelectToken,
   fillCustomDestinationAddress,
   typeAmount,
+  findAmountInput,
   findSourceChainButton,
   findDestinationChainButton,
   findGasFeeSummary,
@@ -56,6 +57,7 @@ declare global {
       }): typeof searchAndSelectToken
       fillCustomDestinationAddress(): typeof fillCustomDestinationAddress
       typeAmount: typeof typeAmount
+      findAmountInput: typeof findAmountInput
       findSourceChainButton: typeof findSourceChainButton
       findDestinationChainButton: typeof findDestinationChainButton
       findGasFeeForChain: typeof findGasFeeForChain
diff --git a/packages/arb-token-bridge-ui/tests/e2e/specs/login.cy.ts b/packages/arb-token-bridge-ui/tests/e2e/specs/login.cy.ts
index 25c8552974..0b6286f7e3 100644
--- a/packages/arb-token-bridge-ui/tests/e2e/specs/login.cy.ts
+++ b/packages/arb-token-bridge-ui/tests/e2e/specs/login.cy.ts
@@ -15,7 +15,7 @@ describe('Login Account', () => {
 
   before(() => {
     getInitialETHBalance(Cypress.env('ETH_RPC_URL')).then(
-      val => (l1ETHbal = formatAmount(val, { symbol: 'ETH' }))
+      val => (l1ETHbal = formatAmount(val))
     )
     getInitialETHBalance(Cypress.env('ARB_RPC_URL')).then(
       val => (l2ETHbal = formatAmount(val, { symbol: 'ETH' }))
diff --git a/packages/arb-token-bridge-ui/tests/e2e/specs/urlQueryParam.cy.ts b/packages/arb-token-bridge-ui/tests/e2e/specs/urlQueryParam.cy.ts
index 0124434723..4b19a7d3f5 100644
--- a/packages/arb-token-bridge-ui/tests/e2e/specs/urlQueryParam.cy.ts
+++ b/packages/arb-token-bridge-ui/tests/e2e/specs/urlQueryParam.cy.ts
@@ -31,7 +31,7 @@ describe('User enters site with query params on URL', () => {
           }
         })
 
-        cy.findByPlaceholderText(/Enter amount/i)
+        cy.findAmountInput()
           .should('be.visible')
           .should('not.have.text', 'max')
           .should('not.have.text', 'MAX')
@@ -41,7 +41,7 @@ describe('User enters site with query params on URL', () => {
         cy.waitUntil(
           () =>
             cy
-              .findByPlaceholderText(/Enter amount/i)
+              .findAmountInput()
               .invoke('val')
               .should($val => {
                 cy.wrap(Number($val)).should('be.gt', 0)
@@ -53,7 +53,7 @@ describe('User enters site with query params on URL', () => {
             interval: 500
           }
         )
-        cy.findByPlaceholderText(/Enter amount/i)
+        cy.findAmountInput()
           .invoke('val')
           .should($val => {
             cy.wrap(Number($val)).should('be.lt', l1ETHbal)
@@ -71,7 +71,7 @@ describe('User enters site with query params on URL', () => {
           }
         })
 
-        cy.findByPlaceholderText(/Enter amount/i)
+        cy.findAmountInput()
           .should('be.visible')
           .should('not.have.text', 'max')
           .should('not.have.text', 'MAX')
@@ -79,10 +79,7 @@ describe('User enters site with query params on URL', () => {
         // so this test only asserts the amount set for the input field is less than user's balance
         // but not the exact MAX AMOUNT set by the `setMaxAmount` function in `TransferPanelMain.tsx`
         cy.waitUntil(
-          () =>
-            cy
-              .findByPlaceholderText(/Enter amount/i)
-              .then($el => Number($el.val()) > 0),
+          () => cy.findAmountInput().then($el => Number($el.val()) > 0),
           // optional timeouts and error messages
           {
             errorMsg: 'was expecting a numerical input value greater than 0',
@@ -90,7 +87,7 @@ describe('User enters site with query params on URL', () => {
             interval: 500
           }
         )
-        cy.findByPlaceholderText(/Enter amount/i)
+        cy.findAmountInput()
           .invoke('val')
           .should($val => {
             cy.wrap(Number($val)).should('be.lt', l1ETHbal)
@@ -108,7 +105,7 @@ describe('User enters site with query params on URL', () => {
           }
         })
 
-        cy.findByPlaceholderText(/Enter amount/i)
+        cy.findAmountInput()
           .should('be.visible')
           .should('not.have.text', 'max')
           .should('not.have.text', 'MAX')
@@ -119,7 +116,7 @@ describe('User enters site with query params on URL', () => {
         cy.waitUntil(
           () =>
             cy
-              .findByPlaceholderText(/Enter amount/i)
+              .findAmountInput()
               .invoke('val')
               .should($val => {
                 cy.wrap(Number($val)).should('be.gt', 0)
@@ -131,7 +128,7 @@ describe('User enters site with query params on URL', () => {
             interval: 500
           }
         )
-        cy.findByPlaceholderText(/Enter amount/i)
+        cy.findAmountInput()
           .invoke('val')
           .should($val => {
             cy.wrap(Number($val)).should('be.lt', l1ETHbal)
@@ -147,7 +144,7 @@ describe('User enters site with query params on URL', () => {
         }
       })
 
-      cy.findByPlaceholderText(/Enter amount/i).should('have.value', '56')
+      cy.findAmountInput().should('have.value', '56')
     })
     context('?amount=1.6678 should set transfer panel amount to 1.6678', () => {
       visitAfterSomeDelay('/', {
@@ -158,7 +155,7 @@ describe('User enters site with query params on URL', () => {
         }
       })
 
-      cy.findByPlaceholderText(/Enter amount/i).should('have.value', '1.6678')
+      cy.findAmountInput().should('have.value', '1.6678')
     })
     context('?amount=6 should set transfer panel amount to 6', () => {
       visitAfterSomeDelay('/', {
@@ -169,7 +166,7 @@ describe('User enters site with query params on URL', () => {
         }
       })
 
-      cy.findByPlaceholderText(/Enter amount/i).should('have.value', '6')
+      cy.findAmountInput().should('have.value', '6')
     })
     context('?amount=0.123 should set transfer panel amount to 0.123', () => {
       visitAfterSomeDelay('/', {
@@ -181,7 +178,7 @@ describe('User enters site with query params on URL', () => {
       })
 
       cy.url().should('include', 'amount=0.123')
-      cy.findByPlaceholderText(/Enter amount/i).should('have.value', '0.123')
+      cy.findAmountInput().should('have.value', '0.123')
     })
     context('?amount=-0.123 should set transfer panel amount to 0.123', () => {
       visitAfterSomeDelay('/', {
@@ -192,7 +189,7 @@ describe('User enters site with query params on URL', () => {
         }
       })
 
-      cy.findByPlaceholderText(/Enter amount/i).should('have.value', '0.123')
+      cy.findAmountInput().should('have.value', '0.123')
     })
     it('?amount=asdfs should not set transfer panel amount', () => {
       visitAfterSomeDelay('/', {
@@ -203,7 +200,7 @@ describe('User enters site with query params on URL', () => {
         }
       })
 
-      cy.findByPlaceholderText(/Enter amount/i).should('be.empty')
+      cy.findAmountInput().should('be.empty')
     })
     context('?amount=0 should set transfer panel amount to 0', () => {
       visitAfterSomeDelay('/', {
@@ -214,7 +211,7 @@ describe('User enters site with query params on URL', () => {
         }
       })
 
-      cy.findByPlaceholderText(/Enter amount/i).should('have.value', '0')
+      cy.findAmountInput().should('have.value', '0')
     })
     context('?amount=0.0001 should set transfer panel amount to 0.0001', () => {
       visitAfterSomeDelay('/', {
@@ -225,7 +222,7 @@ describe('User enters site with query params on URL', () => {
         }
       })
 
-      cy.findByPlaceholderText(/Enter amount/i).should('have.value', '0.0001')
+      cy.findAmountInput().should('have.value', '0.0001')
     })
     context('?amount=123,3,43 should not set transfer panel amount', () => {
       visitAfterSomeDelay('/', {
@@ -236,7 +233,7 @@ describe('User enters site with query params on URL', () => {
         }
       })
 
-      cy.findByPlaceholderText(/Enter amount/i).should('be.empty')
+      cy.findAmountInput().should('be.empty')
     })
     context(
       '?amount=0, 123.222, 0.3 should not set transfer panel amount',
@@ -249,7 +246,7 @@ describe('User enters site with query params on URL', () => {
           }
         })
 
-        cy.findByPlaceholderText(/Enter amount/i).should('be.empty')
+        cy.findAmountInput().should('be.empty')
       }
     )
   })
diff --git a/packages/arb-token-bridge-ui/tests/support/commands.ts b/packages/arb-token-bridge-ui/tests/support/commands.ts
index 425398add7..6671c79693 100644
--- a/packages/arb-token-bridge-ui/tests/support/commands.ts
+++ b/packages/arb-token-bridge-ui/tests/support/commands.ts
@@ -249,10 +249,14 @@ export const fillCustomDestinationAddress = () => {
     .type(Cypress.env('CUSTOM_DESTINATION_ADDRESS'))
 }
 
+export function findAmountInput(): Cypress.Chainable<JQuery<HTMLElement>> {
+  return cy.findByLabelText('Amount input')
+}
+
 export function typeAmount(
   amount: string | number
 ): Cypress.Chainable<JQuery<HTMLElement>> {
-  return cy.findByPlaceholderText(/enter amount/i).type(String(amount))
+  return cy.findAmountInput().type(String(amount))
 }
 
 export function findSourceChainButton(
@@ -386,6 +390,7 @@ Cypress.Commands.addAll({
   searchAndSelectToken,
   fillCustomDestinationAddress,
   typeAmount,
+  findAmountInput,
   findSourceChainButton,
   findDestinationChainButton,
   findGasFeeForChain,