diff --git a/index.html b/index.html
index 1b1cc0b..25192c9 100644
--- a/index.html
+++ b/index.html
@@ -1,226 +1,889 @@
 <!doctype html>
 <html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Monochrome Music</title>
-        <meta name="theme-color" content="#000000" />
-        <meta name="mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <base href="/" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
-        <meta name="apple-mobile-web-app-title" content="Monochrome" />
-        <meta name="description" content="A minimalist music streaming application" />
-        <link rel="apple-touch-icon" href="/assets/logo.svg" />
-        <link rel="manifest" href="/manifest.json" />
-        <link rel="icon" href="/assets/logo.svg" type="image/svg+xml" />
-        <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;700;800&display=swap"
-            rel="stylesheet"
-        />
-        <link rel="stylesheet" href="/styles.css" />
-    </head>
 
-    <body>
-        <audio id="audio-player" crossorigin="anonymous"></audio>
-        <div id="context-menu">
-            <ul>
-                <li data-action="shuffle-play-card" data-type-filter="album,playlist,mix,user-playlist">
-                    Shuffle play
-                </li>
-                <li data-action="start-mix" data-type-filter="album,track">Start mix</li>
-                <li data-action="play-next">Play next</li>
-                <li data-action="add-to-queue">Add to queue</li>
-                <li
-                    data-action="toggle-like"
-                    data-label-track="Like"
-                    data-label-album="Save album to library"
-                    data-label-playlist="Save playlist to library"
-                >
-                    Like
-                </li>
-                <li data-action="add-to-playlist" data-type-filter="track">Add to playlist</li>
-                <li data-action="go-to-artist" data-type-filter="track,album">Go to artist</li>
-                <li data-action="go-to-album" data-type-filter="track">Go to album</li>
-                <li data-action="copy-link">Copy link</li>
-                <li data-action="track-info" data-type-filter="track">Track Info</li>
-                <li data-action="open-original-url" data-type-filter="track">Open Original URL</li>
-                <li data-action="download">Download</li>
-            </ul>
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Monochrome Music</title>
+    <meta name="theme-color" content="#000000" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <base href="/" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <meta name="apple-mobile-web-app-title" content="Monochrome" />
+    <meta name="description" content="A minimalist music streaming application" />
+    <link rel="apple-touch-icon" href="/assets/logo.svg" />
+    <link rel="manifest" href="/manifest.json" />
+    <link rel="icon" href="/assets/logo.svg" type="image/svg+xml" />
+    <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;700;800&display=swap"
+        rel="stylesheet" />
+    <link rel="stylesheet" href="/styles.css" />
+</head>
+
+<body>
+    <audio id="audio-player" crossorigin="anonymous"></audio>
+    <div id="context-menu">
+        <ul>
+            <li data-action="shuffle-play-card" data-type-filter="album,playlist,mix,user-playlist">
+                Shuffle play
+            </li>
+            <li data-action="start-mix" data-type-filter="album,track">Start mix</li>
+            <li data-action="play-next">Play next</li>
+            <li data-action="add-to-queue">Add to queue</li>
+            <li data-action="toggle-like" data-label-track="Like" data-label-album="Save album to library"
+                data-label-playlist="Save playlist to library">
+                Like
+            </li>
+            <li data-action="add-to-playlist" data-type-filter="track">Add to playlist</li>
+            <li data-action="go-to-artist" data-type-filter="track,album">Go to artist</li>
+            <li data-action="go-to-album" data-type-filter="track">Go to album</li>
+            <li data-action="copy-link">Copy link</li>
+            <li data-action="track-info" data-type-filter="track">Track Info</li>
+            <li data-action="open-original-url" data-type-filter="track">Open Original URL</li>
+            <li data-action="download">Download</li>
+        </ul>
+    </div>
+
+    <div id="sort-menu" style="display: none">
+        <ul>
+            <li data-sort="added-newest">Date Added (Newest)</li>
+            <li data-sort="added-oldest">Date Added (Oldest)</li>
+            <li data-sort="title">Title (A-Z)</li>
+            <li data-sort="artist">Artist (A-Z)</li>
+        </ul>
+    </div>
+
+    <div id="side-panel" class="side-panel">
+        <div class="panel-header">
+            <h3 id="side-panel-title">Panel</h3>
+            <div class="panel-controls" id="side-panel-controls">
+                <!-- Controls injected dynamically -->
+            </div>
         </div>
-
-        <div id="sort-menu" style="display: none">
-            <ul>
-                <li data-sort="added-newest">Date Added (Newest)</li>
-                <li data-sort="added-oldest">Date Added (Oldest)</li>
-                <li data-sort="title">Title (A-Z)</li>
-                <li data-sort="artist">Artist (A-Z)</li>
-            </ul>
+        <div id="side-panel-content" class="panel-content">
+            <!-- Content injected dynamically -->
         </div>
+    </div>
 
-        <div id="side-panel" class="side-panel">
-            <div class="panel-header">
-                <h3 id="side-panel-title">Panel</h3>
-                <div class="panel-controls" id="side-panel-controls">
-                    <!-- Controls injected dynamically -->
+    <div id="fullscreen-cover-overlay" style="display: none">
+        <div class="fullscreen-cover-content">
+            <canvas id="visualizer-canvas"></canvas>
+            <button id="close-fullscreen-cover-btn" title="Close">&times;</button>
+            <button id="toggle-fullscreen-lyrics-btn" class="fullscreen-lyrics-toggle" title="Toggle Lyrics">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" />
+                    <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
+                    <line x1="12" y1="19" x2="12" y2="22" />
+                    <line x1="8" y1="22" x2="16" y2="22" />
+                </svg>
+            </button>
+            <div class="fullscreen-main-view">
+                <img id="fullscreen-cover-image"
+                    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                    alt="Album Cover" />
+                <div class="fullscreen-track-info">
+                    <h2 id="fullscreen-track-title"></h2>
+                    <h3 id="fullscreen-track-artist"></h3>
+                    <div class="fullscreen-actions">
+                        <button id="fs-like-btn" class="btn-icon like-btn" title="Like">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                stroke-linejoin="round" class="heart-icon">
+                                <path
+                                    d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z">
+                                </path>
+                            </svg>
+                        </button>
+                        <button id="fs-add-playlist-btn" class="btn-icon" title="Add to Playlist">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                stroke-linejoin="round">
+                                <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+                                <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+                            </svg>
+                        </button>
+                        <button id="fs-download-btn" class="btn-icon" title="Download">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                stroke-linejoin="round">
+                                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                                <polyline points="7 10 12 15 17 10"></polyline>
+                                <line x1="12" y1="15" x2="12" y2="3"></line>
+                            </svg>
+                        </button>
+                        <button id="fs-cast-btn" class="btn-icon" title="Cast">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                stroke-linejoin="round">
+                                <path d="M2 8V6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6"></path>
+                                <path d="M2 12a9 9 0 0 1 9 9"></path>
+                                <path d="M2 17a5 5 0 0 1 5 5"></path>
+                                <path d="M2 22h.01"></path>
+                            </svg>
+                        </button>
+                        <button id="fs-queue-btn" class="btn-icon" title="Queue">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                stroke-linejoin="round">
+                                <path d="M3 5h.01" />
+                                <path d="M3 12h.01" />
+                                <path d="M3 19h.01" />
+                                <path d="M8 5h13" />
+                                <path d="M8 12h13" />
+                                <path d="M8 19h13" />
+                            </svg>
+                        </button>
+                    </div>
+                    <div id="fullscreen-next-track" style="display: none">
+                        <span class="label">Up Next: </span>
+                        <span class="value"></span>
+                    </div>
                 </div>
-            </div>
-            <div id="side-panel-content" class="panel-content">
-                <!-- Content injected dynamically -->
-            </div>
-        </div>
-
-        <div id="fullscreen-cover-overlay" style="display: none">
-            <div class="fullscreen-cover-content">
-                <canvas id="visualizer-canvas"></canvas>
-                <button id="close-fullscreen-cover-btn" title="Close">&times;</button>
-                <button id="toggle-fullscreen-lyrics-btn" class="fullscreen-lyrics-toggle" title="Toggle Lyrics">
-                    <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="24"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                    >
-                        <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" />
-                        <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
-                        <line x1="12" y1="19" x2="12" y2="22" />
-                        <line x1="8" y1="22" x2="16" y2="22" />
-                    </svg>
-                </button>
-                <div class="fullscreen-main-view">
-                    <img
-                        id="fullscreen-cover-image"
-                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
-                        alt="Album Cover"
-                    />
-                    <div class="fullscreen-track-info">
-                        <h2 id="fullscreen-track-title"></h2>
-                        <h3 id="fullscreen-track-artist"></h3>
-                        <div class="fullscreen-actions">
-                            <button id="fs-like-btn" class="btn-icon like-btn" title="Like">
-                                <svg
-                                    xmlns="http://www.w3.org/2000/svg"
-                                    width="24"
-                                    height="24"
-                                    viewBox="0 0 24 24"
-                                    fill="none"
-                                    stroke="currentColor"
-                                    stroke-width="2"
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round"
-                                    class="heart-icon"
-                                >
-                                    <path
-                                        d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
-                                    ></path>
-                                </svg>
-                            </button>
-                            <button id="fs-add-playlist-btn" class="btn-icon" title="Add to Playlist">
-                                <svg
-                                    xmlns="http://www.w3.org/2000/svg"
-                                    width="24"
-                                    height="24"
-                                    viewBox="0 0 24 24"
-                                    fill="none"
-                                    stroke="currentColor"
-                                    stroke-width="2"
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round"
-                                >
-                                    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
-                                    <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
-                                </svg>
-                            </button>
-                            <button id="fs-download-btn" class="btn-icon" title="Download">
-                                <svg
-                                    xmlns="http://www.w3.org/2000/svg"
-                                    width="24"
-                                    height="24"
-                                    viewBox="0 0 24 24"
-                                    fill="none"
-                                    stroke="currentColor"
-                                    stroke-width="2"
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round"
-                                >
-                                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
-                                    <polyline points="7 10 12 15 17 10"></polyline>
-                                    <line x1="12" y1="15" x2="12" y2="3"></line>
-                                </svg>
-                            </button>
-                            <button id="fs-cast-btn" class="btn-icon" title="Cast">
-                                <svg
-                                    xmlns="http://www.w3.org/2000/svg"
-                                    width="24"
-                                    height="24"
-                                    viewBox="0 0 24 24"
-                                    fill="none"
-                                    stroke="currentColor"
-                                    stroke-width="2"
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round"
-                                >
-                                    <path d="M2 8V6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6"></path>
-                                    <path d="M2 12a9 9 0 0 1 9 9"></path>
-                                    <path d="M2 17a5 5 0 0 1 5 5"></path>
-                                    <path d="M2 22h.01"></path>
-                                </svg>
-                            </button>
-                            <button id="fs-queue-btn" class="btn-icon" title="Queue">
-                                <svg
-                                    xmlns="http://www.w3.org/2000/svg"
-                                    width="24"
-                                    height="24"
-                                    viewBox="0 0 24 24"
-                                    fill="none"
-                                    stroke="currentColor"
-                                    stroke-width="2"
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round"
-                                >
-                                    <path d="M3 5h.01" />
-                                    <path d="M3 12h.01" />
-                                    <path d="M3 19h.01" />
-                                    <path d="M8 5h13" />
-                                    <path d="M8 12h13" />
-                                    <path d="M8 19h13" />
-                                </svg>
-                            </button>
+                <div class="fullscreen-controls">
+                    <div class="fullscreen-progress-container">
+                        <span id="fs-current-time">0:00</span>
+                        <div id="fs-progress-bar" class="progress-bar">
+                            <div id="fs-progress-fill" class="progress-fill"></div>
                         </div>
-                        <div id="fullscreen-next-track" style="display: none">
-                            <span class="label">Up Next: </span>
-                            <span class="value"></span>
+                        <span id="fs-total-duration">0:00</span>
+                    </div>
+                    <div class="fullscreen-buttons">
+                        <button id="fs-shuffle-btn" title="Shuffle">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                stroke-linejoin="round" class="lucide lucide-shuffle-icon lucide-shuffle">
+                                <path d="m18 14 4 4-4 4" />
+                                <path d="m18 2 4 4-4 4" />
+                                <path d="M2 18h1.973a4 4 0 0 0 3.3-1.7l5.454-8.6a4 4 0 0 1 3.3-1.7H22" />
+                                <path d="M2 6h1.972a4 4 0 0 1 3.6 2.2" />
+                                <path d="M22 18h-6.041a4 4 0 0 1-3.3-1.8l-.359-.45" />
+                            </svg>
+                        </button>
+                        <button id="fs-prev-btn" title="Previous">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                stroke-linejoin="round"
+                                class="lucide lucide-arrow-left-to-line-icon lucide-arrow-left-to-line">
+                                <path d="M3 19V5" />
+                                <path d="m13 6-6 6 6 6" />
+                                <path d="M7 12h14" />
+                            </svg>
+                        </button>
+                        <button id="fs-play-pause-btn" class="play-pause-btn" title="Play">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"
+                                fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                stroke-linejoin="round">
+                                <polygon points="5 3 19 12 5 21 5 3"></polygon>
+                            </svg>
+                        </button>
+                        <button id="fs-next-btn" title="Next">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                stroke-linejoin="round"
+                                class="lucide lucide-arrow-right-to-line-icon lucide-arrow-right-to-line">
+                                <path d="M17 12H3" />
+                                <path d="m11 18 6-6-6-6" />
+                                <path d="M21 5v14" />
+                            </svg>
+                        </button>
+                        <button id="fs-repeat-btn" title="Repeat">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                stroke-linejoin="round" class="lucide lucide-repeat-icon lucide-repeat">
+                                <path d="m17 2 4 4-4 4" />
+                                <path d="M3 11v-1a4 4 0 0 1 4-4h14" />
+                                <path d="m7 22-4-4 4-4" />
+                                <path d="M21 13v1a4 4 0 0 1-4 4H3" />
+                            </svg>
+                        </button>
+                    </div>
+                    <div class="fullscreen-volume-container">
+                        <button id="fs-volume-btn" class="fs-volume-btn" title="Mute">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                stroke-linejoin="round">
+                                <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
+                                <path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path>
+                            </svg>
+                        </button>
+                        <div id="fs-volume-bar" class="fs-volume-bar">
+                            <div id="fs-volume-fill" class="fs-volume-fill"></div>
                         </div>
                     </div>
-                    <div class="fullscreen-controls">
-                        <div class="fullscreen-progress-container">
-                            <span id="fs-current-time">0:00</span>
-                            <div id="fs-progress-bar" class="progress-bar">
-                                <div id="fs-progress-fill" class="progress-fill"></div>
-                            </div>
-                            <span id="fs-total-duration">0:00</span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div id="playlist-modal" class="modal">
+        <div class="modal-overlay"></div>
+        <div class="modal-content">
+            <h3 id="playlist-modal-title">Create Playlist</h3>
+            <input type="text" id="playlist-name-input" class="template-input" placeholder="Playlist name"
+                style="margin: 1rem 0" />
+            <input type="url" id="playlist-cover-input" class="template-input" placeholder="Cover image URL (optional)"
+                style="margin: 0.5rem 0" />
+            <p style="font-size: 0.8rem; margin: 0">
+                Upload your cover to
+                <a href="https://catbox.moe" style="text-decoration: underline">catbox.moe</a> then paste the link
+                here. (or any other service that allows directly linking to a file, but we recommend catbox due to
+                their long-term storage of your files)
+            </p>
+            <br />
+            <div id="csv-import-section" style="
+                        display: none;
+                        margin: 1rem 0;
+                        padding: 1rem;
+                        border: 1px solid var(--border);
+                        border-radius: var(--radius);
+                        background: var(--background-secondary);
+                    ">
+                <p style="margin-bottom: 0.5rem; font-size: 0.9rem">Import from CSV</p>
+                <p style="font-size: 0.8rem; margin: 0">
+                    Spotify and Apple Music are supported. (Apple Music is prone to errors.) Please use
+                    <a href="https://exportify.app/" style="text-decoration: underline">Exportify (Spotify)</a> or
+                    <a href="https://www.tunemymusic.com/transfer/spotify-to-apple-music"
+                        style="text-decoration: underline">TuneMyMusic (Apple Music)</a>
+                    to export your playlist into a .csv. Make sure its headers are in English.
+                </p>
+                <br />
+                <input type="file" id="csv-file-input" class="btn-secondary" accept=".csv"
+                    style="width: 100%; margin-bottom: 0.5rem" />
+                <p style="font-size: 0.8rem; margin: 0">
+                    <b>Warning:</b> This feature isn't perfect and is prone to errors! Please check your playlist
+                    after to remove any unwanted songs that were added by the system.
+                </p>
+            </div>
+
+            <div class="setting-item" style="margin-bottom: 1rem; padding: 0; border: none; background: transparent">
+                <div class="info">
+                    <span class="label">Public Playlist</span>
+                    <span class="description">Visible to anyone with the link.</span>
+                </div>
+                <label class="toggle-switch">
+                    <input type="checkbox" id="playlist-public-toggle" />
+                    <span class="slider"></span>
+                </label>
+            </div>
+
+            <div class="modal-actions">
+                <button id="playlist-share-btn" class="btn-secondary" style="display: none">Share</button>
+                <button id="playlist-modal-cancel" class="btn-secondary">Cancel</button>
+                <button id="playlist-modal-save" class="btn-primary">Save</button>
+            </div>
+        </div>
+    </div>
+
+    <div id="folder-modal" class="modal">
+        <div class="modal-overlay"></div>
+        <div class="modal-content">
+            <h3 id="folder-modal-title">Create Folder</h3>
+            <input type="text" id="folder-name-input" class="template-input" placeholder="Folder name"
+                style="margin: 1rem 0" />
+            <input type="url" id="folder-cover-input" class="template-input" placeholder="Icon URL (optional)"
+                style="margin: 0.5rem 0" />
+            <div class="modal-actions">
+                <button id="folder-modal-cancel" class="btn-secondary">Cancel</button>
+                <button id="folder-modal-save" class="btn-primary">Save</button>
+            </div>
+        </div>
+    </div>
+
+    <div id="playlist-select-modal" class="modal">
+        <div class="modal-overlay"></div>
+        <div class="modal-content">
+            <h3>Add to Playlist</h3>
+            <div id="playlist-select-list" class="modal-list">
+                <!-- Options will be injected here -->
+            </div>
+            <div class="modal-actions">
+                <button id="playlist-select-cancel" class="btn-secondary">Cancel</button>
+            </div>
+        </div>
+    </div>
+
+    <div id="shortcuts-modal" class="modal">
+        <div class="modal-overlay"></div>
+        <div class="modal-content medium">
+            <div class="shortcuts-header">
+                <h3>Keyboard Shortcuts</h3>
+                <button class="close-shortcuts">&times;</button>
+            </div>
+            <div class="shortcuts-content">
+                <div class="shortcut-item"><kbd>Space</kbd><span>Play / Pause</span></div>
+                <div class="shortcut-item"><kbd>→</kbd><span>Seek forward 10s</span></div>
+                <div class="shortcut-item"><kbd>←</kbd><span>Seek backward 10s</span></div>
+                <div class="shortcut-item"><kbd>Shift</kbd> + <kbd>→</kbd><span>Next track</span></div>
+                <div class="shortcut-item"><kbd>Shift</kbd> + <kbd>←</kbd><span>Previous track</span></div>
+                <div class="shortcut-item"><kbd>↑</kbd><span>Volume up</span></div>
+                <div class="shortcut-item"><kbd>↓</kbd><span>Volume down</span></div>
+                <div class="shortcut-item"><kbd>M</kbd><span>Mute / Unmute</span></div>
+                <div class="shortcut-item"><kbd>S</kbd><span>Toggle shuffle</span></div>
+                <div class="shortcut-item"><kbd>R</kbd><span>Toggle repeat</span></div>
+                <div class="shortcut-item"><kbd>Q</kbd><span>Open queue</span></div>
+                <div class="shortcut-item"><kbd>L</kbd><span>Toggle lyrics</span></div>
+                <div class="shortcut-item"><kbd>/</kbd><span>Focus search</span></div>
+                <div class="shortcut-item"><kbd>Esc</kbd><span>Close modals</span></div>
+            </div>
+        </div>
+    </div>
+
+    <div id="missing-tracks-modal" class="modal">
+        <div class="modal-overlay"></div>
+        <div class="modal-content wide">
+            <div class="missing-tracks-header">
+                <h3>Note</h3>
+                <button class="close-missing-tracks">&times;</button>
+            </div>
+            <div class="missing-tracks-content">
+                <p>
+                    Unfortunately, some songs weren't able to be added. This could be an issue with our import
+                    system - try searching for the song and adding it. It could also be due to Monochrome not having
+                    the song :(
+                </p>
+                <div class="missing-tracks-list">
+                    <h4>Missing Tracks:</h4>
+                    <ul id="missing-tracks-list-ul"></ul>
+                </div>
+            </div>
+            <div class="missing-tracks-actions">
+                <button class="btn-secondary" id="close-missing-tracks-btn">OK</button>
+            </div>
+        </div>
+    </div>
+
+    <div id="sleep-timer-modal" class="modal">
+        <div class="modal-overlay"></div>
+        <div class="modal-content" style="max-width: 300px">
+            <h3 style="text-align: center; margin-bottom: 1.5rem">Sleep Timer</h3>
+            <div class="timer-options">
+                <button class="timer-option btn-secondary" data-minutes="5">5 minutes</button>
+                <button class="timer-option btn-secondary" data-minutes="15">15 minutes</button>
+                <button class="timer-option btn-secondary" data-minutes="30">30 minutes</button>
+                <button class="timer-option btn-secondary" data-minutes="60">1 hour</button>
+                <button class="timer-option btn-secondary" data-minutes="120">2 hours</button>
+                <div style="display: flex; gap: 0.5rem; margin-top: 0.5rem">
+                    <input type="number" id="custom-minutes" class="template-input" placeholder="Custom" min="1"
+                        max="480" />
+                    <button class="timer-option btn-primary" id="custom-timer-btn" style="padding: 0.5rem 1rem">
+                        Set
+                    </button>
+                </div>
+            </div>
+            <div class="modal-actions" style="justify-content: center">
+                <button id="cancel-sleep-timer" class="btn-secondary">Cancel</button>
+            </div>
+        </div>
+    </div>
+
+    <div id="discography-download-modal" class="modal">
+        <div class="modal-overlay"></div>
+        <div class="modal-content" style="max-width: 500px">
+            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem">
+                <h3 style="margin: 0">Download Discography</h3>
+                <button class="close-modal-btn" style="
+                            background: none;
+                            border: none;
+                            font-size: 24px;
+                            cursor: pointer;
+                            color: var(--muted-foreground);
+                        ">
+                    &times;
+                </button>
+            </div>
+            <p style="margin-bottom: 1rem; color: var(--muted-foreground)">
+                Select which releases to download for <span id="discography-artist-name"></span>:
+            </p>
+            <div style="display: flex; flex-direction: column; gap: 1rem">
+                <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer">
+                    <input type="checkbox" id="download-albums" checked />
+                    <span>Albums (<span id="albums-count">0</span>)</span>
+                </label>
+                <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer">
+                    <input type="checkbox" id="download-eps" />
+                    <span>EPs (<span id="eps-count">0</span>)</span>
+                </label>
+                <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer">
+                    <input type="checkbox" id="download-singles" />
+                    <span>Singles (<span id="singles-count">0</span>)</span>
+                </label>
+            </div>
+            <div class="modal-actions" style="margin-top: 1.5rem">
+                <button class="btn-secondary" id="cancel-discography-download">Cancel</button>
+                <button class="btn-primary" id="start-discography-download">Download</button>
+            </div>
+        </div>
+    </div>
+
+    <div id="custom-db-modal" class="modal">
+        <div class="modal-overlay"></div>
+        <div class="modal-content">
+            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem">
+                <h3 style="margin: 0">Custom Database/Auth</h3>
+                <button id="custom-db-reset" class="btn-secondary danger"
+                    style="padding: 0.4rem 0.8rem; font-size: 0.8rem">
+                    Reset to Defaults
+                </button>
+            </div>
+            <p style="font-size: 0.9rem; color: var(--muted-foreground); margin-bottom: 1rem">
+                Configure custom PocketBase and Firebase instances. Leave empty to use defaults.
+                <br />
+                A Guide To Set This Up Can Be Found
+                <a href="https://github.com/SamidyFR/monochrome/blob/main/self-hosted-database.md"
+                    style="text-decoration: underline">Here</a>.
+            </p>
+            <div style="margin-bottom: 1rem">
+                <label style="display: block; margin-bottom: 0.5rem; font-size: 0.9rem">PocketBase URL</label>
+                <input type="url" id="custom-pb-url" class="template-input" placeholder="https://monodb.samidy.com" />
+            </div>
+            <div style="margin-bottom: 1rem">
+                <label style="display: block; margin-bottom: 0.5rem; font-size: 0.9rem">Firebase Configuration
+                    (JSON)</label>
+                <textarea id="custom-firebase-config" class="template-input"
+                    style="height: 150px; font-family: monospace; font-size: 0.8rem; resize: vertical"
+                    placeholder="{'apiKey': '...', ...}"></textarea>
+            </div>
+            <div class="modal-actions">
+                <button id="custom-db-cancel" class="btn-secondary">Cancel</button>
+                <button id="custom-db-save" class="btn-primary">Save & Reload</button>
+            </div>
+        </div>
+    </div>
+
+    <div id="tracker-modal" class="modal tracker-modal">
+        <div class="modal-overlay"></div>
+        <div class="modal-content wide" style="max-height: 85vh; display: flex; flex-direction: column">
+            <header class="detail-header" style="margin-bottom: 1rem; padding-bottom: 0">
+                <img id="tracker-header-image"
+                    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                    class="detail-header-image" style="width: 140px; height: 140px; box-shadow: var(--shadow-md)"
+                    alt="" />
+                <div class="detail-header-info">
+                    <div class="type">Unreleased Project</div>
+                    <h1 id="tracker-header-title" class="title" style="font-size: 2rem"></h1>
+                    <div id="tracker-header-meta" class="meta"></div>
+                    <div class="detail-header-actions">
+                        <button class="btn-secondary" id="close-tracker-modal">Close</button>
+                    </div>
+                </div>
+            </header>
+            <div id="tracker-filters" style="padding: 0 2rem 1rem; display: flex; gap: 0.5rem; flex-wrap: wrap"></div>
+            <div id="tracker-tracklist" class="track-list" style="overflow-y: auto; flex: 1">
+                <div class="track-list-header">
+                    <span style="width: 40px; text-align: center">#</span>
+                    <span>Title</span>
+                    <span class="duration-header">Duration</span>
+                    <span style="display: flex; justify-content: flex-end; opacity: 0.8">Menu</span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div id="epilepsy-warning-modal" class="modal">
+        <div class="modal-overlay"></div>
+        <div class="modal-content">
+            <h3 style="color: #ef4444; display: flex; align-items: center; gap: 0.5rem">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" />
+                    <line x1="12" y1="9" x2="12" y2="13" />
+                    <line x1="12" y1="17" x2="12.01" y2="17" />
+                </svg>
+                Photosensitivity Warning
+            </h3>
+            <p style="margin: 1rem 0; line-height: 1.5">
+                The visualizer contains flashing lights and rapidly moving patterns that may trigger seizures for
+                people with photosensitive epilepsy.
+            </p>
+            <p style="margin-bottom: 1.5rem; font-size: 0.9rem; color: var(--muted-foreground)">
+                Viewer discretion is advised.
+            </p>
+            <div class="modal-actions" style="flex-direction: column; gap: 0.5rem">
+                <button id="epilepsy-accept-btn" class="btn-primary" style="width: 100%">
+                    Proceed & Don't Show Again
+                </button>
+                <button id="epilepsy-cancel-btn" class="btn-secondary" style="width: 100%">Cancel</button>
+            </div>
+        </div>
+    </div>
+
+    <div id="sidebar-overlay"></div>
+
+    <div id="csv-import-progress" class="csv-import-progress" style="display: none">
+        <div class="progress-header">
+            <h4>Importing Tracks from CSV</h4>
+            <p class="progress-warning">
+                This can take a while depending on your playlist size. Please be patient.
+            </p>
+        </div>
+        <div class="progress-content">
+            <div class="current-track">Preparing import...</div>
+            <div class="current-artist" style="font-size: 0.9em; color: var(--text-secondary); margin-bottom: 0.5rem">
+            </div>
+            <div class="progress-bar">
+                <div class="progress-fill" id="csv-progress-fill"></div>
+            </div>
+            <div class="progress-text">
+                <span id="csv-progress-current">0</span> / <span id="csv-progress-total">0</span> tracks processed
+            </div>
+        </div>
+    </div>
+
+    <div class="app-container">
+        <aside class="sidebar">
+            <div class="sidebar-content">
+                <div class="sidebar-logo">
+                    <svg class="app-logo" xmlns="http://www.w3.org/2000/svg" width="200" height="200"
+                        viewBox="14.75 14.75 70.5 70.5">
+                        <g fill="currentColor">
+                            <path
+                                d="M38.25 14.75H85.25V61.75H61.75V38.25H38.25ZM14.75 38.25H38.25V61.75H61.75V85.25H14.75Z" />
+                        </g>
+                    </svg>
+                    <span>Monochrome</span>
+                    <button id="sidebar-toggle" class="btn-icon desktop-only" style="margin-left: auto"
+                        title="Collapse Sidebar">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
+                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <path d="m15 18-6-6 6-6" />
+                        </svg>
+                    </button>
+                </div>
+                <nav class="sidebar-nav main">
+                    <ul>
+                        <li class="nav-item">
+                            <a href="/">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                    stroke-linejoin="round" class="lucide lucide-house-icon lucide-house">
+                                    <path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" />
+                                    <path
+                                        d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+                                </svg>
+                                <span>Home</span>
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="/library">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                    stroke-linejoin="round">
+                                    <path d="m16 6 4 14" />
+                                    <path d="M12 6v14" />
+                                    <path d="M8 8v12" />
+                                    <path d="M4 4v16" />
+                                </svg>
+                                <span>Library</span>
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="/recent">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                    stroke-linejoin="round">
+                                    <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
+                                    <path d="M3 3v5h5" />
+                                    <path d="M12 7v5l4 2" />
+                                </svg>
+                                <span>Recent</span>
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="/unreleased">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                    stroke-linejoin="round">
+                                    <rect x="3" y="3" width="7" height="7" />
+                                    <rect x="14" y="3" width="7" height="7" />
+                                    <rect x="14" y="14" width="7" height="7" />
+                                    <rect x="3" y="14" width="7" height="7" />
+                                </svg>
+                                <span>Unreleased</span>
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="/settings">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                    stroke-linejoin="round">
+                                    <path
+                                        d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" />
+                                    <circle cx="12" cy="12" r="3" />
+                                </svg>
+                                <span>Settings</span>
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="/account">
+                                <svg width="24" height="24" viewBox="0 0 24 24" id="Layer_1" data-name="Layer 1"
+                                    xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+                                    <g stroke-width="0"></g>
+                                    <g stroke-linecap="round" stroke-linejoin="round"></g>
+                                    <g>
+                                        <defs>
+                                            <style>
+                                                .cls-1 {
+                                                    fill: none;
+                                                    stroke: currentColor;
+                                                    stroke-miterlimit: 10;
+                                                    stroke-width: 1.9200000000000004;
+                                                }
+                                            </style>
+                                        </defs>
+                                        <circle class="cls-1" cx="12" cy="7.25" r="5.73"></circle>
+                                        <path class="cls-1"
+                                            d="M1.5,23.48l.37-2.05A10.3,10.3,0,0,1,12,13h0a10.3,10.3,0,0,1,10.13,8.45l.37,2.05">
+                                        </path>
+                                    </g>
+                                </svg>
+                                <span>Account</span>
+                            </a>
+                        </li>
+                    </ul>
+                </nav>
+                <nav class="sidebar-nav">
+                    <ul>
+                        <li class="nav-item">
+                            <a href="/about">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                    stroke-linejoin="round" class="lucide lucide-info-icon lucide-info">
+                                    <circle cx="12" cy="12" r="10" />
+                                    <path d="M12 16v-4" />
+                                    <path d="M12 8h.01" />
+                                </svg>
+                                <span>About</span>
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="/download">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                    stroke-linejoin="round">
+                                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                                    <polyline points="7 10 12 15 17 10" />
+                                    <line x1="12" x2="12" y1="15" y2="3" />
+                                </svg>
+                                <span>Download</span>
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="https://monochrome.samidy.com/discord" target="_blank">
+                                <svg width="64px" height="64px" viewBox="0 -28.5 256 256" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+                                    preserveAspectRatio="xMidYMid" fill="#000000">
+                                    <g stroke-width="0"></g>
+                                    <g stroke-linecap="round" stroke-linejoin="round"></g>
+                                    <g>
+                                        <g>
+                                            <path
+                                                d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z"
+                                                fill="#8E8E96" fill-rule="nonzero"></path>
+                                        </g>
+                                    </g>
+                                </svg>
+                                <span>Discord</span>
+                            </a>
+                        </li>
+                    </ul>
+                </nav>
+            </div>
+        </aside>
+
+        <main class="main-content">
+            <div id="page-background"></div>
+            <header class="main-header">
+                <div class="navigation-controls desktop-only">
+                    <button id="nav-back" class="nav-btn" title="Go Back">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <path d="m15 18-6-6 6-6" />
+                        </svg>
+                    </button>
+                    <button id="nav-forward" class="nav-btn" title="Go Forward">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <path d="m9 18 6-6-6-6" />
+                        </svg>
+                    </button>
+                </div>
+                <button class="hamburger-menu" id="hamburger-btn" title="Open navigation">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <line x1="3" y1="12" x2="21" y2="12"></line>
+                        <line x1="3" y1="6" x2="21" y2="6"></line>
+                        <line x1="3" y1="18" x2="21" y2="18"></line>
+                    </svg>
+                </button>
+                <form class="search-bar" id="search-form">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                        class="search-icon">
+                        <circle cx="11" cy="11" r="8"></circle>
+                        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+                    </svg>
+                    <input type="search" id="search-input" placeholder="Search for tracks, artists, albums..."
+                        autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />
+                    <div id="search-history" class="search-history" style="display: none"></div>
+                </form>
+            </header>
+
+            <div id="page-home" class="page">
+                <div id="home-welcome" style="display: none; text-align: center; padding: 4rem 2rem">
+                    <h2 style="margin-bottom: 1rem">Welcome to Monochrome</h2>
+                    <p style="color: var(--muted-foreground)">
+                        You haven't listened to anything yet. Search for your favorite songs to get started!
+                    </p>
+                </div>
+
+                <div id="home-content" style="display: none">
+                    <section class="content-section">
+                        <div style="
+                                    display: flex;
+                                    align-items: center;
+                                    justify-content: space-between;
+                                    margin-bottom: 1rem;
+                                ">
+                            <h2 class="section-title" style="margin-bottom: 0">Recommended Songs</h2>
+                            <button class="btn-secondary" id="refresh-songs-btn" title="Refresh"
+                                style="padding: 4px 8px">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
+                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                    stroke-linejoin="round">
+                                    <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" />
+                                    <path d="M21 3v5h-5" />
+                                </svg>
+                            </button>
                         </div>
-                        <div class="fullscreen-buttons">
-                            <button id="fs-shuffle-btn" title="Shuffle">
-                                <svg
-                                    xmlns="http://www.w3.org/2000/svg"
-                                    width="24"
-                                    height="24"
-                                    viewBox="0 0 24 24"
-                                    fill="none"
-                                    stroke="currentColor"
-                                    stroke-width="2"
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round"
-                                    class="lucide lucide-shuffle-icon lucide-shuffle"
-                                >
+                        <div class="track-list" id="home-recommended-songs"></div>
+                    </section>
+                    <section class="content-section">
+                        <div style="
+                                    display: flex;
+                                    align-items: center;
+                                    justify-content: space-between;
+                                    margin-bottom: 1rem;
+                                ">
+                            <h2 class="section-title" style="margin-bottom: 0">Recommended Albums</h2>
+                            <button class="btn-secondary" id="refresh-albums-btn" title="Refresh"
+                                style="padding: 4px 8px">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
+                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                    stroke-linejoin="round">
+                                    <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" />
+                                    <path d="M21 3v5h-5" />
+                                </svg>
+                            </button>
+                        </div>
+                        <div class="card-grid" id="home-recommended-albums"></div>
+                    </section>
+                    <section class="content-section">
+                        <div style="
+                                    display: flex;
+                                    align-items: center;
+                                    justify-content: space-between;
+                                    margin-bottom: 1rem;
+                                ">
+                            <h2 class="section-title" style="margin-bottom: 0">Recommended Artists</h2>
+                            <button class="btn-secondary" id="refresh-artists-btn" title="Refresh"
+                                style="padding: 4px 8px">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
+                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                    stroke-linejoin="round">
+                                    <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" />
+                                    <path d="M21 3v5h-5" />
+                                </svg>
+                            </button>
+                        </div>
+                        <div class="card-grid" id="home-recommended-artists"></div>
+                    </section>
+                    <section class="content-section">
+                        <div style="
+                                    display: flex;
+                                    align-items: center;
+                                    justify-content: space-between;
+                                    margin-bottom: 1rem;
+                                ">
+                            <h2 class="section-title" style="margin-bottom: 0">Jump Back In</h2>
+                            <button class="btn-secondary" id="clear-recent-btn" title="Clear History"
+                                style="padding: 4px 8px">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
+                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                    stroke-linejoin="round">
+                                    <path d="M3 6h18" />
+                                    <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
+                                    <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
+                                </svg>
+                            </button>
+                        </div>
+                        <div class="card-grid" id="home-recent-mixed"></div>
+                    </section>
+                </div>
+            </div>
+
+            <div id="page-search" class="page">
+                <h2 class="section-title" id="search-results-title">Search Results</h2>
+                <div class="search-tabs">
+                    <button class="search-tab active" data-tab="tracks">Tracks</button>
+                    <button class="search-tab" data-tab="albums">Albums</button>
+                    <button class="search-tab" data-tab="artists">Artists</button>
+                    <button class="search-tab" data-tab="playlists">Playlists</button>
+                </div>
+                <div class="search-tab-content active" id="search-tab-tracks">
+                    <div class="track-list" id="search-tracks-container"></div>
+                </div>
+                <div class="search-tab-content" id="search-tab-albums">
+                    <div class="card-grid" id="search-albums-container"></div>
+                </div>
+                <div class="search-tab-content" id="search-tab-artists">
+                    <div class="card-grid" id="search-artists-container"></div>
+                </div>
+                <div class="search-tab-content" id="search-tab-playlists">
+                    <div class="card-grid" id="search-playlists-container"></div>
+                </div>
+            </div>
+
+            <div id="page-library" class="page">
+                <section class="content-section">
+                    <div class="library-header">
+                        <h2>My Playlists</h2>
+                        <button id="create-playlist-btn" class="btn-primary" style="margin: 10px 0">
+                            Create Playlist
+                        </button>
+                        <button id="create-folder-btn" class="btn-secondary" style="margin: 10px 0 10px 10px">
+                            Create Folder
+                        </button>
+                    </div>
+                    <div class="card-grid" id="my-folders-container"></div>
+                    <div class="card-grid" id="my-playlists-container"></div>
+                </section>
+
+                <section class="content-section">
+                    <h2 class="section-title">Favorites</h2>
+                    <div class="search-tabs">
+                        <button class="search-tab active" data-tab="tracks">Liked Tracks</button>
+                        <button class="search-tab" data-tab="albums">Albums</button>
+                        <button class="search-tab" data-tab="artists">Artists</button>
+                        <button class="search-tab" data-tab="playlists">Playlists and Mixes</button>
+                        <button class="search-tab" data-tab="local">Local Files</button>
+                    </div>
+                    <div class="search-tab-content active" id="library-tab-tracks">
+                        <div style="display: flex; justify-content: flex-start; gap: 0.5rem; margin-bottom: 0.5rem">
+                            <button id="shuffle-liked-tracks-btn" class="btn-secondary" style="
+                                        display: none;
+                                        width: 32px;
+                                        height: 32px;
+                                        padding: 0;
+                                        align-items: center;
+                                        justify-content: center;
+                                        border-radius: 50%;
+                                    " title="Shuffle Liked Tracks">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
+                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                    stroke-linejoin="round">
                                     <path d="m18 14 4 4-4 4" />
                                     <path d="m18 2 4 4-4 4" />
                                     <path d="M2 18h1.973a4 4 0 0 0 3.3-1.7l5.454-8.6a4 4 0 0 1 3.3-1.7H22" />
@@ -228,1031 +891,7 @@
                                     <path d="M22 18h-6.041a4 4 0 0 1-3.3-1.8l-.359-.45" />
                                 </svg>
                             </button>
-                            <button id="fs-prev-btn" title="Previous">
-                                <svg
-                                    xmlns="http://www.w3.org/2000/svg"
-                                    width="24"
-                                    height="24"
-                                    viewBox="0 0 24 24"
-                                    fill="none"
-                                    stroke="currentColor"
-                                    stroke-width="2"
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round"
-                                    class="lucide lucide-arrow-left-to-line-icon lucide-arrow-left-to-line"
-                                >
-                                    <path d="M3 19V5" />
-                                    <path d="m13 6-6 6 6 6" />
-                                    <path d="M7 12h14" />
-                                </svg>
-                            </button>
-                            <button id="fs-play-pause-btn" class="play-pause-btn" title="Play">
-                                <svg
-                                    xmlns="http://www.w3.org/2000/svg"
-                                    width="32"
-                                    height="32"
-                                    viewBox="0 0 24 24"
-                                    fill="currentColor"
-                                    stroke="currentColor"
-                                    stroke-width="2"
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round"
-                                >
-                                    <polygon points="5 3 19 12 5 21 5 3"></polygon>
-                                </svg>
-                            </button>
-                            <button id="fs-next-btn" title="Next">
-                                <svg
-                                    xmlns="http://www.w3.org/2000/svg"
-                                    width="24"
-                                    height="24"
-                                    viewBox="0 0 24 24"
-                                    fill="none"
-                                    stroke="currentColor"
-                                    stroke-width="2"
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round"
-                                    class="lucide lucide-arrow-right-to-line-icon lucide-arrow-right-to-line"
-                                >
-                                    <path d="M17 12H3" />
-                                    <path d="m11 18 6-6-6-6" />
-                                    <path d="M21 5v14" />
-                                </svg>
-                            </button>
-                            <button id="fs-repeat-btn" title="Repeat">
-                                <svg
-                                    xmlns="http://www.w3.org/2000/svg"
-                                    width="24"
-                                    height="24"
-                                    viewBox="0 0 24 24"
-                                    fill="none"
-                                    stroke="currentColor"
-                                    stroke-width="2"
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round"
-                                    class="lucide lucide-repeat-icon lucide-repeat"
-                                >
-                                    <path d="m17 2 4 4-4 4" />
-                                    <path d="M3 11v-1a4 4 0 0 1 4-4h14" />
-                                    <path d="m7 22-4-4 4-4" />
-                                    <path d="M21 13v1a4 4 0 0 1-4 4H3" />
-                                </svg>
-                            </button>
-                        </div>
-                        <div class="fullscreen-volume-container">
-                            <button id="fs-volume-btn" class="fs-volume-btn" title="Mute">
-                                <svg
-                                    xmlns="http://www.w3.org/2000/svg"
-                                    width="24"
-                                    height="24"
-                                    viewBox="0 0 24 24"
-                                    fill="none"
-                                    stroke="currentColor"
-                                    stroke-width="2"
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round"
-                                >
-                                    <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
-                                    <path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path>
-                                </svg>
-                            </button>
-                            <div id="fs-volume-bar" class="fs-volume-bar">
-                                <div id="fs-volume-fill" class="fs-volume-fill"></div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div id="playlist-modal" class="modal">
-            <div class="modal-overlay"></div>
-            <div class="modal-content">
-                <h3 id="playlist-modal-title">Create Playlist</h3>
-                <input
-                    type="text"
-                    id="playlist-name-input"
-                    class="template-input"
-                    placeholder="Playlist name"
-                    style="margin: 1rem 0"
-                />
-                <input
-                    type="url"
-                    id="playlist-cover-input"
-                    class="template-input"
-                    placeholder="Cover image URL (optional)"
-                    style="margin: 0.5rem 0"
-                />
-                <p style="font-size: 0.8rem; margin: 0">
-                    Upload your cover to
-                    <a href="https://catbox.moe" style="text-decoration: underline">catbox.moe</a> then paste the link
-                    here. (or any other service that allows directly linking to a file, but we recommend catbox due to
-                    their long-term storage of your files)
-                </p>
-                <br />
-                <div
-                    id="csv-import-section"
-                    style="
-                        display: none;
-                        margin: 1rem 0;
-                        padding: 1rem;
-                        border: 1px solid var(--border);
-                        border-radius: var(--radius);
-                        background: var(--background-secondary);
-                    "
-                >
-                    <p style="margin-bottom: 0.5rem; font-size: 0.9rem">Import from CSV</p>
-                    <p style="font-size: 0.8rem; margin: 0">
-                        Spotify and Apple Music are supported. (Apple Music is prone to errors.) Please use
-                        <a href="https://exportify.app/" style="text-decoration: underline">Exportify (Spotify)</a> or
-                        <a
-                            href="https://www.tunemymusic.com/transfer/spotify-to-apple-music"
-                            style="text-decoration: underline"
-                            >TuneMyMusic (Apple Music)</a
-                        >
-                        to export your playlist into a .csv. Make sure its headers are in English.
-                    </p>
-                    <br />
-                    <input
-                        type="file"
-                        id="csv-file-input"
-                        class="btn-secondary"
-                        accept=".csv"
-                        style="width: 100%; margin-bottom: 0.5rem"
-                    />
-                    <p style="font-size: 0.8rem; margin: 0">
-                        <b>Warning:</b> This feature isn't perfect and is prone to errors! Please check your playlist
-                        after to remove any unwanted songs that were added by the system.
-                    </p>
-                </div>
-
-                <div
-                    class="setting-item"
-                    style="margin-bottom: 1rem; padding: 0; border: none; background: transparent"
-                >
-                    <div class="info">
-                        <span class="label">Public Playlist</span>
-                        <span class="description">Visible to anyone with the link.</span>
-                    </div>
-                    <label class="toggle-switch">
-                        <input type="checkbox" id="playlist-public-toggle" />
-                        <span class="slider"></span>
-                    </label>
-                </div>
-
-                <div class="modal-actions">
-                    <button id="playlist-share-btn" class="btn-secondary" style="display: none">Share</button>
-                    <button id="playlist-modal-cancel" class="btn-secondary">Cancel</button>
-                    <button id="playlist-modal-save" class="btn-primary">Save</button>
-                </div>
-            </div>
-        </div>
-
-        <div id="folder-modal" class="modal">
-            <div class="modal-overlay"></div>
-            <div class="modal-content">
-                <h3 id="folder-modal-title">Create Folder</h3>
-                <input
-                    type="text"
-                    id="folder-name-input"
-                    class="template-input"
-                    placeholder="Folder name"
-                    style="margin: 1rem 0"
-                />
-                <input
-                    type="url"
-                    id="folder-cover-input"
-                    class="template-input"
-                    placeholder="Icon URL (optional)"
-                    style="margin: 0.5rem 0"
-                />
-                <div class="modal-actions">
-                    <button id="folder-modal-cancel" class="btn-secondary">Cancel</button>
-                    <button id="folder-modal-save" class="btn-primary">Save</button>
-                </div>
-            </div>
-        </div>
-
-        <div id="playlist-select-modal" class="modal">
-            <div class="modal-overlay"></div>
-            <div class="modal-content">
-                <h3>Add to Playlist</h3>
-                <div id="playlist-select-list" class="modal-list">
-                    <!-- Options will be injected here -->
-                </div>
-                <div class="modal-actions">
-                    <button id="playlist-select-cancel" class="btn-secondary">Cancel</button>
-                </div>
-            </div>
-        </div>
-
-        <div id="shortcuts-modal" class="modal">
-            <div class="modal-overlay"></div>
-            <div class="modal-content medium">
-                <div class="shortcuts-header">
-                    <h3>Keyboard Shortcuts</h3>
-                    <button class="close-shortcuts">&times;</button>
-                </div>
-                <div class="shortcuts-content">
-                    <div class="shortcut-item"><kbd>Space</kbd><span>Play / Pause</span></div>
-                    <div class="shortcut-item"><kbd>→</kbd><span>Seek forward 10s</span></div>
-                    <div class="shortcut-item"><kbd>←</kbd><span>Seek backward 10s</span></div>
-                    <div class="shortcut-item"><kbd>Shift</kbd> + <kbd>→</kbd><span>Next track</span></div>
-                    <div class="shortcut-item"><kbd>Shift</kbd> + <kbd>←</kbd><span>Previous track</span></div>
-                    <div class="shortcut-item"><kbd>↑</kbd><span>Volume up</span></div>
-                    <div class="shortcut-item"><kbd>↓</kbd><span>Volume down</span></div>
-                    <div class="shortcut-item"><kbd>M</kbd><span>Mute / Unmute</span></div>
-                    <div class="shortcut-item"><kbd>S</kbd><span>Toggle shuffle</span></div>
-                    <div class="shortcut-item"><kbd>R</kbd><span>Toggle repeat</span></div>
-                    <div class="shortcut-item"><kbd>Q</kbd><span>Open queue</span></div>
-                    <div class="shortcut-item"><kbd>L</kbd><span>Toggle lyrics</span></div>
-                    <div class="shortcut-item"><kbd>/</kbd><span>Focus search</span></div>
-                    <div class="shortcut-item"><kbd>Esc</kbd><span>Close modals</span></div>
-                </div>
-            </div>
-        </div>
-
-        <div id="missing-tracks-modal" class="modal">
-            <div class="modal-overlay"></div>
-            <div class="modal-content wide">
-                <div class="missing-tracks-header">
-                    <h3>Note</h3>
-                    <button class="close-missing-tracks">&times;</button>
-                </div>
-                <div class="missing-tracks-content">
-                    <p>
-                        Unfortunately, some songs weren't able to be added. This could be an issue with our import
-                        system - try searching for the song and adding it. It could also be due to Monochrome not having
-                        the song :(
-                    </p>
-                    <div class="missing-tracks-list">
-                        <h4>Missing Tracks:</h4>
-                        <ul id="missing-tracks-list-ul"></ul>
-                    </div>
-                </div>
-                <div class="missing-tracks-actions">
-                    <button class="btn-secondary" id="close-missing-tracks-btn">OK</button>
-                </div>
-            </div>
-        </div>
-
-        <div id="sleep-timer-modal" class="modal">
-            <div class="modal-overlay"></div>
-            <div class="modal-content" style="max-width: 300px">
-                <h3 style="text-align: center; margin-bottom: 1.5rem">Sleep Timer</h3>
-                <div class="timer-options">
-                    <button class="timer-option btn-secondary" data-minutes="5">5 minutes</button>
-                    <button class="timer-option btn-secondary" data-minutes="15">15 minutes</button>
-                    <button class="timer-option btn-secondary" data-minutes="30">30 minutes</button>
-                    <button class="timer-option btn-secondary" data-minutes="60">1 hour</button>
-                    <button class="timer-option btn-secondary" data-minutes="120">2 hours</button>
-                    <div style="display: flex; gap: 0.5rem; margin-top: 0.5rem">
-                        <input
-                            type="number"
-                            id="custom-minutes"
-                            class="template-input"
-                            placeholder="Custom"
-                            min="1"
-                            max="480"
-                        />
-                        <button class="timer-option btn-primary" id="custom-timer-btn" style="padding: 0.5rem 1rem">
-                            Set
-                        </button>
-                    </div>
-                </div>
-                <div class="modal-actions" style="justify-content: center">
-                    <button id="cancel-sleep-timer" class="btn-secondary">Cancel</button>
-                </div>
-            </div>
-        </div>
-
-        <div id="discography-download-modal" class="modal">
-            <div class="modal-overlay"></div>
-            <div class="modal-content" style="max-width: 500px">
-                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem">
-                    <h3 style="margin: 0">Download Discography</h3>
-                    <button
-                        class="close-modal-btn"
-                        style="
-                            background: none;
-                            border: none;
-                            font-size: 24px;
-                            cursor: pointer;
-                            color: var(--muted-foreground);
-                        "
-                    >
-                        &times;
-                    </button>
-                </div>
-                <p style="margin-bottom: 1rem; color: var(--muted-foreground)">
-                    Select which releases to download for <span id="discography-artist-name"></span>:
-                </p>
-                <div style="display: flex; flex-direction: column; gap: 1rem">
-                    <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer">
-                        <input type="checkbox" id="download-albums" checked />
-                        <span>Albums (<span id="albums-count">0</span>)</span>
-                    </label>
-                    <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer">
-                        <input type="checkbox" id="download-eps" />
-                        <span>EPs (<span id="eps-count">0</span>)</span>
-                    </label>
-                    <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer">
-                        <input type="checkbox" id="download-singles" />
-                        <span>Singles (<span id="singles-count">0</span>)</span>
-                    </label>
-                </div>
-                <div class="modal-actions" style="margin-top: 1.5rem">
-                    <button class="btn-secondary" id="cancel-discography-download">Cancel</button>
-                    <button class="btn-primary" id="start-discography-download">Download</button>
-                </div>
-            </div>
-        </div>
-
-        <div id="custom-db-modal" class="modal">
-            <div class="modal-overlay"></div>
-            <div class="modal-content">
-                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem">
-                    <h3 style="margin: 0">Custom Database/Auth</h3>
-                    <button
-                        id="custom-db-reset"
-                        class="btn-secondary danger"
-                        style="padding: 0.4rem 0.8rem; font-size: 0.8rem"
-                    >
-                        Reset to Defaults
-                    </button>
-                </div>
-                <p style="font-size: 0.9rem; color: var(--muted-foreground); margin-bottom: 1rem">
-                    Configure custom PocketBase and Firebase instances. Leave empty to use defaults.
-                    <br />
-                    A Guide To Set This Up Can Be Found
-                    <a
-                        href="https://github.com/SamidyFR/monochrome/blob/main/self-hosted-database.md"
-                        style="text-decoration: underline"
-                        >Here</a
-                    >.
-                </p>
-                <div style="margin-bottom: 1rem">
-                    <label style="display: block; margin-bottom: 0.5rem; font-size: 0.9rem">PocketBase URL</label>
-                    <input
-                        type="url"
-                        id="custom-pb-url"
-                        class="template-input"
-                        placeholder="https://monodb.samidy.com"
-                    />
-                </div>
-                <div style="margin-bottom: 1rem">
-                    <label style="display: block; margin-bottom: 0.5rem; font-size: 0.9rem"
-                        >Firebase Configuration (JSON)</label
-                    >
-                    <textarea
-                        id="custom-firebase-config"
-                        class="template-input"
-                        style="height: 150px; font-family: monospace; font-size: 0.8rem; resize: vertical"
-                        placeholder="{'apiKey': '...', ...}"
-                    ></textarea>
-                </div>
-                <div class="modal-actions">
-                    <button id="custom-db-cancel" class="btn-secondary">Cancel</button>
-                    <button id="custom-db-save" class="btn-primary">Save & Reload</button>
-                </div>
-            </div>
-        </div>
-
-        <div id="tracker-modal" class="modal tracker-modal">
-            <div class="modal-overlay"></div>
-            <div class="modal-content wide" style="max-height: 85vh; display: flex; flex-direction: column">
-                <header class="detail-header" style="margin-bottom: 1rem; padding-bottom: 0">
-                    <img
-                        id="tracker-header-image"
-                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
-                        class="detail-header-image"
-                        style="width: 140px; height: 140px; box-shadow: var(--shadow-md)"
-                        alt=""
-                    />
-                    <div class="detail-header-info">
-                        <div class="type">Unreleased Project</div>
-                        <h1 id="tracker-header-title" class="title" style="font-size: 2rem"></h1>
-                        <div id="tracker-header-meta" class="meta"></div>
-                        <div class="detail-header-actions">
-                            <button class="btn-secondary" id="close-tracker-modal">Close</button>
-                        </div>
-                    </div>
-                </header>
-                <div
-                    id="tracker-filters"
-                    style="padding: 0 2rem 1rem; display: flex; gap: 0.5rem; flex-wrap: wrap"
-                ></div>
-                <div id="tracker-tracklist" class="track-list" style="overflow-y: auto; flex: 1">
-                    <div class="track-list-header">
-                        <span style="width: 40px; text-align: center">#</span>
-                        <span>Title</span>
-                        <span class="duration-header">Duration</span>
-                        <span style="display: flex; justify-content: flex-end; opacity: 0.8">Menu</span>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div id="epilepsy-warning-modal" class="modal">
-            <div class="modal-overlay"></div>
-            <div class="modal-content">
-                <h3 style="color: #ef4444; display: flex; align-items: center; gap: 0.5rem">
-                    <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="24"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                    >
-                        <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" />
-                        <line x1="12" y1="9" x2="12" y2="13" />
-                        <line x1="12" y1="17" x2="12.01" y2="17" />
-                    </svg>
-                    Photosensitivity Warning
-                </h3>
-                <p style="margin: 1rem 0; line-height: 1.5">
-                    The visualizer contains flashing lights and rapidly moving patterns that may trigger seizures for
-                    people with photosensitive epilepsy.
-                </p>
-                <p style="margin-bottom: 1.5rem; font-size: 0.9rem; color: var(--muted-foreground)">
-                    Viewer discretion is advised.
-                </p>
-                <div class="modal-actions" style="flex-direction: column; gap: 0.5rem">
-                    <button id="epilepsy-accept-btn" class="btn-primary" style="width: 100%">
-                        Proceed & Don't Show Again
-                    </button>
-                    <button id="epilepsy-cancel-btn" class="btn-secondary" style="width: 100%">Cancel</button>
-                </div>
-            </div>
-        </div>
-
-        <div id="sidebar-overlay"></div>
-
-        <div id="csv-import-progress" class="csv-import-progress" style="display: none">
-            <div class="progress-header">
-                <h4>Importing Tracks from CSV</h4>
-                <p class="progress-warning">
-                    This can take a while depending on your playlist size. Please be patient.
-                </p>
-            </div>
-            <div class="progress-content">
-                <div class="current-track">Preparing import...</div>
-                <div
-                    class="current-artist"
-                    style="font-size: 0.9em; color: var(--text-secondary); margin-bottom: 0.5rem"
-                ></div>
-                <div class="progress-bar">
-                    <div class="progress-fill" id="csv-progress-fill"></div>
-                </div>
-                <div class="progress-text">
-                    <span id="csv-progress-current">0</span> / <span id="csv-progress-total">0</span> tracks processed
-                </div>
-            </div>
-        </div>
-
-        <div class="app-container">
-            <aside class="sidebar">
-                <div class="sidebar-content">
-                    <div class="sidebar-logo">
-                        <svg
-                            class="app-logo"
-                            xmlns="http://www.w3.org/2000/svg"
-                            width="200"
-                            height="200"
-                            viewBox="14.75 14.75 70.5 70.5"
-                        >
-                            <g fill="currentColor">
-                                <path
-                                    d="M38.25 14.75H85.25V61.75H61.75V38.25H38.25ZM14.75 38.25H38.25V61.75H61.75V85.25H14.75Z"
-                                />
-                            </g>
-                        </svg>
-                        <span>Monochrome</span>
-                        <button
-                            id="sidebar-toggle"
-                            class="btn-icon desktop-only"
-                            style="margin-left: auto"
-                            title="Collapse Sidebar"
-                        >
-                            <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                width="20"
-                                height="20"
-                                viewBox="0 0 24 24"
-                                fill="none"
-                                stroke="currentColor"
-                                stroke-width="2"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                            >
-                                <path d="m15 18-6-6 6-6" />
-                            </svg>
-                        </button>
-                    </div>
-                    <nav class="sidebar-nav main">
-                        <ul>
-                            <li class="nav-item">
-                                <a href="/">
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        width="24"
-                                        height="24"
-                                        viewBox="0 0 24 24"
-                                        fill="none"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                        stroke-linecap="round"
-                                        stroke-linejoin="round"
-                                        class="lucide lucide-house-icon lucide-house"
-                                    >
-                                        <path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" />
-                                        <path
-                                            d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
-                                        />
-                                    </svg>
-                                    <span>Home</span>
-                                </a>
-                            </li>
-                            <li class="nav-item">
-                                <a href="/library">
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        width="24"
-                                        height="24"
-                                        viewBox="0 0 24 24"
-                                        fill="none"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                        stroke-linecap="round"
-                                        stroke-linejoin="round"
-                                    >
-                                        <path d="m16 6 4 14" />
-                                        <path d="M12 6v14" />
-                                        <path d="M8 8v12" />
-                                        <path d="M4 4v16" />
-                                    </svg>
-                                    <span>Library</span>
-                                </a>
-                            </li>
-                            <li class="nav-item">
-                                <a href="/recent">
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        width="24"
-                                        height="24"
-                                        viewBox="0 0 24 24"
-                                        fill="none"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                        stroke-linecap="round"
-                                        stroke-linejoin="round"
-                                    >
-                                        <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
-                                        <path d="M3 3v5h5" />
-                                        <path d="M12 7v5l4 2" />
-                                    </svg>
-                                    <span>Recent</span>
-                                </a>
-                            </li>
-                            <li class="nav-item">
-                                <a href="/unreleased">
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        width="24"
-                                        height="24"
-                                        viewBox="0 0 24 24"
-                                        fill="none"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                        stroke-linecap="round"
-                                        stroke-linejoin="round"
-                                    >
-                                        <rect x="3" y="3" width="7" height="7" />
-                                        <rect x="14" y="3" width="7" height="7" />
-                                        <rect x="14" y="14" width="7" height="7" />
-                                        <rect x="3" y="14" width="7" height="7" />
-                                    </svg>
-                                    <span>Unreleased</span>
-                                </a>
-                            </li>
-                            <li class="nav-item">
-                                <a href="/settings">
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        width="24"
-                                        height="24"
-                                        viewBox="0 0 24 24"
-                                        fill="none"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                        stroke-linecap="round"
-                                        stroke-linejoin="round"
-                                    >
-                                        <path
-                                            d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"
-                                        />
-                                        <circle cx="12" cy="12" r="3" />
-                                    </svg>
-                                    <span>Settings</span>
-                                </a>
-                            </li>
-                            <li class="nav-item">
-                                <a href="/account">
-                                    <svg
-                                        width="24"
-                                        height="24"
-                                        viewBox="0 0 24 24"
-                                        id="Layer_1"
-                                        data-name="Layer 1"
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        fill="currentColor"
-                                    >
-                                        <g stroke-width="0"></g>
-                                        <g stroke-linecap="round" stroke-linejoin="round"></g>
-                                        <g>
-                                            <defs>
-                                                <style>
-                                                    .cls-1 {
-                                                        fill: none;
-                                                        stroke: currentColor;
-                                                        stroke-miterlimit: 10;
-                                                        stroke-width: 1.9200000000000004;
-                                                    }
-                                                </style>
-                                            </defs>
-                                            <circle class="cls-1" cx="12" cy="7.25" r="5.73"></circle>
-                                            <path
-                                                class="cls-1"
-                                                d="M1.5,23.48l.37-2.05A10.3,10.3,0,0,1,12,13h0a10.3,10.3,0,0,1,10.13,8.45l.37,2.05"
-                                            ></path>
-                                        </g>
-                                    </svg>
-                                    <span>Account</span>
-                                </a>
-                            </li>
-                        </ul>
-                    </nav>
-                    <nav class="sidebar-nav">
-                        <ul>
-                            <li class="nav-item">
-                                <a href="/about">
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        width="24"
-                                        height="24"
-                                        viewBox="0 0 24 24"
-                                        fill="none"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                        stroke-linecap="round"
-                                        stroke-linejoin="round"
-                                        class="lucide lucide-info-icon lucide-info"
-                                    >
-                                        <circle cx="12" cy="12" r="10" />
-                                        <path d="M12 16v-4" />
-                                        <path d="M12 8h.01" />
-                                    </svg>
-                                    <span>About</span>
-                                </a>
-                            </li>
-                            <li class="nav-item">
-                                <a href="/download">
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        width="24"
-                                        height="24"
-                                        viewBox="0 0 24 24"
-                                        fill="none"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                        stroke-linecap="round"
-                                        stroke-linejoin="round"
-                                    >
-                                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-                                        <polyline points="7 10 12 15 17 10" />
-                                        <line x1="12" x2="12" y1="15" y2="3" />
-                                    </svg>
-                                    <span>Download</span>
-                                </a>
-                            </li>
-                            <li class="nav-item">
-                                <a href="https://monochrome.samidy.com/discord" target="_blank">
-                                    <svg
-                                        width="64px"
-                                        height="64px"
-                                        viewBox="0 -28.5 256 256"
-                                        version="1.1"
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        xmlns:xlink="http://www.w3.org/1999/xlink"
-                                        preserveAspectRatio="xMidYMid"
-                                        fill="#000000"
-                                    >
-                                        <g stroke-width="0"></g>
-                                        <g stroke-linecap="round" stroke-linejoin="round"></g>
-                                        <g>
-                                            <g>
-                                                <path
-                                                    d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z"
-                                                    fill="#8E8E96"
-                                                    fill-rule="nonzero"
-                                                ></path>
-                                            </g>
-                                        </g>
-                                    </svg>
-                                    <span>Discord</span>
-                                </a>
-                            </li>
-                        </ul>
-                    </nav>
-                </div>
-            </aside>
-
-            <main class="main-content">
-                <div id="page-background"></div>
-                <header class="main-header">
-                    <div class="navigation-controls desktop-only">
-                        <button id="nav-back" class="nav-btn" title="Go Back">
-                            <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                width="24"
-                                height="24"
-                                viewBox="0 0 24 24"
-                                fill="none"
-                                stroke="currentColor"
-                                stroke-width="2"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                            >
-                                <path d="m15 18-6-6 6-6" />
-                            </svg>
-                        </button>
-                        <button id="nav-forward" class="nav-btn" title="Go Forward">
-                            <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                width="24"
-                                height="24"
-                                viewBox="0 0 24 24"
-                                fill="none"
-                                stroke="currentColor"
-                                stroke-width="2"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                            >
-                                <path d="m9 18 6-6-6-6" />
-                            </svg>
-                        </button>
-                    </div>
-                    <button class="hamburger-menu" id="hamburger-btn" title="Open navigation">
-                        <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            width="24"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-width="2"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                        >
-                            <line x1="3" y1="12" x2="21" y2="12"></line>
-                            <line x1="3" y1="6" x2="21" y2="6"></line>
-                            <line x1="3" y1="18" x2="21" y2="18"></line>
-                        </svg>
-                    </button>
-                    <form class="search-bar" id="search-form">
-                        <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            width="24"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-width="2"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            class="search-icon"
-                        >
-                            <circle cx="11" cy="11" r="8"></circle>
-                            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
-                        </svg>
-                        <input
-                            type="search"
-                            id="search-input"
-                            placeholder="Search for tracks, artists, albums..."
-                            autocomplete="off"
-                            autocorrect="off"
-                            autocapitalize="off"
-                            spellcheck="false"
-                        />
-                        <div id="search-history" class="search-history" style="display: none"></div>
-                    </form>
-                </header>
-
-                <div id="page-home" class="page">
-                    <div id="home-welcome" style="display: none; text-align: center; padding: 4rem 2rem">
-                        <h2 style="margin-bottom: 1rem">Welcome to Monochrome</h2>
-                        <p style="color: var(--muted-foreground)">
-                            You haven't listened to anything yet. Search for your favorite songs to get started!
-                        </p>
-                    </div>
-
-                    <div id="home-content" style="display: none">
-                        <section class="content-section">
-                            <div
-                                style="
-                                    display: flex;
-                                    align-items: center;
-                                    justify-content: space-between;
-                                    margin-bottom: 1rem;
-                                "
-                            >
-                                <h2 class="section-title" style="margin-bottom: 0">Recommended Songs</h2>
-                                <button
-                                    class="btn-secondary"
-                                    id="refresh-songs-btn"
-                                    title="Refresh"
-                                    style="padding: 4px 8px"
-                                >
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        width="16"
-                                        height="16"
-                                        viewBox="0 0 24 24"
-                                        fill="none"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                        stroke-linecap="round"
-                                        stroke-linejoin="round"
-                                    >
-                                        <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" />
-                                        <path d="M21 3v5h-5" />
-                                    </svg>
-                                </button>
-                            </div>
-                            <div class="track-list" id="home-recommended-songs"></div>
-                        </section>
-                        <section class="content-section">
-                            <div
-                                style="
-                                    display: flex;
-                                    align-items: center;
-                                    justify-content: space-between;
-                                    margin-bottom: 1rem;
-                                "
-                            >
-                                <h2 class="section-title" style="margin-bottom: 0">Recommended Albums</h2>
-                                <button
-                                    class="btn-secondary"
-                                    id="refresh-albums-btn"
-                                    title="Refresh"
-                                    style="padding: 4px 8px"
-                                >
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        width="16"
-                                        height="16"
-                                        viewBox="0 0 24 24"
-                                        fill="none"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                        stroke-linecap="round"
-                                        stroke-linejoin="round"
-                                    >
-                                        <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" />
-                                        <path d="M21 3v5h-5" />
-                                    </svg>
-                                </button>
-                            </div>
-                            <div class="card-grid" id="home-recommended-albums"></div>
-                        </section>
-                        <section class="content-section">
-                            <div
-                                style="
-                                    display: flex;
-                                    align-items: center;
-                                    justify-content: space-between;
-                                    margin-bottom: 1rem;
-                                "
-                            >
-                                <h2 class="section-title" style="margin-bottom: 0">Recommended Artists</h2>
-                                <button
-                                    class="btn-secondary"
-                                    id="refresh-artists-btn"
-                                    title="Refresh"
-                                    style="padding: 4px 8px"
-                                >
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        width="16"
-                                        height="16"
-                                        viewBox="0 0 24 24"
-                                        fill="none"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                        stroke-linecap="round"
-                                        stroke-linejoin="round"
-                                    >
-                                        <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" />
-                                        <path d="M21 3v5h-5" />
-                                    </svg>
-                                </button>
-                            </div>
-                            <div class="card-grid" id="home-recommended-artists"></div>
-                        </section>
-                        <section class="content-section">
-                            <div
-                                style="
-                                    display: flex;
-                                    align-items: center;
-                                    justify-content: space-between;
-                                    margin-bottom: 1rem;
-                                "
-                            >
-                                <h2 class="section-title" style="margin-bottom: 0">Jump Back In</h2>
-                                <button
-                                    class="btn-secondary"
-                                    id="clear-recent-btn"
-                                    title="Clear History"
-                                    style="padding: 4px 8px"
-                                >
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        width="16"
-                                        height="16"
-                                        viewBox="0 0 24 24"
-                                        fill="none"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                        stroke-linecap="round"
-                                        stroke-linejoin="round"
-                                    >
-                                        <path d="M3 6h18" />
-                                        <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
-                                        <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
-                                    </svg>
-                                </button>
-                            </div>
-                            <div class="card-grid" id="home-recent-mixed"></div>
-                        </section>
-                    </div>
-                </div>
-
-                <div id="page-search" class="page">
-                    <h2 class="section-title" id="search-results-title">Search Results</h2>
-                    <div class="search-tabs">
-                        <button class="search-tab active" data-tab="tracks">Tracks</button>
-                        <button class="search-tab" data-tab="albums">Albums</button>
-                        <button class="search-tab" data-tab="artists">Artists</button>
-                        <button class="search-tab" data-tab="playlists">Playlists</button>
-                    </div>
-                    <div class="search-tab-content active" id="search-tab-tracks">
-                        <div class="track-list" id="search-tracks-container"></div>
-                    </div>
-                    <div class="search-tab-content" id="search-tab-albums">
-                        <div class="card-grid" id="search-albums-container"></div>
-                    </div>
-                    <div class="search-tab-content" id="search-tab-artists">
-                        <div class="card-grid" id="search-artists-container"></div>
-                    </div>
-                    <div class="search-tab-content" id="search-tab-playlists">
-                        <div class="card-grid" id="search-playlists-container"></div>
-                    </div>
-                </div>
-
-                <div id="page-library" class="page">
-                    <section class="content-section">
-                        <div class="library-header">
-                            <h2>My Playlists</h2>
-                            <button id="create-playlist-btn" class="btn-primary" style="margin: 10px 0">
-                                Create Playlist
-                            </button>
-                            <button id="create-folder-btn" class="btn-secondary" style="margin: 10px 0 10px 10px">
-                                Create Folder
-                            </button>
-                        </div>
-                        <div class="card-grid" id="my-folders-container"></div>
-                        <div class="card-grid" id="my-playlists-container"></div>
-                    </section>
-
-                    <section class="content-section">
-                        <h2 class="section-title">Favorites</h2>
-                        <div class="search-tabs">
-                            <button class="search-tab active" data-tab="tracks">Liked Tracks</button>
-                            <button class="search-tab" data-tab="albums">Albums</button>
-                            <button class="search-tab" data-tab="artists">Artists</button>
-                            <button class="search-tab" data-tab="playlists">Playlists and Mixes</button>
-                            <button class="search-tab" data-tab="local">Local Files</button>
-                        </div>
-                        <div class="search-tab-content active" id="library-tab-tracks">
-                            <div style="display: flex; justify-content: flex-start; gap: 0.5rem; margin-bottom: 0.5rem">
-                                <button
-                                    id="shuffle-liked-tracks-btn"
-                                    class="btn-secondary"
-                                    style="
+                            <button id="download-liked-tracks-btn" class="btn-secondary" style="
                                         display: none;
                                         width: 32px;
                                         height: 32px;
@@ -1260,1298 +899,1132 @@
                                         align-items: center;
                                         justify-content: center;
                                         border-radius: 50%;
-                                    "
-                                    title="Shuffle Liked Tracks"
-                                >
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        width="16"
-                                        height="16"
-                                        viewBox="0 0 24 24"
-                                        fill="none"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                        stroke-linecap="round"
-                                        stroke-linejoin="round"
-                                    >
-                                        <path d="m18 14 4 4-4 4" />
-                                        <path d="m18 2 4 4-4 4" />
-                                        <path d="M2 18h1.973a4 4 0 0 0 3.3-1.7l5.454-8.6a4 4 0 0 1 3.3-1.7H22" />
-                                        <path d="M2 6h1.972a4 4 0 0 1 3.6 2.2" />
-                                        <path d="M22 18h-6.041a4 4 0 0 1-3.3-1.8l-.359-.45" />
-                                    </svg>
-                                </button>
-                                <button
-                                    id="download-liked-tracks-btn"
-                                    class="btn-secondary"
-                                    style="
-                                        display: none;
-                                        width: 32px;
-                                        height: 32px;
-                                        padding: 0;
-                                        align-items: center;
-                                        justify-content: center;
-                                        border-radius: 50%;
-                                    "
-                                    title="Download Liked Tracks"
-                                >
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        width="16"
-                                        height="16"
-                                        viewBox="0 0 24 24"
-                                        fill="none"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                        stroke-linecap="round"
-                                        stroke-linejoin="round"
-                                    >
-                                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-                                        <polyline points="7 10 12 15 17 10" />
-                                        <line x1="12" y1="15" x2="12" y2="3" />
+                                    " title="Download Liked Tracks">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
+                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                    stroke-linejoin="round">
+                                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                                    <polyline points="7 10 12 15 17 10" />
+                                    <line x1="12" y1="15" x2="12" y2="3" />
+                                </svg>
+                            </button>
+                        </div>
+                        <div class="track-list" id="library-tracks-container"></div>
+                    </div>
+                    <div class="search-tab-content" id="library-tab-albums">
+                        <div class="card-grid" id="library-albums-container"></div>
+                    </div>
+                    <div class="search-tab-content" id="library-tab-artists">
+                        <div class="card-grid" id="library-artists-container"></div>
+                    </div>
+                    <div class="search-tab-content" id="library-tab-playlists">
+                        <div class="card-grid" id="library-playlists-container"></div>
+                    </div>
+                    <div class="search-tab-content" id="library-tab-local">
+                        <div class="track-list" id="library-local-container">
+                            <div id="local-files-intro" style="padding: 20px; text-align: center">
+                                <button id="select-local-folder-btn" class="btn-secondary">
+                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                                        stroke-width="2" style="margin-right: 8px">
+                                        <path
+                                            d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z">
+                                        </path>
                                     </svg>
+                                    <span id="select-local-folder-text">Select Music Folder</span>
                                 </button>
+                                <p id="local-browser-warning"
+                                    style="display: none; color: #ef4444; margin-top: 10px; font-size: 0.9rem">
+                                    Please use Google Chrome or Microsoft Edge to play local files.
+                                </p>
+                                <p style="margin-top: 10px; font-size: 0.9rem; color: var(--muted-foreground)">
+                                    Select a folder on your device to play local files. <br />
+                                    Note: Metadata reading is basic (FLAC/MP3 tags).
+                                </p>
                             </div>
-                            <div class="track-list" id="library-tracks-container"></div>
-                        </div>
-                        <div class="search-tab-content" id="library-tab-albums">
-                            <div class="card-grid" id="library-albums-container"></div>
-                        </div>
-                        <div class="search-tab-content" id="library-tab-artists">
-                            <div class="card-grid" id="library-artists-container"></div>
-                        </div>
-                        <div class="search-tab-content" id="library-tab-playlists">
-                            <div class="card-grid" id="library-playlists-container"></div>
-                        </div>
-                        <div class="search-tab-content" id="library-tab-local">
-                            <div class="track-list" id="library-local-container">
-                                <div id="local-files-intro" style="padding: 20px; text-align: center">
-                                    <button id="select-local-folder-btn" class="btn-secondary">
-                                        <svg
-                                            width="20"
-                                            height="20"
-                                            viewBox="0 0 24 24"
-                                            fill="none"
-                                            stroke="currentColor"
-                                            stroke-width="2"
-                                            style="margin-right: 8px"
-                                        >
-                                            <path
-                                                d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"
-                                            ></path>
-                                        </svg>
-                                        <span id="select-local-folder-text">Select Music Folder</span>
-                                    </button>
-                                    <p
-                                        id="local-browser-warning"
-                                        style="display: none; color: #ef4444; margin-top: 10px; font-size: 0.9rem"
-                                    >
-                                        Please use Google Chrome or Microsoft Edge to play local files.
-                                    </p>
-                                    <p style="margin-top: 10px; font-size: 0.9rem; color: var(--muted-foreground)">
-                                        Select a folder on your device to play local files. <br />
-                                        Note: Metadata reading is basic (FLAC/MP3 tags).
-                                    </p>
-                                </div>
-                                <div
-                                    id="local-files-header"
-                                    style="
+                            <div id="local-files-header" style="
                                         display: none;
                                         justify-content: space-between;
                                         align-items: center;
                                         padding: 10px 20px;
-                                    "
-                                >
-                                    <h3>Local Files</h3>
-                                    <button
-                                        id="change-local-folder-btn"
-                                        class="btn-secondary"
-                                        style="font-size: 0.8rem; padding: 4px 8px"
-                                    >
-                                        Change Folder
-                                    </button>
-                                </div>
-                                <div id="local-files-list"></div>
-                            </div>
-                        </div>
-                    </section>
-                </div>
-
-                <div id="page-recent" class="page">
-                    <h2 class="section-title">Recently played</h2>
-                    <div class="track-list" id="recent-tracks-container"></div>
-                </div>
-
-                <div id="page-unreleased" class="page">
-                    <div id="unreleased-content" style="padding: 1rem 0"></div>
-                </div>
-
-                <div id="page-tracker-artist" class="page">
-                    <header class="detail-header">
-                        <img
-                            id="tracker-artist-detail-image"
-                            src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
-                            alt=""
-                            class="detail-header-image artist"
-                        />
-                        <div class="detail-header-info">
-                            <div class="type">Unreleased Artist</div>
-                            <h1 class="title" id="tracker-artist-detail-name"></h1>
-                            <div class="meta" id="tracker-artist-detail-meta"></div>
-                            <div class="detail-header-actions">
-                                <button id="play-tracker-artist-btn" class="btn-primary">
-                                    <span>Shuffle Play</span>
-                                </button>
-                                <button id="download-tracker-artist-btn" class="btn-primary">
-                                    <span>Download All</span>
+                                    ">
+                                <h3>Local Files</h3>
+                                <button id="change-local-folder-btn" class="btn-secondary"
+                                    style="font-size: 0.8rem; padding: 4px 8px">
+                                    Change Folder
                                 </button>
                             </div>
+                            <div id="local-files-list"></div>
                         </div>
-                    </header>
-                    <div id="tracker-artist-projects-container"></div>
-                </div>
-
-                <div id="page-album" class="page">
-                    <header class="detail-header">
-                        <img
-                            id="album-detail-image"
-                            src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
-                            alt=""
-                            class="detail-header-image"
-                        />
-                        <div class="detail-header-info">
-                            <h1 class="title" id="album-detail-title"></h1>
-                            <div class="meta" id="album-detail-meta"></div>
-                            <div class="meta" id="album-detail-producer"></div>
-                            <div class="detail-header-actions">
-                                <button id="play-album-btn" class="btn-primary">
-                                    <span>Play Album</span>
-                                </button>
-                                <button id="shuffle-album-btn" class="btn-primary">
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        width="18"
-                                        height="18"
-                                        viewBox="0 0 24 24"
-                                        fill="none"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                        stroke-linecap="round"
-                                        stroke-linejoin="round"
-                                    >
-                                        <path d="m18 14 4 4-4 4" />
-                                        <path d="m18 2 4 4-4 4" />
-                                        <path d="M2 18h1.973a4 4 0 0 0 3.3-1.7l5.454-8.6a4 4 0 0 1 3.3-1.7H22" />
-                                        <path d="M2 6h1.972a4 4 0 0 1 3.6 2.2" />
-                                        <path d="M22 18h-6.041a4 4 0 0 1-3.3-1.8l-.359-.45" />
-                                    </svg>
-                                    <span>Shuffle</span>
-                                </button>
-                                <button id="album-mix-btn" class="btn-primary" style="display: none">
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        width="20"
-                                        height="20"
-                                        viewBox="0 0 24 24"
-                                        fill="currentColor"
-                                    >
-                                        <path
-                                            d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"
-                                        />
-                                    </svg>
-                                    <span>Mix</span>
-                                </button>
-                                <button id="download-album-btn" class="btn-primary">
-                                    <span>Download</span>
-                                </button>
-                                <button id="add-album-to-playlist-btn" class="btn-secondary" title="Add to Playlist">
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        width="20"
-                                        height="20"
-                                        viewBox="0 0 24 24"
-                                        fill="none"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                        stroke-linecap="round"
-                                        stroke-linejoin="round"
-                                    >
-                                        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
-                                        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
-                                    </svg>
-                                </button>
-                                <button
-                                    id="like-album-btn"
-                                    class="btn-secondary like-btn"
-                                    data-action="toggle-like"
-                                    data-type="album"
-                                    title="Save to Favorites"
-                                >
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        width="20"
-                                        height="20"
-                                        viewBox="0 0 24 24"
-                                        fill="none"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                        stroke-linecap="round"
-                                        stroke-linejoin="round"
-                                        class="heart-icon"
-                                    >
-                                        <path
-                                            d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
-                                        ></path>
-                                    </svg>
-                                </button>
-                            </div>
-                        </div>
-                    </header>
-                    <div class="album-content-layout">
-                        <div class="track-list" id="album-detail-tracklist"></div>
-
-                        <section
-                            class="content-section"
-                            id="album-section-more-albums"
-                            style="display: none; margin-top: 3rem"
-                        >
-                            <h2 class="section-title" id="album-title-more-albums">from Artist</h2>
-                            <div class="card-grid" id="album-detail-more-albums"></div>
-                        </section>
-
-                        <section class="content-section" id="album-section-eps" style="display: none; margin-top: 3rem">
-                            <h2 class="section-title" id="album-title-eps">EPs and Singles</h2>
-                            <div class="card-grid" id="album-detail-eps"></div>
-                        </section>
-
-                        <section
-                            class="content-section"
-                            id="album-section-similar-artists"
-                            style="display: none; margin-top: 3rem"
-                        >
-                            <h2 class="section-title">Similar Artists</h2>
-                            <div class="card-grid" id="album-detail-similar-artists"></div>
-                        </section>
-
-                        <section
-                            class="content-section"
-                            id="album-section-similar-albums"
-                            style="display: none; margin-top: 3rem"
-                        >
-                            <h2 class="section-title">Similar Albums</h2>
-                            <div class="card-grid" id="album-detail-similar-albums"></div>
-                        </section>
                     </div>
-                </div>
-
-                <section id="page-playlist" class="page">
-                    <header class="detail-header">
-                        <div class="detail-header-cover-container">
-                            <img
-                                id="playlist-detail-image"
-                                src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
-                                class="detail-header-image"
-                                alt="Playlist Cover"
-                            />
-                            <div id="playlist-detail-collage" class="detail-header-collage" style="display: none"></div>
-                        </div>
-                        <div class="detail-header-info">
-                            <h1 class="title" id="playlist-detail-title"></h1>
-                            <div class="meta" id="playlist-detail-meta"></div>
-                            <div class="meta" id="playlist-detail-description" class="detail-description"></div>
-                            <div class="detail-header-actions">
-                                <button id="play-playlist-btn" class="btn-primary">
-                                    <span>Play</span>
-                                </button>
-                                <button id="download-playlist-btn" class="btn-primary">
-                                    <span>Download</span>
-                                </button>
-                                <button
-                                    id="like-playlist-btn"
-                                    class="btn-secondary like-btn"
-                                    data-action="toggle-like"
-                                    data-type="playlist"
-                                    title="Save to Favorites"
-                                >
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        width="20"
-                                        height="20"
-                                        viewBox="0 0 24 24"
-                                        fill="none"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                        stroke-linecap="round"
-                                        stroke-linejoin="round"
-                                        class="heart-icon"
-                                    >
-                                        <path
-                                            d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
-                                        ></path>
-                                    </svg>
-                                </button>
-                            </div>
-                        </div>
-                    </header>
-                    <div id="playlist-detail-tracklist" class="track-list"></div>
-
-                    <section
-                        class="content-section"
-                        id="playlist-section-recommended"
-                        style="display: none; margin-top: 3rem"
-                    >
-                        <h2 class="section-title">Recommended Songs</h2>
-                        <p style="color: grey; margin-bottom: 15px">Suggested Songs From Your Playlist</p>
-                        <div class="track-list" id="playlist-detail-recommended"></div>
-                    </section>
                 </section>
+            </div>
 
-                <section id="page-folder" class="page">
-                    <header class="detail-header">
-                        <img
-                            id="folder-detail-image"
-                            src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
-                            class="detail-header-image"
-                            alt="Folder Cover"
-                        />
-                        <div class="detail-header-info">
-                            <h1 class="title" id="folder-detail-title"></h1>
-                            <div class="meta" id="folder-detail-meta"></div>
-                            <div class="detail-header-actions">
-                                <button id="delete-folder-btn" class="btn-secondary danger">Delete Folder</button>
-                            </div>
-                        </div>
-                    </header>
-                    <div class="card-grid" id="folder-detail-container"></div>
-                </section>
+            <div id="page-recent" class="page">
+                <h2 class="section-title">Recently played</h2>
+                <div class="track-list" id="recent-tracks-container"></div>
+            </div>
 
-                <section id="page-mix" class="page">
-                    <header class="detail-header">
-                        <img
-                            id="mix-detail-image"
-                            src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
-                            class="detail-header-image"
-                            alt="Mix Cover"
-                        />
-                        <div class="detail-header-info">
-                            <h1 class="title" id="mix-detail-title"></h1>
-                            <div class="meta" id="mix-detail-meta"></div>
-                            <div class="meta" id="mix-detail-description" class="detail-description"></div>
-                            <div class="detail-header-actions">
-                                <button id="play-mix-btn" class="btn-primary">
-                                    <span>Play</span>
-                                </button>
-                                <button id="download-mix-btn" class="btn-primary">
-                                    <span>Download</span>
-                                </button>
-                                <button
-                                    id="like-mix-btn"
-                                    class="btn-secondary like-btn"
-                                    data-action="toggle-like"
-                                    data-type="mix"
-                                    title="Save to Favorites"
-                                    style="display: none"
-                                >
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        width="20"
-                                        height="20"
-                                        viewBox="0 0 24 24"
-                                        fill="none"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                        stroke-linecap="round"
-                                        stroke-linejoin="round"
-                                        class="heart-icon"
-                                    >
-                                        <path
-                                            d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
-                                        ></path>
-                                    </svg>
-                                </button>
-                            </div>
-                        </div>
-                    </header>
-                    <div id="mix-detail-tracklist" class="track-list"></div>
-                </section>
+            <div id="page-unreleased" class="page">
+                <div id="unreleased-content" style="padding: 1rem 0"></div>
+            </div>
 
-                <div id="page-artist" class="page">
-                    <header class="detail-header">
-                        <img
-                            id="artist-detail-image"
-                            src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
-                            alt="Artist"
-                            class="detail-header-image artist"
-                        />
-                        <div class="detail-header-info">
-                            <h1 class="title" id="artist-detail-name"></h1>
-                            <div class="meta" id="artist-detail-meta"></div>
-                            <div class="detail-header-actions">
-                                <button id="play-artist-radio-btn" class="btn-primary">
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        width="20"
-                                        height="20"
-                                        viewBox="0 0 24 24"
-                                        fill="currentColor"
-                                    >
-                                        <path
-                                            d="M4.5 9v6h3l5 5V4l-5 5h-3zm16 3a6 6 0 0 0-3.26-5.3l-1.48 1.48C17.31 9.21 18 10.53 18 12c0 1.47-.69 2.79-1.74 3.82l1.48 1.48A6 6 0 0 0 20.5 12z"
-                                        />
-                                    </svg>
-                                    <span>Artist Radio</span>
-                                </button>
-                                <button id="shuffle-artist-btn" class="btn-primary">
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        width="18"
-                                        height="18"
-                                        viewBox="0 0 24 24"
-                                        fill="none"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                        stroke-linecap="round"
-                                        stroke-linejoin="round"
-                                    >
-                                        <path d="m18 14 4 4-4 4" />
-                                        <path d="m18 2 4 4-4 4" />
-                                        <path d="M2 18h1.973a4 4 0 0 0 3.3-1.7l5.454-8.6a4 4 0 0 1 3.3-1.7H22" />
-                                        <path d="M2 6h1.972a4 4 0 0 1 3.6 2.2" />
-                                        <path d="M22 18h-6.041a4 4 0 0 1-3.3-1.8l-.359-.45" />
-                                    </svg>
-                                    <span>Shuffle</span>
-                                </button>
-                                <button id="artist-mix-btn" class="btn-primary" style="display: none">
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        width="20"
-                                        height="20"
-                                        viewBox="0 0 24 24"
-                                        fill="currentColor"
-                                    >
-                                        <path
-                                            d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"
-                                        />
-                                    </svg>
-                                    <span>Mix</span>
-                                </button>
-                                <button id="download-discography-btn" class="btn-primary">
-                                    <span>Download Discography</span>
-                                </button>
-                                <button
-                                    id="like-artist-btn"
-                                    class="btn-secondary like-btn"
-                                    data-action="toggle-like"
-                                    data-type="artist"
-                                    title="Save to Favorites"
-                                >
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        width="20"
-                                        height="20"
-                                        viewBox="0 0 24 24"
-                                        fill="none"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                        stroke-linecap="round"
-                                        stroke-linejoin="round"
-                                        class="heart-icon"
-                                    >
-                                        <path
-                                            d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
-                                        ></path>
-                                    </svg>
-                                </button>
-                            </div>
+            <div id="page-tracker-artist" class="page">
+                <header class="detail-header">
+                    <img id="tracker-artist-detail-image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt=""
+                        class="detail-header-image artist" />
+                    <div class="detail-header-info">
+                        <div class="type">Unreleased Artist</div>
+                        <h1 class="title" id="tracker-artist-detail-name"></h1>
+                        <div class="meta" id="tracker-artist-detail-meta"></div>
+                        <div class="detail-header-actions">
+                            <button id="play-tracker-artist-btn" class="btn-primary">
+                                <span>Shuffle Play</span>
+                            </button>
+                            <button id="download-tracker-artist-btn" class="btn-primary">
+                                <span>Download All</span>
+                            </button>
                         </div>
-                    </header>
-                    <section class="content-section">
-                        <h2 class="section-title">Popular Tracks</h2>
-                        <div class="track-list" id="artist-detail-tracks"></div>
+                    </div>
+                </header>
+                <div id="tracker-artist-projects-container"></div>
+            </div>
+
+            <div id="page-album" class="page">
+                <header class="detail-header">
+                    <img id="album-detail-image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt=""
+                        class="detail-header-image" />
+                    <div class="detail-header-info">
+                        <h1 class="title" id="album-detail-title"></h1>
+                        <div class="meta" id="album-detail-meta"></div>
+                        <div class="meta" id="album-detail-producer"></div>
+                        <div class="detail-header-actions">
+                            <button id="play-album-btn" class="btn-primary">
+                                <span>Play Album</span>
+                            </button>
+                            <button id="shuffle-album-btn" class="btn-primary">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"
+                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                    stroke-linejoin="round">
+                                    <path d="m18 14 4 4-4 4" />
+                                    <path d="m18 2 4 4-4 4" />
+                                    <path d="M2 18h1.973a4 4 0 0 0 3.3-1.7l5.454-8.6a4 4 0 0 1 3.3-1.7H22" />
+                                    <path d="M2 6h1.972a4 4 0 0 1 3.6 2.2" />
+                                    <path d="M22 18h-6.041a4 4 0 0 1-3.3-1.8l-.359-.45" />
+                                </svg>
+                                <span>Shuffle</span>
+                            </button>
+                            <button id="album-mix-btn" class="btn-primary" style="display: none">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
+                                    fill="currentColor">
+                                    <path
+                                        d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z" />
+                                </svg>
+                                <span>Mix</span>
+                            </button>
+                            <button id="download-album-btn" class="btn-primary">
+                                <span>Download</span>
+                            </button>
+                            <button id="add-album-to-playlist-btn" class="btn-secondary" title="Add to Playlist">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
+                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                    stroke-linejoin="round">
+                                    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+                                    <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+                                </svg>
+                            </button>
+                            <button id="like-album-btn" class="btn-secondary like-btn" data-action="toggle-like"
+                                data-type="album" title="Save to Favorites">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
+                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                    stroke-linejoin="round" class="heart-icon">
+                                    <path
+                                        d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z">
+                                    </path>
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+                </header>
+                <div class="album-content-layout">
+                    <div class="track-list" id="album-detail-tracklist"></div>
+
+                    <section class="content-section" id="album-section-more-albums"
+                        style="display: none; margin-top: 3rem">
+                        <h2 class="section-title" id="album-title-more-albums">from Artist</h2>
+                        <div class="card-grid" id="album-detail-more-albums"></div>
                     </section>
-                    <section class="content-section">
-                        <h2 class="section-title">Albums</h2>
-                        <div class="card-grid" id="artist-detail-albums"></div>
+
+                    <section class="content-section" id="album-section-eps" style="display: none; margin-top: 3rem">
+                        <h2 class="section-title" id="album-title-eps">EPs and Singles</h2>
+                        <div class="card-grid" id="album-detail-eps"></div>
                     </section>
-                    <section class="content-section" id="artist-section-eps" style="display: none">
-                        <h2 class="section-title">EPs and Singles</h2>
-                        <div class="card-grid" id="artist-detail-eps"></div>
-                    </section>
-                    <section
-                        class="content-section"
-                        id="artist-section-load-unreleased"
-                        style="display: none; margin: 1.5rem 0"
-                    >
-                        <button id="load-unreleased-btn" class="btn-primary">Load Unreleased Projects</button>
-                    </section>
-                    <section class="content-section" id="artist-section-unreleased" style="display: none">
-                        <h2 class="section-title">Unreleased Music</h2>
-                        <div class="card-grid" id="artist-detail-unreleased"></div>
-                    </section>
-                    <section class="content-section" id="artist-section-similar" style="display: none">
+
+                    <section class="content-section" id="album-section-similar-artists"
+                        style="display: none; margin-top: 3rem">
                         <h2 class="section-title">Similar Artists</h2>
-                        <div class="card-grid" id="artist-detail-similar"></div>
+                        <div class="card-grid" id="album-detail-similar-artists"></div>
+                    </section>
+
+                    <section class="content-section" id="album-section-similar-albums"
+                        style="display: none; margin-top: 3rem">
+                        <h2 class="section-title">Similar Albums</h2>
+                        <div class="card-grid" id="album-detail-similar-albums"></div>
                     </section>
                 </div>
+            </div>
 
-                <div id="page-track" class="page">
-                    <header class="detail-header">
-                        <img
-                            id="track-detail-image"
+            <section id="page-playlist" class="page">
+                <header class="detail-header">
+                    <div class="detail-header-cover-container">
+                        <img id="playlist-detail-image"
                             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
-                            class="detail-header-image"
-                            alt="Track Cover"
-                        />
-                        <div class="detail-header-info">
-                            <div class="type">Song</div>
-                            <h1 class="title" id="track-detail-title"></h1>
-                            <div class="meta">
-                                <span id="track-detail-artist"></span> • <span id="track-detail-album"></span> •
-                                <span id="track-detail-year"></span>
-                            </div>
-                            <div class="detail-header-actions">
-                                <button id="play-track-btn" class="btn-primary">
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        width="24"
-                                        height="24"
-                                        viewBox="0 0 24 24"
-                                        fill="currentColor"
-                                    >
-                                        <path d="M8 5v14l11-7z" />
-                                    </svg>
-                                    <span>Play</span>
-                                </button>
-                                <button id="track-lyrics-btn" class="btn-secondary">
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        width="20"
-                                        height="20"
-                                        viewBox="0 0 24 24"
-                                        fill="none"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                        stroke-linecap="round"
-                                        stroke-linejoin="round"
-                                    >
-                                        <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" />
-                                        <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
-                                        <line x1="12" y1="19" x2="12" y2="22" />
-                                        <line x1="8" y1="22" x2="16" y2="22" />
-                                    </svg>
-                                    <span>Lyrics</span>
-                                </button>
-                                <button id="share-track-btn" class="btn-secondary">
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        width="20"
-                                        height="20"
-                                        viewBox="0 0 24 24"
-                                        fill="none"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                        stroke-linecap="round"
-                                        stroke-linejoin="round"
-                                    >
-                                        <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" />
-                                        <polyline points="16 6 12 2 8 6" />
-                                        <line x1="12" y1="2" x2="12" y2="15" />
-                                    </svg>
-                                    <span>Share</span>
-                                </button>
-                                <button
-                                    id="like-track-btn"
-                                    class="btn-secondary like-btn"
-                                    data-action="toggle-like"
-                                    data-type="track"
-                                    title="Save to Favorites"
-                                >
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        width="20"
-                                        height="20"
-                                        viewBox="0 0 24 24"
-                                        fill="none"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                        stroke-linecap="round"
-                                        stroke-linejoin="round"
-                                        class="heart-icon"
-                                    >
-                                        <path
-                                            d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
-                                        ></path>
-                                    </svg>
-                                </button>
-                                <button id="download-track-btn" class="btn-secondary" title="Download">
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        width="20"
-                                        height="20"
-                                        viewBox="0 0 24 24"
-                                        fill="none"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                        stroke-linecap="round"
-                                        stroke-linejoin="round"
-                                    >
-                                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-                                        <polyline points="7 10 12 15 17 10" />
-                                        <line x1="12" y1="15" x2="12" y2="3" />
-                                    </svg>
-                                </button>
+                            class="detail-header-image" alt="Playlist Cover" />
+                        <div id="playlist-detail-collage" class="detail-header-collage" style="display: none"></div>
+                    </div>
+                    <div class="detail-header-info">
+                        <h1 class="title" id="playlist-detail-title"></h1>
+                        <div class="meta" id="playlist-detail-meta"></div>
+                        <div class="meta" id="playlist-detail-description" class="detail-description"></div>
+                        <div class="detail-header-actions">
+                            <button id="play-playlist-btn" class="btn-primary">
+                                <span>Play</span>
+                            </button>
+                            <button id="download-playlist-btn" class="btn-primary">
+                                <span>Download</span>
+                            </button>
+                            <button id="like-playlist-btn" class="btn-secondary like-btn" data-action="toggle-like"
+                                data-type="playlist" title="Save to Favorites">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
+                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                    stroke-linejoin="round" class="heart-icon">
+                                    <path
+                                        d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z">
+                                    </path>
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+                </header>
+                <div id="playlist-detail-tracklist" class="track-list"></div>
+
+                <section class="content-section" id="playlist-section-recommended"
+                    style="display: none; margin-top: 3rem">
+                    <h2 class="section-title">Recommended Songs</h2>
+                    <p style="color: grey; margin-bottom: 15px">Suggested Songs From Your Playlist</p>
+                    <div class="track-list" id="playlist-detail-recommended"></div>
+                </section>
+            </section>
+
+            <section id="page-folder" class="page">
+                <header class="detail-header">
+                    <img id="folder-detail-image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        class="detail-header-image" alt="Folder Cover" />
+                    <div class="detail-header-info">
+                        <h1 class="title" id="folder-detail-title"></h1>
+                        <div class="meta" id="folder-detail-meta"></div>
+                        <div class="detail-header-actions">
+                            <button id="delete-folder-btn" class="btn-secondary danger">Delete Folder</button>
+                        </div>
+                    </div>
+                </header>
+                <div class="card-grid" id="folder-detail-container"></div>
+            </section>
+
+            <section id="page-mix" class="page">
+                <header class="detail-header">
+                    <img id="mix-detail-image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        class="detail-header-image" alt="Mix Cover" />
+                    <div class="detail-header-info">
+                        <h1 class="title" id="mix-detail-title"></h1>
+                        <div class="meta" id="mix-detail-meta"></div>
+                        <div class="meta" id="mix-detail-description" class="detail-description"></div>
+                        <div class="detail-header-actions">
+                            <button id="play-mix-btn" class="btn-primary">
+                                <span>Play</span>
+                            </button>
+                            <button id="download-mix-btn" class="btn-primary">
+                                <span>Download</span>
+                            </button>
+                            <button id="like-mix-btn" class="btn-secondary like-btn" data-action="toggle-like"
+                                data-type="mix" title="Save to Favorites" style="display: none">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
+                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                    stroke-linejoin="round" class="heart-icon">
+                                    <path
+                                        d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z">
+                                    </path>
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+                </header>
+                <div id="mix-detail-tracklist" class="track-list"></div>
+            </section>
+
+            <div id="page-artist" class="page">
+                <header class="detail-header">
+                    <img id="artist-detail-image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        alt="Artist" class="detail-header-image artist" />
+                    <div class="detail-header-info">
+                        <h1 class="title" id="artist-detail-name"></h1>
+                        <div class="meta" id="artist-detail-meta"></div>
+                        <div class="detail-header-actions">
+                            <button id="play-artist-radio-btn" class="btn-primary">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
+                                    fill="currentColor">
+                                    <path
+                                        d="M4.5 9v6h3l5 5V4l-5 5h-3zm16 3a6 6 0 0 0-3.26-5.3l-1.48 1.48C17.31 9.21 18 10.53 18 12c0 1.47-.69 2.79-1.74 3.82l1.48 1.48A6 6 0 0 0 20.5 12z" />
+                                </svg>
+                                <span>Artist Radio</span>
+                            </button>
+                            <button id="shuffle-artist-btn" class="btn-primary">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"
+                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                    stroke-linejoin="round">
+                                    <path d="m18 14 4 4-4 4" />
+                                    <path d="m18 2 4 4-4 4" />
+                                    <path d="M2 18h1.973a4 4 0 0 0 3.3-1.7l5.454-8.6a4 4 0 0 1 3.3-1.7H22" />
+                                    <path d="M2 6h1.972a4 4 0 0 1 3.6 2.2" />
+                                    <path d="M22 18h-6.041a4 4 0 0 1-3.3-1.8l-.359-.45" />
+                                </svg>
+                                <span>Shuffle</span>
+                            </button>
+                            <button id="artist-mix-btn" class="btn-primary" style="display: none">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
+                                    fill="currentColor">
+                                    <path
+                                        d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z" />
+                                </svg>
+                                <span>Mix</span>
+                            </button>
+                            <button id="download-discography-btn" class="btn-primary">
+                                <span>Download Discography</span>
+                            </button>
+                            <button id="like-artist-btn" class="btn-secondary like-btn" data-action="toggle-like"
+                                data-type="artist" title="Save to Favorites">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
+                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                    stroke-linejoin="round" class="heart-icon">
+                                    <path
+                                        d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z">
+                                    </path>
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+                </header>
+                <section class="content-section">
+                    <h2 class="section-title">Popular Tracks</h2>
+                    <div class="track-list" id="artist-detail-tracks"></div>
+                </section>
+                <section class="content-section">
+                    <h2 class="section-title">Albums</h2>
+                    <div class="card-grid" id="artist-detail-albums"></div>
+                </section>
+                <section class="content-section" id="artist-section-eps" style="display: none">
+                    <h2 class="section-title">EPs and Singles</h2>
+                    <div class="card-grid" id="artist-detail-eps"></div>
+                </section>
+                <section class="content-section" id="artist-section-load-unreleased"
+                    style="display: none; margin: 1.5rem 0">
+                    <button id="load-unreleased-btn" class="btn-primary">Load Unreleased Projects</button>
+                </section>
+                <section class="content-section" id="artist-section-unreleased" style="display: none">
+                    <h2 class="section-title">Unreleased Music</h2>
+                    <div class="card-grid" id="artist-detail-unreleased"></div>
+                </section>
+                <section class="content-section" id="artist-section-similar" style="display: none">
+                    <h2 class="section-title">Similar Artists</h2>
+                    <div class="card-grid" id="artist-detail-similar"></div>
+                </section>
+            </div>
+
+            <div id="page-track" class="page">
+                <header class="detail-header">
+                    <img id="track-detail-image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        class="detail-header-image" alt="Track Cover" />
+                    <div class="detail-header-info">
+                        <div class="type">Song</div>
+                        <h1 class="title" id="track-detail-title"></h1>
+                        <div class="meta">
+                            <span id="track-detail-artist"></span> • <span id="track-detail-album"></span> •
+                            <span id="track-detail-year"></span>
+                        </div>
+                        <div class="detail-header-actions">
+                            <button id="play-track-btn" class="btn-primary">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+                                    fill="currentColor">
+                                    <path d="M8 5v14l11-7z" />
+                                </svg>
+                                <span>Play</span>
+                            </button>
+                            <button id="track-lyrics-btn" class="btn-secondary">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
+                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                    stroke-linejoin="round">
+                                    <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" />
+                                    <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
+                                    <line x1="12" y1="19" x2="12" y2="22" />
+                                    <line x1="8" y1="22" x2="16" y2="22" />
+                                </svg>
+                                <span>Lyrics</span>
+                            </button>
+                            <button id="share-track-btn" class="btn-secondary">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
+                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                    stroke-linejoin="round">
+                                    <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" />
+                                    <polyline points="16 6 12 2 8 6" />
+                                    <line x1="12" y1="2" x2="12" y2="15" />
+                                </svg>
+                                <span>Share</span>
+                            </button>
+                            <button id="like-track-btn" class="btn-secondary like-btn" data-action="toggle-like"
+                                data-type="track" title="Save to Favorites">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
+                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                    stroke-linejoin="round" class="heart-icon">
+                                    <path
+                                        d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z">
+                                    </path>
+                                </svg>
+                            </button>
+                            <button id="download-track-btn" class="btn-secondary" title="Download">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
+                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                    stroke-linejoin="round">
+                                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                                    <polyline points="7 10 12 15 17 10" />
+                                    <line x1="12" y1="15" x2="12" y2="3" />
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+                </header>
+                <section class="content-section" id="track-album-section">
+                    <h2 class="section-title">More from Album</h2>
+                    <div class="track-list" id="track-detail-album-tracks"></div>
+                </section>
+                <section class="content-section" id="track-similar-section" style="display: none">
+                    <h2 class="section-title">Similar Tracks</h2>
+                    <div class="track-list" id="track-detail-similar-tracks"></div>
+                </section>
+            </div>
+
+            <div id="page-settings" class="page">
+                <h2 class="section-title">Settings</h2>
+                <div class="settings-list">
+                    <div class="settings-group">
+                        <div class="setting-item">
+                            <div class="info">
+                                <span class="label">Theme</span>
+                                <span class="description">Choose your preferred color scheme</span>
                             </div>
                         </div>
-                    </header>
-                    <section class="content-section" id="track-album-section">
-                        <h2 class="section-title">More from Album</h2>
-                        <div class="track-list" id="track-detail-album-tracks"></div>
-                    </section>
-                    <section class="content-section" id="track-similar-section" style="display: none">
-                        <h2 class="section-title">Similar Tracks</h2>
-                        <div class="track-list" id="track-detail-similar-tracks"></div>
-                    </section>
-                </div>
-
-                <div id="page-settings" class="page">
-                    <h2 class="section-title">Settings</h2>
-                    <div class="settings-list">
-                        <div class="settings-group">
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">Theme</span>
-                                    <span class="description">Choose your preferred color scheme</span>
-                                </div>
-                            </div>
-                            <div class="theme-picker" id="theme-picker">
-                                <div class="theme-option" data-theme="system">System</div>
-                                <div class="theme-option" data-theme="light">Light</div>
-                                <div class="theme-option" data-theme="dark">Dark</div>
-                                <div class="theme-option" data-theme="monochrome">Black</div>
-                                <div class="theme-option" data-theme="ocean">Ocean</div>
-                                <div class="theme-option" data-theme="purple">Purple</div>
-                                <div class="theme-option" data-theme="forest">Forest</div>
-                                <div class="theme-option" data-theme="mocha">Mocha</div>
-                                <div class="theme-option" data-theme="machiatto">Machiatto</div>
-                                <div class="theme-option" data-theme="frappe">Frappé</div>
-                                <div class="theme-option" data-theme="latte">Latte</div>
-                                <div class="theme-option" data-theme="custom">Custom</div>
-                            </div>
-                            <div class="custom-theme-editor" id="custom-theme-editor">
-                                <h4>Custom Theme</h4>
-                                <div class="theme-color-grid" id="theme-color-grid"></div>
-                                <div class="theme-actions">
-                                    <button class="btn-secondary" id="apply-custom-theme">Apply Theme</button>
-                                    <button class="btn-secondary" id="reset-custom-theme">Reset</button>
-                                </div>
-                            </div>
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">Waveform Seekbar</span>
-                                    <span class="description"
-                                        >Show a visual waveform of the track in the progress bar (Experimental)</span
-                                    >
-                                </div>
-                                <label class="toggle-switch">
-                                    <input type="checkbox" id="waveform-toggle" />
-                                    <span class="slider"></span>
-                                </label>
-                            </div>
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">Smooth Scrolling</span>
-                                    <span class="description"
-                                        >Provides a smoother scrolling experience with Lenis (Experimental)</span
-                                    >
-                                </div>
-                                <label class="toggle-switch">
-                                    <input type="checkbox" id="smooth-scrolling-toggle" />
-                                    <span class="slider"></span>
-                                </label>
-                            </div>
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">Album Cover Background</span>
-                                    <span class="description"
-                                        >Use the album cover as a blurred background on album pages and as primary
-                                        color</span
-                                    >
-                                </div>
-                                <label class="toggle-switch">
-                                    <input type="checkbox" id="album-background-toggle" />
-                                    <span class="slider"></span>
-                                </label>
-                            </div>
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">Full-screen Visualizer</span>
-                                    <span class="description">Enable particle visualizer in full-screen mode</span>
-                                </div>
-                                <label class="toggle-switch">
-                                    <input type="checkbox" id="visualizer-enabled-toggle" checked />
-                                    <span class="slider"></span>
-                                </label>
-                            </div>
-                            <div class="setting-item" id="visualizer-preset-setting">
-                                <div class="info">
-                                    <span class="label">Visualizer Style</span>
-                                    <span class="description">Select the visualization style</span>
-                                </div>
-                                <select id="visualizer-preset-select">
-                                    <option value="lcd">LCD Pixels</option>
-                                    <option value="particles">Particles</option>
-                                    <option value="unknown-pleasures">Unknown Pleasures</option>
-                                </select>
-                            </div>
-                            <div class="setting-item" id="visualizer-mode-setting">
-                                <div class="info">
-                                    <span class="label">Visualizer Mode</span>
-                                    <span class="description"
-                                        >Choose how the visualizer is displayed in full-screen</span
-                                    >
-                                </div>
-                                <select id="visualizer-mode-select">
-                                    <option value="solid">Solid Background</option>
-                                    <option value="blended">Blended on Cover Art</option>
-                                </select>
-                            </div>
-                            <div class="setting-item" id="visualizer-smart-intensity-setting">
-                                <div class="info">
-                                    <span class="label">Smart Intensity Switching</span>
-                                    <span class="description"
-                                        >Automatically adjust visualizer intensity based on song energy</span
-                                    >
-                                </div>
-                                <label class="toggle-switch">
-                                    <input type="checkbox" id="smart-intensity-toggle" checked />
-                                    <span class="slider"></span>
-                                </label>
-                            </div>
-                            <div class="setting-item" id="visualizer-sensitivity-setting">
-                                <div class="info">
-                                    <span class="label">Visualizer Sensitivity</span>
-                                    <span class="description"
-                                        >Adjust the intensity of the visualizer effects.
-                                        <strong
-                                            >Warning: High sensitivity may cause flashing lights and rapid motion, which
-                                            can trigger seizures in people with photosensitive epilepsy.</strong
-                                        ></span
-                                    >
-                                </div>
-                                <div style="display: flex; align-items: center; gap: 10px">
-                                    <input
-                                        type="range"
-                                        id="visualizer-sensitivity-slider"
-                                        min="0.1"
-                                        max="2.0"
-                                        step="0.1"
-                                        value="0.6"
-                                        style="width: 100px"
-                                    />
-                                    <span
-                                        id="visualizer-sensitivity-value"
-                                        style="font-size: 0.9rem; min-width: 3em; text-align: right"
-                                        >60%</span
-                                    >
-                                </div>
+                        <div class="theme-picker" id="theme-picker">
+                            <div class="theme-option" data-theme="system">System</div>
+                            <div class="theme-option" data-theme="light">Light</div>
+                            <div class="theme-option" data-theme="dark">Dark</div>
+                            <div class="theme-option" data-theme="monochrome">Black</div>
+                            <div class="theme-option" data-theme="ocean">Ocean</div>
+                            <div class="theme-option" data-theme="purple">Purple</div>
+                            <div class="theme-option" data-theme="forest">Forest</div>
+                            <div class="theme-option" data-theme="mocha">Mocha</div>
+                            <div class="theme-option" data-theme="machiatto">Machiatto</div>
+                            <div class="theme-option" data-theme="frappe">Frappé</div>
+                            <div class="theme-option" data-theme="latte">Latte</div>
+                            <div class="theme-option" data-theme="custom">Custom</div>
+                        </div>
+                        <div class="custom-theme-editor" id="custom-theme-editor">
+                            <h4>Custom Theme</h4>
+                            <div class="theme-color-grid" id="theme-color-grid"></div>
+                            <div class="theme-actions">
+                                <button class="btn-secondary" id="apply-custom-theme">Apply Theme</button>
+                                <button class="btn-secondary" id="reset-custom-theme">Reset</button>
                             </div>
                         </div>
-                        <div class="settings-group">
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">Last.fm Scrobbling</span>
-                                    <span class="description" id="lastfm-status"
-                                        >Connect your Last.fm account to scrobble tracks</span
-                                    >
-                                </div>
-                                <div id="lastfm-controls">
-                                    <button id="lastfm-connect-btn" class="btn-secondary">Connect Last.fm</button>
-                                </div>
-                            </div>
-
-                            <div class="setting-item" id="lastfm-toggle-setting" style="display: none">
-                                <div class="info">
-                                    <span class="label">Enable Scrobbling</span>
-                                    <span class="description">Automatically scrobble played tracks</span>
-                                </div>
-                                <label class="toggle-switch">
-                                    <input type="checkbox" id="lastfm-toggle" />
-                                    <span class="slider"></span>
-                                </label>
-                            </div>
-
-                            <div class="setting-item" id="lastfm-love-setting" style="display: none">
-                                <div class="info">
-                                    <span class="label">Love on Like</span>
-                                    <span class="description"
-                                        >Automatically 'love' tracks on Last.fm when you like them</span
-                                    >
-                                </div>
-                                <label class="toggle-switch">
-                                    <input type="checkbox" id="lastfm-love-toggle" />
-                                    <span class="slider"></span>
-                                </label>
+                        <div class="setting-item">
+                            <div class="info">
+                                <span class="label">Waveform Seekbar</span>
+                                <span class="description">Show a visual waveform of the track in the progress bar
+                                    (Experimental)</span>
                             </div>
+                            <label class="toggle-switch">
+                                <input type="checkbox" id="waveform-toggle" />
+                                <span class="slider"></span>
+                            </label>
                         </div>
-
-                        <div class="settings-group">
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">Streaming Quality</span>
-                                    <span class="description">Quality for streaming playback</span>
-                                </div>
-                                <select id="streaming-quality-setting">
-                                    <option value="HI_RES_LOSSLESS">Hi-Res FLAC (24-bit)</option>
-                                    <option value="LOSSLESS">FLAC (Lossless)</option>
-                                    <option value="HIGH">AAC 320kbps</option>
-                                    <option value="LOW">AAC 96kbps</option>
-                                </select>
-                            </div>
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">Download Quality</span>
-                                    <span class="description">Quality for track downloads</span>
-                                </div>
-                                <select id="download-quality-setting">
-                                    <option value="HI_RES_LOSSLESS">Hi-Res FLAC (24-bit)</option>
-                                    <option value="LOSSLESS">FLAC (Lossless)</option>
-                                    <option value="HIGH">AAC 320kbps</option>
-                                    <option value="LOW">AAC 96kbps</option>
-                                </select>
-                            </div>
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">Cover Art Size</span>
-                                    <span class="description">Size for downloaded/embedded cover art</span>
-                                </div>
-                                <input
-                                    type="text"
-                                    id="cover-art-size-setting"
-                                    class="template-input"
-                                    style="width: 120px; text-align: right"
-                                    placeholder="1280x1280"
-                                />
-                            </div>
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">Show Quality Badges</span>
-                                    <span class="description">Display "HD" badge for Hi-Res tracks</span>
-                                </div>
-                                <label class="toggle-switch">
-                                    <input type="checkbox" id="show-quality-badges-toggle" checked />
-                                    <span class="slider"></span>
-                                </label>
-                            </div>
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">Gapless Playback</span>
-                                    <span class="description">Play audio without interruption between tracks</span>
-                                </div>
-                                <label class="toggle-switch">
-                                    <input type="checkbox" checked />
-                                    <span class="slider"></span>
-                                </label>
-                            </div>
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">ReplayGain Mode</span>
-                                    <span class="description">Normalize volume across tracks</span>
-                                </div>
-                                <select id="replay-gain-mode">
-                                    <option value="off">Off</option>
-                                    <option value="track">Track</option>
-                                    <option value="album">Album</option>
-                                </select>
-                            </div>
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">ReplayGain Pre-Amp</span>
-                                    <span class="description">Adjust gain manually (dB)</span>
-                                </div>
-                                <input type="number" id="replay-gain-preamp" value="3" step="0.5" style="width: 80px" />
+                        <div class="setting-item">
+                            <div class="info">
+                                <span class="label">Smooth Scrolling</span>
+                                <span class="description">Provides a smoother scrolling experience with Lenis
+                                    (Experimental)</span>
                             </div>
+                            <label class="toggle-switch">
+                                <input type="checkbox" id="smooth-scrolling-toggle" />
+                                <span class="slider"></span>
+                            </label>
                         </div>
-
-                        <div class="settings-group">
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">Now Playing View Mode</span>
-                                    <span class="description">Choose what shows when you click the album art</span>
-                                </div>
-                                <select id="now-playing-mode">
-                                    <option value="album">Show Album</option>
-                                    <option value="cover">Fullscreen Mode</option>
-                                    <option value="lyrics">Lyrics Panel</option>
-                                </select>
-                            </div>
-
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">Compact Artists</span>
-                                    <span class="description">Show artist cards in a compact, horizontal layout</span>
-                                </div>
-                                <label class="toggle-switch">
-                                    <input type="checkbox" id="compact-artist-toggle" />
-                                    <span class="slider"></span>
-                                </label>
-                            </div>
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">Compact Albums</span>
-                                    <span class="description">Show album cards in a compact, horizontal layout</span>
-                                </div>
-                                <label class="toggle-switch">
-                                    <input type="checkbox" id="compact-album-toggle" />
-                                    <span class="slider"></span>
-                                </label>
+                        <div class="setting-item">
+                            <div class="info">
+                                <span class="label">Album Cover Background</span>
+                                <span class="description">Use the album cover as a blurred background on album pages and
+                                    as primary
+                                    color</span>
                             </div>
+                            <label class="toggle-switch">
+                                <input type="checkbox" id="album-background-toggle" />
+                                <span class="slider"></span>
+                            </label>
                         </div>
-
-                        <div class="settings-group">
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">Zipped Bulk Downloads</span>
-                                    <span class="description"
-                                        >Download multiple tracks as a single ZIP file (requires browser support)</span
-                                    >
-                                </div>
-                                <label class="toggle-switch">
-                                    <input type="checkbox" id="zipped-bulk-downloads-toggle" checked />
-                                    <span class="slider"></span>
-                                </label>
-                            </div>
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">Download Lyrics</span>
-                                    <span class="description">Include .lrc files when downloading tracks/albums</span>
-                                </div>
-                                <label class="toggle-switch">
-                                    <input type="checkbox" id="download-lyrics-toggle" />
-                                    <span class="slider"></span>
-                                </label>
-                            </div>
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">Romaji Lyrics</span>
-                                    <span class="description"
-                                        >Convert Japanese lyrics to Romaji (Latin characters)</span
-                                    >
-                                </div>
-                                <label class="toggle-switch">
-                                    <input type="checkbox" id="romaji-lyrics-toggle" />
-                                    <span class="slider"></span>
-                                </label>
-                            </div>
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">Filename Template</span>
-                                    <span class="description"
-                                        >Customize download filenames. Available: {trackNumber}, {artist}, {title},
-                                        {album}</span
-                                    >
-                                </div>
-                                <input
-                                    type="text"
-                                    id="filename-template"
-                                    class="template-input"
-                                    placeholder="{trackNumber} - {artist} - {title}"
-                                />
-                            </div>
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">ZIP Folder Template</span>
-                                    <span class="description"
-                                        >Customize album folder names. Available: {albumTitle}, {albumArtist},
-                                        {year}</span
-                                    >
-                                </div>
-                                <input
-                                    type="text"
-                                    id="zip-folder-template"
-                                    class="template-input"
-                                    placeholder="{albumTitle} - {albumArtist} - monochrome.tf"
-                                />
-                            </div>
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">Generate M3U</span>
-                                    <span class="description">Include M3U playlist files in downloads</span>
-                                </div>
-                                <label class="toggle-switch">
-                                    <input type="checkbox" id="generate-m3u-toggle" checked />
-                                    <span class="slider"></span>
-                                </label>
-                            </div>
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">Generate M3U8</span>
-                                    <span class="description">Include extended M3U8 playlist files in downloads</span>
-                                </div>
-                                <label class="toggle-switch">
-                                    <input type="checkbox" id="generate-m3u8-toggle" />
-                                    <span class="slider"></span>
-                                </label>
-                            </div>
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">Generate CUE</span>
-                                    <span class="description"
-                                        >Include CUE sheets for gapless playback in downloads</span
-                                    >
-                                </div>
-                                <label class="toggle-switch">
-                                    <input type="checkbox" id="generate-cue-toggle" />
-                                    <span class="slider"></span>
-                                </label>
-                            </div>
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">Generate NFO</span>
-                                    <span class="description">Include NFO files for media center compatibility</span>
-                                </div>
-                                <label class="toggle-switch">
-                                    <input type="checkbox" id="generate-nfo-toggle" />
-                                    <span class="slider"></span>
-                                </label>
-                            </div>
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">Generate JSON</span>
-                                    <span class="description">Include JSON files with rich metadata</span>
-                                </div>
-                                <label class="toggle-switch">
-                                    <input type="checkbox" id="generate-json-toggle" />
-                                    <span class="slider"></span>
-                                </label>
-                            </div>
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">Relative Paths</span>
-                                    <span class="description">Use relative paths in playlist files</span>
-                                </div>
-                                <label class="toggle-switch">
-                                    <input type="checkbox" id="relative-paths-toggle" checked />
-                                    <span class="slider"></span>
-                                </label>
+                        <div class="setting-item">
+                            <div class="info">
+                                <span class="label">Full-screen Visualizer</span>
+                                <span class="description">Enable particle visualizer in full-screen mode</span>
                             </div>
+                            <label class="toggle-switch">
+                                <input type="checkbox" id="visualizer-enabled-toggle" checked />
+                                <span class="slider"></span>
+                            </label>
                         </div>
-
-                        <div class="settings-group">
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">Keyboard Shortcuts</span>
-                                    <span class="description">View available keyboard shortcuts</span>
-                                </div>
-                                <button id="show-shortcuts-btn" class="btn-secondary">Show Shortcuts</button>
+                        <div class="setting-item" id="visualizer-preset-setting">
+                            <div class="info">
+                                <span class="label">Visualizer Style</span>
+                                <span class="description">Select the visualization style</span>
                             </div>
-                            <div class="setting-item" id="install-app-setting" style="display: none">
-                                <div class="info">
-                                    <span class="label">Install App</span>
-                                    <span class="description">Install Monochrome as an app on your device</span>
-                                </div>
-                                <button id="manual-install-btn" class="btn-secondary">Install</button>
+                            <select id="visualizer-preset-select">
+                                <option value="lcd">LCD Pixels</option>
+                                <option value="particles">Particles</option>
+                                <option value="unknown-pleasures">Unknown Pleasures</option>
+                            </select>
+                        </div>
+                        <div class="setting-item" id="visualizer-mode-setting">
+                            <div class="info">
+                                <span class="label">Visualizer Mode</span>
+                                <span class="description">Choose how the visualizer is displayed in full-screen</span>
                             </div>
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">Cache</span>
-                                    <span class="description" id="cache-info"
-                                        >Stores API responses to reduce requests</span
-                                    >
-                                </div>
-                                <button id="clear-cache-btn" class="btn-secondary">Clear Cache</button>
+                            <select id="visualizer-mode-select">
+                                <option value="solid">Solid Background</option>
+                                <option value="blended">Blended on Cover Art</option>
+                            </select>
+                        </div>
+                        <div class="setting-item" id="visualizer-smart-intensity-setting">
+                            <div class="info">
+                                <span class="label">Smart Intensity Switching</span>
+                                <span class="description">Automatically adjust visualizer intensity based on song
+                                    energy</span>
                             </div>
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">Backup & Restore</span>
-                                    <span class="description">Export or import your library and history as JSON</span>
-                                </div>
-                                <div style="display: flex; gap: 0.5rem">
-                                    <button id="export-library-btn" class="btn-secondary">Export</button>
-                                    <button id="import-library-btn" class="btn-secondary">Import</button>
-                                    <input type="file" id="import-library-input" style="display: none" accept=".json" />
-                                </div>
+                            <label class="toggle-switch">
+                                <input type="checkbox" id="smart-intensity-toggle" checked />
+                                <span class="slider"></span>
+                            </label>
+                        </div>
+                        <div class="setting-item" id="visualizer-sensitivity-setting">
+                            <div class="info">
+                                <span class="label">Visualizer Sensitivity</span>
+                                <span class="description">Adjust the intensity of the visualizer effects.
+                                    <strong>Warning: High sensitivity may cause flashing lights and rapid motion, which
+                                        can trigger seizures in people with photosensitive epilepsy.</strong></span>
                             </div>
-                            <div class="setting-item">
-                                <div class="info">
-                                    <span class="label">ADVANCED: Custom Database/Auth</span>
-                                    <span class="description">Configure custom PocketBase and Firebase instances</span>
-                                </div>
-                                <button id="custom-db-btn" class="btn-secondary">Configure</button>
-                            </div>
-                            <div id="api-instance-manager">
-                                <div class="setting-item" style="padding-bottom: 1rem; border: none">
-                                    <div class="info">
-                                        <span class="label">API Instances</span>
-                                        <span class="description"
-                                            >Manage and prioritize API instances. Automatically sorted by speed.</span
-                                        >
-                                    </div>
-                                    <button id="refresh-speed-test-btn" class="btn-secondary">
-                                        Refresh Speed Test
-                                    </button>
-                                </div>
-                                <ul id="api-instance-list"></ul>
+                            <div style="display: flex; align-items: center; gap: 10px">
+                                <input type="range" id="visualizer-sensitivity-slider" min="0.1" max="2.0" step="0.1"
+                                    value="0.6" style="width: 100px" />
+                                <span id="visualizer-sensitivity-value"
+                                    style="font-size: 0.9rem; min-width: 3em; text-align: right">60%</span>
                             </div>
                         </div>
                     </div>
-                </div>
+                    <div class="settings-group">
+                        <div class="setting-item">
+                            <div class="info">
+                                <span class="label">Last.fm Scrobbling</span>
+                                <span class="description" id="lastfm-status">Connect your Last.fm account to scrobble
+                                    tracks</span>
+                            </div>
+                            <div id="lastfm-controls">
+                                <button id="lastfm-connect-btn" class="btn-secondary">Connect Last.fm</button>
+                            </div>
+                        </div>
 
-                <div id="page-about" class="page">
-                    <h2 class="section-title">About Monochrome</h2>
-                    <div class="about-content">
-                        <p class="about-description">
-                            Monochrome is a lightweight, privacy-focused music streaming client designed for
-                            high-fidelity audio playback. Built with modern web technologies, it provides a clean,
-                            distraction-free listening experience.
-                            <br />
-                        </p>
+                        <div class="setting-item" id="lastfm-toggle-setting" style="display: none">
+                            <div class="info">
+                                <span class="label">Enable Scrobbling</span>
+                                <span class="description">Automatically scrobble played tracks</span>
+                            </div>
+                            <label class="toggle-switch">
+                                <input type="checkbox" id="lastfm-toggle" />
+                                <span class="slider"></span>
+                            </label>
+                        </div>
+
+                        <div class="setting-item" id="lastfm-love-setting" style="display: none">
+                            <div class="info">
+                                <span class="label">Love on Like</span>
+                                <span class="description">Automatically 'love' tracks on Last.fm when you like
+                                    them</span>
+                            </div>
+                            <label class="toggle-switch">
+                                <input type="checkbox" id="lastfm-love-toggle" />
+                                <span class="slider"></span>
+                            </label>
+                        </div>
+                    </div>
+
+                    <div class="settings-group">
+                        <div class="setting-item">
+                            <div class="info">
+                                <span class="label">Streaming Quality</span>
+                                <span class="description">Quality for streaming playback</span>
+                            </div>
+                            <select id="streaming-quality-setting">
+                                <option value="HI_RES_LOSSLESS">Hi-Res FLAC (24-bit)</option>
+                                <option value="LOSSLESS">FLAC (Lossless)</option>
+                                <option value="HIGH">AAC 320kbps</option>
+                                <option value="LOW">AAC 96kbps</option>
+                            </select>
+                        </div>
+                        <div class="setting-item">
+                            <div class="info">
+                                <span class="label">Download Quality</span>
+                                <span class="description">Quality for track downloads</span>
+                            </div>
+                            <select id="download-quality-setting">
+                                <option value="HI_RES_LOSSLESS">Hi-Res FLAC (24-bit)</option>
+                                <option value="LOSSLESS">FLAC (Lossless)</option>
+                                <option value="HIGH">AAC 320kbps</option>
+                                <option value="LOW">AAC 96kbps</option>
+                            </select>
+                        </div>
+                        <div class="setting-item">
+                            <div class="info">
+                                <span class="label">Cover Art Size</span>
+                                <span class="description">Size for downloaded/embedded cover art</span>
+                            </div>
+                            <input type="text" id="cover-art-size-setting" class="template-input"
+                                style="width: 120px; text-align: right" placeholder="1280x1280" />
+                        </div>
+                        <div class="setting-item">
+                            <div class="info">
+                                <span class="label">Show Quality Badges</span>
+                                <span class="description">Display "HD" badge for Hi-Res tracks</span>
+                            </div>
+                            <label class="toggle-switch">
+                                <input type="checkbox" id="show-quality-badges-toggle" checked />
+                                <span class="slider"></span>
+                            </label>
+                        </div>
+                        <div class="setting-item">
+                            <div class="info">
+                                <span class="label">Gapless Playback</span>
+                                <span class="description">Play audio without interruption between tracks</span>
+                            </div>
+                            <label class="toggle-switch">
+                                <input type="checkbox" checked />
+                                <span class="slider"></span>
+                            </label>
+                        </div>
+                        <div class="setting-item">
+                            <div class="info">
+                                <span class="label">ReplayGain Mode</span>
+                                <span class="description">Normalize volume across tracks</span>
+                            </div>
+                            <select id="replay-gain-mode">
+                                <option value="off">Off</option>
+                                <option value="track">Track</option>
+                                <option value="album">Album</option>
+                            </select>
+                        </div>
+                        <div class="setting-item">
+                            <div class="info">
+                                <span class="label">ReplayGain Pre-Amp</span>
+                                <span class="description">Adjust gain manually (dB)</span>
+                            </div>
+                            <input type="number" id="replay-gain-preamp" value="3" step="0.5" style="width: 80px" />
+                        </div>
+
+                        <!-- 16-Band Equalizer -->
+                        <div class="setting-item">
+                            <div class="info">
+                                <span class="label">Equalizer</span>
+                                <span class="description">16-band parametric equalizer for fine audio control</span>
+                            </div>
+                            <label class="toggle-switch">
+                                <input type="checkbox" id="equalizer-enabled-toggle" />
+                                <span class="slider"></span>
+                            </label>
+                        </div>
+
+                        <div class="equalizer-container" id="equalizer-container" style="display: none;">
+                            <div class="equalizer-header">
+                                <div class="equalizer-preset-row">
+                                    <label for="equalizer-preset-select">Preset</label>
+                                    <select id="equalizer-preset-select">
+                                        <option value="flat">Flat</option>
+                                        <option value="bass_boost">Bass Boost</option>
+                                        <option value="bass_reducer">Bass Reducer</option>
+                                        <option value="treble_boost">Treble Boost</option>
+                                        <option value="treble_reducer">Treble Reducer</option>
+                                        <option value="vocal_boost">Vocal Boost</option>
+                                        <option value="loudness">Loudness</option>
+                                        <option value="rock">Rock</option>
+                                        <option value="pop">Pop</option>
+                                        <option value="classical">Classical</option>
+                                        <option value="jazz">Jazz</option>
+                                        <option value="electronic">Electronic</option>
+                                        <option value="hip_hop">Hip-Hop</option>
+                                        <option value="r_and_b">R&B</option>
+                                        <option value="acoustic">Acoustic</option>
+                                        <option value="podcast">Podcast / Speech</option>
+                                    </select>
+                                    <button id="equalizer-reset-btn" class="btn-secondary" title="Reset to Flat">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+                                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                                            stroke-linecap="round" stroke-linejoin="round">
+                                            <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
+                                            <path d="M3 3v5h5" />
+                                        </svg>
+                                    </button>
+                                </div>
+                            </div>
+
+                            <div class="equalizer-bands" id="equalizer-bands">
+                                <!-- Bands will be dynamically generated by JavaScript -->
+                                <div class="eq-band" data-band="0">
+                                    <input type="range" class="eq-slider" min="-30" max="30" step="0.5" value="0"
+                                        orient="vertical" />
+                                    <span class="eq-value">0</span>
+                                    <span class="eq-freq">25</span>
+                                </div>
+                                <div class="eq-band" data-band="1">
+                                    <input type="range" class="eq-slider" min="-30" max="30" step="0.5" value="0"
+                                        orient="vertical" />
+                                    <span class="eq-value">0</span>
+                                    <span class="eq-freq">40</span>
+                                </div>
+                                <div class="eq-band" data-band="2">
+                                    <input type="range" class="eq-slider" min="-30" max="30" step="0.5" value="0"
+                                        orient="vertical" />
+                                    <span class="eq-value">0</span>
+                                    <span class="eq-freq">63</span>
+                                </div>
+                                <div class="eq-band" data-band="3">
+                                    <input type="range" class="eq-slider" min="-30" max="30" step="0.5" value="0"
+                                        orient="vertical" />
+                                    <span class="eq-value">0</span>
+                                    <span class="eq-freq">100</span>
+                                </div>
+                                <div class="eq-band" data-band="4">
+                                    <input type="range" class="eq-slider" min="-30" max="30" step="0.5" value="0"
+                                        orient="vertical" />
+                                    <span class="eq-value">0</span>
+                                    <span class="eq-freq">160</span>
+                                </div>
+                                <div class="eq-band" data-band="5">
+                                    <input type="range" class="eq-slider" min="-30" max="30" step="0.5" value="0"
+                                        orient="vertical" />
+                                    <span class="eq-value">0</span>
+                                    <span class="eq-freq">250</span>
+                                </div>
+                                <div class="eq-band" data-band="6">
+                                    <input type="range" class="eq-slider" min="-30" max="30" step="0.5" value="0"
+                                        orient="vertical" />
+                                    <span class="eq-value">0</span>
+                                    <span class="eq-freq">400</span>
+                                </div>
+                                <div class="eq-band" data-band="7">
+                                    <input type="range" class="eq-slider" min="-30" max="30" step="0.5" value="0"
+                                        orient="vertical" />
+                                    <span class="eq-value">0</span>
+                                    <span class="eq-freq">630</span>
+                                </div>
+                                <div class="eq-band" data-band="8">
+                                    <input type="range" class="eq-slider" min="-30" max="30" step="0.5" value="0"
+                                        orient="vertical" />
+                                    <span class="eq-value">0</span>
+                                    <span class="eq-freq">1K</span>
+                                </div>
+                                <div class="eq-band" data-band="9">
+                                    <input type="range" class="eq-slider" min="-30" max="30" step="0.5" value="0"
+                                        orient="vertical" />
+                                    <span class="eq-value">0</span>
+                                    <span class="eq-freq">1.6K</span>
+                                </div>
+                                <div class="eq-band" data-band="10">
+                                    <input type="range" class="eq-slider" min="-30" max="30" step="0.5" value="0"
+                                        orient="vertical" />
+                                    <span class="eq-value">0</span>
+                                    <span class="eq-freq">2.5K</span>
+                                </div>
+                                <div class="eq-band" data-band="11">
+                                    <input type="range" class="eq-slider" min="-30" max="30" step="0.5" value="0"
+                                        orient="vertical" />
+                                    <span class="eq-value">0</span>
+                                    <span class="eq-freq">4K</span>
+                                </div>
+                                <div class="eq-band" data-band="12">
+                                    <input type="range" class="eq-slider" min="-30" max="30" step="0.5" value="0"
+                                        orient="vertical" />
+                                    <span class="eq-value">0</span>
+                                    <span class="eq-freq">6.3K</span>
+                                </div>
+                                <div class="eq-band" data-band="13">
+                                    <input type="range" class="eq-slider" min="-30" max="30" step="0.5" value="0"
+                                        orient="vertical" />
+                                    <span class="eq-value">0</span>
+                                    <span class="eq-freq">10K</span>
+                                </div>
+                                <div class="eq-band" data-band="14">
+                                    <input type="range" class="eq-slider" min="-30" max="30" step="0.5" value="0"
+                                        orient="vertical" />
+                                    <span class="eq-value">0</span>
+                                    <span class="eq-freq">16K</span>
+                                </div>
+                                <div class="eq-band" data-band="15">
+                                    <input type="range" class="eq-slider" min="-30" max="30" step="0.5" value="0"
+                                        orient="vertical" />
+                                    <span class="eq-value">0</span>
+                                    <span class="eq-freq">20K</span>
+                                </div>
+                            </div>
+
+                            <div class="equalizer-scale">
+                                <span>+30 dB</span>
+                                <span>0 dB</span>
+                                <span>-30 dB</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="settings-group">
+                        <div class="setting-item">
+                            <div class="info">
+                                <span class="label">Now Playing View Mode</span>
+                                <span class="description">Choose what shows when you click the album art</span>
+                            </div>
+                            <select id="now-playing-mode">
+                                <option value="album">Show Album</option>
+                                <option value="cover">Fullscreen Mode</option>
+                                <option value="lyrics">Lyrics Panel</option>
+                            </select>
+                        </div>
+
+                        <div class="setting-item">
+                            <div class="info">
+                                <span class="label">Compact Artists</span>
+                                <span class="description">Show artist cards in a compact, horizontal layout</span>
+                            </div>
+                            <label class="toggle-switch">
+                                <input type="checkbox" id="compact-artist-toggle" />
+                                <span class="slider"></span>
+                            </label>
+                        </div>
+                        <div class="setting-item">
+                            <div class="info">
+                                <span class="label">Compact Albums</span>
+                                <span class="description">Show album cards in a compact, horizontal layout</span>
+                            </div>
+                            <label class="toggle-switch">
+                                <input type="checkbox" id="compact-album-toggle" />
+                                <span class="slider"></span>
+                            </label>
+                        </div>
+                    </div>
+
+                    <div class="settings-group">
+                        <div class="setting-item">
+                            <div class="info">
+                                <span class="label">Zipped Bulk Downloads</span>
+                                <span class="description">Download multiple tracks as a single ZIP file (requires
+                                    browser support)</span>
+                            </div>
+                            <label class="toggle-switch">
+                                <input type="checkbox" id="zipped-bulk-downloads-toggle" checked />
+                                <span class="slider"></span>
+                            </label>
+                        </div>
+                        <div class="setting-item">
+                            <div class="info">
+                                <span class="label">Download Lyrics</span>
+                                <span class="description">Include .lrc files when downloading tracks/albums</span>
+                            </div>
+                            <label class="toggle-switch">
+                                <input type="checkbox" id="download-lyrics-toggle" />
+                                <span class="slider"></span>
+                            </label>
+                        </div>
+                        <div class="setting-item">
+                            <div class="info">
+                                <span class="label">Romaji Lyrics</span>
+                                <span class="description">Convert Japanese lyrics to Romaji (Latin characters)</span>
+                            </div>
+                            <label class="toggle-switch">
+                                <input type="checkbox" id="romaji-lyrics-toggle" />
+                                <span class="slider"></span>
+                            </label>
+                        </div>
+                        <div class="setting-item">
+                            <div class="info">
+                                <span class="label">Filename Template</span>
+                                <span class="description">Customize download filenames. Available: {trackNumber},
+                                    {artist}, {title},
+                                    {album}</span>
+                            </div>
+                            <input type="text" id="filename-template" class="template-input"
+                                placeholder="{trackNumber} - {artist} - {title}" />
+                        </div>
+                        <div class="setting-item">
+                            <div class="info">
+                                <span class="label">ZIP Folder Template</span>
+                                <span class="description">Customize album folder names. Available: {albumTitle},
+                                    {albumArtist},
+                                    {year}</span>
+                            </div>
+                            <input type="text" id="zip-folder-template" class="template-input"
+                                placeholder="{albumTitle} - {albumArtist} - monochrome.tf" />
+                        </div>
+                        <div class="setting-item">
+                            <div class="info">
+                                <span class="label">Generate M3U</span>
+                                <span class="description">Include M3U playlist files in downloads</span>
+                            </div>
+                            <label class="toggle-switch">
+                                <input type="checkbox" id="generate-m3u-toggle" checked />
+                                <span class="slider"></span>
+                            </label>
+                        </div>
+                        <div class="setting-item">
+                            <div class="info">
+                                <span class="label">Generate M3U8</span>
+                                <span class="description">Include extended M3U8 playlist files in downloads</span>
+                            </div>
+                            <label class="toggle-switch">
+                                <input type="checkbox" id="generate-m3u8-toggle" />
+                                <span class="slider"></span>
+                            </label>
+                        </div>
+                        <div class="setting-item">
+                            <div class="info">
+                                <span class="label">Generate CUE</span>
+                                <span class="description">Include CUE sheets for gapless playback in downloads</span>
+                            </div>
+                            <label class="toggle-switch">
+                                <input type="checkbox" id="generate-cue-toggle" />
+                                <span class="slider"></span>
+                            </label>
+                        </div>
+                        <div class="setting-item">
+                            <div class="info">
+                                <span class="label">Generate NFO</span>
+                                <span class="description">Include NFO files for media center compatibility</span>
+                            </div>
+                            <label class="toggle-switch">
+                                <input type="checkbox" id="generate-nfo-toggle" />
+                                <span class="slider"></span>
+                            </label>
+                        </div>
+                        <div class="setting-item">
+                            <div class="info">
+                                <span class="label">Generate JSON</span>
+                                <span class="description">Include JSON files with rich metadata</span>
+                            </div>
+                            <label class="toggle-switch">
+                                <input type="checkbox" id="generate-json-toggle" />
+                                <span class="slider"></span>
+                            </label>
+                        </div>
+                        <div class="setting-item">
+                            <div class="info">
+                                <span class="label">Relative Paths</span>
+                                <span class="description">Use relative paths in playlist files</span>
+                            </div>
+                            <label class="toggle-switch">
+                                <input type="checkbox" id="relative-paths-toggle" checked />
+                                <span class="slider"></span>
+                            </label>
+                        </div>
+                    </div>
+
+                    <div class="settings-group">
+                        <div class="setting-item">
+                            <div class="info">
+                                <span class="label">Keyboard Shortcuts</span>
+                                <span class="description">View available keyboard shortcuts</span>
+                            </div>
+                            <button id="show-shortcuts-btn" class="btn-secondary">Show Shortcuts</button>
+                        </div>
+                        <div class="setting-item" id="install-app-setting" style="display: none">
+                            <div class="info">
+                                <span class="label">Install App</span>
+                                <span class="description">Install Monochrome as an app on your device</span>
+                            </div>
+                            <button id="manual-install-btn" class="btn-secondary">Install</button>
+                        </div>
+                        <div class="setting-item">
+                            <div class="info">
+                                <span class="label">Cache</span>
+                                <span class="description" id="cache-info">Stores API responses to reduce requests</span>
+                            </div>
+                            <button id="clear-cache-btn" class="btn-secondary">Clear Cache</button>
+                        </div>
+                        <div class="setting-item">
+                            <div class="info">
+                                <span class="label">Backup & Restore</span>
+                                <span class="description">Export or import your library and history as JSON</span>
+                            </div>
+                            <div style="display: flex; gap: 0.5rem">
+                                <button id="export-library-btn" class="btn-secondary">Export</button>
+                                <button id="import-library-btn" class="btn-secondary">Import</button>
+                                <input type="file" id="import-library-input" style="display: none" accept=".json" />
+                            </div>
+                        </div>
+                        <div class="setting-item">
+                            <div class="info">
+                                <span class="label">ADVANCED: Custom Database/Auth</span>
+                                <span class="description">Configure custom PocketBase and Firebase instances</span>
+                            </div>
+                            <button id="custom-db-btn" class="btn-secondary">Configure</button>
+                        </div>
+                        <div id="api-instance-manager">
+                            <div class="setting-item" style="padding-bottom: 1rem; border: none">
+                                <div class="info">
+                                    <span class="label">API Instances</span>
+                                    <span class="description">Manage and prioritize API instances. Automatically sorted
+                                        by speed.</span>
+                                </div>
+                                <button id="refresh-speed-test-btn" class="btn-secondary">
+                                    Refresh Speed Test
+                                </button>
+                            </div>
+                            <ul id="api-instance-list"></ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div id="page-about" class="page">
+                <h2 class="section-title">About Monochrome</h2>
+                <div class="about-content">
+                    <p class="about-description">
+                        Monochrome is a lightweight, privacy-focused music streaming client designed for
+                        high-fidelity audio playback. Built with modern web technologies, it provides a clean,
+                        distraction-free listening experience.
                         <br />
-                        <div class="about-features">
-                            <h4>Features</h4>
-                            <ul>
-                                <li>High-quality lossless audio streaming</li>
-                                <li>Lyrics support with karaoke mode</li>
-                                <li>Recently Played tracking for easy history access</li>
-                                <li>Comprehensive Personal Library for favorites</li>
-                                <li>Intelligent API caching for improved performance</li>
-                                <li>Offline-capable Progressive Web App (PWA)</li>
-                                <li>Media Session API integration for system controls</li>
-                                <li>Queue management with shuffle and repeat modes</li>
-                                <li>Track downloads with automatic metadata embedding</li>
-                                <li>Multiple API instance support with failover</li>
-                                <li>Dark, minimalist interface optimized for focus</li>
-                                <li>Customizable themes</li>
-                                <li>Keyboard shortcuts for power users</li>
-                            </ul>
-                        </div>
-                        <div class="about-tech">
-                            <h4>Technology Stack</h4>
-                            <p>Vanilla JavaScript • ES6 Modules • IndexedDB • Service Workers • Media Session API</p>
-                        </div>
-                        <br /><br /><br />
-                        <div class="about-donate">
-                            <h2 class="section-title" style="text-align: center">Donate to Monochrome</h2>
-                            <p style="text-align: center" class="donate-description">
-                                If Monochrome has been useful to you and you're able to, consider making a donation.
-                                <br />
-                                It helps pay for the server and domain, and you get to support us :)
-                            </p>
-                            <div
-                                class="donate-button"
-                                id="donate-button-container"
-                                style="
+                    </p>
+                    <br />
+                    <div class="about-features">
+                        <h4>Features</h4>
+                        <ul>
+                            <li>High-quality lossless audio streaming</li>
+                            <li>Lyrics support with karaoke mode</li>
+                            <li>Recently Played tracking for easy history access</li>
+                            <li>Comprehensive Personal Library for favorites</li>
+                            <li>Intelligent API caching for improved performance</li>
+                            <li>Offline-capable Progressive Web App (PWA)</li>
+                            <li>Media Session API integration for system controls</li>
+                            <li>Queue management with shuffle and repeat modes</li>
+                            <li>Track downloads with automatic metadata embedding</li>
+                            <li>Multiple API instance support with failover</li>
+                            <li>Dark, minimalist interface optimized for focus</li>
+                            <li>Customizable themes</li>
+                            <li>Keyboard shortcuts for power users</li>
+                        </ul>
+                    </div>
+                    <div class="about-tech">
+                        <h4>Technology Stack</h4>
+                        <p>Vanilla JavaScript • ES6 Modules • IndexedDB • Service Workers • Media Session API</p>
+                    </div>
+                    <br /><br /><br />
+                    <div class="about-donate">
+                        <h2 class="section-title" style="text-align: center">Donate to Monochrome</h2>
+                        <p style="text-align: center" class="donate-description">
+                            If Monochrome has been useful to you and you're able to, consider making a donation.
+                            <br />
+                            It helps pay for the server and domain, and you get to support us :)
+                        </p>
+                        <div class="donate-button" id="donate-button-container" style="
                                     display: flex;
                                     gap: 20px;
                                     align-items: center;
                                     justify-content: center;
                                     margin-top: 50px;
                                     flex-wrap: wrap;
-                                "
-                            >
-                                <a href="https://ko-fi.com/monochromemusic">
-                                    <button id="donate-btn" class="btn-secondary">Donate to Monochrome</button>
-                                </a>
-                            </div>
-                        </div>
-                        <br /><br /><br />
-                        <div class="about-links">
-                            <a
-                                href="https://github.com/SamidyFR/monochrome"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                class="github-link"
-                            >
-                                <svg
-                                    xmlns="http://www.w3.org/2000/svg"
-                                    width="24"
-                                    height="24"
-                                    viewBox="0 0 24 24"
-                                    fill="none"
-                                    stroke="currentColor"
-                                    stroke-width="2"
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round"
-                                    class="lucide lucide-github-icon lucide-github"
-                                >
-                                    <path
-                                        d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"
-                                    />
-                                    <path d="M9 18c-4.51 2-5-2-7-2" />
-                                </svg>
-                                View on GitHub
+                                ">
+                            <a href="https://ko-fi.com/monochromemusic">
+                                <button id="donate-btn" class="btn-secondary">Donate to Monochrome</button>
                             </a>
-                            <br />
-                            <a
-                                href="https://github.com/eduardprigoana/monochrome"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                class="github-link"
-                            >
-                                <svg
-                                    xmlns="http://www.w3.org/2000/svg"
-                                    width="24"
-                                    height="24"
-                                    viewBox="0 0 24 24"
-                                    fill="none"
-                                    stroke="currentColor"
-                                    stroke-width="2"
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round"
-                                    class="lucide lucide-github-icon lucide-github"
-                                >
-                                    <path
-                                        d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"
-                                    />
-                                    <path d="M9 18c-4.51 2-5-2-7-2" />
-                                </svg>
-                                View on GitHub (Original Repo)
-                            </a>
-                        </div>
-                        <div class="about-footer">
-                            <p class="version">Version 2.2.0</p>
-                            <p class="disclaimer">
-                                This is an independent client and is not affiliated with or endorsed by TIDAL or any
-                                music streaming service.
-                            </p>
-                            <p class="disclaimer">
-                                This application does not host, store, or distribute any media files. <br />
-                                All content displayed or accessed through this app is provided by third‑party services
-                                and APIs that are publicly available on the internet. <br />
-                                We do not control, operate, or maintain any external content sources and are not
-                                responsible for the accuracy, availability, or legality of any content provided by third
-                                parties. <br />
-                                Users are solely responsible for how they use this application and for ensuring that
-                                their use complies with applicable laws and regulations in their jurisdiction.
-                            </p>
                         </div>
                     </div>
-                </div>
-                <div id="page-account" class="page">
-                    <h2 class="section-title" style="text-align: center">Sign Up / Sign In</h2>
-                    <div class="account-content">
-                        <p style="text-align: center" class="account-description">
-                            Make an account to allow syncing your library between devices.
+                    <br /><br /><br />
+                    <div class="about-links">
+                        <a href="https://github.com/SamidyFR/monochrome" target="_blank" rel="noopener noreferrer"
+                            class="github-link">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                stroke-linejoin="round" class="lucide lucide-github-icon lucide-github">
+                                <path
+                                    d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
+                                <path d="M9 18c-4.51 2-5-2-7-2" />
+                            </svg>
+                            View on GitHub
+                        </a>
+                        <br />
+                        <a href="https://github.com/eduardprigoana/monochrome" target="_blank" rel="noopener noreferrer"
+                            class="github-link">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                stroke-linejoin="round" class="lucide lucide-github-icon lucide-github">
+                                <path
+                                    d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
+                                <path d="M9 18c-4.51 2-5-2-7-2" />
+                            </svg>
+                            View on GitHub (Original Repo)
+                        </a>
+                    </div>
+                    <div class="about-footer">
+                        <p class="version">Version 2.2.0</p>
+                        <p class="disclaimer">
+                            This is an independent client and is not affiliated with or endorsed by TIDAL or any
+                            music streaming service.
                         </p>
-                        <div
-                            class="account-buttons"
-                            id="auth-buttons-container"
-                            style="
+                        <p class="disclaimer">
+                            This application does not host, store, or distribute any media files. <br />
+                            All content displayed or accessed through this app is provided by third‑party services
+                            and APIs that are publicly available on the internet. <br />
+                            We do not control, operate, or maintain any external content sources and are not
+                            responsible for the accuracy, availability, or legality of any content provided by third
+                            parties. <br />
+                            Users are solely responsible for how they use this application and for ensuring that
+                            their use complies with applicable laws and regulations in their jurisdiction.
+                        </p>
+                    </div>
+                </div>
+            </div>
+            <div id="page-account" class="page">
+                <h2 class="section-title" style="text-align: center">Sign Up / Sign In</h2>
+                <div class="account-content">
+                    <p style="text-align: center" class="account-description">
+                        Make an account to allow syncing your library between devices.
+                    </p>
+                    <div class="account-buttons" id="auth-buttons-container" style="
                                 display: flex;
                                 gap: 20px;
                                 align-items: center;
                                 justify-content: center;
                                 margin-top: 50px;
                                 flex-wrap: wrap;
-                            "
-                        >
-                            <button id="firebase-connect-btn" class="btn-secondary">Connect with Google</button>
-                            <button id="toggle-email-auth-btn" class="btn-secondary">Connect with Email</button>
-                            <button id="firebase-clear-cloud-btn" class="btn-secondary danger">Clear Cloud Data</button>
-                        </div>
+                            ">
+                        <button id="firebase-connect-btn" class="btn-secondary">Connect with Google</button>
+                        <button id="toggle-email-auth-btn" class="btn-secondary">Connect with Email</button>
+                        <button id="firebase-clear-cloud-btn" class="btn-secondary danger">Clear Cloud Data</button>
+                    </div>
 
-                        <div
-                            id="email-auth-container"
-                            style="
+                    <div id="email-auth-container" style="
                                 display: none;
                                 flex-direction: column;
                                 gap: 15px;
@@ -2562,454 +2035,290 @@
                                 background: var(--card);
                                 border-radius: var(--radius);
                                 border: 1px solid var(--border);
-                            "
-                        >
-                            <h3 style="text-align: center; margin-bottom: 10px">Email Authentication</h3>
-                            <input type="email" id="auth-email" class="template-input" placeholder="Email Address" />
-                            <input type="password" id="auth-password" class="template-input" placeholder="Password" />
-                            <div style="display: flex; gap: 10px; justify-content: center; margin-top: 10px">
-                                <button id="email-signin-btn" class="btn-primary" style="flex: 1">Sign In</button>
-                                <button id="email-signup-btn" class="btn-secondary" style="flex: 1">Sign Up</button>
-                            </div>
-                            <button
-                                id="reset-password-btn"
-                                class="btn-secondary"
-                                style="width: 100%; margin-top: 10px; font-size: 0.9rem"
-                            >
-                                Forgot Password?
-                            </button>
-                            <button
-                                id="cancel-email-auth-btn"
-                                class="btn-secondary"
-                                style="width: 100%; margin-top: 10px"
-                            >
-                                Cancel
-                            </button>
+                            ">
+                        <h3 style="text-align: center; margin-bottom: 10px">Email Authentication</h3>
+                        <input type="email" id="auth-email" class="template-input" placeholder="Email Address" />
+                        <input type="password" id="auth-password" class="template-input" placeholder="Password" />
+                        <div style="display: flex; gap: 10px; justify-content: center; margin-top: 10px">
+                            <button id="email-signin-btn" class="btn-primary" style="flex: 1">Sign In</button>
+                            <button id="email-signup-btn" class="btn-secondary" style="flex: 1">Sign Up</button>
                         </div>
-                        <p id="firebase-status" style="text-align: center; padding-top: 15px; color: #8b8b93">
-                            Sync your library across devices
-                        </p>
-                        <script>
-                            if (window.authManager && window.authManager.user) {
-                                const statusText = document.getElementById('firebase-status');
-                                if (statusText)
-                                    statusText.textContent = `Signed in as ${window.authManager.user.email}`;
-                            }
-                        </script>
-                        <p style="padding-top: 50px; text-align: center; color: #8b8b93">
-                            We only store music data and a randomized ID to find out which Google/Email account is
-                            which.
-                            <br />
-                            All data is anonymous. We do not store anything like emails, usernames, or anything
-                            sensitive. <br />
-                        </p>
-                        <p style="padding-top: 50px; text-align: center; color: #8b8b93">
-                            However, if you want complete control over your data, we allow you to use your own Database
-                            Configuration.
-                        </p>
-                        <div
-                            style="
+                        <button id="reset-password-btn" class="btn-secondary"
+                            style="width: 100%; margin-top: 10px; font-size: 0.9rem">
+                            Forgot Password?
+                        </button>
+                        <button id="cancel-email-auth-btn" class="btn-secondary" style="width: 100%; margin-top: 10px">
+                            Cancel
+                        </button>
+                    </div>
+                    <p id="firebase-status" style="text-align: center; padding-top: 15px; color: #8b8b93">
+                        Sync your library across devices
+                    </p>
+                    <script>
+                        if (window.authManager && window.authManager.user) {
+                            const statusText = document.getElementById('firebase-status');
+                            if (statusText)
+                                statusText.textContent = `Signed in as ${window.authManager.user.email}`;
+                        }
+                    </script>
+                    <p style="padding-top: 50px; text-align: center; color: #8b8b93">
+                        We only store music data and a randomized ID to find out which Google/Email account is
+                        which.
+                        <br />
+                        All data is anonymous. We do not store anything like emails, usernames, or anything
+                        sensitive. <br />
+                    </p>
+                    <p style="padding-top: 50px; text-align: center; color: #8b8b93">
+                        However, if you want complete control over your data, we allow you to use your own Database
+                        Configuration.
+                    </p>
+                    <div style="
                                 display: flex;
                                 gap: 50px;
                                 align-items: center;
                                 justify-content: center;
                                 padding-top: 25px;
-                            "
-                        >
-                            <a id="advanced-config-link" class="btn-secondary" href="/settings"
-                                >Advanced: Custom Configuration</a
-                            >
-                        </div>
+                            ">
+                        <a id="advanced-config-link" class="btn-secondary" href="/settings">Advanced: Custom
+                            Configuration</a>
                     </div>
                 </div>
-                <div id="page-download" class="page">
-                    <h2 class="section-title" style="text-align: center">Monochrome Official App</h2>
-                    <div class="download-content">
-                        <p style="text-align: center" class="account-description">
-                            Install the Monochrome Desktop App for a refined & improved music listening experience.
-                        </p>
-                        <br /><br />
+            </div>
+            <div id="page-download" class="page">
+                <h2 class="section-title" style="text-align: center">Monochrome Official App</h2>
+                <div class="download-content">
+                    <p style="text-align: center" class="account-description">
+                        Install the Monochrome Desktop App for a refined & improved music listening experience.
+                    </p>
+                    <br /><br />
 
-                        <div class="download-buttons-icons">
-                            <div class="download-buttons-icons-windows" style="display: flex; justify-content: center">
-                                <svg
-                                    width="96px"
-                                    height="96px"
-                                    viewBox="0 0 20 20"
-                                    version="1.1"
-                                    xmlns="http://www.w3.org/2000/svg"
-                                    xmlns:xlink="http://www.w3.org/1999/xlink"
-                                    fill="#000000"
-                                >
-                                    <g stroke-width="0"></g>
-                                    <g stroke-linecap="round" stroke-linejoin="round"></g>
-                                    <g>
-                                        <title>windows [#FFF174]</title>
-                                        <desc>Created with Sketch.</desc>
-                                        <defs></defs>
-                                        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-                                            <g
-                                                id="Dribbble-Light-Preview"
-                                                transform="translate(-60.000000, -7439.000000)"
-                                                fill="var(--foreground)"
-                                            >
-                                                <g id="icons" transform="translate(56.000000, 160.000000)">
-                                                    <path
-                                                        d="M13.1458647,7289.43426 C13.1508772,7291.43316 13.1568922,7294.82929 13.1619048,7297.46884 C16.7759398,7297.95757 20.3899749,7298.4613 23.997995,7299 C23.997995,7295.84873 24.002005,7292.71146 23.997995,7289.71311 C20.3809524,7289.71311 16.7649123,7289.43426 13.1458647,7289.43426 M4,7289.43526 L4,7296.22153 C6.72581454,7296.58933 9.45162907,7296.94113 12.1724311,7297.34291 C12.1774436,7294.71736 12.1704261,7292.0908 12.1704261,7289.46524 C9.44661654,7289.47024 6.72380952,7289.42627 4,7289.43526 M4,7281.84344 L4,7288.61071 C6.72581454,7288.61771 9.45162907,7288.57673 12.1774436,7288.57973 C12.1754386,7285.96017 12.1754386,7283.34361 12.1724311,7280.72405 C9.44461153,7281.06486 6.71679198,7281.42567 4,7281.84344 M24,7288.47179 C20.3879699,7288.48578 16.7759398,7288.54075 13.1619048,7288.55175 C13.1598997,7285.88921 13.1598997,7283.22967 13.1619048,7280.56914 C16.7689223,7280.01844 20.3839599,7279.50072 23.997995,7279 C24,7282.15826 23.997995,7285.31353 24,7288.47179"
-                                                        id="windows-[#FFF174]"
-                                                    ></path>
-                                                </g>
+                    <div class="download-buttons-icons">
+                        <div class="download-buttons-icons-windows" style="display: flex; justify-content: center">
+                            <svg width="96px" height="96px" viewBox="0 0 20 20" version="1.1"
+                                xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+                                fill="#000000">
+                                <g stroke-width="0"></g>
+                                <g stroke-linecap="round" stroke-linejoin="round"></g>
+                                <g>
+                                    <title>windows [#FFF174]</title>
+                                    <desc>Created with Sketch.</desc>
+                                    <defs></defs>
+                                    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                                        <g id="Dribbble-Light-Preview" transform="translate(-60.000000, -7439.000000)"
+                                            fill="var(--foreground)">
+                                            <g id="icons" transform="translate(56.000000, 160.000000)">
+                                                <path
+                                                    d="M13.1458647,7289.43426 C13.1508772,7291.43316 13.1568922,7294.82929 13.1619048,7297.46884 C16.7759398,7297.95757 20.3899749,7298.4613 23.997995,7299 C23.997995,7295.84873 24.002005,7292.71146 23.997995,7289.71311 C20.3809524,7289.71311 16.7649123,7289.43426 13.1458647,7289.43426 M4,7289.43526 L4,7296.22153 C6.72581454,7296.58933 9.45162907,7296.94113 12.1724311,7297.34291 C12.1774436,7294.71736 12.1704261,7292.0908 12.1704261,7289.46524 C9.44661654,7289.47024 6.72380952,7289.42627 4,7289.43526 M4,7281.84344 L4,7288.61071 C6.72581454,7288.61771 9.45162907,7288.57673 12.1774436,7288.57973 C12.1754386,7285.96017 12.1754386,7283.34361 12.1724311,7280.72405 C9.44461153,7281.06486 6.71679198,7281.42567 4,7281.84344 M24,7288.47179 C20.3879699,7288.48578 16.7759398,7288.54075 13.1619048,7288.55175 C13.1598997,7285.88921 13.1598997,7283.22967 13.1619048,7280.56914 C16.7689223,7280.01844 20.3839599,7279.50072 23.997995,7279 C24,7282.15826 23.997995,7285.31353 24,7288.47179"
+                                                    id="windows-[#FFF174]"></path>
                                             </g>
                                         </g>
                                     </g>
-                                </svg>
-                            </div>
-                            <br />
-                            <div style="display: flex; justify-content: center">
-                                <a
-                                    id="download-windows-btn"
-                                    class="btn-secondary"
-                                    href="https://downloads.samidy.com/Monochrome-Windows.exe"
-                                    >Download Windows Version</a
-                                >
-                            </div>
-                            <br />
-                            <div class="download-buttons-icons-linux" style="display: flex; justify-content: center">
-                                <svg
-                                    width="96px"
-                                    height="96px"
-                                    viewBox="0 0 16 16"
-                                    xmlns="http://www.w3.org/2000/svg"
-                                    fill="none"
-                                    stroke=""
-                                >
-                                    <g stroke-width="0"></g>
-                                    <g stroke-linecap="round" stroke-linejoin="round"></g>
-                                    <g>
-                                        <path
-                                            fill="var(--foreground)"
-                                            d="M8.294 1c-.09 0-.184.005-.28.012-2.465.194-1.811 2.804-1.85 3.674-.043.637-.174 1.14-.612 1.762-.516.613-1.24 1.604-1.584 2.637-.162.485-.24.982-.167 1.452a.247.247 0 00-.064.079c-.152.156-.263.35-.387.49-.116.115-.283.155-.465.232-.183.08-.384.157-.504.397a.78.78 0 00-.077.351c0 .116.016.234.032.313.034.233.068.425.023.566-.145.396-.163.668-.062.865.102.195.313.275.549.351.472.117 1.114.079 1.618.35.54.272 1.088.39 1.526.274.307-.067.566-.27.705-.552.342-.001.717-.157 1.318-.194.408-.034.918.155 1.503.116.015.078.037.116.067.194l.001.002c.229.454.65.66 1.1.625.45-.035.928-.313 1.316-.762.368-.446.982-.632 1.387-.877.203-.116.367-.273.379-.497.013-.234-.117-.473-.417-.803v-.056l-.002-.002c-.099-.117-.145-.312-.197-.54-.05-.234-.106-.459-.287-.61h-.001c-.035-.032-.072-.04-.11-.08a.208.208 0 00-.11-.037c.25-.745.153-1.487-.102-2.154-.31-.823-.854-1.54-1.269-2.032-.464-.587-.919-1.142-.91-1.965.016-1.255.138-3.578-2.067-3.581zm.309 1.986h.007c.125 0 .231.036.34.116a.89.89 0 01.256.31c.062.152.093.268.097.423 0-.012.004-.023.004-.035v.061a.05.05 0 01-.003-.012l-.002-.014c-.001.142-.03.282-.087.412a.556.556 0 01-.125.195.415.415 0 00-.051-.024c-.06-.027-.115-.038-.166-.078a.765.765 0 00-.128-.038c.03-.035.085-.078.107-.116a.69.69 0 00.051-.234V3.94a.706.706 0 00-.035-.233c-.027-.079-.06-.117-.107-.195-.05-.038-.098-.077-.156-.077h-.01c-.054 0-.102.018-.152.077a.467.467 0 00-.12.195.688.688 0 00-.052.234v.01c0 .053.004.105.011.156-.112-.039-.255-.078-.354-.117a.954.954 0 01-.01-.117V3.86a1.034 1.034 0 01.087-.448.63.63 0 01.251-.31.575.575 0 01.347-.117zm-1.728.035h.02c.084 0 .158.028.234.078a.806.806 0 01.2.272c.053.116.082.233.09.389v.002a.856.856 0 01-.002.155v.047l-.048.014c-.089.032-.16.079-.23.117a.633.633 0 00.002-.156V3.93c-.007-.078-.023-.117-.047-.194a.358.358 0 00-.097-.156.145.145 0 00-.107-.037h-.012c-.042.003-.076.023-.109.077a.322.322 0 00-.07.157.55.55 0 00-.013.193v.008c.007.08.021.117.047.195a.363.363 0 00.096.157c.006.005.012.01.02.014-.04.033-.068.04-.102.079a.177.177 0 01-.077.04 1.53 1.53 0 01-.16-.235 1.034 1.034 0 01-.09-.389c-.01-.132.005-.264.046-.39a.834.834 0 01.165-.312c.075-.077.152-.116.244-.116zm.799.995c.194 0 .428.038.71.233.17.116.304.157.613.273h.002c.149.079.236.155.279.232v-.076a.333.333 0 01.009.274c-.072.18-.301.375-.62.491v.001c-.156.08-.292.195-.452.272-.161.078-.343.17-.59.155a.664.664 0 01-.262-.039 2.077 2.077 0 01-.188-.115c-.113-.079-.211-.194-.357-.271v-.003h-.003c-.233-.144-.359-.299-.4-.414-.04-.157-.003-.275.113-.35.13-.08.221-.159.282-.197.06-.043.083-.059.102-.076h.001v-.002c.099-.117.255-.274.49-.35.08-.021.171-.038.272-.038h-.001zm1.633 1.25c.21.826.698 2.026 1.012 2.609.167.311.5.967.643 1.764.091-.003.193.01.3.037.376-.975-.319-2.022-.636-2.314-.128-.116-.135-.195-.071-.195.344.312.796.917.96 1.608.075.312.093.644.012.974.039.017.079.035.12.04.601.311.824.547.717.896v-.025c-.035-.002-.07 0-.105 0h-.01c.089-.272-.106-.481-.62-.714-.534-.233-.96-.196-1.033.271-.005.025-.008.039-.01.079-.04.013-.082.03-.123.037-.25.157-.386.39-.462.693-.076.31-.1.674-.12 1.09v.002c-.011.195-.099.489-.186.787-.875.626-2.088.897-3.12.195a1.543 1.543 0 00-.234-.31.846.846 0 00-.16-.195.963.963 0 00.27-.04.359.359 0 00.184-.194c.063-.156 0-.407-.201-.678-.201-.273-.543-.58-1.043-.888-.368-.233-.575-.507-.671-.814-.096-.312-.083-.633-.009-.96.143-.624.51-1.23.743-1.611.063-.038.022.078-.238.568-.23.438-.665 1.456-.07 2.248.022-.578.15-1.146.377-1.678.329-.745 1.016-2.044 1.07-3.073.029.021.127.08.17.118.126.078.22.194.343.271a.694.694 0 00.511.196l.065.003c.24 0 .425-.078.581-.156.17-.078.304-.195.432-.233h.003c.272-.08.487-.235.609-.409zm1.275 5.225c.021.35.2.726.514.803.343.078.837-.194 1.045-.446l.123-.006c.184-.004.337.006.494.156l.002.002c.121.116.178.31.228.511.05.233.09.455.239.622.283.307.376.528.37.665l.003-.004v.01l-.002-.007c-.009.153-.108.231-.29.347-.368.234-1.02.416-1.434.916-.36.43-.8.665-1.188.695-.387.03-.721-.117-.918-.524l-.003-.002c-.122-.233-.07-.597.033-.985.103-.39.25-.784.27-1.107.022-.417.044-.779.114-1.058.07-.271.18-.465.374-.574l.026-.013v-.001zm-6.308.028h.006a.53.53 0 01.091.009c.22.032.412.194.597.438l.53.97.003.003c.141.31.44.62.693.955.253.348.45.66.425.915v.004c-.033.434-.28.67-.656.755-.376.079-.887 0-1.397-.27-.565-.314-1.235-.274-1.667-.352-.215-.039-.355-.117-.421-.233-.064-.117-.066-.352.071-.718v-.002l.002-.002c.068-.195.017-.439-.016-.652-.032-.234-.049-.414.025-.549.093-.194.23-.233.402-.31.172-.08.374-.118.534-.275h.001c.15-.157.26-.351.39-.49.11-.117.222-.196.387-.196zM8.45 5.226c-.254.117-.551.312-.868.312-.316 0-.566-.155-.747-.272-.09-.078-.163-.156-.217-.195-.096-.078-.084-.194-.044-.194.064.01.076.078.117.117.056.038.125.116.21.194.17.116.396.272.68.272.283 0 .615-.156.816-.272.114-.078.26-.194.378-.272.09-.08.087-.156.163-.156.074.01.02.078-.086.194-.13.098-.264.189-.403.273zm-.631-.923V4.29c-.004-.012.007-.024.017-.03.043-.024.105-.015.151.003.037 0 .094.04.088.079-.004.029-.05.038-.079.038-.032 0-.054-.025-.082-.04-.03-.01-.085-.004-.095-.037zm-.322 0c-.011.034-.066.028-.097.038-.027.015-.05.04-.081.04-.03 0-.076-.012-.08-.04-.005-.038.052-.077.088-.077.047-.018.107-.028.151-.003.011.005.021.017.018.029v.012h.001z"
-                                        ></path>
-                                    </g>
-                                </svg>
-                            </div>
-                            <br />
-                            <div style="display: flex; justify-content: center">
-                                <a
-                                    id="download-linux-btn"
-                                    class="btn-secondary"
-                                    href="https://downloads.samidy.com/Monochrome-linux.zip"
-                                    >Download Linux Version</a
-                                >
-                            </div>
-                            <br />
-                            <p style="text-align: center; color: #8b8b93">
-                                Note for Linux version: Please Follow the README.md to install Monochrome.
-                            </p>
+                                </g>
+                            </svg>
                         </div>
                         <br />
-                        <h4 style="text-align: center; padding-top: 15px; color: #8b8b93">
-                            The App is still in Beta. Please report any issues in our
-                            <a href="https://monochrome.samidy.com/discord" style="text-decoration: underline"
-                                >Discord server.</a
-                            >
-                        </h4>
-                    </div>
-                </div>
-                <div id="page-donate" class="page">
-                    <h2 class="section-title" style="text-align: center">Donate to Monochrome</h2>
-                    <div class="donate-content">
-                        <p style="text-align: center" class="donate-description">
-                            If Monochrome has been useful to you and you're able to, consider making a donation. <br />
-                            It helps pay for the domain, and you get to support us :)
+                        <div style="display: flex; justify-content: center">
+                            <a id="download-windows-btn" class="btn-secondary"
+                                href="https://downloads.samidy.com/Monochrome-Windows.exe">Download Windows Version</a>
+                        </div>
+                        <br />
+                        <div class="download-buttons-icons-linux" style="display: flex; justify-content: center">
+                            <svg width="96px" height="96px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
+                                fill="none" stroke="">
+                                <g stroke-width="0"></g>
+                                <g stroke-linecap="round" stroke-linejoin="round"></g>
+                                <g>
+                                    <path fill="var(--foreground)"
+                                        d="M8.294 1c-.09 0-.184.005-.28.012-2.465.194-1.811 2.804-1.85 3.674-.043.637-.174 1.14-.612 1.762-.516.613-1.24 1.604-1.584 2.637-.162.485-.24.982-.167 1.452a.247.247 0 00-.064.079c-.152.156-.263.35-.387.49-.116.115-.283.155-.465.232-.183.08-.384.157-.504.397a.78.78 0 00-.077.351c0 .116.016.234.032.313.034.233.068.425.023.566-.145.396-.163.668-.062.865.102.195.313.275.549.351.472.117 1.114.079 1.618.35.54.272 1.088.39 1.526.274.307-.067.566-.27.705-.552.342-.001.717-.157 1.318-.194.408-.034.918.155 1.503.116.015.078.037.116.067.194l.001.002c.229.454.65.66 1.1.625.45-.035.928-.313 1.316-.762.368-.446.982-.632 1.387-.877.203-.116.367-.273.379-.497.013-.234-.117-.473-.417-.803v-.056l-.002-.002c-.099-.117-.145-.312-.197-.54-.05-.234-.106-.459-.287-.61h-.001c-.035-.032-.072-.04-.11-.08a.208.208 0 00-.11-.037c.25-.745.153-1.487-.102-2.154-.31-.823-.854-1.54-1.269-2.032-.464-.587-.919-1.142-.91-1.965.016-1.255.138-3.578-2.067-3.581zm.309 1.986h.007c.125 0 .231.036.34.116a.89.89 0 01.256.31c.062.152.093.268.097.423 0-.012.004-.023.004-.035v.061a.05.05 0 01-.003-.012l-.002-.014c-.001.142-.03.282-.087.412a.556.556 0 01-.125.195.415.415 0 00-.051-.024c-.06-.027-.115-.038-.166-.078a.765.765 0 00-.128-.038c.03-.035.085-.078.107-.116a.69.69 0 00.051-.234V3.94a.706.706 0 00-.035-.233c-.027-.079-.06-.117-.107-.195-.05-.038-.098-.077-.156-.077h-.01c-.054 0-.102.018-.152.077a.467.467 0 00-.12.195.688.688 0 00-.052.234v.01c0 .053.004.105.011.156-.112-.039-.255-.078-.354-.117a.954.954 0 01-.01-.117V3.86a1.034 1.034 0 01.087-.448.63.63 0 01.251-.31.575.575 0 01.347-.117zm-1.728.035h.02c.084 0 .158.028.234.078a.806.806 0 01.2.272c.053.116.082.233.09.389v.002a.856.856 0 01-.002.155v.047l-.048.014c-.089.032-.16.079-.23.117a.633.633 0 00.002-.156V3.93c-.007-.078-.023-.117-.047-.194a.358.358 0 00-.097-.156.145.145 0 00-.107-.037h-.012c-.042.003-.076.023-.109.077a.322.322 0 00-.07.157.55.55 0 00-.013.193v.008c.007.08.021.117.047.195a.363.363 0 00.096.157c.006.005.012.01.02.014-.04.033-.068.04-.102.079a.177.177 0 01-.077.04 1.53 1.53 0 01-.16-.235 1.034 1.034 0 01-.09-.389c-.01-.132.005-.264.046-.39a.834.834 0 01.165-.312c.075-.077.152-.116.244-.116zm.799.995c.194 0 .428.038.71.233.17.116.304.157.613.273h.002c.149.079.236.155.279.232v-.076a.333.333 0 01.009.274c-.072.18-.301.375-.62.491v.001c-.156.08-.292.195-.452.272-.161.078-.343.17-.59.155a.664.664 0 01-.262-.039 2.077 2.077 0 01-.188-.115c-.113-.079-.211-.194-.357-.271v-.003h-.003c-.233-.144-.359-.299-.4-.414-.04-.157-.003-.275.113-.35.13-.08.221-.159.282-.197.06-.043.083-.059.102-.076h.001v-.002c.099-.117.255-.274.49-.35.08-.021.171-.038.272-.038h-.001zm1.633 1.25c.21.826.698 2.026 1.012 2.609.167.311.5.967.643 1.764.091-.003.193.01.3.037.376-.975-.319-2.022-.636-2.314-.128-.116-.135-.195-.071-.195.344.312.796.917.96 1.608.075.312.093.644.012.974.039.017.079.035.12.04.601.311.824.547.717.896v-.025c-.035-.002-.07 0-.105 0h-.01c.089-.272-.106-.481-.62-.714-.534-.233-.96-.196-1.033.271-.005.025-.008.039-.01.079-.04.013-.082.03-.123.037-.25.157-.386.39-.462.693-.076.31-.1.674-.12 1.09v.002c-.011.195-.099.489-.186.787-.875.626-2.088.897-3.12.195a1.543 1.543 0 00-.234-.31.846.846 0 00-.16-.195.963.963 0 00.27-.04.359.359 0 00.184-.194c.063-.156 0-.407-.201-.678-.201-.273-.543-.58-1.043-.888-.368-.233-.575-.507-.671-.814-.096-.312-.083-.633-.009-.96.143-.624.51-1.23.743-1.611.063-.038.022.078-.238.568-.23.438-.665 1.456-.07 2.248.022-.578.15-1.146.377-1.678.329-.745 1.016-2.044 1.07-3.073.029.021.127.08.17.118.126.078.22.194.343.271a.694.694 0 00.511.196l.065.003c.24 0 .425-.078.581-.156.17-.078.304-.195.432-.233h.003c.272-.08.487-.235.609-.409zm1.275 5.225c.021.35.2.726.514.803.343.078.837-.194 1.045-.446l.123-.006c.184-.004.337.006.494.156l.002.002c.121.116.178.31.228.511.05.233.09.455.239.622.283.307.376.528.37.665l.003-.004v.01l-.002-.007c-.009.153-.108.231-.29.347-.368.234-1.02.416-1.434.916-.36.43-.8.665-1.188.695-.387.03-.721-.117-.918-.524l-.003-.002c-.122-.233-.07-.597.033-.985.103-.39.25-.784.27-1.107.022-.417.044-.779.114-1.058.07-.271.18-.465.374-.574l.026-.013v-.001zm-6.308.028h.006a.53.53 0 01.091.009c.22.032.412.194.597.438l.53.97.003.003c.141.31.44.62.693.955.253.348.45.66.425.915v.004c-.033.434-.28.67-.656.755-.376.079-.887 0-1.397-.27-.565-.314-1.235-.274-1.667-.352-.215-.039-.355-.117-.421-.233-.064-.117-.066-.352.071-.718v-.002l.002-.002c.068-.195.017-.439-.016-.652-.032-.234-.049-.414.025-.549.093-.194.23-.233.402-.31.172-.08.374-.118.534-.275h.001c.15-.157.26-.351.39-.49.11-.117.222-.196.387-.196zM8.45 5.226c-.254.117-.551.312-.868.312-.316 0-.566-.155-.747-.272-.09-.078-.163-.156-.217-.195-.096-.078-.084-.194-.044-.194.064.01.076.078.117.117.056.038.125.116.21.194.17.116.396.272.68.272.283 0 .615-.156.816-.272.114-.078.26-.194.378-.272.09-.08.087-.156.163-.156.074.01.02.078-.086.194-.13.098-.264.189-.403.273zm-.631-.923V4.29c-.004-.012.007-.024.017-.03.043-.024.105-.015.151.003.037 0 .094.04.088.079-.004.029-.05.038-.079.038-.032 0-.054-.025-.082-.04-.03-.01-.085-.004-.095-.037zm-.322 0c-.011.034-.066.028-.097.038-.027.015-.05.04-.081.04-.03 0-.076-.012-.08-.04-.005-.038.052-.077.088-.077.047-.018.107-.028.151-.003.011.005.021.017.018.029v.012h.001z">
+                                    </path>
+                                </g>
+                            </svg>
+                        </div>
+                        <br />
+                        <div style="display: flex; justify-content: center">
+                            <a id="download-linux-btn" class="btn-secondary"
+                                href="https://downloads.samidy.com/Monochrome-linux.zip">Download Linux Version</a>
+                        </div>
+                        <br />
+                        <p style="text-align: center; color: #8b8b93">
+                            Note for Linux version: Please Follow the README.md to install Monochrome.
                         </p>
-                        <button id="donate-btn-page" class="btn-secondary">Donate to Monochrome</button>
                     </div>
+                    <br />
+                    <h4 style="text-align: center; padding-top: 15px; color: #8b8b93">
+                        The App is still in Beta. Please report any issues in our
+                        <a href="https://monochrome.samidy.com/discord" style="text-decoration: underline">Discord
+                            server.</a>
+                    </h4>
                 </div>
-            </main>
+            </div>
+            <div id="page-donate" class="page">
+                <h2 class="section-title" style="text-align: center">Donate to Monochrome</h2>
+                <div class="donate-content">
+                    <p style="text-align: center" class="donate-description">
+                        If Monochrome has been useful to you and you're able to, consider making a donation. <br />
+                        It helps pay for the domain, and you get to support us :)
+                    </p>
+                    <button id="donate-btn-page" class="btn-secondary">Donate to Monochrome</button>
+                </div>
+            </div>
+        </main>
 
-            <footer class="now-playing-bar">
-                <div class="track-info">
-                    <img src="/assets/appicon.png" alt="Current Track Cover" class="cover" />
-                    <div class="details">
-                        <div class="title">Select a song</div>
-                        <div class="album"></div>
-                        <div class="artist"></div>
-                    </div>
+        <footer class="now-playing-bar">
+            <div class="track-info">
+                <img src="/assets/appicon.png" alt="Current Track Cover" class="cover" />
+                <div class="details">
+                    <div class="title">Select a song</div>
+                    <div class="album"></div>
+                    <div class="artist"></div>
                 </div>
-                <div class="player-controls">
-                    <div class="buttons">
-                        <button id="shuffle-btn" title="Shuffle">
-                            <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                width="24"
-                                height="24"
-                                viewBox="0 0 24 24"
-                                fill="none"
-                                stroke="currentColor"
-                                stroke-width="2"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                class="lucide lucide-shuffle-icon lucide-shuffle"
-                            >
-                                <path d="m18 14 4 4-4 4" />
-                                <path d="m18 2 4 4-4 4" />
-                                <path d="M2 18h1.973a4 4 0 0 0 3.3-1.7l5.454-8.6a4 4 0 0 1 3.3-1.7H22" />
-                                <path d="M2 6h1.972a4 4 0 0 1 3.6 2.2" />
-                                <path d="M22 18h-6.041a4 4 0 0 1-3.3-1.8l-.359-.45" />
-                            </svg>
-                        </button>
-                        <button id="prev-btn" title="Previous">
-                            <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                width="24"
-                                height="24"
-                                viewBox="0 0 24 24"
-                                fill="none"
-                                stroke="currentColor"
-                                stroke-width="2"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                class="lucide lucide-arrow-left-to-line-icon lucide-arrow-left-to-line"
-                            >
-                                <path d="M3 19V5" />
-                                <path d="m13 6-6 6 6 6" />
-                                <path d="M7 12h14" />
-                            </svg>
-                        </button>
-                        <button class="play-pause-btn" title="Play"></button>
-                        <button id="next-btn" title="Next">
-                            <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                width="24"
-                                height="24"
-                                viewBox="0 0 24 24"
-                                fill="none"
-                                stroke="currentColor"
-                                stroke-width="2"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                class="lucide lucide-arrow-right-to-line-icon lucide-arrow-right-to-line"
-                            >
-                                <path d="M17 12H3" />
-                                <path d="m11 18 6-6-6-6" />
-                                <path d="M21 5v14" />
-                            </svg>
-                        </button>
-                        <button id="repeat-btn" title="Repeat">
-                            <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                width="24"
-                                height="24"
-                                viewBox="0 0 24 24"
-                                fill="none"
-                                stroke="currentColor"
-                                stroke-width="2"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                class="lucide lucide-repeat-icon lucide-repeat"
-                            >
-                                <path d="m17 2 4 4-4 4" />
-                                <path d="M3 11v-1a4 4 0 0 1 4-4h14" />
-                                <path d="m7 22-4-4 4-4" />
-                                <path d="M21 13v1a4 4 0 0 1-4 4H3" />
-                            </svg>
-                        </button>
-                    </div>
-                    <div class="progress-container">
-                        <span id="current-time">0:00</span>
-                        <div id="progress-bar" class="progress-bar">
-                            <div id="progress-fill" class="progress-fill"></div>
-                        </div>
-                        <span id="total-duration">0:00</span>
-                    </div>
+            </div>
+            <div class="player-controls">
+                <div class="buttons">
+                    <button id="shuffle-btn" title="Shuffle">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                            class="lucide lucide-shuffle-icon lucide-shuffle">
+                            <path d="m18 14 4 4-4 4" />
+                            <path d="m18 2 4 4-4 4" />
+                            <path d="M2 18h1.973a4 4 0 0 0 3.3-1.7l5.454-8.6a4 4 0 0 1 3.3-1.7H22" />
+                            <path d="M2 6h1.972a4 4 0 0 1 3.6 2.2" />
+                            <path d="M22 18h-6.041a4 4 0 0 1-3.3-1.8l-.359-.45" />
+                        </svg>
+                    </button>
+                    <button id="prev-btn" title="Previous">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                            class="lucide lucide-arrow-left-to-line-icon lucide-arrow-left-to-line">
+                            <path d="M3 19V5" />
+                            <path d="m13 6-6 6 6 6" />
+                            <path d="M7 12h14" />
+                        </svg>
+                    </button>
+                    <button class="play-pause-btn" title="Play"></button>
+                    <button id="next-btn" title="Next">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                            class="lucide lucide-arrow-right-to-line-icon lucide-arrow-right-to-line">
+                            <path d="M17 12H3" />
+                            <path d="m11 18 6-6-6-6" />
+                            <path d="M21 5v14" />
+                        </svg>
+                    </button>
+                    <button id="repeat-btn" title="Repeat">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                            class="lucide lucide-repeat-icon lucide-repeat">
+                            <path d="m17 2 4 4-4 4" />
+                            <path d="M3 11v-1a4 4 0 0 1 4-4h14" />
+                            <path d="m7 22-4-4 4-4" />
+                            <path d="M21 13v1a4 4 0 0 1-4 4H3" />
+                        </svg>
+                    </button>
                 </div>
-                <div class="volume-controls">
-                    <div class="player-actions-row">
-                        <button
-                            id="now-playing-like-btn"
-                            class="like-btn"
-                            data-action="toggle-like"
-                            title="Save to Favorites"
-                            style="display: none"
-                        ></button>
-                        <button
-                            id="now-playing-add-playlist-btn"
-                            title="Add to Playlist"
-                            class="desktop-only"
-                            style="display: none"
-                        >
-                            <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                width="20"
-                                height="20"
-                                viewBox="0 0 24 24"
-                                fill="none"
-                                stroke="currentColor"
-                                stroke-width="2"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                            >
-                                <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
-                                <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
-                            </svg>
-                        </button>
+                <div class="progress-container">
+                    <span id="current-time">0:00</span>
+                    <div id="progress-bar" class="progress-bar">
+                        <div id="progress-fill" class="progress-fill"></div>
+                    </div>
+                    <span id="total-duration">0:00</span>
+                </div>
+            </div>
+            <div class="volume-controls">
+                <div class="player-actions-row">
+                    <button id="now-playing-like-btn" class="like-btn" data-action="toggle-like"
+                        title="Save to Favorites" style="display: none"></button>
+                    <button id="now-playing-add-playlist-btn" title="Add to Playlist" class="desktop-only"
+                        style="display: none">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
+                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+                            <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+                        </svg>
+                    </button>
 
-                        <button
-                            id="now-playing-mix-btn"
-                            class="mix-btn"
-                            data-action="track-mix"
-                            title="Track Mix"
-                            style="display: none"
-                        >
-                            <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                width="20"
-                                height="20"
-                                viewBox="0 0 24 24"
-                                fill="currentColor"
-                            >
-                                <path
-                                    d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"
-                                />
-                            </svg>
-                        </button>
-                        <button id="toggle-lyrics-btn" title="Lyrics" style="display: none">
-                            <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                width="20"
-                                height="20"
-                                viewBox="0 0 24 24"
-                                fill="none"
-                                stroke="currentColor"
-                                stroke-width="2"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                class="lucide lucide-mic"
-                            >
-                                <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" />
-                                <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
-                                <line x1="12" y1="19" x2="12" y2="22" />
-                                <line x1="8" y1="22" x2="16" y2="22" />
-                            </svg>
-                        </button>
-                        <button id="download-current-btn" title="Download current track" class="desktop-only">
-                            <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                width="20"
-                                height="20"
-                                viewBox="0 0 24 24"
-                                fill="none"
-                                stroke="currentColor"
-                                stroke-width="2"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                            >
-                                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
-                                <polyline points="7 10 12 15 17 10"></polyline>
-                                <line x1="12" y1="15" x2="12" y2="3"></line>
-                            </svg>
-                        </button>
-                        <button id="cast-btn" title="Cast">
-                            <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                width="20"
-                                height="20"
-                                viewBox="0 0 24 24"
-                                fill="none"
-                                stroke="currentColor"
-                                stroke-width="2"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                            >
-                                <path d="M2 8V6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6"></path>
-                                <path d="M2 12a9 9 0 0 1 9 9"></path>
-                                <path d="M2 17a5 5 0 0 1 5 5"></path>
-                                <path d="M2 22h.01"></path>
-                            </svg>
-                        </button>
+                    <button id="now-playing-mix-btn" class="mix-btn" data-action="track-mix" title="Track Mix"
+                        style="display: none">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
+                            fill="currentColor">
+                            <path
+                                d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z" />
+                        </svg>
+                    </button>
+                    <button id="toggle-lyrics-btn" title="Lyrics" style="display: none">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
+                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                            class="lucide lucide-mic">
+                            <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" />
+                            <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
+                            <line x1="12" y1="19" x2="12" y2="22" />
+                            <line x1="8" y1="22" x2="16" y2="22" />
+                        </svg>
+                    </button>
+                    <button id="download-current-btn" title="Download current track" class="desktop-only">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
+                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                            <polyline points="7 10 12 15 17 10"></polyline>
+                            <line x1="12" y1="15" x2="12" y2="3"></line>
+                        </svg>
+                    </button>
+                    <button id="cast-btn" title="Cast">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
+                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <path d="M2 8V6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6"></path>
+                            <path d="M2 12a9 9 0 0 1 9 9"></path>
+                            <path d="M2 17a5 5 0 0 1 5 5"></path>
+                            <path d="M2 22h.01"></path>
+                        </svg>
+                    </button>
 
-                        <button id="mobile-add-playlist-btn" class="mobile-only" style="display: none !important">
-                            <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                width="20"
-                                height="20"
-                                viewBox="0 0 24 24"
-                                fill="none"
-                                stroke="currentColor"
-                                stroke-width="2"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                            >
-                                <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
-                                <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
-                            </svg>
-                        </button>
-                        <button id="sleep-timer-btn" title="Sleep Timer" class="mobile-only">
-                            <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                width="20"
-                                height="20"
-                                viewBox="0 0 24 24"
-                                fill="none"
-                                stroke="currentColor"
-                                stroke-width="2"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                            >
-                                <circle cx="12" cy="12" r="10" />
-                                <polyline points="12,6 12,12 16,14" />
-                            </svg>
-                        </button>
-                        <button id="queue-btn" title="Queue">
-                            <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                width="24"
-                                height="24"
-                                viewBox="0 0 24 24"
-                                fill="none"
-                                stroke="currentColor"
-                                stroke-width="2"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                class="lucide lucide-list-icon lucide-list"
-                            >
-                                <path d="M3 5h.01" />
-                                <path d="M3 12h.01" />
-                                <path d="M3 19h.01" />
-                                <path d="M8 5h13" />
-                                <path d="M8 12h13" />
-                                <path d="M8 19h13" />
-                            </svg>
-                        </button>
-                    </div>
-                    <div class="volume-slider-row desktop-only">
-                        <button id="volume-btn" title="Mute"></button>
-                        <div id="volume-bar" class="volume-bar">
-                            <div id="volume-fill" class="volume-fill"></div>
-                        </div>
-                        <button id="sleep-timer-btn-desktop" title="Sleep Timer">
-                            <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                width="20"
-                                height="20"
-                                viewBox="0 0 24 24"
-                                fill="none"
-                                stroke="currentColor"
-                                stroke-width="2"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                            >
-                                <circle cx="12" cy="12" r="10" />
-                                <polyline points="12,6 12,12 16,14" />
-                            </svg>
-                        </button>
-                    </div>
+                    <button id="mobile-add-playlist-btn" class="mobile-only" style="display: none !important">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
+                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+                            <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+                        </svg>
+                    </button>
+                    <button id="sleep-timer-btn" title="Sleep Timer" class="mobile-only">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
+                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <circle cx="12" cy="12" r="10" />
+                            <polyline points="12,6 12,12 16,14" />
+                        </svg>
+                    </button>
+                    <button id="queue-btn" title="Queue">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                            class="lucide lucide-list-icon lucide-list">
+                            <path d="M3 5h.01" />
+                            <path d="M3 12h.01" />
+                            <path d="M3 19h.01" />
+                            <path d="M8 5h13" />
+                            <path d="M8 12h13" />
+                            <path d="M8 19h13" />
+                        </svg>
+                    </button>
                 </div>
-            </footer>
-        </div>
-        <script src="https://unpkg.com/@studio-freight/lenis"></script>
-        <script src="https://cdn.jsdelivr.net/npm/pocketbase@0.21.3/dist/pocketbase.umd.js"></script>
-        <script type="module" src="/js/app.js"></script>
-    </body>
-</html>
+                <div class="volume-slider-row desktop-only">
+                    <button id="volume-btn" title="Mute"></button>
+                    <div id="volume-bar" class="volume-bar">
+                        <div id="volume-fill" class="volume-fill"></div>
+                    </div>
+                    <button id="sleep-timer-btn-desktop" title="Sleep Timer">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
+                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <circle cx="12" cy="12" r="10" />
+                            <polyline points="12,6 12,12 16,14" />
+                        </svg>
+                    </button>
+                </div>
+            </div>
+        </footer>
+    </div>
+    <script src="https://unpkg.com/@studio-freight/lenis"></script>
+    <script src="https://cdn.jsdelivr.net/npm/pocketbase@0.21.3/dist/pocketbase.umd.js"></script>
+    <script type="module" src="/js/app.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/js/audio-context.js b/js/audio-context.js
new file mode 100644
index 0000000..b8e789f
--- /dev/null
+++ b/js/audio-context.js
@@ -0,0 +1,308 @@
+// js/audio-context.js
+// Shared Audio Context Manager - handles EQ and provides context for visualizer
+
+import { equalizerSettings } from './storage.js';
+
+// Standard 16-band ISO center frequencies (Hz)
+const EQ_FREQUENCIES = [
+    25, 40, 63, 100, 160, 250, 400, 630,
+    1000, 1600, 2500, 4000, 6300, 10000, 16000, 20000
+];
+
+// EQ Presets (gain values in dB for each of the 16 bands)
+const EQ_PRESETS = {
+    flat: {
+        name: 'Flat',
+        gains: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+    },
+    bass_boost: {
+        name: 'Bass Boost',
+        gains: [6, 5, 4.5, 4, 3, 2, 1, 0.5, 0, 0, 0, 0, 0, 0, 0, 0]
+    },
+    bass_reducer: {
+        name: 'Bass Reducer',
+        gains: [-6, -5, -4, -3, -2, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+    },
+    treble_boost: {
+        name: 'Treble Boost',
+        gains: [0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 3, 4, 5, 5.5, 6]
+    },
+    treble_reducer: {
+        name: 'Treble Reducer',
+        gains: [0, 0, 0, 0, 0, 0, 0, 0, 0, -1, -2, -3, -4, -5, -5.5, -6]
+    },
+    vocal_boost: {
+        name: 'Vocal Boost',
+        gains: [-2, -1, 0, 0, 1, 2, 3, 4, 4, 3, 2, 1, 0, 0, -1, -2]
+    },
+    loudness: {
+        name: 'Loudness',
+        gains: [5, 4, 3, 1, 0, -1, -1, 0, 0, 1, 2, 3, 4, 4.5, 4, 3]
+    },
+    rock: {
+        name: 'Rock',
+        gains: [4, 3.5, 3, 2, -1, -2, -1, 1, 2, 3, 3.5, 4, 4, 3, 2, 1]
+    },
+    pop: {
+        name: 'Pop',
+        gains: [-1, 0, 1, 2, 3, 3, 2, 1, 0, 1, 2, 2, 2, 2, 1, 0]
+    },
+    classical: {
+        name: 'Classical',
+        gains: [3, 2, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 3, 3, 2]
+    },
+    jazz: {
+        name: 'Jazz',
+        gains: [3, 2, 1, 1, -1, -1, 0, 1, 2, 2, 2, 2, 2, 2, 2, 2]
+    },
+    electronic: {
+        name: 'Electronic',
+        gains: [4, 3.5, 3, 1, 0, -1, 0, 1, 2, 3, 3, 2, 2, 3, 4, 3.5]
+    },
+    hip_hop: {
+        name: 'Hip-Hop',
+        gains: [5, 4.5, 4, 3, 1, 0, 0, 1, 1, 1, 1, 1, 1, 2, 2, 2]
+    },
+    r_and_b: {
+        name: 'R&B',
+        gains: [3, 5, 4, 2, 1, 0, 1, 1, 1, 1, 2, 2, 2, 1, 1, 1]
+    },
+    acoustic: {
+        name: 'Acoustic',
+        gains: [3, 2, 1, 1, 2, 2, 1, 0, 0, 1, 1, 2, 3, 3, 2, 1]
+    },
+    podcast: {
+        name: 'Podcast / Speech',
+        gains: [-3, -2, -1, 0, 1, 2, 3, 4, 4, 3, 2, 1, 0, -1, -2, -3]
+    }
+};
+
+class AudioContextManager {
+    constructor() {
+        this.audioContext = null;
+        this.source = null;
+        this.analyser = null;
+        this.filters = [];
+        this.outputNode = null;
+        this.isInitialized = false;
+        this.isEQEnabled = false;
+        this.currentGains = new Array(16).fill(0);
+        this.audio = null;
+
+        // Load saved settings
+        this._loadSettings();
+    }
+
+    /**
+     * Initialize the audio context and connect to the audio element
+     * This should be called when audio starts playing
+     */
+    init(audioElement) {
+        if (this.isInitialized) return;
+        if (!audioElement) return;
+
+        try {
+            this.audio = audioElement;
+
+            const AudioContext = window.AudioContext || window.webkitAudioContext;
+            this.audioContext = new AudioContext();
+
+            // Create the media element source
+            this.source = this.audioContext.createMediaElementSource(audioElement);
+
+            // Create analyser for visualizer
+            this.analyser = this.audioContext.createAnalyser();
+            this.analyser.fftSize = 512;
+            this.analyser.smoothingTimeConstant = 0.7;
+
+            // Create 16 biquad filters for EQ
+            this.filters = EQ_FREQUENCIES.map((freq, index) => {
+                const filter = this.audioContext.createBiquadFilter();
+                filter.type = 'peaking';
+                filter.frequency.value = freq;
+                filter.Q.value = 2.5; // Constant-Q design
+                filter.gain.value = this.currentGains[index];
+                return filter;
+            });
+
+            // Create output gain node
+            this.outputNode = this.audioContext.createGain();
+            this.outputNode.gain.value = 1;
+
+            // Connect filter chain: filter[0] -> filter[1] -> ... -> filter[15] -> outputNode
+            for (let i = 0; i < this.filters.length - 1; i++) {
+                this.filters[i].connect(this.filters[i + 1]);
+            }
+            this.filters[this.filters.length - 1].connect(this.outputNode);
+
+            // Connect the audio graph based on EQ state
+            this._connectGraph();
+
+            this.isInitialized = true;
+            console.log('[AudioContext] Initialized with 16-band EQ');
+        } catch (e) {
+            console.warn('[AudioContext] Init failed:', e);
+        }
+    }
+
+    /**
+     * Connect the audio graph based on EQ enabled state
+     */
+    _connectGraph() {
+        if (!this.source || !this.audioContext) return;
+
+        try {
+            // Disconnect everything first
+            this.source.disconnect();
+            this.outputNode.disconnect();
+            this.analyser.disconnect();
+
+            if (this.isEQEnabled && this.filters.length > 0) {
+                // EQ enabled: source -> EQ filters -> output -> analyser -> destination
+                this.source.connect(this.filters[0]);
+                this.outputNode.connect(this.analyser);
+                this.analyser.connect(this.audioContext.destination);
+                console.log('[AudioContext] EQ connected');
+            } else {
+                // EQ disabled: source -> analyser -> destination
+                this.source.connect(this.analyser);
+                this.analyser.connect(this.audioContext.destination);
+                console.log('[AudioContext] EQ bypassed');
+            }
+        } catch (e) {
+            console.warn('[AudioContext] Failed to connect graph:', e);
+            // Fallback: direct connection
+            try {
+                this.source.connect(this.audioContext.destination);
+            } catch { }
+        }
+    }
+
+    /**
+     * Resume audio context (required after user interaction)
+     */
+    resume() {
+        if (this.audioContext && this.audioContext.state === 'suspended') {
+            this.audioContext.resume();
+        }
+    }
+
+    /**
+     * Get the analyser node for the visualizer
+     */
+    getAnalyser() {
+        return this.analyser;
+    }
+
+    /**
+     * Get the audio context
+     */
+    getAudioContext() {
+        return this.audioContext;
+    }
+
+    /**
+     * Check if initialized
+     */
+    isReady() {
+        return this.isInitialized;
+    }
+
+    /**
+     * Toggle EQ on/off
+     */
+    toggleEQ(enabled) {
+        this.isEQEnabled = enabled;
+        equalizerSettings.setEnabled(enabled);
+
+        if (this.isInitialized) {
+            this._connectGraph();
+        }
+
+        return this.isEQEnabled;
+    }
+
+    /**
+     * Check if EQ is active
+     */
+    isEQActive() {
+        return this.isInitialized && this.isEQEnabled;
+    }
+
+    /**
+     * Set gain for a specific band
+     */
+    setBandGain(bandIndex, gainDb) {
+        if (bandIndex < 0 || bandIndex >= 16) return;
+
+        const clampedGain = Math.max(-30, Math.min(30, gainDb));
+        this.currentGains[bandIndex] = clampedGain;
+
+        if (this.filters[bandIndex] && this.audioContext) {
+            const now = this.audioContext.currentTime;
+            this.filters[bandIndex].gain.setTargetAtTime(clampedGain, now, 0.01);
+        }
+
+        equalizerSettings.setGains(this.currentGains);
+    }
+
+    /**
+     * Set all band gains at once
+     */
+    setAllGains(gains) {
+        if (!Array.isArray(gains) || gains.length !== 16) return;
+
+        const now = this.audioContext?.currentTime || 0;
+
+        gains.forEach((gain, index) => {
+            const clampedGain = Math.max(-30, Math.min(30, gain));
+            this.currentGains[index] = clampedGain;
+
+            if (this.filters[index]) {
+                this.filters[index].gain.setTargetAtTime(clampedGain, now, 0.01);
+            }
+        });
+
+        equalizerSettings.setGains(this.currentGains);
+    }
+
+    /**
+     * Apply a preset
+     */
+    applyPreset(presetKey) {
+        const preset = EQ_PRESETS[presetKey];
+        if (!preset) return;
+
+        this.setAllGains(preset.gains);
+        equalizerSettings.setPreset(presetKey);
+    }
+
+    /**
+     * Reset all bands to flat
+     */
+    reset() {
+        this.setAllGains(new Array(16).fill(0));
+        equalizerSettings.setPreset('flat');
+    }
+
+    /**
+     * Get current gains
+     */
+    getGains() {
+        return [...this.currentGains];
+    }
+
+    /**
+     * Load settings from storage
+     */
+    _loadSettings() {
+        this.isEQEnabled = equalizerSettings.isEnabled();
+        this.currentGains = equalizerSettings.getGains();
+    }
+}
+
+// Export singleton instance
+export const audioContextManager = new AudioContextManager();
+
+// Export presets for settings UI
+export { EQ_PRESETS };
diff --git a/js/equalizer.js b/js/equalizer.js
new file mode 100644
index 0000000..dce7baa
--- /dev/null
+++ b/js/equalizer.js
@@ -0,0 +1,359 @@
+// js/equalizer.js
+// 16-Band Parametric Equalizer with Web Audio API
+
+import { equalizerSettings } from './storage.js';
+
+// Standard 16-band ISO center frequencies (Hz)
+const EQ_FREQUENCIES = [
+    25, 40, 63, 100, 160, 250, 400, 630,
+    1000, 1600, 2500, 4000, 6300, 10000, 16000, 20000
+];
+
+// Frequency labels for UI display
+const FREQUENCY_LABELS = [
+    '25', '40', '63', '100', '160', '250', '400', '630',
+    '1K', '1.6K', '2.5K', '4K', '6.3K', '10K', '16K', '20K'
+];
+
+// EQ Presets (gain values in dB for each of the 16 bands)
+const EQ_PRESETS = {
+    flat: {
+        name: 'Flat',
+        gains: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+    },
+    bass_boost: {
+        name: 'Bass Boost',
+        gains: [6, 5, 4.5, 4, 3, 2, 1, 0.5, 0, 0, 0, 0, 0, 0, 0, 0]
+    },
+    bass_reducer: {
+        name: 'Bass Reducer',
+        gains: [-6, -5, -4, -3, -2, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+    },
+    treble_boost: {
+        name: 'Treble Boost',
+        gains: [0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 3, 4, 5, 5.5, 6]
+    },
+    treble_reducer: {
+        name: 'Treble Reducer',
+        gains: [0, 0, 0, 0, 0, 0, 0, 0, 0, -1, -2, -3, -4, -5, -5.5, -6]
+    },
+    vocal_boost: {
+        name: 'Vocal Boost',
+        gains: [-2, -1, 0, 0, 1, 2, 3, 4, 4, 3, 2, 1, 0, 0, -1, -2]
+    },
+    loudness: {
+        name: 'Loudness',
+        gains: [5, 4, 3, 1, 0, -1, -1, 0, 0, 1, 2, 3, 4, 4.5, 4, 3]
+    },
+    rock: {
+        name: 'Rock',
+        gains: [4, 3.5, 3, 2, -1, -2, -1, 1, 2, 3, 3.5, 4, 4, 3, 2, 1]
+    },
+    pop: {
+        name: 'Pop',
+        gains: [-1, 0, 1, 2, 3, 3, 2, 1, 0, 1, 2, 2, 2, 2, 1, 0]
+    },
+    classical: {
+        name: 'Classical',
+        gains: [3, 2, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 3, 3, 2]
+    },
+    jazz: {
+        name: 'Jazz',
+        gains: [3, 2, 1, 1, -1, -1, 0, 1, 2, 2, 2, 2, 2, 2, 2, 2]
+    },
+    electronic: {
+        name: 'Electronic',
+        gains: [4, 3.5, 3, 1, 0, -1, 0, 1, 2, 3, 3, 2, 2, 3, 4, 3.5]
+    },
+    hip_hop: {
+        name: 'Hip-Hop',
+        gains: [5, 4.5, 4, 3, 1, 0, 0, 1, 1, 1, 1, 1, 1, 2, 2, 2]
+    },
+    r_and_b: {
+        name: 'R&B',
+        gains: [3, 5, 4, 2, 1, 0, 1, 1, 1, 1, 2, 2, 2, 1, 1, 1]
+    },
+    acoustic: {
+        name: 'Acoustic',
+        gains: [3, 2, 1, 1, 2, 2, 1, 0, 0, 1, 1, 2, 3, 3, 2, 1]
+    },
+    podcast: {
+        name: 'Podcast / Speech',
+        gains: [-3, -2, -1, 0, 1, 2, 3, 4, 4, 3, 2, 1, 0, -1, -2, -3]
+    }
+};
+
+export class Equalizer {
+    constructor() {
+        this.audioContext = null;
+        this.source = null;
+        this.filters = [];
+        this.inputNode = null;
+        this.outputNode = null;
+        this.isEnabled = false;
+        this.isInitialized = false;
+        this.audio = null;
+
+        // Store current gains
+        this.currentGains = new Array(16).fill(0);
+
+        // Load saved settings
+        this._loadSettings();
+    }
+
+    /**
+     * Initialize the equalizer with a shared AudioContext
+     * This should be called after the visualizer creates the context
+     * @param {AudioContext} audioContext - Shared audio context
+     * @param {AudioNode} sourceNode - The MediaElementSource node
+     * @param {HTMLAudioElement} audioElement - The audio element
+     */
+    init(audioContext, sourceNode, audioElement) {
+        if (this.isInitialized) return;
+
+        try {
+            this.audioContext = audioContext;
+            this.source = sourceNode;
+            this.audio = audioElement;
+
+            // Create 16 biquad filters for each frequency band
+            this.filters = EQ_FREQUENCIES.map((freq, index) => {
+                const filter = this.audioContext.createBiquadFilter();
+
+                // Use peaking filter for all bands (best for EQ)
+                filter.type = 'peaking';
+                filter.frequency.value = freq;
+                filter.Q.value = this._calculateQ(index);
+                filter.gain.value = this.currentGains[index];
+
+                return filter;
+            });
+
+            // Create input/output gain nodes for bypass switching
+            this.inputNode = this.audioContext.createGain();
+            this.outputNode = this.audioContext.createGain();
+
+            // Connect the filter chain
+            this._connectFilters();
+
+            this.isInitialized = true;
+
+            // Apply saved enabled state
+            if (this.isEnabled) {
+                this._enableFilters();
+            }
+
+            console.log('[Equalizer] Initialized with 16 bands');
+        } catch (e) {
+            console.warn('[Equalizer] Init failed:', e);
+        }
+    }
+
+    /**
+     * Calculate Q factor for each band
+     * Using constant-Q design for consistent bandwidth
+     */
+    _calculateQ(index) {
+        // For 16-band 1/2 octave spacing, Q ≈ 2.87
+        // Slightly lower Q for smoother response
+        return 2.5;
+    }
+
+    /**
+     * Connect all filters in series
+     */
+    _connectFilters() {
+        if (!this.filters.length) return;
+
+        // Chain filters together
+        for (let i = 0; i < this.filters.length - 1; i++) {
+            this.filters[i].connect(this.filters[i + 1]);
+        }
+
+        // Connect last filter to output
+        this.filters[this.filters.length - 1].connect(this.outputNode);
+    }
+
+    /**
+     * Enable the EQ processing
+     */
+    _enableFilters() {
+        if (!this.isInitialized || !this.source) return;
+
+        // Note: The actual connection handling is done by the visualizer
+        // This just marks the EQ as enabled
+        this.isEnabled = true;
+    }
+
+    /**
+     * Disable the EQ (bypass)
+     */
+    _disableFilters() {
+        this.isEnabled = false;
+    }
+
+    /**
+     * Get the input node for external connection
+     */
+    getInputNode() {
+        return this.filters[0] || null;
+    }
+
+    /**
+     * Get the output node
+     */
+    getOutputNode() {
+        return this.outputNode;
+    }
+
+    /**
+     * Check if EQ is active (enabled and initialized)
+     */
+    isActive() {
+        return this.isInitialized && this.isEnabled;
+    }
+
+    /**
+     * Toggle EQ on/off
+     */
+    toggle(enabled) {
+        this.isEnabled = enabled;
+        equalizerSettings.setEnabled(enabled);
+
+        if (enabled) {
+            this._enableFilters();
+        } else {
+            this._disableFilters();
+        }
+
+        // Dispatch event for visualizer to reconnect
+        window.dispatchEvent(new CustomEvent('equalizer-toggle', {
+            detail: { enabled }
+        }));
+
+        return this.isEnabled;
+    }
+
+    /**
+     * Set gain for a specific band
+     * @param {number} bandIndex - Band index (0-15)
+     * @param {number} gainDb - Gain in dB (-12 to +12)
+     */
+    setBandGain(bandIndex, gainDb) {
+        if (bandIndex < 0 || bandIndex >= 16) return;
+
+        // Clamp gain to valid range
+        const clampedGain = Math.max(-30, Math.min(30, gainDb));
+        this.currentGains[bandIndex] = clampedGain;
+
+        if (this.filters[bandIndex]) {
+            // Smooth transition for clicks prevention
+            const now = this.audioContext?.currentTime || 0;
+            this.filters[bandIndex].gain.setTargetAtTime(clampedGain, now, 0.01);
+        }
+
+        // Save to storage
+        equalizerSettings.setGains(this.currentGains);
+    }
+
+    /**
+     * Set all band gains at once
+     * @param {number[]} gains - Array of 16 gain values in dB
+     */
+    setAllGains(gains) {
+        if (!Array.isArray(gains) || gains.length !== 16) return;
+
+        const now = this.audioContext?.currentTime || 0;
+
+        gains.forEach((gain, index) => {
+            const clampedGain = Math.max(-30, Math.min(30, gain));
+            this.currentGains[index] = clampedGain;
+
+            if (this.filters[index]) {
+                this.filters[index].gain.setTargetAtTime(clampedGain, now, 0.01);
+            }
+        });
+
+        equalizerSettings.setGains(this.currentGains);
+    }
+
+    /**
+     * Apply a preset
+     * @param {string} presetKey - Key from EQ_PRESETS
+     */
+    applyPreset(presetKey) {
+        const preset = EQ_PRESETS[presetKey];
+        if (!preset) return;
+
+        this.setAllGains(preset.gains);
+        equalizerSettings.setPreset(presetKey);
+    }
+
+    /**
+     * Reset all bands to flat (0 dB)
+     */
+    reset() {
+        this.setAllGains(new Array(16).fill(0));
+        equalizerSettings.setPreset('flat');
+    }
+
+    /**
+     * Get current gains
+     * @returns {number[]} Array of 16 gain values
+     */
+    getGains() {
+        return [...this.currentGains];
+    }
+
+    /**
+     * Get frequency labels
+     */
+    static getFrequencyLabels() {
+        return FREQUENCY_LABELS;
+    }
+
+    /**
+     * Get frequencies
+     */
+    static getFrequencies() {
+        return EQ_FREQUENCIES;
+    }
+
+    /**
+     * Get available presets
+     */
+    static getPresets() {
+        return EQ_PRESETS;
+    }
+
+    /**
+     * Load settings from storage
+     */
+    _loadSettings() {
+        this.isEnabled = equalizerSettings.isEnabled();
+        this.currentGains = equalizerSettings.getGains();
+    }
+
+    /**
+     * Destroy the equalizer
+     */
+    destroy() {
+        this.filters.forEach(filter => {
+            try { filter.disconnect(); } catch { }
+        });
+
+        try { this.inputNode?.disconnect(); } catch { }
+        try { this.outputNode?.disconnect(); } catch { }
+
+        this.filters = [];
+        this.inputNode = null;
+        this.outputNode = null;
+        this.isInitialized = false;
+    }
+}
+
+// Export singleton instance
+export const equalizer = new Equalizer();
+
+// Export constants
+export { EQ_FREQUENCIES, FREQUENCY_LABELS, EQ_PRESETS };
diff --git a/js/events.js b/js/events.js
index 67074af..8ef87c8 100644
--- a/js/events.js
+++ b/js/events.js
@@ -17,6 +17,7 @@ import { updateTabTitle, navigate } from './router.js';
 import { db } from './db.js';
 import { syncManager } from './accounts/pocketbase.js';
 import { waveformGenerator } from './waveform.js';
+import { audioContextManager } from './audio-context.js';
 
 let currentTrackIdForWaveform = null;
 
@@ -52,6 +53,12 @@ export function initializePlayerEvents(player, audioPlayer, scrobbler, ui) {
     }
 
     audioPlayer.addEventListener('play', () => {
+        // Initialize audio context manager for EQ (only once)
+        if (!audioContextManager.isReady()) {
+            audioContextManager.init(audioPlayer);
+        }
+        audioContextManager.resume();
+
         if (player.currentTrack) {
             // Scrobble
             if (scrobbler.isAuthenticated() && lastFMStorage.isEnabled()) {
@@ -611,11 +618,10 @@ export async function showAddToPlaylistModal(track) {
                     return `
                 <div class="modal-option ${alreadyContains ? 'already-contains' : ''}" data-id="${p.id}">
                     <span>${p.name}</span>
-                    ${
-                        alreadyContains
+                    ${alreadyContains
                             ? `<button class="remove-from-playlist-btn-modal" title="Remove from playlist" style="background: transparent; border: none; color: inherit; cursor: pointer; padding: 4px; display: flex; align-items: center;">${SVG_BIN}</button>`
                             : ''
-                    }
+                        }
                 </div>
             `;
                 })
@@ -962,11 +968,10 @@ export async function handleTrackAction(
                         return `
                     <div class="modal-option ${alreadyContains ? 'already-contains' : ''}" data-id="${p.id}">
                         <span>${p.name}</span>
-                        ${
-                            alreadyContains
+                        ${alreadyContains
                                 ? `<button class="remove-from-playlist-btn-modal" title="Remove from playlist" style="background: transparent; border: none; color: inherit; cursor: pointer; padding: 4px; display: flex; align-items: center;">${SVG_BIN}</button>`
                                 : ''
-                        }
+                            }
                     </div>
                 `;
                     })
@@ -1085,31 +1090,28 @@ export async function handleTrackAction(
                             ${item.trackerInfo.recordingDate ? `<p><strong style="color: var(--foreground);">Recording Date:</strong> ${new Date(item.trackerInfo.recordingDate).toLocaleDateString()}</p>` : ''}
                         </div>
                         
-                        ${
-                            item.trackerInfo.description
-                                ? `
+                        ${item.trackerInfo.description
+                    ? `
                             <div style="margin-top: 1rem; padding: 0.75rem; background: var(--accent); border-radius: 8px;">
                                 <p style="color: var(--foreground); font-weight: 500; margin-bottom: 0.5rem;">Description</p>
                                 <p style="font-size: 0.85rem; line-height: 1.6;">${item.trackerInfo.description}</p>
                             </div>
                         `
-                                : ''
-                        }
+                    : ''
+                }
                         
-                        ${
-                            item.trackerInfo.notes
-                                ? `
+                        ${item.trackerInfo.notes
+                    ? `
                             <div style="margin-top: 1rem; padding: 0.75rem; background: var(--accent); border-radius: 8px;">
                                 <p style="color: var(--foreground); font-weight: 500; margin-bottom: 0.5rem;">Notes</p>
                                 <p style="font-size: 0.85rem; line-height: 1.6;">${item.trackerInfo.notes}</p>
                             </div>
                         `
-                                : ''
-                        }
+                    : ''
+                }
                         
-                        ${
-                            item.trackerInfo.sourceUrl
-                                ? `
+                        ${item.trackerInfo.sourceUrl
+                    ? `
                             <div style="margin-top: 1rem;">
                                 <p style="margin-bottom: 0.5rem;"><strong style="color: var(--foreground);">Source URL:</strong></p>
                                 <a href="${item.trackerInfo.sourceUrl}" target="_blank" style="color: var(--primary); word-break: break-all; font-size: 0.85rem; display: block; padding: 0.5rem; background: var(--accent); border-radius: 6px; text-decoration: none;">
@@ -1117,8 +1119,8 @@ export async function handleTrackAction(
                                 </a>
                             </div>
                         `
-                                : ''
-                        }
+                    : ''
+                }
                         
                         ${item.id ? `<p style="margin-top: 1rem; font-size: 0.8rem; color: var(--muted);"><strong>Track ID:</strong> ${item.id}</p>` : ''}
                     </div>
@@ -1149,9 +1151,8 @@ export async function handleTrackAction(
                             <p><strong style="color: var(--foreground);">Quality:</strong> ${quality} ${bitrate ? `(${bitrate})` : ''}</p>
                         </div>
                         
-                        ${
-                            item.credits && item.credits.length > 0
-                                ? `
+                        ${item.credits && item.credits.length > 0
+                    ? `
                             <div style="margin-top: 1rem; padding: 0.75rem; background: var(--accent); border-radius: 8px;">
                                 <p style="color: var(--foreground); font-weight: 500; margin-bottom: 0.5rem;">Credits</p>
                                 <div style="font-size: 0.85rem; line-height: 1.6;">
@@ -1159,26 +1160,24 @@ export async function handleTrackAction(
                                 </div>
                             </div>
                         `
-                                : ''
-                        }
+                    : ''
+                }
                         
-                        ${
-                            item.composers && item.composers.length > 0
-                                ? `
+                        ${item.composers && item.composers.length > 0
+                    ? `
                             <p style="margin-top: 0.5rem;"><strong style="color: var(--foreground);">Composers:</strong> ${item.composers.map((c) => c.name).join(', ')}</p>
                         `
-                                : ''
-                        }
+                    : ''
+                }
                         
-                        ${
-                            item.lyrics?.text
-                                ? `
+                        ${item.lyrics?.text
+                    ? `
                             <div style="margin-top: 1rem; padding: 0.75rem; background: var(--accent); border-radius: 8px;">
                                 <p style="color: var(--foreground); font-weight: 500; margin-bottom: 0.5rem;">Has Lyrics</p>
                             </div>
                         `
-                                : ''
-                        }
+                    : ''
+                }
                         
                         ${item.id ? `<p style="margin-top: 1rem; font-size: 0.8rem; color: var(--muted);"><strong>Track ID:</strong> ${item.id}</p>` : ''}
                         ${item.album?.id ? `<p style="font-size: 0.8rem; color: var(--muted);"><strong>Album ID:</strong> ${item.album.id}</p>` : ''}
@@ -1453,12 +1452,12 @@ export function initializeTrackInteractions(player, api, mainContent, contextMen
             const type = card.dataset.albumId
                 ? 'album'
                 : card.dataset.playlistId
-                  ? 'playlist'
-                  : card.dataset.mixId
-                    ? 'mix'
-                    : card.dataset.href
-                      ? card.dataset.href.split('/')[1]
-                      : 'item';
+                    ? 'playlist'
+                    : card.dataset.mixId
+                        ? 'mix'
+                        : card.dataset.href
+                            ? card.dataset.href.split('/')[1]
+                            : 'item';
             const id = card.dataset.albumId || card.dataset.playlistId || card.dataset.mixId;
 
             const item = trackDataStore.get(card) || {
diff --git a/js/settings.js b/js/settings.js
index 97c80d9..26ba788 100644
--- a/js/settings.js
+++ b/js/settings.js
@@ -15,7 +15,9 @@ import {
     visualizerSettings,
     bulkDownloadSettings,
     playlistSettings,
+    equalizerSettings,
 } from './storage.js';
+import { audioContextManager, EQ_PRESETS } from './audio-context.js';
 import { db } from './db.js';
 import { authManager } from './accounts/auth.js';
 import { syncManager } from './accounts/pocketbase.js';
@@ -99,7 +101,7 @@ export function initializeSettings(scrobbler, player, api, ui) {
             }
             try {
                 await authManager.sendPasswordReset(email);
-            } catch {}
+            } catch { }
         });
     }
 
@@ -340,6 +342,142 @@ export function initializeSettings(scrobbler, player, api, ui) {
         });
     }
 
+    // ========================================
+    // 16-Band Equalizer Settings
+    // ========================================
+    const eqToggle = document.getElementById('equalizer-enabled-toggle');
+    const eqContainer = document.getElementById('equalizer-container');
+    const eqPresetSelect = document.getElementById('equalizer-preset-select');
+    const eqResetBtn = document.getElementById('equalizer-reset-btn');
+    const eqBands = document.querySelectorAll('.eq-band');
+
+    /**
+     * Update the visual display of a band value
+     */
+    const updateBandValueDisplay = (bandEl, value) => {
+        const valueEl = bandEl.querySelector('.eq-value');
+        if (!valueEl) return;
+
+        const displayValue = value > 0 ? `+${value}` : value.toString();
+        valueEl.textContent = displayValue;
+
+        // Add color classes based on value
+        valueEl.classList.remove('positive', 'negative');
+        if (value > 0) {
+            valueEl.classList.add('positive');
+        } else if (value < 0) {
+            valueEl.classList.add('negative');
+        }
+    };
+
+    /**
+     * Update all band sliders and displays from an array of gains
+     */
+    const updateAllBandUI = (gains) => {
+        eqBands.forEach((bandEl, index) => {
+            const slider = bandEl.querySelector('.eq-slider');
+            if (slider && gains[index] !== undefined) {
+                slider.value = gains[index];
+                updateBandValueDisplay(bandEl, gains[index]);
+            }
+        });
+    };
+
+    /**
+     * Toggle EQ container visibility
+     */
+    const updateEQContainerVisibility = (enabled) => {
+        if (eqContainer) {
+            eqContainer.style.display = enabled ? 'block' : 'none';
+        }
+    };
+
+    // Initialize EQ toggle
+    if (eqToggle) {
+        const isEnabled = equalizerSettings.isEnabled();
+        eqToggle.checked = isEnabled;
+        updateEQContainerVisibility(isEnabled);
+
+        eqToggle.addEventListener('change', (e) => {
+            const enabled = e.target.checked;
+            audioContextManager.toggleEQ(enabled);
+            updateEQContainerVisibility(enabled);
+        });
+    }
+
+    // Initialize preset selector
+    if (eqPresetSelect) {
+        eqPresetSelect.value = equalizerSettings.getPreset();
+
+        eqPresetSelect.addEventListener('change', (e) => {
+            const presetKey = e.target.value;
+            const preset = EQ_PRESETS[presetKey];
+
+            if (preset) {
+                audioContextManager.applyPreset(presetKey);
+                updateAllBandUI(preset.gains);
+            }
+        });
+    }
+
+    // Initialize reset button
+    if (eqResetBtn) {
+        eqResetBtn.addEventListener('click', () => {
+            audioContextManager.reset();
+            updateAllBandUI(new Array(16).fill(0));
+            if (eqPresetSelect) {
+                eqPresetSelect.value = 'flat';
+            }
+        });
+    }
+
+    // Initialize all band sliders
+    if (eqBands.length > 0) {
+        const savedGains = equalizerSettings.getGains();
+
+        eqBands.forEach((bandEl) => {
+            const bandIndex = parseInt(bandEl.dataset.band, 10);
+            const slider = bandEl.querySelector('.eq-slider');
+
+            if (slider && !isNaN(bandIndex)) {
+                // Set initial value from saved settings
+                const initialGain = savedGains[bandIndex] ?? 0;
+                slider.value = initialGain;
+                updateBandValueDisplay(bandEl, initialGain);
+
+                // Handle slider input
+                slider.addEventListener('input', (e) => {
+                    const gain = parseFloat(e.target.value);
+                    audioContextManager.setBandGain(bandIndex, gain);
+                    updateBandValueDisplay(bandEl, gain);
+
+                    // When manually adjusting, switch preset to 'flat' (custom)
+                    // to indicate the user has made custom changes
+                    if (eqPresetSelect && eqPresetSelect.value !== 'flat') {
+                        // Check if current gains still match the selected preset
+                        const currentPreset = EQ_PRESETS[eqPresetSelect.value];
+                        if (currentPreset) {
+                            const currentGains = audioContextManager.getGains();
+                            const matches = currentPreset.gains.every(
+                                (g, i) => Math.abs(g - currentGains[i]) < 0.01
+                            );
+                            if (!matches) {
+                                // Don't change the select, but the preset will save as 'custom'
+                            }
+                        }
+                    }
+                });
+
+                // Double-click to reset individual band to 0
+                slider.addEventListener('dblclick', () => {
+                    slider.value = 0;
+                    audioContextManager.setBandGain(bandIndex, 0);
+                    updateBandValueDisplay(bandEl, 0);
+                });
+            }
+        });
+    }
+
     // Now Playing Mode
     const nowPlayingMode = document.getElementById('now-playing-mode');
     if (nowPlayingMode) {
diff --git a/js/storage.js b/js/storage.js
index 80ab74c..9f2a7ce 100644
--- a/js/storage.js
+++ b/js/storage.js
@@ -757,6 +757,61 @@ export const visualizerSettings = {
     },
 };
 
+export const equalizerSettings = {
+    ENABLED_KEY: 'equalizer-enabled',
+    GAINS_KEY: 'equalizer-gains',
+    PRESET_KEY: 'equalizer-preset',
+
+    isEnabled() {
+        try {
+            // Disabled by default
+            return localStorage.getItem(this.ENABLED_KEY) === 'true';
+        } catch {
+            return false;
+        }
+    },
+
+    setEnabled(enabled) {
+        localStorage.setItem(this.ENABLED_KEY, enabled ? 'true' : 'false');
+    },
+
+    getGains() {
+        try {
+            const stored = localStorage.getItem(this.GAINS_KEY);
+            if (stored) {
+                const gains = JSON.parse(stored);
+                if (Array.isArray(gains) && gains.length === 16) {
+                    return gains;
+                }
+            }
+        } catch { }
+        // Return flat EQ (all zeros) by default
+        return new Array(16).fill(0);
+    },
+
+    setGains(gains) {
+        try {
+            if (Array.isArray(gains) && gains.length === 16) {
+                localStorage.setItem(this.GAINS_KEY, JSON.stringify(gains));
+            }
+        } catch (e) {
+            console.warn('[EQ] Failed to save gains:', e);
+        }
+    },
+
+    getPreset() {
+        try {
+            return localStorage.getItem(this.PRESET_KEY) || 'flat';
+        } catch {
+            return 'flat';
+        }
+    },
+
+    setPreset(preset) {
+        localStorage.setItem(this.PRESET_KEY, preset);
+    },
+};
+
 export const queueManager = {
     STORAGE_KEY: 'monochrome-queue',
 
diff --git a/js/visualizer.js b/js/visualizer.js
index 31d41b4..6c227cc 100644
--- a/js/visualizer.js
+++ b/js/visualizer.js
@@ -3,6 +3,7 @@ import { visualizerSettings } from './storage.js';
 import { LCDPreset } from './visualizers/lcd.js';
 import { ParticlesPreset } from './visualizers/particles.js';
 import { UnknownPleasuresPreset } from './visualizers/unknown_pleasures.js';
+import { equalizer } from './equalizer.js';
 
 export class Visualizer {
     constructor(canvas, audio) {
@@ -45,6 +46,11 @@ export class Visualizer {
         // ---- CACHED STATE ----
         this._lastPrimaryColor = '';
         this._resizeBound = () => this.resize();
+
+        // Listen for EQ toggle events to reconnect audio graph
+        window.addEventListener('equalizer-toggle', () => {
+            this._reconnectAudioGraph();
+        });
     }
 
     get activePreset() {
@@ -66,13 +72,73 @@ export class Visualizer {
             this.dataArray = new Uint8Array(this.bufferLength);
 
             this.source = this.audioContext.createMediaElementSource(this.audio);
-            this.source.connect(this.analyser);
-            this.analyser.connect(this.audioContext.destination);
+
+            // Initialize equalizer with shared context
+            equalizer.init(this.audioContext, this.source, this.audio);
+
+            // Connect audio graph with EQ if enabled
+            this._reconnectAudioGraph();
         } catch (e) {
             console.warn('Visualizer init failed:', e);
         }
     }
 
+    /**
+     * Reconnect the audio graph based on EQ state
+     * Audio chain: source -> [EQ filters] -> analyser -> destination
+     */
+    _reconnectAudioGraph() {
+        if (!this.source || !this.analyser || !this.audioContext) return;
+
+        try {
+            // Disconnect the source from its current connections
+            this.source.disconnect();
+
+            if (equalizer.isActive()) {
+                // Route through EQ: source -> EQ -> analyser -> destination
+                const eqInput = equalizer.getInputNode();
+                const eqOutput = equalizer.getOutputNode();
+
+                if (eqInput && eqOutput) {
+                    this.source.connect(eqInput);
+                    eqOutput.connect(this.analyser);
+                    this.analyser.connect(this.audioContext.destination);
+                    console.log('[Audio] EQ enabled in audio chain');
+                } else {
+                    // Fallback if EQ nodes aren't ready
+                    this.source.connect(this.analyser);
+                    this.analyser.connect(this.audioContext.destination);
+                }
+            } else {
+                // Bypass EQ: source -> analyser -> destination
+                this.source.connect(this.analyser);
+                this.analyser.connect(this.audioContext.destination);
+                console.log('[Audio] EQ bypassed');
+            }
+        } catch (e) {
+            console.warn('[Audio] Failed to reconnect audio graph:', e);
+            // Attempt simple reconnect as fallback
+            try {
+                this.source.connect(this.analyser);
+                this.analyser.connect(this.audioContext.destination);
+            } catch { }
+        }
+    }
+
+    /**
+     * Get the shared AudioContext for external use
+     */
+    getAudioContext() {
+        return this.audioContext;
+    }
+
+    /**
+     * Get the source node
+     */
+    getSourceNode() {
+        return this.source;
+    }
+
     initContext() {
         if (this.ctx) return;
 
diff --git a/styles.css b/styles.css
index e1e8914..40e6f34 100644
--- a/styles.css
+++ b/styles.css
@@ -5067,4 +5067,326 @@ textarea:focus {
     fill: #ef4444;
     /* Standardize heart red */
     stroke: #ef4444;
+}
+
+/* =========================================
+   16-Band Equalizer
+   ========================================= */
+
+.equalizer-container {
+    margin-top: var(--spacing-md);
+    padding: var(--spacing-lg);
+    background: linear-gradient(145deg, var(--card), rgba(var(--highlight-rgb), 0.03));
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05);
+}
+
+.equalizer-header {
+    margin-bottom: var(--spacing-lg);
+}
+
+.equalizer-preset-row {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-md);
+    flex-wrap: wrap;
+}
+
+.equalizer-preset-row label {
+    font-size: 0.9rem;
+    color: var(--muted-foreground);
+    font-weight: 500;
+}
+
+.equalizer-preset-row select {
+    flex: 1;
+    min-width: 150px;
+    max-width: 250px;
+    padding: 0.5rem 1rem;
+    background: var(--input);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    color: var(--foreground);
+    font-size: 0.9rem;
+    cursor: pointer;
+    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+}
+
+.equalizer-preset-row select:hover {
+    border-color: var(--primary);
+}
+
+.equalizer-preset-row select:focus {
+    outline: none;
+    border-color: var(--ring);
+    box-shadow: 0 0 0 3px rgba(var(--highlight-rgb), 0.2);
+}
+
+#equalizer-reset-btn {
+    padding: 0.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius);
+    background: var(--input);
+    border: 1px solid var(--border);
+    color: var(--muted-foreground);
+    transition: all var(--transition-fast);
+}
+
+#equalizer-reset-btn:hover {
+    background: var(--card);
+    border-color: var(--primary);
+    color: var(--foreground);
+}
+
+#equalizer-reset-btn svg {
+    transition: transform 0.3s ease;
+}
+
+#equalizer-reset-btn:hover svg {
+    transform: rotate(-45deg);
+}
+
+.equalizer-bands {
+    display: flex;
+    justify-content: space-between;
+    gap: 4px;
+    padding: var(--spacing-md) 0;
+    position: relative;
+}
+
+/* Zero line indicator */
+.equalizer-bands::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 50%;
+    height: 1px;
+    background: var(--border);
+    opacity: 0.5;
+    pointer-events: none;
+    z-index: 0;
+}
+
+.eq-band {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    flex: 1;
+    min-width: 0;
+    position: relative;
+    z-index: 1;
+}
+
+/* Vertical slider styling */
+.eq-slider {
+    -webkit-appearance: none;
+    appearance: none;
+    writing-mode: vertical-lr;
+    direction: rtl;
+    width: 8px;
+    height: 120px;
+    background: transparent;
+    cursor: pointer;
+    position: relative;
+}
+
+/* Track */
+.eq-slider::-webkit-slider-runnable-track {
+    width: 6px;
+    height: 100%;
+    background: linear-gradient(to top, var(--muted), var(--input));
+    border-radius: var(--radius-full);
+    border: 1px solid var(--border);
+}
+
+.eq-slider::-moz-range-track {
+    width: 6px;
+    height: 100%;
+    background: linear-gradient(to top, var(--muted), var(--input));
+    border-radius: var(--radius-full);
+    border: 1px solid var(--border);
+}
+
+/* Thumb */
+.eq-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 18px;
+    height: 18px;
+    background: linear-gradient(145deg, var(--primary), var(--highlight));
+    border-radius: 50%;
+    cursor: grab;
+    margin-left: -6px;
+    box-shadow:
+        0 2px 8px rgba(0, 0, 0, 0.3),
+        inset 0 1px 2px rgba(255, 255, 255, 0.3);
+    transition: transform 0.15s ease, box-shadow 0.15s ease;
+    border: 2px solid var(--background);
+}
+
+.eq-slider::-moz-range-thumb {
+    width: 18px;
+    height: 18px;
+    background: linear-gradient(145deg, var(--primary), var(--highlight));
+    border-radius: 50%;
+    cursor: grab;
+    box-shadow:
+        0 2px 8px rgba(0, 0, 0, 0.3),
+        inset 0 1px 2px rgba(255, 255, 255, 0.3);
+    transition: transform 0.15s ease, box-shadow 0.15s ease;
+    border: 2px solid var(--background);
+}
+
+.eq-slider::-webkit-slider-thumb:hover {
+    transform: scale(1.15);
+    box-shadow:
+        0 4px 12px rgba(var(--highlight-rgb), 0.4),
+        inset 0 1px 2px rgba(255, 255, 255, 0.3);
+}
+
+.eq-slider::-moz-range-thumb:hover {
+    transform: scale(1.15);
+    box-shadow:
+        0 4px 12px rgba(var(--highlight-rgb), 0.4),
+        inset 0 1px 2px rgba(255, 255, 255, 0.3);
+}
+
+.eq-slider::-webkit-slider-thumb:active {
+    cursor: grabbing;
+    transform: scale(1.1);
+}
+
+.eq-slider::-moz-range-thumb:active {
+    cursor: grabbing;
+    transform: scale(1.1);
+}
+
+.eq-slider:focus {
+    outline: none;
+}
+
+.eq-slider:focus::-webkit-slider-thumb {
+    box-shadow:
+        0 0 0 4px rgba(var(--highlight-rgb), 0.3),
+        0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.eq-slider:focus::-moz-range-thumb {
+    box-shadow:
+        0 0 0 4px rgba(var(--highlight-rgb), 0.3),
+        0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.eq-value {
+    font-size: 0.7rem;
+    font-weight: 600;
+    color: var(--foreground);
+    min-width: 28px;
+    text-align: center;
+    padding: 2px 4px;
+    background: var(--input);
+    border-radius: var(--radius-sm);
+    transition: color 0.2s ease, background 0.2s ease;
+}
+
+.eq-value.positive {
+    color: var(--highlight);
+    background: rgba(var(--highlight-rgb), 0.15);
+}
+
+.eq-value.negative {
+    color: #ef4444;
+    background: rgba(239, 68, 68, 0.15);
+}
+
+.eq-freq {
+    font-size: 0.65rem;
+    color: var(--muted-foreground);
+    text-align: center;
+    white-space: nowrap;
+    font-weight: 500;
+}
+
+.equalizer-scale {
+    display: flex;
+    justify-content: space-between;
+    padding-top: var(--spacing-sm);
+    border-top: 1px solid var(--border);
+    margin-top: var(--spacing-sm);
+}
+
+.equalizer-scale span {
+    font-size: 0.7rem;
+    color: var(--muted-foreground);
+    opacity: 0.7;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .equalizer-container {
+        padding: var(--spacing-md);
+    }
+
+    .equalizer-bands {
+        gap: 2px;
+        overflow-x: auto;
+        padding-bottom: var(--spacing-sm);
+        -webkit-overflow-scrolling: touch;
+    }
+
+    .eq-band {
+        min-width: 36px;
+    }
+
+    .eq-slider {
+        height: 100px;
+    }
+
+    .eq-slider::-webkit-slider-thumb {
+        width: 16px;
+        height: 16px;
+        margin-left: -5px;
+    }
+
+    .eq-slider::-moz-range-thumb {
+        width: 16px;
+        height: 16px;
+    }
+
+    .eq-freq {
+        font-size: 0.55rem;
+    }
+
+    .eq-value {
+        font-size: 0.6rem;
+        min-width: 24px;
+    }
+}
+
+@media (max-width: 480px) {
+    .equalizer-preset-row {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .equalizer-preset-row select {
+        max-width: none;
+    }
+
+    .equalizer-preset-row label {
+        margin-bottom: -0.5rem;
+    }
+
+    .eq-slider {
+        height: 80px;
+    }
+
+    .eq-band {
+        min-width: 30px;
+    }
 }
\ No newline at end of file
