From 75ebcd564fb3274ec3bbeed32d685bdaa362d1c6 Mon Sep 17 00:00:00 2001
From: wadie <wadie_bs@hotmail.com>
Date: Sun, 9 Aug 2026 21:04:00 +0200
Subject: [PATCH 1/4] Improve soundtrack player artwork

---
 frontend/src/stores/soundtrackPlayer.ts       | 17 ++++++++
 .../GameDetails/SoundtrackPanel.vue           | 42 +++++++++++++------
 .../v2/components/Soundtrack/MiniPlayer.vue   | 35 ++++++++++------
 3 files changed, 69 insertions(+), 25 deletions(-)

diff --git a/frontend/src/stores/soundtrackPlayer.ts b/frontend/src/stores/soundtrackPlayer.ts
index 16ada5f5cd..5f2c3f1f5e 100644
--- a/frontend/src/stores/soundtrackPlayer.ts
+++ b/frontend/src/stores/soundtrackPlayer.ts
@@ -3,6 +3,8 @@ import { throttle } from "lodash";
 import { defineStore } from "pinia";
 import { computed, ref, shallowRef } from "vue";
 import type { TrackMetaSchema } from "@/__generated__";
+import type { DetailedRom } from "@/stores/roms";
+import { FRONTEND_RESOURCES_PATH } from "@/utils";
 
 const volumeStorage = useLocalStorage<number>("soundtrack.volume", 1);
 const mutedStorage = useLocalStorage<boolean>("soundtrack.muted", false);
@@ -25,8 +27,23 @@ export type PlayerMeta = {
   duration?: number;
   coverUrl?: string;
   folderCoverUrl?: string;
+  gameArtworkUrl?: string;
 };
 
+export function resolveSoundtrackGameArtwork(
+  rom: DetailedRom,
+): string | undefined {
+  const logoPath = rom.ss_metadata?.logo_path;
+  if (logoPath) return `${FRONTEND_RESOURCES_PATH}/${logoPath}`;
+
+  return (
+    rom.path_cover_large ??
+    rom.path_cover_small ??
+    rom.url_cover ??
+    undefined
+  );
+}
+
 const useSoundtrackPlayer = defineStore("soundtrackPlayer", () => {
   const track = ref<PlayerTrack | null>(null);
   const meta = ref<PlayerMeta>({});
diff --git a/frontend/src/v2/components/GameDetails/SoundtrackPanel.vue b/frontend/src/v2/components/GameDetails/SoundtrackPanel.vue
index 64eb7774d5..8db4763ce3 100644
--- a/frontend/src/v2/components/GameDetails/SoundtrackPanel.vue
+++ b/frontend/src/v2/components/GameDetails/SoundtrackPanel.vue
@@ -30,6 +30,7 @@ import type { DetailedRom } from "@/stores/roms";
 import useSoundtrackPlayer, {
   type PlayerMeta,
   type PlayerTrack,
+  resolveSoundtrackGameArtwork,
 } from "@/stores/soundtrackPlayer";
 import { FRONTEND_RESOURCES_PATH, formatBytes } from "@/utils";
 import { useSnackbar } from "@/v2/composables/useSnackbar";
@@ -105,6 +106,10 @@ const folderCoverUrl = computed(() => {
   return cover ? fileUrl(cover.id, cover.file_name) : null;
 });
 
+const gameArtworkUrl = computed(() =>
+  resolveSoundtrackGameArtwork(props.rom),
+);
+
 // ---------- Metadata fetch ----------
 const tracksMeta = ref<Map<number, TrackMetaSchema>>(new Map());
 const isLoadingMeta = ref(false);
@@ -127,6 +132,7 @@ function toPlayerMeta(m: TrackMetaSchema | undefined): PlayerMeta {
     duration: m?.duration_seconds ?? undefined,
     coverUrl: coverUrlForMeta(m) ?? undefined,
     folderCoverUrl: folderCoverUrl.value ?? undefined,
+    gameArtworkUrl: gameArtworkUrl.value,
   };
 }
 
@@ -207,6 +213,7 @@ const activeArtUrl = computed(
   () =>
     coverUrlForMeta(activeMeta.value) ??
     folderCoverUrl.value ??
+    gameArtworkUrl.value ??
     "/assets/default/album_cover.jpg",
 );
 
@@ -355,16 +362,16 @@ function seekValueText(v: number): string {
   <div class="r-v2-stp">
     <!-- Now playing / placeholder header -->
     <header class="r-v2-stp__now">
-      <div
-        class="r-v2-stp__cover"
-        :class="{ 'r-v2-stp__cover--spinning': activeTrack && isPlaying }"
-      >
-        <img
+      <div class="r-v2-stp__cover">
+        <div
           v-if="activeArtUrl"
-          :src="activeArtUrl"
-          class="r-v2-stp__cover-img"
-          alt=""
-        />
+          class="r-v2-stp__cover-rotor"
+          :class="{
+            'r-v2-stp__cover-rotor--spinning': activeTrack && isPlaying,
+          }"
+        >
+          <img :src="activeArtUrl" class="r-v2-stp__cover-img" alt="" />
+        </div>
         <RIcon v-else icon="mdi-music-note" size="48" />
         <div
           v-if="activeTrack && isBuffering"
@@ -629,15 +636,24 @@ function seekValueText(v: number): string {
     0 0 0 4px color-mix(in srgb, black 20%, transparent);
 }
 
+.r-v2-stp__cover-rotor {
+  position: absolute;
+  inset: 0;
+  transform-origin: 50% 50%;
+  transform-box: border-box;
+  animation: r-v2-stp-spin 12s linear infinite;
+  animation-play-state: paused;
+}
+
 .r-v2-stp__cover-img {
+  display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
-  animation: r-v2-stp-spin 12s linear infinite;
-  animation-play-state: paused;
+  object-position: center;
 }
 
-.r-v2-stp__cover--spinning .r-v2-stp__cover-img {
+.r-v2-stp__cover-rotor--spinning {
   animation-play-state: running;
 }
 
@@ -673,7 +689,7 @@ function seekValueText(v: number): string {
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .r-v2-stp__cover-img {
+  .r-v2-stp__cover-rotor {
     animation: none;
   }
 }
diff --git a/frontend/src/v2/components/Soundtrack/MiniPlayer.vue b/frontend/src/v2/components/Soundtrack/MiniPlayer.vue
index 7038685a63..566274dc7c 100644
--- a/frontend/src/v2/components/Soundtrack/MiniPlayer.vue
+++ b/frontend/src/v2/components/Soundtrack/MiniPlayer.vue
@@ -63,6 +63,7 @@ const coverUrl = computed(
   () =>
     meta.value.coverUrl ??
     meta.value.folderCoverUrl ??
+    meta.value.gameArtworkUrl ??
     "/assets/default/album_cover.jpg",
 );
 
@@ -196,12 +197,13 @@ function openRom() {
     >
       <!-- Top row: cover + meta + close/open-rom -->
       <div class="r-v2-mp__top">
-        <div
-          class="r-v2-mp__disc"
-          :class="{ 'r-v2-mp__disc--spinning': isPlaying }"
-          aria-hidden="true"
-        >
-          <img :src="coverUrl" class="r-v2-mp__disc-img" alt="" />
+        <div class="r-v2-mp__disc" aria-hidden="true">
+          <div
+            class="r-v2-mp__disc-rotor"
+            :class="{ 'r-v2-mp__disc-rotor--spinning': isPlaying }"
+          >
+            <img :src="coverUrl" class="r-v2-mp__disc-img" alt="" />
+          </div>
           <div v-if="isBuffering" class="r-v2-mp__disc-buffering">
             <RSpinner :size="20" :width="2" color="white" />
           </div>
@@ -347,16 +349,25 @@ html[data-bp~="sm-and-down"] .r-v2-mp {
   flex-shrink: 0;
   box-shadow: 0 0 0 2px color-mix(in srgb, black 50%, transparent);
 }
-.r-v2-mp__disc-img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
+.r-v2-mp__disc-rotor {
+  position: absolute;
+  inset: 0;
+  transform-origin: 50% 50%;
+  transform-box: border-box;
   animation: r-v2-mp-spin 12s linear infinite;
   animation-play-state: paused;
 }
-.r-v2-mp__disc--spinning .r-v2-mp__disc-img {
+.r-v2-mp__disc-rotor--spinning {
   animation-play-state: running;
 }
+
+.r-v2-mp__disc-img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+}
 /* Static vinyl-record spindle — gives the rotation a fixed visual
    reference so the spin reads as motion rather than a flat circle. */
 .r-v2-mp__disc::after {
@@ -390,7 +401,7 @@ html[data-bp~="sm-and-down"] .r-v2-mp {
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .r-v2-mp__disc-img {
+  .r-v2-mp__disc-rotor {
     animation: none;
   }
 }

From 2debaa0f4b6c93343c0c01bb095e94c3da7fc3d4 Mon Sep 17 00:00:00 2001
From: wadie <wadie_bs@hotmail.com>
Date: Sun, 9 Aug 2026 21:41:55 +0200
Subject: [PATCH 2/4] Address soundtrack artwork review feedback

---
 frontend/src/stores/soundtrackPlayer.ts                    | 7 ++++++-
 frontend/src/v2/components/GameDetails/SoundtrackPanel.vue | 1 +
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/frontend/src/stores/soundtrackPlayer.ts b/frontend/src/stores/soundtrackPlayer.ts
index 5f2c3f1f5e..1245e9c80c 100644
--- a/frontend/src/stores/soundtrackPlayer.ts
+++ b/frontend/src/stores/soundtrackPlayer.ts
@@ -30,8 +30,13 @@ export type PlayerMeta = {
   gameArtworkUrl?: string;
 };
 
+export type SoundtrackArtworkRom = Pick<
+  DetailedRom,
+  "ss_metadata" | "path_cover_large" | "path_cover_small" | "url_cover"
+>;
+
 export function resolveSoundtrackGameArtwork(
-  rom: DetailedRom,
+  rom: SoundtrackArtworkRom,
 ): string | undefined {
   const logoPath = rom.ss_metadata?.logo_path;
   if (logoPath) return `${FRONTEND_RESOURCES_PATH}/${logoPath}`;
diff --git a/frontend/src/v2/components/GameDetails/SoundtrackPanel.vue b/frontend/src/v2/components/GameDetails/SoundtrackPanel.vue
index 8db4763ce3..e299ff5b91 100644
--- a/frontend/src/v2/components/GameDetails/SoundtrackPanel.vue
+++ b/frontend/src/v2/components/GameDetails/SoundtrackPanel.vue
@@ -677,6 +677,7 @@ function seekValueText(v: number): string {
   display: grid;
   place-items: center;
   background: color-mix(in srgb, black 45%, transparent);
+  z-index: 3;
 }
 
 @keyframes r-v2-stp-spin {

From 5f613687e577abeddf6b31ff56d1ec3f09af34b0 Mon Sep 17 00:00:00 2001
From: wadie <wadie_bs@hotmail.com>
Date: Fri, 14 Aug 2026 10:24:02 +0200
Subject: [PATCH 3/4] feat(music): add jukebox

---
 backend/endpoints/responses/music.py          |   12 +-
 backend/endpoints/responses/permission.py     |    3 +
 backend/handler/database/roms_handler.py      |    3 +
 .../src/__generated__/models/ActionKey.ts     |    2 +-
 .../__generated__/models/MusicTrackSchema.ts  |    3 +
 frontend/src/locales/bg_BG/common.json        |   20 +
 frontend/src/locales/cs_CZ/common.json        |   22 +-
 frontend/src/locales/de_DE/common.json        |   20 +
 frontend/src/locales/en_GB/common.json        |   22 +-
 frontend/src/locales/en_US/common.json        |   22 +-
 frontend/src/locales/es_ES/common.json        |   22 +-
 frontend/src/locales/fr_FR/common.json        |   22 +-
 frontend/src/locales/hu_HU/common.json        |   22 +-
 frontend/src/locales/it_IT/common.json        |   22 +-
 frontend/src/locales/ja_JP/common.json        |   22 +-
 frontend/src/locales/ko_KR/common.json        |   22 +-
 frontend/src/locales/pl_PL/common.json        |   22 +-
 frontend/src/locales/pt_BR/common.json        |   22 +-
 frontend/src/locales/ro_RO/common.json        |   22 +-
 frontend/src/locales/ru_RU/common.json        |   22 +-
 frontend/src/locales/tr_TR/common.json        |   22 +-
 frontend/src/locales/zh_CN/common.json        |   22 +-
 frontend/src/locales/zh_TW/common.json        |   22 +-
 frontend/src/plugins/router.ts                |   10 +
 frontend/src/services/api/music.ts            |   67 +
 frontend/src/stores/soundtrackPlayer.ts       |   63 +-
 .../src/v2/components/AppShell/UserMenu.vue   |   14 +-
 .../GameDetails/SoundtrackPanel.vue           |  554 ++++---
 .../v2/components/Soundtrack/MiniPlayer.vue   |   39 +-
 frontend/src/v2/router/routes.ts              |    1 +
 frontend/src/v2/utils/freeRadio.ts            |   64 +
 frontend/src/v2/views/Jukebox.vue             | 1335 +++++++++++++++++
 32 files changed, 2360 insertions(+), 202 deletions(-)
 create mode 100644 frontend/src/services/api/music.ts
 create mode 100644 frontend/src/v2/utils/freeRadio.ts
 create mode 100644 frontend/src/v2/views/Jukebox.vue

diff --git a/backend/endpoints/responses/music.py b/backend/endpoints/responses/music.py
index 5ee7b0aa51..7c8d23ff0a 100644
--- a/backend/endpoints/responses/music.py
+++ b/backend/endpoints/responses/music.py
@@ -3,7 +3,7 @@
 from typing import Any
 from urllib.parse import quote
 
-from pydantic import BaseModel, ConfigDict
+from pydantic import BaseModel, ConfigDict, Field
 
 from config import FRONTEND_RESOURCES_PATH
 
@@ -26,11 +26,14 @@ class MusicTrackSchema(BaseModel):
     has_embedded_cover: bool = False
     is_favorite: bool = False
     game_name: str | None = None
+    game_genres: list[str] = Field(default_factory=list)
+    added_at: UTCDatetime
     platform_id: int
     platform_slug: str
     platform_name: str
     stream_url: str
     cover_url: str | None = None
+    game_cover_url: str | None = None
 
     @staticmethod
     def cover_url_for(cover_path: str | None, rom_cover_path: str | None) -> str | None:
@@ -55,11 +58,18 @@ def from_row(cls, row: Any) -> MusicTrackSchema:
             has_embedded_cover=row.has_embedded_cover,
             is_favorite=bool(row.is_favorite),
             game_name=row.game_name,
+            game_genres=row.game_genres or [],
+            added_at=row.added_at,
             platform_id=row.platform_id,
             platform_slug=row.platform_slug,
             platform_name=row.platform_name,
             stream_url=f"/api/roms/{row.rom_file_id}/files/content/{quote(row.file_name)}",
             cover_url=cls.cover_url_for(row.cover_path, row.path_cover_l),
+            game_cover_url=(
+                f"{FRONTEND_RESOURCES_PATH}/{row.path_cover_l}"
+                if row.path_cover_l
+                else None
+            ),
         )
 
 
diff --git a/backend/endpoints/responses/permission.py b/backend/endpoints/responses/permission.py
index b050535392..84007b4604 100644
--- a/backend/endpoints/responses/permission.py
+++ b/backend/endpoints/responses/permission.py
@@ -41,6 +41,8 @@ class ActionKey(enum.StrEnum):
     COLLECTION_CREATE = "collection.create"
     COLLECTION_EDIT = "collection.edit"
     COLLECTION_DELETE = "collection.delete"
+    # Playlists
+    PLAYLIST_EDIT = "playlist.edit"
     # Library
     LIBRARY_SCAN = "library.scan"
     # Users
@@ -83,6 +85,7 @@ class ActionKey(enum.StrEnum):
         ActionKey.COLLECTION_EDIT,
     ),
     (PermEntity.COLLECTIONS, PermAction.DELETE): (ActionKey.COLLECTION_DELETE,),
+    (PermEntity.PLAYLISTS, PermAction.WRITE): (ActionKey.PLAYLIST_EDIT,),
     (PermEntity.USERS, PermAction.READ): (ActionKey.USER_VIEW,),
     (PermEntity.USERS, PermAction.WRITE): (
         ActionKey.USER_CREATE,
diff --git a/backend/handler/database/roms_handler.py b/backend/handler/database/roms_handler.py
index a6528571fb..aeb13016ca 100644
--- a/backend/handler/database/roms_handler.py
+++ b/backend/handler/database/roms_handler.py
@@ -2353,6 +2353,8 @@ def get_music_tracks(
                 is_favorite_col.label("is_favorite"),
                 Rom.name.label("game_name"),
                 Rom.path_cover_l.label("path_cover_l"),
+                RomMetadata.genres.label("game_genres"),
+                RomFile.created_at.label("added_at"),
                 Platform.id.label("platform_id"),
                 Platform.slug.label("platform_slug"),
                 Platform.name.label("platform_name"),
@@ -2360,6 +2362,7 @@ def get_music_tracks(
             .select_from(TrackMeta)
             .join(RomFile, TrackMeta.rom_file_id == RomFile.id)
             .join(Rom, TrackMeta.rom_id == Rom.id)
+            .outerjoin(RomMetadata, RomMetadata.rom_id == Rom.id)
             .join(Platform, Rom.platform_id == Platform.id)
         )
         if is_favorite_user_id is not None:
diff --git a/frontend/src/__generated__/models/ActionKey.ts b/frontend/src/__generated__/models/ActionKey.ts
index 0b9bf2a9af..c4132bdfd1 100644
--- a/frontend/src/__generated__/models/ActionKey.ts
+++ b/frontend/src/__generated__/models/ActionKey.ts
@@ -2,4 +2,4 @@
 /* istanbul ignore file */
 /* tslint:disable */
 /* eslint-disable */
-export type ActionKey = 'rom.view' | 'rom.play' | 'rom.download' | 'rom.upload' | 'rom.edit' | 'rom.delete' | 'rom.match' | 'rom.refresh' | 'rom.favorite' | 'platform.view' | 'platform.create' | 'platform.edit' | 'platform.delete' | 'collection.view' | 'collection.create' | 'collection.edit' | 'collection.delete' | 'library.scan' | 'user.view' | 'user.create' | 'user.edit' | 'user.delete' | 'app.admin';
+export type ActionKey = 'rom.view' | 'rom.play' | 'rom.download' | 'rom.upload' | 'rom.edit' | 'rom.delete' | 'rom.match' | 'rom.refresh' | 'rom.favorite' | 'platform.view' | 'platform.create' | 'platform.edit' | 'platform.delete' | 'collection.view' | 'collection.create' | 'collection.edit' | 'collection.delete' | 'playlist.edit' | 'library.scan' | 'user.view' | 'user.create' | 'user.edit' | 'user.delete' | 'app.admin';
diff --git a/frontend/src/__generated__/models/MusicTrackSchema.ts b/frontend/src/__generated__/models/MusicTrackSchema.ts
index d3a7d844c4..4a973aa6b7 100644
--- a/frontend/src/__generated__/models/MusicTrackSchema.ts
+++ b/frontend/src/__generated__/models/MusicTrackSchema.ts
@@ -16,10 +16,13 @@ export type MusicTrackSchema = {
     has_embedded_cover?: boolean;
     is_favorite?: boolean;
     game_name?: (string | null);
+    game_genres?: Array<string>;
+    added_at: string;
     platform_id: number;
     platform_slug: string;
     platform_name: string;
     stream_url: string;
     cover_url?: (string | null);
+    game_cover_url?: (string | null);
 };
 
diff --git a/frontend/src/locales/bg_BG/common.json b/frontend/src/locales/bg_BG/common.json
index 9984b40aad..9933020682 100644
--- a/frontend/src/locales/bg_BG/common.json
+++ b/frontend/src/locales/bg_BG/common.json
@@ -8,11 +8,13 @@
   "activity": "Активност",
   "add": "Добави",
   "administration": "Администрация",
+  "albums-n": "{n} албум | {n} албума",
   "all": "Всички",
   "all-files-skipped": "Всички файлове са пропуснати, нищо не е качено.",
   "all-platforms": "Всички платформи",
   "and": "и",
   "apply": "Приложи",
+  "artists-n": "{n} изпълнител | {n} изпълнители",
   "ascii-only": "Само ASCII символи",
   "back": "Назад",
   "back-btn": "Назад",
@@ -42,6 +44,8 @@
   "core": "Основни",
   "create": "Създай",
   "crt-mode": "CRT mode",
+  "decade-mix": "Микс по десетилетия",
+  "decades-n": "{n} десетилетие | {n} десетилетия",
   "delete": "Изтрий",
   "details": "Детайли",
   "discard": "Отхвърли",
@@ -54,20 +58,24 @@
   "edit": "Редактирай",
   "exclude-on-delete": "Не добавяй повторно след изтриване",
   "expand": "Разшири",
+  "favorite-soundtracks": "Любими саундтраци",
   "filter": "Филтър",
   "firmware": "Фърмуер",
   "first-page": "Първа страница",
   "for": "за",
+  "free-radio": "Свободно радио",
   "games": "Игри",
   "games-header": "Игри",
   "games-n": "{n} игра | {n} игри",
   "generate": "Генерирай",
+  "genres-n": "{n} жанр | {n} жанра",
   "got-it": "Разбрах",
   "hide-password": "Скрий паролата",
   "home": "Начало",
   "in-library": "В библиотеката",
   "invalid-email": "Невалиден имейл",
   "invalid-name": "Невалидно име",
+  "jukebox": "Музикален плеър",
   "kind": "Вид",
   "last-page": "Последна страница",
   "last-updated": "Последна промяна",
@@ -79,6 +87,9 @@
   "local": "Локален",
   "logout": "Изход",
   "logs": "Logs",
+  "minutes-n": "{n} мин",
+  "music-by-album": "Саундтраци по албум",
+  "music-by-artist": "Саундтраци по изпълнител",
   "name": "Име",
   "new-version-available": "Налична е нова версия",
   "next-page": "Следваща страница",
@@ -95,10 +106,13 @@
   "platform-created": "Платформата {name} е създадена",
   "platforms": "Платформи",
   "platforms-n": "{n} платформа | {n} платформи",
+  "play-all": "Пусни всички",
+  "playlists": "Плейлисти",
   "previous-page": "Предишна страница",
   "primary-navigation": "Основна навигация",
   "profile": "Профил",
   "random": "Случайно",
+  "recently-added-soundtracks": "Наскоро добавени саундтраци",
   "remove": "Премахни",
   "removing-from-filesystem": "Премахване от файловата система",
   "required": "Задължително",
@@ -116,11 +130,17 @@
   "server-stats": "Статистики на сървъра",
   "settings": "Настройки",
   "show-password": "Покажи паролата",
+  "shuffle": "Разбъркване",
   "size": "Размер",
   "size-on-disk": "Размер на диска",
   "slug": "Слъг",
   "smart-collection": "Умна колекция",
   "smart-collections": "Умни колекции",
+  "soundtrack-favorite-added": "Песента е добавена към любимите",
+  "soundtrack-favorite-failed": "Неуспешна промяна на любимата песен",
+  "soundtrack-favorite-removed": "Песента е премахната от любимите",
+  "soundtracks-by-genre": "Саундтраци по жанр",
+  "soundtracks-by-platform": "Саундтраци по платформа",
   "state": "Състояние",
   "states": "Състояния",
   "states-n": "{n} състояние | {n} състояния",
diff --git a/frontend/src/locales/cs_CZ/common.json b/frontend/src/locales/cs_CZ/common.json
index 0d2a13a9d8..33b9786eb6 100644
--- a/frontend/src/locales/cs_CZ/common.json
+++ b/frontend/src/locales/cs_CZ/common.json
@@ -8,11 +8,13 @@
   "activity": "Aktivita",
   "add": "Přidat",
   "administration": "Administrace",
+  "albums-n": "{n} album | {n} alba",
   "all": "Vše",
   "all-files-skipped": "Všechny soubory přeskočeny, nic nebylo nahráno.",
   "all-platforms": "Všechny platformy",
   "and": "a",
   "apply": "Použít",
+  "artists-n": "{n} interpret | {n} interpreti",
   "ascii-only": "Pouze ASCII znaky",
   "back": "Zpět",
   "back-btn": "Zpět",
@@ -42,6 +44,8 @@
   "core": "Jádro",
   "create": "Vytvořit",
   "crt-mode": "CRT mode",
+  "decade-mix": "Mix desetiletí",
+  "decades-n": "{n} desetiletí | {n} desetiletí",
   "delete": "Smazat",
   "details": "Detaily",
   "discard": "Zahodit",
@@ -54,20 +58,24 @@
   "edit": "Upravit",
   "exclude-on-delete": "Vynechat při mazání",
   "expand": "Rozbalit",
+  "favorite-soundtracks": "Oblíbené soundtracky",
   "filter": "Filtr",
   "firmware": "Firmware",
   "first-page": "První stránka",
   "for": "pro",
+  "free-radio": "Volné rádio",
   "games": "Hry",
   "games-header": "Hry",
   "games-n": "{n} her | {n} hra | {n} hry | {n} her",
   "generate": "Vygenerovat",
+  "genres-n": "{n} žánr | {n} žánry",
   "got-it": "Rozumím",
   "hide-password": "Skrýt heslo",
   "home": "Domů",
   "in-library": "V knihovně",
   "invalid-email": "Neplatný e-mail",
   "invalid-name": "Neplatný název",
+  "jukebox": "Hudební přehrávač",
   "kind": "Druh",
   "last-page": "Poslední stránka",
   "last-updated": "Naposledy aktualizováno",
@@ -79,6 +87,9 @@
   "local": "Lokální",
   "logout": "Odhlásit se",
   "logs": "Logs",
+  "minutes-n": "{n} min",
+  "music-by-album": "Soundtracky podle alba",
+  "music-by-artist": "Soundtracky podle interpreta",
   "name": "Název",
   "new-version-available": "Je k dispozici nová verze",
   "next-page": "Další stránka",
@@ -94,11 +105,14 @@
   "platform": "Platforma",
   "platform-created": "Platforma {name} vytvořena",
   "platforms": "Platformy",
-  "platforms-n": "{n} platforem | {n} platforma | {n} platformy | {n} platforem",
+  "platforms-n": "{n} platforma | {n} platformy",
+  "play-all": "Přehrát vše",
+  "playlists": "Playlisty",
   "previous-page": "Předchozí stránka",
   "primary-navigation": "Hlavní navigace",
   "profile": "Profil",
   "random": "Náhodně",
+  "recently-added-soundtracks": "Nedávno přidané soundtracky",
   "remove": "Odebrat",
   "removing-from-filesystem": "Odstraňování ze systému",
   "required": "Povinné",
@@ -116,11 +130,17 @@
   "server-stats": "Statistiky serveru",
   "settings": "Nastavení",
   "show-password": "Zobrazit heslo",
+  "shuffle": "Náhodné pořadí",
   "size": "Velikost",
   "size-on-disk": "Velikost na disku",
   "slug": "Slug",
   "smart-collection": "Chytrá kolekce",
   "smart-collections": "Chytré kolekce",
+  "soundtrack-favorite-added": "Skladba byla přidána do oblíbených",
+  "soundtrack-favorite-failed": "Oblíbenou skladbu se nepodařilo změnit",
+  "soundtrack-favorite-removed": "Skladba byla odebrána z oblíbených",
+  "soundtracks-by-genre": "Soundtracky podle žánru",
+  "soundtracks-by-platform": "Soundtracky podle platformy",
   "state": "Stav",
   "states": "Stavy",
   "states-n": "{n} stavů | {n} stav | {n} stavy | {n} stavů",
diff --git a/frontend/src/locales/de_DE/common.json b/frontend/src/locales/de_DE/common.json
index cbc24a08f6..80590f5413 100644
--- a/frontend/src/locales/de_DE/common.json
+++ b/frontend/src/locales/de_DE/common.json
@@ -8,11 +8,13 @@
   "activity": "Aktivität",
   "add": "Hinzufügen",
   "administration": "Administration",
+  "albums-n": "{n} Album | {n} Alben",
   "all": "Alle",
   "all-files-skipped": "Alle Dateien übersprungen, nichts hochgeladen.",
   "all-platforms": "Alle Plattformen",
   "and": "und",
   "apply": "Anwenden",
+  "artists-n": "{n} Künstler | {n} Künstler",
   "ascii-only": "Nur ASCII-Zeichen",
   "back": "Zurück",
   "back-btn": "Zurück",
@@ -42,6 +44,8 @@
   "core": "Core",
   "create": "Erstellen",
   "crt-mode": "CRT-Modus",
+  "decade-mix": "Jahrzehnte-Mix",
+  "decades-n": "{n} Jahrzehnt | {n} Jahrzehnte",
   "delete": "Löschen",
   "details": "Details",
   "discard": "Verwerfen",
@@ -54,20 +58,24 @@
   "edit": "Bearbeiten",
   "exclude-on-delete": "Beim Löschen ausschließen",
   "expand": "Ausklappen",
+  "favorite-soundtracks": "Favorisierte Soundtracks",
   "filter": "Filter",
   "firmware": "Firmware",
   "first-page": "Erste Seite",
   "for": "für",
+  "free-radio": "Freies Radio",
   "games": "Spiele",
   "games-header": "Spiele",
   "games-n": "{n} Spiel | {n} Spiele",
   "generate": "Generieren",
+  "genres-n": "{n} Genre | {n} Genres",
   "got-it": "Verstanden",
   "hide-password": "Passwort ausblenden",
   "home": "Startseite",
   "in-library": "In der Bibliothek",
   "invalid-email": "Ungültige E-Mail",
   "invalid-name": "Ungültiger Name",
+  "jukebox": "Musikbox",
   "kind": "Typ",
   "last-page": "Letzte Seite",
   "last-updated": "Zuletzt aktualisiert",
@@ -79,6 +87,9 @@
   "local": "Lokal",
   "logout": "Ausloggen",
   "logs": "Logs",
+  "minutes-n": "{n} Min.",
+  "music-by-album": "Soundtracks nach Album",
+  "music-by-artist": "Soundtracks nach Künstler",
   "name": "Name",
   "new-version-available": "Neue Version verfügbar",
   "next-page": "Nächste Seite",
@@ -95,10 +106,13 @@
   "platform-created": "Plattform {name} erstellt",
   "platforms": "Plattformen",
   "platforms-n": "{n} Plattform | {n} Plattformen",
+  "play-all": "Alle abspielen",
+  "playlists": "Wiedergabelisten",
   "previous-page": "Vorherige Seite",
   "primary-navigation": "Hauptnavigation",
   "profile": "Profil",
   "random": "Zufällig",
+  "recently-added-soundtracks": "Kürzlich hinzugefügte Soundtracks",
   "remove": "Entfernen",
   "removing-from-filesystem": "Entfernen vom System",
   "required": "Erforderlich",
@@ -116,11 +130,17 @@
   "server-stats": "Serverstatistiken",
   "settings": "Einstellungen",
   "show-password": "Passwort anzeigen",
+  "shuffle": "Zufallswiedergabe",
   "size": "Größe",
   "size-on-disk": "Größe auf Festplatte",
   "slug": "Slug",
   "smart-collection": "Intelligente Sammlung",
   "smart-collections": "Intelligente Sammlungen",
+  "soundtrack-favorite-added": "Titel zu Favoriten hinzugefügt",
+  "soundtrack-favorite-failed": "Favoritenstatus konnte nicht geändert werden",
+  "soundtrack-favorite-removed": "Titel aus Favoriten entfernt",
+  "soundtracks-by-genre": "Soundtracks nach Genre",
+  "soundtracks-by-platform": "Soundtracks nach Plattform",
   "state": "Spielstand",
   "states": "Spielstände",
   "states-n": "{n} Spielstand | {n} Spielstände",
diff --git a/frontend/src/locales/en_GB/common.json b/frontend/src/locales/en_GB/common.json
index 16ef03a914..b3b4994bd9 100644
--- a/frontend/src/locales/en_GB/common.json
+++ b/frontend/src/locales/en_GB/common.json
@@ -8,11 +8,13 @@
   "activity": "Activity",
   "add": "Add",
   "administration": "Administration",
+  "albums-n": "{n} album | {n} albums",
   "all": "All",
   "all-files-skipped": "All files skipped, nothing uploaded.",
   "all-platforms": "All platforms",
   "and": "and",
   "apply": "Apply",
+  "artists-n": "{n} artist | {n} artists",
   "ascii-only": "ASCII characters only",
   "back": "Back",
   "back-btn": "Back",
@@ -42,6 +44,8 @@
   "core": "Core",
   "create": "Create",
   "crt-mode": "CRT mode",
+  "decade-mix": "Decade Mix",
+  "decades-n": "{n} decade | {n} decades",
   "delete": "Delete",
   "details": "Details",
   "discard": "Discard",
@@ -54,20 +58,24 @@
   "edit": "Edit",
   "exclude-on-delete": "Exclude on delete",
   "expand": "Expand",
+  "favorite-soundtracks": "Favorite soundtracks",
   "filter": "Filter",
   "firmware": "Firmware",
   "first-page": "First page",
   "for": "for",
+  "free-radio": "Free Radio",
   "games": "Games",
   "games-header": "Games",
   "games-n": "{n} Game | {n} Games",
   "generate": "Generate",
+  "genres-n": "{n} genre | {n} genres",
   "got-it": "Got it",
   "hide-password": "Hide password",
   "home": "Home",
   "in-library": "In library",
   "invalid-email": "Invalid email",
   "invalid-name": "Invalid name",
+  "jukebox": "Jukebox",
   "kind": "Kind",
   "last-page": "Last page",
   "last-updated": "Last updated",
@@ -79,6 +87,9 @@
   "local": "Local",
   "logout": "Logout",
   "logs": "Logs",
+  "minutes-n": "{n} min",
+  "music-by-album": "Soundtracks by Album",
+  "music-by-artist": "Soundtracks by Artist",
   "name": "Name",
   "new-version-available": "New version available",
   "next-page": "Next page",
@@ -94,11 +105,14 @@
   "platform": "Platform",
   "platform-created": "Platform {name} created",
   "platforms": "Platforms",
-  "platforms-n": "{n} Platform | {n} Platforms",
+  "platforms-n": "{n} platform | {n} platforms",
+  "play-all": "Play all",
+  "playlists": "Playlists",
   "previous-page": "Previous page",
   "primary-navigation": "Primary navigation",
   "profile": "Profile",
   "random": "Random",
+  "recently-added-soundtracks": "Recently added soundtracks",
   "remove": "Remove",
   "removing-from-filesystem": "Removing from filesystem",
   "required": "Required",
@@ -116,11 +130,17 @@
   "server-stats": "Server stats",
   "settings": "Settings",
   "show-password": "Show password",
+  "shuffle": "Shuffle",
   "size": "Size",
   "size-on-disk": "Size on disk",
   "slug": "Slug",
   "smart-collection": "Smart Collection",
   "smart-collections": "Smart Collections",
+  "soundtrack-favorite-added": "Track added to favorites",
+  "soundtrack-favorite-failed": "Failed to update track favorite",
+  "soundtrack-favorite-removed": "Track removed from favorites",
+  "soundtracks-by-genre": "Soundtracks by Genre",
+  "soundtracks-by-platform": "Soundtracks by Platform",
   "state": "State",
   "states": "States",
   "states-n": "{n} State | {n} States",
diff --git a/frontend/src/locales/en_US/common.json b/frontend/src/locales/en_US/common.json
index 16ef03a914..b3b4994bd9 100644
--- a/frontend/src/locales/en_US/common.json
+++ b/frontend/src/locales/en_US/common.json
@@ -8,11 +8,13 @@
   "activity": "Activity",
   "add": "Add",
   "administration": "Administration",
+  "albums-n": "{n} album | {n} albums",
   "all": "All",
   "all-files-skipped": "All files skipped, nothing uploaded.",
   "all-platforms": "All platforms",
   "and": "and",
   "apply": "Apply",
+  "artists-n": "{n} artist | {n} artists",
   "ascii-only": "ASCII characters only",
   "back": "Back",
   "back-btn": "Back",
@@ -42,6 +44,8 @@
   "core": "Core",
   "create": "Create",
   "crt-mode": "CRT mode",
+  "decade-mix": "Decade Mix",
+  "decades-n": "{n} decade | {n} decades",
   "delete": "Delete",
   "details": "Details",
   "discard": "Discard",
@@ -54,20 +58,24 @@
   "edit": "Edit",
   "exclude-on-delete": "Exclude on delete",
   "expand": "Expand",
+  "favorite-soundtracks": "Favorite soundtracks",
   "filter": "Filter",
   "firmware": "Firmware",
   "first-page": "First page",
   "for": "for",
+  "free-radio": "Free Radio",
   "games": "Games",
   "games-header": "Games",
   "games-n": "{n} Game | {n} Games",
   "generate": "Generate",
+  "genres-n": "{n} genre | {n} genres",
   "got-it": "Got it",
   "hide-password": "Hide password",
   "home": "Home",
   "in-library": "In library",
   "invalid-email": "Invalid email",
   "invalid-name": "Invalid name",
+  "jukebox": "Jukebox",
   "kind": "Kind",
   "last-page": "Last page",
   "last-updated": "Last updated",
@@ -79,6 +87,9 @@
   "local": "Local",
   "logout": "Logout",
   "logs": "Logs",
+  "minutes-n": "{n} min",
+  "music-by-album": "Soundtracks by Album",
+  "music-by-artist": "Soundtracks by Artist",
   "name": "Name",
   "new-version-available": "New version available",
   "next-page": "Next page",
@@ -94,11 +105,14 @@
   "platform": "Platform",
   "platform-created": "Platform {name} created",
   "platforms": "Platforms",
-  "platforms-n": "{n} Platform | {n} Platforms",
+  "platforms-n": "{n} platform | {n} platforms",
+  "play-all": "Play all",
+  "playlists": "Playlists",
   "previous-page": "Previous page",
   "primary-navigation": "Primary navigation",
   "profile": "Profile",
   "random": "Random",
+  "recently-added-soundtracks": "Recently added soundtracks",
   "remove": "Remove",
   "removing-from-filesystem": "Removing from filesystem",
   "required": "Required",
@@ -116,11 +130,17 @@
   "server-stats": "Server stats",
   "settings": "Settings",
   "show-password": "Show password",
+  "shuffle": "Shuffle",
   "size": "Size",
   "size-on-disk": "Size on disk",
   "slug": "Slug",
   "smart-collection": "Smart Collection",
   "smart-collections": "Smart Collections",
+  "soundtrack-favorite-added": "Track added to favorites",
+  "soundtrack-favorite-failed": "Failed to update track favorite",
+  "soundtrack-favorite-removed": "Track removed from favorites",
+  "soundtracks-by-genre": "Soundtracks by Genre",
+  "soundtracks-by-platform": "Soundtracks by Platform",
   "state": "State",
   "states": "States",
   "states-n": "{n} State | {n} States",
diff --git a/frontend/src/locales/es_ES/common.json b/frontend/src/locales/es_ES/common.json
index cf759e5081..ae3990c48e 100644
--- a/frontend/src/locales/es_ES/common.json
+++ b/frontend/src/locales/es_ES/common.json
@@ -8,11 +8,13 @@
   "activity": "Actividad",
   "add": "Añadir",
   "administration": "Administración",
+  "albums-n": "{n} álbum | {n} álbumes",
   "all": "Todos",
   "all-files-skipped": "Se omitieron todos los archivos, nada que subir.",
   "all-platforms": "Todas las plataformas",
   "and": "y",
   "apply": "Aplicar",
+  "artists-n": "{n} artista | {n} artistas",
   "ascii-only": "Solo caracteres ASCII",
   "back": "Atrás",
   "back-btn": "Atrás",
@@ -42,6 +44,8 @@
   "core": "Núcleo",
   "create": "Crear",
   "crt-mode": "Modo CRT",
+  "decade-mix": "Mezcla por décadas",
+  "decades-n": "{n} década | {n} décadas",
   "delete": "Eliminar",
   "details": "Detalles",
   "discard": "Descartar",
@@ -54,20 +58,24 @@
   "edit": "Editar",
   "exclude-on-delete": "Excluir al eliminar",
   "expand": "Expandir",
+  "favorite-soundtracks": "Bandas sonoras favoritas",
   "filter": "Filtrar",
   "firmware": "Firmware",
   "first-page": "Primera página",
   "for": "para",
+  "free-radio": "Radio libre",
   "games": "Juegos",
   "games-header": "Juegos",
   "games-n": "{n} Juego | {n} Juegos",
   "generate": "Generar",
+  "genres-n": "{n} género | {n} géneros",
   "got-it": "Entendido",
   "hide-password": "Ocultar contraseña",
   "home": "Inicio",
   "in-library": "En biblioteca",
   "invalid-email": "Correo electrónico inválido",
   "invalid-name": "Nombre inválido",
+  "jukebox": "Rockola",
   "kind": "Tipo",
   "last-page": "Última página",
   "last-updated": "Última actualización",
@@ -79,6 +87,9 @@
   "local": "Local",
   "logout": "Cerrar sesión",
   "logs": "Logs",
+  "minutes-n": "{n} min",
+  "music-by-album": "Bandas sonoras por álbum",
+  "music-by-artist": "Bandas sonoras por artista",
   "name": "Nombre",
   "new-version-available": "Nueva versión disponible",
   "next-page": "Siguiente",
@@ -94,11 +105,14 @@
   "platform": "Plataforma",
   "platform-created": "Plataforma creada",
   "platforms": "Plataformas",
-  "platforms-n": "{n} Plataforma | {n} Plataformas",
+  "platforms-n": "{n} plataforma | {n} plataformas",
+  "play-all": "Reproducir todo",
+  "playlists": "Listas de reproducción",
   "previous-page": "Anterior",
   "primary-navigation": "Navegación principal",
   "profile": "Perfil",
   "random": "Aleatorio",
+  "recently-added-soundtracks": "Bandas sonoras añadidas recientemente",
   "remove": "Eliminar",
   "removing-from-filesystem": "Eliminando del sistema",
   "required": "Requerido",
@@ -116,11 +130,17 @@
   "server-stats": "Estadísticas del servidor",
   "settings": "Ajustes",
   "show-password": "Mostrar contraseña",
+  "shuffle": "Mezclar",
   "size": "Tamaño",
   "size-on-disk": "Tamaño en disco",
   "slug": "Slug",
   "smart-collection": "Colección Inteligente",
   "smart-collections": "Colecciones Inteligentes",
+  "soundtrack-favorite-added": "Pista añadida a favoritos",
+  "soundtrack-favorite-failed": "No se pudo actualizar la pista favorita",
+  "soundtrack-favorite-removed": "Pista eliminada de favoritos",
+  "soundtracks-by-genre": "Bandas sonoras por género",
+  "soundtracks-by-platform": "Bandas sonoras por plataforma",
   "state": "Estado",
   "states": "Estados",
   "states-n": "{n} Estado | {n} Estados",
diff --git a/frontend/src/locales/fr_FR/common.json b/frontend/src/locales/fr_FR/common.json
index 859db3a0a2..4b32f91919 100644
--- a/frontend/src/locales/fr_FR/common.json
+++ b/frontend/src/locales/fr_FR/common.json
@@ -8,11 +8,13 @@
   "activity": "Activité",
   "add": "Ajouter",
   "administration": "Administration",
+  "albums-n": "{n} album | {n} albums",
   "all": "Tout",
   "all-files-skipped": "Tous les fichiers ont été ignorés, rien n'a été téléversé.",
   "all-platforms": "Toutes les plateformes",
   "and": "et",
   "apply": "Appliquer",
+  "artists-n": "{n} artiste | {n} artistes",
   "ascii-only": "Uniquement des caractères ASCII",
   "back": "Retour",
   "back-btn": "Retour",
@@ -42,6 +44,8 @@
   "core": "Noyau",
   "create": "Créer",
   "crt-mode": "Mode CRT",
+  "decade-mix": "Mix par décennie",
+  "decades-n": "{n} décennie | {n} décennies",
   "delete": "Supprimer",
   "details": "Détails",
   "discard": "Abandonner",
@@ -54,20 +58,24 @@
   "edit": "Éditer",
   "exclude-on-delete": "Exclure lors de la suppression",
   "expand": "Développer",
+  "favorite-soundtracks": "Bandes-son favorites",
   "filter": "Filtrer",
   "firmware": "Micrologiciel",
   "first-page": "Première page",
   "for": "pour",
+  "free-radio": "Radio libre",
   "games": "Jeux",
   "games-header": "Jeux",
   "games-n": "{n} Jeu | {n} Jeux",
   "generate": "Générer",
+  "genres-n": "{n} genre | {n} genres",
   "got-it": "Compris",
   "hide-password": "Masquer le mot de passe",
   "home": "Accueil",
   "in-library": "Dans la bibliothèque",
   "invalid-email": "E-mail invalide",
   "invalid-name": "Nom invalide",
+  "jukebox": "Jukebox",
   "kind": "Type",
   "last-page": "Dernière page",
   "last-updated": "Dernière mise à jour",
@@ -79,6 +87,9 @@
   "local": "Local",
   "logout": "Se déconnecter",
   "logs": "Logs",
+  "minutes-n": "{n} min",
+  "music-by-album": "Bandes-son par album",
+  "music-by-artist": "Bandes-son par artiste",
   "name": "Nom",
   "new-version-available": "Nouvelle version disponible",
   "next-page": "Page suivante",
@@ -94,11 +105,14 @@
   "platform": "Plateforme",
   "platform-created": "Plateforme {name} créée",
   "platforms": "Plateformes",
-  "platforms-n": "{n} Plateforme | {n} Plateformes",
+  "platforms-n": "{n} plateforme | {n} plateformes",
+  "play-all": "Tout lire",
+  "playlists": "Listes de lecture",
   "previous-page": "Page précédente",
   "primary-navigation": "Navigation principale",
   "profile": "Profil",
   "random": "Aléatoire",
+  "recently-added-soundtracks": "Bandes-son ajoutées récemment",
   "remove": "Retirer",
   "removing-from-filesystem": "Suppression du système",
   "required": "Requis",
@@ -116,11 +130,17 @@
   "server-stats": "Statistiques du serveur",
   "settings": "Paramètres",
   "show-password": "Afficher le mot de passe",
+  "shuffle": "Lecture aléatoire",
   "size": "Taille",
   "size-on-disk": "Taille sur le disque",
   "slug": "Slug",
   "smart-collection": "Collection Intelligente",
   "smart-collections": "Collections Intelligentes",
+  "soundtrack-favorite-added": "Piste ajoutée aux favoris",
+  "soundtrack-favorite-failed": "Impossible de modifier la piste favorite",
+  "soundtrack-favorite-removed": "Piste retirée des favoris",
+  "soundtracks-by-genre": "Bandes-son par genre",
+  "soundtracks-by-platform": "Bandes-son par plateforme",
   "state": "État",
   "states": "États",
   "states-n": "{n} État | {n} États",
diff --git a/frontend/src/locales/hu_HU/common.json b/frontend/src/locales/hu_HU/common.json
index ca7553857f..bfc7a5ee5a 100644
--- a/frontend/src/locales/hu_HU/common.json
+++ b/frontend/src/locales/hu_HU/common.json
@@ -8,11 +8,13 @@
   "activity": "Tevékenység",
   "add": "Hozzáadás",
   "administration": "Adminisztráció",
+  "albums-n": "{n} album | {n} album",
   "all": "Összes",
   "all-files-skipped": "Minden fájl kihagyva, nincs feltöltött elem.",
   "all-platforms": "Összes platform",
   "and": "és",
   "apply": "Alkalmaz",
+  "artists-n": "{n} előadó | {n} előadó",
   "ascii-only": "Csak ASCII karakterek",
   "back": "Vissza",
   "back-btn": "Vissza",
@@ -42,6 +44,8 @@
   "core": "Mag",
   "create": "Létrehoz",
   "crt-mode": "CRT mode",
+  "decade-mix": "Évtizedmix",
+  "decades-n": "{n} évtized | {n} évtized",
   "delete": "Törlés",
   "details": "Részletek",
   "discard": "Elvetés",
@@ -54,20 +58,24 @@
   "edit": "Szerkesztés",
   "exclude-on-delete": "Elem kihagyása törléskor",
   "expand": "Kibontás",
+  "favorite-soundtracks": "Kedvenc filmzenék",
   "filter": "Szűrő",
   "firmware": "Firmware",
   "first-page": "Első oldal",
   "for": "ehhez:",
+  "free-radio": "Szabad rádió",
   "games": "Játékok",
   "games-header": "Játékok",
   "games-n": "{n} Játék | {n} Játékok",
   "generate": "Generálás",
+  "genres-n": "{n} műfaj | {n} műfaj",
   "got-it": "Értem",
   "hide-password": "Jelszó elrejtése",
   "home": "Kezdőlap",
   "in-library": "A könyvtárban",
   "invalid-email": "Érvénytelen e-mail",
   "invalid-name": "Érvénytelen név",
+  "jukebox": "Zenelejátszó",
   "kind": "Típus",
   "last-page": "Utolsó oldal",
   "last-updated": "Utoljára frissítve",
@@ -79,6 +87,9 @@
   "local": "Helyi",
   "logout": "Kijelentkezés",
   "logs": "Logs",
+  "minutes-n": "{n} perc",
+  "music-by-album": "Filmzenék album szerint",
+  "music-by-artist": "Filmzenék előadó szerint",
   "name": "Név",
   "new-version-available": "Új verzió érhető el",
   "next-page": "Következő oldal",
@@ -94,11 +105,14 @@
   "platform": "Platform",
   "platform-created": "{name} platform létrehozva",
   "platforms": "Platformok",
-  "platforms-n": "{n} Platform | {n} Platformok",
+  "platforms-n": "{n} platform | {n} platform",
+  "play-all": "Összes lejátszása",
+  "playlists": "Lejátszási listák",
   "previous-page": "Előző oldal",
   "primary-navigation": "Elsődleges navigáció",
   "profile": "Profil",
   "random": "Véletlenszerű",
+  "recently-added-soundtracks": "Nemrég hozzáadott filmzenék",
   "remove": "Eltávolítás",
   "removing-from-filesystem": "Eltávolítás a fájlrendszerből",
   "required": "Szükséges",
@@ -116,11 +130,17 @@
   "server-stats": "Szerver statisztika",
   "settings": "Beállítások",
   "show-password": "Jelszó megjelenítése",
+  "shuffle": "Véletlen sorrend",
   "size": "Méret",
   "size-on-disk": "Méret a lemezen",
   "slug": "Slug",
   "smart-collection": "Intelligens gyűjtemény",
   "smart-collections": "Intelligens gyűjtemények",
+  "soundtrack-favorite-added": "Szám hozzáadva a kedvencekhez",
+  "soundtrack-favorite-failed": "Nem sikerült módosítani a kedvenc számot",
+  "soundtrack-favorite-removed": "Szám eltávolítva a kedvencek közül",
+  "soundtracks-by-genre": "Filmzenék műfaj szerint",
+  "soundtracks-by-platform": "Filmzenék platform szerint",
   "state": "Állás",
   "states": "Állások",
   "states-n": "{n} Állás | {n} Állások",
diff --git a/frontend/src/locales/it_IT/common.json b/frontend/src/locales/it_IT/common.json
index 94d5e3d60f..1648fc2fe2 100644
--- a/frontend/src/locales/it_IT/common.json
+++ b/frontend/src/locales/it_IT/common.json
@@ -8,11 +8,13 @@
   "activity": "Attività",
   "add": "Aggiungi",
   "administration": "Amministrazione",
+  "albums-n": "{n} album | {n} album",
   "all": "Tutti",
   "all-files-skipped": "Tutti i file saltati, niente è stato caricato.",
   "all-platforms": "Tutte le piattaforme",
   "and": "e",
   "apply": "Applica",
+  "artists-n": "{n} artista | {n} artisti",
   "ascii-only": "Solo caratteri ASCII",
   "back": "Indietro",
   "back-btn": "Indietro",
@@ -42,6 +44,8 @@
   "core": "Core",
   "create": "Crea",
   "crt-mode": "Modalità CRT",
+  "decade-mix": "Mix per decennio",
+  "decades-n": "{n} decennio | {n} decenni",
   "delete": "Elimina",
   "details": "Dettagli",
   "discard": "Scarta",
@@ -54,20 +58,24 @@
   "edit": "Modifica",
   "exclude-on-delete": "Escludi al momento dell'eliminazione",
   "expand": "Espandi",
+  "favorite-soundtracks": "Colonne sonore preferite",
   "filter": "Filtro",
   "firmware": "Firmware",
   "first-page": "Prima pagina",
   "for": "per",
+  "free-radio": "Radio libera",
   "games": "Giochi",
   "games-header": "Giochi",
   "games-n": "{n} Gioco | {n} Giochi",
   "generate": "Genera",
+  "genres-n": "{n} genere | {n} generi",
   "got-it": "Ho capito",
   "hide-password": "Nascondi password",
   "home": "Home",
   "in-library": "In libreria",
   "invalid-email": "Email non valida",
   "invalid-name": "Nome non valido",
+  "jukebox": "Jukebox",
   "kind": "Tipo",
   "last-page": "Ultima pagina",
   "last-updated": "Ultimo aggiornamento",
@@ -79,6 +87,9 @@
   "local": "Locale",
   "logout": "Logout",
   "logs": "Logs",
+  "minutes-n": "{n} min",
+  "music-by-album": "Colonne sonore per album",
+  "music-by-artist": "Colonne sonore per artista",
   "name": "Nome",
   "new-version-available": "Nuova versione disponibile",
   "next-page": "Pagina successiva",
@@ -94,11 +105,14 @@
   "platform": "Piattaforma",
   "platform-created": "Piattaforma {name} creata",
   "platforms": "Piattaforme",
-  "platforms-n": "{n} Piattaforma | {n} Piattaforme",
+  "platforms-n": "{n} piattaforma | {n} piattaforme",
+  "play-all": "Riproduci tutto",
+  "playlists": "Playlist",
   "previous-page": "Pagina precedente",
   "primary-navigation": "Navigazione principale",
   "profile": "Profilo",
   "random": "Casuale",
+  "recently-added-soundtracks": "Colonne sonore aggiunte di recente",
   "remove": "Rimuovi",
   "removing-from-filesystem": "Rimozione dal sistema",
   "required": "Obbligatorio",
@@ -116,11 +130,17 @@
   "server-stats": "Statistiche del server",
   "settings": "Impostazioni",
   "show-password": "Mostra password",
+  "shuffle": "Riproduzione casuale",
   "size": "Dimensione",
   "size-on-disk": "Dimensione sul disco",
   "slug": "Slug",
   "smart-collection": "Collezione Intelligente",
   "smart-collections": "Collezioni Intelligenti",
+  "soundtrack-favorite-added": "Brano aggiunto ai preferiti",
+  "soundtrack-favorite-failed": "Impossibile aggiornare il brano preferito",
+  "soundtrack-favorite-removed": "Brano rimosso dai preferiti",
+  "soundtracks-by-genre": "Colonne sonore per genere",
+  "soundtracks-by-platform": "Colonne sonore per piattaforma",
   "state": "Stato",
   "states": "Stati",
   "states-n": "{n} Stato | {n} Stati",
diff --git a/frontend/src/locales/ja_JP/common.json b/frontend/src/locales/ja_JP/common.json
index b5eafba1fb..ceb59bb412 100644
--- a/frontend/src/locales/ja_JP/common.json
+++ b/frontend/src/locales/ja_JP/common.json
@@ -8,11 +8,13 @@
   "activity": "アクティビティ",
   "add": "追加",
   "administration": "管理者メニュー",
+  "albums-n": "{n}件のアルバム",
   "all": "すべて",
   "all-files-skipped": "すべてのファイルがスキップされ、アップロードされたものはありません。",
   "all-platforms": "すべてのプラットフォーム",
   "and": "と",
   "apply": "適用",
+  "artists-n": "{n}人のアーティスト",
   "ascii-only": "ASCII文字のみ",
   "back": "戻る",
   "back-btn": "戻る",
@@ -42,6 +44,8 @@
   "core": "コア",
   "create": "作成",
   "crt-mode": "CRT mode",
+  "decade-mix": "年代別ミックス",
+  "decades-n": "{n}年代",
   "delete": "削除",
   "details": "詳細",
   "discard": "破棄",
@@ -54,20 +58,24 @@
   "edit": "編集",
   "exclude-on-delete": "削除時に除外",
   "expand": "展開",
+  "favorite-soundtracks": "お気に入りのサウンドトラック",
   "filter": "フィルタ",
   "firmware": "ファームウェア",
   "first-page": "最初のページ",
   "for": "対象:",
+  "free-radio": "フリーラジオ",
   "games": "ゲーム",
   "games-header": "ゲーム",
   "games-n": "{n} ゲーム | {n} ゲーム",
   "generate": "生成",
+  "genres-n": "{n}件のジャンル",
   "got-it": "了解",
   "hide-password": "パスワードを隠す",
   "home": "ホーム",
   "in-library": "ライブラリ内",
   "invalid-email": "無効なメールアドレス",
   "invalid-name": "無効な名前",
+  "jukebox": "ジュークボックス",
   "kind": "種類",
   "last-page": "最後のページ",
   "last-updated": "最終更新",
@@ -79,6 +87,9 @@
   "local": "ローカル",
   "logout": "ログアウト",
   "logs": "Logs",
+  "minutes-n": "{n}分",
+  "music-by-album": "アルバム別サウンドトラック",
+  "music-by-artist": "アーティスト別サウンドトラック",
   "name": "名前",
   "new-version-available": "新しいバージョンが利用可能です",
   "next-page": "次のページ",
@@ -94,11 +105,14 @@
   "platform": "プラットフォーム",
   "platform-created": "プラットフォーム{name}を作成しました",
   "platforms": "プラットフォーム",
-  "platforms-n": "{n} プラットフォーム | {n} プラットフォームs",
+  "platforms-n": "{n}件のプラットフォーム",
+  "play-all": "すべて再生",
+  "playlists": "プレイリスト",
   "previous-page": "前のページ",
   "primary-navigation": "メインナビゲーション",
   "profile": "プロファイル",
   "random": "ランダム",
+  "recently-added-soundtracks": "最近追加されたサウンドトラック",
   "remove": "削除",
   "removing-from-filesystem": "システムから削除中",
   "required": "必須",
@@ -116,11 +130,17 @@
   "server-stats": "サーバーステータス",
   "settings": "設定",
   "show-password": "パスワードを表示",
+  "shuffle": "シャッフル",
   "size": "サイズ",
   "size-on-disk": "ディスク上のサイズ",
   "slug": "スラッグ",
   "smart-collection": "スマートコレクション",
   "smart-collections": "スマートコレクション",
+  "soundtrack-favorite-added": "トラックをお気に入りに追加しました",
+  "soundtrack-favorite-failed": "トラックのお気に入りを更新できませんでした",
+  "soundtrack-favorite-removed": "トラックをお気に入りから削除しました",
+  "soundtracks-by-genre": "ジャンル別サウンドトラック",
+  "soundtracks-by-platform": "プラットフォーム別サウンドトラック",
   "state": "ステートセーブ",
   "states": "ステートセーブ",
   "states-n": "{n} ステートセーブ | {n} ステートセーブ",
diff --git a/frontend/src/locales/ko_KR/common.json b/frontend/src/locales/ko_KR/common.json
index 6bcaf0d7ed..40b6358f57 100644
--- a/frontend/src/locales/ko_KR/common.json
+++ b/frontend/src/locales/ko_KR/common.json
@@ -8,11 +8,13 @@
   "activity": "활동",
   "add": "추가",
   "administration": "유저 관리",
+  "albums-n": "앨범 {n}개",
   "all": "전체",
   "all-files-skipped": "모든 파일이 건너뛰어졌습니다. 업로드된 파일이 없습니다.",
   "all-platforms": "모든 플랫폼",
   "and": "및",
   "apply": "적용",
+  "artists-n": "아티스트 {n}명",
   "ascii-only": "ASCII 문자만",
   "back": "뒤로",
   "back-btn": "뒤로",
@@ -42,6 +44,8 @@
   "core": "코어",
   "create": "생성",
   "crt-mode": "CRT mode",
+  "decade-mix": "연대별 믹스",
+  "decades-n": "{n}개 연대",
   "delete": "삭제",
   "details": "자세히",
   "discard": "취소",
@@ -54,20 +58,24 @@
   "edit": "수정",
   "exclude-on-delete": "삭제 시 제외",
   "expand": "펼치기",
+  "favorite-soundtracks": "즐겨찾는 사운드트랙",
   "filter": "필터",
   "firmware": "펌웨어",
   "first-page": "첫 페이지",
   "for": "대상",
+  "free-radio": "자유 라디오",
   "games": "게임",
   "games-header": "게임",
   "games-n": "게임 {n}개 | 게임 {n}개",
   "generate": "생성",
+  "genres-n": "장르 {n}개",
   "got-it": "확인",
   "hide-password": "비밀번호 숨기기",
   "home": "홈",
   "in-library": "라이브러리에 있음",
   "invalid-email": "유효하지 않은 이메일",
   "invalid-name": "유효하지 않은 이름",
+  "jukebox": "주크박스",
   "kind": "종류",
   "last-page": "마지막 페이지",
   "last-updated": "마지막 업데이트",
@@ -79,6 +87,9 @@
   "local": "로컬",
   "logout": "로그아웃",
   "logs": "Logs",
+  "minutes-n": "{n}분",
+  "music-by-album": "앨범별 사운드트랙",
+  "music-by-artist": "아티스트별 사운드트랙",
   "name": "이름",
   "new-version-available": "새 버전 사용 가능",
   "next-page": "다음 페이지",
@@ -94,11 +105,14 @@
   "platform": "플랫폼",
   "platform-created": "플랫폼 {name}이(가) 생성되었습니다",
   "platforms": "플랫폼",
-  "platforms-n": "{n}가지 플랫폼 | {n}가지 플랫폼",
+  "platforms-n": "플랫폼 {n}개",
+  "play-all": "모두 재생",
+  "playlists": "재생목록",
   "previous-page": "이전 페이지",
   "primary-navigation": "기본 탐색",
   "profile": "프로필",
   "random": "무작위",
+  "recently-added-soundtracks": "최근 추가된 사운드트랙",
   "remove": "제거",
   "removing-from-filesystem": "시스템에서 제거 중",
   "required": "필수",
@@ -116,11 +130,17 @@
   "server-stats": "서버 통계",
   "settings": "설정",
   "show-password": "비밀번호 표시",
+  "shuffle": "셔플",
   "size": "크기",
   "size-on-disk": "디스크 크기",
   "slug": "슬러그",
   "smart-collection": "스마트 모음집",
   "smart-collections": "스마트 모음집",
+  "soundtrack-favorite-added": "트랙을 즐겨찾기에 추가했습니다",
+  "soundtrack-favorite-failed": "트랙 즐겨찾기를 변경하지 못했습니다",
+  "soundtrack-favorite-removed": "트랙을 즐겨찾기에서 삭제했습니다",
+  "soundtracks-by-genre": "장르별 사운드트랙",
+  "soundtracks-by-platform": "플랫폼별 사운드트랙",
   "state": "저장 상태",
   "states": "저장 상태",
   "states-n": "저장 상태 {n}개 | 저장 상태 {n}개",
diff --git a/frontend/src/locales/pl_PL/common.json b/frontend/src/locales/pl_PL/common.json
index 4853afe891..e738b70051 100644
--- a/frontend/src/locales/pl_PL/common.json
+++ b/frontend/src/locales/pl_PL/common.json
@@ -8,11 +8,13 @@
   "activity": "Aktywność",
   "add": "Dodaj",
   "administration": "Administracja",
+  "albums-n": "{n} album | {n} albumy | {n} albumów",
   "all": "Wszystkie",
   "all-files-skipped": "Wszystkie pliki pominięte, nic nie zostało przesłane.",
   "all-platforms": "Wszystkie platformy",
   "and": "i",
   "apply": "Zastosuj",
+  "artists-n": "{n} wykonawca | {n} wykonawców",
   "ascii-only": "Tylko znaki ASCII",
   "back": "Wstecz",
   "back-btn": "Wstecz",
@@ -42,6 +44,8 @@
   "core": "Rdzeń",
   "create": "Utwórz",
   "crt-mode": "CRT mode",
+  "decade-mix": "Miks dekad",
+  "decades-n": "{n} dekada | {n} dekady | {n} dekad",
   "delete": "Usuń",
   "details": "Szczegóły",
   "discard": "Odrzuć",
@@ -54,20 +58,24 @@
   "edit": "Edytuj",
   "exclude-on-delete": "Wyklucz przy usunięciu",
   "expand": "Rozwiń",
+  "favorite-soundtracks": "Ulubione ścieżki dźwiękowe",
   "filter": "Filtruj",
   "firmware": "Oprogramowanie",
   "first-page": "Pierwsza strona",
   "for": "dla",
+  "free-radio": "Wolne radio",
   "games": "Gry",
   "games-header": "Gry",
   "games-n": "{n} Gra | {n} Gry | {n} Gier",
   "generate": "Generuj",
+  "genres-n": "{n} gatunek | {n} gatunki | {n} gatunków",
   "got-it": "Rozumiem",
   "hide-password": "Ukryj hasło",
   "home": "Strona główna",
   "in-library": "W bibliotece",
   "invalid-email": "Nieprawidłowy email",
   "invalid-name": "Nieprawidłowa nazwa",
+  "jukebox": "Szafa grająca",
   "kind": "Rodzaj",
   "last-page": "Ostatnia strona",
   "last-updated": "Ostatnio zaktualizowane",
@@ -79,6 +87,9 @@
   "local": "Lokalne",
   "logout": "Wyloguj się",
   "logs": "Logs",
+  "minutes-n": "{n} min",
+  "music-by-album": "Ścieżki dźwiękowe według albumu",
+  "music-by-artist": "Ścieżki dźwiękowe według wykonawcy",
   "name": "Nazwa",
   "new-version-available": "Dostępna jest nowa wersja",
   "next-page": "Następna strona",
@@ -94,11 +105,14 @@
   "platform": "Platforma",
   "platform-created": "Platforma {name} utworzona",
   "platforms": "Platformy",
-  "platforms-n": "{n} Platforma | {n} Platformy | {n} Platform",
+  "platforms-n": "{n} platforma | {n} platformy | {n} platform",
+  "play-all": "Odtwórz wszystko",
+  "playlists": "Playlisty",
   "previous-page": "Poprzednia strona",
   "primary-navigation": "Nawigacja główna",
   "profile": "Profil",
   "random": "Losowo",
+  "recently-added-soundtracks": "Ostatnio dodane ścieżki dźwiękowe",
   "remove": "Usuń",
   "removing-from-filesystem": "Usuwanie z systemu",
   "required": "Wymagane",
@@ -116,11 +130,17 @@
   "server-stats": "Statystyki serwera",
   "settings": "Ustawienia",
   "show-password": "Pokaż hasło",
+  "shuffle": "Odtwarzanie losowe",
   "size": "Rozmiar",
   "size-on-disk": "Rozmiar na dysku",
   "slug": "Identyfikator (slug)",
   "smart-collection": "Inteligentna kolekcja",
   "smart-collections": "Inteligentne kolekcje",
+  "soundtrack-favorite-added": "Utwór dodano do ulubionych",
+  "soundtrack-favorite-failed": "Nie udało się zmienić ulubionego utworu",
+  "soundtrack-favorite-removed": "Utwór usunięto z ulubionych",
+  "soundtracks-by-genre": "Ścieżki dźwiękowe według gatunku",
+  "soundtracks-by-platform": "Ścieżki dźwiękowe według platformy",
   "state": "Stan",
   "states": "Stany",
   "states-n": "{n} Stan | {n} Stany | {n} Stanów",
diff --git a/frontend/src/locales/pt_BR/common.json b/frontend/src/locales/pt_BR/common.json
index 82e5325113..cd9eadc91e 100644
--- a/frontend/src/locales/pt_BR/common.json
+++ b/frontend/src/locales/pt_BR/common.json
@@ -8,11 +8,13 @@
   "activity": "Atividade",
   "add": "Adicionar",
   "administration": "Administração",
+  "albums-n": "{n} álbum | {n} álbuns",
   "all": "Todos",
   "all-files-skipped": "Todos os arquivos foram ignorados, nada foi enviado.",
   "all-platforms": "Todas as plataformas",
   "and": "e",
   "apply": "Aplicar",
+  "artists-n": "{n} artista | {n} artistas",
   "ascii-only": "Somente caracteres ASCII",
   "back": "Voltar",
   "back-btn": "Voltar",
@@ -42,6 +44,8 @@
   "core": "Núcleo",
   "create": "Criar",
   "crt-mode": "Modo CRT",
+  "decade-mix": "Mix por década",
+  "decades-n": "{n} década | {n} décadas",
   "delete": "Excluir",
   "details": "Detalhes",
   "discard": "Descartar",
@@ -54,20 +58,24 @@
   "edit": "Editar",
   "exclude-on-delete": "Excluir ao excluir",
   "expand": "Expandir",
+  "favorite-soundtracks": "Trilhas sonoras favoritas",
   "filter": "Filtrar",
   "firmware": "Firmware",
   "first-page": "Primeira página",
   "for": "para",
+  "free-radio": "Rádio livre",
   "games": "Jogos",
   "games-header": "Jogos",
   "games-n": "{n} Jogo | {n} Jogos",
   "generate": "Gerar",
+  "genres-n": "{n} gênero | {n} gêneros",
   "got-it": "Entendi",
   "hide-password": "Ocultar senha",
   "home": "Início",
   "in-library": "Na biblioteca",
   "invalid-email": "Email inválido",
   "invalid-name": "Nome inválido",
+  "jukebox": "Jukebox",
   "kind": "Tipo",
   "last-page": "Última página",
   "last-updated": "Última atualização",
@@ -79,6 +87,9 @@
   "local": "Local",
   "logout": "Sair",
   "logs": "Logs",
+  "minutes-n": "{n} min",
+  "music-by-album": "Trilhas sonoras por álbum",
+  "music-by-artist": "Trilhas sonoras por artista",
   "name": "Nome",
   "new-version-available": "Nova versão disponível",
   "next-page": "Próxima página",
@@ -94,11 +105,14 @@
   "platform": "Plataforma",
   "platform-created": "Plataforma {name} criada",
   "platforms": "Plataformas",
-  "platforms-n": "{n} Plataforma | {n} Plataformas",
+  "platforms-n": "{n} plataforma | {n} plataformas",
+  "play-all": "Reproduzir tudo",
+  "playlists": "Listas de reprodução",
   "previous-page": "Página anterior",
   "primary-navigation": "Navegação principal",
   "profile": "Perfil",
   "random": "Aleatório",
+  "recently-added-soundtracks": "Trilhas sonoras adicionadas recentemente",
   "remove": "Remover",
   "removing-from-filesystem": "Removendo do sistema",
   "required": "Requerido",
@@ -116,11 +130,17 @@
   "server-stats": "Estatísticas do servidor",
   "settings": "Configurações",
   "show-password": "Mostrar senha",
+  "shuffle": "Embaralhar",
   "size": "Tamanho",
   "size-on-disk": "Tamanho no disco",
   "slug": "Slug",
   "smart-collection": "Coleção Inteligente",
   "smart-collections": "Coleções Inteligentes",
+  "soundtrack-favorite-added": "Faixa adicionada aos favoritos",
+  "soundtrack-favorite-failed": "Falha ao atualizar a faixa favorita",
+  "soundtrack-favorite-removed": "Faixa removida dos favoritos",
+  "soundtracks-by-genre": "Trilhas sonoras por gênero",
+  "soundtracks-by-platform": "Trilhas sonoras por plataforma",
   "state": "Estado",
   "states": "Estados",
   "states-n": "{n} Estado | {n} Estados",
diff --git a/frontend/src/locales/ro_RO/common.json b/frontend/src/locales/ro_RO/common.json
index fec36b7e18..6471367d9a 100644
--- a/frontend/src/locales/ro_RO/common.json
+++ b/frontend/src/locales/ro_RO/common.json
@@ -8,11 +8,13 @@
   "activity": "Activitate",
   "add": "Adaugă",
   "administration": "Administrare",
+  "albums-n": "{n} album | {n} albume",
   "all": "Toate",
   "all-files-skipped": "Toate fișierele au fost ignorate, nimic nu a fost încărcat.",
   "all-platforms": "Toate platformele",
   "and": "și",
   "apply": "Aplică",
+  "artists-n": "{n} artist | {n} artiști",
   "ascii-only": "Caractere ASCII numai",
   "back": "Înapoi",
   "back-btn": "Înapoi",
@@ -42,6 +44,8 @@
   "core": "Nucleu",
   "create": "Creează",
   "crt-mode": "CRT mode",
+  "decade-mix": "Mix pe decenii",
+  "decades-n": "{n} deceniu | {n} decenii",
   "delete": "Șterge",
   "details": "Detalii",
   "discard": "Renunță",
@@ -54,20 +58,24 @@
   "edit": "Editează",
   "exclude-on-delete": "Excluzând la ștergere",
   "expand": "Extinde",
+  "favorite-soundtracks": "Coloane sonore favorite",
   "filter": "Filtru",
   "firmware": "Firmware",
   "first-page": "Prima pagină",
   "for": "pentru",
+  "free-radio": "Radio liber",
   "games": "Jocuri",
   "games-header": "Jocuri",
   "games-n": "{n} Joc | {n} Jocuri",
   "generate": "Generează",
+  "genres-n": "{n} gen | {n} genuri",
   "got-it": "Am înțeles",
   "hide-password": "Ascunde parola",
   "home": "Acasă",
   "in-library": "În bibliotecă",
   "invalid-email": "Email invalid",
   "invalid-name": "Nume invalid",
+  "jukebox": "Tonomat",
   "kind": "Tip",
   "last-page": "Ultima pagină",
   "last-updated": "Ultima actualizare",
@@ -79,6 +87,9 @@
   "local": "Local",
   "logout": "Deconectare",
   "logs": "Logs",
+  "minutes-n": "{n} min",
+  "music-by-album": "Coloane sonore după album",
+  "music-by-artist": "Coloane sonore după artist",
   "name": "Nume",
   "new-version-available": "Versiune nouă disponibilă",
   "next-page": "Pagina următoare",
@@ -94,11 +105,14 @@
   "platform": "Platformă",
   "platform-created": "Platforma {name} a fost creată",
   "platforms": "Platforme",
-  "platforms-n": "{n} Platformă | {n} Platforme",
+  "platforms-n": "{n} platformă | {n} platforme",
+  "play-all": "Redă tot",
+  "playlists": "Liste de redare",
   "previous-page": "Pagina anterioară",
   "primary-navigation": "Navigare principală",
   "profile": "Profil",
   "random": "Aleatoriu",
+  "recently-added-soundtracks": "Coloane sonore adăugate recent",
   "remove": "Elimină",
   "removing-from-filesystem": "Ștergere din sistem",
   "required": "Obligatoriu",
@@ -116,11 +130,17 @@
   "server-stats": "Statistici server",
   "settings": "Setări",
   "show-password": "Afișează parola",
+  "shuffle": "Amestecă",
   "size": "Dimensiune",
   "size-on-disk": "Dimensiune pe disc",
   "slug": "Slug",
   "smart-collection": "Colecție Inteligentă",
   "smart-collections": "Colecții Inteligente",
+  "soundtrack-favorite-added": "Piesa a fost adăugată la favorite",
+  "soundtrack-favorite-failed": "Nu s-a putut actualiza piesa favorită",
+  "soundtrack-favorite-removed": "Piesa a fost eliminată din favorite",
+  "soundtracks-by-genre": "Coloane sonore după gen",
+  "soundtracks-by-platform": "Coloane sonore după platformă",
   "state": "Stare",
   "states": "Stări",
   "states-n": "{n} Stare | {n} Stări",
diff --git a/frontend/src/locales/ru_RU/common.json b/frontend/src/locales/ru_RU/common.json
index 5cecac00c0..aac1f5b301 100644
--- a/frontend/src/locales/ru_RU/common.json
+++ b/frontend/src/locales/ru_RU/common.json
@@ -8,11 +8,13 @@
   "activity": "Активность",
   "add": "Добавить",
   "administration": "Администрирование",
+  "albums-n": "{n} альбом | {n} альбома | {n} альбомов",
   "all": "Все",
   "all-files-skipped": "Все файлы пропущены, ничего не загружено.",
   "all-platforms": "Все платформы",
   "and": "и",
   "apply": "Применить",
+  "artists-n": "{n} исполнитель | {n} исполнителя | {n} исполнителей",
   "ascii-only": "Только ASCII символы",
   "back": "Назад",
   "back-btn": "Назад",
@@ -42,6 +44,8 @@
   "core": "Ядро",
   "create": "Создать",
   "crt-mode": "CRT mode",
+  "decade-mix": "Микс по десятилетиям",
+  "decades-n": "{n} десятилетие | {n} десятилетия | {n} десятилетий",
   "delete": "Удалить",
   "details": "Подробности",
   "discard": "Отменить",
@@ -54,20 +58,24 @@
   "edit": "Редактировать",
   "exclude-on-delete": "Исключить при удалении",
   "expand": "Развернуть",
+  "favorite-soundtracks": "Избранные саундтреки",
   "filter": "Фильтр",
   "firmware": "Прошивка",
   "first-page": "Первая страница",
   "for": "для",
+  "free-radio": "Свободное радио",
   "games": "Игры",
   "games-header": "Игры",
   "games-n": "{n} Игра | {n} Игры",
   "generate": "Сгенерировать",
+  "genres-n": "{n} жанр | {n} жанра | {n} жанров",
   "got-it": "Понятно",
   "hide-password": "Скрыть пароль",
   "home": "Главная",
   "in-library": "В библиотеке",
   "invalid-email": "Недопустимый адрес электронной почты",
   "invalid-name": "Недопустимое имя",
+  "jukebox": "Музыкальный автомат",
   "kind": "Тип",
   "last-page": "Последняя страница",
   "last-updated": "Последнее обновление",
@@ -79,6 +87,9 @@
   "local": "Локально",
   "logout": "Выйти",
   "logs": "Logs",
+  "minutes-n": "{n} мин",
+  "music-by-album": "Саундтреки по альбомам",
+  "music-by-artist": "Саундтреки по исполнителям",
   "name": "Имя",
   "new-version-available": "Доступна новая версия",
   "next-page": "Следующая страница",
@@ -94,11 +105,14 @@
   "platform": "Платформа",
   "platform-created": "Платформа {name} создана",
   "platforms": "Платформы",
-  "platforms-n": "{n} Платформа | {n} Платформы",
+  "platforms-n": "{n} платформа | {n} платформы | {n} платформ",
+  "play-all": "Воспроизвести всё",
+  "playlists": "Плейлисты",
   "previous-page": "Предыдущая страница",
   "primary-navigation": "Основная навигация",
   "profile": "Профиль",
   "random": "Случайный",
+  "recently-added-soundtracks": "Недавно добавленные саундтреки",
   "remove": "Удалить",
   "removing-from-filesystem": "Удаление из системы",
   "required": "Обязательное поле",
@@ -116,11 +130,17 @@
   "server-stats": "Статистика сервера",
   "settings": "Настройки",
   "show-password": "Показать пароль",
+  "shuffle": "Перемешать",
   "size": "Размер",
   "size-on-disk": "Размер на диске",
   "slug": "Слаг",
   "smart-collection": "Умная коллекция",
   "smart-collections": "Умные коллекции",
+  "soundtrack-favorite-added": "Трек добавлен в избранное",
+  "soundtrack-favorite-failed": "Не удалось изменить избранный трек",
+  "soundtrack-favorite-removed": "Трек удалён из избранного",
+  "soundtracks-by-genre": "Саундтреки по жанрам",
+  "soundtracks-by-platform": "Саундтреки по платформам",
   "state": "Состояние",
   "states": "Состояния",
   "states-n": "{n} Состояние | {n} Состояния",
diff --git a/frontend/src/locales/tr_TR/common.json b/frontend/src/locales/tr_TR/common.json
index 61281d6309..a5c1046188 100644
--- a/frontend/src/locales/tr_TR/common.json
+++ b/frontend/src/locales/tr_TR/common.json
@@ -8,11 +8,13 @@
   "activity": "Aktivite",
   "add": "Ekle",
   "administration": "Yönetim",
+  "albums-n": "{n} albüm",
   "all": "Tümü",
   "all-files-skipped": "Tüm dosyalar atlandı, hiçbir şey yüklenmedi.",
   "all-platforms": "Tüm platformlar",
   "and": "ve",
   "apply": "Uygula",
+  "artists-n": "{n} sanatçı",
   "ascii-only": "Yalnızca ASCII karakterler",
   "back": "Geri",
   "back-btn": "Geri",
@@ -42,6 +44,8 @@
   "core": "Çekirdek",
   "create": "Oluştur",
   "crt-mode": "CRT modu",
+  "decade-mix": "On yıl karması",
+  "decades-n": "{n} on yıl",
   "delete": "Sil",
   "details": "Ayrıntılar",
   "discard": "Vazgeç",
@@ -54,20 +58,24 @@
   "edit": "Düzenle",
   "exclude-on-delete": "Silerken hariç tut",
   "expand": "Genişlet",
+  "favorite-soundtracks": "Favori oyun müzikleri",
   "filter": "Filtrele",
   "firmware": "Yazılım (Firmware)",
   "first-page": "İlk sayfa",
   "for": "için",
+  "free-radio": "Serbest radyo",
   "games": "Oyunlar",
   "games-header": "Oyunlar",
   "games-n": "{n} Oyun | {n} Oyun",
   "generate": "Oluştur",
+  "genres-n": "{n} tür",
   "got-it": "Anladım",
   "hide-password": "Şifreyi gizle",
   "home": "Ana sayfa",
   "in-library": "Kütüphanede",
   "invalid-email": "Geçersiz e-posta",
   "invalid-name": "Geçersiz isim",
+  "jukebox": "Müzik kutusu",
   "kind": "Tür",
   "last-page": "Son sayfa",
   "last-updated": "Son güncelleme",
@@ -79,6 +87,9 @@
   "local": "Yerel",
   "logout": "Çıkış yap",
   "logs": "Günlükler",
+  "minutes-n": "{n} dk",
+  "music-by-album": "Albüme göre oyun müzikleri",
+  "music-by-artist": "Sanatçıya göre oyun müzikleri",
   "name": "İsim",
   "new-version-available": "Yeni sürüm mevcut",
   "next-page": "Sonraki sayfa",
@@ -94,11 +105,14 @@
   "platform": "Platform",
   "platform-created": "{name} platformu oluşturuldu",
   "platforms": "Platformlar",
-  "platforms-n": "{n} Platform | {n} Platform",
+  "platforms-n": "{n} platform",
+  "play-all": "Tümünü oynat",
+  "playlists": "Çalma listeleri",
   "previous-page": "Önceki sayfa",
   "primary-navigation": "Ana gezinme",
   "profile": "Profil",
   "random": "Rastgele",
+  "recently-added-soundtracks": "Son eklenen oyun müzikleri",
   "remove": "Kaldır",
   "removing-from-filesystem": "Dosya sisteminden kaldırılıyor",
   "required": "Zorunlu",
@@ -116,11 +130,17 @@
   "server-stats": "Sunucu istatistikleri",
   "settings": "Ayarlar",
   "show-password": "Şifreyi göster",
+  "shuffle": "Karıştır",
   "size": "Boyut",
   "size-on-disk": "Diskteki boyut",
   "slug": "Slug",
   "smart-collection": "Akıllı Koleksiyon",
   "smart-collections": "Akıllı Koleksiyonlar",
+  "soundtrack-favorite-added": "Parça favorilere eklendi",
+  "soundtrack-favorite-failed": "Favori parça güncellenemedi",
+  "soundtrack-favorite-removed": "Parça favorilerden kaldırıldı",
+  "soundtracks-by-genre": "Türe göre oyun müzikleri",
+  "soundtracks-by-platform": "Platforma göre oyun müzikleri",
   "state": "Durum kaydı",
   "states": "Durum kayıtları",
   "states-n": "{n} Durum kaydı | {n} Durum kaydı",
diff --git a/frontend/src/locales/zh_CN/common.json b/frontend/src/locales/zh_CN/common.json
index 0a4d803b85..7ae451d82c 100644
--- a/frontend/src/locales/zh_CN/common.json
+++ b/frontend/src/locales/zh_CN/common.json
@@ -8,11 +8,13 @@
   "activity": "动态",
   "add": "添加",
   "administration": "管理",
+  "albums-n": "{n} 张专辑",
   "all": "全部",
   "all-files-skipped": "所有文件均已跳过，未上传任何内容。",
   "all-platforms": "所有平台",
   "and": "和",
   "apply": "应用",
+  "artists-n": "{n} 位艺术家",
   "ascii-only": "仅限ASCII字符",
   "back": "返回",
   "back-btn": "返回",
@@ -42,6 +44,8 @@
   "core": "核心",
   "create": "创建",
   "crt-mode": "CRT mode",
+  "decade-mix": "年代混音",
+  "decades-n": "{n} 个年代",
   "delete": "删除",
   "details": "详情",
   "discard": "丢弃",
@@ -54,20 +58,24 @@
   "edit": "编辑",
   "exclude-on-delete": "删除时排除",
   "expand": "展开",
+  "favorite-soundtracks": "收藏的原声音乐",
   "filter": "筛选",
   "firmware": "固件",
   "first-page": "第一页",
   "for": "用于",
+  "free-radio": "自由电台",
   "games": "游戏",
   "games-header": "游戏",
   "games-n": "{n} 游戏 | {n} 游戏",
   "generate": "生成",
+  "genres-n": "{n} 个类型",
   "got-it": "知道了",
   "hide-password": "隐藏密码",
   "home": "首页",
   "in-library": "在游戏库中",
   "invalid-email": "无效的电子邮件",
   "invalid-name": "无效的名称",
+  "jukebox": "音乐盒",
   "kind": "种类",
   "last-page": "最后一页",
   "last-updated": "最后更新",
@@ -79,6 +87,9 @@
   "local": "本地",
   "logout": "注销",
   "logs": "Logs",
+  "minutes-n": "{n} 分钟",
+  "music-by-album": "按专辑浏览原声音乐",
+  "music-by-artist": "按艺术家浏览原声音乐",
   "name": "名称",
   "new-version-available": "有新版本可用",
   "next-page": "下一页",
@@ -94,11 +105,14 @@
   "platform": "平台",
   "platform-created": "平台 {name} 已创建",
   "platforms": "平台",
-  "platforms-n": "{n} 平台 | {n} 平台",
+  "platforms-n": "{n} 个平台",
+  "play-all": "全部播放",
+  "playlists": "播放列表",
   "previous-page": "上一页",
   "primary-navigation": "主导航",
   "profile": "简介",
   "random": "随机",
+  "recently-added-soundtracks": "最近添加的原声音乐",
   "remove": "移除",
   "removing-from-filesystem": "正在从系统删除",
   "required": "必填",
@@ -116,11 +130,17 @@
   "server-stats": "服务器状态",
   "settings": "设置",
   "show-password": "显示密码",
+  "shuffle": "随机播放",
   "size": "容量",
   "size-on-disk": "磁盘大小",
   "slug": "Slug",
   "smart-collection": "智能收藏",
   "smart-collections": "智能收藏",
+  "soundtrack-favorite-added": "曲目已添加到收藏",
+  "soundtrack-favorite-failed": "无法更新收藏曲目",
+  "soundtrack-favorite-removed": "曲目已从收藏中移除",
+  "soundtracks-by-genre": "按类型浏览原声音乐",
+  "soundtracks-by-platform": "按平台浏览原声音乐",
   "state": "状态",
   "states": "状态",
   "states-n": "{n} 状态 | {n} 状态",
diff --git a/frontend/src/locales/zh_TW/common.json b/frontend/src/locales/zh_TW/common.json
index 6e61244254..89214fa2d5 100644
--- a/frontend/src/locales/zh_TW/common.json
+++ b/frontend/src/locales/zh_TW/common.json
@@ -8,11 +8,13 @@
   "activity": "動態",
   "add": "新增",
   "administration": "管理系統",
+  "albums-n": "{n} 張專輯",
   "all": "全部",
   "all-files-skipped": "所有檔案皆已跳過，未上傳任何內容。",
   "all-platforms": "所有平台",
   "and": "和",
   "apply": "套用",
+  "artists-n": "{n} 位藝人",
   "ascii-only": "僅限 ASCII 字元",
   "back": "返回",
   "back-btn": "返回",
@@ -42,6 +44,8 @@
   "core": "核心",
   "create": "建立",
   "crt-mode": "CRT mode",
+  "decade-mix": "年代混音",
+  "decades-n": "{n} 個年代",
   "delete": "刪除",
   "details": "詳細資訊",
   "discard": "捨棄",
@@ -54,20 +58,24 @@
   "edit": "編輯",
   "exclude-on-delete": "刪除時排除",
   "expand": "展開",
+  "favorite-soundtracks": "收藏的原聲音樂",
   "filter": "篩選",
   "firmware": "韌體",
   "first-page": "第一頁",
   "for": "用於",
+  "free-radio": "自由電台",
   "games": "遊戲",
   "games-header": "遊戲",
   "games-n": "{n} 遊戲 | {n} 遊戲",
   "generate": "產生",
+  "genres-n": "{n} 個類型",
   "got-it": "我知道了",
   "hide-password": "隱藏密碼",
   "home": "首頁",
   "in-library": "已在遊戲庫",
   "invalid-email": "無效的電子郵件",
   "invalid-name": "無效的名稱",
+  "jukebox": "音樂盒",
   "kind": "種類",
   "last-page": "最後一頁",
   "last-updated": "最後更新",
@@ -79,6 +87,9 @@
   "local": "本地",
   "logout": "登出",
   "logs": "Logs",
+  "minutes-n": "{n} 分鐘",
+  "music-by-album": "依專輯瀏覽原聲音樂",
+  "music-by-artist": "依藝人瀏覽原聲音樂",
   "name": "名稱",
   "new-version-available": "有新版本可用",
   "next-page": "下一頁",
@@ -94,11 +105,14 @@
   "platform": "平台",
   "platform-created": "平台 {name} 已建立",
   "platforms": "平台",
-  "platforms-n": "{n} 平台 | {n} 平台",
+  "platforms-n": "{n} 個平台",
+  "play-all": "全部播放",
+  "playlists": "播放清單",
   "previous-page": "上一頁",
   "primary-navigation": "主要導覽",
   "profile": "用戶資料",
   "random": "隨機",
+  "recently-added-soundtracks": "最近新增的原聲音樂",
   "remove": "移除",
   "removing-from-filesystem": "正在從系統移除",
   "required": "必填",
@@ -116,11 +130,17 @@
   "server-stats": "伺服器狀態",
   "settings": "設定",
   "show-password": "顯示密碼",
+  "shuffle": "隨機播放",
   "size": "大小",
   "size-on-disk": "占用磁碟空間",
   "slug": "網址關鍵字",
   "smart-collection": "智能收藏庫",
   "smart-collections": "智能收藏庫",
+  "soundtrack-favorite-added": "曲目已加入收藏",
+  "soundtrack-favorite-failed": "無法更新收藏曲目",
+  "soundtrack-favorite-removed": "曲目已從收藏中移除",
+  "soundtracks-by-genre": "依類型瀏覽原聲音樂",
+  "soundtracks-by-platform": "依平台瀏覽原聲音樂",
   "state": "即時存檔",
   "states": "即時存檔",
   "states-n": "{n} 即時存檔 | {n} 即時存檔",
diff --git a/frontend/src/plugins/router.ts b/frontend/src/plugins/router.ts
index 1fe6facee8..db9a209c93 100644
--- a/frontend/src/plugins/router.ts
+++ b/frontend/src/plugins/router.ts
@@ -25,6 +25,7 @@ export const ROUTES = {
   MAIN: "main",
   HOME: "home",
   SEARCH: "search",
+  MUSIC: "music",
   PLATFORM: "platform",
   COLLECTION: "collection",
   VIRTUAL_COLLECTION: "virtual-collection",
@@ -186,6 +187,15 @@ const routes = [
           v2: v2For(ROUTES.SEARCH),
         },
       },
+      {
+        path: "music",
+        name: ROUTES.MUSIC,
+        meta: { title: i18n.global.t("common.jukebox") },
+        components: {
+          default: () => import("@/views/Home.vue"),
+          v2: v2For(ROUTES.MUSIC),
+        },
+      },
       {
         path: "platform/:platform",
         name: ROUTES.PLATFORM,
diff --git a/frontend/src/services/api/music.ts b/frontend/src/services/api/music.ts
new file mode 100644
index 0000000000..1163543e3b
--- /dev/null
+++ b/frontend/src/services/api/music.ts
@@ -0,0 +1,67 @@
+import type {
+  MusicPage_MusicTrackSchema_,
+  MusicTrackIdsPayload,
+  MusicTrackSchema,
+} from "@/__generated__";
+import api from "@/services/api";
+
+export interface MusicTrackFilters {
+  search?: string;
+  limit?: number;
+  offset?: number;
+  romId?: number;
+  orderBy?:
+    | "title"
+    | "artist"
+    | "album"
+    | "duration"
+    | "year"
+    | "platform"
+    | "added";
+  orderDir?: "asc" | "desc";
+}
+
+async function getTracks(filters: MusicTrackFilters = {}) {
+  return api.get<MusicPage_MusicTrackSchema_>("/music/tracks", {
+    params: {
+      search: filters.search || undefined,
+      limit: filters.limit ?? 10_000,
+      offset: filters.offset ?? 0,
+      rom_id: filters.romId,
+      order_by: filters.orderBy ?? "title",
+      order_dir: filters.orderDir ?? "asc",
+    },
+  });
+}
+
+const ALL_TRACKS_PAGE_SIZE = 1_000;
+
+async function getAllTracks(
+  filters: Omit<MusicTrackFilters, "limit" | "offset"> = {},
+): Promise<MusicTrackSchema[]> {
+  const tracks: MusicTrackSchema[] = [];
+  let total = Number.POSITIVE_INFINITY;
+
+  while (tracks.length < total) {
+    const { data } = await getTracks({
+      ...filters,
+      limit: ALL_TRACKS_PAGE_SIZE,
+      offset: tracks.length,
+    });
+    tracks.push(...data.items);
+    total = data.total;
+    if (data.items.length === 0) break;
+  }
+
+  return tracks;
+}
+
+async function addFavorites(payload: MusicTrackIdsPayload) {
+  return api.post<{ added: number }>("/music/favorites", payload);
+}
+
+async function removeFavorites(payload: MusicTrackIdsPayload) {
+  return api.delete<{ removed: number }>("/music/favorites", { data: payload });
+}
+
+export default { getTracks, getAllTracks, addFavorites, removeFavorites };
diff --git a/frontend/src/stores/soundtrackPlayer.ts b/frontend/src/stores/soundtrackPlayer.ts
index 1245e9c80c..9b5c76c82c 100644
--- a/frontend/src/stores/soundtrackPlayer.ts
+++ b/frontend/src/stores/soundtrackPlayer.ts
@@ -61,6 +61,8 @@ const useSoundtrackPlayer = defineStore("soundtrackPlayer", () => {
   const volume = volumeStorage;
   const muted = mutedStorage;
   const playlist = ref<PlayerTrack[]>([]);
+  const originalPlaylist = ref<PlayerTrack[]>([]);
+  const isShuffled = ref(false);
   const playlistMeta = ref<Record<number, PlayerMeta>>({});
   const activePlaylistRomId = ref<number | null>(null);
 
@@ -116,14 +118,64 @@ const useSoundtrackPlayer = defineStore("soundtrackPlayer", () => {
     isBuffering.value = false;
   }
 
-  function loadPlaylistForRom(
-    romId: number,
+  function loadPlaylist(
     tracks: PlayerTrack[],
     metas: Record<number, PlayerMeta>,
+    romId: number | null = null,
+    preserveShuffle = false,
   ) {
-    playlist.value = tracks;
+    const previousOrder = playlist.value;
+    const wasShuffled = isShuffled.value;
+    originalPlaylist.value = [...tracks];
     playlistMeta.value = metas;
     activePlaylistRomId.value = romId;
+
+    if (preserveShuffle && wasShuffled) {
+      const tracksByKey = new Map(
+        tracks.map((item) => [item.romId + ":" + item.fileId, item]),
+      );
+      const restored = previousOrder.flatMap((item) => {
+        const next = tracksByKey.get(item.romId + ":" + item.fileId);
+        if (!next) return [];
+        tracksByKey.delete(item.romId + ":" + item.fileId);
+        return [next];
+      });
+      playlist.value = [...restored, ...tracksByKey.values()];
+      return;
+    }
+
+    playlist.value = [...tracks];
+    isShuffled.value = false;
+  }
+
+  function loadPlaylistForRom(
+    romId: number,
+    tracks: PlayerTrack[],
+    metas: Record<number, PlayerMeta>,
+  ) {
+    loadPlaylist(tracks, metas, romId);
+  }
+
+  function toggleShuffle() {
+    if (isShuffled.value) {
+      playlist.value = [...originalPlaylist.value];
+      isShuffled.value = false;
+      return;
+    }
+
+    const current = track.value;
+    const remaining = originalPlaylist.value.filter(
+      (item) =>
+        !current ||
+        item.fileId !== current.fileId ||
+        item.romId !== current.romId,
+    );
+    for (let i = remaining.length - 1; i > 0; i -= 1) {
+      const j = Math.floor(Math.random() * (i + 1));
+      [remaining[i], remaining[j]] = [remaining[j], remaining[i]];
+    }
+    playlist.value = current ? [current, ...remaining] : remaining;
+    isShuffled.value = true;
   }
 
   function play(t: PlayerTrack, m: PlayerMeta) {
@@ -183,7 +235,9 @@ const useSoundtrackPlayer = defineStore("soundtrackPlayer", () => {
     currentTime.value = 0;
     duration.value = 0;
     playlist.value = [];
+    originalPlaylist.value = [];
     playlistMeta.value = {};
+    isShuffled.value = false;
     activePlaylistRomId.value = null;
   }
 
@@ -213,6 +267,7 @@ const useSoundtrackPlayer = defineStore("soundtrackPlayer", () => {
     volume,
     muted,
     playlist,
+    isShuffled,
     activePlaylistRomId,
     hasPrevious,
     hasNext,
@@ -224,12 +279,14 @@ const useSoundtrackPlayer = defineStore("soundtrackPlayer", () => {
     seek,
     setVolume,
     toggleMute,
+    toggleShuffle,
     setPlaying,
     setBuffering,
     setDuration,
     setError,
     next,
     previous,
+    loadPlaylist,
     loadPlaylistForRom,
     reportCurrentTime,
   };
diff --git a/frontend/src/v2/components/AppShell/UserMenu.vue b/frontend/src/v2/components/AppShell/UserMenu.vue
index 0be6e99c8e..611d8e2b8b 100644
--- a/frontend/src/v2/components/AppShell/UserMenu.vue
+++ b/frontend/src/v2/components/AppShell/UserMenu.vue
@@ -7,7 +7,7 @@
 //   • Library  — Library management, Scan settings, Metadata sources,
 //                Client API tokens
 //   • System   — Administration, Server stats
-//   • Tools    — Controller debug
+//   • Tools    — Jukebox, Controller debug
 //   • Actions  — Scan, Upload (librarian actions, not settings)
 //   • About / Changelog — kept as dialogs (no dedicated views)
 //   • Log out
@@ -272,6 +272,18 @@ async function onLogout() {
       <div class="r-v2-user-menu__group-label">
         {{ t("settings.group-tools") }}
       </div>
+      <RMenuItem
+        :to="{ name: ROUTES.MUSIC }"
+        icon="mdi-music-box-multiple-outline"
+        :label="t('common.jukebox')"
+        @click="open = false"
+      >
+        <template #append>
+          <RChip size="x-small" color="primary">
+            {{ t("common.beta") }}
+          </RChip>
+        </template>
+      </RMenuItem>
       <RMenuItem
         :to="{ name: ROUTES.CONTROLLER_DEBUG }"
         icon="mdi-controller"
diff --git a/frontend/src/v2/components/GameDetails/SoundtrackPanel.vue b/frontend/src/v2/components/GameDetails/SoundtrackPanel.vue
index e299ff5b91..dfe9bc4585 100644
--- a/frontend/src/v2/components/GameDetails/SoundtrackPanel.vue
+++ b/frontend/src/v2/components/GameDetails/SoundtrackPanel.vue
@@ -4,17 +4,27 @@
 // Consumes the shared `useSoundtrackPlayer` store (the actual HTMLAudioElement
 // lives inside SoundtrackMiniPlayer, which stays mounted app-wide). Clicking
 // a track here fills the store playlist and calls `player.play(...)`; the
-// mini-player hides automatically when route.query.subtab === "soundtrack",
-// so only one "now playing" surface is ever on screen.
+// mini-player hides automatically whenever this panel is hosted by a full
+// soundtrack surface, so only one "now playing" surface is ever on screen.
 //
 // Key difference from the v1 player: metadata chips are shown per track AND
 // in the now-playing header, not just in the header.
-import { RBtn, RChip, RIcon, RSlider, RSpinner } from "@v2/lib";
+import {
+  RBtn,
+  RChip,
+  RDivider,
+  RIcon,
+  RMenu,
+  RMenuItem,
+  RSlider,
+  RSpinner,
+} from "@v2/lib";
 import axios, { type AxiosRequestConfig } from "axios";
 import { storeToRefs } from "pinia";
 import {
   computed,
   defineAsyncComponent,
+  nextTick,
   onBeforeUnmount,
   onMounted,
   ref,
@@ -22,9 +32,11 @@ import {
 } from "vue";
 import { useI18n } from "vue-i18n";
 import type {
+  MusicTrackSchema,
   TrackMetaSchema,
   SoundtrackTrackMetaSchema,
 } from "@/__generated__";
+import musicApi from "@/services/api/music";
 import romApi from "@/services/api/rom";
 import type { DetailedRom } from "@/stores/roms";
 import useSoundtrackPlayer, {
@@ -33,6 +45,7 @@ import useSoundtrackPlayer, {
   resolveSoundtrackGameArtwork,
 } from "@/stores/soundtrackPlayer";
 import { FRONTEND_RESOURCES_PATH, formatBytes } from "@/utils";
+import { useCan } from "@/v2/composables/useCan";
 import { useSnackbar } from "@/v2/composables/useSnackbar";
 
 // Volume / mute widget — v2 native (RMenu + RSlider + RBtn). The
@@ -44,17 +57,21 @@ const VolumeControl = defineAsyncComponent(
 );
 
 const props = defineProps<{
-  rom: DetailedRom;
+  rom?: DetailedRom;
+  musicTracks?: MusicTrackSchema[];
+  startShuffled?: boolean;
   /** Show the per-track delete button (host gates it on the ROM write grant). */
   deletable?: boolean;
 }>();
 const emit = defineEmits<{
   (e: "upload-tracks"): void;
-  (e: "delete-track", fileId: number): void;
+  (e: "delete-track", fileId: number, romId: number): void;
+  (e: "favorite-track", fileId: number, isFavorite: boolean): void;
 }>();
 
 const { t } = useI18n();
 const snackbar = useSnackbar();
+const canEditPlaylists = useCan("playlist.edit");
 
 const player = useSoundtrackPlayer();
 const {
@@ -63,8 +80,10 @@ const {
   isBuffering,
   currentTime,
   duration,
+  playlist,
   hasPrevious,
   hasNext,
+  isShuffled,
 } = storeToRefs(player);
 
 // ---------- Track + cover discovery ----------
@@ -88,17 +107,100 @@ function fileUrl(fileId: number, fileName: string): string {
   return `/api/roms/${fileId}/files/content/${encodeURIComponent(fileName)}`;
 }
 
-const tracks = computed(() =>
-  (props.rom.files ?? [])
+interface PanelTrack {
+  id: number;
+  romId: number;
+  fileName: string;
+  fileSizeBytes?: number;
+  url: string;
+  coverUrl?: string;
+  gameArtworkUrl?: string;
+  context?: string;
+  isFavorite: boolean;
+}
+
+const tracks = computed<PanelTrack[]>(() => {
+  if (props.musicTracks) {
+    return props.musicTracks.map((track) => ({
+      id: track.rom_file_id,
+      romId: track.rom_id,
+      fileName: track.title || track.game_name || String(track.rom_file_id),
+      url: track.stream_url,
+      coverUrl: track.cover_url || undefined,
+      gameArtworkUrl: track.game_cover_url || undefined,
+      context: [track.game_name, track.platform_name].filter(Boolean).join(" · "),
+      isFavorite: Boolean(track.is_favorite),
+    }));
+  }
+
+  return (props.rom?.files ?? [])
     .filter(
-      (f) => f.category === "soundtrack" && AUDIO_EXTS.has(getExt(f.file_name)),
+      (file) =>
+        file.category === "soundtrack" && AUDIO_EXTS.has(getExt(file.file_name)),
     )
     .slice()
-    .sort((a, b) => a.file_name.localeCompare(b.file_name)),
-);
+    .sort((a, b) => a.file_name.localeCompare(b.file_name))
+    .map((track) => ({
+      id: track.id,
+      romId: props.rom!.id,
+      fileName: track.file_name,
+      fileSizeBytes: track.file_size_bytes,
+      url: fileUrl(track.id, track.file_name),
+      isFavorite: false,
+    }));
+});
+
+const favoriteOverrides = ref<Map<number, boolean>>(new Map());
+const updatingFavorites = ref<Set<number>>(new Set());
+
+function isTrackFavorite(track: PanelTrack): boolean {
+  return favoriteOverrides.value.get(track.id) ?? track.isFavorite;
+}
+
+async function toggleFavorite(track: PanelTrack) {
+  if (updatingFavorites.value.has(track.id)) return;
+  const nextFavorite = !isTrackFavorite(track);
+  updatingFavorites.value = new Set(updatingFavorites.value).add(track.id);
+  try {
+    const payload = { rom_file_ids: [track.id] };
+    if (nextFavorite) await musicApi.addFavorites(payload);
+    else await musicApi.removeFavorites(payload);
+    favoriteOverrides.value = new Map(favoriteOverrides.value).set(
+      track.id,
+      nextFavorite,
+    );
+    emit("favorite-track", track.id, nextFavorite);
+    snackbar.success(
+      t(
+        nextFavorite
+          ? "common.soundtrack-favorite-added"
+          : "common.soundtrack-favorite-removed",
+      ),
+      { icon: nextFavorite ? "mdi-heart" : "mdi-heart-outline" },
+    );
+  } catch {
+    snackbar.error(t("common.soundtrack-favorite-failed"), {
+      icon: "mdi-alert-circle-outline",
+    });
+  } finally {
+    const pending = new Set(updatingFavorites.value);
+    pending.delete(track.id);
+    updatingFavorites.value = pending;
+  }
+}
+
+const displayedTracks = computed(() => {
+  if (!props.startShuffled || !isShuffled.value) return tracks.value;
+  const byId = new Map(
+    tracks.value.map((track) => [`${track.romId}:${track.id}`, track]),
+  );
+  return playlist.value
+    .map((track) => byId.get(`${track.romId}:${track.fileId}`))
+    .filter((track): track is PanelTrack => Boolean(track));
+});
 
 const folderCoverUrl = computed(() => {
-  const cover = (props.rom.files ?? [])
+  const cover = (props.rom?.files ?? [])
     .filter(
       (f) => f.category === "soundtrack" && COVER_EXTS.has(getExt(f.file_name)),
     )
@@ -107,20 +209,24 @@ const folderCoverUrl = computed(() => {
 });
 
 const gameArtworkUrl = computed(() =>
-  resolveSoundtrackGameArtwork(props.rom),
+  props.rom ? resolveSoundtrackGameArtwork(props.rom) : undefined,
 );
 
 // ---------- Metadata fetch ----------
 const tracksMeta = ref<Map<number, TrackMetaSchema>>(new Map());
 const isLoadingMeta = ref(false);
 let metaAbort: AbortController | null = null;
+let shouldStartShuffled = Boolean(props.startShuffled);
 
 function coverUrlForMeta(m: TrackMetaSchema | undefined): string | null {
   if (m?.cover_path) return `${FRONTEND_RESOURCES_PATH}/${m.cover_path}`;
   return null;
 }
 
-function toPlayerMeta(m: TrackMetaSchema | undefined): PlayerMeta {
+function toPlayerMeta(
+  m: TrackMetaSchema | undefined,
+  track?: PanelTrack,
+): PlayerMeta {
   return {
     title: m?.title ?? undefined,
     artist: m?.artist ?? undefined,
@@ -130,28 +236,50 @@ function toPlayerMeta(m: TrackMetaSchema | undefined): PlayerMeta {
     track: m?.track ?? undefined,
     disc: m?.disc ?? undefined,
     duration: m?.duration_seconds ?? undefined,
-    coverUrl: coverUrlForMeta(m) ?? undefined,
+    coverUrl: track?.coverUrl ?? coverUrlForMeta(m) ?? undefined,
     folderCoverUrl: folderCoverUrl.value ?? undefined,
-    gameArtworkUrl: gameArtworkUrl.value,
+    gameArtworkUrl: track?.gameArtworkUrl ?? gameArtworkUrl.value,
   };
 }
 
-function syncStorePlaylist() {
-  if (player.activePlaylistRomId !== props.rom.id) return;
+function syncOrStartPlaylist() {
+  const selectedTrackIsAvailable =
+    tracks.value.some(
+      (track) =>
+        track.id === activeStoreTrack.value?.fileId &&
+        track.romId === activeStoreTrack.value?.romId,
+    );
+  if (!selectedTrackIsAvailable) {
+    const firstTrack = tracks.value[0];
+    if (firstTrack) selectTrack(firstTrack.id);
+    return;
+  }
   const playerTracks: PlayerTrack[] = tracks.value.map((t) => ({
-    romId: props.rom.id,
+    romId: t.romId,
     fileId: t.id,
-    fileName: t.file_name,
-    url: fileUrl(t.id, t.file_name),
+    fileName: t.fileName,
+    url: t.url,
   }));
   const metas: Record<number, PlayerMeta> = {};
   for (const t of tracks.value) {
-    metas[t.id] = toPlayerMeta(tracksMeta.value.get(t.id));
+    metas[t.id] = toPlayerMeta(tracksMeta.value.get(t.id), t);
+  }
+  player.loadPlaylist(playerTracks, metas, props.rom?.id, true);
+  if (shouldStartShuffled) {
+    if (!isShuffled.value) player.toggleShuffle();
+    shouldStartShuffled = false;
   }
-  player.loadPlaylistForRom(props.rom.id, playerTracks, metas);
 }
 
 async function loadAllMetadata() {
+  if (props.musicTracks) {
+    tracksMeta.value = new Map(
+      props.musicTracks.map((track) => [track.rom_file_id, track]),
+    );
+    syncOrStartPlaylist();
+    return;
+  }
+  if (!props.rom) return;
   metaAbort?.abort();
   metaAbort = new AbortController();
   isLoadingMeta.value = true;
@@ -165,7 +293,18 @@ async function loadAllMetadata() {
       if (row.track_meta) next.set(row.file_id, row.track_meta);
     }
     tracksMeta.value = next;
-    syncStorePlaylist();
+    try {
+      const { data: catalog } = await musicApi.getTracks({ romId: props.rom.id });
+      favoriteOverrides.value = new Map(
+        catalog.items.map((track) => [
+          track.rom_file_id,
+          Boolean(track.is_favorite),
+        ]),
+      );
+    } catch {
+      // Metadata playback remains available if favorite state cannot load.
+    }
+    syncOrStartPlaylist();
   } catch (err: unknown) {
     const maybeCfg = err as { config?: AxiosRequestConfig };
     if (axios.isCancel(err) || maybeCfg.config?.signal?.aborted) return;
@@ -173,6 +312,7 @@ async function loadAllMetadata() {
       icon: "mdi-alert",
       timeout: 3000,
     });
+    syncOrStartPlaylist();
   } finally {
     isLoadingMeta.value = false;
   }
@@ -184,7 +324,7 @@ onMounted(() => {
 
 // Refetch when the rom updates (new tracks, re-tagged files, etc.).
 watch(
-  () => props.rom.updated_at,
+  () => [props.rom?.updated_at, props.musicTracks] as const,
   () => void loadAllMetadata(),
 );
 
@@ -194,7 +334,12 @@ onBeforeUnmount(() => {
 
 // ---------- Active-track + derived metadata ----------
 const activeTrackId = computed(() =>
-  activeStoreTrack.value && activeStoreTrack.value.romId === props.rom.id
+  activeStoreTrack.value &&
+  tracks.value.some(
+    (track) =>
+      track.id === activeStoreTrack.value?.fileId &&
+      track.romId === activeStoreTrack.value?.romId,
+  )
     ? activeStoreTrack.value.fileId
     : null,
 );
@@ -203,6 +348,15 @@ const activeTrack = computed(() =>
   tracks.value.find((t) => t.id === activeTrackId.value),
 );
 
+const panelRoot = ref<HTMLElement | null>(null);
+watch(activeTrackId, async (fileId, previousFileId) => {
+  if (fileId == null || fileId === previousFileId) return;
+  await nextTick();
+  panelRoot.value
+    ?.querySelector<HTMLElement>(`[data-track-id="${fileId}"]`)
+    ?.scrollIntoView({ block: "nearest" });
+});
+
 const activeMeta = computed<TrackMetaSchema | undefined>(() =>
   activeTrackId.value != null
     ? tracksMeta.value.get(activeTrackId.value)
@@ -211,6 +365,7 @@ const activeMeta = computed<TrackMetaSchema | undefined>(() =>
 
 const activeArtUrl = computed(
   () =>
+    activeTrack.value?.coverUrl ??
     coverUrlForMeta(activeMeta.value) ??
     folderCoverUrl.value ??
     gameArtworkUrl.value ??
@@ -221,7 +376,7 @@ const activeTitle = computed(
   () =>
     activeMeta.value?.title ??
     (activeTrack.value
-      ? activeTrack.value.file_name.replace(/\.[^.]+$/, "")
+      ? activeTrack.value.fileName.replace(/\.[^.]+$/, "")
       : ""),
 );
 
@@ -234,10 +389,11 @@ function trackTitleFor(fileId: number, fallback: string): string {
 
 function trackSubtitleFor(fileId: number): string {
   const m = tracksMeta.value.get(fileId);
-  if (!m) return "";
   const parts: string[] = [];
-  if (m.artist) parts.push(m.artist);
-  if (m.album) parts.push(m.album);
+  if (m?.artist) parts.push(m.artist);
+  if (m?.album) parts.push(m.album);
+  const context = tracks.value.find((track) => track.id === fileId)?.context;
+  if (context) parts.push(context);
   return parts.join(" · ");
 }
 
@@ -275,24 +431,6 @@ function headerChips(meta: TrackMetaSchema | undefined): ChipItem[] {
   return items;
 }
 
-// Compact chips shown on each track row — keep it tight so rows don't bloat.
-function rowChips(fileId: number): ChipItem[] {
-  const meta = tracksMeta.value.get(fileId);
-  if (!meta) return [];
-  const items: ChipItem[] = [];
-  if (meta.year)
-    items.push({
-      icon: "mdi-calendar",
-      label: String(meta.year),
-      color: "accent",
-    });
-  if (meta.genre)
-    items.push({ icon: "mdi-music-clef-treble", label: meta.genre });
-  if (meta.track) items.push({ icon: "mdi-numeric", label: `#${meta.track}` });
-  if (meta.disc) items.push({ icon: "mdi-disc", label: String(meta.disc) });
-  return items;
-}
-
 // ---------- Totals ----------
 const totalDurationSeconds = computed(() => {
   let total = 0;
@@ -309,32 +447,35 @@ function selectTrack(fileId: number) {
   if (!target) return;
 
   const playerTracks: PlayerTrack[] = tracks.value.map((t) => ({
-    romId: props.rom.id,
+    romId: t.romId,
     fileId: t.id,
-    fileName: t.file_name,
-    url: fileUrl(t.id, t.file_name),
+    fileName: t.fileName,
+    url: t.url,
   }));
   const metas: Record<number, PlayerMeta> = {};
   for (const t of tracks.value) {
-    metas[t.id] = toPlayerMeta(tracksMeta.value.get(t.id));
+    metas[t.id] = toPlayerMeta(tracksMeta.value.get(t.id), t);
   }
-  player.loadPlaylistForRom(props.rom.id, playerTracks, metas);
+  const wasShuffled = isShuffled.value;
+  player.loadPlaylist(playerTracks, metas, props.rom?.id, wasShuffled);
   const entry = playerTracks.find((p) => p.fileId === fileId)!;
   player.play(entry, metas[fileId]);
+  if (shouldStartShuffled && !isShuffled.value) player.toggleShuffle();
+  shouldStartShuffled = false;
 }
 
-function onDelete(fileId: number) {
-  if (activeTrackId.value === fileId) player.stop();
-  emit("delete-track", fileId);
+function onDelete(track: PanelTrack) {
+  if (activeTrackId.value === track.id) player.stop();
+  emit("delete-track", track.id, track.romId);
 }
 
 // Mirror the saves/states pattern: synthesize an anchor click against
 // the file content endpoint so the browser routes the download with
 // the original filename instead of opening it in a new tab.
-function downloadTrack(track: { id: number; file_name: string }) {
+function downloadTrack(track: PanelTrack) {
   const a = document.createElement("a");
-  a.href = fileUrl(track.id, track.file_name);
-  a.download = track.file_name;
+  a.href = track.url;
+  a.download = track.fileName;
   document.body.appendChild(a);
   a.click();
   a.remove();
@@ -359,7 +500,7 @@ function seekValueText(v: number): string {
 </script>
 
 <template>
-  <div class="r-v2-stp">
+  <div ref="panelRoot" class="r-v2-stp">
     <!-- Now playing / placeholder header -->
     <header class="r-v2-stp__now">
       <div class="r-v2-stp__cover">
@@ -430,60 +571,78 @@ function seekValueText(v: number): string {
       role="region"
       :aria-label="t('rom.soundtrack-player')"
     >
+      <div class="r-v2-stp__transport">
+        <RBtn
+          variant="text"
+          size="small"
+          :disabled="!hasPrevious"
+          prepend-icon="mdi-skip-previous"
+          :tooltip="t('rom.soundtrack-previous')"
+          :aria-label="t('rom.soundtrack-previous')"
+          @click="player.previous()"
+        />
+        <RBtn
+          variant="text"
+          size="small"
+          :disabled="!activeTrack"
+          :prepend-icon="isPlaying ? 'mdi-pause-circle' : 'mdi-play-circle'"
+          :tooltip="
+            isPlaying ? t('rom.soundtrack-pause') : t('rom.soundtrack-play')
+          "
+          :aria-label="
+            isPlaying ? t('rom.soundtrack-pause') : t('rom.soundtrack-play')
+          "
+          @click="player.togglePlayPause()"
+        />
+        <RBtn
+          variant="text"
+          size="small"
+          :disabled="!hasNext"
+          prepend-icon="mdi-skip-next"
+          :tooltip="t('rom.soundtrack-next')"
+          :aria-label="t('rom.soundtrack-next')"
+          @click="player.next()"
+        />
+      </div>
+      <div class="r-v2-stp__timeline">
+        <span class="r-v2-stp__time">{{ fmt(currentTime) }}</span>
+        <RSlider
+          :model-value="currentTime"
+          :max="duration || 0"
+          :step="0.1"
+          :disabled="!activeTrack"
+          color="primary"
+          class="r-v2-stp__slider"
+          :aria-label="t('rom.soundtrack-seek')"
+          :aria-valuetext="seekValueText(currentTime)"
+          @update:model-value="(v: number) => player.seek(v)"
+        />
+        <span class="r-v2-stp__time r-v2-stp__time--right">
+          {{ fmt(duration) }}
+        </span>
+      </div>
+      <div class="r-v2-stp__volume">
+        <VolumeControl size="small" />
+      </div>
       <RBtn
-        variant="text"
-        size="small"
-        :disabled="!hasPrevious"
-        prepend-icon="mdi-skip-previous"
-        :tooltip="t('rom.soundtrack-previous')"
-        :aria-label="t('rom.soundtrack-previous')"
-        @click="player.previous()"
-      />
-      <RBtn
-        variant="text"
-        size="small"
-        :disabled="!activeTrack"
-        :prepend-icon="isPlaying ? 'mdi-pause-circle' : 'mdi-play-circle'"
-        :tooltip="
-          isPlaying ? t('rom.soundtrack-pause') : t('rom.soundtrack-play')
-        "
-        :aria-label="
-          isPlaying ? t('rom.soundtrack-pause') : t('rom.soundtrack-play')
-        "
-        @click="player.togglePlayPause()"
-      />
-      <RBtn
-        variant="text"
+        icon="mdi-shuffle"
+        :variant="isShuffled ? 'translucent' : 'text'"
         size="small"
-        :disabled="!hasNext"
-        prepend-icon="mdi-skip-next"
-        :tooltip="t('rom.soundtrack-next')"
-        :aria-label="t('rom.soundtrack-next')"
-        @click="player.next()"
-      />
-      <span class="r-v2-stp__time">{{ fmt(currentTime) }}</span>
-      <RSlider
-        :model-value="currentTime"
-        :max="duration || 0"
-        :step="0.1"
-        :disabled="!activeTrack"
-        color="primary"
-        class="r-v2-stp__slider"
-        :aria-label="t('rom.soundtrack-seek')"
-        :aria-valuetext="seekValueText(currentTime)"
-        @update:model-value="(v: number) => player.seek(v)"
+        :disabled="tracks.length === 0"
+        :color="isShuffled ? 'primary' : undefined"
+        :aria-pressed="isShuffled"
+        :tooltip="t('common.shuffle')"
+        :aria-label="t('common.shuffle')"
+        @click="player.toggleShuffle()"
       />
-      <span class="r-v2-stp__time r-v2-stp__time--right">
-        {{ fmt(duration) }}
-      </span>
-      <VolumeControl size="small" />
     </div>
 
     <!-- Track list -->
     <ul class="r-v2-stp__list">
       <li
-        v-for="(track, trackIdx) in tracks"
+        v-for="(track, trackIdx) in displayedTracks"
         :key="track.id"
+        :data-track-id="track.id"
         class="r-v2-stp__row r-v2-asset-fade"
         :class="{
           'r-v2-stp__row--active': activeTrackId === track.id,
@@ -498,7 +657,7 @@ function seekValueText(v: number): string {
           class="r-v2-stp__row-btn"
           :aria-label="
             t('rom.play-track', {
-              title: trackTitleFor(track.id, track.file_name),
+              title: trackTitleFor(track.id, track.fileName),
             })
           "
           @click="selectTrack(track.id)"
@@ -508,7 +667,7 @@ function seekValueText(v: number): string {
                track is actually playing (vs. just selected/paused). -->
           <div class="r-v2-stp__row-meta">
             <div class="r-v2-stp__row-title">
-              {{ trackTitleFor(track.id, track.file_name) }}
+              {{ trackTitleFor(track.id, track.fileName) }}
             </div>
             <div
               v-if="trackSubtitleFor(track.id)"
@@ -516,18 +675,6 @@ function seekValueText(v: number): string {
             >
               {{ trackSubtitleFor(track.id) }}
             </div>
-            <div v-if="rowChips(track.id).length" class="r-v2-stp__row-chips">
-              <RChip
-                v-for="(c, i) in rowChips(track.id)"
-                :key="`r-${track.id}-${i}`"
-                size="x-small"
-                variant="translucent"
-                :color="c.color"
-                :prepend-icon="c.icon"
-              >
-                {{ c.label }}
-              </RChip>
-            </div>
           </div>
         </button>
 
@@ -538,31 +685,52 @@ function seekValueText(v: number): string {
           >
             {{ fmt(trackDurationFor(track.id)) }}
           </span>
-          <span class="r-v2-stp__row-size">
-            {{ formatBytes(track.file_size_bytes) }}
+          <span v-if="track.fileSizeBytes != null" class="r-v2-stp__row-size">
+            {{ formatBytes(track.fileSizeBytes) }}
           </span>
-          <RBtn
-            icon="mdi-download-outline"
-            variant="text"
-            size="small"
-            :tooltip="t('common.download')"
-            :aria-label="
-              t('rom.download-named', {
-                name: trackTitleFor(track.id, track.file_name),
-              })
-            "
-            @click.stop="downloadTrack(track)"
-          />
-          <RBtn
-            v-if="deletable"
-            icon="mdi-delete-outline"
-            variant="text"
-            size="small"
-            color="romm-red"
-            :tooltip="t('common.delete')"
-            :aria-label="t('rom.soundtrack-delete-track')"
-            @click.stop="onDelete(track.id)"
-          />
+          <RMenu location="bottom end" :offset="6" width="200px">
+            <template #activator="{ props: activatorProps }">
+              <RBtn
+                v-bind="activatorProps"
+                icon="mdi-dots-vertical"
+                variant="text"
+                size="small"
+                :tooltip="t('rom.more-actions')"
+                :aria-label="t('rom.more-actions')"
+              />
+            </template>
+            <RMenuItem
+              icon="mdi-play"
+              :label="t('rom.play')"
+              @click="selectTrack(track.id)"
+            />
+            <RDivider />
+            <RMenuItem
+              v-if="canEditPlaylists"
+              :icon="isTrackFavorite(track) ? 'mdi-heart' : 'mdi-heart-outline'"
+              :label="
+                t(
+                  isTrackFavorite(track)
+                    ? 'rom.remove-from-favorites'
+                    : 'rom.add-to-favorites',
+                )
+              "
+              :disabled="updatingFavorites.has(track.id)"
+              @click="toggleFavorite(track)"
+            />
+            <RMenuItem
+              icon="mdi-download-outline"
+              :label="t('common.download')"
+              @click="downloadTrack(track)"
+            />
+            <RMenuItem
+              v-if="deletable"
+              icon="mdi-delete-outline"
+              :label="t('common.delete')"
+              variant="danger"
+              @click="onDelete(track)"
+            />
+          </RMenu>
         </div>
       </li>
     </ul>
@@ -585,35 +753,18 @@ function seekValueText(v: number): string {
 .r-v2-stp {
   display: flex;
   flex-direction: column;
-  gap: var(--r-space-4);
-  padding: var(--r-space-5);
-  /* Soundtrack tab lives inside MediaTab's `__panel` (a flex item with
-     `flex: 1; min-height: 0`), but neither MediaTab nor the GameDetails
-     panel scroll for this child — the GameDetails panel is locked to
-     viewport height via `.r-v2-media { height: 100% }`. Without an
-     internal scroll context the last track + footer get clipped by the
-     panel's overflow boundary. Owning the scroll here (full panel
-     scrolls together — now-playing header, controls and list) keeps
-     the whole thing reachable without restructuring MediaTab's chain. */
+  gap: var(--r-space-2);
+  padding: var(--r-space-4);
   height: 100%;
   min-height: 0;
-  overflow-y: auto;
-  scrollbar-width: thin;
-  scrollbar-color: var(--r-color-border-strong) transparent;
-}
-.r-v2-stp::-webkit-scrollbar {
-  width: 4px;
-}
-.r-v2-stp::-webkit-scrollbar-thumb {
-  background: var(--r-color-border-strong);
-  border-radius: 2px;
+  overflow: hidden;
 }
 
 /* Now playing / placeholder header */
 .r-v2-stp__now {
   display: grid;
-  grid-template-columns: 140px 1fr;
-  gap: var(--r-space-5);
+  grid-template-columns: 140px minmax(0, 1fr);
+  gap: var(--r-space-4);
   align-items: center;
 }
 
@@ -733,9 +884,10 @@ function seekValueText(v: number): string {
 
 .r-v2-stp__chips {
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   gap: var(--r-space-1);
   margin-top: var(--r-space-1);
+  overflow: hidden;
 }
 
 .r-v2-stp__now-hint {
@@ -755,6 +907,12 @@ function seekValueText(v: number): string {
   border-radius: var(--r-radius-md);
 }
 
+.r-v2-stp__transport,
+.r-v2-stp__timeline,
+.r-v2-stp__volume {
+  display: contents;
+}
+
 .r-v2-stp__slider {
   flex: 1;
 }
@@ -770,8 +928,51 @@ function seekValueText(v: number): string {
   text-align: right;
 }
 
+html[data-bp~="xs"] .r-v2-stp {
+  padding: var(--r-space-3);
+}
+
+html[data-bp~="xs"] .r-v2-stp__now {
+  grid-template-columns: 64px minmax(0, 1fr);
+  gap: var(--r-space-3);
+}
+
+html[data-bp~="xs"] .r-v2-stp__cover {
+  width: 64px;
+  height: 64px;
+}
+
+html[data-bp~="xs"] .r-v2-stp__controls {
+  flex-wrap: wrap;
+}
+
+html[data-bp~="xs"] .r-v2-stp__transport {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+html[data-bp~="xs"] .r-v2-stp__volume {
+  display: flex;
+  margin-left: auto;
+}
+
+html[data-bp~="xs"] .r-v2-stp__timeline {
+  order: 2;
+  flex: 1 0 100%;
+  display: flex;
+  align-items: center;
+  gap: var(--r-space-2);
+  min-width: 0;
+}
+
 /* Track list */
 .r-v2-stp__list {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--r-color-border-strong) transparent;
   list-style: none;
   margin: 0;
   padding: 0;
@@ -780,7 +981,17 @@ function seekValueText(v: number): string {
   gap: var(--r-space-1);
 }
 
+.r-v2-stp__list::-webkit-scrollbar {
+  width: 4px;
+}
+
+.r-v2-stp__list::-webkit-scrollbar-thumb {
+  background: var(--r-color-border-strong);
+  border-radius: 2px;
+}
+
 .r-v2-stp__row {
+  flex: 0 0 auto;
   display: flex;
   align-items: stretch;
   gap: var(--r-space-2);
@@ -1119,13 +1330,6 @@ function seekValueText(v: number): string {
   text-overflow: ellipsis;
 }
 
-.r-v2-stp__row-chips {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-  margin-top: 4px;
-}
-
 .r-v2-stp__row-right {
   display: flex;
   align-items: center;
@@ -1146,12 +1350,12 @@ function seekValueText(v: number): string {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding-top: var(--r-space-2);
-  border-top: 1px dashed var(--r-color-border);
+  min-height: 16px;
 }
 
 .r-v2-stp__footer-total {
   color: var(--r-color-fg-muted);
-  font-size: var(--r-font-size-sm);
+  font-size: var(--r-font-size-xs);
+  line-height: 16px;
 }
 </style>
diff --git a/frontend/src/v2/components/Soundtrack/MiniPlayer.vue b/frontend/src/v2/components/Soundtrack/MiniPlayer.vue
index 566274dc7c..3e32938b74 100644
--- a/frontend/src/v2/components/Soundtrack/MiniPlayer.vue
+++ b/frontend/src/v2/components/Soundtrack/MiniPlayer.vue
@@ -38,6 +38,7 @@ const {
   duration,
   hasPrevious,
   hasNext,
+  isShuffled,
 } = storeToRefs(store);
 
 const audioEl = ref<HTMLAudioElement | null>(null);
@@ -48,15 +49,33 @@ const audioEl = ref<HTMLAudioElement | null>(null);
 // current state. Same idiom as v1's mini player.
 let loadToken = 0;
 
-const onSoundtrackSubtab = computed(
-  () =>
+const JUKEBOX_PLAYER_MODES = new Set([
+  "album",
+  "artist",
+  "decade",
+  "favorite",
+  "genre",
+  "platform",
+  "recent",
+  "play-all",
+  "station",
+]);
+
+const onFullSoundtrackPlayer = computed(() => {
+  const jukeboxMode = route.query.mode;
+  const onJukeboxPlayer =
+    route.name === "music" &&
+    typeof jukeboxMode === "string" &&
+    JUKEBOX_PLAYER_MODES.has(jukeboxMode);
+  const onGameSoundtrack =
     route.name === "rom" &&
     route.query.tab === "media" &&
-    route.query.subtab === "soundtrack",
-);
+    route.query.subtab === "soundtrack";
+  return onJukeboxPlayer || onGameSoundtrack;
+});
 
 const showMiniPlayer = computed(
-  () => track.value !== null && !onSoundtrackSubtab.value,
+  () => track.value !== null && !onFullSoundtrackPlayer.value,
 );
 
 const coverUrl = computed(
@@ -272,6 +291,16 @@ function openRom() {
         />
         <span class="r-v2-mp__transport-spacer" />
         <VolumeControl size="small" />
+        <RBtn
+          icon="mdi-shuffle"
+          :variant="isShuffled ? 'translucent' : 'text'"
+          size="small"
+          :color="isShuffled ? 'primary' : undefined"
+          :aria-pressed="isShuffled"
+          :tooltip="t('common.shuffle')"
+          :aria-label="t('common.shuffle')"
+          @click="store.toggleShuffle()"
+        />
       </div>
 
       <!-- Seek row -->
diff --git a/frontend/src/v2/router/routes.ts b/frontend/src/v2/router/routes.ts
index cc0bfb5078..2eed7ae94f 100644
--- a/frontend/src/v2/router/routes.ts
+++ b/frontend/src/v2/router/routes.ts
@@ -29,6 +29,7 @@ export const v2RouteComponents: Partial<Record<string, V2Route>> = {
   // Wave 3 — Gallery
   platform: () => import("@/v2/views/Gallery/Platform.vue"),
   search: () => import("@/v2/views/Gallery/Search.vue"),
+  music: () => import("@/v2/views/Jukebox.vue"),
   collection: () => import("@/v2/views/Gallery/Collection.vue"),
   "virtual-collection": () => import("@/v2/views/Gallery/Collection.vue"),
   "smart-collection": () => import("@/v2/views/Gallery/Collection.vue"),
diff --git a/frontend/src/v2/utils/freeRadio.ts b/frontend/src/v2/utils/freeRadio.ts
new file mode 100644
index 0000000000..4b6663d795
--- /dev/null
+++ b/frontend/src/v2/utils/freeRadio.ts
@@ -0,0 +1,64 @@
+import type { MusicTrackSchema } from "@/__generated__";
+
+export const FREE_RADIO_DURATION_SECONDS = 60 * 60;
+
+function shuffled<T>(items: T[], random: () => number): T[] {
+  const result = [...items];
+  for (let index = result.length - 1; index > 0; index -= 1) {
+    const target = Math.floor(random() * (index + 1));
+    [result[index], result[target]] = [result[target], result[index]];
+  }
+  return result;
+}
+
+export function buildFreeRadioSession(
+  tracks: MusicTrackSchema[],
+  random: () => number = Math.random,
+): MusicTrackSchema[] {
+  const eligibleTracks = tracks.filter(
+    (track) =>
+      typeof track.duration_seconds === "number" &&
+      Number.isFinite(track.duration_seconds) &&
+      track.duration_seconds > 0,
+  );
+  const byAlbum = new Map<number, MusicTrackSchema[]>();
+  for (const track of eligibleTracks) {
+    const albumTracks = byAlbum.get(track.rom_id) ?? [];
+    albumTracks.push(track);
+    byAlbum.set(track.rom_id, albumTracks);
+  }
+
+  const albumQueues = shuffled([...byAlbum.values()], random).map((album) =>
+    shuffled(album, random),
+  );
+  const balancedOrder: MusicTrackSchema[] = [];
+  while (albumQueues.some((album) => album.length > 0)) {
+    for (const album of shuffled(albumQueues, random)) {
+      const track = album.shift();
+      if (track) balancedOrder.push(track);
+    }
+  }
+
+  const totalDuration = balancedOrder.reduce(
+    (total, track) => total + (track.duration_seconds ?? 0),
+    0,
+  );
+  if (totalDuration <= FREE_RADIO_DURATION_SECONDS) return balancedOrder;
+
+  const session: MusicTrackSchema[] = [];
+  let sessionDuration = 0;
+  for (const track of balancedOrder) {
+    const duration = track.duration_seconds ?? 0;
+    if (sessionDuration + duration > FREE_RADIO_DURATION_SECONDS) continue;
+    session.push(track);
+    sessionDuration += duration;
+  }
+  return session;
+}
+
+export function trackDurationSeconds(tracks: MusicTrackSchema[]): number {
+  return tracks.reduce(
+    (total, track) => total + (track.duration_seconds ?? 0),
+    0,
+  );
+}
diff --git a/frontend/src/v2/views/Jukebox.vue b/frontend/src/v2/views/Jukebox.vue
new file mode 100644
index 0000000000..f9e35b3c6e
--- /dev/null
+++ b/frontend/src/v2/views/Jukebox.vue
@@ -0,0 +1,1335 @@
+<script setup lang="ts">
+import {
+  RBtn,
+  RChip,
+  RDivider,
+  RIcon,
+  RList,
+  RListItem,
+  RPlatformIcon,
+  RSkeletonBlock,
+  RTextField,
+} from "@v2/lib";
+import axios from "axios";
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { useRoute, useRouter } from "vue-router";
+import type { MusicTrackSchema } from "@/__generated__";
+import musicApi from "@/services/api/music";
+import romApi from "@/services/api/rom";
+import type { DetailedRom } from "@/stores/roms";
+import SoundtrackPanel from "@/v2/components/GameDetails/SoundtrackPanel.vue";
+import CardRow from "@/v2/components/Home/CardRow.vue";
+import EmptyState from "@/v2/components/shared/EmptyState.vue";
+import PageHeader from "@/v2/components/shared/PageHeader.vue";
+import { useCan } from "@/v2/composables/useCan";
+import { useConfirm } from "@/v2/composables/useConfirm";
+import { useSnackbar } from "@/v2/composables/useSnackbar";
+import {
+  buildFreeRadioSession,
+  trackDurationSeconds,
+} from "@/v2/utils/freeRadio";
+import { patchQuery } from "@/v2/utils/routeQuery";
+
+type JukeboxMode =
+  | "home"
+  | "album"
+  | "artist"
+  | "decade"
+  | "favorite"
+  | "genre"
+  | "platform"
+  | "recent"
+  | "play-all"
+  | "station";
+
+interface DecadeGroup {
+  startYear: number;
+  label: string;
+  tracks: MusicTrackSchema[];
+}
+
+interface ArtistGroup {
+  name: string;
+  tracks: MusicTrackSchema[];
+}
+
+interface Album {
+  romId: number;
+  title: string;
+  platform: string;
+  coverUrl?: string;
+  trackCount: number;
+}
+
+function errorMessage(error: unknown): string {
+  if (axios.isAxiosError(error)) {
+    const detail = error.response?.data?.detail;
+    if (typeof detail === "string" && detail) return detail;
+    return error.message;
+  }
+  return error instanceof Error ? error.message : String(error);
+}
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const confirm = useConfirm();
+const snackbar = useSnackbar();
+const canEdit = useCan("rom.edit");
+function modeFromQuery(value: unknown): JukeboxMode {
+  if (
+    value === "album" ||
+    value === "artist" ||
+    value === "decade" ||
+    value === "favorite" ||
+    value === "genre" ||
+    value === "platform" ||
+    value === "recent" ||
+    value === "play-all" ||
+    value === "station"
+  ) {
+    return value;
+  }
+  return "home";
+}
+
+const mode = ref<JukeboxMode>(modeFromQuery(route.query.mode));
+
+function openMode(value: Exclude<JukeboxMode, "home">) {
+  if (value === "station") generateFreeRadio();
+  mode.value = value;
+}
+
+function openHome() {
+  mode.value = "home";
+}
+
+const tracks = ref<MusicTrackSchema[]>([]);
+const allTracks = ref<MusicTrackSchema[]>([]);
+const freeRadioTracks = ref<MusicTrackSchema[]>([]);
+const loadingAllTracks = ref(true);
+const selectedRomId = ref<number | null>(null);
+const selectedArtist = ref(
+  typeof route.query.artist === "string" ? route.query.artist : "",
+);
+const artistSearch = ref("");
+const selectedDecade = ref(Number(route.query.decade) || 0);
+const selectedGenre = ref(
+  typeof route.query.genre === "string" ? route.query.genre : "",
+);
+const selectedPlatformId = ref(Number(route.query.platform) || 0);
+const selectedRom = ref<DetailedRom | null>(null);
+const loadingAlbums = ref(true);
+const loadingRom = ref(false);
+const albumsFailed = ref(false);
+const romFailed = ref(false);
+const search = ref(typeof route.query.search === "string" ? route.query.search : "");
+
+let albumFetchToken = 0;
+let romFetchToken = 0;
+let romAbort: AbortController | null = null;
+let searchTimer: ReturnType<typeof setTimeout> | undefined;
+
+const albums = computed<Album[]>(() => {
+  const grouped = new Map<number, Album>();
+  for (const track of tracks.value) {
+    const album = grouped.get(track.rom_id);
+    if (album) {
+      album.trackCount += 1;
+      if (!album.coverUrl && track.game_cover_url) {
+        album.coverUrl = track.game_cover_url;
+      }
+      continue;
+    }
+    grouped.set(track.rom_id, {
+      romId: track.rom_id,
+      title: track.game_name || track.album || String(track.rom_id),
+      platform: track.platform_name,
+      coverUrl: track.game_cover_url || undefined,
+      trackCount: 1,
+    });
+  }
+  return [...grouped.values()].sort((a, b) => a.title.localeCompare(b.title));
+});
+
+const decades = computed<DecadeGroup[]>(() => {
+  const grouped = new Map<number, MusicTrackSchema[]>();
+  for (const track of allTracks.value) {
+    if (!track.year) continue;
+    const startYear = Math.floor(track.year / 10) * 10;
+    grouped.set(startYear, [...(grouped.get(startYear) ?? []), track]);
+  }
+  return [...grouped.entries()]
+    .map(([startYear, decadeTracks]) => ({
+      startYear,
+      label: `${startYear}s`,
+      tracks: decadeTracks,
+    }))
+    .sort((a, b) => b.startYear - a.startYear);
+});
+
+const favoriteTracks = computed(() =>
+  allTracks.value.filter((track) => track.is_favorite),
+);
+
+const genres = computed(() => {
+  const grouped = new Map<string, MusicTrackSchema[]>();
+  for (const track of allTracks.value) {
+    for (const genre of track.game_genres ?? []) {
+      const name = genre.trim();
+      if (!name) continue;
+      grouped.set(name, [...(grouped.get(name) ?? []), track]);
+    }
+  }
+  return [...grouped.entries()]
+    .map(([name, genreTracks]) => ({ name, tracks: genreTracks }))
+    .sort((a, b) => a.name.localeCompare(b.name));
+});
+
+const platforms = computed(() => {
+  const grouped = new Map<
+    number,
+    {
+      id: number;
+      name: string;
+      slug: string;
+      tracks: MusicTrackSchema[];
+    }
+  >();
+  for (const track of allTracks.value) {
+    const group = grouped.get(track.platform_id) ?? {
+      id: track.platform_id,
+      name: track.platform_name,
+      slug: track.platform_slug,
+      tracks: [],
+    };
+    group.tracks.push(track);
+    grouped.set(track.platform_id, group);
+  }
+  return [...grouped.values()].sort((a, b) => a.name.localeCompare(b.name));
+});
+
+const recentlyAddedTracks = computed(() =>
+  [...allTracks.value]
+    .sort((a, b) => Date.parse(b.added_at) - Date.parse(a.added_at))
+    .slice(0, 25),
+);
+
+const selectedGenreTracks = computed(
+  () =>
+    genres.value.find((genre) => genre.name === selectedGenre.value)?.tracks ??
+    [],
+);
+const selectedPlatformTracks = computed(
+  () =>
+    platforms.value.find((platform) => platform.id === selectedPlatformId.value)
+      ?.tracks ?? [],
+);
+
+function selectGenre(genre: { name: string }) {
+  selectedGenre.value = genre.name;
+  patchQuery(router, { genre: genre.name });
+}
+
+function selectPlatform(platform: { id: number }) {
+  selectedPlatformId.value = platform.id;
+  patchQuery(router, { platform: String(platform.id) });
+}
+
+const selectedDecadeTracks = computed(
+  () =>
+    decades.value.find((decade) => decade.startYear === selectedDecade.value)
+      ?.tracks ?? [],
+);
+
+function selectDecade(decade: DecadeGroup) {
+  selectedDecade.value = decade.startYear;
+  patchQuery(router, { decade: String(decade.startYear) });
+}
+
+const artists = computed<ArtistGroup[]>(() => {
+  const grouped = new Map<string, MusicTrackSchema[]>();
+  for (const track of allTracks.value) {
+    const name = track.artist?.trim();
+    if (!name) continue;
+    grouped.set(name, [...(grouped.get(name) ?? []), track]);
+  }
+  return [...grouped.entries()]
+    .map(([name, artistTracks]) => ({ name, tracks: artistTracks }))
+    .sort((a, b) => a.name.localeCompare(b.name));
+});
+
+const filteredArtists = computed(() => {
+  const query = artistSearch.value.trim().toLocaleLowerCase();
+  return query
+    ? artists.value.filter((artist) =>
+        artist.name.toLocaleLowerCase().includes(query),
+      )
+    : artists.value;
+});
+
+const selectedArtistTracks = computed(
+  () =>
+    artists.value.find((artist) => artist.name === selectedArtist.value)
+      ?.tracks ?? [],
+);
+
+function selectArtist(artist: ArtistGroup) {
+  selectedArtist.value = artist.name;
+  patchQuery(router, { artist: artist.name });
+}
+
+const freeRadioDuration = computed(() =>
+  trackDurationSeconds(freeRadioTracks.value),
+);
+
+function generateFreeRadio() {
+  freeRadioTracks.value = buildFreeRadioSession(allTracks.value);
+}
+
+function formatRadioDuration(seconds: number): string {
+  return t("common.minutes-n", { n: Math.ceil(seconds / 60) });
+}
+
+async function loadRom(romId: number) {
+  const token = ++romFetchToken;
+  romAbort?.abort();
+  const controller = new AbortController();
+  romAbort = controller;
+  loadingRom.value = true;
+  romFailed.value = false;
+  selectedRom.value = null;
+  try {
+    const { data } = await romApi.getRom({
+      romId,
+      signal: controller.signal,
+    });
+    if (token === romFetchToken) selectedRom.value = data;
+  } catch (error) {
+    if (axios.isCancel(error) || controller.signal.aborted) return;
+    if (token === romFetchToken) romFailed.value = true;
+  } finally {
+    if (token === romFetchToken) loadingRom.value = false;
+  }
+}
+
+function selectAlbum(album: Album) {
+  if (selectedRomId.value === album.romId && selectedRom.value) return;
+  selectedRomId.value = album.romId;
+  patchQuery(router, { game: String(album.romId) });
+  void loadRom(album.romId);
+}
+
+function updateTrackFavorite(fileId: number, isFavorite: boolean) {
+  const update = (track: MusicTrackSchema) =>
+    track.rom_file_id === fileId
+      ? { ...track, is_favorite: isFavorite }
+      : track;
+  allTracks.value = allTracks.value.map(update);
+  tracks.value = tracks.value.map(update);
+  freeRadioTracks.value = freeRadioTracks.value.map(update);
+}
+
+async function deleteSoundtrack(fileId: number, sourceRomId?: number) {
+  const catalogTrack = allTracks.value.find(
+    (item) => item.rom_file_id === fileId,
+  );
+  const romTrack = (selectedRom.value?.files ?? []).find(
+    (file) => file.id === fileId,
+  );
+  const romId = sourceRomId ?? selectedRom.value?.id ?? catalogTrack?.rom_id;
+  if (romId == null) return;
+
+  const name = romTrack?.file_name ?? catalogTrack?.title ?? "";
+  const ok = await confirm({
+    title: t("rom.delete-track-title"),
+    body: name
+      ? t("rom.delete-track-body-named", { name })
+      : t("rom.delete-track-body"),
+    confirmText: t("rom.soundtrack-delete-track"),
+    tone: "danger",
+  });
+  if (!ok) return;
+
+  try {
+    await romApi.removeSoundtrack({ romId, fileId });
+    tracks.value = tracks.value.filter((item) => item.rom_file_id !== fileId);
+    allTracks.value = allTracks.value.filter(
+      (item) => item.rom_file_id !== fileId,
+    );
+    freeRadioTracks.value = freeRadioTracks.value.filter(
+      (item) => item.rom_file_id !== fileId,
+    );
+
+    if (selectedRom.value?.id === romId) {
+      const currentAlbum = albums.value.find((album) => album.romId === romId);
+      if (currentAlbum) {
+        await loadRom(romId);
+      } else {
+        const nextAlbum = albums.value[0] ?? null;
+        selectedRomId.value = nextAlbum?.romId ?? null;
+        selectedRom.value = null;
+        patchQuery(router, {
+          game: nextAlbum ? String(nextAlbum.romId) : undefined,
+        });
+        if (nextAlbum) await loadRom(nextAlbum.romId);
+      }
+    }
+    snackbar.success(t("rom.soundtrack-removed"), { icon: "mdi-check-bold" });
+  } catch (error: unknown) {
+    snackbar.error(
+      t("rom.soundtrack-remove-failed", { error: errorMessage(error) }),
+      { icon: "mdi-close-circle" },
+    );
+  }
+}
+
+async function fetchAllTracks() {
+  loadingAllTracks.value = true;
+  try {
+    allTracks.value = await musicApi.getAllTracks();
+    generateFreeRadio();
+    const requestedArtist =
+      typeof route.query.artist === "string" ? route.query.artist : "";
+    selectedArtist.value =
+      artists.value.find((artist) => artist.name === requestedArtist)?.name ??
+      artists.value[0]?.name ??
+      "";
+    const requestedDecade = Number(route.query.decade);
+    selectedDecade.value =
+      decades.value.find((decade) => decade.startYear === requestedDecade)
+        ?.startYear ??
+      decades.value[0]?.startYear ??
+      0;
+    const requestedGenre =
+      typeof route.query.genre === "string" ? route.query.genre : "";
+    selectedGenre.value =
+      genres.value.find((genre) => genre.name === requestedGenre)?.name ??
+      genres.value[0]?.name ??
+      "";
+    const requestedPlatform = Number(route.query.platform);
+    selectedPlatformId.value =
+      platforms.value.find((platform) => platform.id === requestedPlatform)?.id ??
+      platforms.value[0]?.id ??
+      0;
+  } catch {
+    allTracks.value = [];
+  } finally {
+    loadingAllTracks.value = false;
+  }
+}
+
+function selectInitialAlbum() {
+  const requested = Number(route.query.game);
+  const next =
+    albums.value.find((album) => album.romId === requested) ??
+    albums.value[0] ??
+    null;
+  selectedRomId.value = next?.romId ?? null;
+  if (next) void loadRom(next.romId);
+  else selectedRom.value = null;
+}
+
+async function fetchAlbums() {
+  const token = ++albumFetchToken;
+  loadingAlbums.value = true;
+  albumsFailed.value = false;
+  try {
+    const items = await musicApi.getAllTracks({ search: search.value.trim() });
+    if (token !== albumFetchToken) return;
+    tracks.value = items;
+
+    selectInitialAlbum();
+  } catch {
+    if (token === albumFetchToken) albumsFailed.value = true;
+  } finally {
+    if (token === albumFetchToken) loadingAlbums.value = false;
+  }
+}
+
+watch(mode, (value) => {
+  patchQuery(router, {
+    mode: value === "home" ? undefined : value,
+    game: value === "album" ? route.query.game : undefined,
+    artist: value === "artist" ? selectedArtist.value || undefined : undefined,
+    decade:
+      value === "decade" && selectedDecade.value
+        ? String(selectedDecade.value)
+        : undefined,
+    genre: value === "genre" ? selectedGenre.value || undefined : undefined,
+    platform:
+      value === "platform" && selectedPlatformId.value
+        ? String(selectedPlatformId.value)
+        : undefined,
+  });
+});
+
+watch(
+  () => route.query.mode,
+  (value) => {
+    const next = modeFromQuery(value);
+    if (next !== mode.value) mode.value = next;
+  },
+);
+
+watch(
+  () => route.query.decade,
+  (value) => {
+    const requested = Number(value);
+    if (
+      requested &&
+      requested !== selectedDecade.value &&
+      decades.value.some((decade) => decade.startYear === requested)
+    ) {
+      selectedDecade.value = requested;
+    }
+  },
+);
+
+watch(
+  () => route.query.genre,
+  (value) => {
+    if (
+      typeof value === "string" &&
+      value !== selectedGenre.value &&
+      genres.value.some((genre) => genre.name === value)
+    ) {
+      selectedGenre.value = value;
+    }
+  },
+);
+
+watch(
+  () => route.query.platform,
+  (value) => {
+    const requested = Number(value);
+    if (
+      requested &&
+      requested !== selectedPlatformId.value &&
+      platforms.value.some((platform) => platform.id === requested)
+    ) {
+      selectedPlatformId.value = requested;
+    }
+  },
+);
+
+watch(search, (value) => {
+  patchQuery(router, { search: value.trim() || undefined, game: undefined });
+  clearTimeout(searchTimer);
+  searchTimer = setTimeout(fetchAlbums, 250);
+});
+
+watch(
+  () => route.query.search,
+  (value) => {
+    const next = typeof value === "string" ? value : "";
+    if (next !== search.value) search.value = next;
+  },
+);
+
+onMounted(async () => {
+  await fetchAllTracks();
+  if (search.value.trim()) {
+    await fetchAlbums();
+    return;
+  }
+  tracks.value = [...allTracks.value];
+  loadingAlbums.value = false;
+  selectInitialAlbum();
+});
+
+onBeforeUnmount(() => {
+  clearTimeout(searchTimer);
+  romAbort?.abort();
+});
+</script>
+
+<template>
+  <section class="jukebox">
+    <div class="jukebox__header">
+      <PageHeader :title="t('common.jukebox')">
+        <template #count>
+          <RChip size="x-small" color="primary">{{ t("common.beta") }}</RChip>
+        </template>
+        <RBtn
+          v-if="mode !== 'home'"
+          class="jukebox__back"
+          icon="mdi-arrow-left"
+          variant="text"
+          :tooltip="t('common.back')"
+          :aria-label="t('common.back')"
+          @click="openHome"
+        />
+      </PageHeader>
+      <RDivider />
+    </div>
+
+    <main v-if="mode === 'home'" class="jukebox__home">
+      <CardRow :title="t('common.playlists')" gap="16px">
+        <RBtn
+          class="jukebox__launch"
+          variant="plain"
+          @click="openMode('station')"
+        >
+          <span class="jukebox__launch-icon">
+            <RIcon icon="mdi-radio-tower" size="52" />
+          </span>
+          <strong>{{ t("common.free-radio") }}</strong>
+          <span class="jukebox__launch-count">
+            {{ formatRadioDuration(freeRadioDuration) }}
+          </span>
+        </RBtn>
+        <RBtn
+          class="jukebox__launch"
+          variant="plain"
+          @click="openMode('decade')"
+        >
+          <span class="jukebox__launch-icon">
+            <RIcon icon="mdi-calendar-range" size="52" />
+          </span>
+          <strong>{{ t("common.decade-mix") }}</strong>
+          <span class="jukebox__launch-count">
+            {{
+              t("common.decades-n", decades.length, {
+                named: { n: decades.length },
+              })
+            }}
+          </span>
+        </RBtn>
+        <RBtn
+          class="jukebox__launch"
+          variant="plain"
+          @click="openMode('recent')"
+        >
+          <span class="jukebox__launch-icon">
+            <RIcon icon="mdi-clock-outline" size="52" />
+          </span>
+          <strong>{{ t("common.recently-added-soundtracks") }}</strong>
+          <span class="jukebox__launch-count">
+            {{
+              t("rom.tracks-n", recentlyAddedTracks.length, {
+                named: { n: recentlyAddedTracks.length },
+              })
+            }}
+          </span>
+        </RBtn>
+        <RBtn
+          class="jukebox__launch"
+          variant="plain"
+          @click="openMode('favorite')"
+        >
+          <span class="jukebox__launch-icon">
+            <RIcon icon="mdi-heart" size="52" />
+          </span>
+          <strong>{{ t("common.favorite-soundtracks") }}</strong>
+          <span class="jukebox__launch-count">
+            {{
+              t("rom.tracks-n", favoriteTracks.length, {
+                named: { n: favoriteTracks.length },
+              })
+            }}
+          </span>
+        </RBtn>
+      </CardRow>
+      <CardRow :title="t('common.library')" gap="16px">
+        <RBtn
+          class="jukebox__launch"
+          variant="plain"
+          @click="openMode('play-all')"
+        >
+          <span class="jukebox__launch-icon">
+            <RIcon icon="mdi-playlist-music" size="52" />
+          </span>
+          <strong>{{ t("common.play-all") }}</strong>
+          <span class="jukebox__launch-count">
+            {{
+              t("rom.tracks-n", allTracks.length, {
+                named: { n: allTracks.length },
+              })
+            }}
+          </span>
+        </RBtn>
+        <RBtn
+          class="jukebox__launch"
+          variant="plain"
+          @click="openMode('album')"
+        >
+          <span class="jukebox__launch-icon">
+            <RIcon icon="mdi-album" size="52" />
+          </span>
+          <strong>{{ t("common.music-by-album") }}</strong>
+          <span class="jukebox__launch-count">
+            {{
+              t("common.albums-n", albums.length, {
+                named: { n: albums.length },
+              })
+            }}
+          </span>
+        </RBtn>
+        <RBtn
+          class="jukebox__launch"
+          variant="plain"
+          @click="openMode('platform')"
+        >
+          <span class="jukebox__launch-icon">
+            <RIcon icon="mdi-controller" size="52" />
+          </span>
+          <strong>{{ t("common.soundtracks-by-platform") }}</strong>
+          <span class="jukebox__launch-count">
+            {{
+              t("common.platforms-n", platforms.length, {
+                named: { n: platforms.length },
+              })
+            }}
+          </span>
+        </RBtn>
+        <RBtn
+          class="jukebox__launch"
+          variant="plain"
+          @click="openMode('artist')"
+        >
+          <span class="jukebox__launch-icon">
+            <RIcon icon="mdi-account-music" size="52" />
+          </span>
+          <strong>{{ t("common.music-by-artist") }}</strong>
+          <span class="jukebox__launch-count">
+            {{
+              t("common.artists-n", artists.length, {
+                named: { n: artists.length },
+              })
+            }}
+          </span>
+        </RBtn>
+
+        <RBtn
+          class="jukebox__launch"
+          variant="plain"
+          @click="openMode('genre')"
+        >
+          <span class="jukebox__launch-icon">
+            <RIcon icon="mdi-shape" size="52" />
+          </span>
+          <strong>{{ t("common.soundtracks-by-genre") }}</strong>
+          <span class="jukebox__launch-count">
+            {{
+              t("common.genres-n", genres.length, {
+                named: { n: genres.length },
+              })
+            }}
+          </span>
+        </RBtn>
+
+
+      </CardRow>
+    </main>
+    <aside v-if="mode === 'album'" class="jukebox__sidebar">
+      <div class="jukebox__sidebar-head">
+        <RTextField
+          v-model="search"
+          prepend-inner-icon="mdi-magnify"
+          :placeholder="t('common.search')"
+          clearable
+          hide-details
+          density="compact"
+        />
+      </div>
+
+      <div class="jukebox__albums r-v2-scroll-hidden">
+        <template v-if="loadingAlbums">
+          <RSkeletonBlock
+            v-for="n in 7"
+            :key="n"
+            height="72px"
+            rounded="md"
+          />
+        </template>
+        <EmptyState
+          v-else-if="albumsFailed"
+          icon="mdi-music-note-off-outline"
+          :message="t('common.unknown-error')"
+        />
+        <EmptyState
+          v-else-if="!albums.length"
+          icon="mdi-album"
+          :message="t('common.no-results')"
+        />
+        <RList v-else density="default">
+          <RListItem
+            v-for="album in albums"
+            :key="album.romId"
+            :title="album.title"
+            :subtitle="album.platform"
+            :active="selectedRomId === album.romId"
+            :aria-label="album.title"
+            @click="selectAlbum(album)"
+          >
+            <template #prepend>
+              <div class="jukebox__album-cover">
+                <img
+                  v-if="album.coverUrl"
+                  :src="album.coverUrl"
+                  alt=""
+                  loading="lazy"
+                />
+                <RIcon v-else icon="mdi-album" size="22" />
+              </div>
+            </template>
+            <template #append>
+              <span class="jukebox__track-count">{{ album.trackCount }}</span>
+            </template>
+          </RListItem>
+        </RList>
+      </div>
+    </aside>
+
+    <aside v-if="mode === 'genre'" class="jukebox__sidebar">
+      <div class="jukebox__albums r-v2-scroll-hidden">
+        <EmptyState
+          v-if="!genres.length"
+          icon="mdi-shape"
+          :message="t('common.no-results')"
+        />
+        <RList v-else density="default">
+          <RListItem
+            v-for="genre in genres"
+            :key="genre.name"
+            :title="genre.name"
+            :active="selectedGenre === genre.name"
+            @click="selectGenre(genre)"
+          >
+            <template #prepend>
+              <div class="jukebox__artist-icon">
+                <RIcon icon="mdi-shape" size="22" />
+              </div>
+            </template>
+            <template #append>
+              <span class="jukebox__track-count">{{ genre.tracks.length }}</span>
+            </template>
+          </RListItem>
+        </RList>
+      </div>
+    </aside>
+    <main v-if="mode === 'genre'" class="jukebox__main">
+      <SoundtrackPanel
+        v-if="selectedGenreTracks.length"
+        :key="selectedGenre"
+        :music-tracks="selectedGenreTracks"
+        :deletable="canEdit"
+        class="jukebox__player"
+        @delete-track="deleteSoundtrack"
+        @favorite-track="updateTrackFavorite"
+      />
+      <EmptyState
+        v-else
+        variant="boxed"
+        icon="mdi-shape"
+        :message="t('common.no-results')"
+      />
+    </main>
+
+    <aside v-if="mode === 'platform'" class="jukebox__sidebar">
+      <div class="jukebox__albums r-v2-scroll-hidden">
+        <EmptyState
+          v-if="!platforms.length"
+          icon="mdi-controller-classic"
+          :message="t('common.no-results')"
+        />
+        <RList v-else density="default">
+          <RListItem
+            v-for="platform in platforms"
+            :key="platform.id"
+            :title="platform.name"
+            :active="selectedPlatformId === platform.id"
+            @click="selectPlatform(platform)"
+          >
+            <template #prepend>
+              <div class="jukebox__platform-icon">
+                <RPlatformIcon
+                  :slug="platform.slug"
+                  :alt="platform.name"
+                  size="100%"
+                  :show-tooltip="false"
+                />
+              </div>
+            </template>
+            <template #append>
+              <span class="jukebox__track-count">{{ platform.tracks.length }}</span>
+            </template>
+          </RListItem>
+        </RList>
+      </div>
+    </aside>
+    <main v-if="mode === 'platform'" class="jukebox__main">
+      <SoundtrackPanel
+        v-if="selectedPlatformTracks.length"
+        :key="selectedPlatformId"
+        :music-tracks="selectedPlatformTracks"
+        :deletable="canEdit"
+        class="jukebox__player"
+        @delete-track="deleteSoundtrack"
+        @favorite-track="updateTrackFavorite"
+      />
+      <EmptyState
+        v-else
+        variant="boxed"
+        icon="mdi-controller-classic"
+        :message="t('common.no-results')"
+      />
+    </main>
+
+    <aside v-if="mode === 'decade'" class="jukebox__sidebar">
+      <div class="jukebox__albums r-v2-scroll-hidden">
+        <EmptyState
+          v-if="!decades.length"
+          icon="mdi-calendar-range"
+          :message="t('common.no-results')"
+        />
+        <RList v-else density="default">
+          <RListItem
+            v-for="decade in decades"
+            :key="decade.startYear"
+            :title="decade.label"
+            :active="selectedDecade === decade.startYear"
+            :aria-label="decade.label"
+            @click="selectDecade(decade)"
+          >
+            <template #prepend>
+              <div class="jukebox__artist-icon">
+                <RIcon icon="mdi-calendar-range" size="22" />
+              </div>
+            </template>
+            <template #append>
+              <span class="jukebox__track-count">{{ decade.tracks.length }}</span>
+            </template>
+          </RListItem>
+        </RList>
+      </div>
+    </aside>
+
+    <main v-if="mode === 'decade'" class="jukebox__main">
+      <SoundtrackPanel
+        v-if="selectedDecadeTracks.length"
+        :key="selectedDecade"
+        :music-tracks="selectedDecadeTracks"
+        :start-shuffled="true"
+        :deletable="canEdit"
+        class="jukebox__player"
+        @delete-track="deleteSoundtrack"
+        @favorite-track="updateTrackFavorite"
+      />
+      <EmptyState
+        v-else
+        variant="boxed"
+        icon="mdi-calendar-range"
+        :message="t('common.no-results')"
+      />
+    </main>
+
+    <aside v-if="mode === 'artist'" class="jukebox__sidebar">
+      <div class="jukebox__sidebar-head">
+        <RTextField
+          v-model="artistSearch"
+          prepend-inner-icon="mdi-magnify"
+          :placeholder="t('common.search')"
+          clearable
+          hide-details
+          density="compact"
+        />
+      </div>
+      <div class="jukebox__albums r-v2-scroll-hidden">
+        <EmptyState
+          v-if="!filteredArtists.length"
+          icon="mdi-account-music"
+          :message="t('common.no-results')"
+        />
+        <RList v-else density="default">
+          <RListItem
+            v-for="artist in filteredArtists"
+            :key="artist.name"
+            :title="artist.name"
+            :active="selectedArtist === artist.name"
+            :aria-label="artist.name"
+            @click="selectArtist(artist)"
+          >
+            <template #prepend>
+              <div class="jukebox__artist-icon">
+                <RIcon icon="mdi-account-music" size="22" />
+              </div>
+            </template>
+            <template #append>
+              <span class="jukebox__track-count">{{ artist.tracks.length }}</span>
+            </template>
+          </RListItem>
+        </RList>
+      </div>
+    </aside>
+
+    <main v-if="mode === 'artist'" class="jukebox__main">
+      <SoundtrackPanel
+        v-if="selectedArtistTracks.length"
+        :key="selectedArtist"
+        :music-tracks="selectedArtistTracks"
+        :deletable="canEdit"
+        class="jukebox__player"
+        @delete-track="deleteSoundtrack"
+        @favorite-track="updateTrackFavorite"
+      />
+      <EmptyState
+        v-else
+        variant="boxed"
+        icon="mdi-account-music"
+        :message="t('common.no-results')"
+      />
+    </main>
+
+    <main v-if="mode === 'album'" class="jukebox__main">
+      <div v-if="loadingRom" class="jukebox__player-loading">
+        <RSkeletonBlock width="140px" height="140px" rounded="full" />
+        <div class="jukebox__player-loading-body">
+          <RSkeletonBlock width="30%" height="14px" />
+          <RSkeletonBlock width="65%" height="28px" />
+          <RSkeletonBlock width="45%" height="18px" />
+        </div>
+      </div>
+      <EmptyState
+        v-else-if="romFailed"
+        variant="boxed"
+        icon="mdi-music-note-off-outline"
+        :message="t('common.unknown-error')"
+      />
+      <SoundtrackPanel
+        v-else-if="selectedRom"
+        :key="selectedRom.id"
+        :rom="selectedRom"
+        :deletable="canEdit"
+        class="jukebox__player"
+        @delete-track="deleteSoundtrack"
+        @favorite-track="updateTrackFavorite"
+      />
+      <EmptyState
+        v-else
+        variant="boxed"
+        icon="mdi-album"
+        :message="t('common.no-results')"
+      />
+    </main>
+    <template
+      v-if="
+        mode === 'play-all' ||
+        mode === 'station' ||
+        mode === 'favorite' ||
+        mode === 'recent'
+      "
+    >
+      <div v-if="loadingAllTracks" class="jukebox__play-all-loading">
+        <RSkeletonBlock height="140px" rounded="md" />
+      </div>
+      <EmptyState
+        v-else-if="
+          (mode === 'favorite' && favoriteTracks.length === 0) ||
+          (mode === 'recent' && recentlyAddedTracks.length === 0) ||
+          (mode === 'station' && freeRadioTracks.length === 0) ||
+          (mode === 'play-all' && allTracks.length === 0)
+        "
+        class="jukebox__play-all"
+        variant="boxed"
+        icon="mdi-playlist-music"
+        :message="t('common.no-results')"
+      />
+      <SoundtrackPanel
+        v-else
+        :key="mode"
+        :music-tracks="
+          mode === 'station'
+            ? freeRadioTracks
+            : mode === 'favorite'
+              ? favoriteTracks
+              : mode === 'recent'
+                ? recentlyAddedTracks
+                : allTracks
+        "
+        :deletable="canEdit"
+        class="jukebox__play-all"
+        @delete-track="deleteSoundtrack"
+        @favorite-track="updateTrackFavorite"
+      />
+    </template>
+  </section>
+</template>
+
+<style scoped>
+.jukebox {
+  height: calc(100vh - var(--r-nav-h));
+  height: calc(100dvh - var(--r-nav-h));
+  display: grid;
+  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
+  grid-template-rows: auto minmax(0, 1fr);
+  overflow: hidden;
+}
+
+.jukebox__header {
+  grid-column: 1 / -1;
+  padding: 24px var(--r-row-pad) 0;
+}
+
+.jukebox__back {
+  margin-left: auto;
+}
+
+.jukebox__home {
+  grid-column: 1 / -1;
+  min-width: 0;
+  min-height: 0;
+  overflow-y: auto;
+  scrollbar-gutter: stable;
+  padding: var(--r-space-5) 0 60px;
+}
+
+.jukebox__launch {
+  position: relative;
+  --r-btn-rest-h: auto;
+  width: 150px;
+  flex: 0 0 150px;
+  appearance: none;
+  min-width: 0;
+  padding: 14px 12px 12px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 7px;
+  border: 1px solid var(--r-color-border);
+  border-radius: var(--r-radius-card);
+  background: var(--r-color-bg-elevated);
+  color: var(--r-color-fg-secondary);
+  cursor: pointer;
+  transition:
+    background var(--r-motion-fast),
+    border-color var(--r-motion-fast),
+    transform var(--r-motion-fast);
+}
+
+.jukebox__launch :deep(.r-btn__content),
+.jukebox__launch :deep(.r-btn__label) {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: inherit;
+  white-space: normal;
+}
+
+html[data-input="mouse"] .jukebox__launch:hover,
+html[data-input="touch"] .jukebox__launch:hover,
+.jukebox__launch:focus-visible {
+  background: var(--r-color-surface);
+  border-color: var(--r-color-border-strong);
+}
+
+.jukebox__launch:focus-visible {
+  border-color: var(--r-color-brand-primary);
+  box-shadow:
+    0 8px 28px color-mix(in srgb, black 35%, transparent),
+    0 0 0 2px var(--r-color-brand-primary),
+    0 0 18px color-mix(in srgb, var(--r-color-brand-primary) 55%, transparent);
+  outline: none;
+}
+
+.jukebox__launch-icon {
+  width: 52px;
+  height: 52px;
+  display: grid;
+  place-items: center;
+  color: var(--r-color-fg-heading);
+  opacity: 0.9;
+  transition:
+    opacity var(--r-motion-fast),
+    transform var(--r-motion-fast);
+}
+
+html[data-input="mouse"] .jukebox__launch:hover .jukebox__launch-icon,
+html[data-input="touch"] .jukebox__launch:hover .jukebox__launch-icon,
+.jukebox__launch:focus-visible .jukebox__launch-icon {
+  opacity: 1;
+  transform: scale(1.05);
+}
+
+.jukebox__launch strong {
+  min-height: 32px;
+  display: grid;
+  place-items: center;
+  font-size: 12px;
+  font-weight: var(--r-font-weight-semibold);
+  line-height: 1.35;
+  text-align: center;
+}
+
+.jukebox__launch-count {
+  margin-top: auto;
+  color: var(--r-color-fg-muted);
+  font-size: 11px;
+}
+
+.jukebox__play-all {
+  grid-column: 1 / -1;
+  min-width: 0;
+  min-height: 0;
+}
+
+.jukebox__play-all-loading {
+  grid-column: 1 / -1;
+  padding: var(--r-space-5);
+}
+
+.jukebox__sidebar {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--r-color-border);
+  background: color-mix(in srgb, var(--r-color-bg-elevated) 70%, transparent);
+}
+
+.jukebox__sidebar-head {
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--r-color-border);
+}
+
+.jukebox__albums {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px;
+}
+
+.jukebox__album-cover {
+  width: 42px;
+  height: 56px;
+  flex: 0 0 auto;
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+  border-radius: var(--r-radius-sm);
+  background: var(--r-color-cover-placeholder);
+  color: var(--r-color-fg-muted);
+}
+
+.jukebox__artist-icon {
+  width: 42px;
+  height: 42px;
+  flex: 0 0 auto;
+  display: grid;
+  place-items: center;
+  border-radius: var(--r-radius-full);
+  background: var(--r-color-cover-placeholder);
+  color: var(--r-color-fg-muted);
+}
+
+.jukebox__platform-icon {
+  width: 42px;
+  height: 42px;
+  flex: 0 0 auto;
+  display: grid;
+  place-items: center;
+  padding: 4px;
+}
+
+.jukebox__album-cover img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.jukebox__track-count {
+  min-width: 24px;
+  text-align: center;
+  color: var(--r-color-fg-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.jukebox__main {
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.jukebox__player {
+  height: 100%;
+}
+
+.jukebox__player-loading {
+  height: 100%;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--r-space-5);
+  padding: var(--r-space-5);
+}
+
+.jukebox__player-loading-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--r-space-3);
+  padding-top: var(--r-space-4);
+}
+
+html[data-bp~="sm-and-down"] .jukebox {
+  grid-template-columns: minmax(210px, 36vw) minmax(0, 1fr);
+}
+
+html[data-bp~="xs"] .jukebox {
+  height: calc(100dvh - var(--r-nav-h) - var(--r-bottom-nav-h));
+  grid-template-columns: 76px minmax(0, 1fr);
+}
+
+html[data-bp~="xs"] .jukebox__home {
+  padding: var(--r-space-4) 0 40px;
+}
+
+html[data-bp~="xs"] .jukebox__launch {
+  width: 110px;
+  flex-basis: 110px;
+  padding: 8px;
+  gap: 4px;
+}
+
+html[data-bp~="xs"] .jukebox__launch-icon {
+  width: 52px;
+  height: 52px;
+}
+
+html[data-bp~="xs"] .jukebox__launch strong {
+  min-height: 28px;
+  font-size: 10px;
+}
+
+html[data-bp~="xs"] .jukebox__launch-count {
+  font-size: 9px;
+}
+
+html[data-bp~="xs"] .jukebox__sidebar-head {
+  display: none;
+}
+
+html[data-bp~="xs"] .jukebox__albums {
+  padding: 8px;
+}
+
+html[data-bp~="xs"] .jukebox__albums :deep(.r-list-item) {
+  justify-content: center;
+  padding: 6px;
+}
+
+html[data-bp~="xs"] .jukebox__albums :deep(.r-list-item__body),
+html[data-bp~="xs"] .jukebox__albums :deep(.r-list-item__append) {
+  display: none;
+}
+
+html[data-bp~="xs"] .jukebox__player :deep(.r-v2-stp__row-duration),
+html[data-bp~="xs"] .jukebox__player :deep(.r-v2-stp__row-size) {
+  display: none;
+}
+
+html[data-bp~="xs"] .jukebox__player-loading {
+  flex-direction: column;
+}
+</style>

From faed1000c4ae1e715a1e1fd0e52b73c91c0f5541 Mon Sep 17 00:00:00 2001
From: wadie <wadie_bs@hotmail.com>
Date: Fri, 14 Aug 2026 10:46:18 +0200
Subject: [PATCH 4/4] fix(music): reshuffle replaced playlists

---
 frontend/src/stores/soundtrackPlayer.ts | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/frontend/src/stores/soundtrackPlayer.ts b/frontend/src/stores/soundtrackPlayer.ts
index 9b5c76c82c..aeceb40f0c 100644
--- a/frontend/src/stores/soundtrackPlayer.ts
+++ b/frontend/src/stores/soundtrackPlayer.ts
@@ -118,6 +118,15 @@ const useSoundtrackPlayer = defineStore("soundtrackPlayer", () => {
     isBuffering.value = false;
   }
 
+  function shuffledTracks(tracks: PlayerTrack[]): PlayerTrack[] {
+    const result = [...tracks];
+    for (let index = result.length - 1; index > 0; index -= 1) {
+      const target = Math.floor(Math.random() * (index + 1));
+      [result[index], result[target]] = [result[target], result[index]];
+    }
+    return result;
+  }
+
   function loadPlaylist(
     tracks: PlayerTrack[],
     metas: Record<number, PlayerMeta>,
@@ -140,7 +149,10 @@ const useSoundtrackPlayer = defineStore("soundtrackPlayer", () => {
         tracksByKey.delete(item.romId + ":" + item.fileId);
         return [next];
       });
-      playlist.value = [...restored, ...tracksByKey.values()];
+      playlist.value =
+        restored.length > 0
+          ? [...restored, ...tracksByKey.values()]
+          : shuffledTracks([...tracksByKey.values()]);
       return;
     }
 
@@ -170,11 +182,8 @@ const useSoundtrackPlayer = defineStore("soundtrackPlayer", () => {
         item.fileId !== current.fileId ||
         item.romId !== current.romId,
     );
-    for (let i = remaining.length - 1; i > 0; i -= 1) {
-      const j = Math.floor(Math.random() * (i + 1));
-      [remaining[i], remaining[j]] = [remaining[j], remaining[i]];
-    }
-    playlist.value = current ? [current, ...remaining] : remaining;
+    const shuffled = shuffledTracks(remaining);
+    playlist.value = current ? [current, ...shuffled] : shuffled;
     isShuffled.value = true;
   }