diff --git a/components/audio-player.tsx b/components/audio-player.tsx
index db85a3d5..7d615000 100644
--- a/components/audio-player.tsx
+++ b/components/audio-player.tsx
@@ -1,9 +1,13 @@
 import React, { useRef, useState, useEffect } from "react";
 
-const AudioPlayer = (props: {urlAudio: string}) => {
+interface AudioPlayerProps {
+  urlAudio: string;
+  fileName: string; // ✅ Tambahkan props ini
+}
+
+const AudioPlayer: React.FC<AudioPlayerProps> = ({ urlAudio, fileName }) => {
   const audioRef = useRef<HTMLAudioElement>(null);
   const [currentTime, setCurrentTime] = useState(0);
-  const {urlAudio} = props
 
   const playAudio = () => {
     audioRef.current?.play();
@@ -29,7 +33,6 @@ const AudioPlayer = (props: {urlAudio: string}) => {
     };
 
     audio.addEventListener("timeupdate", updateTime);
-
     return () => {
       audio.removeEventListener("timeupdate", updateTime);
     };
@@ -37,24 +40,20 @@ const AudioPlayer = (props: {urlAudio: string}) => {
 
   const formatTime = (time: number) => {
     const minutes = Math.floor(time / 60);
-    const seconds = Math.floor(time % 60)
-      .toString()
-      .padStart(2, "0");
+    const seconds = Math.floor(time % 60).toString().padStart(2, "0");
     return `${minutes}:${seconds}`;
   };
 
   return (
-    <div style={{ textAlign: "center", marginTop: "50px" }}>
-      <h2>Pemutar Audio</h2>
-      <audio ref={audioRef} src={urlAudio} />
-      <div style={{ marginTop: "10px" }}>
+    <div className="mt-2">
+      <h2 className="text-lg font-semibold">{fileName}</h2>
+      <audio ref={audioRef} src={urlAudio} controls className="mt-1 w-full" />
+      {/* <div className="mt-2 space-x-2">
         <button onClick={playAudio}>▶️ Play</button>
         <button onClick={pauseAudio}>⏸️ Pause</button>
         <button onClick={stopAudio}>⏹️ Stop</button>
       </div>
-      <div style={{ marginTop: "10px" }}>
-        <span>{formatTime(currentTime)}</span>
-      </div>
+      <div className="mt-1 text-sm text-gray-500">{formatTime(currentTime)}</div> */}
     </div>
   );
 };
diff --git a/components/form/content/audio-detail-form.tsx b/components/form/content/audio-detail-form.tsx
index 4154f7da..78bce3b5 100644
--- a/components/form/content/audio-detail-form.tsx
+++ b/components/form/content/audio-detail-form.tsx
@@ -157,7 +157,7 @@ export default function FormAudioDetail() {
   const [wavesurfer, setWavesurfer] = useState<WaveSurfer>();
   const [isPlaying, setIsPlaying] = useState(false);
   const [approval, setApproval] = useState<any>();
-  
+
   const onDrop = (acceptedFiles: File[]) => {
     setUploadedFiles(acceptedFiles);
     const blobUrls = acceptedFiles.map((file) => URL.createObjectURL(file));
@@ -298,17 +298,20 @@ export default function FormAudioDetail() {
           setSelectedTarget(matchingCategory.name);
         }
 
-        setSelectedTarget(details?.categoryId); 
+        setSelectedTarget(details?.categoryId);
 
         const filesData = details?.files || [];
         const audioFiles = filesData.filter(
           (file: any) =>
-            file.contentType && file.contentType.startsWith("video/webm")
+            file.contentType &&
+            (file.contentType.startsWith("audio/") ||
+              file.contentType.includes("webm"))
         );
 
         const fileUrls = audioFiles.map((file: { secondaryUrl: string }) =>
           file.secondaryUrl ? file.secondaryUrl : "default-audio.mp3"
         );
+        console.log("Audio file URLs:", fileUrls);
 
         setDetailThumb(fileUrls);
 
@@ -463,7 +466,7 @@ export default function FormAudioDetail() {
     if (audioPlaying === audioSrc) {
       setAudioPlaying(null);
     } else {
-      setAudioPlaying(audioSrc); 
+      setAudioPlaying(audioSrc);
     }
   };
 
@@ -515,7 +518,7 @@ export default function FormAudioDetail() {
                   <div className="py-3 w-full space-y-2">
                     <Label>{t("category", { defaultValue: "Category" })}</Label>
                     <Select
-                      value={detail?.category.name} 
+                      value={detail?.category.name}
                       onValueChange={(id) => {
                         console.log("Selected Category:", id);
                         setSelectedTarget(id);
@@ -560,16 +563,13 @@ export default function FormAudioDetail() {
                   <div className="w-full">
                     {detailThumb.map((url, index) => (
                       <div key={index}>
-                        {/* <WavesurferPlayer
-                          url={url}
-                          waveColor="red"
-                          height={80}
-                          onReady={(ws: any) => onReady(ws, index)}
-                        />
-                        <Button onClick={() => onPlayPause(index)}>
-                          {isPlayingIndex === index ? "Pause" : "Play"}
-                        </Button> */}
-                        <AudioPlayer urlAudio={url} />
+                        {files.map((file, index) => (
+                          <AudioPlayer
+                            key={index}
+                            urlAudio={file.url}
+                            fileName={file.fileName}
+                          />
+                        ))}
                       </div>
                     ))}
                   </div>