diff --git a/optuna_dashboard/ts/components/GraphEdf.tsx b/optuna_dashboard/ts/components/GraphEdf.tsx
index b2f3d9f2..ae1cffec 100644
--- a/optuna_dashboard/ts/components/GraphEdf.tsx
+++ b/optuna_dashboard/ts/components/GraphEdf.tsx
@@ -32,39 +32,31 @@ export const Edf: FC<{
   }, [study, objectiveId, theme.palette.mode])
   return (
     <Grid container direction="row">
-      <Grid item xs={3}>
-        <Grid container direction="column">
-          <Typography variant="h6" sx={{ margin: "1em 0", fontWeight: 600 }}>
-            EDF
-          </Typography>
-          {study !== null && study.directions.length !== 1 ? (
-            <FormControl
-              component="fieldset"
-              sx={{
-                marginBottom: theme.spacing(2),
-                marginRight: theme.spacing(5),
-              }}
-            >
-              <FormLabel component="legend">Objective ID:</FormLabel>
-              <Select value={objectiveId} onChange={handleObjectiveChange}>
-                {study.directions.map((d, i) => (
-                  <MenuItem value={i} key={i}>
-                    {i}
-                  </MenuItem>
-                ))}
-              </Select>
-            </FormControl>
-          ) : null}
-        </Grid>
+      <Grid
+        item
+        xs={3}
+        container
+        direction="column"
+        sx={{ paddingRight: theme.spacing(2) }}
+      >
+        <Typography variant="h6" sx={{ margin: "1em 0", fontWeight: 600 }}>
+          EDF
+        </Typography>
+        {study !== null && study.directions.length !== 1 ? (
+          <FormControl component="fieldset">
+            <FormLabel component="legend">Objective ID:</FormLabel>
+            <Select value={objectiveId} onChange={handleObjectiveChange}>
+              {study.directions.map((d, i) => (
+                <MenuItem value={i} key={i}>
+                  {i}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+        ) : null}
       </Grid>
-
       <Grid item xs={9}>
-        <Box
-          id={plotDomId}
-          sx={{
-            height: "450px",
-          }}
-        />
+        <Box id={plotDomId} sx={{ height: "450px" }} />
       </Grid>
     </Grid>
   )
diff --git a/optuna_dashboard/ts/components/GraphHistory.tsx b/optuna_dashboard/ts/components/GraphHistory.tsx
index 757a800a..9d341c6a 100644
--- a/optuna_dashboard/ts/components/GraphHistory.tsx
+++ b/optuna_dashboard/ts/components/GraphHistory.tsx
@@ -76,90 +76,94 @@ export const GraphHistory: FC<{
 
   return (
     <Grid container direction="row">
-      <Grid item xs={3}>
-        <Grid container direction="column">
-          <Typography variant="h6" sx={{ margin: "1em 0", fontWeight: 600 }}>
-            History
-          </Typography>
-          {study !== null && study.directions.length !== 1 ? (
-            <FormControl
-              component="fieldset"
-              sx={{ marginBottom: theme.spacing(2) }}
-            >
-              <FormLabel component="legend">Objective ID:</FormLabel>
-              <Select value={objectiveId} onChange={handleObjectiveChange}>
-                {study.directions.map((d, i) => (
-                  <MenuItem value={i} key={i}>
-                    {i}
-                  </MenuItem>
-                ))}
-              </Select>
-            </FormControl>
-          ) : null}
+      <Grid
+        item
+        xs={3}
+        container
+        direction="column"
+        sx={{ paddingRight: theme.spacing(2) }}
+      >
+        <Typography variant="h6" sx={{ margin: "1em 0", fontWeight: 600 }}>
+          History
+        </Typography>
+        {study !== null && study.directions.length !== 1 ? (
           <FormControl
             component="fieldset"
             sx={{ marginBottom: theme.spacing(2) }}
           >
-            <FormLabel component="legend">Log y scale:</FormLabel>
-            <Switch
-              checked={logScale}
-              onChange={handleLogScaleChange}
-              value="enable"
-            />
+            <FormLabel component="legend">Objective ID:</FormLabel>
+            <Select value={objectiveId} onChange={handleObjectiveChange}>
+              {study.directions.map((d, i) => (
+                <MenuItem value={i} key={i}>
+                  {i}
+                </MenuItem>
+              ))}
+            </Select>
           </FormControl>
-          <FormControl
-            component="fieldset"
-            sx={{ marginBottom: theme.spacing(2) }}
+        ) : null}
+        <FormControl
+          component="fieldset"
+          sx={{ marginBottom: theme.spacing(2) }}
+        >
+          <FormLabel component="legend">Log y scale:</FormLabel>
+          <Switch
+            checked={logScale}
+            onChange={handleLogScaleChange}
+            value="enable"
+          />
+        </FormControl>
+        <FormControl
+          component="fieldset"
+          sx={{ marginBottom: theme.spacing(2) }}
+        >
+          <FormLabel component="legend">Filter state:</FormLabel>
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={!filterCompleteTrial}
+                onChange={handleFilterCompleteChange}
+              />
+            }
+            label="Complete"
+          />
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={!filterPrunedTrial}
+                onChange={handleFilterPrunedChange}
+              />
+            }
+            label="Pruned"
+          />
+        </FormControl>
+        <FormControl
+          component="fieldset"
+          sx={{ marginBottom: theme.spacing(2) }}
+        >
+          <FormLabel component="legend">X-axis:</FormLabel>
+          <RadioGroup
+            aria-label="gender"
+            name="gender1"
+            value={xAxis}
+            onChange={handleXAxisChange}
           >
-            <FormLabel component="legend">Filter state:</FormLabel>
             <FormControlLabel
-              control={
-                <Checkbox
-                  checked={!filterCompleteTrial}
-                  onChange={handleFilterCompleteChange}
-                />
-              }
-              label="Complete"
+              value="number"
+              control={<Radio />}
+              label="Number"
             />
             <FormControlLabel
-              control={
-                <Checkbox
-                  checked={!filterPrunedTrial}
-                  onChange={handleFilterPrunedChange}
-                />
-              }
-              label="Pruned"
+              value="datetime_start"
+              control={<Radio />}
+              label="Datetime start"
             />
-          </FormControl>
-          <FormControl
-            component="fieldset"
-            sx={{ marginBottom: theme.spacing(2) }}
-          >
-            <FormLabel component="legend">X-axis:</FormLabel>
-            <RadioGroup
-              aria-label="gender"
-              name="gender1"
-              value={xAxis}
-              onChange={handleXAxisChange}
-            >
-              <FormControlLabel
-                value="number"
-                control={<Radio />}
-                label="Number"
-              />
-              <FormControlLabel
-                value="datetime_start"
-                control={<Radio />}
-                label="Datetime start"
-              />
-              <FormControlLabel
-                value="datetime_complete"
-                control={<Radio />}
-                label="Datetime complete"
-              />
-            </RadioGroup>
-          </FormControl>
-        </Grid>
+            <FormControlLabel
+              value="datetime_complete"
+              control={<Radio />}
+              label="Datetime complete"
+            />
+          </RadioGroup>
+        </FormControl>
       </Grid>
       <Grid item xs={9}>
         <div id={plotDomId} />
diff --git a/optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx b/optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx
index cd033dda..84ec0b72 100644
--- a/optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx
+++ b/optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx
@@ -82,39 +82,31 @@ export const GraphHyperparameterImportances: FC<{
 
   return (
     <Grid container direction="row">
-      <Grid item xs={3}>
-        <Grid container direction="column">
-          <Typography variant="h6" sx={{ margin: "1em 0", fontWeight: 600 }}>
-            Hyperparameter importance
-          </Typography>
-          {study !== null && study.directions.length !== 1 ? (
-            <FormControl
-              component="fieldset"
-              sx={{
-                marginBottom: theme.spacing(2),
-                marginRight: theme.spacing(5),
-              }}
-            >
-              <FormLabel component="legend">Objective ID:</FormLabel>
-              <Select value={objectiveId} onChange={handleObjectiveChange}>
-                {study.directions.map((d, i) => (
-                  <MenuItem value={i} key={i}>
-                    {i}
-                  </MenuItem>
-                ))}
-              </Select>
-            </FormControl>
-          ) : null}
-        </Grid>
+      <Grid
+        item
+        xs={3}
+        container
+        direction="column"
+        sx={{ paddingRight: theme.spacing(2) }}
+      >
+        <Typography variant="h6" sx={{ margin: "1em 0", fontWeight: 600 }}>
+          Hyperparameter importance
+        </Typography>
+        {study !== null && study.directions.length !== 1 ? (
+          <FormControl component="fieldset">
+            <FormLabel component="legend">Objective ID:</FormLabel>
+            <Select value={objectiveId} onChange={handleObjectiveChange}>
+              {study.directions.map((d, i) => (
+                <MenuItem value={i} key={i}>
+                  {i}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+        ) : null}
       </Grid>
-
       <Grid item xs={9}>
-        <Box
-          id={plotDomId}
-          sx={{
-            height: "450px",
-          }}
-        />
+        <Box id={plotDomId} sx={{ height: "450px" }} />
       </Grid>
     </Grid>
   )
diff --git a/optuna_dashboard/ts/components/GraphIntermediateValues.tsx b/optuna_dashboard/ts/components/GraphIntermediateValues.tsx
index 6f60bae9..f5251ef6 100644
--- a/optuna_dashboard/ts/components/GraphIntermediateValues.tsx
+++ b/optuna_dashboard/ts/components/GraphIntermediateValues.tsx
@@ -14,21 +14,19 @@ export const GraphIntermediateValues: FC<{
   }, [trials, theme.palette.mode])
   return (
     <Grid container direction="row">
-      <Grid item xs={3}>
-        <Grid container direction="column">
-          <Typography variant="h6" sx={{ margin: "1em 0", fontWeight: 600 }}>
-            Intermediate values
-          </Typography>
-        </Grid>
+      <Grid
+        item
+        xs={3}
+        container
+        direction="column"
+        sx={{ paddingRight: theme.spacing(2) }}
+      >
+        <Typography variant="h6" sx={{ margin: "1em 0", fontWeight: 600 }}>
+          Intermediate values
+        </Typography>
       </Grid>
-
       <Grid item xs={9}>
-        <Box
-          id={plotDomId}
-          sx={{
-            height: "450px",
-          }}
-        />
+        <Box id={plotDomId} sx={{ height: "450px" }} />
       </Grid>
     </Grid>
   )
diff --git a/optuna_dashboard/ts/components/GraphParallelCoordinate.tsx b/optuna_dashboard/ts/components/GraphParallelCoordinate.tsx
index 9bbf997d..93d78e7a 100644
--- a/optuna_dashboard/ts/components/GraphParallelCoordinate.tsx
+++ b/optuna_dashboard/ts/components/GraphParallelCoordinate.tsx
@@ -33,39 +33,31 @@ export const GraphParallelCoordinate: FC<{
 
   return (
     <Grid container direction="row">
-      <Grid item xs={3}>
-        <Grid container direction="column">
-          <Typography variant="h6" sx={{ margin: "1em 0", fontWeight: 600 }}>
-            Parallel Coordinate
-          </Typography>
-          {study !== null && study.directions.length !== 1 ? (
-            <FormControl
-              component="fieldset"
-              sx={{
-                marginBottom: theme.spacing(2),
-                marginRight: theme.spacing(5),
-              }}
-            >
-              <FormLabel component="legend">Objective ID:</FormLabel>
-              <Select value={objectiveId} onChange={handleObjectiveChange}>
-                {study.directions.map((d, i) => (
-                  <MenuItem value={i} key={i}>
-                    {i}
-                  </MenuItem>
-                ))}
-              </Select>
-            </FormControl>
-          ) : null}
-        </Grid>
+      <Grid
+        item
+        xs={3}
+        container
+        direction="column"
+        sx={{ paddingRight: theme.spacing(2) }}
+      >
+        <Typography variant="h6" sx={{ margin: "1em 0", fontWeight: 600 }}>
+          Parallel Coordinate
+        </Typography>
+        {study !== null && study.directions.length !== 1 ? (
+          <FormControl component="fieldset">
+            <FormLabel component="legend">Objective ID:</FormLabel>
+            <Select value={objectiveId} onChange={handleObjectiveChange}>
+              {study.directions.map((d, i) => (
+                <MenuItem value={i} key={i}>
+                  {i}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+        ) : null}
       </Grid>
-
       <Grid item xs={9}>
-        <Box
-          id={plotDomId}
-          sx={{
-            height: "450px",
-          }}
-        />
+        <Box id={plotDomId} sx={{ height: "450px" }} />
       </Grid>
     </Grid>
   )
diff --git a/optuna_dashboard/ts/components/GraphParetoFront.tsx b/optuna_dashboard/ts/components/GraphParetoFront.tsx
index f5aeb8a4..5d4fe1b2 100644
--- a/optuna_dashboard/ts/components/GraphParetoFront.tsx
+++ b/optuna_dashboard/ts/components/GraphParetoFront.tsx
@@ -38,19 +38,19 @@ export const GraphParetoFront: FC<{
 
   return (
     <Grid container direction="row">
-      <Grid item xs={3} container direction="column">
+      <Grid
+        item
+        xs={3}
+        container
+        direction="column"
+        sx={{ paddingRight: theme.spacing(2) }}
+      >
         <Typography variant="h6" sx={{ margin: "1em 0", fontWeight: 600 }}>
           Pareto Front
         </Typography>
         {study !== null && study.directions.length !== 1 ? (
           <>
-            <FormControl
-              component="fieldset"
-              sx={{
-                marginBottom: theme.spacing(2),
-                marginRight: theme.spacing(5),
-              }}
-            >
+            <FormControl component="fieldset">
               <FormLabel component="legend">Objective X ID:</FormLabel>
               <Select value={objectiveXId} onChange={handleObjectiveXChange}>
                 {study.directions.map((d, i) => (
@@ -60,13 +60,7 @@ export const GraphParetoFront: FC<{
                 ))}
               </Select>
             </FormControl>
-            <FormControl
-              component="fieldset"
-              sx={{
-                marginBottom: theme.spacing(2),
-                marginRight: theme.spacing(5),
-              }}
-            >
+            <FormControl component="fieldset">
               <FormLabel component="legend">Objective Y ID:</FormLabel>
               <Select value={objectiveYId} onChange={handleObjectiveYChange}>
                 {study.directions.map((d, i) => (
diff --git a/optuna_dashboard/ts/components/GraphSlice.tsx b/optuna_dashboard/ts/components/GraphSlice.tsx
index 69b629d0..945b5c7d 100644
--- a/optuna_dashboard/ts/components/GraphSlice.tsx
+++ b/optuna_dashboard/ts/components/GraphSlice.tsx
@@ -68,68 +68,49 @@ export const GraphSlice: FC<{
 
   return (
     <Grid container direction="row">
-      <Grid item xs={3}>
-        <Grid container direction="column">
-          <Typography variant="h6" sx={{ margin: "1em 0", fontWeight: 600 }}>
-            Slice
-          </Typography>
-          {study !== null && study.directions.length !== 1 ? (
-            <FormControl
-              component="fieldset"
-              sx={{
-                marginBottom: theme.spacing(2),
-                marginRight: theme.spacing(5),
-              }}
-            >
-              <FormLabel component="legend">Objective ID:</FormLabel>
-              <Select value={objectiveId} onChange={handleObjectiveChange}>
-                {study.directions.map((d, i) => (
-                  <MenuItem value={i} key={i}>
-                    {i}
-                  </MenuItem>
-                ))}
-              </Select>
-            </FormControl>
-          ) : null}
-          <FormControl
-            component="fieldset"
-            sx={{
-              marginBottom: theme.spacing(2),
-              marginRight: theme.spacing(5),
-            }}
-          >
-            <InputLabel id="parameter">Parameter</InputLabel>
-            <Select value={selected || ""} onChange={handleSelectedParam}>
-              {paramNames?.map((p, i) => (
-                <MenuItem value={p} key={i}>
-                  {p}
+      <Grid
+        item
+        xs={3}
+        container
+        direction="column"
+        sx={{ paddingRight: theme.spacing(2) }}
+      >
+        <Typography variant="h6" sx={{ margin: "1em 0", fontWeight: 600 }}>
+          Slice
+        </Typography>
+        {study !== null && study.directions.length !== 1 ? (
+          <FormControl component="fieldset">
+            <FormLabel component="legend">Objective ID:</FormLabel>
+            <Select value={objectiveId} onChange={handleObjectiveChange}>
+              {study.directions.map((d, i) => (
+                <MenuItem value={i} key={i}>
+                  {i}
                 </MenuItem>
               ))}
             </Select>
           </FormControl>
-          <FormControl
-            component="fieldset"
-            sx={{
-              marginBottom: theme.spacing(2),
-              marginRight: theme.spacing(5),
-            }}
-          >
-            <FormLabel component="legend">Log y scale:</FormLabel>
-            <Switch
-              checked={logYScale}
-              onChange={handleLogYScaleChange}
-              value="enable"
-            />
-          </FormControl>
-        </Grid>
+        ) : null}
+        <FormControl component="fieldset">
+          <InputLabel id="parameter">Parameter</InputLabel>
+          <Select value={selected || ""} onChange={handleSelectedParam}>
+            {paramNames?.map((p, i) => (
+              <MenuItem value={p} key={i}>
+                {p}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+        <FormControl component="fieldset">
+          <FormLabel component="legend">Log y scale:</FormLabel>
+          <Switch
+            checked={logYScale}
+            onChange={handleLogYScaleChange}
+            value="enable"
+          />
+        </FormControl>
       </Grid>
       <Grid item xs={9}>
-        <Box
-          id={plotDomId}
-          sx={{
-            height: "450px",
-          }}
-        />
+        <Box id={plotDomId} sx={{ height: "450px" }} />
       </Grid>
     </Grid>
   )