diff --git a/apps/dashboard/src/@/components/blocks/NetworkSelectors.tsx b/apps/dashboard/src/@/components/blocks/NetworkSelectors.tsx
index 5d6a2559256..e8ccfe01a56 100644
--- a/apps/dashboard/src/@/components/blocks/NetworkSelectors.tsx
+++ b/apps/dashboard/src/@/components/blocks/NetworkSelectors.tsx
@@ -4,7 +4,7 @@ import { MultiSelect } from "@/components/blocks/multi-select";
 import { SelectWithSearch } from "@/components/blocks/select-with-search";
 import { Badge } from "@/components/ui/badge";
 import { useCallback, useMemo } from "react";
-import { ChainIcon } from "../../../components/icons/ChainIcon";
+import { ChainIconClient } from "../../../components/icons/ChainIcon";
 import { useAllChainsData } from "../../../hooks/chains/allChains";
 
 function cleanChainName(chainName: string) {
@@ -77,7 +77,7 @@ export function MultiNetworkSelector(props: {
       return (
         <div className="flex justify-between gap-4">
           <span className="flex grow gap-2 truncate text-left">
-            <ChainIcon
+            <ChainIconClient
               className="size-5"
               ipfsSrc={chain.icon?.url}
               loading="lazy"
@@ -172,7 +172,7 @@ export function SingleNetworkSelector(props: {
       return (
         <div className="flex justify-between gap-4">
           <span className="flex grow gap-2 truncate text-left">
-            <ChainIcon
+            <ChainIconClient
               className="size-5"
               ipfsSrc={chain.icon?.url}
               loading="lazy"
diff --git a/apps/dashboard/src/@/components/blocks/wallet-address.tsx b/apps/dashboard/src/@/components/blocks/wallet-address.tsx
index 58d77fefc38..9ff08bdea9d 100644
--- a/apps/dashboard/src/@/components/blocks/wallet-address.tsx
+++ b/apps/dashboard/src/@/components/blocks/wallet-address.tsx
@@ -23,6 +23,7 @@ export function WalletAddress(props: {
   address: string | undefined;
   shortenAddress?: boolean;
   className?: string;
+  iconClassName?: string;
 }) {
   const thirdwebClient = useThirdwebClient();
   // default back to zero address if no address provided
@@ -78,6 +79,7 @@ export function WalletAddress(props: {
               address={address}
               profiles={profiles.data || []}
               thirdwebClient={thirdwebClient}
+              iconClassName={props.iconClassName}
             />
           )}
           <span className="cursor-pointer font-mono">
@@ -168,6 +170,7 @@ function WalletAvatar(props: {
   address: string;
   profiles: SocialProfile[];
   thirdwebClient: ThirdwebClient;
+  iconClassName?: string;
 }) {
   const avatar = useMemo(() => {
     return props.profiles.find(
@@ -186,11 +189,20 @@ function WalletAvatar(props: {
     : undefined;
 
   return (
-    <div className="size-6 overflow-hidden rounded-full">
+    <div
+      className={cn("size-6 overflow-hidden rounded-full", props.iconClassName)}
+    >
       {resolvedAvatarSrc ? (
-        <Img src={resolvedAvatarSrc} className="size-6 object-cover" />
+        <Img
+          src={resolvedAvatarSrc}
+          className={cn("size-6 object-cover", props.iconClassName)}
+        />
       ) : (
-        <Blobbie address={props.address} size={24} />
+        <Blobbie
+          address={props.address}
+          size={24}
+          className={props.iconClassName}
+        />
       )}
     </div>
   );
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/metadata-header.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/metadata-header.tsx
index b1257ffcdc0..e398f70649f 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/metadata-header.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/metadata-header.tsx
@@ -3,7 +3,7 @@
 import { CopyAddressButton } from "@/components/ui/CopyAddressButton";
 import { Button } from "@/components/ui/button";
 import { getThirdwebClient } from "@/constants/thirdweb.server";
-import { ChainIcon } from "components/icons/ChainIcon";
+import { ChainIconClient } from "components/icons/ChainIcon";
 import { ExternalLinkIcon } from "lucide-react";
 import Link from "next/link";
 import type { ChainMetadata } from "thirdweb/chains";
@@ -85,7 +85,7 @@ export const MetadataHeader: React.FC<MetadataHeaderProps> = ({
                 href={`/${chain.slug}`}
                 className="flex w-fit shrink-0 items-center gap-2 rounded-3xl border border-border bg-card px-2.5 py-1.5 hover:bg-accent"
               >
-                <ChainIcon ipfsSrc={chain.icon?.url} className="size-4" />
+                <ChainIconClient ipfsSrc={chain.icon?.url} className="size-4" />
                 {cleanedChainName && (
                   <span className="text-xs">{cleanedChainName}</span>
                 )}
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/cross-chain/single-network-selector.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/cross-chain/single-network-selector.tsx
index 3f05391fdea..fc5a848cb89 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/cross-chain/single-network-selector.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/cross-chain/single-network-selector.tsx
@@ -1,6 +1,6 @@
 import { SelectWithSearch } from "@/components/blocks/select-with-search";
 import { Badge } from "@/components/ui/badge";
-import { ChainIcon } from "components/icons/ChainIcon";
+import { ChainIconClient } from "components/icons/ChainIcon";
 import { useAllChainsData } from "hooks/chains/allChains";
 import { useCallback, useMemo } from "react";
 
@@ -45,7 +45,7 @@ export function SingleNetworkSelector(props: {
       return (
         <div className="flex justify-between gap-4">
           <span className="flex grow gap-2 truncate text-left">
-            <ChainIcon
+            <ChainIconClient
               className="size-5"
               ipfsSrc={chain.icon?.url}
               loading="lazy"
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/ExecuteTransactionCard.stories.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/ExecuteTransactionCard.stories.tsx
index 605dda51f57..35d1aea0123 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/ExecuteTransactionCard.stories.tsx
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/ExecuteTransactionCard.stories.tsx
@@ -71,9 +71,9 @@ function Variant(props: {
         twAccount={accountStub()}
         txData={{
           chainId: 1,
-          to: "0x1F846F6DAE38E1C88D71EAA191760B15f38B7A37",
+          to: "0xEb0effdFB4dC5b3d5d3aC6ce29F3ED213E95d675", // thirdweb.eth
           data: "0x",
-          value: "0x16345785d8a0000",
+          value: "0x16345785d8a0000", // 0.1 eth
         }}
       />
     </BadgeContainer>
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/ExecuteTransactionCard.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/ExecuteTransactionCard.tsx
index 20fc09a8a6c..ca484cd459f 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/ExecuteTransactionCard.tsx
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/ExecuteTransactionCard.tsx
@@ -1,7 +1,8 @@
+import { WalletAddress } from "@/components/blocks/wallet-address";
 import { CopyTextButton } from "@/components/ui/CopyTextButton";
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Button } from "@/components/ui/button";
-import { CodeClient } from "@/components/ui/code/code.client";
+import { cn } from "@/lib/utils";
 import type { Account as TWAccount } from "@3rdweb-sdk/react/hooks/useApi";
 import {
   ArrowRightLeftIcon,
@@ -15,10 +16,12 @@ import { useState } from "react";
 import {
   type ThirdwebClient,
   prepareTransaction,
+  toEther,
   waitForReceipt,
 } from "thirdweb";
-import { useSendTransaction } from "thirdweb/react";
+import { useActiveAccount, useSendTransaction } from "thirdweb/react";
 import { TransactionButton } from "../../../../components/buttons/TransactionButton";
+import { ChainIconClient } from "../../../../components/icons/ChainIcon";
 import { useTrack } from "../../../../hooks/analytics/useTrack";
 import { useV5DashboardChain } from "../../../../lib/v5-adapter";
 import { getSDKTheme } from "../../../components/sdk-component-theme";
@@ -76,29 +79,157 @@ export function ExecuteTransactionCardLayout(props: {
     },
   });
   const chain = useV5DashboardChain(txData.chainId);
-  const isTransactionSent =
-    props.status.type === "confirming" || props.status.type === "confirmed";
   const trackEvent = useTrack();
+  const account = useActiveAccount();
 
   const explorer = chain.blockExplorers?.[0]?.url;
 
+  const isTransactionPending =
+    props.status.type === "sending" || props.status.type === "confirming";
+
   return (
     <div>
       <div className="rounded-xl border bg-card">
-        <div className="flex flex-col gap-4 p-4 pb-6">
-          <h3 className="font-semibold text-foreground text-lg tracking-tight">
-            Transaction
-          </h3>
+        {/* header */}
+        <h3 className="border-b p-4 py-4 font-semibold text-foreground text-lg tracking-tight lg:px-6 lg:text-xl">
+          Transaction
+        </h3>
+
+        {/* content */}
+        <div className="px-4 text-sm lg:px-6 [&>*]:h-12 [&>*]:border-b lg:[&>*]:h-14">
+          {/* From */}
+          <div className="flex items-center justify-between gap-2">
+            <span className="text-muted-foreground">From</span>
+            {account ? (
+              <WalletAddress
+                address={account.address}
+                className="h-auto py-0"
+                iconClassName="size-5"
+              />
+            ) : (
+              <span className="text-muted-foreground">Your Wallet</span>
+            )}
+          </div>
+
+          {/* To */}
+          {txData.to && (
+            <div className="flex items-center justify-between gap-2">
+              <span className="text-muted-foreground">To</span>
+
+              <WalletAddress
+                address={txData.to}
+                className="h-auto py-0"
+                iconClassName="size-5"
+              />
+            </div>
+          )}
+
+          {/* Value */}
+          <div className="flex items-center justify-between gap-2">
+            <span className="text-muted-foreground">Value</span>
+            {toEther(BigInt(txData.value))} {chain.nativeCurrency?.symbol}
+          </div>
+
+          {/* Network */}
+          <div className="flex items-center justify-between gap-2">
+            <span className="text-muted-foreground">Network</span>
+            <div className="flex items-center gap-2">
+              <ChainIconClient
+                className="size-5 rounded-full"
+                src={chain.icon?.url}
+              />
+              <span className="text-foreground">
+                {chain.name || `Chain ID: ${txData.chainId}`}
+              </span>
+            </div>
+          </div>
+
+          {/* Status */}
+          {props.status.type !== "idle" && (
+            <div className="flex items-center justify-between gap-2">
+              <span className="text-muted-foreground">Status</span>
+              <div className="flex items-center gap-2">
+                <span
+                  className={cn(
+                    "flex items-center gap-2 font-medium",
+                    props.status.type === "sending" && "text-blue-500",
+                    props.status.type === "confirming" && "text-yellow-500",
+                    props.status.type === "confirmed" && "text-green-500",
+                    props.status.type === "failed" && "text-red-500",
+                  )}
+                >
+                  {/* icon */}
+                  {(props.status.type === "sending" ||
+                    props.status.type === "confirming") && (
+                    <Spinner className="size-4" />
+                  )}
 
-          <CodeClient code={JSON.stringify(txData, null, 2)} lang="json" />
+                  {props.status.type === "confirmed" && (
+                    <CircleCheckIcon className="size-4" />
+                  )}
+
+                  {props.status.type === "failed" && (
+                    <CircleXIcon className="size-4" />
+                  )}
+
+                  {/* text */}
+                  <span>
+                    {props.status.type === "sending" && "Sending Transaction"}
+                    {props.status.type === "confirming" &&
+                      "Waiting for Confirmation"}
+                    {props.status.type === "confirmed" &&
+                      "Transaction Confirmed"}
+                    {props.status.type === "failed" && "Transaction Failed"}
+                  </span>
+                </span>
+              </div>
+            </div>
+          )}
+
+          {/* Transaction Hash */}
+          {"txHash" in props.status && props.status.txHash && (
+            <div className="flex items-center justify-between gap-1">
+              <span className="text-muted-foreground">Transaction Hash</span>
+              <div className="flex justify-end gap-2.5">
+                {explorer ? (
+                  <Button
+                    asChild
+                    variant="ghost"
+                    size="sm"
+                    className="gap-1.5 font-mono"
+                  >
+                    <Link
+                      href={`${explorer}/tx/${props.status.txHash}`}
+                      target="_blank"
+                    >
+                      {`${props.status.txHash.slice(0, 6)}...${props.status.txHash.slice(-4)}`}
+                      <ExternalLinkIcon className="size-3" />
+                    </Link>
+                  </Button>
+                ) : (
+                  <CopyTextButton
+                    textToCopy={props.status.txHash}
+                    textToShow={`${props.status.txHash.slice(0, 6)}...${props.status.txHash.slice(-4)}`}
+                    variant="ghost"
+                    className="font-mono"
+                    copyIconPosition="right"
+                    tooltip="Copy Transaction Hash"
+                  />
+                )}
+              </div>
+            </div>
+          )}
         </div>
 
-        <div className="flex items-center justify-end border-t p-4">
+        {/* footer */}
+        <div className="flex items-center justify-end px-4 py-6 lg:px-6">
           <TransactionButton
             isPending={sendTransaction.isPending}
             transactionCount={undefined}
             txChainID={txData.chainId}
             variant="default"
+            disabled={isTransactionPending}
+            size="sm"
             onClick={async () => {
               trackEvent({
                 category: "nebula",
@@ -164,72 +295,6 @@ export function ExecuteTransactionCardLayout(props: {
           </TransactionButton>
         </div>
       </div>
-
-      {/* Tx Status */}
-      {props.status.type !== "idle" && (
-        <div className="mt-5 rounded-lg border bg-card">
-          <div className="flex flex-col gap-1.5 p-4">
-            {props.status.type === "sending" && (
-              <div className="flex items-center gap-2 text-link-foreground">
-                <Spinner className="size-4" />
-                <p> Sending Transaction </p>
-              </div>
-            )}
-
-            {isTransactionSent && (
-              <div className="flex items-center gap-2 text-success-text">
-                <CircleCheckIcon className="size-4" />
-                <p> Transaction Sent </p>
-              </div>
-            )}
-
-            {props.status.type === "confirming" && (
-              <div className="flex items-center gap-2 text-link-foreground">
-                <Spinner className="size-4" />
-                <p> Confirming Transaction </p>
-              </div>
-            )}
-
-            {props.status.type === "confirmed" && (
-              <div className="flex items-center gap-2 text-success-text">
-                <CircleCheckIcon className="size-4" />
-                <p> Transaction Confirmed </p>
-              </div>
-            )}
-
-            {props.status.type === "failed" && (
-              <div className="flex items-center gap-2 text-destructive-text">
-                <CircleXIcon className="size-4" />
-                <p> Transaction Failed </p>
-              </div>
-            )}
-          </div>
-
-          {"txHash" in props.status && props.status.txHash && (
-            <div className="flex justify-end gap-2.5 border-t p-4">
-              {explorer && (
-                <Button asChild variant="outline" size="sm" className="gap-2 ">
-                  <Link
-                    href={`${explorer}/tx/${props.status.txHash}`}
-                    target="_blank"
-                  >
-                    View on Explorer
-                    <ExternalLinkIcon className="size-3" />
-                  </Link>
-                </Button>
-              )}
-              <CopyTextButton
-                textToCopy={props.status.txHash}
-                className=""
-                textToShow="Transaction Hash"
-                variant="outline"
-                copyIconPosition="right"
-                tooltip="Copy Transaction Hash"
-              />
-            </div>
-          )}
-        </div>
-      )}
     </div>
   );
 }
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/contract-subscriptions/components/contract-subscriptions-table.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/contract-subscriptions/components/contract-subscriptions-table.tsx
index c711406d35d..9b7831adf09 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/contract-subscriptions/components/contract-subscriptions-table.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/contract-subscriptions/components/contract-subscriptions-table.tsx
@@ -23,7 +23,7 @@ import {
 } from "@chakra-ui/react";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import { createColumnHelper } from "@tanstack/react-table";
-import { ChainIcon } from "components/icons/ChainIcon";
+import { ChainIconClient } from "components/icons/ChainIcon";
 import { TWTable } from "components/shared/TWTable";
 import { format } from "date-fns";
 import { useTrack } from "hooks/analytics/useTrack";
@@ -81,7 +81,7 @@ export const ContractSubscriptionTable: React.FC<
         const chain = idToChain.get(cell.getValue());
         return (
           <Flex align="center" gap={2}>
-            <ChainIcon className="size-3" ipfsSrc={chain?.icon?.url} />
+            <ChainIconClient className="size-3" ipfsSrc={chain?.icon?.url} />
             <Text>{chain?.name ?? "N/A"}</Text>
           </Flex>
         );
@@ -399,7 +399,10 @@ const RemoveModal = ({
               <FormControl>
                 <FormLabel>Chain</FormLabel>
                 <Flex align="center" gap={2}>
-                  <ChainIcon className="size-3" ipfsSrc={chain?.icon?.url} />
+                  <ChainIconClient
+                    className="size-3"
+                    ipfsSrc={chain?.icon?.url}
+                  />
                   <Text>{chain?.name ?? "N/A"}</Text>
                 </Flex>
               </FormControl>
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/backend-wallets-table.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/backend-wallets-table.tsx
index 7dcfe515342..ef00a106e6f 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/backend-wallets-table.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/backend-wallets-table.tsx
@@ -34,7 +34,7 @@ import {
 } from "@chakra-ui/react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { type ColumnDef, createColumnHelper } from "@tanstack/react-table";
-import { ChainIcon } from "components/icons/ChainIcon";
+import { ChainIconClient } from "components/icons/ChainIcon";
 import { TWTable } from "components/shared/TWTable";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useAllChainsData } from "hooks/chains/allChains";
@@ -582,7 +582,10 @@ const SendFundsModal = ({
             <FormControl>
               <FormLabel>Chain</FormLabel>
               <Flex align="center" gap={2}>
-                <ChainIcon className="size-3" ipfsSrc={chain?.icon?.url} />
+                <ChainIconClient
+                  className="size-3"
+                  ipfsSrc={chain?.icon?.url}
+                />
                 <Text>{chain?.name}</Text>
               </Flex>
             </FormControl>
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/transactions-table.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/transactions-table.tsx
index 725a0cd2d3f..230a2e9b7c1 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/transactions-table.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/transactions-table.tsx
@@ -38,7 +38,7 @@ import {
   useEngineTransactions,
 } from "@3rdweb-sdk/react/hooks/useEngine";
 import { Collapse, Divider, useDisclosure } from "@chakra-ui/react";
-import { ChainIcon } from "components/icons/ChainIcon";
+import { ChainIconClient } from "components/icons/ChainIcon";
 import { formatDistanceToNowStrict } from "date-fns";
 import { format, formatDate } from "date-fns/format";
 import { useAllChainsData } from "hooks/chains/allChains";
@@ -373,7 +373,7 @@ function TxChainCell(props: { chainId: string | undefined }) {
 
   return (
     <div className="flex items-center gap-2">
-      <ChainIcon className="size-5" ipfsSrc={chain.icon?.url} />
+      <ChainIconClient className="size-5" ipfsSrc={chain.icon?.url} />
       <div className="max-w-[150px] truncate">
         {chain.name ?? `Chain ID: ${chainId}`}
       </div>
@@ -622,7 +622,7 @@ const TransactionDetailsDrawer = ({
           <div>
             <FormLabel>Chain</FormLabel>
             <div className="flex items-center gap-2">
-              <ChainIcon className="size-5" ipfsSrc={chain?.icon?.url} />
+              <ChainIconClient className="size-5" ipfsSrc={chain?.icon?.url} />
               <span>{chain?.name}</span>
             </div>
           </div>
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/relayers/components/relayers-table.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/relayers/components/relayers-table.tsx
index a31782c0fc5..8704f01834d 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/relayers/components/relayers-table.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/relayers/components/relayers-table.tsx
@@ -23,7 +23,7 @@ import {
   useDisclosure,
 } from "@chakra-ui/react";
 import { createColumnHelper } from "@tanstack/react-table";
-import { ChainIcon } from "components/icons/ChainIcon";
+import { ChainIconClient } from "components/icons/ChainIcon";
 import { TWTable } from "components/shared/TWTable";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useAllChainsData } from "hooks/chains/allChains";
@@ -71,7 +71,7 @@ export const RelayersTable: React.FC<RelayersTableProps> = ({
         const chain = idToChain.get(Number.parseInt(cell.getValue()));
         return (
           <Flex align="center" gap={2}>
-            <ChainIcon className="size-3" ipfsSrc={chain?.icon?.url} />
+            <ChainIconClient className="size-3" ipfsSrc={chain?.icon?.url} />
             <Text>{chain?.name ?? "N/A"}</Text>
           </Flex>
         );
@@ -404,7 +404,7 @@ const RemoveModal = ({
             <FormControl>
               <FormLabel>Chain</FormLabel>
               <Flex align="center" gap={2}>
-                <ChainIcon
+                <ChainIconClient
                   className="size-3"
                   ipfsSrc={
                     idToChain.get(Number.parseInt(relayer.chainId))?.icon?.url
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/overview/components/SponsoredTransactionsTableUI.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/overview/components/SponsoredTransactionsTableUI.tsx
index 508f0365c5f..6d8ac6c8556 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/overview/components/SponsoredTransactionsTableUI.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/overview/components/SponsoredTransactionsTableUI.tsx
@@ -19,7 +19,7 @@ import {
 } from "@/components/ui/table";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
-import { ChainIcon } from "components/icons/ChainIcon";
+import { ChainIconClient } from "components/icons/ChainIcon";
 import { format, formatDistance } from "date-fns";
 import { useAllChainsData } from "hooks/chains/allChains";
 import { ExternalLinkIcon, XIcon } from "lucide-react";
@@ -317,7 +317,7 @@ function ChainCell(props: { chainId: string }) {
 
   return (
     <div className="relative flex w-max items-center gap-2">
-      <ChainIcon ipfsSrc={chain?.icon?.url} className="size-6" />
+      <ChainIconClient ipfsSrc={chain?.icon?.url} className="size-6" />
       <Link
         target="_blank"
         href={`/${chain ? chain.slug : props.chainId}`}
diff --git a/apps/dashboard/src/components/cmd-k-search/index.tsx b/apps/dashboard/src/components/cmd-k-search/index.tsx
index 8c71aba573b..7221ef4b66c 100644
--- a/apps/dashboard/src/components/cmd-k-search/index.tsx
+++ b/apps/dashboard/src/components/cmd-k-search/index.tsx
@@ -21,7 +21,7 @@ import {
   useQuery,
   useQueryClient,
 } from "@tanstack/react-query";
-import { ChainIcon } from "components/icons/ChainIcon";
+import { ChainIconClient } from "components/icons/ChainIcon";
 import { useTrack } from "hooks/analytics/useTrack";
 import { type TrendingContract, fetchTopContracts } from "lib/search";
 import { ArrowRightIcon, CommandIcon, SearchIcon, XIcon } from "lucide-react";
@@ -322,7 +322,7 @@ const SearchResult: React.FC<SearchResultProps> = ({
         isActive && "bg-muted",
       )}
     >
-      <ChainIcon
+      <ChainIconClient
         className="size-6 shrink-0"
         ipfsSrc={result.chainMetadata?.icon?.url}
       />
diff --git a/apps/dashboard/src/components/configure-networks/ConfigureNetworkForm.tsx b/apps/dashboard/src/components/configure-networks/ConfigureNetworkForm.tsx
index 52b618b3afe..6302696a924 100644
--- a/apps/dashboard/src/components/configure-networks/ConfigureNetworkForm.tsx
+++ b/apps/dashboard/src/components/configure-networks/ConfigureNetworkForm.tsx
@@ -5,7 +5,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { useStore } from "@/lib/reactive";
-import { ChainIcon } from "components/icons/ChainIcon";
+import { ChainIconClient } from "components/icons/ChainIcon";
 import { getDashboardChainRpc } from "lib/rpc";
 import { CircleAlertIcon, Trash2Icon } from "lucide-react";
 import { useForm } from "react-hook-form";
@@ -369,7 +369,10 @@ export const ConfigureNetworkForm: React.FC<NetworkConfigFormProps> = ({
             label="Icon"
           >
             <div className="flex items-center gap-1">
-              <ChainIcon className="size-5" ipfsSrc={form.watch("icon")} />
+              <ChainIconClient
+                className="size-5"
+                ipfsSrc={form.watch("icon")}
+              />
               <IconUpload
                 onUpload={(uri) => {
                   form.setValue("icon", uri, { shouldDirty: true });
diff --git a/apps/dashboard/src/components/contract-components/tables/contract-table.tsx b/apps/dashboard/src/components/contract-components/tables/contract-table.tsx
index ab796fd688b..842d1389635 100644
--- a/apps/dashboard/src/components/contract-components/tables/contract-table.tsx
+++ b/apps/dashboard/src/components/contract-components/tables/contract-table.tsx
@@ -20,7 +20,7 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import { useMutation } from "@tanstack/react-query";
-import { ChainIcon } from "components/icons/ChainIcon";
+import { ChainIconClient } from "components/icons/ChainIcon";
 import { NetworkSelectDropdown } from "components/selects/NetworkSelectDropdown";
 import { EllipsisVerticalIcon, ExternalLinkIcon, XIcon } from "lucide-react";
 import Link from "next/link";
@@ -263,7 +263,7 @@ const ChainNameCell = React.memo(function ChainNameCell(props: {
     `Unknown Network (#${props.chainId})`;
   return (
     <div className="flex items-center gap-2">
-      <ChainIcon className="size-5" ipfsSrc={data?.icon?.url} />
+      <ChainIconClient className="size-5" ipfsSrc={data?.icon?.url} />
       <SkeletonContainer
         loadedData={data ? cleanedChainName : undefined}
         skeletonData={`Chain ID ${props.chainId}`}
diff --git a/apps/dashboard/src/components/icons/ChainIcon.tsx b/apps/dashboard/src/components/icons/ChainIcon.tsx
index 2a7cf5d47c2..a79f357937c 100644
--- a/apps/dashboard/src/components/icons/ChainIcon.tsx
+++ b/apps/dashboard/src/components/icons/ChainIcon.tsx
@@ -12,7 +12,7 @@ type ChainIconProps = ImageProps & {
   ipfsSrc?: string;
 };
 
-export const ChainIcon = ({ ipfsSrc, ...restProps }: ChainIconProps) => {
+export const ChainIconClient = ({ ipfsSrc, ...restProps }: ChainIconProps) => {
   const src = ipfsSrc ? replaceIpfsUrl(ipfsSrc) : fallbackChainIcon;
 
   return (
diff --git a/apps/dashboard/src/components/selects/CustomChainRenderer.tsx b/apps/dashboard/src/components/selects/CustomChainRenderer.tsx
index 629d68828c6..7d9a28a90b9 100644
--- a/apps/dashboard/src/components/selects/CustomChainRenderer.tsx
+++ b/apps/dashboard/src/components/selects/CustomChainRenderer.tsx
@@ -1,7 +1,7 @@
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
-import { ChainIcon } from "components/icons/ChainIcon";
+import { ChainIconClient } from "components/icons/ChainIcon";
 import { OPSponsoredChains } from "constants/chains";
 import { SettingsIcon } from "lucide-react";
 import type { UseNetworkSwitcherModalOptions } from "thirdweb/react";
@@ -49,7 +49,7 @@ export const CustomChainRenderer = ({
             }
           }}
         >
-          <ChainIcon ipfsSrc={chain.icon?.url} className="size-8" />
+          <ChainIconClient ipfsSrc={chain.icon?.url} className="size-8" />
           <div className="flex flex-col gap-1">
             <div className="flex items-center gap-2">
               <p
diff --git a/apps/dashboard/src/components/selects/NetworkSelectDropdown.tsx b/apps/dashboard/src/components/selects/NetworkSelectDropdown.tsx
index aa7e3bce4f0..4bcf1dd39a1 100644
--- a/apps/dashboard/src/components/selects/NetworkSelectDropdown.tsx
+++ b/apps/dashboard/src/components/selects/NetworkSelectDropdown.tsx
@@ -5,7 +5,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { ChainIcon } from "components/icons/ChainIcon";
+import { ChainIconClient } from "components/icons/ChainIcon";
 import { useMemo } from "react";
 import { useAllChainsData } from "../../hooks/chains/allChains";
 
@@ -67,7 +67,7 @@ export const NetworkSelectDropdown: React.FC<NetworkSelectDropdownProps> = ({
       >
         <SelectItem value="all-chains">
           <div className="flex items-center gap-2 py-1" data-all-chains>
-            <ChainIcon ipfsSrc={undefined} className="size-5" />
+            <ChainIconClient ipfsSrc={undefined} className="size-5" />
             All Networks
           </div>
         </SelectItem>
@@ -75,7 +75,7 @@ export const NetworkSelectDropdown: React.FC<NetworkSelectDropdownProps> = ({
         {chains.map((chain) => (
           <SelectItem key={chain.chainId} value={String(chain.chainId)}>
             <div className="flex items-center gap-2 py-1">
-              <ChainIcon ipfsSrc={chain.icon?.url} className="size-5" />
+              <ChainIconClient ipfsSrc={chain.icon?.url} className="size-5" />
               {useCleanChainName ? cleanChainName(chain.name) : chain.name}
             </div>
           </SelectItem>
diff --git a/apps/dashboard/src/components/selects/NetworkSelectorButton.tsx b/apps/dashboard/src/components/selects/NetworkSelectorButton.tsx
index 7b1d0b82d90..ef6b3dab0e9 100644
--- a/apps/dashboard/src/components/selects/NetworkSelectorButton.tsx
+++ b/apps/dashboard/src/components/selects/NetworkSelectorButton.tsx
@@ -5,7 +5,7 @@ import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { useStore } from "@/lib/reactive";
 import { cn } from "@/lib/utils";
 import { popularChains } from "@3rdweb-sdk/react/components/popularChains";
-import { ChainIcon } from "components/icons/ChainIcon";
+import { ChainIconClient } from "components/icons/ChainIcon";
 import { useActiveChainAsDashboardChain } from "lib/v5-adapter";
 import { ChevronDownIcon } from "lucide-react";
 import { useTheme } from "next-themes";
@@ -199,7 +199,7 @@ export const NetworkSelectorButton: React.FC<NetworkSelectorButtonProps> = ({
           });
         }}
       >
-        <ChainIcon ipfsSrc={chain?.icon?.url} className="size-5" />
+        <ChainIconClient ipfsSrc={chain?.icon?.url} className="size-5" />
         {chain?.name || "Select Network"}
 
         <ChevronDownIcon className="ml-auto size-4" />
diff --git a/apps/dashboard/src/components/settings/Account/Billing/CreditsItem.tsx b/apps/dashboard/src/components/settings/Account/Billing/CreditsItem.tsx
index 47c23934def..d81a18ed7e6 100644
--- a/apps/dashboard/src/components/settings/Account/Billing/CreditsItem.tsx
+++ b/apps/dashboard/src/components/settings/Account/Billing/CreditsItem.tsx
@@ -1,7 +1,7 @@
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import type { Account, BillingCredit } from "@3rdweb-sdk/react/hooks/useApi";
-import { ChainIcon } from "components/icons/ChainIcon";
+import { ChainIconClient } from "components/icons/ChainIcon";
 import { formatDistance } from "date-fns";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useLocalStorage } from "hooks/useLocalStorage";
@@ -49,7 +49,7 @@ export const CreditsItem: React.FC<CreditsItemProps> = ({
         <div className="relative">
           <div className="absolute top-0 right-0">
             {isOpCredit ? (
-              <ChainIcon
+              <ChainIconClient
                 ipfsSrc=// Hard-coded here to remove @thirdweb dev/chains
                 "ipfs://QmcxZHpyJa8T4i63xqjPYrZ6tKrt55tZJpbXcjSDKuKaf9/optimism/512.png"
                 className="size-6"