diff --git a/optuna_dashboard/ts/components/AppDrawer.tsx b/optuna_dashboard/ts/components/AppDrawer.tsx
index c08309bc..79f7d615 100644
--- a/optuna_dashboard/ts/components/AppDrawer.tsx
+++ b/optuna_dashboard/ts/components/AppDrawer.tsx
@@ -18,6 +18,7 @@ import {
   drawerOpenState,
   reloadIntervalState,
   useStudyDetailValue,
+  useStudySummaryValue,
 } from "../state"
 import { Link } from "react-router-dom"
 import AutoGraphIcon from "@mui/icons-material/AutoGraph"
@@ -38,13 +39,7 @@ import { actionCreator } from "../action"
 
 const drawerWidth = 240
 
-export type PageId =
-  | "top"
-  | "analytics"
-  | "trialTable"
-  | "trialList"
-  | "note"
-  | "preference"
+export type PageId = "top" | "analytics" | "trialTable" | "trialList" | "note"
 
 const openedMixin = (theme: Theme): CSSObject => ({
   width: drawerWidth,
@@ -128,7 +123,10 @@ export const AppDrawer: FC<{
   const reloadInterval = useRecoilValue<number>(reloadIntervalState)
   const studyDetail =
     studyId !== undefined ? useStudyDetailValue(studyId) : null
-  const is_preferential = studyDetail?.is_preferential ?? false
+  const studySummary =
+    studyId !== undefined ? useStudySummaryValue(studyId) : null
+  const isPreferential =
+    studyDetail?.is_preferential ?? studySummary?.is_preferential ?? false
 
   const styleListItem = {
     display: "block",
@@ -198,15 +196,15 @@ export const AppDrawer: FC<{
                 selected={page === "top"}
               >
                 <ListItemIcon sx={styleListItemIcon}>
-                  {is_preferential ? <ThumbUpAltIcon /> : <AutoGraphIcon />}
+                  {isPreferential ? <ThumbUpAltIcon /> : <AutoGraphIcon />}
                 </ListItemIcon>
                 <ListItemText
-                  primary={is_preferential ? "HumanInTheLoop" : "History"}
+                  primary={isPreferential ? "HumanInTheLoop" : "History"}
                   sx={styleListItemText}
                 />
               </ListItemButton>
             </ListItem>
-            {studyDetail !== null && !studyDetail.is_preferential && (
+            {!isPreferential && (
               <ListItem key="Analytics" disablePadding sx={styleListItem}>
                 <ListItemButton
                   component={Link}
diff --git a/optuna_dashboard/ts/components/StudyDetail.tsx b/optuna_dashboard/ts/components/StudyDetail.tsx
index f19ed996..10619227 100644
--- a/optuna_dashboard/ts/components/StudyDetail.tsx
+++ b/optuna_dashboard/ts/components/StudyDetail.tsx
@@ -19,6 +19,7 @@ import {
   reloadIntervalState,
   useStudyDetailValue,
   useStudyName,
+  useStudySummaryValue,
 } from "../state"
 import { TrialTable } from "./TrialTable"
 import { AppDrawer, PageId } from "./AppDrawer"
@@ -48,8 +49,11 @@ export const StudyDetail: FC<{
   const action = actionCreator()
   const studyId = useURLVars()
   const studyDetail = useStudyDetailValue(studyId)
+  const studySummary = useStudySummaryValue(studyId)
   const reloadInterval = useRecoilValue<number>(reloadIntervalState)
   const studyName = useStudyName(studyId)
+  const isPreferential =
+    studySummary?.is_preferential ?? studyDetail?.is_preferential ?? false
 
   const title =
     studyName !== null ? `${studyName} (id=${studyId})` : `Study #${studyId}`
@@ -70,8 +74,8 @@ export const StudyDetail: FC<{
     // For Human-in-the-loop Optimization, the interval is set to 2 seconds
     // when the number of trials is small, and the page is "trialList" or top page of preferential.
     if (
-      (!studyDetail?.is_preferential && page === "trialList") ||
-      (studyDetail?.is_preferential && page === "top")
+      (!isPreferential && page === "trialList") ||
+      (isPreferential && page === "top")
     ) {
       if (nTrials < 100) {
         interval = 2000
@@ -88,7 +92,7 @@ export const StudyDetail: FC<{
 
   let content = null
   if (page === "top") {
-    content = studyDetail?.is_preferential ? (
+    content = isPreferential ? (
       <PreferentialTrials studyDetail={studyDetail} />
     ) : (
       <StudyHistory studyId={studyId} />