diff --git a/src/pages/dataset/detail/[id].tsx b/src/pages/dataset/detail/[id].tsx
index f16c99f..fce2202 100644
--- a/src/pages/dataset/detail/[id].tsx
+++ b/src/pages/dataset/detail/[id].tsx
@@ -31,61 +31,65 @@ export default () => {
         useState<ValueFields<DatasetMetadata>>()
     const [datasetProofMeta, setDatasetProofMeta] =
         useState<ValueFields<DatasetProofMetadata>>()
-
-    const tabItems = convertDataToItems({
-        messasge: (
-            <MessageTable
-                queryParam={{
-                    network: "calibration",
-                    queryFilter: {
-                        ...defaultTableQueryParams,
-                        conditions: [{ datasetId: id }],
-                    },
-                }}
-            />
-        ),
-        car: (
-            <CarTable
-                queryParam={{
-                    network: "calibration",
-                    queryFilter: {
-                        ...defaultTableQueryParams,
-                        conditions: [{ datasetId: id }],
-                    },
-                }}
-            />
-        ),
-        // requirement: (
-        //     <DatasetRequirementBasicTable
-        //         queryParam={{
-        //             network: "calibration",
-        //             queryFilter: {
-        //                 ...defaultTableQueryParams,
-        //                 conditions: [{ datasetId: id }],
-        //             },
-        //         }}
-        //     />
-        // ),
-    })
+    const [tabItems, setTabItems] = useState<any>()
 
     useEffect(() => {
-        getDatasetMetadata({
-            network: "calibration",
-            queryFilter: { conditions: [{ datasetId: id }] },
-        }).then((res) => {
-            const datasetMetadata = res.data
-            //TODO
-            setDatasetMetadata(datasetMetadata![0])
-        })
-        getDatasetProofMetadata({
-            network: "calibration",
-            queryFilter: { conditions: [{ datasetId: id }] },
-        }).then((res) => {
-            const datasetMetadata = res.data
-            //TODO
-            setDatasetProofMeta(datasetMetadata![0])
-        })
-    }, [])
+        if (id) {
+            getDatasetMetadata({
+                network: "calibration",
+                queryFilter: { conditions: [{ datasetId: id }] },
+            }).then((res) => {
+                const datasetMetadata = res.data
+                //TODO
+                setDatasetMetadata(datasetMetadata![0])
+            })
+            getDatasetProofMetadata({
+                network: "calibration",
+                queryFilter: { conditions: [{ datasetId: id }] },
+            }).then((res) => {
+                const datasetMetadata = res.data
+                //TODO
+                setDatasetProofMeta(datasetMetadata![0])
+            })
+            setTabItems(
+                convertDataToItems({
+                    messasge: (
+                        <MessageTable
+                            queryParam={{
+                                network: "calibration",
+                                queryFilter: {
+                                    ...defaultTableQueryParams,
+                                    conditions: [{ datasetId: id }],
+                                },
+                            }}
+                        />
+                    ),
+                    car: (
+                        <CarTable
+                            queryParam={{
+                                network: "calibration",
+                                queryFilter: {
+                                    ...defaultTableQueryParams,
+                                    conditions: [{ datasetId: id }],
+                                },
+                            }}
+                        />
+                    ),
+                    // requirement: (
+                    //     <DatasetRequirementBasicTable
+                    //         queryParam={{
+                    //             network: "calibration",
+                    //             queryFilter: {
+                    //                 ...defaultTableQueryParams,
+                    //                 conditions: [{ datasetId: id }],
+                    //             },
+                    //         }}
+                    //     />
+                    // ),
+                })
+            )
+        }
+    }, [id])
 
     return (
         <>
diff --git a/src/pages/matching/detail/[id].tsx b/src/pages/matching/detail/[id].tsx
index 38966cf..e5593fe 100644
--- a/src/pages/matching/detail/[id].tsx
+++ b/src/pages/matching/detail/[id].tsx
@@ -21,36 +21,45 @@ export default () => {
     const router = useRouter()
     const { id } = router.query
     const [overview, setOverview] = useState<ValueFields<MatchingMetadata>>()
-
-    const tabItems = convertDataToItems({
-        messasge: (
-            <MessageBasicPage
-                queryParam={{
-                    network: "calibration",
-                    queryFilter: { conditions: [{ matchingId: id }] },
-                }}
-            />
-        ),
-        carReplica: (
-            <CarReplicaPage
-                queryParam={{
-                    network: "calibration",
-                    queryFilter: { conditions: [{ matchingId: id }] },
-                }}
-            />
-        ),
-    })
+    const [tabItems, setTabItems] = useState<any>()
 
     useEffect(() => {
-        getMatchingMetadata({
-            network: "calibration",
-            queryFilter: { conditions: [{ matchingId: id }] },
-        }).then((res) => {
-            const datasetMetadata = res.data
-            //TODO
-            setOverview(datasetMetadata![0])
-        })
-    }, [])
+        if (id) {
+            setTabItems(
+                convertDataToItems({
+                    messasge: (
+                        <MessageBasicPage
+                            queryParam={{
+                                network: "calibration",
+                                queryFilter: {
+                                    conditions: [{ matchingId: id }],
+                                },
+                            }}
+                        />
+                    ),
+                    carReplica: (
+                        <CarReplicaPage
+                            queryParam={{
+                                network: "calibration",
+                                queryFilter: {
+                                    conditions: [{ matchingId: id }],
+                                },
+                            }}
+                        />
+                    ),
+                })
+            )
+
+            getMatchingMetadata({
+                network: "calibration",
+                queryFilter: { conditions: [{ matchingId: id }] },
+            }).then((res) => {
+                const datasetMetadata = res.data
+                //TODO
+                setOverview(datasetMetadata![0])
+            })
+        }
+    }, [id])
 
     return (
         <>
diff --git a/src/pages/message/detail/[id].tsx b/src/pages/message/detail/[id].tsx
index f3a85de..1e19b4b 100644
--- a/src/pages/message/detail/[id].tsx
+++ b/src/pages/message/detail/[id].tsx
@@ -12,15 +12,17 @@ export default () => {
         useState<ValueFields<DataswapMessage>>()
 
     useEffect(() => {
-        getDataswapMessage({
-            network: "calibration",
-            queryFilter: { conditions: [{ cid: { "/": id } }] },
-        }).then((res) => {
-            const datasetMetadata = res.data
-            //TODO
-            setDatasetMetadata(datasetMetadata![0])
-        })
-    }, [])
+        if (id) {
+            getDataswapMessage({
+                network: "calibration",
+                queryFilter: { conditions: [{ cid: { "/": id } }] },
+            }).then((res) => {
+                const datasetMetadata = res.data
+                //TODO
+                setDatasetMetadata(datasetMetadata![0])
+            })
+        }
+    }, [id])
 
     return (
         <>{datasetMetadata && <MessageDescription data={datasetMetadata} />}</>