diff --git a/src/app/swap/[id]/_components/SwapDetailSummary/SwapDetail.type.ts b/src/app/swap/[id]/_components/SwapDetailSummary/SwapDetail.type.ts
index 9dd08e7..bf7b8b0 100644
--- a/src/app/swap/[id]/_components/SwapDetailSummary/SwapDetail.type.ts
+++ b/src/app/swap/[id]/_components/SwapDetailSummary/SwapDetail.type.ts
@@ -1,7 +1,6 @@
 import { DetailsType } from 'src/types';
 
 export interface PropsType {
-  details: DetailsType;
   id: string;
 }
 
diff --git a/src/app/swap/[id]/_components/SwapDetailSummary/index.tsx b/src/app/swap/[id]/_components/SwapDetailSummary/index.tsx
index cd744eb..47f901f 100644
--- a/src/app/swap/[id]/_components/SwapDetailSummary/index.tsx
+++ b/src/app/swap/[id]/_components/SwapDetailSummary/index.tsx
@@ -2,9 +2,18 @@ import React from 'react';
 import { DesktopColumns, mobileColumns } from './SwapDetail.helper';
 import { PropsType } from './SwapDetail.type';
 import ButtonCopyIcon from 'src/components/common/ButtonCopyIcon';
+import { getTxDetails } from 'src/services';
+import { notFound } from 'next/navigation';
+
+async function SwapDetailSummary(props: PropsType) {
+  const { id } = props;
+
+  const details = await getTxDetails(props.id);
+
+  if (details.message === 'Transaction not found!') {
+    notFound();
+  }
 
-function SwapDetailSummary(props: PropsType) {
-  const { details, id } = props;
   const { from, to } = details;
 
   return (
diff --git a/src/app/swap/[id]/_components/SwapSteps/SwapSteps.type.ts b/src/app/swap/[id]/_components/SwapSteps/SwapSteps.type.ts
index 82d8709..f8932f6 100644
--- a/src/app/swap/[id]/_components/SwapSteps/SwapSteps.type.ts
+++ b/src/app/swap/[id]/_components/SwapSteps/SwapSteps.type.ts
@@ -1,7 +1,7 @@
 import { AssetType, ExplorerUrlsType, StepType, SwapStatus } from 'src/types';
 
 export interface PropsType {
-  steps: StepType[];
+  id: string;
 }
 
 export interface SwapStepItemProps {
diff --git a/src/app/swap/[id]/_components/SwapSteps/index.tsx b/src/app/swap/[id]/_components/SwapSteps/index.tsx
index 84dbc8f..897a69d 100644
--- a/src/app/swap/[id]/_components/SwapSteps/index.tsx
+++ b/src/app/swap/[id]/_components/SwapSteps/index.tsx
@@ -2,9 +2,18 @@ import React from 'react';
 import { PropsType } from './SwapSteps.type';
 import SwapStepItem from './SwapStepItem';
 import { StepType } from 'src/types';
+import { getTxDetails } from 'src/services';
+import { notFound } from 'next/navigation';
+
+async function SwapSteps(props: PropsType) {
+  const details = await getTxDetails(props.id);
+
+  if (details.message === 'Transaction not found!') {
+    notFound();
+  }
+
+  const { steps } = details;
 
-function SwapSteps(props: PropsType) {
-  const { steps } = props;
   return (
     <div className="w-full bg-baseForeground px-15 py-20 md:p-35 mt-20 md:mt-[40px] rounded-soft md:rounded-normal">
       <h2 className="text-12 md:text-28 font-semibold text-primary-500">
diff --git a/src/app/swap/[id]/page.tsx b/src/app/swap/[id]/page.tsx
index bb1d9c3..a19c2a0 100644
--- a/src/app/swap/[id]/page.tsx
+++ b/src/app/swap/[id]/page.tsx
@@ -1,9 +1,8 @@
 import { ChevronRightIcon } from 'src/components/icons';
 import Link from 'next/link';
-import { notFound } from 'next/navigation';
-import { getTxDetails } from 'src/services';
 import SwapDetailSummary from './_components/SwapDetailSummary';
 import SwapSteps from './_components/SwapSteps';
+import { Suspense } from 'react';
 
 export async function generateMetadata({ params }: { params: { id: string } }) {
   return {
@@ -12,12 +11,6 @@ export async function generateMetadata({ params }: { params: { id: string } }) {
 }
 
 const Page = async ({ params }: { params: { id: string } }) => {
-  const details = await getTxDetails(params.id);
-
-  if (details.message === 'Transaction not found!') {
-    notFound();
-  }
-
   return (
     <div>
       <div className="w-full flex justify-center">
@@ -32,8 +25,10 @@ const Page = async ({ params }: { params: { id: string } }) => {
             </span>
           </div>
 
-          <SwapDetailSummary id={params.id} details={details} />
-          <SwapSteps steps={details.steps} />
+          <Suspense>
+            <SwapDetailSummary id={params.id} />
+            <SwapSteps id={params.id} />
+          </Suspense>
         </div>
       </div>
     </div>