diff --git a/optuna_dashboard/ts/action.ts b/optuna_dashboard/ts/action.ts
index 43fd76a2..dfe28f44 100644
--- a/optuna_dashboard/ts/action.ts
+++ b/optuna_dashboard/ts/action.ts
@@ -34,7 +34,15 @@ import {
   studySummariesLoadingState,
 } from "./state"
 import { getDominatedTrials } from "./dominatedTrials"
-import { Artifact, FeedbackComponentType, Note, StudyDetail, StudyDetails, StudySummary, Trial } from "./types"
+import {
+  Artifact,
+  FeedbackComponentType,
+  Note,
+  StudyDetail,
+  StudyDetails,
+  StudySummary,
+  Trial,
+} from "./types"
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export const actionCreator = () => {
diff --git a/optuna_dashboard/ts/apiClient.ts b/optuna_dashboard/ts/apiClient.ts
index 1fd04ff4..6df9d1ff 100644
--- a/optuna_dashboard/ts/apiClient.ts
+++ b/optuna_dashboard/ts/apiClient.ts
@@ -1,7 +1,22 @@
 import * as plotly from "plotly.js-dist-min"
 import axios from "axios"
 import * as Optuna from "@optuna/types"
-import { API_ENDPOINT, Artifact, FeedbackComponentType, FormWidgets, Note, ParamImportance, PlotlyGraphObject, PreferenceFeedbackMode, PreferenceHistory, SearchSpaceItem, StudyDetail, StudySummary, Trial, TrialParam } from "./types"
+import {
+  API_ENDPOINT,
+  Artifact,
+  FeedbackComponentType,
+  FormWidgets,
+  Note,
+  ParamImportance,
+  PlotlyGraphObject,
+  PreferenceFeedbackMode,
+  PreferenceHistory,
+  SearchSpaceItem,
+  StudyDetail,
+  StudySummary,
+  Trial,
+  TrialParam,
+} from "./types"
 
 const axiosInstance = axios.create({ baseURL: API_ENDPOINT })
 
diff --git a/optuna_dashboard/ts/components/Artifact/StudyArtifactCards.tsx b/optuna_dashboard/ts/components/Artifact/StudyArtifactCards.tsx
index cf41b8a4..d4e3599a 100644
--- a/optuna_dashboard/ts/components/Artifact/StudyArtifactCards.tsx
+++ b/optuna_dashboard/ts/components/Artifact/StudyArtifactCards.tsx
@@ -41,7 +41,10 @@ export const StudyArtifactCards: FC<{ study: StudyDetail }> = ({ study }) => {
 
   return (
     <>
-      <Box component="div" sx={{ display: "flex", flexWrap: "wrap", p: theme.spacing(1, 0) }}>
+      <Box
+        component="div"
+        sx={{ display: "flex", flexWrap: "wrap", p: theme.spacing(1, 0) }}
+      >
         {study.artifacts.map((artifact) => {
           const urlPath = `/artifacts/${study.id}/${artifact.artifact_id}`
           return (
diff --git a/optuna_dashboard/ts/components/Artifact/TrialArtifactCards.tsx b/optuna_dashboard/ts/components/Artifact/TrialArtifactCards.tsx
index efe85871..e8f3bc8b 100644
--- a/optuna_dashboard/ts/components/Artifact/TrialArtifactCards.tsx
+++ b/optuna_dashboard/ts/components/Artifact/TrialArtifactCards.tsx
@@ -50,7 +50,10 @@ export const TrialArtifactCards: FC<{ trial: Trial }> = ({ trial }) => {
       >
         Artifacts
       </Typography>
-      <Box component="div" sx={{ display: "flex", flexWrap: "wrap", p: theme.spacing(1, 0) }}>
+      <Box
+        component="div"
+        sx={{ display: "flex", flexWrap: "wrap", p: theme.spacing(1, 0) }}
+      >
         {trial.artifacts.map((artifact) => {
           const urlPath = `/artifacts/${trial.study_id}/${trial.trial_id}/${artifact.artifact_id}`
           return (
diff --git a/optuna_dashboard/ts/components/Preferential/PreferentialTrials.tsx b/optuna_dashboard/ts/components/Preferential/PreferentialTrials.tsx
index b8a56d16..b900202d 100644
--- a/optuna_dashboard/ts/components/Preferential/PreferentialTrials.tsx
+++ b/optuna_dashboard/ts/components/Preferential/PreferentialTrials.tsx
@@ -34,7 +34,14 @@ import {
   useThreejsArtifactModal,
 } from "../Artifact/ThreejsArtifactViewer"
 import { PreferentialOutputComponent } from "./PreferentialOutputComponent"
-import { Artifact, FeedbackComponentArtifact, FeedbackComponentNote, FeedbackComponentType, StudyDetail, Trial } from "ts/types"
+import {
+  Artifact,
+  FeedbackComponentArtifact,
+  FeedbackComponentNote,
+  FeedbackComponentType,
+  StudyDetail,
+  Trial,
+} from "ts/types"
 
 const SettingsPage: FC<{
   studyDetail: StudyDetail
@@ -246,7 +253,7 @@ const PreferentialTrial: FC<{
     >
       <CardActions>
         <Box
-        component="div"
+          component="div"
           sx={{
             margin: theme.spacing(0, 2),
             maxWidth: `calc(${trialWidth}px - ${
@@ -325,7 +332,7 @@ const PreferentialTrial: FC<{
               urlPath={urlPath}
             />
             <Box
-            component="div"
+              component="div"
               sx={{
                 position: "absolute",
                 top: 0,
@@ -546,7 +553,10 @@ export const PreferentialTrials: FC<{ studyDetail: StudyDetail | null }> = ({
           </Button>
         </Box>
       </Box>
-      <Box component="div" sx={{ display: "flex", flexDirection: "row", flexWrap: "wrap" }}>
+      <Box
+        component="div"
+        sx={{ display: "flex", flexDirection: "row", flexWrap: "wrap" }}
+      >
         {displayTrials.display.map((t, index) => {
           const trial = activeTrials.find((trial) => trial.number === t)
           const candidates = displayTrials.display.filter(
@@ -578,7 +588,7 @@ export const PreferentialTrials: FC<{ studyDetail: StudyDetail | null }> = ({
       {detailTrial !== null && (
         <Modal open={true} onClose={() => setDetailTrial(null)}>
           <Box
-          component="div"
+            component="div"
             sx={{
               position: "absolute",
               top: 0,
@@ -594,7 +604,7 @@ export const PreferentialTrials: FC<{ studyDetail: StudyDetail | null }> = ({
             }}
           >
             <Box
-            component="div"
+              component="div"
               sx={{
                 width: "100%",
                 height: "100%",
diff --git a/optuna_dashboard/ts/components/StudyList.tsx b/optuna_dashboard/ts/components/StudyList.tsx
index 885a0f19..d4086888 100644
--- a/optuna_dashboard/ts/components/StudyList.tsx
+++ b/optuna_dashboard/ts/components/StudyList.tsx
@@ -98,7 +98,7 @@ export const StudyList: FC<{
   }))
   const sortBySelect = (
     <Box
-    component="div"
+      component="div"
       sx={{
         position: "relative",
         borderRadius: theme.shape.borderRadius,
@@ -106,7 +106,7 @@ export const StudyList: FC<{
       }}
     >
       <Box
-      component="div"
+        component="div"
         sx={{
           padding: theme.spacing(0, 2),
           height: "100%",
diff --git a/optuna_dashboard/ts/components/TrialFormWidgets.tsx b/optuna_dashboard/ts/components/TrialFormWidgets.tsx
index 5db18084..ba0c3506 100644
--- a/optuna_dashboard/ts/components/TrialFormWidgets.tsx
+++ b/optuna_dashboard/ts/components/TrialFormWidgets.tsx
@@ -17,7 +17,15 @@ import { DebouncedInputTextField } from "./Debounce"
 import { actionCreator } from "../action"
 import { useTrialUpdatingValue } from "../state"
 import * as Optuna from "@optuna/types"
-import { FormWidgets, ObjectiveChoiceWidget, ObjectiveSliderWidget, ObjectiveTextInputWidget, ObjectiveUserAttrRef, Trial, UserAttrFormWidget } from "ts/types"
+import {
+  FormWidgets,
+  ObjectiveChoiceWidget,
+  ObjectiveSliderWidget,
+  ObjectiveTextInputWidget,
+  ObjectiveUserAttrRef,
+  Trial,
+  UserAttrFormWidget,
+} from "ts/types"
 
 type WidgetState = {
   isValid: boolean
diff --git a/optuna_dashboard/ts/state.ts b/optuna_dashboard/ts/state.ts
index 7c128e81..a991c3a3 100644
--- a/optuna_dashboard/ts/state.ts
+++ b/optuna_dashboard/ts/state.ts
@@ -5,7 +5,13 @@ import {
   DarkColorTemplates,
 } from "./components/PlotlyColorTemplates"
 import { useLocalStorage } from "usehooks-ts"
-import { Artifact, PlotlyColorTheme, StudyDetail, StudyDetails, StudySummary } from "./types"
+import {
+  Artifact,
+  PlotlyColorTheme,
+  StudyDetail,
+  StudyDetails,
+  StudySummary,
+} from "./types"
 
 export const studySummariesState = atom<StudySummary[]>({
   key: "studySummaries",