diff --git a/src/components/playlist/PlaylistComponent.tsx b/src/components/playlist/PlaylistComponent.tsx
index b962cdbe..c1059c0e 100644
--- a/src/components/playlist/PlaylistComponent.tsx
+++ b/src/components/playlist/PlaylistComponent.tsx
@@ -111,19 +111,29 @@ interface PlaylistWaveformProps {
   isActive: boolean;
 }
 
+// ─── PlaylistWaveform ───────────────────────────────────────────────────────
+// FIXED: inactive tracks must NEVER touch audio src or the MediaElement backend.
+// Active track re-initializes only when the track id actually changes.
 function PlaylistWaveform({ track, isActive }: PlaylistWaveformProps) {
   const containerRef = useRef<HTMLDivElement | null>(null);
   const wsRef = useRef<WaveSurfer | null>(null);
   const timeRef = useRef<HTMLDivElement | null>(null);
   const durRef = useRef<HTMLDivElement | null>(null);
+  const lastTrackIdRef = useRef<string | null>(null);
 
   useEffect(() => {
-    let ws: WaveSurfer | null = null;
     let isMounted = true;
 
     const initWaveform = async () => {
       if (!containerRef.current) return;
-      if (wsRef.current) { try { wsRef.current.destroy(); } catch { /* ok */ } wsRef.current = null; }
+
+      // Destroy previous instance only if track actually changed
+      if (wsRef.current) {
+        try { wsRef.current.destroy(); } catch { /* ok */ }
+        wsRef.current = null;
+      }
+      containerRef.current.innerHTML = "";
+      lastTrackIdRef.current = track.id;
 
       const canvas = document.createElement("canvas");
       const ctx = canvas.getContext("2d");
@@ -134,88 +144,77 @@ function PlaylistWaveform({ track, isActive }: PlaylistWaveformProps) {
         track.waveformData?.length > 0
           ? track.waveformData
           : await getTrackWaveform(track.id);
-      if (!isMounted) return;
-
-      const hasPeaks = peaks && peaks.length > 0;
+      if (!isMounted || !containerRef.current) return;
 
-      let parsedDur = 0;
-      if (track.duration && typeof track.duration === "string") {
-        const parts = track.duration.split(":");
-        if (parts.length === 2) {
-          parsedDur = parseInt(parts[0], 10) * 60 + parseInt(parts[1], 10);
-        }
-      }
+      const parsedDur = parseDur(track.duration ?? "");
 
       if (isActive) {
-        ws = WaveSurfer.create({
-          container: containerRef.current!,
+        // Active: share the global audio element — DO NOT provide url
+        const ws = WaveSurfer.create({
+          container: containerRef.current,
           waveColor: g,
           progressColor: pg,
           barWidth: 2,
           barGap: 0.5,
           barRadius: 2,
           height: 80,
-          backend: "MediaElement",
-          media: audio,
-          peaks: hasPeaks ? [peaks] : undefined,
+          backend: "MediaElement" as const,
+          media: audio,                         // ← share, don't load new src
+          peaks: peaks.length > 0 ? [peaks] : undefined,
           duration: parsedDur > 0 ? parsedDur : undefined,
         });
 
+        wsRef.current = ws;
         setGlobalWaveSurfer(ws, track.id);
-        setTrackLoadedLocally(track.id);
+        setTrackLoadedLocally(track.id);        // tell audioService: src already set
 
-        ws.on("timeupdate", (currentTime: number) => {
-          if (timeRef.current) timeRef.current.textContent = fmt(currentTime);
+        ws.on("timeupdate", (t: number) => {
+          if (timeRef.current) timeRef.current.textContent = fmt(t);
         });
-
-        ws.on("interaction", (newTime: number) => {
-          seekAudio(newTime);
-        });
-
-        ws.on("decode", (dur: number) => {
-          if (durRef.current) durRef.current.textContent = fmt(dur);
+        ws.on("interaction", (t: number) => seekAudio(t));
+        ws.on("decode", (d: number) => {
+          if (durRef.current) durRef.current.textContent = fmt(d);
         });
+        ws.on("error", () => {});
       } else {
-        // FIX 1: always set height (was missing in inactive branch)
-        // FIX 2: always provide url so WaveSurfer has an audio source to decode
-        //        peaks alone give shape but no duration/interaction without a url
-        ws = WaveSurfer.create({
-          container: containerRef.current!,
+        // Inactive: peaks-only, NO url, NO MediaElement — never touch global audio
+        const ws = WaveSurfer.create({
+          container: containerRef.current,
           waveColor: g,
           progressColor: pg,
           barWidth: 2,
           barGap: 0.5,
           barRadius: 2,
-          height: 80,           // ← FIX 1: was missing, caused 0px render
+          height: 80,
           interact: false,
-          peaks: hasPeaks ? [peaks] : undefined,
+          peaks: peaks.length > 0 ? [peaks] : undefined,
           duration: parsedDur > 0 ? parsedDur : undefined,
-          url: track.audioUrl,  // ← FIX 2: was `!hasPeaks ? track.audioUrl : undefined`
+          // ← NO url here: loading audio for display-only tracks hijacks the
+          //   global <audio> element and corrupts the active track's playhead
         });
 
-        ws.on("decode", (dur: number) => {
-          if (durRef.current) durRef.current.textContent = fmt(dur);
+        wsRef.current = ws;
+        ws.on("decode", (d: number) => {
+          if (durRef.current) durRef.current.textContent = fmt(d);
         });
+        ws.on("error", () => {});
       }
-
-      ws.on("error", () => { });
-      wsRef.current = ws;
     };
 
     initWaveform();
 
     return () => {
       isMounted = false;
-      try { if (ws) ws.destroy(); } catch { /* ok */ }
-      wsRef.current = null;
+      if (wsRef.current) {
+        try { wsRef.current.destroy(); } catch { /* ok */ }
+        wsRef.current = null;
+      }
     };
-  }, [isActive, track.id, track.audioUrl]);
+  }, [isActive, track.id, track.audioUrl]); // re-run when track or active state changes
 
   return (
     <div data-test="playlist-component-waveform" style={{ position: "relative", width: "100%" }}>
       <div style={{ position: "relative", cursor: isActive ? "pointer" : "default" }}>
-        {/* FIX 3: explicit height on the DOM node — WaveSurfer needs the container
-            to already have dimensions before it mounts, otherwise it collapses to 0px */}
         <div ref={containerRef} style={{ transform: "scaleY(-1)", height: 80 }} />
         <div style={{ position: "absolute", inset: 0, background: "rgba(255,255,255,0.08)", pointerEvents: "none", opacity: 0.5, borderRadius: 2 }} />
         <div ref={timeRef} style={{ position: "absolute", left: 0, top: "55%", transform: "translateY(-50%)", fontSize: 11, background: "rgba(0,0,0,0.75)", color: "#fff", padding: "2px", zIndex: 10 }}>0:00</div>
@@ -329,7 +328,8 @@ export default function PlaylistComponent({
   const { currentTrack, isPlaying, setTrack, togglePlay, addTracksNext, activeSourceId } = usePlayerStore();
   const { user } = useAuthStore();
 
-  const instanceId = useMemo(() => uniqueId ?? `playlist-instance-${Math.random().toString(36).substr(2, 9)}`, [uniqueId]);
+  const instanceIdRef = useRef(uniqueId ?? `playlist-instance-${Math.random().toString(36).substr(2, 9)}`);
+  const instanceId = uniqueId ?? instanceIdRef.current;
 
   // Defensive: check for valid playlistSlug
   const hasValidSlug = !!playlist.playlistSlug && playlist.playlistSlug !== "undefined" && playlist.playlistSlug !== "";
@@ -427,8 +427,10 @@ export default function PlaylistComponent({
 
   const handleTrackPlay = (track: Track) => {
     if (currentTrack?.id === track.id && isComponentActive) {
+      // Same track, same playlist instance → just toggle
       togglePlay();
     } else {
+      // Different track OR different source → always start from 0
       setTrack(track, playlist.tracks, 0, instanceId);
     }
   };
diff --git a/src/components/playlist/PlaylistStatsWaveform.tsx b/src/components/playlist/PlaylistStatsWaveform.tsx
index 7e43e020..e1381040 100644
--- a/src/components/playlist/PlaylistStatsWaveform.tsx
+++ b/src/components/playlist/PlaylistStatsWaveform.tsx
@@ -1,10 +1,12 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
+import WaveSurfer from "wavesurfer.js";
 import {
   formatDuration,
   type PlaylistDetails,
 } from "@/services/api/playlist/playlist.service";
 import { getTrackComments } from "@/services/mocks/Track.service";
-import TrackWaveform from "@/pages/[username]/[trackSlug]/components/TrackWaveform";
+import { audio, seekAudio, setGlobalWaveSurfer, setTrackLoadedLocally } from "@/services/audioService";
+import { getTrackWaveform } from "@/services/track.service";
 import type { Track } from "@/types/track";
 
 interface Comment {
@@ -21,6 +23,94 @@ interface PlaylistStatsCommentsProps {
   extraDurationSeconds?: number;
 }
 
+function fmt(sec: number) {
+  const m = Math.floor(sec / 60);
+  const s = Math.round(sec) % 60;
+  return `${m}:${s.toString().padStart(2, "0")}`;
+}
+
+function StaticWaveform({ track, isActive }: { track: Track; isActive: boolean }) {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const wsRef = useRef<WaveSurfer | null>(null);
+  const timeRef = useRef<HTMLDivElement | null>(null);
+  const durRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    const init = async () => {
+      if (!containerRef.current) return;
+      if (wsRef.current) { try { wsRef.current.destroy(); } catch (e) { /* ignore */ } wsRef.current = null; }
+      containerRef.current.innerHTML = "";
+
+      const canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+
+      const g = ctx.createLinearGradient(0, 0, 0, 100);
+      g.addColorStop(0, "#656666"); g.addColorStop(0.7, "#656666");
+      g.addColorStop(0.71, "#ffffff"); g.addColorStop(0.72, "#ffffff");
+      g.addColorStop(0.73, "#B1B1B1"); g.addColorStop(1, "#B1B1B1");
+
+      const pg = ctx.createLinearGradient(0, 0, 0, 100);
+      pg.addColorStop(0, "#F6B094"); pg.addColorStop(0.7, "#F6B094");
+      pg.addColorStop(0.71, "#ffffff"); pg.addColorStop(0.72, "#ffffff");
+      pg.addColorStop(0.73, "#EB4926"); pg.addColorStop(1, "#EE772F");
+
+      const peaks = track.waveformData?.length > 0
+        ? track.waveformData
+        : await getTrackWaveform(track.id);
+      if (!isMounted || !containerRef.current) return;
+
+      let parsedDur = 0;
+      const parts = track.duration?.split(":");
+      if (parts?.length === 2) parsedDur = parseInt(parts[0]) * 60 + parseInt(parts[1]);
+
+      const ws = WaveSurfer.create({
+        container: containerRef.current,
+        waveColor: g,
+        progressColor: pg,
+        barWidth: 2, barGap: 1, barRadius: 2,
+        height: 80,
+        ...(isActive ? { backend: "MediaElement" as const, media: audio } : {}),
+        peaks: peaks.length > 0 ? [peaks] : undefined,
+        duration: parsedDur > 0 ? parsedDur : undefined,
+      });
+
+      wsRef.current = ws;
+
+      if (isActive) {
+        setTrackLoadedLocally(null);
+        setGlobalWaveSurfer(ws, track.id);
+        ws.on("interaction", (t: number) => seekAudio(t));
+        ws.on("timeupdate", (t: number) => {
+          if (timeRef.current) timeRef.current.textContent = fmt(t);
+        });
+      }
+
+      ws.on("decode", (d: number) => {
+        if (durRef.current) durRef.current.textContent = fmt(d);
+      });
+      ws.on("error", () => {});
+    };
+
+    init();
+    return () => {
+      isMounted = false;
+      if (wsRef.current) { try { wsRef.current.destroy(); } catch (e) { /* ignore */ } wsRef.current = null; }
+    };
+  }, [track.id, track.audioUrl, isActive]);
+
+  return (
+    <div style={{ position: "relative", width: "100%", height: 80 }}>
+      <div ref={containerRef} style={{ transform: "scaleY(-1)", height: 80 }} />
+      <div style={{ position: "absolute", inset: 0, background: "rgba(255,255,255,0.08)", pointerEvents: "none", opacity: 0.5, borderRadius: 2 }} />
+      <div ref={timeRef} style={{ position: "absolute", left: 0, top: "55%", transform: "translateY(-50%)", fontSize: 11, background: "rgba(0,0,0,0.75)", color: "#fff", padding: "2px", zIndex: 10 }}>0:00</div>
+      <div ref={durRef} style={{ position: "absolute", right: 0, top: "55%", transform: "translateY(-50%)", fontSize: 11, background: "rgba(0,0,0,0.75)", color: "#fff", padding: "2px", zIndex: 10 }}>0:00</div>
+    </div>
+  );
+}
+
 export default function PlaylistStatsWaveform({
   playlist,
   isPlaying = false,
@@ -73,7 +163,6 @@ export default function PlaylistStatsWaveform({
         setComments([]);
         return;
       }
-
       try {
         const res = await getTrackComments(activeTrackId);
         const raw = Array.isArray(res) ? res : ((res as any)?.data ?? []);
@@ -87,7 +176,6 @@ export default function PlaylistStatsWaveform({
             timestamp: Number(item?.timestamp ?? item?.timestampSec ?? 0),
           }))
           .slice(0, 5);
-
         if (!cancelled) setComments(mapped);
       } catch {
         if (!cancelled) setComments([]);
@@ -95,9 +183,7 @@ export default function PlaylistStatsWaveform({
     }
 
     loadComments();
-    return () => {
-      cancelled = true;
-    };
+    return () => { cancelled = true; };
   }, [activeTrackId, commentsProp, showComments]);
 
   return (
@@ -107,11 +193,12 @@ export default function PlaylistStatsWaveform({
           <div
             data-test="playlist-waveform-container"
             className="transition-opacity duration-150 w-full min-w-0"
-            style={{ minHeight: "120px" }}
+            style={{ minHeight: "80px" }}
           >
-            <TrackWaveform
+            <StaticWaveform
               key={`${playlist.playlist_id}-${waveformTrack.id}`}
               track={waveformTrack}
+              isActive={isPlaying && hasActiveTrackInPlaylist}
             />
           </div>
         </div>
@@ -152,4 +239,4 @@ export default function PlaylistStatsWaveform({
       )}
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/pages/[username]/[trackSlug]/components/TrackWaveform.tsx b/src/pages/[username]/[trackSlug]/components/TrackWaveform.tsx
index 40c07bce..2b53cfc2 100644
--- a/src/pages/[username]/[trackSlug]/components/TrackWaveform.tsx
+++ b/src/pages/[username]/[trackSlug]/components/TrackWaveform.tsx
@@ -11,6 +11,7 @@ import {
   audio,
   seekAudio,
   setGlobalWaveSurfer,
+  setTrackLoadedLocally,
 } from "../../../../services/audioService";
 import { getTrackWaveform } from "../../../../services/track.service";
 import { usePlayerStore } from "../../../../stores/player.store";
@@ -41,132 +42,136 @@ const TrackWaveform = forwardRef<
     },
   }));
 
-  useEffect(() => {
-    let ws: WaveSurfer | null = null;
-    let isMounted = true;
-
-    const initWaveform = async () => {
-      if (!waveformRef.current) return;
-
-      const canvas = document.createElement("canvas");
-      const ctx = canvas.getContext("2d");
-      if (!ctx) return;
-
-      const gradient = ctx.createLinearGradient(0, 0, 0, 100);
-      gradient.addColorStop(0, "#656666");
-      gradient.addColorStop(0.7, "#656666");
-      gradient.addColorStop(0.71, "#ffffff");
-      gradient.addColorStop(0.72, "#ffffff");
-      gradient.addColorStop(0.73, "#B1B1B1");
-      gradient.addColorStop(1, "#B1B1B1");
-
-      const progressGradient = ctx.createLinearGradient(0, 0, 0, 100);
-      progressGradient.addColorStop(0, "#F6B094");
-      progressGradient.addColorStop(0.7, "#F6B094");
-      progressGradient.addColorStop(0.71, "#ffffff");
-      progressGradient.addColorStop(0.72, "#ffffff");
-      progressGradient.addColorStop(0.73, "#EB4926");
-      progressGradient.addColorStop(1, "#EE772F");
-
-      const peaks =
-        Array.isArray(track.waveformData) && track.waveformData.length > 0
-          ? track.waveformData
-          : await getTrackWaveform(track.id);
-      if (!isMounted) return;
-
-      let parsedDur = 0;
-      if (track.duration && typeof track.duration === "string") {
-        const parts = track.duration.split(":");
-        if (parts.length === 2) {
-          parsedDur = parseInt(parts[0], 10) * 60 + parseInt(parts[1], 10);
-        }
-      }
-
-      // FIX: always use MediaElement backend tied to the shared audio element.
-      // Never pass `url` here — that makes WaveSurfer own a second audio source
-      // which conflicts with the global player.
-      ws = WaveSurfer.create({
-        container: waveformRef.current,
-        waveColor: gradient,
-        progressColor: progressGradient,
-        barWidth: 2,
-        barGap: 1,
-        barRadius: 2,
-        backend: "MediaElement",
-        media: audio,
-        peaks: peaks.length > 0 ? [peaks] : undefined,
-        duration: parsedDur > 0 ? parsedDur : undefined,
-        // FIX: do NOT pass `url` — it causes WaveSurfer to load a second audio
-        // context that fights the global <audio> element owned by audioService.
-      });
 
-      waveSurferRef.current = ws;
-
-      // FIX: only register as the global waveform if this track is ALREADY the
-      // active track in the player. If another track is playing (e.g. user came
-      // from the feed) we must NOT steal the global reference — that would break
-      // the currently-playing TrackCard waveform.
-      const playerState = usePlayerStore.getState();
-      if (
-        !playerState.currentTrack ||
-        playerState.currentTrack.id === track.id
-      ) {
-        setGlobalWaveSurfer(ws, track.id);
-      }
-
-      const formatTime = (seconds: number) => {
-        const minutes = Math.floor(seconds / 60);
-        const sec = Math.round(seconds) % 60;
-        return `${minutes}:${sec.toString().padStart(2, "0")}`;
-      };
+    const isInitializedRef = useRef(false);
+
+    useEffect(() => {
+      let isMounted = true;
+      isInitializedRef.current = false;
 
-      ws.on("decode", (duration) => {
-        if (durationRef.current) {
-          durationRef.current.textContent = formatTime(duration);
+      const initWaveform = async () => {
+        if (!waveformRef.current || isInitializedRef.current) return;
+        isInitializedRef.current = true;
+
+        if (waveSurferRef.current) {
+          try { waveSurferRef.current.destroy(); } catch { /* ok */ }
+          waveSurferRef.current = null;
+        }
+        waveformRef.current.innerHTML = "";
+
+        const canvas = document.createElement("canvas");
+        const ctx = canvas.getContext("2d");
+        if (!ctx) return;
+
+        const gradient = ctx.createLinearGradient(0, 0, 0, 100);
+        gradient.addColorStop(0, "#656666");
+        gradient.addColorStop(0.7, "#656666");
+        gradient.addColorStop(0.71, "#ffffff");
+        gradient.addColorStop(0.72, "#ffffff");
+        gradient.addColorStop(0.73, "#B1B1B1");
+        gradient.addColorStop(1, "#B1B1B1");
+
+        const progressGradient = ctx.createLinearGradient(0, 0, 0, 100);
+        progressGradient.addColorStop(0, "#F6B094");
+        progressGradient.addColorStop(0.7, "#F6B094");
+        progressGradient.addColorStop(0.71, "#ffffff");
+        progressGradient.addColorStop(0.72, "#ffffff");
+        progressGradient.addColorStop(0.73, "#EB4926");
+        progressGradient.addColorStop(1, "#EE772F");
+
+        const peaks =
+          Array.isArray(track.waveformData) && track.waveformData.length > 0
+            ? track.waveformData
+            : await getTrackWaveform(track.id);
+
+        if (!isMounted || !waveformRef.current) return;
+
+        let parsedDur = 0;
+        if (track.duration && typeof track.duration === "string") {
+          const parts = track.duration.split(":");
+          if (parts.length === 2) {
+            parsedDur = parseInt(parts[0], 10) * 60 + parseInt(parts[1], 10);
+          }
         }
-      });
 
-      ws.on("timeupdate", (currentTime) => {
-        if (timeRef.current) {
-          timeRef.current.textContent = formatTime(currentTime);
+        const playerState = usePlayerStore.getState();
+        const isThisTrackActive =
+          !playerState.currentTrack || playerState.currentTrack.id === track.id;
+
+        const ws = WaveSurfer.create({
+          container: waveformRef.current,
+          waveColor: gradient,
+          progressColor: progressGradient,
+          barWidth: 2,
+          barGap: 1,
+          barRadius: 2,
+          ...(isThisTrackActive
+            ? { backend: "MediaElement" as const, media: audio }
+            : {}),
+          peaks: peaks.length > 0 ? [peaks] : undefined,
+          duration: parsedDur > 0 ? parsedDur : undefined,
+        });
+
+        waveSurferRef.current = ws;
+
+        if (isThisTrackActive) {
+          setTrackLoadedLocally(null);
+          setGlobalWaveSurfer(ws, track.id);
         }
-      });
 
-      // FIX: on waveform click, only seek — never call ws.play() or audio.play().
-      // Playback is controlled exclusively by the store → audioService pipeline.
-      // WaveSurfer's built-in "interaction" event fires before our onClick, so we
-      // suppress it here and let the div's onClick bubble up to onPlayPause.
-      ws.on("interaction", (newTime: number) => {
-        lastInteractionTimeRef.current = newTime;
-        seekAudio(newTime);
-      });
+        const formatTime = (seconds: number) => {
+          const minutes = Math.floor(seconds / 60);
+          const sec = Math.round(seconds) % 60;
+          return `${minutes}:${sec.toString().padStart(2, "0")}`;
+        };
+
+        ws.on("decode", (duration) => {
+          if (durationRef.current) durationRef.current.textContent = formatTime(duration);
+        });
+        ws.on("timeupdate", (currentTime) => {
+          if (timeRef.current) timeRef.current.textContent = formatTime(currentTime);
+        });
+        ws.on("interaction", (newTime: number) => {
+          lastInteractionTimeRef.current = newTime;
+          seekAudio(newTime);
+        });
+        ws.on("error", () => {});
+      };
 
-      ws.on("error", () => {});
-    };
+      initWaveform();
 
-    initWaveform();
+      const unsubscribe = usePlayerStore.subscribe((state, prev) => {
+        const justBecameActive =
+          state.currentTrack?.id === track.id &&
+          prev.currentTrack?.id !== track.id &&
+          prev.currentTrack !== undefined;
 
-    return () => {
-      isMounted = false;
-      if (ws) {
-        try {
-          ws.destroy();
-        } catch {
-          /* ok */
+        if (justBecameActive) {
+          isInitializedRef.current = false; // allow re-init
+          initWaveform();
         }
-      }
-      waveSurferRef.current = null;
-    };
-  }, [track.audioUrl, track.id]);
+      });
 
+      return () => {
+        isMounted = false;
+        unsubscribe();
+        if (waveSurferRef.current) {
+          try { waveSurferRef.current.destroy(); } catch { /* ok */ }
+          waveSurferRef.current = null;
+        }
+      };
+    }, [track.audioUrl, track.id]);
   return (
     <div data-test="track-waveform-component">
       <div
         data-test="track-waveform-interactive-area"
         style={{ position: "relative", cursor: "pointer", width: "100%" }}
         onClick={() => {
-          onPlayPause?.(lastInteractionTimeRef.current ?? undefined);
-          lastInteractionTimeRef.current = null;
+          if (lastInteractionTimeRef.current !== null) {
+            lastInteractionTimeRef.current = null;
+            return;
+          }
+          onPlayPause?.();
         }}
         onMouseEnter={() => setIsHover(true)}
         onMouseLeave={() => setIsHover(false)}
diff --git a/src/pages/you/sets/PlaylistSlugPage.tsx b/src/pages/you/sets/PlaylistSlugPage.tsx
index 0081649e..ce9dfaf0 100644
--- a/src/pages/you/sets/PlaylistSlugPage.tsx
+++ b/src/pages/you/sets/PlaylistSlugPage.tsx
@@ -68,6 +68,7 @@ function PlaylistSlugPage() {
             return {
               ...track,
               play_count: fullTrack?.playCount ?? track.play_count ?? 0,
+              audio_url: fullTrack?.audioUrl ?? track.audio_url ?? "",
             };
           }),
         );
@@ -122,60 +123,39 @@ function PlaylistSlugPage() {
     isPrivate: !track.is_public,
   });
 
+  const isPlaylistActive =
+  isPlaying &&
+  !!playlist &&
+  playlist.tracks.some((track) => track.track_id === currentTrack?.id);
+
   const handleHeroPlayPause = () => {
     if (!playlist || !playlist.tracks.length) return;
-
     const firstTrack = playlist.tracks[0];
     const playerTrack = toPlayerTrack(firstTrack);
     const queue = playlist.tracks.map(toPlayerTrack);
-    const isThisPlaylistPlaying =
-      (currentTrack as any)?.context?.playlist_id === playlist.playlist_id;
 
-    if (isThisPlaylistPlaying) {
+    if (isPlaylistActive) {
       togglePlay();
       return;
     }
-
-    setPlayerTrack(
-      {
-        ...playerTrack,
-        context: {
-          type: "playlist",
-          playlist_id: playlist.playlist_id,
-          queue: playlist.tracks.map((t) => t.track_id),
-        },
-      } as any,
-      queue,
-    );
+    setPlayerTrack(playerTrack, queue);
   };
 
   const handleTrackPlay = (track: PlaylistTrackItem) => {
     const playerTrack = toPlayerTrack(track);
     const queue = playlist?.tracks.map(toPlayerTrack) ?? [];
-    const playlistContext = {
-      type: "playlist",
-      playlist_id: playlist?.playlist_id,
-      queue: playlist?.tracks.map((t) => t.track_id) ?? [],
-    };
 
-    if (currentTrack?.id === playerTrack.id) {
+    const isThisTrackFromThisPlaylist =
+      currentTrack?.id === playerTrack.id && isPlaylistActive;
+
+    if (isThisTrackFromThisPlaylist) {
       togglePlay();
       return;
     }
 
-    setPlayerTrack(
-      {
-        ...playerTrack,
-        context: playlistContext,
-      } as any,
-      queue,
-    );
+    setPlayerTrack(playerTrack, queue);
   };
 
-  const isPlaylistActive =
-    isPlaying &&
-    !!playlist &&
-    playlist.tracks.some((track) => track.track_id === currentTrack?.id);
 
   const handleCoverUpload = async (file: File) => {
     if (!playlist) return;
diff --git a/src/services/audioService.ts b/src/services/audioService.ts
index 02e90a47..1b2d2f29 100644
--- a/src/services/audioService.ts
+++ b/src/services/audioService.ts
@@ -88,66 +88,57 @@ export function setTrackLoadedLocally(trackId: string | null) {
 // Wire store -> audio directly via subscribe (no React, no useEffect)
 usePlayerStore.subscribe((state, prev) => {
 
-  // New track 
-  // Only fires when the track id genuinely changes (not a same-track seek).
-  if (state.currentTrack && state.currentTrack.id !== loadedAudioTrackId) {
-    // Kill the old WaveSurfer instance synchronously before we change audio.src.
-    // ONLY if the global instance belongs to a different track.
-    if (globalWaveSurfer && globalWaveSurferTrackId !== state.currentTrack.id) {
-      try {
-        globalWaveSurfer.destroy();
-      } catch (e) {
-        // Ignore destruction errors
-      }
-      globalWaveSurfer = null;
-      globalWaveSurferTrackId = null;
-    }
+
+    if (state.currentTrack && state.currentTrack.id !== loadedAudioTrackId) {
+        if (globalWaveSurfer && globalWaveSurferTrackId !== state.currentTrack.id) {
+          try { globalWaveSurfer.destroy(); } catch (e) { /* ignore */ }
+          globalWaveSurfer = null;
+          globalWaveSurferTrackId = null;
+        }
 
     loadedAudioTrackId = state.currentTrack.id;
     const targetTime = state.currentTime;
     const url = (state.currentTrack.audioUrl || "").trim();
 
-    audio.pause();
-    // Blocked or missing URLs: keep element empty so we never request a bad src.
-    if (!url) {
-      audio.removeAttribute("src");
-      return;
-    }
-
-    audio.src = url;
-    audio.load();
+        audio.pause();
+        if (!audio.src || audio.src === window.location.href || !audio.src.includes(state.currentTrack.audioUrl)) {
+          audio.src = state.currentTrack.audioUrl;
+          audio.load();
+        }
 
     // Seek to the preserved position once metadata is ready.
-    const onLoaded = () => {
-      if (targetTime > 0) {
-        audio.currentTime = targetTime;
+      const onLoaded = () => {
+          if (targetTime > 0) {
+            audio.currentTime = targetTime;
+          }
+          audio.removeEventListener("loadedmetadata", onLoaded);
+        };
+
+        if (audio.readyState >= 1) {
+          onLoaded();
+        } else {
+          audio.addEventListener("loadedmetadata", onLoaded);
+        }
+
+        if (state.isPlaying) {
+          notifyOtherTabs();
+          audio.play().catch(() => {});
+        }
+        return;
       }
-      audio.removeEventListener("loadedmetadata", onLoaded);
-    };
-
-    if (audio.readyState >= 1) {
-      onLoaded();
-    } else {
-      audio.addEventListener("loadedmetadata", onLoaded);
-    }
-
-    if (state.isPlaying) {
-      notifyOtherTabs();
-      audio.play().catch(() => { });
-    }
-    return;
-  }
 
   if (state.isPlaying !== prev.isPlaying) {
-    if (state.isPlaying) {
-      notifyOtherTabs();
-      if (!seekInProgress) {
-        audio.play().catch(() => { });
+      if (state.isPlaying) {
+        notifyOtherTabs();
+        if (!seekInProgress) {
+          audio.play().catch(() => { });
+        } else {
+          setTimeout(() => audio.play().catch(() => {}), 350);
+        }
+      } else {
+        audio.pause();
       }
-    } else {
-      audio.pause();
     }
-  }
 
   // Removed the automatic same-track restart heuristic because it conflicted with WaveSurfer
   // seeks and buffering, causing tracks to spontaneously repeat or jump to 0:00.
@@ -191,8 +182,15 @@ audio.addEventListener("ended", () => {
  * Sets audio.currentTime directly and marks a seek as in-progress so the
  * store subscriber won't fire audio.play() and interrupt the operation.
  */
+
 export function seekAudio(time: number) {
   markSeekInProgress();
-  audio.currentTime = time;
-  usePlayerStore.getState().seekTo(time);
-}
\ No newline at end of file
+  if (globalWaveSurfer && globalWaveSurferTrackId === usePlayerStore.getState().currentTrack?.id) {
+    globalWaveSurfer.setTime(time);
+  } else {
+    audio.currentTime = time;
+  }
+  // Don't call seekTo — it pollutes the store and causes isPlaying side effects
+}
+
+(window as any).__seekAudio = seekAudio;
\ No newline at end of file
diff --git a/src/stores/player.store.ts b/src/stores/player.store.ts
index 8a37cc88..0a924959 100644
--- a/src/stores/player.store.ts
+++ b/src/stores/player.store.ts
@@ -5,13 +5,12 @@ import { useAuthStore } from "./auth.store";
 import { savePlayerState, getPlayerState } from "../services/api/playback.service";
 import { getPlaybackState, resolvePlaybackAudioUrl } from "../utils/playbackAccess";
 
-// Backend rejects saves without a real track_id; skip when nothing is playing.
 const TRACK_ID_UUID_RE =
   /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
 
-// Debounced helper to avoid spamming the backend
 let saveTimeout: ReturnType<typeof setTimeout> | null = null;
 function debouncedSave(userId: string, state: PlayerState) {
+  if (!state.currentTrack?.id) return;
   if (saveTimeout) clearTimeout(saveTimeout);
   saveTimeout = setTimeout(() => {
     const trackId = state.currentTrack?.id;
@@ -39,7 +38,6 @@ function buildShuffledOrder(queueLength: number, currentIndex: number): number[]
   return [currentIndex, ...others];
 }
 
-// Dynamic import for audioService to avoid circular dependencies
 let _seekAudio: ((time: number) => void) | null = null;
 function getSeekAudio() {
   if (!_seekAudio) {
@@ -67,7 +65,6 @@ interface PlayerState {
   isAutoplay: boolean;
   activeSourceId: string | null;
 
-  // Actions
   setTrack: (track: Track, queue?: Track[], startTime?: number, activeSourceId?: string | null) => void;
   playContext: (sourceType: string, sourceId: string | null, fallbackTrack: Track, startTime?: number, activeSourceId?: string | null) => Promise<void>;
   play: () => void;
@@ -157,7 +154,6 @@ export const usePlayerStore = create<PlayerState>()(
 
       playContext: async (sourceType, sourceId, fallbackTrack, startTime, activeSourceId) => {
         const canPlayFallback = getPlaybackState(fallbackTrack) !== "blocked";
-        // Optimistically load the track; respect geo / tier blocking (no audio URL).
         set({
           currentTrack: fallbackTrack,
           queue: [fallbackTrack],
@@ -166,19 +162,18 @@ export const usePlayerStore = create<PlayerState>()(
           currentTime: startTime || 0,
           activeSourceId: activeSourceId ?? null,
         });
-        
+
         try {
           const { postQueueContext } = await import("../services/api/playback.service");
           const res = await postQueueContext({
             interaction_type: "play",
             source_type: sourceType,
             source_id: sourceId,
-            target_user_id: null
+            target_user_id: null,
           });
-          
+
           if (res && res.queue) {
-            // Map backend queue format to frontend Track[]
-            const mappedQueue = res.queue.map((q) => {
+            const mappedQueue = res.queue.map((q: any) => {
               const base = {
                 id: String(q.track_id || q.id),
                 title: q.track_title || q.title || "Unknown Title",
@@ -211,14 +206,14 @@ export const usePlayerStore = create<PlayerState>()(
                 audioUrl: resolvePlaybackAudioUrl(base),
               } as Track;
             });
-            
-            const qIndex = Math.max(0, mappedQueue.findIndex(t => String(t.id) === String(fallbackTrack.id)));
+
+            const qIndex = Math.max(0, mappedQueue.findIndex((t: Track) => String(t.id) === String(fallbackTrack.id)));
             const { isShuffle } = get();
 
             set({
-               queue: mappedQueue,
-               queueIndex: qIndex,
-               ...(isShuffle && { shuffledIndices: buildShuffledOrder(mappedQueue.length, qIndex), shuffledPos: 1 }),
+              queue: mappedQueue,
+              queueIndex: qIndex,
+              ...(isShuffle && { shuffledIndices: buildShuffledOrder(mappedQueue.length, qIndex), shuffledPos: 1 }),
             });
           }
         } catch (e) {
@@ -241,14 +236,14 @@ export const usePlayerStore = create<PlayerState>()(
               if (tracks && tracks.length > 0) {
                 const filtered = tracks.filter((t: Track) => !queue.some(q => q.id === t.id));
                 if (filtered.length > 0) {
-                   set((s) => ({
-                     queue: [...s.queue, ...filtered],
-                     currentTrack: filtered[0],
-                     queueIndex: s.queueIndex + 1,
-                     isPlaying: true,
-                     currentTime: 0
-                   }));
-                   return;
+                  set((s) => ({
+                    queue: [...s.queue, ...filtered],
+                    currentTrack: filtered[0],
+                    queueIndex: s.queueIndex + 1,
+                    isPlaying: true,
+                    currentTime: 0,
+                  }));
+                  return;
                 }
               }
             } catch (err) {
@@ -264,7 +259,6 @@ export const usePlayerStore = create<PlayerState>()(
           let indices = shuffledIndices;
           let pos = shuffledPos;
           if (pos >= indices.length) {
-            // All tracks played — re-shuffle for next cycle
             indices = buildShuffledOrder(queue.length, queueIndex);
             pos = 0;
           }
@@ -306,12 +300,7 @@ export const usePlayerStore = create<PlayerState>()(
       },
 
       seek: (time) => {
-        const seekFn = getSeekAudio();
-        if (seekFn) {
-          seekFn(time);
-        } else {
-          set({ currentTime: time });
-        }
+        getSeekAudio()?.(time);
       },
 
       seekTo: (time) => {
@@ -322,13 +311,14 @@ export const usePlayerStore = create<PlayerState>()(
       setDuration: (duration) => set({ duration }),
       setVolume: (volume) => set({ volume, isMuted: volume === 0 }),
       toggleMute: () => set((s) => ({ isMuted: !s.isMuted })),
-      toggleShuffle: () => set((s) => {
-        if (s.isShuffle) {
-          return { isShuffle: false, shuffledIndices: [], shuffledPos: 0 };
-        }
-        const indices = buildShuffledOrder(s.queue.length, s.queueIndex);
-        return { isShuffle: true, shuffledIndices: indices, shuffledPos: 1 };
-      }),
+      toggleShuffle: () =>
+        set((s) => {
+          if (s.isShuffle) {
+            return { isShuffle: false, shuffledIndices: [], shuffledPos: 0 };
+          }
+          const indices = buildShuffledOrder(s.queue.length, s.queueIndex);
+          return { isShuffle: true, shuffledIndices: indices, shuffledPos: 1 };
+        }),
       toggleRepeat: () =>
         set((s) => {
           const modes: ("none" | "all" | "one")[] = ["none", "all", "one"];
@@ -339,8 +329,7 @@ export const usePlayerStore = create<PlayerState>()(
       toggleLike: () => set((s) => ({ isLiked: !s.isLiked })),
       toggleAutoplay: () => set((s) => ({ isAutoplay: !s.isAutoplay })),
 
-      addToQueue: (track) =>
-        set((s) => ({ queue: [...s.queue, track] })),
+      addToQueue: (track) => set((s) => ({ queue: [...s.queue, track] })),
 
       addNextInQueue: (track) =>
         set((s) => {
@@ -393,10 +382,11 @@ export const usePlayerStore = create<PlayerState>()(
           return { queue: newQueue, queueIndex: newQueueIndex };
         }),
 
-      clearQueue: () => set((s) => ({ 
-        queue: s.currentTrack ? [s.currentTrack] : [], 
-        queueIndex: 0 
-      })),
+      clearQueue: () =>
+        set((s) => ({
+          queue: s.currentTrack ? [s.currentTrack] : [],
+          queueIndex: 0,
+        })),
 
       reset: () =>
         set({
@@ -415,21 +405,37 @@ export const usePlayerStore = create<PlayerState>()(
           const backendState = await getPlayerState();
           if (!backendState || !backendState.track_id) return;
 
-          // Fetch full track details to ensure we have a working audio URL
           const { getTrackById } = await import("../services/track.service");
           const fullTrack = await getTrackById(backendState.track_id);
 
           set({
             currentTrack: fullTrack,
-            queue: Array.isArray(backendState.queue) && backendState.queue.length > 0 
-              ? backendState.queue 
-              : [fullTrack],
+            queue:
+              Array.isArray(backendState.queue) && backendState.queue.length > 0
+                ? backendState.queue
+                : [fullTrack],
             queueIndex: 0,
             currentTime: backendState.position_seconds || 0,
             duration: backendState.duration || Number(fullTrack.duration) || 0,
             volume: backendState.volume ?? 1,
             isPlaying: false,
           });
+
+          // Prime the audio element so sticky player works immediately after login
+          const { audio, setTrackLoadedLocally } = await import("../services/audioService");
+          const time = backendState.position_seconds || 0;
+          audio.src = fullTrack.audioUrl;
+          audio.load();
+          if (time > 0) {
+            audio.addEventListener(
+              "loadedmetadata",
+              () => {
+                audio.currentTime = time;
+              },
+              { once: true },
+            );
+          }
+          setTrackLoadedLocally(fullTrack.id);
         } catch (e) {
           console.error("Failed to rehydrate player from backend", e);
         }
@@ -462,13 +468,15 @@ usePlayerStore.subscribe((state, prev) => {
   const trackChanged = state.currentTrack?.id !== prev.currentTrack?.id;
   const volumeChanged = state.volume !== prev.volume;
   const queueChanged = state.queue.length !== prev.queue.length;
-  const progressStepped = Math.floor(state.currentTime / 5) !== Math.floor(prev.currentTime / 5);
+  const progressStepped =
+    Math.floor(state.currentTime / 5) !== Math.floor(prev.currentTime / 5);
 
   if (trackChanged && state.currentTrack) {
-    // Automatically add to listening history whenever a track starts
-    import("./history.store").then((m) => {
-      m.useHistoryStore.getState().addTrack(state.currentTrack!);
-    }).catch(e => console.error("Failed to add track to history", e));
+    import("./history.store")
+      .then((m) => {
+        m.useHistoryStore.getState().addTrack(state.currentTrack!);
+      })
+      .catch((e) => console.error("Failed to add track to history", e));
   }
 
   if (trackChanged || volumeChanged || queueChanged || progressStepped) {
@@ -481,16 +489,19 @@ usePlayerStore.subscribe((state, prev) => {
 
 useAuthStore.subscribe((state, prev) => {
   if (state.isAuthenticated && !prev.isAuthenticated) {
-    // On login, hydrate everything from backend
     usePlayerStore.getState().loadFromBackend();
-    
-    import("./likes.store").then((m) => {
-      m.useLikesStore.getState().hydrateFromApi();
-    }).catch(e => console.error("Failed to hydrate likes", e));
-
-    import("./history.store").then((m) => {
-      m.useHistoryStore.getState().hydrateFromBackend();
-    }).catch(e => console.error("Failed to hydrate history", e));
+
+    import("./likes.store")
+      .then((m) => {
+        m.useLikesStore.getState().hydrateFromApi();
+      })
+      .catch((e) => console.error("Failed to hydrate likes", e));
+
+    import("./history.store")
+      .then((m) => {
+        m.useHistoryStore.getState().hydrateFromBackend();
+      })
+      .catch((e) => console.error("Failed to hydrate history", e));
   }
 });
 
@@ -500,9 +511,19 @@ window.addEventListener("storage", (event) => {
     try {
       const newValue = JSON.parse(event.newValue || "{}");
       if (newValue.state) {
-        const { currentTrack, queue, queueIndex, isPlaying, volume, isMuted, repeatMode, isShuffle, currentTime } = newValue.state;
+        const {
+          currentTrack,
+          queue,
+          queueIndex,
+          isPlaying,
+          volume,
+          isMuted,
+          repeatMode,
+          isShuffle,
+          currentTime,
+        } = newValue.state;
         const currentState = usePlayerStore.getState();
-        
+
         usePlayerStore.setState({
           currentTrack,
           queue,
@@ -513,13 +534,13 @@ window.addEventListener("storage", (event) => {
           repeatMode,
           isShuffle,
         });
-        
+
         if (isPlaying && currentState.isPlaying) {
-           currentState.pause();
+          currentState.pause();
         }
       }
     } catch (e) {
       console.error("Failed to sync player state across tabs", e);
     }
   }
-});
+});
\ No newline at end of file