diff --git a/frontend/app.js b/frontend/app.js
index 1c9e87a..debd411 100755
--- a/frontend/app.js
+++ b/frontend/app.js
@@ -2209,8 +2209,12 @@ function updateServiceMode() {
   if (chanEl) chanEl.textContent = meta ? (meta.channel || '') : '';
 
   // Current track note (Section 5): read entry.notes, degrade gracefully if absent
-  const currentEntry = (queue && queueIndex >= 0 && queueIndex < queue.length) ? queue[queueIndex] : meta;
-  const note = (currentEntry && currentEntry.notes) ? String(currentEntry.notes).trim() : '';
+  const currentEntry = (queue && queueIndex >= 0 && queueIndex < queue.length)
+    ? queue[queueIndex]
+    : (currentPlaylistEntry() || meta);
+  const note = (currentEntry && currentEntry.notes)
+    ? String(currentEntry.notes).trim()
+    : ((meta && meta.notes) ? String(meta.notes).trim() : '');
   const noteEl = $('serviceNote');
   if (noteEl) {
     if (note) {
@@ -3251,8 +3255,34 @@ function renderCard(v, index, list) {
       openChannel(channelKeyOf(v), v.channel);
     });
   }
+
+  // Playlist view: note under title (if present) and note edit button (Section 5)
+  if (view.type === 'playlist') {
+    const hasNote = !!(v.notes && v.notes.trim());
+    if (hasNote) {
+      const noteEl = document.createElement('div');
+      noteEl.className = 'card-note';
+      noteEl.textContent = v.notes.trim();
+      noteEl.title = v.notes.trim();
+      const titleEl = card.querySelector('.card-title');
+      if (titleEl) titleEl.after(noteEl);
+    }
+
+    const noteBtn = document.createElement('button');
+    noteBtn.type = 'button';
+    noteBtn.className = 'card-note-btn' + (hasNote ? ' has-note' : '');
+    noteBtn.title = hasNote ? 'Edit note' : 'Add note';
+    noteBtn.textContent = '✎';
+    noteBtn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      openSongNoteModal(v);
+    });
+    const menuBtn = card.querySelector('.card-menu');
+    card.insertBefore(noteBtn, menuBtn);
+  }
+
   card.addEventListener('click', (e) => {
-    if (e.target.closest('.card-menu') || e.target.closest('.card-del') || e.target.closest('.card-channel.link')) return;
+    if (e.target.closest('.card-menu') || e.target.closest('.card-del') || e.target.closest('.card-note-btn') || e.target.closest('.card-channel.link')) return;
     if (selectMode) { toggleSelectCard(v.id); return; }
     playFromList(list, index, view.type === 'playlist' ? 'playlist:' + view.id : view.type);
   });
@@ -3680,6 +3710,74 @@ function renamePlaylist(pl) {
   setTimeout(() => { input.focus(); input.select(); }, 50);
 }
 
+function openSongNoteModal(entry) {
+  const body = document.createElement('div');
+  body.className = 'song-note-modal';
+
+  if (entry.title) {
+    const sub = document.createElement('div');
+    sub.className = 'modal-subhead';
+    sub.textContent = entry.title;
+    body.appendChild(sub);
+  }
+
+  const ta = document.createElement('textarea');
+  ta.placeholder = 'Key, capo, arrangement cues…';
+  ta.value = entry.notes || '';
+  ta.maxLength = 500;
+  ta.rows = 4;
+
+  const count = document.createElement('div');
+  count.className = 'modal-char-count';
+  const updateCount = () => {
+    count.textContent = `${ta.value.length} / 500`;
+  };
+  ta.addEventListener('input', updateCount);
+  updateCount();
+
+  body.append(ta, count);
+
+  const save = () => {
+    const text = (ta.value || '').trim().slice(0, 500);
+    if (text) {
+      entry.notes = text;
+    } else {
+      delete entry.notes;
+    }
+
+    // Keep live playing metadata in sync if this song is playing from this playlist
+    if (current && current.meta && current.meta.id === entry.id) {
+      if (queueSource && queueSource.startsWith('playlist:')) {
+        if (text) current.meta.notes = text;
+        else delete current.meta.notes;
+        updateServiceMode();
+      }
+    }
+
+    persist();
+    closeModal();
+    renderList();
+    toast(text ? 'Note saved' : 'Note cleared');
+  };
+
+  ta.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+      e.preventDefault();
+      save();
+    }
+  });
+
+  showModal('Song note', body, [
+    { label: 'Cancel', onClick: closeModal },
+    { label: 'Save', primary: true, onClick: save },
+  ]);
+
+  setTimeout(() => {
+    ta.focus();
+    ta.select();
+  }, 50);
+}
+
 function updatePlaylistOfflineButton(btn, pl) {
   if (!btn || !pl) return;
   const stats = playlistOfflineStats(pl);
diff --git a/frontend/styles.css b/frontend/styles.css
index cffded5..0e8912c 100755
--- a/frontend/styles.css
+++ b/frontend/styles.css
@@ -983,6 +983,15 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
   overflow: hidden;
 }
 .card-channel { font-size: 12px; color: var(--text-dim); margin-top: 5px; }
+.card-note {
+  font-size: 12px;
+  color: var(--text-dim);
+  margin-top: 3px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
 .card-menu {
   background: var(--bg-3);
   border: 1px solid var(--line);
@@ -1138,6 +1147,38 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
   transition: border-color 0.16s, box-shadow 0.16s;
 }
 .modal input[type="text"]:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(255,75,50,0.12); }
+.modal textarea {
+  width: 100%;
+  background: var(--bg-3);
+  border: 1px solid var(--line);
+  border-radius: 9px;
+  padding: 11px 13px;
+  color: var(--text);
+  font-family: var(--ui);
+  font-size: 14px;
+  line-height: 1.45;
+  outline: none;
+  resize: vertical;
+  min-height: 90px;
+  box-sizing: border-box;
+  transition: border-color 0.16s, box-shadow 0.16s;
+}
+.modal textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(255,75,50,0.12); }
+.modal-subhead {
+  font-size: 13px;
+  color: var(--text-2);
+  margin: -10px 0 14px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.modal-char-count {
+  font-size: 11px;
+  color: var(--text-dim);
+  text-align: right;
+  margin-top: 5px;
+  font-family: var(--mono);
+}
 .modal-list { display: flex; flex-direction: column; gap: 5px; max-height: 280px; overflow-y: auto; margin-top: 2px; }
 .modal-list button {
   text-align: left;
@@ -1581,6 +1622,40 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
 .card-del:hover { color: #fff; background: var(--accent); border-color: var(--accent); }
 .saved-card .card-del { opacity: 0.85; }
 
+/* ============================================================================
+ * Per-card note button (playlist view)
+ * ========================================================================== */
+.card-note-btn {
+  background: var(--bg-3);
+  border: 1px solid var(--line);
+  color: var(--text-dim);
+  width: 30px; height: 30px;
+  border-radius: 8px;
+  cursor: pointer;
+  align-self: center;
+  flex-shrink: 0;
+  font-size: 14px;
+  line-height: 1;
+  opacity: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.16s var(--ease);
+}
+.card:hover .card-note-btn { opacity: 1; }
+.card-note-btn:hover { color: #fff; background: var(--accent); border-color: var(--accent); }
+.card-note-btn.has-note {
+  opacity: 1;
+  color: var(--accent);
+  border-color: rgba(255, 75, 50, 0.35);
+  background: rgba(255, 75, 50, 0.1);
+}
+.card-note-btn.has-note:hover {
+  color: #fff;
+  background: var(--accent);
+  border-color: var(--accent);
+}
+
 /* ============================================================================
  * Modal divider label
  * ========================================================================== */
@@ -1657,6 +1732,7 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
 }
 :root[data-theme="contrast"] .card { border-color: var(--line-soft); }
 :root[data-theme="contrast"] .card-channel,
+:root[data-theme="contrast"] .card-note,
 :root[data-theme="contrast"] .card-title { color: var(--text); }
 
 /* ============================================================================
@@ -1676,6 +1752,7 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
 :root[data-density="compact"] .thumb { width: 104px; }
 :root[data-density="compact"] .card-title { font-size: 12.5px; -webkit-line-clamp: 1; }
 :root[data-density="compact"] .card-channel { margin-top: 2px; }
+:root[data-density="compact"] .card-note { font-size: 11px; margin-top: 1px; }
 :root[data-density="compact"] .nav-item { padding: 8px 12px; }
 :root[data-density="compact"] .playlist-item { padding: 7px 12px; }
 :root[data-density="compact"] .controls { padding: 12px 14px; margin-top: 12px; }
@@ -2235,6 +2312,7 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
   .card-channel { margin-top: 6px; }
   /* No hover on touch — keep row actions always visible and finger-sized */
   .card-menu { width: 38px; height: 38px; border-radius: 12px; opacity: 1; }
+  .card-note-btn { opacity: 1; width: 36px; height: 36px; border-radius: 11px; font-size: 15px; }
   .card-del { opacity: 1; width: 36px; height: 36px; border-radius: 11px; }
 
   /* --- Settings: roomier rows --------------------------------------------- */
@@ -2316,6 +2394,7 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
     margin: 0 auto 16px;
   }
   .modal input[type="text"] { font-size: 16px; padding: 13px 15px; border-radius: 13px; }
+  .modal textarea { font-size: 16px; padding: 13px 15px; border-radius: 13px; }
   .modal-list button { padding: 14px 15px; border-radius: 13px; }
   .modal-actions { margin-top: 22px; }
   .modal-actions .btn { padding: 13px 20px; border-radius: 13px; }