diff --git a/optuna_dashboard/ts/components/ArtifactCardMedia.tsx b/optuna_dashboard/ts/components/Artifact/ArtifactCardMedia.tsx
similarity index 100%
rename from optuna_dashboard/ts/components/ArtifactCardMedia.tsx
rename to optuna_dashboard/ts/components/Artifact/ArtifactCardMedia.tsx
diff --git a/optuna_dashboard/ts/components/DeleteArtifactDialog.tsx b/optuna_dashboard/ts/components/Artifact/DeleteArtifactDialog.tsx
similarity index 98%
rename from optuna_dashboard/ts/components/DeleteArtifactDialog.tsx
rename to optuna_dashboard/ts/components/Artifact/DeleteArtifactDialog.tsx
index 7ac461624..2055ea4c8 100644
--- a/optuna_dashboard/ts/components/DeleteArtifactDialog.tsx
+++ b/optuna_dashboard/ts/components/Artifact/DeleteArtifactDialog.tsx
@@ -7,7 +7,7 @@ import {
   Button,
   DialogActions,
 } from "@mui/material"
-import { actionCreator } from "../action"
+import { actionCreator } from "../../action"
 
 export const useDeleteTrialArtifactDialog = (): [
   (studyId: number, trialId: number, artifact: Artifact) => void,
diff --git a/optuna_dashboard/ts/components/StudyArtifactCards.tsx b/optuna_dashboard/ts/components/Artifact/StudyArtifactCards.tsx
similarity index 99%
rename from optuna_dashboard/ts/components/StudyArtifactCards.tsx
rename to optuna_dashboard/ts/components/Artifact/StudyArtifactCards.tsx
index c63948960..63b6686b3 100644
--- a/optuna_dashboard/ts/components/StudyArtifactCards.tsx
+++ b/optuna_dashboard/ts/components/Artifact/StudyArtifactCards.tsx
@@ -20,7 +20,7 @@ import DownloadIcon from "@mui/icons-material/Download"
 import DeleteIcon from "@mui/icons-material/Delete"
 import FullscreenIcon from "@mui/icons-material/Fullscreen"
 
-import { actionCreator } from "../action"
+import { actionCreator } from "../../action"
 import { useDeleteStudyArtifactDialog } from "./DeleteArtifactDialog"
 import {
   useThreejsArtifactModal,
diff --git a/optuna_dashboard/ts/components/ThreejsArtifactViewer.tsx b/optuna_dashboard/ts/components/Artifact/ThreejsArtifactViewer.tsx
similarity index 100%
rename from optuna_dashboard/ts/components/ThreejsArtifactViewer.tsx
rename to optuna_dashboard/ts/components/Artifact/ThreejsArtifactViewer.tsx
diff --git a/optuna_dashboard/ts/components/TrialArtifactCards.tsx b/optuna_dashboard/ts/components/Artifact/TrialArtifactCards.tsx
similarity index 99%
rename from optuna_dashboard/ts/components/TrialArtifactCards.tsx
rename to optuna_dashboard/ts/components/Artifact/TrialArtifactCards.tsx
index 77ac2844e..301d96d02 100644
--- a/optuna_dashboard/ts/components/TrialArtifactCards.tsx
+++ b/optuna_dashboard/ts/components/Artifact/TrialArtifactCards.tsx
@@ -20,7 +20,7 @@ import DownloadIcon from "@mui/icons-material/Download"
 import DeleteIcon from "@mui/icons-material/Delete"
 import FullscreenIcon from "@mui/icons-material/Fullscreen"
 
-import { actionCreator } from "../action"
+import { actionCreator } from "../../action"
 import { useDeleteTrialArtifactDialog } from "./DeleteArtifactDialog"
 import {
   useThreejsArtifactModal,
diff --git a/optuna_dashboard/ts/components/WaveSurferArtifactViewer.tsx b/optuna_dashboard/ts/components/Artifact/WaveSurferArtifactViewer.tsx
similarity index 100%
rename from optuna_dashboard/ts/components/WaveSurferArtifactViewer.tsx
rename to optuna_dashboard/ts/components/Artifact/WaveSurferArtifactViewer.tsx
diff --git a/optuna_dashboard/ts/components/PreferentialAnalytics.tsx b/optuna_dashboard/ts/components/Preferential/PreferentialAnalytics.tsx
similarity index 89%
rename from optuna_dashboard/ts/components/PreferentialAnalytics.tsx
rename to optuna_dashboard/ts/components/Preferential/PreferentialAnalytics.tsx
index d8623f976..edeb64f4c 100644
--- a/optuna_dashboard/ts/components/PreferentialAnalytics.tsx
+++ b/optuna_dashboard/ts/components/Preferential/PreferentialAnalytics.tsx
@@ -8,10 +8,10 @@ import {
   useTheme,
 } from "@mui/material"
 import Grid2 from "@mui/material/Unstable_Grid2"
-import { DataGrid, DataGridColumn } from "./DataGrid"
-import { BestTrialsCard } from "./BestTrialsCard"
-import { useStudyDetailValue, useStudySummaryValue } from "../state"
-import { Contour } from "./GraphContour"
+import { DataGrid, DataGridColumn } from "../DataGrid"
+import { BestTrialsCard } from "../BestTrialsCard"
+import { useStudyDetailValue, useStudySummaryValue } from "../../state"
+import { Contour } from "../GraphContour"
 
 export const PreferentialAnalytics: FC<{ studyId: number }> = ({ studyId }) => {
   const theme = useTheme()
diff --git a/optuna_dashboard/ts/components/PreferentialGraph.tsx b/optuna_dashboard/ts/components/Preferential/PreferentialGraph.tsx
similarity index 99%
rename from optuna_dashboard/ts/components/PreferentialGraph.tsx
rename to optuna_dashboard/ts/components/Preferential/PreferentialGraph.tsx
index 9c152a9ec..dd7a36915 100644
--- a/optuna_dashboard/ts/components/PreferentialGraph.tsx
+++ b/optuna_dashboard/ts/components/Preferential/PreferentialGraph.tsx
@@ -23,7 +23,7 @@ import "reactflow/dist/style.css"
 import ELK from "elkjs/lib/elk.bundled.js"
 import { ElkNode } from "elkjs/lib/elk-api.js"
 
-import { useStudyDetailValue } from "../state"
+import { useStudyDetailValue } from "../../state"
 import { getArtifactUrlPath } from "./PreferentialTrials"
 import { PreferentialOutputComponent } from "./PreferentialOutputComponent"
 
diff --git a/optuna_dashboard/ts/components/PreferenceHistory.tsx b/optuna_dashboard/ts/components/Preferential/PreferentialHistory.tsx
similarity index 96%
rename from optuna_dashboard/ts/components/PreferenceHistory.tsx
rename to optuna_dashboard/ts/components/Preferential/PreferentialHistory.tsx
index b7bd04b44..5085863cb 100644
--- a/optuna_dashboard/ts/components/PreferenceHistory.tsx
+++ b/optuna_dashboard/ts/components/Preferential/PreferentialHistory.tsx
@@ -15,11 +15,11 @@ import DeleteIcon from "@mui/icons-material/Delete"
 import Modal from "@mui/material/Modal"
 import { red } from "@mui/material/colors"
 
-import { TrialListDetail } from "./TrialList"
+import { TrialListDetail } from "../TrialList"
 import { getArtifactUrlPath } from "./PreferentialTrials"
-import { formatDate } from "../dateUtil"
-import { actionCreator } from "../action"
-import { useStudyDetailValue } from "../state"
+import { formatDate } from "../../dateUtil"
+import { actionCreator } from "../../action"
+import { useStudyDetailValue } from "../../state"
 import { PreferentialOutputComponent } from "./PreferentialOutputComponent"
 
 type TrialType = "worst" | "none"
@@ -252,7 +252,7 @@ const ChoiceTrials: FC<{
   )
 }
 
-export const PreferenceHistory: FC<{ studyDetail: StudyDetail | null }> = ({
+export const PreferentialHistory: FC<{ studyDetail: StudyDetail | null }> = ({
   studyDetail,
 }) => {
   if (
diff --git a/optuna_dashboard/ts/components/PreferentialOutputComponent.tsx b/optuna_dashboard/ts/components/Preferential/PreferentialOutputComponent.tsx
similarity index 86%
rename from optuna_dashboard/ts/components/PreferentialOutputComponent.tsx
rename to optuna_dashboard/ts/components/Preferential/PreferentialOutputComponent.tsx
index f1598a2e5..077e514e9 100644
--- a/optuna_dashboard/ts/components/PreferentialOutputComponent.tsx
+++ b/optuna_dashboard/ts/components/Preferential/PreferentialOutputComponent.tsx
@@ -1,6 +1,6 @@
 import React, { FC, useMemo } from "react"
-import { ArtifactCardMedia } from "./ArtifactCardMedia"
-import { MarkdownRenderer } from "./Note"
+import { ArtifactCardMedia } from "../Artifact/ArtifactCardMedia"
+import { MarkdownRenderer } from "../Note"
 
 export const PreferentialOutputComponent: FC<{
   trial: Trial
diff --git a/optuna_dashboard/ts/components/PreferentialTrials.tsx b/optuna_dashboard/ts/components/Preferential/PreferentialTrials.tsx
similarity index 99%
rename from optuna_dashboard/ts/components/PreferentialTrials.tsx
rename to optuna_dashboard/ts/components/Preferential/PreferentialTrials.tsx
index b3934a807..56aa98447 100644
--- a/optuna_dashboard/ts/components/PreferentialTrials.tsx
+++ b/optuna_dashboard/ts/components/Preferential/PreferentialTrials.tsx
@@ -27,12 +27,12 @@ import ClearIcon from "@mui/icons-material/Clear"
 import SettingsIcon from "@mui/icons-material/Settings"
 import FullscreenIcon from "@mui/icons-material/Fullscreen"
 
-import { actionCreator } from "../action"
-import { TrialListDetail } from "./TrialList"
+import { actionCreator } from "../../action"
+import { TrialListDetail } from "../TrialList"
 import {
   isThreejsArtifact,
   useThreejsArtifactModal,
-} from "./ThreejsArtifactViewer"
+} from "../Artifact/ThreejsArtifactViewer"
 import { PreferentialOutputComponent } from "./PreferentialOutputComponent"
 
 const SettingsPage: FC<{
diff --git a/optuna_dashboard/ts/components/StudyDetail.tsx b/optuna_dashboard/ts/components/StudyDetail.tsx
index 2f56ec8b4..c4ba0f5b8 100644
--- a/optuna_dashboard/ts/components/StudyDetail.tsx
+++ b/optuna_dashboard/ts/components/StudyDetail.tsx
@@ -31,10 +31,10 @@ import { GraphEdf } from "./GraphEdf"
 import { GraphRank } from "./GraphRank"
 import { TrialList } from "./TrialList"
 import { StudyHistory } from "./StudyHistory"
-import { PreferentialTrials } from "./PreferentialTrials"
-import { PreferenceHistory } from "./PreferenceHistory"
-import { PreferentialAnalytics } from "./PreferentialAnalytics"
-import { PreferentialGraph } from "./PreferentialGraph"
+import { PreferentialTrials } from "./Preferential/PreferentialTrials"
+import { PreferentialHistory } from "./Preferential/PreferentialHistory"
+import { PreferentialAnalytics } from "./Preferential/PreferentialAnalytics"
+import { PreferentialGraph } from "./Preferential/PreferentialGraph"
 
 interface ParamTypes {
   studyId: string
@@ -221,7 +221,7 @@ export const StudyDetail: FC<{
       </Box>
     )
   } else if (page === "preferenceHistory") {
-    content = <PreferenceHistory studyDetail={studyDetail} />
+    content = <PreferentialHistory studyDetail={studyDetail} />
   }
 
   const toolbar = (
diff --git a/optuna_dashboard/ts/components/StudyHistory.tsx b/optuna_dashboard/ts/components/StudyHistory.tsx
index 8fab513a0..b63030ca1 100644
--- a/optuna_dashboard/ts/components/StudyHistory.tsx
+++ b/optuna_dashboard/ts/components/StudyHistory.tsx
@@ -17,7 +17,7 @@ import { DataGrid, DataGridColumn } from "./DataGrid"
 import { GraphHyperparameterImportance } from "./GraphHyperparameterImportances"
 import { UserDefinedPlot } from "./UserDefinedPlot"
 import { BestTrialsCard } from "./BestTrialsCard"
-import { StudyArtifactCards } from "./StudyArtifactCards"
+import { StudyArtifactCards } from "./Artifact/StudyArtifactCards"
 import { useRecoilValue } from "recoil"
 import {
   useStudyDetailValue,
diff --git a/optuna_dashboard/ts/components/TrialList.tsx b/optuna_dashboard/ts/components/TrialList.tsx
index 22b7b1ff3..3eefdd3d5 100644
--- a/optuna_dashboard/ts/components/TrialList.tsx
+++ b/optuna_dashboard/ts/components/TrialList.tsx
@@ -27,7 +27,7 @@ import { useRecoilValue } from "recoil"
 import { artifactIsAvailable } from "../state"
 import { actionCreator } from "../action"
 import { TrialFormWidgets } from "./TrialFormWidgets"
-import { TrialArtifactCards } from "./TrialArtifactCards"
+import { TrialArtifactCards } from "./Artifact/TrialArtifactCards"
 import { useQuery } from "../urlQuery"
 
 const states: TrialState[] = [