diff --git a/.gitignore b/.gitignore
new file mode 100644
index 000000000..b76f70b85
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,3 @@
+*.pyc
+__pycache__/
+instance/
diff --git a/music_playlist/__pycache__/app.cpython-311.pyc b/music_playlist/__pycache__/app.cpython-311.pyc
new file mode 100644
index 000000000..547c7adff
Binary files /dev/null and b/music_playlist/__pycache__/app.cpython-311.pyc differ
diff --git a/music_playlist/__pycache__/metadata.cpython-311.pyc b/music_playlist/__pycache__/metadata.cpython-311.pyc
new file mode 100644
index 000000000..cf31ba62f
Binary files /dev/null and b/music_playlist/__pycache__/metadata.cpython-311.pyc differ
diff --git a/music_playlist/__pycache__/models.cpython-311.pyc b/music_playlist/__pycache__/models.cpython-311.pyc
new file mode 100644
index 000000000..33cdc466c
Binary files /dev/null and b/music_playlist/__pycache__/models.cpython-311.pyc differ
diff --git a/music_playlist/app.py b/music_playlist/app.py
new file mode 100644
index 000000000..bd45d907e
--- /dev/null
+++ b/music_playlist/app.py
@@ -0,0 +1,189 @@
+import os
+from flask import Flask, render_template, request, redirect, url_for, jsonify, abort, flash
+from slugify import slugify
+
+from models import db, Playlist, Track
+from metadata import fetch_metadata, detect_source
+
+app = Flask(__name__)
+app.config["SQLALCHEMY_DATABASE_URI"] = os.environ.get(
+    "DATABASE_URL", "sqlite:///playlists.db"
+)
+app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
+app.config["SECRET_KEY"] = os.environ.get("SECRET_KEY", "dev-secret-change-me")
+db.init_app(app)
+
+
+def _format_duration(seconds):
+    """Convert total seconds to H:MM:SS or M:SS string."""
+    if seconds is None:
+        return ""
+    seconds = int(seconds)
+    h, rem = divmod(seconds, 3600)
+    m, s = divmod(rem, 60)
+    if h:
+        return f"{h}:{m:02d}:{s:02d}"
+    return f"{m}:{s:02d}"
+
+app.jinja_env.filters["duration"] = _format_duration
+
+
+with app.app_context():
+    db.create_all()
+
+
+# ---------------------------------------------------------------------------
+# Helpers
+# ---------------------------------------------------------------------------
+
+def _unique_slug(name: str) -> str:
+    base = slugify(name) or "playlist"
+    slug, n = base, 1
+    while Playlist.query.filter_by(slug=slug).first():
+        slug = f"{base}-{n}"
+        n += 1
+    return slug
+
+
+# ---------------------------------------------------------------------------
+# Routes: playlists
+# ---------------------------------------------------------------------------
+
+@app.route("/")
+def index():
+    playlists = Playlist.query.order_by(Playlist.created_at.desc()).all()
+    return render_template("index.html", playlists=playlists)
+
+
+@app.route("/new", methods=["GET", "POST"])
+def new_playlist():
+    if request.method == "POST":
+        name = request.form.get("name", "").strip()
+        description = request.form.get("description", "").strip()
+        if not name:
+            flash("Playlist name is required.", "error")
+            return render_template("new_playlist.html")
+        slug = _unique_slug(name)
+        playlist = Playlist(slug=slug, name=name, description=description)
+        db.session.add(playlist)
+        db.session.commit()
+        return redirect(url_for("view_playlist", slug=slug))
+    return render_template("new_playlist.html")
+
+
+@app.route("/p/<slug>")
+def view_playlist(slug):
+    playlist = Playlist.query.filter_by(slug=slug).first_or_404()
+    return render_template("playlist.html", playlist=playlist)
+
+
+@app.route("/p/<slug>/edit", methods=["GET", "POST"])
+def edit_playlist(slug):
+    playlist = Playlist.query.filter_by(slug=slug).first_or_404()
+    if request.method == "POST":
+        name = request.form.get("name", "").strip()
+        description = request.form.get("description", "").strip()
+        if not name:
+            flash("Playlist name is required.", "error")
+        else:
+            playlist.name = name
+            playlist.description = description
+            db.session.commit()
+            flash("Playlist updated.", "success")
+            return redirect(url_for("view_playlist", slug=slug))
+    return render_template("edit_playlist.html", playlist=playlist)
+
+
+@app.route("/p/<slug>/delete", methods=["POST"])
+def delete_playlist(slug):
+    playlist = Playlist.query.filter_by(slug=slug).first_or_404()
+    db.session.delete(playlist)
+    db.session.commit()
+    flash("Playlist deleted.", "success")
+    return redirect(url_for("index"))
+
+
+# ---------------------------------------------------------------------------
+# Routes: tracks
+# ---------------------------------------------------------------------------
+
+@app.route("/p/<slug>/add", methods=["POST"])
+def add_track(slug):
+    playlist = Playlist.query.filter_by(slug=slug).first_or_404()
+    url = request.form.get("url", "").strip()
+    note = request.form.get("note", "").strip()
+
+    if not url:
+        flash("Please enter a song URL.", "error")
+        return redirect(url_for("view_playlist", slug=slug))
+
+    if not detect_source(url):
+        flash("URL must be from music.apple.com or bandcamp.com.", "error")
+        return redirect(url_for("view_playlist", slug=slug))
+
+    try:
+        meta = fetch_metadata(url)
+    except Exception as exc:
+        flash(f"Could not fetch track info: {exc}", "error")
+        return redirect(url_for("view_playlist", slug=slug))
+
+    max_pos = db.session.query(db.func.max(Track.position)).filter_by(
+        playlist_id=playlist.id
+    ).scalar() or 0
+
+    track = Track(
+        playlist_id=playlist.id,
+        url=url,
+        source=meta["source"],
+        title=meta["title"],
+        artist=meta["artist"],
+        album=meta["album"],
+        artwork_url=meta["artwork_url"],
+        embed_url=meta["embed_url"],
+        duration_seconds=meta.get("duration_seconds"),
+        position=max_pos + 1,
+        note=note,
+    )
+    db.session.add(track)
+    db.session.commit()
+    return redirect(url_for("view_playlist", slug=slug))
+
+
+@app.route("/p/<slug>/track/<int:track_id>/delete", methods=["POST"])
+def delete_track(slug, track_id):
+    playlist = Playlist.query.filter_by(slug=slug).first_or_404()
+    track = Track.query.filter_by(id=track_id, playlist_id=playlist.id).first_or_404()
+    db.session.delete(track)
+    db.session.commit()
+    return redirect(url_for("view_playlist", slug=slug))
+
+
+@app.route("/p/<slug>/track/<int:track_id>/note", methods=["POST"])
+def update_note(slug, track_id):
+    playlist = Playlist.query.filter_by(slug=slug).first_or_404()
+    track = Track.query.filter_by(id=track_id, playlist_id=playlist.id).first_or_404()
+    track.note = request.form.get("note", "").strip()
+    db.session.commit()
+    return redirect(url_for("view_playlist", slug=slug))
+
+
+# ---------------------------------------------------------------------------
+# API: metadata preview (used by JS before submission)
+# ---------------------------------------------------------------------------
+
+@app.route("/api/preview")
+def api_preview():
+    url = request.args.get("url", "").strip()
+    if not url:
+        return jsonify({"error": "No URL provided"}), 400
+    if not detect_source(url):
+        return jsonify({"error": "Unsupported URL"}), 400
+    try:
+        meta = fetch_metadata(url)
+        return jsonify(meta)
+    except Exception as exc:
+        return jsonify({"error": str(exc)}), 500
+
+
+if __name__ == "__main__":
+    app.run(debug=True, port=5000)
diff --git a/music_playlist/instance/playlists.db b/music_playlist/instance/playlists.db
new file mode 100644
index 000000000..7088f5a26
Binary files /dev/null and b/music_playlist/instance/playlists.db differ
diff --git a/music_playlist/metadata.py b/music_playlist/metadata.py
new file mode 100644
index 000000000..08eed1c0b
--- /dev/null
+++ b/music_playlist/metadata.py
@@ -0,0 +1,228 @@
+"""
+Fetch track metadata from Apple Music and Bandcamp URLs.
+"""
+
+import json
+import re
+import urllib.parse
+
+import requests
+from bs4 import BeautifulSoup
+
+HEADERS = {
+    "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"
+    )
+}
+
+
+def detect_source(url: str) -> str | None:
+    """Return 'apple', 'bandcamp', or None."""
+    parsed = urllib.parse.urlparse(url)
+    host = parsed.netloc.lower()
+    if "music.apple.com" in host:
+        return "apple"
+    if "bandcamp.com" in host:
+        return "bandcamp"
+    return None
+
+
+# ---------------------------------------------------------------------------
+# Apple Music
+# ---------------------------------------------------------------------------
+
+def _apple_music_ids(url: str) -> tuple[str | None, str | None]:
+    """Extract (album_id, track_id) from an Apple Music URL."""
+    # https://music.apple.com/us/album/song-name/ALBUM_ID?i=TRACK_ID
+    # https://music.apple.com/us/song/name/TRACK_ID
+    parsed = urllib.parse.urlparse(url)
+    qs = urllib.parse.parse_qs(parsed.query)
+    track_id = qs.get("i", [None])[0]
+
+    path_parts = parsed.path.rstrip("/").split("/")
+    numeric = [p for p in path_parts if p.isdigit()]
+
+    if track_id:
+        album_id = numeric[0] if numeric else None
+        return album_id, track_id
+
+    # /song/ path
+    if "song" in path_parts and numeric:
+        return None, numeric[-1]
+
+    # album-only link – use last numeric segment as album_id
+    if numeric:
+        return numeric[-1], None
+
+    return None, None
+
+
+def fetch_apple_music(url: str) -> dict:
+    album_id, track_id = _apple_music_ids(url)
+    lookup_id = track_id or album_id
+    if not lookup_id:
+        raise ValueError(f"Could not extract track/album ID from URL: {url}")
+
+    api_url = f"https://itunes.apple.com/lookup?id={lookup_id}"
+    resp = requests.get(api_url, timeout=10)
+    resp.raise_for_status()
+    data = resp.json()
+
+    results = data.get("results", [])
+    if not results:
+        raise ValueError("iTunes API returned no results")
+
+    # Prefer a track (wrapperType == 'track') over a collection
+    track = next(
+        (r for r in results if r.get("wrapperType") == "track"), results[0]
+    )
+
+    title = track.get("trackName") or track.get("collectionName", "Unknown")
+    artist = track.get("artistName", "")
+    album = track.get("collectionName", "")
+    artwork = track.get("artworkUrl100", "").replace("100x100", "600x600")
+    millis = track.get("trackTimeMillis")
+    duration = int(millis / 1000) if millis else None
+
+    # Build embed URL
+    if track_id and album_id:
+        embed = f"https://embed.music.apple.com/us/album/{album_id}?i={track_id}"
+    elif track_id:
+        embed = f"https://embed.music.apple.com/us/song/{track_id}"
+    elif album_id:
+        embed = f"https://embed.music.apple.com/us/album/{album_id}"
+    else:
+        embed = ""
+
+    return {
+        "title": title,
+        "artist": artist,
+        "album": album,
+        "artwork_url": artwork,
+        "embed_url": embed,
+        "duration_seconds": duration,
+        "source": "apple",
+    }
+
+
+# ---------------------------------------------------------------------------
+# Bandcamp
+# ---------------------------------------------------------------------------
+
+def _parse_iso_duration(s: str) -> int | None:
+    """Parse ISO 8601 duration like PT3M45S into total seconds."""
+    if not s:
+        return None
+    m = re.match(r'PT(?:(\d+)H)?(?:(\d+)M)?(?:(\d+)S)?', s)
+    if not m:
+        return None
+    h, mins, secs = (int(x) if x else 0 for x in m.groups())
+    total = h * 3600 + mins * 60 + secs
+    return total if total > 0 else None
+
+
+def _bandcamp_embed_url(url: str, track_id: str | None, album_id: str | None) -> str:
+    if track_id:
+        return f"https://bandcamp.com/EmbeddedPlayer/track={track_id}/size=large/bgcol=ffffff/linkcol=0687f5/tracklist=false/artwork=small/"
+    if album_id:
+        return f"https://bandcamp.com/EmbeddedPlayer/album={album_id}/size=large/bgcol=ffffff/linkcol=0687f5/artwork=small/"
+    return ""
+
+
+def fetch_bandcamp(url: str) -> dict:
+    resp = requests.get(url, headers=HEADERS, timeout=15)
+    resp.raise_for_status()
+    soup = BeautifulSoup(resp.text, "html.parser")
+
+    # ---- Open Graph fallback values ----
+    og_title = (soup.find("meta", property="og:title") or {}).get("content", "")
+    og_image = (soup.find("meta", property="og:image") or {}).get("content", "")
+    og_site = (soup.find("meta", property="og:site_name") or {}).get("content", "")
+
+    # ---- Try JSON-LD (most reliable) ----
+    title, artist, album = og_title, og_site, ""
+    track_id = album_id = None
+    duration = None
+
+    for script in soup.find_all("script", type="application/ld+json"):
+        try:
+            ld = json.loads(script.string or "")
+            if isinstance(ld, list):
+                ld = ld[0]
+            schema_type = ld.get("@type", "")
+            if schema_type in ("MusicRecording", "MusicAlbum"):
+                title = ld.get("name", title)
+                by_artist = ld.get("byArtist", {})
+                artist = by_artist.get("name", artist) if isinstance(by_artist, dict) else artist
+                in_album = ld.get("inAlbum", {})
+                album = in_album.get("name", "") if isinstance(in_album, dict) else ""
+                duration = _parse_iso_duration(ld.get("duration", ""))
+        except (json.JSONDecodeError, AttributeError):
+            pass
+
+    # ---- Extract numeric IDs from page data-tralbum or inline JS ----
+    # Bandcamp embeds IDs in a data attribute on the player div
+    player_div = soup.find("div", {"id": "trackInfo"}) or soup.find(
+        "div", {"data-tralbum": True}
+    )
+    if player_div and player_div.get("data-tralbum"):
+        try:
+            tralbum = json.loads(player_div["data-tralbum"])
+            track_id = str(tralbum.get("id", "")) or None
+        except (json.JSONDecodeError, KeyError):
+            pass
+
+    # Fallback: scan inline <script> for TralbumData
+    if not track_id and not album_id:
+        scripts = soup.find_all("script")
+        for s in scripts:
+            text = s.string or ""
+            # Look for track_id or item_id
+            m = re.search(r'"track_id"\s*:\s*(\d+)', text)
+            if m:
+                track_id = m.group(1)
+                break
+            m = re.search(r'"id"\s*:\s*(\d+)', text)
+            if m and "/track/" in url:
+                track_id = m.group(1)
+                break
+            m = re.search(r'"id"\s*:\s*(\d+)', text)
+            if m and "/album/" in url:
+                album_id = m.group(1)
+                break
+
+    # Derive type from URL if still missing
+    if not track_id and not album_id:
+        if "/track/" in url:
+            m = re.search(r'/track/[^/]+/?(\d+)?', url)
+        else:
+            m = None
+        # Last resort: try og:url canonical scraping is done — leave IDs empty
+
+    embed = _bandcamp_embed_url(url, track_id, album_id)
+
+    return {
+        "title": title or "Unknown",
+        "artist": artist or "",
+        "album": album or "",
+        "artwork_url": og_image or "",
+        "embed_url": embed,
+        "duration_seconds": duration,
+        "source": "bandcamp",
+    }
+
+
+# ---------------------------------------------------------------------------
+# Public entry point
+# ---------------------------------------------------------------------------
+
+def fetch_metadata(url: str) -> dict:
+    """Fetch metadata for an Apple Music or Bandcamp URL."""
+    source = detect_source(url)
+    if source == "apple":
+        return fetch_apple_music(url)
+    if source == "bandcamp":
+        return fetch_bandcamp(url)
+    raise ValueError(f"Unsupported URL. Must be music.apple.com or *.bandcamp.com: {url}")
diff --git a/music_playlist/models.py b/music_playlist/models.py
new file mode 100644
index 000000000..1261d656e
--- /dev/null
+++ b/music_playlist/models.py
@@ -0,0 +1,58 @@
+from datetime import datetime
+from flask_sqlalchemy import SQLAlchemy
+
+db = SQLAlchemy()
+
+
+class Playlist(db.Model):
+    __tablename__ = "playlists"
+
+    id = db.Column(db.Integer, primary_key=True)
+    slug = db.Column(db.String(120), unique=True, nullable=False)
+    name = db.Column(db.String(200), nullable=False)
+    description = db.Column(db.Text, default="")
+    created_at = db.Column(db.DateTime, default=datetime.utcnow)
+    tracks = db.relationship(
+        "Track", backref="playlist", lazy=True, order_by="Track.position"
+    )
+
+    def to_dict(self):
+        return {
+            "id": self.id,
+            "slug": self.slug,
+            "name": self.name,
+            "description": self.description,
+            "track_count": len(self.tracks),
+        }
+
+
+class Track(db.Model):
+    __tablename__ = "tracks"
+
+    id = db.Column(db.Integer, primary_key=True)
+    playlist_id = db.Column(db.Integer, db.ForeignKey("playlists.id"), nullable=False)
+    url = db.Column(db.String(500), nullable=False)
+    source = db.Column(db.String(20), nullable=False)  # "apple" or "bandcamp"
+    title = db.Column(db.String(300), nullable=False)
+    artist = db.Column(db.String(300), default="")
+    album = db.Column(db.String(300), default="")
+    artwork_url = db.Column(db.String(500), default="")
+    embed_url = db.Column(db.String(500), default="")
+    duration_seconds = db.Column(db.Integer, nullable=True)
+    position = db.Column(db.Integer, default=0)
+    added_at = db.Column(db.DateTime, default=datetime.utcnow)
+    note = db.Column(db.Text, default="")
+
+    def to_dict(self):
+        return {
+            "id": self.id,
+            "url": self.url,
+            "source": self.source,
+            "title": self.title,
+            "artist": self.artist,
+            "album": self.album,
+            "artwork_url": self.artwork_url,
+            "embed_url": self.embed_url,
+            "position": self.position,
+            "note": self.note,
+        }
diff --git a/music_playlist/requirements.txt b/music_playlist/requirements.txt
new file mode 100644
index 000000000..d1a4a2780
--- /dev/null
+++ b/music_playlist/requirements.txt
@@ -0,0 +1,5 @@
+flask>=3.0.0
+flask-sqlalchemy>=3.1.0
+requests>=2.31.0
+beautifulsoup4>=4.12.0
+python-slugify>=8.0.0
diff --git a/music_playlist/static/style.css b/music_playlist/static/style.css
new file mode 100644
index 000000000..1ad1c6e3e
--- /dev/null
+++ b/music_playlist/static/style.css
@@ -0,0 +1,373 @@
+/* ===== Reset & base ===== */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  --bg: #0f0f0f;
+  --surface: #1a1a1a;
+  --surface2: #242424;
+  --border: #2e2e2e;
+  --text: #f0f0f0;
+  --text-muted: #888;
+  --accent: #fc3c44;
+  --apple: #fc3c44;
+  --bandcamp: #1da0c3;
+  --radius: 8px;
+  --font: 'Inter', system-ui, -apple-system, sans-serif;
+}
+
+body {
+  font-family: var(--font);
+  background: var(--bg);
+  color: var(--text);
+  line-height: 1.6;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+a { color: var(--text); text-decoration: none; }
+a:hover { color: var(--accent); }
+
+/* ===== Site header ===== */
+.site-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 2rem;
+  border-bottom: 1px solid var(--border);
+  position: sticky;
+  top: 0;
+  background: var(--bg);
+  z-index: 10;
+}
+
+.site-logo {
+  font-size: 1.25rem;
+  font-weight: 700;
+  letter-spacing: -0.03em;
+}
+
+.site-header nav a {
+  font-size: 0.875rem;
+  color: var(--text-muted);
+  transition: color 0.15s;
+}
+.site-header nav a:hover { color: var(--text); }
+
+/* ===== Main ===== */
+main {
+  flex: 1;
+  max-width: 780px;
+  width: 100%;
+  margin: 0 auto;
+  padding: 2rem 1.5rem;
+}
+
+/* ===== Footer ===== */
+.site-footer {
+  text-align: center;
+  padding: 1.5rem;
+  color: var(--text-muted);
+  font-size: 0.8rem;
+  border-top: 1px solid var(--border);
+}
+
+/* ===== Flash messages ===== */
+.flash {
+  padding: 0.75rem 1rem;
+  border-radius: var(--radius);
+  margin-bottom: 1rem;
+  font-size: 0.875rem;
+}
+.flash--error   { background: #3a1212; border: 1px solid #7a2020; }
+.flash--success { background: #0e2e1a; border: 1px solid #1a6634; }
+
+/* ===== Buttons ===== */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem 1.1rem;
+  border-radius: var(--radius);
+  font-size: 0.9rem;
+  font-weight: 500;
+  cursor: pointer;
+  border: none;
+  transition: opacity 0.15s, background 0.15s;
+  text-decoration: none;
+}
+.btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.btn--primary { background: var(--accent); color: #fff; }
+.btn--primary:hover { opacity: 0.88; color: #fff; }
+.btn--ghost {
+  background: transparent;
+  color: var(--text-muted);
+  border: 1px solid var(--border);
+}
+.btn--ghost:hover { border-color: var(--text-muted); color: var(--text); }
+.btn--danger { background: #7a2020; color: #fff; }
+.btn--danger:hover { background: #9c2a2a; color: #fff; }
+.btn--sm { padding: 0.3rem 0.7rem; font-size: 0.8rem; }
+
+.btn-icon {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 1.2rem;
+  line-height: 1;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  color: var(--text-muted);
+  transition: color 0.15s, background 0.15s;
+}
+.btn-icon--danger:hover { color: var(--accent); background: rgba(252, 60, 68, 0.1); }
+
+/* ===== Forms ===== */
+.field { margin-bottom: 1rem; }
+.field label {
+  display: block;
+  font-size: 0.85rem;
+  color: var(--text-muted);
+  margin-bottom: 0.3rem;
+}
+.field .optional { font-size: 0.75rem; opacity: 0.6; }
+.field input, .field textarea {
+  width: 100%;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--text);
+  padding: 0.6rem 0.85rem;
+  font-size: 0.95rem;
+  font-family: var(--font);
+  transition: border-color 0.15s;
+}
+.field input:focus, .field textarea:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+.field--inline { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.5rem; }
+.field--inline label { margin: 0; white-space: nowrap; }
+.field--inline input { flex: 1; }
+
+.form-page { max-width: 480px; }
+.form-page h1 { margin-bottom: 1.5rem; }
+.form-page .btn + .btn { margin-left: 0.5rem; }
+
+.divider { border: none; border-top: 1px solid var(--border); margin: 2rem 0; }
+
+/* ===== Index page ===== */
+.page-header { margin-bottom: 2rem; }
+.page-header h1 { font-size: 1.8rem; margin-bottom: 0.4rem; }
+.page-header .subtitle { color: var(--text-muted); margin-bottom: 1rem; }
+
+.playlist-list { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }
+
+.playlist-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1rem 1.25rem;
+  transition: border-color 0.15s;
+}
+.playlist-card:hover { border-color: var(--text-muted); }
+.playlist-card__title { font-size: 1.05rem; font-weight: 600; display: block; margin-bottom: 0.2rem; }
+.playlist-card__desc { font-size: 0.875rem; color: var(--text-muted); margin: 0.2rem 0; }
+.playlist-card__meta { font-size: 0.78rem; color: var(--text-muted); }
+
+.empty-state { color: var(--text-muted); text-align: center; padding: 3rem 0; }
+
+/* ===== Playlist page ===== */
+.playlist-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 2rem;
+}
+.playlist-header h1 { font-size: 1.8rem; }
+.playlist-desc { color: var(--text-muted); margin-top: 0.3rem; }
+.playlist-meta { font-size: 0.8rem; color: var(--text-muted); display: block; margin-top: 0.3rem; }
+
+/* ===== Add track section ===== */
+.add-track-section {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1.25rem;
+  margin-bottom: 2rem;
+}
+.add-track-section h2 { font-size: 1rem; margin-bottom: 0.85rem; }
+
+.add-track-row {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+.add-track-row input {
+  flex: 1;
+  background: var(--surface2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--text);
+  padding: 0.6rem 0.85rem;
+  font-size: 0.95rem;
+  font-family: var(--font);
+  transition: border-color 0.15s;
+}
+.add-track-row input:focus { outline: none; border-color: var(--accent); }
+
+/* ===== Track preview ===== */
+.track-preview {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  background: var(--surface2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 0.75rem;
+  margin-top: 0.75rem;
+}
+.track-preview.hidden { display: none; }
+.preview-art {
+  width: 56px;
+  height: 56px;
+  border-radius: 4px;
+  object-fit: cover;
+}
+.preview-info { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.875rem; }
+.preview-info strong { font-size: 0.95rem; }
+.preview-album { color: var(--text-muted); font-size: 0.8rem; }
+
+/* ===== Track list ===== */
+.track-list { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
+
+.track-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.85rem;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 0.85rem 1rem;
+  transition: border-color 0.15s;
+}
+.track-item:hover { border-color: var(--border); }
+
+.track-item__left {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  flex-shrink: 0;
+}
+
+.track-num { font-size: 0.78rem; color: var(--text-muted); width: 18px; text-align: right; }
+
+.track-artwork {
+  width: 52px;
+  height: 52px;
+  border-radius: 4px;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+.track-artwork--placeholder {
+  width: 52px;
+  height: 52px;
+  border-radius: 4px;
+  background: var(--surface2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.4rem;
+}
+
+.track-item__info { flex: 1; min-width: 0; }
+
+.track-item__title-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+.track-title {
+  font-weight: 600;
+  font-size: 0.95rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.track-title:hover { color: var(--accent); }
+
+.track-artist { font-size: 0.82rem; color: var(--text-muted); margin-top: 0.1rem; }
+.track-note {
+  font-size: 0.82rem;
+  color: var(--text-muted);
+  font-style: italic;
+  margin-top: 0.3rem;
+}
+
+.track-item__actions { flex-shrink: 0; margin-left: auto; }
+
+/* ===== Source badges ===== */
+.source-badge {
+  font-size: 0.68rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: 0.15rem 0.45rem;
+  border-radius: 3px;
+  white-space: nowrap;
+}
+.source-badge--apple    { background: rgba(252,60,68,0.15); color: var(--apple); }
+.source-badge--bandcamp { background: rgba(29,160,195,0.15); color: var(--bandcamp); }
+
+/* ===== Embeds ===== */
+.embed-toggle { margin-top: 0.5rem; }
+.embed-toggle summary {
+  font-size: 0.8rem;
+  color: var(--text-muted);
+  cursor: pointer;
+  user-select: none;
+  list-style: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+.embed-toggle summary::-webkit-details-marker { display: none; }
+.embed-toggle summary::before { content: '▶ '; font-size: 0.6rem; }
+details[open] .embed-toggle summary::before,
+.embed-toggle[open] summary::before { content: '▼ '; }
+.embed-container { margin-top: 0.75rem; }
+
+/* ===== Track duration ===== */
+.track-duration {
+  margin-left: 0.5rem;
+  color: var(--text-muted);
+  font-size: 0.78rem;
+  font-variant-numeric: tabular-nums;
+}
+
+/* ===== Runtime bar ===== */
+.runtime-bar {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  flex-wrap: wrap;
+  margin-top: 1.25rem;
+  padding: 0.75rem 1rem;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  font-size: 0.85rem;
+  color: var(--text-muted);
+}
+.runtime-bar__count { font-weight: 500; color: var(--text); }
+.runtime-bar__total strong { color: var(--text); }
+.runtime-bar__note { font-size: 0.78rem; opacity: 0.7; }
+
+/* ===== Responsive ===== */
+@media (max-width: 520px) {
+  .site-header { padding: 0.75rem 1rem; }
+  main { padding: 1.25rem 1rem; }
+  .track-artwork, .track-artwork--placeholder { width: 40px; height: 40px; }
+}
diff --git a/music_playlist/templates/base.html b/music_playlist/templates/base.html
new file mode 100644
index 000000000..bed063240
--- /dev/null
+++ b/music_playlist/templates/base.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>{% block title %}Mixtape{% endblock %}</title>
+  <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
+</head>
+<body>
+  <header class="site-header">
+    <a class="site-logo" href="{{ url_for('index') }}">&#9835; mixtape</a>
+    <nav>
+      <a href="{{ url_for('new_playlist') }}">+ new playlist</a>
+    </nav>
+  </header>
+
+  <main>
+    {% with messages = get_flashed_messages(with_categories=true) %}
+      {% for category, message in messages %}
+        <div class="flash flash--{{ category }}">{{ message }}</div>
+      {% endfor %}
+    {% endwith %}
+
+    {% block content %}{% endblock %}
+  </main>
+
+  <footer class="site-footer">
+    <p>mixtape &mdash; Apple Music + Bandcamp playlists</p>
+  </footer>
+
+  {% block scripts %}{% endblock %}
+</body>
+</html>
diff --git a/music_playlist/templates/edit_playlist.html b/music_playlist/templates/edit_playlist.html
new file mode 100644
index 000000000..055852919
--- /dev/null
+++ b/music_playlist/templates/edit_playlist.html
@@ -0,0 +1,27 @@
+{% extends "base.html" %}
+{% block title %}Edit {{ playlist.name }} — mixtape{% endblock %}
+
+{% block content %}
+<section class="form-page">
+  <h1>edit playlist</h1>
+  <form method="POST" action="{{ url_for('edit_playlist', slug=playlist.slug) }}">
+    <div class="field">
+      <label for="name">Name</label>
+      <input id="name" name="name" type="text" value="{{ playlist.name }}" required autofocus />
+    </div>
+    <div class="field">
+      <label for="description">Description <span class="optional">(optional)</span></label>
+      <textarea id="description" name="description" rows="3">{{ playlist.description }}</textarea>
+    </div>
+    <button class="btn btn--primary" type="submit">Save changes</button>
+    <a class="btn btn--ghost" href="{{ url_for('view_playlist', slug=playlist.slug) }}">Cancel</a>
+  </form>
+
+  <hr class="divider" />
+
+  <form method="POST" action="{{ url_for('delete_playlist', slug=playlist.slug) }}"
+        onsubmit="return confirm('Delete this playlist? This cannot be undone.')">
+    <button class="btn btn--danger" type="submit">Delete playlist</button>
+  </form>
+</section>
+{% endblock %}
diff --git a/music_playlist/templates/index.html b/music_playlist/templates/index.html
new file mode 100644
index 000000000..21d92c049
--- /dev/null
+++ b/music_playlist/templates/index.html
@@ -0,0 +1,26 @@
+{% extends "base.html" %}
+{% block title %}mixtape — your playlists{% endblock %}
+
+{% block content %}
+<section class="page-header">
+  <h1>your playlists</h1>
+  <p class="subtitle">Share songs from Apple Music and Bandcamp in one place.</p>
+  <a class="btn btn--primary" href="{{ url_for('new_playlist') }}">+ create playlist</a>
+</section>
+
+{% if playlists %}
+<ul class="playlist-list">
+  {% for pl in playlists %}
+  <li class="playlist-card">
+    <a class="playlist-card__title" href="{{ url_for('view_playlist', slug=pl.slug) }}">{{ pl.name }}</a>
+    {% if pl.description %}
+    <p class="playlist-card__desc">{{ pl.description }}</p>
+    {% endif %}
+    <span class="playlist-card__meta">{{ pl.tracks | length }} track{% if pl.tracks | length != 1 %}s{% endif %}</span>
+  </li>
+  {% endfor %}
+</ul>
+{% else %}
+<p class="empty-state">No playlists yet. <a href="{{ url_for('new_playlist') }}">Create your first one!</a></p>
+{% endif %}
+{% endblock %}
diff --git a/music_playlist/templates/new_playlist.html b/music_playlist/templates/new_playlist.html
new file mode 100644
index 000000000..7aafd52f0
--- /dev/null
+++ b/music_playlist/templates/new_playlist.html
@@ -0,0 +1,20 @@
+{% extends "base.html" %}
+{% block title %}New Playlist — mixtape{% endblock %}
+
+{% block content %}
+<section class="form-page">
+  <h1>create a playlist</h1>
+  <form method="POST" action="{{ url_for('new_playlist') }}">
+    <div class="field">
+      <label for="name">Name</label>
+      <input id="name" name="name" type="text" placeholder="Summer 2025" required autofocus />
+    </div>
+    <div class="field">
+      <label for="description">Description <span class="optional">(optional)</span></label>
+      <textarea id="description" name="description" rows="3" placeholder="What's this playlist about?"></textarea>
+    </div>
+    <button class="btn btn--primary" type="submit">Create playlist</button>
+    <a class="btn btn--ghost" href="{{ url_for('index') }}">Cancel</a>
+  </form>
+</section>
+{% endblock %}
diff --git a/music_playlist/templates/playlist.html b/music_playlist/templates/playlist.html
new file mode 100644
index 000000000..21f4fbac4
--- /dev/null
+++ b/music_playlist/templates/playlist.html
@@ -0,0 +1,170 @@
+{% extends "base.html" %}
+{% block title %}{{ playlist.name }} — mixtape{% endblock %}
+
+{% block content %}
+<section class="playlist-header">
+  <div class="playlist-header__text">
+    <h1>{{ playlist.name }}</h1>
+    {% if playlist.description %}
+    <p class="playlist-desc">{{ playlist.description }}</p>
+    {% endif %}
+    <span class="playlist-meta">{{ playlist.tracks | length }} track{% if playlist.tracks | length != 1 %}s{% endif %}</span>
+  </div>
+  <div class="playlist-header__actions">
+    <a class="btn btn--ghost btn--sm" href="{{ url_for('edit_playlist', slug=playlist.slug) }}">edit</a>
+  </div>
+</section>
+
+<!-- Add track form -->
+<section class="add-track-section">
+  <h2>add a track</h2>
+  <form id="add-track-form" method="POST" action="{{ url_for('add_track', slug=playlist.slug) }}">
+    <div class="add-track-row">
+      <input
+        id="track-url"
+        name="url"
+        type="url"
+        placeholder="Paste an Apple Music or Bandcamp link…"
+        required
+        autocomplete="off"
+      />
+      <button class="btn btn--primary" type="submit" id="add-btn">Add</button>
+    </div>
+    <div class="field field--inline">
+      <label for="track-note">Note <span class="optional">(optional)</span></label>
+      <input id="track-note" name="note" type="text" placeholder="Why you love this track…" />
+    </div>
+
+    <!-- Live preview -->
+    <div id="track-preview" class="track-preview hidden"></div>
+  </form>
+</section>
+
+<!-- Track list -->
+{% if playlist.tracks %}
+<ol class="track-list">
+  {% for track in playlist.tracks %}
+  <li class="track-item" id="track-{{ track.id }}">
+    <div class="track-item__left">
+      <span class="track-num">{{ loop.index }}</span>
+      {% if track.artwork_url %}
+      <img class="track-artwork" src="{{ track.artwork_url }}" alt="{{ track.title }} artwork" loading="lazy" />
+      {% else %}
+      <div class="track-artwork track-artwork--placeholder">
+        {% if track.source == 'apple' %}🎵{% else %}🎸{% endif %}
+      </div>
+      {% endif %}
+    </div>
+
+    <div class="track-item__info">
+      <div class="track-item__title-row">
+        <a class="track-title" href="{{ track.url }}" target="_blank" rel="noopener">
+          {{ track.title }}
+        </a>
+        <span class="source-badge source-badge--{{ track.source }}">
+          {% if track.source == 'apple' %}Apple Music{% else %}Bandcamp{% endif %}
+        </span>
+      </div>
+      {% if track.artist %}<p class="track-artist">{{ track.artist }}{% if track.album %} &mdash; {{ track.album }}{% endif %}{% if track.duration_seconds %}<span class="track-duration">{{ track.duration_seconds | duration }}</span>{% endif %}</p>{% endif %}
+      {% if track.note %}<p class="track-note">"{{ track.note }}"</p>{% endif %}
+
+      {% if track.embed_url %}
+      <details class="embed-toggle">
+        <summary>play</summary>
+        <div class="embed-container">
+          {% if track.source == 'apple' %}
+          <iframe
+            src="{{ track.embed_url }}"
+            allow="autoplay *; encrypted-media *; fullscreen *; clipboard-write"
+            frameborder="0"
+            height="175"
+            style="width:100%;max-width:660px;border-radius:10px;"
+            sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-storage-access-by-user-activation allow-top-navigation-by-user-activation"
+          ></iframe>
+          {% else %}
+          <iframe
+            src="{{ track.embed_url }}"
+            seamless
+            frameborder="0"
+            height="120"
+            style="width:100%;max-width:660px;"
+          ></iframe>
+          {% endif %}
+        </div>
+      </details>
+      {% endif %}
+    </div>
+
+    <div class="track-item__actions">
+      <form method="POST" action="{{ url_for('delete_track', slug=playlist.slug, track_id=track.id) }}"
+            onsubmit="return confirm('Remove this track?')">
+        <button class="btn-icon btn-icon--danger" type="submit" title="Remove track">&times;</button>
+      </form>
+    </div>
+  </li>
+  {% endfor %}
+</ol>
+{% set timed_tracks = playlist.tracks | selectattr("duration_seconds") | list %}
+{% if timed_tracks | length > 0 %}
+{% set total_seconds = timed_tracks | sum(attribute="duration_seconds") %}
+<div class="runtime-bar">
+  <span class="runtime-bar__count">{{ playlist.tracks | length }} track{% if playlist.tracks | length != 1 %}s{% endif %}</span>
+  <span class="runtime-bar__total">total runtime: <strong>{{ total_seconds | duration }}</strong></span>
+  {% if timed_tracks | length < playlist.tracks | length %}
+  <span class="runtime-bar__note">({{ playlist.tracks | length - timed_tracks | length }} track{% if playlist.tracks | length - timed_tracks | length != 1 %}s{% endif %} without duration data)</span>
+  {% endif %}
+</div>
+{% endif %}
+{% else %}
+<p class="empty-state">No tracks yet. Add your first one above!</p>
+{% endif %}
+{% endblock %}
+
+{% block scripts %}
+<script>
+(function () {
+  const urlInput = document.getElementById('track-url');
+  const preview  = document.getElementById('track-preview');
+  const addBtn   = document.getElementById('add-btn');
+  let debounce;
+
+  function showPreview(data) {
+    preview.classList.remove('hidden');
+    preview.innerHTML = `
+      ${data.artwork_url ? `<img class="preview-art" src="${data.artwork_url}" alt="artwork" />` : ''}
+      <div class="preview-info">
+        <strong>${escHtml(data.title)}</strong>
+        ${data.artist ? `<span>${escHtml(data.artist)}</span>` : ''}
+        ${data.album  ? `<span class="preview-album">${escHtml(data.album)}</span>` : ''}
+        <span class="source-badge source-badge--${data.source}">${data.source === 'apple' ? 'Apple Music' : 'Bandcamp'}</span>
+      </div>`;
+  }
+
+  function clearPreview() {
+    preview.classList.add('hidden');
+    preview.innerHTML = '';
+  }
+
+  function escHtml(s) {
+    return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+  }
+
+  urlInput.addEventListener('input', function () {
+    clearTimeout(debounce);
+    const val = this.value.trim();
+    if (!val) { clearPreview(); return; }
+    debounce = setTimeout(async () => {
+      try {
+        addBtn.disabled = true;
+        addBtn.textContent = '…';
+        const res  = await fetch('/api/preview?url=' + encodeURIComponent(val));
+        const data = await res.json();
+        if (data.error) { clearPreview(); }
+        else { showPreview(data); }
+      } catch (_) { clearPreview(); }
+      finally { addBtn.disabled = false; addBtn.textContent = 'Add'; }
+    }, 600);
+  });
+})();
+</script>
+{% endblock %}