diff --git a/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx b/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx
index 8ec6d98..09f8ff1 100644
--- a/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx
+++ b/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx
@@ -747,7 +747,7 @@ const DetailTransaction = () => {
                                                 <th className="px-4 py-2 text-left text-sm text-gray-500">Type</th>
                                                 <th className="px-4 py-2 text-left text-sm text-gray-500">Request Date</th>
                                                 <th className="px-4 py-2 text-left text-sm text-gray-500">Response Date</th>
-                                                {/* <th className="px-4 py-2 text-left text-sm text-gray-500">Response Body</th> */}
+                                                <th className="px-4 py-2 text-left text-sm text-gray-500">Response Body</th>
                                                 <th className="px-4 py-2 text-left text-sm text-gray-500">Response Code</th>
                                                 <th className="px-4 py-2 text-left text-sm text-gray-500">Request Endpoint</th>
                                             </tr>
@@ -780,15 +780,35 @@ const DetailTransaction = () => {
                                                             })
                                                             : ''}</td>
                                                         <td className="px-4 py-2 text-sm text-gray-500">
-                                                            {
-                                                                JSON.stringify(log.request_body ?? '', null, 2)
-                                                            }
-
+                                                            <pre style={{ fontFamily: 'monospace', whiteSpace: 'pre-wrap' }}>
+                                                                {(() => {
+                                                                    try {
+                                                                        if (log.response_code === null) {
+                                                                            return '';
+                                                                        }
+                                                                        const parsed = JSON.parse(log.request_body);
+                                                                        return JSON.stringify(parsed, null, 2);
+                                                                    } catch (e) {
+                                                                        return log.request_body; // fallback: tampilkan as-is jika gagal parse
+                                                                    }
+                                                                })()}
+                                                            </pre>
                                                         </td>
                                                         <td className="px-4 py-2 text-sm text-gray-500">
-                                                            {
-                                                                JSON.stringify(log.response_body ?? '', null, 2)
-                                                            }
+                                                            <pre style={{ fontFamily: 'monospace', whiteSpace: 'pre-wrap' }}>
+                                                                {(() => {
+                                                                    try {
+                                                                        if (log.request_body === null) {
+                                                                            return '';
+                                                                        }
+                                                                        const parsed = JSON.parse(log.request_body);
+                                                                        return JSON.stringify(parsed, null, 2) ?? '';
+                                                                    } catch (e) {
+                                                                        return log.response_body ?? ''; // fallback: tampilkan as-is jika gagal parse
+                                                                    }
+                                                                })()}
+                                                            </pre>
+
                                                         </td>
 
                                                         <td className="px-4 py-2 text-sm text-gray-500">{log.request_endpoint || ''}</td>
@@ -883,7 +903,7 @@ const DetailTransaction = () => {
                                                     <th className="px-4 py-2 text-left text-sm text-gray-500">Type</th>
                                                     <th className="px-4 py-2 text-left text-sm text-gray-500">Request Date</th>
                                                     <th className="px-4 py-2 text-left text-sm text-gray-500">Response Date</th>
-                                                    {/* <th className="px-4 py-2 text-left text-sm text-gray-500">Response Body</th> */}
+                                                    <th className="px-4 py-2 text-left text-sm text-gray-500">Response Body</th>
                                                     <th className="px-4 py-2 text-left text-sm text-gray-500">Response Code</th>
                                                     <th className="px-4 py-2 text-left text-sm text-gray-500">Request Endpoint</th>
                                                 </tr>
@@ -917,15 +937,35 @@ const DetailTransaction = () => {
                                                                 })
                                                                 : ''}</td>
                                                             <td className="px-4 py-2 text-sm text-gray-500">
-                                                                {
-                                                                    JSON.stringify(log.request_body ?? '', null, 2)
-                                                                }
-
+                                                                <pre style={{ fontFamily: 'monospace', whiteSpace: 'pre-wrap' }}>
+                                                                    {(() => {
+                                                                        try {
+                                                                            if (log.response_code === null) {
+                                                                                return '';
+                                                                            }
+                                                                            const parsed = JSON.parse(log.request_body);
+                                                                            return JSON.stringify(parsed, null, 2);
+                                                                        } catch (e) {
+                                                                            return log.request_body; // fallback: tampilkan as-is jika gagal parse
+                                                                        }
+                                                                    })()}
+                                                                </pre>
                                                             </td>
                                                             <td className="px-4 py-2 text-sm text-gray-500">
-                                                                {
-                                                                    JSON.stringify(log.response_body ?? '', null, 2)
-                                                                }
+                                                                <pre style={{ fontFamily: 'monospace', whiteSpace: 'pre-wrap' }}>
+                                                                    {(() => {
+                                                                        try {
+                                                                            if (log.request_body === null) {
+                                                                                return '';
+                                                                            }
+                                                                            const parsed = JSON.parse(log.request_body);
+                                                                            return JSON.stringify(parsed, null, 2) ?? '';
+                                                                        } catch (e) {
+                                                                            return log.response_body ?? ''; // fallback: tampilkan as-is jika gagal parse
+                                                                        }
+                                                                    })()}
+                                                                </pre>
+
                                                             </td>
 
                                                             <td className="px-4 py-2 text-sm text-gray-500">{log.request_endpoint ?? ''}</td>