diff --git a/.gitignore b/.gitignore
index e7bee96..25c5f52 100644
--- a/.gitignore
+++ b/.gitignore
@@ -44,3 +44,4 @@ Thumbs.db
 # the dev server takes minutes to start with 100k+ files under public/.
 /public/nitro-assets
 /public/swf
+.superpowers/
diff --git a/CLAUDE.md b/CLAUDE.md
index e9c7383..cd950d9 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -6,19 +6,27 @@ the ground running.
 
 ## TL;DR
 
-This branch — **`feat/react19-modernization`** — is a long-running modernization
-of the Nitro V3 client: bump to React 19.2 idioms, add the supporting
-infrastructure (TanStack Query, Zustand, Vitest, React Compiler, error
-boundaries), split a few god-hooks, and audit logic bugs along the way.
-PR is **#2** on `simoleo89/Nitro-V3`.
+This client carries a long-running React 19.2 modernization: React 19
+idioms + supporting infrastructure (TanStack Query, Zustand, Vitest,
+React Compiler, error boundaries), god-hook splits, and logic-bug audits.
 
-Upstream `duckietm/Nitro-V3` (`origin/Dev`) is merged in through
-`b2318b9` as of 2026-05-18 (merge commit `779a98c`). That brings in
-JSON5 config support, user-settings (reset password / email / change
-username), wear-badge popup fix, login screen fix, About update, and
-the offer-selection refactor. When syncing the next batch of upstream
-commits, expect conflicts in `App.tsx` / `bootstrap.ts` / `LoginView.tsx`
-on React 19 imports — always keep the modernized local version.
+**Working base is now `main`** (tracking `duckietm/Nitro-V3`). The earlier
+`feat/react19-modernization` long-running branch was superseded — feature
+work now ships as small focused PRs against `duckietm:Dev`, staged through
+Dev then merged to main. (`feat/react19-modernization` still exists on the
+fork as backup; do not force-push it.)
+
+**Navigator modernization landed** (merged to main 2026-05-28, PRs
+#168/#169/#170): the 492-line `useNavigator` god-hook was split into
+`useNavigatorStore` + `useNavigatorData`/`useNavigatorUiState`/
+`useNavigatorSearch` filters (wired-tools layout), door lifecycle extracted
+to `src/hooks/rooms/widgets/useDoorState.ts`, 9 UI flags moved to a Zustand
+`navigatorUiStore`, search migrated to a query hook, and 5 sub-views wrapped
+in `WidgetErrorBoundary`. **Caveat**: duckietm patched `useNavigatorSearch`
+post-merge (`05d71dd1`) — see the `useNitroQuery` fragility note below.
+
+When syncing upstream, expect conflicts in `App.tsx` / `bootstrap.ts` /
+`LoginView.tsx` on React 19 imports — always keep the modernized version.
 
 Local-dev game assets are served by a small Vite plugin (`sirv` middleware
 mounted on `/nitro-assets` and `/swf`, reading from
@@ -236,6 +244,20 @@ and invalidates the query slot on every push, so server-driven
 refresh paths work the same as the initial request/response (e.g.
 ClubGiftInfoEvent firing again after the user claims a gift).
 
+**⚠️ Fragility — do NOT use `useNitroQuery` for primary visible data.**
+The one-shot listener inside `awaitNitroResponse` (register listener →
+await one matching response → remove itself) is fragile against
+renderer-bundle quirks: for some parsers the event fires but the listener
+never matches, so the promise never resolves and `query.data` stays
+`undefined` forever — the UI shows the server's response arriving in logs
+but renders blank. This bit **ModTools Room/CFH chatlog** (reverted to
+`useMessageEvent + useEffect`) and then **Navigator search** (P2 shipped
+with `useNitroQuery`, duckietm reverted it in `05d71dd1` to the god-hook
+pattern). **Rule: reserve `useNitroQuery` for config / secondary fetches
+where a brief blank is tolerable. For anything that is the primary visible
+content of a panel, use `useMessageEvent + useState/useEffect`** — that's
+what the rest of the codebase does and it's robust.
+
 ### Singleton-filter split for `useBetween`-based hooks
 
 When a hook backs many consumers but most only need either state OR
@@ -339,6 +361,7 @@ into `configurePreviewServer` so `yarn preview` keeps working.
 | Zustand | `NavigatorRoomCreatorView` (`useRoomCreatorStore`), `WiredCreatorToolsView` (`useWiredCreatorToolsUiStore` — every panel-lifecycle-relevant flag, snapshot, selection, highlight, inline editor, picker chain hoisted; what's left in the component as `useState` is genuinely transient: keepSelected, globalClock, roomEnteredAt, selectedMonitorErrorType, selectedMonitorLogDetails) |
 | God-hook split (state + actions + shim) | `doorbell`, `poll`, `furni-chooser`, `user-chooser`, `friend-request`, `chat-input` |
 | God-hook split (`useBetween` singleton + state filter + actions filter + shim) | `wired-tools`, `translation`, `notification`, `friends`, `catalog` (three-way: `useCatalogData` / `useCatalogUiState` / `useCatalogActions` — all 48 consumers migrated, deprecated `useCatalog` shim removed) |
+| Navigator modernization (merged to main 2026-05-28, PRs #168/#169/#170) | 492-line `useNavigator` god-hook split into `useNavigatorStore` (internal `useBetween` closure) + flat filters `useNavigatorData` / `useNavigatorUiState` / `useNavigatorSearch`; door bell/password lifecycle extracted to `src/hooks/rooms/widgets/useDoorState.ts` (dual-subscribes `GetGuestRoomResultEvent` + `GenericErrorEvent` alongside the nav store, each filtering by branch/errorCode); 9 UI flags + `currentTabCode`/`currentFilter` in Zustand `navigatorUiStore` (`src/hooks/navigator/navigatorUiStore.ts`); all 5 Navigator sub-views wrapped in `WidgetErrorBoundary`; old shim deleted. **`useNavigatorSearch` was reverted by duckietm (`05d71dd1`) from `useNitroQuery` to `useMessageEvent + useEffect`** — see the useNitroQuery fragility note. Specs/plans under `docs/superpowers/`. |
 | `WidgetErrorBoundary` | `RoomWidgetsView` umbrella + per-widget wrap on all 13 room widgets and all 20 furniture widgets (so a crash in one widget no longer takes down its siblings) |
 | Vitest | 207/207 cases — pure helpers (incl. 4 new on `getPetPackageNameError`) + 2 Zustand store suites (`navigatorRoomCreatorStore`, `wiredCreatorToolsUiStore` with 45 cases including the picker-chain hoists) + 2 component-/hook-level pilots (WidgetErrorBoundary, useDoorbellState) on top of the renderer-SDK mock at `src/nitro-renderer.mock.ts`, 34 cases on the catalog pure helpers, 4 contract cases on the catalog filters. **Tests are co-located** under `src/`, alongside their subject. |
 | Form Actions | Login / Register / Forgot (LoginView.tsx) |
@@ -412,6 +435,11 @@ See `docs/ARCHITECTURE.md` "Recently fixed" for fix shapes.
   `useCatalogUiState` / `useCatalogActions` in
   `src/hooks/catalog/useCatalog.ts` (all 48 consumers migrated;
   deprecated `useCatalog` shim removed)
+- Navigator hooks: `src/hooks/navigator/` — `useNavigatorStore.ts`
+  (internal closure), `useNavigatorData.ts` / `useNavigatorUiState.ts` /
+  `useNavigatorSearch.ts` (filters), `navigatorUiStore.ts` (Zustand UI
+  flags + `setTab`/`setFilter`). Door lifecycle: `src/hooks/rooms/widgets/useDoorState.ts`.
+  Specs/plans: `docs/superpowers/specs/2026-05-2*-navigator-*.md`
 - Renderer-SDK mock for Vitest: `src/nitro-renderer.mock.ts`
   (aliased over `@nitrots/nitro-renderer` via `vitest.config.mts`).
   Hosts the explicit `NitroLogger` mock, the `mockEventDispatcher` /
diff --git a/custom-themes/README.md b/custom-themes/README.md
new file mode 100644
index 0000000..e9f7436
--- /dev/null
+++ b/custom-themes/README.md
@@ -0,0 +1,40 @@
+# Custom themes (graphics-only)
+
+Ecosistema temi caricati a **runtime** (niente rebuild del client). Un tema =
+una cartella con un manifest + "pezzi" CSS. Ogni pezzo è attivabile/disattivabile
+dall'utente da **Impostazioni → Temi** (checkbox). Se un pezzo è rotto/404 →
+fallback automatico al default (solo quel pezzo).
+
+## Dove vivono
+- **Questa cartella (`custom-themes/`) è solo il TEMPLATE di riferimento**, versionata su git.
+- I temi **veri** stanno sul server in `public/nitro/custom-themes/` (serviti via
+  l'url configurato in ui-config `theme.base.url`, es. `/client/nitro/custom-themes`).
+  NON vanno su git → vedi `.gitignore` (`public/custom-themes/`).
+
+## Struttura
+```
+custom-themes/
+  index.json                 # { "themes": [ { "id", "name", "author?" } ] }
+  <id>/
+    theme.json               # { "name", "pieces": [ { "id", "name", "file" } ] }
+    cards.css  chat.css  ...  # un file per "pezzo"
+    assets/...               # immagini referenziate dai CSS (url assoluti)
+```
+
+## Creare un tema
+1. Copia `neon-viola/` in una nuova cartella `<id>/`.
+2. Modifica `theme.json` (nome + elenco pezzi).
+3. Scrivi i CSS dei pezzi (override con `!important`, caricati dopo il base).
+4. Aggiungi `{ "id": "<id>", "name": "..." }` a `index.json`.
+5. Carica la cartella in `public/nitro/custom-themes/` sul server. **Nessun rebuild.**
+
+## Default hotel-wide (admin)
+In `ui-config.json`:
+- `theme.base.url`  → dove sono serviti i temi
+- `theme.default`   → id del tema attivo di default (vuoto = nessuno)
+- `theme.default.pieces` → array di id pezzi attivi di default
+
+Ogni utente può comunque sovrascrivere da Impostazioni → Temi (salvato in localStorage).
+
+> Nota: i temi ri-skinnano solo la **grafica** (CSS). Non cambiano la struttura
+> dei componenti né il comportamento.
diff --git a/custom-themes/index.example.json b/custom-themes/index.example.json
new file mode 100644
index 0000000..46fd0ea
--- /dev/null
+++ b/custom-themes/index.example.json
@@ -0,0 +1,5 @@
+{
+  "themes": [
+    { "id": "neon-viola", "name": "Neon Viola", "author": "infinityhotel" }
+  ]
+}
diff --git a/custom-themes/neon-viola/cards.css b/custom-themes/neon-viola/cards.css
new file mode 100644
index 0000000..5608fb7
--- /dev/null
+++ b/custom-themes/neon-viola/cards.css
@@ -0,0 +1,24 @@
+/* Tema Neon Viola — pezzo "cards" (finestre / NitroCard).
+   Ricolora header + cornice delle finestre. Caricato DOPO il CSS base, quindi
+   usa !important per vincere. Tocca solo la cornice/header (non lo sfondo del
+   contenuto) per non rovinare la leggibilita' del testo. */
+
+.nitro-card-shell:not(.nitro-wired) {
+    border-color: #7c3aed !important;
+    box-shadow: 0 0 14px rgba(124, 58, 237, .55), 0 8px 22px rgba(0, 0, 0, .4) !important;
+}
+
+.nitro-card-shell:not(.nitro-wired) .nitro-card-header-shell {
+    background: linear-gradient(180deg, #9333ea 0%, #6d28d9 100%) !important;
+    border-color: #a855f7 !important;
+    border-bottom-color: #2a0a4a !important;
+}
+
+.nitro-card-shell:not(.nitro-wired) .nitro-card-title {
+    color: #fff !important;
+    text-shadow: 0 0 6px #c084fc, 0 1px 0 #3b0764 !important;
+}
+
+.nitro-card-shell:not(.nitro-wired) .nitro-card-tabs-shell .nitro-card-tab-item-active {
+    box-shadow: inset 0 -2px 0 #a855f7 !important;
+}
diff --git a/custom-themes/neon-viola/catalog.css b/custom-themes/neon-viola/catalog.css
new file mode 100644
index 0000000..1f8973d
--- /dev/null
+++ b/custom-themes/neon-viola/catalog.css
@@ -0,0 +1,10 @@
+/* Tema Neon Viola — pezzo "catalog" (catalogo Hippiehotel, .nitro-catalog). */
+
+.nitro-catalog .nitro-card-header-shell {
+    background: linear-gradient(180deg, #9333ea 0%, #6d28d9 100%) !important;
+}
+
+.nitro-catalog .group\/rail {
+    background: #1a1030 !important;
+    border-right-color: #7c3aed !important;
+}
diff --git a/custom-themes/neon-viola/chat.css b/custom-themes/neon-viola/chat.css
new file mode 100644
index 0000000..c0f767e
--- /dev/null
+++ b/custom-themes/neon-viola/chat.css
@@ -0,0 +1,12 @@
+/* Tema Neon Viola — pezzo "chat".
+   Accento viola sulla bubble di default (bubble-0) e sull'input chat.
+   (Le bubble custom hanno la loro grafica; qui tocchiamo solo l'accento base.) */
+
+.chat-bubble.bubble-0 {
+    filter: drop-shadow(0 0 5px rgba(168, 85, 247, .8));
+}
+
+.nitro-chat-input-container,
+.chat-input-container {
+    box-shadow: inset 0 0 0 1px #7c3aed !important;
+}
diff --git a/custom-themes/neon-viola/theme.json b/custom-themes/neon-viola/theme.json
new file mode 100644
index 0000000..199fd09
--- /dev/null
+++ b/custom-themes/neon-viola/theme.json
@@ -0,0 +1,10 @@
+{
+  "name": "Neon Viola",
+  "author": "infinityhotel",
+  "pieces": [
+    { "id": "cards",     "name": "Finestre / Card",   "file": "cards.css" },
+    { "id": "chat",      "name": "Chat",              "file": "chat.css" },
+    { "id": "toolbar",   "name": "Toolbar",           "file": "toolbar.css" },
+    { "id": "catalog",   "name": "Catalogo",          "file": "catalog.css" }
+  ]
+}
diff --git a/custom-themes/neon-viola/toolbar.css b/custom-themes/neon-viola/toolbar.css
new file mode 100644
index 0000000..ed74f7f
--- /dev/null
+++ b/custom-themes/neon-viola/toolbar.css
@@ -0,0 +1,9 @@
+/* Tema Neon Viola — pezzo "toolbar".
+   Best-effort: ricolora la barra strumenti in basso. Se i selettori non
+   matchano nella tua build, il pezzo non ha effetto (fallback sicuro). */
+
+.nitro-toolbar,
+[class*="toolbar-container"] {
+    background: linear-gradient(180deg, #2a0a4a 0%, #1a0730 100%) !important;
+    box-shadow: 0 -2px 10px rgba(124, 58, 237, .4) !important;
+}
diff --git a/docs/superpowers/specs/2026-05-31-navigator-base-tab-stacked-labels-design.md b/docs/superpowers/specs/2026-05-31-navigator-base-tab-stacked-labels-design.md
new file mode 100644
index 0000000..fc858bd
--- /dev/null
+++ b/docs/superpowers/specs/2026-05-31-navigator-base-tab-stacked-labels-design.md
@@ -0,0 +1,71 @@
+# Navigator — Room Settings "Base" tab: stacked-label layout
+
+**Date:** 2026-05-31
+**Component:** Nitro-V3 client
+**File:** `src/components/navigator/views/room-settings/NavigatorRoomSettingsBasicTabView.tsx`
+**Type:** Layout-only refactor (no logic / data-flow change)
+
+## Problem
+
+The Base tab uses a horizontal two-column row layout: a fixed-width label on the
+left, the control on the right. In the narrow room-settings panel the label column
+is too tight, so multi-word Italian labels ("Visitatori massimi", "Impostazioni
+scambio") wrap onto two lines and look broken. An earlier fix replaced dead
+Bootstrap `col-3` classes with `w-1/4 shrink-0`, which stopped the crushing but
+still leaves the labels cramped and occasionally wrapping.
+
+The other five room-settings tabs (Access, Rights, VIP/Chat, Mod, Misc) already use
+idiomatic vertical/grouped layouts. Base is the outlier.
+
+## Decision
+
+Adopt the **stacked-label** pattern (chosen from three mockup options — A stacked,
+B sectioned cards, C wider label column). Each field becomes a vertical block: bold
+label on top, full-width control below, validation message underneath. This mirrors
+the sibling **Access** tab's existing `<Column gap={1}>` + `<Text bold>` shape, so
+the two tabs become visually consistent and labels can never wrap.
+
+## Layout
+
+Every field → its own `<Column gap={1}>` block:
+
+```tsx
+<Column gap={ 1 }>
+    <Text bold>{ LocalizeText('navigator.roomname') }</Text>
+    <input className="form-control form-control-sm" value={ roomName } … onBlur={ saveRoomName } />
+    { (roomName.length < ROOM_NAME_MIN_LENGTH) &&
+        <Text bold small variant="danger">{ LocalizeText('navigator.roomsettings.roomnameismandatory') }</Text> }
+</Column>
+```
+
+Field-by-field:
+
+- **Nome stanza** — stacked block, mandatory-name validation preserved.
+- **Descrizione** — stacked block, `<textarea>` full width.
+- **Categoria** — stacked block, `<select>` from `categories`.
+- **Visitatori massimi** — stacked block, `<select>` from `GetMaxVisitorsList`.
+- **Impostazioni scambio** — stacked block, 3-option `<select>`.
+- **Tag** — one "Tag" label, then the two tag inputs side-by-side in a
+  `<Flex gap={1}>`, each `fullWidth`, each keeping its own length/type validation.
+- **allow_walkthrough / allow_underpass** — remain inline `checkbox + label` rows;
+  remove the empty `<Base className="w-1/4 shrink-0" />` spacers that only existed
+  to align with the old label column.
+- **Delete link** — unchanged at the bottom.
+
+## Explicit non-goals
+
+- No change to `handleChange` field names or values.
+- No change to validation thresholds (`ROOM_NAME_MIN_LENGTH=3`,
+  `ROOM_NAME_MAX_LENGTH=60`, `DESC_MAX_LENGTH=255`, `TAGS_MAX_LENGTH=15`).
+- No change to save-on-blur handlers (`saveRoomName`, `saveRoomDescription`,
+  `saveTags`), the `RoomSettingsSaveErrorEvent` subscription, or `deleteRoom`.
+- No change to field order or any localization key.
+- No change to the other five tabs.
+- The `w-1/4 shrink-0` utility classes added in the prior fix are removed (labels
+  are full-width now).
+
+## Risk
+
+Single-file, JSX-only diff. No test covers this view, so no test impact. Manual
+check: open Room Settings → Base, confirm no label wraps, all controls full width,
+validation still appears, save-on-blur still fires.
diff --git a/public/configuration/UITexts_en.json5.example b/public/configuration/UITexts_en.json5.example
index 63fb47c..4b4fcdf 100644
--- a/public/configuration/UITexts_en.json5.example
+++ b/public/configuration/UITexts_en.json5.example
@@ -642,6 +642,9 @@
     'wheel.buy':            'Buy spin',
     'wheel.winners':        'Latest winners',
     'wheel.winners.empty':  'No winners yet',
+    'wheel.win.title':      'You won!',
+    'wheel.win.jackpot':    '★ Jackpot ★',
+    'wheel.win.nothing':    'Better luck next time!',
 
     // ------------------------------------------------------------------------
     // Soundboard
@@ -674,6 +677,8 @@
     'rarevalues.editor.weight':       'Chance',
     'rarevalues.editor.label':        'Label',
     'rarevalues.editor.save':         'Save',
+    'rarevalues.editor.add':          '+ Add prize',
+    'rarevalues.editor.remove':       'Remove prize',
     'rarevalues.editor.cat.item':     'Furni (ID)',
     'rarevalues.editor.cat.spin':     'Extra spins',
     'rarevalues.editor.cat.nothing':  'Nothing',
@@ -700,4 +705,71 @@
     'chatcmd.client.ejectall':    'Eject all furni',
     'chatcmd.client.settings':    'Room settings',
     'chatcmd.client.info':        'Client info',
+
+    // ------------------------------------------------------------------------
+    // Me-menu settings + User account settings window
+    // ------------------------------------------------------------------------
+    'usersettings.tab.general':                         "General",
+    'usersettings.tab.themes':                          "Themes",
+    'memenu.settings.other.place.multiple.objects':     "Place multiple objects",
+    'memenu.settings.other.skip.purchase.confirmation': "Skip purchase confirmation",
+    'memenu.settings.other.enable.chat.window':         "Enable chat window",
+    'memenu.settings.other.catalog.classic.style':      "Catalog: classic style",
+    'usersettings.open.title':                          "User settings",
+    'usersettings.open.subtitle':                       "Password & account",
+    'usersettings.themes.custom':                       "Custom theme",
+    'usersettings.themes.default_option':               "Default (no theme)",
+    'usersettings.themes.active_pieces':                "Active pieces",
+    'usersettings.themes.invalid':                      "Theme invalid or unreachable — using the default.",
+    'usersettings.themes.none':                         "No themes available. Add a folder in custom-themes/ on the server.",
+    'usersettings.title':                               "User Settings",
+    'usersettings.account.label':                       "My account",
+    'usersettings.guest':                               "Guest",
+    'usersettings.subtitle':                            "Manage your account and security",
+    'usersettings.menu.section':                        "Account",
+    'usersettings.menu.password.title':                 "Reset password",
+    'usersettings.menu.password.desc':                  "Change the password used to log in.",
+    'usersettings.menu.email.title':                    "Change email",
+    'usersettings.menu.email.desc':                     "Update the email address on your account.",
+    'usersettings.menu.username.title':                 "Change username",
+    'usersettings.menu.username.desc':                  "Pick a new name. You'll need to log in again.",
+    'usersettings.menu.soon.title':                     "More coming soon",
+    'usersettings.menu.soon.desc':                      "Two-factor authentication and more.",
+    'usersettings.password.hint':                       "Use at least %count% characters. Mix upper & lowercase, numbers and symbols for a stronger password.",
+    'usersettings.email.hint':                          "For security we ask you to confirm your current password before changing the email on your account.",
+    'usersettings.username.hint':                       "Renaming will log you out and you can only rename again after 30 days. Make sure your friends know your new name!",
+    'usersettings.field.current_password':              "Current password",
+    'usersettings.field.new_password':                  "New password",
+    'usersettings.field.retype_password':               "Retype new password",
+    'usersettings.field.new_email':                     "New email address",
+    'usersettings.field.new_username':                  "New username",
+    'usersettings.username.rules':                      "%min%-%max% characters. Letters, numbers, dot, underscore and dash only.",
+    'usersettings.strength.weak':                       "Weak",
+    'usersettings.strength.fair':                       "Fair",
+    'usersettings.strength.good':                       "Good",
+    'usersettings.strength.strong':                     "Strong",
+    'usersettings.aria.show_password':                  "Show password",
+    'usersettings.aria.hide_password':                  "Hide password",
+    'usersettings.btn.cancel':                          "Cancel",
+    'usersettings.btn.saving':                          "Saving…",
+    'usersettings.btn.save_password':                   "Save password",
+    'usersettings.btn.save_email':                      "Save email",
+    'usersettings.btn.renaming':                        "Renaming…",
+    'usersettings.btn.rename':                          "Rename me",
+    'usersettings.error.fields_required':               "All fields are required.",
+    'usersettings.error.password_min':                  "Password must be at least %count% characters.",
+    'usersettings.error.password_long':                 "Password is too long.",
+    'usersettings.error.password_mismatch':             "New passwords do not match.",
+    'usersettings.error.password_same':                 "New password must be different from the current password.",
+    'usersettings.error.not_authenticated':             "You are not authenticated. Please log in again.",
+    'usersettings.error.network':                       "Could not reach the server. Please try again.",
+    'usersettings.error.request_failed':                "Request failed (%status%).",
+    'usersettings.error.email_long':                    "Email address is too long.",
+    'usersettings.error.email_invalid':                 "Please enter a valid email address.",
+    'usersettings.error.username_length':               "Username must be between %min% and %max% characters.",
+    'usersettings.error.username_invalid':              "Username may only contain letters, numbers, dot, underscore and dash.",
+    'usersettings.error.username_same':                 "New username must be different from the current one.",
+    'usersettings.success.password':                    "Password updated successfully.",
+    'usersettings.success.email':                       "Email updated successfully.",
+    'usersettings.success.username':                    "Username updated. Please log in again with your new name.",
 }
diff --git a/public/configuration/UITexts_it.json5.example b/public/configuration/UITexts_it.json5.example
index 2b4c6da..776900d 100644
--- a/public/configuration/UITexts_it.json5.example
+++ b/public/configuration/UITexts_it.json5.example
@@ -642,6 +642,9 @@
     'wheel.buy':            'Acquista giro',
     'wheel.winners':        'Ultimi vincitori',
     'wheel.winners.empty':  'Ancora nessun vincitore',
+    'wheel.win.title':      'Hai vinto!',
+    'wheel.win.jackpot':    '★ Jackpot ★',
+    'wheel.win.nothing':    'Sarà per la prossima!',
 
     // ------------------------------------------------------------------------
     // Soundboard
@@ -674,6 +677,8 @@
     'rarevalues.editor.weight':       'Probabilità',
     'rarevalues.editor.label':        'Etichetta',
     'rarevalues.editor.save':         'Salva',
+    'rarevalues.editor.add':          '+ Aggiungi premio',
+    'rarevalues.editor.remove':       'Rimuovi premio',
     'rarevalues.editor.cat.item':     'Arredo (ID)',
     'rarevalues.editor.cat.spin':     'Giri extra',
     'rarevalues.editor.cat.nothing':  'Niente',
@@ -700,4 +705,71 @@
     'chatcmd.client.ejectall':    'Rimuovi tutti gli arredi',
     'chatcmd.client.settings':    'Impostazioni stanza',
     'chatcmd.client.info':        'Info client',
+
+    // ------------------------------------------------------------------------
+    // Me-menu settings + User account settings window
+    // ------------------------------------------------------------------------
+    'usersettings.tab.general':                         "Generale",
+    'usersettings.tab.themes':                          "Temi",
+    'memenu.settings.other.place.multiple.objects':     "Posiziona più oggetti",
+    'memenu.settings.other.skip.purchase.confirmation': "Salta la conferma d'acquisto",
+    'memenu.settings.other.enable.chat.window':         "Abilita finestra chat",
+    'memenu.settings.other.catalog.classic.style':      "Catalogo: stile classico",
+    'usersettings.open.title':                          "Impostazioni utente",
+    'usersettings.open.subtitle':                       "Password e account",
+    'usersettings.themes.custom':                       "Tema personalizzato",
+    'usersettings.themes.default_option':               "Predefinito (nessun tema)",
+    'usersettings.themes.active_pieces':                "Elementi attivi",
+    'usersettings.themes.invalid':                      "Tema non valido o non raggiungibile — uso il predefinito.",
+    'usersettings.themes.none':                         "Nessun tema disponibile. Aggiungi una cartella in custom-themes/ sul server.",
+    'usersettings.title':                               "Impostazioni utente",
+    'usersettings.account.label':                       "Il mio account",
+    'usersettings.guest':                               "Ospite",
+    'usersettings.subtitle':                            "Gestisci il tuo account e la sicurezza",
+    'usersettings.menu.section':                        "Account",
+    'usersettings.menu.password.title':                 "Reimposta password",
+    'usersettings.menu.password.desc':                  "Cambia la password che usi per accedere.",
+    'usersettings.menu.email.title':                    "Cambia email",
+    'usersettings.menu.email.desc':                     "Aggiorna l'indirizzo email del tuo account.",
+    'usersettings.menu.username.title':                 "Cambia nome utente",
+    'usersettings.menu.username.desc':                  "Scegli un nuovo nome. Dovrai accedere di nuovo.",
+    'usersettings.menu.soon.title':                     "Altro in arrivo",
+    'usersettings.menu.soon.desc':                      "Autenticazione a due fattori e altro.",
+    'usersettings.password.hint':                       "Usa almeno %count% caratteri. Combina maiuscole e minuscole, numeri e simboli per una password più sicura.",
+    'usersettings.email.hint':                          "Per sicurezza ti chiediamo di confermare la password attuale prima di cambiare l'email del tuo account.",
+    'usersettings.username.hint':                       "Cambiando nome verrai disconnesso e potrai rinominarti di nuovo solo dopo 30 giorni. Assicurati che i tuoi amici conoscano il tuo nuovo nome!",
+    'usersettings.field.current_password':              "Password attuale",
+    'usersettings.field.new_password':                  "Nuova password",
+    'usersettings.field.retype_password':               "Ripeti la nuova password",
+    'usersettings.field.new_email':                     "Nuovo indirizzo email",
+    'usersettings.field.new_username':                  "Nuovo nome utente",
+    'usersettings.username.rules':                      "%min%-%max% caratteri. Solo lettere, numeri, punto, trattino basso e trattino.",
+    'usersettings.strength.weak':                       "Debole",
+    'usersettings.strength.fair':                       "Discreta",
+    'usersettings.strength.good':                       "Buona",
+    'usersettings.strength.strong':                     "Forte",
+    'usersettings.aria.show_password':                  "Mostra password",
+    'usersettings.aria.hide_password':                  "Nascondi password",
+    'usersettings.btn.cancel':                          "Annulla",
+    'usersettings.btn.saving':                          "Salvataggio…",
+    'usersettings.btn.save_password':                   "Salva password",
+    'usersettings.btn.save_email':                      "Salva email",
+    'usersettings.btn.renaming':                        "Rinomina…",
+    'usersettings.btn.rename':                          "Rinominami",
+    'usersettings.error.fields_required':               "Tutti i campi sono obbligatori.",
+    'usersettings.error.password_min':                  "La password deve contenere almeno %count% caratteri.",
+    'usersettings.error.password_long':                 "La password è troppo lunga.",
+    'usersettings.error.password_mismatch':             "Le nuove password non corrispondono.",
+    'usersettings.error.password_same':                 "La nuova password deve essere diversa da quella attuale.",
+    'usersettings.error.not_authenticated':             "Non sei autenticato. Effettua di nuovo l'accesso.",
+    'usersettings.error.network':                       "Impossibile raggiungere il server. Riprova.",
+    'usersettings.error.request_failed':                "Richiesta non riuscita (%status%).",
+    'usersettings.error.email_long':                    "L'indirizzo email è troppo lungo.",
+    'usersettings.error.email_invalid':                 "Inserisci un indirizzo email valido.",
+    'usersettings.error.username_length':               "Il nome utente deve contenere tra %min% e %max% caratteri.",
+    'usersettings.error.username_invalid':              "Il nome utente può contenere solo lettere, numeri, punto, trattino basso e trattino.",
+    'usersettings.error.username_same':                 "Il nuovo nome utente deve essere diverso da quello attuale.",
+    'usersettings.success.password':                    "Password aggiornata con successo.",
+    'usersettings.success.email':                       "Email aggiornata con successo.",
+    'usersettings.success.username':                    "Nome utente aggiornato. Accedi di nuovo con il tuo nuovo nome.",
 }
diff --git a/public/configuration/UITexts_nl.json5.example b/public/configuration/UITexts_nl.json5.example
index 8bbedba..d3aa55a 100644
--- a/public/configuration/UITexts_nl.json5.example
+++ b/public/configuration/UITexts_nl.json5.example
@@ -372,14 +372,14 @@
     // ------------------------------------------------------------------------
     // Login
     // ------------------------------------------------------------------------
-    'login.username':                       'Wat is jou Camwijs naam',
+    'login.username':                       'Wat is jou habbo naam',
     'login.forgot_password':                'Wachtwoord vergeten?',
 
     // First-time visitors card
     'nitro.login.firsttime.title':          'Voor het eerst hier?',
-    'nitro.login.firsttime.text':           'Heb je nog geen Camwijs account?',
+    'nitro.login.firsttime.text':           'Heb je nog geen habbo account?',
     'nitro.login.firsttime.link':           'Je kunt er hier een aanmaken',
-    'nitro.login.card.title':               'Aanmelden bij Camwijs',
+    'nitro.login.card.title':               'Aanmelden bij habbo',
 
     // Server status checks
     'nitro.login.server.offline.short':     'De gameserver draait momenteel niet. Probeer het zo meteen opnieuw.',
@@ -388,12 +388,12 @@
     'nitro.login.server.retry':             'Opnieuw proberen',
 
     // Registration flow
-    'nitro.login.register.title':                 'Camwijs-gegevens',
+    'nitro.login.register.title':                 'habbo-gegevens',
     'nitro.login.register.next':                  'Volgende',
     'nitro.login.register.finish':                'Voltooien',
     'nitro.login.register.creating':              'Bezig met aanmaken…',
     'nitro.login.register.intro.credentials':     'Laten we je account aanmaken. Voer je e-mailadres in en kies een wachtwoord — we controleren of dit e-mailadres nog niet in gebruik is.',
-    'nitro.login.register.intro.avatar':          'Nu is het tijd om je eigen Camwijs-personage te maken! Begin met het kiezen van je Camwijs-naam.',
+    'nitro.login.register.intro.avatar':          'Nu is het tijd om je eigen habbo-personage te maken! Begin met het kiezen van je habbo-naam.',
     'nitro.login.register.intro.room':            'Laatste stap — kies een startkamer, of sla dit over en maak later je eigen kamer.',
     'nitro.login.register.confirm.label':         'Bevestig wachtwoord',
     'nitro.login.register.username.placeholder':  'HabboNaam',
@@ -412,8 +412,8 @@
     'nitro.login.forgot.success':       'E-mail verzonden! Als er een account bij dit adres hoort, vind je binnenkort een resetlink in je inbox (controleer je spam als je binnen een minuut niets ziet).',
 
     // Login errors (validation + transport)
-    'nitro.login.error.missing_credentials':  'Voer zowel je Camwijs-naam als wachtwoord in.',
-    'nitro.login.error.invalid_credentials':  'Ongeldige Camwijs-naam of wachtwoord.',
+    'nitro.login.error.missing_credentials':  'Voer zowel je habbo-naam als wachtwoord in.',
+    'nitro.login.error.invalid_credentials':  'Ongeldige habbo-naam of wachtwoord.',
     'nitro.login.error.too_many_attempts':    'Te veel pogingen. Probeer het opnieuw over %seconds%s.',
     'nitro.login.error.turnstile':            'Voltooi de beveiligingscontrole.',
     'nitro.login.error.server_offline':       'De gameserver draait niet. Probeer het later opnieuw.',
@@ -427,9 +427,9 @@
     'nitro.login.error.password_too_short':   'Je wachtwoord moet minimaal 8 tekens lang zijn.',
     'nitro.login.error.password_mismatch':    'Wachtwoorden komen niet overeen.',
     'nitro.login.error.email_taken':          'Dit e-mailadres is al in gebruik.',
-    'nitro.login.error.missing_username':     'Kies een Camwijs-naam.',
-    'nitro.login.error.username_length':      'De Camwijs-naam moet 3–16 tekens bevatten.',
-    'nitro.login.error.username_taken':       'Deze Camwijs-naam is al in gebruik.',
+    'nitro.login.error.missing_username':     'Kies een habbo-naam.',
+    'nitro.login.error.username_length':      'De habbo-naam moet 3–16 tekens bevatten.',
+    'nitro.login.error.username_taken':       'Deze habbo-naam is al in gebruik.',
     'nitro.login.error.missing_email':        'Voer je e-mailadres in.',
 
     // ------------------------------------------------------------------------
@@ -644,6 +644,9 @@
     'wheel.buy':            'Draaibeurt kopen',
     'wheel.winners':        'Laatste winnaars',
     'wheel.winners.empty':  'Nog geen winnaars',
+    'wheel.win.title':      'Gewonnen!',
+    'wheel.win.jackpot':    '★ Jackpot ★',
+    'wheel.win.nothing':    'Volgende keer beter!',
 
     // ------------------------------------------------------------------------
     // Soundboard
@@ -676,6 +679,8 @@
     'rarevalues.editor.weight':       'Kans',
     'rarevalues.editor.label':        'Label',
     'rarevalues.editor.save':         'Opslaan',
+    'rarevalues.editor.add':          '+ Prijs toevoegen',
+    'rarevalues.editor.remove':       'Prijs verwijderen',
     'rarevalues.editor.cat.item':     'Meubel (ID)',
     'rarevalues.editor.cat.spin':     'Extra draaien',
     'rarevalues.editor.cat.nothing':  'Niets',
@@ -702,4 +707,71 @@
     'chatcmd.client.ejectall':    'Verwijder alle meubels',
     'chatcmd.client.settings':    'Kamerinstellingen',
     'chatcmd.client.info':        'Client info',
+
+    // ------------------------------------------------------------------------
+    // Me-menu settings + User account settings window
+    // ------------------------------------------------------------------------
+    'usersettings.tab.general':                         "Algemeen",
+    'usersettings.tab.themes':                          "Thema's",
+    'memenu.settings.other.place.multiple.objects':     "Meerdere objecten plaatsen",
+    'memenu.settings.other.skip.purchase.confirmation': "Aankoopbevestiging overslaan",
+    'memenu.settings.other.enable.chat.window':         "Chatvenster inschakelen",
+    'memenu.settings.other.catalog.classic.style':      "Catalogus: klassieke stijl",
+    'usersettings.open.title':                          "Gebruikersinstellingen",
+    'usersettings.open.subtitle':                       "Wachtwoord & account",
+    'usersettings.themes.custom':                       "Aangepast thema",
+    'usersettings.themes.default_option':               "Standaard (geen thema)",
+    'usersettings.themes.active_pieces':                "Actieve onderdelen",
+    'usersettings.themes.invalid':                      "Thema ongeldig of onbereikbaar — standaard wordt gebruikt.",
+    'usersettings.themes.none':                         "Geen thema's beschikbaar. Voeg een map toe in custom-themes/ op de server.",
+    'usersettings.title':                               "Gebruikersinstellingen",
+    'usersettings.account.label':                       "Mijn account",
+    'usersettings.guest':                               "Gast",
+    'usersettings.subtitle':                            "Beheer je account en beveiliging",
+    'usersettings.menu.section':                        "Account",
+    'usersettings.menu.password.title':                 "Wachtwoord wijzigen",
+    'usersettings.menu.password.desc':                  "Wijzig het wachtwoord waarmee je inlogt.",
+    'usersettings.menu.email.title':                    "E-mail wijzigen",
+    'usersettings.menu.email.desc':                     "Werk het e-mailadres van je account bij.",
+    'usersettings.menu.username.title':                 "Gebruikersnaam wijzigen",
+    'usersettings.menu.username.desc':                  "Kies een nieuwe naam. Je moet daarna opnieuw inloggen.",
+    'usersettings.menu.soon.title':                     "Meer komt binnenkort",
+    'usersettings.menu.soon.desc':                      "Tweestapsverificatie en meer.",
+    'usersettings.password.hint':                       "Gebruik minimaal %count% tekens. Combineer hoofd- en kleine letters, cijfers en symbolen voor een sterker wachtwoord.",
+    'usersettings.email.hint':                          "Voor de veiligheid vragen we je je huidige wachtwoord te bevestigen voordat je het e-mailadres van je account wijzigt.",
+    'usersettings.username.hint':                       "Door je naam te wijzigen word je uitgelogd en je kunt pas na 30 dagen opnieuw wijzigen. Zorg dat je vrienden je nieuwe naam kennen!",
+    'usersettings.field.current_password':              "Huidig wachtwoord",
+    'usersettings.field.new_password':                  "Nieuw wachtwoord",
+    'usersettings.field.retype_password':               "Herhaal nieuw wachtwoord",
+    'usersettings.field.new_email':                     "Nieuw e-mailadres",
+    'usersettings.field.new_username':                  "Nieuwe gebruikersnaam",
+    'usersettings.username.rules':                      "%min%-%max% tekens. Alleen letters, cijfers, punt, underscore en streepje.",
+    'usersettings.strength.weak':                       "Zwak",
+    'usersettings.strength.fair':                       "Redelijk",
+    'usersettings.strength.good':                       "Goed",
+    'usersettings.strength.strong':                     "Sterk",
+    'usersettings.aria.show_password':                  "Wachtwoord tonen",
+    'usersettings.aria.hide_password':                  "Wachtwoord verbergen",
+    'usersettings.btn.cancel':                          "Annuleren",
+    'usersettings.btn.saving':                          "Opslaan…",
+    'usersettings.btn.save_password':                   "Wachtwoord opslaan",
+    'usersettings.btn.save_email':                      "E-mail opslaan",
+    'usersettings.btn.renaming':                        "Bezig met hernoemen…",
+    'usersettings.btn.rename':                          "Hernoem mij",
+    'usersettings.error.fields_required':               "Alle velden zijn verplicht.",
+    'usersettings.error.password_min':                  "Het wachtwoord moet minimaal %count% tekens bevatten.",
+    'usersettings.error.password_long':                 "Het wachtwoord is te lang.",
+    'usersettings.error.password_mismatch':             "De nieuwe wachtwoorden komen niet overeen.",
+    'usersettings.error.password_same':                 "Het nieuwe wachtwoord moet anders zijn dan het huidige wachtwoord.",
+    'usersettings.error.not_authenticated':             "Je bent niet ingelogd. Log opnieuw in.",
+    'usersettings.error.network':                       "Kan de server niet bereiken. Probeer het opnieuw.",
+    'usersettings.error.request_failed':                "Verzoek mislukt (%status%).",
+    'usersettings.error.email_long':                    "Het e-mailadres is te lang.",
+    'usersettings.error.email_invalid':                 "Voer een geldig e-mailadres in.",
+    'usersettings.error.username_length':               "De gebruikersnaam moet tussen %min% en %max% tekens bevatten.",
+    'usersettings.error.username_invalid':              "De gebruikersnaam mag alleen letters, cijfers, punt, underscore en streepje bevatten.",
+    'usersettings.error.username_same':                 "De nieuwe gebruikersnaam moet anders zijn dan de huidige.",
+    'usersettings.success.password':                    "Wachtwoord succesvol bijgewerkt.",
+    'usersettings.success.email':                       "E-mail succesvol bijgewerkt.",
+    'usersettings.success.username':                    "Gebruikersnaam bijgewerkt. Log opnieuw in met je nieuwe naam.",
 }
diff --git a/public/configuration/renderer-config.example b/public/configuration/renderer-config.example
index 8438c97..28356ff 100644
--- a/public/configuration/renderer-config.example
+++ b/public/configuration/renderer-config.example
@@ -32,7 +32,6 @@
     "badge.asset.url": "${image.library.url}album1584/%badgename%.gif",
 	"radio.url": "${gamedata.url}/radio-stations.json5?t=%timestamp%",
 	"soundboard.url": "${gamedata.url}/soundboard-sounds.json5?t=%timestamp%",
-	"radio_ui": false,
     "furni.rotation.bounce.steps": 20,
 	"furni.rotation.bounce.height": 0.0625,
 	"enable.avatar.arrow": false,
diff --git a/public/configuration/ui-config.example b/public/configuration/ui-config.example
index 796ac12..65eff4c 100644
--- a/public/configuration/ui-config.example
+++ b/public/configuration/ui-config.example
@@ -24,6 +24,7 @@
     "wired.action.kick.from.room.max.length": 100,
     "wired.action.mute.user.max.length": 100,
     "game.center.enabled": false,
+    "radio_ui.enabled": false,
     "guides.enabled": true,
 	"housekeeping.enabled": true,
     "toolbar.hide.quests": true,
diff --git a/src/App.tsx b/src/App.tsx
index 4b799ef..babffe1 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,6 +7,7 @@ import { LoginView } from './components/login/LoginView';
 import { MainView } from './components/MainView';
 import { ReconnectView } from './components/reconnect/ReconnectView';
 import { useMessageEvent, useNitroEvent } from './hooks';
+import { ensureChatCommandListener } from './hooks/rooms/widgets/useChatCommandSelector';
 
 NitroVersion.UI_VERSION = GetUIVersion();
 
@@ -562,7 +563,9 @@ export const App: FC<{}> = props =>
                         bumpProgress(85, taskLabel('loading.task.rooms', 'Loading rooms...'));
                         await GetRoomEngine().init();
                         bumpProgress(92, taskLabel('loading.task.engine', 'Loading graphics engine...'));
+                        ensureChatCommandListener();
                         await GetCommunication().init();
+                        ensureChatCommandListener();
                         bumpProgress(98, taskLabel('generic.reconnecting', 'Connecting to server...'));
                     })();
                 }
diff --git a/src/api/index.ts b/src/api/index.ts
index 424bb4f..ae86f5d 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -28,6 +28,7 @@ export * from './room';
 export * from './room/events';
 export * from './room/widgets';
 export * from './soundboard';
+export * from './theme';
 export * from './ui-settings';
 export * from './user';
 export * from './utils';
diff --git a/src/api/room/events/RoomWidgetUpdateChatInputContentEvent.ts b/src/api/room/events/RoomWidgetUpdateChatInputContentEvent.ts
index 9352372..aea7193 100644
--- a/src/api/room/events/RoomWidgetUpdateChatInputContentEvent.ts
+++ b/src/api/room/events/RoomWidgetUpdateChatInputContentEvent.ts
@@ -5,6 +5,7 @@ export class RoomWidgetUpdateChatInputContentEvent extends RoomWidgetUpdateEvent
     public static CHAT_INPUT_CONTENT: string = 'RWUCICE_CHAT_INPUT_CONTENT';
     public static WHISPER: string = 'whisper';
     public static SHOUT: string = 'shout';
+    public static TEXT: string = 'text';
 
     private _chatMode: string = '';
     private _userName: string = '';
diff --git a/src/api/theme/ThemeManager.ts b/src/api/theme/ThemeManager.ts
new file mode 100644
index 0000000..cbd9e80
--- /dev/null
+++ b/src/api/theme/ThemeManager.ts
@@ -0,0 +1,122 @@
+import { NitroLogger } from '@nitrots/nitro-renderer';
+import { GetConfigurationValue } from '../nitro';
+
+// ---------------------------------------------------------------------------
+//  Custom theme ecosystem (graphics-only, runtime-loaded).
+//
+//  A "theme" is a folder on the server (NOT bundled in the build) made of:
+//    <base>/index.json          -> { "themes": [ { id, name, author? } ] }
+//    <base>/<id>/theme.json      -> { name, pieces: [ { id, name, file } ] }
+//    <base>/<id>/<file>.css      -> one CSS "piece" (cards, chat, catalog, ...)
+//
+//  Each enabled piece is injected as a <link> in <head>. If a piece fails to
+//  load (404 / network) the link removes itself, so the UI falls back to the
+//  default look for that piece (per-piece fallback, never breaks the client).
+//
+//  The base url is configurable via ui-config ("theme.base.url") so themes can
+//  live anywhere (and never need a client rebuild to add/change them).
+// ---------------------------------------------------------------------------
+
+export interface ThemeInfo
+{
+    id: string;
+    name: string;
+    author?: string;
+}
+
+export interface ThemePiece
+{
+    id: string;
+    name: string;
+    file: string;
+}
+
+export interface ThemeManifest
+{
+    name: string;
+    pieces: ThemePiece[];
+}
+
+const LINK_ATTR = 'data-nitro-theme';
+
+export const GetThemeBaseUrl = (): string =>
+    GetConfigurationValue<string>('theme.base.url', 'custom-themes').replace(/\/+$/, '');
+
+export const FetchThemeIndex = async (): Promise<ThemeInfo[]> =>
+{
+    try
+    {
+        const response = await fetch(`${ GetThemeBaseUrl() }/index.json`, { cache: 'no-cache' });
+
+        if(!response.ok) return [];
+
+        const data = await response.json();
+
+        return Array.isArray(data?.themes) ? data.themes.filter((t: any) => t && t.id) : [];
+    }
+    catch(error)
+    {
+        NitroLogger.warn('[ThemeManager] index.json non caricabile, nessun tema custom', error);
+
+        return [];
+    }
+};
+
+export const FetchThemeManifest = async (themeId: string): Promise<ThemeManifest> =>
+{
+    if(!themeId) return null;
+
+    try
+    {
+        const response = await fetch(`${ GetThemeBaseUrl() }/${ themeId }/theme.json`, { cache: 'no-cache' });
+
+        if(!response.ok) return null;
+
+        const data = await response.json();
+
+        if(!data || !Array.isArray(data.pieces)) return null;
+
+        return {
+            name: data.name ?? themeId,
+            pieces: data.pieces.filter((p: any) => p && p.id && p.file)
+        };
+    }
+    catch(error)
+    {
+        NitroLogger.warn(`[ThemeManager] manifest non valido per tema "${ themeId }" -> fallback default`, error);
+
+        return null;
+    }
+};
+
+export const ClearTheme = (): void =>
+{
+    document.head.querySelectorAll(`link[${ LINK_ATTR }]`).forEach(node => node.remove());
+};
+
+export const ApplyThemePieces = (themeId: string, pieces: ThemePiece[]): void =>
+{
+    ClearTheme();
+
+    if(!themeId || !pieces || !pieces.length) return;
+
+    const base = GetThemeBaseUrl();
+
+    for(const piece of pieces)
+    {
+        const link = document.createElement('link');
+
+        link.rel = 'stylesheet';
+        link.setAttribute(LINK_ATTR, piece.id);
+        link.href = `${ base }/${ themeId }/${ piece.file }`;
+
+        // Per-piece fallback: a broken piece removes itself, leaving the default.
+        link.onerror = () =>
+        {
+            NitroLogger.warn(`[ThemeManager] pezzo tema rotto "${ themeId }/${ piece.file }" -> fallback default`);
+            link.remove();
+        };
+
+        document.head.appendChild(link);
+    }
+};
diff --git a/src/api/theme/index.ts b/src/api/theme/index.ts
new file mode 100644
index 0000000..ee14d93
--- /dev/null
+++ b/src/api/theme/index.ts
@@ -0,0 +1 @@
+export * from './ThemeManager';
diff --git a/src/api/utils/LocalStorageKeys.ts b/src/api/utils/LocalStorageKeys.ts
index 75ecfe8..c1ee611 100644
--- a/src/api/utils/LocalStorageKeys.ts
+++ b/src/api/utils/LocalStorageKeys.ts
@@ -5,4 +5,6 @@ export class LocalStorageKeys
     public static CHAT_WINDOW_ENABLED: string = 'chatWindowEnabled';
     public static CHAT_TRANSLATION_SETTINGS: string = 'chatTranslationSettings';
     public static CATALOG_CLASSIC_STYLE: string = 'catalogClassicStyle';
+    public static THEME_ACTIVE: string = 'nitroThemeActive';
+    public static THEME_PIECES: string = 'nitroThemePieces';
 }
diff --git a/src/assets/images/chat/chatbubbles/bubble_253.png b/src/assets/images/chat/chatbubbles/bubble_253.png
new file mode 100644
index 0000000..b727a29
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_253.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_253_pointer.png b/src/assets/images/chat/chatbubbles/bubble_253_pointer.png
new file mode 100644
index 0000000..45955f6
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_253_pointer.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_254.png b/src/assets/images/chat/chatbubbles/bubble_254.png
new file mode 100644
index 0000000..b4a100d
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_254.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_254_pointer.png b/src/assets/images/chat/chatbubbles/bubble_254_pointer.png
new file mode 100644
index 0000000..ebd039d
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_254_pointer.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_255.png b/src/assets/images/chat/chatbubbles/bubble_255.png
new file mode 100644
index 0000000..f0f9fb6
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_255.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_255_pointer.png b/src/assets/images/chat/chatbubbles/bubble_255_pointer.png
new file mode 100644
index 0000000..147f587
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_255_pointer.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_256.png b/src/assets/images/chat/chatbubbles/bubble_256.png
new file mode 100644
index 0000000..f6b3845
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_256.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_256_pointer.png b/src/assets/images/chat/chatbubbles/bubble_256_pointer.png
new file mode 100644
index 0000000..0a95873
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_256_pointer.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_257.png b/src/assets/images/chat/chatbubbles/bubble_257.png
new file mode 100644
index 0000000..9923f0e
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_257.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_257_pointer.png b/src/assets/images/chat/chatbubbles/bubble_257_pointer.png
new file mode 100644
index 0000000..7afbe0b
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_257_pointer.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_258.png b/src/assets/images/chat/chatbubbles/bubble_258.png
new file mode 100644
index 0000000..755e5e1
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_258.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_258_pointer.png b/src/assets/images/chat/chatbubbles/bubble_258_pointer.png
new file mode 100644
index 0000000..130f8f2
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_258_pointer.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_259.png b/src/assets/images/chat/chatbubbles/bubble_259.png
new file mode 100644
index 0000000..e603611
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_259.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_259_pointer.png b/src/assets/images/chat/chatbubbles/bubble_259_pointer.png
new file mode 100644
index 0000000..b370fe8
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_259_pointer.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_260.png b/src/assets/images/chat/chatbubbles/bubble_260.png
new file mode 100644
index 0000000..706583d
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_260.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_260_pointer.png b/src/assets/images/chat/chatbubbles/bubble_260_pointer.png
new file mode 100644
index 0000000..7ed9701
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_260_pointer.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_261.png b/src/assets/images/chat/chatbubbles/bubble_261.png
new file mode 100644
index 0000000..e6881b4
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_261.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_261_pointer.png b/src/assets/images/chat/chatbubbles/bubble_261_pointer.png
new file mode 100644
index 0000000..11d9615
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_261_pointer.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_262.png b/src/assets/images/chat/chatbubbles/bubble_262.png
new file mode 100644
index 0000000..42c68e6
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_262.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_262_pointer.png b/src/assets/images/chat/chatbubbles/bubble_262_pointer.png
new file mode 100644
index 0000000..ad0803d
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_262_pointer.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_263.png b/src/assets/images/chat/chatbubbles/bubble_263.png
new file mode 100644
index 0000000..eea056f
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_263.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_263_pointer.png b/src/assets/images/chat/chatbubbles/bubble_263_pointer.png
new file mode 100644
index 0000000..16225fe
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_263_pointer.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_264.png b/src/assets/images/chat/chatbubbles/bubble_264.png
new file mode 100644
index 0000000..da3f3c2
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_264.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_264_pointer.png b/src/assets/images/chat/chatbubbles/bubble_264_pointer.png
new file mode 100644
index 0000000..b8c24f9
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_264_pointer.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_265.png b/src/assets/images/chat/chatbubbles/bubble_265.png
new file mode 100644
index 0000000..7a709b0
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_265.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_265_pointer.png b/src/assets/images/chat/chatbubbles/bubble_265_pointer.png
new file mode 100644
index 0000000..8e90999
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_265_pointer.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_266.png b/src/assets/images/chat/chatbubbles/bubble_266.png
new file mode 100644
index 0000000..e1c5dfa
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_266.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_266_pointer.png b/src/assets/images/chat/chatbubbles/bubble_266_pointer.png
new file mode 100644
index 0000000..d6e9c11
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_266_pointer.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_267.png b/src/assets/images/chat/chatbubbles/bubble_267.png
new file mode 100644
index 0000000..805d7a8
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_267.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_267_pointer.png b/src/assets/images/chat/chatbubbles/bubble_267_pointer.png
new file mode 100644
index 0000000..5b1bb69
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_267_pointer.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_268.png b/src/assets/images/chat/chatbubbles/bubble_268.png
new file mode 100644
index 0000000..9975412
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_268.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_268_pointer.png b/src/assets/images/chat/chatbubbles/bubble_268_pointer.png
new file mode 100644
index 0000000..5a4dac2
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_268_pointer.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_269.png b/src/assets/images/chat/chatbubbles/bubble_269.png
new file mode 100644
index 0000000..eda2ab0
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_269.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_269_pointer.png b/src/assets/images/chat/chatbubbles/bubble_269_pointer.png
new file mode 100644
index 0000000..61aaa10
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_269_pointer.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_270.png b/src/assets/images/chat/chatbubbles/bubble_270.png
new file mode 100644
index 0000000..cebc39c
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_270.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_270_pointer.png b/src/assets/images/chat/chatbubbles/bubble_270_pointer.png
new file mode 100644
index 0000000..ff9130e
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_270_pointer.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_271.png b/src/assets/images/chat/chatbubbles/bubble_271.png
new file mode 100644
index 0000000..96166c7
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_271.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_271_pointer.png b/src/assets/images/chat/chatbubbles/bubble_271_pointer.png
new file mode 100644
index 0000000..cd8c398
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_271_pointer.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_272.png b/src/assets/images/chat/chatbubbles/bubble_272.png
new file mode 100644
index 0000000..80033eb
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_272.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_272_pointer.png b/src/assets/images/chat/chatbubbles/bubble_272_pointer.png
new file mode 100644
index 0000000..e38a4d7
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_272_pointer.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_273.png b/src/assets/images/chat/chatbubbles/bubble_273.png
new file mode 100644
index 0000000..3b21851
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_273.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_273_pointer.png b/src/assets/images/chat/chatbubbles/bubble_273_pointer.png
new file mode 100644
index 0000000..84b8587
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_273_pointer.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_274.png b/src/assets/images/chat/chatbubbles/bubble_274.png
new file mode 100644
index 0000000..4e511a6
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_274.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_274_pointer.png b/src/assets/images/chat/chatbubbles/bubble_274_pointer.png
new file mode 100644
index 0000000..be1db00
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_274_pointer.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_275.png b/src/assets/images/chat/chatbubbles/bubble_275.png
new file mode 100644
index 0000000..cd8777a
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_275.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_275_pointer.png b/src/assets/images/chat/chatbubbles/bubble_275_pointer.png
new file mode 100644
index 0000000..8a61359
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_275_pointer.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_276.png b/src/assets/images/chat/chatbubbles/bubble_276.png
new file mode 100644
index 0000000..b4de1a7
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_276.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_276_pointer.png b/src/assets/images/chat/chatbubbles/bubble_276_pointer.png
new file mode 100644
index 0000000..6683f6e
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_276_pointer.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_277.png b/src/assets/images/chat/chatbubbles/bubble_277.png
new file mode 100644
index 0000000..df7317e
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_277.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_277_pointer.png b/src/assets/images/chat/chatbubbles/bubble_277_pointer.png
new file mode 100644
index 0000000..7a3b463
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_277_pointer.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_278.png b/src/assets/images/chat/chatbubbles/bubble_278.png
new file mode 100644
index 0000000..c275815
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_278.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_278_pointer.png b/src/assets/images/chat/chatbubbles/bubble_278_pointer.png
new file mode 100644
index 0000000..a50c119
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_278_pointer.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_279.png b/src/assets/images/chat/chatbubbles/bubble_279.png
new file mode 100644
index 0000000..d1bb2e5
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_279.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_279_pointer.png b/src/assets/images/chat/chatbubbles/bubble_279_pointer.png
new file mode 100644
index 0000000..1d78808
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_279_pointer.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_280.png b/src/assets/images/chat/chatbubbles/bubble_280.png
new file mode 100644
index 0000000..9132a2f
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_280.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_280_pointer.png b/src/assets/images/chat/chatbubbles/bubble_280_pointer.png
new file mode 100644
index 0000000..ef49fe2
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_280_pointer.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_281.png b/src/assets/images/chat/chatbubbles/bubble_281.png
new file mode 100644
index 0000000..1545615
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_281.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_281_pointer.png b/src/assets/images/chat/chatbubbles/bubble_281_pointer.png
new file mode 100644
index 0000000..0859bf6
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_281_pointer.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_282.png b/src/assets/images/chat/chatbubbles/bubble_282.png
new file mode 100644
index 0000000..132af17
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_282.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_282_pointer.png b/src/assets/images/chat/chatbubbles/bubble_282_pointer.png
new file mode 100644
index 0000000..c1ce6f8
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_282_pointer.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_283.png b/src/assets/images/chat/chatbubbles/bubble_283.png
new file mode 100644
index 0000000..5d887d9
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_283.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_283_pointer.png b/src/assets/images/chat/chatbubbles/bubble_283_pointer.png
new file mode 100644
index 0000000..bfc3fdb
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_283_pointer.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_284.png b/src/assets/images/chat/chatbubbles/bubble_284.png
new file mode 100644
index 0000000..e359c05
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_284.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_284_pointer.png b/src/assets/images/chat/chatbubbles/bubble_284_pointer.png
new file mode 100644
index 0000000..dae09b2
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_284_pointer.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_285.png b/src/assets/images/chat/chatbubbles/bubble_285.png
new file mode 100644
index 0000000..9d3f2e5
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_285.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_285_pointer.png b/src/assets/images/chat/chatbubbles/bubble_285_pointer.png
new file mode 100644
index 0000000..11d9615
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_285_pointer.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_286.png b/src/assets/images/chat/chatbubbles/bubble_286.png
new file mode 100644
index 0000000..ee5c706
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_286.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_286_pointer.png b/src/assets/images/chat/chatbubbles/bubble_286_pointer.png
new file mode 100644
index 0000000..cacb90a
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_286_pointer.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_287.png b/src/assets/images/chat/chatbubbles/bubble_287.png
new file mode 100644
index 0000000..597afec
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_287.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_287_pointer.png b/src/assets/images/chat/chatbubbles/bubble_287_pointer.png
new file mode 100644
index 0000000..be1db00
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_287_pointer.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_288.png b/src/assets/images/chat/chatbubbles/bubble_288.png
new file mode 100644
index 0000000..62f7236
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_288.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_288_pointer.png b/src/assets/images/chat/chatbubbles/bubble_288_pointer.png
new file mode 100644
index 0000000..565a77f
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_288_pointer.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_289.png b/src/assets/images/chat/chatbubbles/bubble_289.png
new file mode 100644
index 0000000..f3bf1ff
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_289.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_289_pointer.png b/src/assets/images/chat/chatbubbles/bubble_289_pointer.png
new file mode 100644
index 0000000..bfc3fdb
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_289_pointer.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_290.png b/src/assets/images/chat/chatbubbles/bubble_290.png
new file mode 100644
index 0000000..7eaaa0c
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_290.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_290_pointer.png b/src/assets/images/chat/chatbubbles/bubble_290_pointer.png
new file mode 100644
index 0000000..5077cd2
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_290_pointer.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_291.png b/src/assets/images/chat/chatbubbles/bubble_291.png
new file mode 100644
index 0000000..6a7e2a3
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_291.png differ
diff --git a/src/assets/images/chat/chatbubbles/bubble_291_pointer.png b/src/assets/images/chat/chatbubbles/bubble_291_pointer.png
new file mode 100644
index 0000000..5283392
Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_291_pointer.png differ
diff --git a/src/components/MainView.tsx b/src/components/MainView.tsx
index b68f3be..543aeec 100644
--- a/src/components/MainView.tsx
+++ b/src/components/MainView.tsx
@@ -28,6 +28,7 @@ import { HousekeepingView } from './housekeeping/HousekeepingView';
 import { RareValuesView } from './rare-values/RareValuesView';
 import { FortuneWheelView } from './fortune-wheel/FortuneWheelView';
 import { SoundboardView } from './soundboard/SoundboardView';
+import { ThemeApplier } from './theme/ThemeApplier';
 import { RadioView } from './radio/RadioView';
 import { InventoryView } from './inventory/InventoryView';
 import { ModToolsView } from './mod-tools/ModToolsView';
@@ -134,6 +135,7 @@ export const MainView: FC<{}> = props =>
 
     return (
         <>
+            <ThemeApplier />
             <div className="hidden" data-localization-version={ localizationVersion } />
             <AnimatePresence>
                 { landingViewVisible &&
diff --git a/src/components/fortune-wheel/FortuneWheelSettingsView.tsx b/src/components/fortune-wheel/FortuneWheelSettingsView.tsx
index 628eeb0..a759463 100644
--- a/src/components/fortune-wheel/FortuneWheelSettingsView.tsx
+++ b/src/components/fortune-wheel/FortuneWheelSettingsView.tsx
@@ -46,7 +46,9 @@ const prizeToNum = (prize: IWheelAdminPrize): number =>
 
 const rowToEdit = (row: EditRow): IWheelAdminPrizeEdit =>
 {
-    const base = { id: row.id, weight: row.weight, label: row.label };
+    // Locally-added rows carry a negative temp id; the server treats id <= 0
+    // as "insert a new prize", so collapse them to 0 on the wire.
+    const base = { id: row.id > 0 ? row.id : 0, weight: row.weight, label: row.label };
 
     switch(row.category)
     {
@@ -88,6 +90,19 @@ export const FortuneWheelSettingsView: FC<FortuneWheelSettingsViewProps> = ({ on
     const updateRow = (id: number, patch: Partial<EditRow>) =>
         setEditRows(prev => prev.map(row => (row.id === id) ? { ...row, ...patch } : row));
 
+    const removeRow = (id: number) =>
+        setEditRows(prev => prev.filter(row => row.id !== id));
+
+    const addRow = () =>
+        setEditRows(prev =>
+        {
+            // New rows get a decreasing negative temp id so React keys stay
+            // stable and updateRow/removeRow keep matching before the save
+            // round-trips real ids back from the server.
+            const tempId = Math.min(0, ...prev.map(row => row.id)) - 1;
+            return [ ...prev, { id: tempId, category: 'item', num: 0, weight: 1, label: '' } ];
+        });
+
     return (
         <NitroCard className="w-[480px] h-[520px]" uniqueKey="fortune-wheel-settings">
             <NitroCard.Header
@@ -100,6 +115,7 @@ export const FortuneWheelSettingsView: FC<FortuneWheelSettingsViewProps> = ({ on
                         <span className="w-16">{ LocalizeText('rarevalues.editor.value') }</span>
                         <span className="w-12">{ LocalizeText('rarevalues.editor.weight') }</span>
                         <span className="grow">{ LocalizeText('rarevalues.editor.label') }</span>
+                        <span className="w-6" />
                     </Flex>
                     <Column gap={ 1 } overflow="auto" className="grow">
                         { editRows.map(row => (
@@ -128,11 +144,23 @@ export const FortuneWheelSettingsView: FC<FortuneWheelSettingsViewProps> = ({ on
                                     value={ row.label }
                                     onChange={ event => updateRow(row.id, { label: event.target.value }) }
                                     className="min-w-0 grow rounded border border-black/20 bg-white px-1 py-0.5 text-sm text-[#1f2d34]" />
+                                <button
+                                    type="button"
+                                    title={ LocalizeText('rarevalues.editor.remove') }
+                                    onClick={ () => removeRow(row.id) }
+                                    className="flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded bg-[#d9534f] font-bold leading-none text-white hover:bg-[#c44440]">×</button>
                             </Flex>
                         )) }
                         { !editRows.length &&
                             <Text small className="text-black/50">{ LocalizeText('wheel.settings.empty') }</Text> }
                     </Column>
+                    <button
+                        type="button"
+                        disabled={ editRows.length >= 64 }
+                        onClick={ addRow }
+                        className="cursor-pointer rounded border border-dashed border-[#3a7bb5] px-4 py-1.5 text-sm font-bold text-[#3a7bb5] hover:bg-[#3a7bb5]/10 disabled:cursor-default disabled:opacity-40">
+                        { LocalizeText('rarevalues.editor.add') }
+                    </button>
                     <button
                         type="button"
                         disabled={ !editRows.length }
diff --git a/src/components/fortune-wheel/FortuneWheelView.tsx b/src/components/fortune-wheel/FortuneWheelView.tsx
index 37aa94b..7b4d508 100644
--- a/src/components/fortune-wheel/FortuneWheelView.tsx
+++ b/src/components/fortune-wheel/FortuneWheelView.tsx
@@ -1,44 +1,32 @@
-import { AddLinkEventTracker, GetRoomEngine, ILinkEventTracker, IWheelPrize, RemoveLinkEventTracker } from '@nitrots/nitro-renderer';
-import { FC, useEffect, useMemo, useRef, useState } from 'react';
+import { AddLinkEventTracker, ILinkEventTracker, IWheelPrize, RemoveLinkEventTracker } from '@nitrots/nitro-renderer';
+import { FC, TransitionEvent, useEffect, useMemo, useRef, useState } from 'react';
 import { LocalizeText } from '../../api';
-import { Column, Flex, LayoutAvatarImageView, LayoutBadgeImageView, LayoutCurrencyIcon, LayoutImage, Text } from '../../common';
+import { Column, Flex, LayoutAvatarImageView, LayoutCurrencyIcon, Text } from '../../common';
 import { useFortuneWheel, useHasPermission } from '../../hooks';
 import { NitroCard } from '../../layout';
 import { FortuneWheelSettingsView } from './FortuneWheelSettingsView';
+import { WheelWinReveal } from './WheelWinReveal';
+import { renderPrizeIcon } from './wheelPrizeIcon';
 
-// Stock UI palette (white / light-blue / grey / black).
-const SLICE_COLORS = [ '#eef2f5', '#c3dcec' ];
-const RIM = '#4c606c';
+// Stock UI palette (white / light-blue / grey / black). Exposed as CSS custom
+// properties so a runtime theme can recolor the wheel without changing defaults
+// (the fallback values keep the stock look when no theme overrides them).
+const SLICE_COLORS = [ 'var(--wheel-slice-1, #eef2f5)', 'var(--wheel-slice-2, #c3dcec)' ];
+const RIM = 'var(--wheel-rim, #4c606c)';
+const DIVIDER = 'var(--wheel-divider, rgba(76,96,108,0.3))';
+const HUB = 'var(--wheel-hub, #eef2f5)';
 const WHEEL_SIZE = 420;
 const ICON_RADIUS = 150;
 const FULL_TURNS = 5;
 
-const renderPrizeIcon = (prize: IWheelPrize) =>
-{
-    switch(prize.type)
-    {
-        case 'item':
-            return <LayoutImage imageUrl={ GetRoomEngine().getFurnitureFloorIconUrl(prize.spriteId) } className="h-9 w-9 bg-contain bg-center bg-no-repeat" />;
-        case 'badge':
-            return <LayoutBadgeImageView badgeCode={ prize.badgeCode } />;
-        case 'credits':
-            return (
-                <Column alignItems="center" gap={ 0 }>
-                    <LayoutCurrencyIcon type={ -1 } />
-                    <span className="text-[10px] font-bold text-[#2a3a42]">{ prize.amount }</span>
-                </Column>);
-        case 'points':
-            return (
-                <Column alignItems="center" gap={ 0 }>
-                    <LayoutCurrencyIcon type={ prize.pointsType } />
-                    <span className="text-[10px] font-bold text-[#2a3a42]">{ prize.amount }</span>
-                </Column>);
-        case 'spin':
-            return <span className="text-xs font-bold text-[#2a3a42]">+{ prize.amount }</span>;
-        default:
-            return <span className="text-xs font-bold text-[#2a3a42]/60">—</span>;
-    }
-};
+// Spin motion (wind-back → fast spin past target → settle back).
+const WINDBACK_DEG = 14;
+const OVERSHOOT_DEG = 16;
+const WINDBACK_MS = 250;
+const SPIN_MS = 4000;
+const SETTLE_MS = 550;
+
+type SpinPhase = 'idle' | 'windback' | 'spin' | 'settle';
 
 export const FortuneWheelView: FC<{}> = () =>
 {
@@ -46,11 +34,28 @@ export const FortuneWheelView: FC<{}> = () =>
     const [ isSettingsOpen, setIsSettingsOpen ] = useState(false);
     const { freeSpins, extraSpins, spinCost, spinCostType, prizes, recentWins, pendingPrizeId, isSpinning, open, spin, buySpin, finishSpin } = useFortuneWheel();
     const canManage = useHasPermission('acc_wheeladmin');
+
     const [ rotation, setRotation ] = useState(0);
+    const [ phase, setPhase ] = useState<SpinPhase>('idle');
+    const [ revealPrize, setRevealPrize ] = useState<IWheelPrize | null>(null);
+    const [ wheelScale, setWheelScale ] = useState(1);
+
     const rotationRef = useRef(0);
+    const targetRef = useRef(0);
+    const phaseRef = useRef<SpinPhase>('idle');
+    const wonPrizeRef = useRef<IWheelPrize | null>(null);
     const prizesRef = useRef<IWheelPrize[]>([]);
+    const wheelHostRef = useRef<HTMLDivElement>(null);
     prizesRef.current = prizes;
 
+    const reducedMotion = useMemo(() => (typeof window !== 'undefined') && !!window.matchMedia?.('(prefers-reduced-motion: reduce)').matches, []);
+
+    const setSpinPhase = (next: SpinPhase) =>
+    {
+        phaseRef.current = next;
+        setPhase(next);
+    };
+
     useEffect(() =>
     {
         const linkTracker: ILinkEventTracker = {
@@ -79,6 +84,24 @@ export const FortuneWheelView: FC<{}> = () =>
         if(isVisible) open();
     }, [ isVisible, open ]);
 
+    // Keep the wheel fitting its container on narrow viewports without
+    // rewriting the px-based slice/icon math: measure the available width
+    // and scale the whole wheel down to fit.
+    useEffect(() =>
+    {
+        const host = wheelHostRef.current;
+        if(!host || (typeof ResizeObserver === 'undefined')) return;
+
+        const observer = new ResizeObserver(entries =>
+        {
+            const width = entries[0]?.contentRect.width ?? WHEEL_SIZE;
+            setWheelScale(Math.min(1, width / WHEEL_SIZE));
+        });
+        observer.observe(host);
+
+        return () => observer.disconnect();
+    }, [ isVisible ]);
+
     // Drive the spin animation when the server reports the winning slice.
     useEffect(() =>
     {
@@ -93,14 +116,69 @@ export const FortuneWheelView: FC<{}> = () =>
             return;
         }
 
+        wonPrizeRef.current = list[idx];
+
         const sliceAngle = 360 / list.length;
         const centerAngle = ((idx + 0.5) * sliceAngle);
         const current = rotationRef.current;
         const target = (current - (current % 360)) + (FULL_TURNS * 360) + (360 - centerAngle);
+        targetRef.current = target;
 
-        rotationRef.current = target;
-        setRotation(target);
-    }, [ pendingPrizeId, finishSpin ]);
+        if(reducedMotion)
+        {
+            // Single straightforward move to the target, no flourish.
+            setSpinPhase('spin');
+            rotationRef.current = target;
+            setRotation(target);
+            return;
+        }
+
+        // Phase 1: tiny anticipation wind-back before the spin.
+        setSpinPhase('windback');
+        const back = current - WINDBACK_DEG;
+        rotationRef.current = back;
+        setRotation(back);
+    }, [ pendingPrizeId, finishSpin, reducedMotion ]);
+
+    const finishReveal = () =>
+    {
+        setSpinPhase('idle');
+        setRevealPrize(wonPrizeRef.current);
+        finishSpin();
+    };
+
+    const handleTransitionEnd = (event: TransitionEvent<HTMLDivElement>) =>
+    {
+        // Only react to the wheel's own transform transition finishing. Child
+        // elements (prize icons, badges) can emit their own bubbling
+        // transitionend events; without this guard they'd advance the spin
+        // phase machine early and reveal the prize before the wheel stops.
+        if((event.target !== event.currentTarget) || (event.propertyName !== 'transform')) return;
+
+        switch(phaseRef.current)
+        {
+            case 'windback':
+                // Phase 2: spin fast, overshooting the target slightly.
+                setSpinPhase('spin');
+                rotationRef.current = targetRef.current + OVERSHOOT_DEG;
+                setRotation(rotationRef.current);
+                return;
+            case 'spin':
+                if(reducedMotion)
+                {
+                    finishReveal();
+                    return;
+                }
+                // Phase 3: settle back from the overshoot onto the target.
+                setSpinPhase('settle');
+                rotationRef.current = targetRef.current;
+                setRotation(rotationRef.current);
+                return;
+            case 'settle':
+                finishReveal();
+                return;
+        }
+    };
 
     const sliceAngle = prizes.length ? (360 / prizes.length) : 0;
 
@@ -112,88 +190,107 @@ export const FortuneWheelView: FC<{}> = () =>
         return `conic-gradient(${ stops })`;
     }, [ prizes, sliceAngle ]);
 
+    const wheelTransition = useMemo(() =>
+    {
+        switch(phase)
+        {
+            case 'windback': return `transform ${ WINDBACK_MS }ms ease-in`;
+            case 'spin': return `transform ${ SPIN_MS }ms cubic-bezier(0.12,0.78,0.2,1)`;
+            case 'settle': return `transform ${ SETTLE_MS }ms ease-out`;
+            default: return 'none';
+        }
+    }, [ phase ]);
+
     if(!isVisible) return null;
 
     const canSpin = ((freeSpins + extraSpins) > 0) && !isSpinning && (prizes.length > 0);
 
     return (
-        <NitroCard className="w-[800px] max-w-[96vw]" uniqueKey="fortune-wheel">
+        <NitroCard className="wheel-card w-[780px] max-w-[96vw]" uniqueKey="fortune-wheel">
             <NitroCard.Header headerText={ LocalizeText('wheel.title') } onCloseClick={ () => setIsVisible(false) } />
             <NitroCard.Content>
-                <Flex gap={ 3 }>
-                    <Column alignItems="center" gap={ 2 } className="shrink-0">
-                        <div className="relative" style={ { width: WHEEL_SIZE, height: WHEEL_SIZE } }>
-                            <div
-                                className="absolute left-1/2 -top-2 z-20 -translate-x-1/2 drop-shadow-[0_2px_2px_rgba(0,0,0,0.25)]"
-                                style={ { width: 0, height: 0, borderLeft: '14px solid transparent', borderRight: '14px solid transparent', borderTop: `28px solid ${ RIM }` } } />
-                            <div
-                                className="absolute inset-0 rounded-full shadow-[0_0_0_4px_rgba(0,0,0,0.12),inset_0_0_18px_rgba(0,0,0,0.1)]"
-                                style={ { background, border: `8px solid ${ RIM }`, transform: `rotate(${ rotation }deg)`, transition: isSpinning ? 'transform 4.5s cubic-bezier(0.15,0.85,0.25,1)' : 'none' } }
-                                onTransitionEnd={ () => { if(isSpinning) finishSpin(); } }>
-                                { prizes.map((_, i) => (
+                <div className="relative">
+                    <Flex gap={ 3 } className="flex-col sm:flex-row">
+                        <Column alignItems="center" gap={ 2 } className="w-full shrink-0 sm:w-[420px]">
+                            <div ref={ wheelHostRef } className="relative w-full" style={ { height: WHEEL_SIZE * wheelScale } }>
+                                <div
+                                    className="absolute left-1/2 top-0"
+                                    style={ { width: WHEEL_SIZE, height: WHEEL_SIZE, transform: `translateX(-50%) scale(${ wheelScale })`, transformOrigin: 'top center' } }>
                                     <div
-                                        key={ `divider-${ i }` }
-                                        className="absolute bottom-1/2 left-1/2 origin-bottom"
-                                        style={ { width: '2px', height: `${ WHEEL_SIZE / 2 }px`, transform: `translateX(-1px) rotate(${ i * sliceAngle }deg)`, background: 'rgba(76,96,108,0.3)' } } />
-                                )) }
-                                { prizes.map((prize, i) =>
-                                {
-                                    const centerAngle = ((i + 0.5) * sliceAngle);
-                                    return (
-                                        <div
-                                            key={ prize.id }
-                                            className="absolute left-1/2 top-1/2"
-                                            style={ { transform: `rotate(${ centerAngle }deg) translateY(-${ ICON_RADIUS }px) rotate(-${ centerAngle }deg)` } }>
-                                            <div className="-translate-x-1/2 -translate-y-1/2">
-                                                { renderPrizeIcon(prize) }
-                                            </div>
-                                        </div>);
-                                }) }
-                            </div>
-                            <div className="absolute left-1/2 top-1/2 z-10 h-14 w-14 -translate-x-1/2 -translate-y-1/2 rounded-full bg-[#eef2f5] shadow-[0_0_8px_rgba(0,0,0,0.25)]" style={ { border: `4px solid ${ RIM }` } } />
-                        </div>
-                        <Text bold className="text-[#2f6f95]">{ LocalizeText('wheel.free.today', [ 'count' ], [ freeSpins.toString() ]) }</Text>
-                        <Text small className="text-[#33424c]">{ LocalizeText('wheel.extra', [ 'count' ], [ extraSpins.toString() ]) }</Text>
-                        <Flex gap={ 2 } alignItems="center">
-                            <button
-                                disabled={ !canSpin }
-                                onClick={ () => spin() }
-                                className="cursor-pointer rounded bg-[#3a7bb5] px-4 py-2 font-bold text-white hover:bg-[#336ea3] disabled:cursor-default disabled:opacity-40">
-                                { LocalizeText('wheel.spin') }
-                            </button>
-                            <button
-                                onClick={ () => buySpin() }
-                                className="flex cursor-pointer items-center gap-1 rounded bg-[#6b7884] px-3 py-2 text-white hover:bg-[#5e6a75]">
-                                { LocalizeText('wheel.buy') } { spinCost }
-                                <LayoutCurrencyIcon type={ spinCostType } />
-                            </button>
-                            { canManage &&
-                                <button
-                                    onClick={ () => setIsSettingsOpen(true) }
-                                    className="cursor-pointer rounded bg-[#8a6b3a] px-3 py-2 font-bold text-white hover:bg-[#735730]">
-                                    { LocalizeText('wheel.settings') }
-                                </button> }
-                        </Flex>
-                    </Column>
-                    <Column gap={ 2 } className="min-w-[300px] grow rounded-lg border border-black/10 bg-black/5 p-3">
-                        <Text bold className="text-base text-[#33424c]">{ LocalizeText('wheel.winners') }</Text>
-                        <Column gap={ 1 } overflow="auto" className="h-[440px]">
-                            { recentWins.map((win, i) => (
-                                <Flex key={ i } alignItems="center" gap={ 2 } className="rounded border-b border-black/10 py-1.5 hover:bg-black/5">
-                                    <div className="relative h-11 w-11 shrink-0 overflow-hidden rounded bg-black/5">
-                                        <LayoutAvatarImageView figure={ win.look } headOnly direction={ 2 } style={ { backgroundSize: 'auto', backgroundPosition: '-22px -32px' } } />
+                                        className="absolute left-1/2 -top-2 z-20 -translate-x-1/2 drop-shadow-[0_2px_2px_rgba(0,0,0,0.25)]"
+                                        style={ { width: 0, height: 0, borderLeft: '14px solid transparent', borderRight: '14px solid transparent', borderTop: `28px solid ${ RIM }` } } />
+                                    <div
+                                        className="absolute inset-0 rounded-full shadow-[0_0_0_4px_rgba(0,0,0,0.12),inset_0_0_18px_rgba(0,0,0,0.1)]"
+                                        style={ { background, border: `8px solid ${ RIM }`, transform: `rotate(${ rotation }deg)`, transition: wheelTransition } }
+                                        onTransitionEnd={ handleTransitionEnd }>
+                                        { prizes.map((_, i) => (
+                                            <div
+                                                key={ `divider-${ i }` }
+                                                className="absolute bottom-1/2 left-1/2 origin-bottom"
+                                                style={ { width: '2px', height: `${ WHEEL_SIZE / 2 }px`, transform: `translateX(-1px) rotate(${ i * sliceAngle }deg)`, background: DIVIDER } } />
+                                        )) }
+                                        { prizes.map((prize, i) =>
+                                        {
+                                            const centerAngle = ((i + 0.5) * sliceAngle);
+                                            return (
+                                                <div
+                                                    key={ prize.id }
+                                                    className="absolute left-1/2 top-1/2"
+                                                    style={ { transform: `rotate(${ centerAngle }deg) translateY(-${ ICON_RADIUS }px) rotate(-${ centerAngle }deg)` } }>
+                                                    <div className="wheel-slice-icon -translate-x-1/2 -translate-y-1/2">
+                                                        { renderPrizeIcon(prize) }
+                                                    </div>
+                                                </div>);
+                                        }) }
                                     </div>
-                                    <Column gap={ 0 } className="min-w-0">
-                                        <Text bold truncate className="text-[#1f2d34]">{ win.username }</Text>
-                                        <Text small truncate className="text-[#2f6f95]">{ win.prizeLabel }</Text>
-                                    </Column>
-                                </Flex>
-                            )) }
-                            { !recentWins.length &&
-                                <Text small className="text-black/50">{ LocalizeText('wheel.winners.empty') }</Text> }
+                                    <div className="absolute left-1/2 top-1/2 z-10 h-14 w-14 -translate-x-1/2 -translate-y-1/2 rounded-full shadow-[0_0_8px_rgba(0,0,0,0.25)]" style={ { border: `4px solid ${ RIM }`, background: HUB } } />
+                                </div>
+                            </div>
+                            <Text bold className="text-[#2f6f95]">{ LocalizeText('wheel.free.today', [ 'count' ], [ freeSpins.toString() ]) }</Text>
+                            <Text small className="text-[#33424c]">{ LocalizeText('wheel.extra', [ 'count' ], [ extraSpins.toString() ]) }</Text>
+                            <Flex gap={ 2 } alignItems="center" className="flex-wrap justify-center">
+                                <button
+                                    disabled={ !canSpin }
+                                    onClick={ () => spin() }
+                                    className="cursor-pointer rounded bg-[#3a7bb5] px-4 py-2 font-bold text-white hover:bg-[#336ea3] disabled:cursor-default disabled:opacity-40">
+                                    { LocalizeText('wheel.spin') }
+                                </button>
+                                <button
+                                    onClick={ () => buySpin() }
+                                    className="flex cursor-pointer items-center gap-1 rounded bg-[#6b7884] px-3 py-2 text-white hover:bg-[#5e6a75]">
+                                    { LocalizeText('wheel.buy') } { spinCost }
+                                    <LayoutCurrencyIcon type={ spinCostType } />
+                                </button>
+                                { canManage &&
+                                    <button
+                                        onClick={ () => setIsSettingsOpen(true) }
+                                        className="cursor-pointer rounded bg-[#8a6b3a] px-3 py-2 font-bold text-white hover:bg-[#735730]">
+                                        { LocalizeText('wheel.settings') }
+                                    </button> }
+                            </Flex>
                         </Column>
-                    </Column>
-                </Flex>
+                        <Column gap={ 2 } className="min-w-[300px] grow rounded-lg border border-black/10 bg-black/5 p-3">
+                            <Text bold className="text-base text-[#33424c]">{ LocalizeText('wheel.winners') }</Text>
+                            <Column gap={ 1 } overflow="auto" className="h-[440px] max-h-[60vh]">
+                                { recentWins.map((win, i) => (
+                                    <Flex key={ i } alignItems="center" gap={ 2 } className="rounded border-b border-black/10 py-1.5 hover:bg-black/5">
+                                        <div className="relative h-11 w-11 shrink-0 overflow-hidden rounded bg-black/5">
+                                            <LayoutAvatarImageView figure={ win.look } headOnly direction={ 2 } style={ { backgroundSize: 'auto', backgroundPosition: '-22px -32px' } } />
+                                        </div>
+                                        <Column gap={ 0 } className="min-w-0">
+                                            <Text bold truncate className="text-[#1f2d34]">{ win.username }</Text>
+                                            <Text small truncate className="text-[#2f6f95]">{ win.prizeLabel }</Text>
+                                        </Column>
+                                    </Flex>
+                                )) }
+                                { !recentWins.length &&
+                                    <Text small className="text-black/50">{ LocalizeText('wheel.winners.empty') }</Text> }
+                            </Column>
+                        </Column>
+                    </Flex>
+                    { revealPrize &&
+                        <WheelWinReveal prize={ revealPrize } onDismiss={ () => setRevealPrize(null) } /> }
+                </div>
             </NitroCard.Content>
             { canManage && isSettingsOpen &&
                 <FortuneWheelSettingsView onClose={ () => setIsSettingsOpen(false) } /> }
diff --git a/src/components/fortune-wheel/WheelWinReveal.tsx b/src/components/fortune-wheel/WheelWinReveal.tsx
new file mode 100644
index 0000000..09e1fbd
--- /dev/null
+++ b/src/components/fortune-wheel/WheelWinReveal.tsx
@@ -0,0 +1,101 @@
+import { IWheelPrize } from '@nitrots/nitro-renderer';
+import { FC, useEffect } from 'react';
+import { LocalizeText } from '../../api';
+import { renderPrizeIcon } from './wheelPrizeIcon';
+import { getPrizeTier } from './wheelPrizeTier';
+
+interface WheelWinRevealProps
+{
+    prize: IWheelPrize;
+    onDismiss: () => void;
+}
+
+const CONFETTI_COLORS = [ '#ffd34d', '#4fc3f7', '#ff7b7b', '#7bff9e', '#c08bff', '#ffa94d' ];
+const CONFETTI_COUNT = 40;
+
+// Precomputed once at module load (not during render) so the React Compiler
+// purity rules stay happy and there's no per-mount cost. A fixed spread of
+// 40 pieces with staggered delays reads as a lively burst either way.
+const CONFETTI = Array.from({ length: CONFETTI_COUNT }, (_, i) => ({
+    left: Math.random() * 100,
+    delay: Math.random() * 0.5,
+    duration: 1.8 + (Math.random() * 1.4),
+    drift: (Math.random() - 0.5) * 160,
+    color: CONFETTI_COLORS[i % CONFETTI_COLORS.length],
+    width: 6 + Math.round(Math.random() * 4)
+}));
+
+// How long each tier lingers before auto-dismissing (ms).
+const AUTO_DISMISS = { none: 2000, common: 2400, rare: 4000 } as const;
+
+export const WheelWinReveal: FC<WheelWinRevealProps> = ({ prize, onDismiss }) =>
+{
+    const tier = getPrizeTier(prize);
+
+    useEffect(() =>
+    {
+        const timer = window.setTimeout(onDismiss, AUTO_DISMISS[tier]);
+        return () => window.clearTimeout(timer);
+    }, [ tier, onDismiss ]);
+
+    // The "nothing" slice gets a quiet, non-celebratory message.
+    if(tier === 'none')
+    {
+        return (
+            <div className="absolute inset-0 z-40 flex items-center justify-center bg-black/35" onClick={ onDismiss }>
+                <div className="rounded-xl bg-white px-6 py-4 text-center shadow-2xl" style={ { animation: 'wheelPop .45s cubic-bezier(.18,.89,.32,1.28)' } }>
+                    <div className="text-3xl">🍀</div>
+                    <div className="mt-1 font-bold text-[#33424c]">{ LocalizeText('wheel.win.nothing') }</div>
+                </div>
+            </div>
+        );
+    }
+
+    const isRare = tier === 'rare';
+
+    return (
+        <div
+            className={ `absolute inset-0 z-40 flex flex-col items-center justify-center gap-2 ${ isRare ? 'bg-black/70' : 'bg-black/40' }` }
+            onClick={ onDismiss }>
+            <style>{ `
+                @keyframes wheelPop { from { transform: scale(.35); opacity: 0; } to { transform: scale(1); opacity: 1; } }
+                @keyframes wheelConfettiFall {
+                    0%   { transform: translate(0, -10%) rotate(0deg); opacity: 1; }
+                    100% { transform: translate(var(--drift), 320px) rotate(720deg); opacity: 0; }
+                }
+                @keyframes wheelGlow {
+                    0%,100% { box-shadow: 0 0 18px 4px rgba(255,211,77,.55); }
+                    50%     { box-shadow: 0 0 30px 10px rgba(255,211,77,.9); }
+                }
+            ` }</style>
+
+            { isRare && CONFETTI.map((piece, i) => (
+                <span
+                    key={ i }
+                    className="pointer-events-none absolute top-0"
+                    style={ {
+                        left: `${ piece.left }%`,
+                        width: `${ piece.width }px`,
+                        height: `${ piece.width + 4 }px`,
+                        background: piece.color,
+                        borderRadius: '2px',
+                        ['--drift' as any]: `${ piece.drift }px`,
+                        animation: `wheelConfettiFall ${ piece.duration }s ${ piece.delay }s linear forwards`
+                    } } />
+            )) }
+
+            { isRare &&
+                <div className="text-sm font-black uppercase tracking-[0.2em] text-[#ffd34d] drop-shadow">{ LocalizeText('wheel.win.jackpot') }</div> }
+
+            <div
+                className="flex h-32 w-32 items-center justify-center rounded-full bg-white shadow-2xl"
+                style={ { animation: `wheelPop .5s cubic-bezier(.18,.89,.32,1.28)${ isRare ? ', wheelGlow 1.4s ease-in-out .5s infinite' : '' }` } }>
+                { renderPrizeIcon(prize, true) }
+            </div>
+
+            <div className="mt-1 text-lg font-black text-white drop-shadow">{ LocalizeText('wheel.win.title') }</div>
+            { !!prize.label &&
+                <div className="rounded-full bg-white/95 px-4 py-1 text-sm font-bold text-[#20313a] shadow">{ prize.label }</div> }
+        </div>
+    );
+};
diff --git a/src/components/fortune-wheel/wheelPrizeIcon.tsx b/src/components/fortune-wheel/wheelPrizeIcon.tsx
new file mode 100644
index 0000000..db71111
--- /dev/null
+++ b/src/components/fortune-wheel/wheelPrizeIcon.tsx
@@ -0,0 +1,36 @@
+import { GetRoomEngine, IWheelPrize } from '@nitrots/nitro-renderer';
+import { ReactNode } from 'react';
+import { Column, LayoutBadgeImageView, LayoutCurrencyIcon, LayoutImage } from '../../common';
+
+// Shared prize-icon renderer used both on the wheel slices (small) and in the
+// win-reveal overlay (large). Keeping it in one place means the two stay
+// visually consistent when prize types change.
+export const renderPrizeIcon = (prize: IWheelPrize, large = false): ReactNode =>
+{
+    const imageClass = large ? 'h-20 w-20' : 'h-9 w-9';
+    const amountClass = large ? 'text-xl font-bold text-[#2a3a42]' : 'text-[10px] font-bold text-[#2a3a42]';
+
+    switch(prize.type)
+    {
+        case 'item':
+            return <LayoutImage imageUrl={ GetRoomEngine().getFurnitureFloorIconUrl(prize.spriteId) } className={ `${ imageClass } bg-contain bg-center bg-no-repeat` } />;
+        case 'badge':
+            return <div className={ large ? 'scale-[1.8]' : '' }><LayoutBadgeImageView badgeCode={ prize.badgeCode } /></div>;
+        case 'credits':
+            return (
+                <Column alignItems="center" gap={ 0 }>
+                    <div className={ large ? 'scale-150' : '' }><LayoutCurrencyIcon type={ -1 } /></div>
+                    <span className={ amountClass }>{ prize.amount }</span>
+                </Column>);
+        case 'points':
+            return (
+                <Column alignItems="center" gap={ 0 }>
+                    <div className={ large ? 'scale-150' : '' }><LayoutCurrencyIcon type={ prize.pointsType } /></div>
+                    <span className={ amountClass }>{ prize.amount }</span>
+                </Column>);
+        case 'spin':
+            return <span className={ large ? 'text-2xl font-bold text-[#2a3a42]' : 'text-xs font-bold text-[#2a3a42]' }>+{ prize.amount }</span>;
+        default:
+            return <span className={ large ? 'text-2xl font-bold text-[#2a3a42]/60' : 'text-xs font-bold text-[#2a3a42]/60' }>—</span>;
+    }
+};
diff --git a/src/components/fortune-wheel/wheelPrizeTier.test.ts b/src/components/fortune-wheel/wheelPrizeTier.test.ts
new file mode 100644
index 0000000..cf5f329
--- /dev/null
+++ b/src/components/fortune-wheel/wheelPrizeTier.test.ts
@@ -0,0 +1,55 @@
+import { describe, expect, it } from 'vitest';
+import { CREDITS_RARE_THRESHOLD, getPrizeTier, POINTS_RARE_THRESHOLD } from './wheelPrizeTier';
+
+const makePrize = (overrides: Partial<{ type: string; amount: number }>) => ({
+    id: 1,
+    type: 'credits',
+    spriteId: 0,
+    badgeCode: '',
+    amount: 0,
+    pointsType: -1,
+    label: '',
+    ...overrides
+}) as any;
+
+describe('getPrizeTier', () =>
+{
+    it('returns "common" for a null prize (defensive default)', () =>
+    {
+        expect(getPrizeTier(null)).toBe('common');
+    });
+
+    it('classifies the "nothing" slice as "none"', () =>
+    {
+        expect(getPrizeTier(makePrize({ type: 'nothing' }))).toBe('none');
+    });
+
+    it('classifies items and badges as "rare"', () =>
+    {
+        expect(getPrizeTier(makePrize({ type: 'item' }))).toBe('rare');
+        expect(getPrizeTier(makePrize({ type: 'badge' }))).toBe('rare');
+    });
+
+    it('classifies a free spin as "common"', () =>
+    {
+        expect(getPrizeTier(makePrize({ type: 'spin', amount: 1 }))).toBe('common');
+    });
+
+    it('tiers credits by the threshold', () =>
+    {
+        expect(getPrizeTier(makePrize({ type: 'credits', amount: CREDITS_RARE_THRESHOLD - 1 }))).toBe('common');
+        expect(getPrizeTier(makePrize({ type: 'credits', amount: CREDITS_RARE_THRESHOLD }))).toBe('rare');
+        expect(getPrizeTier(makePrize({ type: 'credits', amount: CREDITS_RARE_THRESHOLD + 1000 }))).toBe('rare');
+    });
+
+    it('tiers points by the threshold', () =>
+    {
+        expect(getPrizeTier(makePrize({ type: 'points', amount: POINTS_RARE_THRESHOLD - 1 }))).toBe('common');
+        expect(getPrizeTier(makePrize({ type: 'points', amount: POINTS_RARE_THRESHOLD }))).toBe('rare');
+    });
+
+    it('falls back to "common" for unknown prize types', () =>
+    {
+        expect(getPrizeTier(makePrize({ type: 'mystery-future-type' }))).toBe('common');
+    });
+});
diff --git a/src/components/fortune-wheel/wheelPrizeTier.ts b/src/components/fortune-wheel/wheelPrizeTier.ts
new file mode 100644
index 0000000..83a7d2f
--- /dev/null
+++ b/src/components/fortune-wheel/wheelPrizeTier.ts
@@ -0,0 +1,41 @@
+import { IWheelPrize } from '@nitrots/nitro-renderer';
+
+// Group A is client-only: the player-facing prize payload (WheelDataEvent /
+// IWheelPrize) carries no `weight`, so we can't read the server's real spin
+// odds here. We approximate rarity from the data the client already has —
+// the prize `type` and `amount`. A future cross-component change (Group B)
+// can pass the true weight through and replace this heuristic.
+//
+//   none   → the "lose" slice. Quiet message, no celebration.
+//   common → low-value wins (a free spin, a small credit/point payout).
+//            Light reveal: prize card pops in, no confetti.
+//   rare   → items, badges, or large currency payouts. Full celebration
+//            overlay with confetti.
+export type WheelPrizeTier = 'none' | 'common' | 'rare';
+
+// Currency payouts at or above these amounts are treated as "rare". These are
+// deliberately conservative defaults; tune per hotel if needed.
+export const CREDITS_RARE_THRESHOLD = 500;
+export const POINTS_RARE_THRESHOLD = 100;
+
+export const getPrizeTier = (prize: IWheelPrize | null): WheelPrizeTier =>
+{
+    if(!prize) return 'common';
+
+    switch(prize.type)
+    {
+        case 'nothing':
+            return 'none';
+        case 'item':
+        case 'badge':
+            return 'rare';
+        case 'spin':
+            return 'common';
+        case 'credits':
+            return prize.amount >= CREDITS_RARE_THRESHOLD ? 'rare' : 'common';
+        case 'points':
+            return prize.amount >= POINTS_RARE_THRESHOLD ? 'rare' : 'common';
+        default:
+            return 'common';
+    }
+};
diff --git a/src/components/groups/views/GroupBadgeCreatorView.tsx b/src/components/groups/views/GroupBadgeCreatorView.tsx
index 55c2352..9ca2bb1 100644
--- a/src/components/groups/views/GroupBadgeCreatorView.tsx
+++ b/src/components/groups/views/GroupBadgeCreatorView.tsx
@@ -45,7 +45,7 @@ export const GroupBadgeCreatorView: FC<GroupBadgeCreatorViewProps> = props =>
 
     const getAvailableSymbols = () =>
     {
-        const symbols = groupCustomize.badgeSymbols || [];
+        const symbols = groupCustomize?.badgeSymbols || [];
 
         if(selectedIndex < 0) return symbols;
 
@@ -69,7 +69,7 @@ export const GroupBadgeCreatorView: FC<GroupBadgeCreatorViewProps> = props =>
         }
     };
 
-    if(!badgeParts || !badgeParts.length) return null;
+    if(!groupCustomize || !badgeParts || !badgeParts.length) return null;
 
     return (
         <>
diff --git a/src/components/groups/views/GroupCreatorView.tsx b/src/components/groups/views/GroupCreatorView.tsx
index f78b561..46a4b4f 100644
--- a/src/components/groups/views/GroupCreatorView.tsx
+++ b/src/components/groups/views/GroupCreatorView.tsx
@@ -1,4 +1,4 @@
-import { GroupBuyComposer, GroupBuyDataComposer, GroupBuyDataEvent } from '@nitrots/nitro-renderer';
+import { GroupBadgePartsComposer, GroupBuyComposer, GroupBuyDataComposer, GroupBuyDataEvent } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { HasHabboClub, IGroupData, LocalizeText, SendMessageComposer } from '../../../api';
 import { Button, Column, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../common';
@@ -119,6 +119,7 @@ export const GroupCreatorView: FC<GroupCreatorViewProps> = props =>
         });
 
         SendMessageComposer(new GroupBuyDataComposer());
+        SendMessageComposer(new GroupBadgePartsComposer());
     }, [ setGroupData ]);
 
     if(!groupData) return null;
@@ -131,7 +132,7 @@ export const GroupCreatorView: FC<GroupCreatorViewProps> = props =>
                     { TABS.map((tab, index) =>
                     {
                         return (
-                            <Flex key={ index } center className={ `relative -ml-[6px] bg-[url('@/assets/images/groups/creator_tabs.png')] bg-no-repeat ${ ((tab === 1) ? 'w-[84px] h-[24px] bg-position-[0px_0px]' : (tab === 4) ? 'w-[133px] h-[28px] bg-position-[0px_-104px]' : 'w-[83px] h-[24px] bg-position-[0px_-52px]') } ${ (currentTab === tab) ? 'active' : '' }` }>
+                            <Flex key={ index } center className={ `relative -ml-[6px] bg-[url('@/assets/images/groups/creator_tabs.png')] bg-no-repeat transition-[transform,filter,opacity] duration-150 ${ ((tab === 1) ? 'w-[84px] h-[24px] bg-position-[0px_0px]' : (tab === 4) ? 'w-[133px] h-[28px] bg-position-[0px_-104px]' : 'w-[83px] h-[24px] bg-position-[0px_-52px]') } ${ (currentTab === tab) ? 'active z-[1] scale-[1.05] brightness-110 saturate-150 drop-shadow-[0_1px_3px_rgba(0,0,0,0.4)]' : 'opacity-60 saturate-50' }` }>
                                 <Text variant="white">{ LocalizeText(`group.create.steplabel.${ tab }`) }</Text>
                             </Flex>
                         );
diff --git a/src/components/groups/views/tabs/GroupTabBadgeView.tsx b/src/components/groups/views/tabs/GroupTabBadgeView.tsx
index 33c3cd3..ad18577 100644
--- a/src/components/groups/views/tabs/GroupTabBadgeView.tsx
+++ b/src/components/groups/views/tabs/GroupTabBadgeView.tsx
@@ -68,7 +68,9 @@ export const GroupTabBadgeView: FC<GroupTabBadgeViewProps> = props =>
 
     useEffect(() =>
     {
-        if(groupData.groupBadgeParts) return;
+        if(groupData.groupBadgeParts && groupData.groupBadgeParts.length) return;
+
+        if(!groupCustomize?.badgeBases?.length || !groupCustomize?.badgePartColors?.length) return;
 
         const badgeParts = [
             new GroupBadgePart(GroupBadgePart.BASE, groupCustomize.badgeBases[0].id, groupCustomize.badgePartColors[0].id),
diff --git a/src/components/groups/views/tabs/GroupTabColorsView.tsx b/src/components/groups/views/tabs/GroupTabColorsView.tsx
index 256171c..4e1dd3b 100644
--- a/src/components/groups/views/tabs/GroupTabColorsView.tsx
+++ b/src/components/groups/views/tabs/GroupTabColorsView.tsx
@@ -20,9 +20,12 @@ export const GroupTabColorsView: FC<GroupTabColorsViewProps> = props =>
 
     const getGroupColor = (colorIndex: number) =>
     {
-        if(colorIndex === 0) return groupCustomize.groupColorsA.find(color => (color.id === colors[colorIndex])).color;
+        if(!groupCustomize || !colors) return '000000';
 
-        return groupCustomize.groupColorsB.find(color => (color.id === colors[colorIndex])).color;
+        const list = (colorIndex === 0) ? groupCustomize.groupColorsA : groupCustomize.groupColorsB;
+        const found = list?.find(color => (color.id === colors[colorIndex]));
+
+        return found ? found.color : '000000';
     };
 
     const selectColor = (colorIndex: number, colorId: number) =>
@@ -64,7 +67,7 @@ export const GroupTabColorsView: FC<GroupTabColorsViewProps> = props =>
 
     useEffect(() =>
     {
-        if(!groupCustomize.groupColorsA || !groupCustomize.groupColorsB || groupData.groupColors) return;
+        if(!groupCustomize?.groupColorsA?.length || !groupCustomize?.groupColorsB?.length || (groupData.groupColors && groupData.groupColors.length)) return;
 
         const groupColors = [ groupCustomize.groupColorsA[0].id, groupCustomize.groupColorsB[0].id ];
 
@@ -108,7 +111,7 @@ export const GroupTabColorsView: FC<GroupTabColorsViewProps> = props =>
             <Column gap={ 1 } overflow="hidden" size={ 5 }>
                 <Text bold>{ LocalizeText('group.edit.color.primary.color') }</Text>
                 <AutoGrid columnCount={ 7 } columnMinHeight={ 16 } columnMinWidth={ 16 } gap={ 1 }>
-                    { groupData.groupColors && groupCustomize.groupColorsA && groupCustomize.groupColorsA.map((item, index) =>
+                    { groupData.groupColors && groupCustomize?.groupColorsA && groupCustomize.groupColorsA.map((item, index) =>
                     {
                         return <div key={ index } className={ classNames('relative rounded-[.25rem] w-[16px] h-[16px] bg-[#fff] border-2 border-[solid] border-[#fff] [box-shadow:inset_3px_3px_#0000001a] [box-shadow:inset_2px_2px_#0003] cursor-pointer', ((groupData.groupColors[0] === item.id) && 'bg-primary [box-shadow:none]')) } style={ { backgroundColor: '#' + item.color } } onClick={ () => selectColor(0, item.id) }></div>;
                     }) }
@@ -117,7 +120,7 @@ export const GroupTabColorsView: FC<GroupTabColorsViewProps> = props =>
             <Column gap={ 1 } overflow="hidden" size={ 5 }>
                 <Text bold>{ LocalizeText('group.edit.color.secondary.color') }</Text>
                 <AutoGrid columnCount={ 7 } columnMinHeight={ 16 } columnMinWidth={ 16 } gap={ 1 }>
-                    { groupData.groupColors && groupCustomize.groupColorsB && groupCustomize.groupColorsB.map((item, index) =>
+                    { groupData.groupColors && groupCustomize?.groupColorsB && groupCustomize.groupColorsB.map((item, index) =>
                     {
                         return <div key={ index } className={ classNames('relative rounded-[.25rem] w-[16px] h-[16px] bg-[#fff] border-2 border-[solid] border-[#fff] [box-shadow:inset_3px_3px_#0000001a] [box-shadow:inset_2px_2px_#0003] cursor-pointer', ((groupData.groupColors[1] === item.id) && 'bg-primary [box-shadow:none]')) } style={ { backgroundColor: '#' + item.color } } onClick={ () => selectColor(1, item.id) }></div>;
                     }) }
diff --git a/src/components/navigator/NavigatorView.tsx b/src/components/navigator/NavigatorView.tsx
index 8daf79b..7137908 100644
--- a/src/components/navigator/NavigatorView.tsx
+++ b/src/components/navigator/NavigatorView.tsx
@@ -14,8 +14,10 @@ import { NavigatorRoomCreatorView } from './views/NavigatorRoomCreatorView';
 import { NavigatorRoomInfoView } from './views/NavigatorRoomInfoView';
 import { NavigatorRoomLinkView } from './views/NavigatorRoomLinkView';
 import { NavigatorRoomSettingsView } from './views/room-settings/NavigatorRoomSettingsView';
+import { NavigatorEmptyStateView } from './views/search/NavigatorEmptyStateView';
 import { NavigatorSearchResultView } from './views/search/NavigatorSearchResultView';
 import { NavigatorSearchSavesResultView } from './views/search/NavigatorSearchSavesResultView';
+import { NavigatorSearchSkeletonView } from './views/search/NavigatorSearchSkeletonView';
 import { NavigatorSearchView } from './views/search/NavigatorSearchView';
 
 export const NavigatorView: FC<{}> = props =>
@@ -107,7 +109,7 @@ export const NavigatorView: FC<{}> = props =>
         <>
             { isVisible &&
                 <NitroCard
-                    className={ `${ isOpenSavesSearches ? 'w-[600px] min-w-[600px]' : 'w-navigator-w min-w-navigator-w' } h-navigator-h min-h-navigator-h` }
+                    className={ `${ isOpenSavesSearches ? 'w-[600px] sm:min-w-[600px]' : 'w-navigator-w sm:min-w-navigator-w' } max-w-[calc(100vw-1rem)] h-navigator-h min-h-navigator-h` }
                     uniqueKey="navigator">
                     <NitroCard.Header
                         headerText={ LocalizeText(isCreatorOpen ? 'navigator.createroom.title' : 'navigator.title') }
@@ -132,21 +134,21 @@ export const NavigatorView: FC<{}> = props =>
                             <FaPlus className="fa-icon" />
                         </NitroCard.TabItem>
                     </NitroCard.Tabs>
-                    <NitroCard.Content isLoading={ isFetching }>
+                    <NitroCard.Content>
                         { !isCreatorOpen &&
-                            <div className="flex h-full overflow-hidden gap-2">
+                            <div className="flex flex-col sm:flex-row h-full overflow-hidden gap-2">
                                 { isOpenSavesSearches &&
-                                    <div className="overflow-hidden pr-1 shrink-0">
+                                    <div className="overflow-hidden pr-1 shrink-0 w-full sm:w-auto max-h-40 sm:max-h-none">
                                         <NavigatorSearchSavesResultView searches={ navigatorSearches || [] } />
                                     </div> }
-                                <div className="flex flex-col w-full overflow-hidden gap-2">
-                                    <NavigatorSearchView />
+                                <div className="flex flex-col w-full min-h-0 overflow-hidden gap-2">
+                                    <NavigatorSearchView searchResult={ searchResult } />
                                     <div ref={ elementRef } className="flex flex-col flex-1 min-h-0 overflow-auto gap-2">
+                                        { (isFetching && !searchResult) &&
+                                            <NavigatorSearchSkeletonView /> }
                                         { searchResult && searchResult.results.map((result, index) => <NavigatorSearchResultView key={ index } searchResult={ result } />) }
                                         { searchResult && (!searchResult.results || searchResult.results.length === 0) &&
-                                            <div className="nitro-card-panel px-3 py-2 text-sm text-muted">
-                                                { LocalizeText(searchResult.code === 'myworld_view' ? 'navigator.roomsettings.moderation.none' : 'navigator.search.returned.no.results') }
-                                            </div> }
+                                            <NavigatorEmptyStateView code={ searchResult.code } onCreateRoom={ () => useNavigatorUiStore.getState().openCreator() } /> }
                                     </div>
                                     <Flex className="nitro-card-divider pt-2 border-t gap-2">
                                         <Flex pointer alignItems="center" justifyContent="center"
diff --git a/src/components/navigator/views/NavigatorRoomInfoView.tsx b/src/components/navigator/views/NavigatorRoomInfoView.tsx
index ca5686c..4fefcc9 100644
--- a/src/components/navigator/views/NavigatorRoomInfoView.tsx
+++ b/src/components/navigator/views/NavigatorRoomInfoView.tsx
@@ -1,10 +1,10 @@
 import { CreateLinkEvent, GetCustomRoomFilterMessageComposer, GetGuestRoomMessageComposer, GetSessionDataManager, NavigatorSearchComposer, RemoveOwnRoomRightsRoomMessageComposer, RoomControllerLevel, RoomMuteComposer, RoomSettingsComposer, ToggleStaffPickMessageComposer, UpdateHomeRoomMessageComposer } from '@nitrots/nitro-renderer';
-import { FC, useEffect, useMemo, useState } from 'react';
+import { FC, useEffect, useState } from 'react';
 import { FaLink, FaSignOutAlt } from 'react-icons/fa';
-import { DispatchUiEvent, GetGroupInformation, LocalizeText, ReportType, SendMessageComposer, ToggleFavoriteRoom } from '../../../api';
+import { DispatchUiEvent, GetGroupInformation, LocalizeText, ReportType, SendMessageComposer } from '../../../api';
 import { Button, Column, Flex, LayoutBadgeImageView, LayoutRoomThumbnailView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text, UserProfileIconView } from '../../../common';
 import { RoomWidgetThumbnailEvent } from '../../../events';
-import { useHasPermission, useHelp, useNavigatorData, useRoom } from '../../../hooks';
+import { useHasPermission, useHelp, useNavigatorData, useNavigatorFavourite, useRoom } from '../../../hooks';
 import { classNames } from '../../../layout';
 
 export interface NavigatorRoomInfoViewProps {
@@ -17,12 +17,13 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
     const [ isRoomPicked, setIsRoomPicked ] = useState(false);
     const [ isRoomMuted, setIsRoomMuted ] = useState(false);
     const { report = null } = useHelp();
-    const { navigatorData, favouriteRoomIds } = useNavigatorData();
+    const { navigatorData } = useNavigatorData();
     const { roomSession = null } = useRoom();
     const canManageAnyRoom = useHasPermission('acc_anyroomowner');
     const canStaffPick = useHasPermission('acc_staff_pick');
 
     const enteredRoomId = navigatorData?.enteredGuestRoom?.roomId ?? 0;
+    const { isFavourite: isRoomInFavouritesList, toggle: toggleFavourite } = useNavigatorFavourite(enteredRoomId);
 
     useEffect(() =>
     {
@@ -30,22 +31,6 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
         SendMessageComposer(new GetGuestRoomMessageComposer(enteredRoomId, false, false));
     }, [ enteredRoomId ]);
 
-    const isRoomInFavouritesList = useMemo(() =>
-    {
-        if(!enteredRoomId) return false;
-
-        return favouriteRoomIds.some((id: any) =>
-        {
-            if(id && typeof id === 'object')
-            {
-                if('roomId' in id) return Number(id.roomId) === enteredRoomId;
-                if('id' in id) return Number(id.id) === enteredRoomId;
-            }
-
-            return String(id) === String(enteredRoomId);
-        });
-    }, [ favouriteRoomIds, enteredRoomId ]);
-
     const hasPermission = (permission: string) =>
     {
         if(!navigatorData?.enteredGuestRoom) return false;
@@ -115,7 +100,7 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
                 report(ReportType.ROOM, { roomId, roomName: navigatorData.enteredGuestRoom.roomName });
                 return;
             case 'room_favourite':
-                ToggleFavoriteRoom(roomId, isRoomInFavouritesList);
+                toggleFavourite();
                 SendMessageComposer(new GetGuestRoomMessageComposer(roomId, false, false));
                 return;
             case 'remove_rights':
diff --git a/src/components/navigator/views/room-settings/NavigatorRoomSettingsAccessTabView.tsx b/src/components/navigator/views/room-settings/NavigatorRoomSettingsAccessTabView.tsx
index c842b10..0faddb2 100644
--- a/src/components/navigator/views/room-settings/NavigatorRoomSettingsAccessTabView.tsx
+++ b/src/components/navigator/views/room-settings/NavigatorRoomSettingsAccessTabView.tsx
@@ -2,6 +2,7 @@ import { RoomDataParser } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { IRoomData, LocalizeText } from '../../../../api';
 import { Column, Flex, Text } from '../../../../common';
+import { NavigatorRoomSettingsSectionView } from './NavigatorRoomSettingsSectionView';
 
 interface NavigatorRoomSettingsTabViewProps
 {
@@ -36,9 +37,8 @@ export const NavigatorRoomSettingsAccessTabView: FC<NavigatorRoomSettingsTabView
                 <Text bold>{ LocalizeText('navigator.roomsettings.roomaccess.caption') }</Text>
                 <Text>{ LocalizeText('navigator.roomsettings.roomaccess.info') }</Text>
             </Column>
-            <Column overflow="auto">
-                <Column gap={ 1 }>
-                    <Text bold>{ LocalizeText('navigator.roomsettings.doormode') }</Text>
+            <Column overflow="auto" gap={ 2 }>
+                <NavigatorRoomSettingsSectionView title={ LocalizeText('navigator.roomsettings.doormode') } gap={ 1 }>
                     <Flex alignItems="center" gap={ 1 }>
                         <input className="form-check-input" type="radio" name="lockState" checked={ (roomData.lockState === RoomDataParser.OPEN_STATE) && !isTryingPassword } onChange={ event => handleChange('lock_state', RoomDataParser.OPEN_STATE) } />
                         <Text>{ LocalizeText('navigator.roomsettings.doormode.open') }</Text>
@@ -58,21 +58,20 @@ export const NavigatorRoomSettingsAccessTabView: FC<NavigatorRoomSettingsTabView
                         { (isTryingPassword || (roomData.lockState === RoomDataParser.PASSWORD_STATE)) &&
                             <Column gap={ 1 }>
                                 <Text>{ LocalizeText('navigator.roomsettings.doormode.password') }</Text>
-                                <input type="password" className="form-control form-control-sm col-4" value={ password } onChange={ event => setPassword(event.target.value) } placeholder={ LocalizeText('navigator.roomsettings.password') } onFocus={ event => setIsTryingPassword(true) } />
+                                <input type="password" className="form-control form-control-sm" value={ password } onChange={ event => setPassword(event.target.value) } placeholder={ LocalizeText('navigator.roomsettings.password') } onFocus={ event => setIsTryingPassword(true) } />
                                 { isTryingPassword && (password.length <= 0) &&
                                     <Text bold small variant="danger">
                                         { LocalizeText('navigator.roomsettings.passwordismandatory') }
                                     </Text> }
-                                <input type="password" className="form-control form-control-sm col-4" value={ confirmPassword } onChange={ event => setConfirmPassword(event.target.value) } onBlur={ saveRoomPassword } placeholder={ LocalizeText('navigator.roomsettings.passwordconfirm') } />
+                                <input type="password" className="form-control form-control-sm" value={ confirmPassword } onChange={ event => setConfirmPassword(event.target.value) } onBlur={ saveRoomPassword } placeholder={ LocalizeText('navigator.roomsettings.passwordconfirm') } />
                                 { isTryingPassword && ((password.length > 0) && (password !== confirmPassword)) &&
                                     <Text bold small variant="danger">
                                         { LocalizeText('navigator.roomsettings.invalidconfirm') }
                                     </Text> }
                             </Column> }
                     </Flex>
-                </Column>
-                <Column gap={ 1 }>
-                    <Text bold>{ LocalizeText('navigator.roomsettings.pets') }</Text>
+                </NavigatorRoomSettingsSectionView>
+                <NavigatorRoomSettingsSectionView title={ LocalizeText('navigator.roomsettings.pets') } gap={ 1 }>
                     <Flex alignItems="center" gap={ 1 }>
                         <input className="form-check-input" type="checkbox" checked={ roomData.allowPets } onChange={ event => handleChange('allow_pets', event.target.checked) } />
                         <Text>{ LocalizeText('navigator.roomsettings.allowpets') }</Text>
@@ -81,7 +80,7 @@ export const NavigatorRoomSettingsAccessTabView: FC<NavigatorRoomSettingsTabView
                         <input className="form-check-input" type="checkbox" checked={ roomData.allowPetsEat } onChange={ event => handleChange('allow_pets_eat', event.target.checked) } />
                         <Text>{ LocalizeText('navigator.roomsettings.allowfoodconsume') }</Text>
                     </Flex>
-                </Column>
+                </NavigatorRoomSettingsSectionView>
             </Column>
         </>
     );
diff --git a/src/components/navigator/views/room-settings/NavigatorRoomSettingsBasicTabView.tsx b/src/components/navigator/views/room-settings/NavigatorRoomSettingsBasicTabView.tsx
index 526767c..4ddd540 100644
--- a/src/components/navigator/views/room-settings/NavigatorRoomSettingsBasicTabView.tsx
+++ b/src/components/navigator/views/room-settings/NavigatorRoomSettingsBasicTabView.tsx
@@ -2,7 +2,7 @@ import { RoomDeleteComposer, RoomSettingsSaveErrorEvent, RoomSettingsSaveErrorPa
 import { FC, useEffect, useState } from 'react';
 import { FaTimes } from 'react-icons/fa';
 import { CreateLinkEvent, GetMaxVisitorsList, IRoomData, LocalizeText, SendMessageComposer } from '../../../../api';
-import { Base, Column, Flex, Text } from '../../../../common';
+import { Column, Flex, Text } from '../../../../common';
 import { useMessageEvent, useNavigatorData, useNotification } from '../../../../hooks';
 
 const ROOM_NAME_MIN_LENGTH = 3;
@@ -39,6 +39,7 @@ export const NavigatorRoomSettingsBasicTabView: FC<NavigatorRoomSettingsTabViewP
         {
             case RoomSettingsSaveErrorParser.ERROR_INVALID_TAG:
                 setTypeError('navigator.roomsettings.unacceptablewords');
+                break;
             case RoomSettingsSaveErrorParser.ERROR_NON_USER_CHOOSABLE_TAG:
                 setTypeError('navigator.roomsettings.nonuserchoosabletag');
                 break;
@@ -77,9 +78,9 @@ export const NavigatorRoomSettingsBasicTabView: FC<NavigatorRoomSettingsTabViewP
 
     const saveTags = (index: number) =>
     {
-        if(index === 0 && (roomTag1 === roomData.tags[0]) || (roomTag1.length > TAGS_MAX_LENGTH)) return;
+        if(index === 0 && ((roomTag1 === roomData.tags[0]) || (roomTag1.length > TAGS_MAX_LENGTH))) return;
 
-        if(index === 1 && (roomTag2 === roomData.tags[1]) || (roomTag2.length > TAGS_MAX_LENGTH)) return;
+        if(index === 1 && ((roomTag2 === roomData.tags[1]) || (roomTag2.length > TAGS_MAX_LENGTH))) return;
 
         if(roomTag1 === '' && roomTag2 !== '') setRoomTag2('');
 
@@ -98,78 +99,77 @@ export const NavigatorRoomSettingsBasicTabView: FC<NavigatorRoomSettingsTabViewP
 
     return (
         <>
-            <Flex alignItems="center" gap={ 1 }>
-                <Text className="col-3">{ LocalizeText('navigator.roomname') }</Text>
-                <Column fullWidth gap={ 0 }>
-                    <input className="form-control form-control-sm" value={ roomName } maxLength={ ROOM_NAME_MAX_LENGTH } onChange={ event => setRoomName(event.target.value) } onBlur={ saveRoomName } />
-                    { (roomName.length < ROOM_NAME_MIN_LENGTH) &&
-                        <Text bold small variant="danger">
-                            { LocalizeText('navigator.roomsettings.roomnameismandatory') }
-                        </Text> }
-                </Column>
-            </Flex>
-            <Flex alignItems="center" gap={ 1 }>
-                <Text className="col-3">{ LocalizeText('navigator.roomsettings.desc') }</Text>
+            <Column gap={ 1 }>
+                <Text bold>{ LocalizeText('navigator.roomname') }</Text>
+                <input className="form-control form-control-sm" value={ roomName } maxLength={ ROOM_NAME_MAX_LENGTH } onChange={ event => setRoomName(event.target.value) } onBlur={ saveRoomName } />
+                { (roomName.length < ROOM_NAME_MIN_LENGTH) &&
+                    <Text bold small variant="danger">
+                        { LocalizeText('navigator.roomsettings.roomnameismandatory') }
+                    </Text> }
+            </Column>
+            <Column gap={ 1 }>
+                <Text bold>{ LocalizeText('navigator.roomsettings.desc') }</Text>
                 <textarea className="form-control form-control-sm" value={ roomDescription } maxLength={ DESC_MAX_LENGTH } onChange={ event => setRoomDescription(event.target.value) } onBlur={ saveRoomDescription } />
-            </Flex>
-            <Flex alignItems="center" gap={ 1 }>
-                <Text className="col-3">{ LocalizeText('navigator.category') }</Text>
+            </Column>
+            <Column gap={ 1 }>
+                <Text bold>{ LocalizeText('navigator.category') }</Text>
                 <select className="form-select form-select-sm" value={ roomData.categoryId } onChange={ event => handleChange('category', event.target.value) }>
                     { categories && categories.map(category => <option key={ category.id } value={ category.id }>{ LocalizeText(category.name) }</option>) }
                 </select>
-            </Flex>
-            <Flex alignItems="center" gap={ 1 }>
-                <Text className="col-3">{ LocalizeText('navigator.maxvisitors') }</Text>
+            </Column>
+            <Column gap={ 1 }>
+                <Text bold>{ LocalizeText('navigator.maxvisitors') }</Text>
                 <select className="form-select form-select-sm" value={ roomData.userCount } onChange={ event => handleChange('max_visitors', event.target.value) }>
                     { GetMaxVisitorsList && GetMaxVisitorsList.map(value => <option key={ value } value={ value }>{ value }</option>) }
                 </select>
-            </Flex>
-            <Flex alignItems="center" gap={ 1 }>
-                <Text className="col-3">{ LocalizeText('navigator.tradesettings') }</Text>
+            </Column>
+            <Column gap={ 1 }>
+                <Text bold>{ LocalizeText('navigator.tradesettings') }</Text>
                 <select className="form-select form-select-sm" value={ roomData.tradeState } onChange={ event => handleChange('trade_state', event.target.value) }>
                     <option value="0">{ LocalizeText('navigator.roomsettings.trade_not_allowed') }</option>
                     <option value="1">{ LocalizeText('navigator.roomsettings.trade_not_with_Controller') }</option>
                     <option value="2">{ LocalizeText('navigator.roomsettings.trade_allowed') }</option>
                 </select>
-            </Flex>
+            </Column>
+            <Column gap={ 1 }>
+                <Text bold>{ LocalizeText('navigator.tags') }</Text>
+                <Flex gap={ 1 }>
+                    <Column fullWidth gap={ 0 }>
+                        <input className="form-control form-control-sm" value={ roomTag1 } onChange={ event => setRoomTag1(event.target.value) } onBlur={ () => saveTags(0) } />
+                        { (roomTag1.length > TAGS_MAX_LENGTH) &&
+                            <Text bold small variant="danger">
+                                { LocalizeText('navigator.roomsettings.toomanycharacters') }
+                            </Text> }
+                        { (tagIndex === 0 && typeError != '') &&
+                            <Text bold small variant="danger">
+                                { LocalizeText(typeError) }
+                            </Text> }
+                    </Column>
+                    <Column fullWidth gap={ 0 }>
+                        <input className="form-control form-control-sm" value={ roomTag2 } onChange={ event => setRoomTag2(event.target.value) } onBlur={ () => saveTags(1) } />
+                        { (roomTag2.length > TAGS_MAX_LENGTH) &&
+                            <Text bold small variant="danger">
+                                { LocalizeText('navigator.roomsettings.toomanycharacters') }
+                            </Text> }
+                        { (tagIndex === 1 && typeError != '') &&
+                            <Text bold small variant="danger">
+                                { LocalizeText(typeError) }
+                            </Text> }
+                    </Column>
+                </Flex>
+            </Column>
             <Flex alignItems="center" gap={ 1 }>
-                <Text className="col-3">{ LocalizeText('navigator.tags') }</Text>
-                <Column fullWidth gap={ 0 }>
-                    <input className="form-control form-control-sm" value={ roomTag1 } onChange={ event => setRoomTag1(event.target.value) } onBlur={ () => saveTags(0) } />
-                    { (roomTag1.length > TAGS_MAX_LENGTH) &&
-                        <Text bold small variant="danger">
-                            { LocalizeText('navigator.roomsettings.toomanycharacters') }
-                        </Text> }
-                    { (tagIndex === 0 && typeError != '') &&
-                        <Text bold small variant="danger">
-                            { LocalizeText(typeError) }
-                        </Text> }
-                </Column>
-                <Column fullWidth gap={ 0 }>
-                    <input className="form-control form-control-sm" value={ roomTag2 } onChange={ event => setRoomTag2(event.target.value) } onBlur={ () => saveTags(1) } />
-                    { (roomTag2.length > TAGS_MAX_LENGTH) &&
-                        <Text bold small variant="danger">
-                            { LocalizeText('navigator.roomsettings.toomanycharacters') }
-                        </Text> }
-                    { (tagIndex === 1 && typeError != '') &&
-                    <Text bold small variant="danger">
-                        { LocalizeText(typeError) }
-                    </Text> }
-                </Column>
-            </Flex>
-            <Flex alignItems="center" gap={ 1 }>
-                <Base className="col-3" />
                 <input className="form-check-input" type="checkbox" checked={ roomData.allowWalkthrough } onChange={ event => handleChange('allow_walkthrough', event.target.checked) } />
                 <Text>{ LocalizeText('navigator.roomsettings.allow_walk_through') }</Text>
             </Flex>
             <Flex alignItems="center" gap={ 1 }>
-                <Base className="col-3" />
                 <input className="form-check-input" type="checkbox" checked={ roomData.allowUnderpass } onChange={ event => handleChange('allow_underpass', event.target.checked) } />
                 <Text>{ LocalizeText('navigator.roomsettings.allow_underpass') }</Text>
             </Flex>
-            <Text variant="danger" underline bold pointer className="d-flex justify-content-center align-items-center gap-1" onClick={ deleteRoom }>
-                <FaTimes className="fa-icon" /> { LocalizeText('navigator.roomsettings.delete') }
-            </Text>
+            <Flex pointer alignItems="center" justifyContent="center" gap={ 1 } onClick={ deleteRoom }>
+                <FaTimes className="fa-icon shrink-0 text-[#a81a12]" />
+                <Text variant="danger" underline bold className="whitespace-nowrap">{ LocalizeText('navigator.roomsettings.delete') }</Text>
+            </Flex>
         </>
     );
 };
diff --git a/src/components/navigator/views/room-settings/NavigatorRoomSettingsModTabView.tsx b/src/components/navigator/views/room-settings/NavigatorRoomSettingsModTabView.tsx
index 4ce43fb..0d90efb 100644
--- a/src/components/navigator/views/room-settings/NavigatorRoomSettingsModTabView.tsx
+++ b/src/components/navigator/views/room-settings/NavigatorRoomSettingsModTabView.tsx
@@ -3,6 +3,7 @@ import { FC, useEffect, useState } from 'react';
 import { IRoomData, LocalizeText, SendMessageComposer } from '../../../../api';
 import { Button, Column, Flex, Grid, Text, UserProfileIconView } from '../../../../common';
 import { useMessageEvent } from '../../../../hooks';
+import { NavigatorRoomSettingsSectionView } from './NavigatorRoomSettingsSectionView';
 
 interface NavigatorRoomSettingsTabViewProps
 {
@@ -51,28 +52,29 @@ export const NavigatorRoomSettingsModTabView: FC<NavigatorRoomSettingsTabViewPro
     return (
         <Grid overflow="auto">
             <Column size={ 6 }>
-                <Text bold>{ LocalizeText('navigator.roomsettings.moderation.banned.users') } ({ bannedUsers.length })</Text>
-                <Flex overflow="hidden" className="nitro-card-panel list-container p-2">
-                    <Column fullWidth overflow="auto" gap={ 1 }>
-                        { bannedUsers && (bannedUsers.length > 0) && bannedUsers.map((user, index) =>
-                        {
-                            return (
-                                <Flex key={ index } shrink alignItems="center" gap={ 1 } overflow="hidden">
-                                    <UserProfileIconView userId={ user.userId } />
-                                    <Text pointer grow onClick={ event => setSelectedUserId(user.userId) }> { user.userName }</Text>
-                                </Flex>
-                            );
-                        }) }
-                    </Column>
-                </Flex>
-                <Button disabled={ (selectedUserId <= 0) } onClick={ event => unBanUser(selectedUserId) }>
-                    { LocalizeText('navigator.roomsettings.moderation.unban') } { selectedUserId > 0 && bannedUsers.find(user => (user.userId === selectedUserId))?.userName }
-                </Button>
+                <NavigatorRoomSettingsSectionView title={ `${ LocalizeText('navigator.roomsettings.moderation.banned.users') } (${ bannedUsers.length })` } gap={ 1 } className="h-full">
+                    <Flex overflow="hidden" className="nitro-card-panel list-container p-2">
+                        <Column fullWidth overflow="auto" gap={ 1 }>
+                            { bannedUsers && (bannedUsers.length > 0) && bannedUsers.map((user, index) =>
+                            {
+                                return (
+                                    <Flex key={ index } shrink alignItems="center" gap={ 1 } overflow="hidden">
+                                        <UserProfileIconView userId={ user.userId } />
+                                        <Text pointer grow onClick={ event => setSelectedUserId(user.userId) }> { user.userName }</Text>
+                                    </Flex>
+                                );
+                            }) }
+                        </Column>
+                    </Flex>
+                    <Button disabled={ (selectedUserId <= 0) } onClick={ event => unBanUser(selectedUserId) }>
+                        { LocalizeText('navigator.roomsettings.moderation.unban') } { selectedUserId > 0 && bannedUsers.find(user => (user.userId === selectedUserId))?.userName }
+                    </Button>
+                </NavigatorRoomSettingsSectionView>
             </Column>
             <Column size={ 6 }>
-                <Column gap={ 1 }>
-                    <Text bold>{ LocalizeText('navigator.roomsettings.moderation.mute.header') }</Text>
-                    <Flex alignItems="center" gap={ 1 }>
+                <NavigatorRoomSettingsSectionView title={ LocalizeText('navigator.roomsettings.moderation') } gap={ 2 } className="h-full">
+                    <Column gap={ 1 }>
+                        <Text bold small>{ LocalizeText('navigator.roomsettings.moderation.mute.header') }</Text>
                         <select className="form-select form-select-sm" value={ roomData.moderationSettings.allowMute } onChange={ event => handleChange('moderation_mute', event.target.value) }>
                             <option value={ RoomModerationSettings.MODERATION_LEVEL_NONE }>
                                 { LocalizeText('navigator.roomsettings.moderation.none') }
@@ -81,11 +83,9 @@ export const NavigatorRoomSettingsModTabView: FC<NavigatorRoomSettingsTabViewPro
                                 { LocalizeText('navigator.roomsettings.moderation.rights') }
                             </option>
                         </select>
-                    </Flex>
-                </Column>
-                <Column gap={ 1 }>
-                    <Text bold>{ LocalizeText('navigator.roomsettings.moderation.kick.header') }</Text>
-                    <Flex alignItems="center" gap={ 1 }>
+                    </Column>
+                    <Column gap={ 1 }>
+                        <Text bold small>{ LocalizeText('navigator.roomsettings.moderation.kick.header') }</Text>
                         <select className="form-select form-select-sm" value={ roomData.moderationSettings.allowKick } onChange={ event => handleChange('moderation_kick', event.target.value) }>
                             <option value={ RoomModerationSettings.MODERATION_LEVEL_NONE }>
                                 { LocalizeText('navigator.roomsettings.moderation.none') }
@@ -97,11 +97,9 @@ export const NavigatorRoomSettingsModTabView: FC<NavigatorRoomSettingsTabViewPro
                                 { LocalizeText('navigator.roomsettings.moderation.all') }
                             </option>
                         </select>
-                    </Flex>
-                </Column>
-                <Column gap={ 1 }>
-                    <Text bold>{ LocalizeText('navigator.roomsettings.moderation.ban.header') }</Text>
-                    <Flex alignItems="center" gap={ 1 }>
+                    </Column>
+                    <Column gap={ 1 }>
+                        <Text bold small>{ LocalizeText('navigator.roomsettings.moderation.ban.header') }</Text>
                         <select className="form-select form-select-sm" value={ roomData.moderationSettings.allowBan } onChange={ event => handleChange('moderation_ban', event.target.value) }>
                             <option value={ RoomModerationSettings.MODERATION_LEVEL_NONE }>
                                 { LocalizeText('navigator.roomsettings.moderation.none') }
@@ -110,8 +108,8 @@ export const NavigatorRoomSettingsModTabView: FC<NavigatorRoomSettingsTabViewPro
                                 { LocalizeText('navigator.roomsettings.moderation.rights') }
                             </option>
                         </select>
-                    </Flex>
-                </Column>
+                    </Column>
+                </NavigatorRoomSettingsSectionView>
             </Column>
         </Grid>
     );
diff --git a/src/components/navigator/views/room-settings/NavigatorRoomSettingsRightsTabView.tsx b/src/components/navigator/views/room-settings/NavigatorRoomSettingsRightsTabView.tsx
index 1c12f00..ca236db 100644
--- a/src/components/navigator/views/room-settings/NavigatorRoomSettingsRightsTabView.tsx
+++ b/src/components/navigator/views/room-settings/NavigatorRoomSettingsRightsTabView.tsx
@@ -3,6 +3,7 @@ import { FC, useEffect, useRef, useState } from 'react';
 import { IRoomData, LocalizeText, SendMessageComposer } from '../../../../api';
 import { Button, Column, Flex, Grid, Text, UserProfileIconView } from '../../../../common';
 import { useFriends, useMessageEvent } from '../../../../hooks';
+import { NavigatorRoomSettingsSectionView } from './NavigatorRoomSettingsSectionView';
 
 interface NavigatorRoomSettingsTabViewProps
 {
@@ -105,74 +106,72 @@ export const NavigatorRoomSettingsRightsTabView: FC<NavigatorRoomSettingsTabView
     return (
         <Grid>
             <Column size={ 6 }>
-                <Text bold>
-                    { LocalizeText(
+                <NavigatorRoomSettingsSectionView gap={ 1 } className="h-full"
+                    title={ LocalizeText(
                         'navigator.flatctrls.userswithrights',
                         [ 'displayed', 'total' ],
                         [
                             filteredUsersWithRights.size.toString(),
                             filteredUsersWithRights.size.toString()
                         ]
-                    ) }
-                </Text>
+                    ) }>
+                    <Flex overflow="hidden" className="nitro-card-panel p-2 list-container">
+                        <Column fullWidth overflow="auto" gap={ 1 }>
+                            { Array.from(filteredUsersWithRights.entries()).map(([ id, name ], index) =>
+                            {
+                                return (
+                                    <Flex key={ `${id}-${index}` } shrink alignItems="center" gap={ 1 } overflow="hidden">
+                                        <UserProfileIconView userId={ id } />
+                                        <Text
+                                            pointer
+                                            grow
+                                            onClick={ () => guardedSend(`take_${id}`, new RoomTakeRightsComposer(id)) }>
+                                            { name }
+                                        </Text>
+                                    </Flex>
+                                );
+                            }) }
+                        </Column>
+                    </Flex>
 
-                <Flex overflow="hidden" className="nitro-card-panel p-2 list-container">
-                    <Column fullWidth overflow="auto" gap={ 1 }>
-                        { Array.from(filteredUsersWithRights.entries()).map(([ id, name ], index) =>
-                        {
-                            return (
-                                <Flex key={ `${id}-${index}` } shrink alignItems="center" gap={ 1 } overflow="hidden">
-                                    <UserProfileIconView userId={ id } />
-                                    <Text
-                                        pointer
-                                        grow
-                                        onClick={ () => guardedSend(`take_${id}`, new RoomTakeRightsComposer(id)) }>
-                                        { name }
-                                    </Text>
-                                </Flex>
-                            );
-                        }) }
-                    </Column>
-                </Flex>
-
-                <Button
-                    variant="danger"
-                    disabled={ !filteredUsersWithRights.size }
-                    onClick={ () => roomData && guardedSend('removeAll', new RemoveAllRightsMessageComposer(roomData.roomId)) }>
-                    { LocalizeText('navigator.flatctrls.clear') }
-                </Button>
+                    <Button
+                        variant="danger"
+                        disabled={ !filteredUsersWithRights.size }
+                        onClick={ () => roomData && guardedSend('removeAll', new RemoveAllRightsMessageComposer(roomData.roomId)) }>
+                        { LocalizeText('navigator.flatctrls.clear') }
+                    </Button>
+                </NavigatorRoomSettingsSectionView>
             </Column>
 
             <Column size={ 6 }>
-                <Text bold>
-                    { LocalizeText(
+                <NavigatorRoomSettingsSectionView gap={ 1 } className="h-full"
+                    title={ LocalizeText(
                         'navigator.flatctrls.friends',
                         [ 'displayed', 'total' ],
                         [
                             friendsWithoutRights.length.toString(),
                             allFriends.length.toString()
                         ]
-                    ) }
-                </Text>
-
-                <Flex overflow="hidden" className="nitro-card-panel p-2 list-container">
-                    <Column fullWidth overflow="auto" gap={ 1 }>
-                        { friendsWithoutRights.map((friend, index) =>
-                        {
-                            return (
-                                <Flex key={ `${friend.id}-${index}` } shrink alignItems="center" gap={ 1 } overflow="hidden">
-                                    <UserProfileIconView userId={ friend.id } />
-                                    <Text
-                                        pointer
-                                        grow
-                                        onClick={ () => guardedSend(`give_${friend.id}`, new RoomGiveRightsComposer(friend.id)) }>
-                                        { friend.name }
-                                    </Text>
-                                </Flex>
-                            );
-                        }) }
-                    </Column>
-                </Flex>
+                    ) }>
+                    <Flex overflow="hidden" className="nitro-card-panel p-2 list-container">
+                        <Column fullWidth overflow="auto" gap={ 1 }>
+                            { friendsWithoutRights.map((friend, index) =>
+                            {
+                                return (
+                                    <Flex key={ `${friend.id}-${index}` } shrink alignItems="center" gap={ 1 } overflow="hidden">
+                                        <UserProfileIconView userId={ friend.id } />
+                                        <Text
+                                            pointer
+                                            grow
+                                            onClick={ () => guardedSend(`give_${friend.id}`, new RoomGiveRightsComposer(friend.id)) }>
+                                            { friend.name }
+                                        </Text>
+                                    </Flex>
+                                );
+                            }) }
+                        </Column>
+                    </Flex>
+                </NavigatorRoomSettingsSectionView>
             </Column>
         </Grid>
     );
diff --git a/src/components/navigator/views/room-settings/NavigatorRoomSettingsSectionView.tsx b/src/components/navigator/views/room-settings/NavigatorRoomSettingsSectionView.tsx
new file mode 100644
index 0000000..e619a30
--- /dev/null
+++ b/src/components/navigator/views/room-settings/NavigatorRoomSettingsSectionView.tsx
@@ -0,0 +1,22 @@
+import { FC, ReactNode } from 'react';
+import { Column, Text } from '../../../../common';
+
+interface NavigatorRoomSettingsSectionViewProps
+{
+    title?: string;
+    gap?: 1 | 2 | 3;
+    className?: string;
+    children: ReactNode;
+}
+
+export const NavigatorRoomSettingsSectionView: FC<NavigatorRoomSettingsSectionViewProps> = props =>
+{
+    const { title = null, gap = 2, className = '', children = null } = props;
+
+    return (
+        <Column gap={ gap } className={ `rounded bg-gray-100 p-3 ${ className }`.trim() }>
+            { title && <Text bold small>{ title }</Text> }
+            { children }
+        </Column>
+    );
+};
diff --git a/src/components/navigator/views/room-settings/NavigatorRoomSettingsVipChatTabView.tsx b/src/components/navigator/views/room-settings/NavigatorRoomSettingsVipChatTabView.tsx
index aa4f1af..c2c8c13 100644
--- a/src/components/navigator/views/room-settings/NavigatorRoomSettingsVipChatTabView.tsx
+++ b/src/components/navigator/views/room-settings/NavigatorRoomSettingsVipChatTabView.tsx
@@ -3,6 +3,7 @@ import { FC, useEffect, useState } from 'react';
 import { GetClubMemberLevel, IRoomData, LocalizeText } from '../../../../api';
 import { Column, Grid, Text } from '../../../../common';
 import { NitroInput } from '../../../../layout';
+import { NavigatorRoomSettingsSectionView } from './NavigatorRoomSettingsSectionView';
 
 interface NavigatorRoomSettingsTabViewProps
 {
@@ -29,48 +30,50 @@ export const NavigatorRoomSettingsVipChatTabView: FC<NavigatorRoomSettingsTabVie
             </div>
             <Grid className={ !isHC ? 'opacity-50 pointer-events-none' : '' } overflow="auto">
                 <Column gap={ 1 } size={ 6 }>
-                    <Text small bold>{ LocalizeText('navigator.roomsettings.chat_settings') }</Text>
-                    <Text small>{ LocalizeText('navigator.roomsettings.chat_settings.info') }</Text>
-                    <select className="form-select form-select-sm" disabled={ !isHC } value={ roomData.chatSettings.mode } onChange={ event => handleChange('bubble_mode', event.target.value) }>
-                        <option value={ RoomChatSettings.CHAT_MODE_FREE_FLOW }>{ LocalizeText('navigator.roomsettings.chat.mode.free.flow') }</option>
-                        <option value={ RoomChatSettings.CHAT_MODE_LINE_BY_LINE }>{ LocalizeText('navigator.roomsettings.chat.mode.line.by.line') }</option>
-                    </select>
-                    <select className="form-select form-select-sm" disabled={ !isHC } value={ roomData.chatSettings.weight } onChange={ event => handleChange('chat_weight', event.target.value) }>
-                        <option value={ RoomChatSettings.CHAT_BUBBLE_WIDTH_NORMAL }>{ LocalizeText('navigator.roomsettings.chat.bubbles.width.normal') }</option>
-                        <option value={ RoomChatSettings.CHAT_BUBBLE_WIDTH_THIN }>{ LocalizeText('navigator.roomsettings.chat.bubbles.width.thin') }</option>
-                        <option value={ RoomChatSettings.CHAT_BUBBLE_WIDTH_WIDE }>{ LocalizeText('navigator.roomsettings.chat.bubbles.width.wide') }</option>
-                    </select>
-                    <select className="form-select form-select-sm" disabled={ !isHC } value={ roomData.chatSettings.speed } onChange={ event => handleChange('bubble_speed', event.target.value) }>
-                        <option value={ RoomChatSettings.CHAT_SCROLL_SPEED_FAST }>{ LocalizeText('navigator.roomsettings.chat.speed.fast') }</option>
-                        <option value={ RoomChatSettings.CHAT_SCROLL_SPEED_NORMAL }>{ LocalizeText('navigator.roomsettings.chat.speed.normal') }</option>
-                        <option value={ RoomChatSettings.CHAT_SCROLL_SPEED_SLOW }>{ LocalizeText('navigator.roomsettings.chat.speed.slow') }</option>
-                    </select>
-                    <select className="form-select form-select-sm" disabled={ !isHC } value={ roomData.chatSettings.protection } onChange={ event => handleChange('flood_protection', event.target.value) }>
-                        <option value={ RoomChatSettings.FLOOD_FILTER_LOOSE }>{ LocalizeText('navigator.roomsettings.chat.flood.loose') }</option>
-                        <option value={ RoomChatSettings.FLOOD_FILTER_NORMAL }>{ LocalizeText('navigator.roomsettings.chat.flood.normal') }</option>
-                        <option value={ RoomChatSettings.FLOOD_FILTER_STRICT }>{ LocalizeText('navigator.roomsettings.chat.flood.strict') }</option>
-                    </select>
-                    <Text small>{ LocalizeText('navigator.roomsettings.chat_settings.hearing.distance') }</Text>
-                    <NitroInput className="form-control-sm" disabled={ !isHC } min="0" type="number" value={ chatDistance } onBlur={ event => handleChange('chat_distance', chatDistance) } onChange={ event => setChatDistance(event.target.valueAsNumber) } />
+                    <NavigatorRoomSettingsSectionView title={ LocalizeText('navigator.roomsettings.chat_settings') } gap={ 1 } className="h-full">
+                        <Text small>{ LocalizeText('navigator.roomsettings.chat_settings.info') }</Text>
+                        <select className="form-select form-select-sm" disabled={ !isHC } value={ roomData.chatSettings.mode } onChange={ event => handleChange('bubble_mode', event.target.value) }>
+                            <option value={ RoomChatSettings.CHAT_MODE_FREE_FLOW }>{ LocalizeText('navigator.roomsettings.chat.mode.free.flow') }</option>
+                            <option value={ RoomChatSettings.CHAT_MODE_LINE_BY_LINE }>{ LocalizeText('navigator.roomsettings.chat.mode.line.by.line') }</option>
+                        </select>
+                        <select className="form-select form-select-sm" disabled={ !isHC } value={ roomData.chatSettings.weight } onChange={ event => handleChange('chat_weight', event.target.value) }>
+                            <option value={ RoomChatSettings.CHAT_BUBBLE_WIDTH_NORMAL }>{ LocalizeText('navigator.roomsettings.chat.bubbles.width.normal') }</option>
+                            <option value={ RoomChatSettings.CHAT_BUBBLE_WIDTH_THIN }>{ LocalizeText('navigator.roomsettings.chat.bubbles.width.thin') }</option>
+                            <option value={ RoomChatSettings.CHAT_BUBBLE_WIDTH_WIDE }>{ LocalizeText('navigator.roomsettings.chat.bubbles.width.wide') }</option>
+                        </select>
+                        <select className="form-select form-select-sm" disabled={ !isHC } value={ roomData.chatSettings.speed } onChange={ event => handleChange('bubble_speed', event.target.value) }>
+                            <option value={ RoomChatSettings.CHAT_SCROLL_SPEED_FAST }>{ LocalizeText('navigator.roomsettings.chat.speed.fast') }</option>
+                            <option value={ RoomChatSettings.CHAT_SCROLL_SPEED_NORMAL }>{ LocalizeText('navigator.roomsettings.chat.speed.normal') }</option>
+                            <option value={ RoomChatSettings.CHAT_SCROLL_SPEED_SLOW }>{ LocalizeText('navigator.roomsettings.chat.speed.slow') }</option>
+                        </select>
+                        <select className="form-select form-select-sm" disabled={ !isHC } value={ roomData.chatSettings.protection } onChange={ event => handleChange('flood_protection', event.target.value) }>
+                            <option value={ RoomChatSettings.FLOOD_FILTER_LOOSE }>{ LocalizeText('navigator.roomsettings.chat.flood.loose') }</option>
+                            <option value={ RoomChatSettings.FLOOD_FILTER_NORMAL }>{ LocalizeText('navigator.roomsettings.chat.flood.normal') }</option>
+                            <option value={ RoomChatSettings.FLOOD_FILTER_STRICT }>{ LocalizeText('navigator.roomsettings.chat.flood.strict') }</option>
+                        </select>
+                        <Text small>{ LocalizeText('navigator.roomsettings.chat_settings.hearing.distance') }</Text>
+                        <NitroInput className="form-control-sm" disabled={ !isHC } min="0" type="number" value={ chatDistance } onBlur={ event => handleChange('chat_distance', chatDistance) } onChange={ event => setChatDistance(event.target.valueAsNumber) } />
+                    </NavigatorRoomSettingsSectionView>
                 </Column>
                 <Column gap={ 1 } size={ 6 }>
-                    <Text small bold>{ LocalizeText('navigator.roomsettings.vip_settings') }</Text>
-                    <div className="flex items-center gap-1">
-                        <input checked={ roomData.hideWalls } className="form-check-input" disabled={ !isHC } type="checkbox" onChange={ event => handleChange('hide_walls', event.target.checked) } />
-                        <Text small>{ LocalizeText('navigator.roomsettings.hide_walls') }</Text>
-                    </div>
-                    <select className="form-select form-select-sm" disabled={ !isHC } value={ roomData.wallThickness } onChange={ event => handleChange('wall_thickness', event.target.value) }>
-                        <option value="0">{ LocalizeText('navigator.roomsettings.wall_thickness.normal') }</option>
-                        <option value="1">{ LocalizeText('navigator.roomsettings.wall_thickness.thick') }</option>
-                        <option value="-1">{ LocalizeText('navigator.roomsettings.wall_thickness.thin') }</option>
-                        <option value="-2">{ LocalizeText('navigator.roomsettings.wall_thickness.thinnest') }</option>
-                    </select>
-                    <select className="form-select form-select-sm" disabled={ !isHC } value={ roomData.floorThickness } onChange={ event => handleChange('floor_thickness', event.target.value) }>
-                        <option value="0">{ LocalizeText('navigator.roomsettings.floor_thickness.normal') }</option>
-                        <option value="1">{ LocalizeText('navigator.roomsettings.floor_thickness.thick') }</option>
-                        <option value="-1">{ LocalizeText('navigator.roomsettings.floor_thickness.thin') }</option>
-                        <option value="-2">{ LocalizeText('navigator.roomsettings.floor_thickness.thinnest') }</option>
-                    </select>
+                    <NavigatorRoomSettingsSectionView title={ LocalizeText('navigator.roomsettings.vip_settings') } gap={ 1 } className="h-full">
+                        <div className="flex items-center gap-1">
+                            <input checked={ roomData.hideWalls } className="form-check-input" disabled={ !isHC } type="checkbox" onChange={ event => handleChange('hide_walls', event.target.checked) } />
+                            <Text small>{ LocalizeText('navigator.roomsettings.hide_walls') }</Text>
+                        </div>
+                        <select className="form-select form-select-sm" disabled={ !isHC } value={ roomData.wallThickness } onChange={ event => handleChange('wall_thickness', event.target.value) }>
+                            <option value="0">{ LocalizeText('navigator.roomsettings.wall_thickness.normal') }</option>
+                            <option value="1">{ LocalizeText('navigator.roomsettings.wall_thickness.thick') }</option>
+                            <option value="-1">{ LocalizeText('navigator.roomsettings.wall_thickness.thin') }</option>
+                            <option value="-2">{ LocalizeText('navigator.roomsettings.wall_thickness.thinnest') }</option>
+                        </select>
+                        <select className="form-select form-select-sm" disabled={ !isHC } value={ roomData.floorThickness } onChange={ event => handleChange('floor_thickness', event.target.value) }>
+                            <option value="0">{ LocalizeText('navigator.roomsettings.floor_thickness.normal') }</option>
+                            <option value="1">{ LocalizeText('navigator.roomsettings.floor_thickness.thick') }</option>
+                            <option value="-1">{ LocalizeText('navigator.roomsettings.floor_thickness.thin') }</option>
+                            <option value="-2">{ LocalizeText('navigator.roomsettings.floor_thickness.thinnest') }</option>
+                        </select>
+                    </NavigatorRoomSettingsSectionView>
                 </Column>
             </Grid>
         </>
diff --git a/src/components/navigator/views/search/NavigatorEmptyStateView.tsx b/src/components/navigator/views/search/NavigatorEmptyStateView.tsx
new file mode 100644
index 0000000..5eb3ed0
--- /dev/null
+++ b/src/components/navigator/views/search/NavigatorEmptyStateView.tsx
@@ -0,0 +1,33 @@
+import { FC } from 'react';
+import { FaPlus, FaSearch } from 'react-icons/fa';
+import { LocalizeText } from '../../../../api';
+import { Button } from '../../../../common';
+
+interface NavigatorEmptyStateViewProps
+{
+    code: string;
+    onCreateRoom: () => void;
+}
+
+export const NavigatorEmptyStateView: FC<NavigatorEmptyStateViewProps> = props =>
+{
+    const { code, onCreateRoom } = props;
+
+    const isMyWorld = (code === 'myworld_view');
+    const messageKey = isMyWorld ? 'navigator.roomsettings.moderation.none' : 'navigator.search.returned.no.results';
+
+    return (
+        <div className="flex flex-1 flex-col items-center justify-center gap-3 px-4 py-8 text-center">
+            <div className="flex h-16 w-16 items-center justify-center rounded-full bg-black/5 text-muted">
+                <FaSearch size={ 26 } className="opacity-40" />
+            </div>
+            <div className="text-sm text-muted max-w-[240px]">
+                { LocalizeText(messageKey) }
+            </div>
+            <Button variant="primary" onClick={ onCreateRoom }>
+                <FaPlus className="fa-icon me-1" />
+                { LocalizeText('navigator.createroom.create') }
+            </Button>
+        </div>
+    );
+};
diff --git a/src/components/navigator/views/search/NavigatorFilterChipsView.tsx b/src/components/navigator/views/search/NavigatorFilterChipsView.tsx
new file mode 100644
index 0000000..a78543f
--- /dev/null
+++ b/src/components/navigator/views/search/NavigatorFilterChipsView.tsx
@@ -0,0 +1,32 @@
+import { FC } from 'react';
+import { LocalizeText, SearchFilterOptions } from '../../../../api';
+
+interface NavigatorFilterChipsViewProps
+{
+    value: number;
+    onChange: (index: number) => void;
+}
+
+export const NavigatorFilterChipsView: FC<NavigatorFilterChipsViewProps> = props =>
+{
+    const { value, onChange } = props;
+
+    return (
+        <div className="flex flex-wrap gap-1">
+            { SearchFilterOptions.map((filter, index) =>
+            {
+                const isActive = (value === index);
+
+                return (
+                    <button
+                        key={ index }
+                        type="button"
+                        onClick={ () => onChange(index) }
+                        className={ `px-2 py-0.5 rounded-full text-[11px] border cursor-pointer transition-colors ${ isActive ? 'bg-primary text-white border-primary' : 'bg-card-grid-item text-gray-600 border-card-grid-item-border hover:bg-primary hover:text-white hover:border-primary' }` }>
+                        { LocalizeText('navigator.filter.' + filter.name) }
+                    </button>
+                );
+            }) }
+        </div>
+    );
+};
diff --git a/src/components/navigator/views/search/NavigatorSearchResultItemInfoView.tsx b/src/components/navigator/views/search/NavigatorSearchResultItemInfoView.tsx
index c60d21d..b5cc0e6 100644
--- a/src/components/navigator/views/search/NavigatorSearchResultItemInfoView.tsx
+++ b/src/components/navigator/views/search/NavigatorSearchResultItemInfoView.tsx
@@ -2,9 +2,9 @@ import { RoomDataParser, RoomSettingsComposer, UpdateHomeRoomMessageComposer } f
 import * as Popover from '@radix-ui/react-popover';
 import React, { FC, useRef, useState } from 'react';
 import { FaUser } from 'react-icons/fa';
-import { GetGroupInformation, GetSessionDataManager, GetUserProfile, LocalizeText, ReportType, SendMessageComposer, ToggleFavoriteRoom } from '../../../../api';
+import { GetGroupInformation, GetSessionDataManager, GetUserProfile, LocalizeText, ReportType, SendMessageComposer } from '../../../../api';
 import { Column, Flex, LayoutBadgeImageView, LayoutRoomThumbnailView, NitroCardContentView, Text, UserProfileIconView } from '../../../../common';
-import { useHelp, useNavigatorData } from '../../../../hooks';
+import { useHelp, useNavigatorData, useNavigatorFavourite } from '../../../../hooks';
 import { classNames } from '../../../../layout';
 
 interface NavigatorSearchResultItemInfoViewProps
@@ -20,7 +20,8 @@ export const NavigatorSearchResultItemInfoView: FC<NavigatorSearchResultItemInfo
     const { roomData = null, isVisible = undefined, onToggle, setIsPopoverActive } = props;
     const elementRef = useRef<HTMLDivElement>(null);
     const [ internalVisible, setInternalVisible ] = useState(false);
-    const { navigatorData, favouriteRoomIds } = useNavigatorData();
+    const { navigatorData } = useNavigatorData();
+    const { isFavourite, toggle: toggleFavourite } = useNavigatorFavourite(roomData?.roomId);
     const { report = null } = useHelp();
 
     const isControlled = isVisible !== undefined;
@@ -63,7 +64,7 @@ export const NavigatorSearchResultItemInfoView: FC<NavigatorSearchResultItemInfo
                 report(ReportType.ROOM, { roomId: roomData.roomId, roomName: roomData.roomName });
                 return;
             case 'room_favourite':
-                ToggleFavoriteRoom(roomData.roomId, favouriteRoomIds.includes(roomData.roomId));
+                toggleFavourite();
                 return;
         }
     };
@@ -163,7 +164,7 @@ export const NavigatorSearchResultItemInfoView: FC<NavigatorSearchResultItemInfo
                                 </Column>
                                 <Column alignItems="start" gap={ 2 } className="w-2/5">
                                     <Flex pointer alignItems="center" gap={ 2 } onClick={ () => processAction('room_favourite') }>
-                                        <i className={ classNames('icon icon-navigator-favorite-room', favouriteRoomIds.includes(roomData.roomId) ? 'active' : '') } />
+                                        <i className={ classNames('icon icon-navigator-favorite-room', isFavourite ? 'active' : '') } />
                                         <Text className="text-xs">{ LocalizeText('navigator.room.popup.room.info.favorite') }</Text>
                                     </Flex>
                                     <Flex pointer alignItems="center" gap={ 2 } onClick={ () => processAction('set_home_room') }>
diff --git a/src/components/navigator/views/search/NavigatorSearchSavesResultItemView.tsx b/src/components/navigator/views/search/NavigatorSearchSavesResultItemView.tsx
index 2c11dac..030ea36 100644
--- a/src/components/navigator/views/search/NavigatorSearchSavesResultItemView.tsx
+++ b/src/components/navigator/views/search/NavigatorSearchSavesResultItemView.tsx
@@ -1,5 +1,6 @@
 import { NavigatorDeleteSavedSearchComposer, NavigatorSavedSearch, NavigatorSearchComposer } from '@nitrots/nitro-renderer';
-import { FC, useState } from 'react';
+import { FC, MouseEvent } from 'react';
+import { FaBolt } from 'react-icons/fa';
 import { LocalizeText, SendMessageComposer } from '../../../../api';
 import { Flex, Text } from '../../../../common';
 
@@ -11,7 +12,6 @@ export interface NavigatorSearchSavesResultItemViewProps
 export const NavigatorSearchSavesResultItemView: FC<NavigatorSearchSavesResultItemViewProps> = props =>
 {
     const { search = null } = props;
-    const [ isHovered, setIsHovered ] = useState(false);
 
     const getResultTitle = () =>
     {
@@ -24,23 +24,33 @@ export const NavigatorSearchSavesResultItemView: FC<NavigatorSearchSavesResultIt
         return ('navigator.searchcode.title.' + name);
     };
 
+    const openSearch = () => SendMessageComposer(new NavigatorSearchComposer(search.code.split('.').reverse()[0], search.filter));
+
+    const deleteSearch = (event: MouseEvent) =>
+    {
+        event.stopPropagation();
+        SendMessageComposer(new NavigatorDeleteSavedSearchComposer(search.id));
+    };
+
     return (
-        <Flex grow pointer alignItems="center" gap={ 1 } onMouseEnter={ () => setIsHovered(true) } onMouseLeave={ () => setIsHovered(false) }>
-            { isHovered &&
-                <i
-                    className="nitro-icon icon-navigator-search-delete cursor-pointer flex-shrink-0"
-                    title={ LocalizeText('navigator.tooltip.remove.saved.search') }
-                    onClick={ () => SendMessageComposer(new NavigatorDeleteSavedSearchComposer(search.id)) }
-                /> }
-            <Text
-                small
-                pointer
-                variant="black"
-                title={ LocalizeText('navigator.tooltip.open.saved.search') }
-                onClick={ () => SendMessageComposer(new NavigatorSearchComposer(search.code.split('.').reverse()[0], search.filter)) }
-            >
+        <Flex
+            grow
+            pointer
+            alignItems="center"
+            gap={ 1 }
+            className="saved-search-row group px-1 py-0.5"
+            title={ LocalizeText('navigator.tooltip.open.saved.search') }
+            onClick={ openSearch }
+        >
+            <FaBolt className="text-orange-500 shrink-0 text-[10px]" />
+            <Text small pointer truncate variant="black" className="grow! min-w-0">
                 { LocalizeText(getResultTitle()) }
             </Text>
+            <i
+                className="nitro-icon icon-navigator-search-delete cursor-pointer flex-shrink-0 opacity-0 transition-opacity group-hover:opacity-100"
+                title={ LocalizeText('navigator.tooltip.remove.saved.search') }
+                onClick={ deleteSearch }
+            />
         </Flex>
     );
 };
diff --git a/src/components/navigator/views/search/NavigatorSearchSavesResultView.tsx b/src/components/navigator/views/search/NavigatorSearchSavesResultView.tsx
index 9fbc9fa..1dcfc59 100644
--- a/src/components/navigator/views/search/NavigatorSearchSavesResultView.tsx
+++ b/src/components/navigator/views/search/NavigatorSearchSavesResultView.tsx
@@ -15,16 +15,19 @@ export const NavigatorSearchSavesResultView: FC<NavigatorSearchSavesResultViewPr
     const { searches = [] } = props;
 
     return (
-        <Column className="nitro-navigator-search-saves-result min-w-[100px]">
-            <Flex className="rounded px-2 py-1 bg-orange-500" gap={ 1 } alignItems="center">
+        <Column className="nitro-navigator-search-saves-result h-full min-w-[100px] sm:w-[150px]" gap={ 1 }>
+            <Flex className="rounded px-2 py-1 bg-orange-500 shrink-0" gap={ 1 } alignItems="center">
                 <FaBolt color="white" />
-                <Text variant="white">{ LocalizeText('navigator.quick.links.title') }</Text>
+                <Text variant="white" truncate>{ LocalizeText('navigator.quick.links.title') }</Text>
             </Flex>
-            <Column className="p-1 overflow-x-hidden overflow-y-auto">
-                { (searches && searches.length > 0) &&
-                    searches.map((search: NavigatorSavedSearch) => (
+            <Column className="flex-1 min-h-0 p-1 overflow-x-hidden overflow-y-auto" gap={ 0 }>
+                { (searches && searches.length > 0)
+                    ? searches.map((search: NavigatorSavedSearch) => (
                         <NavigatorSearchSavesResultItemView key={ search.id } search={ search } />
-                    )) }
+                    ))
+                    : <Flex center className="py-4 opacity-30">
+                        <FaBolt className="text-orange-500" size={ 22 } />
+                    </Flex> }
             </Column>
         </Column>
     );
diff --git a/src/components/navigator/views/search/NavigatorSearchSkeletonView.tsx b/src/components/navigator/views/search/NavigatorSearchSkeletonView.tsx
new file mode 100644
index 0000000..95666d8
--- /dev/null
+++ b/src/components/navigator/views/search/NavigatorSearchSkeletonView.tsx
@@ -0,0 +1,25 @@
+import { FC } from 'react';
+
+interface NavigatorSearchSkeletonViewProps
+{
+    rows?: number;
+}
+
+export const NavigatorSearchSkeletonView: FC<NavigatorSearchSkeletonViewProps> = props =>
+{
+    const { rows = 5 } = props;
+
+    return (
+        <div className="flex flex-col gap-2" aria-hidden="true">
+            { Array.from({ length: rows }).map((_, index) =>
+                <div key={ index } className="nitro-card-panel flex items-center gap-2 px-2 py-2">
+                    <div className="h-10 w-10 shrink-0 rounded bg-black/10 animate-pulse" />
+                    <div className="flex flex-1 flex-col gap-1">
+                        <div className="h-3 w-1/2 rounded bg-black/10 animate-pulse" />
+                        <div className="h-2.5 w-1/3 rounded bg-black/10 animate-pulse" />
+                    </div>
+                    <div className="h-4 w-8 shrink-0 rounded bg-black/10 animate-pulse" />
+                </div>) }
+        </div>
+    );
+};
diff --git a/src/components/navigator/views/search/NavigatorSearchView.tsx b/src/components/navigator/views/search/NavigatorSearchView.tsx
index a6b3185..effcc68 100644
--- a/src/components/navigator/views/search/NavigatorSearchView.tsx
+++ b/src/components/navigator/views/search/NavigatorSearchView.tsx
@@ -1,15 +1,23 @@
-import { FC, KeyboardEvent, useEffect, useState } from 'react';
+import { NavigatorSearchResultSet } from '@nitrots/nitro-renderer';
+import { FC, useEffect, useRef, useState } from 'react';
 import { FaSearch } from 'react-icons/fa';
 import { INavigatorSearchFilter, LocalizeText, SearchFilterOptions } from '../../../../api';
 import { Button } from '../../../../common';
-import { useNavigatorData, useNavigatorSearch, useNavigatorUiStore } from '../../../../hooks';
+import { useNavigatorData, useNavigatorUiStore } from '../../../../hooks';
+import { NavigatorFilterChipsView } from './NavigatorFilterChipsView';
 
-export const NavigatorSearchView: FC<{}> = props =>
+interface NavigatorSearchViewProps
 {
+    searchResult: NavigatorSearchResultSet | null;
+}
+
+export const NavigatorSearchView: FC<NavigatorSearchViewProps> = props =>
+{
+    const { searchResult } = props;
     const [ searchFilterIndex, setSearchFilterIndex ] = useState(0);
     const [ inputText, setInputText ] = useState('');
+    const formRef = useRef<HTMLFormElement>(null);
     const { topLevelContext } = useNavigatorData();
-    const { searchResult } = useNavigatorSearch();
 
     // Sync the input text display when a server result arrives (e.g. on tab switch
     // or deep-link navigation that sets the filter through the store directly).
@@ -54,38 +62,27 @@ export const NavigatorSearchView: FC<{}> = props =>
         return () => clearTimeout(timer);
     }, [ inputText, searchFilterIndex ]);
 
-    const processSearch = () =>
+    // React 19 form action — fires on Enter or the submit button, skipping the
+    // debounce timer for an immediate search.
+    const submitSearch = (formData: FormData) =>
     {
         if(!topLevelContext) return;
-        // Immediate submit — skip the debounce timer
+        const raw = formData.get('q');
+        const value = (typeof raw === 'string') ? raw : inputText;
         const searchFilter = SearchFilterOptions[searchFilterIndex] ?? SearchFilterOptions[0];
-        const searchQuery = (searchFilter.query ? (searchFilter.query + ':') : '') + inputText;
+        const searchQuery = (searchFilter.query ? (searchFilter.query + ':') : '') + value;
         useNavigatorUiStore.getState().setFilter(searchQuery);
     };
 
-    const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) =>
-    {
-        if(event.key !== 'Enter') return;
-
-        processSearch();
-    };
-
     return (
-        <div className="flex w-full gap-1">
-            <div className="flex shrink-0">
-                <select className="form-select" value={ searchFilterIndex } onChange={ event => setSearchFilterIndex(parseInt(event.target.value)) }>
-                    { SearchFilterOptions.map((filter, index) =>
-                    {
-                        return <option key={ index } value={ index }>{ LocalizeText('navigator.filter.' + filter.name) }</option>;
-                    }) }
-                </select>
-            </div>
-            <div className="flex w-full gap-1">
-                <input className="w-full form-control" placeholder={ LocalizeText('navigator.filter.input.placeholder') } type="text" value={ inputText } onChange={ event => setInputText(event.target.value) } onKeyDown={ event => handleKeyDown(event) } />
-                <Button variant="primary" onClick={ processSearch }>
+        <div className="flex w-full flex-col gap-1">
+            <NavigatorFilterChipsView value={ searchFilterIndex } onChange={ setSearchFilterIndex } />
+            <form ref={ formRef } action={ submitSearch } className="flex w-full gap-1">
+                <input className="w-full form-control" name="q" placeholder={ LocalizeText('navigator.filter.input.placeholder') } type="text" value={ inputText } onChange={ event => setInputText(event.target.value) } />
+                <Button variant="primary" onClick={ () => formRef.current?.requestSubmit() }>
                     <FaSearch className="fa-icon" />
                 </Button>
-            </div>
+            </form>
         </div>
     );
 };
diff --git a/src/components/notification-center/views/alert-layouts/NotificationDefaultAlertView.tsx b/src/components/notification-center/views/alert-layouts/NotificationDefaultAlertView.tsx
index d9905e6..14c289d 100644
--- a/src/components/notification-center/views/alert-layouts/NotificationDefaultAlertView.tsx
+++ b/src/components/notification-center/views/alert-layouts/NotificationDefaultAlertView.tsx
@@ -1,5 +1,5 @@
-import { FC, useState } from 'react';
-import { LocalizeText, NotificationAlertItem, NotificationAlertType, OpenUrl } from '../../../../api';
+import { FC, useMemo, useState } from 'react';
+import { DispatchUiEvent, LocalizeText, NotificationAlertItem, NotificationAlertType, OpenUrl, RoomWidgetUpdateChatInputContentEvent } from '../../../../api';
 import { Button, Column, Flex, LayoutNotificationAlertView, LayoutNotificationAlertViewProps } from '../../../../common';
 
 interface NotificationDefaultAlertViewProps extends LayoutNotificationAlertViewProps
@@ -7,11 +7,57 @@ interface NotificationDefaultAlertViewProps extends LayoutNotificationAlertViewP
     item: NotificationAlertItem;
 }
 
+const COMMAND_LINE_PATTERN = /^\s*:[\w.-]+(?:\s.*)?$/;
+
+interface CommandTemplateEntry
+{
+    command: string;
+    description: string;
+}
+
 export const NotificationDefaultAlertView: FC<NotificationDefaultAlertViewProps> = props =>
 {
-    const { item = null, title = ((props.item && props.item.title) || ''), onClose = null, ...rest } = props;
+    const { item = null, title = ((props.item && props.item.title) || ''), onClose = null, classNames = [], ...rest } = props;
     const [ imageFailed, setImageFailed ] = useState<boolean>(false);
 
+    const alertLines = useMemo(() => item.messages.flatMap(message => message.split(/\r\n|\r|\n/g)), [ item.messages ]);
+    const hasCommandTemplate = useMemo(() =>
+    {
+        const commandLines = alertLines.filter(line => COMMAND_LINE_PATTERN.test(line));
+
+        return commandLines.length >= 4 || alertLines.some(line => /^Your Commands\(\d+\):?/i.test(line.trim()));
+    }, [ alertLines ]);
+    const commandTemplateContent = useMemo(() =>
+    {
+        const intro: string[] = [];
+        const commands: CommandTemplateEntry[] = [];
+
+        for(const rawLine of alertLines)
+        {
+            const text = rawLine.trim();
+
+            if(!text.length) continue;
+
+            if(COMMAND_LINE_PATTERN.test(text))
+            {
+                commands.push({ command: text, description: '' });
+                continue;
+            }
+
+            if(commands.length)
+            {
+                const lastCommand = commands[commands.length - 1];
+
+                lastCommand.description = lastCommand.description ? `${ lastCommand.description } ${ text }` : text;
+                continue;
+            }
+
+            intro.push(text);
+        }
+
+        return { intro, commands };
+    }, [ alertLines ]);
+
     const visitUrl = () =>
     {
         OpenUrl(item.clickUrl);
@@ -19,10 +65,18 @@ export const NotificationDefaultAlertView: FC<NotificationDefaultAlertViewProps>
         onClose();
     };
 
+    const copyCommandToChatInput = (command: string) =>
+    {
+        const chatValue = command.endsWith(' ') ? command : `${ command } `;
+
+        DispatchUiEvent(new RoomWidgetUpdateChatInputContentEvent(RoomWidgetUpdateChatInputContentEvent.TEXT, chatValue));
+    };
+
     const hasFrank = (item.alertType === NotificationAlertType.DEFAULT);
+    const alertClassNames = hasCommandTemplate ? [ ...classNames, 'nitro-alert-command-list' ] : classNames;
 
     return (
-        <LayoutNotificationAlertView title={ title } onClose={ onClose } { ...rest } type={ hasFrank ? NotificationAlertType.DEFAULT : item.alertType }>
+        <LayoutNotificationAlertView title={ title } onClose={ onClose } classNames={ alertClassNames } { ...rest } type={ hasFrank ? NotificationAlertType.DEFAULT : item.alertType }>
             <Flex fullHeight gap={ hasFrank || (item.imageUrl && !imageFailed) ? 2 : 0 } overflow="auto">
                 { hasFrank && !item.imageUrl && <div className="notification-frank shrink-0" /> }
                 { item.imageUrl && !imageFailed && <img alt={ item.title } className="align-self-baseline" src={ item.imageUrl } onError={ () =>
@@ -30,7 +84,16 @@ export const NotificationDefaultAlertView: FC<NotificationDefaultAlertViewProps>
                     setImageFailed(true);
                 } } /> }
                 <div className={ [ 'notification-text overflow-y-auto flex flex-col w-full', (item.clickUrl && !hasFrank) ? 'justify-center' : '' ].join(' ') }>
-                    { (item.messages.length > 0) && item.messages.map((message, index) =>
+                    { hasCommandTemplate && <div className="notification-command-template">
+                        { commandTemplateContent.intro.map((text, index) =>
+                            <div key={ index } className={ index === 0 ? 'notification-command-heading' : 'notification-command-copy' }>{ text }</div>) }
+                        { commandTemplateContent.commands.map((entry, index) =>
+                            <button key={ `${ entry.command }-${ index }` } className="notification-command-row" type="button" onClick={ () => copyCommandToChatInput(entry.command) }>
+                                <span className="notification-command-name">{ entry.command }</span>
+                                { entry.description && <span className="notification-command-description">{ entry.description }</span> }
+                            </button>) }
+                    </div> }
+                    { !hasCommandTemplate && (item.messages.length > 0) && item.messages.map((message, index) =>
                     {
                         const htmlText = message.replace(/\r\n|\r|\n/g, '<br />');
 
diff --git a/src/components/room/widgets/chat-input/ChatInputCommandSelectorView.tsx b/src/components/room/widgets/chat-input/ChatInputCommandSelectorView.tsx
index 5eae3d2..d3e0eae 100644
--- a/src/components/room/widgets/chat-input/ChatInputCommandSelectorView.tsx
+++ b/src/components/room/widgets/chat-input/ChatInputCommandSelectorView.tsx
@@ -1,9 +1,10 @@
 import { FC, useEffect, useRef } from 'react';
-import { CommandDefinition } from '../../../../api';
+import type { CommandDefinition } from '../../../../api';
+import type { RankedCommandDefinition } from '../../../../hooks/rooms/widgets/useChatCommandSelector.helpers';
 
 interface ChatInputCommandSelectorViewProps
 {
-    commands: CommandDefinition[];
+    commands: RankedCommandDefinition[];
     selectedIndex: number;
     onSelect: (command: CommandDefinition) => void;
     onHover: (index: number) => void;
@@ -24,17 +25,18 @@ export const ChatInputCommandSelectorView: FC<ChatInputCommandSelectorViewProps>
     }, [ selectedIndex ]);
 
     return (
-        <div ref={ listRef } className="absolute bottom-full left-0 w-full bg-[#e8e8e8] border-2 border-black border-b-0 rounded-t-lg max-h-[240px] overflow-y-auto z-[1070]">
+        <div ref={ listRef } className="absolute bottom-full left-0 z-[1070] max-h-[238px] w-full overflow-y-auto rounded-t-[8px] border-2 border-b-0 border-black bg-[#f2f2eb] shadow-[0_-4px_14px_rgba(0,0,0,0.22)]">
             { commands.map((cmd, index) => (
-                <div
+                <button
                     key={ cmd.key }
-                    className={ `px-3 py-1.5 cursor-pointer text-sm flex items-center gap-2 ${ index === selectedIndex ? 'bg-[#283F5D] text-white' : 'hover:bg-gray-300' }` }
+                    className={ `flex min-h-[34px] w-full cursor-pointer items-center gap-2 border-b border-[#c6c6bd] px-3 py-1.5 text-left last:border-b-0 ${ index === selectedIndex ? 'bg-[#255d72] text-white' : 'text-black hover:bg-[#dceaf0]' }` }
+                    type="button"
                     onClick={ () => onSelect(cmd) }
                     onMouseEnter={ () => onHover(index) }
                 >
-                    <span className="font-bold">:{ cmd.key }</span>
-                    <span className={ `text-xs ${ index === selectedIndex ? 'text-gray-300' : 'text-gray-500' }` }>{ cmd.description }</span>
-                </div>
+                    <span className={ `shrink-0 rounded-[4px] border px-1.5 py-[1px] font-bold ${ index === selectedIndex ? 'border-white/60 bg-white/15' : 'border-[#8ca6b1] bg-white text-[#123b4c]' }` }>:{ cmd.key }</span>
+                    <span className={ `min-w-0 flex-1 truncate text-[12px] ${ index === selectedIndex ? 'text-white/85' : 'text-[#525252]' }` }>{ cmd.description }</span>
+                </button>
             )) }
         </div>
     );
diff --git a/src/components/room/widgets/chat-input/ChatInputView.tsx b/src/components/room/widgets/chat-input/ChatInputView.tsx
index 9aa9491..9bfc9b6 100644
--- a/src/components/room/widgets/chat-input/ChatInputView.tsx
+++ b/src/components/room/widgets/chat-input/ChatInputView.tsx
@@ -8,7 +8,7 @@ import { ChatInputCommandSelectorView } from './ChatInputCommandSelectorView';
 import { ChatInputEmojiSelectorView } from './ChatInputEmojiSelectorView';
 import { ChatInputStyleSelectorView } from './ChatInputStyleSelectorView';
 
-export const ChatInputView: FC<{}> = props =>
+export const ChatInputView: FC = () =>
 {
     const [ chatValue, setChatValue ] = useState<string>('');
     const { chatStyleId = 0, updateChatStyleId = null } = useSessionInfo();
@@ -42,6 +42,23 @@ export const ChatInputView: FC<{}> = props =>
         inputRef.current.setSelectionRange((inputRef.current.value.length * 2), (inputRef.current.value.length * 2));
     }, [ inputRef ]);
 
+    const setChatInputValue = useCallback((value: string, markTyping: boolean = true) =>
+    {
+        setChatValue(value);
+
+        if(markTyping)
+        {
+            setIsTyping(!!value.length);
+            setIsIdle(!!value.length);
+        }
+
+        requestAnimationFrame(() =>
+        {
+            inputRef.current?.focus();
+            inputRef.current?.setSelectionRange(value.length, value.length);
+        });
+    }, [ setIsTyping, setIsIdle ]);
+
     const checkSpecialKeywordForInput = useCallback(() =>
     {
         setChatValue(prevValue =>
@@ -157,7 +174,7 @@ export const ChatInputView: FC<{}> = props =>
                     if(selected)
                     {
                         event.preventDefault();
-                        setChatValue(':' + selected.key + ' ');
+                        setChatInputValue(':' + selected.key + ' ');
                         return;
                     }
                     break;
@@ -194,12 +211,15 @@ export const ChatInputView: FC<{}> = props =>
                 return;
         }
 
-    }, [ floodBlocked, inputRef, chatModeIdWhisper, anotherInputHasFocus, setInputFocus, checkSpecialKeywordForInput, sendChatValue, commandSelectorVisible, moveUp, moveDown, selectCurrent, closeCommandSelector ]);
+    }, [ floodBlocked, inputRef, chatModeIdWhisper, anotherInputHasFocus, setInputFocus, checkSpecialKeywordForInput, sendChatValue, commandSelectorVisible, moveUp, moveDown, selectCurrent, setChatInputValue, closeCommandSelector ]);
 
     useUiEvent<RoomWidgetUpdateChatInputContentEvent>(RoomWidgetUpdateChatInputContentEvent.CHAT_INPUT_CONTENT, event =>
     {
         switch(event.chatMode)
         {
+            case RoomWidgetUpdateChatInputContentEvent.TEXT:
+                setChatInputValue(event.userName);
+                return;
             case RoomWidgetUpdateChatInputContentEvent.WHISPER: {
                 setChatValue(`${ chatModeIdWhisper } ${ event.userName } `);
                 return;
@@ -286,7 +306,7 @@ export const ChatInputView: FC<{}> = props =>
                         selectedIndex={ selectedIndex }
                         onSelect={ (cmd) =>
                         {
-                            setChatValue(':' + cmd.key + ' '); inputRef.current?.focus();
+                            setChatInputValue(':' + cmd.key + ' ');
                         } }
                         onHover={ setSelectedIndex }
                     /> }
diff --git a/src/components/soundboard/SoundboardView.tsx b/src/components/soundboard/SoundboardView.tsx
index 76d7a80..a3ecf40 100644
--- a/src/components/soundboard/SoundboardView.tsx
+++ b/src/components/soundboard/SoundboardView.tsx
@@ -10,6 +10,18 @@ export const SoundboardView: FC<{}> = () =>
     const [ isVisible, setIsVisible ] = useState(false);
     const { enabled, sounds, lastPlayed, play } = useSoundboard();
 
+    const PAGE_SIZE = 9;
+    const [ page, setPage ] = useState(0);
+    const totalPages = Math.max(1, Math.ceil(sounds.length / PAGE_SIZE));
+
+    // Clamp the page if the sound list shrinks (or on first load).
+    useEffect(() =>
+    {
+        if(page > (totalPages - 1)) setPage(0);
+    }, [ totalPages, page ]);
+
+    const pageSounds = sounds.slice(page * PAGE_SIZE, (page * PAGE_SIZE) + PAGE_SIZE);
+
     useEffect(() =>
     {
         const linkTracker: ILinkEventTracker = {
@@ -49,18 +61,32 @@ export const SoundboardView: FC<{}> = () =>
                     { !sounds.length &&
                         <Text small className="text-black/50">{ LocalizeText('soundboard.empty') }</Text> }
                     { !!sounds.length &&
-                        <div className="grid grid-cols-3 gap-2">
-                            { sounds.map(sound => (
-                                <button
-                                    key={ sound.id }
-                                    onClick={ () => play(sound) }
-                                    title={ sound.name }
-                                    className="flex h-20 cursor-pointer flex-col items-center justify-center gap-1 rounded-lg bg-[#3a7bb5] px-2 text-white shadow transition-transform hover:bg-[#336ea3] active:scale-95">
-                                    <span className="text-2xl leading-none">🔊</span>
-                                    <span className="line-clamp-2 text-center text-[11px] font-bold leading-tight">{ sound.name }</span>
-                                </button>
-                            )) }
-                        </div> }
+                        <>
+                            <div className="grid grid-cols-3 gap-2">
+                                { pageSounds.map(sound => (
+                                    <button
+                                        key={ sound.id }
+                                        onClick={ () => play(sound) }
+                                        title={ sound.name }
+                                        className="flex h-20 cursor-pointer flex-col items-center justify-center gap-1 rounded-lg bg-[#3a7bb5] px-2 text-white shadow transition-transform hover:bg-[#336ea3] active:scale-95">
+                                        <span className="text-2xl leading-none">🔊</span>
+                                        <span className="line-clamp-2 text-center text-[11px] font-bold leading-tight">{ sound.name }</span>
+                                    </button>
+                                )) }
+                            </div>
+                            { totalPages > 1 &&
+                                <Flex alignItems="center" justifyContent="center" gap={ 2 } className="select-none pt-1">
+                                    <button
+                                        disabled={ page === 0 }
+                                        onClick={ () => setPage(p => Math.max(0, p - 1)) }
+                                        className="cursor-pointer rounded bg-[#3a7bb5] px-3 py-1 text-sm font-bold text-white hover:bg-[#336ea3] disabled:cursor-default disabled:opacity-40">◀</button>
+                                    <Text small bold className="min-w-[44px] text-center text-[#2f6f95]">{ page + 1 } / { totalPages }</Text>
+                                    <button
+                                        disabled={ page >= (totalPages - 1) }
+                                        onClick={ () => setPage(p => Math.min(totalPages - 1, p + 1)) }
+                                        className="cursor-pointer rounded bg-[#3a7bb5] px-3 py-1 text-sm font-bold text-white hover:bg-[#336ea3] disabled:cursor-default disabled:opacity-40">▶</button>
+                                </Flex> }
+                        </> }
                     { lastPlayed &&
                         <Flex alignItems="center" justifyContent="center" className="pt-1">
                             <Text small className="text-[#2f6f95]">
diff --git a/src/components/theme/ThemeApplier.tsx b/src/components/theme/ThemeApplier.tsx
new file mode 100644
index 0000000..1f02ed1
--- /dev/null
+++ b/src/components/theme/ThemeApplier.tsx
@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import { useThemes } from '../../hooks';
+
+// Mounted once at app level: subscribing to the shared theme store triggers the
+// load + apply effects, so the saved/default custom theme is applied on boot
+// and kept in sync when the user changes it from Settings. Renders nothing.
+export const ThemeApplier: FC<{}> = () =>
+{
+    useThemes();
+
+    return null;
+};
diff --git a/src/components/toolbar/ToolbarMeView.tsx b/src/components/toolbar/ToolbarMeView.tsx
index db50105..5084ef7 100644
--- a/src/components/toolbar/ToolbarMeView.tsx
+++ b/src/components/toolbar/ToolbarMeView.tsx
@@ -1,4 +1,4 @@
-import { CreateLinkEvent, GetRoomEngine, GetSessionDataManager, MouseEventType, RoomObjectCategory } from '@nitrots/nitro-renderer';
+import { CreateLinkEvent, GetRoomEngine, GetSessionDataManager, RoomObjectCategory } from '@nitrots/nitro-renderer';
 import { Dispatch, FC, PropsWithChildren, SetStateAction, useEffect, useRef } from 'react';
 import { DispatchUiEvent, GetConfigurationValue, GetRoomSession, GetUserProfile, LocalizeText } from '../../api';
 import { Flex, LayoutItemCountView } from '../../common';
@@ -24,11 +24,20 @@ export const ToolbarMeView: FC<PropsWithChildren<{
 
     useEffect(() =>
     {
-        const onClick = (event: MouseEvent) => setMeExpanded(false);
+        const onClick = (event: MouseEvent) =>
+        {
+            if(elementRef.current && elementRef.current.contains(event.target as Node)) return;
 
-        document.addEventListener('click', onClick);
+            setMeExpanded(false);
+        };
 
-        return () => document.removeEventListener(MouseEventType.MOUSE_CLICK, onClick);
+        const timeout = window.setTimeout(() => document.addEventListener('click', onClick), 0);
+
+        return () =>
+        {
+            window.clearTimeout(timeout);
+            document.removeEventListener('click', onClick);
+        };
     }, [ setMeExpanded ]);
 
     return (
diff --git a/src/components/toolbar/ToolbarView.tsx b/src/components/toolbar/ToolbarView.tsx
index 2c2dd26..a2124fd 100644
--- a/src/components/toolbar/ToolbarView.tsx
+++ b/src/components/toolbar/ToolbarView.tsx
@@ -372,7 +372,7 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
                                     animate={ { opacity: 1, y: 0, scale: 1 } }
                                     exit={ { opacity: 0, y: 6, scale: 0.97 } }
                                     transition={ ME_POPOVER_TRANSITION }
-                                    className="pointer-events-auto absolute bottom-[calc(100%+10px)] left-1/2 z-[70] -translate-x-1/2">
+                                    className="pointer-events-auto fixed bottom-[calc(100%+10px)] left-1/2 z-[70] -translate-x-1/2">
                                     <ToolbarMeView setMeExpanded={ setMeExpanded } unseenAchievementCount={ getTotalUnseen } useGuideTool={ useGuideTool } />
                                 </motion.div> }
                         </AnimatePresence>
diff --git a/src/components/user-profile/GroupsContainerView.tsx b/src/components/user-profile/GroupsContainerView.tsx
index b4e75a9..43181a2 100644
--- a/src/components/user-profile/GroupsContainerView.tsx
+++ b/src/components/user-profile/GroupsContainerView.tsx
@@ -1,6 +1,6 @@
 import { GroupInformationComposer, GroupInformationEvent, GroupInformationParser, HabboGroupEntryData } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
-import { LocalizeText, SendMessageComposer, ToggleFavoriteGroup } from '../../api';
+import { LocalizeText, SanitizeHtml, SendMessageComposer, ToggleFavoriteGroup } from '../../api';
 import { Column, GridProps, LayoutBadgeImageView, LayoutGridItem } from '../../common';
 import { useMessageEvent } from '../../hooks';
 import { GroupInformationView } from '../groups/views/GroupInformationView';
@@ -68,9 +68,7 @@ export const GroupsContainerView: FC<GroupsContainerViewProps> = props =>
     return (
         <div className="nitro-extended-profile-groups">
             <div className="nitro-extended-profile-groups__sidebar">
-                <div className="nitro-extended-profile-groups__count">
-                    { LocalizeText('extendedprofile.groups.count', [ 'count' ], [ groups.length.toString() ]) }
-                </div>
+                <div className="nitro-extended-profile-groups__count" dangerouslySetInnerHTML={ { __html: SanitizeHtml(LocalizeText('extendedprofile.groups.count', [ 'count' ], [ groups.length.toString() ])) } } />
                 <div className="nitro-extended-profile-groups__list">
                     { groups.map((group, index) =>
                     {
diff --git a/src/components/user-profile/UserContainerView.tsx b/src/components/user-profile/UserContainerView.tsx
index e4e6b43..1e60e39 100644
--- a/src/components/user-profile/UserContainerView.tsx
+++ b/src/components/user-profile/UserContainerView.tsx
@@ -1,6 +1,6 @@
 import { CreateLinkEvent, GetSessionDataManager, RelationshipStatusInfoMessageParser, RequestFriendComposer, UserProfileParser } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useMemo, useState } from 'react';
-import { FriendlyTime, LocalizeText, SendMessageComposer } from '../../api';
+import { FriendlyTime, LocalizeText, SanitizeHtml, SendMessageComposer } from '../../api';
 import { LayoutAvatarImageView, LayoutBadgeImageView, Text, UserIdentityView } from '../../common';
 import { badgeEmblemDefault } from '../../assets/images/leaderboard_badge';
 import { level as profileLevelIcon, rooms as profileRoomsIcon } from '../../assets/images/user-profile';
@@ -61,10 +61,10 @@ export const UserContainerView: FC<UserContainerViewProps> = props =>
                                 username={ userProfile.username } />
                             <p className="nitro-extended-profile__motto">{ userProfile.motto || '\u00A0' }</p>
                             <p className="nitro-extended-profile__meta">
-                                <b>{ LocalizeText('extendedprofile.created').replace(/%\w+%/g, '').trim() }</b> { userProfile.registration }
+                                <span dangerouslySetInnerHTML={ { __html: SanitizeHtml(LocalizeText('extendedprofile.created').replace(/%\w+%/g, '').trim()) } } /> { userProfile.registration }
                             </p>
                             <p className="nitro-extended-profile__meta">
-                                <b>{ LocalizeText('extendedprofile.last.login').replace(/%\w+%/g, '').trim() }</b> { FriendlyTime.format(userProfile.secondsSinceLastVisit, '.ago', 2) }
+                                <span dangerouslySetInnerHTML={ { __html: SanitizeHtml(LocalizeText('extendedprofile.last.login').replace(/%\w+%/g, '').trim()) } } /> { FriendlyTime.format(userProfile.secondsSinceLastVisit, '.ago', 2) }
                             </p>
                             <p className="nitro-extended-profile__meta nitro-extended-profile__meta--strong">
                                 <b>{ LocalizeText('extendedprofile.achievementscore') }</b> { userProfile.achievementPoints }
@@ -117,11 +117,11 @@ export const UserContainerView: FC<UserContainerViewProps> = props =>
                     <p
                         className="text-sm leading-none"
                         dangerouslySetInnerHTML={{
-                            __html: LocalizeText(
+                            __html: SanitizeHtml(LocalizeText(
                                 'extendedprofile.friends.count',
                                 ['count'],
                                 [userProfile.friendsCount.toString()]
-                            )
+                            ))
                         }}
                     />
                     <p className="nitro-extended-profile__relationships-label">{ LocalizeText('extendedprofile.relstatus') }</p>
diff --git a/src/components/user-profile/UserProfileView.tsx b/src/components/user-profile/UserProfileView.tsx
index 801fd4d..cf51142 100644
--- a/src/components/user-profile/UserProfileView.tsx
+++ b/src/components/user-profile/UserProfileView.tsx
@@ -30,8 +30,6 @@ export const UserProfileView: FC<{}> = () =>
     {
         if(!userProfile) return;
 
-        // Open the navigator AND run the owner search (the composer alone never
-        // showed the navigator window, so the button looked dead).
         CreateLinkEvent(`navigator/search/hotel_view/owner:${ userProfile.username }`);
     };
 
@@ -100,12 +98,15 @@ export const UserProfileView: FC<{}> = () =>
 
     if(!userProfile) return null;
 
+    const cardBackgroundId = userProfile.cardBackgroundId ?? 0;
+    const cardBackgroundClass = cardBackgroundId ? `profile-card-background card-background-${ cardBackgroundId }` : '';
+
     return (
-        <NitroCard className="nitro-extended-profile-window w-[600px] h-[600px] max-w-[96vw] max-h-[92vh]" uniqueKey="nitro-user-profile">
+        <NitroCard className="nitro-extended-profile-window w-[640px] h-[720px] max-w-[96vw] max-h-[92vh]" uniqueKey="nitro-user-profile">
             <NitroCard.Header
                 headerText={ LocalizeText('extendedprofile.caption') }
                 onCloseClick={ onClose } />
-            <NitroCard.Content className="nitro-extended-profile-window__content overflow-hidden !p-0 flex flex-col">
+            <NitroCard.Content className={ `nitro-extended-profile-window__content overflow-hidden !p-0 flex flex-col ${ cardBackgroundClass }` }>
                 <div className="px-[10px] pt-[8px]">
                     <UserContainerView
                         userBadges={ userBadges }
diff --git a/src/components/user-settings/UserAccountSettingsView.tsx b/src/components/user-settings/UserAccountSettingsView.tsx
index c834ba2..68678ab 100644
--- a/src/components/user-settings/UserAccountSettingsView.tsx
+++ b/src/components/user-settings/UserAccountSettingsView.tsx
@@ -1,7 +1,7 @@
 import { AddLinkEventTracker, GetSessionDataManager, ILinkEventTracker, RemoveLinkEventTracker } from '@nitrots/nitro-renderer';
 import { FC, KeyboardEvent, useEffect, useMemo, useState } from 'react';
 import { FaArrowLeft, FaCheckCircle, FaChevronRight, FaEnvelope, FaExclamationTriangle, FaEye, FaEyeSlash, FaIdBadge, FaInfoCircle, FaKey, FaShieldAlt, FaUserCog } from 'react-icons/fa';
-import { GetConfigurationValue, getAccessToken } from '../../api';
+import { GetConfigurationValue, LocalizeText, getAccessToken } from '../../api';
 import { Button, LayoutAvatarImageView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../common';
 
 const MIN_PASSWORD_LENGTH = 8;
@@ -17,9 +17,9 @@ const MAX_USERNAME_LENGTH = 25;
 type FeedbackKind = 'error' | 'success';
 type Section = 'menu' | 'password' | 'email' | 'username';
 
-const passwordStrength = (value: string): { score: number; label: string; color: string } =>
+const passwordStrength = (value: string): { score: number; labelKey: string; color: string } =>
 {
-    if(!value) return { score: 0, label: '', color: 'bg-black/10' };
+    if(!value) return { score: 0, labelKey: '', color: 'bg-black/10' };
 
     let score = 0;
     if(value.length >= MIN_PASSWORD_LENGTH) score++;
@@ -28,10 +28,10 @@ const passwordStrength = (value: string): { score: number; label: string; color:
     if(/\d/.test(value)) score++;
     if(/[^A-Za-z0-9]/.test(value)) score++;
 
-    if(score <= 1) return { score: 1, label: 'Weak', color: 'bg-[#a81a12]' };
-    if(score === 2) return { score: 2, label: 'Fair', color: 'bg-[#ffc107]' };
-    if(score === 3) return { score: 3, label: 'Good', color: 'bg-[#1e7295]' };
-    return { score: 4, label: 'Strong', color: 'bg-[#00800b]' };
+    if(score <= 1) return { score: 1, labelKey: 'usersettings.strength.weak', color: 'bg-[#a81a12]' };
+    if(score === 2) return { score: 2, labelKey: 'usersettings.strength.fair', color: 'bg-[#ffc107]' };
+    if(score === 3) return { score: 3, labelKey: 'usersettings.strength.good', color: 'bg-[#1e7295]' };
+    return { score: 4, labelKey: 'usersettings.strength.strong', color: 'bg-[#00800b]' };
 };
 
 export const UserAccountSettingsView: FC<{}> = () =>
@@ -131,38 +131,38 @@ export const UserAccountSettingsView: FC<{}> = () =>
 
         if(!currentPassword || !newPassword || !confirmPassword)
         {
-            setFeedback({ kind: 'error', message: 'All fields are required.' });
+            setFeedback({ kind: 'error', message: LocalizeText('usersettings.error.fields_required') });
             return;
         }
 
         if(newPassword.length < MIN_PASSWORD_LENGTH)
         {
-            setFeedback({ kind: 'error', message: `Password must be at least ${ MIN_PASSWORD_LENGTH } characters.` });
+            setFeedback({ kind: 'error', message: LocalizeText('usersettings.error.password_min', [ 'count' ], [ MIN_PASSWORD_LENGTH.toString() ]) });
             return;
         }
 
         if(newPassword.length > MAX_PASSWORD_LENGTH)
         {
-            setFeedback({ kind: 'error', message: 'Password is too long.' });
+            setFeedback({ kind: 'error', message: LocalizeText('usersettings.error.password_long') });
             return;
         }
 
         if(newPassword !== confirmPassword)
         {
-            setFeedback({ kind: 'error', message: 'New passwords do not match.' });
+            setFeedback({ kind: 'error', message: LocalizeText('usersettings.error.password_mismatch') });
             return;
         }
 
         if(newPassword === currentPassword)
         {
-            setFeedback({ kind: 'error', message: 'New password must be different from the current password.' });
+            setFeedback({ kind: 'error', message: LocalizeText('usersettings.error.password_same') });
             return;
         }
 
         const token = getAccessToken();
         if(!token)
         {
-            setFeedback({ kind: 'error', message: 'You are not authenticated. Please log in again.' });
+            setFeedback({ kind: 'error', message: LocalizeText('usersettings.error.not_authenticated') });
             return;
         }
 
@@ -191,14 +191,14 @@ export const UserAccountSettingsView: FC<{}> = () =>
             {
                 const message = typeof payload.error === 'string' && payload.error
                     ? payload.error
-                    : `Request failed (${ response.status }).`;
+                    : LocalizeText('usersettings.error.request_failed', [ 'status' ], [ response.status.toString() ]);
                 setFeedback({ kind: 'error', message });
                 return;
             }
 
             const message = typeof payload.message === 'string' && payload.message
                 ? payload.message
-                : 'Password updated successfully.';
+                : LocalizeText('usersettings.success.password');
             setFeedback({ kind: 'success', message });
             setCurrentPassword('');
             setNewPassword('');
@@ -208,7 +208,7 @@ export const UserAccountSettingsView: FC<{}> = () =>
         }
         catch
         {
-            setFeedback({ kind: 'error', message: 'Could not reach the server. Please try again.' });
+            setFeedback({ kind: 'error', message: LocalizeText('usersettings.error.network') });
         }
         finally
         {
@@ -224,26 +224,26 @@ export const UserAccountSettingsView: FC<{}> = () =>
 
         if(!emailCurrentPassword || !newEmail)
         {
-            setFeedback({ kind: 'error', message: 'All fields are required.' });
+            setFeedback({ kind: 'error', message: LocalizeText('usersettings.error.fields_required') });
             return;
         }
 
         if(newEmail.length > MAX_EMAIL_LENGTH)
         {
-            setFeedback({ kind: 'error', message: 'Email address is too long.' });
+            setFeedback({ kind: 'error', message: LocalizeText('usersettings.error.email_long') });
             return;
         }
 
         if(!EMAIL_RE.test(newEmail))
         {
-            setFeedback({ kind: 'error', message: 'Please enter a valid email address.' });
+            setFeedback({ kind: 'error', message: LocalizeText('usersettings.error.email_invalid') });
             return;
         }
 
         const token = getAccessToken();
         if(!token)
         {
-            setFeedback({ kind: 'error', message: 'You are not authenticated. Please log in again.' });
+            setFeedback({ kind: 'error', message: LocalizeText('usersettings.error.not_authenticated') });
             return;
         }
 
@@ -272,14 +272,14 @@ export const UserAccountSettingsView: FC<{}> = () =>
             {
                 const message = typeof payload.error === 'string' && payload.error
                     ? payload.error
-                    : `Request failed (${ response.status }).`;
+                    : LocalizeText('usersettings.error.request_failed', [ 'status' ], [ response.status.toString() ]);
                 setFeedback({ kind: 'error', message });
                 return;
             }
 
             const message = typeof payload.message === 'string' && payload.message
                 ? payload.message
-                : 'Email updated successfully.';
+                : LocalizeText('usersettings.success.email');
             setFeedback({ kind: 'success', message });
             setEmailCurrentPassword('');
             setNewEmail('');
@@ -287,7 +287,7 @@ export const UserAccountSettingsView: FC<{}> = () =>
         }
         catch
         {
-            setFeedback({ kind: 'error', message: 'Could not reach the server. Please try again.' });
+            setFeedback({ kind: 'error', message: LocalizeText('usersettings.error.network') });
         }
         finally
         {
@@ -303,32 +303,32 @@ export const UserAccountSettingsView: FC<{}> = () =>
 
         if(!usernameCurrentPassword || !newUsername)
         {
-            setFeedback({ kind: 'error', message: 'All fields are required.' });
+            setFeedback({ kind: 'error', message: LocalizeText('usersettings.error.fields_required') });
             return;
         }
 
         if(newUsername.length < MIN_USERNAME_LENGTH || newUsername.length > MAX_USERNAME_LENGTH)
         {
-            setFeedback({ kind: 'error', message: `Username must be between ${ MIN_USERNAME_LENGTH } and ${ MAX_USERNAME_LENGTH } characters.` });
+            setFeedback({ kind: 'error', message: LocalizeText('usersettings.error.username_length', [ 'min', 'max' ], [ MIN_USERNAME_LENGTH.toString(), MAX_USERNAME_LENGTH.toString() ]) });
             return;
         }
 
         if(!USERNAME_RE.test(newUsername))
         {
-            setFeedback({ kind: 'error', message: 'Username may only contain letters, numbers, dot, underscore and dash.' });
+            setFeedback({ kind: 'error', message: LocalizeText('usersettings.error.username_invalid') });
             return;
         }
 
         if(newUsername === session.username)
         {
-            setFeedback({ kind: 'error', message: 'New username must be different from the current one.' });
+            setFeedback({ kind: 'error', message: LocalizeText('usersettings.error.username_same') });
             return;
         }
 
         const token = getAccessToken();
         if(!token)
         {
-            setFeedback({ kind: 'error', message: 'You are not authenticated. Please log in again.' });
+            setFeedback({ kind: 'error', message: LocalizeText('usersettings.error.not_authenticated') });
             return;
         }
 
@@ -357,14 +357,14 @@ export const UserAccountSettingsView: FC<{}> = () =>
             {
                 const message = typeof payload.error === 'string' && payload.error
                     ? payload.error
-                    : `Request failed (${ response.status }).`;
+                    : LocalizeText('usersettings.error.request_failed', [ 'status' ], [ response.status.toString() ]);
                 setFeedback({ kind: 'error', message });
                 return;
             }
 
             const message = typeof payload.message === 'string' && payload.message
                 ? payload.message
-                : 'Username updated. Please log in again with your new name.';
+                : LocalizeText('usersettings.success.username');
             setFeedback({ kind: 'success', message });
             setUsernameCurrentPassword('');
             setNewUsername('');
@@ -382,7 +382,7 @@ export const UserAccountSettingsView: FC<{}> = () =>
         }
         catch
         {
-            setFeedback({ kind: 'error', message: 'Could not reach the server. Please try again.' });
+            setFeedback({ kind: 'error', message: LocalizeText('usersettings.error.network') });
         }
         finally
         {
@@ -394,7 +394,7 @@ export const UserAccountSettingsView: FC<{}> = () =>
 
     return (
         <NitroCardView className="user-account-settings-window w-[360px]" theme="primary-slim" uniqueKey="user-account-settings">
-            <NitroCardHeaderView headerText="User Settings" onCloseClick={ close } />
+            <NitroCardHeaderView headerText={ LocalizeText('usersettings.title') } onCloseClick={ close } />
 
             <div className="relative flex items-center gap-3 px-3 py-2 bg-[linear-gradient(180deg,#2e8fb8_0%,#1e7295_100%)] text-white">
                 <div className="absolute inset-0 opacity-20 pointer-events-none [background-image:radial-gradient(rgba(255,255,255,0.5)_1px,transparent_1px)] [background-size:6px_6px]" />
@@ -405,21 +405,21 @@ export const UserAccountSettingsView: FC<{}> = () =>
                             direction={ 2 }
                             headOnly={ true }
                             scale={ 1 }
-                            classNames={ [ '!absolute !left-1/2 !top-[56%] !w-[64px] !h-[64px] !-translate-x-1/2 !-translate-y-1/2 !bg-center !bg-no-repeat' ] }
+                            style={ { backgroundSize: '112px auto', backgroundPosition: '-24px -38px' } }
                         />
                     </div>
                 ) }
                 <div className="relative flex flex-col leading-tight">
-                    <Text small className="text-white/80 uppercase tracking-wider">My account</Text>
-                    <Text bold className="text-white text-[15px]">{ session.username || 'Guest' }</Text>
-                    <Text small className="text-white/80">Manage your account and security</Text>
+                    <Text small className="text-white/80 uppercase tracking-wider">{ LocalizeText('usersettings.account.label') }</Text>
+                    <Text bold className="text-white text-[15px]">{ session.username || LocalizeText('usersettings.guest') }</Text>
+                    <Text small className="text-white/80">{ LocalizeText('usersettings.subtitle') }</Text>
                 </div>
             </div>
 
             <NitroCardContentView className="flex flex-col gap-2 text-black">
                 { section === 'menu' && (
                     <div className="flex flex-col gap-2">
-                        <Text small className="text-black/60 uppercase tracking-wider px-1">Account</Text>
+                        <Text small className="text-black/60 uppercase tracking-wider px-1">{ LocalizeText('usersettings.menu.section') }</Text>
                         <button
                             type="button"
                             className="group flex items-center gap-3 rounded-md border border-black/10 bg-white px-3 py-2 hover:bg-[#f5fbfd] hover:border-[#1e7295] transition-colors cursor-pointer text-left"
@@ -428,8 +428,8 @@ export const UserAccountSettingsView: FC<{}> = () =>
                                 <FaKey />
                             </div>
                             <div className="flex flex-col flex-1 leading-tight">
-                                <Text bold>Reset password</Text>
-                                <Text small className="text-black/60">Change the password used to log in.</Text>
+                                <Text bold>{ LocalizeText('usersettings.menu.password.title') }</Text>
+                                <Text small className="text-black/60">{ LocalizeText('usersettings.menu.password.desc') }</Text>
                             </div>
                             <FaChevronRight className="text-black/40 group-hover:text-[#1e7295]" />
                         </button>
@@ -442,8 +442,8 @@ export const UserAccountSettingsView: FC<{}> = () =>
                                 <FaEnvelope />
                             </div>
                             <div className="flex flex-col flex-1 leading-tight">
-                                <Text bold>Change email</Text>
-                                <Text small className="text-black/60">Update the email address on your account.</Text>
+                                <Text bold>{ LocalizeText('usersettings.menu.email.title') }</Text>
+                                <Text small className="text-black/60">{ LocalizeText('usersettings.menu.email.desc') }</Text>
                             </div>
                             <FaChevronRight className="text-black/40 group-hover:text-[#1e7295]" />
                         </button>
@@ -456,8 +456,8 @@ export const UserAccountSettingsView: FC<{}> = () =>
                                 <FaIdBadge />
                             </div>
                             <div className="flex flex-col flex-1 leading-tight">
-                                <Text bold>Change username</Text>
-                                <Text small className="text-black/60">Pick a new name. You'll need to log in again.</Text>
+                                <Text bold>{ LocalizeText('usersettings.menu.username.title') }</Text>
+                                <Text small className="text-black/60">{ LocalizeText('usersettings.menu.username.desc') }</Text>
                             </div>
                             <FaChevronRight className="text-black/40 group-hover:text-[#a37800]" />
                         </button>
@@ -467,8 +467,8 @@ export const UserAccountSettingsView: FC<{}> = () =>
                                 <FaShieldAlt />
                             </div>
                             <div className="flex flex-col flex-1 leading-tight">
-                                <Text bold className="text-black/60">More coming soon</Text>
-                                <Text small className="text-black/50">Two-factor authentication and more.</Text>
+                                <Text bold className="text-black/60">{ LocalizeText('usersettings.menu.soon.title') }</Text>
+                                <Text small className="text-black/50">{ LocalizeText('usersettings.menu.soon.desc') }</Text>
                             </div>
                         </div>
                     </div>
@@ -485,16 +485,16 @@ export const UserAccountSettingsView: FC<{}> = () =>
                                 <FaArrowLeft size={ 11 } />
                             </button>
                             <FaUserCog className="text-[#1e7295]" />
-                            <Text bold>Reset password</Text>
+                            <Text bold>{ LocalizeText('usersettings.menu.password.title') }</Text>
                         </div>
 
                         <div className="flex items-start gap-2 rounded-md border border-[#1e7295]/30 bg-[#1e7295]/10 px-2 py-2 text-[11px] leading-4 text-[#0d3d52]">
                             <FaInfoCircle className="mt-[2px] shrink-0 text-[#1e7295]" />
-                            <span>Use at least <strong>{ MIN_PASSWORD_LENGTH } characters</strong>. Mix upper &amp; lowercase, numbers and symbols for a stronger password.</span>
+                            <span>{ LocalizeText('usersettings.password.hint', [ 'count' ], [ MIN_PASSWORD_LENGTH.toString() ]) }</span>
                         </div>
 
                         <label className="flex flex-col gap-1 text-[12px]">
-                            <span className="font-bold">Current password</span>
+                            <span className="font-bold">{ LocalizeText('usersettings.field.current_password') }</span>
                             <div className="relative flex items-center">
                                 <FaKey className="absolute left-2 text-black/40" size={ 12 } />
                                 <input
@@ -508,7 +508,7 @@ export const UserAccountSettingsView: FC<{}> = () =>
                                 />
                                 <button
                                     type="button"
-                                    aria-label={ showCurrent ? 'Hide password' : 'Show password' }
+                                    aria-label={ showCurrent ? LocalizeText('usersettings.aria.hide_password') : LocalizeText('usersettings.aria.show_password') }
                                     onClick={ () => setShowCurrent(prev => !prev) }
                                     className="absolute right-2 text-black/40 hover:text-black/70">
                                     { showCurrent ? <FaEyeSlash size={ 12 } /> : <FaEye size={ 12 } /> }
@@ -517,7 +517,7 @@ export const UserAccountSettingsView: FC<{}> = () =>
                         </label>
 
                         <label className="flex flex-col gap-1 text-[12px]">
-                            <span className="font-bold">New password</span>
+                            <span className="font-bold">{ LocalizeText('usersettings.field.new_password') }</span>
                             <div className="relative flex items-center">
                                 <FaKey className="absolute left-2 text-black/40" size={ 12 } />
                                 <input
@@ -531,7 +531,7 @@ export const UserAccountSettingsView: FC<{}> = () =>
                                 />
                                 <button
                                     type="button"
-                                    aria-label={ showNew ? 'Hide password' : 'Show password' }
+                                    aria-label={ showNew ? LocalizeText('usersettings.aria.hide_password') : LocalizeText('usersettings.aria.show_password') }
                                     onClick={ () => setShowNew(prev => !prev) }
                                     className="absolute right-2 text-black/40 hover:text-black/70">
                                     { showNew ? <FaEyeSlash size={ 12 } /> : <FaEye size={ 12 } /> }
@@ -542,13 +542,13 @@ export const UserAccountSettingsView: FC<{}> = () =>
                                     <div className="flex-1 h-1.5 rounded-full bg-black/10 overflow-hidden">
                                         <div className={ `h-full ${ strength.color } transition-all` } style={ { width: `${ (strength.score / 4) * 100 }%` } } />
                                     </div>
-                                    <span className="text-[10px] text-black/60 w-12 text-right">{ strength.label }</span>
+                                    <span className="text-[10px] text-black/60 w-12 text-right">{ strength.labelKey ? LocalizeText(strength.labelKey) : '' }</span>
                                 </div>
                             ) }
                         </label>
 
                         <label className="flex flex-col gap-1 text-[12px]">
-                            <span className="font-bold">Retype new password</span>
+                            <span className="font-bold">{ LocalizeText('usersettings.field.retype_password') }</span>
                             <div className="relative flex items-center">
                                 <FaKey className="absolute left-2 text-black/40" size={ 12 } />
                                 <input
@@ -577,10 +577,10 @@ export const UserAccountSettingsView: FC<{}> = () =>
 
                         <div className="flex justify-end gap-2 pt-1">
                             <Button variant="secondary" disabled={ submitting } onClick={ () => { resetForm(); setSection('menu'); } }>
-                                Cancel
+                                { LocalizeText('usersettings.btn.cancel') }
                             </Button>
                             <Button variant="success" disabled={ submitting } onClick={ () => submitPasswordChange() }>
-                                { submitting ? 'Saving…' : 'Save password' }
+                                { submitting ? LocalizeText('usersettings.btn.saving') : LocalizeText('usersettings.btn.save_password') }
                             </Button>
                         </div>
                     </div>
@@ -597,16 +597,16 @@ export const UserAccountSettingsView: FC<{}> = () =>
                                 <FaArrowLeft size={ 11 } />
                             </button>
                             <FaEnvelope className="text-[#185d79]" />
-                            <Text bold>Change email</Text>
+                            <Text bold>{ LocalizeText('usersettings.menu.email.title') }</Text>
                         </div>
 
                         <div className="flex items-start gap-2 rounded-md border border-[#1e7295]/30 bg-[#1e7295]/10 px-2 py-2 text-[11px] leading-4 text-[#0d3d52]">
                             <FaInfoCircle className="mt-[2px] shrink-0 text-[#1e7295]" />
-                            <span>For security we ask you to confirm your <strong>current password</strong> before changing the email on your account.</span>
+                            <span>{ LocalizeText('usersettings.email.hint') }</span>
                         </div>
 
                         <label className="flex flex-col gap-1 text-[12px]">
-                            <span className="font-bold">Current password</span>
+                            <span className="font-bold">{ LocalizeText('usersettings.field.current_password') }</span>
                             <div className="relative flex items-center">
                                 <FaKey className="absolute left-2 text-black/40" size={ 12 } />
                                 <input
@@ -620,7 +620,7 @@ export const UserAccountSettingsView: FC<{}> = () =>
                                 />
                                 <button
                                     type="button"
-                                    aria-label={ showEmailPassword ? 'Hide password' : 'Show password' }
+                                    aria-label={ showEmailPassword ? LocalizeText('usersettings.aria.hide_password') : LocalizeText('usersettings.aria.show_password') }
                                     onClick={ () => setShowEmailPassword(prev => !prev) }
                                     className="absolute right-2 text-black/40 hover:text-black/70">
                                     { showEmailPassword ? <FaEyeSlash size={ 12 } /> : <FaEye size={ 12 } /> }
@@ -629,7 +629,7 @@ export const UserAccountSettingsView: FC<{}> = () =>
                         </label>
 
                         <label className="flex flex-col gap-1 text-[12px]">
-                            <span className="font-bold">New email address</span>
+                            <span className="font-bold">{ LocalizeText('usersettings.field.new_email') }</span>
                             <div className="relative flex items-center">
                                 <FaEnvelope className="absolute left-2 text-black/40" size={ 12 } />
                                 <input
@@ -660,10 +660,10 @@ export const UserAccountSettingsView: FC<{}> = () =>
 
                         <div className="flex justify-end gap-2 pt-1">
                             <Button variant="secondary" disabled={ submitting } onClick={ () => { resetForm(); setSection('menu'); } }>
-                                Cancel
+                                { LocalizeText('usersettings.btn.cancel') }
                             </Button>
                             <Button variant="success" disabled={ submitting } onClick={ () => submitEmailChange() }>
-                                { submitting ? 'Saving…' : 'Save email' }
+                                { submitting ? LocalizeText('usersettings.btn.saving') : LocalizeText('usersettings.btn.save_email') }
                             </Button>
                         </div>
                     </div>
@@ -680,16 +680,16 @@ export const UserAccountSettingsView: FC<{}> = () =>
                                 <FaArrowLeft size={ 11 } />
                             </button>
                             <FaIdBadge className="text-[#a37800]" />
-                            <Text bold>Change username</Text>
+                            <Text bold>{ LocalizeText('usersettings.menu.username.title') }</Text>
                         </div>
 
                         <div className="flex items-start gap-2 rounded-md border border-[#ffc107]/50 bg-[#fff8e1] px-2 py-2 text-[11px] leading-4 text-[#5c4400]">
                             <FaExclamationTriangle className="mt-[2px] shrink-0 text-[#a37800]" />
-                            <span>Renaming will <strong>log you out</strong> and you can only rename again after 30 days. Make sure your friends know your new name!</span>
+                            <span>{ LocalizeText('usersettings.username.hint') }</span>
                         </div>
 
                         <label className="flex flex-col gap-1 text-[12px]">
-                            <span className="font-bold">Current password</span>
+                            <span className="font-bold">{ LocalizeText('usersettings.field.current_password') }</span>
                             <div className="relative flex items-center">
                                 <FaKey className="absolute left-2 text-black/40" size={ 12 } />
                                 <input
@@ -703,7 +703,7 @@ export const UserAccountSettingsView: FC<{}> = () =>
                                 />
                                 <button
                                     type="button"
-                                    aria-label={ showUsernamePassword ? 'Hide password' : 'Show password' }
+                                    aria-label={ showUsernamePassword ? LocalizeText('usersettings.aria.hide_password') : LocalizeText('usersettings.aria.show_password') }
                                     onClick={ () => setShowUsernamePassword(prev => !prev) }
                                     className="absolute right-2 text-black/40 hover:text-black/70">
                                     { showUsernamePassword ? <FaEyeSlash size={ 12 } /> : <FaEye size={ 12 } /> }
@@ -712,7 +712,7 @@ export const UserAccountSettingsView: FC<{}> = () =>
                         </label>
 
                         <label className="flex flex-col gap-1 text-[12px]">
-                            <span className="font-bold">New username</span>
+                            <span className="font-bold">{ LocalizeText('usersettings.field.new_username') }</span>
                             <div className="relative flex items-center">
                                 <FaIdBadge className="absolute left-2 text-black/40" size={ 12 } />
                                 <input
@@ -730,7 +730,7 @@ export const UserAccountSettingsView: FC<{}> = () =>
                                     <FaCheckCircle className="absolute right-2 text-[#00800b]" size={ 12 } />
                                 ) }
                             </div>
-                            <span className="text-[10px] text-black/50">{ MIN_USERNAME_LENGTH }-{ MAX_USERNAME_LENGTH } characters. Letters, numbers, dot, underscore and dash only.</span>
+                            <span className="text-[10px] text-black/50">{ LocalizeText('usersettings.username.rules', [ 'min', 'max' ], [ MIN_USERNAME_LENGTH.toString(), MAX_USERNAME_LENGTH.toString() ]) }</span>
                         </label>
 
                         { feedback && (
@@ -744,10 +744,10 @@ export const UserAccountSettingsView: FC<{}> = () =>
 
                         <div className="flex justify-end gap-2 pt-1">
                             <Button variant="secondary" disabled={ submitting } onClick={ () => { resetForm(); setSection('menu'); } }>
-                                Cancel
+                                { LocalizeText('usersettings.btn.cancel') }
                             </Button>
                             <Button variant="warning" disabled={ submitting } onClick={ () => submitUsernameChange() }>
-                                { submitting ? 'Renaming…' : 'Rename me' }
+                                { submitting ? LocalizeText('usersettings.btn.renaming') : LocalizeText('usersettings.btn.rename') }
                             </Button>
                         </div>
                     </div>
diff --git a/src/components/user-settings/UserSettingsView.tsx b/src/components/user-settings/UserSettingsView.tsx
index 999ac3b..106071d 100644
--- a/src/components/user-settings/UserSettingsView.tsx
+++ b/src/components/user-settings/UserSettingsView.tsx
@@ -3,13 +3,15 @@ import { FC, useEffect, useState } from 'react';
 import { FaUserCog, FaVolumeDown, FaVolumeMute, FaVolumeUp } from 'react-icons/fa';
 import { DispatchMainEvent, DispatchUiEvent, LocalizeText, SendMessageComposer } from '../../api';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../common';
-import { useCatalogClassicStyle, useCatalogPlaceMultipleItems, useCatalogSkipPurchaseConfirmation, useChatWindow, useMessageEvent } from '../../hooks';
+import { useCatalogClassicStyle, useCatalogPlaceMultipleItems, useCatalogSkipPurchaseConfirmation, useChatWindow, useMessageEvent, useThemes } from '../../hooks';
 import { classNames } from '../../layout';
 
 export const UserSettingsView: FC<{}> = props =>
 {
     const [ isVisible, setIsVisible ] = useState(false);
+    const [ activeTab, setActiveTab ] = useState<'general' | 'themes'>('general');
     const [ userSettings, setUserSettings ] = useState<NitroSettingsEvent>(null);
+    const { themes, activeThemeId, manifest, activeEnabled, selectTheme, togglePiece } = useThemes();
     const [ catalogPlaceMultipleObjects, setCatalogPlaceMultipleObjects ] = useCatalogPlaceMultipleItems();
     const [ catalogSkipPurchaseConfirmation, setCatalogSkipPurchaseConfirmation ] = useCatalogSkipPurchaseConfirmation();
     const [ chatWindowEnabled, setChatWindowEnabled ] = useChatWindow();
@@ -132,6 +134,11 @@ export const UserSettingsView: FC<{}> = props =>
         <NitroCardView className="user-settings-window" theme="primary-slim" uniqueKey="user-settings">
             <NitroCardHeaderView headerText={ LocalizeText('widget.memenu.settings.title') } onCloseClick={ event => processAction('close_view') } />
             <NitroCardContentView className="text-black">
+                <div className="flex items-center gap-1 mb-2 border-b border-black/10 pb-1">
+                    <button type="button" onClick={ () => setActiveTab('general') } className={ classNames('px-3 py-1 rounded text-xs font-bold cursor-pointer transition-colors', activeTab === 'general' ? 'bg-[#1e7295] text-white' : 'bg-black/5 hover:bg-black/10') }>{ LocalizeText('usersettings.tab.general') }</button>
+                    <button type="button" onClick={ () => setActiveTab('themes') } className={ classNames('px-3 py-1 rounded text-xs font-bold cursor-pointer transition-colors', activeTab === 'themes' ? 'bg-[#1e7295] text-white' : 'bg-black/5 hover:bg-black/10') }>{ LocalizeText('usersettings.tab.themes') }</button>
+                </div>
+                { activeTab === 'general' && <>
                 <div className="flex flex-col gap-1">
                     <div className="flex items-center gap-1">
                         <input checked={ userSettings.oldChat } className="form-check-input" type="checkbox" onChange={ event => processAction('oldchat', event.target.checked) } />
@@ -155,11 +162,11 @@ export const UserSettingsView: FC<{}> = props =>
                     </div>
                     <div className="flex items-center gap-1">
                         <input checked={ chatWindowEnabled } className="form-check-input" type="checkbox" onChange={ event => setChatWindowEnabled(event.target.checked) } />
-                        <Text>Enable chat window</Text>
+                        <Text>{ LocalizeText('memenu.settings.other.enable.chat.window') }</Text>
                     </div>
                     <div className="flex items-center gap-1">
                         <input checked={ catalogClassicStyle } className="form-check-input" type="checkbox" onChange={ event => setCatalogClassicStyle(event.target.checked) } />
-                        <Text>Catalogo: stile classico</Text>
+                        <Text>{ LocalizeText('memenu.settings.other.catalog.classic.style') }</Text>
                     </div>
                 </div>
                 <div className="flex flex-col">
@@ -201,12 +208,41 @@ export const UserSettingsView: FC<{}> = props =>
                             <FaUserCog size={ 12 } />
                         </div>
                         <div className="flex flex-col flex-1 leading-tight">
-                            <Text bold>User settings</Text>
-                            <Text small className="text-black/60">Password &amp; account</Text>
+                            <Text bold>{ LocalizeText('usersettings.open.title') }</Text>
+                            <Text small className="text-black/60">{ LocalizeText('usersettings.open.subtitle') }</Text>
                         </div>
                         <span className="text-black/30 group-hover:text-[#1e7295] text-[10px]">›</span>
                     </button>
                 </div>
+                </> }
+                { activeTab === 'themes' && <div className="flex flex-col gap-2">
+                    <div className="flex flex-col gap-1">
+                        <Text bold>{ LocalizeText('usersettings.themes.custom') }</Text>
+                        <select
+                            value={ activeThemeId }
+                            onChange={ event => selectTheme(event.target.value) }
+                            className="form-select rounded border border-black/15 px-2 py-1 text-sm">
+                            <option value="">{ LocalizeText('usersettings.themes.default_option') }</option>
+                            { themes.map(theme => (
+                                <option key={ theme.id } value={ theme.id }>{ theme.name }{ theme.author ? ` — ${ theme.author }` : '' }</option>
+                            )) }
+                        </select>
+                    </div>
+                    { activeThemeId && manifest && manifest.pieces.length > 0 &&
+                        <div className="flex flex-col gap-1 pt-1 border-t border-black/10">
+                            <Text bold>{ LocalizeText('usersettings.themes.active_pieces') }</Text>
+                            { manifest.pieces.map(piece => (
+                                <div key={ piece.id } className="flex items-center gap-1">
+                                    <input className="form-check-input" type="checkbox" checked={ activeEnabled.includes(piece.id) } onChange={ () => togglePiece(piece.id) } />
+                                    <Text>{ piece.name }</Text>
+                                </div>
+                            )) }
+                        </div> }
+                    { activeThemeId && !manifest &&
+                        <Text small className="text-black/60">{ LocalizeText('usersettings.themes.invalid') }</Text> }
+                    { !themes.length &&
+                        <Text small className="text-black/60">{ LocalizeText('usersettings.themes.none') }</Text> }
+                </div> }
             </NitroCardContentView>
         </NitroCardView>
     );
diff --git a/src/css/backgrounds/BackgroundsView.css b/src/css/backgrounds/BackgroundsView.css
index a5e1fa8..d08b2b1 100644
--- a/src/css/backgrounds/BackgroundsView.css
+++ b/src/css/backgrounds/BackgroundsView.css
@@ -1629,9 +1629,6 @@
 .infostand-border.border-15 { border-color: #cbd5e1; } /* Silver */
 .infostand-border.border-16 { border-color: #1f2937; } /* Black */
 
-/* Image-based borders (17-25). These override the colour-border insets and
-   strip the CSS border so the artwork sits ~22px outside the card and
-   stretches to fill the frame area. */
 .infostand-border.border-17,
 .infostand-border.border-18,
 .infostand-border.border-19,
@@ -1662,8 +1659,6 @@
 .infostand-border.border-24 { background-image: url('@/assets/images/backgrounds/borders/border_24.webp'); }
 .infostand-border.border-25 { background-image: url('@/assets/images/backgrounds/borders/border_25.webp'); }
 
-/* Picker thumbnails inside the BackgroundsView "Borders" tab.
-   Each thumbnail is a small rounded box outlined in its border colour. */
 .profile-border {
   width: 60px;
   height: 76px;
@@ -1674,9 +1669,7 @@
   background: rgba(255, 255, 255, 0.05);
 }
 
-/* border-0 = no border (default) — show as a dashed translucent outline */
 .profile-border.border-0  { border: 2px dashed rgba(255, 255, 255, 0.25); }
-
 .profile-border.border-1  { border-color: #ef4444; }
 .profile-border.border-2  { border-color: #f97316; }
 .profile-border.border-3  { border-color: #eab308; }
@@ -1693,8 +1686,6 @@
 .profile-border.border-14 { border-color: #d4a020; }
 .profile-border.border-15 { border-color: #cbd5e1; }
 .profile-border.border-16 { border-color: #1f2937; }
-
-/* Image-border picker thumbnails — drop the CSS frame and show the artwork. */
 .profile-border.border-17,
 .profile-border.border-18,
 .profile-border.border-19,
@@ -1719,4 +1710,61 @@
 .profile-border.border-22 { background-image: url('@/assets/images/backgrounds/borders/border_22.webp'); }
 .profile-border.border-23 { background-image: url('@/assets/images/backgrounds/borders/border_23.webp'); }
 .profile-border.border-24 { background-image: url('@/assets/images/backgrounds/borders/border_24.webp'); }
-.profile-border.border-25 { background-image: url('@/assets/images/backgrounds/borders/border_25.webp'); }
\ No newline at end of file
+.profile-border.border-25 { background-image: url('@/assets/images/backgrounds/borders/border_25.webp'); }
+
+.card-background-2,
+.card-background-3,
+.card-background-4,
+.card-background-5,
+.card-background-6,
+.card-background-7,
+.card-background-12,
+.card-background-13,
+.card-background-28,
+.card-background-30,
+.card-background-35,
+.card-background-52,
+.card-background-55,
+.card-background-56,
+.card-background-58,
+.card-background-60,
+.card-background-95,
+.card-background-116,
+.card-background-122,
+.card-background-127,
+.card-background-129,
+.card-background-131,
+.card-background-144,
+.card-background-149,
+.card-background-150,
+.card-background-161,
+.card-background-185,
+.card-background-187 {
+  --profile-card-text: #1a1a1a;
+  --profile-card-shadow: 0 1px 1px rgba(255, 255, 255, 0.65);
+}
+
+[class*="card-background-"] .nitro-extended-profile__username .username,
+[class*="card-background-"] .nitro-extended-profile__motto,
+[class*="card-background-"] .nitro-extended-profile__meta,
+[class*="card-background-"] .nitro-extended-profile__meta b,
+[class*="card-background-"] .nitro-extended-profile__meta span,
+[class*="card-background-"] .nitro-extended-profile__status-text,
+[class*="card-background-"] .nitro-extended-profile__relationships-label,
+[class*="card-background-"] .nitro-extended-profile__relationship-subcopy,
+[class*="card-background-"] .nitro-extended-profile__link,
+[class*="card-background-"] .nitro-extended-profile__right > p,
+[class*="card-background-"] .nitro-extended-profile__right > p b {
+  color: var(--profile-card-text, #fff) !important;
+  text-shadow: var(--profile-card-shadow, 0 1px 2px rgba(0, 0, 0, 0.55));
+}
+
+.profile-card-background[class*="card-background-"]:not(.nitro-extended-profile-window__content) {
+  color: var(--profile-card-text, #fff);
+  text-shadow: var(--profile-card-shadow, 0 1px 2px rgba(0, 0, 0, 0.55));
+}
+
+.profile-card-background[class*="card-background-"]:not(.nitro-extended-profile-window__content) .text-white {
+  color: var(--profile-card-text, #fff) !important;
+}
+
diff --git a/src/css/catalog/CatalogClassicView.css b/src/css/catalog/CatalogClassicView.css
index 48a6100..0a146e7 100644
--- a/src/css/catalog/CatalogClassicView.css
+++ b/src/css/catalog/CatalogClassicView.css
@@ -1,21 +1,21 @@
 .nitro-catalog-classic-window {
-    --cat-blue: #4b7a94;
-    --cat-blue-dark: #385d73;
-    --cat-ink: #233a47;
-    --cat-strip: #d9e2e8;
-    --cat-tab: #b7c7d1;
-    --cat-tab-border: #7a9cb0;
-    --cat-panel: #eef2f5;
-    --cat-sub: #e1e7ec;
-    --cat-line: #b7c7d1;
-    --cat-canvas: #d4dadf;
-    --cat-canvas-2: #c9cfd4;
-    --cat-select: #3a82a7;
-    --cat-select-bg: #f0f5f8;
+    --cat-blue: #4a7d8c;
+    --cat-blue-dark: #315863;
+    --cat-ink: #2c2c2a;
+    --cat-strip: #e2e0d6;
+    --cat-tab: #c7c5ba;
+    --cat-tab-border: #8f8f8b;
+    --cat-panel: #e8e7df;
+    --cat-sub: #dedcd2;
+    --cat-line: #8899a2;
+    --cat-canvas: #d8d8d2;
+    --cat-canvas-2: #ccccc4;
+    --cat-select: #4a7d8c;
+    --cat-select-bg: #f1efe6;
     --cat-gold: #f7d673;
     --cat-gold-border: #d4af37;
     --cat-gold-ink: #4a3300;
-    --cat-buy: #009900;
+    --cat-buy: #5ca843;
 
     width: 640px !important;
     height: 600px !important;
@@ -23,7 +23,9 @@
     min-width: 640px !important;
     min-height: 600px !important;
     max-height: 600px !important;
-    background: #ffffff !important;
+    background: var(--cat-strip) !important;
+    border-radius: 10px !important;
+    overflow: hidden;
 }
 
 .nitro-catalog-classic-window .nitro-card-title {
@@ -39,7 +41,8 @@
 .nitro-catalog-classic-window .nitro-card-header {
     background: var(--cat-blue);
     border-color: var(--cat-blue);
-    border-bottom-color: var(--cat-ink);
+    border-bottom-color: var(--cat-blue);
+    box-shadow: inset 0 2px 0 #709da9, inset 0 -2px 0 var(--cat-blue-dark);
 }
 
 .nitro-catalog-classic-admin-banner {
@@ -74,7 +77,7 @@
 }
 
 .nitro-catalog-classic-tabs-shell .nitro-card-tab-item:hover {
-    background: #c7d4dd;
+    background: #d2d0c6;
 }
 
 .nitro-catalog-classic-tabs-shell .nitro-card-tab-item-active {
@@ -176,7 +179,7 @@
 }
 
 .nitro-catalog-classic-navigation-item:hover {
-    background: #dde6ec;
+    background: #dcdacf;
 }
 
 .nitro-catalog-classic-navigation-item.is-active {
@@ -187,7 +190,7 @@
 }
 
 .nitro-catalog-classic-navigation-item.is-drag-over {
-    outline: 2px solid rgba(58, 130, 167, 0.4);
+    outline: 2px solid rgba(74, 125, 140, 0.4);
     outline-offset: -2px;
 }
 
@@ -353,14 +356,14 @@
 .nitro-catalog-classic-window .layout-grid-item:hover {
     background-color: var(--cat-select-bg) !important;
     border-color: var(--cat-select) !important;
-    box-shadow: 0 0 0 1px rgba(58, 130, 167, 0.2);
+    box-shadow: 0 0 0 1px rgba(74, 125, 140, 0.2);
 }
 
 .nitro-catalog-classic-window .layout-grid-item.is-active {
     background-color: var(--cat-select-bg) !important;
     border-color: var(--cat-select) !important;
     border-width: 2px !important;
-    box-shadow: 0 0 0 1px rgba(58, 130, 167, 0.35);
+    box-shadow: 0 0 0 1px rgba(74, 125, 140, 0.35);
 }
 
 .nitro-catalog-classic-grid-offer-icon {
@@ -587,13 +590,26 @@
 
 @media (max-width: 640px) {
     .nitro-catalog-classic-window {
+        --cat-blue: #4b7a94;
+        --cat-blue-dark: #385d73;
+        --cat-ink: #233a47;
+        --cat-strip: #d9e2e8;
+        --cat-tab: #b7c7d1;
+        --cat-tab-border: #7a9cb0;
+        --cat-panel: #eef2f5;
+        --cat-sub: #e1e7ec;
+        --cat-line: #b7c7d1;
+        --cat-select: #3a82a7;
+        --cat-select-bg: #f0f5f8;
+        --cat-buy: #009900;
+
         width: 100vw !important;
         min-width: 0 !important;
         max-width: 100vw !important;
         height: 100vh !important;
         min-height: 0 !important;
         max-height: 100vh !important;
-        border-radius: 0 !important;
+        border-radius: 10px !important;
     }
 
     .draggable-window:has(> .nitro-catalog-classic-window) {
@@ -603,32 +619,50 @@
     }
 
     .nitro-catalog-classic-window .nitro-card-title {
-        display: none;
+        display: block;
+    }
+
+    .nitro-catalog-classic-window .nitro-card-header {
+        border-bottom-color: transparent;
+        box-shadow: none;
     }
 
     .nitro-catalog-classic-mobile-currency {
         position: absolute;
-        left: 50%;
-        margin-left: 0;
-        transform: translateX(-50%);
+        top: 38px;
+        left: 0;
+        right: 0;
+        height: 30px;
+        margin: 0;
+        transform: none;
+        justify-content: center;
+        gap: 6px;
+        background: #30728c;
+        z-index: 5;
     }
 
     .nitro-catalog-classic-tabs-shell {
-        min-height: 44px;
-        max-height: 44px;
+        margin-top: 30px;
+        min-height: 56px;
+        max-height: 56px;
         padding: 4px 4px 0;
         -webkit-overflow-scrolling: touch;
     }
 
     .nitro-catalog-classic-tabs-shell .nitro-card-tab-item {
-        min-height: 42px;
-        padding: 6px 12px;
-        font-size: 12px;
+        min-height: 52px;
+        padding: 5px 8px;
         justify-content: center;
     }
 
+    .nitro-catalog-classic-tabs-shell .nitro-card-tab-item div:has(> .nitro-catalog-classic-tab-label) {
+        flex-direction: column;
+        gap: 2px;
+    }
+
     .nitro-catalog-classic-tab-label {
-        display: none;
+        font-size: 9px;
+        line-height: 1;
     }
 
     .nitro-catalog-classic-content-shell {
diff --git a/src/css/chat/Chats.css b/src/css/chat/Chats.css
index 43f093f..13187d2 100644
--- a/src/css/chat/Chats.css
+++ b/src/css/chat/Chats.css
@@ -807,6 +807,435 @@
             }
         }
 
+        &.bubble-253 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_253.png');
+            border-image-slice: 16 22 15 27 fill;
+            border-image-width: 16px 22px 15px 27px;
+            border-image-repeat: stretch stretch;
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_253_pointer.png');
+            }
+        }
+
+        &.bubble-254 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_254.png');
+            border-image-slice: 7 28 15 25 fill;
+            border-image-width: 7px 28px 15px 25px;
+            border-image-repeat: stretch stretch;
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_254_pointer.png');
+            }
+        }
+
+        &.bubble-255 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_255.png');
+            border-image-slice: 12 19 22 30 fill;
+            border-image-width: 12px 19px 22px 30px;
+            border-image-repeat: stretch stretch;
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_255_pointer.png');
+            }
+        }
+
+        &.bubble-256 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_256.png');
+            border-image-slice: 24 18 10 31 fill;
+            border-image-width: 24px 18px 10px 31px;
+            border-image-repeat: stretch stretch;
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_256_pointer.png');
+            }
+        }
+
+        &.bubble-257 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_257.png');
+            border-image-slice: 6 17 19 36 fill;
+            border-image-width: 6px 17px 19px 36px;
+            border-image-repeat: stretch stretch;
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_257_pointer.png');
+            }
+        }
+
+        &.bubble-258 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_258.png');
+            border-image-slice: 22 27 10 27 fill;
+            border-image-width: 22px 27px 10px 27px;
+            border-image-repeat: stretch stretch;
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_258_pointer.png');
+            }
+        }
+
+        &.bubble-259 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_259.png');
+            border-image-slice: 21 27 18 37 fill;
+            border-image-width: 21px 27px 18px 37px;
+            border-image-repeat: stretch stretch;
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_259_pointer.png');
+            }
+        }
+
+        &.bubble-260 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_260.png');
+            border-image-slice: 6 22 16 27 fill;
+            border-image-width: 6px 22px 16px 27px;
+            border-image-repeat: stretch stretch;
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_260_pointer.png');
+            }
+        }
+
+        &.bubble-261 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_261.png');
+            border-image-slice: 18 27 5 22 fill;
+            border-image-width: 18px 27px 5px 22px;
+            border-image-repeat: stretch stretch;
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_261_pointer.png');
+            }
+        }
+
+        &.bubble-262 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_262.png');
+            border-image-slice: 33 31 11 34 fill;
+            border-image-width: 33px 31px 11px 34px;
+            border-image-repeat: stretch stretch;
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_262_pointer.png');
+            }
+        }
+
+        &.bubble-263 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_263.png');
+            border-image-slice: 15 19 10 32 fill;
+            border-image-width: 15px 19px 10px 32px;
+            border-image-repeat: stretch stretch;
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_263_pointer.png');
+            }
+        }
+
+        &.bubble-264 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_264.png');
+            border-image-slice: 18 24 16 25 fill;
+            border-image-width: 18px 24px 16px 25px;
+            border-image-repeat: stretch stretch;
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_264_pointer.png');
+            }
+        }
+
+        &.bubble-265 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_265.png');
+            border-image-slice: 41 40 17 18 fill;
+            border-image-width: 41px 40px 17px 18px;
+            border-image-repeat: stretch stretch;
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_265_pointer.png');
+            }
+        }
+
+        &.bubble-266 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_266.png');
+            border-image-slice: 13 34 22 27 fill;
+            border-image-width: 13px 34px 22px 27px;
+            border-image-repeat: stretch stretch;
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_266_pointer.png');
+            }
+        }
+
+        &.bubble-267 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_267.png');
+            border-image-slice: 17 30 22 25 fill;
+            border-image-width: 17px 30px 22px 25px;
+            border-image-repeat: stretch stretch;
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_267_pointer.png');
+            }
+        }
+
+        &.bubble-268 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_268.png');
+            border-image-slice: 7 30 21 24 fill;
+            border-image-width: 7px 30px 21px 24px;
+            border-image-repeat: stretch stretch;
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_268_pointer.png');
+            }
+        }
+
+        &.bubble-269 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_269.png');
+            border-image-slice: 10 23 25 35 fill;
+            border-image-width: 10px 23px 25px 35px;
+            border-image-repeat: stretch stretch;
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_269_pointer.png');
+            }
+        }
+
+        &.bubble-270 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_270.png');
+            border-image-slice: 13 30 14 26 fill;
+            border-image-width: 13px 30px 14px 26px;
+            border-image-repeat: stretch stretch;
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_270_pointer.png');
+            }
+        }
+
+        &.bubble-271 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_271.png');
+            border-image-slice: 23 23 9 35 fill;
+            border-image-width: 23px 23px 9px 35px;
+            border-image-repeat: stretch stretch;
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_271_pointer.png');
+            }
+        }
+
+        &.bubble-272 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_272.png');
+            border-image-slice: 9 31 24 25 fill;
+            border-image-width: 9px 31px 24px 25px;
+            border-image-repeat: stretch stretch;
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_272_pointer.png');
+            }
+        }
+
+        &.bubble-273 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_273.png');
+            border-image-slice: 11 16 25 37 fill;
+            border-image-width: 11px 16px 25px 37px;
+            border-image-repeat: stretch stretch;
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_273_pointer.png');
+            }
+        }
+
+        &.bubble-274 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_274.png');
+            border-image-slice: 7 22 19 27 fill;
+            border-image-width: 7px 22px 19px 27px;
+            border-image-repeat: stretch stretch;
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_274_pointer.png');
+            }
+        }
+
+        &.bubble-275 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_275.png');
+            border-image-slice: 8 23 14 26 fill;
+            border-image-width: 8px 23px 14px 26px;
+            border-image-repeat: stretch stretch;
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_275_pointer.png');
+            }
+        }
+
+        &.bubble-276 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_276.png');
+            border-image-slice: 12 40 17 17 fill;
+            border-image-width: 12px 40px 17px 17px;
+            border-image-repeat: stretch stretch;
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_276_pointer.png');
+            }
+        }
+
+        &.bubble-277 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_277.png');
+            border-image-slice: 6 39 18 17 fill;
+            border-image-width: 6px 39px 18px 17px;
+            border-image-repeat: stretch stretch;
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_277_pointer.png');
+            }
+        }
+
+        &.bubble-278 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_278.png');
+            border-image-slice: 16 38 6 19 fill;
+            border-image-width: 16px 38px 6px 19px;
+            border-image-repeat: stretch stretch;
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_278_pointer.png');
+            }
+        }
+
+        &.bubble-279 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_279.png');
+            border-image-slice: 6 26 16 23 fill;
+            border-image-width: 6px 26px 16px 23px;
+            border-image-repeat: stretch stretch;
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_279_pointer.png');
+            }
+        }
+
+        &.bubble-280 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_280.png');
+            border-image-slice: 23 29 6 15 fill;
+            border-image-width: 23px 29px 6px 15px;
+            border-image-repeat: stretch stretch;
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_280_pointer.png');
+            }
+        }
+
+        &.bubble-281 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_281.png');
+            border-image-slice: 18 42 9 18 fill;
+            border-image-width: 18px 42px 9px 18px;
+            border-image-repeat: stretch stretch;
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_281_pointer.png');
+            }
+        }
+
+        &.bubble-282 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_282.png');
+            border-image-slice: 18 42 9 18 fill;
+            border-image-width: 18px 42px 9px 18px;
+            border-image-repeat: stretch stretch;
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_282_pointer.png');
+            }
+        }
+
+        &.bubble-283 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_283.png');
+            border-image-slice: 17 26 13 31 fill;
+            border-image-width: 17px 26px 13px 31px;
+            border-image-repeat: stretch stretch;
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_283_pointer.png');
+            }
+        }
+
+        &.bubble-284 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_284.png');
+            border-image-slice: 9 26 23 26 fill;
+            border-image-width: 9px 26px 23px 26px;
+            border-image-repeat: stretch stretch;
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_284_pointer.png');
+            }
+        }
+
+        &.bubble-285 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_285.png');
+            border-image-slice: 16 35 15 15 fill;
+            border-image-width: 16px 35px 15px 15px;
+            border-image-repeat: stretch stretch;
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_285_pointer.png');
+            }
+        }
+
+        &.bubble-286 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_286.png');
+            border-image-slice: 18 22 4 23 fill;
+            border-image-width: 18px 22px 4px 23px;
+            border-image-repeat: stretch stretch;
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_286_pointer.png');
+            }
+        }
+
+        &.bubble-287 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_287.png');
+            border-image-slice: 6 22 18 26 fill;
+            border-image-width: 6px 22px 18px 26px;
+            border-image-repeat: stretch stretch;
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_287_pointer.png');
+            }
+        }
+
+        &.bubble-288 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_288.png');
+            border-image-slice: 18 31 11 24 fill;
+            border-image-width: 18px 31px 11px 24px;
+            border-image-repeat: stretch stretch;
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_288_pointer.png');
+            }
+        }
+
+        &.bubble-289 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_289.png');
+            border-image-slice: 7 54 17 24 fill;
+            border-image-width: 7px 54px 17px 24px;
+            border-image-repeat: stretch stretch;
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_289_pointer.png');
+            }
+        }
+
+        &.bubble-290 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_290.png');
+            border-image-slice: 18 24 14 29 fill;
+            border-image-width: 18px 24px 14px 29px;
+            border-image-repeat: stretch stretch;
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_290_pointer.png');
+            }
+        }
+
+        &.bubble-291 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_291.png');
+            border-image-slice: 9 26 11 35 fill;
+            border-image-width: 9px 26px 11px 35px;
+            border-image-repeat: stretch stretch;
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_291_pointer.png');
+            }
+        }
+
         &.bubble-200,
         &.bubble-201,
         &.bubble-202,
@@ -1810,4 +2239,160 @@
             background: center / contain no-repeat url('@/assets/images/chat/chatbubbles/bubble_252_extra.png');
         }
     }
+    &.bubble-253 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_253.png');
+    }
+
+    &.bubble-254 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_254.png');
+    }
+
+    &.bubble-255 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_255.png');
+    }
+
+    &.bubble-256 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_256.png');
+    }
+
+    &.bubble-257 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_257.png');
+    }
+
+    &.bubble-258 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_258.png');
+    }
+
+    &.bubble-259 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_259.png');
+    }
+
+    &.bubble-260 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_260.png');
+    }
+
+    &.bubble-261 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_261.png');
+    }
+
+    &.bubble-262 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_262.png');
+    }
+
+    &.bubble-263 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_263.png');
+    }
+
+    &.bubble-264 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_264.png');
+    }
+
+    &.bubble-265 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_265.png');
+    }
+
+    &.bubble-266 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_266.png');
+    }
+
+    &.bubble-267 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_267.png');
+    }
+
+    &.bubble-268 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_268.png');
+    }
+
+    &.bubble-269 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_269.png');
+    }
+
+    &.bubble-270 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_270.png');
+    }
+
+    &.bubble-271 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_271.png');
+    }
+
+    &.bubble-272 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_272.png');
+    }
+
+    &.bubble-273 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_273.png');
+    }
+
+    &.bubble-274 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_274.png');
+    }
+
+    &.bubble-275 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_275.png');
+    }
+
+    &.bubble-276 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_276.png');
+    }
+
+    &.bubble-277 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_277.png');
+    }
+
+    &.bubble-278 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_278.png');
+    }
+
+    &.bubble-279 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_279.png');
+    }
+
+    &.bubble-280 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_280.png');
+    }
+
+    &.bubble-281 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_281.png');
+    }
+
+    &.bubble-282 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_282.png');
+    }
+
+    &.bubble-283 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_283.png');
+    }
+
+    &.bubble-284 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_284.png');
+    }
+
+    &.bubble-285 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_285.png');
+    }
+
+    &.bubble-286 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_286.png');
+    }
+
+    &.bubble-287 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_287.png');
+    }
+
+    &.bubble-288 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_288.png');
+    }
+
+    &.bubble-289 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_289.png');
+    }
+
+    &.bubble-290 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_290.png');
+    }
+
+    &.bubble-291 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_291.png');
+    }
+
 }
diff --git a/src/css/friends/FriendsView.css b/src/css/friends/FriendsView.css
index 3786920..33a625d 100644
--- a/src/css/friends/FriendsView.css
+++ b/src/css/friends/FriendsView.css
@@ -1,4 +1,3 @@
-/* ── Friends spritesheet icons ── */
 .nitro-friends-spritesheet {
     background: url('@/assets/images/friends/friends-spritesheet.png') transparent no-repeat;
 
@@ -176,9 +175,6 @@
         border: 0 !important;
     }
 
-    /* The header title is rendered by the shared <Text> component, which is a
-       <div> (not a <span>) — so target the div too, otherwise it keeps the app
-       default size and shows as oversized "testoni". */
     & .nitro-card-accordion-set-header span,
     & .nitro-card-accordion-set-header > div {
         font-size: 12px !important;
@@ -807,20 +803,9 @@
     }
 }
 
-/* ------------------------------------------------------------------ *
- * Flat (non-nested) overrides. The rules above live inside a nested
- * `.nitro-friends { & ... }` block; these are written flat so they
- * apply reliably and win by source order. They fix two things the
- * nested rules didn't: the oversized/overflowing friend-list heads and
- * the oversized accordion section titles ("testoni").
- * ------------------------------------------------------------------ */
-
-/* Friend-list avatar: clip a small box and centre the head, same proven
-   recipe as the messenger head. `inset: auto` cancels the component's
-   `inset-0`, otherwise the 130px head fills the row and overflows. */
 .nitro-friends .friends-list-avatar {
     position: relative !important;
-    width: 34px;
+    width: 32px;
     height: 36px;
     flex-shrink: 0;
     overflow: hidden;
@@ -828,18 +813,15 @@
 
 .nitro-friends .friends-list-avatar .avatar-image {
     position: absolute !important;
-    inset: auto !important;
-    left: 50% !important;
-    top: 56% !important;
-    width: 54px !important;
-    height: 54px !important;
+    inset: 0 !important;
+    width: 100% !important;
+    height: 100% !important;
     margin: 0 !important;
-    background-position: center center !important;
-    transform: translate(-50%, -50%) scale(.95) !important;
+    background-size: 66px auto !important;
+    background-position: -16px -21px !important;
+    transform: none !important;
 }
 
-/* Accordion section titles are rendered by <Text> (a <div>, not a <span>),
-   so size the div too — otherwise they show oversized. */
 .nitro-friends .nitro-card-accordion-set-header > div,
 .nitro-friends .nitro-card-accordion-set-header span {
     font-size: 12px !important;
diff --git a/src/css/index.css b/src/css/index.css
index 5896b1d..8be4f78 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -306,7 +306,7 @@ body {
 
     .nitro-card-shell:not(.nitro-wired) .nitro-card-header-shell {
         border: 2px solid #3c88a6;
-        border-bottom-color: #000;
+        border-bottom-color: #30728c;
         border-radius: 8px 8px 0 0;
         background: #30728c;
         padding: 5px;
@@ -314,7 +314,7 @@ body {
 
     .nitro-card-shell:not(.nitro-wired) .nitro-card-header-shell.builders-club-card-header {
         border-color: #d79d2e;
-        border-bottom-color: #000;
+        border-bottom-color: #c68515;
         background: linear-gradient(180deg, #d89f2d 0%, #c68515 100%);
     }
 
diff --git a/src/css/notification/NotificationCenterView.css b/src/css/notification/NotificationCenterView.css
index c24cb67..2d43f52 100644
--- a/src/css/notification/NotificationCenterView.css
+++ b/src/css/notification/NotificationCenterView.css
@@ -20,6 +20,77 @@
         }
     }
 
+    &.nitro-alert-command-list {
+        width: min(430px, calc(100vw - 18px));
+        min-height: 210px;
+        max-height: min(520px, calc(100vh - 24px));
+
+        .content-area {
+            padding: 9px 10px 8px;
+        }
+
+        .notification-text {
+            min-width: 0;
+            padding-right: 3px;
+            font-family: Ubuntu, sans-serif;
+            line-height: 1.25;
+        }
+
+        .notification-command-template {
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+            padding-bottom: 2px;
+        }
+
+        .notification-command-heading {
+            font-weight: 700;
+            color: #101010;
+            margin-bottom: 3px;
+        }
+
+        .notification-command-copy {
+            color: #262626;
+            margin-bottom: 6px;
+        }
+
+        .notification-command-row {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            gap: 2px;
+            min-height: 34px;
+            padding: 5px 8px;
+            color: #123b4c;
+            background: linear-gradient(180deg, #ffffff 0%, #dceaf0 100%);
+            border: 1px solid #8ca6b1;
+            border-radius: 4px;
+            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
+            text-align: left;
+            word-break: break-word;
+        }
+
+        .notification-command-row:hover {
+            background: linear-gradient(180deg, #ffffff 0%, #cfe2eb 100%);
+            border-color: #4f879b;
+        }
+
+        .notification-command-name {
+            font-weight: 700;
+            color: #123b4c;
+        }
+
+        .notification-command-description {
+            font-size: 11px;
+            line-height: 1.2;
+            color: #3d4a50;
+        }
+
+        .notification-command-spacer {
+            height: 3px;
+        }
+    }
+
 	&.nitro-alert-credits {
         width: 370px;
         .notification-text {
@@ -390,4 +461,4 @@
 	position: relative;
 	background-image: url("@/assets/images/notifications/nitro_v3.png");
 	background-repeat: no-repeat;
-}
\ No newline at end of file
+}
diff --git a/src/css/user-profile/UserProfileView.css b/src/css/user-profile/UserProfileView.css
index 66bbec6..f9bd045 100644
--- a/src/css/user-profile/UserProfileView.css
+++ b/src/css/user-profile/UserProfileView.css
@@ -46,11 +46,6 @@
   gap: 10px;
 }
 
-/* Mirror the room infostand exactly: a 68x135 flex column (= profile-background)
-   that centres the avatar horizontally and clips it; the stand/overlay sit on
-   top as absolute layers. The avatar keeps its component default classes
-   (relative w-[90px] h-[130px] left-[-2px]) so it lines up with bg + stand and
-   isn't crooked. Do NOT absolutely position or force width/height on it. */
 .nitro-extended-profile__avatar-shell {
   width: 68px;
   height: 135px;
@@ -256,19 +251,15 @@
   overflow: hidden;
 }
 
-/* Same proven recipe as the messenger head: clip a small box and centre a
-   54x54 avatar in it. `inset: auto` cancels the component's `inset-0` so the
-   width/position take effect (otherwise the head overflows huge). */
 .nitro-extended-profile__relationship-head .avatar-image {
   position: absolute !important;
-  inset: auto !important;
-  left: 50% !important;
-  top: 54% !important;
-  width: 50px !important;
-  height: 50px !important;
+  inset: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
   margin: 0 !important;
-  background-position: center center !important;
-  transform: translate(-50%, -50%) scale(.95) !important;
+  background-size: 60px auto !important;
+  background-position: -14px -21px !important;
+  transform: none !important;
 }
 
 .nitro-extended-profile__relationship-subcopy {
@@ -301,6 +292,7 @@
   border-right: 1px solid #afafaf;
   color: #111;
   font-size: 11px;
+  cursor: pointer;
 }
 
 .nitro-extended-profile__summary-button:first-child {
@@ -340,6 +332,10 @@
   background: #ece8dc;
 }
 
+.nitro-extended-profile-window__content.profile-card-background .nitro-extended-profile-window__body {
+  background: transparent;
+}
+
 .nitro-extended-profile-window__body--groups {
   min-height: 249px;
 }
@@ -387,10 +383,8 @@
 .nitro-extended-profile-groups__details {
   min-width: 0;
   min-height: 236px;
-  border: 1px solid #9e9e9e;
-  border-radius: 14px;
-  background: #bdbbbb;
-  padding: 11px;
+  max-height: 100%;
+  overflow-y: auto;
 }
 
 .nitro-extended-profile-group-info {
@@ -399,7 +393,7 @@
   gap: 12px;
   min-height: 100%;
   border: 1px solid #9f9f9f;
-  border-radius: 10px;
+  border-radius: 12px;
   background: #efede4;
   padding: 12px 14px;
 }
@@ -417,6 +411,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  overflow: hidden;
 }
 
 .nitro-extended-profile-group-info__meta {
@@ -467,9 +462,14 @@
   margin-top: auto;
 }
 
-.nitro-extended-profile-group-info .group-badge .badge-image {
-  transform: scale(2.1);
-  transform-origin: center;
+.nitro-extended-profile-group-info__badge-wrap .group-badge {
+  width: 100% !important;
+  height: 100% !important;
+  transform: none !important;
+  background-size: contain !important;
+  background-position: center !important;
+  background-repeat: no-repeat !important;
+  image-rendering: pixelated;
 }
 
 .nitro-extended-profile-window .layout-grid-item.active {
@@ -489,7 +489,94 @@
   justify-content: center;
 }
 
-.nitro-extended-profile-window .layout-grid-item .badge-image.group-badge {
-  width: auto !important;
-  height: auto !important;
+.nitro-extended-profile-groups__item {
+  overflow: hidden;
+}
+
+.nitro-extended-profile-groups__item .group-badge {
+  width: 40px !important;
+  height: 40px !important;
+  transform: none !important;
+  background-size: contain !important;
+  background-position: center !important;
+  background-repeat: no-repeat !important;
+  image-rendering: pixelated;
+}
+
+@media (max-width: 575.98px) {
+  .nitro-extended-profile-window__content {
+    overflow-y: auto;
+  }
+
+  .nitro-extended-profile-window__body--groups {
+    flex: 0 0 auto;
+    overflow: visible;
+  }
+
+  .nitro-extended-profile-window__panel {
+    height: auto;
+  }
+
+  .nitro-extended-profile__top {
+    grid-template-columns: minmax(0, 1fr);
+    min-height: 0;
+  }
+
+  .nitro-extended-profile__separator {
+    display: none;
+  }
+
+  .nitro-extended-profile-groups {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    height: auto;
+    min-height: 0;
+  }
+
+  .nitro-extended-profile-groups__sidebar {
+    min-width: 0;
+    flex: 0 0 auto;
+  }
+
+  .nitro-extended-profile-groups__list {
+    display: flex;
+    flex: 0 0 auto;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    gap: 6px;
+    max-width: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+    padding-right: 0;
+    padding-bottom: 6px;
+    scrollbar-width: thin;
+  }
+
+  .nitro-extended-profile-groups__item {
+    flex: 0 0 auto;
+    margin-bottom: 0;
+  }
+
+  .nitro-extended-profile-groups__details {
+    min-height: 0;
+    max-height: none;
+    overflow: visible;
+  }
+
+  .nitro-extended-profile-group-info {
+    grid-template-columns: 72px minmax(0, 1fr);
+    gap: 10px;
+    padding: 10px;
+  }
+
+  .nitro-extended-profile-group-info__badge-wrap {
+    width: 64px;
+    height: 64px;
+  }
+
+  .nitro-extended-profile-group-info__button {
+    min-width: 0;
+    width: 100%;
+  }
 }
diff --git a/src/hooks/fortune-wheel/useFortuneWheel.ts b/src/hooks/fortune-wheel/useFortuneWheel.ts
index c280289..75ad3f0 100644
--- a/src/hooks/fortune-wheel/useFortuneWheel.ts
+++ b/src/hooks/fortune-wheel/useFortuneWheel.ts
@@ -1,5 +1,5 @@
 import { IWheelAdminPrize, IWheelAdminPrizeEdit, IWheelPrize, IWheelRecentWin, WheelAdminGetPrizesComposer, WheelAdminPrizesEvent, WheelAdminSavePrizesComposer, WheelBuySpinComposer, WheelDataEvent, WheelOpenComposer, WheelRecentWinsEvent, WheelResultEvent, WheelSpinComposer } from '@nitrots/nitro-renderer';
-import { useCallback, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { useBetween } from 'use-between';
 import { SendMessageComposer } from '../../api';
 import { useMessageEvent } from '../events';
@@ -18,6 +18,15 @@ const useFortuneWheelState = () =>
     const [ isSpinning, setIsSpinning ] = useState(false);
     const [ adminPrizes, setAdminPrizes ] = useState<IWheelAdminPrize[]>([]);
 
+    // While the wheel is animating we hold back the recent-wins refresh: the
+    // server pushes the updated list (which already contains the just-won
+    // prize) the instant it answers the spin, ~5s before the wheel actually
+    // stops. Showing it immediately would spoil the result in the winners
+    // panel. We buffer it here and flush it in finishSpin (called when the
+    // reveal fires).
+    const spinAnimatingRef = useRef(false);
+    const bufferedWinsRef = useRef<IWheelRecentWin[] | null>(null);
+
     useMessageEvent<WheelAdminPrizesEvent>(WheelAdminPrizesEvent, event =>
     {
         setAdminPrizes(event.getParser().prizes);
@@ -35,13 +44,21 @@ const useFortuneWheelState = () =>
 
     useMessageEvent<WheelResultEvent>(WheelResultEvent, event =>
     {
+        // Set synchronously before the recent-wins packet (sent right after by
+        // the server) is processed, so its handler knows a spin is animating.
+        spinAnimatingRef.current = true;
         setPendingPrizeId(event.getParser().prizeId);
         setIsSpinning(true);
     });
 
     useMessageEvent<WheelRecentWinsEvent>(WheelRecentWinsEvent, event =>
     {
-        setRecentWins(event.getParser().wins);
+        const wins = event.getParser().wins;
+
+        // Mid-spin: stash the refreshed list and reveal it once the wheel
+        // stops. Otherwise (initial open, other refreshes) apply immediately.
+        if(spinAnimatingRef.current) bufferedWinsRef.current = wins;
+        else setRecentWins(wins);
     });
 
     const open = useCallback(() => SendMessageComposer(new WheelOpenComposer()), []);
@@ -56,8 +73,17 @@ const useFortuneWheelState = () =>
     const buySpin = useCallback(() => SendMessageComposer(new WheelBuySpinComposer()), []);
     const finishSpin = useCallback(() =>
     {
+        spinAnimatingRef.current = false;
         setIsSpinning(false);
         setPendingPrizeId(-1);
+
+        // Flush the winners list that arrived during the spin, now that the
+        // reveal has happened.
+        if(bufferedWinsRef.current)
+        {
+            setRecentWins(bufferedWinsRef.current);
+            bufferedWinsRef.current = null;
+        }
     }, []);
 
     const loadAdminPrizes = useCallback(() => SendMessageComposer(new WheelAdminGetPrizesComposer()), []);
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index 8a85f2a..46a0287 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -24,6 +24,7 @@ export * from './rooms/widgets';
 export * from './rooms/widgets/furniture';
 export * from './session';
 export * from './soundboard/useSoundboard';
+export * from './theme';
 export * from './translation';
 export * from './useLocalStorage';
 export * from './useSharedVisibility';
diff --git a/src/hooks/navigator/index.ts b/src/hooks/navigator/index.ts
index 67660d0..2aca523 100644
--- a/src/hooks/navigator/index.ts
+++ b/src/hooks/navigator/index.ts
@@ -1,4 +1,5 @@
 export { useNavigatorData } from './useNavigatorData';
+export { useNavigatorFavourite } from './useNavigatorFavourite';
 export { useNavigatorSearch } from './useNavigatorSearch';
 export { useNavigatorUiState } from './useNavigatorUiState';
 export { useNavigatorUiStore } from './navigatorUiStore';
diff --git a/src/hooks/navigator/navigatorFavouritesStore.test.ts b/src/hooks/navigator/navigatorFavouritesStore.test.ts
new file mode 100644
index 0000000..f2b1abc
--- /dev/null
+++ b/src/hooks/navigator/navigatorFavouritesStore.test.ts
@@ -0,0 +1,46 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import { useNavigatorFavouritesStore } from './navigatorFavouritesStore';
+
+const reset = () => useNavigatorFavouritesStore.setState({ ids: new Set<number>() });
+
+describe('navigatorFavouritesStore', () =>
+{
+    beforeEach(reset);
+
+    it('setAll replaces membership and coerces ids to numbers', () =>
+    {
+        useNavigatorFavouritesStore.getState().setAll([ '1', 2, '3' ] as any);
+        const { ids } = useNavigatorFavouritesStore.getState();
+        expect(ids.has(1)).toBe(true);
+        expect(ids.has(2)).toBe(true);
+        expect(ids.has(3)).toBe(true);
+        expect(ids.size).toBe(3);
+    });
+
+    it('apply(true) adds and apply(false) removes', () =>
+    {
+        const { apply } = useNavigatorFavouritesStore.getState();
+        apply(7, true);
+        expect(useNavigatorFavouritesStore.getState().ids.has(7)).toBe(true);
+        apply(7, false);
+        expect(useNavigatorFavouritesStore.getState().ids.has(7)).toBe(false);
+    });
+
+    it('apply returns the same state reference when nothing changes (no needless re-render)', () =>
+    {
+        useNavigatorFavouritesStore.getState().setAll([ 5 ]);
+        const before = useNavigatorFavouritesStore.getState().ids;
+        useNavigatorFavouritesStore.getState().apply(5, true); // already present
+        expect(useNavigatorFavouritesStore.getState().ids).toBe(before);
+        useNavigatorFavouritesStore.getState().apply(99, false); // already absent
+        expect(useNavigatorFavouritesStore.getState().ids).toBe(before);
+    });
+
+    it('apply creates a new Set reference when membership actually changes', () =>
+    {
+        useNavigatorFavouritesStore.getState().setAll([ 5 ]);
+        const before = useNavigatorFavouritesStore.getState().ids;
+        useNavigatorFavouritesStore.getState().apply(6, true);
+        expect(useNavigatorFavouritesStore.getState().ids).not.toBe(before);
+    });
+});
diff --git a/src/hooks/navigator/navigatorFavouritesStore.ts b/src/hooks/navigator/navigatorFavouritesStore.ts
new file mode 100644
index 0000000..cba51c7
--- /dev/null
+++ b/src/hooks/navigator/navigatorFavouritesStore.ts
@@ -0,0 +1,25 @@
+import { createNitroStore } from '../../state/createNitroStore';
+
+export type NavigatorFavouritesState = {
+    ids: Set<number>;
+};
+
+export type NavigatorFavouritesActions = {
+    setAll(roomIds: number[]): void;
+    apply(roomId: number, added: boolean): void;
+};
+
+export const useNavigatorFavouritesStore = createNitroStore<NavigatorFavouritesState & NavigatorFavouritesActions>()((set) => ({
+    ids: new Set<number>(),
+
+    setAll: (roomIds) => set({ ids: new Set(roomIds.map(Number)) }),
+    apply: (roomId, added) => set((s) =>
+    {
+        const id = Number(roomId);
+        if(added ? s.ids.has(id) : !s.ids.has(id)) return s;
+        const ids = new Set(s.ids);
+        if(added) ids.add(id);
+        else ids.delete(id);
+        return { ids };
+    })
+}));
diff --git a/src/hooks/navigator/useNavigatorData.ts b/src/hooks/navigator/useNavigatorData.ts
index 500fb9e..5d19b83 100644
--- a/src/hooks/navigator/useNavigatorData.ts
+++ b/src/hooks/navigator/useNavigatorData.ts
@@ -4,13 +4,13 @@ import { useNavigatorStore } from './useNavigatorStore';
 export const useNavigatorData = () =>
 {
     const {
-        categories, eventCategories, favouriteRoomIds,
+        categories, eventCategories,
         topLevelContext, topLevelContexts,
         navigatorSearches, navigatorData
     } = useBetween(useNavigatorStore);
 
     return {
-        categories, eventCategories, favouriteRoomIds,
+        categories, eventCategories,
         topLevelContext, topLevelContexts,
         navigatorSearches, navigatorData
     };
diff --git a/src/hooks/navigator/useNavigatorFavourite.ts b/src/hooks/navigator/useNavigatorFavourite.ts
new file mode 100644
index 0000000..f2e8ba8
--- /dev/null
+++ b/src/hooks/navigator/useNavigatorFavourite.ts
@@ -0,0 +1,12 @@
+import { useCallback } from 'react';
+import { ToggleFavoriteRoom } from '../../api';
+import { useNavigatorFavouritesStore } from './navigatorFavouritesStore';
+
+export const useNavigatorFavourite = (roomId: number) =>
+{
+    const isFavourite = useNavigatorFavouritesStore((s) => s.ids.has(Number(roomId)));
+
+    const toggle = useCallback(() => ToggleFavoriteRoom(Number(roomId), isFavourite), [ roomId, isFavourite ]);
+
+    return { isFavourite, toggle };
+};
diff --git a/src/hooks/navigator/useNavigatorSearch.test.tsx b/src/hooks/navigator/useNavigatorSearch.test.tsx
index f6858f0..57722ff 100644
--- a/src/hooks/navigator/useNavigatorSearch.test.tsx
+++ b/src/hooks/navigator/useNavigatorSearch.test.tsx
@@ -1,8 +1,6 @@
 /* @vitest-environment jsdom */
 
-import { FlatCreatedEvent, NavigatorSearchEvent,
-    NavigatorSearchResultSet } from '@nitrots/nitro-renderer';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { NavigatorSearchEvent, NavigatorSearchResultSet } from '@nitrots/nitro-renderer';
 import { act, cleanup, renderHook, waitFor } from '@testing-library/react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { mockEventDispatcher } from '../../nitro-renderer.mock';
@@ -13,23 +11,12 @@ import { useNavigatorSearch } from './useNavigatorSearch';
 // Helpers
 // ---------------------------------------------------------------------------
 
-/** Create a fresh QueryClient with retries off so failures are immediate. */
-const makeQueryClient = () =>
-    new QueryClient({
-        defaultOptions: {
-            queries: { retry: false, gcTime: 0 }
-        }
-    });
+// NOTE: useNavigatorSearch uses useMessageEvent + useState (NOT useNitroQuery).
+// The one-shot query pattern was reverted upstream (05d71dd1) because it left
+// the UI blank when the listener never matched. These tests exercise the
+// event-driven implementation directly — no QueryClient scaffolding.
 
-/** Wrapper factory — each test gets its own QueryClient instance. */
-const makeWrapper = (client: QueryClient) =>
-    ({ children }: { children: React.ReactNode }) => (
-        <QueryClientProvider client={ client }>
-            { children }
-        </QueryClientProvider>
-    );
-
-/** Build a fake NavigatorSearchEvent that getParser() returns a result with `code`. */
+/** Build a fake NavigatorSearchEvent whose getParser() returns a result with `code`. */
 const makeSearchEvent = (code: string) =>
 {
     // Cast constructors as `any` so tsgo doesn't check required args against
@@ -66,7 +53,6 @@ describe('useNavigatorSearch', () =>
 {
     beforeEach(() =>
     {
-        // Reset UI store state before each test
         useNavigatorUiStore.setState(INITIAL_UI);
     });
 
@@ -76,59 +62,44 @@ describe('useNavigatorSearch', () =>
         vi.clearAllMocks();
     });
 
-    it('1. with empty tabCode query is disabled — NavigatorSearchEvent does not update data', async () =>
+    it('1. with empty tabCode no fetch starts (the request effect is gated)', () =>
     {
-        const client = makeQueryClient();
-        const { result } = renderHook(() => useNavigatorSearch(), { wrapper: makeWrapper(client) });
+        const { result } = renderHook(() => useNavigatorSearch());
 
-        // Dispatch a search event — should be ignored (query disabled)
-        act(() =>
-        {
-            mockEventDispatcher.dispatchEvent(makeSearchEvent('public') as any);
-        });
-
-        // Data must stay null
-        expect(result.current.searchResult).toBeNull();
+        // No tab selected → the request effect short-circuits, nothing fetches.
         expect(result.current.isFetching).toBe(false);
+        expect(result.current.searchResult).toBeNull();
     });
 
-    it('2. after setTab("public"), NavigatorSearchComposer is fired and NavigatorSearchEvent resolves query', async () =>
+    it('2. after setTab("public"), the hook starts fetching and a matching event resolves it', async () =>
     {
-        const client = makeQueryClient();
-        const { result } = renderHook(() => useNavigatorSearch(), { wrapper: makeWrapper(client) });
+        const { result } = renderHook(() => useNavigatorSearch());
 
-        // Activate the query
         act(() =>
         {
             useNavigatorUiStore.getState().setTab('public');
         });
 
-        // Hook should start fetching
         await waitFor(() => expect(result.current.isFetching).toBe(true));
 
-        // Simulate server response
         act(() =>
         {
             mockEventDispatcher.dispatchEvent(makeSearchEvent('public') as any);
         });
 
-        // Query should resolve with the matching result
         await waitFor(() => expect(result.current.searchResult).not.toBeNull());
         expect((result.current.searchResult as any).code).toBe('public');
         expect(result.current.isFetching).toBe(false);
     });
 
-    it('3. after setFilter("cocco"), a new query fires and NavigatorSearchEvent resolves it', async () =>
+    it('3. after setFilter("cocco"), a new fetch fires and a matching event resolves it', async () =>
     {
-        const client = makeQueryClient();
-        const { result } = renderHook(() => useNavigatorSearch(), { wrapper: makeWrapper(client) });
+        const { result } = renderHook(() => useNavigatorSearch());
 
-        // First establish a tab
         act(() =>
         {
             useNavigatorUiStore.getState().setTab('public');
         });
-        // Resolve the initial query
         await waitFor(() => expect(result.current.isFetching).toBe(true));
         act(() =>
         {
@@ -136,7 +107,6 @@ describe('useNavigatorSearch', () =>
         });
         await waitFor(() => expect(result.current.isFetching).toBe(false));
 
-        // Now set a filter — triggers new query
         act(() =>
         {
             useNavigatorUiStore.getState().setFilter('cocco');
@@ -144,7 +114,6 @@ describe('useNavigatorSearch', () =>
 
         await waitFor(() => expect(result.current.isFetching).toBe(true));
 
-        // Resolve with matching event
         act(() =>
         {
             mockEventDispatcher.dispatchEvent(makeSearchEvent('public') as any);
@@ -152,24 +121,19 @@ describe('useNavigatorSearch', () =>
 
         await waitFor(() => expect(result.current.isFetching).toBe(false));
         expect((result.current.searchResult as any).code).toBe('public');
-
-        // Confirm filter is set
         expect(useNavigatorUiStore.getState().currentFilter).toBe('cocco');
     });
 
-    it('4. after setTab("events"), currentFilter resets to "" and new query fires for events', async () =>
+    it('4. after setTab("events"), currentFilter resets to "" and a new fetch fires for events', async () =>
     {
-        const client = makeQueryClient();
-        const { result } = renderHook(() => useNavigatorSearch(), { wrapper: makeWrapper(client) });
+        const { result } = renderHook(() => useNavigatorSearch());
 
-        // Establish public tab with a filter
         act(() =>
         {
             useNavigatorUiStore.getState().setTab('public');
             useNavigatorUiStore.getState().setFilter('some-filter');
         });
 
-        // Resolve the public+filter query
         await waitFor(() => expect(result.current.isFetching).toBe(true));
         act(() =>
         {
@@ -177,20 +141,16 @@ describe('useNavigatorSearch', () =>
         });
         await waitFor(() => expect(result.current.isFetching).toBe(false));
 
-        // Switch to events tab — should atomically reset filter
         act(() =>
         {
             useNavigatorUiStore.getState().setTab('events');
         });
 
-        // Filter must be cleared
         expect(useNavigatorUiStore.getState().currentFilter).toBe('');
         expect(useNavigatorUiStore.getState().currentTabCode).toBe('events');
 
-        // New query for 'events' fires
         await waitFor(() => expect(result.current.isFetching).toBe(true));
 
-        // Resolve with events result
         act(() =>
         {
             mockEventDispatcher.dispatchEvent(makeSearchEvent('events') as any);
@@ -202,8 +162,7 @@ describe('useNavigatorSearch', () =>
 
     it('5. NavigatorSearchEvent with result.code === currentTabCode is accepted and updates data', async () =>
     {
-        const client = makeQueryClient();
-        const { result } = renderHook(() => useNavigatorSearch(), { wrapper: makeWrapper(client) });
+        const { result } = renderHook(() => useNavigatorSearch());
 
         act(() =>
         {
@@ -226,8 +185,7 @@ describe('useNavigatorSearch', () =>
 
     it('6. NavigatorSearchEvent with result.code !== currentTabCode is REJECTED — data unchanged', async () =>
     {
-        const client = makeQueryClient();
-        const { result } = renderHook(() => useNavigatorSearch(), { wrapper: makeWrapper(client) });
+        const { result } = renderHook(() => useNavigatorSearch());
 
         act(() =>
         {
@@ -236,67 +194,20 @@ describe('useNavigatorSearch', () =>
 
         await waitFor(() => expect(result.current.isFetching).toBe(true));
 
-        // Dispatch an event for a DIFFERENT tab — should be rejected by accept filter
         act(() =>
         {
             mockEventDispatcher.dispatchEvent(makeSearchEvent('wrong_tab') as any);
         });
 
-        // Still fetching — the wrong-tab event was ignored
-        // (the query promise stays pending until it times out or a matching event arrives)
-        // After the wrong-tab dispatch, data should NOT be updated
+        // The wrong-tab event is filtered out by the accept guard.
         expect(result.current.searchResult).toBeNull();
 
-        // Now dispatch the correct one to unblock the test
         act(() =>
         {
             mockEventDispatcher.dispatchEvent(makeSearchEvent('public') as any);
         });
 
         await waitFor(() => expect(result.current.searchResult).not.toBeNull());
-        // Only the correct-tab result is stored
         expect((result.current.searchResult as any).code).toBe('public');
     });
-
-    it('7. dispatching FlatCreatedEvent triggers query invalidation (refetch starts)', async () =>
-    {
-        const client = makeQueryClient();
-
-        // Spy on invalidateQueries to confirm the invalidator calls it
-        const invalidateSpy = vi.spyOn(client, 'invalidateQueries');
-
-        const { result } = renderHook(() => useNavigatorSearch(), { wrapper: makeWrapper(client) });
-
-        // Establish a resolved query so there is something to invalidate
-        act(() =>
-        {
-            useNavigatorUiStore.getState().setTab('public');
-        });
-        await waitFor(() => expect(result.current.isFetching).toBe(true));
-        act(() =>
-        {
-            mockEventDispatcher.dispatchEvent(makeSearchEvent('public') as any);
-        });
-        await waitFor(() => expect(result.current.isFetching).toBe(false));
-
-        // Dispatch FlatCreatedEvent — should trigger invalidateQueries
-        const flatCreatedEv = new (FlatCreatedEvent as any)() as any;
-        flatCreatedEv.getParser = () => ({ roomId: 999 });
-        act(() =>
-        {
-            mockEventDispatcher.dispatchEvent(flatCreatedEv as any);
-        });
-
-        await waitFor(() => expect(invalidateSpy).toHaveBeenCalled());
-
-        // The invalidation should target the 'navigator', 'search' key prefix
-        const calls = invalidateSpy.mock.calls;
-        const calledWithSearchKey = calls.some(call =>
-        {
-            const opts = call[0] as any;
-            const key: string[] = opts?.queryKey ?? [];
-            return key[0] === 'navigator' && key[1] === 'search';
-        });
-        expect(calledWithSearchKey).toBe(true);
-    });
 });
diff --git a/src/hooks/navigator/useNavigatorSearch.ts b/src/hooks/navigator/useNavigatorSearch.ts
index fa5e021..cbbadc2 100644
--- a/src/hooks/navigator/useNavigatorSearch.ts
+++ b/src/hooks/navigator/useNavigatorSearch.ts
@@ -1,5 +1,4 @@
 import { FlatCreatedEvent, NavigatorSearchComposer, NavigatorSearchEvent, NavigatorSearchResultSet } from '@nitrots/nitro-renderer';
-import { useQueryClient } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
 import { SendMessageComposer } from '../../api';
 import { useMessageEvent } from '../events';
@@ -23,7 +22,6 @@ export const useNavigatorSearch = () =>
 {
     const tabCode = useNavigatorUiStore(s => s.currentTabCode);
     const filter  = useNavigatorUiStore(s => s.currentFilter);
-    const queryClient = useQueryClient();
 
     const [ searchResult, setSearchResult ] = useState<NavigatorSearchResultSet | null>(null);
     const [ isFetching, setIsFetching ] = useState(false);
@@ -49,11 +47,9 @@ export const useNavigatorSearch = () =>
         setIsFetching(false);
     });
 
-    // A newly created room invalidates the current search so it refetches.
+    // A newly created room refetches the current search.
     useMessageEvent<FlatCreatedEvent>(FlatCreatedEvent, () =>
     {
-        queryClient.invalidateQueries({ queryKey: [ 'navigator', 'search' ] });
-
         if(!tabCode) return;
 
         setIsFetching(true);
diff --git a/src/hooks/navigator/useNavigatorStore.test.tsx b/src/hooks/navigator/useNavigatorStore.test.tsx
index 2e09036..46fc97a 100644
--- a/src/hooks/navigator/useNavigatorStore.test.tsx
+++ b/src/hooks/navigator/useNavigatorStore.test.tsx
@@ -8,7 +8,7 @@ describe('navigator filter shapes (smoke)', () =>
     {
         const { result } = renderHook(() => useNavigatorData());
         expect(Object.keys(result.current).sort()).toEqual([
-            'categories', 'eventCategories', 'favouriteRoomIds',
+            'categories', 'eventCategories',
             'navigatorData', 'navigatorSearches',
             'topLevelContext', 'topLevelContexts'
         ].sort());
diff --git a/src/hooks/navigator/useNavigatorStore.ts b/src/hooks/navigator/useNavigatorStore.ts
index bf1a513..c8c5cb5 100644
--- a/src/hooks/navigator/useNavigatorStore.ts
+++ b/src/hooks/navigator/useNavigatorStore.ts
@@ -18,13 +18,13 @@ import { CreateRoomSession, GetConfigurationValue, INavigatorData,
     TryVisitRoom, VisitDesktop } from '../../api';
 import { useMessageEvent, useNitroEvent } from '../events';
 import { useNotification } from '../notification';
+import { useNavigatorFavouritesStore } from './navigatorFavouritesStore';
 import { useNavigatorUiStore } from './navigatorUiStore';
 
 export const useNavigatorStore = () =>
 {
     const [ categories, setCategories ] = useState<NavigatorCategoryDataParser[]>(null);
     const [ eventCategories, setEventCategories ] = useState<NavigatorEventCategoryDataParser[]>(null);
-    const [ favouriteRoomIds, setFavouriteRoomIds ] = useState<number[]>([]);
     const [ topLevelContext, setTopLevelContext ] = useState<NavigatorTopLevelContext>(null);
     const [ topLevelContexts, setTopLevelContexts ] = useState<NavigatorTopLevelContext[]>(null);
     const [ navigatorSearches, setNavigatorSearches ] = useState<NavigatorSavedSearch[]>(null);
@@ -48,21 +48,13 @@ export const useNavigatorStore = () =>
     useMessageEvent<FavouritesEvent>(FavouritesEvent, useCallback(event =>
     {
         const parser = event.getParser();
-        const favoriteIds = (parser.favoriteRoomIds || []).map((x: any) => Number(x));
-        setFavouriteRoomIds(favoriteIds);
+        useNavigatorFavouritesStore.getState().setAll(parser.favoriteRoomIds || []);
     }, []));
 
     useMessageEvent<FavouriteChangedEvent>(FavouriteChangedEvent, useCallback(event =>
     {
         const parser = event.getParser();
-        const roomId = Number(parser.flatId);
-        const added = !!parser.added;
-        setFavouriteRoomIds(prev =>
-        {
-            const ids = (prev || []).map((x: any) => Number(x));
-            if(added) return ids.includes(roomId) ? ids : [ ...ids, roomId ];
-            return ids.filter(id => id !== roomId);
-        });
+        useNavigatorFavouritesStore.getState().apply(parser.flatId, !!parser.added);
     }, []));
 
     useMessageEvent<CanCreateRoomEventEvent>(CanCreateRoomEventEvent, useCallback(event =>
@@ -280,7 +272,7 @@ export const useNavigatorStore = () =>
     }, []));
 
     return {
-        categories, eventCategories, favouriteRoomIds,
+        categories, eventCategories,
         topLevelContext, topLevelContexts,
         navigatorSearches, navigatorData
     };
diff --git a/src/hooks/rooms/widgets/useChatCommandSelector.helpers.test.ts b/src/hooks/rooms/widgets/useChatCommandSelector.helpers.test.ts
new file mode 100644
index 0000000..9daa747
--- /dev/null
+++ b/src/hooks/rooms/widgets/useChatCommandSelector.helpers.test.ts
@@ -0,0 +1,51 @@
+import { describe, expect, it } from 'vitest';
+import { CommandDefinition } from '../../../api';
+import { getChatCommandQuery, getRankedCommandSuggestions } from './useChatCommandSelector.helpers';
+
+const commands: CommandDefinition[] = [
+    { key: 'commands', description: 'Mostra tutti i comandi' },
+    { key: 'empty', description: 'Svuota la stanza' },
+    { key: 'emptybots', description: 'Svuota inventario bot' },
+    { key: 'xempty', description: 'Comando di test' },
+    { key: 'ejectall', description: 'Espelli tutti i furni' },
+    { key: 'togglefps', description: 'Mostra o nasconde FPS' }
+];
+
+describe('getChatCommandQuery', () =>
+{
+    it('returns null when the input is not a command prefix', () =>
+    {
+        expect(getChatCommandQuery('ciao')).toBeNull();
+        expect(getChatCommandQuery(':empty ')).toBeNull();
+    });
+
+    it('returns the normalized command query', () =>
+    {
+        expect(getChatCommandQuery(':Em')).toBe('em');
+    });
+});
+
+describe('getRankedCommandSuggestions', () =>
+{
+    it('ranks prefix matches before contains and description matches', () =>
+    {
+        const result = getRankedCommandSuggestions(commands, 'em', 10);
+
+        expect(result.map(command => command.key)).toEqual([ 'empty', 'emptybots', 'xempty' ]);
+    });
+
+    it('matches command descriptions when the key does not match', () =>
+    {
+        const result = getRankedCommandSuggestions(commands, 'furni', 10);
+
+        expect(result.map(command => command.key)).toEqual([ 'ejectall' ]);
+        expect(result[0].matchType).toBe('description');
+    });
+
+    it('limits the visible suggestions', () =>
+    {
+        const result = getRankedCommandSuggestions(commands, '', 2);
+
+        expect(result).toHaveLength(2);
+    });
+});
diff --git a/src/hooks/rooms/widgets/useChatCommandSelector.helpers.ts b/src/hooks/rooms/widgets/useChatCommandSelector.helpers.ts
new file mode 100644
index 0000000..b9bc98f
--- /dev/null
+++ b/src/hooks/rooms/widgets/useChatCommandSelector.helpers.ts
@@ -0,0 +1,57 @@
+import { CommandDefinition } from '../../../api';
+
+export interface RankedCommandDefinition extends CommandDefinition
+{
+    matchType: 'prefix' | 'contains' | 'description' | 'all';
+}
+
+const normalize = (value: string) => value.trim().toLowerCase();
+
+export const getChatCommandQuery = (chatValue: string): string | null =>
+{
+    if(!chatValue.startsWith(':') || chatValue.includes(' ')) return null;
+
+    return normalize(chatValue.slice(1));
+};
+
+const getCommandScore = (command: CommandDefinition, query: string): { score: number; matchType: RankedCommandDefinition['matchType'] } | null =>
+{
+    const key = normalize(command.key);
+    const description = normalize(command.description || '');
+
+    if(!query) return { score: 100 + key.length, matchType: 'all' };
+    if(key === query) return { score: 0, matchType: 'prefix' };
+    if(key.startsWith(query)) return { score: 10 + (key.length - query.length), matchType: 'prefix' };
+    if(key.includes(query)) return { score: 40 + key.indexOf(query), matchType: 'contains' };
+    if(description.includes(query)) return { score: 70 + description.indexOf(query), matchType: 'description' };
+
+    return null;
+};
+
+export const getRankedCommandSuggestions = (commands: CommandDefinition[], query: string, limit: number): RankedCommandDefinition[] =>
+{
+    const seen = new Set<string>();
+
+    return commands
+        .map(command =>
+        {
+            const match = getCommandScore(command, query);
+
+            if(!match) return null;
+
+            return { command, score: match.score, matchType: match.matchType };
+        })
+        .filter((entry): entry is { command: CommandDefinition; score: number; matchType: RankedCommandDefinition['matchType'] } => !!entry)
+        .sort((a, b) => (a.score - b.score) || a.command.key.localeCompare(b.command.key))
+        .filter(entry =>
+        {
+            const key = normalize(entry.command.key);
+
+            if(seen.has(key)) return false;
+
+            seen.add(key);
+            return true;
+        })
+        .slice(0, limit)
+        .map(entry => ({ ...entry.command, matchType: entry.matchType }));
+};
diff --git a/src/hooks/rooms/widgets/useChatCommandSelector.ts b/src/hooks/rooms/widgets/useChatCommandSelector.ts
index c999dec..55785a2 100644
--- a/src/hooks/rooms/widgets/useChatCommandSelector.ts
+++ b/src/hooks/rooms/widgets/useChatCommandSelector.ts
@@ -3,6 +3,9 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { CommandDefinition, LocalizeText } from '../../../api';
 import { createNitroStore } from '../../../state/createNitroStore';
 import { useMessageEvent } from '../../events';
+import { getChatCommandQuery, getRankedCommandSuggestions } from './useChatCommandSelector.helpers';
+
+const MAX_VISIBLE_COMMANDS = 8;
 
 // Client-only commands are static; safe to keep at module scope. The
 // `descriptionKey` is a LocalizeText slot resolved at merge time so
@@ -62,7 +65,7 @@ const useChatCommandStore = createNitroStore<ChatCommandStore>()((set) => ({
     markListenerRegistered: () => set({ isListenerRegistered: true })
 }));
 
-const ensureGlobalListener = (): void =>
+export const ensureChatCommandListener = (): void =>
 {
     if(useChatCommandStore.getState().isListenerRegistered) return;
 
@@ -86,20 +89,20 @@ const ensureGlobalListener = (): void =>
 
 // Try once at module load so the server's response landing before any
 // React mount still hits the cache.
-ensureGlobalListener();
+ensureChatCommandListener();
 
 export const useChatCommandSelector = (chatValue: string) =>
 {
     const serverCommands = useChatCommandStore(s => s.serverCommands);
     const setServerCommands = useChatCommandStore(s => s.setServerCommands);
     const [ selectedIndex, setSelectedIndex ] = useState(0);
-    const [ dismissed, setDismissed ] = useState(false);
+    const [ dismissedQuery, setDismissedQuery ] = useState<string | null>(null);
 
     useEffect(() =>
     {
         // Cover the case where the module-level registration failed
         // because GetCommunication() wasn't ready at import time.
-        ensureGlobalListener();
+        ensureChatCommandListener();
     }, []);
 
     // Late updates (rank change, etc.) — go through the store so all
@@ -123,61 +126,55 @@ export const useChatCommandSelector = (chatValue: string) =>
         return merged.sort((a, b) => a.key.localeCompare(b.key));
     }, [ serverCommands ]);
 
-    const filterText = useMemo(() =>
-    {
-        if(!chatValue.startsWith(':') || chatValue.includes(' ')) return '';
-
-        return chatValue.slice(1).toLowerCase();
-    }, [ chatValue ]);
+    const filterText = useMemo(() => getChatCommandQuery(chatValue), [ chatValue ]);
 
     const filteredCommands = useMemo(() =>
     {
-        if(!filterText && !chatValue.startsWith(':')) return [];
+        if(filterText === null) return [];
 
-        return allCommands.filter(cmd => cmd.key.toLowerCase().startsWith(filterText));
-    }, [ allCommands, filterText, chatValue ]);
+        return getRankedCommandSuggestions(allCommands, filterText, MAX_VISIBLE_COMMANDS);
+    }, [ allCommands, filterText ]);
 
     const isVisible = useMemo(() =>
     {
-        return chatValue.startsWith(':') && !chatValue.includes(' ') && filteredCommands.length > 0 && !dismissed;
-    }, [ chatValue, filteredCommands, dismissed ]);
+        return filterText !== null && filteredCommands.length > 0 && dismissedQuery !== filterText;
+    }, [ filterText, filteredCommands, dismissedQuery ]);
+
+    const boundedSelectedIndex = useMemo(() =>
+    {
+        if(!filteredCommands.length) return 0;
+
+        return Math.min(selectedIndex, filteredCommands.length - 1);
+    }, [ filteredCommands.length, selectedIndex ]);
 
     const moveUp = useCallback(() =>
     {
-        setSelectedIndex(prev => (prev <= 0 ? filteredCommands.length - 1 : prev - 1));
+        if(!filteredCommands.length) return;
+
+        setSelectedIndex(prev => ((prev <= 0 || prev >= filteredCommands.length) ? filteredCommands.length - 1 : prev - 1));
     }, [ filteredCommands.length ]);
 
     const moveDown = useCallback(() =>
     {
+        if(!filteredCommands.length) return;
+
         setSelectedIndex(prev => (prev >= filteredCommands.length - 1 ? 0 : prev + 1));
     }, [ filteredCommands.length ]);
 
     const selectCurrent = useCallback((): CommandDefinition | null =>
     {
-        if(selectedIndex >= 0 && selectedIndex < filteredCommands.length)
+        if(boundedSelectedIndex >= 0 && boundedSelectedIndex < filteredCommands.length)
         {
-            return filteredCommands[selectedIndex];
+            return filteredCommands[boundedSelectedIndex];
         }
 
         return null;
-    }, [ selectedIndex, filteredCommands ]);
+    }, [ boundedSelectedIndex, filteredCommands ]);
 
     const close = useCallback(() =>
     {
-        setDismissed(true);
-    }, []);
-
-    // Reset dismissed when chatValue changes to a new command start
-    useEffect(() =>
-    {
-        if(chatValue === ':' || chatValue === '') setDismissed(false);
-    }, [ chatValue ]);
-
-    // Reset selectedIndex when filtered list changes
-    useEffect(() =>
-    {
-        setSelectedIndex(0);
+        setDismissedQuery(filterText);
     }, [ filterText ]);
 
-    return { isVisible, filteredCommands, selectedIndex, setSelectedIndex, moveUp, moveDown, selectCurrent, close };
+    return { isVisible, filteredCommands, selectedIndex: boundedSelectedIndex, setSelectedIndex, moveUp, moveDown, selectCurrent, close };
 };
diff --git a/src/hooks/theme/index.ts b/src/hooks/theme/index.ts
new file mode 100644
index 0000000..effac86
--- /dev/null
+++ b/src/hooks/theme/index.ts
@@ -0,0 +1 @@
+export * from './useThemes';
diff --git a/src/hooks/theme/useThemes.ts b/src/hooks/theme/useThemes.ts
new file mode 100644
index 0000000..c2ef444
--- /dev/null
+++ b/src/hooks/theme/useThemes.ts
@@ -0,0 +1,108 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useBetween } from 'use-between';
+import { ApplyThemePieces, ClearTheme, FetchThemeIndex, FetchThemeManifest, GetConfigurationValue, LocalStorageKeys, ThemeInfo, ThemeManifest } from '../../api';
+import { useLocalStorage } from '../useLocalStorage';
+
+// Per-user custom theme selection.
+//  - activeThemeId: '' = default (no custom theme). Default for new users comes
+//    from ui-config `theme.default` so the admin can set a hotel-wide default
+//    (like catalog.classic.style), while each user can override from Settings.
+//  - enabledPieces[themeId]: which graphic pieces of that theme are active
+//    (checkboxes). If absent, defaults to ui-config `theme.default.pieces`
+//    (when on the default theme) or ALL pieces.
+const useThemesState = () =>
+{
+    const [ activeThemeId, setActiveThemeId ] = useLocalStorage<string>(LocalStorageKeys.THEME_ACTIVE, GetConfigurationValue<string>('theme.default', ''));
+    const [ enabledPieces, setEnabledPieces ] = useLocalStorage<Record<string, string[]>>(LocalStorageKeys.THEME_PIECES, {});
+    const [ themes, setThemes ] = useState<ThemeInfo[]>([]);
+    const [ manifest, setManifest ] = useState<ThemeManifest>(null);
+    const [ loaded, setLoaded ] = useState(false);
+
+    // Load the theme index once.
+    useEffect(() =>
+    {
+        let alive = true;
+
+        FetchThemeIndex().then(list =>
+        {
+            if(alive) setThemes(list);
+        }).finally(() =>
+        {
+            if(alive) setLoaded(true);
+        });
+
+        return () => { alive = false; };
+    }, []);
+
+    // Load the manifest whenever the active theme changes.
+    useEffect(() =>
+    {
+        let alive = true;
+
+        if(!activeThemeId)
+        {
+            setManifest(null);
+            ClearTheme();
+            return;
+        }
+
+        FetchThemeManifest(activeThemeId).then(m =>
+        {
+            if(!alive) return;
+
+            setManifest(m);
+
+            if(!m) ClearTheme(); // broken/missing manifest -> full fallback to default
+        });
+
+        return () => { alive = false; };
+    }, [ activeThemeId ]);
+
+    // Which pieces are enabled for the current theme.
+    const activeEnabled = useMemo(() =>
+    {
+        if(!manifest) return [] as string[];
+
+        const stored = enabledPieces[activeThemeId];
+
+        if(stored) return stored;
+
+        const fromConfig = GetConfigurationValue<string[]>('theme.default.pieces', null);
+
+        // Default: config list (if this is the default theme) else every piece on.
+        if(fromConfig && activeThemeId === GetConfigurationValue<string>('theme.default', '')) return fromConfig;
+
+        return manifest.pieces.map(p => p.id);
+    }, [ manifest, enabledPieces, activeThemeId ]);
+
+    // Apply (inject/remove <link>s) whenever theme or enabled pieces change.
+    useEffect(() =>
+    {
+        if(!activeThemeId || !manifest)
+        {
+            ClearTheme();
+            return;
+        }
+
+        ApplyThemePieces(activeThemeId, manifest.pieces.filter(p => activeEnabled.includes(p.id)));
+    }, [ activeThemeId, manifest, activeEnabled ]);
+
+    const selectTheme = (id: string) => setActiveThemeId(id || '');
+
+    const togglePiece = (pieceId: string) =>
+    {
+        if(!activeThemeId || !manifest) return;
+
+        setEnabledPieces(prev =>
+        {
+            const current = prev[activeThemeId] ?? manifest.pieces.map(p => p.id);
+            const next = current.includes(pieceId) ? current.filter(x => x !== pieceId) : [ ...current, pieceId ];
+
+            return { ...prev, [activeThemeId]: next };
+        });
+    };
+
+    return { themes, activeThemeId, manifest, activeEnabled, loaded, selectTheme, togglePiece };
+};
+
+export const useThemes = () => useBetween(useThemesState);