diff --git a/README.md b/README.md
index 5fe57b5..6122d89 100644
--- a/README.md
+++ b/README.md
@@ -1,24 +1,32 @@
 # ILT-1 Buat Website Pertamamu
 
+Live demo: [Calm Playlist](https://calm-playlist-basic.netlify.app/)
+
 ## Pengantar
 
-ILT 1 akan mengangkat materi tentang HTML dan CSS. Oleh karena itu, pengembangan aplikasi Calm Headphones akan diawali dengan membangun kerangka dan styling-nya.
+ILT 1 akan mengangkat materi tentang HTML dan CSS. Oleh karena itu, pengembangan aplikasi Calm Playlist akan diawali dengan membangun kerangka dan styling-nya.
 
 ## Petunjuk
 
 Branch repository ini mengandung dua direktori yang bersifat starter dan solution project. Sebagai pembuka sesi hands-on demo, instruktur dipersilakan untuk memanfaatkan project dalam direktori `starter`.
 
+Pada direktori `starter`, bagian header, footer, dan styling dasarnya telah disediakan. Instruktur cukup mengerjakan tiga tahap bertanda `TODO` berikut.
+
+1. Menyusun elemen HTML baru pada `index.html`.
+2. Menerapkan styling untuk elemen baru tersebut pada `assets/styles/style.css`.
+3. Mengatur buka dan tutup drawer pada `assets/scripts/script.js`.
+
 ## Hasil Akhir Proyek
 
 Hasil akhir dari kegiatan hands-on demo akan terlihat seperti berikut.
 
 ### Versi Desktop
 
-![Calm Headphone in desktop version](design-concept-desktop.png?raw=true)
+![Calm Playlist in desktop version](design-concept-desktop.png?raw=true)
 
 ### Versi Mobile
 
-![Calm Headphone in mobile version](design-concept-mobile.png?raw=true)
+![Calm Playlist in mobile version](design-concept-mobile.png?raw=true)
 
 ## Konten (HTML)
 
@@ -31,22 +39,43 @@ Beberapa kebutuhan konten landing page dapat dilihat pada poin-poin berikut.
   - Blog: `#blog`
   - Calm Playlist: `#playlist`
   - Join Calm: `#join`
+- Drawer Button: gunakan `aria-label`, `aria-controls`, dan `aria-expanded` agar keadaan tombol terbaca oleh pembaca layar.
+
+### Intro Content
+
+Bagian ini terdiri dari dua kolom, yaitu kolom teks dan kolom gambar.
 
-### Main Content
+- Heading 1: `Calm Playlist`
+- Paragraph: `Musik latar untuk fokus dan produktif.`
+- Image: `assets/images/headphone.png`
 
-- Heading 1: `Be Focus and Productive`
-- Paragraph: `Not just an ordinary headphones. It's designed for meditation.`
-- Button: `Learn More`
-- Hero Image: `assets/images/calm-hero.png`
+### Playlist Content
+
+- Heading 2: `Daftar Lagu`
+- Filter: `Semua`, `Amir Firouzfard`, `Patrick A`, `FASSound`
+  - Bungkus tombolnya dalam elemen ber-`id="filterBar"` dengan `role="group"` dan `aria-label`.
+  - Setiap tombol menyimpan nilainya pada `data-author` dan keadaannya pada `aria-pressed`.
+- Music List:
+
+  | Judul | Author |
+  | --- | --- |
+  | Coverless Book | Amir Firouzfard |
+  | Lofi Orchestra | Patrick A |
+  | For a Dream | Patrick A |
+  | Good Night | FASSound |
+  | Summer Rain | Patrick A |
+  | Lofi Study | FASSound |
+
+- Album Art: gunakan `assets/images/cover.png` untuk seluruh kartu.
 
 ## Styling (CSS)
 
 ### Color Pallete
 
-- black: `#000000`
-- white: `#ffffff`
-- dark: `#141E16`
-- accent: `#3B855B`
+- text: `#1A1A1A`
+- muted: `#6B7280`
+- line: `#E5E7EB`
+- surface: `#FFFFFF`
 
 ### Font Type and Size
 
@@ -54,19 +83,33 @@ Beberapa kebutuhan konten landing page dapat dilihat pada poin-poin berikut.
   - Type: Inter
   - Link: [Inter Google Font](https://fonts.google.com/specimen/Inter?preview.text=This%20is%20a%20great%20font%20to%20use%3F&preview.text_type=custom)
 - Font Size:
-  - Navigation: 16px
-  - Heading 1: 64px desktop, 48px mobile
-  - Paragraph: 18px
-  - Button: 18px
+  - Navigation: 0.9rem
+  - Heading 1: 2rem
+  - Heading 2: 1.25rem
+  - Judul lagu: 1rem
+  - Nama author: 0.85rem
+
+### Layout
+
+- Intro: dua kolom menggunakan `display: flex`.
+- Filter: berbaris ke samping menggunakan `display: flex`.
+- Music List: beberapa kolom menggunakan `display: grid`.
 
 ## Checklist Live Demo
 
 Instruktur dapat memanfaatkan checklist live demo berikut agar sesi hands-on lebih terstruktur.
 
-- [ ] Menyiapkan resource project seperti gambar.
+- [ ] Menyiapkan starter project yang telah disediakan.
 - [ ] Membangun kerangka halaman web menggunakan HTML.
-  - [ ] Mengenalkan semantic HTML seperti `<header>` ,`<nav>`, `<main>`, `<footer>`, `<article>`, dll.
+  - [ ] Mengenalkan semantic HTML seperti `<header>` ,`<nav>`, `<main>`, `<footer>`, `<section>`, dll.
   - [ ] Menggunakan `<a>` menampilkan link navigasi.
   - [ ] Menggunakan `<img>` untuk menampilkan gambar.
+  - [ ] Menggunakan `<ul>` dan `<li>` untuk menampilkan daftar navigasi.
+  - [ ] Menggunakan `<button>` untuk tombol filter dan `<article>` untuk kartu musik.
 - [ ] Menerapkan styling terhadap kerangka yang dibangun.
+  - [ ] Menyusun intro menjadi dua kolom dengan Flexbox.
+  - [ ] Menyusun daftar filter agar berbaris ke samping dengan Flexbox.
+  - [ ] Menyusun daftar musik menjadi beberapa kolom dengan Grid.
 - [ ] Menerapkan layout responsive dengan Flexbox.
+- [ ] Mengatur buka dan tutup drawer dengan JavaScript.
+  - [ ] Memperbarui `aria-expanded` dan `aria-label` mengikuti keadaan drawer.
diff --git a/design-concept-desktop.png b/design-concept-desktop.png
index e75f3b0..3d60c88 100644
Binary files a/design-concept-desktop.png and b/design-concept-desktop.png differ
diff --git a/design-concept-mobile.png b/design-concept-mobile.png
index 9e66856..90c9820 100644
Binary files a/design-concept-mobile.png and b/design-concept-mobile.png differ
diff --git a/solution/assets/images/calm-hero.png b/solution/assets/images/calm-hero.png
deleted file mode 100644
index 967e7e7..0000000
Binary files a/solution/assets/images/calm-hero.png and /dev/null differ
diff --git a/solution/assets/images/cover.png b/solution/assets/images/cover.png
new file mode 100644
index 0000000..974522a
Binary files /dev/null and b/solution/assets/images/cover.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 c4e832d..db2f377 100644
--- a/solution/assets/scripts/script.js
+++ b/solution/assets/scripts/script.js
@@ -1,12 +1,20 @@
-const drawerButton = document.querySelector('#drawer-button');
-const drawerNavigation = document.querySelector('#main-nav');
+const drawerButton = document.getElementById('drawerButton');
+const navList = document.getElementById('navList');
 
-drawerButton.addEventListener('click', () => {
-  drawerNavigation.classList.toggle('open');
-});
+function setDrawerOpen(isOpen) {
+  let label = 'Buka menu navigasi';
 
-document.body.addEventListener('click', (event) => {
-  if (!drawerNavigation.contains(event.target) && !drawerButton.contains(event.target)) {
-    drawerNavigation.classList.remove('open');
+  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);
+}
+
+drawerButton.addEventListener('click', () => {
+  setDrawerOpen(!navList.classList.contains('open'));
 });
diff --git a/solution/assets/styles/style.css b/solution/assets/styles/style.css
index 31b4afc..dde50ac 100644
--- a/solution/assets/styles/style.css
+++ b/solution/assets/styles/style.css
@@ -1,144 +1,251 @@
+:root {
+  --color-text: #1a1a1a;
+  --color-muted: #6b7280;
+  --color-line: #e5e7eb;
+  --color-surface: #ffffff;
+  --color-accent: #1a1a1a;
+
+  --radius: 8px;
+}
+
 * {
   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%;
 }
 
-header {
-  margin: 0 auto;
+a {
+  color: inherit;
+}
 
-  padding: 16px 32px;
-  max-width: 1200px;
+:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+.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 .drawer-button {
-  display: none;
+.brand img {
+  height: 28px;
+  width: auto;
+}
 
-  padding: 8px;
-  border: 0;
-  border-radius: 4px;
+.navlist {
+  display: flex;
+  gap: 24px;
+  list-style: none;
+}
 
-  font-weight: bold;
-  font-size: 28px;
-  color: #141e16;
+.navlist a {
+  font-size: 0.9rem;
+  color: var(--color-muted);
+  text-decoration: none;
+}
 
-  background-color: transparent;
+.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;
 }
 
-header img {
-  margin-right: 32px;
+/* INTRO */
+.intro {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+
+  padding-block: 48px 24px;
 }
 
-header nav ul li {
-  display: inline;
+.intro__image {
+  flex-shrink: 0;
+  height: clamp(72px, 14vw, 112px);
+  width: auto;
 }
 
-header nav ul li a {
-  display: inline-block;
-  padding: 16px 32px;
+.intro h1 {
+  font-size: 2rem;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+}
 
-  color: #141e16;
-  text-decoration: none;
+.intro p {
+  margin-block-start: 8px;
+  color: var(--color-muted);
 }
 
-main {
-  padding: 16px 32px;
-  margin: 0 auto;
-  max-width: 1200px;
+/* FILTER */
+.section-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  padding-block: 16px 0;
+}
 
+.filter-bar {
   display: flex;
-  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+
+  padding-block: 16px 32px;
 }
 
-main .content {
-  padding: 16px;
-  flex: 4;
+.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 .content h2 {
-  font-size: 64px;
-  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 .content p {
-  font-size: 18px;
-  margin-top: 32px;
+.filter-button--active {
+  color: var(--color-surface);
+  background-color: var(--color-accent);
+  border-color: var(--color-accent);
 }
 
-main .content button {
-  margin-top: 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;
+/* MUSIC LIST */
+.music-list {
+  display: grid;
 
-  font-size: 18px;
-  font-weight: bold;
-  color: white;
+  /* 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;
 
-  cursor: pointer;
+  /* Tanpa ini, tinggi setiap kartu ikut kartu tertinggi dalam satu baris. */
+  align-items: start;
 }
 
-main .hero-image {
-  flex: 5;
-  padding: 16px;
+.music-item__art {
+  width: 100%;
+  aspect-ratio: 1;
+  object-fit: cover;
+  border-radius: var(--radius);
+  background-color: var(--color-line);
 }
 
-main .hero-image img {
-  width: 100%;
+.music-item__body {
+  padding-block-start: 12px;
 }
 
-@media (max-width: 750px) {
-  header {
-    justify-content: space-between;
-  }
+.music-item__title {
+  font-size: 1rem;
+  font-weight: 500;
+}
 
-  header .drawer-button {
+.music-item__author {
+  margin-block-start: 2px;
+  font-size: 0.85rem;
+  color: var(--color-muted);
+}
+
+/* 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 nav {
-    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);
+
+    /* Drawer harus berada di atas konten halaman */
+    z-index: 60;
+
+    transform: translateX(-100%);
+    transition: transform 200ms ease-in-out, visibility 200ms;
 
-    transform: translateX(-200px);
-    transition: transform 0.3s ease-in-out;
+    /* Mengeluarkan link dari urutan Tab saat drawer tertutup. */
+    visibility: hidden;
   }
 
-  header nav ul li,
-  header nav ul li a {
+  .navlist a {
     display: block;
+    padding-block: 12px;
   }
 
-  header nav.open {
+  .navlist.open {
     transform: translateX(0);
-  }
-
-  main {
-    flex-direction: column;
+    visibility: visible;
   }
 }
 
-@media (max-width: 1000px) {
-  main .content h2 {
-    font-size: 48px;
+@media (prefers-reduced-motion: reduce) {
+  .navlist {
+    transition: none;
   }
 }
diff --git a/solution/index.html b/solution/index.html
index 75cada2..a265ee3 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,31 +27,145 @@
     <script defer src="assets/scripts/script.js"></script>
   </head>
   <body>
-    <header>
-      <div class="brand-name">
-        <img src="assets/images/calm-logo.png" alt="calm logo" />
+    <header class="site-header">
+      <div class="container header-content">
+        <div class="brand">
+          <a href="/">
+            <img src="assets/images/calm-logo.png" alt="Calm Playlist" />
+          </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>
-      <nav id="main-nav">
-        <ul>
-          <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>
 
     <main>
-      <section class="content">
-        <h2>Be Focus and Productive</h2>
-        <p>Not just an ordinary headphones. It's designed for meditation.</p>
-        <button>Learn more</button>
-      </section>
-
-      <section class="hero-image">
-        <img src="assets/images/calm-hero.png" alt="a man wearing calm headphones" />
-      </section>
+      <div class="container">
+        <!-- Dua kolom: teks di kiri, gambar di kanan -->
+        <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 id="playlist" aria-labelledby="listHeading">
+          <h2 id="listHeading" class="section-title">Daftar Lagu</h2>
+
+          <!-- Daftar filter, ditata berdampingan -->
+          <div
+            id="filterBar"
+            class="filter-bar"
+            role="group"
+            aria-label="Filter lagu berdasarkan author"
+          >
+            <button
+              class="filter-button filter-button--active"
+              type="button"
+              data-author="all"
+              aria-pressed="true"
+            >
+              Semua
+            </button>
+            <button
+              class="filter-button"
+              type="button"
+              data-author="Amir Firouzfard"
+              aria-pressed="false"
+            >
+              Amir Firouzfard
+            </button>
+            <button class="filter-button" type="button" data-author="Patrick A" aria-pressed="false">
+              Patrick A
+            </button>
+            <button class="filter-button" type="button" data-author="FASSound" aria-pressed="false">
+              FASSound
+            </button>
+          </div>
+
+          <!-- Daftar musik, ditata menjadi beberapa kolom -->
+          <div class="music-list">
+            <article class="music-item">
+              <img class="music-item__art" src="assets/images/cover.png" alt="" />
+              <div class="music-item__body">
+                <h3 class="music-item__title">Coverless Book</h3>
+                <p class="music-item__author">Amir Firouzfard</p>
+              </div>
+            </article>
+
+            <article class="music-item">
+              <img class="music-item__art" src="assets/images/cover.png" alt="" />
+              <div class="music-item__body">
+                <h3 class="music-item__title">Lofi Orchestra</h3>
+                <p class="music-item__author">Patrick A</p>
+              </div>
+            </article>
+
+            <article class="music-item">
+              <img class="music-item__art" src="assets/images/cover.png" alt="" />
+              <div class="music-item__body">
+                <h3 class="music-item__title">For a Dream</h3>
+                <p class="music-item__author">Patrick A</p>
+              </div>
+            </article>
+
+            <article class="music-item">
+              <img class="music-item__art" src="assets/images/cover.png" alt="" />
+              <div class="music-item__body">
+                <h3 class="music-item__title">Good Night</h3>
+                <p class="music-item__author">FASSound</p>
+              </div>
+            </article>
+
+            <article class="music-item">
+              <img class="music-item__art" src="assets/images/cover.png" alt="" />
+              <div class="music-item__body">
+                <h3 class="music-item__title">Summer Rain</h3>
+                <p class="music-item__author">Patrick A</p>
+              </div>
+            </article>
+
+            <article class="music-item">
+              <img class="music-item__art" src="assets/images/cover.png" alt="" />
+              <div class="music-item__body">
+                <h3 class="music-item__title">Lofi Study</h3>
+                <p class="music-item__author">FASSound</p>
+              </div>
+            </article>
+          </div>
+        </section>
+      </div>
     </main>
+
+    <footer class="site-footer">
+      <div class="container">
+        <p>&copy; Copyright 2026</p>
+      </div>
+    </footer>
   </body>
 </html>
diff --git a/starter/assets/images/calm-hero.png b/starter/assets/images/calm-hero.png
deleted file mode 100644
index 967e7e7..0000000
Binary files a/starter/assets/images/calm-hero.png and /dev/null differ
diff --git a/starter/assets/images/cover.png b/starter/assets/images/cover.png
new file mode 100644
index 0000000..974522a
Binary files /dev/null and b/starter/assets/images/cover.png differ
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
new file mode 100644
index 0000000..88fbc9d
--- /dev/null
+++ b/starter/assets/scripts/script.js
@@ -0,0 +1,2 @@
+// TODO: Buka dan tutup drawer saat tombol #drawerButton diklik,
+// sekaligus memperbarui aria-expanded dan aria-label pada tombol tersebut.
diff --git a/starter/assets/styles/style.css b/starter/assets/styles/style.css
new file mode 100644
index 0000000..4abc7d1
--- /dev/null
+++ b/starter/assets/styles/style.css
@@ -0,0 +1,149 @@
+:root {
+  --color-text: #1a1a1a;
+  --color-muted: #6b7280;
+  --color-line: #e5e7eb;
+  --color-surface: #ffffff;
+  --color-accent: #1a1a1a;
+
+  --radius: 8px;
+}
+
+* {
+  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;
+}
+
+img {
+  display: block;
+  max-width: 100%;
+}
+
+a {
+  color: inherit;
+}
+
+:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+.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;
+}
+
+.brand img {
+  height: 28px;
+  width: auto;
+}
+
+.navlist {
+  display: flex;
+  gap: 24px;
+  list-style: none;
+}
+
+.navlist a {
+  font-size: 0.9rem;
+  color: var(--color-muted);
+  text-decoration: none;
+}
+
+.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;
+}
+
+/* TODO: Tata section intro menjadi dua kolom dengan flexbox. */
+
+/* TODO: Tata daftar filter agar berbaris ke samping dengan flexbox. */
+
+/* TODO: Tata daftar musik menjadi beberapa kolom dengan grid. */
+
+/* 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;
+  }
+
+  .navlist {
+    position: fixed;
+    inset-block: 0 auto;
+    inset-inline-start: 0;
+
+    flex-direction: column;
+    gap: 0;
+    width: 220px;
+    min-height: 100vh;
+    padding: 24px;
+
+    background-color: var(--color-surface);
+    border-inline-end: 1px solid var(--color-line);
+
+    /* Drawer harus berada di atas konten halaman */
+    z-index: 60;
+
+    transform: translateX(-100%);
+    transition: transform 200ms ease-in-out, visibility 200ms;
+
+    /* Mengeluarkan link dari urutan Tab saat drawer tertutup. */
+    visibility: hidden;
+  }
+
+  .navlist a {
+    display: block;
+    padding-block: 12px;
+  }
+
+  .navlist.open {
+    transform: translateX(0);
+    visibility: visible;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .navlist {
+    transition: none;
+  }
+}
diff --git a/starter/index.html b/starter/index.html
new file mode 100644
index 0000000..5e28b6f
--- /dev/null
+++ b/starter/index.html
@@ -0,0 +1,88 @@
+<!DOCTYPE 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 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@400;500;600&display=swap"
+      rel="stylesheet"
+    />
+
+    <!-- Own Scripts -->
+    <script defer src="assets/scripts/script.js"></script>
+  </head>
+  <body>
+    <header class="site-header">
+      <div class="container header-content">
+        <div class="brand">
+          <a href="/">
+            <img src="assets/images/calm-logo.png" alt="Calm Playlist" />
+          </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="container">
+        <!--
+          TODO: Buat section intro yang terdiri dari dua kolom.
+          Kolom teks berisi heading dan paragraf.
+          Kolom gambar berisi assets/images/headphone.png
+        -->
+
+        <!--
+          TODO: Buat daftar filter dengan id "filterBar" berisi tombol
+          Semua, Amir Firouzfard, Patrick A, dan FASSound.
+          Tandai tombol Semua sebagai tombol yang aktif.
+        -->
+
+        <!--
+          TODO: Buat daftar musik berisi enam kartu.
+          Setiap kartu terdiri dari gambar, judul lagu, dan nama author.
+
+          Gunakan assets/images/cover.png sebagai gambar untuk semua kartu.
+        -->
+      </div>
+    </main>
+
+    <footer class="site-footer">
+      <div class="container">
+        <p>&copy; Copyright 2026</p>
+      </div>
+    </footer>
+  </body>
+</html>