diff --git a/optuna_dashboard/ts/components/GraphEdf.tsx b/optuna_dashboard/ts/components/GraphEdf.tsx
index a23856d3..b2f3d9f2 100644
--- a/optuna_dashboard/ts/components/GraphEdf.tsx
+++ b/optuna_dashboard/ts/components/GraphEdf.tsx
@@ -63,11 +63,6 @@ export const Edf: FC<{
           id={plotDomId}
           sx={{
             height: "450px",
-            backgroundColor:
-              theme.palette.mode === "dark"
-                ? "rgba(256, 256, 256, 0.05)"
-                : "rgba(0, 0, 0, 0.05)",
-            borderRadius: "5px",
           }}
         />
       </Grid>
diff --git a/optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx b/optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx
index c4713b80..cd033dda 100644
--- a/optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx
+++ b/optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx
@@ -113,11 +113,6 @@ export const GraphHyperparameterImportances: FC<{
           id={plotDomId}
           sx={{
             height: "450px",
-            backgroundColor:
-              theme.palette.mode === "dark"
-                ? "rgba(256, 256, 256, 0.05)"
-                : "rgba(0, 0, 0, 0.05)",
-            borderRadius: "5px",
           }}
         />
       </Grid>
diff --git a/optuna_dashboard/ts/components/GraphIntermediateValues.tsx b/optuna_dashboard/ts/components/GraphIntermediateValues.tsx
index cf3a38ed..6f60bae9 100644
--- a/optuna_dashboard/ts/components/GraphIntermediateValues.tsx
+++ b/optuna_dashboard/ts/components/GraphIntermediateValues.tsx
@@ -27,11 +27,6 @@ export const GraphIntermediateValues: FC<{
           id={plotDomId}
           sx={{
             height: "450px",
-            backgroundColor:
-              theme.palette.mode === "dark"
-                ? "rgba(256, 256, 256, 0.05)"
-                : "rgba(0, 0, 0, 0.05)",
-            borderRadius: "5px",
           }}
         />
       </Grid>
diff --git a/optuna_dashboard/ts/components/GraphParallelCoordinate.tsx b/optuna_dashboard/ts/components/GraphParallelCoordinate.tsx
index 8af447e2..9bbf997d 100644
--- a/optuna_dashboard/ts/components/GraphParallelCoordinate.tsx
+++ b/optuna_dashboard/ts/components/GraphParallelCoordinate.tsx
@@ -64,11 +64,6 @@ export const GraphParallelCoordinate: FC<{
           id={plotDomId}
           sx={{
             height: "450px",
-            backgroundColor:
-              theme.palette.mode === "dark"
-                ? "rgba(256, 256, 256, 0.05)"
-                : "rgba(0, 0, 0, 0.05)",
-            borderRadius: "5px",
           }}
         />
       </Grid>
diff --git a/optuna_dashboard/ts/components/GraphParetoFront.tsx b/optuna_dashboard/ts/components/GraphParetoFront.tsx
index 77795c6d..f5aeb8a4 100644
--- a/optuna_dashboard/ts/components/GraphParetoFront.tsx
+++ b/optuna_dashboard/ts/components/GraphParetoFront.tsx
@@ -38,12 +38,12 @@ export const GraphParetoFront: FC<{
 
   return (
     <Grid container direction="row">
-      {study !== null && study.directions.length !== 1 ? (
-        <Grid item xs={3}>
-          <Grid container direction="column">
-            <Typography variant="h6" sx={{ margin: "1em 0", fontWeight: 600 }}>
-              Pareto Front
-            </Typography>
+      <Grid item xs={3} container direction="column">
+        <Typography variant="h6" sx={{ margin: "1em 0", fontWeight: 600 }}>
+          Pareto Front
+        </Typography>
+        {study !== null && study.directions.length !== 1 ? (
+          <>
             <FormControl
               component="fieldset"
               sx={{
@@ -76,19 +76,14 @@ export const GraphParetoFront: FC<{
                 ))}
               </Select>
             </FormControl>
-          </Grid>
-        </Grid>
-      ) : null}
+          </>
+        ) : null}
+      </Grid>
       <Grid item xs={9}>
         <Box
           id={plotDomId}
           sx={{
             height: "450px",
-            backgroundColor:
-              theme.palette.mode === "dark"
-                ? "rgba(256, 256, 256, 0.05)"
-                : "rgba(0, 0, 0, 0.05)",
-            borderRadius: "5px",
           }}
         />
       </Grid>
diff --git a/optuna_dashboard/ts/components/GraphSlice.tsx b/optuna_dashboard/ts/components/GraphSlice.tsx
index 5c5d1735..69b629d0 100644
--- a/optuna_dashboard/ts/components/GraphSlice.tsx
+++ b/optuna_dashboard/ts/components/GraphSlice.tsx
@@ -128,11 +128,6 @@ export const GraphSlice: FC<{
           id={plotDomId}
           sx={{
             height: "450px",
-            backgroundColor:
-              theme.palette.mode === "dark"
-                ? "rgba(256, 256, 256, 0.05)"
-                : "rgba(0, 0, 0, 0.05)",
-            borderRadius: "5px",
           }}
         />
       </Grid>
diff --git a/optuna_dashboard/ts/components/StudyDetail.tsx b/optuna_dashboard/ts/components/StudyDetail.tsx
index 1715e09d..b477be5a 100644
--- a/optuna_dashboard/ts/components/StudyDetail.tsx
+++ b/optuna_dashboard/ts/components/StudyDetail.tsx
@@ -39,21 +39,22 @@ import { GraphHistory } from "./GraphHistory"
 import { GraphParetoFront } from "./GraphParetoFront"
 import { Note } from "./Note"
 import { actionCreator } from "../action"
-import { studyDetailsState } from "../state"
+import { studyDetailsState, studySummariesState } from "../state"
 
 interface ParamTypes {
   studyId: string
 }
 
-const isSingleObjectiveStudy = (studyDetail: StudyDetail): boolean => {
-  return studyDetail.directions.length === 1
-}
-
-export const useStudyDetailValue = (studyId: number): StudyDetail | null => {
+const useStudyDetailValue = (studyId: number): StudyDetail | null => {
   const studyDetails = useRecoilValue<StudyDetails>(studyDetailsState)
   return studyDetails[studyId] || null
 }
 
+const useStudySummaryValue = (studyId: number): StudySummary | null => {
+  const studySummaries = useRecoilValue<StudySummary[]>(studySummariesState)
+  return studySummaries.find((s) => s.study_id == studyId) || null
+}
+
 interface Preference {
   graphHistoryChecked: boolean
   graphParetoFrontChecked: boolean
@@ -74,6 +75,8 @@ export const StudyDetail: FC<{
   const { studyId } = useParams<ParamTypes>()
   const studyIdNumber = parseInt(studyId, 10)
   const studyDetail = useStudyDetailValue(studyIdNumber)
+  const studySummary = useStudySummaryValue(studyIdNumber)
+  const directions = studyDetail?.directions || studySummary?.directions || null
 
   const [preferences, setPreferences] = useState<Preference>({
     graphHistoryChecked: true,
@@ -169,9 +172,7 @@ export const StudyDetail: FC<{
               label="History"
             />
             <FormControlLabel
-              disabled={
-                studyDetail !== null && isSingleObjectiveStudy(studyDetail)
-              }
+              disabled={directions?.length === 1}
               control={
                 <Checkbox
                   checked={preferences.graphParetoFrontChecked}
@@ -194,7 +195,7 @@ export const StudyDetail: FC<{
             <FormControlLabel
               disabled={
                 studyDetail !== null &&
-                (!isSingleObjectiveStudy(studyDetail) ||
+                (studyDetail.directions.length > 1 ||
                   !studyDetail.has_intermediate_values)
               }
               control={
@@ -341,8 +342,8 @@ export const StudyDetail: FC<{
             </Card>
           ) : null}
 
-          {studyDetail !== null &&
-          !isSingleObjectiveStudy(studyDetail) &&
+          {directions !== null &&
+          directions.length > 1 &&
           preferences.graphParetoFrontChecked ? (
             <Card sx={{ margin: theme.spacing(2) }}>
               <CardContent>
@@ -359,7 +360,7 @@ export const StudyDetail: FC<{
           ) : null}
 
           {studyDetail !== null &&
-          isSingleObjectiveStudy(studyDetail) &&
+          studyDetail.directions.length == 1 &&
           studyDetail.has_intermediate_values &&
           preferences.graphIntermediateValuesChecked ? (
             <Card sx={{ margin: theme.spacing(2) }}>
@@ -503,7 +504,7 @@ export const TrialTable: FC<{ studyDetail: StudyDetail | null }> = ({
       toCellValue: (i) => trials[i].state.toString(),
     },
   ]
-  if (studyDetail === null || isSingleObjectiveStudy(studyDetail)) {
+  if (studyDetail === null || studyDetail.directions.length == 1) {
     columns.push({
       field: "values",
       label: "Value",