diff --git a/frontend/components/AudioPlayer.tsx b/frontend/components/AudioPlayer.tsx
index 92edb60..3d41340 100644
--- a/frontend/components/AudioPlayer.tsx
+++ b/frontend/components/AudioPlayer.tsx
@@ -49,19 +49,30 @@ export default function AudioPlayer({ track }: AudioPlayerProps) {
     if (!audio) return
 
     const updateTime = () => setCurrentTime(audio.currentTime)
-    const updateDuration = () => setDuration(audio.duration)
+    const updateDuration = () => {
+      if (audio.duration && isFinite(audio.duration)) {
+        setDuration(audio.duration)
+      }
+    }
     const handleEnded = () => setIsPlaying(false)
 
     audio.addEventListener("timeupdate", updateTime)
     audio.addEventListener("loadedmetadata", updateDuration)
+    audio.addEventListener("durationchange", updateDuration)
     audio.addEventListener("ended", handleEnded)
 
+    // Initialize duration if already loaded
+    if (audio.duration && isFinite(audio.duration)) {
+      setDuration(audio.duration)
+    }
+
     return () => {
       audio.removeEventListener("timeupdate", updateTime)
       audio.removeEventListener("loadedmetadata", updateDuration)
+      audio.removeEventListener("durationchange", updateDuration)
       audio.removeEventListener("ended", handleEnded)
     }
-  }, [])
+  }, [track?.id])
 
   const loadWaveform = async (trackId: string) => {
     setIsLoadingWaveform(true)
@@ -195,30 +206,32 @@ export default function AudioPlayer({ track }: AudioPlayerProps) {
               </div>
             ) : waveformPeaks.length > 0 ? (
               <div className="flex items-center h-full w-full gap-[1px] px-1">
-                {waveformPeaks.map((peak: number, index: number) => {
-                  const isPlayed = (index / waveformPeaks.length) * 100 <= progress
-                  return (
-                    <div
-                      key={index}
-                      className="flex items-center justify-center"
-                      style={{
-                        width: "2px",
-                        height: "100%",
-                        flexShrink: 0
-                      }}
-                    >
+                {waveformPeaks
+                  .filter((_: number, index: number) => index % 4 === 0) // Take every 4th peak to reduce from 800 to 200
+                  .map((peak: number, index: number) => {
+                    const originalIndex = index * 4
+                    const isPlayed = (originalIndex / waveformPeaks.length) * 100 <= progress
+                    return (
                       <div
-                        className={`rounded-sm transition-colors ${
-                          isPlayed ? "bg-orange-500" : "bg-gray-400"
-                        }`}
+                        key={index}
+                        className="flex-1 flex items-center justify-center"
                         style={{
-                          width: "2px",
-                          height: `${Math.max(peak * 70, 4)}%`,
+                          minWidth: "1px",
+                          maxWidth: "4px",
+                          height: "100%",
                         }}
-                      />
-                    </div>
-                  )
-                })}
+                      >
+                        <div
+                          className={`w-full rounded-sm transition-colors ${
+                            isPlayed ? "bg-orange-500" : "bg-gray-400"
+                          }`}
+                          style={{
+                            height: `${Math.max(peak * 70, 4)}%`,
+                          }}
+                        />
+                      </div>
+                    )
+                  })}
               </div>
             ) : (
               <div className="flex items-center h-full w-full px-2">