diff --git a/packages/web/src/components/collection/desktop/edit-mode/PlaylistEditModeContext.tsx b/packages/web/src/components/collection/desktop/edit-mode/PlaylistEditModeContext.tsx
index 1c4608fa2e4..eb8faf9032c 100644
--- a/packages/web/src/components/collection/desktop/edit-mode/PlaylistEditModeContext.tsx
+++ b/packages/web/src/components/collection/desktop/edit-mode/PlaylistEditModeContext.tsx
@@ -4,6 +4,7 @@ import {
   useCallback,
   useContext,
   useMemo,
+  useRef,
   useState
 } from 'react'
 
@@ -40,13 +41,19 @@ type PlaylistEditModeContextValue = {
   isEditMode: boolean
   status: Status
   draft: PlaylistMetadataDraft
+  removedTrackIds: Set<ID>
   hasChanges: boolean
+  canUndoRemoval: boolean
+  canRedoRemoval: boolean
   enterEditMode: () => void
   exitEditMode: () => void
   setField: <K extends keyof PlaylistMetadataDraft>(
     field: K,
     value: PlaylistMetadataDraft[K]
   ) => void
+  stageRemoval: (ids: ID[]) => void
+  undoRemoval: () => void
+  redoRemoval: () => void
   apply: () => void
   discard: () => void
   resolveConflict: () => void
@@ -61,14 +68,21 @@ const compareValues = (a: unknown, b: unknown) =>
 const messages = {
   saved: ({
     savedDetails,
-    savedArtwork
+    savedArtwork,
+    savedTracks
   }: {
     savedDetails: boolean
     savedArtwork: boolean
+    savedTracks: boolean
   }) => {
-    if (savedDetails && savedArtwork) return 'Saved details and artwork'
-    if (savedArtwork) return 'Saved artwork'
-    return 'Saved details'
+    const parts: string[] = []
+    if (savedDetails) parts.push('details')
+    if (savedArtwork) parts.push('artwork')
+    if (savedTracks) parts.push('tracks')
+    if (parts.length === 0) return 'Saved changes'
+    if (parts.length === 1) return `Saved ${parts[0]}`
+    const last = parts.pop()
+    return `Saved ${parts.join(', ')} and ${last}`
   },
   conflict:
     'Heads up — someone else changed this playlist while you were editing. Reload and try again.',
@@ -92,22 +106,40 @@ export const PlaylistEditModeProvider = ({
 
   const [isEditMode, setIsEditMode] = useState(false)
   const [draft, setDraft] = useState<PlaylistMetadataDraft>({})
+  const [removedTrackIds, setRemovedTrackIds] = useState<Set<ID>>(new Set())
   const [status, setStatus] = useState<Status>('idle')
   const [editModeLoadedAt, setEditModeLoadedAt] = useState<number | null>(null)
 
+  // Undo/redo stacks for staged track removals. Each entry is one user action
+  // (a batch of track ids removed together). These live alongside the draft so
+  // they reset atomically with it on enter/exit/discard/apply.
+  const undoStackRef = useRef<ID[][]>([])
+  const redoStackRef = useRef<ID[][]>([])
+  const [, setHistoryTick] = useState(0)
+  const bumpHistory = useCallback(() => setHistoryTick((t) => t + 1), [])
+
+  const resetRemovals = useCallback(() => {
+    setRemovedTrackIds(new Set())
+    undoStackRef.current = []
+    redoStackRef.current = []
+    bumpHistory()
+  }, [bumpHistory])
+
   const enterEditMode = useCallback(() => {
     setIsEditMode(true)
     setDraft({})
+    resetRemovals()
     setStatus('idle')
     setEditModeLoadedAt(Date.now())
-  }, [])
+  }, [resetRemovals])
 
   const exitEditMode = useCallback(() => {
     setIsEditMode(false)
     setDraft({})
+    resetRemovals()
     setStatus('idle')
     setEditModeLoadedAt(null)
-  }, [])
+  }, [resetRemovals])
 
   const setField = useCallback<PlaylistEditModeContextValue['setField']>(
     (field, value) => {
@@ -116,19 +148,61 @@ export const PlaylistEditModeProvider = ({
     []
   )
 
+  const stageRemoval = useCallback(
+    (ids: ID[]) => {
+      if (ids.length === 0) return
+      setRemovedTrackIds((prev) => {
+        const next = new Set(prev)
+        ids.forEach((id) => next.add(id))
+        return next
+      })
+      undoStackRef.current.push(ids)
+      redoStackRef.current = []
+      bumpHistory()
+    },
+    [bumpHistory]
+  )
+
+  const undoRemoval = useCallback(() => {
+    const ids = undoStackRef.current.pop()
+    if (!ids) return
+    redoStackRef.current.push(ids)
+    setRemovedTrackIds((prev) => {
+      const next = new Set(prev)
+      ids.forEach((id) => next.delete(id))
+      return next
+    })
+    bumpHistory()
+  }, [bumpHistory])
+
+  const redoRemoval = useCallback(() => {
+    const ids = redoStackRef.current.pop()
+    if (!ids) return
+    undoStackRef.current.push(ids)
+    setRemovedTrackIds((prev) => {
+      const next = new Set(prev)
+      ids.forEach((id) => next.add(id))
+      return next
+    })
+    bumpHistory()
+  }, [bumpHistory])
+
   const discard = useCallback(() => {
     setDraft({})
-  }, [])
+    resetRemovals()
+  }, [resetRemovals])
 
   const resolveConflict = useCallback(() => {
     setStatus('idle')
     setDraft({})
+    resetRemovals()
     setIsEditMode(false)
     setEditModeLoadedAt(null)
-  }, [])
+  }, [resetRemovals])
 
   const hasChanges = useMemo(() => {
     if (!collection) return false
+    if (removedTrackIds.size > 0) return true
     const fields = ['playlist_name', 'description', 'is_private'] as const
     for (const f of fields) {
       if (
@@ -140,7 +214,7 @@ export const PlaylistEditModeProvider = ({
     }
     if (draft.artwork !== undefined && draft.artwork !== null) return true
     return false
-  }, [collection, draft])
+  }, [collection, draft, removedTrackIds])
 
   const apply = useCallback(() => {
     if (!collection || !collection.playlist_id) return
@@ -165,10 +239,19 @@ export const PlaylistEditModeProvider = ({
 
     setStatus('saving')
 
+    const playlistContents = {
+      ...collection.playlist_contents,
+      track_ids: collection.playlist_contents.track_ids.filter(
+        (t) => !removedTrackIds.has(t.track)
+      )
+    }
+
     const merged: EditCollectionValues = {
       ...(collection as unknown as EditCollectionValues),
-      playlist_contents: collection.playlist_contents,
-      tracks: tracks ?? [],
+      playlist_contents: playlistContents,
+      tracks: (tracks ?? []).filter(
+        (t) => t.track_id == null || !removedTrackIds.has(t.track_id)
+      ),
       playlist_name: draft.playlist_name ?? collection.playlist_name,
       description:
         draft.description !== undefined
@@ -186,16 +269,22 @@ export const PlaylistEditModeProvider = ({
       draft.description !== undefined ||
       draft.is_private !== undefined
     const savedArtwork = draft.artwork != null
+    const savedTracks = removedTrackIds.size > 0
 
     dispatch(
       editPlaylist(collection.playlist_id, merged, (success) => {
         if (success) {
           dispatch(
             toast({
-              content: messages.saved({ savedDetails, savedArtwork })
+              content: messages.saved({
+                savedDetails,
+                savedArtwork,
+                savedTracks
+              })
             })
           )
           setDraft({})
+          resetRemovals()
           setIsEditMode(false)
           setStatus('idle')
           setEditModeLoadedAt(null)
@@ -212,9 +301,14 @@ export const PlaylistEditModeProvider = ({
     editModeLoadedAt,
     exitEditMode,
     hasChanges,
+    removedTrackIds,
+    resetRemovals,
     tracks
   ])
 
+  const canUndoRemoval = undoStackRef.current.length > 0
+  const canRedoRemoval = redoStackRef.current.length > 0
+
   const value = useMemo<PlaylistEditModeContextValue>(
     () => ({
       collectionId,
@@ -222,16 +316,24 @@ export const PlaylistEditModeProvider = ({
       isEditMode,
       status,
       draft,
+      removedTrackIds,
       hasChanges,
+      canUndoRemoval,
+      canRedoRemoval,
       enterEditMode,
       exitEditMode,
       setField,
+      stageRemoval,
+      undoRemoval,
+      redoRemoval,
       apply,
       discard,
       resolveConflict
     }),
     [
       apply,
+      canRedoRemoval,
+      canUndoRemoval,
       collectionId,
       discard,
       draft,
@@ -240,9 +342,13 @@ export const PlaylistEditModeProvider = ({
       hasChanges,
       isEditMode,
       isOwner,
+      redoRemoval,
+      removedTrackIds,
       resolveConflict,
       setField,
-      status
+      stageRemoval,
+      status,
+      undoRemoval
     ]
   )
 
@@ -265,10 +371,16 @@ export const usePlaylistEditMode = (): PlaylistEditModeContextValue => {
       isEditMode: false,
       status: 'idle',
       draft: {},
+      removedTrackIds: new Set(),
       hasChanges: false,
+      canUndoRemoval: false,
+      canRedoRemoval: false,
       enterEditMode: () => {},
       exitEditMode: () => {},
       setField: () => {},
+      stageRemoval: () => {},
+      undoRemoval: () => {},
+      redoRemoval: () => {},
       apply: () => {},
       discard: () => {},
       resolveConflict: () => {}
diff --git a/packages/web/src/components/collection/desktop/edit-mode/tracks/EditAwareTracksTable.tsx b/packages/web/src/components/collection/desktop/edit-mode/tracks/EditAwareTracksTable.tsx
index dea1ced9f98..1cd51ee0f7f 100644
--- a/packages/web/src/components/collection/desktop/edit-mode/tracks/EditAwareTracksTable.tsx
+++ b/packages/web/src/components/collection/desktop/edit-mode/tracks/EditAwareTracksTable.tsx
@@ -36,14 +36,25 @@ export const EditAwareTracksTable = (props: EditAwareTracksTableProps) => {
   const isEditingThis =
     editMode.isEditMode && editMode.collectionId === collectionId
 
+  // While editing, tracks staged for removal disappear from the table
+  // immediately; they are only persisted (or restored) when Apply/Discard runs.
+  const visibleData = useMemo(() => {
+    if (!isEditingThis || editMode.removedTrackIds.size === 0) return data
+    return data.filter(
+      (t) =>
+        typeof t.track_id !== 'number' ||
+        !editMode.removedTrackIds.has(t.track_id)
+    )
+  }, [data, editMode.removedTrackIds, isEditingThis])
+
   const selectableTrackIds = useMemo(() => {
     if (!isEditingThis) return [] as ID[]
     const ids: ID[] = []
-    for (const t of data) {
+    for (const t of visibleData) {
       if (typeof t.track_id === 'number') ids.push(t.track_id)
     }
     return ids
-  }, [data, isEditingThis])
+  }, [visibleData, isEditingThis])
 
   const selectableCount = selectableTrackIds.length
   const selectedCount = selection.count
@@ -162,7 +173,7 @@ export const EditAwareTracksTable = (props: EditAwareTracksTableProps) => {
   return (
     <TracksTable
       {...rest}
-      data={data}
+      data={visibleData}
       onClickRow={handleClickRow}
       rowClassNameAddition={rowClassNameAddition}
       trackNameHeader={trackNameHeader}
diff --git a/packages/web/src/components/collection/desktop/edit-mode/tracks/TrackBulkActionsBar.tsx b/packages/web/src/components/collection/desktop/edit-mode/tracks/TrackBulkActionsBar.tsx
index 687403bfd99..5555e0a8a65 100644
--- a/packages/web/src/components/collection/desktop/edit-mode/tracks/TrackBulkActionsBar.tsx
+++ b/packages/web/src/components/collection/desktop/edit-mode/tracks/TrackBulkActionsBar.tsx
@@ -1,8 +1,8 @@
 import { useCallback, useEffect, useMemo } from 'react'
 
-import { useCollection, useTracks } from '@audius/common/api'
+import { useTracks } from '@audius/common/api'
 import { ID } from '@audius/common/models'
-import { cacheCollectionsActions, toastActions } from '@audius/common/store'
+import { toastActions } from '@audius/common/store'
 import {
   Button,
   Flex,
@@ -15,10 +15,8 @@ import { useDispatch } from 'react-redux'
 
 import { usePlaylistEditMode } from '../PlaylistEditModeContext'
 
-import { useTrackHistoryContext } from './TrackHistoryContext'
 import { useTrackSelection } from './TrackSelectionContext'
 
-const { removeTrackFromPlaylist, addTrackToPlaylist } = cacheCollectionsActions
 const { toast } = toastActions
 
 const messages = {
@@ -46,12 +44,16 @@ export const TrackBulkActionsBar = (props: Props) => {
   const { color } = useTheme()
   const editMode = usePlaylistEditMode()
   const selection = useTrackSelection()
-  const history = useTrackHistoryContext()
 
-  const { data: collection } = useCollection(collectionId)
+  // Tracks already staged for removal are hidden from the table and should not
+  // be re-selected (e.g. by Select all).
+  const selectableTrackIds = useMemo(
+    () => orderedTrackIds.filter((id) => !editMode.removedTrackIds.has(id)),
+    [orderedTrackIds, editMode]
+  )
   const selectedIds = useMemo(
-    () => orderedTrackIds.filter((id) => selection.isSelected(id)),
-    [orderedTrackIds, selection]
+    () => selectableTrackIds.filter((id) => selection.isSelected(id)),
+    [selectableTrackIds, selection]
   )
   const { data: selectedTracks } = useTracks(selectedIds)
 
@@ -81,39 +83,21 @@ export const TrackBulkActionsBar = (props: Props) => {
   }, [dispatch, selectedTracks])
 
   const removeSelected = useCallback(() => {
-    if (!collection) return
     const trackIds = selectedIds
     if (trackIds.length === 0) return
-    // Record each removal in history so it can be undone.
-    trackIds.forEach((trackId) => {
-      const entry = collection.playlist_contents.track_ids.find(
-        (t) => t.track === trackId
-      )
-      if (!entry) return
-      const index = collection.playlist_contents.track_ids.findIndex(
-        (t) => t.track === trackId && t.time === entry.time
-      )
-      const timestamp = entry.metadata_time ?? entry.time
-      history.push({ type: 'remove', trackId, index, timestamp })
-      dispatch(removeTrackFromPlaylist(trackId, collectionId, timestamp))
-    })
+    // Stage the removal — it isn't persisted until Apply is pressed.
+    editMode.stageRemoval(trackIds)
     dispatch(toast({ content: messages.removed(trackIds.length) }))
     selection.clear()
-  }, [collection, collectionId, dispatch, history, selectedIds, selection])
+  }, [dispatch, editMode, selectedIds, selection])
 
   const handleUndo = useCallback(() => {
-    history.undo((inverse) => {
-      if (inverse.type === 'add') {
-        dispatch(
-          addTrackToPlaylist(inverse.trackId, collectionId, { silent: true })
-        )
-      }
-    })
-  }, [collectionId, dispatch, history])
+    editMode.undoRemoval()
+  }, [editMode])
 
   const handleRedo = useCallback(() => {
-    history.redo()
-  }, [history])
+    editMode.redoRemoval()
+  }, [editMode])
 
   // Keyboard shortcuts: only active while in edit mode
   useEffect(() => {
@@ -128,7 +112,7 @@ export const TrackBulkActionsBar = (props: Props) => {
       const mod = e.metaKey || e.ctrlKey
       if (mod && e.key.toLowerCase() === 'a') {
         e.preventDefault()
-        selection.selectAll(orderedTrackIds)
+        selection.selectAll(selectableTrackIds)
         return
       }
       if (mod && e.key.toLowerCase() === 'z' && !e.shiftKey) {
@@ -166,7 +150,7 @@ export const TrackBulkActionsBar = (props: Props) => {
     editMode.isEditMode,
     handleRedo,
     handleUndo,
-    orderedTrackIds,
+    selectableTrackIds,
     removeSelected,
     selection
   ])
@@ -174,7 +158,11 @@ export const TrackBulkActionsBar = (props: Props) => {
   if (!editMode.isEditMode || editMode.collectionId !== collectionId) {
     return null
   }
-  if (selection.count === 0 && !history.canUndo && !history.canRedo) {
+  if (
+    selection.count === 0 &&
+    !editMode.canUndoRemoval &&
+    !editMode.canRedoRemoval
+  ) {
     return null
   }
 
@@ -205,7 +193,7 @@ export const TrackBulkActionsBar = (props: Props) => {
         <Button
           variant='secondary'
           size='small'
-          onClick={() => selection.selectAll(orderedTrackIds)}
+          onClick={() => selection.selectAll(selectableTrackIds)}
         >
           {messages.selectAll}
         </Button>
@@ -232,7 +220,7 @@ export const TrackBulkActionsBar = (props: Props) => {
         <Button
           variant='secondary'
           size='small'
-          disabled={!history.canUndo}
+          disabled={!editMode.canUndoRemoval}
           onClick={handleUndo}
         >
           {messages.undo}
@@ -240,7 +228,7 @@ export const TrackBulkActionsBar = (props: Props) => {
         <Button
           variant='secondary'
           size='small'
-          disabled={!history.canRedo}
+          disabled={!editMode.canRedoRemoval}
           onClick={handleRedo}
         >
           {messages.redo}
diff --git a/packages/web/src/components/collection/desktop/edit-mode/tracks/TrackHistoryContext.tsx b/packages/web/src/components/collection/desktop/edit-mode/tracks/TrackHistoryContext.tsx
deleted file mode 100644
index 73e20d075a5..00000000000
--- a/packages/web/src/components/collection/desktop/edit-mode/tracks/TrackHistoryContext.tsx
+++ /dev/null
@@ -1,142 +0,0 @@
-import {
-  createContext,
-  ReactNode,
-  useCallback,
-  useContext,
-  useMemo,
-  useRef,
-  useState
-} from 'react'
-
-import { ID } from '@audius/common/models'
-import { cacheCollectionsActions, toastActions } from '@audius/common/store'
-import { useDispatch } from 'react-redux'
-
-const { addTrackToPlaylist, removeTrackFromPlaylist } = cacheCollectionsActions
-const { toast } = toastActions
-
-export type TrackHistoryEntry =
-  | {
-      type: 'remove'
-      trackId: ID
-      // best-effort original position; not used to re-insert into the same
-      // slot because the existing addTrackToPlaylist saga always appends.
-      index: number
-      // timestamp captured at the time of removal for the saga call.
-      timestamp: number
-    }
-  | {
-      type: 'add'
-      trackId: ID
-    }
-
-type TrackHistoryContextValue = {
-  canUndo: boolean
-  canRedo: boolean
-  push: (entry: TrackHistoryEntry) => void
-  undo: (applyInverse: (entry: TrackHistoryEntry) => void) => void
-  redo: () => void
-}
-
-const TrackHistoryContext = createContext<TrackHistoryContextValue | null>(null)
-
-type ProviderProps = {
-  collectionId?: ID
-  children: ReactNode
-}
-
-const messages = {
-  noMoreUndo: 'Nothing to undo',
-  noMoreRedo: 'Nothing to redo'
-}
-
-export const TrackHistoryProvider = ({
-  collectionId,
-  children
-}: ProviderProps) => {
-  const dispatch = useDispatch()
-  const undoStackRef = useRef<TrackHistoryEntry[]>([])
-  const redoStackRef = useRef<TrackHistoryEntry[]>([])
-  const [, force] = useState(0)
-  const bump = useCallback(() => force((v) => v + 1), [])
-
-  const push = useCallback(
-    (entry: TrackHistoryEntry) => {
-      undoStackRef.current.push(entry)
-      redoStackRef.current = []
-      bump()
-    },
-    [bump]
-  )
-
-  const undo = useCallback(
-    (applyInverse: (entry: TrackHistoryEntry) => void) => {
-      const entry = undoStackRef.current.pop()
-      if (!entry) {
-        dispatch(toast({ content: messages.noMoreUndo }))
-        return
-      }
-      redoStackRef.current.push(entry)
-      bump()
-      const inverse: TrackHistoryEntry =
-        entry.type === 'remove'
-          ? { type: 'add', trackId: entry.trackId }
-          : { type: 'remove', trackId: entry.trackId, index: -1, timestamp: 0 }
-      applyInverse(inverse)
-    },
-    [bump, dispatch]
-  )
-
-  const redo = useCallback(() => {
-    const entry = redoStackRef.current.pop()
-    if (!entry) {
-      dispatch(toast({ content: messages.noMoreRedo }))
-      return
-    }
-    undoStackRef.current.push(entry)
-    bump()
-    if (!collectionId) return
-    if (entry.type === 'remove') {
-      dispatch(
-        removeTrackFromPlaylist(entry.trackId, collectionId, entry.timestamp)
-      )
-    } else if (entry.type === 'add') {
-      dispatch(
-        addTrackToPlaylist(entry.trackId, collectionId, { silent: true })
-      )
-    }
-  }, [bump, collectionId, dispatch])
-
-  const value = useMemo<TrackHistoryContextValue>(
-    () => ({
-      canUndo: undoStackRef.current.length > 0,
-      canRedo: redoStackRef.current.length > 0,
-      push,
-      undo,
-      redo
-    }),
-    // Intentionally include bump tick via undoStackRef.current.length read
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [push, undo, redo, undoStackRef.current.length, redoStackRef.current.length]
-  )
-
-  return (
-    <TrackHistoryContext.Provider value={value}>
-      {children}
-    </TrackHistoryContext.Provider>
-  )
-}
-
-export const useTrackHistoryContext = (): TrackHistoryContextValue => {
-  const ctx = useContext(TrackHistoryContext)
-  if (!ctx) {
-    return {
-      canUndo: false,
-      canRedo: false,
-      push: () => {},
-      undo: () => {},
-      redo: () => {}
-    }
-  }
-  return ctx
-}
diff --git a/packages/web/src/pages/collection-page/components/desktop/CollectionPage.tsx b/packages/web/src/pages/collection-page/components/desktop/CollectionPage.tsx
index 9405da2238d..77696861d57 100644
--- a/packages/web/src/pages/collection-page/components/desktop/CollectionPage.tsx
+++ b/packages/web/src/pages/collection-page/components/desktop/CollectionPage.tsx
@@ -26,7 +26,6 @@ import { PlaylistEditModeBar } from 'components/collection/desktop/edit-mode/Pla
 import { PlaylistEditModeProvider } from 'components/collection/desktop/edit-mode/PlaylistEditModeContext'
 import { EditAwareTracksTable } from 'components/collection/desktop/edit-mode/tracks/EditAwareTracksTable'
 import { TrackBulkActionsBar } from 'components/collection/desktop/edit-mode/tracks/TrackBulkActionsBar'
-import { TrackHistoryProvider } from 'components/collection/desktop/edit-mode/tracks/TrackHistoryContext'
 import { TrackSelectionProvider } from 'components/collection/desktop/edit-mode/tracks/TrackSelectionContext'
 import FilterInput from 'components/filter-input/FilterInput'
 import Page from 'components/page/Page'
@@ -311,101 +310,96 @@ const CollectionPage = ({ type }: CollectionPageProps) => {
       collectionId={playlistId ?? undefined}
       isOwner={isOwner}
     >
-      <TrackHistoryProvider collectionId={playlistId ?? undefined}>
-        <TrackSelectionProvider orderedIds={orderedTrackIds}>
-          <Page
-            title={title}
-            description={pageDescription}
-            canonicalUrl={canonicalUrl}
-            structuredData={structuredData}
-            entityType='collection'
-            hashId={playlistId ? Id.parse(playlistId) : undefined}
-            containerClassName={styles.pageContainer}
-            contentClassName={styles.pageContent}
-            fromOpacity={1}
-            scrollableSearch
-          >
-            <Paper column mb='unit-10' border='default'>
-              <CollectionDogEar
-                collectionId={playlistId ?? 0}
-                borderOffset={0}
+      <TrackSelectionProvider orderedIds={orderedTrackIds}>
+        <Page
+          title={title}
+          description={pageDescription}
+          canonicalUrl={canonicalUrl}
+          structuredData={structuredData}
+          entityType='collection'
+          hashId={playlistId ? Id.parse(playlistId) : undefined}
+          containerClassName={styles.pageContainer}
+          contentClassName={styles.pageContent}
+          fromOpacity={1}
+          scrollableSearch
+        >
+          <Paper column mb='unit-10' border='default'>
+            <CollectionDogEar collectionId={playlistId ?? 0} borderOffset={0} />
+            <div className={styles.topSectionWrapper}>{topSection}</div>
+            {playlistId != null ? (
+              <TrackBulkActionsBar
+                collectionId={playlistId}
+                orderedTrackIds={orderedTrackIds}
               />
-              <div className={styles.topSectionWrapper}>{topSection}</div>
-              {playlistId != null ? (
-                <TrackBulkActionsBar
-                  collectionId={playlistId}
-                  orderedTrackIds={orderedTrackIds}
-                />
-              ) : null}
-              {!pageLoading && isEmpty ? (
-                <EmptyContent
-                  isOwner={isOwner}
-                  isAlbum={isAlbum}
-                  text={customEmptyText}
+            ) : null}
+            {!pageLoading && isEmpty ? (
+              <EmptyContent
+                isOwner={isOwner}
+                isAlbum={isAlbum}
+                text={customEmptyText}
+              />
+            ) : !pageLoading &&
+              tracks.status === Status.SUCCESS &&
+              dataSource.length === 0 ? (
+              <NoSearchResultsContent />
+            ) : (
+              <div className={styles.tableWrapper}>
+                <EditAwareTracksTable
+                  collectionId={playlistId!}
+                  // @ts-ignore
+                  columns={tracksTableColumns}
+                  wrapperClassName={styles.tracksTableWrapper}
+                  key={playlistName}
+                  scrollRef={mainContentRef}
+                  loading={pageLoading}
+                  userId={accountUserId}
+                  playing={playing}
+                  activeIndex={activeIndex}
+                  data={dataSource}
+                  onClickRow={onClickRow}
+                  onClickFavorite={toggleSaveTrack}
+                  onClickRemove={isOwner ? onClickRemove : undefined}
+                  onClickRepost={onClickRepostTrack}
+                  onClickPurchase={openPurchaseModal}
+                  onReorder={onReorderTracks}
+                  onSort={onSortTracks}
+                  trackActionsHeader={trackTableHeaderFilter}
+                  showArtistInTrackNameColumn={!isAlbum}
+                  responsiveColumns={
+                    isAlbum
+                      ? RESPONSIVE_TABLE_POLICIES.collectionAlbumTracks
+                      : RESPONSIVE_TABLE_POLICIES.collectionPlaylistTracks
+                  }
+                  isReorderable={
+                    accountUserId !== null &&
+                    accountUserId === playlistOwnerId &&
+                    allowReordering
+                  }
+                  removeText={`${collectionMessages.remove} ${
+                    isAlbum
+                      ? collectionMessages.type.album
+                      : collectionMessages.type.playlist
+                  }`}
+                  isAlbumPage={isAlbum}
+                  isAlbumPremium={
+                    !!metadata && 'is_stream_gated' in metadata
+                      ? metadata?.is_stream_gated
+                      : false
+                  }
                 />
-              ) : !pageLoading &&
-                tracks.status === Status.SUCCESS &&
-                dataSource.length === 0 ? (
-                <NoSearchResultsContent />
-              ) : (
-                <div className={styles.tableWrapper}>
-                  <EditAwareTracksTable
-                    collectionId={playlistId!}
-                    // @ts-ignore
-                    columns={tracksTableColumns}
-                    wrapperClassName={styles.tracksTableWrapper}
-                    key={playlistName}
-                    scrollRef={mainContentRef}
-                    loading={pageLoading}
-                    userId={accountUserId}
-                    playing={playing}
-                    activeIndex={activeIndex}
-                    data={dataSource}
-                    onClickRow={onClickRow}
-                    onClickFavorite={toggleSaveTrack}
-                    onClickRemove={isOwner ? onClickRemove : undefined}
-                    onClickRepost={onClickRepostTrack}
-                    onClickPurchase={openPurchaseModal}
-                    onReorder={onReorderTracks}
-                    onSort={onSortTracks}
-                    trackActionsHeader={trackTableHeaderFilter}
-                    showArtistInTrackNameColumn={!isAlbum}
-                    responsiveColumns={
-                      isAlbum
-                        ? RESPONSIVE_TABLE_POLICIES.collectionAlbumTracks
-                        : RESPONSIVE_TABLE_POLICIES.collectionPlaylistTracks
-                    }
-                    isReorderable={
-                      accountUserId !== null &&
-                      accountUserId === playlistOwnerId &&
-                      allowReordering
-                    }
-                    removeText={`${collectionMessages.remove} ${
-                      isAlbum
-                        ? collectionMessages.type.album
-                        : collectionMessages.type.playlist
-                    }`}
-                    isAlbumPage={isAlbum}
-                    isAlbumPremium={
-                      !!metadata && 'is_stream_gated' in metadata
-                        ? metadata?.is_stream_gated
-                        : false
-                    }
-                  />
-                </div>
-              )}
-            </Paper>
+              </div>
+            )}
+          </Paper>
 
-            {playlistId != null && isOwner && !isAlbum ? (
-              <Flex column gap='2xl' pv='2xl' w='100%'>
-                <Divider />
-                <SuggestedTracks collectionId={playlistId} />
-              </Flex>
-            ) : null}
-            <PlaylistEditModeBar />
-          </Page>
-        </TrackSelectionProvider>
-      </TrackHistoryProvider>
+          {playlistId != null && isOwner && !isAlbum ? (
+            <Flex column gap='2xl' pv='2xl' w='100%'>
+              <Divider />
+              <SuggestedTracks collectionId={playlistId} />
+            </Flex>
+          ) : null}
+          <PlaylistEditModeBar />
+        </Page>
+      </TrackSelectionProvider>
     </PlaylistEditModeProvider>
   )
 }