diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/tx/[id]/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/tx/[id]/page.tsx
index 02ad3c9aec2..f76e1cea6e4 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/tx/[id]/page.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/tx/[id]/page.tsx
@@ -1,14 +1,180 @@
 import { loginRedirect } from "@app/login/loginRedirect";
+import type { AbiFunction } from "abitype";
 import { notFound, redirect } from "next/navigation";
+import { getContract, toTokens } from "thirdweb";
+import { defineChain, getChainMetadata } from "thirdweb/chains";
+import { getCompilerMetadata } from "thirdweb/contract";
+import {
+  decodeFunctionData,
+  shortenAddress,
+  toFunctionSelector,
+} from "thirdweb/utils";
 import { getAuthToken } from "@/api/auth-token";
 import { getProject } from "@/api/projects";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
+import { serverThirdwebClient } from "@/constants/thirdweb-client.server";
+import type { Transaction } from "../../analytics/tx-table/types";
 import {
   getSingleTransaction,
   getTransactionActivityLogs,
 } from "../../lib/analytics";
 import { TransactionDetailsUI } from "./transaction-details-ui";
 
+type AbiItem =
+  | AbiFunction
+  | {
+      type: string;
+      name?: string;
+    };
+
+export type DecodedTransactionData = {
+  chainId: number;
+  contractAddress: string;
+  value: string;
+  contractName: string;
+  functionName: string;
+  functionArgs: Record<string, unknown>;
+} | null;
+
+export type DecodedTransactionResult = DecodedTransactionData[];
+
+async function decodeSingleTransactionParam(
+  txParam: {
+    to: string;
+    data: `0x${string}`;
+    value: string;
+  },
+  chainId: number,
+): Promise<DecodedTransactionData> {
+  try {
+    if (!txParam || !txParam.to || !txParam.data) {
+      return null;
+    }
+
+    // eslint-disable-next-line no-restricted-syntax
+    const chain = defineChain(chainId);
+
+    // Create contract instance
+    const contract = getContract({
+      address: txParam.to,
+      chain,
+      client: serverThirdwebClient,
+    });
+
+    // Fetch compiler metadata
+    const chainMetadata = await getChainMetadata(chain);
+
+    const txValue = `${txParam.value ? toTokens(BigInt(txParam.value), chainMetadata.nativeCurrency.decimals) : "0"} ${chainMetadata.nativeCurrency.symbol}`;
+
+    if (txParam.data === "0x") {
+      return {
+        chainId,
+        contractAddress: txParam.to,
+        contractName: shortenAddress(txParam.to),
+        functionArgs: {},
+        functionName: "Transfer",
+        value: txValue,
+      };
+    }
+
+    const compilerMetadata = await getCompilerMetadata(contract);
+
+    if (!compilerMetadata || !compilerMetadata.abi) {
+      return null;
+    }
+
+    const contractName = compilerMetadata.name || "Unknown Contract";
+    const abi = compilerMetadata.abi;
+
+    // Extract function selector from transaction data (first 4 bytes)
+    const functionSelector = txParam.data.slice(0, 10) as `0x${string}`;
+
+    // Find matching function in ABI
+    const functions = (abi as readonly AbiItem[]).filter(
+      (item): item is AbiFunction => item.type === "function",
+    );
+    let matchingFunction: AbiFunction | null = null;
+
+    for (const func of functions) {
+      const selector = toFunctionSelector(func);
+      if (selector === functionSelector) {
+        matchingFunction = func;
+        break;
+      }
+    }
+
+    if (!matchingFunction) {
+      return null;
+    }
+
+    const functionName = matchingFunction.name;
+
+    // Decode function data
+    const decodedArgs = (await decodeFunctionData({
+      contract: getContract({
+        ...contract,
+        abi: [matchingFunction],
+      }),
+      data: txParam.data,
+    })) as readonly unknown[];
+
+    // Create a clean object for display
+    const functionArgs: Record<string, unknown> = {};
+    if (matchingFunction.inputs && decodedArgs) {
+      for (let index = 0; index < matchingFunction.inputs.length; index++) {
+        const input = matchingFunction.inputs[index];
+        if (input) {
+          functionArgs[input.name || `arg${index}`] = decodedArgs[index];
+        }
+      }
+    }
+
+    return {
+      chainId,
+      contractAddress: txParam.to,
+      contractName,
+      functionArgs,
+      functionName,
+      value: txValue,
+    };
+  } catch (error) {
+    console.error("Error decoding transaction param:", error);
+    return null;
+  }
+}
+
+async function decodeTransactionData(
+  transaction: Transaction,
+): Promise<DecodedTransactionResult> {
+  try {
+    // Check if we have transaction parameters
+    if (
+      !transaction.transactionParams ||
+      transaction.transactionParams.length === 0
+    ) {
+      return [];
+    }
+
+    // Ensure we have a chainId
+    if (!transaction.chainId) {
+      return [];
+    }
+
+    const chainId = parseInt(transaction.chainId);
+
+    // Decode all transaction parameters in parallel
+    const decodingPromises = transaction.transactionParams.map((txParam) =>
+      decodeSingleTransactionParam(txParam, chainId),
+    );
+
+    const results = await Promise.all(decodingPromises);
+    return results;
+  } catch (error) {
+    console.error("Error decoding transaction:", error);
+    return [];
+  }
+}
+
 export default async function TransactionPage({
   params,
 }: {
@@ -51,11 +217,15 @@ export default async function TransactionPage({
     notFound();
   }
 
+  // Decode transaction data on the server
+  const decodedTransactionData = await decodeTransactionData(transactionData);
+
   return (
     <div className="space-y-6 p-2">
       <TransactionDetailsUI
         activityLogs={activityLogs}
         client={client}
+        decodedTransactionData={decodedTransactionData}
         project={project}
         teamSlug={team_slug}
         transaction={transactionData}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/tx/[id]/transaction-details-ui.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/tx/[id]/transaction-details-ui.tsx
index 8d5f2957691..0851bef4466 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/tx/[id]/transaction-details-ui.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/tx/[id]/transaction-details-ui.tsx
@@ -10,6 +10,7 @@ import {
 import Link from "next/link";
 import { useState } from "react";
 import { hexToNumber, isHex, type ThirdwebClient, toEther } from "thirdweb";
+import { stringify } from "thirdweb/utils";
 import type { Project } from "@/api/projects";
 import { WalletAddress } from "@/components/blocks/wallet-address";
 import { Badge } from "@/components/ui/badge";
@@ -17,23 +18,27 @@ import { Button } from "@/components/ui/button";
 import { CopyTextButton } from "@/components/ui/CopyTextButton";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { CodeClient } from "@/components/ui/code/code.client";
+import { TabButtons } from "@/components/ui/tabs";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import { useAllChainsData } from "@/hooks/chains/allChains";
 import { ChainIconClient } from "@/icons/ChainIcon";
 import { statusDetails } from "../../analytics/tx-table/tx-table-ui";
 import type { Transaction } from "../../analytics/tx-table/types";
 import type { ActivityLogEntry } from "../../lib/analytics";
+import type { DecodedTransactionData, DecodedTransactionResult } from "./page";
 
 export function TransactionDetailsUI({
   transaction,
   client,
   activityLogs,
+  decodedTransactionData,
 }: {
   transaction: Transaction;
   teamSlug: string;
   client: ThirdwebClient;
   project: Project;
   activityLogs: ActivityLogEntry[];
+  decodedTransactionData: DecodedTransactionResult;
 }) {
   const { idToChain } = useAllChainsData();
 
@@ -243,24 +248,10 @@ export function TransactionDetailsUI({
             </div>
           </CardContent>
         </Card>
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-lg">Transaction Parameters</CardTitle>
-          </CardHeader>
-          <CardContent>
-            {transaction.transactionParams &&
-            transaction.transactionParams.length > 0 ? (
-              <CodeClient
-                code={JSON.stringify(transaction.transactionParams, null, 2)}
-                lang="json"
-              />
-            ) : (
-              <p className="text-muted-foreground text-sm">
-                No transaction parameters available
-              </p>
-            )}
-          </CardContent>
-        </Card>
+        <TransactionParametersCard
+          decodedTransactionData={decodedTransactionData}
+          transaction={transaction}
+        />
         {errorMessage && (
           <Card className="border-destructive">
             <CardHeader>
@@ -271,7 +262,7 @@ export function TransactionDetailsUI({
             <CardContent>
               {errorDetails ? (
                 <CodeClient
-                  code={JSON.stringify(errorDetails, null, 2)}
+                  code={stringify(errorDetails, null, 2)}
                   lang="json"
                 />
               ) : (
@@ -376,6 +367,171 @@ export function TransactionDetailsUI({
   );
 }
 
+// Transaction Parameters Card with Tabs
+function TransactionParametersCard({
+  transaction,
+  decodedTransactionData,
+}: {
+  transaction: Transaction;
+  decodedTransactionData: DecodedTransactionResult;
+}) {
+  const [activeTab, setActiveTab] = useState<"decoded" | "raw">("decoded");
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-lg">Transaction Parameters</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <TabButtons
+          tabClassName="!text-sm"
+          tabs={[
+            {
+              isActive: activeTab === "decoded",
+              name: "Decoded",
+              onClick: () => setActiveTab("decoded"),
+            },
+            {
+              isActive: activeTab === "raw",
+              name: "Raw",
+              onClick: () => setActiveTab("raw"),
+            },
+          ]}
+        />
+
+        {activeTab === "decoded" ? (
+          <DecodedTransactionListDisplay
+            decodedDataList={decodedTransactionData}
+            onSwitchToRaw={() => setActiveTab("raw")}
+          />
+        ) : (
+          <div>
+            {transaction.transactionParams &&
+            transaction.transactionParams.length > 0 ? (
+              <CodeClient
+                code={stringify(transaction.transactionParams, null, 2)}
+                lang="json"
+              />
+            ) : (
+              <p className="text-muted-foreground text-sm">
+                No transaction parameters available
+              </p>
+            )}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+// Client component to display list of decoded transaction data
+function DecodedTransactionListDisplay({
+  decodedDataList,
+  onSwitchToRaw,
+}: {
+  decodedDataList: DecodedTransactionResult;
+  onSwitchToRaw: () => void;
+}) {
+  if (decodedDataList.length === 0) {
+    return (
+      <p className="text-muted-foreground text-sm">
+        Unable to decode transaction data. The contract may not have verified
+        metadata available.{" "}
+        <button
+          className="text-foreground underline-offset-4 hover:underline cursor-pointer"
+          onClick={onSwitchToRaw}
+          type="button"
+        >
+          View raw transaction data
+        </button>
+        .
+      </p>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {decodedDataList.map(
+        (decodedData: DecodedTransactionData, index: number) => {
+          return (
+            <div
+              key={`transaction-${index}-${decodedData?.contractName}-${decodedData?.functionName}-${stringify(decodedData?.functionArgs)}`}
+            >
+              {index > 0 && <div className="border-t border-border my-6" />}
+              <DecodedTransactionDisplay
+                decodedData={decodedData}
+                onSwitchToRaw={onSwitchToRaw}
+              />
+            </div>
+          );
+        },
+      )}
+    </div>
+  );
+}
+
+// Client component to display decoded transaction data
+function DecodedTransactionDisplay({
+  decodedData,
+  onSwitchToRaw,
+}: {
+  decodedData: DecodedTransactionData;
+  onSwitchToRaw: () => void;
+}) {
+  if (!decodedData) {
+    return (
+      <div className="space-y-4">
+        <p className="text-muted-foreground text-sm">
+          Unable to decode transaction data. The contract may not have verified
+          metadata available.{" "}
+          <button
+            className="text-foreground underline-offset-4 hover:underline cursor-pointer"
+            onClick={onSwitchToRaw}
+            type="button"
+          >
+            View raw transaction data
+          </button>
+          .
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-row">
+        <div className="flex flex-col flex-1">
+          <div className="text-muted-foreground text-sm">Target</div>
+          <div className="font-mono text-sm">
+            <Link
+              className="underline"
+              href={`/${decodedData.chainId}/${decodedData.contractAddress}`}
+              target="_blank"
+            >
+              {decodedData.contractName}
+            </Link>
+          </div>
+        </div>
+        <div className="flex flex-col flex-1">
+          <div className="text-muted-foreground text-sm">Function</div>
+          <div className="font-mono text-sm">{decodedData.functionName}</div>
+        </div>
+        <div className="flex flex-col flex-1">
+          <div className="text-muted-foreground text-sm">Value</div>
+          <div className="font-mono text-sm">{decodedData.value}</div>
+        </div>
+      </div>
+      <div className="flex flex-col gap-2">
+        <div className="text-muted-foreground text-sm">Arguments</div>
+        <CodeClient
+          code={stringify(decodedData.functionArgs, null, 2)}
+          lang="json"
+        />
+      </div>
+    </div>
+  );
+}
+
 // Activity Log Timeline Component
 function ActivityLogCard({
   activityLogs,