From 33c31fe07de4795c3ae7d0ab3bb3c65640b07da1 Mon Sep 17 00:00:00 2001
From: duckietm <troop@mailtjes.com>
Date: Mon, 23 Mar 2026 15:02:20 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=86=95=20=20Added=20New=20catalogue=20pag?=
 =?UTF-8?q?e?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/renderer-config.json                   | 110 -------
 src/api/ui-settings/IUiSettings.ts            |  43 +++
 src/api/ui-settings/UiSettingsContext.tsx     | 224 +++++++++++++
 src/api/ui-settings/index.ts                  |   2 +
 .../catalog/CatalogAdminContext.tsx           | 296 ++++++++++++++++++
 src/components/catalog/CatalogClassicView.tsx | 183 +++++++++++
 src/components/catalog/CatalogModernView.tsx  | 291 +++++++++++++++++
 src/components/catalog/CatalogView.tsx        | 114 +------
 .../views/admin/CatalogAdminOfferEditView.tsx | 225 +++++++++++++
 .../views/admin/CatalogAdminPageEditView.tsx  | 153 +++++++++
 .../catalog-rail/CatalogRailItemView.tsx      |  30 ++
 .../views/favorites/CatalogFavoritesView.tsx  | 154 +++++++++
 .../navigation/CatalogBreadcrumbView.tsx      |  39 +++
 .../navigation/CatalogNavigationItemView.tsx  | 132 +++++++-
 .../navigation/CatalogNavigationView.tsx      |  23 +-
 .../page/common/CatalogGridOfferView.tsx      |  26 +-
 .../views/page/common/CatalogSearchView.tsx   |  43 +--
 .../layout/CatalogLayoutCustomPrefixView.tsx  |  85 ++---
 .../page/layout/CatalogLayoutDefaultView.tsx  | 125 +++++---
 .../page/layout/CatalogLayoutPets3View.tsx    |  33 +-
 .../page/layout/CatalogLayoutTrophiesView.tsx | 128 ++++++--
 .../page/layout/pets/CatalogLayoutPetView.tsx | 177 ++++++++---
 .../widgets/CatalogItemGridWidgetView.tsx     |  66 +++-
 .../widgets/CatalogPriceDisplayWidgetView.tsx |  14 +-
 .../page/widgets/CatalogSpinnerWidgetView.tsx |  34 +-
 .../InterfaceColorTabView.tsx                 | 288 +++++++++++++++++
 .../InterfaceImageTabView.tsx                 |  52 +++
 src/hooks/catalog/index.ts                    |   1 +
 src/hooks/catalog/useCatalogFavorites.ts      | 129 ++++++++
 29 files changed, 2746 insertions(+), 474 deletions(-)
 delete mode 100644 public/renderer-config.json
 create mode 100644 src/api/ui-settings/IUiSettings.ts
 create mode 100644 src/api/ui-settings/UiSettingsContext.tsx
 create mode 100644 src/api/ui-settings/index.ts
 create mode 100644 src/components/catalog/CatalogAdminContext.tsx
 create mode 100644 src/components/catalog/CatalogClassicView.tsx
 create mode 100644 src/components/catalog/CatalogModernView.tsx
 create mode 100644 src/components/catalog/views/admin/CatalogAdminOfferEditView.tsx
 create mode 100644 src/components/catalog/views/admin/CatalogAdminPageEditView.tsx
 create mode 100644 src/components/catalog/views/catalog-rail/CatalogRailItemView.tsx
 create mode 100644 src/components/catalog/views/favorites/CatalogFavoritesView.tsx
 create mode 100644 src/components/catalog/views/navigation/CatalogBreadcrumbView.tsx
 create mode 100644 src/components/interface-settings/InterfaceColorTabView.tsx
 create mode 100644 src/components/interface-settings/InterfaceImageTabView.tsx
 create mode 100644 src/hooks/catalog/useCatalogFavorites.ts

diff --git a/public/renderer-config.json b/public/renderer-config.json
deleted file mode 100644
index 1c2b22a..0000000
--- a/public/renderer-config.json
+++ /dev/null
@@ -1,110 +0,0 @@
-{
-    "socket.url": "ws://localhost:2097",
-    "asset.url": "http://localhost:3000/nitro-assets",
-    "image.library.url": "http://localhost:3000/swf/c_images/",
-    "hof.furni.url": "http://localhost:3000/swf/dcr/hof_furni",
-    "images.url": "${asset.url}/images",
-    "gamedata.url": "${asset.url}/gamedata",
-    "sounds.url": "${asset.url}/sounds/%sample%.mp3",
-    "external.texts.url": [ "${gamedata.url}/ExternalTexts.json", "${gamedata.url}/UITexts.json" ],
-    "external.samples.url": "${hof.furni.url}/mp3/sound_machine_sample_%sample%.mp3",
-    "furnidata.url": "${gamedata.url}/FurnitureData.json",
-    "productdata.url": "${gamedata.url}/ProductData.json",
-    "avatar.actions.url": "${gamedata.url}/HabboAvatarActions.json",
-    "avatar.figuredata.url": "${gamedata.url}/FigureData.json",
-    "avatar.figuremap.url": "${gamedata.url}/FigureMap.json",
-    "avatar.effectmap.url": "${gamedata.url}/EffectMap.json",
-    "avatar.asset.url": "${asset.url}/bundled/figure/%libname%.nitro",
-    "avatar.asset.effect.url": "${asset.url}/bundled/effect/%libname%.nitro",
-    "furni.asset.url": "${asset.url}/bundled/furniture/%libname%.nitro",
-    "furni.asset.icon.url": "${hof.furni.url}/icons/%libname%%param%_icon.png",
-    "pet.asset.url": "${asset.url}/bundled/pet/%libname%.nitro",
-    "generic.asset.url": "${asset.url}/bundled/generic/%libname%.nitro",
-    "badge.asset.url": "${image.library.url}album1584/%badgename%.gif",
-    "furni.rotation.bounce.steps": 20,
-    "furni.rotation.bounce.height": 0.0625,
-    "enable.avatar.arrow": false,
-    "system.log.debug": true,
-    "system.log.warn": true,
-    "system.log.error": true,
-    "system.log.events": true,
-    "system.log.packets": true,
-    "system.fps.animation": 24,
-    "system.fps.max": 60,
-    "system.pong.manually": true,
-    "system.pong.interval.ms": 20000,
-    "room.color.skip.transition": true,
-    "room.landscapes.enabled": true,
-    "avatar.mandatory.libraries": [
-        "bd:1",
-        "li:0"
-    ],
-    "avatar.mandatory.effect.libraries": [
-        "dance.1",
-        "dance.2",
-        "dance.3",
-        "dance.4"
-    ],
-    "avatar.default.figuredata": {"palettes":[{"id":1,"colors":[{"id":99999,"index":1001,"club":0,"selectable":false,"hexCode":"DDDDDD"},{"id":99998,"index":1001,"club":0,"selectable":false,"hexCode":"FAFAFA"}]},{"id":3,"colors":[{"id":10001,"index":1001,"club":0,"selectable":false,"hexCode":"EEEEEE"},{"id":10002,"index":1002,"club":0,"selectable":false,"hexCode":"FA3831"},{"id":10003,"index":1003,"club":0,"selectable":false,"hexCode":"FD92A0"},{"id":10004,"index":1004,"club":0,"selectable":false,"hexCode":"2AC7D2"},{"id":10005,"index":1005,"club":0,"selectable":false,"hexCode":"35332C"},{"id":10006,"index":1006,"club":0,"selectable":false,"hexCode":"EFFF92"},{"id":10007,"index":1007,"club":0,"selectable":false,"hexCode":"C6FF98"},{"id":10008,"index":1008,"club":0,"selectable":false,"hexCode":"FF925A"},{"id":10009,"index":1009,"club":0,"selectable":false,"hexCode":"9D597E"},{"id":10010,"index":1010,"club":0,"selectable":false,"hexCode":"B6F3FF"},{"id":10011,"index":1011,"club":0,"selectable":false,"hexCode":"6DFF33"},{"id":10012,"index":1012,"club":0,"selectable":false,"hexCode":"3378C9"},{"id":10013,"index":1013,"club":0,"selectable":false,"hexCode":"FFB631"},{"id":10014,"index":1014,"club":0,"selectable":false,"hexCode":"DFA1E9"},{"id":10015,"index":1015,"club":0,"selectable":false,"hexCode":"F9FB32"},{"id":10016,"index":1016,"club":0,"selectable":false,"hexCode":"CAAF8F"},{"id":10017,"index":1017,"club":0,"selectable":false,"hexCode":"C5C6C5"},{"id":10018,"index":1018,"club":0,"selectable":false,"hexCode":"47623D"},{"id":10019,"index":1019,"club":0,"selectable":false,"hexCode":"8A8361"},{"id":10020,"index":1020,"club":0,"selectable":false,"hexCode":"FF8C33"},{"id":10021,"index":1021,"club":0,"selectable":false,"hexCode":"54C627"},{"id":10022,"index":1022,"club":0,"selectable":false,"hexCode":"1E6C99"},{"id":10023,"index":1023,"club":0,"selectable":false,"hexCode":"984F88"},{"id":10024,"index":1024,"club":0,"selectable":false,"hexCode":"77C8FF"},{"id":10025,"index":1025,"club":0,"selectable":false,"hexCode":"FFC08E"},{"id":10026,"index":1026,"club":0,"selectable":false,"hexCode":"3C4B87"},{"id":10027,"index":1027,"club":0,"selectable":false,"hexCode":"7C2C47"},{"id":10028,"index":1028,"club":0,"selectable":false,"hexCode":"D7FFE3"},{"id":10029,"index":1029,"club":0,"selectable":false,"hexCode":"8F3F1C"},{"id":10030,"index":1030,"club":0,"selectable":false,"hexCode":"FF6393"},{"id":10031,"index":1031,"club":0,"selectable":false,"hexCode":"1F9B79"},{"id":10032,"index":1032,"club":0,"selectable":false,"hexCode":"FDFF33"}]}],"setTypes":[{"type":"hd","paletteId":1,"mandatory_f_0":true,"mandatory_f_1":true,"mandatory_m_0":true,"mandatory_m_1":true,"sets":[{"id":99999,"gender":"U","club":0,"colorable":true,"selectable":false,"preselectable":false,"sellable":false,"parts":[{"id":1,"type":"bd","colorable":true,"index":0,"colorindex":1},{"id":1,"type":"hd","colorable":true,"index":0,"colorindex":1},{"id":1,"type":"lh","colorable":true,"index":0,"colorindex":1},{"id":1,"type":"rh","colorable":true,"index":0,"colorindex":1}]}]},{"type":"bds","paletteId":1,"mandatory_f_0":false,"mandatory_f_1":false,"mandatory_m_0":false,"mandatory_m_1":false,"sets":[{"id":10001,"gender":"U","club":0,"colorable":true,"selectable":false,"preselectable":false,"sellable":false,"parts":[{"id":10001,"type":"bds","colorable":true,"index":0,"colorindex":1},{"id":10001,"type":"lhs","colorable":true,"index":0,"colorindex":1},{"id":10001,"type":"rhs","colorable":true,"index":0,"colorindex":1}],"hiddenLayers":[{"partType":"bd"},{"partType":"rh"},{"partType":"lh"}]}]},{"type":"ss","paletteId":3,"mandatory_f_0":false,"mandatory_f_1":false,"mandatory_m_0":false,"mandatory_m_1":false,"sets":[{"id":10010,"gender":"F","club":0,"colorable":true,"selectable":false,"preselectable":false,"sellable":false,"parts":[{"id":10001,"type":"ss","colorable":true,"index":0,"colorindex":1}],"hiddenLayers":[{"partType":"ch"},{"partType":"lg"},{"partType":"ca"},{"partType":"wa"},{"partType":"sh"},{"partType":"ls"},{"partType":"rs"},{"partType":"lc"},{"partType":"rc"},{"partType":"cc"},{"partType":"cp"}]},{"id":10011,"gender":"M","club":0,"colorable":true,"selectable":false,"preselectable":false,"sellable":false,"parts":[{"id":10002,"type":"ss","colorable":true,"index":0,"colorindex":1}],"hiddenLayers":[{"partType":"ch"},{"partType":"lg"},{"partType":"ca"},{"partType":"wa"},{"partType":"sh"},{"partType":"ls"},{"partType":"rs"},{"partType":"lc"},{"partType":"rc"},{"partType":"cc"},{"partType":"cp"}]}]}]},
-    "avatar.default.actions": {
-        "actions": [
-            {
-                "id": "Default",
-                "state": "std",
-                "precedence": 1000,
-                "main": true,
-                "isDefault": true,
-                "geometryType": "vertical",
-                "activePartSet": "figure",
-                "assetPartDefinition": "std"
-            }
-        ]
-    },
-    "pet.types": [
-        "dog",
-        "cat",
-        "croco",
-        "terrier",
-        "bear",
-        "pig",
-        "lion",
-        "rhino",
-        "spider",
-        "turtle",
-        "chicken",
-        "frog",
-        "dragon",
-        "monster",
-        "monkey",
-        "horse",
-        "monsterplant",
-        "bunnyeaster",
-        "bunnyevil",
-        "bunnydepressed",
-        "bunnylove",
-        "pigeongood",
-        "pigeonevil",
-        "demonmonkey",
-        "bearbaby",
-        "terrierbaby",
-        "gnome",
-        "leprechaun",
-        "kittenbaby",
-        "puppybaby",
-        "pigletbaby",
-        "haloompa",
-        "fools",
-        "pterosaur",
-        "velociraptor",
-        "cow",
-        "dragondog"
-    ],
-    "preload.assets.urls": [
-        "${asset.url}/bundled/generic/avatar_additions.nitro",
-        "${asset.url}/bundled/generic/group_badge.nitro",
-        "${asset.url}/bundled/generic/floor_editor.nitro",
-        "${images.url}/loading_icon.png",
-        "${images.url}/clear_icon.png",
-        "${images.url}/big_arrow.png"
-    ]
-}
diff --git a/src/api/ui-settings/IUiSettings.ts b/src/api/ui-settings/IUiSettings.ts
new file mode 100644
index 0000000..5c6e96d
--- /dev/null
+++ b/src/api/ui-settings/IUiSettings.ts
@@ -0,0 +1,43 @@
+export interface IUiSettings
+{
+    colorMode: 'color' | 'image' | 'default';
+    headerColor: string;
+    headerImageUrl: string;
+    headerAlpha: number;
+}
+
+export const DEFAULT_UI_SETTINGS: IUiSettings = {
+    colorMode: 'default',
+    headerColor: '#1E7295',
+    headerImageUrl: '',
+    headerAlpha: 100
+};
+
+export const PRESET_COLORS: string[] = [
+    '#000000', '#444444', '#888888', '#CCCCCC', '#660000', '#CC3333', '#FF6666', '#CC6600',
+    '#FF3333', '#FF6633', '#FF9933', '#FFCC00', '#FFFF00', '#66FF00', '#00CC00', '#009900',
+    '#00FFCC', '#33CCFF', '#3366FF', '#0000CC', '#6633CC', '#9933FF', '#CC33FF', '#FF66CC',
+    '#FF99CC', '#1E7295', '#185D79', '#2DABC2', '#2B91A7', '#283F5D'
+];
+
+export interface IThemePreset
+{
+    name: string;
+    color: string;
+    alpha: number;
+}
+
+export const THEME_PRESETS: IThemePreset[] = [
+    { name: 'default', color: '#1E7295', alpha: 100 },
+    { name: 'ocean', color: '#0077B6', alpha: 100 },
+    { name: 'forest', color: '#2D6A4F', alpha: 100 },
+    { name: 'sunset', color: '#E76F51', alpha: 100 },
+    { name: 'royal', color: '#7B2CBF', alpha: 100 },
+    { name: 'midnight', color: '#1B1B2F', alpha: 100 },
+    { name: 'cherry', color: '#C1121F', alpha: 100 },
+    { name: 'gold', color: '#B8860B', alpha: 100 },
+    { name: 'slate', color: '#475569', alpha: 100 },
+    { name: 'candy', color: '#FF69B4', alpha: 100 },
+    { name: 'emerald', color: '#059669', alpha: 100 },
+    { name: 'volcano', color: '#DC2626', alpha: 90 },
+];
diff --git a/src/api/ui-settings/UiSettingsContext.tsx b/src/api/ui-settings/UiSettingsContext.tsx
new file mode 100644
index 0000000..99685ce
--- /dev/null
+++ b/src/api/ui-settings/UiSettingsContext.tsx
@@ -0,0 +1,224 @@
+import { GetCommunication, UiSettingsDataEvent, UiSettingsLoadComposer, UiSettingsSaveComposer } from '@nitrots/nitro-renderer';
+import { createContext, FC, PropsWithChildren, useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { DEFAULT_UI_SETTINGS, IUiSettings } from './IUiSettings';
+
+const STORAGE_KEY = 'nitro.ui.settings';
+
+interface IUiSettingsContext
+{
+    settings: IUiSettings;
+    isCustomActive: boolean;
+    updateSettings: (partial: Partial<IUiSettings>) => void;
+    resetSettings: () => void;
+    getHeaderStyle: () => React.CSSProperties;
+    getTabsStyle: () => React.CSSProperties;
+    getAccentColor: () => string;
+}
+
+const UiSettingsContext = createContext<IUiSettingsContext>({
+    settings: DEFAULT_UI_SETTINGS,
+    isCustomActive: false,
+    updateSettings: () => {},
+    resetSettings: () => {},
+    getHeaderStyle: () => ({}),
+    getTabsStyle: () => ({}),
+    getAccentColor: () => DEFAULT_UI_SETTINGS.headerColor
+});
+
+const darkenColor = (hex: string, amount: number): string =>
+{
+    const num = parseInt(hex.replace('#', ''), 16);
+    const r = Math.max(0, ((num >> 16) & 0xFF) - amount);
+    const g = Math.max(0, ((num >> 8) & 0xFF) - amount);
+    const b = Math.max(0, (num & 0xFF) - amount);
+
+    return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+};
+
+const loadSettings = (): IUiSettings =>
+{
+    try
+    {
+        const stored = localStorage.getItem(STORAGE_KEY);
+        if(stored) return { ...DEFAULT_UI_SETTINGS, ...JSON.parse(stored) };
+    }
+    catch(e) {}
+
+    return { ...DEFAULT_UI_SETTINGS };
+};
+
+const saveSettings = (settings: IUiSettings): void =>
+{
+    try
+    {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));
+    }
+    catch(e) {}
+};
+
+const sendComposer = (composer: any): void =>
+{
+    try
+    {
+        GetCommunication()?.connection?.send(composer);
+    }
+    catch(e) {}
+};
+
+export const UiSettingsProvider: FC<PropsWithChildren> = ({ children }) =>
+{
+    const [ settings, setSettings ] = useState<IUiSettings>(loadSettings);
+    const serverSaveTimerRef = useRef<ReturnType<typeof setTimeout>>(null);
+
+    // Carica dal server al mount e ascolta risposta
+    useEffect(() =>
+    {
+        sendComposer(new UiSettingsLoadComposer());
+
+        const connection = GetCommunication()?.connection;
+
+        if(!connection) return;
+
+        const handler = (event: any) =>
+        {
+            try
+            {
+                const parser = event.getParser();
+                const json = parser?.settingsJson;
+
+                if(json && json !== '{}')
+                {
+                    const serverSettings = { ...DEFAULT_UI_SETTINGS, ...JSON.parse(json) };
+                    setSettings(serverSettings);
+                    saveSettings(serverSettings);
+                }
+            }
+            catch(e) {}
+        };
+
+        connection.addMessageEvent(new UiSettingsDataEvent(handler));
+    }, []);
+
+    const syncToServer = useCallback((settingsToSave: IUiSettings) =>
+    {
+        if(serverSaveTimerRef.current) clearTimeout(serverSaveTimerRef.current);
+
+        serverSaveTimerRef.current = setTimeout(() =>
+        {
+            sendComposer(new UiSettingsSaveComposer(JSON.stringify(settingsToSave)));
+        }, 1000);
+    }, []);
+
+    const updateSettings = useCallback((partial: Partial<IUiSettings>) =>
+    {
+        setSettings(prev =>
+        {
+            const updated = { ...prev, ...partial };
+            saveSettings(updated);
+            syncToServer(updated);
+
+            return updated;
+        });
+    }, [ syncToServer ]);
+
+    const resetSettings = useCallback(() =>
+    {
+        setSettings({ ...DEFAULT_UI_SETTINGS });
+        saveSettings(DEFAULT_UI_SETTINGS);
+        syncToServer(DEFAULT_UI_SETTINGS);
+    }, [ syncToServer ]);
+
+    const getHeaderStyle = useCallback((): React.CSSProperties =>
+    {
+        if(settings.colorMode === 'color')
+        {
+            const alpha = (settings.headerAlpha ?? 100) / 100;
+            const num = parseInt(settings.headerColor.replace('#', ''), 16);
+            const r = (num >> 16) & 0xFF;
+            const g = (num >> 8) & 0xFF;
+            const b = num & 0xFF;
+
+            return { backgroundColor: `rgba(${ r }, ${ g }, ${ b }, ${ alpha })` };
+        }
+
+        if(settings.colorMode === 'image' && settings.headerImageUrl)
+        {
+            return {
+                backgroundImage: `url(${ settings.headerImageUrl })`,
+                backgroundSize: 'cover',
+                backgroundPosition: 'center',
+                backgroundRepeat: 'repeat'
+            };
+        }
+
+        return {};
+    }, [ settings ]);
+
+    const getTabsStyle = useCallback((): React.CSSProperties =>
+    {
+        if(settings.colorMode === 'color')
+        {
+            return { backgroundColor: darkenColor(settings.headerColor, 30) };
+        }
+
+        if(settings.colorMode === 'image' && settings.headerImageUrl)
+        {
+            return {
+                backgroundImage: `url(${ settings.headerImageUrl })`,
+                backgroundSize: 'cover',
+                backgroundPosition: 'center bottom',
+                backgroundRepeat: 'repeat'
+            };
+        }
+
+        return {};
+    }, [ settings ]);
+
+    const getAccentColor = useCallback((): string =>
+    {
+        if(settings.colorMode === 'color') return settings.headerColor;
+
+        return DEFAULT_UI_SETTINGS.headerColor;
+    }, [ settings ]);
+
+    const isCustomActive = settings.colorMode !== 'default';
+
+    const ALL_CSS_VARS = [
+        '--ui-accent-color', '--ui-accent-dark',
+        '--ui-ctx-bg', '--ui-ctx-header-bg', '--ui-ctx-item-bg1', '--ui-ctx-item-bg2',
+        '--ui-btn-primary-bg', '--ui-btn-primary-border',
+        '--ui-dark-bg', '--ui-dark-border'
+    ];
+
+    useEffect(() =>
+    {
+        const root = document.documentElement;
+
+        if(settings.colorMode === 'color')
+        {
+            const c = settings.headerColor;
+            root.style.setProperty('--ui-accent-color', c);
+            root.style.setProperty('--ui-accent-dark', darkenColor(c, 30));
+            root.style.setProperty('--ui-ctx-bg', darkenColor(c, 50));
+            root.style.setProperty('--ui-ctx-header-bg', darkenColor(c, 20));
+            root.style.setProperty('--ui-ctx-item-bg1', darkenColor(c, 60));
+            root.style.setProperty('--ui-ctx-item-bg2', darkenColor(c, 70));
+            root.style.setProperty('--ui-btn-primary-bg', c);
+            root.style.setProperty('--ui-btn-primary-border', darkenColor(c, 20));
+            root.style.setProperty('--ui-dark-bg', darkenColor(c, 55));
+            root.style.setProperty('--ui-dark-border', darkenColor(c, 60));
+        }
+        else
+        {
+            ALL_CSS_VARS.forEach(v => root.style.removeProperty(v));
+        }
+    }, [ settings ]);
+
+    return (
+        <UiSettingsContext.Provider value={ { settings, isCustomActive, updateSettings, resetSettings, getHeaderStyle, getTabsStyle, getAccentColor } }>
+            { children }
+        </UiSettingsContext.Provider>
+    );
+};
+
+export const useUiSettings = () => useContext(UiSettingsContext);
diff --git a/src/api/ui-settings/index.ts b/src/api/ui-settings/index.ts
new file mode 100644
index 0000000..255a5da
--- /dev/null
+++ b/src/api/ui-settings/index.ts
@@ -0,0 +1,2 @@
+export * from './IUiSettings';
+export * from './UiSettingsContext';
diff --git a/src/components/catalog/CatalogAdminContext.tsx b/src/components/catalog/CatalogAdminContext.tsx
new file mode 100644
index 0000000..5a5fe18
--- /dev/null
+++ b/src/components/catalog/CatalogAdminContext.tsx
@@ -0,0 +1,296 @@
+import { CatalogAdminCreateOfferComposer, CatalogAdminCreatePageComposer, CatalogAdminDeleteOfferComposer, CatalogAdminDeletePageComposer, CatalogAdminMoveOfferComposer, CatalogAdminMovePageComposer, CatalogAdminPublishComposer, CatalogAdminResultEvent, CatalogAdminSaveOfferComposer, CatalogAdminSavePageComposer } from '@nitrots/nitro-renderer';
+import { createContext, FC, ReactNode, useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { ICatalogNode, IPurchasableOffer, NotificationAlertType, SendMessageComposer } from '../../api';
+import { useMessageEvent, useNotification } from '../../hooks';
+
+export interface IPageEditData
+{
+    pageId?: number;
+    caption: string;
+    parentId: number;
+    pageLayout: string;
+    enabled: string;
+    visible: string;
+    minRank: number;
+    clubOnly?: string;
+    orderNum: number;
+    pageHeadline?: string;
+    pageTeaser?: string;
+    pageSpecial?: string;
+    pageText1?: string;
+    pageText2?: string;
+    pageTextDetails?: string;
+    pageTextTeaser?: string;
+}
+
+export interface IOfferEditData
+{
+    offerId?: number;
+    pageId: number;
+    itemIds: string;
+    catalogName: string;
+    costCredits: number;
+    costPoints: number;
+    pointsType: number;
+    amount: number;
+    clubOnly: string;
+    extradata: string;
+    haveOffer: string;
+    offerId_group: number;
+    limitedStack: number;
+    orderNumber: number;
+}
+
+interface ICatalogAdminContext
+{
+    adminMode: boolean;
+    setAdminMode: (value: boolean) => void;
+    editingOffer: IPurchasableOffer | null;
+    setEditingOffer: (offer: IPurchasableOffer | null) => void;
+    editingPageData: boolean;
+    setEditingPageData: (value: boolean) => void;
+    editingRootPage: boolean;
+    setEditingRootPage: (value: boolean) => void;
+    editingPageNode: ICatalogNode | null;
+    setEditingPageNode: (node: ICatalogNode | null) => void;
+    loading: boolean;
+    lastError: string | null;
+    savePage: (data: IPageEditData) => void;
+    createPage: (data: IPageEditData) => void;
+    deletePage: (pageId: number) => void;
+    saveOffer: (data: IOfferEditData) => void;
+    createOffer: (data: IOfferEditData) => void;
+    deleteOffer: (offerId: number) => void;
+    reorderOffers: (orders: { id: number; orderNumber: number }[]) => void;
+    reorderPage: (pageId: number, newParentId: number, newIndex: number) => void;
+    togglePageEnabled: (pageId: number) => void;
+    togglePageVisible: (pageId: number) => void;
+    publishCatalog: () => void;
+    hasPendingChanges: boolean;
+}
+
+const CatalogAdminContext = createContext<ICatalogAdminContext>(null);
+
+export const useCatalogAdmin = () => useContext(CatalogAdminContext);
+
+export const CatalogAdminProvider: FC<{ children: ReactNode }> = ({ children }) =>
+{
+    const [ adminMode, setAdminMode ] = useState(false);
+    const [ editingOffer, setEditingOffer ] = useState<IPurchasableOffer | null>(null);
+    const [ editingPageData, setEditingPageData ] = useState(false);
+    const [ editingRootPage, setEditingRootPage ] = useState(false);
+    const [ editingPageNode, setEditingPageNode ] = useState<ICatalogNode | null>(null);
+    const [ loading, setLoading ] = useState(false);
+    const [ lastError, setLastError ] = useState<string | null>(null);
+    const [ hasPendingChanges, setHasPendingChanges ] = useState(false);
+    const pendingActionRef = useRef<string | null>(null);
+    const { simpleAlert = null } = useNotification();
+
+    // Keyboard shortcuts: Esc to close edit panels
+    useEffect(() =>
+    {
+        if(!adminMode) return;
+
+        const handleKeyDown = (e: KeyboardEvent) =>
+        {
+            if(e.key === 'Escape')
+            {
+                if(editingOffer) { setEditingOffer(null); e.preventDefault(); return; }
+                if(editingPageData || editingRootPage || editingPageNode)
+                {
+                    setEditingPageData(false);
+                    setEditingRootPage(false);
+                    setEditingPageNode(null);
+                    e.preventDefault();
+                }
+            }
+        };
+
+        window.addEventListener('keydown', handleKeyDown);
+
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [ adminMode, editingOffer, editingPageData, editingRootPage, editingPageNode ]);
+
+    useMessageEvent(CatalogAdminResultEvent, (event: CatalogAdminResultEvent) =>
+    {
+        const parser = event.getParser();
+        const action = pendingActionRef.current;
+
+        pendingActionRef.current = null;
+        setLoading(false);
+
+        if(!parser.success)
+        {
+            setLastError(parser.message || 'Operation failed');
+
+            if(simpleAlert)
+            {
+                simpleAlert(parser.message || 'Operation failed', NotificationAlertType.ALERT, null, null, 'Admin Error');
+            }
+        }
+        else
+        {
+            setLastError(null);
+            setEditingOffer(null);
+            setEditingPageData(false);
+            setEditingRootPage(false);
+            setEditingPageNode(null);
+
+            if(action === 'publish')
+            {
+                setHasPendingChanges(false);
+            }
+            else
+            {
+                setHasPendingChanges(true);
+            }
+
+            if(simpleAlert && action)
+            {
+                const messages: Record<string, string> = {
+                    'savePage': 'Page saved (publish to apply)',
+                    'createPage': 'Page created (publish to apply)',
+                    'deletePage': 'Page deleted (publish to apply)',
+                    'saveOffer': 'Offer saved (publish to apply)',
+                    'createOffer': 'Offer created (publish to apply)',
+                    'deleteOffer': 'Offer deleted (publish to apply)',
+                    'reorder': 'Order updated (publish to apply)',
+                    'toggleEnabled': 'Page toggled (publish to apply)',
+                    'toggleVisible': 'Visibility toggled (publish to apply)',
+                    'movePage': 'Page moved (publish to apply)',
+                    'publish': 'Catalog published! All users updated.',
+                };
+
+                simpleAlert(messages[action] || 'Operation completed', NotificationAlertType.DEFAULT, null, null, 'Catalog Admin');
+            }
+        }
+    });
+
+    const savePage = useCallback((data: IPageEditData) =>
+    {
+        setLoading(true);
+        setLastError(null);
+        pendingActionRef.current = 'savePage';
+        SendMessageComposer(new CatalogAdminSavePageComposer(
+            data.pageId || 0, data.caption, data.caption, data.pageLayout, 0,
+            data.minRank, data.visible === '1', data.enabled === '1',
+            data.orderNum, data.parentId,
+            data.pageHeadline || '', data.pageTeaser || '', data.pageTextDetails || ''
+        ));
+    }, []);
+
+    const createPage = useCallback((data: IPageEditData) =>
+    {
+        setLoading(true);
+        setLastError(null);
+        pendingActionRef.current = 'createPage';
+        SendMessageComposer(new CatalogAdminCreatePageComposer(
+            data.caption, data.caption, data.pageLayout, 0,
+            data.minRank, data.visible === '1', data.enabled === '1',
+            data.orderNum, data.parentId
+        ));
+    }, []);
+
+    const deletePage = useCallback((pageId: number) =>
+    {
+        setLoading(true);
+        setLastError(null);
+        pendingActionRef.current = 'deletePage';
+        SendMessageComposer(new CatalogAdminDeletePageComposer(pageId));
+    }, []);
+
+    const saveOffer = useCallback((data: IOfferEditData) =>
+    {
+        setLoading(true);
+        setLastError(null);
+        pendingActionRef.current = 'saveOffer';
+        SendMessageComposer(new CatalogAdminSaveOfferComposer(
+            data.offerId || 0, data.pageId, parseInt(data.itemIds) || 0,
+            data.catalogName, data.costCredits, data.costPoints, data.pointsType,
+            data.amount, data.clubOnly === '1' ? 1 : 0, data.extradata,
+            data.haveOffer === '1', data.offerId_group, data.limitedStack, data.orderNumber
+        ));
+    }, []);
+
+    const createOffer = useCallback((data: IOfferEditData) =>
+    {
+        setLoading(true);
+        setLastError(null);
+        pendingActionRef.current = 'createOffer';
+        SendMessageComposer(new CatalogAdminCreateOfferComposer(
+            data.pageId, parseInt(data.itemIds) || 0,
+            data.catalogName, data.costCredits, data.costPoints, data.pointsType,
+            data.amount, data.clubOnly === '1' ? 1 : 0, data.extradata,
+            data.haveOffer === '1', data.offerId_group, data.limitedStack, data.orderNumber
+        ));
+    }, []);
+
+    const deleteOffer = useCallback((offerId: number) =>
+    {
+        setLoading(true);
+        setLastError(null);
+        pendingActionRef.current = 'deleteOffer';
+        SendMessageComposer(new CatalogAdminDeleteOfferComposer(offerId));
+    }, []);
+
+    const reorderOffers = useCallback((orders: { id: number; orderNumber: number }[]) =>
+    {
+        setLoading(true);
+        setLastError(null);
+        pendingActionRef.current = 'reorder';
+
+        for(const order of orders)
+        {
+            SendMessageComposer(new CatalogAdminMoveOfferComposer(order.id, order.orderNumber));
+        }
+    }, []);
+
+    const reorderPage = useCallback((pageId: number, newParentId: number, newIndex: number) =>
+    {
+        setLoading(true);
+        setLastError(null);
+        pendingActionRef.current = 'movePage';
+        SendMessageComposer(new CatalogAdminMovePageComposer(pageId, newParentId, newIndex));
+    }, []);
+
+    const togglePageEnabled = useCallback((pageId: number) =>
+    {
+        setLoading(true);
+        setLastError(null);
+        pendingActionRef.current = 'toggleEnabled';
+        SendMessageComposer(new CatalogAdminMovePageComposer(pageId, -1, -1));
+    }, []);
+
+    const togglePageVisible = useCallback((pageId: number) =>
+    {
+        setLoading(true);
+        setLastError(null);
+        pendingActionRef.current = 'toggleVisible';
+        SendMessageComposer(new CatalogAdminMovePageComposer(pageId, -2, -1));
+    }, []);
+
+    const publishCatalog = useCallback(() =>
+    {
+        setLoading(true);
+        setLastError(null);
+        pendingActionRef.current = 'publish';
+        SendMessageComposer(new CatalogAdminPublishComposer());
+    }, []);
+
+    return (
+        <CatalogAdminContext.Provider value={ {
+            adminMode, setAdminMode,
+            editingOffer, setEditingOffer,
+            editingPageData, setEditingPageData,
+            editingRootPage, setEditingRootPage,
+            editingPageNode, setEditingPageNode,
+            loading, lastError, hasPendingChanges,
+            savePage, createPage, deletePage,
+            saveOffer, createOffer, deleteOffer,
+            reorderOffers, reorderPage, togglePageEnabled, togglePageVisible,
+            publishCatalog
+        } }>
+            { children }
+        </CatalogAdminContext.Provider>
+    );
+};
diff --git a/src/components/catalog/CatalogClassicView.tsx b/src/components/catalog/CatalogClassicView.tsx
new file mode 100644
index 0000000..a5fabd4
--- /dev/null
+++ b/src/components/catalog/CatalogClassicView.tsx
@@ -0,0 +1,183 @@
+import { AddLinkEventTracker, GetSessionDataManager, ILinkEventTracker, RemoveLinkEventTracker } from '@nitrots/nitro-renderer';
+import { FC, useEffect } from 'react';
+import { FaCog, FaEdit, FaEye, FaEyeSlash, FaPlus, FaTrash } from 'react-icons/fa';
+import { GetConfigurationValue, LocalizeText } from '../../api';
+import { Column, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common';
+import { useCatalog } from '../../hooks';
+import { CatalogAdminProvider, useCatalogAdmin } from './CatalogAdminContext';
+import { CatalogAdminOfferEditView } from './views/admin/CatalogAdminOfferEditView';
+import { CatalogAdminPageEditView } from './views/admin/CatalogAdminPageEditView';
+import { CatalogIconView } from './views/catalog-icon/CatalogIconView';
+import { CatalogGiftView } from './views/gift/CatalogGiftView';
+import { CatalogNavigationView } from './views/navigation/CatalogNavigationView';
+import { GetCatalogLayout } from './views/page/layout/GetCatalogLayout';
+import { MarketplacePostOfferView } from './views/page/layout/marketplace/MarketplacePostOfferView';
+
+const CatalogClassicViewInner: FC<{}> = () =>
+{
+    const { isVisible = false, setIsVisible = null, rootNode = null, currentPage = null, navigationHidden = false, setNavigationHidden = null, activeNodes = [], searchResult = null, setSearchResult = null, openPageByName = null, openPageByOfferId = null, activateNode = null } = useCatalog();
+    const catalogAdmin = useCatalogAdmin();
+    const adminMode = catalogAdmin?.adminMode ?? false;
+    const setAdminMode = catalogAdmin?.setAdminMode ?? (() => {});
+    const hasPendingChanges = catalogAdmin?.hasPendingChanges ?? false;
+    const publishCatalog = catalogAdmin?.publishCatalog ?? (() => {});
+    const loading = catalogAdmin?.loading ?? false;
+
+    const isMod = GetSessionDataManager().isModerator;
+
+    useEffect(() =>
+    {
+        const linkTracker: ILinkEventTracker = {
+            linkReceived: (url: string) =>
+            {
+                const parts = url.split('/');
+
+                if(parts.length < 2) return;
+
+                switch(parts[1])
+                {
+                    case 'show':
+                        setIsVisible(true);
+                        return;
+                    case 'hide':
+                        setIsVisible(false);
+                        return;
+                    case 'toggle':
+                        setIsVisible(prevValue => !prevValue);
+                        return;
+                    case 'open':
+                        if(parts.length > 2)
+                        {
+                            if(parts.length === 4)
+                            {
+                                switch(parts[2])
+                                {
+                                    case 'offerId':
+                                        openPageByOfferId(parseInt(parts[3]));
+                                        return;
+                                }
+                            }
+                            else
+                            {
+                                openPageByName(parts[2]);
+                            }
+                        }
+                        else
+                        {
+                            setIsVisible(true);
+                        }
+
+                        return;
+                }
+            },
+            eventUrlPrefix: 'catalog/'
+        };
+
+        AddLinkEventTracker(linkTracker);
+
+        return () => RemoveLinkEventTracker(linkTracker);
+    }, [ setIsVisible, openPageByOfferId, openPageByName ]);
+
+    return (
+        <>
+            { isVisible &&
+                <NitroCardView className="w-[630px] h-[400px]" style={ GetConfigurationValue('catalog.headers') ? { width: 710 } : {} } uniqueKey="catalog">
+                    <NitroCardHeaderView headerText={ LocalizeText('catalog.title') } onCloseClick={ () => setIsVisible(false) } />
+                    { /* Admin banner */ }
+                    { adminMode &&
+                        <div className="flex items-center justify-between bg-warning text-dark text-[10px] font-bold px-3 py-0.5 uppercase tracking-wider" style={ { textShadow: '0 1px 0 rgba(255,255,255,0.3)' } }>
+                            <span>⚙ Admin Mode</span>
+                            <button
+                                className={ `px-3 py-0.5 rounded text-[10px] font-bold uppercase cursor-pointer transition-all ${ hasPendingChanges ? 'bg-success text-white animate-pulse shadow-md' : 'bg-white/50 text-dark hover:bg-success hover:text-white' }` }
+                                disabled={ loading }
+                                onClick={ () => publishCatalog() }
+                            >
+                                { loading ? '...' : '⬆ Publish' }
+                            </button>
+                        </div> }
+                    <NitroCardTabsView>
+                        { rootNode && (rootNode.children.length > 0) && rootNode.children.map((child, index) =>
+                        {
+                            if(!adminMode && !child.isVisible) return null;
+
+                            const isHidden = !child.isVisible;
+
+                            return (
+                                <NitroCardTabsItemView key={ `${ child.pageId }-${ child.pageName }-${ index }` } isActive={ child.isActive } onClick={ () =>
+                                {
+                                    if(searchResult) setSearchResult(null);
+
+                                    activateNode(child);
+                                } } >
+                                    <div className={ `flex items-center gap-${ GetConfigurationValue('catalog.tab.icons') ? 1 : 0 } ${ isHidden ? 'opacity-40' : '' }` }>
+                                        { GetConfigurationValue('catalog.tab.icons') && <CatalogIconView icon={ child.iconId } /> }
+                                        { child.localization }
+                                        { adminMode && isHidden && <FaEyeSlash className="text-[8px] text-danger ml-1" /> }
+                                        { adminMode &&
+                                            <div className="flex items-center gap-0.5 ml-1" onClick={ e => e.stopPropagation() }>
+                                                <FaEdit className="text-[8px] text-primary cursor-pointer hover:text-dark" title={ LocalizeText('catalog.admin.edit.title') }
+                                                    onClick={ () => { catalogAdmin.setEditingPageNode(child); catalogAdmin.setEditingRootPage(false); catalogAdmin.setEditingPageData(true); } } />
+                                                <span className="cursor-pointer" title={ isHidden ? LocalizeText('catalog.admin.show') : LocalizeText('catalog.admin.hide') }
+                                                    onClick={ () => catalogAdmin.togglePageVisible(child.pageId) }>
+                                                    { isHidden ? <FaEye className="text-[8px] text-success" /> : <FaEyeSlash className="text-[8px] text-muted" /> }
+                                                </span>
+                                                <FaTrash className="text-[8px] text-danger cursor-pointer hover:text-red-800" title={ LocalizeText('catalog.admin.delete.title') }
+                                                    onClick={ () => { if(confirm(LocalizeText('catalog.admin.delete.category.confirm', [ 'name' ], [ child.localization ]))) catalogAdmin.deletePage(child.pageId); } } />
+                                            </div> }
+                                    </div>
+                                </NitroCardTabsItemView>
+                            );
+                        }) }
+                        { /* Admin toggle button in tabs bar */ }
+                        { isMod &&
+                            <NitroCardTabsItemView isActive={ adminMode } onClick={ () => setAdminMode(!adminMode) }>
+                                <FaCog className={ `text-[10px] ${ adminMode ? 'animate-spin' : '' }` } style={ adminMode ? { animationDuration: '3s' } : {} } />
+                            </NitroCardTabsItemView> }
+                    </NitroCardTabsView>
+                    <NitroCardContentView>
+                        { /* Admin: add new root category */ }
+                        { adminMode && rootNode &&
+                            <div className="flex items-center gap-2 mb-1">
+                                <button
+                                    className="flex items-center gap-1 text-[9px] text-success hover:text-green-800 cursor-pointer transition-colors"
+                                    onClick={ () => catalogAdmin.createPage({ caption: 'New Category', pageLayout: 'default_3x3', minRank: 1, visible: '1', enabled: '1', orderNum: 99, parentId: rootNode.pageId }) }
+                                >
+                                    <FaPlus className="text-[8px]" />
+                                    <span>{ LocalizeText('catalog.admin.new') }</span>
+                                </button>
+                                <button
+                                    className="flex items-center gap-1 text-[9px] text-primary hover:text-dark cursor-pointer transition-colors"
+                                    onClick={ () => { catalogAdmin.setEditingPageNode(null); catalogAdmin.setEditingRootPage(true); catalogAdmin.setEditingPageData(true); } }
+                                >
+                                    <FaEdit className="text-[8px]" />
+                                    <span>{ LocalizeText('catalog.admin.root') }</span>
+                                </button>
+                            </div> }
+                        <Grid>
+                            { !navigationHidden &&
+                                <Column overflow="hidden" size={ 3 }>
+                                    { activeNodes && (activeNodes.length > 0) &&
+                                        <CatalogNavigationView node={ activeNodes[0] } /> }
+                                </Column> }
+                            <Column overflow="hidden" size={ !navigationHidden ? 9 : 12 }>
+                                { adminMode && <CatalogAdminPageEditView /> }
+                                { GetCatalogLayout(currentPage, () => setNavigationHidden(true)) }
+                            </Column>
+                        </Grid>
+                    </NitroCardContentView>
+                </NitroCardView> }
+            <CatalogAdminOfferEditView />
+            <CatalogGiftView />
+            <MarketplacePostOfferView />
+        </>
+    );
+};
+
+export const CatalogClassicView: FC<{}> = () =>
+{
+    return (
+        <CatalogAdminProvider>
+            <CatalogClassicViewInner />
+        </CatalogAdminProvider>
+    );
+};
diff --git a/src/components/catalog/CatalogModernView.tsx b/src/components/catalog/CatalogModernView.tsx
new file mode 100644
index 0000000..958e3ea
--- /dev/null
+++ b/src/components/catalog/CatalogModernView.tsx
@@ -0,0 +1,291 @@
+import { AddLinkEventTracker, GetSessionDataManager, ILinkEventTracker, RemoveLinkEventTracker } from '@nitrots/nitro-renderer';
+import { FC, useEffect, useState } from 'react';
+import { FaCog, FaEdit, FaEye, FaEyeSlash, FaHeart, FaPlus, FaStar, FaTrash } from 'react-icons/fa';
+import { LocalizeText } from '../../api';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../common';
+import { useCatalog, useCatalogFavorites } from '../../hooks';
+import { CatalogAdminProvider, useCatalogAdmin } from './CatalogAdminContext';
+import { CatalogAdminOfferEditView } from './views/admin/CatalogAdminOfferEditView';
+import { CatalogAdminPageEditView } from './views/admin/CatalogAdminPageEditView';
+import { CatalogIconView } from './views/catalog-icon/CatalogIconView';
+import { CatalogFavoritesView } from './views/favorites/CatalogFavoritesView';
+import { CatalogGiftView } from './views/gift/CatalogGiftView';
+import { CatalogNavigationView } from './views/navigation/CatalogNavigationView';
+import { CatalogSearchView } from './views/page/common/CatalogSearchView';
+import { GetCatalogLayout } from './views/page/layout/GetCatalogLayout';
+import { MarketplacePostOfferView } from './views/page/layout/marketplace/MarketplacePostOfferView';
+
+const CatalogModernViewInner: FC<{}> = () =>
+{
+    const { isVisible = false, setIsVisible = null, rootNode = null, currentPage = null, navigationHidden = false, setNavigationHidden = null, activeNodes = [], searchResult = null, setSearchResult = null, openPageByName = null, openPageByOfferId = null, activateNode = null } = useCatalog();
+    const catalogAdmin = useCatalogAdmin();
+    const adminMode = catalogAdmin?.adminMode ?? false;
+    const setAdminMode = catalogAdmin?.setAdminMode ?? (() => {});
+    const hasPendingChanges = catalogAdmin?.hasPendingChanges ?? false;
+    const publishCatalog = catalogAdmin?.publishCatalog ?? (() => {});
+    const loading = catalogAdmin?.loading ?? false;
+    const { favoriteOfferIds, favoritePageIds } = useCatalogFavorites();
+    const [ showFavorites, setShowFavorites ] = useState(false);
+
+    const isMod = GetSessionDataManager().isModerator;
+    const totalFavs = favoriteOfferIds.length + favoritePageIds.length;
+
+    useEffect(() =>
+    {
+        const linkTracker: ILinkEventTracker = {
+            linkReceived: (url: string) =>
+            {
+                const parts = url.split('/');
+
+                if(parts.length < 2) return;
+
+                switch(parts[1])
+                {
+                    case 'show':
+                        setIsVisible(true);
+                        return;
+                    case 'hide':
+                        setIsVisible(false);
+                        return;
+                    case 'toggle':
+                        setIsVisible(prevValue => !prevValue);
+                        return;
+                    case 'open':
+                        if(parts.length > 2)
+                        {
+                            if(parts.length === 4)
+                            {
+                                switch(parts[2])
+                                {
+                                    case 'offerId':
+                                        openPageByOfferId(parseInt(parts[3]));
+                                        return;
+                                }
+                            }
+                            else
+                            {
+                                openPageByName(parts[2]);
+                            }
+                        }
+                        else
+                        {
+                            setIsVisible(true);
+                        }
+
+                        return;
+                }
+            },
+            eventUrlPrefix: 'catalog/'
+        };
+
+        AddLinkEventTracker(linkTracker);
+
+        return () => RemoveLinkEventTracker(linkTracker);
+    }, [ setIsVisible, openPageByOfferId, openPageByName ]);
+
+    return (
+        <>
+            { isVisible &&
+                <NitroCardView className="nitro-catalog w-[780px] h-[520px]" uniqueKey="catalog">
+                    <NitroCardHeaderView headerText={ LocalizeText('catalog.title') } onCloseClick={ () => setIsVisible(false) } />
+                    <NitroCardContentView classNames={ [ 'p-0!', 'overflow-hidden!' ] }>
+                        { /* Admin banner */ }
+                        { adminMode &&
+                            <div className="flex items-center justify-between bg-warning text-dark text-[10px] font-bold px-3 py-0.5 uppercase tracking-wider" style={ { textShadow: '0 1px 0 rgba(255,255,255,0.3)' } }>
+                                <span>⚙ Admin Mode</span>
+                                <button
+                                    className={ `px-3 py-0.5 rounded text-[10px] font-bold uppercase cursor-pointer transition-all ${ hasPendingChanges ? 'bg-success text-white animate-pulse shadow-md' : 'bg-white/50 text-dark hover:bg-success hover:text-white' }` }
+                                    disabled={ loading }
+                                    onClick={ () => publishCatalog() }
+                                >
+                                    { loading ? '...' : hasPendingChanges ? '⬆ Publish' : '⬆ Publish' }
+                                </button>
+                            </div> }
+
+                        <div className="flex h-full">
+                            { /* === LEFT SIDEBAR === */ }
+                            <div className="group/rail flex flex-col w-[52px] hover:w-[175px] min-w-[52px] bg-card-grid-item border-r-2 border-card-grid-item-border py-1.5 gap-px overflow-y-auto overflow-x-hidden transition-[width] duration-200 ease-in-out">
+
+                                { /* Favorites toggle */ }
+                                <div
+                                    className={ `flex items-center gap-2 mx-1 px-1.5 py-1.5 rounded cursor-pointer transition-all duration-150 ${ showFavorites ? 'bg-primary text-white' : 'hover:bg-card-grid-item-active' }` }
+                                    onClick={ () => setShowFavorites(!showFavorites) }
+                                >
+                                    <div className="w-[28px] h-[24px] flex items-center justify-center shrink-0 relative">
+                                        <FaHeart className={ `text-xs ${ showFavorites ? 'text-white' : totalFavs > 0 ? 'text-danger' : 'text-muted' }` } />
+                                        { totalFavs > 0 &&
+                                            <span className="absolute -top-1 -right-1 min-w-[14px] h-[14px] bg-danger text-white text-[8px] font-bold rounded-full flex items-center justify-center px-0.5 leading-none">
+                                                { totalFavs }
+                                            </span> }
+                                    </div>
+                                    <span className={ `text-[11px] font-bold whitespace-nowrap opacity-0 group-hover/rail:opacity-100 transition-opacity duration-200 ${ showFavorites ? 'text-white' : '' }` }>{ LocalizeText('catalog.favorites') }</span>
+                                </div>
+
+                                <div className="border-b border-card-grid-item-border mx-2 my-0.5" />
+
+                                { /* Admin: root page actions */ }
+                                { adminMode && rootNode &&
+                                    <div className="flex items-center gap-1 mx-1 px-1.5 py-1 opacity-0 group-hover/rail:opacity-100 transition-opacity">
+                                        <button
+                                            className="flex items-center gap-1 text-[9px] text-success hover:text-green-800 cursor-pointer transition-colors"
+                                            title={ LocalizeText('catalog.admin.new.root.category') }
+                                            onClick={ () => catalogAdmin.createPage({ caption: 'New Category', pageLayout: 'default_3x3', minRank: 1, visible: '1', enabled: '1', orderNum: 99, parentId: rootNode.pageId }) }
+                                        >
+                                            <FaPlus className="text-[8px]" />
+                                            <span className="whitespace-nowrap">{ LocalizeText('catalog.admin.new') }</span>
+                                        </button>
+                                        <button
+                                            className="flex items-center gap-1 text-[9px] text-primary hover:text-dark cursor-pointer transition-colors"
+                                            title={ LocalizeText('catalog.admin.edit.root') }
+                                            onClick={ () => { catalogAdmin.setEditingPageNode(null); catalogAdmin.setEditingRootPage(true); catalogAdmin.setEditingPageData(true); } }
+                                        >
+                                            <FaEdit className="text-[8px]" />
+                                            <span className="whitespace-nowrap">{ LocalizeText('catalog.admin.root') }</span>
+                                        </button>
+                                    </div> }
+
+                                { /* Category icons */ }
+                                { rootNode && rootNode.children.length > 0 && rootNode.children.map((child, index) =>
+                                {
+                                    if(!adminMode && !child.isVisible) return null;
+
+                                    const isHidden = !child.isVisible;
+
+                                    return (
+                                        <div
+                                            key={ `${ child.pageId }-${ index }` }
+                                            className={ `group/cat flex items-center gap-2 mx-1 px-1.5 py-1 rounded cursor-pointer transition-all duration-150 ${ isHidden ? 'opacity-40' : '' } ${ child.isActive ? 'bg-card-grid-item-active border border-card-grid-item-border-active shadow-inner1px' : 'border border-transparent hover:bg-card-grid-item-active' }` }
+                                            title={ adminMode ? `${ child.localization } [ID: ${ child.pageId }]${ isHidden ? ` (${ LocalizeText('catalog.admin.hidden') })` : '' }` : child.localization }
+                                            onClick={ () =>
+                                            {
+                                                if(searchResult) setSearchResult(null);
+                                                if(showFavorites) setShowFavorites(false);
+                                                activateNode(child);
+                                            } }
+                                        >
+                                            <div className="w-[28px] h-[24px] flex items-center justify-center shrink-0 relative">
+                                                <CatalogIconView icon={ child.iconId } />
+                                                { isHidden && <FaEyeSlash className="absolute -bottom-0.5 -right-0.5 text-[7px] text-danger" /> }
+                                            </div>
+                                            <span className={ `text-[11px] whitespace-nowrap overflow-hidden truncate opacity-0 group-hover/rail:opacity-100 transition-opacity duration-200 flex-1 ${ child.isActive ? 'font-bold text-dark' : 'text-gray-700' }` }>
+                                                { child.localization }
+                                            </span>
+                                            { /* Admin actions on each root category */ }
+                                            { adminMode &&
+                                                <div className="flex items-center gap-1 opacity-0 group-hover/rail:opacity-100 transition-opacity shrink-0">
+                                                    <div
+                                                        className="w-[18px] h-[18px] rounded flex items-center justify-center hover:bg-primary/20 cursor-pointer transition-colors"
+                                                        title={ `${ LocalizeText('catalog.admin.edit.title') } "${ child.localization }"` }
+                                                        onClick={ e =>
+                                                        {
+                                                            e.stopPropagation();
+                                                            catalogAdmin.setEditingPageNode(child);
+                                                            catalogAdmin.setEditingRootPage(false);
+                                                            catalogAdmin.setEditingPageData(true);
+                                                        } }
+                                                    >
+                                                        <FaEdit className="text-[9px] text-primary" />
+                                                    </div>
+                                                    <div
+                                                        className="w-[18px] h-[18px] rounded flex items-center justify-center hover:bg-warning/20 cursor-pointer transition-colors"
+                                                        title={ isHidden ? LocalizeText('catalog.admin.show') : LocalizeText('catalog.admin.hide') }
+                                                        onClick={ e =>
+                                                        {
+                                                            e.stopPropagation();
+                                                            catalogAdmin.togglePageVisible(child.pageId);
+                                                        } }
+                                                    >
+                                                        { isHidden
+                                                            ? <FaEye className="text-[9px] text-success" />
+                                                            : <FaEyeSlash className="text-[9px] text-muted" /> }
+                                                    </div>
+                                                    <div
+                                                        className="w-[18px] h-[18px] rounded flex items-center justify-center hover:bg-danger/20 cursor-pointer transition-colors"
+                                                        title={ `${ LocalizeText('catalog.admin.delete.title') } "${ child.localization }"` }
+                                                        onClick={ e =>
+                                                        {
+                                                            e.stopPropagation();
+                                                            if(confirm(LocalizeText('catalog.admin.delete.category.confirm', [ 'name' ], [ child.localization ])))
+                                                            {
+                                                                catalogAdmin.deletePage(child.pageId);
+                                                            }
+                                                        } }
+                                                    >
+                                                        <FaTrash className="text-[9px] text-danger" />
+                                                    </div>
+                                                </div> }
+                                        </div>
+                                    );
+                                }) }
+                            </div>
+
+                            { /* === MAIN AREA === */ }
+                            <div className="flex flex-col flex-1 overflow-hidden bg-light">
+                                { /* Toolbar: search + admin */ }
+                                <div className="flex items-center gap-2 px-2 py-1.5 bg-card-tab-item border-b border-card-grid-item-border">
+                                    { /* Breadcrumb */ }
+                                    <div className="flex items-center gap-1 text-[11px] text-gray-600 min-w-0 flex-1">
+                                        <FaStar className="text-[9px] text-primary shrink-0" />
+                                        { activeNodes && activeNodes.length > 0
+                                            ? activeNodes.map((node, i) => (
+                                                <span key={ node.pageId } className="flex items-center gap-1 min-w-0">
+                                                    { i > 0 && <span className="text-[8px] opacity-30">›</span> }
+                                                    <span className={ `truncate ${ i === activeNodes.length - 1 ? 'font-bold text-dark' : 'cursor-pointer hover:text-primary' }` }
+                                                        onClick={ i < activeNodes.length - 1 ? () => activateNode(node) : undefined }>
+                                                        { node.localization }
+                                                    </span>
+                                                </span>
+                                            ))
+                                            : <span className="text-muted">{ LocalizeText('catalog.title') }</span> }
+                                    </div>
+
+                                    <div className="w-[180px] shrink-0">
+                                        <CatalogSearchView />
+                                    </div>
+
+                                    { isMod &&
+                                        <button
+                                            className={ `flex items-center gap-1 px-2 py-1 rounded text-[10px] font-bold cursor-pointer transition-all border ${ adminMode ? 'bg-warning text-dark border-warning shadow-inner1px' : 'bg-card-grid-item text-gray-600 border-card-grid-item-border hover:bg-primary hover:text-white hover:border-primary' }` }
+                                            onClick={ () => setAdminMode(!adminMode) }
+                                        >
+                                            <FaCog className={ `${ adminMode ? 'animate-spin' : '' }` } style={ adminMode ? { animationDuration: '3s' } : {} } />
+                                            { LocalizeText('catalog.admin') }
+                                        </button> }
+                                </div>
+
+                                { /* Content area */ }
+                                <div className="flex flex-1 overflow-hidden">
+                                    { showFavorites
+                                        ? <div className="flex-1 overflow-auto bg-card-content-area">
+                                            <CatalogFavoritesView onClose={ () => setShowFavorites(false) } />
+                                        </div>
+                                        : <>
+                                            { !navigationHidden && activeNodes && activeNodes.length > 0 &&
+                                                <div className="w-[170px] min-w-[170px] border-r-2 border-card-grid-item-border bg-card-grid-item overflow-y-auto py-1">
+                                                    <CatalogNavigationView node={ activeNodes[0] } />
+                                                </div> }
+                                            <div className="flex-1 overflow-auto p-2 bg-card-content-area">
+                                                { adminMode && <CatalogAdminPageEditView /> }
+                                                { GetCatalogLayout(currentPage, () => setNavigationHidden(true)) }
+                                            </div>
+                                        </> }
+                                </div>
+                            </div>
+                        </div>
+                    </NitroCardContentView>
+                </NitroCardView> }
+            <CatalogAdminOfferEditView />
+            <CatalogGiftView />
+            <MarketplacePostOfferView />
+        </>
+    );
+};
+
+export const CatalogModernView: FC<{}> = () =>
+{
+    return (
+        <CatalogAdminProvider>
+            <CatalogModernViewInner />
+        </CatalogAdminProvider>
+    );
+};
diff --git a/src/components/catalog/CatalogView.tsx b/src/components/catalog/CatalogView.tsx
index fc5f633..e685131 100644
--- a/src/components/catalog/CatalogView.tsx
+++ b/src/components/catalog/CatalogView.tsx
@@ -1,111 +1,13 @@
-import { AddLinkEventTracker, ILinkEventTracker, RemoveLinkEventTracker } from '@nitrots/nitro-renderer';
-import { FC, useEffect } from 'react';
-import { GetConfigurationValue, LocalizeText } from '../../api';
-import { Column, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common';
-import { useCatalog } from '../../hooks';
-import { CatalogIconView } from './views/catalog-icon/CatalogIconView';
-import { CatalogGiftView } from './views/gift/CatalogGiftView';
-import { CatalogNavigationView } from './views/navigation/CatalogNavigationView';
-import { GetCatalogLayout } from './views/page/layout/GetCatalogLayout';
-import { MarketplacePostOfferView } from './views/page/layout/marketplace/MarketplacePostOfferView';
+import { FC } from 'react';
+import { GetConfigurationValue } from '../../api';
+import { CatalogClassicView } from './CatalogClassicView';
+import { CatalogModernView } from './CatalogModernView';
 
-export const CatalogView: FC<{}> = props =>
+export const CatalogView: FC<{}> = () =>
 {
-    const { isVisible = false, setIsVisible = null, rootNode = null, currentPage = null, navigationHidden = false, setNavigationHidden = null, activeNodes = [], searchResult = null, setSearchResult = null, openPageByName = null, openPageByOfferId = null, activateNode = null, getNodeById } = useCatalog();
+    const style = GetConfigurationValue<string>('catalog.style', 'classic');
 
-    useEffect(() =>
-    {
-        const linkTracker: ILinkEventTracker = {
-            linkReceived: (url: string) =>
-            {
-                const parts = url.split('/');
+    if(style === 'new') return <CatalogModernView />;
 
-                if(parts.length < 2) return;
-
-                switch(parts[1])
-                {
-                    case 'show':
-                        setIsVisible(true);
-                        return;
-                    case 'hide':
-                        setIsVisible(false);
-                        return;
-                    case 'toggle':
-                        setIsVisible(prevValue => !prevValue);
-                        return;
-                    case 'open':
-                        if(parts.length > 2)
-                        {
-                            if(parts.length === 4)
-                            {
-                                switch(parts[2])
-                                {
-                                    case 'offerId':
-                                        openPageByOfferId(parseInt(parts[3]));
-                                        return;
-                                }
-                            }
-                            else
-                            {
-                                openPageByName(parts[2]);
-                            }
-                        }
-                        else
-                        {
-                            setIsVisible(true);
-                        }
-
-                        return;
-                }
-            },
-            eventUrlPrefix: 'catalog/'
-        };
-
-        AddLinkEventTracker(linkTracker);
-
-        return () => RemoveLinkEventTracker(linkTracker);
-    }, [ setIsVisible, openPageByOfferId, openPageByName ]);
-
-    return (
-        <>
-            { isVisible &&
-                <NitroCardView className="w-[630px] h-[400px]" style={ GetConfigurationValue('catalog.headers') ? { width: 710 } : {} } uniqueKey="catalog">
-                    <NitroCardHeaderView headerText={ LocalizeText('catalog.title') } onCloseClick={ event => setIsVisible(false) } />
-                    <NitroCardTabsView>
-                        { rootNode && (rootNode.children.length > 0) && rootNode.children.map((child, index) =>
-                        {
-                            if(!child.isVisible) return null;
-
-                            return (
-                                <NitroCardTabsItemView key={ `${ child.pageId }-${ child.pageName }-${ index }` } isActive={ child.isActive } onClick={ event =>
-                                {
-                                    if(searchResult) setSearchResult(null);
-
-                                    activateNode(child);
-                                } } >
-                                    <div className={ `flex items-center gap-${ GetConfigurationValue('catalog.tab.icons') ? 1 : 0 }` }>
-                                        { GetConfigurationValue('catalog.tab.icons') && <CatalogIconView icon={ child.iconId } /> }
-                                        { child.localization }
-                                    </div>
-                                </NitroCardTabsItemView>
-                            );
-                        }) }
-                    </NitroCardTabsView>
-                    <NitroCardContentView>
-                        <Grid>
-                            { !navigationHidden &&
-                                <Column overflow="hidden" size={ 3 }>
-                                    { activeNodes && (activeNodes.length > 0) &&
-                                        <CatalogNavigationView node={ activeNodes[0] } /> }
-                                </Column> }
-                            <Column overflow="hidden" size={ !navigationHidden ? 9 : 12 }>
-                                { GetCatalogLayout(currentPage, () => setNavigationHidden(true)) }
-                            </Column>
-                        </Grid>
-                    </NitroCardContentView>
-                </NitroCardView> }
-            <CatalogGiftView />
-            <MarketplacePostOfferView />
-        </>
-    );
+    return <CatalogClassicView />;
 };
diff --git a/src/components/catalog/views/admin/CatalogAdminOfferEditView.tsx b/src/components/catalog/views/admin/CatalogAdminOfferEditView.tsx
new file mode 100644
index 0000000..f6da55a
--- /dev/null
+++ b/src/components/catalog/views/admin/CatalogAdminOfferEditView.tsx
@@ -0,0 +1,225 @@
+import { FC, useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { FaSave, FaSpinner, FaTimes, FaTrash } from 'react-icons/fa';
+import { LocalizeText } from '../../../../api';
+import { useCatalog } from '../../../../hooks';
+import { IOfferEditData, useCatalogAdmin } from '../../CatalogAdminContext';
+
+export const CatalogAdminOfferEditView: FC<{}> = () =>
+{
+    const { currentPage = null } = useCatalog();
+    const catalogAdmin = useCatalogAdmin();
+    const editingOffer = catalogAdmin?.editingOffer ?? null;
+    const setEditingOffer = catalogAdmin?.setEditingOffer;
+    const saveOffer = catalogAdmin?.saveOffer;
+    const deleteOffer = catalogAdmin?.deleteOffer;
+    const createOffer = catalogAdmin?.createOffer;
+    const loading = catalogAdmin?.loading ?? false;
+
+    const [ itemIds, setItemIds ] = useState('0');
+    const [ catalogName, setCatalogName ] = useState('');
+    const [ costCredits, setCostCredits ] = useState(0);
+    const [ costPoints, setCostPoints ] = useState(0);
+    const [ pointsType, setPointsType ] = useState(0);
+    const [ amount, setAmount ] = useState(1);
+    const [ clubOnly, setClubOnly ] = useState('0');
+    const [ extradata, setExtradata ] = useState('');
+    const [ haveOffer, setHaveOffer ] = useState('1');
+    const [ offerId, setOfferIdGroup ] = useState(-1);
+    const [ limitedStack, setLimitedStack ] = useState(0);
+    const [ orderNumber, setOrderNumber ] = useState(0);
+    const [ isNew, setIsNew ] = useState(false);
+
+    useEffect(() =>
+    {
+        if(!editingOffer) return;
+
+        if(editingOffer.offerId === -1)
+        {
+            setIsNew(true);
+            setItemIds('0');
+            setCatalogName('');
+            setCostCredits(0);
+            setCostPoints(0);
+            setPointsType(0);
+            setAmount(1);
+            setClubOnly('0');
+            setExtradata('');
+            setHaveOffer('1');
+            setOfferIdGroup(-1);
+            setLimitedStack(0);
+            setOrderNumber(0);
+        }
+        else
+        {
+            setIsNew(false);
+            setItemIds(String(editingOffer.product?.productClassId || 0));
+            setCatalogName(editingOffer.localizationName || '');
+            setCostCredits(editingOffer.priceInCredits);
+            setCostPoints(editingOffer.priceInActivityPoints);
+            setPointsType(editingOffer.activityPointType);
+            setAmount(editingOffer.product?.productCount || 1);
+            setClubOnly(editingOffer.clubLevel > 0 ? '1' : '0');
+            setExtradata(editingOffer.product?.extraParam || '');
+            setHaveOffer('1');
+            setOfferIdGroup(editingOffer.offerId || -1);
+            setLimitedStack(0);
+            setOrderNumber(0);
+        }
+    }, [ editingOffer ]);
+
+    if(!editingOffer) return null;
+
+    const handleSave = async () =>
+    {
+        if(!saveOffer || !createOffer) return;
+
+        const data: IOfferEditData = {
+            offerId: isNew ? undefined : editingOffer.offerId,
+            pageId: currentPage?.pageId || 0,
+            itemIds,
+            catalogName,
+            costCredits,
+            costPoints,
+            pointsType,
+            amount,
+            clubOnly,
+            extradata,
+            haveOffer,
+            offerId_group: offerId,
+            limitedStack,
+            orderNumber
+        };
+
+        const success = isNew ? await createOffer(data) : await saveOffer(data);
+
+        if(success && setEditingOffer) setEditingOffer(null);
+    };
+
+    const handleDelete = () =>
+    {
+        if(isNew || !deleteOffer || !confirm(LocalizeText('catalog.admin.delete.offer.confirm'))) return;
+
+        deleteOffer(editingOffer.offerId);
+        if(setEditingOffer) setEditingOffer(null);
+    };
+
+    const inputClass = 'text-[11px] border-2 border-card-grid-item-border rounded px-2 py-1 bg-white focus:outline-none focus:border-primary transition-colors';
+
+    return createPortal(
+        <div className="fixed inset-0 flex items-center justify-center" style={ { zIndex: 1000 } } onClick={ () => setEditingOffer(null) }>
+            <div className="absolute inset-0 bg-black/30 backdrop-blur-[1px]" />
+
+            <div className="relative bg-light rounded-lg w-[420px] border-2 border-card-border overflow-hidden shadow-lg" onClick={ e => e.stopPropagation() }>
+                { /* Header */ }
+                <div className="flex items-center justify-between px-3 py-2 bg-card-header">
+                    <span className="text-sm font-bold text-white">
+                        { isNew ? LocalizeText('catalog.admin.offer.new') : `${ LocalizeText('catalog.admin.offer.edit') } #${ editingOffer.offerId }` }
+                    </span>
+                    <div className="cursor-pointer" onClick={ () => setEditingOffer(null) }>
+                        <FaTimes className="text-white/70 hover:text-white text-xs" />
+                    </div>
+                </div>
+
+                <div className="p-3 flex flex-col gap-2.5">
+                    { /* Current name */ }
+                    { !isNew &&
+                        <div className="text-[10px] text-muted bg-card-grid-item rounded px-2.5 py-1 font-mono border border-card-grid-item-border">
+                            { editingOffer.localizationName }
+                        </div> }
+
+                    { /* Catalog Name */ }
+                    <div className="flex flex-col gap-0.5">
+                        <label className="text-[9px] text-primary uppercase font-bold">{ LocalizeText('catalog.admin.offer.name') }</label>
+                        <input className={ inputClass } placeholder="es. rare_dragon_lamp" type="text" value={ catalogName } onChange={ e => setCatalogName(e.target.value) } />
+                    </div>
+
+                    { /* Generale */ }
+                    <div className="bg-white rounded border-2 border-card-grid-item-border p-2.5">
+                        <div className="text-[9px] text-primary uppercase font-bold mb-1.5">{ LocalizeText('catalog.admin.offer.general') }</div>
+                        <div className="grid grid-cols-3 gap-1.5">
+                            <div className="flex flex-col gap-0.5">
+                                <label className="text-[9px] text-muted">Item IDs</label>
+                                <input className={ inputClass } placeholder="1234" type="text" value={ itemIds } onChange={ e => setItemIds(e.target.value) } />
+                            </div>
+                            <div className="flex flex-col gap-0.5">
+                                <label className="text-[9px] text-muted">{ LocalizeText('catalog.admin.offer.quantity') }</label>
+                                <input className={ inputClass } min={ 1 } type="number" value={ amount } onChange={ e => setAmount(parseInt(e.target.value) || 1) } />
+                            </div>
+                            <div className="flex flex-col gap-0.5">
+                                <label className="text-[9px] text-muted">{ LocalizeText('catalog.admin.order') }</label>
+                                <input className={ inputClass } min={ 0 } type="number" value={ orderNumber } onChange={ e => setOrderNumber(parseInt(e.target.value) || 0) } />
+                            </div>
+                        </div>
+                    </div>
+
+                    { /* Prezzi */ }
+                    <div className="bg-white rounded border-2 border-card-grid-item-border p-2.5">
+                        <div className="text-[9px] text-primary uppercase font-bold mb-1.5">{ LocalizeText('catalog.admin.offer.prices') }</div>
+                        <div className="grid grid-cols-3 gap-1.5">
+                            <div className="flex flex-col gap-0.5">
+                                <label className="text-[9px] text-muted">{ LocalizeText('catalog.admin.offer.credits') }</label>
+                                <input className={ inputClass } min={ 0 } type="number" value={ costCredits } onChange={ e => setCostCredits(parseInt(e.target.value) || 0) } />
+                            </div>
+                            <div className="flex flex-col gap-0.5">
+                                <label className="text-[9px] text-muted">{ LocalizeText('catalog.admin.offer.points') }</label>
+                                <input className={ inputClass } min={ 0 } type="number" value={ costPoints } onChange={ e => setCostPoints(parseInt(e.target.value) || 0) } />
+                            </div>
+                            <div className="flex flex-col gap-0.5">
+                                <label className="text-[9px] text-muted">{ LocalizeText('catalog.admin.offer.points.type') }</label>
+                                <select className={ inputClass } value={ pointsType } onChange={ e => setPointsType(parseInt(e.target.value)) }>
+                                    <option value={ 0 }>Duckets</option>
+                                    <option value={ 5 }>Diamonds</option>
+                                    <option value={ 101 }>Seasonal</option>
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+
+                    { /* Opzioni */ }
+                    <div className="bg-white rounded border-2 border-card-grid-item-border p-2.5">
+                        <div className="text-[9px] text-primary uppercase font-bold mb-1.5">{ LocalizeText('catalog.admin.offer.options') }</div>
+                        <div className="grid grid-cols-3 gap-1.5 mb-1.5">
+                            <div className="flex flex-col gap-0.5">
+                                <label className="text-[9px] text-muted">{ LocalizeText('catalog.admin.offer.club.only') }</label>
+                                <select className={ inputClass } value={ clubOnly } onChange={ e => setClubOnly(e.target.value) }>
+                                    <option value="0">No</option>
+                                    <option value="1">Si</option>
+                                </select>
+                            </div>
+                            <div className="flex flex-col gap-0.5">
+                                <label className="text-[9px] text-muted">Limited Stack</label>
+                                <input className={ inputClass } min={ 0 } type="number" value={ limitedStack } onChange={ e => setLimitedStack(parseInt(e.target.value) || 0) } />
+                            </div>
+                            <div className="flex flex-col gap-0.5">
+                                <label className="text-[9px] text-muted">Offer ID</label>
+                                <input className={ inputClass } type="number" value={ offerId } onChange={ e => setOfferIdGroup(parseInt(e.target.value) || -1) } />
+                            </div>
+                        </div>
+                        <div className="flex flex-col gap-0.5">
+                            <label className="text-[9px] text-muted">{ LocalizeText('catalog.admin.offer.extradata') }</label>
+                            <input className={ inputClass } placeholder="dati extra (opzionale)" type="text" value={ extradata } onChange={ e => setExtradata(e.target.value) } />
+                        </div>
+                        <div className="flex items-center gap-1.5 mt-1.5">
+                            <input className="accent-primary" checked={ haveOffer === '1' } id="haveOffer" type="checkbox" onChange={ e => setHaveOffer(e.target.checked ? '1' : '0') } />
+                            <label className="text-[10px] cursor-pointer" htmlFor="haveOffer">{ LocalizeText('catalog.admin.offer.have.offer') }</label>
+                        </div>
+                    </div>
+
+                    { /* Actions */ }
+                    <div className="flex justify-between">
+                        { !isNew
+                            ? <button className="flex items-center gap-1 px-2 py-1 rounded text-[10px] font-bold bg-danger/10 text-danger border border-danger/30 hover:bg-danger/20 transition-colors cursor-pointer" onClick={ handleDelete }>
+                                <FaTrash className="text-[8px]" /> { LocalizeText('catalog.admin.delete') }
+                            </button>
+                            : <div /> }
+                        <button className="flex items-center gap-1 px-3 py-1 rounded text-[10px] font-bold bg-primary text-white hover:bg-secondary transition-colors cursor-pointer disabled:opacity-50" disabled={ loading } onClick={ handleSave }>
+                            { loading ? <FaSpinner className="text-[8px] animate-spin" /> : <FaSave className="text-[8px]" /> } { isNew ? LocalizeText('catalog.admin.create') : LocalizeText('catalog.admin.save') }
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>,
+        document.body
+    );
+};
diff --git a/src/components/catalog/views/admin/CatalogAdminPageEditView.tsx b/src/components/catalog/views/admin/CatalogAdminPageEditView.tsx
new file mode 100644
index 0000000..6fd4a07
--- /dev/null
+++ b/src/components/catalog/views/admin/CatalogAdminPageEditView.tsx
@@ -0,0 +1,153 @@
+import { FC, useEffect, useState } from 'react';
+import { FaSave, FaSpinner, FaTimes, FaTrash } from 'react-icons/fa';
+import { LocalizeText } from '../../../../api';
+import { useCatalog } from '../../../../hooks';
+import { IPageEditData, useCatalogAdmin } from '../../CatalogAdminContext';
+
+const LAYOUT_OPTIONS = [
+    'default_3x3', 'frontpage4', 'pets', 'pets2', 'pets3',
+    'spaces_new', 'soundmachine', 'trophies', 'roomads',
+    'guild_frontpage', 'guild_forum', 'guild_custom_furni',
+    'vip_buy', 'marketplace', 'marketplace_own_items',
+    'recycler', 'recycler_info', 'recycler_prizes',
+    'info_loyalty', 'badge_display', 'bots', 'single_bundle',
+    'color_grouping', 'recent_purchases', 'custom_prefix'
+];
+
+export const CatalogAdminPageEditView: FC<{}> = () =>
+{
+    const { currentPage = null, activeNodes = [], rootNode = null } = useCatalog();
+    const catalogAdmin = useCatalogAdmin();
+    const editingPageData = catalogAdmin?.editingPageData ?? false;
+    const editingRootPage = catalogAdmin?.editingRootPage ?? false;
+    const editingPageNode = catalogAdmin?.editingPageNode ?? null;
+    const loading = catalogAdmin?.loading ?? false;
+
+    const [ caption, setCaption ] = useState('');
+    const [ pageLayout, setPageLayout ] = useState('default_3x3');
+    const [ minRank, setMinRank ] = useState(1);
+    const [ visible, setVisible ] = useState('1');
+    const [ enabled, setEnabled ] = useState('1');
+    const [ orderNum, setOrderNum ] = useState(0);
+
+    // Resolve what we're editing:
+    // 1. editingPageNode (explicit node from sidebar click)
+    // 2. editingRootPage (root button)
+    // 3. current active page (from "Modifica Pagina" in layout)
+    const targetNode = editingPageNode
+        ? editingPageNode
+        : editingRootPage
+            ? rootNode
+            : (activeNodes.length > 0 ? activeNodes[activeNodes.length - 1] : null);
+
+    const targetPageId = targetNode?.pageId ?? currentPage?.pageId;
+    const isRoot = editingRootPage;
+
+    const closeForm = () =>
+    {
+        catalogAdmin?.setEditingPageData(false);
+        catalogAdmin?.setEditingRootPage(false);
+        catalogAdmin?.setEditingPageNode(null);
+    };
+
+    useEffect(() =>
+    {
+        if(!editingPageData || !targetNode) return;
+
+        setCaption(targetNode.localization || '');
+        setPageLayout(currentPage?.layoutCode || 'default_3x3');
+        setVisible(targetNode.isVisible ? '1' : '0');
+        setEnabled('1');
+        setMinRank(1);
+        setOrderNum(0);
+    }, [ editingPageData, targetNode, currentPage ]);
+
+    if(!editingPageData || !targetNode) return null;
+
+    const inputClass = 'text-[11px] border-2 border-card-grid-item-border rounded px-2 py-1 bg-white focus:outline-none focus:border-primary transition-colors';
+
+    const handleSave = async () =>
+    {
+        if(!catalogAdmin?.savePage) return;
+
+        const parentNode = targetNode.parent;
+
+        const data: IPageEditData = {
+            pageId: targetPageId,
+            caption,
+            pageLayout,
+            minRank,
+            visible,
+            enabled,
+            orderNum,
+            parentId: parentNode ? parentNode.pageId : -1,
+        };
+
+        const success = await catalogAdmin.savePage(data);
+
+        if(success) closeForm();
+    };
+
+    const handleDelete = async () =>
+    {
+        if(!catalogAdmin?.deletePage || isRoot) return;
+        if(!confirm(LocalizeText('catalog.admin.delete.page.confirm', [ 'name' ], [ targetNode.localization ]))) return;
+
+        const success = await catalogAdmin.deletePage(targetPageId);
+
+        if(success) closeForm();
+    };
+
+    return (
+        <div className="bg-white rounded border-2 border-card-grid-item-border p-2.5 mb-2">
+            <div className="flex items-center justify-between mb-2">
+                <span className="text-[11px] font-bold text-primary uppercase tracking-wide">
+                    { isRoot ? LocalizeText('catalog.admin.edit.root') : `${ LocalizeText('catalog.admin.edit') } ${ targetNode.localization } (#${ targetPageId })` }
+                </span>
+                <FaTimes className="text-muted cursor-pointer hover:text-danger text-[10px]" onClick={ closeForm } />
+            </div>
+
+            <div className="grid grid-cols-3 gap-1.5">
+                <div className="flex flex-col gap-0.5 col-span-2">
+                    <label className="text-[9px] text-muted uppercase font-bold">Caption</label>
+                    <input className={ inputClass } value={ caption } onChange={ e => setCaption(e.target.value) } />
+                </div>
+                <div className="flex flex-col gap-0.5">
+                    <label className="text-[9px] text-muted uppercase font-bold">Min Rank</label>
+                    <input className={ inputClass } min={ 1 } type="number" value={ minRank } onChange={ e => setMinRank(parseInt(e.target.value) || 1) } />
+                </div>
+                <div className="flex flex-col gap-0.5">
+                    <label className="text-[9px] text-muted uppercase font-bold">Layout</label>
+                    <select className={ inputClass } value={ pageLayout } onChange={ e => setPageLayout(e.target.value) }>
+                        { LAYOUT_OPTIONS.map(l => <option key={ l } value={ l }>{ l }</option>) }
+                    </select>
+                </div>
+                <div className="flex flex-col gap-0.5">
+                    <label className="text-[9px] text-muted uppercase font-bold">{ LocalizeText('catalog.admin.order') }</label>
+                    <input className={ inputClass } min={ 0 } type="number" value={ orderNum } onChange={ e => setOrderNum(parseInt(e.target.value) || 0) } />
+                </div>
+                <div className="flex items-end gap-2 pb-0.5">
+                    <label className="flex items-center gap-1 text-[10px] cursor-pointer">
+                        <input className="accent-primary" checked={ visible === '1' } type="checkbox" onChange={ e => setVisible(e.target.checked ? '1' : '0') } />
+                        { LocalizeText('catalog.admin.visible') }
+                    </label>
+                    <label className="flex items-center gap-1 text-[10px] cursor-pointer">
+                        <input className="accent-primary" checked={ enabled === '1' } type="checkbox" onChange={ e => setEnabled(e.target.checked ? '1' : '0') } />
+                        { LocalizeText('catalog.admin.enabled') }
+                    </label>
+                </div>
+            </div>
+
+            <div className="flex justify-between mt-2">
+                { !isRoot
+                    ? <button className="flex items-center gap-1 px-2 py-1 rounded text-[10px] font-bold bg-danger/10 text-danger border border-danger/30 hover:bg-danger/20 transition-colors cursor-pointer" onClick={ handleDelete }>
+                        <FaTrash className="text-[8px]" /> { LocalizeText('catalog.admin.delete') }
+                    </button>
+                    : <div /> }
+                <button className="flex items-center gap-1 px-3 py-1 rounded text-[10px] font-bold bg-primary text-white hover:bg-secondary transition-colors cursor-pointer disabled:opacity-50" disabled={ loading } onClick={ handleSave }>
+                    { loading ? <FaSpinner className="text-[8px] animate-spin" /> : <FaSave className="text-[8px]" /> } { LocalizeText('catalog.admin.save') }
+                </button>
+            </div>
+        </div>
+    );
+};
diff --git a/src/components/catalog/views/catalog-rail/CatalogRailItemView.tsx b/src/components/catalog/views/catalog-rail/CatalogRailItemView.tsx
new file mode 100644
index 0000000..3b1cd21
--- /dev/null
+++ b/src/components/catalog/views/catalog-rail/CatalogRailItemView.tsx
@@ -0,0 +1,30 @@
+import { FC } from 'react';
+import { ICatalogNode } from '../../../../api';
+import { CatalogIconView } from '../catalog-icon/CatalogIconView';
+
+interface CatalogRailItemViewProps
+{
+    node: ICatalogNode;
+    isActive: boolean;
+    onClick: () => void;
+}
+
+export const CatalogRailItemView: FC<CatalogRailItemViewProps> = props =>
+{
+    const { node, isActive, onClick } = props;
+
+    return (
+        <div
+            className={ `flex items-center gap-2 px-1.5 py-1.5 rounded-lg cursor-pointer transition-all duration-150 shrink-0 ${ isActive ? 'bg-white shadow-catalog-card ring-1 ring-catalog-accent/30' : 'hover:bg-white/60' }` }
+            title={ node.localization }
+            onClick={ onClick }
+        >
+            <div className="w-[30px] h-[30px] flex items-center justify-center shrink-0">
+                <CatalogIconView icon={ node.iconId } />
+            </div>
+            <span className={ `text-[11px] font-medium whitespace-nowrap overflow-hidden opacity-0 group-hover:opacity-100 transition-opacity duration-200 truncate ${ isActive ? 'text-catalog-accent' : 'text-catalog-text' }` }>
+                { node.localization }
+            </span>
+        </div>
+    );
+};
diff --git a/src/components/catalog/views/favorites/CatalogFavoritesView.tsx b/src/components/catalog/views/favorites/CatalogFavoritesView.tsx
new file mode 100644
index 0000000..676f771
--- /dev/null
+++ b/src/components/catalog/views/favorites/CatalogFavoritesView.tsx
@@ -0,0 +1,154 @@
+import { FC, useMemo } from 'react';
+import { FaHeart, FaStar, FaTimes } from 'react-icons/fa';
+import { ICatalogNode, LocalizeText } from '../../../../api';
+import { useCatalog, useCatalogFavorites } from '../../../../hooks';
+import { CatalogIconView } from '../catalog-icon/CatalogIconView';
+
+interface CatalogFavoritesViewProps
+{
+    onClose: () => void;
+}
+
+export const CatalogFavoritesView: FC<CatalogFavoritesViewProps> = props =>
+{
+    const { onClose } = props;
+    const { favoriteOffers, favoritePageIds, toggleFavoritePage, toggleFavoriteOffer } = useCatalogFavorites();
+    const { offersToNodes, activateNode, openPageByOfferId, rootNode } = useCatalog();
+
+    const favoritePages = useMemo(() =>
+    {
+        if(!rootNode || favoritePageIds.length === 0) return [];
+
+        const pages: Array<{ pageId: number; name: string; iconId: number; node: ICatalogNode }> = [];
+
+        const findNode = (node: ICatalogNode) =>
+        {
+            if(favoritePageIds.includes(node.pageId))
+            {
+                pages.push({ pageId: node.pageId, name: node.localization, iconId: node.iconId, node });
+            }
+
+            if(node.children)
+            {
+                for(const child of node.children) findNode(child);
+            }
+        };
+
+        findNode(rootNode);
+
+        return pages;
+    }, [ favoritePageIds, rootNode ]);
+
+    // Enrich offers with node data if available
+    const enrichedOffers = useMemo(() =>
+    {
+        return favoriteOffers.map(fav =>
+        {
+            let nodeName: string | null = null;
+            let nodeIconId: number | null = null;
+
+            if(offersToNodes)
+            {
+                const nodes = offersToNodes.get(fav.offerId);
+
+                if(nodes && nodes.length > 0)
+                {
+                    nodeName = nodes[0].localization;
+                    nodeIconId = nodes[0].iconId;
+                }
+            }
+
+            return {
+                ...fav,
+                displayName: fav.name || nodeName || `Offer #${ fav.offerId }`,
+                nodeIconId
+            };
+        });
+    }, [ favoriteOffers, offersToNodes ]);
+
+    return (
+        <div className="flex flex-col h-full gap-2 p-2.5">
+            { /* Header */ }
+            <div className="flex items-center justify-between">
+                <div className="flex items-center gap-1.5">
+                    <FaHeart className="text-danger text-xs" />
+                    <span className="text-sm font-bold">{ LocalizeText('catalog.favorites') }</span>
+                    <span className="text-[10px] text-muted font-bold">({ enrichedOffers.length + favoritePages.length })</span>
+                </div>
+                <button className="text-muted hover:text-danger cursor-pointer transition-colors" onClick={ onClose }>
+                    <FaTimes className="text-[10px]" />
+                </button>
+            </div>
+
+            <div className="flex-1 overflow-y-auto flex flex-col gap-2.5">
+                { /* Favorite Pages */ }
+                { favoritePages.length > 0 &&
+                    <div>
+                        <div className="flex items-center gap-1 mb-1">
+                            <FaStar className="text-warning text-[8px]" />
+                            <span className="text-[10px] font-bold text-muted uppercase tracking-wider">{ LocalizeText('catalog.favorites.pages') }</span>
+                        </div>
+                        <div className="flex flex-col gap-px">
+                            { favoritePages.map(page => (
+                                <div
+                                    key={ page.pageId }
+                                    className="group/fav flex items-center gap-2 px-1.5 py-1 bg-card-grid-item rounded border border-card-grid-item-border hover:bg-card-grid-item-active cursor-pointer transition-all duration-100"
+                                    onClick={ () => { activateNode(page.node); onClose(); } }
+                                >
+                                    <CatalogIconView icon={ page.iconId } />
+                                    <span className="text-[11px] flex-1 truncate font-medium">{ page.name }</span>
+                                    <FaTimes
+                                        className="text-[7px] text-muted opacity-0 group-hover/fav:opacity-100 hover:text-danger transition-all cursor-pointer"
+                                        onClick={ e => { e.stopPropagation(); toggleFavoritePage(page.pageId); } }
+                                    />
+                                </div>
+                            )) }
+                        </div>
+                    </div> }
+
+                { /* Favorite Offers */ }
+                { enrichedOffers.length > 0 &&
+                    <div>
+                        <div className="flex items-center gap-1 mb-1">
+                            <FaHeart className="text-danger text-[8px]" />
+                            <span className="text-[10px] font-bold text-muted uppercase tracking-wider">{ LocalizeText('catalog.favorites.furni') }</span>
+                        </div>
+                        <div className="flex flex-col gap-px">
+                            { enrichedOffers.map(fav => (
+                                <div
+                                    key={ fav.offerId }
+                                    className="group/fav flex items-center gap-2 px-1.5 py-1 bg-card-grid-item rounded border border-card-grid-item-border hover:bg-card-grid-item-active cursor-pointer transition-all duration-100"
+                                    onClick={ () => { openPageByOfferId(fav.offerId); onClose(); } }
+                                >
+                                    { /* Furni icon */ }
+                                    <div className="w-[28px] h-[28px] flex items-center justify-center shrink-0 bg-white rounded border border-card-grid-item-border overflow-hidden">
+                                        { fav.iconUrl
+                                            ? <img className="max-w-full max-h-full object-contain image-rendering-pixelated" src={ fav.iconUrl } />
+                                            : fav.nodeIconId !== null
+                                                ? <CatalogIconView icon={ fav.nodeIconId } />
+                                                : <FaHeart className="text-[9px] text-muted" />
+                                        }
+                                    </div>
+                                    <span className="text-[11px] flex-1 truncate font-medium">{ fav.displayName }</span>
+                                    <FaTimes
+                                        className="text-[7px] text-muted opacity-0 group-hover/fav:opacity-100 hover:text-danger transition-all cursor-pointer"
+                                        onClick={ e => { e.stopPropagation(); toggleFavoriteOffer(fav.offerId); } }
+                                    />
+                                </div>
+                            )) }
+                        </div>
+                    </div> }
+
+                { /* Empty state */ }
+                { favoritePages.length === 0 && enrichedOffers.length === 0 &&
+                    <div className="flex-1 flex items-center justify-center">
+                        <div className="text-center text-muted">
+                            <FaHeart className="text-xl text-card-grid-item-border mx-auto mb-1.5" />
+                            <p className="text-[11px] font-bold">{ LocalizeText('catalog.favorites.empty') }</p>
+                            <p className="text-[10px] mt-0.5">{ LocalizeText('catalog.favorites.empty.hint') }</p>
+                        </div>
+                    </div> }
+            </div>
+        </div>
+    );
+};
diff --git a/src/components/catalog/views/navigation/CatalogBreadcrumbView.tsx b/src/components/catalog/views/navigation/CatalogBreadcrumbView.tsx
new file mode 100644
index 0000000..60ed73a
--- /dev/null
+++ b/src/components/catalog/views/navigation/CatalogBreadcrumbView.tsx
@@ -0,0 +1,39 @@
+import { FC } from 'react';
+import { FaChevronRight, FaHome } from 'react-icons/fa';
+import { LocalizeText } from '../../../../api';
+import { useCatalog } from '../../../../hooks';
+
+export const CatalogBreadcrumbView: FC<{}> = () =>
+{
+    const { activeNodes = [], activateNode } = useCatalog();
+
+    if(!activeNodes || activeNodes.length === 0)
+    {
+        return (
+            <div className="flex items-center gap-1.5 text-xs text-catalog-text-muted">
+                <FaHome className="text-[10px]" />
+                <span>{ LocalizeText('catalog.title') }</span>
+            </div>
+        );
+    }
+
+    return (
+        <div className="flex items-center gap-1 text-[11px] text-catalog-text-muted overflow-hidden min-w-0">
+            <FaHome
+                className="text-[10px] cursor-pointer hover:text-catalog-accent transition-colors shrink-0"
+                onClick={ () => activateNode(activeNodes[0]) }
+            />
+            { activeNodes.map((node, i) => (
+                <span key={ node.pageId } className="flex items-center gap-1 min-w-0">
+                    <FaChevronRight className="text-[7px] opacity-30 shrink-0" />
+                    <span
+                        className={ `truncate ${ i === activeNodes.length - 1 ? 'text-catalog-text font-semibold' : 'cursor-pointer hover:text-catalog-accent transition-colors' }` }
+                        onClick={ i < activeNodes.length - 1 ? () => activateNode(node) : undefined }
+                    >
+                        { node.localization }
+                    </span>
+                </span>
+            )) }
+        </div>
+    );
+};
diff --git a/src/components/catalog/views/navigation/CatalogNavigationItemView.tsx b/src/components/catalog/views/navigation/CatalogNavigationItemView.tsx
index 48ea04e..d31d801 100644
--- a/src/components/catalog/views/navigation/CatalogNavigationItemView.tsx
+++ b/src/components/catalog/views/navigation/CatalogNavigationItemView.tsx
@@ -1,8 +1,8 @@
-import { FC } from 'react';
-import { FaCaretDown, FaCaretUp } from 'react-icons/fa';
-import { ICatalogNode } from '../../../../api';
-import { LayoutGridItem, Text } from '../../../../common';
-import { useCatalog } from '../../../../hooks';
+import { FC, useCallback, useRef, useState } from 'react';
+import { FaArrowsAlt, FaCaretDown, FaCaretUp, FaPlus, FaStar, FaTrash } from 'react-icons/fa';
+import { ICatalogNode, LocalizeText } from '../../../../api';
+import { useCatalog, useCatalogFavorites } from '../../../../hooks';
+import { useCatalogAdmin } from '../../CatalogAdminContext';
 import { CatalogIconView } from '../catalog-icon/CatalogIconView';
 import { CatalogNavigationSetView } from './CatalogNavigationSetView';
 
@@ -16,18 +16,122 @@ export const CatalogNavigationItemView: FC<CatalogNavigationItemViewProps> = pro
 {
     const { node = null, child = false } = props;
     const { activateNode = null } = useCatalog();
+    const catalogAdmin = useCatalogAdmin();
+    const adminMode = catalogAdmin?.adminMode ?? false;
+    const { isFavoritePage, toggleFavoritePage } = useCatalogFavorites();
+    const isFav = node ? isFavoritePage(node.pageId) : false;
+    const [ isDragOver, setIsDragOver ] = useState(false);
+    const dragRef = useRef<HTMLDivElement>(null);
+
+    const handleDragStart = useCallback((e: React.DragEvent) =>
+    {
+        if(!adminMode) return;
+
+        e.dataTransfer.setData('text/plain', JSON.stringify({ pageId: node.pageId, parentId: node.parent?.pageId ?? -1 }));
+        e.dataTransfer.effectAllowed = 'move';
+    }, [ adminMode, node ]);
+
+    const handleDragOver = useCallback((e: React.DragEvent) =>
+    {
+        if(!adminMode) return;
+
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'move';
+        setIsDragOver(true);
+    }, [ adminMode ]);
+
+    const handleDragLeave = useCallback(() =>
+    {
+        setIsDragOver(false);
+    }, []);
+
+    const handleDrop = useCallback((e: React.DragEvent) =>
+    {
+        if(!adminMode) return;
+
+        e.preventDefault();
+        setIsDragOver(false);
+
+        try
+        {
+            const data = JSON.parse(e.dataTransfer.getData('text/plain'));
+
+            if(data.pageId && data.pageId !== node.pageId)
+            {
+                // Drop onto a branch = reparent under this node
+                // Drop onto a leaf = reorder as sibling
+                const targetParentId = node.isBranch ? node.pageId : (node.parent?.pageId ?? -1);
+                const targetIndex = node.isBranch ? 0 : (node.parent?.children?.indexOf(node) ?? 0);
+
+                catalogAdmin?.reorderPage(data.pageId, targetParentId, targetIndex);
+            }
+        }
+        catch(err)
+        {
+            // Invalid drag data
+        }
+    }, [ adminMode, node, catalogAdmin ]);
 
     return (
-        <div className={ child ? 'pl-[5px] border-s-2 border-[#b6bec5]' : '' }>
-            <LayoutGridItem className={ ' h-[23px]! bg-[#cdd3d9] border-0! px-[3px] py-px text-sm' } column={ false } gap={ 1 } itemActive={ node.isActive } onClick={ event => activateNode(node) }>
-                <CatalogIconView icon={ node.iconId } />
-                <Text truncate className="grow!">{ node.localization }</Text>
+        <div className={ child ? 'pl-1.5 ml-1.5 border-l-2 border-card-grid-item-border' : '' }>
+            <div
+                ref={ dragRef }
+                className={ `group/nav flex items-center gap-1.5 px-1.5 py-[3px] mx-0.5 rounded cursor-pointer transition-all duration-100 text-[11px] ${ node.isActive ? 'bg-card-grid-item-active border border-card-grid-item-border-active shadow-inner1px font-bold' : 'border border-transparent hover:bg-card-grid-item-active' } ${ isDragOver ? 'ring-2 ring-primary ring-offset-1 bg-primary/10' : '' }` }
+                draggable={ adminMode }
+                onClick={ () => activateNode(node) }
+                onDragLeave={ adminMode ? handleDragLeave : undefined }
+                onDragOver={ adminMode ? handleDragOver : undefined }
+                onDragStart={ adminMode ? handleDragStart : undefined }
+                onDrop={ adminMode ? handleDrop : undefined }
+            >
+                { adminMode &&
+                    <FaArrowsAlt className="text-[7px] text-muted cursor-grab shrink-0 opacity-0 group-hover/nav:opacity-60" /> }
+                <div className="w-[20px] h-[20px] flex items-center justify-center shrink-0">
+                    <CatalogIconView icon={ node.iconId } />
+                </div>
+                <span className="flex-1 truncate" title={ adminMode ? `Page ID: ${ node.pageId }` : undefined }>{ node.localization }</span>
+                { adminMode &&
+                    <div className="flex items-center gap-1 opacity-0 group-hover/nav:opacity-100 transition-opacity">
+                        <FaPlus
+                            className="text-[8px] text-success hover:text-green-800"
+                            title={ LocalizeText('catalog.admin.create.subpage') }
+                            onClick={ e =>
+                            {
+                                e.stopPropagation();
+                                catalogAdmin.createPage({
+                                    caption: 'New Page',
+                                    pageLayout: 'default_3x3',
+                                    minRank: 1,
+                                    visible: '1',
+                                    enabled: '1',
+                                    orderNum: 0,
+                                    parentId: node.pageId,
+                                });
+                            } }
+                        />
+                        <FaTrash
+                            className="text-[8px] text-danger hover:text-red-700"
+                            title={ LocalizeText('catalog.admin.delete.page') }
+                            onClick={ e =>
+                            {
+                                e.stopPropagation();
+                                if(confirm(LocalizeText('catalog.admin.delete.page.confirm', [ 'name' ], [ node.localization ])))
+                                {
+                                    catalogAdmin.deletePage(node.pageId);
+                                }
+                            } }
+                        />
+                    </div> }
+                { !adminMode && node.pageId > 0 &&
+                    <FaStar
+                        className={ `text-[8px] transition-all duration-100 cursor-pointer shrink-0 ${ isFav ? 'text-warning opacity-100' : 'text-muted opacity-0 group-hover/nav:opacity-100 hover:text-warning' }` }
+                        onClick={ e => { e.stopPropagation(); toggleFavoritePage(node.pageId); } }
+                    /> }
                 { node.isBranch &&
-                    <>
-                        { node.isOpen && <FaCaretUp className="fa-icon" /> }
-                        { !node.isOpen && <FaCaretDown className="fa-icon" /> }
-                    </> }
-            </LayoutGridItem>
+                    <span className="text-[9px] text-muted shrink-0">
+                        { node.isOpen ? <FaCaretUp /> : <FaCaretDown /> }
+                    </span> }
+            </div>
             { node.isOpen && node.isBranch &&
                 <CatalogNavigationSetView child={ true } node={ node } /> }
         </div>
diff --git a/src/components/catalog/views/navigation/CatalogNavigationView.tsx b/src/components/catalog/views/navigation/CatalogNavigationView.tsx
index 10e2a2f..777c5fd 100644
--- a/src/components/catalog/views/navigation/CatalogNavigationView.tsx
+++ b/src/components/catalog/views/navigation/CatalogNavigationView.tsx
@@ -1,8 +1,6 @@
 import { FC } from 'react';
 import { ICatalogNode } from '../../../../api';
-import { AutoGrid, Column } from '../../../../common';
 import { useCatalog } from '../../../../hooks';
-import { CatalogSearchView } from '../page/common/CatalogSearchView';
 import { CatalogNavigationItemView } from './CatalogNavigationItemView';
 import { CatalogNavigationSetView } from './CatalogNavigationSetView';
 
@@ -17,18 +15,13 @@ export const CatalogNavigationView: FC<CatalogNavigationViewProps> = props =>
     const { searchResult = null } = useCatalog();
 
     return (
-        <>
-            <CatalogSearchView />
-            <Column fullHeight className="border-[#b6bec5]! bg-[#cdd3d9] border-2 border-[solid] rounded p-1" overflow="hidden">
-                <AutoGrid columnCount={ 1 } gap={ 1 } id="nitro-catalog-main-navigation">
-                    { searchResult && (searchResult.filteredNodes.length > 0) && searchResult.filteredNodes.map((n, index) =>
-                    {
-                        return <CatalogNavigationItemView key={ index } node={ n } />;
-                    }) }
-                    { !searchResult &&
-                        <CatalogNavigationSetView node={ node } /> }
-                </AutoGrid>
-            </Column>
-        </>
+        <div className="flex flex-col gap-px px-0.5 py-0.5">
+            { searchResult && (searchResult.filteredNodes.length > 0) && searchResult.filteredNodes.map((n, index) =>
+            {
+                return <CatalogNavigationItemView key={ index } node={ n } />;
+            }) }
+            { !searchResult &&
+                <CatalogNavigationSetView node={ node } /> }
+        </div>
     );
 };
diff --git a/src/components/catalog/views/page/common/CatalogGridOfferView.tsx b/src/components/catalog/views/page/common/CatalogGridOfferView.tsx
index f99bbad..a3fcedd 100644
--- a/src/components/catalog/views/page/common/CatalogGridOfferView.tsx
+++ b/src/components/catalog/views/page/common/CatalogGridOfferView.tsx
@@ -1,8 +1,9 @@
 import { MouseEventType } from '@nitrots/nitro-renderer';
 import { FC, MouseEvent, useMemo, useState } from 'react';
+import { FaHeart } from 'react-icons/fa';
 import { IPurchasableOffer, Offer, ProductTypeEnum } from '../../../../../api';
 import { LayoutAvatarImageView, LayoutGridItem, LayoutGridItemProps } from '../../../../../common';
-import { useCatalog, useInventoryFurni } from '../../../../../hooks';
+import { useCatalog, useCatalogFavorites, useInventoryFurni } from '../../../../../hooks';
 
 interface CatalogGridOfferViewProps extends LayoutGridItemProps
 {
@@ -16,6 +17,8 @@ export const CatalogGridOfferView: FC<CatalogGridOfferViewProps> = props =>
     const [ isMouseDown, setMouseDown ] = useState(false);
     const { requestOfferToMover = null } = useCatalog();
     const { isVisible = false } = useInventoryFurni();
+    const { isFavoriteOffer, toggleFavoriteOffer } = useCatalogFavorites();
+    const isFav = isFavoriteOffer(offer.offerId);
 
     const iconUrl = useMemo(() =>
     {
@@ -51,9 +54,28 @@ export const CatalogGridOfferView: FC<CatalogGridOfferViewProps> = props =>
     if(!product) return null;
 
     return (
-        <LayoutGridItem itemActive={ itemActive } itemCount={ ((offer.pricingModel === Offer.PRICING_MODEL_MULTI) ? product.productCount : 1) } itemImage={ iconUrl } itemUniqueNumber={ product.uniqueLimitedItemSeriesSize } itemUniqueSoldout={ (product.uniqueLimitedItemSeriesSize && !product.uniqueLimitedItemsLeft) } onMouseDown={ onMouseEvent } onMouseOut={ onMouseEvent } onMouseUp={ onMouseEvent } { ...rest }>
+        <LayoutGridItem
+            className="group/tile relative"
+            itemActive={ itemActive }
+            itemCount={ ((offer.pricingModel === Offer.PRICING_MODEL_MULTI) ? product.productCount : 1) }
+            itemImage={ iconUrl }
+            itemUniqueNumber={ product.uniqueLimitedItemSeriesSize }
+            itemUniqueSoldout={ (product.uniqueLimitedItemSeriesSize && !product.uniqueLimitedItemsLeft) }
+            title={ `ID: ${ product.productClassId } | Offer: ${ offer.offerId }` }
+            onMouseDown={ onMouseEvent }
+            onMouseOut={ onMouseEvent }
+            onMouseUp={ onMouseEvent }
+            { ...rest }
+        >
             { (offer.product.productType === ProductTypeEnum.ROBOT) &&
                 <LayoutAvatarImageView direction={ 3 } figure={ offer.product.extraParam } headOnly={ true } /> }
+            <div
+                className={ `absolute top-0 right-0 z-10 p-0.5 cursor-pointer transition-opacity duration-100 ${ isFav ? 'opacity-100' : 'opacity-0 group-hover/tile:opacity-100' }` }
+                onClick={ e => { e.stopPropagation(); e.preventDefault(); toggleFavoriteOffer(offer.offerId, offer.localizationName, iconUrl); } }
+                onMouseDown={ e => e.stopPropagation() }
+            >
+                <FaHeart className={ `text-[10px] drop-shadow transition-colors duration-100 ${ isFav ? 'text-danger' : 'text-muted hover:text-danger' }` } />
+            </div>
         </LayoutGridItem>
     );
 };
diff --git a/src/components/catalog/views/page/common/CatalogSearchView.tsx b/src/components/catalog/views/page/common/CatalogSearchView.tsx
index dc3f34b..7cc30c7 100644
--- a/src/components/catalog/views/page/common/CatalogSearchView.tsx
+++ b/src/components/catalog/views/page/common/CatalogSearchView.tsx
@@ -2,11 +2,9 @@ import { GetSessionDataManager, IFurnitureData } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { FaSearch, FaTimes } from 'react-icons/fa';
 import { CatalogPage, CatalogType, FilterCatalogNode, FurnitureOffer, GetOfferNodes, ICatalogNode, ICatalogPage, IPurchasableOffer, LocalizeText, PageLocalization, SearchResult } from '../../../../../api';
-import { Button, Flex } from '../../../../../common';
 import { useCatalog } from '../../../../../hooks';
-import { NitroInput } from '../../../../../layout';
 
-export const CatalogSearchView: FC<{}> = props =>
+export const CatalogSearchView: FC<{}> = () =>
 {
     const [ searchValue, setSearchValue ] = useState('');
     const { currentType = null, rootNode = null, offersToNodes = null, searchResult = null, setSearchResult = null, setCurrentPage = null } = useCatalog();
@@ -78,29 +76,22 @@ export const CatalogSearchView: FC<{}> = props =>
     }, [ offersToNodes, currentType, rootNode, searchValue, setCurrentPage, setSearchResult ]);
 
     return (
-        <div className="flex gap-1">
-            <Flex fullWidth alignItems="center" position="relative">
-
-
-
-
-
-
-                <NitroInput
-                    placeholder={ LocalizeText('generic.search') }
-                    value={ searchValue }
-                    onChange={ event => setSearchValue(event.target.value) } />
-
-
-            </Flex>
-            { (!searchValue || !searchValue.length) &&
-                <Button className="catalog-search-button" variant="primary">
-                    <FaSearch className="fa-icon" />
-                </Button> }
-            { searchValue && !!searchValue.length &&
-                <Button className="catalog-search-button" variant="primary" onClick={ event => setSearchValue('') }>
-                    <FaTimes className="fa-icon" />
-                </Button> }
+        <div className="relative w-full">
+            <FaSearch className="absolute left-2 top-1/2 -translate-y-1/2 text-[9px] text-muted pointer-events-none" />
+            <input
+                className="w-full pl-6 pr-6 py-[3px] text-[11px] rounded border-2 border-card-grid-item-border bg-white text-dark placeholder-muted focus:outline-none focus:border-primary transition-colors"
+                placeholder={ LocalizeText('generic.search') }
+                type="text"
+                value={ searchValue }
+                onChange={ e => setSearchValue(e.target.value) }
+            />
+            { searchValue && searchValue.length > 0 &&
+                <button
+                    className="absolute right-1.5 top-1/2 -translate-y-1/2 text-[9px] text-muted hover:text-danger cursor-pointer transition-colors"
+                    onClick={ () => setSearchValue('') }
+                >
+                    <FaTimes />
+                </button> }
         </div>
     );
 };
diff --git a/src/components/catalog/views/page/layout/CatalogLayoutCustomPrefixView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutCustomPrefixView.tsx
index 0b7f904..65f9a21 100644
--- a/src/components/catalog/views/page/layout/CatalogLayoutCustomPrefixView.tsx
+++ b/src/components/catalog/views/page/layout/CatalogLayoutCustomPrefixView.tsx
@@ -1,7 +1,6 @@
 import { PurchasePrefixComposer } from '@nitrots/nitro-renderer';
-import { createPortal } from 'react-dom';
 import { FC, useEffect, useMemo, useRef, useState } from 'react';
-import { SendMessageComposer, PRESET_PREFIX_EFFECTS, parsePrefixColors, getPrefixEffectStyle, PREFIX_EFFECT_KEYFRAMES } from '../../../../../api';
+import { LocalizeText, SendMessageComposer, PRESET_PREFIX_EFFECTS, parsePrefixColors, getPrefixEffectStyle, PREFIX_EFFECT_KEYFRAMES } from '../../../../../api';
 import { CatalogLayoutProps } from './CatalogLayout.types';
 import data from '@emoji-mart/data';
 import Picker from '@emoji-mart/react';
@@ -32,32 +31,6 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
     const [ showIconPicker, setShowIconPicker ] = useState(false);
     const [ selectedEffect, setSelectedEffect ] = useState('');
     const [ purchased, setPurchased ] = useState(false);
-    const pickerContainerRef = useRef<HTMLDivElement>(null);
-
-    // Inject style into emoji-mart Shadow DOM to remove backdrop-filter blur
-    useEffect(() =>
-    {
-        if(!showIconPicker) return;
-
-        const timer = setTimeout(() =>
-        {
-            const container = pickerContainerRef.current;
-            if(!container) return;
-
-            const emPicker = container.querySelector('em-emoji-picker');
-            if(!emPicker?.shadowRoot) return;
-
-            const existing = emPicker.shadowRoot.querySelector('#no-blur-fix');
-            if(existing) return;
-
-            const style = document.createElement('style');
-            style.id = 'no-blur-fix';
-            style.textContent = `.sticky { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background-color: rgb(var(--em-rgb-background)) !important; } .menu { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background-color: rgb(var(--em-rgb-background)) !important; }`;
-            emPicker.shadowRoot.appendChild(style);
-        }, 50);
-
-        return () => clearTimeout(timer);
-    }, [ showIconPicker ]);
 
     const colorString = useMemo(() =>
     {
@@ -104,7 +77,7 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
             setLetterColors(prev => ({ ...prev, [selectedLetterIndex]: color }));
             setCustomColorInput(color);
 
-            // Auto-advance to next letter
+            // Auto-avanza alla lettera successiva
             if(selectedLetterIndex < prefixText.length - 1)
             {
                 const nextIdx = selectedLetterIndex + 1;
@@ -194,12 +167,12 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
             { /* Text + Icon Row */ }
             <div className="flex gap-2">
                 <div className="flex flex-col gap-0.5 flex-1">
-                    <label className="text-[11px] font-bold uppercase tracking-wider opacity-60">Text</label>
+                    <label className="text-[11px] font-bold uppercase tracking-wider opacity-60">{ LocalizeText('catalog.prefix.text') }</label>
                     <div className="relative">
                         <input
                             className="w-full px-3 py-1.5 rounded-md text-sm focus:outline-none transition-all"
                             maxLength={ 15 }
-                            placeholder="Enter text..."
+                            placeholder={ LocalizeText('catalog.prefix.text.placeholder') }
                             style={ {
                                 background: 'rgba(0,0,0,0.15)',
                                 border: '1px solid rgba(0,0,0,0.15)',
@@ -214,7 +187,7 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
                     </div>
                 </div>
                 <div className="flex flex-col gap-0.5 relative">
-                    <label className="text-[11px] font-bold uppercase tracking-wider opacity-60">Icon</label>
+                    <label className="text-[11px] font-bold uppercase tracking-wider opacity-60">{ LocalizeText('catalog.prefix.icon') }</label>
                     <div className="flex gap-1">
                         <button
                             className="flex items-center justify-center gap-1 px-3 py-1.5 rounded-md text-sm transition-all min-w-[70px]"
@@ -232,7 +205,7 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
                             <button
                                 className="flex items-center justify-center px-1.5 rounded-md text-xs transition-all"
                                 style={ { background: 'rgba(239,68,68,0.15)', border: '1px solid rgba(239,68,68,0.3)' } }
-                                title="Remove icon"
+                                title={ LocalizeText('catalog.prefix.icon.remove') }
                                 onClick={ () => setSelectedIcon('') }>
                                 ✕
                             </button>
@@ -241,14 +214,14 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
                 </div>
             </div>
 
-            { /* Emoji Picker (emoji-mart) - portaled to body, no backdrop */ }
-            { showIconPicker && createPortal(
+            { /* Emoji Picker (emoji-mart) - fixed overlay */ }
+            { showIconPicker && (
                 <>
-                    <div className="fixed inset-0" style={ { zIndex: 9998 } } onClick={ () => setShowIconPicker(false) } />
-                    <div ref={ pickerContainerRef } className="fixed rounded-xl overflow-hidden" style={ { zIndex: 9999, top: '50%', left: '50%', transform: 'translate(-50%, -50%)', background: '#2b2f35' } }>
+                    <div className="fixed inset-0" style={ { zIndex: 999, background: 'rgba(0,0,0,0.5)' } } onClick={ () => setShowIconPicker(false) } />
+                    <div className="fixed rounded-xl overflow-hidden" style={ { zIndex: 1000, top: '50%', left: '50%', transform: 'translate(-50%, -50%)', boxShadow: '0 8px 32px rgba(0,0,0,0.6)' } }>
                         <Picker
                             data={ data }
-                            locale="en"
+                            locale="it"
                             onEmojiSelect={ (emoji: { native: string }) => { setSelectedIcon(emoji.native); setShowIconPicker(false); } }
                             theme="dark"
                             previewPosition="none"
@@ -261,13 +234,12 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
                             set="native"
                         />
                     </div>
-                </>,
-                document.body
+                </>
             ) }
 
             { /* Effect Selector */ }
             <div className="flex flex-col gap-1">
-                <label className="text-[11px] font-bold uppercase tracking-wider opacity-60">Effect</label>
+                <label className="text-[11px] font-bold uppercase tracking-wider opacity-60">{ LocalizeText('catalog.prefix.effect') }</label>
                 <div className="flex flex-wrap gap-1">
                     { PRESET_PREFIX_EFFECTS.map(fx => (
                         <button
@@ -287,7 +259,7 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
 
             { /* Color Mode Toggle */ }
             <div className="flex flex-col gap-1">
-                <label className="text-[11px] font-bold uppercase tracking-wider opacity-60">Color</label>
+                <label className="text-[11px] font-bold uppercase tracking-wider opacity-60">{ LocalizeText('catalog.prefix.color') }</label>
                 <div className="flex rounded-md overflow-hidden" style={ { border: '1px solid rgba(0,0,0,0.15)' } }>
                     <button
                         className="flex-1 px-2 py-1.5 text-xs font-bold transition-all"
@@ -297,7 +269,7 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
                             opacity: colorMode === 'single' ? 1 : 0.6
                         } }
                         onClick={ () => { setColorMode('single'); setSelectedLetterIndex(null); } }>
-                        🎨 Single
+                        { LocalizeText('catalog.prefix.color.single') }
                     </button>
                     <button
                         className="flex-1 px-2 py-1.5 text-xs font-bold transition-all"
@@ -306,7 +278,7 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
                             opacity: colorMode === 'perLetter' ? 1 : 0.6
                         } }
                         onClick={ () => { setColorMode('perLetter'); if(prefixText.length > 0) setSelectedLetterIndex(0); } }>
-                        🌈 Per Letter
+                        { LocalizeText('catalog.prefix.color.per.letter') }
                     </button>
                 </div>
             </div>
@@ -316,7 +288,7 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
                 <div className="flex flex-col gap-1.5">
                     <div className="flex items-center justify-between">
                         <span className="text-[10px] opacity-50">
-                            Select a letter, then choose a color. Auto-advances.
+                            { LocalizeText('catalog.prefix.color.hint') }
                         </span>
                         <button
                             className="text-[10px] px-1.5 py-0.5 rounded transition-all"
@@ -324,9 +296,9 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
                                 background: 'rgba(0,0,0,0.1)',
                                 border: '1px solid rgba(0,0,0,0.1)'
                             } }
-                            title="Apply current color to all letters"
+                            title={ LocalizeText('catalog.prefix.color.apply.all.title') }
                             onClick={ applyColorToAll }>
-                            Apply to all
+                            { LocalizeText('catalog.prefix.color.apply.all') }
                         </button>
                     </div>
                     <div className="flex flex-wrap gap-1 p-2 rounded-lg"
@@ -379,25 +351,20 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
             <div className="flex flex-col gap-1">
                 { colorMode === 'perLetter' && selectedLetterIndex !== null &&
                     <span className="text-[10px] opacity-50 italic">
-                        Selected letter: &quot;{ prefixText[selectedLetterIndex] || '' }&quot;
+                        { LocalizeText('catalog.prefix.color.selected') } &quot;{ prefixText[selectedLetterIndex] || '' }&quot;
                     </span>
                 }
-                <div className="grid grid-cols-10 gap-[3px]">
+                <div className="grid gap-1" style={ { gridTemplateColumns: 'repeat(auto-fill, minmax(34px, 1fr))' } }>
                     { PRESET_COLORS.map((color, idx) =>
                     {
                         const isActive = currentActiveColor === color;
                         return (
                             <div
                                 key={ idx }
-                                className="cursor-pointer transition-all"
+                                className={ `aspect-square rounded cursor-pointer transition-all duration-100 border-2 ${ isActive ? 'scale-110 border-white shadow-lg' : 'border-transparent hover:scale-105' }` }
                                 style={ {
-                                    width: '100%',
-                                    aspectRatio: '1',
-                                    borderRadius: '5px',
                                     backgroundColor: color,
-                                    border: isActive ? '2px solid #fff' : '1px solid rgba(0,0,0,0.15)',
-                                    boxShadow: isActive ? `0 0 6px ${ color }, 0 0 0 1px rgba(0,0,0,0.2)` : 'inset 0 1px 0 rgba(255,255,255,0.2)',
-                                    transform: isActive ? 'scale(1.2)' : 'scale(1)',
+                                    boxShadow: isActive ? `0 0 8px ${ color }, 0 0 0 1px rgba(0,0,0,0.3)` : 'inset 0 1px 0 rgba(255,255,255,0.25), 0 1px 2px rgba(0,0,0,0.15)',
                                     zIndex: isActive ? 5 : 1
                                 } }
                                 onClick={ () => handleColorSelect(color) } />
@@ -443,8 +410,8 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
             <div className="flex items-center justify-between mt-auto pt-2"
                 style={ { borderTop: '1px solid rgba(0,0,0,0.1)' } }>
                 <div className="flex items-center gap-1">
-                    <span className="text-xs opacity-60">Price:</span>
-                    <span className="text-sm font-bold">5 Credits</span>
+                    <span className="text-xs opacity-60">{ LocalizeText('catalog.prefix.price') }</span>
+                    <span className="text-sm font-bold">{ LocalizeText('catalog.prefix.price.amount') }</span>
                 </div>
                 <button
                     className="px-5 py-1.5 rounded-md text-sm font-bold transition-all"
@@ -462,7 +429,7 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
                         borderRadius: '6px'
                     } }
                     onClick={ handlePurchase }>
-                    { purchased ? '✓ Purchased!' : 'Purchase' }
+                    { purchased ? LocalizeText('catalog.prefix.purchased') : LocalizeText('catalog.prefix.purchase') }
                 </button>
             </div>
         </div>
diff --git a/src/components/catalog/views/page/layout/CatalogLayoutDefaultView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutDefaultView.tsx
index 50b2955..107b820 100644
--- a/src/components/catalog/views/page/layout/CatalogLayoutDefaultView.tsx
+++ b/src/components/catalog/views/page/layout/CatalogLayoutDefaultView.tsx
@@ -1,7 +1,9 @@
 import { FC } from 'react';
-import { GetConfigurationValue, ProductTypeEnum } from '../../../../../api';
-import { Column, Flex, Grid, LayoutImage, Text } from '../../../../../common';
+import { FaEdit, FaPlus } from 'react-icons/fa';
+import { GetConfigurationValue, LocalizeText, ProductTypeEnum } from '../../../../../api';
+import { Text } from '../../../../../common';
 import { useCatalog } from '../../../../../hooks';
+import { useCatalogAdmin } from '../../../CatalogAdminContext';
 import { CatalogHeaderView } from '../../catalog-header/CatalogHeaderView';
 import { CatalogAddOnBadgeWidgetView } from '../widgets/CatalogAddOnBadgeWidgetView';
 import { CatalogItemGridWidgetView } from '../widgets/CatalogItemGridWidgetView';
@@ -16,46 +18,87 @@ export const CatalogLayoutDefaultView: FC<CatalogLayoutProps> = props =>
 {
     const { page = null } = props;
     const { currentOffer = null, currentPage = null } = useCatalog();
+    const catalogAdmin = useCatalogAdmin();
+    const adminMode = catalogAdmin?.adminMode ?? false;
 
     return (
-        <>
-            <Grid>
-                <Column overflow="hidden" size={ 7 }>
-                    { GetConfigurationValue('catalog.headers') &&
-                        <CatalogHeaderView imageUrl={ currentPage.localization.getImage(0) } /> }
-                    <CatalogItemGridWidgetView />
-                </Column>
-                <Column center={ !currentOffer } overflow="hidden" size={ 5 }>
-                    { !currentOffer &&
-                        <>
-                            { !!page.localization.getImage(1) &&
-                                <LayoutImage imageUrl={ page.localization.getImage(1) } /> }
-                            <Text center dangerouslySetInnerHTML={ { __html: page.localization.getText(0) } } />
-                        </> }
-                    { currentOffer &&
-                        <>
-                            <Flex center overflow="hidden" style={ { height: 140 } }>
-                                { (currentOffer.product.productType !== ProductTypeEnum.BADGE) &&
-                                    <>
-                                        <CatalogViewProductWidgetView />
-                                        <CatalogAddOnBadgeWidgetView className="bg-muted rounded bottom-1 inset-e-1" />
-                                    </> }
-                                { (currentOffer.product.productType === ProductTypeEnum.BADGE) && <CatalogAddOnBadgeWidgetView className="scale-2" /> }
-                            </Flex>
-                            <Column grow gap={ 1 }>
-                                <CatalogLimitedItemWidgetView />
-                                <Text grow truncate>{ currentOffer.localizationName }</Text>
-                                <div className="flex justify-between">
-                                    <div className="flex flex-col gap-1">
-                                        <CatalogSpinnerWidgetView />
-                                    </div>
-                                    <CatalogTotalPriceWidget alignItems="end" justifyContent="end" />
-                                </div>
-                                <CatalogPurchaseWidgetView />
-                            </Column>
-                        </> }
-                </Column>
-            </Grid>
-        </>
+        <div className="flex flex-col h-full gap-2">
+            { /* Admin: quick actions */ }
+            { adminMode && !catalogAdmin.editingPageData &&
+                <div className="flex gap-2">
+                    <button
+                        className="flex items-center gap-1 text-[10px] text-primary hover:text-dark transition-colors cursor-pointer"
+                        onClick={ () => { catalogAdmin.setEditingPageNode(null); catalogAdmin.setEditingRootPage(false); catalogAdmin.setEditingPageData(true); } }
+                    >
+                        <FaEdit className="text-[10px]" /> { LocalizeText('catalog.admin.edit.page') }
+                    </button>
+                    <button
+                        className="flex items-center gap-1 text-[10px] text-success hover:text-green-800 transition-colors cursor-pointer"
+                        onClick={ () => catalogAdmin.setEditingOffer({ offerId: -1, product: { productClassId: 0, productType: 'i', productCount: 1, extraParam: '' } } as any) }
+                    >
+                        <FaPlus className="text-[10px]" /> { LocalizeText('catalog.admin.offer.new') }
+                    </button>
+                </div> }
+
+            { /* Product detail card */ }
+            { currentOffer &&
+                <div className="flex gap-0 bg-white rounded border-2 border-card-grid-item-border overflow-hidden">
+                    { /* Preview area */ }
+                    <div className="w-[140px] min-w-[140px] bg-card-grid-item relative flex items-center justify-center border-r-2 border-card-grid-item-border">
+                        { (currentOffer.product.productType !== ProductTypeEnum.BADGE) &&
+                            <>
+                                <CatalogViewProductWidgetView />
+                                <CatalogAddOnBadgeWidgetView className="bg-muted rounded bottom-1 right-1 absolute" />
+                            </> }
+                        { (currentOffer.product.productType === ProductTypeEnum.BADGE) &&
+                            <CatalogAddOnBadgeWidgetView className="scale-2" /> }
+                    </div>
+                    { /* Product info + purchase */ }
+                    <div className="flex flex-col flex-1 min-w-0 p-2.5 gap-2">
+                        { /* Title row */ }
+                        <div>
+                            <div className="flex items-start justify-between gap-2">
+                                <Text className="text-[13px]! font-bold text-dark leading-tight">{ currentOffer.localizationName }</Text>
+                                { adminMode &&
+                                    <FaEdit
+                                        className="text-primary text-[11px] cursor-pointer hover:text-dark transition-colors shrink-0 mt-0.5"
+                                        title={ LocalizeText('catalog.admin.offer.edit') }
+                                        onClick={ () => catalogAdmin.setEditingOffer(currentOffer) }
+                                    /> }
+                            </div>
+                            { adminMode &&
+                                <div className="flex items-center gap-1 mt-1 flex-wrap">
+                                    <span className="text-[8px] font-mono text-white bg-gray-600 px-1 py-px rounded">ID: { currentOffer.product.productClassId }</span>
+                                    <span className="text-[8px] font-mono text-white bg-primary px-1 py-px rounded">Offer: { currentOffer.offerId }</span>
+                                    <span className="text-[8px] font-mono text-white bg-secondary px-1 py-px rounded">{ currentOffer.product.productType.toUpperCase() }</span>
+                                </div> }
+                            <CatalogLimitedItemWidgetView />
+                        </div>
+                        { /* Price */ }
+                        <CatalogTotalPriceWidget />
+                        { /* Spinner */ }
+                        <CatalogSpinnerWidgetView />
+                        { /* Actions */ }
+                        <div className="flex gap-1.5 mt-auto">
+                            <CatalogPurchaseWidgetView />
+                        </div>
+                    </div>
+                </div> }
+
+            { /* Welcome/description card */ }
+            { !currentOffer &&
+                <div className="flex items-center gap-3 p-2.5 bg-white rounded border-2 border-card-grid-item-border">
+                    { !!page.localization.getImage(1) &&
+                        <img className="w-[70px] h-[70px] object-contain rounded shrink-0" src={ page.localization.getImage(1) } /> }
+                    <Text className="text-[11px]! text-muted" dangerouslySetInnerHTML={ { __html: page.localization.getText(0) } } />
+                </div> }
+
+            { /* Item grid */ }
+            <div className="flex-1 overflow-auto min-h-0">
+                { GetConfigurationValue('catalog.headers') &&
+                    <CatalogHeaderView imageUrl={ currentPage.localization.getImage(0) } /> }
+                <CatalogItemGridWidgetView columnCount={ 7 } columnMinHeight={ 50 } columnMinWidth={ 50 } />
+            </div>
+        </div>
     );
 };
diff --git a/src/components/catalog/views/page/layout/CatalogLayoutPets3View.tsx b/src/components/catalog/views/page/layout/CatalogLayoutPets3View.tsx
index 8c2e085..caba81a 100644
--- a/src/components/catalog/views/page/layout/CatalogLayoutPets3View.tsx
+++ b/src/components/catalog/views/page/layout/CatalogLayoutPets3View.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { Column } from '../../../../../common';
+import { FaPaw } from 'react-icons/fa';
 import { CatalogLayoutProps } from './CatalogLayout.types';
 
 export const CatalogLayoutPets3View: FC<CatalogLayoutProps> = props =>
@@ -9,17 +9,28 @@ export const CatalogLayoutPets3View: FC<CatalogLayoutProps> = props =>
     const imageUrl = page.localization.getImage(1);
 
     return (
-        <Column grow className="bg-muted rounded text-black p-2" overflow="hidden">
-            <div className="items-center gap-2">
-                { imageUrl && <img alt="" src={ imageUrl } /> }
-                <div className="fs-5" dangerouslySetInnerHTML={ { __html: page.localization.getText(1) } } />
+        <div className="flex flex-col h-full gap-2">
+            { /* Header card */ }
+            <div className="flex items-center gap-3 p-2.5 bg-white rounded border-2 border-card-grid-item-border">
+                { imageUrl && <img alt="" className="w-[60px] h-[60px] object-contain shrink-0" src={ imageUrl } /> }
+                <div>
+                    <div className="flex items-center gap-1.5 mb-0.5">
+                        <FaPaw className="text-primary text-xs" />
+                        <span className="text-sm font-bold" dangerouslySetInnerHTML={ { __html: page.localization.getText(1) } } />
+                    </div>
+                </div>
             </div>
-            <Column grow alignItems="center" overflow="auto">
-                <div dangerouslySetInnerHTML={ { __html: page.localization.getText(2) } } />
-            </Column>
-            <div className="flex items-center">
-                <div className="font-bold	" dangerouslySetInnerHTML={ { __html: page.localization.getText(3) } } />
+
+            { /* Content */ }
+            <div className="flex-1 overflow-auto bg-white rounded border-2 border-card-grid-item-border p-3">
+                <div className="text-[11px] leading-relaxed" dangerouslySetInnerHTML={ { __html: page.localization.getText(2) } } />
             </div>
-        </Column>
+
+            { /* Footer */ }
+            { !!page.localization.getText(3) &&
+                <div className="p-2 bg-card-grid-item rounded border border-card-grid-item-border">
+                    <span className="text-[11px] font-bold" dangerouslySetInnerHTML={ { __html: page.localization.getText(3) } } />
+                </div> }
+        </div>
     );
 };
diff --git a/src/components/catalog/views/page/layout/CatalogLayoutTrophiesView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutTrophiesView.tsx
index bcea3d6..d192b81 100644
--- a/src/components/catalog/views/page/layout/CatalogLayoutTrophiesView.tsx
+++ b/src/components/catalog/views/page/layout/CatalogLayoutTrophiesView.tsx
@@ -1,6 +1,10 @@
 import { FC, useEffect, useState } from 'react';
-import { Column, Grid, Text } from '../../../../../common';
+import { FaEdit, FaPen, FaPlus, FaTrophy } from 'react-icons/fa';
+import { LocalizeText, ProductTypeEnum } from '../../../../../api';
+import { Text } from '../../../../../common';
 import { useCatalog } from '../../../../../hooks';
+import { useCatalogAdmin } from '../../../CatalogAdminContext';
+import { CatalogAddOnBadgeWidgetView } from '../widgets/CatalogAddOnBadgeWidgetView';
 import { CatalogItemGridWidgetView } from '../widgets/CatalogItemGridWidgetView';
 import { CatalogPurchaseWidgetView } from '../widgets/CatalogPurchaseWidgetView';
 import { CatalogTotalPriceWidget } from '../widgets/CatalogTotalPriceWidget';
@@ -12,6 +16,8 @@ export const CatalogLayoutTrophiesView: FC<CatalogLayoutProps> = props =>
     const { page = null } = props;
     const [ trophyText, setTrophyText ] = useState<string>('');
     const { currentOffer = null, setPurchaseOptions = null } = useCatalog();
+    const catalogAdmin = useCatalogAdmin();
+    const adminMode = catalogAdmin?.adminMode ?? false;
 
     useEffect(() =>
     {
@@ -27,30 +33,104 @@ export const CatalogLayoutTrophiesView: FC<CatalogLayoutProps> = props =>
         });
     }, [ currentOffer, trophyText, setPurchaseOptions ]);
 
+    const canPurchase = currentOffer && trophyText.trim().length > 0;
+
     return (
-        <Grid>
-            <Column overflow="hidden" size={ 7 }>
-                <CatalogItemGridWidgetView />
-                <textarea className="grow! form-control w-full" defaultValue={ trophyText || '' } onChange={ event => setTrophyText(event.target.value) } />
-            </Column>
-            <Column center={ !currentOffer } overflow="hidden" size={ 5 }>
-                { !currentOffer &&
-                    <>
-                        { !!page.localization.getImage(1) && <img alt="" src={ page.localization.getImage(1) } /> }
-                        <Text center dangerouslySetInnerHTML={ { __html: page.localization.getText(0) } } />
-                    </> }
-                { currentOffer &&
-                    <>
-                        <CatalogViewProductWidgetView />
-                        <Column grow gap={ 1 }>
-                            <Text grow truncate>{ currentOffer.localizationName }</Text>
-                            <div className="flex justify-end">
-                                <CatalogTotalPriceWidget alignItems="end" />
-                            </div>
+        <div className="flex flex-col h-full gap-2">
+            { /* Admin: quick actions */ }
+            { adminMode && !catalogAdmin.editingPageData &&
+                <div className="flex gap-2">
+                    <button
+                        className="flex items-center gap-1 text-[10px] text-primary hover:text-dark transition-colors cursor-pointer"
+                        onClick={ () => { catalogAdmin.setEditingPageNode(null); catalogAdmin.setEditingRootPage(false); catalogAdmin.setEditingPageData(true); } }
+                    >
+                        <FaEdit className="text-[10px]" /> { LocalizeText('catalog.admin.edit.page') }
+                    </button>
+                    <button
+                        className="flex items-center gap-1 text-[10px] text-success hover:text-green-800 transition-colors cursor-pointer"
+                        onClick={ () => catalogAdmin.setEditingOffer({ offerId: -1, product: { productClassId: 0, productType: 'i', productCount: 1, extraParam: '' } } as any) }
+                    >
+                        <FaPlus className="text-[10px]" /> { LocalizeText('catalog.admin.offer.new') }
+                    </button>
+                </div> }
+
+            { /* Selected trophy card */ }
+            { currentOffer
+                ? <div className="flex gap-0 bg-white rounded border-2 border-warning/40 overflow-hidden" style={ { boxShadow: '0 0 8px rgba(255,193,7,0.15)' } }>
+                    { /* Preview */ }
+                    <div className="w-[120px] min-w-[120px] relative flex items-center justify-center border-r-2 border-warning/30" style={ { background: 'linear-gradient(180deg, #fff9e6 0%, #fff3cc 100%)' } }>
+                        { (currentOffer.product.productType !== ProductTypeEnum.BADGE)
+                            ? <>
+                                <CatalogViewProductWidgetView />
+                                <CatalogAddOnBadgeWidgetView className="bg-muted rounded bottom-1 right-1 absolute" />
+                            </>
+                            : <CatalogAddOnBadgeWidgetView className="scale-2" /> }
+                    </div>
+                    { /* Info */ }
+                    <div className="flex flex-col flex-1 min-w-0 p-2 gap-1.5">
+                        <div className="flex items-center gap-1.5">
+                            <FaTrophy className="text-warning text-[11px]" />
+                            <Text className="text-[12px]! font-bold text-dark leading-tight">{ currentOffer.localizationName }</Text>
+                            { adminMode &&
+                                <FaEdit
+                                    className="text-primary text-[11px] cursor-pointer hover:text-dark transition-colors shrink-0"
+                                    title={ LocalizeText('catalog.admin.offer.edit') }
+                                    onClick={ () => catalogAdmin.setEditingOffer(currentOffer) }
+                                /> }
+                        </div>
+                        { adminMode &&
+                            <div className="flex items-center gap-1 flex-wrap">
+                                <span className="text-[8px] font-mono text-white bg-gray-600 px-1 py-px rounded">ID: { currentOffer.product.productClassId }</span>
+                                <span className="text-[8px] font-mono text-white bg-primary px-1 py-px rounded">Offer: { currentOffer.offerId }</span>
+                            </div> }
+                        <CatalogTotalPriceWidget />
+                        { !canPurchase &&
+                            <span className="text-[9px] text-warning italic">{ LocalizeText('catalog.trophies.write.hint') }</span> }
+                        <div className="flex gap-1.5 mt-auto">
                             <CatalogPurchaseWidgetView />
-                        </Column>
-                    </> }
-            </Column>
-        </Grid>
+                        </div>
+                    </div>
+                </div>
+                : <div className="flex items-start gap-3 p-2.5 bg-white rounded border-2 border-card-grid-item-border">
+                    { !!page.localization.getImage(1) &&
+                        <img className="w-[50px] h-[50px] object-contain rounded shrink-0 mt-0.5" src={ page.localization.getImage(1) } /> }
+                    <div className="min-w-0">
+                        <div className="flex items-center gap-1.5 mb-1">
+                            <FaTrophy className="text-warning text-[11px]" />
+                            <span className="text-[12px] font-bold">{ LocalizeText('catalog.trophies.title') }</span>
+                        </div>
+                        <Text className="text-[10px]! text-muted leading-relaxed" dangerouslySetInnerHTML={ { __html: page.localization.getText(0) } } />
+                    </div>
+                </div> }
+
+            { /* Trophy inscription */ }
+            <div className="flex flex-col gap-1">
+                <div className="flex items-center gap-1.5">
+                    <FaPen className="text-[8px] text-warning" />
+                    <span className="text-[9px] font-bold text-muted uppercase tracking-wider">{ LocalizeText('catalog.trophies.inscription') }</span>
+                    <span className={ `text-[9px] ml-auto ${ trophyText.length > 180 ? 'text-danger font-bold' : 'text-muted' }` }>{ trophyText.length }/200</span>
+                </div>
+                <div className="relative">
+                    <textarea
+                        className="w-full h-[60px] text-[11px] rounded p-2 pr-3 resize-none focus:outline-none transition-all border-2"
+                        maxLength={ 200 }
+                        placeholder={ LocalizeText('catalog.trophies.inscription.placeholder') }
+                        style={ {
+                            background: trophyText.length > 0 ? 'linear-gradient(180deg, #fffdf5 0%, #fff8e8 100%)' : '#fff',
+                            borderColor: trophyText.length > 0 ? 'rgba(255,193,7,0.4)' : undefined
+                        } }
+                        value={ trophyText }
+                        onChange={ event => setTrophyText(event.target.value) }
+                    />
+                    { trophyText.length > 0 &&
+                        <FaTrophy className="absolute top-2 right-2 text-[10px] text-warning/30" /> }
+                </div>
+            </div>
+
+            { /* Trophy grid */ }
+            <div className="flex-1 overflow-auto min-h-0">
+                <CatalogItemGridWidgetView columnCount={ 7 } columnMinHeight={ 50 } columnMinWidth={ 50 } />
+            </div>
+        </div>
     );
 };
diff --git a/src/components/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx b/src/components/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx
index 4ae852e..850d085 100644
--- a/src/components/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx
+++ b/src/components/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx
@@ -1,12 +1,12 @@
 import { ApproveNameMessageComposer, ApproveNameMessageEvent, ColorConverter, GetSellablePetPalettesComposer, PurchaseFromCatalogComposer, SellablePetPaletteData } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
-import { FaFillDrip } from 'react-icons/fa';
+import { FaCheck, FaEdit, FaFillDrip, FaPaw, FaPlus, FaTimes } from 'react-icons/fa';
 import { DispatchUiEvent, GetPetAvailableColors, GetPetIndexFromLocalization, LocalizeText, SendMessageComposer } from '../../../../../../api';
-import { AutoGrid, Button, Column, Grid, LayoutGridItem, LayoutPetImageView, Text } from '../../../../../../common';
+import { LayoutGridItem, LayoutPetImageView } from '../../../../../../common';
 import { CatalogPurchaseFailureEvent } from '../../../../../../events';
 import { useCatalog, useMessageEvent } from '../../../../../../hooks';
+import { useCatalogAdmin } from '../../../../CatalogAdminContext';
 import { CatalogAddOnBadgeWidgetView } from '../../widgets/CatalogAddOnBadgeWidgetView';
-import { CatalogPurchaseWidgetView } from '../../widgets/CatalogPurchaseWidgetView';
 import { CatalogTotalPriceWidget } from '../../widgets/CatalogTotalPriceWidget';
 import { CatalogViewProductWidgetView } from '../../widgets/CatalogViewProductWidgetView';
 import { CatalogLayoutProps } from '../CatalogLayout.types';
@@ -24,6 +24,8 @@ export const CatalogLayoutPetView: FC<CatalogLayoutProps> = props =>
     const [ approvalPending, setApprovalPending ] = useState(true);
     const [ approvalResult, setApprovalResult ] = useState(-1);
     const { currentOffer = null, setCurrentOffer = null, setPurchaseOptions = null, catalogOptions = null, roomPreviewer = null } = useCatalog();
+    const catalogAdmin = useCatalogAdmin();
+    const adminMode = catalogAdmin?.adminMode ?? false;
     const { petPalettes = null } = catalogOptions;
 
     const getColor = useMemo(() =>
@@ -194,50 +196,131 @@ export const CatalogLayoutPetView: FC<CatalogLayoutProps> = props =>
     if(!currentOffer) return null;
 
     return (
-        <Grid>
-            <Column overflow="hidden" size={ 7 }>
-                <AutoGrid columnCount={ 5 }>
-                    { !colorsShowing && (sellablePalettes.length > 0) && sellablePalettes.map((palette, index) =>
-                    {
-                        return (
-                            <LayoutGridItem key={ index } itemActive={ (selectedPaletteIndex === index) } onClick={ event => setSelectedPaletteIndex(index) }>
-                                <LayoutPetImageView direction={ 2 } headOnly={ true } paletteId={ palette.paletteId } typeId={ petIndex } />
-                            </LayoutGridItem>
-                        );
-                    }) }
-                    { colorsShowing && (sellableColors.length > 0) && sellableColors.map((colorSet, index) => <LayoutGridItem key={ index } itemHighlight className="clear-bg" itemActive={ (selectedColorIndex === index) } itemColor={ ColorConverter.int2rgb(colorSet[0]) } onClick={ event => setSelectedColorIndex(index) } />) }
-                </AutoGrid>
-            </Column>
-            <Column center={ !currentOffer } overflow="hidden" size={ 5 }>
-                { !currentOffer &&
-                    <>
-                        { !!page.localization.getImage(1) && <img alt="" src={ page.localization.getImage(1) } /> }
-                        <Text center dangerouslySetInnerHTML={ { __html: page.localization.getText(0) } } />
-                    </> }
-                { currentOffer &&
-                    <>
-                        <div className="relative overflow-hidden">
-                            <CatalogViewProductWidgetView />
-                            <CatalogAddOnBadgeWidgetView className="bg-muted rounded bottom-1 inset-e-1" position="absolute" />
-                            { ((petIndex > -1) && (petIndex <= 7)) &&
-                                <Button className="bottom-1 inset-s-1" position="absolute" onClick={ event => setColorsShowing(!colorsShowing) }>
-                                    <FaFillDrip className="fa-icon" />
-                                </Button> }
+        <div className="flex flex-col h-full gap-2">
+            { /* Admin: quick actions */ }
+            { adminMode && !catalogAdmin.editingPageData &&
+                <div className="flex gap-2">
+                    <button
+                        className="flex items-center gap-1 text-[10px] text-primary hover:text-dark transition-colors cursor-pointer"
+                        onClick={ () => { catalogAdmin.setEditingPageNode(null); catalogAdmin.setEditingRootPage(false); catalogAdmin.setEditingPageData(true); } }
+                    >
+                        <FaEdit className="text-[10px]" /> { LocalizeText('catalog.admin.edit.page') }
+                    </button>
+                    <button
+                        className="flex items-center gap-1 text-[10px] text-success hover:text-green-800 transition-colors cursor-pointer"
+                        onClick={ () => catalogAdmin.setEditingOffer({ offerId: -1, product: { productClassId: 0, productType: 'i', productCount: 1, extraParam: '' } } as any) }
+                    >
+                        <FaPlus className="text-[10px]" /> { LocalizeText('catalog.admin.offer.new') }
+                    </button>
+                </div> }
+
+            { /* Top card: preview + name + purchase */ }
+            <div className="flex gap-3 p-2.5 bg-white rounded border-2 border-card-grid-item-border">
+                { /* Pet preview */ }
+                <div className="w-[160px] min-w-[160px] h-[140px] rounded overflow-hidden bg-card-grid-item relative flex items-center justify-center border border-card-grid-item-border">
+                    <CatalogViewProductWidgetView />
+                    <CatalogAddOnBadgeWidgetView className="bg-muted rounded absolute bottom-1 right-1" />
+                    { ((petIndex > -1) && (petIndex <= 7)) &&
+                        <button
+                            className={ `absolute bottom-1 left-1 w-[28px] h-[28px] rounded flex items-center justify-center cursor-pointer transition-all border ${ colorsShowing ? 'bg-primary text-white border-primary' : 'bg-white text-dark border-card-grid-item-border hover:bg-card-grid-item-active' }` }
+                            title={ LocalizeText('catalog.pets.show.colors') }
+                            onClick={ () => setColorsShowing(!colorsShowing) }
+                        >
+                            <FaFillDrip className="text-[10px]" />
+                        </button> }
+                </div>
+
+                { /* Pet info */ }
+                <div className="flex flex-col flex-1 justify-between min-w-0">
+                    <div>
+                        <div className="flex items-center gap-1.5">
+                            <FaPaw className="text-primary text-xs" />
+                            <span className="text-sm font-bold">{ petBreedName || LocalizeText('catalog.pet.breed') }</span>
+                            { adminMode && currentOffer &&
+                                <FaEdit
+                                    className="text-primary text-[11px] cursor-pointer hover:text-dark transition-colors shrink-0"
+                                    title={ LocalizeText('catalog.admin.offer.edit') }
+                                    onClick={ () => catalogAdmin.setEditingOffer(currentOffer) }
+                                /> }
                         </div>
-                        <Column grow gap={ 1 }>
-                            <Text truncate>{ petBreedName }</Text>
-                            <Column grow gap={ 1 }>
-                                <input className="min-h-[calc(1.5em+ .5rem+2px)] px-[.5rem] py-[.25rem]  rounded-[.2rem] form-control-sm w-full" placeholder={ LocalizeText('widgets.petpackage.name.title') } type="text" value={ petName } onChange={ event => setPetName(event.target.value) } />
-                                { (approvalResult > 0) &&
-                                    <div className="invalid-feedback d-block m-0">{ validationErrorMessage }</div> }
-                            </Column>
-                            <div className="flex justify-end">
-                                <CatalogTotalPriceWidget alignItems="end" justifyContent="end" />
-                            </div>
-                            <CatalogPurchaseWidgetView purchaseCallback={ purchasePet } />
-                        </Column>
-                    </> }
-            </Column>
-        </Grid>
+                        { adminMode && currentOffer &&
+                            <div className="flex items-center gap-1 mt-0.5 flex-wrap">
+                                <span className="text-[8px] font-mono text-white bg-gray-600 px-1 py-px rounded">ID: { currentOffer.product.productClassId }</span>
+                                <span className="text-[8px] font-mono text-white bg-primary px-1 py-px rounded">Offer: { currentOffer.offerId }</span>
+                            </div> }
+                        { !!page.localization.getText(0) &&
+                            <p className="text-[10px] text-muted mt-0.5" dangerouslySetInnerHTML={ { __html: page.localization.getText(0) } } /> }
+                    </div>
+
+                    { /* Name input */ }
+                    <div className="flex flex-col gap-1 mt-2">
+                        <label className="text-[9px] text-muted uppercase font-bold">{ LocalizeText('widgets.petpackage.name.title') }</label>
+                        <div className="relative">
+                            <input
+                                className={ `w-full text-[11px] border-2 rounded px-2 py-1.5 focus:outline-none transition-colors ${ approvalResult > 0 ? 'border-danger bg-danger/5' : approvalResult === 0 ? 'border-success bg-success/5' : 'border-card-grid-item-border focus:border-primary bg-white' }` }
+                                placeholder={ LocalizeText('widgets.petpackage.name.title') }
+                                type="text"
+                                value={ petName }
+                                onChange={ event => setPetName(event.target.value) }
+                            />
+                            { approvalResult === 0 &&
+                                <FaCheck className="absolute right-2 top-1/2 -translate-y-1/2 text-success text-[10px]" /> }
+                            { approvalResult > 0 &&
+                                <FaTimes className="absolute right-2 top-1/2 -translate-y-1/2 text-danger text-[10px]" /> }
+                        </div>
+                        { (approvalResult > 0) &&
+                            <span className="text-[10px] text-danger font-medium">{ validationErrorMessage }</span> }
+                    </div>
+
+                    { /* Price + buy */ }
+                    <div className="flex items-center justify-between mt-2">
+                        <CatalogTotalPriceWidget />
+                        <button
+                            className="px-3 py-1 rounded text-[11px] font-bold bg-primary text-white hover:bg-secondary transition-colors cursor-pointer disabled:opacity-50"
+                            disabled={ !petName.length || (approvalResult > 0) }
+                            onClick={ purchasePet }
+                        >
+                            { approvalResult === -1 ? LocalizeText('catalog.purchase_confirmation.buy') : LocalizeText('catalog.marketplace.confirm_title') }
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            { /* Breed/Color grid */ }
+            <div className="flex-1 overflow-auto min-h-0">
+                <div className="flex items-center gap-1.5 mb-1.5">
+                    <span className="text-[10px] font-bold text-muted uppercase tracking-wide">
+                        { colorsShowing ? LocalizeText('catalog.pets.choose.color') : LocalizeText('catalog.pets.choose.breed') }
+                    </span>
+                    { colorsShowing &&
+                        <button
+                            className="text-[9px] text-primary hover:text-dark cursor-pointer transition-colors"
+                            onClick={ () => setColorsShowing(false) }
+                        >
+                            { LocalizeText('catalog.pets.back.breeds') }
+                        </button> }
+                </div>
+                <div className="grid grid-cols-6 gap-1">
+                    { !colorsShowing && (sellablePalettes.length > 0) && sellablePalettes.map((palette, index) => (
+                        <LayoutGridItem
+                            key={ index }
+                            className="group/pet"
+                            itemActive={ (selectedPaletteIndex === index) }
+                            onClick={ () => setSelectedPaletteIndex(index) }
+                        >
+                            <LayoutPetImageView direction={ 2 } headOnly={ true } paletteId={ palette.paletteId } typeId={ petIndex } />
+                        </LayoutGridItem>
+                    )) }
+                    { colorsShowing && (sellableColors.length > 0) && sellableColors.map((colorSet, index) => (
+                        <div
+                            key={ index }
+                            className={ `w-full aspect-square rounded border-2 cursor-pointer transition-all ${ selectedColorIndex === index ? 'border-primary scale-110 shadow-md' : 'border-card-grid-item-border hover:border-primary/50' }` }
+                            style={ { backgroundColor: `#${ ColorConverter.int2rgb(colorSet[0]) }` } }
+                            onClick={ () => setSelectedColorIndex(index) }
+                        />
+                    )) }
+                </div>
+            </div>
+        </div>
     );
 };
diff --git a/src/components/catalog/views/page/widgets/CatalogItemGridWidgetView.tsx b/src/components/catalog/views/page/widgets/CatalogItemGridWidgetView.tsx
index 247af60..6554a64 100644
--- a/src/components/catalog/views/page/widgets/CatalogItemGridWidgetView.tsx
+++ b/src/components/catalog/views/page/widgets/CatalogItemGridWidgetView.tsx
@@ -1,7 +1,8 @@
-import { FC, useEffect, useRef } from 'react';
+import { FC, useCallback, useEffect, useRef, useState } from 'react';
 import { IPurchasableOffer, ProductTypeEnum } from '../../../../../api';
 import { AutoGrid, AutoGridProps } from '../../../../../common';
 import { useCatalog } from '../../../../../hooks';
+import { useCatalogAdmin } from '../../../CatalogAdminContext';
 import { CatalogGridOfferView } from '../common/CatalogGridOfferView';
 
 interface CatalogItemGridWidgetViewProps extends AutoGridProps
@@ -13,7 +14,11 @@ export const CatalogItemGridWidgetView: FC<CatalogItemGridWidgetViewProps> = pro
 {
     const { columnCount = 5, children = null, ...rest } = props;
     const { currentOffer = null, setCurrentOffer = null, currentPage = null, setPurchaseOptions = null } = useCatalog();
+    const catalogAdmin = useCatalogAdmin();
+    const adminMode = catalogAdmin?.adminMode ?? false;
     const elementRef = useRef<HTMLDivElement>();
+    const [ dragIndex, setDragIndex ] = useState<number | null>(null);
+    const [ dropIndex, setDropIndex ] = useState<number | null>(null);
 
     useEffect(() =>
     {
@@ -43,9 +48,66 @@ export const CatalogItemGridWidgetView: FC<CatalogItemGridWidgetViewProps> = pro
         }
     };
 
+    const handleDragStart = useCallback((index: number) =>
+    {
+        setDragIndex(index);
+    }, []);
+
+    const handleDragOver = useCallback((e: React.DragEvent, index: number) =>
+    {
+        e.preventDefault();
+        setDropIndex(index);
+    }, []);
+
+    const handleDrop = useCallback((index: number) =>
+    {
+        if(dragIndex !== null && dragIndex !== index && currentPage?.offers)
+        {
+            const offers = [ ...currentPage.offers ];
+            const [ moved ] = offers.splice(dragIndex, 1);
+
+            offers.splice(index, 0, moved);
+
+            const orders = offers.map((o, i) => ({ id: o.offerId, orderNumber: i }));
+
+            catalogAdmin?.reorderOffers(orders);
+        }
+
+        setDragIndex(null);
+        setDropIndex(null);
+    }, [ dragIndex, currentPage, catalogAdmin ]);
+
+    const handleDragEnd = useCallback(() =>
+    {
+        setDragIndex(null);
+        setDropIndex(null);
+    }, []);
+
     return (
         <AutoGrid columnCount={ columnCount } innerRef={ elementRef } { ...rest }>
-            { currentPage.offers && (currentPage.offers.length > 0) && currentPage.offers.map((offer, index) => <CatalogGridOfferView key={ index } itemActive={ (currentOffer && (currentOffer.offerId === offer.offerId)) } offer={ offer } selectOffer={ selectOffer } />) }
+            { currentPage.offers && (currentPage.offers.length > 0) && currentPage.offers.map((offer, index) =>
+            {
+                const isDragging = dragIndex === index;
+                const isDropTarget = dropIndex === index && dragIndex !== index;
+
+                return (
+                    <div
+                        key={ index }
+                        className={ `${ isDragging ? 'opacity-40' : '' } ${ isDropTarget ? 'ring-2 ring-primary ring-offset-1 rounded' : '' }` }
+                        draggable={ adminMode }
+                        onDragEnd={ adminMode ? handleDragEnd : undefined }
+                        onDragOver={ adminMode ? (e) => handleDragOver(e, index) : undefined }
+                        onDragStart={ adminMode ? () => handleDragStart(index) : undefined }
+                        onDrop={ adminMode ? () => handleDrop(index) : undefined }
+                    >
+                        <CatalogGridOfferView
+                            itemActive={ (currentOffer && (currentOffer.offerId === offer.offerId)) }
+                            offer={ offer }
+                            selectOffer={ selectOffer }
+                        />
+                    </div>
+                );
+            }) }
             { children }
         </AutoGrid>
     );
diff --git a/src/components/catalog/views/page/widgets/CatalogPriceDisplayWidgetView.tsx b/src/components/catalog/views/page/widgets/CatalogPriceDisplayWidgetView.tsx
index bb3f314..718eb2e 100644
--- a/src/components/catalog/views/page/widgets/CatalogPriceDisplayWidgetView.tsx
+++ b/src/components/catalog/views/page/widgets/CatalogPriceDisplayWidgetView.tsx
@@ -19,19 +19,19 @@ export const CatalogPriceDisplayWidgetView: FC<CatalogPriceDisplayWidgetViewProp
     if(!offer) return null;
 
     return (
-        <>
+        <div className="flex items-center gap-1.5">
             { (offer.priceInCredits > 0) &&
-                <div className="flex items-center gap-1">
-                    <Text bold>{ (offer.priceInCredits * quantity) }</Text>
+                <div className="flex items-center gap-1 bg-warning/15 border border-warning/40 rounded-full px-2 py-0.5">
+                    <Text className="text-[11px]! font-bold text-dark">{ (offer.priceInCredits * quantity) }</Text>
                     <LayoutCurrencyIcon type={ -1 } />
                 </div> }
             { separator && (offer.priceInCredits > 0) && (offer.priceInActivityPoints > 0) &&
-                <FaPlus className="fa-icon" color="black" size="xs" /> }
+                <FaPlus className="text-[7px] text-muted" /> }
             { (offer.priceInActivityPoints > 0) &&
-                <div className="flex items-center gap-1">
-                    <Text bold>{ (offer.priceInActivityPoints * quantity) }</Text>
+                <div className="flex items-center gap-1 bg-purple/15 border border-purple/40 rounded-full px-2 py-0.5">
+                    <Text className="text-[11px]! font-bold text-dark">{ (offer.priceInActivityPoints * quantity) }</Text>
                     <LayoutCurrencyIcon type={ offer.activityPointType } />
                 </div> }
-        </>
+        </div>
     );
 };
diff --git a/src/components/catalog/views/page/widgets/CatalogSpinnerWidgetView.tsx b/src/components/catalog/views/page/widgets/CatalogSpinnerWidgetView.tsx
index d0116c1..6b543a1 100644
--- a/src/components/catalog/views/page/widgets/CatalogSpinnerWidgetView.tsx
+++ b/src/components/catalog/views/page/widgets/CatalogSpinnerWidgetView.tsx
@@ -1,11 +1,10 @@
 import { FC } from 'react';
-import { FaCaretLeft, FaCaretRight } from 'react-icons/fa';
+import { FaMinus, FaPlus } from 'react-icons/fa';
 import { LocalizeText } from '../../../../../api';
-import { Text } from '../../../../../common';
 import { useCatalog } from '../../../../../hooks';
 
 const MIN_VALUE: number = 1;
-const MAX_VALUE: number = 100;
+const MAX_VALUE: number = 99;
 
 export const CatalogSpinnerWidgetView: FC<{}> = props =>
 {
@@ -34,13 +33,28 @@ export const CatalogSpinnerWidgetView: FC<{}> = props =>
     if(!currentOffer || !currentOffer.bundlePurchaseAllowed) return null;
 
     return (
-        <>
-            <Text>{ LocalizeText('catalog.bundlewidget.spinner.select.amount') }</Text>
-            <div className="flex items-center gap-1">
-                <FaCaretLeft className="text-black cursor-pointer fa-icon" onClick={ event => updateQuantity(quantity - 1) } />
-                <input className="[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none min-h-[17px] h-[17px] w-[28px] px-[4px] py-0 text-right  rounded-[.2rem]" type="number" value={ quantity } onChange={ event => updateQuantity(event.target.valueAsNumber) } />
-                <FaCaretRight className="text-black cursor-pointer fa-icon" onClick={ event => updateQuantity(quantity + 1) } />
+        <div className="flex items-center gap-1.5">
+            <span className="text-[10px] text-muted whitespace-nowrap">{ LocalizeText('catalog.bundlewidget.spinner.select.amount') }</span>
+            <div className="flex items-center rounded overflow-hidden border-2 border-card-grid-item-border">
+                <button
+                    className="w-[24px] h-[24px] flex items-center justify-center bg-card-grid-item hover:bg-card-grid-item-active transition-colors cursor-pointer border-r border-card-grid-item-border"
+                    onClick={ event => updateQuantity(quantity - 1) }
+                >
+                    <FaMinus className="text-[7px] text-dark" />
+                </button>
+                <input
+                    className="w-[40px] h-[24px] text-center text-[11px] font-bold bg-white border-x border-card-grid-item-border [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none focus:outline-none"
+                    type="number"
+                    value={ quantity }
+                    onChange={ event => updateQuantity(event.target.valueAsNumber) }
+                />
+                <button
+                    className="w-[24px] h-[24px] flex items-center justify-center bg-card-grid-item hover:bg-card-grid-item-active transition-colors cursor-pointer border-l border-card-grid-item-border"
+                    onClick={ event => updateQuantity(quantity + 1) }
+                >
+                    <FaPlus className="text-[7px] text-dark" />
+                </button>
             </div>
-        </>
+        </div>
     );
 };
diff --git a/src/components/interface-settings/InterfaceColorTabView.tsx b/src/components/interface-settings/InterfaceColorTabView.tsx
new file mode 100644
index 0000000..70c9fb6
--- /dev/null
+++ b/src/components/interface-settings/InterfaceColorTabView.tsx
@@ -0,0 +1,288 @@
+import { RgbaColorPicker, RgbaColor } from 'react-colorful';
+import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { FaUndo, FaTrash, FaDownload, FaUpload } from 'react-icons/fa';
+import { LocalizeText, PRESET_COLORS, THEME_PRESETS, useUiSettings } from '../../api';
+import { Flex, Text } from '../../common';
+
+const hexToRgba = (hex: string, a = 1): RgbaColor =>
+{
+    const num = parseInt(hex.replace('#', ''), 16);
+    return { r: (num >> 16) & 0xFF, g: (num >> 8) & 0xFF, b: num & 0xFF, a };
+};
+
+const rgbaToHex = (rgba: RgbaColor): string =>
+{
+    return '#' + ((1 << 24) + (rgba.r << 16) + (rgba.g << 8) + rgba.b).toString(16).slice(1);
+};
+
+export const InterfaceColorTabView: FC<{}> = () =>
+{
+    const { settings, updateSettings, resetSettings } = useUiSettings();
+    const [ color, setColor ] = useState<RgbaColor>(() => hexToRgba(settings.headerColor, settings.headerAlpha / 100));
+    const [ importValue, setImportValue ] = useState('');
+    const [ showImport, setShowImport ] = useState(false);
+    const [ copyFeedback, setCopyFeedback ] = useState(false);
+    const previewTimerRef = useRef<ReturnType<typeof setTimeout>>(null);
+
+    const hexColor = useMemo(() => rgbaToHex(color), [ color ]);
+    const alphaPercent = useMemo(() => Math.round((color.a ?? 1) * 100), [ color ]);
+
+    // Live preview con debounce
+    useEffect(() =>
+    {
+        if(previewTimerRef.current) clearTimeout(previewTimerRef.current);
+
+        previewTimerRef.current = setTimeout(() =>
+        {
+            updateSettings({
+                colorMode: 'color',
+                headerColor: hexColor,
+                headerAlpha: alphaPercent
+            });
+        }, 50);
+
+        return () =>
+        {
+            if(previewTimerRef.current) clearTimeout(previewTimerRef.current);
+        };
+    }, [ hexColor, alphaPercent ]);
+
+    const onHexInput = useCallback((value: string) =>
+    {
+        const clean = value.replace(/[^0-9a-fA-F]/g, '').slice(0, 6);
+        if(clean.length === 6)
+        {
+            const rgba = hexToRgba('#' + clean, color.a);
+            setColor(rgba);
+        }
+    }, [ color.a ]);
+
+    const onRgbInput = useCallback((channel: 'r' | 'g' | 'b', value: number) =>
+    {
+        const clamped = Math.max(0, Math.min(255, value || 0));
+        setColor(prev => ({ ...prev, [channel]: clamped }));
+    }, []);
+
+    const onAlphaInput = useCallback((value: number) =>
+    {
+        const clamped = Math.max(0, Math.min(100, value || 0));
+        setColor(prev => ({ ...prev, a: clamped / 100 }));
+    }, []);
+
+    const onPresetClick = useCallback((presetHex: string) =>
+    {
+        setColor(hexToRgba(presetHex, color.a));
+    }, [ color.a ]);
+
+    const onThemeClick = useCallback((themeColor: string, themeAlpha: number) =>
+    {
+        setColor(hexToRgba(themeColor, themeAlpha / 100));
+    }, []);
+
+    const onReset = useCallback(() =>
+    {
+        resetSettings();
+        setColor(hexToRgba('#1E7295', 1));
+    }, [ resetSettings ]);
+
+    const onDelete = useCallback(() =>
+    {
+        updateSettings({ colorMode: 'default' });
+        setColor(hexToRgba('#1E7295', 1));
+    }, [ updateSettings ]);
+
+    const onExport = useCallback(() =>
+    {
+        const data = JSON.stringify({
+            color: hexColor,
+            alpha: alphaPercent,
+            mode: settings.colorMode,
+            image: settings.headerImageUrl
+        });
+
+        navigator.clipboard.writeText(data);
+        setCopyFeedback(true);
+        setTimeout(() => setCopyFeedback(false), 2000);
+    }, [ hexColor, alphaPercent, settings ]);
+
+    const onImport = useCallback(() =>
+    {
+        try
+        {
+            const data = JSON.parse(importValue);
+
+            if(data.color)
+            {
+                const alpha = data.alpha ?? 100;
+                setColor(hexToRgba(data.color, alpha / 100));
+                updateSettings({
+                    colorMode: data.mode || 'color',
+                    headerColor: data.color,
+                    headerAlpha: alpha,
+                    headerImageUrl: data.image || ''
+                });
+            }
+
+            setImportValue('');
+            setShowImport(false);
+        }
+        catch(e) {}
+    }, [ importValue, updateSettings ]);
+
+    return (
+        <Flex column gap={ 2 } className="items-center p-2">
+            {/* Color picker */}
+            <div className="w-[280px]">
+                <RgbaColorPicker color={ color } onChange={ setColor } style={ { width: '100%', height: '180px' } } />
+            </div>
+
+            {/* Color preview swatch */}
+            <div
+                className="w-[280px] h-[32px] rounded border border-black/20"
+                style={ { backgroundColor: `rgba(${ color.r }, ${ color.g }, ${ color.b }, ${ color.a })` } }
+            />
+
+            {/* Hex/RGB/A inputs */}
+            <Flex gap={ 1 } className="items-center mt-1">
+                <Flex column className="items-center">
+                    <input
+                        className="form-control form-control-sm text-center w-[70px]"
+                        value={ hexColor.replace('#', '').toUpperCase() }
+                        onChange={ e => onHexInput(e.target.value) }
+                        maxLength={ 6 }
+                    />
+                    <Text small className="text-black">Hex</Text>
+                </Flex>
+                <Flex column className="items-center">
+                    <input
+                        type="number"
+                        className="form-control form-control-sm text-center w-[45px]"
+                        value={ color.r }
+                        onChange={ e => onRgbInput('r', parseInt(e.target.value)) }
+                        min={ 0 } max={ 255 }
+                    />
+                    <Text small className="text-black">R</Text>
+                </Flex>
+                <Flex column className="items-center">
+                    <input
+                        type="number"
+                        className="form-control form-control-sm text-center w-[45px]"
+                        value={ color.g }
+                        onChange={ e => onRgbInput('g', parseInt(e.target.value)) }
+                        min={ 0 } max={ 255 }
+                    />
+                    <Text small className="text-black">G</Text>
+                </Flex>
+                <Flex column className="items-center">
+                    <input
+                        type="number"
+                        className="form-control form-control-sm text-center w-[45px]"
+                        value={ color.b }
+                        onChange={ e => onRgbInput('b', parseInt(e.target.value)) }
+                        min={ 0 } max={ 255 }
+                    />
+                    <Text small className="text-black">B</Text>
+                </Flex>
+                <Flex column className="items-center">
+                    <input
+                        type="number"
+                        className="form-control form-control-sm text-center w-[45px]"
+                        value={ alphaPercent }
+                        onChange={ e => onAlphaInput(parseInt(e.target.value)) }
+                        min={ 0 } max={ 100 }
+                    />
+                    <Text small className="text-black">A</Text>
+                </Flex>
+            </Flex>
+
+            {/* Preset colors */}
+            <div className="grid grid-cols-10 gap-0.5 mt-1">
+                { PRESET_COLORS.map((presetHex, i) => (
+                    <div
+                        key={ i }
+                        className={ `w-[24px] h-[24px] rounded cursor-pointer border hover:scale-110 transition-transform ${ hexColor.toUpperCase() === presetHex.toUpperCase() ? 'border-white border-2 scale-110' : 'border-black/20' }` }
+                        style={ { backgroundColor: presetHex } }
+                        onClick={ () => onPresetClick(presetHex) }
+                    />
+                )) }
+            </div>
+
+            {/* Theme presets */}
+            <Text small bold className="text-black mt-2">{ LocalizeText('interface.settings.color.themes') }</Text>
+            <div className="grid grid-cols-6 gap-1 w-full">
+                { THEME_PRESETS.map((theme) => (
+                    <div
+                        key={ theme.name }
+                        className={ `flex flex-col items-center gap-0.5 p-1 rounded cursor-pointer hover:bg-black/5 transition-colors ${ hexColor.toUpperCase() === theme.color.toUpperCase() ? 'ring-2 ring-white' : '' }` }
+                        onClick={ () => onThemeClick(theme.color, theme.alpha) }
+                    >
+                        <div
+                            className="w-[32px] h-[32px] rounded-full border border-black/20"
+                            style={ { backgroundColor: theme.color, opacity: theme.alpha / 100 } }
+                        />
+                        <Text small className="text-black text-[10px]">{ LocalizeText(`interface.settings.theme.${ theme.name }`) }</Text>
+                    </div>
+                )) }
+            </div>
+
+            {/* Action buttons */}
+            <Flex gap={ 1 } className="w-full mt-2">
+                <button
+                    className="flex-1 flex items-center justify-center gap-1 py-2 rounded cursor-pointer text-white text-xs"
+                    style={ { backgroundColor: '#5f9ea0' } }
+                    onClick={ onReset }
+                    title={ LocalizeText('interface.settings.color.reset') }
+                >
+                    <FaUndo size={ 12 } />
+                    { LocalizeText('interface.settings.color.reset') }
+                </button>
+                <button
+                    className="flex-1 flex items-center justify-center gap-1 py-2 rounded cursor-pointer text-white text-xs"
+                    style={ { backgroundColor: '#c0392b' } }
+                    onClick={ onDelete }
+                    title={ LocalizeText('interface.settings.color.remove') }
+                >
+                    <FaTrash size={ 12 } />
+                    { LocalizeText('interface.settings.color.remove') }
+                </button>
+                <button
+                    className="flex-1 flex items-center justify-center gap-1 py-2 rounded cursor-pointer text-white text-xs"
+                    style={ { backgroundColor: '#2980b9' } }
+                    onClick={ onExport }
+                    title={ LocalizeText('interface.settings.color.export') }
+                >
+                    <FaDownload size={ 12 } />
+                    { copyFeedback ? LocalizeText('interface.settings.color.copied') : LocalizeText('interface.settings.color.export') }
+                </button>
+                <button
+                    className="flex-1 flex items-center justify-center gap-1 py-2 rounded cursor-pointer text-white text-xs"
+                    style={ { backgroundColor: '#27ae60' } }
+                    onClick={ () => setShowImport(!showImport) }
+                    title={ LocalizeText('interface.settings.color.import') }
+                >
+                    <FaUpload size={ 12 } />
+                    { LocalizeText('interface.settings.color.import') }
+                </button>
+            </Flex>
+
+            {/* Import panel */}
+            { showImport && (
+                <Flex gap={ 1 } className="w-full">
+                    <input
+                        className="form-control form-control-sm flex-1"
+                        placeholder={ LocalizeText('interface.settings.color.import.placeholder') }
+                        value={ importValue }
+                        onChange={ e => setImportValue(e.target.value) }
+                    />
+                    <button
+                        className="px-3 py-1 rounded cursor-pointer text-white text-xs"
+                        style={ { backgroundColor: '#27ae60' } }
+                        onClick={ onImport }
+                    >
+                        OK
+                    </button>
+                </Flex>
+            ) }
+        </Flex>
+    );
+};
diff --git a/src/components/interface-settings/InterfaceImageTabView.tsx b/src/components/interface-settings/InterfaceImageTabView.tsx
new file mode 100644
index 0000000..390a390
--- /dev/null
+++ b/src/components/interface-settings/InterfaceImageTabView.tsx
@@ -0,0 +1,52 @@
+import { FC, useCallback, useMemo } from 'react';
+import { GetConfigurationValue, useUiSettings } from '../../api';
+
+export const InterfaceImageTabView: FC<{}> = () =>
+{
+    const { settings, updateSettings } = useUiSettings();
+
+    const imageCount = useMemo(() =>
+    {
+        return GetConfigurationValue<number>('ui.header.images.count', 30);
+    }, []);
+
+    const baseUrl = useMemo(() =>
+    {
+        return GetConfigurationValue<string>('ui.header.images.url', 'https://image.webbo.city/image/headerImage/image{id}.gif');
+    }, []);
+
+    const images = useMemo(() =>
+    {
+        const result: string[] = [];
+        for(let i = 1; i <= imageCount; i++)
+        {
+            result.push(baseUrl.replace('{id}', String(i)));
+        }
+        return result;
+    }, [ imageCount, baseUrl ]);
+
+    const onImageSelect = useCallback((url: string) =>
+    {
+        updateSettings({
+            colorMode: 'image',
+            headerImageUrl: url
+        });
+    }, [ updateSettings ]);
+
+    return (
+        <div className="grid grid-cols-8 gap-1 p-2 overflow-auto max-h-[400px]">
+            { images.map((url, i) => (
+                <div
+                    key={ i }
+                    className={ `w-[75px] h-[75px] rounded cursor-pointer border-2 transition-all hover:scale-105 ${ (settings.colorMode === 'image' && settings.headerImageUrl === url) ? 'border-white shadow-lg' : 'border-transparent' }` }
+                    style={ {
+                        backgroundImage: `url(${ url })`,
+                        backgroundSize: 'cover',
+                        backgroundPosition: 'center'
+                    } }
+                    onClick={ () => onImageSelect(url) }
+                />
+            )) }
+        </div>
+    );
+};
diff --git a/src/hooks/catalog/index.ts b/src/hooks/catalog/index.ts
index 75d2984..e12e2da 100644
--- a/src/hooks/catalog/index.ts
+++ b/src/hooks/catalog/index.ts
@@ -1,3 +1,4 @@
 export * from './useCatalog';
+export * from './useCatalogFavorites';
 export * from './useCatalogPlaceMultipleItems';
 export * from './useCatalogSkipPurchaseConfirmation';
diff --git a/src/hooks/catalog/useCatalogFavorites.ts b/src/hooks/catalog/useCatalogFavorites.ts
new file mode 100644
index 0000000..bfa0381
--- /dev/null
+++ b/src/hooks/catalog/useCatalogFavorites.ts
@@ -0,0 +1,129 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useBetween } from 'use-between';
+
+export interface IFavoriteOffer
+{
+    offerId: number;
+    name?: string;
+    iconUrl?: string;
+}
+
+const STORAGE_KEY_OFFERS = 'catalog_fav_offers_v2';
+const STORAGE_KEY_PAGES = 'catalog_fav_pages';
+
+const readOffers = (): IFavoriteOffer[] =>
+{
+    try
+    {
+        const raw = localStorage.getItem(STORAGE_KEY_OFFERS);
+        if(!raw) return [];
+        const parsed = JSON.parse(raw);
+        if(!Array.isArray(parsed)) return [];
+
+        // migrate from old format (number[]) to new format (IFavoriteOffer[])
+        if(parsed.length > 0 && typeof parsed[0] === 'number')
+        {
+            return (parsed as number[]).map(id => ({ offerId: id }));
+        }
+
+        return parsed;
+    }
+    catch
+    {
+        return [];
+    }
+};
+
+const readPages = (): number[] =>
+{
+    try
+    {
+        const raw = localStorage.getItem(STORAGE_KEY_PAGES);
+        if(!raw) return [];
+        const parsed = JSON.parse(raw);
+        return Array.isArray(parsed) ? parsed : [];
+    }
+    catch
+    {
+        return [];
+    }
+};
+
+const writeOffers = (offers: IFavoriteOffer[]) =>
+{
+    localStorage.setItem(STORAGE_KEY_OFFERS, JSON.stringify(offers));
+};
+
+const writePages = (ids: number[]) =>
+{
+    localStorage.setItem(STORAGE_KEY_PAGES, JSON.stringify(ids));
+};
+
+const useCatalogFavoritesState = () =>
+{
+    const [ favoriteOffers, setFavoriteOffers ] = useState<IFavoriteOffer[]>([]);
+    const [ favoritePageIds, setFavoritePageIds ] = useState<number[]>([]);
+    const [ loaded, setLoaded ] = useState(false);
+
+    const favoriteOfferIds = favoriteOffers.map(f => f.offerId);
+
+    const loadFavorites = useCallback(() =>
+    {
+        setFavoriteOffers(readOffers());
+        setFavoritePageIds(readPages());
+        setLoaded(true);
+    }, []);
+
+    useEffect(() =>
+    {
+        if(!loaded) loadFavorites();
+    }, [ loaded, loadFavorites ]);
+
+    const toggleFavoriteOffer = useCallback((offerId: number, name?: string, iconUrl?: string) =>
+    {
+        setFavoriteOffers(prev =>
+        {
+            const exists = prev.find(f => f.offerId === offerId);
+
+            if(exists)
+            {
+                const next = prev.filter(f => f.offerId !== offerId);
+                writeOffers(next);
+                return next;
+            }
+
+            const next = [ ...prev, { offerId, name, iconUrl } ];
+            writeOffers(next);
+            return next;
+        });
+    }, []);
+
+    const toggleFavoritePage = useCallback((pageId: number) =>
+    {
+        setFavoritePageIds(prev =>
+        {
+            const next = prev.includes(pageId) ? prev.filter(id => id !== pageId) : [ ...prev, pageId ];
+            writePages(next);
+            return next;
+        });
+    }, []);
+
+    const isFavoriteOffer = useCallback((offerId: number) =>
+    {
+        return favoriteOffers.some(f => f.offerId === offerId);
+    }, [ favoriteOffers ]);
+
+    const isFavoritePage = useCallback((pageId: number) =>
+    {
+        return favoritePageIds.includes(pageId);
+    }, [ favoritePageIds ]);
+
+    const getFavoriteOffer = useCallback((offerId: number): IFavoriteOffer | undefined =>
+    {
+        return favoriteOffers.find(f => f.offerId === offerId);
+    }, [ favoriteOffers ]);
+
+    return { favoriteOffers, favoriteOfferIds, favoritePageIds, loaded, loadFavorites, toggleFavoriteOffer, toggleFavoritePage, isFavoriteOffer, isFavoritePage, getFavoriteOffer };
+};
+
+export const useCatalogFavorites = () => useBetween(useCatalogFavoritesState);