diff --git a/packages/apps/src/components/record-detail.tsx b/packages/apps/src/components/record-detail.tsx
index c72602574..c4596c453 100644
--- a/packages/apps/src/components/record-detail.tsx
+++ b/packages/apps/src/components/record-detail.tsx
@@ -19,6 +19,7 @@ import { BaseBridge } from "@/bridges/base";
 import { getCrossChain } from "@/utils/cross-chain";
 import { bridgeFactory } from "@/utils/bridge";
 import CountdownRefresh from "@/ui/countdown-refresh";
+import TransactionFee from "./transaction-fee";
 
 const crossChain = getCrossChain();
 
@@ -127,7 +128,7 @@ export default function RecordDetail(props: Props) {
             <TransactionValue record={record?.historyRecordById} />
           </Section>
           <Section label="Transaction Fee" tips="Amount paid for processing the cross-chain transaction.">
-            <TransactionValue record={record?.historyRecordById} />
+            <TransactionFee record={record?.historyRecordById} />
           </Section>
 
           <Divider />