diff --git a/apps/playground-web/src/app/insight/utils.ts b/apps/playground-web/src/app/insight/utils.ts
index 360e8f9a267..a9503422a65 100644
--- a/apps/playground-web/src/app/insight/utils.ts
+++ b/apps/playground-web/src/app/insight/utils.ts
@@ -55,17 +55,22 @@ export async function fetchBlueprintSpec(params: {
 }
 
 export async function fetchAllBlueprints() {
-  // fetch list
-  const blueprintSpecs = await fetchBlueprintList();
-
-  // fetch all blueprints
-  const blueprints = await Promise.all(
-    blueprintSpecs.map((spec) =>
-      fetchBlueprintSpec({
-        blueprintId: spec.id,
-      }),
-    ),
-  );
-
-  return blueprints;
+  try {
+    // fetch list
+    const blueprintSpecs = await fetchBlueprintList();
+
+    // fetch all blueprints
+    const blueprints = await Promise.all(
+      blueprintSpecs.map((spec) =>
+        fetchBlueprintSpec({
+          blueprintId: spec.id,
+        }),
+      ),
+    );
+
+    return blueprints;
+  } catch (error) {
+    console.error(error);
+    return [];
+  }
 }
diff --git a/apps/playground-web/src/components/pay/direct-payment.tsx b/apps/playground-web/src/components/pay/direct-payment.tsx
index 09879b44a77..3641f94cbfd 100644
--- a/apps/playground-web/src/components/pay/direct-payment.tsx
+++ b/apps/playground-web/src/components/pay/direct-payment.tsx
@@ -1,6 +1,5 @@
 "use client";
-
-import { sepolia } from "thirdweb/chains";
+import { base } from "thirdweb/chains";
 import { PayEmbed, getDefaultToken } from "thirdweb/react";
 import { THIRDWEB_CLIENT } from "../../lib/client";
 import { StyledConnectButton } from "../styled-connect-button";
@@ -16,9 +15,9 @@ export function BuyMerchPreview() {
         payOptions={{
           mode: "direct_payment",
           paymentInfo: {
-            amount: "0.1",
-            chain: sepolia,
-            token: getDefaultToken(sepolia, "USDC"),
+            amount: "2",
+            chain: base,
+            token: getDefaultToken(base, "USDC"),
             sellerAddress: "0xEb0effdFB4dC5b3d5d3aC6ce29F3ED213E95d675",
           },
           metadata: {
diff --git a/apps/playground-web/src/components/pay/transaction-button.tsx b/apps/playground-web/src/components/pay/transaction-button.tsx
index ee2404a6932..82cebc4effc 100644
--- a/apps/playground-web/src/components/pay/transaction-button.tsx
+++ b/apps/playground-web/src/components/pay/transaction-button.tsx
@@ -2,7 +2,7 @@
 
 import { useTheme } from "next-themes";
 import { getContract } from "thirdweb";
-import { base, sepolia } from "thirdweb/chains";
+import { base, polygon } from "thirdweb/chains";
 import { transfer } from "thirdweb/extensions/erc20";
 import { claimTo, getNFT } from "thirdweb/extensions/erc1155";
 import {
@@ -21,12 +21,12 @@ const nftContract = getContract({
   client: THIRDWEB_CLIENT,
 });
 
-const USDC = getDefaultToken(sepolia, "USDC");
+const USDC = getDefaultToken(polygon, "USDC");
 
 const usdcContract = getContract({
   // biome-ignore lint/style/noNonNullAssertion: its there
   address: USDC!.address,
-  chain: sepolia,
+  chain: polygon,
   client: THIRDWEB_CLIENT,
 });
 
@@ -55,6 +55,7 @@ export function PayTransactionPreview() {
               to: account?.address || "",
             }),
             metadata: nft?.metadata,
+            buyWithFiat: false,
           }}
         />
       )}
@@ -69,6 +70,7 @@ export function PayTransactionButtonPreview() {
   return (
     <>
       <StyledConnectButton />
+      <div className="h-10" />
       {account && (
         <div className="flex flex-col items-center justify-center gap-2">
           <div className="flex items-center gap-2">
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 507fb089f88..9984a284ae0 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,11 +8,9 @@ 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 {
@@ -27,10 +25,9 @@ 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, ModalHeader } from "../../../components/basic.js";
+import { Container, Line, ModalHeader } from "../../../components/basic.js";
 import { Button } from "../../../components/buttons.js";
 import { Input } from "../../../components/formElements.js";
-import { Text } from "../../../components/text.js";
 import { TokenSymbol } from "../../../components/token/TokenSymbol.js";
 import { ConnectButton } from "../../ConnectButton.js";
 import { ChainButton, NetworkSelectorContent } from "../../NetworkSelector.js";
@@ -432,67 +429,6 @@ function BuyScreenContent(props: BuyScreenContentProps) {
     );
   }
 
-  if (
-    screen.id === "select-from-token" &&
-    supportedSourcesQuery.data &&
-    sourceSupportedTokens
-  ) {
-    const chains = supportedSourcesQuery.data.map((x) => x.chain);
-    const goBack = () => setScreen(screen.backScreen);
-    // if token selection is disabled - only show network selector screen
-    if (
-      payOptions.buyWithCrypto !== false &&
-      payOptions.buyWithCrypto?.prefillSource?.allowEdits?.token === false
-    ) {
-      return (
-        <ChainSelectionScreen
-          chains={chains}
-          client={props.client}
-          connectLocale={props.connectLocale}
-          setChain={setFromChain}
-          goBack={goBack}
-        />
-      );
-    }
-
-    return (
-      <TokenSelectorScreen
-        onBack={goBack}
-        onConnect={() => {
-          setScreen({
-            id: "connect-payer-wallet",
-            backScreen: screen,
-          });
-        }}
-        modalTitle="Available tokens"
-        connectLocale={props.connectLocale}
-        client={props.client}
-        sourceTokens={sourceSupportedTokens}
-        sourceSupportedTokens={sourceSupportedTokens}
-        toChain={toChain}
-        toToken={toToken}
-        tokenAmount={tokenAmount}
-        fromChain={fromChain}
-        fromToken={fromToken}
-        mode={payOptions.mode}
-        hiddenWallets={props.hiddenWallets}
-        onSelect={(w, token, chain) => {
-          const account = w.getAccount();
-          if (account) {
-            setPayer({
-              account,
-              chain,
-              wallet: w,
-            });
-            setFromToken(token);
-            setFromChain(chain);
-          }
-          goBack();
-        }}
-      />
-    );
-  }
-
   return (
     <Container animate="fadein">
       <div>
@@ -526,19 +462,10 @@ function BuyScreenContent(props: BuyScreenContentProps) {
 
         {(screen.id === "select-payment-method" ||
           screen.id === "buy-with-crypto" ||
-          screen.id === "buy-with-fiat") &&
+          screen.id === "buy-with-fiat" ||
+          screen.id === "select-from-token") &&
           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) ||
@@ -551,7 +478,19 @@ function BuyScreenContent(props: BuyScreenContentProps) {
               setTokenAmount={setTokenAmount}
               client={client}
               onBack={() => {
-                setScreen({ id: "main" });
+                if (
+                  screen.id === "buy-with-crypto" ||
+                  screen.id === "buy-with-fiat"
+                ) {
+                  setScreen({
+                    id: "select-from-token",
+                    backScreen: { id: "main" },
+                  });
+                } else if (screen.id === "select-from-token") {
+                  setScreen(screen.backScreen);
+                } else {
+                  setScreen({ id: "main" });
+                }
               }}
             >
               {screen.id === "buy-with-crypto" && activeAccount && (
@@ -614,6 +553,45 @@ function BuyScreenContent(props: BuyScreenContentProps) {
                   setHasEditedAmount={setHasEditedAmount}
                 />
               )}
+
+              {screen.id === "select-from-token" &&
+                supportedSourcesQuery.data &&
+                sourceSupportedTokens && (
+                  <TokenSelectorScreen
+                    client={props.client}
+                    sourceTokens={sourceSupportedTokens}
+                    sourceSupportedTokens={sourceSupportedTokens}
+                    toChain={toChain}
+                    toToken={toToken}
+                    tokenAmount={tokenAmount}
+                    mode={payOptions.mode}
+                    hiddenWallets={props.hiddenWallets}
+                    onConnect={() => {
+                      setScreen({
+                        id: "connect-payer-wallet",
+                        backScreen: screen,
+                      });
+                    }}
+                    onPayWithFiat={() => {
+                      setScreen({
+                        id: "buy-with-fiat",
+                      });
+                    }}
+                    onSelectToken={(w, token, chain) => {
+                      const account = w.getAccount();
+                      if (account) {
+                        setPayer({
+                          account,
+                          chain,
+                          wallet: w,
+                        });
+                        setFromToken(token);
+                        setFromChain(chain);
+                      }
+                      setScreen({ id: "buy-with-crypto" });
+                    }}
+                  />
+                )}
             </TokenSelectedLayout>
           )}
       </div>
@@ -802,7 +780,10 @@ function MainScreen(props: {
             if (buyWithFiatEnabled && !buyWithCryptoEnabled) {
               props.setScreen({ id: "buy-with-fiat" });
             } else {
-              props.setScreen({ id: "buy-with-crypto" });
+              props.setScreen({
+                id: "select-from-token",
+                backScreen: { id: "main" },
+              });
             }
           }}
         />
@@ -825,7 +806,10 @@ function MainScreen(props: {
             if (buyWithFiatEnabled && !buyWithCryptoEnabled) {
               props.setScreen({ id: "buy-with-fiat" });
             } else {
-              props.setScreen({ id: "buy-with-crypto" });
+              props.setScreen({
+                id: "select-from-token",
+                backScreen: { id: "main" },
+              });
             }
           }}
         />
@@ -888,7 +872,10 @@ function MainScreen(props: {
                   if (buyWithFiatEnabled && !buyWithCryptoEnabled) {
                     props.setScreen({ id: "buy-with-fiat" });
                   } else {
-                    props.setScreen({ id: "buy-with-crypto" });
+                    props.setScreen({
+                      id: "select-from-token",
+                      backScreen: { id: "main" },
+                    });
                   }
                 }}
               >
@@ -912,12 +899,7 @@ 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">
@@ -940,78 +922,9 @@ function TokenSelectedLayout(props: {
           disabled={props.disabled}
         />
 
-        <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>
-
-        <Spacer y="lg" />
-
+        <Spacer y="sm" />
+        <Line />
+        <Spacer y="sm" />
         {props.children}
       </Container>
     </Container>
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/TransactionModeScreen.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/TransactionModeScreen.tsx
index 2e7a56b0caf..5970ad46fbd 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/TransactionModeScreen.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/TransactionModeScreen.tsx
@@ -33,7 +33,7 @@ import {
   isNativeToken,
 } from "../nativeToken.js";
 import { useTransactionCostAndData } from "./main/useBuyTxStates.js";
-import { WalletRow } from "./swap/TokenSelectorScreen.js";
+import { WalletRow } from "./swap/WalletRow.js";
 import type { SupportedChainAndTokens } from "./swap/useSwapSupportedChains.js";
 
 export function TransactionModeScreen(props: {
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 6447e65958c..affe26a0156 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
@@ -199,6 +199,7 @@ export function FiatScreenContent(props: {
       )}
 
       <Container flex="column" gap="sm">
+        <Text size="sm">Pay with credit card</Text>
         <div>
           <PayWithCreditCard
             isLoading={fiatQuoteQuery.isLoading}
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatTxDetailsTable.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatTxDetailsTable.tsx
index a93b143b5c1..e504b444cd0 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatTxDetailsTable.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatTxDetailsTable.tsx
@@ -62,7 +62,7 @@ export function OnRampTxDetailsTable(props: {
           justifyContent: "space-between",
         }}
       >
-        <Text>Pay</Text>
+        <Text size="sm">Pay</Text>
         <Container
           flex="column"
           gap="xxs"
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/main/useUISelectionStates.ts b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/main/useUISelectionStates.ts
index 18db8cd4cbb..f4f197d1e36 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/main/useUISelectionStates.ts
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/main/useUISelectionStates.ts
@@ -76,14 +76,9 @@ export function useFromTokenSelectionStates(options: {
   payOptions: PayUIOptions;
   supportedSources: SupportedSourcesInputData[];
 }) {
-  const { payOptions, supportedSources } = options;
+  const { payOptions } = options;
 
-  // --------------------------------------------------------------------------
-  const firstSupportedSource = supportedSources?.length
-    ? supportedSources.length === 1
-      ? supportedSources[0]
-      : supportedSources.find((x) => x.chain.id !== 1) // dont use mainnet as a default source, unless its the only source
-    : undefined;
+  // TODO (pay) - auto select token based on connected wallet balances
 
   // Source token and chain selection ---------------------------------------------------
   const [fromChain_, setFromChain] = useState<Chain>();
@@ -95,12 +90,7 @@ export function useFromTokenSelectionStates(options: {
     (payOptions.mode === "transaction" && payOptions.transaction?.chain) ||
     (payOptions.mode === "direct_payment" && payOptions.paymentInfo?.chain);
 
-  const fromChainFromApi = firstSupportedSource?.chain
-    ? firstSupportedSource.chain
-    : undefined;
-
-  const fromChain =
-    fromChain_ || fromChainDevSpecified || fromChainFromApi || polygon;
+  const fromChain = fromChain_ || fromChainDevSpecified || undefined;
 
   const [fromToken_, setFromToken] = useState<ERC20OrNativeToken>();
 
@@ -110,12 +100,8 @@ export function useFromTokenSelectionStates(options: {
       payOptions.buyWithCrypto?.prefillSource?.token) ||
     (payOptions.mode === "direct_payment" && payOptions.paymentInfo.token);
 
-  // May be updated in the future
-  const fromTokenFromApi = NATIVE_TOKEN;
-
   // supported tokens query in here
-  const fromToken =
-    fromToken_ || fromTokenDevSpecified || fromTokenFromApi || NATIVE_TOKEN;
+  const fromToken = fromToken_ || fromTokenDevSpecified || undefined;
 
   return {
     fromChain,
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/ConfirmationScreen.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/ConfirmationScreen.tsx
index 89d0777e772..cd930784600 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/ConfirmationScreen.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/ConfirmationScreen.tsx
@@ -12,29 +12,20 @@ import {
   type WaitForReceiptOptions,
   waitForReceipt,
 } from "../../../../../../../transaction/actions/wait-for-tx-receipt.js";
-import { shortenAddress } from "../../../../../../../utils/address.js";
-import { formatNumber } from "../../../../../../../utils/formatNumber.js";
 import { useCustomTheme } from "../../../../../../core/design-system/CustomThemeProvider.js";
-import {
-  fontSize,
-  iconSize,
-} from "../../../../../../core/design-system/index.js";
-import { useChainName } from "../../../../../../core/hooks/others/useChainQuery.js";
-import { useEnsName } from "../../../../../../core/utils/wallet.js";
-import { Skeleton } from "../../../../components/Skeleton.js";
+import { iconSize } from "../../../../../../core/design-system/index.js";
 import { Spacer } from "../../../../components/Spacer.js";
 import { Spinner } from "../../../../components/Spinner.js";
 import { StepBar } from "../../../../components/StepBar.js";
 import { SwitchNetworkButton } from "../../../../components/SwitchNetwork.js";
-import { Container, Line, ModalHeader } from "../../../../components/basic.js";
+import { Container, ModalHeader } from "../../../../components/basic.js";
 import { Button } from "../../../../components/buttons.js";
 import { Text } from "../../../../components/text.js";
 import { StyledDiv } from "../../../../design-system/elements.js";
 import type { ERC20OrNativeToken } from "../../nativeToken.js";
-import { PayTokenIcon } from "../PayTokenIcon.js";
 import { Step } from "../Stepper.js";
 import type { PayerInfo } from "../types.js";
-import { formatSeconds } from "./formatSeconds.js";
+import { SwapSummary } from "./SwapSummary.js";
 import { addPendingTx } from "./pendingSwapTx.js";
 
 /**
@@ -74,9 +65,6 @@ export function SwapConfirmationScreen(props: {
 
   const receiver = props.quote.swapDetails.toAddress;
   const sender = props.quote.swapDetails.fromAddress;
-  const isDifferentRecipient = receiver.toLowerCase() !== sender.toLowerCase();
-
-  const ensName = useEnsName({ client: props.client, address: receiver });
 
   return (
     <Container p="lg">
@@ -94,58 +82,26 @@ export function SwapConfirmationScreen(props: {
           <Spacer y="md" />
         </>
       ) : (
-        <Spacer y="lg" />
-      )}
-
-      {/* Pay */}
-      <ConfirmItem label="Pay">
-        <RenderTokenInfo
-          chain={props.fromChain}
-          amount={String(formatNumber(Number(props.fromAmount), 6))}
-          symbol={props.fromTokenSymbol || ""}
-          token={props.fromToken}
-          client={props.client}
-        />
-      </ConfirmItem>
-
-      {/* Receive */}
-      {!isDifferentRecipient && (
-        <ConfirmItem label="Receive">
-          <RenderTokenInfo
-            chain={props.toChain}
-            amount={String(formatNumber(Number(props.toAmount), 6))}
-            symbol={props.toTokenSymbol}
-            token={props.toToken}
-            client={props.client}
-          />
-        </ConfirmItem>
+        <>
+          <Spacer y="lg" />
+          <Text size="sm">Confirm payment</Text>
+          <Spacer y="md" />
+        </>
       )}
 
-      {/* Fees  */}
-      <ConfirmItem label="Fees">
-        <SwapFeesRightAligned quote={props.quote} />
-      </ConfirmItem>
-
-      {/* Time  */}
-      <ConfirmItem label="Time">
-        <Text size="sm" color="primaryText">
-          ~
-          {formatSeconds(
-            props.quote.swapDetails.estimated.durationSeconds || 0,
-          )}
-        </Text>
-      </ConfirmItem>
-
-      {/* Send to  */}
-      {isDifferentRecipient && (
-        <ConfirmItem label="Receiver">
-          <Text color="primaryText" size="sm">
-            {ensName.data || shortenAddress(receiver)}
-          </Text>
-        </ConfirmItem>
-      )}
+      <SwapSummary
+        sender={sender}
+        receiver={receiver}
+        client={props.client}
+        fromToken={props.fromToken}
+        fromChain={props.fromChain}
+        toToken={props.toToken}
+        toChain={props.toChain}
+        fromAmount={props.fromAmount}
+        toAmount={props.toAmount}
+      />
 
-      <Spacer y="xl" />
+      <Spacer y="md" />
 
       {/* Show 2 steps - Approve and confirm  */}
       {needsApprovalStep && (
@@ -348,100 +304,3 @@ export const ConnectorLine = /* @__PURE__ */ StyledDiv(() => {
     flex: 1,
   };
 });
-
-function RenderTokenInfo(props: {
-  chain: Chain;
-  token: ERC20OrNativeToken;
-  amount: string;
-  symbol: string;
-  client: ThirdwebClient;
-}) {
-  const { name } = useChainName(props.chain);
-  return (
-    <Container
-      flex="column"
-      gap="xxs"
-      style={{
-        alignItems: "flex-end",
-      }}
-    >
-      <Container flex="row" center="y" gap="xs">
-        <Text color="primaryText" size="sm">
-          {props.amount} {props.symbol}
-        </Text>
-        <PayTokenIcon
-          token={props.token}
-          chain={props.chain}
-          size="xs"
-          client={props.client}
-        />
-      </Container>
-
-      {name ? (
-        <Text size="xs">{name}</Text>
-      ) : (
-        <Skeleton width="100px" height={fontSize.xs} />
-      )}
-    </Container>
-  );
-}
-
-function ConfirmItem(props: {
-  label: string;
-  children: React.ReactNode;
-}) {
-  return (
-    <>
-      <Container
-        flex="row"
-        gap="md"
-        py="md"
-        style={{
-          justifyContent: "space-between",
-        }}
-      >
-        <Text size="sm" color="secondaryText">
-          {props.label}
-        </Text>
-        {props.children}
-      </Container>
-      <Line />
-    </>
-  );
-}
-
-/**
- * @internal
- */
-function SwapFeesRightAligned(props: {
-  quote: BuyWithCryptoQuote;
-}) {
-  return (
-    <Container
-      flex="column"
-      gap="xs"
-      style={{
-        alignItems: "flex-end",
-      }}
-    >
-      {props.quote.processingFees.map((fee) => {
-        const feeAmount = formatNumber(Number(fee.amount), 6);
-        return (
-          <Container
-            key={`${fee.token.chainId}_${fee.token.tokenAddress}_${feeAmount}`}
-            flex="row"
-            gap="xxs"
-          >
-            <Text color="primaryText" size="sm">
-              {feeAmount === 0 ? "~" : ""}
-              {feeAmount} {fee.token.symbol}
-            </Text>
-            <Text color="secondaryText" size="sm">
-              (${(fee.amountUSDCents / 100).toFixed(2)})
-            </Text>
-          </Container>
-        );
-      })}
-    </Container>
-  );
-}
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 ca32442f9d8..8a535e2e5ab 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
@@ -16,7 +16,7 @@ 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 { WalletRow } from "./TokenSelectorScreen.js";
+import { WalletRow } from "./WalletRow.js";
 
 /**
  * Shows an amount "value" and renders the selected token and chain
@@ -26,8 +26,8 @@ import { WalletRow } from "./TokenSelectorScreen.js";
  */
 export function PayWithCryptoQuoteInfo(props: {
   value: string;
-  chain: Chain;
-  token: TokenInfo | NativeToken;
+  chain: Chain | undefined;
+  token: TokenInfo | NativeToken | undefined;
   isLoading: boolean;
   client: ThirdwebClient;
   freezeChainAndTokenSelection?: boolean;
@@ -36,12 +36,19 @@ export function PayWithCryptoQuoteInfo(props: {
   onSelectToken: () => void;
 }) {
   const theme = useCustomTheme();
-  const balanceQuery = useWalletBalance({
-    address: props.payerAccount.address,
-    chain: props.chain,
-    tokenAddress: isNativeToken(props.token) ? undefined : props.token.address,
-    client: props.client,
-  });
+  const balanceQuery = useWalletBalance(
+    {
+      address: props.payerAccount.address,
+      chain: props.chain,
+      tokenAddress: isNativeToken(props.token)
+        ? undefined
+        : props.token?.address,
+      client: props.client,
+    },
+    {
+      enabled: !!props.chain && !!props.token,
+    },
+  );
 
   return (
     <Container
@@ -69,10 +76,10 @@ export function PayWithCryptoQuoteInfo(props: {
         }}
       >
         <WalletRow client={props.client} address={props.payerAccount.address} />
-        {balanceQuery.data ? (
+        {props.token && props.chain && balanceQuery.data ? (
           <Container flex="row" gap="3xs" center="y">
             <Text size="xs" color="secondaryText" weight={500}>
-              {formatTokenBalance(balanceQuery.data, false)}
+              {formatTokenBalance(balanceQuery.data, false, 4)}
             </Text>
             <TokenSymbol
               token={props.token}
@@ -81,11 +88,11 @@ export function PayWithCryptoQuoteInfo(props: {
               color="secondaryText"
             />
           </Container>
-        ) : (
+        ) : props.token && props.chain && balanceQuery.isLoading ? (
           <Skeleton width="70px" height={fontSize.xs} />
-        )}
+        ) : null}
       </Container>
-      {/* Quoted price */}
+      {/* Quoted price & token selector */}
       <TokenRow
         token={props.token}
         chain={props.chain}
@@ -96,6 +103,10 @@ export function PayWithCryptoQuoteInfo(props: {
         style={{
           border: "none",
           borderRadius: 0,
+          borderBottomLeftRadius:
+            !props.token || !props.chain || !props.swapRequired ? radius.lg : 0,
+          borderBottomRightRadius:
+            !props.token || !props.chain || !props.swapRequired ? radius.lg : 0,
         }}
       />
     </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 0c954b4fe48..bdddf776f0a 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
@@ -42,8 +42,8 @@ export function SwapScreenContent(props: {
   tokenAmount: string;
   toToken: ERC20OrNativeToken;
   toChain: Chain;
-  fromChain: Chain;
-  fromToken: ERC20OrNativeToken;
+  fromChain: Chain | undefined;
+  fromToken: ERC20OrNativeToken | undefined;
   showFromTokenSelector: () => void;
   payer: PayerInfo;
   client: ThirdwebClient;
@@ -81,42 +81,50 @@ export function SwapScreenContent(props: {
     "fees" | "receiver" | "payer"
   >("fees");
 
-  const fromTokenBalanceQuery = useWalletBalance({
-    address: payer.account.address,
-    chain: fromChain,
-    tokenAddress: isNativeToken(fromToken) ? undefined : fromToken.address,
-    client,
-  });
+  const fromTokenBalanceQuery = useWalletBalance(
+    {
+      address: payer.account.address,
+      chain: fromChain,
+      tokenAddress: isNativeToken(fromToken) ? undefined : fromToken?.address,
+      client,
+    },
+    {
+      enabled: !!fromChain && !!fromToken,
+    },
+  );
 
   const fromTokenId = isNativeToken(fromToken)
     ? NATIVE_TOKEN_ADDRESS
-    : fromToken.address.toLowerCase();
+    : fromToken?.address?.toLowerCase();
   const toTokenId = isNativeToken(toToken)
     ? NATIVE_TOKEN_ADDRESS
     : toToken.address.toLowerCase();
   const swapRequired =
     !!tokenAmount &&
-    !(fromChain.id === toChain.id && fromTokenId === toTokenId);
-  const quoteParams: GetBuyWithCryptoQuoteParams | undefined = swapRequired
-    ? {
-        // wallets
-        fromAddress: payer.account.address,
-        toAddress: receiverAddress,
-        // from
-        fromChainId: fromChain.id,
-        fromTokenAddress: isNativeToken(fromToken)
-          ? NATIVE_TOKEN_ADDRESS
-          : fromToken.address,
-        // to
-        toChainId: toChain.id,
-        toTokenAddress: isNativeToken(toToken)
-          ? NATIVE_TOKEN_ADDRESS
-          : toToken.address,
-        toAmount: tokenAmount,
-        client,
-        purchaseData: payOptions.purchaseData,
-      }
-    : undefined;
+    !!fromChain &&
+    !!fromTokenId &&
+    !(fromChain?.id === toChain.id && fromTokenId === toTokenId);
+  const quoteParams: GetBuyWithCryptoQuoteParams | undefined =
+    fromChain && fromToken && swapRequired
+      ? {
+          // wallets
+          fromAddress: payer.account.address,
+          toAddress: receiverAddress,
+          // from
+          fromChainId: fromChain.id,
+          fromTokenAddress: isNativeToken(fromToken)
+            ? NATIVE_TOKEN_ADDRESS
+            : fromToken.address,
+          // to
+          toChainId: toChain.id,
+          toTokenAddress: isNativeToken(toToken)
+            ? NATIVE_TOKEN_ADDRESS
+            : toToken.address,
+          toAmount: tokenAmount,
+          client,
+          purchaseData: payOptions.purchaseData,
+        }
+      : undefined;
 
   const quoteQuery = useBuyWithCryptoQuote(quoteParams, {
     // refetch every 30 seconds
@@ -159,11 +167,13 @@ export function SwapScreenContent(props: {
     Number(fromTokenBalanceQuery.data.displayValue) < Number(sourceTokenAmount);
 
   const disableContinue =
+    !fromChain ||
+    !fromToken ||
     (swapRequired && !quoteQuery.data) ||
     isNotEnoughBalance ||
     allowanceQuery.isLoading;
   const switchChainRequired =
-    props.payer.wallet.getChain()?.id !== fromChain.id;
+    props.payer.wallet.getChain()?.id !== fromChain?.id;
 
   const errorMsg =
     !quoteQuery.isLoading && quoteQuery.error
@@ -240,6 +250,19 @@ export function SwapScreenContent(props: {
 
       {/* Quote info */}
       <Container flex="column" gap="sm">
+        <Container flex="row" gap="xxs" center="y">
+          <Text size="sm">Pay with</Text>
+          {fromToken && fromChain ? (
+            <TokenSymbol
+              token={fromToken}
+              chain={fromChain}
+              size="sm"
+              color="secondaryText"
+            />
+          ) : (
+            "crypto"
+          )}
+        </Container>
         <div>
           <PayWithCryptoQuoteInfo
             value={sourceTokenAmount || ""}
@@ -252,7 +275,7 @@ export function SwapScreenContent(props: {
             swapRequired={swapRequired}
             onSelectToken={props.showFromTokenSelector}
           />
-          {swapRequired && (
+          {swapRequired && fromChain && fromToken && (
             <EstimatedTimeAndFees
               quoteIsLoading={quoteQuery.isLoading}
               estimatedSeconds={
@@ -288,7 +311,7 @@ export function SwapScreenContent(props: {
         {!errorMsg && isNotEnoughBalance && (
           <div>
             <Text color="danger" size="xs" center multiline>
-              Not enough funds.
+              Insufficient funds
             </Text>
           </div>
         )}
@@ -317,9 +340,10 @@ export function SwapScreenContent(props: {
           fullWidth
           onClick={() => props.showFromTokenSelector()}
         >
-          Select another token
+          Pay with another token
         </Button>
       ) : switchChainRequired &&
+        fromChain &&
         !quoteQuery.isLoading &&
         !allowanceQuery.isLoading &&
         !isNotEnoughBalance &&
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/SwapSummary.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/SwapSummary.tsx
new file mode 100644
index 00000000000..a4af2b4c07c
--- /dev/null
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/SwapSummary.tsx
@@ -0,0 +1,128 @@
+import { ChevronDownIcon } from "@radix-ui/react-icons";
+import type { Chain } from "../../../../../../../chains/types.js";
+import type { ThirdwebClient } from "../../../../../../../client/client.js";
+import { useCustomTheme } from "../../../../../../core/design-system/CustomThemeProvider.js";
+import {
+  iconSize,
+  radius,
+} from "../../../../../../core/design-system/index.js";
+import { Container } from "../../../../components/basic.js";
+import { TokenRow } from "../../../../components/token/TokenRow.js";
+import type { ERC20OrNativeToken } from "../../nativeToken.js";
+import { WalletRow } from "./WalletRow.js";
+
+export function SwapSummary(props: {
+  sender: string;
+  receiver: string;
+  client: ThirdwebClient;
+  fromToken: ERC20OrNativeToken;
+  fromChain: Chain;
+  toToken: ERC20OrNativeToken;
+  toChain: Chain;
+  fromAmount: string;
+  toAmount: string;
+}) {
+  const theme = useCustomTheme();
+  const isDifferentRecipient =
+    props.receiver.toLowerCase() !== props.sender.toLowerCase();
+  return (
+    <Container>
+      {/* Sell */}
+      <Container
+        bg="tertiaryBg"
+        flex="column"
+        style={{
+          borderRadius: radius.lg,
+          border: `1px solid ${theme.colors.borderColor}`,
+        }}
+      >
+        {isDifferentRecipient && (
+          <Container
+            flex="row"
+            gap="sm"
+            p="sm"
+            style={{
+              borderBottom: `1px solid ${theme.colors.borderColor}`,
+            }}
+          >
+            <WalletRow
+              address={props.sender}
+              client={props.client}
+              iconSize="md"
+              textSize="sm"
+            />
+          </Container>
+        )}
+        <TokenRow
+          token={props.fromToken}
+          chain={props.fromChain}
+          client={props.client}
+          isLoading={false}
+          value={props.fromAmount}
+          freezeChainAndToken={true}
+          onSelectToken={() => {}}
+          style={{
+            background: "transparent",
+            borderRadius: 0,
+            border: "none",
+          }}
+        />
+      </Container>
+      {/* Connector Icon */}
+      <Container flex="row" center="both" py="xxs">
+        <Container flex="column" center="both">
+          <ChevronDownIcon
+            width={iconSize.md}
+            height={iconSize.md}
+            style={{
+              color: theme.colors.secondaryIconColor,
+            }}
+          />
+          <ChevronDownIcon
+            width={iconSize.md}
+            height={iconSize.md}
+            style={{
+              color: theme.colors.secondaryIconColor,
+              marginTop: "-17px",
+            }}
+          />
+        </Container>
+      </Container>
+      {/* Buy */}
+      <Container
+        flex="column"
+        bg="tertiaryBg"
+        style={{
+          borderRadius: radius.lg,
+          border: `1px solid ${theme.colors.borderColor}`,
+        }}
+      >
+        {isDifferentRecipient && (
+          <Container flex="row" gap="sm" p="sm">
+            <WalletRow
+              address={props.receiver}
+              client={props.client}
+              iconSize="md"
+              textSize="sm"
+            />
+          </Container>
+        )}
+        <TokenRow
+          token={props.toToken}
+          chain={props.toChain}
+          client={props.client}
+          isLoading={false}
+          value={props.toAmount}
+          freezeChainAndToken={true}
+          onSelectToken={() => {}}
+          style={{
+            background: "transparent",
+            borderRadius: 0,
+            border: "none",
+            borderTop: `1px solid ${theme.colors.borderColor}`,
+          }}
+        />
+      </Container>
+    </Container>
+  );
+}
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 853576cc1de..a7c0a0efdbc 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
@@ -1,10 +1,14 @@
 import styled from "@emotion/styled";
+import {
+  CardStackIcon,
+  ChevronRightIcon,
+  Cross2Icon,
+} from "@radix-ui/react-icons";
 import { useQuery } from "@tanstack/react-query";
 import type { Chain } from "../../../../../../../chains/types.js";
 import { getCachedChain } from "../../../../../../../chains/utils.js";
 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 {
   type GetWalletBalanceResult,
@@ -13,7 +17,6 @@ import {
 import type { WalletId } from "../../../../../../../wallets/wallet-types.js";
 import { useCustomTheme } from "../../../../../../core/design-system/CustomThemeProvider.js";
 import {
-  type fontSize,
   iconSize,
   radius,
   spacing,
@@ -25,28 +28,23 @@ import {
 } from "../../../../../../core/hooks/others/useChainQuery.js";
 import { useActiveAccount } from "../../../../../../core/hooks/wallets/useActiveAccount.js";
 import { useConnectedWallets } from "../../../../../../core/hooks/wallets/useConnectedWallets.js";
+import { useDisconnect } from "../../../../../../core/hooks/wallets/useDisconnect.js";
 import type {
   SupportedTokens,
   TokenInfo,
 } from "../../../../../../core/utils/defaultTokens.js";
-import {
-  useEnsAvatar,
-  useEnsName,
-} from "../../../../../../core/utils/wallet.js";
 import { LoadingScreen } from "../../../../../wallets/shared/LoadingScreen.js";
-import { Img } from "../../../../components/Img.js";
+import { Spacer } from "../../../../components/Spacer.js";
 import { TextDivider } from "../../../../components/TextDivider.js";
 import { TokenIcon } from "../../../../components/TokenIcon.js";
-import { WalletImage } from "../../../../components/WalletImage.js";
-import { Container, Line, ModalHeader } from "../../../../components/basic.js";
+import { Container } from "../../../../components/basic.js";
 import { Button } from "../../../../components/buttons.js";
 import { Text } from "../../../../components/text.js";
-import { Blobbie } from "../../../Blobbie.js";
 import { OutlineWalletIcon } from "../../../icons/OutlineWalletIcon.js";
-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 { WalletRow } from "./WalletRow.js";
 
 type TokenBalance = {
   balance: GetWalletBalanceResult;
@@ -54,28 +52,28 @@ type TokenBalance = {
   token: TokenInfo;
 };
 
+type WalletKey = {
+  id: WalletId;
+  address: string;
+};
+
 export function TokenSelectorScreen(props: {
   client: ThirdwebClient;
   sourceTokens: SupportedTokens | undefined;
   sourceSupportedTokens: SupportedTokens | undefined;
   toChain: Chain;
   toToken: ERC20OrNativeToken;
-  fromToken: ERC20OrNativeToken;
-  fromChain: Chain;
   tokenAmount: string;
   mode: PayUIOptions["mode"];
   hiddenWallets?: WalletId[];
-  onSelect: (wallet: Wallet, token: TokenInfo, chain: Chain) => void;
-  onBack: () => void;
+  onSelectToken: (wallet: Wallet, token: TokenInfo, chain: Chain) => void;
   onConnect: () => void;
-  modalTitle?: string;
-  connectLocale: ConnectLocale;
+  onPayWithFiat: () => void;
 }) {
   const connectedWallets = useConnectedWallets();
   const activeAccount = useActiveAccount();
   const chainInfo = useChainMetadata(props.toChain);
   const theme = useCustomTheme();
-  const locale = props.connectLocale.sendFundsScreen;
 
   const walletsAndBalances = useQuery({
     queryKey: [
@@ -90,12 +88,16 @@ export function TokenSelectorScreen(props: {
     ],
     queryFn: async () => {
       // in parallel, get the balances of all the wallets on each of the sourceSupportedTokens
-      const walletBalanceMap = new Map<Wallet, TokenBalance[]>();
+      const walletBalanceMap = new Map<WalletKey, TokenBalance[]>();
 
       const balancePromises = connectedWallets.flatMap((wallet) => {
         const account = wallet.getAccount();
         if (!account) return [];
-        walletBalanceMap.set(wallet, []);
+        const walletKey: WalletKey = {
+          id: wallet.id,
+          address: account.address,
+        };
+        walletBalanceMap.set(walletKey, []);
 
         // inject the destination token too since it can be used as well to pay/transfer
         const toToken = isNativeToken(props.toToken)
@@ -139,7 +141,7 @@ export function TokenSelectorScreen(props: {
                   : balance.value > 0n;
 
               if (shouldInclude) {
-                const existingBalances = walletBalanceMap.get(wallet) || [];
+                const existingBalances = walletBalanceMap.get(walletKey) || [];
                 existingBalances.push({ balance, chain, token });
                 existingBalances.sort((a, b) => {
                   if (
@@ -188,47 +190,44 @@ export function TokenSelectorScreen(props: {
     <Container
       animate="fadein"
       style={{
-        minHeight: "300px",
+        minHeight: "200px",
       }}
     >
-      <Container py="md" px="lg">
-        <ModalHeader
-          onBack={props.onBack}
-          title={props.modalTitle || locale.selectTokenTitle}
-        />
-      </Container>
-
-      <Line />
-
+      {filteredWallets.length === 0 ? (
+        <Container flex="column" gap="xs" py="lg">
+          <Text size="xs" color="secondaryText" center>
+            No suitable payment token found
+            <br />
+            in connected wallets
+          </Text>
+        </Container>
+      ) : (
+        <Container flex="column" gap="xs">
+          <Text size="sm">Select payment token</Text>
+          <Spacer y="xs" />
+        </Container>
+      )}
       <Container
         scrollY
         style={{
-          maxHeight: "450px",
+          maxHeight: "350px",
         }}
       >
-        <Container flex="column" gap="sm" p="lg">
-          {filteredWallets.length === 0 && (
-            <Container flex="column" gap="xs" py="md">
-              <Text size="xs" color="secondaryText" center>
-                <i>
-                  No suitable payment token found
-                  <br />
-                  in connected wallets
-                </i>
-              </Text>
-            </Container>
-          )}
+        <Container flex="column" gap="sm">
           {filteredWallets.map(([w, balances]) => {
-            const address = w.getAccount()?.address;
-            if (!address) return null;
+            const address = w.address;
+            const wallet = connectedWallets.find(
+              (w) => w.getAccount()?.address === address,
+            );
+            if (!wallet) return null;
             return (
               <WalletRowWithBalances
                 key={w.id}
-                wallet={w}
+                wallet={wallet}
                 balances={balances}
                 client={props.client}
                 address={address}
-                onClick={props.onSelect}
+                onClick={props.onSelectToken}
               />
             );
           })}
@@ -237,10 +236,8 @@ export function TokenSelectorScreen(props: {
             variant="secondary"
             fullWidth
             onClick={props.onConnect}
-            gap="xs"
             bg="tertiaryBg"
             style={{
-              borderRadius: radius.md,
               border: `1px solid ${theme.colors.borderColor}`,
               padding: spacing.sm,
             }}
@@ -254,7 +251,30 @@ export function TokenSelectorScreen(props: {
             >
               <OutlineWalletIcon size={iconSize.md} />
               <Text size="sm" color="primaryText">
-                Connect another wallet
+                Pay with another wallet
+              </Text>
+            </Container>
+          </Button>
+          <Button
+            variant="secondary"
+            fullWidth
+            onClick={props.onPayWithFiat}
+            bg="tertiaryBg"
+            style={{
+              border: `1px solid ${theme.colors.borderColor}`,
+              padding: spacing.sm,
+            }}
+          >
+            <Container
+              flex="row"
+              gap="sm"
+              center="y"
+              expand
+              color="secondaryIconColor"
+            >
+              <CardStackIcon width={iconSize.md} height={iconSize.md} />
+              <Text size="sm" color="primaryText">
+                Pay with credit card
               </Text>
             </Container>
           </Button>
@@ -272,28 +292,74 @@ function WalletRowWithBalances(props: {
   onClick: (wallet: Wallet, token: TokenInfo, chain: Chain) => void;
   hideConnectButton?: boolean;
 }) {
+  const theme = useCustomTheme();
   const displayedBalances = props.balances;
+  const activeAccount = useActiveAccount();
+  const { disconnect } = useDisconnect();
+  const isActiveAccount = activeAccount?.address === props.address;
 
   return (
-    <Container flex="column" gap="sm">
-      <Container px="sm">
+    <Container
+      flex="column"
+      style={{
+        borderRadius: radius.lg,
+        border: `1px solid ${theme.colors.borderColor}`,
+      }}
+    >
+      <Container
+        flex="row"
+        gap="sm"
+        bg="tertiaryBg"
+        style={{
+          justifyContent: "space-between",
+          borderTopRightRadius: radius.lg,
+          borderTopLeftRadius: radius.lg,
+          padding: spacing.sm,
+          paddingRight: spacing.xs,
+          borderBottom: `1px solid ${theme.colors.borderColor}`,
+        }}
+      >
         <WalletRow {...props} />
+        {!isActiveAccount && (
+          <Button
+            variant="ghost"
+            onClick={() => disconnect(props.wallet)}
+            style={{
+              padding: spacing.xxs,
+              color: theme.colors.secondaryText,
+            }}
+          >
+            <Cross2Icon width={iconSize.sm} height={iconSize.sm} />
+          </Button>
+        )}
       </Container>
-      <Container flex="column" gap="sm">
+      <Container flex="column">
         {props.balances.length > 0 ? (
-          displayedBalances.map((b) => (
+          displayedBalances.map((b, idx) => (
             <TokenBalanceRow
               client={props.client}
               onClick={() => props.onClick(props.wallet, b.token, b.chain)}
               key={`${b.token.address}-${b.chain.id}`}
               tokenBalance={b}
               wallet={props.wallet}
+              style={{
+                borderTopLeftRadius: 0,
+                borderTopRightRadius: 0,
+                borderBottomRightRadius:
+                  idx === displayedBalances.length - 1 ? radius.lg : 0,
+                borderBottomLeftRadius:
+                  idx === displayedBalances.length - 1 ? radius.lg : 0,
+                borderBottom:
+                  idx === displayedBalances.length - 1
+                    ? "none"
+                    : `1px solid ${theme.colors.borderColor}`,
+              }}
             />
           ))
         ) : (
           <Container style={{ padding: spacing.sm }}>
             <Text size="sm" color="secondaryText">
-              Not enough funds
+              Insufficient funds
             </Text>
           </Container>
         )}
@@ -307,33 +373,35 @@ function TokenBalanceRow(props: {
   tokenBalance: TokenBalance;
   wallet: Wallet;
   onClick: (token: TokenInfo, wallet: Wallet) => void;
+  style?: React.CSSProperties;
 }) {
-  const { tokenBalance, wallet, onClick, client } = props;
+  const { tokenBalance, wallet, onClick, client, style } = props;
   const chainInfo = useChainName(tokenBalance.chain);
   return (
     <StyledButton
       onClick={() => onClick(tokenBalance.token, wallet)}
       variant="secondary"
+      style={style}
     >
-      <Container flex="row" center="y" gap="md">
+      <Container flex="row" center="y" gap="sm">
         <TokenIcon
           token={tokenBalance.token}
           chain={tokenBalance.chain}
           size="md"
           client={client}
         />
-        <Container flex="column" gap="3xs">
+        <Container flex="column" gap="4xs">
           <Text size="xs" color="primaryText">
             {tokenBalance.token.symbol}
           </Text>
           {chainInfo && <Text size="xs">{chainInfo.name}</Text>}
         </Container>
       </Container>
-      <Container flex="row" center="y" gap="3xs" color="secondaryText">
+      <Container flex="row" center="y" gap="4xs" color="secondaryText">
         <Container
           flex="column"
           color="secondaryText"
-          gap="3xs"
+          gap="4xs"
           style={{
             justifyContent: "flex-end",
             alignItems: "flex-end",
@@ -350,88 +418,26 @@ function TokenBalanceRow(props: {
             size="xs"
           />
         </Container>
-        {/* <ChevronRightIcon width={iconSize.md} height={iconSize.md} /> */}
+        <ChevronRightIcon width={iconSize.md} height={iconSize.md} />
       </Container>
     </StyledButton>
   );
 }
 
-export function WalletRow(props: {
-  client: ThirdwebClient;
-  address: string;
-  iconSize?: keyof typeof iconSize;
-  textSize?: keyof typeof fontSize;
-  walletId?: WalletId;
-  wallet?: Wallet;
-}) {
-  const { client, address } = props;
-  const walletId = props.walletId;
-  const theme = useCustomTheme();
-  const ensNameQuery = useEnsName({
-    client,
-    address,
-  });
-  const addressOrENS = ensNameQuery.data || shortenAddress(address);
-  const ensAvatarQuery = useEnsAvatar({
-    client,
-    ensName: ensNameQuery.data,
-  });
-  return (
-    <Container flex="row" style={{ justifyContent: "space-between" }}>
-      <Container flex="row" center="y" gap="sm" color="secondaryText">
-        {ensAvatarQuery.data ? (
-          <Img
-            src={ensAvatarQuery.data}
-            width={props.iconSize ? iconSize[props.iconSize] : iconSize.md}
-            height={props.iconSize ? iconSize[props.iconSize] : iconSize.md}
-            style={{
-              borderRadius: radius.sm,
-              overflow: "hidden",
-              border: `1px solid ${theme.colors.borderColor}`,
-            }}
-            client={props.client}
-          />
-        ) : walletId ? (
-          <WalletImage
-            id={walletId}
-            size={props.iconSize || iconSize.md}
-            client={props.client}
-          />
-        ) : (
-          <Container
-            style={{
-              width: iconSize.md,
-              height: iconSize.md,
-              borderRadius: radius.sm,
-              overflow: "hidden",
-              border: `1px solid ${theme.colors.borderColor}`,
-            }}
-          >
-            <Blobbie address={props.address} size={Number(iconSize.md)} />
-          </Container>
-        )}
-
-        <Text size={props.textSize || "sm"} color="primaryText">
-          {addressOrENS || shortenAddress(props.address)}
-        </Text>
-      </Container>
-    </Container>
-  );
-}
-
-const StyledButton = /* @__PURE__ */ styled(Button)((_) => {
+const StyledButton = /* @__PURE__ */ styled(Button)((props) => {
   const theme = useCustomTheme();
   return {
-    background: theme.colors.tertiaryBg,
+    background: "transparent",
     justifyContent: "space-between",
     flexDirection: "row",
     padding: spacing.sm,
-    border: `1px solid ${theme.colors.borderColor}`,
+    paddingRight: spacing.xs,
     gap: spacing.sm,
     "&:hover": {
       background: theme.colors.secondaryButtonBg,
       transform: "scale(1.01)",
     },
     transition: "background 200ms ease, transform 150ms ease",
+    ...props.style,
   };
 });
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/TransferConfirmationScreen.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/TransferConfirmationScreen.tsx
index f54095afb59..1f40f2662eb 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/TransferConfirmationScreen.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/TransferConfirmationScreen.tsx
@@ -16,20 +16,18 @@ import type { Address } from "../../../../../../../utils/address.js";
 import { toWei } from "../../../../../../../utils/units.js";
 import { iconSize } from "../../../../../../core/design-system/index.js";
 import type { PayUIOptions } from "../../../../../../core/hooks/connection/ConnectButtonProps.js";
-import { useChainSymbol } from "../../../../../../core/hooks/others/useChainQuery.js";
 import { Spacer } from "../../../../components/Spacer.js";
 import { Spinner } from "../../../../components/Spinner.js";
 import { StepBar } from "../../../../components/StepBar.js";
 import { SwitchNetworkButton } from "../../../../components/SwitchNetwork.js";
-import { Container, Line, ModalHeader } from "../../../../components/basic.js";
+import { Container, ModalHeader } from "../../../../components/basic.js";
 import { Button } from "../../../../components/buttons.js";
 import { Text } from "../../../../components/text.js";
 import { type ERC20OrNativeToken, isNativeToken } from "../../nativeToken.js";
 import { Step } from "../Stepper.js";
-import { TokenInfoRow } from "../pay-transactions/TokenInfoRow.js";
 import type { PayerInfo } from "../types.js";
 import { ConnectorLine } from "./ConfirmationScreen.js";
-import { WalletRow } from "./TokenSelectorScreen.js";
+import { SwapSummary } from "./SwapSummary.js";
 
 type TransferConfirmationScreenProps = {
   title: string;
@@ -72,14 +70,13 @@ export function TransferConfirmationScreen(
     | { id: "error"; error: string }
     | { id: "done" }
   >({ id: "idle" });
-  const { symbol } = useChainSymbol(chain);
 
   return (
     <Container p="lg">
       <ModalHeader title={title} onBack={onBack} />
       <Spacer y="xl" />
 
-      {transactionMode && (
+      {transactionMode ? (
         <>
           <StepBar steps={2} currentStep={step === "transfer" ? 1 : 2} />
           <Spacer y="sm" />
@@ -88,52 +85,25 @@ export function TransferConfirmationScreen(
               ? "Step 1 of 2 - Transfer funds"
               : "Step 2 of 2 - Finalize transaction"}
           </Text>
-          <Spacer y="xl" />
+          <Spacer y="md" />
+        </>
+      ) : (
+        <>
+          <Text size="sm">Confirm payment</Text>
+          <Spacer y="md" />
         </>
       )}
 
-      {/* Sender Address */}
-      <Container
-        flex="row"
-        center="y"
-        style={{
-          justifyContent: "space-between",
-        }}
-      >
-        <Text size="sm">From</Text>
-        <WalletRow address={payer.account.address} client={client} />
-      </Container>
-
-      <Spacer y="md" />
-      <Line />
-      <Spacer y="md" />
-
-      {/* Receiver Address */}
-      <Container
-        flex="row"
-        center="y"
-        style={{
-          justifyContent: "space-between",
-        }}
-      >
-        <Text size="sm">To</Text>
-        <WalletRow address={receiverAddress} client={client} />
-      </Container>
-
-      <Spacer y="md" />
-      <Line />
-      <Spacer y="md" />
-
-      {/* Token Info */}
-      <TokenInfoRow
-        chainId={chain.id}
+      <SwapSummary
+        sender={payer.account.address}
+        receiver={receiverAddress}
         client={client}
-        label="Amount"
-        tokenAmount={tokenAmount}
-        tokenSymbol={isNativeToken(token) ? symbol || "" : token.symbol}
-        tokenAddress={
-          isNativeToken(token) ? NATIVE_TOKEN_ADDRESS : token.address
-        }
+        fromToken={token}
+        fromChain={chain}
+        toToken={token}
+        toChain={chain}
+        fromAmount={tokenAmount}
+        toAmount={tokenAmount}
       />
 
       <Spacer y="lg" />
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/WalletRow.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/WalletRow.tsx
new file mode 100644
index 00000000000..6aac9909188
--- /dev/null
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/WalletRow.tsx
@@ -0,0 +1,70 @@
+import type { ThirdwebClient } from "../../../../../../../client/client.js";
+import { shortenAddress } from "../../../../../../../utils/address.js";
+import { isEcosystemWallet } from "../../../../../../../wallets/ecosystem/is-ecosystem-wallet.js";
+import { isSmartWallet } from "../../../../../../../wallets/smart/index.js";
+import {
+  fontSize,
+  iconSize,
+} from "../../../../../../core/design-system/index.js";
+import { useConnectedWallets } from "../../../../../../core/hooks/wallets/useConnectedWallets.js";
+import {
+  useEnsName,
+  useWalletInfo,
+} from "../../../../../../core/utils/wallet.js";
+import { useProfiles } from "../../../../../hooks/wallets/useProfiles.js";
+import { Skeleton } from "../../../../components/Skeleton.js";
+import { WalletImage } from "../../../../components/WalletImage.js";
+import { Container } from "../../../../components/basic.js";
+import { Text } from "../../../../components/text.js";
+
+export function WalletRow(props: {
+  client: ThirdwebClient;
+  address: string;
+  iconSize?: keyof typeof iconSize;
+  textSize?: keyof typeof fontSize;
+}) {
+  const { client, address } = props;
+  const connectedWallets = useConnectedWallets();
+  const profile = useProfiles({ client });
+  const wallet = connectedWallets.find(
+    (w) => w.getAccount()?.address?.toLowerCase() === address.toLowerCase(),
+  );
+  const email =
+    wallet &&
+    (wallet.id === "inApp" ||
+      isEcosystemWallet(wallet) ||
+      isSmartWallet(wallet))
+      ? profile.data?.find((p) => !!p.details.email)?.details.email
+      : undefined;
+  const walletInfo = useWalletInfo(wallet?.id);
+  const ensNameQuery = useEnsName({
+    client,
+    address,
+  });
+  const addressOrENS = ensNameQuery.data || shortenAddress(address);
+  return (
+    <Container flex="row" style={{ justifyContent: "space-between" }}>
+      <Container flex="row" center="y" gap="sm" color="secondaryText">
+        {wallet ? (
+          <WalletImage
+            id={wallet.id}
+            size={iconSize[props.iconSize || "md"]}
+            client={props.client}
+          />
+        ) : null}
+        <Container flex="column" gap="4xs">
+          <Text size={props.textSize || "xs"} color="primaryText">
+            {addressOrENS || shortenAddress(props.address)}
+          </Text>
+          {profile.isLoading ? (
+            <Skeleton width="100px" height={fontSize.sm} />
+          ) : email || walletInfo?.data?.name ? (
+            <Text size="xs" color="secondaryText">
+              {email || walletInfo?.data?.name}
+            </Text>
+          ) : null}
+        </Container>
+      </Container>
+    </Container>
+  );
+}
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/TokenSelector.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/TokenSelector.tsx
index d79f40babae..afc0ebf8293 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/TokenSelector.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/TokenSelector.tsx
@@ -214,7 +214,6 @@ export function TokenSelector(props: {
             style={{
               paddingTop: 0,
               paddingBottom: spacing.lg,
-              // maxHeight: props.chainSelection ? "300px" : "400px",
             }}
           >
             {!input && (
@@ -284,7 +283,6 @@ export function TokenSelector(props: {
 }
 
 function SelectTokenButton(props: {
-  // token?: TokenInfo;
   token: ERC20OrNativeToken;
   chain: Chain;
   onClick: () => void;
@@ -310,7 +308,7 @@ function SelectTokenButton(props: {
         client={props.client}
       />
 
-      <Container flex="column" gap="xxs">
+      <Container flex="column" gap="4xs">
         {tokenName ? (
           <Text size="sm" color="primaryText">
             {tokenName}
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/nativeToken.ts b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/nativeToken.ts
index 087e5f86ea8..dc4b9295a12 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/nativeToken.ts
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/nativeToken.ts
@@ -10,11 +10,13 @@ export const NATIVE_TOKEN: NativeToken = { nativeToken: true };
  * @internal
  */
 export function isNativeToken(
-  token: Partial<TokenInfo> | NativeToken,
+  token?: Partial<TokenInfo> | NativeToken,
 ): token is NativeToken {
   return (
-    "nativeToken" in token ||
-    token.address?.toLowerCase() === NATIVE_TOKEN_ADDRESS.toLowerCase()
+    (token &&
+      ("nativeToken" in token ||
+        token.address?.toLowerCase() === NATIVE_TOKEN_ADDRESS.toLowerCase())) ||
+    false
   );
 }
 
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 c96dba4dd44..131790627a7 100644
--- a/packages/thirdweb/src/react/web/ui/components/token/TokenRow.tsx
+++ b/packages/thirdweb/src/react/web/ui/components/token/TokenRow.tsx
@@ -10,17 +10,17 @@ import {
   spacing,
 } from "../../../../core/design-system/index.js";
 import { useChainName } from "../../../../core/hooks/others/useChainQuery.js";
+import { PayTokenIcon } from "../../ConnectWallet/screens/Buy/PayTokenIcon.js";
 import type { ERC20OrNativeToken } from "../../ConnectWallet/screens/nativeToken.js";
 import { Skeleton } from "../Skeleton.js";
-import { TokenIcon } from "../TokenIcon.js";
 import { Container } from "../basic.js";
 import { Button } from "../buttons.js";
 import { Text } from "../text.js";
 import { TokenSymbol } from "./TokenSymbol.js";
 
 export function TokenRow(props: {
-  token: ERC20OrNativeToken;
-  chain: Chain;
+  token: ERC20OrNativeToken | undefined;
+  chain: Chain | undefined;
   client: ThirdwebClient;
   onSelectToken: () => void;
   freezeChainAndToken?: boolean;
@@ -29,6 +29,32 @@ export function TokenRow(props: {
   style?: React.CSSProperties;
 }) {
   const { name } = useChainName(props.chain);
+
+  if (!props.token || !props.chain) {
+    return (
+      <Button
+        variant="secondary"
+        fullWidth
+        style={{
+          fontSize: fontSize.sm,
+          justifyContent: "space-between",
+          paddingTop: spacing.md,
+          paddingBottom: spacing.md,
+          ...props.style,
+        }}
+        gap="xxs"
+        onClick={props.onSelectToken}
+      >
+        <Text size="sm" color="primaryText">
+          Select payment token
+        </Text>
+        <Container color="primaryText">
+          <ChevronDownIcon width={iconSize.sm} height={iconSize.sm} />
+        </Container>
+      </Button>
+    );
+  }
+
   return (
     <TokenButton
       variant="secondary"
@@ -42,21 +68,16 @@ export function TokenRow(props: {
       disabled={props.freezeChainAndToken}
     >
       <Container flex="row" center="y" gap="sm">
-        <TokenIcon
+        <PayTokenIcon
           token={props.token}
           chain={props.chain}
           size="md"
           client={props.client}
         />
 
-        <Container
-          flex="column"
-          style={{
-            gap: "4px",
-          }}
-        >
+        <Container flex="column" gap="4xs">
           {/* Token Symbol */}
-          <Container flex="column" gap="3xs">
+          <Container flex="column" gap="4xs">
             {props.isLoading ? (
               <Skeleton
                 width="120px"
@@ -74,6 +95,7 @@ export function TokenRow(props: {
                 <TokenSymbol
                   token={props.token}
                   chain={props.chain}
+                  color="secondaryText"
                   size="sm"
                 />
               </Container>
@@ -92,9 +114,11 @@ export function TokenRow(props: {
           )}
         </Container>
       </Container>
-      <Container color="primaryText">
-        <ChevronDownIcon width={iconSize.sm} height={iconSize.sm} />
-      </Container>
+      {!props.freezeChainAndToken && (
+        <Container color="primaryText">
+          <ChevronDownIcon width={iconSize.sm} height={iconSize.sm} />
+        </Container>
+      )}
     </TokenButton>
   );
 }