diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/bridge-status.stories.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/bridge-status.stories.tsx
new file mode 100644
index 00000000000..5fd50ea3e1e
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/bridge-status.stories.tsx
@@ -0,0 +1,106 @@
+import type { Meta, StoryObj } from "@storybook/nextjs";
+import type { Status } from "thirdweb/bridge";
+import { storybookThirdwebClient } from "@/storybook/utils";
+import { BridgeStatus } from "./bridge-status";
+
+const meta = {
+  component: BridgeStatus,
+  title: "chain/tx/bridge-status",
+  decorators: [
+    (Story) => (
+      <div className="container max-w-6xl py-10">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof BridgeStatus>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const completedStatus: Status = {
+  status: "COMPLETED",
+  paymentId:
+    "0x8e0a0d9c0254a75a3004a28e0fb69bae7f2d659938ddd461753627270930db60",
+  originAmount: 129935n,
+  destinationAmount: 100000n,
+  transactions: [
+    {
+      chainId: 42161,
+      transactionHash:
+        "0x37daf698878e73590adb2d6f833e810304a9981829ad983fb355245af1183107",
+    },
+    {
+      chainId: 8453,
+      transactionHash:
+        "0xc72abba2761bb48f605125dc12c17b15088303db960816fa12316f0c90796417",
+    },
+  ],
+  originChainId: 42161,
+  originTokenAddress: "0xaf88d065e77c8cC2239327C5EDb3A432268e5831",
+  originToken: {
+    chainId: 42161,
+    address: "0xaf88d065e77c8cC2239327C5EDb3A432268e5831",
+    symbol: "USDC",
+    name: "USD Coin",
+    decimals: 6,
+    iconUri: "https://ethereum-optimism.github.io/data/USDC/logo.png",
+  },
+  destinationChainId: 8453,
+  destinationTokenAddress: "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913",
+  destinationToken: {
+    chainId: 8453,
+    address: "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913",
+    symbol: "USDC",
+    name: "USD Coin",
+    decimals: 6,
+    iconUri:
+      "https://coin-images.coingecko.com/coins/images/6319/large/usdc.png?1696506694",
+  },
+  sender: "0x2a4f24F935Eb178e3e7BA9B53A5Ee6d8407C0709",
+  receiver: "0x2a4f24F935Eb178e3e7BA9B53A5Ee6d8407C0709",
+};
+
+const pendingStatus: Status = {
+  ...completedStatus,
+  status: "PENDING",
+};
+
+const failedStatus: Status = {
+  ...completedStatus,
+  status: "FAILED",
+};
+
+const notFoundStatus: Status = {
+  ...completedStatus,
+  status: "NOT_FOUND",
+  transactions: [],
+};
+
+export const Completed: Story = {
+  args: {
+    bridgeStatus: completedStatus,
+    client: storybookThirdwebClient,
+  },
+};
+
+export const Pending: Story = {
+  args: {
+    bridgeStatus: pendingStatus,
+    client: storybookThirdwebClient,
+  },
+};
+
+export const Failed: Story = {
+  args: {
+    bridgeStatus: failedStatus,
+    client: storybookThirdwebClient,
+  },
+};
+
+export const NotFound: Story = {
+  args: {
+    bridgeStatus: notFoundStatus,
+    client: storybookThirdwebClient,
+  },
+};
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/bridge-status.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/bridge-status.tsx
new file mode 100644
index 00000000000..5d4ed8b5cd4
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/bridge-status.tsx
@@ -0,0 +1,372 @@
+"use client";
+import { useQuery } from "@tanstack/react-query";
+import { Img } from "@workspace/ui/components/img";
+import { Spinner } from "@workspace/ui/components/spinner";
+import { ArrowRightIcon, CircleCheckIcon, CircleXIcon } from "lucide-react";
+import Link from "next/link";
+import type { ThirdwebClient } from "thirdweb";
+import type { Status, Token } from "thirdweb/bridge";
+import { status } from "thirdweb/bridge";
+import { toTokens } from "thirdweb/utils";
+import { WalletAddress } from "@/components/blocks/wallet-address";
+import { CopyTextButton } from "@/components/ui/CopyTextButton";
+import { SkeletonContainer } from "@/components/ui/skeleton";
+import { cn } from "@/lib/utils";
+import { fetchChain } from "@/utils/fetchChain";
+import { resolveSchemeWithErrorHandler } from "@/utils/resolveSchemeWithErrorHandler";
+
+export function BridgeStatus(props: {
+  bridgeStatus: Status;
+  client: ThirdwebClient;
+}) {
+  const { bridgeStatus } = props;
+
+  return (
+    <div className="bg-card rounded-xl border relative">
+      {bridgeStatus.status === "FAILED" &&
+        bridgeStatus.transactions.length > 0 && (
+          <FailedBridgeStatusContent
+            transactions={bridgeStatus.transactions}
+            client={props.client}
+          />
+        )}
+
+      {(bridgeStatus.status === "COMPLETED" ||
+        bridgeStatus.status === "PENDING") && (
+        <BridgeStatusContent
+          bridgeStatus={bridgeStatus}
+          client={props.client}
+        />
+      )}
+
+      <div className="px-6 lg:px-10 py-7 space-y-1.5">
+        <div className="flex justify-between items-center">
+          <p className="text-sm text-muted-foreground "> Status </p>
+
+          <div
+            className={cn(
+              "flex items-center gap-1.5 text-sm capitalize",
+              bridgeStatus.status === "COMPLETED" && "text-green-500",
+              bridgeStatus.status === "PENDING" && "text-blue-500",
+              bridgeStatus.status === "FAILED" && "text-red-500",
+            )}
+          >
+            {bridgeStatus.status === "COMPLETED" && (
+              <CircleCheckIcon className="size-3.5" />
+            )}
+            {bridgeStatus.status === "PENDING" && (
+              <Spinner className="size-3.5" />
+            )}
+            {bridgeStatus.status === "FAILED" && (
+              <CircleXIcon className="size-3.5" />
+            )}
+            {bridgeStatus.status === "NOT_FOUND" && (
+              <CircleXIcon className="size-3.5" />
+            )}
+
+            {bridgeStatus.status.toLowerCase().replace("_", " ")}
+          </div>
+        </div>
+
+        <div className="flex justify-between items-center">
+          <p className="text-sm text-muted-foreground ">Payment ID</p>
+          <CopyTextButton
+            textToCopy={bridgeStatus.paymentId}
+            textToShow={`${bridgeStatus.paymentId.slice(0, 6)}...${bridgeStatus.paymentId.slice(-4)}`}
+            tooltip="Payment ID"
+            className="text-sm translate-x-1.5"
+            copyIconPosition="left"
+            variant="ghost"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function TokenInfo(props: {
+  label: string;
+  addressLabel: string;
+  token: Token;
+  amountWei: bigint | undefined;
+  walletAddress: string;
+  client: ThirdwebClient;
+  txHash: string | undefined;
+}) {
+  const chainQuery = useChainQuery(props.token.chainId);
+
+  return (
+    <div className="flex-1 pt-10 pb-9 px-6 lg:px-10">
+      <div className="flex justify-between items-center">
+        <h3 className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+          {props.label}
+        </h3>
+      </div>
+
+      <div className="pb-7 pt-6 border-b border-dashed">
+        <div className="flex items-center gap-3">
+          <div className="relative hover:ring-2 hover:ring-offset-2 hover:ring-offset-card hover:ring-foreground/30 rounded-full">
+            <Link
+              href={`/${chainQuery.data?.slug || props.token.chainId}/${props.token.address}`}
+              target="_blank"
+              aria-label="View Token"
+              className="absolute inset-0 z-10"
+            />
+
+            <Img
+              src={props.token.iconUri}
+              alt={props.token.name}
+              className="size-10 rounded-full"
+              fallback={
+                <div className="size-10 from-blue-500 to-foreground rounded-full bg-gradient-to-b" />
+              }
+            />
+
+            <div className="absolute -bottom-0.5 -right-0.5 bg-background p-0.5 rounded-full">
+              <Img
+                src={resolveSchemeWithErrorHandler({
+                  client: props.client,
+                  uri: chainQuery.data?.icon?.url,
+                })}
+                alt={props.token.name}
+                className="size-4 rounded-full"
+                fallback={
+                  <div className="size-4 from-blue-500 to-foreground rounded-full bg-gradient-to-b" />
+                }
+              />
+            </div>
+          </div>
+          <div className="space-y-1.5">
+            <p className="text-lg text-foreground font-medium tracking-tight leading-none">
+              {props.amountWei ? (
+                <>
+                  {toTokens(props.amountWei, props.token.decimals)}{" "}
+                  {props.token.symbol}
+                </>
+              ) : (
+                "N/A"
+              )}
+            </p>
+            <SkeletonContainer
+              skeletonData={`Chain ${props.token.chainId}`}
+              loadedData={chainQuery.data?.name}
+              className="[&_*]:flex"
+              render={(data) => (
+                <Link
+                  href={`/${chainQuery.data?.slug || props.token.chainId}`}
+                  className="text-sm text-muted-foreground leading-none hover:underline"
+                  target="_blank"
+                >
+                  {data}
+                </Link>
+              )}
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="h-6" />
+
+      <div className="space-y-1.5">
+        <div className="flex gap-2.5 justify-between">
+          <p className="text-sm text-muted-foreground ">{props.addressLabel}</p>
+          <WalletAddress
+            address={props.walletAddress}
+            client={props.client}
+            className="py-0.5 h-auto text-sm [&>*]:!font-sans"
+            iconClassName="size-3.5"
+          />
+        </div>
+
+        <div className="flex gap-2 justify-between">
+          <p className="text-sm text-muted-foreground ">Token Address</p>
+          <CopyTextButton
+            textToCopy={props.token.address}
+            textToShow={`${props.token.address.slice(0, 6)}...${props.token.address.slice(-4)}`}
+            tooltip="Token Address"
+            className="text-sm translate-x-1.5"
+            copyIconPosition="left"
+            variant="ghost"
+          />
+        </div>
+
+        <div className="flex gap-2 justify-between">
+          <p className="text-sm text-muted-foreground ">Transaction Hash</p>
+          {props.txHash ? (
+            <CopyTextButton
+              textToCopy={props.txHash}
+              textToShow={`${props.txHash.slice(0, 6)}...${props.txHash.slice(-4)}`}
+              tooltip="Transaction Hash"
+              className="text-sm translate-x-1.5"
+              copyIconPosition="left"
+              variant="ghost"
+            />
+          ) : (
+            <p className="text-sm text-muted-foreground ">N/A</p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function BridgeStatusContent(props: {
+  bridgeStatus: Exclude<Status, { status: "FAILED" } | { status: "NOT_FOUND" }>;
+  client: ThirdwebClient;
+}) {
+  const { bridgeStatus } = props;
+
+  const fromTxHash = bridgeStatus.transactions.find(
+    (tx) => tx.chainId === bridgeStatus.originChainId,
+  )?.transactionHash;
+  const toTxHash = bridgeStatus.transactions.find(
+    (tx) => tx.chainId === bridgeStatus.destinationChainId,
+  )?.transactionHash;
+
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-2 border-b border-dashed">
+      <TokenInfo
+        label="From"
+        token={bridgeStatus.originToken}
+        amountWei={bridgeStatus.originAmount}
+        walletAddress={bridgeStatus.sender}
+        client={props.client}
+        txHash={fromTxHash}
+        addressLabel="Sender"
+      />
+
+      <div className="border-t lg:border-l lg:border-t-0 border-dashed relative">
+        <div className="p-1.5 rounded-full bg-background absolute top-0 lg:top-1/2 left-1/2 lg:left-0 -translate-y-1/2 -translate-x-1/2 border">
+          <ArrowRightIcon className="size-4 text-muted-foreground rotate-90 lg:rotate-0" />
+        </div>
+        <TokenInfo
+          label="To"
+          token={bridgeStatus.destinationToken}
+          // TODO - destinationAmount is not available in PENDING status, fix it in API
+          amountWei={
+            bridgeStatus.status === "COMPLETED"
+              ? bridgeStatus.destinationAmount
+              : undefined
+          }
+          walletAddress={bridgeStatus.receiver}
+          client={props.client}
+          txHash={toTxHash}
+          addressLabel="Receiver"
+        />
+      </div>
+    </div>
+  );
+}
+
+function FailedBridgeStatusContent(props: {
+  transactions: { chainId: number; transactionHash: string }[];
+  client: ThirdwebClient;
+}) {
+  return (
+    <div className="px-6 lg:px-10 py-7 space-y-1.5 border-b border-dashed">
+      <h3 className="text-base font-medium tracking-tight mb-3">
+        Transactions
+      </h3>
+      <div className="flex flex-col gap-2">
+        {props.transactions.map((tx) => {
+          return (
+            <TxHashRow
+              key={tx.chainId}
+              client={props.client}
+              chainId={tx.chainId}
+              txHash={tx.transactionHash}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+function useChainQuery(chainId: number | undefined) {
+  return useQuery({
+    enabled: !!chainId,
+    queryKey: ["chain-metadata", chainId],
+    queryFn: async () => {
+      if (!chainId) {
+        return null;
+      }
+      return fetchChain(chainId);
+    },
+  });
+}
+
+function TxHashRow(props: {
+  client: ThirdwebClient;
+  chainId: number;
+  txHash: string;
+}) {
+  const chainQuery = useChainQuery(props.chainId);
+
+  return (
+    <div className="flex items-center gap-2 justify-between">
+      <div className="flex items-center gap-2">
+        <Img
+          src={resolveSchemeWithErrorHandler({
+            client: props.client,
+            uri: chainQuery.data?.icon?.url,
+          })}
+          alt={chainQuery.data?.name}
+          className="size-4 rounded-full"
+          fallback={
+            <div className="size-4 from-blue-500 to-foreground rounded-full bg-gradient-to-b" />
+          }
+        />
+        <SkeletonContainer
+          skeletonData={`Chain ${props.chainId}`}
+          loadedData={chainQuery.data?.name}
+          render={(data) => (
+            <p className="text-sm text-muted-foreground">{data}</p>
+          )}
+        />
+      </div>
+      <CopyTextButton
+        textToCopy={props.txHash}
+        textToShow={`${props.txHash.slice(0, 6)}...${props.txHash.slice(-4)}`}
+        tooltip="Copy Transaction Hash"
+        className="text-sm"
+        copyIconPosition="right"
+        variant="ghost"
+      />
+    </div>
+  );
+}
+
+export function BridgeStatusWithPolling(props: {
+  bridgeStatus: Status;
+  client: ThirdwebClient;
+  chainId: number;
+  transactionHash: string;
+}) {
+  const bridgeStatusQuery = useQuery({
+    enabled:
+      props.bridgeStatus.status === "PENDING" ||
+      props.bridgeStatus.status === "NOT_FOUND",
+    queryKey: ["bridge-status", props.transactionHash, props.chainId],
+    queryFn: () =>
+      status({
+        chainId: props.chainId,
+        transactionHash: props.transactionHash as `0x${string}`,
+        client: props.client,
+      }),
+    refetchInterval(query) {
+      const status = query.state.data?.status;
+      if (status === "COMPLETED" || status === "FAILED") {
+        return false;
+      }
+      return 5000;
+    },
+  });
+
+  return (
+    <BridgeStatus
+      bridgeStatus={bridgeStatusQuery.data || props.bridgeStatus}
+      client={props.client}
+    />
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/page.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/page.tsx
index 051758360e4..b67d14b1c66 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/page.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/page.tsx
@@ -8,13 +8,17 @@ import {
   Clock4Icon,
   InfoIcon,
 } from "lucide-react";
+import { notFound } from "next/navigation";
 import { toTokens } from "thirdweb";
+import { status } from "thirdweb/bridge";
+import type { ChainMetadata } from "thirdweb/chains";
 import {
   eth_getBlockByHash,
   eth_getTransactionByHash,
   eth_getTransactionReceipt,
   getRpcClient,
 } from "thirdweb/rpc";
+import type { TransactionReceipt } from "thirdweb/transaction";
 import { hexToNumber, toEther } from "thirdweb/utils";
 import { Badge } from "@/components/ui/badge";
 import {
@@ -26,9 +30,14 @@ import {
   BreadcrumbSeparator,
 } from "@/components/ui/breadcrumb";
 import { CopyTextButton } from "@/components/ui/CopyTextButton";
+import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
 import { serverThirdwebClient } from "@/constants/thirdweb-client.server";
 import { mapV4ChainToV5Chain } from "@/utils/map-chains";
 import { getChain } from "../../../utils";
+import { BridgeStatusWithPolling } from "./bridge-status";
+import { BridgeAndOverviewTabs } from "./tabs";
+
+type Transaction = Awaited<ReturnType<typeof eth_getTransactionByHash>>;
 
 export default async function Page(props: {
   params: Promise<{ chain_id: string; txHash: `0x${string}` }>;
@@ -43,27 +52,41 @@ export default async function Page(props: {
     client: serverThirdwebClient,
   });
 
-  const [transaction, receipt] = await Promise.all([
+  const [transaction, receipt, bridgeStatus] = await Promise.all([
     eth_getTransactionByHash(rpcRequest, {
       hash: params.txHash,
     }),
     eth_getTransactionReceipt(rpcRequest, {
       hash: params.txHash,
     }),
+    status({
+      chainId: chain.chainId,
+      transactionHash: params.txHash,
+      client: serverThirdwebClient,
+    }).catch(() => undefined),
   ]);
+
   if (!transaction.blockHash) {
-    return <div>no tx found</div>;
+    notFound();
   }
+
   const block = await eth_getBlockByHash(rpcRequest, {
     blockHash: transaction.blockHash,
   });
 
-  const timestamp = getDatefromTimestamp(block.timestamp);
+  const overviewContent = (
+    <GeneericTxDetails
+      transaction={transaction}
+      receipt={receipt}
+      block={block}
+      chain={chain}
+    />
+  );
 
   return (
     <main className="pb-20">
       <div className="flex h-14 items-center border-border border-b">
-        <Breadcrumb className="container max-w-7xl">
+        <Breadcrumb className="container max-w-6xl">
           <BreadcrumbList>
             <BreadcrumbItem>
               <BreadcrumbLink href="/chainlist">Chainlist</BreadcrumbLink>
@@ -82,219 +105,244 @@ export default async function Page(props: {
         </Breadcrumb>
       </div>
 
-      <div className="container max-w-7xl py-10">
+      <div className="container max-w-6xl py-10">
         <h1 className="font-semibold text-3xl tracking-tight">
           Transaction Details
         </h1>
       </div>
 
-      <div className="container max-w-7xl">
-        <div className="border  rounded-xl p-4 lg:p-6 bg-card">
-          {/* section 1 */}
-          <section className="border-b pb-6 space-y-5 lg:space-y-3">
-            <GridItem
-              label="Transaction hash"
-              tooltip="A TxHash or transaction hash is a unique 66-character identifier that is generated whenever a transaction is executed."
-            >
-              <CopyTextButton
-                textToCopy={transaction.hash}
-                textToShow={transaction.hash}
-                tooltip="Copy transaction hash"
-                variant="ghost"
-                copyIconPosition="right"
-                className="truncate -translate-x-1.5 max-w-full"
+      <div className="container max-w-6xl">
+        {bridgeStatus ? (
+          <BridgeAndOverviewTabs
+            bridgeStatus={
+              <BridgeStatusWithPolling
+                bridgeStatus={bridgeStatus}
+                client={getClientThirdwebClient()}
+                chainId={chain.chainId}
+                transactionHash={params.txHash}
               />
-            </GridItem>
-
-            <GridItem label="Status" tooltip="The status of the transaction.">
-              <Badge
-                className="py-0.5 gap-1.5 px-1.5 capitalize"
-                variant={
-                  receipt.status === "success" ? "success" : "destructive"
-                }
-              >
-                {receipt.status === "success" ? (
-                  <CircleCheckIcon className="size-3" />
-                ) : (
-                  <CircleAlertIcon className="size-3" />
-                )}
-                {receipt.status}
-              </Badge>
-            </GridItem>
+            }
+            overview={overviewContent}
+          />
+        ) : (
+          overviewContent
+        )}
+      </div>
+    </main>
+  );
+}
 
-            {transaction.blockNumber && (
-              <GridItem
-                label="Block"
-                tooltip="Number of the block in which the transaction is recorded. Block confirmations indicate how many blocks have been added since the transaction was produced."
-              >
-                <p>{Number(transaction.blockNumber)}</p>
-              </GridItem>
-            )}
+function GeneericTxDetails(props: {
+  transaction: Transaction;
+  receipt: TransactionReceipt;
+  block: {
+    timestamp: bigint;
+    baseFeePerGas: bigint | null;
+  };
+  chain: ChainMetadata;
+}) {
+  const { transaction, receipt, chain, block } = props;
 
-            {timestamp && (
-              <GridItem
-                label="Timestamp"
-                tooltip="The date and time at which a transaction is validated."
-              >
-                <div className="flex items-center gap-1.5 flex-wrap">
-                  <Clock4Icon className="size-3" />
-                  <p>
-                    {formatDistanceToNowStrict(timestamp, {
-                      addSuffix: true,
-                    })}
-                  </p>
-                  <p>({formatDate(timestamp, "PP pp z")})</p>
-                </div>
-              </GridItem>
-            )}
-          </section>
+  const timestamp = getDatefromTimestamp(block.timestamp);
 
-          {/* section 2 */}
-          <section className="border-b py-6 space-y-5 lg:space-y-3">
-            <GridItem
-              label="From"
-              tooltip="The sending party of the transaction."
-            >
-              <CopyTextButton
-                textToCopy={transaction.from}
-                textToShow={transaction.from}
-                tooltip="Copy from address"
-                variant="ghost"
-                copyIconPosition="right"
-                className="truncate -translate-x-1.5 max-w-full"
-              />
-            </GridItem>
+  return (
+    <div className="border  rounded-xl p-4 lg:p-6 bg-card">
+      {/* section 1 */}
+      <section className="border-b pb-6 space-y-5 lg:space-y-3">
+        <GridItem
+          label="Transaction hash"
+          tooltip="A TxHash or transaction hash is a unique 66-character identifier that is generated whenever a transaction is executed."
+        >
+          <CopyTextButton
+            textToCopy={transaction.hash}
+            textToShow={transaction.hash}
+            tooltip="Copy transaction hash"
+            variant="ghost"
+            copyIconPosition="right"
+            className="truncate -translate-x-1.5 max-w-full"
+          />
+        </GridItem>
 
-            {transaction.to && (
-              <GridItem
-                label="Interacted with (To)"
-                tooltip="The receiving party of the transaction (could be a contract address)."
-              >
-                <CopyTextButton
-                  textToCopy={transaction.to}
-                  textToShow={transaction.to}
-                  tooltip="Copy to address"
-                  variant="ghost"
-                  copyIconPosition="right"
-                  className="truncate -translate-x-1.5 max-w-full"
-                />
-              </GridItem>
+        <GridItem label="Status" tooltip="The status of the transaction.">
+          <Badge
+            className="py-0.5 gap-1.5 px-1.5 capitalize"
+            variant={receipt.status === "success" ? "success" : "destructive"}
+          >
+            {receipt.status === "success" ? (
+              <CircleCheckIcon className="size-3" />
+            ) : (
+              <CircleAlertIcon className="size-3" />
             )}
-          </section>
+            {receipt.status}
+          </Badge>
+        </GridItem>
 
-          {/* section 3 */}
-          <section className="py-6 space-y-5 lg:space-y-3 border-b">
-            <GridItem
-              label="Value"
-              tooltip="The value being transacted in ETH and fiat value. Note: You can click the fiat value (if available) to see historical value at the time of transaction."
-            >
-              <p>
-                {toEther(transaction.value)} {chain.nativeCurrency?.symbol}
-              </p>
-            </GridItem>
+        {transaction.blockNumber && (
+          <GridItem
+            label="Block"
+            tooltip="Number of the block in which the transaction is recorded. Block confirmations indicate how many blocks have been added since the transaction was produced."
+          >
+            <p>{Number(transaction.blockNumber)}</p>
+          </GridItem>
+        )}
 
-            <GridItem
-              label="Transaction Fee"
-              tooltip="Amount paid to the validator for processing the transaction."
-            >
+        {timestamp && (
+          <GridItem
+            label="Timestamp"
+            tooltip="The date and time at which a transaction is validated."
+          >
+            <div className="flex items-center gap-1.5 flex-wrap">
+              <Clock4Icon className="size-3" />
               <p>
-                {toEther((transaction.gasPrice || 0n) * receipt.gasUsed)}{" "}
-                {chain.nativeCurrency?.symbol}
+                {formatDistanceToNowStrict(timestamp, {
+                  addSuffix: true,
+                })}
               </p>
-            </GridItem>
+              <p>({formatDate(timestamp, "PP pp z")})</p>
+            </div>
+          </GridItem>
+        )}
+      </section>
 
-            <GridItem
-              label="Gas Price"
-              tooltip="The price per gas unit the sender is willing to pay"
-            >
-              <p>
-                {toEther(transaction.gasPrice || 0n)}{" "}
-                {chain.nativeCurrency?.symbol}
-              </p>
-            </GridItem>
+      {/* section 2 */}
+      <section className="border-b py-6 space-y-5 lg:space-y-3">
+        <GridItem label="From" tooltip="The sending party of the transaction.">
+          <CopyTextButton
+            textToCopy={transaction.from}
+            textToShow={transaction.from}
+            tooltip="Copy from address"
+            variant="ghost"
+            copyIconPosition="right"
+            className="truncate -translate-x-1.5 max-w-full"
+          />
+        </GridItem>
 
-            <GridItem
-              label="Gas Usage"
-              tooltip="The amount of gas used by the transaction."
-            >
-              <p>{receipt.gasUsed.toString()}</p>
-            </GridItem>
+        {transaction.to && (
+          <GridItem
+            label="Interacted with (To)"
+            tooltip="The receiving party of the transaction (could be a contract address)."
+          >
+            <CopyTextButton
+              textToCopy={transaction.to}
+              textToShow={transaction.to}
+              tooltip="Copy to address"
+              variant="ghost"
+              copyIconPosition="right"
+              className="truncate -translate-x-1.5 max-w-full"
+            />
+          </GridItem>
+        )}
+      </section>
 
-            <GridItem
-              label="Gas Fees"
-              tooltip="Base Fee refers to the network Base Fee at the time of the block, while Max Fee & Max Priority Fee refer to the max amount a user is willing to pay for their tx & to give to the miner respectively."
-            >
-              <p className="flex gap-2.5">
-                <span>Base: {toTokens(block.baseFeePerGas || 0n, 9)} Gwei</span>
+      {/* section 3 */}
+      <section className="py-6 space-y-5 lg:space-y-3 border-b">
+        <GridItem
+          label="Value"
+          tooltip="The value being transacted in ETH and fiat value. Note: You can click the fiat value (if available) to see historical value at the time of transaction."
+        >
+          <p>
+            {toEther(transaction.value)} {chain.nativeCurrency?.symbol}
+          </p>
+        </GridItem>
 
-                {transaction.maxFeePerGas && (
-                  <>
-                    <span className="text-muted-foreground/50">|</span>
-                    <span>
-                      Max: {toTokens(transaction.maxFeePerGas || 0n, 9)} Gwei
-                    </span>
-                  </>
-                )}
+        <GridItem
+          label="Transaction Fee"
+          tooltip="Amount paid to the validator for processing the transaction."
+        >
+          <p>
+            {toEther((transaction.gasPrice || 0n) * receipt.gasUsed)}{" "}
+            {chain.nativeCurrency?.symbol}
+          </p>
+        </GridItem>
 
-                {transaction.maxPriorityFeePerGas && (
-                  <>
-                    <span className="text-muted-foreground/50">|</span>
-                    <span>
-                      Max priority:{" "}
-                      {transaction.maxPriorityFeePerGas?.toString()} Gwei
-                    </span>
-                  </>
-                )}
-              </p>
-            </GridItem>
+        <GridItem
+          label="Gas Price"
+          tooltip="The price per gas unit the sender is willing to pay"
+        >
+          <p>
+            {toEther(transaction.gasPrice || 0n)} {chain.nativeCurrency?.symbol}
+          </p>
+        </GridItem>
 
-            <GridItem
-              label="Burnt fees"
-              tooltip="The amount of fees that were burnt by the transaction."
-            >
-              <p>{toEther(block.baseFeePerGas || 0n * receipt.gasUsed)}</p>
-            </GridItem>
-          </section>
+        <GridItem
+          label="Gas Usage"
+          tooltip="The amount of gas used by the transaction."
+        >
+          <p>{receipt.gasUsed.toString()}</p>
+        </GridItem>
 
-          {/* section 4 */}
-          <section className="pt-6 space-y-5 lg:space-y-3">
-            <GridItem
-              label="Other Attributes"
-              tooltip="Other data related to this transaction."
-            >
-              <div className="flex gap-2 flex-wrap">
-                <Badge variant="outline" className="gap-1 py-1">
-                  <span className="text-muted-foreground">Txn type:</span>
-                  <span className="capitalize">
-                    {hexToNumber(transaction.typeHex || "0x0")} (
-                    {transaction.type})
-                  </span>
-                </Badge>
-                <Badge variant="outline" className="gap-1 py-1">
-                  <span className="text-muted-foreground">Nonce: </span>
-                  <span>{transaction.nonce}</span>
-                </Badge>
-                <Badge variant="outline" className="gap-1 py-1">
-                  <span className="text-muted-foreground">Position: </span>
-                  <span>{transaction.transactionIndex}</span>
-                </Badge>
-              </div>
-            </GridItem>
+        <GridItem
+          label="Gas Fees"
+          tooltip="Base Fee refers to the network Base Fee at the time of the block, while Max Fee & Max Priority Fee refer to the max amount a user is willing to pay for their tx & to give to the miner respectively."
+        >
+          <p className="flex gap-2.5">
+            <span>Base: {toTokens(block.baseFeePerGas || 0n, 9)} Gwei</span>
 
-            <GridItem
-              label="Input Data"
-              tooltip="Additional data included for this transaction. Commonly used as part of contract interaction or as a message sent to the recipient."
-            >
-              <PlainTextCodeBlock
-                code={transaction.input}
-                className="[&_code]:!whitespace-pre-wrap break-all [&_code]:text-xs text-muted-foreground w-full"
-                scrollableClassName="max-h-[400px] p-2 min-h-[80px]"
-              />
-            </GridItem>
-          </section>
-        </div>
-      </div>
-    </main>
+            {transaction.maxFeePerGas && (
+              <>
+                <span className="text-muted-foreground/50">|</span>
+                <span>
+                  Max: {toTokens(transaction.maxFeePerGas || 0n, 9)} Gwei
+                </span>
+              </>
+            )}
+
+            {transaction.maxPriorityFeePerGas && (
+              <>
+                <span className="text-muted-foreground/50">|</span>
+                <span>
+                  Max priority: {transaction.maxPriorityFeePerGas?.toString()}{" "}
+                  Gwei
+                </span>
+              </>
+            )}
+          </p>
+        </GridItem>
+
+        <GridItem
+          label="Burnt fees"
+          tooltip="The amount of fees that were burnt by the transaction."
+        >
+          <p>{toEther(block.baseFeePerGas || 0n * receipt.gasUsed)}</p>
+        </GridItem>
+      </section>
+
+      {/* section 4 */}
+      <section className="pt-6 space-y-5 lg:space-y-3">
+        <GridItem
+          label="Other Attributes"
+          tooltip="Other data related to this transaction."
+        >
+          <div className="flex gap-2 flex-wrap">
+            <Badge variant="outline" className="gap-1 py-1">
+              <span className="text-muted-foreground">Txn type:</span>
+              <span className="capitalize">
+                {hexToNumber(transaction.typeHex || "0x0")} ({transaction.type})
+              </span>
+            </Badge>
+            <Badge variant="outline" className="gap-1 py-1">
+              <span className="text-muted-foreground">Nonce: </span>
+              <span>{transaction.nonce}</span>
+            </Badge>
+            <Badge variant="outline" className="gap-1 py-1">
+              <span className="text-muted-foreground">Position: </span>
+              <span>{transaction.transactionIndex}</span>
+            </Badge>
+          </div>
+        </GridItem>
+
+        <GridItem
+          label="Input Data"
+          tooltip="Additional data included for this transaction. Commonly used as part of contract interaction or as a message sent to the recipient."
+        >
+          <PlainTextCodeBlock
+            code={transaction.input}
+            className="[&_code]:!whitespace-pre-wrap break-all [&_code]:text-xs text-muted-foreground w-full"
+            scrollableClassName="max-h-[400px] p-2 min-h-[80px]"
+          />
+        </GridItem>
+      </section>
+    </div>
   );
 }
 
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/tabs.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/tabs.tsx
new file mode 100644
index 00000000000..f00cd5db1fb
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/tabs.tsx
@@ -0,0 +1,31 @@
+"use client";
+import { useState } from "react";
+import { TabButtons } from "@/components/ui/tabs";
+
+export function BridgeAndOverviewTabs(props: {
+  bridgeStatus: React.ReactNode;
+  overview: React.ReactNode;
+}) {
+  const [tab, setTab] = useState<"bridge" | "overview">("bridge");
+  return (
+    <div>
+      <TabButtons
+        tabs={[
+          {
+            name: "Bridge",
+            onClick: () => setTab("bridge"),
+            isActive: tab === "bridge",
+          },
+          {
+            name: "Overview",
+            onClick: () => setTab("overview"),
+            isActive: tab === "overview",
+          },
+        ]}
+      />
+      <div className="h-3" />
+      {tab === "bridge" && props.bridgeStatus}
+      {tab === "overview" && props.overview}
+    </div>
+  );
+}