diff --git a/README.md b/README.md
index a99ebc3..b6d3b00 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,7 @@
 # ILT Membuat Websitemu Lebih Interaktif
 
+Live demo: [Calm Playlist](https://calm-playlist.netlify.app/)
+
 ## Pengantar
 
 Studi kasus ini ditujukan untuk ILT dengan materi DOM Manipulation dan Event. Ini adalah studi kasus lanjutan dari ILT belajar membangun kerangka halaman web dengan HTML dan CSS.
@@ -14,34 +16,26 @@ Branch repository ini mengandung dua direktori yang bersifat starter dan solutio
 
 Hasil akhir dari kegiatan hands-on demo akan terlihat seperti berikut.
 
-![Calm Headphone](calm-headphones-final.png?raw=true)
+![Calm Playlist](calm-playlist-final.png?raw=true)
 
 ## Konten Calm Music
 
 Karena akan menampilkan calm playlist, kita perlu menentukan struktur konten HTML. Berikut adalah contoh HTML yang bisa instruktur jadikan acuan.
 
 ```html
-<article class="music-list__item" data-musicid="{{AUDIO ID}}">
-  <div class="card">
-    <div class="card-image">
-      <img id="musicImage" src="{{ART AUDIO IMAGE LINK}}" alt="{{AUDIO TITLE}}" />
-    </div>
-    <div class="card-body">
-      <h3 id="musicTitle" class="card-body__title">{{AUDIO TITLE}}</h3>
-      <div id="musicSignature" class="card-body__copyright">{{AUDIO SIGNATURE}}</div>
-      <audio
-        id="musicAudio"
-        class="music-list__item__audio"
-        controls
-        src="{{AUDIO LINK}}"
-        type="audio/mp3"
-        preload="none"
-      ></audio>
-    </div>
+<article class="music-item" data-musicid="{{AUDIO ID}}">
+  <img class="music-item__art" src="{{ART AUDIO IMAGE LINK}}" alt="" />
+  <div class="music-item__body">
+    <h3 class="music-item__title">{{AUDIO TITLE}}</h3>
+    <p class="music-item__author">{{AUDIO AUTHOR}}</p>
+    <audio class="music-item__audio" controls src="{{AUDIO LINK}}" preload="none"></audio>
+    <p class="music-item__signature">{{AUDIO SIGNATURE}}</p>
   </div>
 </article>
 ```
 
+Karena konten di atas disalin berulang untuk setiap lagu, penandanya memakai `class`, bukan `id`.
+
 Kode styling telah kami sediakan untuk memudahkan instruktur melakukan hands-on demo. Ini dengan catatan bahwa instruktur mengikuti struktur konten di atas.
 
 ## Checklist Live Demo
@@ -49,9 +43,8 @@ Kode styling telah kami sediakan untuk memudahkan instruktur melakukan hands-on
 Instruktur dapat memanfaatkan checklist live demo berikut agar sesi hands-on lebih terstruktur.
 
 - [ ] Menyiapkan starter project yang telah disediakan.
-- [ ] Menjalankan proyek dengan calm playlist temporary (tersedia langsung di HTML).
-- [ ] Merapikan dan mempercantik tampilan dengan CSS (jika dibutuhkan)
-- [ ] Menampilkan calm playlist yang telah disediakan pada `scripts/utils.js`.
-  - [ ] Tampilkan menggunakan `<template>`
-  - [ ] Tampilkan menggunakan string (`innerHTML`).
+- [ ] Menampilkan calm playlist yang telah disediakan pada `scripts/utils.js` menggunakan `<template>`.
+- [ ] Membuat tombol filter berdasarkan author lagu.
+- [ ] Menyaring calm playlist saat tombol filter diklik (memanfaatkan event delegation).
 - [ ] Mengatur agar dua atau lebih audio tidak dimainkan secara serentak (memanfaatkan event `play`).
+- [ ] Menampilkan Now Playing bar mengikuti keadaan audio (event `play`, `pause`, dan `ended`).
diff --git a/calm-headphones-final.png b/calm-headphones-final.png
deleted file mode 100644
index f292b0c..0000000
Binary files a/calm-headphones-final.png and /dev/null differ
diff --git a/calm-playlist-final.png b/calm-playlist-final.png
new file mode 100644
index 0000000..a2139f8
Binary files /dev/null and b/calm-playlist-final.png differ
diff --git a/solution/assets/images/favicon/android-chrome-192x192.png b/solution/assets/images/favicon/android-chrome-192x192.png
new file mode 100644
index 0000000..04d8363
Binary files /dev/null and b/solution/assets/images/favicon/android-chrome-192x192.png differ
diff --git a/solution/assets/images/favicon/android-chrome-512x512.png b/solution/assets/images/favicon/android-chrome-512x512.png
new file mode 100644
index 0000000..ed0a4bc
Binary files /dev/null and b/solution/assets/images/favicon/android-chrome-512x512.png differ
diff --git a/solution/assets/images/favicon/apple-touch-icon.png b/solution/assets/images/favicon/apple-touch-icon.png
new file mode 100644
index 0000000..e4c5f0a
Binary files /dev/null and b/solution/assets/images/favicon/apple-touch-icon.png differ
diff --git a/solution/assets/images/favicon/favicon-16x16.png b/solution/assets/images/favicon/favicon-16x16.png
new file mode 100644
index 0000000..5b8670c
Binary files /dev/null and b/solution/assets/images/favicon/favicon-16x16.png differ
diff --git a/solution/assets/images/favicon/favicon-32x32.png b/solution/assets/images/favicon/favicon-32x32.png
new file mode 100644
index 0000000..864a0f9
Binary files /dev/null and b/solution/assets/images/favicon/favicon-32x32.png differ
diff --git a/solution/assets/images/favicon/favicon.ico b/solution/assets/images/favicon/favicon.ico
new file mode 100644
index 0000000..85e30b6
Binary files /dev/null and b/solution/assets/images/favicon/favicon.ico differ
diff --git a/solution/assets/images/favicon/site.webmanifest b/solution/assets/images/favicon/site.webmanifest
new file mode 100644
index 0000000..84d7703
--- /dev/null
+++ b/solution/assets/images/favicon/site.webmanifest
@@ -0,0 +1,19 @@
+{
+  "name": "Calm Playlist",
+  "short_name": "Calm",
+  "icons": [
+    {
+      "src": "android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}
diff --git a/solution/assets/images/headphone.png b/solution/assets/images/headphone.png
new file mode 100644
index 0000000..ee71b4f
Binary files /dev/null and b/solution/assets/images/headphone.png differ
diff --git a/solution/assets/scripts/script.js b/solution/assets/scripts/script.js
index bd67ca3..d7629da 100644
--- a/solution/assets/scripts/script.js
+++ b/solution/assets/scripts/script.js
@@ -1,73 +1,140 @@
 import {
+  ALL_AUTHORS,
   getAllMusics,
-  generateMusicItemUsingTemplate,
-  generateMusicItemUsingInnerHTML,
+  getAllAuthors,
+  getMusicById,
+  filterMusicsByAuthor,
+  createMusicItemElement,
+  createFilterButtonElement,
+  setupDrawer,
+  renderFilterState,
+  showNowPlaying,
+  hideNowPlaying,
+  renderNowPlayingState,
 } from './utils.js';
 
-const drawerButton = document.querySelector('#drawer-button');
-const drawerNavigation = document.querySelector('#navList');
-const musicListContainer = document.getElementById('musicList');
+const musicList = document.getElementById('musicList');
+const filterBar = document.getElementById('filterBar');
+const nowPlayingToggle = document.getElementById('nowPlayingToggle');
 
-function setupDrawer() {
-  drawerButton.addEventListener('click', () => {
-    drawerNavigation.classList.toggle('open');
-  });
+const musics = getAllMusics();
+let activeAuthor = ALL_AUTHORS;
+let currentAudio = null;
+let currentMusic = null;
 
-  document.body.addEventListener('click', (event) => {
-    if (!drawerNavigation.contains(event.target) && !drawerButton.contains(event.target)) {
-      drawerNavigation.classList.remove('open');
-    }
+/**
+ * Satu-satunya fungsi yang menggambar ulang daftar lagu.
+ * Setiap kali state berubah, panggil fungsi ini.
+ */
+function render() {
+  const filteredMusics = filterMusicsByAuthor(musics, activeAuthor);
+
+  // Kosongkan isi lama, lalu masukkan kartunya satu per satu.
+  musicList.textContent = '';
+
+  filteredMusics.forEach((music) => {
+    musicList.append(createMusicItemElement(music));
   });
+
+  renderFilterState(activeAuthor, filteredMusics.length, musics.length);
 }
 
-function stopOtherAudio(currentAudio) {
-  const listOfAudioElement = document.querySelectorAll('audio');
+function renderFilterButtons() {
+  filterBar.append(createFilterButtonElement(ALL_AUTHORS, 'Semua'));
 
-  listOfAudioElement.forEach((audioElement) => {
-    // Others audio will be paused
-    if (currentAudio !== audioElement) {
-      audioElement.pause();
-    }
+  getAllAuthors().forEach((author) => {
+    filterBar.append(createFilterButtonElement(author, author));
   });
 }
 
-function setupOnlyOneAudioIsPlaying() {
-  const listOfAudioElement = document.querySelectorAll('audio');
-
-  listOfAudioElement.forEach((audioElement) => {
-    /**
-     * See: HTMLMediaElement: play event
-     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play_event
-     */
-    audioElement.addEventListener('play', (event) => {
-      const currentAudio = event.currentTarget;
-      stopOtherAudio(currentAudio);
-    });
+// Event delegation: satu listener di container, bukan di setiap tombol.
+function setupFilter() {
+  filterBar.addEventListener('click', (event) => {
+    const button = event.target.closest('.filter-button');
+    if (!button) return;
+
+    activeAuthor = button.dataset.author;
+
+    stopCurrentAudio();
+    render();
   });
 }
 
-function populateWithTemplate(musics) {
-  const elements = musics.map(generateMusicItemUsingTemplate);
-  musicListContainer.append(...elements);
+function stopCurrentAudio() {
+  if (!currentAudio) return;
+
+  // Elemen yang dihapus dari DOM tidak otomatis berhenti berbunyi.
+  currentAudio.pause();
+  currentAudio = null;
+  currentMusic = null;
+  hideNowPlaying();
 }
 
-function populateWithInnerHTML(musics) {
-  const elements = musics.map(generateMusicItemUsingInnerHTML);
-  musicListContainer.innerHTML = elements.join('');
+/**
+ * Event `play` dan `pause` tidak melakukan bubbling, jadi listener di
+ * container hanya bisa menangkapnya pada capture phase — itulah arti
+ * argumen `true` di bawah.
+ *
+ * See: HTMLMediaElement: play event
+ * https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play_event
+ */
+function setupAudioPlayer() {
+  musicList.addEventListener(
+    'play',
+    (event) => {
+      currentAudio = event.target;
+
+      musicList.querySelectorAll('audio').forEach((audio) => {
+        if (audio !== currentAudio) audio.pause();
+      });
+
+      // Arah DOM -> data: dari elemen audio, naik ke kartunya, lalu cari datanya.
+      const article = currentAudio.closest('[data-musicid]');
+      currentMusic = getMusicById(article.dataset.musicid);
+
+      showNowPlaying(currentMusic);
+      renderNowPlayingState(true, currentMusic.title);
+    },
+    true,
+  );
+
+  musicList.addEventListener(
+    'pause',
+    (event) => {
+      if (event.target === currentAudio) renderNowPlayingState(false, currentMusic.title);
+    },
+    true,
+  );
+
+  musicList.addEventListener('ended', stopCurrentAudio, true);
+
+  /**
+   * Tombol hanya memberi perintah play()/pause(). Tampilan diperbarui oleh
+   * listener di atas, sehingga tidak mungkin berbohong tentang keadaan audio.
+   */
+  nowPlayingToggle.addEventListener('click', () => {
+    if (!currentAudio) return;
+
+    if (currentAudio.paused) {
+      currentAudio.play();
+    } else {
+      currentAudio.pause();
+    }
+  });
 }
 
+/**
+ * Semua listener dipasang pada container yang sudah ada di HTML,
+ * bukan pada kartu hasil render. Karena itu urutan di bawah tidak kritis.
+ */
 function init() {
   setupDrawer();
 
-  const musicsSample = getAllMusics();
-
-  // Render using <template>
-  populateWithTemplate(musicsSample);
-
-  // Render using innerHTML. Uncomment next code if you prefer
-  // populateWithInnerHTML(musicsSample);
+  renderFilterButtons();
+  render();
 
-  setupOnlyOneAudioIsPlaying();
+  setupFilter();
+  setupAudioPlayer();
 }
 
 init();
diff --git a/solution/assets/scripts/utils.js b/solution/assets/scripts/utils.js
index 2810bcb..c0f212b 100644
--- a/solution/assets/scripts/utils.js
+++ b/solution/assets/scripts/utils.js
@@ -85,50 +85,193 @@ export function getAllMusics() {
   return [...musicsSample];
 }
 
-export function generateMusicItemUsingTemplate({ id, artLink, title, signature, audioLink }) {
-  const musicItemTemplate = document.getElementById('musicitemtemplate');
+export function getMusicById(id) {
+  return musicsSample.find((music) => music.id === id);
+}
+
+// Mengumpulkan nama author tanpa ada yang kembar.
+export function getAllAuthors() {
+  const authors = [];
+
+  musicsSample.forEach((music) => {
+    if (!authors.includes(music.author)) {
+      authors.push(music.author);
+    }
+  });
+
+  return authors;
+}
+
+/** Nilai filter untuk "tampilkan semua". Dipakai juga sebagai data-author. */
+export const ALL_AUTHORS = 'all';
+
+export function filterMusicsByAuthor(musics, author) {
+  if (author === ALL_AUTHORS) return musics;
+  return musics.filter((music) => music.author === author);
+}
+
+/**
+ * Membuat satu kartu musik dari <template>.
+ *
+ * See: <template>: The Content Template element
+ * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template
+ */
+export function createMusicItemElement(music) {
+  const template = document.getElementById('musicItemTemplate');
+
+  // cloneNode(true) = salin beserta seluruh isinya
+  const fragment = template.content.cloneNode(true);
+
+  const article = fragment.querySelector('.music-item');
+  const art = fragment.querySelector('.music-item__art');
+  const title = fragment.querySelector('.music-item__title');
+  const author = fragment.querySelector('.music-item__author');
+  const audio = fragment.querySelector('.music-item__audio');
+  const signature = fragment.querySelector('.music-item__signature');
+
+  // Disimpan di elemen supaya nanti bisa dibaca lagi lewat dataset.
+  article.dataset.musicid = music.id;
+
+  art.src = music.artLink;
+
+  // textContent: isi diperlakukan sebagai teks biasa
+  title.textContent = music.title;
+  author.textContent = music.author;
+
+  audio.src = music.audioLink;
+  audio.setAttribute('aria-label', `Putar ${music.title} oleh ${music.author}`);
+
+  // innerHTML dipakai HANYA karena `signature` memang berisi tag <a>
+  signature.innerHTML = music.signature;
+
+  return fragment;
+}
+
+/** Nilai author disimpan di data-author, bukan dibaca dari teks tombol. */
+export function createFilterButtonElement(author, label) {
+  const button = document.createElement('button');
+
+  button.type = 'button';
+  button.className = 'filter-button';
+  button.textContent = label;
+  button.dataset.author = author;
+  button.setAttribute('aria-pressed', 'false');
+
+  return button;
+}
 
-  const element = musicItemTemplate.content.cloneNode(true);
+function setDrawerOpen(isOpen) {
+  const drawerButton = document.getElementById('drawerButton');
+  const navList = document.getElementById('navList');
 
-  const article = element.querySelector('[data-musicid]');
-  article.setAttribute('data-musicid', id);
+  let label = 'Buka menu navigasi';
 
-  const musicImage = element.getElementById('musicImage');
-  musicImage.src = artLink;
-  musicImage.alt = title;
+  if (isOpen) {
+    label = 'Tutup menu navigasi';
+  }
+
+  navList.classList.toggle('open', isOpen);
+
+  // Tombol ikut memberi tahu keadaannya, bukan hanya tampilannya.
+  drawerButton.setAttribute('aria-expanded', isOpen);
+  drawerButton.setAttribute('aria-label', label);
+}
+
+export function setupDrawer() {
+  const drawerButton = document.getElementById('drawerButton');
+  const navList = document.getElementById('navList');
+
+  drawerButton.addEventListener('click', () => {
+    setDrawerOpen(!navList.classList.contains('open'));
+  });
+
+  /**
+   * Klik di mana pun untuk menutup drawer. Contoh event bubbling: klik pada
+   * elemen anak akan "naik" sampai ke body.
+   *
+   * Klik pada link di dalam drawer tidak menutupnya karena link itu bagian
+   * dari navList. Tambahkan listener terpisah pada navList bila diperlukan.
+   */
+  document.body.addEventListener('click', (event) => {
+    if (!navList.contains(event.target) && !drawerButton.contains(event.target)) {
+      setDrawerOpen(false);
+    }
+  });
+
+  // Fokus dikembalikan ke tombol pemicu supaya pengguna keyboard tidak tersesat.
+  document.addEventListener('keydown', (event) => {
+    if (event.key !== 'Escape') return;
+    if (!navList.classList.contains('open')) return;
+
+    setDrawerOpen(false);
+    drawerButton.focus();
+  });
+}
+
+export function showNowPlaying(music) {
+  const nowPlaying = document.getElementById('nowPlaying');
 
-  const musicTitle = element.getElementById('musicTitle');
-  musicTitle.textContent = title;
+  // Now Playing bar hanya ada satu di halaman, jadi id boleh dipakai.
+  const art = document.getElementById('nowPlayingArt');
+  const title = document.getElementById('nowPlayingTitle');
+  const author = document.getElementById('nowPlayingAuthor');
 
-  const musicSignature = element.getElementById('musicSignature');
-  musicSignature.innerHTML = signature;
+  art.src = music.artLink;
+  title.textContent = music.title;
+  author.textContent = music.author;
 
-  const musicAudio = element.getElementById('musicAudio');
-  musicAudio.src = audioLink;
+  /**
+   * Atribut `hidden` menyembunyikan elemen sekaligus dari pembaca layar.
+   *
+   * Isi diubah lebih dulu, baru elemennya ditampilkan. Live region yang masih
+   * hidden tidak mengumumkan perubahan, jadi pengumuman pertama bisa terlewat.
+   */
+  nowPlaying.hidden = false;
+  document.body.classList.add('has-now-playing');
+}
 
-  return element;
+export function hideNowPlaying() {
+  document.getElementById('nowPlaying').hidden = true;
+  document.body.classList.remove('has-now-playing');
 }
 
-export function generateMusicItemUsingInnerHTML({ id, artLink, title, signature, audioLink }) {
-  return `
-    <article class="music-list__item" data-musicid="${id}">
-      <div class="card">
-        <div class="card-image">
-          <img id="musicImage" src="${artLink}" alt="${title}" />
-        </div>
-        <div class="card-body">
-          <h3 id="musicTitle" class="card-body__title">${title}</h3>
-          <div id="musicSignature" class="card-body__copyright">${signature}</div>
-          <audio
-            id="musicAudio"
-            class="music-list__item__audio"
-            controls
-            src="${audioLink}"
-            type="audio/mp3"
-            preload="none"
-          ></audio>
-        </div>
-      </div>
-    </article>
-  `;
+// Dipanggil dari event `play` / `pause`, bukan dari tombolnya langsung.
+export function renderNowPlayingState(isPlaying, title) {
+  let status = 'Dijeda';
+  let icon = '▶';
+  let action = 'Putar';
+
+  if (isPlaying) {
+    status = 'Sedang diputar';
+    icon = '⏸';
+    action = 'Jeda';
+  }
+
+  document.getElementById('nowPlayingLabel').textContent = status;
+  document.getElementById('nowPlayingIcon').textContent = icon;
+  document.getElementById('nowPlayingToggleText').textContent = action;
+
+  const toggle = document.getElementById('nowPlayingToggle');
+  toggle.setAttribute('aria-label', `${action} ${title}`);
+}
+
+// Memperbarui jumlah hasil, empty state, dan penanda tombol aktif.
+export function renderFilterState(activeAuthor, shownCount, totalCount) {
+  const resultInfo = document.getElementById('resultInfo');
+  const emptyState = document.getElementById('emptyState');
+  const filterBar = document.getElementById('filterBar');
+
+  resultInfo.textContent = `Menampilkan ${shownCount} dari ${totalCount} lagu`;
+  emptyState.hidden = shownCount !== 0;
+
+  // Dicari di dalam filterBar saja, bukan di seluruh dokumen.
+  const buttons = filterBar.querySelectorAll('.filter-button');
+
+  buttons.forEach((button) => {
+    const isActive = button.dataset.author === activeAuthor;
+
+    // Ditandai dua kali: warna untuk mata, aria-pressed untuk pembaca layar.
+    button.classList.toggle('filter-button--active', isActive);
+    button.setAttribute('aria-pressed', isActive);
+  });
 }
diff --git a/solution/assets/styles/style.css b/solution/assets/styles/style.css
index cdf0f19..e9641ca 100644
--- a/solution/assets/styles/style.css
+++ b/solution/assets/styles/style.css
@@ -1,202 +1,415 @@
+:root {
+  --color-text: #1a1a1a;
+  --color-muted: #6b7280;
+  --color-line: #e5e7eb;
+  --color-surface: #ffffff;
+  --color-accent: #1a1a1a;
+
+  --radius: 8px;
+  --space: 16px;
+}
+
 * {
   margin: 0;
   padding: 0;
-
   box-sizing: border-box;
 }
 
 body {
   font-family: 'Inter', sans-serif;
+  color: var(--color-text);
+  background-color: var(--color-surface);
+  line-height: 1.5;
+}
 
-  background-color: #f9f5ed;
+img {
+  display: block;
+  max-width: 100%;
 }
 
-.container {
-  padding: 16px 32px;
-  margin-inline: auto;
-  max-width: 1200px;
+a {
+  color: inherit;
 }
 
-.card {
-  border-radius: 12px;
-  box-shadow: 0 4px 4px 0 #777;
-  overflow: hidden;
+:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+  border-radius: 4px;
 }
 
-.card .card-image img {
-  display: block;
-  width: 100%;
+.skip-link {
+  position: absolute;
+  inset-block-start: 8px;
+  inset-inline-start: 8px;
+  z-index: 100; /* lihat daftar lapisan di atas */
+
+  padding: 8px 16px;
+  border-radius: var(--radius);
+  color: var(--color-surface);
+  background-color: var(--color-accent);
+  text-decoration: none;
+
+  transform: translateY(-200%);
 }
 
-.card .card-body {
-  padding: 12px;
+.skip-link:focus-visible {
+  transform: translateY(0);
 }
 
-.card .card-body .card-body__title {
-  font-size: 1.5rem;
-  margin-block-end: 8px;
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.container {
+  max-width: 960px;
+  margin-inline: auto;
+  padding-inline: 24px;
 }
 
 /* HEADER */
+.site-header {
+  border-block-end: 1px solid var(--color-line);
+}
+
 .header-content {
   display: flex;
   align-items: center;
+  gap: 32px;
+  padding-block: 16px;
 }
 
-.header-content .brand-name img {
-  margin-right: 32px;
+.brand img {
+  height: 28px;
+  width: auto;
 }
 
-.header-content .navlist li {
-  display: inline;
+.navlist {
+  display: flex;
+  gap: 24px;
+  list-style: none;
 }
 
-.header-content .navlist li a {
-  display: inline-block;
-  padding: 16px 32px;
-
-  color: #141e16;
+.navlist a {
+  font-size: 0.9rem;
+  color: var(--color-muted);
   text-decoration: none;
 }
 
-.header-content .drawer-button {
-  display: none;
-
-  padding: 8px;
-  border: 0;
-  border-radius: 4px;
-
-  font-weight: bold;
-  font-size: 28px;
-  color: #141e16;
+.navlist a:hover {
+  color: var(--color-text);
+}
 
+.drawer-button {
+  display: none;
+  margin-inline-start: auto;
+  padding: 4px 8px;
+  border: 1px solid var(--color-line);
+  border-radius: var(--radius);
+  font-size: 1.1rem;
   background-color: transparent;
-
   cursor: pointer;
 }
 
-/* MAIN */
-main .main-content > :not([hidden]) ~ :not([hidden]) {
-  margin-block-start: 30px;
+/* INTRO */
+.intro {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+
+  padding-block: 48px 24px;
 }
 
-main section {
-  padding-block: 30px;
+.intro__image {
+  flex-shrink: 0;
+  height: clamp(72px, 14vw, 112px);
+  width: auto;
 }
 
-main section .section-title {
-  text-align: center;
-  font-size: 2.5rem;
-  padding-block: 50px 40px;
+.intro h1 {
+  font-size: 2rem;
+  font-weight: 600;
+  letter-spacing: -0.02em;
 }
 
-main .hero {
-  min-height: 90vh;
-  padding-block: 50px;
+.intro p {
+  margin-block-start: 8px;
+  color: var(--color-muted);
+}
 
+/* TOOLBAR & FILTER */
+.toolbar {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  gap: 30px;
+  justify-content: space-between;
+  gap: var(--space);
+  padding-block: 16px 32px;
+}
+
+.filter-bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
 }
 
-main .hero .hero__content {
-  flex-grow: 1;
+.filter-button {
+  min-height: 36px;
+  padding: 6px 14px;
+  border: 1px solid var(--color-line);
+  border-radius: 999px;
+  font-family: inherit;
+  font-size: 0.85rem;
+  color: var(--color-muted);
+  background-color: transparent;
+  cursor: pointer;
 }
 
-main .hero .hero__content h2 {
-  font-size: 4rem;
-  font-weight: bold;
+/* Tanpa :not(), hover menimpa aturan tombol aktif karena spesifisitasnya lebih tinggi. */
+.filter-button:not(.filter-button--active):hover {
+  color: var(--color-text);
+  border-color: var(--color-text);
+  background-color: #f3f4f6;
 }
 
-main .hero .hero__content p {
-  margin-block-start: 32px;
-  font-size: 1rem;
+.filter-button--active {
+  color: var(--color-surface);
+  background-color: var(--color-accent);
+  border-color: var(--color-accent);
 }
 
-main .hero .hero__content button {
-  margin-block-start: 64px;
-  padding: 12px 16px;
-  border: 0;
-  border-radius: 8px;
+/* Tombol aktif memberi umpan balik hover ke arah berbeda */
+.filter-button--active:hover {
+  background-color: #404040;
+  border-color: #404040;
+}
 
-  background-color: #3b855b;
+.result-info {
+  font-size: 0.85rem;
+  color: var(--color-muted);
+}
 
-  font-size: 1rem;
-  font-weight: bold;
-  color: white;
+/* MUSIC LIST */
+.music-list {
+  display: grid;
 
-  cursor: pointer;
+  /* auto-fill menjaga jumlah kolom tetap sama; auto-fit akan membuat kartu melar. */
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 32px 24px;
+
+  /* Tanpa ini, tinggi kartu ikut kartu tertinggi dan berubah tiap filter diganti. */
+  align-items: start;
 }
 
-main .hero .hero__image {
-  flex-grow: 1;
+/* Stacking context sendiri, agar kontrol <audio> tidak menimpa lapisan di atasnya. */
+.music-item {
+  position: relative;
+  z-index: 1;
+  isolation: isolate;
 }
 
-main .hero .hero__image img {
-  display: block;
+.music-item__art {
   width: 100%;
+  aspect-ratio: 1;
+  object-fit: cover;
+  border-radius: var(--radius);
+  background-color: var(--color-line);
 }
 
-main .music-list {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  gap: 24px 18px;
+.music-item__body {
+  padding-block-start: 12px;
 }
 
-main .music-list .music-list__item__audio {
-  display: block;
+/* Judul dibatasi satu baris agar tinggi kartu tidak berubah-ubah */
+.music-item__title {
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 1.4;
+  min-block-size: 1.4em;
+
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.music-item__author {
+  margin-block-start: 2px;
+  font-size: 0.85rem;
+  color: var(--color-muted);
+}
+
+.music-item__audio {
   width: 100%;
-  margin-block-start: 16px;
+  height: 36px;
+  margin-block-start: 12px;
 }
 
-/* FOOTER */
-footer {
-  padding-block: 18px;
+/* Panjang kredit berbeda tiap lagu, dibatasi dua baris agar tinggi kartu seragam. */
+.music-item__signature {
+  margin-block-start: 8px;
+  font-size: 0.7rem;
+  line-height: 1.4;
+  color: var(--color-muted);
+
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  overflow: hidden;
+  min-block-size: 2.8em; /* 2 baris x line-height 1.4 */
 }
 
-footer .copyright {
+.empty-state {
+  padding-block: 48px;
   text-align: center;
+  color: var(--color-muted);
 }
 
-@media screen and (width <= 750px) {
-  .header-content {
-    justify-content: space-between;
-  }
+/* NOW PLAYING */
+.now-playing {
+  position: fixed;
+  inset-inline: 0;
+  inset-block-end: 0;
+
+  z-index: 50; /* lihat daftar lapisan di atas */
+  isolation: isolate;
+
+  background-color: var(--color-surface);
+  border-block-start: 1px solid var(--color-line);
+  box-shadow: 0 -1px 0 var(--color-line);
+}
 
-  .header-content .drawer-button {
+.now-playing__content {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding-block: 12px;
+}
+
+.now-playing__toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+
+  margin-inline-start: auto;
+  min-height: 36px;
+  padding: 6px 16px;
+
+  border: 1px solid var(--color-line);
+  border-radius: 999px;
+
+  font-family: inherit;
+  font-size: 0.85rem;
+  color: var(--color-text);
+  background-color: transparent;
+  cursor: pointer;
+}
+
+.now-playing__toggle:hover {
+  border-color: var(--color-text);
+  background-color: #f3f4f6;
+}
+
+.now-playing__art {
+  width: 44px;
+  height: 44px;
+  object-fit: cover;
+  border-radius: 6px;
+  background-color: var(--color-line);
+}
+
+.now-playing__meta {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.now-playing__label {
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--color-muted);
+}
+
+.now-playing__title {
+  font-size: 0.95rem;
+  font-weight: 500;
+}
+
+.now-playing__author {
+  font-size: 0.8rem;
+  color: var(--color-muted);
+}
+
+/* Memberi ruang agar konten terakhir tidak tertutup Now Playing bar */
+body.has-now-playing {
+  padding-block-end: 88px;
+}
+
+/* FOOTER */
+.site-footer {
+  margin-block-start: 64px;
+  padding-block: 24px;
+  border-block-start: 1px solid var(--color-line);
+  font-size: 0.85rem;
+  color: var(--color-muted);
+  text-align: center;
+}
+
+@media screen and (width <= 700px) {
+  .drawer-button {
     display: inline-block;
   }
 
-  .header-content .navlist {
-    background-color: white;
+  .navlist {
+    position: fixed;
+    inset-block: 0 auto;
+    inset-inline-start: 0;
+
+    flex-direction: column;
+    gap: 0;
+    width: 220px;
     min-height: 100vh;
-    width: 200px;
+    padding: 24px;
 
-    position: fixed;
-    top: 0;
-    left: 0;
+    background-color: var(--color-surface);
+    border-inline-end: 1px solid var(--color-line);
+
+    /* lihat daftar lapisan di atas */
+    z-index: 60;
+
+    transform: translateX(-100%);
+    transition: transform 200ms ease-in-out, visibility 200ms;
 
-    transform: translateX(-200px);
-    transition: all 300ms ease-in-out;
+    /* Mengeluarkan link dari urutan Tab saat drawer tertutup. */
+    visibility: hidden;
   }
 
-  .header-content .navlist li,
-  .header-content .navlist li a {
+  .navlist a {
     display: block;
+    padding-block: 12px;
   }
 
-  .header-content .navlist.open {
+  .navlist.open {
     transform: translateX(0);
-    box-shadow: 2px 0 6px 0 #777;
+    visibility: visible;
   }
 
-  main .hero {
+  .toolbar {
     flex-direction: column;
+    align-items: flex-start;
   }
 }
 
-@media screen and (width <= 1000px) {
-  main .hero .hero__content h2 {
-    font-size: 3rem;
+@media (prefers-reduced-motion: reduce) {
+  .navlist {
+    transition: none;
   }
 }
diff --git a/solution/index.html b/solution/index.html
index f48fc9d..2618147 100644
--- a/solution/index.html
+++ b/solution/index.html
@@ -1,9 +1,16 @@
 <!DOCTYPE html>
-<html>
+<html lang="id">
   <head>
     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Calm Headphones</title>
+    <title>Calm Playlist</title>
+
+    <!-- Favicon -->
+    <link rel="icon" href="assets/images/favicon/favicon.ico" sizes="any" />
+    <link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicon/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicon/favicon-16x16.png" />
+    <link rel="apple-touch-icon" href="assets/images/favicon/apple-touch-icon.png" />
+    <link rel="manifest" href="assets/images/favicon/site.webmanifest" />
 
     <!-- Own Styles -->
     <link rel="stylesheet" href="assets/styles/style.css" />
@@ -12,7 +19,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
       rel="stylesheet"
     />
 
@@ -20,78 +27,117 @@
     <script type="module" src="assets/scripts/script.js"></script>
   </head>
   <body>
-    <header>
-      <div class="container" role="banner">
-        <div class="header-content">
-          <div class="brand-name">
-            <a href="/" aria-label="Calm Headphones">
-              <img src="assets/images/calm-logo.png" alt="Calm headphones logo" />
-            </a>
-          </div>
+    <a class="skip-link" href="#mainContent">Lewati ke konten utama</a>
 
-          <nav id="main-nav">
-            <ul id="navList" class="navlist">
-              <li><a href="#blog">Blog</a></li>
-              <li><a href="#playlist">Calm Playlist</a></li>
-              <li><a href="#join">Join Calm</a></li>
-            </ul>
-          </nav>
-
-          <button id="drawer-button" class="drawer-button">☰</button>
+    <header class="site-header">
+      <div class="container header-content">
+        <div class="brand">
+          <a href="/" aria-label="Calm Playlist, kembali ke beranda">
+            <img src="assets/images/calm-logo.png" alt="" />
+          </a>
         </div>
+
+        <nav aria-label="Navigasi utama">
+          <ul id="navList" class="navlist">
+            <li><a href="#blog">Blog</a></li>
+            <li><a href="#playlist">Calm Playlist</a></li>
+            <li><a href="#join">Join Calm</a></li>
+          </ul>
+        </nav>
+
+        <button
+          id="drawerButton"
+          class="drawer-button"
+          type="button"
+          aria-label="Buka menu navigasi"
+          aria-controls="navList"
+          aria-expanded="false"
+        >
+          <span aria-hidden="true">☰</span>
+        </button>
       </div>
     </header>
 
-    <main>
-      <div class="main-content container" role="main">
-        <section class="hero">
-          <article class="hero__content">
-            <h2>Be Focus and Productive</h2>
-            <p>Not just an ordinary headphones. It's designed for meditation.</p>
-            <button>Learn more</button>
-          </article>
-
-          <article class="hero__image">
-            <img src="assets/images/calm-hero.png" alt="A man wearing calm headphones" />
-          </article>
+    <main id="mainContent">
+      <div class="container">
+        <section class="intro">
+          <div>
+            <h1>Calm Playlist</h1>
+            <p>Musik latar untuk fokus dan produktif.</p>
+          </div>
+
+          <img
+            class="intro__image"
+            src="assets/images/headphone.png"
+            alt=""
+            width="500"
+            height="500"
+          />
+        </section>
+
+        <section class="toolbar" aria-labelledby="filterHeading">
+          <h2 id="filterHeading" class="visually-hidden">Filter lagu berdasarkan artist</h2>
+
+          <div id="filterBar" class="filter-bar" role="group" aria-labelledby="filterHeading"></div>
+          <p id="resultInfo" class="result-info" role="status"></p>
         </section>
 
-        <section>
-          <h2 class="section-title">Choose Your Production Music Favorite</h2>
+        <section aria-labelledby="listHeading">
+          <h2 id="listHeading" class="visually-hidden">Daftar lagu</h2>
 
+          <!-- Kosong dengan sengaja. Isinya dibuat oleh JavaScript. -->
           <div id="musicList" class="music-list"></div>
+          <p id="emptyState" class="empty-state" hidden>Tidak ada lagu untuk artist ini.</p>
         </section>
       </div>
     </main>
 
-    <footer>
-      <div class="container" role="contentinfo">
-        <p class="copyright">&copy; Copyright 2024</p>
+    <footer class="site-footer">
+      <div class="container">
+        <p>&copy; Copyright 2026</p>
       </div>
     </footer>
 
-    <!-- 
-    See: <template>: The Content Template element
-    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template
+    <!-- Ada di HTML sejak awal, disembunyikan dengan atribut [hidden]. -->
+    <aside
+      id="nowPlaying"
+      class="now-playing"
+      hidden
+      aria-label="Sedang diputar"
+      aria-live="polite"
+    >
+      <div class="container now-playing__content">
+        <img id="nowPlayingArt" class="now-playing__art" src="" alt="" />
+        <div class="now-playing__meta">
+          <span id="nowPlayingLabel" class="now-playing__label">Sedang diputar</span>
+          <strong id="nowPlayingTitle" class="now-playing__title"></strong>
+          <span id="nowPlayingAuthor" class="now-playing__author"></span>
+        </div>
+
+        <button id="nowPlayingToggle" class="now-playing__toggle" type="button">
+          <span id="nowPlayingIcon" aria-hidden="true">⏸</span>
+          <span id="nowPlayingToggleText">Jeda</span>
+        </button>
+      </div>
+    </aside>
+
+    <!--
+      See: <template>: The Content Template element
+      https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template
     -->
-    <template id="musicitemtemplate">
-      <article class="music-list__item" data-musicid="AUDIO_ID">
-        <div class="card">
-          <div class="card-image">
-            <img id="musicImage" src="https://your-audio.com/01/arts.jpg" alt="AUDIO TITLE" />
-          </div>
-          <div class="card-body">
-            <h3 id="musicTitle" class="card-body__title">AUDIO TITLE</h3>
-            <div id="musicSignature" class="card-body__copyright">AUDIO SIGNATURE</div>
-            <audio
-              id="musicAudio"
-              class="music-list__item__audio"
-              controls
-              src="https://your-audio.com/01/audio.mp3"
-              type="audio/mp3"
-              preload="none"
-            ></audio>
-          </div>
+    <template id="musicItemTemplate">
+      <!--
+        Isi template disalin 10 kali, jadi memakai class, bukan id.
+        Id harus unik dalam satu halaman.
+      -->
+      <article class="music-item" data-musicid="AUDIO_ID">
+        <!-- alt kosong: gambar dekoratif, judulnya sudah ada sebagai teks -->
+        <img class="music-item__art" src="" alt="" />
+        <div class="music-item__body">
+          <h3 class="music-item__title">AUDIO TITLE</h3>
+          <p class="music-item__author">AUDIO AUTHOR</p>
+          <audio class="music-item__audio" controls preload="none" src=""></audio>
+          <p class="music-item__signature"></p>
         </div>
       </article>
     </template>
diff --git a/starter/assets/images/favicon/android-chrome-192x192.png b/starter/assets/images/favicon/android-chrome-192x192.png
new file mode 100644
index 0000000..04d8363
Binary files /dev/null and b/starter/assets/images/favicon/android-chrome-192x192.png differ
diff --git a/starter/assets/images/favicon/android-chrome-512x512.png b/starter/assets/images/favicon/android-chrome-512x512.png
new file mode 100644
index 0000000..ed0a4bc
Binary files /dev/null and b/starter/assets/images/favicon/android-chrome-512x512.png differ
diff --git a/starter/assets/images/favicon/apple-touch-icon.png b/starter/assets/images/favicon/apple-touch-icon.png
new file mode 100644
index 0000000..e4c5f0a
Binary files /dev/null and b/starter/assets/images/favicon/apple-touch-icon.png differ
diff --git a/starter/assets/images/favicon/favicon-16x16.png b/starter/assets/images/favicon/favicon-16x16.png
new file mode 100644
index 0000000..5b8670c
Binary files /dev/null and b/starter/assets/images/favicon/favicon-16x16.png differ
diff --git a/starter/assets/images/favicon/favicon-32x32.png b/starter/assets/images/favicon/favicon-32x32.png
new file mode 100644
index 0000000..864a0f9
Binary files /dev/null and b/starter/assets/images/favicon/favicon-32x32.png differ
diff --git a/starter/assets/images/favicon/favicon.ico b/starter/assets/images/favicon/favicon.ico
new file mode 100644
index 0000000..85e30b6
Binary files /dev/null and b/starter/assets/images/favicon/favicon.ico differ
diff --git a/starter/assets/images/favicon/site.webmanifest b/starter/assets/images/favicon/site.webmanifest
new file mode 100644
index 0000000..84d7703
--- /dev/null
+++ b/starter/assets/images/favicon/site.webmanifest
@@ -0,0 +1,19 @@
+{
+  "name": "Calm Playlist",
+  "short_name": "Calm",
+  "icons": [
+    {
+      "src": "android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}
diff --git a/starter/assets/images/headphone.png b/starter/assets/images/headphone.png
new file mode 100644
index 0000000..ee71b4f
Binary files /dev/null and b/starter/assets/images/headphone.png differ
diff --git a/starter/assets/scripts/script.js b/starter/assets/scripts/script.js
index 25eaa1f..d52165f 100644
--- a/starter/assets/scripts/script.js
+++ b/starter/assets/scripts/script.js
@@ -1,28 +1,54 @@
-const drawerButton = document.querySelector('#drawer-button');
-const drawerNavigation = document.querySelector('#navList');
-
-function setupDrawer() {
-  drawerButton.addEventListener('click', () => {
-    drawerNavigation.classList.toggle('open');
-  });
-
-  document.body.addEventListener('click', (event) => {
-    if (!drawerNavigation.contains(event.target) && !drawerButton.contains(event.target)) {
-      drawerNavigation.classList.remove('open');
-    }
-  });
-}
+import {
+  ALL_AUTHORS,
+  getAllMusics,
+  setupDrawer,
+} from './utils.js';
+
+const musicList = document.getElementById('musicList');
+const filterBar = document.getElementById('filterBar');
+const nowPlayingToggle = document.getElementById('nowPlayingToggle');
 
-function setupOnlyOneAudioIsPlaying() {
-  // Function ini dimanfaatkan untuk mengaktifkan satu audio saja.
+const musics = getAllMusics();
+let activeAuthor = ALL_AUTHORS;
+let currentAudio = null;
+let currentMusic = null;
+
+/**
+ * TODO: Tampilkan seluruh lagu sebagai kartu di dalam musicList.
+ * TODO: Gunakan hasil filter sebagai sumber datanya.
+ * TODO: Perbarui jumlah hasil dan tombol aktif lewat renderFilterState.
+ */
+function render() {
+  const filteredMusics = musics;
 }
 
+// TODO: Buat tombol "Semua" dan satu tombol filter untuk setiap author.
+function renderFilterButtons() {}
+
+// TODO: Tangani klik tombol filter dengan event delegation.
+function setupFilter() {}
+
+/**
+ * TODO: Hentikan audio yang sedang diputar.
+ * TODO: Kosongkan currentAudio dan currentMusic, lalu sembunyikan Now Playing.
+ */
+function stopCurrentAudio() {}
+
+/**
+ * TODO: Perbarui Now Playing saat audio diputar, dijeda, dan selesai.
+ * TODO: Hentikan audio lain agar hanya satu lagu berbunyi.
+ * TODO: Jalankan play dan pause lewat tombol nowPlayingToggle.
+ */
+function setupAudioPlayer() {}
+
 function init() {
   setupDrawer();
 
-  // Lakukan get musics dan render ke DOM di sini
+  renderFilterButtons();
+  render();
 
-  setupOnlyOneAudioIsPlaying();
+  setupFilter();
+  setupAudioPlayer();
 }
 
 init();
diff --git a/starter/assets/scripts/utils.js b/starter/assets/scripts/utils.js
index dfcbba7..c0f212b 100644
--- a/starter/assets/scripts/utils.js
+++ b/starter/assets/scripts/utils.js
@@ -85,10 +85,193 @@ export function getAllMusics() {
   return [...musicsSample];
 }
 
-export function generateMusicItemUsingTemplate({ id, artLink, title, signature, audioLink }) {
-  // Buatlah music item element dengan memanfaatkan <template> pada HTML.
+export function getMusicById(id) {
+  return musicsSample.find((music) => music.id === id);
 }
 
-export function generateMusicItemUsingInnerHTML({ id, artLink, title, signature, audioLink }) {
-  // Buatlah music item element dalam bentuk string.
+// Mengumpulkan nama author tanpa ada yang kembar.
+export function getAllAuthors() {
+  const authors = [];
+
+  musicsSample.forEach((music) => {
+    if (!authors.includes(music.author)) {
+      authors.push(music.author);
+    }
+  });
+
+  return authors;
+}
+
+/** Nilai filter untuk "tampilkan semua". Dipakai juga sebagai data-author. */
+export const ALL_AUTHORS = 'all';
+
+export function filterMusicsByAuthor(musics, author) {
+  if (author === ALL_AUTHORS) return musics;
+  return musics.filter((music) => music.author === author);
+}
+
+/**
+ * Membuat satu kartu musik dari <template>.
+ *
+ * See: <template>: The Content Template element
+ * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template
+ */
+export function createMusicItemElement(music) {
+  const template = document.getElementById('musicItemTemplate');
+
+  // cloneNode(true) = salin beserta seluruh isinya
+  const fragment = template.content.cloneNode(true);
+
+  const article = fragment.querySelector('.music-item');
+  const art = fragment.querySelector('.music-item__art');
+  const title = fragment.querySelector('.music-item__title');
+  const author = fragment.querySelector('.music-item__author');
+  const audio = fragment.querySelector('.music-item__audio');
+  const signature = fragment.querySelector('.music-item__signature');
+
+  // Disimpan di elemen supaya nanti bisa dibaca lagi lewat dataset.
+  article.dataset.musicid = music.id;
+
+  art.src = music.artLink;
+
+  // textContent: isi diperlakukan sebagai teks biasa
+  title.textContent = music.title;
+  author.textContent = music.author;
+
+  audio.src = music.audioLink;
+  audio.setAttribute('aria-label', `Putar ${music.title} oleh ${music.author}`);
+
+  // innerHTML dipakai HANYA karena `signature` memang berisi tag <a>
+  signature.innerHTML = music.signature;
+
+  return fragment;
+}
+
+/** Nilai author disimpan di data-author, bukan dibaca dari teks tombol. */
+export function createFilterButtonElement(author, label) {
+  const button = document.createElement('button');
+
+  button.type = 'button';
+  button.className = 'filter-button';
+  button.textContent = label;
+  button.dataset.author = author;
+  button.setAttribute('aria-pressed', 'false');
+
+  return button;
+}
+
+function setDrawerOpen(isOpen) {
+  const drawerButton = document.getElementById('drawerButton');
+  const navList = document.getElementById('navList');
+
+  let label = 'Buka menu navigasi';
+
+  if (isOpen) {
+    label = 'Tutup menu navigasi';
+  }
+
+  navList.classList.toggle('open', isOpen);
+
+  // Tombol ikut memberi tahu keadaannya, bukan hanya tampilannya.
+  drawerButton.setAttribute('aria-expanded', isOpen);
+  drawerButton.setAttribute('aria-label', label);
+}
+
+export function setupDrawer() {
+  const drawerButton = document.getElementById('drawerButton');
+  const navList = document.getElementById('navList');
+
+  drawerButton.addEventListener('click', () => {
+    setDrawerOpen(!navList.classList.contains('open'));
+  });
+
+  /**
+   * Klik di mana pun untuk menutup drawer. Contoh event bubbling: klik pada
+   * elemen anak akan "naik" sampai ke body.
+   *
+   * Klik pada link di dalam drawer tidak menutupnya karena link itu bagian
+   * dari navList. Tambahkan listener terpisah pada navList bila diperlukan.
+   */
+  document.body.addEventListener('click', (event) => {
+    if (!navList.contains(event.target) && !drawerButton.contains(event.target)) {
+      setDrawerOpen(false);
+    }
+  });
+
+  // Fokus dikembalikan ke tombol pemicu supaya pengguna keyboard tidak tersesat.
+  document.addEventListener('keydown', (event) => {
+    if (event.key !== 'Escape') return;
+    if (!navList.classList.contains('open')) return;
+
+    setDrawerOpen(false);
+    drawerButton.focus();
+  });
+}
+
+export function showNowPlaying(music) {
+  const nowPlaying = document.getElementById('nowPlaying');
+
+  // Now Playing bar hanya ada satu di halaman, jadi id boleh dipakai.
+  const art = document.getElementById('nowPlayingArt');
+  const title = document.getElementById('nowPlayingTitle');
+  const author = document.getElementById('nowPlayingAuthor');
+
+  art.src = music.artLink;
+  title.textContent = music.title;
+  author.textContent = music.author;
+
+  /**
+   * Atribut `hidden` menyembunyikan elemen sekaligus dari pembaca layar.
+   *
+   * Isi diubah lebih dulu, baru elemennya ditampilkan. Live region yang masih
+   * hidden tidak mengumumkan perubahan, jadi pengumuman pertama bisa terlewat.
+   */
+  nowPlaying.hidden = false;
+  document.body.classList.add('has-now-playing');
+}
+
+export function hideNowPlaying() {
+  document.getElementById('nowPlaying').hidden = true;
+  document.body.classList.remove('has-now-playing');
+}
+
+// Dipanggil dari event `play` / `pause`, bukan dari tombolnya langsung.
+export function renderNowPlayingState(isPlaying, title) {
+  let status = 'Dijeda';
+  let icon = '▶';
+  let action = 'Putar';
+
+  if (isPlaying) {
+    status = 'Sedang diputar';
+    icon = '⏸';
+    action = 'Jeda';
+  }
+
+  document.getElementById('nowPlayingLabel').textContent = status;
+  document.getElementById('nowPlayingIcon').textContent = icon;
+  document.getElementById('nowPlayingToggleText').textContent = action;
+
+  const toggle = document.getElementById('nowPlayingToggle');
+  toggle.setAttribute('aria-label', `${action} ${title}`);
+}
+
+// Memperbarui jumlah hasil, empty state, dan penanda tombol aktif.
+export function renderFilterState(activeAuthor, shownCount, totalCount) {
+  const resultInfo = document.getElementById('resultInfo');
+  const emptyState = document.getElementById('emptyState');
+  const filterBar = document.getElementById('filterBar');
+
+  resultInfo.textContent = `Menampilkan ${shownCount} dari ${totalCount} lagu`;
+  emptyState.hidden = shownCount !== 0;
+
+  // Dicari di dalam filterBar saja, bukan di seluruh dokumen.
+  const buttons = filterBar.querySelectorAll('.filter-button');
+
+  buttons.forEach((button) => {
+    const isActive = button.dataset.author === activeAuthor;
+
+    // Ditandai dua kali: warna untuk mata, aria-pressed untuk pembaca layar.
+    button.classList.toggle('filter-button--active', isActive);
+    button.setAttribute('aria-pressed', isActive);
+  });
 }
diff --git a/starter/assets/styles/style.css b/starter/assets/styles/style.css
index cdf0f19..e9641ca 100644
--- a/starter/assets/styles/style.css
+++ b/starter/assets/styles/style.css
@@ -1,202 +1,415 @@
+:root {
+  --color-text: #1a1a1a;
+  --color-muted: #6b7280;
+  --color-line: #e5e7eb;
+  --color-surface: #ffffff;
+  --color-accent: #1a1a1a;
+
+  --radius: 8px;
+  --space: 16px;
+}
+
 * {
   margin: 0;
   padding: 0;
-
   box-sizing: border-box;
 }
 
 body {
   font-family: 'Inter', sans-serif;
+  color: var(--color-text);
+  background-color: var(--color-surface);
+  line-height: 1.5;
+}
 
-  background-color: #f9f5ed;
+img {
+  display: block;
+  max-width: 100%;
 }
 
-.container {
-  padding: 16px 32px;
-  margin-inline: auto;
-  max-width: 1200px;
+a {
+  color: inherit;
 }
 
-.card {
-  border-radius: 12px;
-  box-shadow: 0 4px 4px 0 #777;
-  overflow: hidden;
+:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+  border-radius: 4px;
 }
 
-.card .card-image img {
-  display: block;
-  width: 100%;
+.skip-link {
+  position: absolute;
+  inset-block-start: 8px;
+  inset-inline-start: 8px;
+  z-index: 100; /* lihat daftar lapisan di atas */
+
+  padding: 8px 16px;
+  border-radius: var(--radius);
+  color: var(--color-surface);
+  background-color: var(--color-accent);
+  text-decoration: none;
+
+  transform: translateY(-200%);
 }
 
-.card .card-body {
-  padding: 12px;
+.skip-link:focus-visible {
+  transform: translateY(0);
 }
 
-.card .card-body .card-body__title {
-  font-size: 1.5rem;
-  margin-block-end: 8px;
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.container {
+  max-width: 960px;
+  margin-inline: auto;
+  padding-inline: 24px;
 }
 
 /* HEADER */
+.site-header {
+  border-block-end: 1px solid var(--color-line);
+}
+
 .header-content {
   display: flex;
   align-items: center;
+  gap: 32px;
+  padding-block: 16px;
 }
 
-.header-content .brand-name img {
-  margin-right: 32px;
+.brand img {
+  height: 28px;
+  width: auto;
 }
 
-.header-content .navlist li {
-  display: inline;
+.navlist {
+  display: flex;
+  gap: 24px;
+  list-style: none;
 }
 
-.header-content .navlist li a {
-  display: inline-block;
-  padding: 16px 32px;
-
-  color: #141e16;
+.navlist a {
+  font-size: 0.9rem;
+  color: var(--color-muted);
   text-decoration: none;
 }
 
-.header-content .drawer-button {
-  display: none;
-
-  padding: 8px;
-  border: 0;
-  border-radius: 4px;
-
-  font-weight: bold;
-  font-size: 28px;
-  color: #141e16;
+.navlist a:hover {
+  color: var(--color-text);
+}
 
+.drawer-button {
+  display: none;
+  margin-inline-start: auto;
+  padding: 4px 8px;
+  border: 1px solid var(--color-line);
+  border-radius: var(--radius);
+  font-size: 1.1rem;
   background-color: transparent;
-
   cursor: pointer;
 }
 
-/* MAIN */
-main .main-content > :not([hidden]) ~ :not([hidden]) {
-  margin-block-start: 30px;
+/* INTRO */
+.intro {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+
+  padding-block: 48px 24px;
 }
 
-main section {
-  padding-block: 30px;
+.intro__image {
+  flex-shrink: 0;
+  height: clamp(72px, 14vw, 112px);
+  width: auto;
 }
 
-main section .section-title {
-  text-align: center;
-  font-size: 2.5rem;
-  padding-block: 50px 40px;
+.intro h1 {
+  font-size: 2rem;
+  font-weight: 600;
+  letter-spacing: -0.02em;
 }
 
-main .hero {
-  min-height: 90vh;
-  padding-block: 50px;
+.intro p {
+  margin-block-start: 8px;
+  color: var(--color-muted);
+}
 
+/* TOOLBAR & FILTER */
+.toolbar {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  gap: 30px;
+  justify-content: space-between;
+  gap: var(--space);
+  padding-block: 16px 32px;
+}
+
+.filter-bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
 }
 
-main .hero .hero__content {
-  flex-grow: 1;
+.filter-button {
+  min-height: 36px;
+  padding: 6px 14px;
+  border: 1px solid var(--color-line);
+  border-radius: 999px;
+  font-family: inherit;
+  font-size: 0.85rem;
+  color: var(--color-muted);
+  background-color: transparent;
+  cursor: pointer;
 }
 
-main .hero .hero__content h2 {
-  font-size: 4rem;
-  font-weight: bold;
+/* Tanpa :not(), hover menimpa aturan tombol aktif karena spesifisitasnya lebih tinggi. */
+.filter-button:not(.filter-button--active):hover {
+  color: var(--color-text);
+  border-color: var(--color-text);
+  background-color: #f3f4f6;
 }
 
-main .hero .hero__content p {
-  margin-block-start: 32px;
-  font-size: 1rem;
+.filter-button--active {
+  color: var(--color-surface);
+  background-color: var(--color-accent);
+  border-color: var(--color-accent);
 }
 
-main .hero .hero__content button {
-  margin-block-start: 64px;
-  padding: 12px 16px;
-  border: 0;
-  border-radius: 8px;
+/* Tombol aktif memberi umpan balik hover ke arah berbeda */
+.filter-button--active:hover {
+  background-color: #404040;
+  border-color: #404040;
+}
 
-  background-color: #3b855b;
+.result-info {
+  font-size: 0.85rem;
+  color: var(--color-muted);
+}
 
-  font-size: 1rem;
-  font-weight: bold;
-  color: white;
+/* MUSIC LIST */
+.music-list {
+  display: grid;
 
-  cursor: pointer;
+  /* auto-fill menjaga jumlah kolom tetap sama; auto-fit akan membuat kartu melar. */
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 32px 24px;
+
+  /* Tanpa ini, tinggi kartu ikut kartu tertinggi dan berubah tiap filter diganti. */
+  align-items: start;
 }
 
-main .hero .hero__image {
-  flex-grow: 1;
+/* Stacking context sendiri, agar kontrol <audio> tidak menimpa lapisan di atasnya. */
+.music-item {
+  position: relative;
+  z-index: 1;
+  isolation: isolate;
 }
 
-main .hero .hero__image img {
-  display: block;
+.music-item__art {
   width: 100%;
+  aspect-ratio: 1;
+  object-fit: cover;
+  border-radius: var(--radius);
+  background-color: var(--color-line);
 }
 
-main .music-list {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  gap: 24px 18px;
+.music-item__body {
+  padding-block-start: 12px;
 }
 
-main .music-list .music-list__item__audio {
-  display: block;
+/* Judul dibatasi satu baris agar tinggi kartu tidak berubah-ubah */
+.music-item__title {
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 1.4;
+  min-block-size: 1.4em;
+
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.music-item__author {
+  margin-block-start: 2px;
+  font-size: 0.85rem;
+  color: var(--color-muted);
+}
+
+.music-item__audio {
   width: 100%;
-  margin-block-start: 16px;
+  height: 36px;
+  margin-block-start: 12px;
 }
 
-/* FOOTER */
-footer {
-  padding-block: 18px;
+/* Panjang kredit berbeda tiap lagu, dibatasi dua baris agar tinggi kartu seragam. */
+.music-item__signature {
+  margin-block-start: 8px;
+  font-size: 0.7rem;
+  line-height: 1.4;
+  color: var(--color-muted);
+
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  overflow: hidden;
+  min-block-size: 2.8em; /* 2 baris x line-height 1.4 */
 }
 
-footer .copyright {
+.empty-state {
+  padding-block: 48px;
   text-align: center;
+  color: var(--color-muted);
 }
 
-@media screen and (width <= 750px) {
-  .header-content {
-    justify-content: space-between;
-  }
+/* NOW PLAYING */
+.now-playing {
+  position: fixed;
+  inset-inline: 0;
+  inset-block-end: 0;
+
+  z-index: 50; /* lihat daftar lapisan di atas */
+  isolation: isolate;
+
+  background-color: var(--color-surface);
+  border-block-start: 1px solid var(--color-line);
+  box-shadow: 0 -1px 0 var(--color-line);
+}
 
-  .header-content .drawer-button {
+.now-playing__content {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding-block: 12px;
+}
+
+.now-playing__toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+
+  margin-inline-start: auto;
+  min-height: 36px;
+  padding: 6px 16px;
+
+  border: 1px solid var(--color-line);
+  border-radius: 999px;
+
+  font-family: inherit;
+  font-size: 0.85rem;
+  color: var(--color-text);
+  background-color: transparent;
+  cursor: pointer;
+}
+
+.now-playing__toggle:hover {
+  border-color: var(--color-text);
+  background-color: #f3f4f6;
+}
+
+.now-playing__art {
+  width: 44px;
+  height: 44px;
+  object-fit: cover;
+  border-radius: 6px;
+  background-color: var(--color-line);
+}
+
+.now-playing__meta {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.now-playing__label {
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--color-muted);
+}
+
+.now-playing__title {
+  font-size: 0.95rem;
+  font-weight: 500;
+}
+
+.now-playing__author {
+  font-size: 0.8rem;
+  color: var(--color-muted);
+}
+
+/* Memberi ruang agar konten terakhir tidak tertutup Now Playing bar */
+body.has-now-playing {
+  padding-block-end: 88px;
+}
+
+/* FOOTER */
+.site-footer {
+  margin-block-start: 64px;
+  padding-block: 24px;
+  border-block-start: 1px solid var(--color-line);
+  font-size: 0.85rem;
+  color: var(--color-muted);
+  text-align: center;
+}
+
+@media screen and (width <= 700px) {
+  .drawer-button {
     display: inline-block;
   }
 
-  .header-content .navlist {
-    background-color: white;
+  .navlist {
+    position: fixed;
+    inset-block: 0 auto;
+    inset-inline-start: 0;
+
+    flex-direction: column;
+    gap: 0;
+    width: 220px;
     min-height: 100vh;
-    width: 200px;
+    padding: 24px;
 
-    position: fixed;
-    top: 0;
-    left: 0;
+    background-color: var(--color-surface);
+    border-inline-end: 1px solid var(--color-line);
+
+    /* lihat daftar lapisan di atas */
+    z-index: 60;
+
+    transform: translateX(-100%);
+    transition: transform 200ms ease-in-out, visibility 200ms;
 
-    transform: translateX(-200px);
-    transition: all 300ms ease-in-out;
+    /* Mengeluarkan link dari urutan Tab saat drawer tertutup. */
+    visibility: hidden;
   }
 
-  .header-content .navlist li,
-  .header-content .navlist li a {
+  .navlist a {
     display: block;
+    padding-block: 12px;
   }
 
-  .header-content .navlist.open {
+  .navlist.open {
     transform: translateX(0);
-    box-shadow: 2px 0 6px 0 #777;
+    visibility: visible;
   }
 
-  main .hero {
+  .toolbar {
     flex-direction: column;
+    align-items: flex-start;
   }
 }
 
-@media screen and (width <= 1000px) {
-  main .hero .hero__content h2 {
-    font-size: 3rem;
+@media (prefers-reduced-motion: reduce) {
+  .navlist {
+    transition: none;
   }
 }
diff --git a/starter/index.html b/starter/index.html
index 3ffd3ea..30b3923 100644
--- a/starter/index.html
+++ b/starter/index.html
@@ -1,160 +1,100 @@
 <!DOCTYPE html>
-<html>
+<html lang="id">
   <head>
     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Calm Headphones</title>
+    <title>Calm Playlist</title>
+
+    <!-- Favicon -->
+    <link rel="icon" href="assets/images/favicon/favicon.ico" sizes="any" />
+    <link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicon/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicon/favicon-16x16.png" />
+    <link rel="apple-touch-icon" href="assets/images/favicon/apple-touch-icon.png" />
+    <link rel="manifest" href="assets/images/favicon/site.webmanifest" />
+
+    <!-- Own Styles -->
+    <link rel="stylesheet" href="assets/styles/style.css" />
 
     <!-- Google Font -->
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
       rel="stylesheet"
     />
 
-    <!-- Own Styles -->
-    <link rel="stylesheet" href="assets/styles/style.css" />
-
     <!-- Own Scripts -->
     <script type="module" src="assets/scripts/script.js"></script>
   </head>
   <body>
-    <header>
-      <div class="container" role="banner">
-        <div class="header-content">
-          <div class="brand-name">
-            <a href="/" aria-label="Calm Headphones">
-              <img src="assets/images/calm-logo.png" alt="Calm headphones logo" />
-            </a>
-          </div>
+    <a class="skip-link" href="#mainContent">Lewati ke konten utama</a>
 
-          <nav id="main-nav">
-            <ul id="navList" class="navlist">
-              <li><a href="#blog">Blog</a></li>
-              <li><a href="#playlist">Calm Playlist</a></li>
-              <li><a href="#join">Join Calm</a></li>
-            </ul>
-          </nav>
-
-          <button id="drawer-button" class="drawer-button">☰</button>
+    <header class="site-header">
+      <div class="container header-content">
+        <div class="brand">
+          <a href="/" aria-label="Calm Playlist, kembali ke beranda">
+            <img src="assets/images/calm-logo.png" alt="" />
+          </a>
         </div>
+
+        <nav aria-label="Navigasi utama">
+          <ul id="navList" class="navlist">
+            <li><a href="#blog">Blog</a></li>
+            <li><a href="#playlist">Calm Playlist</a></li>
+            <li><a href="#join">Join Calm</a></li>
+          </ul>
+        </nav>
+
+        <button
+          id="drawerButton"
+          class="drawer-button"
+          type="button"
+          aria-label="Buka menu navigasi"
+          aria-controls="navList"
+          aria-expanded="false"
+        >
+          <span aria-hidden="true">☰</span>
+        </button>
       </div>
     </header>
 
-    <main>
-      <div class="main-content container" role="main">
-        <section class="hero">
-          <article class="hero__content">
-            <h2>Be Focus and Productive</h2>
-            <p>Not just an ordinary headphones. It's designed for meditation.</p>
-            <button>Learn more</button>
-          </article>
+    <main id="mainContent">
+      <div class="container">
+        <section class="intro">
+          <div>
+            <h1>Calm Playlist</h1>
+            <p>Musik latar untuk fokus dan produktif.</p>
+          </div>
+
+          <img
+            class="intro__image"
+            src="assets/images/headphone.png"
+            alt=""
+            width="500"
+            height="500"
+          />
+        </section>
+
+        <section class="toolbar" aria-labelledby="filterHeading">
+          <h2 id="filterHeading" class="visually-hidden">Filter lagu berdasarkan artist</h2>
 
-          <article class="hero__image">
-            <img src="assets/images/calm-hero.png" alt="A man wearing calm headphones" />
-          </article>
+          <div id="filterBar" class="filter-bar" role="group" aria-labelledby="filterHeading"></div>
+          <p id="resultInfo" class="result-info" role="status"></p>
         </section>
 
-        <section>
-          <h2 class="section-title">Choose Your Production Music Favorite</h2>
+        <section aria-labelledby="listHeading">
+          <h2 id="listHeading" class="visually-hidden">Daftar lagu</h2>
 
-          <div id="musicList" class="music-list">
-            <article class="music-list__item" data-musicid="01">
-              <div class="card">
-                <div class="card-image">
-                  <img
-                    id="musicImage"
-                    src="https://calm-music-api.dicoding.dev/assets/arts/01-coverless-book.jpg"
-                    alt="Coverless Book 1"
-                  />
-                </div>
-                <div class="card-body">
-                  <h3 id="musicTitle" class="card-body__title">Coverless Book 1</h3>
-                  <div id="musicSignature" class="card-body__copyright">
-                    Music by
-                    <a
-                      href="https://pixabay.com/users/ambientaudiovision-25188255/?utm_source=link-attribution&utm_medium=referral&utm_campaign=music&utm_content=186307"
-                      >Amir Firouzfard 1</a
-                    >
-                  </div>
-                  <audio
-                    id="musicAudio"
-                    class="music-list__item__audio"
-                    controls
-                    src="https://calm-music-api.dicoding.dev/assets/musics/01-coverless-book.mp3"
-                    type="audio/mp3"
-                    preload="none"
-                  ></audio>
-                </div>
-              </div>
-            </article>
-            <article class="music-list__item" data-musicid="02">
-              <div class="card">
-                <div class="card-image">
-                  <img
-                    id="musicImage"
-                    src="https://calm-music-api.dicoding.dev/assets/arts/01-coverless-book.jpg"
-                    alt="Coverless Book 2"
-                  />
-                </div>
-                <div class="card-body">
-                  <h3 id="musicTitle" class="card-body__title">Coverless Book 2</h3>
-                  <div id="musicSignature" class="card-body__copyright">
-                    Music by
-                    <a
-                      href="https://pixabay.com/users/ambientaudiovision-25188255/?utm_source=link-attribution&utm_medium=referral&utm_campaign=music&utm_content=186307"
-                      >Amir Firouzfard 2</a
-                    >
-                  </div>
-                  <audio
-                    id="musicAudio"
-                    class="music-list__item__audio"
-                    controls
-                    src="https://calm-music-api.dicoding.dev/assets/musics/01-coverless-book.mp3"
-                    type="audio/mp3"
-                    preload="none"
-                  ></audio>
-                </div>
-              </div>
-            </article>
-            <article class="music-list__item" data-musicid="03">
-              <div class="card">
-                <div class="card-image">
-                  <img
-                    id="musicImage"
-                    src="https://calm-music-api.dicoding.dev/assets/arts/01-coverless-book.jpg"
-                    alt="Coverless Book 3"
-                  />
-                </div>
-                <div class="card-body">
-                  <h3 id="musicTitle" class="card-body__title">Coverless Book 3</h3>
-                  <div id="musicSignature" class="card-body__copyright">
-                    Music by
-                    <a
-                      href="https://pixabay.com/users/ambientaudiovision-25188255/?utm_source=link-attribution&utm_medium=referral&utm_campaign=music&utm_content=186307"
-                      >Amir Firouzfard 3</a
-                    >
-                  </div>
-                  <audio
-                    id="musicAudio"
-                    class="music-list__item__audio"
-                    controls
-                    src="https://calm-music-api.dicoding.dev/assets/musics/01-coverless-book.mp3"
-                    type="audio/mp3"
-                    preload="none"
-                  ></audio>
-                </div>
-              </div>
-            </article>
-          </div>
+          <!-- Kosong dengan sengaja. Isinya dibuat oleh JavaScript. -->
+          <div id="musicList" class="music-list"></div>
+          <p id="emptyState" class="empty-state" hidden>Tidak ada lagu untuk artist ini.</p>
         </section>
       </div>
     </main>
 
-    <footer>
-      <div class="container" role="contentinfo">
-        <p class="copyright">&copy; Copyright 2024</p>
+    <footer class="site-footer">
+      <div class="container">
+        <p>&copy; Copyright 2026</p>
       </div>
     </footer>
   </body>