diff --git a/optuna_dashboard/ts/components/StudyDetail.tsx b/optuna_dashboard/ts/components/StudyDetail.tsx
index d49d0906..652400fe 100644
--- a/optuna_dashboard/ts/components/StudyDetail.tsx
+++ b/optuna_dashboard/ts/components/StudyDetail.tsx
@@ -16,6 +16,7 @@ import { Link, useParams } from "react-router-dom"
 import { useRecoilValue } from "recoil"
 
 import { TrialTable } from "@optuna/react"
+import * as Optuna from "@optuna/types"
 import { actionCreator } from "../action"
 import { useConstants } from "../constantsProvider"
 import {
@@ -61,6 +62,19 @@ export const StudyDetail: FC<{
   const reloadInterval = useRecoilValue<number>(reloadIntervalState)
   const studyName = useStudyName(studyId)
   const isPreferential = useStudyIsPreferential(studyId)
+  const study: Optuna.Study | null = studyDetail
+    ? {
+        id: studyDetail.id,
+        name: studyDetail.name,
+        directions: studyDetail.directions,
+        union_search_space: studyDetail.union_search_space,
+        intersection_search_space: studyDetail.intersection_search_space,
+        union_user_attrs: studyDetail.union_user_attrs,
+        datetime_start: studyDetail.datetime_start,
+        trials: studyDetail.trials,
+        metric_names: studyDetail.objective_names,
+      }
+    : null
 
   const title =
     studyName !== null ? `${studyName} (id=${studyId})` : `Study #${studyId}`
@@ -168,7 +182,7 @@ export const StudyDetail: FC<{
     )
   } else if (page === "trialList") {
     content = <TrialList studyDetail={studyDetail} />
-  } else if (page === "trialTable") {
+  } else if (page === "trialTable" && study !== null) {
     content = (
       <Box
         component="div"
@@ -176,7 +190,7 @@ export const StudyDetail: FC<{
       >
         <Card sx={{ margin: theme.spacing(2) }}>
           <CardContent>
-            <TrialTable studyDetail={studyDetail} />
+            <TrialTable study={study} />
             <Button
               variant="outlined"
               startIcon={<DownloadIcon />}