diff --git a/packages/web/src/components/collection/desktop/Artwork.tsx b/packages/web/src/components/collection/desktop/Artwork.tsx
index 21dc77cd021..f035577e7ad 100644
--- a/packages/web/src/components/collection/desktop/Artwork.tsx
+++ b/packages/web/src/components/collection/desktop/Artwork.tsx
@@ -1,14 +1,19 @@
+import { ChangeEvent, useCallback, useEffect, useRef, useState } from 'react'
+
 import { useCollection } from '@audius/common/api'
 import { imageBlank } from '@audius/common/assets'
 import { SquareSizes } from '@audius/common/models'
+import { getErrorMessage } from '@audius/common/utils'
 import { Button, IconPencil, Image } from '@audius/harmony'
 import cn from 'classnames'
 import { pick } from 'lodash'
 import { Link } from 'react-router'
 
 import { useCollectionCoverArt } from 'hooks/useCollectionCoverArt'
+import { resizeImage } from 'utils/imageProcessingUtil'
 
 import styles from './CollectionHeader.module.css'
+import { usePlaylistEditMode } from './edit-mode/PlaylistEditModeContext'
 
 const messages = {
   addArtwork: 'Add Artwork',
@@ -38,31 +43,85 @@ export const Artwork = (props: ArtworkProps) => {
 
   const hasImage = image && image !== imageBlank
 
+  const editMode = usePlaylistEditMode()
+  const isEditingThis =
+    editMode.isEditMode && editMode.collectionId === collectionId
+
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!isEditingThis) setError(null)
+  }, [isEditingThis])
+
+  const handleFileChange = useCallback(
+    async (e: ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0]
+      e.target.value = ''
+      if (!file) return
+      try {
+        const resized = await resizeImage(file)
+        // @ts-ignore writing to read-only property; matches ArtworkField pattern
+        resized.name = file.name
+        const url = URL.createObjectURL(resized)
+        editMode.setField('artwork', { url, file: resized, source: 'inline' })
+        setError(null)
+      } catch (err) {
+        setError(getErrorMessage(err))
+      }
+    },
+    [editMode]
+  )
+
+  const draftArtwork = editMode.draft.artwork
+  const displaySrc = isEditingThis && draftArtwork ? draftArtwork.url : image
+
   return (
     <Image
       className={cn(styles.coverArtWrapper, styles.coverArt)}
       alt={messages.coverArtAltText}
-      src={image}
+      src={displaySrc}
     >
       {isOwner ? (
         <span className={styles.imageEditButtonWrapper}>
-          <Button variant='tertiary' iconLeft={IconPencil} asChild>
-            <Link
-              to={{
-                pathname: `${permalink}/edit`,
-                search:
-                  hasImage && !is_image_autogenerated
-                    ? undefined
-                    : '?focus=artwork'
-              }}
-            >
-              {hasImage && !is_image_autogenerated
-                ? messages.removeArtwork
-                : hasImage
-                  ? messages.changeArtwork
-                  : messages.addArtwork}
-            </Link>
-          </Button>
+          {isEditingThis ? (
+            <>
+              <Button
+                variant='tertiary'
+                iconLeft={IconPencil}
+                onClick={() => fileInputRef.current?.click()}
+              >
+                {messages.changeArtwork}
+              </Button>
+              <input
+                ref={fileInputRef}
+                type='file'
+                accept='image/*'
+                style={{ display: 'none' }}
+                onChange={handleFileChange}
+                aria-label={messages.changeArtwork}
+                aria-invalid={!!error}
+              />
+            </>
+          ) : (
+            <Button variant='tertiary' iconLeft={IconPencil} asChild>
+              <Link
+                to={{
+                  pathname: `${permalink}/edit`,
+                  search:
+                    hasImage && !is_image_autogenerated
+                      ? undefined
+                      : '?focus=artwork'
+                }}
+              >
+                {hasImage && !is_image_autogenerated
+                  ? messages.removeArtwork
+                  : hasImage
+                    ? messages.changeArtwork
+                    : messages.addArtwork}
+              </Link>
+            </Button>
+          )}
         </span>
       ) : null}
     </Image>
diff --git a/packages/web/src/components/collection/desktop/CollectionHeader.tsx b/packages/web/src/components/collection/desktop/CollectionHeader.tsx
index 5818ec62122..134194c3bb4 100644
--- a/packages/web/src/components/collection/desktop/CollectionHeader.tsx
+++ b/packages/web/src/components/collection/desktop/CollectionHeader.tsx
@@ -10,7 +10,10 @@ import {
   IconCart,
   useTheme,
   MusicBadge,
-  IconCalendarMonth
+  IconCalendarMonth,
+  Switch,
+  TextArea,
+  TextInput
 } from '@audius/harmony'
 import cn from 'classnames'
 import { pick } from 'lodash'
@@ -28,13 +31,21 @@ import { CollectionHeaderProps } from '../types'
 import { Artwork } from './Artwork'
 import { CollectionActionButtons } from './CollectionActionButtons'
 import styles from './CollectionHeader.module.css'
+import { usePlaylistEditMode } from './edit-mode/PlaylistEditModeContext'
 
 const messages = {
   premiumLabel: 'premium',
   by: 'By ',
   hidden: 'Hidden',
   releases: (releaseDate: string) =>
-    `Releases ${formatReleaseDate({ date: releaseDate, withHour: true })}`
+    `Releases ${formatReleaseDate({ date: releaseDate, withHour: true })}`,
+  titleLabel: 'Playlist title',
+  titleAlbumLabel: 'Album title',
+  descriptionLabel: 'Description',
+  descriptionPlaceholder: 'Add a description',
+  visibility: 'Visibility',
+  publicLabel: 'Public',
+  privateLabel: 'Hidden'
 }
 
 export const CollectionHeader = (props: CollectionHeaderProps) => {
@@ -71,16 +82,35 @@ export const CollectionHeader = (props: CollectionHeaderProps) => {
         'is_scheduled_release',
         'release_date',
         'permalink',
-        'is_private'
+        'is_private',
+        'is_album'
       ])
   })
   const {
     is_scheduled_release: isScheduledRelease,
     release_date: releaseDate,
     permalink,
-    is_private: isPrivate
+    is_private: isPrivate,
+    is_album: isAlbumFromCollection
   } = partialCollection ?? {}
 
+  const editMode = usePlaylistEditMode()
+  const isEditingThis =
+    editMode.isEditMode && editMode.collectionId === collectionId
+
+  const stagedTitle =
+    editMode.draft.playlist_name !== undefined
+      ? editMode.draft.playlist_name
+      : title
+  const stagedDescription =
+    editMode.draft.description !== undefined
+      ? editMode.draft.description
+      : description
+  const stagedIsPrivate =
+    editMode.draft.is_private !== undefined
+      ? editMode.draft.is_private
+      : (isPrivate ?? false)
+
   const hasStreamAccess = access?.stream
   const shouldShowStats = !isPrivate || isOwner
   const shouldShowScheduledRelease =
@@ -134,44 +164,62 @@ export const CollectionHeader = (props: CollectionHeaderProps) => {
             gap='s'
             className={styles.titleArtistSection}
           >
-            <Flex
-              as={isOwner ? Link : 'span'}
-              css={{ background: 0, border: 0, padding: 0, margin: 0 }}
-              gap='s'
-              alignItems='center'
-              className={cn({
-                [styles.editableTitle]: isOwner
-              })}
-              // @ts-ignore -- Flex Link doesn't type `to` correctly
-              to={
-                isOwner
-                  ? { pathname: `${permalink}/edit`, search: '?focus=name' }
-                  : undefined
-              }
-            >
-              {isLoading ? (
-                <Skeleton height='48px' width='300px' />
-              ) : (
-                <>
-                  <Text
-                    variant='heading'
-                    size='xl'
-                    className={cn(styles.titleHeader)}
-                    textAlign='left'
-                    css={{
-                      fontSize: 'clamp(24px, calc(1.6cqi + 18.75px), 36px)',
-                      lineHeight: 1.33
-                    }}
-                  >
-                    {title}
-                  </Text>
+            {isEditingThis ? (
+              <Flex direction='column' gap='s'>
+                <TextInput
+                  label={
+                    isAlbumFromCollection
+                      ? messages.titleAlbumLabel
+                      : messages.titleLabel
+                  }
+                  value={stagedTitle}
+                  onChange={(e) =>
+                    editMode.setField('playlist_name', e.target.value)
+                  }
+                  maxLength={64}
+                  autoFocus
+                />
+              </Flex>
+            ) : (
+              <Flex
+                as={isOwner ? Link : 'span'}
+                css={{ background: 0, border: 0, padding: 0, margin: 0 }}
+                gap='s'
+                alignItems='center'
+                className={cn({
+                  [styles.editableTitle]: isOwner
+                })}
+                // @ts-ignore -- Flex Link doesn't type `to` correctly
+                to={
+                  isOwner
+                    ? { pathname: `${permalink}/edit`, search: '?focus=name' }
+                    : undefined
+                }
+              >
+                {isLoading ? (
+                  <Skeleton height='48px' width='300px' />
+                ) : (
+                  <>
+                    <Text
+                      variant='heading'
+                      size='xl'
+                      className={cn(styles.titleHeader)}
+                      textAlign='left'
+                      css={{
+                        fontSize: 'clamp(24px, calc(1.6cqi + 18.75px), 36px)',
+                        lineHeight: 1.33
+                      }}
+                    >
+                      {title}
+                    </Text>
 
-                  {!isLoading && isOwner ? (
-                    <IconPencil className={styles.editIcon} color='subdued' />
-                  ) : null}
-                </>
-              )}
-            </Flex>
+                    {!isLoading && isOwner ? (
+                      <IconPencil className={styles.editIcon} color='subdued' />
+                    ) : null}
+                  </>
+                )}
+              </Flex>
+            )}
             {isLoading ? (
               <Skeleton height='24px' width='150px' />
             ) : userId !== null ? (
@@ -191,6 +239,25 @@ export const CollectionHeader = (props: CollectionHeaderProps) => {
                 <UserLink userId={userId} popover variant='visible' />
               </Text>
             ) : null}
+            {isEditingThis ? (
+              <Flex alignItems='center' gap='m' mt='s'>
+                <Text variant='label' size='m' color='subdued'>
+                  {messages.visibility}
+                </Text>
+                <Switch
+                  checked={!stagedIsPrivate}
+                  onChange={(e) =>
+                    editMode.setField('is_private', !e.target.checked)
+                  }
+                  aria-label={messages.visibility}
+                />
+                <Text variant='body' size='s' color='subdued'>
+                  {stagedIsPrivate
+                    ? messages.privateLabel
+                    : messages.publicLabel}
+                </Text>
+              </Flex>
+            ) : null}
           </Flex>
           <div className={styles.statsDesktop}>{renderStatsRow(isLoading)}</div>
         </Flex>
@@ -263,7 +330,17 @@ export const CollectionHeader = (props: CollectionHeaderProps) => {
         <Skeleton height='40px' width='100%' />
       ) : (
         <Flex gap='l' direction='column'>
-          {description ? (
+          {isEditingThis ? (
+            <TextArea
+              aria-label={messages.descriptionLabel}
+              placeholder={messages.descriptionPlaceholder}
+              value={stagedDescription ?? ''}
+              onChange={(e) => editMode.setField('description', e.target.value)}
+              maxLength={1000}
+              showMaxLength
+              grows
+            />
+          ) : description ? (
             <UserGeneratedText
               size='s'
               linkSource='collection page'
diff --git a/packages/web/src/components/collection/desktop/EditButton.tsx b/packages/web/src/components/collection/desktop/EditButton.tsx
index 6ae8ad2cd64..55f2f28d4ac 100644
--- a/packages/web/src/components/collection/desktop/EditButton.tsx
+++ b/packages/web/src/components/collection/desktop/EditButton.tsx
@@ -1,3 +1,5 @@
+import { useCallback } from 'react'
+
 import { useCollection } from '@audius/common/api'
 import {
   IconPencil,
@@ -8,8 +10,11 @@ import {
 import { pick } from 'lodash'
 import { Link } from 'react-router'
 
+import { usePlaylistEditMode } from './edit-mode/PlaylistEditModeContext'
+
 const messages = {
-  edit: (isAlbum: boolean) => `Edit ${isAlbum ? 'Album' : 'Playlist'}`
+  edit: (isAlbum: boolean) => `Edit ${isAlbum ? 'Album' : 'Playlist'}`,
+  exitEdit: 'Done Editing'
 }
 
 type EditButtonProps = Partial<IconButtonProps> & {
@@ -21,11 +26,42 @@ export const EditButton = (props: EditButtonProps) => {
   const { data: partialCollection } = useCollection(collectionId, {
     select: (collection) => pick(collection, ['is_album', 'permalink'])
   })
+  const editMode = usePlaylistEditMode()
+
+  const handleClick = useCallback(() => {
+    if (editMode.isEditMode) {
+      editMode.exitEditMode()
+    } else {
+      editMode.enterEditMode()
+    }
+  }, [editMode])
 
   if (!partialCollection) return null
 
   const { is_album, permalink } = partialCollection
 
+  // If we have a real provider context, switch the button into an inline
+  // edit-mode toggle. Otherwise, fall back to the legacy /edit link so other
+  // call sites keep working.
+  if (editMode.collectionId !== undefined) {
+    return (
+      <Tooltip
+        text={editMode.isEditMode ? messages.exitEdit : messages.edit(is_album)}
+      >
+        <IconButton
+          color={editMode.isEditMode ? 'default' : 'subdued'}
+          icon={IconPencil}
+          size='2xl'
+          aria-label={
+            editMode.isEditMode ? messages.exitEdit : messages.edit(is_album)
+          }
+          onClick={handleClick}
+          {...other}
+        />
+      </Tooltip>
+    )
+  }
+
   return (
     <Tooltip text={messages.edit(is_album)}>
       <IconButton
diff --git a/packages/web/src/components/collection/desktop/edit-mode/PlaylistEditModeBar.tsx b/packages/web/src/components/collection/desktop/edit-mode/PlaylistEditModeBar.tsx
new file mode 100644
index 00000000000..677778e47f6
--- /dev/null
+++ b/packages/web/src/components/collection/desktop/edit-mode/PlaylistEditModeBar.tsx
@@ -0,0 +1,123 @@
+import { Button, Flex, Text, useTheme } from '@audius/harmony'
+
+import { usePlaylistEditMode } from './PlaylistEditModeContext'
+
+const messages = {
+  pending: 'You have unsaved changes',
+  conflictTitle: 'Out of date',
+  conflictBody:
+    'Someone else updated this playlist while you were editing it. Reload to start over.',
+  apply: 'Apply',
+  discard: 'Discard',
+  reload: 'Reload'
+}
+
+export const PlaylistEditModeBar = () => {
+  const { color } = useTheme()
+  const { isEditMode, hasChanges, status, apply, discard, resolveConflict } =
+    usePlaylistEditMode()
+
+  if (!isEditMode) return null
+
+  if (status === 'conflict') {
+    return (
+      <Flex
+        css={{
+          position: 'sticky',
+          bottom: 0,
+          zIndex: 5,
+          backgroundColor: color.background.surface1,
+          borderTop: `1px solid ${color.border.strong}`,
+          boxShadow: '0 -4px 10px rgba(0,0,0,0.08)'
+        }}
+        p='l'
+        gap='xl'
+        alignItems='center'
+        justifyContent='space-between'
+      >
+        <Flex direction='column' gap='xs'>
+          <Text variant='title' size='m' color='danger'>
+            {messages.conflictTitle}
+          </Text>
+          <Text variant='body' color='subdued'>
+            {messages.conflictBody}
+          </Text>
+        </Flex>
+        <Button
+          variant='primary'
+          onClick={() => {
+            resolveConflict()
+            window.location.reload()
+          }}
+        >
+          {messages.reload}
+        </Button>
+      </Flex>
+    )
+  }
+
+  if (!hasChanges && status !== 'saving') {
+    // Still in edit mode but no pending changes — show a slim bar with Discard
+    // (which exits edit mode).
+    return (
+      <Flex
+        css={{
+          position: 'sticky',
+          bottom: 0,
+          zIndex: 5,
+          backgroundColor: color.background.surface1,
+          borderTop: `1px solid ${color.border.strong}`
+        }}
+        p='m'
+        gap='m'
+        alignItems='center'
+        justifyContent='flex-end'
+      >
+        <Button variant='secondary' size='small' onClick={discard}>
+          {messages.discard}
+        </Button>
+        <Button variant='primary' size='small' disabled>
+          {messages.apply}
+        </Button>
+      </Flex>
+    )
+  }
+
+  return (
+    <Flex
+      css={{
+        position: 'sticky',
+        bottom: 0,
+        zIndex: 5,
+        backgroundColor: color.background.surface1,
+        borderTop: `1px solid ${color.border.strong}`,
+        boxShadow: '0 -4px 10px rgba(0,0,0,0.08)'
+      }}
+      p='l'
+      gap='xl'
+      alignItems='center'
+      justifyContent='space-between'
+    >
+      <Text variant='body' strength='strong'>
+        {messages.pending}
+      </Text>
+      <Flex gap='m'>
+        <Button
+          variant='secondary'
+          onClick={discard}
+          disabled={status === 'saving'}
+        >
+          {messages.discard}
+        </Button>
+        <Button
+          variant='primary'
+          onClick={apply}
+          isLoading={status === 'saving'}
+          disabled={status === 'saving'}
+        >
+          {messages.apply}
+        </Button>
+      </Flex>
+    </Flex>
+  )
+}
diff --git a/packages/web/src/components/collection/desktop/edit-mode/PlaylistEditModeContext.tsx b/packages/web/src/components/collection/desktop/edit-mode/PlaylistEditModeContext.tsx
new file mode 100644
index 00000000000..1c4608fa2e4
--- /dev/null
+++ b/packages/web/src/components/collection/desktop/edit-mode/PlaylistEditModeContext.tsx
@@ -0,0 +1,278 @@
+import {
+  createContext,
+  ReactNode,
+  useCallback,
+  useContext,
+  useMemo,
+  useState
+} from 'react'
+
+import { useCollection, useCollectionTracks } from '@audius/common/api'
+import { ID } from '@audius/common/models'
+import {
+  cacheCollectionsActions,
+  EditCollectionValues,
+  toastActions
+} from '@audius/common/store'
+import { useDispatch } from 'react-redux'
+
+const { editPlaylist } = cacheCollectionsActions
+const { toast } = toastActions
+
+type ArtworkDraft = {
+  url: string
+  file: File
+  source?: string
+}
+
+export type PlaylistMetadataDraft = {
+  playlist_name?: string
+  description?: string | null
+  is_private?: boolean
+  artwork?: ArtworkDraft | null
+}
+
+type Status = 'idle' | 'saving' | 'conflict'
+
+type PlaylistEditModeContextValue = {
+  collectionId?: ID
+  isOwner: boolean
+  isEditMode: boolean
+  status: Status
+  draft: PlaylistMetadataDraft
+  hasChanges: boolean
+  enterEditMode: () => void
+  exitEditMode: () => void
+  setField: <K extends keyof PlaylistMetadataDraft>(
+    field: K,
+    value: PlaylistMetadataDraft[K]
+  ) => void
+  apply: () => void
+  discard: () => void
+  resolveConflict: () => void
+}
+
+const PlaylistEditModeContext =
+  createContext<PlaylistEditModeContextValue | null>(null)
+
+const compareValues = (a: unknown, b: unknown) =>
+  a === b || (a == null && b == null)
+
+const messages = {
+  saved: ({
+    savedDetails,
+    savedArtwork
+  }: {
+    savedDetails: boolean
+    savedArtwork: boolean
+  }) => {
+    if (savedDetails && savedArtwork) return 'Saved details and artwork'
+    if (savedArtwork) return 'Saved artwork'
+    return 'Saved details'
+  },
+  conflict:
+    'Heads up — someone else changed this playlist while you were editing. Reload and try again.',
+  failed: 'Could not save changes. Please try again.'
+}
+
+type ProviderProps = {
+  collectionId?: ID
+  isOwner: boolean
+  children: ReactNode
+}
+
+export const PlaylistEditModeProvider = ({
+  collectionId,
+  isOwner,
+  children
+}: ProviderProps) => {
+  const dispatch = useDispatch()
+  const { data: collection } = useCollection(collectionId)
+  const { data: tracks } = useCollectionTracks(collectionId)
+
+  const [isEditMode, setIsEditMode] = useState(false)
+  const [draft, setDraft] = useState<PlaylistMetadataDraft>({})
+  const [status, setStatus] = useState<Status>('idle')
+  const [editModeLoadedAt, setEditModeLoadedAt] = useState<number | null>(null)
+
+  const enterEditMode = useCallback(() => {
+    setIsEditMode(true)
+    setDraft({})
+    setStatus('idle')
+    setEditModeLoadedAt(Date.now())
+  }, [])
+
+  const exitEditMode = useCallback(() => {
+    setIsEditMode(false)
+    setDraft({})
+    setStatus('idle')
+    setEditModeLoadedAt(null)
+  }, [])
+
+  const setField = useCallback<PlaylistEditModeContextValue['setField']>(
+    (field, value) => {
+      setDraft((prev) => ({ ...prev, [field]: value }))
+    },
+    []
+  )
+
+  const discard = useCallback(() => {
+    setDraft({})
+  }, [])
+
+  const resolveConflict = useCallback(() => {
+    setStatus('idle')
+    setDraft({})
+    setIsEditMode(false)
+    setEditModeLoadedAt(null)
+  }, [])
+
+  const hasChanges = useMemo(() => {
+    if (!collection) return false
+    const fields = ['playlist_name', 'description', 'is_private'] as const
+    for (const f of fields) {
+      if (
+        draft[f] !== undefined &&
+        !compareValues(draft[f], (collection as Record<string, unknown>)[f])
+      ) {
+        return true
+      }
+    }
+    if (draft.artwork !== undefined && draft.artwork !== null) return true
+    return false
+  }, [collection, draft])
+
+  const apply = useCallback(() => {
+    if (!collection || !collection.playlist_id) return
+    if (!hasChanges) {
+      exitEditMode()
+      return
+    }
+    // Detect a remote-side change by checking that the collection's
+    // `updated_at` hasn't moved since we entered edit mode.
+    const updatedAtMs = collection.updated_at
+      ? new Date(collection.updated_at).getTime()
+      : null
+    if (
+      editModeLoadedAt !== null &&
+      updatedAtMs !== null &&
+      updatedAtMs > editModeLoadedAt
+    ) {
+      setStatus('conflict')
+      dispatch(toast({ content: messages.conflict }))
+      return
+    }
+
+    setStatus('saving')
+
+    const merged: EditCollectionValues = {
+      ...(collection as unknown as EditCollectionValues),
+      playlist_contents: collection.playlist_contents,
+      tracks: tracks ?? [],
+      playlist_name: draft.playlist_name ?? collection.playlist_name,
+      description:
+        draft.description !== undefined
+          ? draft.description
+          : collection.description,
+      is_private:
+        draft.is_private !== undefined
+          ? draft.is_private
+          : collection.is_private,
+      artwork: draft.artwork ?? { url: '' }
+    } as EditCollectionValues
+
+    const savedDetails =
+      draft.playlist_name !== undefined ||
+      draft.description !== undefined ||
+      draft.is_private !== undefined
+    const savedArtwork = draft.artwork != null
+
+    dispatch(
+      editPlaylist(collection.playlist_id, merged, (success) => {
+        if (success) {
+          dispatch(
+            toast({
+              content: messages.saved({ savedDetails, savedArtwork })
+            })
+          )
+          setDraft({})
+          setIsEditMode(false)
+          setStatus('idle')
+          setEditModeLoadedAt(null)
+        } else {
+          dispatch(toast({ content: messages.failed }))
+          setStatus('idle')
+        }
+      })
+    )
+  }, [
+    collection,
+    dispatch,
+    draft,
+    editModeLoadedAt,
+    exitEditMode,
+    hasChanges,
+    tracks
+  ])
+
+  const value = useMemo<PlaylistEditModeContextValue>(
+    () => ({
+      collectionId,
+      isOwner,
+      isEditMode,
+      status,
+      draft,
+      hasChanges,
+      enterEditMode,
+      exitEditMode,
+      setField,
+      apply,
+      discard,
+      resolveConflict
+    }),
+    [
+      apply,
+      collectionId,
+      discard,
+      draft,
+      enterEditMode,
+      exitEditMode,
+      hasChanges,
+      isEditMode,
+      isOwner,
+      resolveConflict,
+      setField,
+      status
+    ]
+  )
+
+  return (
+    <PlaylistEditModeContext.Provider value={value}>
+      {children}
+    </PlaylistEditModeContext.Provider>
+  )
+}
+
+export const usePlaylistEditMode = (): PlaylistEditModeContextValue => {
+  const ctx = useContext(PlaylistEditModeContext)
+  if (!ctx) {
+    // Not inside a provider — return a no-op context for safe usage in shared
+    // components like CollectionHeader that are rendered for both owners and
+    // non-owners.
+    return {
+      collectionId: undefined,
+      isOwner: false,
+      isEditMode: false,
+      status: 'idle',
+      draft: {},
+      hasChanges: false,
+      enterEditMode: () => {},
+      exitEditMode: () => {},
+      setField: () => {},
+      apply: () => {},
+      discard: () => {},
+      resolveConflict: () => {}
+    }
+  }
+  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 7aaaf45ee33..aeaef0a1c3a 100644
--- a/packages/web/src/pages/collection-page/components/desktop/CollectionPage.tsx
+++ b/packages/web/src/pages/collection-page/components/desktop/CollectionPage.tsx
@@ -22,6 +22,8 @@ import { Id } from '@audius/sdk'
 
 import { CollectionDogEar } from 'components/collection'
 import { CollectionHeader } from 'components/collection/desktop/CollectionHeader'
+import { PlaylistEditModeBar } from 'components/collection/desktop/edit-mode/PlaylistEditModeBar'
+import { PlaylistEditModeProvider } from 'components/collection/desktop/edit-mode/PlaylistEditModeContext'
 import FilterInput from 'components/filter-input/FilterInput'
 import Page from 'components/page/Page'
 import { SuggestedTracks } from 'components/suggested-tracks'
@@ -299,86 +301,92 @@ const CollectionPage = ({ type }: CollectionPageProps) => {
 
   const collectionMessages = getMessages(isAlbum ? 'album' : 'playlist')
   return (
-    <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
+    <PlaylistEditModeProvider
+      collectionId={playlistId ?? undefined}
+      isOwner={isOwner}
     >
-      <Paper column mb='unit-10' border='default'>
-        <CollectionDogEar collectionId={playlistId ?? 0} borderOffset={0} />
-        <div className={styles.topSectionWrapper}>{topSection}</div>
-        {!pageLoading && isEmpty ? (
-          <EmptyContent
-            isOwner={isOwner}
-            isAlbum={isAlbum}
-            text={customEmptyText}
-          />
-        ) : !pageLoading &&
-          tracks.status === Status.SUCCESS &&
-          dataSource.length === 0 ? (
-          <NoSearchResultsContent />
-        ) : (
-          <div className={styles.tableWrapper}>
-            <TracksTable
-              // @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
-              }
+      <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>
+          {!pageLoading && isEmpty ? (
+            <EmptyContent
+              isOwner={isOwner}
+              isAlbum={isAlbum}
+              text={customEmptyText}
             />
-          </div>
-        )}
-      </Paper>
+          ) : !pageLoading &&
+            tracks.status === Status.SUCCESS &&
+            dataSource.length === 0 ? (
+            <NoSearchResultsContent />
+          ) : (
+            <div className={styles.tableWrapper}>
+              <TracksTable
+                // @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>
 
-      {playlistId != null && isOwner && !isAlbum ? (
-        <Flex column gap='2xl' pv='2xl' w='100%'>
-          <Divider />
-          <SuggestedTracks collectionId={playlistId} />
-        </Flex>
-      ) : null}
-    </Page>
+        {playlistId != null && isOwner && !isAlbum ? (
+          <Flex column gap='2xl' pv='2xl' w='100%'>
+            <Divider />
+            <SuggestedTracks collectionId={playlistId} />
+          </Flex>
+        ) : null}
+        <PlaylistEditModeBar />
+      </Page>
+    </PlaylistEditModeProvider>
   )
 }