diff --git a/.changeset/curly-crews-sleep.md b/.changeset/curly-crews-sleep.md
new file mode 100644
index 00000000000..244e4b88be4
--- /dev/null
+++ b/.changeset/curly-crews-sleep.md
@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Minor UI adjustments in CheckoutWidget
diff --git a/apps/dashboard/public/assets/pay/general-pay.png b/apps/dashboard/public/assets/pay/general-pay.png
new file mode 100644
index 00000000000..8729bb7c2fb
Binary files /dev/null and b/apps/dashboard/public/assets/pay/general-pay.png differ
diff --git a/apps/dashboard/src/@/utils/sdk-component-theme.ts b/apps/dashboard/src/@/utils/sdk-component-theme.ts
index 5541d2e530b..8a3dfc2da03 100644
--- a/apps/dashboard/src/@/utils/sdk-component-theme.ts
+++ b/apps/dashboard/src/@/utils/sdk-component-theme.ts
@@ -21,8 +21,8 @@ export function getSDKTheme(theme: "light" | "dark"): Theme {
       primaryButtonText: "hsl(var(--inverted-foreground))",
       primaryText: "hsl(var(--foreground))",
       scrollbarBg: "hsl(var(--muted))",
-      secondaryButtonBg: "hsl(var(--secondary))",
-      secondaryButtonHoverBg: "hsl(var(--secondary)/80%)",
+      secondaryButtonBg: "hsl(var(--secondary)/70%)",
+      secondaryButtonHoverBg: "hsl(var(--secondary))",
       secondaryButtonText: "hsl(var(--secondary-foreground))",
       secondaryIconColor: "hsl(var(--secondary-foreground))",
       secondaryIconHoverBg: "hsl(var(--accent))",
@@ -33,7 +33,7 @@ export function getSDKTheme(theme: "light" | "dark"): Theme {
       separatorLine: "hsl(var(--border))",
       skeletonBg: "hsl(var(--secondary-foreground)/15%)",
       success: "hsl(var(--success-text))",
-      tertiaryBg: "hsl(var(--muted)/30%)",
+      tertiaryBg: "hsl(var(--muted)/50%)",
       tooltipBg: "hsl(var(--popover))",
       tooltipText: "hsl(var(--popover-foreground))",
     },
diff --git a/apps/dashboard/src/app/pay/[id]/header.tsx b/apps/dashboard/src/app/pay/[id]/header.tsx
new file mode 100644
index 00000000000..eea5b92ddf8
--- /dev/null
+++ b/apps/dashboard/src/app/pay/[id]/header.tsx
@@ -0,0 +1,72 @@
+"use client";
+import { Img } from "@workspace/ui/components/img";
+import { MoonIcon, SunIcon } from "lucide-react";
+import { useTheme } from "next-themes";
+import { ClientOnly } from "@/components/blocks/client-only";
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import { cn } from "@/lib/utils";
+import { resolveSchemeWithErrorHandler } from "@/utils/resolveSchemeWithErrorHandler";
+import { payAppThirdwebClient } from "../constants";
+
+export function PayIdPageHeader(props: {
+  projectName: string;
+  projectIcon: string | undefined;
+}) {
+  return (
+    <div className="border-b border-border/70">
+      <header className="container flex max-w-7xl justify-between py-4">
+        <div className="flex items-center gap-3">
+          {props.projectIcon && (
+            <Img
+              src={
+                resolveSchemeWithErrorHandler({
+                  uri: props.projectIcon,
+                  client: payAppThirdwebClient,
+                }) || ""
+              }
+              alt=""
+              className="rounded-full size-6 object-cover"
+            />
+          )}
+
+          <h2 className="text-xl font-semibold tracking-tight">
+            {props.projectName}
+          </h2>
+        </div>
+
+        <div className="flex items-center gap-3 lg:gap-5">
+          <ToggleThemeButton />
+        </div>
+      </header>
+    </div>
+  );
+}
+
+function ToggleThemeButton(props: { className?: string }) {
+  const { setTheme, theme } = useTheme();
+
+  return (
+    <ClientOnly
+      ssr={<Skeleton className="size-[36px] rounded-full border bg-accent" />}
+    >
+      <Button
+        aria-label="Toggle theme"
+        className={cn(
+          "h-auto w-auto rounded-full p-2 text-muted-foreground hover:text-foreground",
+          props.className,
+        )}
+        onClick={() => {
+          setTheme(theme === "dark" ? "light" : "dark");
+        }}
+        variant="ghost"
+      >
+        {theme === "light" ? (
+          <SunIcon className="size-5 " />
+        ) : (
+          <MoonIcon className="size-5 " />
+        )}
+      </Button>
+    </ClientOnly>
+  );
+}
diff --git a/apps/dashboard/src/app/pay/[id]/page.tsx b/apps/dashboard/src/app/pay/[id]/page.tsx
index 3e46240c99e..24694c29ace 100644
--- a/apps/dashboard/src/app/pay/[id]/page.tsx
+++ b/apps/dashboard/src/app/pay/[id]/page.tsx
@@ -1,21 +1,16 @@
-import { ShieldCheckIcon } from "lucide-react";
+import { cn } from "@workspace/ui/lib/utils";
 import type { Metadata } from "next";
 import { ThemeProvider } from "next-themes";
-import { Bridge, defineChain, toTokens } from "thirdweb";
-import { getChainMetadata } from "thirdweb/chains";
-import { shortenAddress } from "thirdweb/utils";
+import { Bridge } from "thirdweb";
 import { getPaymentLink } from "@/api/universal-bridge/links";
-import { Badge } from "@/components/ui/badge";
 import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
 import {
   API_SERVER_SECRET,
   DASHBOARD_THIRDWEB_SECRET_KEY,
 } from "@/constants/server-envs";
 import { getConfiguredThirdwebClient } from "@/constants/thirdweb.server";
-import { resolveEns } from "@/lib/ens";
-import { resolveSchemeWithErrorHandler } from "@/utils/resolveSchemeWithErrorHandler";
 import { PayPageWidget } from "../components/client/PayPageWidget.client";
-import { payAppThirdwebClient } from "../constants";
+import { PayIdPageHeader } from "./header";
 
 const title = "thirdweb Pay";
 const description = "Fast, secure, and simple payments.";
@@ -54,26 +49,10 @@ export default async function PayPage({
     tokenAddress: paymentLink.destinationToken.address,
   });
 
-  const chainPromise = getChainMetadata(
-    // eslint-disable-next-line no-restricted-syntax
-    defineChain(Number(paymentLink.destinationToken.chainId)),
-  );
-
-  const recipientPromise = resolveEns(
-    paymentLink.receiver,
-    getConfiguredThirdwebClient({
-      secretKey: DASHBOARD_THIRDWEB_SECRET_KEY,
-      teamId: undefined,
-    }),
-  );
-
-  const [tokens, projectMetadata, chain, recipientEnsOrAddress] =
-    await Promise.all([
-      tokensPromise,
-      projectMetadataPromise,
-      chainPromise,
-      recipientPromise,
-    ]);
+  const [tokens, projectMetadata] = await Promise.all([
+    tokensPromise,
+    projectMetadataPromise,
+  ]);
 
   const token = tokens[0];
   if (!token) {
@@ -81,144 +60,33 @@ export default async function PayPage({
   }
 
   return (
-    <div className="relative flex h-dvh w-full items-center justify-center">
+    <div className="relative flex flex-col min-h-dvh w-full">
       <ThemeProvider
-        forcedTheme={theme === "light" ? "light" : "dark"}
+        defaultTheme={theme === "light" ? "light" : "dark"}
         attribute="class"
         disableTransitionOnChange
         enableSystem={false}
       >
-        <div className="flex z-10 flex-col lg:flex-row h-full w-full">
-          <header className="min-w-full lg:min-w-[500px] border-b lg:border-r lg:h-full bg-card flex flex-col gap-4 items-start p-4 lg:p-8">
-            <div>
-              <div className="flex flex-row items-center justify-start gap-4">
-                {projectMetadata.image && (
-                  <img
-                    src={
-                      resolveSchemeWithErrorHandler({
-                        uri: projectMetadata.image,
-                        client: payAppThirdwebClient,
-                      }) || ""
-                    }
-                    alt={projectMetadata.name}
-                    width={25}
-                    height={25}
-                    className="rounded-full overflow-hidden"
-                  />
-                )}
-                <h2 className="text-xl font-bold">{projectMetadata.name}</h2>
-              </div>
-              {projectMetadata.description && (
-                <p className="mt-2 text-sm text-muted-foreground">
-                  {projectMetadata.description}
-                </p>
-              )}
-            </div>
-
-            <div className="hidden lg:block my-4 w-full">
-              {paymentLink.amount && (
-                <div className="flex flex-col gap-1 w-full my-4">
-                  <span className="text-muted-foreground text-xs">Details</span>
-                  <div className="font-medium flex-row flex justify-between items-center w-full">
-                    <div className="flex flex-row items-center gap-2">
-                      {token.iconUri && (
-                        <img
-                          src={resolveSchemeWithErrorHandler({
-                            uri: token.iconUri,
-                            client: getConfiguredThirdwebClient({
-                              secretKey: DASHBOARD_THIRDWEB_SECRET_KEY,
-                              teamId: undefined,
-                            }),
-                          })}
-                          alt={token.name}
-                          width={25}
-                          height={25}
-                          className="size-5 rounded-full overflow-hidden"
-                        />
-                      )}
-                      {toTokens(BigInt(paymentLink.amount), token.decimals)}{" "}
-                      {token.symbol}
-                    </div>
-                    {token.prices.USD && (
-                      <span>
-                        $
-                        {(
-                          Number(token.prices.USD) *
-                          Number(
-                            toTokens(
-                              BigInt(paymentLink.amount),
-                              token.decimals,
-                            ),
-                          )
-                        ).toFixed(2)}
-                      </span>
-                    )}
-                  </div>
-                </div>
-              )}
-              {chain && (
-                <div className="flex flex-col gap-1 w-full my-4">
-                  <span className="text-muted-foreground text-xs">Network</span>
-                  <div className="font-medium flex-row flex justify-between items-center w-full">
-                    <div className="flex flex-row items-center gap-2">
-                      {chain.icon?.url && (
-                        <img
-                          src={resolveSchemeWithErrorHandler({
-                            uri: chain.icon.url,
-                            client: getConfiguredThirdwebClient({
-                              secretKey: DASHBOARD_THIRDWEB_SECRET_KEY,
-                              teamId: undefined,
-                            }),
-                          })}
-                          alt={chain.name}
-                          width={chain.icon.width}
-                          height={chain.icon.height}
-                          className="size-5 rounded-full overflow-hidden"
-                        />
-                      )}
-                      {chain.name}
-                    </div>
-                  </div>
-                </div>
-              )}
-              {recipientEnsOrAddress.ensName ||
-                (recipientEnsOrAddress.address && (
-                  <div className="flex flex-col gap-1 w-full my-4">
-                    <span className="text-muted-foreground text-xs">
-                      Seller
-                    </span>
-                    <div className="font-medium flex-row flex justify-between items-center w-full">
-                      {recipientEnsOrAddress.ensName ??
-                        shortenAddress(recipientEnsOrAddress.address)}
-                    </div>
-                  </div>
-                ))}
-            </div>
+        <PayIdPageHeader
+          projectIcon={projectMetadata.image || undefined}
+          projectName={projectMetadata.name}
+        />
 
-            <div className="mt-auto hidden lg:block">
-              <Badge className="flex items-center gap-1.5 bg-purple-100 text-purple-800 border-purple-200 dark:bg-purple-950 dark:text-purple-300 dark:border-purple-800">
-                <ShieldCheckIcon className="size-3" />
-                Secured by thirdweb
-              </Badge>
-            </div>
-          </header>
-          <main className="flex justify-center py-12 w-full items-center grow">
-            <PayPageWidget
-              amount={
-                paymentLink.amount ? BigInt(paymentLink.amount) : undefined
-              }
-              chainId={Number(paymentLink.destinationToken.chainId)}
-              clientId={undefined} // Payment links don't need to use the same client ID to be executed
-              image={paymentLink.imageUrl}
-              name={paymentLink.title}
-              paymentLinkId={id}
-              purchaseData={paymentLink.purchaseData}
-              recipientAddress={paymentLink.receiver}
-              redirectUri={redirectUri}
-              token={token}
-            />
-          </main>
-        </div>
+        <main className="flex justify-center py-12 w-full items-center grow overflow-hidden relative">
+          <DotsBackgroundPattern />
+          <PayPageWidget
+            amount={paymentLink.amount ? BigInt(paymentLink.amount) : undefined}
+            chainId={Number(paymentLink.destinationToken.chainId)}
+            clientId={undefined} // Payment links don't need to use the same client ID to be executed
+            image={paymentLink.imageUrl}
+            name={paymentLink.title}
+            paymentLinkId={id}
+            purchaseData={paymentLink.purchaseData}
+            recipientAddress={paymentLink.receiver}
+            redirectUri={redirectUri}
+            token={token}
+          />
+        </main>
       </ThemeProvider>
     </div>
   );
@@ -237,7 +105,24 @@ async function getProjectMetadata(clientId: string) {
   }
 
   const { data } = (await response.json()) as {
-    data: { name: string; image: string | null; description: string | null };
+    data: { name: string; image: string | null };
   };
   return data;
 }
+
+function DotsBackgroundPattern(props: { className?: string }) {
+  return (
+    <div
+      className={cn(
+        "pointer-events-none absolute -inset-x-36 -inset-y-24 text-foreground/20 dark:text-muted-foreground/15 hidden lg:block",
+        props.className,
+      )}
+      style={{
+        backgroundImage: "radial-gradient(currentColor 1px, transparent 1px)",
+        backgroundSize: "24px 24px",
+        maskImage:
+          "radial-gradient(ellipse 100% 100% at 50% 50%, black 30%, transparent 50%)",
+      }}
+    />
+  );
+}
diff --git a/apps/dashboard/src/app/pay/components/client/PayPageWidget.client.tsx b/apps/dashboard/src/app/pay/components/client/PayPageWidget.client.tsx
index c2b50f91b65..c3f66c49398 100644
--- a/apps/dashboard/src/app/pay/components/client/PayPageWidget.client.tsx
+++ b/apps/dashboard/src/app/pay/components/client/PayPageWidget.client.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { cn } from "@workspace/ui/lib/utils";
 import { payAppThirdwebClient } from "app/pay/constants";
 import { useTheme } from "next-themes";
 import { createThirdwebClient, NATIVE_TOKEN_ADDRESS, toTokens } from "thirdweb";
@@ -63,7 +64,12 @@ export function PayPageWidget({
         client={
           clientId ? createThirdwebClient({ clientId }) : payAppThirdwebClient
         }
-        image={image}
+        className={cn(
+          "shadow-xl",
+          !image &&
+            "[&_.tw-header-image]:invert dark:[&_.tw-header-image]:invert-0",
+        )}
+        image={image || "/assets/pay/general-pay.png"}
         name={name}
         onSuccess={() => {
           reportPaymentLinkBuySuccessful();
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsx b/packages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsx
index 3a3b9417269..729cf88dcd3 100644
--- a/packages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsx
+++ b/packages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsx
@@ -93,11 +93,11 @@ export function DirectPayment({
     >
       {/* Price section */}
       <Container
-        center="y"
         flex="row"
         gap="3xs"
         style={{
           justifyContent: "space-between",
+          alignItems: "end",
         }}
       >
         <FiatValue
@@ -108,7 +108,7 @@ export function DirectPayment({
           size="xl"
           token={paymentInfo.token}
           tokenAmount={paymentInfo.amount}
-          weight={600}
+          weight={500}
         />
         <Container flex="row" gap="3xs">
           <Text
@@ -118,6 +118,9 @@ export function DirectPayment({
               overflow: "hidden",
               textOverflow: "ellipsis",
               whiteSpace: "nowrap",
+              textTransform: "uppercase",
+              letterSpacing: "0.07em",
+              opacity: 0.7,
             }}
           >
             One-time payment
@@ -125,11 +128,11 @@ export function DirectPayment({
         </Container>
       </Container>
 
-      <Spacer y="md" />
+      <Spacer y="md+" />
 
-      <Line />
+      <Line dashed />
 
-      <Spacer y="md" />
+      <Spacer y="md+" />
 
       <Container
         flex="row"
@@ -141,18 +144,12 @@ export function DirectPayment({
         <Text color="secondaryText" size="sm">
           Price
         </Text>
-        <Text
-          color="primaryText"
-          size="sm"
-          style={{
-            fontFamily: "monospace",
-          }}
-        >
+        <Text color="primaryText" size="sm">
           {`${paymentInfo.amount} ${paymentInfo.token.symbol}`}
         </Text>
       </Container>
 
-      <Spacer y="xs" />
+      <Spacer y="sm" />
 
       {/* Network section */}
       <Container
@@ -173,18 +170,15 @@ export function DirectPayment({
             color="primaryText"
             short
             size="sm"
-            style={{
-              fontFamily: "monospace",
-            }}
           />
         </Container>
       </Container>
 
-      <Spacer y="md" />
+      <Spacer y="md+" />
 
-      <Line />
+      <Line dashed />
 
-      <Spacer y="lg" />
+      <Spacer y="md+" />
 
       {/* Action button */}
       <Container flex="column">
@@ -194,11 +188,11 @@ export function DirectPayment({
 
         {showThirdwebBranding ? (
           <div>
-            <Spacer y="md" />
+            <Spacer y="md+" />
             <PoweredByThirdweb />
           </div>
         ) : null}
-        <Spacer y="md" />
+        <Spacer y="md+" />
       </Container>
     </WithHeader>
   );
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/common/WithHeader.tsx b/packages/thirdweb/src/react/web/ui/Bridge/common/WithHeader.tsx
index 4e2b980a872..d4314bbafa0 100644
--- a/packages/thirdweb/src/react/web/ui/Bridge/common/WithHeader.tsx
+++ b/packages/thirdweb/src/react/web/ui/Bridge/common/WithHeader.tsx
@@ -1,7 +1,7 @@
 import type { ThirdwebClient } from "../../../../../client/client.js";
 import { resolveScheme } from "../../../../../utils/ipfs.js";
 import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
-import { radius } from "../../../../core/design-system/index.js";
+import { radius, spacing } from "../../../../core/design-system/index.js";
 import { Container } from "../../components/basic.js";
 import { Spacer } from "../../components/Spacer.js";
 import { Text } from "../../components/text.js";
@@ -20,6 +20,7 @@ export function WithHeader(props: {
       {/* image */}
       {props.image && (
         <div
+          className="tw-header-image"
           style={{
             aspectRatio: "16/9",
             backgroundColor: theme.colors.tertiaryBg,
@@ -27,6 +28,7 @@ export function WithHeader(props: {
             backgroundPosition: "center",
             backgroundSize: "cover",
             borderRadius: `${radius.md} ${radius.md} 0 0`,
+            marginBottom: spacing.xxs,
             overflow: "hidden",
             width: "100%",
           }}
@@ -40,7 +42,7 @@ export function WithHeader(props: {
           <>
             {/* title */}
             {props.title && (
-              <Text color="primaryText" size="lg" weight={600}>
+              <Text color="primaryText" size="lg" weight={500} trackingTight>
                 {props.title}
               </Text>
             )}
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/FiatValue.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/FiatValue.tsx
index 23fdb24f664..f2541044ee4 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/FiatValue.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/FiatValue.tsx
@@ -45,7 +45,7 @@ export function FiatValue(
   }
 
   return cryptoToFiatQuery.data?.result ? (
-    <Text {...props}>
+    <Text {...props} trackingTight>
       {formatCurrencyAmount(
         props.currency || "USD",
         cryptoToFiatQuery.data.result,
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/formatTokenBalance.ts b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/formatTokenBalance.ts
index 0c9f9d450c4..229d16da968 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/formatTokenBalance.ts
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/formatTokenBalance.ts
@@ -49,5 +49,7 @@ function formatMoney(
   return new Intl.NumberFormat(locale, {
     style: "currency",
     currency: currencyCode,
+    maximumFractionDigits: 5,
+    minimumFractionDigits: 0,
   }).format(value);
 }