diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx
index 8e1c6ae4a12..3c0352855c1 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx
@@ -12,6 +12,7 @@ import type { Account } from "../../../../../../wallets/interfaces/wallet.js";
 import type { WalletId } from "../../../../../../wallets/wallet-types.js";
 import {
   type Theme,
+  fontSize,
   spacing,
 } from "../../../../../core/design-system/index.js";
 import type {
@@ -33,13 +34,15 @@ import {
   DrawerOverlay,
   useDrawer,
 } from "../../../components/Drawer.js";
+import { Skeleton } from "../../../components/Skeleton.js";
 import { Spacer } from "../../../components/Spacer.js";
 import { Spinner } from "../../../components/Spinner.js";
 import { SwitchNetworkButton } from "../../../components/SwitchNetwork.js";
 import { Container, Line, ModalHeader } from "../../../components/basic.js";
 import { Button } from "../../../components/buttons.js";
 import { Text } from "../../../components/text.js";
-import { TokenSymbol } from "../../../components/token/TokenSymbol.js";
+import { TokenProvider } from "../../../prebuilt/Token/provider.js";
+import { TokenSymbol } from "../../../prebuilt/Token/symbol.js";
 import { ConnectButton } from "../../ConnectButton.js";
 import { ChainButton, NetworkSelectorContent } from "../../NetworkSelector.js";
 import type { ConnectLocale } from "../../locale/types.js";
@@ -685,18 +688,37 @@ function SelectedTokenInfo(props: {
           </Text>
 
           <Container flex="row" gap="xxs" center="y">
-            <TokenSymbol
-              token={props.selectedToken}
-              chain={props.selectedChain}
-              size="md"
-              color="secondaryText"
-            />
-            <PayTokenIcon
+            <TokenProvider
+              address={
+                isNativeToken(props.selectedToken)
+                  ? NATIVE_TOKEN_ADDRESS
+                  : props.selectedToken.address
+              }
               chain={props.selectedChain}
               client={props.client}
-              size="sm"
-              token={props.selectedToken}
-            />
+            >
+              <Text size="md" color="secondaryText">
+                <TokenSymbol
+                  symbolResolver={
+                    isNativeToken(props.selectedToken)
+                      ? undefined
+                      : props.selectedToken.symbol
+                  }
+                  loadingComponent={
+                    <Skeleton width="70px" height={fontSize.md} />
+                  }
+                  fallbackComponent={
+                    <Skeleton width="70px" height={fontSize.md} />
+                  }
+                />
+              </Text>
+              <PayTokenIcon
+                chain={props.selectedChain}
+                client={props.client}
+                size="sm"
+                token={props.selectedToken}
+              />
+            </TokenProvider>
           </Container>
         </Container>
 
@@ -1138,16 +1160,24 @@ function SwapScreenContent(props: {
       {errorMsg && (
         <div>
           {errorMsg.minAmount && (
-            <Text color="danger" size="sm" center multiline>
-              Minimum amount is {errorMsg.minAmount}{" "}
-              <TokenSymbol
-                token={toToken}
-                chain={toChain}
-                size="sm"
-                inline
-                color="danger"
-              />
-            </Text>
+            <TokenProvider
+              address={
+                isNativeToken(toToken) ? NATIVE_TOKEN_ADDRESS : toToken.address
+              }
+              client={props.client}
+              chain={toChain}
+            >
+              <Text color="danger" size="sm" center multiline>
+                Minimum amount is {errorMsg.minAmount}{" "}
+                <Text color="danger" inline>
+                  <TokenSymbol
+                    symbolResolver={
+                      isNativeToken(toToken) ? undefined : toToken.icon
+                    }
+                  />
+                </Text>
+              </Text>
+            </TokenProvider>
           )}
 
           {errorMsg.msg?.map((msg) => (
@@ -1386,16 +1416,24 @@ function FiatScreenContent(props: {
       {errorMsg && (
         <div>
           {errorMsg.minAmount && (
-            <Text color="danger" size="sm" center multiline>
-              Minimum amount is {errorMsg.minAmount}{" "}
-              <TokenSymbol
-                token={toToken}
-                chain={toChain}
-                size="sm"
-                inline
-                color="danger"
-              />
-            </Text>
+            <TokenProvider
+              address={
+                isNativeToken(toToken) ? NATIVE_TOKEN_ADDRESS : toToken.address
+              }
+              client={props.client}
+              chain={toChain}
+            >
+              <Text color="danger" size="sm" center multiline>
+                Minimum amount is {errorMsg.minAmount}{" "}
+                <Text color="danger" inline>
+                  <TokenSymbol
+                    symbolResolver={
+                      isNativeToken(toToken) ? undefined : toToken.icon
+                    }
+                  />
+                </Text>
+              </Text>
+            </TokenProvider>
           )}
 
           {errorMsg.msg?.map((msg) => (
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/pay-transactions/BuyTxHistoryButton.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/pay-transactions/BuyTxHistoryButton.tsx
index 6fee16f769e..f4d59b2dd98 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/pay-transactions/BuyTxHistoryButton.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/pay-transactions/BuyTxHistoryButton.tsx
@@ -1,6 +1,7 @@
 import styled from "@emotion/styled";
 import { getCachedChain } from "../../../../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
+import { TokenProvider } from "../../../../../../../react/web/ui/prebuilt/Token/provider.js";
 import { formatNumber } from "../../../../../../../utils/formatNumber.js";
 import { useCustomTheme } from "../../../../../../core/design-system/CustomThemeProvider.js";
 import { spacing } from "../../../../../../core/design-system/index.js";
@@ -37,73 +38,81 @@ export function BuyTxHistoryButton(props: {
         paddingBlock: spacing.sm,
       }}
     >
-      <Container
-        flex="row"
-        center="y"
-        gap="sm"
-        style={{
-          flex: 1,
-        }}
+      <TokenProvider
+        address={props.txInfo.status.quote.toToken.tokenAddress}
+        client={props.client}
+        chain={getCachedChain(props.txInfo.status.quote.toToken.chainId)}
       >
-        <PayTokenIcon
-          client={props.client}
-          chain={getCachedChain(props.txInfo.status.quote.toToken.chainId)}
-          size="md"
-          token={{
-            address: props.txInfo.status.quote.toToken.tokenAddress,
-          }}
-        />
-
-        <div
+        <Container
+          flex="row"
+          center="y"
+          gap="sm"
           style={{
             flex: 1,
-            display: "flex",
-            flexDirection: "column",
-            justifyContent: "center",
           }}
         >
-          {/* Row 1 */}
-          <Container
-            flex="row"
-            gap="xs"
-            center="y"
-            style={{
-              justifyContent: "space-between",
+          <PayTokenIcon
+            client={props.client}
+            chain={getCachedChain(props.txInfo.status.quote.toToken.chainId)}
+            size="md"
+            token={{
+              address: props.txInfo.status.quote.toToken.tokenAddress,
             }}
-          >
-            <Text size="sm" color="primaryText">
-              Buy{" "}
-              {formatNumber(
-                Number(
-                  props.txInfo.type === "swap"
-                    ? props.txInfo.status.quote.toAmount
-                    : props.txInfo.status.quote.estimatedToTokenAmount,
-                ),
-                6,
-              )}{" "}
-              {props.txInfo.status.quote.toToken.symbol}
-            </Text>
-          </Container>
+          />
 
-          <Spacer y="xxs" />
-
-          {/* Row 2 */}
-          <Container
-            flex="row"
-            center="y"
-            gap="xxs"
+          <div
             style={{
-              justifyContent: "space-between",
+              flex: 1,
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
             }}
           >
-            <ChainName
-              chain={getCachedChain(props.txInfo.status.quote.toToken.chainId)}
-              size="xs"
-              client={props.client}
-            />
-          </Container>
-        </div>
-      </Container>
+            {/* Row 1 */}
+            <Container
+              flex="row"
+              gap="xs"
+              center="y"
+              style={{
+                justifyContent: "space-between",
+              }}
+            >
+              <Text size="sm" color="primaryText">
+                Buy{" "}
+                {formatNumber(
+                  Number(
+                    props.txInfo.type === "swap"
+                      ? props.txInfo.status.quote.toAmount
+                      : props.txInfo.status.quote.estimatedToTokenAmount,
+                  ),
+                  6,
+                )}{" "}
+                {props.txInfo.status.quote.toToken.symbol}
+              </Text>
+            </Container>
+
+            <Spacer y="xxs" />
+
+            {/* Row 2 */}
+            <Container
+              flex="row"
+              center="y"
+              gap="xxs"
+              style={{
+                justifyContent: "space-between",
+              }}
+            >
+              <ChainName
+                chain={getCachedChain(
+                  props.txInfo.status.quote.toToken.chainId,
+                )}
+                size="xs"
+                client={props.client}
+              />
+            </Container>
+          </div>
+        </Container>
+      </TokenProvider>
 
       {/* Status */}
       <Container flex="row" gap="xxs" center="y">
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/SendFunds.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/SendFunds.tsx
index cd12d481360..a5d8c8e9d0e 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/SendFunds.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/SendFunds.tsx
@@ -1,13 +1,13 @@
 import { CheckCircledIcon, CrossCircledIcon } from "@radix-ui/react-icons";
 import { useState } from "react";
 import type { ThirdwebClient } from "../../../../../client/client.js";
+import { NATIVE_TOKEN_ADDRESS } from "../../../../../constants/addresses.js";
+import { formatNumber } from "../../../../../utils/formatNumber.js";
 import {
   fontSize,
   iconSize,
   spacing,
 } from "../../../../core/design-system/index.js";
-import { useWalletBalance } from "../../../../core/hooks/others/useWalletBalance.js";
-import { useActiveAccount } from "../../../../core/hooks/wallets/useActiveAccount.js";
 import { useActiveWalletChain } from "../../../../core/hooks/wallets/useActiveWalletChain.js";
 import { useSendToken } from "../../../../core/hooks/wallets/useSendToken.js";
 import {
@@ -17,16 +17,23 @@ import {
 import { Skeleton } from "../../components/Skeleton.js";
 import { Spacer } from "../../components/Spacer.js";
 import { Spinner } from "../../components/Spinner.js";
-import { TokenIcon } from "../../components/TokenIcon.js";
 import { Container, ModalHeader } from "../../components/basic.js";
 import { Button } from "../../components/buttons.js";
 import { Input, Label } from "../../components/formElements.js";
 import { Text } from "../../components/text.js";
 import { StyledDiv } from "../../design-system/elements.js";
+import { AccountBalance } from "../../prebuilt/Account/balance.js";
+import { TokenIcon } from "../../prebuilt/Token/icon.js";
+import { TokenName } from "../../prebuilt/Token/name.js";
+import { TokenProvider } from "../../prebuilt/Token/provider.js";
+import { TokenSymbol } from "../../prebuilt/Token/symbol.js";
 import type { ConnectLocale } from "../locale/types.js";
 import { TokenSelector } from "./TokenSelector.js";
-import { formatTokenBalance } from "./formatTokenBalance.js";
-import { type ERC20OrNativeToken, NATIVE_TOKEN } from "./nativeToken.js";
+import {
+  type ERC20OrNativeToken,
+  NATIVE_TOKEN,
+  isNativeToken,
+} from "./nativeToken.js";
 
 type TXError = Error & { data?: { message?: string } };
 
@@ -123,18 +130,8 @@ function SendFundsForm(props: {
   const locale = props.connectLocale.sendFundsScreen;
   const tokenAddress =
     props.token && "address" in props.token ? props.token.address : undefined;
-
-  const chain = useActiveWalletChain();
-  const activeAccount = useActiveAccount();
   const activeChain = useActiveWalletChain();
 
-  const balanceQuery = useWalletBalance({
-    chain,
-    tokenAddress: tokenAddress,
-    address: activeAccount?.address,
-    client: props.client,
-  });
-
   const { receiverAddress, setReceiverAddress, amount, setAmount } = props;
   const sendTokenMutation = useSendToken(props.client);
 
@@ -215,136 +212,156 @@ function SendFundsForm(props: {
     );
   }
 
-  const tokenName =
-    (props.token && "name" in props.token ? props.token.name : undefined) ||
-    balanceQuery?.data?.name;
-
-  const tokenSymbol =
-    (props.token && "symbol" in props.token ? props.token.symbol : undefined) ||
-    balanceQuery?.data?.symbol;
-
   return (
-    <Container p="lg" animate="fadein">
-      <ModalHeader title={locale.title} onBack={props.onBack} />
-      <Spacer y="xl" />
+    <TokenProvider
+      address={
+        isNativeToken(props.token) ? NATIVE_TOKEN_ADDRESS : props.token.address
+      }
+      client={props.client}
+      chain={activeChain}
+    >
+      <Container p="lg" animate="fadein">
+        <ModalHeader title={locale.title} onBack={props.onBack} />
+        <Spacer y="xl" />
 
-      <form
-        onSubmit={(e) => {
-          e.preventDefault();
-        }}
-      >
-        {/* Token  */}
-        <Label htmlFor="token" color="secondaryText">
-          {locale.token}
-        </Label>
-        <Spacer y="sm" />
-        <Button
-          id="token"
-          variant="outline"
-          fullWidth
-          style={{
-            justifyContent: "flex-start",
-            gap: spacing.sm,
-            padding: spacing.sm,
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
           }}
-          onClick={props.onTokenSelect}
         >
-          <TokenIcon
-            token={props.token}
-            chain={activeChain}
-            size="lg"
-            client={props.client}
-          />
+          {/* Token  */}
+          <Label htmlFor="token" color="secondaryText">
+            {locale.token}
+          </Label>
+          <Spacer y="sm" />
+          <Button
+            id="token"
+            variant="outline"
+            fullWidth
+            style={{
+              justifyContent: "flex-start",
+              gap: spacing.sm,
+              padding: spacing.sm,
+            }}
+            onClick={props.onTokenSelect}
+          >
+            <TokenIcon
+              style={{ width: `${iconSize.lg}`, height: `${iconSize.lg}` }}
+            />
 
-          <Container flex="column" gap="xs">
-            {tokenName ? (
+            <Container flex="column" gap="xs">
               <Text size="sm" color="primaryText">
-                {tokenName}
+                <TokenName
+                  loadingComponent={
+                    <Skeleton height={fontSize.xs} width="150px" />
+                  }
+                  fallbackComponent={
+                    <Skeleton height={fontSize.xs} width="150px" />
+                  }
+                />
               </Text>
-            ) : (
-              <Skeleton height={fontSize.xs} width="150px" />
-            )}
-
-            {balanceQuery.data ? (
-              <Text size="xs">{formatTokenBalance(balanceQuery.data)}</Text>
-            ) : (
-              <Skeleton height={fontSize.xs} width="100px" />
-            )}
-          </Container>
-        </Button>
 
-        <Spacer y="lg" />
-
-        {/* Send to  */}
-        <Label htmlFor="receiver" color="secondaryText">
-          {locale.sendTo}
-        </Label>
-        <Spacer y="sm" />
-        <Input
-          required
-          id="receiver"
-          placeholder="0x... or ENS name"
-          variant="outline"
-          value={receiverAddress}
-          onChange={(e) => {
-            setReceiverAddress(e.target.value);
-          }}
-        />
+              <Text size="xs">
+                <AccountBalance
+                  chain={activeChain}
+                  formatFn={(num: number) => formatNumber(num, 5)}
+                  tokenAddress={
+                    isNativeToken(props.token)
+                      ? NATIVE_TOKEN_ADDRESS
+                      : props.token.address
+                  }
+                  loadingComponent={
+                    <Skeleton height={fontSize.xs} width="100px" />
+                  }
+                  fallbackComponent={
+                    <Skeleton height={fontSize.xs} width="100px" />
+                  }
+                />
+              </Text>
+            </Container>
+          </Button>
 
-        <Spacer y="lg" />
+          <Spacer y="lg" />
 
-        {/* Amount  */}
-        <Label htmlFor="amount" color="secondaryText">
-          {locale.amount}
-        </Label>
-        <Spacer y="sm" />
-        <Container relative>
+          {/* Send to  */}
+          <Label htmlFor="receiver" color="secondaryText">
+            {locale.sendTo}
+          </Label>
+          <Spacer y="sm" />
           <Input
             required
-            type="number"
-            id="amount"
+            id="receiver"
+            placeholder="0x... or ENS name"
             variant="outline"
-            value={amount}
+            value={receiverAddress}
             onChange={(e) => {
-              setAmount(e.target.value);
+              setReceiverAddress(e.target.value);
             }}
           />
-          <CurrencyBadge>
-            <Text size="xs"> {tokenSymbol} </Text>
-          </CurrencyBadge>
-        </Container>
-
-        <Spacer y="xxl" />
 
-        {/* Submit */}
-        <Button
-          fullWidth
-          variant="accent"
-          type="submit"
-          onClick={async () => {
-            if (!receiverAddress || !amount) {
-              return;
-            }
+          <Spacer y="lg" />
+
+          {/* Amount  */}
+          <Label htmlFor="amount" color="secondaryText">
+            {locale.amount}
+          </Label>
+          <Spacer y="sm" />
+          <Container relative>
+            <Input
+              required
+              type="number"
+              id="amount"
+              variant="outline"
+              value={amount}
+              onChange={(e) => {
+                setAmount(e.target.value);
+              }}
+            />
+            <CurrencyBadge>
+              <Text size="xs">
+                <TokenSymbol
+                  symbolResolver={
+                    props.token && "symbol" in props.token
+                      ? props.token.symbol
+                      : undefined
+                  }
+                />
+              </Text>
+            </CurrencyBadge>
+          </Container>
 
-            await sendTokenMutation.mutateAsync({
-              receiverAddress,
-              amount,
-              tokenAddress: tokenAddress,
-            });
-          }}
-          style={{
-            alignItems: "center",
-            gap: spacing.sm,
-            padding: spacing.md,
-          }}
-        >
-          {sendTokenMutation.isPending && (
-            <Spinner size="sm" color="accentButtonText" />
-          )}
-          {sendTokenMutation.isPending ? locale.sending : locale.submitButton}
-        </Button>
-      </form>
-    </Container>
+          <Spacer y="xxl" />
+
+          {/* Submit */}
+          <Button
+            fullWidth
+            variant="accent"
+            type="submit"
+            onClick={async () => {
+              if (!receiverAddress || !amount) {
+                return;
+              }
+
+              await sendTokenMutation.mutateAsync({
+                receiverAddress,
+                amount,
+                tokenAddress: tokenAddress,
+              });
+            }}
+            style={{
+              alignItems: "center",
+              gap: spacing.sm,
+              padding: spacing.md,
+            }}
+          >
+            {sendTokenMutation.isPending && (
+              <Spinner size="sm" color="accentButtonText" />
+            )}
+            {sendTokenMutation.isPending ? locale.sending : locale.submitButton}
+          </Button>
+        </form>
+      </Container>
+    </TokenProvider>
   );
 }
 
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/ViewTokens.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/ViewTokens.tsx
index 42cf2d08a78..4fb7f83a409 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/ViewTokens.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/ViewTokens.tsx
@@ -1,8 +1,8 @@
 import type { Chain } from "../../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../../client/client.js";
-import { fontSize } from "../../../../core/design-system/index.js";
-import { useWalletBalance } from "../../../../core/hooks/others/useWalletBalance.js";
-import { useActiveAccount } from "../../../../core/hooks/wallets/useActiveAccount.js";
+import { NATIVE_TOKEN_ADDRESS } from "../../../../../constants/addresses.js";
+import { formatNumber } from "../../../../../utils/formatNumber.js";
+import { fontSize, iconSize } from "../../../../core/design-system/index.js";
 import { useActiveWalletChain } from "../../../../core/hooks/wallets/useActiveWalletChain.js";
 import {
   type SupportedTokens,
@@ -10,11 +10,13 @@ import {
 } from "../../../../core/utils/defaultTokens.js";
 import { Skeleton } from "../../components/Skeleton.js";
 import { Spacer } from "../../components/Spacer.js";
-import { TokenIcon } from "../../components/TokenIcon.js";
 import { Container, Line, ModalHeader } from "../../components/basic.js";
 import { Text } from "../../components/text.js";
+import { AccountBalance } from "../../prebuilt/Account/balance.js";
+import { TokenIcon } from "../../prebuilt/Token/icon.js";
+import { TokenName } from "../../prebuilt/Token/name.js";
+import { TokenProvider } from "../../prebuilt/Token/provider.js";
 import type { ConnectLocale } from "../locale/types.js";
-import { formatTokenBalance } from "./formatTokenBalance.js";
 import {
   type ERC20OrNativeToken,
   NATIVE_TOKEN,
@@ -99,42 +101,48 @@ function TokenInfo(props: {
   chain: Chain;
   client: ThirdwebClient;
 }) {
-  const account = useActiveAccount();
-  const tokenBalanceQuery = useWalletBalance({
-    address: account?.address,
-    chain: props.chain,
-    tokenAddress: isNativeToken(props.token) ? undefined : props.token.address,
-    client: props.client,
-  });
-
-  const tokenName = isNativeToken(props.token)
-    ? tokenBalanceQuery.data?.name
-    : props.token.name;
-
   return (
-    <Container flex="row" gap="sm" p="sm">
-      <TokenIcon
-        token={props.token}
-        chain={props.chain}
-        size="lg"
-        client={props.client}
-      />
-
-      <Container flex="column" gap="xxs">
-        {tokenName ? (
+    <TokenProvider
+      address={
+        isNativeToken(props.token) ? NATIVE_TOKEN_ADDRESS : props.token.address
+      }
+      chain={props.chain}
+      client={props.client}
+    >
+      <Container flex="row" gap="sm" p="sm">
+        <TokenIcon
+          style={{ width: `${iconSize.lg}px`, height: `${iconSize.lg}px` }}
+        />
+        <Container flex="column" gap="xxs">
           <Text size="sm" color="primaryText">
-            {tokenName}
+            <TokenName
+              loadingComponent={<Skeleton height={fontSize.md} width="150px" />}
+              fallbackComponent={
+                <Skeleton height={fontSize.md} width="150px" />
+              }
+            />
           </Text>
-        ) : (
-          <Skeleton height={fontSize.md} width="150px" />
-        )}
-
-        {tokenBalanceQuery.data ? (
-          <Text size="xs"> {formatTokenBalance(tokenBalanceQuery.data)}</Text>
-        ) : (
-          <Skeleton height={fontSize.xs} width="100px" />
-        )}
+          <Text size="xs">
+            {/* 
+              We can use AccountBalance here because the Modal is wrapped inside an AccountProvider
+              see: Details.tsx
+            */}
+            <AccountBalance
+              chain={props.chain}
+              formatFn={(num: number) => formatNumber(num, 5)}
+              tokenAddress={
+                isNativeToken(props.token)
+                  ? NATIVE_TOKEN_ADDRESS
+                  : props.token.address
+              }
+              loadingComponent={<Skeleton height={fontSize.xs} width="100px" />}
+              fallbackComponent={
+                <Skeleton height={fontSize.xs} width="100px" />
+              }
+            />
+          </Text>
+        </Container>
       </Container>
-    </Container>
+    </TokenProvider>
   );
 }