diff --git a/packages/thirdweb/src/react/core/hooks/useTransactionDetails.ts b/packages/thirdweb/src/react/core/hooks/useTransactionDetails.ts
index cbb6bb88aa8..667a25dc5c0 100644
--- a/packages/thirdweb/src/react/core/hooks/useTransactionDetails.ts
+++ b/packages/thirdweb/src/react/core/hooks/useTransactionDetails.ts
@@ -45,7 +45,7 @@ interface UseTransactionDetailsOptions {
   transaction: PreparedTransaction;
   client: ThirdwebClient;
   wallet: Wallet | undefined;
-  currency?: SupportedFiatCurrency;
+  currency: SupportedFiatCurrency | undefined;
 }
 
 /**
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx b/packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx
index 3474ac665d0..70bef2e5c1b 100644
--- a/packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx
+++ b/packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx
@@ -89,6 +89,7 @@ export function TransactionPayment({
     client,
     transaction: uiOptions.transaction,
     wallet,
+    currency: uiOptions.currency,
   });
 
   // We can't use useWalletBalance here because erc20Value is a possibly async value
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx b/packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx
index f7db580bfa7..8cd744a7394 100644
--- a/packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx
+++ b/packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx
@@ -210,6 +210,7 @@ const TransactionOverViewCompact = (props: {
     client: props.client,
     transaction: props.uiOptions.transaction,
     wallet: props.paymentMethod.payerWallet,
+    currency: props.uiOptions.currency,
   });
 
   if (!txInfo.data) {
diff --git a/packages/thirdweb/src/stories/Bridge/BridgeOrchestrator.stories.tsx b/packages/thirdweb/src/stories/Bridge/BridgeOrchestrator.stories.tsx
index 51fe16ca5e6..598dc9a2aea 100644
--- a/packages/thirdweb/src/stories/Bridge/BridgeOrchestrator.stories.tsx
+++ b/packages/thirdweb/src/stories/Bridge/BridgeOrchestrator.stories.tsx
@@ -241,6 +241,37 @@ export const TransactionLight: Story = {
   },
 };
 
+/**
+ * Transaction mode in light theme showing an ERC20 token transfer.
+ */
+export const TransactionJPYCurrency: Story = {
+  args: {
+    connectLocale: undefined,
+    connectOptions: undefined,
+    onCancel: undefined,
+    onComplete: undefined,
+    onError: undefined,
+    paymentLinkId: undefined,
+    presetOptions: undefined,
+    purchaseData: undefined,
+    receiverAddress: undefined,
+    theme: "light",
+    uiOptions: {
+      ...TRANSACTION_UI_OPTIONS.erc20Transfer,
+      currency: "JPY",
+    },
+  },
+  parameters: {
+    backgrounds: { default: "light" },
+    docs: {
+      description: {
+        story:
+          "Light theme version of transaction mode showing an ERC20 token transfer with proper token amount formatting and USD conversion.",
+      },
+    },
+  },
+};
+
 export const CustompresetOptions: Story = {
   args: {
     connectLocale: undefined,