diff --git a/packages/synapse-interface/components/Portfolio/components/HoverTooltip.tsx b/packages/synapse-interface/components/HoverTooltip.tsx
similarity index 55%
rename from packages/synapse-interface/components/Portfolio/components/HoverTooltip.tsx
rename to packages/synapse-interface/components/HoverTooltip.tsx
index 88e01b5999..d27d5a8aab 100644
--- a/packages/synapse-interface/components/Portfolio/components/HoverTooltip.tsx
+++ b/packages/synapse-interface/components/HoverTooltip.tsx
@@ -1,21 +1,35 @@
 import React, { useState } from 'react'
 
-export const HoverTooltip = ({ children, hoverContent }) => {
+export const HoverTooltip = ({
+  children,
+  hoverContent,
+  isActive = true,
+}: {
+  children: React.ReactNode
+  hoverContent: React.ReactNode
+  isActive?: boolean
+}) => {
   const [showTooltip, setShowTooltip] = useState(false)
 
   const activateTooltip = () => setShowTooltip(true)
   const hideTooltip = () => setShowTooltip(false)
 
-  return (
-    <div
-      onMouseEnter={activateTooltip}
-      onMouseLeave={hideTooltip}
-      className="relative"
-    >
-      {children}
-      <Tooltip isHovered={showTooltip}>{hoverContent}</Tooltip>
-    </div>
-  )
+  if (!isActive) {
+    return <div>{children}</div>
+  } else {
+    return (
+      <div
+        onMouseEnter={activateTooltip}
+        onMouseLeave={hideTooltip}
+        className="relative w-fit"
+      >
+        {children}
+        {hoverContent ? (
+          <Tooltip isHovered={showTooltip}>{hoverContent}</Tooltip>
+        ) : null}
+      </div>
+    )
+  }
 }
 
 const Tooltip = ({
diff --git a/packages/synapse-interface/components/Portfolio/components/GasTokenAsset.tsx b/packages/synapse-interface/components/Portfolio/components/GasTokenAsset.tsx
index 19e22d005c..cae8ccb317 100644
--- a/packages/synapse-interface/components/Portfolio/components/GasTokenAsset.tsx
+++ b/packages/synapse-interface/components/Portfolio/components/GasTokenAsset.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import Image from 'next/image'
 import { Token } from '@/utils/types'
 import { getParsedBalance } from '@/utils/getParsedBalance'
-import { HoverTooltip } from './HoverTooltip'
+import { HoverTooltip } from '../../HoverTooltip'
 import GasIcon from '@/components/icons/GasIcon'
 
 export const GasTokenAsset = ({
diff --git a/packages/synapse-interface/components/Portfolio/components/PortfolioAssetActionButton.tsx b/packages/synapse-interface/components/Portfolio/components/PortfolioAssetActionButton.tsx
index 2c159e4be9..601f589554 100644
--- a/packages/synapse-interface/components/Portfolio/components/PortfolioAssetActionButton.tsx
+++ b/packages/synapse-interface/components/Portfolio/components/PortfolioAssetActionButton.tsx
@@ -15,7 +15,7 @@ export const PortfolioAssetActionButton = ({
         id="portfolio-asset-action-button"
         className={`
           py-1 px-6 rounded-sm
-          border border-synapsePurple
+          border border-fuchsia-400
           ${!isDisabled && 'cursor-pointer hover:bg-surface active:opacity-70'}
         `}
         onClick={selectCallback}
diff --git a/packages/synapse-interface/components/Portfolio/components/PortfolioTokenAsset.tsx b/packages/synapse-interface/components/Portfolio/components/PortfolioTokenAsset.tsx
index be3b17044b..607034b855 100644
--- a/packages/synapse-interface/components/Portfolio/components/PortfolioTokenAsset.tsx
+++ b/packages/synapse-interface/components/Portfolio/components/PortfolioTokenAsset.tsx
@@ -1,21 +1,19 @@
 import React, { useCallback } from 'react'
-import _ from 'lodash'
+import { zeroAddress } from 'viem'
+import { isNumber } from 'lodash'
+import Image from 'next/image'
 import { useAppDispatch } from '@/store/hooks'
-import {
-  setFromChainId,
-  setFromToken,
-  updateFromValue,
-} from '@/slices/bridge/reducer'
+import { setFromChainId, setFromToken } from '@/slices/bridge/reducer'
 import { Token } from '@/utils/types'
 import { inputRef } from '../../StateManagedBridge/InputContainer'
-import Image from 'next/image'
 import { useBridgeState } from '@/slices/bridge/hooks'
 import { PortfolioAssetActionButton } from './PortfolioAssetActionButton'
-import { trimTrailingZeroesAfterDecimal } from '@/utils/trimTrailingZeroesAfterDecimal'
-import { zeroAddress } from 'viem'
-import GasIcon from '@/components/icons/GasIcon'
-import { HoverTooltip } from './HoverTooltip'
+import { HoverTooltip } from '@/components/HoverTooltip'
 import { getParsedBalance } from '@/utils/getParsedBalance'
+import { useGasEstimator } from '@/utils/hooks/useGasEstimator'
+import GasIcon from '@/components/icons/GasIcon'
+import { trimTrailingZeroesAfterDecimal } from '@/utils/trimTrailingZeroesAfterDecimal'
+import { formatAmount } from '@/utils/formatAmount'
 
 const handleFocusOnBridgeInput = () => {
   inputRef.current?.focus()
@@ -37,30 +35,26 @@ export const PortfolioTokenAsset = ({
   const dispatch = useAppDispatch()
   const { fromChainId, fromToken } = useBridgeState()
   const { icon, symbol, decimals, addresses } = token
-
-  const tokenDecimals = _.isNumber(decimals)
+  const tokenAddress = addresses[portfolioChainId]
+  const tokenDecimals = isNumber(decimals)
     ? decimals
     : decimals[portfolioChainId]
 
-  const parsedBalance = getParsedBalance(balance, tokenDecimals, 3)
-  const parsedBalanceLong = getParsedBalance(balance, tokenDecimals, 8)
+  const parsedBalance = getParsedBalance(balance, tokenDecimals)
+  const formattedBalance = formatAmount(parsedBalance)
 
   const isDisabled = false
-  const isTokenSelected =
-    fromToken === token && fromChainId === portfolioChainId
+  const isPortfolioChainSelected = fromChainId === portfolioChainId
+  const isTokenSelected = isPortfolioChainSelected && fromToken === token
+  const isGasToken = tokenAddress === zeroAddress
 
-  const handleFromSelectionCallback = useCallback(() => {
+  const { maxBridgeableGas } = useGasEstimator()
+
+  const handleFromSelectionCallback = useCallback(async () => {
     dispatch(setFromChainId(portfolioChainId))
     dispatch(setFromToken(token))
     handleFocusOnBridgeInput()
-    dispatch(
-      updateFromValue(
-        trimTrailingZeroesAfterDecimal(getParsedBalance(balance, tokenDecimals))
-      )
-    )
-  }, [token, balance, portfolioChainId])
-
-  const isBridgeableGasToken = addresses[portfolioChainId] === zeroAddress
+  }, [token, portfolioChainId])
 
   return (
     <div
@@ -70,14 +64,7 @@ export const PortfolioTokenAsset = ({
         ${isTokenSelected ? 'bg-tint border-surface' : 'border-transparent'}
       `}
     >
-      <div
-        onClick={handleFromSelectionCallback}
-        className={`
-          flex items-center gap-2
-          pl-2 pr-4 py-2 cursor-pointer rounded
-          hover:bg-surface active:opacity-70
-        `}
-      >
+      <div className="flex items-center gap-2 py-2 pl-2 pr-4 rounded cursor-default">
         <Image
           loading="lazy"
           alt={`${symbol} img`}
@@ -86,23 +73,31 @@ export const PortfolioTokenAsset = ({
         />
         <HoverTooltip
           hoverContent={
-            <div className="whitespace-nowrap">
-              {parsedBalanceLong} {symbol}
-            </div>
+            isPortfolioChainSelected && isGasToken && maxBridgeableGas ? (
+              <div className="whitespace-nowrap">
+                Available:{' '}
+                {trimTrailingZeroesAfterDecimal(maxBridgeableGas.toFixed(8))}{' '}
+                {symbol}
+              </div>
+            ) : (
+              <div className="whitespace-nowrap">
+                {parsedBalance} {symbol}
+              </div>
+            )
           }
         >
           <div>
-            {parsedBalance} {symbol}
+            {formattedBalance} {symbol}
           </div>
         </HoverTooltip>
 
-        {isBridgeableGasToken ? (
+        {isGasToken && (
           <HoverTooltip
             hoverContent={<div className="whitespace-nowrap">Gas token</div>}
           >
             <GasIcon className="pt-0.5 m-auto fill-secondary" />
           </HoverTooltip>
-        ) : null}
+        )}
       </div>
       <PortfolioAssetActionButton
         selectCallback={handleFromSelectionCallback}
diff --git a/packages/synapse-interface/components/Portfolio/components/PortfolioTokenVisualizer.tsx b/packages/synapse-interface/components/Portfolio/components/PortfolioTokenVisualizer.tsx
index 984f72197c..39d915f747 100644
--- a/packages/synapse-interface/components/Portfolio/components/PortfolioTokenVisualizer.tsx
+++ b/packages/synapse-interface/components/Portfolio/components/PortfolioTokenVisualizer.tsx
@@ -1,6 +1,6 @@
 import Image from 'next/image'
 import { TokenAndBalance } from '@/utils/actions/fetchPortfolioBalances'
-import { HoverTooltip } from './HoverTooltip'
+import { HoverTooltip } from '../../HoverTooltip'
 
 export const PortfolioTokenVisualizer = ({
   portfolioTokens,
diff --git a/packages/synapse-interface/components/Portfolio/components/SearchBar.tsx b/packages/synapse-interface/components/Portfolio/components/SearchBar.tsx
index d050f8a880..68fc29db9a 100644
--- a/packages/synapse-interface/components/Portfolio/components/SearchBar.tsx
+++ b/packages/synapse-interface/components/Portfolio/components/SearchBar.tsx
@@ -64,7 +64,7 @@ export const SearchBar = () => {
         ${!isMounted && 'border-opacity-30'}
         ${
           isFocused || isSearchInputActive
-            ? 'border-synapsePurple bg-tint'
+            ? 'border-fuchsia-400 bg-tint'
             : 'border-separator bg-transparent'
         }
       `}
diff --git a/packages/synapse-interface/components/Portfolio/components/SingleNetworkPortfolio.tsx b/packages/synapse-interface/components/Portfolio/components/SingleNetworkPortfolio.tsx
index 978980e5d5..392edc169e 100644
--- a/packages/synapse-interface/components/Portfolio/components/SingleNetworkPortfolio.tsx
+++ b/packages/synapse-interface/components/Portfolio/components/SingleNetworkPortfolio.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useEffect } from 'react'
 import { Address } from 'viem'
 import { useDispatch } from 'react-redux'
 import _, { isArray } from 'lodash'
diff --git a/packages/synapse-interface/components/Portfolio/components/ViewSearchAddressBanner.tsx b/packages/synapse-interface/components/Portfolio/components/ViewSearchAddressBanner.tsx
index 432e724125..7f548d31d0 100644
--- a/packages/synapse-interface/components/Portfolio/components/ViewSearchAddressBanner.tsx
+++ b/packages/synapse-interface/components/Portfolio/components/ViewSearchAddressBanner.tsx
@@ -15,7 +15,7 @@ export const ViewSearchAddressBanner = ({
       id="view-search-address-banner"
       className={`
         flex justify-between p-3 mb-3
-        border border-synapsePurple rounded-sm
+        border border-fuchsia-400 rounded-sm
       `}
       style={{
         background:
diff --git a/packages/synapse-interface/components/StateManagedBridge/AvailableBalance.tsx b/packages/synapse-interface/components/StateManagedBridge/AvailableBalance.tsx
new file mode 100644
index 0000000000..da1ee49204
--- /dev/null
+++ b/packages/synapse-interface/components/StateManagedBridge/AvailableBalance.tsx
@@ -0,0 +1,42 @@
+import React from 'react'
+import { joinClassNames } from '@/utils/joinClassNames'
+
+export const AvailableBalance = ({
+  balance,
+  maxBridgeableBalance,
+  isGasToken,
+  isGasEstimateLoading,
+  isDisabled,
+}: {
+  balance?: string
+  maxBridgeableBalance?: number
+  gasCost?: string
+  isGasToken: boolean
+  isGasEstimateLoading: boolean
+  isDisabled: boolean
+}) => {
+  const labelClassName = joinClassNames({
+    space: 'block',
+    text: 'text-xxs md:text-xs',
+    cursor: 'cursor-default',
+  })
+
+  if (isDisabled) {
+    return null
+  } else if (isGasToken && isGasEstimateLoading) {
+    return (
+      <label className={labelClassName} htmlFor="inputRow">
+        <span className="animate-pulse text-zinc-500 dark:text-zinc-400">
+          calculating gas...
+        </span>
+      </label>
+    )
+  } else {
+    return (
+      <label className={labelClassName} htmlFor="inputRow">
+        <span className="text-zinc-500 dark:text-zinc-400">Available: </span>
+        {maxBridgeableBalance?.toFixed(4) ?? balance ?? '0.0'}
+      </label>
+    )
+  }
+}
diff --git a/packages/synapse-interface/components/StateManagedBridge/BridgeWarnings.tsx b/packages/synapse-interface/components/StateManagedBridge/BridgeWarnings.tsx
index 0cd92355b7..429507eb1e 100644
--- a/packages/synapse-interface/components/StateManagedBridge/BridgeWarnings.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/BridgeWarnings.tsx
@@ -29,7 +29,7 @@ export const ConfirmDestinationAddressWarning = () => {
           onChange={handleCheckboxChange}
           className={`
               cursor-pointer border rounded-[4px] border-secondary
-             text-synapsePurple bg-transparent outline-none
+              text-fuchsia-400 bg-transparent outline-none
               focus:!outline-0 focus:ring-0 focus:!border-0
               active:!outline-0 active:ring-0 active:!border-0
             `}
diff --git a/packages/synapse-interface/components/StateManagedBridge/InputContainer.tsx b/packages/synapse-interface/components/StateManagedBridge/InputContainer.tsx
index e2365a6756..b17b6b285d 100644
--- a/packages/synapse-interface/components/StateManagedBridge/InputContainer.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/InputContainer.tsx
@@ -1,18 +1,17 @@
+import { isNull, isNumber } from 'lodash'
+import toast from 'react-hot-toast'
 import React, { useEffect, useState, useCallback, useMemo } from 'react'
-import { useDispatch } from 'react-redux'
 import { useAccount } from 'wagmi'
-
+import { useAppDispatch } from '@/store/hooks'
 import {
   initialState,
+  updateFromValue,
   setFromChainId,
   setFromToken,
-  updateFromValue,
 } from '@/slices/bridge/reducer'
-import MiniMaxButton from '../buttons/MiniMaxButton'
 import { ChainSelector } from '@/components/ui/ChainSelector'
 import { TokenSelector } from '@/components/ui/TokenSelector'
 import { AmountInput } from '@/components/ui/AmountInput'
-import { formatBigIntToString } from '@/utils/bigint/format'
 import { cleanNumberInput } from '@/utils/cleanNumberInput'
 import {
   ConnectToNetworkButton,
@@ -26,36 +25,93 @@ import { usePortfolioState } from '@/slices/portfolio/hooks'
 import { BridgeSectionContainer } from '@/components/ui/BridgeSectionContainer'
 import { BridgeAmountContainer } from '@/components/ui/BridgeAmountContainer'
 import { useFromTokenListArray } from './hooks/useFromTokenListArray'
+import { AvailableBalance } from './AvailableBalance'
+import { useGasEstimator } from '../../utils/hooks/useGasEstimator'
+import { getParsedBalance } from '@/utils/getParsedBalance'
+import { MaxButton } from './MaxButton'
+import { formatAmount } from '../../utils/formatAmount'
 
 export const inputRef = React.createRef<HTMLInputElement>()
 
 export const InputContainer = () => {
-  const { fromChainId, fromToken, fromValue } = useBridgeState()
+  const dispatch = useAppDispatch()
+  const { chain, isConnected } = useAccount()
+  const { balances } = usePortfolioState()
+  const { fromChainId, toChainId, fromToken, toToken, fromValue } =
+    useBridgeState()
   const [showValue, setShowValue] = useState('')
-
   const [hasMounted, setHasMounted] = useState(false)
 
-  const { balances } = usePortfolioState()
+  const { addresses, decimals } = fromToken || {}
+  const tokenDecimals = isNumber(decimals) ? decimals : decimals?.[fromChainId]
+  const balance: bigint = balances[fromChainId]?.find(
+    (token) => token.tokenAddress === addresses?.[fromChainId]
+  )?.balance
+  const parsedBalance = getParsedBalance(balance, tokenDecimals)
+  const formattedBalance = formatAmount(parsedBalance)
+
+  const hasValidFromSelections: boolean = useMemo(() => {
+    return Boolean(fromChainId && fromToken)
+  }, [fromChainId, fromToken])
+
+  const hasValidInputSelections: boolean = useMemo(() => {
+    return Boolean(fromChainId && fromToken && toChainId && toToken)
+  }, [fromChainId, toChainId, fromToken, toToken])
+
+  const {
+    isLoading,
+    isGasToken,
+    parsedGasCost,
+    maxBridgeableGas,
+    hasValidGasEstimateInputs,
+    estimateBridgeableBalanceCallback,
+  } = useGasEstimator()
+
+  const isInputMax =
+    maxBridgeableGas?.toString() === fromValue || parsedBalance === fromValue
+
+  const onMaxBalance = useCallback(async () => {
+    if (hasValidGasEstimateInputs()) {
+      const bridgeableBalance = await estimateBridgeableBalanceCallback()
+
+      if (isNull(bridgeableBalance)) {
+        dispatch(updateFromValue(parsedBalance))
+      } else if (bridgeableBalance > 0) {
+        dispatch(updateFromValue(bridgeableBalance?.toString()))
+      } else {
+        dispatch(updateFromValue('0.0'))
+        toast.error('Gas fees likely exceeds your balance.', {
+          id: 'toast-error-not-enough-gas',
+          duration: 10000,
+        })
+      }
+    } else {
+      dispatch(updateFromValue(parsedBalance))
+    }
+  }, [
+    fromChainId,
+    fromToken,
+    parsedBalance,
+    hasValidGasEstimateInputs,
+    estimateBridgeableBalanceCallback,
+  ])
 
   useEffect(() => {
     setHasMounted(true)
   }, [])
 
-  const { isConnected } = useAccount()
-  const { chain } = useAccount()
-
-  const dispatch = useDispatch()
-
-  const parsedBalance = balances[fromChainId]?.find(
-    (token) => token.tokenAddress === fromToken?.addresses[fromChainId]
-  )?.parsedBalance
-
-  const balance = balances[fromChainId]?.find(
-    (token) => token.tokenAddress === fromToken?.addresses[fromChainId]
-  )?.balance
+  const connectedStatus = useMemo(() => {
+    if (hasMounted && !isConnected) {
+      return <ConnectWalletButton />
+    } else if (hasMounted && isConnected && fromChainId === chain?.id) {
+      return <ConnectedIndicator />
+    } else if (hasMounted && isConnected && fromChainId !== chain?.id) {
+      return <ConnectToNetworkButton chainId={fromChainId} />
+    }
+  }, [chain, fromChainId, isConnected, hasMounted])
 
   useEffect(() => {
-    if (fromToken && fromToken?.decimals[fromChainId]) {
+    if (fromToken && tokenDecimals) {
       setShowValue(fromValue)
     }
 
@@ -83,24 +139,6 @@ export const InputContainer = () => {
     }
   }
 
-  const onMaxBalance = useCallback(() => {
-    dispatch(
-      updateFromValue(
-        formatBigIntToString(balance, fromToken?.decimals[fromChainId])
-      )
-    )
-  }, [balance, fromChainId, fromToken])
-
-  const connectedStatus = useMemo(() => {
-    if (hasMounted && !isConnected) {
-      return <ConnectWalletButton />
-    } else if (hasMounted && isConnected && fromChainId === chain?.id) {
-      return <ConnectedIndicator />
-    } else if (hasMounted && isConnected && fromChainId !== chain?.id) {
-      return <ConnectToNetworkButton chainId={fromChainId} />
-    }
-  }, [chain, fromChainId, isConnected, hasMounted])
-
   return (
     <BridgeSectionContainer>
       <div className="flex items-center justify-between">
@@ -109,21 +147,30 @@ export const InputContainer = () => {
       </div>
       <BridgeAmountContainer>
         <FromTokenSelector />
-        <AmountInput
-          inputRef={inputRef}
-          hasMounted={hasMounted}
-          isConnected={isConnected}
-          showValue={showValue}
-          handleFromValueChange={handleFromValueChange}
-          parsedBalance={parsedBalance}
-          onMaxBalance={onMaxBalance}
-        />
-        {hasMounted && isConnected && (
-          <MiniMaxButton
-            disabled={!balance || balance === 0n ? true : false}
-            onClickBalance={onMaxBalance}
+        <div className="flex flex-wrap w-full">
+          <AmountInput
+            inputRef={inputRef}
+            showValue={showValue}
+            handleFromValueChange={handleFromValueChange}
+          />
+          <AvailableBalance
+            balance={formattedBalance}
+            maxBridgeableBalance={maxBridgeableGas}
+            gasCost={parsedGasCost}
+            isGasToken={isGasToken}
+            isGasEstimateLoading={isLoading}
+            isDisabled={!isConnected || !hasValidFromSelections}
+          />
+          <MaxButton
+            onClick={onMaxBalance}
+            isHidden={
+              !isConnected ||
+              !hasValidInputSelections ||
+              isLoading ||
+              isInputMax
+            }
           />
-        )}
+        </div>
       </BridgeAmountContainer>
     </BridgeSectionContainer>
   )
diff --git a/packages/synapse-interface/components/StateManagedBridge/MaxButton.tsx b/packages/synapse-interface/components/StateManagedBridge/MaxButton.tsx
new file mode 100644
index 0000000000..425b78bcdd
--- /dev/null
+++ b/packages/synapse-interface/components/StateManagedBridge/MaxButton.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { joinClassNames } from '@/utils/joinClassNames'
+
+export const MaxButton = ({ onClick, isHidden }) => {
+  const buttonClassName = joinClassNames({
+    display: `${isHidden ? 'hidden' : 'block'}`,
+    spacing: 'px-1.5',
+    text: 'text-fuchsia-400 text-xxs md:text-xs',
+    animation: 'transition-all duration-150 transform-gpu',
+    hover: 'hover:opacity-70 cursor-pointer',
+  })
+
+  return (
+    <button onClick={onClick} className={buttonClassName}>
+      Max
+    </button>
+  )
+}
diff --git a/packages/synapse-interface/components/StateManagedSwap/SwapInputContainer.tsx b/packages/synapse-interface/components/StateManagedSwap/SwapInputContainer.tsx
index 383cd07ac9..4e9f0bd71b 100644
--- a/packages/synapse-interface/components/StateManagedSwap/SwapInputContainer.tsx
+++ b/packages/synapse-interface/components/StateManagedSwap/SwapInputContainer.tsx
@@ -1,8 +1,6 @@
 import React, { useEffect, useState, useRef, useCallback, useMemo } from 'react'
 import { useDispatch } from 'react-redux'
 import { useAccount } from 'wagmi'
-
-import MiniMaxButton from '@/components/buttons/MiniMaxButton'
 import { TokenSelector } from '@/components/ui/TokenSelector'
 import { formatBigIntToString, stringToBigInt } from '@/utils/bigint/format'
 import { cleanNumberInput } from '@/utils/cleanNumberInput'
@@ -26,6 +24,11 @@ import { CHAINS_BY_ID } from '@/constants/chains'
 import { useSwapChainListArray } from '@/components/StateManagedSwap//hooks/useSwapChainListArray'
 import { useSwapFromTokenListArray } from '@/components/StateManagedSwap/hooks/useSwapFromTokenListOverlay'
 import { AmountInput } from '@/components/ui/AmountInput'
+import { joinClassNames } from '@/utils/joinClassNames'
+import { MaxButton } from '../StateManagedBridge/MaxButton'
+import { trimTrailingZeroesAfterDecimal } from '@/utils/trimTrailingZeroesAfterDecimal'
+import { formatAmount } from '@/utils/formatAmount'
+import { getParsedBalance } from '@/utils/getParsedBalance'
 
 export const SwapInputContainer = () => {
   const inputRef = useRef<HTMLInputElement>(null)
@@ -50,9 +53,12 @@ export const SwapInputContainer = () => {
     (token) => token.tokenAddress === swapFromToken?.addresses[swapChainId]
   )
 
-  const parsedBalance = tokenData?.parsedBalance
-
   const balance = tokenData?.balance
+  const decimals = tokenData?.token?.decimals[swapChainId]
+  const parsedBalance = getParsedBalance(balance, decimals)
+  const formattedBalance = formatAmount(parsedBalance)
+
+  const isInputMax = parsedBalance === swapFromValue
 
   useEffect(() => {
     if (
@@ -90,7 +96,9 @@ export const SwapInputContainer = () => {
   const onMaxBalance = useCallback(() => {
     dispatch(
       updateSwapFromValue(
-        formatBigIntToString(balance, swapFromToken.decimals[swapChainId])
+        trimTrailingZeroesAfterDecimal(
+          formatBigIntToString(balance, swapFromToken.decimals[swapChainId])
+        )
       )
     )
   }, [balance, swapChainId, swapFromToken])
@@ -107,6 +115,12 @@ export const SwapInputContainer = () => {
     }
   }, [chain, swapChainId, isConnected, hasMounted])
 
+  const labelClassName = joinClassNames({
+    space: 'block',
+    textColor: 'text-xxs md:text-xs',
+    cursor: 'cursor-default',
+  })
+
   return (
     <BridgeSectionContainer>
       <div className="flex items-center justify-between">
@@ -115,22 +129,27 @@ export const SwapInputContainer = () => {
       </div>
       <BridgeAmountContainer>
         <SwapFromTokenSelector />
-        <AmountInput
-          inputRef={inputRef}
-          hasMounted={hasMounted}
-          isConnected={isConnected}
-          showValue={showValue}
-          handleFromValueChange={handleFromValueChange}
-          parsedBalance={parsedBalance}
-          onMaxBalance={onMaxBalance}
-        />
-
-        {hasMounted && isConnected && (
-          <MiniMaxButton
-            disabled={!balance || balance === 0n ? true : false}
-            onClickBalance={onMaxBalance}
+        <div className="flex flex-col">
+          <AmountInput
+            inputRef={inputRef}
+            showValue={showValue}
+            handleFromValueChange={handleFromValueChange}
           />
-        )}
+          <div className="flex">
+            {hasMounted && isConnected && (
+              <label htmlFor="inputRow" className={labelClassName}>
+                <span className="text-zinc-500 dark:text-zinc-400">
+                  Available:{' '}
+                </span>
+                {formattedBalance ?? '0.0'}
+              </label>
+            )}
+            <MaxButton
+              onClick={onMaxBalance}
+              isHidden={!isConnected || !balance || isInputMax}
+            />
+          </div>
+        </div>
       </BridgeAmountContainer>
     </BridgeSectionContainer>
   )
diff --git a/packages/synapse-interface/components/buttons/MiniMaxButton.tsx b/packages/synapse-interface/components/buttons/MiniMaxButton.tsx
deleted file mode 100644
index b82edde14e..0000000000
--- a/packages/synapse-interface/components/buttons/MiniMaxButton.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { joinClassNames } from '@/utils/joinClassNames'
-
-type MaxButtonTypes = {
-  disabled: boolean
-  onClickBalance: () => void
-}
-
-export default function MaxButton({
-  disabled,
-  onClickBalance,
-}: MaxButtonTypes) {
-  const className = joinClassNames({
-    space: 'px-4 py-1 -ml-1 mr-1 rounded',
-    background: 'bg-zinc-100 dark:bg-separator', // TODO: Remove
-    // background: 'bg-zinc-100 dark:bg-zinc-700',
-    border: 'border border-zinc-200 dark:border-transparent',
-    hover: 'enabled:hover:border-zinc-400 enabled:hover:dark:border-zinc-500',
-    disabled: 'disabled:opacity-60 disabled:cursor-default',
-  })
-
-  return (
-    <button className={className} onClick={onClickBalance} disabled={disabled}>
-      Max
-    </button>
-  )
-}
diff --git a/packages/synapse-interface/components/ui/AmountInput.tsx b/packages/synapse-interface/components/ui/AmountInput.tsx
index 441f8b0d9d..b7bc8b9e03 100644
--- a/packages/synapse-interface/components/ui/AmountInput.tsx
+++ b/packages/synapse-interface/components/ui/AmountInput.tsx
@@ -5,24 +5,17 @@ import { joinClassNames } from '@/utils/joinClassNames'
 interface AmountInputTypes {
   inputRef?: React.RefObject<HTMLInputElement>
   disabled?: boolean
-  hasMounted?: boolean
-  isConnected?: boolean
   isLoading?: boolean
   showValue: string
   handleFromValueChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
-  parsedBalance?: string
-  onMaxBalance?: () => void
 }
+
 export function AmountInput({
   inputRef,
   disabled = false,
-  hasMounted,
-  isConnected,
   isLoading = false,
   showValue,
   handleFromValueChange,
-  parsedBalance,
-  onMaxBalance,
 }: AmountInputTypes) {
   const inputClassName = joinClassNames({
     unset: 'bg-transparent border-none p-0',
@@ -32,15 +25,8 @@ export function AmountInput({
     focus: 'focus:outline-none focus:ring-0 focus:border-none',
   })
 
-  const labelClassName = joinClassNames({
-    space: 'block',
-    textColor: 'text-xxs md:text-xs',
-    animation: 'transition-all duration-150 transform-gpu',
-    hover: 'hover:opacity-70 cursor-pointer',
-  })
-
   return (
-    <div className="flex-1">
+    <>
       {isLoading ? (
         <LoadingDots className="opacity-50" />
       ) : (
@@ -59,16 +45,6 @@ export function AmountInput({
           maxLength={79}
         />
       )}
-      {hasMounted && isConnected && !disabled && (
-        <label
-          htmlFor="inputRow"
-          className={labelClassName}
-          onClick={onMaxBalance}
-        >
-          {parsedBalance ?? '0.0'}
-          <span className="text-zinc-500 dark:text-zinc-400"> available</span>
-        </label>
-      )}
-    </div>
+    </>
   )
 }
diff --git a/packages/synapse-interface/components/ui/SelectSpecificTokenButton.tsx b/packages/synapse-interface/components/ui/SelectSpecificTokenButton.tsx
index a89b12480a..feb161728f 100644
--- a/packages/synapse-interface/components/ui/SelectSpecificTokenButton.tsx
+++ b/packages/synapse-interface/components/ui/SelectSpecificTokenButton.tsx
@@ -1,5 +1,5 @@
 import _ from 'lodash'
-import { memo, useEffect, useRef } from 'react'
+import { memo, useRef } from 'react'
 import Image from 'next/image'
 
 import { type Token, type ActionTypes } from '@/utils/types'
@@ -10,6 +10,8 @@ import { findChainIdsWithPausedToken } from '@/constants/tokens'
 import { getActiveStyleForButton, getHoverStyleForButton } from '@/styles/hover'
 import { joinClassNames } from '@/utils/joinClassNames'
 import { useSwapState } from '@/slices/swap/hooks'
+import { formatAmount } from '@/utils/formatAmount'
+import { getParsedBalance } from '@/utils/getParsedBalance'
 
 export const SelectSpecificTokenButton = ({
   showAllChains,
@@ -81,9 +83,13 @@ const ButtonContent = memo(
   }) => {
     const portfolioBalances = usePortfolioBalances()
 
-    const parsedBalance = portfolioBalances[chainId]?.find(
+    const tokenData = portfolioBalances[chainId]?.find(
       (tb) => tb.token.addresses[chainId] === token.addresses[chainId]
-    )?.parsedBalance
+    )
+    const decimals = tokenData?.token?.decimals[chainId]
+    const balance = tokenData?.balance
+    const parsedBalance = getParsedBalance(balance, decimals)
+    const formattedBalance = formatAmount(parsedBalance)
 
     return (
       <div data-test-id="button-content" className="">
@@ -91,7 +97,7 @@ const ButtonContent = memo(
           token={token}
           showAllChains={showAllChains}
           isOrigin={isOrigin}
-          parsedBalance={parsedBalance}
+          parsedBalance={formattedBalance}
         />
       </div>
     )
diff --git a/packages/synapse-interface/components/ui/SelectorWrapper.tsx b/packages/synapse-interface/components/ui/SelectorWrapper.tsx
index 58592bed81..c1d1a690c8 100644
--- a/packages/synapse-interface/components/ui/SelectorWrapper.tsx
+++ b/packages/synapse-interface/components/ui/SelectorWrapper.tsx
@@ -78,7 +78,7 @@ export const SelectorWrapper = ({
   const itemName = selectedItem?.['symbol' in selectedItem ? 'symbol' : 'name']
 
   return (
-    <div className="relative" ref={parentRef}>
+    <div className="relative min-w-fit" ref={parentRef}>
       <button
         data-test-id={`${dataTestId}-button`}
         className={buttonClassName}
diff --git a/packages/synapse-interface/contexts/BackgroundListenerProvider.tsx b/packages/synapse-interface/contexts/BackgroundListenerProvider.tsx
index 501484ef5b..181b806ba2 100644
--- a/packages/synapse-interface/contexts/BackgroundListenerProvider.tsx
+++ b/packages/synapse-interface/contexts/BackgroundListenerProvider.tsx
@@ -7,6 +7,7 @@ import { useRiskEvent } from '@/utils/hooks/useRiskEvent'
 import { useTransactionListener } from '@/utils/hooks/useTransactionListener'
 import { use_TransactionsListener } from '@/utils/hooks/use_TransactionsListener'
 import { useFetchPricesOnInterval } from '@/utils/hooks/useFetchPricesOnInterval'
+import { useFetchGasDataOnInterval } from '@/utils/hooks/useFetchGasDataOnInterval'
 
 const BackgroundListenerContext = createContext(null)
 
@@ -18,6 +19,7 @@ export const BackgroundListenerProvider = ({ children }) => {
   useBridgeListener()
   useRiskEvent()
   useFetchPricesOnInterval()
+  useFetchGasDataOnInterval()
 
   return (
     <BackgroundListenerContext.Provider value={null}>
diff --git a/packages/synapse-interface/slices/gasDataSlice.ts b/packages/synapse-interface/slices/gasDataSlice.ts
new file mode 100644
index 0000000000..e56662c46b
--- /dev/null
+++ b/packages/synapse-interface/slices/gasDataSlice.ts
@@ -0,0 +1,102 @@
+import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'
+import { estimateFeesPerGas } from '@wagmi/core'
+
+import { wagmiConfig } from '@/wagmiConfig'
+
+export interface GasDataState {
+  chainId: number
+  gasLimit: bigint
+  gasData: {
+    gasPrice?: bigint
+    maxFeePerGas: bigint
+    maxPriorityFeePerGas: bigint
+    formatted: {
+      gasPrice?: string
+      maxFeePerGas: string
+      maxPriorityFeePerGas: string
+    }
+  }
+  isLoadingGasLimit: boolean
+  isLoadingGasData: boolean
+}
+
+const getGasData = async (chainId: number) => {
+  const feeData = await estimateFeesPerGas(wagmiConfig, {
+    chainId,
+    formatUnits: 'gwei',
+  })
+
+  return feeData
+}
+
+export const fetchGasData = createAsyncThunk(
+  'gasData/fetchGasData',
+  async (chainId: number) => {
+    const gasData = await getGasData(chainId)
+    return { gasData, chainId }
+  }
+)
+
+const initialState: GasDataState = {
+  chainId: null,
+  gasLimit: null,
+  gasData: {
+    gasPrice: null,
+    maxFeePerGas: null,
+    maxPriorityFeePerGas: null,
+    formatted: {
+      gasPrice: null,
+      maxFeePerGas: null,
+      maxPriorityFeePerGas: null,
+    },
+  },
+  isLoadingGasLimit: false,
+  isLoadingGasData: true,
+}
+
+export const gasDataSlice = createSlice({
+  name: 'gasData',
+  initialState,
+  reducers: {
+    setIsLoadingGasLimit: (state: GasDataState, action) => {
+      state.isLoadingGasLimit = action.payload
+    },
+    setGasLimit: (state: GasDataState, action) => {
+      state.gasLimit = action.payload
+      state.isLoadingGasLimit = false
+    },
+    resetGasLimit: (state: GasDataState) => {
+      state.gasLimit = initialState.gasLimit
+      state.isLoadingGasLimit = initialState.isLoadingGasLimit
+    },
+    resetGasData: (state: GasDataState) => {
+      state.chainId = initialState.chainId
+      state.gasData = initialState.gasData
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchGasData.pending, (state) => {
+      state.isLoadingGasData = true
+    })
+    builder
+      .addCase(fetchGasData.fulfilled, (state, action) => {
+        const { chainId, gasData } = action.payload
+        state.isLoadingGasData = false
+        state.chainId = chainId
+        state.gasData = gasData
+      })
+      .addCase(fetchGasData.rejected, (state) => {
+        state.isLoadingGasData = false
+        console.error('Error fetching gas data')
+      })
+  },
+})
+
+export const {
+  setGasLimit,
+  resetGasLimit,
+  resetGasData,
+  setIsLoadingGasLimit,
+} = gasDataSlice.actions
+
+export default gasDataSlice.reducer
diff --git a/packages/synapse-interface/store/reducer.ts b/packages/synapse-interface/store/reducer.ts
index 82980a702f..6c41870f92 100644
--- a/packages/synapse-interface/store/reducer.ts
+++ b/packages/synapse-interface/store/reducer.ts
@@ -14,6 +14,7 @@ import poolDeposit from '@/slices/poolDepositSlice'
 import poolUserData from '@/slices/poolUserDataSlice'
 import poolWithdraw from '@/slices/poolWithdrawSlice'
 import priceData from '@/slices/priceDataSlice'
+import gasData from '@/slices/gasDataSlice'
 import { api } from '@/slices/api/slice'
 import { RootActions } from '@/slices/application/actions'
 
@@ -42,6 +43,7 @@ export const appReducer = combineReducers({
   poolUserData,
   poolWithdraw,
   priceData,
+  gasData,
   [api.reducerPath]: api.reducer,
   ...persistedReducers,
 })
diff --git a/packages/synapse-interface/utils/calculateGasCost.ts b/packages/synapse-interface/utils/calculateGasCost.ts
new file mode 100644
index 0000000000..870b01372c
--- /dev/null
+++ b/packages/synapse-interface/utils/calculateGasCost.ts
@@ -0,0 +1,56 @@
+import { formatGwei } from 'viem'
+
+import { OPTIMISM } from '@/constants/chains/master'
+
+/**
+ * Calculates the estimated gas cost for a transaction.
+ *
+ * @param {string} gasPrice - The current network gas price in Gwei
+ * @param {number} gasLimit - Selected gasLimit to execute Transaction
+ */
+
+export const calculateGasCost = (
+  gasPrice: string | undefined,
+  gasLimit: string,
+  chainId: number | null
+): {
+  rawGasCost: string
+  parsedGasCost: string
+} => {
+  if (!gasPrice || !gasLimit) {
+    return {
+      rawGasCost: null,
+      parsedGasCost: null,
+    }
+  }
+
+  let upperLimitBuffer = 1.75
+
+  if (chainId === OPTIMISM.id) {
+    upperLimitBuffer = 3
+  }
+
+  const gasLimitFloat = parseFloat(gasLimit) ? parseFloat(gasLimit) : 1
+  const gasPriceFloat = parseFloat(gasPrice) ? parseFloat(gasPrice) : 1
+
+  const estimatedGasCostInGwei =
+    gasLimitFloat * gasPriceFloat * upperLimitBuffer
+
+  const oneGwei = parseFloat(formatGwei(1n))
+
+  const formattedEstimatedGasCost = estimatedGasCostInGwei
+    ? estimatedGasCostInGwei * oneGwei
+    : null
+
+  // console.log('estimatedGasCostInGwei: ', estimatedGasCostInGwei)
+  // console.log('gasLimit: ', gasLimit)
+  // console.log('gasPrice: ', gasPrice)
+  // console.log('gasLimitFloat: ', gasLimitFloat)
+  // console.log('gasPriceFloat: ', gasPriceFloat)
+  // console.log('formattedEstimatedGasCost: ', formattedEstimatedGasCost)
+
+  return {
+    rawGasCost: estimatedGasCostInGwei?.toString(),
+    parsedGasCost: formattedEstimatedGasCost?.toString(),
+  }
+}
diff --git a/packages/synapse-interface/utils/formatAmount.ts b/packages/synapse-interface/utils/formatAmount.ts
new file mode 100644
index 0000000000..3f881cee4b
--- /dev/null
+++ b/packages/synapse-interface/utils/formatAmount.ts
@@ -0,0 +1,69 @@
+interface FormatOptions {
+  fullAmount?: boolean
+  standardDigits?: number
+  useCompactNotation?: boolean
+  compactDigits?: number
+  minimumAmount?: number
+  roundingMode?: string
+}
+
+export const formatAmount = (
+  amount: string,
+  options?: FormatOptions
+): string => {
+  if (amount === '') return ''
+
+  const floatAmount = parseFloat(amount)
+
+  try {
+    if (!Number.isFinite(floatAmount)) {
+      throw new TypeError(`"${amount}" is not a finite number`)
+    }
+  } catch ({ name, message }) {
+    console.error(name, message)
+    return amount
+  }
+
+  const fullAmount = options?.fullAmount ?? false
+  const standardDigits = options?.standardDigits ?? 4
+  const useCompactNotation = options?.useCompactNotation ?? true
+  const compactDigits = options?.compactDigits ?? (useCompactNotation ? 2 : 0)
+  const minimumAmount = options?.minimumAmount ?? 0.0001
+
+  const locales = 'en-UK'
+
+  if (!floatAmount) return '0.0'
+
+  if (fullAmount) return Intl.NumberFormat(locales).format(floatAmount)
+
+  if (floatAmount < minimumAmount) return `< ${minimumAmount}`
+
+  const absAmount = Math.abs(floatAmount)
+
+  if (absAmount < 0.0001)
+    return Intl.NumberFormat(locales, {
+      maximumSignificantDigits: 1,
+    }).format(floatAmount)
+
+  if (absAmount < 1)
+    return Intl.NumberFormat(locales, {
+      minimumFractionDigits: standardDigits,
+    }).format(floatAmount)
+
+  if (absAmount < 1000)
+    return Intl.NumberFormat(locales, {
+      minimumSignificantDigits: standardDigits,
+      maximumSignificantDigits: standardDigits,
+    }).format(floatAmount)
+
+  if (absAmount < 1000000)
+    return Intl.NumberFormat(locales, {
+      maximumFractionDigits: 0,
+    }).format(floatAmount)
+
+  return Intl.NumberFormat(locales, {
+    minimumFractionDigits: compactDigits,
+    maximumFractionDigits: compactDigits,
+    notation: useCompactNotation ? 'compact' : 'standard',
+  }).format(floatAmount)
+}
diff --git a/packages/synapse-interface/utils/getParsedBalance.ts b/packages/synapse-interface/utils/getParsedBalance.ts
index 7c76b042f8..4772339db7 100644
--- a/packages/synapse-interface/utils/getParsedBalance.ts
+++ b/packages/synapse-interface/utils/getParsedBalance.ts
@@ -1,13 +1,12 @@
+import { trimTrailingZeroesAfterDecimal } from '@/utils/trimTrailingZeroesAfterDecimal'
 import { formatBigIntToString } from './bigint/format'
-import { hasOnlyZeroes } from './hasOnlyZeroes'
 
 export const getParsedBalance = (
   balance: bigint,
   decimals: number,
   places?: number
 ) => {
-  const formattedBalance = formatBigIntToString(balance, decimals, places)
-  const verySmallBalance = balance > 0n && hasOnlyZeroes(formattedBalance)
-
-  return verySmallBalance ? '< 0.001' : formattedBalance
+  return trimTrailingZeroesAfterDecimal(
+    formatBigIntToString(balance, decimals, places)
+  )
 }
diff --git a/packages/synapse-interface/utils/hasOnlyZeroes.ts b/packages/synapse-interface/utils/hasOnlyZeroes.ts
index 98a5d5f7d0..ca4edd7bd7 100644
--- a/packages/synapse-interface/utils/hasOnlyZeroes.ts
+++ b/packages/synapse-interface/utils/hasOnlyZeroes.ts
@@ -1,3 +1,3 @@
 export const hasOnlyZeroes = (input: string): boolean => {
-  return /^0+(\.0+)?$/.test(input)
+  return /^0+(\.0*)?$/.test(input)
 }
diff --git a/packages/synapse-interface/utils/hooks/useFetchGasDataOnInterval.ts b/packages/synapse-interface/utils/hooks/useFetchGasDataOnInterval.ts
new file mode 100644
index 0000000000..23c3c29841
--- /dev/null
+++ b/packages/synapse-interface/utils/hooks/useFetchGasDataOnInterval.ts
@@ -0,0 +1,28 @@
+import { useEffect } from 'react'
+
+import { useAppDispatch } from '@/store/hooks'
+import { useBridgeState } from '@/slices/bridge/hooks'
+import { fetchGasData, resetGasData } from '@/slices/gasDataSlice'
+
+export const useFetchGasDataOnInterval = () => {
+  const dispatch = useAppDispatch()
+  const { fromChainId } = useBridgeState()
+
+  const fetchGas = () => {
+    if (fromChainId) {
+      console.log(`fetching gas for ${fromChainId}`)
+      dispatch(fetchGasData(fromChainId))
+    }
+  }
+
+  useEffect(() => {
+    // Reset gas data when selecting new chain
+    dispatch(resetGasData())
+
+    fetchGas()
+
+    const interval = setInterval(fetchGas, 60000)
+
+    return () => clearInterval(interval)
+  }, [dispatch, fromChainId])
+}
diff --git a/packages/synapse-interface/utils/hooks/useGasEstimator.ts b/packages/synapse-interface/utils/hooks/useGasEstimator.ts
new file mode 100644
index 0000000000..e902578e20
--- /dev/null
+++ b/packages/synapse-interface/utils/hooks/useGasEstimator.ts
@@ -0,0 +1,272 @@
+import { isNumber } from 'lodash'
+import { zeroAddress, Address } from 'viem'
+import { useEffect } from 'react'
+import { useAccount } from 'wagmi'
+import { estimateGas } from '@wagmi/core'
+import { PayloadAction } from '@reduxjs/toolkit'
+
+import { useAppDispatch, useAppSelector } from '@/store/hooks'
+import { useBridgeState } from '@/slices/bridge/hooks'
+import { usePortfolioState } from '@/slices/portfolio/hooks'
+import { TokenAndBalance } from '@/utils/actions/fetchPortfolioBalances'
+import { useSynapseContext } from '@/utils/providers/SynapseProvider'
+import { calculateGasCost } from '../calculateGasCost'
+import { stringToBigInt, formatBigIntToString } from '../bigint/format'
+import { Token } from '../types'
+import { wagmiConfig } from '@/wagmiConfig'
+import {
+  fetchGasData,
+  setGasLimit,
+  resetGasLimit,
+  setIsLoadingGasLimit,
+  GasDataState,
+} from '@/slices/gasDataSlice'
+
+export const useGasEstimator = () => {
+  const dispatch = useAppDispatch()
+  const { address } = useAccount()
+  const { synapseSDK } = useSynapseContext()
+  const { balances } = usePortfolioState()
+  const { fromChainId, toChainId, fromToken, toToken } = useBridgeState()
+  const { gasData, gasLimit, isLoadingGasLimit } = useAppSelector(
+    (state) => state.gasData
+  )
+  const { maxFeePerGas } = gasData?.formatted
+  const { rawGasCost, parsedGasCost } = calculateGasCost(
+    maxFeePerGas,
+    gasLimit?.toString(),
+    fromChainId
+  )
+
+  const { addresses, decimals } = fromToken || {}
+  const tokenAddress = addresses?.[fromChainId]
+  const tokenDecimals = isNumber(decimals) ? decimals : decimals?.[fromChainId]
+  const isGasToken: boolean = tokenAddress === zeroAddress
+  const selectedFromToken: TokenAndBalance = balances[fromChainId]?.find(
+    (token) => token.tokenAddress === tokenAddress
+  )
+  const parsedBalance = formatBigIntToString(
+    selectedFromToken?.balance,
+    tokenDecimals
+  )
+
+  const gasFeeExceedsBalance: boolean =
+    isGasToken &&
+    parsedGasCost &&
+    parsedBalance &&
+    parseFloat(parsedGasCost) > parseFloat(parsedBalance)
+
+  const maxBridgeableGas: number | null =
+    isGasToken && parsedGasCost
+      ? calculateMaxBridgeableGas(
+          parseFloat(parsedBalance),
+          parseFloat(parsedGasCost)
+        )
+      : null
+
+  const hasValidGasEstimateInputs = (): boolean => {
+    if (!fromChainId || !toChainId) return false
+    if (!fromToken || !toToken) return false
+    if (!isGasToken) return false
+    if (!selectedFromToken || !parsedBalance) return false
+    return true
+  }
+
+  const estimateGasLimit = async () => {
+    if (hasValidGasEstimateInputs()) {
+      dispatch(resetGasLimit())
+      dispatch(setIsLoadingGasLimit(true))
+      try {
+        const gasLimit = await queryEstimatedBridgeGasLimit(
+          synapseSDK,
+          address,
+          address,
+          fromChainId,
+          toChainId,
+          fromToken,
+          toToken,
+          parsedBalance
+        )
+        dispatch(setGasLimit(gasLimit))
+        return gasLimit
+      } catch (error) {
+        console.error('Error estimating gas limit:', error)
+        dispatch(resetGasLimit())
+      }
+    }
+  }
+
+  const estimateBridgeableBalance = async () => {
+    const gasData = (await dispatch(
+      fetchGasData(fromChainId)
+    )) as PayloadAction<GasDataState>
+    const { maxFeePerGas } = gasData?.payload?.gasData.formatted
+
+    const gasLimit = await estimateGasLimit()
+    const { parsedGasCost } = calculateGasCost(
+      maxFeePerGas,
+      gasLimit?.toString(),
+      fromChainId
+    )
+    const maxBridgeableGas: number | null =
+      isGasToken && parsedGasCost
+        ? calculateMaxBridgeableGas(
+            parseFloat(parsedBalance),
+            parseFloat(parsedGasCost)
+          )
+        : null
+
+    return maxBridgeableGas
+  }
+
+  // Reset gas limit when chainId changes
+  useEffect(() => {
+    dispatch(resetGasLimit())
+  }, [fromChainId])
+
+  return {
+    isLoading: isLoadingGasLimit,
+    isGasToken,
+    rawGasCost,
+    parsedGasCost,
+    maxBridgeableGas,
+    gasFeeExceedsBalance,
+    hasValidGasEstimateInputs,
+    estimateGasLimitCallback: estimateGasLimit,
+    estimateBridgeableBalanceCallback: estimateBridgeableBalance,
+  }
+}
+
+const calculateMaxBridgeableGas = (
+  parsedGasBalance: number,
+  parsedGasCost: number
+): number => {
+  const maxBridgeable = parsedGasBalance - parsedGasCost
+  return maxBridgeable > 0 ? maxBridgeable : 0
+}
+
+const getBridgeQuote = async (
+  synapseSDK: any,
+  fromChainId: number,
+  toChainId: number,
+  fromToken: Token,
+  toToken: Token,
+  amount: string
+) => {
+  try {
+    return await synapseSDK.bridgeQuote(
+      fromChainId,
+      toChainId,
+      fromToken.addresses[fromChainId],
+      toToken.addresses[toChainId],
+      stringToBigInt(amount, fromToken?.decimals[fromChainId])
+    )
+  } catch (error) {
+    console.error('getBridgeQuote: ', error)
+    return null
+  }
+}
+
+const getBridgePayload = async (
+  synapseSDK: any,
+  bridgeQuote: any | null,
+  address: string,
+  toAddress: string,
+  fromChainId: number,
+  toChainId: number,
+  fromToken: Token,
+  amount: string
+) => {
+  if (!bridgeQuote) return null
+
+  try {
+    const data = await synapseSDK.bridge(
+      address,
+      bridgeQuote.routerAddress,
+      fromChainId,
+      toChainId,
+      fromToken?.addresses[fromChainId as keyof Token['addresses']],
+      stringToBigInt(amount, fromToken?.decimals[fromChainId]),
+      bridgeQuote.originQuery,
+      bridgeQuote.destQuery
+    )
+
+    const payload =
+      fromToken?.addresses[fromChainId as keyof Token['addresses']] ===
+        zeroAddress ||
+      fromToken?.addresses[fromChainId as keyof Token['addresses']] === ''
+        ? {
+            data: data.data,
+            to: data.to,
+            value: stringToBigInt(amount, fromToken?.decimals[fromChainId]),
+          }
+        : data
+
+    return payload
+  } catch (error) {
+    console.error('getBridgePayload: ', error)
+    return null
+  }
+}
+
+const getBridgeGasLimitEstimate = async (
+  bridgePayload: any,
+  fromChainId: number,
+  address: string
+) => {
+  if (!bridgePayload) return null
+
+  try {
+    const gasEstimate = await estimateGas(wagmiConfig, {
+      value: bridgePayload.value,
+      to: bridgePayload.to,
+      account: address as Address,
+      data: bridgePayload.data,
+      chainId: fromChainId,
+    })
+
+    return gasEstimate
+  } catch (error) {
+    console.error('calculateEstimatedBridgeGasLimit: ', error)
+    return null
+  }
+}
+
+const queryEstimatedBridgeGasLimit = async (
+  synapseSDK: any,
+  address: string,
+  toAddress: string,
+  fromChainId: number,
+  toChainId: number,
+  fromToken: Token,
+  toToken: Token,
+  amount: string
+) => {
+  const bridgeQuote = await getBridgeQuote(
+    synapseSDK,
+    fromChainId,
+    toChainId,
+    fromToken,
+    toToken,
+    amount
+  )
+
+  const bridgePayload = await getBridgePayload(
+    synapseSDK,
+    bridgeQuote,
+    address,
+    toAddress,
+    fromChainId,
+    toChainId,
+    fromToken,
+    amount
+  )
+
+  const gasLimit = await getBridgeGasLimitEstimate(
+    bridgePayload,
+    fromChainId,
+    address
+  )
+
+  return gasLimit
+}
diff --git a/packages/synapse-interface/utils/trimTrailingZeroesAfterDecimal.ts b/packages/synapse-interface/utils/trimTrailingZeroesAfterDecimal.ts
index 3183d761a3..ee9e9850c1 100644
--- a/packages/synapse-interface/utils/trimTrailingZeroesAfterDecimal.ts
+++ b/packages/synapse-interface/utils/trimTrailingZeroesAfterDecimal.ts
@@ -1,7 +1,7 @@
 export const trimTrailingZeroesAfterDecimal = (input: string): string => {
-  const parts = input.split('.')
+  const parts = input?.split('.')
 
-  if (parts.length === 2) {
+  if (parts?.length === 2) {
     const integerPart = parts[0]
     let fractionalPart = parts[1]