diff --git a/src/popup/index.html b/src/popup/index.html
index e0c6130..bc25e3d 100644
--- a/src/popup/index.html
+++ b/src/popup/index.html
@@ -952,13 +952,27 @@
                     <div id="tx-detail-to" class="text-xs break-all"></div>
                 </div>
                 <div id="tx-detail-calldata-section" class="mb-4 hidden">
-                    <div class="text-xs text-muted mb-1">
-                        Contract interaction
-                    </div>
                     <div
-                        id="tx-detail-calldata"
-                        class="text-xs break-all border border-border border-dashed p-2"
-                    ></div>
+                        id="tx-detail-calldata-well"
+                        class="mb-3 border border-border border-dashed p-2"
+                    >
+                        <div class="text-xs text-muted mb-1">Action</div>
+                        <div
+                            id="tx-detail-calldata-action"
+                            class="text-xs font-bold mb-2"
+                        ></div>
+                        <div
+                            id="tx-detail-calldata-details"
+                            class="text-xs"
+                        ></div>
+                    </div>
+                    <div id="tx-detail-rawdata-section" class="hidden">
+                        <div class="text-xs text-muted mb-1">Raw data</div>
+                        <div
+                            id="tx-detail-rawdata"
+                            class="text-xs break-all font-mono border border-border border-dashed p-2"
+                        ></div>
+                    </div>
                 </div>
                 <div class="mb-4">
                     <div class="text-xs text-muted mb-1">Transaction hash</div>
diff --git a/src/popup/views/transactionDetail.js b/src/popup/views/transactionDetail.js
index 70d4af2..43d482d 100644
--- a/src/popup/views/transactionDetail.js
+++ b/src/popup/views/transactionDetail.js
@@ -164,28 +164,14 @@ function render() {
         });
 }
 
-function renderDecodedCalldata(decoded) {
-    let html = `<div class="font-bold mb-1">${escapeHtml(decoded.name)}</div>`;
-    if (decoded.description) {
-        html += `<div class="text-muted mb-1">${escapeHtml(decoded.description)}</div>`;
-    }
-    for (const detail of decoded.details || []) {
-        html += `<div class="mb-1"><span class="text-muted">${escapeHtml(detail.label)}:</span> `;
-        if (detail.address) {
-            const dot = addressDotHtml(detail.address);
-            html += `${dot}${copyableHtml(detail.value, "break-all")}`;
-        } else {
-            html += escapeHtml(detail.value);
-        }
-        html += `</div>`;
-    }
-    return html;
-}
-
 async function loadCalldata(txHash, toAddress) {
     const section = $("tx-detail-calldata-section");
-    const container = $("tx-detail-calldata");
-    if (!section || !container) return;
+    const actionEl = $("tx-detail-calldata-action");
+    const detailsEl = $("tx-detail-calldata-details");
+    const wellEl = $("tx-detail-calldata-well");
+    const rawSection = $("tx-detail-rawdata-section");
+    const rawEl = $("tx-detail-rawdata");
+    if (!section || !actionEl || !detailsEl) return;
 
     try {
         const resp = await debugFetch(
@@ -198,14 +184,39 @@ async function loadCalldata(txHash, toAddress) {
 
         const decoded = decodeCalldata(inputData, toAddress || "");
         if (decoded) {
-            container.innerHTML = renderDecodedCalldata(decoded);
+            // Render decoded calldata matching approval view style
+            actionEl.textContent = decoded.name;
+            let detailsHtml = "";
+            if (decoded.description) {
+                detailsHtml += `<div class="mb-2">${escapeHtml(decoded.description)}</div>`;
+            }
+            for (const d of decoded.details || []) {
+                detailsHtml += `<div class="mb-2">`;
+                detailsHtml += `<div class="text-muted">${escapeHtml(d.label)}</div>`;
+                if (d.address) {
+                    const dot = addressDotHtml(d.address);
+                    detailsHtml += `<div>${dot}${copyableHtml(d.value, "break-all")}</div>`;
+                } else {
+                    detailsHtml += `<div class="font-bold">${escapeHtml(d.value)}</div>`;
+                }
+                detailsHtml += `</div>`;
+            }
+            detailsEl.innerHTML = detailsHtml;
+            if (wellEl) wellEl.classList.remove("hidden");
         } else {
-            const method = txData.method || "Unknown method";
-            let html = `<div class="font-bold mb-1">Unknown contract call</div>`;
-            html += `<div class="text-muted mb-1">${escapeHtml(method)}</div>`;
-            html += `<div class="break-all font-mono text-xs">${copyableHtml(inputData, "break-all")}</div>`;
-            container.innerHTML = html;
+            // Unknown contract call — show method name in well
+            const method = txData.method || "Unknown contract call";
+            actionEl.textContent = method;
+            detailsEl.innerHTML = "";
+            if (wellEl) wellEl.classList.remove("hidden");
         }
+
+        // Always show raw data
+        if (rawSection && rawEl) {
+            rawEl.innerHTML = copyableHtml(inputData, "break-all");
+            rawSection.classList.remove("hidden");
+        }
+
         section.classList.remove("hidden");
 
         // Bind copy handlers for new elements