diff --git a/web/src/pages/MyTransactions/Modal/RaiseDisputeModal/FeeRequired.tsx b/web/src/pages/MyTransactions/Modal/RaiseDisputeModal/FeeRequired.tsx
index a9eac00..dc3aaaa 100644
--- a/web/src/pages/MyTransactions/Modal/RaiseDisputeModal/FeeRequired.tsx
+++ b/web/src/pages/MyTransactions/Modal/RaiseDisputeModal/FeeRequired.tsx
@@ -37,7 +37,7 @@ const FeeRequired: React.FC<IFeeRequired> = ({ arbitrationCost }) => {
   return (
     <StyledCard>
       <StyledHeader>Arbitration fee required</StyledHeader>
-      <StyledQuantity>{formatEther(arbitrationCost)} ETH</StyledQuantity>
+      {arbitrationCost ? <StyledQuantity>{formatEther(arbitrationCost)} ETH</StyledQuantity> : null}
     </StyledCard>
   );
 };
diff --git a/web/src/pages/MyTransactions/TransactionDetails/PreviewCardButtons/AcceptSettlementButton.tsx b/web/src/pages/MyTransactions/TransactionDetails/PreviewCardButtons/AcceptSettlementButton.tsx
index 38baa18..698279b 100644
--- a/web/src/pages/MyTransactions/TransactionDetails/PreviewCardButtons/AcceptSettlementButton.tsx
+++ b/web/src/pages/MyTransactions/TransactionDetails/PreviewCardButtons/AcceptSettlementButton.tsx
@@ -16,7 +16,7 @@ const AcceptButton: React.FC = () => {
   const { id } = useTransactionDetailsContext();
   const refetchQuery = useQueryRefetch();
 
-  const { data: acceptSettlementConfig } = useSimulateEscrowUniversalAcceptSettlement({
+  const { data: acceptSettlementConfig, isLoading, isError } = useSimulateEscrowUniversalAcceptSettlement({
     args: [BigInt(id)],
   });
 
@@ -39,7 +39,14 @@ const AcceptButton: React.FC = () => {
     }
   };
 
-  return <Button isLoading={isSending} disabled={isSending} text="Accept" onClick={handleAcceptSettlement} />;
+  return (
+    <Button
+      isLoading={isSending || isLoading}
+      disabled={isSending || isLoading || isError}
+      text="Accept"
+      onClick={handleAcceptSettlement}
+    />
+  );
 };
 
 export default AcceptButton;
diff --git a/web/src/pages/MyTransactions/TransactionDetails/PreviewCardButtons/ExecuteTransactionButton.tsx b/web/src/pages/MyTransactions/TransactionDetails/PreviewCardButtons/ExecuteTransactionButton.tsx
index e995e4f..b68aece 100644
--- a/web/src/pages/MyTransactions/TransactionDetails/PreviewCardButtons/ExecuteTransactionButton.tsx
+++ b/web/src/pages/MyTransactions/TransactionDetails/PreviewCardButtons/ExecuteTransactionButton.tsx
@@ -16,7 +16,7 @@ const ExecuteTransactionButton: React.FC = () => {
   const { id } = useTransactionDetailsContext();
   const refetchQuery = useQueryRefetch();
 
-  const { data: executeTransactionConfig } = useSimulateEscrowUniversalExecuteTransaction({
+  const { data: executeTransactionConfig, isLoading, isError } = useSimulateEscrowUniversalExecuteTransaction({
     args: [BigInt(id)],
   });
 
@@ -41,7 +41,12 @@ const ExecuteTransactionButton: React.FC = () => {
   };
 
   return (
-    <Button isLoading={isSending} disabled={isSending} text="Execute Transaction" onClick={handleExecuteTransaction} />
+    <Button
+      isLoading={isSending || isLoading}
+      disabled={isSending || isLoading || isError}
+      text="Execute Transaction"
+      onClick={handleExecuteTransaction}
+    />
   );
 };
 
diff --git a/web/src/pages/MyTransactions/TransactionDetails/PreviewCardButtons/ProposeSettlementButton.tsx b/web/src/pages/MyTransactions/TransactionDetails/PreviewCardButtons/ProposeSettlementButton.tsx
index 54bf230..453f576 100644
--- a/web/src/pages/MyTransactions/TransactionDetails/PreviewCardButtons/ProposeSettlementButton.tsx
+++ b/web/src/pages/MyTransactions/TransactionDetails/PreviewCardButtons/ProposeSettlementButton.tsx
@@ -29,7 +29,7 @@ const ProposeSettlementButton: React.FC<IProposeSettlementButton> = ({
   const { id } = useTransactionDetailsContext();
   const refetchQuery = useQueryRefetch();
 
-  const { data: proposeSettlementConfig } = useSimulateEscrowUniversalProposeSettlement({
+  const { data: proposeSettlementConfig, isLoading, isError } = useSimulateEscrowUniversalProposeSettlement({
     args: [BigInt(id), parseEther(amountProposed)],
   });
 
@@ -56,9 +56,9 @@ const ProposeSettlementButton: React.FC<IProposeSettlementButton> = ({
 
   return (
     <Button
-      isLoading={isSending}
-      disabled={isSending || !isAmountValid}
-      text={buttonText}
+      isLoading={isSending || isLoading}
+      disabled={isSending || !isAmountValid || isLoading || isError}
+    text={buttonText}
       onClick={handleProposeSettlement}
     />
   );
diff --git a/web/src/pages/MyTransactions/TransactionDetails/PreviewCardButtons/RaiseDisputeButton.tsx b/web/src/pages/MyTransactions/TransactionDetails/PreviewCardButtons/RaiseDisputeButton.tsx
index f60ac00..dd8a17d 100644
--- a/web/src/pages/MyTransactions/TransactionDetails/PreviewCardButtons/RaiseDisputeButton.tsx
+++ b/web/src/pages/MyTransactions/TransactionDetails/PreviewCardButtons/RaiseDisputeButton.tsx
@@ -1,6 +1,6 @@
 import React, { useMemo, useState } from "react";
 import { Button } from "@kleros/ui-components-library";
-import { useAccount, usePublicClient } from "wagmi";
+import { useAccount, useBalance, usePublicClient } from "wagmi";
 import {
   useWriteEscrowUniversalPayArbitrationFeeByBuyer,
   useWriteEscrowUniversalPayArbitrationFeeBySeller,
@@ -11,6 +11,8 @@ import { isUndefined } from "utils/index";
 import { wrapWithToast } from "utils/wrapWithToast";
 import { useTransactionDetailsContext } from "context/TransactionDetailsContext";
 import { useQueryRefetch } from "hooks/useQueryRefetch";
+import ClosedCircleIcon from "components/StyledIcons/ClosedCircleIcon";
+import { ErrorButtonMessage } from "pages/NewTransaction/NavigationButtons/DepositPaymentButton";
 
 interface IRaiseDisputeButton {
   toggleModal?: () => void;
@@ -26,12 +28,34 @@ const RaiseDisputeButton: React.FC<IRaiseDisputeButton> = ({ toggleModal, button
   const isBuyer = useMemo(() => address?.toLowerCase() === buyer?.toLowerCase(), [address, buyer]);
   const refetchQuery = useQueryRefetch();
 
-  const { data: payArbitrationFeeByBuyerConfig } = useSimulateEscrowUniversalPayArbitrationFeeByBuyer({
+  const { data: balanceData } = useBalance({
+    address: address as `0x${string}` | undefined,
+  });
+
+  const insufficientBalance = useMemo(() => {
+    return balanceData && BigInt(arbitrationCost.toString()) > BigInt(balanceData.value.toString());
+  }, [arbitrationCost, balanceData]);
+
+  const {
+    data: payArbitrationFeeByBuyerConfig,
+    isLoading: isLoadingBuyerConfig,
+    isError: isErrorBuyerConfig,
+  } = useSimulateEscrowUniversalPayArbitrationFeeByBuyer({
+    query: {
+      enabled: isBuyer && !insufficientBalance,
+    },
     args: [BigInt(id)],
     value: arbitrationCost,
   });
 
-  const { data: payArbitrationFeeBySellerConfig } = useSimulateEscrowUniversalPayArbitrationFeeBySeller({
+  const {
+    data: payArbitrationFeeBySellerConfig,
+    isLoading: isLoadingSellerConfig,
+    isError: isErrorSellerConfig,
+  } = useSimulateEscrowUniversalPayArbitrationFeeBySeller({
+    query: {
+      enabled: !isBuyer && !insufficientBalance,
+    },
     args: [BigInt(id)],
     value: arbitrationCost,
   });
@@ -76,7 +100,28 @@ const RaiseDisputeButton: React.FC<IRaiseDisputeButton> = ({ toggleModal, button
     }
   };
 
-  return <Button isLoading={isSending} disabled={isSending} text={buttonText} onClick={handleRaiseDispute} />;
+  return (
+    <div>
+      <Button
+        isLoading={!insufficientBalance && (isSending || isLoadingBuyerConfig || isLoadingSellerConfig)}
+        disabled={
+          isSending ||
+          insufficientBalance ||
+          isLoadingBuyerConfig ||
+          isLoadingSellerConfig ||
+          isErrorBuyerConfig ||
+          isErrorSellerConfig
+        }
+        text={buttonText}
+        onClick={handleRaiseDispute}
+      />
+      {insufficientBalance && (
+        <ErrorButtonMessage>
+          <ClosedCircleIcon /> Insufficient balance
+        </ErrorButtonMessage>
+      )}
+    </div>
+  );
 };
 
 export default RaiseDisputeButton;
diff --git a/web/src/pages/MyTransactions/TransactionDetails/PreviewCardButtons/TimeOutButton.tsx b/web/src/pages/MyTransactions/TransactionDetails/PreviewCardButtons/TimeOutButton.tsx
index 413dfa5..fa8cc6f 100644
--- a/web/src/pages/MyTransactions/TransactionDetails/PreviewCardButtons/TimeOutButton.tsx
+++ b/web/src/pages/MyTransactions/TransactionDetails/PreviewCardButtons/TimeOutButton.tsx
@@ -20,11 +20,11 @@ const TimeOutButton: React.FC = () => {
   const isBuyer = useMemo(() => address?.toLowerCase() === buyer?.toLowerCase(), [address, buyer]);
   const refetchQuery = useQueryRefetch();
 
-  const { data: timeOutByBuyerConfig } = useSimulateEscrowUniversalTimeOutByBuyer({
+  const { data: timeOutByBuyerConfig, isLoading: isLoadingBuyerConfig, isError: isErrorBuyerConfig } = useSimulateEscrowUniversalTimeOutByBuyer({
     args: [BigInt(id)],
   });
 
-  const { data: timeOutBySellerConfig } = useSimulateEscrowUniversalTimeOutBySeller({
+  const { data: timeOutBySellerConfig, isLoading: isLoadingSellerConfig, isError: isErrorSellerConfig } = useSimulateEscrowUniversalTimeOutBySeller({
     args: [BigInt(id)],
   });
 
@@ -61,7 +61,20 @@ const TimeOutButton: React.FC = () => {
     }
   };
 
-  return <Button isLoading={isSending} disabled={isSending} text="Claim full payment back" onClick={handleTimeout} />;
+  return (
+    <Button
+      isLoading={isSending || isLoadingBuyerConfig || isLoadingSellerConfig}
+      disabled={
+        isSending ||
+        isLoadingBuyerConfig ||
+        isLoadingSellerConfig ||
+        isErrorBuyerConfig ||
+        isErrorSellerConfig
+      }
+      text="Claim full payment back"
+      onClick={handleTimeout}
+    />
+  );
 };
 
 export default TimeOutButton;
diff --git a/web/src/pages/MyTransactions/TransactionDetails/WasItFulfilled/Buttons/ClaimFullPaymentButton.tsx b/web/src/pages/MyTransactions/TransactionDetails/WasItFulfilled/Buttons/ClaimFullPaymentButton.tsx
index daeaefe..a6916d6 100644
--- a/web/src/pages/MyTransactions/TransactionDetails/WasItFulfilled/Buttons/ClaimFullPaymentButton.tsx
+++ b/web/src/pages/MyTransactions/TransactionDetails/WasItFulfilled/Buttons/ClaimFullPaymentButton.tsx
@@ -17,7 +17,7 @@ const ClaimFullPaymentButton: React.FC = () => {
   const publicClient = usePublicClient();
   const { id } = useTransactionDetailsContext();
 
-  const { data: executeTransactionConfig } = useSimulateEscrowUniversalExecuteTransaction({
+  const { data: executeTransactionConfig, isLoading, isError } = useSimulateEscrowUniversalExecuteTransaction({
     args: [id],
   });
 
@@ -46,8 +46,8 @@ const ClaimFullPaymentButton: React.FC = () => {
   return (
     <>
       <Button
-        isLoading={isSending}
-        disabled={isSending}
+        isLoading={isSending || isLoading}
+        disabled={isSending || isLoading || isError}
         text={"No. Claim full payment"}
         onClick={handleExecuteTransaction}
       />
diff --git a/web/src/pages/MyTransactions/TransactionDetails/WasItFulfilled/Buttons/ReleasePaymentButton.tsx b/web/src/pages/MyTransactions/TransactionDetails/WasItFulfilled/Buttons/ReleasePaymentButton.tsx
index b5204f0..ca8c9fd 100644
--- a/web/src/pages/MyTransactions/TransactionDetails/WasItFulfilled/Buttons/ReleasePaymentButton.tsx
+++ b/web/src/pages/MyTransactions/TransactionDetails/WasItFulfilled/Buttons/ReleasePaymentButton.tsx
@@ -16,7 +16,7 @@ const ReleasePaymentButton: React.FC = () => {
   const { id, amount } = useTransactionDetailsContext();
   const refetchQuery = useQueryRefetch();
 
-  const { data: releaseFullPaymentConfig } = useSimulateEscrowUniversalPay({
+  const { data: releaseFullPaymentConfig, isLoading, isError } = useSimulateEscrowUniversalPay({
     args: [id, amount],
   });
 
@@ -44,8 +44,8 @@ const ReleasePaymentButton: React.FC = () => {
   return (
     <>
       <Button
-        isLoading={isSending}
-        disabled={isSending}
+        isLoading={isSending || isLoading}
+        disabled={isSending || isLoading || isError}
         text={"Yes. Release full payment"}
         onClick={handleReleasePayment}
       />
diff --git a/web/src/pages/NewTransaction/NavigationButtons/DepositPaymentButton.tsx b/web/src/pages/NewTransaction/NavigationButtons/DepositPaymentButton.tsx
index bfc4650..036b3b1 100644
--- a/web/src/pages/NewTransaction/NavigationButtons/DepositPaymentButton.tsx
+++ b/web/src/pages/NewTransaction/NavigationButtons/DepositPaymentButton.tsx
@@ -17,16 +17,29 @@ import {
   useReadContract,
   useWriteContract,
   useSimulateContract,
+  useBalance,
 } from "wagmi";
 import { parseEther, parseUnits } from "viem";
+import { normalize } from "viem/ens";
 import { isUndefined } from "utils/index";
 import { wrapWithToast } from "utils/wrapWithToast";
 import { ethAddressPattern } from "utils/validateAddress";
 import { useQueryRefetch } from "hooks/useQueryRefetch";
 import { useNavigateAndScrollTop } from "hooks/useNavigateAndScrollTop";
+import ClosedCircleIcon from "components/StyledIcons/ClosedCircleIcon";
 
 const StyledButton = styled(Button)``;
 
+export const ErrorButtonMessage = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  justify-content: center;
+  margin: 12px;
+  color: ${({ theme }) => theme.error};
+  font-size: 14px;
+`;
+
 const DepositPaymentButton: React.FC = () => {
   const {
     escrowTitle,
@@ -40,14 +53,13 @@ const DepositPaymentButton: React.FC = () => {
     resetContext,
   } = useNewTransactionContext();
 
-  const [finalRecipientAddress, setFinalRecipientAddress] = useState(sellerAddress);
   const publicClient = usePublicClient();
   const navigateAndScrollTop = useNavigateAndScrollTop();
   const refetchQuery = useQueryRefetch();
   const [isSending, setIsSending] = useState(false);
   const [isApproved, setIsApproved] = useState(false);
   const { address, chain } = useAccount();
-  const ensResult = useEnsAddress({ name: sellerAddress, chainId: 1 });
+  const ensResult = useEnsAddress({ name: normalize(sellerAddress), chainId: 1 });
   const deadlineTimestamp = useMemo(() => BigInt(Math.floor(new Date(deadline).getTime() / 1000)), [deadline]);
   const isNativeTransaction = sendingToken?.address === "native";
   const transactionValue = useMemo(
@@ -55,16 +67,37 @@ const DepositPaymentButton: React.FC = () => {
     [isNativeTransaction, sendingQuantity]
   );
 
-  useEffect(() => {
-    setFinalRecipientAddress(ensResult.data || sellerAddress);
-  }, [sellerAddress, ensResult.data]);
+  const finalRecipientAddress = ensResult.data || sellerAddress;
+
+  const { data: nativeBalance } = useBalance({
+    query: { enabled: isNativeTransaction },
+    address: address as `0x${string}`,
+  });
+
+  const { data: tokenBalance } = useReadContract({
+    query: { enabled: !isNativeTransaction },
+    address: sendingToken?.address as `0x${string}`,
+    abi: erc20Abi,
+    functionName: "balanceOf",
+    args: [address as `0x${string}`],
+  });
+
+  const insufficientBalance = useMemo(() => {
+    if (isUndefined(sendingQuantity)) return true;
+
+    if (isNativeTransaction) {
+      return nativeBalance ? parseFloat(sendingQuantity) > parseFloat(nativeBalance.value.toString()) : true;
+    }
+
+    return isUndefined(tokenBalance) ? true : parseFloat(sendingQuantity) > parseFloat(tokenBalance.toString());
+  }, [sendingQuantity, tokenBalance, nativeBalance, isNativeTransaction]);
 
   const { data: allowance, refetch: refetchAllowance } = useReadContract({
-    query: { enabled: !isNativeTransaction && chain?.id },
-    address: sendingToken?.address,
+    query: { enabled: !isNativeTransaction && chain?.id && !insufficientBalance },
+    address: sendingToken?.address as `0x${string}`,
     abi: erc20Abi,
     functionName: "allowance",
-    args: [address, escrowUniversalAddress?.[chain?.id]],
+    args: [address as `0x${string}`, escrowUniversalAddress?.[chain?.id]],
   });
 
   useEffect(() => {
@@ -73,23 +106,38 @@ const DepositPaymentButton: React.FC = () => {
     }
   }, [allowance, transactionValue]);
 
-  const { data: createNativeTransactionConfig } = useSimulateEscrowUniversalCreateNativeTransaction({
+  const {
+    data: createNativeTransactionConfig,
+    isLoading: isLoadingNativeConfig,
+    isError: isErrorNativeConfig,
+  } = useSimulateEscrowUniversalCreateNativeTransaction({
     query: {
-      enabled: isNativeTransaction && ethAddressPattern.test(finalRecipientAddress),
+      enabled: isNativeTransaction && ethAddressPattern.test(finalRecipientAddress) && !insufficientBalance,
     },
     args: [deadlineTimestamp, transactionUri, finalRecipientAddress],
     value: transactionValue,
   });
 
-  const { data: createERC20TransactionConfig } = useSimulateEscrowUniversalCreateErc20Transaction({
+  const {
+    data: createERC20TransactionConfig,
+    isLoading: isLoadingERC20Config,
+    isError: isErrorERC20Config,
+  } = useSimulateEscrowUniversalCreateErc20Transaction({
     query: {
       enabled:
         !isNativeTransaction &&
         !isUndefined(allowance) &&
         allowance >= transactionValue &&
-        ethAddressPattern.test(finalRecipientAddress),
+        ethAddressPattern.test(finalRecipientAddress) &&
+        !insufficientBalance,
     },
-    args: [transactionValue, sendingToken?.address, deadlineTimestamp, transactionUri, finalRecipientAddress],
+    args: [
+      transactionValue,
+      sendingToken?.address as `0x${string}`,
+      deadlineTimestamp,
+      transactionUri,
+      finalRecipientAddress as `0x${string}`,
+    ],
   });
 
   const { writeContractAsync: createNativeTransaction } =
@@ -99,8 +147,8 @@ const DepositPaymentButton: React.FC = () => {
     useWriteEscrowUniversalCreateErc20Transaction(createERC20TransactionConfig);
 
   const { data: approveConfig } = useSimulateContract({
-    query: { enabled: !isNativeTransaction && chain?.id },
-    address: sendingToken?.address,
+    query: { enabled: !isNativeTransaction && chain?.id && !insufficientBalance },
+    address: sendingToken?.address as `0x${string}`,
     abi: erc20Abi,
     functionName: "approve",
     args: [escrowUniversalAddress?.[chain?.id], transactionValue],
@@ -149,12 +197,26 @@ const DepositPaymentButton: React.FC = () => {
   };
 
   return (
-    <StyledButton
-      isLoading={isSending}
-      disabled={isSending}
-      text={isNativeTransaction || isApproved ? "Deposit the Payment" : "Approve Token"}
-      onClick={isNativeTransaction || isApproved ? handleCreateTransaction : handleApproveToken}
-    />
+    <div>
+      <StyledButton
+        isLoading={!insufficientBalance && (isSending || isLoadingNativeConfig || isLoadingERC20Config)}
+        disabled={
+          isSending ||
+          insufficientBalance ||
+          isLoadingNativeConfig ||
+          isLoadingERC20Config ||
+          isErrorNativeConfig ||
+          isErrorERC20Config
+        }
+        text={isNativeTransaction || isApproved ? "Deposit the Payment" : "Approve Token"}
+        onClick={isNativeTransaction || isApproved ? handleCreateTransaction : handleApproveToken}
+      />
+      {insufficientBalance && (
+        <ErrorButtonMessage>
+          <ClosedCircleIcon /> Insufficient balance
+        </ErrorButtonMessage>
+      )}
+    </div>
   );
 };
 
diff --git a/web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/TokenItem/Balance.tsx b/web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/TokenItem/Balance.tsx
index 5f7d4b0..f317b14 100644
--- a/web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/TokenItem/Balance.tsx
+++ b/web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/TokenItem/Balance.tsx
@@ -1,10 +1,11 @@
 import React, { useMemo } from "react";
 import styled from "styled-components";
 import Skeleton from "react-loading-skeleton";
-import { useAccount, useBalance } from "wagmi";
+import { useAccount, useBalance, useReadContract } from "wagmi";
 import { IToken } from "context/NewTransactionContext";
 import { isUndefined } from "utils/index";
 import { getFormattedBalance } from "utils/getFormattedBalance";
+import { erc20Abi } from "viem";
 
 const Container = styled.p`
   color: ${({ theme }) => theme.primaryText};
@@ -22,13 +23,25 @@ interface IBalance {
 
 const Balance: React.FC<IBalance> = ({ token }) => {
   const { address } = useAccount();
+  const isNativeTransaction = token?.address === "native";
 
-  const { data: balanceData } = useBalance({
-    address: address,
-    token: token?.address === "native" ? undefined : token?.address,
+  const { data: nativeBalance } = useBalance({
+    query: { enabled: isNativeTransaction },
+    address: address as `0x${string}`,
   });
 
-  const formattedBalance = useMemo(() => getFormattedBalance(balanceData, token), [balanceData, token]);
+  const { data: tokenBalance } = useReadContract({
+    query: { enabled: !isNativeTransaction },
+    address: token?.address as `0x${string}`,
+    abi: erc20Abi,
+    functionName: "balanceOf",
+    args: [address as `0x${string}`],
+  });
+
+  const formattedBalance = useMemo(() => {
+    const balance = isNativeTransaction ? nativeBalance?.value : tokenBalance;
+    return !isUndefined(balance) ? getFormattedBalance(balance, token) : undefined;
+  }, [isNativeTransaction, nativeBalance, tokenBalance, token]);
 
   return (
     <Container>
diff --git a/web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/TokenItem/TokenIcon.tsx b/web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/TokenItem/TokenIcon.tsx
index cff23a0..a162323 100644
--- a/web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/TokenItem/TokenIcon.tsx
+++ b/web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/TokenItem/TokenIcon.tsx
@@ -39,7 +39,7 @@ const tokenIcons = {
 };
 
 const getTokenLogo = (tokenSymbol) => {
-  const symbol = tokenSymbol.toLowerCase();
+  const symbol = tokenSymbol?.toLowerCase();
   return tokenIcons[symbol] || null;
 };
 
diff --git a/web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/index.tsx b/web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/index.tsx
index d1fbc37..242bb3e 100644
--- a/web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/index.tsx
+++ b/web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/index.tsx
@@ -1,12 +1,15 @@
 import React, { useMemo, useState, useEffect } from "react";
 import styled from "styled-components";
 import { responsiveSize } from "styles/responsiveSize";
-import { useBalance, useAccount } from "wagmi";
+import { useAccount, useReadContract, useBalance } from "wagmi";
 import { useNewTransactionContext } from "context/NewTransactionContext";
 import { getFormattedBalance } from "utils/getFormattedBalance";
+import { erc20Abi } from "viem";
+import { formatUnits } from "viem";
 import AmountField from "./AmountField";
 import TokenSelector from "./TokenSelector";
 import MaxBalance from "./MaxBalance";
+import { isUndefined } from "utils/index";
 
 const Container = styled.div`
   display: flex;
@@ -31,14 +34,40 @@ interface ITokenAndAmount {
 const TokenAndAmount: React.FC<ITokenAndAmount> = ({ quantity, setQuantity }) => {
   const { address } = useAccount();
   const { sendingToken, setHasSufficientNativeBalance } = useNewTransactionContext();
-  const { data: balanceData } = useBalance({
-    address: address,
-    token: sendingToken?.address === "native" ? undefined : sendingToken?.address,
+  
+  const isNativeTransaction = sendingToken?.address === "native";
+
+  const { data: nativeBalance } = useBalance({
+    query: { enabled: isNativeTransaction },
+    address: address as `0x${string}`,
+  });
+
+  const { data: tokenBalance } = useReadContract({
+    query: { enabled: !isNativeTransaction },
+    address: sendingToken?.address as `0x${string}`,
+    abi: erc20Abi,
+    functionName: "balanceOf",
+    args: [address as `0x${string}`],
+  });
+
+  const { data: tokenDecimal } = useReadContract({
+    query: { enabled: !isNativeTransaction },
+    address: sendingToken?.address as `0x${string}`,
+    abi: erc20Abi,
+    functionName: "decimals",
   });
+
   const [error, setError] = useState("");
 
+  const balanceAmount = useMemo(() => {
+    if (isNativeTransaction) {
+      return nativeBalance ? parseFloat(formatUnits(nativeBalance.value, nativeBalance.decimals)) : 0;
+    } else {
+      return tokenBalance && tokenDecimal ? parseFloat(formatUnits(tokenBalance, tokenDecimal)) : 0;
+    }
+  }, [isNativeTransaction, nativeBalance, tokenBalance, tokenDecimal]);
+
   useEffect(() => {
-    const balanceAmount = balanceData ? parseFloat(balanceData.formatted) : 0;
     const enteredAmount = parseFloat(quantity);
 
     if (quantity && balanceAmount < enteredAmount) {
@@ -51,22 +80,22 @@ const TokenAndAmount: React.FC<ITokenAndAmount> = ({ quantity, setQuantity }) =>
       setError("");
       setHasSufficientNativeBalance(true);
     }
-  }, [balanceData, quantity, setHasSufficientNativeBalance]);
+  }, [quantity, balanceAmount, setHasSufficientNativeBalance]);
 
-  const formattedBalance = useMemo(() => getFormattedBalance(balanceData, sendingToken), [balanceData, sendingToken]);
+  const formattedBalance = useMemo(() => {
+    const balance = isNativeTransaction ? nativeBalance?.value : tokenBalance;
+    return !isUndefined(balance) ? getFormattedBalance(balance, sendingToken) : undefined;
+  }, [sendingToken, isNativeTransaction, nativeBalance, tokenBalance]);
 
   return (
     <Container>
       <AmountField quantity={quantity} setQuantity={setQuantity} error={error} />
       <TokenSelectorAndMaxBalance>
         <TokenSelector />
-        <MaxBalance
-          formattedBalance={formattedBalance}
-          rawBalance={parseFloat(balanceData?.formatted)}
-          setQuantity={setQuantity}
-        />
+        <MaxBalance rawBalance={balanceAmount} {...{ setQuantity, formattedBalance }} />
       </TokenSelectorAndMaxBalance>
     </Container>
   );
 };
+
 export default TokenAndAmount;
diff --git a/web/src/utils/format.ts b/web/src/utils/format.ts
index 409e991..fa9d2ce 100644
--- a/web/src/utils/format.ts
+++ b/web/src/utils/format.ts
@@ -8,16 +8,18 @@ export const roundNumberDown = (value: number, fractionDigits = 0) => {
 
 export const formatUnitsWei = (value: bigint) => formatUnits(value, 18);
 
-export const formatValue = (value: string, fractionDigits, roundDown) => {
+export const formatValue = (value: string, fractionDigits: number, roundDown: boolean) => {
   let units = Number(value);
   if (roundDown) units = roundNumberDown(units, fractionDigits);
   return commify(units.toFixed(fractionDigits));
 };
 
-export const formatPNK = (value: bigint, fractionDigits = 0, roundDown = true) =>
-  formatValue(formatUnitsWei(value), fractionDigits, roundDown);
+export const formatPNK = (value: bigint, fractionDigits = 0, roundDown = true) => {
+  return formatValue(formatUnitsWei(value), fractionDigits, roundDown);
+};
 
-export const formatETH = (value: bigint, fractionDigits = 4, roundDown = true) =>
-  formatValue(formatEther(value), fractionDigits, roundDown);
+export const formatETH = (value: bigint, fractionDigits = 4, roundDown = true) => {
+  return formatValue(formatEther(value), fractionDigits, roundDown);
+};
 
 export const formatUSD = (value: number, fractionDigits = 2) => "$" + commify(Number(value).toFixed(fractionDigits));
diff --git a/web/src/utils/getFormattedBalance.ts b/web/src/utils/getFormattedBalance.ts
index 27126c9..3365f8e 100644
--- a/web/src/utils/getFormattedBalance.ts
+++ b/web/src/utils/getFormattedBalance.ts
@@ -1,7 +1,7 @@
 import { formatETH, formatPNK } from "./format";
 
-export const getFormattedBalance = (balanceData: any, token: any) => {
-  if (!balanceData) return undefined;
-  if (token?.symbol === "PNK") return formatPNK(balanceData.value);
-  return formatETH(balanceData.value);
+export const getFormattedBalance = (balanceData: bigint, token: any) => {
+  if (balanceData === undefined) return undefined;
+  if (token?.symbol === "PNK") return formatPNK(balanceData);
+  return formatETH(balanceData);
 };