diff --git a/optuna_dashboard/ts/components/Artifact/TrialArtifactCards.tsx b/optuna_dashboard/ts/components/Artifact/ArtifactCards.tsx
similarity index 63%
rename from optuna_dashboard/ts/components/Artifact/TrialArtifactCards.tsx
rename to optuna_dashboard/ts/components/Artifact/ArtifactCards.tsx
index 7bd29c307..4f3127c5c 100644
--- a/optuna_dashboard/ts/components/Artifact/TrialArtifactCards.tsx
+++ b/optuna_dashboard/ts/components/Artifact/ArtifactCards.tsx
@@ -19,32 +19,44 @@ import React, {
   useRef,
   useState,
 } from "react"
-
-import { Trial } from "ts/types/optuna"
 import { actionCreator } from "../../action"
+import { StudyDetail, Trial } from "../../types/optuna"
 import { ArtifactCardMedia } from "./ArtifactCardMedia"
-import { useDeleteTrialArtifactDialog } from "./DeleteArtifactDialog"
+import { useDeleteArtifactDialog } from "./DeleteArtifactDialog"
 import { isTableArtifact, useTableArtifactModal } from "./TableArtifactViewer"
 import {
   isThreejsArtifact,
   useThreejsArtifactModal,
 } from "./ThreejsArtifactViewer"
 
-export const TrialArtifactCards: FC<{ trial: Trial }> = ({ trial }) => {
+type StudyOrTrial =
+  | {
+      type: "study"
+      study: StudyDetail
+    }
+  | {
+      type: "trial"
+      trial: Trial
+    }
+export const ArtifactCards: FC<{
+  studyOrTrial: StudyOrTrial
+  isArtifactModifiable?: boolean
+}> = ({ studyOrTrial, isArtifactModifiable = true }) => {
   const theme = useTheme()
   const [openDeleteArtifactDialog, renderDeleteArtifactDialog] =
-    useDeleteTrialArtifactDialog()
+    useDeleteArtifactDialog()
   const [openThreejsArtifactModal, renderThreejsArtifactModal] =
     useThreejsArtifactModal()
   const [openTableArtifactModal, renderTableArtifactModal] =
     useTableArtifactModal()
-  const isArtifactModifiable = (trial: Trial) => {
-    return trial.state === "Running" || trial.state === "Waiting"
-  }
 
   const width = "200px"
   const height = "150px"
-  const artifacts = [...trial.artifacts].sort((a, b) => {
+  const sortedArtifacts = [
+    ...(studyOrTrial.type === "study"
+      ? studyOrTrial.study.artifacts
+      : studyOrTrial.trial.artifacts),
+  ].sort((a, b) => {
     if (a.filename < b.filename) {
       return -1
     } else if (a.filename > b.filename) {
@@ -56,18 +68,15 @@ export const TrialArtifactCards: FC<{ trial: Trial }> = ({ trial }) => {
 
   return (
     <>
-      <Typography
-        variant="h5"
-        sx={{ fontWeight: theme.typography.fontWeightBold }}
-      >
-        Artifacts
-      </Typography>
       <Box
         component="div"
         sx={{ display: "flex", flexWrap: "wrap", p: theme.spacing(1, 0) }}
       >
-        {artifacts.map((artifact) => {
-          const urlPath = `/artifacts/${trial.study_id}/${trial.trial_id}/${artifact.artifact_id}`
+        {sortedArtifacts.map((artifact) => {
+          const urlPath =
+            studyOrTrial.type === "study"
+              ? `/artifacts/${studyOrTrial.study.id}/${artifact.artifact_id}`
+              : `/artifacts/${studyOrTrial.trial.study_id}/${studyOrTrial.trial.trial_id}/${artifact.artifact_id}`
           return (
             <Card
               key={artifact.artifact_id}
@@ -75,9 +84,15 @@ export const TrialArtifactCards: FC<{ trial: Trial }> = ({ trial }) => {
                 marginBottom: theme.spacing(2),
                 width: width,
                 margin: theme.spacing(0, 1, 1, 0),
-                display: "flex",
-                flexDirection: "column",
-                alignItems: "center",
+                display: studyOrTrial.type === "trial" ? "flex" : undefined,
+                flexDirection:
+                  studyOrTrial.type === "trial" ? "column" : undefined,
+                alignItems:
+                  studyOrTrial.type === "trial" ? "center" : undefined,
+                border:
+                  studyOrTrial.type === "study"
+                    ? `1px solid ${theme.palette.divider}`
+                    : undefined,
               }}
             >
               <ArtifactCardMedia
@@ -96,12 +111,22 @@ export const TrialArtifactCards: FC<{ trial: Trial }> = ({ trial }) => {
                   sx={{
                     p: theme.spacing(0.5, 0),
                     flexGrow: 1,
-                    wordBreak: "break-all",
-                    maxWidth: `calc(100% - ${theme.spacing(
-                      4 +
-                        (isThreejsArtifact(artifact) ? 4 : 0) +
-                        (isArtifactModifiable(trial) ? 4 : 0)
-                    )})`,
+                    wordBreak:
+                      studyOrTrial.type === "trial" ? "break-all" : undefined,
+                    maxWidth:
+                      studyOrTrial.type === "trial"
+                        ? `calc(100% - ${theme.spacing(
+                            4 +
+                              (isThreejsArtifact(artifact) ? 4 : 0) +
+                              (isArtifactModifiable ? 4 : 0)
+                          )})`
+                        : `calc(100% - ${
+                            isThreejsArtifact(artifact)
+                              ? theme.spacing(12)
+                              : theme.spacing(8)
+                          })`,
+                    wordWrap:
+                      studyOrTrial.type === "study" ? "break-word" : undefined,
                   }}
                 >
                   {artifact.filename}
@@ -132,7 +157,7 @@ export const TrialArtifactCards: FC<{ trial: Trial }> = ({ trial }) => {
                     <FullscreenIcon />
                   </IconButton>
                 ) : null}
-                {isArtifactModifiable(trial) ? (
+                {isArtifactModifiable && (
                   <IconButton
                     aria-label="delete artifact"
                     size="small"
@@ -140,15 +165,24 @@ export const TrialArtifactCards: FC<{ trial: Trial }> = ({ trial }) => {
                     sx={{ margin: "auto 0" }}
                     onClick={() => {
                       openDeleteArtifactDialog(
-                        trial.study_id,
-                        trial.trial_id,
-                        artifact
+                        studyOrTrial.type === "study"
+                          ? {
+                              type: "study",
+                              studyId: studyOrTrial.study.id,
+                              artifact,
+                            }
+                          : {
+                              type: "trial",
+                              studyId: studyOrTrial.trial.study_id,
+                              trialId: studyOrTrial.trial.trial_id,
+                              artifact,
+                            }
                       )
                     }}
                   >
                     <DeleteIcon />
                   </IconButton>
-                ) : null}
+                )}
                 <IconButton
                   aria-label="download artifact"
                   size="small"
@@ -163,9 +197,13 @@ export const TrialArtifactCards: FC<{ trial: Trial }> = ({ trial }) => {
             </Card>
           )
         })}
-        {isArtifactModifiable(trial) ? (
-          <TrialArtifactUploader trial={trial} width={width} height={height} />
-        ) : null}
+        {isArtifactModifiable && (
+          <ArtifactUploader
+            studyOrTrial={studyOrTrial}
+            width={width}
+            height={height}
+          />
+        )}
       </Box>
       {renderDeleteArtifactDialog()}
       {renderThreejsArtifactModal()}
@@ -174,14 +212,14 @@ export const TrialArtifactCards: FC<{ trial: Trial }> = ({ trial }) => {
   )
 }
 
-const TrialArtifactUploader: FC<{
-  trial: Trial
+const ArtifactUploader: FC<{
+  studyOrTrial: StudyOrTrial
   width: string
   height: string
-}> = ({ trial, width, height }) => {
+}> = ({ studyOrTrial, width, height }) => {
   const theme = useTheme()
   const action = actionCreator()
-  const [dragOver, setDragOver] = useState<boolean>(false)
+  const [dragOver, setDragOver] = useState(false)
 
   const inputRef = useRef<HTMLInputElement>(null)
   const handleClick: MouseEventHandler = () => {
@@ -190,34 +228,55 @@ const TrialArtifactUploader: FC<{
     }
     inputRef.current.click()
   }
+
   const handleOnChange: ChangeEventHandler<HTMLInputElement> = (e) => {
     const files = e.target.files
     if (files === null) {
       return
     }
-    action.uploadTrialArtifact(trial.study_id, trial.trial_id, files[0])
-  }
-  const handleDrop: DragEventHandler = (e) => {
-    e.stopPropagation()
-    e.preventDefault()
-    const files = e.dataTransfer.files
-    setDragOver(false)
-    for (let i = 0; i < files.length; i++) {
-      action.uploadTrialArtifact(trial.study_id, trial.trial_id, files[i])
+    if (studyOrTrial.type === "study") {
+      action.uploadStudyArtifact(studyOrTrial.study.id, files[0])
+    } else if (studyOrTrial.type === "trial") {
+      action.uploadTrialArtifact(
+        studyOrTrial.trial.study_id,
+        studyOrTrial.trial.trial_id,
+        files[0]
+      )
     }
   }
+
   const handleDragOver: DragEventHandler = (e) => {
     e.stopPropagation()
     e.preventDefault()
     e.dataTransfer.dropEffect = "copy"
     setDragOver(true)
   }
+
   const handleDragLeave: DragEventHandler = (e) => {
     e.stopPropagation()
     e.preventDefault()
     e.dataTransfer.dropEffect = "copy"
     setDragOver(false)
   }
+
+  const handleDrop: DragEventHandler = (e) => {
+    e.stopPropagation()
+    e.preventDefault()
+    const files = e.dataTransfer.files
+    setDragOver(false)
+    for (let i = 0; i < files.length; i++) {
+      if (studyOrTrial.type === "study") {
+        action.uploadStudyArtifact(studyOrTrial.study.id, files[i])
+      } else if (studyOrTrial.type === "trial") {
+        action.uploadTrialArtifact(
+          studyOrTrial.trial.study_id,
+          studyOrTrial.trial.trial_id,
+          files[i]
+        )
+      }
+    }
+  }
+
   return (
     <Card
       sx={{
diff --git a/optuna_dashboard/ts/components/Artifact/DeleteArtifactDialog.tsx b/optuna_dashboard/ts/components/Artifact/DeleteArtifactDialog.tsx
index d55dd32ab..48dbd16fc 100644
--- a/optuna_dashboard/ts/components/Artifact/DeleteArtifactDialog.tsx
+++ b/optuna_dashboard/ts/components/Artifact/DeleteArtifactDialog.tsx
@@ -12,80 +12,49 @@ import React, { ReactNode, useState, FC } from "react"
 import { Artifact } from "ts/types/optuna"
 import { actionCreator } from "../../action"
 
-export const useDeleteTrialArtifactDialog = (): [
-  (studyId: number, trialId: number, artifact: Artifact) => void,
-  () => ReactNode,
-] => {
-  const action = actionCreator()
-
-  const [openDeleteArtifactDialog, setOpenDeleteArtifactDialog] =
-    useState(false)
-  const [target, setTarget] = useState<[number, number, Artifact | null]>([
-    -1,
-    -1,
-    null,
-  ])
-
-  const handleCloseDeleteArtifactDialog = () => {
-    setOpenDeleteArtifactDialog(false)
-    setTarget([-1, -1, null])
-  }
-
-  const handleDeleteArtifact = () => {
-    const [studyId, trialId, artifact] = target
-    if (artifact === null) {
-      return
+type Target =
+  | {
+      type: "study"
+      studyId: number
+      artifact: Artifact
     }
-    action.deleteTrialArtifact(studyId, trialId, artifact.artifact_id)
-    setOpenDeleteArtifactDialog(false)
-    setTarget([-1, -1, null])
-  }
-
-  const openDialog = (studyId: number, trialId: number, artifact: Artifact) => {
-    setTarget([studyId, trialId, artifact])
-    setOpenDeleteArtifactDialog(true)
-  }
-
-  const renderDeleteArtifactDialog = () => {
-    return (
-      <DeleteDialog
-        openDeleteArtifactDialog={openDeleteArtifactDialog}
-        handleCloseDeleteArtifactDialog={handleCloseDeleteArtifactDialog}
-        filename={target[2]?.filename}
-        handleDeleteArtifact={handleDeleteArtifact}
-      />
-    )
-  }
-  return [openDialog, renderDeleteArtifactDialog]
-}
-
-export const useDeleteStudyArtifactDialog = (): [
-  (studyId: number, artifact: Artifact) => void,
+  | {
+      type: "trial"
+      studyId: number
+      trialId: number
+      artifact: Artifact
+    }
+export const useDeleteArtifactDialog = (): [
+  (target: Target) => void,
   () => ReactNode,
 ] => {
   const action = actionCreator()
-
   const [openDeleteArtifactDialog, setOpenDeleteArtifactDialog] =
     useState(false)
-  const [target, setTarget] = useState<[number, Artifact | null]>([-1, null])
+  const [target, setTarget] = useState<Target | null>(null)
 
   const handleCloseDeleteArtifactDialog = () => {
     setOpenDeleteArtifactDialog(false)
-    setTarget([-1, null])
+    setTarget(null)
   }
 
   const handleDeleteArtifact = () => {
-    const [studyId, artifact] = target
-    if (artifact === null) {
-      return
+    if (target === null) return
+    if (target.type === "study") {
+      action.deleteStudyArtifact(target.studyId, target.artifact.artifact_id)
+    } else if (target.type === "trial") {
+      action.deleteTrialArtifact(
+        target.studyId,
+        target.trialId,
+        target.artifact.artifact_id
+      )
     }
-    action.deleteStudyArtifact(studyId, artifact.artifact_id)
     setOpenDeleteArtifactDialog(false)
-    setTarget([-1, null])
+    setTarget(null)
   }
 
-  const openDialog = (studyId: number, artifact: Artifact) => {
-    setTarget([studyId, artifact])
+  const openDialog = (target: Target) => {
+    setTarget(target)
     setOpenDeleteArtifactDialog(true)
   }
 
@@ -94,7 +63,7 @@ export const useDeleteStudyArtifactDialog = (): [
       <DeleteDialog
         openDeleteArtifactDialog={openDeleteArtifactDialog}
         handleCloseDeleteArtifactDialog={handleCloseDeleteArtifactDialog}
-        filename={target[1]?.filename}
+        filename={target?.artifact.filename}
         handleDeleteArtifact={handleDeleteArtifact}
       />
     )
diff --git a/optuna_dashboard/ts/components/Artifact/SelectedTrialArtifactCards.tsx b/optuna_dashboard/ts/components/Artifact/SelectedTrialArtifactCards.tsx
index 7b7bdeb82..e1c9edfa9 100644
--- a/optuna_dashboard/ts/components/Artifact/SelectedTrialArtifactCards.tsx
+++ b/optuna_dashboard/ts/components/Artifact/SelectedTrialArtifactCards.tsx
@@ -20,7 +20,7 @@ import React, { FC, useMemo, useState } from "react"
 import { StudyDirection } from "@optuna/types"
 import { StudyDetail, Trial } from "ts/types/optuna"
 import { ArtifactCardMedia } from "./ArtifactCardMedia"
-import { useDeleteTrialArtifactDialog } from "./DeleteArtifactDialog"
+import { useDeleteArtifactDialog } from "./DeleteArtifactDialog"
 import { isTableArtifact, useTableArtifactModal } from "./TableArtifactViewer"
 import {
   isThreejsArtifact,
@@ -33,7 +33,7 @@ export const SelectedTrialArtifactCards: FC<{
 }> = ({ study, selectedTrials }) => {
   const theme = useTheme()
   const [openDeleteArtifactDialog, renderDeleteArtifactDialog] =
-    useDeleteTrialArtifactDialog()
+    useDeleteArtifactDialog()
   const [openThreejsArtifactModal, renderThreejsArtifactModal] =
     useThreejsArtifactModal()
   const [openTableArtifactModal, renderTableArtifactModal] =
@@ -199,11 +199,12 @@ export const SelectedTrialArtifactCards: FC<{
                     color="inherit"
                     sx={{ margin: "auto 0" }}
                     onClick={() => {
-                      openDeleteArtifactDialog(
-                        trial.study_id,
-                        trial.trial_id,
-                        artifact
-                      )
+                      openDeleteArtifactDialog({
+                        type: "trial",
+                        studyId: trial.study_id,
+                        trialId: trial.trial_id,
+                        artifact,
+                      })
                     }}
                   >
                     <DeleteIcon />
diff --git a/optuna_dashboard/ts/components/Artifact/StudyArtifactCards.tsx b/optuna_dashboard/ts/components/Artifact/StudyArtifactCards.tsx
deleted file mode 100644
index b24995f28..000000000
--- a/optuna_dashboard/ts/components/Artifact/StudyArtifactCards.tsx
+++ /dev/null
@@ -1,256 +0,0 @@
-import DeleteIcon from "@mui/icons-material/Delete"
-import DownloadIcon from "@mui/icons-material/Download"
-import FullscreenIcon from "@mui/icons-material/Fullscreen"
-import UploadFileIcon from "@mui/icons-material/UploadFile"
-import {
-  Box,
-  Card,
-  CardActionArea,
-  CardContent,
-  IconButton,
-  Typography,
-  useTheme,
-} from "@mui/material"
-import React, {
-  ChangeEventHandler,
-  DragEventHandler,
-  FC,
-  MouseEventHandler,
-  useRef,
-  useState,
-} from "react"
-
-import { StudyDetail } from "ts/types/optuna"
-import { actionCreator } from "../../action"
-import { ArtifactCardMedia } from "./ArtifactCardMedia"
-import { useDeleteStudyArtifactDialog } from "./DeleteArtifactDialog"
-import { isTableArtifact, useTableArtifactModal } from "./TableArtifactViewer"
-import {
-  isThreejsArtifact,
-  useThreejsArtifactModal,
-} from "./ThreejsArtifactViewer"
-
-export const StudyArtifactCards: FC<{ study: StudyDetail }> = ({ study }) => {
-  const theme = useTheme()
-  const [openDeleteArtifactDialog, renderDeleteArtifactDialog] =
-    useDeleteStudyArtifactDialog()
-  const [openThreejsArtifactModal, renderThreejsArtifactModal] =
-    useThreejsArtifactModal()
-  const [openTableArtifactModal, renderTableArtifactModal] =
-    useTableArtifactModal()
-
-  const width = "200px"
-  const height = "150px"
-  const artifacts = [...study.artifacts].sort((a, b) => {
-    if (a.filename < b.filename) {
-      return -1
-    } else if (a.filename > b.filename) {
-      return 1
-    } else {
-      return 0
-    }
-  })
-
-  return (
-    <>
-      <Box
-        component="div"
-        sx={{ display: "flex", flexWrap: "wrap", p: theme.spacing(1, 0) }}
-      >
-        {artifacts.map((artifact) => {
-          const urlPath = `/artifacts/${study.id}/${artifact.artifact_id}`
-          return (
-            <Card
-              key={artifact.artifact_id}
-              sx={{
-                marginBottom: theme.spacing(2),
-                width: width,
-                margin: theme.spacing(0, 1, 1, 0),
-                border: `1px solid ${theme.palette.divider}`,
-              }}
-            >
-              <ArtifactCardMedia
-                artifact={artifact}
-                urlPath={urlPath}
-                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% - ${
-                      isThreejsArtifact(artifact)
-                        ? theme.spacing(12)
-                        : theme.spacing(8)
-                    })`,
-                  }}
-                >
-                  {artifact.filename}
-                </Typography>
-                {isThreejsArtifact(artifact) ? (
-                  <IconButton
-                    aria-label="show artifact 3d model"
-                    size="small"
-                    color="inherit"
-                    sx={{ margin: "auto 0" }}
-                    onClick={() => {
-                      openThreejsArtifactModal(urlPath, artifact)
-                    }}
-                  >
-                    <FullscreenIcon />
-                  </IconButton>
-                ) : null}
-                {isTableArtifact(artifact) ? (
-                  <IconButton
-                    aria-label="show artifact table"
-                    size="small"
-                    color="inherit"
-                    sx={{ margin: "auto 0" }}
-                    onClick={() => {
-                      openTableArtifactModal(urlPath, artifact)
-                    }}
-                  >
-                    <FullscreenIcon />
-                  </IconButton>
-                ) : null}
-                <IconButton
-                  aria-label="delete artifact"
-                  size="small"
-                  color="inherit"
-                  sx={{ margin: "auto 0" }}
-                  onClick={() => {
-                    openDeleteArtifactDialog(study.id, artifact)
-                  }}
-                >
-                  <DeleteIcon />
-                </IconButton>
-                <IconButton
-                  aria-label="download artifact"
-                  size="small"
-                  color="inherit"
-                  download={artifact.filename}
-                  sx={{ margin: "auto 0" }}
-                  href={urlPath}
-                >
-                  <DownloadIcon />
-                </IconButton>
-              </CardContent>
-            </Card>
-          )
-        })}
-        <StudyArtifactUploader study={study} width={width} height={height} />
-      </Box>
-      {renderDeleteArtifactDialog()}
-      {renderThreejsArtifactModal()}
-      {renderTableArtifactModal()}
-    </>
-  )
-}
-
-const StudyArtifactUploader: FC<{
-  study: StudyDetail
-  width: string
-  height: string
-}> = ({ study, width, height }) => {
-  const theme = useTheme()
-  const [dragOver, setDragOver] = useState<boolean>(false)
-  const action = actionCreator()
-
-  const inputRef = useRef<HTMLInputElement>(null)
-  const handleClick: MouseEventHandler = () => {
-    if (!inputRef || !inputRef.current) {
-      return
-    }
-    inputRef.current.click()
-  }
-
-  const handleOnChange: ChangeEventHandler<HTMLInputElement> = (e) => {
-    const files = e.target.files
-    if (files === null) {
-      return
-    }
-    action.uploadStudyArtifact(study.id, files[0])
-  }
-
-  const handleDragOver: DragEventHandler = (e) => {
-    e.stopPropagation()
-    e.preventDefault()
-    e.dataTransfer.dropEffect = "copy"
-    setDragOver(true)
-  }
-
-  const handleDragLeave: DragEventHandler = (e) => {
-    e.stopPropagation()
-    e.preventDefault()
-    e.dataTransfer.dropEffect = "copy"
-    setDragOver(false)
-  }
-
-  const handleDrop: DragEventHandler = (e) => {
-    e.stopPropagation()
-    e.preventDefault()
-    const files = e.dataTransfer.files
-    setDragOver(false)
-    for (let i = 0; i < files.length; i++) {
-      action.uploadStudyArtifact(study.id, files[i])
-    }
-  }
-
-  return (
-    <Card
-      sx={{
-        marginBottom: theme.spacing(2),
-        width: width,
-        minHeight: height,
-        margin: theme.spacing(0, 1, 1, 0),
-        border: dragOver
-          ? `3px dashed ${theme.palette.mode === "dark" ? "white" : "black"}`
-          : `1px solid ${theme.palette.divider}`,
-      }}
-      onDragOver={handleDragOver}
-      onDragLeave={handleDragLeave}
-      onDrop={handleDrop}
-    >
-      <CardActionArea
-        onClick={handleClick}
-        sx={{
-          height: "100%",
-        }}
-      >
-        <CardContent
-          sx={{
-            display: "flex",
-            height: "100%",
-            flexDirection: "column",
-            justifyContent: "center",
-            alignItems: "center",
-          }}
-        >
-          <UploadFileIcon
-            sx={{ fontSize: 80, marginBottom: theme.spacing(2) }}
-          />
-          <input
-            type="file"
-            ref={inputRef}
-            onChange={handleOnChange}
-            style={{ display: "none" }}
-          />
-          <Typography>Upload a New File</Typography>
-          <Typography
-            sx={{ textAlign: "center", color: theme.palette.grey.A400 }}
-          >
-            Drag your file here or click to browse.
-          </Typography>
-        </CardContent>
-      </CardActionArea>
-    </Card>
-  )
-}
diff --git a/optuna_dashboard/ts/components/StudyHistory.tsx b/optuna_dashboard/ts/components/StudyHistory.tsx
index bcf161a4d..532aad615 100644
--- a/optuna_dashboard/ts/components/StudyHistory.tsx
+++ b/optuna_dashboard/ts/components/StudyHistory.tsx
@@ -20,7 +20,7 @@ import {
   useStudySummaryValue,
 } from "../state"
 import { artifactIsAvailable } from "../state"
-import { StudyArtifactCards } from "./Artifact/StudyArtifactCards"
+import { ArtifactCards } from "./Artifact/ArtifactCards"
 import { BestTrialsCard } from "./BestTrialsCard"
 import { GraphHistory } from "./GraphHistory"
 import { GraphHyperparameterImportance } from "./GraphHyperparameterImportances"
@@ -201,7 +201,9 @@ export const StudyHistory: FC<{ studyId: number }> = ({ studyId }) => {
                 >
                   Study Artifacts
                 </Typography>
-                <StudyArtifactCards study={studyDetail} />
+                <ArtifactCards
+                  studyOrTrial={{ type: "study", study: studyDetail }}
+                />
               </CardContent>
             </Card>
           </Grid>
diff --git a/optuna_dashboard/ts/components/TrialList.tsx b/optuna_dashboard/ts/components/TrialList.tsx
index 2c59c4edb..a94c2ac28 100644
--- a/optuna_dashboard/ts/components/TrialList.tsx
+++ b/optuna_dashboard/ts/components/TrialList.tsx
@@ -30,7 +30,7 @@ import { actionCreator } from "../action"
 import { useConstants } from "../constantsProvider"
 import { artifactIsAvailable } from "../state"
 import { useQuery } from "../urlQuery"
-import { TrialArtifactCards } from "./Artifact/TrialArtifactCards"
+import { ArtifactCards } from "./Artifact/ArtifactCards"
 import { TrialNote } from "./Note"
 import { TrialFormWidgets } from "./TrialFormWidgets"
 
@@ -305,7 +305,25 @@ export const TrialListDetail: FC<{
           value !== null ? renderInfo(key, value) : null
         )}
       </Box>
-      {artifactEnabled && <TrialArtifactCards trial={trial} />}
+      {artifactEnabled && (
+        <>
+          <Typography
+            variant="h5"
+            sx={{ fontWeight: theme.typography.fontWeightBold }}
+          >
+            Artifacts
+          </Typography>
+          <ArtifactCards
+            studyOrTrial={{
+              type: "trial",
+              trial,
+            }}
+            isArtifactModifiable={
+              trial.state === "Running" || trial.state === "Waiting"
+            }
+          />
+        </>
+      )}
     </Box>
   )
 }