diff --git a/src/screens/Library/components/MusicCard.js b/src/screens/Library/components/MusicCard.js
index 7807aef..974e2a9 100644
--- a/src/screens/Library/components/MusicCard.js
+++ b/src/screens/Library/components/MusicCard.js
@@ -141,7 +141,7 @@ const MusicCard = ({
             //   Platform.OS !== "ios" ? "dimezisBlurView" : "none"
             // }
           >
-            <View style={{ gap: 3, flexShrink: 1 }}>
+            <View style={{ gap: 3, flexShrink: 1, paddingVertical: 11 }}>
               <Text numberOfLines={2} style={styles.title}>
                 {title || "Sans titre"}
               </Text>
diff --git a/src/screens/Library/components/SearchResultsList.js b/src/screens/Library/components/SearchResultsList.js
index 29c3cf2..abc3c7b 100644
--- a/src/screens/Library/components/SearchResultsList.js
+++ b/src/screens/Library/components/SearchResultsList.js
@@ -89,105 +89,91 @@ const SearchResultsList = ({
         showsVerticalScrollIndicator={false}
       >
         {shouldShowMusics && (
-          <View style={{ paddingHorizontal: 2 }}>
-            <CreateLyricsHeader
-              gradientProps={{
-                start: { x: 0, y: 0 },
-                end: { x: 0, y: 1 },
-              }}
-            >
-              {musics.length > 0 && (
-                <View style={{ gap: 1 }}>
-                  {Array.isArray(musics) &&
-                    musics.slice(0, 6).map((project) => (
-                      <MusicCard
-                        key={project.id}
-                        title={project?.title || "Sans titre"}
-                        subtitle={project?.userName}
-                        imageUri={project?.coverUrl || null}
-                        projectId={project?.id}
-                        likedBy={project?.likedBy || []}
-                        onPress={() => handleMusicPress(project)}
-                        onPressMore={(positionTop) => {
-                          setSelectedProjectId(project.id);
-                          setMenuPosition(positionTop);
-                          setShowMenu(
-                            (previous) =>
-                              !previous ||
-                              positionTop?.top !== (menuPosition?.top ?? null)
-                          );
-                        }}
-                      />
-                    ))}
-                  {musicsLoading && (
-                    <Text
-                      style={{
-                        fontSize: 12,
-                        color: Palette.white,
-                        fontFamily: FONT_FAMILY.InterRegular,
-                        alignSelf: "center",
+          <View style={{ gap: 10 }}>
+            {musics.length > 0 && (
+              <>
+                {Array.isArray(musics) &&
+                  musics.slice(0, 6).map((project) => (
+                    <MusicCard
+                      key={project.id}
+                      title={project?.title || "Sans titre"}
+                      subtitle={project?.userName}
+                      imageUri={project?.coverUrl || null}
+                      projectId={project?.id}
+                      likedBy={project?.likedBy || []}
+                      onPress={() => handleMusicPress(project)}
+                      onPressMore={(positionTop) => {
+                        setSelectedProjectId(project.id);
+                        setMenuPosition(positionTop);
+                        setShowMenu(
+                          (previous) =>
+                            !previous ||
+                            positionTop?.top !== (menuPosition?.top ?? null)
+                        );
                       }}
-                    >
-                      {"Chargement…"}
-                    </Text>
-                  )}
-                </View>
-              )}
-              {musics.length === 0 && !musicsLoading && (
-                <EmptyText text={"Aucune musique trouvée"} />
-              )}
-            </CreateLyricsHeader>
+                    />
+                  ))}
+                {musicsLoading && (
+                  <Text
+                    style={{
+                      fontSize: 12,
+                      color: Palette.white,
+                      fontFamily: FONT_FAMILY.InterRegular,
+                      alignSelf: "center",
+                    }}
+                  >
+                    {"Chargement…"}
+                  </Text>
+                )}
+              </>
+            )}
+            {musics.length === 0 && !musicsLoading && (
+              <EmptyText text={"Aucune musique trouvée"} />
+            )}
           </View>
         )}
         {shouldShowPlaybacks && (
-          <View style={{ paddingHorizontal: 2, paddingTop: 10 }}>
-            <CreateLyricsHeader
-              gradientProps={{
-                start: { x: 0, y: 0 },
-                end: { x: 0, y: 1 },
-              }}
-            >
-              {playbacks.length > 0 && (
-                <View style={{ gap: 10 }}>
-                  {Array.isArray(playbacks) &&
-                    playbacks.slice(0, 6).map((project) => (
-                      <MusicCard
-                        key={project.id}
-                        title={project?.title || "Sans titre"}
-                        subtitle={project?.userName}
-                        imageUri={project?.coverUrl || null}
-                        projectId={project?.id}
-                        likedBy={project?.likedBy || []}
-                        onPress={() => handlePlaybackPress(project)}
-                        onPressMore={(positionTop) => {
-                          setSelectedProjectId(project.id);
-                          setMenuPosition(positionTop);
-                          setShowMenu(
-                            (previous) =>
-                              !previous ||
-                              positionTop?.top !== (menuPosition?.top ?? null)
-                          );
-                        }}
-                      />
-                    ))}
-                  {playbacksLoading && (
-                    <Text
-                      style={{
-                        fontSize: 12,
-                        color: Palette.white,
-                        fontFamily: FONT_FAMILY.InterRegular,
-                        alignSelf: "center",
+          <View style={{ gap: 10, paddingTop: 10 }}>
+            {playbacks.length > 0 && (
+              <>
+                {Array.isArray(playbacks) &&
+                  playbacks.slice(0, 6).map((project) => (
+                    <MusicCard
+                      key={project.id}
+                      title={project?.title || "Sans titre"}
+                      subtitle={project?.userName}
+                      imageUri={project?.coverUrl || null}
+                      projectId={project?.id}
+                      likedBy={project?.likedBy || []}
+                      onPress={() => handlePlaybackPress(project)}
+                      onPressMore={(positionTop) => {
+                        setSelectedProjectId(project.id);
+                        setMenuPosition(positionTop);
+                        setShowMenu(
+                          (previous) =>
+                            !previous ||
+                            positionTop?.top !== (menuPosition?.top ?? null)
+                        );
                       }}
-                    >
-                      {"Chargement…"}
-                    </Text>
-                  )}
-                </View>
-              )}
-              {playbacks.length === 0 && !playbacksLoading && (
-                <EmptyText text={"Aucun playback trouvé"} />
-              )}
-            </CreateLyricsHeader>
+                    />
+                  ))}
+                {playbacksLoading && (
+                  <Text
+                    style={{
+                      fontSize: 12,
+                      color: Palette.white,
+                      fontFamily: FONT_FAMILY.InterRegular,
+                      alignSelf: "center",
+                    }}
+                  >
+                    {"Chargement…"}
+                  </Text>
+                )}
+              </>
+            )}
+            {playbacks.length === 0 && !playbacksLoading && (
+              <EmptyText text={"Aucun playback trouvé"} />
+            )}
           </View>
         )}
         {shouldShowUsers && (
diff --git a/src/screens/Playbacks/Playbacks.js b/src/screens/Playbacks/Playbacks.js
index ffc537e..e784ada 100644
--- a/src/screens/Playbacks/Playbacks.js
+++ b/src/screens/Playbacks/Playbacks.js
@@ -21,7 +21,6 @@ import {
   usersRef,
 } from "../../config/firebase";
 import useDataFromRef from "../../hooks/useDataFromRef";
-import useSharedAudioPlayer from "../../hooks/useSharedAudioPlayer";
 import { Routes } from "../../navigation";
 import { navigate } from "../../navigation/NavigationService";
 import { useUser } from "../../providers/UserDataProvider";
@@ -32,13 +31,6 @@ import { size } from "../../styles/Style";
 const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
   const { currentUID, followUser, unfollowUser } = useUser() || {};
   const videoUrl = item?.playbackUrl || null;
-  const audioSource = useMemo(() => {
-    const fromSong = item?.songUrl ? { uri: item.songUrl } : null;
-    return fromSong;
-  }, [item]);
-
-  const hasExternalAudio = !!audioSource;
-
   const initialLikedBy = Array.isArray(item?.likedBy) ? item.likedBy : [];
   const [isLiked, setIsLiked] = useState(
     currentUID ? initialLikedBy.includes(currentUID) : false
@@ -116,21 +108,9 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
 
   const creatorName = item?.userName;
 
-  const audioPlayer = useSharedAudioPlayer(audioSource || undefined, {
-    id: item?.id
-      ? `playback-${item.id}`
-      : audioSource?.uri
-        ? `playback-${audioSource.uri}`
-        : undefined,
-    title: typeof item?.title === "string" ? item.title : "",
-    artist: typeof item?.userName === "string" ? item.userName : "",
-    artwork: item?.coverUrl || null,
-    coverUrl: item?.coverUrl || null,
-    metadata: { playbackId: item?.id },
-  });
   const videoPlayer = useVideoPlayer(videoUrl || null, (p) => {
     p.loop = false;
-    p.muted = true;
+    p.muted = false;
     p.timeUpdateEventInterval = 0.2;
   });
 
@@ -138,9 +118,6 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
     const toggle = async () => {
       try {
         if (isActive) {
-          try {
-            if (audioPlayer && hasExternalAudio) await audioPlayer.seekTo?.(0);
-          } catch (e) {}
           try {
             if (videoPlayer) videoPlayer.currentTime = 0;
           } catch (e) {}
@@ -149,41 +126,21 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
           try {
             if (videoPlayer) videoPlayer.play();
           } catch (e) {}
-          try {
-            if (audioPlayer && hasExternalAudio) audioPlayer.play?.();
-          } catch (e) {}
         } else {
-          if (audioPlayer?.playing) await audioPlayer.pause?.();
           if (videoPlayer?.playing) videoPlayer.pause();
         }
       } catch (e) {}
     };
     toggle();
-  }, [isActive, audioPlayer, videoPlayer, hasExternalAudio]);
-
-  // Micro-correction initiale uniquement pour absorber un léger décalage réseau
-  useEffect(() => {
-    if (!isActive || !hasExternalAudio) return;
-    const t = global.setTimeout(() => {
-      try {
-        const a = audioPlayer?.currentTime || 0;
-        const v = videoPlayer?.currentTime || 0;
-        if (Math.abs(a - v) > 0.2 && videoPlayer) {
-          videoPlayer.currentTime = Math.max(0, a);
-        }
-      } catch (e) {}
-    }, 300);
-    return () => global.clearTimeout(t);
-  }, [isActive, hasExternalAudio, audioPlayer, videoPlayer]);
+  }, [isActive, videoPlayer]);
 
   useEffect(() => {
     return () => {
       try {
-        if (audioPlayer?.playing) audioPlayer.pause?.();
         if (videoPlayer?.playing) videoPlayer.pause();
       } catch (e) {}
     };
-  }, [audioPlayer, videoPlayer]);
+  }, [videoPlayer]);
 
   // Build alignedWords from item musicTimestamps
   const alignedWords = useMemo(() => {
@@ -204,14 +161,11 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
     if (!isActive) return;
     const id = global.setInterval(() => {
       try {
-        const t = hasExternalAudio
-          ? Number(audioPlayer?.currentTime || 0)
-          : Number(videoPlayer?.currentTime || 0);
-        setCurrentTimeS(t);
+        setCurrentTimeS(Number(videoPlayer?.currentTime || 0));
       } catch (e) {}
     }, 250);
     return () => global.clearInterval(id);
-  }, [isActive, hasExternalAudio, audioPlayer, videoPlayer]);
+  }, [isActive, videoPlayer]);
 
   // partage: géré via l'API native Share directement dans l'UI
   return (
diff --git a/src/screens/Playbacks/components/PlaybackItem.web.js b/src/screens/Playbacks/components/PlaybackItem.web.js
index 8393ac7..5450798 100644
--- a/src/screens/Playbacks/components/PlaybackItem.web.js
+++ b/src/screens/Playbacks/components/PlaybackItem.web.js
@@ -23,7 +23,6 @@ import {
   projectsRef,
   usersRef,
 } from "../../../config/firebase";
-import useSharedAudioPlayer from "../../../hooks/useSharedAudioPlayer";
 import { Routes } from "../../../navigation";
 import { navigate } from "../../../navigation/NavigationService";
 import { useUser } from "../../../providers/UserDataProvider";
@@ -37,8 +36,7 @@ const DEBUG_PLAYBACK_WEB = true;
 
 // NOTE: Web-only implementation that uses a native <video> element instead of expo-video
 // - No Platform checks
-// - Always relies on an external audio track for playback
-// - Keeps the muted video visuals in sync with the external audio clock
+// - Audio now comes directly from the MP4 playbackUrl
 
 const PlaybackItem = ({
   item,
@@ -54,7 +52,7 @@ const PlaybackItem = ({
     width: viewportWidth,
     height: viewportHeight,
   });
-  const [openComments, setOpenComments] = useState(true);
+  const [openComments] = useState(true);
   const commentInputRef = useRef(null);
   const { currentUID, followUser, unfollowUser } = useUser() || {};
 
@@ -62,13 +60,6 @@ const PlaybackItem = ({
   const videoRef = useRef(null); // HTMLVideoElement
   const wasActiveRef = useRef(false);
   const startedRef = useRef(false);
-  const debugTickRef = useRef(0);
-  const pendingSeekRef = useRef(false);
-
-  const audioSource = useMemo(() => {
-    const fromSong = item?.songUrl ? { uri: item.songUrl } : null;
-    return fromSong;
-  }, [item?.songUrl]);
 
   const initialLikedBy = Array.isArray(item?.likedBy) ? item.likedBy : [];
   const [isLiked, setIsLiked] = useState(
@@ -144,185 +135,77 @@ const PlaybackItem = ({
     setIsLiked(currentUID ? lb.includes(currentUID) : false);
   }, [item?.likedBy, currentUID]);
 
-  const audioPlayer = useSharedAudioPlayer(audioSource || undefined, {
-    id: item?.id
-      ? `playback-${item.id}`
-      : audioSource?.uri
-        ? `playback-${audioSource.uri}`
-        : undefined,
-    title: typeof item?.title === "string" ? item.title : "",
-    artist: typeof item?.userName === "string" ? item.userName : "",
-    artwork: item?.coverUrl || null,
-    coverUrl: item?.coverUrl || null,
-    metadata: { playbackId: item?.id },
-  });
+  useEffect(() => {
+    startedRef.current = false;
+  }, [videoUrl]);
 
-  // Helpers to normalize and map clocks
-  const getAudioTimeSeconds = useCallback(() => {
-    const raw = Number(audioPlayer?.currentTime || 0);
-    // On web, expo-audio currentTime can be in ms; convert if it looks like ms (>1000)
-    const seconds = raw > 1000 ? raw / 1000 : raw;
-    return Number.isFinite(seconds) ? seconds : 0;
-  }, [audioPlayer]);
-
-  const getTargetVideoTime = useCallback(
-    (el) => {
-      const sec = getAudioTimeSeconds();
-      const dur = Number(el?.duration || NaN);
-      if (Number.isFinite(dur) && dur > 0.3) {
-        let t = sec % dur;
-        // Avoid setting time extremely close to the end to prevent immediate loop
-        const guard = Math.max(0, dur - 0.25);
-        if (t > guard) t = guard;
-        return t;
-      }
-      return sec;
-    },
-    [getAudioTimeSeconds]
-  );
-
-  // --- Playback control helpers (web <video>) ---
-  const playVideo = useCallback(async () => {
-    try {
-      const el = videoRef.current;
-      if (!el) return;
-      // Allow autoplay by keeping it muted initially
-      el.muted = true;
-      if (el.paused) {
-        await el.play().catch(() => {});
-      }
-    } catch (_e) {}
-  }, []);
-
-  const syncVideoClockToAudio = useCallback(() => {
-    try {
-      const el = videoRef.current;
-      if (!el) return;
-      const audioTimeS = getAudioTimeSeconds();
-      const audioIsPlaying = !!audioPlayer?.playing || audioTimeS > 0.05;
-      if (!audioIsPlaying) return;
-      const target = getTargetVideoTime(el);
-
-      // If not enough data loaded to seek accurately, attach one-time seek on loadeddata
-      if (el.readyState < 2) {
-        if (!pendingSeekRef.current) {
-          pendingSeekRef.current = true;
-          const handler = () => {
-            try {
-              const t = getTargetVideoTime(el);
-              el.currentTime = t;
-              if (el.paused) el.play().catch(() => {});
-              if (DEBUG_PLAYBACK_WEB) {
-                console.log("[PlaybackItem.web] deferred seek on loadeddata", {
-                  t,
-                  rs: el.readyState,
-                });
-              }
-            } catch (_) {}
-            pendingSeekRef.current = false;
-          };
-          el.addEventListener("loadeddata", handler, { once: true });
-        }
-        return;
-      }
-
-      const diff = Math.abs((el.currentTime || 0) - target);
-      if (diff > 0.5) {
-        if (DEBUG_PLAYBACK_WEB) {
-          console.log("[PlaybackItem.web] sync video", {
-            audioTimeS,
-            target,
-            videoTime: Number(el.currentTime || 0),
-            duration: Number(el.duration || 0),
-          });
-        }
-        el.currentTime = target;
-        if (el.paused) el.play().catch(() => {});
-      }
-    } catch (_e) {}
-  }, [audioPlayer, getAudioTimeSeconds, getTargetVideoTime]);
-
-  // Start/reset when active
+  // Start/reset when active, using the video's own audio
   useEffect(() => {
     const el = videoRef.current;
-    if (!isActive || !el) return;
-    if (startedRef.current) return;
+    if (!el) return;
+
+    if (!isActive) {
+      try {
+        if (!el.paused) el.pause();
+      } catch (_e) {}
+      try {
+        el.muted = true;
+      } catch (_e) {}
+      startedRef.current = false;
+      onBackgroundSync?.({ isPlaying: false });
+      return;
+    }
 
     const start = async () => {
       try {
-        if (DEBUG_PLAYBACK_WEB) {
-          console.log("[PlaybackItem.web] start()", {
-            isActive,
-            audioPlaying: !!audioPlayer?.playing,
-            audioTime: Number(audioPlayer?.currentTime || 0),
-            videoPaused: el.paused,
-            videoTime: Number(el.currentTime || 0),
-            readyState: el.readyState,
-          });
+        if (!startedRef.current) {
+          startedRef.current = true;
+          const resetToStart = () => {
+            try {
+              el.currentTime = 0;
+            } catch (_e) {}
+          };
+          if (el.readyState >= 1) {
+            resetToStart();
+          } else {
+            const handleLoaded = () => {
+              resetToStart();
+            };
+            el.addEventListener("loadeddata", handleLoaded, { once: true });
+          }
         }
-
-        // 1) Start the visual first to guarantee motion
-        await playVideo();
-
-        // 2) Try to start audio, but don't force sync until it's actually playing
-        if (audioPlayer && !audioPlayer.playing) {
-          try {
-            await audioPlayer.play?.();
-          } catch (_e) {}
-        }
-
-        // 3) Choose the best clock available for initial background sync
-        const audioTimeS = getAudioTimeSeconds();
-        const audioIsPlaying = !!audioPlayer?.playing || audioTimeS > 0.05;
-        const videoTime = Number(el.currentTime || 0);
-        const clockTime = audioIsPlaying ? getTargetVideoTime(el) : videoTime;
-        onBackgroundSync?.({
-          currentTime: Number.isFinite(clockTime) ? clockTime : 0,
-          isPlaying: audioIsPlaying || !el.paused,
+        el.muted = false;
+        await el.play().catch((error) => {
+          if (DEBUG_PLAYBACK_WEB) {
+            console.log("[PlaybackItem.web] play() rejected", error);
+          }
         });
-
-        startedRef.current = true;
-      } catch (_e) {}
+        onBackgroundSync?.({
+          currentTime: Number(el.currentTime || 0),
+          isPlaying: !el.paused,
+        });
+      } catch (_e) {
+        if (DEBUG_PLAYBACK_WEB) {
+          console.log("[PlaybackItem.web] start error", _e);
+        }
+      }
     };
 
     start();
-    return () => {};
-  }, [
-    isActive,
-    playVideo,
-    audioPlayer,
-    syncVideoClockToAudio,
-    onBackgroundSync,
-  ]);
-
-  useEffect(() => {
-    if (isActive) return;
-    try {
-      if (audioPlayer?.playing) audioPlayer.pause?.();
-    } catch (_e) {}
-
-    const el = videoRef.current;
-    if (!el) return;
-    try {
-      if (!el.paused) el.pause();
-      el.muted = true;
-    } catch (_e) {}
-    startedRef.current = false;
-  }, [isActive, audioPlayer]);
+  }, [isActive, videoUrl, onBackgroundSync]);
 
   // Pause all on unmount
   useEffect(() => {
-    const el = videoRef.current; // snapshot ref for cleanup
+    const el = videoRef.current;
     return () => {
       try {
-        if (audioPlayer?.playing) audioPlayer.pause?.();
         if (el && !el.paused) el.pause();
       } catch (_e) {}
       onBackgroundSync?.({ isPlaying: false });
     };
-  }, [audioPlayer, onBackgroundSync]);
+  }, [onBackgroundSync]);
 
-  // Lyrics timing
+  // Lyrics timing based on video clock
   const alignedWords = useMemo(() => {
     const idx = Number(item?.songIndex) || 0;
     const ts = item?.musicTimestamps?.[idx];
@@ -340,53 +223,18 @@ const PlaybackItem = ({
     const id = setInterval(() => {
       try {
         const el = videoRef.current;
-        const audioTimeS = getAudioTimeSeconds();
-        const audioIsPlaying = !!audioPlayer?.playing || audioTimeS > 0.05;
         const videoTime = Number(el?.currentTime || 0);
-
-        // Lyrics: real audio seconds (normalized), not modulo
-        const timeForLyrics =
-          audioIsPlaying && Number.isFinite(audioTimeS)
-            ? audioTimeS
-            : Number.isFinite(videoTime)
-              ? videoTime
-              : 0;
-        setCurrentTimeS(timeForLyrics);
-
-        // Keep video roughly in sync with audio only when audio is genuinely playing
-        if (audioIsPlaying) {
-          syncVideoClockToAudio();
-        }
+        const safeTime = Number.isFinite(videoTime) ? videoTime : 0;
+        setCurrentTimeS(safeTime);
 
         onBackgroundSync?.({
-          // Background video: use the same modulo/clamped target as the main video to avoid loop-thrashing
-          currentTime: getTargetVideoTime(el),
-          isPlaying: audioIsPlaying || (!!el && !el.paused),
+          currentTime: safeTime,
+          isPlaying: !!el && !el.paused,
         });
-
-        if (DEBUG_PLAYBACK_WEB) {
-          const n = (debugTickRef.current = (debugTickRef.current + 1) % 4);
-          if (n === 0) {
-            console.log("[PlaybackItem.web] tick", {
-              audioPlaying: !!audioPlayer?.playing,
-              audioTimeS,
-              videoPaused: !!el?.paused,
-              videoTime,
-              started: startedRef.current,
-            });
-          }
-        }
       } catch (_e) {}
     }, 250);
     return () => clearInterval(id);
-  }, [
-    isActive,
-    audioPlayer,
-    syncVideoClockToAudio,
-    onBackgroundSync,
-    getAudioTimeSeconds,
-    getTargetVideoTime,
-  ]);
+  }, [isActive, onBackgroundSync]);
 
   useEffect(() => {
     if (!onBackgroundSync) return undefined;
@@ -497,7 +345,7 @@ const PlaybackItem = ({
                 ref={videoRef}
                 src={videoUrl}
                 playsInline
-                muted
+                muted={!isActive}
                 preload="auto"
                 // Using web CSS properties here on purpose
                 style={{