diff --git a/jam-ui/src/components/client/JKSessionScreen.js b/jam-ui/src/components/client/JKSessionScreen.js
index 8840b3d60..a1d53294a 100644
--- a/jam-ui/src/components/client/JKSessionScreen.js
+++ b/jam-ui/src/components/client/JKSessionScreen.js
@@ -188,6 +188,7 @@ const JKSessionScreen = () => {
 
   // Redux backing track state (modal visibility and data)
   const backingTrackData = useSelector(selectBackingTrackData);
+  const showBackingTrackPlayer = Boolean(backingTrackData);
 
   // Stable callback for backing track popup close
   const handleBackingTrackClose = useCallback(() => {
@@ -197,10 +198,13 @@ const JKSessionScreen = () => {
   }, [dispatch]);
 
   // Stable callback for backing track close in main screen
-  const handleBackingTrackMainClose = useCallback(() => {
+  const handleBackingTrackMainClose = useCallback(async () => {
     console.log('JKSessionScreen: Backing Track main screen close requested');
-    closeMedia();
-  }, [closeMedia]);
+    await closeMedia();
+    // Also clear the backing track popup data
+    dispatch(clearBackingTrackData());
+    dispatch(closeModal('backingTrack'));
+  }, [closeMedia, dispatch]);
 
   // Redux JamTrack player state (modal visibility and data)
   const jamTrackData = useSelector(selectJamTrackData);
@@ -1097,8 +1101,8 @@ const JKSessionScreen = () => {
             </>
           )}
 
-          {/* Backing Track Section */}
-          {mixerHelper.backingTracks && mixerHelper.backingTracks.length > 0 && (
+          {/* Backing Track Section - Show track when player is open */}
+          {showBackingTrackPlayer && mixerHelper.backingTracks && mixerHelper.backingTracks.length > 0 && (
             <>
               <div style={{ borderLeft: '1px solid #ddd', paddingLeft: '1rem' }}></div>
               <div className='backingTrack'>