diff --git a/README.md b/README.md
index 68ea7b7..be7f94d 100644
--- a/README.md
+++ b/README.md
@@ -435,7 +435,8 @@ transitions.
 #### TransactionDetail
 
 - **When**: User tapped a transaction row from AddressDetail or AddressToken.
-- **Elements** (grouped into logical blocks separated by thin rules):
+- **Elements** (grouped into logical blocks using light well containers,
+  matching the Settings view pattern):
     - "Transaction" heading, "Back" button
     - **Identity block**:
         - Transaction hash: full hash (tap to copy) + etherscan link
diff --git a/src/popup/index.html b/src/popup/index.html
index 549aed0..5d0adac 100644
--- a/src/popup/index.html
+++ b/src/popup/index.html
@@ -1066,109 +1066,138 @@
                 </h2>
 
                 <!-- ── Identity ── -->
-                <div class="mb-2">
-                    <div class="text-xs text-muted mb-1">Transaction hash</div>
-                    <div id="tx-detail-hash" class="text-xs break-all"></div>
+                <div class="bg-well p-3 mx-1 mb-3">
+                    <h3 class="font-bold mb-1">Identity</h3>
+                    <div class="mb-2">
+                        <div class="text-xs text-muted mb-1">
+                            Transaction hash
+                        </div>
+                        <div
+                            id="tx-detail-hash"
+                            class="text-xs break-all"
+                        ></div>
+                    </div>
+                    <div id="tx-detail-type-section" class="mb-2 hidden">
+                        <div class="text-xs text-muted mb-1">Type</div>
+                        <div
+                            id="tx-detail-type"
+                            class="text-xs font-bold"
+                        ></div>
+                    </div>
+                    <div class="mb-2">
+                        <div class="text-xs text-muted mb-1">Status</div>
+                        <div id="tx-detail-status" class="text-xs"></div>
+                    </div>
                 </div>
-                <div id="tx-detail-type-section" class="mb-2 hidden">
-                    <div class="text-xs text-muted mb-1">Type</div>
-                    <div id="tx-detail-type" class="text-xs font-bold"></div>
-                </div>
-                <div class="mb-2">
-                    <div class="text-xs text-muted mb-1">Status</div>
-                    <div id="tx-detail-status" class="text-xs"></div>
-                </div>
-
-                <hr class="border-border my-3" />
 
                 <!-- ── Timing ── -->
-                <div class="mb-2">
-                    <div class="text-xs text-muted mb-1">Time</div>
-                    <div id="tx-detail-time" class="text-xs"></div>
+                <div class="bg-well p-3 mx-1 mb-3">
+                    <h3 class="font-bold mb-1">Timing</h3>
+                    <div class="mb-2">
+                        <div class="text-xs text-muted mb-1">Time</div>
+                        <div id="tx-detail-time" class="text-xs"></div>
+                    </div>
+                    <div id="tx-detail-block-section" class="mb-2 hidden">
+                        <div class="text-xs text-muted mb-1">Block</div>
+                        <div id="tx-detail-block" class="text-xs"></div>
+                    </div>
                 </div>
-                <div id="tx-detail-block-section" class="mb-2 hidden">
-                    <div class="text-xs text-muted mb-1">Block</div>
-                    <div id="tx-detail-block" class="text-xs"></div>
-                </div>
-
-                <hr class="border-border my-3" />
 
                 <!-- ── Value ── -->
-                <div class="mb-2">
-                    <div class="text-xs text-muted mb-1">Amount</div>
-                    <div id="tx-detail-value" class="text-xs"></div>
-                </div>
-                <div class="mb-2 hidden">
-                    <div class="text-xs text-muted mb-1">Native quantity</div>
-                    <div id="tx-detail-native" class="text-xs"></div>
-                </div>
-                <div id="tx-detail-token-contract-section" class="mb-2 hidden">
-                    <div class="text-xs text-muted mb-1">Token contract</div>
+                <div class="bg-well p-3 mx-1 mb-3">
+                    <h3 class="font-bold mb-1">Value</h3>
+                    <div class="mb-2">
+                        <div class="text-xs text-muted mb-1">Amount</div>
+                        <div id="tx-detail-value" class="text-xs"></div>
+                    </div>
+                    <div class="mb-2 hidden">
+                        <div class="text-xs text-muted mb-1">
+                            Native quantity
+                        </div>
+                        <div id="tx-detail-native" class="text-xs"></div>
+                    </div>
                     <div
-                        id="tx-detail-token-contract"
-                        class="text-xs break-all"
-                    ></div>
-                </div>
-                <div class="mb-2">
-                    <div class="text-xs text-muted mb-1">From</div>
-                    <div id="tx-detail-from" class="text-xs break-all"></div>
-                </div>
-                <div class="mb-2">
-                    <div class="text-xs text-muted mb-1">To</div>
-                    <div id="tx-detail-to" class="text-xs break-all"></div>
+                        id="tx-detail-token-contract-section"
+                        class="mb-2 hidden"
+                    >
+                        <div class="text-xs text-muted mb-1">
+                            Token contract
+                        </div>
+                        <div
+                            id="tx-detail-token-contract"
+                            class="text-xs break-all"
+                        ></div>
+                    </div>
+                    <div class="mb-2">
+                        <div class="text-xs text-muted mb-1">From</div>
+                        <div
+                            id="tx-detail-from"
+                            class="text-xs break-all"
+                        ></div>
+                    </div>
+                    <div class="mb-2">
+                        <div class="text-xs text-muted mb-1">To</div>
+                        <div id="tx-detail-to" class="text-xs break-all"></div>
+                    </div>
                 </div>
 
                 <!-- ── Decoded details ── -->
                 <div id="tx-detail-calldata-section" class="hidden">
-                    <hr class="border-border my-3" />
-                    <div
-                        id="tx-detail-calldata-well"
-                        class="mb-2 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 class="bg-well p-3 mx-1 mb-3">
+                        <h3 class="font-bold mb-1">Decoded Details</h3>
+                        <div id="tx-detail-calldata-well" class="mb-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>
                 </div>
 
                 <!-- ── Network details ── -->
                 <div id="tx-detail-network-section" class="hidden">
-                    <hr class="border-border my-3" />
-                    <div id="tx-detail-nonce-section" class="mb-2 hidden">
-                        <div class="text-xs text-muted mb-1">Nonce</div>
-                        <div id="tx-detail-nonce" class="text-xs"></div>
-                    </div>
-                    <div id="tx-detail-gasprice-section" class="mb-2 hidden">
-                        <div class="text-xs text-muted mb-1">Gas price</div>
-                        <div id="tx-detail-gasprice" class="text-xs"></div>
-                    </div>
-                    <div id="tx-detail-gasused-section" class="mb-2 hidden">
-                        <div class="text-xs text-muted mb-1">Gas used</div>
-                        <div id="tx-detail-gasused" class="text-xs"></div>
-                    </div>
-                    <div id="tx-detail-fee-section" class="mb-2 hidden">
-                        <div class="text-xs text-muted mb-1">
-                            Transaction fee
+                    <div class="bg-well p-3 mx-1 mb-3">
+                        <h3 class="font-bold mb-1">Network Details</h3>
+                        <div id="tx-detail-nonce-section" class="mb-2 hidden">
+                            <div class="text-xs text-muted mb-1">Nonce</div>
+                            <div id="tx-detail-nonce" class="text-xs"></div>
+                        </div>
+                        <div
+                            id="tx-detail-gasprice-section"
+                            class="mb-2 hidden"
+                        >
+                            <div class="text-xs text-muted mb-1">Gas price</div>
+                            <div id="tx-detail-gasprice" class="text-xs"></div>
+                        </div>
+                        <div id="tx-detail-gasused-section" class="mb-2 hidden">
+                            <div class="text-xs text-muted mb-1">Gas used</div>
+                            <div id="tx-detail-gasused" class="text-xs"></div>
+                        </div>
+                        <div id="tx-detail-fee-section" class="mb-2 hidden">
+                            <div class="text-xs text-muted mb-1">
+                                Transaction fee
+                            </div>
+                            <div id="tx-detail-fee" class="text-xs"></div>
                         </div>
-                        <div id="tx-detail-fee" class="text-xs"></div>
                     </div>
                 </div>
 
                 <!-- ── Raw data ── -->
                 <div id="tx-detail-rawdata-section" class="hidden">
-                    <hr class="border-border my-3" />
-                    <div class="mb-2">
-                        <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 class="bg-well p-3 mx-1 mb-3">
+                        <h3 class="font-bold mb-1">Raw Data</h3>
+                        <div class="mb-2">
+                            <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>
             </div>