diff --git a/build-assets/nsis/uninstall.nsh b/build-assets/nsis/uninstall.nsh
new file mode 100644
index 0000000..0d590be
--- /dev/null
+++ b/build-assets/nsis/uninstall.nsh
@@ -0,0 +1,12 @@
+!include LogicLib.nsh
+
+!macro customUnInstall
+    MessageBox MB_YESNO|MB_ICONQUESTION "Do you want to delete local files created by Blueberry Music Player?" /SD IDNO IDYES deleteFiles
+    Goto done
+
+deleteFiles:
+    RMDir /r "$LOCALAPPDATA\Blueberry Music Player"
+    RMDir /r "$APPDATA\Blueberry Music Player"
+
+done:
+!macroend
diff --git a/main.js b/main.js
index 34e01d8..2e6f320 100644
--- a/main.js
+++ b/main.js
@@ -2,17 +2,25 @@
 
 const path = require('path')
 const fs = require('fs')
-const { app, BrowserWindow, ipcMain, dialog, shell } = require('electron')
+const crypto = require('crypto')
+const { pathToFileURL } = require('url')
+const { app, BrowserWindow, ipcMain, dialog, shell, nativeImage } = require('electron')
 const jsmediatags = require('jsmediatags')
 const AUDIO_EXTENSIONS = new Set(['.mp3', '.wav'])
 const MAX_AUDIO_FILE_BYTES = Number(process.env.MAX_AUDIO_FILE_BYTES || 100 * 1024 * 1024)
+const MAX_METADATA_IMAGE_BYTES = Number(process.env.MAX_METADATA_IMAGE_BYTES || 5 * 1024 * 1024)
+const MAX_FOLDER_STAT_WORKERS = Number(process.env.MAX_FOLDER_STAT_WORKERS || 32)
+const ARTWORK_THUMBNAIL_SIZE = Number(process.env.ARTWORK_THUMBNAIL_SIZE || 1024)
+const ARTWORK_CACHE_VERSION = 'v2'
 const DEFAULT_VOLUME = 0.7
 let settingsStore = null
 const allowedAudioPaths = new Set()
 const approvedAudioDirectories = new Set()
 let memoryLogInterval = null
 
+// if (process.env.ELECTRON_DISABLE_HARDWARE_ACCELERATION === '1') {
 app.disableHardwareAcceleration()
+// }
 
 function getAppIconPath() {
     const iconCandidates = [
@@ -165,7 +173,69 @@ function normalizeImageMime(format) {
     return `image/${normalized}`
 }
 
-function normalizeMetadataPicture(picture) {
+async function ensureArtworkCacheDirectory() {
+    const directory = path.join(app.getPath('userData'), 'artwork-cache')
+    await fs.promises.mkdir(directory, { recursive: true })
+    return directory
+}
+
+function getArtworkCacheKey({ filePath, stats, pictureFormat }) {
+    return crypto
+        .createHash('sha1')
+        .update(
+            [
+                filePath,
+                Number(stats?.mtimeMs || 0),
+                Number(stats?.size || 0),
+                pictureFormat || '',
+                ARTWORK_THUMBNAIL_SIZE,
+                ARTWORK_CACHE_VERSION,
+            ].join('|'),
+        )
+        .digest('hex')
+}
+
+async function writeArtworkThumbnail({ buffer, filePath, stats, pictureFormat }) {
+    if (!buffer?.length || buffer.length > MAX_METADATA_IMAGE_BYTES) {
+        return null
+    }
+
+    const cacheDirectory = await ensureArtworkCacheDirectory()
+    const cachePath = path.join(
+        cacheDirectory,
+        `${getArtworkCacheKey({ filePath, stats, pictureFormat })}.png`,
+    )
+
+    try {
+        await fs.promises.access(cachePath, fs.constants.R_OK)
+        return pathToFileURL(cachePath).href
+    } catch {
+        // Cache miss; generate below.
+    }
+
+    const sourceImage = nativeImage.createFromBuffer(buffer)
+    if (!sourceImage || sourceImage.isEmpty()) {
+        return null
+    }
+
+    const sourceSize = sourceImage.getSize()
+    const largestSide = Math.max(sourceSize.width || 0, sourceSize.height || 0)
+    if (!largestSide) {
+        return null
+    }
+
+    const scale = Math.min(1, ARTWORK_THUMBNAIL_SIZE / largestSide)
+    const thumbnail = sourceImage.resize({
+        width: Math.max(1, Math.round(sourceSize.width * scale)),
+        height: Math.max(1, Math.round(sourceSize.height * scale)),
+        quality: 'best',
+    })
+
+    await fs.promises.writeFile(cachePath, thumbnail.toPNG())
+    return pathToFileURL(cachePath).href
+}
+
+async function normalizeMetadataPicture(picture, { filePath, stats } = {}) {
     if (!picture?.data) {
         return {
             image: null,
@@ -193,14 +263,48 @@ function normalizeMetadataPicture(picture) {
 
     const pictureFormat = normalizeImageMime(picture.format)
     return {
-        image: `data:${pictureFormat};base64,${buffer.toString('base64')}`,
+        image: await writeArtworkThumbnail({
+            buffer,
+            filePath,
+            stats,
+            pictureFormat,
+        }),
         pictureFormat,
         pictureBytes: buffer.length,
     }
 }
 
-function normalizeAudioMetadataTags(tags = {}) {
-    const picture = normalizeMetadataPicture(tags.picture)
+async function mapWithConcurrency(items, concurrency, mapper) {
+    const results = new Array(items.length)
+    let nextIndex = 0
+    const safeConcurrency = Number.isFinite(Number(concurrency))
+        ? Math.floor(Number(concurrency))
+        : 1
+    const workerCount = Math.min(Math.max(1, safeConcurrency), items.length)
+
+    const workers = Array.from({ length: workerCount }, async () => {
+        while (nextIndex < items.length) {
+            const index = nextIndex
+            nextIndex += 1
+            results[index] = await mapper(items[index], index)
+        }
+    })
+
+    await Promise.all(workers)
+    return results
+}
+
+async function normalizeAudioMetadataTags(
+    tags = {},
+    { includeImage = true, filePath = '', stats = null } = {},
+) {
+    const picture = includeImage
+        ? await normalizeMetadataPicture(tags.picture, { filePath, stats })
+        : {
+              image: null,
+              pictureFormat: null,
+              pictureBytes: 0,
+          }
     const metadata = {
         title: normalizeMetadataTagValue(tags.title),
         artist: normalizeMetadataTagValue(tags.artist),
@@ -216,23 +320,36 @@ function normalizeAudioMetadataTags(tags = {}) {
 
     const hasMetadata = Boolean(
         metadata.title ||
-            metadata.artist ||
-            metadata.album ||
-            metadata.year ||
-            metadata.genre ||
-            metadata.track ||
-            metadata.disc ||
-            metadata.image,
+        metadata.artist ||
+        metadata.album ||
+        metadata.year ||
+        metadata.genre ||
+        metadata.track ||
+        metadata.disc ||
+        metadata.image,
     )
 
     return hasMetadata ? metadata : null
 }
 
-function readAudioMetadata(filePath) {
+function readAudioMetadata(filePath, options = {}) {
     return new Promise((resolve) => {
         jsmediatags.read(filePath, {
-            onSuccess: (tag) => {
-                resolve(normalizeAudioMetadataTags(tag?.tags || {}))
+            onSuccess: async (tag) => {
+                try {
+                    resolve(
+                        await normalizeAudioMetadataTags(tag?.tags || {}, {
+                            ...options,
+                            filePath,
+                        }),
+                    )
+                } catch (error) {
+                    console.warn('Failed to normalize audio metadata:', {
+                        filePath,
+                        error: String(error?.message || error || 'unknown error'),
+                    })
+                    resolve(null)
+                }
             },
             onError: (error) => {
                 console.warn('Failed to read audio metadata:', {
@@ -285,7 +402,7 @@ const createWindow = () => {
 
     // debug in dev
     win.loadFile('ui/index.html')
-    if (app.isPackaged === false) {
+    if (app.isPackaged === false && process.env.ELECTRON_OPEN_DEVTOOLS !== '0') {
         win.webContents.openDevTools()
     }
     win.on('ready-to-show', () => {
@@ -423,15 +540,15 @@ ipcMain.handle('folder:getAudioFiles', async (event, folderPath) => {
             .filter((entry) => entry.isFile())
             .map((entry) => path.join(folderPath, entry.name))
             .filter((filePath) => AUDIO_EXTENSIONS.has(path.extname(filePath).toLowerCase()))
-        const filesWithDates = await Promise.all(
-            audioPaths.map(async (filePath) => {
+        const filesWithDates = (
+            await mapWithConcurrency(audioPaths, MAX_FOLDER_STAT_WORKERS, async (filePath) => {
                 const stats = await fs.promises.stat(filePath)
                 return {
                     filePath,
                     createdAt: stats.birthtimeMs,
                 }
-            }),
-        )
+            })
+        ).filter(Boolean)
 
         // play files in order they were added to the folder
         const files = filesWithDates
@@ -520,6 +637,58 @@ ipcMain.handle(
     },
 )
 
+ipcMain.handle(
+    'playlist:savePlaybackPosition',
+    async (
+        event,
+        { currentTrackIndex, currentTrackPath, currentTrackOccurrence, playbackPosition } = {},
+    ) => {
+        if (!settingsStore) {
+            return false
+        }
+
+        try {
+            const playlist = settingsStore.get('recentPlaylist', [])
+
+            let approvedCurrentTrackIndex = -1
+
+            // Prefer resolving by renderer-provided track path (and optional occurrence)
+            if (currentTrackPath && Array.isArray(playlist)) {
+                if (Number.isInteger(currentTrackOccurrence) && currentTrackOccurrence >= 1) {
+                    approvedCurrentTrackIndex = findNthOccurrenceIndex(
+                        playlist,
+                        currentTrackPath,
+                        currentTrackOccurrence,
+                    )
+                } else {
+                    approvedCurrentTrackIndex = playlist.indexOf(currentTrackPath)
+                }
+            }
+
+            // Fall back to numeric index if no path match available
+            if (
+                approvedCurrentTrackIndex < 0 &&
+                Number.isInteger(currentTrackIndex) &&
+                Array.isArray(playlist) &&
+                currentTrackIndex >= 0 &&
+                currentTrackIndex < playlist.length
+            ) {
+                approvedCurrentTrackIndex = currentTrackIndex
+            }
+
+            settingsStore.set('recentPlaylistIndex', approvedCurrentTrackIndex)
+            settingsStore.set(
+                'recentPlaybackPosition',
+                approvedCurrentTrackIndex >= 0 ? normalizePlaybackPosition(playbackPosition) : 0,
+            )
+            return true
+        } catch (error) {
+            console.error('Failed to save playback position:', error)
+            return false
+        }
+    },
+)
+
 ipcMain.handle('playlist:load', async () => {
     if (!settingsStore) {
         return { playlist: [], currentTrackIndex: -1, playbackPosition: 0 }
@@ -611,13 +780,28 @@ ipcMain.handle('file:approveRecentAudioPath', async (event, filePath) => {
     }
 })
 
-ipcMain.handle('file:readAudioMetadata', async (event, filePath) => {
+ipcMain.handle('file:readAudioMetadata', async (event, payload) => {
     try {
-        if (!(await getApprovedAudioFileStats(filePath, 'readAudioMetadata'))) {
+        const filePath =
+            typeof payload === 'string'
+                ? payload
+                : typeof payload?.filePath === 'string'
+                  ? payload.filePath
+                  : ''
+        const options =
+            payload && typeof payload === 'object' && typeof payload.options === 'object'
+                ? payload.options
+                : {}
+
+        const stats = await getApprovedAudioFileStats(filePath, 'readAudioMetadata')
+        if (!stats) {
             return null
         }
 
-        return await readAudioMetadata(filePath)
+        return await readAudioMetadata(filePath, {
+            includeImage: options.includeImage !== false,
+            stats,
+        })
     } catch (error) {
         console.error('Failed to read audio metadata:', error)
         return null
diff --git a/package.json b/package.json
index 4750639..ef7bcd9 100644
--- a/package.json
+++ b/package.json
@@ -86,7 +86,7 @@
         "nsis": {
             "oneClick": false,
             "allowToChangeInstallationDirectory": true,
-            "deleteAppDataOnUninstall": true
+            "include": "build-assets/nsis/uninstall.nsh"
         }
     }
 }
diff --git a/preload.js b/preload.js
index 8ba7d02..e16e38f 100644
--- a/preload.js
+++ b/preload.js
@@ -7,11 +7,24 @@ contextBridge.exposeInMainWorld('electronAPI', {
     selectImageFile: () => ipcRenderer.invoke('dialog:openImageFile'),
     openFolder: () => ipcRenderer.invoke('dialog:openFolder'),
     getAudioFilesInFolder: (folderPath) => ipcRenderer.invoke('folder:getAudioFiles', folderPath),
-    readAudioMetadata: (filePath) => ipcRenderer.invoke('file:readAudioMetadata', filePath),
+    readAudioMetadata: (filePath, options = {}) =>
+        ipcRenderer.invoke('file:readAudioMetadata', { filePath, options }),
     getSavedVolume: () => ipcRenderer.invoke('settings:getVolume'),
     saveVolume: (volume) => ipcRenderer.invoke('settings:setVolume', volume),
     savePlaylist: (playlist, currentTrackIndex, playbackPosition = 0) =>
         ipcRenderer.invoke('playlist:save', { playlist, currentTrackIndex, playbackPosition }),
+    savePlaybackPosition: (
+        currentTrackIndex,
+        playbackPosition = 0,
+        currentTrackPath,
+        currentTrackOccurrence,
+    ) =>
+        ipcRenderer.invoke('playlist:savePlaybackPosition', {
+            currentTrackIndex,
+            currentTrackPath,
+            currentTrackOccurrence,
+            playbackPosition,
+        }),
     loadPlaylist: () => ipcRenderer.invoke('playlist:load'),
     saveRecentTracks: (tracks) => ipcRenderer.invoke('recent-tracks:save', tracks),
     loadRecentTracks: () => ipcRenderer.invoke('recent-tracks:load'),
diff --git a/ui/assets/cursor-auto.png b/ui/assets/cursor-auto.png
new file mode 100644
index 0000000..e412e8b
Binary files /dev/null and b/ui/assets/cursor-auto.png differ
diff --git a/ui/assets/cursor-drag-clicked.png b/ui/assets/cursor-drag-clicked.png
new file mode 100644
index 0000000..eb28371
Binary files /dev/null and b/ui/assets/cursor-drag-clicked.png differ
diff --git a/ui/assets/cursor-drag.png b/ui/assets/cursor-drag.png
new file mode 100644
index 0000000..fe9b27b
Binary files /dev/null and b/ui/assets/cursor-drag.png differ
diff --git a/ui/assets/cursor-pointer-clicked.png b/ui/assets/cursor-pointer-clicked.png
new file mode 100644
index 0000000..1c57eb0
Binary files /dev/null and b/ui/assets/cursor-pointer-clicked.png differ
diff --git a/ui/assets/cursor-text.png b/ui/assets/cursor-text.png
new file mode 100644
index 0000000..ea7695e
Binary files /dev/null and b/ui/assets/cursor-text.png differ
diff --git a/ui/components/bottom-player/player.css b/ui/components/bottom-player/player.css
index 43b5bf0..32bef68 100644
--- a/ui/components/bottom-player/player.css
+++ b/ui/components/bottom-player/player.css
@@ -104,6 +104,15 @@
     background: #f5f8fc;
 }
 
+#bottom-player #trackRepeatBtn.is-active {
+    color: #2563eb;
+    background: #e8f0ff;
+}
+
+#bottom-player #trackRepeatBtn.is-active:hover {
+    background: #dbeafe;
+}
+
 #bottom-player #playPauseBtn {
     width: 40px;
     height: 40px;
@@ -134,6 +143,200 @@
     max-width: 120px;
 }
 
+#bottom-player .trackMenuHost {
+    position: relative;
+    display: inline-flex;
+}
+
+#bottom-player .trackMenu {
+    position: absolute;
+    right: 0;
+    bottom: 42px;
+    min-width: 160px;
+    border: 1px solid #d9dee7;
+    border-radius: 8px;
+    background: #ffffff;
+    box-shadow: 0 8px 18px rgba(23, 31, 56, 0.16);
+    padding: 6px;
+    z-index: 1200;
+}
+
+#bottom-player .trackMenu[hidden] {
+    display: none;
+}
+
+#bottom-player .trackMenu.is-open {
+    display: grid;
+    gap: 6px;
+}
+
+#bottom-player .trackMenuItem {
+    width: 100%;
+    height: 34px;
+    justify-content: flex-start;
+    border: 1px solid transparent;
+    border-radius: 8px;
+    padding: 0 10px;
+    font: inherit;
+    font-size: 12px;
+    font-weight: 600;
+    color: #273244;
+    gap: 6px;
+}
+
+#bottom-player .trackMenuItem:hover {
+    border-color: #d6dbe3;
+    background: #eef3ff;
+}
+
+.playerModalHost {
+    display: none;
+}
+
+.playerModalHost.is-open {
+    display: block;
+}
+
+.playerModalBackdrop {
+    position: fixed;
+    inset: 0;
+    background: rgba(8, 17, 36, 0.38);
+    z-index: 2500;
+}
+
+.playerPropertiesDialog {
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    width: min(560px, calc(100vw - 24px));
+    max-height: min(680px, calc(100vh - 32px));
+    transform: translate(-50%, -50%);
+    display: grid;
+    grid-template-rows: auto minmax(0, 1fr) auto;
+    border: 1px solid #d8dee8;
+    border-radius: 10px;
+    background: #ffffff;
+    box-shadow: 0 12px 32px rgba(18, 28, 47, 0.24);
+    z-index: 2501;
+    overflow: hidden;
+}
+
+.playerPropertiesHeader {
+    display: grid;
+    grid-template-columns: 64px minmax(0, 1fr);
+    gap: 12px;
+    align-items: center;
+    padding: 14px;
+    border-bottom: 1px solid #edf1f5;
+}
+
+.playerPropertiesArtwork {
+    width: 64px;
+    height: 64px;
+    border-radius: 8px;
+    object-fit: cover;
+    background: #edf2f7;
+}
+
+.playerPropertiesHeader h3 {
+    margin: 0;
+    font-size: 18px;
+}
+
+.playerPropertiesHeader p {
+    margin: 4px 0 0;
+    color: #5f6368;
+    font-size: 13px;
+    overflow-wrap: anywhere;
+}
+
+.playerPropertiesContent {
+    min-height: 0;
+    overflow-y: auto;
+    padding: 12px 14px;
+    display: grid;
+    gap: 14px;
+}
+
+.playerPropertySection {
+    display: grid;
+    gap: 8px;
+}
+
+.playerPropertySection h4 {
+    margin: 0;
+    color: #344054;
+    font-size: 12px;
+    font-weight: 700;
+    text-transform: uppercase;
+}
+
+.playerPropertySection dl {
+    margin: 0;
+    display: grid;
+    gap: 6px;
+}
+
+.playerPropertyRow {
+    display: grid;
+    grid-template-columns: minmax(96px, 0.36fr) minmax(0, 1fr);
+    gap: 10px;
+    align-items: start;
+    border-bottom: 1px solid #f1f4f8;
+    padding-bottom: 6px;
+}
+
+.playerPropertyRow dt,
+.playerPropertyRow dd {
+    margin: 0;
+    font-size: 13px;
+}
+
+.playerPropertyRow dt {
+    color: #667085;
+}
+
+.playerPropertyRow dd {
+    color: #1f2937;
+    overflow-wrap: anywhere;
+}
+
+.playerPropertiesEmpty,
+.playerPropertiesError {
+    margin: 0;
+    color: #667085;
+    font-size: 13px;
+}
+
+.playerPropertiesError {
+    color: #b42318;
+}
+
+.playerPropertiesActions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    padding: 12px 14px;
+    border-top: 1px solid #edf1f5;
+}
+
+.playerPropertiesCloseBtn {
+    min-height: 34px;
+    border: 1px solid #cfd7e2;
+    border-radius: 8px;
+    background: #ffffff;
+    color: #273244;
+    padding: 0 12px;
+    font: inherit;
+    font-size: 12px;
+    font-weight: 600;
+    cursor: pointer;
+}
+
+.playerPropertiesCloseBtn:hover {
+    background: #eef3ff;
+}
+
 @media (max-height: 620px) and (min-width: 761px) {
     :root {
         --bottom-player-height: 82px;
@@ -218,3 +421,19 @@
         max-width: 100%;
     }
 }
+
+@media (max-width: 560px) {
+    .playerPropertiesHeader {
+        grid-template-columns: 52px minmax(0, 1fr);
+    }
+
+    .playerPropertiesArtwork {
+        width: 52px;
+        height: 52px;
+    }
+
+    .playerPropertyRow {
+        grid-template-columns: 1fr;
+        gap: 3px;
+    }
+}
diff --git a/ui/components/bottom-player/player.html b/ui/components/bottom-player/player.html
index ba46fd9..3195867 100644
--- a/ui/components/bottom-player/player.html
+++ b/ui/components/bottom-player/player.html
@@ -55,8 +55,31 @@
         </button>
 
         <input type="range" id="volumeSlider" min="0" max="1" step="0.01" value="0.7" />
-        <button id="trackMenuBtn" type="button" aria-label="Track menu">
-            <i data-lucide="ellipsis"></i>
-        </button>
+        <div class="trackMenuHost">
+            <button
+                id="trackMenuBtn"
+                type="button"
+                aria-label="Track menu"
+                aria-haspopup="menu"
+                aria-expanded="false"
+            >
+                <i data-lucide="ellipsis"></i>
+            </button>
+
+            <div id="trackMenu" class="trackMenu" role="menu" hidden>
+                <button id="trackPropertiesBtn" class="trackMenuItem" type="button" role="menuitem">
+                    <i data-lucide="info"></i>
+                    Properties
+                </button>
+                <button id="trackEqualizerBtn" class="trackMenuItem" type="button" role="menuitem">
+                    <i data-lucide="settings-2"></i>
+                    Equalizer
+                </button>
+                <button id="trackTestBtn" class="trackMenuItem" type="button" role="menuitem">
+                    <i data-lucide="info"></i>
+                    Test
+                </button>
+            </div>
+        </div>
     </div>
 </div>
diff --git a/ui/components/bottom-player/player.js b/ui/components/bottom-player/player.js
index 9f210ca..1dc00dd 100644
--- a/ui/components/bottom-player/player.js
+++ b/ui/components/bottom-player/player.js
@@ -1,6 +1,19 @@
 import { playerState } from '../../state/player-state.js'
 import { audioService } from '../../services/audio-service.js'
 import { formatDurationClock as formatTime } from '../../utils/duration.js'
+import { bindModalResolve, showModalPrompt } from '../../utils/dom-helpers.js'
+
+const PLAYER_MODAL_HOST_CLASS = 'playerModalHost'
+const METADATA_LABELS = {
+    title: 'Title',
+    artist: 'Artist',
+    album: 'Album',
+    year: 'Year',
+    genre: 'Genre',
+    track: 'Track',
+    disc: 'Disc',
+}
+const HIDDEN_METADATA_TAGS = new Set(['image', 'pictureFormat', 'pictureBytes'])
 
 export function initializePlayer() {
     const bottomPlayer = document.getElementById('bottom-player')
@@ -16,19 +29,25 @@ export function initializePlayer() {
     const playPauseBtn = bottomPlayer.querySelector('#playPauseBtn')
     const prevBtn = bottomPlayer.querySelector('#prevBtn')
     const nextBtn = bottomPlayer.querySelector('#nextBtn')
+    const repeatBtn = bottomPlayer.querySelector('#trackRepeatBtn')
     const progressSlider = bottomPlayer.querySelector('#progressSlider')
     const currentTimeElement = bottomPlayer.querySelector('#currentTime')
     const durationElement = bottomPlayer.querySelector('#duration')
     const volumeSlider = bottomPlayer.querySelector('#volumeSlider')
     const volumeBtn = bottomPlayer.querySelector('#volumeBtn')
+    const trackMenuBtn = bottomPlayer.querySelector('#trackMenuBtn')
+    const trackMenu = bottomPlayer.querySelector('#trackMenu')
+    const trackPropertiesBtn = bottomPlayer.querySelector('#trackPropertiesBtn')
     const placeholderCover = audioService?.placeholderCover || './assets/music-placeholder.png'
     let progressRafId = null
+    let latestSnapshot = playerState.getState()
 
     console.log('Player DOM elements found')
 
-    function updatePlayerUI() {
+    function updatePlayerUI(snapshot = latestSnapshot) {
         // console.log('updatePlayerUI triggered');
-        const { currentTrack, isPlaying, volume } = playerState.getState()
+        latestSnapshot = snapshot || latestSnapshot
+        const { currentTrack, isPlaying, volume, loopEnabled } = latestSnapshot
         const title = currentTrack?.title || 'No song selected'
         const artist = currentTrack?.artist || 'Unknown artist'
         const image = currentTrack?.image || placeholderCover
@@ -52,6 +71,11 @@ export function initializePlayer() {
             volumeSlider.value = Number.isFinite(Number(volume)) ? Number(volume) : 0.7
         }
 
+        if (repeatBtn) {
+            repeatBtn.classList.toggle('is-active', Boolean(loopEnabled))
+            repeatBtn.setAttribute('aria-pressed', String(Boolean(loopEnabled)))
+        }
+
         const sound = audioService.getCurrentSound()
         if (sound) {
             const seek = sound.seek() || 0
@@ -73,6 +97,267 @@ export function initializePlayer() {
         }
     }
 
+    function getActiveTrackFilePath(snapshot = playerState.getState()) {
+        const playlist = Array.isArray(snapshot?.playlist) ? snapshot.playlist : []
+        const currentTrackIndex = Number.isInteger(snapshot?.currentTrackIndex)
+            ? snapshot.currentTrackIndex
+            : -1
+
+        if (currentTrackIndex >= 0 && currentTrackIndex < playlist.length) {
+            return playlist[currentTrackIndex]
+        }
+
+        return typeof snapshot?.currentTrack?.filePath === 'string'
+            ? snapshot.currentTrack.filePath
+            : ''
+    }
+
+    function getFileName(filePath) {
+        return String(filePath || '')
+            .split(/[\\/]/)
+            .filter(Boolean)
+            .pop()
+    }
+
+    function formatPropertyValue(value) {
+        if (value === null || value === undefined || value === '') {
+            return ''
+        }
+
+        if (Array.isArray(value)) {
+            return value.filter(Boolean).join(', ')
+        }
+
+        if (typeof value === 'object') {
+            return JSON.stringify(value)
+        }
+
+        return String(value)
+    }
+
+    function createMetadataRow(label, value) {
+        const row = document.createElement('div')
+        row.className = 'playerPropertyRow'
+
+        const term = document.createElement('dt')
+        term.textContent = label
+
+        const description = document.createElement('dd')
+        description.textContent = value || 'Not available'
+
+        row.appendChild(term)
+        row.appendChild(description)
+        return row
+    }
+
+    function appendMetadataSection(container, title, rows) {
+        const section = document.createElement('section')
+        section.className = 'playerPropertySection'
+
+        const heading = document.createElement('h4')
+        heading.textContent = title
+        section.appendChild(heading)
+
+        if (!rows.length) {
+            const empty = document.createElement('p')
+            empty.className = 'playerPropertiesEmpty'
+            empty.textContent = 'No metadata found.'
+            section.appendChild(empty)
+            container.appendChild(section)
+            return
+        }
+
+        const list = document.createElement('dl')
+        rows.forEach(([label, value]) => {
+            list.appendChild(createMetadataRow(label, value))
+        })
+        section.appendChild(list)
+        container.appendChild(section)
+    }
+
+    function buildRawMetadataRows(rawMetadata) {
+        if (!rawMetadata || typeof rawMetadata !== 'object') {
+            return []
+        }
+
+        return Object.entries(rawMetadata)
+            .filter(([key]) => !HIDDEN_METADATA_TAGS.has(key))
+            .map(([key, value]) => [METADATA_LABELS[key] || key, formatPropertyValue(value)])
+    }
+
+    function buildPropertiesDialog({ filePath, snapshot, rawMetadata, metadataError }) {
+        const fragment = document.createDocumentFragment()
+
+        const backdrop = document.createElement('div')
+        backdrop.className = 'playerModalBackdrop'
+        backdrop.setAttribute('data-close', 'true')
+
+        const dialog = document.createElement('div')
+        dialog.className = 'playerPropertiesDialog'
+        dialog.setAttribute('role', 'dialog')
+        dialog.setAttribute('aria-modal', 'true')
+        dialog.setAttribute('aria-labelledby', 'playerPropertiesTitle')
+
+        const currentTrack = snapshot?.currentTrack || {}
+        const displayData = filePath ? audioService.getTrackDisplayData(filePath) : {}
+        const title =
+            currentTrack.title || rawMetadata?.title || displayData.title || 'No track selected'
+        const artist =
+            currentTrack.artist || rawMetadata?.artist || displayData.artist || 'Unknown artist'
+        const album = currentTrack.album || rawMetadata?.album || displayData.album || ''
+        const artwork =
+            currentTrack.image || rawMetadata?.image || displayData.image || placeholderCover
+
+        const header = document.createElement('div')
+        header.className = 'playerPropertiesHeader'
+
+        const artworkImage = document.createElement('img')
+        artworkImage.src = artwork
+        artworkImage.alt = title
+        artworkImage.className = 'playerPropertiesArtwork'
+        artworkImage.addEventListener('error', () => {
+            artworkImage.src = placeholderCover
+        })
+
+        const headingWrap = document.createElement('div')
+        const heading = document.createElement('h3')
+        heading.id = 'playerPropertiesTitle'
+        heading.textContent = 'Track Properties'
+
+        const subtitle = document.createElement('p')
+        subtitle.textContent = filePath ? getFileName(filePath) || filePath : 'No track selected'
+
+        headingWrap.appendChild(heading)
+        headingWrap.appendChild(subtitle)
+        header.appendChild(artworkImage)
+        header.appendChild(headingWrap)
+
+        const content = document.createElement('div')
+        content.className = 'playerPropertiesContent'
+
+        const playlist = Array.isArray(snapshot?.playlist) ? snapshot.playlist : []
+        const currentTrackIndex = Number.isInteger(snapshot?.currentTrackIndex)
+            ? snapshot.currentTrackIndex
+            : -1
+        const sound = audioService.getCurrentSound()
+        const duration = Number(sound?.duration?.() || snapshot?.progress?.duration || 0)
+
+        appendMetadataSection(content, 'File', [
+            ['File name', filePath ? getFileName(filePath) || filePath : ''],
+            ['File path', filePath],
+            [
+                'Queue position',
+                currentTrackIndex >= 0 && playlist.length
+                    ? `${currentTrackIndex + 1} of ${playlist.length}`
+                    : '',
+            ],
+            ['Duration', duration > 0 ? formatTime(duration) : ''],
+        ])
+
+        appendMetadataSection(content, 'Current Display', [
+            ['Title', title],
+            ['Artist', artist],
+            ['Album', album],
+        ])
+
+        appendMetadataSection(content, 'Metadata Tags', buildRawMetadataRows(rawMetadata))
+
+        if (metadataError) {
+            const error = document.createElement('p')
+            error.className = 'playerPropertiesError'
+            error.textContent = `Could not read embedded metadata: ${metadataError}`
+            content.appendChild(error)
+        }
+
+        const actions = document.createElement('div')
+        actions.className = 'playerPropertiesActions'
+
+        const closeButton = document.createElement('button')
+        closeButton.type = 'button'
+        closeButton.className = 'playerPropertiesCloseBtn'
+        closeButton.textContent = 'Close'
+        actions.appendChild(closeButton)
+
+        dialog.appendChild(header)
+        dialog.appendChild(content)
+        dialog.appendChild(actions)
+
+        fragment.appendChild(backdrop)
+        fragment.appendChild(dialog)
+        return fragment
+    }
+
+    function showPropertiesDialog(props) {
+        return showModalPrompt({
+            scope: document.body,
+            contentNode: buildPropertiesDialog(props),
+            hostClass: PLAYER_MODAL_HOST_CLASS,
+            fallbackValue: undefined,
+            onBind: ({ modalHost, resolve }) => {
+                bindModalResolve({
+                    modalHost,
+                    selector: '.playerPropertiesCloseBtn',
+                    resolve,
+                    value: undefined,
+                })
+                bindModalResolve({
+                    modalHost,
+                    selector: '.playerModalBackdrop',
+                    resolve,
+                    value: undefined,
+                })
+            },
+        })
+    }
+
+    function closeTrackMenu() {
+        if (trackMenu) {
+            trackMenu.hidden = true
+            trackMenu.classList.remove('is-open')
+        }
+
+        if (trackMenuBtn) {
+            trackMenuBtn.setAttribute('aria-expanded', 'false')
+        }
+    }
+
+    function toggleTrackMenu() {
+        if (!trackMenu || !trackMenuBtn) {
+            return
+        }
+
+        const shouldOpen = trackMenu.hidden
+        trackMenu.hidden = !shouldOpen
+        trackMenu.classList.toggle('is-open', shouldOpen)
+        trackMenuBtn.setAttribute('aria-expanded', String(shouldOpen))
+    }
+
+    async function showCurrentTrackProperties() {
+        closeTrackMenu()
+
+        const snapshot = playerState.getState()
+        const filePath = getActiveTrackFilePath(snapshot)
+        let rawMetadata = null
+        let metadataError = ''
+
+        if (filePath && typeof window.electronAPI?.readAudioMetadata === 'function') {
+            try {
+                rawMetadata = await window.electronAPI.readAudioMetadata(filePath, {
+                    includeImage: false,
+                })
+            } catch (error) {
+                metadataError = error?.message || String(error)
+            }
+        }
+
+        await showPropertiesDialog({
+            filePath,
+            snapshot,
+            rawMetadata,
+            metadataError,
+        })
+    }
+
     function setupEventListeners() {
         if (playPauseBtn) {
             playPauseBtn.addEventListener('click', () => {
@@ -95,6 +380,12 @@ export function initializePlayer() {
             })
         }
 
+        if (repeatBtn) {
+            repeatBtn.addEventListener('click', () => {
+                playerState.toggleLoopEnabled()
+            })
+        }
+
         if (progressSlider) {
             progressSlider.addEventListener('input', (e) => {
                 const sound = audioService.getCurrentSound()
@@ -120,6 +411,34 @@ export function initializePlayer() {
             })
         }
 
+        if (trackMenuBtn) {
+            trackMenuBtn.addEventListener('click', (event) => {
+                event.stopPropagation()
+                toggleTrackMenu()
+            })
+        }
+
+        if (trackMenu) {
+            trackMenu.addEventListener('click', (event) => {
+                event.stopPropagation()
+            })
+        }
+
+        if (trackPropertiesBtn) {
+            trackPropertiesBtn.addEventListener('click', () => {
+                showCurrentTrackProperties().catch((error) => {
+                    console.error('Failed to show track properties:', error)
+                })
+            })
+        }
+
+        document.addEventListener('click', closeTrackMenu)
+        document.addEventListener('keydown', (event) => {
+            if (event.key === 'Escape') {
+                closeTrackMenu()
+            }
+        })
+
         if (albumArtElement) {
             albumArtElement.addEventListener('error', () => {
                 albumArtElement.src = placeholderCover
@@ -139,7 +458,7 @@ export function initializePlayer() {
 
         function updateProgress() {
             const sound = audioService.getCurrentSound()
-            const { isPlaying } = playerState.getState()
+            const isPlaying = Boolean(latestSnapshot?.isPlaying)
 
             if (!sound || !isPlaying) {
                 stopProgressLoop()
@@ -161,7 +480,7 @@ export function initializePlayer() {
             }
 
             const sound = audioService.getCurrentSound()
-            const { isPlaying } = playerState.getState()
+            const isPlaying = Boolean(latestSnapshot?.isPlaying)
             if (!sound || !isPlaying) {
                 return
             }
@@ -169,11 +488,12 @@ export function initializePlayer() {
             progressRafId = requestAnimationFrame(updateProgress)
         }
 
-        const unsubscribe = playerState.subscribe(() => {
-            updatePlayerUI()
+        const unsubscribe = playerState.subscribe((snapshot) => {
+            latestSnapshot = snapshot
+            updatePlayerUI(snapshot)
 
             const sound = audioService.getCurrentSound()
-            const { isPlaying } = playerState.getState()
+            const isPlaying = Boolean(snapshot?.isPlaying)
             if (sound && isPlaying) {
                 startProgressLoop()
             } else {
diff --git a/ui/components/loading/loading.css b/ui/components/loading/loading.css
index eaa3ca1..0556f23 100644
--- a/ui/components/loading/loading.css
+++ b/ui/components/loading/loading.css
@@ -8,7 +8,7 @@
 
     background: #0f172a;
 
-    display: flex;
+    /* display: flex; */
     justify-content: center;
     align-items: center;
     opacity: 0.8;
@@ -22,3 +22,7 @@
 #loadingText {
     color: #ffffff;
 }
+
+.fade-out {
+    pointer-events: none;
+}
diff --git a/ui/components/recent-music/recent-metadata.js b/ui/components/recent-music/recent-metadata.js
index 774b134..830de8e 100644
--- a/ui/components/recent-music/recent-metadata.js
+++ b/ui/components/recent-music/recent-metadata.js
@@ -9,10 +9,20 @@ import { audioService } from '../../services/audio-service.js'
 
 const VIEW_SONGS_METADATA_DEBUG_ENABLED = false
 const VIEW_SONGS_METADATA_WORKERS = 4
+const VIEW_SONGS_METADATA_CACHE_LIMIT = 240
 
-// Simple in-memory cache for resolved metadata promises keyed by file path.
+// Simple in-memory cache for resolved metadata promises keyed by file path+options.
 const metadataCache = new Map()
 
+function makeMetadataCacheKey(filePath, options) {
+    const opts = options && typeof options === 'object' ? options : {}
+    try {
+        return `${filePath}::${JSON.stringify(opts)}`
+    } catch {
+        return `${filePath}::${String(opts)}`
+    }
+}
+
 export function clearMetadataCache() {
     metadataCache.clear()
 }
@@ -28,6 +38,36 @@ function logViewSongsMetadataDebug(phase, payload = {}) {
     })
 }
 
+function getCachedMetadataPromise(filePath, options) {
+    const key = makeMetadataCacheKey(filePath, options)
+    if (!metadataCache.has(key)) {
+        return null
+    }
+
+    const cached = metadataCache.get(key)
+    metadataCache.delete(key)
+    metadataCache.set(key, cached)
+    return cached
+}
+
+function setCachedMetadataPromise(filePath, options, fetchPromise) {
+    const key = makeMetadataCacheKey(filePath, options)
+    if (metadataCache.has(key)) {
+        metadataCache.delete(key)
+    }
+
+    metadataCache.set(key, fetchPromise)
+
+    if (metadataCache.size <= VIEW_SONGS_METADATA_CACHE_LIMIT) {
+        return
+    }
+
+    const oldestKey = metadataCache.keys().next().value
+    if (oldestKey) {
+        metadataCache.delete(oldestKey)
+    }
+}
+
 function updateViewSongsTrackRow(modalHost, trackIndex, { title, artist }) {
     if (!modalHost?.isConnected || !Number.isInteger(trackIndex)) {
         return
@@ -115,16 +155,17 @@ export async function hydrateViewSongsMetadata({ playlist, tracks, modalHost, si
 
             try {
                 // Reuse cached promise when available so concurrent requests share work
-                let fetchPromise = metadataCache.get(filePath)
+                const fetchOptions = { includeImage: false }
+                let fetchPromise = getCachedMetadataPromise(filePath, fetchOptions)
                 if (!fetchPromise) {
                     fetchPromise = (async () => {
                         try {
-                            return await audioService.resolveTrackMetadata(filePath)
+                            return await audioService.resolveTrackMetadata(filePath, fetchOptions)
                         } catch {
                             return null
                         }
                     })()
-                    metadataCache.set(filePath, fetchPromise)
+                    setCachedMetadataPromise(filePath, fetchOptions, fetchPromise)
                 }
 
                 const resolvedMetadata = await fetchPromise
@@ -217,16 +258,17 @@ export async function resolvePlaylistTracksMetadata(tracks, { signal } = {}) {
 
             try {
                 // Reuse cached promise when available so concurrent requests share work
-                let fetchPromise = metadataCache.get(filePath)
+                const fetchOptions = { includeImage: true }
+                let fetchPromise = getCachedMetadataPromise(filePath, fetchOptions)
                 if (!fetchPromise) {
                     fetchPromise = (async () => {
                         try {
-                            return await audioService.resolveTrackMetadata(filePath)
+                            return await audioService.resolveTrackMetadata(filePath, fetchOptions)
                         } catch {
                             return null
                         }
                     })()
-                    metadataCache.set(filePath, fetchPromise)
+                    setCachedMetadataPromise(filePath, fetchOptions, fetchPromise)
                 }
 
                 const resolvedMetadata = await fetchPromise
diff --git a/ui/components/recent-music/recent-music.css b/ui/components/recent-music/recent-music.css
index 22e9de9..fcc1f71 100644
--- a/ui/components/recent-music/recent-music.css
+++ b/ui/components/recent-music/recent-music.css
@@ -371,6 +371,9 @@
     border-radius: 8px;
     padding: 9px 10px;
     font: inherit;
+    cursor:
+        url('../../assets/cursor-text.png') 7 7,
+        text !important;
 }
 
 .recentModalActions {
diff --git a/ui/components/recent-music/recent-music.js b/ui/components/recent-music/recent-music.js
index 661a243..5ecdf70 100644
--- a/ui/components/recent-music/recent-music.js
+++ b/ui/components/recent-music/recent-music.js
@@ -10,6 +10,10 @@ import {
 import { sessionService } from '../../services/session-service.js'
 import { audioService } from '../../services/audio-service.js'
 import { isRouteActive } from '../../utils/route.js'
+import {
+    hydrateImageWithPlaylistArtwork,
+    hydrateImageWithTrackArtwork,
+} from '../../utils/artwork.js'
 import * as RecentRenderer from './recent-renderer.js'
 import * as RecentModals from './recent-modals.js'
 import * as RecentMetadata from './recent-metadata.js'
@@ -384,6 +388,47 @@ export function initializeRecentMusic() {
         })
     }
 
+    function hydrateRecentArtwork(scope) {
+        scope.querySelectorAll('.recentTrack').forEach((trackElement) => {
+            const index = getDataAttributeIndex(trackElement, 'data-track-index')
+            const imageElement = trackElement.querySelector('.trackCover img')
+            const track = index === null ? null : recentTracks[index]
+            if (!track || !imageElement) {
+                return
+            }
+
+            hydrateImageWithTrackArtwork({
+                imageElement,
+                track,
+                audioService,
+            })
+                .then((artwork) => {
+                    if (artwork && recentTracks[index]) {
+                        recentTracks[index] = {
+                            ...recentTracks[index],
+                            image: artwork,
+                        }
+                    }
+                })
+                .catch(() => {})
+        })
+
+        scope.querySelectorAll('.recentPlaylistCard').forEach((playlistElement) => {
+            const index = getDataAttributeIndex(playlistElement, 'data-playlist-index')
+            const imageElement = playlistElement.querySelector('.recentPlaylistCover')
+            const playlist = index === null ? null : recentFolderPlaylists[index]
+            if (!playlist || !imageElement) {
+                return
+            }
+
+            hydrateImageWithPlaylistArtwork({
+                imageElement,
+                playlist,
+                audioService,
+            }).catch(() => {})
+        })
+    }
+
     function renderRecentContent() {
         const contentContainer = recentMusic.querySelector('.recentTabContent')
         if (!contentContainer) {
@@ -410,6 +455,8 @@ export function initializeRecentMusic() {
             selector: '.recentPlaylistCover',
         })
 
+        hydrateRecentArtwork(contentContainer)
+
         window.lucide?.createIcons()
 
         cleanupTrackMenuToggles = attachIndexedMenuToggle({
diff --git a/ui/components/skeleton-screen/skeleton.css b/ui/components/skeleton-screen/skeleton.css
new file mode 100644
index 0000000..9915dda
--- /dev/null
+++ b/ui/components/skeleton-screen/skeleton.css
@@ -0,0 +1,407 @@
+/* Skeleton screen styles */
+:root {
+    --skeleton-bg: #e6eef8;
+    --skeleton-highlight: #f5f7fb;
+    --skeleton-overlay-bg: rgba(255, 255, 255, 0.85);
+}
+
+#loadingOverlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: 100%;
+
+    background: var(--skeleton-overlay-bg);
+
+    /* display: flex; */
+    justify-content: center;
+    align-items: flex-start;
+    padding: 40px 16px;
+    box-sizing: border-box;
+
+    z-index: 9999;
+
+    transition: opacity 0.3s ease;
+    display: none;
+}
+
+.skeleton-container {
+    width: 100%;
+    max-width: 1100px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.skeleton-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px;
+    border-radius: 6px;
+}
+
+.skeleton-row {
+    align-items: center;
+}
+
+.skeleton-thumb {
+    width: 56px;
+    height: 56px;
+    border-radius: 6px;
+    background: var(--skeleton-bg);
+    flex: 0 0 auto;
+}
+
+.skeleton-lines {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.skeleton-line {
+    height: 12px;
+    border-radius: 4px;
+    background: var(--skeleton-bg);
+    width: 100%;
+    max-width: 80%;
+}
+
+.skeleton-line-short {
+    max-width: 45%;
+}
+.skeleton-line-long {
+    max-width: 100%;
+}
+
+.skeleton-duration {
+    width: 48px;
+    height: 12px;
+    background: var(--skeleton-bg);
+    border-radius: 4px;
+    flex: 0 0 auto;
+}
+
+.skeleton-box {
+    width: 100%;
+    height: 140px;
+    border-radius: 8px;
+    background: var(--skeleton-bg);
+}
+
+.skeleton-block {
+    background: linear-gradient(
+        90deg,
+        var(--skeleton-bg) 25%,
+        var(--skeleton-highlight) 50%,
+        var(--skeleton-bg) 75%
+    );
+    background-size: 200% 100%;
+    animation: skeleton-shimmer 1.2s linear infinite;
+}
+
+@keyframes skeleton-shimmer {
+    0% {
+        background-position: -200% 0;
+    }
+    100% {
+        background-position: 200% 0;
+    }
+}
+
+.fade-out {
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 300ms ease;
+}
+
+.visually-hidden {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    clip: rect(0, 0, 0, 0) !important;
+    white-space: nowrap !important;
+    border: 0 !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .skeleton-block {
+        animation: none;
+    }
+}
+
+#loadingOverlay.loading-overlay-playlist {
+    inset: var(--skeleton-overlay-top, 0) var(--skeleton-overlay-right, 0)
+        var(--skeleton-overlay-bottom, var(--bottom-player-height, 92px))
+        var(--skeleton-overlay-left, 0);
+    width: auto;
+    height: auto;
+    justify-content: flex-start;
+    padding: 8px;
+    overflow-y: auto;
+}
+
+#loadingOverlay.loading-overlay-playlist .skeleton-container.skeleton-table {
+    max-width: none;
+    padding: 16px;
+    box-sizing: border-box;
+}
+
+/* Playlist (table-like) skeleton */
+.skeleton-table {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+}
+
+.skeleton-track-table {
+    width: 100%;
+    border-collapse: collapse;
+    table-layout: fixed;
+}
+
+.skeleton-track-table thead {
+    background: #f8fafc;
+}
+
+.skeleton-track-table th {
+    padding: 10px;
+    border-bottom: 1px solid #edf1f5;
+    text-align: center;
+    font-size: 13px;
+    box-sizing: border-box;
+}
+
+.skeleton-track-table td {
+    height: 60px;
+    padding: 0 5px;
+    border-bottom: 1px solid #edf1f5;
+    text-align: center;
+    font-size: 13px;
+    box-sizing: border-box;
+    overflow: hidden;
+    vertical-align: middle;
+}
+
+.skeleton-track-table th:first-child,
+.skeleton-track-table td.skeleton-col-index {
+    width: 56px;
+}
+
+.skeleton-track-table th:last-child,
+.skeleton-track-table td.skeleton-col-actions {
+    width: 48px;
+}
+
+.skeleton-track-table td.skeleton-col-actions {
+    overflow: visible;
+    position: relative;
+}
+
+.skeleton-track-table th:nth-child(2),
+.skeleton-track-table td.skeleton-col-title {
+    text-align: left;
+}
+
+.skeleton-table-row {
+    height: 60px;
+}
+
+.skeleton-heading-line,
+.skeleton-heading-subline {
+    height: 13px;
+    border-radius: 4px;
+    margin: 0 auto;
+}
+
+.skeleton-heading-subline {
+    height: 12px;
+    margin-top: 2px;
+}
+
+.skeleton-track-table th:nth-child(2) .skeleton-heading-line {
+    margin-left: 0;
+}
+
+.skeleton-index-button {
+    width: 30px;
+    height: 30px;
+    border-radius: 8px;
+    margin: 0 auto;
+}
+
+.skeleton-track-title-wrap {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-width: 0;
+}
+
+.skeleton-track-cover {
+    width: 38px;
+    height: 38px;
+    border-radius: 8px;
+    background: var(--skeleton-bg);
+    flex-shrink: 0;
+}
+
+.skeleton-track-title-line {
+    width: 60%;
+    max-width: 240px;
+    height: 13px;
+    border-radius: 4px;
+}
+
+.skeleton-col-artist .skeleton-line,
+.skeleton-col-album .skeleton-line,
+.skeleton-col-date .skeleton-line {
+    width: 70%;
+    max-width: 140px;
+    height: 13px;
+    margin: 0 auto;
+}
+
+.skeleton-col-duration .skeleton-line {
+    width: 48px;
+    height: 13px;
+    margin: 0 auto;
+}
+
+.skeleton-actions-button {
+    width: 34px;
+    height: 34px;
+    border-radius: 8px;
+    margin: 0 auto;
+}
+
+/* Header skeleton to mirror playlist header */
+.skeleton-header-card {
+    width: 100%;
+    border: 1px solid #d8dee8;
+    border-radius: 12px;
+    overflow: hidden;
+    background: #ffffff;
+    box-sizing: border-box;
+}
+
+.skeleton-header-body {
+    display: grid;
+    grid-template-columns: 140px 1fr;
+    gap: 14px;
+    padding: 14px;
+    box-sizing: border-box;
+}
+
+.skeleton-header-image {
+    width: 140px;
+    height: 140px;
+    border-radius: 10px;
+    background: var(--skeleton-bg);
+}
+
+.skeleton-meta {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    justify-content: center;
+}
+
+.skeleton-meta .skeleton-line:nth-child(1) {
+    width: 90px;
+    height: 12px;
+}
+.skeleton-meta .skeleton-line:nth-child(2) {
+    width: 60%;
+    height: 20px;
+}
+.skeleton-meta .skeleton-line:nth-child(3) {
+    width: 45%;
+    height: 12px;
+}
+
+.skeleton-controls {
+    margin-top: 12px;
+    display: flex;
+    gap: 8px;
+    align-items: center;
+}
+
+.skeleton-control-play {
+    width: 40px;
+    height: 40px;
+    border-radius: 6px;
+}
+.skeleton-control-small {
+    width: 34px;
+    height: 34px;
+    border-radius: 6px;
+}
+
+.skeleton-track-section {
+    margin-top: 14px;
+    border: 1px solid #d8dee8;
+    border-radius: 10px;
+    background: #fff;
+    overflow: visible;
+    padding: 0;
+}
+
+@media (max-width: 780px) {
+    .skeleton-header-body {
+        grid-template-columns: 1fr;
+    }
+    .skeleton-header-image {
+        width: 100%;
+        max-width: 180px;
+        height: 180px;
+    }
+}
+
+/* Grid and player variants */
+.skeleton-container.skeleton-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+    gap: 12px;
+    align-items: start;
+}
+
+.skeleton-item.skeleton-tile {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 8px;
+    border-radius: 6px;
+}
+
+.skeleton-item.skeleton-tile .skeleton-box {
+    height: 120px;
+}
+
+.skeleton-container.skeleton-player {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 16px;
+}
+
+.skeleton-item.skeleton-player-row {
+    display: flex;
+    gap: 20px;
+    align-items: center;
+    justify-content: center;
+}
+
+.skeleton-player-art {
+    width: 220px;
+    height: 220px;
+    border-radius: 8px;
+    background: var(--skeleton-bg);
+}
diff --git a/ui/components/skeleton-screen/skeleton.js b/ui/components/skeleton-screen/skeleton.js
new file mode 100644
index 0000000..2134d1f
--- /dev/null
+++ b/ui/components/skeleton-screen/skeleton.js
@@ -0,0 +1,433 @@
+function getOverlay() {
+    return document.getElementById('loadingOverlay')
+}
+
+function getElementRect(element) {
+    if (!element || typeof element.getBoundingClientRect !== 'function') {
+        return null
+    }
+
+    const rect = element.getBoundingClientRect()
+    if (rect.width <= 0 || rect.height <= 0) {
+        return null
+    }
+
+    return rect
+}
+
+function clearPlaylistOverlayBounds(overlay) {
+    overlay.style.removeProperty('--skeleton-overlay-top')
+    overlay.style.removeProperty('--skeleton-overlay-right')
+    overlay.style.removeProperty('--skeleton-overlay-bottom')
+    overlay.style.removeProperty('--skeleton-overlay-left')
+}
+
+function applyPlaylistOverlayBounds(overlay) {
+    const appScroll = window.appScrollElement || document.getElementById('app-scroll')
+    const routeHost = document.getElementById('recent-music')
+    const sidebar =
+        document.querySelector('#sidebar .sideBar') || document.getElementById('sidebar')
+
+    const scrollRect = getElementRect(appScroll)
+    const routeRect = getElementRect(routeHost)
+    const sidebarRect = getElementRect(sidebar)
+    const viewportWidth = window.innerWidth || document.documentElement.clientWidth || 0
+    const viewportHeight = window.innerHeight || document.documentElement.clientHeight || 0
+
+    let top = routeRect?.top ?? scrollRect?.top ?? 0
+    let left = routeRect?.left ?? scrollRect?.left ?? 0
+    let rightEdge = routeRect?.right ?? scrollRect?.right ?? viewportWidth
+    const bottomEdge = scrollRect?.bottom ?? viewportHeight
+
+    if (sidebarRect) {
+        const sidebarLooksHorizontal = sidebarRect.width >= viewportWidth * 0.4
+        const sidebarLooksVertical = sidebarRect.height >= viewportHeight * 0.4
+
+        if (sidebarLooksHorizontal && sidebarRect.top <= top && sidebarRect.bottom > top) {
+            top = Math.max(top, sidebarRect.bottom)
+        }
+
+        if (sidebarLooksVertical && sidebarRect.left <= left && sidebarRect.right > left) {
+            left = Math.max(left, sidebarRect.right)
+        }
+    }
+
+    rightEdge = Math.max(rightEdge, left)
+
+    overlay.style.setProperty('--skeleton-overlay-top', `${Math.max(0, Math.round(top))}px`)
+    overlay.style.setProperty(
+        '--skeleton-overlay-right',
+        `${Math.max(0, Math.round(viewportWidth - rightEdge))}px`,
+    )
+    overlay.style.setProperty(
+        '--skeleton-overlay-bottom',
+        `${Math.max(0, Math.round(viewportHeight - bottomEdge))}px`,
+    )
+    overlay.style.setProperty('--skeleton-overlay-left', `${Math.max(0, Math.round(left))}px`)
+}
+
+function ensureOverlayElements() {
+    let overlay = getOverlay()
+
+    if (!overlay) {
+        overlay = document.createElement('div')
+        overlay.id = 'loadingOverlay'
+        overlay.style.display = 'none'
+        document.body.appendChild(overlay)
+    }
+
+    let container = overlay.querySelector('.skeleton-container')
+    if (!container) {
+        container = document.createElement('div')
+        container.className = 'skeleton-container'
+        overlay.appendChild(container)
+    }
+
+    let status = overlay.querySelector('.loadingStatus')
+    if (!status) {
+        status = document.createElement('div')
+        status.className = 'loadingStatus visually-hidden'
+        status.setAttribute('aria-live', 'polite')
+        overlay.appendChild(status)
+    }
+
+    return {
+        overlay,
+        container,
+        status,
+    }
+}
+
+function renderSkeletonItems(container, count = 6, variant = 'row') {
+    container.innerHTML = ''
+    container.classList.remove(
+        'skeleton-grid',
+        'skeleton-player',
+        'skeleton-rows',
+        'skeleton-table',
+    )
+
+    if (variant === 'grid') {
+        container.classList.add('skeleton-grid')
+        for (let i = 0; i < count; i++) {
+            const tile = document.createElement('div')
+            tile.className = 'skeleton-item skeleton-tile'
+
+            const box = document.createElement('div')
+            box.className = 'skeleton-box skeleton-block'
+
+            const line = document.createElement('div')
+            line.className = 'skeleton-line skeleton-line-long skeleton-block'
+
+            tile.appendChild(box)
+            tile.appendChild(line)
+            container.appendChild(tile)
+        }
+
+        return
+    }
+
+    if (variant === 'playlist') {
+        container.classList.add('skeleton-table')
+
+        // Header card mirrors .playlistHeader and .playlistHeaderBody.
+        const headerCard = document.createElement('div')
+        headerCard.className = 'skeleton-header-card'
+
+        const headerBody = document.createElement('div')
+        headerBody.className = 'skeleton-header-body'
+
+        const image = document.createElement('div')
+        image.className = 'skeleton-header-image skeleton-block'
+
+        const meta = document.createElement('div')
+        meta.className = 'skeleton-meta'
+        const metaLabel = document.createElement('div')
+        metaLabel.className = 'skeleton-line skeleton-block'
+        const metaTitle = document.createElement('div')
+        metaTitle.className = 'skeleton-line skeleton-block'
+        const metaSub = document.createElement('div')
+        metaSub.className = 'skeleton-line skeleton-block'
+
+        meta.appendChild(metaLabel)
+        meta.appendChild(metaTitle)
+        meta.appendChild(metaSub)
+
+        headerBody.appendChild(image)
+        headerBody.appendChild(meta)
+        headerCard.appendChild(headerBody)
+
+        container.appendChild(headerCard)
+
+        // controls
+        const controls = document.createElement('div')
+        controls.className = 'skeleton-controls'
+        const play = document.createElement('div')
+        play.className = 'skeleton-control-play skeleton-block'
+        const shuffle = document.createElement('div')
+        shuffle.className = 'skeleton-control-small skeleton-block'
+        const advance = document.createElement('div')
+        advance.className = 'skeleton-control-small skeleton-block'
+        controls.appendChild(play)
+        controls.appendChild(shuffle)
+        controls.appendChild(advance)
+        container.appendChild(controls)
+
+        // Track section mirrors .playlistTrackSection > .playlistTrackTable.
+        const trackSection = document.createElement('div')
+        trackSection.className = 'skeleton-track-section'
+
+        const table = document.createElement('table')
+        table.className = 'skeleton-track-table'
+
+        const thead = document.createElement('thead')
+        const headerRow = document.createElement('tr')
+        const headerCells = [
+            { className: 'skeleton-col-index', width: '24px' },
+            { className: 'skeleton-col-title', width: '48px' },
+            { className: 'skeleton-col-artist', width: '48px' },
+            { className: 'skeleton-col-album', width: '48px' },
+            { className: 'skeleton-col-date', width: '78px', subWidth: '64px' },
+            { className: 'skeleton-col-duration', width: '58px' },
+            { className: 'skeleton-col-actions', width: '1px' },
+        ]
+
+        headerCells.forEach((cell) => {
+            const th = document.createElement('th')
+            th.className = cell.className
+
+            if (cell.width !== '1px') {
+                const line = document.createElement('div')
+                line.className = 'skeleton-heading-line skeleton-block'
+                line.style.width = cell.width
+                th.appendChild(line)
+            }
+
+            if (cell.subWidth) {
+                const subline = document.createElement('div')
+                subline.className = 'skeleton-heading-subline skeleton-block'
+                subline.style.width = cell.subWidth
+                th.appendChild(subline)
+            }
+
+            headerRow.appendChild(th)
+        })
+
+        thead.appendChild(headerRow)
+        table.appendChild(thead)
+
+        const tbody = document.createElement('tbody')
+
+        for (let i = 0; i < Math.max(1, count); i++) {
+            const row = document.createElement('tr')
+            row.className = 'skeleton-table-row'
+
+            // index
+            const colIndex = document.createElement('td')
+            colIndex.className = 'skeleton-cell skeleton-col-index'
+            const idxLine = document.createElement('div')
+            idxLine.className = 'skeleton-index-button skeleton-block'
+            colIndex.appendChild(idxLine)
+
+            // title (cover + lines)
+            const colTitle = document.createElement('td')
+            colTitle.className = 'skeleton-cell skeleton-col-title'
+            const titleWrap = document.createElement('div')
+            titleWrap.className = 'skeleton-track-title-wrap'
+            const cover = document.createElement('div')
+            cover.className = 'skeleton-track-cover skeleton-block'
+            const titleLine = document.createElement('div')
+            titleLine.className = 'skeleton-track-title-line skeleton-block'
+            titleWrap.appendChild(cover)
+            titleWrap.appendChild(titleLine)
+            colTitle.appendChild(titleWrap)
+
+            // artist
+            const colArtist = document.createElement('td')
+            colArtist.className = 'skeleton-cell skeleton-col-artist'
+            const artistLine = document.createElement('div')
+            artistLine.className = 'skeleton-line skeleton-block'
+            colArtist.appendChild(artistLine)
+
+            // album
+            const colAlbum = document.createElement('td')
+            colAlbum.className = 'skeleton-cell skeleton-col-album'
+            const albumLine = document.createElement('div')
+            albumLine.className = 'skeleton-line skeleton-block'
+            colAlbum.appendChild(albumLine)
+
+            // date
+            const colDate = document.createElement('td')
+            colDate.className = 'skeleton-cell skeleton-col-date'
+            const dateLine = document.createElement('div')
+            dateLine.className = 'skeleton-line skeleton-block'
+            colDate.appendChild(dateLine)
+
+            // duration
+            const colDuration = document.createElement('td')
+            colDuration.className = 'skeleton-cell skeleton-col-duration'
+            const durLine = document.createElement('div')
+            durLine.className = 'skeleton-line skeleton-block'
+            colDuration.appendChild(durLine)
+
+            // actions
+            const colActions = document.createElement('td')
+            colActions.className = 'skeleton-cell skeleton-col-actions'
+            const actLine = document.createElement('div')
+            actLine.className = 'skeleton-actions-button skeleton-block'
+            colActions.appendChild(actLine)
+
+            row.appendChild(colIndex)
+            row.appendChild(colTitle)
+            row.appendChild(colArtist)
+            row.appendChild(colAlbum)
+            row.appendChild(colDate)
+            row.appendChild(colDuration)
+            row.appendChild(colActions)
+
+            tbody.appendChild(row)
+        }
+
+        table.appendChild(tbody)
+        trackSection.appendChild(table)
+        container.appendChild(trackSection)
+
+        return
+    }
+
+    if (variant === 'player') {
+        container.classList.add('skeleton-player')
+        for (let i = 0; i < Math.max(1, count); i++) {
+            const item = document.createElement('div')
+            item.className = 'skeleton-item skeleton-player-row'
+
+            const art = document.createElement('div')
+            art.className = 'skeleton-player-art skeleton-block'
+
+            const lines = document.createElement('div')
+            lines.className = 'skeleton-lines'
+
+            const title = document.createElement('div')
+            title.className = 'skeleton-line skeleton-line-long skeleton-block'
+            title.style.height = '18px'
+
+            const subtitle = document.createElement('div')
+            subtitle.className = 'skeleton-line skeleton-line-short skeleton-block'
+            subtitle.style.height = '14px'
+
+            lines.appendChild(title)
+            lines.appendChild(subtitle)
+
+            item.appendChild(art)
+            item.appendChild(lines)
+            container.appendChild(item)
+        }
+
+        return
+    }
+
+    // default: row
+    container.classList.add('skeleton-rows')
+    for (let i = 0; i < count; i++) {
+        const item = document.createElement('div')
+        item.className = 'skeleton-item skeleton-row'
+
+        const thumb = document.createElement('div')
+        thumb.className = 'skeleton-thumb skeleton-block'
+
+        const lines = document.createElement('div')
+        lines.className = 'skeleton-lines'
+
+        const line1 = document.createElement('div')
+        line1.className = 'skeleton-line skeleton-line-long skeleton-block'
+
+        const line2 = document.createElement('div')
+        line2.className = 'skeleton-line skeleton-line-short skeleton-block'
+
+        lines.appendChild(line1)
+        lines.appendChild(line2)
+
+        const dur = document.createElement('div')
+        dur.className = 'skeleton-duration skeleton-block'
+
+        item.appendChild(thumb)
+        item.appendChild(lines)
+        item.appendChild(dur)
+
+        container.appendChild(item)
+    }
+}
+
+export function initializeLoadingScreen() {
+    ensureOverlayElements()
+
+    let hideTimeout = null
+
+    window.loader = {
+        setMessage(text) {
+            const ensured = ensureOverlayElements()
+            if (ensured && ensured.status) {
+                ensured.status.textContent = text
+            }
+        },
+
+        show(opts = {}) {
+            let text = 'Loading...'
+            let count = 6
+            let variant = 'row'
+
+            if (typeof opts === 'string') {
+                text = opts
+            } else if (opts && typeof opts === 'object') {
+                if (opts.text) text = opts.text
+                if (Number.isFinite(opts.count)) count = opts.count
+                if (opts.variant && typeof opts.variant === 'string') variant = opts.variant
+            }
+
+            if (hideTimeout) {
+                clearTimeout(hideTimeout)
+                hideTimeout = null
+            }
+
+            const ensured = ensureOverlayElements()
+            const overlay = ensured?.overlay
+            const container = ensured?.container
+            const status = ensured?.status
+
+            if (!overlay || !container) return
+
+            if (status && text) status.textContent = text
+
+            const isPlaylistVariant = variant === 'playlist'
+            overlay.classList.toggle('loading-overlay-playlist', isPlaylistVariant)
+            if (isPlaylistVariant) {
+                applyPlaylistOverlayBounds(overlay)
+            } else {
+                clearPlaylistOverlayBounds(overlay)
+            }
+            renderSkeletonItems(container, count, variant)
+
+            overlay.style.display = 'flex'
+            overlay.classList.remove('fade-out')
+        },
+
+        hide(minDuration = 1000) {
+            const overlay = getOverlay()
+
+            if (!overlay) return
+
+            overlay.classList.add('fade-out')
+
+            hideTimeout = setTimeout(() => {
+                overlay.style.display = 'none'
+                overlay.classList.remove('loading-overlay-playlist')
+                clearPlaylistOverlayBounds(overlay)
+                const container = overlay.querySelector('.skeleton-container')
+                if (container) container.innerHTML = ''
+                hideTimeout = null
+            }, minDuration)
+        },
+    }
+}
+
+window.initializeLoadingScreen = initializeLoadingScreen
diff --git a/ui/index.html b/ui/index.html
index 107cabf..c451539 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -11,7 +11,7 @@
         <link rel="stylesheet" href="./pages/library/library.css" />
         <link rel="stylesheet" href="./pages/playlist/playlist.css" />
         <link rel="stylesheet" href="./pages/queue/queue.css" />
-        <link rel="stylesheet" href="./components/loading/loading.css" />
+        <link rel="stylesheet" href="./components/skeleton-screen/skeleton.css" />
         <script src="../node_modules/lucide/dist/umd/lucide.min.js"></script>
         <script src="../node_modules/howler/dist/howler.min.js"></script>
         <!-- <meta
diff --git a/ui/pages/about/about-layout.html b/ui/pages/about/about-layout.html
index f522f51..3ec861c 100644
--- a/ui/pages/about/about-layout.html
+++ b/ui/pages/about/about-layout.html
@@ -13,4 +13,5 @@
     </p>
 
     <p>fully support offline play without internet connection</p>
+    <p>The session storage is used to store the filepath and cache</p>
 </div>
diff --git a/ui/pages/library/library.js b/ui/pages/library/library.js
index 05a4191..a2de51b 100644
--- a/ui/pages/library/library.js
+++ b/ui/pages/library/library.js
@@ -8,6 +8,7 @@ import { resolvePlaylistImage, extractPlaylistFilePaths } from '../../utils/play
 import { sessionService } from '../../services/session-service.js'
 import { audioService } from '../../services/audio-service.js'
 import { isRouteActive } from '../../utils/route.js'
+import { hydrateImageWithPlaylistArtwork } from '../../utils/artwork.js'
 
 export function initializeLibraryPage() {
     const container = document.getElementById('libraryPlaylists')
@@ -184,6 +185,21 @@ export function initializeLibraryPage() {
             selector: '.libraryPlaylistCard img',
         })
 
+        container.querySelectorAll('.libraryPlaylistCard').forEach((card) => {
+            const playlistId = card.getAttribute('data-playlist-id')
+            const playlist = playlists.find((item) => item.id === playlistId)
+            const imageElement = card.querySelector('img')
+            if (!playlist || !imageElement) {
+                return
+            }
+
+            hydrateImageWithPlaylistArtwork({
+                imageElement,
+                playlist,
+                audioService,
+            }).catch(() => {})
+        })
+
         window.lucide?.createIcons()
 
         const cards = container.querySelectorAll('.libraryPlaylistCard')
diff --git a/ui/pages/playlist/playlist-actions.js b/ui/pages/playlist/playlist-actions.js
new file mode 100644
index 0000000..d85b59b
--- /dev/null
+++ b/ui/pages/playlist/playlist-actions.js
@@ -0,0 +1,228 @@
+import { getDataAttributeIndex } from '../../utils/dom-helpers.js'
+import { pushUndo } from '../../services/undo-service.js'
+import { createPlaylistSortable } from './playlist-sortable.js'
+
+const REORDER_RENDER_OPTIONS = {
+    skipPlaylistArtworkHydration: true,
+    skipTotalDuration: true,
+}
+
+export function createPlaylistActionsController({
+    body,
+    getActivePlaylist,
+    getPlaylists,
+    onSave,
+    onRender,
+    audioService,
+} = {}) {
+    let cleanupTrackActions = null
+    let sortableInstance = null
+    let trackActionsDelegated = false
+    let isSavingPlaylistOrder = false
+
+    function closeAllTrackMenus() {
+        body.querySelectorAll('.playlistTrackMenu.is-open').forEach((menu) => {
+            menu.classList.remove('is-open')
+            menu.closest('.playlistTrackActions')?.classList.remove('is-menu-open')
+            menu.closest('.playlistTrackActionsCell')?.classList.remove('is-menu-open')
+            menu.closest('.playlistTrackRow')?.classList.remove('is-menu-open')
+        })
+    }
+
+    function attachTrackActionHandlers() {
+        if (trackActionsDelegated) return
+
+        const onBodyClick = async (event) => {
+            const menuButton = event.target.closest('.playlistTrackMoreBtn')
+            if (menuButton && body.contains(menuButton)) {
+                event.stopPropagation()
+                event.preventDefault()
+
+                const trackIndex = getDataAttributeIndex(menuButton, 'data-track-index')
+                if (trackIndex === null) {
+                    return
+                }
+
+                const menu = body.querySelector(
+                    `.playlistTrackMenu[data-track-index="${trackIndex}"]`,
+                )
+                if (!menu) {
+                    return
+                }
+
+                const isOpen = menu.classList.contains('is-open')
+                closeAllTrackMenus()
+                if (!isOpen) {
+                    menu.classList.add('is-open')
+                    menu.closest('.playlistTrackActions')?.classList.add('is-menu-open')
+                    menu.closest('.playlistTrackActionsCell')?.classList.add('is-menu-open')
+                    menu.closest('.playlistTrackRow')?.classList.add('is-menu-open')
+                }
+                return
+            }
+
+            const removeButton = event.target.closest('.removeTrackBtn')
+            if (removeButton && body.contains(removeButton)) {
+                event.stopPropagation()
+                event.preventDefault()
+
+                const trackIndex = getDataAttributeIndex(removeButton, 'data-track-index')
+                const activePlaylist = getActivePlaylist?.()
+                if (!activePlaylist || trackIndex === null) {
+                    return
+                }
+
+                const nextTracks = Array.isArray(activePlaylist.tracks)
+                    ? activePlaylist.tracks.filter((_, index) => index !== trackIndex)
+                    : []
+
+                const updatedPlaylists = (getPlaylists?.() || []).map((playlist) => {
+                    if (playlist.id !== activePlaylist.id) {
+                        return playlist
+                    }
+
+                    return {
+                        ...playlist,
+                        tracks: nextTracks,
+                        updatedAt: new Date().toISOString(),
+                    }
+                })
+
+                await onSave?.(updatedPlaylists, {
+                    activeId: activePlaylist.id,
+                    errorMessage: 'Failed to save updated playlists when removing track',
+                })
+                return
+            }
+
+            const playButton = event.target.closest('.playlistTrackIndexPlayBtn')
+            if (playButton && body.contains(playButton)) {
+                event.stopPropagation()
+                event.preventDefault()
+
+                const trackIndex = getDataAttributeIndex(playButton, 'data-track-index')
+                const activePlaylist = getActivePlaylist?.()
+                if (!activePlaylist || trackIndex === null) {
+                    return
+                }
+
+                const queueFilePaths = Array.isArray(activePlaylist.tracks)
+                    ? activePlaylist.tracks
+                          .slice(trackIndex)
+                          .map((track) => track?.filePath)
+                          .filter(Boolean)
+                    : []
+
+                if (queueFilePaths.length) {
+                    audioService.startPlaylist(queueFilePaths)
+                }
+            }
+        }
+
+        const onDocumentClick = () => {
+            closeAllTrackMenus()
+        }
+
+        body.addEventListener('click', onBodyClick)
+        document.addEventListener('click', onDocumentClick)
+        cleanupTrackActions = () => {
+            body.removeEventListener('click', onBodyClick)
+            document.removeEventListener('click', onDocumentClick)
+            trackActionsDelegated = false
+        }
+        trackActionsDelegated = true
+    }
+
+    function initializeSortableIfNeeded() {
+        if (!body) return
+
+        if (sortableInstance) return
+
+        if (typeof createPlaylistSortable !== 'function') return
+
+        try {
+            sortableInstance = createPlaylistSortable({
+                body,
+                getActivePlaylist,
+                getPlaylists,
+                onReorder: async (updatedPlaylists) => {
+                    const previousPlaylists = (getPlaylists?.() || []).map((p) => ({
+                        ...p,
+                        tracks: Array.isArray(p.tracks) ? p.tracks.slice() : p.tracks,
+                    }))
+                    const activePlaylist = getActivePlaylist?.()
+
+                    isSavingPlaylistOrder = true
+                    try {
+                        const saved = await onSave?.(updatedPlaylists, {
+                            activeId: activePlaylist?.id,
+                            errorMessage: 'Failed to save reordered playlist',
+                            renderOptions: REORDER_RENDER_OPTIONS,
+                        })
+                        if (!saved) {
+                            onRender?.(REORDER_RENDER_OPTIONS)
+                            return
+                        }
+
+                        pushUndo(
+                            async () => {
+                                isSavingPlaylistOrder = true
+                                try {
+                                    const undone = await onSave?.(previousPlaylists, {
+                                        activeId: activePlaylist?.id,
+                                        errorMessage: 'Failed to undo playlist reorder',
+                                        renderOptions: REORDER_RENDER_OPTIONS,
+                                    })
+                                    if (!undone) {
+                                        return
+                                    }
+                                } catch (err) {
+                                    console.error('Error while undoing playlist reorder', err)
+                                } finally {
+                                    isSavingPlaylistOrder = false
+                                }
+                            },
+                            { label: 'Undo playlist reorder' },
+                        )
+                    } catch (e) {
+                        console.error('Failed to save reordered playlist', e)
+                        onRender?.(REORDER_RENDER_OPTIONS)
+                        return
+                    } finally {
+                        isSavingPlaylistOrder = false
+                    }
+                },
+            })
+        } catch (err) {
+            console.error('Failed to initialize Sortable', err)
+        }
+    }
+
+    function attach() {
+        attachTrackActionHandlers()
+        initializeSortableIfNeeded()
+    }
+
+    function detach() {
+        if (typeof cleanupTrackActions === 'function') {
+            cleanupTrackActions()
+            cleanupTrackActions = null
+        }
+
+        if (sortableInstance && typeof sortableInstance.destroy === 'function') {
+            try {
+                sortableInstance.destroy()
+            } catch (e) {
+                console.error('Failed to destroy Sortable instance during cleanup', e)
+            }
+            sortableInstance = null
+        }
+    }
+
+    return {
+        attach,
+        detach,
+        closeAllTrackMenus,
+        isSavingPlaylistOrder: () => isSavingPlaylistOrder,
+    }
+}
diff --git a/ui/pages/playlist/playlist-artwork-cache.js b/ui/pages/playlist/playlist-artwork-cache.js
new file mode 100644
index 0000000..d2b6d97
--- /dev/null
+++ b/ui/pages/playlist/playlist-artwork-cache.js
@@ -0,0 +1,199 @@
+import { sessionService } from '../../services/session-service.js'
+import { normalizePlaylistImageValue, resolveTrackImage } from '../../utils/playlist-media.js'
+import { normalizeTrackRecord } from '../../utils/track-record.js'
+import { getPlaylistTrackFilePath } from './playlist-duration-cache.js'
+
+const PLAYLIST_ARTWORK_CACHE_LIMIT = 1000
+const PLAYLIST_ARTWORK_SAVE_DEBOUNCE_MS = 1000
+
+const playlistArtworkCache = new Map()
+const playlistArtworkResolvePromises = new Map()
+
+let playlistArtworkPersistTimer = null
+let playlistArtworkPersistQueued = false
+let playlistArtworkPersistInFlight = false
+let playlistArtworkPersisting = false
+
+export function normalizeArtworkValue(value) {
+    return normalizePlaylistImageValue(value)
+}
+
+export function rememberTrackArtwork(filePath, artwork) {
+    const normalizedFilePath = typeof filePath === 'string' ? filePath.trim() : ''
+    const image = normalizeArtworkValue(artwork)
+    if (!normalizedFilePath || !image) {
+        return ''
+    }
+
+    playlistArtworkCache.delete(normalizedFilePath)
+    playlistArtworkCache.set(normalizedFilePath, image)
+
+    while (playlistArtworkCache.size > PLAYLIST_ARTWORK_CACHE_LIMIT) {
+        const oldestKey = playlistArtworkCache.keys().next().value
+        playlistArtworkCache.delete(oldestKey)
+    }
+
+    return image
+}
+
+export function getCachedTrackArtwork(track) {
+    const existingImage = normalizeArtworkValue(resolveTrackImage(track))
+    if (existingImage) {
+        return existingImage
+    }
+
+    const filePath = getPlaylistTrackFilePath(track)
+    if (!filePath || !playlistArtworkCache.has(filePath)) {
+        return ''
+    }
+
+    const image = playlistArtworkCache.get(filePath)
+    playlistArtworkCache.delete(filePath)
+    playlistArtworkCache.set(filePath, image)
+
+    return image
+}
+
+export function primePlaylistArtworkCache(playlists) {
+    if (!Array.isArray(playlists)) {
+        return
+    }
+
+    playlists.forEach((playlist) => {
+        if (!Array.isArray(playlist?.tracks)) {
+            return
+        }
+
+        playlist.tracks.forEach((track) => {
+            const filePath = getPlaylistTrackFilePath(track)
+            const artwork = normalizeArtworkValue(resolveTrackImage(track))
+            if (filePath && artwork) {
+                rememberTrackArtwork(filePath, artwork)
+            }
+        })
+    })
+}
+
+export function getTrackArtworkResolvePromise(filePath) {
+    return playlistArtworkResolvePromises.get(filePath) || null
+}
+
+export function setTrackArtworkResolvePromise(filePath, resolvePromise) {
+    playlistArtworkResolvePromises.set(filePath, resolvePromise)
+}
+
+export function clearTrackArtworkResolvePromise(filePath) {
+    playlistArtworkResolvePromises.delete(filePath)
+}
+
+export function isPlaylistArtworkPersisting() {
+    return playlistArtworkPersisting
+}
+
+export function schedulePlaylistArtworkPersist() {
+    playlistArtworkPersistQueued = true
+
+    if (playlistArtworkPersistTimer || playlistArtworkPersistInFlight) {
+        return
+    }
+
+    playlistArtworkPersistTimer = window.setTimeout(() => {
+        flushCachedPlaylistArtwork().catch((error) => {
+            console.error('Failed to flush playlist artwork:', error)
+        })
+    }, PLAYLIST_ARTWORK_SAVE_DEBOUNCE_MS)
+}
+
+function getCachedArtworkByFilePath(filePath) {
+    if (!filePath || !playlistArtworkCache.has(filePath)) {
+        return ''
+    }
+
+    const image = playlistArtworkCache.get(filePath)
+    playlistArtworkCache.delete(filePath)
+    playlistArtworkCache.set(filePath, image)
+
+    return image
+}
+
+function applyCachedArtworkToPlaylists(playlists) {
+    let changed = false
+    const updatedPlaylists = Array.isArray(playlists)
+        ? playlists.map((playlist) => {
+              if (!Array.isArray(playlist?.tracks)) {
+                  return playlist
+              }
+
+              let tracksChanged = false
+              const tracks = playlist.tracks.map((track) => {
+                  const filePath = getPlaylistTrackFilePath(track)
+                  const artwork = getCachedArtworkByFilePath(filePath)
+
+                  if (
+                      !filePath ||
+                      !artwork ||
+                      normalizeArtworkValue(resolveTrackImage(track)) === artwork
+                  ) {
+                      return track
+                  }
+
+                  const normalizedTrack = normalizeTrackRecord(track)
+                  if (!normalizedTrack) {
+                      return track
+                  }
+
+                  tracksChanged = true
+                  return {
+                      ...normalizedTrack,
+                      image: artwork,
+                  }
+              })
+
+              if (!tracksChanged) {
+                  return playlist
+              }
+
+              changed = true
+              return {
+                  ...playlist,
+                  tracks,
+              }
+          })
+        : []
+
+    return { playlists: updatedPlaylists, changed }
+}
+
+async function flushCachedPlaylistArtwork() {
+    if (playlistArtworkPersistTimer) {
+        window.clearTimeout(playlistArtworkPersistTimer)
+        playlistArtworkPersistTimer = null
+    }
+
+    if (playlistArtworkPersistInFlight || !playlistArtworkPersistQueued) {
+        return
+    }
+
+    playlistArtworkPersistQueued = false
+    playlistArtworkPersistInFlight = true
+    playlistArtworkPersisting = true
+
+    try {
+        const latestPlaylists = await sessionService.loadUserPlaylists()
+        const { playlists: updatedPlaylists, changed } =
+            applyCachedArtworkToPlaylists(latestPlaylists)
+
+        if (changed) {
+            await sessionService.saveUserPlaylists(updatedPlaylists)
+        }
+    } catch (error) {
+        console.error('Failed to persist playlist artwork:', error)
+    } finally {
+        playlistArtworkPersisting = false
+        playlistArtworkPersistInFlight = false
+
+        if (playlistArtworkPersistQueued) {
+            schedulePlaylistArtworkPersist()
+        }
+    }
+}
diff --git a/ui/pages/playlist/playlist-artwork.js b/ui/pages/playlist/playlist-artwork.js
new file mode 100644
index 0000000..856231b
--- /dev/null
+++ b/ui/pages/playlist/playlist-artwork.js
@@ -0,0 +1,195 @@
+import { getDataAttributeIndex, bindImageFallbacks } from '../../utils/dom-helpers.js'
+import { resolveTrackArtwork } from '../../utils/artwork.js'
+import { normalizeTrackRecord } from '../../utils/track-record.js'
+import { getPlaylistTrackFilePath } from './playlist-duration-cache.js'
+import {
+    clearTrackArtworkResolvePromise,
+    getCachedTrackArtwork,
+    getTrackArtworkResolvePromise,
+    normalizeArtworkValue,
+    rememberTrackArtwork,
+    schedulePlaylistArtworkPersist,
+    setTrackArtworkResolvePromise,
+} from './playlist-artwork-cache.js'
+
+export function createPlaylistArtworkController({ getActivePlaylist, audioService } = {}) {
+    const pendingArtworkRows = new Set()
+    let artworkHydrationHandle = null
+    let artworkHydrationUsesIdleCallback = false
+
+    function rememberActivePlaylistTrackArtwork(trackIndex, artwork) {
+        const activePlaylist = getActivePlaylist?.()
+        const image = normalizeArtworkValue(artwork)
+        if (!activePlaylist || !Array.isArray(activePlaylist.tracks) || !image) {
+            return
+        }
+
+        const track = activePlaylist.tracks[trackIndex]
+        const normalizedTrack = normalizeTrackRecord(track)
+        if (!normalizedTrack?.filePath) {
+            return
+        }
+
+        activePlaylist.tracks[trackIndex] = {
+            ...normalizedTrack,
+            image,
+        }
+    }
+
+    function hydrateTrackArtworkRows(rows) {
+        rows.forEach((row) => {
+            const trackIndex = getDataAttributeIndex(row, 'data-track-index')
+            const imageElement = row.querySelector('.playlistTrackCover')
+            const activePlaylist = getActivePlaylist?.()
+            const playlistId = activePlaylist?.id || null
+            const track = trackIndex === null ? null : activePlaylist?.tracks?.[trackIndex]
+            if (!track || !imageElement) {
+                return
+            }
+
+            const filePath = getPlaylistTrackFilePath(track)
+            const isCurrentTrack = () => {
+                const latestPlaylist = getActivePlaylist?.()
+                const latestTrack =
+                    trackIndex === null ? null : latestPlaylist?.tracks?.[trackIndex]
+
+                return (
+                    Boolean(playlistId) &&
+                    latestPlaylist?.id === playlistId &&
+                    getPlaylistTrackFilePath(latestTrack) === filePath
+                )
+            }
+            const cachedArtwork = getCachedTrackArtwork(track)
+            if (cachedArtwork) {
+                imageElement.src = cachedArtwork
+                if (isCurrentTrack()) {
+                    rememberActivePlaylistTrackArtwork(trackIndex, cachedArtwork)
+                }
+                return
+            }
+
+            if (!filePath) {
+                return
+            }
+
+            let artworkPromise = getTrackArtworkResolvePromise(filePath)
+            if (!artworkPromise) {
+                artworkPromise = resolveTrackArtwork(track, { audioService })
+                setTrackArtworkResolvePromise(filePath, artworkPromise)
+            }
+
+            artworkPromise
+                .then((artwork) => {
+                    clearTrackArtworkResolvePromise(filePath)
+                    const image = normalizeArtworkValue(artwork)
+                    if (!image) {
+                        return
+                    }
+
+                    if (!isCurrentTrack()) {
+                        return
+                    }
+
+                    const cachedImage = rememberTrackArtwork(filePath, image)
+                    if (!cachedImage) {
+                        return
+                    }
+
+                    if (imageElement.isConnected) {
+                        imageElement.src = cachedImage
+                    }
+                    rememberActivePlaylistTrackArtwork(trackIndex, cachedImage)
+                    schedulePlaylistArtworkPersist()
+                })
+                .catch(() => {
+                    clearTrackArtworkResolvePromise(filePath)
+                })
+        })
+    }
+
+    function buildTrackRecordForRender(track) {
+        const normalizedTrack = normalizeTrackRecord(track)
+        const cachedArtwork = getCachedTrackArtwork(normalizedTrack || track)
+
+        if (!normalizedTrack || !cachedArtwork || normalizedTrack.image === cachedArtwork) {
+            return normalizedTrack
+        }
+
+        return {
+            ...normalizedTrack,
+            image: cachedArtwork,
+        }
+    }
+
+    function cancelArtworkHydration() {
+        if (artworkHydrationHandle !== null) {
+            if (
+                artworkHydrationUsesIdleCallback &&
+                typeof window.cancelIdleCallback === 'function'
+            ) {
+                window.cancelIdleCallback(artworkHydrationHandle)
+            } else {
+                window.clearTimeout(artworkHydrationHandle)
+            }
+        }
+
+        artworkHydrationHandle = null
+        artworkHydrationUsesIdleCallback = false
+        pendingArtworkRows.clear()
+    }
+
+    function flushPendingArtworkHydration() {
+        artworkHydrationHandle = null
+        artworkHydrationUsesIdleCallback = false
+
+        const rows = Array.from(pendingArtworkRows).filter((row) => row.isConnected)
+        pendingArtworkRows.clear()
+        hydrateTrackArtworkRows(rows)
+    }
+
+    function scheduleArtworkHydration(rows) {
+        rows.forEach((row) => {
+            if (row?.isConnected) {
+                pendingArtworkRows.add(row)
+            }
+        })
+
+        if (!pendingArtworkRows.size || artworkHydrationHandle !== null) {
+            return
+        }
+
+        if (typeof window.requestIdleCallback === 'function') {
+            artworkHydrationUsesIdleCallback = true
+            artworkHydrationHandle = window.requestIdleCallback(flushPendingArtworkHydration, {
+                timeout: 600,
+            })
+            return
+        }
+
+        artworkHydrationHandle = window.setTimeout(flushPendingArtworkHydration, 80)
+    }
+
+    function applyRowDecorations(rows) {
+        if (!rows.length) {
+            return
+        }
+
+        window.lucide?.createIcons({
+            nodes: rows.flatMap((row) => Array.from(row.querySelectorAll('[data-lucide]'))),
+        })
+        rows.forEach((row) => {
+            bindImageFallbacks({
+                scope: row,
+                selector: '.playlistTrackCover',
+            })
+        })
+        scheduleArtworkHydration(rows)
+    }
+
+    return {
+        buildTrackRecordForRender,
+        applyRowDecorations,
+        scheduleArtworkHydration,
+        cancelArtworkHydration,
+    }
+}
diff --git a/ui/pages/playlist/playlist-duration-cache.js b/ui/pages/playlist/playlist-duration-cache.js
new file mode 100644
index 0000000..c6fe39d
--- /dev/null
+++ b/ui/pages/playlist/playlist-duration-cache.js
@@ -0,0 +1,208 @@
+import { sessionService } from '../../services/session-service.js'
+import { normalizeTrackRecord } from '../../utils/track-record.js'
+
+const PLAYLIST_DURATION_CACHE_LIMIT = 2000
+const PLAYLIST_DURATION_SAVE_DEBOUNCE_MS = 800
+
+const playlistDurationCache = new Map()
+const playlistDurationProbePromises = new Map()
+
+let playlistDurationPersistTimer = null
+let playlistDurationPersistQueued = false
+let playlistDurationPersistInFlight = false
+let playlistDurationPersisting = false
+
+export function getPlaylistTrackFilePath(track) {
+    if (typeof track === 'string') {
+        return track.trim()
+    }
+
+    return typeof track?.filePath === 'string' ? track.filePath.trim() : ''
+}
+
+export function normalizeDurationValue(value) {
+    const duration = Number(value)
+    return Number.isFinite(duration) && duration > 0 ? duration : null
+}
+
+export function rememberPlaylistDuration(filePath, duration) {
+    const normalizedFilePath = typeof filePath === 'string' ? filePath.trim() : ''
+    if (!normalizedFilePath) {
+        return
+    }
+
+    playlistDurationCache.delete(normalizedFilePath)
+    playlistDurationCache.set(normalizedFilePath, normalizeDurationValue(duration))
+
+    while (playlistDurationCache.size > PLAYLIST_DURATION_CACHE_LIMIT) {
+        const oldestKey = playlistDurationCache.keys().next().value
+        playlistDurationCache.delete(oldestKey)
+    }
+}
+
+export function getPlaylistDurationProbePromise(filePath) {
+    return playlistDurationProbePromises.get(filePath) || null
+}
+
+export function setPlaylistDurationProbePromise(filePath, probePromise) {
+    playlistDurationProbePromises.set(filePath, probePromise)
+}
+
+export function clearPlaylistDurationProbePromise(filePath) {
+    playlistDurationProbePromises.delete(filePath)
+}
+
+export function getTrackDurationState(track) {
+    const storedDuration = normalizeDurationValue(track?.duration)
+    if (storedDuration !== null) {
+        return { known: true, duration: storedDuration }
+    }
+
+    const filePath = getPlaylistTrackFilePath(track)
+    if (!filePath) {
+        return { known: true, duration: null }
+    }
+
+    if (!playlistDurationCache.has(filePath)) {
+        return { known: false, duration: null }
+    }
+
+    const duration = playlistDurationCache.get(filePath)
+    playlistDurationCache.delete(filePath)
+    playlistDurationCache.set(filePath, duration)
+
+    return { known: true, duration }
+}
+
+export function primePlaylistDurationCache(playlists) {
+    if (!Array.isArray(playlists)) {
+        return
+    }
+
+    playlists.forEach((playlist) => {
+        if (!Array.isArray(playlist?.tracks)) {
+            return
+        }
+
+        playlist.tracks.forEach((track) => {
+            const duration = normalizeDurationValue(track?.duration)
+            const filePath = getPlaylistTrackFilePath(track)
+            if (filePath && duration !== null) {
+                rememberPlaylistDuration(filePath, duration)
+            }
+        })
+    })
+}
+
+export function isPlaylistDurationPersisting() {
+    return playlistDurationPersisting
+}
+
+export function schedulePlaylistDurationPersist() {
+    playlistDurationPersistQueued = true
+
+    if (playlistDurationPersistTimer || playlistDurationPersistInFlight) {
+        return
+    }
+
+    playlistDurationPersistTimer = window.setTimeout(() => {
+        flushCachedPlaylistDurations().catch((error) => {
+            console.error('Failed to flush playlist durations:', error)
+        })
+    }, PLAYLIST_DURATION_SAVE_DEBOUNCE_MS)
+}
+
+function getCachedDuration(filePath) {
+    if (!filePath || !playlistDurationCache.has(filePath)) {
+        return { found: false, duration: null }
+    }
+
+    const duration = playlistDurationCache.get(filePath)
+    playlistDurationCache.delete(filePath)
+    playlistDurationCache.set(filePath, duration)
+
+    return { found: true, duration }
+}
+
+function applyCachedDurationsToPlaylists(playlists) {
+    let changed = false
+    const updatedPlaylists = Array.isArray(playlists)
+        ? playlists.map((playlist) => {
+              if (!Array.isArray(playlist?.tracks)) {
+                  return playlist
+              }
+
+              let tracksChanged = false
+              const tracks = playlist.tracks.map((track) => {
+                  const filePath = getPlaylistTrackFilePath(track)
+                  const cached = getCachedDuration(filePath)
+                  const duration = cached.found ? normalizeDurationValue(cached.duration) : null
+
+                  if (
+                      !filePath ||
+                      duration === null ||
+                      normalizeDurationValue(track?.duration) === duration
+                  ) {
+                      return track
+                  }
+
+                  const normalizedTrack = normalizeTrackRecord(track)
+                  if (!normalizedTrack) {
+                      return track
+                  }
+
+                  tracksChanged = true
+                  return {
+                      ...normalizedTrack,
+                      duration,
+                  }
+              })
+
+              if (!tracksChanged) {
+                  return playlist
+              }
+
+              changed = true
+              return {
+                  ...playlist,
+                  tracks,
+              }
+          })
+        : []
+
+    return { playlists: updatedPlaylists, changed }
+}
+
+async function flushCachedPlaylistDurations() {
+    if (playlistDurationPersistTimer) {
+        window.clearTimeout(playlistDurationPersistTimer)
+        playlistDurationPersistTimer = null
+    }
+
+    if (playlistDurationPersistInFlight || !playlistDurationPersistQueued) {
+        return
+    }
+
+    playlistDurationPersistQueued = false
+    playlistDurationPersistInFlight = true
+    playlistDurationPersisting = true
+
+    try {
+        const latestPlaylists = await sessionService.loadUserPlaylists()
+        const { playlists: updatedPlaylists, changed } =
+            applyCachedDurationsToPlaylists(latestPlaylists)
+
+        if (changed) {
+            await sessionService.saveUserPlaylists(updatedPlaylists)
+        }
+    } catch (error) {
+        console.error('Failed to persist playlist durations:', error)
+    } finally {
+        playlistDurationPersisting = false
+        playlistDurationPersistInFlight = false
+
+        if (playlistDurationPersistQueued) {
+            schedulePlaylistDurationPersist()
+        }
+    }
+}
diff --git a/ui/pages/playlist/playlist-duration.js b/ui/pages/playlist/playlist-duration.js
new file mode 100644
index 0000000..2f93d46
--- /dev/null
+++ b/ui/pages/playlist/playlist-duration.js
@@ -0,0 +1,297 @@
+import {
+    clearPlaylistDurationProbePromise,
+    getPlaylistDurationProbePromise,
+    getPlaylistTrackFilePath,
+    getTrackDurationState,
+    normalizeDurationValue,
+    rememberPlaylistDuration,
+    schedulePlaylistDurationPersist,
+    setPlaylistDurationProbePromise,
+} from './playlist-duration-cache.js'
+import { formatDurationClock, formatDurationVerbose } from '../../utils/duration.js'
+import { toFileUrl } from '../../utils/file-path.js'
+import { normalizeTrackRecord } from '../../utils/track-record.js'
+
+const PLAYLIST_DURATION_WORKERS = 4
+
+function probeAudioDuration(filePath) {
+    return new Promise((resolve) => {
+        const url = toFileUrl(filePath)
+        if (!url) {
+            resolve(null)
+            return
+        }
+
+        const audio = new Audio()
+        audio.preload = 'metadata'
+
+        const cleanup = () => {
+            audio.removeEventListener('loadedmetadata', onLoadedMetadata)
+            audio.removeEventListener('error', onError)
+            audio.src = ''
+        }
+
+        const onLoadedMetadata = () => {
+            const duration = Number(audio.duration)
+            cleanup()
+            resolve(Number.isFinite(duration) && duration > 0 ? duration : null)
+        }
+
+        const onError = () => {
+            cleanup()
+            resolve(null)
+        }
+
+        audio.addEventListener('loadedmetadata', onLoadedMetadata, { once: true })
+        audio.addEventListener('error', onError, { once: true })
+        audio.src = url
+    })
+}
+
+async function resolveTrackDuration(track) {
+    const knownDuration = getTrackDurationState(track)
+    if (knownDuration.known) {
+        return knownDuration.duration
+    }
+
+    const filePath = getPlaylistTrackFilePath(track)
+    if (!filePath) {
+        return null
+    }
+
+    const existingProbePromise = getPlaylistDurationProbePromise(filePath)
+    if (existingProbePromise) {
+        return existingProbePromise
+    }
+
+    const probePromise = probeAudioDuration(filePath)
+        .then((duration) => {
+            rememberPlaylistDuration(filePath, duration)
+            clearPlaylistDurationProbePromise(filePath)
+
+            if (normalizeDurationValue(duration) !== null) {
+                schedulePlaylistDurationPersist()
+            }
+
+            return duration
+        })
+        .catch((error) => {
+            clearPlaylistDurationProbePromise(filePath)
+            throw error
+        })
+
+    setPlaylistDurationProbePromise(filePath, probePromise)
+
+    return probePromise
+}
+
+async function resolveTrackDurationsLimited(tracks, { concurrency = 8, onResolved } = {}) {
+    if (!Array.isArray(tracks) || tracks.length === 0) {
+        return []
+    }
+
+    const results = tracks.map((track) => getTrackDurationState(track).duration)
+    const unresolvedIndexes = []
+    tracks.forEach((track, index) => {
+        if (!getTrackDurationState(track).known) {
+            unresolvedIndexes.push(index)
+        }
+    })
+
+    if (!unresolvedIndexes.length) {
+        return results
+    }
+
+    let nextIndex = 0
+
+    const workers = Array.from(
+        { length: Math.min(concurrency, unresolvedIndexes.length) },
+        async () => {
+            while (nextIndex < unresolvedIndexes.length) {
+                const index = unresolvedIndexes[nextIndex]
+                nextIndex += 1
+
+                const duration = await resolveTrackDuration(tracks[index])
+                results[index] = duration
+                onResolved?.({ index, duration })
+
+                await new Promise((resolve) => setTimeout(resolve, 0))
+            }
+        },
+    )
+
+    await Promise.all(workers)
+    return results
+}
+
+export function createPlaylistDurationController({
+    body,
+    durationElement,
+    getPlaylists,
+    getActivePlaylist,
+    isTrackRendered,
+    onDurationCellUpdate,
+} = {}) {
+    let totalDurationRunId = 0
+    let durationCellsRaf = null
+    let pendingDurationCellsRunId = null
+    const pendingDurationCellIndexes = new Set()
+
+    function rememberActivePlaylistTrackDuration(playlistId, trackIndex, duration) {
+        const safeDuration = normalizeDurationValue(duration)
+        if (!playlistId || !Number.isInteger(trackIndex) || safeDuration === null) {
+            return
+        }
+
+        const activePlaylist = (getPlaylists?.() || []).find(
+            (playlist) => playlist.id === playlistId,
+        )
+        const track = activePlaylist?.tracks?.[trackIndex]
+        const filePath = getPlaylistTrackFilePath(track)
+        if (!activePlaylist || !Array.isArray(activePlaylist.tracks) || !filePath) {
+            return
+        }
+
+        if (normalizeDurationValue(track?.duration) === safeDuration) {
+            return
+        }
+
+        const normalizedTrack = normalizeTrackRecord(track)
+        if (!normalizedTrack || normalizedTrack.filePath !== filePath) {
+            return
+        }
+
+        activePlaylist.tracks[trackIndex] = {
+            ...normalizedTrack,
+            duration: safeDuration,
+        }
+    }
+
+    function getTrackDurationFromRecord(track) {
+        return getTrackDurationState(track).duration
+    }
+
+    function updateDurationCell(index, duration) {
+        const durationCell = body.querySelector(`td[data-duration-index="${index}"]`)
+        if (durationCell) {
+            durationCell.textContent = formatDurationClock(duration)
+        }
+
+        onDurationCellUpdate?.(index, duration)
+    }
+
+    function cancelPendingDurationCellUpdates() {
+        if (durationCellsRaf) {
+            cancelAnimationFrame(durationCellsRaf)
+            durationCellsRaf = null
+        }
+        pendingDurationCellsRunId = null
+        pendingDurationCellIndexes.clear()
+    }
+
+    function scheduleDurationCellUpdate(trackIndex, runId = totalDurationRunId) {
+        if (runId !== totalDurationRunId) {
+            return
+        }
+
+        if (pendingDurationCellsRunId !== runId) {
+            cancelPendingDurationCellUpdates()
+            pendingDurationCellsRunId = runId
+        }
+
+        if (Number.isInteger(trackIndex)) {
+            pendingDurationCellIndexes.add(trackIndex)
+        }
+
+        if (durationCellsRaf) {
+            return
+        }
+
+        durationCellsRaf = requestAnimationFrame(() => {
+            durationCellsRaf = null
+            if (runId !== totalDurationRunId) {
+                pendingDurationCellsRunId = null
+                pendingDurationCellIndexes.clear()
+                return
+            }
+            renderDurationCellUpdates(Array.from(pendingDurationCellIndexes))
+            pendingDurationCellsRunId = null
+            pendingDurationCellIndexes.clear()
+        })
+    }
+
+    function renderDurationCellUpdates(trackIndexes) {
+        const activePlaylist = getActivePlaylist?.()
+        trackIndexes.forEach((trackIndex) => {
+            updateDurationCell(
+                trackIndex,
+                getTrackDurationFromRecord(activePlaylist?.tracks?.[trackIndex]),
+            )
+        })
+    }
+
+    async function renderTotalDuration(activePlaylist) {
+        if (
+            !activePlaylist ||
+            !Array.isArray(activePlaylist.tracks) ||
+            activePlaylist.tracks.length === 0
+        ) {
+            totalDurationRunId += 1
+            durationElement.textContent = ''
+            return
+        }
+
+        const knownDurations = activePlaylist.tracks.map((track) => getTrackDurationState(track))
+        if (knownDurations.every((duration) => duration.known)) {
+            totalDurationRunId += 1
+            cancelPendingDurationCellUpdates()
+            const totalSeconds = knownDurations.reduce(
+                (sum, value) => sum + (Number(value.duration) || 0),
+                0,
+            )
+            durationElement.textContent = `, ${formatDurationVerbose(totalSeconds)}`
+            return
+        }
+
+        durationElement.textContent = ', ...'
+        const runId = ++totalDurationRunId
+        const durations = await resolveTrackDurationsLimited(activePlaylist.tracks, {
+            concurrency: PLAYLIST_DURATION_WORKERS,
+            onResolved: (resolvedTrack) => {
+                if (runId !== totalDurationRunId) {
+                    return
+                }
+
+                rememberActivePlaylistTrackDuration(
+                    activePlaylist.id,
+                    resolvedTrack.index,
+                    resolvedTrack.duration,
+                )
+
+                if (isTrackRendered?.(resolvedTrack.index) ?? true) {
+                    scheduleDurationCellUpdate(resolvedTrack.index, runId)
+                }
+            },
+        })
+
+        if (runId !== totalDurationRunId) {
+            return
+        }
+
+        const totalSeconds = durations.reduce((sum, value) => sum + (Number(value) || 0), 0)
+        durationElement.textContent = `, ${formatDurationVerbose(totalSeconds)}`
+    }
+
+    function cancelTotalDuration() {
+        totalDurationRunId += 1
+        cancelPendingDurationCellUpdates()
+    }
+
+    return {
+        renderTotalDuration,
+        getTrackDurationFromRecord,
+        scheduleDurationCellUpdate,
+        cancelPendingDurationCellUpdates,
+        cancelTotalDuration,
+    }
+}
diff --git a/ui/pages/playlist/playlist-header.js b/ui/pages/playlist/playlist-header.js
new file mode 100644
index 0000000..0518b54
--- /dev/null
+++ b/ui/pages/playlist/playlist-header.js
@@ -0,0 +1,309 @@
+import { bindImageFallback } from '../../utils/dom-helpers.js'
+import { hydrateImageWithPlaylistArtwork } from '../../utils/artwork.js'
+import { toFileUrl } from '../../utils/file-path.js'
+import {
+    DEFAULT_PLAYLIST_IMAGE,
+    normalizePlaylistImageValue,
+    resolvePlaylistImage,
+} from '../../utils/playlist-media.js'
+
+export function createPlaylistHeaderController({
+    title,
+    trackCountElement,
+    durationElement,
+    image,
+    imageEditButton,
+    getActivePlaylist,
+    getPlaylists,
+    onSave,
+    audioService,
+} = {}) {
+    const playlistCoverSaveInFlight = new Set()
+    let isSavingPlaylistImage = false
+    let isSavingPlaylistCover = false
+    let isSavingPlaylistName = false
+    let cleanupImageEditHandler = null
+    let cleanupTitleEditHandler = null
+    let titleBeforeEdit = ''
+
+    async function persistPlaylistCoverIfMissing(playlistId, artwork) {
+        const cover = normalizePlaylistImageValue(artwork)
+        if (
+            !playlistId ||
+            !cover ||
+            cover === DEFAULT_PLAYLIST_IMAGE ||
+            playlistCoverSaveInFlight.has(playlistId)
+        ) {
+            return
+        }
+
+        const playlists = getPlaylists?.() || []
+        const targetPlaylist = playlists.find((playlist) => playlist.id === playlistId)
+        if (
+            !targetPlaylist ||
+            normalizePlaylistImageValue(targetPlaylist.banner) ||
+            normalizePlaylistImageValue(targetPlaylist.cover)
+        ) {
+            return
+        }
+
+        const updatedPlaylists = playlists.map((playlist) =>
+            playlist.id === playlistId
+                ? {
+                      ...playlist,
+                      cover,
+                  }
+                : playlist,
+        )
+
+        playlistCoverSaveInFlight.add(playlistId)
+        isSavingPlaylistCover = true
+        try {
+            await onSave?.(updatedPlaylists, {
+                errorMessage: 'Failed to save generated playlist cover',
+                renderAfterSave: false,
+            })
+        } catch (error) {
+            console.error('Failed to save generated playlist cover', error)
+        } finally {
+            isSavingPlaylistCover = false
+            playlistCoverSaveInFlight.delete(playlistId)
+        }
+    }
+
+    function render(activePlaylist, { hydrateArtwork = true } = {}) {
+        const renderHeaderIcon = () => {
+            window.lucide?.createIcons({ nodes: [imageEditButton] })
+        }
+
+        if (!activePlaylist) {
+            stopTitleEditing({ resetText: false })
+            title.textContent = 'No playlist selected'
+            title.classList.remove('is-editable')
+            title.removeAttribute('tabindex')
+            title.removeAttribute('role')
+            title.removeAttribute('aria-label')
+            trackCountElement.textContent = 'Choose a playlist from your library.'
+            durationElement.textContent = ''
+            imageEditButton.disabled = true
+            bindImageFallback(image)
+            image.src = './assets/music-placeholder.png'
+            renderHeaderIcon()
+            return
+        }
+
+        const playlistImage = resolvePlaylistImage(activePlaylist)
+        stopTitleEditing({ resetText: false })
+        title.textContent = activePlaylist.name || 'Untitled Playlist'
+        title.classList.add('is-editable')
+        title.setAttribute('tabindex', '0')
+        title.setAttribute('role', 'textbox')
+        title.setAttribute('aria-label', 'Edit playlist title')
+        const trackCount = activePlaylist.tracks?.length || 0
+        trackCountElement.textContent = `${trackCount} ${trackCount === 1 ? 'song' : 'songs'}`
+        imageEditButton.disabled = false
+
+        bindImageFallback(image)
+        image.src = playlistImage
+        if (hydrateArtwork) {
+            hydrateImageWithPlaylistArtwork({
+                imageElement: image,
+                playlist: activePlaylist,
+                audioService,
+            })
+                .then((artwork) => {
+                    persistPlaylistCoverIfMissing(activePlaylist.id, artwork).catch(() => {})
+                })
+                .catch(() => {})
+        }
+        renderHeaderIcon()
+    }
+
+    function stopTitleEditing({ resetText = true } = {}) {
+        if (title.isContentEditable) {
+            title.contentEditable = 'false'
+        }
+        title.classList.remove('is-editing')
+        if (resetText) {
+            title.textContent = titleBeforeEdit
+        }
+    }
+
+    function startTitleEditing() {
+        const activePlaylist = getActivePlaylist?.()
+        if (!activePlaylist || title.isContentEditable) {
+            return
+        }
+
+        titleBeforeEdit = activePlaylist.name || 'Untitled Playlist'
+        title.contentEditable = 'true'
+        title.classList.add('is-editing')
+        title.focus()
+
+        const selection = window.getSelection?.()
+        const range = document.createRange()
+        range.selectNodeContents(title)
+        selection?.removeAllRanges()
+        selection?.addRange(range)
+    }
+
+    async function saveTitleEdit() {
+        if (!title.isContentEditable) {
+            return
+        }
+
+        const activePlaylist = getActivePlaylist?.()
+        const nextName = title.textContent.trim() || 'Untitled Playlist'
+        stopTitleEditing({ resetText: false })
+
+        if (!activePlaylist) {
+            return
+        }
+
+        if (nextName === (activePlaylist.name || 'Untitled Playlist')) {
+            title.textContent = nextName
+            return
+        }
+
+        const now = new Date().toISOString()
+        const updatedPlaylists = (getPlaylists?.() || []).map((playlist) => {
+            if (playlist.id !== activePlaylist.id) {
+                return playlist
+            }
+
+            return {
+                ...playlist,
+                name: nextName,
+                updatedAt: now,
+            }
+        })
+
+        isSavingPlaylistName = true
+        try {
+            const saved = await onSave?.(updatedPlaylists, {
+                activeId: activePlaylist.id,
+                errorMessage: 'Failed to save playlist title',
+            })
+            if (!saved) {
+                title.textContent = titleBeforeEdit
+            }
+        } catch (error) {
+            title.textContent = titleBeforeEdit
+            console.error('Failed to update playlist title', error)
+        } finally {
+            isSavingPlaylistName = false
+        }
+    }
+
+    function attachTitleEditHandler() {
+        if (cleanupTitleEditHandler) {
+            return
+        }
+
+        const onTitleClick = () => {
+            startTitleEditing()
+        }
+        const onTitleKeyDown = (event) => {
+            if (event.key === 'Enter') {
+                event.preventDefault()
+                saveTitleEdit()
+                return
+            }
+
+            if (event.key === 'Escape') {
+                event.preventDefault()
+                stopTitleEditing()
+                title.blur()
+            }
+        }
+        const onTitleBlur = () => {
+            saveTitleEdit()
+        }
+        const onTitlePaste = (event) => {
+            if (!title.isContentEditable) {
+                return
+            }
+
+            event.preventDefault()
+            const text = event.clipboardData?.getData('text/plain') || ''
+            document.execCommand?.('insertText', false, text)
+        }
+
+        title.addEventListener('click', onTitleClick)
+        title.addEventListener('keydown', onTitleKeyDown)
+        title.addEventListener('blur', onTitleBlur)
+        title.addEventListener('paste', onTitlePaste)
+        cleanupTitleEditHandler = () => {
+            title.removeEventListener('click', onTitleClick)
+            title.removeEventListener('keydown', onTitleKeyDown)
+            title.removeEventListener('blur', onTitleBlur)
+            title.removeEventListener('paste', onTitlePaste)
+            cleanupTitleEditHandler = null
+        }
+    }
+
+    function attachImageEditHandler() {
+        if (cleanupImageEditHandler) {
+            return
+        }
+
+        const onImageEditClick = async () => {
+            const activePlaylist = getActivePlaylist?.()
+            if (!activePlaylist || typeof window.electronAPI?.selectImageFile !== 'function') {
+                return
+            }
+
+            try {
+                const selectedImagePath = await window.electronAPI.selectImageFile()
+                const banner = toFileUrl(selectedImagePath)
+                if (!banner) {
+                    return
+                }
+
+                const now = new Date().toISOString()
+                const updatedPlaylists = (getPlaylists?.() || []).map((playlist) => {
+                    if (playlist.id !== activePlaylist.id) {
+                        return playlist
+                    }
+
+                    return {
+                        ...playlist,
+                        banner,
+                        updatedAt: now,
+                    }
+                })
+
+                isSavingPlaylistImage = true
+                await onSave?.(updatedPlaylists, {
+                    activeId: activePlaylist.id,
+                    errorMessage: 'Failed to save playlist image',
+                })
+            } catch (error) {
+                console.error('Failed to update playlist image', error)
+            } finally {
+                isSavingPlaylistImage = false
+            }
+        }
+
+        imageEditButton.addEventListener('click', onImageEditClick)
+        cleanupImageEditHandler = () => {
+            imageEditButton.removeEventListener('click', onImageEditClick)
+            cleanupImageEditHandler = null
+        }
+    }
+
+    function cleanup() {
+        cleanupImageEditHandler?.()
+        cleanupTitleEditHandler?.()
+    }
+
+    return {
+        render,
+        attachTitleEditHandler,
+        attachImageEditHandler,
+        cleanup,
+        isSavingPlaylistImage: () => isSavingPlaylistImage,
+        isSavingPlaylistCover: () => isSavingPlaylistCover,
+        isSavingPlaylistName: () => isSavingPlaylistName,
+    }
+}
diff --git a/ui/pages/playlist/playlist-scroll.js b/ui/pages/playlist/playlist-scroll.js
new file mode 100644
index 0000000..2f5b88f
--- /dev/null
+++ b/ui/pages/playlist/playlist-scroll.js
@@ -0,0 +1,120 @@
+export function createPlaylistScrollController({
+    trackContainer,
+    image,
+    getVirtualizer,
+    onRender,
+} = {}) {
+    let cachedScrollMargin = null
+    let playlistLayoutResizeObserver = null
+    let scrollRaf = null
+
+    function getScrollElement() {
+        return window.appScrollElement || document.getElementById('app-scroll') || window
+    }
+
+    function getScrollTop() {
+        const scrollElement = getScrollElement()
+        if (scrollElement === window) {
+            return (document.scrollingElement || document.documentElement).scrollTop
+        }
+
+        return scrollElement.scrollTop
+    }
+
+    function getViewportHeight() {
+        const scrollElement = getScrollElement()
+        if (scrollElement === window) {
+            return window.innerHeight || document.documentElement.clientHeight
+        }
+
+        return scrollElement.clientHeight
+    }
+
+    function getElementTopWithinAppScroll(element) {
+        const scrollElement = getScrollElement()
+        const scrollTop = getScrollTop()
+        const elementRect = element.getBoundingClientRect()
+
+        if (scrollElement === window) {
+            return elementRect.top + scrollTop
+        }
+
+        const scrollRect = scrollElement.getBoundingClientRect()
+        return elementRect.top - scrollRect.top + scrollTop
+    }
+
+    function getScrollMargin({ force = false } = {}) {
+        if (!force && cachedScrollMargin !== null) {
+            return cachedScrollMargin
+        }
+
+        const table = trackContainer.querySelector('.playlistTrackTable')
+        const thead = table?.querySelector('thead')
+        const headerHeight = thead ? thead.getBoundingClientRect().height : 0
+
+        cachedScrollMargin = getElementTopWithinAppScroll(trackContainer) + headerHeight
+        return cachedScrollMargin
+    }
+
+    function scheduleRender() {
+        if (scrollRaf) {
+            return
+        }
+
+        scrollRaf = requestAnimationFrame(() => {
+            scrollRaf = null
+            onRender?.()
+        })
+    }
+
+    function invalidate() {
+        cachedScrollMargin = null
+        if (getVirtualizer?.()) {
+            scheduleRender()
+        }
+    }
+
+    function observe() {
+        if (typeof ResizeObserver === 'function') {
+            playlistLayoutResizeObserver = new ResizeObserver(invalidate)
+            ;[
+                document.querySelector('.playlistHeader'),
+                document.querySelector('.playlistControls'),
+                trackContainer.querySelector('thead'),
+            ].forEach((element) => {
+                if (element) {
+                    playlistLayoutResizeObserver.observe(element)
+                }
+            })
+        }
+
+        window.addEventListener('resize', invalidate, { passive: true })
+        image.addEventListener('load', invalidate)
+        image.addEventListener('error', invalidate)
+    }
+
+    function cleanup() {
+        if (scrollRaf) {
+            cancelAnimationFrame(scrollRaf)
+            scrollRaf = null
+        }
+
+        window.removeEventListener('resize', invalidate)
+        image.removeEventListener('load', invalidate)
+        image.removeEventListener('error', invalidate)
+        playlistLayoutResizeObserver?.disconnect()
+        playlistLayoutResizeObserver = null
+        cachedScrollMargin = null
+    }
+
+    return {
+        getScrollElement,
+        getScrollTop,
+        getViewportHeight,
+        getScrollMargin,
+        scheduleRender,
+        observe,
+        invalidate,
+        cleanup,
+    }
+}
diff --git a/ui/pages/playlist/playlist-sortable.js b/ui/pages/playlist/playlist-sortable.js
index a09062f..04d285a 100644
--- a/ui/pages/playlist/playlist-sortable.js
+++ b/ui/pages/playlist/playlist-sortable.js
@@ -2,6 +2,7 @@
 
 import Sortable from '../../../node_modules/sortablejs/modular/sortable.esm.js'
 import { getDataAttributeIndex } from '../../utils/dom-helpers.js'
+import { cursorClasses } from '../../utils/cursor-interaction.js'
 
 function isValidTrackIndex(index, tracks) {
     return Number.isInteger(index) && index >= 0 && index < tracks.length
@@ -22,15 +23,23 @@ export function createPlaylistSortable({ body, getActivePlaylist, getPlaylists,
     if (typeof Sortable !== 'function') return { destroy: () => {} }
 
     let sortable = null
+    const setDraggingCursor = (isDragging) => {
+        document.documentElement?.classList.toggle(cursorClasses.grabbing, Boolean(isDragging))
+        document.body?.classList.toggle(cursorClasses.grabbing, Boolean(isDragging))
+    }
 
     try {
         sortable = Sortable.create(body, {
             animation: 150,
             draggable: 'tr.playlistTrackRow',
             filter: 'button, a, input, textarea, select, .playlistTrackMenu, .playlistTrackActions',
+            forceFallback: true,
+            fallbackClass: 'playlistTrackRow--fallbackDragging',
+            fallbackOnBody: true,
             preventOnFilter: true,
             ghostClass: 'playlistTrackRow--dragging',
             onStart: () => {
+                setDraggingCursor(true)
                 try {
                     const interactive = body.querySelectorAll(
                         '.playlistTrackIndexPlayBtn, .playlistTrackMoreBtn',
@@ -47,6 +56,7 @@ export function createPlaylistSortable({ body, getActivePlaylist, getPlaylists,
                 }
             },
             onEnd: (evt) => {
+                setDraggingCursor(false)
                 try {
                     try {
                         const interactive = body.querySelectorAll(
@@ -193,6 +203,7 @@ export function createPlaylistSortable({ body, getActivePlaylist, getPlaylists,
 
     return {
         destroy() {
+            setDraggingCursor(false)
             if (sortable && typeof sortable.destroy === 'function') {
                 try {
                     sortable.destroy()
diff --git a/ui/pages/playlist/playlist.css b/ui/pages/playlist/playlist.css
index aedb834..592ce50 100644
--- a/ui/pages/playlist/playlist.css
+++ b/ui/pages/playlist/playlist.css
@@ -105,6 +105,30 @@
     margin: 4px 0;
 }
 
+.playlistMeta h2.is-editable {
+    border-radius: 6px;
+    cursor: text;
+    display: inline-block;
+    max-width: 100%;
+    outline: 2px solid transparent;
+    outline-offset: 3px;
+}
+
+.playlistMeta h2.is-editable:hover {
+    cursor:
+        url('../../assets/cursor-pointer-clicked.png') 7 7,
+        text !important;
+}
+
+.playlistMeta h2.is-editable:focus-visible,
+.playlistMeta h2.is-editing {
+    outline-color: #2563eb;
+}
+
+.playlistMeta h2.is-editing {
+    background: #eff6ff;
+}
+
 .playlistMeta p {
     margin: 0;
     color: #475467;
@@ -165,6 +189,51 @@
     position: relative;
     z-index: 1;
     height: 60px;
+    cursor:
+        url('../../assets/cursor-drag.png') 10 10,
+        grab;
+}
+
+.playlistTrackRow--dragging,
+.playlistTrackRow--fallbackDragging,
+.playlistTrackRow.sortable-chosen,
+.playlistTrackRow.sortable-drag {
+    cursor:
+        url('../../assets/cursor-drag-clicked.png') 10 10,
+        grabbing !important;
+}
+
+.playlistTrackRow--fallbackDragging,
+.sortable-fallback {
+    cursor:
+        url('../../assets/cursor-drag-clicked.png') 10 10,
+        grabbing !important;
+}
+
+/* .playlistTrackRow.isNowPlaying tr {
+    outline: 2px solid #5b8cff;
+    outline-offset: 2px;
+} */
+
+.playlistTrackRow.isNowPlaying td {
+    background: #f5f9fe;
+    box-shadow:
+        inset 0 2px 0 #5b8cff,
+        inset 0 -2px 0 #5b8cff;
+}
+
+.playlistTrackRow.isNowPlaying td:first-child {
+    box-shadow:
+        inset 2px 0 0 #5b8cff,
+        inset 0 2px 0 #5b8cff,
+        inset 0 -2px 0 #5b8cff;
+}
+
+.playlistTrackRow.isNowPlaying td:last-child {
+    box-shadow:
+        inset -2px 0 0 #5b8cff,
+        inset 0 2px 0 #5b8cff,
+        inset 0 -2px 0 #5b8cff;
 }
 
 .playlistTrackRow.is-menu-open {
@@ -226,10 +295,9 @@
     height: 34px;
     align-items: center;
     justify-content: center;
-    border: 1px solid #d6dbe3;
-    border-radius: 8px;
     background: transparent;
     color: #1f2937;
+    border: none;
     display: inline-flex;
     position: relative;
     cursor: pointer;
diff --git a/ui/pages/playlist/playlist.js b/ui/pages/playlist/playlist.js
index e6874d7..410a06f 100644
--- a/ui/pages/playlist/playlist.js
+++ b/ui/pages/playlist/playlist.js
@@ -1,29 +1,44 @@
-import {
-    getDataAttributeIndex,
-    bindImageFallback,
-    bindImageFallbacks,
-} from '../../utils/dom-helpers.js'
-import { createPlaylistSortable } from './playlist-sortable.js'
+import { getDataAttributeIndex } from '../../utils/dom-helpers.js'
 import { renderTrackRow } from './playlist-row-renderer.js'
 import {
     canUsePlaylistVirtualizer,
     createPlaylistVirtualizer,
     loadPlaylistVirtualCore,
 } from './playlist-virtualizer.js'
-import { pushUndo, attachUndoShortcut, detachUndoShortcut } from '../../services/undo-service.js'
-//formatDate in rowrederer
-import { formatDurationClock, formatDurationVerbose } from '../../utils/duration.js'
-import { toFileUrl } from '../../utils/file-path.js'
-import { resolvePlaylistImage, extractPlaylistFilePaths } from '../../utils/playlist-media.js'
-import { normalizeTrackRecord } from '../../utils/track-record.js'
+import {
+    getPlaylistTrackFilePath,
+    isPlaylistDurationPersisting,
+    primePlaylistDurationCache,
+} from './playlist-duration-cache.js'
+import { isPlaylistArtworkPersisting, primePlaylistArtworkCache } from './playlist-artwork-cache.js'
+import { attachUndoShortcut, detachUndoShortcut } from '../../services/undo-service.js'
+import { extractPlaylistFilePaths } from '../../utils/playlist-media.js'
 import { sessionService } from '../../services/session-service.js'
 import { audioService } from '../../services/audio-service.js'
 import { isRouteActive } from '../../utils/route.js'
+import { playerState } from '../../state/player-state.js'
+import { createPlaylistScrollController } from './playlist-scroll.js'
+import { createPlaylistDurationController } from './playlist-duration.js'
+import { createPlaylistArtworkController } from './playlist-artwork.js'
+import { createPlaylistActionsController } from './playlist-actions.js'
+import { createPlaylistHeaderController } from './playlist-header.js'
 
 const PLAYLIST_TRACK_ROW_HEIGHT = 60
 const PLAYLIST_TRACK_OVERSCAN = 12
 const PLAYLIST_VIRTUAL_ROW_CACHE_LIMIT = 240
 
+function waitForPlaylistSkeletonPaint() {
+    if (typeof window.requestAnimationFrame !== 'function') {
+        return new Promise((resolve) => window.setTimeout(resolve, 0))
+    }
+
+    return new Promise((resolve) => {
+        window.requestAnimationFrame(() => {
+            window.setTimeout(resolve, 0)
+        })
+    })
+}
+
 export function initializePlaylistPage() {
     const title = document.getElementById('playlistTitle')
     const trackCountElement = document.getElementById('playlistTrackCount')
@@ -49,113 +64,61 @@ export function initializePlaylistPage() {
 
     let playlists = []
     let activePlaylistId = window.playlistViewState?.activePlaylistId || null
-    const durationCache = new Map()
-    const durationProbePromises = new Map()
-    let totalDurationRunId = 0
-    let cleanupTrackActions = null
     let virtualizer = null
-    let scrollRaf = null
-    let sortableInstance = null
-    let isSavingPlaylistOrder = false
-    let isSavingPlaylistImage = false
-    let cachedScrollMargin = null
-    let playlistLayoutResizeObserver = null
-    let trackActionsDelegated = false
     let activeRenderedMode = null
     let paddingTopRow = null
     let paddingBottomRow = null
-    let durationCellsRaf = null
-    let pendingDurationCellsRunId = null
-    const pendingDurationCellIndexes = new Set()
     const virtualRowCache = new Map()
-
-    function getAppScrollElement() {
-        return window.appScrollElement || document.getElementById('app-scroll') || window
-    }
-
-    function getAppScrollTop() {
-        const scrollElement = getAppScrollElement()
-        if (scrollElement === window) {
-            return (document.scrollingElement || document.documentElement).scrollTop
-        }
-
-        return scrollElement.scrollTop
-    }
-
-    function getAppViewportHeight() {
-        const scrollElement = getAppScrollElement()
-        if (scrollElement === window) {
-            return window.innerHeight || document.documentElement.clientHeight
-        }
-
-        return scrollElement.clientHeight
-    }
-
-    function getElementTopWithinAppScroll(element) {
-        const scrollElement = getAppScrollElement()
-        const scrollTop = getAppScrollTop()
-        const elementRect = element.getBoundingClientRect()
-
-        if (scrollElement === window) {
-            return elementRect.top + scrollTop
-        }
-
-        const scrollRect = scrollElement.getBoundingClientRect()
-        return elementRect.top - scrollRect.top + scrollTop
-    }
-
-    function getPlaylistContentScrollMargin({ force = false } = {}) {
-        if (!force && cachedScrollMargin !== null) {
-            return cachedScrollMargin
-        }
-
-        const table = trackContainer.querySelector('.playlistTrackTable')
-        const thead = table?.querySelector('thead')
-        const headerHeight = thead ? thead.getBoundingClientRect().height : 0
-
-        cachedScrollMargin = getElementTopWithinAppScroll(trackContainer) + headerHeight
-        return cachedScrollMargin
-    }
-
-    function invalidatePlaylistScrollMargin() {
-        cachedScrollMargin = null
-        if (virtualizer) {
-            scheduleTrackRender()
-        }
-    }
-
-    function observePlaylistLayoutForScrollMargin() {
-        if (typeof ResizeObserver === 'function') {
-            playlistLayoutResizeObserver = new ResizeObserver(invalidatePlaylistScrollMargin)
-            ;[
-                document.querySelector('.playlistHeader'),
-                document.querySelector('.playlistControls'),
-                trackContainer.querySelector('thead'),
-            ].forEach((element) => {
-                if (element) {
-                    playlistLayoutResizeObserver.observe(element)
-                }
-            })
-        }
-
-        window.addEventListener('resize', invalidatePlaylistScrollMargin, { passive: true })
-        image.addEventListener('load', invalidatePlaylistScrollMargin)
-        image.addEventListener('error', invalidatePlaylistScrollMargin)
-    }
-
-    function scheduleTrackRender() {
-        if (scrollRaf) {
-            return
-        }
-
-        scrollRaf = requestAnimationFrame(() => {
-            scrollRaf = null
+    let renderedTrackIndexes = new Set()
+    let playbackSnapshot = playerState.getState()
+
+    const playlistScroll = createPlaylistScrollController({
+        trackContainer,
+        image,
+        getVirtualizer: () => virtualizer,
+        onRender: () => {
             const activePlaylist = getActivePlaylist()
             if (activePlaylist) {
                 renderTracks(activePlaylist, 'virtual-change')
             }
-        })
-    }
+        },
+    })
+    const playlistDuration = createPlaylistDurationController({
+        body,
+        durationElement,
+        getPlaylists: () => playlists,
+        getActivePlaylist,
+        isTrackRendered: (index) => renderedTrackIndexes.has(index),
+        onDurationCellUpdate: (index, duration) => {
+            const cached = virtualRowCache.get(index)
+            if (cached) {
+                cached.duration = duration
+            }
+        },
+    })
+    const playlistArtwork = createPlaylistArtworkController({
+        getActivePlaylist,
+        audioService,
+    })
+    const playlistActions = createPlaylistActionsController({
+        body,
+        getActivePlaylist,
+        getPlaylists: () => playlists,
+        onSave: savePlaylistsAndRender,
+        onRender: render,
+        audioService,
+    })
+    const playlistHeader = createPlaylistHeaderController({
+        title,
+        trackCountElement,
+        durationElement,
+        image,
+        imageEditButton,
+        getActivePlaylist,
+        getPlaylists: () => playlists,
+        onSave: savePlaylistsAndRender,
+        audioService,
+    })
 
     function renderPlayButtonIcon() {
         const existingIcon = playButton.querySelector('i')
@@ -166,131 +129,75 @@ export function initializePlaylistPage() {
         window.lucide?.createIcons({ nodes: [playButton] })
     }
 
-    function probeAudioDuration(filePath) {
-        return new Promise((resolve) => {
-            const url = toFileUrl(filePath)
-            if (!url) {
-                resolve(null)
-                return
-            }
+    function getActivePlaylist() {
+        return playlists.find((playlist) => playlist.id === activePlaylistId) || null
+    }
 
-            const audio = new Audio()
-            audio.preload = 'metadata'
+    function findQueueStartIndex(playlistPaths, playbackQueue) {
+        if (
+            !playlistPaths.length ||
+            !playbackQueue.length ||
+            playbackQueue.length > playlistPaths.length
+        ) {
+            return -1
+        }
 
-            const cleanup = () => {
-                audio.removeEventListener('loadedmetadata', onLoadedMetadata)
-                audio.removeEventListener('error', onError)
-                audio.src = ''
-            }
+        const normalizedQueue = playbackQueue.map(getPlaylistTrackFilePath)
 
-            const onLoadedMetadata = () => {
-                const duration = Number(audio.duration)
-                cleanup()
-                resolve(Number.isFinite(duration) && duration > 0 ? duration : null)
-            }
+        for (let start = 0; start <= playlistPaths.length - normalizedQueue.length; start++) {
+            const isMatch = normalizedQueue.every((filePath, offset) => {
+                return filePath && filePath === playlistPaths[start + offset]
+            })
 
-            const onError = () => {
-                cleanup()
-                resolve(null)
+            if (isMatch) {
+                return start
             }
+        }
 
-            audio.addEventListener('loadedmetadata', onLoadedMetadata, { once: true })
-            audio.addEventListener('error', onError, { once: true })
-            audio.src = url
-        })
+        return -1
     }
 
-    async function resolveTrackDuration(track) {
-        if (typeof track?.duration === 'number' && track.duration > 0) {
-            return track.duration
-        }
-
-        const filePath = track?.filePath
-        if (!filePath) {
-            return null
-        }
+    function getNowPlayingTrackIndex(activePlaylist = getActivePlaylist()) {
+        const tracks = Array.isArray(activePlaylist?.tracks) ? activePlaylist.tracks : []
+        const playbackQueue = Array.isArray(playbackSnapshot?.playlist)
+            ? playbackSnapshot.playlist
+            : []
+        const currentTrackIndex = Number.isInteger(playbackSnapshot?.currentTrackIndex)
+            ? playbackSnapshot.currentTrackIndex
+            : -1
 
-        if (durationCache.has(filePath)) {
-            return durationCache.get(filePath)
+        if (!tracks.length || !playbackQueue.length || currentTrackIndex < 0) {
+            return -1
         }
 
-        if (durationProbePromises.has(filePath)) {
-            return durationProbePromises.get(filePath)
+        if (currentTrackIndex >= playbackQueue.length) {
+            return -1
         }
 
-        const probePromise = probeAudioDuration(filePath)
-            .then((duration) => {
-                durationCache.set(filePath, duration)
-                durationProbePromises.delete(filePath)
-                return duration
-            })
-            .catch((error) => {
-                durationProbePromises.delete(filePath)
-                throw error
-            })
-
-        durationProbePromises.set(filePath, probePromise)
+        const playlistPaths = tracks.map(getPlaylistTrackFilePath)
+        const queueStartIndex = findQueueStartIndex(playlistPaths, playbackQueue)
 
-        return probePromise
-    }
-
-    async function resolveTrackDurationsLimited(tracks, { concurrency = 8, onResolved } = {}) {
-        if (!Array.isArray(tracks) || tracks.length === 0) {
-            return []
+        if (queueStartIndex < 0) {
+            return -1
         }
 
-        const results = new Array(tracks.length).fill(null)
-        let nextIndex = 0
+        return queueStartIndex + currentTrackIndex
+    }
 
-        const workers = Array.from({ length: Math.min(concurrency, tracks.length) }, async () => {
-            while (nextIndex < tracks.length) {
-                const index = nextIndex
-                nextIndex += 1
+    function applyNowPlayingHighlight() {
+        const nowPlayingTrackIndex = getNowPlayingTrackIndex()
 
-                const duration = await resolveTrackDuration(tracks[index])
-                results[index] = duration
-                onResolved?.({ index, duration })
+        body.querySelectorAll('.playlistTrackRow').forEach((row) => {
+            const rowTrackIndex = getDataAttributeIndex(row, 'data-track-index')
+            const isNowPlaying = rowTrackIndex !== null && rowTrackIndex === nowPlayingTrackIndex
 
-                await new Promise((resolve) => setTimeout(resolve, 0))
+            row.classList.toggle('isNowPlaying', isNowPlaying)
+            if (isNowPlaying) {
+                row.setAttribute('aria-current', 'true')
+            } else {
+                row.removeAttribute('aria-current')
             }
         })
-
-        await Promise.all(workers)
-        return results
-    }
-
-    async function renderTotalDuration(activePlaylist) {
-        if (
-            !activePlaylist ||
-            !Array.isArray(activePlaylist.tracks) ||
-            activePlaylist.tracks.length === 0
-        ) {
-            totalDurationRunId += 1
-            durationElement.textContent = ''
-            return
-        }
-
-        durationElement.textContent = ', ...'
-        const runId = ++totalDurationRunId
-        const durations = await resolveTrackDurationsLimited(activePlaylist.tracks, {
-            concurrency: 8,
-            onResolved: (resolvedTrack) => {
-                if (runId === totalDurationRunId) {
-                    scheduleDurationCellUpdate(resolvedTrack.index, runId)
-                }
-            },
-        })
-
-        if (runId !== totalDurationRunId) {
-            return
-        }
-
-        const totalSeconds = durations.reduce((sum, value) => sum + (Number(value) || 0), 0)
-        durationElement.textContent = `, ${formatDurationVerbose(totalSeconds)}`
-    }
-
-    function getActivePlaylist() {
-        return playlists.find((playlist) => playlist.id === activePlaylistId) || null
     }
 
     function setActivePlaylistState(nextActivePlaylistId) {
@@ -300,7 +207,12 @@ export function initializePlaylistPage() {
 
     async function savePlaylistsAndRender(
         updatedPlaylists,
-        { activeId = activePlaylistId, errorMessage = 'Failed to save playlists' } = {},
+        {
+            activeId = activePlaylistId,
+            errorMessage = 'Failed to save playlists',
+            renderOptions,
+            renderAfterSave = true,
+        } = {},
     ) {
         const saved = await sessionService.saveUserPlaylists(updatedPlaylists)
         if (!saved) {
@@ -310,289 +222,15 @@ export function initializePlaylistPage() {
 
         playlists = updatedPlaylists
         setActivePlaylistState(activeId)
-        render()
-        return true
-    }
-
-    function closeAllTrackMenus() {
-        body.querySelectorAll('.playlistTrackMenu.is-open').forEach((menu) => {
-            menu.classList.remove('is-open')
-            menu.closest('.playlistTrackActions')?.classList.remove('is-menu-open')
-            menu.closest('.playlistTrackActionsCell')?.classList.remove('is-menu-open')
-            menu.closest('.playlistTrackRow')?.classList.remove('is-menu-open')
-        })
-    }
-
-    function attachTrackActionHandlers() {
-        if (trackActionsDelegated) return
-
-        const onBodyClick = async (event) => {
-            const menuButton = event.target.closest('.playlistTrackMoreBtn')
-            if (menuButton && body.contains(menuButton)) {
-                event.stopPropagation()
-                event.preventDefault()
-
-                const trackIndex = getDataAttributeIndex(menuButton, 'data-track-index')
-                if (trackIndex === null) {
-                    return
-                }
-
-                const menu = body.querySelector(
-                    `.playlistTrackMenu[data-track-index="${trackIndex}"]`,
-                )
-                if (!menu) {
-                    return
-                }
-
-                const isOpen = menu.classList.contains('is-open')
-                closeAllTrackMenus()
-                if (!isOpen) {
-                    menu.classList.add('is-open')
-                    menu.closest('.playlistTrackActions')?.classList.add('is-menu-open')
-                    menu.closest('.playlistTrackActionsCell')?.classList.add('is-menu-open')
-                    menu.closest('.playlistTrackRow')?.classList.add('is-menu-open')
-                }
-                return
-            }
-
-            const removeButton = event.target.closest('.removeTrackBtn')
-            if (removeButton && body.contains(removeButton)) {
-                event.stopPropagation()
-                event.preventDefault()
-
-                const trackIndex = getDataAttributeIndex(removeButton, 'data-track-index')
-                const activePlaylist = getActivePlaylist()
-                if (!activePlaylist || trackIndex === null) {
-                    return
-                }
-
-                const nextTracks = Array.isArray(activePlaylist.tracks)
-                    ? activePlaylist.tracks.filter((_, index) => index !== trackIndex)
-                    : []
-
-                const updatedPlaylists = playlists.map((playlist) => {
-                    if (playlist.id !== activePlaylist.id) {
-                        return playlist
-                    }
-
-                    return {
-                        ...playlist,
-                        tracks: nextTracks,
-                        updatedAt: new Date().toISOString(),
-                    }
-                })
-
-                await savePlaylistsAndRender(updatedPlaylists, {
-                    activeId: activePlaylist.id,
-                    errorMessage: 'Failed to save updated playlists when removing track',
-                })
-                return
-            }
-
-            const playButton = event.target.closest('.playlistTrackIndexPlayBtn')
-            if (playButton && body.contains(playButton)) {
-                event.stopPropagation()
-                event.preventDefault()
-
-                const trackIndex = getDataAttributeIndex(playButton, 'data-track-index')
-                const activePlaylist = getActivePlaylist()
-                if (!activePlaylist || trackIndex === null) {
-                    return
-                }
-
-                const queueFilePaths = Array.isArray(activePlaylist.tracks)
-                    ? activePlaylist.tracks
-                          .slice(trackIndex)
-                          .map((track) => track?.filePath)
-                          .filter(Boolean)
-                    : []
-
-                if (queueFilePaths.length) {
-                    audioService.startPlaylist(queueFilePaths)
-                }
-            }
-        }
-
-        const onDocumentClick = () => {
-            closeAllTrackMenus()
-        }
-
-        body.addEventListener('click', onBodyClick)
-        document.addEventListener('click', onDocumentClick)
-        cleanupTrackActions = () => {
-            body.removeEventListener('click', onBodyClick)
-            document.removeEventListener('click', onDocumentClick)
-            trackActionsDelegated = false
-        }
-        trackActionsDelegated = true
-    }
-
-    function initializeSortableIfNeeded() {
-        if (!body) return
-
-        if (sortableInstance) return
-
-        if (typeof createPlaylistSortable !== 'function') return
-
-        try {
-            sortableInstance = createPlaylistSortable({
-                body,
-                getActivePlaylist,
-                getPlaylists: () => playlists,
-                onReorder: async (updatedPlaylists) => {
-                    // capture previous state for undo
-                    const previousPlaylists = playlists.map((p) => ({
-                        ...p,
-                        tracks: Array.isArray(p.tracks) ? p.tracks.slice() : p.tracks,
-                    }))
-
-                    isSavingPlaylistOrder = true
-                    try {
-                        const saved = await sessionService.saveUserPlaylists(updatedPlaylists)
-                        if (!saved) {
-                            console.error('Failed to save reordered playlist')
-                            render()
-                            return
-                        }
-
-                        // push undo action (closure uses previousPlaylists)
-                        pushUndo(
-                            async () => {
-                                isSavingPlaylistOrder = true
-                                try {
-                                    const undone =
-                                        await sessionService.saveUserPlaylists(previousPlaylists)
-                                    if (!undone) {
-                                        console.error('Failed to undo playlist reorder')
-                                        return
-                                    }
-
-                                    playlists = previousPlaylists
-                                    setActivePlaylistState(
-                                        getActivePlaylist()?.id || activePlaylistId,
-                                    )
-                                    render()
-                                } catch (err) {
-                                    console.error('Error while undoing playlist reorder', err)
-                                } finally {
-                                    isSavingPlaylistOrder = false
-                                }
-                            },
-                            { label: 'Undo playlist reorder' },
-                        )
-
-                        playlists = updatedPlaylists
-                        setActivePlaylistState(getActivePlaylist()?.id || activePlaylistId)
-                        render()
-                    } catch (e) {
-                        console.error('Failed to save reordered playlist', e)
-                        render()
-                        return
-                    } finally {
-                        isSavingPlaylistOrder = false
-                    }
-                },
-            })
-        } catch (err) {
-            console.error('Failed to initialize Sortable', err)
+        if (renderAfterSave) {
+            render(renderOptions)
         }
-    }
-
-    function getTrackDurationFromRecord(track) {
-        if (typeof track?.duration === 'number' && track.duration > 0) {
-            return track.duration
-        }
-
-        const filePath =
-            typeof track === 'string'
-                ? track.trim()
-                : typeof track?.filePath === 'string'
-                  ? track.filePath.trim()
-                  : ''
-
-        return filePath ? durationCache.get(filePath) : null
-    }
-
-    function updateDurationCell(index, duration) {
-        const durationCell = body.querySelector(`td[data-duration-index="${index}"]`)
-        if (durationCell) {
-            durationCell.textContent = formatDurationClock(duration)
-        }
-
-        const cached = virtualRowCache.get(index)
-        if (cached) {
-            cached.duration = duration
-        }
-    }
-
-    function cancelPendingDurationCellUpdates() {
-        if (durationCellsRaf) {
-            cancelAnimationFrame(durationCellsRaf)
-            durationCellsRaf = null
-        }
-        pendingDurationCellsRunId = null
-        pendingDurationCellIndexes.clear()
-    }
-
-    function scheduleDurationCellUpdate(trackIndex, runId) {
-        if (runId !== totalDurationRunId) {
-            return
-        }
-
-        if (pendingDurationCellsRunId !== runId) {
-            cancelPendingDurationCellUpdates()
-            pendingDurationCellsRunId = runId
-        }
-
-        if (Number.isInteger(trackIndex)) {
-            pendingDurationCellIndexes.add(trackIndex)
-        }
-
-        if (durationCellsRaf) {
-            return
-        }
-
-        durationCellsRaf = requestAnimationFrame(() => {
-            durationCellsRaf = null
-            if (runId !== totalDurationRunId) {
-                pendingDurationCellsRunId = null
-                pendingDurationCellIndexes.clear()
-                return
-            }
-            renderDurationCellUpdates(Array.from(pendingDurationCellIndexes))
-            pendingDurationCellsRunId = null
-            pendingDurationCellIndexes.clear()
-        })
-    }
-
-    function renderDurationCellUpdates(trackIndexes) {
-        const activePlaylist = getActivePlaylist()
-        trackIndexes.forEach((trackIndex) => {
-            updateDurationCell(
-                trackIndex,
-                getTrackDurationFromRecord(activePlaylist?.tracks?.[trackIndex]),
-            )
-        })
-    }
-
-    function applyRowDecorations(rows) {
-        if (!rows.length) {
-            return
-        }
-
-        window.lucide?.createIcons({
-            nodes: rows.flatMap((row) => Array.from(row.querySelectorAll('[data-lucide]'))),
-        })
-        rows.forEach((row) => {
-            bindImageFallbacks({
-                scope: row,
-                selector: '.playlistTrackCover',
-            })
-        })
+        return true
     }
 
     function resetVirtualRows() {
-        cancelPendingDurationCellUpdates()
+        playlistDuration.cancelPendingDurationCellUpdates()
+        playlistArtwork.cancelArtworkHydration()
         virtualRowCache.clear()
         paddingTopRow = null
         paddingBottomRow = null
@@ -644,7 +282,7 @@ export function initializePlaylistPage() {
             return { node: cached.node, created: false }
         }
 
-        const normalizedTrack = normalizeTrackRecord(track)
+        const normalizedTrack = playlistArtwork.buildTrackRecordForRender(track)
         const node = renderTrackRow({
             index,
             track,
@@ -683,8 +321,8 @@ export function initializePlaylistPage() {
         const tracks = activePlaylist?.tracks || []
 
         if (!tracks.length) {
-            // Render a single empty-row node instead of string HTML
             resetVirtualRows()
+            renderedTrackIndexes = new Set()
             activeRenderedMode = 'empty'
             body.innerHTML = ''
             const tr = document.createElement('tr')
@@ -694,6 +332,7 @@ export function initializePlaylistPage() {
             td.textContent = 'No tracks in this playlist yet.'
             tr.appendChild(td)
             body.appendChild(tr)
+            applyNowPlayingHighlight()
             if (virtualizer && typeof virtualizer.setOptions === 'function') {
                 virtualizer.setOptions({
                     ...virtualizer.options,
@@ -709,22 +348,22 @@ export function initializePlaylistPage() {
                 activeRenderedMode = 'virtual'
             }
 
-            const scrollMargin = getPlaylistContentScrollMargin({
+            const scrollMargin = playlistScroll.getScrollMargin({
                 force: reason !== 'virtual-change',
             })
             if (!virtualizer) {
                 virtualizer = createPlaylistVirtualizer({
                     count: tracks.length,
-                    getScrollElement: getAppScrollElement,
+                    getScrollElement: playlistScroll.getScrollElement,
                     estimateSize: () => PLAYLIST_TRACK_ROW_HEIGHT,
                     overscan: PLAYLIST_TRACK_OVERSCAN,
                     scrollMargin,
-                    initialOffset: getAppScrollTop,
+                    initialOffset: playlistScroll.getScrollTop,
                     initialRect: {
                         width: trackContainer.clientWidth || window.innerWidth || 0,
-                        height: getAppViewportHeight(),
+                        height: playlistScroll.getViewportHeight(),
                     },
-                    onChange: scheduleTrackRender,
+                    onChange: playlistScroll.scheduleRender,
                 })
             } else if (typeof virtualizer.setOptions === 'function') {
                 const options = virtualizer.options || {}
@@ -761,7 +400,7 @@ export function initializePlaylistPage() {
             virtualItems.forEach((virtualItem) => {
                 const index = virtualItem.index
                 const track = tracks[index]
-                const duration = getTrackDurationFromRecord(track)
+                const duration = playlistDuration.getTrackDurationFromRecord(track)
 
                 const rowResult = getCachedVirtualRow({
                     index,
@@ -787,11 +426,12 @@ export function initializePlaylistPage() {
                 paddingBottomRow = null
             }
 
+            renderedTrackIndexes = renderedIndexes
             trimVirtualRowCache(renderedIndexes)
 
             syncBodyChildren(renderedNodes)
 
-            applyRowDecorations(createdRows)
+            playlistArtwork.applyRowDecorations(createdRows)
         } else {
             if (activeRenderedMode !== 'full') {
                 resetVirtualRows()
@@ -805,10 +445,11 @@ export function initializePlaylistPage() {
 
             const fragment = document.createDocumentFragment()
             const renderedRows = []
+            const nextRenderedTrackIndexes = new Set()
             for (let i = 0; i < tracks.length; i++) {
                 const track = tracks[i]
-                const normalizedTrack = normalizeTrackRecord(track)
-                const duration = getTrackDurationFromRecord(normalizedTrack)
+                const normalizedTrack = playlistArtwork.buildTrackRecordForRender(track)
+                const duration = playlistDuration.getTrackDurationFromRecord(normalizedTrack)
                 const row = renderTrackRow({
                     index: i,
                     track,
@@ -817,58 +458,38 @@ export function initializePlaylistPage() {
                 })
 
                 renderedRows.push(row)
+                nextRenderedTrackIndexes.add(i)
                 fragment.appendChild(row)
             }
 
-            // replace tbody content with constructed fragment
+            renderedTrackIndexes = nextRenderedTrackIndexes
             body.replaceChildren(fragment)
-            applyRowDecorations(renderedRows)
+            playlistArtwork.applyRowDecorations(renderedRows)
         }
 
-        if (reason !== 'virtual-change') {
-            attachTrackActionHandlers()
-            initializeSortableIfNeeded()
-        }
-    }
+        applyNowPlayingHighlight()
 
-    function renderHeader(activePlaylist) {
-        const renderHeaderIcon = () => {
-            window.lucide?.createIcons({ nodes: [imageEditButton] })
-        }
-
-        if (!activePlaylist) {
-            title.textContent = 'No playlist selected'
-            trackCountElement.textContent = 'Choose a playlist from your library.'
-            durationElement.textContent = ''
-            imageEditButton.disabled = true
-            bindImageFallback(image)
-            image.src = './assets/music-placeholder.png'
-            renderHeaderIcon()
-            return
+        if (reason !== 'virtual-change') {
+            playlistActions.attach()
         }
-
-        const playlistImage = resolvePlaylistImage(activePlaylist)
-        title.textContent = activePlaylist.name || 'Untitled Playlist'
-        const trackCount = activePlaylist.tracks?.length || 0
-        trackCountElement.textContent = `${trackCount} ${trackCount === 1 ? 'song' : 'songs'}`
-        imageEditButton.disabled = false
-
-        bindImageFallback(image)
-        image.src = playlistImage
-        renderHeaderIcon()
     }
 
-    function render() {
+    function render({ skipPlaylistArtworkHydration = false, skipTotalDuration = false } = {}) {
         const activePlaylist = getActivePlaylist()
-        renderHeader(activePlaylist)
+        playlistHeader.render(activePlaylist, { hydrateArtwork: !skipPlaylistArtworkHydration })
         renderTracks(activePlaylist, 'route-render')
-        renderTotalDuration(activePlaylist)
+        if (skipTotalDuration) {
+            playlistDuration.cancelTotalDuration()
+        } else {
+            playlistDuration.renderTotalDuration(activePlaylist)
+        }
         renderPlayButtonIcon()
     }
 
     async function hydrate() {
         try {
-            window.loader?.show('Loading playlists...')
+            window.loader?.show({ text: 'Loading playlists...', count: 8, variant: 'playlist' })
+            await waitForPlaylistSkeletonPaint()
             try {
                 await loadPlaylistVirtualCore()
             } catch (error) {
@@ -881,8 +502,8 @@ export function initializePlaylistPage() {
             const loadedPlaylists = await sessionService.loadUserPlaylists()
 
             playlists = Array.isArray(loadedPlaylists) ? loadedPlaylists : []
-
-            // window.loader?.setMessage('Preparing playlist...')
+            primePlaylistDurationCache(playlists)
+            primePlaylistArtworkCache(playlists)
 
             if (!activePlaylistId && playlists.length > 0) {
                 activePlaylistId = playlists[0].id
@@ -899,8 +520,6 @@ export function initializePlaylistPage() {
 
             render()
 
-            // window.loader?.setMessage('Finalizing...')
-
             window.loader?.hide()
         } catch (err) {
             console.error(err)
@@ -919,82 +538,43 @@ export function initializePlaylistPage() {
         audioService.startPlaylist(filePaths)
     })
 
-    imageEditButton.addEventListener('click', async () => {
-        const activePlaylist = getActivePlaylist()
-        if (!activePlaylist || typeof window.electronAPI?.selectImageFile !== 'function') {
+    const onPlaylistsUpdated = () => {
+        if (
+            playlistActions.isSavingPlaylistOrder() ||
+            playlistHeader.isSavingPlaylistImage() ||
+            playlistHeader.isSavingPlaylistCover() ||
+            playlistHeader.isSavingPlaylistName() ||
+            isPlaylistDurationPersisting() ||
+            isPlaylistArtworkPersisting()
+        ) {
             return
         }
-
-        try {
-            const selectedImagePath = await window.electronAPI.selectImageFile()
-            const banner = toFileUrl(selectedImagePath)
-            if (!banner) {
-                return
-            }
-
-            const now = new Date().toISOString()
-            const updatedPlaylists = playlists.map((playlist) => {
-                if (playlist.id !== activePlaylist.id) {
-                    return playlist
-                }
-
-                return {
-                    ...playlist,
-                    banner,
-                    updatedAt: now,
-                }
-            })
-
-            isSavingPlaylistImage = true
-            await savePlaylistsAndRender(updatedPlaylists, {
-                activeId: activePlaylist.id,
-                errorMessage: 'Failed to save playlist image',
-            })
-        } catch (error) {
-            console.error('Failed to update playlist image', error)
-        } finally {
-            isSavingPlaylistImage = false
-        }
-    })
-
-    const onPlaylistsUpdated = () => {
-        if (isSavingPlaylistOrder || isSavingPlaylistImage) return
         if (isRouteActive(['playlist', 'queue'])) {
             hydrate()
         }
     }
+    const unsubscribePlayerState = playerState.subscribe((snapshot) => {
+        playbackSnapshot = snapshot
+        applyNowPlayingHighlight()
+    })
     window.addEventListener('user-playlists:updated', onPlaylistsUpdated)
-    // Attach global undo shortcut for this page (Ctrl+Z)
     attachUndoShortcut()
-    observePlaylistLayoutForScrollMargin()
+    playlistHeader.attachImageEditHandler()
+    playlistHeader.attachTitleEditHandler()
+    playlistScroll.observe()
 
     const cleanup = () => {
-        totalDurationRunId += 1
-        cancelPendingDurationCellUpdates()
+        playlistDuration.cancelTotalDuration()
+        playlistArtwork.cancelArtworkHydration()
+        if (typeof unsubscribePlayerState === 'function') {
+            unsubscribePlayerState()
+        }
         window.removeEventListener('user-playlists:updated', onPlaylistsUpdated)
-        window.removeEventListener('resize', invalidatePlaylistScrollMargin)
-        image.removeEventListener('load', invalidatePlaylistScrollMargin)
-        image.removeEventListener('error', invalidatePlaylistScrollMargin)
-        playlistLayoutResizeObserver?.disconnect()
-        playlistLayoutResizeObserver = null
+        playlistScroll.cleanup()
+        playlistHeader.cleanup()
         detachUndoShortcut()
-        if (sortableInstance && typeof sortableInstance.destroy === 'function') {
-            try {
-                sortableInstance.destroy()
-            } catch (e) {
-                console.error('Failed to destroy Sortable instance during cleanup', e)
-            }
-            sortableInstance = null
-        }
-        if (typeof cleanupTrackActions === 'function') {
-            cleanupTrackActions()
-            cleanupTrackActions = null
-        }
+        playlistActions.detach()
         if (virtualizer) {
-            if (scrollRaf) {
-                cancelAnimationFrame(scrollRaf)
-                scrollRaf = null
-            }
             virtualizer.destroy?.()
             virtualizer = null
         }
diff --git a/ui/pages/queue/queue.js b/ui/pages/queue/queue.js
index f145683..148c291 100644
--- a/ui/pages/queue/queue.js
+++ b/ui/pages/queue/queue.js
@@ -7,6 +7,9 @@ import {
 } from '../../utils/dom-helpers.js'
 import { DEFAULT_TRACK_TITLE, DEFAULT_TRACK_ARTIST } from '../../utils/track-record.js'
 
+const QUEUE_METADATA_WORKERS = 4
+const QUEUE_UPCOMING_RENDER_LIMIT = 200
+
 export function initializeQueuePage() {
     const nowPlayingList = document.getElementById('queueNowPlaying')
     const upcomingList = document.getElementById('queueUpcoming')
@@ -18,21 +21,32 @@ export function initializeQueuePage() {
     }
 
     const placeholderCover = audioService?.placeholderCover || './assets/music-placeholder.png'
-    let lastRenderKey = ''
+    let lastRenderKey = null
     let renderToken = 0
     let alive = true
 
     function getRenderKey(snapshot) {
         const playlist = Array.isArray(snapshot?.playlist) ? snapshot.playlist : []
         const current = snapshot?.currentTrack || {}
-        return JSON.stringify({
+        return {
             playlist,
             currentTrackIndex: snapshot?.currentTrackIndex,
             currentFilePath: current.filePath || '',
             currentTitle: current.title || '',
             currentArtist: current.artist || '',
             currentImage: current.image || '',
-        })
+        }
+    }
+
+    function areRenderKeysEqual(previous, next) {
+        return (
+            previous?.playlist === next?.playlist &&
+            previous?.currentTrackIndex === next?.currentTrackIndex &&
+            previous?.currentFilePath === next?.currentFilePath &&
+            previous?.currentTitle === next?.currentTitle &&
+            previous?.currentArtist === next?.currentArtist &&
+            previous?.currentImage === next?.currentImage
+        )
     }
 
     function createQueueHint(message) {
@@ -114,26 +128,39 @@ export function initializeQueuePage() {
         }
     }
 
-    async function hydrateMetadata(playlist, token) {
-        const tasks = playlist.map(async (filePath, index) => {
-            if (!filePath) {
-                return
-            }
+    async function hydrateMetadata(playlist, token, trackIndexes) {
+        const indexes = Array.isArray(trackIndexes) ? trackIndexes : []
+        let nextIndex = 0
 
-            const metadata = await audioService.resolveTrackMetadata(filePath)
-            if (!alive || token !== renderToken) {
-                return
+        const worker = async () => {
+            while (alive && token === renderToken && nextIndex < indexes.length) {
+                const index = indexes[nextIndex]
+                nextIndex += 1
+                const filePath = playlist[index]
+
+                if (!filePath) {
+                    continue
+                }
+
+                const metadata = await audioService.resolveTrackMetadata(filePath, {
+                    includeImage: true,
+                })
+                if (!alive || token !== renderToken) {
+                    return
+                }
+
+                updateQueueItemAtIndex(index, metadata)
             }
+        }
 
-            updateQueueItemAtIndex(index, metadata)
-        })
+        const workerCount = Math.min(QUEUE_METADATA_WORKERS, indexes.length)
 
-        await Promise.all(tasks)
+        await Promise.all(Array.from({ length: workerCount }, () => worker()))
     }
 
     function render(snapshot = playerState.getState()) {
         const renderKey = getRenderKey(snapshot)
-        if (renderKey === lastRenderKey) {
+        if (areRenderKeysEqual(lastRenderKey, renderKey)) {
             return
         }
         lastRenderKey = renderKey
@@ -156,9 +183,17 @@ export function initializeQueuePage() {
 
         const nowPlayingPath = currentTrackIndex >= 0 ? playlist[currentTrackIndex] : null
         const upcomingStart = currentTrackIndex >= 0 ? currentTrackIndex + 1 : 0
-        const upcoming = playlist
-            .map((filePath, index) => ({ filePath, index }))
-            .filter((entry) => entry.index >= upcomingStart)
+        const renderedTrackIndexes = []
+        if (currentTrackIndex >= 0) {
+            renderedTrackIndexes.push(currentTrackIndex)
+        }
+
+        const upcoming = []
+        const upcomingEnd = Math.min(playlist.length, upcomingStart + QUEUE_UPCOMING_RENDER_LIMIT)
+        for (let index = upcomingStart; index < upcomingEnd; index += 1) {
+            upcoming.push({ filePath: playlist[index], index })
+            renderedTrackIndexes.push(index)
+        }
 
         if (nowPlayingPath) {
             const metadata = audioService.getTrackDisplayData(nowPlayingPath)
@@ -221,7 +256,7 @@ export function initializeQueuePage() {
             selector: '.queueCover',
         })
 
-        hydrateMetadata(playlist, token).catch((error) => {
+        hydrateMetadata(playlist, token, renderedTrackIndexes).catch((error) => {
             console.error('Failed to hydrate queue metadata:', error)
         })
     }
diff --git a/ui/script.js b/ui/script.js
index 693b51d..cb3585f 100644
--- a/ui/script.js
+++ b/ui/script.js
@@ -9,7 +9,7 @@ import { initializeLibraryPage } from './pages/library/library.js'
 import { initializePlaylistPage } from './pages/playlist/playlist.js'
 import { initializeQueuePage } from './pages/queue/queue.js'
 import { initializePlayer } from './components/bottom-player/player.js'
-import { initializeLoadingScreen } from './components/loading/loading.js'
+import { initializeLoadingScreen } from './components/skeleton-screen/skeleton.js'
 
 const selectFileButton = document.getElementById('selectFile')
 const openFolderButton = document.getElementById('selectFolder')
diff --git a/ui/services/audio-service.js b/ui/services/audio-service.js
index 0521d26..47b4399 100644
--- a/ui/services/audio-service.js
+++ b/ui/services/audio-service.js
@@ -10,7 +10,9 @@ export const audioService = (() => {
     const UNKNOWN_ALBUM_LABEL = 'Unknown Album'
     const Howl = window.Howl
     const Howler = window.Howler
+    const METADATA_CACHE_LIMIT = 240
     const metadataCache = new Map()
+    const artworkCache = new Map()
     const metadataInFlight = new Map()
 
     let currentSound = null
@@ -74,7 +76,44 @@ export const audioService = (() => {
     //     })
     // }
 
-    async function readMetadata(filePath, fallbackTitle) {
+    function rememberMetadata(filePath, metadata) {
+        if (metadataCache.has(filePath)) {
+            metadataCache.delete(filePath)
+        }
+
+        metadataCache.set(filePath, {
+            ...metadata,
+            image: null,
+        })
+
+        if (metadataCache.size <= METADATA_CACHE_LIMIT) {
+            return
+        }
+
+        const oldestKey = metadataCache.keys().next().value
+        if (oldestKey) {
+            metadataCache.delete(oldestKey)
+        }
+    }
+
+    function rememberArtwork(filePath, image) {
+        if (artworkCache.has(filePath)) {
+            artworkCache.delete(filePath)
+        }
+
+        artworkCache.set(filePath, image || '')
+
+        if (artworkCache.size <= METADATA_CACHE_LIMIT) {
+            return
+        }
+
+        const oldestKey = artworkCache.keys().next().value
+        if (oldestKey) {
+            artworkCache.delete(oldestKey)
+        }
+    }
+
+    async function readMetadata(filePath, fallbackTitle, { includeImage = false } = {}) {
         if (!window.electronAPI?.readAudioMetadata) {
             logMetadataDebug(filePath, 'metadata-api-missing', {
                 fallbackTitle,
@@ -83,7 +122,7 @@ export const audioService = (() => {
         }
 
         try {
-            const rawTags = await window.electronAPI.readAudioMetadata(filePath)
+            const rawTags = await window.electronAPI.readAudioMetadata(filePath, { includeImage })
 
             if (!rawTags) {
                 logMetadataDebug(filePath, 'metadata-empty', {
@@ -121,6 +160,24 @@ export const audioService = (() => {
             ? Number(positionOverride)
             : Number(currentSound?.seek?.() || 0)
 
+        const currentTrackPath = playlist[currentTrackIndex]
+        let currentTrackOccurrence = 0
+        if (currentTrackPath && Array.isArray(playlist)) {
+            currentTrackOccurrence = playlist
+                .slice(0, currentTrackIndex + 1)
+                .reduce((count, filePath) => (filePath === currentTrackPath ? count + 1 : count), 0)
+        }
+
+        if (typeof sessionService.savePlaybackPosition === 'function') {
+            sessionService.savePlaybackPosition(
+                currentTrackIndex,
+                Math.max(0, position),
+                currentTrackPath,
+                currentTrackOccurrence,
+            )
+            return
+        }
+
         sessionService.savePlaylist(playlist, currentTrackIndex, Math.max(0, position))
     }
 
@@ -131,39 +188,51 @@ export const audioService = (() => {
         }, 1000)
     }
 
-    async function resolveTrackMetadata(filePath) {
+    async function resolveTrackMetadata(filePath, options = {}) {
         if (!filePath) {
             return buildFallbackTrackData(filePath)
         }
 
-        if (metadataCache.has(filePath)) {
+        const includeImage = options.includeImage === true
+        if (!includeImage && metadataCache.has(filePath)) {
             return metadataCache.get(filePath)
         }
 
-        if (metadataInFlight.has(filePath)) {
-            return metadataInFlight.get(filePath)
+        if (includeImage && artworkCache.has(filePath)) {
+            return {
+                ...(metadataCache.get(filePath) || buildFallbackTrackData(filePath)),
+                image: artworkCache.get(filePath) || null,
+            }
+        }
+
+        const cacheKey = `${includeImage ? 'image' : 'text'}:${filePath}`
+        if (metadataInFlight.has(cacheKey)) {
+            return metadataInFlight.get(cacheKey)
         }
 
         const fallback = buildFallbackTrackData(filePath)
-        const metadataPromise = readMetadata(filePath, fallback.title)
+        const metadataPromise = readMetadata(filePath, fallback.title, { includeImage })
             .then((metadata) => {
                 const safeMetadata = {
                     title: metadata?.title || fallback.title,
                     artist: metadata?.artist || fallback.artist,
                     album: metadata?.album || fallback.album,
-                    image: metadata?.image || null,
+                    image: includeImage ? metadata?.image || null : null,
                 }
-                metadataCache.set(filePath, safeMetadata)
-                metadataInFlight.delete(filePath)
+                rememberMetadata(filePath, safeMetadata)
+                if (includeImage) {
+                    rememberArtwork(filePath, safeMetadata.image)
+                }
+                metadataInFlight.delete(cacheKey)
                 return safeMetadata
             })
             .catch((error) => {
-                metadataInFlight.delete(filePath)
+                metadataInFlight.delete(cacheKey)
                 logMetadataDebug(filePath, 'metadata-cache-error', { error: String(error) })
                 return fallback
             })
 
-        metadataInFlight.set(filePath, metadataPromise)
+        metadataInFlight.set(cacheKey, metadataPromise)
         return metadataPromise
     }
 
@@ -185,7 +254,7 @@ export const audioService = (() => {
             return
         }
 
-        resolveTrackMetadata(nextFilePath).catch(() => {
+        resolveTrackMetadata(nextFilePath, { includeImage: false }).catch(() => {
             // Ignore prewarm failures; playback should not be blocked by metadata.
         })
     }
@@ -202,9 +271,21 @@ export const audioService = (() => {
         }
     }
 
-    function playNextInQueue() {
+    function playNextInQueue({ reason = 'next' } = {}) {
         if (!state) return
-        const { currentTrackIndex, playlist } = state.getState()
+        const { currentTrackIndex, playlist, loopEnabled } = state.getState()
+
+        if (reason === 'ended' && loopEnabled && Number.isInteger(currentTrackIndex)) {
+            if (currentTrackIndex >= 0 && currentTrackIndex < playlist.length) {
+                playTrackAtIndex(currentTrackIndex, {
+                    autoplay: true,
+                    startAtSeconds: 0,
+                    addToRecentTracks: false,
+                })
+                return
+            }
+        }
+
         const nextIndex = currentTrackIndex + 1
         if (nextIndex >= playlist.length) {
             if (currentSound) {
@@ -291,7 +372,7 @@ export const audioService = (() => {
                 savePlaybackSnapshot()
                 stopPlaybackPersistTracking()
             },
-            onend: () => playNextInQueue(),
+            onend: () => playNextInQueue({ reason: 'ended' }),
             onseek: () => {
                 savePlaybackSnapshot()
             },
@@ -306,7 +387,7 @@ export const audioService = (() => {
 
         // Resolve rich metadata in background so playback is not blocked by file reads/decoding.
         const expectedFilePath = filePath
-        resolveTrackMetadata(filePath)
+        resolveTrackMetadata(filePath, { includeImage: true })
             .then((trackData) => {
                 const { playlist: latestPlaylist, currentTrackIndex } = state.getState()
                 const isSameTrack =
@@ -447,7 +528,7 @@ export const audioService = (() => {
         startPlaylist,
         startSingleTrack,
         togglePlayPause,
-        playNext: playNextInQueue,
+        playNext: (options = {}) => playNextInQueue(options),
         playPrevious: () => {
             playPrevious()
         },
diff --git a/ui/services/session-service.js b/ui/services/session-service.js
index 2be17ab..18886bb 100644
--- a/ui/services/session-service.js
+++ b/ui/services/session-service.js
@@ -1,4 +1,5 @@
 import { getBaseName } from '../utils/file-path.js'
+import { normalizePlaylistImageValue, resolveTrackImage } from '../utils/playlist-media.js'
 import { normalizeTrackRecord } from '../utils/track-record.js'
 
 export const sessionService = (() => {
@@ -9,6 +10,17 @@ export const sessionService = (() => {
     const USER_PLAYLISTS_KEY = 'musichub:user-playlists'
     //storing data under C:\Users\<user>\AppData\Roaming\Blueberry Music Player\
     const RECENT_FOLDER_PLAYLISTS_KEY = 'musichub:recent-folder-playlists'
+    const EMBEDDED_IMAGE_PREFIX = 'data:image/'
+
+    function compactStorageValue(key, normalized) {
+        window.setTimeout(() => {
+            try {
+                window.localStorage.setItem(key, JSON.stringify(normalized))
+            } catch (error) {
+                console.error('Failed to compact stored playlist data:', error)
+            }
+        }, 0)
+    }
 
     function normalizeRecentFolderPlaylistTracks(tracks) {
         if (!Array.isArray(tracks)) {
@@ -29,6 +41,27 @@ export const sessionService = (() => {
             .slice(0, MAX_RECENT_FOLDER_TRACKS)
     }
 
+    function resolveStoredPlaylistCover(playlist) {
+        return (
+            normalizePlaylistImageValue(playlist?.cover) ||
+            normalizePlaylistImageValue(playlist?.fallbackCover) ||
+            normalizePlaylistImageValue(playlist?.image) ||
+            normalizePlaylistImageValue(playlist?.artwork)
+        )
+    }
+
+    function resolveFirstTrackCover(tracks) {
+        if (!Array.isArray(tracks)) {
+            return ''
+        }
+
+        return (
+            tracks
+                .map((track) => normalizePlaylistImageValue(resolveTrackImage(track)))
+                .find(Boolean) || ''
+        )
+    }
+
     function parseIsoDateToNumber(value) {
         const parsed = Date.parse(value)
         return Number.isFinite(parsed) ? parsed : 0
@@ -52,6 +85,7 @@ export const sessionService = (() => {
                     return null
                 }
 
+                const cover = resolveStoredPlaylistCover(playlist) || resolveFirstTrackCover(tracks)
                 const now = new Date().toISOString()
                 return {
                     id:
@@ -63,6 +97,7 @@ export const sessionService = (() => {
                         typeof playlist?.name === 'string' && playlist.name.trim()
                             ? playlist.name.trim()
                             : getBaseName(folderPath, 'Folder Playlist'),
+                    cover,
                     tracks,
                     createdAt: typeof playlist?.createdAt === 'string' ? playlist.createdAt : now,
                     updatedAt: typeof playlist?.updatedAt === 'string' ? playlist.updatedAt : now,
@@ -158,6 +193,33 @@ export const sessionService = (() => {
         }
     }
 
+    async function savePlaybackPosition(
+        currentTrackIndex,
+        playbackPosition = 0,
+        currentTrackPath,
+        currentTrackOccurrence,
+    ) {
+        if (!hasAPI('savePlaybackPosition')) {
+            return false
+        }
+
+        try {
+            return Boolean(
+                await window.electronAPI.savePlaybackPosition(
+                    Number.isInteger(currentTrackIndex) ? currentTrackIndex : -1,
+                    Math.max(0, Number(playbackPosition) || 0),
+                    typeof currentTrackPath === 'string' && currentTrackPath
+                        ? currentTrackPath
+                        : undefined,
+                    Number.isInteger(currentTrackOccurrence) ? currentTrackOccurrence : undefined,
+                ),
+            )
+        } catch (error) {
+            console.error('Failed to persist playback position:', error)
+            return false
+        }
+    }
+
     async function loadRecentTracks() {
         if (!hasAPI('loadRecentTracks')) {
             return []
@@ -165,7 +227,9 @@ export const sessionService = (() => {
 
         try {
             const tracks = await window.electronAPI.loadRecentTracks()
-            return Array.isArray(tracks) ? tracks : []
+            return Array.isArray(tracks)
+                ? tracks.map((track) => normalizeTrackRecord(track)).filter(Boolean)
+                : []
         } catch (error) {
             console.error('Failed to load recent tracks:', error)
             return []
@@ -178,7 +242,12 @@ export const sessionService = (() => {
         }
 
         try {
-            const safeTracks = Array.isArray(tracks) ? tracks.slice(0, MAX_RECENT_TRACKS) : []
+            const safeTracks = Array.isArray(tracks)
+                ? tracks
+                      .map((track) => normalizeTrackRecord(track))
+                      .filter(Boolean)
+                      .slice(0, MAX_RECENT_TRACKS)
+                : []
             const saved = await window.electronAPI.saveRecentTracks(safeTracks)
             if (saved) {
                 window.dispatchEvent(new CustomEvent('recent-tracks:updated'))
@@ -217,34 +286,42 @@ export const sessionService = (() => {
         }
     }
 
-    function normalizeUserPlaylists(playlists) {
+    function normalizeUserPlaylists(playlists, { initializeMissingCovers = false } = {}) {
         if (!Array.isArray(playlists)) {
             return []
         }
 
         return playlists
-            .map((playlist) => ({
-                id:
-                    typeof playlist?.id === 'string'
-                        ? playlist.id
-                        : `playlist-${Date.now()}-${Math.floor(Math.random() * 100000)}`,
-                name:
-                    typeof playlist?.name === 'string' && playlist.name.trim()
-                        ? playlist.name.trim()
-                        : 'Untitled Playlist',
-                banner: typeof playlist?.banner === 'string' ? playlist.banner : '',
-                tracks: Array.isArray(playlist?.tracks)
+            .map((playlist) => {
+                const tracks = Array.isArray(playlist?.tracks)
                     ? playlist.tracks.map((track) => normalizeTrackRecord(track)).filter(Boolean)
-                    : [],
-                createdAt:
-                    typeof playlist?.createdAt === 'string'
-                        ? playlist.createdAt
-                        : new Date().toISOString(),
-                updatedAt:
-                    typeof playlist?.updatedAt === 'string'
-                        ? playlist.updatedAt
-                        : new Date().toISOString(),
-            }))
+                    : []
+                const cover =
+                    resolveStoredPlaylistCover(playlist) ||
+                    (initializeMissingCovers ? resolveFirstTrackCover(tracks) : '')
+
+                return {
+                    id:
+                        typeof playlist?.id === 'string'
+                            ? playlist.id
+                            : `playlist-${Date.now()}-${Math.floor(Math.random() * 100000)}`,
+                    name:
+                        typeof playlist?.name === 'string' && playlist.name.trim()
+                            ? playlist.name.trim()
+                            : 'Untitled Playlist',
+                    banner: normalizePlaylistImageValue(playlist?.banner),
+                    cover,
+                    tracks,
+                    createdAt:
+                        typeof playlist?.createdAt === 'string'
+                            ? playlist.createdAt
+                            : new Date().toISOString(),
+                    updatedAt:
+                        typeof playlist?.updatedAt === 'string'
+                            ? playlist.updatedAt
+                            : new Date().toISOString(),
+                }
+            })
             .filter((playlist) => Boolean(playlist.id))
     }
 
@@ -256,7 +333,14 @@ export const sessionService = (() => {
             }
 
             const parsed = JSON.parse(raw)
-            return normalizeUserPlaylists(parsed)
+            const normalized = normalizeUserPlaylists(parsed, { initializeMissingCovers: true })
+            const initializedCovers = normalized.some(
+                (playlist, index) => playlist.cover && !resolveStoredPlaylistCover(parsed[index]),
+            )
+            if (raw.includes(EMBEDDED_IMAGE_PREFIX) || initializedCovers) {
+                compactStorageValue(USER_PLAYLISTS_KEY, normalized)
+            }
+            return normalized
         } catch (error) {
             console.error('Failed to load user playlists:', error)
             return []
@@ -318,6 +402,9 @@ export const sessionService = (() => {
         })
 
         if (appended) {
+            if (!target.banner && !target.cover) {
+                target.cover = resolveFirstTrackCover(target.tracks)
+            }
             target.updatedAt = new Date().toISOString()
         }
 
@@ -327,13 +414,15 @@ export const sessionService = (() => {
     async function createUserPlaylist({ name, banner = '' }) {
         const playlists = await loadUserPlaylists()
         const now = new Date().toISOString()
+        const safeBanner = normalizePlaylistImageValue(banner)
         const newPlaylist = {
             id: `playlist-${Date.now()}-${Math.floor(Math.random() * 100000)}`,
             name:
                 typeof name === 'string' && name.trim()
                     ? name.trim()
                     : `New Playlist ${playlists.length + 1}`,
-            banner: typeof banner === 'string' ? banner.trim() : '',
+            banner: safeBanner,
+            cover: '',
             tracks: [],
             createdAt: now,
             updatedAt: now,
@@ -370,13 +459,15 @@ export const sessionService = (() => {
 
         const playlists = await loadUserPlaylists()
         const now = new Date().toISOString()
+        const safeBanner = normalizePlaylistImageValue(banner)
         const newPlaylist = {
             id: `playlist-${Date.now()}-${Math.floor(Math.random() * 100000)}`,
             name:
                 typeof name === 'string' && name.trim()
                     ? name.trim()
                     : `New Playlist ${playlists.length + 1}`,
-            banner: typeof banner === 'string' ? banner.trim() : '',
+            banner: safeBanner,
+            cover: safeBanner ? '' : resolveFirstTrackCover(uniqueTracks),
             tracks: uniqueTracks,
             createdAt: now,
             updatedAt: now,
@@ -394,7 +485,11 @@ export const sessionService = (() => {
             }
 
             const parsed = JSON.parse(raw)
-            return normalizeRecentFolderPlaylists(parsed)
+            const normalized = normalizeRecentFolderPlaylists(parsed)
+            if (raw.includes(EMBEDDED_IMAGE_PREFIX)) {
+                compactStorageValue(RECENT_FOLDER_PLAYLISTS_KEY, normalized)
+            }
+            return normalized
         } catch (error) {
             console.error('Failed to load recent folder playlists:', error)
             return []
@@ -436,6 +531,7 @@ export const sessionService = (() => {
             ? {
                   ...existing,
                   name: safeName,
+                  cover: existing.cover || resolveFirstTrackCover(normalizedTracks),
                   tracks: normalizedTracks,
                   updatedAt: now,
               }
@@ -443,6 +539,7 @@ export const sessionService = (() => {
                   id: `recent-folder-${Date.now()}-${Math.floor(Math.random() * 100000)}`,
                   folderPath: safeFolderPath,
                   name: safeName,
+                  cover: resolveFirstTrackCover(normalizedTracks),
                   tracks: normalizedTracks,
                   createdAt: now,
                   updatedAt: now,
@@ -462,6 +559,7 @@ export const sessionService = (() => {
         saveVolume,
         loadPlaylist,
         savePlaylist,
+        savePlaybackPosition,
         loadRecentTracks,
         saveRecentTracks,
         prependRecentTrack,
diff --git a/ui/state/player-state.js b/ui/state/player-state.js
index 15737b2..878afd3 100644
--- a/ui/state/player-state.js
+++ b/ui/state/player-state.js
@@ -1,102 +1,173 @@
 export const playerState = (() => {
-	const state = {
-		playlist: [],
-		currentTrackIndex: -1,
-		isPlaying: false,
-		progress: {
-			currentTime: 0,
-			duration: 0,
-			percent: 0,
-		},
-		volume: 0.7,
-		currentTrack: {
-			filePath: null,
-			title: 'No song selected',
-			artist: 'Unknown artist',
-			image: './assets/music-placeholder.png',
-		},
-	}
+    const state = {
+        playlist: [],
+        currentTrackIndex: -1,
+        isPlaying: false,
+        loopEnabled: false,
+        progress: {
+            currentTime: 0,
+            duration: 0,
+            percent: 0,
+        },
+        volume: 0.7,
+        currentTrack: {
+            filePath: null,
+            title: 'No song selected',
+            artist: 'Unknown artist',
+            image: './assets/music-placeholder.png',
+        },
+    }
     const listeners = []
 
-	function cloneStateSnapshot() {
-		if (typeof structuredClone === 'function') {
-			return structuredClone(state)
-		}
-
-		return JSON.parse(JSON.stringify(state))
-	}
+    function createStateSnapshot() {
+        return {
+            playlist: state.playlist,
+            currentTrackIndex: state.currentTrackIndex,
+            isPlaying: state.isPlaying,
+            loopEnabled: state.loopEnabled,
+            progress: { ...state.progress },
+            volume: state.volume,
+            currentTrack: { ...state.currentTrack },
+        }
+    }
 
     function notify() {
-		const snapshot = cloneStateSnapshot()
-		listeners.forEach(fn => fn(snapshot))
+        const snapshot = createStateSnapshot()
+        listeners.slice().forEach((fn) => fn(snapshot))
     }
 
     function subscribe(fn) {
+        if (typeof fn !== 'function') {
+            return () => {}
+        }
+
         listeners.push(fn)
         return () => {
             const index = listeners.indexOf(fn)
             if (index >= 0) {
-            	listeners.splice(index, 1) // returns unsubscribe
-			}
-		} 
+                listeners.splice(index, 1)
+            }
+        }
     }
 
-
     function setIsPlaying(value) {
-        state.isPlaying = Boolean(value)
-        notify() //trigger at pause/play
+        const nextValue = Boolean(value)
+        if (state.isPlaying === nextValue) {
+            return
+        }
+
+        state.isPlaying = nextValue
+        notify()
     }
 
     function setProgress(progress) {
-        state.progress = { ...state.progress, ...progress }
+        const nextProgress = { ...state.progress, ...(progress || {}) }
+        if (
+            state.progress.currentTime === nextProgress.currentTime &&
+            state.progress.duration === nextProgress.duration &&
+            state.progress.percent === nextProgress.percent
+        ) {
+            return
+        }
+
+        state.progress = nextProgress
         notify()
     }
 
-	function setVolume(volume) {
-		state.volume = volume
-		notify()
-	}
-
-	function setCurrentTrack(track) {
-		state.currentTrack = { ...state.currentTrack, ...track }
-		notify()
-	}
-
-	function setPlaylist(filePaths) {
-		state.playlist = Array.isArray(filePaths) ? [...filePaths] : []
-        notify();
-	}
-
-	function setCurrentTrackIndex(index) {
-		state.currentTrackIndex = Number.isInteger(index) ? index : -1
-        notify();
-	}
-
-	function reset() {
-		setPlaylist([])
-		setCurrentTrackIndex(-1)
-		setIsPlaying(false)
-		setProgress({ currentTime: 0, duration: 0, percent: 0 })
-		setCurrentTrack({
-			filePath: null,
-			title: 'No song selected',
-			artist: 'Unknown artist',
-			image: './assets/music-placeholder.png',
-		})
-        notify();
-	}
-
-	return {
-		getState: () => cloneStateSnapshot(),
-		setPlaylist,
-		setCurrentTrackIndex,
-		setIsPlaying,
-		setProgress,
-		setCurrentTrack,
-		setVolume,
-		reset,
+    function setVolume(volume) {
+        if (state.volume === volume) {
+            return
+        }
+
+        state.volume = volume
+        notify()
+    }
+
+    function setLoopEnabled(value) {
+        const nextValue = Boolean(value)
+        if (state.loopEnabled === nextValue) {
+            return
+        }
+
+        state.loopEnabled = nextValue
+        notify()
+    }
+
+    function toggleLoopEnabled() {
+        setLoopEnabled(!state.loopEnabled)
+    }
+
+    function setCurrentTrack(track) {
+        const nextTrack = { ...state.currentTrack, ...(track || {}) }
+        if (
+            state.currentTrack.filePath === nextTrack.filePath &&
+            state.currentTrack.title === nextTrack.title &&
+            state.currentTrack.artist === nextTrack.artist &&
+            state.currentTrack.image === nextTrack.image
+        ) {
+            return
+        }
+
+        state.currentTrack = nextTrack
+        notify()
+    }
+
+    function arePlaylistsEqual(nextPlaylist) {
+        if (state.playlist.length !== nextPlaylist.length) {
+            return false
+        }
+
+        return state.playlist.every((filePath, index) => filePath === nextPlaylist[index])
+    }
+
+    function setPlaylist(filePaths) {
+        const nextPlaylist = Array.isArray(filePaths) ? [...filePaths] : []
+        if (arePlaylistsEqual(nextPlaylist)) {
+            return
+        }
+
+        state.playlist = nextPlaylist
+        notify()
+    }
+
+    function setCurrentTrackIndex(index) {
+        const nextIndex = Number.isInteger(index) ? index : -1
+        if (state.currentTrackIndex === nextIndex) {
+            return
+        }
+
+        state.currentTrackIndex = nextIndex
+        notify()
+    }
+
+    function reset() {
+        state.playlist = []
+        state.currentTrackIndex = -1
+        state.isPlaying = false
+        state.loopEnabled = false
+        state.progress = { currentTime: 0, duration: 0, percent: 0 }
+        state.currentTrack = {
+            filePath: null,
+            title: 'No song selected',
+            artist: 'Unknown artist',
+            image: './assets/music-placeholder.png',
+        }
+        notify()
+    }
+
+    return {
+        getState: createStateSnapshot,
+        setPlaylist,
+        setCurrentTrackIndex,
+        setIsPlaying,
+        setProgress,
+        setCurrentTrack,
+        setVolume,
+        setLoopEnabled,
+        toggleLoopEnabled,
+        reset,
         subscribe,
-	}
+    }
 })()
 
 window.playerState = playerState
diff --git a/ui/ui.css b/ui/ui.css
index d1b4a74..745cbd0 100644
--- a/ui/ui.css
+++ b/ui/ui.css
@@ -1,5 +1,10 @@
 :root {
     --font-base: 'Rubik', sans-serif;
+    --cursor-auto: url('./assets/cursor-auto.png') 2 2, auto;
+    --cursor-pointer-clicked: url('./assets/cursor-pointer-clicked.png') 9 1, pointer;
+    --cursor-grab: url('./assets/cursor-drag.png') 10 10, grab;
+    --cursor-grabbing: url('./assets/cursor-drag-clicked.png') 10 10, grabbing;
+    --cursor-text: url('./assets/cursor-text.png') 1 10, text;
 }
 
 #coverImage {
@@ -15,6 +20,46 @@ body {
     margin: 0;
     overflow: hidden;
     font-family: var(--font-base);
+    cursor: var(--cursor-auto);
+}
+
+button:not(:disabled),
+a[href],
+summary,
+[role='button']:not([aria-disabled='true']) {
+    cursor: var(--cursor-pointer-clicked) !important;
+}
+
+button:disabled,
+[aria-disabled='true'] {
+    cursor: var(--cursor-auto) !important;
+}
+
+.cursor-auto {
+    cursor: var(--cursor-auto) !important;
+}
+
+.cursor-pointer-clicked {
+    cursor: var(--cursor-pointer-clicked) !important;
+}
+
+.cursor-grab {
+    cursor: var(--cursor-grab) !important;
+}
+
+.cursor-grabbing {
+    cursor: var(--cursor-grabbing) !important;
+}
+
+html.cursor-grabbing,
+html.cursor-grabbing *,
+body.cursor-grabbing,
+body.cursor-grabbing * {
+    cursor: var(--cursor-grabbing) !important;
+}
+
+.cursor-text {
+    cursor: var(--cursor-text) !important;
 }
 
 #app-scroll {
diff --git a/ui/utils/artwork.js b/ui/utils/artwork.js
new file mode 100644
index 0000000..ee2781d
--- /dev/null
+++ b/ui/utils/artwork.js
@@ -0,0 +1,92 @@
+import {
+    DEFAULT_PLAYLIST_IMAGE,
+    resolvePlaylistImage,
+    resolveTrackImage,
+} from './playlist-media.js'
+import { normalizeTrackRecord } from './track-record.js'
+
+export async function resolveTrackArtwork(track, { audioService = window.audioService } = {}) {
+    const normalizedTrack = normalizeTrackRecord(track)
+    if (!normalizedTrack?.filePath) {
+        return ''
+    }
+
+    const existingImage = resolveTrackImage(normalizedTrack)
+    if (existingImage) {
+        return existingImage
+    }
+
+    if (typeof audioService?.resolveTrackMetadata !== 'function') {
+        return ''
+    }
+
+    const metadata = await audioService.resolveTrackMetadata(normalizedTrack.filePath, {
+        includeImage: true,
+    })
+    return metadata?.image || ''
+}
+
+export async function resolvePlaylistArtwork(
+    playlist,
+    { audioService = window.audioService } = {},
+) {
+    if (!playlist || typeof playlist !== 'object') {
+        return DEFAULT_PLAYLIST_IMAGE
+    }
+
+    const existingImage = resolvePlaylistImage(playlist)
+    if (existingImage && existingImage !== DEFAULT_PLAYLIST_IMAGE) {
+        return existingImage
+    }
+
+    const tracks = Array.isArray(playlist.tracks) ? playlist.tracks : []
+    const firstTrack = tracks.find((track) => normalizeTrackRecord(track)?.filePath)
+    const trackArtwork = firstTrack
+        ? await resolveTrackArtwork(firstTrack, { audioService })
+        : DEFAULT_PLAYLIST_IMAGE
+
+    return trackArtwork || DEFAULT_PLAYLIST_IMAGE
+}
+
+export async function hydrateImageWithTrackArtwork({
+    imageElement,
+    track,
+    audioService = window.audioService,
+} = {}) {
+    if (!imageElement?.isConnected) {
+        return ''
+    }
+
+    const artwork = await resolveTrackArtwork(track, { audioService })
+    if (artwork && imageElement.isConnected) {
+        imageElement.src = artwork
+    }
+
+    return artwork
+}
+
+export async function hydrateImageWithPlaylistArtwork({
+    imageElement,
+    playlist,
+    audioService = window.audioService,
+} = {}) {
+    if (!imageElement?.isConnected) {
+        return ''
+    }
+
+    const artwork = await resolvePlaylistArtwork(playlist, { audioService })
+    if (artwork && imageElement.isConnected) {
+        imageElement.src = artwork
+    }
+
+    return artwork
+}
+
+export const artworkUtils = {
+    resolveTrackArtwork,
+    resolvePlaylistArtwork,
+    hydrateImageWithTrackArtwork,
+    hydrateImageWithPlaylistArtwork,
+}
+
+window.artworkUtils = artworkUtils
diff --git a/ui/utils/cursor-interaction.js b/ui/utils/cursor-interaction.js
new file mode 100644
index 0000000..be247bc
--- /dev/null
+++ b/ui/utils/cursor-interaction.js
@@ -0,0 +1,22 @@
+export const cursorClasses = Object.freeze({
+    auto: 'cursor-auto',
+    pointerClicked: 'cursor-pointer-clicked',
+    grab: 'cursor-grab',
+    grabbing: 'cursor-grabbing',
+    text: 'cursor-text',
+})
+
+export const cursorInteractions = Object.freeze({
+    normal: cursorClasses.auto,
+    button: cursorClasses.pointerClicked,
+    clickable: cursorClasses.pointerClicked,
+    grab: cursorClasses.grab,
+    grabbing: cursorClasses.grabbing,
+    text: cursorClasses.text,
+})
+
+export const getCursorClass = (interaction = 'normal') =>
+    cursorInteractions[interaction] ?? cursorClasses[interaction] ?? cursorClasses.auto
+
+export const withCursorClass = (interaction, className = '') =>
+    [getCursorClass(interaction), className].filter(Boolean).join(' ')
diff --git a/ui/utils/playlist-media.js b/ui/utils/playlist-media.js
index 084c684..6a16934 100644
--- a/ui/utils/playlist-media.js
+++ b/ui/utils/playlist-media.js
@@ -1,13 +1,34 @@
 export const DEFAULT_PLAYLIST_IMAGE = './assets/music-placeholder.png'
 
+export function normalizePlaylistImageValue(value) {
+    if (typeof value !== 'string') {
+        return ''
+    }
+
+    const image = value.trim()
+    if (!image || image.startsWith('data:image/')) {
+        return ''
+    }
+
+    return image
+}
+
 export function resolveTrackImage(track) {
     if (!track || typeof track !== 'object') {
         return ''
     }
 
     const candidates = [track.image, track.artwork, track.cover, track.picture]
-    const match = candidates.find((value) => typeof value === 'string' && value.trim())
-    return match ? match.trim() : ''
+    return candidates.map(normalizePlaylistImageValue).find(Boolean) || ''
+}
+
+export function resolvePlaylistCover(playlist) {
+    if (!playlist || typeof playlist !== 'object') {
+        return ''
+    }
+
+    const candidates = [playlist.cover, playlist.fallbackCover, playlist.image, playlist.artwork]
+    return candidates.map(normalizePlaylistImageValue).find(Boolean) || ''
 }
 
 export function resolvePlaylistImage(playlist) {
@@ -15,8 +36,14 @@ export function resolvePlaylistImage(playlist) {
         return DEFAULT_PLAYLIST_IMAGE
     }
 
-    if (typeof playlist.banner === 'string' && playlist.banner.trim()) {
-        return playlist.banner.trim()
+    const banner = normalizePlaylistImageValue(playlist.banner)
+    if (banner) {
+        return banner
+    }
+
+    const cover = resolvePlaylistCover(playlist)
+    if (cover) {
+        return cover
     }
 
     const firstTrackWithImage = Array.isArray(playlist.tracks)
@@ -36,7 +63,9 @@ export function extractPlaylistFilePaths(playlist) {
 
 export const playlistMediaUtils = {
     DEFAULT_PLAYLIST_IMAGE,
+    normalizePlaylistImageValue,
     resolveTrackImage,
+    resolvePlaylistCover,
     resolvePlaylistImage,
     extractPlaylistFilePaths,
 }
diff --git a/ui/utils/route.js b/ui/utils/route.js
index 4503b13..7deb172 100644
--- a/ui/utils/route.js
+++ b/ui/utils/route.js
@@ -1,3 +1,4 @@
+// routing through pages
 export function getCurrentRoute(fallbackRoute = 'home') {
     const route = window.appRouter?.getCurrentRoute?.()
     if (typeof route === 'string' && route) {
diff --git a/ui/utils/track-record.js b/ui/utils/track-record.js
index 93fdef6..6e35abe 100644
--- a/ui/utils/track-record.js
+++ b/ui/utils/track-record.js
@@ -5,6 +5,19 @@ export const DEFAULT_TRACK_ARTIST = 'Unknown Artist'
 export const DEFAULT_TRACK_ALBUM = 'Unknown Album'
 export const DEFAULT_TRACK_IMAGE = ''
 
+function normalizeTrackImage(value) {
+    if (typeof value !== 'string') {
+        return DEFAULT_TRACK_IMAGE
+    }
+
+    const image = value.trim()
+    if (!image || image.startsWith('data:image/')) {
+        return DEFAULT_TRACK_IMAGE
+    }
+
+    return image
+}
+
 export function normalizeTrackRecord(track) {
     if (!track) {
         return null
@@ -37,7 +50,7 @@ export function normalizeTrackRecord(track) {
             typeof sourceTrack?.album === 'string' && sourceTrack.album.trim()
                 ? sourceTrack.album.trim()
                 : DEFAULT_TRACK_ALBUM,
-        image: typeof sourceTrack?.image === 'string' ? sourceTrack.image : DEFAULT_TRACK_IMAGE,
+        image: normalizeTrackImage(sourceTrack?.image),
     }
 
     if (typeof normalizedTrack.playedAt !== 'string') {