diff --git a/optuna_dashboard/ts/components/TrialList.tsx b/optuna_dashboard/ts/components/TrialList.tsx
index f73a97e1..3a1fcee6 100644
--- a/optuna_dashboard/ts/components/TrialList.tsx
+++ b/optuna_dashboard/ts/components/TrialList.tsx
@@ -370,6 +370,7 @@ export const TrialArtifactContent: FC<{
           display: "flex",
           justifyContent: "center",
           alignItems: "center",
+          height: height,
         }}
       >
         <audio controls>
@@ -458,253 +459,78 @@ const TrialArtifact: FC<{
   artifact: Artifact
   width: string
   height: string
+  buttons_width: number
 }> = ({ trial, artifact, width, height }) => {
   const [openDeleteArtifactDialog] = useDeleteArtifactDialog()
   const theme = useTheme()
-  if (artifact.mimetype.startsWith("image")) {
-    return (
-      <Card
-        key={artifact.artifact_id}
+  const is_3d_model =
+    artifact.filename.endsWith(".stl") || artifact.filename.endsWith(".3dm")
+  const actions_width = is_3d_model ? theme.spacing(12) : theme.spacing(8)
+
+  return (
+    <Card
+      key={artifact.artifact_id}
+      sx={{
+        marginBottom: theme.spacing(2),
+        width: width,
+        minHeight: "100%",
+        margin: theme.spacing(0, 1, 1, 0),
+      }}
+    >
+      <TrialArtifactContent
+        trial={trial}
+        artifact={artifact}
+        width={width}
+        height={height}
+      />
+      <CardContent
         sx={{
-          marginBottom: theme.spacing(2),
-          width: width,
-          margin: theme.spacing(0, 1, 1, 0),
-        }}
-      >
-        <TrialArtifactContent
-          trial={trial}
-          artifact={artifact}
-          width={width}
-          height={height}
-        />
-        <CardContent
-          sx={{
-            display: "flex",
-            flexDirection: "row",
-            padding: `${theme.spacing(1)} !important`,
-          }}
-        >
-          <Typography
-            sx={{
-              p: theme.spacing(0.5, 0),
-              flexGrow: 1,
-              wordWrap: "break-word",
-              maxWidth: `calc(100% - ${theme.spacing(8)})`,
-            }}
-          >
-            {artifact.filename}
-          </Typography>
-          <IconButton
-            aria-label="delete artifact"
-            size="small"
-            color="inherit"
-            sx={{ margin: "auto 0" }}
-            onClick={() => {
-              openDeleteArtifactDialog(trial.study_id, trial.trial_id, artifact)
-            }}
-          >
-            <DeleteIcon />
-          </IconButton>
-          <IconButton
-            aria-label="download artifact"
-            size="small"
-            color="inherit"
-            download={artifact.filename}
-            sx={{ margin: "auto 0" }}
-            href={`/artifacts/${trial.study_id}/${trial.trial_id}/${artifact.artifact_id}`}
-          >
-            <DownloadIcon />
-          </IconButton>
-        </CardContent>
-      </Card>
-    )
-  } else if (
-    artifact.filename.endsWith(".stl") ||
-    artifact.filename.endsWith(".3dm")
-  ) {
-    return (
-      <Card
-        key={artifact.artifact_id}
-        sx={{
-          marginBottom: theme.spacing(2),
           display: "flex",
-          flexDirection: "column",
-          width: width,
-          minHeight: "100%",
-          margin: theme.spacing(0, 1, 1, 0),
+          flexDirection: "row",
+          padding: `${theme.spacing(1)} !important`,
         }}
       >
-        <TrialArtifactContent
-          trial={trial}
-          artifact={artifact}
-          width={width}
-          height={height}
-        />
-        <CardContent
+        <Typography
           sx={{
-            display: "flex",
-            flexDirection: "row",
-            padding: `${theme.spacing(1)} !important`,
+            p: theme.spacing(0.5, 0),
+            flexGrow: 1,
+            wordWrap: "break-word",
+            maxWidth: `calc(100% - ${actions_width})`,
           }}
         >
-          <Typography
-            sx={{
-              p: theme.spacing(0.5, 0),
-              flexGrow: 1,
-              wordWrap: "break-word",
-              maxWidth: `calc(100% - ${theme.spacing(12)})`,
-            }}
-          >
-            {artifact.filename}
-          </Typography>
+          {artifact.filename}
+        </Typography>
+        {is_3d_model ? (
           <TrialArtifactActions
             trial={trial}
             artifact={artifact}
             sx={{ margin: "auto 0" }}
           />
-          <IconButton
-            aria-label="delete artifact"
-            size="small"
-            color="inherit"
-            sx={{ margin: "auto 0" }}
-            onClick={() => {
-              openDeleteArtifactDialog(trial.study_id, trial.trial_id, artifact)
-            }}
-          >
-            <DeleteIcon />
-          </IconButton>
-          <IconButton
-            aria-label="download artifact"
-            size="small"
-            color="inherit"
-            sx={{ margin: "auto 0" }}
-            download={artifact.filename}
-            href={`/artifacts/${trial.study_id}/${trial.trial_id}/${artifact.artifact_id}`}
-          >
-            <DownloadIcon />
-          </IconButton>
-        </CardContent>
-      </Card>
-    )
-  } else if (artifact.mimetype.startsWith("audio")) {
-    return (
-      <Card
-        key={artifact.artifact_id}
-        sx={{
-          marginBottom: theme.spacing(2),
-          display: "flex",
-          flexDirection: "column",
-          width: width,
-          minHeight: "100%",
-          margin: theme.spacing(0, 1, 1, 0),
-        }}
-      >
-        <TrialArtifactContent
-          trial={trial}
-          artifact={artifact}
-          width={width}
-          height={height}
-        />
-        <CardContent
-          sx={{
-            display: "flex",
-            flexDirection: "row",
-            padding: `${theme.spacing(1)} !important`,
+        ) : null}
+        <IconButton
+          aria-label="delete artifact"
+          size="small"
+          color="inherit"
+          sx={{ margin: "auto 0" }}
+          onClick={() => {
+            openDeleteArtifactDialog(trial.study_id, trial.trial_id, artifact)
           }}
         >
-          <Typography
-            sx={{
-              p: theme.spacing(0.5, 0),
-              flexGrow: 1,
-              maxWidth: `calc(100% - ${theme.spacing(8)})`,
-            }}
-          >
-            {artifact.filename}
-          </Typography>
-          <IconButton
-            aria-label="delete artifact"
-            size="small"
-            color="inherit"
-            sx={{ margin: "auto 0" }}
-            onClick={() => {
-              openDeleteArtifactDialog(trial.study_id, trial.trial_id, artifact)
-            }}
-          >
-            <DeleteIcon />
-          </IconButton>
-          <IconButton
-            aria-label="download artifact"
-            size="small"
-            color="inherit"
-            sx={{ margin: "auto 0" }}
-            download={artifact.filename}
-            href={`/artifacts/${trial.study_id}/${trial.trial_id}/${artifact.artifact_id}`}
-          >
-            <DownloadIcon />
-          </IconButton>
-        </CardContent>
-      </Card>
-    )
-  } else {
-    return (
-      <Card
-        key={artifact.artifact_id}
-        sx={{
-          marginBottom: theme.spacing(2),
-          display: "flex",
-          flexDirection: "column",
-          width: width,
-          minHeight: "100%",
-          margin: theme.spacing(0, 1, 1, 0),
-        }}
-      >
-        <TrialArtifactContent
-          trial={trial}
-          artifact={artifact}
-          width={width}
-          height={height}
-        />
-        <CardContent
-          sx={{
-            display: "flex",
-            flexDirection: "row",
-            padding: `${theme.spacing(1)} !important`,
-          }}
+          <DeleteIcon />
+        </IconButton>
+        <IconButton
+          aria-label="download artifact"
+          size="small"
+          color="inherit"
+          download={artifact.filename}
+          sx={{ margin: "auto 0" }}
+          href={`/artifacts/${trial.study_id}/${trial.trial_id}/${artifact.artifact_id}`}
         >
-          <Typography
-            sx={{
-              p: theme.spacing(0.5, 0),
-              flexGrow: 1,
-              maxWidth: `calc(100% - ${theme.spacing(8)})`,
-            }}
-          >
-            {artifact.filename}
-          </Typography>
-          <IconButton
-            aria-label="delete artifact"
-            size="small"
-            color="inherit"
-            sx={{ margin: "auto 0" }}
-            onClick={() => {
-              openDeleteArtifactDialog(trial.study_id, trial.trial_id, artifact)
-            }}
-          >
-            <DeleteIcon />
-          </IconButton>
-          <IconButton
-            aria-label="download artifact"
-            size="small"
-            color="inherit"
-            sx={{ margin: "auto 0" }}
-            download={artifact.filename}
-            href={`/artifacts/${trial.study_id}/${trial.trial_id}/${artifact.artifact_id}`}
-          >
-            <DownloadIcon />
-          </IconButton>
-        </CardContent>
-      </Card>
-    )
-  }
+          <DownloadIcon />
+        </IconButton>
+      </CardContent>
+    </Card>
+  )
 }
 
 const TrialArtifacts: FC<{ trial: Trial }> = ({ trial }) => {
diff --git a/python_tests/test_api.py b/python_tests/test_api.py
index ae50e29a..6828b83d 100644
--- a/python_tests/test_api.py
+++ b/python_tests/test_api.py
@@ -9,6 +9,7 @@ from optuna.study import StudyDirection
 from optuna_dashboard._app import create_app
 from optuna_dashboard._app import create_new_study
 from optuna_dashboard.preferential import create_study
+from optuna_dashboard._preference_setting import register_output_component
 
 from .wsgi_client import send_request
 
@@ -151,6 +152,68 @@ class APITestCase(TestCase):
         assert better.number == 2
         assert worse.number == 1
 
+    def test_change_component(self) -> None:
+        storage = optuna.storages.InMemoryStorage()
+        study = create_study(storage=storage)
+        register_output_component(study, "Note")
+        for _ in range(3):
+            trial = study.ask()
+            study.mark_comparison_ready(trial)
+
+        app = create_app(storage)
+        study_id = study._study._study_id
+        status, _, _ = send_request(
+            app,
+            f"/api/studies/{study_id}/component",
+            "POST",
+            body=json.dumps({"component_type": "Artifact", "artifact_key": "image"}),
+            content_type="application/json",
+        )
+        self.assertEqual(status, 204)
+
+        status, _, body = send_request(
+            app,
+            f"/api/studies/{study_id}",
+            "GET",
+            content_type="application/json",
+        )
+        self.assertEqual(status, 200)
+
+        study_detail = json.loads(body)
+        assert study_detail["feedback_component_type"] == "Artifact"
+        assert study_detail["feedback_artifact_key"] == "image"
+
+    def test_change_component_type_only(self) -> None:
+        storage = optuna.storages.InMemoryStorage()
+        study = create_study(storage=storage)
+        register_output_component(study, "Artifact", "audio")
+        for _ in range(3):
+            trial = study.ask()
+            study.mark_comparison_ready(trial)
+
+        app = create_app(storage)
+        study_id = study._study._study_id
+        status, _, _ = send_request(
+            app,
+            f"/api/studies/{study_id}/component",
+            "POST",
+            body=json.dumps({"component_type": "Note"}),
+            content_type="application/json",
+        )
+        self.assertEqual(status, 204)
+
+        status, _, body = send_request(
+            app,
+            f"/api/studies/{study_id}",
+            "GET",
+            content_type="application/json",
+        )
+        self.assertEqual(status, 200)
+
+        study_detail = json.loads(body)
+        assert study_detail["feedback_component_type"] == "Note"
+        assert study_detail["feedback_artifact_key"] == "audio"
+
     def test_skip_trial(self) -> None:
         storage = optuna.storages.InMemoryStorage()
         study = create_study(storage=storage)
diff --git a/python_tests/test_preference_setting.py b/python_tests/test_preference_setting.py
new file mode 100644
index 00000000..05727a04
--- /dev/null
+++ b/python_tests/test_preference_setting.py
@@ -0,0 +1,20 @@
+from __future__ import annotations
+from unittest import TestCase
+
+import optuna
+
+from optuna_dashboard._preference_setting import (
+    register_output_component,
+    _SYSTEM_ATTR_FEEDBACK_ARTIFACT_KEY,
+    _SYSTEM_ATTR_FEEDBACK_COMPONENT_TYPE,
+)
+from optuna_dashboard.preferential._study import PreferentialStudy
+
+
+class FeedbackSettingTestCase(TestCase):
+    def test_widget_to_dict_from_dict(self) -> None:
+        study = PreferentialStudy(optuna.create_study())
+        register_output_component(study, "Artifact", "image_key")
+        system_attrs = study._study.system_attrs
+        assert system_attrs.get(_SYSTEM_ATTR_FEEDBACK_COMPONENT_TYPE, "") == "Artifact"
+        assert system_attrs.get(_SYSTEM_ATTR_FEEDBACK_ARTIFACT_KEY, "") == "image_key"