diff --git a/.gitignore b/.gitignore
index 49cffa89..28a16e55 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,5 +8,6 @@ explo
 src/web/dist/
 src/web/frontend/node_modules/
 /cache
-data/
+/data/
+/.data/
 .zed/
diff --git a/go.mod b/go.mod
index 5b3bc9e0..98ca6664 100644
--- a/go.mod
+++ b/go.mod
@@ -12,6 +12,7 @@ require (
 	github.com/u2takey/ffmpeg-go v0.5.0
 	github.com/wader/goutubedl v0.0.0-20250417150709-083444e4ab87
 	golang.org/x/crypto v0.46.0
+	golang.org/x/net v0.48.0
 	golang.org/x/sync v0.19.0
 	golang.org/x/text v0.32.0
 	maunium.net/go/mautrix v0.26.0
@@ -43,7 +44,6 @@ require (
 	github.com/u2takey/go-utils v0.3.1 // indirect
 	go.mau.fi/util v0.9.3 // indirect
 	golang.org/x/exp v0.0.0-20251209150349-8475f28825e9 // indirect
-	golang.org/x/net v0.48.0 // indirect
 	golang.org/x/sys v0.39.0 // indirect
 	gopkg.in/yaml.v3 v3.0.1 // indirect
 	olympos.io/encoding/edn v0.0.0-20201019073823-d3554ca0b0a3 // indirect
diff --git a/src/client/client.go b/src/client/client.go
index 3fa2875b..ee4ee841 100644
--- a/src/client/client.go
+++ b/src/client/client.go
@@ -1,8 +1,12 @@
 package client
 
 import (
+	"bytes"
 	"fmt"
+	"io"
 	"log/slog"
+	"net/http"
+	"os"
 	"time"
 
 	"explo/src/config"
@@ -10,6 +14,39 @@ import (
 	"explo/src/util"
 )
 
+// uploadPlaylistArtwork POSTs raw image bytes to a music app's artwork endpoint.
+// Plex, Jellyfin, and Emby all accept the same format — POST + Content-Type: image/jpeg + raw body.
+// The only per-client difference is the URL path, which each caller builds before invoking.
+func uploadPlaylistArtwork(hc *util.HttpClient, endpoint, localPath string, headers map[string]string) error {
+	data, err := os.ReadFile(localPath)
+	if err != nil {
+		return fmt.Errorf("read artwork: %w", err)
+	}
+	req, err := http.NewRequest("POST", endpoint, bytes.NewReader(data))
+	if err != nil {
+		return fmt.Errorf("build request: %w", err)
+	}
+	req.Header.Set("Content-Type", "image/jpeg")
+	req.ContentLength = int64(len(data))
+	for k, v := range headers {
+		req.Header.Set(k, v)
+	}
+	resp, err := hc.Client.Do(req)
+	if err != nil {
+		return fmt.Errorf("post: %w", err)
+	}
+	defer func() {
+		if cerr := resp.Body.Close(); cerr != nil {
+			slog.Warn("artwork upload: response body close failed", "err", cerr.Error())
+		}
+	}()
+	if resp.StatusCode < 200 || resp.StatusCode >= 300 {
+		body, _ := io.ReadAll(resp.Body)
+		return fmt.Errorf("upload artwork: status %d, body: %s", resp.StatusCode, string(body))
+	}
+	return nil
+}
+
 // Client manages interactions with the selected music system
 type Client struct {
 	System string
@@ -31,6 +68,12 @@ type APIClient interface {
 	DeletePlaylist() error
 }
 
+// ArtworkUploader is an optional capability for clients that support setting
+// playlist artwork. Use a type assertion: if u, ok := c.API.(client.ArtworkUploader); ok {...}.
+type ArtworkUploader interface {
+	SetPlaylistArtwork(localPath string) error
+}
+
 // NewClient initializes a client and sets up authentication
 func NewClient(cfg *config.Config) (*Client, error) {
 	c := &Client{
@@ -70,6 +113,16 @@ func NewClient(cfg *config.Config) (*Client, error) {
 	return c, nil
 }
 
+// TriggerRefresh Runs a trigger to refresh the users app music library
+// Useful for one-shot operations
+func TriggerRefresh(cfg *config.Config) error {
+	c, err := NewClient(cfg)
+	if err != nil {
+		return fmt.Errorf("client setup: %w", err)
+	}
+	return c.API.RefreshLibrary()
+}
+
 // systemSetup checks needed credentials and initializes the selected system
 func (c *Client) systemSetup() error {
 	switch c.System {
@@ -111,7 +164,7 @@ func (c *Client) systemSetup() error {
 			}
 
 		}
-		
+
 		if err := c.API.AddHeader(); err != nil {
 			return err
 		}
diff --git a/src/client/emby.go b/src/client/emby.go
index 42f782f9..07af57b4 100644
--- a/src/client/emby.go
+++ b/src/client/emby.go
@@ -126,7 +126,7 @@ func (c *Emby) CheckRefreshState() bool {
 
 func (c *Emby) SearchSongs(tracks []*models.Track) error {
 	for _, track := range tracks {
-		reqParam := fmt.Sprintf("/emby/Items?IncludeMediaTypes=Audio&SearchTerm=%s&Recursive=true&Fields=Path", url.QueryEscape(track.CleanTitle))
+		reqParam := fmt.Sprintf("/emby/Items?IncludeMediaTypes=Audio&SearchTerm=%s&Recursive=true&Fields=Path", url.QueryEscape(util.CleanSearchTitle(track.CleanTitle)))
 
 		body, err := c.HttpClient.MakeRequest("GET", c.Cfg.URL+reqParam, nil, c.Cfg.Creds.Headers)
 		if err != nil {
@@ -162,7 +162,7 @@ func (c *Emby) SearchSongs(tracks []*models.Track) error {
 }
 
 func (c *Emby) SearchPlaylist() error {
-	params := fmt.Sprintf("/emby/Items?SearchTerm=%s&Recursive=true&IncludeItemTypes=Playlist", c.Cfg.PlaylistName)
+	params := fmt.Sprintf("/emby/Items?SearchTerm=%s&Recursive=true&IncludeItemTypes=Playlist", url.QueryEscape(c.Cfg.PlaylistName))
 
 	body, err := c.HttpClient.MakeRequest("GET", c.Cfg.URL+params, nil, c.Cfg.Creds.Headers)
 	if err != nil {
@@ -185,7 +185,7 @@ func (c *Emby) SearchPlaylist() error {
 func (c *Emby) CreatePlaylist(tracks []*models.Track) error {
 	songIDs := formatEmbySongs(tracks)
 
-	reqParam := fmt.Sprintf("/emby/Playlists?Name=%s&Ids=%s&MediaType=Music", c.Cfg.PlaylistName, songIDs)
+	reqParam := fmt.Sprintf("/emby/Playlists?Name=%s&Ids=%s&MediaType=Music", url.QueryEscape(c.Cfg.PlaylistName), songIDs)
 
 
 	body, err := c.HttpClient.MakeRequest("POST", c.Cfg.URL+reqParam, nil, c.Cfg.Creds.Headers)
@@ -227,6 +227,14 @@ func (c *Emby) DeletePlaylist() error { // Doesn't currently work due to a bug i
 	return nil
 }
 
+// SetPlaylistArtwork uploads a JPEG as the playlist's primary image.
+func (c *Emby) SetPlaylistArtwork(localPath string) error {
+	if c.Cfg.PlaylistID == "" {
+		return fmt.Errorf("emby: no PlaylistID set")
+	}
+	return uploadPlaylistArtwork(c.HttpClient, c.Cfg.URL+"/emby/Items/"+c.Cfg.PlaylistID+"/Images/Primary", localPath, c.Cfg.Creds.Headers)
+}
+
 func formatEmbySongs(tracks []*models.Track) string {
 	songIDs := make([]string, 0, len(tracks))
 	for _, track := range tracks {
diff --git a/src/client/jellyfin.go b/src/client/jellyfin.go
index 03762a94..c268260f 100644
--- a/src/client/jellyfin.go
+++ b/src/client/jellyfin.go
@@ -141,7 +141,7 @@ func (c *Jellyfin) CheckRefreshState() bool {
 
 func (c *Jellyfin) SearchSongs(tracks []*models.Track) error {
 	for _, track := range tracks {
-		reqParam := fmt.Sprintf("/Items?IncludeMediaTypes=Audio&SearchTerm=%s&Recursive=true&Fields=Path", url.QueryEscape(track.CleanTitle))
+		reqParam := fmt.Sprintf("/Items?IncludeMediaTypes=Audio&SearchTerm=%s&Recursive=true&Fields=Path", url.QueryEscape(util.CleanSearchTitle(track.CleanTitle)))
 
 		body, err := c.HttpClient.MakeRequest("GET", c.Cfg.URL+reqParam, nil, c.Cfg.Creds.Headers)
 		if err != nil {
@@ -177,7 +177,7 @@ func (c *Jellyfin) SearchSongs(tracks []*models.Track) error {
 }
 
 func (c *Jellyfin) SearchPlaylist() error {
-	queryParams := fmt.Sprintf("/Search/Hints?IncludeItemTypes=Playlist&SearchTerm=%s", c.Cfg.PlaylistName)
+	queryParams := fmt.Sprintf("/Search/Hints?IncludeItemTypes=Playlist&SearchTerm=%s", url.QueryEscape(c.Cfg.PlaylistName))
 	body, err := c.HttpClient.MakeRequest("GET", c.Cfg.URL+queryParams, nil, c.Cfg.Creds.Headers)
 	if err != nil {
 		return err
@@ -259,6 +259,14 @@ func (c *Jellyfin) DeletePlaylist() error {
 	return nil
 }
 
+// SetPlaylistArtwork uploads a JPEG as the playlist's primary image.
+func (c *Jellyfin) SetPlaylistArtwork(localPath string) error {
+	if c.Cfg.PlaylistID == "" {
+		return fmt.Errorf("jellyfin: no PlaylistID set")
+	}
+	return uploadPlaylistArtwork(c.HttpClient, c.Cfg.URL+"/Items/"+c.Cfg.PlaylistID+"/Images/Primary", localPath, c.Cfg.Creds.Headers)
+}
+
 func formatJFSongs(tracks []*models.Track) ([]byte, error) { // marshal track IDs
 	songIDs := make([]string, 0, len(tracks))
 	for _, track := range tracks {
diff --git a/src/client/plex.go b/src/client/plex.go
index 7c201ec3..f5231c0b 100644
--- a/src/client/plex.go
+++ b/src/client/plex.go
@@ -367,7 +367,7 @@ func (c *Plex) SearchSongs(tracks []*models.Track) error {
 	for _, track := range tracks {
 		params := fmt.Sprintf(
 			"/hubs/search?query=%s&limit=10",
-			url.QueryEscape(track.CleanTitle),
+			url.QueryEscape(util.CleanSearchTitle(track.CleanTitle)),
 		)
 
 		var body []byte
@@ -524,6 +524,14 @@ func (c *Plex) DeletePlaylist() error {
 	return nil
 }
 
+// SetPlaylistArtwork uploads an image as the playlist's poster.
+func (c *Plex) SetPlaylistArtwork(localPath string) error {
+	if c.Cfg.PlaylistID == "" {
+		return fmt.Errorf("plex: no PlaylistID set")
+	}
+	return uploadPlaylistArtwork(c.HttpClient, c.Cfg.URL+"/library/metadata/"+c.Cfg.PlaylistID+"/posters", localPath, c.Cfg.Creds.Headers)
+}
+
 func (c *Plex) getServer() error {
 	params := "/identity"
 
@@ -542,7 +550,7 @@ func (c *Plex) getServer() error {
 }
 
 func getPlexSong(track *models.Track, metadata []SongMetadata) (string, error) {
-	loweredArtist := strings.ToLower(track.MainArtist)
+	normArtist := util.AlnumOnly(strings.ToLower(track.MainArtist))
 
 	for _, md := range metadata {
 		if md.Type != "track" {
@@ -550,8 +558,8 @@ func getPlexSong(track *models.Track, metadata []SongMetadata) (string, error) {
 		}
 
 		titleMatch := util.NormalizeTitle(md.Title) == util.NormalizeTitle(track.Title)
-		albumMatch := strings.EqualFold(md.ParentTitle, track.Album)
-		artistMatch := strings.Contains(strings.ToLower(md.OriginalTitle), loweredArtist) || strings.Contains(strings.ToLower(md.GrandparentTitle), loweredArtist)
+		albumMatch := util.AlnumOnly(strings.ToLower(md.ParentTitle)) == util.AlnumOnly(strings.ToLower(track.Album))
+		artistMatch := strings.Contains(util.AlnumOnly(strings.ToLower(md.OriginalTitle)), normArtist) || strings.Contains(util.AlnumOnly(strings.ToLower(md.GrandparentTitle)), normArtist)
 
 		if titleMatch && (albumMatch || artistMatch) {
 			slog.Debug(fmt.Sprintf("matched track via metadata: %s by %s", track.Title, track.Artist))
diff --git a/src/client/subsonic.go b/src/client/subsonic.go
index 55662eda..08c17898 100644
--- a/src/client/subsonic.go
+++ b/src/client/subsonic.go
@@ -125,7 +125,7 @@ func (c *Subsonic) AddLibrary() error {
 
 func (c *Subsonic) SearchSongs(tracks []*models.Track) error {
 	for _, track := range tracks {
-		searchQuery := fmt.Sprintf("%s %s", track.CleanTitle, track.MainArtist)
+		searchQuery := fmt.Sprintf("%s %s", util.CleanSearchTitle(track.CleanTitle), track.MainArtist)
 		reqParam := fmt.Sprintf("search3?query=%s&f=json", url.QueryEscape(searchQuery))
 
 		body, err := c.subsonicRequest(reqParam)
@@ -221,7 +221,7 @@ func (c *Subsonic) CreatePlaylist(tracks []*models.Track) error {
 		fmt.Fprintf(&trackIDs, "&songId=%s", track.ID)
 	}
 
-	reqParam := fmt.Sprintf("createPlaylist?name=%s%s&f=json", c.Cfg.PlaylistName, trackIDs.String())
+	reqParam := fmt.Sprintf("createPlaylist?name=%s%s&f=json", url.QueryEscape(c.Cfg.PlaylistName), trackIDs.String())
 
 	body, err := c.subsonicRequest(reqParam)
 	if err != nil {
diff --git a/src/config/config.go b/src/config/config.go
index c60cb433..3b336681 100644
--- a/src/config/config.go
+++ b/src/config/config.go
@@ -38,6 +38,7 @@ type Flags struct {
 	ExcludeLocal bool
 	Persist      bool
 	PersistSet   bool
+	RefreshOnly  bool
 }
 
 type ServerConfig struct {
diff --git a/src/config/flags.go b/src/config/flags.go
index 890f1993..6c03826c 100644
--- a/src/config/flags.go
+++ b/src/config/flags.go
@@ -4,9 +4,10 @@ import (
 	"fmt"
 	"os"
 
-	flag "github.com/spf13/pflag"
 	"slices"
 	"strings"
+
+	flag "github.com/spf13/pflag"
 )
 
 var (
@@ -21,6 +22,7 @@ func (cfg *Config) GetFlags() error {
 	var excludeLocal bool
 	var persist bool
 	var showVersion bool
+	var refreshOnly bool
 	// Long flags
 	flag.StringVarP(&configPath, "config", "c", ".env", "Path of the configuration file")
 	flag.StringVarP(&playlist, "playlist", "p", "weekly-exploration", "Playlist where to get tracks. Supported: weekly-exploration, weekly-jams, daily-jams, on-repeat")
@@ -28,6 +30,7 @@ func (cfg *Config) GetFlags() error {
 	flag.BoolVarP(&excludeLocal, "exclude-local", "e", false, "Exclude locally found tracks from the imported playlist")
 	flag.BoolVar(&persist, "persist", true, "Keep playlists between generations")
 	flag.BoolVarP(&showVersion, "version", "v", false, "Print version and exit")
+	flag.BoolVar(&refreshOnly, "refresh-only", false, "Trigger alibrary rescan and exit; skips discovery and downloads")
 
 	flag.Parse()
 
@@ -38,9 +41,9 @@ func (cfg *Config) GetFlags() error {
 	persistSet := flag.Lookup("persist").Changed
 	cfgSet := flag.Lookup("config").Changed
 
-	// Validation for playlist
-	if !contains(validPlaylists, playlist) {
-		return fmt.Errorf("flag validation error: invalid playlist %s (must be one of: %s)",
+	// Validation for playlist — built-in types or user-imported custom-* IDs
+	if !contains(validPlaylists, playlist) && !strings.HasPrefix(playlist, "custom-") {
+		return fmt.Errorf("flag validation error: invalid playlist %s (must be one of: %s, or a custom-* id)",
 			playlist, strings.Join(validPlaylists, ", "))
 	}
 
@@ -56,6 +59,7 @@ func (cfg *Config) GetFlags() error {
 	cfg.Flags.DownloadMode = downloadMode
 	cfg.Flags.ExcludeLocal = excludeLocal
 	cfg.Flags.Persist = persist
+	cfg.Flags.RefreshOnly = refreshOnly
 
 	// for deprecation purposes (can be removed at a later date)
 	cfg.Flags.PersistSet = persistSet
@@ -68,7 +72,7 @@ func (cfg *Config) MergeFlags() {
 	cfg.DownloadCfg.ExcludeLocal = cfg.Flags.ExcludeLocal
 
 	if cfg.Flags.CfgSet {
-	cfg.ServerCfg.WebEnvPath = cfg.Flags.CfgPath
+		cfg.ServerCfg.WebEnvPath = cfg.Flags.CfgPath
 	}
 
 	if cfg.Flags.PersistSet {
diff --git a/src/discovery/listenbrainz.go b/src/discovery/listenbrainz.go
index 98252b66..a4436b91 100644
--- a/src/discovery/listenbrainz.go
+++ b/src/discovery/listenbrainz.go
@@ -206,7 +206,7 @@ func (c *ListenBrainz) QueryTracks() ([]*models.Track, error) {
 		if err != nil {
 			return nil, err
 		}
-		tracks, err = c.parsePlaylist(id, c.cfg.SingleArtist)
+		_, tracks, err = c.parsePlaylist(id, c.cfg.SingleArtist)
 		if err != nil {
 			return nil, err
 		}
@@ -615,19 +615,43 @@ func (c *ListenBrainz) getImportPlaylist(user string) (string, error) {
 	return bestID, nil
 }
 
-func (c *ListenBrainz) parsePlaylist(identifier string, singleArtist bool) ([]*models.Track, error) {
+
+// FetchPlaylistByMBID fetches a LB playlist by MBID. For use outside the discovery flow.
+func FetchPlaylistByMBID(httpClient *util.HttpClient, mbid string) (string, []*models.Track, error) {
+	lb := &ListenBrainz{HttpClient: httpClient}
+	return lb.parsePlaylist(mbid, false)
+}
+
+// FetchTopRecordings returns the user's top recordings for the current month.
+func FetchTopRecordings(httpClient *util.HttpClient, user string) ([]*models.Track, error) {
+	lb := &ListenBrainz{HttpClient: httpClient}
+	return lb.getTopRecordings(user)
+}
+
+// FetchMostRecentPlaylistByType finds and fetches the most recent LB-generated playlist of the given type for the user.
+func FetchMostRecentPlaylistByType(httpClient *util.HttpClient, user, playlistType string) ([]*models.Track, error) {
+	lb := &ListenBrainz{HttpClient: httpClient, cfg: cfg.Listenbrainz{ImportPlaylist: playlistType}}
+	id, err := lb.getImportPlaylist(user)
+	if err != nil {
+		return nil, err
+	}
+	_, tracks, err := lb.parsePlaylist(id, false)
+	return tracks, err
+}
+
+func (c *ListenBrainz) parsePlaylist(identifier string, singleArtist bool) (string, []*models.Track, error) {
 	body, err := c.lbRequest(fmt.Sprintf("playlist/%s", identifier))
 	if err != nil {
-		return nil, fmt.Errorf("parsePlaylist: %s", err.Error())
+		return "", nil, fmt.Errorf("parsePlaylist: %s", err.Error())
 	}
 	var exploration Exploration
 	err = util.ParseResp(body, &exploration)
 	if err != nil {
-		return nil, fmt.Errorf("parsePlaylist: %s", err.Error())
+		return "", nil, fmt.Errorf("parsePlaylist: %s", err.Error())
 	}
 	srcTracks := exploration.Playlist.Tracks
 	if len(srcTracks) == 0 {
-		return nil, fmt.Errorf("no tracks found in playlist %s", identifier)
+		return "", nil, fmt.Errorf("no tracks found in playlist %s", identifier)
 	}
 
 	tracks := make([]*models.Track, 0, len(srcTracks))
@@ -687,7 +711,7 @@ func (c *ListenBrainz) parsePlaylist(identifier string, singleArtist bool) ([]*m
 		})
 	}
 
-	return tracks, nil
+	return exploration.Playlist.Title, tracks, nil
 
 }
 
diff --git a/src/downloader/monitor.go b/src/downloader/monitor.go
index 364cd150..beb87a8b 100644
--- a/src/downloader/monitor.go
+++ b/src/downloader/monitor.go
@@ -131,7 +131,7 @@ func tracksProcessed(tracks []*models.Track, progressMap map[string]*DownloadMon
 		key := fmt.Sprintf("%s|%s", track.ID, track.File)
 		tracker, exists := progressMap[key]
 		if !track.Present && exists && !tracker.Skipped {
-			slog.Info("file still present", "file", track.File)
+			slog.Info("[monitor] track download still in progress", "title", track.CleanTitle, "artist", track.MainArtist, "file", track.File)
 			return false
 		}
 	}
diff --git a/src/main/main.go b/src/main/main.go
index 8354a347..1bad8d2e 100644
--- a/src/main/main.go
+++ b/src/main/main.go
@@ -1,12 +1,16 @@
 package main
 
 import (
+	"encoding/json"
 	"explo/src/logging"
 	"explo/src/models"
 	"explo/src/web/backend"
+	"fmt"
 	"log"
 	"log/slog"
 	"os"
+	"path/filepath"
+	"strings"
 
 	"explo/src/client"
 	"explo/src/config"
@@ -21,6 +25,65 @@ type Song struct {
 	Album  string
 }
 
+// loadCustomTracks reads a custom playlist's track cache and returns them as
+// models.Track slices, bypassing the LB discovery step entirely.
+func loadCustomTracks(dataDir, playlistID string) ([]*models.Track, string, error) {
+	type cachedTrack struct {
+		Title      string `json:"title"`
+		Artist     string `json:"artist"`
+		MainArtist string `json:"mainArtist"`
+		Release    string `json:"release"`
+		CoverURL   string `json:"coverUrl"`
+	}
+	type cacheFile struct {
+		Tracks []cachedTrack `json:"tracks"`
+	}
+	type customPlaylist struct {
+		ID   string `json:"id"`
+		Name string `json:"name"`
+	}
+
+	data, err := os.ReadFile(filepath.Join(dataDir, "cache", playlistID+".json"))
+	if err != nil {
+		return nil, "", fmt.Errorf("custom playlist %q not found in cache: %w", playlistID, err)
+	}
+	var c cacheFile
+	if err := json.Unmarshal(data, &c); err != nil {
+		return nil, "", fmt.Errorf("failed to parse custom playlist cache: %w", err)
+	}
+
+	// Look up the human-readable name from metadata
+	name := playlistID
+	if meta, err := os.ReadFile(filepath.Join(dataDir, "custom-playlists.json")); err == nil {
+		var all []customPlaylist
+		if json.Unmarshal(meta, &all) == nil {
+			for _, p := range all {
+				if p.ID == playlistID {
+					name = p.Name
+					break
+				}
+			}
+		}
+	}
+
+	tracks := make([]*models.Track, len(c.Tracks))
+	for i, t := range c.Tracks {
+		mainArtist := t.MainArtist
+		if mainArtist == "" {
+			mainArtist = t.Artist
+		}
+		tracks[i] = &models.Track{
+			CleanTitle: t.Title,
+			Title:      t.Title,
+			Artist:     t.Artist,
+			MainArtist: mainArtist,
+			Album:      t.Release,
+			CoverURL:   t.CoverURL,
+		}
+	}
+	return tracks, name, nil
+}
+
 func initHttpClient() *util.HttpClient {
 	return util.NewHttp(util.HttpClientConfig{
 		Timeout: 10,
@@ -60,9 +123,30 @@ func main() {
 		srv := backend.NewServer(cfg.ServerCfg)
 		log.Fatal(srv.Start())
 	}
+
+	if cfg.Flags.RefreshOnly {
+		if err := client.TriggerRefresh(&cfg); err != nil {
+			slog.Error("refresh-only failed", "err", err.Error())
+			os.Exit(1)
+		}
+		slog.Info("library refresh triggered")
+		return
+	}
+
 	httpClient := initHttpClient()
-	discovery := discovery.NewDiscoverer(cfg.DiscoveryCfg, httpClient)
-	tracks, err := discovery.Discover()
+
+	var tracks []*models.Track
+	var err error
+	if strings.HasPrefix(cfg.Flags.Playlist, "custom-") {
+		var playlistName string
+		tracks, playlistName, err = loadCustomTracks(cfg.ServerCfg.WebDataDir, cfg.Flags.Playlist)
+		if err == nil {
+			cfg.ClientCfg.PlaylistName = playlistName
+		}
+	} else {
+		disc := discovery.NewDiscoverer(cfg.DiscoveryCfg, httpClient)
+		tracks, err = disc.Discover()
+	}
 	if err != nil {
 		slog.Error(err.Error(), "notify", true)
 		os.Exit(1)
@@ -114,5 +198,37 @@ func main() {
 		slog.Warn(err.Error())
 	} else {
 		slog.Info("playlist created successfully", "system", cfg.System, "playlistName", cfg.ClientCfg.PlaylistName, "notify", true)
+		uploadCustomPlaylistArtwork(&cfg, client)
+	}
+}
+
+// uploadCustomPlaylistArtwork pushes a custom playlist's cached artwork to the music app
+// after first successful creation. No-op for non-custom playlists, playlists without
+// artwork, or clients that don't support artwork upload (Subsonic, MPD).
+func uploadCustomPlaylistArtwork(cfg *config.Config, c *client.Client) {
+	if !strings.HasPrefix(cfg.Flags.Playlist, "custom-") {
+		return
+	}
+	cp := backend.GetCustomPlaylist(cfg.ServerCfg.WebDataDir, cfg.Flags.Playlist)
+	if cp == nil || cp.ArtworkURL == "" || cp.ArtworkUploaded {
+		return
+	}
+	uploader, ok := c.API.(client.ArtworkUploader)
+	if !ok {
+		return
+	}
+	path := backend.CustomPlaylistArtworkPath(cfg.ServerCfg.WebDataDir, cp.ID)
+	if _, err := os.Stat(path); err != nil {
+		slog.Warn("custom-playlists: artwork not cached locally, skipping upload", "id", cp.ID, "path", path)
+		return
+	}
+	if err := uploader.SetPlaylistArtwork(path); err != nil {
+		slog.Warn("custom-playlists: failed to upload playlist artwork", "id", cp.ID, "err", err.Error())
+		return
+	}
+	if err := backend.MarkCustomPlaylistArtworkUploaded(cfg.ServerCfg.WebDataDir, cp.ID); err != nil {
+		slog.Warn("custom-playlists: artwork upload succeeded but flag not persisted", "id", cp.ID, "err", err.Error())
+		return
 	}
+	slog.Info("custom-playlists: playlist artwork uploaded", "id", cp.ID, "system", cfg.System)
 }
diff --git a/src/util/filesystem.go b/src/util/filesystem.go
new file mode 100644
index 00000000..f4512773
--- /dev/null
+++ b/src/util/filesystem.go
@@ -0,0 +1,31 @@
+package util
+
+import (
+	"log/slog"
+	"os"
+	"path/filepath"
+)
+
+// RemoveDirsByPrefix deletes every immediate subdirectory of parentDir whose
+// name starts with prefix. Returns the number of directories successfully removed.
+// Non-directory matches and missing parents are ignored; per-entry removal errors
+// are logged but do not abort the operation.
+func RemoveDirsByPrefix(parentDir, prefix string) (int, error) {
+	matches, err := filepath.Glob(filepath.Join(parentDir, prefix+"*"))
+	if err != nil {
+		return 0, err
+	}
+	removed := 0
+	for _, m := range matches {
+		info, err := os.Stat(m)
+		if err != nil || !info.IsDir() {
+			continue
+		}
+		if err := os.RemoveAll(m); err != nil {
+			slog.Warn("failed to remove directory", "path", m, "err", err.Error())
+			continue
+		}
+		removed++
+	}
+	return removed, nil
+}
diff --git a/src/util/http.go b/src/util/http.go
index ca751651..39d029e6 100644
--- a/src/util/http.go
+++ b/src/util/http.go
@@ -78,15 +78,56 @@ func ParseResp[T any](body []byte, target *T) error {
 	return nil
 }
 
-// DownloadCover downloads coverURL into coversDir and returns "/api/covers/<mbid>.jpg".
-// Returns "" if url is empty.
+// DownloadFile downloads a URL to destPath, creating parent directories as needed.
+// No-op if destPath already exists. Returns the resolved local path on success.
+func DownloadFile(url, destPath string) (string, error) {
+	if url == "" {
+		return "", fmt.Errorf("empty url")
+	}
+	if _, err := os.Stat(destPath); err == nil {
+		return destPath, nil
+	}
+	if err := os.MkdirAll(filepath.Dir(destPath), 0755); err != nil {
+		return "", fmt.Errorf("mkdir: %w", err)
+	}
+	resp, err := http.Get(url) //nolint:noctx
+	if err != nil {
+		return "", fmt.Errorf("get: %w", err)
+	}
+	defer func() {
+		if cerr := resp.Body.Close(); cerr != nil {
+			slog.Warn("DownloadFile: close failed", "err", cerr.Error())
+		}
+	}()
+	if resp.StatusCode != http.StatusOK {
+		return "", fmt.Errorf("status %d from %s", resp.StatusCode, url)
+	}
+	data, err := io.ReadAll(resp.Body)
+	if err != nil {
+		return "", fmt.Errorf("read body: %w", err)
+	}
+	if err := os.WriteFile(destPath, data, 0644); err != nil {
+		return "", fmt.Errorf("write: %w", err)
+	}
+	return destPath, nil
+}
+
+// DownloadCover downloads coverURL into coversDir and returns "/api/covers/<id>.jpg".
+// For CoverArtArchive URLs the id is the MusicBrainz release MBID (second-to-last
+// path segment). For Spotify CDN URLs (i.scdn.co) the id is the image hash (last
+// path segment). Returns "" if url is empty.
 func DownloadCover(url, coversDir string) string {
 	if url == "" {
 		return ""
 	}
 	parts := strings.Split(strings.TrimRight(url, "/"), "/")
-	mbid := parts[len(parts)-2]
-	destPath := filepath.Join(coversDir, mbid+".jpg")
+	// Spotify CDN: https://i.scdn.co/image/<hash>  → use last segment
+	// CAA:         https://coverartarchive.org/release/<mbid>/front-250 → use second-to-last
+	id := parts[len(parts)-2]
+	if strings.Contains(url, "scdn.co") || strings.Contains(url, "spotifycdn.com") {
+		id = parts[len(parts)-1]
+	}
+	destPath := filepath.Join(coversDir, id+".jpg")
 	if _, err := os.Stat(destPath); os.IsNotExist(err) {
 		resp, err := http.Get(url) //nolint:noctx
 		if err == nil {
@@ -106,5 +147,5 @@ func DownloadCover(url, coversDir string) string {
 			}()
 		}
 	}
-	return "/api/covers/" + mbid + ".jpg"
+	return "/api/covers/" + id + ".jpg"
 }
diff --git a/src/util/sanitize.go b/src/util/sanitize.go
index 1bdf06a9..de04d69f 100644
--- a/src/util/sanitize.go
+++ b/src/util/sanitize.go
@@ -6,15 +6,25 @@ import (
 )
 
 var (
-	filenameRe = regexp.MustCompile(`[^\p{L}\d._,\-]+`)
-	alnumRe    = regexp.MustCompile(`[^\p{L}\d]+`)
-	featTailRe = regexp.MustCompile(`(?i)\s*[\(\[\{]\s*(feat\.?|featuring|ft\.?|with)\s[^\)\]\}]*[\)\]\}]\s*$`)
+	filenameRe     = regexp.MustCompile(`[^\p{L}\d._,\-]+`)
+	alnumRe        = regexp.MustCompile(`[^\p{L}\d]+`)
+	featTailRe     = regexp.MustCompile(`(?i)\s*[\(\[\{]\s*(feat\.?|featuring|ft\.?|with)\s[^\)\]\}]*[\)\]\}]\s*$`)
+	remasterTailRe = regexp.MustCompile(`(?i)\s*[-–—]\s*\d{4}\s*remaster(ed)?\s*$`)
 )
 
+// CleanSearchTitle strips trailing (feat. …) and "- 2011 Remaster" suffixes
+// but keeps the title human-readable for use in search API queries.
+func CleanSearchTitle(s string) string {
+	s = featTailRe.ReplaceAllString(s, "")
+	s = remasterTailRe.ReplaceAllString(s, "")
+	return strings.TrimSpace(s)
+}
+
 // NormalizeTitle strips trailing (feat. …) annotations, lowercases,
 // and reduces to alphanumeric-only for fuzzy title comparison.
 func NormalizeTitle(s string) string {
 	s = featTailRe.ReplaceAllString(s, "")
+	s = remasterTailRe.ReplaceAllString(s, "")
 	return AlnumOnly(strings.ToLower(s))
 }
 
@@ -26,4 +36,4 @@ func FilenameSafe(s string) string {
 // AlnumOnly removes everything except letters and digits
 func AlnumOnly(s string) string {
 	return alnumRe.ReplaceAllString(s, "")
-}
\ No newline at end of file
+}
diff --git a/src/web/backend/apple_music.go b/src/web/backend/apple_music.go
new file mode 100644
index 00000000..7f7f59ed
--- /dev/null
+++ b/src/web/backend/apple_music.go
@@ -0,0 +1,254 @@
+package backend
+
+import (
+	"encoding/json"
+	"fmt"
+	"io"
+	"log/slog"
+	"net/http"
+	"strings"
+
+	"golang.org/x/net/html"
+)
+
+// appleServerData mirrors the top-level shape of the
+// <script id="serialized-server-data"> JSON blob on Apple Music pages.
+type appleServerData struct {
+	Data []struct {
+		Data struct {
+			Sections []appleSection `json:"sections"`
+		} `json:"data"`
+	} `json:"data"`
+}
+
+type appleSection struct {
+	Items []appleItem `json:"items"`
+}
+
+type appleItem struct {
+	Title         string `json:"title"`
+	ArtistName    string `json:"artistName"`
+	TertiaryLinks []struct {
+		Title string `json:"title"` // album name
+	} `json:"tertiaryLinks"`
+	Artwork *appleArtwork `json:"artwork"`
+}
+
+type appleArtwork struct {
+	Dictionary struct {
+		URL string `json:"url"` // template with {w}, {h}, {f} placeholders
+	} `json:"dictionary"`
+}
+
+// resolveArtworkURL replaces Apple's {w}x{h}bb.{f} template placeholders
+// with concrete values for a 300x300 JPEG.
+func resolveArtworkURL(tpl string) string {
+	if tpl == "" {
+		return ""
+	}
+	r := strings.NewReplacer("{w}", "300", "{h}", "300", "{f}", "jpg")
+	return r.Replace(tpl)
+}
+
+// fetchAppleMusicPlaylist scrapes a public Apple Music playlist page and extracts
+// track info from the embedded server data.
+// Returns (playlistName, artworkURL, tracks, error) where tracks are [title, artist, album, coverURL].
+func fetchAppleMusicPlaylist(pageURL string) (string, string, []PlaylistTrack, error) {
+	req, err := http.NewRequest("GET", pageURL, nil)
+	if err != nil {
+		return "", "", nil, fmt.Errorf("apple music: invalid URL: %w", err)
+	}
+	req.Header.Set("User-Agent",
+		"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) "+
+			"AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36")
+	req.Header.Set("Accept", "text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8")
+	req.Header.Set("Accept-Language", "en-US,en;q=0.9")
+
+	resp, err := http.DefaultClient.Do(req)
+	if err != nil {
+		return "", "", nil, fmt.Errorf("apple music: fetch failed: %w", err)
+	}
+	defer func() {
+		if cerr := resp.Body.Close(); cerr != nil {
+			slog.Warn("apple music: response body close failed", "err", cerr.Error())
+		}
+	}()
+	if resp.StatusCode != http.StatusOK {
+		return "", "", nil, fmt.Errorf("apple music: page returned %d", resp.StatusCode)
+	}
+
+	body, err := io.ReadAll(resp.Body)
+	if err != nil {
+		return "", "", nil, fmt.Errorf("apple music: failed to read body: %w", err)
+	}
+
+	htmlStr := string(body)
+
+	// Parse the serialized-server-data for everything: playlist name, artwork, tracks.
+	playlistName, artworkURL, tracks, err := extractServerData(htmlStr)
+	if err != nil {
+		return "", "", nil, err
+	}
+
+	// Fall back to JSON-LD for the playlist name if the server data header was missing.
+	if playlistName == "" {
+		playlistName = extractPlaylistNameFromJSONLD(htmlStr)
+	}
+	if playlistName == "" {
+		playlistName = "Apple Music Playlist"
+	}
+
+	slog.Info("apple music: parsed playlist", "name", playlistName, "tracks", len(tracks), "artwork", artworkURL != "")
+	return playlistName, artworkURL, tracks, nil
+}
+
+// extractServerData parses the <script id="serialized-server-data"> blob for
+// the playlist name, playlist artwork URL (from the header section), and tracks with artwork.
+func extractServerData(htmlStr string) (string, string, []PlaylistTrack, error) {
+	scripts := extractScriptByID(htmlStr, "serialized-server-data")
+	if len(scripts) == 0 {
+		return "", "", nil, fmt.Errorf("apple music: no serialized-server-data found in page")
+	}
+
+	var ssd appleServerData
+	if err := json.Unmarshal([]byte(scripts[0]), &ssd); err != nil {
+		return "", "", nil, fmt.Errorf("apple music: failed to parse server data: %w", err)
+	}
+
+	var playlistName string
+	var artworkURL string
+	var tracks []PlaylistTrack
+
+	for _, outer := range ssd.Data {
+		for _, sec := range outer.Data.Sections {
+			if len(sec.Items) == 0 {
+				continue
+			}
+
+			// The header section has the playlist title but no artistName.
+			// The tracks section has artistName on every item.
+			if sec.Items[0].ArtistName == "" {
+				// Header section — grab the playlist name and artwork.
+				if playlistName == "" && sec.Items[0].Title != "" {
+					playlistName = sec.Items[0].Title
+				}
+				if artworkURL == "" && sec.Items[0].Artwork != nil {
+					tpl := sec.Items[0].Artwork.Dictionary.URL
+					if tpl != "" {
+						// Use a larger size for the playlist cover (card background).
+						r := strings.NewReplacer("{w}", "600", "{h}", "600", "{f}", "jpg")
+						artworkURL = r.Replace(tpl)
+					}
+				}
+				continue
+			}
+
+			// Track section.
+			tracks = make([]PlaylistTrack, 0, len(sec.Items))
+			for _, item := range sec.Items {
+				album := ""
+				if len(item.TertiaryLinks) > 0 {
+					album = item.TertiaryLinks[0].Title
+				}
+				coverURL := ""
+				if item.Artwork != nil {
+					coverURL = resolveArtworkURL(item.Artwork.Dictionary.URL)
+				}
+				tracks = append(tracks, PlaylistTrack{
+					Title:      item.Title,
+					Artist:     item.ArtistName,
+					MainArtist: item.ArtistName,
+					Album:      album,
+					CoverURL:   coverURL,
+				})
+			}
+		}
+	}
+
+	if len(tracks) == 0 {
+		return "", "", nil, fmt.Errorf("apple music: no track data found in server data")
+	}
+	return playlistName, artworkURL, tracks, nil
+}
+
+// extractPlaylistNameFromJSONLD pulls the playlist title from the JSON-LD MusicPlaylist block.
+func extractPlaylistNameFromJSONLD(htmlStr string) string {
+	for _, raw := range extractScriptByType(htmlStr, "application/ld+json") {
+		var pl struct {
+			Type string `json:"@type"`
+			Name string `json:"name"`
+		}
+		if err := json.Unmarshal([]byte(raw), &pl); err == nil && pl.Type == "MusicPlaylist" {
+			return pl.Name
+		}
+	}
+	return ""
+}
+
+// extractScriptByType finds all <script type="X"> contents in the HTML.
+func extractScriptByType(htmlBody, scriptType string) []string {
+	var results []string
+	tok := html.NewTokenizer(strings.NewReader(htmlBody))
+	for {
+		tt := tok.Next()
+		if tt == html.ErrorToken {
+			break
+		}
+		if tt != html.StartTagToken {
+			continue
+		}
+		tn, hasAttr := tok.TagName()
+		if string(tn) != "script" || !hasAttr {
+			continue
+		}
+		match := false
+		for {
+			key, val, more := tok.TagAttr()
+			if string(key) == "type" && string(val) == scriptType {
+				match = true
+			}
+			if !more {
+				break
+			}
+		}
+		if match {
+			tok.Next()
+			results = append(results, string(tok.Text()))
+		}
+	}
+	return results
+}
+
+// extractScriptByID finds <script id="X"> contents in the HTML.
+func extractScriptByID(htmlBody, id string) []string {
+	var results []string
+	tok := html.NewTokenizer(strings.NewReader(htmlBody))
+	for {
+		tt := tok.Next()
+		if tt == html.ErrorToken {
+			break
+		}
+		if tt != html.StartTagToken {
+			continue
+		}
+		tn, hasAttr := tok.TagName()
+		if string(tn) != "script" || !hasAttr {
+			continue
+		}
+		match := false
+		for {
+			key, val, more := tok.TagAttr()
+			if string(key) == "id" && string(val) == id {
+				match = true
+			}
+			if !more {
+				break
+			}
+		}
+		if match {
+			tok.Next()
+			results = append(results, string(tok.Text()))
+		}
+	}
+	return results
+}
diff --git a/src/web/backend/custom_playlists.go b/src/web/backend/custom_playlists.go
new file mode 100644
index 00000000..205f2dfd
--- /dev/null
+++ b/src/web/backend/custom_playlists.go
@@ -0,0 +1,509 @@
+package backend
+
+import (
+	"encoding/json"
+	"fmt"
+	"log/slog"
+	"math/rand/v2"
+	"net/http"
+	"os"
+	"path/filepath"
+	"regexp"
+	"strings"
+	"time"
+
+	"explo/src/discovery"
+	"explo/src/util"
+	"explo/src/web"
+
+	"golang.org/x/text/cases"
+	"golang.org/x/text/language"
+)
+
+// CustomPlaylist holds the metadata for a user-imported playlist.
+type CustomPlaylist struct {
+	ID              string    `json:"id"`
+	Name            string    `json:"name"`
+	Source          string    `json:"source"`                     // "listenbrainz" | "apple_music" | "spotify"
+	SourceURL       string    `json:"source_url,omitempty"`       // original URL for dedup + refresh
+	LBMBID          string    `json:"lb_mbid,omitempty"`          // ListenBrainz MBID (backward compat)
+	ArtworkURL      string    `json:"artwork_url,omitempty"`      // playlist cover image (Apple Music)
+	ArtworkUploaded bool      `json:"artwork_uploaded,omitempty"` // true after artwork has been pushed to the music app
+	RefreshDays     int       `json:"refresh_days"`
+	ColorIndex      int       `json:"color_index"`
+	LastFetched     time.Time `json:"last_fetched"`
+}
+
+// CustomPlaylistArtworkPath returns the local file path where a playlist's
+// artwork is cached (regardless of whether the file exists).
+func CustomPlaylistArtworkPath(cfgDir, id string) string {
+	return filepath.Join(cfgDir, "cache", "playlist_artwork", id+".jpg")
+}
+
+// GetCustomPlaylist looks up a custom playlist by ID. Returns nil if not found.
+func GetCustomPlaylist(cfgDir, id string) *CustomPlaylist {
+	for _, p := range loadCustomPlaylists(cfgDir) {
+		if p.ID == id {
+			cp := p
+			return &cp
+		}
+	}
+	return nil
+}
+
+// MarkCustomPlaylistArtworkUploaded sets ArtworkUploaded=true and persists.
+func MarkCustomPlaylistArtworkUploaded(cfgDir, id string) error {
+	playlists := loadCustomPlaylists(cfgDir)
+	for i := range playlists {
+		if playlists[i].ID == id {
+			if playlists[i].ArtworkUploaded {
+				return nil
+			}
+			playlists[i].ArtworkUploaded = true
+			return saveCustomPlaylists(cfgDir, playlists)
+		}
+	}
+	return nil
+}
+
+var lbMBIDRe = regexp.MustCompile(`[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}`)
+
+var appleMusicURLRe = regexp.MustCompile(
+	`^https?://music\.apple\.com/[a-z]{2}/playlist/[^/]+/(pl\.[a-zA-Z0-9-]+)`,
+)
+
+// extractAppleMusicID pulls the playlist ID (pl.xxx) from an Apple Music URL.
+func extractAppleMusicID(raw string) (string, error) {
+	raw = strings.TrimSpace(raw)
+	m := appleMusicURLRe.FindStringSubmatch(raw)
+	if len(m) < 2 {
+		return "", fmt.Errorf("not a valid Apple Music playlist URL")
+	}
+	return m[1], nil
+}
+
+// extractLBMBID pulls the playlist UUID out of a ListenBrainz playlist URL or bare MBID string.
+func extractLBMBID(raw string) (string, error) {
+	raw = strings.TrimSpace(raw)
+	m := lbMBIDRe.FindString(raw)
+	if m == "" {
+		return "", fmt.Errorf("no ListenBrainz playlist UUID found in %q", raw)
+	}
+	return m, nil
+}
+
+func customPlaylistsPath(cfgDir string) string {
+	return filepath.Join(cfgDir, "custom-playlists.json")
+}
+
+// customEnvPrefix converts a custom playlist ID like "custom-a1b2c3d4"
+// to an env-var prefix like "CUSTOM_A1B2C3D4".
+func customEnvPrefix(id string) string {
+	return strings.ToUpper(strings.ReplaceAll(id, "-", "_"))
+}
+
+func loadCustomPlaylists(cfgDir string) []CustomPlaylist {
+	data, err := os.ReadFile(customPlaylistsPath(cfgDir))
+	if err != nil {
+		return nil
+	}
+	var out []CustomPlaylist
+	if err := json.Unmarshal(data, &out); err != nil {
+		slog.Warn("custom-playlists: failed to parse metadata", "err", err)
+		return nil
+	}
+	return out
+}
+
+func saveCustomPlaylists(cfgDir string, playlists []CustomPlaylist) error {
+	raw, err := json.MarshalIndent(playlists, "", "  ")
+	if err != nil {
+		return err
+	}
+	return os.WriteFile(customPlaylistsPath(cfgDir), raw, 0644)
+}
+
+// FetchResult is the uniform return type for fetching playlist data from any source.
+type FetchResult struct {
+	Name       string
+	ArtworkURL string
+	Tracks     []PlaylistTrack
+}
+
+// fetchCustomPlaylistTracks dispatches to the appropriate source fetcher.
+// This is the single point where source-specific logic lives for fetching.
+func fetchCustomPlaylistTracks(p CustomPlaylist) (FetchResult, error) {
+	switch p.Source {
+	case "apple_music":
+		name, art, tracks, err := fetchAppleMusicPlaylist(p.SourceURL)
+		return FetchResult{name, art, tracks}, err
+	case "spotify":
+		name, art, tracks, err := fetchSpotifyPlaylist(p.SourceURL)
+		return FetchResult{name, art, tracks}, err
+	default: // "listenbrainz" or legacy empty
+		mbid := p.LBMBID
+		if mbid == "" && p.SourceURL != "" {
+			var err error
+			mbid, err = extractLBMBID(p.SourceURL)
+			if err != nil {
+				return FetchResult{}, err
+			}
+		}
+		if mbid == "" {
+			return FetchResult{}, fmt.Errorf("no source data for playlist %s", p.ID)
+		}
+		httpClient := util.NewHttp(util.HttpClientConfig{Timeout: 30})
+		name, modelTracks, err := discovery.FetchPlaylistByMBID(httpClient, mbid)
+		if err != nil {
+			return FetchResult{}, err
+		}
+		tracks := modelTracksToPlaylistTracks(modelTracks)
+		return FetchResult{Name: name, Tracks: tracks}, nil
+	}
+}
+
+// extractSourceID validates a URL and returns the canonical ID for the given source.
+func extractSourceID(source, url string) (string, error) {
+	switch source {
+	case "apple_music":
+		return extractAppleMusicID(url)
+	case "spotify":
+		return extractSpotifyID(url)
+	default:
+		return extractLBMBID(url)
+	}
+}
+
+// isDuplicate checks whether a playlist with the same source and source ID already exists.
+func isDuplicate(source, sourceID string, existing []CustomPlaylist) (string, bool) {
+	for _, p := range existing {
+		if p.Source != source && p.Source != "" {
+			continue
+		}
+		existID, _ := extractSourceID(p.Source, p.SourceURL)
+		if existID == "" && p.LBMBID != "" {
+			existID = p.LBMBID
+		}
+		if existID == "" {
+			continue
+		}
+		if existID == sourceID {
+			return p.ID, true
+		}
+	}
+	return "", false
+}
+
+// handleGetCustomPlaylists returns all saved custom playlists with a track_count
+// derived from their cache file (if present) and the current sync schedule from .env.
+func (s *Server) handleGetCustomPlaylists(w http.ResponseWriter, r *http.Request) {
+	playlists := loadCustomPlaylists(s.cfg.WebDataDir)
+
+	// Read .env to look up schedule state for each custom playlist.
+	var envValues map[string]string
+	if data, err := os.ReadFile(s.cfg.WebEnvPath); err == nil {
+		envValues = parseEnvText(string(data))
+	} else {
+		envValues = map[string]string{}
+	}
+
+	type respItem struct {
+		CustomPlaylist
+		TrackCount int    `json:"track_count"`
+		Schedule   string `json:"schedule"`
+		Flags      string `json:"flags"`
+	}
+	items := make([]respItem, 0, len(playlists))
+	for _, p := range playlists {
+		count := customPlaylistTrackCount(s.cfg.WebDataDir, p.ID)
+		prefix := customEnvPrefix(p.ID)
+		sched := envValues[prefix+"_SCHEDULE"]
+		flags := envValues[prefix+"_FLAGS"]
+		items = append(items, respItem{CustomPlaylist: p, TrackCount: count, Schedule: sched, Flags: flags})
+	}
+
+	w.Header().Set("Content-Type", "application/json")
+	if err := json.NewEncoder(w).Encode(items); err != nil {
+		slog.Error("custom-playlists: failed to write response", "err", err)
+	}
+}
+
+// handleImportCustomPlaylist imports a playlist by URL (ListenBrainz or Apple Music),
+// writes a cache, and returns the playlist name/tracks to the frontend for the import animation.
+func (s *Server) handleImportCustomPlaylist(w http.ResponseWriter, r *http.Request) {
+	var body struct {
+		URL         string `json:"url"`
+		Source      string `json:"source"` // "listenbrainz" | "apple_music"
+		RefreshDays int    `json:"refresh_days"`
+	}
+	if err := json.NewDecoder(r.Body).Decode(&body); err != nil {
+		http.Error(w, "invalid JSON: "+err.Error(), http.StatusBadRequest)
+		return
+	}
+
+	existing := loadCustomPlaylists(s.cfg.WebDataDir)
+
+	if body.Source == "" {
+		body.Source = "listenbrainz"
+	}
+
+	sourceID, err := extractSourceID(body.Source, body.URL)
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusBadRequest)
+		return
+	}
+	slog.Info("custom-playlists: import request", "source", body.Source, "source_id", sourceID, "refresh_days", body.RefreshDays)
+
+	if existingID, dup := isDuplicate(body.Source, sourceID, existing); dup {
+		slog.Warn("custom-playlists: duplicate import rejected", "source_id", sourceID, "existing_id", existingID)
+		http.Error(w, "playlist already imported", http.StatusConflict)
+		return
+	}
+
+	result, err := fetchCustomPlaylistTracks(CustomPlaylist{Source: body.Source, SourceURL: body.URL})
+	if err != nil {
+		slog.Error("custom-playlists: fetch failed", "source", body.Source, "err", err)
+		http.Error(w, "failed to fetch playlist: "+err.Error(), http.StatusBadGateway)
+		return
+	}
+
+	name := result.Name
+	tracks := result.Tracks
+	artworkURL := result.ArtworkURL
+	if name == "" {
+		name = "Imported Playlist"
+	}
+	slog.Info("custom-playlists: fetched", "source", body.Source, "name", name, "tracks", len(tracks))
+
+	// Ensure data directories exist before writing anything
+	if err := os.MkdirAll(filepath.Join(s.cfg.WebDataDir, "cache"), 0755); err != nil {
+		slog.Error("custom-playlists: failed to create data dir", "err", err)
+		http.Error(w, "server data directory unavailable: "+err.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	// Generate a short unique ID
+	id := fmt.Sprintf("custom-%x", rand.Uint32())
+
+	// Write cache with remote cover URLs synchronously so the response is fast,
+	// then download local copies of cover art in the background.
+	slog.Info("custom-playlists: writing cache", "id", id)
+	if !writePreliminaryCache(s.cfg.WebDataDir, id, tracks) {
+		http.Error(w, "failed to write playlist cache", http.StatusInternalServerError)
+		return
+	}
+	go downloadAndCacheCovers(s.cfg.WebDataDir, id, tracks)
+
+	// Cache the playlist's own artwork locally so we can later push it to the
+	// music app on first playlist creation. Apple Music imports have artwork;
+	// ListenBrainz don't.
+	if artworkURL != "" {
+		go func() {
+			if _, err := util.DownloadFile(artworkURL, CustomPlaylistArtworkPath(s.cfg.WebDataDir, id)); err != nil {
+				slog.Warn("custom-playlists: artwork download failed", "id", id, "err", err.Error())
+			}
+		}()
+	}
+
+	// Save metadata
+	// Derive LBMBID for backward compatibility (LB playlists only)
+	var lbMBID string
+	if body.Source != "apple_music" && body.Source != "spotify" {
+		lbMBID = sourceID
+	}
+
+	cp := CustomPlaylist{
+		ID:          id,
+		Name:        name,
+		Source:      body.Source,
+		SourceURL:   body.URL,
+		LBMBID:      lbMBID,     // empty for apple_music
+		ArtworkURL:  artworkURL, // empty for listenbrainz
+		RefreshDays: body.RefreshDays,
+		ColorIndex:  len(existing),
+		LastFetched: time.Now().UTC(),
+	}
+	existing = append(existing, cp)
+	if err := saveCustomPlaylists(s.cfg.WebDataDir, existing); err != nil {
+		slog.Error("custom-playlists: failed to save metadata", "err", err)
+		http.Error(w, "failed to save playlist metadata: "+err.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	// Mark the playlist as active by writing FLAGS. For non-Never cadence, also write
+	// a daily poll SCHEDULE — RefreshDays in the JSON gates the actual refresh interval
+	// inside the cron task body. "Never" imports get FLAGS only so the card is usable
+	// for manual runs while the schedule editor pre-selects "Never".
+	prefix := customEnvPrefix(id)
+	envUpdates := map[string]string{
+		prefix + "_FLAGS": "--playlist " + id,
+	}
+	if body.RefreshDays > 0 {
+		envUpdates[prefix+"_SCHEDULE"] = "0 4 * * *"
+	}
+	_ = updateEnvKeys(s.cfg.WebEnvPath, envUpdates, web.SampleEnv)
+
+	slog.Info("custom-playlists: import complete", "id", id, "name", name)
+
+	// Collect up to 6 unique remote cover URLs for the import animation
+	seen := make(map[string]bool)
+	covers := make([]string, 0, 6)
+	for _, t := range tracks {
+		if t.CoverURL != "" && !seen[t.CoverURL] {
+			seen[t.CoverURL] = true
+			covers = append(covers, t.CoverURL)
+		}
+		if len(covers) >= 6 {
+			break
+		}
+	}
+
+	w.Header().Set("Content-Type", "application/json")
+	if err := json.NewEncoder(w).Encode(map[string]any{
+		"id":          id,
+		"name":        name,
+		"track_count": len(tracks),
+		"cover_urls":  covers,
+		"color_index": cp.ColorIndex,
+		"artwork_url": artworkURL,
+	}); err != nil {
+		slog.Error("custom-playlists: failed to write import response", "err", err)
+	}
+}
+
+// handleRefreshCustomPlaylist re-fetches a custom playlist and updates the cache.
+// Equivalent to manually triggering the nightly refresh cron job for a single playlist.
+func (s *Server) handleRefreshCustomPlaylist(w http.ResponseWriter, r *http.Request) {
+	id := r.PathValue("id")
+	if !customIDRe.MatchString(id) {
+		http.Error(w, "invalid playlist id", http.StatusBadRequest)
+		return
+	}
+
+	playlists := loadCustomPlaylists(s.cfg.WebDataDir)
+	idx := -1
+	for i, p := range playlists {
+		if p.ID == id {
+			idx = i
+			break
+		}
+	}
+	if idx == -1 {
+		http.Error(w, "playlist not found", http.StatusNotFound)
+		return
+	}
+
+	p := playlists[idx]
+	slog.Info("custom-playlists: manual refresh", "id", id, "source", p.Source)
+
+	result, err := fetchCustomPlaylistTracks(p)
+	if err != nil {
+		slog.Error("custom-playlists: refresh fetch failed", "id", id, "err", err)
+		http.Error(w, "failed to fetch playlist: "+err.Error(), http.StatusBadGateway)
+		return
+	}
+	tracks := result.Tracks
+
+	if !writePreliminaryCache(s.cfg.WebDataDir, id, tracks) {
+		http.Error(w, "failed to write playlist cache", http.StatusInternalServerError)
+		return
+	}
+	go downloadAndCacheCovers(s.cfg.WebDataDir, id, tracks)
+
+	playlists[idx].LastFetched = time.Now().UTC()
+	if err := saveCustomPlaylists(s.cfg.WebDataDir, playlists); err != nil {
+		slog.Warn("custom-playlists: failed to update last_fetched after refresh", "err", err)
+	}
+
+	slog.Info("custom-playlists: refresh complete", "id", id, "tracks", len(tracks))
+	w.Header().Set("Content-Type", "application/json")
+	if err := json.NewEncoder(w).Encode(map[string]any{"track_count": len(tracks)}); err != nil {
+		slog.Error("custom-playlists: failed to write refresh response", "err", err)
+	}
+}
+
+// handleDeleteCustomPlaylist removes a custom playlist's metadata and cache file.
+// If ?delete_tracks=true is set and USE_SUBDIRECTORY is on, also removes the
+// playlist's download subdirectories from DOWNLOAD_DIR.
+func (s *Server) handleDeleteCustomPlaylist(w http.ResponseWriter, r *http.Request) {
+	id := r.PathValue("id")
+	if !customIDRe.MatchString(id) {
+		slog.Warn("custom-playlists: invalid id in delete request", "id", id)
+		http.Error(w, "invalid playlist id", http.StatusBadRequest)
+		return
+	}
+	deleteTracks := r.URL.Query().Get("delete_tracks") == "true"
+	slog.Info("custom-playlists: delete request", "id", id, "delete_tracks", deleteTracks)
+
+	existing := loadCustomPlaylists(s.cfg.WebDataDir)
+	filtered := existing[:0]
+	found := false
+	for _, p := range existing {
+		if p.ID == id {
+			found = true
+		} else {
+			filtered = append(filtered, p)
+		}
+	}
+	if !found {
+		http.Error(w, "playlist not found", http.StatusNotFound)
+		return
+	}
+
+	if err := saveCustomPlaylists(s.cfg.WebDataDir, filtered); err != nil {
+		http.Error(w, "failed to save: "+err.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	// Remove the cache file; ignore error if already gone
+	cachePath := filepath.Join(s.cfg.WebDataDir, "cache", id+".json")
+	_ = os.Remove(cachePath)
+
+	// Remove schedule env vars from .env
+	prefix := customEnvPrefix(id)
+	_ = updateEnvKeys(s.cfg.WebEnvPath, map[string]string{
+		prefix + "_SCHEDULE": "",
+		prefix + "_FLAGS":    "",
+	}, web.SampleEnv)
+
+	if deleteTracks {
+		if data, err := os.ReadFile(s.cfg.WebEnvPath); err == nil {
+			env := parseEnvText(string(data))
+			if env["USE_SUBDIRECTORY"] == "true" && env["DOWNLOAD_DIR"] != "" {
+				prefix := cases.Title(language.Und).String(id) // "custom-1234" -> "Custom-1234"
+				removed, err := util.RemoveDirsByPrefix(env["DOWNLOAD_DIR"], prefix)
+				if err != nil {
+					slog.Warn("custom-playlists: track cleanup failed", "id", id, "err", err)
+				} else {
+					slog.Info("custom-playlists: removed download dirs", "id", id, "count", removed)
+					if removed > 0 {
+						s.triggerLibraryRefresh()
+					}
+				}
+			} else {
+				slog.Info("custom-playlists: skipping track cleanup", "id", id,
+					"use_subdir", env["USE_SUBDIRECTORY"], "download_dir", env["DOWNLOAD_DIR"])
+			}
+		}
+	}
+
+	slog.Info("custom-playlists: deleted", "id", id)
+	w.WriteHeader(http.StatusNoContent)
+}
+
+// customPlaylistTrackCount reads the cached track count for a custom playlist without
+// fully parsing the JSON.
+func customPlaylistTrackCount(cfgDir, id string) int {
+	type mini struct {
+		Tracks []json.RawMessage `json:"tracks"`
+	}
+	data, err := os.ReadFile(filepath.Join(cfgDir, "cache", id+".json"))
+	if err != nil {
+		return 0
+	}
+	var m mini
+	if err := json.Unmarshal(data, &m); err != nil {
+		return 0
+	}
+	return len(m.Tracks)
+}
diff --git a/src/web/backend/jobs.go b/src/web/backend/jobs.go
index 096b7e29..33c0795c 100644
--- a/src/web/backend/jobs.go
+++ b/src/web/backend/jobs.go
@@ -49,6 +49,67 @@ func (j *Jobs) RegisterCoverCleanup(schedule, coversDir string, maxBytes int64)
 	return err
 }
 
+// RegisterCustomPlaylistRefresh registers a cache-refresh job for each custom playlist
+// using its stored schedule. Falls back to daily at 4 AM if no schedule is set.
+func (j *Jobs) RegisterCustomPlaylistRefresh(cfgDir, envPath string) error {
+	playlists := loadCustomPlaylists(cfgDir)
+	if len(playlists) == 0 {
+		return nil
+	}
+
+	var envValues map[string]string
+	if data, err := os.ReadFile(envPath); err == nil {
+		envValues = parseEnvText(string(data))
+	} else {
+		envValues = map[string]string{}
+	}
+
+	for _, p := range playlists {
+		p := p
+		prefix := customEnvPrefix(p.ID)
+		flags := envValues[prefix+"_FLAGS"]
+		if flags == "" {
+			continue // disabled
+		}
+		schedule := envValues[prefix+"_SCHEDULE"]
+		if p.RefreshDays <= 0 && schedule == "" {
+			continue
+		}
+		if schedule == "" {
+			schedule = "0 4 * * *"
+		}
+		_, err := j.scheduler.NewJob(
+			gocron.CronJob(schedule, false),
+			gocron.NewTask(func() {
+				if time.Since(p.LastFetched) < time.Duration(p.RefreshDays)*24*time.Hour {
+					return
+				}
+				slog.Info("custom-playlists: refreshing", "id", p.ID, "name", p.Name, "source", p.Source)
+				result, err := fetchCustomPlaylistTracks(p)
+				if err != nil {
+					slog.Warn("custom-playlists: refresh fetch failed", "id", p.ID, "err", err)
+					return
+				}
+				writePrefetchCache(cfgDir, p.ID, result.Tracks)
+				playlists := loadCustomPlaylists(cfgDir)
+				for i, pl := range playlists {
+					if pl.ID == p.ID {
+						playlists[i].LastFetched = time.Now().UTC()
+						break
+					}
+				}
+				if err := saveCustomPlaylists(cfgDir, playlists); err != nil {
+					slog.Error("custom-playlists: failed to save after refresh", "err", err)
+				}
+			}),
+		)
+		if err != nil {
+			slog.Warn("custom-playlists: failed to register refresh job", "id", p.ID, "err", err)
+		}
+	}
+	return nil
+}
+
 func trimCacheDir(dataDir string, maxBytes int64) {
 
 	var files []fileInfo
diff --git a/src/web/backend/middleware.go b/src/web/backend/middleware.go
index a5f27b3a..6d77834b 100644
--- a/src/web/backend/middleware.go
+++ b/src/web/backend/middleware.go
@@ -39,6 +39,15 @@ func (w *sessionResponseWriter) Unwrap() http.ResponseWriter {
 	return w.ResponseWriter
 }
 
+// Flush forwards to the wrapped ResponseWriter so SSE handlers can do
+// w.(http.Flusher) — without this, the auth middleware breaks streaming.
+func (w *sessionResponseWriter) Flush() {
+	if f, ok := w.ResponseWriter.(http.Flusher); ok {
+		writeCookieIfNecessary(w)
+		f.Flush()
+	}
+}
+
 func NewInMemorySessionStore() *InMemorySessionStore {
 	return &InMemorySessionStore{
 		sessions: make(map[string]*Session),
diff --git a/src/web/backend/playlists.go b/src/web/backend/playlists.go
index c2a233df..a427aa1d 100644
--- a/src/web/backend/playlists.go
+++ b/src/web/backend/playlists.go
@@ -15,12 +15,23 @@ import (
 	"net/http"
 	"os"
 	"path/filepath"
+	"regexp"
 	"strings"
-	"time"
 )
 
 const lbAPIBase = "https://api.listenbrainz.org/1"
 
+// PlaylistTrack represents a single track fetched from any playlist source.
+// Replaces the raw [][4]string{title, artist, album, coverURL} pattern
+// with named fields and adds MainArtist for accurate matching in music servers.
+type PlaylistTrack struct {
+	Title      string
+	Artist     string
+	MainArtist string
+	Album      string
+	CoverURL   string
+}
+
 // validPlaylistTypes is derived from playlistDefs — no manual sync needed.
 var validPlaylistTypes = func() map[string]bool {
 	m := make(map[string]bool, len(playlistDefs))
@@ -30,11 +41,18 @@ var validPlaylistTypes = func() map[string]bool {
 	return m
 }()
 
+var customIDRe = regexp.MustCompile(`^custom-[a-z0-9]+$`)
+
+// isValidPlaylistID accepts built-in playlist types and custom-* IDs (blocks path traversal).
+func isValidPlaylistID(t string) bool {
+	return validPlaylistTypes[t] || customIDRe.MatchString(t)
+}
+
 // handleGetPlaylist serves the tracklist cache written by explo during its last run.
 // Returns an empty track list if no cache exists yet.
 func (s *Server) handleGetPlaylist(w http.ResponseWriter, r *http.Request) {
 	playlistType := r.URL.Query().Get("type")
-	if !validPlaylistTypes[playlistType] {
+	if !isValidPlaylistID(playlistType) {
 		http.Error(w, "unknown playlist type", http.StatusBadRequest)
 		return
 	}
@@ -58,126 +76,34 @@ func (s *Server) handleGetPlaylist(w http.ResponseWriter, r *http.Request) {
 
 // ── LB fallback ──────────────────────────────────────────────────────────────
 
-type lbCreatedForResp struct {
-	Count         int `json:"count"`
-	Offset        int `json:"offset"`
-	PlaylistCount int `json:"playlist_count"`
-	Playlists     []struct {
-		Playlist struct {
-			Date       time.Time `json:"date"`
-			Identifier string    `json:"identifier"`
-			Extension  struct {
-				JspfPlaylist struct {
-					AdditionalMetadata struct {
-						AlgorithmMetadata struct {
-							SourcePatch string `json:"source_patch"`
-						} `json:"algorithm_metadata"`
-					} `json:"additional_metadata"`
-				} `json:"https://musicbrainz.org/doc/jspf#playlist"`
-			} `json:"extension"`
-		} `json:"playlist"`
-	} `json:"playlists"`
-}
-
-type lbPlaylistResp struct {
-	Playlist struct {
-		Track []struct {
-			Title     string `json:"title"`
-			Creator   string `json:"creator"`
-			Album     string `json:"album"`
-			Extension struct {
-				JspfTrack struct {
-					AdditionalMetadata struct {
-						CaaID          int64  `json:"caa_id"`
-						CaaReleaseMbid string `json:"caa_release_mbid"`
-					} `json:"additional_metadata"`
-				} `json:"https://musicbrainz.org/doc/jspf#track"`
-			} `json:"extension"`
-		} `json:"track"`
-	} `json:"playlist"`
-}
-
-func fetchOnRepeatTracks(username string) ([][4]string, error) {
-	body, err := lbGet(fmt.Sprintf("%s/stats/user/%s/recordings?count=30&range=month", lbAPIBase, username))
+func fetchOnRepeatTracks(username string) ([]PlaylistTrack, error) {
+	tracks, err := discovery.FetchTopRecordings(util.NewHttp(util.HttpClientConfig{Timeout: 30}), username)
 	if err != nil {
-		return nil, fmt.Errorf("on-repeat stats fetch: %w", err)
-	}
-	var resp discovery.TopRecordings
-	if err := json.Unmarshal(body, &resp); err != nil {
-		return nil, fmt.Errorf("on-repeat stats parse: %w", err)
-	}
-	out := make([][4]string, 0, len(resp.Payload.Recordings))
-	for _, rec := range resp.Payload.Recordings {
-		var cover string
-		if rec.ReleaseMbid != "" {
-			cover = fmt.Sprintf("https://coverartarchive.org/release/%s/front-250", rec.ReleaseMbid)
-		}
-		out = append(out, [4]string{rec.TrackName, rec.ArtistName, rec.ReleaseName, cover})
+		return nil, err
 	}
-	return out, nil
+	return modelTracksToPlaylistTracks(tracks), nil
 }
 
-func fetchMostRecentLBPlaylist(username, playlistType string) ([][4]string, time.Time, error) {
-	var offset int
-	var bestDate time.Time
-	var bestID string
-
-	for {
-		url := fmt.Sprintf("%s/user/%s/playlists/createdfor?offset=%d", lbAPIBase, username, offset)
-		body, err := lbGet(url)
-		if err != nil {
-			return nil, time.Time{}, fmt.Errorf("createdfor fetch: %w", err)
-		}
-		var resp lbCreatedForResp
-		if err := json.Unmarshal(body, &resp); err != nil {
-			return nil, time.Time{}, fmt.Errorf("createdfor parse: %w", err)
-		}
-		for _, p := range resp.Playlists {
-			patch := p.Playlist.Extension.JspfPlaylist.AdditionalMetadata.AlgorithmMetadata.SourcePatch
-			if patch != playlistType {
-				continue
-			}
-			if bestID == "" || p.Playlist.Date.After(bestDate) {
-				bestDate = p.Playlist.Date
-				parts := strings.Split(p.Playlist.Identifier, "/")
-				bestID = parts[len(parts)-1]
-			}
-		}
-		fetched := resp.Count + resp.Offset
-		if fetched >= resp.PlaylistCount || resp.Count == 0 {
-			break
-		}
-		offset += resp.Count
-	}
-
-	if bestID == "" {
-		return nil, time.Time{}, nil
-	}
-
-	body, err := lbGet(fmt.Sprintf("%s/playlist/%s", lbAPIBase, bestID))
+func fetchMostRecentLBPlaylist(username, playlistType string) ([]PlaylistTrack, error) {
+	tracks, err := discovery.FetchMostRecentPlaylistByType(util.NewHttp(util.HttpClientConfig{Timeout: 30}), username, playlistType)
 	if err != nil {
-		return nil, time.Time{}, fmt.Errorf("playlist fetch: %w", err)
-	}
-	var resp lbPlaylistResp
-	if err := json.Unmarshal(body, &resp); err != nil {
-		return nil, time.Time{}, fmt.Errorf("playlist parse: %w", err)
+		return nil, err
 	}
+	return modelTracksToPlaylistTracks(tracks), nil
+}
 
-	out := make([][4]string, 0, len(resp.Playlist.Track))
-	for _, t := range resp.Playlist.Track {
-		meta := t.Extension.JspfTrack.AdditionalMetadata
-		var cover string
-		if meta.CaaReleaseMbid != "" && meta.CaaID != 0 {
-			coverSize := os.Getenv("COVERART_SIZE")
-			if coverSize == "" {
-				coverSize = "250"
-			}
-			cover = fmt.Sprintf("https://coverartarchive.org/release/%s/%d-%s.jpg",
-				meta.CaaReleaseMbid, meta.CaaID, coverSize)
+func modelTracksToPlaylistTracks(tracks []*models.Track) []PlaylistTrack {
+	out := make([]PlaylistTrack, len(tracks))
+	for i, t := range tracks {
+		out[i] = PlaylistTrack{
+			Title:      t.CleanTitle,
+			Artist:     t.Artist,
+			MainArtist: t.MainArtist,
+			Album:      t.Album,
+			CoverURL:   t.CoverURL,
 		}
-		out = append(out, [4]string{t.Title, t.Creator, t.Album, cover})
 	}
-	return out, bestDate, nil
+	return out
 }
 
 // writePlaylistCache downloads cover art and writes a tracklist JSON for the web UI.
@@ -282,12 +208,12 @@ func (s *Server) handlePrefetchCovers(w http.ResponseWriter, r *http.Request) {
 				slog.Info("prefetch: cache already exists, skipping", "playlist", pt)
 				continue
 			}
-			var tracks [][4]string
+			var tracks []PlaylistTrack
 			var err error
 			if pt == "on-repeat" {
 				tracks, err = fetchOnRepeatTracks(body.User)
 			} else {
-				tracks, _, err = fetchMostRecentLBPlaylist(body.User, pt)
+				tracks, err = fetchMostRecentLBPlaylist(body.User, pt)
 			}
 			if err != nil {
 				slog.Warn("prefetch: failed to fetch LB playlist", "type", pt, "err", err)
@@ -300,44 +226,52 @@ func (s *Server) handlePrefetchCovers(w http.ResponseWriter, r *http.Request) {
 }
 
 type cachedPrefetchTrack struct {
-	Rank     int    `json:"rank"`
-	Title    string `json:"title"`
-	Artist   string `json:"artist"`
-	Release  string `json:"release"`
-	CoverURL string `json:"coverUrl,omitempty"`
+	Rank       int    `json:"rank"`
+	Title      string `json:"title"`
+	Artist     string `json:"artist"`
+	MainArtist string `json:"mainArtist,omitempty"`
+	Release    string `json:"release"`
+	CoverURL   string `json:"coverUrl,omitempty"`
 }
 
-func writePrefetchCache(cfgDir, playlistType string, tracks [][4]string) {
+// writePreliminaryCache writes the track cache with remote cover URLs immediately.
+// Returns false if the write fails.
+func writePreliminaryCache(cfgDir, playlistType string, tracks []PlaylistTrack) bool {
 	ct := make([]cachedPrefetchTrack, len(tracks))
 	for i, t := range tracks {
-		ct[i] = cachedPrefetchTrack{
-			Rank:     i + 1,
-			Title:    t[0],
-			Artist:   t[1],
-			Release:  t[2],
-			CoverURL: t[3],
-		}
+		ct[i] = cachedPrefetchTrack{Rank: i + 1, Title: t.Title, Artist: t.Artist, MainArtist: t.MainArtist, Release: t.Album, CoverURL: t.CoverURL}
 	}
-
 	if !writeTrackCache(cfgDir, playlistType, ct) {
-		return
+		return false
 	}
 	slog.Info("prefetch: cache written", "playlist", playlistType, "covers", "remote")
+	return true
+}
 
+// downloadAndCacheCovers downloads cover art and rewrites the cache with local URLs.
+// Safe to call in a goroutine.
+func downloadAndCacheCovers(cfgDir, playlistType string, tracks []PlaylistTrack) {
 	coversDir := filepath.Join(cfgDir, "cache", "covers")
 	if err := os.MkdirAll(coversDir, 0755); err != nil {
 		slog.Error("prefetch: failed to create covers dir", "err", err.Error())
 		return
 	}
-
+	ct := make([]cachedPrefetchTrack, len(tracks))
 	for i, t := range tracks {
-		ct[i].CoverURL = util.DownloadCover(t[3], coversDir)
+		ct[i] = cachedPrefetchTrack{Rank: i + 1, Title: t.Title, Artist: t.Artist, MainArtist: t.MainArtist, Release: t.Album, CoverURL: util.DownloadCover(t.CoverURL, coversDir)}
 	}
 	if writeTrackCache(cfgDir, playlistType, ct) {
 		slog.Info("prefetch: cache updated", "playlist", playlistType, "covers", "local")
 	}
 }
 
+func writePrefetchCache(cfgDir, playlistType string, tracks []PlaylistTrack) {
+	if !writePreliminaryCache(cfgDir, playlistType, tracks) {
+		return
+	}
+	downloadAndCacheCovers(cfgDir, playlistType, tracks)
+}
+
 // ── Background art ───────────────────────────────────────────────────────────
 
 type sitewideReleasesResp struct {
diff --git a/src/web/backend/server.go b/src/web/backend/server.go
index 032fec5d..dcdabff6 100644
--- a/src/web/backend/server.go
+++ b/src/web/backend/server.go
@@ -171,9 +171,12 @@ func (s *Server) startJobs() {
 	coversDir := filepath.Join(s.cfg.WebDataDir, "cache", "covers")
 	if err := s.cronJobs.RegisterCoverCleanup(
 		"0 3 * * *", coversDir, s.cfg.CacheSizeMB<<20); err != nil {
-			slog.Warn("failed to register cover cleanup job", "err", err.Error())
-		}
+		slog.Warn("failed to register cover cleanup job", "err", err.Error())
+	}
 
+	if err := s.cronJobs.RegisterCustomPlaylistRefresh(s.cfg.WebDataDir, s.cfg.WebEnvPath); err != nil {
+		slog.Warn("failed to register custom playlist refresh job", "err", err.Error())
+	}
 
 	s.cronJobs.Start()
 }
@@ -236,6 +239,10 @@ func (s *Server) registerRoutes() {
 	s.mux.Handle("GET /api/ui/logs", s.authStore.RequireAuth(http.HandlerFunc(s.handleGetLog)))
 	s.mux.Handle("GET /api/ui/playlists", s.authStore.RequireAuth(http.HandlerFunc(s.handleGetPlaylist)))
 	s.mux.Handle("POST /api/ui/playlists/prefetch", s.authStore.RequireAuth(http.HandlerFunc(s.handlePrefetchCovers)))
+	s.mux.Handle("GET /api/ui/custom-playlists", s.authStore.RequireAuth(http.HandlerFunc(s.handleGetCustomPlaylists)))
+	s.mux.Handle("POST /api/ui/custom-playlists", s.authStore.RequireAuth(http.HandlerFunc(s.handleImportCustomPlaylist)))
+	s.mux.Handle("DELETE /api/ui/custom-playlists/{id}", s.authStore.RequireAuth(http.HandlerFunc(s.handleDeleteCustomPlaylist)))
+	s.mux.Handle("POST /api/ui/custom-playlists/{id}/refresh", s.authStore.RequireAuth(http.HandlerFunc(s.handleRefreshCustomPlaylist)))
 	s.mux.Handle("POST /api/ui/logout", s.authStore.RequireAuth(http.HandlerFunc(s.handleLogout)))
 	s.mux.HandleFunc("GET /api/ui/csrf", s.csrfHandler)
 	s.mux.HandleFunc("POST /api/ui/login", s.handleLogin)
@@ -474,14 +481,30 @@ func (s *Server) handleSaveSchedule(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	def, ok := playlistDefs[body.Name]
-	if !ok {
+	var envPrefix string
+	var defaultFlags string
+
+	if def, ok := playlistDefs[body.Name]; ok {
+		envPrefix = def.EnvPrefix
+		defaultFlags = def.DefaultFlags
+	} else if customIDRe.MatchString(body.Name) {
+		envPrefix = customEnvPrefix(body.Name)
+		defaultFlags = "--playlist " + body.Name
+	} else {
 		http.Error(w, "unknown playlist name", http.StatusBadRequest)
 		return
 	}
 
 	updates := map[string]string{}
-	if body.Enabled {
+	if !body.Enabled {
+		// Toggle off — truly disable, regardless of day value carried over from state
+		updates[envPrefix+"_SCHEDULE"] = ""
+		updates[envPrefix+"_FLAGS"] = ""
+	} else if body.Day == -2 {
+		// "Never" — keep playlist active for manual runs but remove auto-schedule
+		updates[envPrefix+"_SCHEDULE"] = ""
+		updates[envPrefix+"_FLAGS"] = defaultFlags
+	} else {
 		dom := "*"
 		dow := "*"
 		if body.Day == 100 {
@@ -489,11 +512,8 @@ func (s *Server) handleSaveSchedule(w http.ResponseWriter, r *http.Request) {
 		} else if body.Day >= 0 {
 			dow = fmt.Sprintf("%d", body.Day)
 		}
-		updates[def.EnvPrefix+"_SCHEDULE"] = fmt.Sprintf("%d %d %s * %s", body.Minute, body.Hour, dom, dow)
-		updates[def.EnvPrefix+"_FLAGS"] = def.DefaultFlags
-	} else {
-		updates[def.EnvPrefix+"_SCHEDULE"] = ""
-		updates[def.EnvPrefix+"_FLAGS"] = ""
+		updates[envPrefix+"_SCHEDULE"] = fmt.Sprintf("%d %d %s * %s", body.Minute, body.Hour, dom, dow)
+		updates[envPrefix+"_FLAGS"] = defaultFlags
 	}
 
 	if err := updateEnvKeys(s.cfg.WebEnvPath, updates, web.SampleEnv); err != nil {
@@ -779,6 +799,28 @@ func (s *Server) handleRun(w http.ResponseWriter, r *http.Request) {
 	}
 }
 
+// triggerLibraryRefresh spawns the CLI with --refresh-only in the background to
+// nudge the configured media server's library scan. Fire-and-forget: errors are
+// logged but do not block the caller.
+func (s *Server) triggerLibraryRefresh() {
+	go func() {
+		cmd := exec.Command(s.cfg.ExploPath, "--refresh-only", "--config", s.cfg.WebEnvPath)
+		env := make([]string, 0, len(os.Environ()))
+		for _, e := range os.Environ() {
+			if !strings.HasPrefix(e, "WEB_UI=") {
+				env = append(env, e)
+			}
+		}
+		cmd.Env = env
+		out, err := cmd.CombinedOutput()
+		if err != nil {
+			slog.Warn("library refresh failed", "err", err.Error(), "output", string(out))
+			return
+		}
+		slog.Info("library refresh complete")
+	}()
+}
+
 func (s *Server) startRun(args []string) error {
 	ctx, cancel := context.WithCancel(context.Background())
 	cmd := exec.CommandContext(ctx, s.cfg.ExploPath, args...)
diff --git a/src/web/backend/spotify.go b/src/web/backend/spotify.go
new file mode 100644
index 00000000..202e9029
--- /dev/null
+++ b/src/web/backend/spotify.go
@@ -0,0 +1,811 @@
+package backend
+
+import (
+	"bytes"
+	"crypto/hmac"
+	"crypto/sha1"
+	"encoding/base32"
+	"encoding/base64"
+	"encoding/binary"
+	"encoding/json"
+	"fmt"
+	"io"
+	"log/slog"
+	"net/http"
+	"net/http/cookiejar"
+	"net/url"
+	"regexp"
+	"strconv"
+	"strings"
+	"sync"
+	"time"
+)
+
+// ── URL parsing ──────────────────────────────────────────────────────────────
+
+var spotifyPlaylistURLRe = regexp.MustCompile(
+	`^https?://open\.spotify\.com/(?:[a-z]{2}-[a-z]{2}/|[a-z]{2}/)?playlist/([a-zA-Z0-9]+)`,
+)
+
+func extractSpotifyID(raw string) (string, error) {
+	raw = strings.TrimSpace(raw)
+	if idx := strings.IndexByte(raw, '?'); idx != -1 {
+		raw = raw[:idx]
+	}
+	m := spotifyPlaylistURLRe.FindStringSubmatch(raw)
+	if len(m) < 2 {
+		return "", fmt.Errorf("not a valid Spotify playlist URL")
+	}
+	return m[1], nil
+}
+
+// ── TOTP authentication ─────────────────────────────────────────────────────
+//
+// Spotify's web player authenticates with a TOTP token derived from a secret
+// that rotates with client updates. We fetch the latest secret from a
+// community-maintained repo, falling back to a hardcoded snapshot.
+
+var (
+	fallbackTOTPVersion = 61
+	fallbackTOTPSecret  = []byte{
+		44, 55, 47, 42, 70, 40, 34, 114, 76, 74,
+		50, 111, 120, 97, 75, 76, 94, 102, 43, 69,
+		49, 120, 118, 80, 64, 78,
+	}
+)
+
+var (
+	secretCacheMu     sync.Mutex
+	cachedVersion     int
+	cachedSecret      []byte
+	secretCacheExpiry time.Time
+)
+
+const secretCacheTTL = 15 * time.Minute
+
+// getSpotifyTOTPSecret returns the current TOTP version and secret bytes.
+// Fetches from the remote secrets repo, cached for 15 minutes, with a
+// hardcoded fallback if the remote is unreachable.
+func getSpotifyTOTPSecret() (int, []byte) {
+	secretCacheMu.Lock()
+	defer secretCacheMu.Unlock()
+
+	if cachedSecret != nil && time.Now().Before(secretCacheExpiry) {
+		return cachedVersion, cachedSecret
+	}
+
+	client := &http.Client{Timeout: 5 * time.Second}
+	resp, err := client.Get("https://code.thetadev.de/ThetaDev/spotify-secrets/raw/branch/main/secrets/secretDict.json")
+	if err != nil {
+		slog.Debug("spotify: failed to fetch remote secrets, using fallback", "err", err)
+		return fallbackTOTPVersion, fallbackTOTPSecret
+	}
+	defer func() { _ = resp.Body.Close() }()
+
+	if resp.StatusCode != http.StatusOK {
+		slog.Debug("spotify: remote secrets returned non-200, using fallback", "status", resp.StatusCode)
+		return fallbackTOTPVersion, fallbackTOTPSecret
+	}
+
+	var secrets map[string][]int
+	if err := json.NewDecoder(resp.Body).Decode(&secrets); err != nil {
+		slog.Debug("spotify: failed to parse remote secrets, using fallback", "err", err)
+		return fallbackTOTPVersion, fallbackTOTPSecret
+	}
+
+	// Find the highest version key
+	maxVer := -1
+	var maxKey string
+	for k := range secrets {
+		v, err := strconv.Atoi(k)
+		if err != nil {
+			continue
+		}
+		if v > maxVer {
+			maxVer = v
+			maxKey = k
+		}
+	}
+	if maxVer < 0 {
+		return fallbackTOTPVersion, fallbackTOTPSecret
+	}
+
+	raw := secrets[maxKey]
+	secret := make([]byte, len(raw))
+	for i, v := range raw {
+		secret[i] = byte(v)
+	}
+
+	cachedVersion = maxVer
+	cachedSecret = secret
+	secretCacheExpiry = time.Now().Add(secretCacheTTL)
+	slog.Debug("spotify: fetched remote TOTP secret", "version", maxVer, "len", len(secret))
+	return maxVer, secret
+}
+
+// generateSpotifyTOTP produces a 6-digit TOTP code and version number.
+// The secret bytes are XOR-transformed, joined as decimal strings, then
+// base32-encoded before being fed into standard RFC 6238 TOTP.
+func generateSpotifyTOTP() (string, int) {
+	version, secretBytes := getSpotifyTOTPSecret()
+
+	transformed := make([]int, len(secretBytes))
+	for i, b := range secretBytes {
+		transformed[i] = int(b) ^ ((i % 33) + 9)
+	}
+
+	var joined strings.Builder
+	for _, n := range transformed {
+		joined.WriteString(strconv.Itoa(n))
+	}
+
+	totpSecret := base32.StdEncoding.WithPadding(base32.NoPadding).EncodeToString([]byte(joined.String()))
+	return computeTOTP(totpSecret), version
+}
+
+// computeTOTP implements RFC 6238 with a 30-second period and 6-digit output.
+func computeTOTP(base32Secret string) string {
+	key, err := base32.StdEncoding.WithPadding(base32.NoPadding).DecodeString(base32Secret)
+	if err != nil {
+		key, _ = base32.StdEncoding.DecodeString(base32Secret)
+	}
+
+	counter := uint64(time.Now().Unix() / 30)
+	buf := make([]byte, 8)
+	binary.BigEndian.PutUint64(buf, counter)
+
+	mac := hmac.New(sha1.New, key)
+	mac.Write(buf)
+	hash := mac.Sum(nil)
+
+	offset := hash[len(hash)-1] & 0x0f
+	code := binary.BigEndian.Uint32(hash[offset:offset+4]) & 0x7fffffff
+	return fmt.Sprintf("%06d", code%1000000)
+}
+
+// ── Session management ──────────────────────────────────────────────────────
+//
+// A spotifySession caches all auth state (cookies, tokens, GraphQL hash) with
+// a 10-minute TTL. On failure the caller invalidates and retries once.
+
+const spotifyUA = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) " +
+	"AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36"
+
+type spotifySession struct {
+	mu            sync.Mutex
+	client        *http.Client
+	clientVersion string
+	deviceID      string
+	accessToken   string
+	clientID      string
+	clientToken   string
+	playlistHash  string
+	expiresAt     time.Time
+}
+
+var spSession = &spotifySession{}
+
+func (s *spotifySession) invalidate() {
+	s.mu.Lock()
+	defer s.mu.Unlock()
+	s.expiresAt = time.Time{}
+}
+
+// ensure initializes or reuses the session. Four-step flow:
+// visitHome → fetchAccessToken (TOTP) → fetchClientToken → extractPlaylistHash.
+func (s *spotifySession) ensure() error {
+	s.mu.Lock()
+	defer s.mu.Unlock()
+
+	if time.Now().Before(s.expiresAt) {
+		return nil
+	}
+
+	slog.Info("spotify: initializing new session")
+
+	jar, _ := cookiejar.New(nil)
+	s.client = &http.Client{Jar: jar, Timeout: 30 * time.Second}
+
+	jsPack, err := s.visitHome()
+	if err != nil {
+		return fmt.Errorf("spotify session: visit home failed: %w", err)
+	}
+	if err := s.fetchAccessToken(); err != nil {
+		return fmt.Errorf("spotify session: access token failed: %w", err)
+	}
+	if err := s.fetchClientToken(); err != nil {
+		return fmt.Errorf("spotify session: client token failed: %w", err)
+	}
+	if err := s.extractPlaylistHash(jsPack); err != nil {
+		return fmt.Errorf("spotify session: hash extraction failed: %w", err)
+	}
+
+	s.expiresAt = time.Now().Add(10 * time.Minute)
+
+	hashPreview := s.playlistHash
+	if len(hashPreview) > 16 {
+		hashPreview = hashPreview[:16] + "..."
+	}
+	slog.Info("spotify: session ready",
+		"version", s.clientVersion,
+		"hash", hashPreview,
+	)
+	return nil
+}
+
+// visitHome fetches open.spotify.com to establish cookies and extract the
+// client version, device ID (sp_t cookie), and web-player JS bundle URL.
+func (s *spotifySession) visitHome() (string, error) {
+	req, err := http.NewRequest("GET", "https://open.spotify.com", nil)
+	if err != nil {
+		return "", err
+	}
+	req.Header.Set("User-Agent", spotifyUA)
+	req.Header.Set("Accept", "text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8")
+	req.Header.Set("Accept-Language", "en-US,en;q=0.9")
+
+	resp, err := s.client.Do(req)
+	if err != nil {
+		return "", err
+	}
+	defer func() { _ = resp.Body.Close() }()
+
+	body, err := io.ReadAll(io.LimitReader(resp.Body, 2*1024*1024))
+	if err != nil {
+		return "", err
+	}
+	html := string(body)
+
+	// Client version from base64-encoded appServerConfig
+	const cfgStart = `<script id="appServerConfig" type="text/plain">`
+	const cfgEnd = `</script>`
+	startIdx := strings.Index(html, cfgStart)
+	if startIdx < 0 {
+		return "", fmt.Errorf("appServerConfig not found in page")
+	}
+	startIdx += len(cfgStart)
+	endIdx := strings.Index(html[startIdx:], cfgEnd)
+	if endIdx < 0 {
+		return "", fmt.Errorf("appServerConfig closing tag not found")
+	}
+
+	cfgJSON, err := base64.StdEncoding.DecodeString(strings.TrimSpace(html[startIdx : startIdx+endIdx]))
+	if err != nil {
+		cfgJSON, err = base64.RawStdEncoding.DecodeString(strings.TrimSpace(html[startIdx : startIdx+endIdx]))
+		if err != nil {
+			return "", fmt.Errorf("failed to decode appServerConfig: %w", err)
+		}
+	}
+
+	var serverCfg struct {
+		ClientVersion string `json:"clientVersion"`
+	}
+	if err := json.Unmarshal(cfgJSON, &serverCfg); err != nil {
+		return "", fmt.Errorf("failed to parse appServerConfig: %w", err)
+	}
+	s.clientVersion = serverCfg.ClientVersion
+
+	// Device ID from sp_t cookie
+	u, _ := url.Parse("https://open.spotify.com")
+	for _, c := range s.client.Jar.Cookies(u) {
+		if c.Name == "sp_t" {
+			s.deviceID = c.Value
+			break
+		}
+	}
+
+	// Find the web-player JS bundle
+	var jsPack string
+	for _, link := range extractJSLinks(html) {
+		if strings.Contains(link, "web-player/web-player") && strings.HasSuffix(link, ".js") {
+			jsPack = link
+			break
+		}
+	}
+	if jsPack == "" {
+		return "", fmt.Errorf("web-player JS pack not found in page")
+	}
+
+	return jsPack, nil
+}
+
+// fetchAccessToken obtains a bearer token via TOTP.
+func (s *spotifySession) fetchAccessToken() error {
+	totp, version := generateSpotifyTOTP()
+
+	tokenURL := "https://open.spotify.com/api/token?" + url.Values{
+		"reason":      {"init"},
+		"productType": {"web-player"},
+		"totp":        {totp},
+		"totpVer":     {strconv.Itoa(version)},
+		"totpServer":  {totp},
+	}.Encode()
+
+	req, err := http.NewRequest("GET", tokenURL, nil)
+	if err != nil {
+		return err
+	}
+	req.Header.Set("User-Agent", spotifyUA)
+	req.Header.Set("Accept", "application/json")
+	req.Header.Set("Referer", "https://open.spotify.com/")
+
+	resp, err := s.client.Do(req)
+	if err != nil {
+		return err
+	}
+	defer func() { _ = resp.Body.Close() }()
+
+	if resp.StatusCode != http.StatusOK {
+		b, _ := io.ReadAll(io.LimitReader(resp.Body, 512))
+		return fmt.Errorf("token endpoint returned %d: %s", resp.StatusCode, string(b))
+	}
+
+	var tok struct {
+		AccessToken string `json:"accessToken"`
+		ClientID    string `json:"clientId"`
+	}
+	if err := json.NewDecoder(resp.Body).Decode(&tok); err != nil {
+		return fmt.Errorf("failed to parse token response: %w", err)
+	}
+	if tok.AccessToken == "" {
+		return fmt.Errorf("received empty access token")
+	}
+
+	s.accessToken = tok.AccessToken
+	s.clientID = tok.ClientID
+	return nil
+}
+
+// fetchClientToken obtains a client token from clienttoken.spotify.com.
+func (s *spotifySession) fetchClientToken() error {
+	payload, err := json.Marshal(map[string]any{
+		"client_data": map[string]any{
+			"client_version": s.clientVersion,
+			"client_id":      s.clientID,
+			"js_sdk_data": map[string]any{
+				"device_brand": "unknown",
+				"device_model": "unknown",
+				"os":           "windows",
+				"os_version":   "NT 10.0",
+				"device_id":    s.deviceID,
+				"device_type":  "computer",
+			},
+		},
+	})
+	if err != nil {
+		return err
+	}
+
+	req, err := http.NewRequest("POST", "https://clienttoken.spotify.com/v1/clienttoken", bytes.NewReader(payload))
+	if err != nil {
+		return err
+	}
+	req.Header.Set("Content-Type", "application/json")
+	req.Header.Set("Accept", "application/json")
+	req.Header.Set("User-Agent", spotifyUA)
+
+	resp, err := s.client.Do(req)
+	if err != nil {
+		return err
+	}
+	defer func() { _ = resp.Body.Close() }()
+
+	if resp.StatusCode != http.StatusOK {
+		b, _ := io.ReadAll(io.LimitReader(resp.Body, 512))
+		return fmt.Errorf("client token endpoint returned %d: %s", resp.StatusCode, string(b))
+	}
+
+	var result struct {
+		ResponseType string `json:"response_type"`
+		GrantedToken struct {
+			Token string `json:"token"`
+		} `json:"granted_token"`
+	}
+	if err := json.NewDecoder(resp.Body).Decode(&result); err != nil {
+		return fmt.Errorf("failed to parse client token response: %w", err)
+	}
+	if result.ResponseType != "RESPONSE_GRANTED_TOKEN_RESPONSE" {
+		return fmt.Errorf("unexpected client token response type: %s", result.ResponseType)
+	}
+	if result.GrantedToken.Token == "" {
+		return fmt.Errorf("received empty client token")
+	}
+
+	s.clientToken = result.GrantedToken.Token
+	return nil
+}
+
+// extractPlaylistHash fetches the web-player JS bundle and its webpack chunks
+// to find the SHA256 hash for the "fetchPlaylist" persisted GraphQL query.
+func (s *spotifySession) extractPlaylistHash(jsPackURL string) error {
+	req, err := http.NewRequest("GET", jsPackURL, nil)
+	if err != nil {
+		return err
+	}
+	req.Header.Set("User-Agent", spotifyUA)
+
+	resp, err := s.client.Do(req)
+	if err != nil {
+		return err
+	}
+	defer func() { _ = resp.Body.Close() }()
+
+	packBody, err := io.ReadAll(io.LimitReader(resp.Body, 10*1024*1024))
+	if err != nil {
+		return err
+	}
+	jsContent := string(packBody)
+
+	// Check the main pack first
+	if hash := findPartHash(jsContent, "fetchPlaylist"); hash != "" {
+		s.playlistHash = hash
+		return nil
+	}
+
+	// Fall back to scanning webpack chunks
+	nameMap, hashMap, err := extractMappings(jsContent)
+	if err != nil {
+		return fmt.Errorf("failed to extract chunk mappings: %w", err)
+	}
+
+	chunkFiles := combineChunks(nameMap, hashMap)
+	slog.Debug("spotify: scanning JS chunks for hash", "count", len(chunkFiles))
+
+	type chunkResult struct {
+		content string
+		err     error
+	}
+
+	sem := make(chan struct{}, 10)
+	results := make(chan chunkResult, len(chunkFiles))
+
+	for _, file := range chunkFiles {
+		chunkURL := "https://open.spotifycdn.com/cdn/build/web-player/" + file
+		go func(u string) {
+			sem <- struct{}{}
+			defer func() { <-sem }()
+
+			r, err := http.NewRequest("GET", u, nil)
+			if err != nil {
+				results <- chunkResult{err: err}
+				return
+			}
+			r.Header.Set("User-Agent", spotifyUA)
+
+			resp, err := s.client.Do(r)
+			if err != nil {
+				results <- chunkResult{err: err}
+				return
+			}
+			defer func() { _ = resp.Body.Close() }()
+
+			b, err := io.ReadAll(io.LimitReader(resp.Body, 5*1024*1024))
+			if err != nil {
+				results <- chunkResult{err: err}
+				return
+			}
+			results <- chunkResult{content: string(b)}
+		}(chunkURL)
+	}
+
+	for i := 0; i < len(chunkFiles); i++ {
+		r := <-results
+		if r.err != nil {
+			continue
+		}
+		if hash := findPartHash(r.content, "fetchPlaylist"); hash != "" {
+			s.playlistHash = hash
+			for j := i + 1; j < len(chunkFiles); j++ {
+				<-results
+			}
+			return nil
+		}
+	}
+
+	return fmt.Errorf("fetchPlaylist hash not found in any JS bundle")
+}
+
+// ── Partner API ─────────────────────────────────────────────────────────────
+
+type spotifyImageSource struct {
+	URL    string `json:"url"`
+	Width  int    `json:"width"`
+	Height int    `json:"height"`
+}
+
+type partnerPlaylistResp struct {
+	Data struct {
+		PlaylistV2 struct {
+			Name    string         `json:"name"`
+			Images  struct {
+				Items []struct {
+					Sources []spotifyImageSource `json:"sources"`
+				} `json:"items"`
+			} `json:"images"`
+			Content partnerContent `json:"content"`
+		} `json:"playlistV2"`
+	} `json:"data"`
+}
+
+type partnerContent struct {
+	TotalCount int           `json:"totalCount"`
+	Items      []partnerItem `json:"items"`
+}
+
+type partnerItem struct {
+	ItemV2 struct {
+		Data partnerTrackData `json:"data"`
+	} `json:"itemV2"`
+}
+
+type partnerTrackData struct {
+	Typename string `json:"__typename"`
+	Name     string `json:"name"`
+	Artists  struct {
+		Items []struct {
+			Profile struct {
+				Name string `json:"name"`
+			} `json:"profile"`
+		} `json:"items"`
+	} `json:"artists"`
+	AlbumOfTrack struct {
+		Name     string `json:"name"`
+		CoverArt struct {
+			Sources []spotifyImageSource `json:"sources"`
+		} `json:"coverArt"`
+	} `json:"albumOfTrack"`
+}
+
+// ── Playlist fetching ───────────────────────────────────────────────────────
+
+// fetchSpotifyPlaylist fetches a public Spotify playlist via the internal
+// partner API (api-partner.spotify.com). Retries once with a fresh session
+// on failure. Returns playlist name, artwork URL, and normalized tracks.
+func fetchSpotifyPlaylist(playlistURL string) (string, string, []PlaylistTrack, error) {
+	id, err := extractSpotifyID(playlistURL)
+	if err != nil {
+		return "", "", nil, err
+	}
+
+	name, artwork, tracks, err := fetchPlaylistByID(id)
+	if err != nil {
+		slog.Debug("spotify: retrying with fresh session", "err", err)
+		spSession.invalidate()
+		name, artwork, tracks, err = fetchPlaylistByID(id)
+	}
+	if err != nil {
+		return "", "", nil, err
+	}
+	if len(tracks) == 0 {
+		return "", "", nil, fmt.Errorf("spotify: playlist %q has no tracks", id)
+	}
+
+	slog.Info("spotify: fetched playlist", "name", name, "tracks", len(tracks))
+	return name, artwork, tracks, nil
+}
+
+func fetchPlaylistByID(id string) (string, string, []PlaylistTrack, error) {
+	if err := spSession.ensure(); err != nil {
+		return "", "", nil, err
+	}
+
+	const pageSize = 343
+
+	resp, err := queryPartnerAPI(id, 0, pageSize)
+	if err != nil {
+		return "", "", nil, err
+	}
+
+	pl := resp.Data.PlaylistV2
+	name := pl.Name
+	if name == "" {
+		name = "Spotify Playlist"
+	}
+
+	artworkURL := ""
+	if len(pl.Images.Items) > 0 && len(pl.Images.Items[0].Sources) > 0 {
+		artworkURL = pickBestSource(pl.Images.Items[0].Sources, 300)
+	}
+
+	tracks := extractTracks(pl.Content.Items)
+
+	// Paginate
+	for offset := pageSize; offset < pl.Content.TotalCount; offset += pageSize {
+		page, err := queryPartnerAPI(id, offset, pageSize)
+		if err != nil {
+			slog.Warn("spotify: pagination failed, returning partial results", "offset", offset, "err", err)
+			break
+		}
+		tracks = append(tracks, extractTracks(page.Data.PlaylistV2.Content.Items)...)
+	}
+
+	return name, artworkURL, tracks, nil
+}
+
+// queryPartnerAPI sends a persisted GraphQL query to api-partner.spotify.com.
+func queryPartnerAPI(playlistID string, offset, limit int) (*partnerPlaylistResp, error) {
+	variables, _ := json.Marshal(map[string]any{
+		"uri":                       "spotify:playlist:" + playlistID,
+		"offset":                    offset,
+		"limit":                     limit,
+		"enableWatchFeedEntrypoint": false,
+	})
+	extensions, _ := json.Marshal(map[string]any{
+		"persistedQuery": map[string]any{
+			"version":    1,
+			"sha256Hash": spSession.playlistHash,
+		},
+	})
+
+	reqURL := "https://api-partner.spotify.com/pathfinder/v1/query?" + url.Values{
+		"operationName": {"fetchPlaylist"},
+		"variables":     {string(variables)},
+		"extensions":    {string(extensions)},
+	}.Encode()
+
+	req, err := http.NewRequest("GET", reqURL, nil)
+	if err != nil {
+		return nil, err
+	}
+	req.Header.Set("Authorization", "Bearer "+spSession.accessToken)
+	req.Header.Set("Client-Token", spSession.clientToken)
+	req.Header.Set("Spotify-App-Version", spSession.clientVersion)
+	req.Header.Set("Accept", "application/json")
+	req.Header.Set("Accept-Language", "en")
+	req.Header.Set("User-Agent", spotifyUA)
+
+	resp, err := spSession.client.Do(req)
+	if err != nil {
+		return nil, fmt.Errorf("partner API request failed: %w", err)
+	}
+	defer func() { _ = resp.Body.Close() }()
+
+	if resp.StatusCode != http.StatusOK {
+		b, _ := io.ReadAll(io.LimitReader(resp.Body, 1024))
+		return nil, fmt.Errorf("partner API returned %d: %s", resp.StatusCode, string(b))
+	}
+
+	var result partnerPlaylistResp
+	if err := json.NewDecoder(resp.Body).Decode(&result); err != nil {
+		return nil, fmt.Errorf("failed to parse partner API response: %w", err)
+	}
+	return &result, nil
+}
+
+// ── Track extraction helpers ────────────────────────────────────────────────
+
+func extractTracks(items []partnerItem) []PlaylistTrack {
+	tracks := make([]PlaylistTrack, 0, len(items))
+	for _, item := range items {
+		t := item.ItemV2.Data
+		if t.Name == "" {
+			continue
+		}
+
+		artists := make([]string, 0, len(t.Artists.Items))
+		for _, a := range t.Artists.Items {
+			if a.Profile.Name != "" {
+				artists = append(artists, a.Profile.Name)
+			}
+		}
+
+		fullArtist := strings.Join(artists, ", ")
+		mainArtist := fullArtist
+		if len(artists) > 0 {
+			mainArtist = artists[0]
+		}
+
+		coverURL := ""
+		if len(t.AlbumOfTrack.CoverArt.Sources) > 0 {
+			coverURL = pickBestSource(t.AlbumOfTrack.CoverArt.Sources, 300)
+		}
+
+		tracks = append(tracks, PlaylistTrack{
+			Title:      t.Name,
+			Artist:     fullArtist,
+			MainArtist: mainArtist,
+			Album:      t.AlbumOfTrack.Name,
+			CoverURL:   coverURL,
+		})
+	}
+	return tracks
+}
+
+// pickBestSource returns the image URL closest to targetSize pixels.
+func pickBestSource(sources []spotifyImageSource, targetSize int) string {
+	if len(sources) == 0 {
+		return ""
+	}
+	best := sources[0].URL
+	bestDiff := abs(sources[0].Height - targetSize)
+	for _, s := range sources[1:] {
+		if s.Height == 0 {
+			continue
+		}
+		if diff := abs(s.Height - targetSize); diff < bestDiff {
+			best = s.URL
+			bestDiff = diff
+		}
+	}
+	return best
+}
+
+func abs(n int) int {
+	if n < 0 {
+		return -n
+	}
+	return n
+}
+
+// ── JS bundle parsing ───────────────────────────────────────────────────────
+//
+// Spotify's web player uses webpack. The persisted GraphQL query hashes are
+// embedded in JS chunks. These helpers extract <script> URLs from the home
+// page HTML, parse webpack chunk mappings, and search for operation hashes.
+
+var scriptSrcRe = regexp.MustCompile(`<script[^>]+src="([^"]+)"`)
+
+func extractJSLinks(html string) []string {
+	matches := scriptSrcRe.FindAllStringSubmatch(html, -1)
+	links := make([]string, 0, len(matches))
+	for _, m := range matches {
+		if strings.HasSuffix(m[1], ".js") {
+			links = append(links, m[1])
+		}
+	}
+	return links
+}
+
+var (
+	jsObjectMapRe = regexp.MustCompile(`\{\d+:"[^"]+"(?:,\d+:"[^"]+")*\}`)
+	jsKVRe        = regexp.MustCompile(`(\d+):"([^"]+)"`)
+)
+
+// extractMappings pulls webpack chunk name/hash mappings from the main JS pack.
+func extractMappings(jsCode string) (nameMap, hashMap map[int]string, err error) {
+	matches := jsObjectMapRe.FindAllString(jsCode, -1)
+	if len(matches) < 5 {
+		return nil, nil, fmt.Errorf("found only %d object maps, need at least 5", len(matches))
+	}
+	nameMap = parseJSObjectMap(matches[4])
+	hashMap = parseJSObjectMap(matches[3])
+	return nameMap, hashMap, nil
+}
+
+func parseJSObjectMap(s string) map[int]string {
+	m := make(map[int]string)
+	for _, match := range jsKVRe.FindAllStringSubmatch(s, -1) {
+		k, _ := strconv.Atoi(match[1])
+		m[k] = match[2]
+	}
+	return m
+}
+
+func combineChunks(nameMap, hashMap map[int]string) []string {
+	chunks := make([]string, 0, len(nameMap))
+	for key, name := range nameMap {
+		if hash, ok := hashMap[key]; ok {
+			chunks = append(chunks, name+"."+hash+".js")
+		}
+	}
+	return chunks
+}
+
+// findPartHash searches JS content for a persisted-query hash by operation name.
+func findPartHash(jsContent, name string) string {
+	needle := `"` + name + `","query","`
+	idx := strings.Index(jsContent, needle)
+	if idx < 0 {
+		needle = `"` + name + `","mutation","`
+		idx = strings.Index(jsContent, needle)
+	}
+	if idx < 0 {
+		return ""
+	}
+	rest := jsContent[idx+len(needle):]
+	end := strings.IndexByte(rest, '"')
+	if end < 0 {
+		return ""
+	}
+	return rest[:end]
+}
diff --git a/src/web/frontend/src/assets/apple-music.svg b/src/web/frontend/src/assets/apple-music.svg
new file mode 100644
index 00000000..7fcf6a03
--- /dev/null
+++ b/src/web/frontend/src/assets/apple-music.svg
@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Artwork" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="361px" height="361px" viewBox="0 0 361 361" style="enable-background:new 0 0 361 361;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_1_);}
+	.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
+</style>
+<g id="Layer_5">
+</g>
+<g>
+	<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="180" y1="358.6047" x2="180" y2="7.7586">
+		<stop  offset="0" style="stop-color:#FA233B"/>
+		<stop  offset="1" style="stop-color:#FB5C74"/>
+	</linearGradient>
+	<path class="st0" d="M360,112.61c0-4.3,0-8.6-0.02-12.9c-0.02-3.62-0.06-7.24-0.16-10.86c-0.21-7.89-0.68-15.84-2.08-23.64
+		c-1.42-7.92-3.75-15.29-7.41-22.49c-3.6-7.07-8.3-13.53-13.91-19.14c-5.61-5.61-12.08-10.31-19.15-13.91
+		c-7.19-3.66-14.56-5.98-22.47-7.41c-7.8-1.4-15.76-1.87-23.65-2.08c-3.62-0.1-7.24-0.14-10.86-0.16C255.99,0,251.69,0,247.39,0
+		H112.61c-4.3,0-8.6,0-12.9,0.02c-3.62,0.02-7.24,0.06-10.86,0.16C80.96,0.4,73,0.86,65.2,2.27c-7.92,1.42-15.28,3.75-22.47,7.41
+		c-7.07,3.6-13.54,8.3-19.15,13.91c-5.61,5.61-10.31,12.07-13.91,19.14c-3.66,7.2-5.99,14.57-7.41,22.49
+		c-1.4,7.8-1.87,15.76-2.08,23.64c-0.1,3.62-0.14,7.24-0.16,10.86C0,104.01,0,108.31,0,112.61v134.77c0,4.3,0,8.6,0.02,12.9
+		c0.02,3.62,0.06,7.24,0.16,10.86c0.21,7.89,0.68,15.84,2.08,23.64c1.42,7.92,3.75,15.29,7.41,22.49c3.6,7.07,8.3,13.53,13.91,19.14
+		c5.61,5.61,12.08,10.31,19.15,13.91c7.19,3.66,14.56,5.98,22.47,7.41c7.8,1.4,15.76,1.87,23.65,2.08c3.62,0.1,7.24,0.14,10.86,0.16
+		c4.3,0.03,8.6,0.02,12.9,0.02h134.77c4.3,0,8.6,0,12.9-0.02c3.62-0.02,7.24-0.06,10.86-0.16c7.89-0.21,15.85-0.68,23.65-2.08
+		c7.92-1.42,15.28-3.75,22.47-7.41c7.07-3.6,13.54-8.3,19.15-13.91c5.61-5.61,10.31-12.07,13.91-19.14
+		c3.66-7.2,5.99-14.57,7.41-22.49c1.4-7.8,1.87-15.76,2.08-23.64c0.1-3.62,0.14-7.24,0.16-10.86c0.03-4.3,0.02-8.6,0.02-12.9V112.61
+		z"/>
+</g>
+<g id="Glyph_2_">
+	<g>
+		<path class="st1" d="M254.5,55c-0.87,0.08-8.6,1.45-9.53,1.64l-107,21.59l-0.04,0.01c-2.79,0.59-4.98,1.58-6.67,3
+			c-2.04,1.71-3.17,4.13-3.6,6.95c-0.09,0.6-0.24,1.82-0.24,3.62c0,0,0,109.32,0,133.92c0,3.13-0.25,6.17-2.37,8.76
+			c-2.12,2.59-4.74,3.37-7.81,3.99c-2.33,0.47-4.66,0.94-6.99,1.41c-8.84,1.78-14.59,2.99-19.8,5.01
+			c-4.98,1.93-8.71,4.39-11.68,7.51c-5.89,6.17-8.28,14.54-7.46,22.38c0.7,6.69,3.71,13.09,8.88,17.82
+			c3.49,3.2,7.85,5.63,12.99,6.66c5.33,1.07,11.01,0.7,19.31-0.98c4.42-0.89,8.56-2.28,12.5-4.61c3.9-2.3,7.24-5.37,9.85-9.11
+			c2.62-3.75,4.31-7.92,5.24-12.35c0.96-4.57,1.19-8.7,1.19-13.26l0-116.15c0-6.22,1.76-7.86,6.78-9.08c0,0,88.94-17.94,93.09-18.75
+			c5.79-1.11,8.52,0.54,8.52,6.61l0,79.29c0,3.14-0.03,6.32-2.17,8.92c-2.12,2.59-4.74,3.37-7.81,3.99
+			c-2.33,0.47-4.66,0.94-6.99,1.41c-8.84,1.78-14.59,2.99-19.8,5.01c-4.98,1.93-8.71,4.39-11.68,7.51
+			c-5.89,6.17-8.49,14.54-7.67,22.38c0.7,6.69,3.92,13.09,9.09,17.82c3.49,3.2,7.85,5.56,12.99,6.6c5.33,1.07,11.01,0.69,19.31-0.98
+			c4.42-0.89,8.56-2.22,12.5-4.55c3.9-2.3,7.24-5.37,9.85-9.11c2.62-3.75,4.31-7.92,5.24-12.35c0.96-4.57,1-8.7,1-13.26V64.46
+			C263.54,58.3,260.29,54.5,254.5,55z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/src/web/frontend/src/assets/listenbrainz.svg b/src/web/frontend/src/assets/listenbrainz.svg
new file mode 100644
index 00000000..05c9270f
--- /dev/null
+++ b/src/web/frontend/src/assets/listenbrainz.svg
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="svg1591" viewBox="9,0,128,160" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" inkscape:version="1.0.2 (e86c870879, 2021-01-15, custom)" sodipodi:docname="ListenBrainz_logo.svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd">
+ <defs id="defs1552">
+  <path id="a" d="m75.354 33.239h51.433v90.792h-51.433z"/>
+  <clipPath id="b">
+   <use id="use1554" xlink:href="#a"/>
+  </clipPath>
+ </defs>
+ <metadata id="metadata1597">
+  <rdf:RDF>
+   <cc:Work rdf:about="">
+    <dc:format>image/svg+xml</dc:format>
+    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+    <dc:title>ListenBrainz 2020 logo (version 2)</dc:title>
+   </cc:Work>
+  </rdf:RDF>
+ </metadata>
+ <sodipodi:namedview bordercolor="#666666" borderopacity="1" gridtolerance="10" guidetolerance="10" inkscape:current-layer="svg1591" inkscape:cx="64" inkscape:cy="80" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-height="1014" inkscape:window-maximized="1" inkscape:window-width="1920" inkscape:window-x="0" inkscape:window-y="36" inkscape:zoom="5.24375" objecttolerance="10" pagecolor="#ffffff" showgrid="false"/>
+ <path id="path1545" d="m75.354 7.823v144l61-35v-74z" fill="#eb743b"/>
+ <title id="title1547">ListenBrainz 2020 logo (version 2)</title>
+ <path id="path1549" d="m70.354 7.823-61 35v74l61 35z" fill="#353070"/>
+ <g id="g1563" opacity=".07">
+  <path id="path1557" clip-path="url(#b)" d="m92.657 99.557a2.1 2.1 0 0 1 1.819-1.03c.378 0 .752.104 1.078.297a2.12 2.12 0 0 1 .735 2.898 2.097 2.097 0 0 1 -1.817 1.032c-.379 0-.755-.105-1.084-.301a2.092 2.092 0 0 1 -.964-1.294 2.1 2.1 0 0 1 .233-1.602m12.602 22.362a2.121 2.121 0 0 1 -2.981-.225 2.116 2.116 0 0 1 .231-2.981 2.08 2.08 0 0 1 1.373-.512 2.117 2.117 0 0 1 2.109 2.278 2.086 2.086 0 0 1 -.732 1.44m-9.525-58.839a2.128 2.128 0 0 1 2.916-.656 2.12 2.12 0 0 1 .66 2.919 2.115 2.115 0 0 1 -2.919.661 2.128 2.128 0 0 1 -.657-2.924m6.379-20.187c-.6.951-1.937 1.271-2.912.653l-.096-.062a2.107 2.107 0 0 1 -.557-2.851 2.093 2.093 0 0 1 1.784-.98 2.11 2.11 0 0 1 1.781 3.24m16.767 11.598a2.096 2.096 0 0 1 1.783-.98c.4 0 .79.113 1.125.325.481.304.813.775.937 1.33a2.08 2.08 0 0 1 -.28 1.584c-.597.951-1.938 1.273-2.912.653l-.093-.062a2.105 2.105 0 0 1 -.56-2.85m0 23.463a2.096 2.096 0 0 1 1.783-.98c.4 0 .79.112 1.125.326.481.304.813.774.937 1.329a2.083 2.083 0 0 1 -.28 1.585c-.597.95-1.938 1.271-2.912.652l-.093-.062a2.105 2.105 0 0 1 -.56-2.85m0 26.303a2.099 2.099 0 0 1 1.783-.98c.4 0 .79.113 1.125.326.481.304.813.775.937 1.33a2.08 2.08 0 0 1 -.28 1.584c-.597.951-1.938 1.271-2.912.653l-.093-.062a2.107 2.107 0 0 1 -.56-2.851"/>
+  <path id="path1559" clip-path="url(#b)" d="m108.53 113.927a6.11 6.11 0 0 0 -8.631-.662 6.12 6.12 0 0 0 -2.087 5.396c-1.949.701-4.258 1.366-5.328 1.332-.822-.043-1.302-.345-2.224-.971-1.172-.795-2.418-1.512-4.149-1.847 2.936-2.761 6.009-6.83 8.584-12.834a6.15 6.15 0 0 0 5.039-2.972c1.724-2.896.773-6.659-2.124-8.394a6.133 6.133 0 0 0 -3.134-.864 6.154 6.154 0 0 0 -5.261 2.986 6.079 6.079 0 0 0 -.678 4.636 6.075 6.075 0 0 0 2.302 3.429c-4.053 9.218-9.219 13.08-12.565 14.685a2.016 2.016 0 0 0 -.361.168c-1.186.531-2.05.704-2.558.808v4c.275-.03 1.884-.118 4.247-1.192 5.347-1.357 6.839-.354 8.407.709 1.021.692 2.291 1.554 4.263 1.655.099.006.204.009.308.009 2.11 0 5.172-1.022 7.021-1.723a6.132 6.132 0 0 0 4.285 1.75 6.112 6.112 0 0 0 3.983-1.476 6.072 6.072 0 0 0 2.119-4.176 6.072 6.072 0 0 0 -1.458-4.452m-15.873-16.776a2.114 2.114 0 0 1 3.632 2.165 2.097 2.097 0 0 1 -1.817 1.032c-.379 0-.755-.105-1.084-.301a2.092 2.092 0 0 1 -.964-1.294 2.101 2.101 0 0 1 .233-1.602m12.602 22.363a2.121 2.121 0 0 1 -2.981-.225 2.116 2.116 0 0 1 .231-2.981 2.08 2.08 0 0 1 1.373-.512 2.117 2.117 0 0 1 2.109 2.278 2.086 2.086 0 0 1 -.732 1.44m1.045-81.487a6.088 6.088 0 0 0 -2.708-3.844 6.12 6.12 0 0 0 -3.264-.944 6.076 6.076 0 0 0 -5.174 2.85 6.108 6.108 0 0 0 .144 6.758c-3.646 4.124-8.707 4.314-9.943 4.293-3.692-1.604-7.234-2.164-10.005-2.317v3.996c2.442.144 5.553.686 8.748 2.136.005.002.01.002.015.005 3.445 1.562 6.334 3.927 8.607 7.041a6.364 6.364 0 0 0 -.381.538c-1.796 2.854-.943 6.643 1.903 8.444.98.622 2.111.951 3.269.951a6.105 6.105 0 0 0 5.183-2.851c1.806-2.851.951-6.642-1.908-8.453-1.384-.872-3.092-1.114-4.667-.755-1.538-2.155-3.323-4.017-5.345-5.567 2.517-.778 5.401-2.268 7.78-5.095a6.18 6.18 0 0 0 1.77.266 6.08 6.08 0 0 0 5.172-2.848 6.053 6.053 0 0 0 .804-4.604m-10.57 22.647a2.128 2.128 0 0 1 2.916-.656 2.12 2.12 0 0 1 .66 2.919 2.115 2.115 0 0 1 -2.919.661 2.128 2.128 0 0 1 -.657-2.924m6.379-20.187c-.6.951-1.937 1.271-2.912.653l-.096-.062a2.107 2.107 0 0 1 -.557-2.851 2.093 2.093 0 0 1 1.784-.98 2.11 2.11 0 0 1 1.781 3.24"/>
+  <path id="path1561" clip-path="url(#b)" d="m115 79.011a6.036 6.036 0 0 0 2.11 2.649 6.098 6.098 0 0 0 3.55 1.14 6.083 6.083 0 0 0 5.173-2.848 6.064 6.064 0 0 0 .805-4.605 6.103 6.103 0 0 0 -2.709-3.844 6.128 6.128 0 0 0 -3.266-.944c-.125 0-.25.008-.375.018-.71-3.158-.919-7.769.035-11.265.113.011.225.024.337.024a6.08 6.08 0 0 0 5.173-2.848 6.062 6.062 0 0 0 .805-4.604 6.103 6.103 0 0 0 -2.709-3.844 6.128 6.128 0 0 0 -3.266-.944 6.079 6.079 0 0 0 -5.173 2.85 6.104 6.104 0 0 0 1.025 7.764c.021.02.048.037.071.059-1.349 4.518-1.145 10.324-.036 14.417-.144.132-.294.254-.426.399a6.327 6.327 0 0 0 -.634.825 6.2 6.2 0 0 0 -.71 1.578c-3.371.488-5.198 1.671-6.824 2.729-2.035 1.324-3.961 2.572-9.636 2.666-1.963-.23-3.552-.178-5.29-.116-1.43.052-2.91.105-4.848.003-1.335-.071-2.104-.882-3.458-2.424-1.803-2.055-4.219-4.648-9.369-5.022v4c3.295.299 4.796 1.887 6.356 3.667 1.487 1.694 3.175 3.615 6.256 3.782 2.118.114 3.76.052 5.208.001 2.491-.092 4.453-.161 7.855.683 2.608.644 12.099 9.674 14.774 14.323-.109.142-.219.282-.314.434-1.743 2.755-1.026 6.385 1.62 8.251.072.052.151.104.283.191.981.621 2.11.948 3.267.948a6.081 6.081 0 0 0 5.173-2.849 6.06 6.06 0 0 0 .805-4.603 6.1 6.1 0 0 0 -2.709-3.845 6.128 6.128 0 0 0 -4.809-.749c-2.56-4.188-8.652-10.455-13.189-13.792 1.813-.628 3.05-1.436 4.212-2.188 1.427-.93 2.614-1.69 4.857-2.067m3.88-26.926a2.096 2.096 0 0 1 1.783-.98c.4 0 .79.113 1.125.325.481.304.813.775.937 1.33a2.08 2.08 0 0 1 -.28 1.584c-.597.951-1.938 1.273-2.912.653l-.093-.062a2.105 2.105 0 0 1 -.56-2.85m0 23.463a2.096 2.096 0 0 1 1.783-.98c.4 0 .79.112 1.125.326.481.304.813.774.937 1.329a2.083 2.083 0 0 1 -.28 1.585c-.597.95-1.938 1.272-2.912.652l-.093-.062a2.105 2.105 0 0 1 -.56-2.85m0 26.304a2.099 2.099 0 0 1 1.783-.98c.4 0 .79.113 1.125.326.481.304.813.775.937 1.33a2.08 2.08 0 0 1 -.28 1.584c-.597.951-1.938 1.271-2.912.653l-.093-.062a2.107 2.107 0 0 1 -.56-2.851"/>
+ </g>
+ <path id="path1565" d="m108.53 116.927a6.11 6.11 0 0 0 -8.631-.662 6.12 6.12 0 0 0 -2.087 5.396c-1.949.701-4.258 1.366-5.328 1.332-.822-.043-1.302-.345-2.224-.971-1.172-.795-2.418-1.512-4.149-1.847 2.936-2.761 6.009-6.83 8.584-12.834a6.15 6.15 0 0 0 5.039-2.972c1.724-2.896.773-6.659-2.124-8.394a6.133 6.133 0 0 0 -3.134-.864 6.154 6.154 0 0 0 -5.261 2.986 6.079 6.079 0 0 0 -.678 4.636 6.075 6.075 0 0 0 2.302 3.429c-4.053 9.218-9.219 13.08-12.565 14.685a2.016 2.016 0 0 0 -.361.168c-1.186.531-2.05.704-2.558.808v4c.275-.03 1.884-.118 4.247-1.192 5.347-1.357 6.839-.354 8.407.709 1.021.692 2.291 1.554 4.263 1.655.099.006.204.009.308.009 2.11 0 5.172-1.022 7.021-1.723a6.132 6.132 0 0 0 4.285 1.75 6.112 6.112 0 0 0 3.983-1.476 6.072 6.072 0 0 0 2.119-4.176 6.072 6.072 0 0 0 -1.458-4.452m-15.873-16.776a2.114 2.114 0 0 1 3.632 2.165 2.097 2.097 0 0 1 -1.817 1.032c-.379 0-.755-.105-1.084-.301a2.092 2.092 0 0 1 -.964-1.294 2.101 2.101 0 0 1 .233-1.602m12.602 22.363a2.121 2.121 0 0 1 -2.981-.225 2.116 2.116 0 0 1 .231-2.981 2.08 2.08 0 0 1 1.373-.512 2.117 2.117 0 0 1 2.109 2.278 2.086 2.086 0 0 1 -.732 1.44" fill="#d3562c"/>
+ <path id="path1567" d=""/>
+ <path id="path1569" d="m106.304 40.031a6.088 6.088 0 0 0 -2.708-3.844 6.12 6.12 0 0 0 -3.264-.944 6.076 6.076 0 0 0 -5.174 2.85 6.108 6.108 0 0 0 .144 6.758c-3.646 4.124-8.707 4.314-9.943 4.293-3.692-1.604-7.234-2.164-10.005-2.317v3.996c2.442.144 5.553.686 8.748 2.136.005.002.01.002.015.005 3.445 1.562 6.334 3.927 8.607 7.041a6.206 6.206 0 0 0 -.381.538c-1.796 2.854-.943 6.643 1.903 8.444.98.622 2.111.951 3.269.951a6.105 6.105 0 0 0 5.183-2.851c1.806-2.851.951-6.642-1.908-8.453-1.384-.872-3.092-1.114-4.667-.755-1.538-2.155-3.323-4.017-5.345-5.567 2.517-.778 5.401-2.268 7.78-5.095a6.18 6.18 0 0 0 1.77.266 6.08 6.08 0 0 0 5.172-2.849 6.05 6.05 0 0 0 .804-4.603m-10.57 22.647a2.128 2.128 0 0 1 2.916-.656 2.12 2.12 0 0 1 .66 2.919 2.115 2.115 0 0 1 -2.919.661 2.128 2.128 0 0 1 -.657-2.924m6.379-20.187c-.6.951-1.937 1.271-2.912.653l-.096-.062a2.107 2.107 0 0 1 -.557-2.851 2.093 2.093 0 0 1 1.784-.98 2.11 2.11 0 0 1 1.781 3.24" fill="#d3562c"/>
+ <path id="path1571" d="m115 82.011a6.036 6.036 0 0 0 2.11 2.649 6.098 6.098 0 0 0 3.55 1.14 6.081 6.081 0 0 0 5.173-2.849 6.063 6.063 0 0 0 .805-4.604 6.103 6.103 0 0 0 -2.709-3.844 6.128 6.128 0 0 0 -3.266-.944c-.125 0-.25.008-.375.018-.71-3.158-.919-7.769.035-11.265.113.011.225.024.337.024a6.08 6.08 0 0 0 5.173-2.848 6.062 6.062 0 0 0 .805-4.604 6.103 6.103 0 0 0 -2.709-3.844 6.128 6.128 0 0 0 -3.266-.944 6.079 6.079 0 0 0 -5.173 2.85 6.104 6.104 0 0 0 1.025 7.764c.021.02.048.037.071.059-1.349 4.518-1.145 10.324-.036 14.417-.144.132-.294.254-.426.399a6.327 6.327 0 0 0 -.634.825 6.2 6.2 0 0 0 -.71 1.578c-3.371.488-5.198 1.671-6.824 2.729-2.035 1.323-3.961 2.571-9.636 2.665-1.963-.23-3.552-.178-5.29-.116-1.43.052-2.91.105-4.848.003-1.335-.071-2.104-.882-3.458-2.424-1.803-2.055-4.219-4.648-9.369-5.022v4c3.295.298 4.796 1.887 6.356 3.667 1.487 1.694 3.175 3.615 6.256 3.782 2.118.114 3.76.052 5.208.001 2.491-.092 4.453-.161 7.855.683 2.608.644 12.099 9.674 14.774 14.323-.109.142-.219.282-.314.434-1.743 2.755-1.026 6.385 1.62 8.251.072.052.151.104.283.191.981.621 2.11.948 3.267.948a6.081 6.081 0 0 0 5.173-2.849 6.06 6.06 0 0 0 .805-4.603 6.1 6.1 0 0 0 -2.709-3.845 6.128 6.128 0 0 0 -4.809-.749c-2.56-4.188-8.652-10.455-13.189-13.792 1.813-.628 3.05-1.436 4.212-2.188 1.427-.929 2.614-1.689 4.857-2.066m3.88-26.926a2.096 2.096 0 0 1 1.783-.98c.4 0 .79.113 1.125.325.481.304.813.775.937 1.33a2.08 2.08 0 0 1 -.28 1.584c-.597.951-1.938 1.273-2.912.653l-.093-.062a2.105 2.105 0 0 1 -.56-2.85m0 23.463a2.096 2.096 0 0 1 1.783-.98c.4 0 .79.112 1.125.326.481.304.813.774.937 1.329a2.084 2.084 0 0 1 -.28 1.585c-.597.95-1.938 1.271-2.912.652l-.093-.062a2.105 2.105 0 0 1 -.56-2.85m0 26.304a2.099 2.099 0 0 1 1.783-.98c.4 0 .79.113 1.125.326.481.304.813.775.937 1.33a2.08 2.08 0 0 1 -.28 1.584c-.597.951-1.938 1.271-2.912.653l-.093-.062a2.107 2.107 0 0 1 -.56-2.851" fill="#d3562c"/>
+ <path id="path1573" d="m108.53 113.927a6.11 6.11 0 0 0 -8.631-.662 6.12 6.12 0 0 0 -2.087 5.396c-1.949.701-4.258 1.366-5.328 1.332-.822-.043-1.302-.345-2.224-.971-1.172-.795-2.418-1.512-4.149-1.847 2.936-2.761 6.009-6.83 8.584-12.834a6.15 6.15 0 0 0 5.039-2.972c1.724-2.896.773-6.659-2.124-8.394a6.133 6.133 0 0 0 -3.134-.864 6.154 6.154 0 0 0 -5.261 2.986 6.079 6.079 0 0 0 -.678 4.636 6.075 6.075 0 0 0 2.302 3.429c-4.053 9.218-9.219 13.08-12.565 14.685a2.016 2.016 0 0 0 -.361.168c-1.186.531-2.05.704-2.558.808v4c.275-.03 1.884-.118 4.247-1.192 5.347-1.357 6.839-.354 8.407.709 1.021.692 2.291 1.554 4.263 1.655.099.006.204.009.308.009 2.11 0 5.172-1.022 7.021-1.723a6.132 6.132 0 0 0 4.285 1.75 6.112 6.112 0 0 0 3.983-1.476 6.072 6.072 0 0 0 2.119-4.176 6.072 6.072 0 0 0 -1.458-4.452m-15.873-16.776a2.114 2.114 0 0 1 3.632 2.165 2.097 2.097 0 0 1 -1.817 1.032c-.379 0-.755-.105-1.084-.301a2.092 2.092 0 0 1 -.964-1.294 2.101 2.101 0 0 1 .233-1.602m12.602 22.363a2.121 2.121 0 0 1 -2.981-.225 2.116 2.116 0 0 1 .231-2.981 2.08 2.08 0 0 1 1.373-.512 2.117 2.117 0 0 1 2.109 2.278 2.086 2.086 0 0 1 -.732 1.44m1.045-81.487a6.088 6.088 0 0 0 -2.708-3.844 6.12 6.12 0 0 0 -3.264-.944 6.076 6.076 0 0 0 -5.174 2.85 6.108 6.108 0 0 0 .144 6.758c-3.646 4.124-8.707 4.314-9.943 4.293-3.692-1.604-7.234-2.164-10.005-2.317v3.996c2.442.144 5.553.686 8.748 2.136.005.002.01.002.015.005 3.445 1.562 6.334 3.927 8.607 7.041a6.364 6.364 0 0 0 -.381.538c-1.796 2.854-.943 6.643 1.903 8.444.98.622 2.111.951 3.269.951a6.105 6.105 0 0 0 5.183-2.851c1.806-2.851.951-6.642-1.908-8.453-1.384-.872-3.092-1.114-4.667-.755-1.538-2.155-3.323-4.017-5.345-5.567 2.517-.778 5.401-2.268 7.78-5.095a6.18 6.18 0 0 0 1.77.266 6.08 6.08 0 0 0 5.172-2.848 6.053 6.053 0 0 0 .804-4.604m-10.57 22.647a2.128 2.128 0 0 1 2.916-.656 2.12 2.12 0 0 1 .66 2.919 2.115 2.115 0 0 1 -2.919.661 2.128 2.128 0 0 1 -.657-2.924m6.379-20.187c-.6.951-1.937 1.271-2.912.653l-.096-.062a2.107 2.107 0 0 1 -.557-2.851 2.093 2.093 0 0 1 1.784-.98 2.11 2.11 0 0 1 1.781 3.24" fill="#fffedb"/>
+ <path id="path1575" d="m115 79.011a6.036 6.036 0 0 0 2.11 2.649 6.098 6.098 0 0 0 3.55 1.14 6.083 6.083 0 0 0 5.173-2.848 6.064 6.064 0 0 0 .805-4.605 6.103 6.103 0 0 0 -2.709-3.844 6.128 6.128 0 0 0 -3.266-.944c-.125 0-.25.008-.375.018-.71-3.158-.919-7.769.035-11.265.113.011.225.024.337.024a6.08 6.08 0 0 0 5.173-2.848 6.062 6.062 0 0 0 .805-4.604 6.103 6.103 0 0 0 -2.709-3.844 6.128 6.128 0 0 0 -3.266-.944 6.079 6.079 0 0 0 -5.173 2.85 6.104 6.104 0 0 0 1.025 7.764c.021.02.048.037.071.059-1.349 4.518-1.145 10.324-.036 14.417-.144.132-.294.254-.426.399a6.327 6.327 0 0 0 -.634.825 6.2 6.2 0 0 0 -.71 1.578c-3.371.488-5.198 1.671-6.824 2.729-2.035 1.324-3.961 2.572-9.636 2.666-1.963-.23-3.552-.178-5.29-.116-1.43.052-2.91.105-4.848.003-1.335-.071-2.104-.882-3.458-2.424-1.803-2.055-4.219-4.648-9.369-5.022v4c3.295.299 4.796 1.887 6.356 3.667 1.487 1.694 3.175 3.615 6.256 3.782 2.118.114 3.76.052 5.208.001 2.491-.092 4.453-.161 7.855.683 2.608.644 12.099 9.674 14.774 14.323-.109.142-.219.282-.314.434-1.743 2.755-1.026 6.385 1.62 8.251.072.052.151.104.283.191.981.621 2.11.948 3.267.948a6.081 6.081 0 0 0 5.173-2.849 6.06 6.06 0 0 0 .805-4.603 6.1 6.1 0 0 0 -2.709-3.845 6.128 6.128 0 0 0 -4.809-.749c-2.56-4.188-8.652-10.455-13.189-13.792 1.813-.628 3.05-1.436 4.212-2.188 1.427-.93 2.614-1.69 4.857-2.067m3.88-26.926a2.096 2.096 0 0 1 1.783-.98c.4 0 .79.113 1.125.325.481.304.813.775.937 1.33a2.08 2.08 0 0 1 -.28 1.584c-.597.951-1.938 1.273-2.912.653l-.093-.062a2.105 2.105 0 0 1 -.56-2.85m0 23.463a2.096 2.096 0 0 1 1.783-.98c.4 0 .79.112 1.125.326.481.304.813.774.937 1.329a2.083 2.083 0 0 1 -.28 1.585c-.597.95-1.938 1.272-2.912.652l-.093-.062a2.105 2.105 0 0 1 -.56-2.85m0 26.304a2.099 2.099 0 0 1 1.783-.98c.4 0 .79.113 1.125.326.481.304.813.775.937 1.33a2.08 2.08 0 0 1 -.28 1.584c-.597.951-1.938 1.271-2.912.653l-.093-.062a2.107 2.107 0 0 1 -.56-2.851" fill="#fffedb"/>
+ <g id="g1579" opacity=".25">
+  <path id="path1577" d="m53.783 104.537c-.239 0-.48-.072-.691-.219a1.21 1.21 0 0 1 -.29-1.684c.273-.387.519-.799.73-1.227a9.028 9.028 0 0 0 -.501-8.961 1.208 1.208 0 1 1 2.032-1.307c2.176 3.389 2.42 7.736.633 11.34a11.833 11.833 0 0 1 -.92 1.547 1.204 1.204 0 0 1 -.993.511m5.556 2.877a1.207 1.207 0 0 1 -.968-1.922c.453-.615.854-1.279 1.198-1.973a13.243 13.243 0 0 0 -1.251-13.846 1.207 1.207 0 1 1 1.937-1.441 15.643 15.643 0 0 1 1.478 16.357c-.404.818-.88 1.604-1.414 2.33a1.213 1.213 0 0 1 -.98.495m-10.994-5.928a1.21 1.21 0 0 1 -1.045-1.802 4.802 4.802 0 0 0 .18-4.369 1.208 1.208 0 0 1 2.193-1.01 7.22 7.22 0 0 1 -.271 6.57 1.209 1.209 0 0 1 -1.057.611"/>
+ </g>
+ <g id="g1583" fill="#eb743b">
+  <path id="path1581" d="m53.783 101.537c-.239 0-.48-.072-.691-.219a1.21 1.21 0 0 1 -.29-1.684c.273-.387.519-.799.73-1.227a9.028 9.028 0 0 0 -.501-8.961 1.208 1.208 0 1 1 2.032-1.307c2.176 3.389 2.42 7.736.633 11.34a11.833 11.833 0 0 1 -.92 1.547 1.204 1.204 0 0 1 -.993.511m5.556 2.877a1.207 1.207 0 0 1 -.968-1.922c.453-.615.854-1.279 1.198-1.973a13.243 13.243 0 0 0 -1.251-13.846 1.207 1.207 0 1 1 1.937-1.441 15.643 15.643 0 0 1 1.478 16.357c-.404.818-.88 1.604-1.414 2.33a1.213 1.213 0 0 1 -.98.495m-10.994-5.928a1.21 1.21 0 0 1 -1.045-1.802 4.802 4.802 0 0 0 .18-4.369 1.208 1.208 0 0 1 2.193-1.01 7.22 7.22 0 0 1 -.271 6.57 1.209 1.209 0 0 1 -1.057.611"/>
+ </g>
+ <g id="g1589">
+  <path id="path1585" d="m66.082 47.24c-10.12 0-20.365 3.656-26.736 9.543-6.886 6.361-10.521 16.245-10.348 27.989a3.99 3.99 0 0 0 -3.41 3.941v18.119a4 4 0 0 0 4 4h2.033c.316 0 .619-.047.914-.115v1.602c0 2.209 1.565 4 3.495 4h1.898c1.93 0 3.495-1.791 3.495-4v-29.669c0-2.209-1.565-4-3.495-4h-1.898c-1.717 0-3.138 1.42-3.432 3.288.065-1.855.204-3.652.435-5.096 1.154-7.232 4.119-13.268 8.688-17.488 5.664-5.232 15.226-8.613 24.361-8.613 1.042 0 3.241.043 4.277.143v-3.49c-1.2-.117-3.163-.154-4.277-.154zm-34.459 59.188a2.652 2.652 0 0 1 -2.651-2.65v-12.01a2.651 2.651 0 0 1 2.651-2.652h.913v17.312z" opacity=".25"/>
+  <path id="path1587" d="m66.082 44.24c-10.12 0-20.365 3.656-26.736 9.543-6.886 6.361-10.521 16.245-10.348 27.989a3.99 3.99 0 0 0 -3.41 3.941v18.119a4 4 0 0 0 4 4h2.033c.316 0 .619-.047.914-.115v1.602c0 2.209 1.565 4 3.495 4h1.898c1.93 0 3.495-1.791 3.495-4v-29.669c0-2.209-1.565-4-3.495-4h-1.898c-1.717 0-3.138 1.42-3.432 3.287.065-1.854.204-3.651.435-5.096 1.154-7.232 4.119-13.268 8.688-17.488 5.664-5.232 15.226-8.613 24.361-8.613 1.042 0 3.241.043 4.277.143v-3.49c-1.2-.116-3.163-.153-4.277-.153zm-34.459 59.188a2.652 2.652 0 0 1 -2.651-2.65v-12.01a2.651 2.651 0 0 1 2.651-2.652h.913v17.312z" fill="#fffedb"/>
+ </g>
+</svg>
diff --git a/src/web/frontend/src/assets/spotify.svg b/src/web/frontend/src/assets/spotify.svg
new file mode 100644
index 00000000..f9a8e99a
--- /dev/null
+++ b/src/web/frontend/src/assets/spotify.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="#1ed760" d="M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z"/></svg>
diff --git a/src/web/frontend/src/components/Settings.jsx b/src/web/frontend/src/components/Settings.jsx
index 3939d7f4..1e803ad1 100644
--- a/src/web/frontend/src/components/Settings.jsx
+++ b/src/web/frontend/src/components/Settings.jsx
@@ -14,6 +14,7 @@ import { useState, useEffect, useCallback, useRef } from 'react'
 import {
   fetchConfig, fetchConfigRaw, saveConfig, resetConfig,
   saveSchedule, startRun, stopRun, fetchRunStatus, fetchLogs,
+  fetchCustomPlaylists, deleteCustomPlaylist,
 } from '../lib/api'
 import { parseSlogLine, cronToFields, highlightEnv } from '../lib/utils'
 import { fetchPlaylistTracks } from '../lib/listenbrainz'
@@ -21,6 +22,7 @@ import { motion, AnimatePresence } from 'motion/react'
 import { Toggle } from './ui/Toggle'
 import { Button, SectionLabel, Panel, LogRow } from './ui/common'
 import { PlaylistCard, TracklistDropdown } from './ui/PlaylistCard'
+import { ImportModal } from './ui/ImportModal'
 import { UpdateNotification } from './ui/UpdateNotification'
 
 const tabBtnCls = active =>
@@ -84,28 +86,115 @@ const PLAYLISTS = [
 ]
 
 const SCHEDULE_DAYS = [
-  { value: -1,  label: 'Every day',        summary: '' },
-  { value: 0,   label: 'Sunday',           summary: 'Every Sunday' },
-  { value: 1,   label: 'Monday',           summary: 'Every Monday' },
-  { value: 2,   label: 'Tuesday',          summary: 'Every Tuesday' },
-  { value: 3,   label: 'Wednesday',        summary: 'Every Wednesday' },
-  { value: 4,   label: 'Thursday',         summary: 'Every Thursday' },
-  { value: 5,   label: 'Friday',           summary: 'Every Friday' },
-  { value: 6,   label: 'Saturday',         summary: 'Every Saturday' },
-  { value: 100, label: 'Monthly (1st)',     summary: 'Every 1st of the month' },
+  { value: -2,   label: 'Never',           summary: 'No schedule' },
+  { value: -1,   label: 'Every day',       summary: 'Every day' },
+  { value: 0,    label: 'Sunday',          summary: 'Every Sunday' },
+  { value: 1,    label: 'Monday',          summary: 'Every Monday' },
+  { value: 2,    label: 'Tuesday',         summary: 'Every Tuesday' },
+  { value: 3,    label: 'Wednesday',       summary: 'Every Wednesday' },
+  { value: 4,    label: 'Thursday',        summary: 'Every Thursday' },
+  { value: 5,    label: 'Friday',          summary: 'Every Friday' },
+  { value: 6,    label: 'Saturday',        summary: 'Every Saturday' },
+  { value: 100,  label: 'Monthly (1st)',   summary: 'Every 1st of the month' },
 ]
 
 const selectCls = 'bg-surface border border-ui-border text-white rounded-[6px] px-2.5 py-1.5 text-[13px] cursor-pointer outline-none focus:border-accent'
 
-function initSchedules(config) {
-  const out = {}
-  for (const p of PLAYLISTS) {
-    const cron = config[p.scheduleKey]
-    out[p.value] = cron
-      ? { enabled: true, editing: false, ...cronToFields(cron) }
-      : { enabled: false, day: p.defaultDay, hour: p.defaultHour, minute: p.defaultMinute, editing: false }
-  }
-  return out
+function TracklistSlide({ show, slideKey, children }) {
+  return (
+    <AnimatePresence>
+      {show && (
+        <motion.div
+          key={slideKey}
+          initial={{ opacity: 0, height: 0 }}
+          animate={{ opacity: 1, height: 'auto' }}
+          exit={{ opacity: 0, height: 0 }}
+          transition={{ duration: 0.28, ease: 'easeInOut' }}
+          style={{ overflow: 'hidden' }}
+        >
+          {children}
+        </motion.div>
+      )}
+    </AnimatePresence>
+  )
+}
+
+function CustomPlaylistsSection({
+  customPlaylists,
+  schedules,
+  scheduleProps,
+  openTracklist,
+  setOpenTracklist,
+  lbUser,
+  onImportedRefresh,
+  onSync,
+  onDelete,
+  showImportModal,
+  setShowImportModal,
+}) {
+  return (
+    <div className="mt-6">
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+        <div className="text-[16px] font-bold tracking-tight text-white">Custom Playlists</div>
+        <button
+          onClick={() => setShowImportModal(true)}
+          className="bg-transparent border border-ui-border text-muted rounded-full px-3 py-1 text-[12px] cursor-pointer hover:text-white hover:border-[#444] transition-colors"
+        >
+          + Import
+        </button>
+      </div>
+
+      {customPlaylists.length === 0 ? (
+        <p className="text-[12px] text-muted mt-3">
+          No custom playlists yet. Import one from ListenBrainz or Apple Music.
+        </p>
+      ) : (
+        <div className="flex gap-3 mt-3 overflow-x-auto snap-x snap-mandatory pb-2">
+          {customPlaylists.map((cp, i) => {
+            if (!schedules[cp.id]) return null
+            return (
+              <div
+                key={cp.id}
+                className="shrink-0 snap-start w-full min-[420px]:w-[calc((100%-12px)/2)] min-[720px]:w-[calc((100%-36px)/4)]"
+              >
+                <PlaylistCard
+                  playlist={{ value: `custom-${cp.color_index ?? i}`, name: cp.name }}
+                  trackId={cp.id}
+                  artworkUrl={cp.artwork_url || undefined}
+                  {...scheduleProps(cp.id)}
+                  index={i}
+                  nextRunText={schedules[cp.id]?.enabled
+                    ? SCHEDULE_DAYS.find(d => d.value === schedules[cp.id].day)?.summary ?? 'Every day'
+                    : 'Disabled'}
+                  tracklistOpen={openTracklist === cp.id}
+                  onTracklistToggle={() => setOpenTracklist(v => v === cp.id ? null : cp.id)}
+                  onDelete={(opts) => onDelete(cp.id, opts)}
+                />
+              </div>
+            )
+          })}
+        </div>
+      )}
+
+      <TracklistSlide show={openTracklist && openTracklist.startsWith('custom-')} slideKey={openTracklist}>
+        <TracklistDropdown
+          playlist={openTracklist}
+          lbUser={null}
+          onRun={() => onSync(openTracklist)}
+        />
+      </TracklistSlide>
+
+      <AnimatePresence>
+        {showImportModal && (
+          <ImportModal
+            onClose={() => setShowImportModal(false)}
+            onImported={onImportedRefresh}
+            onSync={onSync}
+          />
+        )}
+      </AnimatePresence>
+    </div>
+  )
 }
 
 function HomeSection() {
@@ -114,6 +203,8 @@ function HomeSection() {
   const [scheduleSaveStatus, setScheduleSaveStatus] = useState({})
   const [lbUser, setLbUser] = useState('')
   const [openTracklist, setOpenTracklist] = useState(null)
+  const [customPlaylists, setCustomPlaylists] = useState([])
+  const [showImportModal, setShowImportModal] = useState(false)
 
   const [playlist, setPlaylist] = useState('weekly-exploration')
   const [dlmode, setDlmode] = useState('normal')
@@ -127,10 +218,29 @@ function HomeSection() {
   const logRef = useRef(null)
 
   useEffect(() => {
-    fetchConfig().then(({ values, sources }) => {
-      setSchedules(initSchedules(values))
+    Promise.all([
+      fetchConfig(),
+      fetchCustomPlaylists().catch(() => [])
+    ]).then(([{ values, sources }, customList]) => {
       setEnvSources(sources || {})
       setLbUser(values.LISTENBRAINZ_USER || '')
+      setCustomPlaylists(customList)
+
+      const s = {}
+      for (const p of PLAYLISTS) {
+        const cron = values[p.scheduleKey]
+        s[p.value] = cron
+          ? { enabled: true, editing: false, ...cronToFields(cron) }
+          : { enabled: false, day: p.defaultDay, hour: p.defaultHour, minute: p.defaultMinute, editing: false }
+      }
+      for (const cp of customList) {
+        s[cp.id] = cp.schedule
+          ? { enabled: true, editing: false, ...cronToFields(cp.schedule) }
+          : cp.flags
+            ? { enabled: true, editing: false, day: -2, hour: 4, minute: 0 }
+            : { enabled: false, day: -1, hour: 4, minute: 0, editing: false }
+      }
+      setSchedules(s)
     })
   }, [])
 
@@ -160,41 +270,55 @@ function HomeSection() {
     return () => disconnect()
   }, [connect, disconnect])
 
-  const isScheduleLocked = name => {
-    const p = PLAYLISTS.find(p => p.value === name)
+  const isScheduleLocked = id => {
+    const p = PLAYLISTS.find(p => p.value === id)
     return p ? envSources[p.scheduleKey] === 'env' : false
   }
 
-  const scheduleTime = name => {
-    const s = schedules[name]
-    return `${String(s.hour).padStart(2, '0')}:${String(s.minute).padStart(2, '0')}`
+  const nextRunText = id => {
+    const s = schedules[id]
+    if (!s?.enabled) return 'Disabled'
+    return SCHEDULE_DAYS.find(d => d.value === s.day)?.summary || 'Every day'
   }
 
-  const scheduleSummary = day => SCHEDULE_DAYS.find(d => d.value === day)?.summary ?? ''
-
-  const nextRunText = name => {
-    const s = schedules[name]
-    if (!s.enabled) return 'Disabled'
-    return scheduleSummary(s.day)
-  }
-
-  const updateScheduleTime = (name, val) => {
-    const [h = '00', m = '00'] = val.split(':')
-    setSchedules(prev => ({
-      ...prev,
-      [name]: { ...prev[name], hour: parseInt(h) || 0, minute: parseInt(m) || 0 },
-    }))
+  const flashStatus = (id, msg) => {
+    setScheduleSaveStatus(prev => ({ ...prev, [id]: msg }))
+    if (msg === 'Saved.') setTimeout(() => setScheduleSaveStatus(prev => ({ ...prev, [id]: '' })), 2000)
   }
 
-  const handleSaveSchedule = async name => {
-    if (isScheduleLocked(name)) return
-    const s = schedules[name]
-    try {
-      await saveSchedule(name, s.enabled, s.day, s.hour, s.minute)
-      setScheduleSaveStatus(prev => ({ ...prev, [name]: 'Saved.' }))
-      setTimeout(() => setScheduleSaveStatus(prev => ({ ...prev, [name]: '' })), 2000)
-    } catch {
-      setScheduleSaveStatus(prev => ({ ...prev, [name]: 'Error saving.' }))
+  const scheduleProps = id => {
+    const s = schedules[id]
+    return {
+      schedule: s,
+      scheduleSaveStatus: scheduleSaveStatus[id] || '',
+      onToggle: v => {
+        setSchedules(prev => ({ ...prev, [id]: { ...prev[id], enabled: v } }))
+        saveSchedule(id, v, s.day, s.hour, s.minute)
+          .then(() => flashStatus(id, 'Saved.'))
+          .catch(() => flashStatus(id, 'Error saving.'))
+      },
+      onToggleEdit: () => setSchedules(prev => ({
+        ...prev, [id]: { ...prev[id], editing: !prev[id].editing }
+      })),
+      onSave: () => {
+        if (isScheduleLocked(id)) return
+        saveSchedule(id, s.enabled, s.day, s.hour, s.minute)
+          .then(() => flashStatus(id, 'Saved.'))
+          .catch(() => flashStatus(id, 'Error saving.'))
+        setSchedules(prev => ({ ...prev, [id]: { ...prev[id], editing: false } }))
+      },
+      onCancelEdit: () => setSchedules(prev => ({
+        ...prev, [id]: { ...prev[id], editing: false }
+      })),
+      onDayChange: day => setSchedules(prev => ({
+        ...prev, [id]: { ...prev[id], day }
+      })),
+      onTimeChange: val => {
+        const [h = '00', m = '00'] = val.split(':')
+        setSchedules(prev => ({
+          ...prev, [id]: { ...prev[id], hour: parseInt(h) || 0, minute: parseInt(m) || 0 }
+        }))
+      },
     }
   }
 
@@ -224,67 +348,76 @@ function HomeSection() {
     <div>
       {/* Scheduled Playlists */}
       <div className="mt-6">
-        <SectionLabel>Scheduled Playlists</SectionLabel>
+        <div className="text-[16px] font-bold tracking-tight text-white mb-3.5">Scheduled Playlists</div>
         <div className="grid grid-cols-1 min-[420px]:grid-cols-2 min-[720px]:grid-cols-4 gap-3 mt-3">
-          {PLAYLISTS.map((p, i) => {
-            const s = schedules[p.value]
-            const locked = isScheduleLocked(p.value)
-            return (
-              <PlaylistCard
-                key={p.value}
-                playlist={p}
-                schedule={s}
-                locked={locked}
-                fixedSchedule={!!p.fixedSchedule}
-                index={i}
-                nextRunText={nextRunText(p.value)}
-                scheduleSaveStatus={scheduleSaveStatus[p.value] || ''}
-                tracklistOpen={openTracklist === p.value}
-                onTracklistToggle={() => setOpenTracklist(v => v === p.value ? null : p.value)}
-                onToggle={v => {
-                  // Read current schedule synchronously — avoids stale-closure bug where
-                  // handleSaveSchedule would see the pre-toggle enabled value.
-                  const cur = schedules[p.value]
-                  setSchedules(prev => ({ ...prev, [p.value]: { ...prev[p.value], enabled: v } }))
-                  saveSchedule(p.value, v, cur.day, cur.hour, cur.minute)
-                    .then(() => {
-                      setScheduleSaveStatus(prev => ({ ...prev, [p.value]: 'Saved.' }))
-                      setTimeout(() => setScheduleSaveStatus(prev => ({ ...prev, [p.value]: '' })), 2000)
-                    })
-                    .catch(() => setScheduleSaveStatus(prev => ({ ...prev, [p.value]: 'Error saving.' })))
-                }}
-                onToggleEdit={() => setSchedules(prev => ({ ...prev, [p.value]: { ...prev[p.value], editing: !prev[p.value].editing } }))}
-                onSave={() => { handleSaveSchedule(p.value); setSchedules(prev => ({ ...prev, [p.value]: { ...prev[p.value], editing: false } })) }}
-                onCancelEdit={() => setSchedules(prev => ({ ...prev, [p.value]: { ...prev[p.value], editing: false } }))}
-                onDayChange={day => setSchedules(prev => ({ ...prev, [p.value]: { ...prev[p.value], day } }))}
-                onTimeChange={val => updateScheduleTime(p.value, val)}
-              />
-            )
-          })}
+          {PLAYLISTS.map((p, i) => (
+            <PlaylistCard
+              key={p.value}
+              playlist={p}
+              {...scheduleProps(p.value)}
+              locked={isScheduleLocked(p.value)}
+              fixedSchedule={!!p.fixedSchedule}
+              index={i}
+              nextRunText={nextRunText(p.value)}
+              tracklistOpen={openTracklist === p.value}
+              onTracklistToggle={() => setOpenTracklist(v => v === p.value ? null : p.value)}
+            />
+          ))}
         </div>
-        <AnimatePresence>
-          {openTracklist && (
-            <motion.div
-              key={openTracklist}
-              initial={{ opacity: 0, height: 0 }}
-              animate={{ opacity: 1, height: 'auto' }}
-              exit={{ opacity: 0, height: 0 }}
-              transition={{ duration: 0.28, ease: 'easeInOut' }}
-              style={{ overflow: 'hidden' }}
-            >
-              <TracklistDropdown
-                lbUser={lbUser}
-                playlist={openTracklist}
-              />
-            </motion.div>
-          )}
-        </AnimatePresence>
+        <TracklistSlide show={openTracklist && PLAYLISTS.some(p => p.value === openTracklist)} slideKey={openTracklist}>
+          <TracklistDropdown lbUser={lbUser} playlist={openTracklist} />
+        </TracklistSlide>
         <p className="text-[12px] text-muted mt-3">Schedule changes take effect after restarting the container.</p>
       </div>
 
+      {/* Custom Playlists */}
+      <CustomPlaylistsSection
+        customPlaylists={customPlaylists}
+        schedules={schedules}
+        scheduleProps={scheduleProps}
+        openTracklist={openTracklist}
+        setOpenTracklist={setOpenTracklist}
+        lbUser={lbUser}
+        showImportModal={showImportModal}
+        setShowImportModal={setShowImportModal}
+        onImportedRefresh={() => {
+          fetchCustomPlaylists().then(list => {
+            setCustomPlaylists(list)
+            setSchedules(prev => {
+              const next = { ...prev }
+              for (const cp of list) {
+                if (next[cp.id]) continue
+                next[cp.id] = cp.schedule
+                  ? { enabled: true, editing: false, ...cronToFields(cp.schedule) }
+                  : cp.flags
+                    ? { enabled: true, editing: false, day: -2, hour: 4, minute: 0 }
+                    : { enabled: false, day: -1, hour: 4, minute: 0, editing: false }
+              }
+              return next
+            })
+          }).catch(() => {})
+          setShowImportModal(false)
+        }}
+        onSync={async (id) => {
+          await startRun(id, 'normal', true, false)
+          setRunning(true)
+          setStatus('running…')
+          setLogEntries([])
+          connect()
+        }}
+        onDelete={async (id, opts) => {
+          try {
+            await deleteCustomPlaylist(id, opts)
+            setCustomPlaylists(prev => prev.filter(p => p.id !== id))
+            setSchedules(prev => { const next = { ...prev }; delete next[id]; return next })
+            if (openTracklist === id) setOpenTracklist(null)
+          } catch {}
+        }}
+      />
+
       {/* Manual Run */}
       <div className="mt-6">
-        <SectionLabel>Manual run</SectionLabel>
+        <div className="text-[16px] font-bold tracking-tight text-white mb-3.5">Manual Run</div>
         <div className="flex flex-col gap-1.5 mb-3">
           <label className="text-[12px] text-muted">Download mode</label>
           <div className="flex gap-1.5">
@@ -311,6 +444,8 @@ function HomeSection() {
           <label className="text-[12px] text-muted">Playlist</label>
           <select className={selectCls} value={playlist} onChange={e => setPlaylist(e.target.value)}>
             {PLAYLISTS.map(p => <option key={p.value} value={p.value}>{p.name}</option>)}
+            {customPlaylists.length > 0 && <option disabled>---</option>}
+            {customPlaylists.map(cp => <option key={cp.id} value={cp.id}>{cp.name}</option>)}
           </select>
           <label className="flex items-center gap-1.5 text-[12px] text-muted cursor-pointer" title="When unchecked (default), previously generated playlists and their tracks are kept and added to over time. When checked, the playlist is wiped and rebuilt from scratch on each run.">
             <input type="checkbox" checked={noPersist} onChange={e => setNoPersist(e.target.checked)} /> don't persist
diff --git a/src/web/frontend/src/components/ui/ImportModal.jsx b/src/web/frontend/src/components/ui/ImportModal.jsx
new file mode 100644
index 00000000..a8aa382c
--- /dev/null
+++ b/src/web/frontend/src/components/ui/ImportModal.jsx
@@ -0,0 +1,378 @@
+import { useState, useEffect, useCallback } from 'react'
+import { motion, AnimatePresence } from 'motion/react'
+import { importCustomPlaylist } from '../../lib/api'
+import listenbrainzIcon from '../../assets/listenbrainz.svg'
+import appleMusicIcon from '../../assets/apple-music.svg'
+import spotifyIcon from '../../assets/spotify.svg'
+
+const REFRESH_OPTIONS = [
+  { value: 0,  label: 'Never' },
+  { value: 1,  label: 'Every day' },
+  { value: 7,  label: 'Every week' },
+  { value: 14, label: 'Every 2 weeks' },
+  { value: 30, label: 'Every month' },
+]
+
+const SOURCES = [
+  { key: 'listenbrainz', label: 'ListenBrainz', icon: listenbrainzIcon, color: '#EB743B', placeholder: 'https://listenbrainz.org/playlist/\u2026' },
+  { key: 'apple_music',  label: 'Apple Music',  icon: appleMusicIcon,  color: '#FA243C', placeholder: 'https://music.apple.com/us/playlist/\u2026' },
+  { key: 'spotify',      label: 'Spotify',      icon: spotifyIcon,     color: '#1ed760', placeholder: 'https://open.spotify.com/playlist/\u2026' },
+]
+
+function CoverThumb({ src, index, onLoaded }) {
+  const [loaded, setLoaded] = useState(false)
+  const done = () => { setLoaded(true); onLoaded?.() }
+  return (
+    <div className="relative w-full aspect-square overflow-hidden" style={{ background: '#141414' }}>
+      <motion.div
+        animate={{ backgroundPosition: ['200% 0', '-200% 0'], opacity: loaded ? 0 : 1 }}
+        transition={{
+          backgroundPosition: { duration: 1.2, repeat: Infinity, ease: 'linear' },
+          opacity: { duration: 0.4 },
+        }}
+        style={{
+          position: 'absolute', inset: 0,
+          background: 'linear-gradient(90deg, #141414 25%, #242424 50%, #141414 75%)',
+          backgroundSize: '200% 100%',
+          pointerEvents: 'none',
+        }}
+      />
+      <motion.img
+        src={src}
+        alt=""
+        onLoad={done}
+        onError={done}
+        initial={false}
+        animate={loaded ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.92 }}
+        transition={{ duration: 1.2, delay: loaded ? index * 0.18 : 0, ease: [0.16, 1, 0.3, 1] }}
+        className="w-full h-full object-cover block"
+      />
+    </div>
+  )
+}
+
+function SuccessPanel({ result, onImported, onSync, onClose, onError }) {
+  const unique = [...new Map((result.cover_urls ?? []).map(u => [u, u])).values()].slice(0, 6)
+  const cols = unique.length <= 1 ? 1 : unique.length <= 4 ? 2 : 3
+  const [loadedCount, setLoadedCount] = useState(0)
+  const [footerReady, setFooterReady] = useState(unique.length === 0)
+
+  const handleCoverLoaded = useCallback(() => setLoadedCount(n => n + 1), [])
+
+  useEffect(() => {
+    if (unique.length === 0 || loadedCount < unique.length) return
+    const t = setTimeout(() => setFooterReady(true), (unique.length - 1) * 180 + 1300)
+    return () => clearTimeout(t)
+  }, [loadedCount, unique.length])
+
+  return (
+    <>
+      <div className="flex items-center justify-between px-5 py-4 border-b border-ui-border">
+        <div>
+          <h2 className="text-[15px] font-semibold text-white leading-none">{result.name}</h2>
+          <p className="text-[11px] text-muted mt-1">
+            {result.track_count} track{result.track_count !== 1 ? 's' : ''} imported
+          </p>
+        </div>
+      </div>
+
+      {unique.length > 0 && (
+        <div className="px-5 pt-4 pb-4">
+          <div className={`grid gap-1.5 rounded-lg overflow-hidden ${
+            cols === 1 ? 'grid-cols-1 max-w-[180px] mx-auto' : cols === 2 ? 'grid-cols-2' : 'grid-cols-3'
+          }`}>
+            {unique.map((src, i) => (
+              <CoverThumb key={src} src={src} index={i} onLoaded={handleCoverLoaded} />
+            ))}
+          </div>
+        </div>
+      )}
+
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: footerReady ? 1 : 0 }}
+        transition={{ duration: 0.4 }}
+        style={{ pointerEvents: footerReady ? 'auto' : 'none' }}
+        className="flex justify-end gap-2 px-5 pb-5"
+      >
+        {onSync && (
+          <button
+            onClick={async () => {
+              try { await onSync(result.id); onImported(result); onClose() }
+              catch (e) { onError(e.message || 'Sync failed') }
+            }}
+            className="bg-transparent border border-ui-border text-muted rounded-full px-4 py-1.5 text-[13px] cursor-pointer hover:text-white hover:border-[#444] transition-colors"
+          >
+            Sync to Library
+          </button>
+        )}
+        <button
+          onClick={() => { onImported(result); onClose() }}
+          className="bg-[var(--brand)] text-black border-none rounded-full px-5 py-1.5 text-[13px] font-semibold cursor-pointer hover:scale-[1.04] active:scale-[0.97] transition-transform"
+        >
+          Done
+        </button>
+      </motion.div>
+    </>
+  )
+}
+
+export function ImportModal({ onClose, onImported, onSync }) {
+  const [source, setSource] = useState(null)   // 'listenbrainz' | 'apple_music'
+  const [url, setUrl] = useState('')
+  const [refreshDays, setRefreshDays] = useState(0)
+  const [phase, setPhase] = useState('source') // 'source' | 'form' | 'success' | 'error'
+  const [loading, setLoading] = useState(false)
+  const [result, setResult] = useState(null)
+  const [errorMsg, setErrorMsg] = useState('')
+
+  const sourceCfg = SOURCES.find(s => s.key === source)
+
+  const handleImport = async () => {
+    if (!url.trim() || loading) return
+    setLoading(true)
+    try {
+      const data = await importCustomPlaylist(url.trim(), source, refreshDays)
+      setResult(data)
+      setPhase('success')
+    } catch (e) {
+      setErrorMsg(e.message || 'Import failed')
+      setPhase('error')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const canSubmit = url.trim() && !loading
+
+  return (
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      transition={{ duration: 0.2 }}
+      onClick={(phase === 'source' || phase === 'form' || phase === 'error') && !loading ? onClose : undefined}
+      className="fixed inset-0 z-50 flex items-center justify-center"
+      style={{
+        background: 'rgba(0, 0, 0, 0.72)',
+        backdropFilter: 'blur(6px)',
+        WebkitBackdropFilter: 'blur(6px)',
+      }}
+    >
+      <motion.div
+        initial={{ opacity: 0, y: 24, scale: 0.97 }}
+        animate={{ opacity: 1, y: 0, scale: 1 }}
+        exit={{ opacity: 0, y: 16, scale: 0.97 }}
+        transition={{ duration: 0.28, ease: [0.16, 1, 0.3, 1] }}
+        onClick={e => e.stopPropagation()}
+        className="w-full max-w-[420px] mx-4 border border-ui-border rounded-lg overflow-hidden"
+        style={{
+          background: '#1a1a1ae6',
+          backdropFilter: 'blur(8px)',
+          WebkitBackdropFilter: 'blur(8px)',
+          boxShadow: '0 24px 64px #00000099',
+          '--brand': sourceCfg?.color ?? '#1ed760',
+        }}
+      >
+        <AnimatePresence mode="wait">
+
+          {/* ── Source selection ─────────────────────────────── */}
+          {phase === 'source' && (
+            <motion.div
+              key="source"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.15 }}
+            >
+              {/* Header */}
+              <div className="flex items-center justify-between px-5 py-4 border-b border-ui-border">
+                <h2 className="text-[15px] font-semibold text-white leading-none">
+                  Choose a Playlist Source
+                </h2>
+                <button
+                  onClick={onClose}
+                  className="text-muted hover:text-white transition-colors text-[18px] leading-none p-0 bg-transparent border-none cursor-pointer"
+                >
+                  &times;
+                </button>
+              </div>
+
+              {/* Source buttons */}
+              <div className="px-5 pt-5 pb-5 grid grid-cols-3 gap-3">
+                {SOURCES.map(s => (
+                  <button
+                    key={s.key}
+                    onClick={() => { setSource(s.key); setPhase('form') }}
+                    onMouseMove={e => {
+                      const r = e.currentTarget.getBoundingClientRect()
+                      e.currentTarget.style.setProperty('--mx', `${e.clientX - r.left}px`)
+                      e.currentTarget.style.setProperty('--my', `${e.clientY - r.top}px`)
+                    }}
+                    style={{ '--brand': s.color }}
+                    className="relative overflow-hidden aspect-square flex flex-col items-center justify-center gap-3 bg-well border border-ui-border rounded-md cursor-pointer transition-colors group hover:border-[var(--brand)]"
+                  >
+                    <div
+                      aria-hidden
+                      className="pointer-events-none absolute -inset-10 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
+                      style={{
+                        background: 'radial-gradient(circle 230px at calc(var(--mx, 50%) + 40px) calc(var(--my, 50%) + 40px), var(--brand) 30%, transparent)',
+                        filter: 'blur(22px)',
+                      }}
+                    />
+                    <img
+                      src={s.icon}
+                      alt=""
+                      draggable={false}
+                      className="relative w-[40px] h-[40px] object-contain select-none transition-transform group-hover:scale-[1.04]"
+                    />
+                    <div className="relative text-[12px] font-bold tracking-tight text-white">
+                      {s.label}
+                    </div>
+                  </button>
+                ))}
+              </div>
+            </motion.div>
+          )}
+
+          {/* ── Form ───────────────────────────────────────── */}
+          {phase === 'form' && (
+            <motion.div
+              key="form"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.15 }}
+            >
+              {/* Header */}
+              <div className="flex items-center justify-between px-5 py-4 border-b border-ui-border">
+                <h2 className="text-[15px] font-semibold text-white leading-none">
+                  Import Playlist
+                </h2>
+                <button
+                  onClick={onClose}
+                  disabled={loading}
+                  className="text-muted hover:text-white transition-colors text-[18px] leading-none p-0 bg-transparent border-none cursor-pointer disabled:opacity-40"
+                >
+                  &times;
+                </button>
+              </div>
+
+              {/* Body */}
+              <div className="px-5 pt-5 pb-5 flex flex-col gap-4">
+                <div className="flex flex-col gap-1.5">
+                  <label className="text-[12px] font-medium text-muted">
+                    {sourceCfg?.label ?? 'Playlist'} URL
+                  </label>
+                  <input
+                    type="text"
+                    value={url}
+                    onChange={e => setUrl(e.target.value)}
+                    onKeyDown={e => e.key === 'Enter' && handleImport()}
+                    placeholder={sourceCfg?.placeholder ?? 'Paste a playlist URL\u2026'}
+                    autoFocus
+                    disabled={loading}
+                    className="w-full bg-well border border-ui-border text-white rounded-lg px-3 py-2 text-[13px] outline-none placeholder:text-[#444] focus:border-[var(--brand)] transition-colors disabled:opacity-50"
+                  />
+                </div>
+
+                <div className="flex flex-col gap-1.5">
+                  <label className="text-[12px] font-medium text-muted">
+                    Auto-refresh
+                  </label>
+                  <select
+                    value={refreshDays}
+                    onChange={e => setRefreshDays(Number(e.target.value))}
+                    disabled={loading}
+                    className="bg-well border border-ui-border text-white rounded-lg px-3 py-2 text-[13px] cursor-pointer outline-none focus:border-[var(--brand)] transition-colors disabled:opacity-50"
+                  >
+                    {REFRESH_OPTIONS.map(o => (
+                      <option key={o.value} value={o.value}>{o.label}</option>
+                    ))}
+                  </select>
+                </div>
+              </div>
+
+              {/* Footer */}
+              <div className="flex justify-end gap-2 px-5 pb-5">
+                <button
+                  onClick={() => { setPhase('source'); setSource(null); setUrl('') }}
+                  disabled={loading}
+                  className="bg-transparent border border-ui-border text-muted rounded-full px-4 py-1.5 text-[13px] cursor-pointer hover:text-white hover:border-[#444] transition-colors disabled:opacity-40"
+                >
+                  Back
+                </button>
+                <button
+                  onClick={handleImport}
+                  disabled={!canSubmit}
+                  className={`border-none rounded-full px-5 py-1.5 text-[13px] font-semibold transition-all
+                    ${canSubmit
+                      ? 'bg-[var(--brand)] text-black cursor-pointer hover:scale-[1.04] active:scale-[0.97]'
+                      : 'bg-[#2a2a2a] text-[#555] cursor-default'
+                    }`}
+                >
+                  {loading ? 'Importing\u2026' : 'Import'}
+                </button>
+              </div>
+            </motion.div>
+          )}
+
+          {/* ── Success ────────────────────────────────────── */}
+          {phase === 'success' && result && (
+            <motion.div
+              key="success"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.2 }}
+            >
+              <SuccessPanel
+                result={result}
+                onImported={onImported}
+                onSync={onSync}
+                onClose={onClose}
+                onError={msg => { setErrorMsg(msg); setPhase('error') }}
+              />
+            </motion.div>
+          )}
+
+          {/* ── Error ──────────────────────────────────────── */}
+          {phase === 'error' && (
+            <motion.div
+              key="error"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.15 }}
+            >
+              {/* Header */}
+              <div className="px-5 py-4 border-b border-ui-border">
+                <h2 className="text-[15px] font-semibold text-white leading-none">
+                  Import failed
+                </h2>
+                <p className="text-[12px] text-danger mt-1.5">{errorMsg}</p>
+              </div>
+
+              {/* Footer */}
+              <div className="flex justify-end gap-2 px-5 py-4">
+                <button
+                  onClick={onClose}
+                  className="bg-transparent border border-ui-border text-muted rounded-full px-4 py-1.5 text-[13px] cursor-pointer hover:text-white hover:border-[#444] transition-colors"
+                >
+                  Close
+                </button>
+                <button
+                  onClick={() => { setPhase('form'); setErrorMsg('') }}
+                  className="bg-[var(--brand)] text-black border-none rounded-full px-5 py-1.5 text-[13px] font-semibold cursor-pointer hover:scale-[1.04] active:scale-[0.97] transition-transform"
+                >
+                  Try again
+                </button>
+              </div>
+            </motion.div>
+          )}
+
+        </AnimatePresence>
+      </motion.div>
+    </motion.div>
+  )
+}
diff --git a/src/web/frontend/src/components/ui/PlaylistCard.jsx b/src/web/frontend/src/components/ui/PlaylistCard.jsx
index 66cab2b4..06fb2b10 100644
--- a/src/web/frontend/src/components/ui/PlaylistCard.jsx
+++ b/src/web/frontend/src/components/ui/PlaylistCard.jsx
@@ -108,12 +108,14 @@ function nextUpdateLabel(playlistType) {
   return `Next update ${nextMonday.toLocaleDateString([], { weekday: 'long', month: 'short', day: 'numeric' })}`
 }
 
-export function TracklistDropdown({ playlist, lbUser }) {
+export function TracklistDropdown({ playlist, lbUser, onRun }) {
   const [tracks, setTracks] = useState([])
   const [generatedAt, setGeneratedAt] = useState(null)
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState(null)
   const [fetching, setFetching] = useState(false)
+  const [running, setRunning] = useState(false)
+  const [runStatus, setRunStatus] = useState('')
 
   const loadTracks = (withRetry = false) => {
     let cancelled = false
@@ -154,12 +156,27 @@ export function TracklistDropdown({ playlist, lbUser }) {
       .finally(() => setFetching(false))
   }
 
+  const handleRun = async () => {
+    if (!onRun || running) return
+    setRunning(true)
+    setRunStatus('')
+    try {
+      await onRun()
+      setRunStatus('Started')
+      setTimeout(() => setRunStatus(''), 3000)
+    } catch (e) {
+      setRunStatus(e.message || 'Error')
+    } finally {
+      setRunning(false)
+    }
+  }
+
   const genDate = generatedAt ? new Date(generatedAt) : null
 
   return (
     <div style={{ marginTop: 16 }}>
       {/* Header */}
-      <div style={{ paddingBottom: 12, borderBottom: '1px solid #232323', display: 'flex', alignItems: 'baseline', gap: 10 }}>
+      <div style={{ paddingBottom: 12, borderBottom: '1px solid #232323', display: 'flex', alignItems: 'center', gap: 10 }}>
         <span style={{ fontSize: 11, color: '#ffffff', letterSpacing: '0.08em', textTransform: 'uppercase' }}>
           {!loading && tracks.length ? `${tracks.length} Tracks` : 'Tracks'}
         </span>
@@ -168,6 +185,25 @@ export function TracklistDropdown({ playlist, lbUser }) {
             Generated {genDate.toLocaleDateString([], { month: 'short', day: 'numeric' })}
           </span>
         )}
+        {onRun && (
+          <span style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 10 }}>
+            {runStatus && <span style={{ fontSize: 10, color: '#565656' }}>{runStatus}</span>}
+            <button
+              onClick={handleRun}
+              disabled={running}
+              style={{
+                background: 'none', border: 'none', padding: 0,
+                fontSize: 10, letterSpacing: '0.06em', textTransform: 'uppercase',
+                color: running ? '#3a3a3a' : '#565656',
+                cursor: running ? 'default' : 'pointer',
+              }}
+              onMouseEnter={e => { if (!running) e.currentTarget.style.color = 'white' }}
+              onMouseLeave={e => { if (!running) e.currentTarget.style.color = '#565656' }}
+            >
+              {running ? 'Starting…' : '▶ Run'}
+            </button>
+          </span>
+        )}
       </div>
 
       {/* Track list */}
@@ -177,16 +213,13 @@ export function TracklistDropdown({ playlist, lbUser }) {
         ) : error ? (
           <div style={{ padding: '16px 2px', fontSize: 12, color: '#c0392b' }}>{error}</div>
         ) : tracks.length === 0 ? (
-          <div style={{ padding: '16px 2px', fontSize: 12, color: '#4a4a4a', display: 'flex', alignItems: 'center', gap: 10 }}>
+          <div style={{ padding: '16px 2px', fontSize: 12, color: '#4a4a4a', display: 'flex', flexDirection: 'column', gap: 8 }}>
             <span>No playlist found yet. {nextUpdateLabel(playlist)}.</span>
             {lbUser && (
               <button
                 onClick={handleFetch}
                 disabled={fetching}
-                style={{
-                  fontSize: 11, padding: '3px 10px', borderRadius: 5, border: '1px solid #444',
-                  background: '#1f1f1f', color: 'white', cursor: 'pointer', flexShrink: 0,
-                }}
+                className="bg-transparent border border-ui-border text-muted rounded-full px-3 py-1 text-[11px] cursor-pointer hover:text-white hover:border-[#444] transition-colors self-start disabled:opacity-50"
               >
                 Pull tracks
               </button>
@@ -239,18 +272,86 @@ const FALLBACK = {
   label: 'PLAYLIST',
 }
 
+// Color pool for user-imported custom playlists (cycled by colorIndex % 4)
+const CUSTOM_PRESETS = [
+  { background: cardGradient('#6366f1', '#8b5cf6', '#a78bfa'), accent: '#a78bfa' },
+  { background: cardGradient('#0891b2', '#0e7490', '#67e8f9'), accent: '#67e8f9' },
+  { background: cardGradient('#d97706', '#b45309', '#fcd34d'), accent: '#fcd34d' },
+  { background: cardGradient('#16a34a', '#15803d', '#4ade80'), accent: '#4ade80' },
+]
+
 const SCHEDULE_DAYS = [
-  { value: -1,  label: 'Every day' },
-  { value: 0,   label: 'Sunday' },
-  { value: 1,   label: 'Monday' },
-  { value: 2,   label: 'Tuesday' },
-  { value: 3,   label: 'Wednesday' },
-  { value: 4,   label: 'Thursday' },
-  { value: 5,   label: 'Friday' },
-  { value: 6,   label: 'Saturday' },
-  { value: 100, label: 'Monthly (1st)' },
+  { value: -2,   label: 'Never' },
+  { value: -1,   label: 'Every day' },
+  { value: 0,    label: 'Sunday' },
+  { value: 1,    label: 'Monday' },
+  { value: 2,    label: 'Tuesday' },
+  { value: 3,    label: 'Wednesday' },
+  { value: 4,    label: 'Thursday' },
+  { value: 5,    label: 'Friday' },
+  { value: 6,    label: 'Saturday' },
+  { value: 100,  label: 'Monthly (1st)' },
 ]
 
+// ── ScheduleEditor ────────────────────────────────────────────────────────────
+
+function ScheduleEditor({ schedule: s, onSave, onCancelEdit, onDayChange, onTimeChange }) {
+  const timeStr = `${String(s.hour).padStart(2, '0')}:${String(s.minute).padStart(2, '0')}`
+  const open = s.editing && s.enabled
+  const isNever = s.day === -2
+  return (
+    <div style={{
+      display: 'grid',
+      gridTemplateRows: open ? '1fr' : '0fr',
+      opacity: open ? 1 : 0,
+      transition: 'grid-template-rows 0.22s ease-in-out, opacity 0.22s ease-in-out',
+    }}>
+      <div style={{ overflow: 'hidden' }}>
+        <div style={{
+          marginTop: 8,
+          background: '#161616', border: '1px solid #2a2a2a',
+          borderRadius: 10, padding: '11px 13px',
+          display: 'flex', flexDirection: 'column', gap: 9,
+        }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
+            <span style={{ fontSize: 12, color: '#7a7a7a' }}>Runs</span>
+            <select
+              value={s.day}
+              onChange={e => onDayChange(parseInt(e.target.value))}
+              style={{
+                background: '#1f1f1f', border: '1px solid #333', color: 'white',
+                borderRadius: 6, padding: '5px 10px', fontSize: 13, cursor: 'pointer', outline: 'none',
+              }}
+            >
+              {SCHEDULE_DAYS.map(d => (
+                <option key={d.value} value={d.value}>{d.label}</option>
+              ))}
+            </select>
+            {!isNever && (
+              <>
+                <span style={{ fontSize: 12, color: '#7a7a7a' }}>at</span>
+                <input
+                  type="time"
+                  value={timeStr}
+                  onChange={e => onTimeChange(e.target.value)}
+                  style={{
+                    background: '#1f1f1f', border: '1px solid #333', color: 'white',
+                    borderRadius: 6, padding: '5px 8px', fontSize: 13, outline: 'none',
+                  }}
+                />
+              </>
+            )}
+          </div>
+          <div style={{ display: 'flex', gap: 7 }}>
+            <Button style={{ padding: '4px 12px', fontSize: 12 }} onClick={onSave}>Save</Button>
+            <Button style={{ padding: '4px 10px', fontSize: 12 }} onClick={onCancelEdit}>✕</Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
 // Inline SVG noise — subtle film-grain texture
 const NOISE = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")`
 
@@ -271,9 +372,21 @@ export function PlaylistCard({
   gradient: gradientOverride,
   tracklistOpen,
   onTracklistToggle,
+  onDelete,
+  trackId,
+  artworkUrl,
 }) {
   const { value, name } = playlist
-  const preset = PRESETS[value] ?? FALLBACK
+  // trackFetchId: use real playlist ID (custom playlists) if provided, else fall back to value
+  const trackFetchId = trackId ?? value
+  // Resolve preset: built-in types → PRESETS, custom-N → CUSTOM_PRESETS[N % 3], else FALLBACK
+  let preset
+  if (PRESETS[value]) {
+    preset = PRESETS[value]
+  } else {
+    const customMatch = value.match(/^custom-(\d+)$/)
+    preset = customMatch ? CUSTOM_PRESETS[Number(customMatch[1]) % CUSTOM_PRESETS.length] : FALLBACK
+  }
   const bg = gradientOverride ?? preset.background
   const { accent, label } = preset
 
@@ -296,7 +409,7 @@ export function PlaylistCard({
     let retry = 0
     let retryTimer = null
     const load = () => {
-      fetchPlaylistTracks(value, { force: retry > 0 })
+      fetchPlaylistTracks(trackFetchId, { force: retry > 0 })
         .then(({ tracks }) => {
           if (cancelled) return
           const covers = tracks.map(t => t.coverUrl).filter(Boolean)
@@ -314,7 +427,7 @@ export function PlaylistCard({
       cancelled = true
       if (retryTimer) clearTimeout(retryTimer)
     }
-  }, [value, s.enabled])
+  }, [trackFetchId, s.enabled])
 
   useEffect(() => {
     if (bgCovers.length < 2) return
@@ -324,16 +437,32 @@ export function PlaylistCard({
 
   const [line1, ...rest] = name.split(' ')
   const line2 = rest.join(' ')
-  const timeStr = `${String(s.hour).padStart(2, '0')}:${String(s.minute).padStart(2, '0')}`
+
+  const [menuOpen, setMenuOpen] = useState(false)
+  const [confirmDelete, setConfirmDelete] = useState(false)
+  const [deleteTracksChecked, setDeleteTracksChecked] = useState(false)
+  const [cardHovered, setCardHovered] = useState(false)
+  const canEdit = !locked && !fixedSchedule && !!onToggleEdit
+  const hasMenu = canEdit || !!onDelete
+
+  useEffect(() => {
+    if (!menuOpen) { setConfirmDelete(false); setDeleteTracksChecked(false); return }
+    const close = () => setMenuOpen(false)
+    document.addEventListener('mousedown', close)
+    return () => document.removeEventListener('mousedown', close)
+  }, [menuOpen])
 
   return (
     <motion.div
       initial={{ opacity: 0, y: 28, scale: 0.96 }}
       animate={{ opacity: 1, y: 0, scale: 1 }}
       transition={{ duration: 0.55, delay: index * 0.09, ease: [0.16, 1, 0.3, 1] }}
+      style={{ position: 'relative' }}
     >
       <div
-        onClick={s.enabled ? onTracklistToggle : undefined}
+        onClick={e => { if (menuOpen) return; if (s.enabled && onTracklistToggle) onTracklistToggle() }}
+        onMouseEnter={() => setCardHovered(true)}
+        onMouseLeave={() => setCardHovered(false)}
         className="playlist-card"
         style={{
           position: 'relative',
@@ -354,28 +483,43 @@ export function PlaylistCard({
         {/* Gradient map color field */}
         <div style={{ position: 'absolute', inset: 0, backgroundImage: gradientLayers }} />
 
-        {/* Album art luminosity — gives the gradient field cover-art detail */}
-        <AnimatePresence>
-          {bgCovers[coverIdx] && (
-            <motion.img
-              key={coverIdx}
-              src={bgCovers[coverIdx]}
-              alt=""
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 0.86 }}
-              exit={{ opacity: 0 }}
-              transition={{ duration: 1.5, ease: 'easeInOut' }}
-              onError={() => setBgCovers(prev => prev.filter((_, i) => i !== coverIdx))}
-              style={{
-                position: 'absolute', inset: 0,
-                width: '100%', height: '100%',
-                objectFit: 'cover', display: 'block',
-                filter: 'grayscale(1) contrast(1) brightness(0.5)',
-                mixBlendMode: 'luminosity',
-              }}
-            />
-          )}
-        </AnimatePresence>
+        {/* Playlist artwork — static cover image (e.g. Apple Music playlists) */}
+        {artworkUrl && (
+          <img
+            src={artworkUrl}
+            alt=""
+            style={{
+              position: 'absolute', inset: 0,
+              width: '100%', height: '100%',
+              objectFit: 'cover', display: 'block',
+            }}
+          />
+        )}
+
+        {/* Album art luminosity — gives the gradient field cover-art detail (skipped when static artwork present) */}
+        {!artworkUrl && (
+          <AnimatePresence>
+            {bgCovers[coverIdx] && (
+              <motion.img
+                key={coverIdx}
+                src={bgCovers[coverIdx]}
+                alt=""
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 0.86 }}
+                exit={{ opacity: 0 }}
+                transition={{ duration: 1.5, ease: 'easeInOut' }}
+                onError={() => setBgCovers(prev => prev.filter((_, i) => i !== coverIdx))}
+                style={{
+                  position: 'absolute', inset: 0,
+                  width: '100%', height: '100%',
+                  objectFit: 'cover', display: 'block',
+                  filter: 'grayscale(1) contrast(1) brightness(0.5)',
+                  mixBlendMode: 'luminosity',
+                }}
+              />
+            )}
+          </AnimatePresence>
+        )}
 
         {/* Black wash — tune opacity to control gradient-map visibility */}
         <div style={{ position: 'absolute', inset: 0, background: '#000', opacity: 0.38 }} />
@@ -406,6 +550,23 @@ export function PlaylistCard({
           </div>
         )}
 
+        {hasMenu && (
+          <button
+            onMouseDown={e => e.stopPropagation()}
+            onClick={e => { e.stopPropagation(); setMenuOpen(o => !o) }}
+            style={{
+              position: 'absolute', top: 6, right: 8,
+              background: 'none', border: 'none',
+              color: 'white', fontSize: 18, lineHeight: 1,
+              cursor: 'pointer', padding: '2px 6px',
+              opacity: cardHovered || menuOpen ? 1 : 0.5,
+              transition: 'opacity 0.15s',
+              zIndex: 10,
+            }}
+          >
+            ⋮
+          </button>
+        )}
 
         {/* Name + schedule — bottom left */}
         <div style={{ position: 'absolute', bottom: 8, left: 10, maxWidth: 'calc(100% - 50px)', minWidth: 0 }}>
@@ -419,92 +580,155 @@ export function PlaylistCard({
             <div style={{ fontSize: 'clamp(11px, 3.5vw, 20px)', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}>{line1}</div>
             {line2 && <div style={{ fontSize: 'clamp(11px, 3.5vw, 20px)', opacity: 0.88, overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}>{line2}</div>}
           </div>
-          <span
-            onClick={e => { e.stopPropagation(); if (!locked && !fixedSchedule) onToggleEdit() }}
-            style={{
-              display: 'block', marginTop: 4,
-              fontSize: 8, fontWeight: 300,
-              color: 'rgba(255,255,255,0.55)',
-              mixBlendMode: 'hard-light',
-              cursor: (locked || fixedSchedule) ? 'default' : 'pointer',
-              letterSpacing: '0.02em',
-              whiteSpace: 'nowrap',
-              transition: 'color 0.3s',
-            }}
-          >
+          <span style={{
+            display: 'block', marginTop: 4,
+            fontSize: 8, fontWeight: 300,
+            color: 'rgba(255,255,255,0.55)',
+            mixBlendMode: 'hard-light',
+            letterSpacing: '0.02em',
+            whiteSpace: 'nowrap',
+          }}>
             {nextRunText}
           </span>
         </div>
 
         {/* Toggle — bottom right */}
-        <label
-          onClick={e => e.stopPropagation()}
-          style={{
-            position: 'absolute', bottom: 8, right: 8,
-            display: 'flex', alignItems: 'center',
-            cursor: locked ? 'not-allowed' : 'pointer',
-            opacity: locked ? 0.5 : 1,
-          }}
-        >
-          <Toggle checked={s.enabled} onChange={onToggle} disabled={locked} tiny />
-        </label>
-
-        {locked && (
-          <span style={{
-            position: 'absolute', bottom: 10, right: 30,
-            fontSize: 7, letterSpacing: '0.12em', color: 'rgba(255,255,255,0.3)',
-          }}>ENV</span>
+        {onToggle && (
+          <>
+            <label
+              onClick={e => e.stopPropagation()}
+              style={{
+                position: 'absolute', bottom: 8, right: 8,
+                display: 'flex', alignItems: 'center',
+                cursor: locked ? 'not-allowed' : 'pointer',
+                opacity: locked ? 0.5 : 1,
+              }}
+            >
+              <Toggle checked={s.enabled} onChange={onToggle} disabled={locked} tiny />
+            </label>
+            {locked && (
+              <span style={{
+                position: 'absolute', bottom: 10, right: 30,
+                fontSize: 7, letterSpacing: '0.12em', color: 'rgba(255,255,255,0.3)',
+              }}>ENV</span>
+            )}
+          </>
         )}
       </div>
 
-      {/* Inline schedule editor */}
+      {/* 3-dot dropdown menu */}
       <AnimatePresence>
-        {s.editing && s.enabled && !locked && !fixedSchedule && (
-          <motion.div
-            key="editor"
-            initial={{ opacity: 0, height: 0 }}
-            animate={{ opacity: 1, height: 'auto' }}
-            exit={{ opacity: 0, height: 0 }}
-            transition={{ duration: 0.22, ease: 'easeInOut' }}
-            style={{ overflow: 'hidden' }}
-          >
-            <div style={{
-              marginTop: 8,
-              background: '#161616', border: '1px solid #2a2a2a',
-              borderRadius: 10, padding: '11px 13px',
-              display: 'flex', flexDirection: 'column', gap: 9,
-            }}>
-              <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
-                <span style={{ fontSize: 12, color: '#7a7a7a' }}>Runs</span>
-                <select
-                  value={s.day}
-                  onChange={e => onDayChange(parseInt(e.target.value))}
+      {menuOpen && hasMenu && (
+        <motion.div
+          onMouseDown={e => e.stopPropagation()}
+          initial={{ opacity: 0, scale: 0.92, y: -6 }}
+          animate={{ opacity: 1, scale: 1, y: 0 }}
+          exit={{ opacity: 0, scale: 0.94, y: -4 }}
+          transition={{ duration: 0.16, ease: [0.16, 1, 0.3, 1] }}
+          style={{
+            position: 'absolute', top: 4, right: 4,
+            zIndex: 50,
+            transformOrigin: 'top right',
+            background: '#1a1a1ae6',
+            backdropFilter: 'blur(8px)',
+            WebkitBackdropFilter: 'blur(8px)',
+            border: '1px solid #282828',
+            borderRadius: 8,
+            padding: '4px 0',
+            minWidth: 155,
+            boxShadow: '0 8px 24px #00000088',
+          }}
+        >
+          {canEdit && (
+            <button
+              onClick={e => { e.stopPropagation(); setMenuOpen(false); onToggleEdit() }}
+              style={{
+                display: 'block', width: '100%', textAlign: 'left',
+                background: 'none', border: 'none',
+                padding: '8px 14px', fontSize: 13, color: '#c0c0c0',
+                cursor: 'pointer',
+              }}
+              onMouseEnter={e => { e.currentTarget.style.background = '#2a2a2a' }}
+              onMouseLeave={e => { e.currentTarget.style.background = 'none' }}
+            >
+              Edit Schedule
+            </button>
+          )}
+          {onDelete && !confirmDelete && (
+            <button
+              onClick={e => { e.stopPropagation(); setConfirmDelete(true) }}
+              style={{
+                display: 'block', width: '100%', textAlign: 'left',
+                background: 'none', border: 'none',
+                padding: '8px 14px', fontSize: 13, color: '#e05050',
+                cursor: 'pointer',
+              }}
+              onMouseEnter={e => { e.currentTarget.style.background = '#2a2a2a' }}
+              onMouseLeave={e => { e.currentTarget.style.background = 'none' }}
+            >
+              Delete Playlist
+            </button>
+          )}
+          {onDelete && confirmDelete && (
+            <div
+              onMouseDown={e => e.stopPropagation()}
+              style={{ padding: '8px 14px', display: 'flex', flexDirection: 'column', gap: 8 }}
+            >
+              <span style={{ fontSize: 12, color: '#9a9a9a' }}>Remove this playlist?</span>
+              <label
+                onClick={e => e.stopPropagation()}
+                style={{
+                  display: 'flex', alignItems: 'center', gap: 6,
+                  fontSize: 11, color: '#9a9a9a', cursor: 'pointer',
+                  userSelect: 'none',
+                }}
+              >
+                <input
+                  type="checkbox"
+                  checked={deleteTracksChecked}
+                  onChange={e => setDeleteTracksChecked(e.target.checked)}
+                  style={{ margin: 0, cursor: 'pointer', accentColor: '#c0392b' }}
+                />
+                Also delete downloaded files
+              </label>
+              <div style={{ display: 'flex', gap: 6 }}>
+                <button
+                  onClick={e => { e.stopPropagation(); setMenuOpen(false); onDelete({ deleteTracks: deleteTracksChecked }) }}
                   style={{
-                    background: '#1f1f1f', border: '1px solid #333', color: 'white',
-                    borderRadius: 6, padding: '5px 10px', fontSize: 13, cursor: 'pointer', outline: 'none',
+                    flex: 1, background: '#6b1a1a', border: '1px solid #8b2a2a',
+                    borderRadius: 5, padding: '5px 0', fontSize: 12,
+                    color: '#ff8080', cursor: 'pointer',
                   }}
                 >
-                  {SCHEDULE_DAYS.map(d => <option key={d.value} value={d.value}>{d.label}</option>)}
-                </select>
-                <span style={{ fontSize: 12, color: '#7a7a7a' }}>at</span>
-                <input
-                  type="time"
-                  value={timeStr}
-                  onChange={e => onTimeChange(e.target.value)}
+                  Delete
+                </button>
+                <button
+                  onClick={e => { e.stopPropagation(); setConfirmDelete(false); setDeleteTracksChecked(false) }}
                   style={{
-                    background: '#1f1f1f', border: '1px solid #333', color: 'white',
-                    borderRadius: 6, padding: '5px 8px', fontSize: 13, outline: 'none',
+                    flex: 1, background: '#242424', border: '1px solid #333',
+                    borderRadius: 5, padding: '5px 0', fontSize: 12,
+                    color: '#888', cursor: 'pointer',
                   }}
-                />
-              </div>
-              <div style={{ display: 'flex', gap: 7 }}>
-                <Button style={{ padding: '4px 12px', fontSize: 12 }} onClick={onSave}>Save</Button>
-                <Button style={{ padding: '4px 10px', fontSize: 12 }} onClick={onCancelEdit}>✕</Button>
+                >
+                  Cancel
+                </button>
               </div>
             </div>
-          </motion.div>
-        )}
+          )}
+        </motion.div>
+      )}
       </AnimatePresence>
+
+      {/* Inline schedule editor */}
+      {!locked && !fixedSchedule && (
+        <ScheduleEditor
+          schedule={s}
+          onSave={onSave}
+          onCancelEdit={onCancelEdit}
+          onDayChange={onDayChange}
+          onTimeChange={onTimeChange}
+        />
+      )}
     </motion.div>
   )
 }
diff --git a/src/web/frontend/src/lib/api.js b/src/web/frontend/src/lib/api.js
index 698c6e3b..dc2eb493 100644
--- a/src/web/frontend/src/lib/api.js
+++ b/src/web/frontend/src/lib/api.js
@@ -163,6 +163,35 @@ export async function fetchSetupStatus() {
   }
 }
 
+export async function fetchCustomPlaylists() {
+  const res = await apiFetch('/api/ui/custom-playlists')
+  if (!res.ok) throw new Error(await res.text())
+  return res.json()
+}
+
+export async function importCustomPlaylist(url, source, refresh_days) {
+  const res = await apiFetch('/api/ui/custom-playlists', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ url, source, refresh_days }),
+  })
+  if (res.status === 409) throw Object.assign(new Error('already imported'), { duplicate: true })
+  if (!res.ok) throw new Error(await res.text())
+  return res.json()
+}
+
+export async function deleteCustomPlaylist(id, { deleteTracks = false } = {}) {
+  const qs = deleteTracks ? '?delete_tracks=true' : ''
+  const res = await apiFetch(`/api/ui/custom-playlists/${encodeURIComponent(id)}${qs}`, { method: 'DELETE' })
+  if (!res.ok) throw new Error(await res.text())
+}
+
+export async function refreshCustomPlaylist(id) {
+  const res = await apiFetch(`/api/ui/custom-playlists/${encodeURIComponent(id)}/refresh`, { method: 'POST' })
+  if (!res.ok) throw new Error(await res.text())
+  return res.json()
+}
+
 export async function fetchBackgroundArt() {
   try {
     const res = await fetch('/api/ui/background-art')