diff --git a/optuna_dashboard/ts/components/ArtifactCardMedia.tsx b/optuna_dashboard/ts/components/ArtifactCardMedia.tsx
index 6326cb16..282b7432 100644
--- a/optuna_dashboard/ts/components/ArtifactCardMedia.tsx
+++ b/optuna_dashboard/ts/components/ArtifactCardMedia.tsx
@@ -4,7 +4,7 @@ import {
   isThreejsArtifact,
 } from "./ThreejsArtifactViewer"
 import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile"
-import { CardMedia } from "@mui/material"
+import { CardMedia, Box } from "@mui/material"
 
 export const ArtifactCardMedia: FC<{
   artifact: Artifact
@@ -35,9 +35,18 @@ export const ArtifactCardMedia: FC<{
     )
   } else if (artifact.mimetype.startsWith("audio")) {
     return (
-      <audio controls>
-        <source src={urlPath} type={artifact.mimetype} />
-      </audio>
+      <Box
+        style={{
+          width: "100%",
+          height: height,
+          display: "flex",
+          alignItems: "center",
+        }}
+      >
+        <audio controls style={{ width: "100%" }}>
+          <source src={urlPath} type={artifact.mimetype} />
+        </audio>
+      </Box>
     )
   } else if (artifact.mimetype.startsWith("image")) {
     return (