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 c497c29ce0f..507fb089f88 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
@@ -8,9 +8,11 @@ import type { BuyWithFiatStatus } from "../../../../../../pay/buyWithFiat/getSta
 import { formatNumber } from "../../../../../../utils/formatNumber.js";
 import type { Account } from "../../../../../../wallets/interfaces/wallet.js";
 import type { WalletId } from "../../../../../../wallets/wallet-types.js";
+import { useCustomTheme } from "../../../../../core/design-system/CustomThemeProvider.js";
 import {
   type Theme,
   fontSize,
+  radius,
   spacing,
 } from "../../../../../core/design-system/index.js";
 import type {
@@ -25,7 +27,7 @@ import { LoadingScreen } from "../../../../wallets/shared/LoadingScreen.js";
 import type { PayEmbedConnectOptions } from "../../../PayEmbed.js";
 import { ChainName } from "../../../components/ChainName.js";
 import { Spacer } from "../../../components/Spacer.js";
-import { Container, Line, ModalHeader } from "../../../components/basic.js";
+import { Container, ModalHeader } from "../../../components/basic.js";
 import { Button } from "../../../components/buttons.js";
 import { Input } from "../../../components/formElements.js";
 import { Text } from "../../../components/text.js";
@@ -54,7 +56,6 @@ import {
 } from "./main/useUISelectionStates.js";
 import { BuyTokenInput } from "./swap/BuyTokenInput.js";
 import { FiatValue } from "./swap/FiatValue.js";
-import { PaymentSelectionScreen } from "./swap/PaymentSelectionScreen.js";
 import { SwapFlow } from "./swap/SwapFlow.js";
 import { SwapScreenContent } from "./swap/SwapScreenContent.js";
 import { TokenSelectorScreen } from "./swap/TokenSelectorScreen.js";
@@ -528,6 +529,16 @@ function BuyScreenContent(props: BuyScreenContentProps) {
           screen.id === "buy-with-fiat") &&
           payer && (
             <TokenSelectedLayout
+              isBuyWithFiatEnabled={enabledPaymentMethods.buyWithFiatEnabled}
+              isBuyWithCryptoEnabled={
+                enabledPaymentMethods.buyWithCryptoEnabled
+              }
+              mode={screen.id === "buy-with-fiat" ? "buy" : "swap"}
+              onModeChange={(mode) => {
+                setScreen({
+                  id: mode === "swap" ? "buy-with-crypto" : "buy-with-fiat",
+                });
+              }}
               disabled={
                 ("prefillBuy" in payOptions &&
                   payOptions.prefillBuy?.allowEdits?.amount === false) ||
@@ -540,60 +551,9 @@ function BuyScreenContent(props: BuyScreenContentProps) {
               setTokenAmount={setTokenAmount}
               client={client}
               onBack={() => {
-                if (
-                  enabledPaymentMethods.buyWithCryptoEnabled &&
-                  screen.id === "buy-with-fiat"
-                ) {
-                  setScreen({ id: "select-payment-method" });
-                } else if (screen.id === "buy-with-crypto") {
-                  setScreen({ id: "select-payment-method" });
-                } else {
-                  setScreen({ id: "main" });
-                }
+                setScreen({ id: "main" });
               }}
             >
-              {screen.id === "select-payment-method" && (
-                <PaymentSelectionScreen
-                  client={client}
-                  mode={payOptions.mode}
-                  sourceSupportedTokens={sourceSupportedTokens}
-                  hiddenWallets={props.hiddenWallets}
-                  payWithFiatEnabled={props.payOptions.buyWithFiat !== false}
-                  toChain={toChain}
-                  toToken={toToken}
-                  fromToken={fromToken}
-                  fromChain={fromChain}
-                  tokenAmount={tokenAmount}
-                  onContinue={() => {
-                    setScreen({ id: "buy-with-crypto" });
-                  }}
-                  onSelectFiat={() => {
-                    setScreen({ id: "buy-with-fiat" });
-                  }}
-                  onPickToken={() => {
-                    setScreen({
-                      id: "select-from-token",
-                      backScreen: {
-                        id: "select-payment-method",
-                      },
-                    });
-                  }}
-                  showAllWallets={!!props.connectOptions?.showAllWallets}
-                  wallets={props.connectOptions?.wallets}
-                  onBack={() => {
-                    // no-op
-                  }}
-                  onConnect={() => {
-                    setScreen({
-                      id: "connect-payer-wallet",
-                      backScreen: {
-                        id: "select-payment-method",
-                      },
-                    });
-                  }}
-                />
-              )}
-
               {screen.id === "buy-with-crypto" && activeAccount && (
                 <SwapScreenContent
                   setScreen={setScreen}
@@ -842,7 +802,7 @@ function MainScreen(props: {
             if (buyWithFiatEnabled && !buyWithCryptoEnabled) {
               props.setScreen({ id: "buy-with-fiat" });
             } else {
-              props.setScreen({ id: "select-payment-method" });
+              props.setScreen({ id: "buy-with-crypto" });
             }
           }}
         />
@@ -865,7 +825,7 @@ function MainScreen(props: {
             if (buyWithFiatEnabled && !buyWithCryptoEnabled) {
               props.setScreen({ id: "buy-with-fiat" });
             } else {
-              props.setScreen({ id: "select-payment-method" });
+              props.setScreen({ id: "buy-with-crypto" });
             }
           }}
         />
@@ -928,7 +888,7 @@ function MainScreen(props: {
                   if (buyWithFiatEnabled && !buyWithCryptoEnabled) {
                     props.setScreen({ id: "buy-with-fiat" });
                   } else {
-                    props.setScreen({ id: "select-payment-method" });
+                    props.setScreen({ id: "buy-with-crypto" });
                   }
                 }}
               >
@@ -952,7 +912,12 @@ function TokenSelectedLayout(props: {
   client: ThirdwebClient;
   onBack: () => void;
   disabled?: boolean;
+  mode: "buy" | "swap";
+  onModeChange: (mode: "buy" | "swap") => void;
+  isBuyWithFiatEnabled: boolean;
+  isBuyWithCryptoEnabled: boolean;
 }) {
+  const theme = useCustomTheme();
   return (
     <Container>
       <Container p="lg">
@@ -975,12 +940,77 @@ function TokenSelectedLayout(props: {
           disabled={props.disabled}
         />
 
-        <Spacer y="md" />
-        <Line />
         <Spacer y="lg" />
+        <Container flex="row" gap="md" center="y">
+          <Text size="sm"> Pay with </Text>
+          {props.isBuyWithFiatEnabled && props.isBuyWithCryptoEnabled && (
+            <Container
+              flex="row"
+              style={{
+                flex: 1,
+                justifyContent: "center",
+                borderRadius: radius.xl,
+                border: `1px solid ${theme.colors.borderColor}`,
+                alignItems: "stretch",
+              }}
+            >
+              <Button
+                variant="ghost"
+                style={{
+                  flex: 1,
+                  background:
+                    props.mode === "swap"
+                      ? theme.colors.tertiaryBg
+                      : "transparent",
+                  borderRadius: radius.xl,
+                  borderTopRightRadius: 0,
+                  borderBottomRightRadius: 0,
+                  padding: spacing.xs,
+                }}
+                onClick={() => props.onModeChange("swap")}
+              >
+                <Text
+                  size="sm"
+                  color={
+                    props.mode === "swap" ? "primaryText" : "secondaryText"
+                  }
+                >
+                  Crypto
+                </Text>
+              </Button>
+              <div
+                style={{
+                  width: "1px",
+                  background: theme.colors.borderColor,
+                }}
+              />
+              <Button
+                variant="ghost"
+                style={{
+                  flex: 1,
+                  background:
+                    props.mode === "buy"
+                      ? theme.colors.tertiaryBg
+                      : "transparent",
+                  borderRadius: radius.xl,
+                  borderTopLeftRadius: 0,
+                  borderBottomLeftRadius: 0,
+                  padding: spacing.xs,
+                }}
+                onClick={() => props.onModeChange("buy")}
+              >
+                <Text
+                  size="sm"
+                  color={props.mode === "buy" ? "primaryText" : "secondaryText"}
+                >
+                  Card
+                </Text>
+              </Button>
+            </Container>
+          )}
+        </Container>
 
-        <Text size="sm"> Pay with </Text>
-        <Spacer y="sm" />
+        <Spacer y="lg" />
 
         {props.children}
       </Container>
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/PayWIthCreditCard.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/PayWIthCreditCard.tsx
index e128dc3c779..78a92741aa4 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/PayWIthCreditCard.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/PayWIthCreditCard.tsx
@@ -82,7 +82,12 @@ export function PayWithCreditCard(props: {
           <Skeleton width="100px" height={fontSize.lg} />
         ) : (
           <Text size="lg" color={props.value ? "primaryText" : "secondaryText"}>
-            {props.value ? `${formatNumber(Number(props.value), 6)}` : "--"}
+            {props.value
+              ? `${props.currency.symbol}${formatNumber(
+                  Number(props.value),
+                  6,
+                )}`
+              : "--"}
           </Text>
         )}
       </div>
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatScreenContent.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatScreenContent.tsx
index 0458626ef90..6447e65958c 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatScreenContent.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatScreenContent.tsx
@@ -157,7 +157,7 @@ export function FiatScreenContent(props: {
       : undefined;
 
   return (
-    <Container flex="column" gap="md" animate="fadein">
+    <Container flex="column" gap="lg" animate="fadein">
       {isOpen && (
         <>
           <DrawerOverlay ref={drawerOverlayRef} />
@@ -198,74 +198,75 @@ export function FiatScreenContent(props: {
         </>
       )}
 
-      <div>
-        <PayWithCreditCard
-          isLoading={fiatQuoteQuery.isLoading}
-          value={fiatQuoteQuery.data?.fromCurrencyWithFees.amount}
-          client={client}
-          currency={selectedCurrency}
-          onSelectCurrency={showCurrencySelector}
-        />
-        <Container
-          bg="tertiaryBg"
-          flex="row"
-          borderColor="borderColor"
-          style={{
-            paddingLeft: spacing.md,
-            justifyContent: "space-between",
-            alignItems: "center",
-            borderWidth: "1px",
-            borderStyle: "solid",
-            borderBottom: "none",
-          }}
-        >
-          <Text size="xs" color="secondaryText">
-            Provider
-          </Text>
-          <Button variant="ghost" onClick={showProviders}>
-            <Container flex="row" center="y" gap="xxs" color="secondaryText">
-              <Text size="xs">
-                {preferredProvider
-                  ? `${preferredProvider.charAt(0).toUpperCase() + preferredProvider.slice(1).toLowerCase()}`
-                  : fiatQuoteQuery.data?.provider
-                    ? `${fiatQuoteQuery.data?.provider.charAt(0).toUpperCase() + fiatQuoteQuery.data?.provider.slice(1).toLowerCase()}`
-                    : ""}
-              </Text>
-              <ChevronDownIcon width={iconSize.sm} height={iconSize.sm} />
-            </Container>
-          </Button>
-        </Container>
-        {/* Estimated time + View fees button */}
-        <EstimatedTimeAndFees
-          quoteIsLoading={fiatQuoteQuery.isLoading}
-          estimatedSeconds={fiatQuoteQuery.data?.estimatedDurationSeconds}
-          onViewFees={showFees}
-        />
-        <Spacer y="md" />
-      </div>
-
-      {/* Error message */}
-      {errorMsg && (
+      <Container flex="column" gap="sm">
         <div>
-          {errorMsg.data?.minimumAmountEth ? (
-            <Text color="danger" size="sm" center multiline>
-              Minimum amount is{" "}
-              {formatNumber(Number(errorMsg.data.minimumAmountEth), 6)}{" "}
-              <TokenSymbol
-                token={toToken}
-                chain={toChain}
-                size="sm"
-                inline
-                color="danger"
-              />
+          <PayWithCreditCard
+            isLoading={fiatQuoteQuery.isLoading}
+            value={fiatQuoteQuery.data?.fromCurrencyWithFees.amount}
+            client={client}
+            currency={selectedCurrency}
+            onSelectCurrency={showCurrencySelector}
+          />
+          <Container
+            bg="tertiaryBg"
+            flex="row"
+            borderColor="borderColor"
+            style={{
+              paddingLeft: spacing.md,
+              justifyContent: "space-between",
+              alignItems: "center",
+              borderWidth: "1px",
+              borderStyle: "solid",
+              borderBottom: "none",
+            }}
+          >
+            <Text size="xs" color="secondaryText">
+              Provider
             </Text>
-          ) : (
-            <Text color="danger" size="sm" center multiline>
-              {errorMsg.message || defaultMessage}
-            </Text>
-          )}
+            <Button variant="ghost" onClick={showProviders}>
+              <Container flex="row" center="y" gap="xxs" color="secondaryText">
+                <Text size="xs">
+                  {preferredProvider
+                    ? `${preferredProvider.charAt(0).toUpperCase() + preferredProvider.slice(1).toLowerCase()}`
+                    : fiatQuoteQuery.data?.provider
+                      ? `${fiatQuoteQuery.data?.provider.charAt(0).toUpperCase() + fiatQuoteQuery.data?.provider.slice(1).toLowerCase()}`
+                      : ""}
+                </Text>
+                <ChevronDownIcon width={iconSize.sm} height={iconSize.sm} />
+              </Container>
+            </Button>
+          </Container>
+          {/* Estimated time + View fees button */}
+          <EstimatedTimeAndFees
+            quoteIsLoading={fiatQuoteQuery.isLoading}
+            estimatedSeconds={fiatQuoteQuery.data?.estimatedDurationSeconds}
+            onViewFees={showFees}
+          />
         </div>
-      )}
+
+        {/* Error message */}
+        {errorMsg && (
+          <div>
+            {errorMsg.data?.minimumAmountEth ? (
+              <Text color="danger" size="sm" center multiline>
+                Minimum amount is{" "}
+                {formatNumber(Number(errorMsg.data.minimumAmountEth), 6)}{" "}
+                <TokenSymbol
+                  token={toToken}
+                  chain={toChain}
+                  size="sm"
+                  inline
+                  color="danger"
+                />
+              </Text>
+            ) : (
+              <Text color="danger" size="sm" center multiline>
+                {errorMsg.message || defaultMessage}
+              </Text>
+            )}
+          </div>
+        )}
+      </Container>
 
       {errorMsg?.data?.minimumAmountEth ? (
         <Button
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/currencies.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/currencies.tsx
index ff15af9b90e..780415d6847 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/currencies.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/currencies.tsx
@@ -9,12 +9,14 @@ import type { IconFC } from "../../../icons/types.js";
 export type CurrencyMeta = {
   shorthand: "USD" | "CAD" | "GBP" | "EUR" | "JPY";
   name: string;
+  symbol: string;
   icon: IconFC;
 };
 
 export const usdCurrency: CurrencyMeta = {
   shorthand: "USD",
   name: "US Dollar",
+  symbol: "$",
   icon: USDIcon,
 };
 
@@ -23,21 +25,25 @@ export const currencies: CurrencyMeta[] = [
   {
     shorthand: "CAD",
     name: "Canadian Dollar",
+    symbol: "$",
     icon: CADIcon,
   },
   {
     shorthand: "GBP",
     name: "British Pound",
+    symbol: "£",
     icon: GBPIcon,
   },
   {
     shorthand: "EUR",
     name: "Euro",
+    symbol: "€",
     icon: EURIcon,
   },
   {
     shorthand: "JPY",
     name: "Japanese Yen",
+    symbol: "¥",
     icon: JPYIcon,
   },
 ];
@@ -51,6 +57,7 @@ export function getCurrencyMeta(shorthand: string): CurrencyMeta {
       // This should never happen
       icon: UnknownCurrencyIcon,
       name: shorthand,
+      symbol: "$",
       shorthand: shorthand as CurrencyMeta["shorthand"],
     }
   );
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/PayWithCrypto.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/PayWithCrypto.tsx
index 5cd674d5c07..ca32442f9d8 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/PayWithCrypto.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/PayWithCrypto.tsx
@@ -1,6 +1,5 @@
 import type { Chain } from "../../../../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
-import { formatNumber } from "../../../../../../../utils/formatNumber.js";
 import type { Account } from "../../../../../../../wallets/interfaces/wallet.js";
 import { useCustomTheme } from "../../../../../../core/design-system/CustomThemeProvider.js";
 import {
@@ -8,16 +7,15 @@ import {
   radius,
   spacing,
 } from "../../../../../../core/design-system/index.js";
-import { useChainName } from "../../../../../../core/hooks/others/useChainQuery.js";
 import { useWalletBalance } from "../../../../../../core/hooks/others/useWalletBalance.js";
 import type { TokenInfo } from "../../../../../../core/utils/defaultTokens.js";
 import { Skeleton } from "../../../../components/Skeleton.js";
 import { Container } from "../../../../components/basic.js";
 import { Text } from "../../../../components/text.js";
+import { TokenRow } from "../../../../components/token/TokenRow.js";
 import { TokenSymbol } from "../../../../components/token/TokenSymbol.js";
 import { formatTokenBalance } from "../../formatTokenBalance.js";
 import { type NativeToken, isNativeToken } from "../../nativeToken.js";
-import { PayTokenIcon } from "../PayTokenIcon.js";
 import { WalletRow } from "./TokenSelectorScreen.js";
 
 /**
@@ -35,9 +33,9 @@ export function PayWithCryptoQuoteInfo(props: {
   freezeChainAndTokenSelection?: boolean;
   payerAccount: Account;
   swapRequired: boolean;
+  onSelectToken: () => void;
 }) {
   const theme = useCustomTheme();
-  const { name } = useChainName(props.chain);
   const balanceQuery = useWalletBalance({
     address: props.payerAccount.address,
     chain: props.chain,
@@ -88,44 +86,18 @@ export function PayWithCryptoQuoteInfo(props: {
         )}
       </Container>
       {/* Quoted price */}
-      <Container
-        flex="row"
-        gap="sm"
+      <TokenRow
+        token={props.token}
+        chain={props.chain}
+        client={props.client}
+        isLoading={props.isLoading}
+        value={props.value}
+        onSelectToken={props.onSelectToken}
         style={{
-          paddingInline: spacing.sm,
-          paddingBlock: spacing.sm,
-          minWidth: "50%",
-          justifyContent: "flex-start",
-          minHeight: "64px",
+          border: "none",
+          borderRadius: 0,
         }}
-      >
-        <PayTokenIcon
-          token={props.token}
-          chain={props.chain}
-          size="md"
-          client={props.client}
-        />
-        <Container flex="column" gap="3xs">
-          {props.isLoading ? (
-            <Skeleton width="120px" height={fontSize.md} color="borderColor" />
-          ) : (
-            <Container flex="row" gap="xxs" center="y" color="primaryText">
-              <Text
-                size="md"
-                color={props.value ? "primaryText" : "secondaryText"}
-              >
-                {formatNumber(Number(props.value), 6) || ""}
-              </Text>
-              <TokenSymbol token={props.token} chain={props.chain} size="sm" />
-            </Container>
-          )}
-          {name ? (
-            <Text size="xs">{name}</Text>
-          ) : (
-            <Skeleton width="90px" height={fontSize.xs} />
-          )}
-        </Container>
-      </Container>
+      />
     </Container>
   );
 }
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/PaymentSelectionScreen.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/PaymentSelectionScreen.tsx
deleted file mode 100644
index 95f58ee5738..00000000000
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/PaymentSelectionScreen.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import { CardStackIcon } from "@radix-ui/react-icons";
-import type { Chain } from "../../../../../../../chains/types.js";
-import type { ThirdwebClient } from "../../../../../../../client/client.js";
-import type { Wallet } from "../../../../../../../wallets/interfaces/wallet.js";
-import type { GetWalletBalanceResult } from "../../../../../../../wallets/utils/getWalletBalance.js";
-import type { WalletId } from "../../../../../../../wallets/wallet-types.js";
-import { useCustomTheme } from "../../../../../../core/design-system/CustomThemeProvider.js";
-import {
-  iconSize,
-  spacing,
-} from "../../../../../../core/design-system/index.js";
-import type { PayUIOptions } from "../../../../../../core/hooks/connection/ConnectButtonProps.js";
-import type {
-  SupportedTokens,
-  TokenInfo,
-} from "../../../../../../core/utils/defaultTokens.js";
-import { Spacer } from "../../../../components/Spacer.js";
-import { TextDivider } from "../../../../components/TextDivider.js";
-import { Container } from "../../../../components/basic.js";
-import { Button } from "../../../../components/buttons.js";
-import { Text } from "../../../../components/text.js";
-import { TokenRow } from "../../../../components/token/TokenRow.js";
-import type { ERC20OrNativeToken } from "../../nativeToken.js";
-
-export type TokenBalance = {
-  balance: GetWalletBalanceResult;
-  chain: Chain;
-  token: TokenInfo;
-};
-
-export function PaymentSelectionScreen(props: {
-  client: ThirdwebClient;
-  mode: PayUIOptions["mode"];
-  showAllWallets: boolean;
-  sourceSupportedTokens: SupportedTokens | undefined;
-  toChain: Chain;
-  toToken: ERC20OrNativeToken;
-  fromToken: ERC20OrNativeToken;
-  fromChain: Chain;
-  tokenAmount: string;
-  wallets: Wallet[] | undefined;
-  onContinue: () => void;
-  onSelectFiat: () => void;
-  onBack: () => void;
-  onConnect: () => void;
-  onPickToken: () => void;
-  hiddenWallets?: WalletId[];
-  payWithFiatEnabled: boolean;
-}) {
-  const theme = useCustomTheme();
-
-  return (
-    <Container>
-      <Container flex="column">
-        <TokenRow
-          client={props.client}
-          onSelectToken={() => props.onPickToken()}
-          token={props.fromToken}
-          chain={props.fromChain}
-        />
-        <Spacer y="md" />
-        <Button variant="accent" fullWidth onClick={() => props.onContinue()}>
-          Continue
-        </Button>
-
-        <TextDivider text={"OR"} py="md" />
-
-        {props.payWithFiatEnabled && (
-          <Button
-            variant="secondary"
-            fullWidth
-            gap="xs"
-            bg="tertiaryBg"
-            onClick={props.onSelectFiat}
-            style={{
-              border: `1px solid ${theme.colors.borderColor}`,
-              padding: spacing.sm,
-            }}
-          >
-            <Container
-              flex="row"
-              gap="sm"
-              center="both"
-              expand
-              color="secondaryIconColor"
-            >
-              <CardStackIcon
-                style={{
-                  width: iconSize.md,
-                  height: iconSize.md,
-                }}
-              />
-              <Text size="sm" color="primaryText">
-                Pay with credit card
-              </Text>
-            </Container>
-          </Button>
-        )}
-      </Container>
-      <Spacer y="sm" />
-    </Container>
-  );
-}
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/SwapScreenContent.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/SwapScreenContent.tsx
index 851b1f2b955..0c954b4fe48 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/SwapScreenContent.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/SwapScreenContent.tsx
@@ -220,7 +220,7 @@ export function SwapScreenContent(props: {
   }
 
   return (
-    <Container flex="column" gap="md" animate="fadein">
+    <Container flex="column" gap="lg" animate="fadein">
       {isOpen && (
         <>
           <DrawerOverlay ref={drawerOverlayRef} />
@@ -239,62 +239,60 @@ export function SwapScreenContent(props: {
       )}
 
       {/* Quote info */}
-      <div>
-        <PayWithCryptoQuoteInfo
-          value={sourceTokenAmount || ""}
-          chain={fromChain}
-          token={fromToken}
-          isLoading={quoteQuery.isLoading && !sourceTokenAmount}
-          client={client}
-          freezeChainAndTokenSelection={disableTokenSelection}
-          payerAccount={props.payer.account}
-          swapRequired={swapRequired}
-        />
-        {swapRequired && (
-          <EstimatedTimeAndFees
-            quoteIsLoading={quoteQuery.isLoading}
-            estimatedSeconds={
-              quoteQuery.data?.swapDetails.estimated.durationSeconds
-            }
-            onViewFees={showFees}
-          />
-        )}
-        <Spacer y="md" />
-      </div>
-
-      {/* Error message */}
-      {errorMsg && (
+      <Container flex="column" gap="sm">
         <div>
-          {errorMsg.data?.minimumAmountEth ? (
-            <Text color="danger" size="sm" center multiline>
-              Minimum amount is{" "}
-              {formatNumber(Number(errorMsg.data.minimumAmountEth), 6)}{" "}
-              <TokenSymbol
-                token={toToken}
-                chain={toChain}
-                size="sm"
-                inline
-                color="danger"
-              />
-            </Text>
-          ) : (
-            <Text color="danger" size="sm" center multiline>
-              {errorMsg.message || defaultMessage}
-            </Text>
+          <PayWithCryptoQuoteInfo
+            value={sourceTokenAmount || ""}
+            chain={fromChain}
+            token={fromToken}
+            isLoading={quoteQuery.isLoading && !sourceTokenAmount}
+            client={client}
+            freezeChainAndTokenSelection={disableTokenSelection}
+            payerAccount={props.payer.account}
+            swapRequired={swapRequired}
+            onSelectToken={props.showFromTokenSelector}
+          />
+          {swapRequired && (
+            <EstimatedTimeAndFees
+              quoteIsLoading={quoteQuery.isLoading}
+              estimatedSeconds={
+                quoteQuery.data?.swapDetails.estimated.durationSeconds
+              }
+              onViewFees={showFees}
+            />
           )}
         </div>
-      )}
+        {/* Error message */}
+        {errorMsg && (
+          <div>
+            {errorMsg.data?.minimumAmountEth ? (
+              <Text color="danger" size="xs" center multiline>
+                Minimum amount is{" "}
+                {formatNumber(Number(errorMsg.data.minimumAmountEth), 6)}{" "}
+                <TokenSymbol
+                  token={toToken}
+                  chain={toChain}
+                  size="sm"
+                  inline
+                  color="danger"
+                />
+              </Text>
+            ) : (
+              <Text color="danger" size="xs" center multiline>
+                {errorMsg.message || defaultMessage}
+              </Text>
+            )}
+          </div>
+        )}
 
-      {!errorMsg && isNotEnoughBalance && (
-        <div>
-          <Text color="danger" size="sm" center multiline>
-            Not enough funds.
-          </Text>
-          <Text color="danger" size="sm" center multiline>
-            Try a different wallet or token.
-          </Text>
-        </div>
-      )}
+        {!errorMsg && isNotEnoughBalance && (
+          <div>
+            <Text color="danger" size="xs" center multiline>
+              Not enough funds.
+            </Text>
+          </div>
+        )}
+      </Container>
 
       {/* Button */}
       {errorMsg?.data?.minimumAmountEth ? (
@@ -313,6 +311,14 @@ export function SwapScreenContent(props: {
         >
           Set Minimum
         </Button>
+      ) : isNotEnoughBalance || errorMsg ? (
+        <Button
+          variant="accent"
+          fullWidth
+          onClick={() => props.showFromTokenSelector()}
+        >
+          Select another token
+        </Button>
       ) : switchChainRequired &&
         !quoteQuery.isLoading &&
         !allowanceQuery.isLoading &&
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/TokenSelectorScreen.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/TokenSelectorScreen.tsx
index 3bb9118b64b..853576cc1de 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/TokenSelectorScreen.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/TokenSelectorScreen.tsx
@@ -6,7 +6,10 @@ import type { ThirdwebClient } from "../../../../../../../client/client.js";
 import { NATIVE_TOKEN_ADDRESS } from "../../../../../../../constants/addresses.js";
 import { shortenAddress } from "../../../../../../../utils/address.js";
 import type { Wallet } from "../../../../../../../wallets/interfaces/wallet.js";
-import { getWalletBalance } from "../../../../../../../wallets/utils/getWalletBalance.js";
+import {
+  type GetWalletBalanceResult,
+  getWalletBalance,
+} from "../../../../../../../wallets/utils/getWalletBalance.js";
 import type { WalletId } from "../../../../../../../wallets/wallet-types.js";
 import { useCustomTheme } from "../../../../../../core/design-system/CustomThemeProvider.js";
 import {
@@ -44,7 +47,12 @@ import type { ConnectLocale } from "../../../locale/types.js";
 import { formatTokenBalance } from "../../formatTokenBalance.js";
 import { type ERC20OrNativeToken, isNativeToken } from "../../nativeToken.js";
 import { FiatValue } from "./FiatValue.js";
-import type { TokenBalance } from "./PaymentSelectionScreen.js";
+
+type TokenBalance = {
+  balance: GetWalletBalanceResult;
+  chain: Chain;
+  token: TokenInfo;
+};
 
 export function TokenSelectorScreen(props: {
   client: ThirdwebClient;
diff --git a/packages/thirdweb/src/react/web/ui/components/token/TokenRow.tsx b/packages/thirdweb/src/react/web/ui/components/token/TokenRow.tsx
index d9ec116e61b..c96dba4dd44 100644
--- a/packages/thirdweb/src/react/web/ui/components/token/TokenRow.tsx
+++ b/packages/thirdweb/src/react/web/ui/components/token/TokenRow.tsx
@@ -2,6 +2,7 @@ import styled from "@emotion/styled";
 import { ChevronDownIcon } from "@radix-ui/react-icons";
 import type { Chain } from "../../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../../client/client.js";
+import { formatNumber } from "../../../../../utils/formatNumber.js";
 import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
 import {
   fontSize,
@@ -23,6 +24,9 @@ export function TokenRow(props: {
   client: ThirdwebClient;
   onSelectToken: () => void;
   freezeChainAndToken?: boolean;
+  value?: string;
+  isLoading?: boolean;
+  style?: React.CSSProperties;
 }) {
   const { name } = useChainName(props.chain);
   return (
@@ -31,6 +35,7 @@ export function TokenRow(props: {
       fullWidth
       style={{
         fontSize: fontSize.sm,
+        ...props.style,
       }}
       gap="xxs"
       onClick={props.onSelectToken}
@@ -51,7 +56,31 @@ export function TokenRow(props: {
           }}
         >
           {/* Token Symbol */}
-          <TokenSymbol token={props.token} chain={props.chain} size="sm" />
+          <Container flex="column" gap="3xs">
+            {props.isLoading ? (
+              <Skeleton
+                width="120px"
+                height={fontSize.md}
+                color="borderColor"
+              />
+            ) : props.value ? (
+              <Container flex="row" gap="xxs" center="y" color="primaryText">
+                <Text
+                  size="md"
+                  color={props.value ? "primaryText" : "secondaryText"}
+                >
+                  {formatNumber(Number(props.value), 6) || ""}
+                </Text>
+                <TokenSymbol
+                  token={props.token}
+                  chain={props.chain}
+                  size="sm"
+                />
+              </Container>
+            ) : (
+              <TokenSymbol token={props.token} chain={props.chain} size="sm" />
+            )}
+          </Container>
 
           {/* Network Name */}
           {name ? (
@@ -63,14 +92,9 @@ export function TokenRow(props: {
           )}
         </Container>
       </Container>
-
-      <ChevronDownIcon
-        width={iconSize.sm}
-        height={iconSize.sm}
-        style={{
-          marginLeft: "auto",
-        }}
-      />
+      <Container color="primaryText">
+        <ChevronDownIcon width={iconSize.sm} height={iconSize.sm} />
+      </Container>
     </TokenButton>
   );
 }
@@ -80,7 +104,7 @@ const TokenButton = /* @__PURE__ */ styled(Button)(() => {
   return {
     background: theme.colors.tertiaryBg,
     border: `1px solid ${theme.colors.borderColor}`,
-    justifyContent: "flex-start",
+    justifyContent: "space-between",
     transition: "background 0.3s",
     padding: spacing.sm,
   };